refactor(web): unify settings dialogs into single dialog with sidebar

Merge API integration, model settings, account settings and storage
analysis into one SettingsDialog with a shadcn inner sidebar for
section switching. Preserve existing ?action= query-param deep links
(showModelSettings / showAccountSettings / showApiIntegrationSettings /
showStorageAnalysis) by mapping each to a section. Extract reusable
panels and keep ModelsDialog as a thin wrapper for the dynamic-form
model picker.

web/src/app/home/components/account-settings-dialog/AccountSettingsDialog.tsx

@@ -1,181 +0,0 @@
-import * as React from 'react';
-import { useState, useEffect } from 'react';
-import { toast } from 'sonner';
-import { useTranslation } from 'react-i18next';
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogDescription,
-} from '@/components/ui/dialog';
-import { Button } from '@/components/ui/button';
-import {
-  Item,
-  ItemMedia,
-  ItemContent,
-  ItemTitle,
-  ItemDescription,
-  ItemActions,
-} from '@/components/ui/item';
-import { httpClient } from '@/app/infra/http/HttpClient';
-import { systemInfo } from '@/app/infra/http';
-import { Loader2, ExternalLink, KeyRound, Layers } from 'lucide-react';
-import PasswordChangeDialog from '../password-change-dialog/PasswordChangeDialog';
-
-interface AccountSettingsDialogProps {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-}
-
-export default function AccountSettingsDialog({
-  open,
-  onOpenChange,
-}: AccountSettingsDialogProps) {
-  const { t } = useTranslation();
-  const [accountType, setAccountType] = useState<'local' | 'space'>('local');
-  const [hasPassword, setHasPassword] = useState(false);
-  const [userEmail, setUserEmail] = useState('');
-  const [loading, setLoading] = useState(true);
-  const [spaceBindLoading, setSpaceBindLoading] = useState(false);
-  const [passwordDialogOpen, setPasswordDialogOpen] = useState(false);
-
-  useEffect(() => {
-    if (open) {
-      loadUserInfo();
-    }
-  }, [open]);
-
-  async function loadUserInfo() {
-    setLoading(true);
-    try {
-      const info = await httpClient.getUserInfo();
-      setAccountType(info.account_type);
-      setHasPassword(info.has_password);
-      setUserEmail(info.user);
-    } catch {
-      toast.error(t('common.error'));
-    } finally {
-      setLoading(false);
-    }
-  }
-
-  const handleBindSpace = async () => {
-    setSpaceBindLoading(true);
-    try {
-      const token = localStorage.getItem('token');
-      if (!token) {
-        toast.error(t('common.error'));
-        setSpaceBindLoading(false);
-        return;
-      }
-      const currentOrigin = window.location.origin;
-      const redirectUri = `${currentOrigin}/auth/space/callback?mode=bind`;
-      // Pass token as state for security verification
-      const response = await httpClient.getSpaceAuthorizeUrl(
-        redirectUri,
-        token,
-      );
-      window.location.href = response.authorize_url;
-    } catch {
-      toast.error(t('common.spaceLoginFailed'));
-      setSpaceBindLoading(false);
-    }
-  };
-
-  const handlePasswordDialogClose = (dialogOpen: boolean) => {
-    setPasswordDialogOpen(dialogOpen);
-    if (!dialogOpen) {
-      // Reload user info to update password status
-      loadUserInfo();
-    }
-  };
-
-  return (
-    <>
-      <Dialog open={open} onOpenChange={onOpenChange}>
-        <DialogContent className="sm:max-w-md">
-          <DialogHeader>
-            <DialogTitle>{t('account.settings')}</DialogTitle>
-            <DialogDescription>{userEmail}</DialogDescription>
-          </DialogHeader>
-
-          {loading ? (
-            <div className="flex justify-center py-8">
-              <Loader2 className="h-6 w-6 animate-spin" />
-            </div>
-          ) : (
-            <div className="space-y-2">
-              {/* Password Item */}
-              <Item size="sm" variant="muted" className="rounded-lg">
-                <ItemMedia variant="icon">
-                  <KeyRound className="h-4 w-4" />
-                </ItemMedia>
-                <ItemContent>
-                  <ItemTitle>{t('account.passwordStatus')}</ItemTitle>
-                  <ItemDescription>
-                    {hasPassword
-                      ? t('account.passwordSetDescription')
-                      : t('account.setPasswordHint')}
-                  </ItemDescription>
-                </ItemContent>
-                <ItemActions>
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    onClick={() => setPasswordDialogOpen(true)}
-                    disabled={!systemInfo.allow_modify_login_info}
-                  >
-                    {hasPassword
-                      ? t('common.changePassword')
-                      : t('account.setPassword')}
-                  </Button>
-                </ItemActions>
-              </Item>
-
-              {/* Space Account Item */}
-              <Item size="sm" variant="muted" className="rounded-lg">
-                <ItemMedia variant="icon">
-                  <Layers className="h-4 w-4" />
-                </ItemMedia>
-                <ItemContent>
-                  <ItemTitle>{t('account.spaceStatus')}</ItemTitle>
-                  <ItemDescription>
-                    {accountType === 'space'
-                      ? t('account.spaceBoundDescription')
-                      : t('account.bindSpaceDescription')}
-                  </ItemDescription>
-                </ItemContent>
-                {accountType === 'local' && (
-                  <ItemActions>
-                    <Button
-                      variant="outline"
-                      size="sm"
-                      onClick={handleBindSpace}
-                      disabled={
-                        spaceBindLoading || !systemInfo.allow_modify_login_info
-                      }
-                    >
-                      {spaceBindLoading ? (
-                        <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                      ) : (
-                        <ExternalLink className="mr-2 h-4 w-4" />
-                      )}
-                      {t('account.bindSpaceButton')}
-                    </Button>
-                  </ItemActions>
-                )}
-              </Item>
-            </div>
-          )}
-        </DialogContent>
-      </Dialog>
-
-      <PasswordChangeDialog
-        open={passwordDialogOpen}
-        onOpenChange={handlePasswordDialogClose}
-        hasPassword={hasPassword}
-      />
-    </>
-  );
-}

