Update playlist sidebar to use livewire

2026-08-04 18:33:50 +02:00
parent 7f9573fe0f
commit 9dcf13a62e
10 changed files with 472 additions and 205 deletions
@@ -0,0 +1,58 @@
+@props([
+    'playlistEpisode',
+    'isActive' => false,
+    'isOwner' => false,
+])
+
+@php
+    $episode = $playlistEpisode->episode;
+@endphp
+
+<div
+    wire:key="playlist-sidebar-row-{{ $playlistEpisode->id }}"
+    @if ($isActive) data-active-row aria-current="true" @endif
+    class="group relative flex h-20 shrink-0 items-center gap-3 px-2.5 transition {{ $isActive ? 'bg-rose-600/10 dark:bg-rose-500/10' : 'hover:bg-neutral-100 dark:hover:bg-neutral-900' }}"
+>
+    @if ($isActive)
+        <span class="absolute inset-y-0 left-0 w-1 bg-rose-600"></span>
+    @endif
+
+    <div class="flex h-7 w-7 shrink-0 items-center justify-center text-sm text-neutral-500 dark:text-neutral-400">
+        @if ($isActive)
+            <i class="fa-solid fa-play text-rose-600 dark:text-rose-400"></i>
+        @else
+            {{ $playlistEpisode->position }}
+        @endif
+    </div>
+
+    <a href="{{ route('hentai.index', ['title' => $episode->slug, 'playlist' => $playlistEpisode->playlist_id]) }}" class="shrink-0">
+        <img
+            src="{{ $episode->gallery->first()?->thumbnail_url }}"
+            alt="{{ $episode->title }} - {{ $episode->episode }}"
+            loading="{{ $isActive ? 'eager' : 'lazy' }}"
+            decoding="async"
+            width="100"
+            class="h-14 w-[100px] rounded-md object-cover {{ $isActive ? 'ring-2 ring-rose-600/60' : '' }}"
+        >
+    </a>
+
+    <div class="min-w-0 flex-1">
+        <a href="{{ route('hentai.index', ['title' => $episode->slug, 'playlist' => $playlistEpisode->playlist_id]) }}"
+            class="block truncate text-sm font-semibold text-neutral-900 transition hover:text-rose-500 dark:text-white dark:hover:text-rose-400">
+            {{ $episode->title }}
+        </a>
+        <p class="truncate text-xs text-neutral-500 dark:text-neutral-400">{{ $episode->studio->name }}</p>
+    </div>
+
+    @if ($isOwner)
+        <button
+            type="button"
+            wire:click="remove({{ $playlistEpisode->id }})"
+            wire:confirm="{{ __('playlist.remove-confirm') }}"
+            aria-label="{{ __('playlist.remove') }}"
+            class="shrink-0 rounded-md p-2 text-neutral-400 transition hover:bg-red-50 hover:text-red-600 sm:opacity-0 sm:group-hover:opacity-100 dark:text-neutral-500 dark:hover:bg-red-950/40 dark:hover:text-red-400"
+        >
+            <i class="fa-solid fa-trash-can"></i>
+        </button>
+    @endif
+</div>