feat: social graph features

app/(app)/(auth)/layout.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+/**
+ * Shared layout for the auth pages (login, signup, forgot-password,
+ * reset-password). Provides the centered card frame so each page only
+ * has to render its own form.
+ *
+ * Also gates the routes: a signed-in user landing on any /login, /signup,
+ * etc. URL is bounced to /u/me (or the `next` query param if present).
+ * The check happens client-side because auth state lives in
+ * AuthProvider — there's no server-side cookie inspection here yet, and
+ * the redirect is purely cosmetic (logged-in users don't gain anything
+ * from re-seeing these forms, and signing in over an existing session
+ * would just no-op).
+ */
+
+import { Suspense, useEffect } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { useAuth } from "@/components/auth/auth-provider";
+
+export default function AuthLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  // useSearchParams forces a CSR bailout during prerender, so Next.js
+  // requires a Suspense boundary anywhere it's read. The gate is the
+  // only consumer here — isolate it so the rest of the layout can still
+  // SSR normally.
+  return (
+    <main className="flex items-center justify-center px-4 py-12 min-h-[90vh]">
+      <Suspense fallback={<AuthShell>{children}</AuthShell>}>
+        <AuthGate>{children}</AuthGate>
+      </Suspense>
+    </main>
+  );
+}
+
+function AuthShell({ children }: { children: React.ReactNode }) {
+  return <div className="w-full max-w-md">{children}</div>;
+}
+
+function AuthGate({ children }: { children: React.ReactNode }) {
+  const { user, loading } = useAuth();
+  const router = useRouter();
+  const params = useSearchParams();
+
+  useEffect(() => {
+    if (loading || !user) return;
+    const next = params.get("next");
+    router.replace(next && next.startsWith("/") ? next : "/u/me");
+  }, [loading, user, router, params]);
+
+  // Don't flash the form for an instant before the redirect fires.
+  if (!loading && user) {
+    return <p className="text-sm text-muted-foreground">Redirecting…</p>;
+  }
+
+  return <AuthShell>{children}</AuthShell>;
+}

app/(app)/(auth)/login/page.tsx

@@ -0,0 +1,63 @@
+"use client";
+
+import { Suspense } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { AuthCard, AuthFooterLink } from "@/components/auth/auth-card";
+import { LoginForm } from "@/components/auth/login-form";
+
+function LoginContent() {
+  const router = useRouter();
+  const params = useSearchParams();
+  const next = params.get("next") ?? "/u/me";
+  const oauthError = params.get("oauth_error");
+
+  return (
+    <AuthCard
+      title="Welcome back"
+      description="Log in to access your bookmarks, notes, and collections."
+      footer={
+        <AuthFooterLink prefix="No account?" href="/signup" label="Create one" />
+      }
+    >
+      {oauthError ? (
+        <p className="text-sm text-destructive">
+          {oauthErrorMessage(oauthError)}
+        </p>
+      ) : null}
+      <LoginForm
+        oauthNext={next}
+        onSuccess={() => {
+          router.push(next);
+          router.refresh();
+        }}
+      />
+    </AuthCard>
+  );
+}
+
+function oauthErrorMessage(code: string): string {
+  switch (code) {
+    case "invalid_state":
+    case "missing_state":
+      return "Your sign-in link expired. Please try again.";
+    case "exchange_failed":
+    case "profile_failed":
+      return "Sign-in failed while talking to the provider. Please try again.";
+    case "unknown_provider":
+      return "That sign-in provider isn't configured. Please use email or another method.";
+    case "unavailable":
+      return "Social sign-in is temporarily unavailable. Please use email/password.";
+    case "server":
+      return "Something went wrong on our side. Please try again in a moment.";
+    default:
+      return "Sign-in failed. Please try again.";
+  }
+}
+
+export default function LoginPage() {
+  return (
+    <Suspense fallback={null}>
+      <LoginContent />
+    </Suspense>
+  );
+}

app/(app)/(auth)/signup/page.tsx

@@ -15,6 +15,7 @@ export default function SignUpPage() {
       }
     >
       <SignUpForm
