Keyboard shortcuts

[jzgom067]

This PR introduces keyboard shortcuts to the site, which not only empowers power users but also makes the site more accessible.

Hotkeys and Shortcuts

On our site, we have "hotkeys" and "shortcuts". The former is a key combination that can always be activated, while the latter is only available during "Shortcut Mode".

Shortcut Mode is triggered with "Ctrl/Cmd+K", and it enables tooltips across the page denoting which elements/buttons have shortcuts. Pressing one of those keys will trigger the action and deactivate Shortcut Mode.

• Activating Shortcut Mode will remove focus from the currently focused element, and if canceled it will be returned unless the user clicks on an interactable element.
• If the user manages to switch pages while in Shortcut Mode, it will be deactivated.

Both hotkeys and shortcuts are disabled on the mobile interface. You could make an argument that someone might use a narrow window on desktop, but I don't think there's enough people like that to justify figuring out a separate mobile layout for the tooltips.

Confirmation Skipping

When removing participants, you can now hold shift to skip the confirmation. This is also explained in the confirmation dialog.

Affected Pages/Components

• The header - The new event and dashboard buttons have shortcuts, which both include the shift key to avoid conflicts with page-specific shortcuts.
• The dashboard - The first 10 events have shortcuts with the number keys.
• The results page - The header buttons and attendee panel buttons have shortcuts.
• The painting page - The display name field and cancel buttons have shortcuts. The submit/update button has a hotkey.
• The new event page - All event fields including advanced options and the cancel button have shortcuts. The create/update button has a hotkey.
• The time zone picker - The time zone picker has a shortcut with the "Z" key.
• The share menu - The "copy link" button has a hotkey.
• The grid - The next/previous page buttons have hotkeys with the left and right arrows.

New Components

HotkeyBadge - Displays a set of keys required to activate a hotkey. I had some fun with it and made the keys visibly "press" when you press the corresponding key on your keyboard.

• There are separate className props for the keys when they are pressed or not.

ShortcutTooltip - A tooltip that displays a HotkeyBadge when Shortcut Mode is active.

ShortcutTrigger - A component that, when the assigned key combination is pressed, activates either its provided action or a click and focus on its child.

• A selector prop can be specified to isolate a specific element within the trigger, so you're still able to position the tooltip where you wish while avoiding messing with internal component implementations.

ShortcutModeIndicator - When Shortcut Mode is active, this is displayed on the bottom middle of the screen.

New Context

A new context called ShortcutsContext handles HotkeyBadge key presses and Shortcut Mode activation in a centralized place.

Button Integration

Hotkeys were integrated into our buttons. In the hotkey prop, you can specify properties such as the key combination, how it's displayed (always on the button, in a tooltip, etc.), and if it's a shortcut or not.

Hotkeys are supported on all types of buttons, calling the onClick on action and empty buttons, and pushing the specified route on link buttons.

The hotkey badge, when displayed on the button, has custom styling for each button theme.

Tooltip Updates

To better support shortcuts, the Tooltip component now has support for a controlled open state, collision allowance, and displaying on all 4 sides.

Because of the rounded corners, I had to move the arrow into the tooltip body by a single pixel, which is basically unnoticeable.

Text Field Auto Focus

The autoFocus prop was added to TextInputField, which focuses the text field on page load (on desktop only). This follows the theme of making the site more keyboard-accessible by starting the focus within the content, and it also encourages users to fill out the text first before anything else.

This feature was added to the event name and display name fields.

Escape Keystroke Consumption Fix

On the results page, escape key presses would do nothing because the mobile results drawer was intercepting the event. This means you couldn't press escape to close a dropdown. The fix for this was conditionally mounting the mobile results drawer only when the screen was narrow enough.

New Package

The react-hotkeys-hook package was added to avoid reinventing the wheel. It handles hotkey activation with many options for customization and a robust system to map hotkey definitions to actual keys.

[coderabbitai]

Walkthrough

