feat: display keyboard shortcuts on toolbar buttons by Senthil455 · Pull Request #788 · OpenCut-app/OpenCut

Senthil455 · 2026-05-09T18:02:37Z

Changes Made

Modified Files

apps/web/src/timeline/components/timeline-toolbar.tsx
apps/web/src/preview/components/toolbar.tsx

Features Implemented

Timeline Toolbar Shortcuts

Button	Shortcut	Action
Split element	S	split
Split left	Q	split-left
Split right	W	split-right
Duplicate element	Ctrl+D	duplicate-selected
Delete element	Delete / Backspace	delete-selected
Toggle snapping	N	toggle-snapping
Toggle bookmark	—	toggle-bookmark
Extract audio	—	toggle-source-audio
Ripple editing	—	toggle-ripple-editing

Preview Toolbar Shortcuts

Button	Shortcut	Action
Play/Pause	Space / K	toggle-play

Technical Details

Implementation Approach

Enhanced ToolbarButton component to accept optional action prop
Integrated useKeyboardShortcutsHelp() hook to retrieve shortcuts for actions
Appended shortcuts to tooltip content: ${tooltip} (${keys})
Implemented graceful fallback for actions without defined shortcuts

Code Quality

Zero TypeScript compilation errors
No breaking changes to existing component APIs
Full type safety with TActionWithOptionalArgs
Consistent with existing getDisplayShortcut() utility (used in context menus)
Follows accessibility standards from project guidelines

Testing Recommendations

Verify tooltip displays correctly on hover (200-500ms delay)
Test with custom keyboard shortcuts (verify shortcuts dialog integration)
Check responsiveness on mobile/touch devices
Validate tooltip text doesn't exceed viewport bounds

Related Issues

Addresses keyboard shortcut discoverability enhancement by making shortcuts visible on UI elements without requiring dialog navigation.

Visual Changes

Tooltip on hover now displays: "Split element (S)" instead of just "Split element"
Multiple shortcuts display as: "Play/Pause (Space or K)"
Buttons without shortcuts maintain original tooltip text

Accessibility

Maintains existing tooltip accessibility attributes
Tooltip delays preserved (200-500ms) for consistent UX
Keyboard hint text is non-distracting and supplementary
No impact on screen reader announcements

Summary by CodeRabbit

Release Notes

New Features
- Toolbar buttons now display associated keyboard shortcuts in their tooltips, helping users discover and learn available keyboard shortcuts for faster navigation.

- Add shortcut hints to toolbar buttons via tooltip text - Integrate useKeyboardShortcutsHelp hook for consistent shortcut retrieval - Timeline toolbar: split, duplicate, delete, snapping, bookmark buttons - Preview toolbar: play/pause button - Format: tooltip text appended with '(Key)' or '(Key1 or Key2)' - Gracefully handle actions without defined shortcuts

vercel · 2026-05-09T18:02:41Z

@Senthil455 is attempting to deploy a commit to the OpenCut OSS Team on Vercel.

A member of the Team first needs to authorize it.

coderabbitai · 2026-05-09T18:02:50Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 63b41762-7bd4-43a1-b978-954c90bfbccd

📥 Commits

Reviewing files that changed from the base of the PR and between fbe3db7 and 7b9d271.

📒 Files selected for processing (2)

apps/web/src/preview/components/toolbar.tsx
apps/web/src/timeline/components/timeline-toolbar.tsx

📝 Walkthrough

Walkthrough

Toolbar components across the preview and timeline now display keyboard shortcut hints in tooltips. The ToolbarButton component is enhanced to accept an optional action prop, resolve matching shortcuts via useKeyboardShortcutsHelp, and append shortcut key combinations to tooltip text. PlayPauseButton and all timeline toolbar buttons adopt this pattern to show contextual shortcut hints.

Changes

Keyboard Shortcut Display in Toolbar Tooltips