+        oauthNext="/u/me"
         onSuccess={() => {
           router.push("/u/me");
           router.refresh();

app/(app)/books/bg/[chapter]/[verse]/page.tsx

@@ -3,7 +3,7 @@ import Link from "next/link";
 import { PageHeader } from "@/components/page-header";
 import { notFound } from "next/navigation";
 import { getBookMeta, getSingleVerse, getChapterVerseIndex } from "@/lib/api";
-import { ChapterViewer } from "@/app/books/chapter-viewer";
+import { ChapterViewer } from "@/app/(app)/books/chapter-viewer";
 import type { MobileNavGroup } from "@/components/mobile-nav";
 import { ogForVerse, extractQuoteFromHl, buildOgMeta } from "@/lib/og";
 

app/(app)/books/bs/[chapter]/[verse]/page.tsx

@@ -11,7 +11,7 @@ import {
   type VerseIndexEntry,
   type VerseRecord,
 } from "@/lib/api";
-import { ChapterViewer } from "@/app/books/chapter-viewer";
+import { ChapterViewer } from "@/app/(app)/books/chapter-viewer";
 import type { MobileNavGroup } from "@/components/mobile-nav";
 import { ogForVerse, extractQuoteFromHl, buildOgMeta } from "@/lib/og";
 

app/(app)/books/cc/[lila]/[chapter]/[verse]/page.tsx

@@ -5,7 +5,7 @@ import Link from "next/link";
 import { PageHeader } from "@/components/page-header";
 import { notFound } from "next/navigation";
 import { getBookMeta, getSingleVerse, getChapterVerseIndex } from "@/lib/api";
-import { ChapterViewer } from "@/app/books/chapter-viewer";
+import { ChapterViewer } from "@/app/(app)/books/chapter-viewer";
 import type { MobileNavGroup } from "@/components/mobile-nav";
 import { ogForVerse, extractQuoteFromHl, buildOgMeta } from "@/lib/og";
 

app/(app)/books/mm/[chapter]/[verse]/page.tsx

@@ -10,7 +10,7 @@ import {
   type VerseIndexEntry,
   type VerseRecord,
 } from "@/lib/api";
-import { ChapterViewer } from "@/app/books/chapter-viewer";
+import { ChapterViewer } from "@/app/(app)/books/chapter-viewer";
 import type { MobileNavGroup } from "@/components/mobile-nav";
 import type { Metadata } from "next";
 import { ogForVerse, extractQuoteFromHl, buildOgMeta } from "@/lib/og";

app/(app)/books/nbs/[chapter]/[verse]/page.tsx

@@ -14,7 +14,7 @@ import {
   type VerseRecord,
 } from "@/lib/api";
 import { ogForVerse, extractQuoteFromHl, buildOgMeta } from "@/lib/og";
-import { ChapterViewer } from "@/app/books/chapter-viewer";
+import { ChapterViewer } from "@/app/(app)/books/chapter-viewer";
 import type { MobileNavGroup } from "@/components/mobile-nav";
 
 type NbsMeta = {

app/(app)/books/sb/[canto]/[chapter]/[verse]/page.tsx

@@ -5,7 +5,7 @@ import Link from "next/link";
 import { PageHeader } from "@/components/page-header";
 import { notFound } from "next/navigation";
 import { getBookMeta, getSingleVerse, getChapterVerseIndex } from "@/lib/api";
-import { ChapterViewer } from "@/app/books/chapter-viewer";
+import { ChapterViewer } from "@/app/(app)/books/chapter-viewer";
 import type { MobileNavGroup } from "@/components/mobile-nav";
 import { ogForVerse, extractQuoteFromHl, buildOgMeta } from "@/lib/og";
 

app/(app)/books/sb1962/[chapter]/[verse]/page.tsx

@@ -3,7 +3,7 @@ import Link from "next/link";
 import { PageHeader } from "@/components/page-header";
 import { notFound } from "next/navigation";
 import { getBookMeta, getSingleVerse, getChapterVerseIndex } from "@/lib/api";
-import { ChapterViewer } from "@/app/books/chapter-viewer";
+import { ChapterViewer } from "@/app/(app)/books/chapter-viewer";
 import type { MobileNavGroup } from "@/components/mobile-nav";
 import { ogForVerse, extractQuoteFromHl, buildOgMeta } from "@/lib/og";
 

app/(app)/chat/page.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+/**
+ * /chat — placeholder for the Kautilya AI study companion.
+ *
+ * The actual chat surface (an AI tuned on Śrīla Prabhupāda's books,
+ * letters, and lectures) isn't built yet. Until it ships we render a
+ * coming-soon page so the nav entries (sidebar + bottom bar) have a
+ * real route to point at. When the feature lands, swap this file for
+ * the real chat UI — nav wiring stays the same.
+ */
+
+import Link from "next/link";
+import { Compass } from "lucide-react";
+import { KautilyaIcon } from "@/components/selection-toolbar/shared";
+
+export default function ChatPage() {
+  return (
+    <main className="flex-1 max-w-2xl w-full mx-auto px-4 sm:px-6 py-16 sm:py-24">
+      <div className="flex flex-col items-center text-center gap-5">
+        <span
+          aria-hidden
+          className="inline-flex size-14 items-center justify-center rounded-full bg-primary/10 text-primary"
+        >
+          <KautilyaIcon className="size-7" />
+        </span>
+
+        <h1 className="font-[family-name:var(--font-title)] font-semibold text-2xl sm:text-3xl text-foreground leading-tight text-balance">
+          Kautilya is coming soon
+        </h1>
+
+        <p className="text-sm text-muted-foreground leading-relaxed max-w-md">
+          An AI study companion tuned on Śrīla Prabhupāda&apos;s books,
+          letters, and lectures — ask any question, get answers grounded in
+          his own words with citations back to the source passages. Until
+          it lands, the full library is already waiting.
+        </p>
+
+        <div className="flex flex-col sm:flex-row items-center gap-3 mt-2">
+          <Link
+            href="/search"
+            className="inline-flex items-center justify-center gap-2 rounded-lg bg-primary text-primary-foreground px-5 h-11 text-sm font-medium hover:bg-primary/90 transition-colors min-w-[12rem]"
+          >
+            <Compass className="size-4" />
+            Explore Knowledgebase
+          </Link>
+        </div>
+      </div>
+    </main>
+  );
+}

app/(app)/feedback/page.tsx

@@ -0,0 +1,180 @@
+"use client";
+
+/**
+ * /feedback — single-page form for bug reports, feature requests, and
+ * general comments. Submissions persist to the BFF and trigger an
+ * admin notification email. No follow-up UI beyond a success toast
+ * and a redirect back to /.
+ *
+ * Authed visitors don't see the contact-email field — the BFF reads
+ * their account email from the session cookie. Anonymous visitors get
+ * the field and must fill it in so we have a reply path.
+ */
+
+import { useState } from "react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { ArrowLeft, MessageSquare, Send } from "lucide-react";
+import { toast } from "sonner";
+import { feedback as feedbackAPI, SocialError } from "@/lib/social";
+import { useAuth } from "@/components/auth/auth-provider";
+
+type Category = "bug" | "feature" | "general" | "other";
+
+const CATEGORIES: { value: Category; label: string; description: string }[] = [
+  { value: "general", label: "General feedback", description: "Thoughts, impressions, suggestions — anything else." },
+  { value: "bug", label: "Bug report", description: "Something is broken or behaving unexpectedly." },
+  { value: "feature", label: "Feature request", description: "An idea for something new on the site." },
+  { value: "other", label: "Other", description: "Doesn't fit the above? Use this." },
+];
+
+export default function FeedbackPage() {
+  const router = useRouter();
+  const { user, loading } = useAuth();
+  const authed = !loading && !!user;
+
+  const [category, setCategory] = useState<Category>("general");
+  const [message, setMessage] = useState("");
+  const [contactEmail, setContactEmail] = useState("");
+  const [submitting, setSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  async function submit(e: React.FormEvent) {
+    e.preventDefault();
+    setError(null);
+    const trimmed = message.trim();
+    if (!trimmed) {
+      setError("Message is required.");
+      return;
+    }
+    if (!authed && !contactEmail.trim()) {
+      setError("Email is required so we can reply.");
+      return;
+    }
+    setSubmitting(true);
+    try {
+      await feedbackAPI.submit({
+        category,
+        message: trimmed,
+        contact_email: authed ? undefined : contactEmail.trim(),
+      });
+      toast.success("Thanks for the feedback!", {
+        description: "We've forwarded it to the team.",
+        duration: 5000,
+      });
+      setMessage("");
+      setContactEmail("");
+      router.push("/");
+    } catch (err) {
+      setError(err instanceof SocialError ? err.message : "Could not send feedback.");
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  const selected = CATEGORIES.find((c) => c.value === category);
+
+  return (
+    <main className="flex-1 max-w-xl w-full mx-auto px-4 sm:px-6 py-10 sm:py-14">
+      <Link
+        href="/"
+        className="inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground"
+      >
+        <ArrowLeft className="size-4" /> Back to home
+      </Link>
+
+      <header className="mt-6 mb-6 flex items-start gap-3">
+        <span
+          aria-hidden
+          className="inline-flex size-11 items-center justify-center rounded-full bg-primary/10 text-primary shrink-0"
+        >
+          <MessageSquare className="size-5" />
+        </span>
+        <div>
+          <h1 className="font-[family-name:var(--font-title)] font-semibold text-2xl text-foreground leading-tight">
+            Send feedback
+          </h1>
+          <p className="mt-1 text-sm text-muted-foreground">
+            Tell us what&apos;s working, what&apos;s broken, or what you&apos;d like to see next. We read every message.
+          </p>
+        </div>
+      </header>
+
+      <form
+        onSubmit={submit}
+        className="space-y-5 rounded-2xl bg-card ring-1 ring-foreground/10 p-5"
+      >
+        <div>
+          <label htmlFor="category" className="text-sm font-medium text-foreground">
+            What&apos;s this about?
+          </label>
+          <select
+            id="category"
+            value={category}
+            onChange={(e) => setCategory(e.target.value as Category)}
+            className="mt-1.5 h-10 w-full rounded-lg border border-border bg-card px-3 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-ring"
+            disabled={submitting}
+          >
+            {CATEGORIES.map((c) => (
+              <option key={c.value} value={c.value}>{c.label}</option>
+            ))}
+          </select>
+          <p className="mt-1 text-xs text-muted-foreground">
+            {selected?.description}
+          </p>
+        </div>
+
+        <div>
+          <label htmlFor="message" className="text-sm font-medium text-foreground">
+            Message
+          </label>
+          <textarea
+            id="message"
+            value={message}
+            onChange={(e) => setMessage(e.target.value)}
+            placeholder="Share as much detail as you'd like…"
+            rows={6}
+            maxLength={5000}
+            disabled={submitting}
+            className="mt-1.5 w-full rounded-lg border border-border bg-card px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring resize-y"
+          />
+          <p className="mt-1 text-xs text-muted-foreground text-right tabular-nums">
+            {message.length}/5000
+          </p>
+        </div>
+
+        {!loading && !authed ? (
+          <div>
+            <label htmlFor="contact_email" className="text-sm font-medium text-foreground">
+              Your email
+            </label>
+            <input
+              id="contact_email"
+              type="email"
+              value={contactEmail}
+              onChange={(e) => setContactEmail(e.target.value)}
+              placeholder="you@example.com"
+              required
+              disabled={submitting}
+              className="mt-1.5 h-10 w-full rounded-lg border border-border bg-card px-3 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
+            />
+            <p className="mt-1 text-xs text-muted-foreground">
+              So we can write back if needed. We don&apos;t add you to a mailing list.
+            </p>
+          </div>
+        ) : null}
+
+        {error ? <p className="text-sm text-destructive">{error}</p> : null}
+
+        <button
+          type="submit"
+          disabled={submitting || !message.trim()}
+          className="w-full h-11 inline-flex items-center justify-center gap-2 rounded-lg bg-primary text-primary-foreground text-base font-medium hover:bg-primary/90 transition-colors disabled:opacity-60"
+        >
+          <Send className="size-4" />
+          {submitting ? "Sending…" : "Send feedback"}
+        </button>
+      </form>
+    </main>
+  );
+}