add mask as read context menu to noti center bell icon

This commit is contained in:
pa
2026-03-08 00:06:35 +09:00
parent 4b74e9df5a
commit 2a861cb9b6
2 changed files with 47 additions and 14 deletions

View File

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

View File

@@ -26,18 +26,27 @@
<RefreshCw v-else />
</Button>
</TooltipWrapper>
<TooltipWrapper side="bottom" :content="t('side_panel.notification_center.title')">
<Button
class="rounded-full relative"
variant="ghost"
size="icon-sm"
@click="isNotificationCenterOpen = !isNotificationCenterOpen">
<Bell />
<span
v-if="hasUnseenNotifications"
class="absolute top-1 right-1.25 size-1.5 rounded-full bg-red-500" />
</Button>
</TooltipWrapper>
<ContextMenu>
<ContextMenuTrigger as-child>
<TooltipWrapper side="bottom" :content="t('side_panel.notification_center.title')">
<Button
class="rounded-full relative"
variant="ghost"
size="icon-sm"
@click="isNotificationCenterOpen = !isNotificationCenterOpen">
<Bell />
<span
v-if="hasUnseenNotifications"
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,