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
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
@@ -47,6 +47,10 @@ export const settingsDict = {
"settings.view.search.aria": "Buscar configurações",
"settings.view.search.clear": "Limpar busca de configurações",
"settings.view.search.noResults": "Nenhuma configuração encontrada",
"settings.view.nav.group.general": "OpenChamber",
"settings.view.nav.group.projects": "Espaço de trabalho",
"settings.view.nav.group.opencode": "OpenCode",
"settings.view.nav.group.content": "Biblioteca",
"settings.page.projects.title": "Projetos",
"settings.page.remoteInstances.title": "Instâncias remotas",
"settings.page.providers.title": "Provedores",
@@ -59,13 +63,22 @@ export const settingsDict = {
"settings.page.skillsCatalog.title": "Catálogo de habilidades",
"settings.page.git.title": "Git",
"settings.page.appearance.title": "Aparência",
"settings.page.appearance.description": "Personalize a aparência e a sensação do OpenChamber.",
"settings.page.chat.title": "Chat",
"settings.page.chat.description": "Configure como as mensagens e as ferramentas são exibidas.",
"settings.page.shortcuts.title": "Atalhos",
"settings.page.shortcuts.description": "Personalize os atalhos de teclado.",
"settings.page.general.title": "Geral",
"settings.page.general.description": "Inicialização do aplicativo, segurança, conexão e privacidade.",
"settings.page.sessions.title": "Sessões",
"settings.page.sessions.description": "Defina padrões e retenção das sessões.",
"settings.page.magicPrompts.title": "Prompts mágicos",
"settings.page.notifications.title": "Notificações",
"settings.page.notifications.description": "Escolha quando e como receber notificações.",
"settings.page.voice.title": "Voz",
"settings.page.tunnel.title": "Túnel remoto",
"settings.page.voice.description": "Configure fala e ditado.",
"settings.page.tunnel.title": "Túnel externo",
"settings.page.tunnel.description": "Exponha esta instância por um túnel remoto.",
"settings.page.about.title": "Sobre",
"settings.page.snippets.title": "Snippets",
"settings.snippets.sidebar.title": "Snippets",
@@ -90,7 +103,7 @@ export const settingsDict = {
"settings.snippets.page.toast.contentRequired": "O conteúdo do snippet é obrigatório",
"settings.snippets.page.toast.saveFailed": "Falha ao salvar snippet",
"settings.snippets.page.toast.saved": "Snippet salvo",
"settings.openchamber.tunnel.title": "Túnel remoto",
"settings.openchamber.tunnel.title": "Túnel externo",
"settings.openchamber.tunnel.description": "Configure acesso remoto seguro com links rápidos ou com seu próprio túnel gerenciado da Cloudflare.",
"settings.openchamber.tunnel.note.serverSideEnforced": "O acesso seguro ao túnel é aplicado no servidor.",
"settings.openchamber.tunnel.note.connectLinksOneTime": "Os links de conexão são de uso único: eles são revogados quando o túnel para ou quando o TTL do link expira.",
@@ -366,6 +379,7 @@ export const settingsDict = {
"settings.remoteInstances.page.logsDialog.selectedInstanceFallback": "Instância selecionada",
"settings.remoteInstances.page.patternDialog.descriptionWithHost": "{host} exige um destino concreto.",
"settings.remoteInstances.page.patternDialog.description": "Digite destino.",
"settings.common.infoAria": "Mais informações",
"settings.common.actions.cancel": "Cancelar",
"settings.common.actions.create": "Criar",
"settings.common.actions.delete": "Excluir",
@@ -376,6 +390,8 @@ export const settingsDict = {
"settings.common.actions.copyAll": "Copiar tudo",
"settings.common.actions.clear": "Limpar",
"settings.common.actions.saving": "Salvando...",
'settings.common.status.saved': 'Salvo',
'settings.common.status.saveFailed': 'Falha ao salvar',
"settings.common.actions.saveChanges": "Salvar alterações",
"settings.common.scope.global": "Global",
"settings.common.scope.project": "Projeto",
@@ -460,6 +476,33 @@ export const settingsDict = {
"settings.agents.page.section.identityRole": "Identidade e função",
"settings.agents.page.section.modelParameters": "Modelo e parâmetros",
"settings.agents.page.section.systemPrompt": "Prompt do sistema",
"settings.agents.page.permissionsEditor.sectionInfo": "Edita as regras de permissão do próprio agente exatamente como estão salvas na config. “Herdar” deixa a chave sem definição — valem a config global e os padrões.",
"settings.agents.page.permissionsEditor.defaultLabel": "Padrão para todas as ferramentas",
"settings.agents.page.permissionsEditor.defaultAria": "Permissão padrão para todas as ferramentas",
"settings.agents.page.permissionsEditor.defaultInfo": "O fallback no nível do agente (a chave *). Vale para ferramentas sem regra própria.",
"settings.agents.page.permissionsEditor.effectiveHint": "→ {action}",
"settings.agents.page.permissionsEditor.ruleCount": "{count} regras",
"settings.agents.page.permissionsEditor.keyAria": "Permissão para {key}",
"settings.agents.page.permissionsEditor.patternPlaceholder": "Padrão, ex.: rm -rf * ou /path/**",
"settings.agents.page.permissionsEditor.patternActionAria": "Ação para o padrão de {key}",
"settings.agents.page.permissionsEditor.customKeyPlaceholder": "Chave de permissão personalizada…",
"settings.agents.page.permissionsEditor.sessionRulesTitle": "Concedidas na sessão (não salvas)",
"settings.agents.page.permissionsEditor.sessionRulesInfo": "Regras concedidas em sessões ao vivo (respostas “sempre permitir”). Valem agora, mas não fazem parte da config salva e somem ao reiniciar.",
"settings.agents.page.permissionsEditor.action.default": "Padrão",
"settings.agents.page.permissionsEditor.action.inherit": "Herdar",
"settings.agents.page.permissionsEditor.action.allow": "Permitir",
"settings.agents.page.permissionsEditor.action.ask": "Perguntar",
"settings.agents.page.permissionsEditor.action.deny": "Negar",
"settings.agents.page.permissionsEditor.actions.save": "Salvar permissões",
"settings.agents.page.permissionsEditor.actions.discard": "Descartar",
"settings.agents.page.permissionsEditor.actions.addRule": "Adicionar regra",
"settings.agents.page.permissionsEditor.actions.addKey": "Adicionar chave",
"settings.agents.page.permissionsEditor.actions.removeRuleAria": "Remover regra",
"settings.agents.page.permissionsEditor.actions.retry": "Tentar novamente",
"settings.agents.page.permissionsEditor.state.loadFailed": "Não foi possível carregar a config de permissões do agente.",
"settings.agents.page.permissionsEditor.toast.saved": "Permissões salvas",
"settings.agents.page.permissionsEditor.toast.savedRestartRequired": "Permissões salvas — reinicie o servidor OpenCode para aplicar",
"settings.agents.page.permissionsEditor.toast.saveFailed": "Falha ao salvar as permissões",
"settings.agents.page.section.toolPermissions": "Permissões de ferramentas",
"settings.agents.page.field.agentName": "Nome do agente",
"settings.agents.page.field.agentNamePlaceholder": "nome-agente",
@@ -495,6 +538,7 @@ export const settingsDict = {
"settings.agents.page.permissions.permissionPlaceholder": "Permissão...",
"settings.agents.page.permissions.patternPlaceholder": "Padrão (ex.: *)",
"settings.page.behavior.title": "Comportamento",
"settings.page.behavior.description": "Oriente como o agente responde.",
"settings.behavior.page.title": "Comportamento",
"settings.behavior.page.warning.title": "Regras globais são combinadas com regras do projeto",
"settings.behavior.page.warning.description": "As alterações feitas aqui atualizam {path}. O OpenCode também inclui qualquer AGENTS.md a nível de projeto quando existir.",
@@ -880,6 +924,8 @@ export const settingsDict = {
"settings.openchamber.desktopNetwork.field.allowLanAccessDescription": "Reinicia o aplicativo para que os telefones, tablets e outros computadores em seu Wi-Fi possam abri-lo.",
"settings.openchamber.desktopNetwork.field.warning": "Aviso: enquanto estiver habilitado, o aplicativo ficará acessível a qualquer pessoa na mesma rede local.",
"settings.openchamber.desktopNetwork.field.passwordRequiredWarning": "O acesso LAN exige uma senha da UI do desktop. Até configurar uma, o app de desktop inicia apenas localmente.",
"settings.openchamber.desktopPassword.actions.showPassword": "Mostrar senha",
"settings.openchamber.desktopPassword.actions.hidePassword": "Ocultar senha",
"settings.openchamber.desktopPassword.field.password": "Senha da UI do desktop",
"settings.openchamber.desktopPassword.field.passwordPlaceholder": "Nenhuma senha obrigatória",
"settings.openchamber.desktopPassword.field.passwordDescription": "O OpenChamber pede após reiniciar e depois quando a sessão expira: em 12 horas, ou 7 dias com Confiar neste dispositivo. Deixe vazio para desativar o login.",
@@ -1585,6 +1631,7 @@ export const settingsDict = {
"settings.voice.page.section.playbackAndSummary": "Reprodução",
"settings.voice.page.field.provider": "Provedor",
"settings.voice.page.provider.browser": "Navegador",
"settings.voice.page.provider.openai": "OpenAI",
"settings.voice.page.provider.custom": "Personalizado",
"settings.voice.page.provider.say": "Falar",
"settings.voice.page.provider.server": "Servidor",
@@ -1664,18 +1711,24 @@ export const settingsDict = {
"settings.voice.page.field.ttsInputModeRaw": "Markdown bruto",
"settings.voice.page.field.ttsInputModeSummarized": "resumido",
"settings.openchamber.visual.section.colorMode": "Modo de cor",
"settings.openchamber.visual.section.colorModeAndTheme": "Modo de cor e tema",
"settings.openchamber.visual.section.mobileLayout": "Layout móvel",
"settings.openchamber.visual.option.mobileLayout.default": "Anterior",
"settings.openchamber.visual.option.mobileLayout.new": "Novo",
"settings.openchamber.visual.section.localization": "Localização",
"settings.openchamber.visual.section.spacingAndLayout": "Espaçamento e layout",
"settings.openchamber.visual.section.densityAndType": "Densidade e tipografia",
"settings.openchamber.visual.section.appInstall": "Instalação do app",
"settings.openchamber.visual.section.navigation": "Navegação",
"settings.openchamber.visual.section.chatRenderMode": "Modo de renderizado de chat",
"settings.openchamber.visual.section.chatRenderModeAria": "Modo de renderizado de chat",
"settings.openchamber.visual.section.chatDisplay": "Exibição",
"settings.openchamber.visual.section.chatMessageOptions": "Opções de mensagem",
"settings.openchamber.visual.section.chatFeatures": "Recursos",
"settings.openchamber.visual.section.messageStreamTransport": "Transporte do fluxo de mensagens",
"settings.openchamber.visual.section.activityDefault": "Modo padrão de atividade",
"settings.openchamber.visual.section.activityDefaultAria": "Modo padrão de atividade",
"settings.openchamber.visual.section.showToolsOpenedByDefault": "Mostrar ferramentas abertas por padrão:",
"settings.openchamber.visual.section.showToolsOpenedByDefault": "Mostrar ferramentas abertas por padrão",
"settings.openchamber.visual.section.sessionAssistance": "Assistência da sessão",
"settings.openchamber.visual.section.reasoning": "Raciocínio",
"settings.openchamber.visual.section.messageAppearance": "Aparência das mensagens",
@@ -1806,8 +1859,11 @@ export const settingsDict = {
"settings.openchamber.visual.field.sendAnonymousUsageReports": "Enviar relatórios anônimos de uso",
"settings.openchamber.visual.field.sendAnonymousUsageReportsHint": "Ajuda-nos a entender quais versões do aplicativo são usadas ativamente para priorizar melhorias. Coletamos apenas a versão do aplicativo, a plataforma e o ambiente de execução; não coletamos dados pessoais nem código.",
"settings.openchamber.visual.option.themeMode.system": "Sistema",
"settings.openchamber.visual.option.themeMode.system.description": "Seguir configuração do sistema",
"settings.openchamber.visual.option.themeMode.light": "Claro",
"settings.openchamber.visual.option.themeMode.light.description": "Sempre usar aparência clara",
"settings.openchamber.visual.option.themeMode.dark": "Escuro",
"settings.openchamber.visual.option.themeMode.dark.description": "Sempre usar aparência escura",
"settings.openchamber.visual.option.diffLayout.dynamic.label": "Dinâmico",
"settings.openchamber.visual.option.diffLayout.dynamic.description": "Novo em linha, modificado lado a lado.",
"settings.openchamber.visual.option.diffLayout.inline.label": "Sempre em linha",