implement nav buttons

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;
   }
 

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"
   }

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,