hide read-all button when there are no new notifs

web/app/components/NotificationBox.nuxt.test.ts

@@ -443,24 +443,18 @@ describe("<NotificationBox>", { concurrent: false }, () => {
 			expect(calls[0]?.body).toEqual({ ids: [] })
 		})
 
-		it("does nothing when every notification is already read", async ({
+		it("hides the button when every notification is already read", async ({
 			expect,
 		}) => {
-			const calls = mockEndpoint(
-				"PUT",
-				"/api/notifications/read-status",
-				() => ({}),
-			)
 			seedNotifications([makeNotification({ read: true })])
+
 			const wrapper = await mountBox()
 
-			await findButtonByText(
-				wrapper,
-				t("notification.read-all-button"),
-			).trigger("click")
-			await flushPromises()
-
-			expect(calls).toHaveLength(0)
+			expect(
+				wrapper
+					.findAll("button")
+					.some((b) => b.text().includes(t("notification.read-all-button"))),
+			).toBe(false)
 		})
 
 		it("warns when marking everything read fails", async ({ expect }) => {

web/app/components/NotificationBox.vue

@@ -29,6 +29,10 @@ const notifications = computed(
 	() => fetchNotifications.data.value?.notifications ?? [],
 )
 
+const hasUnreadNotifications = computed(() =>
+	notifications.value.some((n) => !n.read),
+)
+
 onMounted(() => {
 	unsubWsNotifications = wsState.state?.subscribe(
 		WS_NOTIFICATION_CREATION_TOPIC,
@@ -235,8 +239,7 @@ async function handleMarkRead(
 }
 
 async function handleMarkAllRead() {
-	const unreadNotificationIds = notifications.value.filter((n) => !n.read)
-	if (unreadNotificationIds.length === 0) {
+	if (!hasUnreadNotifications.value) {
 		return
 	}
 
@@ -261,6 +264,7 @@ async function handleMarkAllRead() {
 				</div>
 				<div class="flex items-center gap-2.5">
 					<ShadcnUiButton
+						v-if="hasUnreadNotifications"
 						variant="ghost"
 						size="2sm"
 						:class="cn('px-2 py-1')"