Only mark actually read announcements as read

frontend/components/Domain/Announcement/AnnouncementDialog.vue

@@ -56,22 +56,21 @@
       </div>
     </div>
     <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>
+      <BaseButton
+        v-if="newAnnouncements.length"
+        color="success"
+        :icon="$globals.icons.textBoxCheckOutline"
+        :text="$t('announcements.mark-all-as-read')"
+        @click="markAllAsRead"
+      />
+      <BaseButton
+        :disabled="isLastAnnouncement(currentAnnouncement.key)"
+        color="info"
+        :icon="$globals.icons.arrowRightBold"
+        icon-right
+        :text="$t('general.next')"
+        @click="nextAnnouncement"
+      />
     </template>
   </BaseDialog>
 </template>
@@ -85,9 +84,10 @@ const dialog = defineModel<boolean>({ default: false });
 const route = useRoute();
 watch(() => route.fullPath, () => { dialog.value = false; });
 
-const { newAnnouncements, allAnnouncements, setLastRead } = useAnnouncements();
+const { newAnnouncements, allAnnouncements, setLastRead, markAllAsRead } = useAnnouncements();
 
 const currentAnnouncement = shallowRef<Announcement | undefined>();
+
 watch(dialog, () => {
   if (!dialog.value || currentAnnouncement.value) {
     return;
@@ -103,17 +103,20 @@ function setCurrentAnnouncement(announcement: Announcement) {
   setLastRead(announcement.key);
 }
 
-function markAllAsRead() {
-  setLastRead(allAnnouncements.at(-1)!.key);
-}
-
 function nextAnnouncement() {
-  const next = newAnnouncements.value.at(0);
-  if (!next) {
-    markAllAsRead();
-  }
-  else {
+  // Find the first unread announcement after the current one (current is already removed from newAnnouncements)
+  const next = newAnnouncements.value.find(a => a.key > currentAnnouncement.value!.key);
+  if (next) {
     setCurrentAnnouncement(next);
   }
 }
+
+function isLastAnnouncement(key: string) {
+  if (!newAnnouncements.value.length) {
+    return true;
+  }
+  else {
+    return key >= newAnnouncements.value.at(-1)!.key;
+  }
+}
 </script>

frontend/composables/use-announcements.ts

@@ -65,6 +65,11 @@ export function useAnnouncements() {
       // The welcome announcement is a special case: it's shown to new users and
       // all other announcements are marked as read when they view it
       key = allAnnouncements.at(-1)!.key;
+      updateUnreadAnnouncements(key);
+    }
+    else {
+      // Only mark this specific announcement as read in the current session
+      newAnnouncements.value = newAnnouncements.value.filter(a => a.key !== key);
     }
 
     if (user.lastReadAnnouncement && key <= user.lastReadAnnouncement) {
@@ -72,8 +77,6 @@ export function useAnnouncements() {
       return;
     }
 
-    updateUnreadAnnouncements(key);
-
     user.lastReadAnnouncement = key; // update immediately so we don't have to wait for the db
     await api.users.updateOne(
       user.id,
@@ -85,6 +88,11 @@ export function useAnnouncements() {
     );
   }
 
+  async function markAllAsRead() {
+    setLastRead(allAnnouncements.at(-1)!.key);
+    newAnnouncements.value = [];
+  }
+
   function initUnreadAnnouncements() {
     const user = auth.user.value;
 
@@ -122,5 +130,6 @@ export function useAnnouncements() {
     newAnnouncements,
     allAnnouncements,
     setLastRead,
+    markAllAsRead,
   };
 }