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

@@ -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,