Move recordings UI to Livewire pages with Flux components.

Replace controller-driven Blade views with full-page Livewire index/show/create flows so Flux tables, toasts, and uploads work natively.
2026-08-12 19:17:52 +02:00
parent bfcfc12f58
commit 34ccf0c32b
37 changed files with 1482 additions and 1103 deletions
@@ -0,0 +1,67 @@
+<div
+    class="max-w-2xl space-y-6 rounded border border-stone-200 bg-white p-6 shadow-sm dark:border-zinc-700 dark:bg-zinc-800"
+    x-data="{ uploading: false, progress: 0 }"
+    x-on:livewire-upload-start="uploading = true; progress = 0"
+    x-on:livewire-upload-finish="uploading = false; progress = 100"
+    x-on:livewire-upload-error="uploading = false"
+    x-on:livewire-upload-progress="progress = $event.detail.progress"
+>
+    <flux:input
+        wire:model="title"
+        label="Title (optional)"
+        description="Used when you upload a single file. Leave blank to use embedded title or filename."
+        placeholder="Leave blank to use embedded title or filename"
+    />
+
+    <div>
+        <flux:label>Audio files</flux:label>
+
+        <div
+            wire:drop.file="$upload('audio', { multiple: true, accept: '.mp3,.wav,.ogg,.oga,.flac,.m4a,.mp4,.aac,.webm,.wma,.aiff,.aif,audio/*' })"
+            wire:click="$upload('audio', { multiple: true, accept: '.mp3,.wav,.ogg,.oga,.flac,.m4a,.mp4,.aac,.webm,.wma,.aiff,.aif,audio/*' })"
+            role="button"
+            tabindex="0"
+            wire:keydown.enter="$upload('audio', { multiple: true, accept: '.mp3,.wav,.ogg,.oga,.flac,.m4a,.mp4,.aac,.webm,.wma,.aiff,.aif,audio/*' })"
+            class="mt-2 flex cursor-pointer flex-col items-center justify-center rounded-lg border border-dashed border-zinc-300 bg-zinc-50 px-6 py-10 text-center transition-colors data-dragging:border-accent data-dragging:bg-accent/5 dark:border-white/20 dark:bg-white/5 dark:data-dragging:border-accent dark:data-dragging:bg-accent/10"
+        >
+            <div class="mb-3 flex size-12 items-center justify-center rounded-full bg-white shadow-sm ring-1 ring-zinc-200 dark:bg-zinc-800 dark:ring-white/10">
+                <flux:icon.cloud-arrow-up class="size-6 text-zinc-500 dark:text-zinc-400" />
+            </div>
+
+            <flux:heading size="sm" class="text-zinc-800 dark:text-zinc-100">
+                Drop audio files here or click to browse
+            </flux:heading>
+
+            <flux:text class="mt-1 max-w-sm text-zinc-500 dark:text-zinc-400">
+                MP3, WAV, OGG, FLAC, M4A, AAC, WebM, WMA, or AIFF · max 2 GB each · up to 50 files
+            </flux:text>
+
+            <div
+                x-show="uploading || $wire.saving"
+                x-cloak
+                class="mt-5 w-full max-w-sm space-y-2"
+            >
+                <div class="flex items-center justify-between gap-3 text-xs text-zinc-600 dark:text-zinc-400">
+                    <span x-text="$wire.saving ? 'Saving recordings…' : 'Uploading…'"></span>
+                    <span x-show="uploading" x-text="progress + '%'"></span>
+                </div>
+                <flux:progress color="teal" x-bind:value="uploading ? progress : 100" />
+            </div>
+        </div>
+
+        @error('audio')
+            <flux:error>{{ $message }}</flux:error>
+        @enderror
+        @error('audio.*')
+            <flux:error>{{ $message }}</flux:error>
+        @enderror
+    </div>
+
+    <flux:text class="text-sm text-zinc-500 dark:text-zinc-400">
+        Uploads start as soon as you drop or choose files. Duplicate files (same name and size, or identical content) are skipped.
+    </flux:text>
+
+    <div class="flex items-center gap-3">
+        <flux:link href="{{ route('recordings.index') }}">Cancel</flux:link>
+    </div>
+</div>