Quizzes: To do = started but unfinished; durations roll into days

The To do tab now lists only quizzes you've started and not finished;
untouched ones stay under All. Quiz times show hours and days
(3h 20m, 2d 4h) instead of ever-growing minutes, and 59.96s no longer
prints as "60.0s".

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

app/(app)/(reader)/transcriptions/[slug]/page.tsx

@@ -9,6 +9,7 @@ import {
 } from "@/lib/transcriptions";
 import { buildOgMeta, ogForTranscription, extractQuoteFromHl } from "@/lib/og";
 import { PageHeader } from "@/components/layout/page-header";
+import { QuizButton } from "@/components/quiz/quiz-button";
 import { Card, CardContent } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { buttonVariants } from "@/components/ui/button";
@@ -95,6 +96,9 @@ export default async function TranscriptionPage({
       />
       <PageHeader
         sticky
+        // With audio, the quiz button sits beside the play control below
+        // instead; without it, the header shows it as on any other page.
+        quiz={!t.audioUrl}
         offline={{
           type: "transcript",
           title: t.name,
@@ -168,13 +172,15 @@ export default async function TranscriptionPage({
 
           {/* Play Audio button */}
           {t.audioUrl && (
-            <div className="w-full md:w-[25%] flex justify-end">
+            <div className="w-full md:w-auto flex flex-wrap items-center justify-end gap-2">
+              <QuizButton path={`/transcriptions/${t.slug}`} size="lg" />
               <PlayAudioButton
                 audioUrl={t.audioUrl}
                 title={t.name}
                 subtitle={[t.date, t.place].filter(Boolean).join(" · ")}
                 sourceUrl={`/transcriptions/${t.slug}`}
                 type={t.type}
+                fallbackYear={t.year}
               />
             </div>
           )}

app/(app)/(reader)/transcriptions/[slug]/play-audio-button.tsx

@@ -5,6 +5,11 @@ import {
   type AudioTrack,
   AudioWaveAnimation,
 } from "@/components/audio-player";
+import {
+  rememberedQueue,
+  useTranscriptQueue,
+  yearQueue,
+} from "@/components/audio-player/transcript-queue";
 import { cn } from "@/lib/utils";
 import { Play } from "lucide-react";
 
@@ -17,6 +22,11 @@ type PlayAudioButtonProps = {
   className?: string;
   /** Compact icon-only variant for list items */
   variant?: "default" | "compact";
+  /**
+   * On a lecture's own page: its year, queued as a fallback when the lecture
+   * wasn't opened from a list (search, a shared link…).
+   */
+  fallbackYear?: number | null;
 };
 
 export function PlayAudioButton({
@@ -27,8 +37,18 @@ export function PlayAudioButton({
   type,
   className,
   variant = "default",
+  fallbackYear,
 }: PlayAudioButtonProps) {
-  const { currentTrack, isPlaying, play, togglePlayPause } = useAudioPlayer();
+  const {
+    currentTrack,
+    isPlaying,
+    play,
+    playPlaylist,
+    attachQueue,
+    togglePlayPause,
+  } = useAudioPlayer();
+  // The list this button sits in (a transcription list row), if any.
+  const listQueue = useTranscriptQueue();
 
   const isThisTrack = currentTrack?.url === audioUrl;
   const isThisPlaying = isThisTrack && isPlaying;
@@ -44,7 +64,25 @@ export function PlayAudioButton({
         sourceUrl,
         type: type ?? "lecture",
       };
+      // Queue the list this recording was found in, so Next / Previous
+      // follow it: the list the button sits in, or — on a lecture's own
+      // page — the list it was opened from.
+      const queue =
+        listQueue ??
+        rememberedQueue(sourceUrl.replace(/^\/transcriptions\//, ""));
+      const at = queue?.findIndex((q) => q.url === audioUrl) ?? -1;
+      if (queue && at >= 0 && queue.length > 1) {
+        playPlaylist(queue, at);
+        return;
+      }
+      // No list to follow: start this lecture now — audio must begin inside
+      // the tap, or iOS blocks it — then queue its year once that loads.
       play(track);
+      if (fallbackYear) {
+        void yearQueue(fallbackYear).then((tracks) => {
+          if (tracks && tracks.length > 1) attachQueue(tracks);
+        });
+      }
     }
   }
 

app/(app)/(reader)/transcriptions/book/[book]/book-browser.tsx

@@ -7,7 +7,15 @@ import { Card, CardContent } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { buttonVariants } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
-import { ChevronLeft, ChevronRight, Menu, Calendar, Clock, MapPin } from "lucide-react";
+import {
+  ChevronLeft,
+  ChevronRight,
+  Menu,
+  Calendar,
+  Clock,
+  MapPin,
+} from "lucide-react";
+import { TranscriptQueue } from "@/components/audio-player/transcript-queue";
 import { PlayAudioButton } from "@/app/(app)/(reader)/transcriptions/[slug]/play-audio-button";
 import { parseChapter, parseVerse } from "@/lib/book-reference";
 import {
@@ -417,6 +425,13 @@ export function TranscriptionBookBrowser({
     contentRef.current?.scrollIntoView({ behavior: "smooth", block: "start" });
   };
 
+  // Next / Previous run through every chapter's lectures in display order,
+  // so playback carries on into the next chapter.
+  const queueItems = useMemo(
+    () => flat.flatMap((f) => f.chapter.transcriptions),
+    [flat],
+  );
+
   const activeIdx = flat.findIndex((f) => f.chapter.key === activeKey);
   const active = activeIdx >= 0 ? flat[activeIdx] : null;
   const prev = activeIdx > 0 ? flat[activeIdx - 1] : null;
@@ -463,6 +478,7 @@ export function TranscriptionBookBrowser({
 
         {/* Main content */}
         <main ref={contentRef} className="flex-1 min-w-0 px-6 py-8 space-y-8">
+          <TranscriptQueue items={queueItems}>
             {/* Top navigation */}
             <ChapterNav
               prev={prev}
@@ -499,6 +515,7 @@ export function TranscriptionBookBrowser({
               onSelect={handleSelect}
               drawerTitle={title}
             />
+          </TranscriptQueue>
         </main>
       </div>
     </>

app/(app)/(reader)/transcriptions/place/[place]/page.tsx

@@ -9,6 +9,7 @@ import { PageHeader } from "@/components/layout/page-header";
 import { Card, CardContent } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { Calendar, Clock } from "lucide-react";
+import { TranscriptQueue } from "@/components/audio-player/transcript-queue";
 import { PlayAudioButton } from "@/app/(app)/(reader)/transcriptions/[slug]/play-audio-button";
 
 export async function generateMetadata({
@@ -55,6 +56,8 @@ export default async function TranscriptionsByPlacePage({
       </PageHeader>
 
       <main className="max-w-5xl mx-auto px-6 py-8">
+        {/* Next / Previous in the player follow this list. */}
+        <TranscriptQueue items={transcriptions}>
           <Card className="overflow-hidden">
             <CardContent className="p-0 divide-y divide-border">
               {transcriptions.map((t) => (
@@ -107,6 +110,7 @@ export default async function TranscriptionsByPlacePage({
               ))}
             </CardContent>
           </Card>
+        </TranscriptQueue>
       </main>
     </div>
   );

app/(app)/(reader)/transcriptions/type/[type]/type-browser.tsx

@@ -14,6 +14,7 @@ import {
   Clock,
   MapPin,
 } from "lucide-react";
+import { TranscriptQueue } from "@/components/audio-player/transcript-queue";
 import { PlayAudioButton } from "@/app/(app)/(reader)/transcriptions/[slug]/play-audio-button";
 import {
   Drawer,
@@ -481,6 +482,16 @@ export function TranscriptionTypeBrowser({
     [activeGroup],
   );
 
+  // Next / Previous run through the whole list in display order — year by
+  // year, month by month — so playback carries on past the year on screen.
+  const queueItems = useMemo(
+    () =>
+      yearGroups.flatMap((yg) =>
+        buildMonthGroups(yg.transcriptions).flatMap((mg) => mg.transcriptions),
+      ),
+    [yearGroups],
+  );
+
   const activeYearLabel = activeGroup?.label ?? "Unknown";
   const drawerTitle = typeLabel;
 
@@ -520,6 +531,7 @@ export function TranscriptionTypeBrowser({
 
         {/* Main content */}
         <main ref={contentRef} className="flex-1 min-w-0 px-6 py-8 space-y-8">
+          <TranscriptQueue items={queueItems}>
             {/* Top navigation */}
             <YearNav
               prev={prev}
@@ -560,6 +572,7 @@ export function TranscriptionTypeBrowser({
               onSelect={handleYearSelect}
               drawerTitle={drawerTitle}
             />
+          </TranscriptQueue>
         </main>
       </div>
     </>

app/(app)/(reader)/transcriptions/year/[year]/year-browser.tsx

@@ -7,6 +7,7 @@ import { Card, CardContent } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { cn } from "@/lib/utils";
 import { Calendar, ChevronRight, Clock, MapPin } from "lucide-react";
+import { TranscriptQueue } from "@/components/audio-player/transcript-queue";
 import { PlayAudioButton } from "@/app/(app)/(reader)/transcriptions/[slug]/play-audio-button";
 
 type TranscriptionItem = {
@@ -169,6 +170,12 @@ export function TranscriptionYearBrowser({
     return groups;
   }, [transcriptions]);
 
+  // Display order — month by month — is the order Next / Previous play in.
+  const queueItems = useMemo(
+    () => monthGroups.flatMap((g) => g.items),
+    [monthGroups],
+  );
+
   const lectureCount = transcriptions.filter(
     (t) => t.type === "lecture",
   ).length;
@@ -202,6 +209,7 @@ export function TranscriptionYearBrowser({
             </p>
           </div>
         ) : (
+          <TranscriptQueue items={queueItems}>
             <Card className="overflow-hidden">
               <CardContent className="p-0 divide-y divide-border">
                 {monthGroups.map((mg, i) => (
@@ -215,6 +223,7 @@ export function TranscriptionYearBrowser({
                 ))}
               </CardContent>
             </Card>
+          </TranscriptQueue>
         )}
       </main>
     </>

app/(app)/chats/[id]/page.tsx

@@ -35,6 +35,7 @@ import { toast } from "sonner";
 import { channelAuthorizer } from "@/lib/realtime";
 import { cn } from "@/lib/utils";
 import { useVisualViewport } from "@/lib/use-visual-viewport";
+import { ConfirmModal } from "@/components/ui/confirm-modal";
 import { useNotifications } from "@/components/notifications/notifications-provider";
 import {
   chat,
@@ -71,6 +72,9 @@ export default function ChatThreadPage() {
   const [replyTo, setReplyTo] = useState<ChatMessage | null>(null);
   const [menu, setMenu] = useState<{ message: ChatMessage; point: MenuPoint } | null>(null);
   const [forwarding, setForwarding] = useState<ChatMessage | null>(null);
+  // Non-null asks before deleting for everyone. Deleting only for yourself is
+  // reversible by the others still having it, so it goes straight through.
+  const [confirmDelete, setConfirmDelete] = useState<ChatMessage | null>(null);
   const [starredIds, setStarredIds] = useState<Set<string>>(new Set());
   // user id → when they last typed. Kept as timestamps rather than a boolean
   // so the indicator expires on its own: there is no "stopped typing" event,
@@ -295,12 +299,6 @@ export default function ChatThreadPage() {
 
   const deleteMessage = useCallback(
     async (m: ChatMessage, scope: "me" | "everyone") => {
-      if (
-        scope === "everyone" &&
-        !window.confirm("Delete this message for everyone?")
-      ) {
-        return;
-      }
       try {
         await chat.deleteMessage(id, m.id, scope);
         if (scope === "me") {
@@ -695,7 +693,8 @@ export default function ChatThreadPage() {
             // Only the sender may erase a message for everyone.
             onDeleteForEveryone:
               menu.message.sender_id === user.id
-                ? () => void deleteMessage(menu.message, "everyone")
+                ? // Ask first — the modal calls deleteMessage on confirm.
+                  () => setConfirmDelete(menu.message)
                 : undefined,
             // Reporting your own message is meaningless.
             onReport:
@@ -714,6 +713,17 @@ export default function ChatThreadPage() {
         />
       )}
 
+      <ConfirmModal
+        open={confirmDelete !== null}
+        onClose={() => setConfirmDelete(null)}
+        title="Delete for everyone?"
+        message="This removes the message from the conversation for all participants. It can't be undone."
+        confirmLabel="Delete"
+        onConfirm={async () => {
+          if (confirmDelete) await deleteMessage(confirmDelete, "everyone");
+        }}
+      />
+
       {forwarding && (
         <ForwardDialog
           message={forwarding}

app/(app)/chats/page.tsx

@@ -16,14 +16,19 @@
 
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useRouter } from "next/navigation";
-import { MessageCircle, Users } from "lucide-react";
+import { MessageCircle, Search, Users, X } from "lucide-react";
 import { useAuth } from "@/components/auth/auth-provider";
 import { useAuthGate } from "@/components/auth/auth-gate";
 import { useNotifications } from "@/components/notifications/notifications-provider";
 import { KautilyaIcon } from "@/components/selection-toolbar/shared";
 import { ChatListItem } from "@/components/chat/chat-list-item";
 import { NewGroupDialog } from "@/components/chat/new-group-dialog";
-import { chat, type InboxItem, type InboxTab } from "@/lib/chat";
+import {
+  chat,
+  conversationTitle,
+  type InboxItem,
+  type InboxTab,
+} from "@/lib/chat";
 import { cn } from "@/lib/utils";
 
 /** How long a row stays highlighted after a message lands. */
@@ -36,6 +41,15 @@ export default function ChatsPage() {
   const router = useRouter();
 
   const [tab, setTab] = useState<InboxTab>("chats");
+  const [searching, setSearching] = useState(false);
+  const [query, setQuery] = useState("");
+
+  // Closing clears the term too: leaving a filter applied behind a collapsed
+  // field is how a chat goes missing and looks like a bug.
+  const closeSearch = useCallback(() => {
+    setSearching(false);
+    setQuery("");
+  }, []);
   const [items, setItems] = useState<InboxItem[]>([]);
   const [state, setState] = useState<"loading" | "ready" | "error">("loading");
   const [highlighted, setHighlighted] = useState<Set<string>>(new Set());
@@ -120,12 +134,57 @@ export default function ChatsPage() {
     );
   }
 
+  // Filtered here rather than on the server: the inbox is already loaded in
+  // full, so this is instant and keeps working offline. Matches the thread's
+  // name and, for a DM, the peer's handle — the two things you actually
+  // remember someone by.
+  const term = query.trim().toLowerCase();
+  const visible = term
+    ? items.filter((item) => {
+        const title = conversationTitle(item).toLowerCase();
+        const handle = item.peer?.handle?.toLowerCase() ?? "";
+        return title.includes(term) || handle.includes(term);
+      })
+    : items;
+
   return (
     <main className="flex-1 max-w-2xl w-full mx-auto px-4 sm:px-6 py-6 space-y-6">
+      {searching ? (
+        // The search field REPLACES the header rather than sitting under it:
+        // the title and New group are not useful while filtering, and stacking
+        // a second row would push the list down every time it opens.
+        <div className="flex items-center gap-2 rounded-lg border border-border bg-muted/40 px-3 py-2">
+          <Search className="size-4 shrink-0 text-muted-foreground" />
+          <input
+            autoFocus
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            placeholder="Search chats"
+            className="flex-1 bg-transparent text-sm outline-none pointer-coarse:text-base placeholder:text-muted-foreground"
+          />
+          <button
+            type="button"
+            onClick={closeSearch}
+            aria-label="Close search"
+            className="shrink-0 rounded-md p-1 text-muted-foreground hover:text-foreground"
+          >
+            <X className="size-4" />
+          </button>
+        </div>
+      ) : (
         <div className="flex items-center justify-between gap-3">
           <h1 className="font-[family-name:var(--font-title)] text-3xl font-semibold text-foreground">
             Chats
           </h1>
+          <div className="flex items-center gap-2">
+            <button
+              type="button"
+              onClick={() => setSearching(true)}
+              aria-label="Search chats"
+              className="inline-flex size-9 items-center justify-center rounded-lg border border-border text-foreground hover:bg-muted/60"
+            >
+              <Search className="size-4" />
+            </button>
             {tab === "chats" && (
               <button
                 type="button"
@@ -136,6 +195,8 @@ export default function ChatsPage() {
               </button>
             )}
           </div>
+        </div>
+      )}
 
       <div className="flex gap-1 rounded-lg bg-muted p-1">
         <TabButton active={tab === "chats"} onClick={() => setTab("chats")}>
@@ -155,8 +216,16 @@ export default function ChatsPage() {
         </p>
       ) : state === "loading" ? (
         <p className="text-sm text-muted-foreground">Loading…</p>
-      ) : items.length === 0 ? (
-        tab === "kautilya" ? (
+      ) : visible.length === 0 ? (
+        // A search that matches nothing is NOT an empty inbox: saying "no
+        // chats yet" there reads as data loss rather than a narrow filter.
+        term ? (
+          <Empty
+            icon={<Search className="size-8" />}
+            title="No matches"
+            text={`Nothing in ${tab === "kautilya" ? "Kautilya" : "your chats"} matches “${query.trim()}”.`}
+          />
+        ) : tab === "kautilya" ? (
           <Empty
             icon={<KautilyaIcon className="size-8" />}
             title="Kautilya is coming soon"
@@ -171,7 +240,7 @@ export default function ChatsPage() {
         )
       ) : (
         <ul className="divide-y divide-border rounded-2xl border border-border overflow-hidden">
-          {items.map((item) => (
+          {visible.map((item) => (
             <ChatListItem
               key={item.id}
               item={item}

app/(app)/feedback/page.tsx

@@ -9,23 +9,31 @@
  * 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.
+ *
+ * Categories are managed in the admin panel and loaded from the BFF. If
+ * that request fails the form falls back to the original four, so it can
+ * always be submitted.
  */
 
-import { useState } from "react";
+import { useEffect, 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 {
+  feedback as feedbackAPI,
+  SocialError,
+  type FeedbackCategory,
+} 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." },
+// Used only if the categories can't be loaded — the original four, which
+// the BFF seeds and keeps accepting unless an admin archives them.
+const FALLBACK_CATEGORIES: FeedbackCategory[] = [
+  { key: "general", label: "General feedback", description: "Thoughts, impressions, suggestions — anything else." },
+  { key: "bug", label: "Bug report", description: "Something is broken or behaving unexpectedly." },
+  { key: "feature", label: "Feature request", description: "An idea for something new on the site." },
+  { key: "other", label: "Other", description: "Doesn't fit the above? Use this." },
 ];
 
 export default function FeedbackPage() {
@@ -33,7 +41,28 @@ export default function FeedbackPage() {
   const { user, loading } = useAuth();
   const authed = !loading && !!user;
 
-  const [category, setCategory] = useState<Category>("general");
+  const [categories, setCategories] =
+    useState<FeedbackCategory[]>(FALLBACK_CATEGORIES);
+  // Empty until chosen: the first category on the form.
+  const [picked, setPicked] = useState("");
+  const category = categories.some((c) => c.key === picked)
+    ? picked
+    : (categories[0]?.key ?? "");
+
+  useEffect(() => {
+    let cancelled = false;
+    feedbackAPI
+      .categories()
+      .then((list) => {
+        if (!cancelled && list?.length) setCategories(list);
+      })
+      .catch(() => {
+        /* keep the fallback list */
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
   const [message, setMessage] = useState("");
   const [contactEmail, setContactEmail] = useState("");
   const [submitting, setSubmitting] = useState(false);
@@ -72,7 +101,7 @@ export default function FeedbackPage() {
     }
   }
 
-  const selected = CATEGORIES.find((c) => c.value === category);
+  const selected = categories.find((c) => c.key === category);
 
   return (
     <main className="flex-1 max-w-xl w-full mx-auto px-4 sm:px-6 py-10 sm:py-14">
@@ -111,12 +140,12 @@ export default function FeedbackPage() {
           <select
             id="category"
             value={category}
-            onChange={(e) => setCategory(e.target.value as Category)}
+            onChange={(e) => setPicked(e.target.value)}
             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>
+            {categories.map((c) => (
+              <option key={c.key} value={c.key}>{c.label}</option>
             ))}
           </select>
           <p className="mt-1 text-xs text-muted-foreground">

app/(app)/notifications/page.tsx

@@ -28,6 +28,7 @@ import {
   type AppNotification,
   type UserSummary,
 } from "@/lib/social";
+import { RichText } from "@/lib/rich-text";
 import { UserAvatar } from "@/components/ui/user-avatar";
 import { Button } from "@/components/ui/button";
 import { timeAgo } from "@/lib/time";
@@ -275,10 +276,16 @@ function NotificationRow({
       <UserAvatar src={isAdmin ? null : n.actor_avatar_url} name={display} />
       <div className="min-w-0 flex-1">
         {isAdmin ? (
-          <p className="text-sm text-foreground leading-snug whitespace-pre-line">
+          // A div, not a <p>: the formatted body nests elements, and RichText
+          // handles line breaks itself (so no whitespace-pre-line either).
+          <div className="text-sm text-foreground leading-snug">
             <span className="font-semibold">{display}</span>
-            {n.body ? <span className="block mt-0.5">{n.body}</span> : null}
-          </p>
+            {n.body ? (
+              <span className="block mt-0.5">
+                <RichText text={n.body} />
+              </span>
+            ) : null}
+          </div>
         ) : (
           <p className="text-sm text-foreground leading-snug">
             <span className="font-semibold">{display}</span> {message}

app/(app)/page.tsx

@@ -6,6 +6,7 @@ import { useAuth } from "@/components/auth/auth-provider";
 import { SadhnaStreakCTA } from "@/components/sadhna/streak-cta";
 import { VaniOfTheDayCTA } from "@/components/vani/vani-of-the-day-cta";
 import { HomeFeed } from "@/components/feed/home-feed";
+import { QuizzesCTA } from "@/components/quiz/quizzes-cta";
 
 /**
  * / — the Home (Feed) gate.
@@ -33,9 +34,17 @@ export default function HomePage() {
       // mobile this max-width is wider than the viewport, so it's full-bleed
       // as before.
       <main className="flex-1 max-w-lg w-full mx-auto px-4 sm:px-6 py-6">
-        <div className="mb-6 flex flex-col gap-3">
-          <SadhnaStreakCTA />
-          <VaniOfTheDayCTA />
+        <div className="mb-6">
+          <div className="flex h-24 gap-3">
+            {/* A compact sādhana tile beside a wider Vāṇī of the Day: the
+                streak is a daily habit you already know how to reach, so it
+                needs only a recognisable mark; the vāṇī changes daily and
+                earns the room to say what it is. */}
+            <SadhnaStreakCTA compact />
+            <VaniOfTheDayCTA className="h-full min-w-0 max-w-none flex-1" />
+          </div>
+          {/* Only while something is left to take. */}
+          <QuizzesCTA pendingOnly className="mt-3" />
         </div>
         <HomeFeed />
       </main>
@@ -88,9 +97,17 @@ export default function HomePage() {
         </p>
 
         {/* Daily sādhana streak + Vāṇī of the day — entry points for visitors. */}
-        <div className="mt-6 w-full max-w-md flex flex-col gap-3">
-          <SadhnaStreakCTA />
-          <VaniOfTheDayCTA />
+        <div className="mt-6 w-full max-w-md">
+          <div className="flex h-24 gap-3">
+            {/* A compact sādhana tile beside a wider Vāṇī of the Day: the
+                streak is a daily habit you already know how to reach, so it
+                needs only a recognisable mark; the vāṇī changes daily and
+                earns the room to say what it is. */}
+            <SadhnaStreakCTA compact />
+            <VaniOfTheDayCTA className="h-full min-w-0 max-w-none flex-1" />
+          </div>
+          {/* Only while something is left to take. */}
+          <QuizzesCTA pendingOnly className="mt-3" />
         </div>
       </div>
     </main>

app/(app)/quizzes/[id]/page.tsx

@@ -0,0 +1,30 @@
+import type { Metadata } from "next";
+import { bff } from "@/lib/bff";
+import { ogForQuiz } from "@/lib/og";
+import type { QuizCard } from "@/lib/quiz";
+import { QuizPlayer } from "./quiz-player";
+
+type Props = { params: Promise<{ id: string }> };
+
+/**
+ * Link previews name the quiz. The quiz's card is the BFF's one public quiz
+ * endpoint — title, description and what it's attached to, never questions —
+ * so a shared link unfurls even though taking the quiz needs an account.
+ */
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  const { id } = await params;
+  const card = await bff<QuizCard>(`/quizzes/${encodeURIComponent(id)}`, {
+    revalidate: 300,
+  }).catch(() => null);
+  if (!card) return { title: "Quiz" };
+  return {
+    title: card.title,
+    description: `A quiz on Prabhupāda Says — ${card.question_count} question${card.question_count === 1 ? "" : "s"}.`,
+    ...ogForQuiz(card),
+  };
+}
+
+export default async function QuizPage({ params }: Props) {
+  const { id } = await params;
+  return <QuizPlayer id={id} />;
+}

app/(app)/quizzes/[id]/quiz-player.tsx

@@ -0,0 +1,315 @@
+"use client";
+
+/**
+ * Taking a quiz: an introduction, then one question at a time, then your
+ * result.
+ *
+ * Each question is fetched from the BFF as you reach it, and the BFF starts
+ * its clock at that moment — so response times are measured server-side and
+ * reloading the page doesn't restart them. Correct answers are only revealed
+ * on the results screen, never while you're still answering.
+ *
+ * Tapping an option only selects it; the answer is sent, and becomes final,
+ * when you press Submit. Multi questions ("select all that apply") take
+ * several selections.
+ *
+ * Signed in only: visitors get the sign-in modal over the page, and home if
+ * they dismiss it. Nothing about the quiz loads until they're signed in.
+
+ */
+
+import { useCallback, useEffect, useState } from "react";
+import Link from "next/link";
+import {
+  ArrowLeft,
+  ArrowRight,
+  Check,
+  ClipboardCheck,
+  Loader2,
+} from "lucide-react";
+import { toast } from "sonner";
+import { useAuthGate } from "@/components/auth/auth-gate";
+import { useSignedInPage } from "@/components/auth/use-signed-in-page";
+import { RichText } from "@/lib/rich-text";
+import {
+  quiz as quizApi,
+  quizActionLabel,
+  QuizError,
+  type QuizCard,
+  type QuizPlay,
+  type QuizResult,
+} from "@/lib/quiz";
+import { QuizResultView } from "@/components/quiz/quiz-result-view";
+import { CopyPageLinkButton } from "@/components/layout/copy-page-link-button";
+import { cn } from "@/lib/utils";
+
+type Stage =
+  | { kind: "loading" }
+  | { kind: "intro"; card: QuizCard }
+  | { kind: "playing"; card: QuizCard; play: QuizPlay }
+  | { kind: "result"; card: QuizCard; result: QuizResult }
+  | { kind: "missing" };
+
+export function QuizPlayer({ id }: { id: string }) {
+  const { user } = useSignedInPage();
+  const userId = user?.id;
+  const { requireAuth } = useAuthGate();
+  const [stage, setStage] = useState<Stage>({ kind: "loading" });
+  const [selected, setSelected] = useState<string[]>([]);
+  const [submitting, setSubmitting] = useState(false);
+
+  // Every new question starts with nothing selected.
+  const goTo = (card: QuizCard, play: QuizPlay) => {
+    setSelected([]);
+    setStage({ kind: "playing", card, play });
+  };
+
+  const toggle = (play: QuizPlay, optionId: string) => {
+    if (submitting) return;
+    setSelected((cur) =>
+      play.question?.multi
+        ? cur.includes(optionId)
+          ? cur.filter((x) => x !== optionId)
+          : [...cur, optionId]
+        : [optionId],
+    );
+  };
+
+  const showResult = useCallback(
+    async (card: QuizCard) => {
+      const result = await quizApi.result(id);
+      setStage({ kind: "result", card, result });
+    },
+    [id],
+  );
+
+  useEffect(() => {
+    if (!userId) return;
+    let cancelled = false;
+    quizApi
+      .get(id)
+      .then(async (card) => {
+        if (cancelled) return;
+        if (card.my.state === "completed") await showResult(card);
+        else setStage({ kind: "intro", card });
+      })
+      .catch(() => !cancelled && setStage({ kind: "missing" }));
+    return () => {
+      cancelled = true;
+    };
+    // user?.id: progress appears once you sign in.
+  }, [id, userId, showResult]);
+
+  const begin = async (card: QuizCard) => {
+    if (!(await requireAuth())) return;
+    try {
+      const play = await quizApi.start(id);
+      if (play.done) await showResult(card);
+      else goTo(card, play);
+    } catch (err) {
+      toast.error(
+        err instanceof QuizError ? err.message : "Could not start the quiz",
+      );
+    }
+  };
+
+  const submit = async (card: QuizCard, play: QuizPlay) => {
+    if (!play.question || submitting || selected.length === 0) return;
+    setSubmitting(true);
+    try {
+      const next = await quizApi.answer(id, play.question.id, selected);
+      if (next.done) await showResult(card);
+      else goTo(card, next);
+    } catch (err) {
+      // Most likely the question was already answered in another tab: pick up
+      // wherever the attempt actually is rather than leaving this one stuck.
+      toast.error(
+        err instanceof QuizError ? err.message : "Could not save that answer",
+      );
+      try {
+        const resumed = await quizApi.start(id);
+        if (resumed.done) await showResult(card);
+        else goTo(card, resumed);
+      } catch {
+        /* the toast already said something went wrong */
+      }
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <main className="mx-auto w-full max-w-2xl flex-1 px-4 py-6 sm:px-6 sm:py-10">
+      <Link
+        href="/quizzes"
+        className="mb-4 inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground"
+      >
+        <ArrowLeft className="size-4" /> All quizzes
+      </Link>
+
+      {stage.kind === "loading" && (
+        <p className="text-sm text-muted-foreground">Loading…</p>
+      )}
+
+      {stage.kind === "missing" && (
+        <p className="text-sm text-muted-foreground">
+          This quiz isn&apos;t available.
+        </p>
+      )}
+
+      {(stage.kind === "intro" ||
+        stage.kind === "playing" ||
+        stage.kind === "result") && (
+        <header className="mb-6">
+          <h1 className="font-[family-name:var(--font-title)] text-2xl font-semibold text-foreground">
+            {stage.card.title}
+          </h1>
+          {stage.card.target_path && (
+            <Link
+              href={stage.card.target_path}
+              className="mt-1 inline-block text-sm text-primary hover:underline"
+            >
+              {stage.card.target_title || stage.card.target_path}
+            </Link>
+          )}
+          {/* Shares the quiz itself; the link unfurls with its own OG card. */}
+          <div className="mt-3">
+            <CopyPageLinkButton label="Copy quiz link" />
+          </div>
+        </header>
+      )}
+
+      {stage.kind === "intro" && (
+        <section className="space-y-5 rounded-2xl border border-border bg-card p-5">
+          {stage.card.description && (
+            <div className="text-sm leading-relaxed text-foreground">
+              <RichText text={stage.card.description} />
+            </div>
+          )}
+          <p className="text-sm text-muted-foreground">
+            {stage.card.question_count}{" "}
+            {stage.card.question_count === 1 ? "question" : "questions"}, one
+            attempt. Each answer is final once submitted, and your time on each
+            question is recorded.
+          </p>
+          {stage.card.my.state === "in_progress" && (
+            <p className="text-sm text-muted-foreground">
+              You&apos;ve answered {stage.card.my.answered} of{" "}
+              {stage.card.my.total}.
+            </p>
+          )}
+          <button
+            type="button"
+            onClick={() => void begin(stage.card)}
+            className="inline-flex items-center gap-2 rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 dark:text-white"
+          >
+            <ClipboardCheck className="size-4" />
+            {user
+              ? quizActionLabel(stage.card.my.state)
+              : "Sign in to take the quiz"}
+          </button>
+        </section>
+      )}
+
+      {stage.kind === "playing" && stage.play.question && (
+        <section className="space-y-5">
+          <div>
+            <div className="mb-1.5 flex justify-between text-xs text-muted-foreground">
+              <span>
+                Question {stage.play.answered + 1} of {stage.play.total}
+              </span>
+            </div>
+            <div className="h-1.5 overflow-hidden rounded-full bg-muted">
+              <div
+                className="h-full rounded-full bg-primary transition-all"
+                style={{
+                  width: `${(stage.play.answered / stage.play.total) * 100}%`,
+                }}
+              />
+            </div>
+          </div>
+
+          <div>
+            <p className="text-lg leading-relaxed text-foreground">
+              <RichText text={stage.play.question.prompt} />
+            </p>
+            <p className="mt-1 text-xs text-muted-foreground">
+              {stage.play.question.multi
+                ? "Select all that apply"
+                : "Select one answer"}
+            </p>
+          </div>
+
+          <ul
+            className="space-y-2"
+            role={stage.play.question.multi ? "group" : "radiogroup"}
+          >
+            {stage.play.question.options.map((o) => {
+              const on = selected.includes(o.id);
+              const multi = stage.play.question?.multi;
+              return (
+                <li key={o.id}>
+                  <button
+                    type="button"
+                    role={multi ? "checkbox" : "radio"}
+                    aria-checked={on}
+                    disabled={submitting}
+                    onClick={() => toggle(stage.play, o.id)}
+                    className={cn(
+                      "flex w-full items-center gap-3 rounded-xl border px-4 py-3 text-left text-sm transition-colors",
+                      on
+                        ? "border-primary bg-primary/10"
+                        : "border-border bg-card hover:border-primary/40 hover:bg-muted/40",
+                      "disabled:cursor-default",
+                    )}
+                  >
+                    {/* Radio dot for one answer, checkbox for several. */}
+                    <span
+                      aria-hidden
+                      className={cn(
+                        "flex size-4 shrink-0 items-center justify-center border transition-colors",
+                        multi ? "rounded" : "rounded-full",
+                        on
+                          ? "border-primary bg-primary text-primary-foreground"
+                          : "border-muted-foreground/40",
+                      )}
+                    >
+                      {on &&
+                        (multi ? (
+                          <Check className="size-3" strokeWidth={3} />
+                        ) : (
+                          <span className="size-1.5 rounded-full bg-primary-foreground" />
+                        ))}
+                    </span>
+                    <span className="min-w-0 flex-1">
+                      <RichText text={o.body} />
+                    </span>
+                  </button>
+                </li>
+              );
+            })}
+          </ul>
+
+          <div className="flex justify-end">
+            <button
+              type="button"
+              disabled={selected.length === 0 || submitting}
+              onClick={() => void submit(stage.card, stage.play)}
+              className="inline-flex items-center gap-2 rounded-lg bg-primary px-5 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50 dark:text-white"
+            >
+              {submitting && <Loader2 className="size-4 animate-spin" />}
+              {stage.play.answered + 1 === stage.play.total
+                ? "Submit and finish"
+                : "Next question"}
+              {!submitting && stage.play.answered + 1 < stage.play.total && (
+                <ArrowRight className="size-4" />
+              )}
+            </button>
+          </div>
+        </section>
+      )}
+
+      {stage.kind === "result" && <QuizResultView result={stage.result} />}
+    </main>
+  );
+}

app/(app)/quizzes/page.tsx

@@ -0,0 +1,21 @@
+import { Suspense } from "react";
+import type { Metadata } from "next";
+import { ogForQuizzes } from "@/lib/og";
+import { QuizzesList } from "./quizzes-list";
+
+export const metadata: Metadata = {
+  title: "Quizzes",
+  description:
+    "Test your understanding of Śrīla Prabhupāda's books, lectures and conversations.",
+  ...ogForQuizzes(),
+};
+
+export default function QuizzesPage() {
+  // The list reads its tab and category from the URL (useSearchParams),
+  // which needs a Suspense boundary to render.
+  return (
+    <Suspense fallback={null}>
+      <QuizzesList />
+    </Suspense>
+  );
+}

app/(app)/quizzes/quizzes-list.tsx

@@ -0,0 +1,129 @@
+"use client";
+
+/**
+ * /quizzes — every published quiz, with where you are in each.
+ *
+ * Reached from the Quizzes card on the search page. Quizzes are deliberately
+ * not in search results: they're something to do, not something to look up.
+ * Signed in only: visitors get the sign-in modal, and home if they dismiss it.
+ *
+ * The tab (?tab=todo) and, under All, the category you've drilled into
+ * (?in=books&book=bg) both live in the URL, so a refresh keeps your place.
+ */
+
+import { useEffect, useMemo, useState } from "react";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { useSignedInPage } from "@/components/auth/use-signed-in-page";
+import { quiz, type QuizCard } from "@/lib/quiz";
+import { QuizGrid } from "@/components/quiz/quiz-grid";
+import { QuizBrowser } from "@/components/quiz/quiz-browser";
+import { cn } from "@/lib/utils";
+
+type Filter = "all" | "todo" | "done";
+const FILTERS: readonly Filter[] = ["all", "todo", "done"];
+
+export function QuizzesList() {
+  const { user } = useSignedInPage();
+  const userId = user?.id;
+  const [list, setList] = useState<QuizCard[] | null>(null);
+  const params = useSearchParams();
+  const router = useRouter();
+  const pathname = usePathname();
+  const tabParam = params.get("tab") as Filter | null;
+  const filter: Filter =
+    tabParam && FILTERS.includes(tabParam) ? tabParam : "all";
+  // Switching tab starts that tab at its top; All is the bare URL.
+  const setFilter = (f: Filter) =>
+    router.replace(f === "all" ? pathname : `${pathname}?tab=${f}`, {
+      scroll: false,
+    });
+
+  useEffect(() => {
+    if (!userId) return;
+    let cancelled = false;
+    quiz
+      .list()
+      .then((l) => !cancelled && setList(l))
+      .catch(() => !cancelled && setList([]));
+    return () => {
+      cancelled = true;
+    };
+  }, [userId]);
+
+  const shown = useMemo(
+    () =>
+      (list ?? []).filter((q) =>
+        filter === "all"
+          ? true
+          : filter === "done"
+            ? q.my.state === "completed"
+            : // To do: started but not finished. Untouched quizzes live
+              // under All.
+              q.my.state === "in_progress",
+      ),
+    [list, filter],
+  );
+
+  return (
+    <main className="mx-auto w-full max-w-3xl flex-1 px-4 py-6 sm:px-6 sm:py-10">
+      <header className="mb-6">
+        <h1 className="font-[family-name:var(--font-title)] text-2xl font-semibold text-foreground sm:text-3xl">
+          Quizzes
+        </h1>
+        <p className="mt-1 text-sm text-muted-foreground">
+          Test what you&apos;ve read and heard. Each quiz can be taken once, and
+          only you can see your results.
+        </p>
+      </header>
+
+      {user && (
+        // Phones: three equal, thumb-sized tabs across the width. From sm up
+        // they shrink back to compact pills.
+        <div className="mb-4 grid grid-cols-3 gap-1.5 sm:flex sm:gap-1">
+          {(
+            [
+              ["all", "All"],
+              ["todo", "To do"],
+              ["done", "Finished"],
+            ] as const
+          ).map(([k, label]) => (
+            <button
+              key={k}
+              type="button"
+              onClick={() => setFilter(k)}
+              className={cn(
+                "min-h-10 rounded-full px-4 py-2 text-[15px] font-medium transition-colors sm:min-h-0 sm:px-3 sm:py-1 sm:text-sm sm:font-normal",
+                filter === k
+                  ? "bg-primary text-primary-foreground dark:text-white"
+                  : "bg-muted/60 text-muted-foreground hover:bg-muted hover:text-foreground sm:bg-transparent",
+              )}
+            >
+              {label}
+            </button>
+          ))}
+        </div>
+      )}
+
+      {!user ? null : list === null ? (
+        <p className="text-sm text-muted-foreground">Loading…</p>
+      ) : shown.length === 0 ? (
+        <p className="text-sm text-muted-foreground">
+          {list.length === 0
+            ? "No quizzes yet — check back soon."
+            : "Nothing here."}
+        </p>
+      ) : filter !== "all" ? (
+        <QuizGrid quizzes={shown} />
+      ) : (
+        <QuizBrowser
+          quizzes={shown}
+          path={{
+            in: params.get("in"),
+            book: params.get("book"),
+            year: params.get("year"),
+          }}
+        />
+      )}
+    </main>
+  );
+}

app/(app)/settings/feedbacks/page.tsx

@@ -152,7 +152,9 @@ export default function FeedbacksPage() {
 function FeedbackCard({ feedback: f }: { feedback: Feedback }) {
   const status = statusOf(f);
   const meta = STATUS_META[status];
-  const category = CATEGORY_LABEL[f.category] ?? f.category;
+  // The server's label tracks renames in the admin; the map covers an older
+  // BFF that doesn't send one yet.
+  const category = f.category_label || CATEGORY_LABEL[f.category] || f.category;
 
   return (
     <li className="rounded-xl border border-border bg-card p-4 sm:p-5">

app/(app)/settings/legal/page.tsx

@@ -16,6 +16,7 @@ export default function LegalSettingsPage() {
       title="Legal"
     >
       <NavList>
+        <NavRow href="/about" label="About Us" />
         <NavRow href="/terms" label="Terms of Service" />
         <NavRow href="/privacy" label="Privacy Policy" />
         <NavRow href="/data-deletion" label="Steps for data deletion" />

components/audio-player/audio-context.tsx

@@ -60,6 +60,12 @@ type AudioPlayerState = {
 type AudioPlayerActions = {
   play: (track: AudioTrack) => void;
   playPlaylist: (tracks: AudioTrack[], startIndex?: number) => void;
+  /**
+   * Gives the track that's already playing a queue to sit in, without
+   * restarting it — for a queue that arrives after playback began. Ignored
+   * if the current track isn't in it (the user moved on meanwhile).
+   */
+  attachQueue: (tracks: AudioTrack[]) => void;
   pause: () => void;
   resume: () => void;
   togglePlayPause: () => void;
@@ -469,6 +475,14 @@ export function AudioPlayerProvider({ children }: { children: ReactNode }) {
     [saveCurrent],
   );
 
+  const attachQueue = useCallback((tracks: AudioTrack[]) => {
+    const current = currentTrackRef.current;
+    const idx = current ? tracks.findIndex((t) => t.url === current.url) : -1;
+    if (idx < 0) return;
+    setPlaylist(tracks);
+    setCurrentIndex(idx);
+  }, []);
+
   const pause = useCallback(() => {
     audioRef.current?.pause();
     saveCurrent();
@@ -630,6 +644,7 @@ export function AudioPlayerProvider({ children }: { children: ReactNode }) {
     currentIndex,
     play,
     playPlaylist,
+    attachQueue,
     pause,
     resume,
     togglePlayPause,

components/audio-player/transcript-queue.tsx

@@ -0,0 +1,144 @@
+"use client";
+
+/**
+ * TranscriptQueue — makes the audio player's Next / Previous follow the list
+ * a recording was found in.
+ *
+ * The transcription lists (by place, year, book, type) each wrap their rows
+ * in this. It does two things with the list, in the order it's displayed:
+ *
+ *   1. Play buttons inside it queue the whole list, starting at the row
+ *      pressed — so Next plays the next lecture *in that list*.
+ *   2. Opening a lecture from it remembers the list (sessionStorage) for that
+ *      lecture's page, so pressing Play there queues the same list.
+ *
+ * A lecture reached any other way (search, a shared link) falls back to its
+ * year in date order — the same order as the Previous / Next links on its
+ * page and the Year view. Only recordings with audio are ever queued.
+ */
+
+import { createContext, useCallback, useContext, useMemo } from "react";
+import type { AudioTrack } from "./audio-context";
+
+/** The fields every transcription list row already has. */
+export type QueueSource = {
+  slug: string;
+  name: string;
+  type: string;
+  date: string | null;
+  place: string | null;
+  audioUrl: string | null;
+};
+
+const STORAGE_KEY = "transcript-queue";
+const BFF_BASE = process.env.NEXT_PUBLIC_BFF_URL || "http://localhost:8080";
+
+/** The track a row plays — identical whether built here or by the button. */
+export function transcriptTrack(
+  t: QueueSource & { audioUrl: string },
+): AudioTrack {
+  return {
+    url: t.audioUrl,
+    title: t.name,
+    subtitle: [t.date, t.place].filter(Boolean).join(" · "),
+    sourceUrl: `/transcriptions/${t.slug}`,
+    type: t.type ?? "lecture",
+  };
+}
+
+const QueueContext = createContext<AudioTrack[] | null>(null);
+
+/** The list a play button sits in, or null outside any list. */
+export function useTranscriptQueue() {
+  return useContext(QueueContext);
+}
+
+/**
+ * The list remembered for this lecture's page, if it was opened from one.
+ * Only the lecture actually clicked qualifies, so an old list never leaks
+ * onto a page reached some other way.
+ */
+export function rememberedQueue(slug: string): AudioTrack[] | null {
+  try {
+    const raw = sessionStorage.getItem(STORAGE_KEY);
+    if (!raw) return null;
+    const saved = JSON.parse(raw) as { slug: string; tracks: AudioTrack[] };
+    return saved.slug === slug ? saved.tracks : null;
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * The fallback queue: every recording from that year, in the Year view's
+ * order (by month and day, undated months last). Null if it can't be loaded.
+ */
+export async function yearQueue(year: number): Promise<AudioTrack[] | null> {
+  try {
+    const res = await fetch(`${BFF_BASE}/api/v1/transcriptions/year/${year}`);
+    if (!res.ok) return null;
+    const json = (await res.json()) as {
+      data?: (Omit<QueueSource, "audioUrl"> & {
+        month?: number | null;
+        audio_url?: string | null;
+      })[];
+    };
+    const rows = (json.data ?? []).map((r, i) => ({
+      ...r,
+      audioUrl: r.audio_url ?? null,
+      // Known months first, keeping the BFF's date order within them.
+      sortKey: (r.month && r.month >= 1 && r.month <= 12 ? 0 : 1) * 1e6 + i,
+    }));
+    rows.sort((a, b) => a.sortKey - b.sortKey);
+    return rows
+      .filter((t): t is typeof t & { audioUrl: string } => !!t.audioUrl)
+      .map(transcriptTrack);
+  } catch {
+    return null;
+  }
+}
+
+export function TranscriptQueue({
+  items,
+  children,
+}: {
+  /** Rows in display order. */
+  items: QueueSource[];
+  children: React.ReactNode;
+}) {
+  const tracks = useMemo(
+    () =>
+      items
+        .filter((t): t is QueueSource & { audioUrl: string } => !!t.audioUrl)
+        .map(transcriptTrack),
+    [items],
+  );
+
+  // Event delegation: the rows are plain <Link>s (some rendered on the
+  // server), so catch the click on the way down rather than threading a
+  // handler into every row.
+  const onClickCapture = useCallback(
+    (e: React.MouseEvent) => {
+      const a = (e.target as HTMLElement).closest("a");
+      const href = a?.getAttribute("href");
+      if (!href?.startsWith("/transcriptions/")) return;
+      const slug = href.slice("/transcriptions/".length).split(/[?#]/)[0];
+      if (!tracks.some((t) => t.sourceUrl === `/transcriptions/${slug}`))
+        return;
+      try {
+        sessionStorage.setItem(STORAGE_KEY, JSON.stringify({ slug, tracks }));
+      } catch {
+        /* storage full or blocked — the page just plays the one lecture */
+      }
+    },
+    [tracks],
+  );
+
+  return (
+    <QueueContext.Provider value={tracks}>
+      <div className="contents" onClickCapture={onClickCapture}>
+        {children}
+      </div>
+    </QueueContext.Provider>
+  );
+}

components/auth/use-signed-in-page.ts

@@ -0,0 +1,35 @@
+"use client";
+
+/**
+ * useSignedInPage — for a page that only makes sense signed in.
+ *
+ * Signed-out visitors get the sign-in modal over the page; dismissing it
+ * takes them home. This is the same gate /notifications, /chats and /u/me
+ * each wire up by hand. Returns the user (null until signed in) so the page
+ * can hold its content back until then.
+ */
+
+import { useEffect } from "react";
+import { useRouter } from "next/navigation";
+import { useAuth } from "@/components/auth/auth-provider";
+import { useAuthGate } from "@/components/auth/auth-gate";
+
+export function useSignedInPage() {
+  const { user, loading } = useAuth();
+  const { requireAuth } = useAuthGate();
+  const router = useRouter();
+
+  useEffect(() => {
+    if (loading || user) return;
+    let cancelled = false;
+    (async () => {
+      const ok = await requireAuth();
+      if (!ok && !cancelled) router.replace("/");
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [loading, user, requireAuth, router]);
+
+  return { user, loading };
+}

components/chat/chat-composer.tsx

@@ -13,13 +13,16 @@
  */
 
 import { useCallback, useEffect, useRef, useState } from "react";
-import { Paperclip, Smile, SendHorizonal, X } from "lucide-react";
+import { Paperclip, Sticker, SendHorizonal, X } from "lucide-react";
 import { LinkPreviewCard } from "@/components/chat/link-preview-card";
 import {
   ComposerAttachments,
   type StagedAttachment,
 } from "@/components/chat/composer-attachments";
-import { StickerPicker } from "@/components/chat/sticker-picker";
+import {
+  StickerPicker,
+  type StickerAnchor,
+} from "@/components/chat/sticker-picker";
 import { compressImage } from "@/lib/compress-image";
 import { cn } from "@/lib/utils";
 import {
@@ -70,7 +73,9 @@ export function ChatComposer({
   const [staged, setStaged] = useState<StagedAttachment[]>([]);
   const ref = useRef<HTMLTextAreaElement>(null);
   const fileRef = useRef<HTMLInputElement>(null);
-  const [pickingSticker, setPickingSticker] = useState(false);
+  // Non-null opens the sticker picker AND positions it: the popover hangs
+  // off the button's viewport rect, which only exists at click time.
+  const [stickerAnchor, setStickerAnchor] = useState<StickerAnchor | null>(null);
   const lookupSeq = useRef(0);
 
   // Grow with the content, up to a cap.
@@ -248,23 +253,28 @@ export function ChatComposer({
             e.target.value = "";
           }}
         />
+        {/* One field group: attach on the left, sticker on the right, the
+            text between them. The border and background live here rather than
+            on the textarea so all three read as a single control, and
+            focus-within moves the ring to the group. */}
+        <div
+          className={cn(
+            // Minimal horizontal padding: the icon buttons keep a full-height
+            // tap target, but sit close to the group's edges and to the text
+            // rather than floating in their own gutters.
+            "flex flex-1 items-end gap-0.5 rounded-2xl border border-border bg-muted/40 px-1 py-1",
+            "focus-within:ring-1 focus-within:ring-primary/40",
+            disabled && "opacity-60",
+          )}
+        >
           <button
             type="button"
             onClick={() => fileRef.current?.click()}
             disabled={disabled}
             aria-label="Attach a file"
-          className="inline-flex size-9 shrink-0 items-center justify-center rounded-full text-muted-foreground hover:text-foreground disabled:opacity-40"
+            className="inline-flex h-8 w-8 mr-1 shrink-0 items-center justify-center rounded-full text-muted-foreground hover:text-foreground disabled:opacity-40"
           >
-          <Paperclip className="size-4" />
-        </button>
-        <button
-          type="button"
-          onClick={() => setPickingSticker(true)}
-          disabled={disabled}
-          aria-label="Send a sticker"
-          className="inline-flex size-9 shrink-0 items-center justify-center rounded-full text-muted-foreground hover:text-foreground disabled:opacity-40"
-        >
-          <Smile className="size-4" />
+            <Paperclip className="size-5" />
           </button>
 
           <textarea
@@ -281,9 +291,10 @@ export function ChatComposer({
               onTyping?.();
             }}
             onKeyDown={(e) => {
-            // Enter sends on a physical keyboard; Shift+Enter makes a newline.
-            // On touch keyboards Enter must insert a newline instead — there is
-            // no Shift to reach for — so the send button is the only way there.
+              // Enter sends on a physical keyboard; Shift+Enter makes a
+              // newline. On touch keyboards Enter must insert a newline
+              // instead — there is no Shift to reach for — so the send button
+              // is the only way there.
               if (e.key !== "Enter" || e.shiftKey) return;
               const touch =
                 typeof window !== "undefined" &&
@@ -293,16 +304,33 @@ export function ChatComposer({
               submit();
             }}
             className={cn(
+              // Bare: the group above owns the frame. Only the type size and
+              // the growth behaviour belong to the field itself.
+              "min-w-0 flex-1 resize-none bg-transparent py-1.5",
               // 16px on touch devices: iOS Safari zooms the whole page when a
-            // focused field computes below that, which on a composer means the
-            // thread jumps every time the keyboard opens. Pointer-based devices
-            // keep the app's 14px chrome.
-            "flex-1 resize-none rounded-2xl border border-border bg-muted/40 px-3 py-2",
+              // focused field computes below that, which on a composer means
+              // the thread jumps every time the keyboard opens. Pointer-based
+              // devices keep the app's 14px chrome.
               "text-sm pointer-coarse:text-base",
-            "placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-primary/40",
+              "placeholder:text-muted-foreground focus:outline-none",
               "disabled:opacity-60",
             )}
           />
+
+          <button
+            type="button"
+            onClick={(e) => {
+              const r = e.currentTarget.getBoundingClientRect();
+              // Top-centre of the button: the popover opens upward from here.
+              setStickerAnchor({ x: r.left + r.width / 2, y: r.top });
+            }}
+            disabled={disabled}
+            aria-label="Send a sticker"
+            className="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-muted-foreground hover:text-foreground disabled:opacity-40"
+          >
+            <Sticker className="size-5" />
+          </button>
+        </div>
         <button
           type="button"
           onClick={submit}
@@ -317,13 +345,14 @@ export function ChatComposer({
         </button>
       </div>
 
-      {pickingSticker && (
+      {stickerAnchor && (
         <StickerPicker
+          anchor={stickerAnchor}
           // Sent on its own, with no text: a sticker IS the message.
           onPick={(sticker) =>
             onSend("", undefined, undefined, undefined, sticker.key)
           }
-          onClose={() => setPickingSticker(false)}
+          onClose={() => setStickerAnchor(null)}
         />
       )}
     </div>

components/chat/chat-profile-header.tsx

@@ -15,6 +15,7 @@ import { useState } from "react";
 import { BellOff, Bell, ShieldBan, ShieldCheck } from "lucide-react";
 import { toast } from "sonner";
 import { Button } from "@/components/ui/button";
+import { ConfirmModal } from "@/components/ui/confirm-modal";
 import { relationships } from "@/lib/social";
 import {
   chat,
@@ -44,6 +45,9 @@ export function ChatProfileHeader({
   onChanged: () => void;
 }) {
   const [busy, setBusy] = useState(false);
+  // Blocking asks first; unblocking is immediate, since it only restores what
+  // was there before.
+  const [confirmBlock, setConfirmBlock] = useState(false);
   const rel = detail.relationship;
   const peer = detail.peer;
   const muted = isMuted(detail);
@@ -64,9 +68,6 @@ export function ChatProfileHeader({
   const toggleBlock = async () => {
     if (!peer) return;
     const blocking = !rel?.blocked;
-    if (blocking && !window.confirm(`Block ${peer.name}? They won't be able to message you.`)) {
-      return;
-    }
     setBusy(true);
     try {
       if (blocking) await relationships.block(peer.handle);
@@ -134,7 +135,9 @@ export function ChatProfileHeader({
             variant={rel?.blocked ? "outline" : "destructive"}
             size="sm"
             disabled={busy}
-            onClick={toggleBlock}
+            onClick={() =>
+              rel?.blocked ? void toggleBlock() : setConfirmBlock(true)
+            }
           >
             {rel?.blocked ? (
               <>
@@ -148,6 +151,14 @@ export function ChatProfileHeader({
           </Button>
         )}
       </div>
+      <ConfirmModal
+        open={confirmBlock}
+        onClose={() => setConfirmBlock(false)}
+        title={`Block ${peer?.name ?? "this person"}?`}
+        message="They won't be able to message you, and you won't see their messages. You can unblock them here later."
+        confirmLabel="Block"
+        onConfirm={toggleBlock}
+      />
     </div>
   );
 }

components/chat/group-members-tab.tsx

@@ -14,6 +14,7 @@ import { toast } from "sonner";
 import { UserAvatar } from "@/components/ui/user-avatar";
 import { Button } from "@/components/ui/button";
 import { AddMembersDialog } from "@/components/chat/add-members-dialog";
+import { ConfirmModal } from "@/components/ui/confirm-modal";
 import { chat, isGroupAdmin, type ConversationDetail } from "@/lib/chat";
 
 const ROLE_LABEL: Record<string, string> = {
@@ -34,6 +35,9 @@ export function GroupMembersTab({
   onChanged: () => void;
 }) {
   const [busy, setBusy] = useState<string | null>(null);
+  // The member being removed. Non-null asks first.
+  const [confirmRemove, setConfirmRemove] =
+    useState<ConversationDetail["participants"][number] | null>(null);
   const [adding, setAdding] = useState(false);
   const iAmAdmin = isGroupAdmin(detail.my_role);
   const iAmOwner = detail.my_role === "owner";
@@ -132,14 +136,8 @@ export function GroupMembersTab({
                   type="button"
                   disabled={busy === m.handle}
                   aria-label={`Remove ${m.name}`}
-                  onClick={() => {
-                    if (!window.confirm(`Remove ${m.name} from the group?`)) return;
-                    void act(
-                      m.handle,
-                      () => chat.removeMember(conversationId, m.handle),
-                      `${m.name} was removed`,
-                    );
-                  }}
+                  // Ask first — the modal calls act() on confirm.
+                  onClick={() => setConfirmRemove(m)}
                   className="shrink-0 rounded-md p-1.5 text-destructive hover:opacity-80 disabled:opacity-40"
                 >
                   <UserMinus className="size-4" />
@@ -158,6 +156,21 @@ export function GroupMembersTab({
           onAdded={onChanged}
         />
       )}
+      <ConfirmModal
+        open={confirmRemove !== null}
+        onClose={() => setConfirmRemove(null)}
+        title={`Remove ${confirmRemove?.name ?? "this member"}?`}
+        message="They'll lose access to the conversation and its history from here on."
+        confirmLabel="Remove"
+        onConfirm={async () => {
+          if (!confirmRemove) return;
+          await act(
+            confirmRemove.handle,
+            () => chat.removeMember(conversationId, confirmRemove.handle),
+            `${confirmRemove.name} was removed`,
+          );
+        }}
+      />
     </div>
   );
 }

components/chat/group-settings-tab.tsx

@@ -13,6 +13,7 @@ import { toast } from "sonner";
 import { useRouter } from "next/navigation";
 import { Button } from "@/components/ui/button";
 import { UserAvatar } from "@/components/ui/user-avatar";
+import { ConfirmModal } from "@/components/ui/confirm-modal";
 import { compressImage } from "@/lib/compress-image";
 import {
   chat,
@@ -38,6 +39,7 @@ export function GroupSettingsTab({
   const router = useRouter();
   const [title, setTitle] = useState(detail.title ?? "");
   const [busy, setBusy] = useState(false);
+  const [confirmLeave, setConfirmLeave] = useState(false);
   const [uploading, setUploading] = useState(false);
   const fileRef = useRef<HTMLInputElement>(null);
   const iAmAdmin = isGroupAdmin(detail.my_role);
@@ -96,15 +98,6 @@ export function GroupSettingsTab({
   };
 
   const leave = async () => {
-    if (
-      !window.confirm(
-        detail.my_role === "owner"
-          ? "Leave this group? Another admin will become the owner."
-          : "Leave this group?",
-      )
-    ) {
-      return;
-    }
     setBusy(true);
     try {
       await chat.removeMember(conversationId, selfHandle);
@@ -219,7 +212,7 @@ export function GroupSettingsTab({
           variant="destructive"
           size="sm"
           disabled={busy}
-          onClick={leave}
+          onClick={() => setConfirmLeave(true)}
         >
           <LogOut className="size-4" /> Leave group
         </Button>
@@ -230,6 +223,18 @@ export function GroupSettingsTab({
           </p>
         )}
       </section>
+      <ConfirmModal
+        open={confirmLeave}
+        onClose={() => setConfirmLeave(false)}
+        title="Leave this group?"
+        message={
+          detail.my_role === "owner"
+            ? "You own this group. The longest-serving admin becomes the owner in your place."
+            : "You'll stop receiving messages from this conversation."
+        }
+        confirmLabel="Leave"
+        onConfirm={leave}
+      />
     </div>
   );
 }

components/chat/media-grid.tsx

@@ -37,7 +37,10 @@ export function MediaGrid({
         onClick={() => onOpen(0)}
         className="block overflow-hidden rounded-lg"
       >
-        <Tile item={items[0]} className="max-h-72 w-auto" />
+        <Tile
+          item={items[0]}
+          className="max-h-64 w-auto sm:max-h-52 sm:max-w-52"
+        />
       </button>
     );
   }
@@ -46,7 +49,7 @@ export function MediaGrid({
     // Two columns throughout: two items make a row, three or four make the
     // 2×2. A three-item grid deliberately leaves the fourth cell empty rather
     // than stretching one tile — an uneven crop reads worse than a gap.
-    <div className="grid w-56 grid-cols-2 gap-0.5 overflow-hidden rounded-lg sm:w-64">
+    <div className="grid w-56 grid-cols-2 gap-0.5 overflow-hidden rounded-lg sm:w-52">
       {visible.map((item, i) => {
         const isLast = i === visible.length - 1;
         return (

components/chat/media-lightbox.tsx

@@ -7,9 +7,16 @@
  * comes free on touch, the scrollbar reflects position, and the browser handles
  * momentum. Arrow keys and the on-screen buttons scroll to a slide rather than
  * setting state, so every input path drives the same mechanism.
+ *
+ * Portalled to <body>, and that is load-bearing rather than tidiness: every
+ * bubble sits inside MessageGestures, which sets a transform for swipe-to-reply
+ * — and a transformed ancestor becomes the containing block for `position:
+ * fixed`. Rendered in place, `inset-0` would resolve against the bubble, and
+ * the message list's overflow would then clip it.
  */
 
 import { useCallback, useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
 import { ChevronLeft, ChevronRight, Download, Loader2, X } from "lucide-react";
 import { toast } from "sonner";
 import { attachmentUrl, type Attachment } from "@/lib/chat";
@@ -53,6 +60,16 @@ export function MediaLightbox({
     return () => window.removeEventListener("keydown", onKey);
   }, [index, items.length, onClose, scrollTo]);
 
+  // A full-screen viewer over a scrollable thread: without this the thread
+  // scrolls behind the image once the carousel reaches its own edge.
+  useEffect(() => {
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = prev;
+    };
+  }, []);
+
   const current = items[index];
 
   /**
@@ -85,8 +102,10 @@ export function MediaLightbox({
     }
   };
 
-  return (
-    <div className="fixed inset-0 z-50 flex flex-col bg-black/95">
+  if (typeof document === "undefined") return null;
+
+  return createPortal(
+    <div className="fixed inset-0 z-[100] flex flex-col bg-black/95">
       <div className="flex items-center justify-between gap-2 px-3 py-2 text-white">
         <button
           type="button"
@@ -167,7 +186,8 @@ export function MediaLightbox({
           </>
         )}
       </div>
-    </div>
+    </div>,
+    document.body,
   );
 }
 

components/chat/message-gestures.tsx

@@ -166,7 +166,7 @@ export function MessageGestures({
       // Full width so the whole row is draggable — WhatsApp lets you start the
       // gesture anywhere on the line, including the empty space opposite the
       // bubble. The bubble caps its own width inside this.
-      className="relative w-full"
+      className="relative w-full select-none [-webkit-touch-callout:none]"
       onPointerDown={onPointerDown}
       onPointerMove={onPointerMove}
       onPointerUp={onPointerUp}

components/chat/message-group.tsx

@@ -54,6 +54,22 @@ function isStickerOnly(m: ChatMessage): boolean {
   return !m.body && atts.length > 0 && atts.every((a) => a.kind === "sticker");
 }
 
+/** True when a message carries photos or video. */
+function carriesMedia(m: ChatMessage): boolean {
+  return (m.attachments ?? []).some(
+    (a) => a.kind === "image" || a.kind === "video",
+  );
+}
+
+/**
+ * True when a message's content brings its own frame — a shared post card,
+ * stickers, or media. All three are images with their own edges, and a
+ * coloured bubble around them reads as a second frame.
+ */
+function rendersBare(m: ChatMessage): boolean {
+  return sharesAnEntity(m) || isStickerOnly(m) || carriesMedia(m);
+}
+
 /** Distinct emoji shown before the rest collapse into "+N". */
 const MAX_TRAIL_EMOJI = 4;
 
@@ -229,7 +245,7 @@ export function MessageGroup({
                   // own border, rounding and background, so the bubble drops
                   // its chrome rather than drawing a second frame around it.
                   // Any caption gets the padding back on its own line below.
-                  sharesAnEntity(m) || isStickerOnly(m)
+                  rendersBare(m)
                     ? "overflow-hidden bg-transparent"
                     : cn(
                         "px-3 py-2",
@@ -264,11 +280,16 @@ export function MessageGroup({
                       <span
                         className={cn(
                           "block",
-                          // The bubble gave up its padding for the card, so a
-                          // caption supplies its own.
-                          sharesAnEntity(m)
-                            ? "rounded-b-lg border border-t-0 border-border px-3 py-2"
-                            : undefined,
+                          // The bubble gave up its padding and colour, so a
+                          // caption carries its own — otherwise it would sit
+                          // as bare text on the thread background.
+                          rendersBare(m) &&
+                            cn(
+                              "mt-0.5 rounded-lg px-3 py-2",
+                              mine
+                                ? "bg-primary text-primary-foreground dark:text-white"
+                                : "bg-muted text-foreground",
+                            ),
                         )}
                       >
                         <MessageText body={m.body} entities={m.entities} />
@@ -316,6 +337,15 @@ export function MessageGroup({
             </div>
 
             {m.reactions?.length > 0 && (
+              // Aligned like the bubble it belongs to. The gesture wrapper is
+              // full-width, so without this the trail sits at the left edge
+              // while your own bubble is over on the right.
+              <div
+                className={cn(
+                  "flex w-full",
+                  mine ? "justify-end" : "justify-start",
+                )}
+              >
                 <button
                   type="button"
                   // ONE control, not one per emoji. Two different jobs depending
@@ -331,7 +361,7 @@ export function MessageGroup({
                   }
                   className={cn(
                     "-mt-1 inline-flex items-center gap-0.5 rounded-full border bg-background px-1.5 py-0.5 text-xs",
-                  mine ? "self-end mr-1" : "self-start ml-1",
+                    mine ? "mr-1" : "ml-1",
                     m.reactions.some((r) => r.mine)
                       ? "border-primary/40 bg-primary/10"
                       : "border-border",
@@ -353,6 +383,7 @@ export function MessageGroup({
                     </span>
                   )}
                 </button>
+              </div>
             )}
           </MessageGestures>
         ))}

components/chat/message-menu.tsx

@@ -96,7 +96,7 @@ export function MessageMenu({
         // min-w-56 rather than something tighter: "Delete for everyone" is the
         // longest label and, with its icon and padding, was wrapping or sitting
         // flush against the edge at a narrower width.
-        className="fixed z-50 min-w-56 overflow-hidden rounded-xl border border-border bg-background pb-1 shadow-lg"
+        className="fixed z-50 min-w-56 select-none overflow-hidden rounded-xl border border-border bg-background pb-1 shadow-lg"
       >
         {/* Reactions lead: they are the most common thing to want from a
             long press, and putting them in this menu keeps one gesture

components/chat/reaction-row.tsx

@@ -4,20 +4,33 @@
  * The emoji row at the top of a message's long-press menu.
  *
  * Five quick reactions plus a "+" that opens the full set — a drawer on
- * mobile, a modal on desktop, reusing ResponsiveDialog so it behaves like
- * every other chat surface.
+ * mobile, a popover anchored to the "+" on desktop. A modal would take over
+ * the screen and hide the message being reacted to, which is the one thing
+ * that needs to stay visible while choosing.
  *
  * It sits inside the context menu rather than being its own popover: long
  * press is one gesture, and two surfaces competing for it would mean neither
  * felt reliable.
  */
 
-import { useState } from "react";
+import { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
 import { Plus } from "lucide-react";
 import { EMOJI_GROUPS } from "@/components/ui/emoji-picker";
-import { ResponsiveDialog } from "@/components/chat/responsive-dialog";
+import { useMediaQuery } from "@/components/selection-toolbar/shared";
+import {
+  Drawer,
+  DrawerContent,
+  DrawerDescription,
+  DrawerHeader,
+  DrawerTitle,
+} from "@/components/ui/drawer";
 import { cn } from "@/lib/utils";
 
+const POPOVER_W = 320;
+const POPOVER_H = 320;
+const EDGE_PAD = 8;
+
 /** What a double-tap sends. Matches the server's own default. */
 export const HEART_EMOJI = "❤️";
 
@@ -33,7 +46,12 @@ export function ReactionRow({
   /** Picking the current emoji again clears it — the caller decides. */
   onPick: (emoji: string) => void;
 }) {
-  const [browsing, setBrowsing] = useState(false);
+  // Non-null both opens the full set and positions it: the popover hangs off
+  // the "+" button's rect, which only exists at click time.
+  const [browsing, setBrowsing] = useState<{ x: number; y: number } | null>(
+    null,
+  );
+  const close = () => setBrowsing(null);
 
   return (
     <>
@@ -55,7 +73,11 @@ export function ReactionRow({
         ))}
         <button
           type="button"
-          onClick={() => setBrowsing(true)}
+          onClick={(e) => {
+            const r = e.currentTarget.getBoundingClientRect();
+            // Top-centre of the "+": the popover opens upward from here.
+            setBrowsing({ x: r.left + r.width / 2, y: r.top });
+          }}
           aria-label="More reactions"
           className="inline-flex size-9 items-center justify-center rounded-full text-muted-foreground hover:bg-muted hover:text-foreground"
         >
@@ -63,13 +85,34 @@ export function ReactionRow({
         </button>
       </div>
 
-      {browsing && (
-        <ResponsiveDialog
-          title="Pick a reaction"
-          description="Choose any emoji to react with."
-          onClose={() => setBrowsing(false)}
-        >
-          <div className="space-y-4 p-4">
+      {browsing && <FullSet anchor={browsing} onPick={onPick} onClose={close} />}
+    </>
+  );
+}
+
+/** The whole emoji set: popover on desktop, drawer on touch. */
+function FullSet({
+  anchor,
+  onPick,
+  onClose,
+}: {
+  anchor: { x: number; y: number };
+  onPick: (emoji: string) => void;
+  onClose: () => void;
+}) {
+  const isMobile = useMediaQuery("(max-width: 767px)");
+
+  // Desktop only: Escape closes. The drawer handles its own dismissal, and a
+  // popover deliberately doesn't lock scrolling behind it.
+  useEffect(() => {
+    if (isMobile) return;
+    const onKey = (e: KeyboardEvent) => e.key === "Escape" && onClose();
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [isMobile, onClose]);
+
+  const grid = (
+    <div className="space-y-4 p-3">
       {EMOJI_GROUPS.map((group) => (
         <section key={group.label}>
           <h3 className="mb-2 text-xs font-medium uppercase tracking-wide text-muted-foreground">
@@ -81,7 +124,7 @@ export function ReactionRow({
                 key={emoji}
                 type="button"
                 onClick={() => {
-                        setBrowsing(false);
+                  onClose();
                   onPick(emoji);
                 }}
                 aria-label={`React ${emoji}`}
@@ -94,8 +137,66 @@ export function ReactionRow({
         </section>
       ))}
     </div>
-        </ResponsiveDialog>
-      )}
-    </>
+  );
+
+  if (isMobile) {
+    return (
+      <Drawer open onOpenChange={(o) => !o && onClose()}>
+        <DrawerContent className="bg-card">
+          <DrawerHeader className="text-left">
+            <DrawerTitle>Pick a reaction</DrawerTitle>
+            <DrawerDescription>
+              Choose any emoji to react with.
+            </DrawerDescription>
+          </DrawerHeader>
+          <div className="max-h-[45vh] overflow-y-auto overscroll-contain">
+            {grid}
+          </div>
+        </DrawerContent>
+      </Drawer>
+    );
+  }
+
+  if (typeof document === "undefined") return null;
+
+  // Opens upward: the "+" sits in a menu raised over a message, so there is
+  // usually more room above it than below. Flips down only if that would clip.
+  let left = anchor.x - POPOVER_W / 2;
+  if (left + POPOVER_W > window.innerWidth - EDGE_PAD) {
+    left = window.innerWidth - POPOVER_W - EDGE_PAD;
+  }
+  if (left < EDGE_PAD) left = EDGE_PAD;
+
+  // Room above the button, less a small gap and the viewport edge.
+  const roomAbove = anchor.y - 8 - EDGE_PAD;
+  // Open upward when there is any reasonable room, which by the composer
+  // there almost always is.
+  const openUp = roomAbove > 160;
+  // Anchored by whichever edge faces the button, so the panel hugs it
+  // regardless of how tall its contents actually are. Positioning by top
+  // minus a MAX height floats it away whenever the content is shorter.
+  const vertical = openUp
+    ? { bottom: window.innerHeight - anchor.y + 8 }
+    : { top: anchor.y + 8 };
+  // Never taller than the space it has.
+  const maxH = Math.min(
+    POPOVER_H,
+    openUp ? roomAbove : window.innerHeight - anchor.y - 8 - EDGE_PAD,
+  );
+
+  return createPortal(
+    <>
+      {/* Catches the outside click. Transparent — a popover dims nothing. */}
+      <div className="fixed inset-0 z-[60]" onClick={onClose} aria-hidden />
+      <div
+        role="dialog"
+        aria-label="Pick a reaction"
+        style={{ left, ...vertical, width: POPOVER_W, maxHeight: maxH }}
+        className="fixed z-[61] flex flex-col overflow-hidden rounded-xl border border-border bg-card shadow-lg"
+      >
+        <div className="flex-1 overflow-y-auto">{grid}</div>
+      </div>
+    </>,
+    document.body,
   );
 }

components/chat/shared-post-card.tsx

@@ -19,7 +19,7 @@ export function SharedPostCard({ attachment }: { attachment: Attachment }) {
 
   if (!post || attachment.entity_unavailable) {
     return (
-      <div className="flex items-center gap-2 rounded-lg border border-border bg-muted/30 px-3 py-2.5">
+      <div className="flex w-full items-center gap-2 rounded-lg border border-border bg-muted/30 px-3 py-2.5 sm:max-w-64">
         <ImageOff className="size-4 shrink-0 text-muted-foreground" aria-hidden />
         <span className="text-sm text-muted-foreground">
           This post is no longer available
@@ -31,7 +31,11 @@ export function SharedPostCard({ attachment }: { attachment: Attachment }) {
   return (
     <Link
       href={`/u/${encodeURIComponent(post.author_handle)}/posts#post-${post.id}`}
-      className="block overflow-hidden rounded-lg border border-border bg-card transition-colors hover:bg-muted/40"
+      // Capped on wide screens. The bubble allows 78% of the column, which on
+      // a phone is a sensible ~265px but on desktop is over 500px — and with
+      // a square image that makes a shared post taller than the viewport.
+      // Mobile keeps the bubble's own width; only sm+ needs the ceiling.
+      className="block w-full overflow-hidden rounded-lg border border-border bg-card transition-colors hover:bg-muted/40 sm:max-w-64"
     >
       <span className="flex items-center gap-2 px-3 py-2">
         <UserAvatar

components/chat/sticker-grid.tsx

@@ -1,7 +1,13 @@
 "use client";
 
 /**
- * Stickers on a message: a 2-column grid, rendered without a chat bubble.
+ * Stickers on a message, rendered without a chat bubble.
+ *
+ * Laid out as rows of at most two, NOT a fixed 2-column grid: a grid reserves
+ * the second cell whether or not anything fills it, so a single sticker sat
+ * beside a gap the width of another sticker. Rows size themselves — a lone
+ * sticker takes the row and is drawn larger, a pair shares it and both shrink.
+ * An odd count therefore ends on one big sticker rather than a hole.
  *
  * Unlike the media grid, this never collapses into "+N more" — every sticker
  * sent is drawn. They are small and deliberately playful, and hiding some
@@ -16,6 +22,10 @@ import { useState } from "react";
 import Image from "next/image";
 import { toast } from "sonner";
 import { chat, type Attachment } from "@/lib/chat";
+import { cn } from "@/lib/utils";
+
+/** At most two per row, as WhatsApp and Telegram do. */
+const STICKERS_PER_ROW = 2;
 
 export function StickerGrid({
   conversationId,
@@ -47,9 +57,22 @@ export function StickerGrid({
     }
   };
 
+  // Chunk into rows of at most two. Doing this in JS rather than CSS is what
+  // lets a row know how many it holds, which is what sets the size.
+  const rows: Attachment[][] = [];
+  for (let i = 0; i < stickers.length; i += STICKERS_PER_ROW) {
+    rows.push(stickers.slice(i, i + STICKERS_PER_ROW));
+  }
+
+  return (
+    // w-fit so the block hugs its rows: any fixed width would reintroduce the
+    // empty space this layout exists to remove.
+    <div className="flex w-fit flex-col gap-1">
+      {rows.map((row, i) => (
+        <div key={i} className="flex gap-1">
+          {row.map((a) => {
+            const alone = row.length === 1;
             return (
-    <div className="grid w-fit grid-cols-2 gap-1">
-      {stickers.map((a) => (
               <button
                 key={a.id}
                 type="button"
@@ -59,20 +82,30 @@ export function StickerGrid({
                   e.preventDefault();
                   void save(a);
                 }}
-          title={mine ? (a.title ?? "") : `${a.title ?? "Sticker"} — hold to save`}
+                title={
+                  mine
+                    ? (a.title ?? "")
+                    : `${a.title ?? "Sticker"} — hold to save`
+                }
                 aria-label={a.title ?? "Sticker"}
-          className="relative size-20 disabled:cursor-default sm:size-24"
+                className={cn(
+                  "relative disabled:cursor-default",
+                  alone ? "size-32 sm:size-36" : "size-24 sm:size-28",
+                )}
               >
                 {a.image_url && (
                   <Image
                     src={a.image_url}
                     alt={a.title ?? ""}
                     fill
-              sizes="96px"
+                    sizes={alone ? "144px" : "112px"}
                     className="object-contain"
                   />
                 )}
               </button>
+            );
+          })}
+        </div>
       ))}
     </div>
   );

components/chat/sticker-picker.tsx

@@ -1,28 +1,54 @@
 "use client";
 
 /**
- * The sticker drawer, opened from the composer.
+ * The sticker picker: a popover anchored to the composer's sticker button on
+ * desktop, a bottom drawer on mobile.
+ *
+ * A popover rather than a modal on desktop because picking a sticker is a
+ * quick aside from typing — a modal takes over the screen and hides the
+ * thread you're replying to. On touch, where there is nothing to anchor to
+ * and the keyboard is already occupying the lower half, the drawer is the
+ * right shape.
  *
  * The collection is whatever the server says it is — rewards earned through
  * sādhana plus stickers saved from a chat — so a sticker you were sent
- * appears here the moment you keep it, with no client-side bookkeeping.
+ * appears the moment you keep it, with no client-side bookkeeping.
  *
  * Empty is a real state worth explaining: stickers are earned, so someone
  * with none needs to know how to get one rather than seeing a blank sheet.
  */
 
 import { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
 import Image from "next/image";
-import { ResponsiveDialog } from "@/components/chat/responsive-dialog";
+import { useMediaQuery } from "@/components/selection-toolbar/shared";
+import {
+  Drawer,
+  DrawerContent,
+  DrawerDescription,
+  DrawerHeader,
+  DrawerTitle,
+} from "@/components/ui/drawer";
 import { chat, type Sticker } from "@/lib/chat";
 
+/** Where the popover hangs from — the sticker button's viewport rect. */
+export type StickerAnchor = { x: number; y: number };
+
+const POPOVER_W = 320;
+const POPOVER_H = 300;
+const EDGE_PAD = 8;
+
 export function StickerPicker({
+  anchor,
   onPick,
   onClose,
 }: {
+  /** Ignored on mobile, which uses a drawer. */
+  anchor: StickerAnchor | null;
   onPick: (sticker: Sticker) => void;
   onClose: () => void;
 }) {
+  const isMobile = useMediaQuery("(max-width: 767px)");
   const [stickers, setStickers] = useState<Sticker[] | null>(null);
 
   useEffect(() => {
@@ -40,21 +66,26 @@ export function StickerPicker({
     };
   }, []);
 
-  return (
-    <ResponsiveDialog
-      title="Stickers"
-      description="Earned through sādhana, or saved from a chat."
-      onClose={onClose}
-    >
+  // Desktop only: Escape closes. The drawer handles its own dismissal, and no
+  // scroll lock here — a popover shouldn't freeze the thread behind it.
+  useEffect(() => {
+    if (isMobile) return;
+    const onKey = (e: KeyboardEvent) => e.key === "Escape" && onClose();
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [isMobile, onClose]);
+
+  const grid = (
+    <>
       {stickers === null ? (
         <p className="p-4 text-sm text-muted-foreground">Loading…</p>
       ) : stickers.length === 0 ? (
         <p className="p-4 text-sm text-muted-foreground">
-          No stickers yet. Keep your sādhana streak — a sacred reward arrives
-          every 7 days — or save one someone sends you.
+          No stickers yet. Earn through your sādhana streak, or save one when
+          someone sends you.
         </p>
       ) : (
-        <div className="grid grid-cols-4 gap-2 p-4 sm:grid-cols-5">
+        <div className="grid grid-cols-4 gap-2 p-3 sm:grid-cols-5">
           {stickers.map((s) => (
             <button
               key={s.key}
@@ -78,6 +109,74 @@ export function StickerPicker({
           ))}
         </div>
       )}
-    </ResponsiveDialog>
+    </>
+  );
+
+  if (isMobile) {
+    return (
+      <Drawer open onOpenChange={(o) => !o && onClose()}>
+        <DrawerContent className="bg-card">
+          <DrawerHeader className="text-left">
+            <DrawerTitle>Stickers</DrawerTitle>
+            <DrawerDescription>
+              Earned through sādhana, or saved from a chat.
+            </DrawerDescription>
+          </DrawerHeader>
+          <div className="max-h-[45vh] overflow-y-auto overscroll-contain">
+            {grid}
+          </div>
+        </DrawerContent>
+      </Drawer>
+    );
+  }
+
+  if (typeof document === "undefined" || !anchor) return null;
+
+  // Opens UPWARD by default: the composer sits at the bottom of the viewport,
+  // so there is rarely room below it. Flips down only if the anchor is high
+  // enough that upward would clip.
+  let left = anchor.x - POPOVER_W / 2;
+  if (left + POPOVER_W > window.innerWidth - EDGE_PAD) {
+    left = window.innerWidth - POPOVER_W - EDGE_PAD;
+  }
+  if (left < EDGE_PAD) left = EDGE_PAD;
+
+  // Room above the button, less a small gap and the viewport edge.
+  const roomAbove = anchor.y - 8 - EDGE_PAD;
+  // Open upward when there is any reasonable room, which by the composer
+  // there almost always is.
+  const openUp = roomAbove > 160;
+  // Anchored by whichever edge faces the button, so the panel hugs it
+  // regardless of how tall its contents actually are. Positioning by top
+  // minus a MAX height floats it away whenever the content is shorter.
+  const vertical = openUp
+    ? { bottom: window.innerHeight - anchor.y + 8 }
+    : { top: anchor.y + 8 };
+  // Never taller than the space it has.
+  const maxH = Math.min(
+    POPOVER_H,
+    openUp ? roomAbove : window.innerHeight - anchor.y - 8 - EDGE_PAD,
+  );
+
+  return createPortal(
+    <>
+      {/* Catches the outside click. Transparent — a popover dims nothing. */}
+      <div className="fixed inset-0 z-50" onClick={onClose} aria-hidden />
+      <div
+        role="dialog"
+        aria-label="Stickers"
+        style={{ left, ...vertical, width: POPOVER_W, maxHeight: maxH }}
+        className="fixed z-[51] flex flex-col overflow-hidden rounded-xl border border-border bg-card shadow-lg"
+      >
+        <div className="border-b border-border px-3 py-2">
+          <p className="text-xs font-medium text-foreground">Stickers</p>
+          <p className="text-[11px] text-muted-foreground">
+            Earned through sādhana, or saved from a chat.
+          </p>
+        </div>
+        <div className="flex-1 overflow-y-auto">{grid}</div>
+      </div>
+    </>,
+    document.body,
   );
 }

components/knowledgebase-index.tsx

@@ -5,7 +5,8 @@
  * library.
  *
  * Two sections, top to bottom:
- *   1. Start here — three primary entry points (Books, Letters, Lectures)
+ *   1. Start here — a Quizzes tile, then three primary entry points
+ *                   (Books, Letters, Lectures), all one width
  *                   rendered as full-width feature tiles with longer copy.
  *   2. Explore    — a six-card asymmetric grid for the remaining sections.
  *
@@ -26,6 +27,7 @@ import {
   PenLine,
   Users,
 } from "lucide-react";
+import { QuizzesCTA } from "@/components/quiz/quizzes-cta";
 
 type Feature = {
   href: string;
@@ -112,7 +114,11 @@ export function KnowledgebaseIndex() {
     <div>
       <section className="py-4">
         <SectionHeading eyebrow="Start here" title="Three doors in" />
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-4 sm:gap-5">
+        {/* One grid so all four share a width. Quizzes lead: something to
+            do, ahead of the three ways in to read. Absent until one is
+            published, leaving the original three across. */}
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-none lg:grid-flow-col lg:auto-cols-fr gap-4 sm:gap-5">
+          <QuizzesCTA variant="tile" />
           {FEATURED.map((f) => (
             <FeaturedTile key={f.href} feature={f} />
           ))}
@@ -145,7 +151,7 @@ function FeaturedTile({ feature }: { feature: Feature }) {
         <ArrowUpRight className="size-4 text-muted-foreground/60 group-hover:text-foreground transition-colors" />
       </div>
 
-      <h3 className="mt-5 font-[family-name:var(--font-title)] font-semibold text-2xl sm:text-[1.6rem] leading-tight text-foreground">
+      <h3 className="mt-5 font-[family-name:var(--font-title)] font-semibold text-2xl sm:text-[1.6rem] lg:text-[1.35rem] leading-tight text-foreground">
         {feature.label}
       </h3>
 

components/layout/copy-page-link-button.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+/**
+ * "Copy link to this page" — copies the full, unshortened absolute URL of
+ * the active page. Deliberately bypasses useCopyFeedback (which rewrites
+ * `?hl=` highlight URLs into short /share links); here we want the literal
+ * page URL. The write is synchronous within the click so a single tap works.
+ *
+ * Shared by the PageHeader controls row and pages with their own header
+ * (e.g. a quiz).
+ */
+
+import { useEffect, useRef, useState } from "react";
+import { Check, Link2 } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+export function CopyPageLinkButton({
+  label = "Copy link to this page",
+  className,
+}: {
+  label?: string;
+  className?: string;
+}) {
+  const [copied, setCopied] = useState(false);
+  const copyTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  useEffect(() => {
+    return () => {
+      if (copyTimerRef.current) clearTimeout(copyTimerRef.current);
+    };
+  }, []);
+
+  async function copyPageLink() {
+    const url = window.location.href;
+    try {
+      await navigator.clipboard.writeText(url);
+    } catch {
+      // Fallback for browsers without the async clipboard API.
+      const ta = document.createElement("textarea");
+      ta.value = url;
+      ta.style.position = "fixed";
+      ta.style.opacity = "0";
+      document.body.appendChild(ta);
+      ta.focus();
+      ta.select();
+      try {
+        document.execCommand("copy");
+      } catch {
+        // silent fail
+      }
+      document.body.removeChild(ta);
+    }
+    setCopied(true);
+    if (copyTimerRef.current) clearTimeout(copyTimerRef.current);
+    copyTimerRef.current = setTimeout(() => setCopied(false), 1500);
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={copyPageLink}
+      aria-label={label}
+      title={label}
+      className={cn(
+        "inline-flex items-center gap-1.5 rounded-md border border-border px-2.5 py-1 text-xs transition-colors",
+        copied
+          ? "text-foreground border-primary/40"
+          : "text-muted-foreground hover:text-foreground hover:bg-muted",
+        className,
+      )}
+    >
+      {copied ? (
+        <Check className="size-3.5 text-primary" />
+      ) : (
+        <Link2 className="size-3.5" />
+      )}
+      {copied ? "Link copied" : label}
+    </button>
+  );
+}

components/layout/page-header.tsx

@@ -25,9 +25,10 @@
 
 import { useEffect, useRef, useState } from "react";
 import { useRouter, usePathname } from "next/navigation";
-import { Check, Link2 } from "lucide-react";
 import { cn } from "@/lib/utils";
+import { CopyPageLinkButton } from "@/components/layout/copy-page-link-button";
 import { SaveOfflineButton } from "@/components/layout/save-offline-button";
+import { QuizButton } from "@/components/quiz/quiz-button";
 import type { OfflineDescriptor } from "@/lib/offline";
 
 const SEARCH_RETURN_KEY = "spsays_from_search";
@@ -71,6 +72,7 @@ export function PageHeader({
   bare = false,
   sticky = false,
   offline,
+  quiz = true,
 }: {
   children: React.ReactNode;
   /** Drop the bordered chrome — useful for pages that want flush title text. */
@@ -89,6 +91,13 @@ export function PageHeader({
    * visible gap.
    */
   sticky?: boolean;
+  /**
+   * Show this page's quiz button (if it has a published quiz) under the
+   * title. On by default for content pages; a page that places the button
+   * itself — the transcript, beside its audio player — turns this off so it
+   * never appears twice.
+   */
+  quiz?: boolean;
   className?: string;
 }) {
   const router = useRouter();
@@ -144,43 +153,6 @@ export function PageHeader({
     return () => window.removeEventListener("scroll", onScroll);
   }, [sticky]);
 
-  // "Copy link to this page" — copies the full, unshortened absolute URL of
-  // the active page. Deliberately bypasses useCopyFeedback (which rewrites
-  // `?hl=` highlight URLs into short /share links); here we want the literal
-  // page URL. The write is synchronous within the click so a single tap works.
-  const [copied, setCopied] = useState(false);
-  const copyTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  useEffect(() => {
-    return () => {
-      if (copyTimerRef.current) clearTimeout(copyTimerRef.current);
-    };
-  }, []);
-
-  async function copyPageLink() {
-    const url = window.location.href;
-    try {
-      await navigator.clipboard.writeText(url);
-    } catch {
-      // Fallback for browsers without the async clipboard API.
-      const ta = document.createElement("textarea");
-      ta.value = url;
-      ta.style.position = "fixed";
-      ta.style.opacity = "0";
-      document.body.appendChild(ta);
-      ta.focus();
-      ta.select();
-      try {
-        document.execCommand("copy");
-      } catch {
-        // silent fail
-      }
-      document.body.removeChild(ta);
-    }
-    setCopied(true);
-    if (copyTimerRef.current) clearTimeout(copyTimerRef.current);
-    copyTimerRef.current = setTimeout(() => setCopied(false), 1500);
-  }
-
   return (
     <header
       className={cn(
@@ -216,25 +188,10 @@ export function PageHeader({
 
         {/* Page-level controls, anchored at the header's bottom. */}
         <div className="mt-3 flex flex-wrap items-center gap-2">
-          <button
-            type="button"
-            onClick={copyPageLink}
-            aria-label="Copy link to this page"
-            title="Copy link to this page"
-            className={cn(
-              "inline-flex items-center gap-1.5 rounded-md border border-border px-2.5 py-1 text-xs transition-colors",
-              copied
-                ? "text-foreground border-primary/40"
-                : "text-muted-foreground hover:text-foreground hover:bg-muted",
-            )}
-          >
-            {copied ? (
-              <Check className="size-3.5 text-primary" />
-            ) : (
-              <Link2 className="size-3.5" />
-            )}
-            {copied ? "Link copied" : "Copy link to this page"}
-          </button>
+          {/* First, so it reads as belonging to the title above it. Renders
+              nothing on pages without a published quiz. */}
+          {quiz && isContentPath(pathname) ? <QuizButton path={pathname} /> : null}
+          <CopyPageLinkButton />
           {resolvedOffline ? (
             <SaveOfflineButton descriptor={resolvedOffline} />
           ) : null}

components/notifications/notification-matrix.tsx

@@ -53,11 +53,11 @@ const EVENTS: {
   {
     key: "messages",
     label: "Messages",
-    description: "New direct messages and group chats.",
-    // Push only. In-app delivery for chat is the inbox itself — a message
-    // highlights its row rather than entering the notification tray — and
-    // there is no such thing as an emailed chat message.
-    channels: ["push"],
+    description:
+      "New messages. Email is only ever sent when someone starts a conversation with you.",
+    // No in-app: chat's in-app delivery is the inbox itself, where a message
+    // highlights its row rather than entering the notification tray.
+    channels: ["email", "push"],
   },
   {
     key: "community",
@@ -139,7 +139,11 @@ export function NotificationMatrix() {
   }
 
   return (
-    <div className="grid grid-cols-[1fr_auto_auto_auto] items-center gap-x-4 gap-y-0 sm:gap-x-6">
+    // Fixed, EQUAL channel columns. With `auto` each one sized to its own
+    // widest content — "In-app" against the 44px toggle, "Push" against the
+    // same toggle — so the three columns came out different widths and
+    // neither the headers nor the switches lined up down the grid.
+    <div className="grid grid-cols-[1fr_repeat(3,3.25rem)] items-center gap-x-2 gap-y-0 sm:grid-cols-[1fr_repeat(3,4rem)] sm:gap-x-4">
       {/* Header row */}
       <span aria-hidden />
       {CHANNELS.map((c) => (

components/quiz/quiz-browser.tsx

@@ -0,0 +1,213 @@
+"use client";
+
+/**
+ * The "All" tab of /quizzes, as a drill-down:
+ *
+ *   All → Books → a book → its quizzes
+ *       → Lectures & Conversations → a year → its quizzes
+ *       → Other quizzes (stand-alone)
+ *
+ * Where you are lives in the URL (?in=books&book=bg, ?in=lectures&year=1972)
+ * so a refresh, Back, or a shared link lands in the same place. Every level
+ * only offers categories that actually hold quizzes; a stale or hand-typed
+ * URL pointing at an empty one falls back to its parent.
+ */
+
+import Link from "next/link";
+import {
+  BookOpen,
+  CalendarDays,
+  ChevronRight,
+  ClipboardCheck,
+  Mic,
+} from "lucide-react";
+import type { QuizCard } from "@/lib/quiz";
+import { groupQuizzes, type QuizGroup } from "@/lib/quiz-groups";
+import { QuizCategoryCard } from "./quiz-category-card";
+import { QuizGrid } from "./quiz-grid";
+
+export type QuizBrowsePath = {
+  in?: string | null;
+  book?: string | null;
+  year?: string | null;
+};
+
+const BOOKS = "books";
+const LECTURES = "lectures";
+const OTHER = "other";
+
+/** /quizzes URL for a browse position (the All tab is the default). */
+export function quizzesHref(p: QuizBrowsePath): string {
+  const qs = new URLSearchParams();
+  if (p.in) qs.set("in", p.in);
+  if (p.book) qs.set("book", p.book);
+  if (p.year) qs.set("year", p.year);
+  const s = qs.toString();
+  return s ? `/quizzes?${s}` : "/quizzes";
+}
+
+export function QuizBrowser({
+  quizzes,
+  path,
+}: {
+  quizzes: QuizCard[];
+  path: QuizBrowsePath;
+}) {
+  const { books, lectures, other } = groupQuizzes(quizzes);
+  const all = (gs: QuizGroup[]) => gs.flatMap((g) => g.quizzes);
+
+  const book =
+    path.in === BOOKS ? books.find((g) => g.key === path.book) : undefined;
+  const year =
+    path.in === LECTURES
+      ? lectures.find((g) => g.key === path.year)
+      : undefined;
+
+  // Books → a book: its quizzes.
+  if (book) {
+    return (
+      <Level crumbs={[["Books", quizzesHref({ in: BOOKS })], [book.label]]}>
+        <QuizGrid quizzes={book.quizzes} />
+      </Level>
+    );
+  }
+  // Lectures → a year: its quizzes.
+  if (year) {
+    return (
+      <Level
+        crumbs={[
+          ["Lectures & Conversations", quizzesHref({ in: LECTURES })],
+          [year.label],
+        ]}
+      >
+        <QuizGrid quizzes={year.quizzes} />
+      </Level>
+    );
+  }
+  // Books: a card per book.
+  if (path.in === BOOKS && books.length > 0) {
+    return (
+      <Level crumbs={[["Books"]]}>
+        <CardGrid>
+          {books.map((g) => (
+            <QuizCategoryCard
+              key={g.key}
+              href={quizzesHref({ in: BOOKS, book: g.key })}
+              label={g.label}
+              quizzes={g.quizzes}
+              icon={<BookOpen className="size-5" />}
+            />
+          ))}
+        </CardGrid>
+      </Level>
+    );
+  }
+  // Lectures: a card per year.
+  if (path.in === LECTURES && lectures.length > 0) {
+    return (
+      <Level crumbs={[["Lectures & Conversations"]]}>
+        <CardGrid>
+          {lectures.map((g) => (
+            <QuizCategoryCard
+              key={g.key}
+              href={quizzesHref({ in: LECTURES, year: g.key })}
+              label={g.label}
+              quizzes={g.quizzes}
+              icon={<CalendarDays className="size-5" />}
+            />
+          ))}
+        </CardGrid>
+      </Level>
+    );
+  }
+  // Stand-alone quizzes.
+  if (path.in === OTHER && other.length > 0) {
+    return (
+      <Level crumbs={[["Other quizzes"]]}>
+        <QuizGrid quizzes={other} />
+      </Level>
+    );
+  }
+
+  // Top level: one card per category that has quizzes.
+  return (
+    <CardGrid>
+      {books.length > 0 && (
+        <QuizCategoryCard
+          href={quizzesHref({ in: BOOKS })}
+          label="Books"
+          quizzes={all(books)}
+          icon={<BookOpen className="size-5" />}
+        />
+      )}
+      {lectures.length > 0 && (
+        <QuizCategoryCard
+          href={quizzesHref({ in: LECTURES })}
+          label="Lectures & Conversations"
+          quizzes={all(lectures)}
+          icon={<Mic className="size-5" />}
+        />
+      )}
+      {other.length > 0 && (
+        <QuizCategoryCard
+          href={quizzesHref({ in: OTHER })}
+          label="Other quizzes"
+          quizzes={other}
+          icon={<ClipboardCheck className="size-5" />}
+        />
+      )}
+    </CardGrid>
+  );
+}
+
+function CardGrid({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 [&>*]:min-w-0">
+      {children}
+    </div>
+  );
+}
+
+/** A level below the top: a breadcrumb back up, then its content. */
+function Level({
+  crumbs,
+  children,
+}: {
+  /** [label, href?] — the last (current) one has no link. */
+  crumbs: [string, string?][];
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="space-y-4">
+      <nav
+        aria-label="Quiz categories"
+        className="flex min-w-0 flex-wrap items-center gap-x-1.5 gap-y-1 text-sm"
+      >
+        <Link
+          href={quizzesHref({})}
+          className="text-muted-foreground hover:text-foreground"
+        >
+          All quizzes
+        </Link>
+        {crumbs.map(([label, href]) => (
+          <span key={label} className="flex min-w-0 items-center gap-1.5">
+            <ChevronRight className="size-3.5 shrink-0 text-muted-foreground" />
+            {href ? (
+              <Link
+                href={href}
+                className="truncate text-muted-foreground hover:text-foreground"
+              >
+                {label}
+              </Link>
+            ) : (
+              <span className="truncate font-medium text-foreground">
+                {label}
+              </span>
+            )}
+          </span>
+        ))}
+      </nav>
+      {children}
+    </div>
+  );
+}

components/quiz/quiz-button.tsx

@@ -0,0 +1,97 @@
+"use client";
+
+/**
+ * The quiz button on a content page.
+ *
+ * Asks the BFF whether this page has a published quiz and renders nothing if
+ * not, so it can sit on every content page without leaving an empty slot.
+ * Quizzes are for signed-in readers only, so signed out it never asks.
+ * Its label tracks progress: Take quiz → Continue quiz → View results.
+ */
+
+import { useEffect, useState } from "react";
+import Link from "next/link";
+import { ClipboardCheck } from "lucide-react";
+import { useAuth } from "@/components/auth/auth-provider";
+import { quiz, quizActionLabel, type QuizCard } from "@/lib/quiz";
+import { cn } from "@/lib/utils";
+
+export function QuizButton({
+  path,
+  size = "sm",
+  className,
+}: {
+  /** The content page's own path, e.g. /books/bg/2. */
+  path: string;
+  /**
+   * "sm" for the page header's controls row; "lg" to sit beside the lecture
+   * page's Play Audio button as an equal — same height, padding, type and
+   * colours.
+   */
+  size?: "sm" | "lg";
+  className?: string;
+}) {
+  const { user } = useAuth();
+  const userId = user?.id;
+  const [card, setCard] = useState<QuizCard | null>(null);
+
+  // Re-asked when the user changes, so progress appears right after sign-in.
+  useEffect(() => {
+    if (!userId) return;
+    let cancelled = false;
+    quiz
+      .forPath(path)
+      .then((c) => {
+        if (!cancelled) setCard(c);
+      })
+      .catch(() => {
+        /* no quiz button is the right failure */
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [path, userId]);
+
+  // A card left over from before sign-out is ignored rather than cleared.
+  if (!card || !user) return null;
+
+  const done = card.my.state === "completed";
+  const lg = size === "lg";
+  return (
+    <Link
+      href={`/quizzes/${card.id}`}
+      title={card.title}
+      className={cn(
+        "inline-flex items-center border transition-colors",
+        lg
+          ? // Mirrors PlayAudioButton's default variant. That has no border,
+            // so 1px less vertical padding keeps the two exactly as tall.
+            "gap-2 rounded-lg px-5 py-[9px] text-sm font-semibold transition-all"
+          : "gap-1.5 rounded-md px-2.5 py-1 text-xs font-medium",
+        done
+          ? "border-border text-muted-foreground hover:bg-muted hover:text-foreground"
+          : // Take / Continue: solid, so a pending quiz stands out.
+            cn(
+              "border-primary bg-primary text-primary-foreground shadow-sm hover:bg-primary/90",
+              // Header pill keeps white text in dark mode; beside Play Audio
+              // it takes Play Audio's own foreground so the pair match.
+              lg ? "hover:shadow-md" : "dark:text-white",
+            ),
+        className,
+      )}
+    >
+      <ClipboardCheck className={lg ? "size-4" : "size-3.5"} />
+      {quizActionLabel(card.my.state)}
+      {card.my.state === "in_progress" && (
+        <span className="tabular-nums opacity-70">
+          {card.my.answered}/{card.my.total}
+        </span>
+      )}
+      {done && card.my.score !== undefined && (
+        <span className="tabular-nums opacity-70">
+          {card.my.score}/{card.my.total}
+        </span>
+      )}
+    </Link>
+  );
+}

components/quiz/quiz-category-card.tsx

@@ -0,0 +1,47 @@
+/**
+ * A clickable category in the quiz browser — Books, a book, Lectures, a
+ * year. Shows how many quizzes it holds and how many are still to take.
+ */
+
+import Link from "next/link";
+import { ChevronRight } from "lucide-react";
+import type { QuizCard } from "@/lib/quiz";
+
+export function QuizCategoryCard({
+  href,
+  label,
+  quizzes,
+  icon,
+}: {
+  href: string;
+  label: string;
+  quizzes: QuizCard[];
+  icon: React.ReactNode;
+}) {
+  const todo = quizzes.filter((q) => q.my.state !== "completed").length;
+  const n = quizzes.length;
+  return (
+    <Link
+      href={href}
+      className="group flex h-full min-w-0 items-center gap-3.5 rounded-2xl border border-border bg-card p-4 transition-colors hover:border-primary/40 hover:bg-muted/30"
+    >
+      <span className="inline-flex size-11 shrink-0 items-center justify-center rounded-xl bg-primary/10 text-primary">
+        {icon}
+      </span>
+      <span className="min-w-0 flex-1">
+        <span
+          title={label}
+          className="line-clamp-2 font-semibold leading-snug text-foreground [overflow-wrap:anywhere]"
+        >
+          {label}
+        </span>
+        <span className="mt-0.5 block text-xs text-muted-foreground">
+          {n} {n === 1 ? "quiz" : "quizzes"}
+          {todo > 0 && todo < n ? ` · ${todo} to do` : ""}
+          {todo === 0 ? " · all finished" : ""}
+        </span>
+      </span>
+      <ChevronRight className="size-5 shrink-0 text-muted-foreground transition-transform group-hover:translate-x-0.5 group-hover:text-foreground" />
+    </Link>
+  );
+}

components/quiz/quiz-grid.tsx

@@ -0,0 +1,19 @@
+import type { QuizCard } from "@/lib/quiz";
+import { QuizListCard } from "./quiz-list-card";
+
+/**
+ * Quiz cards, two across from sm up. minmax(0,1fr) + min-w-0: grid items
+ * otherwise refuse to shrink below their content, so one long word pushes a
+ * card off-screen.
+ */
+export function QuizGrid({ quizzes }: { quizzes: QuizCard[] }) {
+  return (
+    <ul className="grid grid-cols-1 gap-3 sm:grid-cols-2">
+      {quizzes.map((q) => (
+        <li key={q.id} className="min-w-0">
+          <QuizListCard q={q} />
+        </li>
+      ))}
+    </ul>
+  );
+}

components/quiz/quiz-list-card.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+/** One quiz in the /quizzes list: what it's on, its title, and your progress. */
+
+import Link from "next/link";
+import { ClipboardCheck } from "lucide-react";
+import { quizActionLabel, type QuizCard } from "@/lib/quiz";
+import { cn } from "@/lib/utils";
+
+const KIND: Record<QuizCard["target_kind"], string> = {
+  chapter: "Book chapter",
+  lecture: "Lecture",
+  conversation: "Conversation",
+  standalone: "Quiz",
+};
+
+export function QuizListCard({ q }: { q: QuizCard }) {
+  const done = q.my.state === "completed";
+  return (
+    <Link
+      href={`/quizzes/${q.id}`}
+      className="flex h-full min-w-0 flex-col rounded-2xl border border-border bg-card p-4 transition-colors hover:border-primary/40 hover:bg-muted/30"
+    >
+      <p className="text-xs font-medium text-primary">{KIND[q.target_kind]}</p>
+      <p className="mt-1 break-words font-semibold leading-snug text-foreground [overflow-wrap:anywhere]">
+        {q.title}
+      </p>
+      {q.target_title && (
+        <p className="mt-0.5 truncate text-sm text-muted-foreground">
+          {q.target_title}
+        </p>
+      )}
+      <div className="mt-auto flex flex-wrap items-center justify-between gap-x-3 gap-y-1 pt-4 text-xs">
+        <span className="text-muted-foreground">
+          {q.question_count} {q.question_count === 1 ? "question" : "questions"}
+        </span>
+        <span
+          className={cn(
+            "inline-flex items-center gap-1 whitespace-nowrap font-medium",
+            done ? "text-muted-foreground" : "text-primary",
+          )}
+        >
+          <ClipboardCheck className="size-3.5" />
+          {quizActionLabel(q.my.state)}
+          {done && q.my.score !== undefined && ` · ${q.my.score}/${q.my.total}`}
+        </span>
+      </div>
+    </Link>
+  );
+}

components/quiz/quiz-result-view.tsx

@@ -0,0 +1,146 @@
+"use client";
+
+/**
+ * Your finished attempt: the score, then every question with your answer,
+ * the correct one, its explanation, and how long you took.
+ *
+ * Correct options are filled solid so they read at a glance; a wrong pick is
+ * outlined in red. "Your answer" marks whatever you chose either way.
+ */
+
+import Link from "next/link";
+import { Check, Clock, X } from "lucide-react";
+import { RichText } from "@/lib/rich-text";
+import type { QuizResult } from "@/lib/quiz";
+import { cn } from "@/lib/utils";
+
+/**
+ * "8.4s" / "1m 12s" / "3h 20m" / "2d 4h". Hours past 23h 59m roll up into
+ * days. Mirrors fmtMs in the admin's quizzes/labels.ts.
+ */
+export function fmtMs(ms?: number | null): string {
+  if (ms == null) return "—";
+  // Below 59.95s: one decimal place (anything higher would print "60.0s").
+  if (ms < 59_950) return `${(ms / 1000).toFixed(1)}s`;
+  // Whole seconds from here, so rounding can't print "1m 60s".
+  const total = Math.round(ms / 1000);
+  const d = Math.floor(total / 86_400);
+  const h = Math.floor((total % 86_400) / 3600);
+  const m = Math.floor((total % 3600) / 60);
+  const s = total % 60;
+  // The two largest units: 2d 4h · 3h 20m · 12m 5s.
+  if (d > 0) return `${d}d ${h}h`;
+  if (h > 0) return `${h}h ${m}m`;
+  return `${m}m ${s}s`;
+}
+
+export function QuizResultView({ result }: { result: QuizResult }) {
+  const pct = result.total
+    ? Math.round((result.score / result.total) * 100)
+    : 0;
+
+  return (
+    <div className="space-y-6">
+      <section className="rounded-2xl border border-border bg-card p-5 text-center">
+        <p className="text-xs font-medium uppercase tracking-wide text-primary">
+          Your result
+        </p>
+        <p className="mt-2 text-4xl font-semibold tabular-nums text-foreground">
+          {result.score}
+          <span className="text-2xl text-muted-foreground">
+            /{result.total}
+          </span>
+        </p>
+        <p className="mt-1 text-sm text-muted-foreground">
+          {pct}% correct · {fmtMs(result.total_ms)} in total
+        </p>
+        {result.quiz.target_path && (
+          <Link
+            href={result.quiz.target_path}
+            className="mt-3 inline-block text-sm font-medium text-primary hover:underline"
+          >
+            Back to {result.quiz.target_title || "the reading"}
+          </Link>
+        )}
+      </section>
+
+      <ol className="space-y-4">
+        {result.items.map((it, i) => (
+          <li key={it.id} className="rounded-xl border border-border p-4">
+            <div className="flex items-start justify-between gap-3">
+              <p className="text-sm font-medium text-foreground">
+                <span className="text-muted-foreground">{i + 1}. </span>
+                <RichText text={it.prompt} />
+              </p>
+              <span
+                className={cn(
+                  "inline-flex shrink-0 items-center gap-1 text-xs",
+                  it.is_correct ? "text-primary" : "text-destructive",
+                )}
+              >
+                {it.is_correct ? (
+                  <Check className="size-3.5" />
+                ) : (
+                  <X className="size-3.5" />
+                )}
+                {it.is_correct ? "Correct" : "Incorrect"}
+              </span>
+            </div>
+            {it.multi && (
+              <p className="mt-1 text-xs text-muted-foreground">
+                Select all that apply
+              </p>
+            )}
+            <ul className="mt-3 space-y-1.5">
+              {it.options.map((o) => {
+                const chosen = it.chosen_option_ids.includes(o.id);
+                return (
+                  <li
+                    key={o.id}
+                    className={cn(
+                      "flex items-start gap-2 rounded-lg border px-3 py-2 text-sm",
+                      o.is_correct
+                        ? "border-primary bg-primary font-medium text-primary-foreground dark:text-white"
+                        : chosen
+                          ? "border-destructive/50 bg-destructive/10 text-foreground"
+                          : "border-border text-muted-foreground",
+                    )}
+                  >
+                    {o.is_correct ? (
+                      <Check className="mt-0.5 size-3.5 shrink-0" strokeWidth={3} />
+                    ) : chosen ? (
+                      <X className="mt-0.5 size-3.5 shrink-0 text-destructive" />
+                    ) : (
+                      <span className="size-3.5 shrink-0" />
+                    )}
+                    <span className="min-w-0 flex-1">
+                      <RichText text={o.body} />
+                    </span>
+                    {chosen && (
+                      <span
+                        className={cn(
+                          "shrink-0 text-xs font-normal",
+                          o.is_correct ? "opacity-85" : "text-muted-foreground",
+                        )}
+                      >
+                        Your answer
+                      </span>
+                    )}
+                  </li>
+                );
+              })}
+            </ul>
+            {it.explanation && (
+              <p className="mt-3 rounded-lg bg-muted/40 px-3 py-2 text-sm text-muted-foreground">
+                <RichText text={it.explanation} />
+              </p>
+            )}
+            <p className="mt-2 flex items-center gap-1 text-xs text-muted-foreground">
+              <Clock className="size-3" /> {fmtMs(it.response_ms)}
+            </p>
+          </li>
+        ))}
+      </ol>
+    </div>
+  );
+}

components/quiz/quizzes-cta.tsx

@@ -0,0 +1,110 @@
+"use client";
+
+/**
+ * QuizzesCTA — the way into /quizzes, in two shapes:
+ *
+ *   - "tile":   a card that leads the search page's "Start here" row.
+ *   - "banner": a full-width row for the homepage, under sādhana / vāṇī.
+ *
+ * Signed-in readers only, like quizzes themselves. Renders nothing until
+ * there is at least one published quiz; with
+ * `pendingOnly` it also hides once every quiz has been finished, so the
+ * homepage only nudges when there's something left to do.
+ */
+
+import { useEffect, useState } from "react";
+import Link from "next/link";
+import { ArrowUpRight, ChevronRight, ClipboardCheck } from "lucide-react";
+import { useAuth } from "@/components/auth/auth-provider";
+import { quiz, type QuizCard } from "@/lib/quiz";
+import { cn } from "@/lib/utils";
+
+export function QuizzesCTA({
+  variant = "banner",
+  pendingOnly = false,
+  className,
+}: {
+  variant?: "banner" | "tile";
+  pendingOnly?: boolean;
+  className?: string;
+}) {
+  const { user } = useAuth();
+  const userId = user?.id;
+  const [cards, setCards] = useState<QuizCard[] | null>(null);
+
+  useEffect(() => {
+    if (!userId) return;
+    let cancelled = false;
+    quiz
+      .list()
+      .then((c) => {
+        if (!cancelled) setCards(c);
+      })
+      .catch(() => {
+        /* CTA simply doesn't render */
+      });
+    return () => {
+      cancelled = true;
+    };
+    // Refetch on sign-in/out: progress is per user.
+  }, [userId]);
+
+  // Cards left over from before sign-out are ignored rather than cleared.
+  if (!user || !cards?.length) return null;
+
+  if (pendingOnly && cards.every((c) => c.my.state === "completed")) {
+    return null;
+  }
+
+  const tagline = "Test your understanding of chapters, lectures and more";
+
+  if (variant === "tile") {
+    // Matches the search page's FeaturedTile so it sits in that grid as an
+    // equal: same padding, icon chip, title scale and corner arrow.
+    return (
+      <Link
+        href="/quizzes"
+        className={cn(
+          "group relative flex flex-col h-full rounded-2xl bg-card ring-1 ring-foreground/10 hover:ring-foreground/25 hover:shadow-md transition-all p-6",
+          className,
+        )}
+      >
+        <div className="flex items-start justify-between">
+          <div className="flex items-center justify-center size-11 rounded-xl bg-primary/12 text-primary">
+            <ClipboardCheck className="size-5" />
+          </div>
+          <ArrowUpRight className="size-4 text-muted-foreground/60 group-hover:text-foreground transition-colors" />
+        </div>
+        <h3 className="mt-5 font-[family-name:var(--font-title)] font-semibold text-2xl sm:text-[1.6rem] lg:text-[1.35rem] leading-tight text-foreground">
+          Quizzes
+        </h3>
+        <p className="mt-2 text-sm text-muted-foreground leading-relaxed flex-1">
+          {tagline}
+        </p>
+      </Link>
+    );
+  }
+
+  return (
+    <Link
+      href="/quizzes"
+      className={cn(
+        "group flex items-center gap-3.5 rounded-2xl border border-border bg-card p-4 text-left transition-colors hover:border-primary/40 hover:bg-muted/40",
+        className,
+      )}
+    >
+      <span className="inline-flex size-12 shrink-0 items-center justify-center rounded-full bg-primary/10 text-primary">
+        <ClipboardCheck className="size-6" />
+      </span>
+      <div className="min-w-0 flex-1">
+        <p className="text-base font-semibold leading-snug text-foreground">
+          Quizzes
+        </p>
+        <p className="truncate text-sm leading-snug text-muted-foreground">
+          {tagline}
+        </p>
+      </div>
+      <ChevronRight className="size-5 shrink-0 text-muted-foreground transition-transform group-hover:translate-x-0.5 group-hover:text-foreground" />
+    </Link>
+  );
+}

components/sadhna/streak-cta.tsx

@@ -8,13 +8,23 @@
  */
 
 import { useEffect, useState } from "react";
+import Image from "next/image";
 import Link from "next/link";
 import { ChevronRight } from "lucide-react";
 import { useAuth } from "@/components/auth/auth-provider";
 import { sadhna, type SadhnaDashboard } from "@/lib/sadhna";
 import { StreakFlame } from "@/components/sadhna/streak-flame";
 
-export function SadhnaStreakCTA() {
+export function SadhnaStreakCTA({
+  compact = false,
+}: {
+  /**
+   * Icon-only tile for the homepage row beside Vāṇī of the Day. The streak
+   * and today's status move into the accessible label and tooltip, and the
+   * tile tints while a streak is running.
+   */
+  compact?: boolean;
+} = {}) {
   const { user, loading } = useAuth();
   const authed = !loading && !!user;
   const [dash, setDash] = useState<SadhnaDashboard | null>(null);
@@ -55,6 +65,35 @@ export function SadhnaStreakCTA() {
         ? "One offering done — finish today"
         : "Chant and post a quote to complete today";
 
+  if (compact) {
+    const active = streak > 0;
+    return (
+      <Link
+        href="/sadhna-streak"
+        aria-label={`${title}. ${subtitle}`}
+        title={`${title} — ${subtitle}`}
+        className={
+          // An explicit square matching the homepage row's h-24. Deriving the
+          // width from height (aspect-square + h-full) collapses to the icon in
+          // Safari, so both sides are fixed.
+          "group p-2 flex flex-col size-24 shrink-0 items-center justify-center rounded-2xl border transition-colors " +
+          (active
+            ? "border-primary/30 bg-primary/10 hover:border-primary/50"
+            : "border-border bg-card hover:border-primary/40 hover:bg-muted/40")
+        }
+      >
+        <Image
+          src="/icons/chanting-beads.svg"
+          alt=""
+          width={44}
+          height={44}
+          className="size-12 transition-transform group-hover:scale-105"
+          unoptimized
+        />
+      </Link>
+    );
+  }
+
   return (
     <Link
       href="/sadhna-streak"

components/text-selection-toolbar.tsx

@@ -331,7 +331,20 @@ export function TextSelectionToolbar() {
     return null;
   }
 
-  if (!toolbarPos || !selectedText) return null;
+  // The share dialog deliberately OUTLIVES the selection that opened it:
+  // onChat snapshots the passage and then calls finishAction, which clears
+  // selectedText. Rendered only below the guard, it would never mount — the
+  // component returns null on that same render, and the dialog would appear
+  // on the next selection instead, when selectedText is non-empty again.
+  //
+  // The other surfaces avoid this by using saveAndClearSelection, which keeps
+  // selectedText in state; this one lets the selection go entirely.
+  const shareToChat =
+    chatQuote !== null ? (
+      <ShareToChatDialog quote={chatQuote} onClose={() => setChatQuote(null)} />
+    ) : null;
+
+  if (!toolbarPos || !selectedText) return shareToChat;
 
   // ─── Action handlers ──────────────────────────────────────────────────
 
@@ -628,12 +641,7 @@ export function TextSelectionToolbar() {
         selectedText={selectedText}
       />
 
-      {chatQuote !== null && (
-        <ShareToChatDialog
-          quote={chatQuote}
-          onClose={() => setChatQuote(null)}
-        />
-      )}
+      {shareToChat}
     </div>
   );
 }

components/vani/vani-of-the-day-cta.tsx

@@ -12,6 +12,7 @@ import { useEffect, useState } from "react";
 import Link from "next/link";
 import { ChevronRight } from "lucide-react";
 import { getVaniOfTheDay, type Vani } from "@/lib/vani";
+import { cn } from "@/lib/utils";
 
 /** Quote-marks glyph (svgrepo). Inherits color via `currentColor`. */
 function QuotesIcon({ className }: { className?: string }) {
@@ -28,7 +29,7 @@ function QuotesIcon({ className }: { className?: string }) {
   );
 }
 
-export function VaniOfTheDayCTA() {
+export function VaniOfTheDayCTA({ className }: { className?: string } = {}) {
   const [vani, setVani] = useState<Vani | null>(null);
 
   useEffect(() => {
@@ -57,11 +58,11 @@ export function VaniOfTheDayCTA() {
   return (
     <Link
       href={vani.href}
-      className="group flex w-full max-w-md items-center gap-3.5 rounded-2xl border border-border bg-card p-4 text-left transition-colors hover:border-primary/40 hover:bg-muted/40"
+      className={cn(
+        "group flex w-full max-w-md items-center gap-3.5 rounded-2xl border border-border bg-card p-4 text-left transition-colors hover:border-primary/40 hover:bg-muted/40",
+        className,
+      )}
     >
-      <span className="inline-flex size-12 shrink-0 items-center justify-center rounded-full bg-primary/10 text-primary">
-        <QuotesIcon className="size-6" />
-      </span>
       <div className="min-w-0 flex-1">
         <p className="text-xs font-medium text-primary">Vani of the day</p>
         <p className="mt-0.5 truncate text-base font-semibold text-foreground leading-snug">

lib/og.ts

@@ -318,6 +318,68 @@ export function ogForLettersByLocation(location: string, count: number) {
   });
 }
 
+// ---------------------------------------------------------------------------
+// Quizzes
+// ---------------------------------------------------------------------------
+
+const QUIZ_DESCRIPTION =
+  "Test your understanding of Śrīla Prabhupāda's books, lectures and conversations.";
+
+const QUIZ_KIND_LABEL: Record<string, string> = {
+  chapter: "Book chapter",
+  lecture: "Lecture",
+  conversation: "Conversation",
+};
+
+/**
+ * Admin text carries light formatting markers (*bold*, _italic_, links…).
+ * A preview card wants the words only.
+ */
+function stripRichMarkers(text: string): string {
+  return text
+    .replace(/\[([^\]\n]+)\]\((https?:\/\/[^\s)]+)\)/g, "$1")
+    .replace(/__([^_\n]+?)__/g, "$1")
+    .replace(/\*([^*\n]+?)\*/g, "$1")
+    .replace(/~([^~\n]+?)~/g, "$1")
+    .replace(/(^|\W)_([^_\n]+?)_(?=\W|$)/g, "$1$2")
+    .replace(/\s+/g, " ")
+    .trim();
+}
+
+/** OG metadata for a single quiz. */
+export function ogForQuiz(quiz: {
+  title: string;
+  description?: string;
+  target_kind: string;
+  target_title?: string;
+  question_count: number;
+}) {
+  const kind = QUIZ_KIND_LABEL[quiz.target_kind];
+  const count = `${quiz.question_count} question${quiz.question_count === 1 ? "" : "s"}`;
+  const detail = [
+    "Quiz",
+    kind && quiz.target_title ? `${kind}: ${quiz.target_title}` : null,
+    count,
+  ]
+    .filter(Boolean)
+    .join(" · ");
+  const about = stripRichMarkers(quiz.description ?? "");
+  return buildOgMeta({
+    title: quiz.title,
+    detail,
+    quote: about || QUIZ_DESCRIPTION,
+  });
+}
+
+/** OG metadata for the /quizzes index. */
+export function ogForQuizzes() {
+  return buildOgMeta({
+    title: "Quizzes",
+    detail: "Prabhupāda Says",
+    quote: QUIZ_DESCRIPTION,
+  });
+}
+
 // ---------------------------------------------------------------------------
 // hl= query param → OG quote extraction
 // ---------------------------------------------------------------------------

lib/quiz-groups.ts

@@ -0,0 +1,92 @@
+/**
+ * Groups the quiz list for the "All" tab:
+ *
+ *   Books                     → one group per book, in the library's order
+ *   Lectures & Conversations  → one group per year, oldest first, undated last
+ *   Other quizzes             → stand-alone quizzes
+ *
+ * Only groups with quizzes in them are returned, so an empty category or
+ * sub-category never renders.
+ */
+
+import { BOOK_NAMES } from "@/lib/constants";
+import type { QuizCard } from "@/lib/quiz";
+
+export type QuizGroup = { key: string; label: string; quizzes: QuizCard[] };
+
+export type QuizSections = {
+  books: QuizGroup[];
+  lectures: QuizGroup[];
+  other: QuizCard[];
+};
+
+const BOOK_ORDER = Object.keys(BOOK_NAMES);
+
+/** "bg" from /books/bg/2 — the book a chapter quiz belongs to. */
+function bookCode(path?: string | null): string | null {
+  const m = path?.match(/^\/books\/([^/]+)/);
+  return m ? m[1] : null;
+}
+
+/**
+ * The recording's year. Saved on the quiz since target_year existed; for
+ * older quizzes, read from the slug's yymmdd prefix (720720sb-london → 1972)
+ * when it falls in Śrīla Prabhupāda's recorded years.
+ */
+function lectureYear(q: QuizCard): number | null {
+  if (q.target_year) return q.target_year;
+  const m = q.target_path?.match(/^\/transcriptions\/(\d{2})\d{4}/);
+  if (!m) return null;
+  const y = 1900 + Number(m[1]);
+  return y >= 1966 && y <= 1977 ? y : null;
+}
+
+export function groupQuizzes(cards: QuizCard[]): QuizSections {
+  const books = new Map<string, QuizCard[]>();
+  const years = new Map<number | null, QuizCard[]>();
+  const other: QuizCard[] = [];
+
+  for (const q of cards) {
+    if (q.target_kind === "chapter") {
+      const code = bookCode(q.target_path) ?? "other";
+      books.set(code, [...(books.get(code) ?? []), q]);
+    } else if (
+      q.target_kind === "lecture" ||
+      q.target_kind === "conversation"
+    ) {
+      const y = lectureYear(q);
+      years.set(y, [...(years.get(y) ?? []), q]);
+    } else {
+      other.push(q);
+    }
+  }
+
+  const rank = (code: string) => {
+    const i = BOOK_ORDER.indexOf(code);
+    return i < 0 ? BOOK_ORDER.length : i;
+  };
+
+  return {
+    books: [...books.entries()]
+      .sort(([a], [b]) => rank(a) - rank(b) || a.localeCompare(b))
+      .map(([code, quizzes]) => ({
+        key: code,
+        label: BOOK_NAMES[code] ?? code.toUpperCase(),
+        // Chapter order (/books/bg/2 before /books/bg/10), not newest first.
+        quizzes: [...quizzes].sort((a, b) =>
+          (a.target_path ?? "").localeCompare(b.target_path ?? "", undefined, {
+            numeric: true,
+          }),
+        ),
+      })),
+    lectures: [...years.entries()]
+      // Oldest first; undated (null) last.
+      .sort(([a], [b]) => (a ?? 9999) - (b ?? 9999))
+      .map(([year, quizzes]) => ({
+        key: String(year ?? "undated"),
+        label: year ? String(year) : "Undated",
+        quizzes,
+      })),
+    other,
+  };
+}

lib/quiz.ts

@@ -0,0 +1,123 @@
+/**
+ * Browser-side client for quizzes.
+ *
+ * Correct answers never come down while an attempt is in progress — the BFF
+ * withholds them — so nothing here can reveal one early. Results are only
+ * ever the caller's own: the BFF reads the user from the session.
+ */
+
+const BFF_BASE = process.env.NEXT_PUBLIC_BFF_URL || "http://localhost:8080";
+
+export class QuizError extends Error {
+  constructor(
+    public status: number,
+    message: string,
+  ) {
+    super(message);
+  }
+}
+
+async function call<T>(path: string, init?: RequestInit): Promise<T> {
+  const res = await fetch(`${BFF_BASE}/api/v1${path}`, {
+    credentials: "include",
+    headers: { "Content-Type": "application/json" },
+    ...init,
+  });
+  let json: { data?: T; error?: { message?: string } } | null = null;
+  try {
+    json = await res.json();
+  } catch {
+    /* empty body */
+  }
+  if (!res.ok) {
+    throw new QuizError(
+      res.status,
+      json?.error?.message || "Quiz request failed",
+    );
+  }
+  // `data` can legitimately be null (no quiz on this page), so test for the
+  // key rather than falling back with `??`, which would return the envelope.
+  return (json && "data" in json ? json.data : json) as T;
+}
+
+export type QuizState = "not_started" | "in_progress" | "completed";
+
+export type QuizOption = {
+  id: string;
+  ord: number;
+  body: string;
+  is_correct?: boolean;
+};
+
+export type QuizQuestion = {
+  id: string;
+  ord: number;
+  prompt: string;
+  explanation?: string;
+  /** "Select all that apply": several options may be correct. */
+  multi: boolean;
+  options: QuizOption[];
+};
+
+export type QuizCard = {
+  id: string;
+  title: string;
+  description: string;
+  target_kind: "chapter" | "lecture" | "conversation" | "standalone";
+  target_path?: string | null;
+  target_title: string;
+  /** Year of the lecture / conversation, when known. */
+  target_year?: number | null;
+  question_count: number;
+  my: { state: QuizState; answered: number; total: number; score?: number };
+};
+
+export type QuizPlay = {
+  quiz_id: string;
+  title: string;
+  answered: number;
+  total: number;
+  done: boolean;
+  question?: QuizQuestion;
+};
+
+export type QuizResult = {
+  quiz: QuizCard;
+  score: number;
+  total: number;
+  started_at: string;
+  completed_at?: string;
+  total_ms: number;
+  items: (QuizQuestion & {
+    chosen_option_ids: string[];
+    is_correct: boolean;
+    response_ms?: number;
+  })[];
+};
+
+export const quiz = {
+  /** The quiz on a content page, or null when it has none. */
+  forPath: (path: string) =>
+    call<QuizCard | null>(`/quizzes/for?path=${encodeURIComponent(path)}`),
+  list: () => call<QuizCard[]>("/quizzes"),
+  get: (id: string) => call<QuizCard>(`/quizzes/${id}`),
+  /** Opens or resumes your attempt and returns the current question. */
+  start: (id: string) =>
+    call<QuizPlay>(`/quizzes/${id}/start`, { method: "POST" }),
+  /** One option, or several for a multi question. Final once sent. */
+  answer: (id: string, questionId: string, optionIds: string[]) =>
+    call<QuizPlay>(`/quizzes/${id}/answer`, {
+      method: "POST",
+      body: JSON.stringify({ question_id: questionId, option_ids: optionIds }),
+    }),
+  result: (id: string) => call<QuizResult>(`/quizzes/${id}/result`),
+};
+
+/** The button's wording follows where you are in the quiz. */
+export function quizActionLabel(state: QuizState): string {
+  return state === "completed"
+    ? "View results"
+    : state === "in_progress"
+      ? "Continue quiz"
+      : "Take quiz";
+}

lib/rich-text.tsx

@@ -0,0 +1,115 @@
+/**
+ * Renders the light formatting the admin message fields allow:
+ *
+ *   *bold*   _italic_   __underline__   ~strike~   [label](https://…)
+ *
+ * plus bare http(s) URLs. The rules mirror pkg/richtext in the BFF, which
+ * renders the same markers into email — so the preview shown here is what
+ * the recipient's inbox gets.
+ *
+ * Output is React nodes, never an HTML string: React escapes all text, so
+ * author input cannot become markup, and links are limited to http(s).
+ *
+ * NOTE: a copy of spsays-admin/lib/rich-text.tsx. The two are separate Next
+ * apps with no shared package — the same arrangement as compress-image.ts.
+ * Change both, and pkg/richtext in the BFF, together.
+ */
+
+import type { ReactNode } from "react";
+
+const LINK_RE =
+  /\[([^\]\n]+)\]\((https?:\/\/[^\s)]+)\)|(https?:\/\/[^\s<]+)/g;
+const TRAILING_PUNCT = /[.,;:!?)]+$/;
+
+type Marker = { re: RegExp; wrap: (n: ReactNode, k: string) => ReactNode };
+
+// Order matters: __underline__ before _italic_, so the double underscore
+// isn't read as two italic markers.
+const MARKERS: Marker[] = [
+  { re: /__([^_\n]+?)__/, wrap: (n, k) => <u key={k}>{n}</u> },
+  { re: /\*([^*\n]+?)\*/, wrap: (n, k) => <strong key={k}>{n}</strong> },
+  { re: /~([^~\n]+?)~/, wrap: (n, k) => <s key={k}>{n}</s> },
+  { re: /_([^_\n]+?)_/, wrap: (n, k) => <em key={k}>{n}</em> },
+];
+
+const isWord = (c: string | undefined) => !!c && /\w/.test(c);
+
+/** Markers within a run of text that contains no links. */
+function renderMarkers(text: string, keyBase: string): ReactNode[] {
+  // Earliest match across all markers wins, so nesting resolves outside-in.
+  let best: { idx: number; len: number; inner: string; m: Marker } | null =
+    null;
+  for (const m of MARKERS) {
+    const re = new RegExp(m.re.source, "g");
+    let hit: RegExpExecArray | null;
+    while ((hit = re.exec(text))) {
+      // Italic needs a non-word character either side, so snake_case and
+      // handles keep their underscores.
+      if (m.re.source.startsWith("_(")) {
+        const before = text[hit.index - 1];
+        const after = text[hit.index + hit[0].length];
+        if (isWord(before) || isWord(after)) continue;
+      }
+      if (!best || hit.index < best.idx) {
+        best = { idx: hit.index, len: hit[0].length, inner: hit[1], m };
+      }
+      break;
+    }
+  }
+  if (!best) return text ? [text] : [];
+
+  const before = text.slice(0, best.idx);
+  const after = text.slice(best.idx + best.len);
+  const k = `${keyBase}-${best.idx}`;
+  return [
+    ...(before ? [before] : []),
+    best.m.wrap(renderMarkers(best.inner, `${k}i`), k),
+    ...renderMarkers(after, `${k}a`),
+  ];
+}
+
+/** Renders formatted text, newlines included. */
+export function RichText({ text }: { text: string }) {
+  const lines = text.replace(/\r\n/g, "\n").split("\n");
+  return (
+    <>
+      {lines.map((line, li) => {
+        const out: ReactNode[] = [];
+        let last = 0;
+        for (const m of line.matchAll(LINK_RE)) {
+          const idx = m.index ?? 0;
+          out.push(...renderMarkers(line.slice(last, idx), `${li}-${last}`));
+          let href = m[2] ?? m[3];
+          let label = m[1] ?? href;
+          let tail = "";
+          if (!m[1]) {
+            // Sentence punctuation after a bare URL isn't part of it.
+            tail = href.match(TRAILING_PUNCT)?.[0] ?? "";
+            href = href.slice(0, href.length - tail.length);
+            label = href;
+          }
+          out.push(
+            <a
+              key={`${li}-l${idx}`}
+              href={href}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="font-medium text-primary underline-offset-2 hover:underline"
+            >
+              {label}
+            </a>,
+          );
+          if (tail) out.push(tail);
+          last = idx + m[0].length;
+        }
+        out.push(...renderMarkers(line.slice(last), `${li}-${last}`));
+        return (
+          <span key={li}>
+            {li > 0 && <br />}
+            {out}
+          </span>
+        );
+      })}
+    </>
+  );
+}

lib/social.ts

@@ -212,6 +212,8 @@ export type Feedback = {
   id: string;
   user_id?: string;
   category: string;
+  /** The category's current display name (renames apply to past feedback). */
+  category_label?: string;
   message: string;
   contact_email?: string;
   created_at: string;
@@ -560,13 +562,25 @@ export const collections = {
 
 // ─── Feedback ────────────────────────────────────────────────────────────
 
+/** One option on the /feedback form, managed from the admin panel. */
+export type FeedbackCategory = {
+  key: string;
+  label: string;
+  description: string;
+};
+
 export const feedback = {
+  /** The form's categories, in order. Public. */
+  categories() {
+    return call<FeedbackCategory[]>("/feedback/categories");
+  },
   /** Submit a /feedback page entry. When the viewer is signed in the
    *  BFF captures their user_id automatically via the auth cookie —
    *  the form doesn't ask for it. `contact_email` is required only
    *  for anonymous submissions; the BFF re-enforces that on its end. */
   submit(input: {
-    category: "bug" | "feature" | "general" | "other";
+    /** A FeedbackCategory key. */
+    category: string;
     message: string;
     contact_email?: string;
   }) {