refactor(messages): split MessagesView, move search/actions to nav, reuse @antfu/design

Author: antfubot

alias.ts

@@ -101,7 +101,6 @@ export const alias = {
   '@devframes/plugin-messages/client': p('messages/src/client/index.ts'),
   '@devframes/plugin-messages/node': p('messages/src/node/index.ts'),
   '@devframes/plugin-messages/constants': p('messages/src/constants.ts'),
-  '@devframes/plugin-messages/types': p('messages/src/types.ts'),
   '@devframes/plugin-messages/rpc': p('messages/src/rpc/index.ts'),
   '@devframes/plugin-messages/cli': p('messages/src/cli.ts'),
   '@devframes/plugin-messages/vite': p('messages/src/vite.ts'),

plugins/messages/package.json

@@ -27,7 +27,6 @@
     "./constants": "./dist/constants.mjs",
     "./node": "./dist/node/index.mjs",
     "./rpc": "./dist/rpc/index.mjs",
-    "./types": "./dist/types.mjs",
     "./vite": "./dist/vite.mjs",
     "./package.json": "./package.json"
   },
@@ -75,6 +74,7 @@
     "@vueuse/core": "catalog:frontend",
     "colorjs.io": "catalog:frontend",
     "devframe": "workspace:*",
+    "floating-vue": "catalog:frontend",
     "get-port-please": "catalog:deps",
     "h3": "catalog:deps",
     "storybook": "catalog:storybook",

plugins/messages/src/client/App.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
+import type { DevframeMessageEntry } from '@devframes/hub/types'
 import type { DevframeConnectionStatus, DevframeRpcClient } from 'devframe/client'
