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
@@ -20,7 +20,6 @@ import {
|
||||
} from '@/components/ui/select';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
|
||||
import { toast } from '@/components/ui';
|
||||
import { Icon } from "@/components/icon/Icon";
|
||||
import { useDesktopSshStore } from '@/stores/useDesktopSshStore';
|
||||
@@ -41,6 +40,8 @@ import {
|
||||
PROJECT_SETTINGS_CONTROL_WIDTH,
|
||||
ProjectSettingsSubsection,
|
||||
} from '@/components/sections/projects/ProjectSettingsSubsection';
|
||||
import { SETTINGS_SELECT_SIZE } from '@/components/sections/shared/SettingsSection';
|
||||
import { SettingsInfoHint } from '@/components/sections/shared/SettingsInfoHint';
|
||||
import { useI18n } from '@/lib/i18n';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
@@ -228,7 +229,7 @@ export const ProjectActionsSection: React.FC<ProjectActionsSectionProps> = ({ pr
|
||||
return (
|
||||
<ProjectSettingsSubsection
|
||||
title={t('settings.projects.actions.title')}
|
||||
description={t('settings.projects.actions.description')}
|
||||
info={t('settings.projects.actions.description')}
|
||||
settingsItem="projects.actions"
|
||||
headerAction={(
|
||||
<Button type="button" variant="outline" size="xs" className="!font-normal" onClick={handleAddAction}>
|
||||
@@ -387,14 +388,9 @@ export const ProjectActionsSection: React.FC<ProjectActionsSectionProps> = ({ pr
|
||||
placeholder={t('settings.projects.actions.field.overrideUrlPlaceholder')}
|
||||
className="h-7 w-full max-w-[24rem]"
|
||||
/>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Icon name="information" className="h-3.5 w-3.5 shrink-0 text-muted-foreground/60 cursor-help" />
|
||||
</TooltipTrigger>
|
||||
<TooltipContent sideOffset={8} className="max-w-xs">
|
||||
{t('settings.projects.actions.field.overrideUrlTooltip')}
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
<SettingsInfoHint contentClassName="max-w-xs">
|
||||
{t('settings.projects.actions.field.overrideUrlTooltip')}
|
||||
</SettingsInfoHint>
|
||||
</div>
|
||||
|
||||
{isDesktopShellApp ? (
|
||||
@@ -414,7 +410,7 @@ export const ProjectActionsSection: React.FC<ProjectActionsSectionProps> = ({ pr
|
||||
}));
|
||||
}}
|
||||
>
|
||||
<SelectTrigger className="h-7 w-full">
|
||||
<SelectTrigger size={SETTINGS_SELECT_SIZE} className="w-full">
|
||||
<SelectValue placeholder={t('settings.projects.actions.field.useOutputManualUrl')} />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
|
||||
@@ -64,25 +64,26 @@ export const ProjectIdentityFields: React.FC<ProjectIdentityFieldsProps> = ({ fo
|
||||
<ProjectSettingsSubsection
|
||||
title={t('settings.projects.page.field.projectName')}
|
||||
settingsItem="projects.name"
|
||||
divider={false}
|
||||
>
|
||||
<Input
|
||||
value={name}
|
||||
onChange={(event) => setName(event.target.value)}
|
||||
placeholder={t('settings.projects.page.field.projectNamePlaceholder')}
|
||||
className={cn('h-7', PROJECT_SETTINGS_CONTROL_WIDTH)}
|
||||
className={cn('h-8 rounded-md px-3', PROJECT_SETTINGS_CONTROL_WIDTH)}
|
||||
/>
|
||||
</ProjectSettingsSubsection>
|
||||
|
||||
<ProjectSettingsSubsection
|
||||
title={t('settings.projects.page.field.defaultModel')}
|
||||
description={t('settings.projects.page.field.defaultModelDescription')}
|
||||
info={t('settings.projects.page.field.defaultModelDescription')}
|
||||
settingsItem="projects.default-model"
|
||||
>
|
||||
<ModelSelector
|
||||
providerId={parsedDefaultModel.providerId}
|
||||
modelId={parsedDefaultModel.modelId}
|
||||
onChange={handleDefaultModelChange}
|
||||
className={PROJECT_SETTINGS_CONTROL_WIDTH}
|
||||
className={cn('h-8 min-h-8 rounded-md px-3 max-w-48', PROJECT_SETTINGS_CONTROL_WIDTH)}
|
||||
/>
|
||||
</ProjectSettingsSubsection>
|
||||
|
||||
@@ -125,6 +126,7 @@ export const ProjectIdentityFields: React.FC<ProjectIdentityFieldsProps> = ({ fo
|
||||
<ProjectSettingsSubsection
|
||||
title={t('settings.projects.page.field.projectIcon')}
|
||||
settingsItem="projects.icon"
|
||||
contentClassName="space-y-3"
|
||||
>
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
@@ -176,7 +178,7 @@ export const ProjectIdentityFields: React.FC<ProjectIdentityFieldsProps> = ({ fo
|
||||
})}
|
||||
</div>
|
||||
{effectiveHasImageIcon && showImagePreview && (
|
||||
<div className="flex items-center gap-2 pt-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="typography-meta text-muted-foreground">{t('settings.projects.page.field.preview')}</span>
|
||||
<span className="inline-flex h-7 w-7 items-center justify-center rounded-md border border-border/60 bg-[var(--surface-elevated)] p-1">
|
||||
<span
|
||||
|
||||
@@ -8,7 +8,6 @@ import {
|
||||
} from '@/components/sections/projects/useProjectIdentityForm';
|
||||
import { useProjectIdentityAutoSave } from '@/components/sections/projects/useProjectIdentityAutoSave';
|
||||
import type { ProjectEntry } from '@/lib/api/types';
|
||||
import { useI18n } from '@/lib/i18n';
|
||||
|
||||
type ProjectSettingsPanelProps = {
|
||||
project: ProjectEntry | null;
|
||||
@@ -19,7 +18,6 @@ export const ProjectSettingsPanel: React.FC<ProjectSettingsPanelProps> = ({
|
||||
project,
|
||||
onIdentitySave,
|
||||
}) => {
|
||||
const { t } = useI18n();
|
||||
const form = useProjectIdentityForm(project);
|
||||
|
||||
const projectRef = React.useMemo(() => {
|
||||
@@ -39,19 +37,8 @@ export const ProjectSettingsPanel: React.FC<ProjectSettingsPanelProps> = ({
|
||||
return null;
|
||||
}
|
||||
|
||||
const headerLabel = project.label ?? t('settings.projects.page.title.default');
|
||||
|
||||
return (
|
||||
<div className="space-y-0">
|
||||
<div className="mb-5 px-1">
|
||||
<h2 className="typography-ui-header font-semibold text-foreground truncate">
|
||||
{headerLabel}
|
||||
</h2>
|
||||
<p className="typography-meta text-muted-foreground truncate" title={project.path}>
|
||||
{project.path}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<ProjectIdentityFields form={form} />
|
||||
<ProjectActionsSection projectRef={projectRef} />
|
||||
<WorktreeSectionContent projectRef={projectRef} />
|
||||
|
||||
@@ -1,47 +1,48 @@
|
||||
import React from 'react';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { SettingsSection } from '@/components/sections/shared/SettingsSection';
|
||||
|
||||
export const PROJECT_SETTINGS_CONTROL_WIDTH = 'w-full max-w-[30rem]';
|
||||
export { PROJECT_SETTINGS_CONTROL_WIDTH } from './projectSettingsConstants';
|
||||
|
||||
type ProjectSettingsSubsectionProps = {
|
||||
title: string;
|
||||
description?: string;
|
||||
/** Helper text hidden behind an info icon next to the title. */
|
||||
info?: React.ReactNode;
|
||||
settingsItem?: string;
|
||||
titleAccessory?: React.ReactNode;
|
||||
headerAction?: React.ReactNode;
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
contentClassName?: string;
|
||||
/** Use false for the first subsection under a page header. @default true */
|
||||
divider?: boolean;
|
||||
};
|
||||
|
||||
export const ProjectSettingsSubsection: React.FC<ProjectSettingsSubsectionProps> = ({
|
||||
title,
|
||||
description,
|
||||
info,
|
||||
settingsItem,
|
||||
titleAccessory,
|
||||
headerAction,
|
||||
children,
|
||||
className,
|
||||
contentClassName,
|
||||
divider = true,
|
||||
}) => {
|
||||
return (
|
||||
<section
|
||||
data-settings-item={settingsItem}
|
||||
className={cn('border-b border-border/50 py-5 first:pt-0 last:border-b-0', className)}
|
||||
<SettingsSection
|
||||
title={title}
|
||||
description={description}
|
||||
info={info}
|
||||
settingsItem={settingsItem}
|
||||
titleAccessory={titleAccessory}
|
||||
headerAction={headerAction}
|
||||
divider={divider}
|
||||
className={className}
|
||||
contentClassName={contentClassName}
|
||||
>
|
||||
<div className="mb-3 flex items-start justify-between gap-3 px-1">
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<h3 className="typography-ui-header font-medium text-foreground">{title}</h3>
|
||||
{titleAccessory}
|
||||
</div>
|
||||
{description ? (
|
||||
<p className="mt-0.5 typography-meta text-muted-foreground">{description}</p>
|
||||
) : null}
|
||||
</div>
|
||||
{headerAction ? <div className="shrink-0">{headerAction}</div> : null}
|
||||
</div>
|
||||
<div className={cn('space-y-2 px-2', contentClassName)}>{children}</div>
|
||||
</section>
|
||||
{children}
|
||||
</SettingsSection>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import React from 'react';
|
||||
import { ScrollableOverlay } from '@/components/ui/ScrollableOverlay';
|
||||
import { SettingsPageLayout } from '@/components/sections/shared/SettingsPageLayout';
|
||||
import { useProjectsStore } from '@/stores/useProjectsStore';
|
||||
import { useUIStore } from '@/stores/useUIStore';
|
||||
import { ProjectSettingsPanel } from '@/components/sections/projects/ProjectSettingsPanel';
|
||||
@@ -42,19 +42,22 @@ export const ProjectsPage: React.FC = () => {
|
||||
|
||||
if (!selectedProject) {
|
||||
return (
|
||||
<ScrollableOverlay outerClassName="h-full" className="w-full">
|
||||
<div className="mx-auto w-full max-w-4xl p-3 sm:p-6 sm:pt-8">
|
||||
<p className="typography-meta text-muted-foreground">{t('settings.projects.page.empty.noProjects')}</p>
|
||||
</div>
|
||||
</ScrollableOverlay>
|
||||
<SettingsPageLayout title={t('settings.page.projects.title')} showSaveStatus>
|
||||
<p className="typography-meta text-muted-foreground">{t('settings.projects.page.empty.noProjects')}</p>
|
||||
</SettingsPageLayout>
|
||||
);
|
||||
}
|
||||
|
||||
const headerLabel = selectedProject.label ?? t('settings.projects.page.title.default');
|
||||
|
||||
return (
|
||||
<ScrollableOverlay outerClassName="h-full" className="w-full bg-background">
|
||||
<div className="mx-auto w-full max-w-4xl p-3 sm:p-6 sm:pt-8">
|
||||
<ProjectSettingsPanel project={selectedProject} onIdentitySave={handleIdentitySave} />
|
||||
</div>
|
||||
</ScrollableOverlay>
|
||||
<SettingsPageLayout
|
||||
title={headerLabel}
|
||||
description={selectedProject.path}
|
||||
showSaveStatus
|
||||
outerClassName="bg-background"
|
||||
>
|
||||
<ProjectSettingsPanel project={selectedProject} onIdentitySave={handleIdentitySave} />
|
||||
</SettingsPageLayout>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -11,6 +11,7 @@ import { isVSCodeRuntime } from '@/lib/desktop';
|
||||
import { sessionEvents } from '@/lib/sessionEvents';
|
||||
import { useThemeSystem } from '@/contexts/useThemeSystem';
|
||||
import { useI18n } from '@/lib/i18n';
|
||||
import { SETTINGS_PANEL_TITLE_CLASS } from '@/components/sections/shared/SettingsSection';
|
||||
|
||||
export const ProjectsSidebar: React.FC<{ onItemSelect?: () => void }> = ({ onItemSelect }) => {
|
||||
const { t } = useI18n();
|
||||
@@ -43,7 +44,7 @@ export const ProjectsSidebar: React.FC<{ onItemSelect?: () => void }> = ({ onIte
|
||||
variant="background"
|
||||
header={
|
||||
<div className={cn('border-b px-3', 'pt-4 pb-3')}>
|
||||
<h2 className="text-base font-semibold text-foreground mb-3">{t('settings.page.projects.title')}</h2>
|
||||
<h2 className={`${SETTINGS_PANEL_TITLE_CLASS} mb-3`}>{t('settings.page.projects.title')}</h2>
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<span className="typography-meta text-muted-foreground">{t('settings.projects.sidebar.total', { count: projects.length })}</span>
|
||||
{!isVSCode && (
|
||||
|
||||
@@ -0,0 +1,4 @@
|
||||
import { SETTINGS_CONTROL_CLUSTER_CLASS } from '@/components/sections/shared/SettingsSection';
|
||||
|
||||
// Keep project controls on the shared settings control width.
|
||||
export const PROJECT_SETTINGS_CONTROL_WIDTH = SETTINGS_CONTROL_CLUSTER_CLASS;
|
||||
Reference in New Issue
Block a user