Standardize Settings layout and save feedback (#2122)
* Group settings navigation menu Co-authored-by: Serhii Dziupin <makeittech@users.noreply.github.com> * Revert "Group settings navigation menu" This reverts commit 5983a4e82074b8dab1084af1cadd803ba28ea65d. * Standardize settings layout feedback Co-authored-by: Serhii Dziupin <makeittech@users.noreply.github.com> * Fix settings save status timer typing Co-authored-by: Serhii Dziupin <makeittech@users.noreply.github.com> * Retain settings save status Co-authored-by: Serhii Dziupin <makeittech@users.noreply.github.com> * Report color mode save state Co-authored-by: Serhii Dziupin <makeittech@users.noreply.github.com> * Match Appearance settings to two-column layout Rebuild Appearance into Color mode & Theme, Localization, and Density & type sections with responsive two-column grids, consistent section headers, page description, and green save status. Co-authored-by: Serhii Dziupin <makeittech@users.noreply.github.com> * Migrate settings pages to SettingsPageLayout and SettingsSection Replace ScrollableOverlay/max-w-3xl shells with the shared settings layout primitives across entity and static settings pages, normalize section headers, and add settings.page.behavior.description locales. Co-authored-by: Serhii Dziupin <makeittech@users.noreply.github.com> * Unify remaining settings pages on shared section chrome Wire Appearance, Projects, and Remote Instances through SettingsSection/SettingsPageLayout so every settings surface shares the same header, divider, and page shell treatment. Co-authored-by: Serhii Dziupin <makeittech@users.noreply.github.com> * Align settings UI with OpenChamber design system kit Apply kit geometry and control specs: 840px content width, 32/48 padding, fixed 260/280 sidebars, radius/spacing tokens, settings select height, stepper dimensions, and shared field/link typography. Co-authored-by: Serhii Dziupin <makeittech@users.noreply.github.com> * Migrate OpenChamberVisualSettings to shared settings primitives Replace ad-hoc radio/checkbox/chip/field layouts with SettingsSection shared chrome for Appearance, Density, Navigation, Chat/behavior, and Privacy while preserving handlers and data-settings-item anchors. Co-authored-by: Serhii Dziupin <makeittech@users.noreply.github.com> * Migrate settings pages to shared field/checkbox/radio primitives Unify Defaults, Notifications, Behavior, Git, Session Retention, Passkeys, OpenCode CLI, Commands, About, Keyboard Shortcuts, and Desktop Network on SettingsFieldRow / SettingsCheckboxRow / SettingsRadioGroup / SettingsChipGroup for consistent grid, spacing, and DRY layout. Also remove the GitPage double SettingsSection wrap around GitHubSettings. Co-authored-by: Serhii Dziupin <makeittech@users.noreply.github.com> * Unify remaining settings pages onto shared field primitives Migrate Agents, Snippets, Skills, Usage, MCP identity rows and selects to SettingsFieldRow/CheckboxRow/ChipGroup and SETTINGS_SELECT_*; align page titles; light-touch Voice/Tunnel/Providers/Plugins without rewriting complex OAuth, permissions, or tunnel flows. Co-authored-by: Serhii Dziupin <makeittech@users.noreply.github.com> * Polish settings section dividers and transport helper text Slightly stronger section borders for clearer group separation, and keep message-stream transport description under the chip control. Co-authored-by: Serhii Dziupin <makeittech@users.noreply.github.com> * Fix settings grid alignment, control heights, and Chat section titles Co-authored-by: Serhii Dziupin <makeittech@users.noreply.github.com> * Tighten settings grid: flat Chat 2x2 and full-width stacked selects Message options use a flat two-column grid so row headers share a baseline. Stacked selects fill their column; field-row selects keep a fixed sm:w-56 width. Co-authored-by: Serhii Dziupin <makeittech@users.noreply.github.com> * Align mixed settings controls to shared FieldRow/CheckboxRow grid Separate FieldRows from CheckboxRows with SettingsInset, move enum radios into ControlGroups, and convert misplaced StackedFields to full-width FieldRows so left edges no longer clash. Co-authored-by: Serhii Dziupin <makeittech@users.noreply.github.com> * Translate Behavior response-style preset labels for es and pl Co-authored-by: Serhii Dziupin <makeittech@users.noreply.github.com> * Group settings nav into categories and improve icons/order Co-authored-by: Serhii Dziupin <makeittech@users.noreply.github.com> * Fix settings layout: fewer hrs, shared control widths, chat transport section Remove SettingsInset top borders, align App install/Density controls to full cluster width, give Message Stream Transport its own Chat section, and fold Sessions Small Model into the first section to cut extra dividers. Co-authored-by: Serhii Dziupin <makeittech@users.noreply.github.com> * Align Voice and MCP settings labels with shared heading classes Swap form field labels to SETTINGS_FIELD_LABEL_CLASS and use SettingsGroupTitle for MCP control-group headings (manual auth fallback, request headers). Co-authored-by: Serhii Dziupin <makeittech@users.noreply.github.com> * Differentiate settings heading levels by context Page titles are larger and quieter than section titles; group and field labels use dedicated shared classes so hierarchy is consistent across settings surfaces without ad-hoc typography mixes. Co-authored-by: Serhii Dziupin <makeittech@users.noreply.github.com> * Use shared settings title classes in SettingsView home Wire home and unavailable headings through the shared L1/L2 class constants so they stay aligned with SettingsPageLayout. Co-authored-by: Serhii Dziupin <makeittech@users.noreply.github.com> * Keep settings number steppers from stretching +/- buttons Density & type NumberInputs no longer flex-grow across the row, and NumberInput locks minus/plus to fixed width so the plus side cannot inflate when the control is placed in a full-width cluster. Co-authored-by: Serhii Dziupin <makeittech@users.noreply.github.com> * Place spacing and input-bar offset on their own row Density & type now lays out as font families, then font sizes, then Spacing Density / Input Bar Offset on the row below. Co-authored-by: Serhii Dziupin <makeittech@users.noreply.github.com> * Regroup settings nav and improve Voice layout Drop Advanced/Usage/Git nav categories: Voice and About under Interface, Usage under OpenCode, Git under Workspace. Voice provider chips and STT model cards use shared settings primitives with roomier spacing and a two-column model grid. Co-authored-by: Serhii Dziupin <makeittech@users.noreply.github.com> * Space out chat feature groups in visual settings * Polish settings: save-state wiring, container-query layouts, unified dropdown triggers - Wire shared save indicator into Behavior page saves and git identity CRUD - Convert settings layout primitives and page rows from viewport to container queries so narrow panes stack instead of clipping - Unify custom dropdown triggers (model/agent/provider pickers) and remaining page selects on the settings control size - Bump global radius scale by 1px; align variant input with select size - Migrate stray raw controls (MCP OAuth checkbox, worktree remove button, git identity dialog rows, skills dialog labels) onto shared primitives - Make settings nav items span full sidebar width; trim nav to 240px * Add General settings page, regroup nav, cap control widths, promote chat feature headers * Mobile settings nav: plain background and touch-sized rows * Hide secondary settings descriptions behind clickable info hints * Move quota credentials to Usage, navigation settings to General, rename External Tunnel * Quiet settings save indicator: silent success, delayed spinner, visible errors * Rewrite settings-ui-patterns skill around shared primitives and refactored conventions * Remove settings starter page; open last visited page, defaulting to General * Settings polish: spacing, control sizes, trigger widths, readable model names, device dates * Centralize dropdown trigger chrome, settings nav polish, mobile-only input bar offset * Fix global line-height regression, auto-hide first-section divider, shortcut row spacing * Global line-height 1.45, align scheduled tasks header button with select * Hide editor toolbar and About in VS Code, animate chat render preview outside desktop dialog * Rebuild agent tool permissions on source-of-truth model Edit the agent's own permission map verbatim (inherit vs explicit actions, pattern rules only for pattern-capable keys), save permission-only, drop the server-side non-wildcard re-merge that resurrected deleted rules, and surface session-granted rules as read-only. * Agents model parameters polish: row spacing, variant dropdown, unified widths, dash for unset numbers --------- Co-authored-by: Serhii Dziupin <makeittech@users.noreply.github.com> Co-authored-by: Bohdan Triapitsyn <artmore@protonmail.com>
This commit is contained in:
Serhii Dziupin
committed by
GitHub
GitHub
co-authored by
Serhii Dziupin
Bohdan Triapitsyn
Serhii Dziupin
Bohdan Triapitsyn
parent
1b402fcb67
commit
17f1b24709
@@ -37,6 +37,10 @@ import { GitPage } from '@/components/sections/git-identities/GitPage';
|
||||
import type { OpenChamberSection } from '@/components/sections/openchamber/types';
|
||||
import { OpenChamberPage } from '@/components/sections/openchamber/OpenChamberPage';
|
||||
import { AboutSettings } from '@/components/sections/openchamber/AboutSettings';
|
||||
import { SettingsPageLayout } from '@/components/sections/shared/SettingsPageLayout';
|
||||
import {
|
||||
SETTINGS_SECTION_TITLE_CLASS,
|
||||
} from '@/components/sections/shared/SettingsSection';
|
||||
import { useDeviceInfo } from '@/lib/device';
|
||||
import { isDesktopLocalOriginActive, isDesktopShell, isVSCodeRuntime, isWebRuntime } from '@/lib/desktop';
|
||||
import { useI18n } from '@/lib/i18n';
|
||||
@@ -54,16 +58,11 @@ import {
|
||||
} from '@/lib/settings/metadata';
|
||||
import { buildSettingsSearchResults, type SettingsSearchResult } from '@/lib/settings/search';
|
||||
|
||||
// Same constraints as main sidebar
|
||||
const SETTINGS_NAV_MIN_WIDTH = 176;
|
||||
const SETTINGS_NAV_MAX_WIDTH = 280;
|
||||
const SETTINGS_NAV_RESIZE_STEP = 8;
|
||||
// UI Kit: fixed settings navigation width
|
||||
const SETTINGS_NAV_WIDTH = 256;
|
||||
const SETTINGS_SPLIT_SIDEBAR_WIDTH = 280;
|
||||
const SETTINGS_DETAIL_HISTORY_KEY = '__openchamberSettingsDetail';
|
||||
|
||||
function clampSettingsNavWidth(width: number): number {
|
||||
return Math.min(SETTINGS_NAV_MAX_WIDTH, Math.max(SETTINGS_NAV_MIN_WIDTH, width));
|
||||
}
|
||||
|
||||
type MobileStage = 'nav' | 'page-sidebar' | 'page-content';
|
||||
type SettingsDetailHistoryEntry = {
|
||||
page: SettingsPageSlug;
|
||||
@@ -82,30 +81,37 @@ interface SettingsViewProps {
|
||||
}
|
||||
|
||||
const pageOrder: SettingsPageSlug[] = [
|
||||
// 'general' group — OpenChamber
|
||||
'general',
|
||||
'appearance',
|
||||
'chat',
|
||||
'notifications',
|
||||
'sessions',
|
||||
'shortcuts',
|
||||
'git',
|
||||
'magic-prompts',
|
||||
'snippets',
|
||||
'voice',
|
||||
'usage',
|
||||
'about',
|
||||
// 'projects' group — Workspace
|
||||
'projects',
|
||||
'remote-instances',
|
||||
'tunnel',
|
||||
'git',
|
||||
// 'opencode' group — OpenCode
|
||||
'providers',
|
||||
'agents',
|
||||
'behavior',
|
||||
'commands',
|
||||
'mcp',
|
||||
'plugins',
|
||||
'providers',
|
||||
'usage',
|
||||
// 'content' group — Library
|
||||
'magic-prompts',
|
||||
'snippets',
|
||||
'skills.installed',
|
||||
'skills.catalog',
|
||||
'voice',
|
||||
'tunnel',
|
||||
'about',
|
||||
];
|
||||
|
||||
const NAV_GROUP_ORDER = ['general', 'projects', 'opencode', 'content'] as const;
|
||||
|
||||
const SNIPPETS_SETTINGS_ICON = { icon: 'chat-thread' } as const;
|
||||
const ADD_PROVIDER_SETTINGS_ID = '__add_provider__';
|
||||
|
||||
@@ -167,10 +173,12 @@ function getCurrentHistoryState(): Record<string, unknown> {
|
||||
// eslint-disable-next-line react-refresh/only-export-components
|
||||
export function getSettingsNavIcon(slug: SettingsPageSlug): IconName | null {
|
||||
switch (slug) {
|
||||
case 'general':
|
||||
return 'settings-3';
|
||||
case 'projects':
|
||||
return 'folders';
|
||||
case 'remote-instances':
|
||||
return 'server';
|
||||
return 'computer';
|
||||
case 'appearance':
|
||||
return 'palette';
|
||||
case 'chat':
|
||||
@@ -197,7 +205,7 @@ export function getSettingsNavIcon(slug: SettingsPageSlug): IconName | null {
|
||||
case 'mcp':
|
||||
return null;
|
||||
case 'plugins':
|
||||
return 'code-box';
|
||||
return 'plug-2';
|
||||
|
||||
case 'skills.installed':
|
||||
return 'book-open';
|
||||
@@ -212,7 +220,7 @@ export function getSettingsNavIcon(slug: SettingsPageSlug): IconName | null {
|
||||
case 'voice':
|
||||
return 'mic';
|
||||
case 'tunnel':
|
||||
return 'global';
|
||||
return 'home-office';
|
||||
case 'about':
|
||||
return 'information';
|
||||
case 'home':
|
||||
@@ -222,82 +230,6 @@ export function getSettingsNavIcon(slug: SettingsPageSlug): IconName | null {
|
||||
}
|
||||
}
|
||||
|
||||
const SettingsHome: React.FC<{ onOpen: (slug: SettingsPageSlug) => void }> = ({ onOpen }) => {
|
||||
const { t } = useI18n();
|
||||
return (
|
||||
<div className="h-full overflow-auto">
|
||||
<div className="mx-auto w-full max-w-3xl px-6 py-6 space-y-6">
|
||||
<div className="space-y-1">
|
||||
<h1 className="typography-ui-header font-semibold text-foreground">{t('settings.view.home.title')}</h1>
|
||||
<p className="typography-ui text-muted-foreground">{t('settings.view.home.description')}</p>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-3 sm:grid-cols-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onOpen('providers')}
|
||||
className={cn(
|
||||
'rounded-lg border border-border bg-[var(--surface-elevated)] p-4 text-left',
|
||||
'hover:bg-[var(--interactive-hover)] transition-colors'
|
||||
)}
|
||||
>
|
||||
<div className="typography-ui-label text-foreground">{t('settings.view.home.cards.providers.title')}</div>
|
||||
<div className="typography-micro text-muted-foreground/70">{t('settings.view.home.cards.providers.description')}</div>
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onOpen('agents')}
|
||||
className={cn(
|
||||
'rounded-lg border border-border bg-[var(--surface-elevated)] p-4 text-left',
|
||||
'hover:bg-[var(--interactive-hover)] transition-colors'
|
||||
)}
|
||||
>
|
||||
<div className="typography-ui-label text-foreground">{t('settings.view.home.cards.agents.title')}</div>
|
||||
<div className="typography-micro text-muted-foreground/70">{t('settings.view.home.cards.agents.description')}</div>
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onOpen('skills.catalog')}
|
||||
className={cn(
|
||||
'rounded-lg border border-border bg-[var(--surface-elevated)] p-4 text-left',
|
||||
'hover:bg-[var(--interactive-hover)] transition-colors'
|
||||
)}
|
||||
>
|
||||
<div className="typography-ui-label text-foreground">{t('settings.view.home.cards.skillsCatalog.title')}</div>
|
||||
<div className="typography-micro text-muted-foreground/70">{t('settings.view.home.cards.skillsCatalog.description')}</div>
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onOpen('mcp')}
|
||||
className={cn(
|
||||
'rounded-lg border border-border bg-[var(--surface-elevated)] p-4 text-left',
|
||||
'hover:bg-[var(--interactive-hover)] transition-colors'
|
||||
)}
|
||||
>
|
||||
<div className="typography-ui-label text-foreground">{t('settings.view.home.cards.mcp.title')}</div>
|
||||
<div className="typography-micro text-muted-foreground/70">{t('settings.view.home.cards.mcp.description')}</div>
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onOpen('usage')}
|
||||
className={cn(
|
||||
'rounded-lg border border-border bg-[var(--surface-elevated)] p-4 text-left',
|
||||
'hover:bg-[var(--interactive-hover)] transition-colors'
|
||||
)}
|
||||
>
|
||||
<div className="typography-ui-label text-foreground">{t('settings.view.home.cards.usage.title')}</div>
|
||||
<div className="typography-micro text-muted-foreground/70">{t('settings.view.home.cards.usage.description')}</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const SettingsView: React.FC<SettingsViewProps> = ({ onClose, forceMobile, isWindowed, visiblePageSlugs, initialMobileStage = 'nav' }) => {
|
||||
const { t } = useI18n();
|
||||
const deviceInfo = useDeviceInfo();
|
||||
@@ -311,14 +243,18 @@ export const SettingsView: React.FC<SettingsViewProps> = ({ onClose, forceMobile
|
||||
const [mobileStage, setMobileStage] = React.useState<MobileStage>(initialMobileStage);
|
||||
const autoNavSlugRef = React.useRef<string | null>(null);
|
||||
|
||||
const [navWidth, setNavWidth] = React.useState(216);
|
||||
// No starter page on desktop: 'home' (fresh state) resolves to General.
|
||||
// settingsPage persists in the UI store, so subsequent opens restore the
|
||||
// last visited page. Mobile keeps 'home' — its entry stage is the nav list.
|
||||
React.useEffect(() => {
|
||||
if (!isMobile && settingsSlug === 'home') {
|
||||
setSettingsPage('general');
|
||||
}
|
||||
}, [isMobile, setSettingsPage, settingsSlug]);
|
||||
|
||||
const [settingsSearchQuery, setSettingsSearchQuery] = React.useState('');
|
||||
const [pendingSearchItemId, setPendingSearchItemId] = React.useState<string | null>(null);
|
||||
const [activeSearchResultIndex, setActiveSearchResultIndex] = React.useState(0);
|
||||
const [hasManuallyResized, setHasManuallyResized] = React.useState(false);
|
||||
const [isResizing, setIsResizing] = React.useState(false);
|
||||
const startXRef = React.useRef(0);
|
||||
const startWidthRef = React.useRef(navWidth);
|
||||
const containerRef = React.useRef<HTMLDivElement>(null);
|
||||
const searchResultRefs = React.useRef<(HTMLButtonElement | null)[]>([]);
|
||||
const activeSearchResultIndexRef = React.useRef(0);
|
||||
@@ -362,68 +298,6 @@ export const SettingsView: React.FC<SettingsViewProps> = ({ onClose, forceMobile
|
||||
|
||||
const activeProjectId = useProjectsStore((state) => state.activeProjectId);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (typeof window === 'undefined') return;
|
||||
const handleResize = () => {
|
||||
if (!hasManuallyResized) {
|
||||
const proportionalWidth = clampSettingsNavWidth(Math.floor(window.innerWidth * 0.12));
|
||||
setNavWidth(proportionalWidth);
|
||||
}
|
||||
};
|
||||
window.addEventListener('resize', handleResize);
|
||||
return () => window.removeEventListener('resize', handleResize);
|
||||
}, [hasManuallyResized]);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!isResizing) return;
|
||||
const handlePointerMove = (event: PointerEvent) => {
|
||||
const delta = event.clientX - startXRef.current;
|
||||
const nextWidth = clampSettingsNavWidth(startWidthRef.current + delta);
|
||||
setNavWidth(nextWidth);
|
||||
setHasManuallyResized(true);
|
||||
};
|
||||
const handlePointerUp = () => setIsResizing(false);
|
||||
window.addEventListener('pointermove', handlePointerMove);
|
||||
window.addEventListener('pointerup', handlePointerUp, { once: true });
|
||||
return () => {
|
||||
window.removeEventListener('pointermove', handlePointerMove);
|
||||
window.removeEventListener('pointerup', handlePointerUp);
|
||||
};
|
||||
}, [isResizing]);
|
||||
|
||||
const handlePointerDown = (event: React.PointerEvent) => {
|
||||
setIsResizing(true);
|
||||
startXRef.current = event.clientX;
|
||||
startWidthRef.current = navWidth;
|
||||
event.preventDefault();
|
||||
};
|
||||
|
||||
const handleResizeKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
|
||||
const step = event.shiftKey ? SETTINGS_NAV_RESIZE_STEP * 4 : SETTINGS_NAV_RESIZE_STEP;
|
||||
let nextWidth: number;
|
||||
|
||||
switch (event.key) {
|
||||
case 'ArrowLeft':
|
||||
nextWidth = navWidth - step;
|
||||
break;
|
||||
case 'ArrowRight':
|
||||
nextWidth = navWidth + step;
|
||||
break;
|
||||
case 'Home':
|
||||
nextWidth = SETTINGS_NAV_MIN_WIDTH;
|
||||
break;
|
||||
case 'End':
|
||||
nextWidth = SETTINGS_NAV_MAX_WIDTH;
|
||||
break;
|
||||
default:
|
||||
return;
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
setNavWidth(clampSettingsNavWidth(nextWidth));
|
||||
setHasManuallyResized(true);
|
||||
};
|
||||
|
||||
// Load stores when project changes or when a page becomes active.
|
||||
React.useEffect(() => {
|
||||
if (!isSettingsDialogOpen && !runtimeCtx.isVSCode && !isWindowed) {
|
||||
@@ -476,6 +350,7 @@ export const SettingsView: React.FC<SettingsViewProps> = ({ onClose, forceMobile
|
||||
// Nav is always open (collapsed state removed)
|
||||
|
||||
const openChamberSectionBySlug: Partial<Record<SettingsPageSlug, OpenChamberSection>> = React.useMemo(() => ({
|
||||
general: 'general',
|
||||
appearance: 'visual',
|
||||
chat: 'chat',
|
||||
shortcuts: 'shortcuts',
|
||||
@@ -487,6 +362,8 @@ export const SettingsView: React.FC<SettingsViewProps> = ({ onClose, forceMobile
|
||||
|
||||
const getPageTitle = React.useCallback((slug: SettingsPageSlug): string => {
|
||||
switch (slug) {
|
||||
case 'general':
|
||||
return t('settings.page.general.title');
|
||||
case 'projects':
|
||||
return t('settings.page.projects.title');
|
||||
case 'remote-instances':
|
||||
@@ -739,7 +616,7 @@ export const SettingsView: React.FC<SettingsViewProps> = ({ onClose, forceMobile
|
||||
return (
|
||||
<div className="flex h-full items-center justify-center px-6">
|
||||
<div className="max-w-md text-center">
|
||||
<div className="typography-ui-header font-semibold text-foreground">{t('settings.view.unavailable.title')}</div>
|
||||
<div className={SETTINGS_SECTION_TITLE_CLASS}>{t('settings.view.unavailable.title')}</div>
|
||||
<p className="typography-ui text-muted-foreground mt-1">{t('settings.view.unavailable.description')}</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -780,8 +657,6 @@ export const SettingsView: React.FC<SettingsViewProps> = ({ onClose, forceMobile
|
||||
}
|
||||
|
||||
switch (slug) {
|
||||
case 'home':
|
||||
return <SettingsHome onOpen={openPage} />;
|
||||
case 'projects':
|
||||
return <ProjectsPage />;
|
||||
case 'remote-instances':
|
||||
@@ -805,13 +680,18 @@ export const SettingsView: React.FC<SettingsViewProps> = ({ onClose, forceMobile
|
||||
case 'usage':
|
||||
return <UsagePage />;
|
||||
case 'about':
|
||||
return <div className="h-full overflow-auto px-5 py-6"><AboutSettings /></div>;
|
||||
return (
|
||||
<SettingsPageLayout title={t('settings.page.about.title')} showSaveStatus={false}>
|
||||
<AboutSettings />
|
||||
</SettingsPageLayout>
|
||||
);
|
||||
case 'magic-prompts':
|
||||
return <MagicPromptsPage />;
|
||||
case 'snippets':
|
||||
return <SnippetsPage />;
|
||||
case 'git':
|
||||
return <GitPage />;
|
||||
case 'general':
|
||||
case 'appearance':
|
||||
case 'chat':
|
||||
case 'shortcuts':
|
||||
@@ -822,10 +702,11 @@ export const SettingsView: React.FC<SettingsViewProps> = ({ onClose, forceMobile
|
||||
const section = openChamberSectionBySlug[slug] ?? 'visual';
|
||||
return <OpenChamberPage section={section} />;
|
||||
}
|
||||
case 'home':
|
||||
default:
|
||||
return <SettingsHome onOpen={openPage} />;
|
||||
return null;
|
||||
}
|
||||
}, [openChamberSectionBySlug, openPage, renderUnavailable, runtimeCtx]);
|
||||
}, [openChamberSectionBySlug, renderUnavailable, runtimeCtx, t]);
|
||||
|
||||
// Mobile: if opened via deep-link / palette to a non-home page, jump into it once.
|
||||
React.useEffect(() => {
|
||||
@@ -938,7 +819,7 @@ export const SettingsView: React.FC<SettingsViewProps> = ({ onClose, forceMobile
|
||||
|
||||
return (
|
||||
<div className="flex h-full flex-col overflow-hidden">
|
||||
<div className="px-2 pt-3">
|
||||
<div className="px-4 pt-3">
|
||||
<div className="flex h-10 items-center gap-1.5 rounded-md border border-border bg-background/70 px-2 text-muted-foreground focus-within:ring-2 focus-within:ring-primary/40 sm:h-8">
|
||||
<Icon name="search" className="h-4 w-4 shrink-0" />
|
||||
<input
|
||||
@@ -964,7 +845,7 @@ export const SettingsView: React.FC<SettingsViewProps> = ({ onClose, forceMobile
|
||||
|
||||
{/* Scrollable nav items */}
|
||||
<div className="flex-1 min-h-0 overflow-y-auto overflow-x-hidden">
|
||||
<div className="flex flex-col gap-0.5 pt-4 pb-2 px-2">
|
||||
<div className="flex flex-col gap-0.5 px-4 pt-4 pb-2">
|
||||
{hasSearchQuery ? (
|
||||
settingsSearchResults.length > 0 ? (() => {
|
||||
let resultIndex = 0;
|
||||
@@ -1010,54 +891,83 @@ export const SettingsView: React.FC<SettingsViewProps> = ({ onClose, forceMobile
|
||||
{t('settings.view.search.noResults')}
|
||||
</div>
|
||||
)
|
||||
) : sortedFilteredPages.map((page) => {
|
||||
const selected = settingsSlug === page.slug;
|
||||
const iconName = getSettingsNavIcon(page.slug);
|
||||
if (!iconName && page.slug !== 'mcp') return null;
|
||||
) : (() => {
|
||||
const pagesByGroup = new Map<string, typeof sortedFilteredPages>();
|
||||
for (const page of sortedFilteredPages) {
|
||||
const group = page.group;
|
||||
const existing = pagesByGroup.get(group);
|
||||
if (existing) {
|
||||
existing.push(page);
|
||||
} else {
|
||||
pagesByGroup.set(group, [page]);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Tooltip key={page.slug}>
|
||||
<TooltipTrigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => openPage(page.slug)}
|
||||
aria-current={selected ? 'page' : undefined}
|
||||
className={cn(
|
||||
'flex h-8 items-center gap-2 rounded-md px-2 overflow-hidden',
|
||||
selected
|
||||
? 'bg-interactive-selection text-foreground'
|
||||
: 'text-foreground hover:bg-interactive-hover'
|
||||
)}
|
||||
>
|
||||
{page.slug === 'mcp'
|
||||
? <McpIcon className="h-4 w-4 shrink-0" />
|
||||
: <Icon name={iconName!} className="h-4 w-4 shrink-0" />}
|
||||
<span className="flex items-center gap-1.5 whitespace-nowrap overflow-hidden transition-opacity duration-150 opacity-100">
|
||||
<span className="typography-ui-label font-normal truncate">{getPageTitle(page.slug)}</span>
|
||||
{page.slug === 'tunnel' && (
|
||||
<span className="shrink-0 typography-micro px-1 rounded leading-none pb-px text-[var(--status-warning)] bg-[var(--status-warning)]/10">
|
||||
{t('settings.view.badge.beta')}
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
</button>
|
||||
</TooltipTrigger>
|
||||
</Tooltip>
|
||||
);
|
||||
})}
|
||||
const visibleGroups = NAV_GROUP_ORDER
|
||||
.map((group) => ({ group, pages: pagesByGroup.get(group) ?? [] }))
|
||||
.filter((entry) => entry.pages.length > 0);
|
||||
|
||||
return visibleGroups.map(({ group, pages }, groupIndex) => (
|
||||
<div key={group} className="space-y-0.5">
|
||||
<div
|
||||
className={cn(
|
||||
'px-3 pb-1 typography-micro font-semibold uppercase tracking-wide text-muted-foreground sm:px-2 sm:pb-0.5',
|
||||
groupIndex === 0 ? 'pt-1' : 'pt-4 sm:pt-3',
|
||||
)}
|
||||
>
|
||||
{t(`settings.view.nav.group.${group}`)}
|
||||
</div>
|
||||
{pages.map((page) => {
|
||||
const selected = settingsSlug === page.slug;
|
||||
const iconName = getSettingsNavIcon(page.slug);
|
||||
if (!iconName && page.slug !== 'mcp') return null;
|
||||
|
||||
return (
|
||||
<Tooltip key={page.slug}>
|
||||
<TooltipTrigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => openPage(page.slug)}
|
||||
aria-current={selected ? 'page' : undefined}
|
||||
className={cn(
|
||||
'flex h-11 w-full items-center gap-2.5 rounded-md px-3 overflow-hidden sm:h-8 sm:gap-2 sm:px-2',
|
||||
selected
|
||||
? 'bg-interactive-selection text-foreground'
|
||||
: 'text-foreground hover:bg-interactive-hover'
|
||||
)}
|
||||
>
|
||||
{page.slug === 'mcp'
|
||||
? <McpIcon className="h-[18px] w-[18px] shrink-0 sm:h-4 sm:w-4" />
|
||||
: <Icon name={iconName!} className="h-[18px] w-[18px] shrink-0 sm:h-4 sm:w-4" />}
|
||||
<span className="flex items-center gap-1.5 whitespace-nowrap overflow-hidden transition-opacity duration-150 opacity-100">
|
||||
<span className="typography-ui-label font-normal truncate">{getPageTitle(page.slug)}</span>
|
||||
{page.slug === 'tunnel' && (
|
||||
<span className="shrink-0 typography-micro px-1 rounded leading-none pb-px text-[var(--status-warning)] bg-[var(--status-warning)]/10">
|
||||
{t('settings.view.badge.beta')}
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
</button>
|
||||
</TooltipTrigger>
|
||||
</Tooltip>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
));
|
||||
})()}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="overflow-hidden transition-opacity duration-150 opacity-100">
|
||||
<div className="border-t border-border bg-sidebar px-2 py-1 space-y-0.5">
|
||||
<div className="border-t border-border bg-background px-4 py-1 space-y-0.5 sm:bg-sidebar">
|
||||
{!runtimeCtx.isVSCode && (
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
className={cn(
|
||||
'flex h-7 w-full items-center gap-2 rounded-md px-2 overflow-hidden whitespace-nowrap',
|
||||
'flex h-11 w-full items-center gap-2 rounded-md px-3 overflow-hidden whitespace-nowrap sm:h-7 sm:px-2',
|
||||
'text-sm font-semibold text-sidebar-foreground/90',
|
||||
'hover:text-sidebar-foreground hover:bg-interactive-hover',
|
||||
)}
|
||||
@@ -1082,7 +992,7 @@ export const SettingsView: React.FC<SettingsViewProps> = ({ onClose, forceMobile
|
||||
const renderMobileStage = () => {
|
||||
if (mobileStage === 'nav') {
|
||||
return (
|
||||
<div className={cn('flex-1 min-h-0 overflow-hidden', runtimeCtx.isVSCode ? 'bg-background' : 'bg-sidebar')}>
|
||||
<div className="flex-1 min-h-0 overflow-hidden bg-background">
|
||||
<div className="flex h-full min-h-0 flex-col">
|
||||
<ErrorBoundary>{renderSettingsNav()}</ErrorBoundary>
|
||||
</div>
|
||||
@@ -1105,7 +1015,7 @@ export const SettingsView: React.FC<SettingsViewProps> = ({ onClose, forceMobile
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div className={cn('flex-1 min-h-0 overflow-hidden', runtimeCtx.isVSCode ? 'bg-background' : 'bg-sidebar')}>
|
||||
<div className="flex-1 min-h-0 overflow-hidden bg-background">
|
||||
<ErrorBoundary>
|
||||
{renderPageSidebar(settingsSlug, { onItemSelect: handleMobilePageSidebarItemSelect })}
|
||||
</ErrorBoundary>
|
||||
@@ -1125,13 +1035,13 @@ export const SettingsView: React.FC<SettingsViewProps> = ({ onClose, forceMobile
|
||||
|
||||
const renderDesktopContent = () => {
|
||||
if (!activePageMeta || settingsSlug === 'home') {
|
||||
return <SettingsHome onOpen={openPage} />;
|
||||
return null;
|
||||
}
|
||||
|
||||
if (activePageMeta.kind === 'split') {
|
||||
return (
|
||||
<div className="flex h-full min-h-0 overflow-hidden">
|
||||
<div className={cn('w-[264px] min-w-[264px] border-r', runtimeCtx.isVSCode ? 'bg-background' : 'bg-sidebar')} style={{ borderColor: 'var(--interactive-border)' }}>
|
||||
<div className={cn('border-r', runtimeCtx.isVSCode ? 'bg-background' : 'bg-sidebar')} style={{ width: SETTINGS_SPLIT_SIDEBAR_WIDTH, minWidth: SETTINGS_SPLIT_SIDEBAR_WIDTH, borderColor: 'var(--interactive-border)' }}>
|
||||
<ErrorBoundary>{renderPageSidebar(settingsSlug, {})}</ErrorBoundary>
|
||||
</div>
|
||||
<div className="flex-1 min-h-0 overflow-hidden bg-background">
|
||||
@@ -1242,30 +1152,13 @@ export const SettingsView: React.FC<SettingsViewProps> = ({ onClose, forceMobile
|
||||
: runtimeCtx.isVSCode
|
||||
? 'bg-background'
|
||||
: 'bg-sidebar',
|
||||
isResizing ? '' : 'transition-[width,min-width] duration-200 ease-[cubic-bezier(0.25,0.1,0.25,1)]'
|
||||
)}
|
||||
style={{
|
||||
width: `${navWidth}px`,
|
||||
minWidth: `${navWidth}px`,
|
||||
width: `${SETTINGS_NAV_WIDTH}px`,
|
||||
minWidth: `${SETTINGS_NAV_WIDTH}px`,
|
||||
borderColor: 'var(--interactive-border)',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className={cn(
|
||||
'absolute right-0 top-0 z-20 h-full w-[6px] -mr-[3px] cursor-col-resize',
|
||||
'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--interactive-focus-ring)]',
|
||||
isResizing ? 'bg-primary/30' : 'bg-transparent hover:bg-primary/20'
|
||||
)}
|
||||
tabIndex={0}
|
||||
onPointerDown={handlePointerDown}
|
||||
onKeyDown={handleResizeKeyDown}
|
||||
role="separator"
|
||||
aria-orientation="vertical"
|
||||
aria-valuemin={SETTINGS_NAV_MIN_WIDTH}
|
||||
aria-valuemax={SETTINGS_NAV_MAX_WIDTH}
|
||||
aria-valuenow={navWidth}
|
||||
aria-label={t('settings.view.actions.resizeNavigation')}
|
||||
/>
|
||||
<ErrorBoundary>
|
||||
{renderSettingsNav()}
|
||||
</ErrorBoundary>
|
||||
|
||||
@@ -3,6 +3,7 @@ import { toast } from '@/components/ui';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { copyTextToClipboard } from '@/lib/clipboard';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { dropdownTriggerVariants } from '@/components/ui/dropdown-trigger';
|
||||
import { ProviderLogo } from '@/components/ui/ProviderLogo';
|
||||
import { useAgentGroupsStore, type AgentGroup, type AgentGroupSession } from '@/stores/useAgentGroupsStore';
|
||||
import { useSessionUIStore } from '@/sync/session-ui-store';
|
||||
@@ -179,9 +180,9 @@ export const AgentGroupDetail: React.FC<AgentGroupDetailProps> = ({
|
||||
<div className="flex-1 min-w-0">
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-full justify-between h-10 px-3"
|
||||
<button
|
||||
type="button"
|
||||
className={cn(dropdownTriggerVariants({ size: 'default' }), 'w-full')}
|
||||
>
|
||||
<div className="flex items-center gap-2 min-w-0">
|
||||
{selectedSession && (
|
||||
@@ -203,7 +204,7 @@ export const AgentGroupDetail: React.FC<AgentGroupDetailProps> = ({
|
||||
)}
|
||||
</div>
|
||||
<Icon name="arrow-down-s" className="h-4 w-4 flex-shrink-0 text-muted-foreground" />
|
||||
</Button>
|
||||
</button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="start" className="w-[var(--anchor-width)]">
|
||||
{group.sessions.map((session) => (
|
||||
|
||||
@@ -25,6 +25,7 @@ import {
|
||||
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
|
||||
import { Icon } from "@/components/icon/Icon";
|
||||
import { cn } from '@/lib/utils';
|
||||
import { dropdownTriggerVariants } from '@/components/ui/dropdown-trigger';
|
||||
import { useI18n } from '@/lib/i18n';
|
||||
|
||||
type OperationType = 'merge' | 'rebase';
|
||||
@@ -300,12 +301,15 @@ export const BranchIntegrationSection: React.FC<BranchIntegrationSectionProps> =
|
||||
</p>
|
||||
<DropdownMenu open={branchDropdownOpen} onOpenChange={setBranchDropdownOpen} modal={false}>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="outline" size="lg" className="w-full justify-between">
|
||||
<button
|
||||
type="button"
|
||||
className={cn(dropdownTriggerVariants({ size: 'default' }), 'w-full')}
|
||||
>
|
||||
<span className={cn('truncate', !selectedBranch && 'text-muted-foreground')}>
|
||||
{selectedBranch || t('gitView.branch.selectBranch')}
|
||||
</span>
|
||||
<Icon name="arrow-down-s" className="size-4 opacity-60 shrink-0" />
|
||||
</Button>
|
||||
</button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent
|
||||
align="start"
|
||||
|
||||
@@ -228,7 +228,7 @@ export const HistorySection: React.FC<HistorySectionProps> = ({
|
||||
>
|
||||
<SelectTrigger
|
||||
size="sm"
|
||||
className="data-[size=sm]:h-auto h-7 min-h-7 w-auto justify-between px-2 py-0"
|
||||
className="w-auto"
|
||||
disabled={isLogLoading}
|
||||
>
|
||||
<SelectValue placeholder={t('gitView.history.commitsPlaceholder')} />
|
||||
|
||||
@@ -5,6 +5,7 @@ import {
|
||||
DropdownMenuTrigger,
|
||||
} from '@/components/ui/dropdown-menu';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { dropdownTriggerVariants } from '@/components/ui/dropdown-trigger';
|
||||
import {
|
||||
Command,
|
||||
CommandEmpty,
|
||||
@@ -361,11 +362,14 @@ export const IntegrateCommitsSection: React.FC<{
|
||||
|
||||
<DropdownMenu open={branchDropdownOpen} onOpenChange={setBranchDropdownOpen}>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="outline" size="sm" className="gap-1.5">
|
||||
<button
|
||||
type="button"
|
||||
className={dropdownTriggerVariants({ size: 'default' })}
|
||||
>
|
||||
{t('gitView.integrate.target')}
|
||||
<span className="max-w-[160px] truncate font-mono text-xs text-muted-foreground">{targetBranch}</span>
|
||||
<Icon name="arrow-down-s" className="size-4 opacity-60" />
|
||||
</Button>
|
||||
</button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent
|
||||
align="end"
|
||||
|
||||
@@ -1697,7 +1697,7 @@ export const PullRequestSection: React.FC<{
|
||||
onValueChange={(value) => setMergeMethod(value as MergeMethod)}
|
||||
disabled={isMerging || pr.state !== 'open'}
|
||||
>
|
||||
<SelectTrigger size="lg" className="h-7 w-auto min-w-0">
|
||||
<SelectTrigger size="sm" className="w-auto min-w-0">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
@@ -1761,7 +1761,7 @@ export const PullRequestSection: React.FC<{
|
||||
<div className="typography-micro text-muted-foreground">{t('gitView.pr.field.baseBranch')}</div>
|
||||
{availableBaseBranches.length > 0 ? (
|
||||
<Select value={targetBaseBranch} onValueChange={setTargetBaseBranch}>
|
||||
<SelectTrigger className="h-9">
|
||||
<SelectTrigger size="lg">
|
||||
<SelectValue placeholder={t('gitView.pr.placeholder.selectBaseBranch')} />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
|
||||
Reference in New Issue
Block a user