From 2b1a967065257e3304df037348a84f03e6e3e793 Mon Sep 17 00:00:00 2001
From: w33b <w33b@hstream.moe>
Date: Sat, 25 Jul 2026 12:38:00 +0200
Subject: [PATCH] Update nav live search design

---
 app/Livewire/NavLiveSearch.php                |   1 +
 .../views/livewire/nav-live-search.blade.php  | 132 +++++++++++++-----
 2 files changed, 97 insertions(+), 36 deletions(-)

diff --git a/app/Livewire/NavLiveSearch.php b/app/Livewire/NavLiveSearch.php
index 12f9cf7..4b2b7c6 100644
--- a/app/Livewire/NavLiveSearch.php
+++ b/app/Livewire/NavLiveSearch.php
@@ -20,6 +20,7 @@ class NavLiveSearch extends Component
         if ($this->navSearch != '') {
             $episodes = Episode::search($this->navSearch)
                 ->when(Auth::guest(), fn ($query) => $query->whereNotIn('tags', ['Loli', 'Shota']))
+                ->query(fn ($query) => $query->with(['gallery', 'studio']))
                 ->take(7)
                 ->get();
         }
diff --git a/resources/views/livewire/nav-live-search.blade.php b/resources/views/livewire/nav-live-search.blade.php
index 4482888..87afd6c 100644
--- a/resources/views/livewire/nav-live-search.blade.php
+++ b/resources/views/livewire/nav-live-search.blade.php
@@ -39,11 +39,12 @@
                 aria-live="polite"
             >
                 <div
-                    class="max-h-[70vh] overflow-auto rounded-2xl bg-white dark:bg-neutral-900 border border-gray-200 dark:border-neutral-700 shadow-lg transition-all transform hidden group-focus-within:block group-focus-within:translate-y-0">
-                    <div class="flex items-center justify-between p-3 border-b border-gray-100 dark:border-neutral-800">
+                    class="w-full max-h-[70vh] overflow-auto rounded-2xl bg-white dark:bg-neutral-900 border border-gray-200 dark:border-neutral-700 shadow-xl transition-all transform hidden group-focus-within:block group-focus-within:translate-y-0">
+                    {{-- Header --}}
+                    <div class="flex items-center justify-between px-5 py-3 border-b border-gray-100 dark:border-neutral-800">
                         <div class="text-sm text-gray-700 dark:text-gray-200 font-medium">
                             @if($episodes->count())
-                                {{ __('Search result for ') }} “{{ $query ?: $navSearch }}”
+                                {{ __('Search result for ') }}<span class="text-rose-600 dark:text-rose-400 font-semibold">"{{ $query ?: $navSearch }}"</span>
                             @else
                                 {{ __('No results') }}
                             @endif
@@ -60,46 +61,105 @@
                         </div>
                     </div>
 
-                    {{-- content area: responsive grid --}}
-                    <div class="p-4">
+                    {{-- Results List --}}
+                    <div>
                         @if($episodes->count())
-                        <div class="grid grid-cols-1 gap-4 md:grid-cols-1 lg:grid-cols-2">
+                        <ul class="divide-y divide-gray-100 dark:divide-neutral-800" role="listbox">
                             @foreach($episodes as $episode)
