From c1b48c5e8da59a849d0f6ae5459f7cf7ffcf228d Mon Sep 17 00:00:00 2001
From: masongga <auckmason@gmail.com>
Date: Sun, 24 May 2026 09:13:36 -0600
Subject: [PATCH] moved habits and quizzes to pet page

---
 app/(app)/avatar/page.tsx                     |  3 +--
 app/(app)/daily/quiz/page.tsx                 | 14 ++++----------
 app/(app)/habits/page.tsx                     | 14 ++++----------
 app/globals.css                               |  9 +++++++++
 components/avatar/avatar-page-content.tsx     | 19 ++++++++++++++++++-
 components/avatar/avatar-status-card.tsx      |  2 +-
 components/daily-quiz/daily-quiz-form.tsx     | 11 +----------
 .../daily-quiz/daily-quiz-link-button.tsx     |  2 +-
 components/layout/app-nav.tsx                 | 15 ++-------------
 lib/routes.ts                                 |  2 --
 10 files changed, 41 insertions(+), 50 deletions(-)

diff --git a/app/(app)/avatar/page.tsx b/app/(app)/avatar/page.tsx
index 247d916..9079dec 100644
--- a/app/(app)/avatar/page.tsx
+++ b/app/(app)/avatar/page.tsx
@@ -8,8 +8,7 @@ export default function AvatarPage() {
     <AppShell
       title="Your bit"
       description="Watch your digital self roam, breathe, and react to how you care for yourself."
-      fillViewport
-      centered
+      wide
     >
       <Suspense fallback={<p className="text-sm text-muted-foreground">Loading...</p>}>
         <AvatarPageContent />
diff --git a/app/(app)/daily/quiz/page.tsx b/app/(app)/daily/quiz/page.tsx
index 8b3a684..8e33fed 100644
--- a/app/(app)/daily/quiz/page.tsx
+++ b/app/(app)/daily/quiz/page.tsx
@@ -1,13 +1,7 @@
-import { DailyQuizForm } from "@/components/daily-quiz/daily-quiz-form";
-import { AppShell } from "@/components/layout/app-shell";
+import { redirect } from "next/navigation";
+
+import { routes } from "@/lib/routes";
 
 export default function DailyQuizPage() {
-  return (
-    <AppShell
-      title="Daily quiz"
-      description="Complete your once-per-day wellness sliders and journal."
-    >
-      <DailyQuizForm />
-    </AppShell>
-  );
+  redirect(`${routes.avatar}#bit-daily-quiz`);
 }
diff --git a/app/(app)/habits/page.tsx b/app/(app)/habits/page.tsx
index 33dd2ae..c1acbe6 100644
--- a/app/(app)/habits/page.tsx
+++ b/app/(app)/habits/page.tsx
@@ -1,13 +1,7 @@
-import { HabitTracker } from "@/components/habits/habit-tracker";
-import { AppShell } from "@/components/layout/app-shell";
+import { redirect } from "next/navigation";
+
+import { routes } from "@/lib/routes";
 
 export default function HabitsPage() {
-  return (
-    <AppShell
-      title="Habits"
-      description="Complete today's tasks and manage your habit list."
-    >
-      <HabitTracker mode="all" />
-    </AppShell>
-  );
+  redirect(`${routes.avatar}#bit-daily-tasks`);
 }
diff --git a/app/globals.css b/app/globals.css
index 5c15d0e..ea8a992 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -147,6 +147,15 @@
     @apply flex min-h-0 w-full flex-1 flex-col items-center justify-center;
   }
 
+  /* Bit home: same pet stage height as fillViewport layout (header + main padding accounted for). */
+  .bit-home-pet-stage {
+    @apply pet-viewport-stage flex w-full flex-col items-center justify-center;
+    min-height: calc(
+      100dvh - var(--app-topbar-height) - var(--app-nav-offset) -
+        env(safe-area-inset-top, 0px) - 11rem
+    );
+  }
+
   .tamagotchi-shell-fill {
     @apply flex min-h-0 w-full max-w-4xl flex-1 flex-col;
   }
diff --git a/components/avatar/avatar-page-content.tsx b/components/avatar/avatar-page-content.tsx
index 8b60ce8..a61afa8 100644
--- a/components/avatar/avatar-page-content.tsx
+++ b/components/avatar/avatar-page-content.tsx
@@ -2,6 +2,8 @@
 
 import { useCallback, useEffect, useState } from "react";
 
+import { DailyQuizForm } from "@/components/daily-quiz/daily-quiz-form";
+import { HabitTracker } from "@/components/habits/habit-tracker";
 import { PetHabitat } from "@/components/pet/pet-habitat";
 import { HABIT_PET_DATA_UPDATED_EVENT } from "@/lib/app-events";
 import {
@@ -45,5 +47,20 @@ export function AvatarPageContent() {
     );
   }
 
