BuzzbeeSCD/openchamber
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Standardize Settings layout and save feedback (#2122)

Browse Source 
* 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
2026-07-18 00:11:05 +03:00
committed by GitHub
co-authored by Serhii Dziupin Bohdan Triapitsyn
parent 1b402fcb67
commit 17f1b24709
103 changed files with 6406 additions and 6110 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/styles/design-system.css
+31 -8
View File
@@ -24,6 +24,7 @@
--text-ui-label: 0.8750rem;
--text-meta: 0.875rem;
--text-micro: 0.875rem;
--text-settings-page-title: 1.125rem;
/* Default Light Theme */
--background: oklch(0.97 0.02 85); /* Warm sand background */
@@ -45,7 +46,7 @@
--border: oklch(0.85 0.02 70); /* Warm border */
--input: oklch(0.88 0.02 75); /* Input background */
--ring: oklch(0.65 0.2 55); /* Focus ring color */
--radius: 0.625rem;
--radius: 0.5625rem;
--chart-1: oklch(0.58 0.15 230); /* Blue */
--chart-2: oklch(0.58 0.15 145); /* Oasis green */
--chart-3: oklch(0.65 0.2 55); /* Orange */
@@ -189,26 +190,48 @@
display: list-item !important;
}
/* Remove focus rings globally (except inputs/textareas/dropdowns/selects) */
*:focus:not(input):not(textarea):not([data-slot="dropdown-menu-content"]):not([data-slot="dropdown-menu-sub-content"]):not([data-slot="select-content"]) {
/* Remove focus rings globally (except inputs/textareas/dropdowns/selects/explicit accent rings) */
*:focus:not(input):not(textarea):not([data-slot="dropdown-menu-content"]):not([data-slot="dropdown-menu-sub-content"]):not([data-slot="select-content"]):not(.focus-ring-accent):not([data-focus-ring="accent"]) {
outline: none !important;
box-shadow: none !important;
}
*:focus-visible:not(input):not(textarea):not([data-slot="dropdown-menu-content"]):not([data-slot="dropdown-menu-sub-content"]):not([data-slot="select-content"]) {
*:focus-visible:not(input):not(textarea):not([data-slot="dropdown-menu-content"]):not([data-slot="dropdown-menu-sub-content"]):not([data-slot="select-content"]):not(.focus-ring-accent):not([data-focus-ring="accent"]) {
outline: none !important;
box-shadow: none !important;
}
.focus-ring-accent:focus-visible,
[data-focus-ring="accent"]:focus-visible {
outline: 2px solid var(--primary-base) !important;
outline-offset: 2px !important;
box-shadow: none !important;
}
}
@theme inline {
--radius-none: 0;
--radius-sm: 0.25rem;
--radius-md: 0.5rem;
--radius-lg: 0.625rem;
--radius-xl: 0.75rem;
--radius-sm: 0.25rem; /* 4px */
--radius-md: 0.4375rem; /* 7px */
--radius-lg: 0.5625rem; /* 9px */
--radius-xl: 0.75rem; /* 12px */
--radius-full: 9999px;
/* Semantic spacing aliases (4/8px grid) */
--space-1: var(--spacing-1); /* 4px */
--space-2: var(--spacing-2); /* 8px */
--space-3: var(--spacing-3); /* 12px */
--space-4: var(--spacing-4); /* 16px */
--space-6: var(--spacing-6); /* 24px */
--space-8: var(--spacing-8); /* 32px */
/* Elevation / stacking */
--z-base: 0;
--z-raised: 10;
--z-overlay: 40;
--z-modal: 50;
--transition-fast: 150ms ease-in-out;
/* Override Tailwind spacing scale with custom properties that respect --padding-scale */
--spacing-0: 0;
--spacing-0\.5: calc(0.125rem * var(--padding-scale, 1));
packages/ui/src/styles/mobile.css
+2
View File
@@ -48,6 +48,7 @@
--text-ui-label: 0.875rem;
--text-meta: 0.875rem;
--text-micro: 0.8125rem;
--text-settings-page-title: 1.125rem;
}
/* Force override with higher specificity */
@@ -58,6 +59,7 @@
--text-ui-label: 0.875rem !important;
--text-meta: 0.875rem !important;
--text-micro: 0.8125rem !important;
--text-settings-page-title: 1.125rem !important;
}
/* Additional override for elements using typography classes */
packages/ui/src/styles/typography.css
+56
View File
@@ -10,18 +10,74 @@
.typography-ui-header {
font-size: var(--text-ui-header);
line-height: 1.45;
}
.typography-ui-label {
font-size: var(--text-ui-label);
line-height: 1.45;
}
.typography-meta {
font-size: var(--text-meta);
line-height: 1.45;
}
.typography-micro {
font-size: var(--text-micro);
line-height: 1.45;
}
/*
* Settings heading scale (by context):
* L1 page title → typography-settings-page-title (+ text-muted-foreground)
* L2 section → typography-settings-section-title (+ text-foreground)
* L3 group → typography-settings-group-title (+ text-foreground)
* L4 field label → typography-settings-field-label (+ text-foreground)
* typography-settings-title remains as L2 alias for older call sites.
*/
.typography-settings-page-title {
font-size: var(--text-settings-page-title);
font-weight: 600;
line-height: 1.25;
letter-spacing: -0.01em;
}
.typography-settings-section-title,
.typography-settings-title {
font-size: var(--text-ui-header);
font-weight: 600;
line-height: 1.2;
}
.typography-settings-group-title {
font-size: var(--text-ui-label);
font-weight: 500;
line-height: 1.2;
}
.typography-settings-field-label {
font-size: var(--text-ui-label);
font-weight: 400;
line-height: 1.2;
}
.typography-settings-description {
font-size: var(--text-meta);
font-weight: 400;
line-height: 1.5;
}
.typography-settings-link {
font-size: 0.8125rem; /* 13px */
font-weight: 500;
line-height: 1.2;
color: var(--primary-base);
transition: color var(--transition-fast, 150ms ease-in-out);
}
.typography-settings-link:hover {
text-decoration: underline;
}
.chat-column {