Skip to content

feat(desktop): show hotkey shortcuts in preset dropdown#991

Merged
Kitenite merged 2 commits into
mainfrom
kiet-ho/preset-hotkeys
Jan 27, 2026
Merged

feat(desktop): show hotkey shortcuts in preset dropdown#991
Kitenite merged 2 commits into
mainfrom
kiet-ho/preset-hotkeys

Conversation

@Kitenite
Copy link
Copy Markdown
Collaborator

@Kitenite Kitenite commented Jan 27, 2026

Summary

  • Display bound keyboard shortcuts (e.g., ⌘⇧1 on macOS, Ctrl+Shift+1 on Windows/Linux) next to each preset in the dropdown menu
  • Makes it easier for users to discover and remember preset hotkeys
  • Shortcuts respect user customizations from the hotkeys settings

Test plan

  • Open the preset dropdown (click the chevron next to the + button in tab bar)
  • Verify each preset shows its corresponding hotkey shortcut on the right side
  • Verify shortcuts display correctly on macOS (⌘⇧1) and Windows/Linux (Ctrl+Shift+1)
  • Verify presets beyond index 9 don't show shortcuts (only 1-9 have hotkeys)
  • Verify custom hotkey bindings are reflected in the dropdown

Summary by CodeRabbit

  • New Features

    • Preset dropdown now shows per-item hotkey shortcuts when assigned, making it easier to trigger presets via keyboard.
  • Style

    • Adjusted preset star icon positioning for improved alignment so the star no longer pushes to the edge.
    • Updated sidebar list divider to use a solid border for clearer separation.

✏️ Tip: You can customize this high-level summary in your review settings.

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Jan 27, 2026

Caution

Review failed

The pull request is closed.

📝 Walkthrough

Walkthrough

Adds UI rendering of per-preset hotkey shortcuts by introducing a PresetMenuItemShortcut in GroupStrip and exporting PRESET_HOTKEY_IDS from the preset-hotkeys hook; also tweaks a divider style and alignment of the default preset star icon.

Changes

Cohort / File(s) Summary
GroupStrip UI
apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/GroupStrip/GroupStrip.tsx
Adds PresetMenuItemShortcut component; imports DropdownMenuShortcut, useHotkeyText, and PRESET_HOTKEY_IDS; maps presets with an index to render per-item hotkey shortcuts inside each DropdownMenuItem; removes ml-auto from the default preset star and relies on flex-shrink-0.
Preset hotkey hook export
apps/desktop/src/renderer/routes/_authenticated/_dashboard/workspace/$workspaceId/hooks/usePresetHotkeys.ts
Makes PRESET_HOTKEY_IDS publicly exported (export const) so UI components can reference preset hotkey IDs.
Ports list styling
apps/desktop/src/renderer/screens/main/components/WorkspaceSidebar/PortsList/PortsList.tsx
Changes divider border class from border-border/40 to border-border (solid border color).

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related PRs

Suggested reviewers

  • CharlieHelps

Poem

🐰 I hopped through code, a joyful squeak,

Shortcuts planted row by row each tweak,
Presets shimmer with a nimble key,
Stars now settle, neat and free,
Click and hop — the shortcuts speak!

