From 7624bf9b665931448ffba2796574aad0dd88ec92 Mon Sep 17 00:00:00 2001
From: Anirudh Oppiliappan <anirudh@tangled.org>
Date: Thu, 20 Aug 2026 22:24:19 +0300
Subject: [PATCH] web/lib/components/notifications: remove mark-all-as-unread
 toggle

Signed-off-by: Anirudh Oppiliappan <anirudh@tangled.org>
---
 .../notifications/NotificationBell.svelte     | 12 ++++-----
 .../NotificationToolbar.stories.svelte        |  2 +-
 .../notifications/NotificationToolbar.svelte  | 25 +++++++------------
 web/src/routes/notifications/+page.svelte     | 17 ++++++-------
 4 files changed, 22 insertions(+), 34 deletions(-)

diff --git a/web/src/lib/components/notifications/NotificationBell.svelte b/web/src/lib/components/notifications/NotificationBell.svelte
index c4d7a359..de85e787 100644
--- a/web/src/lib/components/notifications/NotificationBell.svelte
+++ b/web/src/lib/components/notifications/NotificationBell.svelte
@@ -85,8 +85,6 @@
 
 	const preview = $derived(filtered.slice(0, PREVIEW_LIMIT));
 
-	const allRead = $derived(filtered.every((n) => n.read));
-
 	const toggleRead = async (uri: string, read: boolean) => {
 		overrides = { ...overrides, [uri]: read };
 		if (fixtures) return;
@@ -97,11 +95,11 @@
 		await updateNotificationSeen(deliberi, { uri, read }).catch(() => {});
 	};
 
-	const markAll = async (read: boolean) => {
+	const markAllRead = async () => {
 		const next: Record<string, boolean> = {};
-		for (const n of filtered) next[n.uri] = read;
+		for (const n of filtered) next[n.uri] = true;
 		overrides = { ...overrides, ...next };
-		if (!read || fixtures) return;
+		if (fixtures) return;
 		const agent = auth.agent;
 		const config = page.data.publicConfig;
 		if (!agent || !config?.deliberiUrl) return;
@@ -166,11 +164,11 @@
 			<NotificationToolbar
 				{readFilter}
 				{categoryFilter}
-				{allRead}
+				hasNotifications={filtered.length > 0}
 				preferences={false}
 				onReadFilter={(filter) => (readFilter = filter)}
 				onCategoryFilter={(filter) => (categoryFilter = filter)}
-				onMarkAll={markAll}
+				onMarkAllRead={markAllRead}
 			/>
 		</div>
 
diff --git a/web/src/lib/components/notifications/NotificationToolbar.stories.svelte b/web/src/lib/components/notifications/NotificationToolbar.stories.svelte
index 6c105111..fd8f8749 100644
--- a/web/src/lib/components/notifications/NotificationToolbar.stories.svelte
+++ b/web/src/lib/components/notifications/NotificationToolbar.stories.svelte
@@ -14,4 +14,4 @@
 
 <Story name="Unread" args={{ readFilter: "unread" }} />
 
-<Story name="Everything read" args={{ readFilter: "inbox", allRead: true }} />
+<Story name="No notifications" args={{ readFilter: "inbox", hasNotifications: false }} />
diff --git a/web/src/lib/components/notifications/NotificationToolbar.svelte b/web/src/lib/components/notifications/NotificationToolbar.svelte
index 041d492e..52cf1c6d 100644
--- a/web/src/lib/components/notifications/NotificationToolbar.svelte
+++ b/web/src/lib/components/notifications/NotificationToolbar.svelte
@@ -6,7 +6,6 @@
 	import Cog from "$icon/cog";
 	import Glasses from "$icon/glasses";
 	import Inbox from "$icon/inbox";
-	import Mail from "$icon/mail";
 	import Button from "$lib/components/ui/Button.svelte";
 	import ButtonGroup, { segmentProps } from "$lib/components/ui/ButtonGroup.svelte";
 	import type { CategoryFilter, ReadFilter } from "./types";
@@ -14,23 +13,22 @@
 	interface Props {
 		readFilter?: ReadFilter;
 		categoryFilter?: CategoryFilter;
-		// nothing left to read, so the button offers the opposite action
-		allRead?: boolean;
+		hasNotifications?: boolean;
 		preferences?: boolean;
 		// the page navigates between filters, the dropdown swaps them in place
 		onReadFilter?: (filter: ReadFilter) => void;
 		onCategoryFilter?: (filter: CategoryFilter) => void;
-		onMarkAll?: (read: boolean) => void;
+		onMarkAllRead?: () => void;
 	}
 
 	let {
 		readFilter = "inbox",
 		categoryFilter = "all",
-		allRead = false,
+		hasNotifications = true,
 		preferences = true,
 		onReadFilter,
 		onCategoryFilter,
-		onMarkAll
+		onMarkAllRead
 	}: Props = $props();
 
 	const pageQuery = (read: ReadFilter, category: CategoryFilter) =>
@@ -65,16 +63,11 @@
 			{@render readSegment("unread", "Unread", Glasses)}
 		</ButtonGroup>
 
-		<Button
-			variant="ghost"
-			size="small"
-			icon={allRead ? Mail : CheckCheck}
-			onclick={() => onMarkAll?.(!allRead)}
-		>
-			<span class="hidden sm:inline">
-				{allRead ? "Mark all as unread" : "Mark all read"}
-			</span>
-		</Button>
+		{#if hasNotifications}
+			<Button variant="ghost" size="small" icon={CheckCheck} onclick={() => onMarkAllRead?.()}>
+				<span class="hidden sm:inline">Mark all read</span>
+			</Button>
+		{/if}
 	</div>
 
 	{#if onCategoryFilter}
diff --git a/web/src/routes/notifications/+page.svelte b/web/src/routes/notifications/+page.svelte
index 82d66d77..9a8579cc 100644
--- a/web/src/routes/notifications/+page.svelte
+++ b/web/src/routes/notifications/+page.svelte
@@ -83,17 +83,10 @@
 		await updateNotificationSeen(deliberi, { uri, read }).catch(() => {});
 	};
 
-	// once everything is read the button offers the way back, so the action reads
-	// as an undo rather than a dead control. both directions reach only the rows
-	// this tab shows, so undoing on the unread tab cannot wake rows the inbox tab
-	// holds.
-	const allRead = $derived(visible.every((n) => n.read));
-
-	const markAll = async (read: boolean) => {
+	const markAllRead = async () => {
 		const next: Record<string, boolean> = {};
-		for (const n of visible) next[n.uri] = read;
+		for (const n of visible) next[n.uri] = true;
 		overrides = { ...overrides, ...next };
-		if (!read) return;
 		const agent = auth.agent;
 		if (!agent || !data.deliberiUrl) return;
 		const deliberi = createDeliberiClient({ deliberiUrl: data.deliberiUrl, agent });
@@ -108,7 +101,11 @@
 <section class="mx-auto flex w-full max-w-5xl flex-col gap-4 px-2 py-8 md:px-4">
 	<h1 class="flex items-center gap-2 typography-heading-3">Notifications</h1>
 
-	<NotificationToolbar readFilter={data.readFilter} {allRead} onMarkAll={markAll} />
+	<NotificationToolbar
+		readFilter={data.readFilter}
+		hasNotifications={visible.length > 0}
+		onMarkAllRead={markAllRead}
+	/>
 
 	<div class="md:hidden">
 		<NotificationList
-- 
2.51.2