Layer / File(s)	Summary
Shortcut and Tooltip Imports `apps/web/src/preview/components/toolbar.tsx`, `apps/web/src/timeline/components/timeline-toolbar.tsx`	New imports added for `useKeyboardShortcutsHelp` hook and tooltip UI components (`Tooltip`, `TooltipTrigger`, `TooltipContent`) to enable shortcut-aware tooltip rendering.
ToolbarButton Component Enhancement `apps/web/src/timeline/components/timeline-toolbar.tsx`	`ToolbarButton` now accepts an optional `action` prop, calls `useKeyboardShortcutsHelp` to resolve matching keyboard shortcuts, and computes `tooltipContent` by combining base tooltip with shortcut key combinations when an action match exists.
PlayPauseButton Shortcut Implementation `apps/web/src/preview/components/toolbar.tsx`	`PlayPauseButton` wraps its icon in a `Tooltip` component, looks up the `toggle-play` shortcut, displays tooltip text with appended shortcut keys (fallback: "Play/Pause"), and applies 200ms tooltip delay.
Timeline Toolbar Buttons Integration `apps/web/src/timeline/components/timeline-toolbar.tsx`	All toolbar buttons in `ToolbarLeftSection` and `ToolbarRightSection` now pass `action` identifiers for shortcut-aware tooltip display; bookmark button's custom tooltip wrapper is removed, with logic moved into `ToolbarButton`.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related issues

[UX] Add keyboard shortcut hints to toolbar buttons #732: Implements the core feature of displaying keyboard shortcut hints in toolbar tooltips for Play/Pause and Timeline toolbar buttons via the action prop and useKeyboardShortcutsHelp hook integration.

Possibly related PRs

OpenCut-app/OpenCut#284: This PR builds upon the keyboard-shortcuts system by importing and utilizing useKeyboardShortcutsHelp to display resolved shortcut keys in tooltips across multiple toolbar components.

Poem

🐰 A dash of shortcuts, a tooltip's grace,
Each button now shows its special place—
From play to split, the keys align,
With useKeyboardShortcutsHelp they shine! ✨

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The description is incomplete. While it provides detailed technical information and changes, it does not address the repository's template requirement that feature PRs must first be discussed via an issue.	Add a note confirming that an issue was opened for discussion first, or acknowledge that this PR needs maintainer approval as per the template requirements.
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 (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately summarizes the main change: adding keyboard shortcut display to toolbar buttons.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests

Tip

💬 Introducing Slack Agent: The best way for teams to turn conversations into code.

Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.

Generate code and open pull requests
Plan features and break down work
Investigate incidents and troubleshoot customer tickets together
Automate recurring tasks and respond to alerts with triggers
Summarize progress and report instantly

Built for teams:

Shared memory across your entire org—no repeating context
Per-thread sandboxes to safely plan and execute work
Governance built-in—scoped access, auditability, and budget controls

One agent for your entire SDLC. Right inside Slack.

👉 Get started

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.}

mazeincoding merged commit 6fdb155 into OpenCut-app:main May 17, 2026
1 of 2 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: display keyboard shortcuts on toolbar buttons#788

feat: display keyboard shortcuts on toolbar buttons#788
mazeincoding merged 1 commit into
OpenCut-app:mainfrom
Senthil455:feat/keyboard-shortcuts-on-toolbar

Senthil455 commented May 9, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

vercel Bot commented May 9, 2026

Uh oh!

coderabbitai Bot commented May 9, 2026 •

edited

Loading

Walkthrough

Changes

Estimated code review effort

Possibly related issues

Possibly related PRs

Poem

❌ Failed checks (2 warnings)

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

Senthil455 commented May 9, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes Made

Modified Files

Features Implemented

Timeline Toolbar Shortcuts

Preview Toolbar Shortcuts

Technical Details

Implementation Approach

Code Quality

Testing Recommendations

Related Issues

Visual Changes

Accessibility

Summary by CodeRabbit

Release Notes

Uh oh!

vercel Bot commented May 9, 2026

Uh oh!

coderabbitai Bot commented May 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Possibly related issues

Possibly related PRs

Poem

❌ Failed checks (2 warnings)

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Senthil455 commented May 9, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented May 9, 2026 •

edited

Loading