refactor: centralize API calls

web/src/components/ReviewStats.tsx

···
 import { fadeIn } from "$lib/animations";
-import { api } from "$lib/api";
-import type { ReviewCard, StudyStats } from "$lib/model";
+import type { StudyStats } from "$lib/model";
 import { Skeleton } from "$ui/Skeleton";
 import { type Component, Show } from "solid-js";
 import { Motion } from "solid-motionone";
 
 type ReviewStatsProps = { stats: StudyStats | null; loading?: boolean };
 
-export const ReviewStats: Component<ReviewStatsProps> = (props) => {
-  return (
-    <Motion.div {...fadeIn} class="bg-gray-900 rounded-xl p-6 border border-gray-800">
-      <Show
-        when={!props.loading}
-        fallback={
+export const ReviewStats: Component<ReviewStatsProps> = (props) => (
+  <Motion.div {...fadeIn} class="bg-gray-900 rounded-xl p-6 border border-gray-800">
+    <Show
+      when={!props.loading}
+      fallback={
+        <div class="space-y-4">
+          <Skeleton class="h-6 w-32" />
+          <Skeleton class="h-4 w-48" />
+          <Skeleton class="h-4 w-40" />
+        </div>
+      }>
+      <Show when={props.stats} fallback={<p class="text-gray-400">No stats available</p>}>
+        {stats => (
           <div class="space-y-4">
-            <Skeleton class="h-6 w-32" />
-            <Skeleton class="h-4 w-48" />
-            <Skeleton class="h-4 w-40" />
-          </div>
-        }>
-        <Show when={props.stats} fallback={<p class="text-gray-400">No stats available</p>}>
-          {stats => (
-            <div class="space-y-4">
-              <div class="flex items-center justify-between">
-                <h3 class="text-lg font-semibold text-white">Study Progress</h3>
-                {/* TODO: fire icon */}
-                <span class="text-2xl">🔥 {stats().current_streak} day streak</span>
+            <div class="flex items-center justify-between">
+              <h3 class="text-lg font-semibold text-white">Study Progress</h3>
+              {/* TODO: fire icon */}
+              <span class="text-2xl">🔥 {stats().current_streak} day streak</span>
+            </div>
+
+            <div class="grid grid-cols-3 gap-4 text-center">
+              <div class="bg-gray-800 rounded-lg p-4">
+                <p class="text-3xl font-bold text-blue-400">{stats().due_count}</p>
+                <p class="text-sm text-gray-400">Due Today</p>
+              </div>
+              <div class="bg-gray-800 rounded-lg p-4">
+                <p class="text-3xl font-bold text-green-400">{stats().reviewed_today}</p>
+                <p class="text-sm text-gray-400">Reviewed</p>
               </div>
-
-              <div class="grid grid-cols-3 gap-4 text-center">
-                <div class="bg-gray-800 rounded-lg p-4">
-                  <p class="text-3xl font-bold text-blue-400">{stats().due_count}</p>
-                  <p class="text-sm text-gray-400">Due Today</p>
-                </div>
-                <div class="bg-gray-800 rounded-lg p-4">
-                  <p class="text-3xl font-bold text-green-400">{stats().reviewed_today}</p>
-                  <p class="text-sm text-gray-400">Reviewed</p>
-                </div>
-                <div class="bg-gray-800 rounded-lg p-4">
-                  <p class="text-3xl font-bold text-purple-400">{stats().total_reviews}</p>
-                  <p class="text-sm text-gray-400">Total</p>
-                </div>
+              <div class="bg-gray-800 rounded-lg p-4">
+                <p class="text-3xl font-bold text-purple-400">{stats().total_reviews}</p>
+                <p class="text-sm text-gray-400">Total</p>
               </div>
-              <Show when={stats().longest_streak > 0}>
-                <p class="text-sm text-gray-500 text-center">Longest streak: {stats().longest_streak} days</p>
-              </Show>
             </div>
-          )}
-        </Show>
+            <Show when={stats().longest_streak > 0}>
+              <p class="text-sm text-gray-500 text-center">Longest streak: {stats().longest_streak} days</p>
+            </Show>
+          </div>
+        )}
       </Show>
-    </Motion.div>
-  );
-};
-
-// TODO: move this to api.ts
-export async function fetchStudyStats(): Promise<StudyStats | null> {
-  try {
-    const response = await api.getStats();
-    if (response.ok) {
-      return response.json();
-    }
-  } catch (err) {
-    console.error("Failed to fetch stats:", err);
-  }
-  return null;
-}
-
-// TODO: move this to api.ts
-export async function fetchDueCards(deckId?: string): Promise<ReviewCard[]> {
-  try {
-    const response = await api.getDueCards(deckId);
-    if (response.ok) {
-      return response.json();
-    }
-  } catch (err) {
-    console.error("Failed to fetch due cards:", err);
-  }
-  return [];
-}
+    </Show>
+  </Motion.div>
+);

