From f3540c6b4b5df27127b0fde95485daeba376b858 Mon Sep 17 00:00:00 2001
From: Saravana Achu Mac <saravanakumardb1@gmail.com>
Date: Sat, 9 May 2026 01:52:15 -0700
Subject: [PATCH] refactor(ui): normalize admin db sync controls

---
 web/src/tabs/AdminTab.tsx | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/web/src/tabs/AdminTab.tsx b/web/src/tabs/AdminTab.tsx
index 0058421..8b2245b 100644
--- a/web/src/tabs/AdminTab.tsx
+++ b/web/src/tabs/AdminTab.tsx
@@ -17,7 +17,7 @@ import { fetchDynamicConfigItems, upsertDynamicConfigItems } from '../lib/dynami
 import { getPlatformAccessToken } from '../lib/authSession';
 import { createRequestId } from '../../../shared/request-id.js';
 import { tradingRuntime } from '../lib/runtime';
-import { Button } from '../components/ui/Primitives';
+import { Button, Input } from '../components/ui/Primitives';
 
 interface AdminTabProps {
     botState: BotState;
@@ -846,20 +846,22 @@ export const AdminTab = ({ botState, socket }: AdminTabProps) => {
                                                 <p className="text-xs font-bold text-white">State Snapshots</p>
                                                 <p className="text-[10px] text-zinc-500">Persistent sync of bot state to Supabase</p>
                                             </div>
-                                            <button
+                                            <Button
                                                 type="button"
                                                 role="switch"
                                                 aria-checked={dbSyncEnabled}
                                                 aria-label="Toggle state snapshots"
                                                 onClick={() => setDbSyncEnabled(!dbSyncEnabled)}
-                                                className={`relative inline-flex h-5 w-10 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none ${dbSyncEnabled ? 'bg-cyan-500' : 'bg-zinc-700'
+                                                variant="ghost"
+                                                size="icon"
+                                                className={`relative h-6 w-11 rounded-full border-0 p-0 hover:bg-current ${dbSyncEnabled ? 'bg-cyan-500' : 'bg-zinc-700'
                                                     }`}
                                             >
                                                 <span
                                                     className={`inline-block h-4 w-4 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out ${dbSyncEnabled ? 'translate-x-5' : 'translate-x-0'
                                                         }`}
                                                 />
-                                            </button>
+                                            </Button>
                                         </div>
 
                                         <div className="space-y-3">
@@ -869,13 +871,14 @@ export const AdminTab = ({ botState, socket }: AdminTabProps) => {
                                                     <p className="text-[10px] text-zinc-500">Minimum time between DB writes ({Math.round(dbSyncInterval / 60000)}m)</p>
                                                 </div>
                                                 <div className="flex items-center gap-3">
-                                                    <input
+                                                    <Input
                                                         type="range"
                                                         min="60000"
                                                         max="3600000"
                                                         step="60000"
                                                         value={dbSyncInterval}
                                                         onChange={(e) => setDbSyncInterval(parseInt(e.target.value))}
+                                                        controlSize="sm"
                                                         className="w-32 accent-cyan-500"
                                                     />
                                                     <span className="text-[10px] font-mono text-cyan-400 w-12 text-right">