feat: implement deck fork confirmation dialog with toast notifications

web/package.json

···
     "build": "tsc -b && vite build",
     "preview": "vite preview",
     "test": "vitest",
-    "check": "tsc --noEmit",
+    "check": "tsc --noEmit --project tsconfig.app.json",
     "lint": "eslint ."
   },
   "dependencies": {

web/src/components/StudySession.test.tsx

···
-import type { ReviewCard } from "$lib/store";
+import type { ReviewCard } from "$lib/model";
 import { cleanup, fireEvent, render, screen } from "@solidjs/testing-library";
 import { afterEach, describe, expect, it, vi } from "vitest";
 import { StudySession } from "./StudySession";

web/src/components/social/CommentSection.tsx

···
 function buildTree(comments: Comment[]): CommentNode[] {
   const map = new Map<string, CommentNode>();
   const roots: CommentNode[] = [];
-
   for (const c of comments) {
     map.set(c.id, { comment: c, children: [] });
   }
···
 
       <Show when={comments()} fallback={<div class="animate-pulse">Loading comments...</div>}>
         {(data) => {
-          const list = data as unknown as Comment[];
+          const list = (Array.isArray(data) ? data : []) as Comment[];
           return (
             <div class="space-y-4">
               <For each={buildTree(list)}>{(node) => <CommentItem node={node} />}</For>

web/src/pages/DeckView.test.tsx

···
 import { api } from "$lib/api";
-import { cleanup, render, screen, waitFor } from "@solidjs/testing-library";
+import { toast } from "$lib/toast";
+import { cleanup, fireEvent, render, screen, waitFor, within } from "@solidjs/testing-library";
 import { JSX } from "solid-js";
 import { afterEach, describe, expect, it, vi } from "vitest";
 import DeckView from "./DeckView";
 
-vi.mock("$lib/api", () => ({ api: { get: vi.fn() } }));
+const { mockNavigate } = vi.hoisted(() => ({ mockNavigate: vi.fn() }));
+
+vi.mock(
+  "$lib/api",
+  () => ({
+    api: { getDeck: vi.fn(), getDeckCards: vi.fn(), forkDeck: vi.fn(), getComments: vi.fn(), addComment: vi.fn() },
+  }),
+);
+
+vi.mock("$lib/toast", () => ({ toast: { success: vi.fn(), error: vi.fn() } }));
 
 vi.mock(
   "@solidjs/router",
   () => ({
     useParams: () => ({ id: "123" }),
+    useNavigate: () => mockNavigate,
     A: (props: { href: string; children: JSX.Element }) => <a href={props.href}>{props.children}</a>,
   }),
 );
 
 describe("DeckView", () => {
-  afterEach(cleanup);
+  afterEach(() => {
+    cleanup();
+    vi.clearAllMocks();
+  });
 
-  it("renders deck details and cards", async () => {
-    const deck = {
-      id: "123",
-      title: "Test Deck",
-      description: "A test deck",
-      tags: ["test"],
-      visibility: { type: "Public" },
-      owner_did: "did:test",
-    };
+  const mockDeck = {
+    id: "123",
+    title: "Test Deck",
+    description: "A test deck",
+    tags: ["test"],
+    visibility: { type: "Public" },
+    owner_did: "did:test",
+  };
 
-    const cards = [{ id: "c1", front: "Front 1", back: "Back 1" }, { id: "c2", front: "Front 2", back: "Back 2" }];
+  const mockCards = [{ id: "c1", front: "Front 1", back: "Back 1" }, { id: "c2", front: "Front 2", back: "Back 2" }];
 
-    vi.mocked(api.get).mockImplementation(
-      ((path: string) => {
-        if (path === "/decks/123") {
-          return Promise.resolve({ ok: true, json: () => Promise.resolve(deck) });
-        }
-        if (path === "/decks/123/cards") {
-          return Promise.resolve({ ok: true, json: () => Promise.resolve(cards) });
-        }
-        return Promise.reject(new Error(`Unexpected path: ${path}`));
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      }) as any,
+  it("renders deck details and cards", async () => {
+    vi.mocked(api.getDeck).mockResolvedValue(
+      { ok: true, json: () => Promise.resolve(mockDeck) } as unknown as Response,
+    );
+    vi.mocked(api.getDeckCards).mockResolvedValue(
+      { ok: true, json: () => Promise.resolve(mockCards) } as unknown as Response,
     );
+    vi.mocked(api.getComments).mockResolvedValue({ ok: true, json: () => Promise.resolve([]) } as unknown as Response);
 
     render(() => <DeckView />);
 
···
     expect(screen.getByText("A test deck")).toBeInTheDocument();
     expect(screen.getByText("#test")).toBeInTheDocument();
     expect(screen.getByText("Front 1")).toBeInTheDocument();
-    expect(screen.getByText("Front 2")).toBeInTheDocument();
-    expect(screen.getByText("Back 1")).toBeInTheDocument();
   });
 
-  it("renders not found state when deck returns error", async () => {
-    vi.mocked(api.get).mockImplementation(
-      (() => {
-        return Promise.resolve({ ok: false });
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      }) as any,
+  it("handles deck fork flow successfully", async () => {
+    vi.mocked(api.getDeck).mockResolvedValue(
+      { ok: true, json: () => Promise.resolve(mockDeck) } as unknown as Response,
     );
+    vi.mocked(api.getDeckCards).mockResolvedValue(
+      { ok: true, json: () => Promise.resolve(mockCards) } as unknown as Response,
+    );
+    vi.mocked(api.forkDeck).mockResolvedValue(
+      { ok: true, json: () => Promise.resolve({ id: "456" }) } as unknown as Response,
+    );
+    vi.mocked(api.getComments).mockResolvedValue({ ok: true, json: () => Promise.resolve([]) } as unknown as Response);
 
     render(() => <DeckView />);
 
+    await waitFor(() => expect(screen.getByText("Test Deck")).toBeInTheDocument());
+
+    const forkButton = screen.getByText("Fork Deck", { selector: "button" });
+    fireEvent.click(forkButton);
+
+    const dialog = screen.getByRole("dialog");
+    expect(within(dialog).getByText(/Are you sure you want to fork/)).toBeInTheDocument();
+
+    const confirmButton = within(dialog).getByRole("button", { name: /Fork Deck/i });
+    fireEvent.click(confirmButton);
+
+    await waitFor(() => {
+      expect(api.forkDeck).toHaveBeenCalledWith("123");
+      expect(toast.success).toHaveBeenCalledWith("Deck forked successfully!");
+      expect(mockNavigate).toHaveBeenCalledWith("/decks/456");
+    });
+  });
+
+  it("handles deck fork failure", async () => {
+    vi.mocked(api.getDeck).mockResolvedValue(
+      { ok: true, json: () => Promise.resolve(mockDeck) } as unknown as Response,
+    );
+    vi.mocked(api.getDeckCards).mockResolvedValue(
+      { ok: true, json: () => Promise.resolve(mockCards) } as unknown as Response,
+    );
+    vi.mocked(api.forkDeck).mockResolvedValue({ ok: false } as unknown as Response);
+    vi.mocked(api.getComments).mockResolvedValue({ ok: true, json: () => Promise.resolve([]) } as unknown as Response);
+
+    render(() => <DeckView />);
+
+    await waitFor(() => expect(screen.getByText("Test Deck")).toBeInTheDocument());
+
+    const forkButton = screen.getByText("Fork Deck", { selector: "button" });
+    fireEvent.click(forkButton);
+
+    const dialog = screen.getByRole("dialog");
+    const confirmButton = within(dialog).getByRole("button", { name: /Fork Deck/i });
+    fireEvent.click(confirmButton);
+
+    await waitFor(() => {
+      expect(api.forkDeck).toHaveBeenCalledWith("123");
+      expect(toast.error).toHaveBeenCalledWith("Failed to fork deck.");
+      expect(mockNavigate).not.toHaveBeenCalled();
+    });
+  });
+
+  it("renders not found state when deck returns error", async () => {
+    vi.mocked(api.getDeck).mockResolvedValue({ ok: false } as unknown as Response);
+    render(() => <DeckView />);
     await waitFor(() => expect(screen.getByText(/Deck not found/i)).toBeInTheDocument());
   });
 });

web/src/pages/DeckView.tsx

···
 import { CommentSection } from "$components/social/CommentSection";
 import { FollowButton } from "$components/social/FollowButton";
 import { Button } from "$components/ui/Button";
+import { Dialog } from "$components/ui/Dialog";
 import { api } from "$lib/api";
 import type { Card, Deck } from "$lib/model";
-import { A, useParams } from "@solidjs/router";
+import { toast } from "$lib/toast";
+import { A, useNavigate, useParams } from "@solidjs/router";
 import type { Component } from "solid-js";
-import { createResource, For, Show } from "solid-js";
+import { createResource, createSignal, For, Show } from "solid-js";
 
 const DeckView: Component = () => {
   const params = useParams();
+  const navigate = useNavigate();
+  const [showForkDialog, setShowForkDialog] = createSignal(false);
   const [deck] = createResource(() => params.id, async (id) => {
     const res = await api.getDeck(id);
     return res.ok ? (await res.json() as Deck) : null;
···
   });
 
   const handleFork = async () => {
-    if (!deck()) return;
-    // TODO: use modal
-    if (confirm(`Fork "${deck()?.title}"?`)) {
+    if (deck()) {
       try {
         const res = await api.forkDeck(deck()!.id);
         if (res.ok) {
           const newDeck = await res.json();
-          // TODO: use toast
-          alert("Deck forked successfully!");
-          // TODO: useNavigate
-          // navigate(`/decks/${newDeck.id}`);
-          window.location.href = `/decks/${newDeck.id}`;
+          toast.success("Deck forked successfully!");
+          navigate(`/decks/${newDeck.id}`);
         } else {
-          // TODO: use toast
-          alert("Failed to fork deck.");
+          toast.error("Failed to fork deck.");
         }
       } catch (e) {
         console.error(e);
-        // TODO: use toast
-        alert("Error forking deck.");
+        toast.error("Error forking deck.");
+      } finally {
+        setShowForkDialog(false);
       }
     }
   };
···
                     Study Deck (Coming Soon)
                   </button>
                   <Button
-                    onClick={handleFork}
+                    onClick={() => setShowForkDialog(true)}
                     variant="secondary"
                     class="border border-[#393939] text-[#F4F4F4] hover:bg-[#262626] px-6 py-3 font-medium text-sm transition-colors">
                     Fork Deck
···
           )}
         </Show>
       </Show>
+
+      <Dialog
+        open={showForkDialog()}
+        onClose={() => setShowForkDialog(false)}
+        title="Fork Deck"
+        actions={
+          <>
+            <Button variant="ghost" onClick={() => setShowForkDialog(false)}>Cancel</Button>
+            <Button variant="primary" onClick={handleFork}>Fork Deck</Button>
+          </>
+        }>
+        <p>Are you sure you want to fork "{deck()?.title}"?</p>
+        <p class="text-sm text-gray-400 mt-2">
+          This will create a copy of this deck in your library that you can study and edit.
+        </p>
+      </Dialog>
     </div>
   );
 };

web/src/pages/Feed.test.tsx

···
+import { api } from "$lib/api";
+import { toast } from "$lib/toast";
+import { cleanup, fireEvent, render, screen, waitFor, within } from "@solidjs/testing-library";
+import { JSX } from "solid-js";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import Feed from "./Feed";
+
+const { mockNavigate } = vi.hoisted(() => ({ mockNavigate: vi.fn() }));
+
+vi.mock(
+  "$lib/api",
+  () => ({
+    api: {
+      getFeedFollows: vi.fn(),
+      getFeedTrending: vi.fn(),
+      forkDeck: vi.fn(),
+      follow: vi.fn(),
+      unfollow: vi.fn(),
+      getFollowers: vi.fn(),
+    },
+  }),
+);
+
+vi.mock("$lib/toast", () => ({ toast: { success: vi.fn(), error: vi.fn() } }));
+
+vi.mock(
+  "@solidjs/router",
+  () => ({
+    useNavigate: () => mockNavigate,
+    A: (props: { href: string; children: JSX.Element }) => <a href={props.href}>{props.children}</a>,
+  }),
+);
+
+describe("Feed", () => {
+  afterEach(() => {
+    cleanup();
+    vi.clearAllMocks();
+  });
+
+  const mockDecks = [{
+    id: "deck1",
+    title: "Test Deck 1",
+    description: "A test deck",
+    tags: ["test"],
+    visibility: { type: "Public" },
+    owner_did: "did:test:1",
+    published_at: "2024-01-01T00:00:00Z",
+  }, {
+    id: "deck2",
+    title: "Test Deck 2",
+    description: "Another test deck",
+    tags: ["demo"],
+    visibility: { type: "Public" },
+    owner_did: "did:test:2",
+    published_at: null,
+  }];
+
+  it("renders feed with decks from followed users", async () => {
+    vi.mocked(api.getFeedFollows).mockResolvedValue(
+      { ok: true, json: () => Promise.resolve(mockDecks) } as unknown as Response,
+    );
+    vi.mocked(api.getFeedTrending).mockResolvedValue(
+      { ok: true, json: () => Promise.resolve([]) } as unknown as Response,
+    );
+    vi.mocked(api.getFollowers).mockResolvedValue({ ok: true, json: () => Promise.resolve([]) } as unknown as Response);
+
+    render(() => <Feed />);
+
+    await waitFor(() => expect(screen.getByText("Test Deck 1")).toBeInTheDocument());
+    expect(screen.getByText("Test Deck 2")).toBeInTheDocument();
+  });
+
+  it("shows empty state when no followed decks", async () => {
+    vi.mocked(api.getFeedFollows).mockResolvedValue(
+      { ok: true, json: () => Promise.resolve([]) } as unknown as Response,
+    );
+    vi.mocked(api.getFeedTrending).mockResolvedValue(
+      { ok: true, json: () => Promise.resolve([]) } as unknown as Response,
+    );
+
+    render(() => <Feed />);
+
+    await waitFor(() => expect(screen.getByText(/No updates from followed users/i)).toBeInTheDocument());
+  });
+
+  it("handles fork flow successfully", async () => {
+    vi.mocked(api.getFeedFollows).mockResolvedValue(
+      { ok: true, json: () => Promise.resolve(mockDecks) } as unknown as Response,
+    );
+    vi.mocked(api.getFeedTrending).mockResolvedValue(
+      { ok: true, json: () => Promise.resolve([]) } as unknown as Response,
+    );
+    vi.mocked(api.forkDeck).mockResolvedValue(
+      { ok: true, json: () => Promise.resolve({ id: "forked-deck" }) } as unknown as Response,
+    );
+    vi.mocked(api.getFollowers).mockResolvedValue({ ok: true, json: () => Promise.resolve([]) } as unknown as Response);
+
+    render(() => <Feed />);
+
+    await waitFor(() => expect(screen.getByText("Test Deck 1")).toBeInTheDocument());
+
+    const forkButtons = screen.getAllByText("Fork");
+    fireEvent.click(forkButtons[0]);
+
+    const dialog = screen.getByRole("dialog");
+    expect(within(dialog).getByText(/Are you sure you want to fork/i)).toBeInTheDocument();
+
+    const confirmButton = within(dialog).getByRole("button", { name: /Fork Deck/i });
+    fireEvent.click(confirmButton);
+
+    await waitFor(() => {
+      expect(api.forkDeck).toHaveBeenCalledWith("deck1");
+      expect(toast.success).toHaveBeenCalledWith("Deck forked successfully!");
+      expect(mockNavigate).toHaveBeenCalledWith("/decks/forked-deck");
+    });
+  });
+
+  it("handles fork failure", async () => {
+    vi.mocked(api.getFeedFollows).mockResolvedValue(
+      { ok: true, json: () => Promise.resolve(mockDecks) } as unknown as Response,
+    );
+    vi.mocked(api.getFeedTrending).mockResolvedValue(
+      { ok: true, json: () => Promise.resolve([]) } as unknown as Response,
+    );
+    vi.mocked(api.forkDeck).mockResolvedValue({ ok: false } as unknown as Response);
+    vi.mocked(api.getFollowers).mockResolvedValue({ ok: true, json: () => Promise.resolve([]) } as unknown as Response);
+
+    render(() => <Feed />);
+
+    await waitFor(() => expect(screen.getByText("Test Deck 1")).toBeInTheDocument());
+
+    const forkButtons = screen.getAllByText("Fork");
+    fireEvent.click(forkButtons[0]);
+
+    const dialog = screen.getByRole("dialog");
+    const confirmButton = within(dialog).getByRole("button", { name: /Fork Deck/i });
+    fireEvent.click(confirmButton);
+
+    await waitFor(() => {
+      expect(api.forkDeck).toHaveBeenCalledWith("deck1");
+      expect(toast.error).toHaveBeenCalledWith("Failed to fork deck.");
+      expect(mockNavigate).not.toHaveBeenCalled();
+    });
+  });
+});

web/src/pages/Feed.tsx

···
 import { FollowButton } from "$components/social/FollowButton";
 import { Button } from "$components/ui/Button";
 import { Card } from "$components/ui/Card";
+import { Dialog } from "$components/ui/Dialog";
 import { Tabs } from "$components/ui/Tabs";
 import { api } from "$lib/api";
 import type { Deck } from "$lib/model";
-import { A } from "@solidjs/router";
-import { createResource, For, Match, Show, Switch } from "solid-js";
+import { toast } from "$lib/toast";
+import { A, useNavigate } from "@solidjs/router";
+import { createResource, createSignal, For, Match, Show, Switch } from "solid-js";
 
 export default function Feed() {
+  const navigate = useNavigate();
+  const [forkDialogDeck, setForkDialogDeck] = createSignal<Deck | null>(null);
+
   const [followsFeed] = createResource(async () => {
     const res = await api.getFeedFollows();
     return res.ok ? (await res.json() as Deck[]) : [];
···
     return res.ok ? (await res.json() as Deck[]) : [];
   });
 
+  const handleFork = async () => {
+    const deck = forkDialogDeck();
+    if (!deck) return;
+    try {
+      const res = await api.forkDeck(deck.id);
+      if (res.ok) {
+        const newDeck = await res.json();
+        toast.success("Deck forked successfully!");
+        navigate(`/decks/${newDeck.id}`);
+      } else {
+        toast.error("Failed to fork deck.");
+      }
+    } catch (e) {
+      console.error(e);
+      toast.error("Error forking deck.");
+    } finally {
+      setForkDialogDeck(null);
+    }
+  };
+
   const DeckItem = (props: { deck: Deck }) => (
     <Card class="mb-4">
       <div class="flex justify-between items-start">
···
         <A href={`/decks/${props.deck.id}`} class="no-underline">
           <Button variant="secondary" size="sm">View</Button>
         </A>
-        <Button
-          variant="ghost"
-          size="sm"
-          onClick={() => {
-            // TODO: use modal or toast
-            if (confirm("Fork this deck?")) {
-              api.forkDeck(props.deck.id).then(() => alert("Forked successfully!"));
-            }
-          }}>
-          Fork
-        </Button>
+        <Button variant="ghost" size="sm" onClick={() => setForkDialogDeck(props.deck)}>Fork</Button>
       </div>
     </Card>
   );
···
           </Switch>
         )}
       </Tabs>
+
+      <Dialog
+        open={!!forkDialogDeck()}
+        onClose={() => setForkDialogDeck(null)}
+        title="Fork Deck"
+        actions={
+          <>
+            <Button variant="ghost" onClick={() => setForkDialogDeck(null)}>Cancel</Button>
+            <Button variant="primary" onClick={handleFork}>Fork Deck</Button>
+          </>
+        }>
+        <p>Are you sure you want to fork "{forkDialogDeck()?.title}"?</p>
+        <p class="text-sm text-gray-400 mt-2">This will create a copy of this deck in your library.</p>
+      </Dialog>
     </div>
   );
 }