setting up test functionality

app/(app)/avatar/page.tsx

@@ -1,112 +1,18 @@
-import Link from "next/link";
-
-import { PixelAvatar } from "@/components/avatar/pixel-avatar";
+import { AvatarStatusCard } from "@/components/avatar/avatar-status-card";
+import { DailyQuizLinkButton } from "@/components/daily-quiz/daily-quiz-link-button";
+import { HabitTracker } from "@/components/habits/habit-tracker";
 import { AppShell } from "@/components/layout/app-shell";
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
-import { Checkbox } from "@/components/ui/checkbox";
-import { Label } from "@/components/ui/label";
-import { routes } from "@/lib/routes";
-
-const placeholderHabits = [
-  { id: "water", label: "Drink water", streak: 3 },
-  { id: "walk", label: "Take a walk", streak: 5 },
-  { id: "sleep", label: "Sleep 7+ hours", streak: 2 },
-];
 
 export default function AvatarPage() {
   return (
     <AppShell
       title="Your Habit Pet"
-      description="Check in daily to keep your pet happy and build streaks."
+      description="Today's tasks are personalized from your preferences and daily quiz."
     >
       <div className="flex flex-col gap-6">
-        <Card>
-          <CardContent className="flex flex-col items-center gap-4 pt-6">
-            <PixelAvatar mood="happy" />
-            <p className="text-center text-sm text-muted-foreground">
-              Your pet reacts to habits, wellness check-ins, and journal entries.
-            </p>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle className="text-base">Today&apos;s habits</CardTitle>
-            <CardDescription>
-              Custom checkmarks and streak tracking live here.
-            </CardDescription>
-          </CardHeader>
-          <CardContent className="space-y-4">
-            {placeholderHabits.map((habit) => (
-              <div
-                key={habit.id}
-                className="flex items-center justify-between rounded-lg border p-3"
-              >
-                <div className="flex items-center gap-3">
-                  <Checkbox id={habit.id} />
-                  <Label htmlFor={habit.id}>{habit.label}</Label>
-                </div>
-                <Badge variant="secondary">{habit.streak} day streak</Badge>
-              </div>
-            ))}
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle className="text-base">Wellness check-in</CardTitle>
-            <CardDescription>Rate how you feel today.</CardDescription>
-          </CardHeader>
-          <CardContent className="space-y-5">
-            {[
-              { id: "energy", label: "Energy" },
-              { id: "mood", label: "Mood" },
-              { id: "stress", label: "Stress" },
-            ].map((metric) => (
-              <div key={metric.id} className="space-y-2">
-                <div className="flex items-center justify-between text-sm">
-                  <Label htmlFor={metric.id}>{metric.label}</Label>
-                  <span className="text-muted-foreground">5/10</span>
-                </div>
-                <input
-                  id={metric.id}
-                  type="range"
-                  min={1}
-                  max={10}
-                  defaultValue={5}
-                  className="w-full accent-primary"
-                />
-              </div>
-            ))}
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader>
-            <CardTitle className="text-base">Daily journal</CardTitle>
-            <CardDescription>
-              One entry per day to reflect and help your pet grow.
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <textarea
-              className="min-h-28 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-              placeholder="How did today go?"
-            />
-          </CardContent>
-        </Card>
-
-        <Button asChild className="w-full">
-          <Link href={routes.dailyQuiz}>Take today&apos;s quiz</Link>
-        </Button>
+        <AvatarStatusCard />
+        <HabitTracker />
+        <DailyQuizLinkButton />
       </div>
     </AppShell>
   );

app/(app)/daily/quiz/page.tsx

@@ -1,56 +0,0 @@
-import { AppShell } from "@/components/layout/app-shell";
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
-
-const quizQuestion = {
-  prompt: "What is one small win you can celebrate today?",
-  options: [
-    "I showed up for myself",
-    "I rested when I needed to",
-    "I reached out to someone",
-    "I kept a promise to myself",
-  ],
-};
-
-export default function DailyQuizPage() {
-  return (
-    <AppShell
-      title="Daily quiz"
-      description="One quiz per day. Come back tomorrow for a new prompt."
-    >
-      <div className="flex flex-col gap-6">
-        <div className="flex items-center justify-between">
-          <Badge>Today&apos;s prompt</Badge>
-          <Badge variant="outline">Not completed</Badge>
-        </div>
-
-        <Card>
-          <CardHeader>
-            <CardTitle className="text-base">{quizQuestion.prompt}</CardTitle>
-            <CardDescription>
-              Pick the answer that fits best. You can only submit once per day.
-            </CardDescription>
-          </CardHeader>
-          <CardContent className="space-y-3">
-            {quizQuestion.options.map((option) => (
-              <Button
-                key={option}
-                variant="outline"
-                className="h-auto w-full justify-start whitespace-normal px-4 py-3 text-left"
-              >
-                {option}
-              </Button>
-            ))}
-          </CardContent>
-        </Card>
-      </div>
-    </AppShell>
-  );
-}

app/(app)/layout.tsx

@@ -8,7 +8,7 @@ export default function AppLayout({
   children: React.ReactNode;
 }) {
   return (
-    <Suspense fallback={<div className="min-h-svh bg-background pb-24" />}>
+    <Suspense fallback={<div className="min-h-svh bg-background" />}>
       <AppAuthGate>{children}</AppAuthGate>
     </Suspense>
   );

app/(app)/profile/page.tsx

@@ -1,70 +1,26 @@
 import { Suspense } from "react";
 
+import { ProfilePreferencesForm } from "@/components/profile/profile-preferences-form";
 import { AppShell } from "@/components/layout/app-shell";
-import { LogoutButton } from "@/components/logout-button";
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
 import { getSessionUser } from "@/lib/auth-helpers";
 
 async function ProfileContent() {
   const user = await getSessionUser();
 
-  return (
-    <div className="flex flex-col gap-6">
-      <Card>
-        <CardHeader>
-          <CardTitle className="text-base">Account</CardTitle>
-          <CardDescription>Your sign-in details and session.</CardDescription>
-        </CardHeader>
-        <CardContent className="space-y-4">
-          <div className="space-y-2">
-            <Label htmlFor="email">Email</Label>
-            <Input id="email" value={user?.email ?? ""} readOnly />
-          </div>
-          <div className="flex items-center justify-between rounded-lg border px-3 py-2">
-            <span className="text-sm">Onboarding</span>
-            <Badge variant="secondary">Complete</Badge>
-          </div>
-          <LogoutButton />
-        </CardContent>
-      </Card>
-
-      <Card>
-        <CardHeader>
-          <CardTitle className="text-base">Preferences</CardTitle>
-          <CardDescription>
-            Notification and reminder settings will live here.
-          </CardDescription>
-        </CardHeader>
-        <CardContent className="space-y-3">
-          <Button variant="outline" className="w-full justify-start">
-            Daily reminder time
-          </Button>
-          <Button variant="outline" className="w-full justify-start">
-            Pet appearance
-          </Button>
-        </CardContent>
-      </Card>
-    </div>
-  );
+  return <ProfilePreferencesForm email={user?.email} />;
 }
 
 export default function ProfilePage() {
   return (
     <AppShell
-      title="Profile"
-      description="Manage your account and habit pet preferences."
+      title="Profile & preferences"
+      description="Edit account details and personalize your experience."
     >
-      <Suspense fallback={<p className="text-sm text-muted-foreground">Loading profile...</p>}>
+      <Suspense
+        fallback={
+          <p className="text-sm text-muted-foreground">Loading profile...</p>
+        }
+      >
         <ProfileContent />
       </Suspense>
     </AppShell>

app/daily/quiz/page.tsx

@@ -0,0 +1,13 @@
+import { DailyQuizForm } from "@/components/daily-quiz/daily-quiz-form";
+import { AppShell } from "@/components/layout/app-shell";
+
+export default function DailyQuizPage() {
+  return (
+    <AppShell
+      title="Daily quiz"
+      description="Complete your once-per-day wellness sliders and journal."
+    >
+      <DailyQuizForm />
+    </AppShell>
+  );
+}

app/habits/page.tsx

@@ -0,0 +1,13 @@
+import { HabitTracker } from "@/components/habits/habit-tracker";
+import { AppShell } from "@/components/layout/app-shell";
+
+export default function HabitsPage() {
+  return (
+    <AppShell
+      title="Habits"
+      description="Add custom habits and see how your daily tasks are chosen."
+    >
+      <HabitTracker mode="manage" />
+    </AppShell>
+  );
+}

app/layout.tsx

@@ -1,6 +1,8 @@
 import type { Metadata } from "next";
 import { Geist } from "next/font/google";
 import { ThemeProvider } from "next-themes";
+
+import { GlobalBottomNav } from "@/components/layout/global-bottom-nav";
 import "./globals.css";
 
 const defaultUrl = process.env.VERCEL_URL
@@ -33,7 +35,8 @@ export default function RootLayout({
           enableSystem
           disableTransitionOnChange
         >
-          {children}
+          <div className="min-h-svh pb-24">{children}</div>
+          <GlobalBottomNav />
         </ThemeProvider>
       </body>
     </html>

app/page.tsx

@@ -16,7 +16,7 @@ import { routes } from "@/lib/routes";
 
 export default function Home() {
   return (
-    <main className="min-h-svh flex flex-col">
+    <main className="flex min-h-svh flex-col">
       <Suspense fallback={null}>
         <LoggedInRedirect />
       </Suspense>