marcel/familienarchiv
1
0
Fork 0
Code Issues 106 Pull Requests 3 Actions 1 Packages Projects Releases Wiki Activity

refactor(dashboard): ReaderDraftsModule mint left-border, card-head, row structure (TDD, #483)

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-05-08 17:10:20 +02:00
parent e598f5a506
commit 60326cfb0a
2 changed files with 79 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
frontend/src/lib/shared/dashboard/ReaderDraftsModule.svelte
View File

@@ -12,24 +12,47 @@ interface Props {
const { drafts }: Props = $props();
</script>
<div class="rounded-sm border border-line bg-surface p-6 shadow-sm">
<h2 class="mb-5 text-xs font-bold tracking-widest text-ink-3 uppercase">
{m.dashboard_reader_drafts_heading()}
</h2>
<div
class="flex flex-col overflow-hidden rounded-sm border border-l-[3px] border-line border-l-brand-mint bg-surface"
>
<!-- Card-head -->
<div class="flex items-center border-b border-line px-3 py-1.5">
<h3 class="text-[11px] font-bold tracking-[.12em] text-ink-3 uppercase">
{m.dashboard_reader_drafts_heading()}
</h3>
</div>
{#if drafts.length === 0}
<p class="font-sans text-sm text-ink-3">{m.dashboard_reader_drafts_empty()}</p>
<p class="px-3 py-3 font-sans text-sm text-ink-3">{m.dashboard_reader_drafts_empty()}</p>
{:else}
<ul class="flex flex-col gap-2">
<ul class="flex flex-col">
{#each drafts as draft (draft.id)}
<li>
<a
href="/geschichten/{draft.id}/edit"
class="flex min-h-[44px] items-center justify-between gap-4 rounded-sm py-2 transition-colors hover:text-brand-mint focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:outline-none"
class="flex min-h-[44px] items-center justify-between border-b border-line/50 px-3 py-1.5 last:border-b-0 hover:bg-muted focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:outline-none"
>
<span class="text-ink-1 truncate font-serif text-sm">{draft.title}</span>
<span class="shrink-0 font-sans text-xs text-ink-3">
{relativeTimeDe(new Date(draft.updatedAt))}
<span class="flex min-w-0 flex-col">
<span class="truncate font-serif text-sm text-brand-navy">{draft.title}</span>
<span class="text-[11px] text-ink-3">
{m.dashboard_reader_draft_meta({ relative: relativeTimeDe(new Date(draft.updatedAt)) })}
</span>
</span>
<svg
width="7"
height="7"
viewBox="0 0 7 7"
fill="none"
aria-hidden="true"
class="shrink-0 text-ink-3"
>
<path
d="M1.5 1 L5.5 3.5 L1.5 6"
stroke="currentColor"
stroke-width="1.5"
fill="none"
/>
</svg>
</a>
</li>
{/each}