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/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)