nextcloud-libraries / nextcloud-libraries/nextcloud-vue

Add global hotkey (shortcuts) management

Open
#6,313 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

0. to triage
Dominant language
Vue
Stars
246
Forks
99
Avg merge
1d 20h
Merged PRs (30d)
103

Description

Problem

Currently, we have hotkeys (shortcuts) in many apps and components. It includes:

  1. Setting the global hotkey listener taking into account a11y, macOS, and focus
  2. Showing the keymap

While setting the hotkey listener is covered by useHotkey, showing "Keyboard shortcuts" is implemented manually by apps.

Files Talk
image image

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

  1. 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. Files or Global for all-apps
  2. Store the fact of hotkey registration globally in window
  3. 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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.