From 003ed8bb66069ec92e1d98e8a8fc067c5a35596f Mon Sep 17 00:00:00 2001
From: Jacob Bahn <64383055+jacobabahn@users.noreply.github.com>
Date: Tue, 20 Jan 2026 18:34:33 -0800
Subject: [PATCH] feat(desktop): standardize desktop layout icons (#9685)

---
 .../src/components/session/session-header.tsx |  6 ++---
 packages/app/src/components/titlebar.tsx      | 23 ++++++++++++++-----
 2 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/packages/app/src/components/session/session-header.tsx b/packages/app/src/components/session/session-header.tsx
index 6d6287bd2b..0fc8828fd2 100644
--- a/packages/app/src/components/session/session-header.tsx
+++ b/packages/app/src/components/session/session-header.tsx
@@ -194,18 +194,18 @@ export function SessionHeader() {
                     >
                       <div class="relative flex items-center justify-center size-4 [&>*]:absolute [&>*]:inset-0">
                         <Icon
-                          name={view().reviewPanel.opened() ? "layout-right" : "layout-left"}
                           size="small"
+                          name={view().reviewPanel.opened() ? "layout-right-full" : "layout-right"}
                           class="group-hover/review-toggle:hidden"
                         />
                         <Icon
-                          name={view().reviewPanel.opened() ? "layout-right-partial" : "layout-left-partial"}
                           size="small"
+                          name="layout-right-partial"
                           class="hidden group-hover/review-toggle:inline-block"
                         />
                         <Icon
-                          name={view().reviewPanel.opened() ? "layout-right-full" : "layout-left-full"}
                           size="small"
+                          name={view().reviewPanel.opened() ? "layout-right" : "layout-right-full"}
                           class="hidden group-active/review-toggle:inline-block"
                         />
                       </div>
diff --git a/packages/app/src/components/titlebar.tsx b/packages/app/src/components/titlebar.tsx
index 2f348e2cf2..d0d27e99f6 100644
--- a/packages/app/src/components/titlebar.tsx
+++ b/packages/app/src/components/titlebar.tsx
@@ -1,5 +1,7 @@
 import { createEffect, createMemo, Show } from "solid-js"
 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 { useTheme } from "@opencode-ai/ui/theme"
 
@@ -98,12 +100,21 @@ export function Titlebar() {
           title={language.t("command.sidebar.toggle")}
           keybind={command.keybind("sidebar.toggle")}
         >
-          <IconButton
-            icon={layout.sidebar.opened() ? "layout-left" : "layout-right"}
-            variant="ghost"
-            class="size-8 rounded-md"
-            onClick={layout.sidebar.toggle}
-          />
+          <Button variant="ghost" class="group/sidebar-toggle size-6 p-0" onClick={layout.sidebar.toggle}>
+            <div class="relative flex items-center justify-center size-4 [&>*]:absolute [&>*]:inset-0">
+              <Icon
+                size="small"
+                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>
         <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 />