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
@@ -2,6 +2,7 @@ import type { SidebarSection } from '@/constants/sidebar';
|
||||
|
||||
export type SettingsPageSlug =
|
||||
| 'home'
|
||||
| 'general'
|
||||
| 'projects'
|
||||
| 'remote-instances'
|
||||
| 'providers'
|
||||
@@ -26,14 +27,10 @@ export type SettingsPageSlug =
|
||||
| 'about';
|
||||
|
||||
type SettingsPageGroup =
|
||||
| 'appearance'
|
||||
| 'projects'
|
||||
| 'general'
|
||||
| 'projects'
|
||||
| 'opencode'
|
||||
| 'git'
|
||||
| 'skills'
|
||||
| 'usage'
|
||||
| 'advanced';
|
||||
| 'content';
|
||||
|
||||
export interface SettingsRuntimeContext {
|
||||
isVSCode: boolean;
|
||||
@@ -61,6 +58,13 @@ export const SETTINGS_PAGE_METADATA: readonly SettingsPageMeta[] = [
|
||||
description: 'Search and jump to common pages.',
|
||||
keywords: ['search', 'settings'],
|
||||
},
|
||||
{
|
||||
slug: 'general',
|
||||
title: 'General',
|
||||
group: 'general',
|
||||
kind: 'single',
|
||||
keywords: ['general', 'startup', 'launch at login', 'autostart', 'tray', 'password', 'passkey', 'security', 'privacy', 'telemetry', 'transport', 'network', 'lan', 'binary', 'cli'],
|
||||
},
|
||||
{
|
||||
slug: 'projects',
|
||||
title: 'Projects',
|
||||
@@ -86,7 +90,7 @@ export const SETTINGS_PAGE_METADATA: readonly SettingsPageMeta[] = [
|
||||
{
|
||||
slug: 'usage',
|
||||
title: 'Usage',
|
||||
group: 'usage',
|
||||
group: 'general',
|
||||
kind: 'split',
|
||||
keywords: ['quota', 'billing', 'tokens', 'usage', 'limits'],
|
||||
},
|
||||
@@ -128,21 +132,21 @@ export const SETTINGS_PAGE_METADATA: readonly SettingsPageMeta[] = [
|
||||
{
|
||||
slug: 'skills.installed',
|
||||
title: 'Skills',
|
||||
group: 'skills',
|
||||
group: 'content',
|
||||
kind: 'split',
|
||||
keywords: ['skill', 'skills', 'instructions', 'install', 'catalog'],
|
||||
},
|
||||
{
|
||||
slug: 'skills.catalog',
|
||||
title: 'Skills Catalog',
|
||||
group: 'skills',
|
||||
group: 'content',
|
||||
kind: 'single',
|
||||
keywords: ['install', 'catalog', 'external', 'repository', 'skills catalog'],
|
||||
},
|
||||
{
|
||||
slug: 'git',
|
||||
title: 'Git',
|
||||
group: 'git',
|
||||
group: 'projects',
|
||||
kind: 'single',
|
||||
keywords: ['git', 'github', 'identity', 'identities', 'ssh', 'profiles', 'credentials', 'keys', 'commit', 'gitmoji', 'oauth', 'prs', 'issues'],
|
||||
isAvailable: (ctx) => !ctx.isVSCode,
|
||||
@@ -150,7 +154,7 @@ export const SETTINGS_PAGE_METADATA: readonly SettingsPageMeta[] = [
|
||||
{
|
||||
slug: 'appearance',
|
||||
title: 'Appearance',
|
||||
group: 'appearance',
|
||||
group: 'general',
|
||||
kind: 'single',
|
||||
keywords: ['theme', 'font', 'spacing', 'padding', 'corner radius', 'radius', 'input bar', 'keyboard', 'viewport', 'mobile', 'terminal', 'pwa', 'install name', 'app shortcuts'],
|
||||
},
|
||||
@@ -179,7 +183,7 @@ export const SETTINGS_PAGE_METADATA: readonly SettingsPageMeta[] = [
|
||||
{
|
||||
slug: 'magic-prompts',
|
||||
title: 'Magic Prompts',
|
||||
group: 'general',
|
||||
group: 'content',
|
||||
kind: 'split',
|
||||
keywords: ['prompts', 'templates', 'git', 'github', 'review', 'commit', 'pull request'],
|
||||
isAvailable: (ctx) => !ctx.isVSCode,
|
||||
@@ -187,15 +191,15 @@ export const SETTINGS_PAGE_METADATA: readonly SettingsPageMeta[] = [
|
||||
{
|
||||
slug: 'snippets',
|
||||
title: 'Snippets',
|
||||
group: 'general',
|
||||
group: 'content',
|
||||
kind: 'split',
|
||||
keywords: ['prompt', 'templates', 'multi-run', 'strategy', 'approach'],
|
||||
},
|
||||
|
||||
{ slug: 'notifications', title: 'Notifications', group: 'general', kind: 'single', keywords: ['alerts', 'native', 'summary', 'summarization'], },
|
||||
{ slug: 'voice', title: 'Voice', group: 'advanced', kind: 'single', keywords: ['tts', 'speech', 'voice'], isAvailable: (ctx) => !ctx.isVSCode },
|
||||
{ slug: 'tunnel', title: 'Remote Tunnel', group: 'advanced', kind: 'single', keywords: ['tunnel', 'cloudflare', 'qr', 'remote', 'mobile', 'share'], isAvailable: (ctx) => !ctx.isVSCode },
|
||||
{ slug: 'about', title: 'About', group: 'advanced', kind: 'single', keywords: ['about', 'version', 'updates', 'release', 'changelog'], isAvailable: (ctx) => ctx.isMobile },
|
||||
{ slug: 'voice', title: 'Voice', group: 'general', kind: 'single', keywords: ['tts', 'speech', 'voice'], isAvailable: (ctx) => !ctx.isVSCode },
|
||||
{ slug: 'tunnel', title: 'External Tunnel', group: 'projects', kind: 'single', keywords: ['tunnel', 'external', 'cloudflare', 'qr', 'remote', 'mobile', 'share'], isAvailable: (ctx) => !ctx.isVSCode },
|
||||
{ slug: 'about', title: 'About', group: 'general', kind: 'single', keywords: ['about', 'version', 'updates', 'release', 'changelog'], isAvailable: (ctx) => ctx.isMobile && !ctx.isVSCode },
|
||||
] as const;
|
||||
|
||||
const LEGACY_SIDEBAR_SECTION_TO_SETTINGS_SLUG: Record<SidebarSection, SettingsPageSlug> = {
|
||||
|
||||
@@ -118,7 +118,7 @@ const SETTINGS_SEARCH_ITEMS: readonly SettingsSearchItem[] = [
|
||||
},
|
||||
{
|
||||
id: 'appearance.terminal-shell',
|
||||
page: 'appearance',
|
||||
page: 'general',
|
||||
titleKey: 'settings.openchamber.visual.field.terminalShell',
|
||||
descriptionKey: 'settings.openchamber.visual.field.terminalShellHint',
|
||||
keywords: ['terminal', 'shell', 'bash', 'zsh', 'fish', 'pwsh', 'powershell'],
|
||||
@@ -142,22 +142,25 @@ const SETTINGS_SEARCH_ITEMS: readonly SettingsSearchItem[] = [
|
||||
titleKey: 'settings.openchamber.visual.field.inputBarOffset',
|
||||
descriptionKey: 'settings.openchamber.visual.field.inputBarOffsetTooltip',
|
||||
keywords: ['input', 'home bar', 'offset'],
|
||||
// Only the mobile composer applies this offset (ChatInput gates on isMobile).
|
||||
isAvailable: (ctx) => ctx.isMobile,
|
||||
},
|
||||
{
|
||||
id: 'appearance.expanded-editor-toolbar',
|
||||
page: 'appearance',
|
||||
page: 'general',
|
||||
titleKey: 'settings.openchamber.visual.field.expandedEditorToolbar',
|
||||
keywords: ['editor', 'toolbar', 'tabs', 'docked', 'files'],
|
||||
isAvailable: (ctx) => !ctx.isVSCode,
|
||||
},
|
||||
{
|
||||
id: 'appearance.file-editor-keymap',
|
||||
page: 'appearance',
|
||||
page: 'general',
|
||||
titleKey: 'settings.openchamber.visual.field.fileEditorKeymap',
|
||||
keywords: ['editor', 'vim', 'keymap'],
|
||||
},
|
||||
{
|
||||
id: 'appearance.terminal-quick-keys',
|
||||
page: 'appearance',
|
||||
page: 'general',
|
||||
titleKey: 'settings.openchamber.visual.field.terminalQuickKeys',
|
||||
descriptionKey: 'settings.openchamber.visual.field.terminalQuickKeysTooltip',
|
||||
keywords: ['terminal', 'keyboard', 'esc', 'ctrl', 'arrows'],
|
||||
@@ -165,7 +168,7 @@ const SETTINGS_SEARCH_ITEMS: readonly SettingsSearchItem[] = [
|
||||
},
|
||||
{
|
||||
id: 'appearance.usage-reports',
|
||||
page: 'appearance',
|
||||
page: 'general',
|
||||
titleKey: 'settings.openchamber.visual.field.sendAnonymousUsageReports',
|
||||
descriptionKey: 'settings.openchamber.visual.field.sendAnonymousUsageReportsHint',
|
||||
keywords: ['telemetry', 'analytics'],
|
||||
@@ -178,7 +181,7 @@ const SETTINGS_SEARCH_ITEMS: readonly SettingsSearchItem[] = [
|
||||
},
|
||||
{
|
||||
id: 'chat.message-transport',
|
||||
page: 'chat',
|
||||
page: 'general',
|
||||
titleKey: 'settings.openchamber.visual.section.messageStreamTransport',
|
||||
keywords: ['streaming', 'sse', 'websocket'],
|
||||
},
|
||||
@@ -379,7 +382,7 @@ const SETTINGS_SEARCH_ITEMS: readonly SettingsSearchItem[] = [
|
||||
},
|
||||
{
|
||||
id: 'sessions.desktop-launch-at-login',
|
||||
page: 'sessions',
|
||||
page: 'general',
|
||||
titleKey: 'settings.openchamber.desktopNetwork.field.launchAtLogin',
|
||||
descriptionKey: 'settings.openchamber.desktopNetwork.field.launchAtLoginDescription',
|
||||
keywords: ['desktop', 'startup', 'login'],
|
||||
@@ -387,7 +390,7 @@ const SETTINGS_SEARCH_ITEMS: readonly SettingsSearchItem[] = [
|
||||
},
|
||||
{
|
||||
id: 'sessions.desktop-window-controls-position',
|
||||
page: 'sessions',
|
||||
page: 'general',
|
||||
titleKey: 'settings.openchamber.desktopNetwork.field.windowControlsPosition',
|
||||
descriptionKey: 'settings.openchamber.desktopNetwork.field.windowControlsPositionDescription',
|
||||
keywords: ['desktop', 'window', 'controls', 'minimize', 'maximize', 'close', 'titlebar', 'linux', 'windows'],
|
||||
@@ -395,7 +398,7 @@ const SETTINGS_SEARCH_ITEMS: readonly SettingsSearchItem[] = [
|
||||
},
|
||||
{
|
||||
id: 'sessions.desktop-minimize-to-tray',
|
||||
page: 'sessions',
|
||||
page: 'general',
|
||||
titleKey: 'settings.openchamber.desktopNetwork.field.minimizeToTray',
|
||||
descriptionKey: 'settings.openchamber.desktopNetwork.field.minimizeToTrayDescription',
|
||||
keywords: ['desktop', 'tray', 'system tray', 'minimize', 'close', 'background', 'windows'],
|
||||
@@ -403,7 +406,7 @@ const SETTINGS_SEARCH_ITEMS: readonly SettingsSearchItem[] = [
|
||||
},
|
||||
{
|
||||
id: 'sessions.desktop-keep-awake',
|
||||
page: 'sessions',
|
||||
page: 'general',
|
||||
titleKey: 'settings.openchamber.desktopNetwork.field.keepAwake',
|
||||
descriptionKey: 'settings.openchamber.desktopNetwork.field.keepAwakeDescription',
|
||||
keywords: ['desktop', 'sleep', 'awake', 'server', 'mobile', 'phone'],
|
||||
@@ -411,7 +414,7 @@ const SETTINGS_SEARCH_ITEMS: readonly SettingsSearchItem[] = [
|
||||
},
|
||||
{
|
||||
id: 'sessions.desktop-ui-password',
|
||||
page: 'sessions',
|
||||
page: 'general',
|
||||
titleKey: 'settings.openchamber.desktopPassword.field.password',
|
||||
descriptionKey: 'settings.openchamber.desktopPassword.field.passwordDescription',
|
||||
keywords: ['desktop', 'password', 'auth', 'login'],
|
||||
@@ -419,7 +422,7 @@ const SETTINGS_SEARCH_ITEMS: readonly SettingsSearchItem[] = [
|
||||
},
|
||||
{
|
||||
id: 'sessions.desktop-lan-access',
|
||||
page: 'sessions',
|
||||
page: 'general',
|
||||
titleKey: 'settings.openchamber.desktopNetwork.field.allowLanAccess',
|
||||
descriptionKey: 'settings.openchamber.desktopNetwork.field.allowLanAccessDescription',
|
||||
keywords: ['desktop', 'lan', 'network', 'phone', 'tablet'],
|
||||
@@ -427,14 +430,14 @@ const SETTINGS_SEARCH_ITEMS: readonly SettingsSearchItem[] = [
|
||||
},
|
||||
{
|
||||
id: 'sessions.opencode-binary',
|
||||
page: 'sessions',
|
||||
page: 'general',
|
||||
titleKey: 'settings.openchamber.opencodeCli.field.binaryPath',
|
||||
keywords: ['opencode', 'cli', 'binary', 'path'],
|
||||
isAvailable: (ctx) => !ctx.isVSCode,
|
||||
},
|
||||
{
|
||||
id: 'sessions.opencode-update-notifications',
|
||||
page: 'sessions',
|
||||
page: 'general',
|
||||
titleKey: 'settings.openchamber.opencodeCli.field.showUpdateNotifications',
|
||||
keywords: ['opencode', 'cli', 'updates'],
|
||||
isAvailable: (ctx) => !ctx.isVSCode,
|
||||
|
||||
Reference in New Issue
Block a user