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 6f3fd70a..7916766d 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" @@ -166,11 +165,17 @@ const SessionSidebar: Component = (props) => ( - + Boolean(shortcut))} + separator=" " + showDescription={false} + /> )} 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 [] 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}}