tiennm99/ccs
1
0
Fork 0
mirror of https://github.com/tiennm99/ccs.git synced 2026-07-16 04:18:05 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(cliproxy): tighten sidebar routing presentation

Browse Source
This commit is contained in:
Tam Nhu Tran
2026-04-07 19:48:07 -04:00
parent fabf3d4ad3
commit 5bb5faa4b7
2 changed files with 42 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/src/components/account/account-safety-warning-card.tsx
+15 -45
View File
@@ -95,67 +95,45 @@ export function AccountSafetyWarningCard({
role="alert"
className={cn(
'relative overflow-hidden rounded-xl border border-amber-500/30 bg-gradient-to-br from-amber-50 via-background to-rose-50/70 shadow-sm dark:from-amber-950/20 dark:to-rose-950/20',
compact &&
'rounded-lg border-amber-400/25 bg-gradient-to-r from-amber-50/90 via-background to-background shadow-none dark:from-amber-950/10 dark:to-background',
className
)}
>
<div className="absolute inset-x-0 top-0 h-0.5 bg-gradient-to-r from-amber-500 via-orange-500 to-rose-500" />
<div className={cn('space-y-3 p-4', compact && 'space-y-2 px-3 py-2.5')}>
<div className="space-y-3 p-4">
<div className="flex items-start justify-between gap-3">
<div className="flex items-start gap-2.5">
<div
className={cn(
'mt-0.5 inline-flex h-7 w-7 items-center justify-center rounded-md bg-amber-500/15 text-amber-700 dark:text-amber-400',
compact && 'h-6 w-6 rounded-lg'
)}
>
<div className="mt-0.5 inline-flex h-7 w-7 items-center justify-center rounded-md bg-amber-500/15 text-amber-700 dark:text-amber-400">
<AlertTriangle className="h-4 w-4" />
</div>
<div>
<p className={cn('text-sm font-semibold leading-5', compact && 'text-xs')}>{title}</p>
<p className="text-sm font-semibold leading-5">{title}</p>
<p className="text-xs text-muted-foreground">{subtitle}</p>
</div>
</div>
<Badge
variant="outline"
className={cn(
'border-amber-500/40 text-amber-700 dark:text-amber-300',
compact && 'h-5 px-1.5 text-[10px]'
)}
className="border-amber-500/40 text-amber-700 dark:text-amber-300"
>
High Risk
</Badge>
</div>
{compact ? (
<div className="space-y-1.5">
<p className="text-xs leading-5 text-muted-foreground">{firstLine}</p>
<p className="text-xs font-medium leading-5 text-amber-900 dark:text-amber-200">
{secondLine}
</p>
</div>
) : (
<div className="space-y-2 text-sm leading-relaxed">
<p>{firstLine}</p>
<p className="font-medium text-amber-900 dark:text-amber-200">{secondLine}</p>
<p className="text-xs text-muted-foreground">
CCS is provided as-is and does not take responsibility for suspension, bans, or access
loss from upstream providers.
</p>
</div>
)}
<div className="space-y-2 text-sm leading-relaxed">
<p>{firstLine}</p>
<p className="font-medium text-amber-900 dark:text-amber-200">{secondLine}</p>
<p className="text-xs text-muted-foreground">
CCS is provided as-is and does not take responsibility for suspension, bans, or access
loss from upstream providers.
</p>
</div>
<div className="flex flex-wrap items-center gap-2">
<a
href={issueUrl}
target="_blank"
rel="noreferrer"
className={cn(
'inline-flex items-center gap-1.5 rounded-md border border-amber-500/30 bg-amber-500/10 px-2.5 py-1 text-xs font-medium text-amber-800 transition-colors hover:bg-amber-500/15 dark:text-amber-200',
compact && 'px-2 py-0.5 text-[11px]'
)}
className="inline-flex items-center gap-1.5 rounded-md border border-amber-500/30 bg-amber-500/10 px-2.5 py-1 text-xs font-medium text-amber-800 transition-colors hover:bg-amber-500/15 dark:text-amber-200"
>
{issueLabel}
<ExternalLink className="h-3.5 w-3.5" />
@@ -163,21 +141,13 @@ export function AccountSafetyWarningCard({
{showProxySettingsLink && (
<a
href="/settings?tab=proxy"
className={cn(
'inline-flex items-center gap-1.5 rounded-md border border-amber-500/30 bg-amber-500/10 px-2.5 py-1 text-xs font-medium text-amber-800 transition-colors hover:bg-amber-500/15 dark:text-amber-200',
compact && 'px-2 py-0.5 text-[11px]'
)}
className="inline-flex items-center gap-1.5 rounded-md border border-amber-500/30 bg-amber-500/10 px-2.5 py-1 text-xs font-medium text-amber-800 transition-colors hover:bg-amber-500/15 dark:text-amber-200"
>
<Settings2 className="h-3.5 w-3.5" />
{proxySettingsLabel}
</a>
)}
<span
className={cn(
'rounded-md border border-border/70 bg-muted/60 px-2.5 py-1 text-xs text-muted-foreground',
compact && 'px-2 py-0.5 text-[11px]'
)}
>
<span className="rounded-md border border-border/70 bg-muted/60 px-2.5 py-1 text-xs text-muted-foreground">
Applies to CLI and dashboard auth
</span>
</div>
ui/src/components/cliproxy/routing-guidance-card.tsx
+27 -9
View File
@@ -51,14 +51,32 @@ export function RoutingGuidanceCard({
};
return (
<div className={cn('flex items-center justify-between', className)}>
<div className="flex items-center gap-1.5 text-xs font-medium text-muted-foreground">
<ArrowRightLeft className="h-3.5 w-3.5" />
<span>Routing</span>
{isSaving && <RefreshCw className="ml-0.5 h-3 w-3 shrink-0 animate-spin opacity-50" />}
<div
className={cn(
'group/routing flex items-center justify-between mt-1 p-1 -mx-1 rounded-lg transition-colors hover:bg-primary/5',
className
)}
>
<div className="flex items-center gap-2 text-xs font-medium text-foreground">
<div className="relative flex h-6 w-6 shrink-0 items-center justify-center rounded-md bg-background border border-border/60 text-muted-foreground shadow-sm overflow-hidden transition-all duration-300 group-hover/routing:border-primary/40 group-hover/routing:text-primary group-hover/routing:shadow-[0_0_12px_rgba(59,130,246,0.15)] dark:group-hover/routing:shadow-[0_0_12px_rgba(59,130,246,0.1)]">
<div className="absolute inset-0 bg-primary/10 translate-y-full group-hover/routing:translate-y-0 transition-transform duration-300 ease-out" />
<ArrowRightLeft className="relative z-10 h-3.5 w-3.5 transition-transform duration-300 group-hover/routing:scale-110" />
</div>
<span className="tracking-tight transition-colors duration-300 group-hover/routing:text-primary group-hover/routing:font-semibold">
Routing
</span>
{isSaving && <RefreshCw className="ml-1 h-3 w-3 shrink-0 animate-spin text-primary" />}
</div>
<div className="flex items-center rounded-md border border-border/50 bg-muted/40 p-0.5">
<div className="relative grid grid-cols-2 p-0.5 gap-0.5 rounded-lg border border-border/60 bg-muted/30 shadow-[inset_0_1px_2px_rgba(0,0,0,0.05)] dark:shadow-[inset_0_1px_3px_rgba(0,0,0,0.2)] transition-colors duration-300 group-hover/routing:border-primary/20 group-hover/routing:bg-primary/5">
<div
className={cn(
'absolute inset-y-0.5 left-0.5 w-[calc(50%-0.1875rem)] rounded bg-background shadow-[0_1px_3px_rgba(0,0,0,0.1),0_1px_2px_rgba(0,0,0,0.06)] ring-1 ring-black/5 dark:ring-white/10 transition-all duration-300',
selected === 'fill-first' ? 'translate-x-[calc(100%+0.125rem)]' : 'translate-x-0',
'group-hover/routing:shadow-[0_0_8px_rgba(59,130,246,0.15)] dark:group-hover/routing:shadow-[0_0_8px_rgba(59,130,246,0.1)] group-hover/routing:ring-primary/30'
)}
style={{ transitionTimingFunction: 'cubic-bezier(0.175, 0.885, 0.32, 1.275)' }}
/>
{(
Object.entries(STRATEGY_COPY) as Array<
[RoutingStrategy, { title: string; description: string }]
@@ -70,10 +88,10 @@ export function RoutingGuidanceCard({
key={strategy}
type="button"
className={cn(
'relative z-10 rounded-[4px] px-2 py-0.5 text-[10px] font-medium transition-all duration-200',
'relative z-10 flex items-center justify-center rounded px-2.5 py-0.5 text-[10px] font-medium whitespace-nowrap transition-colors duration-200',
active
? 'bg-background text-foreground shadow-[0_1px_2px_rgba(0,0,0,0.06)] ring-1 ring-black/5 dark:ring-white/10'
: 'text-muted-foreground hover:bg-black/5 hover:text-foreground dark:hover:bg-white/5'
? 'text-foreground group-hover/routing:text-primary'
: 'text-muted-foreground/70 hover:text-foreground/90 group-hover/routing:text-muted-foreground/90'
)}
onClick={() => handleApply(strategy)}
disabled={isLoading || isSaving || !!error}