@apptegy/nuxt-navigation 0.1.97 → 0.1.99

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

@@ -0,0 +1,79 @@
+export type NotificationType = 'announcement' | 'message' | 'comment' | 'mention' | 'reply' | 'reaction' | 'school-post' | 'system' | 'unknown';
+export type NotificationApiState = 'unread' | 'read' | 'dismissed';
+export interface INotificationApiActor {
+    avatar_url?: string;
+    first_name: string;
+    last_name: string;
+}
+export interface INotificationApiRecord {
+    id: number | string;
+    source_record_type: string;
+    title: string;
+    summary?: string;
+    actors: INotificationApiActor[];
+    detail_link?: string;
+    notification_state: NotificationApiState | string;
+    created_at: string;
+}
+export interface INotificationsPagination {
+    page: number;
+    per_page: number;
+    total_count: number;
+    total_pages: number;
+}
+export interface INotificationsApiResponse {
+    data: INotificationApiRecord[];
+    errors: unknown[];
+    warnings: unknown[];
+    pagination: INotificationsPagination;
+}
+export interface INotificationActor {
+    name: string;
+    avatarUrl?: string;
+}
+export interface INotificationItem {
+    id: string;
+    type: NotificationType;
+    actors: INotificationActor[];
+    actionText: string;
+    timestampLabel: string;
+    /** ISO-8601 timestamp from the API — used to derive group labels and relative time. */
+    createdAt?: string;
+    contextLabel?: string;
+    /** When false, the notification counts toward the bell badge and appears in the New tab. */
+    dismissed?: boolean;
+    /** Read receipt — announcement and message types only. */
+    read?: boolean;
+    /** Optional edge-case state chip shown at the bottom of the card. */
+    stateLabel?: string;
+    href?: string;
+    groupCount?: number;
+    /** @deprecated Use dismissed instead. Kept for backward compatibility. */
+    unread?: boolean;
+}
+export interface INotificationGroup {
+    id: string;
+    label: string;
+    notifications: INotificationItem[];
+}
+export interface INotificationTab {
+    id: string;
+    label: string;
+    count?: number;
+    /** When true, only in-badge notifications are shown for this tab. */
+    unreadOnly?: boolean;
+}
+export interface INotificationFilter {
+    id: string;
+    label: string;
+    count?: number;
+    /** Notification types included in this filter. Omit or leave empty to include all types. */
+    types?: NotificationType[];
+}
+export interface INotificationsPanelData {
+    retentionLabel?: string;
+    tabs: INotificationTab[];
+    /** Optional — when omitted, filter pills are derived from notification results. */
+    filters?: INotificationFilter[];
+    groups: INotificationGroup[];
+}

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

@@ -0,0 +1,26 @@
+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[];
+export declare function mapSourceRecordType(sourceRecordType: string): NotificationType;
+export declare function mapNotificationApiActor(actor: INotificationApiActor): {
+    name: string;
+    avatarUrl: string | undefined;
+};
+export declare function mapNotificationApiRecord(record: INotificationApiRecord, options: {
+    locale?: string;
+    dateLabels: INotificationDateLabels;
+    now?: Date;
+}): INotificationItem;
+export declare function groupNotificationItems(items: INotificationItem[], options: {
+    locale?: string;
+    dateLabels: INotificationDateLabels;
+    now?: Date;
+}): INotificationGroup[];
+export declare function mapNotificationsApiResponse(response: INotificationsApiResponse, options: {
+    locale?: string;
+    dateLabels: INotificationDateLabels;
+    retentionLabel?: string;
+    tabs?: INotificationTab[];
+    now?: Date;
+}): INotificationsPanelData;
+export declare function getNotificationsTotalCount(response: INotificationsApiResponse | null | undefined): number;

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