-                            <a href="{{ route('hentai.index', ['title' => $episode->slug ]) }}" class="group block rounded-xl overflow-hidden bg-neutral-50 dark:bg-neutral-950 border border-transparent hover:border-gray-200 dark:hover:border-neutral-700 shadow-sm hover:shadow-md transition">
-                                <div class="relative aspect-video">
-                                    <img
-                                        alt="{{ $episode->title }} - {{ $episode->episode }}"
-                                        loading="lazy"
-                                        class="object-cover w-full h-full"
-                                        src="{{ $episode->gallery->first()->thumbnail_url }}"
-                                    >
-                                    <span class="absolute right-0 top-0 bg-white/90 dark:bg-neutral-800/80 dark:text-white text-xs font-semibold rounded-tr rounded-bl-xl px-2 py-1">{{ $episode->getResolution() }}</span>
-                                    <div class="absolute left-0 bottom-0 bg-white/90 dark:bg-neutral-800/80 dark:text-white text-xs rounded-tr-xl px-2 py-1 font-medium">
-                                        <i class="fa-regular fa-eye mr-1"></i> {{ $episode->viewCountFormatted() }}
-                                        <i class="fa-regular fa-heart ml-2"></i> {{ $episode->likeCount() }}
+                            <li role="option" aria-selected="false">
+                                <a href="{{ route('hentai.index', ['title' => $episode->slug ]) }}"
+                                   class="flex items-center gap-4 px-5 py-2 group/row hover:bg-rose-50/60 dark:hover:bg-rose-950/30 transition-colors duration-150"
+                                >
+                                    {{-- Left: Cover Image --}}
+                                    <div class="flex-shrink-0 relative">
+                                        <div class="w-16 h-[6rem] rounded-lg overflow-hidden ring-1 ring-gray-200/80 dark:ring-neutral-700/80 shadow-sm group-hover/row:ring-rose-300 dark:group-hover/row:ring-rose-700 group-hover/row:shadow-md transition-all duration-200">
+                                            <img
+                                                alt="{{ $episode->title }} - {{ $episode->episode }}"
+                                                loading="lazy"
+                                                class="object-cover w-full h-full group-hover/row:scale-105 transition-transform duration-300"
+                                                src="{{ $episode->cover_url }}"
+                                            >
+                                        </div>
+                                        <span class="absolute -top-1.5 -right-1.5 bg-rose-600 text-white text-[0.6rem] font-bold leading-none px-1.5 py-0.5 rounded-md shadow-sm">
+                                            E{{ $episode->episode }}
+                                        </span>
                                     </div>
-                                </div>
-                                <div class="p-3">
-                                    <h3 class="text-sm font-semibold truncate text-gray-900 dark:text-white">{{ $episode->title }} - {{ $episode->episode }}</h3>
-                                    <p class="text-xs text-gray-500 dark:text-gray-400 mt-1 truncate"> {{ \Illuminate\Support\Str::limit($episode->description ?? '', 80) }}</p>
-                                </div>
-                            </a>
+
+                                    {{-- Center: Title, Publisher, Tags --}}
+                                    <div class="flex-1 min-w-0">
+                                        {{-- Row 1: Title --}}
+                                        <h3 class="text-sm font-semibold text-gray-900 dark:text-white truncate group-hover/row:text-rose-700 dark:group-hover/row:text-rose-400 transition-colors duration-150">
+                                            {{ $episode->title }}
+                                        </h3>
+
+                                        {{-- Row 2: Publisher --}}
+                                        <p class="text-xs text-gray-500 dark:text-gray-400 mt-1 truncate">
+                                            <i class="fa-regular fa-building mr-1 text-[0.65rem] opacity-70"></i>
+                                            {{ $episode->studio?->name ?? __('Unknown') }}
+                                        </p>
+
+                                        {{-- Row 3: Tags --}}
+                                        <div class="mt-1.5 flex items-center gap-1 flex-wrap">
+                                            @php
+                                                $tags = $episode->tagNames();
+                                                $visibleTags = array_slice($tags, 0, 3);
+                                                $remainingCount = count($tags) - 3;
+                                            @endphp
+                                            @foreach($visibleTags as $tag)
+                                            <span class="inline-flex items-center px-1.5 py-0 text-[0.6rem] font-medium leading-tight rounded-md bg-rose-100/80 text-rose-700 dark:bg-rose-900/50 dark:text-rose-300 ring-1 ring-inset ring-rose-200/60 dark:ring-rose-800/60">
+                                                {{ $tag }}
+                                            </span>
+                                            @endforeach
+                                            @if($remainingCount > 0)
+                                            <span class="inline-flex items-center px-1.5 py-0 text-[0.6rem] font-medium leading-tight rounded-md bg-gray-100 text-gray-500 dark:bg-neutral-800 dark:text-gray-400">
+                                                +{{ $remainingCount }}
+                                            </span>
+                                            @endif
+                                        </div>
+                                    </div>
+
+                                    {{-- Right: View Count, Like Count --}}
+                                    <div class="flex-shrink-0 flex flex-col items-end gap-1.5">
+                                        <div class="flex items-center gap-1.5 text-xs text-gray-500 dark:text-gray-400 tabular-nums" title="{{ __('Views') }}">
+                                            <i class="fa-regular fa-eye text-[0.65rem] opacity-70"></i>
+                                            <span class="font-medium text-gray-700 dark:text-gray-300">{{ $episode->viewCountFormatted() }}</span>
+                                        </div>
+                                        <div class="flex items-center gap-1.5 text-xs text-gray-500 dark:text-gray-400 tabular-nums" title="{{ __('Likes') }}">
+                                            <i class="fa-regular fa-heart text-[0.65rem] opacity-70 text-rose-500 dark:text-rose-400"></i>
+                                            <span class="font-medium text-gray-700 dark:text-gray-300">{{ number_format($episode->likeCount()) }}</span>
+                                        </div>
+                                    </div>
+                                </a>
+                            </li>
                             @endforeach
 
