Extract start minimzed switch component

2 files changed, 48 insertions, 18 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/user-interface-settings/components/start-minimized-setting/StartMinimizedSetting.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/user-interface-settings/components/start-minimized-setting/StartMinimizedSetting.tsx
index 19418f9ff0..429b8fe055 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/user-interface-settings/components/start-minimized-setting/StartMinimizedSetting.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/user-interface-settings/components/start-minimized-setting/StartMinimizedSetting.tsx
@@ -1,24 +1,30 @@
 import { messages } from '../../../../../../shared/gettext';
-import { useAppContext } from '../../../../../context';
-import { useSelector } from '../../../../../redux/store';
-import { SettingsToggleListItem } from '../../../../settings-toggle-list-item';
+import { SettingsListItem } from '../../../../settings-list-item';
+import { StartMinimizedSwitch } from './StartMinimizedSwitch';
 
 export function StartMinimizedSetting() {
-  const startMinimized = useSelector((state) => state.settings.guiSettings.startMinimized);
-  const { setStartMinimized } = useAppContext();
-
   return (
-    <SettingsToggleListItem
-      checked={startMinimized}
-      onCheckedChange={setStartMinimized}
-      description={messages.pgettext(
-        'user-interface-settings-view',
-        'Show only the tray icon when the app starts.',
-      )}>
-      <SettingsToggleListItem.Label>
-        {messages.pgettext('user-interface-settings-view', 'Start minimized')}
-      </SettingsToggleListItem.Label>
-      <SettingsToggleListItem.Switch />
-    </SettingsToggleListItem>
+    <SettingsListItem>
+      <SettingsListItem.Item>
+        <SettingsListItem.Content>
+          <StartMinimizedSwitch>
+            <StartMinimizedSwitch.Label variant="titleMedium">
+              {messages.pgettext('user-interface-settings-view', 'Start minimized')}
+            </StartMinimizedSwitch.Label>
+            <StartMinimizedSwitch.Trigger>
+              <StartMinimizedSwitch.Thumb />
+            </StartMinimizedSwitch.Trigger>
+          </StartMinimizedSwitch>
+        </SettingsListItem.Content>
+      </SettingsListItem.Item>
+      <SettingsListItem.Footer>
+        <SettingsListItem.Text>
+          {messages.pgettext(
+            'user-interface-settings-view',
+            'Show only the tray icon when the app starts.',
+          )}
+        </SettingsListItem.Text>
+      </SettingsListItem.Footer>
+    </SettingsListItem>
   );
 }
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/user-interface-settings/components/start-minimized-setting/StartMinimizedSwitch.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/user-interface-settings/components/start-minimized-setting/StartMinimizedSwitch.tsx
new file mode 100644
index 0000000000..7b08d81781
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/user-interface-settings/components/start-minimized-setting/StartMinimizedSwitch.tsx
@@ -0,0 +1,24 @@
+import { useAppContext } from '../../../../../context';
+import { useStartMinimized } from '../../../../../features/client/hooks';
+import { Switch, SwitchProps } from '../../../../../lib/components/switch';
+
+export type StartMinimizedSwitchProps = SwitchProps;
+
+function StartMinimizedSwitch({ children, ...props }: StartMinimizedSwitchProps) {
+  const startMinimized = useStartMinimized();
+  const { setStartMinimized } = useAppContext();
+
+  return (
+    <Switch checked={startMinimized} onCheckedChange={setStartMinimized} {...props}>
+      {children}
+    </Switch>
+  );
+}
+
+const StartMinimizedSwitchNamespace = Object.assign(StartMinimizedSwitch, {
+  Label: Switch.Label,
+  Thumb: Switch.Thumb,
+  Trigger: Switch.Trigger,
+});
+
+export { StartMinimizedSwitchNamespace as StartMinimizedSwitch };