UI overhaul

CLAUDE.md

@@ -24,9 +24,13 @@ Read `GUIDE.md` first — it contains the full project briefing and teaching rul
 
 ## Current Milestone
 
-**M7 (Auth) is complete.** Next milestone is **M8: Chrome Extension**.
+**ui-overhaul branch is in progress** (landing page + smart `/` routing — not yet merged).
 
-After M8 comes M9 (Vercel deployment + preview URLs on PRs).
+Before M8 can start, two things must be done on this branch:
+1. Remove debug `console.log` from `client/src/app/page.tsx` line 9
+2. Fix the Supabase SSR session refresh loop — create `client/src/proxy.ts` (Next.js 16.2 uses `proxy.ts`, NOT `middleware.ts`) using the Supabase SSR proxy pattern so token refresh happens before server components run
+
+After that: **M8: Chrome Extension**, then M9 (Vercel deployment).
 
 ## Project Structure
 

client/package.json

@@ -17,6 +17,7 @@
     "@upstash/redis": "^1.37.0",
     "@vercel/analytics": "^2.0.1",
     "@vercel/speed-insights": "^2.0.0",
+    "lucide-react": "^1.7.0",
     "next": "^16.2.1",
     "open-graph-scraper": "^6.11.0",
     "pg": "^8.20.0",

client/src/app/app/loading.tsx

@@ -0,0 +1,17 @@
+import BookmarkCardSkeleton from "@/components/BookmarkCardSkeleton";
+
+export default function Loading() {
+  return (
+    <div className="min-h-screen bg-[var(--bg)]">
+      {/* Header placeholder */}
+      <div className="h-12 border-b border-[var(--border)] bg-[var(--bg)]/80" />
+      <main className="max-w-2xl mx-auto pt-6 pb-16 px-4">
+        <div className="flex flex-col gap-3">
+          <BookmarkCardSkeleton />
+          <BookmarkCardSkeleton />
+          <BookmarkCardSkeleton />
+        </div>
+      </main>
+    </div>
+  );
+}

client/src/app/app/page.tsx

@@ -0,0 +1,78 @@
+import { Suspense } from "react";
+import { prisma } from "@/lib/prisma";
+import BookmarkCard from "@/components/BookmarkCard";
+import BookmarkCardSkeleton from "@/components/BookmarkCardSkeleton";
+import SaveUrlForm from "@/components/SaveUrlForm";
+import Header from "@/components/Header";
+import SearchBar from "@/components/SearchBar";
+import { createClient } from "@/lib/supabase/server";
+import { redirect } from "next/navigation";
+import { Bookmark } from "lucide-react";
+
+export const metadata = { title: "Your Bookmarks | Recall" };
+
+async function BookmarkList({ userId }: { userId: string }) {
+  const bookmarks = await prisma.bookmark.findMany({
+    where: { userId },
+    orderBy: { createdAt: "desc" },
+    include: { tags: true },
+  });
+
+  if (bookmarks.length === 0) {
+    return (
+      <div className="flex flex-col items-center justify-center gap-4 rounded-2xl border border-[var(--border)] bg-[var(--surface)] text-center" style={{ padding: "48px 32px" }}>
+        <Bookmark size={40} className="text-[var(--accent)]" />
+        <div>
+          <h2 className="text-xl font-semibold text-[var(--text)] mb-1">Nothing saved yet</h2>
+          <p className="text-sm text-[var(--text-muted)]">Paste any URL above to save your first bookmark</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-3">
+      {bookmarks.map((bookmark, i) => (
+        <div key={bookmark.id} className="animate-fade-up" style={{ animationDelay: `${i * 40}ms` }}>
+          <BookmarkCard
+            bookmark={{
+              ...bookmark,
+              createdAt: bookmark.createdAt.toISOString(),
+            }}
+          />
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function BookmarkListSkeleton() {
+  return (
+    <div className="flex flex-col gap-3">
+      <BookmarkCardSkeleton />
+      <BookmarkCardSkeleton />
+      <BookmarkCardSkeleton />
+    </div>
+  );
+}
+
+export default async function AppPage() {
+  const supabase = await createClient();
+  const {
+    data: { user },
+  } = await supabase.auth.getUser();
+  if (!user) redirect("/auth");
+
+  return (
+    <div className="min-h-screen bg-[var(--bg)]">
+      <Header email={user.email ?? ""} />
+      <main className="max-w-2xl mx-auto pt-6 pb-16 px-4">
+        <SaveUrlForm />
+        <SearchBar />
+        <Suspense fallback={<BookmarkListSkeleton />}>
+          <BookmarkList userId={user.id} />
+        </Suspense>
+      </main>
+    </div>
+  );
+}

client/src/app/auth/callback/route.ts

@@ -0,0 +1,23 @@
+import { createClient } from "@/lib/supabase/server";
+import { NextResponse } from "next/server";
+
+export async function GET(request: Request) {
+  const { searchParams, origin } = new URL(request.url);
+  const code = searchParams.get("code");
+  const rawNext = searchParams.get("next") ?? "/app";
+  // Reject anything that isn't a relative path to prevent open redirects
+  const next =
+    rawNext.startsWith("/") && !rawNext.startsWith("//") && !rawNext.includes("://")
+      ? rawNext
+      : "/app";
+
+  if (code) {
+    const supabase = await createClient();
+    const { error } = await supabase.auth.exchangeCodeForSession(code);
+    if (!error) {
+      return NextResponse.redirect(`${origin}${next}`);
+    }
+  }
+
+  return NextResponse.redirect(`${origin}/auth?error=oauth`);
+}