setting up files

app/(app)/avatar/page.tsx

@@ -0,0 +1,113 @@
+import Link from "next/link";
+
+import { PixelAvatar } from "@/components/avatar/pixel-avatar";
+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."
+    >
+      <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>
+      </div>
+    </AppShell>
+  );
+}

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

@@ -0,0 +1,56 @@
+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

@@ -0,0 +1,15 @@
+import { Suspense } from "react";
+
+import { AppAuthGate } from "@/components/layout/app-auth-gate";
+
+export default function AppLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <Suspense fallback={<div className="min-h-svh bg-background pb-24" />}>
+      <AppAuthGate>{children}</AppAuthGate>
+    </Suspense>
+  );
+}

app/(app)/profile/page.tsx

@@ -0,0 +1,72 @@
+import { Suspense } from "react";
+
+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>
+  );
+}
+
+export default function ProfilePage() {
+  return (
+    <AppShell
+      title="Profile"
+      description="Manage your account and habit pet preferences."
+    >
+      <Suspense fallback={<p className="text-sm text-muted-foreground">Loading profile...</p>}>
+        <ProfileContent />
+      </Suspense>
+    </AppShell>
+  );
+}

app/(app)/shop/page.tsx

@@ -0,0 +1,66 @@
+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 shopItems = [
+  {
+    id: "hat",
+    name: "Pixel cap",
+    price: 50,
+    description: "A cozy cap for your habit pet.",
+  },
+  {
+    id: "bed",
+    name: "Cloud bed",
+    price: 120,
+    description: "Boost recovery after tough days.",
+  },
+  {
+    id: "snack",
+    name: "Berry snack",
+    price: 25,
+    description: "A small treat for good streaks.",
+  },
+];
+
+export default function ShopPage() {
+  return (
+    <AppShell
+      title="Shop"
+      description="Spend points earned from habits and daily check-ins."
+    >
+      <div className="mb-4 flex items-center justify-between rounded-lg border bg-muted/40 px-4 py-3">
+        <span className="text-sm text-muted-foreground">Your balance</span>
+        <Badge variant="secondary">120 points</Badge>
+      </div>
+
+      <div className="grid gap-4">
+        {shopItems.map((item) => (
+          <Card key={item.id}>
+            <CardHeader>
+              <div className="flex items-start justify-between gap-3">
+                <div>
+                  <CardTitle className="text-base">{item.name}</CardTitle>
+                  <CardDescription>{item.description}</CardDescription>
+                </div>
+                <Badge>{item.price} pts</Badge>
+              </div>
+            </CardHeader>
+            <CardContent>
+              <Button className="w-full" variant="outline">
+                Buy
+              </Button>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+    </AppShell>
+  );
+}