Apply PR #19029: feat(app): hide desktop titlebar tools behind settings

2026-04-08 07:47:37 +00:00 · 2026-04-08 07:47:37 +00:00 · 3196df1ccf
parent 5913bc8dc7 fa9674edf9
commit 3196df1ccf
7 changed files with 306 additions and 159 deletions
--- a/packages/app/src/components/session/session-header.tsx
+++ b/packages/app/src/components/session/session-header.tsx
@ -16,6 +16,7 @@ import { useLanguage } from "@/context/language"
 import { useLayout } from "@/context/layout"
 import { usePlatform } from "@/context/platform"
 import { useServer } from "@/context/server"
+import { useSettings } from "@/context/settings"
 import { useSync } from "@/context/sync"
 import { useTerminal } from "@/context/terminal"
 import { focusTerminalById } from "@/pages/session/helpers"
@ -134,6 +135,7 @@ export function SessionHeader() {
  const server = useServer()
  const platform = usePlatform()
  const language = useLanguage()
+  const settings = useSettings()
  const sync = useSync()
  const terminal = useTerminal()
  const { params, view } = useSessionLayout()
@ -151,6 +153,10 @@ export function SessionHeader() {
  })
  const hotkey = createMemo(() => command.keybind("file.open"))
  const os = createMemo(() => detectOS(platform))
