mirror/api
1
0
Fork 0
mirror of https://github.com/unraid/api.git synced 2026-02-16 04:58:29 -06:00
Code Issues Packages Projects Releases Wiki Activity

feat(web): clear notifications indicator after opening sidebar

Browse Source
This commit is contained in:
Pujit Mehrotra
2025-01-06 10:54:42 -05:00
committed by Pujit Mehrotra
parent 939383e4ef
commit be7135efdd
2 changed files with 24 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
web/components/Notifications/Indicator.vue
View File

@@ -3,7 +3,7 @@ import { BellIcon, ExclamationTriangleIcon, ShieldExclamationIcon } from '@heroi
import { cn } from '~/components/shadcn/utils'; import { cn } from '~/components/shadcn/utils';
import { Importance, type OverviewQuery } from '~/composables/gql/graphql'; import { Importance, type OverviewQuery } from '~/composables/gql/graphql';
const props = defineProps<{ overview?: OverviewQuery['notifications']['overview'] }>(); const props = defineProps<{ overview?: OverviewQuery['notifications']['overview'], seen?: boolean }>();
const indicatorLevel = computed(() => { const indicatorLevel = computed(() => {
if (!props.overview?.unread) { if (!props.overview?.unread) {
@@ -42,12 +42,12 @@ const icon = computed<{ component: Component; color: string } | null>(() => {
<div class="relative"> <div class="relative">
<BellIcon class="w-6 h-6 text-header-text-primary" /> <BellIcon class="w-6 h-6 text-header-text-primary" />
<div <div
v-if="indicatorLevel === 'UNREAD'" v-if="!seen && indicatorLevel === 'UNREAD'"
class="absolute top-0 right-0 size-2.5 rounded-full border border-neutral-800 bg-unraid-green" class="absolute top-0 right-0 size-2.5 rounded-full border border-neutral-800 bg-unraid-green"
/> />
<component <component
:is="icon.component" :is="icon.component"
v-else-if="icon && indicatorLevel" v-else-if="!seen && icon && indicatorLevel"
:class="cn('absolute -top-1 -right-1 size-4 rounded-full', icon.color)" :class="cn('absolute -top-1 -right-1 size-4 rounded-full', icon.color)"
/> />
</div> </div>

23
web/components/Notifications/Sidebar.vue
View File

@@ -39,13 +39,32 @@ const overview = computed(() => {
} }
return result.value.notifications.overview; return result.value.notifications.overview;
}); });
/** whether user has viewed their notifications */
const hasSeenNotifications = ref(false);
// renews unseen state when new notifications arrive
watch(
() => overview.value?.unread,
(newVal, oldVal) => {
if (!newVal || !oldVal) return;
if (newVal.total > oldVal.total) {
hasSeenNotifications.value = false;
}
}
);
const prepareToViewNotifications = () => {
determineTeleportTarget();
hasSeenNotifications.value = true;
};
</script> </script>
<template> <template>
<Sheet> <Sheet>
<SheetTrigger @click="determineTeleportTarget"> <SheetTrigger @click="prepareToViewNotifications">
<span class="sr-only">Notifications</span> <span class="sr-only">Notifications</span>
<NotificationsIndicator :overview="overview" /> <NotificationsIndicator :overview="overview" :seen="hasSeenNotifications" />
</SheetTrigger> </SheetTrigger>
<SheetContent <SheetContent
:to="teleportTarget" :to="teleportTarget"