add mask as read context menu to noti center bell icon

src/stores/notification/index.js

@@ -478,6 +478,20 @@ export const useNotificationStore = defineStore('Notification', () => {
         processSeeQueue();
     }
 
+    /**
+     *
+     */
+    function markAllAsSeen() {
+        const unseenIds = [...unseenNotifications.value];
+        for (const id of unseenIds) {
+            const ref = notificationTable.value.data.find((n) => n.id === id);
+            const version = ref?.version || 1;
+            queueMarkAsSeen(id, version);
+        }
+        unseenNotifications.value = [];
+        uiStore.removeNotify('notification');
+    }
+
     /**
      *
      * @param args
@@ -1459,6 +1473,7 @@ export const useNotificationStore = defineStore('Notification', () => {
         getNotificationCategory,
         isNotificationExpired,
         openNotificationLink,
-        queueMarkAsSeen
+        queueMarkAsSeen,
+        markAllAsSeen
     };
 });

src/views/Sidebar/Sidebar.vue

@@ -26,18 +26,27 @@
                         <RefreshCw v-else />
                     </Button>
                 </TooltipWrapper>
-                <TooltipWrapper side="bottom" :content="t('side_panel.notification_center.title')">
+                <ContextMenu>
-                    <Button
+                    <ContextMenuTrigger as-child>
-                        class="rounded-full relative"
+                        <TooltipWrapper side="bottom" :content="t('side_panel.notification_center.title')">
-                        variant="ghost"
+                            <Button
-                        size="icon-sm"
+                                class="rounded-full relative"
-                        @click="isNotificationCenterOpen = !isNotificationCenterOpen">
+                                variant="ghost"
-                        <Bell />
+                                size="icon-sm"
-                        <span
+                                @click="isNotificationCenterOpen = !isNotificationCenterOpen">
-                            v-if="hasUnseenNotifications"
+                                <Bell />
-                            class="absolute top-1 right-1.25 size-1.5 rounded-full bg-red-500" />
+                                <span
-                    </Button>
+                                    v-if="hasUnseenNotifications"
-                </TooltipWrapper>
+                                    class="absolute top-1 right-1.25 size-1.5 rounded-full bg-red-500" />
+                            </Button>
+                        </TooltipWrapper>
+                    </ContextMenuTrigger>
+                    <ContextMenuContent>
+                        <ContextMenuItem :disabled="!hasUnseenNotifications" @click="markNotificationsRead">
+                            {{ t('nav_menu.mark_all_read') }}
+                        </ContextMenuItem>
+                    </ContextMenuContent>
+                </ContextMenu>
                 <Popover v-model:open="isSettingsPopoverOpen">
                     <PopoverTrigger as-child>
                         <Button class="rounded-full" variant="ghost" size="icon-sm">
@@ -237,6 +246,7 @@
         SelectValue
     } from '@/components/ui/select';
     import { Bell, RefreshCw, Search, Settings } from 'lucide-vue-next';
+    import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuTrigger } from '@/components/ui/context-menu';
     import { Field, FieldContent, FieldLabel } from '@/components/ui/field';
     import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
     import { computed, ref } from 'vue';
@@ -269,7 +279,8 @@
     const { friends, isRefreshFriendsLoading, onlineFriendCount } = storeToRefs(useFriendStore());
     const { refreshFriendsList } = useFriendStore();
     const { groupInstances } = storeToRefs(useGroupStore());
-    const { isNotificationCenterOpen, hasUnseenNotifications } = storeToRefs(useNotificationStore());
+    const notificationStore = useNotificationStore();
+    const { isNotificationCenterOpen, hasUnseenNotifications } = storeToRefs(notificationStore);
     const globalSearchStore = useGlobalSearchStore();
     const { t } = useI18n();
 
@@ -287,6 +298,13 @@
         globalSearchStore.open();
     }
 
+    /**
+     *
+     */
+    function markNotificationsRead() {
+        notificationStore.markAllAsSeen();
+    }
+
     const appearanceSettingsStore = useAppearanceSettingsStore();
     const {
         sidebarSortMethod1,