refactor: use Keybind component in titlebar search button

1 files changed, 2 insertions, 10 deletions

diff --git a/packages/app/src/components/session/session-header.tsx b/packages/app/src/components/session/session-header.tsx
index 4b083771f..cf49734b7 100644
--- a/packages/app/src/components/session/session-header.tsx
+++ b/packages/app/src/components/session/session-header.tsx
@@ -16,6 +16,7 @@ import { Button } from "@opencode-ai/ui/button"
 import { Tooltip, TooltipKeybind } from "@opencode-ai/ui/tooltip"
 import { Popover } from "@opencode-ai/ui/popover"
 import { TextField } from "@opencode-ai/ui/text-field"
+import { Keybind } from "@opencode-ai/ui/keybind"
 
 export function SessionHeader() {
   const globalSDK = useGlobalSDK()
@@ -64,16 +65,7 @@ export function SessionHeader() {
                 </span>
               </div>
 
-              <Show when={hotkey()}>
-                {(keybind) => (
-                  <span
-                    class="shrink-0 flex items-center justify-center h-5 px-2 rounded-[2px] bg-surface-base text-12-medium text-text-weak"
-                    style={{ "box-shadow": "var(--shadow-xxs-border)" }}
-                  >
-                    {keybind()}
-                  </span>
-                )}
-              </Show>
+              <Show when={hotkey()}>{(keybind) => <Keybind>{keybind()}</Keybind>}</Show>
             </button>
           </Portal>
         )}