+  const search = createMemo(() => platform.platform !== "desktop" || settings.general.showSearch())
+  const tree = createMemo(() => platform.platform !== "desktop" || settings.general.showFileTree())
+  const term = createMemo(() => platform.platform !== "desktop" || settings.general.showTerminal())
+  const status = createMemo(() => platform.platform !== "desktop" || settings.general.showStatus())

  const [exists, setExists] = createStore<Partial<Record<OpenApp, boolean>>>({
    finder: true,
@ -267,6 +273,7 @@ export function SessionHeader() {

  return (
    <>
+      <Show when={search()}>
        <Show when={centerMount()}>
          {(mount) => (
            <Portal mount={mount()}>
@ -297,6 +304,7 @@ export function SessionHeader() {
            </Portal>
          )}
        </Show>
+      </Show>
      <Show when={rightMount()}>
        {(mount) => (
          <Portal mount={mount()}>
@ -415,9 +423,12 @@ export function SessionHeader() {
                </div>
              </Show>
              <div class="flex items-center gap-1">
+                <Show when={status()}>
                  <Tooltip placement="bottom" value={language.t("status.popover.trigger")}>
                    <StatusPopover />
                  </Tooltip>
+                </Show>
+                <Show when={term()}>
                  <TooltipKeybind
                    title={language.t("command.terminal.toggle")}
                    keybind={command.keybind("terminal.toggle")}
@ -433,6 +444,7 @@ export function SessionHeader() {
                      <Icon size="small" name={view().terminal.opened() ? "terminal-active" : "terminal"} />
                    </Button>
                  </TooltipKeybind>
+                </Show>

                <div class="hidden md:flex items-center gap-1 shrink-0">
                  <TooltipKeybind
@ -451,6 +463,7 @@ export function SessionHeader() {
                    </Button>
                  </TooltipKeybind>

+                  <Show when={tree()}>
                    <TooltipKeybind
                      title={language.t("command.fileTree.toggle")}
                      keybind={command.keybind("fileTree.toggle")}
@ -475,6 +488,7 @@ export function SessionHeader() {
                        </div>
                      </Button>
                    </TooltipKeybind>
+                  </Show>
                </div>
              </div>
            </div>
--- a/packages/app/src/components/settings-general.tsx
+++ b/packages/app/src/components/settings-general.tsx
@ -106,6 +106,7 @@ export const SettingsGeneral: Component = () => {

    permission.disableAutoAccept(params.id, value)
  }
+  const desktop = createMemo(() => platform.platform === "desktop")

  const check = () => {
    if (!platform.checkUpdate) return
@ -279,6 +280,74 @@ export const SettingsGeneral: Component = () => {
    </div>
  )

+  const AdvancedSection = () => (
+    <div class="flex flex-col gap-1">
+      <h3 class="text-14-medium text-text-strong pb-2">{language.t("settings.general.section.advanced")}</h3>
+
+      <SettingsList>
+        <SettingsRow
+          title={language.t("settings.general.row.showFileTree.title")}
+          description={language.t("settings.general.row.showFileTree.description")}
+        >
+          <div data-action="settings-show-file-tree">
+            <Switch
+              checked={settings.general.showFileTree()}
+              onChange={(checked) => settings.general.setShowFileTree(checked)}
+            />
+          </div>
+        </SettingsRow>
+
+        <SettingsRow
+          title={language.t("settings.general.row.showNavigation.title")}
+          description={language.t("settings.general.row.showNavigation.description")}
+        >
+          <div data-action="settings-show-navigation">
+            <Switch
+              checked={settings.general.showNavigation()}
+              onChange={(checked) => settings.general.setShowNavigation(checked)}
+            />
+          </div>
+        </SettingsRow>
+
+        <SettingsRow
+          title={language.t("settings.general.row.showSearch.title")}
+          description={language.t("settings.general.row.showSearch.description")}
+        >
+          <div data-action="settings-show-search">
+            <Switch
+              checked={settings.general.showSearch()}
+              onChange={(checked) => settings.general.setShowSearch(checked)}
+            />
+          </div>
+        </SettingsRow>
+
+        <SettingsRow
+          title={language.t("settings.general.row.showTerminal.title")}
+          description={language.t("settings.general.row.showTerminal.description")}
+        >
+          <div data-action="settings-show-terminal">
+            <Switch
+              checked={settings.general.showTerminal()}
+              onChange={(checked) => settings.general.setShowTerminal(checked)}
+            />
+          </div>
+        </SettingsRow>
+
+        <SettingsRow
+          title={language.t("settings.general.row.showStatus.title")}
+          description={language.t("settings.general.row.showStatus.description")}
+        >
+          <div data-action="settings-show-status">
+            <Switch
+              checked={settings.general.showStatus()}
+              onChange={(checked) => settings.general.setShowStatus(checked)}
+            />
+          </div>
+        </SettingsRow>
+      </SettingsList>
+    </div>
+  )
+
  const AppearanceSection = () => (
    <div class="flex flex-col gap-1">
      <h3 class="text-14-medium text-text-strong pb-2">{language.t("settings.general.section.appearance")}</h3>
@ -609,6 +678,10 @@ export const SettingsGeneral: Component = () => {
            )
          }}
        </Show>
+
+        <Show when={desktop()}>
+          <AdvancedSection />
+        </Show>
      </div>
    </div>
  )
--- a/packages/app/src/components/titlebar.tsx
+++ b/packages/app/src/components/titlebar.tsx
@ -11,6 +11,7 @@ import { useLayout } from "@/context/layout"
 import { usePlatform } from "@/context/platform"
 import { useCommand } from "@/context/command"
 import { useLanguage } from "@/context/language"
+import { useSettings } from "@/context/settings"
 import { applyPath, backPath, forwardPath } from "./titlebar-history"

 type TauriDesktopWindow = {
@ -40,6 +41,7 @@ export function Titlebar() {
  const platform = usePlatform()
  const command = useCommand()
  const language = useLanguage()
+  const settings = useSettings()
  const theme = useTheme()
  const navigate = useNavigate()
  const location = useLocation()
@ -78,6 +80,7 @@ export function Titlebar() {
  const canBack = createMemo(() => history.index > 0)
  const canForward = createMemo(() => history.index < history.stack.length - 1)
  const hasProjects = createMemo(() => layout.projects.list().length > 0)
+  const nav = createMemo(() => platform.platform !== "desktop" || settings.general.showNavigation())

  const back = () => {
    const next = backPath(history)
@ -252,7 +255,7 @@ export function Titlebar() {
                </div>
              </div>
            </Show>
-            <Show when={hasProjects()}>
+            <Show when={hasProjects() && nav()}>
              <div
                class="flex items-center gap-0 transition-transform"
                classList={{
--- a/packages/app/src/context/settings.tsx
+++ b/packages/app/src/context/settings.tsx
@ -23,6 +23,11 @@ export interface Settings {
    autoSave: boolean
    releaseNotes: boolean
    followup: "queue" | "steer"
+    showFileTree: boolean
+    showNavigation: boolean
+    showSearch: boolean
+    showStatus: boolean
+    showTerminal: boolean
    showReasoningSummaries: boolean
    shellToolPartsExpanded: boolean
    editToolPartsExpanded: boolean
@ -89,6 +94,11 @@ const defaultSettings: Settings = {
    autoSave: true,
    releaseNotes: true,
    followup: "steer",
+    showFileTree: false,
+    showNavigation: false,
+    showSearch: false,
+    showStatus: false,
+    showTerminal: false,
    showReasoningSummaries: false,
    shellToolPartsExpanded: false,
    editToolPartsExpanded: false,
@ -162,6 +172,26 @@ export const { use: useSettings, provider: SettingsProvider } = createSimpleCont
        setFollowup(value: "queue" | "steer") {
          setStore("general", "followup", value === "queue" ? "steer" : value)
        },
+        showFileTree: withFallback(() => store.general?.showFileTree, defaultSettings.general.showFileTree),
+        setShowFileTree(value: boolean) {
+          setStore("general", "showFileTree", value)
+        },
+        showNavigation: withFallback(() => store.general?.showNavigation, defaultSettings.general.showNavigation),
+        setShowNavigation(value: boolean) {
+          setStore("general", "showNavigation", value)
+        },
+        showSearch: withFallback(() => store.general?.showSearch, defaultSettings.general.showSearch),
+        setShowSearch(value: boolean) {
+          setStore("general", "showSearch", value)
+        },
+        showStatus: withFallback(() => store.general?.showStatus, defaultSettings.general.showStatus),
+        setShowStatus(value: boolean) {
+          setStore("general", "showStatus", value)
+        },
+        showTerminal: withFallback(() => store.general?.showTerminal, defaultSettings.general.showTerminal),
+        setShowTerminal(value: boolean) {
+          setStore("general", "showTerminal", value)
+        },
        showReasoningSummaries: withFallback(
          () => store.general?.showReasoningSummaries,
          defaultSettings.general.showReasoningSummaries,
--- a/packages/app/src/i18n/en.ts
+++ b/packages/app/src/i18n/en.ts
@ -719,6 +719,7 @@ export const dict = {
  "settings.desktop.wsl.description": "Run the OpenCode server inside WSL on Windows.",

  "settings.general.section.appearance": "Appearance",
+  "settings.general.section.advanced": "Advanced",
  "settings.general.section.notifications": "System notifications",
  "settings.general.section.updates": "Updates",
  "settings.general.section.sounds": "Sound effects",
@ -741,6 +742,16 @@ export const dict = {
  "settings.general.row.followup.description": "Choose whether follow-up prompts steer immediately or wait in a queue",
  "settings.general.row.followup.option.queue": "Queue",
  "settings.general.row.followup.option.steer": "Steer",
+  "settings.general.row.showFileTree.title": "File tree",
+  "settings.general.row.showFileTree.description": "Show the file tree toggle and panel in desktop sessions",
+  "settings.general.row.showNavigation.title": "Navigation controls",
+  "settings.general.row.showNavigation.description": "Show the back and forward buttons in the desktop title bar",
+  "settings.general.row.showSearch.title": "Command palette",
+  "settings.general.row.showSearch.description": "Show the search and command palette button in the desktop title bar",
+  "settings.general.row.showTerminal.title": "Terminal",
+  "settings.general.row.showTerminal.description": "Show the terminal button in the desktop title bar",
+  "settings.general.row.showStatus.title": "Server status",
+  "settings.general.row.showStatus.description": "Show the server status button in the desktop title bar",
  "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",
--- a/packages/app/src/pages/session/session-side-panel.tsx
+++ b/packages/app/src/pages/session/session-side-panel.tsx
@ -19,6 +19,8 @@ import { useCommand } from "@/context/command"
 import { useFile, type SelectedLineRange } from "@/context/file"
 import { useLanguage } from "@/context/language"
 import { useLayout } from "@/context/layout"
+import { usePlatform } from "@/context/platform"
+import { useSettings } from "@/context/settings"
 import { createFileTabListSync } from "@/pages/session/file-tab-scroll"
 import { FileTabContent } from "@/pages/session/file-tabs"
 import { createOpenSessionFileTab, createSessionTabs, getTabReorderIndex, type Sizing } from "@/pages/session/helpers"
@ -39,6 +41,8 @@ export function SessionSidePanel(props: {
  size: Sizing
 }) {
  const layout = useLayout()
+  const platform = usePlatform()
+  const settings = useSettings()
  const file = useFile()
  const language = useLanguage()
  const command = useCommand()
@ -46,9 +50,10 @@ export function SessionSidePanel(props: {
  const { sessionKey, tabs, view } = useSessionLayout()

  const isDesktop = createMediaQuery("(min-width: 768px)")
+  const shown = createMemo(() => platform.platform !== "desktop" || settings.general.showFileTree())

  const reviewOpen = createMemo(() => isDesktop() && view().reviewPanel.opened())
-  const fileOpen = createMemo(() => isDesktop() && layout.fileTree.opened())
+  const fileOpen = createMemo(() => isDesktop() && shown() && layout.fileTree.opened())
  const open = createMemo(() => reviewOpen() || fileOpen())
  const reviewTab = createMemo(() => isDesktop())
  const panelWidth = createMemo(() => {
@ -341,6 +346,7 @@ export function SessionSidePanel(props: {
            </div>
          </div>

+          <Show when={shown()}>
            <div
              id="file-tree-panel"
              aria-hidden={!fileOpen()}
@ -433,6 +439,7 @@ export function SessionSidePanel(props: {
                </div>
              </Show>
            </div>
+          </Show>
        </div>
      </aside>
    </Show>
--- a/packages/app/src/pages/session/use-session-commands.tsx
+++ b/packages/app/src/pages/session/use-session-commands.tsx
@ -7,8 +7,10 @@ import { useLanguage } from "@/context/language"
 import { useLayout } from "@/context/layout"
 import { useLocal } from "@/context/local"
 import { usePermission } from "@/context/permission"
+import { usePlatform } from "@/context/platform"
 import { usePrompt } from "@/context/prompt"
 import { useSDK } from "@/context/sdk"
+import { useSettings } from "@/context/settings"
 import { useSync } from "@/context/sync"
 import { useTerminal } from "@/context/terminal"
 import { showToast } from "@opencode-ai/ui/toast"
@ -39,8 +41,10 @@ export const useSessionCommands = (actions: SessionCommandContext) => {
  const language = useLanguage()
  const local = useLocal()
  const permission = usePermission()
+  const platform = usePlatform()
  const prompt = usePrompt()
  const sdk = useSDK()
+  const settings = useSettings()
  const sync = useSync()
  const terminal = useTerminal()
  const layout = useLayout()
@ -66,6 +70,7 @@ export const useSessionCommands = (actions: SessionCommandContext) => {
  })
  const activeFileTab = tabState.activeFileTab
  const closableTab = tabState.closableTab
+  const shown = () => platform.platform !== "desktop" || settings.general.showFileTree()

  const idle = { type: "idle" as const }
  const status = () => sync.data.session_status[params.id ?? ""] ?? idle
@ -457,12 +462,16 @@ export const useSessionCommands = (actions: SessionCommandContext) => {
      keybind: "mod+shift+r",
      onSelect: () => view().reviewPanel.toggle(),
    }),
+    ...(shown()
+      ? [
          viewCommand({
            id: "fileTree.toggle",
            title: language.t("command.fileTree.toggle"),
            keybind: "mod+\\",
            onSelect: () => layout.fileTree.toggle(),
          }),
+        ]
+      : []),
    viewCommand({
      id: "input.focus",
      title: language.t("command.input.focus"),