feat(#145): add DashboardMentions widget component

Shows unread mention notifications as a dashboard widget. Renders
nothing when the mentions list is empty.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-03-29 00:38:45 +01:00
parent 49f71e32ff
commit 2ce95f2542
2 changed files with 96 additions and 0 deletions

View File

@@ -0,0 +1,38 @@
<script lang="ts">
type NotificationDTO = {
id: string;
type: 'REPLY' | 'MENTION';
documentId?: string;
read: boolean;
createdAt: string;
actorName?: string;
};
interface Props {
mentions: NotificationDTO[];
}
let { mentions }: Props = $props();
</script>
{#if mentions.length > 0}
<div data-testid="dashboard-mentions" class="border-brand-sand rounded-sm border bg-white p-6">
<h2 class="mb-4 font-sans text-xs font-bold tracking-widest text-gray-400 uppercase">
Erwähnungen
</h2>
{#each mentions as mention (mention.id)}
<div class="border-brand-sand flex items-center gap-3 border-b py-2 last:border-0">
{#if mention.documentId}
<a
href="/documents/{mention.documentId}"
class="font-serif text-sm text-ink hover:text-brand-navy"
>
{mention.actorName ?? ''}
</a>
{:else}
<span class="font-serif text-sm text-ink">{mention.actorName ?? ''}</span>
{/if}
</div>
{/each}
</div>
{/if}