| 1 | <template> |
| 2 | <n-popover :show-arrow="false" placement="bottom" content-class="w-72 p-0!"> |
| 3 | <template #trigger> |
| 4 | <n-badge :show="hasUnread" dot :color="primaryColor"> |
| 5 | <Icon :name="BellIcon" :size="21" class="text-default" /> |
| 6 | </n-badge> |
| 7 | </template> |
| 8 | <template #header> |
| 9 | <div class="font-semibold">Notifications</div> |
| 10 | </template> |
| 11 | <template #default> |
| 12 | <NotificationsList :max-items="MAX_ITEMS" class="max-h-[50vh]"> |
| 13 | <template #last> |
| 14 | <div v-if="list.length > MAX_ITEMS" class="flex justify-center p-4"> |
| 15 | <n-button text @click="showDrawer = true">View all</n-button> |
| 16 | </div> |
| 17 | </template> |
| 18 | </NotificationsList> |
| 19 | </template> |
| 20 | <template #footer> |
| 21 | <NotificationsToolbar /> |
| 22 | </template> |
| 23 | </n-popover> |
| 24 | |
| 25 | <n-drawer v-model:show="showDrawer" :width="400" class="max-w-[90vw]" :trap-focus="false"> |
| 26 | <n-drawer-content title="Notifications" closable body-content-class="p-0!"> |
| 27 | <NotificationsList /> |
| 28 | <template #footer> |
| 29 | <NotificationsToolbar /> |
| 30 | </template> |
| 31 | </n-drawer-content> |
| 32 | </n-drawer> |
| 33 | </template> |
| 34 | |
| 35 | <script lang="ts" setup> |
| 36 | import { NBadge, NButton, NDrawer, NDrawerContent, NPopover } from "naive-ui" |
| 37 | import { computed, onBeforeMount, ref } from "vue" |
| 38 | import Icon from "@/components/common/Icon.vue" |
| 39 | import NotificationsList from "@/components/common/Notifications/List.vue" |
| 40 | import NotificationsToolbar from "@/components/common/Notifications/Toolbar.vue" |
| 41 | import { useHealthchecksNotify } from "@/composables/useHealthchecksNotify" |
| 42 | import { useNotifications } from "@/composables/useNotifications" |
| 43 | import { useThemeStore } from "@/stores/theme" |
| 44 | |
| 45 | const MAX_ITEMS = 7 |
| 46 | const BellIcon = "ph:bell" |
| 47 | const themeStore = useThemeStore() |
| 48 | const primaryColor = computed(() => themeStore.style["primary-color"]) |
| 49 | const hasUnread = useNotifications().hasUnread |
| 50 | const showDrawer = ref(false) |
| 51 | const list = useNotifications().list |
| 52 | |
| 53 | onBeforeMount(() => { |
| 54 | useHealthchecksNotify().init() |
| 55 | }) |
| 56 | </script> |