style: unify token progress bars with subtle cyan opacity ramp
Replace the disparate gradient/orange/red color scheme with a single soft sky-blue (rgb 56,189,248) that subtly intensifies as usage grows. Opacity ramps from 0.35 at low usage to 1.0 at full context. Applies to both sidebar session bars and header token bar.
This commit is contained in:
@@ -120,11 +120,12 @@ export function Sidebar({ sessions, activeSession, onSwitch, open, onClose }: Pr
|
||||
{(() => {
|
||||
if (!s.contextTokens) return null;
|
||||
const pct = Math.min(100, ((s.totalTokens || 0) / s.contextTokens) * 100);
|
||||
const barColor = pct > 95 ? 'bg-red-500' : pct > 80 ? 'bg-amber-500' : 'bg-gradient-to-r from-cyan-400 to-violet-500';
|
||||
const barOpacity = Math.max(0.35, Math.min(1, pct / 100));
|
||||
const barStyle = { width: `${pct}%`, backgroundColor: `rgba(56, 189, 248, ${barOpacity})` };
|
||||
return (
|
||||
<div className="flex items-center gap-1.5 mt-1">
|
||||
<div className="flex-1 h-[3px] rounded-full bg-white/5 overflow-hidden">
|
||||
<div className={`h-full rounded-full ${barColor}`} style={{ width: `${pct}%` }} />
|
||||
<div className="h-full rounded-full" style={barStyle} />
|
||||
</div>
|
||||
<span className="text-[9px] text-zinc-500 tabular-nums shrink-0">{Math.round(pct)}%</span>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user