Skip to content

Commit f45e084

Browse files
jayairjayair
committed
feat(app): hide desktop titlebar tools behind settings
1 parent 700d0fe commit f45e084

6 files changed

Lines changed: 233 additions & 132 deletions

File tree

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

Lines changed: 51 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import { useLanguage } from "@/context/language"
1616
import { useLayout } from "@/context/layout"
1717
import { usePlatform } from "@/context/platform"
1818
import { useServer } from "@/context/server"
19+
import { useSettings } from "@/context/settings"
1920
import { useSync } from "@/context/sync"
2021
import { useTerminal } from "@/context/terminal"
2122
import { focusTerminalById } from "@/pages/session/helpers"
@@ -134,6 +135,7 @@ export function SessionHeader() {
134135
const server = useServer()
135136
const platform = usePlatform()
136137
const language = useLanguage()
138+
const settings = useSettings()
137139
const sync = useSync()
138140
const terminal = useTerminal()
139141
const { params, view } = useSessionLayout()
@@ -151,6 +153,9 @@ export function SessionHeader() {
151153
})
152154
const hotkey = createMemo(() => command.keybind("file.open"))
153155
const os = createMemo(() => detectOS(platform))
156+
const tree = createMemo(() => platform.platform !== "desktop" || settings.general.showFileTree())
157+
const term = createMemo(() => platform.platform !== "desktop" || settings.general.showTerminal())
158+
const status = createMemo(() => platform.platform !== "desktop" || settings.general.showStatus())
154159

