feat(messages): distinguish category and label tags (left border vs pill)

Author: antfubot

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

@@ -32,11 +32,20 @@ export const LevelsFiltered: Story = {
   },
 }
 
-export const BadgeColored: Story = {
+export const CategoryTags: Story = {
   args: {
     label: 'Category',
     items: ['a11y', 'lint', 'runtime', 'build'],
     active: new Set<string>(),
-    badge: true,
+    tag: 'category',
+  },
+}
+
+export const LabelTags: Story = {
+  args: {
+    label: 'Labels',
+    items: ['axe', 'eslint', 'vite', 'hmr'],
+    active: new Set<string>(),
+    tag: 'label',
   },
 }

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

@@ -1,14 +1,14 @@
 <script setup lang="ts">
-import DisplayBadge from '@antfu/design/components/Display/DisplayBadge.vue'
+import MessageTag from './MessageTag.vue'
 
 defineProps<{
   label: string
   items: string[]
   active: Set<string>
   /** Map item key → { icon, color, label } for styled (level/source) items. */
   styles?: Record<string, { icon?: string, color?: string, label?: string }>
-  /** Render items as hash-colored `DisplayBadge` chips (category/label). */
-  badge?: boolean
+  /** Render items as hash-colored `MessageTag` chips of this kind (category/label). */
+  tag?: 'category' | 'label'
 }>()
 
 defineEmits<{
@@ -29,14 +29,14 @@ function isDimmed(active: Set<string>, item: string): boolean {
       type="button"
       class="rounded flex items-center transition"
       :class="[
-        badge ? 'p-0.5' : 'px-1.5 py-0.5 gap-0.5 text-xs',
-        !badge && !isDimmed(active, item) ? (styles?.[item]?.color || '') : '',
+        tag ? 'p-0.5' : 'px-1.5 py-0.5 gap-0.5 text-xs',
+        !tag && !isDimmed(active, item) ? (styles?.[item]?.color || '') : '',
         isDimmed(active, item) ? 'op30 saturate-50' : '',
       ]"
       @click="$emit('toggle', item)"
     >
-      <template v-if="badge">
-        <DisplayBadge :text="item" class="text-xs" />
+      <template v-if="tag">
+        <MessageTag :text="item" :kind="tag" />
       </template>
       <template v-else>
         <div v-if="styles?.[item]?.icon" :class="styles[item]!.icon" class="w-3.5 h-3.5" />

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

@@ -1,12 +1,12 @@
 <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'
+import MessageTag from './MessageTag.vue'
 
 const props = defineProps<{
   entry: DevframeMessageEntry
@@ -92,8 +92,8 @@ function filePositionLabel(pos: NonNullable<DevframeMessageEntry['filePosition']
 
     <!-- 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)" />
+      <MessageTag v-if="entry.category" :text="entry.category" kind="category" as="button" class="cursor-pointer" @click="emit('toggleCategory', entry.category)" />
+      <MessageTag v-for="label of entry.labels" :key="label" :text="label" kind="label" as="button" class="cursor-pointer" @click="emit('toggleLabel', label)" />
     </div>
 
     <!-- File position -->

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

@@ -38,7 +38,7 @@ const { filters } = props
         label="Category"
         :items="filters.allCategories"
         :active="(filters.activeCategories as Set<string>)"
-        badge
+        tag="category"
         @toggle="filters.toggleCategory"
       />
     </template>
@@ -49,7 +49,7 @@ const { filters } = props
         label="Labels"
         :items="filters.allLabels"
         :active="(filters.activeLabels as Set<string>)"
-        badge
+        tag="label"
         @toggle="filters.toggleLabel"
       />
     </template>

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

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { DevframeMessageEntry } from '@devframes/hub/types'
-import DisplayBadge from '@antfu/design/components/Display/DisplayBadge.vue'
 import FeedbackSpinner from '@antfu/design/components/Feedback/FeedbackSpinner.vue'
 import { useTimeAgo } from '@vueuse/core'
 import { levels } from './message-styles'
+import MessageTag from './MessageTag.vue'
 
 const props = defineProps<{
   entry: DevframeMessageEntry
@@ -40,8 +40,8 @@ const timeAgo = useTimeAgo(() => props.entry.timestamp)
         {{ entry.description }}
       </div>
       <div v-if="!compact && (entry.category || entry.labels?.length)" class="flex flex-wrap items-center gap-1">
-        <DisplayBadge v-if="entry.category" :text="entry.category" class="text-xs" />
-        <DisplayBadge v-for="label of entry.labels" :key="label" :text="label" class="text-xs" />
+        <MessageTag v-if="entry.category" :text="entry.category" kind="category" />
+        <MessageTag v-for="label of entry.labels" :key="label" :text="label" kind="label" />
       </div>
     </div>
   </div>

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

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import DisplayBadge from '@antfu/design/components/Display/DisplayBadge.vue'
+
+// A hash-colored chip for an entry's category/label, distinguished by kind so
+// the two read apart at a glance: a `category` keeps a thicker left border,
+// a `label` renders as a rounded pill.
+defineProps<{
+  text: string
+  kind: 'category' | 'label'
+  /** Render as another element (e.g. `button` for a clickable filter chip). */
+  as?: string
+}>()
+</script>
+
+<template>
+  <DisplayBadge
+    :text="text"
+    :as="as"
+    :rounded="kind === 'label' ? 'full' : 'md'"
+    class="text-xs"
+    :class="kind === 'category' ? 'border-l-2!' : ''"
+  />
+</template>