feat(chronik): add six Chronik page components + co-located specs (40 tests)
All under src/lib/components/chronik/: - ChronikRow.svelte — single orchestrator for four variants (comment / for-you / rollup / simple), discriminated via $derived. Outer <a> wraps avatar + body + time; document title is a styled <span> (no nested anchors). Rollup shows count badge + en-dash time range; for-you gets accent left border + @ marker hidden below sm:. - ChronikTimeline.svelte — buckets items by day using bucketByDay() and renders Heute/Gestern/Diese Woche/Älter section headers with <span> trailing rule. - ChronikFuerDichBox.svelte — unread mentions card with inbox-zero variant, per-row Dismiss button (prevents bubbling, calls onMarkRead), aria-live count badge, and a .fade-in class gated by prefers-reduced-motion. - ChronikFilterPills.svelte — role=radiogroup with 5 pills, ArrowLeft/Right keyboard navigation wrapping across the group, single tabstop via dynamic tabindex. - ChronikEmptyState.svelte — three variants (first-run / filter-empty / inbox-zero) sharing a centered-column layout. - ChronikErrorCard.svelte — warning card with retry button, optional custom message override. Verbs map to chronik_singleton_* / chronik_rollup_* per AuditKind so no ICU pluralization is needed. Comment preview is a TODO placeholder (currently the document title) pending a backend preview DTO follow-up. All 40 unit tests green. No type-check or lint errors in these files. Part of #285. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Marcel
151
frontend/src/lib/components/chronik/ChronikFuerDichBox.svelte
Normal file
151
frontend/src/lib/components/chronik/ChronikFuerDichBox.svelte
Normal file
@@ -0,0 +1,151 @@
|
||||
<script lang="ts">
|
||||
import * as m from '$lib/paraglide/messages.js';
|
||||
import { relativeTime } from '$lib/utils/time';
|
||||
import type { NotificationItem } from '$lib/stores/notifications.svelte';
|
||||
|
||||
interface Props {
|
||||
unread: NotificationItem[];
|
||||
onMarkRead: (n: NotificationItem) => void;
|
||||
onMarkAllRead: () => void;
|
||||
}
|
||||
|
||||
const { unread, onMarkRead, onMarkAllRead }: Props = $props();
|
||||
|
||||
function verb(type: NotificationItem['type'], actor: string): string {
|
||||
return type === 'REPLY'
|
||||
? m.notification_type_reply({ actor })
|
||||
: m.notification_type_mention({ actor });
|
||||
}
|
||||
|
||||
function href(n: NotificationItem): string {
|
||||
// Link to the specific comment/reference within the document.
|
||||
return `/documents/${n.documentId}?commentId=${n.referenceId}`;
|
||||
}
|
||||
</script>
|
||||
|
||||
<section class="rounded-sm border border-line bg-surface p-5">
|
||||
{#if unread.length === 0}
|
||||
<div data-testid="chronik-inbox-zero" class="flex flex-col items-center gap-3 py-6 text-center">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-10 w-10 text-accent"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M9 12.75L11.25 15L15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.75c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"
|
||||
/>
|
||||
</svg>
|
||||
<p class="font-sans text-sm font-bold text-ink">
|
||||
{m.chronik_inbox_zero_title()}
|
||||
</p>
|
||||
<a
|
||||
href="/chronik?filter=fuer-dich"
|
||||
class="font-sans text-xs text-ink-3 underline decoration-accent underline-offset-2 transition-colors hover:text-ink"
|
||||
>
|
||||
{m.chronik_inbox_zero_link()}
|
||||
</a>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="mb-3 flex items-center justify-between">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
|
||||
{m.chronik_for_you_caption()}
|
||||
</span>
|
||||
<span
|
||||
data-testid="chronik-fuerdich-count"
|
||||
aria-live="polite"
|
||||
aria-atomic="true"
|
||||
class="inline-block rounded-sm bg-primary px-2 py-0.5 font-sans text-xs text-primary-fg"
|
||||
>
|
||||
{m.chronik_for_you_count({ count: unread.length })}
|
||||
</span>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
data-testid="chronik-mark-all-read"
|
||||
onclick={onMarkAllRead}
|
||||
class="font-sans text-xs font-medium text-ink-3 transition-colors hover:text-ink"
|
||||
>
|
||||
{m.chronik_mark_all_read()}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<ul role="list" class="flex flex-col gap-2">
|
||||
{#each unread as n (n.id)}
|
||||
<li>
|
||||
<a
|
||||
href={href(n)}
|
||||
class="fade-in group flex items-start gap-3 rounded-sm p-2 transition-colors hover:bg-canvas focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:outline-none"
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="mt-0.5 inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-accent-bg font-sans text-xs font-bold text-accent"
|
||||
>
|
||||
{n.type === 'MENTION' ? '@' : '\u21A9'}
|
||||
</span>
|
||||
<div class="min-w-0 flex-1">
|
||||
<p class="font-sans text-sm leading-snug text-ink">
|
||||
{verb(n.type, n.actorName)}
|
||||
</p>
|
||||
<p class="mt-0.5 font-sans text-xs text-ink-3">
|
||||
{relativeTime(n.createdAt)}
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
data-testid="chronik-fuerdich-dismiss"
|
||||
aria-label={m.chronik_mark_read_aria()}
|
||||
onclick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
onMarkRead(n);
|
||||
}}
|
||||
class="mt-0.5 shrink-0 rounded-sm p-1 text-ink-3 transition-colors hover:bg-muted hover:text-ink focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:outline-none"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-4 w-4"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</a>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{/if}
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.fade-in {
|
||||
animation: chronik-fade-in 160ms ease-out;
|
||||
}
|
||||
|
||||
@keyframes chronik-fade-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.fade-in {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user