feat: implement modals with vue router 4

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

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

src/components/home/contentAuth.vue

@@ -20,8 +20,9 @@
 
 				<quick-actions/>
 
-				<router-view/>
+				<router-view :route="routeWithModal"/>
 
+				<!-- TODO: is this still used? -->
 				<router-view name="popup" v-slot="{ Component }">
 					<transition name="modal">
 						<component :is="Component" />
@@ -50,6 +51,24 @@ import {CURRENT_LIST, KEYBOARD_SHORTCUTS_ACTIVE, MENU_ACTIVE} from '@/store/muta
 import Navigation from '@/components/home/navigation.vue'
 import QuickActions from '@/components/quick-actions/quick-actions.vue'
 
+function useRouteWithModal() {
+	const router = useRouter()
+	const route = useRoute()
+	const historyState = computed(() => route.fullPath && window.history.state)
+
+	const routeWithModal = computed(() => {
+		if (historyState.value.backgroundView) {
+			return router.resolve(historyState.value.backgroundView)
+		} else {
+			return route
+		}
+	})
+
+	return { routeWithModal }
+}
+
+useRouteWithModal()
+
 const store = useStore()
 
 const background = computed(() => store.state.background)

src/components/list/partials/filter-popup.vue

@@ -29,9 +29,10 @@
 
 <script>
 import Filters from '@/components/list/partials/filters'
-import {getDefaultParams} from '@/components/tasks/mixins/taskList'
 import Popup from '@/components/misc/popup'
 
+import {getDefaultParams} from '@/composables/taskList'
+
 export default {
 	name: 'filter-popup',
 	components: {

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,36 +19,26 @@
 							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>
 		</card>
 	</modal>
 </template>
 
-<script>
-import {KEYBOARD_SHORTCUTS_ACTIVE} from '@/store/mutation-types'
+<script lang="ts" setup>
+import {store} from '@/store'
+
 import Shortcut from '@/components/misc/shortcut.vue'
-import Message from '@/components/misc/message'
-import {KEYBOARD_SHORTCUTS} from './shortcuts'
+import Message from '@/components/misc/message.vue'
+
+import {KEYBOARD_SHORTCUTS_ACTIVE} from '@/store/mutation-types'
+import {KEYBOARD_SHORTCUTS as shortcuts} from './shortcuts'
 
-export default {
-	name: 'keyboard-shortcuts',
-	components: {
-		Message, 
-		Shortcut,
-	},
-	data() {
-		return {
-			shortcuts: KEYBOARD_SHORTCUTS,
-		}
-	},
-	methods: {
-		close() {
-			this.$store.commit(KEYBOARD_SHORTCUTS_ACTIVE, false)
-		},
-	},
+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',

src/components/tasks/edit-task.vue

@@ -67,7 +67,7 @@
 
 		<router-link
 			class="mt-2 has-text-centered is-block"
-			:to="{name: 'task.detail', params: {id: taskEditTask.id}}"
+			:to="taskDetailRoute"
 		>
 			{{ $t('task.openDetail') }}
 		</router-link>
@@ -102,6 +102,15 @@ export default {
 			taskEditTask: TaskModel,
 		}
 	},
+	computed: {
+		taskDetailRoute() {
+			return {
+				name: 'task.detail',
+				params: { id: this.taskEditTask.id },
+				state: { backgroundView: this.$router.currentRoute.value.fullPath },
+			}
+		},
+	},
 	components: {
 		ColorPicker,
 		Reminders,

src/components/tasks/partials/kanban-card.vue

@@ -7,8 +7,8 @@
 			'has-light-text': !colorIsDark(task.hexColor) && task.hexColor !== `#${task.defaultColor}` && task.hexColor !== task.defaultColor,
 		}"
 		:style="{'background-color': task.hexColor !== '#' && task.hexColor !== `#${task.defaultColor}` ? task.hexColor : false}"
-		@click.ctrl="() => toggleTaskDone(task)"
 		@click.exact="() => $router.push({ name: 'task.kanban.detail', params: { id: task.id } })"
+		@click.ctrl="() => toggleTaskDone(task)"
 		@click.meta="() => toggleTaskDone(task)"
 	>
 		<span class="task-id">
@@ -112,6 +112,13 @@ export default {
 				this.loadingInternal = false
 			}
 		},
+		openTaskDetail() {
+			this.$router.push({
+				name: 'task.detail',
+				params: { id: this.task.id },
+				state: { backgroundView: this.$router.currentRoute.value.fullPath },
+			})
+		},
 	},
 }
 </script>

src/components/tasks/partials/singleTaskInList.vue

@@ -8,7 +8,7 @@
 		>
 		</span>
 		<router-link
-			:to="{ name: taskDetailRoute, params: { id: task.id } }"
+			:to="taskDetailRoute"
 			:class="{ 'done': task.done}"
 			class="tasktext">
 			<span>
@@ -126,10 +126,6 @@ export default {
 			type: Boolean,
 			default: false,
 		},
-		taskDetailRoute: {
-			type: String,
-			default: 'task.list.detail',
-		},
 		showList: {
 			type: Boolean,
 			default: false,
@@ -167,6 +163,13 @@ export default {
 				title: '',
 			} : this.$store.state.currentList
 		},
+		taskDetailRoute() {
+			return {
+				name: 'task.detail',
+				params: { id: this.task.id },
+				state: { backgroundView: this.$router.currentRoute.value.fullPath },
+			}
+		},
 	},
 	methods: {
 		async markAsDone(checked) {