From 8f589d8cc46bb92a8d30fe915424d0ae978be813 Mon Sep 17 00:00:00 2001
From: Owais Jamil <desertthunder.dev@gmail.com>
Date: Sat, 3 Jan 2026 13:04:07 -0600
Subject: [PATCH] feat: sync store with dexie

* indicator UI
---
 docs/todo.md                                  |   6 +-
 web/package.json                              |   2 +
 web/pnpm-lock.yaml                            |  17 ++
 web/src/components/SyncIndicator.tsx          |  63 +++++
 web/src/components/layout/Header.tsx          |   2 +
 .../components/tests/SyncIndicator.test.tsx   |  76 ++++++
 web/src/lib/api.ts                            |  10 +
 web/src/lib/db.ts                             |  84 +++++++
 web/src/lib/sync-store.ts                     | 221 ++++++++++++++++++
 web/src/lib/tests/db.test.ts                  | 203 ++++++++++++++++
 web/src/lib/tests/sync-store.test.ts          | 218 +++++++++++++++++
 11 files changed, 899 insertions(+), 3 deletions(-)
 create mode 100644 web/src/components/SyncIndicator.tsx
 create mode 100644 web/src/components/tests/SyncIndicator.test.tsx
 create mode 100644 web/src/lib/db.ts
 create mode 100644 web/src/lib/sync-store.ts
 create mode 100644 web/src/lib/tests/db.test.ts
 create mode 100644 web/src/lib/tests/sync-store.test.ts

diff --git a/docs/todo.md b/docs/todo.md
index 2f4949e..ac68fa2 100644
--- a/docs/todo.md
+++ b/docs/todo.md
@@ -33,9 +33,9 @@
 - [x] Bi-directional sync infrastructure
 - [x] Conflict resolution strategy
 - [x] API endpoints for sync operations
-- [ ] Offline queue for pending publishes
-    - [ ] Frontend sync store with IndexedDB persistence
-- [ ] Sync status UI indicators
+- [x] Offline queue for pending publishes
+- [x] Frontend sync store with IndexedDB persistence (Dexie.js)
+- [x] Sync status UI indicators
 
 **Deep Linking:**
 
diff --git a/web/package.json b/web/package.json
index a18850a..1baecd9 100644
--- a/web/package.json
+++ b/web/package.json
@@ -32,6 +32,7 @@
     "d3-force": "^3.0.0",
     "d3-selection": "^3.0.0",
     "d3-zoom": "^3.0.0",
+    "dexie": "^4.2.1",
     "motion": "^12.23.26",
     "rehype-external-links": "^3.0.0",
     "rehype-sanitize": "^6.0.0",
@@ -63,6 +64,7 @@
     "@typescript-eslint/parser": "^8.50.1",
     "eslint": "^9.39.2",
     "eslint-plugin-solid": "^0.14.5",
+    "fake-indexeddb": "^6.2.5",
     "globals": "^16.5.0",
     "jsdom": "^27.4.0",
     "satori": "^0.18.3",
diff --git a/web/pnpm-lock.yaml b/web/pnpm-lock.yaml
index aaaf1f4..ae4c7d0 100644
--- a/web/pnpm-lock.yaml
+++ b/web/pnpm-lock.yaml
@@ -68,6 +68,9 @@ importers:
       d3-zoom:
         specifier: ^3.0.0
         version: 3.0.0
+      dexie:
+        specifier: ^4.2.1
+        version: 4.2.1
       motion:
         specifier: ^12.23.26
         version: 12.23.26