@@ -0,0 +1,83 @@
+import {
+  compareNotificationDateGroups,
+  formatNotificationGroupLabel,
+  formatNotificationTimeAgo,
+  getNotificationDateGroupKey
+} from "./notification-dates.js";
+const SOURCE_RECORD_TYPE_MAP = {
+  announcement: "announcement",
+  message: "message",
+  comment: "comment",
+  mention: "mention",
+  reply: "reply",
+  reaction: "reaction",
+  school_post: "school-post",
+  "school-post": "school-post",
+  system: "system"
+};
+export const DEFAULT_NOTIFICATION_TABS = [
+  { id: "new", label: "New", unreadOnly: true },
+  { id: "all", label: "All" }
+];
+export function mapSourceRecordType(sourceRecordType) {
+  return SOURCE_RECORD_TYPE_MAP[sourceRecordType] ?? "unknown";
+}
+export function mapNotificationApiActor(actor) {
+  const name = [actor.first_name, actor.last_name].filter(Boolean).join(" ").trim();
+  return {
+    name: name || "Unknown",
+    avatarUrl: actor.avatar_url
+  };
+}
+export function mapNotificationApiRecord(record, options) {
+  const state = record.notification_state;
+  return {
+    id: String(record.id),
+    type: mapSourceRecordType(record.source_record_type),
+    actors: record.actors.map(mapNotificationApiActor),
+    actionText: record.title,
+    timestampLabel: formatNotificationTimeAgo(record.created_at, {
+      locale: options.locale,
+      now: options.now,
+      labels: {
+        justNow: options.dateLabels.justNow,
+        yesterday: options.dateLabels.yesterdayTimeAgo
+      }
+    }),
+    createdAt: record.created_at,
+    contextLabel: record.summary,
+    dismissed: state === "dismissed",
+    read: state === "read",
+    unread: state === "unread",
+    href: record.detail_link
+  };
+}
+export function groupNotificationItems(items, options) {
+  const groups = /* @__PURE__ */ new Map();
+  for (const item of items) {
+    const createdAt = item.createdAt;
+    if (!createdAt) {
+      continue;
+    }
+    const groupKey = getNotificationDateGroupKey(createdAt, options.now);
+    const bucket = groups.get(groupKey) ?? [];
+    bucket.push(item);
+    groups.set(groupKey, bucket);
+  }
+  return [...groups.entries()].sort(([a], [b]) => compareNotificationDateGroups(a, b)).map(([groupKey, notifications]) => ({
+    id: groupKey,
+    label: formatNotificationGroupLabel(groupKey, options.dateLabels, options.locale),
+    notifications
+  }));
+}
+export function mapNotificationsApiResponse(response, options) {
+  const items = response.data.map((record) => mapNotificationApiRecord(record, options));
+  return {
+    retentionLabel: options.retentionLabel,
+    tabs: options.tabs ?? DEFAULT_NOTIFICATION_TABS,
+    groups: groupNotificationItems(items, options)
+  };
+}
+export function getNotificationsTotalCount(response) {
+  return response?.pagination?.total_count ?? 0;
+}

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

@@ -0,0 +1,15 @@
+export interface INotificationDateLabels {
+    today: string;
+    yesterday: string;
+    yesterdayTimeAgo: string;
+    justNow: string;
+}
+/** Calendar bucket id used to group notifications (today, yesterday, or YYYY-MM-DD). */
+export declare function getNotificationDateGroupKey(createdAt: string, now?: Date): string;
+export declare function compareNotificationDateGroups(a: string, b: string): number;
+export declare function formatNotificationGroupLabel(groupKey: string, labels: INotificationDateLabels, locale?: string): string;
+export declare function formatNotificationTimeAgo(createdAt: string, options?: {
+    locale?: string;
+    now?: Date;
+    labels?: Pick<INotificationDateLabels, 'justNow' | 'yesterdayTimeAgo'>;
+}): string;

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

