Merge pull request #170 from NeuralNomadsAI/codenomad/issue-153

Fix: hide keyboard shortcut hints in WebUI + add toggle
2026-02-15 09:24:30 +00:00
parent e9f281a69d c7195469bd
commit 35ff359c0f
22 changed files with 120 additions and 15 deletions
--- a/packages/ui/src/App.tsx
+++ b/packages/ui/src/App.tsx
@@ -60,6 +60,7 @@ const App: Component = () => {
    preferences,
    recordWorkspaceLaunch,
    toggleShowThinkingBlocks,
+    toggleKeyboardShortcutHints,
    toggleShowTimelineTools,
    toggleAutoCleanupBlankSessions,
    toggleUsageMetrics,
@@ -80,6 +81,13 @@ const App: Component = () => {
  const [remoteAccessOpen, setRemoteAccessOpen] = createSignal(false)
  const [instanceTabBarHeight, setInstanceTabBarHeight] = createSignal(0)

+  createEffect(() => {
+    if (typeof document === "undefined") return
+    const shouldShow =
+      runtimeEnv.host !== "web" && runtimeEnv.platform !== "mobile" && (preferences().showKeyboardShortcutHints ?? true)
+    document.documentElement.dataset.keyboardHints = shouldShow ? "show" : "hide"
+  })
+
  const updateInstanceTabBarHeight = () => {
    if (typeof document === "undefined") return
    const element = document.querySelector<HTMLElement>(".tab-bar-instance")
@@ -293,6 +301,7 @@ const App: Component = () => {
    preferences,
    toggleAutoCleanupBlankSessions,
    toggleShowThinkingBlocks,
+    toggleKeyboardShortcutHints,
    toggleShowTimelineTools,
    toggleUsageMetrics,
    togglePromptSubmitOnEnter,
--- a/packages/ui/src/components/command-palette.tsx
+++ b/packages/ui/src/components/command-palette.tsx
@@ -112,6 +112,10 @@ const CommandPalette: Component<CommandPaletteProps> = (props) => {

  const groupedCommandList = () => processedCommands().groups
  const orderedCommands = () => processedCommands().ordered
+
+  const isCommandDisabled = (command: Command) => {
+    return command.disabled ? Boolean(resolveResolvable(command.disabled)) : false
+  }
  const selectedIndex = createMemo(() => {
    const ordered = orderedCommands()
    if (ordered.length === 0) return -1
@@ -138,10 +142,11 @@ const CommandPalette: Component<CommandPaletteProps> = (props) => {
      }
      return
    }
- 
+
    const currentId = selectedCommandId()
    if (!currentId || !ordered.some((cmd) => cmd.id === currentId)) {
-      setSelectedCommandId(ordered[0].id)
+      const firstEnabled = ordered.find((cmd) => !isCommandDisabled(cmd))
+      setSelectedCommandId((firstEnabled || ordered[0])?.id ?? null)
    }
  })

@@ -195,12 +200,14 @@ const CommandPalette: Component<CommandPaletteProps> = (props) => {
      if (index < 0 || index >= ordered.length) return
      const command = ordered[index]
      if (!command) return
+      if (isCommandDisabled(command)) return
      props.onExecute(command)
      props.onClose()
    }
  }

  function handleCommandClick(command: Command) {
+    if (isCommandDisabled(command)) return
    props.onExecute(command)
    props.onClose()
  }
@@ -265,11 +272,13 @@ const CommandPalette: Component<CommandPaletteProps> = (props) => {
                      <For each={group.commands}>
                        {(command, localIndex) => {
                          const commandIndex = group.startIndex + localIndex()
+                          const disabled = isCommandDisabled(command)
                          return (
                            <button
                              type="button"
                              data-command-index={commandIndex}
                              onClick={() => handleCommandClick(command)}
+                              disabled={disabled}
                              class={`modal-item ${selectedCommandId() === command.id ? "modal-item-highlight" : ""}`}
                              onPointerMove={(event) => {
                                if (event.movementX === 0 && event.movementY === 0) return
--- a/packages/ui/src/components/filesystem-browser-dialog.tsx
+++ b/packages/ui/src/components/filesystem-browser-dialog.tsx
@@ -431,7 +431,7 @@ const FileSystemBrowserDialog: Component<FileSystemBrowserDialogProps> = (props)
              </Show>
            </div>

-            <div class="panel-footer">
+            <div class="panel-footer keyboard-hints">
              <div class="panel-footer-hints">
                <div class="flex items-center gap-1.5">
                  <kbd class="kbd">↑</kbd>
--- a/packages/ui/src/components/folder-selection-view.tsx
+++ b/packages/ui/src/components/folder-selection-view.tsx
@@ -548,7 +548,7 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
                          : t("folderSelection.browse.button")}
                      </span>
                    </div>
-                    <Kbd shortcut="cmd+n" class="ml-2" />
+                    <Kbd shortcut="cmd+n" class="ml-2 kbd-hint" />
                  </button>
                </div>

@@ -573,7 +573,7 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {

            </div>

-            <div class="panel panel-footer shrink-0 hidden sm:block">
+            <div class="panel panel-footer shrink-0 hidden sm:block keyboard-hints">
              <div class="panel-footer-hints">
                <Show when={folders().length > 0}>
                  <div class="flex items-center gap-1.5">
@@ -591,7 +591,7 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
                  </div>
                </Show>
                <div class="flex items-center gap-1.5">
-                  <Kbd shortcut="cmd+n" />
+                  <Kbd shortcut="cmd+n" class="kbd-hint" />
                  <span>{t("folderSelection.hints.browse")}</span>
                </div>
              </div>
--- a/packages/ui/src/components/hint-row.tsx
+++ b/packages/ui/src/components/hint-row.tsx
@@ -8,7 +8,7 @@ interface HintRowProps {

 const HintRow: Component<HintRowProps> = (props) => {
  return (
-    <span aria-hidden={props.ariaHidden} class={`text-xs text-muted ${props.class || ""}`}>
+    <span aria-hidden={props.ariaHidden} class={`keyboard-hints text-xs text-muted ${props.class || ""}`}>
      {props.children}
    </span>
  )
--- a/packages/ui/src/components/instance-welcome-view.tsx
+++ b/packages/ui/src/components/instance-welcome-view.tsx
@@ -502,7 +502,7 @@ const InstanceWelcomeView: Component<InstanceWelcomeViewProps> = (props) => {
                    )}
                    <span>{t("instanceWelcome.new.createButton")}</span>
                  </div>
-                  <Kbd shortcut={newSessionShortcutString()} class="ml-2" />
+                  <Kbd shortcut={newSessionShortcutString()} class="ml-2 kbd-hint" />
                </button>
              </div>
            </div>
@@ -539,7 +539,7 @@ const InstanceWelcomeView: Component<InstanceWelcomeViewProps> = (props) => {
        </div>
      </Show>

-      <div class="panel-footer hidden sm:block">
+      <div class="panel-footer hidden sm:block keyboard-hints">

        <div class="panel-footer-hints">
          <div class="flex items-center gap-1.5">
--- a/packages/ui/src/components/instance/instance-shell2.tsx
+++ b/packages/ui/src/components/instance/instance-shell2.tsx
@@ -633,7 +633,7 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
                      >
                        {t("instanceShell.commandPalette.button")}
                      </button>
-                      <span class="connection-status-shortcut-hint">
+                      <span class="connection-status-shortcut-hint kbd-hint">
                        <Kbd shortcut="cmd+shift+p" />
                      </span>
                    </div>
@@ -730,7 +730,7 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
              </div>

              <div class="session-toolbar-right flex-1 flex items-center gap-3">
-                <span class="connection-status-shortcut-hint">
+                <span class="connection-status-shortcut-hint kbd-hint">
                  <Kbd shortcut="cmd+shift+p" />
                </span>

--- a/packages/ui/src/components/message-list-header.tsx
+++ b/packages/ui/src/components/message-list-header.tsx
@@ -62,7 +62,7 @@ export default function MessageListHeader(props: MessageListHeaderProps) {
            {t("messageListHeader.commandPalette.button")}
          </button>
          <span class="connection-status-shortcut-hint">
-            <Kbd shortcut="cmd+shift+p" />
+            <Kbd shortcut="cmd+shift+p" class="kbd-hint" />
          </span>
        </div>
      </div>
--- a/packages/ui/src/components/message-section.tsx
+++ b/packages/ui/src/components/message-section.tsx
@@ -867,7 +867,7 @@ export default function MessageSection(props: MessageSectionProps) {
                  <ul>
                    <li>
                      <span>{t("messageSection.empty.tips.commandPalette")}</span>
-                      <Kbd shortcut="cmd+shift+p" class="ml-2" />
+                      <Kbd shortcut="cmd+shift+p" class="ml-2 kbd-hint" />
                    </li>
                    <li>{t("messageSection.empty.tips.askAboutCodebase")}</li>
                    <li>
--- a/packages/ui/src/components/prompt-input.tsx
+++ b/packages/ui/src/components/prompt-input.tsx
@@ -480,7 +480,7 @@ export default function PromptInput(props: PromptInputProps) {
                </Show>
              </div>
              <Show when={shouldShowOverlay()}>
-                <div class={`prompt-input-overlay ${mode() === "shell" ? "shell-mode" : ""}`}>
+                <div class={`prompt-input-overlay keyboard-hints ${mode() === "shell" ? "shell-mode" : ""}`}>
                  <Show
                    when={props.escapeInDebounce}
                    fallback={
--- a/packages/ui/src/components/session-picker.tsx
+++ b/packages/ui/src/components/session-picker.tsx
@@ -172,7 +172,7 @@ const SessionPicker: Component<SessionPickerProps> = (props) => {
                        </span>
                      </Show>
                    </div>
-                    <kbd class="kbd ml-2">
+                    <kbd class="kbd ml-2 kbd-hint">
                      Cmd+Enter
                    </kbd>
                  </button>
--- a/packages/ui/src/lib/commands.ts
+++ b/packages/ui/src/lib/commands.ts
@@ -18,6 +18,7 @@ export interface Command {
  description: Resolvable<string>
  keywords?: Resolvable<string[]>
  shortcut?: KeyboardShortcut
+  disabled?: Resolvable<boolean>
  action: () => void | Promise<void>
  category?: Resolvable<string>
 }
--- a/packages/ui/src/lib/hooks/use-commands.ts
+++ b/packages/ui/src/lib/hooks/use-commands.ts
@@ -14,6 +14,7 @@ import { getLogger } from "../logger"
 import { requestData } from "../opencode-api"
 import { emitSessionSidebarRequest } from "../session-sidebar-events"
 import { tGlobal } from "../i18n"
+import { runtimeEnv } from "../runtime-env"

 const log = getLogger("actions")

@@ -28,6 +29,7 @@ function splitKeywords(key: string): string[] {
 export interface UseCommandsOptions {
  preferences: Accessor<Preferences>
  toggleShowThinkingBlocks: () => void
+  toggleKeyboardShortcutHints: () => void
  toggleShowTimelineTools: () => void
  toggleUsageMetrics: () => void
  toggleAutoCleanupBlankSessions: () => void
@@ -454,6 +456,26 @@ export function useCommands(options: UseCommandsOptions) {
      action: options.toggleShowTimelineTools,
    })

+    commandRegistry.register({
+      id: "keyboard-shortcut-hints",
+      label: () =>
+        tGlobal(
+          options.preferences().showKeyboardShortcutHints
+            ? "commands.keyboardShortcutHints.label.hide"
+            : "commands.keyboardShortcutHints.label.show",
+        ),
+      description: () =>
+        tGlobal(
+          runtimeEnv.host === "web"
+            ? "commands.keyboardShortcutHints.description.disabledWeb"
+            : "commands.keyboardShortcutHints.description",
+        ),
+      category: "System",
+      keywords: () => splitKeywords("commands.keyboardShortcutHints.keywords"),
+      disabled: () => runtimeEnv.host === "web",
+      action: options.toggleKeyboardShortcutHints,
+    })
+
    commandRegistry.register({
      id: "thinking-default-visibility",
      label: () => {
--- a/packages/ui/src/lib/i18n/messages/en/commands.ts
+++ b/packages/ui/src/lib/i18n/messages/en/commands.ts
@@ -97,6 +97,12 @@ export const commandMessages = {
  "commands.timelineToolCalls.description": "Toggle tool call entries in the message timeline",
  "commands.timelineToolCalls.keywords": "timeline, tool, toggle",

+  "commands.keyboardShortcutHints.label.show": "Show Keyboard Shortcut Hints",
+  "commands.keyboardShortcutHints.label.hide": "Hide Keyboard Shortcut Hints",
+  "commands.keyboardShortcutHints.description": "Show or hide keyboard shortcut hints across the UI",
+  "commands.keyboardShortcutHints.description.disabledWeb": "Disabled in WebUI (shortcut hints are always hidden)",
+  "commands.keyboardShortcutHints.keywords": "shortcut, shortcuts, keyboard, keybind, hints",
+
  "commands.common.expanded": "Expanded",
  "commands.common.collapsed": "Collapsed",
  "commands.common.visible": "Visible",
--- a/packages/ui/src/lib/i18n/messages/es/commands.ts
+++ b/packages/ui/src/lib/i18n/messages/es/commands.ts
@@ -97,6 +97,12 @@ export const commandMessages = {
  "commands.timelineToolCalls.description": "Alternar entradas de llamadas de herramienta en la línea de tiempo de mensajes",
  "commands.timelineToolCalls.keywords": "línea de tiempo, herramienta, alternar",

+  "commands.keyboardShortcutHints.label.show": "Mostrar atajos de teclado",
+  "commands.keyboardShortcutHints.label.hide": "Ocultar atajos de teclado",
+  "commands.keyboardShortcutHints.description": "Mostrar u ocultar sugerencias de atajos de teclado en la interfaz",
+  "commands.keyboardShortcutHints.description.disabledWeb": "Desactivado en WebUI (los atajos siempre se ocultan)",
+  "commands.keyboardShortcutHints.keywords": "atajo, atajos, teclado, keybind, pistas",
+
  "commands.common.expanded": "Expandido",
  "commands.common.collapsed": "Colapsado",
  "commands.common.visible": "Visible",
--- a/packages/ui/src/lib/i18n/messages/fr/commands.ts
+++ b/packages/ui/src/lib/i18n/messages/fr/commands.ts
@@ -97,6 +97,12 @@ export const commandMessages = {
  "commands.timelineToolCalls.description": "Afficher/masquer les entrées d'appel d'outil dans la timeline des messages",
  "commands.timelineToolCalls.keywords": "timeline, outil, basculer",

+  "commands.keyboardShortcutHints.label.show": "Afficher les raccourcis clavier",
+  "commands.keyboardShortcutHints.label.hide": "Masquer les raccourcis clavier",
+  "commands.keyboardShortcutHints.description": "Afficher ou masquer les indices de raccourcis clavier dans l'interface",
+  "commands.keyboardShortcutHints.description.disabledWeb": "Désactivé en WebUI (les raccourcis sont toujours masqués)",
+  "commands.keyboardShortcutHints.keywords": "raccourci, raccourcis, clavier, keybind, indices",
+
  "commands.common.expanded": "Développé",
  "commands.common.collapsed": "Réduit",
  "commands.common.visible": "Visible",
--- a/packages/ui/src/lib/i18n/messages/ja/commands.ts
+++ b/packages/ui/src/lib/i18n/messages/ja/commands.ts
@@ -97,6 +97,12 @@ export const commandMessages = {
  "commands.timelineToolCalls.description": "メッセージタイムラインのツールコール表示を切り替え",
  "commands.timelineToolCalls.keywords": "タイムライン, ツール, 切り替え, timeline, tool, toggle",

+  "commands.keyboardShortcutHints.label.show": "キーボードショートカットのヒントを表示",
+  "commands.keyboardShortcutHints.label.hide": "キーボードショートカットのヒントを非表示",
+  "commands.keyboardShortcutHints.description": "UI 全体のキーボードショートカットヒントを表示/非表示",
+  "commands.keyboardShortcutHints.description.disabledWeb": "WebUI では無効（ヒントは常に非表示）",
+  "commands.keyboardShortcutHints.keywords": "ショートカット, キーボード, ヒント, shortcuts, keyboard, hints",
+
  "commands.common.expanded": "展開",
  "commands.common.collapsed": "折りたたみ",
  "commands.common.visible": "表示",
--- a/packages/ui/src/lib/i18n/messages/ru/commands.ts
+++ b/packages/ui/src/lib/i18n/messages/ru/commands.ts
@@ -97,6 +97,12 @@ export const commandMessages = {
  "commands.timelineToolCalls.description": "Переключить отображение вызовов инструментов в таймлайне сообщений",
  "commands.timelineToolCalls.keywords": "таймлайн, tool, переключить",

+  "commands.keyboardShortcutHints.label.show": "Показать подсказки сочетаний",
+  "commands.keyboardShortcutHints.label.hide": "Скрыть подсказки сочетаний",
+  "commands.keyboardShortcutHints.description": "Показать или скрыть подсказки сочетаний клавиш в интерфейсе",
+  "commands.keyboardShortcutHints.description.disabledWeb": "Отключено в WebUI (подсказки всегда скрыты)",
+  "commands.keyboardShortcutHints.keywords": "shortcut, shortcuts, keyboard, keybind, подсказки",
+
  "commands.common.expanded": "Развернуто",
  "commands.common.collapsed": "Свернуто",
  "commands.common.visible": "Видимо",
--- a/packages/ui/src/lib/i18n/messages/zh-Hans/commands.ts
+++ b/packages/ui/src/lib/i18n/messages/zh-Hans/commands.ts
@@ -97,6 +97,12 @@ export const commandMessages = {
  "commands.timelineToolCalls.description": "切换消息时间轴中的工具调用条目",
  "commands.timelineToolCalls.keywords": "timeline, tool, toggle, 时间轴, 工具, 切换",

+  "commands.keyboardShortcutHints.label.show": "显示键盘快捷键提示",
+  "commands.keyboardShortcutHints.label.hide": "隐藏键盘快捷键提示",
+  "commands.keyboardShortcutHints.description": "显示或隐藏界面中的键盘快捷键提示",
+  "commands.keyboardShortcutHints.description.disabledWeb": "WebUI 中已禁用（提示始终隐藏）",
+  "commands.keyboardShortcutHints.keywords": "shortcuts, keyboard, hints, 快捷键, 键盘, 提示",
+
  "commands.common.expanded": "展开",
  "commands.common.collapsed": "折叠",
  "commands.common.visible": "可见",
--- a/packages/ui/src/stores/preferences.tsx
+++ b/packages/ui/src/stores/preferences.tsx
@@ -34,6 +34,7 @@ export type ListeningMode = "local" | "all"

 export interface Preferences {
  showThinkingBlocks: boolean
+  showKeyboardShortcutHints: boolean
  thinkingBlocksExpansion: ExpansionPreference
  showTimelineTools: boolean
  promptSubmitOnEnter: boolean
@@ -78,6 +79,7 @@ const MAX_FAVORITE_MODELS = 50

 const defaultPreferences: Preferences = {
  showThinkingBlocks: false,
+  showKeyboardShortcutHints: true,
  thinkingBlocksExpansion: "expanded",
  showTimelineTools: true,
  promptSubmitOnEnter: false,
@@ -131,6 +133,7 @@ function normalizePreferences(pref?: Partial<Preferences> & { agentModelSelectio

  return {
    showThinkingBlocks: sanitized.showThinkingBlocks ?? defaultPreferences.showThinkingBlocks,
+    showKeyboardShortcutHints: sanitized.showKeyboardShortcutHints ?? defaultPreferences.showKeyboardShortcutHints,
    thinkingBlocksExpansion: sanitized.thinkingBlocksExpansion ?? defaultPreferences.thinkingBlocksExpansion,
    showTimelineTools: sanitized.showTimelineTools ?? defaultPreferences.showTimelineTools,
    promptSubmitOnEnter: sanitized.promptSubmitOnEnter ?? defaultPreferences.promptSubmitOnEnter,
@@ -393,6 +396,10 @@ function toggleShowThinkingBlocks(): void {
  updatePreferences({ showThinkingBlocks: !preferences().showThinkingBlocks })
 }

+function toggleKeyboardShortcutHints(): void {
+  updatePreferences({ showKeyboardShortcutHints: !preferences().showKeyboardShortcutHints })
+}
+
 function toggleShowTimelineTools(): void {
  updatePreferences({ showTimelineTools: !preferences().showTimelineTools })
 }
@@ -511,6 +518,7 @@ interface ConfigContextValue {
  setThemePreference: typeof setThemePreference
  updateConfig: typeof updateConfig
  toggleShowThinkingBlocks: typeof toggleShowThinkingBlocks
+  toggleKeyboardShortcutHints: typeof toggleKeyboardShortcutHints
  toggleShowTimelineTools: typeof toggleShowTimelineTools
  toggleUsageMetrics: typeof toggleUsageMetrics
  toggleAutoCleanupBlankSessions: typeof toggleAutoCleanupBlankSessions
@@ -548,6 +556,7 @@ const configContextValue: ConfigContextValue = {
  setThemePreference,
  updateConfig,
  toggleShowThinkingBlocks,
+  toggleKeyboardShortcutHints,
  toggleShowTimelineTools,
  toggleUsageMetrics,
  toggleAutoCleanupBlankSessions,
@@ -608,6 +617,7 @@ export {
  updateConfig,
  updatePreferences,
  toggleShowThinkingBlocks,
+  toggleKeyboardShortcutHints,
  toggleShowTimelineTools,
  toggleAutoCleanupBlankSessions,
  toggleUsageMetrics,
--- a/packages/ui/src/styles/panels/modal.css
+++ b/packages/ui/src/styles/panels/modal.css
@@ -46,6 +46,11 @@
  color: var(--text-primary);
 }

+.modal-item:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
 .modal-list-container[data-pointer-mode="pointer"] .modal-item:hover {
  background-color: var(--surface-hover);
 }
--- a/packages/ui/src/styles/utilities.css
+++ b/packages/ui/src/styles/utilities.css
@@ -153,6 +153,19 @@
  @apply opacity-50;
 }

+/*
+  Shortcut hints are useful on desktop native apps, but are noisy/irrelevant on
+  touch-first devices and in WebUI where browser shortcuts often conflict.
+*/
+html[data-runtime-host="web"] .keyboard-hints,
+html[data-runtime-host="web"] .kbd-hint,
+html[data-runtime-platform="mobile"] .keyboard-hints,
+html[data-runtime-platform="mobile"] .kbd-hint,
+html[data-keyboard-hints="hide"] .keyboard-hints,
+html[data-keyboard-hints="hide"] .kbd-hint {
+  display: none !important;
+}
+
 /* Truncate from the start (keeps end visible; good for paths) */
 .truncate-start {
  overflow: hidden;