The PR adds a shortcut-mode system with provider state, keyboard tracking, badges, tooltips, and shortcut triggers. Buttons accept typed hotkey configurations. Event editors, painting forms, navigation controls, attendee actions, header links, event selection, and sharing now expose keyboard shortcuts. Desktop and mobile controls use separate shortcut behavior. Mobile detection controls shortcut activation and drawer rendering. The share menu now uses an action button for link copying.

---

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

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

Actionable comments posted: 9

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: 01066e22-bcbd-4e78-aafc-cbdd14827ae8

📥 Commits

Reviewing files that changed from the base of the PR and between e3a336d and 19cca01.

⛔ Files ignored due to path filters (1)

• frontend/package-lock.json is excluded by !**/package-lock.json

📒 Files selected for processing (30)

• frontend/package.json
• frontend/src/app/(event)/[event-code]/page-client.tsx
• frontend/src/app/(event)/[event-code]/painting/page-client.tsx
• frontend/src/app/layout.tsx
• frontend/src/components/copy-toast-button.tsx
• frontend/src/components/text-input-field.tsx
• frontend/src/features/button/components/base.tsx
• frontend/src/features/button/props.ts
• frontend/src/features/dashboard/components/event-grid.tsx
• frontend/src/features/event/components/selectors/timezone.tsx
• frontend/src/features/event/editor/advanced-options.tsx
• frontend/src/features/event/editor/date-range/selector.tsx
• frontend/src/features/event/editor/editor.tsx
• frontend/src/features/event/grid/schedule-header.tsx
• frontend/src/features/event/results/attendees/panel-header.tsx
• frontend/src/features/event/results/attendees/remove-participant.tsx
• frontend/src/features/event/results/components/display-settings.tsx
• frontend/src/features/header/components/buttons/dashboard.tsx
• frontend/src/features/header/components/buttons/new-event.tsx
• frontend/src/features/share-menu/content.tsx
• frontend/src/features/system-feedback/hotkeys/components/hotkey-badge.tsx
• frontend/src/features/system-feedback/hotkeys/components/shortcut-mode-indicator.tsx
• frontend/src/features/system-feedback/hotkeys/components/shortcut-tooltip.tsx
• frontend/src/features/system-feedback/hotkeys/components/shortcut-trigger.tsx
• frontend/src/features/system-feedback/hotkeys/constants.ts
• frontend/src/features/system-feedback/hotkeys/context.ts
• frontend/src/features/system-feedback/hotkeys/provider.tsx
• frontend/src/features/system-feedback/tooltip/base.tsx
• frontend/src/lib/providers.tsx
• frontend/src/lib/utils/is-apple-os.ts

💤 Files with no reviewable changes (1)

• frontend/src/components/copy-toast-button.tsx

[jzgom067]

@coderabbitai review

[coderabbitai]

✅ Action performed

Review finished.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

[coderabbitai]

Actionable comments posted: 1

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: b6773585-d801-47c9-84d9-4cd022d1a51b

📥 Commits

Reviewing files that changed from the base of the PR and between 19cca01 and 19d6aa8.

⛔ Files ignored due to path filters (1)

• frontend/package-lock.json is excluded by !**/package-lock.json

📒 Files selected for processing (12)

• frontend/package.json
• frontend/src/app/(event)/[event-code]/painting/page-client.tsx
• frontend/src/components/text-input-field.tsx
• frontend/src/features/button/components/base.tsx
• frontend/src/features/event/editor/advanced-options.tsx
• frontend/src/features/event/editor/date-range/selector.tsx
• frontend/src/features/event/editor/editor.tsx
• frontend/src/features/system-feedback/hotkeys/components/hotkey-badge.tsx
• frontend/src/features/system-feedback/hotkeys/components/shortcut-mode-indicator.tsx
• frontend/src/features/system-feedback/hotkeys/components/shortcut-trigger.tsx
• frontend/src/features/system-feedback/hotkeys/provider.tsx
• frontend/src/lib/providers.tsx

💤 Files with no reviewable changes (3)

• frontend/src/components/text-input-field.tsx
• frontend/src/app/(event)/[event-code]/painting/page-client.tsx
• frontend/src/features/event/editor/editor.tsx