fix(backups): default S3 storage for backup schedules

Show the S3 storage selector even when S3 backups are disabled, save
storage changes immediately, and improve responsive confirmation buttons.

resources/views/livewire/project/database/backup-edit.blade.php

@@ -1,7 +1,7 @@
 <form wire:submit="submit">
-    <div class="flex flex-col gap-3 pb-4 sm:flex-row sm:items-start sm:justify-between">
+    <div class="flex flex-col gap-3 pb-4 sm:flex-row sm:items-center">
         <h2>Scheduled Backup</h2>
-        <div class="grid grid-cols-1 gap-2 min-[420px]:grid-cols-2 sm:flex sm:flex-wrap sm:justify-end">
+        <div class="flex flex-col gap-2 sm:flex-row sm:flex-wrap">
             <x-forms.button type="submit" class="w-full sm:w-auto">
                 Save
             </x-forms.button>
@@ -9,16 +9,19 @@
                 <x-forms.button wire:click='backupNow' class="w-full sm:w-auto">Backup Now</x-forms.button>
             @endif
             @if ($backup->database_id !== 0)
-                <div class="min-[420px]:col-span-2 sm:col-span-1">
-                    <x-modal-confirmation title="Confirm Backup Schedule Deletion?"
-                        buttonTitle="Delete Backups and Schedule" buttonFullWidth isErrorButton submitAction="delete"
+                <div class="w-full sm:w-auto">
+                    <x-modal-confirmation title="Confirm Backup Schedule Deletion?" isErrorButton submitAction="delete"
                         :checkboxes="$checkboxes" :actions="[
                             'The selected backup schedule will be deleted.',
                             'Scheduled backups for this database will be stopped (if this is the only backup schedule for this database).',
                         ]"
                         confirmationText="{{ $backup->database->name }}"
                         confirmationLabel="Please confirm the execution of the actions by entering the Database Name of the scheduled backups below"
-                        shortConfirmationLabel="Database Name" />
+                        shortConfirmationLabel="Database Name">
+                        <x-slot:trigger>
+                            <x-forms.button isError class="w-full sm:w-auto">Delete Backups and Schedule</x-forms.button>
+                        </x-slot:trigger>
+                    </x-modal-confirmation>
                 </div>
             @endif
         </div>
@@ -39,16 +42,27 @@
                 helper="When enabled, backup files will be deleted from local storage immediately after uploading to S3. This requires S3 backup to be enabled." />
         @endif
     </div>
-    @if ($saveS3)
-        <div class="w-full max-w-md pb-6">
-            <x-forms.select id="s3StorageId" label="S3 Storage" required>
-                <option value="default" disabled>Select a S3 storage</option>
+    <div class="w-full max-w-md pb-6">
+        <div class="flex gap-1 items-center mb-1 text-sm font-medium">
+            <span>S3 Storage</span>
+            @if (!$saveS3)
+                <span class="text-xs font-normal text-warning">(currently disabled)</span>
+            @endif
+            @if ($saveS3)
+                <x-highlighted text="*" />
+            @endif
+        </div>
+        <x-forms.select id="s3StorageId" wire:model.live="s3StorageId" :required="$saveS3"
+            :disabled="$availableS3Storages->isEmpty()">
+            @if ($availableS3Storages->isEmpty())
+                <option value="">No S3 storage available</option>
+            @else
                 @foreach ($availableS3Storages as $s3)
                     <option value="{{ $s3->id }}">{{ $s3->name }}</option>
                 @endforeach
-            </x-forms.select>
-        </div>
-    @endif
+            @endif
+        </x-forms.select>
+    </div>
     <div class="flex flex-col gap-2">
         <h3>Settings</h3>
         <div class="flex gap-2 flex-col ">