refactor: centralize shared type definitions in model module

* rearrange conditional rendering

web/src/components/CardEditor.tsx

···
-import type { CardType } from "$lib/store";
+import type { CardType } from "$lib/model";
 import { Button } from "$ui/Button";
 import { createEffect, createSignal, Show } from "solid-js";
 

web/src/components/DeckEditor.tsx

···
+import { fadeIn, scaleIn } from "$lib/animations";
 import { api } from "$lib/api";
-import type { Card, CardType, CreateDeckPayload, Visibility } from "$lib/store";
+import type { Card, CardType, CreateDeckPayload, Visibility } from "$lib/model";
 import { toast } from "$lib/toast";
 import { Button } from "$ui/Button";
 import { createSignal, For, Show } from "solid-js";
+import { Motion } from "solid-motionone";
 import { CardEditor } from "./CardEditor";
 
+type CardData = Card & { hints: string[]; cardType: CardType };
+
 export function DeckEditor(props: { onSave?: (deck: CreateDeckPayload) => void }) {
   const [title, setTitle] = createSignal("");
   const [description, setDescription] = createSignal("");
   const [tags, setTags] = createSignal("");
-  const [visibilityType, setVisibilityType] = createSignal<string>("Private");
+  const [visibilityType, setVisibilityType] = createSignal<Visibility["type"]>("Private");
   const [sharedWith, setSharedWith] = createSignal("");
 
   const [cards, setCards] = createSignal<Card[]>([]);
···
     if (visibilityType() === "SharedWith") {
       visibility = { type: "SharedWith", content: sharedWith().split(",").map(s => s.trim()).filter(s => s) };
     } else {
-      visibility = { type: visibilityType() as "Private" | "Unlisted" | "Public" };
+      visibility = { type: visibilityType() as Exclude<Visibility["type"], "SharedWith"> };
     }
 
     const tagsArray = tags().split(",").map(t => t.trim()).filter(t => t);
···
     }
   };
 
-  const addCard = (
-    cardData: { front: string; back: string; mediaUrl?: string; cardType: CardType; hints: string[] },
-  ) => {
+  const addCard = (cardData: CardData) => {
     const card: Card = {
       front: cardData.front,
       back: cardData.back,
···
     setShowCardEditor(false);
   };
 
-  const removeCard = (index: number) => {
-    setCards(cards().filter((_, i) => i !== index));
-  };
+  const removeCard = (index: number) => setCards(cards().filter((_, i) => i !== index));
 
   const moveCard = (from: number, to: number) => {
     if (to < 0 || to >= cards().length) return;
···
             <select
               id="visibility"
               value={visibilityType()}
-              onChange={(e) => setVisibilityType(e.target.value)}
+              onChange={(e) => setVisibilityType(e.target.value as Visibility["type"])}
               class="w-full bg-gray-800 border-gray-700 text-white rounded p-2 focus:ring-blue-500 focus:border-blue-500"
               aria-label="Visibility">
               <option value="Private">Private</option>
···
           </div>
 
           <Show when={visibilityType() === "SharedWith"}>
-            <div>
+            <Motion.div {...fadeIn}>
               <label class="block text-sm font-medium text-gray-400 mb-1">Share with DIDs (comma separated)</label>
               <input
                 type="text"
···
                 onInput={(e) => setSharedWith(e.target.value)}
                 class="w-full bg-gray-800 border-gray-700 text-white rounded p-2 focus:ring-blue-500 focus:border-blue-500"
                 placeholder="did:plc:..., did:plc:..." />
-            </div>
+            </Motion.div>
           </Show>
         </div>
 
···
                 Add Card
               </Button>
             }>
-            <CardEditor onSave={addCard} onCancel={() => setShowCardEditor(false)} />
+            <Motion.div {...scaleIn}>
+              <CardEditor onSave={addCard} onCancel={() => setShowCardEditor(false)} />
+            </Motion.div>
           </Show>
         </div>
 

web/src/components/ReviewStats.tsx

···
 import { fadeIn } from "$lib/animations";
 import { api } from "$lib/api";
-import type { ReviewCard, StudyStats } from "$lib/store";
+import type { ReviewCard, StudyStats } from "$lib/model";
 import { Skeleton } from "$ui/Skeleton";
-import type { Component } from "solid-js";
+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">
-      {/* TODO: use solid conditional components instead of ternary */}
-      {props.loading
-        ? (
+      <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>
-        )
-        : props.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">🔥 {props.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">{props.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">{props.stats.reviewed_today}</p>
-                <p class="text-sm text-gray-400">Reviewed</p>
+        }>
+        <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>
-              <div class="bg-gray-800 rounded-lg p-4">
-                <p class="text-3xl font-bold text-purple-400">{props.stats.total_reviews}</p>
-                <p class="text-sm text-gray-400">Total</p>
+
+              <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>
+              <Show when={stats().longest_streak > 0}>
+                <p class="text-sm text-gray-500 text-center">Longest streak: {stats().longest_streak} days</p>
+              </Show>
             </div>
-
-            {props.stats.longest_streak > 0 && (
-              <p class="text-sm text-gray-500 text-center">Longest streak: {props.stats.longest_streak} days</p>
-            )}
-          </div>
-        )
-        : <p class="text-gray-400">No stats available</p>}
+          )}
+        </Show>
+      </Show>
     </Motion.div>
   );
 };

