feat(ui): tabbed git provider settings with search auto-reveal

packages/ui/src/components/sections/git-identities/GitPage.tsx

@@ -29,6 +29,8 @@ import { cn } from '@/lib/utils';
 import { useI18n } from '@/lib/i18n';
 import { SettingsPageLayout } from '@/components/sections/shared/SettingsPageLayout';
 import { SettingsSection } from '@/components/sections/shared/SettingsSection';
+import { SortableTabsStrip, type SortableTabsStripItem } from '@/components/ui/sortable-tabs-strip';
+import { providerTabForSettingsItem, type GitProviderTabId } from './providerTabs';
 
 const ICON_MAP: Record<string, IconName> = {
   branch: 'git-branch',
@@ -47,7 +49,11 @@ const COLOR_MAP: Record<string, string> = {
   type: 'var(--syntax-type)',
 };
 
-export const GitPage: React.FC = () => {
+export interface GitPageProps {
+  revealItemId?: string | null;
+}
+
+export const GitPage: React.FC<GitPageProps> = (props) => {
   const { t } = useI18n();
   const {
     profiles,
@@ -79,6 +85,44 @@ export const GitPage: React.FC = () => {
   const [deleteDialogProfile, setDeleteDialogProfile] = React.useState<GitIdentityProfile | null>(null);
   const [isDeletePending, setIsDeletePending] = React.useState(false);
 
+  const [activeProviderTab, setActiveProviderTab] = React.useState<GitProviderTabId>('github');
+
+  const providerTabs = React.useMemo<SortableTabsStripItem[]>(() => [
+    {
+      id: 'github',
+      label: t('settings.git.tabs.github'),
+      icon: <Icon name="github-fill" className="h-3.5 w-3.5" />,
+    },
+    {
+      id: 'gitlab',
+      label: t('settings.git.tabs.gitlab'),
+      icon: <Icon name="gitlab" className="h-3.5 w-3.5" />,
+    },
+    {
+      id: 'gitea',
+      label: t('settings.git.tabs.gitea'),
+      icon: <Icon name="gitea" className="h-3.5 w-3.5" />,
+    },
+  ], [t]);
+
+  const revealItemId = props.revealItemId;
+  const lastHandledRevealRef = React.useRef<string | null>(null);
+
+  React.useLayoutEffect(() => {
+    if (revealItemId == null) {
+      lastHandledRevealRef.current = null;
+      return;
+    }
+    if (lastHandledRevealRef.current === revealItemId) {
+      return;
+    }
+    lastHandledRevealRef.current = revealItemId;
+    const tab = providerTabForSettingsItem(revealItemId);
+    if (tab) {
+      setActiveProviderTab(tab);
+    }
+  }, [revealItemId]);
+
   React.useEffect(() => {
     loadProfiles();
     loadGlobalIdentity();
@@ -123,9 +167,26 @@ export const GitPage: React.FC = () => {
         title={t('settings.page.git.title')}
         showSaveStatus
       >
-        <GitHubSettings />
-        <GitLabSettings />
-        <GiteaSettings />
+        <div className="flex h-8 min-w-0">
+          <SortableTabsStrip
+            items={providerTabs}
+            activeId={activeProviderTab}
+            onSelect={(tabId) => setActiveProviderTab(tabId as GitProviderTabId)}
+            layoutMode="fit"
+            variant="active-pill"
+            activePillButtonClassName="h-7"
+          />
+        </div>
+
+        <div role="tabpanel" aria-label={t('settings.git.tabs.github')} hidden={activeProviderTab !== 'github'}>
+          <GitHubSettings />
+        </div>
+        <div role="tabpanel" aria-label={t('settings.git.tabs.gitlab')} hidden={activeProviderTab !== 'gitlab'}>
+          <GitLabSettings />
+        </div>
+        <div role="tabpanel" aria-label={t('settings.git.tabs.gitea')} hidden={activeProviderTab !== 'gitea'}>
+          <GiteaSettings />
+        </div>
 
         <SettingsSection
           title={t('settings.gitIdentities.page.section.title')}

packages/ui/src/components/sections/git-identities/providerTabs.test.ts

@@ -0,0 +1,36 @@
+import { describe, expect, test } from 'bun:test';
+
+import { providerTabForSettingsItem } from './providerTabs';
+
+describe('providerTabForSettingsItem', () => {
+  test('maps GitHub settings ids to the github tab', () => {
+    expect(providerTabForSettingsItem('git.github-account')).toBe('github');
+    expect(providerTabForSettingsItem('git.github-api-base-url')).toBe('github');
+    expect(providerTabForSettingsItem('git.github-detect-urls')).toBe('github');
+  });
+
+  test('maps GitLab settings ids to the gitlab tab', () => {
+    expect(providerTabForSettingsItem('git.gitlab-account')).toBe('gitlab');
+    expect(providerTabForSettingsItem('git.gitlab-api-base-url')).toBe('gitlab');
+    expect(providerTabForSettingsItem('git.gitlab-detect-urls')).toBe('gitlab');
+  });
+
+  test('maps Gitea settings ids to the gitea tab', () => {
+    expect(providerTabForSettingsItem('git.gitea-account')).toBe('gitea');
+    expect(providerTabForSettingsItem('git.gitea-api-base-url')).toBe('gitea');
+    expect(providerTabForSettingsItem('git.gitea-detect-urls')).toBe('gitea');
+  });
+
+  test('returns null for settings ids below the tabs', () => {
+    expect(providerTabForSettingsItem('git.identities')).toBeNull();
+    expect(providerTabForSettingsItem('git.gitmoji')).toBeNull();
+    expect(providerTabForSettingsItem('git.changes-view')).toBeNull();
+    expect(providerTabForSettingsItem('git.gitignored-files')).toBeNull();
+  });
+
+  test('returns null for empty or missing ids', () => {
+    expect(providerTabForSettingsItem(null)).toBeNull();
+    expect(providerTabForSettingsItem(undefined)).toBeNull();
+    expect(providerTabForSettingsItem('')).toBeNull();
+  });
+});

packages/ui/src/components/sections/git-identities/providerTabs.ts

@@ -0,0 +1,9 @@
+export type GitProviderTabId = 'github' | 'gitlab' | 'gitea';
+
+export const providerTabForSettingsItem = (settingsItemId: string | null | undefined): GitProviderTabId | null => {
+  if (!settingsItemId) return null;
+  if (settingsItemId.startsWith('git.github-')) return 'github';
+  if (settingsItemId.startsWith('git.gitlab-')) return 'gitlab';
+  if (settingsItemId.startsWith('git.gitea-')) return 'gitea';
+  return null;
+};

packages/ui/src/components/views/SettingsView.tsx

@@ -667,7 +667,7 @@ export const SettingsView: React.FC<SettingsViewProps> = ({ onClose, forceMobile
       case 'snippets':
         return <SnippetsPage />;
       case 'git':
-        return <GitPage />;
+        return <GitPage revealItemId={pendingSearchItemId} />;
       case 'integrations':
         return (
           <IntegrationsPage
@@ -690,7 +690,7 @@ export const SettingsView: React.FC<SettingsViewProps> = ({ onClose, forceMobile
       default:
         return null;
     }
-  }, [openChamberSectionBySlug, openPage, openThirdPartyProviderSetup, renderUnavailable, runtimeCtx, t]);
+  }, [openChamberSectionBySlug, openPage, openThirdPartyProviderSetup, pendingSearchItemId, renderUnavailable, runtimeCtx, t]);
 
   // Mobile: if opened via deep-link / palette to a non-home page, jump into it once.
   React.useEffect(() => {