feat(desktop): standardize desktop layout icons (#9685)

This commit is contained in:
Jacob Bahn
2026-01-20 18:34:33 -08:00
committed by GitHub
parent 6793b4a6fd
commit 65d9e829e7
2 changed files with 20 additions and 9 deletions

View File

@@ -194,18 +194,18 @@ export function SessionHeader() {
> >
<div class="relative flex items-center justify-center size-4 [&>*]:absolute [&>*]:inset-0"> <div class="relative flex items-center justify-center size-4 [&>*]:absolute [&>*]:inset-0">
<Icon <Icon
name={view().reviewPanel.opened() ? "layout-right" : "layout-left"}
size="small" size="small"
name={view().reviewPanel.opened() ? "layout-right-full" : "layout-right"}
class="group-hover/review-toggle:hidden" class="group-hover/review-toggle:hidden"
/> />
<Icon <Icon
name={view().reviewPanel.opened() ? "layout-right-partial" : "layout-left-partial"}
size="small" size="small"
name="layout-right-partial"
class="hidden group-hover/review-toggle:inline-block" class="hidden group-hover/review-toggle:inline-block"
/> />
<Icon <Icon
name={view().reviewPanel.opened() ? "layout-right-full" : "layout-left-full"}
size="small" size="small"
name={view().reviewPanel.opened() ? "layout-right" : "layout-right-full"}
class="hidden group-active/review-toggle:inline-block" class="hidden group-active/review-toggle:inline-block"
/> />
</div> </div>

View File

@@ -1,5 +1,7 @@
import { createEffect, createMemo, Show } from "solid-js" import { createEffect, createMemo, Show } from "solid-js"
import { IconButton } from "@opencode-ai/ui/icon-button" import { IconButton } from "@opencode-ai/ui/icon-button"
import { Icon } from "@opencode-ai/ui/icon"
import { Button } from "@opencode-ai/ui/button"
import { TooltipKeybind } from "@opencode-ai/ui/tooltip" import { TooltipKeybind } from "@opencode-ai/ui/tooltip"
import { useTheme } from "@opencode-ai/ui/theme" import { useTheme } from "@opencode-ai/ui/theme"
@@ -98,12 +100,21 @@ export function Titlebar() {
title={language.t("command.sidebar.toggle")} title={language.t("command.sidebar.toggle")}
keybind={command.keybind("sidebar.toggle")} keybind={command.keybind("sidebar.toggle")}
> >
<IconButton <Button variant="ghost" class="group/sidebar-toggle size-6 p-0" onClick={layout.sidebar.toggle}>
icon={layout.sidebar.opened() ? "layout-left" : "layout-right"} <div class="relative flex items-center justify-center size-4 [&>*]:absolute [&>*]:inset-0">
variant="ghost" <Icon
class="size-8 rounded-md" size="small"
onClick={layout.sidebar.toggle} name={layout.sidebar.opened() ? "layout-left-full" : "layout-left"}
/> class="group-hover/sidebar-toggle:hidden"
/>
<Icon size="small" name="layout-left-partial" class="hidden group-hover/sidebar-toggle:inline-block" />
<Icon
size="small"
name={layout.sidebar.opened() ? "layout-left" : "layout-left-full"}
class="hidden group-active/sidebar-toggle:inline-block"
/>
</div>
</Button>
</TooltipKeybind> </TooltipKeybind>
<div id="opencode-titlebar-left" class="flex items-center gap-3 min-w-0 px-2" /> <div id="opencode-titlebar-left" class="flex items-center gap-3 min-w-0 px-2" />
<div class="flex-1 h-full" data-tauri-drag-region /> <div class="flex-1 h-full" data-tauri-drag-region />