BuzzbeeSCD/openchamber
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: invert quota usage markers when remaining mode enabled (#385)

Browse Source
This commit is contained in:
gsxdsm
2026-02-11 11:24:02 +02:00
committed by GitHub
parent 0bab4dfa26
commit 39e625d8ec
3 changed files with 19 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/components/layout/Header.tsx
+12 -4
View File
@@ -998,7 +998,9 @@ export const Header: React.FC = () => {
: window.usedPercent; : window.usedPercent;
const paceInfo = calculatePace(window.usedPercent, window.resetAt, window.windowSeconds, label); const paceInfo = calculatePace(window.usedPercent, window.resetAt, window.windowSeconds, label);
const expectedMarker = paceInfo?.dailyAllocationPercent != null const expectedMarker = paceInfo?.dailyAllocationPercent != null
? calculateExpectedUsagePercent(paceInfo.elapsedRatio) ? (quotaDisplayMode === 'remaining'
? 100 - calculateExpectedUsagePercent(paceInfo.elapsedRatio)
: calculateExpectedUsagePercent(paceInfo.elapsedRatio))
: null; : null;
return ( return (
<DropdownMenuItem <DropdownMenuItem
@@ -1065,7 +1067,9 @@ export const Header: React.FC = () => {
: window.usedPercent; : window.usedPercent;
const paceInfo = calculatePace(window.usedPercent, window.resetAt, window.windowSeconds); const paceInfo = calculatePace(window.usedPercent, window.resetAt, window.windowSeconds);
const expectedMarker = paceInfo?.dailyAllocationPercent != null const expectedMarker = paceInfo?.dailyAllocationPercent != null
? calculateExpectedUsagePercent(paceInfo.elapsedRatio) ? (quotaDisplayMode === 'remaining'
? 100 - calculateExpectedUsagePercent(paceInfo.elapsedRatio)
: calculateExpectedUsagePercent(paceInfo.elapsedRatio))
: null; : null;
return ( return (
<div <div
@@ -1450,7 +1454,9 @@ export const Header: React.FC = () => {
: window.usedPercent; : window.usedPercent;
const paceInfo = calculatePace(window.usedPercent, window.resetAt, window.windowSeconds, label); const paceInfo = calculatePace(window.usedPercent, window.resetAt, window.windowSeconds, label);
const expectedMarker = paceInfo?.dailyAllocationPercent != null const expectedMarker = paceInfo?.dailyAllocationPercent != null
? calculateExpectedUsagePercent(paceInfo.elapsedRatio) ? (quotaDisplayMode === 'remaining'
? 100 - calculateExpectedUsagePercent(paceInfo.elapsedRatio)
: calculateExpectedUsagePercent(paceInfo.elapsedRatio))
: null; : null;
return ( return (
<div key={`${group.providerId}-${label}`} className="px-3 py-2"> <div key={`${group.providerId}-${label}`} className="px-3 py-2">
@@ -1510,7 +1516,9 @@ export const Header: React.FC = () => {
: window.usedPercent; : window.usedPercent;
const paceInfo = calculatePace(window.usedPercent, window.resetAt, window.windowSeconds); const paceInfo = calculatePace(window.usedPercent, window.resetAt, window.windowSeconds);
const expectedMarker = paceInfo?.dailyAllocationPercent != null const expectedMarker = paceInfo?.dailyAllocationPercent != null
? calculateExpectedUsagePercent(paceInfo.elapsedRatio) ? (quotaDisplayMode === 'remaining'
? 100 - calculateExpectedUsagePercent(paceInfo.elapsedRatio)
: calculateExpectedUsagePercent(paceInfo.elapsedRatio))
: null; : null;
return ( return (
<div key={`${group.providerId}-${modelName}`} className="py-1.5"> <div key={`${group.providerId}-${modelName}`} className="py-1.5">
packages/ui/src/components/layout/VSCodeLayout.tsx
+3 -1
View File
@@ -615,7 +615,9 @@ const VSCodeHeader: React.FC<VSCodeHeaderProps> = ({ title, showBack, onBack, on
: window.usedPercent; : window.usedPercent;
const paceInfo = calculatePace(window.usedPercent, window.resetAt, window.windowSeconds, label); const paceInfo = calculatePace(window.usedPercent, window.resetAt, window.windowSeconds, label);
const expectedMarker = paceInfo?.dailyAllocationPercent != null const expectedMarker = paceInfo?.dailyAllocationPercent != null
? calculateExpectedUsagePercent(paceInfo.elapsedRatio) ? (quotaDisplayMode === 'remaining'
? 100 - calculateExpectedUsagePercent(paceInfo.elapsedRatio)
: calculateExpectedUsagePercent(paceInfo.elapsedRatio))
: null; : null;
return ( return (
<DropdownMenuItem <DropdownMenuItem
packages/ui/src/components/sections/usage/UsageCard.tsx
+4 -2
View File
@@ -42,8 +42,10 @@ export const UsageCard: React.FC<UsageCardProps> = ({
return null; return null;
} }
// Show marker based on elapsed time ratio // Show marker based on elapsed time ratio
return calculateExpectedUsagePercent(paceInfo.elapsedRatio); const expectedUsed = calculateExpectedUsagePercent(paceInfo.elapsedRatio);
}, [paceInfo]); // If displaying remaining, invert the marker position
return displayMode === 'remaining' ? 100 - expectedUsed : expectedUsed;
}, [paceInfo, displayMode]);
return ( return (
<div className="rounded-xl border border-[var(--interactive-border)] bg-[var(--surface-elevated)]/60 p-4 shadow-sm"> <div className="rounded-xl border border-[var(--interactive-border)] bg-[var(--surface-elevated)]/60 p-4 shadow-sm">