@apptegy/nuxt-navigation 0.1.118 → 0.1.119

package/dist/module.json

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

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

@@ -70,8 +70,10 @@
               :loading="notificationsLoading"
               :active-tab-id="activeTabId"
               :active-filter-id="activeFilterId"
+              :filter-catalog="filterCatalog"
               @update:active-tab-id="handleTabChange"
               @update:active-filter-id="handleFilterChange"
+              @update:filter-catalog="filterCatalog = $event"
               @clear-all="(payload) => $emit('notifications-clear-all', payload)"
               @dismiss="(payload) => $emit('notifications-dismiss', payload)"
               @select="handleNotificationSelect"
@@ -90,8 +92,10 @@
               :loading="notificationsLoading"
               :active-tab-id="activeTabId"
               :active-filter-id="activeFilterId"
+              :filter-catalog="filterCatalog"
               @update:active-tab-id="handleTabChange"
               @update:active-filter-id="handleFilterChange"
+              @update:filter-catalog="filterCatalog = $event"
               @clear-all="(payload) => $emit('notifications-clear-all', payload)"
               @dismiss="(payload) => $emit('notifications-dismiss', payload)"
               @select="handleNotificationSelect"
@@ -173,6 +177,7 @@ const notificationsLoading = computed(() => props.notifications?.loading ?? fals
 const panelOpen = ref(props.notifications?.panelOpen ?? false);
 const activeTabId = ref(props.notifications?.activeTabId || "new");
 const activeFilterId = ref(props.notifications?.activeFilterId || "all-types");
+const filterCatalog = ref([]);
 const popoverPt = {
   content: {
     class: "notifications-popover__content",
@@ -236,16 +241,8 @@ watch(
   }
 );
 watch(panelOpen, (value) => {
-  if (value) {
-    patchNotifications({ panelOpen: true });
-    return;
-  }
-  activeFilterId.value = "all-types";
-  patchNotifications({
-    panelOpen: false,
-    activeFilterId: "all-types"
-  });
-  if (!isMobilePanel.value) {
+  patchNotifications({ panelOpen: value });
+  if (!value && !isMobilePanel.value) {
     popoverRef.value?.hide();
   }
 });

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

@@ -212,14 +212,18 @@ const props = defineProps({
   loading: { type: Boolean, required: false, default: false },
   activeTabId: { type: String, required: false },
   activeFilterId: { type: String, required: false },
+  filterCatalog: { type: Array, required: false, default: () => [] },
   embedded: { type: Boolean, required: false, default: false },
   mobile: { type: Boolean, required: false, default: false }
 });
-const emit = defineEmits(["update:activeTabId", "update:activeFilterId", "clear-all", "dismiss", "select", "close"]);
+const emit = defineEmits(["update:activeTabId", "update:activeFilterId", "update:filterCatalog", "clear-all", "dismiss", "select", "close"]);
 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([]);
+const stickyFilters = ref([...props.filterCatalog ?? []]);
+function filterCatalogKey(filters) {
+  return filters.map((filter) => filter.id).join("|");
+}
 watch(
   () => props.activeTabId,
   (value) => {
@@ -236,6 +240,18 @@ watch(
     }
   }
 );
+watch(
+  () => props.filterCatalog,
+  (catalog) => {
+    if (!catalog?.length) {
+      return;
+    }
+    if (filterCatalogKey(stickyFilters.value) !== filterCatalogKey(catalog)) {
+      stickyFilters.value = [...catalog];
+    }
+  },
+  { deep: true }
+);
 watch(
   () => props.data.tabs,
   (tabs) => {
@@ -250,9 +266,6 @@ const usesDynamicFilters = computed(() => !props.data.filters?.length);
 const activeTab = computed(
   () => props.data.tabs.find((tab) => tab.id === activeTabId.value)
 );
-function filterCatalogKey(filters) {
-  return filters.map((filter) => filter.id).join("|");
-}
 watch(
   [allNotifications, activeTab, activeFilterId, () => props.data.filters],
   () => {
@@ -265,6 +278,7 @@ watch(
     });
     if (filterCatalogKey(stickyFilters.value) !== filterCatalogKey(nextStickyFilters)) {
       stickyFilters.value = nextStickyFilters;
+      emit("update:filterCatalog", [...nextStickyFilters]);
     }
   },
   { immediate: true, deep: true }

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

@@ -1,9 +1,14 @@
-import type { INotificationsPanelData } from '../../types/index.js';
+import type { INotificationsPanelData, INotificationFilter } from '../../types/index.js';
 type __VLS_Props = {
     data: INotificationsPanelData;
     loading?: boolean;
     activeTabId?: string;
     activeFilterId?: string;
+    /**
+     * Last "all types" pill catalog, owned by the header so it survives panel remount.
+     * Lets a kind filter stay selected on reopen without inventing the full default catalog.
+     */
+    filterCatalog?: INotificationFilter[];
     embedded?: boolean;
     mobile?: boolean;
 };
@@ -15,6 +20,7 @@ declare const _default: import("vue").DefineComponent<__VLS_Props, void, {}, {},
     }) => any;
     "update:activeTabId": (id: string) => any;
     "update:activeFilterId": (id: string) => any;
+    "update:filterCatalog": (filters: INotificationFilter[]) => any;
     "clear-all": (payload: {
         groupId: string;
         tabId: string;
@@ -34,6 +40,7 @@ declare const _default: import("vue").DefineComponent<__VLS_Props, void, {}, {},
     }) => any) | undefined;
     "onUpdate:activeTabId"?: ((id: string) => any) | undefined;
     "onUpdate:activeFilterId"?: ((id: string) => any) | undefined;
+    "onUpdate:filterCatalog"?: ((filters: INotificationFilter[]) => any) | undefined;
     "onClear-all"?: ((payload: {
         groupId: string;
         tabId: string;
@@ -47,6 +54,7 @@ declare const _default: import("vue").DefineComponent<__VLS_Props, void, {}, {},
     onClose?: (() => any) | undefined;
 }>, {
     loading: boolean;
+    filterCatalog: INotificationFilter[];
     embedded: boolean;
     mobile: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -19,6 +19,11 @@ export interface INotificationApiRecord {
     detail_link?: string | null;
     notification_state: NotificationApiState | string;
     created_at: string;
+    /**
+     * Most recent activity on the notification (e.g. new reaction/comment).
+     * Prefer this over `created_at` for relative time and date grouping.
+     */
+    last_activity_at?: string | null;
 }
 export interface INotificationsPagination {
     page: number;
@@ -48,7 +53,10 @@ export interface INotificationItem {
     actors: INotificationActor[];
     actionText: string;
     timestampLabel: string;
-    /** ISO-8601 timestamp from the API — used to derive group labels and relative time. */
+    /**
+     * ISO-8601 timestamp used for group labels and relative time.
+     * Derived from API `last_activity_at`, falling back to `created_at`.
+     */
     createdAt?: string;
     contextLabel?: string;
     /** When false, the notification counts toward the bell badge and appears in the New tab. */

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

@@ -5,6 +5,11 @@ export declare const DEFAULT_NOTIFICATION_TABS: INotificationTab[];
 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;
+/** Prefer `last_activity_at` for display/grouping; fall back to `created_at`. */
+export declare function resolveNotificationActivityAt(record: {
+    created_at: string;
+    last_activity_at?: string | null;
+}): string;
 export declare function mapNotificationApiActor(actor: INotificationApiActor): {
     name: string;
     avatarUrl: string | undefined;

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

@@ -32,6 +32,9 @@ export function mapNotificationKind(kind, fallbackType) {
   }
   return normalizeNotificationKind(kind) || normalizeNotificationKind(fallbackType);
 }
+export function resolveNotificationActivityAt(record) {
+  return record.last_activity_at || record.created_at;
+}
 export function mapNotificationApiActor(actor) {
   const name = [actor.first_name, actor.last_name].filter(Boolean).join(" ").trim();
   return {
@@ -42,13 +45,14 @@ export function mapNotificationApiActor(actor) {
 export function mapNotificationApiRecord(record, options) {
   const state = record.notification_state;
   const type = mapSourceRecordType(record.source_record_type);
+  const activityAt = resolveNotificationActivityAt(record);
   return {
     id: String(record.id),
     type,
     kind: mapNotificationKind(record.kind, type),
     actors: (record.actors ?? []).map(mapNotificationApiActor),
     actionText: record.title,
-    timestampLabel: formatNotificationTimeAgo(record.created_at, {
+    timestampLabel: formatNotificationTimeAgo(activityAt, {
       locale: options.locale,
       now: options.now,
       labels: {
@@ -56,7 +60,7 @@ export function mapNotificationApiRecord(record, options) {
         yesterdayTimeAgo: options.dateLabels.yesterdayTimeAgo
       }
     }),
-    createdAt: record.created_at,
+    createdAt: activityAt,
     contextLabel: record.summary,
     dismissed: state === "dismissed",
     read: state === "read",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apptegy/nuxt-navigation",
-  "version": "0.1.118",
+  "version": "0.1.119",
   "type": "module",
   "exports": {
     ".": {