chore: move frontend files

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

@@ -0,0 +1,89 @@
+<template>
+	<modal @close="close()">
+		<card
+			class="has-background-white keyboard-shortcuts"
+			:shadow="false"
+			:title="$t('keyboardShortcuts.title')"
+		>
+			<template
+				v-for="(s, i) in shortcuts"
+				:key="i"
+			>
+				<h3>{{ $t(s.title) }}</h3>
+
+				<Message
+					v-if="s.available"
+					class="mb-4"
+				>
+					{{
+						typeof s.available === 'undefined' ?
+							$t('keyboardShortcuts.allPages') :
+							(
+								s.available($route)
+									? $t('keyboardShortcuts.currentPageOnly')
+									: $t('keyboardShortcuts.somePagesOnly')
+							)
+					}}
+				</Message>
+
+				<dl class="shortcut-list">
+					<template
+						v-for="(sc, si) in s.shortcuts"
+						:key="si"
+					>
+						<dt class="shortcut-title">
+							{{ $t(sc.title) }}
+						</dt>
+						<Shortcut
+							is="dd"
+							class="shortcut-keys"
+							:keys="sc.keys"
+							:combination="sc.combination && $t(`keyboardShortcuts.${sc.combination}`)"
+						/>
+					</template>
+				</dl>
+			</template>
+		</card>
+	</modal>
+</template>
+
+<script lang="ts" setup>
+import {useBaseStore} from '@/stores/base'
+
+import Shortcut from '@/components/misc/shortcut.vue'
+import Message from '@/components/misc/message.vue'
+
+import {KEYBOARD_SHORTCUTS as shortcuts} from './shortcuts'
+
+function close() {
+	useBaseStore().setKeyboardShortcutsActive(false)
+}
+</script>
+
+<style scoped>
+.keyboard-shortcuts {
+	text-align: left;
+}
+
+.message:not(:last-child) {
+	margin-bottom: 1rem;
+}
+
+.message-body {
+	padding: .75rem;
+}
+
+.shortcut-list {
+	display: grid;
+	grid-template-columns: 2fr 1fr;
+}
+
+.shortcut-title {
+	margin-bottom: .5rem;
+}
+
+.shortcut-keys {
+	justify-content: end;
+	margin-bottom: .5rem;
+}
+</style>

frontend/src/components/misc/keyboard-shortcuts/shortcuts.ts

@@ -0,0 +1,161 @@
+import type {RouteLocation} from 'vue-router'
+
+import {isAppleDevice} from '@/helpers/isAppleDevice'
+
+const ctrl = isAppleDevice() ? '⌘' : 'ctrl'
+
+interface Shortcut {
+	title: string
+	keys: string[]
+	combination?: 'then'
+}
+
+interface ShortcutGroup {
+	title: string
+	available?: (route: RouteLocation) => boolean
+	shortcuts: Shortcut[]
+}
+
+export const KEYBOARD_SHORTCUTS : ShortcutGroup[] = [
+	{
+		title: 'keyboardShortcuts.general',
+		shortcuts: [
+			{
+				title: 'keyboardShortcuts.toggleMenu',
+				keys: [ctrl, 'e'],
+			},
+			{
+				title: 'keyboardShortcuts.quickSearch',
+				keys: [ctrl, 'k'],
+			},
+		],
+	},
+	{
+		title: 'keyboardShortcuts.navigation.title',
+		shortcuts: [
+			{
+				title: 'keyboardShortcuts.navigation.overview',
+				keys: ['g', 'o'],
+				combination: 'then',
+			},
+			{
+				title: 'keyboardShortcuts.navigation.upcoming',
+				keys: ['g', 'u'],
+				combination: 'then',
+			},
+			{
+				title: 'keyboardShortcuts.navigation.projects',
+				keys: ['g', 'p'],
+				combination: 'then',
+			},
+			{
+				title: 'keyboardShortcuts.navigation.labels',
+				keys: ['g', 'a'],
+				combination: 'then',
+			},
+			{
+				title: 'keyboardShortcuts.navigation.teams',
+				keys: ['g', 'm'],
+				combination: 'then',
+			},
+		],
+	},
+	{
+		title: 'project.kanban.title',
+		available: (route) => route.name === 'project.kanban',
+		shortcuts: [
+			{
+				title: 'keyboardShortcuts.task.done',
+				keys: [ctrl, 'click'],
+			},
+		],
+	},
+	{
+		title: 'keyboardShortcuts.project.title',
+		available: (route) => (route.name as string)?.startsWith('project.'),
+		shortcuts: [
+			{
+				title: 'keyboardShortcuts.project.switchToListView',
+				keys: ['g', 'l'],
+				combination: 'then',
+			},
+			{
+				title: 'keyboardShortcuts.project.switchToGanttView',
+				keys: ['g', 'g'],
+				combination: 'then',
+			},
+			{
+				title: 'keyboardShortcuts.project.switchToTableView',
+				keys: ['g', 't'],
+				combination: 'then',
+			},
+			{
+				title: 'keyboardShortcuts.project.switchToKanbanView',
+				keys: ['g', 'k'],
+				combination: 'then',
+			},
+		],
+	},
+	{
+		title: 'keyboardShortcuts.task.title',
+		available: (route) => route.name === 'task.detail',
+		shortcuts: [
+			{
+				title: 'keyboardShortcuts.task.done',
+				keys: ['t'],
+			},
+			{
+				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'],
+			},
+			{
+				title: 'keyboardShortcuts.task.move',
+				keys: ['m'],
+			},
+			{
+				title: 'keyboardShortcuts.task.color',
+				keys: ['c'],
+			},
+			{
+				title: 'keyboardShortcuts.task.reminder',
+				keys: ['alt', 'r'],
+			},
+			{
+				title: 'keyboardShortcuts.task.description',
+				keys: ['e'],
+			},
+			{
+				title: 'keyboardShortcuts.task.priority',
+				keys: ['p'],
+			},
+			{
+				title: 'keyboardShortcuts.task.delete',
+				keys: ['shift', 'delete'],
+			},
+			{
+				title: 'keyboardShortcuts.task.favorite',
+				keys: ['s'],
+			},
+			{
+				title: 'keyboardShortcuts.task.save',
+				keys: [ctrl, 's'],
+			},
+		],
+	},
+]