web/src/components/StudySession.tsx

···
 import { scaleIn, slideInUp } from "$lib/animations";
 import { api } from "$lib/api";
-import type { Grade, ReviewCard } from "$lib/store";
+import type { Grade, ReviewCard } from "$lib/model";
 import { Button } from "$ui/Button";
 import { Dialog } from "$ui/Dialog";
 import { ProgressBar } from "$ui/ProgressBar";
···
   const currentCard = () => props.cards[currentIndex()];
   const progress = () => ((currentIndex() + 1) / props.cards.length) * 100;
   const isComplete = () => currentIndex() >= props.cards.length;
-
-  const handleFlip = () => {
-    if (!isFlipped()) {
-      setIsFlipped(true);
-    }
-  };
+  const handleFlip = () => !isFlipped() ? setIsFlipped(true) : void 0;
 
   const handleGrade = async (grade: Grade) => {
     const card = currentCard();
···
     window.removeEventListener("keydown", handleKeyDown);
   });
 
-  // Check for completion
   createEffect(() => {
     if (isComplete()) {
       props.onComplete();
···
         <ProgressBar value={progress()} color="green" size="md" />
       </div>
 
-      {/* Card */}
       <Show when={currentCard()}>
         {(card) => (
           <Motion.div {...scaleIn} class="w-full max-w-2xl">
···
               onClick={handleFlip}
               class="relative min-h-[400px] rounded-2xl cursor-pointer perspective-1000"
               style={{ "transform-style": "preserve-3d" }}>
-              {/* Front */}
               <div
                 class={`absolute inset-0 rounded-2xl bg-gradient-to-br from-gray-800 to-gray-900 border border-gray-700 p-8 flex flex-col items-center justify-center backface-hidden transition-transform duration-400 ${
                   isFlipped() ? "rotate-y-180" : ""
···
                 </Show>
               </div>
 
-              {/* Back */}
               <div
                 class={`absolute inset-0 rounded-2xl bg-gradient-to-br from-gray-800 to-gray-900 border border-gray-700 p-8 flex flex-col items-center justify-center backface-hidden transition-transform duration-400 ${
                   isFlipped() ? "" : "rotate-y-180"
···
         )}
       </Show>
 
-      {/* Grade Buttons */}
       <Show when={isFlipped()}>
         <Motion.div {...slideInUp} class="w-full max-w-2xl mt-8">
           <p class="text-center text-gray-400 text-sm mb-4">How well did you know this?</p>
···
         </Motion.div>
       </Show>
 
-      {/* Keyboard Hints */}
       <div class="fixed bottom-4 left-1/2 -translate-x-1/2 text-gray-600 text-xs flex gap-4">
         <span>Space: Flip</span>
         <span>1-5: Grade</span>
···
         <span>Esc: Exit</span>
       </div>
 
-      {/* Edit Dialog */}
       <Dialog open={showEditDialog()} onClose={() => setShowEditDialog(false)} title="Edit Card">
         <Show when={currentCard()}>
           {(card) => (

web/src/components/social/CommentSection.tsx

···
 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;
···
             class="border rounded p-2 flex-1 w-full"
             rows={2}
             placeholder="Add a comment..."
-            value={replyTo() ? "" : newComment()} // Clear if replying elsewhere, actually separate state might be better but simple for now
+            // TODO: separate state
+            value={replyTo() ? "" : newComment()}
             onInput={(e) => {
               if (!replyTo()) setNewComment(e.currentTarget.value);
             }} />

web/src/components/social/FollowButton.tsx

···
 import { api } from "$lib/api";
 import { authStore } from "$lib/store";
 import { Button } from "$ui/Button";
-import { createSignal, onMount } from "solid-js";
+import { createSignal, onMount, Show } from "solid-js";
 
 type FollowButtonProps = { did: string; initialIsFollowing?: boolean };
 
···
 
   return (
     <Button onClick={toggle} disabled={loading()} variant={isFollowing() ? "secondary" : undefined}>
-      {isFollowing() ? "Unfollow" : "Follow"}
+      <Show when={isFollowing()} fallback="Follow">Unfollow</Show>
     </Button>
   );
 }

web/src/lib/model.ts

···
+export type User = { did: string; handle: string };
+
+export type Visibility = { type: "Private" } | { type: "Unlisted" } | { type: "Public" } | {
+  type: "SharedWith";
+  content: string[];
+};
+
+export type CardType = "basic" | "cloze";
+
+export type Card = {
+  id?: string;
+  front: string;
+  back: string;
+  mediaUrl?: string;
+  cardType?: CardType;
+  hints?: string[];
+};
+
+export type Deck = {
+  id: string;
+  owner_did: string;
+  title: string;
+  description: string;
+  tags: string[];
+  visibility: Visibility;
+  published_at?: string;
+  fork_of?: string;
+};
+
+export type CreateDeckPayload = {
+  title: string;
+  description: string;
+  tags: string[];
+  visibility: Visibility;
+  cards: Card[];
+};
+
+export type Grade = 0 | 1 | 2 | 3 | 4 | 5;
+
+export type ReviewCard = {
+  review_id: string;
+  card_id: string;
+  deck_id: string;
+  deck_title: string;
+  front: string;
+  back: string;
+  media_url?: string;
+  hints: string[];
+  due_at: string;
+};
+
+export type StudyStats = {
+  due_count: number;
+  current_streak: number;
+  longest_streak: number;
+  reviewed_today: number;
+  total_reviews: number;
+};
+
+export type ReviewResponse = { ease_factor: number; interval_days: number; repetitions: number; due_at: string };

web/src/lib/store.ts

···
 import { createRoot, createSignal } from "solid-js";
-
-export type User = { did: string; handle: string };
+import type { User } from "./model";
 
 export type AuthState = {
   user: User | null;
···
 }
 
 export const authStore = createRoot(createAuthStore);
-
-export type Visibility = { type: "Private" } | { type: "Unlisted" } | { type: "Public" } | {
-  type: "SharedWith";
-  content: string[];
-};
-
-export type CardType = "basic" | "cloze";
-
-export type Card = {
-  id?: string;
-  front: string;
-  back: string;
-  mediaUrl?: string;
-  cardType?: CardType;
-  hints?: string[];
-};
-
-export type Deck = {
-  id: string;
-  owner_did: string;
-  title: string;
-  description: string;
-  tags: string[];
-  visibility: Visibility;
-  published_at?: string;
-  fork_of?: string;
-};
-
-export type CreateDeckPayload = {
-  title: string;
-  description: string;
-  tags: string[];
-  visibility: Visibility;
-  cards: Card[];
-};
-
-export type Grade = 0 | 1 | 2 | 3 | 4 | 5;
-
-export type ReviewCard = {
-  review_id: string;
-  card_id: string;
-  deck_id: string;
-  deck_title: string;
-  front: string;
-  back: string;
-  media_url?: string;
-  hints: string[];
-  due_at: string;
-};
-
-export type StudyStats = {
-  due_count: number;
-  current_streak: number;
-  longest_streak: number;
-  reviewed_today: number;
-  total_reviews: number;
-};
-
-export type ReviewResponse = { ease_factor: number; interval_days: number; repetitions: number; due_at: string };

web/src/pages/DeckNew.tsx

···
 import { DeckEditor } from "$components/DeckEditor";
 import { api } from "$lib/api";
-import type { Card, CreateDeckPayload } from "$lib/store";
+import type { Card, 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);

web/src/pages/DeckView.tsx

···
 import { FollowButton } from "$components/social/FollowButton";
 import { Button } from "$components/ui/Button";
 import { api } from "$lib/api";
-import type { Visibility } from "$lib/store";
+import type { Card, Deck } from "$lib/model";
 import { A, useParams } from "@solidjs/router";
 import type { Component } from "solid-js";
 import { createResource, For, Show } from "solid-js";
-
-type Deck = {
-  id: string;
-  title: string;
-  description: string;
-  tags: string[];
-  visibility: Visibility;
-  owner_did: string;
-};
-
-type Card = { id: string; front: string; back?: string };
 
 // TODO: use api.ts
 const fetchDeck = async (id: string): Promise<Deck | null> => {
···
 
   return (
     <div class="max-w-4xl mx-auto px-6 py-12">
-      <Show when={deck.loading}>
-        <div class="text-[#8D8D8D] font-light">Loading deck...</div>
-      </Show>
+      <Show when={!deck.loading} fallback={<div class="text-[#8D8D8D] font-light">Loading deck...</div>}>
+        <Show
+          when={deck()}
+          fallback={
+            <div class="p-8 border border-red-900/50 bg-red-900/10 text-red-400">
+              Deck not found or you don't have access.
+            </div>
+          }>
+          {deckValue => (
+            <>
+              <div class="mb-12">
+                <div class="flex justify-between items-start mb-4">
+                  <h1 class="text-4xl font-light text-[#F4F4F4] tracking-tight">{deckValue().title}</h1>
+                  <Show when={deckValue().visibility.type !== "Public"}>
+                    <span class="text-xs uppercase font-bold tracking-widest px-2 py-1 bg-[#393939] text-[#C6C6C6]">
+                      {deckValue().visibility.type}
+                    </span>
+                  </Show>
+                </div>
 
-      <Show when={!deck.loading && deck() === null}>
-        <div class="p-8 border border-red-900/50 bg-red-900/10 text-red-400">
-          Deck not found or you don't have access.
-        </div>
-      </Show>
+                <div class="flex items-center gap-4 mb-6">
+                  <div class="text-[#C6C6C6] font-light">By {deckValue().owner_did}</div>
+                  <FollowButton did={deckValue().owner_did || ""} />
+                </div>
 
-      <Show when={deck()}>
-        <div class="mb-12">
-          <div class="flex justify-between items-start mb-4">
-            <h1 class="text-4xl font-light text-[#F4F4F4] tracking-tight">{deck()?.title}</h1>
-            <Show when={deck()?.visibility.type !== "Public"}>
-              <span class="text-xs uppercase font-bold tracking-widest px-2 py-1 bg-[#393939] text-[#C6C6C6]">
-                {deck()?.visibility.type}
-              </span>
-            </Show>
-          </div>
+                <p class="text-[#C6C6C6] mb-6 font-light">{deckValue().description}</p>
 
-          <div class="flex items-center gap-4 mb-6">
-            <div class="text-[#C6C6C6] font-light">By {deck()?.owner_did}</div>
-            <FollowButton did={deck()?.owner_did || ""} />
-          </div>
+                <Show when={deckValue().tags.length > 0}>
+                  <div class="flex gap-2 mb-8">
+                    <For each={deckValue().tags}>
+                      {(tag) => (
+                        <span class="text-xs text-[#8D8D8D] bg-[#161616] px-2 py-1 border border-[#393939]">
+                          #{tag}
+                        </span>
+                      )}
+                    </For>
+                  </div>
+                </Show>
 
-          <p class="text-[#C6C6C6] mb-6 font-light">{deck()?.description}</p>
+                <div class="flex gap-4 border-t border-[#393939] pt-6">
+                  <button class="bg-[#0F62FE] hover:bg-[#0353E9] text-white px-6 py-3 font-medium text-sm transition-colors">
+                    Study Deck (Coming Soon)
+                  </button>
+                  <Button
+                    onClick={handleFork}
+                    variant="secondary"
+                    class="border border-[#393939] text-[#F4F4F4] hover:bg-[#262626] px-6 py-3 font-medium text-sm transition-colors">
+                    Fork Deck
+                  </Button>
+                  <A
+                    href="/"
+                    class="px-6 py-3 border border-[#393939] text-[#F4F4F4] hover:bg-[#262626] font-medium text-sm transition-colors">
+                    Back to Library
+                  </A>
+                </div>
+              </div>
+              <div>
+                <h2 class="text-xl font-medium text-[#F4F4F4] mb-6 border-b border-[#393939] pb-4">
+                  Cards <Show when={cards()}>{value => value().length}</Show>
+                </h2>
 
-          <div class="flex gap-2 mb-8">
-            <For each={deck()?.tags}>
-              {(tag) => (
-                <span class="text-xs text-[#8D8D8D] bg-[#161616] px-2 py-1 border border-[#393939]">#{tag}</span>
-              )}
-            </For>
-          </div>
+                <Show when={cards.loading}>
+                  <div class="text-[#8D8D8D] font-light text-sm">Loading cards...</div>
+                </Show>
 
-          <div class="flex gap-4 border-t border-[#393939] pt-6">
-            <button class="bg-[#0F62FE] hover:bg-[#0353E9] text-white px-6 py-3 font-medium text-sm transition-colors">
-              Study Deck (Coming Soon)
-            </button>
-            <Button
-              onClick={handleFork}
-              variant="secondary"
-              class="border border-[#393939] text-[#F4F4F4] hover:bg-[#262626] px-6 py-3 font-medium text-sm transition-colors">
-              Fork Deck
-            </Button>
-            <A
-              href="/"
-              class="px-6 py-3 border border-[#393939] text-[#F4F4F4] hover:bg-[#262626] font-medium text-sm transition-colors">
-              Back to Library
-            </A>
-          </div>
-        </div>
-
-        <div>
-          <h2 class="text-xl font-medium text-[#F4F4F4] mb-6 border-b border-[#393939] pb-4">
-            Cards ({cards()?.length || 0})
-          </h2>
-
-          <Show when={cards.loading}>
-            <div class="text-[#8D8D8D] font-light text-sm">Loading cards...</div>
-          </Show>
-
-          <div class="grid gap-4">
-            <For each={cards()}>
-              {(card, i) => (
-                <div class="p-6 bg-[#262626] border border-[#393939] hover:border-[#525252] transition-colors group">
-                  <div class="flex justify-between items-start mb-2 text-xs text-[#8D8D8D] font-mono">
-                    <span class="opacity-50">CARD {i() + 1}</span>
-                  </div>
-                  <div class="grid md:grid-cols-2 gap-8">
-                    <div class="prose prose-invert prose-sm max-w-none">
-                      <div class="text-[10px] uppercase tracking-widest text-[#525252] mb-1">Front</div>
-                      <div class="text-[#E0E0E0]">{card.front}</div>
-                    </div>
-                    <div class="prose prose-invert prose-sm max-w-none md:border-l md:border-[#393939] md:pl-8">
-                      <div class="text-[10px] uppercase tracking-widest text-[#525252] mb-1">Back</div>
-                      <div class="text-[#C6C6C6]">{card.back || <span class="italic opacity-50">Empty</span>}</div>
-                    </div>
-                  </div>
+                <div class="grid gap-4">
+                  <For
+                    each={cards()}
+                    fallback={
+                      <div class="text-center py-12 border border-dashed border-[#393939] text-[#8D8D8D] font-light italic">
+                        No cards in this deck.
+                      </div>
+                    }>
+                    {(card, i) => (
+                      <div class="p-6 bg-[#262626] border border-[#393939] hover:border-[#525252] transition-colors group">
+                        <div class="flex justify-between items-start mb-2 text-xs text-[#8D8D8D] font-mono">
+                          <span class="opacity-50">CARD {i() + 1}</span>
+                        </div>
+                        <div class="grid md:grid-cols-2 gap-8">
+                          <div class="prose prose-invert prose-sm max-w-none">
+                            <div class="text-[10px] uppercase tracking-widest text-[#525252] mb-1">Front</div>
+                            <div class="text-[#E0E0E0]">{card.front}</div>
+                          </div>
+                          <div class="prose prose-invert prose-sm max-w-none md:border-l md:border-[#393939] md:pl-8">
+                            <div class="text-[10px] uppercase tracking-widest text-[#525252] mb-1">Back</div>
+                            <div class="text-[#C6C6C6]">
+                              {card.back || <span class="italic opacity-50">Empty</span>}
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    )}
+                  </For>
                 </div>
-              )}
-            </For>
-
-            <Show when={!cards.loading && cards()?.length === 0}>
-              <div class="text-center py-12 border border-dashed border-[#393939] text-[#8D8D8D] font-light italic">
-                No cards in this deck.
               </div>
-            </Show>
-          </div>
-        </div>
-
-        <div class="mt-12 pt-8 border-t border-[#393939]">
-          <CommentSection deckId={deck()!.id} />
-        </div>
+              <div class="mt-12 pt-8 border-t border-[#393939]">
+                <CommentSection deckId={deckValue().id} />
+              </div>
+            </>
+          )}
+        </Show>
       </Show>
     </div>
   );

web/src/pages/Feed.tsx

···
 import { Card } from "$components/ui/Card";
 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";
-
-type Deck = { id: string; title: string; description: string; owner_did: string; published_at: string; tags: string[] };
 
 export default function Feed() {
   const [followsFeed] = createResource(async () => {
···
         <div>
           <h3 class="text-xl font-bold mb-1">{props.deck.title}</h3>
           <p class="text-sm text-gray-400 mb-2">
-            By {props.deck.owner_did} • {new Date(props.deck.published_at).toLocaleDateString()}
+            By {props.deck.owner_did} •{" "}
+            <Show when={props.deck.published_at} fallback="Draft">
+              {published_at => new Date(published_at()).toLocaleDateString()}
+            </Show>
           </p>
           <p class="mb-3">{props.deck.description}</p>
           <div class="flex gap-2 mb-3">
···
               <div class="mt-4">
                 <Show when={followsFeed()}>
                   {feed => (
-                    <Show
-                      when={feed().length > 0}
+                    <For
+                      each={feed()}
                       fallback={<div class="text-gray-500 py-8 text-center">No updates from followed users.</div>}>
-                      <For each={feed()}>{(deck) => <DeckItem deck={deck} />}</For>
-                    </Show>
+                      {(deck) => <DeckItem deck={deck} />}
+                    </For>
                   )}
                 </Show>
               </div>
             </Match>
             <Match when={activeTab() === "trending"}>
               <div class="mt-4">
-                <For each={valuableFeed()}>{(deck) => <DeckItem deck={deck} />}</For>
+                <Show when={valuableFeed()}>
+                  {feed => (
+                    <For each={feed()} fallback={<div class="text-gray-500 py-8 text-center">No trending decks.</div>}>
+                      {(deck) => <DeckItem deck={deck} />}
+                    </For>
+                  )}
+                </Show>
               </div>
             </Match>
           </Switch>

web/src/pages/Home.tsx

···
 import { api } from "$lib/api";
-import type { Visibility } from "$lib/store";
+import type { Deck } from "$lib/model";
 import { A } from "@solidjs/router";
 import type { Component } from "solid-js";
 import { createResource, For, Show } from "solid-js";
 
-type Deck = {
-  id: string;
-  title: string;
-  description: string;
-  tags: string[];
-  visibility: Visibility;
-  owner_did: string;
-};
-
+// 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) => {
-  return (
-    <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">
-        <h3 class="text-lg font-normal text-[#F4F4F4] group-hover:text-[#0F62FE] transition-colors line-clamp-1">
-          {props.deck.title}
-        </h3>
-        <Show when={props.deck.visibility.type !== "Public"}>
-          <span class="text-[10px] uppercase font-bold tracking-widest px-2 py-0.5 bg-[#393939] text-[#C6C6C6]">
-            {props.deck.visibility.type}
-          </span>
-        </Show>
-      </div>
-      <p class="text-sm text-[#C6C6C6] mb-6 line-clamp-2 flex-grow font-light">{props.deck.description}</p>
+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">
+      <h3 class="text-lg font-normal text-[#F4F4F4] group-hover:text-[#0F62FE] transition-colors line-clamp-1">
+        {props.deck.title}
+      </h3>
+      <Show when={props.deck.visibility.type !== "Public"}>
+        <span class="text-[10px] uppercase font-bold tracking-widest px-2 py-0.5 bg-[#393939] text-[#C6C6C6]">
+          {props.deck.visibility.type}
+        </span>
+      </Show>
+    </div>
+    <p class="text-sm text-[#C6C6C6] mb-6 line-clamp-2 flex-grow font-light">{props.deck.description}</p>
 
-      <div class="flex items-center gap-2 mb-4 flex-wrap">
-        <For each={props.deck.tags}>
-          {(tag) => <span class="text-xs text-[#8D8D8D] bg-[#161616] px-2 py-0.5 border border-[#393939]">#{tag}</span>}
-        </For>
-      </div>
+    <div class="flex items-center gap-2 mb-4 flex-wrap">
+      <For each={props.deck.tags}>
+        {(tag) => <span class="text-xs text-[#8D8D8D] bg-[#161616] px-2 py-0.5 border border-[#393939]">#{tag}</span>}
+      </For>
+    </div>
 
-      <div class="flex justify-end pt-4 border-t border-[#393939] mt-auto">
-        <A
-          href={`/decks/${props.deck.id}`}
-          class="text-sm font-medium text-[#0F62FE] hover:text-[#0353E9] flex items-center gap-1">
-          View Deck <span class="group-hover:translate-x-1 transition-transform">→</span>
-        </A>
-      </div>
+    <div class="flex justify-end pt-4 border-t border-[#393939] mt-auto">
+      <A
+        href={`/decks/${props.deck.id}`}
+        class="text-sm font-medium text-[#0F62FE] hover:text-[#0353E9] flex items-center gap-1">
+        View Deck <span class="group-hover:translate-x-1 transition-transform">→</span>
+      </A>
     </div>
-  );
-};
+  </div>
+);
 
 const Home: Component = () => {
   const [decks] = createResource(fetchDecks);
···
       </div>
 
       <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-        <Show when={decks.loading}>
-          <div class="col-span-full h-32 flex items-center justify-center text-[#8D8D8D] font-light">
-            Loading library...
-          </div>
-        </Show>
-
-        <Show when={!decks.loading && decks()?.length === 0}>
-          <div class="col-span-full py-16 text-center border border-dashed border-[#393939] bg-[#262626]/50">
-            <h3 class="text-lg font-medium text-[#F4F4F4] mb-2">No decks found</h3>
-            <p class="text-sm text-[#C6C6C6] max-w-sm mx-auto font-light">
-              Create your first deck to get started with spaced repetition learning.
-            </p>
-          </div>
+        <Show
+          when={!decks.loading}
+          fallback={
+            <div class="col-span-full h-32 flex items-center justify-center text-[#8D8D8D] font-light">
+              Loading library...
+            </div>
+          }>
+          <For
+            each={decks()}
+            fallback={
+              <div class="col-span-full py-16 text-center border border-dashed border-[#393939] bg-[#262626]/50">
+                <h3 class="text-lg font-medium text-[#F4F4F4] mb-2">No decks found</h3>
+                <p class="text-sm text-[#C6C6C6] max-w-sm mx-auto font-light">
+                  Create your first deck to get started with spaced repetition learning.
+                </p>
+              </div>
+            }>
+            {(deck) => <DeckCard deck={deck} />}
+          </For>
         </Show>
-
-        <For each={decks()}>{(deck) => <DeckCard deck={deck} />}</For>
       </div>
     </div>
   );

web/src/pages/Review.tsx

···
 import { fetchDueCards, fetchStudyStats, ReviewStats } from "$components/ReviewStats";
 import { StudySession } from "$components/StudySession";
 import { fadeIn } from "$lib/animations";
-import type { ReviewCard, StudyStats as StudyStatsType } from "$lib/store";
+import type { ReviewCard, StudyStats as StudyStatsType } from "$lib/model";
 import { Button } from "$ui/Button";
 import { Skeleton } from "$ui/Skeleton";
 import { useNavigate, useParams } from "@solidjs/router";
···
               when={cards().length > 0}
               fallback={
                 <div class="text-center py-8">
+                  {/* TODO: replace with an icon */}
                   <p class="text-4xl mb-4">🎉</p>
-                  <h2 class="text-xl font-semibold text-white mb-2">
-                    {sessionComplete() ? "Session Complete!" : "All Caught Up!"}
-                  </h2>
-                  <p class="text-gray-400 mb-6">
-                    {sessionComplete()
-                      ? "Great job! You've reviewed all your due cards."
-                      : "You have no cards due for review right now."}
-                  </p>
+                  <Show
+                    when={sessionComplete()}
+                    fallback={
+                      <>
+                        <h2 class="text-xl font-semibold text-white mb-2">All Caught Up!</h2>
+                        <p class="text-gray-400 mb-6">You have no cards due for review right now.</p>
+                      </>
+                    }>
+                    <>
+                      <h2 class="text-xl font-semibold text-white mb-2">Session Complete!</h2>
+                      <p class="text-gray-400 mb-6">Great job! You've reviewed all your due cards.</p>
+                    </>
+                  </Show>
                   <Button onClick={() => navigate("/")} variant="secondary">Back to Library</Button>
                 </div>
               }>
···
           </Show>
         </div>
 
-        <div class="mt-8 bg-gray-900/50 rounded-xl p-6 border border-gray-800/50">
+        <Motion.div {...fadeIn} class="mt-8 bg-gray-900/50 rounded-xl p-6 border border-gray-800/50">
           <h3 class="text-sm font-semibold text-gray-400 mb-4">Keyboard Shortcuts</h3>
           <div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
             <div class="flex items-center gap-2">
···
               <span class="text-gray-400">Exit session</span>
             </div>
           </div>
-        </div>
+        </Motion.div>
       </Motion.div>
     </Show>
   );