From 6973089b268e6f51327e3f449c4e57449283f8cb Mon Sep 17 00:00:00 2001
From: Sergey Shkuratov <golysh@kergma.net>
Date: Wed, 3 Jun 2026 12:31:50 +0300
Subject: [PATCH] refactor(frontend): centralize menu shortcuts

---
 frontend/src/components/home/ContentAuth.vue  |  3 +-
 frontend/src/components/home/MenuButton.vue   |  4 +-
 frontend/src/components/home/Navigation.vue   | 11 +++--
 .../misc/keyboard-shortcuts/shortcuts.ts      | 29 ++++++------
 frontend/src/constants/shortcuts.ts           | 47 +++++++++++++++++++
 frontend/tests/e2e/misc/menu.spec.ts          | 11 +++++
 6 files changed, 84 insertions(+), 21 deletions(-)
 create mode 100644 frontend/src/constants/shortcuts.ts

diff --git a/frontend/src/components/home/ContentAuth.vue b/frontend/src/components/home/ContentAuth.vue
index 04d71d132..852703c04 100644
--- a/frontend/src/components/home/ContentAuth.vue
+++ b/frontend/src/components/home/ContentAuth.vue
@@ -63,7 +63,7 @@
 				</Modal>
 
 				<BaseButton
-					v-shortcut="'Shift+Slash'"
+					v-shortcut="SHORTCUTS.showKeyboardShortcuts.binding"
 					class="keyboard-shortcuts-button d-print-none"
 					@click="showKeyboardShortcuts()"
 				>
@@ -79,6 +79,7 @@
 import {watch, computed, onBeforeUnmount} from 'vue'
 import {useRoute, useRouter} from 'vue-router'
 
+import {SHORTCUTS} from '@/constants/shortcuts'
 import Navigation from '@/components/home/Navigation.vue'
 import QuickActions from '@/components/quick-actions/QuickActions.vue'
 import BaseButton from '@/components/base/BaseButton.vue'
diff --git a/frontend/src/components/home/MenuButton.vue b/frontend/src/components/home/MenuButton.vue
index 7e7335cc0..857071beb 100644
--- a/frontend/src/components/home/MenuButton.vue
+++ b/frontend/src/components/home/MenuButton.vue
@@ -1,6 +1,6 @@
 <template>
 	<BaseButton
-		v-shortcut="'Mod+KeyE'"
+		v-shortcut="SHORTCUTS.toggleMenu.binding"
 		class="menu-show-button"
 		:title="$t('keyboardShortcuts.toggleMenu')"
 		:aria-label="menuActive ? $t('misc.hideMenu') : $t('misc.showMenu')"
@@ -11,6 +11,8 @@
 
 <script setup lang="ts">
 import {computed} from 'vue'
+
+import {SHORTCUTS} from '@/constants/shortcuts'
 import {useBaseStore} from '@/stores/base'
 
 import BaseButton from '@/components/base/BaseButton.vue'
diff --git a/frontend/src/components/home/Navigation.vue b/frontend/src/components/home/Navigation.vue
index b287362a2..d6e9deaeb 100644
--- a/frontend/src/components/home/Navigation.vue
+++ b/frontend/src/components/home/Navigation.vue
@@ -18,7 +18,7 @@
 			<menu class="menu-list other-menu-items">
 				<li>
 					<RouterLink
-						v-shortcut="'KeyG KeyO'"
+						v-shortcut="SHORTCUTS.navigation.overview.binding"
 						:to="{ name: 'home'}"
 					>
 						<span class="menu-item-icon icon">
@@ -29,7 +29,7 @@
 				</li>
 				<li>
 					<RouterLink
-						v-shortcut="'KeyG KeyU'"
+						v-shortcut="SHORTCUTS.navigation.upcoming.binding"
 						:to="{ name: 'tasks.range'}"
 					>
 						<span class="menu-item-icon icon">
@@ -40,7 +40,7 @@
 				</li>
 				<li>
 					<RouterLink
-						v-shortcut="'KeyG KeyP'"
+						v-shortcut="SHORTCUTS.navigation.projects.binding"
 						:to="{ name: 'projects.index'}"
 					>
 						<span class="menu-item-icon icon">
@@ -51,7 +51,7 @@
 				</li>
 				<li>
 					<RouterLink
-						v-shortcut="'KeyG KeyA'"
+						v-shortcut="SHORTCUTS.navigation.labels.binding"
 						:to="{ name: 'labels.index'}"
 					>
 						<span class="menu-item-icon icon">
@@ -62,7 +62,7 @@
 				</li>
 				<li>
 					<RouterLink
-						v-shortcut="'KeyG KeyM'"
+						v-shortcut="SHORTCUTS.navigation.teams.binding"
 						:to="{ name: 'teams.index'}"
 					>
 						<span class="menu-item-icon icon">
@@ -127,6 +127,7 @@
 <script setup lang="ts">
 import {computed} from 'vue'
 
+import {SHORTCUTS} from '@/constants/shortcuts'
 import PoweredByLink from '@/components/home/PoweredByLink.vue'
 import Logo from '@/components/home/Logo.vue'
 import Loading from '@/components/misc/Loading.vue'
diff --git a/frontend/src/components/misc/keyboard-shortcuts/shortcuts.ts b/frontend/src/components/misc/keyboard-shortcuts/shortcuts.ts
index 5ea5a1392..24d8ae2ee 100644
--- a/frontend/src/components/misc/keyboard-shortcuts/shortcuts.ts
+++ b/frontend/src/components/misc/keyboard-shortcuts/shortcuts.ts
@@ -1,8 +1,9 @@
 import type {RouteLocation} from 'vue-router'
 
