till/cards
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

refactor(web): vereinfachte Navigation und inline Deck-Erstellung

Browse source 
- /study-Listing entfernt, Route redirectet auf /decks
- Study-Tab aus Nav entfernt; /study/*-Pfade highlighten Decks-Tab
- /decks/new und /decks/new-ai zusammengeführt: ein Formular mit
  zwei Buttons (Anlegen + ✨ Mit KI generieren), new-ai redirectet
- Inline NewDeckCard: Formular klappt in der Kachel auf (gleiche
  Größe, scrollbar), Fach als Toggle-Picker, alle Felder volle Breite
- DeckStack: Text linksbündig, Beschreibung ohne Clamp, Titel weiter oben

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Till JS 2026-05-09 20:17:58 +02:00
parent 9a07454b75
commit 5876f95d85
8 changed files with 732 additions and 390 deletions
Download patch file Download diff file Expand all files Collapse all files

168
apps/web/src/lib/components/Header.svelte
View file

@ -12,7 +12,6 @@
const navOptions = $derived([
{ id: 'decks', label: t('nav.decks') },
{ id: 'study', label: t('nav.study') },
{ id: 'explore', label: t('nav.explore') },
{ id: 'import', label: t('nav.import') },
{ id: 'stats', label: t('nav.stats') },
@ -20,73 +19,136 @@
const activeNav = $derived.by(() => {
const path = page.url.pathname;
if (path.startsWith('/decks')) return 'decks';
if (path.startsWith('/study')) return 'study';
// /explore zeigt aktiv für Marketplace-Surfaces:
// /explore selbst, /d/<slug>, /u/<slug>, /me/{published,subscribed,forks}.
if (path.startsWith('/decks') || path.startsWith('/study')) return 'decks';
if (
path.startsWith('/explore') ||
path.startsWith('/d/') ||
path.startsWith('/u/') ||
path.startsWith('/me/')
) {
return 'explore';
}
) return 'explore';
if (path.startsWith('/import')) return 'import';
if (path.startsWith('/stats')) return 'stats';
return '';
});
const userInitial = $derived(
devUser.user?.name?.charAt(0).toUpperCase() ??
devUser.user?.email?.charAt(0).toUpperCase() ??
'?'
);
function navTo(id: string) {
goto('/' + id);
}
</script>
<header
class="sticky top-0 z-40 w-full border-b bg-[hsl(var(--color-card))] border-[hsl(var(--color-border))]"
>
<div class="mx-auto flex max-w-6xl items-center justify-between px-4 py-3">
<a href="/" class="flex items-center gap-2 font-semibold">
<span
class="inline-flex h-7 w-7 items-center justify-center rounded bg-[hsl(var(--color-primary))] text-[hsl(var(--color-primary-foreground))] text-sm"
aria-hidden="true"
>
C
</span>
<span>{t('app.name')}</span>
<div class="bottom-bar" role="navigation" aria-label={t('common.main_nav')}>
<!-- Logo -->
<a href="/" class="logo-badge" aria-label={t('app.name')}>C</a>
<div class="divider" aria-hidden="true"></div>
<!-- Hauptnavigation -->
<PillTabGroup options={navOptions} value={activeNav} onChange={navTo} />
<div class="divider" aria-hidden="true"></div>
<!-- Sprache -->
<PillTabGroup
options={langOptions}
value={i18n.current}
onChange={(id: string) => i18n.set(id as 'de' | 'en')}
sectionLabel={t('common.language_switcher')}
/>
<!-- Account -->
{#if devUser.id}
<a
href="/account"
class="account-badge"
title={devUser.user?.email ?? devUser.id}
aria-label={devUser.user?.email ?? devUser.id}
>
{userInitial}
</a>
{:else}
<a href="/" class="login-btn">Login</a>
{/if}
</div>
<nav aria-label={t('common.main_nav')}>
<PillTabGroup
options={navOptions}
value={activeNav}
onChange={navTo}
/>
</nav>
<style>
.bottom-bar {
position: fixed;
bottom: 1.25rem;
left: 50%;
transform: translateX(-50%);
z-index: 50;
display: flex;
align-items: center;
gap: 0.375rem;
padding: 0.375rem 0.625rem;
background: hsl(var(--color-surface) / 0.88);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid hsl(var(--color-border));
border-radius: 9999px;
box-shadow:
0 8px 32px hsl(var(--color-foreground) / 0.12),
0 2px 8px hsl(var(--color-foreground) / 0.08);
white-space: nowrap;
}
<div class="flex items-center gap-3 text-sm">
<PillTabGroup
options={langOptions}
value={i18n.current}
onChange={(id: string) => i18n.set(id as 'de' | 'en')}
sectionLabel={t('common.language_switcher')}
/>
{#if devUser.id}
<a
href="/account"
class="truncate max-w-[200px] text-[hsl(var(--color-muted-foreground))] hover:text-[hsl(var(--color-foreground))]"
title={devUser.user?.email ?? devUser.id}
>
{devUser.user?.email ?? devUser.user?.name ?? devUser.id}
</a>
{:else}
<a
href="/"
class="rounded bg-[hsl(var(--color-primary))] px-3 py-1 text-[hsl(var(--color-primary-foreground))]"
>
Login
</a>
{/if}
</div>
</div>
</header>
.divider {
width: 1px;
height: 1.25rem;
background: hsl(var(--color-border));
flex-shrink: 0;
margin: 0 0.125rem;
}
.logo-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.75rem;
height: 1.75rem;
border-radius: 0.375rem;
background: hsl(var(--color-primary));
color: hsl(var(--color-primary-foreground));
font-size: 0.8125rem;
font-weight: 700;
text-decoration: none;
flex-shrink: 0;
}
.account-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.75rem;
height: 1.75rem;
border-radius: 50%;
background: hsl(var(--color-primary) / 0.12);
color: hsl(var(--color-primary));
font-size: 0.6875rem;
font-weight: 700;
text-decoration: none;
flex-shrink: 0;
margin-left: 0.125rem;
}
.account-badge:hover {
background: hsl(var(--color-primary) / 0.2);
}
.login-btn {
padding: 0.25rem 0.75rem;
border-radius: 9999px;
background: hsl(var(--color-primary));
color: hsl(var(--color-primary-foreground));
font-size: 0.8125rem;
font-weight: 500;
text-decoration: none;
flex-shrink: 0;
}
</style>