feat: add v-shortcut directive for keyboard shortcuts (#942)

Co-authored-by: kolaente <k@knt.li>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/942
Reviewed-by: dpschen <dpschen@noreply.kolaente.de>
Co-authored-by: konrad <k@knt.li>
Co-committed-by: konrad <k@knt.li>

src/components/misc/keyboard-shortcuts/index.vue

@@ -0,0 +1,54 @@
+<template>
+	<modal @close="close()">
+		<card class="has-background-white has-no-shadow" :title="$t('keyboardShortcuts.title')">
+			<template v-for="(s, i) in shortcuts" :key="i">
+				<h3>{{ $t(s.title) }}</h3>
+
+				<div class="message is-primary">
+					<div class="message-body">
+						{{
+							s.available($route) ? $t('keyboardShortcuts.currentPageOnly') : $t('keyboardShortcuts.allPages')
+						}}
+					</div>
+				</div>
+
+				<dl>
+					<template v-for="(sc, si) in s.shortcuts" :key="si">
+						<dt>{{ $t(sc.title) }}</dt>
+						<shortcut
+							is="dd"
+							:keys="sc.keys"
+							:combination="typeof sc.combination !== 'undefined' ? $t(`keyboardShortcuts.${sc.combination}`) : null"/>
+					</template>
+				</dl>
+			</template>
+		</card>
+	</modal>
+</template>
+
+<script>
+import {KEYBOARD_SHORTCUTS_ACTIVE} from '@/store/mutation-types'
+import Shortcut from '@/components/misc/shortcut.vue'
+import {KEYBOARD_SHORTCUTS} from './shortcuts'
+
+export default {
+	name: 'keyboard-shortcuts',
+	components: {Shortcut},
+	data() {
+		return {
+			shortcuts: KEYBOARD_SHORTCUTS,
+		}
+	},
+	methods: {
+		close() {
+			this.$store.commit(KEYBOARD_SHORTCUTS_ACTIVE, false)
+		},
+	},
+}
+</script>
+
+<style>
+dt {
+	font-weight: bold;
+}
+</style>

src/components/misc/keyboard-shortcuts/shortcuts.js

@@ -0,0 +1,88 @@
+import {isAppleDevice} from '@/helpers/isAppleDevice'
+
+const ctrl = isAppleDevice() ? '⌘' : 'ctrl'
+
+export const KEYBOARD_SHORTCUTS = [
+	{
+		title: 'keyboardShortcuts.general',
+		available: () => null,
+		shortcuts: [
+			{
+				title: 'keyboardShortcuts.toggleMenu',
+				keys: [ctrl, 'e'],
+			},
+			{
+				title: 'keyboardShortcuts.quickSearch',
+				keys: [ctrl, 'k'],
+			},
+		],
+	},
+	{
+		title: 'list.kanban.title',
+		available: (route) => route.name === 'list.kanban',
+		shortcuts: [
+			{
+				title: 'keyboardShortcuts.task.done',
+				keys: [ctrl, 'click'],
+			},
+		],
+	},
+	{
+		title: 'keyboardShortcuts.list.title',
+		available: (route) => route.name.startsWith('list.'),
+		shortcuts: [
+			{
+				title: 'keyboardShortcuts.list.switchToListView',
+				keys: ['g', 'l'],
+				combination: 'then',
+			},
+			{
+				title: 'keyboardShortcuts.list.switchToGanttView',
+				keys: ['g', 'g'],
+				combination: 'then',
+			},
+			{
+				title: 'keyboardShortcuts.list.switchToTableView',
+				keys: ['g', 't'],
+				combination: 'then',
+			},
+			{
+				title: 'keyboardShortcuts.list.switchToKanbanView',
+				keys: ['g', 'k'],
+				combination: 'then',
+			},
+		],
+	},
+	{
+		title: 'keyboardShortcuts.task.title',
+		available: (route) => [
+			'task.detail',
+			'task.list.detail',
+			'task.gantt.detail',
+			'task.kanban.detail',
+			'task.detail',
+		].includes(route.name),
+		shortcuts: [
+			{
+				title: 'keyboardShortcuts.task.assign',
+				keys: ['a'],
+			},
+			{
+				title: 'keyboardShortcuts.task.labels',
+				keys: ['l'],
+			},
+			{
+				title: 'keyboardShortcuts.task.dueDate',
+				keys: ['d'],
+			},
+			{
+				title: 'keyboardShortcuts.task.attachment',
+				keys: ['f'],
+			},
+			{
+				title: 'keyboardShortcuts.task.related',
+				keys: ['r'],
+			},
+		],
+	},
+]