From bc8110ce3681cf404165f89cc8b6ba25e2ab2af7 Mon Sep 17 00:00:00 2001 From: CaIon Date: Tue, 26 May 2026 11:20:38 +0800 Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20refactor(badge):=20restore=20sta?= =?UTF-8?q?tus-badge=20sizes=20and=20classic=20color=20scheme?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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 | 2 +- web/default/src/components/status-badge.tsx | 45 +++++++------------ .../channels/components/channels-columns.tsx | 45 ++++++++++--------- .../src/features/channels/constants.ts | 4 +- 4 files changed, 41 insertions(+), 55 deletions(-) diff --git a/web/default/src/components/group-badge.tsx b/web/default/src/components/group-badge.tsx index 2de122e5..aa19d408 100644 --- a/web/default/src/components/group-badge.tsx +++ b/web/default/src/components/group-badge.tsx @@ -94,7 +94,7 @@ export function GroupBadge(props: GroupBadgeProps) { {badge} diff --git a/web/default/src/components/status-badge.tsx b/web/default/src/components/status-badge.tsx index a3b63bb1..1a12d1d2 100644 --- a/web/default/src/components/status-badge.tsx +++ b/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', - md: 'h-6 gap-1 px-2 text-xs leading-none', - lg: 'h-7 gap-1.5 px-2.5 text-sm leading-none', + sm: 'h-5 gap-1 px-1.5 text-xs leading-none', + md: 'h-5 gap-1 px-1.5 text-xs 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, @@ -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 && } + {showDot && ( + ) diff --git a/web/default/src/features/channels/components/channels-columns.tsx b/web/default/src/features/channels/components/channels-columns.tsx index b43bfd85..b39d398e 100644 --- a/web/default/src/features/channels/components/channels-columns.tsx +++ b/web/default/src/features/channels/components/channels-columns.tsx @@ -613,7 +613,7 @@ export function useChannelsColumns(): ColumnDef[] { 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[] { return (
-
- {isMultiKey && ( - - - - } - > - - - - {multiKeyTooltip} - - - - )} - {icon} -
+ {isMultiKey && ( + + + + } + > + + + + {multiKeyTooltip} + + + + )} + showDot={false} + className='pl-1 gap-1' + > + {icon} + {typeName} + {isIonet && ( diff --git a/web/default/src/features/channels/constants.ts b/web/default/src/features/channels/constants.ts index 6d83a57d..5fd88d55 100644 --- a/web/default/src/features/channels/constants.ts +++ b/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', }, }