Files
sofa/components/mobile-tab-bar.tsx
T
jake 73b07f5ff6 Refactor auth session handling and server actions across app
- Overhaul `lib/auth/server.ts` and `lib/auth/session.ts`; update all API
  routes and server actions to use the revised session pattern
- Refactor server actions (settings, titles, watchlist, setup) for
  consistency with new auth layer
- Extract `SetupForm` into its own client component with `useActionState`,
  animated steps, and copyable env snippets
- Move landing page redirect logic into `app/page.tsx`; slim down
  `LandingPage` component
- Add `proxy.ts` for local dev proxying
- Minor cleanup to `NavBar`, `MobileTabBar`, and `TitleCard`
2026-03-06 17:05:49 -05:00

60 lines
2.0 KiB
TypeScript

"use client";
import { IconCompass, IconHome, IconSettings } from "@tabler/icons-react";
import { motion } from "motion/react";
import Link from "next/link";
import { usePathname } from "next/navigation";
const tabs = [
{ href: "/dashboard", label: "Home", icon: IconHome },
{ href: "/explore", label: "Explore", icon: IconCompass },
{ href: "/settings", label: "Settings", icon: IconSettings },
] as const;
export function MobileTabBar() {
const pathname = usePathname();
return (
<nav className="fixed bottom-0 left-0 right-0 z-50 border-t border-border/50 bg-background/90 pl-[env(safe-area-inset-left)] pr-[env(safe-area-inset-right)] backdrop-blur-xl sm:hidden">
<div className="flex h-14 items-stretch">
{tabs.map((tab) => {
const Icon = tab.icon;
const isActive =
tab.href === "/dashboard"
? pathname === "/dashboard"
: pathname.startsWith(tab.href);
return (
<Link
key={tab.href}
href={tab.href}
className="relative flex flex-1 flex-col items-center justify-center gap-0.5"
>
<Icon
className={`size-5 ${isActive ? "text-primary" : "text-muted-foreground"}`}
/>
<span
className={`text-[10px] font-medium ${isActive ? "text-primary" : "text-muted-foreground"}`}
>
{tab.label}
</span>
{isActive && (
<motion.div
layoutId="mobile-tab-indicator"
className="absolute top-0 h-0.5 w-8 rounded-full bg-primary"
transition={{
type: "spring",
stiffness: 380,
damping: 30,
}}
/>
)}
</Link>
);
})}
</div>
{/* Safe area for devices with home indicator */}
<div className="h-[env(safe-area-inset-bottom)]" />
</nav>
);
}