Switches for on/off settings, one-line helper copy

src/renderer/components/custom/panels/action-suggestions-panel.tsx

@@ -12,7 +12,7 @@ import { type ActionSuggestion, SuggestionState } from '@/types/suggestion';
 const MAX_QUESTION_LENGTH = 256;
 
 import { Button } from '../../ui/button';
-import { Checkbox } from '../../ui/checkbox';
+import { Switch } from '../../ui/switch';
 import { SafeMarkdown } from '../safe-markdown';
 import SuggestionReveal from './suggestion-reveal';
 
@@ -176,7 +176,8 @@ function ActionSuggestionsPanel({
 
         {!isStealth && (
           <label className="flex items-center gap-2 text-xs text-muted-foreground">
-            <Checkbox
+            <Switch
+              size="sm"
               checked={autoScroll}
               onCheckedChange={(v) => {
                 const enabled = v === true;
@@ -185,7 +186,6 @@ function ActionSuggestionsPanel({
                   console.error('Failed to persist auto-scroll setting', e)
                 );
               }}
-              className="h-4 w-4 rounded border-border bg-background text-primary"
               aria-label={t.panels.enableAutoScroll}
             />
             <span className="text-xs text-muted-foreground">{t.panels.autoScroll}</span>

src/renderer/components/custom/panels/live-suggestions-panel.tsx

@@ -18,7 +18,7 @@ import { SuggestionMode } from '@/types/llm';
 import { type LiveSuggestion, SuggestionState } from '@/types/suggestion';
 
 import { Button } from '../../ui/button';
-import { Checkbox } from '../../ui/checkbox';
+import { Switch } from '../../ui/switch';
 import { SafeMarkdown } from '../safe-markdown';
 import SuggestionReveal from './suggestion-reveal';
 
@@ -222,7 +222,8 @@ function LiveSuggestionsPanel({
 
         {!isStealth && (
           <label className="flex items-center gap-2 text-xs text-muted-foreground">
-            <Checkbox
+            <Switch
+              size="sm"
               checked={autoScroll}
               onCheckedChange={(v) => {
                 const enabled = v === true;
@@ -231,7 +232,6 @@ function LiveSuggestionsPanel({
                   console.error('Failed to persist auto-scroll setting', e)
                 );
               }}
-              className="h-4 w-4 rounded border-border bg-background text-primary"
               aria-label={t.panels.enableAutoScroll}
             />
             <span className="text-xs text-muted-foreground">{t.panels.autoScroll}</span>

src/renderer/components/custom/panels/mock-transcript-panel.tsx

@@ -5,8 +5,8 @@ import { StreamingQuestion } from '@/components/custom/panels/streaming-question
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Card } from '@/components/ui/card';
-import { Checkbox } from '@/components/ui/checkbox';
 import { Progress } from '@/components/ui/progress';
+import { Switch } from '@/components/ui/switch';
 import { useAppState } from '@/hooks/use-app-state';
 import { useConfigStore } from '@/hooks/use-config-store';
 import { useT } from '@/i18n';
@@ -219,7 +219,8 @@ function MockTranscriptPanel({ session }: MockTranscriptPanelProps) {
               every ASR partial pulled the panel back to the bottom, so re-reading an earlier
               answer mid-interview was not possible while the candidate was still speaking. */}
           <label className="flex items-center gap-2 text-xs text-muted-foreground">
-            <Checkbox
+            <Switch
+              size="sm"
               checked={autoScroll}
               onCheckedChange={(v) => {
                 const enabled = v === true;
@@ -228,7 +229,6 @@ function MockTranscriptPanel({ session }: MockTranscriptPanelProps) {
                   console.error('Failed to persist auto-scroll setting', e)
                 );
               }}
-              className="h-4 w-4 rounded border-border bg-background"
               aria-label={t.panels.enableAutoScroll}
             />
             <span className="select-none">{t.panels.autoScroll}</span>

src/renderer/components/custom/panels/transcript-panel.tsx

@@ -9,7 +9,7 @@ import { useT } from '@/i18n';
 import { Speaker, type Transcript } from '@/types/transcript';
 
 import { Button } from '../../ui/button';
-import { Checkbox } from '../../ui/checkbox';
+import { Switch } from '../../ui/switch';
 
 // Every entry is from the same session, so the date carries no information and its width is
 // what would push the speaker onto a line of its own.
@@ -94,7 +94,8 @@ function TranscriptPanel({ transcripts, isRunning = false }: TranscriptPanelProp
 
         {!isStealth && (
           <label className="flex items-center gap-2 text-xs text-muted-foreground">
-            <Checkbox
+            <Switch
+              size="sm"
               checked={autoScroll}
               onCheckedChange={(v) => {
                 const enabled = v === true;
@@ -103,7 +104,6 @@ function TranscriptPanel({ transcripts, isRunning = false }: TranscriptPanelProp
                   console.error('Failed to persist auto-scroll setting', e)
                 );
               }}
-              className="h-4 w-4 rounded border-border bg-background"
               aria-label={t.panels.enableAutoScroll}
             />
             <span className="select-none">{t.panels.autoScroll}</span>

src/renderer/components/custom/settings/allow-screen-capture-field.tsx

@@ -1,21 +1,27 @@
-import { Checkbox } from '@/components/ui/checkbox';
+import { useId } from 'react';
+
+import { Switch } from '@/components/ui/switch';
 import { useAllowScreenCapture } from '@/hooks/use-allow-screen-capture';
 import { useT } from '@/i18n';
 
 export function AllowScreenCaptureField() {
   const t = useT();
+  const descriptionId = useId();
   const { enabled, setEnabled } = useAllowScreenCapture();
 
   return (
     <label className="flex cursor-pointer items-center justify-between gap-3 rounded-lg border p-3">
       <div>
         <p className="text-sm font-medium">{t.allowScreenCaptureField.label}</p>
-        <p className="text-xs text-muted-foreground">{t.allowScreenCaptureField.description}</p>
+        <p id={descriptionId} className="text-xs text-muted-foreground">
+          {t.allowScreenCaptureField.description}
+        </p>
       </div>
-      <Checkbox
+      <Switch
         checked={enabled}
-        onCheckedChange={(v) => setEnabled(v === true)}
+        onCheckedChange={setEnabled}
         aria-label={t.allowScreenCaptureField.label}
+        aria-describedby={descriptionId}
       />
     </label>
   );

src/renderer/components/custom/settings/hide-taskbar-field.tsx

@@ -1,21 +1,27 @@
-import { Checkbox } from '@/components/ui/checkbox';
+import { useId } from 'react';
+
+import { Switch } from '@/components/ui/switch';
 import { useHideTaskbar } from '@/hooks/use-hide-taskbar';
 import { useT } from '@/i18n';
 
 export function HideTaskbarField() {
   const t = useT();
+  const descriptionId = useId();
   const { enabled, setEnabled } = useHideTaskbar();
 
   return (
     <label className="flex cursor-pointer items-center justify-between gap-3 rounded-lg border p-3">
       <div>
         <p className="text-sm font-medium">{t.hideTaskbarField.label}</p>
-        <p className="text-xs text-muted-foreground">{t.hideTaskbarField.description}</p>
+        <p id={descriptionId} className="text-xs text-muted-foreground">
+          {t.hideTaskbarField.description}
+        </p>
       </div>
-      <Checkbox
+      <Switch
         checked={enabled}
-        onCheckedChange={(v) => setEnabled(v === true)}
+        onCheckedChange={setEnabled}
         aria-label={t.hideTaskbarField.label}
+        aria-describedby={descriptionId}
       />
     </label>
   );

src/renderer/components/custom/settings/mock-hints-field.tsx

@@ -1,4 +1,6 @@
-import { Checkbox } from '@/components/ui/checkbox';
+import { useId } from 'react';
+
+import { Switch } from '@/components/ui/switch';
 import { useMockLiveSuggestions } from '@/hooks/use-mock-live-suggestions';
 import { useT } from '@/i18n';
 
@@ -12,18 +14,22 @@ import { useT } from '@/i18n';
  */
 export function MockHintsField() {
   const t = useT();
+  const descriptionId = useId();
   const { enabled, setEnabled } = useMockLiveSuggestions();
 
   return (
     <label className="flex cursor-pointer items-center justify-between gap-3 rounded-lg border p-3">
       <div>
         <p className="text-sm font-medium">{t.mockHintsField.label}</p>
-        <p className="text-xs text-muted-foreground">{t.mockHintsField.description}</p>
+        <p id={descriptionId} className="text-xs text-muted-foreground">
+          {t.mockHintsField.description}
+        </p>
       </div>
-      <Checkbox
+      <Switch
         checked={enabled}
-        onCheckedChange={(v) => setEnabled(v === true)}
+        onCheckedChange={setEnabled}
         aria-label={t.mockHintsField.label}
+        aria-describedby={descriptionId}
       />
     </label>
   );

src/renderer/components/custom/settings/transcript-panel-field.tsx

@@ -1,4 +1,6 @@
-import { Checkbox } from '@/components/ui/checkbox';
+import { useId } from 'react';
+
+import { Switch } from '@/components/ui/switch';
 import { useTranscriptPanel } from '@/hooks/use-transcript-panel';
 import { useT } from '@/i18n';
 import { Hotkey, HOTKEYS } from '@/lib/hotkeys';
@@ -11,20 +13,22 @@ import { Hotkey, HOTKEYS } from '@/lib/hotkeys';
  */
 export function TranscriptPanelField() {
   const t = useT();
+  const descriptionId = useId();
   const { visible, toggle } = useTranscriptPanel();
 
   return (
     <label className="flex cursor-pointer items-center justify-between gap-3 rounded-lg border p-3">
       <div>
         <p className="text-sm font-medium">{t.transcriptPanelField.label}</p>
-        <p className="text-xs text-muted-foreground">
+        <p id={descriptionId} className="text-xs text-muted-foreground">
           {t.transcriptPanelField.description(HOTKEYS[Hotkey.ToggleTranscript].combo)}
         </p>
       </div>
-      <Checkbox
+      <Switch
         checked={visible}
         onCheckedChange={() => toggle()}
         aria-label={t.transcriptPanelField.label}
+        aria-describedby={descriptionId}
       />
     </label>
   );

src/renderer/components/ui/switch.tsx

@@ -0,0 +1,31 @@
+import { Switch as SwitchPrimitive } from 'radix-ui';
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+function Switch({
+  className,
+  size = 'default',
+  ...props
+}: React.ComponentProps<typeof SwitchPrimitive.Root> & {
+  size?: 'sm' | 'default';
+}) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      data-size={size}
+      className={cn(
+        'peer group/switch inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-[1.15rem] data-[size=default]:w-8 data-[size=sm]:h-3.5 data-[size=sm]:w-6 data-[state=checked]:bg-primary data-[state=unchecked]:bg-muted-foreground/70 dark:data-[state=unchecked]:bg-muted-foreground/40',
+        className
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className="pointer-events-none block rounded-full bg-white shadow-sm ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0 dark:data-[state=checked]:bg-primary-foreground dark:data-[state=unchecked]:bg-foreground"
+      />
+    </SwitchPrimitive.Root>
+  );
+}
+
+export { Switch };