fix(settings): make usage switches clickable (#284)

Author: SDSLeon

package.json

@@ -24,7 +24,7 @@
     "dev:renderer": "node scripts/free-port.mjs 3100 && vite",
     "dev:mobile": "node scripts/free-port.mjs 3100 && cross-env PORACODE_BUILD_TARGET=mobile vite",
     "dev:electron": "tsdown --watch",
-    "dev:app": "node scripts/free-port.mjs 47820-47832 32120-32132 && pnpm run setup:native && wait-on dist/main/main.cjs dist/main/mcpProbeWorker.mjs && pnpm run prepare:package-assets && wait-on tcp:3100 && node scripts/dev-launch.mjs",
+    "dev:app": "pnpm run setup:native && wait-on dist/main/main.cjs dist/main/mcpProbeWorker.mjs && pnpm run prepare:package-assets && wait-on tcp:3100 && node scripts/dev-launch.mjs",
     "build": "pnpm run build:renderer && pnpm run build:electron",
     "build:renderer": "vite build",
     "build:mobile": "pnpm run prepare:mobile:ssh && cross-env PORACODE_BUILD_TARGET=mobile vite build && node scripts/finalize-mobile-build.mjs",

src/renderer/styles.css

@@ -849,6 +849,7 @@
     --window-overlay-background: rgba(0, 0, 0, 0);
     --composer-surface: var(--surface);
     --interactive-cursor: default;
+    --cursor-interactive: default;
 
     /* Theme-adaptive interaction overlays. Derived from --foreground so they
        invert per theme: a light wash on dark themes (matching the old

src/renderer/views/SettingsOverlay/parts/UsageSettings.tsx

@@ -254,9 +254,17 @@ function UsageProviderRow(props: { id: string; label: string }) {
             });
           }}
         >
-          <Switch.Control>
-            <Switch.Thumb />
-          </Switch.Control>
+          <Switch.Content>
+            <Switch.Control
+              onClick={(event) => {
+                event.preventDefault();
+                event.stopPropagation();
+                event.currentTarget.closest("label")?.querySelector("input")?.click();
+              }}
+            >
+              <Switch.Thumb />
+            </Switch.Control>
+          </Switch.Content>
         </Switch>
       </div>
       {enabled ? <UsageProviderControls id={id} label={label} /> : null}
@@ -379,9 +387,17 @@ export function UsageSettings() {
             });
           }}
         >
-          <Switch.Control>
-            <Switch.Thumb />
-          </Switch.Control>
+          <Switch.Content>
+            <Switch.Control
+              onClick={(event) => {
+                event.preventDefault();
+                event.stopPropagation();
+                event.currentTarget.closest("label")?.querySelector("input")?.click();
+              }}
+            >
+              <Switch.Thumb />
+            </Switch.Control>
+          </Switch.Content>
         </Switch>
       </SettingRow>
 
@@ -403,9 +419,17 @@ export function UsageSettings() {
             });
           }}
         >
-          <Switch.Control>
-            <Switch.Thumb />
-          </Switch.Control>
+          <Switch.Content>
+            <Switch.Control
+              onClick={(event) => {
+                event.preventDefault();
+                event.stopPropagation();
+                event.currentTarget.closest("label")?.querySelector("input")?.click();
+              }}
+            >
+              <Switch.Thumb />
+            </Switch.Control>
+          </Switch.Content>
         </Switch>
       </SettingRow>