ceos/opencode
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

tui: surface a dismissible new-interface notice and tighten settings copy for clarity

Browse source 
Users who were migrated to the new interface will now see a dismissible notice in Settings explaining the old interface was phased out, so they are not surprised by the change. The new-interface toggle is also visually elevated with a card style so it is easier to find. Settings labels and descriptions across General have been rewritten to be shorter and more direct, so it is quicker to understand what each option controls. The "New" badge color is also adjusted for better readability.
This commit is contained in:
usrnk1 2026-07-13 12:01:19 +02:00
commit 446510a6a9
6 changed files with 89 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

19
packages/app/src/components/settings-general.tsx
View file

@ -251,7 +251,7 @@ export const SettingsGeneral: Component = () => {
})
const InterfaceSection = () => (
<div class="flex flex-col gap-1">
<div class="flex flex-col gap-4">
<SettingsList>
<SettingsRow
title={
@ -280,6 +280,23 @@ export const SettingsGeneral: Component = () => {
</div>
</SettingsRow>
</SettingsList>
<Show when={!settings.general.newInterfaceNoticeDismissed()}>
<SettingsList>
<SettingsRow
title={language.t("settings.general.row.newInterfaceNotice.title")}
description={language.t("settings.general.row.newInterfaceNotice.description", {
date: new Intl.DateTimeFormat(language.intl(), { month: "long", day: "numeric" }).format(
oldInterfaceSunset,
),
})}
>
<Button size="small" variant="ghost" onClick={settings.general.dismissNewInterfaceNotice}>
{language.t("settings.general.row.newInterfaceNotice.dismiss")}
</Button>
</SettingsRow>
</SettingsList>
</Show>
</div>
)

75
packages/app/src/components/settings-v2/general.tsx
View file

@ -230,34 +230,53 @@ export const SettingsGeneralV2: Component<{
const InterfaceSection = () => (
<div class="settings-v2-section">
<SettingsListV2>
<SettingsRowV2
title={
<span class="flex items-center gap-2">
{language.t("settings.general.row.newInterface.title")}
<Tag variant="accent">{language.t("settings.general.row.newInterface.badge")}</Tag>
</span>
}
description={language.t("settings.general.row.newInterface.description", {
date: new Intl.DateTimeFormat(language.intl(), { month: "long", day: "numeric" }).format(
oldInterfaceSunset,
),
})}
>
<div data-action="settings-new-layout-designs">
<Switch
checked={settings.general.newLayoutDesigns()}
onChange={(checked) => {
settings.general.setNewLayoutDesigns(checked)
if (checked) return
void import("@/components/dialog-settings").then((module) => {
void dialog.show(() => <module.DialogSettings />)
})
}}
/>
</div>
</SettingsRowV2>
</SettingsListV2>
<div class="settings-v2-interface-feature">
<SettingsListV2>
<SettingsRowV2
title={
<span class="flex items-center gap-2">
{language.t("settings.general.row.newInterface.title")}
<Tag variant="accent">{language.t("settings.general.row.newInterface.badge")}</Tag>
</span>
}
description={language.t("settings.general.row.newInterface.description", {
date: new Intl.DateTimeFormat(language.intl(), { month: "long", day: "numeric" }).format(
oldInterfaceSunset,
),
})}
>
<div data-action="settings-new-layout-designs">
<Switch
checked={settings.general.newLayoutDesigns()}
onChange={(checked) => {
settings.general.setNewLayoutDesigns(checked)
if (checked) return
void import("@/components/dialog-settings").then((module) => {
void dialog.show(() => <module.DialogSettings />)
})
}}
/>
</div>
</SettingsRowV2>
</SettingsListV2>
</div>
<Show when={!settings.general.newInterfaceNoticeDismissed()}>
<SettingsListV2>
<SettingsRowV2
title={language.t("settings.general.row.newInterfaceNotice.title")}
description={language.t("settings.general.row.newInterfaceNotice.description", {
date: new Intl.DateTimeFormat(language.intl(), { month: "long", day: "numeric" }).format(
oldInterfaceSunset,
),
})}
>
<ButtonV2 size="small" variant="ghost-muted" onClick={settings.general.dismissNewInterfaceNotice}>
{language.t("settings.general.row.newInterfaceNotice.dismiss")}
</ButtonV2>
</SettingsRowV2>
</SettingsListV2>
</Show>
</div>
)

7
packages/app/src/components/settings-v2/settings-v2.css
View file

@ -90,6 +90,11 @@
box-shadow: inset 0 0 0 0.5px var(--v2-border-border-muted);
}
.settings-v2-interface-feature [data-component="settings-v2-list"] {
background-color: var(--v2-background-bg-base);
box-shadow: var(--v2-elevation-raised);
}
[data-component="settings-v2-row"] {
display: flex;
flex-wrap: wrap;
@ -128,7 +133,7 @@
}
[data-slot="settings-v2-row-description"] {
font-size: 11px;
font-size: 13px;
font-weight: 440;
line-height: 1;
color: var(--v2-text-text-muted);