Skip to content

Commit 45e4606

Browse files
HonaHona
authored
feat(app): bring v2 visibility settings to web (anomalyco#32174)
1 parent 9ae4a51 commit 45e4606

11 files changed

Lines changed: 86 additions & 147 deletions

File tree

‎packages/app/src/components/prompt-input.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1372,7 +1372,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
13721372
if (!search) return projects()
13731373
return projects().filter((project) => displayName(project).toLowerCase().includes(search))
13741374
})
1375-
const showAgentControl = createMemo(() => settings.general.showCustomAgents() && agentNames().length > 0)
1375+
const showAgentControl = createMemo(() => settings.visibility.customAgents() && agentNames().length > 0)
13761376
const selectProject = (worktree: string) => {
13771377
setPicker({
13781378
projectOpen: false,

‎packages/app/src/components/session/session-header.tsx‎

Lines changed: 41 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -155,11 +155,9 @@ export function SessionHeader() {
155155
})
156156
const hotkey = createMemo(() => command.keybind("file.open"))
157157
const os = createMemo(() => detectOS(platform))
158-
const isDesktopV2 = createMemo(() => platform.platform === "desktop" && settings.general.newLayoutDesigns())
159-
const search = createMemo(() => (isDesktopV2() ? settings.general.showSearch() : true))
160-
const tree = createMemo(() => (isDesktopV2() ? settings.general.showFileTree() : true))
161-
const term = createMemo(() => (isDesktopV2() ? settings.general.showTerminal() : true))
162-
const status = createMemo(() => (isDesktopV2() ? settings.general.showStatus() : true))
158+
const isV2 = settings.general.newLayoutDesigns
159+
const search = settings.visibility.search
160+
const status = settings.visibility.status
163161

164162
const [exists, setExists] = createStore<Partial<Record<OpenApp, boolean>>>({
165163
finder: true,
@@ -322,7 +320,7 @@ export function SessionHeader() {
322320
{(mount) => (
323321
<Portal mount={mount()}>
324322
<Show
325-
when={isDesktopV2}
323+
when={isV2}
326324
fallback={
327325
<div class="flex items-center gap-2">
328326
<Show when={projectDirectory()}>
@@ -444,23 +442,21 @@ export function SessionHeader() {
444442
<StatusPopover />
445443
</Tooltip>
446444
</Show>
447-
<Show when={term()}>
448-
<TooltipKeybind
449-
title={language.t("command.terminal.toggle")}
450-
keybind={command.keybind("terminal.toggle")}
445+
<TooltipKeybind
446+
title={language.t("command.terminal.toggle")}
447+
keybind={command.keybind("terminal.toggle")}
448+
>
449+
<Button
450+
variant="ghost"
451+
class="group/terminal-toggle titlebar-icon w-8 h-6 p-0 box-border shrink-0"
452+
onClick={toggleTerminal}
453+
aria-label={language.t("command.terminal.toggle")}
454+
aria-expanded={view().terminal.opened()}
455+
aria-controls="terminal-panel"
451456
>
452-
<Button
453-
variant="ghost"
454-
class="group/terminal-toggle titlebar-icon w-8 h-6 p-0 box-border shrink-0"
455-
onClick={toggleTerminal}
456-
aria-label={language.t("command.terminal.toggle")}
457-
aria-expanded={view().terminal.opened()}
458-
aria-controls="terminal-panel"
459-
>
460-
<Icon size="small" name={view().terminal.opened() ? "terminal-active" : "terminal"} />
461-
</Button>
462-
</TooltipKeybind>
463-
</Show>
457+
<Icon size="small" name={view().terminal.opened() ? "terminal-active" : "terminal"} />
458+
</Button>
459+
</TooltipKeybind>
464460

465461
<div class="hidden md:flex items-center gap-1 shrink-0">
466462
<TooltipKeybind
@@ -479,32 +475,30 @@ export function SessionHeader() {
479475
</Button>
480476
</TooltipKeybind>
481477

482-
<Show when={tree()}>
483-
<TooltipKeybind
484-
title={language.t("command.fileTree.toggle")}
485-
keybind={command.keybind("fileTree.toggle")}
478+
<TooltipKeybind
479+
title={language.t("command.fileTree.toggle")}
480+
keybind={command.keybind("fileTree.toggle")}
481+
>
482+
<Button
483+
variant="ghost"
484+
class="titlebar-icon w-8 h-6 p-0 box-border"
485+
onClick={() => layout.fileTree.toggle()}
486+
aria-label={language.t("command.fileTree.toggle")}
487+
aria-expanded={layout.fileTree.opened()}
488+
aria-controls="file-tree-panel"
486489
>
487-
<Button
488-
variant="ghost"
489-
class="titlebar-icon w-8 h-6 p-0 box-border"
490-
onClick={() => layout.fileTree.toggle()}
491-
aria-label={language.t("command.fileTree.toggle")}
492-
aria-expanded={layout.fileTree.opened()}
493-
aria-controls="file-tree-panel"
494-
>
495-
<div class="relative flex items-center justify-center size-4">
496-
<Icon
497-
size="small"
498-
name={layout.fileTree.opened() ? "file-tree-active" : "file-tree"}
499-
classList={{
500-
"text-icon-strong": layout.fileTree.opened(),
501-
"text-icon-weak": !layout.fileTree.opened(),
502-
}}
503-
/>
504-
</div>
505-
</Button>
506-
</TooltipKeybind>
507-
</Show>
490+
<div class="relative flex items-center justify-center size-4">
491+
<Icon
492+
size="small"
493+
name={layout.fileTree.opened() ? "file-tree-active" : "file-tree"}
494+
classList={{
495+
"text-icon-strong": layout.fileTree.opened(),
496+
"text-icon-weak": !layout.fileTree.opened(),
497+
}}
498+
/>
499+
</div>
500+
</Button>
501+
</TooltipKeybind>
508502
</div>
509503
</div>
510504
</div>

‎packages/app/src/components/settings-v2/general.tsx‎

Lines changed: 6 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,14 @@
11
import { Component, Show, createMemo, createResource, onMount } from "solid-js"
22
import { ButtonV2 } from "@opencode-ai/ui/v2/button-v2"
3-
import { Icon } from "@opencode-ai/ui/icon"
43
import { SelectV2 } from "@opencode-ai/ui/v2/select-v2"
54
import { Switch } from "@opencode-ai/ui/v2/switch-v2"
65
import { TextInputV2 } from "@opencode-ai/ui/v2/text-input-v2"
7-
import { Tooltip } from "@opencode-ai/ui/tooltip"
86
import { useTheme, type ColorScheme } from "@opencode-ai/ui/theme/context"
97
import { useDialog } from "@opencode-ai/ui/context/dialog"
108
import { useParams } from "@solidjs/router"
119
import { useLanguage } from "@/context/language"
1210
import { usePermission } from "@/context/permission"
13-
import { usePlatform, type DisplayBackend } from "@/context/platform"
11+
import { usePlatform } from "@/context/platform"
1412
import { useServerSync } from "@/context/server-sync"
1513
import { useServerSDK } from "@/context/server-sdk"
1614
import { useUpdaterAction } from "../updater-action"
@@ -94,7 +92,6 @@ export const SettingsGeneralV2: Component = () => {
9492

9593
const updater = useUpdaterAction()
9694

97-
const linux = createMemo(() => platform.platform === "desktop" && platform.os === "linux")
9895
const dir = createMemo(() => decode64(params.dir))
9996
const accepting = createMemo(() => {
10097
const value = dir()
@@ -136,12 +133,6 @@ export const SettingsGeneralV2: Component = () => {
136133
{ initialValue: [] as ShellOption[] },
137134
)
138135

139-
const [displayBackend, { refetch: refetchDisplayBackend }] = createResource(
140-
() => (linux() && platform.getDisplayBackend ? true : false),
141-
() => Promise.resolve(platform.getDisplayBackend?.() ?? null).catch(() => null as DisplayBackend | null),
142-
{ initialValue: null as DisplayBackend | null },
143-
)
144-
145136
const [pinchZoom, { mutate: setPinchZoom }] = createResource(
146137
() => (desktop() && platform.getPinchZoomEnabled ? true : false),
147138
() => Promise.resolve(platform.getPinchZoomEnabled?.() ?? false).catch(() => false),
@@ -186,14 +177,6 @@ export const SettingsGeneralV2: Component = () => {
186177
return options
187178
})
188179

189-
const onDisplayBackendChange = (checked: boolean) => {
190-
const update = platform.setDisplayBackend?.(checked ? "wayland" : "auto")
191-
if (!update) return
192-
void update.finally(() => {
193-
void refetchDisplayBackend()
194-
})
195-
}
196-
197180
const onPinchZoomChange = (checked: boolean) => {
198181
setPinchZoom(checked)
199182
const update = platform.setPinchZoomEnabled?.(checked)
@@ -383,18 +366,6 @@ export const SettingsGeneralV2: Component = () => {
383366
</div>
384367
</SettingsRowV2>
385368

386-
<SettingsRowV2
387-
title={language.t("settings.general.row.showNavigation.title")}
388-
description={language.t("settings.general.row.showNavigation.description")}
389-
>
390-
<div data-action="settings-show-navigation">
391-
<Switch
392-
checked={settings.general.showNavigation()}
393-
onChange={(checked) => settings.general.setShowNavigation(checked)}
394-
/>
395-
</div>
396-
</SettingsRowV2>
397-
398369
<SettingsRowV2
399370
title={language.t("settings.general.row.showSearch.title")}
400371
description={language.t("settings.general.row.showSearch.description")}
@@ -407,18 +378,6 @@ export const SettingsGeneralV2: Component = () => {
407378
</div>
408379
</SettingsRowV2>
409380

410-
<SettingsRowV2
411-
title={language.t("settings.general.row.showTerminal.title")}
412-
description={language.t("settings.general.row.showTerminal.description")}
413-
>
414-
<div data-action="settings-show-terminal">
415-
<Switch
416-
checked={settings.general.showTerminal()}
417-
onChange={(checked) => settings.general.setShowTerminal(checked)}
418-
/>
419-
</div>
420-
</SettingsRowV2>
421-
422381
<SettingsRowV2
423382
title={language.t("settings.general.row.showStatus.title")}
424383
description={language.t("settings.general.row.showStatus.description")}
@@ -709,6 +668,7 @@ export const SettingsGeneralV2: Component = () => {
709668
</div>
710669
)
711670

671+
// We can probably remove this, right?
712672
const DisplaySection = () => (
713673
<Show when={desktop()}>
714674
<div class="settings-v2-section">
@@ -723,26 +683,6 @@ export const SettingsGeneralV2: Component = () => {
723683
<Switch checked={pinchZoom.latest} onChange={onPinchZoomChange} />
724684
</div>
725685
</SettingsRowV2>
726-
727-
<Show when={linux()}>
728-
<SettingsRowV2
729-
title={
730-
<div class="flex items-center gap-2">
731-
<span>{language.t("settings.general.row.wayland.title")}</span>
732-
<Tooltip value={language.t("settings.general.row.wayland.tooltip")} placement="top">
733-
<span class="text-text-weak">
734-
<Icon name="help" size="small" />
735-
</span>
736-
</Tooltip>
737-
</div>
738-
}
739-
description={language.t("settings.general.row.wayland.description")}
740-
>
741-
<div data-action="settings-wayland">
742-
<Switch checked={displayBackend.latest === "wayland"} onChange={onDisplayBackendChange} />
743-
</div>
744-
</SettingsRowV2>
745-
</Show>
746686
</SettingsListV2>
747687
</div>
748688
</Show>
@@ -763,13 +703,13 @@ export const SettingsGeneralV2: Component = () => {
763703

764704
<SoundsSection />
765705

766-
<UpdatesSection />
706+
<Show when={desktop()}>
707+
<UpdatesSection />
708+
</Show>
767709

768710
<DisplaySection />
769711

770-
<Show when={desktop()}>
771-
<AdvancedSection />
772-
</Show>
712+
<AdvancedSection />
773713
</div>
774714
</>
775715
)

‎packages/app/src/context/settings.tsx‎

Lines changed: 20 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -153,6 +153,15 @@ export const { use: useSettings, provider: SettingsProvider } = createSimpleCont
153153
gate: false,
154154
init: () => {
155155
const [store, setStore, _, ready] = persisted("settings.v3", createStore<Settings>(defaultSettings))
156+
const showFileTree = withFallback(() => store.general?.showFileTree, defaultSettings.general.showFileTree)
157+
const showSearch = withFallback(() => store.general?.showSearch, defaultSettings.general.showSearch)
158+
const showStatus = withFallback(() => store.general?.showStatus, defaultSettings.general.showStatus)
159+
const showCustomAgents = withFallback(
160+
() => store.general?.showCustomAgents,
161+
defaultSettings.general.showCustomAgents,
162+
)
163+
const newLayoutDesigns = withFallback(() => store.general?.newLayoutDesigns, newLayoutDesignsDefault)
164+
const visible = (preference: () => boolean) => createMemo(() => !newLayoutDesigns() || preference())
156165

157166
createEffect(() => {
158167
if (typeof document === "undefined") return
@@ -187,19 +196,19 @@ export const { use: useSettings, provider: SettingsProvider } = createSimpleCont
187196
setFollowup(value: "queue" | "steer") {
188197
setStore("general", "followup", value === "queue" ? "steer" : value)
189198
},
190-
showFileTree: withFallback(() => store.general?.showFileTree, defaultSettings.general.showFileTree),
199+
showFileTree,
191200
setShowFileTree(value: boolean) {
192201
setStore("general", "showFileTree", value)
193202
},
194203
showNavigation: withFallback(() => store.general?.showNavigation, defaultSettings.general.showNavigation),
195204
setShowNavigation(value: boolean) {
196205
setStore("general", "showNavigation", value)
197206
},
198-
showSearch: withFallback(() => store.general?.showSearch, defaultSettings.general.showSearch),
207+
showSearch,
199208
setShowSearch(value: boolean) {
200209
setStore("general", "showSearch", value)
201210
},
202-
showStatus: withFallback(() => store.general?.showStatus, defaultSettings.general.showStatus),
211+
showStatus,
203212
setShowStatus(value: boolean) {
204213
setStore("general", "showStatus", value)
205214
},
@@ -235,15 +244,21 @@ export const { use: useSettings, provider: SettingsProvider } = createSimpleCont
235244
setShowSessionProgressBar(value: boolean) {
236245
setStore("general", "showSessionProgressBar", value)
237246
},
238-
showCustomAgents: withFallback(() => store.general?.showCustomAgents, defaultSettings.general.showCustomAgents),
247+
showCustomAgents,
239248
setShowCustomAgents(value: boolean) {
240249
setStore("general", "showCustomAgents", value)
241250
},
242-
newLayoutDesigns: withFallback(() => store.general?.newLayoutDesigns, newLayoutDesignsDefault),
251+
newLayoutDesigns,
243252
setNewLayoutDesigns(value: boolean) {
244253
setStore("general", "newLayoutDesigns", value)
245254
},
246255
},
256+
visibility: {
257+
fileTree: visible(showFileTree),
258+
search: visible(showSearch),
259+
status: visible(showStatus),
260+
customAgents: visible(showCustomAgents),
261+
},
247262
appearance: {
248263
fontSize: withFallback(() => store.appearance?.fontSize, defaultSettings.appearance.fontSize),
249264
setFontSize(value: number) {

‎packages/app/src/i18n/en.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -825,17 +825,17 @@ export const dict = {
825825
"settings.general.row.followup.option.queue": "Queue",
826826
"settings.general.row.followup.option.steer": "Steer",
827827
"settings.general.row.showFileTree.title": "File tree",
828-
"settings.general.row.showFileTree.description": "Show the file tree panel in desktop sessions",
828+
"settings.general.row.showFileTree.description": "Show the file tree panel in sessions",
829829
"settings.general.row.showNavigation.title": "Navigation controls",
830830
"settings.general.row.showNavigation.description": "Show the back and forward buttons in the desktop title bar",
831831
"settings.general.row.showSearch.title": "Command palette",
832-
"settings.general.row.showSearch.description": "Show the search and command palette button in the desktop title bar",
832+
"settings.general.row.showSearch.description": "Show the search and command palette button in the title bar",
833833
"settings.general.row.showTerminal.title": "Terminal",
834834
"settings.general.row.showTerminal.description": "Show the terminal button in the desktop title bar",
835835
"settings.general.row.showStatus.title": "Server status",
836-
"settings.general.row.showStatus.description": "Show the server status button in the desktop title bar",
836+
"settings.general.row.showStatus.description": "Show the server status button in the title bar",
837837
"settings.general.row.showCustomAgents.title": "Custom agents",
838-
"settings.general.row.showCustomAgents.description": "Show the agent picker in the v2 desktop composer",
838+
"settings.general.row.showCustomAgents.description": "Show the agent picker in the composer",
839839
"settings.general.row.reasoningSummaries.title": "Show reasoning summaries",
840840
"settings.general.row.reasoningSummaries.description": "Display model reasoning summaries in the timeline",
841841
"settings.general.row.shellToolPartsExpanded.title": "Expand shell tool parts",

‎packages/app/src/i18n/uk.ts‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -759,16 +759,15 @@ export const dict = {
759759
"settings.general.row.followup.option.queue": "Черга",
760760
"settings.general.row.followup.option.steer": "Керування",
761761
"settings.general.row.showFileTree.title": "Дерево файлів",
762-
"settings.general.row.showFileTree.description": "Показувати панель дерева файлів у сесіях на робочому столі",
762+
"settings.general.row.showFileTree.description": "Показувати панель дерева файлів у сесіях",
763763
"settings.general.row.showNavigation.title": "Елементи навігації",
764764
"settings.general.row.showNavigation.description": "Показувати кнопки назад і вперед у заголовку робочого столу",
765765
"settings.general.row.showSearch.title": "Палітра команд",
766-
"settings.general.row.showSearch.description":
767-
"Показувати кнопку пошуку та палітри команд у заголовку робочого столу",
766+
"settings.general.row.showSearch.description": "Показувати кнопку пошуку та палітри команд у заголовку",
768767
"settings.general.row.showTerminal.title": "Термінал",
769768
"settings.general.row.showTerminal.description": "Показувати кнопку термінала в заголовку робочого столу",
770769
"settings.general.row.showStatus.title": "Статус сервера",
771-
"settings.general.row.showStatus.description": "Показувати кнопку статусу сервера в заголовку робочого столу",
770+
"settings.general.row.showStatus.description": "Показувати кнопку статусу сервера в заголовку",
772771
"settings.general.row.reasoningSummaries.title": "Показувати підсумки мислення",
773772
"settings.general.row.reasoningSummaries.description": "Відображати підсумки мислення моделі на часовій шкалі",
774773
"settings.general.row.shellToolPartsExpanded.title": "Розгортати частини інструменту оболонки",

‎packages/app/src/pages/session.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -275,8 +275,7 @@ export default function Page() {
275275
() =>
276276
isDesktop() &&
277277
shouldShowFileTree({
278-
desktopV2: platform.platform === "desktop" && settings.general.newLayoutDesigns(),
279-
showFileTree: settings.general.showFileTree(),
278+
visible: settings.visibility.fileTree(),
280279
opened: layout.fileTree.opened(),
281280
}),
282281
)

0 commit comments

Comments
 (0)