web/src/components/social/CommentSection.tsx

···
 import { api } from "$lib/api";
+import type { Comment } from "$lib/model";
 import { authStore } from "$lib/store";
 import { Button } from "$ui/Button";
 import { createResource, createSignal, For, Show } from "solid-js";
-
-// TODO: move to model.ts
-type Comment = {
-  id: string;
-  deck_id: string;
-  author_did: string;
-  content: string;
-  parent_id: string | null;
-  created_at: string;
-};
 
 type CommentNode = { comment: Comment; children: CommentNode[] };
 

web/src/lib/api.ts

···
+import type { CreateDeckPayload } from "./model";
 import { authStore } from "./store";
 
 const API_BASE = "/api";
···
     if (deckId) params.set("deck_id", deckId);
     return apiFetch(`/review/due?${params}`, { method: "GET" });
   },
-  submitReview: (cardId: string, grade: number) =>
-    apiFetch("/review/submit", { method: "POST", body: JSON.stringify({ card_id: cardId, grade }) }),
+  submitReview: (cardId: string, grade: number) => {
+    return apiFetch("/review/submit", { method: "POST", body: JSON.stringify({ card_id: cardId, grade }) });
+  },
   getStats: () => apiFetch("/review/stats", { method: "GET" }),
   follow: (did: string) => apiFetch(`/social/follow/${did}`, { method: "POST" }),
   unfollow: (did: string) => apiFetch(`/social/unfollow/${did}`, { method: "POST" }),
   getFollowers: (did: string) => apiFetch(`/social/followers/${did}`, { method: "GET" }),
   getFollowing: (did: string) => apiFetch(`/social/following/${did}`, { method: "GET" }),
-  addComment: (deckId: string, content: string, parentId?: string) =>
-    apiFetch(`/decks/${deckId}/comments`, { method: "POST", body: JSON.stringify({ content, parent_id: parentId }) }),
+  addComment: (deckId: string, content: string, parentId?: string) => {
+    return apiFetch(`/decks/${deckId}/comments`, {
+      method: "POST",
+      body: JSON.stringify({ content, parent_id: parentId }),
+    });
+  },
   getComments: (deckId: string) => apiFetch(`/decks/${deckId}/comments`, { method: "GET" }),
   getFeedFollows: () => apiFetch("/feeds/follows", { method: "GET" }),
   getFeedTrending: () => apiFetch("/feeds/trending", { method: "GET" }),
   forkDeck: (deckId: string) => apiFetch(`/decks/${deckId}/fork`, { method: "POST" }),
+  getDecks: () => apiFetch("/decks", { method: "GET" }),
+  getDeck: (id: string) => apiFetch(`/decks/${id}`, { method: "GET" }),
+  getDeckCards: (id: string) => apiFetch(`/decks/${id}/cards`, { method: "GET" }),
+  createDeck: async (payload: CreateDeckPayload) => {
+    const { cards, ...deckPayload } = payload;
+    const res = await apiFetch("/decks", { method: "POST", body: JSON.stringify(deckPayload) });
+    if (!res.ok) return res;
+
+    const deck = await res.json();
+    if (cards && cards.length > 0) {
+      await Promise.all(cards.map((c) =>
+        apiFetch("/cards", {
+          method: "POST",
+          body: JSON.stringify({ deck_id: deck.id, front: c.front, back: c.back, media_url: c.mediaUrl }),
+        })
+      ));
+    }
+
+    return { ok: true, json: async () => deck };
+  },
 };

web/src/lib/model.ts

···
 };
 
 export type ReviewResponse = { ease_factor: number; interval_days: number; repetitions: number; due_at: string };
+
+export type Comment = {
+  id: string;
+  deck_id: string;
+  author_did: string;
+  content: string;
+  parent_id: string | null;
+  created_at: string;
+};
+
+export type CommentNode = { comment: Comment; children: CommentNode[] };

web/src/pages/DeckNew.tsx

···
 import { DeckEditor } from "$components/DeckEditor";
 import { api } from "$lib/api";
