create deck with json
This commit is contained in:
gitea
@@ -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>
|
||||
Reference in New Issue
Block a user