From 338e3d9d385480cfcb41668d1ca789c47a976fd0 Mon Sep 17 00:00:00 2001 From: Shantur Rathore Date: Fri, 13 Feb 2026 09:21:24 +0000 Subject: [PATCH 1/3] fix(ui): hide keyboard hints on phone layout --- .../instance/shell/SessionSidebar.tsx | 24 +++++++++++-------- 1 file changed, 14 insertions(+), 10 deletions(-) diff --git a/packages/ui/src/components/instance/shell/SessionSidebar.tsx b/packages/ui/src/components/instance/shell/SessionSidebar.tsx index 6f3fd70a..9e745fc3 100644 --- a/packages/ui/src/components/instance/shell/SessionSidebar.tsx +++ b/packages/ui/src/components/instance/shell/SessionSidebar.tsx @@ -119,11 +119,13 @@ const SessionSidebar: Component = (props) => ( -
- - - -
+ +
+ + + +
+
@@ -166,11 +168,13 @@ const SessionSidebar: Component = (props) => ( - + + +
)} From 3678214e69dc997a06406ea65a5597fbcad4f34b Mon Sep 17 00:00:00 2001 From: Shantur Rathore Date: Fri, 13 Feb 2026 09:54:46 +0000 Subject: [PATCH 2/3] fix(ui): hide keyboard hints on non-desktop --- packages/ui/src/components/hint-row.tsx | 7 +++- .../instance/shell/SessionSidebar.tsx | 34 +++++++++++-------- packages/ui/src/components/keyboard-hint.tsx | 16 ++++++--- 3 files changed, 37 insertions(+), 20 deletions(-) diff --git a/packages/ui/src/components/hint-row.tsx b/packages/ui/src/components/hint-row.tsx index 40d3745c..af3829b3 100644 --- a/packages/ui/src/components/hint-row.tsx +++ b/packages/ui/src/components/hint-row.tsx @@ -3,10 +3,15 @@ import { Component, JSX } from "solid-js" interface HintRowProps { children: JSX.Element class?: string + ariaHidden?: boolean } const HintRow: Component = (props) => { - return {props.children} + return ( + + {props.children} + + ) } export default HintRow diff --git a/packages/ui/src/components/instance/shell/SessionSidebar.tsx b/packages/ui/src/components/instance/shell/SessionSidebar.tsx index 9e745fc3..7c846b40 100644 --- a/packages/ui/src/components/instance/shell/SessionSidebar.tsx +++ b/packages/ui/src/components/instance/shell/SessionSidebar.tsx @@ -1,7 +1,7 @@ import { Show, type Accessor, type Component } from "solid-js" import type { SessionThread } from "../../../stores/session-state" import type { Session } from "../../../types/session" -import type { KeyboardShortcut } from "../../../lib/keyboard-registry" +import { keyboardRegistry, type KeyboardShortcut } from "../../../lib/keyboard-registry" import type { DrawerViewState } from "./types" import { PlusSquare, Search } from "lucide-solid" @@ -13,7 +13,6 @@ import InfoOutlinedIcon from "@suid/icons-material/InfoOutlined" import SessionList from "../../session-list" import KeyboardHint from "../../keyboard-hint" -import Kbd from "../../kbd" import WorktreeSelector from "../../worktree-selector" import AgentSelector from "../../agent-selector" import ModelSelector from "../../model-selector" @@ -119,12 +118,13 @@ const SessionSidebar: Component = (props) => ( - -
- - - -
+ + @@ -168,13 +168,17 @@ const SessionSidebar: Component = (props) => ( - - - + Boolean(shortcut))} + separator=" " + showDescription={false} + /> )} diff --git a/packages/ui/src/components/keyboard-hint.tsx b/packages/ui/src/components/keyboard-hint.tsx index f68e6de4..1176550f 100644 --- a/packages/ui/src/components/keyboard-hint.tsx +++ b/packages/ui/src/components/keyboard-hint.tsx @@ -1,14 +1,20 @@ import { Component, For } from "solid-js" -import { formatShortcut, isMac } from "../lib/keyboard-utils" +import useMediaQuery from "@suid/material/useMediaQuery" import type { KeyboardShortcut } from "../lib/keyboard-registry" import Kbd from "./kbd" import HintRow from "./hint-row" const KeyboardHint: Component<{ shortcuts: KeyboardShortcut[] - separator?: string + separator?: string | null showDescription?: boolean + class?: string + ariaHidden?: boolean }> = (props) => { + // Centralize layout gating here so call sites don't need to. + // We only show keyboard hint UI on desktop layouts. + const desktopQuery = useMediaQuery("(min-width: 1280px)") + function buildShortcutString(shortcut: KeyboardShortcut): string { const parts: string[] = [] @@ -26,12 +32,14 @@ const KeyboardHint: Component<{ return parts.join("+") } + if (!desktopQuery()) return null + return ( - + {(shortcut, i) => ( <> - {i() > 0 && {props.separator || "•"}} + {i() > 0 && props.separator !== null && {props.separator ?? "•"}} {props.showDescription !== false && {shortcut.description}} From 36baac06b81f53ac182e0909b0a8e7c2bc2f0215 Mon Sep 17 00:00:00 2001 From: Shantur Rathore Date: Fri, 13 Feb 2026 10:02:15 +0000 Subject: [PATCH 3/3] fix(ui): hide kbd hints on non-desktop --- .../components/instance/shell/SessionSidebar.tsx | 13 +++++-------- packages/ui/src/components/kbd.tsx | 4 ++++ 2 files changed, 9 insertions(+), 8 deletions(-) diff --git a/packages/ui/src/components/instance/shell/SessionSidebar.tsx b/packages/ui/src/components/instance/shell/SessionSidebar.tsx index 7c846b40..7916766d 100644 --- a/packages/ui/src/components/instance/shell/SessionSidebar.tsx +++ b/packages/ui/src/components/instance/shell/SessionSidebar.tsx @@ -118,14 +118,11 @@ const SessionSidebar: Component = (props) => ( - - - +
+ + + +
diff --git a/packages/ui/src/components/kbd.tsx b/packages/ui/src/components/kbd.tsx index d5b9c977..b9869111 100644 --- a/packages/ui/src/components/kbd.tsx +++ b/packages/ui/src/components/kbd.tsx @@ -1,4 +1,5 @@ import { Component, JSX, For } from "solid-js" +import useMediaQuery from "@suid/material/useMediaQuery" import { isMac } from "../lib/keyboard-utils" interface KbdProps { @@ -27,6 +28,9 @@ const SPECIAL_KEY_LABELS: Record = { } const Kbd: Component = (props) => { + const desktopQuery = useMediaQuery("(min-width: 1280px)") + if (!desktopQuery()) return null + const parts = () => { if (props.children) return [{ text: props.children, isModifier: false }] if (!props.shortcut) return []