From 20ea652cf57d6bc4ec96a11ac0449771e0800a49 Mon Sep 17 00:00:00 2001
From: Michael Genson <genson.michael@gmail.com>
Date: Sat, 28 Mar 2026 17:18:12 +0000
Subject: [PATCH] implement nav buttons

---
 .../Announcement/AnnouncementDialog.vue       | 38 ++++++++++++++++---
 frontend/lang/messages/en-US.json             |  1 +
 frontend/lib/icons/icons.ts                   |  3 ++
 3 files changed, 37 insertions(+), 5 deletions(-)

diff --git a/frontend/components/Domain/Announcement/AnnouncementDialog.vue b/frontend/components/Domain/Announcement/AnnouncementDialog.vue
index 6818b65b0..2d71a314c 100644
--- a/frontend/components/Domain/Announcement/AnnouncementDialog.vue
+++ b/frontend/components/Domain/Announcement/AnnouncementDialog.vue
@@ -1,5 +1,6 @@
 <template>
   <BaseDialog
+    v-if="currentAnnouncement"
     v-model="dialog"
     :title="$t('announcements.announcements')"
     :icon="$globals.icons.bullhornVariant"
@@ -19,6 +20,24 @@
     <v-card-text>
       <component :is="currentAnnouncement.component" />
     </v-card-text>
+    <template #custom-card-action>
+      <div v-if="newAnnouncements.length">
+        <BaseButton
+          color="success"
+          :icon="$globals.icons.textBoxCheckOutline"
+          :text="$t('announcements.mark-all-as-read')"
+          class="mx-4"
+          @click="markAllAsRead"
+        />
+        <BaseButton
+          color="info"
+          :icon="$globals.icons.arrowRightBold"
+          icon-right
+          :text="$t('general.next')"
+          @click="nextAnnouncement"
+        />
+      </div>
+    </template>
   </BaseDialog>
 </template>
 
@@ -32,13 +51,18 @@ const auth = useMealieAuth();
 const api = useUserApi();
 const { newAnnouncements, allAnnouncements } = useAnnouncements();
 
-const currentAnnouncement = shallowRef(newAnnouncements.value.at(0) || allAnnouncements.at(-1)!);
+const currentAnnouncement = shallowRef<Announcement | undefined>();
 watch(
   dialog,
   () => {
-    // Once the dialog is opened, mark the current announcement as read
+    // Once the dialog is opened, show the next announcement
     if (dialog.value) {
-      setLastRead(currentAnnouncement.value.key);
+      nextAnnouncement();
+
+      // If there are no new announcements, this is never set, so show the newest one
+      if (!currentAnnouncement.value) {
+        currentAnnouncement.value = allAnnouncements.at(-1);
+      }
     }
   },
 );
@@ -54,21 +78,25 @@ async function setLastRead(key: string) {
     user.id,
     {
       ...user,
-      lastReadAnnouncement: key,
+      lastReadAnnouncement: null, // TODO: switch back to key
     },
     { suppressAlert: true },
   );
 }
 
 function markAllAsRead() {
+  newAnnouncements.value = [];
+
   const newestAnnouncement = allAnnouncements.at(-1)!;
   setLastRead(newestAnnouncement.key);
 }
 
 function nextAnnouncement() {
-  newAnnouncements.value.shift();
   const nextAnnouncement = newAnnouncements.value.at(0);
+  newAnnouncements.value = newAnnouncements.value.slice(1);
+
   if (!nextAnnouncement) {
+    markAllAsRead();
     return;
   }
 
diff --git a/frontend/lang/messages/en-US.json b/frontend/lang/messages/en-US.json
index f266b3a55..70fffb00c 100644
--- a/frontend/lang/messages/en-US.json
+++ b/frontend/lang/messages/en-US.json
@@ -1476,6 +1476,7 @@
   },
   "announcements": {
     "announcements": "Announcements",
+    "mark-all-as-read": "Mark All as Read",
     "show-announcements-from-mealie": "Show announcements from Mealie",
     "show-announcements-setting-description": "Whether or not you want to allow users to see announcements from Mealie. When enabled users can still opt-out from seeing them in their user settings"
   }
diff --git a/frontend/lib/icons/icons.ts b/frontend/lib/icons/icons.ts
index 4120b857e..5fc1964cf 100644
--- a/frontend/lib/icons/icons.ts
+++ b/frontend/lib/icons/icons.ts
@@ -143,6 +143,7 @@ import {
   mdiTestTube,
   mdiText,
   mdiTextBoxOutline,
+  mdiTextBoxCheckOutline,
   mdiTimelineText,
   mdiTimerSand,
   mdiTools,
@@ -156,6 +157,7 @@ import {
   mdiWindowClose,
   mdiWrench,
   mdiHandWaveOutline,
+
 } from "@mdi/js";
 
 export const icons = {
@@ -275,6 +277,7 @@ export const icons = {
   sortClockDescending: mdiSortClockDescending,
   star: mdiStar,
   testTube: mdiTestTube,
+  textBoxCheckOutline: mdiTextBoxCheckOutline,
   timelineText: mdiTimelineText,
   tools: mdiTools,
   potSteam: mdiPotSteamOutline,