@@ -156,6 +159,9 @@ importers:
       eslint-plugin-solid:
         specifier: ^0.14.5
         version: 0.14.5(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
+      fake-indexeddb:
+        specifier: ^6.2.5
+        version: 6.2.5
       globals:
         specifier: ^16.5.0
         version: 16.5.0
@@ -1403,6 +1409,9 @@ packages:
   devlop@1.1.0:
     resolution: {integrity: sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==}
 
+  dexie@4.2.1:
+    resolution: {integrity: sha512-Ckej0NS6jxQ4Po3OrSQBFddayRhTCic2DoCAG5zacOfOVB9P2Q5Xc5uL/nVa7ZVs+HdMnvUPzLFCB/JwpB6Csg==}
+
   dom-accessibility-api@0.5.16:
     resolution: {integrity: sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==}
 
@@ -1508,6 +1517,10 @@ packages:
   extend@3.0.2:
     resolution: {integrity: sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==}
 
+  fake-indexeddb@6.2.5:
+    resolution: {integrity: sha512-CGnyrvbhPlWYMngksqrSSUT1BAVP49dZocrHuK0SvtR0D5TMs5wP0o3j7jexDJW01KSadjBp1M/71o/KR3nD1w==}
+    engines: {node: '>=18'}
+
   fast-deep-equal@3.1.3:
     resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
 
@@ -3632,6 +3645,8 @@ snapshots:
     dependencies:
       dequal: 2.0.3
 
+  dexie@4.2.1: {}
+
   dom-accessibility-api@0.5.16: {}
 
   dom-accessibility-api@0.6.3: {}
@@ -3777,6 +3792,8 @@ snapshots:
 
   extend@3.0.2: {}
 
+  fake-indexeddb@6.2.5: {}
+
   fast-deep-equal@3.1.3: {}
 
   fast-json-stable-stringify@2.1.0: {}
diff --git a/web/src/components/SyncIndicator.tsx b/web/src/components/SyncIndicator.tsx
new file mode 100644
index 0000000..211646b
--- /dev/null
+++ b/web/src/components/SyncIndicator.tsx
@@ -0,0 +1,63 @@
+import { syncStore } from "$lib/sync-store";
+import { Show } from "solid-js";
+
+export function SyncIndicator() {
+  const stateClasses = () => {
+    const state = syncStore.syncState();
+    switch (state) {
+      case "syncing":
+        return "text-blue-500";
+      case "error":
+        return "text-red-500";
+      case "offline":
+        return "text-amber-500";
+      default:
+        return "text-green-500";
+    }
+  };
+
+  const stateIcon = () => {
+    const state = syncStore.syncState();
+    switch (state) {
+      case "syncing":
+        return "i-ri-loader-4-line animate-spin";
+      case "error":
+        return "i-ri-error-warning-line";
+      case "offline":
+        return "i-ri-wifi-off-line";
+      default:
+        return "i-ri-cloud-line";
+    }
+  };
+
+  const stateLabel = () => {
+    const state = syncStore.syncState();
+    switch (state) {
+      case "syncing":
+        return "Syncing...";
+      case "error":
+        return "Sync error";
+      case "offline":
+        return "Offline";
+      default:
+        return "Synced";
+    }
+  };
+
+  return (
+    <div class="flex items-center gap-2 text-sm">
+      <span class={`${stateIcon()} ${stateClasses()}`} />
+      <span class={stateClasses()}>{stateLabel()}</span>
+      <Show when={syncStore.pendingCount() > 0}>
+        <span class="rounded-full bg-blue-100 px-2 py-0.5 text-xs text-blue-700">
+          {syncStore.pendingCount()} pending
+        </span>
+      </Show>
+      <Show when={syncStore.conflictCount() > 0}>
+        <span class="rounded-full bg-red-100 px-2 py-0.5 text-xs text-red-700">
+          {syncStore.conflictCount()} conflicts
+        </span>
+      </Show>
+    </div>
+  );
+}
diff --git a/web/src/components/layout/Header.tsx b/web/src/components/layout/Header.tsx
index 3df53b1..6d817be 100644
--- a/web/src/components/layout/Header.tsx
+++ b/web/src/components/layout/Header.tsx
@@ -2,6 +2,7 @@ import { authStore } from "$lib/store";
 import { Avatar } from "$ui/Avatar";
 import { A } from "@solidjs/router";
 import { type Component, Show } from "solid-js";
+import { SyncIndicator } from "../SyncIndicator";
 
 const Login: Component = () => (
   <A href="/login" class="px-4 py-2 bg-white text-gray-900 text-sm font-medium hover:bg-gray-100 transition-colors">
@@ -29,6 +30,7 @@ export const Header: Component = () => {
       <div class="flex items-center gap-4">
         <Show when={authStore.user()} fallback={<Login />}>
           <div class="flex items-center gap-3">
+            <SyncIndicator />
             <span class="text-xs text-gray-400">{authStore.user()?.handle}</span>
             <button
               onClick={() => authStore.logout()}
diff --git a/web/src/components/tests/SyncIndicator.test.tsx b/web/src/components/tests/SyncIndicator.test.tsx
new file mode 100644
index 0000000..6e3f489
--- /dev/null
+++ b/web/src/components/tests/SyncIndicator.test.tsx
@@ -0,0 +1,76 @@
+import "fake-indexeddb/auto";
+import { cleanup, render, screen } from "@solidjs/testing-library";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+// Create a controllable mock store
+const mockState = { state: "idle" as string, pending: 0, conflicts: 0 };
+
+vi.mock(
+  "$lib/sync-store",
+  () => ({
+    syncStore: {
+      syncState: () => mockState.state,
+      pendingCount: () => mockState.pending,
+      conflictCount: () => mockState.conflicts,
+    },
+  }),
+);
+
+import { SyncIndicator } from "../SyncIndicator";
+
+describe("SyncIndicator", () => {
+  beforeEach(() => {
+    mockState.state = "idle";
+    mockState.pending = 0;
+    mockState.conflicts = 0;
+  });
+
+  afterEach(cleanup);
+
+  it("renders synced state by default", () => {
+    render(() => <SyncIndicator />);
+    expect(screen.getByText("Synced")).toBeInTheDocument();
+  });
+
+  it("renders syncing state with spinner", () => {
+    mockState.state = "syncing";
+    render(() => <SyncIndicator />);
+    expect(screen.getByText("Syncing...")).toBeInTheDocument();
+  });
+
+  it("renders error state", () => {
+    mockState.state = "error";
+    render(() => <SyncIndicator />);
+    expect(screen.getByText("Sync error")).toBeInTheDocument();
+  });
+
+  it("renders offline state", () => {
+    mockState.state = "offline";
+    render(() => <SyncIndicator />);
+    expect(screen.getByText("Offline")).toBeInTheDocument();
+  });
+
+  it("shows pending count when items are pending", () => {
+    mockState.pending = 3;
+    render(() => <SyncIndicator />);
+    expect(screen.getByText("3 pending")).toBeInTheDocument();
+  });
+
+  it("shows conflict count when conflicts exist", () => {
+    mockState.conflicts = 2;
+    render(() => <SyncIndicator />);
+    expect(screen.getByText("2 conflicts")).toBeInTheDocument();
+  });
+
+  it("hides pending badge when count is zero", () => {
+    mockState.pending = 0;
+    render(() => <SyncIndicator />);
+    expect(screen.queryByText(/pending/)).not.toBeInTheDocument();
+  });
+
+  it("hides conflict badge when count is zero", () => {
+    mockState.conflicts = 0;
+    render(() => <SyncIndicator />);
+    expect(screen.queryByText(/conflicts/)).not.toBeInTheDocument();
+  });
+});
diff --git a/web/src/lib/api.ts b/web/src/lib/api.ts
index f070c8c..ee9ba57 100644
--- a/web/src/lib/api.ts
+++ b/web/src/lib/api.ts
@@ -25,6 +25,15 @@ export async function apiFetch(path: string, options: RequestInit = {}) {
   return response;
 }
 
+const syncMethods = {
+  pushDeck: (id: string) => apiFetch(`/sync/push/deck/${id}`, { method: "POST" }),
+  pushNote: (id: string) => apiFetch(`/sync/push/note/${id}`, { method: "POST" }),
+  getSyncStatus: () => apiFetch("/sync/status", { method: "GET" }),
+  resolveConflict: (entityType: string, id: string, strategy: "last_write_wins" | "keep_local" | "keep_remote") => {
+    return apiFetch(`/sync/resolve/${entityType}/${id}`, { method: "POST", body: JSON.stringify({ strategy }) });
+  },
+};
+
 export const api = {
   get: (path: string) => apiFetch(path, { method: "GET" }),
   post: (path: string, body: unknown) => apiFetch(path, { method: "POST", body: JSON.stringify(body) }),
@@ -117,4 +126,5 @@ export const api = {
     document.body.removeChild(a);
     URL.revokeObjectURL(url);
   },
+  ...syncMethods,
 };
diff --git a/web/src/lib/db.ts b/web/src/lib/db.ts
new file mode 100644
index 0000000..a4fd36a
--- /dev/null
+++ b/web/src/lib/db.ts
@@ -0,0 +1,84 @@
+import Dexie, { type EntityTable } from "dexie";
+import type { CardType, Visibility } from "./model";
+
+export type SyncStatus = "local_only" | "synced" | "pending_push" | "conflict";
+
+type EntityKind = "deck" | "card" | "note";
+
+type OperationKind = "push" | "delete";
+
+type SyncTracking = { syncStatus: SyncStatus; localVersion: number; pdsCid?: string };
+
+export type LocalDeck = SyncTracking & {
+  id: string;
+  ownerDid: string;
+  title: string;
+  description: string;
+  tags: string[];
+  visibility: Visibility;
+  publishedAt?: string;
+  forkOf?: string;
+  pdsUri?: string;
+  updatedAt: string;
+};
+
+export type LocalCard = SyncTracking & {
+  id: string;
+  deckId: string;
+  front: string;
+  back: string;
+  mediaUrl?: string;
+  cardType: CardType;
+  hints: string[];
+};
+
+export type LocalNote = SyncTracking & {
+  id: string;
+  ownerDid: string;
+  title: string;
+  body: string;
+  tags: string[];
+  visibility: Visibility;
+  publishedAt?: string;
+  links: string[];
+  pdsUri?: string;
+  updatedAt: string;
+};
+
+export type SyncQueueItem = {
+  id?: number;
+  entityType: EntityKind;
+  entityId: string;
+  operation: OperationKind;
+  createdAt: string;
+  retryCount: number;
+  lastError?: string;
+};
+
+class MalfestioDatabase extends Dexie {
+  decks!: EntityTable<LocalDeck, "id">;
+  cards!: EntityTable<LocalCard, "id">;
+  notes!: EntityTable<LocalNote, "id">;
+  syncQueue!: EntityTable<SyncQueueItem, "id">;
+
+  constructor() {
+    super("malfestio");
+
+    this.version(1).stores({
+      decks: "id, ownerDid, syncStatus, updatedAt",
+      cards: "id, deckId, syncStatus",
+      notes: "id, ownerDid, syncStatus, updatedAt",
+      syncQueue: "++id, entityType, entityId, createdAt",
+    });
+  }
+}
+
+export const db = new MalfestioDatabase();
+
+export function generateLocalId(): string {
+  return `local_${Date.now()}_${Math.random().toString(36).slice(2, 11)}`;
+}
+
+export function isLocalId(id: string): boolean {
+  return id.startsWith("local_");
+}
diff --git a/web/src/lib/sync-store.ts b/web/src/lib/sync-store.ts
new file mode 100644
index 0000000..b17ed5f
--- /dev/null
+++ b/web/src/lib/sync-store.ts
@@ -0,0 +1,221 @@
+/**
+ * Sync store for managing offline-first sync with PDS.
+ */
+import { createRoot, createSignal } from "solid-js";
+import { api } from "./api";
+import { db, generateLocalId, type LocalDeck, type LocalNote, type SyncStatus } from "./db";
+import { authStore } from "./store";
+
+export type SyncState = "idle" | "syncing" | "error" | "offline";
+
+function createSyncStore() {
+  const [syncState, setSyncState] = createSignal<SyncState>("idle");
+  const [pendingCount, setPendingCount] = createSignal(0);
+  const [conflictCount, setConflictCount] = createSignal(0);
+  const [lastSyncedAt, setLastSyncedAt] = createSignal<string | null>(null);
+  const [isOnline, setIsOnline] = createSignal(navigator.onLine);
+
+  if (typeof window !== "undefined") {
+    window.addEventListener("online", () => {
+      setIsOnline(true);
+      processQueue();
+    });
+    window.addEventListener("offline", () => {
+      setIsOnline(false);
+      setSyncState("offline");
+    });
+  }
+
+  async function refreshCounts() {
+    const pending = await db.syncQueue.count();
+    setPendingCount(pending);
+
+    const conflicts = await db.decks.where("syncStatus").equals("conflict").count()
+      + await db.notes.where("syncStatus").equals("conflict").count();
+    setConflictCount(conflicts);
+  }
+
+  async function saveDeckLocally(
+    deck: Omit<LocalDeck, "id" | "syncStatus" | "localVersion" | "updatedAt"> & { id?: string },
+  ): Promise<LocalDeck> {
+    const now = new Date().toISOString();
+    const existing = deck.id ? await db.decks.get(deck.id) : null;
+
+    const localDeck: LocalDeck = {
+      id: deck.id || generateLocalId(),
+      ownerDid: deck.ownerDid,
+      title: deck.title,
+      description: deck.description,
+      tags: deck.tags,
+      visibility: deck.visibility,
+      publishedAt: deck.publishedAt,
+      forkOf: deck.forkOf,
+      syncStatus: existing ? "pending_push" : "local_only",
+      localVersion: existing ? existing.localVersion + 1 : 1,
+      pdsCid: existing?.pdsCid,
+      pdsUri: existing?.pdsUri,
+      updatedAt: now,
+    };
+
+    await db.decks.put(localDeck);
+
+    if (isOnline()) {
+      await queueForSync("deck", localDeck.id, "push");
+    }
+
+    await refreshCounts();
+    return localDeck;
+  }
+
+  async function saveNoteLocally(
+    note: Omit<LocalNote, "id" | "syncStatus" | "localVersion" | "updatedAt"> & { id?: string },
+  ): Promise<LocalNote> {
+    const now = new Date().toISOString();
+    const existing = note.id ? await db.notes.get(note.id) : null;
+
+    const localNote: LocalNote = {
+      id: note.id || generateLocalId(),
+      ownerDid: note.ownerDid,
+      title: note.title,
+      body: note.body,
+      tags: note.tags,
+      visibility: note.visibility,
+      publishedAt: note.publishedAt,
+      links: note.links,
+      syncStatus: existing ? "pending_push" : "local_only",
+      localVersion: existing ? existing.localVersion + 1 : 1,
+      pdsCid: existing?.pdsCid,
+      pdsUri: existing?.pdsUri,
+      updatedAt: now,
+    };
+
+    await db.notes.put(localNote);
+
+    if (isOnline()) {
+      await queueForSync("note", localNote.id, "push");
+    }
+
+    await refreshCounts();
+    return localNote;
+  }
+
+  async function queueForSync(entityType: "deck" | "card" | "note", entityId: string, operation: "push" | "delete") {
+    const existing = await db.syncQueue.where({ entityType, entityId, operation }).first();
+
+    if (!existing) {
+      await db.syncQueue.add({ entityType, entityId, operation, createdAt: new Date().toISOString(), retryCount: 0 });
+    }
+
+    await refreshCounts();
+  }
+
+  async function processQueue() {
+    if (!isOnline() || !authStore.isAuthenticated()) {
+      return;
+    }
+
+    const items = await db.syncQueue.orderBy("createdAt").toArray();
+    if (items.length === 0) return;
+
+    setSyncState("syncing");
+
+    for (const item of items) {
+      try {
+        if (item.operation === "push") {
+          let response: Response;
+          if (item.entityType === "deck") {
+            response = await api.pushDeck(item.entityId);
+          } else if (item.entityType === "note") {
+            response = await api.pushNote(item.entityId);
+          } else {
+            continue;
+          }
+
+          if (response.ok) {
+            const result = await response.json();
+            if (item.entityType === "deck") {
+              await db.decks.update(item.entityId, {
+                syncStatus: "synced" as SyncStatus,
+                pdsCid: result.pds_cid,
+                pdsUri: result.pds_uri,
+              });
+            } else if (item.entityType === "note") {
+              await db.notes.update(item.entityId, {
+                syncStatus: "synced" as SyncStatus,
+                pdsCid: result.pds_cid,
+                pdsUri: result.pds_uri,
+              });
+            }
+            await db.syncQueue.delete(item.id!);
+          } else if (response.status === 409) {
+            if (item.entityType === "deck") {
+              await db.decks.update(item.entityId, { syncStatus: "conflict" as SyncStatus });
+            } else if (item.entityType === "note") {
+              await db.notes.update(item.entityId, { syncStatus: "conflict" as SyncStatus });
+            }
+            await db.syncQueue.delete(item.id!);
+          } else {
+            await db.syncQueue.update(item.id!, {
+              retryCount: item.retryCount + 1,
+              lastError: `HTTP ${response.status}`,
+            });
+          }
+        }
+      } catch (error) {
+        console.error(`Sync failed for ${item.entityType}:${item.entityId}`, error);
+        await db.syncQueue.update(item.id!, {
+          retryCount: item.retryCount + 1,
+          lastError: error instanceof Error ? error.message : "Unknown error",
+        });
+      }
+    }
+
+    setLastSyncedAt(new Date().toISOString());
+    setSyncState(isOnline() ? "idle" : "offline");
+    await refreshCounts();
+  }
+
+  async function getLocalDecks(ownerDid: string): Promise<LocalDeck[]> {
+    return db.decks.where("ownerDid").equals(ownerDid).toArray();
+  }
+  async function getLocalNotes(ownerDid: string): Promise<LocalNote[]> {
+    return db.notes.where("ownerDid").equals(ownerDid).toArray();
+  }
+
+  async function getLocalDeck(id: string): Promise<LocalDeck | undefined> {
+    return db.decks.get(id);
+  }
+  async function getLocalNote(id: string): Promise<LocalNote | undefined> {
+    return db.notes.get(id);
+  }
+
+  async function clearAll() {
+    await db.decks.clear();
+    await db.cards.clear();
+    await db.notes.clear();
+    await db.syncQueue.clear();
+    await refreshCounts();
+  }
+
+  refreshCounts();
+
+  return {
+    syncState,
+    pendingCount,
+    conflictCount,
+    lastSyncedAt,
+    isOnline,
+    saveDeckLocally,
+    saveNoteLocally,
+    queueForSync,
+    processQueue,
+    refreshCounts,
+    getLocalDecks,
+    getLocalNotes,
+    getLocalDeck,
+    getLocalNote,
+    clearAll,
+  };
+}
+
+export const syncStore = createRoot(createSyncStore);
diff --git a/web/src/lib/tests/db.test.ts b/web/src/lib/tests/db.test.ts
new file mode 100644
index 0000000..a709848
--- /dev/null
+++ b/web/src/lib/tests/db.test.ts
@@ -0,0 +1,203 @@
+import "fake-indexeddb/auto";
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+import { db, generateLocalId, isLocalId, type LocalDeck, type LocalNote } from "../db";
+
+describe("db", () => {
+  beforeEach(async () => {
+    await db.decks.clear();
+    await db.cards.clear();
+    await db.notes.clear();
+    await db.syncQueue.clear();
+  });
+
+  afterEach(async () => {
+    await db.decks.clear();
+    await db.cards.clear();
+    await db.notes.clear();
+    await db.syncQueue.clear();
+  });
+
+  describe("generateLocalId", () => {
+    it("should generate unique IDs with local_ prefix", () => {
+      const id1 = generateLocalId();
+      const id2 = generateLocalId();
+
+      expect(id1).toMatch(/^local_\d+_[a-z0-9]+$/);
+      expect(id2).toMatch(/^local_\d+_[a-z0-9]+$/);
+      expect(id1).not.toBe(id2);
+    });
+  });
+
+  describe("isLocalId", () => {
+    it("should return true for local IDs", () => {
+      expect(isLocalId("local_123_abc")).toBe(true);
+      expect(isLocalId("local_")).toBe(true);
+    });
+
+    it("should return false for server IDs", () => {
+      expect(isLocalId("deck-123")).toBe(false);
+      expect(isLocalId("uuid-abc-def")).toBe(false);
+    });
+  });
+
+  describe("decks table", () => {
+    it("should insert and retrieve decks", async () => {
+      const deck: LocalDeck = {
+        id: "deck-1",
+        ownerDid: "did:plc:test",
+        title: "Test Deck",
+        description: "A test deck",
+        tags: ["test"],
+        visibility: { type: "Private" },
+        syncStatus: "local_only",
+        localVersion: 1,
+        updatedAt: new Date().toISOString(),
+      };
+
+      await db.decks.put(deck);
+      const retrieved = await db.decks.get("deck-1");
+
+      expect(retrieved).toBeDefined();
+      expect(retrieved?.title).toBe("Test Deck");
+      expect(retrieved?.syncStatus).toBe("local_only");
+    });
+
+    it("should query decks by ownerDid", async () => {
+      await db.decks.bulkPut([{
+        id: "deck-1",
+        ownerDid: "did:alice",
+        title: "Alice Deck 1",
+        description: "",
+        tags: [],
+        visibility: { type: "Private" },
+        syncStatus: "synced",
+        localVersion: 1,
+        updatedAt: new Date().toISOString(),
+      }, {
+        id: "deck-2",
+        ownerDid: "did:alice",
+        title: "Alice Deck 2",
+        description: "",
+        tags: [],
+        visibility: { type: "Public" },
+        syncStatus: "pending_push",
+        localVersion: 2,
+        updatedAt: new Date().toISOString(),
+      }, {
+        id: "deck-3",
+        ownerDid: "did:bob",
+        title: "Bob Deck",
+        description: "",
+        tags: [],
+        visibility: { type: "Private" },
+        syncStatus: "local_only",
+        localVersion: 1,
+        updatedAt: new Date().toISOString(),
+      }]);
+
+      const aliceDecks = await db.decks.where("ownerDid").equals("did:alice").toArray();
+      expect(aliceDecks).toHaveLength(2);
+      expect(aliceDecks.map((d) => d.title)).toContain("Alice Deck 1");
+      expect(aliceDecks.map((d) => d.title)).toContain("Alice Deck 2");
+    });
+
+    it("should query decks by syncStatus", async () => {
+      await db.decks.bulkPut([{
+        id: "deck-1",
+        ownerDid: "did:test",
+        title: "Synced",
+        description: "",
+        tags: [],
+        visibility: { type: "Private" },
+        syncStatus: "synced",
+        localVersion: 1,
+        updatedAt: new Date().toISOString(),
+      }, {
+        id: "deck-2",
+        ownerDid: "did:test",
+        title: "Conflict",
+        description: "",
+        tags: [],
+        visibility: { type: "Private" },
+        syncStatus: "conflict",
+        localVersion: 1,
+        updatedAt: new Date().toISOString(),
+      }]);
+
+      const conflicts = await db.decks.where("syncStatus").equals("conflict").toArray();
+      expect(conflicts).toHaveLength(1);
+      expect(conflicts[0].title).toBe("Conflict");
+    });
+  });
+
+  describe("notes table", () => {
+    it("should insert and retrieve notes", async () => {
+      const note: LocalNote = {
+        id: "note-1",
+        ownerDid: "did:plc:test",
+        title: "Test Note",
+        body: "This is a test note",
+        tags: ["test"],
+        visibility: { type: "Private" },
+        links: [],
+        syncStatus: "local_only",
+        localVersion: 1,
+        updatedAt: new Date().toISOString(),
+      };
+
+      await db.notes.put(note);
+      const retrieved = await db.notes.get("note-1");
+
+      expect(retrieved).toBeDefined();
+      expect(retrieved?.title).toBe("Test Note");
+      expect(retrieved?.body).toBe("This is a test note");
+    });
+  });
+
+  describe("syncQueue table", () => {
+    it("should auto-increment IDs", async () => {
+      const id1 = await db.syncQueue.add({
+        entityType: "deck",
+        entityId: "deck-1",
+        operation: "push",
+        createdAt: new Date().toISOString(),
+        retryCount: 0,
+      });
+
+      const id2 = await db.syncQueue.add({
+        entityType: "note",
+        entityId: "note-1",
+        operation: "push",
+        createdAt: new Date().toISOString(),
+        retryCount: 0,
+      });
+
+      expect(id2).toBeGreaterThan(id1!);
+    });
+
+    it("should count pending items", async () => {
+      await db.syncQueue.bulkAdd([{
+        entityType: "deck",
+        entityId: "deck-1",
+        operation: "push",
+        createdAt: new Date().toISOString(),
+        retryCount: 0,
+      }, {
+        entityType: "deck",
+        entityId: "deck-2",
+        operation: "push",
+        createdAt: new Date().toISOString(),
+        retryCount: 0,
+      }, {
+        entityType: "note",
+        entityId: "note-1",
+        operation: "push",
+        createdAt: new Date().toISOString(),
+        retryCount: 0,
+      }]);
+
+      const count = await db.syncQueue.count();
+      expect(count).toBe(3);
+    });
+  });
+});
diff --git a/web/src/lib/tests/sync-store.test.ts b/web/src/lib/tests/sync-store.test.ts
new file mode 100644
index 0000000..e850760
--- /dev/null
+++ b/web/src/lib/tests/sync-store.test.ts
@@ -0,0 +1,218 @@
+import "fake-indexeddb/auto";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { db, type LocalDeck } from "../db";
+
+vi.mock(
+  "../api",
+  () => ({
+    api: {
+      pushDeck: vi.fn().mockResolvedValue({
+        ok: true,
+        json: async () => ({ pds_cid: "cid123", pds_uri: "at://test" }),
+      }),
+      pushNote: vi.fn().mockResolvedValue({
+        ok: true,
+        json: async () => ({ pds_cid: "cid456", pds_uri: "at://test" }),
+      }),
+      getSyncStatus: vi.fn().mockResolvedValue({
+        ok: true,
+        json: async () => ({ pending_count: 0, conflict_count: 0 }),
+      }),
+      resolveConflict: vi.fn().mockResolvedValue({ ok: true }),
+    },
+  }),
+);
+
+vi.mock("../store", () => ({ authStore: { isAuthenticated: () => true, accessJwt: () => "test-token" } }));
+
+import { syncStore } from "../sync-store";
+
+describe("syncStore", () => {
+  beforeEach(async () => {
+    await db.decks.clear();
+    await db.cards.clear();
+    await db.notes.clear();
+    await db.syncQueue.clear();
+  });
+
+  afterEach(async () => {
+    await db.decks.clear();
+    await db.cards.clear();
+    await db.notes.clear();
+    await db.syncQueue.clear();
+  });
+
+  describe("state signals", () => {
+    it("should have initial idle sync state", () => {
+      expect(["idle", "offline"]).toContain(syncStore.syncState());
+    });
+
+    it("should have online status signal", () => {
+      expect(typeof syncStore.isOnline()).toBe("boolean");
+    });
+  });
+
+  describe("saveDeckLocally", () => {
+    it("should save a new deck with local_only status", async () => {
+      const deck = await syncStore.saveDeckLocally({
+        ownerDid: "did:plc:test",
+        title: "New Deck",
+        description: "Test description",
+        tags: ["test"],
+        visibility: { type: "Private" },
+      });
+
+      expect(deck.id).toMatch(/^local_/);
+      expect(deck.syncStatus).toBe("local_only");
+      expect(deck.localVersion).toBe(1);
+
+      const stored = await db.decks.get(deck.id);
+      expect(stored?.title).toBe("New Deck");
+    });
+
+    it("should update existing deck with pending_push status", async () => {
+      const deck = await syncStore.saveDeckLocally({
+        ownerDid: "did:plc:test",
+        title: "Original Title",
+        description: "Test",
+        tags: [],
+        visibility: { type: "Private" },
+      });
+
+      const updated = await syncStore.saveDeckLocally({
+        id: deck.id,
+        ownerDid: "did:plc:test",
+        title: "Updated Title",
+        description: "Test",
+        tags: [],
+        visibility: { type: "Private" },
+      });
+
+      expect(updated.id).toBe(deck.id);
+      expect(updated.title).toBe("Updated Title");
+      expect(updated.syncStatus).toBe("pending_push");
+      expect(updated.localVersion).toBe(2);
+    });
+  });
+
+  describe("saveNoteLocally", () => {
+    it("should save a new note with local_only status", async () => {
+      const note = await syncStore.saveNoteLocally({
+        ownerDid: "did:plc:test",
+        title: "New Note",
+        body: "Note content",
+        tags: ["test"],
+        visibility: { type: "Private" },
+        links: [],
+      });
+
+      expect(note.id).toMatch(/^local_/);
+      expect(note.syncStatus).toBe("local_only");
+      expect(note.localVersion).toBe(1);
+    });
+  });
+
+  describe("getLocalDecks", () => {
+    it("should return decks for a specific owner", async () => {
+      await db.decks.bulkPut([
+        {
+          id: "deck-1",
+          ownerDid: "did:alice",
+          title: "Alice Deck",
+          description: "",
+          tags: [],
+          visibility: { type: "Private" },
+          syncStatus: "synced",
+          localVersion: 1,
+          updatedAt: new Date().toISOString(),
+        } satisfies LocalDeck,
+        {
+          id: "deck-2",
+          ownerDid: "did:bob",
+          title: "Bob Deck",
+          description: "",
+          tags: [],
+          visibility: { type: "Private" },
+          syncStatus: "synced",
+          localVersion: 1,
+          updatedAt: new Date().toISOString(),
+        } satisfies LocalDeck,
+      ]);
+
+      const aliceDecks = await syncStore.getLocalDecks("did:alice");
+      expect(aliceDecks).toHaveLength(1);
+      expect(aliceDecks[0].title).toBe("Alice Deck");
+    });
+  });
+
+  describe("queueForSync", () => {
+    it("should add item to sync queue", async () => {
+      await syncStore.queueForSync("deck", "deck-123", "push");
+
+      const queue = await db.syncQueue.toArray();
+      expect(queue).toHaveLength(1);
+      expect(queue[0].entityType).toBe("deck");
+      expect(queue[0].entityId).toBe("deck-123");
+      expect(queue[0].operation).toBe("push");
+    });
+
+    it("should not duplicate queue entries", async () => {
+      await syncStore.queueForSync("deck", "deck-123", "push");
+      await syncStore.queueForSync("deck", "deck-123", "push");
+
+      const queue = await db.syncQueue.toArray();
+      expect(queue).toHaveLength(1);
+    });
+  });
+
+  describe("refreshCounts", () => {
+    it("should update pending and conflict counts", async () => {
+      await db.syncQueue.add({
+        entityType: "deck",
+        entityId: "deck-1",
+        operation: "push",
+        createdAt: new Date().toISOString(),
+        retryCount: 0,
+      });
+
+      await db.decks.put({
+        id: "deck-2",
+        ownerDid: "did:test",
+        title: "Conflict Deck",
+        description: "",
+        tags: [],
+        visibility: { type: "Private" },
+        syncStatus: "conflict",
+        localVersion: 1,
+        updatedAt: new Date().toISOString(),
+      });
+
+      await syncStore.refreshCounts();
+
+      expect(syncStore.pendingCount()).toBe(1);
+      expect(syncStore.conflictCount()).toBe(1);
+    });
+  });
+
+  describe("clearAll", () => {
+    it("should clear all local data", async () => {
+      await db.decks.put({
+        id: "deck-1",
+        ownerDid: "did:test",
+        title: "Test",
+        description: "",
+        tags: [],
+        visibility: { type: "Private" },
+        syncStatus: "synced",
+        localVersion: 1,
+        updatedAt: new Date().toISOString(),
+      });
+
+      await syncStore.clearAll();
+
+      expect(await db.decks.count()).toBe(0);
+      expect(await db.notes.count()).toBe(0);
+      expect(await db.syncQueue.count()).toBe(0);
+    });
+  });
+});
-- 
2.51.2