@@ -0,0 +1,81 @@
+function startOfDay(date) {
+  const value = new Date(date);
+  value.setHours(0, 0, 0, 0);
+  return value;
+}
+export function getNotificationDateGroupKey(createdAt, now = /* @__PURE__ */ new Date()) {
+  const created = new Date(createdAt);
+  const today = startOfDay(now);
+  const yesterday = new Date(today);
+  yesterday.setDate(yesterday.getDate() - 1);
+  const createdDay = startOfDay(created);
+  if (createdDay.getTime() === today.getTime()) {
+    return "today";
+  }
+  if (createdDay.getTime() === yesterday.getTime()) {
+    return "yesterday";
+  }
+  const year = createdDay.getFullYear();
+  const month = String(createdDay.getMonth() + 1).padStart(2, "0");
+  const day = String(createdDay.getDate()).padStart(2, "0");
+  return `${year}-${month}-${day}`;
+}
+const GROUP_SORT_ORDER = {
+  today: 0,
+  yesterday: 1
+};
+export function compareNotificationDateGroups(a, b) {
+  const orderA = GROUP_SORT_ORDER[a] ?? 2;
+  const orderB = GROUP_SORT_ORDER[b] ?? 2;
+  if (orderA !== orderB) {
+    return orderA - orderB;
+  }
+  if (orderA === 2 && orderB === 2) {
+    return b.localeCompare(a);
+  }
+  return 0;
+}
+export function formatNotificationGroupLabel(groupKey, labels, locale = "en") {
+  if (groupKey === "today") {
+    return labels.today;
+  }
+  if (groupKey === "yesterday") {
+    return labels.yesterday;
+  }
+  const date = /* @__PURE__ */ new Date(`${groupKey}T12:00:00`);
+  return date.toLocaleDateString(locale, { month: "long", day: "numeric" }).toUpperCase();
+}
+export function formatNotificationTimeAgo(createdAt, options = {}) {
+  const now = options.now ?? /* @__PURE__ */ new Date();
+  const created = new Date(createdAt);
+  const locale = options.locale ?? "en";
+  const labels = {
+    justNow: options.labels?.justNow ?? "just now",
+    yesterday: options.labels?.yesterdayTimeAgo ?? "Yesterday"
+  };
+  const diffMs = now.getTime() - created.getTime();
+  const diffMinutes = Math.floor(diffMs / 6e4);
+  const diffHours = Math.floor(diffMs / 36e5);
+  const today = startOfDay(now);
+  const createdDay = startOfDay(created);
+  const yesterday = new Date(today);
+  yesterday.setDate(yesterday.getDate() - 1);
+  if (diffMinutes < 1) {
+    return labels.justNow;
+  }
+  const relativeTime = new Intl.RelativeTimeFormat(locale, { numeric: "always" });
+  if (createdDay.getTime() === today.getTime()) {
+    if (diffMinutes < 60) {
+      return relativeTime.format(-diffMinutes, "minute");
+    }
+    return relativeTime.format(-diffHours, "hour");
+  }
+  if (createdDay.getTime() === yesterday.getTime()) {
+    return labels.yesterday;
+  }
+  const diffDays = Math.floor((today.getTime() - createdDay.getTime()) / 864e5);
+  if (diffDays < 7) {
+    return relativeTime.format(-diffDays, "day");
+  }
+  return created.toLocaleDateString(locale, { month: "short", day: "numeric" });
+}

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

@@ -0,0 +1,21 @@
+import type { INotificationFilter, INotificationGroup, INotificationItem, INotificationTab, NotificationType } from '../types/index.js';
+export declare function flattenNotifications(groups: INotificationGroup[]): INotificationItem[];
+/** In-badge notifications (New tab scope): unread only. */
+export declare function isInBadge(notification: INotificationItem): boolean;
+export declare function getInBadgeNotifications(notifications: INotificationItem[]): INotificationItem[];
+export declare function getInBadgeCount(notifications: INotificationItem[]): number;
+export declare function notificationMatchesFilter(notification: INotificationItem, filter: INotificationFilter): boolean;
+export declare function getTabBadgeCount(notifications: INotificationItem[], tab: INotificationTab): number;
+export declare function getFilterBadgeCount(notifications: INotificationItem[], filter: INotificationFilter): number;
+export declare function getScopedNotifications(notifications: INotificationItem[], tab: INotificationTab | undefined): INotificationItem[];
+/**
+ * Builds filter pills from notification results.
+ * Returns an empty array when fewer than 2 categories have content (per NC v2 spec).
+ */
+export declare function buildFiltersFromNotifications(notifications: INotificationItem[], tab: INotificationTab | undefined): INotificationFilter[];
+export declare function resolveNotificationFilters(notifications: INotificationItem[], tab: INotificationTab | undefined, filters?: INotificationFilter[]): 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;
+export declare function formatNotificationCount(count: number): string;
+export declare function getTypeAccent(type: NotificationType): string;

package/dist/runtime/utils/notifications.js