-import type { DevframeMessageEntry } from '../types'
+import FormSearchField from '@antfu/design/components/Form/FormSearchField.vue'
 import LayoutToolbar from '@antfu/design/components/Layout/LayoutToolbar.vue'
 import { computed, onBeforeUnmount, ref } from 'vue'
 import {
@@ -13,6 +14,8 @@ import {
   connectionTitle,
 } from '../../../../design/design'
 import MessagesView from './components/MessagesView.vue'
+import MessageToolbarActions from './components/MessageToolbarActions.vue'
+import { useMessageFilters } from './composables/useMessageFilters'
 import { useMessages } from './state/messages'
 
 const props = defineProps<{
@@ -21,6 +24,10 @@ const props = defineProps<{
 
 const state = useMessages(props.rpc)
 
+// Search / sort / filter state lives here (not in the view) so the nav bar's
+// search field + actions and the view's filter bar share one source of truth.
+const filters = useMessageFilters(() => state.entries)
+
 // The live feed rides on shared-state over the socket, so a dropped socket or
 // refused auth is surfaced instead of silently freezing the list. The client
 // doesn't auto-reconnect; a reload re-runs the whole handshake.
@@ -50,9 +57,9 @@ async function onDismiss(id: string): Promise<void> {
   await props.rpc.call('devframes:plugin:messages:remove', id)
 }
 
-async function onDismissMany(ids: string[]): Promise<void> {
-  for (const id of ids)
-    await props.rpc.call('devframes:plugin:messages:remove', id)
+async function onDismissFiltered(): Promise<void> {
+  for (const entry of filters.filteredEntries)
+    await props.rpc.call('devframes:plugin:messages:remove', entry.id)
 }
 
 async function onClear(): Promise<void> {
@@ -85,17 +92,26 @@ async function onOpenFile(entry: DevframeMessageEntry): Promise<void> {
       </div>
 
       <template #search>
-        <div />
+        <FormSearchField
+          v-if="!connState"
+          v-model="filters.search"
+          size="sm"
+          placeholder="Search messages…"
+          class="max-w-64"
+        />
       </template>
 
       <template #end>
+        <MessageToolbarActions
+          v-if="!connState"
+          :filters
+          @dismiss-filtered="onDismissFiltered"
+          @clear="onClear"
+        />
         <span v-if="conn" :class="conn.class">
           <span :class="conn.dot" />
           {{ conn.label }}
         </span>
-        <span v-if="state.entries.length > 0" class="badge-muted font-mono">
-          {{ state.entries.length }}
-        </span>
       </template>
     </LayoutToolbar>
 
@@ -122,11 +138,9 @@ async function onOpenFile(entry: DevframeMessageEntry): Promise<void> {
       </div>
       <MessagesView
         v-else
-        :entries="state.entries"
+        :filters
         :can-open-file="canOpenFile"
         @dismiss="onDismiss"
-        @dismiss-many="onDismissMany"
-        @clear="onClear"
         @persist="onPersist"
         @open-file="onOpenFile"
       />

plugins/messages/src/client/components/FilterToggles.stories.ts

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
 import FilterToggles from './FilterToggles.vue'
-import { getHashColorFromString, levels } from './MessageItemConstants'
+import { levels } from './message-styles'
 
 const meta = {
   title: 'Messages/FilterToggles',
@@ -32,11 +32,11 @@ export const LevelsFiltered: Story = {
   },
 }
 
-export const HashColored: Story = {
+export const BadgeColored: Story = {
   args: {
     label: 'Category',
     items: ['a11y', 'lint', 'runtime', 'build'],
     active: new Set<string>(),
-    hashColor: getHashColorFromString,
+    badge: true,
   },
 }

plugins/messages/src/client/components/FilterToggles.vue

@@ -1,39 +1,47 @@
 <script setup lang="ts">
+import DisplayBadge from '@antfu/design/components/Display/DisplayBadge.vue'
+
 defineProps<{
   label: string
   items: string[]
   active: Set<string>
-  /** Map item key → { icon, color, label } for styled items */
+  /** Map item key → { icon, color, label } for styled (level/source) items. */
   styles?: Record<string, { icon?: string, color?: string, label?: string }>
-  /** Compute inline color via hash for items without predefined styles */
-  hashColor?: (item: string, opacity: number) => string
+  /** Render items as hash-colored `DisplayBadge` chips (category/label). */
+  badge?: boolean
 }>()
 
 defineEmits<{
   toggle: [item: string]
 }>()
+
+function isDimmed(active: Set<string>, item: string): boolean {
+  return active.size > 0 && !active.has(item)
+}
 </script>
 
 <template>
-  <span class="text-xs op40">{{ label }}</span>
+  <span class="text-xs op-fade">{{ label }}</span>
   <div class="flex flex-wrap items-center gap-0.5">
     <button
       v-for="item of items"
       :key="item"
-      class="px-1.5 py-0.5 rounded text-xs flex items-center gap-0.5 hover:bg-active transition"
+      type="button"
+      class="rounded flex items-center transition hover:bg-active"
       :class="[
-        active.size === 0 || active.has(item)
-          ? (styles?.[item]?.color || '')
-          : 'op30',
+        badge ? 'p-0.5' : 'px-1.5 py-0.5 gap-0.5 text-xs',
+        !badge && !isDimmed(active, item) ? (styles?.[item]?.color || '') : '',
+        isDimmed(active, item) ? 'op30' : '',
       ]"
-      :style="!styles?.[item]?.color && hashColor ? {
-        color: active.size === 0 || active.has(item) ? hashColor(item, 1) : undefined,
-        backgroundColor: active.size === 0 || active.has(item) ? hashColor(item, 0.1) : undefined,
-      } : undefined"
       @click="$emit('toggle', item)"
     >
-      <div v-if="styles?.[item]?.icon" :class="styles[item]!.icon" class="w-3.5 h-3.5" />
-      <span>{{ styles?.[item]?.label || item }}</span>
+      <template v-if="badge">
+        <DisplayBadge :text="item" class="text-xs" />
+      </template>
+      <template v-else>
+        <div v-if="styles?.[item]?.icon" :class="styles[item]!.icon" class="w-3.5 h-3.5" />
+        <span>{{ styles?.[item]?.label || item }}</span>
+      </template>
     </button>
   </div>
 </template>

plugins/messages/src/client/components/HashBadge.vue

@@ -0,0 +1,171 @@
+<script setup lang="ts">
+import type { DevframeMessageEntry, DevframeMessageEntryFrom } from '@devframes/hub/types'
+import ActionIconButton from '@antfu/design/components/Action/ActionIconButton.vue'
+import DisplayBadge from '@antfu/design/components/Display/DisplayBadge.vue'
+import FeedbackSpinner from '@antfu/design/components/Feedback/FeedbackSpinner.vue'
+import LayoutSeparator from '@antfu/design/components/Layout/LayoutSeparator.vue'
+import { useClipboard, useTimeAgo } from '@vueuse/core'
+import { computed } from 'vue'
+import { fromEntries, levels } from './message-styles'
+
+const props = defineProps<{
+  entry: DevframeMessageEntry
+  /** Show the "open file" affordance for entries with a `filePosition`. */
+  canOpenFile?: boolean
+}>()
+
+const emit = defineEmits<{
+  close: []
+  dismiss: [id: string]
+  openFile: [entry: DevframeMessageEntry]
+  toggleCategory: [category: string]
+  toggleLabel: [label: string]
+}>()
+
+const timeAgo = useTimeAgo(computed(() => props.entry.timestamp))
+const { copy: copyStacktrace, copied: stacktraceCopied } = useClipboard()
+
+const from = computed(() => fromEntries[props.entry.from as DevframeMessageEntryFrom])
+
+function formatAbsoluteTime(ts: number): string {
+  return new Date(ts).toLocaleTimeString()
+}
+
+function filePositionLabel(pos: NonNullable<DevframeMessageEntry['filePosition']>): string {
+  let path = pos.file
+  if (pos.line)
+    path += `:${pos.line}`
+  if (pos.column)
+    path += `:${pos.column}`
+  return path
+}
+</script>
+
+<template>
+  <div class="h-full of-y-auto border-l border-base p-4">
+    <!-- Header -->
+    <div class="flex items-start gap-2 mb-3">
+      <div class="flex-1 font-medium text-lg">
+        {{ entry.message }}
+      </div>
+      <ActionIconButton
+        icon="i-ph:trash-duotone"
+        tooltip="Dismiss"
+        label="Dismiss"
+        @click="emit('dismiss', entry.id)"
+      />
+      <ActionIconButton
+        icon="i-ph:x"
+        tooltip="Close detail"
+        label="Close detail"
+        @click="emit('close')"
+      />
+    </div>
+
+    <!-- Metadata row -->
+    <div class="flex flex-wrap items-center gap-2 mb-3 text-xs">
+      <span class="flex items-center gap-1" :class="levels[entry.level].color">
+        <div :class="levels[entry.level].icon" class="w-3.5 h-3.5" />
+        <span class="capitalize">{{ entry.level }}</span>
+      </span>
+      <span v-if="from" class="flex items-center gap-1" :class="from.color">
+        <div :class="from.icon" class="w-3.5 h-3.5" />
+        {{ from.label }}
+      </span>
+      <span v-if="entry.status === 'loading'" class="flex items-center gap-1 text-amber">
+        <FeedbackSpinner size="0.75rem" />
+        Loading
+      </span>
+      <span class="op40" :title="formatAbsoluteTime(entry.timestamp)">
+        {{ timeAgo }}
+      </span>
+      <span v-if="entry.notify" class="flex items-center gap-0.5 op40">
+        <div class="i-ph:bell-duotone w-3.5 h-3.5" />
+        notify
+      </span>
+    </div>
+
+    <!-- Description -->
+    <div v-if="entry.description" class="text-sm op80 mb-3 whitespace-pre-wrap">
+      {{ entry.description }}
+    </div>
+
+    <!-- Category + Labels -->
+    <div v-if="entry.category || entry.labels?.length" class="flex flex-wrap gap-1 mb-3">
+      <DisplayBadge v-if="entry.category" :text="entry.category" as="button" class="text-xs cursor-pointer" @click="emit('toggleCategory', entry.category)" />
+      <DisplayBadge v-for="label of entry.labels" :key="label" :text="label" as="button" class="text-xs cursor-pointer" @click="emit('toggleLabel', label)" />
+    </div>
+
+    <!-- File position -->
+    <button
+      v-if="entry.filePosition && canOpenFile"
+      type="button"
+      class="flex items-start gap-1.5 text-left text-sm color-active hover:underline mb-3 break-all"
+      @click="emit('openFile', entry)"
+    >
+      <div class="i-ph:file-code-duotone w-4 h-4 flex-none mt-0.5" />
+      <span>{{ filePositionLabel(entry.filePosition) }}</span>
+    </button>
+    <div
+      v-else-if="entry.filePosition"
+      class="flex items-start gap-1.5 text-sm op60 mb-3 break-all"
+    >
+      <div class="i-ph:file-code-duotone w-4 h-4 flex-none mt-0.5" />
+      <span>{{ filePositionLabel(entry.filePosition) }}</span>
+    </div>
+
+    <!-- Element position -->
+    <div v-if="entry.elementPosition" class="text-sm mb-3 bg-gray/5 rounded p-2">
+      <div class="op50 text-xs mb-1">
+        Element
+      </div>
+      <div v-if="entry.elementPosition.selector" class="font-mono text-xs">
+        {{ entry.elementPosition.selector }}
+      </div>
+      <div v-if="entry.elementPosition.description" class="text-xs op70 mt-1">
+        {{ entry.elementPosition.description }}
+      </div>
+      <div v-if="entry.elementPosition.boundingBox" class="text-xs op50 mt-1 font-mono">
+        {{ entry.elementPosition.boundingBox.x }}, {{ entry.elementPosition.boundingBox.y }}
+        ({{ entry.elementPosition.boundingBox.width }} × {{ entry.elementPosition.boundingBox.height }})
+      </div>
+    </div>
+
+    <!-- Stacktrace -->
+    <div v-if="entry.stacktrace" class="mb-3">
+      <div class="op50 text-xs mb-1">
+        Stack Trace
+      </div>
+      <div class="group relative">
+        <pre class="text-xs bg-gray/5 rounded p-2 of-x-auto whitespace-pre-wrap font-mono">{{ entry.stacktrace }}</pre>
+        <ActionIconButton
+          compact
+          class="absolute top-1.5 right-1.5 op0 group-hover:op100 text-xs bg-base border border-base"
+          :icon="stacktraceCopied ? 'i-ph:check' : 'i-ph:copy'"
+          tooltip="Copy"
+          label="Copy stack trace"
+          @click="copyStacktrace(entry.stacktrace)"
+        />
+      </div>
+    </div>
+
+    <!-- Timers -->
+    <div v-if="entry.autoDismiss || entry.autoDelete" class="flex flex-wrap gap-3 mb-3 text-xs op50">
+      <span v-if="entry.autoDismiss" class="flex items-center gap-1">
+        <div class="i-ph:bell-slash-duotone w-3.5 h-3.5" />
+        Auto-dismiss: {{ entry.autoDismiss / 1000 }}s
+      </span>
+      <span v-if="entry.autoDelete" class="flex items-center gap-1">
+        <div class="i-ph:timer-duotone w-3.5 h-3.5" />
+        Auto-delete: {{ entry.autoDelete / 1000 }}s
+      </span>
+    </div>
+
+    <!-- ID + Timestamp -->
+    <LayoutSeparator />
+    <div class="flex flex-col gap-1 text-xs op40 font-mono">
+      <span>ID: {{ entry.id }}</span>
+      <span>{{ formatAbsoluteTime(entry.timestamp) }} ({{ new Date(entry.timestamp).toLocaleDateString() }})</span>
+    </div>
+  </div>
+</template>