refactor: new settings page design and new pill component

src/components/settings/view/Settings.tsx

@@ -1,10 +1,10 @@
-import { Settings as SettingsIcon, X } from 'lucide-react';
+import { X } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import ProviderLoginModal from '../../provider-auth/view/ProviderLoginModal';
 import { Button } from '../../../shared/view/ui';
 import ClaudeMcpFormModal from '../view/modals/ClaudeMcpFormModal';
 import CodexMcpFormModal from '../view/modals/CodexMcpFormModal';
-import SettingsMainTabs from '../view/SettingsMainTabs';
+import SettingsSidebar from '../view/SettingsSidebar';
 import AgentsSettingsTab from '../view/tabs/agents-settings/AgentsSettingsTab';
 import AppearanceSettingsTab from '../view/tabs/AppearanceSettingsTab';
 import CredentialsSettingsTab from '../view/tabs/api-settings/CredentialsSettingsTab';
@@ -19,7 +19,6 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'agents' }: Set
   const {
     activeTab,
     setActiveTab,
-    isSaving,
     saveStatus,
     deleteError,
     projectSortOrder,
@@ -64,7 +63,6 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'agents' }: Set
     loginProvider,
     selectedProject,
     handleLoginComplete,
-    saveSettings,
   } = useSettingsController({
     isOpen,
     initialTab,
@@ -85,140 +83,90 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'agents' }: Set
         : false;
 
   return (
-    <div className="modal-backdrop fixed inset-0 z-[9999] flex items-center justify-center bg-background/95 md:p-4">
-      <div className="flex h-full w-full flex-col border border-border bg-background shadow-xl md:h-[90vh] md:max-w-4xl md:rounded-lg">
-        <div className="flex flex-shrink-0 items-center justify-between border-b border-border p-4 md:p-6">
-          <div className="flex items-center gap-3">
-            <SettingsIcon className="h-5 w-5 text-blue-600 md:h-6 md:w-6" />
-            <h2 className="text-lg font-semibold text-foreground md:text-xl">{t('title')}</h2>
-          </div>
-          <Button
-            variant="ghost"
-            size="sm"
-            onClick={onClose}
-            className="touch-manipulation text-muted-foreground hover:text-foreground"
-          >
-            <X className="h-5 w-5" />
-          </Button>
-        </div>
-
-        <div className="flex-1 overflow-y-auto">
-          <SettingsMainTabs activeTab={activeTab} onChange={setActiveTab} />
-
-          <div className="space-y-6 p-4 pb-safe-area-inset-bottom md:space-y-8 md:p-6">
-            {activeTab === 'appearance' && (
-              <AppearanceSettingsTab
-                projectSortOrder={projectSortOrder}
-                onProjectSortOrderChange={setProjectSortOrder}
-                codeEditorSettings={codeEditorSettings}
-                onCodeEditorThemeChange={(value) => updateCodeEditorSetting('theme', value)}
-                onCodeEditorWordWrapChange={(value) => updateCodeEditorSetting('wordWrap', value)}
-                onCodeEditorShowMinimapChange={(value) => updateCodeEditorSetting('showMinimap', value)}
-                onCodeEditorLineNumbersChange={(value) => updateCodeEditorSetting('lineNumbers', value)}
-                onCodeEditorFontSizeChange={(value) => updateCodeEditorSetting('fontSize', value)}
-              />
-            )}
-
-            {activeTab === 'git' && <GitSettingsTab />}
-
-            {activeTab === 'agents' && (
-              <AgentsSettingsTab
-                claudeAuthStatus={claudeAuthStatus}
-                cursorAuthStatus={cursorAuthStatus}
-                codexAuthStatus={codexAuthStatus}
-                geminiAuthStatus={geminiAuthStatus}
-                onClaudeLogin={() => openLoginForProvider('claude')}
-                onCursorLogin={() => openLoginForProvider('cursor')}
-                onCodexLogin={() => openLoginForProvider('codex')}
-                onGeminiLogin={() => openLoginForProvider('gemini')}
-                claudePermissions={claudePermissions}
-                onClaudePermissionsChange={setClaudePermissions}
-                cursorPermissions={cursorPermissions}
-                onCursorPermissionsChange={setCursorPermissions}
-                codexPermissionMode={codexPermissionMode}
-                onCodexPermissionModeChange={setCodexPermissionMode}
-                geminiPermissionMode={geminiPermissionMode}
-                onGeminiPermissionModeChange={setGeminiPermissionMode}
-                mcpServers={mcpServers}
-                cursorMcpServers={cursorMcpServers}
-                codexMcpServers={codexMcpServers}
-                mcpTestResults={mcpTestResults}
-                mcpServerTools={mcpServerTools}
-                mcpToolsLoading={mcpToolsLoading}
-                onOpenMcpForm={openMcpForm}
-                onDeleteMcpServer={handleMcpDelete}
-                onTestMcpServer={handleMcpTest}
-                onDiscoverMcpTools={handleMcpToolsDiscovery}
-                onOpenCodexMcpForm={openCodexMcpForm}
-                onDeleteCodexMcpServer={handleCodexMcpDelete}
-                deleteError={deleteError}
-              />
-            )}
-
-            {activeTab === 'tasks' && (
-              <div className="space-y-6 md:space-y-8">
-                <TasksSettingsTab />
-              </div>
-            )}
-
-            {activeTab === 'api' && (
-              <div className="space-y-6 md:space-y-8">
-                <CredentialsSettingsTab />
-              </div>
-            )}
-
-            {activeTab === 'plugins' && (
-              <div className="space-y-6 md:space-y-8">
-                <PluginSettingsTab />
-              </div>
-            )}
-          </div>
-        </div>
-
-        <div className="flex flex-shrink-0 flex-col gap-3 border-t border-border p-4 pb-safe-area-inset-bottom sm:flex-row sm:items-center sm:justify-between md:p-6">
-          <div className="order-2 flex items-center justify-center gap-2 sm:order-1 sm:justify-start">
+    <div className="modal-backdrop fixed inset-0 z-[9999] flex items-center justify-center bg-background/80 backdrop-blur-sm md:p-4">
+      <div className="flex h-full w-full flex-col overflow-hidden border border-border bg-background shadow-2xl md:h-[90vh] md:max-w-4xl md:rounded-xl">
+        {/* Header */}
+        <div className="flex flex-shrink-0 items-center justify-between border-b border-border px-4 py-3 md:px-5">
+          <h2 className="text-base font-semibold text-foreground">{t('title')}</h2>
+          <div className="flex items-center gap-2">
             {saveStatus === 'success' && (
-              <div className="flex items-center gap-1 text-sm text-green-600 dark:text-green-400">
-                <svg className="h-4 w-4" fill="currentColor" viewBox="0 0 20 20">
-                  <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
-                </svg>
-                {t('saveStatus.success')}
-              </div>
+              <span className="text-xs text-muted-foreground animate-in fade-in">{t('saveStatus.success')}</span>
             )}
-            {saveStatus === 'error' && (
-              <div className="flex items-center gap-1 text-sm text-red-600 dark:text-red-400">
-                <svg className="h-4 w-4" fill="currentColor" viewBox="0 0 20 20">
-                  <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
-                </svg>
-                {t('saveStatus.error')}
-              </div>
-            )}
-          </div>
-          <div className="order-1 flex items-center gap-3 sm:order-2">
             <Button
-              variant="outline"
+              variant="ghost"
+              size="sm"
               onClick={onClose}
-              disabled={isSaving}
-              className="h-10 flex-1 touch-manipulation sm:flex-none"
+              className="h-10 w-10 touch-manipulation p-0 text-muted-foreground hover:text-foreground active:bg-accent/50"
             >
-              {t('footerActions.cancel')}
-            </Button>
-            <Button
-              onClick={saveSettings}
-              disabled={isSaving}
-              className="h-10 flex-1 touch-manipulation bg-blue-600 hover:bg-blue-700 disabled:opacity-50 sm:flex-none"
-            >
-              {isSaving ? (
-                <div className="flex items-center gap-2">
-                  <div className="h-4 w-4 animate-spin rounded-full border-2 border-white border-t-transparent" />
-                  {t('saveStatus.saving')}
-                </div>
-              ) : (
-                t('footerActions.save')
-              )}
+              <X className="h-5 w-5" />
             </Button>
           </div>
         </div>
+
+        {/* Body: sidebar + content */}
+        <div className="flex min-h-0 flex-1 flex-col md:flex-row">
+          <SettingsSidebar activeTab={activeTab} onChange={setActiveTab} />
+
+          {/* Content */}
+          <main className="flex-1 overflow-y-auto">
+            <div key={activeTab} className="settings-content-enter space-y-6 p-4 pb-safe-area-inset-bottom md:space-y-8 md:p-6">
+              {activeTab === 'appearance' && (
+                <AppearanceSettingsTab
+                  projectSortOrder={projectSortOrder}
+                  onProjectSortOrderChange={setProjectSortOrder}
+                  codeEditorSettings={codeEditorSettings}
+                  onCodeEditorThemeChange={(value) => updateCodeEditorSetting('theme', value)}
+                  onCodeEditorWordWrapChange={(value) => updateCodeEditorSetting('wordWrap', value)}
+                  onCodeEditorShowMinimapChange={(value) => updateCodeEditorSetting('showMinimap', value)}
+                  onCodeEditorLineNumbersChange={(value) => updateCodeEditorSetting('lineNumbers', value)}
+                  onCodeEditorFontSizeChange={(value) => updateCodeEditorSetting('fontSize', value)}
+                />
+              )}
+
+              {activeTab === 'git' && <GitSettingsTab />}
+
+              {activeTab === 'agents' && (
+                <AgentsSettingsTab
+                  claudeAuthStatus={claudeAuthStatus}
+                  cursorAuthStatus={cursorAuthStatus}
+                  codexAuthStatus={codexAuthStatus}
+                  geminiAuthStatus={geminiAuthStatus}
+                  onClaudeLogin={() => openLoginForProvider('claude')}
+                  onCursorLogin={() => openLoginForProvider('cursor')}
+                  onCodexLogin={() => openLoginForProvider('codex')}
+                  onGeminiLogin={() => openLoginForProvider('gemini')}
+                  claudePermissions={claudePermissions}
+                  onClaudePermissionsChange={setClaudePermissions}
+                  cursorPermissions={cursorPermissions}
+                  onCursorPermissionsChange={setCursorPermissions}
+                  codexPermissionMode={codexPermissionMode}
+                  onCodexPermissionModeChange={setCodexPermissionMode}
+                  geminiPermissionMode={geminiPermissionMode}
+                  onGeminiPermissionModeChange={setGeminiPermissionMode}
+                  mcpServers={mcpServers}
+                  cursorMcpServers={cursorMcpServers}
+                  codexMcpServers={codexMcpServers}
+                  mcpTestResults={mcpTestResults}
+                  mcpServerTools={mcpServerTools}
+                  mcpToolsLoading={mcpToolsLoading}
+                  onOpenMcpForm={openMcpForm}
+                  onDeleteMcpServer={handleMcpDelete}
+                  onTestMcpServer={handleMcpTest}
+                  onDiscoverMcpTools={handleMcpToolsDiscovery}
+                  onOpenCodexMcpForm={openCodexMcpForm}
+                  onDeleteCodexMcpServer={handleCodexMcpDelete}
+                  deleteError={deleteError}
+                />
+              )}
+
+              {activeTab === 'tasks' && <TasksSettingsTab />}
+
+              {activeTab === 'api' && <CredentialsSettingsTab />}
+
+              {activeTab === 'plugins' && <PluginSettingsTab />}
+            </div>
+          </main>
+        </div>
       </div>
 
       <ProviderLoginModal