feat(dashboard): complete frontend redesign for Issue #271
Some checks failed
CI / OCR Service Tests (push) Successful in 29s
CI / Backend Unit Tests (push) Failing after 1m21s
CI / Unit & Component Tests (push) Failing after 2m37s
CI / Unit & Component Tests (pull_request) Failing after 2m27s
CI / OCR Service Tests (pull_request) Successful in 30s
CI / Backend Unit Tests (pull_request) Failing after 1m21s
Some checks failed
CI / OCR Service Tests (push) Successful in 29s
CI / Backend Unit Tests (push) Failing after 1m21s
CI / Unit & Component Tests (push) Failing after 2m37s
CI / Unit & Component Tests (pull_request) Failing after 2m27s
CI / OCR Service Tests (pull_request) Successful in 30s
CI / Backend Unit Tests (pull_request) Failing after 1m21s
- +layout.svelte: Upload button in header (authenticated users only) - +page.server.ts: call /api/dashboard/resume, /pulse, /activity; remove deprecated /api/documents/incomplete and /recent-activity - +page.svelte: 2-col grid layout (main + 320px sidebar), greeting, DashboardFamilyPulse + DashboardActivityFeed in sidebar - DashboardResumeStrip: refactored to use server data (resumeDoc prop), SVG thumbnail, progress bar with aria-*, empty state, CTA - DashboardFamilyPulse: new component — weekly stats from audit_log - DashboardActivityFeed: new component — activity feed with "für dich" badge - Update specs for new data shapes Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
81
frontend/src/lib/components/DashboardActivityFeed.svelte
Normal file
81
frontend/src/lib/components/DashboardActivityFeed.svelte
Normal file
@@ -0,0 +1,81 @@
|
||||
<script lang="ts">
|
||||
import * as m from '$lib/paraglide/messages.js';
|
||||
import type { ActivityFeedItemDTO } from '$lib/generated/api';
|
||||
|
||||
interface Props {
|
||||
feed: ActivityFeedItemDTO[];
|
||||
}
|
||||
|
||||
const { feed }: Props = $props();
|
||||
|
||||
const verbMap: Record<string, string> = {
|
||||
TEXT_SAVED: m.audit_action_text_saved(),
|
||||
FILE_UPLOADED: m.audit_action_file_uploaded(),
|
||||
ANNOTATION_CREATED: m.audit_action_annotation_created(),
|
||||
COMMENT_ADDED: m.audit_action_comment_added(),
|
||||
MENTION_CREATED: m.audit_action_mention_created()
|
||||
};
|
||||
|
||||
function verb(kind: string): string {
|
||||
return verbMap[kind] ?? kind;
|
||||
}
|
||||
|
||||
function formatDate(iso: string): string {
|
||||
return new Intl.DateTimeFormat('de-DE', {
|
||||
day: 'numeric',
|
||||
month: 'short',
|
||||
year: 'numeric'
|
||||
}).format(new Date(iso));
|
||||
}
|
||||
</script>
|
||||
|
||||
<section class="rounded-sm border border-line bg-surface p-5">
|
||||
<div class="mb-3 flex items-center justify-between">
|
||||
<h2 class="font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
|
||||
{m.feed_caption()}
|
||||
</h2>
|
||||
<a href="/documents" class="font-sans text-xs text-ink-3 transition-colors hover:text-ink"
|
||||
>Alle →</a
|
||||
>
|
||||
</div>
|
||||
|
||||
{#if feed.length > 0}
|
||||
<ul class="flex flex-col gap-3">
|
||||
{#each feed as item (item.happenedAt + item.documentId + item.kind)}
|
||||
<li class="flex items-start gap-3">
|
||||
{#if item.actor}
|
||||
<span
|
||||
class="mt-0.5 inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-full font-sans text-sm font-bold text-white"
|
||||
style="background:{item.actor.color}">{item.actor.initials}</span
|
||||
>
|
||||
{:else}
|
||||
<span
|
||||
class="mt-0.5 inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-line font-sans text-sm text-ink-3"
|
||||
>?</span
|
||||
>
|
||||
{/if}
|
||||
|
||||
<div class="min-w-0 flex-1">
|
||||
<p class="font-sans text-sm leading-snug text-ink">
|
||||
{#if item.actor}
|
||||
<strong>{item.actor.name ?? item.actor.initials}</strong>
|
||||
{/if}
|
||||
{verb(item.kind)}
|
||||
<a href="/documents/{item.documentId}" class="underline hover:text-accent">
|
||||
{item.documentTitle}
|
||||
</a>
|
||||
{#if item.youMentioned}
|
||||
<span
|
||||
class="ml-1.5 inline-block rounded-full border border-accent px-2 py-px font-sans text-[10px] font-bold text-accent"
|
||||
>
|
||||
{m.feed_for_you()}
|
||||
</span>
|
||||
{/if}
|
||||
</p>
|
||||
<p class="mt-0.5 font-sans text-xs text-ink-3">{formatDate(item.happenedAt)}</p>
|
||||
</div>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{/if}
|
||||
</section>
|
||||
Reference in New Issue
Block a user