feat(decks): Edit-Icon auf Deck-Karten + Deck-Edit-Page

- DeckStack: Pencil-Icon absolut unten-rechts, erscheint beim Hover
  (z-index über Card, ausserhalb des <a>-Links zur Detail-Page)
- Neuer Route /decks/[id]/edit: Form für Name, Beschreibung, Farbe
- i18n deck_edit keys (de + en)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Till JS 2026-05-10 15:57:37 +02:00
parent 9754718157
commit 03ec7e7b3e
4 changed files with 298 additions and 0 deletions

View file

@ -5,6 +5,7 @@
import { t, tn } from '$lib/i18n/index.svelte.ts';
import CardSurface from './CardSurface.svelte';
import DeckCategoryIcon from './DeckCategoryIcon.svelte';
import { PencilSimple } from '@mana/shared-icons';
interface Props {
deck: Deck;
@ -43,6 +44,16 @@
{/each}
{/if}
<a
href="/decks/{deck.id}/edit"
class="edit-btn"
onclick={(e) => e.stopPropagation()}
aria-label="Deck bearbeiten"
title="Deck bearbeiten"
>
<PencilSimple size={13} weight="bold" />
</a>
<CardSurface
size="md"
as={href ? 'a' : 'button'}
@ -170,4 +181,34 @@
border-style: dashed;
background: transparent;
}
.edit-btn {
position: absolute;
bottom: 0.625rem;
right: 0.625rem;
z-index: 10;
width: 1.625rem;
height: 1.625rem;
border-radius: 0.375rem;
background: hsl(var(--color-surface) / 0.92);
border: 1px solid hsl(var(--color-border));
display: flex;
align-items: center;
justify-content: center;
color: hsl(var(--color-muted-foreground));
text-decoration: none;
opacity: 0;
transition: opacity 0.15s, color 0.12s, background 0.12s, border-color 0.12s;
backdrop-filter: blur(4px);
}
.stack-wrap:hover .edit-btn {
opacity: 1;
}
.edit-btn:hover {
color: hsl(var(--color-foreground));
background: hsl(var(--color-surface));
border-color: hsl(var(--color-primary) / 0.5);
}
</style>

View file

@ -57,6 +57,18 @@ export const de: TranslationNode = {
deck_stack: {
aria_label: 'Stapel "{name}" — {cards} Karten, {due} fällig',
},
deck_edit: {
title: 'Deck bearbeiten',
back: '← Zurück zum Deck',
name_label: 'Name',
description_label: 'Beschreibung (optional)',
color_label: 'Farbe',
save: 'Speichern',
saving: 'Speichere…',
cancel: 'Abbrechen',
save_failed: 'Speichern fehlgeschlagen: {msg}',
saved: 'Deck gespeichert',
},
deck_new: {
title: 'Neues Deck',
name_label: 'Name',

View file

@ -54,6 +54,18 @@ export const en: TranslationNode = {
deck_stack: {
aria_label: 'Stack "{name}" — {cards} cards, {due} due',
},
deck_edit: {
title: 'Edit deck',
back: '← Back to deck',
name_label: 'Name',
description_label: 'Description (optional)',
color_label: 'Color',
save: 'Save',
saving: 'Saving…',
cancel: 'Cancel',
save_failed: 'Save failed: {msg}',
saved: 'Deck saved',
},
deck_new: {
title: 'New deck',
name_label: 'Name',