Update UpdateTab.tsx

app/components/@settings/tabs/update/UpdateTab.tsx

@@ -4,6 +4,7 @@ import { useSettings } from '~/lib/hooks/useSettings';
 import { logStore } from '~/lib/stores/logs';
 import { toast } from 'react-toastify';
 import { Dialog, DialogRoot, DialogTitle, DialogDescription, DialogButton } from '~/components/ui/Dialog';
+import { classNames } from '~/utils/classNames';
 
 interface UpdateProgress {
   stage: 'fetch' | 'pull' | 'install' | 'build' | 'complete';
@@ -80,7 +81,7 @@ const UpdateTab = () => {
   const { isLatestBranch } = useSettings();
   const [isChecking, setIsChecking] = useState(false);
   const [error, setError] = useState<string | null>(null);
-  const [updateSettings] = useState<UpdateSettings>(() => {
+  const [updateSettings, setUpdateSettings] = useState<UpdateSettings>(() => {
     const stored = localStorage.getItem('update_settings');
     return stored
       ? JSON.parse(stored)
@@ -176,36 +177,154 @@ const UpdateTab = () => {
   };
 
   return (
-    <div className="space-y-4 p-4">
-      <div className="flex items-center justify-between">
-        <h2 className="text-xl font-semibold">Updates</h2>
-        <button
-          onClick={() => {
-            setError(null);
-            checkForUpdates();
-          }}
-          className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors disabled:opacity-50"
-          disabled={isChecking}
-        >
-          {isChecking ? (
-            <div className="flex items-center">
-              <motion.div
-                animate={{ rotate: 360 }}
-                transition={{ duration: 1, repeat: Infinity, ease: 'linear' }}
-                className="w-4 h-4 border-2 border-white border-t-transparent rounded-full mr-2"
+    <div className="flex flex-col gap-6">
+      <motion.div
+        className="flex items-center gap-3"
+        initial={{ opacity: 0, y: -20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.3 }}
+      >
+        <div className="i-ph:arrow-circle-up text-xl text-purple-500" />
+        <div>
+          <h3 className="text-lg font-medium text-bolt-elements-textPrimary">Updates</h3>
+          <p className="text-sm text-bolt-elements-textSecondary">Check for and manage application updates</p>
+        </div>
+      </motion.div>
+
+      {/* Update Settings Card */}
+      <motion.div
+        className="p-6 rounded-xl bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A]"
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.3, delay: 0.1 }}
+      >
+        <div className="flex items-center gap-3 mb-6">
+          <div className="i-ph:gear text-purple-500 w-5 h-5" />
+          <h3 className="text-lg font-medium text-bolt-elements-textPrimary">Update Settings</h3>
+        </div>
+
+        <div className="space-y-4">
+          <div className="flex items-center justify-between">
+            <div>
+              <span className="text-sm text-bolt-elements-textPrimary">Automatic Updates</span>
+              <p className="text-xs text-bolt-elements-textSecondary">
+                Automatically check and apply updates when available
+              </p>
+            </div>
+            <button
+              onClick={() => setUpdateSettings((prev) => ({ ...prev, autoUpdate: !prev.autoUpdate }))}
+              className={classNames(
+                'relative inline-flex h-6 w-11 items-center rounded-full transition-colors',
+                updateSettings.autoUpdate ? 'bg-purple-500' : 'bg-gray-200 dark:bg-gray-700',
+              )}
+            >
+              <span
+                className={classNames(
+                  'inline-block h-4 w-4 transform rounded-full bg-white transition-transform',
+                  updateSettings.autoUpdate ? 'translate-x-6' : 'translate-x-1',
+                )}
               />
-              Checking...
+            </button>
+          </div>
+
+          <div className="flex items-center justify-between">
+            <div>
+              <span className="text-sm text-bolt-elements-textPrimary">In-App Notifications</span>
+              <p className="text-xs text-bolt-elements-textSecondary">Show notifications when updates are available</p>
             </div>
-          ) : (
-            'Check for Updates'
-          )}
-        </button>
-      </div>
+            <button
+              onClick={() => setUpdateSettings((prev) => ({ ...prev, notifyInApp: !prev.notifyInApp }))}
+              className={classNames(
+                'relative inline-flex h-6 w-11 items-center rounded-full transition-colors',
+                updateSettings.notifyInApp ? 'bg-purple-500' : 'bg-gray-200 dark:bg-gray-700',
+              )}
+            >
+              <span
+                className={classNames(
+                  'inline-block h-4 w-4 transform rounded-full bg-white transition-transform',
+                  updateSettings.notifyInApp ? 'translate-x-6' : 'translate-x-1',
+                )}
+              />
+            </button>
+          </div>
+
+          <div className="flex items-center justify-between">
+            <div>
+              <span className="text-sm text-bolt-elements-textPrimary">Check Interval</span>
+              <p className="text-xs text-bolt-elements-textSecondary">How often to check for updates</p>
+            </div>
+            <select
+              value={updateSettings.checkInterval}
+              onChange={(e) => setUpdateSettings((prev) => ({ ...prev, checkInterval: Number(e.target.value) }))}
+              className={classNames(
+                'px-3 py-2 rounded-lg text-sm',
+                'bg-[#F5F5F5] dark:bg-[#1A1A1A]',
+                'border border-[#E5E5E5] dark:border-[#1A1A1A]',
+                'text-bolt-elements-textPrimary',
+                'hover:bg-[#E5E5E5] dark:hover:bg-[#2A2A2A]',
+                'transition-colors duration-200',
+              )}
+            >
+              <option value="6">6 hours</option>
+              <option value="12">12 hours</option>
+              <option value="24">24 hours</option>
+              <option value="48">48 hours</option>
+            </select>
+          </div>
+        </div>
+      </motion.div>
+
+      {/* Update Status Card */}
+      <motion.div
+        className="p-6 rounded-xl bg-white dark:bg-[#0A0A0A] border border-[#E5E5E5] dark:border-[#1A1A1A]"
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.3, delay: 0.2 }}
+      >
+        <div className="flex items-center justify-between mb-6">
+          <div className="flex items-center gap-3">
+            <div className="i-ph:arrows-clockwise text-purple-500 w-5 h-5" />
+            <h3 className="text-lg font-medium text-bolt-elements-textPrimary">Update Status</h3>
+          </div>
+          <button
+            onClick={() => {
+              setError(null);
+              checkForUpdates();
+            }}
+            className={classNames(
+              'flex items-center gap-2 px-4 py-2 rounded-lg text-sm',
+              'bg-[#F5F5F5] dark:bg-[#1A1A1A]',
+              'hover:bg-purple-500/10 hover:text-purple-500',
+              'dark:hover:bg-purple-500/20 dark:hover:text-purple-500',
+              'text-bolt-elements-textPrimary',
+              'transition-colors duration-200',
+              'disabled:opacity-50 disabled:cursor-not-allowed',
+            )}
+            disabled={isChecking}
+          >
+            {isChecking ? (
+              <div className="flex items-center gap-2">
+                <motion.div
+                  animate={{ rotate: 360 }}
+                  transition={{ duration: 1, repeat: Infinity, ease: 'linear' }}
+                  className="i-ph:arrows-clockwise w-4 h-4"
+                />
+                Checking...
+              </div>
+            ) : (
+              <>
+                <div className="i-ph:arrows-clockwise w-4 h-4" />
+                Check for Updates
+              </>
+            )}
+          </button>
+        </div>
 
-      {/* Show progress information */}
-      {updateProgress && <UpdateProgressDisplay progress={updateProgress} />}
+        {/* Show progress information */}
+        {updateProgress && <UpdateProgressDisplay progress={updateProgress} />}
 
-      {error && <div className="mt-4 p-4 bg-red-100 text-red-700 rounded">{error}</div>}
+        {error && <div className="mt-4 p-4 bg-red-100 text-red-700 rounded">{error}</div>}
+      </motion.div>
 
       {/* Update dialog */}
       <DialogRoot open={showUpdateDialog} onOpenChange={setShowUpdateDialog}>