diff --git a/packages/app/src/components/settings-general.tsx b/packages/app/src/components/settings-general.tsx index ad68b3e124..9968fa3b59 100644 --- a/packages/app/src/components/settings-general.tsx +++ b/packages/app/src/components/settings-general.tsx @@ -251,7 +251,7 @@ export const SettingsGeneral: Component = () => { }) const InterfaceSection = () => ( -
+
{
+ + + + + + + +
) diff --git a/packages/app/src/components/settings-v2/general.tsx b/packages/app/src/components/settings-v2/general.tsx index 4e210c4edb..120eed726d 100644 --- a/packages/app/src/components/settings-v2/general.tsx +++ b/packages/app/src/components/settings-v2/general.tsx @@ -230,34 +230,53 @@ export const SettingsGeneralV2: Component<{ const InterfaceSection = () => (
- - - {language.t("settings.general.row.newInterface.title")} - {language.t("settings.general.row.newInterface.badge")} - - } - description={language.t("settings.general.row.newInterface.description", { - date: new Intl.DateTimeFormat(language.intl(), { month: "long", day: "numeric" }).format( - oldInterfaceSunset, - ), - })} - > -
- { - settings.general.setNewLayoutDesigns(checked) - if (checked) return - void import("@/components/dialog-settings").then((module) => { - void dialog.show(() => ) - }) - }} - /> -
-
-
+
+ + + {language.t("settings.general.row.newInterface.title")} + {language.t("settings.general.row.newInterface.badge")} + + } + description={language.t("settings.general.row.newInterface.description", { + date: new Intl.DateTimeFormat(language.intl(), { month: "long", day: "numeric" }).format( + oldInterfaceSunset, + ), + })} + > +
+ { + settings.general.setNewLayoutDesigns(checked) + if (checked) return + void import("@/components/dialog-settings").then((module) => { + void dialog.show(() => ) + }) + }} + /> +
+
+
+
+ + + + + + {language.t("settings.general.row.newInterfaceNotice.dismiss")} + + + +
) diff --git a/packages/app/src/components/settings-v2/settings-v2.css b/packages/app/src/components/settings-v2/settings-v2.css index c36de6be9a..2b4b65e286 100644 --- a/packages/app/src/components/settings-v2/settings-v2.css +++ b/packages/app/src/components/settings-v2/settings-v2.css @@ -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); diff --git a/packages/app/src/context/settings.tsx b/packages/app/src/context/settings.tsx index da655f53a9..68c9e840e2 100644 --- a/packages/app/src/context/settings.tsx +++ b/packages/app/src/context/settings.tsx @@ -34,6 +34,7 @@ export interface Settings { showCustomAgents: boolean mobileTitlebarPosition: "top" | "bottom" newLayoutDesigns?: boolean + newInterfaceNoticeDismissed?: boolean } appearance: { fontSize: number @@ -254,6 +255,13 @@ export const { use: useSettings, provider: SettingsProvider } = createSimpleCont setNewLayoutDesigns(value: boolean) { setStore("general", "newLayoutDesigns", value) }, + newInterfaceNoticeDismissed: withFallback( + () => store.general?.newInterfaceNoticeDismissed, + false, + ), + dismissNewInterfaceNotice() { + setStore("general", "newInterfaceNoticeDismissed", true) + }, }, visibility: { fileTree: visible(showFileTree), diff --git a/packages/app/src/i18n/en.ts b/packages/app/src/i18n/en.ts index 54df4d232c..808025cb14 100644 --- a/packages/app/src/i18n/en.ts +++ b/packages/app/src/i18n/en.ts @@ -855,9 +855,8 @@ export const dict = { "settings.general.row.language.title": "Language", "settings.general.row.language.description": "Change the display language for OpenCode", - "settings.general.row.shell.title": "Terminal Shell", - "settings.general.row.shell.description": - "Choose the shell used for your terminal. Compatible shells are also used for agent tool calls.", + "settings.general.row.shell.title": "Terminal shell", + "settings.general.row.shell.description": "Shell used by the terminal and agent tools", "settings.general.row.shell.autoDefault": "Auto (Default)", "settings.general.row.shell.terminalOnly": "terminal only", "settings.general.row.appearance.title": "Appearance", @@ -889,8 +888,9 @@ export const dict = { "settings.general.row.mobileTitlebarBottom.title": "Bottom navigation", "settings.general.row.mobileTitlebarBottom.description": "Place the title bar and session tabs at the bottom of the screen on mobile", - "settings.general.row.showCustomAgents.title": "Custom agents", - "settings.general.row.showCustomAgents.description": "Show the agent picker in the composer", + "settings.general.row.showCustomAgents.title": "Show agent", + "settings.general.row.showCustomAgents.description": + "Switch between agents in the composer. When hidden, defaults to Build agent.", "settings.general.row.reasoningSummaries.title": "Show reasoning summaries", "settings.general.row.reasoningSummaries.description": "Display model reasoning summaries in the timeline", "settings.general.row.shellToolPartsExpanded.title": "Expand shell tool parts", @@ -902,7 +902,10 @@ export const dict = { "settings.general.row.newInterface.title": "Use the new interface", "settings.general.row.newInterface.badge": "New", "settings.general.row.newInterface.description": - "A redesigned layout, tabs, composer and new home. Old interface goes away on {{date}}.", + "New layout, tabs, composer and home. Switch back until {{date}}.", + "settings.general.row.newInterfaceNotice.title": "You're now using the new interface", + "settings.general.row.newInterfaceNotice.description": "The old interface was phased out on {{date}}.", + "settings.general.row.newInterfaceNotice.dismiss": "Dismiss", "settings.general.row.pinchZoom.title": "Pinch to zoom", "settings.general.row.pinchZoom.description": "Allow trackpad pinch and Ctrl-scroll gestures to zoom", diff --git a/packages/ui/src/v2/components/badge-v2.css b/packages/ui/src/v2/components/badge-v2.css index 44dfc7489d..5c7a59e0aa 100644 --- a/packages/ui/src/v2/components/badge-v2.css +++ b/packages/ui/src/v2/components/badge-v2.css @@ -29,5 +29,5 @@ [data-component="tag"][data-variant="accent"] { border: 0; background: var(--v2-background-bg-accent); - color: var(--v2-text-text-inverse); + color: var(--v2-text-text-contrast); }