thibaud-lclr/api-client
1
0
Fork 0
Code Packages Activity Actions

feat(desktop): tab shortcuts discoverability (#5229)

Browse source 
This adds tab navigation shortcuts to the shortcuts help dialog for
desktop users and conditionally shows them only in desktop mode.

The shortcuts help now includes a "Tabs" section with all available tab
management shortcuts, but only displays them when running in desktop
kernel mode to avoid confusing web users with non-functional shortcuts.

Closes FE-917

The desktop app already had functional tab navigation shortcuts, but
they weren't documented in the app's shortcuts help dialog (accessible
via `?` or `Cmd/Ctrl+/`). This made the shortcuts less discoverable for
users who wanted to learn about available keyboard controls.
This commit is contained in:
Shreyas 2025-07-09 16:33:12 +05:30 committed by GitHub
parent 27392a5793
commit 5a79c3ba2a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 53 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
packages/hoppscotch-common/locales/en.json
View file

@ -1114,6 +1114,16 @@
"download": "Download response as file",
"title": "Response"
},
"tabs": {
"title": "Tabs",
"new_tab": "New Tab",
"close_tab": "Close Tab",
"reopen_tab": "Reopen Closed Tab",
"next_tab": "Next Tab",
"previous_tab": "Previous Tab",
"first_tab": "Switch to First Tab",
"last_tab": "Switch to Last Tab"
},
"theme": {
"black": "Switch theme to Black Mode",
"dark": "Switch theme to Dark Mode",

45
packages/hoppscotch-common/src/helpers/shortcuts.ts
View file

@ -1,4 +1,5 @@
import { getPlatformAlternateKey, getPlatformSpecialKey } from "./platformutils"
import { getKernelMode } from "@hoppscotch/kernel"
export type ShortcutDef = {
label: string
@ -7,8 +8,11 @@ export type ShortcutDef = {
}
export function getShortcuts(t: (x: string) => string): ShortcutDef[] {
// General
return [
const kernelMode = getKernelMode()
const isDesktop = kernelMode === "desktop"
const baseShortcuts: ShortcutDef[] = [
// General
{
label: t("shortcut.general.help_menu"),
keys: ["?"],
@ -143,4 +147,41 @@ export function getShortcuts(t: (x: string) => string): ShortcutDef[] {
section: t("shortcut.miscellaneous.title"),
},
]
// Desktop-only shortcuts
const desktopShortcuts: ShortcutDef[] = [
{
keys: [getPlatformSpecialKey(), "T"],
label: t("shortcut.tabs.new_tab"),
section: t("shortcut.tabs.title"),
},
{
keys: [getPlatformSpecialKey(), "W"],
label: t("shortcut.tabs.close_tab"),
section: t("shortcut.tabs.title"),
},
{
keys: [getPlatformSpecialKey(), getPlatformAlternateKey(), "→"],
label: t("shortcut.tabs.next_tab"),
section: t("shortcut.tabs.title"),
},
{
keys: [getPlatformSpecialKey(), getPlatformAlternateKey(), "←"],
label: t("shortcut.tabs.previous_tab"),
section: t("shortcut.tabs.title"),
},
{
keys: [getPlatformSpecialKey(), getPlatformAlternateKey(), "9"],
label: t("shortcut.tabs.first_tab"),
section: t("shortcut.tabs.title"),
},
{
keys: [getPlatformSpecialKey(), getPlatformAlternateKey(), "0"],
label: t("shortcut.tabs.last_tab"),
section: t("shortcut.tabs.title"),
},
]
// Return base shortcuts + desktop shortcuts only if in desktop mode
return isDesktop ? [...baseShortcuts, ...desktopShortcuts] : baseShortcuts
}