style: update ui to accept proxy separately

src/components/proxy-settings-dialog.tsx

@@ -30,6 +30,8 @@ interface ProxySettings {
   proxy_type: string;
   host: string;
   port: number;
+  username?: string;
+  password?: string;
 }
 
 interface ProxySettingsDialogProps {
@@ -52,6 +54,8 @@ export function ProxySettingsDialog({
     proxy_type: initialSettings?.proxy_type ?? "http",
     host: initialSettings?.host ?? "",
     port: initialSettings?.port ?? 8080,
+    username: initialSettings?.username ?? "",
+    password: initialSettings?.password ?? "",
   });
 
   const [initialSettingsState, setInitialSettingsState] =
@@ -60,6 +64,8 @@ export function ProxySettingsDialog({
       proxy_type: "http",
       host: "",
       port: 8080,
+      username: "",
+      password: "",
     });
 
   useEffect(() => {
@@ -69,6 +75,8 @@ export function ProxySettingsDialog({
         proxy_type: initialSettings.proxy_type,
         host: initialSettings.host,
         port: initialSettings.port,
+        username: initialSettings.username ?? "",
+        password: initialSettings.password ?? "",
       };
       setSettings(newSettings);
       setInitialSettingsState(newSettings);
@@ -78,6 +86,8 @@ export function ProxySettingsDialog({
         proxy_type: "http",
         host: "",
         port: 80,
+        username: "",
+        password: "",
       };
       setSettings(defaultSettings);
       setInitialSettingsState(defaultSettings);
@@ -94,7 +104,9 @@ export function ProxySettingsDialog({
       settings.enabled !== initialSettingsState.enabled ||
       settings.proxy_type !== initialSettingsState.proxy_type ||
       settings.host !== initialSettingsState.host ||
-      settings.port !== initialSettingsState.port
+      settings.port !== initialSettingsState.port ||
+      settings.username !== initialSettingsState.username ||
+      settings.password !== initialSettingsState.password
     );
   };
 
@@ -214,6 +226,31 @@ export function ProxySettingsDialog({
                   max="65535"
                 />
               </div>
+
+              <div className="grid gap-2">
+                <Label htmlFor="username">Username (optional)</Label>
+                <Input
+                  id="username"
+                  value={settings.username}
+                  onChange={(e) => {
+                    setSettings({ ...settings, username: e.target.value });
+                  }}
+                  placeholder="Proxy username"
+                />
+              </div>
+
+              <div className="grid gap-2">
+                <Label htmlFor="password">Password (optional)</Label>
+                <Input
+                  id="password"
+                  type="password"
+                  value={settings.password}
+                  onChange={(e) => {
+                    setSettings({ ...settings, password: e.target.value });
+                  }}
+                  placeholder="Proxy password"
+                />
+              </div>
             </>
           )}
         </div>

src/types.ts

@@ -3,6 +3,8 @@ export interface ProxySettings {
   proxy_type: string; // "http", "https", "socks4", or "socks5"
   host: string;
   port: number;
+  username?: string;
+  password?: string;
 }
 
 export interface TableSortingSettings {