@apptegy/nuxt-navigation 0.1.122 → 0.1.124

package/dist/module.json

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

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

@@ -117,10 +117,13 @@
           >{{ emoji }}</span>
         </span>
         <span class="notification-item__summary-on">
-          {{ $t("navigation.notificationsPanel.summaryOn") }}
+          {{ " " }}{{ $t("navigation.notificationsPanel.summaryOn") }}{{ " " }}
         </span>
       </template>
-      <span class="notification-item__summary-text">"{{ item.summary }}"</span>
+      <span class="notification-item__summary-text">
+        <template v-if="reactionEmojis.length">"{{ item.summary }}"</template>
+        <template v-else>{{ item.summary }}</template>
+      </span>
     </div>
   </div>
 </template>
@@ -343,10 +346,6 @@ function handleDismiss(event) {
   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);
@@ -361,22 +360,22 @@ function handleDismiss(event) {
   border-radius: 4px;
 }
 .notification-item__reactions {
-  display: inline-flex;
-  flex-wrap: wrap;
-  gap: 2px;
-  flex-shrink: 0;
+  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 {
-  min-width: 0;
   font-style: italic;
   color: var(--grey-70, #4b5563);
+  white-space: normal;
+  overflow-wrap: anywhere;
 }
 .notification-item__actions {
   display: flex;

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

@@ -19,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

@@ -67,11 +67,25 @@ 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 = record.summary?.trim() || void 0;
+  const summary = formatNotificationSummary(record.summary);
   const reactionEmojis = mapReactionCountsToEmojis(record.reaction_counts);
   return {
     id: String(record.id),

package/package.json

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