setting up test functionality

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;
 }

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",

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>
   );
 }

components/layout/global-bottom-nav.tsx

@@ -0,0 +1,7 @@
+"use client";
+
+import { AppNav } from "@/components/layout/app-nav";
+
+export function GlobalBottomNav() {
+  return <AppNav />;
+}