@apptegy/nuxt-navigation 0.1.118 → 0.1.120

package/dist/module.json

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

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

@@ -9,11 +9,13 @@
     </div>
     <slot name="org-select" />
     <slot name="user-controls" />
-    <div class="user-control-actions">
-      <div
-        v-if="showNotifications"
-        class="header__notifications"
-      >
+    <div class="header__end">
+      <slot name="searchbar" />
+      <div class="user-control-actions">
+        <div
+          v-if="showNotifications"
+          class="header__notifications"
+        >
         <Button
           type="button"
           severity="secondary"
@@ -70,8 +72,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 +94,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"
@@ -132,6 +138,7 @@
           />
         </NuxtLink>
       </template>
+      </div>
     </div>
   </header>
 </template>
@@ -173,6 +180,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 +244,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();
   }
 });
@@ -316,10 +316,18 @@ header.header {
   background-color: var(--primary-white);
   font: var(--font-regular);
 }
+header.header .header__end {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 24px;
+  min-width: 0;
+}
 header.header .user-control-actions {
   display: flex;
   align-items: center;
   gap: 8px;
+  flex-shrink: 0;
 }
 header.header .header__notifications {
   position: relative;

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

@@ -17,7 +17,7 @@ interface IUserDropdown {
     userDropdownOptions: Array<unknown>;
 }
 type __VLS_Props = IHeaderProps & IUserDropdown;
-declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {}, __VLS_15: {};
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {}, __VLS_7: {}, __VLS_17: {};
 type __VLS_Slots = {} & {
     breadcrumbs?: (props: typeof __VLS_1) => any;
 } & {
@@ -25,7 +25,9 @@ type __VLS_Slots = {} & {
 } & {
     'user-controls'?: (props: typeof __VLS_5) => any;
 } & {
-    notifications?: (props: typeof __VLS_15) => any;
+    searchbar?: (props: typeof __VLS_7) => any;
+} & {
+    notifications?: (props: typeof __VLS_17) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "selected-option": (...args: any[]) => void;

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.120",
   "type": "module",
   "exports": {
     ".": {