@apptegy/nuxt-navigation 0.1.120 → 0.1.122

package/dist/module.json

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

package/dist/module.mjs

@@ -1,6 +1,6 @@
 import { defineNuxtModule, createResolver, addComponentsDir, addImportsDir } from '@nuxt/kit';
 
-const module = defineNuxtModule({
+const module$1 = defineNuxtModule({
   meta: {
     name: "@apptegy/nuxt-navigation",
     compatibility: {
@@ -22,4 +22,4 @@ const module = defineNuxtModule({
   }
 });
 
-export { module as default };
+export { module$1 as default };

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

@@ -3,95 +3,124 @@
     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">"{{ item.summary }}"</span>
     </div>
   </div>
 </template>
@@ -108,6 +137,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 +219,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 +231,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 +342,42 @@ function handleDismiss(event) {
 .notification-item__state-chip {
   margin-top: 8px;
 }
+.notification-item__summary {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 6px;
+  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-flex;
+  flex-wrap: wrap;
+  gap: 2px;
+  flex-shrink: 0;
+}
+.notification-item__reaction {
+  font-size: 14px;
+  line-height: 1;
+}
+.notification-item__summary-on {
+  color: var(--grey-50, #747474);
+}
+.notification-item__summary-text {
+  min-width: 0;
+  font-style: italic;
+  color: var(--grey-70, #4b5563);
+}
 .notification-item__actions {
   display: flex;
   align-items: center;

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

@@ -7,6 +7,7 @@
       v-if="!collapsed"
       class="a-nav-section--link"
       :to="applicationUrl"
+      :target="application.target"
       :aria-label="appText"
     >
       <span v-if="expanded">{{ appText }}</span>

package/dist/runtime/composables/useSidebar.d.ts

@@ -1,5 +1,5 @@
 export declare function useSidebar(): {
-    state: import("vue").Ref<boolean, boolean>;
+    state: any;
     toggleSidebar: () => void;
     sidebarWidth: import("vue").ComputedRef<"264px" | "0px">;
 };

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

@@ -3,6 +3,7 @@ export interface IApplication {
     text: string;
     url: string;
     img_src: string;
+    target?: string;
 }
 export interface IUser {
     show: boolean;
@@ -11,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, INotificationApiRoom, INotificationApiRecord, INotificationsPagination, INotificationsApiResponse, INotificationActor, INotificationItem, INotificationGroup, INotificationTab, INotificationFilter, INotificationsPanelData, INotificationsHeaderModel, } from './notifications.js';

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

@@ -5,6 +5,11 @@ export interface INotificationApiActor {
     first_name: string;
     last_name: string;
 }
+export interface INotificationApiRoom {
+    id?: string;
+    sis_id?: string;
+    name: string;
+}
 export interface INotificationApiRecord {
     id: number | string;
     /**
@@ -14,7 +19,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;
+    /** Room associated with the notification; `name` is shown in the meta line. */
+    room?: INotificationApiRoom | null;
     actors?: INotificationApiActor[] | null;
     detail_link?: string | null;
     notification_state: NotificationApiState | string;
@@ -58,7 +71,12 @@ export interface INotificationItem {
      * Derived from API `last_activity_at`, falling back to `created_at`.
      */
     createdAt?: string;
+    /** Room name shown after the relative timestamp (e.g. "Staff Lounge"). */
     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';
+/**
+ * Expand `reaction_counts` into a list of emojis (one entry per count).
+ * Unknown reaction 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;

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

@@ -15,6 +15,31 @@ 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;
+    }
+    for (let i = 0; i < Math.floor(safeCount); i += 1) {
+      emojis.push(emoji);
+    }
+  }
+  return emojis;
+}
 export const DEFAULT_NOTIFICATION_TABS = [
   { id: "new", label: "New", unreadOnly: true },
   { id: "all", label: "All" }
@@ -46,6 +71,8 @@ export function mapNotificationApiRecord(record, options) {
   const state = record.notification_state;
   const type = mapSourceRecordType(record.source_record_type);
   const activityAt = resolveNotificationActivityAt(record);
+  const summary = record.summary?.trim() || void 0;
+  const reactionEmojis = mapReactionCountsToEmojis(record.reaction_counts);
   return {
     id: String(record.id),
     type,
@@ -61,7 +88,9 @@ export function mapNotificationApiRecord(record, options) {
       }
     }),
     createdAt: activityAt,
-    contextLabel: record.summary,
+    contextLabel: record.room?.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.1.120",
+  "version": "0.1.122",
   "type": "module",
   "exports": {
     ".": {