order

frontend/libs/components/settings-modal/src/lib/panes/DownloadsSettingsPane.spec.tsx

@@ -49,17 +49,17 @@ it("persists Auto Download using Tauri and keeps the existing directory", async
   const user = userEvent.setup();
   render(<DownloadsSettingsPane />);
   await screen.findByText("/existing/downloads");
-  const checkbox = screen.getByRole("checkbox", { name: "Auto Download" }) as HTMLInputElement;
-  expect(checkbox.checked).toBe(false);
+  const toggle = screen.getByRole("switch", { name: "Auto Download" });
+  expect(toggle.getAttribute("aria-checked")).toBe("false");
   expect(screen.getByText("Downloads to your system the minute generations complete")).toBeTruthy();
 
-  await user.click(checkbox);
-  await waitFor(() => expect(checkbox.checked).toBe(true));
+  await user.click(toggle);
+  await waitFor(() => expect(toggle.getAttribute("aria-checked")).toBe("true"));
   expect(api.update).toHaveBeenCalledWith({ preference: "auto_download", value: true });
   cleanup();
   render(<DownloadsSettingsPane />);
   await screen.findByText("/existing/downloads");
-  expect((screen.getByRole("checkbox", { name: "Auto Download" }) as HTMLInputElement).checked).toBe(true);
+  expect(screen.getByRole("switch", { name: "Auto Download" }).getAttribute("aria-checked")).toBe("true");
 });
 
 it("saves a custom format explicitly, reloads it, and restores the app convention", async () => {
@@ -100,7 +100,7 @@ it("rejects unsafe names and shows persistence failures without enabling Auto Do
   expect(api.update).not.toHaveBeenCalled();
 
   api.update.mockRejectedValueOnce(new Error("Cannot save preferences"));
-  await user.click(screen.getByRole("checkbox", { name: "Auto Download" }));
+  await user.click(screen.getByRole("switch", { name: "Auto Download" }));
   await screen.findByText("Error: Cannot save preferences");
-  expect((screen.getByRole("checkbox", { name: "Auto Download" }) as HTMLInputElement).checked).toBe(false);
+  expect(screen.getByRole("switch", { name: "Auto Download" }).getAttribute("aria-checked")).toBe("false");
 });

frontend/libs/components/settings-modal/src/lib/panes/DownloadsSettingsPane.tsx

@@ -148,21 +148,6 @@ export const DownloadsSettingsPane = () => {
   return (
     <div className="space-y-4 text-base-fg">
       {settingsError && <p role="alert" className="text-red-400">{settingsError}</p>}
-      <div className="flex flex-col gap-1">
-        <label className="flex items-center gap-2 font-medium">
-          <input
-            type="checkbox"
-            checked={preferences?.auto_download ?? false}
-            disabled={!preferences || saving}
-            onChange={(event) => toggleAutoDownload(event.target.checked)}
-            className="h-4 w-4 accent-primary"
-          />
-          Auto Download
-        </label>
-        <p className="text-xs opacity-70">
-          Downloads to your system the minute generations complete
-        </p>
-      </div>
       <div className="space-y-2">
         <Label htmlFor="download-path">Default Download Directory</Label>
         <p className="opacity-80">
@@ -187,6 +172,21 @@ export const DownloadsSettingsPane = () => {
           Show Directory
         </Button>
       </div>
+      <div className="flex flex-col gap-2 pt-3">
+        <div className="flex flex-col gap-0.5">
+          <Label htmlFor="auto-download">Auto Download</Label>
+          <p className="text-xs opacity-70">
+            Downloads to your system the minute generations complete
+          </p>
+        </div>
+        <Switch
+          id="auto-download"
+          label="Auto Download"
+          enabled={preferences?.auto_download ?? false}
+          setEnabled={toggleAutoDownload}
+          disabled={!preferences || saving}
+        />
+      </div>
       <div className="flex flex-col gap-2 pt-3">
         <div className="flex flex-col gap-0.5">
           <Label htmlFor="ask-location-before-download">
@@ -200,6 +200,8 @@ export const DownloadsSettingsPane = () => {
           </p>
         </div>
         <Switch
+          id="ask-location-before-download"
+          label="Ask location before download"
           enabled={askLocationBeforeDownload}
           setEnabled={toggleAskLocationBeforeDownload}
         />

frontend/libs/components/switch/src/lib/switch.tsx

@@ -5,13 +5,16 @@ import { Fragment } from "react";
 interface SwitchProps {
   enabled: boolean;
   setEnabled: (enabled: boolean) => void;
+  id?: string;
+  label?: string;
+  disabled?: boolean;
   className?: string;
   offClassName?: string;
 }
 
-export function Switch({ enabled, setEnabled, className, offClassName }: SwitchProps) {
+export function Switch({ enabled, setEnabled, id, label = "Enable notifications", disabled = false, className, offClassName }: SwitchProps) {
   return (
-    <HeadlessSwitch checked={enabled} onChange={setEnabled} as={Fragment}>
+    <HeadlessSwitch id={id} checked={enabled} onChange={setEnabled} disabled={disabled} as={Fragment}>
       {({ checked, disabled }) => (
         <button
           className={clsx(
@@ -21,7 +24,7 @@ export function Switch({ enabled, setEnabled, className, offClassName }: SwitchP
             className,
           )}
         >
-          <span className="sr-only">Enable notifications</span>
+          <span className="sr-only">{label}</span>
           <span
             className={clsx(
               "size-4 rounded-full bg-white transition",