style(frontend): refine badges and cycle stats

frontend/src/components/ui/__tests__/badge.spec.ts

@@ -0,0 +1,31 @@
+import { afterEach, describe, expect, it } from 'vitest'
+import { createApp, h, type App } from 'vue'
+
+import Badge from '../badge.vue'
+
+const mountedApps: Array<{ app: App, root: HTMLElement }> = []
+
+afterEach(() => {
+  for (const { app, root } of mountedApps.splice(0)) {
+    app.unmount()
+    root.remove()
+  }
+})
+
+describe('Badge', () => {
+  it('renders the transparent outline variant without the card background', () => {
+    const root = document.createElement('div')
+    document.body.appendChild(root)
+    const app = createApp({
+      render: () => h(Badge, { variant: 'outline-transparent' }, () => 'Fast'),
+    })
+
+    app.mount(root)
+    mountedApps.push({ app, root })
+
+    const badge = root.firstElementChild
+    expect(badge?.classList.contains('border-border')).toBe(true)
+    expect(badge?.classList.contains('bg-transparent')).toBe(true)
+    expect(badge?.classList.contains('bg-card/50')).toBe(false)
+  })
+})

frontend/src/components/ui/badge.vue

@@ -20,6 +20,7 @@ const badgeVariants = cva(
         destructive:
           'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
         outline: 'text-foreground border-border bg-card/50',
+        'outline-transparent': 'text-foreground border-border bg-transparent',
         success:
           'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
         warning:
@@ -35,7 +36,7 @@ const badgeVariants = cva(
 )
 
 interface Props {
-  variant?: 'default' | 'secondary' | 'destructive' | 'outline' | 'success' | 'warning' | 'dark'
+  variant?: 'default' | 'secondary' | 'destructive' | 'outline' | 'outline-transparent' | 'success' | 'warning' | 'dark'
   class?: string
 }