From 6a901d24bd16794d071f510d307c4d6c327dd32c Mon Sep 17 00:00:00 2001
From: Rounak Agarwal <agarwalrounak2005@gmail.com>
Date: Thu, 29 Oct 2026 01:49:10 +0530
Subject: [PATCH] fix: use shared Switch component for System settings toggles
 (#1668)

---
 .../components/SystemSettingsCard.tsx         | 57 ++++---------------
 1 file changed, 11 insertions(+), 46 deletions(-)

diff --git a/frontend/src/pages/SettingsPage/components/SystemSettingsCard.tsx b/frontend/src/pages/SettingsPage/components/SystemSettingsCard.tsx
index 4a05be707..23ad0c6d3 100644
--- a/frontend/src/pages/SettingsPage/components/SystemSettingsCard.tsx
+++ b/frontend/src/pages/SettingsPage/components/SystemSettingsCard.tsx
@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { Monitor } from 'lucide-react';
 import { invoke } from '@tauri-apps/api/core';
 import SettingsCard from './SettingsCard';
+import { Switch } from '@/components/ui/switch';
 
 const SystemSettingsCard: React.FC = () => {
   // null = unknown / error reading state
@@ -74,31 +75,13 @@ const SystemSettingsCard: React.FC = () => {
           </div>
         </div>
 
-        <button
-          role="switch"
-          aria-checked={isChecked}
+          <Switch
+          checked={isChecked}
+          onCheckedChange={handleToggle}
+          disabled={isDisabled}
           aria-labelledby="autostart-label"
           aria-describedby="autostart-desc"
-          disabled={isDisabled}
-          onClick={handleToggle}
-          className={[
-            'relative inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full',
-            'transition-colors duration-200 ease-in-out',
-            'focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',
-            'disabled:cursor-not-allowed disabled:opacity-50',
-            isChecked
-              ? 'bg-primary focus-visible:ring-primary'
-              : 'bg-gray-200 focus-visible:ring-gray-500 dark:bg-gray-700',
-          ].join(' ')}
-        >
-          <span
-            className={[
-              'inline-block h-4 w-4 rounded-full bg-white shadow-md',
-              'transition-transform duration-200 ease-in-out',
-              isChecked ? 'translate-x-6' : 'translate-x-1',
-            ].join(' ')}
-          />
-        </button>
+        />
       </div>
 
       <div className="flex items-center justify-between py-1">
@@ -115,31 +98,13 @@ const SystemSettingsCard: React.FC = () => {
           </div>
         </div>
 
-        <button
-          role="switch"
-          aria-checked={closeToTrayChecked}
+          <Switch
+          checked={closeToTrayChecked}
+          onCheckedChange={handleCloseToTrayToggle}
+          disabled={closeToTrayDisabled}
           aria-labelledby="close-to-tray-label"
           aria-describedby="close-to-tray-desc"
-          disabled={closeToTrayDisabled}
-          onClick={handleCloseToTrayToggle}
-          className={[
-            'relative inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full',
-            'transition-colors duration-200 ease-in-out',
-            'focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',
-            'disabled:cursor-not-allowed disabled:opacity-50',
-            closeToTrayChecked
-              ? 'bg-primary focus-visible:ring-primary'
-              : 'bg-gray-200 focus-visible:ring-gray-500 dark:bg-gray-700',
-          ].join(' ')}
-        >
-          <span
-            className={[
-              'inline-block h-4 w-4 rounded-full bg-white shadow-md',
-              'transition-transform duration-200 ease-in-out',
-              closeToTrayChecked ? 'translate-x-6' : 'translate-x-1',
-            ].join(' ')}
-          />
-        </button>
+        />
       </div>
     </SettingsCard>
   );