feat(decks): card-stack visualization + direct-launch study mode
Decks fühlen sich jetzt wie echte Karten an, statt flacher Boxen.
Eine zentrale CardSurface-Komponente trägt die Karten-Optik
(Border, Radius 0.875rem, Shadow, Color-Stripe links) — drei
Sizes (md/lg/hero), drei Konsumenten, ein visuelles Familien-Set.
Komponenten:
- CardSurface.svelte Foundation für jede Card-Erscheinung in Cards
- DeckStack.svelte 5:7-Stapel mit 3 deterministisch tilted
Hintergrund-Layern (cyrb53-Hash der Deck-ID,
reproduzierbar pro Mount), Color-Stripe-Akzent,
Title/Description/Card-Count/Due-Badge
- DeckGrid.svelte Auto-fill responsive Grid; selectedId-Prop
triggert Stufe-1-Animation (others fade-out,
selected scale-up)
- DeckFan.svelte Auffächer-Detail-View (Hand of Cards) mit
Top-7-Karten als Spread, Mount-Animation
gestapelt → fanned via doppeltem rAF +
cubic-bezier-Transition
- utils/deck-tilt.ts cyrb53 + stackLayers für Pseudo-Random-Tilts
Routing-Wechsel: Klick auf Deck-Stack → 220ms Stufe-1-Fade →
goto('/study/<id>') direkt in den Lernmodus. Detail-View
(/decks/<id>) bleibt erreichbar über "Karten verwalten →"-Link
in der Study-Sidebar.
Lernmodus visuell als Karte:
- Globale Header (Logo + Nav + Sprach-Switcher) im Lernmodus
ausgeblendet (routes/+layout.svelte detektiert /study/<deckId>
per Regex), volle Konzentration auf die Karte
- Lern-Karte ist CardSurface size="hero" mit aspect-ratio 5:7
(Portrait, gleiches Verhältnis wie Deck-Stacks und Fan-Karten)
- Color-Stripe links zeigt die Deck-Farbe — visuelle Bindung an
Herkunft
- Sidebar oben links absolute-positioniert: ← Decks, Deck-Name,
Fortschritt, Karten verwalten → — kompakter UI-Block, der die
Karten-Zentrierung NICHT beeinflusst (Karte bleibt geometrisch
Bildschirm-Mitte)
- Reveal-Button + 4er-Grade-Grid (Wieder/Schwer/Gut/Leicht) als
Aktions-Leiste UNTER der Karte — keine weiteren Karten, ein
Review = eine Karte
Mobile (≤720px): Sidebar wird zur horizontalen Zeile oben, Karte
rückt darunter durch padding-top: 6.5rem.
Reduced-motion durchgängig respektiert (keine Tilts, keine Hover-
Lifts, keine Fan-Spread-Animation, kein Card-Transition).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Till JS
parent
19a0036b82
commit
870e2aea85
9 changed files with 1283 additions and 180 deletions
187
apps/web/src/lib/components/CardSurface.svelte
Normal file
187
apps/web/src/lib/components/CardSurface.svelte
Normal file
|
|
@ -0,0 +1,187 @@
|
|||
<script lang="ts">
|
||||
import type { Snippet } from 'svelte';
|
||||
|
||||
/**
|
||||
* Zentrale Karten-Optik der Cards-App.
|
||||
*
|
||||
* Eine Komponente — drei Erscheinungen, alle gleichen "Card-Feel":
|
||||
* • size="md" → Deck-Stapel-Cover oder Hand-Karte (5:7-Format, kompakt)
|
||||
* • size="lg" → Aufgefächerte Detail-Karte
|
||||
* • size="hero" → Lern-Karte (groß, fokussiert, breiter)
|
||||
*
|
||||
* Alle drei tragen den gleichen Border-Radius, Border-Style, Shadow-
|
||||
* Stil und Surface-Farbe. So fühlt sich jede Karten-Erscheinung wie
|
||||
* eine Karte an — Deckblatt, Fan-Karte, Study-Karte sind visuell ein
|
||||
* Familien-Set.
|
||||
*
|
||||
* 12-Token-Disziplin: nur `--color-surface`, `--color-border`,
|
||||
* `--color-foreground`, `--color-primary*`. Kein Hex.
|
||||
*/
|
||||
|
||||
type Size = 'md' | 'lg' | 'hero';
|
||||
type As = 'div' | 'article' | 'a' | 'button';
|
||||
|
||||
interface Props {
|
||||
size?: Size;
|
||||
as?: As;
|
||||
href?: string;
|
||||
onclick?: (e: MouseEvent) => void;
|
||||
colorAccent?: string | null;
|
||||
ariaLabel?: string;
|
||||
title?: string;
|
||||
raised?: boolean;
|
||||
flat?: boolean;
|
||||
class?: string;
|
||||
children?: Snippet;
|
||||
}
|
||||
|
||||
let {
|
||||
size = 'md',
|
||||
as = 'div',
|
||||
href,
|
||||
onclick,
|
||||
colorAccent = null,
|
||||
ariaLabel,
|
||||
title,
|
||||
raised = false,
|
||||
flat = false,
|
||||
class: className = '',
|
||||
children,
|
||||
}: Props = $props();
|
||||
</script>
|
||||
|
||||
{#if as === 'a' || href}
|
||||
<a
|
||||
class="surface size-{size} {className}"
|
||||
class:raised
|
||||
class:flat
|
||||
{href}
|
||||
aria-label={ariaLabel}
|
||||
{title}
|
||||
{onclick}
|
||||
>
|
||||
{#if colorAccent}
|
||||
<span class="accent" style="background:{colorAccent}" aria-hidden="true"></span>
|
||||
{/if}
|
||||
{#if children}{@render children()}{/if}
|
||||
</a>
|
||||
{:else if as === 'button'}
|
||||
<button
|
||||
type="button"
|
||||
class="surface size-{size} {className}"
|
||||
class:raised
|
||||
class:flat
|
||||
aria-label={ariaLabel}
|
||||
{title}
|
||||
{onclick}
|
||||
>
|
||||
{#if colorAccent}
|
||||
<span class="accent" style="background:{colorAccent}" aria-hidden="true"></span>
|
||||
{/if}
|
||||
{#if children}{@render children()}{/if}
|
||||
</button>
|
||||
{:else}
|
||||
<svelte:element
|
||||
this={as}
|
||||
class="surface size-{size} {className}"
|
||||
class:raised
|
||||
class:flat
|
||||
aria-label={ariaLabel}
|
||||
{title}
|
||||
>
|
||||
{#if colorAccent}
|
||||
<span class="accent" style="background:{colorAccent}" aria-hidden="true"></span>
|
||||
{/if}
|
||||
{#if children}{@render children()}{/if}
|
||||
</svelte:element>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.surface {
|
||||
position: relative;
|
||||
display: block;
|
||||
background: hsl(var(--color-surface));
|
||||
border: 1px solid hsl(var(--color-border));
|
||||
border-radius: 0.875rem;
|
||||
color: hsl(var(--color-foreground));
|
||||
font-family: inherit;
|
||||
text-align: left;
|
||||
text-decoration: none;
|
||||
overflow: hidden;
|
||||
box-shadow:
|
||||
0 4px 12px hsl(var(--color-foreground) / 0.08),
|
||||
0 1px 3px hsl(var(--color-foreground) / 0.05);
|
||||
transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.15s ease;
|
||||
}
|
||||
|
||||
/* button-/a-Variante als Karte ohne Default-Padding/-Margin */
|
||||
button.surface,
|
||||
a.surface {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Sizes — definieren nur Maße, keine internen Inhalte */
|
||||
.size-md {
|
||||
width: 100%;
|
||||
max-width: 18rem;
|
||||
aspect-ratio: 5 / 7;
|
||||
}
|
||||
|
||||
.size-lg {
|
||||
width: 12rem;
|
||||
height: 16.8rem;
|
||||
}
|
||||
|
||||
.size-hero {
|
||||
width: 100%;
|
||||
max-width: 24rem;
|
||||
aspect-ratio: 5 / 7;
|
||||
}
|
||||
|
||||
/* Raised → echte Top-Karte mit stärkerem Schatten (Hand-of-Cards-Hover, Study-Hero) */
|
||||
.surface.raised {
|
||||
box-shadow:
|
||||
0 14px 28px hsl(var(--color-foreground) / 0.16),
|
||||
0 4px 10px hsl(var(--color-foreground) / 0.08);
|
||||
}
|
||||
|
||||
/* Flat → reine Background-Layer (versteckte Hintergrund-Karten im Stapel) */
|
||||
.surface.flat {
|
||||
box-shadow: 0 1px 3px hsl(var(--color-foreground) / 0.06);
|
||||
}
|
||||
|
||||
/* Color-Akzent links als Identitäts-Streifen */
|
||||
.accent {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 0.375rem;
|
||||
}
|
||||
|
||||
.surface:focus-visible {
|
||||
outline: 2px solid hsl(var(--color-primary));
|
||||
outline-offset: 4px;
|
||||
}
|
||||
|
||||
button.surface:hover,
|
||||
a.surface:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow:
|
||||
0 12px 28px hsl(var(--color-foreground) / 0.16),
|
||||
0 4px 10px hsl(var(--color-foreground) / 0.08);
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.surface {
|
||||
transition: none;
|
||||
}
|
||||
button.surface:hover,
|
||||
a.surface:hover {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
205
apps/web/src/lib/components/DeckFan.svelte
Normal file
205
apps/web/src/lib/components/DeckFan.svelte
Normal file
|
|
@ -0,0 +1,205 @@
|
|||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import type { Card, Deck } from '@cards/domain';
|
||||
import { t, tn } from '$lib/i18n/index.svelte.ts';
|
||||
import { stackLayers } from '$lib/utils/deck-tilt';
|
||||
import CardSurface from './CardSurface.svelte';
|
||||
|
||||
interface Props {
|
||||
deck: Deck;
|
||||
cards: Card[];
|
||||
totalCount?: number;
|
||||
dueCount?: number;
|
||||
maxFanCards?: number;
|
||||
onCardClick?: (card: Card) => void;
|
||||
}
|
||||
|
||||
let {
|
||||
deck,
|
||||
cards,
|
||||
totalCount = cards.length,
|
||||
dueCount = 0,
|
||||
maxFanCards = 7,
|
||||
onCardClick,
|
||||
}: Props = $props();
|
||||
|
||||
const fanCards = $derived(cards.slice(0, maxFanCards));
|
||||
const fanCount = $derived(fanCards.length);
|
||||
const hiddenCount = $derived(totalCount - fanCount);
|
||||
|
||||
let mounted = $state(false);
|
||||
|
||||
onMount(() => {
|
||||
requestAnimationFrame(() => {
|
||||
requestAnimationFrame(() => {
|
||||
mounted = true;
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
function fanTransform(index: number, count: number): string {
|
||||
if (count <= 1) return 'translateX(0) rotate(0deg)';
|
||||
const spread = Math.min(60, count * 9);
|
||||
const step = spread / (count - 1);
|
||||
const angle = -spread / 2 + index * step;
|
||||
const xRange = Math.min(280, count * 40);
|
||||
const xStep = xRange / (count - 1);
|
||||
const x = -xRange / 2 + index * xStep;
|
||||
const mid = (count - 1) / 2;
|
||||
const distFromMid = Math.abs(index - mid);
|
||||
const y = -distFromMid * 6;
|
||||
return `translate(${x}px, ${y}px) rotate(${angle}deg)`;
|
||||
}
|
||||
|
||||
function previewText(card: Card): string {
|
||||
const f = card.fields as Record<string, string | undefined>;
|
||||
switch (card.type) {
|
||||
case 'cloze':
|
||||
return f.text ?? '';
|
||||
case 'image-occlusion':
|
||||
return '🖼 ' + (f.image_ref?.slice(0, 16) ?? '');
|
||||
default:
|
||||
return f.front ?? '';
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="fan" class:mounted aria-label={t('deck_detail.fan_aria', { name: deck.name })}>
|
||||
<!-- Ambient Stack-Layers — bleiben sichtbar als Tiefen-Hint -->
|
||||
{#each stackLayers(deck.id, 3) as layer, i (i)}
|
||||
<div
|
||||
class="bg-layer"
|
||||
style:transform="translate({layer.dx}px, {layer.dy + 4 + i * 2}px) rotate({layer.tilt}deg)"
|
||||
aria-hidden="true"
|
||||
></div>
|
||||
{/each}
|
||||
|
||||
<!-- Aufgefächerte Karten — alle nutzen CardSurface size=lg -->
|
||||
<div class="card-row">
|
||||
{#each fanCards as card, i (card.id)}
|
||||
<div
|
||||
class="fan-card-pos"
|
||||
style:--target-transform={fanTransform(i, fanCount)}
|
||||
style:z-index={i + 1}
|
||||
>
|
||||
<CardSurface
|
||||
size="lg"
|
||||
as="button"
|
||||
raised
|
||||
onclick={() => onCardClick?.(card)}
|
||||
ariaLabel={t('deck_detail.card_open', { type: card.type })}
|
||||
title={previewText(card)}
|
||||
>
|
||||
<div class="card-inner">
|
||||
<span class="card-type">{card.type}</span>
|
||||
<span class="card-preview">{previewText(card)}</span>
|
||||
</div>
|
||||
</CardSurface>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
{#if hiddenCount > 0}
|
||||
<p class="hidden-count">
|
||||
+ {tn('decks.card_count_more', hiddenCount)}
|
||||
</p>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.fan {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
min-height: 22rem;
|
||||
padding: 4rem 1rem 2rem;
|
||||
}
|
||||
|
||||
.bg-layer {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 4rem;
|
||||
width: 12rem;
|
||||
height: 16.8rem;
|
||||
margin-left: -6rem;
|
||||
background: hsl(var(--color-surface));
|
||||
border: 1px solid hsl(var(--color-border));
|
||||
border-radius: 0.875rem;
|
||||
box-shadow: 0 1px 3px hsl(var(--color-foreground) / 0.06);
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.card-row {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 36rem;
|
||||
height: 18rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.fan-card-pos {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 0;
|
||||
width: 12rem;
|
||||
height: 16.8rem;
|
||||
margin-left: -6rem;
|
||||
transform: translate(0, 0) rotate(0deg);
|
||||
transform-origin: 50% 95%;
|
||||
transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
|
||||
}
|
||||
|
||||
.fan.mounted .fan-card-pos {
|
||||
transform: var(--target-transform);
|
||||
}
|
||||
|
||||
.card-inner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
padding: 1.125rem;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.card-type {
|
||||
display: inline-flex;
|
||||
align-self: flex-start;
|
||||
padding: 0.0625rem 0.5rem;
|
||||
font-size: 0.6875rem;
|
||||
font-weight: 500;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
background: hsl(var(--color-muted));
|
||||
border-radius: 9999px;
|
||||
text-transform: lowercase;
|
||||
}
|
||||
|
||||
.card-preview {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.4;
|
||||
color: hsl(var(--color-foreground));
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 8;
|
||||
line-clamp: 8;
|
||||
-webkit-box-orient: vertical;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.hidden-count {
|
||||
margin: 1.5rem 0 0;
|
||||
font-size: 0.875rem;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.fan-card-pos {
|
||||
transition: none;
|
||||
transform: var(--target-transform);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
90
apps/web/src/lib/components/DeckGrid.svelte
Normal file
90
apps/web/src/lib/components/DeckGrid.svelte
Normal file
|
|
@ -0,0 +1,90 @@
|
|||
<script lang="ts">
|
||||
import type { Deck } from '@cards/domain';
|
||||
import DeckStack from './DeckStack.svelte';
|
||||
import { t } from '$lib/i18n/index.svelte.ts';
|
||||
|
||||
interface DeckWithCounts {
|
||||
deck: Deck;
|
||||
cardCount: number;
|
||||
dueCount: number;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
decks: DeckWithCounts[];
|
||||
selectedId?: string | null;
|
||||
onSelect?: (deckId: string) => void;
|
||||
}
|
||||
|
||||
let { decks, selectedId = null, onSelect }: Props = $props();
|
||||
|
||||
function handleSelect(e: MouseEvent, deckId: string) {
|
||||
if (onSelect) {
|
||||
e.preventDefault();
|
||||
onSelect(deckId);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<ul
|
||||
class="deck-grid"
|
||||
aria-label={t('decks.title')}
|
||||
style:--has-selection={selectedId ? 1 : 0}
|
||||
>
|
||||
{#each decks as { deck, cardCount, dueCount } (deck.id)}
|
||||
<li
|
||||
class="grid-cell"
|
||||
class:fading={selectedId !== null && selectedId !== deck.id}
|
||||
class:selected={selectedId === deck.id}
|
||||
>
|
||||
<DeckStack
|
||||
{deck}
|
||||
{cardCount}
|
||||
{dueCount}
|
||||
href={`/decks/${deck.id}`}
|
||||
onclick={(e: MouseEvent) => handleSelect(e, deck.id)}
|
||||
/>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
|
||||
<style>
|
||||
.deck-grid {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: grid;
|
||||
gap: 1.5rem 1rem;
|
||||
grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
|
||||
justify-items: center;
|
||||
}
|
||||
|
||||
.grid-cell {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
transition: opacity 0.25s ease, transform 0.3s ease;
|
||||
}
|
||||
|
||||
.grid-cell.fading {
|
||||
opacity: 0;
|
||||
transform: scale(0.96) translateY(8px);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.grid-cell.selected {
|
||||
transform: scale(1.06);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.grid-cell {
|
||||
transition: none;
|
||||
}
|
||||
.grid-cell.fading {
|
||||
transform: none;
|
||||
}
|
||||
.grid-cell.selected {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
154
apps/web/src/lib/components/DeckStack.svelte
Normal file
154
apps/web/src/lib/components/DeckStack.svelte
Normal file
|
|
@ -0,0 +1,154 @@
|
|||
<script lang="ts">
|
||||
import type { Deck } from '@cards/domain';
|
||||
import { stackLayers } from '$lib/utils/deck-tilt';
|
||||
import { t, tn } from '$lib/i18n/index.svelte.ts';
|
||||
import CardSurface from './CardSurface.svelte';
|
||||
|
||||
interface Props {
|
||||
deck: Deck;
|
||||
cardCount?: number;
|
||||
dueCount?: number;
|
||||
href?: string;
|
||||
onclick?: (e: MouseEvent) => void;
|
||||
ariaLabel?: string;
|
||||
}
|
||||
|
||||
let { deck, cardCount = 0, dueCount = 0, href, onclick, ariaLabel }: Props = $props();
|
||||
|
||||
const layers = $derived(stackLayers(deck.id, 3));
|
||||
const hasContent = $derived(cardCount > 0);
|
||||
const accentColor = $derived(deck.color ?? null);
|
||||
|
||||
const label = $derived(
|
||||
ariaLabel ??
|
||||
t('deck_stack.aria_label', {
|
||||
name: deck.name,
|
||||
cards: cardCount.toString(),
|
||||
due: dueCount.toString(),
|
||||
}),
|
||||
);
|
||||
</script>
|
||||
|
||||
<div class="stack-wrap" class:empty={!hasContent}>
|
||||
<!-- Untere Karten (rein dekorativ) — sichtbar als Stapel-Hint -->
|
||||
{#if hasContent}
|
||||
{#each layers as layer, i (i)}
|
||||
<div
|
||||
class="layer"
|
||||
style:transform="translate({layer.dx}px, {layer.dy}px) rotate({layer.tilt}deg)"
|
||||
aria-hidden="true"
|
||||
></div>
|
||||
{/each}
|
||||
{/if}
|
||||
|
||||
<!-- Deckblatt (vordere Karte) — gleiche Optik wie Lern- und Fan-Karten -->
|
||||
<CardSurface
|
||||
size="md"
|
||||
as={href ? 'a' : 'button'}
|
||||
{href}
|
||||
{onclick}
|
||||
ariaLabel={label}
|
||||
colorAccent={accentColor}
|
||||
class={hasContent ? 'cover' : 'cover empty'}
|
||||
>
|
||||
<div class="cover-inner">
|
||||
<div class="cover-body">
|
||||
<h2 class="cover-title">{deck.name}</h2>
|
||||
{#if deck.description}
|
||||
<p class="cover-desc">{deck.description}</p>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="cover-meta">
|
||||
<span class="meta-count">{tn('decks.card_count', cardCount)}</span>
|
||||
{#if dueCount > 0}
|
||||
<span class="meta-due">{t('study.due_count', { n: dueCount })}</span>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</CardSurface>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.stack-wrap {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 18rem;
|
||||
aspect-ratio: 5 / 7;
|
||||
}
|
||||
|
||||
/* Hintergrund-Layers — versteckte Karten unter dem Deckblatt */
|
||||
.layer {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: hsl(var(--color-surface));
|
||||
border: 1px solid hsl(var(--color-border));
|
||||
border-radius: 0.875rem;
|
||||
box-shadow: 0 1px 3px hsl(var(--color-foreground) / 0.06);
|
||||
}
|
||||
|
||||
/* Inneres Layout des Deckblatt-Inhalts */
|
||||
.cover-inner {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
gap: 0.75rem;
|
||||
padding: 1.25rem 1.125rem 1.25rem 1.5rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.cover-body {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.cover-title {
|
||||
margin: 0;
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
line-height: 1.3;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.cover-desc {
|
||||
margin: 0.5rem 0 0;
|
||||
font-size: 0.8125rem;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
line-height: 1.4;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.cover-meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.375rem 0.75rem;
|
||||
font-size: 0.8125rem;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.meta-due {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 0.0625rem 0.5rem;
|
||||
border-radius: 9999px;
|
||||
background: hsl(var(--color-primary) / 0.12);
|
||||
color: hsl(var(--color-primary));
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Empty-State: kein Stapel-Hint, dashed Border über CardSurface-Wrapper */
|
||||
.stack-wrap.empty :global(.cover.empty) {
|
||||
border-style: dashed;
|
||||
background: transparent;
|
||||
}
|
||||
</style>
|
||||
50
apps/web/src/lib/utils/deck-tilt.ts
Normal file
50
apps/web/src/lib/utils/deck-tilt.ts
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
/**
|
||||
* Deterministische Pseudo-Zufall-Werte basierend auf Deck-ID.
|
||||
* Gleiche ID liefert immer die gleichen Werte — beim Reload bleibt der
|
||||
* Stapel optisch konsistent (kein "lebendiges Zucken" zwischen Mounts).
|
||||
*/
|
||||
|
||||
function cyrb53(str: string, seed = 0): number {
|
||||
let h1 = 0xdeadbeef ^ seed;
|
||||
let h2 = 0x41c6ce57 ^ seed;
|
||||
for (let i = 0; i < str.length; i++) {
|
||||
const ch = str.charCodeAt(i);
|
||||
h1 = Math.imul(h1 ^ ch, 2654435761);
|
||||
h2 = Math.imul(h2 ^ ch, 1597334677);
|
||||
}
|
||||
h1 = Math.imul(h1 ^ (h1 >>> 16), 2246822507) ^ Math.imul(h2 ^ (h2 >>> 13), 3266489909);
|
||||
h2 = Math.imul(h2 ^ (h2 >>> 16), 2246822507) ^ Math.imul(h1 ^ (h1 >>> 13), 3266489909);
|
||||
return 4294967296 * (2097151 & h2) + (h1 >>> 0);
|
||||
}
|
||||
|
||||
/**
|
||||
* Liefert n deterministische Werte aus [0, 1) für eine ID + Salt.
|
||||
* Salt unterscheidet z.B. den Tilt von Karte 1, 2, 3 für die gleiche
|
||||
* Deck-ID.
|
||||
*/
|
||||
export function deterministicRandoms(id: string, count: number): number[] {
|
||||
return Array.from({ length: count }, (_, i) => {
|
||||
const v = cyrb53(id, i + 1);
|
||||
return (v % 10000) / 10000;
|
||||
});
|
||||
}
|
||||
|
||||
export interface CardLayer {
|
||||
tilt: number; // Grad, ~ -2 .. +2
|
||||
dx: number; // px, ~ -3 .. +3
|
||||
dy: number; // px, ~ -2 .. +2
|
||||
}
|
||||
|
||||
/**
|
||||
* Liefert Stapel-Layer-Tilts für eine Deck-ID. Index 0 ist die unterste
|
||||
* Karte, der höchste Index ist die vorderste. Sub-pixel-Versätze und
|
||||
* leichte Rotationen ergeben das "echte Karten"-Gefühl.
|
||||
*/
|
||||
export function stackLayers(id: string, count: number): CardLayer[] {
|
||||
const r = deterministicRandoms(id, count * 3);
|
||||
return Array.from({ length: count }, (_, i) => ({
|
||||
tilt: (r[i * 3] - 0.5) * 4, // -2 .. +2 deg
|
||||
dx: (r[i * 3 + 1] - 0.5) * 6, // -3 .. +3 px
|
||||
dy: (r[i * 3 + 2] - 0.5) * 4, // -2 .. +2 px
|
||||
}));
|
||||
}
|
||||
|
|
@ -3,6 +3,7 @@
|
|||
import Header from '$lib/components/Header.svelte';
|
||||
import ToastStack from '$lib/components/ToastStack.svelte';
|
||||
import { i18n, t } from '$lib/i18n/index.svelte.ts';
|
||||
import { page } from '$app/state';
|
||||
|
||||
let { children } = $props();
|
||||
|
||||
|
|
@ -13,14 +14,50 @@
|
|||
document.documentElement.setAttribute('lang', i18n.current);
|
||||
}
|
||||
});
|
||||
|
||||
// Im Lernmodus (`/study/<deckId>`) wird der globale Header ausgeblendet,
|
||||
// damit die Lernkarte volle visuelle Konzentration kriegt. Die
|
||||
// Übersicht `/study` (ohne deckId) zeigt den Header weiter.
|
||||
const isFocusMode = $derived.by(() => {
|
||||
const path = page.url.pathname;
|
||||
return /^\/study\/[^/]+\/?$/.test(path);
|
||||
});
|
||||
</script>
|
||||
|
||||
<a href="#main" class="skip-link">{t('common.skip_to_content')}</a>
|
||||
|
||||
<Header />
|
||||
{#if !isFocusMode}
|
||||
<Header />
|
||||
{/if}
|
||||
|
||||
<main id="main" class="mx-auto max-w-6xl px-4 py-8" tabindex="-1">
|
||||
<main
|
||||
id="main"
|
||||
class="main"
|
||||
class:focus-mode={isFocusMode}
|
||||
class:default-pad={!isFocusMode}
|
||||
tabindex="-1"
|
||||
>
|
||||
{@render children?.()}
|
||||
</main>
|
||||
|
||||
<ToastStack />
|
||||
|
||||
<style>
|
||||
.main {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.default-pad {
|
||||
max-width: 72rem;
|
||||
padding: 2rem 1rem;
|
||||
}
|
||||
|
||||
/* Focus-Mode: keine max-width-Begrenzung, kein Außen-Padding —
|
||||
Lern-Page übernimmt selbst das Layout (Sidebar + Karte zentriert). */
|
||||
.focus-mode {
|
||||
max-width: none;
|
||||
padding: 0;
|
||||
min-height: 100vh;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -2,15 +2,24 @@
|
|||
import { onMount } from 'svelte';
|
||||
import { goto } from '$app/navigation';
|
||||
import type { Deck } from '@cards/domain';
|
||||
import { listDecks, deleteDeck } from '$lib/api/decks.ts';
|
||||
import { listDecks } from '$lib/api/decks.ts';
|
||||
import { listCards } from '$lib/api/cards.ts';
|
||||
import { listDueReviews } from '$lib/api/reviews.ts';
|
||||
import { devUser } from '$lib/auth/dev-stub.svelte.ts';
|
||||
import { toasts } from '$lib/stores/toasts.svelte.ts';
|
||||
import InboxBanner from '$lib/components/InboxBanner.svelte';
|
||||
import DeckGrid from '$lib/components/DeckGrid.svelte';
|
||||
import { t } from '$lib/i18n/index.svelte.ts';
|
||||
|
||||
let decks = $state<Deck[]>([]);
|
||||
interface DeckWithCounts {
|
||||
deck: Deck;
|
||||
cardCount: number;
|
||||
dueCount: number;
|
||||
}
|
||||
|
||||
let decks = $state<DeckWithCounts[]>([]);
|
||||
let loading = $state(true);
|
||||
let error = $state<string | null>(null);
|
||||
let selectedId = $state<string | null>(null);
|
||||
|
||||
onMount(async () => {
|
||||
if (!devUser.id) {
|
||||
|
|
@ -24,7 +33,20 @@
|
|||
try {
|
||||
loading = true;
|
||||
const r = await listDecks();
|
||||
decks = r.decks;
|
||||
const enriched = await Promise.all(
|
||||
r.decks.map(async (deck) => {
|
||||
try {
|
||||
const [c, due] = await Promise.all([
|
||||
listCards(deck.id),
|
||||
listDueReviews({ deckId: deck.id, limit: 500 }),
|
||||
]);
|
||||
return { deck, cardCount: c.cards.length, dueCount: due.total };
|
||||
} catch {
|
||||
return { deck, cardCount: 0, dueCount: 0 };
|
||||
}
|
||||
}),
|
||||
);
|
||||
decks = enriched;
|
||||
error = null;
|
||||
} catch (e) {
|
||||
error = (e as Error).message;
|
||||
|
|
@ -33,86 +55,118 @@
|
|||
}
|
||||
}
|
||||
|
||||
async function onDelete(id: string, name: string) {
|
||||
if (!confirm(t('decks.delete_confirm', { name }))) return;
|
||||
try {
|
||||
await deleteDeck(id);
|
||||
toasts.success(t('decks.deleted', { name }));
|
||||
await refresh();
|
||||
} catch (e) {
|
||||
toasts.error(t('decks.delete_failed', { msg: (e as Error).message }));
|
||||
}
|
||||
function handleSelect(deckId: string) {
|
||||
// Stufe 1: andere Decks weichen, selected hebt sich.
|
||||
selectedId = deckId;
|
||||
// URL wechselt nach kurzer Verzögerung. Klick auf einen Stapel
|
||||
// landet direkt im Lern-Modus — die Detail-View (/decks/<id>)
|
||||
// bleibt über den "Karten verwalten"-Link im Study-Header
|
||||
// erreichbar.
|
||||
setTimeout(() => {
|
||||
goto(`/study/${deckId}`);
|
||||
}, 220);
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="flex items-center justify-between gap-2">
|
||||
<h1 class="text-2xl font-semibold">{t('decks.title')}</h1>
|
||||
<div class="flex gap-2">
|
||||
<a
|
||||
href="/decks/new-ai"
|
||||
class="rounded border border-[var(--color-primary)] px-3 py-2 text-sm text-[var(--color-primary)] hover:bg-[var(--color-primary)]/10"
|
||||
title="Mit KI generieren"
|
||||
>
|
||||
✨ KI-Deck
|
||||
</a>
|
||||
<a
|
||||
href="/decks/new"
|
||||
class="rounded bg-[var(--color-primary)] px-4 py-2 text-sm text-[var(--color-primary-fg)]"
|
||||
>{t('decks.new')}</a
|
||||
>
|
||||
<div class="header">
|
||||
<h1 class="title">{t('decks.title')}</h1>
|
||||
<div class="actions">
|
||||
<a class="btn-secondary" href="/decks/new-ai" title="Mit KI generieren">✨ KI-Deck</a>
|
||||
<a class="btn-primary" href="/decks/new">{t('decks.new')}</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
<div class="inbox">
|
||||
<InboxBanner />
|
||||
</div>
|
||||
|
||||
{#if loading}
|
||||
<p class="mt-8 text-[var(--color-muted)]">{t('decks.loading')}</p>
|
||||
<p class="muted">{t('decks.loading')}</p>
|
||||
{:else if error}
|
||||
<p class="mt-8 text-[var(--color-danger)]">{t('decks.error', { msg: error })}</p>
|
||||
<p class="error">{t('decks.error', { msg: error })}</p>
|
||||
{:else if decks.length === 0}
|
||||
<div
|
||||
class="mt-8 rounded-lg border border-dashed border-[var(--color-border)] p-12 text-center"
|
||||
>
|
||||
<p class="text-[var(--color-muted)]">{t('decks.empty')}</p>
|
||||
<a href="/decks/new" class="mt-4 inline-block text-[var(--color-primary)] hover:underline"
|
||||
>{t('decks.empty_cta')} →</a
|
||||
>
|
||||
<div class="empty">
|
||||
<p class="muted">{t('decks.empty')}</p>
|
||||
<a class="empty-cta" href="/decks/new">{t('decks.empty_cta')} →</a>
|
||||
</div>
|
||||
{:else}
|
||||
<ul class="mt-6 grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{#each decks as deck (deck.id)}
|
||||
<li
|
||||
class="group relative rounded-lg border border-[var(--color-border)] bg-[var(--color-card)] p-4 hover:border-[var(--color-primary)]"
|
||||
>
|
||||
<a href="/decks/{deck.id}" class="block">
|
||||
<div class="flex items-start gap-3">
|
||||
{#if deck.color}
|
||||
<span
|
||||
class="mt-1 h-3 w-3 shrink-0 rounded-full"
|
||||
style="background:{deck.color}"
|
||||
></span>
|
||||
{/if}
|
||||
<div class="min-w-0 flex-1">
|
||||
<h2 class="truncate font-medium">{deck.name}</h2>
|
||||
{#if deck.description}
|
||||
<p class="mt-1 line-clamp-2 text-sm text-[var(--color-muted)]">
|
||||
{deck.description}
|
||||
</p>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<button
|
||||
class="absolute right-2 top-2 rounded p-1 text-[var(--color-muted)] opacity-0 hover:bg-[var(--color-border)] hover:text-[var(--color-danger)] focus-visible:opacity-100 group-hover:opacity-100"
|
||||
onclick={() => onDelete(deck.id, deck.name)}
|
||||
aria-label={t('decks.delete_confirm', { name: deck.name })}
|
||||
title={t('decks.delete_confirm', { name: deck.name })}
|
||||
>
|
||||
🗑
|
||||
</button>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
<DeckGrid {decks} {selectedId} onSelect={handleSelect} />
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.header {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 0;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.btn-primary,
|
||||
.btn-secondary {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 0.5rem 0.875rem;
|
||||
border-radius: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
text-decoration: none;
|
||||
border: 1px solid transparent;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: hsl(var(--color-primary));
|
||||
color: hsl(var(--color-primary-foreground));
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
color: hsl(var(--color-primary));
|
||||
border-color: hsl(var(--color-primary));
|
||||
}
|
||||
.btn-secondary:hover {
|
||||
background: hsl(var(--color-primary) / 0.1);
|
||||
}
|
||||
|
||||
.inbox {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.muted {
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: hsl(var(--color-error));
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.empty {
|
||||
margin-top: 2rem;
|
||||
padding: 3rem;
|
||||
text-align: center;
|
||||
border: 1px dashed hsl(var(--color-border));
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
.empty-cta {
|
||||
display: inline-block;
|
||||
margin-top: 1rem;
|
||||
color: hsl(var(--color-primary));
|
||||
}
|
||||
.empty-cta:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@
|
|||
import { devUser } from '$lib/auth/dev-stub.svelte.ts';
|
||||
import { toasts } from '$lib/stores/toasts.svelte.ts';
|
||||
import { t, tn } from '$lib/i18n/index.svelte.ts';
|
||||
import DeckFan from '$lib/components/DeckFan.svelte';
|
||||
|
||||
let deck = $state<Deck | null>(null);
|
||||
let cards = $state<Card[]>([]);
|
||||
|
|
@ -58,11 +59,11 @@
|
|||
</script>
|
||||
|
||||
{#if loading}
|
||||
<p class="text-[var(--color-muted)]">{t('decks.loading')}</p>
|
||||
<p class="text-[hsl(var(--color-muted-foreground))]">{t('decks.loading')}</p>
|
||||
{:else if error}
|
||||
<p class="text-[var(--color-danger)]">{t('decks.error', { msg: error })}</p>
|
||||
<p class="text-[hsl(var(--color-error))]">{t('decks.error', { msg: error })}</p>
|
||||
{:else if deck}
|
||||
<a href="/decks" class="text-sm text-[var(--color-muted)] hover:text-[var(--color-fg)]"
|
||||
<a href="/decks" class="text-sm text-[hsl(var(--color-muted-foreground))] hover:text-[hsl(var(--color-foreground))]"
|
||||
>← {t('nav.decks')}</a
|
||||
>
|
||||
|
||||
|
|
@ -80,21 +81,21 @@
|
|||
<div class="flex gap-2">
|
||||
<a
|
||||
href="/cards/new?deck={deck.id}"
|
||||
class="rounded border border-[var(--color-border)] px-3 py-2 text-sm hover:border-[var(--color-primary)]"
|
||||
class="rounded border border-[hsl(var(--color-border))] px-3 py-2 text-sm hover:border-[hsl(var(--color-primary))]"
|
||||
>
|
||||
+ {t('deck_detail.new_card')}
|
||||
</a>
|
||||
{#if dueCount > 0}
|
||||
<a
|
||||
href="/study/{deck.id}"
|
||||
class="rounded bg-[var(--color-primary)] px-4 py-2 text-sm text-[var(--color-primary-fg)]"
|
||||
class="rounded bg-[hsl(var(--color-primary))] px-4 py-2 text-sm text-[hsl(var(--color-primary-foreground))]"
|
||||
>
|
||||
{t('deck_detail.study_button')} ({t('study.due_count', { n: dueCount })})
|
||||
</a>
|
||||
{:else}
|
||||
<button
|
||||
disabled
|
||||
class="rounded bg-[var(--color-muted)] px-4 py-2 text-sm text-[var(--color-bg)] opacity-50"
|
||||
class="rounded bg-[hsl(var(--color-muted-foreground))] px-4 py-2 text-sm text-[hsl(var(--color-background))] opacity-50"
|
||||
title={t('study.none_due')}
|
||||
>
|
||||
{t('deck_detail.study_button')}
|
||||
|
|
@ -104,35 +105,51 @@
|
|||
</div>
|
||||
|
||||
{#if deck.description}
|
||||
<p class="mt-2 text-[var(--color-muted)]">{deck.description}</p>
|
||||
<p class="mt-2 text-[hsl(var(--color-muted-foreground))]">{deck.description}</p>
|
||||
{/if}
|
||||
|
||||
<div class="mt-2 text-sm text-[var(--color-muted)]">
|
||||
<div class="mt-2 text-sm text-[hsl(var(--color-muted-foreground))]">
|
||||
{tn('decks.card_count', cards.length)} · {t('study.due_count', { n: dueCount })}
|
||||
</div>
|
||||
|
||||
{#if cards.length === 0}
|
||||
<div
|
||||
class="mt-8 rounded-lg border border-dashed border-[var(--color-border)] p-12 text-center"
|
||||
class="mt-8 rounded-lg border border-dashed border-[hsl(var(--color-border))] p-12 text-center"
|
||||
>
|
||||
<p class="text-[var(--color-muted)]">{t('deck_detail.empty')}</p>
|
||||
<p class="text-[hsl(var(--color-muted-foreground))]">{t('deck_detail.empty')}</p>
|
||||
<a
|
||||
href="/cards/new?deck={deck.id}"
|
||||
class="mt-4 inline-block text-[var(--color-primary)] hover:underline"
|
||||
class="mt-4 inline-block text-[hsl(var(--color-primary))] hover:underline"
|
||||
>{t('deck_detail.empty_cta')}</a
|
||||
>
|
||||
</div>
|
||||
{:else}
|
||||
<ul class="mt-6 divide-y divide-[var(--color-border)] rounded-lg border border-[var(--color-border)] bg-[var(--color-card)]">
|
||||
<!-- Auffächer-Hero: zeigt die obersten Karten als "Hand of Cards" -->
|
||||
<div class="mt-4">
|
||||
<DeckFan
|
||||
{deck}
|
||||
{cards}
|
||||
totalCount={cards.length}
|
||||
{dueCount}
|
||||
maxFanCards={7}
|
||||
onCardClick={(card) => goto(`/cards/${card.id}/edit`)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Detail-Liste für Edit/Delete-Operationen — nicht jeder Klick soll
|
||||
durch die Auffächerung müssen, Power-User wollen die Liste. -->
|
||||
<details class="mt-2">
|
||||
<summary class="list-toggle">{t('deck_detail.new_card')} · alle Karten</summary>
|
||||
<ul class="mt-3 divide-y divide-[hsl(var(--color-border))] rounded-lg border border-[hsl(var(--color-border))] bg-[hsl(var(--color-card))]">
|
||||
{#each cards as card (card.id)}
|
||||
<li class="group flex items-start justify-between gap-4 px-4 py-3">
|
||||
<a
|
||||
href="/cards/{card.id}/edit"
|
||||
class="min-w-0 flex-1 hover:text-[var(--color-primary)]"
|
||||
class="min-w-0 flex-1 hover:text-[hsl(var(--color-primary))]"
|
||||
>
|
||||
<div class="flex items-center gap-2">
|
||||
<span
|
||||
class="rounded bg-[var(--color-border)] px-2 py-0.5 text-xs text-[var(--color-muted)]"
|
||||
class="rounded bg-[hsl(var(--color-border))] px-2 py-0.5 text-xs text-[hsl(var(--color-muted-foreground))]"
|
||||
>{card.type}</span>
|
||||
</div>
|
||||
<p class="mt-1 truncate text-sm">
|
||||
|
|
@ -140,19 +157,19 @@
|
|||
<span class="font-medium">{card.fields.text ?? t('common.empty')}</span>
|
||||
{:else if card.type === 'image-occlusion'}
|
||||
<span class="font-medium">🖼 image-occlusion</span>
|
||||
<span class="text-[var(--color-muted)]">
|
||||
<span class="text-[hsl(var(--color-muted-foreground))]">
|
||||
· {card.fields.image_ref
|
||||
? card.fields.image_ref.slice(0, 12)
|
||||
: t('common.empty')}
|
||||
</span>
|
||||
{:else}
|
||||
<span class="font-medium">{card.fields.front ?? t('common.empty')}</span>
|
||||
<span class="text-[var(--color-muted)]"> → {card.fields.back ?? t('common.empty')}</span>
|
||||
<span class="text-[hsl(var(--color-muted-foreground))]"> → {card.fields.back ?? t('common.empty')}</span>
|
||||
{/if}
|
||||
</p>
|
||||
</a>
|
||||
<button
|
||||
class="text-sm text-[var(--color-muted)] opacity-0 hover:text-[var(--color-danger)] focus-visible:opacity-100 group-hover:opacity-100"
|
||||
class="text-sm text-[hsl(var(--color-muted-foreground))] opacity-0 hover:text-[hsl(var(--color-error))] focus-visible:opacity-100 group-hover:opacity-100"
|
||||
onclick={() => onDeleteCard(card.id)}
|
||||
aria-label={t('deck_detail.card_delete_aria')}
|
||||
>
|
||||
|
|
@ -161,5 +178,30 @@
|
|||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</details>
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.list-toggle {
|
||||
cursor: pointer;
|
||||
font-size: 0.875rem;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
padding: 0.5rem 0;
|
||||
list-style: none;
|
||||
}
|
||||
.list-toggle::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
.list-toggle::before {
|
||||
content: '▸ ';
|
||||
display: inline-block;
|
||||
transition: transform 0.15s ease;
|
||||
}
|
||||
details[open] .list-toggle::before {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
.list-toggle:hover {
|
||||
color: hsl(var(--color-foreground));
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -16,10 +16,12 @@
|
|||
import { toasts } from '$lib/stores/toasts.svelte.ts';
|
||||
import { t } from '$lib/i18n/index.svelte.ts';
|
||||
import ImageOcclusionView from '$lib/components/ImageOcclusionView.svelte';
|
||||
import CardSurface from '$lib/components/CardSurface.svelte';
|
||||
|
||||
const deckId = $derived(page.params.deckId ?? '');
|
||||
|
||||
let deckName = $state('');
|
||||
let deckColor = $state<string | null>(null);
|
||||
let queue = $state<DueReview[]>([]);
|
||||
let queueIndex = $state(0);
|
||||
let revealed = $state(false);
|
||||
|
|
@ -99,6 +101,7 @@
|
|||
listDueReviews({ deckId, limit: 200 }),
|
||||
]);
|
||||
deckName = d.name;
|
||||
deckColor = d.color ?? null;
|
||||
queue = due.reviews;
|
||||
} catch (e) {
|
||||
toasts.error(`Sitzung konnte nicht geladen werden: ${(e as Error).message}`);
|
||||
|
|
@ -152,117 +155,398 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<div class="mx-auto max-w-2xl">
|
||||
<a href="/study" class="text-sm text-[var(--color-muted)] hover:text-[var(--color-fg)]"
|
||||
>{t('study_session.back')}</a
|
||||
>
|
||||
<h1 class="mt-2 text-xl font-semibold">{deckName}</h1>
|
||||
<p class="mt-1 text-sm text-[var(--color-muted)]" aria-live="polite">
|
||||
{#if !loading && !isDone}
|
||||
{queueIndex + 1} / {queue.length}
|
||||
{/if}
|
||||
</p>
|
||||
<div class="study-page">
|
||||
<!-- Sidebar links neben der Karte: Zurück-Pfeil, Deck-Name,
|
||||
Fortschritt, Karten-Verwalten-Link — alles als kleiner UI-Block
|
||||
gepackt, damit der Karten-Bereich frei vom Chrome bleibt. -->
|
||||
<aside class="study-aside" aria-label={t('study_session.back')}>
|
||||
<a class="aside-back" href="/decks" aria-label={t('study_session.back')}>
|
||||
<span aria-hidden="true">←</span>
|
||||
<span>{t('nav.decks')}</span>
|
||||
</a>
|
||||
<h1 class="aside-name">{deckName}</h1>
|
||||
<p class="aside-progress" aria-live="polite">
|
||||
{#if !loading && !isDone}
|
||||
{queueIndex + 1} / {queue.length}
|
||||
{/if}
|
||||
</p>
|
||||
<a class="aside-manage" href="/decks/{deckId}">{t('study_session.manage_link')}</a>
|
||||
</aside>
|
||||
|
||||
<div class="study-content">
|
||||
{#if loading}
|
||||
<p class="mt-12 text-center text-[var(--color-muted)]">{t('study_session.loading')}</p>
|
||||
<p class="loading">{t('study_session.loading')}</p>
|
||||
{:else if queue.length === 0}
|
||||
<div class="mt-12 rounded-lg border border-dashed border-[var(--color-border)] p-12 text-center">
|
||||
<p>{t('study.none_due')} 🎉</p>
|
||||
<a href="/decks/{deckId}" class="mt-4 inline-block text-[var(--color-primary)] hover:underline">
|
||||
{t('card_edit.back')}
|
||||
</a>
|
||||
<div class="study-stage">
|
||||
<CardSurface size="hero" raised colorAccent={deckColor} class="study-card empty">
|
||||
<div class="study-inner centered">
|
||||
<p class="big-emoji" aria-hidden="true">🎉</p>
|
||||
<p class="big-line">{t('study.none_due')}</p>
|
||||
<a class="action-link" href="/decks/{deckId}">{t('card_edit.back')}</a>
|
||||
</div>
|
||||
</CardSurface>
|
||||
</div>
|
||||
{:else if isDone}
|
||||
<div class="mt-12 rounded-lg border border-[var(--color-border)] bg-[var(--color-card)] p-12 text-center">
|
||||
<h2 class="text-xl">{t('study_session.all_done')}</h2>
|
||||
<p class="mt-2 text-[var(--color-muted)]">
|
||||
{t('study_session.stats', { reviewed: stats.reviewed, again: stats.again })}
|
||||
</p>
|
||||
<div class="mt-6 flex justify-center gap-3">
|
||||
<a href="/decks/{deckId}" class="rounded border border-[var(--color-border)] px-4 py-2 text-sm">
|
||||
{t('card_edit.back')}
|
||||
</a>
|
||||
<a
|
||||
href="/study/{deckId}"
|
||||
class="rounded bg-[var(--color-primary)] px-4 py-2 text-sm text-[var(--color-primary-fg)]"
|
||||
>
|
||||
{t('study.study_now')}
|
||||
</a>
|
||||
</div>
|
||||
<div class="study-stage">
|
||||
<CardSurface size="hero" raised colorAccent={deckColor} class="study-card done">
|
||||
<div class="study-inner centered">
|
||||
<h2 class="big-line">{t('study_session.all_done')}</h2>
|
||||
<p class="muted">{t('study_session.stats', { reviewed: stats.reviewed, again: stats.again })}</p>
|
||||
<div class="done-actions">
|
||||
<a class="btn-secondary" href="/decks/{deckId}">{t('card_edit.back')}</a>
|
||||
<a class="btn-primary" href="/study/{deckId}">{t('study.study_now')}</a>
|
||||
</div>
|
||||
</div>
|
||||
</CardSurface>
|
||||
</div>
|
||||
{:else}
|
||||
<article
|
||||
class="mt-6 rounded-lg border border-[var(--color-border)] bg-[var(--color-card)] p-8"
|
||||
aria-labelledby="study-prompt-heading"
|
||||
>
|
||||
<h2 id="study-prompt-heading" class="sr-only">
|
||||
{revealed ? t('card_new.preview_label') : t('study_session.reveal')}
|
||||
</h2>
|
||||
{#if isImageOcclusion && imageOcclusionData}
|
||||
<ImageOcclusionView
|
||||
imageRef={imageOcclusionData.imageRef}
|
||||
maskRegionsJson={imageOcclusionData.maskRegionsJson}
|
||||
activeMaskId={imageOcclusionData.activeMaskId}
|
||||
{revealed}
|
||||
/>
|
||||
{:else}
|
||||
<div class="prose prose-lg max-w-none">{@html promptHtml}</div>
|
||||
|
||||
{#if revealed}
|
||||
<hr class="my-6 border-[var(--color-border)]" />
|
||||
<div class="prose prose-lg max-w-none">{@html answerHtml}</div>
|
||||
{/if}
|
||||
{/if}
|
||||
</article>
|
||||
<div class="study-stage">
|
||||
<CardSurface size="hero" raised colorAccent={deckColor} class="study-card">
|
||||
<article class="study-inner" aria-labelledby="study-prompt-heading">
|
||||
<h2 id="study-prompt-heading" class="sr-only">
|
||||
{revealed ? t('card_new.preview_label') : t('study_session.reveal')}
|
||||
</h2>
|
||||
{#if isImageOcclusion && imageOcclusionData}
|
||||
<ImageOcclusionView
|
||||
imageRef={imageOcclusionData.imageRef}
|
||||
maskRegionsJson={imageOcclusionData.maskRegionsJson}
|
||||
activeMaskId={imageOcclusionData.activeMaskId}
|
||||
{revealed}
|
||||
/>
|
||||
{:else}
|
||||
<div class="prose">{@html promptHtml}</div>
|
||||
{#if revealed}
|
||||
<hr class="divider" />
|
||||
<div class="prose answer">{@html answerHtml}</div>
|
||||
{/if}
|
||||
{/if}
|
||||
</article>
|
||||
</CardSurface>
|
||||
</div>
|
||||
|
||||
{#if !revealed}
|
||||
<div class="mt-6 flex justify-center">
|
||||
<button
|
||||
onclick={() => (revealed = true)}
|
||||
class="rounded bg-[var(--color-primary)] px-6 py-3 text-sm text-[var(--color-primary-fg)]"
|
||||
>
|
||||
{t('study_session.reveal')} <kbd class="ml-2 text-xs opacity-70">Space</kbd>
|
||||
<div class="reveal-row">
|
||||
<button class="btn-primary reveal" onclick={() => (revealed = true)}>
|
||||
{t('study_session.reveal')} <kbd>Space</kbd>
|
||||
</button>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="mt-6 grid grid-cols-4 gap-2" role="group" aria-label={t('study_session.grade_hint')}>
|
||||
<button
|
||||
onclick={() => grade('again')}
|
||||
disabled={busy}
|
||||
class="flex flex-col items-center gap-1 rounded border border-[var(--color-danger)] bg-[var(--color-card)] px-3 py-3 text-sm disabled:opacity-50"
|
||||
>
|
||||
<div class="grade-row" role="group" aria-label={t('study_session.grade_hint')}>
|
||||
<button class="grade grade-again" onclick={() => grade('again')} disabled={busy}>
|
||||
<span>{t('study_session.grade_again')}</span>
|
||||
<kbd class="text-xs text-[var(--color-muted)]">1</kbd>
|
||||
<kbd>1</kbd>
|
||||
</button>
|
||||
<button
|
||||
onclick={() => grade('hard')}
|
||||
disabled={busy}
|
||||
class="flex flex-col items-center gap-1 rounded border border-[var(--color-border)] bg-[var(--color-card)] px-3 py-3 text-sm disabled:opacity-50"
|
||||
>
|
||||
<button class="grade grade-hard" onclick={() => grade('hard')} disabled={busy}>
|
||||
<span>{t('study_session.grade_hard')}</span>
|
||||
<kbd class="text-xs text-[var(--color-muted)]">2</kbd>
|
||||
<kbd>2</kbd>
|
||||
</button>
|
||||
<button
|
||||
onclick={() => grade('good')}
|
||||
disabled={busy}
|
||||
class="flex flex-col items-center gap-1 rounded border border-[var(--color-primary)] bg-[var(--color-primary)] px-3 py-3 text-sm text-[var(--color-primary-fg)] disabled:opacity-50"
|
||||
>
|
||||
<button class="grade grade-good" onclick={() => grade('good')} disabled={busy}>
|
||||
<span>{t('study_session.grade_good')}</span>
|
||||
<kbd class="text-xs opacity-70">3</kbd>
|
||||
<kbd>3</kbd>
|
||||
</button>
|
||||
<button
|
||||
onclick={() => grade('easy')}
|
||||
disabled={busy}
|
||||
class="flex flex-col items-center gap-1 rounded border border-[var(--color-success)] bg-[var(--color-card)] px-3 py-3 text-sm disabled:opacity-50"
|
||||
>
|
||||
<button class="grade grade-easy" onclick={() => grade('easy')} disabled={busy}>
|
||||
<span>{t('study_session.grade_easy')}</span>
|
||||
<kbd class="text-xs text-[var(--color-muted)]">4</kbd>
|
||||
<kbd>4</kbd>
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<p class="mt-6 text-center text-xs text-[var(--color-muted)]">
|
||||
{t('study_session.grade_hint')}
|
||||
</p>
|
||||
<p class="grade-hint">{t('study_session.grade_hint')}</p>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.study-page {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 100vh;
|
||||
padding: 2rem 1.5rem;
|
||||
}
|
||||
|
||||
/* Sidebar oben links — Deck-Info als kompakter Block, KEIN Einfluss
|
||||
auf die Karten-Zentrierung (absolut positioniert). */
|
||||
.study-aside {
|
||||
position: absolute;
|
||||
top: 1.5rem;
|
||||
left: 1.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
max-width: 16rem;
|
||||
}
|
||||
|
||||
.aside-back {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.375rem;
|
||||
font-size: 0.8125rem;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
text-decoration: none;
|
||||
width: fit-content;
|
||||
}
|
||||
.aside-back:hover {
|
||||
color: hsl(var(--color-foreground));
|
||||
}
|
||||
|
||||
.aside-name {
|
||||
margin: 0;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: hsl(var(--color-foreground));
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.aside-progress {
|
||||
margin: 0;
|
||||
font-size: 0.8125rem;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.aside-manage {
|
||||
margin-top: 0.5rem;
|
||||
font-size: 0.8125rem;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
text-decoration: none;
|
||||
width: fit-content;
|
||||
}
|
||||
.aside-manage:hover {
|
||||
color: hsl(var(--color-primary));
|
||||
}
|
||||
|
||||
/* Content — Karte horizontal + vertikal zentriert auf dem Viewport,
|
||||
unabhängig von der Sidebar (die ist absolut platziert). */
|
||||
.study-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.loading {
|
||||
text-align: center;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
}
|
||||
|
||||
.study-stage {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Mobile: Sidebar bleibt oben links, aber Karte rückt unter die
|
||||
Sidebar — Top-Padding größer, damit nichts überlappt. */
|
||||
@media (max-width: 720px) {
|
||||
.study-page {
|
||||
padding: 6.5rem 1rem 2rem;
|
||||
}
|
||||
.study-aside {
|
||||
top: 1rem;
|
||||
left: 1rem;
|
||||
right: 1rem;
|
||||
max-width: none;
|
||||
}
|
||||
.aside-name {
|
||||
font-size: 1.0625rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Die Karte selbst — minimal, fokussiert. CardSurface trägt Border,
|
||||
Radius, Shadow, Color-Stripe links. Inneres Layout passt sich an
|
||||
Portrait-Format (5:7) an: Inhalt vertikal zentriert, Padding rechts
|
||||
vom Color-Stripe. */
|
||||
.study-inner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 1.25rem;
|
||||
padding: 2rem 1.5rem 2rem 1.875rem;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.study-inner.centered {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.prose {
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.55;
|
||||
color: hsl(var(--color-foreground));
|
||||
}
|
||||
|
||||
.prose :global(p) {
|
||||
margin: 0 0 0.875em;
|
||||
}
|
||||
.prose :global(p:last-child) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.prose :global(strong) {
|
||||
font-weight: 600;
|
||||
}
|
||||
.prose :global(code) {
|
||||
background: hsl(var(--color-muted));
|
||||
padding: 0.125rem 0.375rem;
|
||||
border-radius: 0.25rem;
|
||||
font-size: 0.875em;
|
||||
}
|
||||
|
||||
.prose.answer {
|
||||
color: hsl(var(--color-foreground));
|
||||
}
|
||||
|
||||
.divider {
|
||||
border: none;
|
||||
border-top: 1px solid hsl(var(--color-border));
|
||||
margin: 0.25rem 0;
|
||||
}
|
||||
|
||||
.big-emoji {
|
||||
font-size: 2.5rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.big-line {
|
||||
margin: 0;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.muted {
|
||||
margin: 0;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.action-link {
|
||||
color: hsl(var(--color-primary));
|
||||
font-size: 0.875rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
.action-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.done-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.btn-primary,
|
||||
.btn-secondary {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
text-decoration: none;
|
||||
border: 1px solid transparent;
|
||||
font-family: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn-primary {
|
||||
background: hsl(var(--color-primary));
|
||||
color: hsl(var(--color-primary-foreground));
|
||||
}
|
||||
.btn-secondary {
|
||||
background: hsl(var(--color-surface));
|
||||
color: hsl(var(--color-foreground));
|
||||
border-color: hsl(var(--color-border));
|
||||
}
|
||||
|
||||
/* Reveal-Button und Grade-Row sitzen UNTER der Karte — keine
|
||||
Sub-Karten, sondern Aktions-Leiste. Bewahrt das "eine Karte ist
|
||||
eine Karte"-Gefühl. */
|
||||
.reveal-row {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.btn-primary.reveal {
|
||||
padding: 0.75rem 1.5rem;
|
||||
font-size: 0.9375rem;
|
||||
}
|
||||
.btn-primary.reveal kbd {
|
||||
margin-left: 0.5rem;
|
||||
padding: 0.0625rem 0.375rem;
|
||||
background: hsl(var(--color-primary-foreground) / 0.15);
|
||||
border-radius: 0.25rem;
|
||||
font-size: 0.75rem;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.grade-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 0.5rem;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.grade {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
padding: 0.875rem 0.5rem;
|
||||
border: 1px solid hsl(var(--color-border));
|
||||
background: hsl(var(--color-surface));
|
||||
color: hsl(var(--color-foreground));
|
||||
border-radius: 0.5rem;
|
||||
font: inherit;
|
||||
font-size: 0.875rem;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.15s ease, border-color 0.15s ease;
|
||||
}
|
||||
.grade:hover:not(:disabled) {
|
||||
background: hsl(var(--color-surface-hover));
|
||||
}
|
||||
.grade:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.grade kbd {
|
||||
font-size: 0.6875rem;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.grade.grade-again {
|
||||
border-color: hsl(var(--color-error) / 0.4);
|
||||
}
|
||||
.grade.grade-again:hover:not(:disabled) {
|
||||
background: hsl(var(--color-error) / 0.08);
|
||||
}
|
||||
.grade.grade-good {
|
||||
background: hsl(var(--color-primary));
|
||||
color: hsl(var(--color-primary-foreground));
|
||||
border-color: hsl(var(--color-primary));
|
||||
}
|
||||
.grade.grade-good:hover:not(:disabled) {
|
||||
background: hsl(var(--color-primary) / 0.9);
|
||||
}
|
||||
.grade.grade-good kbd {
|
||||
color: hsl(var(--color-primary-foreground) / 0.7);
|
||||
}
|
||||
.grade.grade-easy {
|
||||
border-color: hsl(var(--color-success) / 0.4);
|
||||
}
|
||||
.grade.grade-easy:hover:not(:disabled) {
|
||||
background: hsl(var(--color-success) / 0.08);
|
||||
}
|
||||
|
||||
.grade-hint {
|
||||
margin: 1.25rem 0 0;
|
||||
text-align: center;
|
||||
font-size: 0.75rem;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue