style: format frontend code and improve component structure

src/App.tsx

@@ -179,10 +179,7 @@ function App() {
       <header className="app-header">
         <h1>CC Switch</h1>
         <div className="app-tabs">
-          <AppSwitcher
-            activeApp={activeApp}
-            onSwitch={setActiveApp}
-          />
+          <AppSwitcher activeApp={activeApp} onSwitch={setActiveApp} />
         </div>
         <div className="header-actions">
           <button className="add-btn" onClick={() => setIsAddModalOpen(true)}>

src/components/AppSwitcher.css

@@ -61,6 +61,13 @@
 }
 
 @keyframes pulse {
-  0%, 100% { transform: scale(1); opacity: 1; }
-  50% { transform: scale(1.2); opacity: 0.8; }
+  0%,
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  50% {
+    transform: scale(1.2);
+    opacity: 0.8;
+  }
 }

src/components/ProviderForm.tsx

@@ -74,7 +74,7 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
   const [disableCoAuthored, setDisableCoAuthored] = useState(false);
   // -1 表示自定义，null 表示未选择，>= 0 表示预设索引
   const [selectedPreset, setSelectedPreset] = useState<number | null>(
-    showPresets ? -1 : null
+    showPresets ? -1 : null,
   );
   const [apiKey, setApiKey] = useState("");
 
@@ -409,12 +409,18 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
                   })}
                 </div>
                 {selectedPreset === -1 && (
-                  <small className="field-hint" style={{ marginTop: "8px", display: "block" }}>
+                  <small
+                    className="field-hint"
+                    style={{ marginTop: "8px", display: "block" }}
+                  >
                     手动配置供应商，需要填写完整的配置信息
                   </small>
                 )}
                 {selectedPreset !== -1 && selectedPreset !== null && (
-                  <small className="field-hint" style={{ marginTop: "8px", display: "block" }}>
+                  <small
+                    className="field-hint"
+                    style={{ marginTop: "8px", display: "block" }}
+                  >
                     {isOfficialPreset
                       ? "Claude 官方登录，不需要填写 API Key"
                       : "使用预设配置，只需填写 API Key"}
@@ -450,12 +456,18 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
                   ))}
                 </div>
                 {selectedCodexPreset === -1 && (
-                  <small className="field-hint" style={{ marginTop: "8px", display: "block" }}>
+                  <small
+                    className="field-hint"
+                    style={{ marginTop: "8px", display: "block" }}
+                  >
                     手动配置供应商，需要填写完整的配置信息
                   </small>
                 )}
                 {selectedCodexPreset !== -1 && selectedCodexPreset !== null && (
-                  <small className="field-hint" style={{ marginTop: "8px", display: "block" }}>
+                  <small
+                    className="field-hint"
+                    style={{ marginTop: "8px", display: "block" }}
+                  >
                     {isCodexOfficialPreset
                       ? "Codex 官方登录，不需要填写 API Key"
                       : "使用预设配置，只需填写 API Key"}
@@ -525,7 +537,9 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
                   }
                   disabled={isCodexOfficialPreset}
                   required={
-                    selectedCodexPreset !== null && selectedCodexPreset >= 0 && !isCodexOfficialPreset
+                    selectedCodexPreset !== null &&
+                    selectedCodexPreset >= 0 &&
+                    !isCodexOfficialPreset
                   }
                   autoComplete="off"
                   style={