Skip to content

fix: invert plain usage percentages #473

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ekkoitac wants to merge 1 commit into
base: main
Choose a base branch
from
Open

fix: invert plain usage percentages #473

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions src/widgets/ExtraUsageUtilization.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ export class ExtraUsageUtilizationWidget implements Widget {
}

if (action === 'toggle-progress') {
return cycleUsageDisplayMode(item, [], true);
return cycleUsageDisplayMode(item, [], true, true);
}

if (action === 'toggle-invert') {
Expand Down Expand Up @@ -79,7 +79,7 @@ export class ExtraUsageUtilizationWidget implements Widget {
return formatRawOrLabeledValue(item, 'Overage: ', sliderDisplay);
}

return formatRawOrLabeledValue(item, 'Overage: ', `${previewPercent.toFixed(1)}%`);
return formatRawOrLabeledValue(item, 'Overage: ', `${renderedPercent.toFixed(1)}%`);
}

const data = context.usageData ?? {};
Expand Down Expand Up @@ -110,7 +110,7 @@ export class ExtraUsageUtilizationWidget implements Widget {
return formatRawOrLabeledValue(item, 'Overage: ', sliderDisplay);
}

return formatRawOrLabeledValue(item, 'Overage: ', `${percent.toFixed(1)}%`);
return formatRawOrLabeledValue(item, 'Overage: ', `${renderedPercent.toFixed(1)}%`);
}

