setting up files

components/auth-button.tsx

@@ -1,28 +1,29 @@
 import Link from "next/link";
+
 import { Button } from "./ui/button";
 import { createClient } from "@/lib/supabase/server";
 import { LogoutButton } from "./logout-button";
+import { routes } from "@/lib/routes";
 
 export async function AuthButton() {
   const supabase = await createClient();
-
-  // You can also use getUser() which will be slower.
   const { data } = await supabase.auth.getClaims();
-
   const user = data?.claims;
 
   return user ? (
-    <div className="flex items-center gap-4">
-      Hey, {user.email}!
+    <div className="flex items-center gap-3">
+      <Button asChild size="sm" variant="outline">
+        <Link href={routes.avatar}>Open app</Link>
+      </Button>
       <LogoutButton />
     </div>
   ) : (
     <div className="flex gap-2">
       <Button asChild size="sm" variant={"outline"}>
-        <Link href="/auth/login">Sign in</Link>
+        <Link href={routes.login}>Sign in</Link>
       </Button>
       <Button asChild size="sm" variant={"default"}>
-        <Link href="/auth/sign-up">Sign up</Link>
+        <Link href={routes.signUp}>Sign up</Link>
       </Button>
     </div>
   );

components/avatar/pixel-avatar.tsx

@@ -0,0 +1,52 @@
+import { cn } from "@/lib/utils";
+
+type AvatarMood = "happy" | "neutral" | "tired";
+
+const moodStyles: Record<AvatarMood, string> = {
+  happy: "bg-emerald-400 shadow-[0_0_0_4px_rgba(16,185,129,0.25)]",
+  neutral: "bg-amber-300 shadow-[0_0_0_4px_rgba(251,191,36,0.25)]",
+  tired: "bg-sky-400 shadow-[0_0_0_4px_rgba(56,189,248,0.25)]",
+};
+
+type PixelAvatarProps = {
+  mood?: AvatarMood;
+  size?: "sm" | "md" | "lg";
+  className?: string;
+};
+
+const sizeStyles = {
+  sm: "h-16 w-16",
+  md: "h-24 w-24",
+  lg: "h-32 w-32",
+};
+
+export function PixelAvatar({
+  mood = "neutral",
+  size = "lg",
+  className,
+}: PixelAvatarProps) {
+  return (
+    <div
+      className={cn("flex flex-col items-center gap-3", className)}
+      aria-label={`Pixel pet avatar, mood ${mood}`}
+    >
+      <div
+        className={cn(
+          "relative rounded-md border-2 border-foreground/80",
+          sizeStyles[size],
+          moodStyles[mood],
+        )}
+        style={{ imageRendering: "pixelated" }}
+      >
+        <div className="absolute left-1/2 top-[28%] flex -translate-x-1/2 gap-2">
+          <span className="h-2 w-2 rounded-[1px] bg-foreground/90" />
+          <span className="h-2 w-2 rounded-[1px] bg-foreground/90" />
+        </div>
+        <div className="absolute bottom-[24%] left-1/2 h-1 w-4 -translate-x-1/2 rounded-[1px] bg-foreground/80" />
+      </div>
+      <p className="text-xs uppercase tracking-[0.2em] text-muted-foreground">
+        {mood}
+      </p>
+    </div>
+  );
+}

components/layout/app-auth-gate.tsx

@@ -0,0 +1,10 @@
+import { requireOnboardingComplete } from "@/lib/auth-helpers";
+
+type AppAuthGateProps = {
+  children: React.ReactNode;
+};
+
+export async function AppAuthGate({ children }: AppAuthGateProps) {
+  await requireOnboardingComplete();
+  return children;
+}

components/layout/app-nav.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { Home, ShoppingBag, Sparkles, UserRound } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+import { appNavItems, routes } from "@/lib/routes";
+
+const navIcons = {
+  [routes.avatar]: Home,
+  [routes.dailyQuiz]: Sparkles,
+  [routes.shop]: ShoppingBag,
+  [routes.profile]: UserRound,
+} as const;
+
+export function AppNav() {
+  const pathname = usePathname();
+
+  return (
+    <nav className="fixed inset-x-0 bottom-0 z-50 border-t bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/80">
+      <div className="mx-auto grid max-w-lg grid-cols-4 gap-1 px-2 pb-[max(0.5rem,env(safe-area-inset-bottom))] pt-2">
+        {appNavItems.map((item) => {
+          const Icon = navIcons[item.href];
+          const isActive =
+            pathname === item.href ||
+            (item.href !== routes.avatar && pathname.startsWith(item.href));
+
+          return (
+            <Link
+              key={item.href}
+              href={item.href}
+              className={cn(
+                "flex flex-col items-center gap-1 rounded-lg px-2 py-2 text-[11px] font-medium transition-colors",
+                isActive
+                  ? "bg-primary text-primary-foreground"
+                  : "text-muted-foreground hover:bg-muted hover:text-foreground",
+              )}
+            >
+              <Icon className="h-4 w-4" />
+              <span>{item.shortLabel}</span>
+            </Link>
+          );
+        })}
+      </div>
+    </nav>
+  );
+}

components/layout/app-shell.tsx

@@ -0,0 +1,28 @@
+import { AppNav } from "@/components/layout/app-nav";
+
+type AppShellProps = {
+  children: React.ReactNode;
+  title?: string;
+  description?: string;
+};
+
+export function AppShell({ children, title, description }: AppShellProps) {
+  return (
+    <div className="min-h-svh bg-background pb-24">
+      {(title || description) && (
+        <header className="border-b border-border/60 bg-card/40">
+          <div className="mx-auto max-w-lg px-5 py-5">
+            {title ? (
+              <h1 className="text-xl font-semibold tracking-tight">{title}</h1>
+            ) : null}
+            {description ? (
+              <p className="mt-1 text-sm text-muted-foreground">{description}</p>
+            ) : null}
+          </div>
+        </header>
+      )}
+      <main className="mx-auto max-w-lg px-5 py-6">{children}</main>
+      <AppNav />
+    </div>
+  );
+}

components/layout/logged-in-redirect.tsx

@@ -0,0 +1,19 @@
+import { redirect } from "next/navigation";
+
+import {
+  getSessionUser,
+  hasCompletedOnboarding,
+} from "@/lib/auth-helpers";
+import { routes } from "@/lib/routes";
+
+export async function LoggedInRedirect() {
+  const user = await getSessionUser();
+
+  if (user) {
+    redirect(
+      hasCompletedOnboarding(user) ? routes.avatar : routes.onboardingQuiz,
+    );
+  }
+
+  return null;
+}

components/layout/onboarding-auth-gate.tsx

@@ -0,0 +1,21 @@
+import { redirect } from "next/navigation";
+
+import {
+  hasCompletedOnboarding,
+  requireSessionUser,
+} from "@/lib/auth-helpers";
+import { routes } from "@/lib/routes";
+
+type OnboardingAuthGateProps = {
+  children: React.ReactNode;
+};
+
+export async function OnboardingAuthGate({ children }: OnboardingAuthGateProps) {
+  const user = await requireSessionUser();
+
+  if (hasCompletedOnboarding(user)) {
+    redirect(routes.avatar);
+  }
+
+  return children;
+}

components/layout/site-header.tsx

@@ -0,0 +1,38 @@
+import Link from "next/link";
+import { Suspense } from "react";
+
+import { AuthButton } from "@/components/auth-button";
+import { EnvVarWarning } from "@/components/env-var-warning";
+import { ThemeSwitcher } from "@/components/theme-switcher";
+import { routes } from "@/lib/routes";
+import { hasEnvVars } from "@/lib/utils";
+
+export function SiteHeader() {
+  return (
+    <header className="w-full border-b border-b-foreground/10">
+      <div className="mx-auto flex h-16 w-full max-w-5xl items-center justify-between px-5 text-sm">
+        <Link href={routes.home} className="font-semibold tracking-tight">
+          Habit Pet
+        </Link>
+        {!hasEnvVars ? (
+          <EnvVarWarning />
+        ) : (
+          <Suspense>
+            <AuthButton />
+          </Suspense>
+        )}
+      </div>
+    </header>
+  );
+}
+
+export function SiteFooter() {
+  return (
+    <footer className="w-full border-t py-8 text-center text-xs text-muted-foreground">
+      <div className="mx-auto flex max-w-5xl flex-col items-center gap-4 px-5">
+        <p>Build habits. Care for your pet. Feel better every day.</p>
+        <ThemeSwitcher />
+      </div>
+    </footer>
+  );
+}

components/login-form.tsx

@@ -16,6 +16,8 @@ import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 
+import { routes } from "@/lib/routes";
+
 export function LoginForm({
   className,
   ...props
@@ -38,8 +40,8 @@ export function LoginForm({
         password,
       });
       if (error) throw error;
-      // Update this route to redirect to an authenticated route. The user already has an active session.
-      router.push("/protected");
+      router.push(routes.avatar);
+      router.refresh();
     } catch (error: unknown) {
       setError(error instanceof Error ? error.message : "An error occurred");
     } finally {

components/sign-up-form.tsx

@@ -16,6 +16,8 @@ import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 
+import { routes } from "@/lib/routes";
+
 export function SignUpForm({
   className,
   ...props
@@ -44,7 +46,7 @@ export function SignUpForm({
         email,
         password,
         options: {
-          emailRedirectTo: `${window.location.origin}/protected`,
+          emailRedirectTo: `${window.location.origin}${routes.onboardingQuiz}`,
         },
       });
       if (error) throw error;