feat: implement modals with vue router 4

This is an implementation of the modals with the new possibilities of vue router 3.

See: https://github.com/vuejs/vue-router/issues/703#issuecomment-865066913 for a better explanation
and the linked example implementation: https://github.com/vuejs/vue-router-next/blob/master/e2e/modal/index.ts

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

@@ -6,7 +6,9 @@
 
 				<message>
 					{{
-						s.available($route) ? $t('keyboardShortcuts.currentPageOnly') : $t('keyboardShortcuts.allPages')
+						s?.available($route)
+							? $t('keyboardShortcuts.currentPageOnly')
+							: $t('keyboardShortcuts.allPages')
 					}}
 				</message>
 
@@ -17,7 +19,8 @@
 							class="shortcut-keys"
 							is="dd"
 							:keys="sc.keys"
-							:combination="typeof sc.combination !== 'undefined' ? $t(`keyboardShortcuts.${sc.combination}`) : null"/>
+							:combination="typeof sc.combination !== 'undefined' ? $t(`keyboardShortcuts.${sc.combination}`) : null"
+						/>
 					</template>
 				</dl>
 			</template>
@@ -25,28 +28,17 @@
 	</modal>
 </template>
 
-<script>
-import {KEYBOARD_SHORTCUTS_ACTIVE} from '@/store/mutation-types'
-import Shortcut from '@/components/misc/shortcut.vue'
-import Message from '@/components/misc/message'
-import {KEYBOARD_SHORTCUTS} from './shortcuts'
+<script lang="ts" setup>
+import {store} from '@/store'
 
-export default {
-	name: 'keyboard-shortcuts',
-	components: {
-		Message, 
-		Shortcut,
-	},
-	data() {
-		return {
-			shortcuts: KEYBOARD_SHORTCUTS,
-		}
-	},
-	methods: {
-		close() {
-			this.$store.commit(KEYBOARD_SHORTCUTS_ACTIVE, false)
-		},
-	},
+import Shortcut from '@/components/misc/shortcut.vue'
+import Message from '@/components/misc/message.vue'
+
+import {KEYBOARD_SHORTCUTS_ACTIVE} from '@/store/mutation-types'
+import {KEYBOARD_SHORTCUTS as shortcuts} from './shortcuts'
+
+function close() {
+	store.commit(KEYBOARD_SHORTCUTS_ACTIVE, false)
 }
 </script>
 

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

@@ -5,7 +5,6 @@ const ctrl = isAppleDevice() ? '⌘' : 'ctrl'
 export const KEYBOARD_SHORTCUTS = [
 	{
 		title: 'keyboardShortcuts.general',
-		available: () => null,
 		shortcuts: [
 			{
 				title: 'keyboardShortcuts.toggleMenu',
@@ -55,13 +54,7 @@ export const KEYBOARD_SHORTCUTS = [
 	},
 	{
 		title: 'keyboardShortcuts.task.title',
-		available: (route) => [
-			'task.detail',
-			'task.list.detail',
-			'task.gantt.detail',
-			'task.kanban.detail',
-			'task.detail',
-		].includes(route.name),
+		available: (route) => route.name === 'task.detail',
 		shortcuts: [
 			{
 				title: 'keyboardShortcuts.task.assign',