getCustomKeybinds(item?: WidgetItem): CustomKeybind[] {
Expand Down
6 changes: 3 additions & 3 deletions src/widgets/SessionUsage.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ export class SessionUsageWidget implements Widget {

handleEditorAction(action: string, item: WidgetItem): WidgetItem | null {
if (action === 'toggle-progress') {
return cycleUsageDisplayMode(item, [], true);
return cycleUsageDisplayMode(item, [], true, true);
}

if (action === 'toggle-invert') {
Expand Down Expand Up @@ -79,7 +79,7 @@ export class SessionUsageWidget implements Widget {
return formatRawOrLabeledValue(item, 'Session: ', sliderDisplay);
}

return formatRawOrLabeledValue(item, 'Session: ', `${previewPercent.toFixed(1)}%`);
return formatRawOrLabeledValue(item, 'Session: ', `${renderedPercent.toFixed(1)}%`);
}

const data = context.usageData ?? {};
Expand Down Expand Up @@ -114,7 +114,7 @@ export class SessionUsageWidget implements Widget {
return formatRawOrLabeledValue(item, 'Session: ', sliderDisplay);
}

return formatRawOrLabeledValue(item, 'Session: ', `${percent.toFixed(1)}%`);
return formatRawOrLabeledValue(item, 'Session: ', `${renderedPercent.toFixed(1)}%`);
}

getCustomKeybinds(item?: WidgetItem): CustomKeybind[] {
Expand Down
6 changes: 3 additions & 3 deletions src/widgets/WeeklyOpusUsage.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ export class WeeklyOpusUsageWidget implements Widget {

handleEditorAction(action: string, item: WidgetItem): WidgetItem | null {
if (action === 'toggle-progress') {
return cycleUsageDisplayMode(item, [], true);
return cycleUsageDisplayMode(item, [], true, true);
}

if (action === 'toggle-invert') {
Expand Down Expand Up @@ -81,7 +81,7 @@ export class WeeklyOpusUsageWidget implements Widget {
return formatRawOrLabeledValue(item, LABEL, sliderDisplay);
}

return formatRawOrLabeledValue(item, LABEL, `${previewPercent.toFixed(1)}%`);
return formatRawOrLabeledValue(item, LABEL, `${renderedPercent.toFixed(1)}%`);
}

const data = context.usageData ?? {};
Expand Down Expand Up @@ -116,7 +116,7 @@ export class WeeklyOpusUsageWidget implements Widget {
return formatRawOrLabeledValue(item, LABEL, sliderDisplay);
}

return formatRawOrLabeledValue(item, LABEL, `${percent.toFixed(1)}%`);
return formatRawOrLabeledValue(item, LABEL, `${renderedPercent.toFixed(1)}%`);
}

getCustomKeybinds(item?: WidgetItem): CustomKeybind[] {
Expand Down
6 changes: 3 additions & 3 deletions src/widgets/WeeklySonnetUsage.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ export class WeeklySonnetUsageWidget implements Widget {

handleEditorAction(action: string, item: WidgetItem): WidgetItem | null {
if (action === 'toggle-progress') {
return cycleUsageDisplayMode(item, [], true);
return cycleUsageDisplayMode(item, [], true, true);
}

if (action === 'toggle-invert') {
Expand Down Expand Up @@ -81,7 +81,7 @@ export class WeeklySonnetUsageWidget implements Widget {
return formatRawOrLabeledValue(item, LABEL, sliderDisplay);
}

return formatRawOrLabeledValue(item, LABEL, `${previewPercent.toFixed(1)}%`);
return formatRawOrLabeledValue(item, LABEL, `${renderedPercent.toFixed(1)}%`);
}

const data = context.usageData ?? {};
Expand Down Expand Up @@ -116,7 +116,7 @@ export class WeeklySonnetUsageWidget implements Widget {
return formatRawOrLabeledValue(item, LABEL, sliderDisplay);
}

return formatRawOrLabeledValue(item, LABEL, `${percent.toFixed(1)}%`);
return formatRawOrLabeledValue(item, LABEL, `${renderedPercent.toFixed(1)}%`);
}

getCustomKeybinds(item?: WidgetItem): CustomKeybind[] {
Expand Down
6 changes: 3 additions & 3 deletions src/widgets/WeeklyUsage.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ export class WeeklyUsageWidget implements Widget {

handleEditorAction(action: string, item: WidgetItem): WidgetItem | null {
if (action === 'toggle-progress') {
return cycleUsageDisplayMode(item, [], true);
return cycleUsageDisplayMode(item, [], true, true);
}

if (action === 'toggle-invert') {
Expand Down Expand Up @@ -79,7 +79,7 @@ export class WeeklyUsageWidget implements Widget {
return formatRawOrLabeledValue(item, 'Weekly: ', sliderDisplay);
}

return formatRawOrLabeledValue(item, 'Weekly: ', `${previewPercent.toFixed(1)}%`);
return formatRawOrLabeledValue(item, 'Weekly: ', `${renderedPercent.toFixed(1)}%`);
}

const data = context.usageData ?? {};
Expand Down Expand Up @@ -114,7 +114,7 @@ export class WeeklyUsageWidget implements Widget {
return formatRawOrLabeledValue(item, 'Weekly: ', sliderDisplay);
}

return formatRawOrLabeledValue(item, 'Weekly: ', `${percent.toFixed(1)}%`);
return formatRawOrLabeledValue(item, 'Weekly: ', `${renderedPercent.toFixed(1)}%`);
}

getCustomKeybinds(item?: WidgetItem): CustomKeybind[] {
Expand Down
26 changes: 26 additions & 0 deletions src/widgets/__tests__/ExtraUsageUtilization.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,13 +74,16 @@ describe('ExtraUsageUtilizationWidget', () => {

expect(widget.getCustomKeybinds(baseItem)).toEqual([
{ key: 'p', label: '(p)rogress toggle', action: 'toggle-progress' },
{ key: 'u', label: '(u)sed/remaining', action: 'toggle-invert' },
{ key: 'v', label: 'in(v)ert fill', action: 'toggle-invert' },
{ key: 'h', label: '(h)ide if disabled', action: 'toggle-hide-disabled' }
]);
expect(widget.getCustomKeybinds({
...baseItem,
metadata: { display: 'progress' }
})).toEqual([
{ key: 'p', label: '(p)rogress toggle', action: 'toggle-progress' },
{ key: 'u', label: '(u)sed/remaining', action: 'toggle-invert' },
{ key: 'v', label: 'in(v)ert fill', action: 'toggle-invert' },
{ key: 't', label: '(t)ime cursor', action: 'toggle-cursor' },
{ key: 'h', label: '(h)ide if disabled', action: 'toggle-hide-disabled' }
Expand Down Expand Up @@ -154,4 +157,27 @@ describe('ExtraUsageUtilizationWidget', () => {
}
})).toBe('Overage: [████████████░░░░] 75.0%');
});

it('inverts plain text and preview rendering', () => {
const widget = new ExtraUsageUtilizationWidget();
const item: WidgetItem = {
id: 'extra',
metadata: { invert: 'true' },
type: 'extra-usage-utilization'
};

expect(render(widget, item, {
usageData: {
extraUsageEnabled: true,
extraUsageUtilization: 25
}
})).toBe('Overage: 75.0%');
expect(render(widget, { ...item, rawValue: true }, {
usageData: {
extraUsageEnabled: true,
extraUsageUtilization: 25
}
})).toBe('75.0%');
expect(render(widget, item, { isPreview: true })).toBe('Overage: 97.4%');
});
});
3 changes: 3 additions & 0 deletions src/widgets/__tests__/SessionUsage.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,8 +68,11 @@ describe('SessionUsageWidget', () => {
baseItem: { id: 'session', type: 'session-usage' },
createWidget: () => new SessionUsageWidget(),
errorMessageMock: usageErrorMessageMock,
expectedInvertedTime: 'Session: 76.5%',
expectedModifierText: '(medium bar, inverted)',
expectedPreviewInvertedTime: 'Session: 80.0%',
expectedProgress: 'Session: [████████████░░░░] 76.5%',
expectedRawInvertedTime: '76.5%',
expectedRawProgress: '[████████░░░░░░░░░░░░░░░░░░░░░░░░] 23.4%',
expectedRawTime: '23.4%',
expectedTime: 'Session: 23.4%',
Expand Down
3 changes: 3 additions & 0 deletions src/widgets/__tests__/WeeklyOpusUsage.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,8 +72,11 @@ describe('WeeklyOpusUsageWidget', () => {
baseItem: { id: 'weekly-opus', type: 'weekly-opus-usage' },
createWidget: () => new WeeklyOpusUsageWidget(),
errorMessageMock: usageErrorMessageMock,
expectedInvertedTime: 'Weekly Opus: 57.9%',
expectedModifierText: '(long bar, inverted)',
expectedPreviewInvertedTime: 'Weekly Opus: 96.0%',
expectedProgress: 'Weekly Opus: [███████████████████░░░░░░░░░░░░░] 57.9%',
expectedRawInvertedTime: '57.9%',
expectedRawProgress: '[███████░░░░░░░░░] 42.1%',
expectedRawTime: '42.1%',
expectedTime: 'Weekly Opus: 42.1%',
Expand Down
3 changes: 3 additions & 0 deletions src/widgets/__tests__/WeeklySonnetUsage.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,8 +72,11 @@ describe('WeeklySonnetUsageWidget', () => {
baseItem: { id: 'weekly-sonnet', type: 'weekly-sonnet-usage' },
createWidget: () => new WeeklySonnetUsageWidget(),
errorMessageMock: usageErrorMessageMock,
expectedInvertedTime: 'Weekly Sonnet: 57.9%',
expectedModifierText: '(long bar, inverted)',
expectedPreviewInvertedTime: 'Weekly Sonnet: 92.0%',
expectedProgress: 'Weekly Sonnet: [███████████████████░░░░░░░░░░░░░] 57.9%',
expectedRawInvertedTime: '57.9%',
expectedRawProgress: '[███████░░░░░░░░░] 42.1%',
expectedRawTime: '42.1%',
expectedTime: 'Weekly Sonnet: 42.1%',
Expand Down
3 changes: 3 additions & 0 deletions src/widgets/__tests__/WeeklyUsage.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,8 +68,11 @@ describe('WeeklyUsageWidget', () => {
baseItem: { id: 'weekly', type: 'weekly-usage' },
createWidget: () => new WeeklyUsageWidget(),
errorMessageMock: usageErrorMessageMock,
expectedInvertedTime: 'Weekly: 57.9%',
expectedModifierText: '(long bar, inverted)',
expectedPreviewInvertedTime: 'Weekly: 88.0%',
expectedProgress: 'Weekly: [███████████████████░░░░░░░░░░░░░] 57.9%',
expectedRawInvertedTime: '57.9%',
expectedRawProgress: '[███████░░░░░░░░░] 42.1%',
expectedRawTime: '42.1%',
expectedTime: 'Weekly: 42.1%',
Expand Down
29 changes: 26 additions & 3 deletions src/widgets/__tests__/helpers/usage-widget-suites.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,9 +24,12 @@ interface UsagePercentWidgetSuiteConfig<TWidget extends UsageWidgetLike> {
createWidget: () => TWidget;
errorMessageMock: { mockReturnValue: (value: string) => void };
expectedModifierText: string;
expectedPreviewInvertedTime: string;
expectedProgress: string;
expectedRawInvertedTime: string;
expectedRawProgress: string;
expectedRawTime: string;
expectedInvertedTime: string;
expectedTime: string;
modifierItem: WidgetItem;
progressItem: WidgetItem;
Expand All @@ -50,11 +53,14 @@ interface UsageTimerEditorSuiteConfig<TWidget extends UsageWidgetLike & { getDis
}

const EXPECTED_USAGE_KEYBINDS: CustomKeybind[] = [
{ key: 'p', label: '(p)rogress toggle', action: 'toggle-progress' }
{ key: 'p', label: '(p)rogress toggle', action: 'toggle-progress' },
{ key: 'u', label: '(u)sed/remaining', action: 'toggle-invert' },
{ key: 'v', label: 'in(v)ert fill', action: 'toggle-invert' }
];

const EXPECTED_USAGE_PROGRESS_KEYBINDS: CustomKeybind[] = [
{ key: 'p', label: '(p)rogress toggle', action: 'toggle-progress' },
{ key: 'u', label: '(u)sed/remaining', action: 'toggle-invert' },
{ key: 'v', label: 'in(v)ert fill', action: 'toggle-invert' },
{ key: 't', label: '(t)ime cursor', action: 'toggle-cursor' }
];
Expand Down Expand Up @@ -141,7 +147,24 @@ export function runUsagePercentWidgetSuite<TWidget extends UsageWidgetLike>(conf
expect(config.render(widget, config.baseItem, context)).toBe(config.expectedTime);
});

it('clears invert and cursor metadata when cycling back to time mode', () => {
it('renders inverted percentage in time mode', () => {
const widget = config.createWidget();
const context = getUsageContext(config.usageField, config.usageValue);
const invertedTimeItem: WidgetItem = {
...config.baseItem,
metadata: { invert: 'true' }
};
const rawInvertedTimeItem: WidgetItem = {
...config.rawTimeItem,
metadata: { invert: 'true' }
};

expect(config.render(widget, invertedTimeItem, context)).toBe(config.expectedInvertedTime);
expect(config.render(widget, rawInvertedTimeItem, context)).toBe(config.expectedRawInvertedTime);
expect(config.render(widget, invertedTimeItem, { isPreview: true })).toBe(config.expectedPreviewInvertedTime);
});

it('preserves invert and clears cursor metadata when cycling back to time mode', () => {
const widget = config.createWidget();
const updated = widget.handleEditorAction('toggle-progress', {
...config.baseItem,
Expand All @@ -153,7 +176,7 @@ export function runUsagePercentWidgetSuite<TWidget extends UsageWidgetLike>(conf
});

expect(updated?.metadata?.display).toBe('time');
expect(updated?.metadata?.invert).toBeUndefined();
expect(updated?.metadata?.invert).toBe('true');
expect(updated?.metadata?.cursor).toBeUndefined();
});

Expand Down
14 changes: 8 additions & 6 deletions src/widgets/shared/usage-display.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ export type UsageDisplayMode = 'time' | 'progress' | 'progress-short' | 'slider'
const SLIDER_WIDTH = 10;

const PROGRESS_TOGGLE_KEYBIND: CustomKeybind = { key: 'p', label: '(p)rogress toggle', action: 'toggle-progress' };
const USED_REMAINING_TOGGLE_KEYBIND: CustomKeybind = { key: 'u', label: '(u)sed/remaining', action: 'toggle-invert' };
const INVERT_TOGGLE_KEYBIND: CustomKeybind = { key: 'v', label: 'in(v)ert fill', action: 'toggle-invert' };
const COMPACT_TOGGLE_KEYBIND: CustomKeybind = { key: 's', label: '(s)hort time', action: 'toggle-compact' };
const CURSOR_TOGGLE_KEYBIND: CustomKeybind = { key: 't', label: '(t)ime cursor', action: 'toggle-cursor' };
Expand Down Expand Up @@ -219,7 +220,7 @@ export function getUsageDisplayModifierText(
return makeModifierText(modifiers);
}

export function cycleUsageDisplayMode(item: WidgetItem, disabledInProgressKeys: string[] = [], includeSlider = false): WidgetItem {
export function cycleUsageDisplayMode(item: WidgetItem, disabledInProgressKeys: string[] = [], includeSlider = false, preserveInvertInTime = false): WidgetItem {
const currentMode = getUsageDisplayMode(item);
let nextMode: UsageDisplayMode;
if (includeSlider) {
Expand All @@ -240,7 +241,7 @@ export function cycleUsageDisplayMode(item: WidgetItem, disabledInProgressKeys:
: 'time';
}

const keysToRemove = nextMode === 'time' ? ['invert', 'cursor'] : disabledInProgressKeys;
const keysToRemove = nextMode === 'time' ? (preserveInvertInTime ? ['cursor'] : ['invert', 'cursor']) : disabledInProgressKeys;
const nextItem = removeMetadataKeys(item, keysToRemove);
const nextMetadata: Record<string, string> = {
...(nextItem.metadata ?? {}),
Expand All @@ -258,13 +259,14 @@ export function toggleUsageInverted(item: WidgetItem): WidgetItem {
}

export function getUsagePercentCustomKeybinds(item?: WidgetItem): CustomKeybind[] {
const keybinds = [PROGRESS_TOGGLE_KEYBIND];
const keybinds = [
PROGRESS_TOGGLE_KEYBIND,
USED_REMAINING_TOGGLE_KEYBIND,
INVERT_TOGGLE_KEYBIND
];

if (item) {
const mode = getUsageDisplayMode(item);
if (isUsageProgressMode(mode) || isUsageSliderMode(mode)) {
keybinds.push(INVERT_TOGGLE_KEYBIND);
}
if (isUsageProgressMode(mode) || isUsageSliderMode(mode)) {
keybinds.push(CURSOR_TOGGLE_KEYBIND);
}
Expand Down