From aad2e017ea737c594167c6f39f8563013eb36094 Mon Sep 17 00:00:00 2001
From: dawn <dawn@tangled.org>
Date: Sun, 6 Sep 2026 23:48:57 +0900
Subject: [PATCH] web/notifications: fix the stale unread badge by sharing read
 state

Signed-off-by: dawn <dawn@tangled.org>
---
 .../notifications/NotificationBell.svelte     |  99 +++--------
 .../timeline/NotificationsPreview.svelte      |  18 +-
 web/src/lib/notifications.svelte.ts           | 154 +++++++++++++++---
 web/src/lib/notifications.test.ts             |  53 ++++++
 web/src/routes/notifications/+page.svelte     |  92 +++--------
 5 files changed, 231 insertions(+), 185 deletions(-)
 create mode 100644 web/src/lib/notifications.test.ts

diff --git a/web/src/lib/components/notifications/NotificationBell.svelte b/web/src/lib/components/notifications/NotificationBell.svelte
index da70b37c5..eeec28a10 100644
--- a/web/src/lib/components/notifications/NotificationBell.svelte
+++ b/web/src/lib/components/notifications/NotificationBell.svelte
@@ -1,21 +1,16 @@
 <script lang="ts">
-	import { page } from "$app/state";
+	import { untrack } from "svelte";
 	import { resolve } from "$app/paths";
 	import ArrowRight from "$icon/arrow-right";
 	import Bell from "$icon/bell";
 	import Button from "$lib/components/ui/Button.svelte";
 	import Dropdown from "$lib/components/ui/Dropdown.svelte";
-	import { createBobbinClient } from "$lib/api/client";
-	import { createDeliberiClient } from "$lib/api/deliberi";
-	import {
-		getUnreadCount,
-		hydrateNotifications,
-		listNotifications,
-		markAllNotificationsRead,
-		updateNotificationSeen
-	} from "$lib/api/notifications";
-	import { getAuth } from "$lib/auth.svelte";
 	import { createLoad } from "$lib/action.svelte";
+	import {
+		createFixtureNotifications,
+		getNotifications,
+		type Notifications
+	} from "$lib/notifications.svelte";
 	import { notificationCategory } from "$lib/components/notifications/notification";
 	import NotificationList from "$lib/components/notifications/NotificationList.svelte";
 	import NotificationToolbar from "$lib/components/notifications/NotificationToolbar.svelte";
@@ -32,80 +27,34 @@
 
 	let { notifications: fixtures }: Props = $props();
 
-	const auth = getAuth();
+	const shared: Notifications = untrack(() =>
+		fixtures
+			? createFixtureNotifications(fixtures)
+			: (getNotifications() ?? createFixtureNotifications([]))
+	);
 
 	const PREVIEW_LIMIT = 5;
 
 	let readFilter = $state<ReadFilter>("unread");
 	let categoryFilter = $state<CategoryFilter>("all");
 
-	let overrides = $state<Record<string, boolean>>({});
-
-	const previewLoad = createLoad(async () => {
-		if (fixtures) {
-			const unread = fixtures.filter((n) => !n.read).length;
-			return { summaries: fixtures, totalUnread: unread };
-		}
-		const agent = auth.agent;
-		const config = page.data.publicConfig;
-		if (!agent || !config?.deliberiUrl || !config?.bobbinUrl) throw new Error("Not ready");
+	const previewLoad = createLoad(() => shared.list({ read: readFilter, limit: PREVIEW_LIMIT }));
 
-		const deliberi = createDeliberiClient({ deliberiUrl: config.deliberiUrl, agent });
-		const bobbin = createBobbinClient({ serviceUrl: config.bobbinUrl });
+	const loaded = $derived(previewLoad.data ?? []);
+	const all = $derived(shared.overlay(loaded));
+	const badge = $derived(shared.unread > 99 ? "99+" : String(shared.unread));
 
-		const [countResult, listResult] = await Promise.all([
-			getUnreadCount(deliberi),
-			listNotifications(deliberi, { read: readFilter, limit: PREVIEW_LIMIT }).then((r) =>
-				hydrateNotifications(bobbin, r.notifications)
-			)
-		]);
-		return { summaries: listResult, totalUnread: countResult.count };
-	});
-
-	const notifications = $derived(previewLoad.data?.summaries ?? []);
-	const totalUnread = $derived(previewLoad.data?.totalUnread ?? 0);
-
-	const all = $derived(
-		notifications.map((n) => (n.uri in overrides ? { ...n, read: overrides[n.uri] } : n))
-	);
+	const unreadOnLoad = $derived(new Set(loaded.filter((n) => !n.read).map((n) => n.uri)));
 
