🎨 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/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 && (
-                <TooltipProvider delay={100}>
-                  <Tooltip>
-                    <TooltipTrigger
-                      render={
-                        <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.5 w-3.5' />
-                    </TooltipTrigger>
-                    <TooltipContent side='top'>
-                      {multiKeyTooltip}
-                    </TooltipContent>
-                  </Tooltip>
-                </TooltipProvider>
-              )}
-              {icon}
-            </div>
+            {isMultiKey && (
+              <TooltipProvider delay={100}>
+                <Tooltip>
+                  <TooltipTrigger
+                    render={
+                      <span className='border-border bg-muted text-primary inline-flex h-5 w-5 items-center justify-center rounded-md border shrink-0' />
+                    }
+                  >
+                    <MultiKeyModeIcon className='h-3 w-3' />
+                  </TooltipTrigger>
+                  <TooltipContent side='top'>
+                    {multiKeyTooltip}
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+            )}
             <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',
   },
 }