@quazardous/qdadm 2.28.0 → 2.29.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quazardous/qdadm",
-  "version": "2.28.0",
+  "version": "2.29.0",
   "description": "Vue 3 framework for admin dashboards with PrimeVue",
   "author": "quazardous",
   "license": "MIT",

package/src/composables/useEntityItemShowPage.ts

@@ -340,7 +340,12 @@ export function useEntityItemShowPage<T = Record<string, unknown>>(
       keep: 'short',
       ...(route?.name ? { to: { name: String(route.name), params: { ...route.params } } } : {}),
     })
-  }, { id: () => entityId.value })
+  }, {
+    id: () => entityId.value,
+    // The update has arrived: say so on the badge at once — before the reload is
+    // coalesced, let alone finished (#2679).
+    onEvent: () => notifications.flash(),
+  })
   // Cast orchestrator to include toast methods
   const orchestrator = baseOrchestrator as Orchestrator
 

package/src/composables/useLiveEntity.ts

@@ -27,6 +27,12 @@ export interface UseLiveEntityOptions {
    * own id: without it, changing one record reloads every open detail page.
    */
   id?: () => string | number | null | undefined
+  /**
+   * Called at once for every event that concerns this screen, before the
+   * reload is coalesced (#2679) — for a cue that must not wait, like the
+   * notification badge's flash.
+   */
+  onEvent?: () => void
 }
 
 interface LivePolicy {
@@ -129,6 +135,8 @@ export function useLiveEntity(
       }
     }
 
+    options.onEvent?.()
+
     // Coalesce: a backend replaying fifty rows must cost one reload, not fifty.
     if (coalesceMs <= 0) {
       fire()

package/src/notifications/NotificationBadge.vue

@@ -7,7 +7,8 @@
  * - something needs attention: the parent layout blinks the logo via
  *   :has(.notification-badge-zone--alert);
  * - how many entries are unread: a count;
- * - work is in progress: a ring, once tracked work has lasted `activityDelayMs`.
+ * - work is in progress: a ring, once tracked work has lasted `activityDelayMs`;
+ * - something just arrived: a short flash, immediately (#2679).
  *
  * Click toggles the notification panel open/close.
  */
@@ -29,6 +30,7 @@ const unreadLabel = computed(() => (unread.value > 99 ? '99+' : String(unread.va
     @click.stop.prevent="store.toggle()"
   >
     <span v-if="store.isBusy.value" class="notification-badge-ring" role="progressbar" aria-label="Loading" />
+    <span v-if="store.isFlashing.value" class="notification-badge-flash" aria-hidden="true" />
     <span v-if="unread > 0" class="notification-badge-count">{{ unreadLabel }}</span>
   </div>
 </template>
@@ -78,11 +80,30 @@ const unreadLabel = computed(() => (unread.value > 99 ? '99+' : String(unread.va
   to { transform: rotate(360deg); }
 }
 
+/* Something just arrived: a halo that grows out of the logo and fades. */
+.notification-badge-flash {
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  pointer-events: none;
+  animation: notification-badge-flash 0.9s ease-out 1;
+}
+
+@keyframes notification-badge-flash {
+  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--p-primary-color, #3b82f6) 70%, transparent); }
+  100% { box-shadow: 0 0 0 14px color-mix(in srgb, var(--p-primary-color, #3b82f6) 0%, transparent); }
+}
+
 @media (prefers-reduced-motion: reduce) {
   .notification-badge-ring {
     animation: none;
     border-color: var(--p-primary-color, #3b82f6);
     opacity: 0.5;
   }
+
+  .notification-badge-flash {
+    animation: none;
+    box-shadow: 0 0 0 3px var(--p-primary-color, #3b82f6);
+  }
 }
 </style>

package/src/notifications/NotificationStore.ts

@@ -118,6 +118,14 @@ export interface NotificationStore {
   track<T>(work: Promise<T>): Promise<T>
   /** True once tracked work has been in progress for `activityDelayMs`. */
   isBusy: ComputedRef<boolean>
+  /**
+   * Flash the badge: something just arrived — an update to the record on
+   * screen (#2679). Immediate, never delayed; a flash already running absorbs
+   * further calls, so a burst flashes once.
+   */
+  flash(): void
+  /** True while the badge flashes. */
+  isFlashing: ComputedRef<boolean>
 
   // Panel state
   isOpen: Ref<boolean>
@@ -288,6 +296,20 @@ export function createNotificationStore(config: NotificationStoreConfig = {}): N
     return work
   }
 
+  // ── Flash ──────────────────────────────────────────────────────────────
+
+  const FLASH_MS = 900
+  const flashing = ref(false)
+
+  function flash(): void {
+    // A burst of updates flashes once: the running flash already says it.
+    if (flashing.value) return
+    flashing.value = true
+    setTimeout(() => {
+      flashing.value = false
+    }, FLASH_MS)
+  }
+
   // ── Panel state ────────────────────────────────────────────────────────
 
   function open(): void {
@@ -338,6 +360,8 @@ export function createNotificationStore(config: NotificationStoreConfig = {}): N
     removeStatus,
     track,
     isBusy: computed(() => busy.value),
+    flash,
+    isFlashing: computed(() => flashing.value),
     isOpen,
     open,
     close,
@@ -383,6 +407,8 @@ export function useNotifications(): NotificationStore {
       removeStatus: () => {},
       track: (work) => work,
       isBusy: computed(() => false),
+      flash: () => {},
+      isFlashing: computed(() => false),
       isOpen: ref(false),
       open: () => {},
       close: () => {},