shiyue/PinchChat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: unify token progress bars with subtle cyan opacity ramp

Browse Source 
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:
Nicolas Varrot
2026-02-11 20:15:31 +00:00
parent 38d7aab6da
commit 84c8e24457
2 changed files with 6 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/Header.tsx
View File

@@ -66,11 +66,12 @@ export function Header({ status, sessionKey, onToggleSidebar, activeSessionData,
const total = activeSessionData?.totalTokens || 0; const total = activeSessionData?.totalTokens || 0;
if (!ctx) return null; if (!ctx) return null;
const pct = Math.min(100, (total / ctx) * 100); const pct = Math.min(100, (total / ctx) * 100);
const barColor = pct > 95 ? 'bg-red-500' : pct > 80 ? 'bg-amber-500' : 'bg-gradient-to-r from-cyan-400 to-violet-500'; const opacity = Math.max(0.35, Math.min(1, pct / 100));
const barStyle = { width: `${pct}%`, backgroundColor: `rgba(56, 189, 248, ${opacity})` };
return ( return (
<div className="px-4 py-1.5 bg-[#232329]/60 border-b border-white/8 flex items-center gap-3"> <div className="px-4 py-1.5 bg-[#232329]/60 border-b border-white/8 flex items-center gap-3">
<div className="flex-1 h-[5px] rounded-full bg-white/5 overflow-hidden"> <div className="flex-1 h-[5px] rounded-full bg-white/5 overflow-hidden">
<div className={`h-full rounded-full transition-all duration-500 ${barColor}`} style={{ width: `${pct}%` }} /> <div className="h-full rounded-full transition-all duration-500" style={barStyle} />
</div> </div>
<span className="text-[11px] text-zinc-400 tabular-nums shrink-0 whitespace-nowrap"> <span className="text-[11px] text-zinc-400 tabular-nums shrink-0 whitespace-nowrap">
{(total / 1000).toFixed(1)}k / {(ctx / 1000).toFixed(0)}k tokens {(total / 1000).toFixed(1)}k / {(ctx / 1000).toFixed(0)}k tokens

5
src/components/Sidebar.tsx
View File

@@ -120,11 +120,12 @@ export function Sidebar({ sessions, activeSession, onSwitch, open, onClose }: Pr
{(() => { {(() => {
if (!s.contextTokens) return null; if (!s.contextTokens) return null;
const pct = Math.min(100, ((s.totalTokens || 0) / s.contextTokens) * 100); 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 ( return (
<div className="flex items-center gap-1.5 mt-1"> <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="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> </div>
<span className="text-[9px] text-zinc-500 tabular-nums shrink-0">{Math.round(pct)}%</span> <span className="text-[9px] text-zinc-500 tabular-nums shrink-0">{Math.round(pct)}%</span>
</div> </div>