@leavepulse/ui 0.78.3 → 0.80.1

package/src/components/LpCommandPalette.vue

@@ -87,6 +87,7 @@ import {
   toRecentItem,
   type RecentEntry,
   type RecentItem,
+  settleFetched,
 } from "./commandPalette"
 import { useOutsideGuard, usePortalTarget, useView, viewWindow } from "../composables/useView"
 
@@ -279,12 +280,31 @@ export interface CommandPrompt {
  * after the palette closed, is discarded and never reaches the list, so a
  * fetcher does not need to check the signal itself. Checking it before an
  * expensive step is only a saving.
+ *
+ * A fetcher that gathers from sources of different speeds (a local index, a
+ * database, a slow remote) can return an async iterable instead — an async
+ * generator is the easy way — and yield as it goes, so the quick sources show
+ * without waiting for the slow one. Each batch is the whole list so far and
+ * replaces the one before; the last is the answer. The search keeps its
+ * loading bar until the iterable ends, the highlight stays on the row it was
+ * on as rows are added, and when the query moves on the signal aborts and the
+ * iterable is closed (`return()`) — a generator parked in an `await` only
+ * closes at its next `yield`, running its `finally` there, so pass the signal
+ * on to what it awaits. A throw after some batches keeps them on screen, with
+ * a line saying the rest could not be fetched:
+ *
+ *   async function* search(q, signal) {
+ *     const local = index.find(q)
+ *     yield local
+ *     const remote = await api.search(q, { signal })
+ *     yield [...local, ...remote]
+ *   }
  */
 export type CommandFetcher = (
   query: string,
   signal: AbortSignal,
   parsed: PaletteQuery,
-) => Command[] | Promise<Command[]>
+) => Command[] | Promise<Command[]> | AsyncIterable<Command[]>
 
 /** Footer hints and the mode chip, spelled out so an app can translate them. */
 export type PaletteLabels = Partial<Record<PaletteMode, string>> & {
@@ -305,6 +325,8 @@ export type PaletteLabels = Partial<Record<PaletteMode, string>> & {
   searching: string
   /** Shown when `search` (or a fetching mode) threw. */
   searchFailed: string
+  /** Shown under streamed results when the fetcher threw after some of them; defaults to "Some results could not be loaded." */
+  searchIncomplete?: string
   retry: string
   /** The row that unfolds a group cut by `groupLimit`; `{count}` is how many are hidden. */
   showMore: string
@@ -508,6 +530,7 @@ const DEFAULT_LABELS: Required<PaletteLabels> = {
   back: "back",
   searching: "Searching…",
   searchFailed: "Search is unavailable right now.",
+  searchIncomplete: "Some results could not be loaded.",
   retry: "Retry",
   showMore: "Show {count} more",
   actions: "actions",
@@ -762,11 +785,14 @@ function cancel() {
  * drops a superseded request before `fail` runs.
  */
 const failed = ref(false)
+/** The failure came after some batches had shown: those stay, the line says the rest is missing. */
+const incomplete = ref(false)
 
 function refresh(keepRows = false) {
   cancel()
   if (!keepRows) found.value = []
   failed.value = false
+  incomplete.value = false
   const run = fetcher()
   if (!run) return
   const parsed = parsePaletteQuery(query.value.trim())
@@ -778,14 +804,25 @@ function refresh(keepRows = false) {
   if (!inMode && q.length < Math.max(1, props.minChars)) return
   // A failing provider: the static commands still stand, with a line saying
   // that the rest could not be fetched.
-  task.run((signal) => run(q, signal, parsed), {
-    delay: props.debounce,
-    apply: (hits) => (found.value = hits),
-    fail: () => {
-      found.value = []
-      failed.value = true
+  // Streamed batches go through `emit`, which drops them once this request
+  // is superseded; `streamed` tells a failure after them from one before.
+  let streamed = false
+  task.run(
+    (signal, emit) =>
+      settleFetched(run(q, signal, parsed), signal, (rows) => {
+        streamed = true
+        emit(rows)
+      }),
+    {
+      delay: props.debounce,
+      apply: (hits) => (found.value = hits),
+      fail: () => {
+        if (!streamed) found.value = []
+        incomplete.value = streamed
+        failed.value = true
+      },
     },
-  })
+  )
 }
 
 // ── filtering + scoring ──────────────────────────────────────
@@ -1483,6 +1520,7 @@ watch(
     modeItems.value = []
     found.value = []
     failed.value = false
+    incomplete.value = false
     if (o) {
       await nextTick()
       // Closed again meanwhile: the box belongs to a dialog on its way out.
@@ -1547,22 +1585,34 @@ const guardOutside = useOutsideGuard()
         <!-- Filter. The trail sits inside the box as chips, the way a scoped
              search reads everywhere else: what you type is filtered by what is
              to its left. -->
-        <div class="flex shrink-0 items-center gap-2.5 border-b border-line px-4">
+        <div class="relative flex shrink-0 items-center gap-2.5 border-b border-line px-4">
           <LpIcon
-            v-if="!searching && !executing && !validating"
+            v-if="!executing && !validating"
             name="lucide:search"
             :size="18"
             class="shrink-0 text-muted"
           />
-          <!-- At once, since it takes the search icon's place. It is the only
-               thing that tells a screen reader a search went out, so it speaks. -->
+          <!-- At once, since it takes the search icon's place. -->
           <LpLoader
             v-else
             size="inline"
             :delay="0"
-            :labels="{ loading: executing || validating ? text.running : text.searching }"
+            :labels="{ loading: text.running }"
             class="shrink-0 text-[18px] text-muted"
           />
+          <!-- A search under way runs a bar along the box's lower edge, over
+               the border, for as long as it lasts: results that stream in
+               batches are already on screen by then, and the bar is what says
+               more may come. It is also what tells a screen reader a search
+               went out, so it speaks. -->
+          <LpLoader
+            v-if="searching"
+            variant="bar"
+            size="sm"
+            tone="brand"
+            :labels="{ loading: text.searching }"
+            class="pointer-events-none absolute inset-x-0 -bottom-px"
+          />
 
           <button
             v-for="(step, i) in trail"
@@ -1733,7 +1783,7 @@ const guardOutside = useOutsideGuard()
               :class="flat.length ? 'pb-1 pt-3' : 'py-10'"
             >
               <LpIcon name="lucide:circle-alert" :size="15" class="shrink-0" />
-              <span>{{ text.searchFailed }}</span>
+              <span>{{ incomplete ? text.searchIncomplete : text.searchFailed }}</span>
               <button
                 type="button"
                 class="rounded-inner px-1.5 py-0.5 font-medium text-brand outline-none transition-colors hover:bg-brand-soft focus-visible:ring-2 focus-visible:ring-ring"

package/src/components/LpNotificationBell.vue

@@ -1,84 +1,41 @@
 <script setup lang="ts">
 /*
- * Notification bell: an icon button with an unread badge that opens a popover
- * feed on left-click and a quick-action menu on right-click. Each feed row has
- * its own right-click menu too. Presentational and data-driven — the consumer
- * fetches via the SDK, binds `items` / `unread-count` / `v-model:open`, and
- * reacts to `mark-read` / `mark-unread` / `mark-all-read` / `dismiss` /
- * `select`. Mirrors the kit convention (cf. LpSidebar): data in, events out,
- * no data fetching inside.
+ * Notification bell: an icon button with an unread badge that opens the
+ * notification feed (LpNotificationFeed) in a popover on left-click and a
+ * quick-action menu on right-click. Data in, events out, no fetching inside:
+ * the consumer binds `items` / `unread-count` / `v-model:open` and reacts to
+ * the feed's events, which the bell passes on.
+ *
+ * Everything the feed takes, the bell takes too: rows with their own buttons
+ * (`item.actions`), senders (`item.actor`), tabs (`categories`, `v-model:filter`),
+ * Load more, a link to the whole feed, a settings button.
  */
 import { computed, getCurrentInstance } from "vue"
 import { useLabels } from "../composables/useLpConfig"
-import { useNow } from "../composables/useNow"
 import LpBadge from "./LpBadge.vue"
 import LpButton from "./LpButton.vue"
 import LpContextMenu, { type ContextMenuItemDef } from "./LpContextMenu.vue"
-import LpEmptyState from "./LpEmptyState.vue"
 import LpIcon from "./LpIcon.vue"
+import LpNotificationFeed from "./LpNotificationFeed.vue"
 import LpPopover from "./LpPopover.vue"
-import LpRelativeTime from "./LpRelativeTime.vue"
 import LpRollingText from "./LpRollingText.vue"
-import LpScrollArea from "./LpScrollArea.vue"
-import LpSkeleton from "./LpSkeleton.vue"
-import LpShift from "./LpShift.vue"
-import { toneLook, type ToneName } from "./tone"
-
-export interface NotificationItem {
-  id: string
-  title: string
-  body?: string
-  /** Optional icon name (e.g. "lucide:check-circle"). */
-  icon?: string
-  /**
-   * Colours the row's icon by what KIND of notification it is — a billing
-   * notice and a security one should not look alike at a glance.
-   *
-   * A named tone rather than a class, so the categories stay themeable:
-   * consumers were mapping their own types onto raw palette classes, which is
-   * the one place a theme cannot follow them.
-   */
-  tone?: ToneName
-  /** Optional deep link; the row becomes clickable when set. */
-  link?: string
-  /** ISO-8601 creation time; rendered as a relative label. */
-  createdAt?: string
-  /** Whether the notification has been read. */
-  read?: boolean
-}
-
-/**
- * Every user-facing string the bell renders on its own. Apps with i18n pass
- * their translations in; the English defaults keep the component usable bare.
- * Without this the header/row menus would be hardcoded English in every locale.
- */
-export interface NotificationLabels {
-  title?: string
-  markAllRead?: string
-  clear?: string
-  markAsRead?: string
-  markAsUnread?: string
-  open?: string
-  dismiss?: string
-  empty?: string
-  ariaLabel?: string
-  /** Appended to the button's name while there is unread news; `{count}` is filled in. */
-  unread?: string
-  /** Screen-reader marker on an unread row. */
-  unreadItem?: string
-  /**
-   * No longer read: times are worded by Intl in the app's locale. Still
-   * accepted so existing label objects keep type-checking.
-   * @deprecated
-   */
-  justNow?: string
-  /** @deprecated See `justNow`. */
-  minutes?: string
-  /** @deprecated See `justNow`. */
-  hours?: string
-  /** @deprecated See `justNow`. */
-  days?: string
-}
+import {
+  NOTIFICATION_LABELS,
+  type NotificationAction,
+  type NotificationCategory,
+  type NotificationItem,
+  type NotificationLabels,
+  type NotificationMenu,
+} from "./notifications"
+
+export type {
+  NotificationAction,
+  NotificationActor,
+  NotificationCategory,
+  NotificationItem,
+  NotificationLabels,
+  NotificationMenu,
+} from "./notifications"
 
 const props = withDefaults(
   defineProps<{
@@ -90,166 +47,101 @@ const props = withDefaults(
     title?: string
     /** Cap the badge display (e.g. "9+"). */
     maxBadge?: number
-    /** Right-click menu items; overrides the built-in quick actions. */
+    /** Right-click menu on the bell; overrides the built-in quick actions. */
     menuItems?: ContextMenuItemDef[]
-    /** Translations for the strings the bell renders itself. */
+    /** Extra right-click entries for a feed row. */
+    itemMenu?: NotificationMenu
+    /** Tabs after All and Unread, matched against `item.category`. */
+    categories?: NotificationCategory[]
+    /** Head runs of rows with Today / Yesterday / Earlier. Default true. */
+    groupByDay?: boolean
+    /** More is waiting: the feed offers Load more (`@load-more`). */
+    hasMore?: boolean
+    loadingMore?: boolean
+    /** The feed's footer link to the whole list ("View all notifications"). */
+    allLink?: string
+    /** Translations for the strings the bell and its feed render themselves. */
     labels?: NotificationLabels
-    /**
-     * Formats `item.createdAt` for display. Defaults to a narrow relative time
-     * in the app's locale ("now", "5m ago", "3h ago"); pass your own to word
-     * it differently.
-     */
+    /** Formats `item.createdAt`; defaults to a narrow relative time in the app's locale. */
     formatTime?: (iso: string) => string
   }>(),
-  { items: () => [], maxBadge: 9 },
+  { items: () => [], maxBadge: 9, groupByDay: true },
 )
 
-// Single lookup for every label, so the template never repeats the fallbacks.
-// `title` stays a top-level prop for compatibility and wins over labels.title.
-const text = useLabels(
-  "notifications",
-  {
-    title: "Notifications",
-    markAllRead: "Mark all read",
-    clear: "Clear",
-    markAsRead: "Mark as read",
-    markAsUnread: "Mark as unread",
-    open: "Open",
-    dismiss: "Dismiss",
-    empty: "No notifications",
-    ariaLabel: "",
-    unread: "{count} unread",
-    unreadItem: "Unread",
-  },
-  () => props.labels,
-)
-const l = computed(() => ({
-  ...text.value,
-  title: props.title ?? text.value.title,
-  empty: props.emptyLabel ?? text.value.empty,
-  ariaLabel: text.value.ariaLabel || text.value.title,
-}))
-
-// Popover open state. A defineModel (not a plain `open` prop) gives a local
-// fallback, so the bell still opens when the consumer only listens to
-// @update:open without binding :open — otherwise the popover is stuck in
-// controlled-but-uncontrolled limbo and never opens.
+// A defineModel (not a plain prop) gives a local fallback, so the bell still
+// opens when the consumer only listens to @update:open without binding :open.
 const open = defineModel<boolean>("open", { default: false })
+const filter = defineModel<string>("filter", { default: "all" })
 
 const emit = defineEmits<{
   (e: "markRead", id: string): void
   (e: "markUnread", id: string): void
   (e: "markAllRead"): void
-  /** Empty the whole feed. The header button only appears when this is bound. */
+  /** Empty the whole feed. Only offered when this is bound. */
   (e: "clear"): void
   (e: "dismiss", id: string): void
   (e: "select", item: NotificationItem): void
+  (e: "action", item: NotificationItem, action: NotificationAction): void
+  /** The feed's gear. Only drawn when this is bound. */
+  (e: "settings"): void
+  (e: "loadMore"): void
 }>()
 
-const unread = computed(() =>
-  props.unreadCount ?? props.items.filter((n) => !n.read).length,
-)
-const badgeLabel = computed(() =>
-  unread.value > props.maxBadge ? `${props.maxBadge}+` : String(unread.value),
-)
+const text = useLabels("notifications", NOTIFICATION_LABELS, () => props.labels as Partial<typeof NOTIFICATION_LABELS>)
+const l = computed(() => {
+  const title = props.title ?? text.value.title
+  return { ...text.value, title, ariaLabel: text.value.ariaLabel || title }
+})
+
+const unread = computed(() => props.unreadCount ?? props.items.filter((n) => !n.read).length)
 const hasUnread = computed(() => unread.value > 0)
+const badgeLabel = computed(() => (unread.value > props.maxBadge ? `${props.maxBadge}+` : String(unread.value)))
 
 // The badge is drawn, not read: its count goes into the button's own name.
 const buttonLabel = computed(() =>
   hasUnread.value ? `${l.value.ariaLabel}, ${l.value.unread.replace("{count}", String(unread.value))}` : l.value.ariaLabel,
 )
 
-
 /*
- * Which optional actions the consumer actually handles. A button for an event
- * nobody listens to is a button that does nothing when pressed.
- *
- * NOT `useAttrs()`: a listener for a DECLARED emit is removed from `$attrs`, so
- * an `@clear` handler never appears there. The raw vnode props are where it
- * survives.
+ * The optional events the consumer handles. NOT `useAttrs()`: a listener for a
+ * DECLARED emit is removed from `$attrs`, so it is read off the raw vnode
+ * props. Only those are passed on, so the feed draws no button nobody answers.
  */
 const instance = getCurrentInstance()
 const handlesClear = computed(() => Boolean(instance?.vnode.props?.onClear))
+const optional = computed(() => ({
+  ...(handlesClear.value ? { clear: () => emit("clear") } : {}),
+  ...(instance?.vnode.props?.onSettings
+    ? {
+        settings: () => {
+          open.value = false
+          emit("settings")
+        },
+      }
+    : {}),
+}))
 
-// Right-click quick actions on the bell. "Open" is intentionally omitted — a
-// left-click already opens the feed, so the menu only carries actions you
-// can't get from the click itself. Because `open` is a defineModel we open on
-// left-click ourselves (the popover is anchor-only), which frees the trigger
-// button to also host LpContextMenu without the two fighting over the trigger.
+// Right-click quick actions on the bell. "Open" is left out: a left-click
+// already opens the feed. The popover's trigger and the context menu's both
+// pass their handlers down to the one button (they forward attributes), so
+// the button toggles nothing itself: a click of its own toggled twice.
 const contextMenu = computed<ContextMenuItemDef[]>(() => {
   if (props.menuItems) return props.menuItems
   const items: ContextMenuItemDef[] = [
-    {
-      label: l.value.markAllRead,
-      icon: "lucide:check-check",
-      disabled: !hasUnread.value,
-      onSelect: () => emit("markAllRead"),
-    },
+    { label: l.value.markAllRead, icon: "lucide:check-check", disabled: !hasUnread.value, onSelect: () => emit("markAllRead") },
   ]
-  // Same rule as the header button: offered only when the caller can act on it.
   if (handlesClear.value) {
-    items.push({
-      label: l.value.clear,
-      icon: "lucide:trash-2",
-      disabled: !props.items.length,
-      onSelect: () => emit("clear"),
-    })
+    items.push({ label: l.value.clear, icon: "lucide:trash-2", disabled: !props.items.length, onSelect: () => emit("clear") })
   }
   return items
 })
 
-// Picking an item goes somewhere (a page, a dialog, a tour step), so the feed
-// steps out of the way: left open it would cover what the item just opened.
+// Picking an item goes somewhere (a page, a dialog), so the feed steps out of
+// the way: left open it would cover what the item just opened.
 function onSelect(item: NotificationItem) {
-  if (!item.read) emit("markRead", item.id)
   open.value = false
   emit("select", item)
 }
-
-// Per-row right-click actions: toggle read state, open a deep link, dismiss.
-// Producers wire the matching @mark-read / @mark-unread / @dismiss handlers; an
-// action only appears when it makes sense for that row.
-function rowMenu(item: NotificationItem): ContextMenuItemDef[] {
-  const actions: ContextMenuItemDef[] = []
-  if (item.read) {
-    actions.push({
-      label: l.value.markAsUnread,
-      icon: "lucide:dot",
-      onSelect: () => emit("markUnread", item.id),
-    })
-  } else {
-    actions.push({
-      label: l.value.markAsRead,
-      icon: "lucide:check",
-      onSelect: () => emit("markRead", item.id),
-    })
-  }
-  if (item.link) {
-    actions.push({
-      label: l.value.open,
-      icon: "lucide:external-link",
-      onSelect: () => onSelect(item),
-    })
-  }
-  actions.push({
-    label: l.value.dismiss,
-    icon: "lucide:x",
-    danger: true,
-    separatorBefore: true,
-    onSelect: () => emit("dismiss", item.id),
-  })
-  return actions
-}
-
-// A `formatTime` prop takes over the row's time entirely; it is re-asked twice
-// a minute so its "5m" keeps moving. Without one, the row renders
-// LpRelativeTime, which words the time through Intl in the app's locale and
-// wakes only when its own text would change.
-const customNow = useNow(() => !!props.formatTime, { nextIn: () => 30_000 })
-function customTime(iso: string): string {
-  void customNow.value
-  return props.formatTime ? props.formatTime(iso) : ""
-}
 </script>
 
 <template>
@@ -258,12 +150,8 @@ function customTime(iso: string): string {
     side="bottom"
     align="end"
     :side-offset="8"
-    panel-class="w-80 p-0"
+    panel-class="w-[min(24rem,calc(100vw-1rem))] p-0"
   >
-    <!-- `open` is controlled via defineModel, so the popover trigger is just an
-         anchor: we toggle open on click ourselves. That frees the button to
-         also be wrapped in LpContextMenu for the right-click quick-actions menu
-         (left-click → feed, right-click → menu) without two triggers clashing. -->
     <template #trigger>
       <LpContextMenu :items="contextMenu">
         <LpButton
@@ -271,7 +159,6 @@ function customTime(iso: string): string {
           size="sm"
           class="relative"
           :aria-label="buttonLabel"
-          @click="open = !open"
         >
           <LpIcon name="lucide:bell" :size="18" />
           <!-- The badge pops in and out, and its count rolls rather than
@@ -293,90 +180,29 @@ function customTime(iso: string): string {
       </LpContextMenu>
     </template>
 
-    <header class="flex items-center justify-between gap-2 px-3 py-2.5">
-      <span class="text-sm font-semibold">{{ l.title }}</span>
-      <span class="flex items-center gap-0.5">
-        <!-- Emptying the feed is a different act from reading it, and it is
-             destructive, so it is muted and sits away from the primary action.
-             Only offered when a listener is bound: a caller with no way to
-             clear its feed must not be given a button that does nothing. -->
-        <button
-          v-if="items.length && handlesClear"
-          type="button"
-          class="rounded-inner px-1.5 py-0.5 text-xs font-medium text-muted outline-none transition-colors hover:bg-surface-soft hover:text-ink focus-visible:bg-surface-soft"
-          @click="emit('clear')"
-        >
-          {{ l.clear }}
-        </button>
-        <button
-          v-if="hasUnread"
-          type="button"
-          class="rounded-inner px-1.5 py-0.5 text-xs font-medium text-brand outline-none transition-colors hover:bg-brand-soft focus-visible:bg-brand-soft"
-          @click="emit('markAllRead')"
-        >
-          {{ l.markAllRead }}
-        </button>
-      </span>
-    </header>
-
-    <!-- Skeleton → empty → feed are three different heights, so the panel
-         jumped as the list loaded and again whenever it emptied. Easing the
-         swap keeps the popover from snapping under the bell. -->
-    <LpShift axis="height">
-      <div v-if="loading" class="space-y-1.5 px-2 pb-2">
-        <LpSkeleton v-for="i in 4" :key="i" class="h-12" />
-      </div>
-
-      <LpEmptyState
-        v-else-if="!items.length"
-        icon="lucide:bell-off"
-        :title="l.empty"
-        class="px-3 py-10"
-      />
-
-      <!-- The feed sits in a thin gutter; rows are self-contained tiles (rounded,
-           hover-lit) instead of full-width strips with hard dividers — lighter and
-           easier to scan. Each row carries its own right-click action menu. -->
-      <LpScrollArea v-else class="max-h-96" content-class="flex flex-col gap-0.5 px-2 pb-2">
-        <LpContextMenu v-for="item in items" :key="item.id" :items="rowMenu(item)">
-          <component
-            :is="item.link ? 'a' : 'button'"
-            :href="item.link || undefined"
-            :type="item.link ? undefined : 'button'"
-            class="group/notif flex w-full items-start gap-2.5 rounded-control px-2 py-2 text-left outline-none transition-colors hover:bg-surface-soft focus-visible:bg-surface-soft"
-            :class="item.read ? '' : 'bg-brand-soft/35'"
-            @click="onSelect(item)"
-          >
-            <!-- A read notification is always muted: the tone says what kind of
-                 thing it is, and that only needs to compete for attention while
-                 it is still unread. -->
-            <span
-              class="grid size-7 shrink-0 place-items-center rounded-control"
-              :class="item.read ? 'bg-surface-soft text-muted' : toneLook(item.tone, 'brand').chip"
-            >
-              <LpIcon :name="item.icon || 'lucide:bell'" :size="15" />
-            </span>
-            <span class="min-w-0 flex-1">
-              <span class="flex items-center gap-1.5">
-                <span class="truncate text-sm font-medium" :class="item.read ? 'text-muted-strong' : 'text-ink'">
-                  {{ item.title }}
-                </span>
-                <span v-if="!item.read" class="size-1.5 shrink-0 rounded-full bg-brand" />
-                <span v-if="!item.read" class="sr-only">{{ l.unreadItem }}</span>
-              </span>
-              <span v-if="item.body" class="mt-0.5 line-clamp-2 block text-xs text-muted">
-                {{ item.body }}
-              </span>
-              <span v-if="item.createdAt" class="mt-0.5 block text-[11px] text-muted/70">
-                <template v-if="formatTime">{{ customTime(item.createdAt) }}</template>
-                <!-- The row is itself a button or link, so the exact date goes
-                     to the native title rather than a focusable tooltip. -->
-                <LpRelativeTime v-else :date="item.createdAt" format="narrow" :tooltip="false" />
-              </span>
-            </span>
-          </component>
-        </LpContextMenu>
-      </LpScrollArea>
-    </LpShift>
+    <LpNotificationFeed
+      v-model:filter="filter"
+      :items="items"
+      :unread-count="unreadCount"
+      :loading="loading"
+      :title="title"
+      :empty-label="emptyLabel"
+      :categories="categories"
+      :group-by-day="groupByDay"
+      :has-more="hasMore"
+      :loading-more="loadingMore"
+      :all-link="allLink"
+      :item-menu="itemMenu"
+      :labels="labels"
+      :format-time="formatTime"
+      v-on="optional"
+      @mark-read="emit('markRead', $event)"
+      @mark-unread="emit('markUnread', $event)"
+      @mark-all-read="emit('markAllRead')"
+      @dismiss="emit('dismiss', $event)"
+      @select="onSelect"
+      @action="(item, action) => emit('action', item, action)"
+      @load-more="emit('loadMore')"
+    />
   </LpPopover>
 </template>