setting up test functionality

2026-05-23 16:47:42 -06:00
parent 2ad9e42f3f
commit 94dbd18946
27 changed files with 1451 additions and 230 deletions
--- a/app/(app)/avatar/page.tsx
+++ b/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>
  );
--- a/app/(app)/daily/quiz/page.tsx
+++ b/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>
-  );
-}
--- a/app/(app)/layout.tsx
+++ b/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>
  );
--- a/app/(app)/profile/page.tsx
+++ b/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>
--- a/app/daily/quiz/page.tsx
+++ b/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>
+  );
+}
--- a/app/habits/page.tsx
+++ b/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>
+  );
+}
--- a/app/layout.tsx
+++ b/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>
--- a/app/page.tsx
+++ b/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>
--- a/components/avatar/avatar-status-card.tsx
+++ b/components/avatar/avatar-status-card.tsx
@@ -0,0 +1,78 @@
+"use client";
+
+import Link from "next/link";
+import { useEffect, useState } from "react";
+
+import { PixelAvatar } from "@/components/avatar/pixel-avatar";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+} from "@/components/ui/card";
+import {
+  defaultAvatarCondition,
+  WELLNESS_SCALE_MAX,
+  type AvatarCondition,
+} from "@/lib/avatar-state";
+import {
+  getAvatarConditionForToday,
+  hasCompletedDailyQuizToday,
+} from "@/lib/daily-quiz-storage";
+import { routes } from "@/lib/routes";
+
+export function AvatarStatusCard() {
+  const [condition, setCondition] = useState<AvatarCondition>(
+    defaultAvatarCondition,
+  );
+  const [hasCheckedInToday, setHasCheckedInToday] = useState(false);
+  const [isReady, setIsReady] = useState(false);
+
+  useEffect(() => {
+    const checkedIn = hasCompletedDailyQuizToday();
+    setHasCheckedInToday(checkedIn);
+    setCondition(getAvatarConditionForToday() ?? defaultAvatarCondition);
+    setIsReady(true);
+  }, []);
+
+  if (!isReady) {
+    return (
+      <Card>
+        <CardContent className="pt-6">
+          <p className="text-center text-sm text-muted-foreground">
+            Loading your pet...
+          </p>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <Card>
+      <CardContent className="flex flex-col items-center gap-4 pt-6">
+        <PixelAvatar mood={condition.mood} />
+        <div className="flex flex-wrap justify-center gap-2">
+          <Badge variant="secondary">
+            Energy {condition.energy}/{WELLNESS_SCALE_MAX}
+          </Badge>
+          <Badge variant="secondary">
+            Health {condition.health}/{WELLNESS_SCALE_MAX}
+          </Badge>
+          <Badge variant={hasCheckedInToday ? "default" : "outline"}>
+            {hasCheckedInToday ? "Checked in today" : "Quiz pending"}
+          </Badge>
+        </div>
+        <p className="text-center text-sm text-muted-foreground">
+          {hasCheckedInToday
+            ? "Your pet is reacting to today's wellness check-in and journal."
+            : "Complete today's quiz to update your pet's mood, energy, and health."}
+        </p>
+        {!hasCheckedInToday ? (
+          <Button asChild className="w-full">
+            <Link href={routes.dailyQuiz}>Take today&apos;s quiz</Link>
+          </Button>
+        ) : null}
+      </CardContent>
+    </Card>
+  );
+}
--- a/components/avatar/pixel-avatar.tsx
+++ b/components/avatar/pixel-avatar.tsx
@@ -1,6 +1,5 @@
 import { cn } from "@/lib/utils";
-
-type AvatarMood = "happy" | "neutral" | "tired";
+import type { AvatarMood } from "@/lib/avatar-state";

 const moodStyles: Record<AvatarMood, string> = {
  happy: "bg-emerald-400 shadow-[0_0_0_4px_rgba(16,185,129,0.25)]",
--- a/components/daily-quiz/daily-quiz-form.tsx
+++ b/components/daily-quiz/daily-quiz-form.tsx
@@ -0,0 +1,185 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+import { PixelAvatar } from "@/components/avatar/pixel-avatar";
+import { WellnessSlider } from "@/components/daily-quiz/wellness-slider";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Label } from "@/components/ui/label";
+import {
+  defaultDailyQuizAnswers,
+  WELLNESS_SCALE_MAX,
+  type DailyQuizAnswers,
+  type DailyQuizSubmission,
+} from "@/lib/avatar-state";
+import {
+  getDailyQuizSubmission,
+  getTodayDateKey,
+  saveDailyQuizSubmission,
+} from "@/lib/daily-quiz-storage";
+
+export function DailyQuizForm() {
+  const [answers, setAnswers] = useState<DailyQuizAnswers>(
+    defaultDailyQuizAnswers,
+  );
+  const [submission, setSubmission] = useState<DailyQuizSubmission | null>(
+    null,
+  );
+  const [isReady, setIsReady] = useState(false);
+
+  useEffect(() => {
+    const existingSubmission = getDailyQuizSubmission();
+
+    if (existingSubmission?.date === getTodayDateKey()) {
+      setSubmission(existingSubmission);
+      setAnswers(existingSubmission.answers);
+    }
+
+    setIsReady(true);
+  }, []);
+
+  const isCompleted = submission !== null;
+  const canSubmit = !isCompleted;
+
+  const updateAnswer = <K extends keyof DailyQuizAnswers>(
+    key: K,
+    value: DailyQuizAnswers[K],
+  ) => {
+    setAnswers((current) => ({
+      ...current,
+      [key]: value,
+    }));
+  };
+
+  const handleSubmit = () => {
+    if (!canSubmit) {
+      return;
+    }
+
+    const savedSubmission = saveDailyQuizSubmission(answers);
+    setSubmission(savedSubmission);
+  };
+
+  if (!isReady) {
+    return (
+      <p className="text-sm text-muted-foreground">Loading today&apos;s quiz...</p>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-6">
+      <div className="flex items-center justify-between">
+        <Badge>Today&apos;s check-in</Badge>
+        <Badge variant={isCompleted ? "default" : "outline"}>
+          {isCompleted ? "Completed" : "Not completed"}
+        </Badge>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base">Wellness</CardTitle>
+          <CardDescription>
+            Sliders from 1 to 5 for how you&apos;re doing today.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-5">
+          <WellnessSlider
+            id="feeling"
+            label="How are you feeling today?"
+            value={answers.feeling}
+            disabled={isCompleted}
+            onChange={(value) => updateAnswer("feeling", value)}
+          />
+          <WellnessSlider
+            id="stress"
+            label="How stressed are you today?"
+            value={answers.stress}
+            disabled={isCompleted}
+            onChange={(value) => updateAnswer("stress", value)}
+          />
+          <WellnessSlider
+            id="energy"
+            label="How much energy do you have?"
+            value={answers.energy}
+            disabled={isCompleted}
+            onChange={(value) => updateAnswer("energy", value)}
+          />
+          <WellnessSlider
+            id="sleep-length"
+            label="How long did you sleep?"
+            value={answers.sleepLength}
+            disabled={isCompleted}
+            onChange={(value) => updateAnswer("sleepLength", value)}
+          />
+          <WellnessSlider
+            id="sleep-quality"
+            label="How good was your sleep?"
+            value={answers.sleepQuality}
+            disabled={isCompleted}
+            onChange={(value) => updateAnswer("sleepQuality", value)}
+          />
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base">Daily journal</CardTitle>
+          <CardDescription>Write about your day.</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-3">
+          <Label htmlFor="journal" className="sr-only">
+            Daily journal
+          </Label>
+          <textarea
+            id="journal"
+            value={answers.journal}
+            disabled={isCompleted}
+            onChange={(event) => updateAnswer("journal", event.target.value)}
+            className="min-h-32 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 disabled:opacity-60"
+            placeholder="Write about your day."
+          />
+        </CardContent>
+      </Card>
+
+      {isCompleted && submission ? (
+        <Card>
+          <CardContent className="flex flex-col items-center gap-4 pt-6">
+            <PixelAvatar mood={submission.condition.mood} size="md" />
+            <div className="grid w-full grid-cols-3 gap-2 text-center text-sm">
+              <div className="rounded-lg border px-3 py-2">
+                <p className="text-muted-foreground">Mood</p>
+                <p className="font-medium capitalize">
+                  {submission.condition.mood}
+                </p>
+              </div>
+              <div className="rounded-lg border px-3 py-2">
+                <p className="text-muted-foreground">Energy</p>
+                <p className="font-medium">
+                  {submission.condition.energy}/{WELLNESS_SCALE_MAX}
+                </p>
+              </div>
+              <div className="rounded-lg border px-3 py-2">
+                <p className="text-muted-foreground">Health</p>
+                <p className="font-medium">
+                  {submission.condition.health}/{WELLNESS_SCALE_MAX}
+                </p>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      ) : (
+        <Button className="w-full" disabled={!canSubmit} onClick={handleSubmit}>
+          Complete daily quiz
+        </Button>
+      )}
+    </div>
+  );
+}
--- a/components/daily-quiz/daily-quiz-link-button.tsx
+++ b/components/daily-quiz/daily-quiz-link-button.tsx
@@ -0,0 +1,32 @@
+"use client";
+
+import Link from "next/link";
+import { useEffect, useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import { hasCompletedDailyQuizToday } from "@/lib/daily-quiz-storage";
+import { routes } from "@/lib/routes";
+
+export function DailyQuizLinkButton() {
+  const [isCompleted, setIsCompleted] = useState(false);
+  const [isReady, setIsReady] = useState(false);
+
+  useEffect(() => {
+    setIsCompleted(hasCompletedDailyQuizToday());
+    setIsReady(true);
+  }, []);
+
+  if (!isReady || isCompleted) {
+    return (
+      <Button className="w-full" variant="outline" disabled>
+        Open daily quiz
+      </Button>
+    );
+  }
+
+  return (
+    <Button asChild className="w-full" variant="outline">
+      <Link href={routes.dailyQuiz}>Open daily quiz</Link>
+    </Button>
+  );
+}
--- a/components/daily-quiz/wellness-slider.tsx
+++ b/components/daily-quiz/wellness-slider.tsx
@@ -0,0 +1,51 @@
+"use client";
+
+import { Label } from "@/components/ui/label";
+
+type WellnessSliderProps = {
+  id: string;
+  label: string;
+  value: number;
+  min?: number;
+  max?: number;
+  step?: number;
+  unit?: string;
+  formatValue?: (value: number) => string;
+  disabled?: boolean;
+  onChange: (value: number) => void;
+};
+
+export function WellnessSlider({
+  id,
+  label,
+  value,
+  min = 1,
+  max = 5,
+  step = 1,
+  unit,
+  formatValue,
+  disabled = false,
+  onChange,
+}: WellnessSliderProps) {
+  const displayValue = formatValue ? formatValue(value) : `${value}${unit ?? ""}`;
+
+  return (
+    <div className="space-y-2">
+      <div className="flex items-center justify-between text-sm">
+        <Label htmlFor={id}>{label}</Label>
+        <span className="text-muted-foreground">{displayValue}</span>
+      </div>
+      <input
+        id={id}
+        type="range"
+        min={min}
+        max={max}
+        step={step}
+        value={value}
+        disabled={disabled}
+        onChange={(event) => onChange(Number(event.target.value))}
+        className="w-full accent-primary disabled:opacity-60"
+      />
+    </div>
+  );
+}
--- a/components/habits/habit-tracker.tsx
+++ b/components/habits/habit-tracker.tsx
@@ -0,0 +1,272 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+
+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 { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { HABIT_PET_DATA_UPDATED_EVENT } from "@/lib/app-events";
+import {
+  getDailyTasks,
+  type DailyTask,
+} from "@/lib/daily-tasks";
+import {
+  addHabit,
+  getCustomHabits,
+  isHabitCompletedToday,
+  removeHabit,
+  toggleHabitCompletion,
+  type Habit,
+} from "@/lib/habits-storage";
+import { getProfilePreferences } from "@/lib/profile-preferences-storage";
+import { hasCompletedDailyQuizToday } from "@/lib/daily-quiz-storage";
+
+type HabitTrackerProps = {
+  mode?: "daily" | "manage";
+};
+
+const reasonLabels = {
+  custom: "Custom",
+  focus: "Your focus",
+  quiz: "Today's quiz",
+} as const;
+
+function DailyTaskList({
+  tasks,
+  onToggle,
+}: {
+  tasks: DailyTask[];
+  onToggle: (habitId: string) => void;
+}) {
+  if (tasks.length === 0) {
+    return (
+      <p className="text-sm text-muted-foreground">
+        No daily tasks yet. Set focus topics in Profile or complete the daily
+        quiz to personalize your list.
+      </p>
+    );
+  }
+
+  const sortedTasks = [...tasks].sort((a, b) => {
+    const aCompleted = isHabitCompletedToday(a);
+    const bCompleted = isHabitCompletedToday(b);
+
+    if (aCompleted === bCompleted) {
+      return 0;
+    }
+
+    return aCompleted ? 1 : -1;
+  });
+
+  return (
+    <>
+      {sortedTasks.map((habit) => {
+        const isCompleted = isHabitCompletedToday(habit);
+
+        return (
+          <div
+            key={habit.id}
+            className={`flex items-start justify-between gap-3 rounded-lg border p-3 ${
+              isCompleted ? "bg-muted/40 opacity-80" : ""
+            }`}
+          >
+            <div className="flex min-w-0 items-start gap-3">
+              <Checkbox
+                id={habit.id}
+                checked={isCompleted}
+                onCheckedChange={() => onToggle(habit.id)}
+                className="mt-0.5"
+              />
+              <div className="flex min-w-0 flex-col gap-2">
+                <Label htmlFor={habit.id} className="leading-snug">
+                  {habit.label}
+                </Label>
+                <Badge
+                  variant="outline"
+                  className="w-fit px-2.5 py-0.5 text-[11px] font-normal"
+                >
+                  {reasonLabels[habit.reason]}
+                </Badge>
+              </div>
+            </div>
+            <Badge variant="secondary" className="shrink-0">
+              {habit.streak} day streak
+            </Badge>
+          </div>
+        );
+      })}
+    </>
+  );
+}
+
+function CustomHabitList({
+  habits,
+  onRemove,
+}: {
+  habits: Habit[];
+  onRemove: (habitId: string) => void;
+}) {
+  if (habits.length === 0) {
+    return (
+      <p className="text-sm text-muted-foreground">
+        No custom habits yet. Add one below to include it in your daily tasks.
+      </p>
+    );
+  }
+
+  return (
+    <>
+      {habits.map((habit) => (
+        <div
+          key={habit.id}
+          className="flex items-center justify-between rounded-lg border p-3"
+        >
+          <span className="text-sm">{habit.label}</span>
+          <div className="flex items-center gap-2">
+            <Badge variant="secondary">{habit.streak} day streak</Badge>
+            <Button
+              type="button"
+              size="sm"
+              variant="ghost"
+              onClick={() => onRemove(habit.id)}
+            >
+              Remove
+            </Button>
+          </div>
+        </div>
+      ))}
+    </>
+  );
+}
+
+export function HabitTracker({ mode = "daily" }: HabitTrackerProps) {
+  const [dailyTasks, setDailyTasks] = useState<DailyTask[]>([]);
+  const [customHabits, setCustomHabits] = useState<Habit[]>([]);
+  const [newHabitLabel, setNewHabitLabel] = useState("");
+  const [focusTopics, setFocusTopics] = useState<string[]>([]);
+  const [quizCompletedToday, setQuizCompletedToday] = useState(false);
+  const [isReady, setIsReady] = useState(false);
+
+  const refresh = useCallback(() => {
+    setDailyTasks(getDailyTasks());
+    setCustomHabits(getCustomHabits());
+    setFocusTopics(getProfilePreferences().focusTopics);
+    setQuizCompletedToday(hasCompletedDailyQuizToday());
+    setIsReady(true);
+  }, []);
+
+  useEffect(() => {
+    refresh();
+
+    window.addEventListener(HABIT_PET_DATA_UPDATED_EVENT, refresh);
+    return () => {
+      window.removeEventListener(HABIT_PET_DATA_UPDATED_EVENT, refresh);
+    };
+  }, [refresh]);
+
+  const handleToggle = (habitId: string) => {
+    toggleHabitCompletion(habitId);
+  };
+
+  const handleAddHabit = () => {
+    addHabit(newHabitLabel);
+    setNewHabitLabel("");
+  };
+
+  const handleRemoveHabit = (habitId: string) => {
+    removeHabit(habitId);
+  };
+
+  if (!isReady) {
+    return (
+      <Card>
+        <CardContent className="pt-6">
+          <p className="text-sm text-muted-foreground">Loading habits...</p>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  if (mode === "manage") {
+    return (
+      <div className="flex flex-col gap-6">
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base">Custom habits</CardTitle>
+            <CardDescription>
+              Add your own habits. Custom habits always appear in your daily
+              task list.
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <CustomHabitList habits={customHabits} onRemove={handleRemoveHabit} />
+            <div className="flex gap-2">
+              <Input
+                value={newHabitLabel}
+                placeholder="Add a custom habit"
+                onChange={(event) => setNewHabitLabel(event.target.value)}
+                onKeyDown={(event) => {
+                  if (event.key === "Enter") {
+                    event.preventDefault();
+                    handleAddHabit();
+                  }
+                }}
+              />
+              <Button type="button" onClick={handleAddHabit}>
+                Add
+              </Button>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base">How daily tasks are picked</CardTitle>
+            <CardDescription>
+              Your tasks combine focus preferences, custom habits, and today&apos;s
+              quiz.
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-3 text-sm text-muted-foreground">
+            <p>
+              Focus topics:{" "}
+              {focusTopics.length > 0 ? focusTopics.join(", ") : "None selected"}
+            </p>
+            <p>
+              Daily quiz today:{" "}
+              {quizCompletedToday ? "Completed" : "Not completed yet"}
+            </p>
+            <p>
+              Suggested habits can appear when your quiz shows low energy, high
+              stress, or poor sleep.
+            </p>
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="text-base">Today&apos;s tasks</CardTitle>
+        <CardDescription>
+          Personalized from your focus topics
+          {quizCompletedToday ? ", today's quiz," : ""} and custom habits.
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <DailyTaskList tasks={dailyTasks} onToggle={handleToggle} />
+      </CardContent>
+    </Card>
+  );
+}
--- a/components/layout/app-auth-gate.tsx
+++ b/components/layout/app-auth-gate.tsx
@@ -1,10 +1,7 @@
-import { requireOnboardingComplete } from "@/lib/auth-helpers";
-
 type AppAuthGateProps = {
  children: React.ReactNode;
 };
-
 export async function AppAuthGate({ children }: AppAuthGateProps) {
-  await requireOnboardingComplete();
+  // Temporary: allow guest access while testing app pages from the bottom nav.
  return children;
 }
--- a/components/layout/app-nav.tsx
+++ b/components/layout/app-nav.tsx
@@ -2,25 +2,53 @@

 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { Home, ShoppingBag, Sparkles, UserRound } from "lucide-react";
+import {
+  Home,
+  ListPlus,
+  ShoppingBag,
+  Sparkles,
+  UserRound,
+} from "lucide-react";

 import { cn } from "@/lib/utils";
-import { appNavItems, routes } from "@/lib/routes";
+import { appNavItems, routes, type NavItem } from "@/lib/routes";
+
+const gridColsClass = {
+  1: "grid-cols-1",
+  2: "grid-cols-2",
+  3: "grid-cols-3",
+  4: "grid-cols-4",
+  5: "grid-cols-5",
+} as const;

 const navIcons = {
  [routes.avatar]: Home,
+  [routes.habits]: ListPlus,
  [routes.dailyQuiz]: Sparkles,
  [routes.shop]: ShoppingBag,
  [routes.profile]: UserRound,
 } as const;

-export function AppNav() {
+type AppNavProps = {
+  items?: readonly NavItem[];
+};
+
+export function AppNav({ items = appNavItems }: AppNavProps) {
  const pathname = usePathname();
+  const columnCount = Math.min(
+    items.length,
+    5,
+  ) as keyof typeof gridColsClass;

  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) => {
+      <div
+        className={cn(
+          "mx-auto grid max-w-lg gap-1 px-1 pb-[max(0.5rem,env(safe-area-inset-bottom))] pt-2",
+          gridColsClass[columnCount],
+        )}
+      >
+        {items.map((item) => {
          const Icon = navIcons[item.href];
          const isActive =
            pathname === item.href ||
@@ -31,7 +59,7 @@ export function AppNav() {
              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",
+                "flex flex-col items-center gap-1 rounded-lg px-1 py-2 text-[9px] font-medium leading-tight transition-colors",
                isActive
                  ? "bg-primary text-primary-foreground"
                  : "text-muted-foreground hover:bg-muted hover:text-foreground",
--- a/components/layout/app-shell.tsx
+++ b/components/layout/app-shell.tsx
@@ -1,5 +1,3 @@
-import { AppNav } from "@/components/layout/app-nav";
-
 type AppShellProps = {
  children: React.ReactNode;
  title?: string;
@@ -8,7 +6,7 @@ type AppShellProps = {

 export function AppShell({ children, title, description }: AppShellProps) {
  return (
-    <div className="min-h-svh bg-background pb-24">
+    <div className="min-h-svh bg-background">
      {(title || description) && (
        <header className="border-b border-border/60 bg-card/40">
          <div className="mx-auto max-w-lg px-5 py-5">
@@ -22,7 +20,6 @@ export function AppShell({ children, title, description }: AppShellProps) {
        </header>
      )}
      <main className="mx-auto max-w-lg px-5 py-6">{children}</main>
-      <AppNav />
    </div>
  );
 }
--- a/components/layout/global-bottom-nav.tsx
+++ b/components/layout/global-bottom-nav.tsx
@@ -0,0 +1,7 @@
+"use client";
+
+import { AppNav } from "@/components/layout/app-nav";
+
+export function GlobalBottomNav() {
+  return <AppNav />;
+}
--- a/components/profile/profile-preferences-form.tsx
+++ b/components/profile/profile-preferences-form.tsx
@@ -0,0 +1,166 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+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 { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  avatarVibeOptions,
+  defaultProfilePreferences,
+  focusTopicOptions,
+  getProfilePreferences,
+  saveProfilePreferences,
+  type ProfilePreferences,
+} from "@/lib/profile-preferences-storage";
+
+type ProfilePreferencesFormProps = {
+  email?: string | null;
+};
+
+export function ProfilePreferencesForm({ email }: ProfilePreferencesFormProps) {
+  const [preferences, setPreferences] = useState<ProfilePreferences>(
+    defaultProfilePreferences,
+  );
+  const [isReady, setIsReady] = useState(false);
+
+  useEffect(() => {
+    setPreferences(getProfilePreferences());
+    setIsReady(true);
+  }, []);
+
+  const updatePreferences = (updates: Partial<ProfilePreferences>) => {
+    const nextPreferences = { ...preferences, ...updates };
+    setPreferences(nextPreferences);
+    saveProfilePreferences(nextPreferences);
+  };
+
+  const toggleFocusTopic = (topic: string) => {
+    const focusTopics = preferences.focusTopics.includes(topic)
+      ? preferences.focusTopics.filter((item) => item !== topic)
+      : [...preferences.focusTopics, topic];
+
+    updatePreferences({ focusTopics });
+  };
+
+  if (!isReady) {
+    return (
+      <p className="text-sm text-muted-foreground">Loading profile...</p>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-6">
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base">Profile information</CardTitle>
+          <CardDescription>Your account details.</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="email">Email</Label>
+            <Input id="email" value={email ?? "Guest user"} readOnly />
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base">Focus topic preferences</CardTitle>
+          <CardDescription>
+            Choose the areas you want your pet and daily tasks to focus on.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-3">
+          {focusTopicOptions.map((topic) => (
+            <div key={topic} className="flex items-center gap-3 rounded-lg border p-3">
+              <Checkbox
+                id={`focus-${topic}`}
+                checked={preferences.focusTopics.includes(topic)}
+                onCheckedChange={() => toggleFocusTopic(topic)}
+              />
+              <Label htmlFor={`focus-${topic}`}>{topic}</Label>
+            </div>
+          ))}
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base">Avatar preferences</CardTitle>
+          <CardDescription>Personalize your pet&apos;s vibe.</CardDescription>
+        </CardHeader>
+        <CardContent className="flex flex-wrap gap-2">
+          {avatarVibeOptions.map((vibe) => (
+            <Button
+              key={vibe}
+              type="button"
+              size="sm"
+              variant={preferences.avatarVibe === vibe ? "default" : "outline"}
+              onClick={() => updatePreferences({ avatarVibe: vibe })}
+            >
+              {vibe}
+            </Button>
+          ))}
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base">Notification preferences</CardTitle>
+          <CardDescription>
+            Control reminders for your daily quiz and habits.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="flex items-center justify-between rounded-lg border px-3 py-2">
+            <Label htmlFor="daily-reminder">Daily reminder</Label>
+            <Checkbox
+              id="daily-reminder"
+              checked={preferences.dailyReminderEnabled}
+              onCheckedChange={(checked) =>
+                updatePreferences({ dailyReminderEnabled: checked === true })
+              }
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="reminder-time">Daily reminder time</Label>
+            <Input
+              id="reminder-time"
+              type="time"
+              value={preferences.dailyReminderTime}
+              disabled={!preferences.dailyReminderEnabled}
+              onChange={(event) =>
+                updatePreferences({ dailyReminderTime: event.target.value })
+              }
+            />
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base">Account settings</CardTitle>
+          <CardDescription>Session and onboarding status.</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <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>
+    </div>
+  );
+}
--- a/lib/app-events.ts
+++ b/lib/app-events.ts
@@ -0,0 +1,9 @@
+export const HABIT_PET_DATA_UPDATED_EVENT = "habit-pet-data-updated";
+
+export function notifyHabitPetDataUpdated() {
+  if (typeof window === "undefined") {
+    return;
+  }
+
+  window.dispatchEvent(new Event(HABIT_PET_DATA_UPDATED_EVENT));
+}
--- a/lib/avatar-state.ts
+++ b/lib/avatar-state.ts
@@ -0,0 +1,97 @@
+export type AvatarMood = "happy" | "neutral" | "tired";
+
+export type DailyQuizAnswers = {
+  feeling: number;
+  stress: number;
+  energy: number;
+  sleepLength: number;
+  sleepQuality: number;
+  journal: string;
+};
+
+export type AvatarCondition = {
+  mood: AvatarMood;
+  energy: number;
+  health: number;
+};
+
+export type DailyQuizSubmission = {
+  date: string;
+  answers: DailyQuizAnswers;
+  condition: AvatarCondition;
+};
+
+export const WELLNESS_SCALE_MAX = 5;
+
+export const defaultDailyQuizAnswers: DailyQuizAnswers = {
+  feeling: 3,
+  stress: 3,
+  energy: 3,
+  sleepLength: 3,
+  sleepQuality: 3,
+  journal: "",
+};
+
+export function computeAvatarCondition(
+  answers: DailyQuizAnswers,
+): AvatarCondition {
+  const { feeling, stress, energy, sleepLength, sleepQuality } = answers;
+
+  const wellnessAverage = (feeling + energy + (WELLNESS_SCALE_MAX + 1 - stress)) / 3;
+  const sleepAverage = (sleepLength + sleepQuality) / 2;
+  const health = Math.round((wellnessAverage + sleepAverage) / 2);
+  const energyLevel = Math.round((energy + sleepQuality) / 2);
+
+  let avatarMood: AvatarMood = "neutral";
+
+  if (energyLevel >= 4 && feeling >= 4 && health >= 4) {
+    avatarMood = "happy";
+  } else if (energy <= 2 || sleepLength <= 2 || sleepQuality <= 2) {
+    avatarMood = "tired";
+  }
+
+  return {
+    mood: avatarMood,
+    energy: clampStat(energyLevel),
+    health: clampStat(health),
+  };
+}
+
+function clampStat(value: number) {
+  return Math.min(WELLNESS_SCALE_MAX, Math.max(1, value));
+}
+
+export const defaultAvatarCondition: AvatarCondition = {
+  mood: "neutral",
+  energy: 3,
+  health: 3,
+};
+
+// Backward compatibility for older saved submissions.
+export function normalizeDailyQuizAnswers(
+  answers: Partial<DailyQuizAnswers> & {
+    mood?: number;
+  },
+): DailyQuizAnswers {
+  const scaleValue = (value: number | undefined, fallback: number) => {
+    if (value === undefined) {
+      return fallback;
+    }
+
+    return value > WELLNESS_SCALE_MAX
+      ? Math.max(1, Math.round(value / 2))
+      : value;
+  };
+
+  return {
+    feeling: scaleValue(answers.feeling ?? answers.mood, defaultDailyQuizAnswers.feeling),
+    stress: scaleValue(answers.stress, defaultDailyQuizAnswers.stress),
+    energy: scaleValue(answers.energy, defaultDailyQuizAnswers.energy),
+    sleepLength: scaleValue(answers.sleepLength, defaultDailyQuizAnswers.sleepLength),
+    sleepQuality: scaleValue(
+      answers.sleepQuality,
+      defaultDailyQuizAnswers.sleepQuality,
+    ),
+    journal: answers.journal ?? "",
+  };
+}
--- a/lib/daily-quiz-storage.ts
+++ b/lib/daily-quiz-storage.ts
@@ -0,0 +1,74 @@
+import {
+  computeAvatarCondition,
+  normalizeDailyQuizAnswers,
+  type AvatarCondition,
+  type DailyQuizAnswers,
+  type DailyQuizSubmission,
+} from "@/lib/avatar-state";
+import { notifyHabitPetDataUpdated } from "@/lib/app-events";
+const STORAGE_KEY = "habit-pet-daily-quiz";
+
+export function getTodayDateKey(date = new Date()) {
+  return date.toISOString().slice(0, 10);
+}
+
+function normalizeSubmission(
+  submission: DailyQuizSubmission,
+): DailyQuizSubmission {
+  const answers = normalizeDailyQuizAnswers(submission.answers);
+
+  return {
+    ...submission,
+    answers,
+    condition: computeAvatarCondition(answers),
+  };
+}
+
+export function getDailyQuizSubmission(): DailyQuizSubmission | null {
+  if (typeof window === "undefined") {
+    return null;
+  }
+
+  const raw = window.localStorage.getItem(STORAGE_KEY);
+
+  if (!raw) {
+    return null;
+  }
+
+  try {
+    return normalizeSubmission(JSON.parse(raw) as DailyQuizSubmission);
+  } catch {
+    return null;
+  }
+}
+
+export function hasCompletedDailyQuizToday() {
+  const submission = getDailyQuizSubmission();
+  return submission?.date === getTodayDateKey();
+}
+
+export function saveDailyQuizSubmission(
+  answers: DailyQuizAnswers,
+): DailyQuizSubmission {
+  const submission: DailyQuizSubmission = {
+    date: getTodayDateKey(),
+    answers,
+    condition: computeAvatarCondition(answers),
+  };
+
+  window.localStorage.setItem(STORAGE_KEY, JSON.stringify(submission));
+
+  notifyHabitPetDataUpdated();
+
+  return submission;
+}
+
+export function getAvatarConditionForToday(): AvatarCondition | null {
+  const submission = getDailyQuizSubmission();
+
+  if (!submission || submission.date !== getTodayDateKey()) {
+    return null;
+  }
+
+  return submission.condition;
+}
--- a/lib/daily-tasks.ts
+++ b/lib/daily-tasks.ts
@@ -0,0 +1,111 @@
+import type { DailyQuizAnswers } from "@/lib/avatar-state";
+import { getDailyQuizSubmission, getTodayDateKey } from "@/lib/daily-quiz-storage";
+import {
+  catalogHabitIds,
+  getCatalogEntry,
+  habitCatalog,
+  matchesFocusTopics,
+  matchesQuizAnswers,
+} from "@/lib/habit-catalog";
+import { getHabits, saveHabits, type Habit } from "@/lib/habits-storage";
+import {
+  getProfilePreferences,
+  type ProfilePreferences,
+} from "@/lib/profile-preferences-storage";
+
+export type DailyTaskReason = "custom" | "focus" | "quiz";
+
+export type DailyTask = Habit & {
+  reason: DailyTaskReason;
+};
+
+function getQuizAnswersForToday(): DailyQuizAnswers | null {
+  const submission = getDailyQuizSubmission();
+
+  if (!submission || submission.date !== getTodayDateKey()) {
+    return null;
+  }
+
+  return submission.answers;
+}
+
+function ensureCatalogHabit(entryId: string, habits: Habit[]) {
+  const entry = getCatalogEntry(entryId);
+
+  if (!entry) {
+    return habits;
+  }
+
+  if (habits.some((habit) => habit.id === entry.id)) {
+    return habits;
+  }
+
+  return [
+    ...habits,
+    {
+      id: entry.id,
+      label: entry.label,
+      streak: 0,
+      lastCompletedDate: null,
+      isCustom: false,
+    },
+  ];
+}
+
+function getCatalogTaskReason(
+  entry: NonNullable<ReturnType<typeof getCatalogEntry>>,
+  preferences: ProfilePreferences,
+  quizAnswers: DailyQuizAnswers | null,
+): DailyTaskReason | null {
+  const fromQuiz = quizAnswers ? matchesQuizAnswers(entry, quizAnswers) : false;
+  const fromFocus = matchesFocusTopics(entry, preferences);
+
+  if (fromQuiz) {
+    return "quiz";
+  }
+
+  if (fromFocus) {
+    return "focus";
+  }
+
+  return null;
+}
+
+export function getDailyTasks(): DailyTask[] {
+  let habits = getHabits();
+  const preferences = getProfilePreferences();
+  const quizAnswers = getQuizAnswersForToday();
+  const initialHabitCount = habits.length;
+
+  const selectedCatalogIds = habitCatalog
+    .map((entry) => {
+      const reason = getCatalogTaskReason(entry, preferences, quizAnswers);
+      return reason ? { id: entry.id, reason } : null;
+    })
+    .filter((item): item is { id: string; reason: DailyTaskReason } => item !== null);
+
+  for (const { id } of selectedCatalogIds) {
+    habits = ensureCatalogHabit(id, habits);
+  }
+
+  if (habits.length !== initialHabitCount) {
+    saveHabits(habits, { notify: false });
+  }
+
+  const customTasks: DailyTask[] = habits
+    .filter((habit) => habit.isCustom)
+    .map((habit) => ({ ...habit, reason: "custom" as const }));
+
+  const catalogTasks: DailyTask[] = selectedCatalogIds
+    .map(({ id, reason }) => {
+      const habit = habits.find((item) => item.id === id);
+      return habit ? { ...habit, reason } : null;
+    })
+    .filter((task): task is DailyTask => task !== null);
+
+  return [...customTasks, ...catalogTasks];
+}
+
+export function isCatalogHabitId(habitId: string) {
+  return catalogHabitIds.has(habitId);
+}
--- a/lib/habit-catalog.ts
+++ b/lib/habit-catalog.ts
@@ -0,0 +1,77 @@
+import type { DailyQuizAnswers } from "@/lib/avatar-state";
+import type { ProfilePreferences } from "@/lib/profile-preferences-storage";
+
+export type HabitCatalogEntry = {
+  id: string;
+  label: string;
+  focusTopics: string[];
+  suggestedByQuiz: (answers: DailyQuizAnswers) => boolean;
+};
+
+export const habitCatalog: HabitCatalogEntry[] = [
+  {
+    id: "walk",
+    label: "Went for a walk",
+    focusTopics: ["Movement"],
+    suggestedByQuiz: (answers) => answers.energy <= 2 || answers.feeling <= 2,
+  },
+  {
+    id: "water",
+    label: "Drank enough water",
+    focusTopics: ["Hydration"],
+    suggestedByQuiz: (answers) => answers.energy <= 3,
+  },
+  {
+    id: "meal",
+    label: "Ate a proper meal",
+    focusTopics: ["Hydration"],
+    suggestedByQuiz: (answers) => answers.feeling <= 2,
+  },
+  {
+    id: "study",
+    label: "Studied",
+    focusTopics: ["Mindfulness"],
+    suggestedByQuiz: () => false,
+  },
+  {
+    id: "clean",
+    label: "Cleaned room",
+    focusTopics: ["Mindfulness"],
+    suggestedByQuiz: (answers) => answers.stress >= 4,
+  },
+  {
+    id: "screen-break",
+    label: "Took a screen break",
+    focusTopics: ["Mindfulness", "Movement"],
+    suggestedByQuiz: (answers) => answers.stress >= 4 || answers.energy <= 2,
+  },
+  {
+    id: "wind-down",
+    label: "Wind down before bed",
+    focusTopics: ["Sleep"],
+    suggestedByQuiz: (answers) =>
+      answers.sleepLength <= 2 || answers.sleepQuality <= 2,
+  },
+];
+
+export const catalogHabitIds = new Set(habitCatalog.map((habit) => habit.id));
+
+export function getCatalogEntry(habitId: string) {
+  return habitCatalog.find((habit) => habit.id === habitId);
+}
+
+export function matchesFocusTopics(
+  entry: HabitCatalogEntry,
+  preferences: ProfilePreferences,
+) {
+  return entry.focusTopics.some((topic) =>
+    preferences.focusTopics.includes(topic),
+  );
+}
+
+export function matchesQuizAnswers(
+  entry: HabitCatalogEntry,
+  answers: DailyQuizAnswers,
+) {
+  return entry.suggestedByQuiz(answers);
+}
--- a/lib/habits-storage.ts
+++ b/lib/habits-storage.ts
@@ -0,0 +1,135 @@
+import { catalogHabitIds, habitCatalog } from "@/lib/habit-catalog";
+import { notifyHabitPetDataUpdated } from "@/lib/app-events";
+
+export type Habit = {
+  id: string;
+  label: string;
+  streak: number;
+  lastCompletedDate: string | null;
+  isCustom: boolean;
+};
+
+const STORAGE_KEY = "habit-pet-habits";
+
+export const defaultHabits: Habit[] = habitCatalog.map((entry) => ({
+  id: entry.id,
+  label: entry.label,
+  streak: 0,
+  lastCompletedDate: null,
+  isCustom: false,
+}));
+
+export function getTodayDateKey(date = new Date()) {
+  return date.toISOString().slice(0, 10);
+}
+
+function getYesterdayDateKey(date = new Date()) {
+  const yesterday = new Date(date);
+  yesterday.setDate(yesterday.getDate() - 1);
+  return getTodayDateKey(yesterday);
+}
+
+function normalizeHabit(habit: Partial<Habit> & { id: string; label: string }): Habit {
+  return {
+    id: habit.id,
+    label: habit.label,
+    streak: habit.streak ?? 0,
+    lastCompletedDate: habit.lastCompletedDate ?? null,
+    isCustom: habit.isCustom ?? !catalogHabitIds.has(habit.id),
+  };
+}
+
+export function isHabitCompletedToday(habit: Habit, today = getTodayDateKey()) {
+  return habit.lastCompletedDate === today;
+}
+
+export function getHabits(): Habit[] {
+  if (typeof window === "undefined") {
+    return defaultHabits;
+  }
+
+  const raw = window.localStorage.getItem(STORAGE_KEY);
+
+  if (!raw) {
+    return defaultHabits;
+  }
+
+  try {
+    const habits = (JSON.parse(raw) as Habit[]).map(normalizeHabit);
+    return habits.length > 0 ? habits : defaultHabits;
+  } catch {
+    return defaultHabits;
+  }
+}
+
+export function saveHabits(habits: Habit[], options?: { notify?: boolean }) {
+  window.localStorage.setItem(STORAGE_KEY, JSON.stringify(habits));
+
+  if (options?.notify !== false) {
+    notifyHabitPetDataUpdated();
+  }
+}
+
+export function toggleHabitCompletion(habitId: string): Habit[] {
+  const today = getTodayDateKey();
+  const yesterday = getYesterdayDateKey();
+  const habits = getHabits().map((habit) => {
+    if (habit.id !== habitId) {
+      return habit;
+    }
+
+    if (isHabitCompletedToday(habit, today)) {
+      return {
+        ...habit,
+        lastCompletedDate: null,
+        streak: Math.max(0, habit.streak - 1),
+      };
+    }
+
+    const nextStreak =
+      habit.lastCompletedDate === yesterday ? habit.streak + 1 : 1;
+
+    return {
+      ...habit,
+      lastCompletedDate: today,
+      streak: nextStreak,
+    };
+  });
+
+  saveHabits(habits);
+  return habits;
+}
+
+export function addHabit(label: string): Habit[] {
+  const trimmedLabel = label.trim();
+
+  if (!trimmedLabel) {
+    return getHabits();
+  }
+
+  const habits = [
+    ...getHabits(),
+    normalizeHabit({
+      id: crypto.randomUUID(),
+      label: trimmedLabel,
+      streak: 0,
+      lastCompletedDate: null,
+      isCustom: true,
+    }),
+  ];
+
+  saveHabits(habits);
+  return habits;
+}
+
+export function removeHabit(habitId: string): Habit[] {
+  const habits = getHabits().filter(
+    (habit) => habit.id !== habitId || !habit.isCustom,
+  );
+  saveHabits(habits);
+  return habits;
+}
+
+export function getCustomHabits() {
+  return getHabits().filter((habit) => habit.isCustom);
+}
--- a/lib/profile-preferences-storage.ts
+++ b/lib/profile-preferences-storage.ts
@@ -0,0 +1,52 @@
+import { notifyHabitPetDataUpdated } from "@/lib/app-events";
+
+export type ProfilePreferences = {
+  focusTopics: string[];
+  avatarVibe: string;
+  dailyReminderEnabled: boolean;
+  dailyReminderTime: string;
+};
+
+const STORAGE_KEY = "habit-pet-profile-preferences";
+
+export const focusTopicOptions = [
+  "Sleep",
+  "Movement",
+  "Hydration",
+  "Mindfulness",
+] as const;
+
+export const avatarVibeOptions = ["Calm", "Energetic", "Curious", "Cozy"] as const;
+
+export const defaultProfilePreferences: ProfilePreferences = {
+  focusTopics: ["Movement"],
+  avatarVibe: "Calm",
+  dailyReminderEnabled: false,
+  dailyReminderTime: "20:00",
+};
+
+export function getProfilePreferences(): ProfilePreferences {
+  if (typeof window === "undefined") {
+    return defaultProfilePreferences;
+  }
+
+  const raw = window.localStorage.getItem(STORAGE_KEY);
+
+  if (!raw) {
+    return defaultProfilePreferences;
+  }
+
+  try {
+    return {
+      ...defaultProfilePreferences,
+      ...(JSON.parse(raw) as Partial<ProfilePreferences>),
+    };
+  } catch {
+    return defaultProfilePreferences;
+  }
+}
+
+export function saveProfilePreferences(preferences: ProfilePreferences) {
+  window.localStorage.setItem(STORAGE_KEY, JSON.stringify(preferences));
+  notifyHabitPetDataUpdated();
+}
--- a/lib/routes.ts
+++ b/lib/routes.ts
@@ -5,6 +5,7 @@ export const routes = {
  signUpSuccess: "/auth/sign-up-success",
  onboardingQuiz: "/onboarding/quiz",
  avatar: "/avatar",
+  habits: "/habits",
  dailyQuiz: "/daily/quiz",
  shop: "/shop",
  profile: "/profile",
@@ -14,15 +15,33 @@ export type AppRoute = (typeof routes)[keyof typeof routes];

 export const appNavItems = [
  { href: routes.avatar, label: "Pet", shortLabel: "Pet" },
+  { href: routes.habits, label: "Habits", shortLabel: "Habits" },
  { href: routes.dailyQuiz, label: "Daily Quiz", shortLabel: "Quiz" },
  { href: routes.shop, label: "Shop", shortLabel: "Shop" },
  { href: routes.profile, label: "Profile", shortLabel: "Profile" },
 ] as const;

+export type NavItem = (typeof appNavItems)[number];
+
+const appPaths = [
+  routes.avatar,
+  routes.habits,
+  routes.dailyQuiz,
+  routes.shop,
+  routes.profile,
+  routes.onboardingQuiz,
+] as const;
+
 export function isAuthPath(pathname: string) {
  return pathname.startsWith("/auth");
 }

 export function isPublicPath(pathname: string) {
-  return pathname === routes.home || isAuthPath(pathname);
+  return (
+    pathname === routes.home ||
+    isAuthPath(pathname) ||
+    appPaths.some(
+      (path) => pathname === path || pathname.startsWith(`${path}/`),
+    )
+  );
 }