155160
const [exists, setExists] = createStore<Partial<Record<OpenApp, boolean>>>({
156161
finder: true,
@@ -415,24 +420,28 @@ export function SessionHeader() {
415420
</div>
416421
</Show>
417422
<div class="flex items-center gap-1">
418-
<Tooltip placement="bottom" value={language.t("status.popover.trigger")}>
419-
<StatusPopover />
420-
</Tooltip>
421-
<TooltipKeybind
422-
title={language.t("command.terminal.toggle")}
423-
keybind={command.keybind("terminal.toggle")}
424-
>
425-
<Button
426-
variant="ghost"
427-
class="group/terminal-toggle titlebar-icon w-8 h-6 p-0 box-border shrink-0"
428-
onClick={toggleTerminal}
429-
aria-label={language.t("command.terminal.toggle")}
430-
aria-expanded={view().terminal.opened()}
431-
aria-controls="terminal-panel"
423+
<Show when={status()}>
424+
<Tooltip placement="bottom" value={language.t("status.popover.trigger")}>
425+
<StatusPopover />
426+
</Tooltip>
427+
</Show>
428+
<Show when={term()}>
429+
<TooltipKeybind
430+
title={language.t("command.terminal.toggle")}
431+
keybind={command.keybind("terminal.toggle")}
432432
>
433-
<Icon size="small" name={view().terminal.opened() ? "terminal-active" : "terminal"} />
434-
</Button>
435-
</TooltipKeybind>
433+
<Button
434+
variant="ghost"
435+
class="group/terminal-toggle titlebar-icon w-8 h-6 p-0 box-border shrink-0"
436+
onClick={toggleTerminal}
437+
aria-label={language.t("command.terminal.toggle")}
438+
aria-expanded={view().terminal.opened()}
439+
aria-controls="terminal-panel"
440+
>
441+
<Icon size="small" name={view().terminal.opened() ? "terminal-active" : "terminal"} />
442+
</Button>
443+
</TooltipKeybind>
444+
</Show>
436445

437446
<div class="hidden md:flex items-center gap-1 shrink-0">
438447
<TooltipKeybind
@@ -451,30 +460,32 @@ export function SessionHeader() {
451460
</Button>
452461
</TooltipKeybind>
453462

454-
<TooltipKeybind
455-
title={language.t("command.fileTree.toggle")}
456-
keybind={command.keybind("fileTree.toggle")}
457-
>
458-
<Button
459-
variant="ghost"
460-
class="titlebar-icon w-8 h-6 p-0 box-border"
461-
onClick={() => layout.fileTree.toggle()}
462-
aria-label={language.t("command.fileTree.toggle")}
463-
aria-expanded={layout.fileTree.opened()}
464-
aria-controls="file-tree-panel"
463+
<Show when={tree()}>
464+
<TooltipKeybind
465+
title={language.t("command.fileTree.toggle")}
466+
keybind={command.keybind("fileTree.toggle")}
465467
>
466-
<div class="relative flex items-center justify-center size-4">
467-
<Icon
468-
size="small"
469-
name={layout.fileTree.opened() ? "file-tree-active" : "file-tree"}
470-
classList={{
471-
"text-icon-strong": layout.fileTree.opened(),
472-
"text-icon-weak": !layout.fileTree.opened(),
473-
}}
474-
/>
475-
</div>
476-
</Button>
477-
</TooltipKeybind>
468+
<Button
469+
variant="ghost"
470+
class="titlebar-icon w-8 h-6 p-0 box-border"
471+
onClick={() => layout.fileTree.toggle()}
472+
aria-label={language.t("command.fileTree.toggle")}
473+
aria-expanded={layout.fileTree.opened()}
474+
aria-controls="file-tree-panel"
475+
>
476+
<div class="relative flex items-center justify-center size-4">
477+
<Icon
478+
size="small"
479+
name={layout.fileTree.opened() ? "file-tree-active" : "file-tree"}
480+
classList={{
481+
"text-icon-strong": layout.fileTree.opened(),
482+
"text-icon-weak": !layout.fileTree.opened(),
483+
}}
484+
/>
485+
</div>
486+
</Button>
487+
</TooltipKeybind>
488+
</Show>
478489
</div>
479490
</div>
480491
</div>

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

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,7 @@ export const SettingsGeneral: Component = () => {
7474
})
7575

7676
const linux = createMemo(() => platform.platform === "desktop" && platform.os === "linux")
77+
const desktop = createMemo(() => platform.platform === "desktop")
7778

7879
const check = () => {
7980
if (!platform.checkUpdate) return
@@ -276,6 +277,50 @@ export const SettingsGeneral: Component = () => {
276277
</div>
277278
)
278279

280+
const AdvancedSection = () => (
281+
<div class="flex flex-col gap-1">
282+
<h3 class="text-14-medium text-text-strong pb-2">{language.t("settings.general.section.advanced")}</h3>
283+
284+
<SettingsList>
285+
<SettingsRow
286+
title={language.t("settings.general.row.showFileTree.title")}
287+
description={language.t("settings.general.row.showFileTree.description")}
288+
>
289+
<div data-action="settings-show-file-tree">
290+
<Switch
291+
checked={settings.general.showFileTree()}
292+
onChange={(checked) => settings.general.setShowFileTree(checked)}
293+
/>
294+
</div>
295+
</SettingsRow>
296+
297+
<SettingsRow
298+
title={language.t("settings.general.row.showTerminal.title")}
299+
description={language.t("settings.general.row.showTerminal.description")}
300+
>
301+
<div data-action="settings-show-terminal">
302+
<Switch
303+
checked={settings.general.showTerminal()}
304+
onChange={(checked) => settings.general.setShowTerminal(checked)}
305+
/>
306+
</div>
307+
</SettingsRow>
308+
309+
<SettingsRow
310+
title={language.t("settings.general.row.showStatus.title")}
311+
description={language.t("settings.general.row.showStatus.description")}
312+
>
313+
<div data-action="settings-show-status">
314+
<Switch
315+
checked={settings.general.showStatus()}
316+
onChange={(checked) => settings.general.setShowStatus(checked)}
317+
/>
318+
</div>
319+
</SettingsRow>
320+
</SettingsList>
321+
</div>
322+
)
323+
279324
const AppearanceSection = () => (
280325
<div class="flex flex-col gap-1">
281326
<h3 class="text-14-medium text-text-strong pb-2">{language.t("settings.general.section.appearance")}</h3>
@@ -587,6 +632,10 @@ export const SettingsGeneral: Component = () => {
587632
)
588633
}}
589634
</Show>
635+
636+
<Show when={desktop()}>
637+
<AdvancedSection />
638+
</Show>
590639
</div>
591640
</div>
592641
)

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

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,9 @@ export interface Settings {
2323
autoSave: boolean
2424
releaseNotes: boolean
2525
followup: "queue" | "steer"
26+
showFileTree: boolean
27+
showStatus: boolean
28+
showTerminal: boolean
2629
showReasoningSummaries: boolean
2730
shellToolPartsExpanded: boolean
2831
editToolPartsExpanded: boolean
@@ -47,6 +50,9 @@ const defaultSettings: Settings = {
4750
autoSave: true,
4851
releaseNotes: true,
4952
followup: "steer",
53+
showFileTree: false,
54+
showStatus: false,
55+
showTerminal: false,
5056
showReasoningSummaries: false,
5157
shellToolPartsExpanded: true,
5258
editToolPartsExpanded: false,
@@ -143,6 +149,18 @@ export const { use: useSettings, provider: SettingsProvider } = createSimpleCont
143149
setFollowup(value: "queue" | "steer") {
144150
setStore("general", "followup", value)
145151
},
152+
showFileTree: withFallback(() => store.general?.showFileTree, defaultSettings.general.showFileTree),
153+
setShowFileTree(value: boolean) {
154+
setStore("general", "showFileTree", value)
155+
},
156+
showStatus: withFallback(() => store.general?.showStatus, defaultSettings.general.showStatus),
157+
setShowStatus(value: boolean) {
158+
setStore("general", "showStatus", value)
159+
},
160+
showTerminal: withFallback(() => store.general?.showTerminal, defaultSettings.general.showTerminal),
161+
setShowTerminal(value: boolean) {
162+
setStore("general", "showTerminal", value)
163+
},
146164
showReasoningSummaries: withFallback(
147165
() => store.general?.showReasoningSummaries,
148166
defaultSettings.general.showReasoningSummaries,

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -715,6 +715,7 @@ export const dict = {
715715
"settings.desktop.wsl.description": "Run the OpenCode server inside WSL on Windows.",
716716

717717
"settings.general.section.appearance": "Appearance",
718+
"settings.general.section.advanced": "Advanced",
718719
"settings.general.section.notifications": "System notifications",
719720
"settings.general.section.updates": "Updates",
720721
"settings.general.section.sounds": "Sound effects",
@@ -735,6 +736,12 @@ export const dict = {
735736
"settings.general.row.followup.description": "Choose whether follow-up prompts steer immediately or wait in a queue",
736737
"settings.general.row.followup.option.queue": "Queue",
737738
"settings.general.row.followup.option.steer": "Steer",
739+
"settings.general.row.showFileTree.title": "File tree",
740+
"settings.general.row.showFileTree.description": "Show the file tree toggle and panel in desktop sessions",
741+
"settings.general.row.showTerminal.title": "Terminal",
742+
"settings.general.row.showTerminal.description": "Show the terminal button in the desktop title bar",
743+
"settings.general.row.showStatus.title": "Server status",
744+
"settings.general.row.showStatus.description": "Show the server status button in the desktop title bar",
738745
"settings.general.row.reasoningSummaries.title": "Show reasoning summaries",
739746
"settings.general.row.reasoningSummaries.description": "Display model reasoning summaries in the timeline",
740747
"settings.general.row.shellToolPartsExpanded.title": "Expand shell tool parts",

0 commit comments

Comments
 (0)