refactor(ui): improve cloud-init script save checkbox visibility and styling

Changes:
- Make save checkbox visible by default (not conditionally rendered)
- Disable checkbox when cloud_init_script is empty
- Auto-enable when user types in the script textarea (via Livewire reactivity)
- Remove unnecessary border wrapper around checkbox for cleaner look
- Checkbox styling now matches other checkboxes in the form (no border)

This improves UX by making the save option always discoverable while
preventing users from checking it when there's no script to save.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Andras Bacsai 2025-10-11 10:55:14 +02:00
parent c009c97eb1
commit 05bd57ed51

View file

@ -173,20 +173,19 @@ class="p-4 border border-yellow-500 dark:border-yellow-600 rounded bg-yellow-50
helper="Add a cloud-init script to run when the server is created. See Hetzner's documentation for details."
rows="8" />
@if (!empty($cloud_init_script))
<div class="flex flex-col gap-2 p-3 border border-neutral-200 dark:border-neutral-700 rounded">
<x-forms.checkbox id="save_cloud_init_script" label="Save this script for later use"
helper="Save this cloud-init script to your team's library for reuse" />
<div class="flex flex-col gap-2">
<x-forms.checkbox id="save_cloud_init_script" label="Save this script for later use"
helper="Save this cloud-init script to your team's library for reuse"
:disabled="empty($cloud_init_script)" />
@if ($save_cloud_init_script)
<div class="flex flex-col gap-2 ml-6">
<x-forms.input id="cloud_init_script_name" label="Script Name" required />
<x-forms.textarea id="cloud_init_script_description" label="Description (Optional)"
rows="2" />
</div>
@endif
</div>
@endif
@if ($save_cloud_init_script)
<div class="flex flex-col gap-2 ml-6">
<x-forms.input id="cloud_init_script_name" label="Script Name" required />
<x-forms.textarea id="cloud_init_script_description" label="Description (Optional)"
rows="2" />
</div>
@endif
</div>
</div>
<div class="flex gap-2 justify-between">