-import type { Card, CreateDeckPayload } from "$lib/model";
+import type { CreateDeckPayload } from "$lib/model";
 import { toast } from "$lib/toast";
 import { useNavigate } from "@solidjs/router";
 import type { Component } from "solid-js";
···
   const navigate = useNavigate();
 
   const handleSave = async (data: CreateDeckPayload) => {
-    // TODO: some of this can be in api.ts
     try {
-      const { cards, ...deckPayload } = data;
-      const res = await api.post("/decks", deckPayload);
-
+      const res = await api.createDeck(data);
       if (res.ok) {
         const deck = await res.json();
-
-        if (cards && cards.length > 0) {
-          await Promise.all(
-            cards.map((c: Card) =>
-              api.post("/cards", { deck_id: deck.id, front: c.front, back: c.back, media_url: c.mediaUrl })
-            ),
-          );
-        }
-
         toast.success("Deck created successfully");
         navigate(`/decks/${deck.id}`);
       } else {

web/src/pages/DeckView.tsx

···
 import type { Component } from "solid-js";
 import { createResource, For, Show } from "solid-js";
 
-// TODO: use api.ts
-const fetchDeck = async (id: string): Promise<Deck | null> => {
-  const res = await api.get(`/decks/${id}`);
-  if (!res.ok) return null;
-  return res.json();
-};
-
-// TODO: use api.ts
-const fetchCards = async (id: string): Promise<Card[]> => {
-  const res = await api.get(`/decks/${id}/cards`);
-  if (!res.ok) return [];
-  return res.json();
-};
-
 const DeckView: Component = () => {
   const params = useParams();
-  const [deck] = createResource(() => params.id, fetchDeck);
-  const [cards] = createResource(() => params.id, fetchCards);
+  const [deck] = createResource(() => params.id, async (id) => {
+    const res = await api.getDeck(id);
+    return res.ok ? (await res.json() as Deck) : null;
+  });
+  const [cards] = createResource(() => params.id, async (id) => {
+    const res = await api.getDeckCards(id);
+    return res.ok ? (await res.json() as Card[]) : [];
+  });
 
   const handleFork = async () => {
     if (!deck()) return;

web/src/pages/Home.tsx

···
 import type { Component } from "solid-js";
 import { createResource, For, Show } from "solid-js";
 
-// TODO: use api.ts
-const fetchDecks = async (): Promise<Deck[]> => {
-  const res = await api.get("/decks");
-  if (!res.ok) return [];
-  return res.json();
-};
-
 const DeckCard: Component<{ deck: Deck }> = (props) => (
   <div class="bg-[#262626] border border-[#393939] p-4 hover:border-[#0F62FE] transition-colors group relative h-full flex flex-col">
     <div class="flex justify-between items-start mb-2">
···
 );
 
 const Home: Component = () => {
-  const [decks] = createResource(fetchDecks);
+  const [decks] = createResource(async () => {
+    const res = await api.getDecks();
+    return res.ok ? (await res.json() as Deck[]) : [];
+  });
 
   return (
     <div class="max-w-7xl mx-auto px-0 py-8">

web/src/pages/Review.tsx

···
-import { fetchDueCards, fetchStudyStats, ReviewStats } from "$components/ReviewStats";
+import { ReviewStats } from "$components/ReviewStats";
 import { StudySession } from "$components/StudySession";
 import { fadeIn } from "$lib/animations";
+import { api } from "$lib/api";
 import type { ReviewCard, StudyStats as StudyStatsType } from "$lib/model";
 import { Button } from "$ui/Button";
 import { Skeleton } from "$ui/Skeleton";
···
   const [sessionComplete, setSessionComplete] = createSignal(false);
 
   onMount(async () => {
-    const [statsData, cardsData] = await Promise.all([fetchStudyStats(), fetchDueCards(params.deckId)]);
-    setStats(statsData);
-    setCards(cardsData);
+    const [statsRes, cardsRes] = await Promise.all([api.getStats(), api.getDueCards(params.deckId)]);
+    if (statsRes.ok) setStats(await statsRes.json());
+    if (cardsRes.ok) setCards(await cardsRes.json());
     setLoading(false);
   });
 
···
   const handleComplete = async () => {
     setSessionActive(false);
     setSessionComplete(true);
-    const newStats = await fetchStudyStats();
-    setStats(newStats);
+    const res = await api.getStats();
+    if (res.ok) setStats(await res.json());
   };
 
   const handleExit = () => {