feat(ui): hide spoiler banner, anonymize claims, optional guest name, list wishlists on home, drop esgotados toggle

app/page.tsx

@@ -1,14 +1,15 @@
 'use client';
 
 import { useEffect, useState } from 'react';
+import Link from 'next/link';
 import { useRouter, useSearchParams } from 'next/navigation';
-import { authApi } from '@/lib/api';
+import { authApi, wishlistsApi, type Wishlist } from '@/lib/api';
 
 export default function HomePage() {
   const router = useRouter();
   const params = useSearchParams();
   const [state, setState] = useState<'checking' | 'guest' | 'none'>('checking');
-  const [guestName, setGuestName] = useState<string>('');
+  const [wishlists, setWishlists] = useState<Wishlist[]>([]);
 
   useEffect(() => {
     let cancelled = false;
@@ -31,7 +32,13 @@ export default function HomePage() {
           return;
         }
         if (who.role === 'guest') {
-          setGuestName(who.guest.name);
+          const lists = await wishlistsApi.getAllPublic();
+          if (cancelled) return;
+          if (lists.length === 1) {
+            router.replace(`/${lists[0].slug}`);
+            return;
+          }
+          setWishlists(lists);
           setState('guest');
           return;
         }
@@ -49,10 +56,28 @@ export default function HomePage() {
 
   if (state === 'guest') {
     return (
-      <div className="min-h-screen flex items-center justify-center text-center px-6">
-        <div>
-          <h1 className="text-3xl font-bold mb-2">Olá, {guestName}!</h1>
-          <p className="text-gray-500">Visite o link da lista que você recebeu.</p>
+      <div className="min-h-screen flex items-center justify-center px-6">
+        <div className="w-full max-w-2xl text-center">
+          <h1 className="text-3xl font-bold mb-6">Bem-vindo</h1>
+          {wishlists.length === 0 ? (
+            <p className="text-gray-500">Nenhuma lista disponível ainda.</p>
+          ) : (
+            <ul className="space-y-3 text-left">
+              {wishlists.map((w) => (
+                <li key={w.id}>
+                  <Link
+                    href={`/${w.slug}`}
+                    className="block rounded-lg border border-gray-200 dark:border-gray-700 p-4 hover:border-indigo-400 hover:bg-indigo-50/30 dark:hover:bg-indigo-900/10 transition"
+                  >
+                    <div className="font-semibold text-lg">{w.name}</div>
+                    {w.description && (
+                      <div className="text-sm text-gray-500 mt-1">{w.description}</div>
+                    )}
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          )}
         </div>
       </div>
     );