-  return <PetHabitat customization={customization} fillViewport />;
+  return (
+    <div className="flex w-full flex-col">
+      <div className="bit-home-pet-stage">
+        <PetHabitat customization={customization} fillViewport />
+      </div>
+
+      <section className="grid w-full gap-6 pt-6 lg:grid-cols-2 lg:items-start">
+        <div id="bit-daily-tasks">
+          <HabitTracker mode="daily" />
+        </div>
+        <div id="bit-daily-quiz">
+          <DailyQuizForm />
+        </div>
+      </section>
+    </div>
+  );
 }
diff --git a/components/avatar/avatar-status-card.tsx b/components/avatar/avatar-status-card.tsx
index 1ef894e..7732704 100644
--- a/components/avatar/avatar-status-card.tsx
+++ b/components/avatar/avatar-status-card.tsx
@@ -108,7 +108,7 @@ export function AvatarStatusCard({ customization }: AvatarStatusCardProps) {
         </p>
         {!hasCheckedInToday ? (
           <Button asChild className="w-full">
-            <Link href={routes.dailyQuiz}>Take today&apos;s quiz</Link>
+            <Link href={`${routes.avatar}#bit-daily-quiz`}>Take today&apos;s quiz</Link>
           </Button>
         ) : null}
       </CardContent>
diff --git a/components/daily-quiz/daily-quiz-form.tsx b/components/daily-quiz/daily-quiz-form.tsx
index dc7360a..b09adca 100644
--- a/components/daily-quiz/daily-quiz-form.tsx
+++ b/components/daily-quiz/daily-quiz-form.tsx
@@ -1,7 +1,6 @@
 "use client";
 
 import { CheckCircle2 } from "lucide-react";
-import Link from "next/link";
 import { useCallback, useEffect, useState } from "react";
 
 import { WellnessSlider } from "@/components/daily-quiz/wellness-slider";
@@ -32,7 +31,6 @@ import {
 import { HABIT_PET_DATA_UPDATED_EVENT } from "@/lib/app-events";
 import { saveDailyEntry } from "@/lib/daily-quiz-storage";
 import { JOURNAL_MAX_LENGTH } from "@/lib/journal-safety";
-import { routes } from "@/lib/routes";
 
 export function DailyQuizForm() {
   const cachedQuiz = getCachedQuizTabData();
@@ -161,14 +159,7 @@ export function DailyQuizForm() {
               </p>
               <p className="text-sm text-muted-foreground">
                 Your answers are saved below. Come back tomorrow for your next
-                check-in. How you did today affects your bit. Spend time with{" "}
-                <Link
-                  href={routes.avatar}
-                  className="font-medium text-primary underline-offset-2 hover:underline"
-                >
-                  your bit
-                </Link>{" "}
-                whenever you want to see how they are doing.
+                check-in. How you did today affects your bit.
               </p>
               <DailyQuizCountdown
                 onAvailable={() => {
diff --git a/components/daily-quiz/daily-quiz-link-button.tsx b/components/daily-quiz/daily-quiz-link-button.tsx
index 2dd6862..ab09384 100644
--- a/components/daily-quiz/daily-quiz-link-button.tsx
+++ b/components/daily-quiz/daily-quiz-link-button.tsx
@@ -30,7 +30,7 @@ export function DailyQuizLinkButton() {
 
   return (
     <Button asChild className="w-full" variant="outline">
-      <Link href={routes.dailyQuiz}>Open daily quiz</Link>
+      <Link href={`${routes.avatar}#bit-daily-quiz`}>Open daily quiz</Link>
     </Button>
   );
 }
diff --git a/components/layout/app-nav.tsx b/components/layout/app-nav.tsx
index ad7b6e2..81cfd10 100644
--- a/components/layout/app-nav.tsx
+++ b/components/layout/app-nav.tsx
@@ -3,14 +3,7 @@
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { forwardRef } from "react";
-import {
-  Home,
-  ListPlus,
-  Palette,
-  ShoppingBag,
-  Sparkles,
-  UserRound,
-} from "lucide-react";
+import { Home, Palette, ShoppingBag, UserRound } from "lucide-react";
 
 import { cn } from "@/lib/utils";
 import { appNavItems, routes, type NavItem } from "@/lib/routes";
@@ -31,17 +24,13 @@ const gridColsClass = {
 const navIcons = {
   [routes.avatar]: Home,
   [routes.customize]: Palette,
-  [routes.habits]: ListPlus,
-  [routes.dailyQuiz]: Sparkles,
   [routes.shop]: ShoppingBag,
   [routes.profile]: UserRound,
 } as const;
 
 const prefetchByRoute: Partial<Record<string, () => void>> = {
-  [routes.habits]: () => {
+  [routes.avatar]: () => {
     void prefetchHabitsTabData();
-  },
-  [routes.dailyQuiz]: () => {
     void prefetchQuizTabData();
   },
 };
diff --git a/lib/routes.ts b/lib/routes.ts
index 01f5aa9..0de94c2 100644
--- a/lib/routes.ts
+++ b/lib/routes.ts
@@ -18,8 +18,6 @@ export type AppRoute = (typeof routes)[keyof typeof routes];
 export const appNavItems = [
   { href: routes.avatar, label: "Bit", shortLabel: "Bit" },
   { href: routes.customize, label: "Customize", shortLabel: "Style" },
-  { 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;