feat: standardize UI theme, fix dark mode consistency, and implement editorial tags

memento-note/components/label-badge.tsx

@@ -1,14 +1,11 @@
 'use client'
 
-import { Badge } from '@/components/ui/badge'
-import { X, Sparkles } from 'lucide-react'
 import { cn } from '@/lib/utils'
-import { LABEL_COLORS } from '@/lib/types'
-import { useNotebooks } from '@/context/notebooks-context'
+import { X, Sparkles } from 'lucide-react'
 
 interface LabelBadgeProps {
   label: string
-  type?: 'ai' | 'user'  // Optional: if provided, applies AI vs User styling
+  type?: 'ai' | 'user'
   onRemove?: () => void
   variant?: 'default' | 'filter' | 'clickable'
   onClick?: () => void
@@ -25,46 +22,54 @@ export function LabelBadge({
   isSelected = false,
   isDisabled = false,
 }: LabelBadgeProps) {
-  const { getLabelColor } = useNotebooks()
-  const colorName = getLabelColor(label)
-  const colorClasses = LABEL_COLORS[colorName] || LABEL_COLORS.gray
-
-  // AI labels get special Blueprint styling with Sparkles icon
   const isAI = type === 'ai'
 
   return (
-    <Badge
-      className={cn(
-        'text-xs border gap-1 transition-all',
-        isAI
-          ? 'bg-blue-100/70 border-blue-200/50 text-sky-700 dark:bg-sky-900/30 dark:border-sky-700/50 dark:text-sky-300 hover:bg-blue-200/70'
-          : `${colorClasses.bg} ${colorClasses.text} ${colorClasses.border}`,
-        variant === 'filter' && 'cursor-pointer hover:opacity-80',
-        variant === 'clickable' && 'cursor-pointer',
-        isDisabled && 'opacity-50',
-        isSelected && 'ring-2 ring-primary'
-      )}
+    <button
+      type="button"
       onClick={onClick}
+      disabled={isDisabled}
+      className={cn(
+        'inline-flex items-center gap-1.5 rounded-full border px-2.5 py-0.5 text-[9px] font-bold uppercase tracking-wider transition-all',
+        variant === 'filter' && !isSelected && 'cursor-pointer',
+        variant === 'clickable' && 'cursor-pointer',
+        isDisabled && 'opacity-50 cursor-not-allowed',
+        isSelected
+          ? 'bg-foreground text-background border-foreground shadow-sm'
+          : isAI
+            ? 'bg-[#75B2D6]/10 border-[#75B2D6]/25 text-[#75B2D6]'
+            : 'bg-[#8D8D8D]/10 border-[#8D8D8D]/25 text-[#8D8D8D]',
+      )}
     >
-      {isAI && <Sparkles className="h-3 w-3 text-[#75B2D6]" />}
+      {isAI && (
+        <Sparkles size={8} className="text-[#75B2D6]/70" />
+      )}
       <span className="truncate">{label}</span>
       {onRemove && (
-        <button
+        <span
+          role="button"
+          tabIndex={0}
           onClick={(e) => {
             e.stopPropagation()
             onRemove()
           }}
-          className="hover:text-red-600"
+          onKeyDown={(e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+              e.stopPropagation()
+              onRemove()
+            }
+          }}
+          className="hover:text-red-500 transition-colors cursor-pointer"
         >
-          <X className="h-3 w-3" />
-        </button>
-      )}
-      {isAI && (
-        <span className="relative flex h-1.5 w-1.5 ml-1">
-          <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-[#75B2D6] opacity-75"></span>
-          <span className="relative inline-flex rounded-full h-1.5 w-1.5 bg-[#75B2D6]"></span>
+          <X size={8} />
         </span>
       )}
-    </Badge>
+      {isAI && !isSelected && (
+        <span className="relative flex h-1.5 w-1.5">
+          <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-[#75B2D6] opacity-75" />
+          <span className="relative inline-flex rounded-full h-1.5 w-1.5 bg-[#75B2D6]" />
+        </span>
+      )}
+    </button>
   )
 }