@apptegy/nuxt-navigation 0.2.6-alpha.0 → 0.2.8

package/dist/module.json

@@ -4,7 +4,7 @@
     "nuxt": ">=3.0.0"
   },
   "configKey": "@apptegy/nuxt-navigation",
-  "version": "0.2.6-alpha.0",
+  "version": "0.2.8",
   "builder": {
     "@nuxt/module-builder": "1.0.1",
     "unbuild": "unknown"

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

@@ -200,7 +200,7 @@ const notificationsPanel = computed(() => {
     return null;
   }
   return mapNotificationsApiResponse(notificationsResponse.value, {
-    locale: nuxtApp.$intl.locale,
+    locale: $intl.locale,
     dateLabels: notificationDateLabels.value,
     retentionLabel: $t("navigation.notificationsPanel.retentionLabel"),
     tabs: [
@@ -216,6 +216,9 @@ function patchNotifications(patch) {
   }
   emit("update:notifications", {
     ...props.notifications,
+    panelOpen: panelOpen.value,
+    activeTabId: activeTabId.value,
+    activeFilterId: activeFilterId.value,
     ...patch
   });
 }

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

@@ -3,95 +3,127 @@
     class="notification-item"
     :class="{ 'notification-item--in-badge': showBadgeActions }"
   >
-    <div
-      class="notification-item__main"
-      role="button"
-      tabindex="0"
-      @click="handleClick"
-      @keydown.enter.prevent="handleClick"
-    >
+    <div class="notification-item__header">
       <div
-        class="notification-item__avatar"
-        :style="{ '--type-accent': typeAccent }"
+        class="notification-item__main"
+        role="button"
+        tabindex="0"
+        @click="handleClick"
+        @keydown.enter.prevent="handleClick"
       >
-        <div class="notification-item__avatar-ring">
-          <NavAvatar
-            :name="primaryActor.name"
-            :src="primaryActor.avatarUrl"
-            class="notification-item__avatar-image"
+        <div
+          class="notification-item__avatar"
+          :style="{ '--type-accent': typeAccent }"
+        >
+          <div class="notification-item__avatar-ring">
+            <NavAvatar
+              :name="primaryActor.name"
+              :src="primaryActor.avatarUrl"
+              class="notification-item__avatar-image"
+            />
+          </div>
+          <span
+            v-if="groupBadgeLabel"
+            class="notification-item__group-badge"
+            aria-hidden="true"
+          >
+            {{ groupBadgeLabel }}
+          </span>
+          <span
+            v-else
+            class="notification-item__type-badge"
+            aria-hidden="true"
+          >
+            <component :is="typeIcon" />
+          </span>
+        </div>
+
+        <div class="notification-item__content">
+          <p class="notification-item__message">
+            {{ item.actionText }}
+          </p>
+          <p class="notification-item__meta">
+            <span>{{ item.timestampLabel }}</span>
+            <template v-if="item.contextLabel">
+              <span
+                class="notification-item__meta-separator"
+                aria-hidden="true"
+                >·</span
+              >
+              <span>{{ item.contextLabel }}</span>
+            </template>
+          </p>
+          <Tag
+            v-if="item.stateLabel"
+            :value="item.stateLabel"
+            severity="secondary"
+            class="notification-item__state-chip"
           />
         </div>
-        <span
-          v-if="groupBadgeLabel"
-          class="notification-item__group-badge"
-          aria-hidden="true"
-        >
-          {{ groupBadgeLabel }}
-        </span>
-        <span
-          class="notification-item__type-badge"
-          aria-hidden="true"
-        >
-          <component :is="typeIcon" />
-        </span>
       </div>
 
-      <div class="notification-item__content">
-        <p class="notification-item__message">
-          {{ item.actionText }}
-        </p>
-        <p class="notification-item__meta">
-          <span>{{ item.timestampLabel }}</span>
-          <template v-if="item.contextLabel">
-            <span
-              class="notification-item__meta-separator"
-              aria-hidden="true"
-              >·</span
-            >
-            <span>{{ item.contextLabel }}</span>
-          </template>
-        </p>
-        <Tag
-          v-if="item.stateLabel"
-          :value="item.stateLabel"
-          severity="secondary"
-          class="notification-item__state-chip"
+      <div class="notification-item__actions">
+        <span
+          v-if="showBadgeActions"
+          class="notification-item__unread-dot"
+          aria-hidden="true"
         />
+        <Button
+          v-if="showBadgeActions"
+          type="button"
+          severity="secondary"
+          text
+          rounded
+          class="notification-item__dismiss"
+          :aria-label="$t('navigation.notificationsPanel.dismiss')"
+          @click="handleDismiss"
+        >
+          <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="M18 6 6 18" />
+            <path d="m6 6 12 12" />
+          </svg>
+        </Button>
       </div>
     </div>
 
-    <div class="notification-item__actions">
-      <span
-        v-if="showBadgeActions"
-        class="notification-item__unread-dot"
-        aria-hidden="true"
-      />
-      <Button
-        v-if="showBadgeActions"
-        type="button"
-        severity="secondary"
-        text
-        rounded
-        class="notification-item__dismiss"
-        :aria-label="$t('navigation.notificationsPanel.dismiss')"
-        @click="handleDismiss"
-      >
-        <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"
+    <div
+      v-if="item.summary"
+      class="notification-item__summary"
+      role="button"
+      tabindex="0"
+      @click="handleClick"
+      @keydown.enter.prevent="handleClick"
+    >
+      <template v-if="reactionEmojis.length">
+        <span
+          class="notification-item__reactions"
           aria-hidden="true"
         >
-          <path d="M18 6 6 18" />
-          <path d="m6 6 12 12" />
-        </svg>
-      </Button>
+          <span
+            v-for="(emoji, index) in reactionEmojis"
+            :key="`${emoji}-${index}`"
+            class="notification-item__reaction"
+          >{{ emoji }}</span>
+        </span>
+        <span class="notification-item__summary-on">
+          {{ " " }}{{ $t("navigation.notificationsPanel.summaryOn") }}{{ " " }}
+        </span>
+      </template>
+      <span class="notification-item__summary-text">
+        <template v-if="reactionEmojis.length">"{{ item.summary }}"</template>
+        <template v-else>{{ item.summary }}</template>
+      </span>
     </div>
   </div>
 </template>
@@ -108,6 +140,7 @@ const emit = defineEmits(["dismiss", "select"]);
 const primaryActor = computed(() => props.item.actors[0] || { name: "" });
 const typeAccent = computed(() => getTypeAccent(props.item.type));
 const showBadgeActions = computed(() => isInBadge(props.item));
+const reactionEmojis = computed(() => props.item.reactionEmojis ?? []);
 const groupBadgeLabel = computed(() => {
   const count = props.item.groupCount ?? Math.max(props.item.actors.length - 1, 0);
   return count > 0 ? `+${count}` : "";
@@ -189,10 +222,8 @@ function handleDismiss(event) {
 
 <style scoped>
 .notification-item {
-  display: grid;
-  grid-template-columns: 1fr auto;
-  gap: 12px;
-  align-items: start;
+  display: flex;
+  flex-direction: column;
   width: 100%;
   padding: 12px;
   border: 1px solid rgb(232, 232, 236);
@@ -203,6 +234,12 @@ function handleDismiss(event) {
   box-shadow: none;
   transition: border-color 0.15s ease, box-shadow 0.15s ease;
 }
+.notification-item__header {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: 12px;
+  align-items: start;
+}
 .notification-item__main {
   display: grid;
   grid-template-columns: auto 1fr;
@@ -308,6 +345,38 @@ function handleDismiss(event) {
 .notification-item__state-chip {
   margin-top: 8px;
 }
+.notification-item__summary {
+  margin-top: 12px;
+  padding-top: 12px;
+  border-top: 1px solid rgb(232, 232, 236);
+  cursor: pointer;
+  font-size: 13px;
+  line-height: 18px;
+  color: var(--grey-70, #4b5563);
+}
+.notification-item__summary:focus-visible {
+  outline: 2px solid var(--purple-60, #662e80);
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+.notification-item__reactions {
+  display: inline;
+  white-space: nowrap;
+}
+.notification-item__reaction {
+  font-size: 14px;
+  line-height: 1;
+}
+.notification-item__summary-on {
+  margin-inline: 0.25em;
+  color: var(--grey-50, #747474);
+}
+.notification-item__summary-text {
+  font-style: italic;
+  color: var(--grey-70, #4b5563);
+  white-space: normal;
+  overflow-wrap: anywhere;
+}
 .notification-item__actions {
   display: flex;
   align-items: center;

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

@@ -81,7 +81,7 @@ const isBeaconNavEnabled = computed(() => {
 }
 .a-navbar-item.classic .icon-container .icon {
   font-size: 24px;
-  margin-right: 24px;
+  margin-right: 12px;
   margin-left: 8px;
 }
 .a-navbar-item.beacon {

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

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

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

@@ -5,6 +5,15 @@ export interface INotificationApiActor {
     first_name: string;
     last_name: string;
 }
+export interface INotificationApiDetailObject {
+    resource_type?: string | null;
+    resource_id?: string | null;
+    parent_type?: string | null;
+    parent_id?: string | null;
+    /** Parent display name (e.g. course/room); shown in the meta line. */
+    parent_name?: string | null;
+    ward_ids?: string[] | null;
+}
 export interface INotificationApiRecord {
     id: number | string;
     /**
@@ -14,7 +23,15 @@ export interface INotificationApiRecord {
     kind?: string | null;
     source_record_type: string;
     title: string;
-    summary?: string;
+    /** Post/body preview shown in the card summary row. */
+    summary?: string | null;
+    /**
+     * Reaction tallies for aggregate reaction notifications (e.g. `{ CLAP: 2, LIKE: 1 }`).
+     * When present, corresponding emojis are shown beside the summary.
+     */
+    reaction_counts?: Record<string, number> | null;
+    /** Navigation/context payload; `parent_name` is shown in the meta line. */
+    detail_object?: INotificationApiDetailObject | null;
     actors?: INotificationApiActor[] | null;
     detail_link?: string | null;
     notification_state: NotificationApiState | string;
@@ -58,7 +75,12 @@ export interface INotificationItem {
      * Derived from API `last_activity_at`, falling back to `created_at`.
      */
     createdAt?: string;
+    /** Parent name shown after the relative timestamp (e.g. "Algebra I"). */
     contextLabel?: string;
+    /** Post/body preview shown in the card summary row. */
+    summary?: string;
+    /** Emoji list derived from API `reaction_counts`, shown before the summary when present. */
+    reactionEmojis?: 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. */

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

@@ -1,5 +1,10 @@
 import type { INotificationApiActor, INotificationApiRecord, INotificationGroup, INotificationItem, INotificationsApiResponse, INotificationsPanelData, INotificationTab, NotificationType } from '../types/index.js';
 import { type INotificationDateLabels } from './notification-dates.js';
+/**
+ * Map `reaction_counts` to unique display emojis (one per reaction type).
+ * Count is ignored beyond requiring it to be >= 1. Unknown keys are skipped.
+ */
+export declare function mapReactionCountsToEmojis(reactionCounts: Record<string, number> | null | undefined): string[];
 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;
@@ -14,6 +19,11 @@ export declare function mapNotificationApiActor(actor: INotificationApiActor): {
     name: string;
     avatarUrl: string | undefined;
 };
+export declare const NOTIFICATION_SUMMARY_MAX_LENGTH = 200;
+/**
+ * Collapse whitespace/newlines into a single line and truncate for card display.
+ */
+export declare function formatNotificationSummary(summary: string | null | undefined, maxLength?: number): string | undefined;
 export declare function mapNotificationApiRecord(record: INotificationApiRecord, options: {
     locale?: string;
     dateLabels: INotificationDateLabels;

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

@@ -15,6 +15,29 @@ const SOURCE_RECORD_TYPE_MAP = {
   "school-post": "school-post",
   system: "system"
 };
+const REACTION_EMOJI_MAP = {
+  clap: "\u{1F44F}",
+  like: "\u{1F44D}",
+  heart: "\u2764\uFE0F",
+  dislike: "\u{1F44E}",
+  laugh: "\u{1F602}",
+  wow: "\u{1F62E}"
+};
+export function mapReactionCountsToEmojis(reactionCounts) {
+  if (!reactionCounts) {
+    return [];
+  }
+  const emojis = [];
+  for (const [key, count] of Object.entries(reactionCounts)) {
+    const emoji = REACTION_EMOJI_MAP[key.toLowerCase()];
+    const safeCount = Number(count);
+    if (!emoji || !Number.isFinite(safeCount) || safeCount < 1) {
+      continue;
+    }
+    emojis.push(emoji);
+  }
+  return emojis;
+}
 export const DEFAULT_NOTIFICATION_TABS = [
   { id: "new", label: "New", unreadOnly: true },
   { id: "all", label: "All" }
@@ -42,10 +65,26 @@ export function mapNotificationApiActor(actor) {
     avatarUrl: actor.avatar_url
   };
 }
+export const NOTIFICATION_SUMMARY_MAX_LENGTH = 200;
+export function formatNotificationSummary(summary, maxLength = NOTIFICATION_SUMMARY_MAX_LENGTH) {
+  if (!summary) {
+    return void 0;
+  }
+  const normalized = summary.replace(/\s+/g, " ").trim();
+  if (!normalized) {
+    return void 0;
+  }
+  if (normalized.length <= maxLength) {
+    return normalized;
+  }
+  return `${normalized.slice(0, maxLength).trimEnd()}\u2026`;
+}
 export function mapNotificationApiRecord(record, options) {
   const state = record.notification_state;
   const type = mapSourceRecordType(record.source_record_type);
   const activityAt = resolveNotificationActivityAt(record);
+  const summary = formatNotificationSummary(record.summary);
+  const reactionEmojis = mapReactionCountsToEmojis(record.reaction_counts);
   return {
     id: String(record.id),
     type,
@@ -61,7 +100,9 @@ export function mapNotificationApiRecord(record, options) {
       }
     }),
     createdAt: activityAt,
-    contextLabel: record.summary,
+    contextLabel: record.detail_object?.parent_name?.trim() || void 0,
+    summary,
+    reactionEmojis: reactionEmojis.length > 0 ? reactionEmojis : void 0,
     dismissed: state === "dismissed",
     read: state === "read",
     unread: state === "unread",

package/locale/en.json

@@ -30,6 +30,7 @@
       "close": "Close notifications",
       "loading": "Loading notifications...",
       "empty": "You're all caught up.",
+      "summaryOn": "on",
       "justNow": "just now",
       "yesterday": "Yesterday",
       "dateGroups": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apptegy/nuxt-navigation",
-  "version": "0.2.6-alpha.0",
+  "version": "0.2.8",
   "type": "module",
   "exports": {
     ".": {
@@ -51,5 +51,5 @@
     "vue": "^3.5.13",
     "vue-tsc": "^3.0.3"
   },
-  "gitHead": "ce910a874098afaf175f6ac9564823a84980d606"
+  "gitHead": "58c15c01250814b62a3afb2b260d93b63af3a53e"
 }