From 9eede674b6baab6dbe6c56d660825d8b4913ab35 Mon Sep 17 00:00:00 2001
From: gitea <znup@MacBook-Pro.local>
Date: Fri, 13 Feb 2026 15:31:25 +0100
Subject: [PATCH] create deck with json

---
 .env.sample                                   |   4 +
 package-lock.json                             |  24 +-
 package.json                                  |   3 +-
 src/App.svelte                                |  49 +--
 src/lib/Navbar.svelte                         |  30 +-
 src/lib/QuestionEditor.svelte                 | 180 +++++++++
 src/lib/api/decks.js                          | 122 +++++++
 src/lib/cards.js                              |  50 ---
 src/lib/deckConfig.js                         |  12 +
 src/lib/stores/auth.js                        |   9 +-
 src/lib/supabase.js                           |   4 +-
 src/routes/Community.svelte                   | 135 +++++++
 src/routes/CreateDeck.svelte                  | 337 +++++++++++++++++
 src/routes/EditDeck.svelte                    | 341 ++++++++++++++++++
 src/routes/MyDecks.svelte                     | 211 +++++++++++
 ...50213000000_create_decks_and_questions.sql | 117 ++++++
 16 files changed, 1537 insertions(+), 91 deletions(-)
 create mode 100644 src/lib/QuestionEditor.svelte
 create mode 100644 src/lib/api/decks.js
 delete mode 100644 src/lib/cards.js
 create mode 100644 src/lib/deckConfig.js
 create mode 100644 src/routes/Community.svelte
 create mode 100644 src/routes/CreateDeck.svelte
 create mode 100644 src/routes/EditDeck.svelte
 create mode 100644 src/routes/MyDecks.svelte
 create mode 100644 supabase/migrations/20250213000000_create_decks_and_questions.sql

diff --git a/.env.sample b/.env.sample
index 832fcfe..84aecc5 100644
--- a/.env.sample
+++ b/.env.sample
@@ -6,3 +6,7 @@ VITE_SUPABASE_ANON_KEY=your-anon-key
 
 # Optional: for OAuth / magic link redirects
 # VITE_SUPABASE_REDIRECT_URL=http://localhost:5173
+
+# App uses schema "omotomo" for decks/questions. Ensure the API exposes it:
+# Self-hosted: add "omotomo" to PostgREST db-schemas (e.g. in config).
+# Cloud: Dashboard > Project Settings > API > Exposed schemas.
diff --git a/package-lock.json b/package-lock.json
index d17c247..8dc4b34 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,8 @@
       "name": "omotomo_site",
       "version": "0.0.0",
       "dependencies": {
-        "@supabase/supabase-js": "^2.95.3"
+        "@supabase/supabase-js": "^2.95.3",
+        "svelte-spa-router": "^4.0.1"
       },
       "devDependencies": {
         "@sveltejs/vite-plugin-svelte": "^6.2.1",
@@ -1285,6 +1286,15 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/regexparam": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/regexparam/-/regexparam-2.0.2.tgz",
+      "integrity": "sha512-A1PeDEYMrkLrfyOwv2jwihXbo9qxdGD3atBYQA9JJgreAx8/7rC6IUkWOw2NQlOxLp2wL0ifQbh1HuidDfYA6w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/rollup": {
       "version": "4.57.1",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.57.1.tgz",
@@ -1367,6 +1377,18 @@
         "node": ">=18"
       }
     },
+    "node_modules/svelte-spa-router": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/svelte-spa-router/-/svelte-spa-router-4.0.1.tgz",
+      "integrity": "sha512-2JkmUQ2f9jRluijL58LtdQBIpynSbem2eBGp4zXdi7aDY1znbR6yjw0KsonD0aq2QLwf4Yx4tBJQjxIjgjXHKg==",
+      "license": "MIT",
+      "dependencies": {
+        "regexparam": "2.0.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ItalyPaleAle"
+      }
+    },
     "node_modules/tinyglobby": {
       "version": "0.2.15",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
diff --git a/package.json b/package.json
index d49b080..7a6cd01 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "vite": "^7.3.1"
   },
   "dependencies": {
-    "@supabase/supabase-js": "^2.95.3"
+    "@supabase/supabase-js": "^2.95.3",
+    "svelte-spa-router": "^4.0.1"
   }
 }
diff --git a/src/App.svelte b/src/App.svelte
index 1d097ed..cb48c8d 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -1,10 +1,20 @@
 <script>
   import { onMount } from 'svelte';
+  import Router from 'svelte-spa-router';
   import Navbar from './lib/Navbar.svelte';
   import Footer from './lib/Footer.svelte';
-  import Card from './lib/Card.svelte';
+  import MyDecks from './routes/MyDecks.svelte';
+  import CreateDeck from './routes/CreateDeck.svelte';
+  import EditDeck from './routes/EditDeck.svelte';
+  import Community from './routes/Community.svelte';
   import { auth } from './lib/stores/auth.js';