@@ -0,0 +1,117 @@
+import { NOTIFICATION_FILTER_CATEGORIES } from "../constants/notification-types.js";
+export function flattenNotifications(groups) {
+  return groups.flatMap((group) => group.notifications);
+}
+export function isInBadge(notification) {
+  if (notification.dismissed === true) {
+    return false;
+  }
+  if (notification.unread === true) {
+    return true;
+  }
+  if (notification.read === true) {
+    return false;
+  }
+  if (notification.dismissed !== void 0) {
+    return !notification.dismissed;
+  }
+  return notification.unread === true;
+}
+export function getInBadgeNotifications(notifications) {
+  return notifications.filter(isInBadge);
+}
+export function getInBadgeCount(notifications) {
+  return getInBadgeNotifications(notifications).length;
+}
+export function notificationMatchesFilter(notification, filter) {
+  if (!filter.types?.length) {
+    return true;
+  }
+  return filter.types.includes(notification.type);
+}
+export function getTabBadgeCount(notifications, tab) {
+  if (tab.unreadOnly || tab.id === "new") {
+    return getInBadgeCount(notifications);
+  }
+  return 0;
+}
+export function getFilterBadgeCount(notifications, filter) {
+  if (!filter.types?.length || filter.id === "all-types") {
+    return 0;
+  }
+  return getInBadgeNotifications(notifications).filter(
+    (notification) => notificationMatchesFilter(notification, filter)
+  ).length;
+}
+export function getScopedNotifications(notifications, tab) {
+  if (tab?.unreadOnly || tab?.id === "new") {
+    return getInBadgeNotifications(notifications);
+  }
+  return notifications;
+}
+export function buildFiltersFromNotifications(notifications, tab) {
+  const scoped = getScopedNotifications(notifications, tab);
+  const typesPresent = new Set(scoped.map((notification) => notification.type));
+  const categories = NOTIFICATION_FILTER_CATEGORIES.filter(
+    (category) => category.types.some((type) => typesPresent.has(type))
+  );
+  if (categories.length < 2) {
+    return [];
+  }
+  return [
+    { id: "all-types", label: "All types" },
+    ...categories
+  ];
+}
+export function resolveNotificationFilters(notifications, tab, filters) {
+  if (filters?.length) {
+    return filters;
+  }
+  return buildFiltersFromNotifications(notifications, tab);
+}
+export function filterHasContent(notifications, filter, tab) {
+  const scoped = getScopedNotifications(notifications, tab);
+  return scoped.some((notification) => notificationMatchesFilter(notification, filter));
+}
+export function getVisibleFilters(notifications, filters, tab) {
+  return filters.filter((filter) => {
+    if (filter.id === "other") {
+      return notifications.some((notification) => notification.type === "unknown");
+    }
+    return true;
+  }).filter((filter) => {
+    if (filter.id === "all-types") {
+      return true;
+    }
+    return filterHasContent(notifications, filter, tab);
+  });
+}
+export function shouldShowFilterChips(notifications, filters, tab, usesDynamicFilters = false) {
+  if (usesDynamicFilters) {
+    return filters.length > 0;
+  }
+  const categoriesWithContent = filters.filter(
+    (filter) => filter.id !== "all-types" && filter.id !== "other" && filterHasContent(notifications, filter, tab)
+  );
+  return categoriesWithContent.length >= 2;
+}
+export function formatNotificationCount(count) {
+  if (count > 99) {
+    return "99+";
+  }
+  return String(count);
+}
+export function getTypeAccent(type) {
+  const accents = {
+    announcement: "#D67A11",
+    message: "#1372B3",
+    comment: "#139A4F",
+    mention: "#5A2496",
+    reply: "#1372B3",
+    reaction: "#62626E",
+    "school-post": "#1E3FBA",
+    system: "#62626E",
+    unknown: "#62626E"
+  };
+  return accents[type];
+}

package/locale/en.json

@@ -15,6 +15,27 @@
     "userDropdown": "User settings",
     "logoAlt": "Thrillshare - Return Home",
     "brandLogoAlt": "Logo",
-    "website": "School Website"
+    "website": "School Website",
+    "notifications": "Notifications",
+    "notificationsPanel": {
+      "retentionLabel": "Kept 30 days",
+      "tabs": {
+        "new": "New",
+        "all": "All"
+      },
+      "tabsLabel": "Notification views",
+      "scrollFilters": "Scroll filters",
+      "clearAll": "Clear all",
+      "dismiss": "Dismiss notification",
+      "close": "Close notifications",
+      "loading": "Loading notifications...",
+      "empty": "You're all caught up.",
+      "justNow": "just now",
+      "yesterday": "Yesterday",
+      "dateGroups": {
+        "today": "TODAY",
+        "yesterday": "YESTERDAY"
+      }
+    }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apptegy/nuxt-navigation",
-    "version": "0.1.97",
+    "version": "0.1.99",
     "type": "module",
     "exports": {
         ".": {
@@ -32,19 +32,18 @@
         "@vueuse/core": "^12.0.0"
     },
     "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",
-        "sass": "^1.89.2",
-        "typescript": "~5.8.0",
-        "vitest": "^3.2.4",
-        "vue": "^3.5.13",
-        "vue-tsc": "^3.0.3"
-    },
-    "gitHead": "9b9589aa135b0930ffa4c4b6c178520108e9ad7b"
+        "@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:",
+        "sass": "catalog:",
+        "typescript": "catalog:",
+        "vitest": "catalog:",
+        "vue": "catalog:",
+        "vue-tsc": "catalog:"
+    }
 }