create deck with json
This commit is contained in:
@@ -6,3 +6,7 @@ VITE_SUPABASE_ANON_KEY=your-anon-key
|
|||||||
|
|
||||||
# Optional: for OAuth / magic link redirects
|
# Optional: for OAuth / magic link redirects
|
||||||
# VITE_SUPABASE_REDIRECT_URL=http://localhost:5173
|
# 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.
|
||||||
|
|||||||
Generated
+23
-1
@@ -8,7 +8,8 @@
|
|||||||
"name": "omotomo_site",
|
"name": "omotomo_site",
|
||||||
"version": "0.0.0",
|
"version": "0.0.0",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@supabase/supabase-js": "^2.95.3"
|
"@supabase/supabase-js": "^2.95.3",
|
||||||
|
"svelte-spa-router": "^4.0.1"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@sveltejs/vite-plugin-svelte": "^6.2.1",
|
"@sveltejs/vite-plugin-svelte": "^6.2.1",
|
||||||
@@ -1285,6 +1286,15 @@
|
|||||||
"node": "^10 || ^12 || >=14"
|
"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": {
|
"node_modules/rollup": {
|
||||||
"version": "4.57.1",
|
"version": "4.57.1",
|
||||||
"resolved": "https://registry.npmjs.org/rollup/-/rollup-4.57.1.tgz",
|
"resolved": "https://registry.npmjs.org/rollup/-/rollup-4.57.1.tgz",
|
||||||
@@ -1367,6 +1377,18 @@
|
|||||||
"node": ">=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": {
|
"node_modules/tinyglobby": {
|
||||||
"version": "0.2.15",
|
"version": "0.2.15",
|
||||||
"resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
|
"resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
|
||||||
|
|||||||
+2
-1
@@ -14,6 +14,7 @@
|
|||||||
"vite": "^7.3.1"
|
"vite": "^7.3.1"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@supabase/supabase-js": "^2.95.3"
|
"@supabase/supabase-js": "^2.95.3",
|
||||||
|
"svelte-spa-router": "^4.0.1"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
+14
-35
@@ -1,10 +1,20 @@
|
|||||||
<script>
|
<script>
|
||||||
import { onMount } from 'svelte';
|
import { onMount } from 'svelte';
|
||||||
|
import Router from 'svelte-spa-router';
|
||||||
import Navbar from './lib/Navbar.svelte';
|
import Navbar from './lib/Navbar.svelte';
|
||||||
import Footer from './lib/Footer.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 { 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(() => {
|
onMount(() => {
|
||||||
auth.init();
|
auth.init();
|
||||||
@@ -13,44 +23,13 @@
|
|||||||
|
|
||||||
<Navbar />
|
<Navbar />
|
||||||
<main class="main">
|
<main class="main">
|
||||||
<div class="grid">
|
<Router {routes} />
|
||||||
{#each cards as card (card.id)}
|
|
||||||
<Card {card} />
|
|
||||||
{/each}
|
|
||||||
</div>
|
|
||||||
</main>
|
</main>
|
||||||
<Footer />
|
<Footer />
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.main {
|
.main {
|
||||||
|
flex: 1;
|
||||||
width: 100%;
|
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>
|
</style>
|
||||||
|
|||||||
+29
-1
@@ -1,4 +1,5 @@
|
|||||||
<script>
|
<script>
|
||||||
|
import { push } from 'svelte-spa-router';
|
||||||
import { auth } from './stores/auth.js';
|
import { auth } from './stores/auth.js';
|
||||||
|
|
||||||
let showPopup = false;
|
let showPopup = false;
|
||||||
@@ -56,7 +57,13 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<nav class="navbar">
|
<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">
|
<div class="nav-actions">
|
||||||
{#if $auth.loading}
|
{#if $auth.loading}
|
||||||
<span class="username">…</span>
|
<span class="username">…</span>
|
||||||
@@ -152,10 +159,31 @@
|
|||||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.nav-left {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
.app-name {
|
.app-name {
|
||||||
font-size: 1.25rem;
|
font-size: 1.25rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: var(--text-primary, #f0f0f0);
|
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 {
|
.nav-actions {
|
||||||
|
|||||||
@@ -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>
|
||||||
@@ -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;
|
||||||
|
}
|
||||||
@@ -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',
|
|
||||||
},
|
|
||||||
];
|
|
||||||
@@ -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,
|
||||||
|
};
|
||||||
@@ -26,8 +26,13 @@ function createAuthStore() {
|
|||||||
} catch (e) {
|
} catch (e) {
|
||||||
set({ user: null, loading: false, error: e?.message ?? 'Auth error' });
|
set({ user: null, loading: false, error: e?.message ?? 'Auth error' });
|
||||||
}
|
}
|
||||||
supabase.auth.onAuthStateChange((_event, session) => {
|
supabase.auth.onAuthStateChange(async (_event, session) => {
|
||||||
setSession(session);
|
if (session != null) {
|
||||||
|
setSession(session);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const { data: { session: current } } = await supabase.auth.getSession();
|
||||||
|
setSession(current);
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
login: async (email, password) => {
|
login: async (email, password) => {
|
||||||
|
|||||||
+3
-1
@@ -3,4 +3,6 @@ import { createClient } from '@supabase/supabase-js';
|
|||||||
const url = import.meta.env.VITE_SUPABASE_URL;
|
const url = import.meta.env.VITE_SUPABASE_URL;
|
||||||
const anonKey = import.meta.env.VITE_SUPABASE_ANON_KEY;
|
const anonKey = import.meta.env.VITE_SUPABASE_ANON_KEY;
|
||||||
|
|
||||||
export const supabase = createClient(url ?? '', anonKey ?? '');
|
export const supabase = createClient(url ?? '', anonKey ?? '', {
|
||||||
|
db: { schema: 'omotomo' },
|
||||||
|
});
|
||||||
|
|||||||
@@ -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>
|
||||||
@@ -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>
|
||||||
@@ -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>
|
||||||
@@ -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>
|
||||||
@@ -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()
|
||||||
|
)
|
||||||
|
);
|
||||||
Reference in New Issue
Block a user