feat: add animated Mars planet decoration to header

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

AGENTS.md

@@ -0,0 +1,34 @@
+# Repository Guidelines
+
+## Project Structure & Module Organization
+
+This repository contains the Next.js application for the Chadebebe wishlist site. App Router routes live in `app/`, including public wishlist pages in `app/[slug]/`, admin screens in `app/admin/`, and API handlers in `app/api/`. Shared UI belongs in `components/`, while server utilities, auth, database access, and scraping helpers live in `lib/`. Drizzle and SQLite data are under `lib/db/` and `data/db/`. Static assets are in `public/`; uploaded runtime assets are stored in `data/uploads/`. Deployment configuration is in the parent project root at `/home/adriano/chadebebe/docker-compose.yaml`, which builds this `src/` directory.
+
+## Build, Test, and Development Commands
+
+Run commands from `src/` unless noted.
+
+- `npm install`: install local dependencies.
+- `npm run dev`: start Next.js locally on port `3000`.
+- `npm run build`: create the production Next.js standalone build.
+- `npm run lint`: run the configured Next.js ESLint command.
+- `npm run db:migrate`: apply Drizzle migrations.
+- `npm run db:studio`: open Drizzle Studio for database inspection.
+- `npm run guest:create -- --name="Name"`: create a guest access token.
+- From `/home/adriano/chadebebe`, `docker compose up -d --build`: rebuild and redeploy the production container.
+
+## Coding Style & Naming Conventions
+
+Use TypeScript, React function components, and the App Router conventions already present in `app/`. Keep indentation at two spaces. Prefer descriptive camelCase for variables/functions, PascalCase for components, and lowercase route directory names. Keep UI copy in Portuguese for user-facing screens. Use Tailwind CSS utility classes for styling and follow existing component patterns before introducing new abstractions.
+
+## Testing Guidelines
+
+There is currently no dedicated test framework or `npm test` script. For changes, run `npm run build` at minimum; use `npm run lint` when dependencies are available. For database or reservation changes, manually exercise the relevant public wishlist and admin flows, including quantity limits, claim/unclaim behavior, and guest-token access.
+
+## Commit & Pull Request Guidelines
+
+Recent history mostly uses Conventional Commit prefixes, such as `feat:`, `fix:`, `docs:`, and `chore:`. Use concise imperative messages, for example `fix: hide disabled reservation action`. Pull requests should include a short summary, verification steps, linked issue if applicable, and screenshots for UI changes. Note any database snapshot or migration changes explicitly.
+
+## Security & Configuration Tips
+
+Do not commit real admin tokens or secrets. Admin access is controlled by `ADMIN_TOKEN`; production deployment also depends on Traefik labels and the external `web` Docker network. Treat `data/db/wishlist.db` as a snapshot and checkpoint SQLite before committing database updates.

app/[slug]/page.tsx

@@ -180,11 +180,13 @@ function PublicWishlistContent() {
           )}
 
           {/* Controls */}
