From 982c1eb5b33cb3a3a5058da5c82979d43dbeedc5 Mon Sep 17 00:00:00 2001
From: Brennan Benson <79079362+brennanb2025@users.noreply.github.com>
Date: Mon, 20 Jul 2026 14:50:51 -0700
Subject: [PATCH] fix(status-bar): simplify usage mode toggle

---
 .../status-bar/UsageRosterPanel.tsx           | 29 +++++++++----------
 src/renderer/src/i18n/locales/en.json         |  3 +-
 src/renderer/src/i18n/locales/es.json         |  3 +-
 src/renderer/src/i18n/locales/ja.json         |  3 +-
 src/renderer/src/i18n/locales/ko.json         |  3 +-
 src/renderer/src/i18n/locales/zh.json         |  3 +-
 6 files changed, 19 insertions(+), 25 deletions(-)

diff --git a/src/renderer/src/components/status-bar/UsageRosterPanel.tsx b/src/renderer/src/components/status-bar/UsageRosterPanel.tsx
index cbfdbdd4869..5788e67969e 100644
--- a/src/renderer/src/components/status-bar/UsageRosterPanel.tsx
+++ b/src/renderer/src/components/status-bar/UsageRosterPanel.tsx
@@ -265,24 +265,23 @@ export function UsageRosterPanel({
           onStatusBarUsageModeChange(checked ? 'verbose' : 'compact')
         }}
         onSelect={(event) => event.preventDefault()}
-        className="w-full cursor-pointer rounded-none py-2 pl-8 pr-3.5"
+        className="w-full cursor-pointer justify-between rounded-none px-3.5 py-2.5 text-[13px] text-foreground [&>span:first-child]:hidden"
       >
-        <span className="flex flex-col">
-          <span className="text-[13px] text-foreground">
-            {translate(
-              'auto.components.status.bar.UsageRosterPanel.verboseFooter',
-              'Verbose footer'
-            )}
-          </span>
-          <span className="text-[11px] font-normal text-muted-foreground">
-            {translate(
-              'auto.components.status.bar.UsageRosterPanel.verboseFooterDescription',
-              'Show every usage window'
-            )}
-          </span>
+        {translate('auto.components.status.bar.UsageRosterPanel.verboseFooter', 'Verbose footer')}
+        {/* Why: one menu control avoids nesting the SettingsSwitch button inside an interactive item. */}
+        <span
+          aria-hidden
+          className={`relative inline-flex h-5 w-9 shrink-0 items-center rounded-full border border-transparent transition-colors ${
+            statusBarUsageMode === 'verbose' ? 'bg-foreground' : 'bg-muted-foreground/30'
+          }`}
+        >
+          <span
+            className={`block size-3.5 rounded-full bg-background shadow-sm transition-transform ${
+              statusBarUsageMode === 'verbose' ? 'translate-x-4' : 'translate-x-0.5'
+            }`}
+          />
         </span>
       </DropdownMenuCheckboxItem>
-      <div className="border-t border-border/70" />
       <DropdownMenuItem
         onSelect={onUsageDetails}
         className="w-full cursor-pointer justify-between rounded-none px-3.5 py-2.5 text-[13px] text-foreground"
diff --git a/src/renderer/src/i18n/locales/en.json b/src/renderer/src/i18n/locales/en.json
index 9a611c3314e..8f4ba82a04a 100644
--- a/src/renderer/src/i18n/locales/en.json
+++ b/src/renderer/src/i18n/locales/en.json
@@ -3309,8 +3309,7 @@
             "loadingUsage": "Loading usage…",
             "usageUnavailable": "Usage unavailable",
             "noUsageData": "No usage data",
-            "verboseFooter": "Verbose footer",
-            "verboseFooterDescription": "Show every usage window"
+            "verboseFooter": "Verbose footer"
           }
         }
       },
diff --git a/src/renderer/src/i18n/locales/es.json b/src/renderer/src/i18n/locales/es.json
index 9ecf549208c..3e03c1d582f 100644
--- a/src/renderer/src/i18n/locales/es.json
+++ b/src/renderer/src/i18n/locales/es.json
@@ -3286,8 +3286,7 @@
             "loadingUsage": "Loading usage…",
             "usageUnavailable": "Usage unavailable",
             "noUsageData": "No usage data",
-            "verboseFooter": "Verbose footer",
-            "verboseFooterDescription": "Show every usage window"
+            "verboseFooter": "Verbose footer"
           }
         }
       },
diff --git a/src/renderer/src/i18n/locales/ja.json b/src/renderer/src/i18n/locales/ja.json
index bf1993ba500..16e0086f19b 100644
--- a/src/renderer/src/i18n/locales/ja.json
+++ b/src/renderer/src/i18n/locales/ja.json
@@ -3286,8 +3286,7 @@
             "loadingUsage": "Loading usage…",
             "usageUnavailable": "Usage unavailable",
             "noUsageData": "No usage data",
-            "verboseFooter": "Verbose footer",
-            "verboseFooterDescription": "Show every usage window"
+            "verboseFooter": "Verbose footer"
           }
         }
       },
diff --git a/src/renderer/src/i18n/locales/ko.json b/src/renderer/src/i18n/locales/ko.json
index 717ba022d1c..47c81bf5f33 100644
--- a/src/renderer/src/i18n/locales/ko.json
+++ b/src/renderer/src/i18n/locales/ko.json
@@ -3286,8 +3286,7 @@
             "loadingUsage": "Loading usage…",
             "usageUnavailable": "Usage unavailable",
             "noUsageData": "No usage data",
-            "verboseFooter": "Verbose footer",
-            "verboseFooterDescription": "Show every usage window"
+            "verboseFooter": "Verbose footer"
           }
         }
       },
diff --git a/src/renderer/src/i18n/locales/zh.json b/src/renderer/src/i18n/locales/zh.json
index 80956df816b..88bcc2b0b78 100644
--- a/src/renderer/src/i18n/locales/zh.json
+++ b/src/renderer/src/i18n/locales/zh.json
@@ -3286,8 +3286,7 @@
             "loadingUsage": "Loading usage…",
             "usageUnavailable": "Usage unavailable",
             "noUsageData": "No usage data",
-            "verboseFooter": "Verbose footer",
-            "verboseFooterDescription": "Show every usage window"
+            "verboseFooter": "Verbose footer"
           }
         }
       },