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

feat(usage): add toggle to hide prediction rows on usage cards (#1420)

Browse Source 
* feat(usage): add showPredValues setting to quota store

* feat(usage): register usageShowPredValues in settings sanitizers

* feat(usage): add i18n key for show predictions toggle

* feat(usage): add show predictions toggle to sidebar

* feat(usage): hide pred row by default, gate on showPredValues

* fix(usage): gate header dropdown PaceIndicator behind showPredValues

* fix(usage): gate VSCodeLayout PaceIndicator behind showPredValues

* fix(usage): correct indentation drift in Header.tsx PaceIndicator blocks
This commit is contained in:
Erman HAVUÇ
2026-05-26 01:54:24 +03:00
committed by GitHub
parent ceee53576b
commit 684d55f4aa
16 changed files with 57 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/components/sections/usage/UsageCard.tsx
+2 -1
View File
@@ -24,6 +24,7 @@ export const UsageCard: React.FC<UsageCardProps> = ({
onToggle,
}) => {
const displayMode = useQuotaStore((state) => state.displayMode);
const showPredValues = useQuotaStore((state) => state.showPredValues);
const displayPercent = displayMode === 'remaining' ? window.remainingPercent : window.usedPercent;
const barLabel = displayMode === 'remaining' ? 'remaining' : 'used';
const percentLabel = formatQuotaValueLabel(window.valueLabel, displayPercent);
@@ -82,7 +83,7 @@ export const UsageCard: React.FC<UsageCardProps> = ({
</div>
</div>
{paceInfo && (
{paceInfo && showPredValues && (
<div className="mt-1.5">
<PaceIndicator paceInfo={paceInfo} />
</div>
packages/ui/src/components/sections/usage/UsageSidebar.tsx
+18 -1
View File
@@ -40,13 +40,15 @@ export const UsageSidebar: React.FC<UsageSidebarProps> = ({ onItemSelect }) => {
const setUsageAutoRefresh = useQuotaStore((state) => state.setAutoRefresh);
const setUsageRefreshInterval = useQuotaStore((state) => state.setRefreshInterval);
const setUsageDisplayMode = useQuotaStore((state) => state.setDisplayMode);
const showPredValues = useQuotaStore((state) => state.showPredValues);
const setShowPredValues = useQuotaStore((state) => state.setShowPredValues);
const loadUsageSettings = useQuotaStore((state) => state.loadSettings);
React.useEffect(() => {
void loadUsageSettings();
}, [loadUsageSettings]);
const persistUsageSettings = React.useCallback(async (changes: { usageAutoRefresh?: boolean; usageRefreshIntervalMs?: number; usageDisplayMode?: 'usage' | 'remaining'; usageDropdownProviders?: string[] }) => {
const persistUsageSettings = React.useCallback(async (changes: { usageAutoRefresh?: boolean; usageRefreshIntervalMs?: number; usageDisplayMode?: 'usage' | 'remaining'; usageDropdownProviders?: string[]; usageShowPredValues?: boolean }) => {
try {
await updateDesktopSettings(changes);
} catch (error) {
@@ -76,6 +78,11 @@ export const UsageSidebar: React.FC<UsageSidebarProps> = ({ onItemSelect }) => {
void persistUsageSettings({ usageDisplayMode: value });
}, [persistUsageSettings, setUsageDisplayMode]);
const handleShowPredValuesChange = React.useCallback((enabled: boolean) => {
setShowPredValues(enabled);
void persistUsageSettings({ usageShowPredValues: enabled });
}, [persistUsageSettings, setShowPredValues]);
const bgClass = 'bg-background';
return (
@@ -137,6 +144,16 @@ export const UsageSidebar: React.FC<UsageSidebarProps> = ({ onItemSelect }) => {
</SelectContent>
</Select>
</div>
<div className="mt-2 flex items-center justify-between gap-2">
<span className="typography-micro text-muted-foreground">
{t('settings.usage.sidebar.field.showPredictions')}
</span>
<Checkbox
checked={showPredValues}
onChange={handleShowPredValuesChange}
ariaLabel={t('settings.usage.sidebar.field.showPredictions')}
/>
</div>
</div>
<ScrollableOverlay outerClassName="flex-1 min-h-0" className="space-y-1 px-3 py-2 overflow-x-hidden">