root/chadebebe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
belisards
2026-05-03 16:53:48 -03:00
parent ce7731cebb
commit c959cc8829
6 changed files with 43 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
app/[slug]/page.tsx
View File

@@ -19,7 +19,6 @@ function PublicWishlistContent() {
const params = useParams(); const params = useParams();
const [wishlist, setWishlist] = useState<Wishlist | null>(null); const [wishlist, setWishlist] = useState<Wishlist | null>(null);
const [items, setItems] = useState<Item[]>([]); const [items, setItems] = useState<Item[]>([]);
const [showClaimed, setShowClaimed] = useState(false);
const [isLoading, setIsLoading] = useState(true); const [isLoading, setIsLoading] = useState(true);
const [error, setError] = useState(''); const [error, setError] = useState('');
@@ -121,9 +120,7 @@ function PublicWishlistContent() {
} }
}; };
const filteredItems = showClaimed const filteredItems = items.filter((item) => {
? items
: items.filter((item) => {
const my = myClaimFor(item); const my = myClaimFor(item);
return item.remainingQuantity > 0 || my || item.id === justClaimedItemId; return item.remainingQuantity > 0 || my || item.id === justClaimedItemId;
}); });
@@ -208,18 +205,7 @@ function PublicWishlistContent() {
)} )}
{/* Controls */} {/* Controls */}
<div className="mb-6 flex items-center justify-between"> <div className="mb-6 flex items-center justify-end">
<div className="flex items-center space-x-4">
<label className="flex items-center">
<input
type="checkbox"
checked={showClaimed}
onChange={(e) => setShowClaimed(e.target.checked)}
className="h-4 w-4 text-blue-600 border-gray-300 rounded"
/>
<span className="ml-2 text-sm text-gray-700 dark:text-gray-300">Mostrar itens esgotados</span>
</label>
</div>
<div className="text-sm text-gray-600 dark:text-gray-400"> <div className="text-sm text-gray-600 dark:text-gray-400">
{filteredItems.length} de {items.length} itens {filteredItems.length} de {items.length} itens
</div> </div>
@@ -229,7 +215,7 @@ function PublicWishlistContent() {
{filteredItems.length === 0 ? ( {filteredItems.length === 0 ? (
<div className="text-center py-12 bg-white dark:bg-gray-800 rounded-lg shadow"> <div className="text-center py-12 bg-white dark:bg-gray-800 rounded-lg shadow">
<p className="text-gray-500 dark:text-gray-400"> <p className="text-gray-500 dark:text-gray-400">
{showClaimed ? 'Nenhum item nesta lista ainda' : 'Todos os itens já foram reservados!'} Todos os itens já foram reservados!
</p> </p>
</div> </div>
) : ( ) : (
@@ -282,9 +268,9 @@ function PublicWishlistContent() {
return ( return (
<li key={c.id} className="flex items-center justify-between gap-2"> <li key={c.id} className="flex items-center justify-between gap-2">
<div> <div>
<span className="font-medium">{c.guest.name}</span> <span className="font-medium">{isMine ? 'Você' : 'Reservado'}</span>
<span className="text-gray-500"> · {c.quantity} un.</span> <span className="text-gray-500"> · {c.quantity} un.</span>
{c.note && ( {c.note && isMine && (
<span className="block text-xs italic text-gray-500"> <span className="block text-xs italic text-gray-500">
&quot;{c.note}&quot; &quot;{c.note}&quot;
</span> </span>

3
app/admin/guests/page.tsx
View File

@@ -29,7 +29,6 @@ function GuestsManager() {
const onCreate = async (e: React.FormEvent) => { const onCreate = async (e: React.FormEvent) => {
e.preventDefault(); e.preventDefault();
setErr(''); setErr('');
if (!name.trim()) return;
setBusy(true); setBusy(true);
try { try {
await guestsApi.create(name.trim()); await guestsApi.create(name.trim());
@@ -67,7 +66,7 @@ function GuestsManager() {
<input <input
value={name} value={name}
onChange={(e) => setName(e.target.value)} onChange={(e) => setName(e.target.value)}
placeholder="Nome do convidado" placeholder="Nome do convidado (opcional)"
className="flex-1 border rounded px-3 py-2" className="flex-1 border rounded px-3 py-2"
/> />
<button disabled={busy} className="bg-indigo-600 text-white rounded px-4 py-2 disabled:opacity-50"> <button disabled={busy} className="bg-indigo-600 text-white rounded px-4 py-2 disabled:opacity-50">

5
app/api/admin/guests/route.ts
View File

@@ -16,10 +16,7 @@ export async function POST(request: NextRequest) {
return NextResponse.json({ error: 'Unauthorized' }, { status: 401 }); return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
} }
const body = await request.json().catch(() => ({})); const body = await request.json().catch(() => ({}));
const name = (body?.name ?? '').toString().trim(); const name = (body?.name ?? '').toString().trim() || 'Convidado';
if (!name) {
return NextResponse.json({ error: 'name is required' }, { status: 400 });
}
const [row] = await db.insert(guests).values({ name }).returning(); const [row] = await db.insert(guests).values({ name }).returning();
return NextResponse.json({ success: true, guest: row }, { status: 201 }); return NextResponse.json({ success: true, guest: row }, { status: 201 });
} }

39
app/page.tsx
View File

@@ -1,14 +1,15 @@
'use client'; 'use client';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import Link from 'next/link';
import { useRouter, useSearchParams } from 'next/navigation'; import { useRouter, useSearchParams } from 'next/navigation';
import { authApi } from '@/lib/api'; import { authApi, wishlistsApi, type Wishlist } from '@/lib/api';
export default function HomePage() { export default function HomePage() {
const router = useRouter(); const router = useRouter();
const params = useSearchParams(); const params = useSearchParams();
const [state, setState] = useState<'checking' | 'guest' | 'none'>('checking'); const [state, setState] = useState<'checking' | 'guest' | 'none'>('checking');
const [guestName, setGuestName] = useState<string>(''); const [wishlists, setWishlists] = useState<Wishlist[]>([]);
useEffect(() => { useEffect(() => {
let cancelled = false; let cancelled = false;
@@ -31,7 +32,13 @@ export default function HomePage() {
return; return;
} }
if (who.role === 'guest') { 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'); setState('guest');
return; return;
} }
@@ -49,10 +56,28 @@ export default function HomePage() {
if (state === 'guest') { if (state === 'guest') {
return ( return (
<div className="min-h-screen flex items-center justify-center text-center px-6"> <div className="min-h-screen flex items-center justify-center px-6">
<div> <div className="w-full max-w-2xl text-center">
<h1 className="text-3xl font-bold mb-2">Olá, {guestName}!</h1> <h1 className="text-3xl font-bold mb-6">Bem-vindo</h1>
<p className="text-gray-500">Visite o link da lista que você recebeu.</p> {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>
</div> </div>
); );

28
components/header.tsx
View File

@@ -1,8 +1,5 @@
'use client'; 'use client';
import { useEffect, useState } from 'react';
import { authApi } from '@/lib/api';
interface HeaderProps { interface HeaderProps {
title: string; title: string;
subtitle?: string; subtitle?: string;
@@ -12,33 +9,8 @@ interface HeaderProps {
} }
export default function Header({ title, subtitle, imageUrl, actions, maxWidth = 'max-w-7xl' }: HeaderProps) { export default function Header({ title, subtitle, imageUrl, actions, maxWidth = 'max-w-7xl' }: HeaderProps) {
const [isAdmin, setIsAdmin] = useState(false);
useEffect(() => {
let cancelled = false;
(async () => {
try {
const who = await authApi.whoami();
if (!cancelled) setIsAdmin(who.role === 'admin');
} catch {
if (!cancelled) setIsAdmin(false);
}
})();
return () => { cancelled = true; };
}, []);
return ( return (
<> <>
{isAdmin && (
<div className="sticky top-0 z-50 bg-amber-50 dark:bg-amber-900/40 border-b border-amber-200/70 dark:border-amber-800/60 backdrop-blur">
<div className={`${maxWidth} mx-auto py-3 px-4 sm:px-6 lg:px-8`}>
<p className="text-center text-sm text-amber-900 dark:text-amber-100">
⚠️ Atenção: visualizar listas públicas pode estragar surpresas
</p>
</div>
</div>
)}
<div className="relative overflow-hidden"> <div className="relative overflow-hidden">
{/* Distant atmospheric haze */} {/* Distant atmospheric haze */}
<div <div

3
scripts/guest.ts
View File

@@ -15,8 +15,7 @@ async function main() {
const cmd = process.argv[2]; const cmd = process.argv[2];
if (cmd === 'create') { if (cmd === 'create') {
const name = arg('name'); const name = (arg('name') ?? '').trim() || 'Convidado';
if (!name) { console.error('--name is required'); process.exit(1); }
const [row] = await db.insert(guests).values({ name }).returning(); const [row] = await db.insert(guests).values({ name }).returning();
const base = process.env.PUBLIC_BASE_URL ?? 'http://localhost:3000'; const base = process.env.PUBLIC_BASE_URL ?? 'http://localhost:3000';
console.log(JSON.stringify({ id: row.id, name: row.name, link: `${base}/?usr=${row.id}` }, null, 2)); console.log(JSON.stringify({ id: row.id, name: row.name, link: `${base}/?usr=${row.id}` }, null, 2));