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>