web/src/app/home/components/account-settings-dialog/AccountSettingsPanel.tsx

@@ -0,0 +1,170 @@
+import { useState, useEffect } from 'react';
+import { toast } from 'sonner';
+import { useTranslation } from 'react-i18next';
+import { Button } from '@/components/ui/button';
+import {
+  Item,
+  ItemMedia,
+  ItemContent,
+  ItemTitle,
+  ItemDescription,
+  ItemActions,
+} from '@/components/ui/item';
+import { httpClient } from '@/app/infra/http/HttpClient';
+import { systemInfo } from '@/app/infra/http';
+import { Loader2, ExternalLink, KeyRound, Layers } from 'lucide-react';
+import PasswordChangeDialog from '../password-change-dialog/PasswordChangeDialog';
+
+interface AccountSettingsPanelProps {
+  // True when this panel is the active section and the dialog is open.
+  active: boolean;
+  onEmailResolved?: (email: string) => void;
+}
+
+export default function AccountSettingsPanel({
+  active,
+  onEmailResolved,
+}: AccountSettingsPanelProps) {
+  const { t } = useTranslation();
+  const [accountType, setAccountType] = useState<'local' | 'space'>('local');
+  const [hasPassword, setHasPassword] = useState(false);
+  const [userEmail, setUserEmail] = useState('');
+  const [loading, setLoading] = useState(true);
+  const [spaceBindLoading, setSpaceBindLoading] = useState(false);
+  const [passwordDialogOpen, setPasswordDialogOpen] = useState(false);
+
+  useEffect(() => {
+    if (active) {
+      loadUserInfo();
+    }
+  }, [active]);
+
+  async function loadUserInfo() {
+    setLoading(true);
+    try {
+      const info = await httpClient.getUserInfo();
+      setAccountType(info.account_type);
+      setHasPassword(info.has_password);
+      setUserEmail(info.user);
+      onEmailResolved?.(info.user);
+    } catch {
+      toast.error(t('common.error'));
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  const handleBindSpace = async () => {
+    setSpaceBindLoading(true);
+    try {
+      const token = localStorage.getItem('token');
+      if (!token) {
+        toast.error(t('common.error'));
+        setSpaceBindLoading(false);
+        return;
+      }
+      const currentOrigin = window.location.origin;
+      const redirectUri = `${currentOrigin}/auth/space/callback?mode=bind`;
+      // Pass token as state for security verification
+      const response = await httpClient.getSpaceAuthorizeUrl(
+        redirectUri,
+        token,
+      );
+      window.location.href = response.authorize_url;
+    } catch {
+      toast.error(t('common.spaceLoginFailed'));
+      setSpaceBindLoading(false);
+    }
+  };
+
+  const handlePasswordDialogClose = (dialogOpen: boolean) => {
+    setPasswordDialogOpen(dialogOpen);
+    if (!dialogOpen) {
+      // Reload user info to update password status
+      loadUserInfo();
+    }
+  };
+
+  return (
+    <div className="px-6 py-5">
+      {userEmail && (
+        <p className="mb-4 text-sm text-muted-foreground">{userEmail}</p>
+      )}
+
+      {loading ? (
+        <div className="flex justify-center py-8">
+          <Loader2 className="h-6 w-6 animate-spin" />
+        </div>
+      ) : (
+        <div className="space-y-2">
+          {/* Password Item */}
+          <Item size="sm" variant="muted" className="rounded-lg">
+            <ItemMedia variant="icon">
+              <KeyRound className="h-4 w-4" />
+            </ItemMedia>
+            <ItemContent>
+              <ItemTitle>{t('account.passwordStatus')}</ItemTitle>
+              <ItemDescription>
+                {hasPassword
+                  ? t('account.passwordSetDescription')
+                  : t('account.setPasswordHint')}
+              </ItemDescription>
+            </ItemContent>
+            <ItemActions>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => setPasswordDialogOpen(true)}
+                disabled={!systemInfo.allow_modify_login_info}
+              >
+                {hasPassword
+                  ? t('common.changePassword')
+                  : t('account.setPassword')}
+              </Button>
+            </ItemActions>
+          </Item>
+
+          {/* Space Account Item */}
+          <Item size="sm" variant="muted" className="rounded-lg">
+            <ItemMedia variant="icon">
+              <Layers className="h-4 w-4" />
+            </ItemMedia>
+            <ItemContent>
+              <ItemTitle>{t('account.spaceStatus')}</ItemTitle>
+              <ItemDescription>
+                {accountType === 'space'
+                  ? t('account.spaceBoundDescription')
+                  : t('account.bindSpaceDescription')}
+              </ItemDescription>
+            </ItemContent>
+            {accountType === 'local' && (
+              <ItemActions>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={handleBindSpace}
+                  disabled={
+                    spaceBindLoading || !systemInfo.allow_modify_login_info
+                  }
+                >
+                  {spaceBindLoading ? (
+                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                  ) : (
+                    <ExternalLink className="mr-2 h-4 w-4" />
+                  )}
+                  {t('account.bindSpaceButton')}
+                </Button>
+              </ItemActions>
+            )}
+          </Item>
+        </div>
+      )}
+
+      <PasswordChangeDialog
+        open={passwordDialogOpen}
+        onOpenChange={handlePasswordDialogClose}
+        hasPassword={hasPassword}
+      />
+    </div>
+  );
+}