Skip to content

feat(app): redesign non-modal settings #40845

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Hona merged 8 commits into from
Aug 13, 2026
Merged

feat(app): redesign non-modal settings #40845

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
31c72b9
feat(app): redesign non-modal settings
Hona Aug 6, 2026
d832020
refactor(app): trim settings placeholders
Hona Aug 6, 2026
87142c1
fix(app): simplify notifications settings heading
Hona Aug 6, 2026
9ded81b
fix(app): scope redesigned settings by server
Hona Aug 7, 2026
9ecf46b
feat(app): align settings with project scopes
Hona Aug 7, 2026
bd45572
fix(app): align settings with v2 APIs
Hona Aug 7, 2026
7c30a42
fix(app): preserve settings server context
Hona Aug 11, 2026
0b837ae
chore(app): merge v2 into settings redesign
Hona Aug 13, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
refactor(app): trim settings placeholders
  • Loading branch information
@Hona
Hona committed Aug 11, 2026
commit d8320209c9298dcdb1ad54decb0d8370447b85d3
30 changes: 3 additions & 27 deletions packages/app/src/components/settings-v2/appearance.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Component, Show, createMemo, createResource, createSignal } from "solid-js"
import { Component, Show, createMemo, createResource } from "solid-js"
import { ButtonV2 } from "@opencode-ai/ui/v2/button-v2"
import { SelectV2 } from "@opencode-ai/ui/v2/select-v2"
import { Switch } from "@opencode-ai/ui/v2/switch-v2"
Expand All @@ -15,8 +15,6 @@ import {
import "./settings-v2.css"

const schemeOptions: ("system" | "light" | "dark")[] = ["system", "light", "dark"]
const densityOptions: ("compact" | "default" | "comfortable")[] = ["compact", "default", "comfortable"]

const fontSettings = {
ui: {
action: "settings-ui-font",
Expand Down Expand Up @@ -74,7 +72,6 @@ export const SettingsAppearanceV2: Component = () => {
const platform = usePlatform()
const appearance = createAppearanceSettingsController()
const desktop = createMemo(() => platform.platform === "desktop")
const [density, setDensity] = createSignal<"compact" | "default" | "comfortable">("default")

const [pinchZoom, { mutate: setPinchZoom }] = createResource(
() => desktop() && "getPinchZoomEnabled" in platform,
Expand All @@ -94,16 +91,15 @@ export const SettingsAppearanceV2: Component = () => {
appearance.fonts.setUI("")
appearance.fonts.setCode("")
appearance.fonts.setTerminal("")
setDensity("default")
}

return (
<>
<div class="settings-v2-tab-header">
<div class="settings-v2-tab-header-row">
<h2 class="settings-v2-tab-title">{language.t("settings.tab.appearance")}</h2>
<h2 class="settings-v2-tab-title">{language.t("settings.general.section.appearance")}</h2>
<ButtonV2 size="small" variant="ghost-muted" onClick={restoreDefaults}>
{language.t("settings.action.restoreDefaults")}
{language.t("common.reset")}
</ButtonV2>
</div>
</div>
Expand Down Expand Up @@ -155,26 +151,6 @@ export const SettingsAppearanceV2: Component = () => {
/>
</SettingsRowV2>

<SettingsRowV2
title={language.t("settings.appearance.density.title")}
description={language.t("settings.appearance.density.description")}
>
<SelectV2
appearance="inline"
data-action="settings-density"
options={densityOptions}
current={density()}
placement="bottom-end"
gutter={6}
label={(option) => {
if (option === "compact") return language.t("settings.appearance.density.compact")
if (option === "comfortable") return language.t("settings.appearance.density.comfortable")
return language.t("settings.appearance.density.default")
}}
onSelect={(option) => option && setDensity(option)}
/>
</SettingsRowV2>

<FontSetting kind="ui" fonts={appearance.fonts} />
<FontSetting kind="code" fonts={appearance.fonts} />
<FontSetting kind="terminal" fonts={appearance.fonts} />
Expand Down
12 changes: 6 additions & 6 deletions packages/app/src/components/settings-v2/dialog-settings-v2.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,15 +61,15 @@ export const DialogSettings: Component<{
<div class="flex flex-col gap-1 w-full">
<TabsV2.Trigger value="general">
<Icon name="sliders" />
{language.t("settings.tab.general")}
{language.t("settings.tab.preferences")}
</TabsV2.Trigger>
<TabsV2.Trigger value="appearance">
<Icon name="appearance" />
{language.t("settings.tab.appearance")}
{language.t("settings.general.section.appearance")}
</TabsV2.Trigger>
<TabsV2.Trigger value="notifications">
<Icon name="notifications" />
{language.t("settings.tab.notifications")}
{language.t("settings.general.section.notifications")}
</TabsV2.Trigger>
<TabsV2.Trigger value="shortcuts">
<Icon name="keyboard" />
Expand All @@ -81,7 +81,7 @@ export const DialogSettings: Component<{
<div class="flex flex-col gap-1 w-full">
<TabsV2.Trigger value="servers">
<Icon name="server" />
{language.t("settings.tab.servers")}
{language.t("status.popover.tab.servers")}
</TabsV2.Trigger>
<TabsV2.Trigger value="projects">
<Icon name="folder" />
Expand All @@ -93,11 +93,11 @@ export const DialogSettings: Component<{
<div class="flex flex-col gap-1 w-full">
<TabsV2.Trigger value="providers">
<Icon name="providers" />
{language.t("settings.tab.providers")}
{language.t("settings.providers.title")}
</TabsV2.Trigger>
<TabsV2.Trigger value="models">
<Icon name="models" />
{language.t("settings.tab.models")}
{language.t("settings.models.title")}
</TabsV2.Trigger>
<TabsV2.Trigger value="extensions">
<Icon name="extensions" />
Expand Down
6 changes: 3 additions & 3 deletions packages/app/src/components/settings-v2/extensions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,7 +103,7 @@ export const SettingsExtensionsV2: Component = () => {
data-selected={activeSubTab() === "mcps" ? "" : undefined}
onClick={() => setActiveSubTab("mcps")}
>
{language.t("settings.tab.mcps")}
{language.t("status.popover.tab.mcp")}
</button>
<button
type="button"
Expand All @@ -112,7 +112,7 @@ export const SettingsExtensionsV2: Component = () => {
data-selected={activeSubTab() === "plugins" ? "" : undefined}
onClick={() => setActiveSubTab("plugins")}
>
{language.t("settings.tab.plugins")}
{language.t("status.popover.tab.plugins")}
</button>
<button
type="button"
Expand All @@ -121,7 +121,7 @@ export const SettingsExtensionsV2: Component = () => {
data-selected={activeSubTab() === "skills" ? "" : undefined}
onClick={() => setActiveSubTab("skills")}
>
{language.t("settings.tab.skills")}
{language.t("settings.permissions.tool.skill.title")}
</button>
</div>

Expand Down
52 changes: 3 additions & 49 deletions packages/app/src/components/settings-v2/notifications.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Component, createSignal } from "solid-js"
import { Component } from "solid-js"
import { ButtonV2 } from "@opencode-ai/ui/v2/button-v2"
import { SelectV2 } from "@opencode-ai/ui/v2/select-v2"
import { Switch } from "@opencode-ai/ui/v2/switch-v2"
Expand All @@ -13,9 +13,6 @@ import {
} from "./general-controllers"
import "./settings-v2.css"

const badgeOptions: ("count" | "dot" | "none")[] = ["count", "dot", "none"]
const focusOptions: ("auto" | "always" | "never")[] = ["auto", "always", "never"]

const soundSettings = {
agent: {
action: "settings-sounds-agent",
Expand Down Expand Up @@ -62,8 +59,6 @@ export const SettingsNotificationsV2: Component = () => {
const language = useLanguage()
const settings = useSettings()
const sounds = createSoundSettingsController()
const [unreadBadge, setUnreadBadge] = createSignal<"count" | "dot" | "none">("count")
const [focusMode, setFocusMode] = createSignal<"auto" | "always" | "never">("auto")

const restoreDefaults = () => {
settings.notifications.setAgent(true)
Expand All @@ -72,17 +67,15 @@ export const SettingsNotificationsV2: Component = () => {
settings.sounds.setAgent("bip-bop-01")
settings.sounds.setPermissions("alert-01")
settings.sounds.setErrors("nope-01")
setUnreadBadge("count")
setFocusMode("auto")
}

return (
<>
<div class="settings-v2-tab-header">
<div class="settings-v2-tab-header-row">
<h2 class="settings-v2-tab-title">{language.t("settings.tab.notifications")}</h2>
<h2 class="settings-v2-tab-title">{language.t("settings.general.section.notifications")}</h2>
<ButtonV2 size="small" variant="ghost-muted" onClick={restoreDefaults}>
{language.t("settings.action.restoreDefaults")}
{language.t("common.reset")}
</ButtonV2>
</div>
</div>
Expand Down Expand Up @@ -136,45 +129,6 @@ export const SettingsNotificationsV2: Component = () => {
<SoundSetting kind="permissions" channel={sounds.permissions} />
<SoundSetting kind="errors" channel={sounds.errors} />

<SettingsRowV2
title={language.t("settings.notifications.unreadBadge.title")}
description={language.t("settings.notifications.unreadBadge.description")}
>
<SelectV2
appearance="inline"
data-action="settings-unread-badge"
options={badgeOptions}
current={unreadBadge()}
placement="bottom-end"
gutter={6}
label={(option) => {
if (option === "dot") return language.t("settings.notifications.unreadBadge.dot")
if (option === "none") return language.t("settings.notifications.unreadBadge.none")
return language.t("settings.notifications.unreadBadge.count")
}}
onSelect={(option) => option && setUnreadBadge(option)}
/>
</SettingsRowV2>

<SettingsRowV2
title={language.t("settings.notifications.focusMode.title")}
description={language.t("settings.notifications.focusMode.description")}
>
<SelectV2
appearance="inline"
data-action="settings-focus-mode"
options={focusOptions}
current={focusMode()}
placement="bottom-end"
gutter={6}
label={(option) => {
if (option === "always") return language.t("settings.notifications.focusMode.always")
if (option === "never") return language.t("settings.notifications.focusMode.never")
return language.t("settings.notifications.focusMode.auto")
}}
onSelect={(option) => option && setFocusMode(option)}
/>
</SettingsRowV2>
</SettingsListV2>
</div>
</div>
Expand Down
27 changes: 1 addition & 26 deletions packages/app/src/i18n/ar.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1176,35 +1176,10 @@ export const dict = {
"toast.session.export.failed.title": "Failed to export session",
"toast.session.export.failed.description": "An error occurred while exporting the session",
"common.export": "Export",
"settings.tab.appearance": "Appearance",
"settings.tab.notifications": "Notifications",
"settings.tab.providers": "Providers",
"settings.tab.models": "Models",
"settings.tab.servers": "Servers",
"settings.tab.preferences": "Preferences",
"settings.tab.projects": "Projects",
"settings.tab.extensions": "Extensions",
"settings.tab.mcps": "MCPs",
"settings.tab.plugins": "Plugins",
"settings.tab.skills": "Skills",
"settings.server.all": "All servers",
"settings.action.restoreDefaults": "Restore defaults",
"settings.action.resetAll": "Reset all settings",
"settings.action.resetAll.description": "Revert all settings and preferences back to default values",
"settings.appearance.density.title": "Interface density",
"settings.appearance.density.description": "Adjust padding and spacing across the application",
"settings.appearance.density.compact": "Compact",
"settings.appearance.density.default": "Default",
"settings.appearance.density.comfortable": "Comfortable",
"settings.notifications.unreadBadge.title": "Unread badge",
"settings.notifications.unreadBadge.description": "Show unread session indicator badge on the app icon",
"settings.notifications.unreadBadge.count": "Count",
"settings.notifications.unreadBadge.dot": "Dot",
"settings.notifications.unreadBadge.none": "None",
"settings.notifications.focusMode.title": "Focus mode",
"settings.notifications.focusMode.description": "Suppress desktop notifications while presenting or in fullscreen",
"settings.notifications.focusMode.auto": "Auto",
"settings.notifications.focusMode.always": "Always",
"settings.notifications.focusMode.never": "Never",
"settings.projects.title": "Projects",
"settings.projects.description": "View and configure projects on this server",
"settings.projects.empty": "No projects found",
Expand Down
27 changes: 1 addition & 26 deletions packages/app/src/i18n/br.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1186,35 +1186,10 @@ export const dict = {
"toast.session.export.failed.title": "Failed to export session",
"toast.session.export.failed.description": "An error occurred while exporting the session",
"common.export": "Export",
"settings.tab.appearance": "Appearance",
"settings.tab.notifications": "Notifications",
"settings.tab.providers": "Providers",
"settings.tab.models": "Models",
"settings.tab.servers": "Servers",
"settings.tab.preferences": "Preferences",
"settings.tab.projects": "Projects",
"settings.tab.extensions": "Extensions",
"settings.tab.mcps": "MCPs",
"settings.tab.plugins": "Plugins",
"settings.tab.skills": "Skills",
"settings.server.all": "All servers",
"settings.action.restoreDefaults": "Restore defaults",
"settings.action.resetAll": "Reset all settings",
"settings.action.resetAll.description": "Revert all settings and preferences back to default values",
"settings.appearance.density.title": "Interface density",
"settings.appearance.density.description": "Adjust padding and spacing across the application",
"settings.appearance.density.compact": "Compact",
"settings.appearance.density.default": "Default",
"settings.appearance.density.comfortable": "Comfortable",
"settings.notifications.unreadBadge.title": "Unread badge",
"settings.notifications.unreadBadge.description": "Show unread session indicator badge on the app icon",
"settings.notifications.unreadBadge.count": "Count",
"settings.notifications.unreadBadge.dot": "Dot",
"settings.notifications.unreadBadge.none": "None",
"settings.notifications.focusMode.title": "Focus mode",
"settings.notifications.focusMode.description": "Suppress desktop notifications while presenting or in fullscreen",
"settings.notifications.focusMode.auto": "Auto",
"settings.notifications.focusMode.always": "Always",
"settings.notifications.focusMode.never": "Never",
"settings.projects.title": "Projects",
"settings.projects.description": "View and configure projects on this server",
"settings.projects.empty": "No projects found",
Expand Down
27 changes: 1 addition & 26 deletions packages/app/src/i18n/bs.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1262,35 +1262,10 @@ export const dict = {
"toast.session.export.failed.title": "Failed to export session",
"toast.session.export.failed.description": "An error occurred while exporting the session",
"common.export": "Export",
"settings.tab.appearance": "Appearance",
"settings.tab.notifications": "Notifications",
"settings.tab.providers": "Providers",
"settings.tab.models": "Models",
"settings.tab.servers": "Servers",
"settings.tab.preferences": "Preferences",
"settings.tab.projects": "Projects",
"settings.tab.extensions": "Extensions",
"settings.tab.mcps": "MCPs",
"settings.tab.plugins": "Plugins",
"settings.tab.skills": "Skills",
"settings.server.all": "All servers",
"settings.action.restoreDefaults": "Restore defaults",
"settings.action.resetAll": "Reset all settings",
"settings.action.resetAll.description": "Revert all settings and preferences back to default values",
"settings.appearance.density.title": "Interface density",
"settings.appearance.density.description": "Adjust padding and spacing across the application",
"settings.appearance.density.compact": "Compact",
"settings.appearance.density.default": "Default",
"settings.appearance.density.comfortable": "Comfortable",
"settings.notifications.unreadBadge.title": "Unread badge",
"settings.notifications.unreadBadge.description": "Show unread session indicator badge on the app icon",
"settings.notifications.unreadBadge.count": "Count",
"settings.notifications.unreadBadge.dot": "Dot",
"settings.notifications.unreadBadge.none": "None",
"settings.notifications.focusMode.title": "Focus mode",
"settings.notifications.focusMode.description": "Suppress desktop notifications while presenting or in fullscreen",
"settings.notifications.focusMode.auto": "Auto",
"settings.notifications.focusMode.always": "Always",
"settings.notifications.focusMode.never": "Never",
"settings.projects.title": "Projects",
"settings.projects.description": "View and configure projects on this server",
"settings.projects.empty": "No projects found",
Expand Down
29 changes: 2 additions & 27 deletions packages/app/src/i18n/en.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -891,37 +891,12 @@ export const dict = {

"settings.section.desktop": "Desktop",
"settings.section.server": "Server",
"settings.tab.general": "Preferences",
"settings.tab.appearance": "Appearance",
"settings.tab.general": "General",
"settings.tab.preferences": "Preferences",
"settings.tab.shortcuts": "Shortcuts",
"settings.tab.notifications": "Notifications",
"settings.tab.providers": "Providers",
"settings.tab.models": "Models",
"settings.tab.servers": "Servers",
"settings.tab.projects": "Projects",
"settings.tab.extensions": "Extensions",
"settings.tab.mcps": "MCPs",
"settings.tab.plugins": "Plugins",
"settings.tab.skills": "Skills",
"settings.server.all": "All servers",
"settings.action.restoreDefaults": "Restore defaults",
"settings.action.resetAll": "Reset all settings",
"settings.action.resetAll.description": "Revert all settings and preferences back to default values",
"settings.appearance.density.title": "Interface density",
"settings.appearance.density.description": "Adjust padding and spacing across the application",
"settings.appearance.density.compact": "Compact",
"settings.appearance.density.default": "Default",
"settings.appearance.density.comfortable": "Comfortable",
"settings.notifications.unreadBadge.title": "Unread badge",
"settings.notifications.unreadBadge.description": "Show unread session indicator badge on the app icon",
"settings.notifications.unreadBadge.count": "Count",
"settings.notifications.unreadBadge.dot": "Dot",
"settings.notifications.unreadBadge.none": "None",
"settings.notifications.focusMode.title": "Focus mode",
"settings.notifications.focusMode.description": "Suppress desktop notifications while presenting or in fullscreen",
"settings.notifications.focusMode.auto": "Auto",
"settings.notifications.focusMode.always": "Always",
"settings.notifications.focusMode.never": "Never",
"settings.projects.title": "Projects",
"settings.projects.description": "View and configure projects on this server",
"settings.projects.empty": "No projects found",
Expand Down
Loading