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/views/tasks/TaskDetailViewModal.vue

@@ -13,37 +13,24 @@
 
 <script>
 import TaskDetailView from './TaskDetailView'
+import {computed} from 'vue'
+import {useRoute} from 'vue-router'
+
+export function useShowModal() {
+	const route = useRoute()
+	const historyState = computed(() => route.fullPath && window.history.state)
+	const show = computed(() => historyState.value.backgroundView)
+	return show
+}
 
 export default {
 	name: 'TaskDetailViewModal',
 	components: {
 		TaskDetailView,
 	},
-	data() {
-		return {
-			lastRoute: null,
-		}
-	},
-	beforeRouteEnter(to, from, next) {
-		next(vm => {
-			vm.lastRoute = from
-		})
-	},
-	beforeRouteLeave(to, from, next) {
-		if (from.name === 'task.kanban.detail' && to.name === 'task.detail') {
-			this.$router.replace({name: 'task.kanban.detail', params: to.params})
-			return
-		}
-
-		next()
-	},
 	methods: {
 		close() {
-			if (this.lastRoute === null) {
-				this.$router.back()
-			} else {
-				this.$router.push(this.lastRoute)
-			}
+			this.$router.back()
 		},
 	},
 }