@memberjunction/ng-explorer-core 6.2.0-edge.5 → 6.2.0-edge.7

package/dist/lib/user-notifications/user-notifications.component.js

@@ -1,4 +1,4 @@
-import { Component, ChangeDetectorRef, inject } from '@angular/core';
+import { Component, ChangeDetectorRef, NgZone, inject } from '@angular/core';
 import { SharedService } from '@memberjunction/ng-shared';
 import { MJUserNotificationEntity, UserInfoEngine } from '@memberjunction/core-entities';
 import { CompositeKey } from '@memberjunction/core';
@@ -368,6 +368,7 @@ export class UserNotificationsComponent extends BaseAngularComponent {
     navigationService;
     appManager;
     cdr = inject(ChangeDetectorRef);
+    ngZone = inject(NgZone, { optional: true });
     RadioSelected = 'All';
     /** @deprecated Use {@link RadioSelected}. */
     get radioSelected() {
@@ -436,13 +437,34 @@ export class UserNotificationsComponent extends BaseAngularComponent {
     async ngOnInit() {
         this.loadNotificationTypes();
         // Refresh the snapshot relative-time labels between change-detection passes.
-        this.relativeTimer = setInterval(() => {
-            for (const vm of this.vmCache.values()) {
-                vm.Relative = this.relativeTime(vm.N.__mj_CreatedAt);
-            }
-            this.groupsKey = ''; // day buckets can shift at midnight
-            this.cdr.markForCheck();
-        }, RELATIVE_REFRESH_MS);
+        // Run outside NgZone so the 60s timer only triggers Angular CD when a label actually changes.
+        const startTimer = () => {
+            this.relativeTimer = setInterval(() => {
+                let anyChanged = false;
+                for (const vm of this.vmCache.values()) {
+                    const next = this.relativeTime(vm.N.__mj_CreatedAt);
+                    if (vm.Relative !== next) {
+                        vm.Relative = next;
+                        anyChanged = true;
+                    }
+                }
+                this.groupsKey = ''; // day buckets can shift at midnight
+                if (anyChanged) {
+                    if (this.ngZone) {
+                        this.ngZone.run(() => this.cdr.markForCheck());
+                    }
+                    else {
+                        this.cdr.markForCheck();
+                    }
+                }
+            }, RELATIVE_REFRESH_MS);
+        };
+        if (this.ngZone) {
+            this.ngZone.runOutsideAngular(startTimer);
+        }
+        else {
+            startTimer();
+        }
     }
     ngAfterViewInit() {
         this.SharedService.InvokeManualResize(); // make sure the notifications component is sized correctly
@@ -468,17 +490,38 @@ export class UserNotificationsComponent extends BaseAngularComponent {
     // ========================================================================
     // Data shaping (filter → view models → day groups)
     // ========================================================================
+    notificationsToShowCache = [];
+    notificationsToShowKey = '';
+    unreadNotificationsCache = [];
+    unreadNotificationsKey = '';
+    readNotificationsCache = [];
+    readNotificationsKey = '';
+    computeAllNotificationsSignature() {
+        const all = this.AllNotifications;
+        let unreadCount = 0;
+        for (let i = 0; i < all.length; i++) {
+            if (all[i].Unread)
+                unreadCount++;
+        }
+        const baseKey = `${all.length}|${unreadCount}|${all[0]?.ID ?? ''}|${all[all.length - 1]?.ID ?? ''}`;
+        return { all, unreadCount, baseKey };
+    }
     get NotificationsToShow() {
+        const { all, baseKey } = this.computeAllNotificationsSignature();
+        const key = `${baseKey}|${this.RadioSelected}|${this.SelectedTypeFilter ?? ''}|${this.CurrentFilter}`;
+        if (key === this.notificationsToShowKey) {
+            return this.notificationsToShowCache;
+        }
         let temp = [];
         switch (this.RadioSelected) {
             case 'All':
-                temp = this.AllNotifications;
+                temp = all;
                 break;
             case 'Unread':
-                temp = this.AllNotifications.filter(n => n.Unread);
+                temp = all.filter(n => n.Unread);
                 break;
             case 'Read':
-                temp = this.AllNotifications.filter(n => !n.Unread);
+                temp = all.filter(n => !n.Unread);
                 break;
         }
         // Apply type filter if selected
@@ -486,24 +529,26 @@ export class UserNotificationsComponent extends BaseAngularComponent {
             temp = temp.filter(n => UUIDsEqual(n.NotificationTypeID, this.SelectedTypeFilter));
         }
         // Apply text filter if it is not empty
-        if (this.CurrentFilter.trim().length > 0) {
+        const filterLower = this.CurrentFilter.trim().toLowerCase();
+        if (filterLower.length > 0) {
             // check for inclusion of filter value in title or message
-            temp = temp.filter(n => n.Title?.toLowerCase().includes(this.CurrentFilter.trim().toLowerCase()) ||
-                n.Message?.toLowerCase().includes(this.CurrentFilter.trim().toLowerCase()));
+            temp = temp.filter(n => n.Title?.toLowerCase().includes(filterLower) ||
+                n.Message?.toLowerCase().includes(filterLower));
         }
+        this.notificationsToShowKey = key;
+        this.notificationsToShowCache = temp;
         return temp;
     }
     /**
      * The filtered notifications as render-ready day groups. Memoized on a composite
-     * key of the inputs so the getter stays cheap across change-detection passes and
-     * the (time-sensitive) VM snapshots never rebuild mid-pass.
+     * key of the inputs BEFORE filtering `AllNotifications`, so the getter stays $O(1)$
+     * across change-detection passes and the (time-sensitive) VM snapshots never rebuild mid-pass.
      */
     get Groups() {
-        const list = this.NotificationsToShow;
-        const unread = list.filter(n => n.Unread).length;
-        const key = `${list.length}|${unread}|${this.RadioSelected}|${this.SelectedTypeFilter}|${this.CurrentFilter}|${list[0]?.ID ?? ''}|${list[list.length - 1]?.ID ?? ''}`;
+        const { baseKey } = this.computeAllNotificationsSignature();
+        const key = `${baseKey}|${this.RadioSelected}|${this.SelectedTypeFilter ?? ''}|${this.CurrentFilter}`;
         if (key !== this.groupsKey) {
-            this.groups = this.buildGroups(list);
+            this.groups = this.buildGroups(this.NotificationsToShow);
             this.groupsKey = key;
         }
         return this.groups;
@@ -651,6 +696,9 @@ export class UserNotificationsComponent extends BaseAngularComponent {
             if (typeName === 'meet-room') {
                 return true;
             }
+            if (this.parseUserRoutineConfig(notification)) {
+                return true;
+            }
         }
         const info = this.NotificationUrl(notification);
         return (info !== null && info.urlParts && info.urlParts.length > 0);
@@ -718,10 +766,20 @@ export class UserNotificationsComponent extends BaseAngularComponent {
         return SharedService.UserNotifications;
     }
     get UnreadNotifications() {
-        return this.AllNotifications.filter(n => n.Unread);
+        const { all, baseKey } = this.computeAllNotificationsSignature();
+        if (baseKey !== this.unreadNotificationsKey) {
+            this.unreadNotificationsKey = baseKey;
+            this.unreadNotificationsCache = all.filter(n => n.Unread);
+        }
+        return this.unreadNotificationsCache;
     }
     get ReadNotifications() {
-        return this.AllNotifications.filter(n => !n.Unread);
+        const { all, baseKey } = this.computeAllNotificationsSignature();
+        if (baseKey !== this.readNotificationsKey) {
+            this.readNotificationsKey = baseKey;
+            this.readNotificationsCache = all.filter(n => !n.Unread);
+        }
+        return this.readNotificationsCache;
     }
     SelectReadOption(option) {
         this.RadioSelected = option;
@@ -824,6 +882,9 @@ export class UserNotificationsComponent extends BaseAngularComponent {
             if (this.navigateToMeetRoom(notification)) {
                 return;
             }
+            if (this.navigateToUserRoutine(notification)) {
+                return;
+            }
             if (this.navigateToHandoffConsole(notification)) {
                 return;
             }
@@ -1009,9 +1070,63 @@ export class UserNotificationsComponent extends BaseAngularComponent {
             navConfig['versionNumber'] = config.versionNumber;
         if (config.taskId)
             navConfig['taskId'] = config.taskId;
-        this.navigationService.OpenNavItemByName('Conversations', navConfig, chatApp.ID);
+        // The Chat tab is usually already open and gets reused; a reused tab reads its configuration
+        // only at init, so the same values go in the query params, which it does react to.
+        this.navigationService.OpenNavItemByName('Conversations', navConfig, chatApp.ID, { queryParams: { ...navConfig } });
+        return true;
+    }
+    /** The routine-run config of a notification, or null when it is not one (or names no routine). */
+    parseUserRoutineConfig(notification) {
+        if (!notification.ResourceConfiguration || notification.ResourceConfiguration.trim().length === 0) {
+            return null;
+        }
+        const config = SafeJSONParse(notification.ResourceConfiguration);
+        if (!config || config.type?.trim().toLowerCase() !== 'userroutine' || !config.routineId) {
+            return null;
+        }
+        return config;
+    }
+    /**
+     * Opens what a routine run produced: its reply, in the routine's own conversation (the
+     * `{ type:'UserRoutine', routineId, runId, conversationId? }` ResourceConfiguration). That
+     * conversation is application-scoped, so the chat sidebar never lists it; the click deep-links
+     * into the Chat app's Conversations item. A notification written before the config carried the
+     * conversation reads it off the routine; a routine with no conversation opens in the Routines
+     * app. Returns false (not handled) when the notification is not a routine run.
+     */
+    navigateToUserRoutine(notification) {
+        const config = this.parseUserRoutineConfig(notification);
+        if (!config) {
+            return false;
+        }
+        void this.openUserRoutineOutput(config);
         return true;
     }
+    async openUserRoutineOutput(config) {
+        const conversationId = config.conversationId ?? await this.loadRoutineConversationId(config.routineId);
+        const chatApp = conversationId ? this.appManager.GetAppByName('Chat') : null;
+        if (conversationId && chatApp) {
+            // Query params as well as configuration: an already-open Chat tab is reused and reacts
+            // only to a query-param change (its configuration is read once, at init).
+            await this.navigationService.OpenNavItemByName('Conversations', { conversationId }, chatApp.ID, { queryParams: { conversationId } });
+            return;
+        }
+        const routinesApp = this.appManager.GetAppByName('Routines');
+        if (routinesApp) {
+            await this.navigationService.OpenNavItemByName('My Routines', { routine: config.routineId }, routinesApp.ID);
+            return;
+        }
+        MJNotificationService.Instance.CreateSimpleNotification('The Routines app is not installed, so this routine cannot be opened', 'error', 4000);
+    }
+    /** The routine's ConversationID, or null when the routine cannot be read or has none. */
+    async loadRoutineConversationId(routineId) {
+        const p = this.ProviderToUse;
+        const routine = await p.GetEntityObject('MJ: User Routines', p.CurrentUser);
+        if (!await routine.Load(routineId)) {
+            return null;
+        }
+        return routine.ConversationID ?? null;
+    }
     GetNotificationType(typeId) {
         if (!typeId)
             return null;
@@ -1084,5 +1199,5 @@ export class UserNotificationsComponent extends BaseAngularComponent {
         type: Component,
         args: [{ standalone: false, selector: 'app-user-notifications', template: "<div class=\"notifications-container\">\n  <!-- Header Section -->\n  <div class=\"notifications-header\">\n    <div class=\"header-top\">\n      <div class=\"header-title\">\n        <div class=\"title-icon\">\n          <i class=\"fa-solid fa-bell\"></i>\n        </div>\n        <div class=\"title-text\">\n          <h1>Notifications</h1>\n          @if (UnreadNotifications.length > 0) {\n            <span class=\"title-subtitle\">{{UnreadNotifications.length}} unread</span>\n          } @else if (AllNotifications.length > 0) {\n            <span class=\"title-subtitle\">All caught up</span>\n          }\n        </div>\n      </div>\n\n      @if (AllNotifications.length > 0) {\n        <div class=\"header-actions\">\n          @if (UnreadNotifications.length > 0) {\n            <button class=\"action-btn action-btn-ghost\"\n                    type=\"button\"\n                    (click)=\"markAllAsRead()\"\n                    aria-label=\"Mark all notifications as read\">\n              <i class=\"fa-solid fa-check-double\" aria-hidden=\"true\"></i>\n              <span class=\"btn-text\">Mark All Read</span>\n            </button>\n          }\n          @if (ReadNotifications.length > 0) {\n            <button class=\"action-btn action-btn-secondary\"\n                    type=\"button\"\n                    (click)=\"markAllAsUnread()\"\n                    aria-label=\"Mark all notifications as unread\">\n              <i class=\"fa-solid fa-envelope\" aria-hidden=\"true\"></i>\n              <span class=\"btn-text\">Mark All Unread</span>\n            </button>\n          }\n        </div>\n      }\n    </div>\n\n    <!-- Filters Section -->\n    @if (AllNotifications.length > 0) {\n      <div class=\"filters-section\">\n        <div class=\"filters-slider\">\n          <div class=\"slider-content\">\n            <!-- Read-status pills -->\n            <div class=\"header-stats\" role=\"group\" aria-label=\"Filter notifications by read status\">\n              <button class=\"stat-pill\"\n                      type=\"button\"\n                      [class.active]=\"radioSelected === 'All'\"\n                      (click)=\"selectReadOption('All')\"\n                      [attr.aria-pressed]=\"radioSelected === 'All'\"\n                      aria-label=\"Show all notifications\">\n                <span class=\"stat-label\">All</span>\n                <span class=\"stat-count\">{{AllNotifications.length}}</span>\n              </button>\n\n              @if (UnreadNotifications.length > 0 || ReadNotifications.length === 0) {\n                <button class=\"stat-pill\"\n                        type=\"button\"\n                        [class.active]=\"radioSelected === 'Unread'\"\n                        [class.has-unread]=\"UnreadNotifications.length > 0\"\n                        (click)=\"selectReadOption('Unread')\"\n                        [attr.aria-pressed]=\"radioSelected === 'Unread'\"\n                        aria-label=\"Show unread notifications\">\n                  <span class=\"stat-label\">Unread</span>\n                  <span class=\"stat-count\" [class.unread-count]=\"UnreadNotifications.length > 0\">\n                    {{UnreadNotifications.length}}\n                  </span>\n                </button>\n              }\n\n              @if (ReadNotifications.length > 0 || UnreadNotifications.length === 0) {\n                <button class=\"stat-pill\"\n                        type=\"button\"\n                        [class.active]=\"radioSelected === 'Read'\"\n                        (click)=\"selectReadOption('Read')\"\n                        [attr.aria-pressed]=\"radioSelected === 'Read'\"\n                        aria-label=\"Show read notifications\">\n                  <span class=\"stat-label\">Read</span>\n                  <span class=\"stat-count\">{{ReadNotifications.length}}</span>\n                </button>\n              }\n            </div>\n\n            <!-- Type filter -->\n            @if (notificationTypes.length > 0) {\n              <div class=\"filter-item type-filter-slider\">\n                <select class=\"type-select\"\n                        [(ngModel)]=\"selectedTypeFilter\"\n                        (change)=\"onTypeFilterChange(selectedTypeFilter)\"\n                        aria-label=\"Filter by notification type\">\n                  <option [value]=\"null\">All Types</option>\n                  @for (type of notificationTypes; track type.ID) {\n                    <option [value]=\"type.ID\">{{type.Name}}</option>\n                  }\n                </select>\n              </div>\n            }\n          </div>\n        </div>\n\n        <!-- Search -->\n        <div class=\"search-section\">\n          <div class=\"search-container\">\n            <i class=\"fa-solid fa-magnifying-glass search-icon\" aria-hidden=\"true\"></i>\n            <input type=\"text\"\n                   class=\"search-input\"\n                   placeholder=\"Search notifications...\"\n                   [value]=\"currentFilter\"\n                   (input)=\"onFilterChanged($any($event.target).value)\"\n                   aria-label=\"Search notifications\" />\n          </div>\n        </div>\n\n        @if (NotificationsToShow.length !== AllNotifications.length) {\n          <div class=\"filter-info\">\n            <span class=\"filter-badge\">\n              <i class=\"fa-solid fa-filter\" aria-hidden=\"true\"></i>\n              Showing {{NotificationsToShow.length}} of {{AllNotifications.length}}\n            </span>\n          </div>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- Notifications Content -->\n  <div class=\"notifications-content\">\n    @if (NotificationsToShow.length === 0 && AllNotifications.length === 0) {\n      <mj-empty-state\n        Variant=\"success\"\n        Icon=\"fa-solid fa-bell-slash\"\n        Title=\"No Notifications\"\n        Message=\"You're all caught up! New notifications will appear here.\" />\n    } @else if (NotificationsToShow.length === 0) {\n      <mj-empty-state\n        Variant=\"no-results\"\n        Icon=\"fa-solid fa-filter-circle-xmark\"\n        Title=\"No Matching Notifications\"\n        Message=\"Try adjusting your filters to see more notifications.\" />\n    } @else {\n      <!-- Day-grouped notification list -->\n      <div class=\"notifications-list\">\n        @for (group of Groups; track group.Key) {\n          <div class=\"group-label\">{{group.Label}}</div>\n\n          @for (vm of group.Items; track vm.N.ID) {\n            <article class=\"notification-card\"\n                     [class.unread]=\"vm.N.Unread\"\n                     [class.expanded]=\"IsExpanded(vm)\"\n                     [class.clickable]=\"vm.Clickable\"\n                     role=\"article\"\n                     [attr.aria-label]=\"vm.N.Title\">\n\n              <!-- Unread Indicator Bar -->\n              <div class=\"card-indicator\" aria-hidden=\"true\"></div>\n\n              <!-- Type Icon -->\n              <div class=\"card-icon\" aria-hidden=\"true\">\n                <i [class]=\"'fa-solid ' + getTypeIcon(vm.N)\"\n                   [style.color]=\"getTypeColor(vm.N)\"></i>\n              </div>\n\n              <!-- Content -->\n              <div class=\"card-content\" (click)=\"notificationClicked(vm.N)\">\n                <div class=\"card-header\">\n                  <h3 class=\"card-title\" [class.card-title-unread]=\"vm.N.Unread\">\n                    {{vm.N.Title}}\n                  </h3>\n                  <span class=\"card-time\" [title]=\"(vm.N.__mj_CreatedAt | date:'medium') ?? ''\">\n                    @if (vm.Relative) {\n                      {{vm.Relative}}\n                    } @else {\n                      <time [attr.datetime]=\"vm.N.__mj_CreatedAt\">{{vm.N.__mj_CreatedAt | date:'MMM d, h:mm a'}}</time>\n                    }\n                  </span>\n                </div>\n\n                <div class=\"card-meta\">\n                  <span class=\"card-type\">{{getTypeName(vm.N)}}</span>\n                  @if (vm.Clickable) {\n                    <span class=\"card-open-hint\">\n                      <i class=\"fa-solid fa-arrow-up-right-from-square\" aria-hidden=\"true\"></i> Open\n                    </span>\n                  }\n                </div>\n\n                @if (!IsExpanded(vm)) {\n                  <p class=\"card-message\">{{vm.Preview}}</p>\n                } @else {\n                  <div class=\"card-rich\" (click)=\"$event.stopPropagation()\">\n                    @switch (vm.Kind) {\n                      @case ('html') {\n                        <!-- Angular sanitizes on [innerHTML] bind; chrome tags were stripped at classification -->\n                        <div class=\"card-rich-html\" [innerHTML]=\"vm.Body\"></div>\n                      }\n                      @case ('markdown') {\n                        <mj-markdown class=\"card-rich-md\" [data]=\"vm.Body\" [enableMermaid]=\"false\"></mj-markdown>\n                      }\n                      @default {\n                        <p class=\"card-message card-message-full\">{{vm.N.Message}}</p>\n                      }\n                    }\n                  </div>\n                }\n\n                @if (vm.Expandable) {\n                  <button class=\"card-expand-btn\" type=\"button\"\n                          (click)=\"ToggleExpanded(vm, $event)\"\n                          [attr.aria-expanded]=\"IsExpanded(vm)\">\n                    <i class=\"fa-solid\" [class.fa-chevron-down]=\"!IsExpanded(vm)\" [class.fa-chevron-up]=\"IsExpanded(vm)\" aria-hidden=\"true\"></i>\n                    {{ IsExpanded(vm) ? 'Show less' : 'Show more' }}\n                  </button>\n                }\n              </div>\n\n              <!-- Actions -->\n              <div class=\"card-actions\">\n                @if (vm.N.Unread) {\n                  <button class=\"card-action-btn\"\n                          type=\"button\"\n                          (click)=\"markAsRead(vm.N, true, null)\"\n                          [attr.aria-label]=\"'Mark ' + vm.N.Title + ' as read'\"\n                          title=\"Mark as Read\">\n                    <i class=\"fa-solid fa-check\" aria-hidden=\"true\"></i>\n                    <span class=\"action-text\">Read</span>\n                  </button>\n                } @else {\n                  <button class=\"card-action-btn\"\n                          type=\"button\"\n                          (click)=\"markAsRead(vm.N, false, null)\"\n                          [attr.aria-label]=\"'Mark ' + vm.N.Title + ' as unread'\"\n                          title=\"Mark as Unread\">\n                    <i class=\"fa-solid fa-envelope\" aria-hidden=\"true\"></i>\n                    <span class=\"action-text\">Unread</span>\n                  </button>\n                }\n              </div>\n            </article>\n          }\n        }\n      </div>\n    }\n  </div>\n</div>\n", styles: ["/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   User Notifications \u2014 day-grouped cards with rich (HTML/Markdown) content,\n   expand/collapse, and token-driven theming (light + dark for free).\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n:host {\n  display: block;\n  height: 100%;\n}\n\n.notifications-container {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: var(--mj-bg-page);\n}\n\n/* \u2500\u2500 Header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.notifications-header {\n  flex-shrink: 0;\n  padding: 20px 24px 12px 24px;\n  background: var(--mj-bg-surface);\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.header-top {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 16px;\n  margin-bottom: 14px;\n}\n\n.header-title {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  min-width: 0;\n}\n\n.title-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 40px;\n  height: 40px;\n  border-radius: var(--mj-radius-lg, 12px);\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  font-size: 16px;\n}\n\n.title-text {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n}\n\n.title-text h1 {\n  margin: 0;\n  font-size: 20px;\n  font-weight: 700;\n  color: var(--mj-text-primary);\n  line-height: 1.2;\n}\n\n.title-subtitle {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n}\n\n.header-actions {\n  display: flex;\n  gap: 8px;\n  flex-shrink: 0;\n}\n\n.action-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 7px 12px;\n  border-radius: var(--mj-radius-md, 8px);\n  border: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-secondary);\n  font-size: 12px;\n  font-weight: 600;\n  cursor: pointer;\n  transition: background-color 0.15s, color 0.15s, border-color 0.15s;\n}\n\n.action-btn:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n}\n\n.action-btn-ghost {\n  border-color: color-mix(in srgb, var(--mj-brand-primary) 35%, transparent);\n  color: var(--mj-brand-primary);\n}\n\n.action-btn-ghost:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n/* \u2500\u2500 Filters \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.filters-section {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 10px;\n}\n\n.filters-slider {\n  min-width: 0;\n}\n\n.slider-content {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  flex-wrap: wrap;\n}\n\n.header-stats {\n  display: inline-flex;\n  gap: 4px;\n  padding: 3px;\n  border-radius: var(--mj-radius-full, 999px);\n  background: var(--mj-bg-surface-sunken);\n}\n\n.stat-pill {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 5px 12px;\n  border: none;\n  border-radius: var(--mj-radius-full, 999px);\n  background: transparent;\n  color: var(--mj-text-secondary);\n  font-size: 12px;\n  font-weight: 600;\n  cursor: pointer;\n  transition: background-color 0.15s, color 0.15s;\n}\n\n.stat-pill:hover {\n  color: var(--mj-text-primary);\n}\n\n.stat-pill.active {\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n  box-shadow: var(--mj-shadow-sm);\n}\n\n.stat-count {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 18px;\n  height: 18px;\n  padding: 0 5px;\n  border-radius: var(--mj-radius-full, 999px);\n  background: color-mix(in srgb, var(--mj-text-muted) 14%, transparent);\n  color: var(--mj-text-secondary);\n  font-size: 10px;\n  font-weight: 700;\n}\n\n.stat-count.unread-count {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n  color: var(--mj-brand-primary);\n}\n\n.type-select {\n  padding: 7px 10px;\n  border-radius: var(--mj-radius-md, 8px);\n  border: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n  font-size: 12px;\n  cursor: pointer;\n}\n\n.search-section {\n  flex: 1 1 220px;\n  min-width: 180px;\n}\n\n.search-container {\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n\n.search-icon {\n  position: absolute;\n  left: 12px;\n  color: var(--mj-text-muted);\n  font-size: 12px;\n  pointer-events: none;\n}\n\n.search-input {\n  width: 100%;\n  padding: 8px 12px 8px 32px;\n  border-radius: var(--mj-radius-md, 8px);\n  border: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n  font-size: 13px;\n}\n\n.search-input:focus {\n  outline: none;\n  border-color: var(--mj-border-focus);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n}\n\n.filter-info {\n  flex-basis: 100%;\n}\n\n.filter-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 10px;\n  border-radius: var(--mj-radius-full, 999px);\n  background: color-mix(in srgb, var(--mj-status-info) 10%, var(--mj-bg-surface));\n  color: var(--mj-status-info);\n  font-size: 11px;\n  font-weight: 600;\n}\n\n/* \u2500\u2500 Content / list \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.notifications-content {\n  flex: 1 1 auto;\n  min-height: 0;\n  overflow-y: auto;\n  padding: 16px 24px 32px 24px;\n}\n\n.notifications-list {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  max-width: 960px;\n  margin: 0 auto;\n}\n\n.group-label {\n  position: sticky;\n  top: -16px;\n  z-index: 1;\n  padding: 10px 2px 4px 2px;\n  background: var(--mj-bg-page);\n  font-size: 11px;\n  font-weight: 700;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  color: var(--mj-text-muted);\n}\n\n.group-label:not(:first-child) {\n  margin-top: 8px;\n}\n\n/* \u2500\u2500 Card \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.notification-card {\n  position: relative;\n  display: flex;\n  gap: 12px;\n  padding: 14px 16px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-lg, 12px);\n  background: var(--mj-bg-surface);\n  transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;\n  overflow: hidden;\n}\n\n.notification-card:hover {\n  border-color: var(--mj-border-strong);\n  box-shadow: var(--mj-shadow-sm);\n}\n\n.notification-card.unread {\n  background: color-mix(in srgb, var(--mj-brand-primary) 3%, var(--mj-bg-surface));\n}\n\n.card-indicator {\n  display: none;\n  position: absolute;\n  left: 0;\n  top: 0;\n  bottom: 0;\n  width: 3px;\n  background: var(--mj-brand-primary);\n  border-radius: 0 2px 2px 0;\n}\n\n.notification-card.unread .card-indicator {\n  display: block;\n}\n\n.card-icon {\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 36px;\n  height: 36px;\n  border-radius: var(--mj-radius-md, 10px);\n  background: var(--mj-bg-surface-sunken);\n  font-size: 14px;\n}\n\n.card-content {\n  flex: 1 1 auto;\n  min-width: 0;\n}\n\n.notification-card.clickable .card-content {\n  cursor: pointer;\n}\n\n.card-header {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: 12px;\n}\n\n.card-title {\n  margin: 0;\n  font-size: 14px;\n  font-weight: 500;\n  color: var(--mj-text-primary);\n  overflow-wrap: anywhere;\n}\n\n.card-title-unread {\n  font-weight: 700;\n}\n\n.card-time {\n  flex-shrink: 0;\n  font-size: 11px;\n  color: var(--mj-text-muted);\n  white-space: nowrap;\n}\n\n.card-meta {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin: 3px 0 6px 0;\n}\n\n.card-type {\n  display: inline-flex;\n  padding: 2px 8px;\n  border-radius: var(--mj-radius-full, 999px);\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-secondary);\n  font-size: 10px;\n  font-weight: 700;\n  letter-spacing: 0.04em;\n  text-transform: uppercase;\n}\n\n.card-open-hint {\n  display: none;\n  align-items: center;\n  gap: 4px;\n  font-size: 10px;\n  font-weight: 600;\n  color: var(--mj-brand-primary);\n}\n\n.notification-card.clickable:hover .card-open-hint {\n  display: inline-flex;\n}\n\n.card-message {\n  margin: 0;\n  font-size: 13px;\n  line-height: 1.5;\n  color: var(--mj-text-secondary);\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  overflow-wrap: anywhere;\n}\n\n.card-message-full {\n  display: block;\n  -webkit-line-clamp: unset;\n  white-space: pre-wrap;\n}\n\n/* \u2500\u2500 Rich (expanded) content \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.card-rich {\n  margin-top: 4px;\n  padding: 12px 14px;\n  border: 1px solid var(--mj-border-subtle);\n  border-radius: var(--mj-radius-md, 8px);\n  background: var(--mj-bg-surface-card);\n  cursor: default;\n}\n\n/* Sanitized foreign markup: keep it inside the card no matter what it brought along */\n.card-rich-html {\n  font-size: 13px;\n  line-height: 1.55;\n  color: var(--mj-text-primary);\n  overflow-x: auto;\n}\n\n.card-rich-html img {\n  max-width: 100%;\n  height: auto;\n}\n\n.card-rich-html table {\n  max-width: 100%;\n  border-collapse: collapse;\n}\n\n.card-rich-html td,\n.card-rich-html th {\n  padding: 4px 8px;\n  border: 1px solid var(--mj-border-subtle);\n}\n\n.card-rich-html a {\n  color: var(--mj-text-link);\n}\n\n.card-rich-html h1,\n.card-rich-html h2,\n.card-rich-html h3 {\n  margin: 0.4em 0 0.3em 0;\n  font-size: 1.05em;\n}\n\n.card-rich-md {\n  display: block;\n  font-size: 13px;\n}\n\n.card-expand-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  margin-top: 8px;\n  padding: 4px 10px;\n  border: none;\n  border-radius: var(--mj-radius-full, 999px);\n  background: transparent;\n  color: var(--mj-brand-primary);\n  font-size: 11px;\n  font-weight: 700;\n  cursor: pointer;\n}\n\n.card-expand-btn:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n/* \u2500\u2500 Card actions \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.card-actions {\n  flex-shrink: 0;\n  display: flex;\n  align-items: flex-start;\n}\n\n.card-action-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 10px;\n  border: 1px solid transparent;\n  border-radius: var(--mj-radius-md, 8px);\n  background: transparent;\n  color: var(--mj-text-muted);\n  font-size: 11px;\n  font-weight: 600;\n  cursor: pointer;\n  transition: background-color 0.15s, color 0.15s;\n}\n\n.card-action-btn:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n  border-color: var(--mj-border-default);\n}\n\n/* \u2500\u2500 Responsive \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n@media (max-width: 720px) {\n  .notifications-header {\n    padding: 14px 14px 10px 14px;\n  }\n\n  .notifications-content {\n    padding: 12px 12px 24px 12px;\n  }\n\n  .btn-text,\n  .action-text {\n    display: none;\n  }\n\n  .card-header {\n    flex-direction: column;\n    gap: 2px;\n  }\n\n  .card-time {\n    order: -1;\n  }\n}\n"] }]
     }], () => [{ type: i1.SharedService }, { type: i1.NavigationService }, { type: i2.ApplicationManager }], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(UserNotificationsComponent, { className: "UserNotificationsComponent", filePath: "src/lib/user-notifications/user-notifications.component.ts", lineNumber: 93 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(UserNotificationsComponent, { className: "UserNotificationsComponent", filePath: "src/lib/user-notifications/user-notifications.component.ts", lineNumber: 104 }); })();
 //# sourceMappingURL=user-notifications.component.js.map