marcel/mealprep
1
0
Fork 0
Code Issues 22 Pull Requests Actions Packages Projects Releases Wiki Activity

feat(settings): implement settings hub page with three cards (Vorräte, Haushalt, Profil)

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel Raddatz
2026-04-10 16:27:18 +02:00
parent 3f9fb900c4
commit 109b41b434
2 changed files with 141 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
frontend/src/routes/(app)/settings/+page.svelte
View File

@@ -1 +1,70 @@
<h1 class="text-2xl font-medium p-6">Einstellungen</h1>
<script lang="ts">
import SettingsCard from '$lib/components/SettingsCard.svelte';
interface Props {
data: {
stapleCount: number;
memberCount: number;
userName: string;
};
}
let { data }: Props = $props();
</script>
<h1>Einstellungen</h1>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<!-- Card 1: Vorräte (inline, conditional content) -->
<a
href="/household/staples?ctx=settings"
class="flex flex-col gap-3 rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-surface)] p-4 no-underline text-[var(--color-text)] hover:shadow-[var(--shadow-raised)] hover:border-[#C0BFB8] transition-[box-shadow,border-color] duration-150 ease focus-visible:outline focus-visible:outline-2 focus-visible:outline-[var(--green-dark)] focus-visible:outline-offset-2 border-l-[3px] border-l-[var(--green-dark)]"
>
<span class="font-[var(--font-sans)] text-[14px] font-medium">Vorräte</span>
{#if data.stapleCount > 0}
<p class="font-[var(--font-sans)] text-[13px] text-[var(--color-text-muted)] m-0">
<span
data-testid="staple-count"
class="font-[var(--font-display)] text-[36px] leading-[1] text-[var(--green-dark)]"
>{data.stapleCount}</span>
</p>
{:else}
<p class="font-[var(--font-sans)] text-[13px] text-[var(--color-text-muted)] m-0">
Noch keine Vorräte eingerichtet
</p>
{/if}
<span class="font-[var(--font-sans)] text-[12px] font-medium text-[var(--green-dark)] mt-auto">
{#if data.stapleCount > 0}
Vorräte bearbeiten →
{:else}
Jetzt einrichten →
{/if}
</span>
</a>
<!-- Card 2: Haushalt (inline, needs data-testid on member count) -->
<a
href="/members"
class="flex flex-col gap-3 rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-surface)] p-4 no-underline text-[var(--color-text)] hover:shadow-[var(--shadow-raised)] hover:border-[#C0BFB8] transition-[box-shadow,border-color] duration-150 ease focus-visible:outline focus-visible:outline-2 focus-visible:outline-[var(--green-dark)] focus-visible:outline-offset-2"
>
<span class="font-[var(--font-sans)] text-[14px] font-medium">Haushalt</span>
<p class="font-[var(--font-sans)] text-[13px] text-[var(--color-text-muted)] m-0">
<span data-testid="member-count">{data.memberCount}</span> Mitglieder
</p>
<span class="font-[var(--font-sans)] text-[12px] font-medium text-[var(--green-dark)] mt-auto">
Mitglieder anzeigen →
</span>
</a>
<!-- Card 3: Profil (uses SettingsCard) -->
<SettingsCard
title="Profil"
href="/profile"
cta="Profil bearbeiten →"
meta={data.userName}
/>
</div>