Extract auto start switch component

2 files changed, 55 insertions, 27 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/auto-start-setting/AutoStartSetting.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/auto-start-setting/AutoStartSetting.tsx
index 7dd96b73d6..65a079b5f5 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/auto-start-setting/AutoStartSetting.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/auto-start-setting/AutoStartSetting.tsx
@@ -1,33 +1,22 @@
-import { useCallback } from 'react';
-
 import { messages } from '../../../../../../shared/gettext';
-import log from '../../../../../../shared/logging';
-import { useAppContext } from '../../../../../context';
-import { useSelector } from '../../../../../redux/store';
-import { SettingsToggleListItem } from '../../../../settings-toggle-list-item';
+import { SettingsListItem } from '../../../../settings-list-item';
+import { AutoStartSwitch } from './AutoStartSwitch';
 
 export function AutoStartSetting() {
-  const autoStart = useSelector((state) => state.settings.autoStart);
-  const { setAutoStart: setAutoStartImpl } = useAppContext();
-
-  const setAutoStart = useCallback(
-    async (autoStart: boolean) => {
-      try {
-        await setAutoStartImpl(autoStart);
-      } catch (e) {
-        const error = e as Error;
-        log.error(`Cannot set auto-start: ${error.message}`);
-      }
-    },
-    [setAutoStartImpl],
-  );
-
   return (
-    <SettingsToggleListItem checked={autoStart} onCheckedChange={setAutoStart}>
-      <SettingsToggleListItem.Label>
-        {messages.pgettext('vpn-settings-view', 'Launch app on start-up')}
-      </SettingsToggleListItem.Label>
-      <SettingsToggleListItem.Switch />
-    </SettingsToggleListItem>
+    <SettingsListItem>
+      <SettingsListItem.Item>
+        <SettingsListItem.Content>
+          <AutoStartSwitch>
+            <AutoStartSwitch.Label variant="titleMedium">
+              {messages.pgettext('vpn-settings-view', 'Launch app on start-up')}
+            </AutoStartSwitch.Label>
+            <AutoStartSwitch.Trigger>
+              <AutoStartSwitch.Thumb />
+            </AutoStartSwitch.Trigger>
+          </AutoStartSwitch>
+        </SettingsListItem.Content>
+      </SettingsListItem.Item>
+    </SettingsListItem>
   );
 }
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/auto-start-setting/AutoStartSwitch.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/auto-start-setting/AutoStartSwitch.tsx
new file mode 100644
index 0000000000..793e135c08
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/auto-start-setting/AutoStartSwitch.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+
+import log from '../../../../../../shared/logging';
+import { useAppContext } from '../../../../../context';
+import { useAutoStart } from '../../../../../features/client/hooks';
+import { Switch, SwitchProps } from '../../../../../lib/components/switch';
+
+export type AutoStartSwitch = SwitchProps;
+
+function AutoStartSwitch({ children, ...props }: AutoStartSwitch) {
+  const autoStart = useAutoStart();
+  const { setAutoStart: setAutoStartImpl } = useAppContext();
+
+  const setAutoStart = React.useCallback(
+    async (autoStart: boolean) => {
+      try {
+        await setAutoStartImpl(autoStart);
+      } catch (e) {
+        const error = e as Error;
+        log.error(`Cannot set auto-start: ${error.message}`);
+      }
+    },
+    [setAutoStartImpl],
+  );
+
+  return (
+    <Switch checked={autoStart} onCheckedChange={setAutoStart} {...props}>
+      {children}
+    </Switch>
+  );
+}
+
+const AutoStartSwitchNamespace = Object.assign(AutoStartSwitch, {
+  Label: Switch.Label,
+  Thumb: Switch.Thumb,
+  Trigger: Switch.Trigger,
+});
+
+export { AutoStartSwitchNamespace as AutoStartSwitch };