@joewinke/jatui 0.38.6 → 0.40.0

package/dist/components/NotificationCenter.svelte

@@ -0,0 +1,481 @@
+<!--
+  NotificationCenter — inbox panel: header (title, "N unread", Mark all read),
+  category tabs with count chips, and a date-grouped, keyboard-navigable list.
+
+  MIT License — Copyright (c) 2026 Mertcan Dundar Esmergul (BoardUI)
+  Adapted from BoardUI's notification-center.tsx: the header / segmented tabs /
+  card layout, the item data model (category, status, avatar, actions[]),
+  controlled-or-uncontrolled tab, and "an action click marks the item read".
+  jatui additions: configurable `tabs`, Today / Yesterday / This week / Earlier
+  date headers (notificationCenter.ts), listNav roving focus with Enter → onOpen,
+  host callbacks onMarkRead / onMarkAllRead with optimistic local read state,
+  an announced unread marker, and the shared Empty / Avatar components.
+-->
+<script lang="ts">
+	import { untrack } from 'svelte';
+	import { SvelteSet } from 'svelte/reactivity';
+	import { createListNav } from '../actions/listNav';
+	import Empty from './basic/Empty.svelte';
+	import Avatar from './messaging/Avatar.svelte';
+	import { formatDateTime, formatRelativeTime } from '../utils/dateFormatters';
+	import {
+		DEFAULT_NOTIFICATION_TABS,
+		filterByTab,
+		groupNotificationsByDate,
+		isNotificationUnread,
+		tabCounts,
+		toTimestampMs,
+		unreadIds,
+		unreadSummary,
+		type NotificationAction,
+		type NotificationItem,
+		type NotificationStatus,
+		type NotificationTab
+	} from './notificationCenter';
+
+	interface Props {
+		items: NotificationItem[];
+		title?: string;
+		/** Tabs across the top. Default All / Mentions / System (by `category`). Pass [] to hide. */
+		tabs?: NotificationTab[];
+		/** Active tab id (bindable). Leave unbound for uncontrolled use with `defaultTab`. */
+		tab?: string;
+		defaultTab?: string;
+		onTabChange?: (tab: string) => void;
+		/** Enter on a focused item, or a click on it / its title. Also marks it read. */
+		onOpen?: (item: NotificationItem) => void;
+		/** Items became read (opened, or an action was used). */
+		onMarkRead?: (ids: string[]) => void;
+		/** "Mark all read". When omitted, `onMarkRead` receives every unread id instead. */
+		onMarkAllRead?: () => void;
+		/** Group the list under Today / Yesterday / This week / Earlier. Default true. */
+		groupByDate?: boolean;
+		/** Reference "now" for the date groups (tests, demos). Default: live clock. */
+		now?: Date | number;
+		/** Scroll-area cap — CSS length or px number. Default '32rem'. */
+		maxHeight?: string | number;
+		emptyTitle?: string;
+		emptyDescription?: string;
+		class?: string;
+	}
+
+	let {
+		items,
+		title = 'Notifications',
+		tabs = DEFAULT_NOTIFICATION_TABS,
+		tab = $bindable(),
+		defaultTab,
+		onTabChange,
+		onOpen,
+		onMarkRead,
+		onMarkAllRead,
+		groupByDate = true,
+		now,
+		maxHeight = '32rem',
+		emptyTitle = "You're all caught up",
+		emptyDescription = 'New activity will show up here.',
+		class: className = ''
+	}: Props = $props();
+
+	const uid = $props.id();
+
+	// ---- tabs (controlled via bind:tab / tab, or uncontrolled) -------------
+	// svelte-ignore state_referenced_locally
+	let internalTab = $state(defaultTab ?? tabs[0]?.id ?? 'all');
+	const activeTabId = $derived.by(() => {
+		const want = tab ?? internalTab;
+		return tabs.some((t) => t.id === want) ? want : (tabs[0]?.id ?? want);
+	});
+	const activeTab = $derived(tabs.find((t) => t.id === activeTabId));
+	const counts = $derived(tabCounts(items, tabs));
+	const tabEls: HTMLButtonElement[] = $state([]);
+
+	function selectTab(id: string, focus = false) {
+		internalTab = id;
+		tab = id;
+		onTabChange?.(id);
+		if (focus) tabEls[tabs.findIndex((t) => t.id === id)]?.focus();
+	}
+
+	function onTabKeydown(e: KeyboardEvent, i: number) {
+		const n = tabs.length;
+		let next = -1;
+		if (e.key === 'ArrowRight') next = (i + 1) % n;
+		else if (e.key === 'ArrowLeft') next = (i - 1 + n) % n;
+		else if (e.key === 'Home') next = 0;
+		else if (e.key === 'End') next = n - 1;
+		if (next < 0) return;
+		e.preventDefault();
+		selectTab(tabs[next].id, true);
+	}
+
+	// ---- read state (host-owned, optimistic locally) -----------------------
+	const localRead = new SvelteSet<string>();
+	const unread = $derived(unreadIds(items, localRead));
+
+	function markRead(item: NotificationItem) {
+		if (!isNotificationUnread(item, localRead)) return;
+		localRead.add(item.id);
+		onMarkRead?.([item.id]);
+	}
+
+	function markAllRead() {
+		const ids = unread;
+		if (ids.length === 0) return;
+		for (const id of ids) localRead.add(id);
+		if (onMarkAllRead) onMarkAllRead();
+		else onMarkRead?.(ids);
+	}
+
+	// ---- clock: relative times + date buckets refresh once a minute --------
+	let tick = $state(Date.now());
+	$effect(() => {
+		if (now !== undefined) return;
+		const t = setInterval(() => (tick = Date.now()), 60_000);
+		return () => clearInterval(t);
+	});
+	const refNow = $derived(now ?? tick);
+
+	const visible = $derived(filterByTab(items, activeTab));
+	const groups = $derived(
+		groupByDate
+			? groupNotificationsByDate(visible, refNow)
+			: [{ key: 'all', label: '', items: visible }]
+	);
+	const byId = $derived(new Map(items.map((it) => [it.id, it])));
+
+	// ---- list keyboard nav (listNav, scoped to the list) --------------------
+	let listEl: HTMLElement | null = $state(null);
+	let focusedId = $state<string | null>(null);
+	const firstId = $derived(groups[0]?.items[0]?.id ?? null);
+
+	const nav = createListNav({
+		getItems: () =>
+			listEl ? Array.from(listEl.querySelectorAll<HTMLElement>('[data-nav-id]')) : [],
+		onSelect: (el) => {
+			const item = byId.get(el.dataset.navId ?? '');
+			if (!item) return;
+			const link = el.querySelector<HTMLAnchorElement>('a[data-nc-open]');
+			if (link) link.click();
+			else open(item);
+		},
+		onFocusChange: (el, _i, id) => {
+			focusedId = id;
+			// Move DOM focus with the cursor (roving focus) — but never pull it
+			// off a control inside the item (an action button the user tabbed to).
+			const active = document.activeElement;
+			if (el && !el.contains(active) && listEl?.contains(active)) {
+				el.focus({ preventScroll: true });
+			}
+		},
+		wraparound: false,
+		focusedClass: 'nc-focused'
+	});
+
+	function onListKeydown(e: KeyboardEvent) {
+		// Escape belongs to the host (closing a popover, etc.).
+		if (e.key === 'Escape') return;
+		nav.handleKeydown(e);
+	}
+
+	function onItemFocusIn(id: string) {
+		if (nav.focusedId() === id || !listEl) return;
+		const els = Array.from(listEl.querySelectorAll<HTMLElement>('[data-nav-id]'));
+		const idx = els.findIndex((el) => el.dataset.navId === id);
+		if (idx >= 0) nav.focus(idx);
+	}
+
+	$effect(() => {
+		// Re-paint the cursor after the list changes (tab switch, new items).
+		void groups;
+		untrack(() => nav.refresh());
+	});
+
+	function open(item: NotificationItem) {
+		markRead(item);
+		onOpen?.(item);
+	}
+
+	function onCardClick(e: MouseEvent, item: NotificationItem) {
+		const t = e.target as HTMLElement | null;
+		if (t?.closest('button, a, input, select, textarea')) return;
+		const link = (e.currentTarget as HTMLElement).querySelector<HTMLAnchorElement>('a[data-nc-open]');
+		if (link) link.click();
+		else open(item);
+	}
+
+	function runAction(action: NotificationAction, item: NotificationItem) {
+		markRead(item);
+		action.onSelect(item);
+	}
+
+	const actionClass: Record<NonNullable<NotificationAction['variant']>, string> = {
+		primary: 'btn-primary',
+		secondary: 'btn-soft',
+		ghost: 'btn-ghost',
+		danger: 'btn-soft btn-error'
+	};
+
+	const statusTone: Record<NotificationStatus | 'neutral', string> = {
+		info: 'bg-info/15 text-info',
+		success: 'bg-success/15 text-success',
+		warning: 'bg-warning/15 text-warning',
+		error: 'bg-error/15 text-error',
+		neutral: 'bg-base-200 text-base-content/60'
+	};
+	const statusLabel: Record<NotificationStatus, string> = {
+		info: 'Info',
+		success: 'Success',
+		warning: 'Warning',
+		error: 'Error'
+	};
+
+	const cssLen = (v: string | number) => (typeof v === 'number' ? `${v}px` : v);
+	const iso = (ts: NotificationItem['timestamp']) => {
+		const ms = toTimestampMs(ts);
+		return Number.isNaN(ms) ? undefined : new Date(ms).toISOString();
+	};
+	const asDate = (ts: NotificationItem['timestamp']) => {
+		const ms = toTimestampMs(ts);
+		return Number.isNaN(ms) ? null : new Date(ms);
+	};
+	function relTime(ts: NotificationItem['timestamp'], _tick: number) {
+		return formatRelativeTime(asDate(ts));
+	}
+</script>
+
+<section
+	class="nc bg-base-100 border-base-300 rounded-box flex w-full max-w-md flex-col overflow-hidden border {className}"
+	aria-labelledby="{uid}-title"
+>
+	<header class="flex flex-col gap-3 p-4 pb-2">
+		<div class="flex items-start justify-between gap-4">
+			<div class="flex min-w-0 flex-col gap-0.5">
+				<h2 id="{uid}-title" class="text-base-content text-base font-semibold">{title}</h2>
+				<p class="text-base-content/60 text-sm" aria-live="polite">{unreadSummary(unread.length)}</p>
+			</div>
+			<button
+				type="button"
+				class="btn btn-ghost btn-sm"
+				onclick={markAllRead}
+				disabled={unread.length === 0}
+			>
+				Mark all read
+			</button>
+		</div>
+
+		{#if tabs.length > 1}
+			<div
+				role="tablist"
+				aria-label="Notification category"
+				class="bg-base-200 rounded-field flex w-full gap-1 p-1"
+			>
+				{#each tabs as t, i (t.id)}
+					{@const selected = t.id === activeTabId}
+					<button
+						bind:this={tabEls[i]}
+						type="button"
+						role="tab"
+						id="{uid}-tab-{t.id}"
+						aria-selected={selected}
+						aria-controls="{uid}-panel"
+						tabindex={selected ? 0 : -1}
+						class="nc-tab rounded-field flex flex-1 items-center justify-center gap-1.5 px-2 py-1 text-sm font-medium"
+						class:nc-tab-active={selected}
+						onclick={() => selectTab(t.id)}
+						onkeydown={(e) => onTabKeydown(e, i)}
+					>
+						{t.label}
+						<span
+							class="bg-base-content/10 text-base-content/70 rounded-selector min-w-5 px-1 text-xs tabular-nums"
+							>{counts[t.id] ?? 0}</span
+						>
+					</button>
+				{/each}
+			</div>
+		{/if}
+	</header>
+
+	<div class="bg-base-100 p-1.5 pt-0">
+		<div
+			id="{uid}-panel"
+			role={tabs.length > 1 ? 'tabpanel' : undefined}
+			aria-labelledby={tabs.length > 1 ? `${uid}-tab-${activeTabId}` : `${uid}-title`}
+			class="bg-base-200 rounded-box overflow-y-auto overscroll-contain p-2"
+			style:max-height={cssLen(maxHeight)}
+		>
+			{#if visible.length === 0}
+				<Empty title={emptyTitle} description={emptyDescription} glyph="check" size="sm" />
+			{:else}
+				<!-- svelte-ignore a11y_no_static_element_interactions -->
+				<div bind:this={listEl} class="flex flex-col gap-3" onkeydown={onListKeydown}>
+					{#each groups as group (group.key)}
+						<div class="flex flex-col gap-1.5">
+							{#if group.label}
+								<h3
+									id="{uid}-g-{group.key}"
+									class="text-base-content/50 px-1 text-xs font-semibold tracking-wide uppercase"
+								>
+									{group.label}
+								</h3>
+							{/if}
+							<ul
+								class="flex flex-col gap-1.5"
+								aria-labelledby={group.label ? `${uid}-g-${group.key}` : `${uid}-title`}
+							>
+								{#each group.items as item (item.id)}
+									{@const isUnread = isNotificationUnread(item, localRead)}
+									{@const status = item.status ?? 'neutral'}
+									{@const date = asDate(item.timestamp)}
+									<li>
+										<!-- svelte-ignore a11y_no_noninteractive_tabindex, a11y_click_events_have_key_events, a11y_no_noninteractive_element_interactions -->
+										<article
+											data-nav-id={item.id}
+											tabindex={(focusedId ?? firstId) === item.id ? 0 : -1}
+											aria-labelledby="{uid}-i-{item.id}"
+											aria-describedby={item.description ? `${uid}-d-${item.id}` : undefined}
+											class="nc-item bg-base-100 rounded-box relative flex cursor-pointer gap-3 p-3"
+											class:nc-unread={isUnread}
+											onfocusin={() => onItemFocusIn(item.id)}
+											onclick={(e) => onCardClick(e, item)}
+										>
+											{#if item.avatar}
+												<Avatar
+													name={item.avatar.name}
+													avatarUrl={item.avatar.src ?? null}
+													size="medium"
+												/>
+											{:else}
+												<span
+													class="flex size-10 shrink-0 items-center justify-center rounded-full {statusTone[status]}"
+												>
+													<svg
+														class="size-5"
+														viewBox="0 0 24 24"
+														fill="none"
+														stroke="currentColor"
+														stroke-width="1.8"
+														stroke-linecap="round"
+														stroke-linejoin="round"
+														aria-hidden="true"
+													>
+														{#if status === 'success'}
+															<circle cx="12" cy="12" r="9" /><path d="m8.5 12.5 2.5 2.5 4.5-5" />
+														{:else if status === 'error'}
+															<circle cx="12" cy="12" r="9" /><path d="M12 7.5v5.5M12 16.5h.01" />
+														{:else if status === 'warning'}
+															<path d="M10.3 4.1 2.6 17.5A2 2 0 0 0 4.3 20.5h15.4a2 2 0 0 0 1.7-3L13.7 4.1a2 2 0 0 0-3.4 0Z" /><path d="M12 9.5v4M12 17h.01" />
+														{:else if status === 'info'}
+															<circle cx="12" cy="12" r="9" /><path d="M12 11v5.5M12 7.5h.01" />
+														{:else}
+															<path d="M6 8a6 6 0 1 1 12 0c0 7 3 9 3 9H3s3-2 3-9" /><path d="M10.3 21a1.9 1.9 0 0 0 3.4 0" />
+														{/if}
+													</svg>
+													{#if item.status}<span class="sr-only">{statusLabel[item.status]}:</span>{/if}
+												</span>
+											{/if}
+
+											<div class="flex min-w-0 flex-1 flex-col gap-0.5">
+												<div class="flex min-w-0 items-start justify-between gap-3">
+													{#if item.href}
+														<a
+															id="{uid}-i-{item.id}"
+															data-nc-open
+															href={item.href}
+															tabindex="-1"
+															class="text-base-content min-w-0 text-sm font-medium hover:underline"
+															class:font-semibold={isUnread}
+															onclick={() => open(item)}>{item.title}</a
+														>
+													{:else}
+														<p
+															id="{uid}-i-{item.id}"
+															class="text-base-content min-w-0 text-sm font-medium"
+															class:font-semibold={isUnread}
+														>
+															{item.title}
+														</p>
+													{/if}
+													<span class="flex shrink-0 items-center gap-2">
+														<time
+															class="text-base-content/50 text-xs whitespace-nowrap tabular-nums"
+															datetime={iso(item.timestamp)}
+															title={date ? formatDateTime(date) : undefined}
+															>{relTime(item.timestamp, tick)}</time
+														>
+														{#if isUnread}
+															<span class="bg-primary size-2 rounded-full" aria-hidden="true"></span>
+															<span class="sr-only">Unread</span>
+														{/if}
+													</span>
+												</div>
+												{#if item.description}
+													<p id="{uid}-d-{item.id}" class="text-base-content/70 text-sm">
+														{item.description}
+													</p>
+												{/if}
+												{#if item.actions?.length}
+													<div class="mt-1.5 flex flex-wrap items-center gap-2">
+														{#each item.actions as action, ai (ai)}
+															<button
+																type="button"
+																class="btn btn-xs {actionClass[action.variant ?? 'secondary']}"
+																onclick={() => runAction(action, item)}
+															>
+																{action.label}
+															</button>
+														{/each}
+													</div>
+												{/if}
+											</div>
+										</article>
+									</li>
+								{/each}
+							</ul>
+						</div>
+					{/each}
+				</div>
+			{/if}
+		</div>
+	</div>
+</section>
+
+<style>
+	.nc-tab {
+		color: color-mix(in oklab, var(--color-base-content) 65%, transparent);
+		transition:
+			background-color var(--motion-fast, 150ms) var(--motion-glide, ease-out),
+			color var(--motion-fast, 150ms) var(--motion-glide, ease-out);
+	}
+	.nc-tab:hover {
+		color: var(--color-base-content);
+	}
+	.nc-tab-active {
+		background: var(--color-base-100);
+		color: var(--color-base-content);
+	}
+	.nc-tab:focus-visible {
+		outline: 2px solid var(--color-primary);
+		outline-offset: 1px;
+	}
+	.nc-item {
+		border-radius: var(--jatui-radius-box);
+		transition: background-color var(--motion-fast, 150ms) var(--motion-glide, ease-out);
+	}
+	.nc-item:hover {
+		background: color-mix(in oklab, var(--color-base-100) 92%, var(--color-base-content));
+	}
+	.nc-item.nc-unread {
+		background: color-mix(in oklab, var(--color-base-100) 94%, var(--color-primary));
+	}
+	.nc-item:focus-visible {
+		outline: 2px solid var(--color-primary);
+		outline-offset: -2px;
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.nc-tab,
+		.nc-item {
+			transition: none;
+		}
+	}
+</style>

package/dist/components/NotificationCenter.svelte.d.ts

@@ -0,0 +1,29 @@
+import { type NotificationItem, type NotificationTab } from './notificationCenter';
+interface Props {
+    items: NotificationItem[];
+    title?: string;
+    /** Tabs across the top. Default All / Mentions / System (by `category`). Pass [] to hide. */
+    tabs?: NotificationTab[];
+    /** Active tab id (bindable). Leave unbound for uncontrolled use with `defaultTab`. */
+    tab?: string;
+    defaultTab?: string;
+    onTabChange?: (tab: string) => void;
+    /** Enter on a focused item, or a click on it / its title. Also marks it read. */
+    onOpen?: (item: NotificationItem) => void;
+    /** Items became read (opened, or an action was used). */
+    onMarkRead?: (ids: string[]) => void;
+    /** "Mark all read". When omitted, `onMarkRead` receives every unread id instead. */
+    onMarkAllRead?: () => void;
+    /** Group the list under Today / Yesterday / This week / Earlier. Default true. */
+    groupByDate?: boolean;
+    /** Reference "now" for the date groups (tests, demos). Default: live clock. */
+    now?: Date | number;
+    /** Scroll-area cap — CSS length or px number. Default '32rem'. */
+    maxHeight?: string | number;
+    emptyTitle?: string;
+    emptyDescription?: string;
+    class?: string;
+}
+declare const NotificationCenter: import("svelte").Component<Props, {}, "tab">;
+type NotificationCenter = ReturnType<typeof NotificationCenter>;
+export default NotificationCenter;