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/layout/Header.tsx
+8 -4
View File
@@ -263,6 +263,7 @@ type DesktopServicesMenuProps = {
showDevShutdown: boolean;
isDevShutdownInFlight: boolean;
onDevShutdown: () => Promise<void>;
showPredValues: boolean;
};
const DesktopServicesMenu = React.memo(function DesktopServicesMenu({
@@ -292,6 +293,7 @@ const DesktopServicesMenu = React.memo(function DesktopServicesMenu({
showDevShutdown,
isDevShutdownInFlight,
onDevShutdown,
showPredValues,
}: DesktopServicesMenuProps) {
const { t } = useI18n();
return (
@@ -468,7 +470,7 @@ const DesktopServicesMenu = React.memo(function DesktopServicesMenu({
className="h-1.5"
expectedMarkerPercent={expectedMarker}
/>
{paceInfo ? <PaceIndicator paceInfo={paceInfo} compact /> : null}
{paceInfo && showPredValues ? <PaceIndicator paceInfo={paceInfo} compact /> : null}
</div>
);
})}
@@ -512,7 +514,7 @@ const DesktopServicesMenu = React.memo(function DesktopServicesMenu({
className="h-1.5"
expectedMarkerPercent={expectedMarker}
/>
{paceInfo ? <PaceIndicator paceInfo={paceInfo} compact /> : null}
{paceInfo && showPredValues ? <PaceIndicator paceInfo={paceInfo} compact /> : null}
</div>
);
})}
@@ -701,6 +703,7 @@ export const Header: React.FC<HeaderProps> = ({
const isQuotaLoading = useQuotaStore((state) => state.isLoading);
const quotaLastUpdated = useQuotaStore((state) => state.lastUpdated);
const quotaDisplayMode = useQuotaStore((state) => state.displayMode);
const showPredValues = useQuotaStore((state) => state.showPredValues);
const dropdownProviderIds = useQuotaStore((state) => state.dropdownProviderIds);
const loadQuotaSettings = useQuotaStore((state) => state.loadSettings);
const setQuotaDisplayMode = useQuotaStore((state) => state.setDisplayMode);
@@ -1820,6 +1823,7 @@ export const Header: React.FC<HeaderProps> = ({
servicesTabItems={servicesTabItems}
quotaLastUpdated={quotaLastUpdated}
quotaDisplayMode={quotaDisplayMode}
showPredValues={showPredValues}
quotaDisplayTabItems={quotaDisplayTabItems}
handleDisplayModeChange={handleDisplayModeChange}
handleUsageRefresh={handleUsageRefresh}
@@ -2288,7 +2292,7 @@ export const Header: React.FC<HeaderProps> = ({
className="h-1.5"
expectedMarkerPercent={expectedMarker}
/>
{paceInfo ? (
{paceInfo && showPredValues ? (
<PaceIndicator paceInfo={paceInfo} compact />
) : null}
</div>
@@ -2345,7 +2349,7 @@ export const Header: React.FC<HeaderProps> = ({
className="h-1.5"
expectedMarkerPercent={expectedMarker}
/>
{paceInfo ? (
{paceInfo && showPredValues ? (
<PaceIndicator paceInfo={paceInfo} compact />
) : null}
</div>
packages/ui/src/components/layout/VSCodeLayout.tsx
+2 -1
View File
@@ -582,6 +582,7 @@ const VSCodeHeader: React.FC<VSCodeHeaderProps> = ({ title, showBack, onBack, on
const isQuotaLoading = useQuotaStore((state) => state.isLoading);
const quotaLastUpdated = useQuotaStore((state) => state.lastUpdated);
const quotaDisplayMode = useQuotaStore((state) => state.displayMode);
const showPredValues = useQuotaStore((state) => state.showPredValues);
const dropdownProviderIds = useQuotaStore((state) => state.dropdownProviderIds);
const loadQuotaSettings = useQuotaStore((state) => state.loadSettings);
const setQuotaDisplayMode = useQuotaStore((state) => state.setDisplayMode);
@@ -892,7 +893,7 @@ const VSCodeHeader: React.FC<VSCodeHeaderProps> = ({ title, showBack, onBack, on
className="h-1"
expectedMarkerPercent={expectedMarker}
/>
{paceInfo && (
{paceInfo && showPredValues && (
<div className="mt-0.5">
<PaceIndicator paceInfo={paceInfo} compact />
</div>
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">