-  import { cards } from './lib/cards.js';
+
+  const routes = {
+    '/': MyDecks,
+    '/decks/new': CreateDeck,
+    '/decks/:id/edit': EditDeck,
+    '/community': Community,
+  };
 
   onMount(() => {
     auth.init();
@@ -13,44 +23,13 @@
 
 <Navbar />
 <main class="main">
-  <div class="grid">
-    {#each cards as card (card.id)}
-      <Card {card} />
-    {/each}
-  </div>
+  <Router {routes} />
 </main>
 <Footer />
 
 <style>
   .main {
+    flex: 1;
     width: 100%;
-    padding: 1.5rem;
-    box-sizing: border-box;
-  }
-
-  .grid {
-    display: grid;
-    gap: 1.5rem;
-    width: 100%;
-    max-width: 100%;
-    grid-template-columns: 1fr;
-  }
-
-  @media (min-width: 600px) {
-    .grid {
-      grid-template-columns: repeat(2, 1fr);
-    }
-  }
-
-  @media (min-width: 900px) {
-    .grid {
-      grid-template-columns: repeat(4, 1fr);
-    }
-  }
-
-  @media (min-width: 1400px) {
-    .grid {
-      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-    }
   }
 </style>
diff --git a/src/lib/Navbar.svelte b/src/lib/Navbar.svelte
index 7460823..ec4bac3 100644
--- a/src/lib/Navbar.svelte
+++ b/src/lib/Navbar.svelte
@@ -1,4 +1,5 @@
 <script>
+  import { push } from 'svelte-spa-router';
   import { auth } from './stores/auth.js';
 
   let showPopup = false;
@@ -56,7 +57,13 @@
 </script>
 
 <nav class="navbar">
-  <span class="app-name">Omotomo</span>
+  <div class="nav-left">
+    <a href="/" class="app-name" onclick={(e) => { e.preventDefault(); push('/'); }}>Omotomo</a>
+    {#if $auth.user}
+      <a href="/" class="nav-link" onclick={(e) => { e.preventDefault(); push('/'); }}>My decks</a>
+    {/if}
+    <a href="/community" class="nav-link" onclick={(e) => { e.preventDefault(); push('/community'); }}>Community</a>
+  </div>
   <div class="nav-actions">
     {#if $auth.loading}
       <span class="username">…</span>
@@ -152,10 +159,31 @@
     box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
   }
 
+  .nav-left {
+    display: flex;
+    align-items: center;
+    gap: 1.25rem;
+  }
+
   .app-name {
     font-size: 1.25rem;
     font-weight: 600;
     color: var(--text-primary, #f0f0f0);
+    text-decoration: none;
+  }
+
+  .app-name:hover {
+    color: var(--text-primary, #f0f0f0);
+  }
+
+  .nav-link {
+    font-size: 0.95rem;
+    color: var(--text-muted, #a0a0a0);
+    text-decoration: none;
+  }
+
+  .nav-link:hover {
+    color: var(--text-primary, #f0f0f0);
   }
 
   .nav-actions {
diff --git a/src/lib/QuestionEditor.svelte b/src/lib/QuestionEditor.svelte
new file mode 100644
index 0000000..ec68ccd
--- /dev/null
+++ b/src/lib/QuestionEditor.svelte
@@ -0,0 +1,180 @@
+<script>
+  export let question = { prompt: '', explanation: '', answers: [''], correct_answer_indices: [0] };
+  export let index = 0;
+  export let onRemove = () => {};
+
+  function addAnswer() {
+    if (!question.answers) question.answers = [''];
+    question.answers = [...question.answers, ''];
+    if (!question.correct_answer_indices?.length) question.correct_answer_indices = [0];
+  }
+
+  function removeAnswer(i) {
+    const answers = [...(question.answers || [])];
+    let indices = (question.correct_answer_indices ?? [0]).filter((idx) => idx !== i).map((idx) => (idx > i ? idx - 1 : idx));
+    answers.splice(i, 1);
+    if (indices.length === 0) indices = [0];
+    question.answers = answers;
+    question.correct_answer_indices = indices;
+  }
+
+  function setAnswer(i, value) {
+    const answers = [...(question.answers || [])];
+    answers[i] = value;
+    question.answers = answers;
+  }
+
+  function toggleCorrect(i) {
+    const indices = [...(question.correct_answer_indices ?? [0])];
+    const pos = indices.indexOf(i);
+    if (pos >= 0) {
+      indices.splice(pos, 1);
+    } else {
+      indices.push(i);
+      indices.sort((a, b) => a - b);
+    }
+    question.correct_answer_indices = indices.length ? indices : [0];
+  }
+</script>
+
+<div class="question-editor">
+  <div class="q-row">
+    <span class="q-label">Question {index + 1}</span>
+    <button type="button" class="btn-remove" onclick={onRemove} title="Remove question">×</button>
+  </div>
+  <input
+    type="text"
+    class="input"
+    placeholder="Prompt"
+    bind:value={question.prompt}
+  />
+  <textarea
+    class="input textarea"
+    placeholder="Explanation (optional)"
+    bind:value={question.explanation}
+    rows="2"
+  ></textarea>
+  <div class="answers-section">
+    <span class="answers-label">Answers (check correct)</span>
+    {#each (question.answers || ['']) as answer, i}
+      <div class="answer-row">
+        <input
+          type="checkbox"
+          checked={(question.correct_answer_indices ?? [0]).includes(i)}
+          onchange={() => toggleCorrect(i)}
+          class="correct-check"
+        />
+        <input
+          type="text"
+          class="input answer-input"
+          placeholder="Answer {i + 1}"
+          value={answer}
+          oninput={(e) => setAnswer(i, e.target.value)}
+        />
+        {#if (question.answers || []).length > 1}
+          <button type="button" class="btn-remove" onclick={() => removeAnswer(i)} title="Remove answer">×</button>
+        {/if}
+      </div>
+    {/each}
+    <button type="button" class="btn-add" onclick={addAnswer}>+ Add answer</button>
+  </div>
+</div>
+
+<style>
+  .question-editor {
+    padding: 1rem;
+    background: var(--bg-muted, #252525);
+    border: 1px solid var(--border, #333);
+    border-radius: 8px;
+    margin-bottom: 1rem;
+  }
+
+  .q-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.5rem;
+  }
+
+  .q-label {
+    font-size: 0.9rem;
+    font-weight: 500;
+    color: var(--text-muted, #a0a0a0);
+  }
+
+  .btn-remove {
+    width: 1.5rem;
+    height: 1.5rem;
+    padding: 0;
+    font-size: 1.2rem;
+    line-height: 1;
+    border: none;
+    border-radius: 4px;
+    background: transparent;
+    color: var(--text-muted, #a0a0a0);
+    cursor: pointer;
+  }
+
+  .btn-remove:hover {
+    color: #ef4444;
+    background: rgba(239, 68, 68, 0.1);
+  }
+
+  .input {
+    width: 100%;
+    padding: 0.5rem 0.75rem;
+    font-size: 0.95rem;
+    border: 1px solid var(--border, #333);
+    border-radius: 6px;
+    background: var(--card-bg, #1e1e1e);
+    color: var(--text-primary, #f0f0f0);
+    margin-bottom: 0.5rem;
+  }
+
+  .textarea {
+    resize: vertical;
+    min-height: 2.5rem;
+  }
+
+  .answers-section {
+    margin-top: 0.75rem;
+  }
+
+  .answers-label {
+    font-size: 0.85rem;
+    color: var(--text-muted, #a0a0a0);
+    display: block;
+    margin-bottom: 0.5rem;
+  }
+
+  .answer-row {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin-bottom: 0.5rem;
+  }
+
+  .correct-check {
+    flex-shrink: 0;
+  }
+
+  .answer-input {
+    flex: 1;
+    margin-bottom: 0;
+  }
+
+  .btn-add {
+    padding: 0.35rem 0.75rem;
+    font-size: 0.85rem;
+    border: 1px dashed var(--border, #333);
+    border-radius: 6px;
+    background: transparent;
+    color: var(--text-muted, #a0a0a0);
+    cursor: pointer;
+  }
+
+  .btn-add:hover {
+    color: var(--text-primary, #f0f0f0);
+    border-color: var(--border-hover, #444);
+  }
+</style>
diff --git a/src/lib/api/decks.js b/src/lib/api/decks.js
new file mode 100644
index 0000000..b7564ec
--- /dev/null
+++ b/src/lib/api/decks.js
@@ -0,0 +1,122 @@
+import { supabase } from '../supabase.js';
+
+export async function fetchMyDecks(userId) {
+  const { data, error } = await supabase
+    .from('decks')
+    .select('id, title, description, config, published, created_at, updated_at')
+    .eq('owner_id', userId)
+    .order('updated_at', { ascending: false });
+  if (error) throw error;
+  const decks = data ?? [];
+  const questionCounts = await Promise.all(
+    decks.map(async (d) => {
+      const { count, error: e } = await supabase
+        .from('questions')
+        .select('*', { count: 'exact', head: true })
+        .eq('deck_id', d.id);
+      if (e) return 0;
+      return count ?? 0;
+    })
+  );
+  return decks.map((d, i) => ({ ...d, question_count: questionCounts[i] }));
+}
+
+export async function fetchPublishedDecks() {
+  const { data, error } = await supabase
+    .from('decks')
+    .select('id, title, description, config, published, created_at, updated_at')
+    .eq('published', true)
+    .order('updated_at', { ascending: false });
+  if (error) throw error;
+  const decks = data ?? [];
+  const questionCounts = await Promise.all(
+    decks.map(async (d) => {
+      const { count, error: e } = await supabase
+        .from('questions')
+        .select('*', { count: 'exact', head: true })
+        .eq('deck_id', d.id);
+      if (e) return 0;
+      return count ?? 0;
+    })
+  );
+  return decks.map((d, i) => ({ ...d, question_count: questionCounts[i] }));
+}
+
+export async function fetchDeckWithQuestions(deckId) {
+  const { data: deck, error: deckError } = await supabase
+    .from('decks')
+    .select('*')
+    .eq('id', deckId)
+    .single();
+  if (deckError || !deck) throw deckError || new Error('Deck not found');
+  const { data: questions, error: qError } = await supabase
+    .from('questions')
+    .select('*')
+    .eq('deck_id', deckId)
+    .order('sort_order', { ascending: true });
+  if (qError) throw qError;
+  return { ...deck, questions: questions ?? [] };
+}
+
+export async function createDeck(ownerId, { title, description, config, questions }) {
+  const { data: deck, error: deckError } = await supabase
+    .from('decks')
+    .insert({
+      owner_id: ownerId,
+      title: title.trim(),
+      description: (description ?? '').trim(),
+      config: config ?? {},
+    })
+    .select('id')
+    .single();
+  if (deckError || !deck) throw deckError || new Error('Failed to create deck');
+  if (questions && questions.length > 0) {
+    const rows = questions.map((q, i) => ({
+      deck_id: deck.id,
+      sort_order: i,
+      prompt: (q.prompt ?? '').trim(),
+      explanation: (q.explanation ?? '').trim() || null,
+      answers: Array.isArray(q.answers) ? q.answers : [],
+      correct_answer_indices: Array.isArray(q.correct_answer_indices) ? q.correct_answer_indices : [],
+    }));
+    const { error: qError } = await supabase.from('questions').insert(rows);
+    if (qError) throw qError;
+  }
+  return deck.id;
+}
+
+export async function updateDeck(deckId, { title, description, config, questions }) {
+  const { error: deckError } = await supabase
+    .from('decks')
+    .update({
+      title: title.trim(),
+      description: (description ?? '').trim(),
+      config: config ?? {},
+    })
+    .eq('id', deckId);
+  if (deckError) throw deckError;
+  const { error: delError } = await supabase.from('questions').delete().eq('deck_id', deckId);
+  if (delError) throw delError;
+  if (questions && questions.length > 0) {
+    const rows = questions.map((q, i) => ({
+      deck_id: deckId,
+      sort_order: i,
+      prompt: (q.prompt ?? '').trim(),
+      explanation: (q.explanation ?? '').trim() || null,
+      answers: Array.isArray(q.answers) ? q.answers : [],
+      correct_answer_indices: Array.isArray(q.correct_answer_indices) ? q.correct_answer_indices : [],
+    }));
+    const { error: qError } = await supabase.from('questions').insert(rows);
+    if (qError) throw qError;
+  }
+}
+
+export async function togglePublished(deckId, published) {
+  const { error } = await supabase.from('decks').update({ published }).eq('id', deckId);
+  if (error) throw error;
+}
+
+export async function deleteDeck(deckId) {
+  const { error } = await supabase.from('decks').delete().eq('id', deckId);
+  if (error) throw error;
+}
diff --git a/src/lib/cards.js b/src/lib/cards.js
deleted file mode 100644
index 24cc1de..0000000
--- a/src/lib/cards.js
+++ /dev/null
@@ -1,50 +0,0 @@
-export const cards = [
-  {
-    id: 1,
-    title: 'Alpha',
-    description: 'First card with a short description for the grid.',
-    imageUrl: 'https://picsum.photos/seed/alpha/400/240',
-  },
-  {
-    id: 2,
-    title: 'Beta',
-    description: 'Second card. Another brief description here.',
-    imageUrl: 'https://picsum.photos/seed/beta/400/240',
-  },
-  {
-    id: 3,
-    title: 'Gamma',
-    description: 'Third card. Keep descriptions short and clear.',
-    imageUrl: 'https://picsum.photos/seed/gamma/400/240',
-  },
-  {
-    id: 4,
-    title: 'Delta',
-    description: 'Fourth card in the responsive grid layout.',
-    imageUrl: 'https://picsum.photos/seed/delta/400/240',
-  },
-  {
-    id: 5,
-    title: 'Epsilon',
-    description: 'Fifth card. Placeholder image from Picsum.',
-    imageUrl: 'https://picsum.photos/seed/epsilon/400/240',
-  },
-  {
-    id: 6,
-    title: 'Zeta',
-    description: 'Sixth card with a subtle shadow and dark theme.',
-    imageUrl: 'https://picsum.photos/seed/zeta/400/240',
-  },
-  {
-    id: 7,
-    title: 'Eta',
-    description: 'Seventh card. Full-width grid, 4+ columns on desktop.',
-    imageUrl: 'https://picsum.photos/seed/eta/400/240',
-  },
-  {
-    id: 8,
-    title: 'Theta',
-    description: 'Eighth card. Click Use to log the card name.',
-    imageUrl: 'https://picsum.photos/seed/theta/400/240',
-  },
-];
diff --git a/src/lib/deckConfig.js b/src/lib/deckConfig.js
new file mode 100644
index 0000000..6ea0544
--- /dev/null
+++ b/src/lib/deckConfig.js
@@ -0,0 +1,12 @@
+// Defaults matching Decky practice_engine DeckConfig
+export const DEFAULT_DECK_CONFIG = {
+  requiredConsecutiveCorrect: 3,
+  defaultAttemptSize: 10,
+  priorityIncreaseOnIncorrect: 5,
+  priorityDecreaseOnCorrect: 2,
+  immediateFeedbackEnabled: true,
+  includeKnownInAttempts: false,
+  shuffleAnswerOrder: true,
+  excludeFlaggedQuestions: false,
+  timeLimitSeconds: null,
+};
diff --git a/src/lib/stores/auth.js b/src/lib/stores/auth.js
index 00d5a86..0560cc4 100644
--- a/src/lib/stores/auth.js
+++ b/src/lib/stores/auth.js
@@ -26,8 +26,13 @@ function createAuthStore() {
       } catch (e) {
         set({ user: null, loading: false, error: e?.message ?? 'Auth error' });
       }
-      supabase.auth.onAuthStateChange((_event, session) => {
-        setSession(session);
+      supabase.auth.onAuthStateChange(async (_event, session) => {
+        if (session != null) {
+          setSession(session);
+          return;
+        }
+        const { data: { session: current } } = await supabase.auth.getSession();
+        setSession(current);
       });
     },
     login: async (email, password) => {
diff --git a/src/lib/supabase.js b/src/lib/supabase.js
index 9341261..0cac3eb 100644
--- a/src/lib/supabase.js
+++ b/src/lib/supabase.js
@@ -3,4 +3,6 @@ import { createClient } from '@supabase/supabase-js';
 const url = import.meta.env.VITE_SUPABASE_URL;
 const anonKey = import.meta.env.VITE_SUPABASE_ANON_KEY;
 
-export const supabase = createClient(url ?? '', anonKey ?? '');
+export const supabase = createClient(url ?? '', anonKey ?? '', {
+  db: { schema: 'omotomo' },
+});
diff --git a/src/routes/Community.svelte b/src/routes/Community.svelte
new file mode 100644
index 0000000..fc4c13e
--- /dev/null
+++ b/src/routes/Community.svelte
@@ -0,0 +1,135 @@
+<script>
+  import { onMount } from 'svelte';
+  import { fetchPublishedDecks } from '../lib/api/decks.js';
+
+  let decks = [];
+  let loading = true;
+  let error = null;
+
+  onMount(load);
+
+  async function load() {
+    loading = true;
+    error = null;
+    try {
+      decks = await fetchPublishedDecks();
+    } catch (e) {
+      error = e?.message ?? 'Failed to load community decks';
+      decks = [];
+    } finally {
+      loading = false;
+    }
+  }
+</script>
+
+<div class="page">
+  <header class="page-header">
+    <h1>Community</h1>
+    <p class="subtitle">Published decks you can use in the Decky app.</p>
+  </header>
+
+  {#if loading}
+    <p class="muted">Loading…</p>
+  {:else if error}
+    <p class="error">{error}</p>
+  {:else if decks.length === 0}
+    <p class="muted">No published decks yet. Create and publish a deck from My decks to see it here.</p>
+  {:else}
+    <ul class="deck-list">
+      {#each decks as deck (deck.id)}
+        <li class="deck-card">
+          <h3 class="deck-title">{deck.title}</h3>
+          {#if deck.description}
+            <p class="deck-description">{deck.description}</p>
+          {/if}
+          <div class="deck-meta">
+            <span class="deck-count">{deck.question_count ?? 0} questions</span>
+          </div>
+          <p class="use-hint">Use the Decky app to discover and import this deck from the same Supabase project.</p>
+        </li>
+      {/each}
+    </ul>
+  {/if}
+</div>
+
+<style>
+  .page {
+    padding: 1.5rem;
+    max-width: 900px;
+    margin: 0 auto;
+  }
+
+  .page-header {
+    margin-bottom: 1.5rem;
+  }
+
+  .page-header h1 {
+    margin: 0 0 0.25rem 0;
+    font-size: 1.5rem;
+    font-weight: 600;
+    color: var(--text-primary, #f0f0f0);
+  }
+
+  .subtitle {
+    margin: 0;
+    font-size: 0.95rem;
+    color: var(--text-muted, #a0a0a0);
+  }
+
+  .muted,
+  .error {
+    margin: 0;
+  }
+
+  .error {
+    color: #ef4444;
+  }
+
+  .muted {
+    color: var(--text-muted, #a0a0a0);
+  }
+
+  .deck-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .deck-card {
+    padding: 1rem 1.25rem;
+    background: var(--card-bg, #1a1a1a);
+    border: 1px solid var(--border, #333);
+    border-radius: 10px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+  }
+
+  .deck-title {
+    margin: 0 0 0.25rem 0;
+    font-size: 1.1rem;
+    font-weight: 600;
+    color: var(--text-primary, #f0f0f0);
+  }
+
+  .deck-description {
+    margin: 0 0 0.5rem 0;
+    font-size: 0.9rem;
+    color: var(--text-muted, #a0a0a0);
+    line-height: 1.4;
+  }
+
+  .deck-meta {
+    font-size: 0.85rem;
+    color: var(--text-muted, #a0a0a0);
+    margin-bottom: 0.5rem;
+  }
+
+  .use-hint {
+    margin: 0;
+    font-size: 0.8rem;
+    color: var(--text-muted, #a0a0a0);
+    font-style: italic;
+  }
+</style>
diff --git a/src/routes/CreateDeck.svelte b/src/routes/CreateDeck.svelte
new file mode 100644
index 0000000..980d369
--- /dev/null
+++ b/src/routes/CreateDeck.svelte
@@ -0,0 +1,337 @@
+<script>
+  import { push } from 'svelte-spa-router';
+  import { auth } from '../lib/stores/auth.js';
+  import { createDeck } from '../lib/api/decks.js';
+  import { DEFAULT_DECK_CONFIG } from '../lib/deckConfig.js';
+  import QuestionEditor from '../lib/QuestionEditor.svelte';
+
+  let title = '';
+  let description = '';
+  let config = { ...DEFAULT_DECK_CONFIG };
+  let questions = [
+    { prompt: '', explanation: '', answers: [''], correct_answer_indices: [0] },
+  ];
+  let saving = false;
+  let error = null;
+  let jsonInput = '';
+  let jsonError = null;
+  $: userId = $auth.user?.id;
+  $: view = $auth.loading ? 'loading' : (userId ? 'form' : 'signin');
+
+  const CONFIG_KEYS = Object.keys(DEFAULT_DECK_CONFIG);
+
+  function loadFromJson() {
+    jsonError = null;
+    let parsed;
+    try {
+      parsed = JSON.parse(jsonInput);
+    } catch (e) {
+      jsonError = 'Invalid JSON: ' + (e?.message ?? 'parse error');
+      return;
+    }
+    if (!parsed || typeof parsed !== 'object') {
+      jsonError = 'JSON must be an object';
+      return;
+    }
+    const t = (parsed.title ?? '').toString().trim();
+    if (!t) {
+      jsonError = 'JSON must include a "title"';
+      return;
+    }
+    const rawQuestions = Array.isArray(parsed.questions) ? parsed.questions : [];
+    if (rawQuestions.length === 0) {
+      jsonError = 'JSON must include a non-empty "questions" array';
+      return;
+    }
+    title = t;
+    description = (parsed.description ?? '').toString().trim();
+    const rawConfig = parsed.config && typeof parsed.config === 'object' ? parsed.config : {};
+    config = CONFIG_KEYS.reduce((acc, key) => {
+      if (Object.prototype.hasOwnProperty.call(rawConfig, key)) acc[key] = rawConfig[key];
+      else acc[key] = DEFAULT_DECK_CONFIG[key];
+      return acc;
+    }, { ...DEFAULT_DECK_CONFIG });
+    questions = rawQuestions.map((q) => {
+      const answers = Array.isArray(q.answers) ? q.answers.map((a) => String(a).trim()) : [''];
+      const indices = Array.isArray(q.correctAnswerIndices)
+        ? q.correctAnswerIndices
+        : Array.isArray(q.correct_answer_indices)
+          ? q.correct_answer_indices
+          : [0];
+      return {
+        prompt: (q.prompt ?? '').toString().trim(),
+        explanation: (q.explanation ?? '').toString().trim(),
+        answers: answers.length ? answers : [''],
+        correct_answer_indices: indices.filter((i) => i >= 0 && i < (answers.length || 1)).length ? indices : [0],
+      };
+    });
+  }
+
+  function addQuestion() {
+    questions = [...questions, { prompt: '', explanation: '', answers: [''], correct_answer_indices: [0] }];
+  }
+
+  function removeQuestion(i) {
+    questions = questions.filter((_, idx) => idx !== i);
+    if (questions.length === 0) {
+      questions = [{ prompt: '', explanation: '', answers: [''], correct_answer_indices: [0] }];
+    }
+  }
+
+  function normalizeQuestion(q) {
+    const answers = (q.answers || []).map((a) => String(a).trim()).filter(Boolean);
+    if (answers.length === 0) return null;
+    const indices = (q.correct_answer_indices ?? [0]).filter((i) => i >= 0 && i < answers.length);
+    return {
+      prompt: (q.prompt ?? '').trim(),
+      explanation: (q.explanation ?? '').trim() || null,
+      answers,
+      correct_answer_indices: indices.length ? indices : [0],
+    };
+  }
+
+  async function save() {
+    const t = title.trim();
+    if (!t) {
+      error = 'Title is required';
+      return;
+    }
+    if (!userId) {
+      error = 'You must be signed in to create a deck';
+      return;
+    }
+    const normalized = questions.map(normalizeQuestion).filter(Boolean);
+    if (normalized.length === 0) {
+      error = 'Add at least one question with at least one answer';
+      return;
+    }
+    saving = true;
+    error = null;
+    try {
+      const id = await createDeck(userId, {
+        title: t,
+        description: description.trim(),
+        config,
+        questions: normalized,
+      });
+      push('/');
+    } catch (e) {
+      error = e?.message ?? 'Failed to create deck';
+    } finally {
+      saving = false;
+    }
+  }
+
+  function cancel() {
+    push('/');
+  }
+</script>
+
+<div class="page">
+  <header class="page-header">
+    <h1>Create deck</h1>
+    <div class="header-actions">
+      <button type="button" class="btn btn-secondary" onclick={cancel} disabled={saving}>Cancel</button>
+      <button type="button" class="btn btn-primary" onclick={save} disabled={saving}>
+        {saving ? 'Saving…' : 'Save deck'}
+      </button>
+    </div>
+  </header>
+
+  {#if view === 'loading'}
+    <p class="auth-required">Loading…</p>
+  {:else if view === 'signin'}
+    <p class="auth-required">Sign in to create a deck.</p>
+  {:else}
+    <form class="deck-form" onsubmit={(e) => { e.preventDefault(); save(); }}>
+        <details class="import-json">
+          <summary>Import from JSON</summary>
+          <div class="form-group">
+            <label for="json-input">Paste deck JSON</label>
+            <textarea
+              id="json-input"
+              class="input textarea json-textarea"
+              bind:value={jsonInput}
+              placeholder="Paste deck JSON (title, description, config, questions)"
+              rows="8"
+           ></textarea>
+            <button type="button" class="btn btn-secondary" onclick={loadFromJson}>Load from JSON</button>
+            {#if jsonError}
+              <p class="error">{jsonError}</p>
+            {/if}
+          </div>
+        </details>
+
+        <div class="form-group">
+          <label for="title">Title</label>
+          <input id="title" type="text" class="input" bind:value={title} placeholder="Deck title" required />
+        </div>
+        <div class="form-group">
+          <label for="description">Description</label>
+          <textarea id="description" class="input textarea" bind:value={description} placeholder="Optional description" rows="2"></textarea>
+        </div>
+
+        <h2 class="section-title">Questions</h2>
+        {#each questions as question, i}
+          <QuestionEditor bind:question index={i} onRemove={() => removeQuestion(i)} />
+        {/each}
+        <button type="button" class="btn btn-add-q" onclick={addQuestion}>+ Add question</button>
+
+        {#if error}
+          <p class="error">{error}</p>
+        {/if}
+    </form>
+  {/if}
+</div>
+
+<style>
+  .page {
+    padding: 1.5rem;
+    max-width: 700px;
+    margin: 0 auto;
+  }
+
+  .page-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    gap: 1rem;
+    margin-bottom: 1.5rem;
+  }
+
+  .page-header h1 {
+    margin: 0;
+    font-size: 1.5rem;
+    font-weight: 600;
+    color: var(--text-primary, #f0f0f0);
+  }
+
+  .header-actions {
+    display: flex;
+    gap: 0.5rem;
+  }
+
+  .auth-required {
+    margin: 0;
+    color: var(--text-muted, #a0a0a0);
+  }
+
+  .deck-form {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .import-json {
+    margin-bottom: 1rem;
+    padding: 0.75rem;
+    border: 1px solid var(--border, #333);
+    border-radius: 6px;
+    background: var(--card-bg, #1e1e1e);
+  }
+
+  .import-json summary {
+    cursor: pointer;
+    font-weight: 500;
+    color: var(--text-muted, #a0a0a0);
+  }
+
+  .import-json summary:hover {
+    color: var(--text-primary, #f0f0f0);
+  }
+
+  .json-textarea {
+    font-family: ui-monospace, monospace;
+    font-size: 0.85rem;
+    margin-bottom: 0.5rem;
+  }
+
+  .form-group {
+    margin-bottom: 1rem;
+  }
+
+  .form-group label {
+    display: block;
+    font-size: 0.9rem;
+    font-weight: 500;
+    color: var(--text-muted, #a0a0a0);
+    margin-bottom: 0.35rem;
+  }
+
+  .input {
+    width: 100%;
+    padding: 0.6rem 0.75rem;
+    font-size: 0.95rem;
+    border: 1px solid var(--border, #333);
+    border-radius: 6px;
+    background: var(--card-bg, #1e1e1e);
+    color: var(--text-primary, #f0f0f0);
+  }
+
+  .textarea {
+    resize: vertical;
+    min-height: 2.5rem;
+  }
+
+  .section-title {
+    margin: 1.5rem 0 0.75rem 0;
+    font-size: 1.1rem;
+    font-weight: 600;
+    color: var(--text-primary, #f0f0f0);
+  }
+
+  .btn-add-q {
+    padding: 0.5rem 1rem;
+    font-size: 0.9rem;
+    border: 1px dashed var(--border, #333);
+    border-radius: 6px;
+    background: transparent;
+    color: var(--text-muted, #a0a0a0);
+    cursor: pointer;
+    margin-bottom: 1rem;
+  }
+
+  .btn-add-q:hover {
+    color: var(--text-primary, #f0f0f0);
+    border-color: var(--border-hover, #444);
+  }
+
+  .error {
+    margin: 0 0 1rem 0;
+    font-size: 0.9rem;
+    color: #ef4444;
+  }
+
+  .btn {
+    padding: 0.5rem 1rem;
+    font-size: 0.9rem;
+    font-weight: 500;
+    border: 1px solid var(--border, #333);
+    border-radius: 6px;
+    background: var(--card-bg, #1e1e1e);
+    color: var(--text-primary, #f0f0f0);
+    cursor: pointer;
+  }
+
+  .btn:hover:not(:disabled) {
+    background: var(--hover-bg, #2a2a2a);
+  }
+
+  .btn:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+
+  .btn-primary {
+    background: var(--accent, #3b82f6);
+    border-color: var(--accent, #3b82f6);
+  }
+
+  .btn-primary:hover:not(:disabled) {
+    background: #2563eb;
+  }
+
+  .btn-secondary {
+    background: transparent;
+  }
+</style>
diff --git a/src/routes/EditDeck.svelte b/src/routes/EditDeck.svelte
new file mode 100644
index 0000000..da11549
--- /dev/null
+++ b/src/routes/EditDeck.svelte
@@ -0,0 +1,341 @@
+<script>
+  import { push } from 'svelte-spa-router';
+  import { auth } from '../lib/stores/auth.js';
+  import { fetchDeckWithQuestions, updateDeck, togglePublished, deleteDeck } from '../lib/api/decks.js';
+  import { DEFAULT_DECK_CONFIG } from '../lib/deckConfig.js';
+  import QuestionEditor from '../lib/QuestionEditor.svelte';
+
+  export let params = {};
+  $: deckId = params?.id;
+
+  let title = '';
+  let description = '';
+  let config = { ...DEFAULT_DECK_CONFIG };
+  let published = false;
+  let questions = [];
+  let loading = true;
+  let saving = false;
+  let error = null;
+
+  $: userId = $auth.user?.id;
+
+  let prevDeckId = '';
+  $: if (deckId && userId && deckId !== prevDeckId) {
+    prevDeckId = deckId;
+    load();
+  } else if (!deckId || !userId) {
+    loading = false;
+  }
+
+  async function load() {
+    if (!deckId) return;
+    loading = true;
+    error = null;
+    try {
+      const deck = await fetchDeckWithQuestions(deckId);
+      if (deck.owner_id !== userId) {
+        push('/');
+        return;
+      }
+      title = deck.title ?? '';
+      description = deck.description ?? '';
+      config = { ...DEFAULT_DECK_CONFIG, ...(deck.config || {}) };
+      published = !!deck.published;
+      questions = (deck.questions || []).map((q) => ({
+        prompt: q.prompt ?? '',
+        explanation: q.explanation ?? '',
+        answers: Array.isArray(q.answers) ? [...q.answers] : [''],
+        correct_answer_indices: Array.isArray(q.correct_answer_indices) ? [...q.correct_answer_indices] : [0],
+      }));
+      if (questions.length === 0) {
+        questions = [{ prompt: '', explanation: '', answers: [''], correct_answer_indices: [0] }];
+      }
+    } catch (e) {
+      error = e?.message ?? 'Failed to load deck';
+      questions = [{ prompt: '', explanation: '', answers: [''], correct_answer_indices: [0] }];
+    } finally {
+      loading = false;
+    }
+  }
+
+  function addQuestion() {
+    questions = [...questions, { prompt: '', explanation: '', answers: [''], correct_answer_indices: [0] }];
+  }
+
+  function removeQuestion(i) {
+    questions = questions.filter((_, idx) => idx !== i);
+    if (questions.length === 0) {
+      questions = [{ prompt: '', explanation: '', answers: [''], correct_answer_indices: [0] }];
+    }
+  }
+
+  function normalizeQuestion(q) {
+    const answers = (q.answers || []).map((a) => String(a).trim()).filter(Boolean);
+    if (answers.length === 0) return null;
+    const indices = (q.correct_answer_indices ?? [0]).filter((i) => i >= 0 && i < answers.length);
+    return {
+      prompt: (q.prompt ?? '').trim(),
+      explanation: (q.explanation ?? '').trim() || null,
+      answers,
+      correct_answer_indices: indices.length ? indices : [0],
+    };
+  }
+
+  async function save() {
+    const t = title.trim();
+    if (!t) {
+      error = 'Title is required';
+      return;
+    }
+    if (!userId || !deckId) return;
+    const normalized = questions.map(normalizeQuestion).filter(Boolean);
+    if (normalized.length === 0) {
+      error = 'Add at least one question with at least one answer';
+      return;
+    }
+    saving = true;
+    error = null;
+    try {
+      await updateDeck(deckId, {
+        title: t,
+        description: description.trim(),
+        config,
+        questions: normalized,
+      });
+      push('/');
+    } catch (e) {
+      error = e?.message ?? 'Failed to save deck';
+    } finally {
+      saving = false;
+    }
+  }
+
+  async function togglePublish() {
+    if (!deckId) return;
+    try {
+      await togglePublished(deckId, !published);
+      published = !published;
+    } catch (e) {
+      error = e?.message ?? 'Failed to update publish status';
+    }
+  }
+
+  async function remove() {
+    if (!deckId || !confirm('Delete this deck? This cannot be undone.')) return;
+    try {
+      await deleteDeck(deckId);
+      push('/');
+    } catch (e) {
+      error = e?.message ?? 'Failed to delete deck';
+    }
+  }
+
+  function cancel() {
+    push('/');
+  }
+</script>
+
+<div class="page">
+  <header class="page-header">
+    <h1>Edit deck</h1>
+    <div class="header-actions">
+      <button type="button" class="btn btn-danger" onclick={remove} disabled={saving}>Delete</button>
+      <button type="button" class="btn btn-secondary" onclick={cancel} disabled={saving}>Cancel</button>
+      <button type="button" class="btn btn-primary" onclick={save} disabled={saving}>
+        {saving ? 'Saving…' : 'Save'}
+      </button>
+    </div>
+  </header>
+
+  {#if $auth.loading}
+    <p class="muted">Loading…</p>
+  {:else if !userId}
+    <p class="auth-required">Sign in to edit decks.</p>
+  {:else if loading}
+    <p class="muted">Loading…</p>
+  {:else}
+    <form class="deck-form" onsubmit={(e) => { e.preventDefault(); save(); }}>
+      <div class="publish-row">
+        <label class="toggle-label">
+          <input type="checkbox" checked={published} onchange={togglePublish} />
+          Published (visible in Community)
+        </label>
+      </div>
+      <div class="form-group">
+        <label for="title">Title</label>
+        <input id="title" type="text" class="input" bind:value={title} placeholder="Deck title" required />
+      </div>
+      <div class="form-group">
+        <label for="description">Description</label>
+        <textarea id="description" class="input textarea" bind:value={description} placeholder="Optional description" rows="2"></textarea>
+      </div>
+
+      <h2 class="section-title">Questions</h2>
+      {#each questions as question, i}
+        <QuestionEditor bind:question index={i} onRemove={() => removeQuestion(i)} />
+      {/each}
+      <button type="button" class="btn btn-add-q" onclick={addQuestion}>+ Add question</button>
+
+      {#if error}
+        <p class="error">{error}</p>
+      {/if}
+    </form>
+  {/if}
+</div>
+
+<style>
+  .page {
+    padding: 1.5rem;
+    max-width: 700px;
+    margin: 0 auto;
+  }
+
+  .page-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    gap: 1rem;
+    margin-bottom: 1.5rem;
+  }
+
+  .page-header h1 {
+    margin: 0;
+    font-size: 1.5rem;
+    font-weight: 600;
+    color: var(--text-primary, #f0f0f0);
+  }
+
+  .header-actions {
+    display: flex;
+    gap: 0.5rem;
+  }
+
+  .publish-row {
+    margin-bottom: 1rem;
+  }
+
+  .toggle-label {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.9rem;
+    color: var(--text-muted, #a0a0a0);
+    cursor: pointer;
+  }
+
+  .toggle-label input {
+    width: 1rem;
+    height: 1rem;
+  }
+
+  .auth-required,
+  .muted {
+    margin: 0;
+    color: var(--text-muted, #a0a0a0);
+  }
+
+  .deck-form {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .form-group {
+    margin-bottom: 1rem;
+  }
+
+  .form-group label {
+    display: block;
+    font-size: 0.9rem;
+    font-weight: 500;
+    color: var(--text-muted, #a0a0a0);
+    margin-bottom: 0.35rem;
+  }
+
+  .input {
+    width: 100%;
+    padding: 0.6rem 0.75rem;
+    font-size: 0.95rem;
+    border: 1px solid var(--border, #333);
+    border-radius: 6px;
+    background: var(--card-bg, #1e1e1e);
+    color: var(--text-primary, #f0f0f0);
+  }
+
+  .textarea {
+    resize: vertical;
+    min-height: 2.5rem;
+  }
+
+  .section-title {
+    margin: 1.5rem 0 0.75rem 0;
+    font-size: 1.1rem;
+    font-weight: 600;
+    color: var(--text-primary, #f0f0f0);
+  }
+
+  .btn-add-q {
+    padding: 0.5rem 1rem;
+    font-size: 0.9rem;
+    border: 1px dashed var(--border, #333);
+    border-radius: 6px;
+    background: transparent;
+    color: var(--text-muted, #a0a0a0);
+    cursor: pointer;
+    margin-bottom: 1rem;
+  }
+
+  .btn-add-q:hover {
+    color: var(--text-primary, #f0f0f0);
+    border-color: var(--border-hover, #444);
+  }
+
+  .error {
+    margin: 0 0 1rem 0;
+    font-size: 0.9rem;
+    color: #ef4444;
+  }
+
+  .btn {
+    padding: 0.5rem 1rem;
+    font-size: 0.9rem;
+    font-weight: 500;
+    border: 1px solid var(--border, #333);
+    border-radius: 6px;
+    background: var(--card-bg, #1e1e1e);
+    color: var(--text-primary, #f0f0f0);
+    cursor: pointer;
+  }
+
+  .btn:hover:not(:disabled) {
+    background: var(--hover-bg, #2a2a2a);
+  }
+
+  .btn:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+
+  .btn-primary {
+    background: var(--accent, #3b82f6);
+    border-color: var(--accent, #3b82f6);
+  }
+
+  .btn-primary:hover:not(:disabled) {
+    background: #2563eb;
+  }
+
+  .btn-secondary {
+    background: transparent;
+  }
+
+  .btn-danger {
+    background: transparent;
+    color: #ef4444;
+    border-color: #ef4444;
+  }
+
+  .btn-danger:hover:not(:disabled) {
+    background: rgba(239, 68, 68, 0.15);
+  }
+</style>
diff --git a/src/routes/MyDecks.svelte b/src/routes/MyDecks.svelte
new file mode 100644
index 0000000..b3dd826
--- /dev/null
+++ b/src/routes/MyDecks.svelte
@@ -0,0 +1,211 @@
+<script>
+  import { push } from 'svelte-spa-router';
+  import { auth } from '../lib/stores/auth.js';
+  import { fetchMyDecks } from '../lib/api/decks.js';
+
+  let decks = [];
+  let loading = true;
+  let error = null;
+
+  $: userId = $auth.user?.id;
+
+  let prevUserId = null;
+  $: if (!$auth.loading && userId && userId !== prevUserId) {
+    prevUserId = userId;
+    load();
+  } else if (!$auth.loading && !userId) {
+    loading = false;
+    prevUserId = null;
+  }
+
+  async function load() {
+    if (!userId) return;
+    loading = true;
+    error = null;
+    try {
+      decks = await fetchMyDecks(userId);
+    } catch (e) {
+      error = e?.message ?? 'Failed to load decks';
+      decks = [];
+    } finally {
+      loading = false;
+    }
+  }
+
+  function goCreate() {
+    push('/decks/new');
+  }
+
+  function goEdit(id) {
+    push(`/decks/${id}/edit`);
+  }
+</script>
+
+<div class="page">
+  <header class="page-header">
+    <h1>My decks</h1>
+    <button type="button" class="btn btn-primary" onclick={goCreate}>Create deck</button>
+  </header>
+
+  {#if $auth.loading}
+    <p class="muted">Loading…</p>
+  {:else if !userId}
+    <p class="auth-required">Sign in to create and manage your decks.</p>
+  {:else if loading}
+    <p class="muted">Loading…</p>
+  {:else if error}
+    <p class="error">{error}</p>
+  {:else if decks.length === 0}
+    <p class="muted">No decks yet. Create your first deck to get started.</p>
+  {:else}
+    <ul class="deck-list">
+      {#each decks as deck (deck.id)}
+        <li class="deck-card">
+          <div class="deck-card-main" onclick={() => goEdit(deck.id)} onkeydown={(e) => e.key === 'Enter' && goEdit(deck.id)} role="button" tabindex="0">
+            <h3 class="deck-title">{deck.title}</h3>
+            {#if deck.description}
+              <p class="deck-description">{deck.description}</p>
+            {/if}
+            <div class="deck-meta">
+              <span class="deck-count">{deck.question_count ?? 0} questions</span>
+              {#if deck.published}
+                <span class="badge published">Published</span>
+              {/if}
+            </div>
+          </div>
+          <div class="deck-card-actions">
+            <button type="button" class="btn btn-small" onclick={() => goEdit(deck.id)}>Edit</button>
+          </div>
+        </li>
+      {/each}
+    </ul>
+  {/if}
+</div>
+
+<style>
+  .page {
+    padding: 1.5rem;
+    max-width: 900px;
+    margin: 0 auto;
+  }
+
+  .page-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+    margin-bottom: 1.5rem;
+  }
+
+  .page-header h1 {
+    margin: 0;
+    font-size: 1.5rem;
+    font-weight: 600;
+    color: var(--text-primary, #f0f0f0);
+  }
+
+  .auth-required,
+  .muted,
+  .error {
+    margin: 0;
+    color: var(--text-muted, #a0a0a0);
+  }
+
+  .error {
+    color: #ef4444;
+  }
+
+  .deck-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+
+  .deck-card {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 1rem;
+    padding: 1rem 1.25rem;
+    background: var(--card-bg, #1a1a1a);
+    border: 1px solid var(--border, #333);
+    border-radius: 10px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+  }
+
+  .deck-card-main {
+    flex: 1;
+    min-width: 0;
+    cursor: pointer;
+  }
+
+  .deck-title {
+    margin: 0 0 0.25rem 0;
+    font-size: 1.1rem;
+    font-weight: 600;
+    color: var(--text-primary, #f0f0f0);
+  }
+
+  .deck-description {
+    margin: 0 0 0.5rem 0;
+    font-size: 0.9rem;
+    color: var(--text-muted, #a0a0a0);
+    line-height: 1.4;
+  }
+
+  .deck-meta {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.85rem;
+    color: var(--text-muted, #a0a0a0);
+  }
+
+  .badge {
+    padding: 0.2rem 0.5rem;
+    border-radius: 4px;
+    font-size: 0.75rem;
+    font-weight: 500;
+  }
+
+  .badge.published {
+    background: rgba(34, 197, 94, 0.2);
+    color: #22c55e;
+  }
+
+  .deck-card-actions {
+    flex-shrink: 0;
+  }
+
+  .btn {
+    padding: 0.5rem 1rem;
+    font-size: 0.9rem;
+    font-weight: 500;
+    border: 1px solid var(--border, #333);
+    border-radius: 6px;
+    background: var(--card-bg, #1e1e1e);
+    color: var(--text-primary, #f0f0f0);
+    cursor: pointer;
+  }
+
+  .btn:hover {
+    background: var(--hover-bg, #2a2a2a);
+  }
+
+  .btn-primary {
+    background: var(--accent, #3b82f6);
+    border-color: var(--accent, #3b82f6);
+  }
+
+  .btn-primary:hover {
+    background: #2563eb;
+  }
+
+  .btn-small {
+    padding: 0.35rem 0.75rem;
+    font-size: 0.85rem;
+  }
+</style>
diff --git a/supabase/migrations/20250213000000_create_decks_and_questions.sql b/supabase/migrations/20250213000000_create_decks_and_questions.sql
new file mode 100644
index 0000000..9bf9d12
--- /dev/null
+++ b/supabase/migrations/20250213000000_create_decks_and_questions.sql
@@ -0,0 +1,117 @@
+-- Decks table (metadata + config for Decky quiz/flashcard app)
+CREATE TABLE IF NOT EXISTS public.decks (
+  id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
+  owner_id uuid NOT NULL REFERENCES auth.users(id) ON DELETE CASCADE,
+  title text NOT NULL,
+  description text NOT NULL DEFAULT '',
+  config jsonb NOT NULL DEFAULT '{
+    "requiredConsecutiveCorrect": 3,
+    "defaultAttemptSize": 10,
+    "priorityIncreaseOnIncorrect": 5,
+    "priorityDecreaseOnCorrect": 2,
+    "immediateFeedbackEnabled": true,
+    "includeKnownInAttempts": false,
+    "shuffleAnswerOrder": true,
+    "excludeFlaggedQuestions": false,
+    "timeLimitSeconds": null
+  }'::jsonb,
+  published boolean NOT NULL DEFAULT false,
+  created_at timestamptz NOT NULL DEFAULT now(),
+  updated_at timestamptz NOT NULL DEFAULT now()
+);
+
+-- Questions table (deck content)
+CREATE TABLE IF NOT EXISTS public.questions (
+  id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
+  deck_id uuid NOT NULL REFERENCES public.decks(id) ON DELETE CASCADE,
+  sort_order int NOT NULL DEFAULT 0,
+  prompt text NOT NULL,
+  explanation text,
+  answers jsonb NOT NULL DEFAULT '[]'::jsonb,
+  correct_answer_indices jsonb NOT NULL DEFAULT '[]'::jsonb
+);
+
+CREATE INDEX IF NOT EXISTS idx_questions_deck_id ON public.questions(deck_id);
+CREATE INDEX IF NOT EXISTS idx_decks_owner_id ON public.decks(owner_id);
+CREATE INDEX IF NOT EXISTS idx_decks_published ON public.decks(published) WHERE published = true;
+
+-- updated_at trigger for decks
+CREATE OR REPLACE FUNCTION public.set_decks_updated_at()
+RETURNS TRIGGER AS $$
+BEGIN
+  NEW.updated_at = now();
+  RETURN NEW;
+END;
+$$ LANGUAGE plpgsql;
+
+DROP TRIGGER IF EXISTS decks_updated_at ON public.decks;
+CREATE TRIGGER decks_updated_at
+  BEFORE UPDATE ON public.decks
+  FOR EACH ROW
+  EXECUTE PROCEDURE public.set_decks_updated_at();
+
+-- RLS
+ALTER TABLE public.decks ENABLE ROW LEVEL SECURITY;
+ALTER TABLE public.questions ENABLE ROW LEVEL SECURITY;
+
+-- decks: SELECT if owner or published; mutate only if owner
+CREATE POLICY decks_select ON public.decks
+  FOR SELECT
+  USING (owner_id = auth.uid() OR published = true);
+
+CREATE POLICY decks_insert ON public.decks
+  FOR INSERT
+  WITH CHECK (owner_id = auth.uid());
+
+CREATE POLICY decks_update ON public.decks
+  FOR UPDATE
+  USING (owner_id = auth.uid())
+  WITH CHECK (owner_id = auth.uid());
+
+CREATE POLICY decks_delete ON public.decks
+  FOR DELETE
+  USING (owner_id = auth.uid());
+
+-- questions: SELECT if deck is visible; mutate only if deck is owned
+CREATE POLICY questions_select ON public.questions
+  FOR SELECT
+  USING (
+    EXISTS (
+      SELECT 1 FROM public.decks d
+      WHERE d.id = questions.deck_id
+      AND (d.owner_id = auth.uid() OR d.published = true)
+    )
+  );
+
+CREATE POLICY questions_insert ON public.questions
+  FOR INSERT
+  WITH CHECK (
+    EXISTS (
+      SELECT 1 FROM public.decks d
+      WHERE d.id = questions.deck_id AND d.owner_id = auth.uid()
+    )
+  );
+
+CREATE POLICY questions_update ON public.questions
+  FOR UPDATE
+  USING (
+    EXISTS (
+      SELECT 1 FROM public.decks d
+      WHERE d.id = questions.deck_id AND d.owner_id = auth.uid()
+    )
+  )
+  WITH CHECK (
+    EXISTS (
+      SELECT 1 FROM public.decks d
+      WHERE d.id = questions.deck_id AND d.owner_id = auth.uid()
+    )
+  );
+
+CREATE POLICY questions_delete ON public.questions
+  FOR DELETE
+  USING (
+    EXISTS (
+      SELECT 1 FROM public.decks d
+      WHERE d.id = questions.deck_id AND d.owner_id = auth.uid()
+    )
+  );