Implement full Couch Potato movie & TV tracking app

Add all 10 milestones: Drizzle ORM + SQLite database with WAL mode, Better Auth email/password authentication, TMDB API integration for search and metadata import, TV season/episode caching, user tracking (watchlist/status/watches/ratings with auto-transitions), discovery feeds (continue watching, library, recommendations), US streaming availability via TMDB providers, background job scheduler with instrumentation hook, and dark cinema-themed frontend with DM Serif Display + DM Sans typography and amber accent design system. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-08-29 01:35:39 -04:00 · 2026-02-27 14:42:13 -05:00
parent 1b0ca5431a
commit b02ff1cdc1
65 changed files with 4994 additions and 382 deletions
@@ -0,0 +1,91 @@
+"use client";
+
+import { IconLogout, IconSearch } from "@tabler/icons-react";
+import Link from "next/link";
+import { usePathname, useRouter } from "next/navigation";
+import { signOut, useSession } from "@/lib/auth/client";
+
+export function NavBar() {
+  const { data: session } = useSession();
+  const router = useRouter();
+  const pathname = usePathname();
+
+  return (
+    <header className="sticky top-0 z-50 border-b border-border/50 bg-background/80 backdrop-blur-xl">
+      <nav className="mx-auto flex h-14 max-w-6xl items-center justify-between px-4">
+        <div className="flex items-center gap-8">
+          <Link href="/" className="font-display text-xl tracking-tight">
+            Couch Potato
+          </Link>
+          {session?.user && (
+            <div className="hidden items-center gap-1 sm:flex">
+              <NavLink href="/search" active={pathname === "/search"}>
+                <IconSearch size={16} />
+                <span>Search</span>
+              </NavLink>
+            </div>
+          )}
+        </div>
+
+        <div className="flex items-center gap-3">
+          {session?.user ? (
+            <>
+              <span className="text-sm text-muted-foreground">
+                {session.user.name}
+              </span>
+              <button
+                type="button"
+                onClick={async () => {
+                  await signOut();
+                  router.push("/");
+                  router.refresh();
+                }}
+                className="inline-flex h-8 items-center gap-1.5 rounded-md px-2 text-sm text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
+              >
+                <IconLogout size={15} />
+              </button>
+            </>
+          ) : (
+            <>
+              <Link
+                href="/login"
+                className="text-sm text-muted-foreground transition-colors hover:text-foreground"
+              >
+                Sign in
+              </Link>
+              <Link
+                href="/register"
+                className="inline-flex h-8 items-center rounded-md bg-amber px-4 text-sm font-medium text-background transition-all hover:shadow-md hover:shadow-amber/20"
+              >
+                Register
+              </Link>
+            </>
+          )}
+        </div>
+      </nav>
+    </header>
+  );
+}
+
+function NavLink({
+  href,
+  active,
+  children,
+}: {
+  href: string;
+  active: boolean;
+  children: React.ReactNode;
+}) {
+  return (
+    <Link
+      href={href}
+      className={`inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm transition-colors ${
+        active
+          ? "bg-amber/10 text-amber"
+          : "text-muted-foreground hover:bg-accent hover:text-foreground"
+      }`}
+    >
+      {children}
+    </Link>
+  );
+}