nextcloud-libraries / nextcloud-libraries/nextcloud-vue
Add global hotkey (shortcuts) management
Nobody has claimed this yet.
- Dominant language
- Vue
- Stars
- 246
- Forks
- 99
- Avg merge
- 1d 20h
- Merged PRs (30d)
- 103
Description
- ref: https://github.com/nextcloud-libraries/nextcloud-vue/pull/6311/
- ref: https://github.com/nextcloud/server/issues/30484
Problem
Currently, we have hotkeys (shortcuts) in many apps and components. It includes:
- Setting the global hotkey listener taking into account a11y, macOS, and focus
- Showing the keymap
While setting the hotkey listener is covered by useHotkey, showing "Keyboard shortcuts" is implemented manually by apps.
| Files | Talk |
|---|---|
It results in the following problems:
- Each app must implement the settings section again
- Each app should include global shortcuts like new n</kbd< for App Navigation toggle
- Consistency and relevance:
- Design consistency
- Open dialog by ? (not implemented by Talk)
- macOS - Ctrl is replaced with Cmd on macOS (not implemented by Files)
- Manual update - after adding the hotkey developers should not forget to add it to the docs (especially with global hotkeys)
Proposal
Add a global shortcut manager together with useHotkey
- When registering a hotkey, allow defining:
- Description, e.g.
Select all files - Section, e.g.
Actions - App (can be defined automatically from
NcContent), e.g.FilesorGlobalfor all-apps
- Description, e.g.
- Store the fact of hotkey registration globally in
window - Add components
<NcHotkeys>and<NcHotkeysDialog>with the list of hotkeys and ?
Implementation notes
We might use useHotkey to handle the fact of (un)registration. But some hotkeys are registered only in a specific context like a call in Talk. So we don't know about a hotkey in advance.
Instead, we can add an app-level composable like
declare function useAppHotkey(options: { id: string, key: string, description: string, section?: string })
useAppHotkey()
Then useHotkey should refer to a registered app hotkey (via id or a new composable wrapper).
Vue
Implementing it as a composable allows automatic unregistration and useHotkey integration.
But the functionality might make sense even without Vue. Maybe it should be also available outside composables and the vue library.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reading the existing useHotkey composable and the NcContent integration mentioned in the proposal. Trace how hotkeys register and unregister, including context-specific Talk shortcuts. Done should include the proposed global registration, NcHotkeys and NcHotkeysDialog components, and the ? shortcut, with the API boundaries resolved for use outside Vue.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 25/100