Only mark actually read announcements as read

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