@apptegy/nuxt-navigation 0.1.117 → 0.1.119

package/dist/module.json

@@ -4,7 +4,7 @@
     "nuxt": ">=3.0.0"
   },
   "configKey": "@apptegy/nuxt-navigation",
-  "version": "0.1.117",
+  "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",

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

@@ -32,11 +32,21 @@
           :aria-label="$t('navigation.notificationsPanel.close')"
           @click="$emit('close')"
         >
-          <Icon
-            name="lucide:x"
-            size="20"
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="20"
+            height="20"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
             aria-hidden="true"
-          />
+          >
+            <path d="M18 6 6 18" />
+            <path d="m6 6 12 12" />
+          </svg>
         </Button>
       </div>
 
@@ -102,11 +112,20 @@
         :aria-label="$t('navigation.notificationsPanel.scrollFilters')"
         @click="scrollFilters"
       >
-        <Icon
-          name="lucide:chevron-right"
-          size="16"
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
           aria-hidden="true"
-        />
+        >
+          <path d="m9 18 6-6-6-6" />
+        </svg>
       </Button>
     </div>
 
@@ -193,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) => {
@@ -217,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) => {
@@ -231,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],
   () => {
@@ -246,6 +278,7 @@ watch(
     });
     if (filterCatalogKey(stickyFilters.value) !== filterCatalogKey(nextStickyFilters)) {
       stickyFilters.value = nextStickyFilters;
+      emit("update:filterCatalog", [...nextStickyFilters]);
     }
   },
   { immediate: true, deep: true }
@@ -481,6 +514,11 @@ function scrollFilters() {
   width: 28px;
   height: 28px;
   padding: 0;
+  color: var(--grey-60, #6b7280);
+}
+.notifications-panel__filters-next :deep(svg) {
+  display: block;
+  flex-shrink: 0;
 }
 .notifications-panel__body {
   overflow-y: auto;

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/dist/runtime/utils/notifications.js

@@ -1,7 +1,4 @@
-import {
-  DEFAULT_NOTIFICATION_FILTERS,
-  NOTIFICATION_FILTER_CATEGORIES
-} from "../constants/notification-types.js";
+import { NOTIFICATION_FILTER_CATEGORIES } from "../constants/notification-types.js";
 import { normalizeNotificationKind } from "./notification-api.js";
 export function flattenNotifications(groups) {
   return groups.flatMap((group) => group.notifications);
@@ -103,7 +100,7 @@ export function resolveStickyNotificationFilters({
   if (activeFilterId === "all-types") {
     nextStickyFilters = dynamicFilters;
   } else if (!stickyFilters.length) {
-    nextStickyFilters = dynamicFilters.length ? dynamicFilters : [...DEFAULT_NOTIFICATION_FILTERS];
+    nextStickyFilters = dynamicFilters;
   }
   if (activeFilterId !== "all-types" && nextStickyFilters.length) {
     return {

package/package.json

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