salvacybersec/CodeNomad
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): add keyboard shortcut hints toggle

Browse Source 
Hide shortcut hints in WebUI and allow toggling in native desktop apps.
This commit is contained in:
Shantur Rathore
2026-02-13 23:44:28 +00:00
parent e9f281a69d
commit c7195469bd
22 changed files with 120 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
packages/ui/src/components/command-palette.tsx
View File

@@ -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

2
packages/ui/src/components/filesystem-browser-dialog.tsx
View File

@@ -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>

6
packages/ui/src/components/folder-selection-view.tsx
View File

@@ -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>

2
packages/ui/src/components/hint-row.tsx
View File

@@ -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>
)

4
packages/ui/src/components/instance-welcome-view.tsx
View File

@@ -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">

4
packages/ui/src/components/instance/instance-shell2.tsx
View File

@@ -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>

2
packages/ui/src/components/message-list-header.tsx
View File

@@ -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>

2
packages/ui/src/components/message-section.tsx
View File

@@ -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>

2
packages/ui/src/components/prompt-input.tsx
View File

@@ -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={

2
packages/ui/src/components/session-picker.tsx
View File

@@ -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>