Fix: lightbox, profile stats, toast, rating UX

resources/views/users/show.blade.php

@@ -53,18 +53,73 @@
         </div>
     </div>
 
-    {{-- Recently Played --}}
-    @if($recentlyPlayed->isNotEmpty())
+    {{-- Top Genres --}}
+    @if($genreStats->isNotEmpty())
+    <div class="mb-10">
+        <h2 class="text-lg font-semibold text-white mb-3">Top Genres</h2>
+        <div class="flex flex-wrap gap-2">
+            @foreach($genreStats as $genre)
+                <span class="inline-flex items-center gap-1.5 px-3 py-1.5 bg-[#16161d] border border-white/10 rounded-full text-sm text-slate-300">
+                    {{ $genre->name }}
+                    <span class="text-xs text-purple-400 font-semibold">{{ $genre->count }}</span>
+                </span>
+            @endforeach
+        </div>
+    </div>
+    @endif
+
+    {{-- Recent Library --}}
+    @if($allGames->isNotEmpty())
     <div>
-        <h2 class="text-lg font-semibold text-white mb-4">Recently Played</h2>
+        <div class="flex items-center justify-between mb-4">
+            <h2 class="text-lg font-semibold text-white">Recent Library</h2>
+            <a href="{{ route('users.library', $user->username) }}" class="text-sm text-purple-400 hover:text-purple-300 transition-colors">
+                View all →
+            </a>
+        </div>
         <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
-            @foreach($recentlyPlayed as $entry)
-                <x-game-card :game="$entry->game" />
+            @foreach($allGames as $entry)
+                @php
+                    $statusColors = [
+                        'playing'      => 'bg-green-600',
+                        'played'       => 'bg-blue-600',
+                        'want_to_play' => 'bg-yellow-600',
+                        'on_hold'      => 'bg-orange-600',
+                        'dropped'      => 'bg-red-700',
+                    ];
+                    $statusLabels = [
+                        'playing'      => 'Playing',
+                        'played'       => 'Played',
+                        'want_to_play' => 'Want to Play',
+                        'on_hold'      => 'On Hold',
+                        'dropped'      => 'Dropped',
+                    ];
+                @endphp
+                <div class="relative">
+                    <x-game-card :game="$entry->game" />
+                    <span class="absolute top-2 left-2 text-xs font-semibold px-1.5 py-0.5 rounded {{ $statusColors[$entry->status] ?? 'bg-slate-700' }} text-white leading-tight">
+                        {{ $statusLabels[$entry->status] ?? $entry->status }}
+                    </span>
+                </div>
             @endforeach
         </div>
     </div>
     @else
-        <p class="text-slate-500">No games tracked yet.</p>
+    {{-- Empty state --}}
+    <div class="text-center py-20">
+        <div class="w-16 h-16 rounded-full bg-[#16161d] flex items-center justify-center mx-auto mb-4">
+            <svg class="w-8 h-8 text-slate-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
+                      d="M15 5v2m0 4v2m0 4v2M5 5a2 2 0 00-2 2v3a2 2 0 110 4v3a2 2 0 002 2h14a2 2 0 002-2v-3a2 2 0 110-4V7a2 2 0 00-2-2H5z"/>
+            </svg>
+        </div>
+        <h3 class="text-lg font-medium text-slate-300 mb-2">No games tracked yet</h3>
+        <p class="text-slate-500 mb-6">Start building your game library!</p>
+        <a href="{{ route('games.index') }}"
+           class="inline-flex items-center gap-2 px-5 py-2.5 bg-purple-600 hover:bg-purple-700 text-white font-semibold rounded-lg transition-colors">
+            Browse Games
+        </a>
+    </div>
     @endif
 
 </div>