diff options
Diffstat (limited to 'packages/app/src/components')
| -rw-r--r-- | packages/app/src/components/session/session-header.tsx | 105 | ||||
| -rw-r--r-- | packages/app/src/components/settings-general.tsx | 74 | ||||
| -rw-r--r-- | packages/app/src/components/titlebar.tsx | 8 |
3 files changed, 140 insertions, 47 deletions
diff --git a/packages/app/src/components/session/session-header.tsx b/packages/app/src/components/session/session-header.tsx index 7acfdfc37..021e5be67 100644 --- a/packages/app/src/components/session/session-header.tsx +++ b/packages/app/src/components/session/session-header.tsx @@ -8,7 +8,7 @@ import { Spinner } from "@opencode-ai/ui/spinner" import { showToast } from "@opencode-ai/ui/toast" import { Tooltip, TooltipKeybind } from "@opencode-ai/ui/tooltip" import { getFilename } from "@opencode-ai/shared/util/path" -import { createEffect, createMemo, For, Show } from "solid-js" +import { createEffect, createMemo, createSignal, For, onMount, Show } from "solid-js" import { createStore } from "solid-js/store" import { Portal } from "solid-js/web" import { useCommand } from "@/context/command" @@ -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,11 @@ export function SessionHeader() { }) const hotkey = createMemo(() => command.keybind("file.open")) const os = createMemo(() => detectOS(platform)) + const isDesktopBeta = platform.platform === "desktop" && import.meta.env.VITE_OPENCODE_CHANNEL === "beta" + const search = createMemo(() => !isDesktopBeta || settings.general.showSearch()) + const tree = createMemo(() => !isDesktopBeta || settings.general.showFileTree()) + const term = createMemo(() => !isDesktopBeta || settings.general.showTerminal()) + const status = createMemo(() => !isDesktopBeta || settings.general.showStatus()) const [exists, setExists] = createStore<Partial<Record<OpenApp, boolean>>>({ finder: true, @@ -262,12 +269,16 @@ export function SessionHeader() { .catch((err: unknown) => showRequestError(language, err)) } - const centerMount = createMemo(() => document.getElementById("opencode-titlebar-center")) - const rightMount = createMemo(() => document.getElementById("opencode-titlebar-right")) + const [centerMount, setCenterMount] = createSignal<HTMLElement | null>(null) + const [rightMount, setRightMount] = createSignal<HTMLElement | null>(null) + onMount(() => { + setCenterMount(document.getElementById("opencode-titlebar-center")) + setRightMount(document.getElementById("opencode-titlebar-right")) + }) return ( <> - <Show when={centerMount()}> + <Show when={search() && centerMount()}> {(mount) => ( <Portal mount={mount()}> <Button @@ -415,24 +426,28 @@ export function SessionHeader() { </div> </Show> <div class="flex items-center gap-1"> - <Tooltip placement="bottom" value={language.t("status.popover.trigger")}> - <StatusPopover /> - </Tooltip> - <TooltipKeybind - title={language.t("command.terminal.toggle")} - keybind={command.keybind("terminal.toggle")} - > - <Button - variant="ghost" - class="group/terminal-toggle titlebar-icon w-8 h-6 p-0 box-border shrink-0" - onClick={toggleTerminal} - aria-label={language.t("command.terminal.toggle")} - aria-expanded={view().terminal.opened()} - aria-controls="terminal-panel" + <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")} > - <Icon size="small" name={view().terminal.opened() ? "terminal-active" : "terminal"} /> - </Button> - </TooltipKeybind> + <Button + variant="ghost" + class="group/terminal-toggle titlebar-icon w-8 h-6 p-0 box-border shrink-0" + onClick={toggleTerminal} + aria-label={language.t("command.terminal.toggle")} + aria-expanded={view().terminal.opened()} + aria-controls="terminal-panel" + > + <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,30 +466,32 @@ export function SessionHeader() { </Button> </TooltipKeybind> - <TooltipKeybind - title={language.t("command.fileTree.toggle")} - keybind={command.keybind("fileTree.toggle")} - > - <Button - variant="ghost" - class="titlebar-icon w-8 h-6 p-0 box-border" - onClick={() => layout.fileTree.toggle()} - aria-label={language.t("command.fileTree.toggle")} - aria-expanded={layout.fileTree.opened()} - aria-controls="file-tree-panel" + <Show when={tree()}> + <TooltipKeybind + title={language.t("command.fileTree.toggle")} + keybind={command.keybind("fileTree.toggle")} > - <div class="relative flex items-center justify-center size-4"> - <Icon - size="small" - name={layout.fileTree.opened() ? "file-tree-active" : "file-tree"} - classList={{ - "text-icon-strong": layout.fileTree.opened(), - "text-icon-weak": !layout.fileTree.opened(), - }} - /> - </div> - </Button> - </TooltipKeybind> + <Button + variant="ghost" + class="titlebar-icon w-8 h-6 p-0 box-border" + onClick={() => layout.fileTree.toggle()} + aria-label={language.t("command.fileTree.toggle")} + aria-expanded={layout.fileTree.opened()} + aria-controls="file-tree-panel" + > + <div class="relative flex items-center justify-center size-4"> + <Icon + size="small" + name={layout.fileTree.opened() ? "file-tree-active" : "file-tree"} + classList={{ + "text-icon-strong": layout.fileTree.opened(), + "text-icon-weak": !layout.fileTree.opened(), + }} + /> + </div> + </Button> + </TooltipKeybind> + </Show> </div> </div> </div> diff --git a/packages/app/src/components/settings-general.tsx b/packages/app/src/components/settings-general.tsx index b4ac061df..c380fb69b 100644 --- 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> @@ -527,6 +596,7 @@ export const SettingsGeneral: Component = () => { </div> ) + console.log(import.meta.env) return ( <div class="flex flex-col h-full overflow-y-auto no-scrollbar px-4 pb-10 sm:px-10 sm:pb-10"> <div class="sticky top-0 z-10 bg-[linear-gradient(to_bottom,var(--surface-stronger-non-alpha)_calc(100%_-_24px),transparent)]"> @@ -609,6 +679,10 @@ export const SettingsGeneral: Component = () => { ) }} </Show> + + <Show when={desktop() && import.meta.env.VITE_OPENCODE_CHANNEL === "beta"}> + <AdvancedSection /> + </Show> </div> </div> ) diff --git a/packages/app/src/components/titlebar.tsx b/packages/app/src/components/titlebar.tsx index b7edb85ed..409fcbeff 100644 --- 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(() => import.meta.env.VITE_OPENCODE_CHANNEL !== "beta" || settings.general.showNavigation()) const back = () => { const next = backPath(history) @@ -255,13 +258,12 @@ export function Titlebar() { <div class="flex items-center shrink-0" classList={{ - "translate-x-0": !layout.sidebar.opened(), - "-translate-x-[36px]": layout.sidebar.opened(), + "-translate-x-[36px]": layout.sidebar.opened() && !!params.dir, "duration-180 ease-out": !layout.sidebar.opened(), "duration-180 ease-in": layout.sidebar.opened(), }} > - <Show when={hasProjects()}> + <Show when={hasProjects() && nav()}> <div class="flex items-center gap-0 transition-transform"> <Tooltip placement="bottom" value={language.t("common.goBack")} openDelay={2000}> <Button |