Update playlist design

2026-08-04 15:29:39 +02:00
parent 7553b9f895
commit 7f9573fe0f
13 changed files with 632 additions and 132 deletions
@@ -0,0 +1,73 @@
+@props([
+    'playlistEpisode',
+    'isOwner' => false,
+])
+
+@php
+    $episode = $playlistEpisode->episode;
+@endphp
+
+<div wire:key="playlist-episode-{{ $playlistEpisode->id }}"
+    class="group flex items-center gap-3 sm:gap-4 rounded-xl border border-neutral-200/70 bg-white p-2.5 sm:p-3 shadow-sm transition hover:border-rose-400/40 hover:bg-rose-50 dark:border-neutral-800 dark:bg-neutral-950 dark:hover:bg-neutral-900">
+    <div
+        class="h-8 w-8 shrink-0 rounded-full bg-neutral-100 text-sm font-bold text-neutral-500 flex items-center justify-center dark:bg-neutral-800 dark:text-neutral-400">
+        {{ $playlistEpisode->position }}
+    </div>
+
+    <a href="{{ route('hentai.index', ['title' => $episode->slug]) }}" class="shrink-0">
+        <img src="{{ $episode->gallery->first()?->thumbnail_url }}"
+            alt="{{ $episode->title }} - {{ $episode->episode }}" loading="lazy" width="160"
+            class="aspect-video w-24 sm:w-36 rounded-lg object-cover transition-transform duration-300 group-hover:scale-105">
+    </a>
+
+    <div class="min-w-0 flex-1">
+        <a href="{{ route('hentai.index', ['title' => $episode->slug]) }}"
+            class="block truncate font-bold text-neutral-900 transition hover:text-rose-500 dark:text-white dark:hover:text-rose-400">
+            {{ $episode->title }} - {{ $episode->episode }}
+        </a>
+
+        @if ($episode->title_jpn)
+            <p class="truncate text-sm text-neutral-500 dark:text-neutral-400">{{ $episode->title_jpn }}</p>
+        @endif
+
+        <div class="mt-1.5 flex flex-wrap items-center gap-1.5 text-[11px] font-semibold">
+            <span class="rounded-full bg-black/70 px-2 py-0.5 text-white ring-1 ring-white/10 dark:bg-neutral-700">
+                {{ $episode->getResolution() }}
+            </span>
+            <span class="flex items-center gap-1 text-neutral-500 dark:text-neutral-400">
+                <i class="fa-regular fa-eye"></i> {{ $episode->viewCountFormatted() }}
+            </span>
+            <span class="flex items-center gap-1 text-neutral-500 dark:text-neutral-400">
+                <i class="fa-regular fa-heart"></i> {{ $episode->likeCount() }}
+            </span>
+            <span class="flex items-center gap-1 text-neutral-500 dark:text-neutral-400">
+                <i class="fa-regular fa-comment"></i> {{ $episode->commentCount() }}
+            </span>
+            @auth
+                @if ($episode->userWatched(auth()->id()))
+                    <span
+                        class="flex items-center gap-1 rounded-full bg-emerald-800/40 px-2 py-0.5 text-emerald-300 ring-1 ring-emerald-500/30">
+                        <i class="fa-solid fa-eye"></i> {{ __('playlist.watched') }}
+                    </span>
+                @endif
+            @endauth
+        </div>
+    </div>
+
+    @if ($isOwner)
+        <div class="flex shrink-0 items-center gap-1">
+            <button type="button" wire:click="moveUp({{ $playlistEpisode->id }})"
+                class="h-8 w-8 rounded-lg text-neutral-500 transition hover:bg-neutral-100 hover:text-rose-500 dark:text-neutral-400 dark:hover:bg-neutral-800">
+                <i class="fa-solid fa-arrow-up"></i>
+            </button>
+            <button type="button" wire:click="moveDown({{ $playlistEpisode->id }})"
+                class="h-8 w-8 rounded-lg text-neutral-500 transition hover:bg-neutral-100 hover:text-rose-500 dark:text-neutral-400 dark:hover:bg-neutral-800">
+                <i class="fa-solid fa-arrow-down"></i>
+            </button>
+            <button type="button" wire:click="remove({{ $playlistEpisode->id }})"
+                class="h-8 w-8 rounded-lg text-red-500 transition hover:bg-red-50 dark:hover:bg-red-950/40">
+                <i class="fa-solid fa-trash-can"></i>
+            </button>
+        </div>
+    @endif
+</div>