-          <div className="mb-6 flex items-center justify-end">
+          {siteSettings.claimingEnabled && (
-            <div className="text-sm text-gray-600 dark:text-gray-400">
+            <div className="mb-6 flex items-center justify-end">
-              {filteredItems.length} de {items.length} itens
+              <div className="text-sm text-gray-600 dark:text-gray-400">
+                {filteredItems.length} de {items.length} itens
+              </div>
             </div>
-          </div>
+          )}
 
           {/* Items List */}
           {filteredItems.length === 0 ? (
@@ -200,7 +202,7 @@ function PublicWishlistContent() {
                 const maxForMe = item.remainingQuantity + (myClaim?.quantity ?? 0);
                 const showQuantitySummary = item.quantity > 1 && siteSettings.showQuantity;
                 const sold = item.remainingQuantity === 0 && !myClaim;
-                const canClaim = siteSettings.claimingEnabled;
+                const canClaim = siteSettings.claimingEnabled && Boolean(currentGuestId);
 
                 return (
                   <div

app/api/[slug]/route.ts

@@ -8,13 +8,9 @@ export async function GET(
   { params }: { params: Promise<{ slug: string }> }
 ) {
   try {
+    const { slug } = await params;
     const isAdmin = verifyAdminToken(request);
     const guest = await getGuestFromRequest(request);
-    if (!isAdmin && !guest) {
-      return NextResponse.json({ error: 'Convite necessário' }, { status: 401 });
-    }
-
-    const { slug } = await params;
 
     const wishlist = await db
       .select()
@@ -29,11 +25,11 @@ export async function GET(
       );
     }
 
-    // Only return public wishlists (admin can see all)
+    // Public wishlists can be viewed anonymously; private wishlists require admin or guest access.
-    if (!wishlist[0].isPublic && !isAdmin) {
+    if (!wishlist[0].isPublic && !isAdmin && !guest) {
       return NextResponse.json(
-        { error: 'Wishlist not found' },
+        { error: 'Convite necessário' },
-        { status: 404 }
+        { status: 401 }
       );
     }
 

app/api/items/[id]/route.ts

@@ -11,12 +11,6 @@ export async function GET(
   try {
     const { id } = await params;
 
-    const isAdmin = verifyAdminToken(request);
-    const guest = await getGuestFromRequest(request);
-    if (!isAdmin && !guest) {
-      return NextResponse.json({ error: 'Convite necessário' }, { status: 401 });
-    }
-
     // Get item
     const item = await db
       .select()
@@ -45,10 +39,13 @@ export async function GET(
       );
     }
 
-    if (!wishlist[0].isPublic && !isAdmin) {
+    const isAdmin = verifyAdminToken(request);
+    const guest = await getGuestFromRequest(request);
+
+    if (!wishlist[0].isPublic && !isAdmin && !guest) {
       return NextResponse.json(
-        { error: 'This item is private' },
+        { error: 'Convite necessário' },
-        { status: 403 }
+        { status: 401 }
       );
     }
 

app/api/public/wishlists/route.ts

@@ -1,16 +1,9 @@
-import { NextRequest, NextResponse } from 'next/server';
+import { NextResponse } from 'next/server';
 import { eq, asc } from 'drizzle-orm';
 import { db, wishlists } from '@/lib/db';
-import { getGuestFromRequest, verifyAdminToken } from '@/lib/auth/tokens';
 
-export async function GET(request: NextRequest) {
+export async function GET() {
   try {
-    const isAdmin = verifyAdminToken(request);
-    const guest = await getGuestFromRequest(request);
-    if (!isAdmin && !guest) {
-      return NextResponse.json({ error: 'Convite necessário' }, { status: 401 });
-    }
-
     // Fetch only public wishlists
     const publicWishlists = await db
       .select()

app/api/wishlists/[id]/items/route.ts

@@ -11,12 +11,6 @@ export async function GET(
   try {
     const { id } = await params;
 
-    const isAdmin = verifyAdminToken(request);
-    const guest = await getGuestFromRequest(request);
-    if (!isAdmin && !guest) {
-      return NextResponse.json({ error: 'Convite necessário' }, { status: 401 });
-    }
-
     // Check if wishlist exists
     const wishlist = await db
       .select()
@@ -31,11 +25,14 @@ export async function GET(
       );
     }
 
-    // Permissions: guest can only see public wishlists; admin sees all
+    const isAdmin = verifyAdminToken(request);
-    if (!wishlist[0].isPublic && !isAdmin) {
+    const guest = await getGuestFromRequest(request);
+
+    // Public wishlists can be viewed anonymously; private wishlists require admin or guest access.
+    if (!wishlist[0].isPublic && !isAdmin && !guest) {
       return NextResponse.json(
-        { error: 'This wishlist is private' },
+        { error: 'Convite necessário' },
-        { status: 403 }
+        { status: 401 }
       );
     }
 

app/globals.css

@@ -75,6 +75,198 @@ body {
   opacity: 0.85;
 }
 
+.mars-planet {
+  --mars-x: 0;
+  --mars-y: 0;
+  position: absolute;
+  z-index: 0;
+  width: clamp(5.5rem, 16vw, 8.5rem);
+  aspect-ratio: 1;
+  display: grid;
+  place-items: center;
+  cursor: pointer;
+  perspective: 600px;
+  filter: drop-shadow(0 24px 34px rgba(138, 47, 21, 0.24));
+  transform:
+    translate3d(calc(var(--mars-x) * 6px), calc(var(--mars-y) * 6px), 0)
+    rotateX(calc(var(--mars-y) * -8deg))
+    rotateY(calc(var(--mars-x) * 10deg));
+  transition: transform 180ms ease, filter 180ms ease;
+}
+
+.mars-planet:hover {
+  filter: drop-shadow(0 28px 38px rgba(138, 47, 21, 0.32));
+}
+
+.mars-planet:active {
+  transform:
+    translate3d(calc(var(--mars-x) * 5px), calc(var(--mars-y) * 5px), 0)
+    rotateX(calc(var(--mars-y) * -8deg))
+    rotateY(calc(var(--mars-x) * 10deg))
+    scale(0.96);
+}
+
+.mars-planet__body,
+.mars-planet__orbit,
+.mars-planet__spark,
+.mars-planet__band,
+.mars-planet__crater {
+  position: absolute;
+  pointer-events: none;
+}
+
+.mars-planet__body {
+  inset: 12%;
+  overflow: hidden;
+  border-radius: 9999px;
+  background:
+    radial-gradient(circle at 32% 28%, #ffc6a1 0 9%, transparent 10%),
+    radial-gradient(circle at 30% 32%, #e97445 0 34%, #c1502c 56%, #7c2814 100%);
+  box-shadow:
+    inset -18px -16px 30px rgba(71, 22, 12, 0.42),
+    inset 10px 9px 18px rgba(255, 219, 184, 0.34),
+    0 0 34px rgba(231, 111, 65, 0.48);
+  animation: mars-float 5.5s ease-in-out infinite;
+}
+
+.mars-planet__body::before {
+  content: "";
+  position: absolute;
+  inset: -18% -24%;
+  background:
+    linear-gradient(16deg, transparent 20%, rgba(255, 196, 142, 0.24) 24% 29%, transparent 34%),
+    linear-gradient(-11deg, transparent 45%, rgba(121, 44, 24, 0.24) 49% 54%, transparent 59%);
+  animation: mars-drift 9s linear infinite;
+}
+
+.mars-planet__orbit {
+  width: 116%;
+  height: 42%;
+  border: 2px solid rgba(255, 205, 165, 0.78);
+  border-left-color: transparent;
+  border-right-color: transparent;
+  border-radius: 9999px;
+  transform: rotate(-18deg);
+  box-shadow: 0 0 18px rgba(255, 188, 138, 0.34);
+  animation: mars-orbit 4.5s ease-in-out infinite;
+}
+
+.mars-planet__band {
+  left: 8%;
+  right: 8%;
+  height: 11%;
+  border-radius: 9999px;
+  background: rgba(255, 178, 124, 0.26);
+  transform: rotate(-14deg);
+}
+
+.mars-planet__band--one {
+  top: 36%;
+}
+
+.mars-planet__band--two {
+  top: 58%;
+  background: rgba(113, 41, 23, 0.22);
+}
+
+.mars-planet__crater {
+  border-radius: 9999px;
+  background:
+    radial-gradient(circle at 38% 35%, rgba(255, 219, 184, 0.24), transparent 36%),
+    rgba(106, 36, 19, 0.38);
+  box-shadow: inset 2px 2px 4px rgba(68, 21, 12, 0.34);
+}
+
+.mars-planet__crater--one {
+  width: 16%;
+  height: 16%;
+  top: 30%;
+  left: 52%;
+}
+
+.mars-planet__crater--two {
+  width: 11%;
+  height: 11%;
+  top: 58%;
+  left: 29%;
+}
+
+.mars-planet__crater--three {
+  width: 9%;
+  height: 9%;
+  top: 64%;
+  left: 64%;
+}
+
+.mars-planet__spark {
+  width: 0.48rem;
+  height: 0.48rem;
+  border-radius: 9999px;
+  background: #fff1df;
+  box-shadow: 0 0 12px rgba(255, 241, 223, 0.9);
+  animation: mars-spark 2.4s ease-in-out infinite;
+}
+
+.mars-planet__spark--one {
+  top: 10%;
+  left: 17%;
+}
+
+.mars-planet__spark--two {
+  right: 10%;
+  bottom: 18%;
+  width: 0.34rem;
+  height: 0.34rem;
+  animation-delay: 0.8s;
+}
+
+@keyframes mars-float {
+  0%, 100% {
+    transform: translateY(0) rotate(-2deg);
+  }
+  50% {
+    transform: translateY(-8px) rotate(2deg);
+  }
+}
+
+@keyframes mars-drift {
+  from {
+    transform: translateX(-10%);
+  }
+  to {
+    transform: translateX(10%);
+  }
+}
+
+@keyframes mars-orbit {
+  0%, 100% {
+    transform: rotate(-18deg) scaleX(1);
+  }
+  50% {
+    transform: rotate(-18deg) scaleX(1.08);
+  }
+}
+
+@keyframes mars-spark {
+  0%, 100% {
+    opacity: 0.35;
+    transform: scale(0.72);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mars-planet,
+  .mars-planet *,
+  .mars-planet *::before {
+    animation: none !important;
+    transition: none !important;
+  }
+}
+
 .bg-card {
   background-color: var(--card);
 }

components/guest-guard.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useEffect, useState } from 'react';
-import { authApi } from '@/lib/api';
+import { authApi, wishlistsApi } from '@/lib/api';
 
 type Status = 'checking' | { kind: 'ok'; guestName: string } | 'denied';
 
@@ -21,6 +21,15 @@ export default function GuestGuard({ children }: { children: React.ReactNode })
         if (who.role === 'admin' || who.role === 'guest') {
           setStatus({ kind: 'ok', guestName: who.guest?.name ?? 'admin' });
         } else {
+          const slug = window.location.pathname.split('/').filter(Boolean)[0];
+          if (slug) {
+            const wishlist = await wishlistsApi.getBySlug(slug);
+            if (cancelled) return;
+            if (wishlist.isPublic) {
+              setStatus({ kind: 'ok', guestName: 'visitante' });
+              return;
+            }
+          }
           setStatus('denied');
         }
       } catch {

components/header.tsx

@@ -1,5 +1,7 @@
 'use client';
 
+import MarsPlanet from '@/components/mars-planet';
+
 interface HeaderProps {
   title: string;
   subtitle?: string;
@@ -25,6 +27,7 @@ export default function Header({ title, subtitle, imageUrl, actions, maxWidth =
         />
 
         <div className={`${maxWidth} mx-auto relative py-14 px-4 sm:py-20 sm:px-6 lg:px-8`}>
+          <MarsPlanet className="absolute right-4 top-4 sm:right-8 sm:top-7 lg:right-10 lg:top-9" />
           <div className="flex flex-col md:flex-row items-center md:items-start gap-8">
             {imageUrl && (
               <div className="md:w-56 flex-shrink-0">

components/mars-planet.tsx

@@ -0,0 +1,43 @@
+'use client';
+
+import type { PointerEvent } from 'react';
+
+type MarsPlanetProps = {
+  className?: string;
+};
+
+export default function MarsPlanet({ className = '' }: MarsPlanetProps) {
+  const handlePointerMove = (event: PointerEvent<HTMLDivElement>) => {
+    const bounds = event.currentTarget.getBoundingClientRect();
+    const x = ((event.clientX - bounds.left) / bounds.width - 0.5) * 2;
+    const y = ((event.clientY - bounds.top) / bounds.height - 0.5) * 2;
+
+    event.currentTarget.style.setProperty('--mars-x', x.toFixed(3));
+    event.currentTarget.style.setProperty('--mars-y', y.toFixed(3));
+  };
+
+  const resetTilt = (event: PointerEvent<HTMLDivElement>) => {
+    event.currentTarget.style.setProperty('--mars-x', '0');
+    event.currentTarget.style.setProperty('--mars-y', '0');
+  };
+
+  return (
+    <div
+      aria-hidden="true"
+      className={`mars-planet ${className}`}
+      onPointerMove={handlePointerMove}
+      onPointerLeave={resetTilt}
+    >
+      <span className="mars-planet__orbit" />
+      <span className="mars-planet__body">
+        <span className="mars-planet__band mars-planet__band--one" />
+        <span className="mars-planet__band mars-planet__band--two" />
+        <span className="mars-planet__crater mars-planet__crater--one" />
+        <span className="mars-planet__crater mars-planet__crater--two" />
+        <span className="mars-planet__crater mars-planet__crater--three" />
+      </span>
+      <span className="mars-planet__spark mars-planet__spark--one" />
+      <span className="mars-planet__spark mars-planet__spark--two" />
+    </div>
+  );
+}