Răsfoiți Sursa

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

Jacob Bahn 2 luni în urmă
părinte
comite
65d9e829e7

+ 3 - 3
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>

+ 17 - 6
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 />