-                            {{-- Advanced Search card --}}
-                            <a href="{{ route('hentai.search', ['search' => $query]) }}" class="flex items-center justify-center rounded-xl border border-dashed border-gray-200 dark:border-neutral-700 p-6 hover:bg-gray-50 dark:hover:bg-neutral-900 transition">
-                                <div class="text-center">
-                                    <div class="text-2xl font-bold text-rose-600 mb-1">🔎</div>
-                                    <div class="font-semibold text-sm dark:text-white">Advanced Search</div>
-                                    <div class="text-xs text-gray-500 dark:text-gray-400 mt-1">View more results</div>
-                                </div>
-                            </a>
-                        </div>
+                            {{-- Advanced Search footer --}}
+                            <li>
+                                <a href="{{ route('hentai.search', ['search' => $query]) }}"
+                                   class="block px-5 py-3.5 text-center group/advanced hover:bg-rose-50/60 dark:hover:bg-rose-950/30 transition-colors duration-150"
+                                >
+                                    <div class="flex items-center justify-center gap-2">
+                                        <span class="text-sm font-semibold text-gray-700 dark:text-gray-200 group-hover/advanced:text-rose-700 dark:group-hover/advanced:text-rose-400 transition-colors">
+                                            {{ __('Advanced Search') }}
+                                        </span>
+                                        <span class="text-xs text-gray-400 dark:text-gray-500">{{ __('View all results') }}</span>
+                                        <svg class="w-4 h-4 text-gray-400 group-hover/advanced:text-rose-600 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
+                                        </svg>
+                                    </div>
+                                </a>
+                            </li>
+                        </ul>
                         @else
                         {{-- Empty state --}}
                         <div class="py-12 text-center text-sm text-gray-600 dark:text-gray-300">
-                            <div class="mb-3">No results found for “{{ $query ?: $navSearch }}”</div>
-                            <a href="{{ route('hentai.search', ['search' => $navSearch ?: $query]) }}" class="inline-block px-4 py-2 rounded-lg bg-rose-700 text-white text-sm hover:bg-rose-800">Try advanced search</a>
+                            <div class="mb-3">{{ __('No results found for') }} <span class="font-semibold text-rose-600">"{{ $query ?: $navSearch }}"</span></div>
+                            <a href="{{ route('hentai.search', ['search' => $navSearch ?: $query]) }}" class="inline-flex items-center gap-2 px-5 py-2.5 rounded-xl bg-rose-700 text-white text-sm font-medium hover:bg-rose-800 transition shadow-sm hover:shadow-md">
+                                <span>{{ __('Try advanced search') }}</span>
+                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
+                                </svg>
+                            </a>
                         </div>
                         @endif
                     </div>
@@ -108,4 +168,4 @@
             @endif
         </div>
     </form>
-</div>
+</div>
\ No newline at end of file