UI Stabilization: Global color theme updates (#75B2D6), AI Assistant styling refactor, and navigation fixes

memento-note/components/label-badge.tsx

@@ -1,13 +1,14 @@
 'use client'
 
 import { Badge } from '@/components/ui/badge'
-import { X } from 'lucide-react'
+import { X, Sparkles } from 'lucide-react'
 import { cn } from '@/lib/utils'
 import { LABEL_COLORS } from '@/lib/types'
 import { useNotebooks } from '@/context/notebooks-context'
 
 interface LabelBadgeProps {
   label: string
+  type?: 'ai' | 'user'  // Optional: if provided, applies AI vs User styling
   onRemove?: () => void
   variant?: 'default' | 'filter' | 'clickable'
   onClick?: () => void
@@ -17,6 +18,7 @@ interface LabelBadgeProps {
 
 export function LabelBadge({
   label,
+  type,
   onRemove,
   variant = 'default',
   onClick,
@@ -27,13 +29,16 @@ export function LabelBadge({
   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',
-        colorClasses.bg,
-        colorClasses.text,
-        colorClasses.border,
+        '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',
@@ -41,6 +46,7 @@ export function LabelBadge({
       )}
       onClick={onClick}
     >
+      {isAI && <Sparkles className="h-3 w-3 text-sky-500 dark:text-sky-400" />}
       {label}
       {onRemove && (
         <button
@@ -53,6 +59,12 @@ export function LabelBadge({
           <X className="h-3 w-3" />
         </button>
       )}
+      {isAI && (
+        <span className="relative flex h-1.5 w-1.5 ml-0.5">
+          <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-sky-400 opacity-75"></span>
+          <span className="relative inline-flex rounded-full h-1.5 w-1.5 bg-sky-500"></span>
+        </span>
+      )}
     </Badge>
   )
 }