🎨 refactor(badge): restore status-badge sizes and classic color scheme

- Restore StatusBadge sizes to h-5/text-xs (sm, md) and h-6/text-xs (lg).
- Restore classic textColorMap coloring and status indicator dot.
- Embed channel type icon directly inside StatusBadge as custom children.
- Re-align status badge colors: danger for manual disabled, warning for auto disabled.

web/default/src/components/group-badge.tsx

@@ -94,7 +94,7 @@ export function GroupBadge(props: GroupBadgeProps) {
       {badge}
       <span
         className={cn(
-          'inline-flex h-5 items-center rounded-full px-2 font-mono text-xs leading-none font-medium tabular-nums',
+          'inline-flex h-5 items-center rounded-full px-1.5 font-mono text-xs leading-none font-medium tabular-nums',
           getGroupRatioClassName(ratio)
         )}
       >

web/default/src/components/status-badge.tsx

@@ -74,34 +74,11 @@ export const textColorMap = {
 export type StatusVariant = keyof typeof dotColorMap
 
 const sizeMap = {
-  sm: 'h-5 gap-1 px-2 text-xs leading-none',
+  sm: 'h-5 gap-1 px-1.5 text-xs leading-none',
-  md: 'h-6 gap-1 px-2 text-xs leading-none',
+  md: 'h-5 gap-1 px-1.5 text-xs leading-none',
-  lg: 'h-7 gap-1.5 px-2.5 text-sm leading-none',
+  lg: 'h-6 gap-1.5 px-2 text-xs leading-none',
 } as const
 
-const badgeSurfaceMap = {
-  success: 'bg-success/10 text-success',
-  warning: 'bg-warning/10 text-warning',
-  danger: 'bg-destructive/10 text-destructive',
-  info: 'bg-info/10 text-info',
-  neutral: 'bg-muted text-muted-foreground',
-  purple: 'bg-chart-4/10 text-chart-4',
-  amber: 'bg-warning/10 text-warning',
-  blue: 'bg-chart-1/10 text-chart-1',
-  cyan: 'bg-chart-2/10 text-chart-2',
-  green: 'bg-success/10 text-success',
-  grey: 'bg-muted text-muted-foreground',
-  indigo: 'bg-chart-1/10 text-chart-1',
-  'light-blue': 'bg-info/10 text-info',
-  'light-green': 'bg-success/10 text-success',
-  lime: 'bg-chart-3/10 text-chart-3',
-  orange: 'bg-warning/10 text-warning',
-  pink: 'bg-chart-5/10 text-chart-5',
-  red: 'bg-destructive/10 text-destructive',
-  teal: 'bg-chart-2/10 text-chart-2',
-  violet: 'bg-chart-4/10 text-chart-4',
-  yellow: 'bg-warning/10 text-warning',
-} as const
 
 export interface StatusBadgeProps extends Omit<
   React.HTMLAttributes<HTMLSpanElement>,
@@ -127,7 +104,7 @@ export function StatusBadge({
   variant,
   size = 'sm',
   pulse = false,
-  showDot = false,
+  showDot = true,
   copyable = true,
   copyText,
   autoColor,
@@ -136,7 +113,6 @@ export function StatusBadge({
   ...props
 }: StatusBadgeProps) {
   const { copyToClipboard } = useCopyToClipboard()
-  void showDot
 
   const computedVariant: StatusVariant = autoColor
     ? (stringToColor(autoColor) as StatusVariant)
@@ -158,7 +134,7 @@ export function StatusBadge({
       className={cn(
         'inline-flex w-fit max-w-full shrink-0 items-center rounded-full font-medium tracking-normal whitespace-nowrap transition-colors',
         sizeMap[size ?? 'sm'],
-        badgeSurfaceMap[computedVariant],
+        textColorMap[computedVariant],
         pulse && 'animate-pulse',
         copyable &&
           'cursor-copy hover:brightness-95 active:scale-95 dark:hover:brightness-110',
@@ -168,7 +144,16 @@ export function StatusBadge({
       title={copyable ? `Click to copy: ${copyText || label || ''}` : undefined}
       {...props}
     >
-      {Icon && <Icon className='size-3 shrink-0' />}
+      {showDot && (
+        <span
+          className={cn(
+            'inline-block size-1.5 shrink-0 rounded-full',
+            dotColorMap[computedVariant]
+          )}
+          aria-hidden='true'
+        />
+      )}
+      {Icon && <Icon className='size-3.5 shrink-0' />}
       {content}
     </span>
   )

web/default/src/features/channels/components/channels-columns.tsx

@@ -613,7 +613,7 @@ export function useChannelsColumns(): ColumnDef<Channel>[] {
         const typeNameKey = getChannelTypeLabel(type)
         const typeName = t(typeNameKey)
         const iconName = getChannelTypeIcon(type)
-        const icon = getLobeIcon(`${iconName}.Color`, 20)
+        const icon = getLobeIcon(`${iconName}.Color`, 14)
         const channel = row.original as Channel
         const isMultiKey = isMultiKeyChannel(channel)
         const multiKeyMode = channel.channel_info?.multi_key_mode ?? 'random'
@@ -633,31 +633,32 @@ export function useChannelsColumns(): ColumnDef<Channel>[] {
 
         return (
           <div className='flex items-center gap-2'>
-            <div className='flex items-center gap-1.5'>
+            {isMultiKey && (
-              {isMultiKey && (
+              <TooltipProvider delay={100}>
-                <TooltipProvider delay={100}>
+                <Tooltip>
-                  <Tooltip>
+                  <TooltipTrigger
-                    <TooltipTrigger
+                    render={
-                      render={
+                      <span className='border-border bg-muted text-primary inline-flex h-5 w-5 items-center justify-center rounded-md border shrink-0' />
-                        <span className='border-border bg-muted text-primary inline-flex h-6 w-6 items-center justify-center rounded-md border' />
+                    }
-                      }
+                  >
-                    >
+                    <MultiKeyModeIcon className='h-3 w-3' />
-                      <MultiKeyModeIcon className='h-3.5 w-3.5' />
+                  </TooltipTrigger>
-                    </TooltipTrigger>
+                  <TooltipContent side='top'>
-                    <TooltipContent side='top'>
+                    {multiKeyTooltip}
-                      {multiKeyTooltip}
+                  </TooltipContent>
-                    </TooltipContent>
+                </Tooltip>
-                  </Tooltip>
+              </TooltipProvider>
-                </TooltipProvider>
+            )}
-              )}
-              {icon}
-            </div>
             <StatusBadge
-              label={typeName}
               autoColor={typeName}
               size='sm'
               copyable={false}
-            />
+              showDot={false}
+              className='pl-1 gap-1'
+            >
+              {icon}
+              <span className='truncate'>{typeName}</span>
+            </StatusBadge>
             {isIonet && (
               <TooltipProvider delay={100}>
                 <Tooltip>

web/default/src/features/channels/constants.ts

@@ -137,11 +137,11 @@ export const CHANNEL_STATUS_CONFIG = {
     label: 'Enabled',
   },
   [CHANNEL_STATUS.MANUAL_DISABLED]: {
-    variant: 'neutral' as const,
+    variant: 'danger' as const,
     label: 'Disabled',
   },
   [CHANNEL_STATUS.AUTO_DISABLED]: {
-    variant: 'danger' as const,
+    variant: 'warning' as const,
     label: 'Auto Disabled',
   },
 }