fix(web): optimize channel tag aggregate card layout (QuantumNous#5640)

web/default/src/features/channels/components/channel-card.tsx

@@ -100,7 +100,15 @@ function ChannelCardComponent({
             {!isTagRow && selectCell && (
               <span className='shrink-0'>{selectCell}</span>
             )}
-            <div className='min-w-0 overflow-hidden'>{typeCell}</div>
+            <div
+              className={cn(
+                isTagRow
+                  ? 'shrink-0 overflow-visible [&_[data-slot=status-badge]]:max-w-none [&_[data-slot=status-badge]]:shrink-0'
+                  : 'min-w-0 overflow-hidden'
+              )}
+            >
+              {typeCell}
+            </div>
           </div>
           <div className='flex shrink-0 items-center gap-1.5'>
             {showStatusBadge && statusCell}
@@ -113,7 +121,12 @@ function ChannelCardComponent({
         <div className='flex items-start justify-between gap-3'>
           {/* Left column */}
           <div className='flex min-w-0 flex-1 flex-col gap-3 overflow-hidden'>
-            <div className='min-w-0 text-sm'>
+            <div
+              className={cn(
+                'min-w-0 text-sm',
+                isTagRow && '[&>div]:!max-w-none [&>div]:w-full'
+              )}
+            >
               {!isTagRow && (
                 <div className={labelClass}>
                   #{sensitiveVisible ? row.original.id : SENSITIVE_MASK}

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

@@ -570,6 +570,10 @@ export function useChannelsColumns(
         header: t('ID'),
         meta: { mobileHidden: true },
         cell: ({ row }) => {
+          if (isTagAggregateRow(row.original)) {
+            return null
+          }
+
           const id = row.getValue('id') as number
           return <TableId value={sensitiveVisible ? id : SENSITIVE_MASK} />
         },
@@ -589,13 +593,16 @@ export function useChannelsColumns(
           if (isTagRow) {
             const tag = (row.original as TagRow).tag || name
             const childrenCount = (row.original as TagRow).children?.length || 0
+            const channelCountLabel = t('{{count}} channel', {
+              count: childrenCount,
+            })
 
             return (
-              <div className='flex items-center gap-2'>
+              <div className='flex max-w-[220px] min-w-0 items-start gap-2 overflow-hidden'>
                 <Button
                   variant='ghost'
                   size='sm'
-                  className='h-6 w-6 p-0'
+                  className='h-6 w-6 shrink-0 p-0'
                   onClick={row.getToggleExpandedHandler()}
                 >
                   {row.getIsExpanded() ? (
@@ -604,13 +611,16 @@ export function useChannelsColumns(
                     <ChevronRight className='h-4 w-4' />
                   )}
                 </Button>
-                <div className='flex items-center gap-1.5'>
-                  <span className='font-semibold'>Tag：{tag}</span>
+                <div className='flex max-w-full min-w-0 flex-1 flex-wrap items-center gap-x-1.5 gap-y-1 overflow-hidden'>
+                  <span className='min-w-0 max-w-full flex-1 break-words whitespace-normal font-semibold'>
+                    {t('Tag:')} {tag}
+                  </span>
                   <StatusBadge
-                    label={`${childrenCount} channels`}
+                    label={channelCountLabel}
                     variant='blue'
                     size='sm'
                     copyable={false}
+                    className='shrink-0'
                   />
                 </div>
               </div>
@@ -835,11 +845,16 @@ export function useChannelsColumns(
           if (isTagRow) {
             const childrenCount = (row.original as TagRow).children?.length || 0
             const hasEnabled = status === 1
+            const statusLabel = t(hasEnabled ? 'Active' : 'Inactive')
+            const aggregateStatusLabel = t('{{status}} ({{count}})', {
+              status: statusLabel,
+              count: childrenCount,
+            })
 
             if (hasEnabled) {
               return (
                 <StatusBadge
-                  label={`Active (${childrenCount})`}
+                  label={aggregateStatusLabel}
                   variant='success'
                   size='sm'
                   copyable={false}
@@ -849,7 +864,7 @@ export function useChannelsColumns(
             } else {
               return (
                 <StatusBadge
-                  label={`Inactive (${childrenCount})`}
+                  label={aggregateStatusLabel}
                   variant='neutral'
                   size='sm'
                   copyable={false}

web/default/src/i18n/locales/en.json

@@ -26,11 +26,17 @@
     "{{completed}}/{{total}} completed": "{{completed}}/{{total}} completed",
     "{{count}} announcements will be removed from the list.": "{{count}} announcements will be removed from the list.",
     "{{count}} API shortcuts will be removed from the list.": "{{count}} API shortcuts will be removed from the list.",
+    "{{count}} channel": "{{count}} channel",
+    "{{count}} channel_few": "{{count}} channels",
+    "{{count}} channel_many": "{{count}} channels",
+    "{{count}} channel_one": "{{count}} channel",
+    "{{count}} channel_other": "{{count}} channels",
     "{{count}} channel(s) deleted": "{{count}} channel(s) deleted",
     "{{count}} channel(s) disabled": "{{count}} channel(s) disabled",
     "{{count}} channel(s) enabled": "{{count}} channel(s) enabled",
     "{{count}} channel(s) failed to disable": "{{count}} channel(s) failed to disable",
     "{{count}} channel(s) failed to enable": "{{count}} channel(s) failed to enable",
+    "{{count}} channels": "{{count}} channels",
     "{{count}} days ago": "{{count}} days ago",
     "{{count}} days remaining": "{{count}} days remaining",
     "{{count}} disabled channel(s) deleted": "{{count}} disabled channel(s) deleted",
@@ -57,6 +63,7 @@
     "{{modality}} supported": "{{modality}} supported",
     "{{n}} model(s) selected": "{{n}} model(s) selected",
     "{{processed}} of {{total}} log entries processed.": "{{processed}} of {{total}} log entries processed.",
+    "{{status}} ({{count}})": "{{status}} ({{count}})",
     "{{success}} succeeded, {{failed}} failed": "{{success}} succeeded, {{failed}} failed",
     "{{target}} test failed": "{{target}} test failed",
     "{{target}} test succeeded": "{{target}} test succeeded",
@@ -2200,6 +2207,7 @@
     "Important": "Important",
     "In Progress": "In Progress",
     "In:": "In:",
+    "Inactive": "Inactive",
     "incident": "incident",
     "incidents": "incidents",
     "Incidents": "Incidents",

web/default/src/i18n/locales/fr.json

@@ -26,11 +26,17 @@
     "{{completed}}/{{total}} completed": "{{completed}}/{{total}} terminé(s)",
     "{{count}} announcements will be removed from the list.": "{{count}} annonces seront retirées de la liste.",
     "{{count}} API shortcuts will be removed from the list.": "{{count}} raccourcis API seront retirés de la liste.",
+    "{{count}} channel": "{{count}} canal",
+    "{{count}} channel_few": "{{count}} canaux",
+    "{{count}} channel_many": "{{count}} canaux",
+    "{{count}} channel_one": "{{count}} canal",
+    "{{count}} channel_other": "{{count}} canaux",
     "{{count}} channel(s) deleted": "{{count}} canal(canaux) supprimé(s)",
     "{{count}} channel(s) disabled": "{{count}} canal(canaux) désactivé(s)",
     "{{count}} channel(s) enabled": "{{count}} canal(canaux) activé(s)",
     "{{count}} channel(s) failed to disable": "{{count}} canal(canaux) n'ont pas pu être désactivé(s)",
     "{{count}} channel(s) failed to enable": "{{count}} canal(canaux) n'ont pas pu être activé(s)",
+    "{{count}} channels": "{{count}} canaux",
     "{{count}} days ago": "il y a {{count}} jours",
     "{{count}} days remaining": "{{count}} days remaining",
     "{{count}} disabled channel(s) deleted": "{{count}} canal(canaux) désactivé(s) supprimé(s)",
@@ -57,6 +63,7 @@
     "{{modality}} supported": "{{modality}} pris en charge",
     "{{n}} model(s) selected": "{{n}} modèle(s) sélectionné(s)",
     "{{processed}} of {{total}} log entries processed.": "{{processed}} sur {{total}} entrées de journal traitées.",
+    "{{status}} ({{count}})": "{{status}} ({{count}})",
     "{{success}} succeeded, {{failed}} failed": "{{success}} réussi(s), {{failed}} échoué(s)",
     "{{target}} test failed": "Échec du test de {{target}}",
     "{{target}} test succeeded": "Test de {{target}} réussi",
@@ -2200,6 +2207,7 @@
     "Important": "Important",
     "In Progress": "En cours",
     "In:": "Entrée :",
+    "Inactive": "Inactif",
     "incident": "incident",
     "incidents": "incidents",
     "Incidents": "Incidents",

web/default/src/i18n/locales/ja.json

@@ -26,11 +26,17 @@
     "{{completed}}/{{total}} completed": "{{completed}}/{{total}} 完了",
     "{{count}} announcements will be removed from the list.": "{{count}} 件のお知らせがリストから削除されます。",
     "{{count}} API shortcuts will be removed from the list.": "{{count}} 件の API ショートカットがリストから削除されます。",
+    "{{count}} channel": "{{count}} チャンネル",
+    "{{count}} channel_few": "{{count}} チャンネル",
+    "{{count}} channel_many": "{{count}} チャンネル",
+    "{{count}} channel_one": "{{count}} チャンネル",
+    "{{count}} channel_other": "{{count}} チャンネル",
     "{{count}} channel(s) deleted": "{{count}} 個のチャネルを削除しました",
     "{{count}} channel(s) disabled": "{{count}} 個のチャネルを無効にしました",
     "{{count}} channel(s) enabled": "{{count}} 個のチャネルを有効にしました",
     "{{count}} channel(s) failed to disable": "{{count}} 個のチャネルの無効化に失敗しました",
     "{{count}} channel(s) failed to enable": "{{count}} 個のチャネルの有効化に失敗しました",
+    "{{count}} channels": "{{count}} チャンネル",
     "{{count}} days ago": "{{count}} 日前",
     "{{count}} days remaining": "残り {{count}} 日",
     "{{count}} disabled channel(s) deleted": "{{count}} 個の無効チャネルを削除しました",
@@ -57,6 +63,7 @@
     "{{modality}} supported": "{{modality}} をサポート",
     "{{n}} model(s) selected": "{{n}} 件のモデルを選択済み",
     "{{processed}} of {{total}} log entries processed.": "{{total}} 件中 {{processed}} 件のログを処理しました。",
+    "{{status}} ({{count}})": "{{status}}（{{count}}）",
     "{{success}} succeeded, {{failed}} failed": "{{success}} 件成功、{{failed}} 件失敗",
     "{{target}} test failed": "{{target}} のテストに失敗しました",
     "{{target}} test succeeded": "{{target}} のテストに成功しました",
@@ -2200,6 +2207,7 @@
     "Important": "重要",
     "In Progress": "処理中",
     "In:": "入力：",
+    "Inactive": "無効",
     "incident": "件",
     "incidents": "件",
     "Incidents": "インシデント",

web/default/src/i18n/locales/ru.json

@@ -26,11 +26,17 @@
     "{{completed}}/{{total}} completed": "{{completed}}/{{total}} завершено",
     "{{count}} announcements will be removed from the list.": "{{count}} объявлений будут удалены из списка.",
     "{{count}} API shortcuts will be removed from the list.": "{{count}} ярлыков API будут удалены из списка.",
+    "{{count}} channel": "{{count}} канал",
+    "{{count}} channel_few": "{{count}} канала",
+    "{{count}} channel_many": "{{count}} каналов",
+    "{{count}} channel_one": "{{count}} канал",
+    "{{count}} channel_other": "{{count}} канала",
     "{{count}} channel(s) deleted": "Удалено {{count}} каналов",
     "{{count}} channel(s) disabled": "Отключено {{count}} каналов",
     "{{count}} channel(s) enabled": "Включено {{count}} каналов",
     "{{count}} channel(s) failed to disable": "Не удалось отключить {{count}} каналов",
     "{{count}} channel(s) failed to enable": "Не удалось включить {{count}} каналов",
+    "{{count}} channels": "{{count}} каналов",
     "{{count}} days ago": "{{count}} дней назад",
     "{{count}} days remaining": "Осталось {{count}} дней",
     "{{count}} disabled channel(s) deleted": "Удалено {{count}} отключённых каналов",
@@ -57,6 +63,7 @@
     "{{modality}} supported": "{{modality}} поддерживается",
     "{{n}} model(s) selected": "Выбрано моделей: {{n}}",
     "{{processed}} of {{total}} log entries processed.": "Обработано {{processed}} из {{total}} записей журнала.",
+    "{{status}} ({{count}})": "{{status}} ({{count}})",
     "{{success}} succeeded, {{failed}} failed": "{{success}} успешно, {{failed}} с ошибкой",
     "{{target}} test failed": "Тест {{target}} не выполнен",
     "{{target}} test succeeded": "Тест {{target}} успешно выполнен",
@@ -2200,6 +2207,7 @@
     "Important": "Важно",
     "In Progress": "Выполняется",
     "In:": "Вх:",
+    "Inactive": "Неактивна",
     "incident": "инцидент",
     "incidents": "инцидентов",
     "Incidents": "Инциденты",

web/default/src/i18n/locales/vi.json

@@ -26,11 +26,17 @@
     "{{completed}}/{{total}} completed": "Đã hoàn tất {{completed}}/{{total}}",
     "{{count}} announcements will be removed from the list.": "{{count}} thông báo sẽ bị xóa khỏi danh sách.",
     "{{count}} API shortcuts will be removed from the list.": "{{count}} lối tắt API sẽ bị xóa khỏi danh sách.",
+    "{{count}} channel": "{{count}} kênh",
+    "{{count}} channel_few": "{{count}} kênh",
+    "{{count}} channel_many": "{{count}} kênh",
+    "{{count}} channel_one": "{{count}} kênh",
+    "{{count}} channel_other": "{{count}} kênh",
     "{{count}} channel(s) deleted": "Đã xóa {{count}} kênh",
     "{{count}} channel(s) disabled": "Đã tắt {{count}} kênh",
     "{{count}} channel(s) enabled": "Đã bật {{count}} kênh",
     "{{count}} channel(s) failed to disable": "{{count}} kênh không thể tắt",
     "{{count}} channel(s) failed to enable": "{{count}} kênh không thể bật",
+    "{{count}} channels": "{{count}} kênh",
     "{{count}} days ago": "{{count}} ngày trước",
     "{{count}} days remaining": "{{count}} days remaining",
     "{{count}} disabled channel(s) deleted": "Đã xóa {{count}} kênh đã tắt",
@@ -57,6 +63,7 @@
     "{{modality}} supported": "Hỗ trợ {{modality}}",
     "{{n}} model(s) selected": "Đã chọn {{n}} model",
     "{{processed}} of {{total}} log entries processed.": "Đã xử lý {{processed}}/{{total}} mục nhật ký.",
+    "{{status}} ({{count}})": "{{status}} ({{count}})",
     "{{success}} succeeded, {{failed}} failed": "{{success}} thành công, {{failed}} thất bại",
     "{{target}} test failed": "Kiểm tra {{target}} thất bại",
     "{{target}} test succeeded": "Kiểm tra {{target}} thành công",
@@ -2200,6 +2207,7 @@
     "Important": "Quan trọng",
     "In Progress": "Đang xử lý",
     "In:": "Vào:",
+    "Inactive": "Không hoạt động",
     "incident": "sự cố",
     "incidents": "sự cố",
     "Incidents": "Sự cố",

web/default/src/i18n/locales/zh.json

@@ -26,11 +26,17 @@
     "{{completed}}/{{total}} completed": "已完成 {{completed}}/{{total}}",
     "{{count}} announcements will be removed from the list.": "将从列表中移除 {{count}} 条公告。",
     "{{count}} API shortcuts will be removed from the list.": "将从列表中移除 {{count}} 个 API 快捷方式。",
+    "{{count}} channel": "{{count}} 个渠道",
+    "{{count}} channel_few": "{{count}} 个渠道",
+    "{{count}} channel_many": "{{count}} 个渠道",
+    "{{count}} channel_one": "{{count}} 个渠道",
+    "{{count}} channel_other": "{{count}} 个渠道",
     "{{count}} channel(s) deleted": "已删除 {{count}} 个渠道",
     "{{count}} channel(s) disabled": "已禁用 {{count}} 个渠道",
     "{{count}} channel(s) enabled": "已启用 {{count}} 个渠道",
     "{{count}} channel(s) failed to disable": "{{count}} 个渠道禁用失败",
     "{{count}} channel(s) failed to enable": "{{count}} 个渠道启用失败",
+    "{{count}} channels": "{{count}} 个渠道",
     "{{count}} days ago": "{{count}} 天前",
     "{{count}} days remaining": "剩余 {{count}} 天",
     "{{count}} disabled channel(s) deleted": "已删除 {{count}} 个已禁用的渠道",
@@ -57,6 +63,7 @@
     "{{modality}} supported": "支持 {{modality}}",
     "{{n}} model(s) selected": "已选 {{n}} 个模型",
     "{{processed}} of {{total}} log entries processed.": "已处理 {{processed}} / {{total}} 条日志。",
+    "{{status}} ({{count}})": "{{status}}（{{count}}）",
     "{{success}} succeeded, {{failed}} failed": "{{success}} 个成功，{{failed}} 个失败",
     "{{target}} test failed": "{{target}} 测试失败",
     "{{target}} test succeeded": "{{target}} 测试成功",
@@ -2200,6 +2207,7 @@
     "Important": "重要",
     "In Progress": "进行中",
     "In:": "入：",
+    "Inactive": "未生效",
     "incident": "次故障",
     "incidents": "次故障",
     "Incidents": "事件",

web/default/src/i18n/static-keys.ts

@@ -515,6 +515,13 @@ export const STATIC_I18N_KEYS = [
   'Detection complete: {{add}} to add, {{remove}} to remove',
   'Batch detection failed',
   'Batch detection complete: {{channels}} channels, {{add}} to add, {{remove}} to remove, {{fails}} failed',
+  '{{count}} channel',
+  '{{count}} channel_one',
+  '{{count}} channel_other',
+  '{{count}} channel_few',
+  '{{count}} channel_many',
+  '{{status}} ({{count}})',
+  'Inactive',
 
   // Dashboard flow stages (labels/descriptions passed to t at runtime)
   'User',