-	const unreadCount = $derived(totalUnread);
-	const badge = $derived(unreadCount > 99 ? "99+" : String(unreadCount));
-
-	const unreadOnLoad = $derived(new Set(notifications.filter((n) => !n.read).map((n) => n.uri)));
-
-	const filtered = $derived(
+	const preview = $derived(
 		all
 			.filter((n) => readFilter !== "unread" || unreadOnLoad.has(n.uri))
 			.filter(
 				(n) => categoryFilter === "all" || notificationCategory(n.type) === categoryFilter
 			)
+			.slice(0, PREVIEW_LIMIT)
 	);
 
-	const preview = $derived(filtered.slice(0, PREVIEW_LIMIT));
-
-	const toggleRead = async (uri: string, read: boolean) => {
-		overrides = { ...overrides, [uri]: read };
-		if (fixtures) return;
-		const agent = auth.agent;
-		const config = page.data.publicConfig;
-		if (!agent || !config?.deliberiUrl) return;
-		const deliberi = createDeliberiClient({ deliberiUrl: config.deliberiUrl, agent });
-		await updateNotificationSeen(deliberi, { uri, read }).catch(() => {});
-	};
-
-	const markAllRead = async () => {
-		const next: Record<string, boolean> = {};
-		for (const n of filtered) next[n.uri] = true;
-		overrides = { ...overrides, ...next };
-		if (fixtures) return;
-		const agent = auth.agent;
-		const config = page.data.publicConfig;
-		if (!agent || !config?.deliberiUrl) return;
-		const deliberi = createDeliberiClient({ deliberiUrl: config.deliberiUrl, agent });
-		await markAllNotificationsRead(deliberi).catch(() => {});
-	};
-
 	const dismiss = (event: MouseEvent & { currentTarget: HTMLAnchorElement }) => {
 		const popover = event.currentTarget.closest("[popover]");
 		if (popover instanceof HTMLElement) popover.hidePopover();
@@ -121,7 +70,7 @@
 </script>
 
 {#snippet count()}
-	{#if unreadCount > 0}
+	{#if shared.unread > 0}
 		<span
 			class="pointer-events-none absolute top-0.5 right-0.5 flex h-4 min-w-4 items-center justify-center rounded-full bg-background-info-emphasis px-1 typography-paragraph-mini text-foreground-on-emphasis"
 			aria-hidden="true"
@@ -137,7 +86,7 @@
 		size="small"
 		href={resolve("/notifications")}
 		icon={Bell}
-		aria-label="Notifications, {unreadCount} unread"
+		aria-label="Notifications, {shared.unread} unread"
 	/>
 	{@render count()}
 </div>
@@ -150,7 +99,7 @@
 		buttonVariant="ghost"
 		size="small"
 		align="right"
-		label="Notifications, {unreadCount} unread"
+		label="Notifications, {shared.unread} unread"
 		menuClass="w-[36rem]"
 	>
 		{#snippet trigger()}
@@ -161,11 +110,11 @@
 			<NotificationToolbar
 				{readFilter}
 				{categoryFilter}
-				hasNotifications={filtered.length > 0}
+				hasNotifications={preview.length > 0}
 				preferences={false}
 				onReadFilter={(filter) => (readFilter = filter)}
 				onCategoryFilter={(filter) => (categoryFilter = filter)}
-				onMarkAllRead={markAllRead}
+				onMarkAllRead={shared.markAllRead}
 			/>
 		</div>
 
@@ -175,7 +124,7 @@
 			{readFilter}
 			border={false}
 			grouped={false}
-			onToggleRead={toggleRead}
+			onToggleRead={shared.setRead}
 		/>
 
 		<a
diff --git a/web/src/lib/components/timeline/NotificationsPreview.svelte b/web/src/lib/components/timeline/NotificationsPreview.svelte
index 37def097f..69ca3f744 100644
--- a/web/src/lib/components/timeline/NotificationsPreview.svelte
+++ b/web/src/lib/components/timeline/NotificationsPreview.svelte
@@ -8,11 +8,7 @@
 	import { createLoad } from "$lib/action.svelte";
 	import NotificationList from "$lib/components/notifications/NotificationList.svelte";
 	import type { NotificationSummary } from "$lib/components/notifications/types";
-	import {
-		getNotifications,
-		type Notifications,
-		type NotificationsPreview as PreviewData
-	} from "$lib/notifications.svelte";
+	import { getNotifications, type Notifications } from "$lib/notifications.svelte";
 	import PreviewCard from "$lib/components/timeline/PreviewCard.svelte";
 	import PreviewEmpty from "$lib/components/timeline/PreviewEmpty.svelte";
 	import timelineNotificationspreviewSkeletonFixture from "$lib/bones/timeline-notificationspreview--skeleton-fixture.bones.json";
@@ -34,16 +30,12 @@
 	const fixturePreview = $derived.by(() => {
 		if (!fixtures) return undefined;
 		if (fixtures instanceof Promise) return fixtures;
-		return {
-			notifications: fixtures,
-			totalUnread: fixtures.filter((n) => !n.read).length
-		};
+		return { notifications: fixtures, totalUnread: fixtures.filter((n) => !n.read).length };
 	});
 
-	// Use createLoad to reactively fetch preview in browser
-	const previewLoad = createLoad(async (): Promise<PreviewData | null> => {
+	const previewLoad = createLoad(async (): Promise<NotificationSummary[] | null> => {
 		if (!browser || !signedIn || !context) return null;
-		return await context.preview(PREVIEW_LIMIT);
+		return context.overlay(await context.list({ limit: PREVIEW_LIMIT }));
 	});
 
 	const loading = $derived(
@@ -95,7 +87,7 @@
 			{@render content(fixturePreview.notifications, fixturePreview.totalUnread)}
 		{/if}
 	{:else if previewLoad.data}
-		{@render content(previewLoad.data.notifications, previewLoad.data.totalUnread)}
+		{@render content(previewLoad.data, context?.unread ?? null)}
 	{:else}
 		<PreviewEmpty icon={Bell}>
 			<a href={resolve(path as "/")}>Open your inbox</a>
diff --git a/web/src/lib/notifications.svelte.ts b/web/src/lib/notifications.svelte.ts
index 8ce3e0724..027e5b6ed 100644
--- a/web/src/lib/notifications.svelte.ts
+++ b/web/src/lib/notifications.svelte.ts
@@ -1,61 +1,163 @@
 import { getContext } from "svelte";
+import { SvelteMap } from "svelte/reactivity";
 import { createBobbinClient } from "$lib/api/client";
-import { createDeliberiClient } from "$lib/api/deliberi";
+import { createDeliberiClient, type DeliberiContext } from "$lib/api/deliberi";
 import {
 	getUnreadCount,
 	hydrateNotifications,
 	listNotifications,
+	markAllNotificationsRead,
 	markEntityNotificationsRead,
-	type NotificationItem
+	updateNotificationSeen
 } from "$lib/api/notifications";
-import type { NotificationSummary } from "$lib/components/notifications/types";
+import type {
+	CategoryFilter,
+	NotificationSummary,
+	ReadFilter
+} from "$lib/components/notifications/types";
 import type { Auth } from "$lib/auth.svelte";
 
 export const NOTIFICATIONS_KEY = Symbol("notifications");
 
-export interface NotificationsPreview {
-	notifications: NotificationSummary[];
-	totalUnread: number;
+export interface NotificationQuery {
+	read?: ReadFilter;
+	category?: CategoryFilter;
+	limit?: number;
 }
 
 export interface Notifications {
+	readonly unread: number;
+	overlay(rows: NotificationSummary[]): NotificationSummary[];
+	/** rows as the server returned them, empty when signed out or deliberi is unconfigured */
+	list(query?: NotificationQuery): Promise<NotificationSummary[]>;
+	setRead(uri: string, read: boolean): Promise<void>;
+	markAllRead(): Promise<void>;
 	markEntityVisited(entityUri: string): Promise<void>;
-	/** latest rows plus the account-wide unread count, null when signed out
-	 * or deliberi is unconfigured */
-	preview(limit: number): Promise<NotificationsPreview | null>;
 }
 
+const unreadOf = (rows: NotificationSummary[]) => rows.filter((row) => !row.read).length;
+
+// the account-wide count and the per-row read state move together here, so no
+// caller can advance one without the other
+const createReadState = (initial: number) => {
+	let unread = $state(initial);
+	const reads = new SvelteMap<string, boolean>();
+
+	return {
+		get unread() {
+			return unread;
+		},
+		overlay: (rows: NotificationSummary[]): NotificationSummary[] =>
+			rows.map((row) => {
+				const read = reads.get(row.uri) ?? row.read;
+				return read === row.read ? row : { ...row, read };
+			}),
+		seed: (rows: NotificationSummary[], total: number) => {
+			unread = total;
+			for (const row of rows) reads.set(row.uri, row.read);
+		},
+		mark: (uri: string, read: boolean): boolean => {
+			if (reads.get(uri) === read) return false;
+			reads.set(uri, read);
+			unread = Math.max(0, unread + (read ? -1 : 1));
+			return true;
+		},
+		markAll: () => {
+			for (const uri of reads.keys()) reads.set(uri, true);
+			unread = 0;
+		},
+		resync: async (deliberi: DeliberiContext) => {
+			unread = await getUnreadCount(deliberi)
+				.then((r) => r.count)
+				.catch(() => unread);
+		}
+	};
+};
+
 export const createNotifications = (
 	auth: Auth,
 	deliberiUrl: string | undefined,
 	bobbinUrl: string
 ): Notifications => {
-	const markEntityVisited = async (entityUri: string): Promise<void> => {
-		// yield first so the call lands outside the $effect that invoked it
-		await Promise.resolve();
-		const agent = auth.agent;
-		if (!agent || !deliberiUrl) return;
-		const deliberi = createDeliberiClient({ deliberiUrl, agent });
-		await markEntityNotificationsRead(deliberi, entityUri).catch(() => {});
-	};
+	const state = createReadState(0);
 
-	const preview = async (limit: number): Promise<NotificationsPreview | null> => {
+	const client = async (): Promise<DeliberiContext | null> => {
 		const did = auth.currentDid;
 		if (!did || !deliberiUrl) return null;
 		const agent =
 			auth.agent ?? (await auth.agentFor(did, { relogin: false }).catch(() => null));
-		if (!agent) return null;
-		const deliberi = createDeliberiClient({ deliberiUrl, agent });
-		const hydrate = (items: NotificationItem[]): Promise<NotificationSummary[]> =>
-			hydrateNotifications(createBobbinClient({ serviceUrl: bobbinUrl }), items);
-		const [countResult, listResult] = await Promise.all([
+		return agent ? createDeliberiClient({ deliberiUrl, agent }) : null;
+	};
+
+	const list = async (query: NotificationQuery = {}): Promise<NotificationSummary[]> => {
+		const deliberi = await client();
+		if (!deliberi) return [];
+		const [count, page] = await Promise.all([
 			getUnreadCount(deliberi),
-			listNotifications(deliberi, { limit }).then((r) => hydrate(r.notifications))
+			listNotifications(deliberi, {
+				read: query.read,
+				category: query.category === "all" ? undefined : query.category,
+				limit: query.limit
+			})
 		]);
-		return { notifications: listResult, totalUnread: countResult.count };
+		const rows = await hydrateNotifications(
+			createBobbinClient({ serviceUrl: bobbinUrl }),
+			page.notifications
+		);
+		state.seed(rows, count.count);
+		return rows;
+	};
+
+	const setRead = async (uri: string, read: boolean): Promise<void> => {
+		if (!state.mark(uri, read)) return;
+		const deliberi = await client();
+		if (!deliberi) return;
+		await updateNotificationSeen(deliberi, { uri, read }).catch(() => state.resync(deliberi));
 	};
 
-	return { markEntityVisited, preview };
+	const markAllRead = async (): Promise<void> => {
+		state.markAll();
+		const deliberi = await client();
+		if (!deliberi) return;
+		await markAllNotificationsRead(deliberi).catch(() => state.resync(deliberi));
+	};
+
+	const markEntityVisited = async (entityUri: string): Promise<void> => {
+		// yield first so the call lands outside the $effect that invoked it
+		await Promise.resolve();
+		const deliberi = await client();
+		if (!deliberi) return;
+		await markEntityNotificationsRead(deliberi, entityUri).catch(() => {});
+		await state.resync(deliberi);
+	};
+
+	return {
+		get unread() {
+			return state.unread;
+		},
+		overlay: state.overlay,
+		list,
+		setRead,
+		markAllRead,
+		markEntityVisited
+	};
+};
+
+/** storybook and tests: same surface, no network */
+export const createFixtureNotifications = (rows: NotificationSummary[]): Notifications => {
+	const state = createReadState(unreadOf(rows));
+	state.seed(rows, unreadOf(rows));
+
+	return {
+		get unread() {
+			return state.unread;
+		},
+		overlay: state.overlay,
+		list: async () => rows,
+		setRead: async (uri, read) => void state.mark(uri, read),
+		markAllRead: async () => state.markAll(),
+		markEntityVisited: async () => {}
+	};
 };
 
 export const getNotifications = () => getContext<Notifications>(NOTIFICATIONS_KEY);
diff --git a/web/src/lib/notifications.test.ts b/web/src/lib/notifications.test.ts
new file mode 100644
index 000000000..0bb884599
--- /dev/null
+++ b/web/src/lib/notifications.test.ts
@@ -0,0 +1,53 @@
+import { describe, expect, it } from "vitest";
+import { createFixtureNotifications } from "$lib/notifications.svelte";
+import { notifications } from "$lib/components/notifications/mock";
+import type { NotificationSummary } from "$lib/components/notifications/types";
+
+const rows: NotificationSummary[] = notifications.map((notification, index) => ({
+	...notification,
+	uri: `at://mock/notif/${index}`,
+	read: index % 2 === 1
+}));
+
+const unreadRow = rows.find((row) => !row.read)!;
+const readRow = rows.find((row) => row.read)!;
+const baseline = rows.filter((row) => !row.read).length;
+
+const readOf = (
+	service: { overlay(rows: NotificationSummary[]): NotificationSummary[] },
+	uri: string
+) => service.overlay(rows).find((row) => row.uri === uri)!.read;
+
+describe("notification read state", () => {
+	it("moves the count with the row it marked", async () => {
+		const service = createFixtureNotifications(rows);
+		expect(service.unread).toBe(baseline);
+
+		await service.setRead(unreadRow.uri, true);
+		expect(service.unread).toBe(baseline - 1);
+		expect(readOf(service, unreadRow.uri)).toBe(true);
+
+		await service.setRead(unreadRow.uri, false);
+		expect(service.unread).toBe(baseline);
+		expect(readOf(service, unreadRow.uri)).toBe(false);
+	});
+
+	it("ignores a mark that changes nothing", async () => {
+		const service = createFixtureNotifications(rows);
+
+		await service.setRead(unreadRow.uri, true);
+		await service.setRead(unreadRow.uri, true);
+		await service.setRead(readRow.uri, true);
+
+		expect(service.unread).toBe(baseline - 1);
+	});
+
+	it("empties the count and every known row on mark all read", async () => {
+		const service = createFixtureNotifications(rows);
+
+		await service.markAllRead();
+
+		expect(service.unread).toBe(0);
+		expect(service.overlay(rows).every((row) => row.read)).toBe(true);
+	});
+});
diff --git a/web/src/routes/notifications/+page.svelte b/web/src/routes/notifications/+page.svelte
index 07cc3b087..49e669e9d 100644
--- a/web/src/routes/notifications/+page.svelte
+++ b/web/src/routes/notifications/+page.svelte
@@ -1,55 +1,27 @@
 <script lang="ts">
-	import { createBobbinClient } from "$lib/api/client";
-	import { createDeliberiClient } from "$lib/api/deliberi";
-	import {
-		hydrateNotifications,
-		listNotifications,
-		markAllNotificationsRead,
-		updateNotificationSeen
-	} from "$lib/api/notifications";
 	import NotificationList from "$lib/components/notifications/NotificationList.svelte";
 	import NotificationToolbar from "$lib/components/notifications/NotificationToolbar.svelte";
 	import { notificationCategory } from "$lib/components/notifications/notification";
 	import type { NotificationSummary } from "$lib/components/notifications/types";
 	import ErrorAlert from "$lib/components/ui/Error.svelte";
-	import { getAuth } from "$lib/auth.svelte";
 	import { createLoad } from "$lib/action.svelte";
+	import { getNotifications } from "$lib/notifications.svelte";
 	import type { PageData } from "./$types";
 
 	let { data }: { data: PageData } = $props();
 
-	const auth = getAuth();
+	const shared = getNotifications();
 
-	// local read-state overrides keyed by notification uri so toggling a row
-	// restyles it in place instead of dropping it out of the list. the server
-	// call fires optimistically and a reload re-derives the canonical set.
-	let overrides = $state<Record<string, boolean>>({});
-
-	const loaded = createLoad(async () => {
-		const did = auth.currentDid;
-		if (!did) return [];
-
-		const agent = auth.agent ?? (await auth.agentFor(did));
-		const deliberiUrl = data.deliberiUrl;
-		const bobbinUrl = data.bobbinUrl;
-		if (!agent || !deliberiUrl || !bobbinUrl) return [];
-
-		const deliberi = createDeliberiClient({ deliberiUrl, agent });
-		const bobbin = createBobbinClient({ serviceUrl: bobbinUrl });
-
-		const result = await listNotifications(deliberi, {
-			read: data.readFilter,
-			category: data.categoryFilter === "all" ? undefined : data.categoryFilter
-		});
-		return hydrateNotifications(bobbin, result.notifications);
-	});
+	const loaded = createLoad(() =>
+		shared.list({ read: data.readFilter, category: data.categoryFilter })
+	);
 
 	const loading = $derived(loaded.loading || !loaded.data);
 
-	const all = $derived(
-		(loaded.data ?? []).map((n) => (n.uri in overrides ? { ...n, read: overrides[n.uri] } : n))
-	);
+	const all = $derived(shared.overlay(loaded.data ?? []));
 
+	// rows keep their slot after being read so the unread filter does not yank
+	// them out from under the cursor
 	const unreadOnLoad = $derived(
 		new Set((loaded.data ?? []).filter((n) => !n.read).map((n) => n.uri))
 	);
@@ -58,40 +30,18 @@
 		data.readFilter === "unread" ? all.filter((n) => unreadOnLoad.has(n.uri)) : all
 	);
 
-	const work = $derived(visible.filter((n) => notificationCategory(n.type) === "work"));
-	const social = $derived(visible.filter((n) => notificationCategory(n.type) === "social"));
+	const ofCategory = (list: NotificationSummary[], category: "work" | "social") =>
+		list.filter((n) => notificationCategory(n.type) === category);
+	const unread = (list: NotificationSummary[]) => list.filter((n) => !n.read).length;
 
-	const mobile = $derived(
-		data.categoryFilter === "all"
-			? visible
-			: visible.filter((n) => notificationCategory(n.type) === data.categoryFilter)
-	);
+	const work = $derived(ofCategory(visible, "work"));
+	const social = $derived(ofCategory(visible, "social"));
 
-	const unread = (list: NotificationSummary[]) => list.filter((n) => !n.read).length;
-	const workUnread = $derived(unread(all.filter((n) => notificationCategory(n.type) === "work")));
-	const socialUnread = $derived(
-		unread(all.filter((n) => notificationCategory(n.type) === "social"))
+	const mobile = $derived(
+		data.categoryFilter === "all" ? visible : ofCategory(visible, data.categoryFilter)
 	);
 
 	const showSocial = $derived(data.readFilter !== "unread" || social.length > 0);
-
-	const toggleRead = async (uri: string, read: boolean) => {
-		overrides = { ...overrides, [uri]: read };
-		const agent = auth.agent;
-		if (!agent || !data.deliberiUrl) return;
-		const deliberi = createDeliberiClient({ deliberiUrl: data.deliberiUrl, agent });
-		await updateNotificationSeen(deliberi, { uri, read }).catch(() => {});
-	};
-
-	const markAllRead = async () => {
-		const next: Record<string, boolean> = {};
-		for (const n of visible) next[n.uri] = true;
-		overrides = { ...overrides, ...next };
-		const agent = auth.agent;
-		if (!agent || !data.deliberiUrl) return;
-		const deliberi = createDeliberiClient({ deliberiUrl: data.deliberiUrl, agent });
-		await markAllNotificationsRead(deliberi).catch(() => {});
-	};
 </script>
 
 <svelte:head>
@@ -104,7 +54,7 @@
 	<NotificationToolbar
 		readFilter={data.readFilter}
 		hasNotifications={loading ? false : visible.length > 0}
-		onMarkAllRead={markAllRead}
+		onMarkAllRead={shared.markAllRead}
 	/>
 
 	<ErrorAlert label={loaded.error} />
@@ -114,7 +64,7 @@
 			{loading}
 			notifications={mobile}
 			readFilter={data.readFilter}
-			onToggleRead={toggleRead}
+			onToggleRead={shared.setRead}
 		/>
 	</div>
 
@@ -123,18 +73,18 @@
 			{loading}
 			notifications={work}
 			title="work"
-			unreadCount={workUnread}
+			unreadCount={unread(ofCategory(all, "work"))}
 			readFilter={data.readFilter}
-			onToggleRead={toggleRead}
+			onToggleRead={shared.setRead}
 		/>
 		{#if showSocial}
 			<NotificationList
 				{loading}
 				notifications={social}
 				title="social"
-				unreadCount={socialUnread}
+				unreadCount={unread(ofCategory(all, "social"))}
 				readFilter={data.readFilter}
-				onToggleRead={toggleRead}
+				onToggleRead={shared.setRead}
 			/>
 		{/if}
 	</div>
-- 
2.51.2