Deck version update
This commit is contained in:
gitea
+38
-16
@@ -2,6 +2,7 @@
|
||||
import { onMount } from 'svelte';
|
||||
import { push } from 'svelte-spa-router';
|
||||
import { auth } from '../lib/stores/auth.js';
|
||||
import { navContext } from '../lib/stores/navContext.js';
|
||||
import { fetchPublishedDecks, copyDeckToUser, getMyDeckRating, submitDeckRating } from '../lib/api/decks.js';
|
||||
import RatingModal from '../lib/RatingModal.svelte';
|
||||
|
||||
@@ -59,7 +60,10 @@
|
||||
return list;
|
||||
})();
|
||||
|
||||
onMount(load);
|
||||
onMount(() => {
|
||||
navContext.set('community');
|
||||
load();
|
||||
});
|
||||
|
||||
function formatRating(n) {
|
||||
return Number(n).toFixed(1);
|
||||
@@ -182,6 +186,7 @@
|
||||
<ul class="deck-grid">
|
||||
{#each filteredDecks as deck (deck.id)}
|
||||
<li class="deck-card">
|
||||
<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
|
||||
<div class="deck-card-inner" role="button" tabindex="0" onclick={() => goPreview(deck.id)} onkeydown={(e) => e.key === 'Enter' && goPreview(deck.id)}>
|
||||
<h3 class="deck-title">{deck.title}</h3>
|
||||
{#if deck.description}
|
||||
@@ -193,21 +198,29 @@
|
||||
<div class="deck-creator">
|
||||
By <a href="/community/user/{deck.owner_id}" class="creator-link" onclick={(e) => { e.stopPropagation(); goUser(deck.owner_id, e); }}>{deck.owner_display_name ?? deck.owner_email ?? 'User'}</a>
|
||||
</div>
|
||||
<div
|
||||
class="deck-rating"
|
||||
class:clickable={userId && deck.owner_id !== userId}
|
||||
aria-label="Rating: {deck.average_rating ?? 0} out of 5 stars"
|
||||
onclick={userId && deck.owner_id !== userId ? (e) => openRatingModal(deck, e) : undefined}
|
||||
role={userId && deck.owner_id !== userId ? 'button' : undefined}
|
||||
tabindex={userId && deck.owner_id !== userId ? 0 : undefined}
|
||||
onkeydown={userId && deck.owner_id !== userId ? (e) => e.key === 'Enter' && openRatingModal(deck, e) : undefined}
|
||||
>
|
||||
<span class="stars">{['★', '★', '★', '★', '★'].map((_, i) => (i < Math.round(deck.average_rating ?? 0) ? '★' : '☆')).join('')}</span>
|
||||
<span class="rating-text">{formatRating(deck.average_rating ?? 0)}</span>
|
||||
{#if (deck.rating_count ?? 0) > 0}
|
||||
<span class="rating-count">({deck.rating_count})</span>
|
||||
{/if}
|
||||
</div>
|
||||
{#if userId && deck.owner_id !== userId}
|
||||
<button
|
||||
type="button"
|
||||
class="deck-rating clickable"
|
||||
aria-label="Rating: {deck.average_rating ?? 0} out of 5 stars"
|
||||
onclick={(e) => openRatingModal(deck, e)}
|
||||
onkeydown={(e) => e.key === 'Enter' && openRatingModal(deck, e)}
|
||||
>
|
||||
<span class="stars">{['★', '★', '★', '★', '★'].map((_, i) => (i < Math.round(deck.average_rating ?? 0) ? '★' : '☆')).join('')}</span>
|
||||
<span class="rating-text">{formatRating(deck.average_rating ?? 0)}</span>
|
||||
{#if (deck.rating_count ?? 0) > 0}
|
||||
<span class="rating-count">({deck.rating_count})</span>
|
||||
{/if}
|
||||
</button>
|
||||
{:else}
|
||||
<div class="deck-rating" aria-label="Rating: {deck.average_rating ?? 0} out of 5 stars">
|
||||
<span class="stars">{['★', '★', '★', '★', '★'].map((_, i) => (i < Math.round(deck.average_rating ?? 0) ? '★' : '☆')).join('')}</span>
|
||||
<span class="rating-text">{formatRating(deck.average_rating ?? 0)}</span>
|
||||
{#if (deck.rating_count ?? 0) > 0}
|
||||
<span class="rating-count">({deck.rating_count})</span>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
<div class="deck-card-actions">
|
||||
{#if !deck.user_has_this}
|
||||
<button type="button" class="btn btn-small btn-primary" onclick={(e) => { e.stopPropagation(); handleUse(deck.id); }} disabled={addingDeckId === deck.id}>
|
||||
@@ -428,6 +441,15 @@
|
||||
font-size: 0.9rem;
|
||||
color: var(--text-muted, #a0a0a0);
|
||||
margin-bottom: 0.25rem;
|
||||
border: none;
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
font: inherit;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
button.deck-rating {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.deck-rating.clickable {
|
||||
|
||||
@@ -1,9 +1,13 @@
|
||||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
import { push } from 'svelte-spa-router';
|
||||
import { auth } from '../lib/stores/auth.js';
|
||||
import { navContext } from '../lib/stores/navContext.js';
|
||||
import { fetchPublishedDecksByOwner, copyDeckToUser, getMyDeckRating, submitDeckRating } from '../lib/api/decks.js';
|
||||
import RatingModal from '../lib/RatingModal.svelte';
|
||||
|
||||
onMount(() => navContext.set('community'));
|
||||
|
||||
export let params = {};
|
||||
|
||||
let decks = [];
|
||||
@@ -123,6 +127,7 @@
|
||||
<ul class="deck-grid">
|
||||
{#each decks as deck (deck.id)}
|
||||
<li class="deck-card">
|
||||
<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
|
||||
<div class="deck-card-inner" role="button" tabindex="0" onclick={() => goPreview(deck.id)} onkeydown={(e) => e.key === 'Enter' && goPreview(deck.id)}>
|
||||
<h3 class="deck-title">{deck.title}</h3>
|
||||
{#if deck.description}
|
||||
@@ -131,21 +136,29 @@
|
||||
<div class="deck-meta">
|
||||
<span class="deck-count">{deck.question_count ?? 0} questions</span>
|
||||
</div>
|
||||
<div
|
||||
class="deck-rating"
|
||||
class:clickable={userId && deck.owner_id !== userId}
|
||||
aria-label="Rating: {deck.average_rating ?? 0} out of 5 stars"
|
||||
onclick={userId && deck.owner_id !== userId ? (e) => openRatingModal(deck, e) : undefined}
|
||||
role={userId && deck.owner_id !== userId ? 'button' : undefined}
|
||||
tabindex={userId && deck.owner_id !== userId ? 0 : undefined}
|
||||
onkeydown={userId && deck.owner_id !== userId ? (e) => e.key === 'Enter' && openRatingModal(deck, e) : undefined}
|
||||
>
|
||||
<span class="stars">{['★', '★', '★', '★', '★'].map((_, i) => (i < Math.round(deck.average_rating ?? 0) ? '★' : '☆')).join('')}</span>
|
||||
<span class="rating-text">{formatRating(deck.average_rating ?? 0)}</span>
|
||||
{#if (deck.rating_count ?? 0) > 0}
|
||||
<span class="rating-count">({deck.rating_count})</span>
|
||||
{/if}
|
||||
</div>
|
||||
{#if userId && deck.owner_id !== userId}
|
||||
<button
|
||||
type="button"
|
||||
class="deck-rating clickable"
|
||||
aria-label="Rating: {deck.average_rating ?? 0} out of 5 stars"
|
||||
onclick={(e) => openRatingModal(deck, e)}
|
||||
onkeydown={(e) => e.key === 'Enter' && openRatingModal(deck, e)}
|
||||
>
|
||||
<span class="stars">{['★', '★', '★', '★', '★'].map((_, i) => (i < Math.round(deck.average_rating ?? 0) ? '★' : '☆')).join('')}</span>
|
||||
<span class="rating-text">{formatRating(deck.average_rating ?? 0)}</span>
|
||||
{#if (deck.rating_count ?? 0) > 0}
|
||||
<span class="rating-count">({deck.rating_count})</span>
|
||||
{/if}
|
||||
</button>
|
||||
{:else}
|
||||
<div class="deck-rating" aria-label="Rating: {deck.average_rating ?? 0} out of 5 stars">
|
||||
<span class="stars">{['★', '★', '★', '★', '★'].map((_, i) => (i < Math.round(deck.average_rating ?? 0) ? '★' : '☆')).join('')}</span>
|
||||
<span class="rating-text">{formatRating(deck.average_rating ?? 0)}</span>
|
||||
{#if (deck.rating_count ?? 0) > 0}
|
||||
<span class="rating-count">({deck.rating_count})</span>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
<div class="deck-card-actions">
|
||||
{#if !deck.user_has_this}
|
||||
<button type="button" class="btn btn-small btn-primary" onclick={(e) => { e.stopPropagation(); handleUse(deck.id); }} disabled={addingDeckId === deck.id}>
|
||||
@@ -291,6 +304,15 @@
|
||||
font-size: 0.9rem;
|
||||
color: var(--text-muted, #a0a0a0);
|
||||
margin-bottom: 0.25rem;
|
||||
border: none;
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
font: inherit;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
button.deck-rating {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.deck-rating.clickable {
|
||||
|
||||
@@ -1,10 +1,14 @@
|
||||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
import { push } from 'svelte-spa-router';
|
||||
import { auth } from '../lib/stores/auth.js';
|
||||
import { navContext } from '../lib/stores/navContext.js';
|
||||
import { createDeck } from '../lib/api/decks.js';
|
||||
import { DEFAULT_DECK_CONFIG } from '../lib/deckConfig.js';
|
||||
import QuestionEditor from '../lib/QuestionEditor.svelte';
|
||||
|
||||
onMount(() => navContext.set('my-decks'));
|
||||
|
||||
let title = '';
|
||||
let description = '';
|
||||
let config = { ...DEFAULT_DECK_CONFIG };
|
||||
|
||||
+167
-45
@@ -1,6 +1,7 @@
|
||||
<script>
|
||||
import { push } from 'svelte-spa-router';
|
||||
import { auth } from '../lib/stores/auth.js';
|
||||
import { navContext } from '../lib/stores/navContext.js';
|
||||
import { fetchDeckWithQuestions, copyDeckToUser, userHasDeck } from '../lib/api/decks.js';
|
||||
|
||||
export let params = {};
|
||||
@@ -28,22 +29,43 @@
|
||||
userAlreadyHasDeck = false;
|
||||
try {
|
||||
deck = await fetchDeckWithQuestions(deckId);
|
||||
if (!deck.published) {
|
||||
const isMyCopy = !!(userId && deck.owner_id === userId && deck.copied_from_deck_id);
|
||||
const isOwnDeckLoad = !!(userId && deck.owner_id === userId && !deck.copied_from_deck_id);
|
||||
const canView = deck.published || isMyCopy || isOwnDeckLoad;
|
||||
if (!canView) {
|
||||
error = 'This deck is not available.';
|
||||
deck = null;
|
||||
} else if (userId) {
|
||||
userAlreadyHasDeck = await userHasDeck(deckId, userId);
|
||||
} else {
|
||||
navContext.set(isMyCopy || isOwnDeckLoad ? 'my-decks' : 'community');
|
||||
if (isMyCopy) {
|
||||
userAlreadyHasDeck = true;
|
||||
} else if (userId) {
|
||||
userAlreadyHasDeck = await userHasDeck(deckId, userId);
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
error = e?.message ?? 'Failed to load deck';
|
||||
deck = null;
|
||||
navContext.set(null);
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
function goCommunity() {
|
||||
push('/community');
|
||||
$: isMyCopy = !!(deck && userId && deck.owner_id === userId && deck.copied_from_deck_id);
|
||||
$: isOwnDeck = !!(deck && userId && deck.owner_id === userId && !deck.copied_from_deck_id);
|
||||
/** Only show "In My decks" when viewing from Community and user already has this deck */
|
||||
$: showInMyDecksLabel = !!(deck && !isMyCopy && !isOwnDeck && userAlreadyHasDeck);
|
||||
|
||||
function goBack() {
|
||||
if (loading) {
|
||||
if (typeof window !== 'undefined' && window.history.length > 1) window.history.back();
|
||||
else push('/community');
|
||||
} else if (isMyCopy || isOwnDeck) {
|
||||
push('/');
|
||||
} else {
|
||||
push('/community');
|
||||
}
|
||||
}
|
||||
|
||||
async function addToMyDecks() {
|
||||
@@ -65,39 +87,63 @@
|
||||
}
|
||||
|
||||
function goReviews() {
|
||||
if (!deckId) return;
|
||||
push(`/decks/${deckId}/reviews`);
|
||||
if (!deck) return;
|
||||
const reviewsDeckId = isMyCopy ? deck.copied_from_deck_id : deck.id;
|
||||
if (reviewsDeckId) push(`/decks/${reviewsDeckId}/reviews`);
|
||||
}
|
||||
|
||||
function goEdit() {
|
||||
if (deck?.id) push(`/decks/${deck.id}/edit`);
|
||||
}
|
||||
</script>
|
||||
|
||||
<header class="page-header page-header-fixed">
|
||||
<div class="page-header-inner">
|
||||
<div class="page-header-actions">
|
||||
<button type="button" class="btn btn-back" onclick={goCommunity}>← Community</button>
|
||||
{#if deck && deck.published && !userAlreadyHasDeck}
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-add"
|
||||
onclick={addToMyDecks}
|
||||
disabled={adding}
|
||||
title="Add to my decks"
|
||||
>
|
||||
{#if adding}
|
||||
Adding…
|
||||
<div class="header-top-row">
|
||||
<h1 class="page-header-title">Preview</h1>
|
||||
<div class="page-header-actions">
|
||||
<button type="button" class="btn btn-back" onclick={goBack}>
|
||||
{#if loading}
|
||||
← Back
|
||||
{:else if isMyCopy || isOwnDeck}
|
||||
← My decks
|
||||
{:else}
|
||||
Add to my decks
|
||||
← Community
|
||||
{/if}
|
||||
</button>
|
||||
{:else if deck && deck.published && userAlreadyHasDeck}
|
||||
<span class="already-have">In My decks</span>
|
||||
{/if}
|
||||
{#if deck && deck.published}
|
||||
<button type="button" class="btn btn-reviews" onclick={goReviews} title="View reviews">
|
||||
Reviews
|
||||
</button>
|
||||
{/if}
|
||||
{#if loading}
|
||||
<span class="header-spinner" aria-hidden="true"></span>
|
||||
{:else if deck && (deck.published || isMyCopy || isOwnDeck)}
|
||||
{#if isOwnDeck}
|
||||
<button type="button" class="btn btn-edit" onclick={goEdit} title="Edit deck">
|
||||
Edit
|
||||
</button>
|
||||
{/if}
|
||||
{#if !userAlreadyHasDeck}
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-add"
|
||||
onclick={addToMyDecks}
|
||||
disabled={adding}
|
||||
title="Add to my decks"
|
||||
>
|
||||
{#if adding}
|
||||
Adding…
|
||||
{:else}
|
||||
Add to my decks
|
||||
{/if}
|
||||
</button>
|
||||
{/if}
|
||||
<button type="button" class="btn btn-reviews" onclick={goReviews} title="View reviews">
|
||||
Reviews
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{#if deck && deck.published && !userAlreadyHasDeck && addError}
|
||||
{#if showInMyDecksLabel}
|
||||
<p class="header-in-my-decks">In My decks</p>
|
||||
{/if}
|
||||
{#if deck && (deck.published || isMyCopy || isOwnDeck) && !userAlreadyHasDeck && addError}
|
||||
<p class="page-header-error">{addError}</p>
|
||||
{/if}
|
||||
</div>
|
||||
@@ -105,7 +151,10 @@
|
||||
|
||||
<div class="page page-with-fixed-header">
|
||||
{#if loading}
|
||||
<p class="muted">Loading…</p>
|
||||
<div class="loading-state" aria-busy="true" aria-live="polite">
|
||||
<span class="loading-spinner" aria-hidden="true"></span>
|
||||
<p class="loading-text">Loading deck…</p>
|
||||
</div>
|
||||
{:else if error}
|
||||
<p class="error">{error}</p>
|
||||
{:else if deck}
|
||||
@@ -165,15 +214,55 @@
|
||||
max-width: 700px;
|
||||
margin: 0 auto;
|
||||
padding: 0.75rem 1.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.header-top-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.page-header-title {
|
||||
margin: 0;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary, #f0f0f0);
|
||||
}
|
||||
|
||||
.header-in-my-decks {
|
||||
margin: 0;
|
||||
font-size: 0.9rem;
|
||||
color: #22c55e;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.page-header-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.header-spinner {
|
||||
display: inline-block;
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
border: 2px solid var(--border, #333);
|
||||
border-top-color: var(--accent, #3b82f6);
|
||||
border-radius: 50%;
|
||||
animation: header-spin 0.7s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes header-spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.btn-back {
|
||||
padding: 0.4rem 0.75rem;
|
||||
font-size: 0.9rem;
|
||||
@@ -225,18 +314,29 @@
|
||||
border-color: var(--border-hover, #444);
|
||||
}
|
||||
|
||||
.btn-edit {
|
||||
padding: 0.4rem 1rem;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
border: 1px solid var(--border, #333);
|
||||
border-radius: 6px;
|
||||
background: transparent;
|
||||
color: var(--text-muted, #a0a0a0);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-edit:hover {
|
||||
color: var(--text-primary, #f0f0f0);
|
||||
border-color: var(--border-hover, #444);
|
||||
}
|
||||
|
||||
.page-header-error {
|
||||
width: 100%;
|
||||
margin: 0.5rem 0 0 0;
|
||||
font-size: 0.85rem;
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
.already-have {
|
||||
font-size: 0.9rem;
|
||||
color: #22c55e;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.deck-title {
|
||||
margin: 0 0 0.5rem 0;
|
||||
font-size: 1.5rem;
|
||||
@@ -303,16 +403,38 @@
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.muted,
|
||||
.error {
|
||||
.loading-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
min-height: 12rem;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
display: block;
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
border: 3px solid var(--border, #333);
|
||||
border-top-color: var(--accent, #3b82f6);
|
||||
border-radius: 50%;
|
||||
animation: loading-spin 0.8s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes loading-spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.loading-text {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
.muted {
|
||||
font-size: 0.95rem;
|
||||
color: var(--text-muted, #a0a0a0);
|
||||
}
|
||||
|
||||
.error {
|
||||
margin: 0;
|
||||
color: #ef4444;
|
||||
}
|
||||
</style>
|
||||
|
||||
+223
-6
@@ -1,11 +1,17 @@
|
||||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
import { push } from 'svelte-spa-router';
|
||||
import { auth } from '../lib/stores/auth.js';
|
||||
import { navContext } from '../lib/stores/navContext.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';
|
||||
import ConfirmModal from '../lib/ConfirmModal.svelte';
|
||||
|
||||
onMount(() => {
|
||||
navContext.set('my-decks');
|
||||
});
|
||||
|
||||
export let params = {};
|
||||
$: deckId = params?.id;
|
||||
|
||||
@@ -18,8 +24,13 @@
|
||||
let saving = false;
|
||||
let error = null;
|
||||
let showDeleteConfirm = false;
|
||||
let showJsonModal = false;
|
||||
let jsonEditText = '';
|
||||
let jsonModalError = null;
|
||||
let isCopiedDeck = false;
|
||||
|
||||
const CONFIG_KEYS = Object.keys(DEFAULT_DECK_CONFIG);
|
||||
|
||||
$: userId = $auth.user?.id;
|
||||
|
||||
let prevDeckId = '';
|
||||
@@ -148,17 +159,59 @@
|
||||
function cancel() {
|
||||
push('/');
|
||||
}
|
||||
|
||||
function openJsonModal() {
|
||||
jsonEditText = getDeckJson();
|
||||
jsonModalError = null;
|
||||
showJsonModal = true;
|
||||
}
|
||||
|
||||
function closeJsonModal() {
|
||||
showJsonModal = false;
|
||||
}
|
||||
|
||||
function getDeckJson() {
|
||||
const normalized = questions.map(normalizeQuestion).filter(Boolean);
|
||||
const payload = {
|
||||
title: title.trim(),
|
||||
description: description.trim(),
|
||||
config: { ...config },
|
||||
questions: normalized,
|
||||
};
|
||||
return JSON.stringify(payload, null, 2);
|
||||
}
|
||||
|
||||
async function copyJsonToClipboard() {
|
||||
try {
|
||||
await navigator.clipboard.writeText(getDeckJson());
|
||||
closeJsonModal();
|
||||
} catch (_) {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<header class="page-header page-header-fixed">
|
||||
<div class="page-header-inner">
|
||||
<h1 class="page-header-title">Edit deck</h1>
|
||||
<div class="header-actions">
|
||||
<button type="button" class="btn btn-danger" onclick={openDeleteConfirm} 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>
|
||||
{#if loading}
|
||||
<span class="header-spinner" aria-hidden="true"></span>
|
||||
{:else}
|
||||
<button type="button" class="btn btn-secondary btn-icon-text" onclick={openJsonModal} disabled={saving} title="See JSON">
|
||||
<span class="btn-icon-svg" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3H7a2 2 0 0 0-2 2v5a2 2 0 0 1-2 2 2 2 0 0 1 2 2v5a2 2 0 0 0 2 2h1"/><path d="M16 21h1a2 2 0 0 0 2-2v-5a2 2 0 0 1 2-2 2 2 0 0 1-2-2V5a2 2 0 0 0-2-2h-1"/></svg></span>
|
||||
See JSON
|
||||
</button>
|
||||
<button type="button" class="btn btn-secondary btn-icon-text" onclick={cancel} disabled={saving} title="Cancel">
|
||||
<span class="btn-icon-svg" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5"/><path d="m12 19-7-7 7-7"/></svg></span>
|
||||
Cancel
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary btn-icon-text" onclick={save} disabled={saving} title={saving ? 'Saving…' : 'Save'}>
|
||||
<span class="btn-icon-svg" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/><polyline points="17 21 17 13 7 13 7 21"/><polyline points="7 3 7 8 15 8"/></svg></span>
|
||||
{saving ? 'Saving…' : 'Save'}
|
||||
</button>
|
||||
<button type="button" class="btn btn-danger btn-icon-only" onclick={openDeleteConfirm} disabled={saving} title="Delete deck" aria-label="Delete deck">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" y1="11" x2="10" y2="17"/><line x1="14" y1="11" x2="14" y2="17"/></svg>
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
@@ -169,7 +222,10 @@
|
||||
{:else if !userId}
|
||||
<p class="auth-required">Sign in to edit decks.</p>
|
||||
{:else if loading}
|
||||
<p class="muted">Loading…</p>
|
||||
<div class="loading-state" aria-busy="true" aria-live="polite">
|
||||
<span class="loading-spinner" aria-hidden="true"></span>
|
||||
<p class="loading-text">Loading deck…</p>
|
||||
</div>
|
||||
{:else}
|
||||
<form class="deck-form" onsubmit={(e) => { e.preventDefault(); save(); }}>
|
||||
{#if !isCopiedDeck}
|
||||
@@ -201,6 +257,38 @@
|
||||
</form>
|
||||
{/if}
|
||||
|
||||
{#if showJsonModal}
|
||||
<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
|
||||
<div
|
||||
class="json-modal-backdrop"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-label="Deck JSON"
|
||||
tabindex="-1"
|
||||
onclick={(e) => e.target === e.currentTarget && closeJsonModal()}
|
||||
onkeydown={(e) => e.key === 'Escape' && closeJsonModal()}
|
||||
>
|
||||
<div
|
||||
class="json-modal"
|
||||
role="document"
|
||||
tabindex="-1"
|
||||
onclick={(e) => e.stopPropagation()}
|
||||
onkeydown={(e) => e.key === 'Escape' && closeJsonModal()}
|
||||
>
|
||||
<h2 class="json-modal-title">Deck JSON</h2>
|
||||
<textarea class="json-modal-textarea" bind:value={jsonEditText} spellcheck="false" aria-label="Edit deck JSON"></textarea>
|
||||
{#if jsonModalError}
|
||||
<p class="json-modal-error">{jsonModalError}</p>
|
||||
{/if}
|
||||
<div class="json-modal-actions">
|
||||
<button type="button" class="btn btn-secondary" onclick={closeJsonModal}>Close</button>
|
||||
<button type="button" class="btn btn-secondary" onclick={copyJsonToClipboard}>Copy</button>
|
||||
<button type="button" class="btn btn-primary" onclick={applyJsonFromModal}>Apply</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<ConfirmModal
|
||||
open={showDeleteConfirm}
|
||||
title="Delete deck"
|
||||
@@ -260,6 +348,37 @@
|
||||
.header-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.btn-icon-text {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.btn-icon-text .btn-icon-svg {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.btn-icon-only {
|
||||
padding: 0.5rem;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.header-spinner {
|
||||
display: inline-block;
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
border: 2px solid var(--border, #333);
|
||||
border-top-color: var(--accent, #3b82f6);
|
||||
border-radius: 50%;
|
||||
animation: header-spin 0.7s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes header-spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.publish-row {
|
||||
@@ -341,6 +460,104 @@
|
||||
border-color: var(--border-hover, #444);
|
||||
}
|
||||
|
||||
.json-modal-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 100;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.json-modal {
|
||||
background: var(--card-bg, #1e1e1e);
|
||||
border: 1px solid var(--border, #333);
|
||||
border-radius: 8px;
|
||||
width: 94vw;
|
||||
max-width: 94vw;
|
||||
height: 90vh;
|
||||
max-height: 90vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.json-modal-title {
|
||||
margin: 0;
|
||||
padding: 1rem 1.25rem;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary, #f0f0f0);
|
||||
border-bottom: 1px solid var(--border, #333);
|
||||
}
|
||||
|
||||
.json-modal-textarea {
|
||||
margin: 0;
|
||||
padding: 1rem 1.25rem;
|
||||
width: 100%;
|
||||
min-height: 280px;
|
||||
font-family: ui-monospace, monospace;
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-primary, #f0f0f0);
|
||||
background: var(--card-bg, #1e1e1e);
|
||||
border: 1px solid var(--border, #333);
|
||||
border-radius: 6px;
|
||||
resize: vertical;
|
||||
flex: 1;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.json-modal-textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent, #3b82f6);
|
||||
}
|
||||
|
||||
.json-modal-error {
|
||||
margin: 0 1.25rem;
|
||||
font-size: 0.85rem;
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
.json-modal-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 0.5rem;
|
||||
padding: 1rem 1.25rem;
|
||||
border-top: 1px solid var(--border, #333);
|
||||
}
|
||||
|
||||
.loading-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
min-height: 12rem;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
display: block;
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
border: 3px solid var(--border, #333);
|
||||
border-top-color: var(--accent, #3b82f6);
|
||||
border-radius: 50%;
|
||||
animation: loading-spin 0.8s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes loading-spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.loading-text {
|
||||
margin: 0;
|
||||
font-size: 0.95rem;
|
||||
color: var(--text-muted, #a0a0a0);
|
||||
}
|
||||
|
||||
.error {
|
||||
margin: 0 0 1rem 0;
|
||||
font-size: 0.9rem;
|
||||
|
||||
+330
-36
@@ -1,10 +1,16 @@
|
||||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
import { push } from 'svelte-spa-router';
|
||||
import { auth } from '../lib/stores/auth.js';
|
||||
import { fetchMyDecks, togglePublished, getMyDeckRating, submitDeckRating } from '../lib/api/decks.js';
|
||||
import { navContext } from '../lib/stores/navContext.js';
|
||||
import { fetchMyDecks, togglePublished, getMyDeckRating, submitDeckRating, getSourceUpdatePreview, applySourceUpdate, deleteDeck } from '../lib/api/decks.js';
|
||||
import RatingModal from '../lib/RatingModal.svelte';
|
||||
import ConfirmModal from '../lib/ConfirmModal.svelte';
|
||||
|
||||
onMount(() => {
|
||||
navContext.set('my-decks');
|
||||
});
|
||||
|
||||
let decks = [];
|
||||
let loading = true;
|
||||
let error = null;
|
||||
@@ -12,6 +18,14 @@
|
||||
let ratingInitial = { rating: 0, comment: '' };
|
||||
let showUnpublishConfirm = false;
|
||||
let deckToUnpublish = null;
|
||||
let showUpdateModal = false;
|
||||
let updateDeck = null;
|
||||
let updatePreview = null;
|
||||
let updateLoading = false;
|
||||
let updateError = null;
|
||||
let updateApplying = false;
|
||||
let showRemoveConfirm = false;
|
||||
let deckToRemove = null;
|
||||
|
||||
$: userId = $auth.user?.id;
|
||||
|
||||
@@ -70,6 +84,10 @@
|
||||
push(`/decks/${id}/edit`);
|
||||
}
|
||||
|
||||
function goPreview(deck) {
|
||||
push(`/decks/${deck.id}/preview`);
|
||||
}
|
||||
|
||||
let togglingId = null;
|
||||
async function handlePublish(e, deck) {
|
||||
e.stopPropagation();
|
||||
@@ -112,6 +130,72 @@
|
||||
togglingId = null;
|
||||
}
|
||||
}
|
||||
|
||||
async function openUpdateModal(deck, e) {
|
||||
e?.stopPropagation();
|
||||
e?.preventDefault();
|
||||
if (!deck?.needs_update || !userId) return;
|
||||
updateDeck = deck;
|
||||
showUpdateModal = true;
|
||||
updatePreview = null;
|
||||
updateError = null;
|
||||
updateLoading = true;
|
||||
try {
|
||||
updatePreview = await getSourceUpdatePreview(deck.id, userId);
|
||||
} catch (err) {
|
||||
updateError = err?.message ?? 'Failed to load update preview';
|
||||
} finally {
|
||||
updateLoading = false;
|
||||
}
|
||||
}
|
||||
|
||||
function closeUpdateModal() {
|
||||
showUpdateModal = false;
|
||||
updateDeck = null;
|
||||
updatePreview = null;
|
||||
updateError = null;
|
||||
updateApplying = false;
|
||||
}
|
||||
|
||||
async function confirmSourceUpdate() {
|
||||
if (!updateDeck || !userId) return;
|
||||
updateApplying = true;
|
||||
updateError = null;
|
||||
try {
|
||||
await applySourceUpdate(updateDeck.id, userId);
|
||||
await load();
|
||||
closeUpdateModal();
|
||||
} catch (err) {
|
||||
updateError = err?.message ?? 'Failed to update deck';
|
||||
} finally {
|
||||
updateApplying = false;
|
||||
}
|
||||
}
|
||||
|
||||
function openRemoveConfirm(deck, e) {
|
||||
e?.stopPropagation();
|
||||
e?.preventDefault();
|
||||
if (!deck?.copied_from_deck_id) return;
|
||||
deckToRemove = deck;
|
||||
showRemoveConfirm = true;
|
||||
}
|
||||
|
||||
function closeRemoveConfirm() {
|
||||
showRemoveConfirm = false;
|
||||
deckToRemove = null;
|
||||
}
|
||||
|
||||
async function confirmRemoveFromMyDecks() {
|
||||
if (!deckToRemove) return;
|
||||
const deck = deckToRemove;
|
||||
closeRemoveConfirm();
|
||||
try {
|
||||
await deleteDeck(deck.id);
|
||||
await load();
|
||||
} catch (err) {
|
||||
error = err?.message ?? 'Failed to remove deck';
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="page">
|
||||
@@ -133,10 +217,11 @@
|
||||
<ul class="deck-grid">
|
||||
{#each decks as deck (deck.id)}
|
||||
<li class="deck-card">
|
||||
<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
|
||||
<div
|
||||
class="deck-card-inner"
|
||||
onclick={() => goEdit(deck.id)}
|
||||
onkeydown={(e) => e.key === 'Enter' && goEdit(deck.id)}
|
||||
onclick={() => goPreview(deck)}
|
||||
onkeydown={(e) => e.key === 'Enter' && goPreview(deck)}
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
@@ -148,23 +233,50 @@
|
||||
<span class="deck-count">{deck.question_count ?? 0} questions</span>
|
||||
</div>
|
||||
{#if (deck.average_rating ?? 0) > 0 || (deck.rating_count ?? 0) > 0 || deck.can_rate}
|
||||
<div
|
||||
class="deck-rating"
|
||||
class:clickable={deck.can_rate}
|
||||
aria-label="Rating: {deck.average_rating ?? 0} out of 5 stars"
|
||||
onclick={deck.can_rate ? (e) => openRatingModal(deck, e) : undefined}
|
||||
role={deck.can_rate ? 'button' : undefined}
|
||||
tabindex={deck.can_rate ? 0 : undefined}
|
||||
onkeydown={deck.can_rate ? (e) => e.key === 'Enter' && openRatingModal(deck, e) : undefined}
|
||||
>
|
||||
<span class="stars">{['★', '★', '★', '★', '★'].map((_, i) => (i < Math.round(deck.average_rating ?? 0) ? '★' : '☆')).join('')}</span>
|
||||
<span class="rating-text">{formatRating(deck.average_rating ?? 0)}</span>
|
||||
{#if (deck.rating_count ?? 0) > 0}
|
||||
<span class="rating-count">({deck.rating_count})</span>
|
||||
{/if}
|
||||
</div>
|
||||
{#if deck.can_rate}
|
||||
<button
|
||||
type="button"
|
||||
class="deck-rating clickable"
|
||||
aria-label="Rating: {deck.average_rating ?? 0} out of 5 stars"
|
||||
onclick={(e) => openRatingModal(deck, e)}
|
||||
onkeydown={(e) => e.key === 'Enter' && openRatingModal(deck, e)}
|
||||
>
|
||||
<span class="stars">{['★', '★', '★', '★', '★'].map((_, i) => (i < Math.round(deck.average_rating ?? 0) ? '★' : '☆')).join('')}</span>
|
||||
<span class="rating-text">{formatRating(deck.average_rating ?? 0)}</span>
|
||||
{#if (deck.rating_count ?? 0) > 0}
|
||||
<span class="rating-count">({deck.rating_count})</span>
|
||||
{/if}
|
||||
</button>
|
||||
{:else}
|
||||
<div class="deck-rating" aria-label="Rating: {deck.average_rating ?? 0} out of 5 stars">
|
||||
<span class="stars">{['★', '★', '★', '★', '★'].map((_, i) => (i < Math.round(deck.average_rating ?? 0) ? '★' : '☆')).join('')}</span>
|
||||
<span class="rating-text">{formatRating(deck.average_rating ?? 0)}</span>
|
||||
{#if (deck.rating_count ?? 0) > 0}
|
||||
<span class="rating-count">({deck.rating_count})</span>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
<div class="deck-card-actions">
|
||||
{#if deck.needs_update}
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-icon btn-icon-update"
|
||||
onclick={(e) => openUpdateModal(deck, e)}
|
||||
title="Update from community (v{deck.source_version ?? 1} available)"
|
||||
aria-label="Update from community (v{deck.source_version ?? 1} available)"
|
||||
>
|
||||
<span class="update-icon-wrap">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/>
|
||||
<path d="M3 3v5h5"/>
|
||||
<path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16"/>
|
||||
<path d="M16 21h5v-5"/>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="update-badge" aria-hidden="true">{deck.source_version ?? 1}</span>
|
||||
</button>
|
||||
{/if}
|
||||
{#if !deck.copied_from_deck_id}
|
||||
{#if deck.published}
|
||||
<button
|
||||
@@ -187,12 +299,26 @@
|
||||
</button>
|
||||
{/if}
|
||||
{/if}
|
||||
<button type="button" class="btn btn-icon" onclick={(e) => { e.stopPropagation(); goEdit(deck.id); }} title="Edit deck" aria-label="Edit deck">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
|
||||
<path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
|
||||
</svg>
|
||||
</button>
|
||||
{#if !deck.copied_from_deck_id}
|
||||
<button type="button" class="btn btn-icon" onclick={(e) => { e.stopPropagation(); goEdit(deck.id); }} title="Edit deck" aria-label="Edit deck">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
|
||||
<path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
|
||||
</svg>
|
||||
</button>
|
||||
{:else}
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-icon btn-icon-danger"
|
||||
onclick={(e) => openRemoveConfirm(deck, e)}
|
||||
title="Remove from My decks"
|
||||
aria-label="Remove from My decks"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" y1="11" x2="10" y2="17"/><line x1="14" y1="11" x2="14" y2="17"/>
|
||||
</svg>
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
@@ -218,6 +344,68 @@
|
||||
onConfirm={confirmUnpublish}
|
||||
onCancel={closeUnpublishConfirm}
|
||||
/>
|
||||
|
||||
<ConfirmModal
|
||||
open={showRemoveConfirm}
|
||||
title="Remove from My decks"
|
||||
message="Remove this deck from My decks? You can add it again from Community anytime."
|
||||
confirmLabel="Remove"
|
||||
cancelLabel="Cancel"
|
||||
variant="danger"
|
||||
onConfirm={confirmRemoveFromMyDecks}
|
||||
onCancel={closeRemoveConfirm}
|
||||
/>
|
||||
|
||||
{#if showUpdateModal}
|
||||
<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
|
||||
<div
|
||||
class="update-modal-backdrop"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="update-modal-title"
|
||||
tabindex="-1"
|
||||
onclick={(e) => e.target === e.currentTarget && closeUpdateModal()}
|
||||
onkeydown={(e) => e.key === 'Escape' && closeUpdateModal()}
|
||||
>
|
||||
<div
|
||||
class="update-modal"
|
||||
role="document"
|
||||
tabindex="-1"
|
||||
onclick={(e) => e.stopPropagation()}
|
||||
onkeydown={(e) => e.key === 'Escape' && closeUpdateModal()}
|
||||
>
|
||||
<h2 id="update-modal-title" class="update-modal-title">Update from Community</h2>
|
||||
{#if updateLoading}
|
||||
<p class="update-modal-loading">Loading changes…</p>
|
||||
{:else if updateError}
|
||||
<p class="update-modal-error">{updateError}</p>
|
||||
{:else if updatePreview}
|
||||
<p class="update-modal-intro">
|
||||
<strong>{updateDeck?.title ?? 'This deck'}</strong> has a newer version (v{updatePreview.source?.version ?? 1}) available.
|
||||
</p>
|
||||
<ul class="update-modal-changes">
|
||||
{#each updatePreview.changes as change}
|
||||
<li>{change}</li>
|
||||
{/each}
|
||||
</ul>
|
||||
<p class="update-modal-warn">Your copy will be replaced with the current version. This cannot be undone.</p>
|
||||
{/if}
|
||||
<div class="update-modal-actions">
|
||||
<button type="button" class="btn btn-secondary" onclick={closeUpdateModal} disabled={updateApplying}>
|
||||
Reject
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-primary"
|
||||
onclick={confirmSourceUpdate}
|
||||
disabled={updateApplying || updateLoading || !!updateError}
|
||||
>
|
||||
{updateApplying ? 'Updating…' : 'Confirm update'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
@@ -326,6 +514,16 @@
|
||||
color: var(--text-muted, #a0a0a0);
|
||||
margin-bottom: 0.25rem;
|
||||
margin-top: auto;
|
||||
border: none;
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
cursor: default;
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
button.deck-rating {
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.deck-rating.clickable {
|
||||
@@ -346,18 +544,6 @@
|
||||
color: var(--text-muted, #888);
|
||||
}
|
||||
|
||||
.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 {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
@@ -366,6 +552,106 @@
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
.btn-icon-update {
|
||||
position: relative;
|
||||
color: var(--accent, #3b82f6);
|
||||
}
|
||||
|
||||
.btn-icon-update:hover {
|
||||
color: #60a5fa;
|
||||
}
|
||||
|
||||
.update-icon-wrap {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.update-badge {
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
right: -6px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
background: #dc2626;
|
||||
border: 2px solid var(--card-bg, #1a1a1a);
|
||||
border-radius: 50%;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.update-modal-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 100;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.update-modal {
|
||||
background: var(--card-bg, #1a1a1a);
|
||||
border: 1px solid var(--border, #333);
|
||||
border-radius: 12px;
|
||||
max-width: 420px;
|
||||
width: 100%;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.update-modal-title {
|
||||
margin: 0 0 1rem 0;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary, #f0f0f0);
|
||||
}
|
||||
|
||||
.update-modal-loading,
|
||||
.update-modal-error {
|
||||
margin: 0 0 1rem 0;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.update-modal-error {
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
.update-modal-intro {
|
||||
margin: 0 0 0.75rem 0;
|
||||
font-size: 0.95rem;
|
||||
color: var(--text-muted, #a0a0a0);
|
||||
}
|
||||
|
||||
.update-modal-changes {
|
||||
margin: 0 0 1rem 0;
|
||||
padding-left: 1.25rem;
|
||||
font-size: 0.9rem;
|
||||
color: var(--text-primary, #f0f0f0);
|
||||
}
|
||||
|
||||
.update-modal-changes li {
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.update-modal-warn {
|
||||
margin: 0 0 1rem 0;
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-muted, #a0a0a0);
|
||||
}
|
||||
|
||||
.update-modal-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: transparent;
|
||||
}
|
||||
@@ -420,4 +706,12 @@
|
||||
.btn-icon svg {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.btn-icon-danger {
|
||||
color: var(--text-muted, #a0a0a0);
|
||||
}
|
||||
|
||||
.btn-icon-danger:hover {
|
||||
color: #ef4444;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -126,7 +126,7 @@
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Avatar</label>
|
||||
<span class="form-label">Avatar</span>
|
||||
<div class="avatar-row">
|
||||
<div class="avatar-wrap">
|
||||
<label for="avatar-input" class="avatar-clickable" title="Choose image">
|
||||
@@ -364,9 +364,12 @@
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.btn-small {
|
||||
padding: 0.35rem 0.75rem;
|
||||
font-size: 0.85rem;
|
||||
.form-group .form-label {
|
||||
display: block;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
color: var(--text-muted, #a0a0a0);
|
||||
margin-bottom: 0.35rem;
|
||||
}
|
||||
|
||||
.error {
|
||||
|
||||
Reference in New Issue
Block a user