familienarchiv/frontend/src/lib/activity/ChronikFuerDichBox.svelte

<script lang="ts">
import { enhance } from '$app/forms';
import * as m from '$lib/paraglide/messages.js';
import { relativeTime } from '$lib/shared/utils/time';
import type { NotificationItem } from '$lib/notification/notifications.svelte';
import { buildCommentHref } from '$lib/shared/discussion/commentDeepLink';

interface Props {
	unread: NotificationItem[];
	optimisticMarkRead: (id: string) => void;
	optimisticMarkAllRead: () => void;
}

const { unread, optimisticMarkRead, optimisticMarkAllRead }: Props = $props();

let errorMessage: string | null = $state(null);

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 {
	return buildCommentHref(n.documentId, n.referenceId, n.annotationId);
}
</script>

<section class="rounded-sm border border-line bg-surface p-5">
	{#if errorMessage}
		<p role="alert" class="px-4 py-2 text-sm text-red-600">{errorMessage}</p>
	{/if}
	{#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="/aktivitaeten?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>
			<form
				action="/aktivitaeten?/mark-all-read"
				method="POST"
				use:enhance={() => {
					errorMessage = null;
					optimisticMarkAllRead();
					return async ({ result, update }) => {
						if (result.type === 'failure' || result.type === 'error') {
							errorMessage = m.notification_error_generic();
						}
						await update({ reset: false, invalidateAll: false });
					};
				}}
			>
				<button
					type="submit"
					data-testid="chronik-mark-all-read"
					class="font-sans text-xs font-medium text-ink-3 transition-colors hover:text-ink"
				>
					{m.chronik_mark_all_read()}
				</button>
			</form>
		</div>

		<ul role="list" class="flex flex-col gap-2">
			{#each unread as n (n.id)}
				<li
					class="chronik-fade-in group flex items-start gap-3 rounded-sm p-2 transition-colors hover:bg-canvas"
				>
					<a
						href={href(n)}
						class="flex min-w-0 flex-1 items-start gap-3 rounded-sm 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' ? '@' : '↩'}
						</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>
					</a>
					<form
						action="/aktivitaeten?/dismiss-notification"
						method="POST"
						use:enhance={() => {
							errorMessage = null;
							optimisticMarkRead(n.id);
							return async ({ result, update }) => {
								if (result.type === 'failure' || result.type === 'error') {
									errorMessage = m.notification_error_generic();
								}
								await update({ reset: false, invalidateAll: false });
							};
						}}
					>
						<input type="hidden" name="notificationId" value={n.id} />
						<button
							type="submit"
							data-testid="chronik-fuerdich-dismiss"
							aria-label={m.chronik_mark_read_aria()}
							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>
					</form>
				</li>
			{/each}
		</ul>
	{/if}
</section>