+import {SHORTCUTS} from '@/constants/shortcuts'
 import {isAppleDevice} from '@/helpers/isAppleDevice'
 
-const ctrl = isAppleDevice() ? '⌘' : 'ctrl'
+const ctrl = SHORTCUTS.toggleMenu.keys[0]
 const reminderModifier = isAppleDevice() ? 'shift' : 'alt'
 const deleteKey = isAppleDevice() ? 'backspace' : 'delete'
 
@@ -24,11 +25,11 @@ export const KEYBOARD_SHORTCUTS: ShortcutGroup[] = [
 		shortcuts: [
 			{
 				title: 'keyboardShortcuts.toggleMenu',
-				keys: [ctrl, 'e'],
+				keys: SHORTCUTS.toggleMenu.keys,
 			},
 			{
 				title: 'keyboardShortcuts.quickSearch',
-				keys: [ctrl, 'k'],
+				keys: [SHORTCUTS.toggleMenu.keys[0], 'k'],
 			},
 		],
 	},
@@ -37,28 +38,28 @@ export const KEYBOARD_SHORTCUTS: ShortcutGroup[] = [
 		shortcuts: [
 			{
 				title: 'keyboardShortcuts.navigation.overview',
-				keys: ['g', 'o'],
-				combination: 'then',
+				keys: SHORTCUTS.navigation.overview.keys,
+				combination: SHORTCUTS.navigation.overview.combination,
 			},
 			{
 				title: 'keyboardShortcuts.navigation.upcoming',
-				keys: ['g', 'u'],
-				combination: 'then',
+				keys: SHORTCUTS.navigation.upcoming.keys,
+				combination: SHORTCUTS.navigation.upcoming.combination,
 			},
 			{
 				title: 'keyboardShortcuts.navigation.projects',
-				keys: ['g', 'p'],
-				combination: 'then',
+				keys: SHORTCUTS.navigation.projects.keys,
+				combination: SHORTCUTS.navigation.projects.combination,
 			},
 			{
 				title: 'keyboardShortcuts.navigation.labels',
-				keys: ['g', 'a'],
-				combination: 'then',
+				keys: SHORTCUTS.navigation.labels.keys,
+				combination: SHORTCUTS.navigation.labels.combination,
 			},
 			{
 				title: 'keyboardShortcuts.navigation.teams',
-				keys: ['g', 'm'],
-				combination: 'then',
+				keys: SHORTCUTS.navigation.teams.keys,
+				combination: SHORTCUTS.navigation.teams.combination,
 			},
 		],
 	},
@@ -208,7 +209,7 @@ export const KEYBOARD_SHORTCUTS: ShortcutGroup[] = [
 			},
 			{
 				title: 'keyboardShortcuts.task.save',
-				keys: [ctrl, 's'],
+				keys: [SHORTCUTS.toggleMenu.keys[0], 's'],
 			},
 			{
 				title: 'keyboardShortcuts.task.copyIdentifier',
diff --git a/frontend/src/constants/shortcuts.ts b/frontend/src/constants/shortcuts.ts
new file mode 100644
index 000000000..86bd73052
--- /dev/null
+++ b/frontend/src/constants/shortcuts.ts
@@ -0,0 +1,47 @@
+import {isAppleDevice} from '@/helpers/isAppleDevice'
+
+type ShortcutDefinition = {
+	binding: string
+	keys: string[]
+	combination?: 'then'
+}
+
+const ctrl = isAppleDevice() ? '⌘' : 'ctrl'
+
+export const SHORTCUTS = {
+	toggleMenu: {
+		binding: 'Mod+KeyE',
+		keys: [ctrl, 'e'],
+	},
+	showKeyboardShortcuts: {
+		binding: 'Shift+Slash',
+		keys: ['shift', '/'],
+	},
+	navigation: {
+		overview: {
+			binding: 'KeyG KeyO',
+			keys: ['g', 'o'],
+			combination: 'then',
+		},
+		upcoming: {
+			binding: 'KeyG KeyU',
+			keys: ['g', 'u'],
+			combination: 'then',
+		},
+		projects: {
+			binding: 'KeyG KeyP',
+			keys: ['g', 'p'],
+			combination: 'then',
+		},
+		labels: {
+			binding: 'KeyG KeyA',
+			keys: ['g', 'a'],
+			combination: 'then',
+		},
+		teams: {
+			binding: 'KeyG KeyM',
+			keys: ['g', 'm'],
+			combination: 'then',
+		},
+	},
+} as const satisfies Record<string, ShortcutDefinition | Record<string, ShortcutDefinition>>
diff --git a/frontend/tests/e2e/misc/menu.spec.ts b/frontend/tests/e2e/misc/menu.spec.ts
index 226971477..1132481a2 100644
--- a/frontend/tests/e2e/misc/menu.spec.ts
+++ b/frontend/tests/e2e/misc/menu.spec.ts
@@ -16,6 +16,17 @@ test.describe('The Menu', () => {
 		await expect(page.locator('.menu-container')).not.toHaveClass(/is-active/)
 	})
 
+	test('Can be toggled with keyboard shortcut on desktop', async ({authenticatedPage: page}) => {
+		await expect(page.locator('.menu-container')).toHaveClass(/is-active/)
+		await page.locator('body').click()
+
+		await page.locator('body').press('ControlOrMeta+e')
+		await expect(page.locator('.menu-container')).not.toHaveClass(/is-active/)
+
+		await page.locator('body').press('ControlOrMeta+e')
+		await expect(page.locator('.menu-container')).toHaveClass(/is-active/)
+	})
+
 	test('Is hidden by default on mobile', async ({authenticatedPage: page}) => {
 		await page.setViewportSize(iPhone8)
 		await expect(page.locator('.menu-container')).not.toHaveClass(/is-active/)