setting up files

components/layout/app-auth-gate.tsx

@@ -0,0 +1,10 @@
+import { requireOnboardingComplete } from "@/lib/auth-helpers";
+
+type AppAuthGateProps = {
+  children: React.ReactNode;
+};
+
+export async function AppAuthGate({ children }: AppAuthGateProps) {
+  await requireOnboardingComplete();
+  return children;
+}

components/layout/app-nav.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { Home, ShoppingBag, Sparkles, UserRound } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+import { appNavItems, routes } from "@/lib/routes";
+
+const navIcons = {
+  [routes.avatar]: Home,
+  [routes.dailyQuiz]: Sparkles,
+  [routes.shop]: ShoppingBag,
+  [routes.profile]: UserRound,
+} as const;
+
+export function AppNav() {
+  const pathname = usePathname();
+
+  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) => {
+          const Icon = navIcons[item.href];
+          const isActive =
+            pathname === item.href ||
+            (item.href !== routes.avatar && pathname.startsWith(item.href));
+
+          return (
+            <Link
+              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",
+                isActive
+                  ? "bg-primary text-primary-foreground"
+                  : "text-muted-foreground hover:bg-muted hover:text-foreground",
+              )}
+            >
+              <Icon className="h-4 w-4" />
+              <span>{item.shortLabel}</span>
+            </Link>
+          );
+        })}
+      </div>
+    </nav>
+  );
+}

components/layout/app-shell.tsx

@@ -0,0 +1,28 @@
+import { AppNav } from "@/components/layout/app-nav";
+
+type AppShellProps = {
+  children: React.ReactNode;
+  title?: string;
+  description?: string;
+};
+
+export function AppShell({ children, title, description }: AppShellProps) {
+  return (
+    <div className="min-h-svh bg-background pb-24">
+      {(title || description) && (
+        <header className="border-b border-border/60 bg-card/40">
+          <div className="mx-auto max-w-lg px-5 py-5">
+            {title ? (
+              <h1 className="text-xl font-semibold tracking-tight">{title}</h1>
+            ) : null}
+            {description ? (
+              <p className="mt-1 text-sm text-muted-foreground">{description}</p>
+            ) : null}
+          </div>
+        </header>
+      )}
+      <main className="mx-auto max-w-lg px-5 py-6">{children}</main>
+      <AppNav />
+    </div>
+  );
+}

components/layout/logged-in-redirect.tsx

@@ -0,0 +1,19 @@
+import { redirect } from "next/navigation";
+
+import {
+  getSessionUser,
+  hasCompletedOnboarding,
+} from "@/lib/auth-helpers";
+import { routes } from "@/lib/routes";
+
+export async function LoggedInRedirect() {
+  const user = await getSessionUser();
+
+  if (user) {
+    redirect(
+      hasCompletedOnboarding(user) ? routes.avatar : routes.onboardingQuiz,
+    );
+  }
+
+  return null;
+}

components/layout/onboarding-auth-gate.tsx

@@ -0,0 +1,21 @@
+import { redirect } from "next/navigation";
+
+import {
+  hasCompletedOnboarding,
+  requireSessionUser,
+} from "@/lib/auth-helpers";
+import { routes } from "@/lib/routes";
+
+type OnboardingAuthGateProps = {
+  children: React.ReactNode;
+};
+
+export async function OnboardingAuthGate({ children }: OnboardingAuthGateProps) {
+  const user = await requireSessionUser();
+
+  if (hasCompletedOnboarding(user)) {
+    redirect(routes.avatar);
+  }
+
+  return children;
+}

components/layout/site-header.tsx

@@ -0,0 +1,38 @@
+import Link from "next/link";
+import { Suspense } from "react";
+
+import { AuthButton } from "@/components/auth-button";
+import { EnvVarWarning } from "@/components/env-var-warning";
+import { ThemeSwitcher } from "@/components/theme-switcher";
+import { routes } from "@/lib/routes";
+import { hasEnvVars } from "@/lib/utils";
+
+export function SiteHeader() {
+  return (
+    <header className="w-full border-b border-b-foreground/10">
+      <div className="mx-auto flex h-16 w-full max-w-5xl items-center justify-between px-5 text-sm">
+        <Link href={routes.home} className="font-semibold tracking-tight">
+          Habit Pet
+        </Link>
+        {!hasEnvVars ? (
+          <EnvVarWarning />
+        ) : (
+          <Suspense>
+            <AuthButton />
+          </Suspense>
+        )}
+      </div>
+    </header>
+  );
+}
+
+export function SiteFooter() {
+  return (
+    <footer className="w-full border-t py-8 text-center text-xs text-muted-foreground">
+      <div className="mx-auto flex max-w-5xl flex-col items-center gap-4 px-5">
+        <p>Build habits. Care for your pet. Feel better every day.</p>
+        <ThemeSwitcher />
+      </div>
+    </footer>
+  );
+}