@apptegy/nuxt-navigation 0.1.114 → 0.1.116

package/dist/module.json

@@ -4,7 +4,7 @@
     "nuxt": ">=3.0.0"
   },
   "configKey": "@apptegy/nuxt-navigation",
-  "version": "0.1.114",
+  "version": "0.1.116",
   "builder": {
     "@nuxt/module-builder": "1.0.1",
     "unbuild": "unknown"

package/dist/module.mjs

@@ -1,6 +1,6 @@
 import { defineNuxtModule, createResolver, addComponentsDir, addImportsDir } from '@nuxt/kit';
 
-const module$1 = defineNuxtModule({
+const module = defineNuxtModule({
   meta: {
     name: "@apptegy/nuxt-navigation",
     compatibility: {
@@ -22,4 +22,4 @@ const module$1 = defineNuxtModule({
   }
 });
 
-export { module$1 as default };
+export { module as default };

package/dist/runtime/components/Nav/Header.vue

@@ -148,12 +148,7 @@ import {
 } from "../../utils/notification-api";
 const props = defineProps({
   sticky: { type: Boolean, required: false },
-  showNotifications: { type: Boolean, required: false, default: false },
-  notificationsResponse: { type: [Object, null], required: false, default: null },
-  notificationsLoading: { type: Boolean, required: false, default: false },
-  notificationPanelOpen: { type: Boolean, required: false, default: false },
-  activeTabId: { type: String, required: false, default: "" },
-  activeFilterId: { type: String, required: false, default: "" },
+  notifications: { type: [Object, null], required: false, default: null },
   user: { type: Object, required: true },
   impersonatedUser: { type: Object, required: false },
   useLogoutEmit: { type: Boolean, required: false },
@@ -163,9 +158,7 @@ const nuxtApp = useNuxtApp();
 const emit = defineEmits([
   "selected-option",
   "user-logout",
-  "update:notificationPanelOpen",
-  "update:activeTabId",
-  "update:activeFilterId",
+  "update:notifications",
   "notifications-clear-all",
   "notifications-dismiss",
   "notifications-select",
@@ -173,8 +166,13 @@ const emit = defineEmits([
 ]);
 const popoverRef = ref(null);
 const isMobilePanel = useMediaQuery("(max-width: 960px)");
-const panelOpen = ref(props.notificationPanelOpen);
 const isBellShaking = ref(false);
+const showNotifications = computed(() => props.notifications != null);
+const notificationsResponse = computed(() => props.notifications?.response ?? null);
+const notificationsLoading = computed(() => props.notifications?.loading ?? false);
+const panelOpen = ref(props.notifications?.panelOpen ?? false);
+const activeTabId = ref(props.notifications?.activeTabId || "new");
+const activeFilterId = ref(props.notifications?.activeFilterId || "all-types");
 const popoverPt = {
   content: {
     class: "notifications-popover__content",
@@ -188,10 +186,10 @@ const notificationDateLabels = computed(() => ({
   justNow: nuxtApp.$t("navigation.notificationsPanel.justNow")
 }));
 const notificationsPanel = computed(() => {
-  if (!props.notificationsResponse) {
+  if (!notificationsResponse.value) {
     return null;
   }
-  return mapNotificationsApiResponse(props.notificationsResponse, {
+  return mapNotificationsApiResponse(notificationsResponse.value, {
     locale: nuxtApp.$intl.locale,
     dateLabels: notificationDateLabels.value,
     retentionLabel: nuxtApp.$t("navigation.notificationsPanel.retentionLabel"),
@@ -202,10 +200,17 @@ const notificationsPanel = computed(() => {
   });
 });
 const notificationCount = computed(
-  () => getNotificationsTotalCount(props.notificationsResponse)
+  () => getNotificationsTotalCount(notificationsResponse.value)
 );
-const activeTabId = ref(props.activeTabId || notificationsPanel.value?.tabs[0]?.id || "");
-const activeFilterId = ref(props.activeFilterId || notificationsPanel.value?.filters?.[0]?.id || "all-types");
+function patchNotifications(patch) {
+  if (!props.notifications) {
+    return;
+  }
+  emit("update:notifications", {
+    ...props.notifications,
+    ...patch
+  });
+}
 watch(
   notificationCount,
   (newCount, oldCount) => {
@@ -223,19 +228,21 @@ function onBellShakeEnd() {
   isBellShaking.value = false;
 }
 watch(
-  () => props.notificationPanelOpen,
+  () => props.notifications?.panelOpen,
   (value) => {
-    panelOpen.value = value;
+    if (value !== void 0) {
+      panelOpen.value = value;
+    }
   }
 );
 watch(panelOpen, (value) => {
-  emit("update:notificationPanelOpen", value);
+  patchNotifications({ panelOpen: value });
   if (!value && !isMobilePanel.value) {
     popoverRef.value?.hide();
   }
 });
 watch(
-  () => props.activeTabId,
+  () => props.notifications?.activeTabId,
   (value) => {
     if (value) {
       activeTabId.value = value;
@@ -243,7 +250,7 @@ watch(
   }
 );
 watch(
-  () => props.activeFilterId,
+  () => props.notifications?.activeFilterId,
   (value) => {
     if (value) {
       activeFilterId.value = value;
@@ -279,11 +286,11 @@ function handleNotificationSelect(payload) {
 }
 function handleTabChange(id) {
   activeTabId.value = id;
-  emit("update:activeTabId", id);
+  patchNotifications({ activeTabId: id });
 }
 function handleFilterChange(id) {
   activeFilterId.value = id;
-  emit("update:activeFilterId", id);
+  patchNotifications({ activeFilterId: id });
 }
 </script>
 

package/dist/runtime/components/Nav/Header.vue.d.ts

@@ -1,12 +1,10 @@
-import type { INotificationsApiResponse, IUser } from '../../types/index.js';
+import type { INotificationsHeaderModel, IUser } from '../../types/index.js';
 interface IHeaderProps {
     sticky?: boolean;
-    showNotifications?: boolean;
-    notificationsResponse?: INotificationsApiResponse | null;
-    notificationsLoading?: boolean;
-    notificationPanelOpen?: boolean;
-    activeTabId?: string;
-    activeFilterId?: string;
+    /**
+     * Host-owned notification center state. Pass `null`/`undefined` to hide the bell.
+     */
+    notifications?: INotificationsHeaderModel | null;
 }
 interface IUserDropdown {
     user: {
@@ -29,13 +27,24 @@ type __VLS_Slots = {} & {
 } & {
     notifications?: (props: typeof __VLS_15) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {
-    showNotifications: boolean;
-    notificationsResponse: INotificationsApiResponse | null;
-    notificationsLoading: boolean;
-    notificationPanelOpen: boolean;
-    activeTabId: string;
-    activeFilterId: string;
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "selected-option": (...args: any[]) => void;
+    "user-logout": (...args: any[]) => void;
+    "update:notifications": (...args: any[]) => void;
+    "notifications-clear-all": (...args: any[]) => void;
+    "notifications-dismiss": (...args: any[]) => void;
+    "notifications-select": (...args: any[]) => void;
+    "notification-click": (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onSelected-option"?: ((...args: any[]) => any) | undefined;
+    "onUser-logout"?: ((...args: any[]) => any) | undefined;
+    "onUpdate:notifications"?: ((...args: any[]) => any) | undefined;
+    "onNotifications-clear-all"?: ((...args: any[]) => any) | undefined;
+    "onNotifications-dismiss"?: ((...args: any[]) => any) | undefined;
+    "onNotifications-select"?: ((...args: any[]) => any) | undefined;
+    "onNotification-click"?: ((...args: any[]) => any) | undefined;
+}>, {
+    notifications: INotificationsHeaderModel | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/dist/runtime/components/Nav/NotificationItem.vue

@@ -38,10 +38,6 @@
 
       <div class="notification-item__content">
         <p class="notification-item__message">
-          <strong>{{ primaryActor.name }}</strong>
-          <template v-if="additionalActorsLabel">
-            {{ additionalActorsLabel }}
-          </template>
           {{ item.actionText }}
         </p>
         <p class="notification-item__meta">
@@ -106,16 +102,6 @@ const groupBadgeLabel = computed(() => {
   const count = props.item.groupCount ?? Math.max(props.item.actors.length - 1, 0);
   return count > 0 ? `+${count}` : "";
 });
-const additionalActorsLabel = computed(() => {
-  if (props.item.groupCount && props.item.groupCount > 0) {
-    return ` and ${props.item.groupCount} others`;
-  }
-  if (props.item.actors.length <= 1) {
-    return "";
-  }
-  const names = props.item.actors.slice(1).map((actor) => actor.name);
-  return `, ${names.join(", ")}`;
-});
 function svgIcon(paths) {
   return h(
     "svg",
@@ -220,7 +206,7 @@ function handleDismiss(event) {
   text-align: left;
   color: inherit;
 }
-.notification-item__main:hover .notification-item__message strong {
+.notification-item__main:hover .notification-item__message {
   color: var(--purple-60, #662e80);
 }
 .notification-item__main:focus-visible {
@@ -297,9 +283,6 @@ function handleDismiss(event) {
   line-height: 20px;
   color: var(--grey-90, #111827);
 }
-.notification-item__message strong {
-  font-weight: 600;
-}
 .notification-item__meta {
   display: flex;
   flex-wrap: wrap;

package/dist/runtime/components/Nav/NotificationItem.vue.d.ts

@@ -3,10 +3,10 @@ type __VLS_Props = {
     item: INotificationItem;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    dismiss: (id: string) => any;
     select: (item: INotificationItem) => any;
+    dismiss: (id: string) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onDismiss?: ((id: string) => any) | undefined;
     onSelect?: ((item: INotificationItem) => any) | undefined;
+    onDismiss?: ((id: string) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/runtime/components/Nav/NotificationsPanel.vue

@@ -185,7 +185,7 @@ import {
   getVisibleFilters,
   isInBadge,
   notificationMatchesFilter,
-  resolveNotificationFilters,
+  resolveStickyNotificationFilters,
   shouldShowFilterChips
 } from "../../utils/notifications";
 const props = defineProps({
@@ -200,6 +200,7 @@ const emit = defineEmits(["update:activeTabId", "update:activeFilterId", "clear-
 const filtersRef = ref();
 const activeTabId = ref(props.activeTabId || props.data.tabs[0]?.id || "");
 const activeFilterId = ref(props.activeFilterId || props.data.filters?.[0]?.id || "all-types");
+const stickyFilters = ref([]);
 watch(
   () => props.activeTabId,
   (value) => {
@@ -230,19 +231,44 @@ const usesDynamicFilters = computed(() => !props.data.filters?.length);
 const activeTab = computed(
   () => props.data.tabs.find((tab) => tab.id === activeTabId.value)
 );
-const resolvedFilters = computed(
-  () => resolveNotificationFilters(allNotifications.value, activeTab.value, props.data.filters)
+function filterCatalogKey(filters) {
+  return filters.map((filter) => filter.id).join("|");
+}
+watch(
+  [allNotifications, activeTab, activeFilterId, () => props.data.filters],
+  () => {
+    const { nextStickyFilters } = resolveStickyNotificationFilters({
+      notifications: allNotifications.value,
+      tab: activeTab.value,
+      providedFilters: props.data.filters,
+      activeFilterId: activeFilterId.value,
+      stickyFilters: stickyFilters.value
+    });
+    if (filterCatalogKey(stickyFilters.value) !== filterCatalogKey(nextStickyFilters)) {
+      stickyFilters.value = nextStickyFilters;
+    }
+  },
+  { immediate: true, deep: true }
+);
+const displayFilters = computed(
+  () => resolveStickyNotificationFilters({
+    notifications: allNotifications.value,
+    tab: activeTab.value,
+    providedFilters: props.data.filters,
+    activeFilterId: activeFilterId.value,
+    stickyFilters: stickyFilters.value
+  }).filters
 );
 const visibleFilters = computed(() => {
   if (usesDynamicFilters.value) {
-    return resolvedFilters.value;
+    return displayFilters.value;
   }
-  return getVisibleFilters(allNotifications.value, resolvedFilters.value, activeTab.value);
+  return getVisibleFilters(allNotifications.value, displayFilters.value, activeTab.value);
 });
 const showFilterChips = computed(
   () => shouldShowFilterChips(
     allNotifications.value,
-    resolvedFilters.value,
+    displayFilters.value,
     activeTab.value,
     usesDynamicFilters.value
   )
@@ -269,7 +295,7 @@ function formatCount(count) {
   return formatNotificationCount(count);
 }
 const activeFilter = computed(
-  () => visibleFilters.value.find((filter) => filter.id === activeFilterId.value) || resolvedFilters.value.find((filter) => filter.id === activeFilterId.value)
+  () => visibleFilters.value.find((filter) => filter.id === activeFilterId.value) || displayFilters.value.find((filter) => filter.id === activeFilterId.value)
 );
 function showClearAll(groupIndex) {
   return groupIndex === 0 && (activeTabId.value === "new" || activeTab.value?.unreadOnly);

package/dist/runtime/components/Nav/NotificationsPanel.vue.d.ts

@@ -8,6 +8,11 @@ type __VLS_Props = {
     mobile?: boolean;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (payload: {
+        item: INotificationsPanelData["groups"][number]["notifications"][number];
+        tabId: string;
+        filterId: string;
+    }) => any;
     "update:activeTabId": (id: string) => any;
     "update:activeFilterId": (id: string) => any;
     "clear-all": (payload: {
@@ -20,13 +25,13 @@ declare const _default: import("vue").DefineComponent<__VLS_Props, void, {}, {},
         tabId: string;
         filterId: string;
     }) => any;
-    select: (payload: {
+    close: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: ((payload: {
         item: INotificationsPanelData["groups"][number]["notifications"][number];
         tabId: string;
         filterId: string;
-    }) => any;
-    close: () => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    }) => any) | undefined;
     "onUpdate:activeTabId"?: ((id: string) => any) | undefined;
     "onUpdate:activeFilterId"?: ((id: string) => any) | undefined;
     "onClear-all"?: ((payload: {
@@ -39,11 +44,6 @@ declare const _default: import("vue").DefineComponent<__VLS_Props, void, {}, {},
         tabId: string;
         filterId: string;
     }) => any) | undefined;
-    onSelect?: ((payload: {
-        item: INotificationsPanelData["groups"][number]["notifications"][number];
-        tabId: string;
-        filterId: string;
-    }) => any) | undefined;
     onClose?: (() => any) | undefined;
 }>, {
     loading: boolean;

package/dist/runtime/composables/useSidebar.d.ts

@@ -1,5 +1,5 @@
 export declare function useSidebar(): {
-    state: any;
+    state: import("vue").Ref<boolean, boolean>;
     toggleSidebar: () => void;
     sidebarWidth: import("vue").ComputedRef<"264px" | "0px">;
 };

package/dist/runtime/constants/notification-types.d.ts

@@ -6,14 +6,16 @@ export declare const NOTIFICATION_BADGE_COLOR = "#C84B31";
 export declare const NOTIFICATION_FILTER_CATEGORIES: Array<{
     id: string;
     label: string;
-    types: NotificationType[];
+    kinds: string[];
 }>;
 /** @deprecated Use NOTIFICATION_FILTER_CATEGORIES */
 export declare const DEFAULT_NOTIFICATION_FILTERS: ({
     id: string;
     label: string;
-    types: NotificationType[];
+    kinds: string[];
 } | {
     id: string;
     label: string;
 })[];
+/** Resolve `filter[kind][]` values for a notification center filter pill id. */
+export declare function getKindsForNotificationFilter(filterId: string | null | undefined): string[];

package/dist/runtime/constants/notification-types.js

@@ -14,35 +14,42 @@ export const NOTIFICATION_FILTER_CATEGORIES = [
   {
     id: "announcements",
     label: "Announcements",
-    types: ["announcement"]
+    kinds: ["announcement"]
   },
   {
     id: "messages",
     label: "Messages",
-    types: ["message"]
+    kinds: ["message"]
   },
   {
-    id: "comments-mentions",
-    label: "Comments & Mentions",
-    types: ["comment", "mention", "reply", "reaction"]
+    id: "comments-reactions",
+    label: "Comments & Reactions",
+    kinds: ["comment", "reaction"]
   },
   {
     id: "school-posts",
     label: "School Posts",
-    types: ["school-post"]
+    kinds: ["school_post"]
   },
   {
     id: "system",
     label: "System",
-    types: ["system"]
+    kinds: ["system"]
   },
   {
     id: "other",
     label: "Other",
-    types: ["unknown"]
+    kinds: ["unknown"]
   }
 ];
 export const DEFAULT_NOTIFICATION_FILTERS = [
   { id: "all-types", label: "All types" },
   ...NOTIFICATION_FILTER_CATEGORIES
 ];
+export function getKindsForNotificationFilter(filterId) {
+  if (!filterId || filterId === "all-types") {
+    return [];
+  }
+  const category = NOTIFICATION_FILTER_CATEGORIES.find((filter) => filter.id === filterId);
+  return category?.kinds ? [...category.kinds] : [];
+}

package/dist/runtime/types/index.d.ts

@@ -11,4 +11,4 @@ export interface IUser {
     client: string;
     admin_email: string;
 }
-export type { NotificationType, NotificationApiState, INotificationApiActor, INotificationApiRecord, INotificationsPagination, INotificationsApiResponse, INotificationActor, INotificationItem, INotificationGroup, INotificationTab, INotificationFilter, INotificationsPanelData, } from './notifications.js';
+export type { NotificationType, NotificationApiState, INotificationApiActor, INotificationApiRecord, INotificationsPagination, INotificationsApiResponse, INotificationActor, INotificationItem, INotificationGroup, INotificationTab, INotificationFilter, INotificationsPanelData, INotificationsHeaderModel, } from './notifications.js';

package/dist/runtime/types/notifications.d.ts

@@ -7,6 +7,11 @@ export interface INotificationApiActor {
 }
 export interface INotificationApiRecord {
     id: number | string;
+    /**
+     * Category used for filter pills / `filter[kind][]` (e.g. announcement, comment, reaction).
+     * Distinct from `source_record_type`, which describes the underlying record.
+     */
+    kind?: string | null;
     source_record_type: string;
     title: string;
     summary?: string;
@@ -33,7 +38,13 @@ export interface INotificationActor {
 }
 export interface INotificationItem {
     id: string;
+    /** Visual/icon type — derived from `source_record_type`. */
     type: NotificationType;
+    /**
+     * Filter category — derived from API `kind` (falls back to `type` when kind is absent).
+     * Used by filter pills and `filter[kind][]`.
+     */
+    kind: string;
     actors: INotificationActor[];
     actionText: string;
     timestampLabel: string;
@@ -67,7 +78,15 @@ export interface INotificationFilter {
     id: string;
     label: string;
     count?: number;
-    /** Notification types included in this filter. Omit or leave empty to include all types. */
+    /**
+     * Notification kinds included in this filter (`filter[kind][]`).
+     * Omit or leave empty to include all kinds.
+     */
+    kinds?: string[];
+    /**
+     * @deprecated Prefer `kinds`. Kept for callers that still filter by
+     * `source_record_type`-derived `type`.
+     */
     types?: NotificationType[];
 }
 export interface INotificationsPanelData {
@@ -77,3 +96,11 @@ export interface INotificationsPanelData {
     filters?: INotificationFilter[];
     groups: INotificationGroup[];
 }
+/** Host-owned notification center state bound to NavHeader via `v-model:notifications`. */
+export interface INotificationsHeaderModel {
+    response: INotificationsApiResponse | null;
+    loading?: boolean;
+    panelOpen?: boolean;
+    activeTabId?: string;
+    activeFilterId?: string;
+}

package/dist/runtime/utils/notification-api.d.ts

@@ -1,7 +1,10 @@
 import type { INotificationApiActor, INotificationApiRecord, INotificationGroup, INotificationItem, INotificationsApiResponse, INotificationsPanelData, INotificationTab, NotificationType } from '../types/index.js';
 import { type INotificationDateLabels } from './notification-dates.js';
 export declare const DEFAULT_NOTIFICATION_TABS: INotificationTab[];
+/** Normalize kind values for filter matching and `filter[kind][]` query params. */
+export declare function normalizeNotificationKind(value: string): string;
 export declare function mapSourceRecordType(sourceRecordType: string): NotificationType;
+export declare function mapNotificationKind(kind: string | null | undefined, fallbackType: NotificationType): string;
 export declare function mapNotificationApiActor(actor: INotificationApiActor): {
     name: string;
     avatarUrl: string | undefined;

package/dist/runtime/utils/notification-api.js

@@ -19,10 +19,19 @@ export const DEFAULT_NOTIFICATION_TABS = [
   { id: "new", label: "New", unreadOnly: true },
   { id: "all", label: "All" }
 ];
+export function normalizeNotificationKind(value) {
+  return value.replace(/([a-z0-9])([A-Z])/g, "$1_$2").toLowerCase().replace(/-/g, "_");
+}
 export function mapSourceRecordType(sourceRecordType) {
   const normalizedSourceRecordType = sourceRecordType.replace(/([a-z0-9])([A-Z])/g, "$1_$2").toLowerCase();
   return SOURCE_RECORD_TYPE_MAP[normalizedSourceRecordType] ?? "unknown";
 }
+export function mapNotificationKind(kind, fallbackType) {
+  if (!kind) {
+    return normalizeNotificationKind(fallbackType);
+  }
+  return normalizeNotificationKind(kind) || normalizeNotificationKind(fallbackType);
+}
 export function mapNotificationApiActor(actor) {
   const name = [actor.first_name, actor.last_name].filter(Boolean).join(" ").trim();
   return {
@@ -32,9 +41,11 @@ export function mapNotificationApiActor(actor) {
 }
 export function mapNotificationApiRecord(record, options) {
   const state = record.notification_state;
+  const type = mapSourceRecordType(record.source_record_type);
   return {
     id: String(record.id),
-    type: mapSourceRecordType(record.source_record_type),
+    type,
+    kind: mapNotificationKind(record.kind, type),
     actors: (record.actors ?? []).map(mapNotificationApiActor),
     actionText: record.title,
     timestampLabel: formatNotificationTimeAgo(record.created_at, {

package/dist/runtime/utils/notifications.d.ts

@@ -14,6 +14,20 @@ export declare function getScopedNotifications(notifications: INotificationItem[
  */
 export declare function buildFiltersFromNotifications(notifications: INotificationItem[], tab: INotificationTab | undefined): INotificationFilter[];
 export declare function resolveNotificationFilters(notifications: INotificationItem[], tab: INotificationTab | undefined, filters?: INotificationFilter[]): INotificationFilter[];
+/**
+ * Keeps the last "all types" pill catalog while a kind filter is active, so chips
+ * don't collapse when results are already filtered (e.g. via `filter[kind][]`).
+ */
+export declare function resolveStickyNotificationFilters({ notifications, tab, providedFilters, activeFilterId, stickyFilters, }: {
+    notifications: INotificationItem[];
+    tab: INotificationTab | undefined;
+    providedFilters?: INotificationFilter[];
+    activeFilterId: string;
+    stickyFilters: INotificationFilter[];
+}): {
+    filters: INotificationFilter[];
+    nextStickyFilters: INotificationFilter[];
+};
 export declare function filterHasContent(notifications: INotificationItem[], filter: INotificationFilter, tab: INotificationTab | undefined): boolean;
 export declare function getVisibleFilters(notifications: INotificationItem[], filters: INotificationFilter[], tab: INotificationTab | undefined): INotificationFilter[];
 export declare function shouldShowFilterChips(notifications: INotificationItem[], filters: INotificationFilter[], tab: INotificationTab | undefined, usesDynamicFilters?: boolean): boolean;

package/dist/runtime/utils/notifications.js

@@ -1,4 +1,8 @@
-import { NOTIFICATION_FILTER_CATEGORIES } from "../constants/notification-types.js";
+import {
+  DEFAULT_NOTIFICATION_FILTERS,
+  NOTIFICATION_FILTER_CATEGORIES
+} from "../constants/notification-types.js";
+import { normalizeNotificationKind } from "./notification-api.js";
 export function flattenNotifications(groups) {
   return groups.flatMap((group) => group.notifications);
 }
@@ -23,11 +27,19 @@ export function getInBadgeNotifications(notifications) {
 export function getInBadgeCount(notifications) {
   return getInBadgeNotifications(notifications).length;
 }
+function filterKinds(filter) {
+  if (filter.kinds?.length) {
+    return filter.kinds.map(normalizeNotificationKind);
+  }
+  return (filter.types ?? []).map((type) => normalizeNotificationKind(type));
+}
 export function notificationMatchesFilter(notification, filter) {
-  if (!filter.types?.length) {
+  const kinds = filterKinds(filter);
+  if (!kinds.length) {
     return true;
   }
-  return filter.types.includes(notification.type);
+  const notificationKind = normalizeNotificationKind(notification.kind || notification.type);
+  return kinds.includes(notificationKind);
 }
 export function getTabBadgeCount(notifications, tab) {
   if (tab.unreadOnly || tab.id === "new") {
@@ -36,7 +48,7 @@ export function getTabBadgeCount(notifications, tab) {
   return 0;
 }
 export function getFilterBadgeCount(notifications, filter) {
-  if (!filter.types?.length || filter.id === "all-types") {
+  if (filter.id === "all-types" || !filterKinds(filter).length) {
     return 0;
   }
   return getInBadgeNotifications(notifications).filter(
@@ -51,9 +63,13 @@ export function getScopedNotifications(notifications, tab) {
 }
 export function buildFiltersFromNotifications(notifications, tab) {
   const scoped = getScopedNotifications(notifications, tab);
-  const typesPresent = new Set(scoped.map((notification) => notification.type));
+  const kindsPresent = new Set(
+    scoped.map(
+      (notification) => normalizeNotificationKind(notification.kind || notification.type)
+    )
+  );
   const categories = NOTIFICATION_FILTER_CATEGORIES.filter(
-    (category) => category.types.some((type) => typesPresent.has(type))
+    (category) => category.kinds.some((kind) => kindsPresent.has(normalizeNotificationKind(kind)))
   );
   if (categories.length < 2) {
     return [];
@@ -69,6 +85,37 @@ export function resolveNotificationFilters(notifications, tab, filters) {
   }
   return buildFiltersFromNotifications(notifications, tab);
 }
+export function resolveStickyNotificationFilters({
+  notifications,
+  tab,
+  providedFilters,
+  activeFilterId,
+  stickyFilters
+}) {
+  if (providedFilters?.length) {
+    return {
+      filters: providedFilters,
+      nextStickyFilters: stickyFilters
+    };
+  }
+  const dynamicFilters = buildFiltersFromNotifications(notifications, tab);
+  let nextStickyFilters = stickyFilters;
+  if (activeFilterId === "all-types") {
+    nextStickyFilters = dynamicFilters;
+  } else if (!stickyFilters.length) {
+    nextStickyFilters = dynamicFilters.length ? dynamicFilters : [...DEFAULT_NOTIFICATION_FILTERS];
+  }
+  if (activeFilterId !== "all-types" && nextStickyFilters.length) {
+    return {
+      filters: nextStickyFilters,
+      nextStickyFilters
+    };
+  }
+  return {
+    filters: dynamicFilters.length ? dynamicFilters : nextStickyFilters,
+    nextStickyFilters
+  };
+}
 export function filterHasContent(notifications, filter, tab) {
   const scoped = getScopedNotifications(notifications, tab);
   return scoped.some((notification) => notificationMatchesFilter(notification, filter));
@@ -76,7 +123,10 @@ export function filterHasContent(notifications, filter, tab) {
 export function getVisibleFilters(notifications, filters, tab) {
   return filters.filter((filter) => {
     if (filter.id === "other") {
-      return notifications.some((notification) => notification.type === "unknown");
+      return notifications.some((notification) => {
+        const kind = normalizeNotificationKind(notification.kind || notification.type);
+        return kind === "unknown" || notification.type === "unknown";
+      });
     }
     return true;
   }).filter((filter) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apptegy/nuxt-navigation",
-  "version": "0.1.114",
+  "version": "0.1.116",
   "type": "module",
   "exports": {
     ".": {
@@ -36,20 +36,19 @@
     "primevue": "^4.2.5"
   },
   "devDependencies": {
-    "@nuxt/devtools": "^2.6.2",
-    "@nuxt/eslint-config": "^1.6.0",
-    "@nuxt/module-builder": "^1.0.1",
-    "@nuxt/schema": "^3.17.0",
-    "@nuxt/test-utils": "^3.17.0",
-    "@types/node": "^22.0.0",
-    "eslint": "^9.31.0",
-    "nuxt": "^3.17.0",
+    "@nuxt/devtools": "catalog:",
+    "@nuxt/eslint-config": "catalog:",
+    "@nuxt/module-builder": "catalog:",
+    "@nuxt/schema": "catalog:",
+    "@nuxt/test-utils": "catalog:",
+    "@types/node": "catalog:",
+    "eslint": "catalog:",
+    "nuxt": "catalog:",
     "primevue": "^4.5.4",
-    "sass": "^1.89.2",
-    "typescript": "~5.8.0",
-    "vitest": "^3.2.4",
-    "vue": "^3.5.13",
-    "vue-tsc": "^3.0.3"
-  },
-  "gitHead": "d57420f3128d73ad4ee181b2c437040434c0023c"
+    "sass": "catalog:",
+    "typescript": "catalog:",
+    "vitest": "catalog:",
+    "vue": "catalog:",
+    "vue-tsc": "catalog:"
+  }
 }