🚥 Pre-merge checks | ✅ 2 | ❌ 1
❌ Failed checks (1 warning)
Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (2 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly and specifically describes the main change: adding hotkey shortcuts display to the preset dropdown menu.
Description check ✅ Passed The PR description includes a clear summary, detailed test plan with checkboxes, and explains the feature's purpose and scope, though it omits some optional template sections.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing touches
  • 📝 Generate docstrings

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Fix all issues with AI agents
In
`@apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/GroupStrip/GroupStrip.tsx`:
- Around line 51-60: PresetMenuItemShortcut currently calls useHotkeyText even
when PRESET_HOTKEY_IDS[index] is undefined for indices >8; change the logic so
you first read const hotkeyId = PRESET_HOTKEY_IDS[index] and if (!hotkeyId)
return null before calling useHotkeyText, then only call const hotkeyText =
useHotkeyText(hotkeyId) and guard the "Unassigned" value after that; also
consider extracting PresetMenuItemShortcut into its own file to follow the
one-component-per-file guideline and import it where needed (references:
PresetMenuItemShortcut, PRESET_HOTKEY_IDS, useHotkeyText, DropdownMenuShortcut).

Comment on lines +51 to +60
function PresetMenuItemShortcut({ index }: { index: number }) {
const hotkeyId = PRESET_HOTKEY_IDS[index];
const hotkeyText = useHotkeyText(hotkeyId);

if (!hotkeyId || hotkeyText === "Unassigned") {
return null;
}

return <DropdownMenuShortcut>{hotkeyText}</DropdownMenuShortcut>;
}
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Guard against out‑of‑range preset indices before calling useHotkeyText.

For presets beyond index 8, PRESET_HOTKEY_IDS[index] is undefined but the hook is still called, which can lead to runtime errors or undefined lookups. Also, consider extracting PresetMenuItemShortcut to its own file to comply with the one‑component‑per‑file guideline. As per coding guidelines, ...

🔧 Proposed fix
-function PresetMenuItemShortcut({ index }: { index: number }) {
-	const hotkeyId = PRESET_HOTKEY_IDS[index];
-	const hotkeyText = useHotkeyText(hotkeyId);
-
-	if (!hotkeyId || hotkeyText === "Unassigned") {
-		return null;
-	}
-
-	return <DropdownMenuShortcut>{hotkeyText}</DropdownMenuShortcut>;
-}
+function PresetMenuItemShortcut({ hotkeyId }: { hotkeyId: HotkeyId }) {
+	const hotkeyText = useHotkeyText(hotkeyId);
+
+	if (hotkeyText === "Unassigned") {
+		return null;
+	}
+
+	return <DropdownMenuShortcut>{hotkeyText}</DropdownMenuShortcut>;
+}
 {presets.map((preset, index) => {
 	const presetIcon = getPresetIcon(preset.name, isDark);
+	const presetHotkeyId = PRESET_HOTKEY_IDS[index];
 	return (
 		<DropdownMenuItem
 			key={preset.id}
 			onClick={() => handleSelectPreset(preset)}
 			className="gap-2"
 		>
@@
 			{preset.isDefault && (
 				<HiStar className="size-3 text-yellow-500 flex-shrink-0" />
 			)}
-			<PresetMenuItemShortcut index={index} />
+			{presetHotkeyId && (
+				<PresetMenuItemShortcut hotkeyId={presetHotkeyId} />
+			)}
 		</DropdownMenuItem>
 	);
 })}

Also applies to: 260-284

🤖 Prompt for AI Agents
In
`@apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/GroupStrip/GroupStrip.tsx`
around lines 51 - 60, PresetMenuItemShortcut currently calls useHotkeyText even
when PRESET_HOTKEY_IDS[index] is undefined for indices >8; change the logic so
you first read const hotkeyId = PRESET_HOTKEY_IDS[index] and if (!hotkeyId)
return null before calling useHotkeyText, then only call const hotkeyText =
useHotkeyText(hotkeyId) and guard the "Unassigned" value after that; also
consider extracting PresetMenuItemShortcut into its own file to follow the
one-component-per-file guideline and import it where needed (references:
PresetMenuItemShortcut, PRESET_HOTKEY_IDS, useHotkeyText, DropdownMenuShortcut).

Display the bound keyboard shortcut (e.g., ⌘⇧1) next to each preset
in the dropdown menu, making it easier for users to discover and
remember preset hotkeys.
@Kitenite Kitenite force-pushed the kiet-ho/preset-hotkeys branch from 57bab01 to 744267a Compare January 27, 2026 06:14
@Kitenite Kitenite merged commit 165fc9c into main Jan 27, 2026
3 of 4 checks passed
@Kitenite Kitenite deleted the kiet-ho/preset-hotkeys branch January 27, 2026 06:17
@github-actions
Copy link
Copy Markdown
Contributor

🧹 Preview Cleanup Complete

The following preview resources have been cleaned up:

  • ⚠️ Neon database branch
  • ⚠️ Electric Fly.io app

Thank you for your contribution! 🎉

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant