Finish interrupted features: tab prefetch, pet viewport, and home logo.

Add shared quiz/habits tab cache with nav hover prefetch and AppDataPrefetcher,
make the pet screen fill and center the viewport, and point the HaBit logo to /.

Author: RecentRunner

app/(app)/avatar/page.tsx

@@ -8,6 +8,8 @@ export default function AvatarPage() {
     <AppShell
       title="Your Habit Pet"
       description="Watch your pet roam, breathe, and react to how you care for them."
+      fillViewport
+      centered
     >
       <Suspense fallback={<p className="text-sm text-muted-foreground">Loading...</p>}>
         <AvatarPageContent />

app/globals.css

@@ -116,6 +116,21 @@
     max-width: calc(32rem - 2.5rem - 2rem);
   }
 
+  .pet-viewport-stage {
+    @apply flex min-h-0 w-full flex-1 flex-col items-center justify-center;
+  }
+
+  .tamagotchi-shell-fill {
+    @apply flex min-h-0 w-full max-w-4xl flex-1 flex-col;
+  }
+
+  .tamagotchi-lcd-pet-fill {
+    @apply relative min-h-0 w-full flex-1;
+    min-height: 16rem;
+    max-width: none;
+    aspect-ratio: auto;
+  }
+
   .customize-body {
     min-height: 26rem;
   }

components/avatar/avatar-page-content.tsx

@@ -45,5 +45,5 @@ export function AvatarPageContent() {
     );
   }
 
-  return <PetHabitat customization={customization} />;
+  return <PetHabitat customization={customization} fillViewport />;
 }

components/daily-quiz/daily-quiz-form.tsx

@@ -26,58 +26,86 @@ import {
   type DailyQuizSubmission,
 } from "@/lib/avatar-state";
 import { HABIT_PET_DATA_UPDATED_EVENT } from "@/lib/app-events";
+import {
+  getCachedQuizTabData,
+  prefetchQuizTabData,
+} from "@/lib/app-tab-data-cache";
 import {
   getAvatarConditionForToday,
-  getDailyEntryForToday,
   saveDailyEntry,
 } from "@/lib/daily-quiz-storage";
 import { JOURNAL_MAX_LENGTH } from "@/lib/journal-safety";
 
 export function DailyQuizForm() {
+  const cachedQuiz = getCachedQuizTabData();
   const [answers, setAnswers] = useState<DailyQuizAnswers>(
-    defaultDailyQuizAnswers,
+    cachedQuiz?.submission?.answers ?? defaultDailyQuizAnswers,
   );
-  const [journal, setJournal] = useState("");
+  const [journal, setJournal] = useState(cachedQuiz?.submission?.journal ?? "");
   const [submission, setSubmission] = useState<DailyQuizSubmission | null>(
-    null,
+    cachedQuiz?.submission ?? null,
   );
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [error, setError] = useState<string | null>(null);
-  const [isReady, setIsReady] = useState(false);
+  const [isReady, setIsReady] = useState(cachedQuiz !== null);
   const [liveCondition, setLiveCondition] = useState(
-    submission?.condition ?? null,
+    cachedQuiz?.liveCondition ?? cachedQuiz?.submission?.condition ?? null,
+  );
+
+  const applyQuizData = useCallback(
+    (data: NonNullable<ReturnType<typeof getCachedQuizTabData>>) => {
+      if (data.submission) {
+        setSubmission(data.submission);
+        setAnswers(data.submission.answers);
+        setJournal(data.submission.journal);
+        setLiveCondition(data.submission.condition);
+      } else {
+        setSubmission(null);
+        setLiveCondition(data.liveCondition);
+      }
+    },
+    [],
   );
 
   const refreshLiveCondition = useCallback(async () => {
     setLiveCondition(await getAvatarConditionForToday());
   }, []);
 
   useEffect(() => {
+    let cancelled = false;
+
     async function loadDailyCheckIn() {
       try {
-        const existingEntry = await getDailyEntryForToday();
+        const data = await prefetchQuizTabData();
 
-        if (existingEntry) {
-          setSubmission(existingEntry);
-          setAnswers(existingEntry.answers);
-          setJournal(existingEntry.journal);
-          setLiveCondition(existingEntry.condition);
-        } else {
-          await refreshLiveCondition();
+        if (cancelled) {
+          return;
         }
+
+        applyQuizData(data);
       } catch (loadError) {
+        if (cancelled) {
+          return;
+        }
+
         setError(
           loadError instanceof Error
             ? loadError.message
             : "Could not load today's check-in.",
         );
       } finally {
-        setIsReady(true);
+        if (!cancelled) {
+          setIsReady(true);
+        }
       }
     }
 
     void loadDailyCheckIn();
-  }, [refreshLiveCondition]);
+
+    return () => {
+      cancelled = true;
+    };
+  }, [applyQuizData]);
 
   useEffect(() => {
     const handleDataUpdated = () => {

components/habits/habit-tracker.tsx

@@ -17,12 +17,12 @@ 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";
+  getCachedHabitsTabData,
+  prefetchHabitsTabData,
+} from "@/lib/app-tab-data-cache";
+import type { DailyTask } from "@/lib/daily-tasks";
 import {
   addHabit,
-  getCustomHabits,
   getTodayDateKey,
   isHabitCompletedToday,
   removeHabit,
@@ -31,8 +31,6 @@ import {
 } from "@/lib/habits-storage";
 import { formatCoinsDelta } from "@/lib/coins";
 import { describeHabitWellnessBoost } from "@/lib/habit-wellness-effects";
-import { getProfilePreferences } from "@/lib/profile-preferences-storage";
-import { hasCompletedDailyQuizToday } from "@/lib/daily-quiz-storage";
 
 type HabitTrackerProps = {
   mode?: "daily" | "manage" | "all";
@@ -184,13 +182,22 @@ function CustomHabitList({
 }
 
 export function HabitTracker({ mode = "daily" }: HabitTrackerProps) {
-  const [dailyTasks, setDailyTasks] = useState<DailyTask[]>([]);
-  const [customHabits, setCustomHabits] = useState<Habit[]>([]);
+  const cachedHabits = getCachedHabitsTabData();
+  const [dailyTasks, setDailyTasks] = useState<DailyTask[]>(
+    cachedHabits?.dailyTasks ?? [],
+  );
+  const [customHabits, setCustomHabits] = useState<Habit[]>(
+    cachedHabits?.customHabits ?? [],
+  );
   const [newHabitLabel, setNewHabitLabel] = useState("");
-  const [focusTopic, setFocusTopic] = useState<string | null>(null);
-  const [quizCompletedToday, setQuizCompletedToday] = useState(false);
+  const [focusTopic, setFocusTopic] = useState<string | null>(
+    cachedHabits?.focusTopic ?? null,
+  );
+  const [quizCompletedToday, setQuizCompletedToday] = useState(
+    cachedHabits?.quizCompletedToday ?? false,
+  );
   const [error, setError] = useState<string | null>(null);
-  const [isReady, setIsReady] = useState(false);
+  const [isReady, setIsReady] = useState(cachedHabits !== null);
   const [isSaving, setIsSaving] = useState(false);
   const [optimisticCompletion, setOptimisticCompletion] = useState<
     Record<string, boolean>
@@ -223,17 +230,21 @@ export function HabitTracker({ mode = "daily" }: HabitTrackerProps) {
     [toggleErrors],
   );
 
+  const applyHabitsData = useCallback(
+    (data: NonNullable<ReturnType<typeof getCachedHabitsTabData>>) => {
+      setDailyTasks(data.dailyTasks);
+      setCustomHabits(data.customHabits);
+      setFocusTopic(data.focusTopic);
+      setQuizCompletedToday(data.quizCompletedToday);
+    },
+    [],
+  );
+
   const refresh = useCallback(async () => {
     try {
       setError(null);
-      const [tasks, customs] = await Promise.all([
-        getDailyTasks(),
-        getCustomHabits(),
-      ]);
-      setDailyTasks(tasks);
-      setCustomHabits(customs);
-      setFocusTopic((await getProfilePreferences()).focusTopic);
-      setQuizCompletedToday(await hasCompletedDailyQuizToday());
+      const data = await prefetchHabitsTabData({ force: true });
+      applyHabitsData(data);
       setIsReady(true);
     } catch (refreshError) {
       setError(
@@ -243,7 +254,27 @@ export function HabitTracker({ mode = "daily" }: HabitTrackerProps) {
       );
       setIsReady(true);
     }
-  }, []);
+  }, [applyHabitsData]);
+
+  useEffect(() => {
+    void prefetchHabitsTabData()
+      .then(applyHabitsData)
+      .catch((refreshError) => {
+        setError(
+          refreshError instanceof Error
+            ? refreshError.message
+            : "Could not load habits.",
+        );
+      })
+      .finally(() => {
+        setIsReady(true);
+      });
+
+    window.addEventListener(HABIT_PET_DATA_UPDATED_EVENT, refresh);
+    return () => {
+      window.removeEventListener(HABIT_PET_DATA_UPDATED_EVENT, refresh);
+    };
+  }, [applyHabitsData, refresh]);
 
   useEffect(() => {
     if (!coinMessage) {
@@ -290,15 +321,6 @@ export function HabitTracker({ mode = "daily" }: HabitTrackerProps) {
     };
   }, [refresh, todayKey]);
 
-  useEffect(() => {
-    void refresh();
-
-    window.addEventListener(HABIT_PET_DATA_UPDATED_EVENT, refresh);
-    return () => {
-      window.removeEventListener(HABIT_PET_DATA_UPDATED_EVENT, refresh);
-    };
-  }, [refresh]);
-
   const handleToggle = (habitId: string) => {
     const habit = dailyTasks.find((task) => task.id === habitId);
 

components/layout/app-data-prefetcher.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { useEffect } from "react";
+
+import { HABIT_PET_DATA_UPDATED_EVENT } from "@/lib/app-events";
+import {
+  invalidateAppTabDataCache,
+  prefetchAppTabData,
+} from "@/lib/app-tab-data-cache";
+
+type AppDataPrefetcherProps = {
+  enabled: boolean;
+};
+
+export function AppDataPrefetcher({ enabled }: AppDataPrefetcherProps) {
+  useEffect(() => {
+    if (!enabled) {
+      return;
+    }
+
+    void prefetchAppTabData();
+
+    const handleDataUpdated = () => {
+      invalidateAppTabDataCache();
+      void prefetchAppTabData({ force: true });
+    };
+
+    window.addEventListener(HABIT_PET_DATA_UPDATED_EVENT, handleDataUpdated);
+
+    return () => {
+      window.removeEventListener(HABIT_PET_DATA_UPDATED_EVENT, handleDataUpdated);
+    };
+  }, [enabled]);
+
+  return null;
+}

components/layout/app-nav.tsx

@@ -13,6 +13,10 @@ import {
 
 import { cn } from "@/lib/utils";
 import { appNavItems, routes, type NavItem } from "@/lib/routes";
+import {
+  prefetchHabitsTabData,
+  prefetchQuizTabData,
+} from "@/lib/app-tab-data-cache";
 
 const gridColsClass = {
   1: "grid-cols-1",
@@ -31,6 +35,15 @@ const navIcons = {
   [routes.profile]: UserRound,
 } as const;
 
+const prefetchByRoute: Partial<Record<string, () => void>> = {
+  [routes.habits]: () => {
+    void prefetchHabitsTabData();
+  },
+  [routes.dailyQuiz]: () => {
+    void prefetchQuizTabData();
+  },
+};
+
 type AppNavProps = {
   items?: readonly NavItem[];
 };
@@ -76,6 +89,9 @@ export const AppNav = forwardRef<HTMLElement, AppNavProps>(function AppNav(
               href={item.href}
               aria-label={item.label}
               title={item.label}
+              prefetch
+              onPointerEnter={() => prefetchByRoute[item.href]?.()}
+              onFocus={() => prefetchByRoute[item.href]?.()}
               className={cn(
                 "bottom-nav-item flex flex-col items-center justify-center gap-1.5 overflow-hidden border-2 px-1 py-2 text-[9px] leading-none transition-colors duration-75",
                 isActive

components/layout/app-shell.tsx

@@ -7,6 +7,10 @@ type AppShellProps = {
   title?: string;
   description?: string;
   wide?: boolean;
+  /** Use remaining viewport height between top bar and bottom nav. */
+  fillViewport?: boolean;
+  /** Center page content horizontally (pairs well with fillViewport). */
+  centered?: boolean;
 };
 
 const contentWidthClass = {
@@ -19,20 +23,33 @@ export function AppShell({
   title,
   description,
   wide = false,
+  fillViewport = false,
+  centered = false,
 }: AppShellProps) {
   return (
-    <div className="relative min-h-dvh bg-background bg-[radial-gradient(circle_at_20%_0%,hsl(var(--primary)/0.12)_0%,transparent_45%),radial-gradient(circle_at_80%_100%,hsl(var(--secondary)/0.1)_0%,transparent_40%)] pt-topbar">
+    <div className="relative flex min-h-dvh flex-col bg-background bg-[radial-gradient(circle_at_20%_0%,hsl(var(--primary)/0.12)_0%,transparent_45%),radial-gradient(circle_at_80%_100%,hsl(var(--secondary)/0.1)_0%,transparent_40%)] pt-topbar">
       <AppTopBar />
       <main
         className={cn(
-          "mx-auto px-4 py-6 lg:px-5",
+          "mx-auto flex w-full flex-1 flex-col px-4 py-6 lg:px-5",
+          fillViewport
+            ? "min-h-[calc(100dvh-var(--app-topbar-height)-var(--app-nav-offset)-env(safe-area-inset-top,0px))]"
+            : null,
+          centered ? "items-center" : null,
           wide ? contentWidthClass.wide : contentWidthClass.default,
+          fillViewport && "max-w-none lg:max-w-none",
         )}
       >
         {title ? (
           <AppPageHeader title={title} description={description} />
         ) : null}
-        {children}
+        <div
+          className={cn(
+            fillViewport ? "pet-viewport-stage flex w-full flex-1 flex-col" : "contents",
+          )}
+        >
+          {children}
+        </div>
       </main>
     </div>
   );