From 6fc47ee8bdccc7f78d961e4df1643987e9344bf6 Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Mon, 14 Nov 2022 19:02:28 +0100
Subject: [PATCH 01/15] feat: route modals everywhere

---
 cypress/e2e/sharing/team.spec.ts              |  2 +-
 src/components/base/OptionalWrapper.vue       | 21 +++++++++++++++
 src/components/home/TheNavigation.vue         |  4 +--
 src/components/home/contentAuth.vue           | 10 +++----
 .../list/list-settings-dropdown.vue           | 18 ++++++-------
 src/components/misc/create-edit.vue           | 21 ++++++++-------
 src/components/misc/modal.vue                 | 27 ++++++++++---------
 .../namespace/namespace-settings-dropdown.vue | 12 ++++-----
 src/composables/useRouteWithModal.ts          |  4 +--
 src/services/savedFilter.ts                   |  4 +--
 src/views/About.vue                           |  9 ++++---
 src/views/Home.vue                            |  2 +-
 src/views/filters/FilterDelete.vue            |  5 +---
 src/views/filters/FilterEdit.vue              |  5 ++--
 src/views/filters/FilterNew.vue               |  5 +---
 src/views/labels/ListLabels.vue               | 10 +++++--
 src/views/list/ListInfo.vue                   |  8 ++----
 src/views/list/NewList.vue                    |  9 +++++--
 src/views/list/settings/archive.vue           | 12 +++------
 src/views/list/settings/background.vue        | 13 +++++----
 src/views/list/settings/delete.vue            |  5 +---
 src/views/list/settings/edit.vue              | 14 +++++-----
 src/views/namespaces/ListNamespaces.vue       | 12 ++++-----
 src/views/namespaces/NewNamespace.vue         | 13 +++++----
 src/views/namespaces/settings/archive.vue     | 11 +++-----
 src/views/namespaces/settings/delete.vue      |  5 +---
 src/views/namespaces/settings/edit.vue        | 10 +++----
 src/views/tasks/TaskDetailView.vue            | 10 +++++--
 src/views/teams/ListTeams.vue                 | 10 +++++--
 src/views/teams/NewTeam.vue                   |  1 +
 30 files changed, 155 insertions(+), 137 deletions(-)
 create mode 100644 src/components/base/OptionalWrapper.vue

diff --git a/cypress/e2e/sharing/team.spec.ts b/cypress/e2e/sharing/team.spec.ts
index 7c48a59aa..22aafd7ee 100644
--- a/cypress/e2e/sharing/team.spec.ts
+++ b/cypress/e2e/sharing/team.spec.ts
@@ -19,7 +19,7 @@ describe('Team', () => {
 			.contains('Create a new team')
 		cy.get('input.input')
 			.type(newTeamName)
-		cy.get('.button')
+		cy.get('.new-team button')
 			.contains('Create')
 			.click()
 
diff --git a/src/components/base/OptionalWrapper.vue b/src/components/base/OptionalWrapper.vue
new file mode 100644
index 000000000..2cc1b351f
--- /dev/null
+++ b/src/components/base/OptionalWrapper.vue
@@ -0,0 +1,21 @@
+<!-- https://github.com/vuejs/rfcs/pull/449 -->
+<!-- https://github.com/vuejs/rfcs/discussions/448#discussioncomment-2769396= -->
+<script lang="ts">
+export default { inheritAttrs: false }
+</script>
+
+<script setup lang="ts">
+import { useAttrs } from 'vue'
+
+defineProps<{ is: any }>()
+
+const attrs = useAttrs()
+console.log(JSON.parse(JSON.stringify(attrs)))
+</script>
+
+<template>
+  <component v-if="is" :is="is" v-bind="$attrs">
+    <slot />
+  </component>
+  <slot v-else />
+</template>
\ No newline at end of file
diff --git a/src/components/home/TheNavigation.vue b/src/components/home/TheNavigation.vue
index 77d0b6e0e..07560b252 100644
--- a/src/components/home/TheNavigation.vue
+++ b/src/components/home/TheNavigation.vue
@@ -16,7 +16,7 @@
 					{{ currentList.title === '' ? $t('misc.loading') : getListTitle(currentList) }}
 				</h1>
 
-				<BaseButton :to="{name: 'list.info', params: {listId: currentList.id}}" class="info-button">
+				<BaseButton :to="{name: 'list.info', params: {listId: currentList.id}, state: {backdropView: $route.fullPath}}" class="info-button">
 					<icon icon="circle-info"/>
 				</BaseButton>
 
@@ -75,7 +75,7 @@
 						{{ $t('keyboardShortcuts.title') }}
 					</dropdown-item>
 					<dropdown-item
-						:to="{name: 'about'}"
+						:to="{name: 'about', state: {backdropView: $route.fullPath}}"
 					>
 						{{ $t('about.title') }}
 					</dropdown-item>
diff --git a/src/components/home/contentAuth.vue b/src/components/home/contentAuth.vue
index 24bc31c58..7a76229d3 100644
--- a/src/components/home/contentAuth.vue
+++ b/src/components/home/contentAuth.vue
@@ -38,14 +38,10 @@
 					</keep-alive>
 				</router-view>
 
-				<modal
-					:enabled="Boolean(currentModal)"
+				<component
+					:is="currentModal"
 					@close="closeModal()"
-					variant="scrolling"
-					class="task-detail-view-modal"
-				>
-					<component :is="currentModal"/>
-				</modal>
+				/>
 
 				<BaseButton
 					class="keyboard-shortcuts-button d-print-none"
diff --git a/src/components/list/list-settings-dropdown.vue b/src/components/list/list-settings-dropdown.vue
index 12c87f556..ee60b8a92 100644
--- a/src/components/list/list-settings-dropdown.vue
+++ b/src/components/list/list-settings-dropdown.vue
@@ -10,13 +10,13 @@
 
 		<template v-if="isSavedFilter(list)">
 			<dropdown-item
-				:to="{ name: 'filter.settings.edit', params: { listId: list.id } }"
+				:to="{ name: 'filter.settings.edit', params: { listId: list.id }, state: {backdropView: $route.fullPath} }"
 				icon="pen"
 			>
 				{{ $t('menu.edit') }}
 			</dropdown-item>
 			<dropdown-item
-				:to="{ name: 'filter.settings.delete', params: { listId: list.id } }"
+				:to="{ name: 'filter.settings.delete', params: { listId: list.id }, state: {backdropView: $route.fullPath} }"
 				icon="trash-alt"
 			>
 				{{ $t('misc.delete') }}
@@ -25,7 +25,7 @@
 
 		<template v-else-if="list.isArchived">
 			<dropdown-item
-				:to="{ name: 'list.settings.archive', params: { listId: list.id } }"
+				:to="{ name: 'list.settings.archive', params: { listId: list.id }, state: {backdropView: $route.fullPath} }"
 				icon="archive"
 			>
 				{{ $t('menu.unarchive') }}
@@ -33,32 +33,32 @@
 		</template>
 		<template v-else>
 			<dropdown-item
-				:to="{ name: 'list.settings.edit', params: { listId: list.id } }"
+				:to="{ name: 'list.settings.edit', params: { listId: list.id }, state: {backdropView: $route.fullPath} }"
 				icon="pen"
 			>
 				{{ $t('menu.edit') }}
 			</dropdown-item>
 			<dropdown-item
 				v-if="backgroundsEnabled"
-				:to="{ name: 'list.settings.background', params: { listId: list.id } }"
+				:to="{ name: 'list.settings.background', params: { listId: list.id }, state: {backdropView: $route.fullPath} }"
 				icon="image"
 			>
 				{{ $t('menu.setBackground') }}
 			</dropdown-item>
 			<dropdown-item
-				:to="{ name: 'list.settings.share', params: { listId: list.id } }"
+				:to="{ name: 'list.settings.share', params: { listId: list.id }, state: {backdropView: $route.fullPath} }"
 				icon="share-alt"
 			>
 				{{ $t('menu.share') }}
 			</dropdown-item>
 			<dropdown-item
-				:to="{ name: 'list.settings.duplicate', params: { listId: list.id } }"
+				:to="{ name: 'list.settings.duplicate', params: { listId: list.id }, state: {backdropView: $route.fullPath} }"
 				icon="paste"
 			>
 				{{ $t('menu.duplicate') }}
 			</dropdown-item>
 			<dropdown-item
-				:to="{ name: 'list.settings.archive', params: { listId: list.id } }"
+				:to="{ name: 'list.settings.archive', params: { listId: list.id }, state: {backdropView: $route.fullPath} }"
 				icon="archive"
 			>
 				{{ $t('menu.archive') }}
@@ -73,7 +73,7 @@
 				type="dropdown"
 			/>
 			<dropdown-item
-				:to="{ name: 'list.settings.delete', params: { listId: list.id } }"
+				:to="{ name: 'list.settings.delete', params: { listId: list.id }, state: {backdropView: $route.fullPath} }"
 				icon="trash-alt"
 				class="has-text-danger"
 			>
diff --git a/src/components/misc/create-edit.vue b/src/components/misc/create-edit.vue
index 3b69716c4..99a3d9f89 100644
--- a/src/components/misc/create-edit.vue
+++ b/src/components/misc/create-edit.vue
@@ -1,38 +1,38 @@
 <template>
-	<modal @close="$router.back()" :overflow="true" :wide="wide">
+	<modal :overflow="true" :wide="wide" #default="{ onClose }">
 		<card
 			:title="title"
 			:shadow="false"
 			:padding="false"
 			class="has-text-left"
 			:has-close="true"
-			@close="$router.back()"
+			@close="onClose"
 			:loading="loading"
 		>
 			<div class="p-4">
-				<slot/>
+				<slot :onClose="onClose" />
 			</div>
 
 			<template #footer>
-				<slot name="footer">
+				<slot name="footer" :onClose="onClose">
 					<x-button
 						v-if="tertiary !== ''"
 						:shadow="false"
 						variant="tertiary"
-						@click.prevent.stop="$emit('tertiary')"
+						@click="$emit('tertiary')"
 					>
 						{{ tertiary }}
 					</x-button>
 					<x-button
 						variant="secondary"
-						@click.prevent.stop="$router.back()"
+						@click="onClose"
 					>
 						{{ $t('misc.cancel') }}
 					</x-button>
 					<x-button
 						v-if="hasPrimaryAction"
 						variant="primary"
-						@click.prevent.stop="primary()"
+						@click="primary(onClose)"
 						:icon="primaryIcon"
 						:disabled="primaryDisabled || loading"
 						class="ml-2"
@@ -83,10 +83,11 @@ defineProps({
 	},
 })
 
+// 'close'
 const emit = defineEmits(['create', 'primary', 'tertiary'])
 
-function primary() {
-	emit('create')
-	emit('primary')
+function primary(onClose: () => void) {
+	emit('create', onClose)
+	emit('primary', onClose)
 }
 </script>
diff --git a/src/components/misc/modal.vue b/src/components/misc/modal.vue
index 5c1365e96..e45c963e2 100644
--- a/src/components/misc/modal.vue
+++ b/src/components/misc/modal.vue
@@ -1,7 +1,7 @@
 <template>
 	<Teleport to="body">
 		<!-- FIXME: transition should not be included in the modal -->
-		<CustomTransition :name="transitionName" appear>
+		<CustomTransition :name="transitionName" appear :appear-class="transitionName">
 			<section
 				v-if="enabled"
 				class="modal-mask"
@@ -10,11 +10,11 @@
 					variant,
 				]"
 				ref="modal"
-				v-bind="attrs"
+				v-bind="$attrs"
 			>
 				<div
 					class="modal-container"
-					@click.self.prevent.stop="$emit('close')"
+					@click.self.prevent.stop="onClose"
 					v-shortcut="'Escape'"
 				>
 					<div
@@ -25,13 +25,13 @@
 					}"
 					>
 						<BaseButton
-							@click="$emit('close')"
+							@click="onClose"
 							class="close"
 						>
 							<icon icon="times"/>
 						</BaseButton>
 
-						<slot>
+						<slot name="default" :onClose="onClose">
 							<div class="header">
 								<slot name="header"></slot>
 							</div>
@@ -40,14 +40,14 @@
 							</div>
 							<div class="actions">
 								<x-button
-									@click="$emit('close')"
+									@click="onClose"
 									variant="tertiary"
 									class="has-text-danger"
 								>
 									{{ $t('misc.cancel') }}
 								</x-button>
 								<x-button
-									@click="$emit('submit')"
+									@click="$emit('submit', onClose)"
 									variant="primary"
 									v-cy="'modalPrimary'"
 									:shadow="false"
@@ -70,10 +70,11 @@ export default {
 </script>
 
 <script lang="ts" setup>
+import {ref, watchEffect} from 'vue'
+import {useScrollLock} from '@vueuse/core'
+
 import CustomTransition from '@/components/misc/CustomTransition.vue'
 import BaseButton from '@/components/base/BaseButton.vue'
-import {ref, useAttrs, watchEffect} from 'vue'
-import {useScrollLock} from '@vueuse/core'
 
 const props = withDefaults(defineProps<{
 	enabled?: boolean,
@@ -87,9 +88,7 @@ const props = withDefaults(defineProps<{
 	variant: 'default',
 })
 
-defineEmits(['close', 'submit'])
-
-const attrs = useAttrs()
+const emit = defineEmits(['close', 'submit'])
 
 const modal = ref<HTMLElement | null>(null)
 const scrollLock = useScrollLock(modal)
@@ -97,6 +96,10 @@ const scrollLock = useScrollLock(modal)
 watchEffect(() => {
 	scrollLock.value = props.enabled
 })
+
+function onClose() {
+	emit('close')
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/namespace/namespace-settings-dropdown.vue b/src/components/namespace/namespace-settings-dropdown.vue
index 074436d69..d8a050688 100644
--- a/src/components/namespace/namespace-settings-dropdown.vue
+++ b/src/components/namespace/namespace-settings-dropdown.vue
@@ -10,7 +10,7 @@
 
 		<template v-if="namespace.isArchived">
 			<dropdown-item
-				:to="{ name: 'namespace.settings.archive', params: { id: namespace.id } }"
+				:to="{ name: 'namespace.settings.archive', params: { id: namespace.id }, state: { backdropView: $route.fullPath } }"
 				icon="archive"
 			>
 				{{ $t('menu.unarchive') }}
@@ -18,25 +18,25 @@
 		</template>
 		<template v-else>
 			<dropdown-item
-				:to="{ name: 'namespace.settings.edit', params: { id: namespace.id } }"
+				:to="{ name: 'namespace.settings.edit', params: { id: namespace.id }, state: { backdropView: $route.fullPath } }"
 				icon="pen"
 			>
 				{{ $t('menu.edit') }}
 			</dropdown-item>
 			<dropdown-item
-				:to="{ name: 'namespace.settings.share', params: { namespaceId: namespace.id } }"
+				:to="{ name: 'namespace.settings.share', params: { namespaceId: namespace.id }, state: { backdropView: $route.fullPath } }"
 				icon="share-alt"
 			>
 				{{ $t('menu.share') }}
 			</dropdown-item>
 			<dropdown-item
-				:to="{ name: 'list.create', params: { namespaceId: namespace.id } }"
+				:to="{ name: 'list.create', params: { namespaceId: namespace.id }, state: { backdropView: $route.fullPath } }"
 				icon="plus"
 			>
 				{{ $t('menu.newList') }}
 			</dropdown-item>
 			<dropdown-item
-				:to="{ name: 'namespace.settings.archive', params: { id: namespace.id } }"
+				:to="{ name: 'namespace.settings.archive', params: { id: namespace.id }, state: { backdropView: $route.fullPath } }"
 				icon="archive"
 			>
 				{{ $t('menu.archive') }}
@@ -51,7 +51,7 @@
 				type="dropdown"
 			/>
 			<dropdown-item
-				:to="{ name: 'namespace.settings.delete', params: { id: namespace.id } }"
+				:to="{ name: 'namespace.settings.delete', params: { id: namespace.id }, state: { backdropView: $route.fullPath } }"
 				icon="trash-alt"
 				class="has-text-danger"
 			>
diff --git a/src/composables/useRouteWithModal.ts b/src/composables/useRouteWithModal.ts
index d4e17c5c7..881fcf6f6 100644
--- a/src/composables/useRouteWithModal.ts
+++ b/src/composables/useRouteWithModal.ts
@@ -44,10 +44,10 @@ export function useRouteWithModal() {
 	function closeModal() {
 		const historyState = computed(() => route.fullPath && window.history.state)
 
-		if (historyState.value) {
+		if (historyState.value === undefined) {
 			router.back()
 		} else {
-			const backdropRoute = historyState.value?.backdropView && router.resolve(historyState.value.backdropView)
+			const backdropRoute = historyState.value.backdropView && router.resolve(historyState.value.backdropView)
 			router.push(backdropRoute)
 		}
 	}
diff --git a/src/services/savedFilter.ts b/src/services/savedFilter.ts
index 6c12f8182..8a2c0420b 100644
--- a/src/services/savedFilter.ts
+++ b/src/services/savedFilter.ts
@@ -113,7 +113,7 @@ export function useSavedFilter(listId?: MaybeRef<IList['id']>) {
 		router.push({name: 'list.index', params: {listId: getListId(filter.value)}})
 	}
 
-	async function saveFilter() {
+	async function saveFilter(callback: () => void) {
 		const response = await filterService.update(filter.value)
 		await namespaceStore.loadNamespaces()
 		success({message: t('filters.edit.success')})
@@ -123,7 +123,7 @@ export function useSavedFilter(listId?: MaybeRef<IList['id']>) {
 			id: getListId(filter.value),
 			title: filter.value.title,
 		}))
-		router.back()
+		callback()
 	}
 
 	async function deleteFilter() {	
diff --git a/src/views/About.vue b/src/views/About.vue
index 643136b0a..50eba6efd 100644
--- a/src/views/About.vue
+++ b/src/views/About.vue
@@ -1,14 +1,14 @@
 <template>
 	<modal
-		@close="$router.back()"
 		transition-name="fade"
 		variant="hint-modal"
-	>
+		>
+		<template	#default="{onClose}">
 		<card
 			class="has-no-shadow"
 			:title="$t('about.title')"
 			:has-close="true"
-			@close="$router.back()"
+			@close="onClose"
 			:padding="false"
 		>
 			<div class="p-4">
@@ -22,12 +22,13 @@
 			<template #footer>
 				<x-button
 					variant="secondary"
-					@click.prevent.stop="$router.back()"
+					@click="onClose"
 				>
 					{{ $t('misc.close') }}
 				</x-button>
 			</template>
 		</card>
+		</template>
 	</modal>
 </template>
 
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 72377fd29..783266fe7 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -21,7 +21,7 @@
 			<template v-if="defaultNamespaceId > 0">
 				<p class="mt-4">{{ $t('home.list.newText') }}</p>
 				<x-button
-					:to="{ name: 'list.create', params: { namespaceId: defaultNamespaceId } }"
+					:to="{ name: 'list.create', params: { namespaceId: defaultNamespaceId }, state: { backdropView: $route.fullPath } }"
 					:shadow="false"
 					class="ml-2"
 				>
diff --git a/src/views/filters/FilterDelete.vue b/src/views/filters/FilterDelete.vue
index 8b2326dd3..b9a38b690 100644
--- a/src/views/filters/FilterDelete.vue
+++ b/src/views/filters/FilterDelete.vue
@@ -1,8 +1,5 @@
 <template>
-	<modal
-		@close="$router.back()"
-		@submit="deleteFilter()"
-	>
+	<modal @submit="deleteFilter()">
 		<template #header>
 			<span>{{ $t('filters.delete.header') }}</span>
 		</template>
diff --git a/src/views/filters/FilterEdit.vue b/src/views/filters/FilterEdit.vue
index 51d9551d2..1c6048348 100644
--- a/src/views/filters/FilterEdit.vue
+++ b/src/views/filters/FilterEdit.vue
@@ -6,15 +6,16 @@
 		@primary="saveFilter"
 		:tertiary="$t('misc.delete')"
 		@tertiary="$router.push({ name: 'filter.settings.delete', params: { id: listId } })"
+		#default="{onClose}"
 	>
-		<form @submit.prevent="saveFilter()">
+		<form @submit.prevent="saveFilter(onClose)">
 			<div class="field">
 				<label class="label" for="title">{{ $t('filters.attributes.title') }}</label>
 				<div class="control">
 					<input
 						:class="{ 'disabled': filterService.loading}"
 						:disabled="filterService.loading || undefined"
-						@keyup.enter="saveFilter"
+						@keyup.enter="saveFilter(onClose)"
 						class="input"
 						id="title"
 						:placeholder="$t('filters.attributes.titlePlaceholder')"
diff --git a/src/views/filters/FilterNew.vue b/src/views/filters/FilterNew.vue
index fe57d5e0d..55208c7af 100644
--- a/src/views/filters/FilterNew.vue
+++ b/src/views/filters/FilterNew.vue
@@ -1,8 +1,5 @@
 <template>
-	<modal
-		@close="$router.back()"
-		variant="hint-modal"
-	>
+	<modal variant="hint-modal">
 				<card class="has-no-shadow" :title="$t('filters.create.title')">
 					<p>
 						{{ $t('filters.create.description') }}
diff --git a/src/views/labels/ListLabels.vue b/src/views/labels/ListLabels.vue
index 07fccae1d..23c93270c 100644
--- a/src/views/labels/ListLabels.vue
+++ b/src/views/labels/ListLabels.vue
@@ -1,7 +1,10 @@
 <template>
 	<div :class="{ 'is-loading': loading}" class="loader-container">
 		<x-button
-			:to="{name:'labels.create'}"
+			:to="{
+				name:'labels.create',
+				state: { backdropView: $route.fullPath }
+			}"
 			class="is-pulled-right"
 			icon="plus"
 		>
@@ -15,7 +18,10 @@
 			</p>
 			<p v-else class="has-text-centered has-text-grey is-italic">
 				{{ $t('label.newCTA') }}
-				<router-link :to="{name:'labels.create'}">{{ $t('label.create.title') }}.</router-link>
+				<router-link :to="{
+					name:'labels.create',
+					state: { backdropView: $route.fullPath }
+				}">{{ $t('label.create.title') }}.</router-link>
 			</p>
 		</div>
 
diff --git a/src/views/list/ListInfo.vue b/src/views/list/ListInfo.vue
index 91492d04f..087bbe6fe 100644
--- a/src/views/list/ListInfo.vue
+++ b/src/views/list/ListInfo.vue
@@ -1,10 +1,6 @@
 <template>
-	<modal
-		@close="$router.back()"
-	>
-		<card
-			:title="list.title"
-		>
+	<modal>
+		<card :title="list.title">
 			<div class="has-text-left" v-html="htmlDescription" v-if="htmlDescription !== ''"></div>
 			<p v-else class="is-italic">
 				{{ $t('list.noDescriptionAvailable') }}
diff --git a/src/views/list/NewList.vue b/src/views/list/NewList.vue
index e8f5962eb..fd7cd4d71 100644
--- a/src/views/list/NewList.vue
+++ b/src/views/list/NewList.vue
@@ -1,5 +1,10 @@
 <template>
-	<create-edit :title="$t('list.create.header')" @create="createNewList()" :primary-disabled="list.title === ''">
+	<create-edit
+		:title="$t('list.create.header')"
+		@create="createNewList()"
+		:primary-disabled="list.title === ''"
+		#default="{onClose}"
+	>
 		<div class="field">
 			<label class="label" for="listTitle">{{ $t('list.title') }}</label>
 			<div
@@ -9,7 +14,7 @@
 				<input
 					:class="{ disabled: listService.loading }"
 					@keyup.enter="createNewList()"
-					@keyup.esc="$router.back()"
+					@keyup.esc="onClose"
 					class="input"
 					:placeholder="$t('list.create.titlePlaceholder')"
 					type="text"
diff --git a/src/views/list/settings/archive.vue b/src/views/list/settings/archive.vue
index 5295f9641..dfcba2542 100644
--- a/src/views/list/settings/archive.vue
+++ b/src/views/list/settings/archive.vue
@@ -1,8 +1,5 @@
 <template>
-	<modal
-		@close="$router.back()"
-		@submit="archiveList()"
-	>
+	<modal @submit="archiveList">
 		<template #header><span>{{ list.isArchived ? $t('list.archive.unarchive') : $t('list.archive.archive') }}</span></template>
 		
 		<template #text>
@@ -17,7 +14,7 @@ export default {name: 'list-setting-archive'}
 
 <script setup lang="ts">
 import {computed} from 'vue'
-import {useRouter, useRoute} from 'vue-router'
+import {useRoute} from 'vue-router'
 import {useI18n} from 'vue-i18n'
 
 import {success} from '@/message'
@@ -28,13 +25,12 @@ import {useListStore} from '@/stores/lists'
 
 const {t} = useI18n({useScope: 'global'})
 const listStore = useListStore()
-const router = useRouter()
 const route = useRoute()
 
 const list = computed(() => listStore.getListById(route.params.listId))
 useTitle(() => t('list.archive.title', {list: list.value.title}))
 
-async function archiveList() {
+async function archiveList(onClose: () => void) {
 	try {
 		const newList = await listStore.updateList({
 			...list.value,
@@ -43,7 +39,7 @@ async function archiveList() {
 		useBaseStore().setCurrentList(newList)
 		success({message: t('list.archive.success')})
 	} finally {
-		router.back()
+		onClose()
 	}
 }
 </script>
diff --git a/src/views/list/settings/background.vue b/src/views/list/settings/background.vue
index b74e037fb..205ae746e 100644
--- a/src/views/list/settings/background.vue
+++ b/src/views/list/settings/background.vue
@@ -73,19 +73,19 @@
 			</x-button>
 		</template>
 
-		<template #footer>
+		<template #footer="{onClose}">
 			<x-button
 				v-if="hasBackground"
 				:shadow="false"
 				variant="tertiary"
 				class="is-danger"
-				@click.prevent.stop="removeBackground"
+				@click="removeBackground(onClose)"
 			>
 				{{ $t('list.background.remove') }}
 			</x-button>
 			<x-button
 				variant="secondary"
-				@click.prevent.stop="$router.back()"
+				@click="onClose"
 			>
 				{{ $t('misc.close') }}
 			</x-button>
@@ -100,7 +100,7 @@ export default { name: 'list-setting-background' }
 <script setup lang="ts">
 import {ref, computed, shallowReactive} from 'vue'
 import {useI18n} from 'vue-i18n'
-import {useRoute, useRouter} from 'vue-router'
+import {useRoute} from 'vue-router'
 import debounce from 'lodash.debounce'
 
 import BaseButton from '@/components/base/BaseButton.vue'
@@ -127,7 +127,6 @@ const SEARCH_DEBOUNCE = 300
 const {t} = useI18n({useScope: 'global'})
 const baseStore = useBaseStore()
 const route = useRoute()
-const router = useRouter()
 
 useTitle(() => t('list.background.title'))
 
@@ -216,13 +215,13 @@ async function uploadBackground() {
 	success({message: t('list.background.success')})
 }
 
-async function removeBackground() {
+async function removeBackground(onClose: () => void) {
 	const list = await listService.value.removeBackground(currentList.value)
 	await baseStore.handleSetCurrentList({list, forceUpdate: true})
 	namespaceStore.setListInNamespaceById(list)
 	listStore.setList(list)
 	success({message: t('list.background.removeSuccess')})
-	router.back()
+	onClose()
 }
 </script>
 
diff --git a/src/views/list/settings/delete.vue b/src/views/list/settings/delete.vue
index 857201919..ce9f85f7a 100644
--- a/src/views/list/settings/delete.vue
+++ b/src/views/list/settings/delete.vue
@@ -1,8 +1,5 @@
 <template>
-	<modal
-		@close="$router.back()"
-		@submit="deleteList()"
-	>
+	<modal @submit="deleteList()">
 		<template #header><span>{{ $t('list.delete.header') }}</span></template>
 
 		<template #text>
diff --git a/src/views/list/settings/edit.vue b/src/views/list/settings/edit.vue
index 77f3c3b5f..eb3085c22 100644
--- a/src/views/list/settings/edit.vue
+++ b/src/views/list/settings/edit.vue
@@ -5,7 +5,8 @@
 		:primary-label="$t('misc.save')"
 		@primary="save"
 		:tertiary="$t('misc.delete')"
-		@tertiary="$router.push({ name: 'list.settings.delete', params: { id: listId } })"
+		@tertiary="$router.push({ name: 'list.settings.delete', params: { id: listId }, state: {backdropView: $route.fullPath} })"
+		#default="{onClose}"
 	>
 		<div class="field">
 			<label class="label" for="title">{{ $t('list.title') }}</label>
@@ -13,7 +14,7 @@
 				<input
 					:class="{ 'disabled': isLoading}"
 					:disabled="isLoading || undefined"
-					@keyup.enter="save"
+					@keyup.enter="save(onClose)"
 					class="input"
 					id="title"
 					:placeholder="$t('list.edit.titlePlaceholder')"
@@ -33,7 +34,7 @@
 				<input
 					:class="{ 'disabled': isLoading}"
 					:disabled="isLoading || undefined"
-					@keyup.enter="save"
+					@keyup.enter="save(onClose)"
 					class="input"
 					id="identifier"
 					:placeholder="$t('list.edit.identifierPlaceholder')"
@@ -71,7 +72,6 @@ export default { name: 'list-setting-edit' }
 
 <script setup lang="ts">
 import type {PropType} from 'vue'
-import {useRouter} from 'vue-router'
 import {useI18n} from 'vue-i18n'
 
 import Editor from '@/components/input/AsyncEditor'
@@ -92,17 +92,15 @@ const props = defineProps({
 	},
 })
 
-const router = useRouter()
-
 const {t} = useI18n({useScope: 'global'})
 
 const {list, save: saveList, isLoading} = useList(props.listId)
 
 useTitle(() => list?.title ? t('list.edit.title', {list: list.title}) : '')
 
-async function save() {
+async function save(onClose: () => void) {
 	await saveList()
 	await useBaseStore().handleSetCurrentList({list})
-	router.back()
+	onClose()
 }
 </script>
diff --git a/src/views/namespaces/ListNamespaces.vue b/src/views/namespaces/ListNamespaces.vue
index fb5e1a454..f87b7c1cf 100644
--- a/src/views/namespaces/ListNamespaces.vue
+++ b/src/views/namespaces/ListNamespaces.vue
@@ -6,10 +6,10 @@
 			</fancycheckbox>
 
 			<div class="action-buttons">
-				<x-button :to="{name: 'filters.create'}" icon="filter">
+				<x-button :to="{name: 'filters.create', state: {backdropView: $route.fullPath}}" icon="filter">
 					{{ $t('filters.create.title') }}
 				</x-button>
-				<x-button :to="{name: 'namespace.create'}" icon="plus" v-cy="'new-namespace'">
+				<x-button :to="{name: 'namespace.create', state: {backdropView: $route.fullPath}}" icon="plus" v-cy="'new-namespace'">
 					{{ $t('namespace.create.title') }}
 				</x-button>
 			</div>
@@ -17,7 +17,7 @@
 
 		<p v-if="namespaces.length === 0" class="has-text-centered has-text-grey mt-4 is-italic">
 			{{ $t('namespace.noneAvailable') }}
-			<BaseButton :to="{name: 'namespace.create'}">
+			<BaseButton :to="{name: 'namespace.create', state: {backdropView: $route.fullPath}}">
 				{{ $t('namespace.create.title') }}.
 			</BaseButton>
 		</p>
@@ -25,7 +25,7 @@
 		<section :key="`n${n.id}`" class="namespace" v-for="n in namespaces">
 			<x-button
 				v-if="n.id > 0 && n.lists.length > 0"
-				:to="{name: 'list.create', params: {namespaceId:  n.id}}"
+				:to="{name: 'list.create', params: {namespaceId:  n.id}, state: { backdropView: $route.fullPath }}"
 				class="is-pulled-right"
 				variant="secondary"
 				icon="plus"
@@ -34,7 +34,7 @@
 			</x-button>
 			<x-button
 				v-if="n.isArchived"
-				:to="{name: 'namespace.settings.archive', params: {id:  n.id}}"
+				:to="{name: 'namespace.settings.archive', params: {id:  n.id}, state: { backdropView: $route.fullPath } }"
 				class="is-pulled-right mr-4"
 				variant="secondary"
 				icon="archive"
@@ -51,7 +51,7 @@
 
 			<p v-if="n.lists.length === 0" class="has-text-centered has-text-grey mt-4 is-italic">
 				{{ $t('namespace.noLists') }}
-				<BaseButton :to="{name: 'list.create', params: {namespaceId:  n.id}}">
+				<BaseButton :to="{name: 'list.create', params: {namespaceId:  n.id}, state: { backdropView: $route.fullPath }}">
 					{{ $t('namespace.createList') }}
 				</BaseButton>
 			</p>
diff --git a/src/views/namespaces/NewNamespace.vue b/src/views/namespaces/NewNamespace.vue
index f060cd2c7..73817b784 100644
--- a/src/views/namespaces/NewNamespace.vue
+++ b/src/views/namespaces/NewNamespace.vue
@@ -1,8 +1,9 @@
 <template>
 	<create-edit
 		:title="$t('namespace.create.title')"
-		@create="newNamespace()"
+		@create="newNamespace"
 		:primary-disabled="namespace.title === ''"
+		#default="{onClose}"
 	>
 		<div class="field">
 			<label class="label" for="namespaceTitle">{{ $t('namespace.attributes.title') }}</label>
@@ -14,8 +15,8 @@
 					But with the input modal here since it autofocuses the input that input field catches the focus instead.
 					Hence we place the listener on the input field directly. -->
 				<input
-					@keyup.enter="newNamespace()"
-					@keyup.esc="$router.back()"
+					@keyup.enter="newNamespace(onClose)"
+					@keyup.esc="onClose"
 					class="input"
 					:placeholder="$t('namespace.attributes.titlePlaceholder')"
 					type="text"
@@ -46,7 +47,6 @@
 <script setup lang="ts">
 import {ref, shallowReactive} from 'vue'
 import {useI18n} from 'vue-i18n'
-import {useRouter} from 'vue-router'
 
 import Message from '@/components/misc/message.vue'
 import CreateEdit from '@/components/misc/create-edit.vue'
@@ -65,11 +65,10 @@ const namespace = ref<INamespace>(new NamespaceModel())
 const namespaceService = shallowReactive(new NamespaceService())
 
 const {t} = useI18n({useScope: 'global'})
-const router = useRouter()
 
 useTitle(() => t('namespace.create.title'))
 
-async function newNamespace() {
+async function newNamespace(onClose: () => void) {
 	if (namespace.value.title === '') {
 		showError.value = true
 		return
@@ -79,6 +78,6 @@ async function newNamespace() {
 	const newNamespace = await namespaceService.create(namespace.value)
 	useNamespaceStore().addNamespace(newNamespace)
 	success({message: t('namespace.create.success')})
-	router.back()
+	onClose()
 }
 </script>
diff --git a/src/views/namespaces/settings/archive.vue b/src/views/namespaces/settings/archive.vue
index 7b77fddf3..ac677c986 100644
--- a/src/views/namespaces/settings/archive.vue
+++ b/src/views/namespaces/settings/archive.vue
@@ -1,8 +1,5 @@
 <template>
-	<modal
-		@close="$router.back()"
-		@submit="archiveNamespace()"
-	>
+	<modal @submit="archiveNamespace">
 		<template #header><span>{{ title }}</span></template>
 
 		<template #text>
@@ -23,7 +20,6 @@ export default { name: 'namespace-setting-archive' }
 
 <script setup lang="ts">
 import {watch, ref, computed, shallowReactive, type PropType} from 'vue'
-import {useRouter} from 'vue-router'
 import {useI18n} from 'vue-i18n'
 
 import {success} from '@/message'
@@ -41,7 +37,6 @@ const props = defineProps({
 	},
 })
 
-const router = useRouter()
 const {t} = useI18n({useScope: 'global'})
 
 const namespaceStore = useNamespaceStore()
@@ -69,7 +64,7 @@ const title = computed(() => {
 })
 useTitle(title)
 
-async function archiveNamespace() {
+async function archiveNamespace(onClose: () => void) {
 	try {
 		const isArchived = !namespace.value.isArchived
 		const archivedNamespace = await namespaceService.update({
@@ -83,7 +78,7 @@ async function archiveNamespace() {
 				: t('namespace.archive.unarchiveSuccess'),
 		})
 	} finally {
-		router.back()
+		onClose()
 	}
 }
 </script>
diff --git a/src/views/namespaces/settings/delete.vue b/src/views/namespaces/settings/delete.vue
index 6693241c2..c19fc5f8e 100644
--- a/src/views/namespaces/settings/delete.vue
+++ b/src/views/namespaces/settings/delete.vue
@@ -1,8 +1,5 @@
 <template>
-	<modal
-		@close="$router.back()"
-		@submit="deleteNamespace()"
-	>
+	<modal @submit="deleteNamespace()">
 		<template #header><span>{{ title }}</span></template>
 		
 		<template #text>
diff --git a/src/views/namespaces/settings/edit.vue b/src/views/namespaces/settings/edit.vue
index 7c25b4963..2d5e4edb0 100644
--- a/src/views/namespaces/settings/edit.vue
+++ b/src/views/namespaces/settings/edit.vue
@@ -5,9 +5,10 @@
 		:primary-label="$t('misc.save')"
 		@primary="save"
 		:tertiary="$t('misc.delete')"
-		@tertiary="$router.push({ name: 'namespace.settings.delete', params: { id: $route.params.id } })"
+		@tertiary="$router.push({ name: 'namespace.settings.delete', params: { id: $route.params.id }, state: { backdropView: $route.fullPath } })"
+		#default="{onClose}"
 	>
-		<form @submit.prevent="save()">
+		<form @submit.prevent="save(onClose)">
 			<div class="field">
 				<label class="label" for="namespacetext">{{ $t('namespace.attributes.title') }}</label>
 				<div class="control">
@@ -58,7 +59,6 @@
 <script lang="ts" setup>
 import {nextTick, ref, watch} from 'vue'
 import {success} from '@/message'
-import router from '@/router'
 
 import AsyncEditor from '@/components/input/AsyncEditor'
 import Fancycheckbox from '@/components/input/fancycheckbox.vue'
@@ -110,11 +110,11 @@ async function loadNamespace() {
 	title.value = t('namespace.edit.title', {namespace: namespace.value.title})
 }
 
-async function save() {
+async function save(onClose: () => void) {
 	const updatedNamespace = await namespaceService.value.update(namespace.value)
 	// Update the namespace in the parent
 	namespaceStore.setNamespaceById(updatedNamespace)
 	success({message: t('namespace.edit.success')})
-	router.back()
+	onClose()
 }
 </script>
\ No newline at end of file
diff --git a/src/views/tasks/TaskDetailView.vue b/src/views/tasks/TaskDetailView.vue
index d2762c60f..61cef0f39 100644
--- a/src/views/tasks/TaskDetailView.vue
+++ b/src/views/tasks/TaskDetailView.vue
@@ -1,4 +1,5 @@
 <template>
+	<OptionalWrapper :is="isModal && Modal" variant="scrolling">
 	<div
 		class="loader-container task-view-container"
 		:class="{
@@ -442,10 +443,11 @@
 			</template>
 		</modal>
 	</div>
+	</OptionalWrapper>
 </template>
 
 <script lang="ts" setup>
-import {ref, reactive, toRef, shallowReactive, computed, watch, nextTick, type PropType} from 'vue'
+import {ref, reactive, toRef, shallowReactive, computed, watch, nextTick, type PropType, useAttrs} from 'vue'
 import {useRouter, type RouteLocation} from 'vue-router'
 import {useI18n} from 'vue-i18n'
 import {unrefElement} from '@vueuse/core'
@@ -480,7 +482,10 @@ import RelatedTasks from '@/components/tasks/partials/relatedTasks.vue'
 import Reminders from '@/components/tasks/partials/reminders.vue'
 import RepeatAfter from '@/components/tasks/partials/repeatAfter.vue'
 import TaskSubscription from '@/components/misc/subscription.vue'
+
+import OptionalWrapper from '@/components/base/OptionalWrapper.vue'
 import CustomTransition from '@/components/misc/CustomTransition.vue'
+import Modal from '@/components/misc/modal.vue'
 
 import {uploadFile} from '@/helpers/attachments'
 import {getNamespaceTitle} from '@/helpers/getNamespaceTitle'
@@ -508,7 +513,8 @@ const props = defineProps({
 })
 
 defineEmits(['close'])
-
+const attrs = useAttrs()
+console.log(JSON.parse(JSON.stringify(attrs)))
 const router = useRouter()
 const {t} = useI18n({useScope: 'global'})
 
diff --git a/src/views/teams/ListTeams.vue b/src/views/teams/ListTeams.vue
index bf5d68452..71e2e2aba 100644
--- a/src/views/teams/ListTeams.vue
+++ b/src/views/teams/ListTeams.vue
@@ -1,7 +1,10 @@
 <template>
 	<div class="content loader-container is-max-width-desktop" :class="{ 'is-loading': teamService.loading}">
 		<x-button
-			:to="{name:'teams.create'}"
+			:to="{
+				name:'teams.create',
+				state: { backdropView: $route.fullPath },
+			}"
 			class="is-pulled-right"
 			icon="plus"
 		>
@@ -18,7 +21,10 @@
 		</ul>
 		<p v-else-if="!teamService.loading" class="has-text-centered has-text-grey is-italic">
 			{{ $t('team.noTeams') }}
-			<router-link :to="{name: 'teams.create'}">
+			<router-link :to="{
+				name: 'teams.create',
+				state: { backdropView: $route.fullPath },
+			}">
 				{{ $t('team.create.title') }}.
 			</router-link>
 		</p>
diff --git a/src/views/teams/NewTeam.vue b/src/views/teams/NewTeam.vue
index 0cb0c0796..f5f4d241a 100644
--- a/src/views/teams/NewTeam.vue
+++ b/src/views/teams/NewTeam.vue
@@ -1,5 +1,6 @@
 <template>
 	<create-edit
+		class="new-team"
 		:title="title"
 		@create="newTeam()"
 		:primary-disabled="team.name === ''"
-- 
2.40.1


From a4f3d759c284cab43a1245cc56b16383d2bce3c7 Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Tue, 22 Nov 2022 12:40:49 +0100
Subject: [PATCH 02/15] fix: add webkit overflow scolling

---
 src/components/input/vue-easymde.vue | 2 ++
 src/components/misc/modal.vue        | 1 +
 2 files changed, 3 insertions(+)

diff --git a/src/components/input/vue-easymde.vue b/src/components/input/vue-easymde.vue
index 208c3da5f..6544a1944 100644
--- a/src/components/input/vue-easymde.vue
+++ b/src/components/input/vue-easymde.vue
@@ -367,6 +367,7 @@ watch(
     left: 0;
     z-index: 7;
     overflow: auto;
+	-webkit-overflow-scrolling: touch;
     display: none;
     box-sizing: border-box;
 }
@@ -379,6 +380,7 @@ watch(
     right: 0;
     z-index: 9;
     overflow: auto;
+	-webkit-overflow-scrolling: touch;
     display: none;
     box-sizing: border-box;
     border: 1px solid #ddd;
diff --git a/src/components/misc/modal.vue b/src/components/misc/modal.vue
index e45c963e2..8c9d8d8b1 100644
--- a/src/components/misc/modal.vue
+++ b/src/components/misc/modal.vue
@@ -125,6 +125,7 @@ $modal-width: 1024px;
 	height: 100%;
 	max-height: 100vh;
 	overflow: auto;
+	-webkit-overflow-scrolling: touch;
 }
 
 .default .modal-content,
-- 
2.40.1


From b78821ebf2c1ab283d7b5569bdfd5a846cbc4d60 Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Tue, 22 Nov 2022 12:41:21 +0100
Subject: [PATCH 03/15] fix: use modal scrollock on body

---
 src/components/misc/modal.vue | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/components/misc/modal.vue b/src/components/misc/modal.vue
index 8c9d8d8b1..306ca8b87 100644
--- a/src/components/misc/modal.vue
+++ b/src/components/misc/modal.vue
@@ -9,7 +9,6 @@
 					{ 'has-overflow': overflow },
 					variant,
 				]"
-				ref="modal"
 				v-bind="$attrs"
 			>
 				<div
@@ -70,7 +69,7 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import {ref, watchEffect} from 'vue'
+import {watchEffect} from 'vue'
 import {useScrollLock} from '@vueuse/core'
 
 import CustomTransition from '@/components/misc/CustomTransition.vue'
@@ -90,8 +89,7 @@ const props = withDefaults(defineProps<{
 
 const emit = defineEmits(['close', 'submit'])
 
-const modal = ref<HTMLElement | null>(null)
-const scrollLock = useScrollLock(modal)
+const scrollLock = useScrollLock(document.body)
 
 watchEffect(() => {
 	scrollLock.value = props.enabled
-- 
2.40.1


From 174988a0f2cb55e1c7496ca53bd8d6e90587a192 Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Tue, 22 Nov 2022 12:42:11 +0100
Subject: [PATCH 04/15] feat: contain modal overflow scrolling

---
 src/components/misc/modal.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/misc/modal.vue b/src/components/misc/modal.vue
index 306ca8b87..f2c299dcb 100644
--- a/src/components/misc/modal.vue
+++ b/src/components/misc/modal.vue
@@ -123,6 +123,7 @@ $modal-width: 1024px;
 	height: 100%;
 	max-height: 100vh;
 	overflow: auto;
+	overscroll-behavior: contain;
 	-webkit-overflow-scrolling: touch;
 }
 
@@ -133,6 +134,7 @@ $modal-width: 1024px;
 	top: 50%;
 	left: 50%;
 	transform: translate(-50%, -50%);
+	overflow: visible; // reset bulma
 
 	@media screen and (max-width: $tablet) {
 		margin: 0;
-- 
2.40.1


From 5f4e93b7f4fedead088159ab7c8fdd477dbb1daf Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Tue, 22 Nov 2022 12:43:07 +0100
Subject: [PATCH 05/15] fix: archive list title only with loaded list

---
 src/views/list/settings/archive.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/views/list/settings/archive.vue b/src/views/list/settings/archive.vue
index dfcba2542..21b9c8f62 100644
--- a/src/views/list/settings/archive.vue
+++ b/src/views/list/settings/archive.vue
@@ -28,7 +28,10 @@ const listStore = useListStore()
 const route = useRoute()
 
 const list = computed(() => listStore.getListById(route.params.listId))
-useTitle(() => t('list.archive.title', {list: list.value.title}))
+useTitle(() => list.value
+	? t('list.archive.title', {list: list.value.title})
+	: undefined,
+)
 
 async function archiveList(onClose: () => void) {
 	try {
-- 
2.40.1


From 6115a67cfaafe9b3d5328a66398ef034cb323592 Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Tue, 22 Nov 2022 12:54:20 +0100
Subject: [PATCH 06/15] fix: remove bottom padding for TaskDetailView as modal

---
 src/views/tasks/TaskDetailView.vue | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/views/tasks/TaskDetailView.vue b/src/views/tasks/TaskDetailView.vue
index 61cef0f39..190d5377b 100644
--- a/src/views/tasks/TaskDetailView.vue
+++ b/src/views/tasks/TaskDetailView.vue
@@ -809,9 +809,11 @@ async function setPercentDone(percentDone: number) {
 	--primary-light: hsla(var(--primary-h), var(--primary-s), 73%, var(--primary-a));
 	padding-bottom: 0;
 	
-  @media screen and (min-width: $desktop) {
-		padding-bottom: 1rem;
-  }
+	&:not(.is-modal) {
+		@media screen and (min-width: $desktop) {
+			padding-bottom: 1rem;
+		}
+	}
 }
 
 .task-view {
-- 
2.40.1


From 13e68ac94d93afb7940355516992cb2a34c64b83 Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Tue, 22 Nov 2022 17:45:22 +0100
Subject: [PATCH 07/15] fix: close modal

---
 src/components/base/OptionalWrapper.vue |   5 -
 src/components/home/contentAuth.vue     |  14 +--
 src/composables/useRouteWithModal.ts    | 142 +++++++++++++++++-------
 src/router/index.ts                     |   5 +-
 src/views/tasks/TaskDetailView.vue      |   3 -
 5 files changed, 109 insertions(+), 60 deletions(-)

diff --git a/src/components/base/OptionalWrapper.vue b/src/components/base/OptionalWrapper.vue
index 2cc1b351f..1600785b8 100644
--- a/src/components/base/OptionalWrapper.vue
+++ b/src/components/base/OptionalWrapper.vue
@@ -5,12 +5,7 @@ export default { inheritAttrs: false }
 </script>
 
 <script setup lang="ts">
-import { useAttrs } from 'vue'
-
 defineProps<{ is: any }>()
-
-const attrs = useAttrs()
-console.log(JSON.parse(JSON.stringify(attrs)))
 </script>
 
 <template>
diff --git a/src/components/home/contentAuth.vue b/src/components/home/contentAuth.vue
index 7a76229d3..cabc6d1d7 100644
--- a/src/components/home/contentAuth.vue
+++ b/src/components/home/contentAuth.vue
@@ -32,16 +32,14 @@
 
 				<quick-actions/>
 
-				<router-view :route="routeWithModal" v-slot="{ Component }">
-					<keep-alive :include="['list.list', 'list.gantt', 'list.table', 'list.kanban']">
+				<router-view v-if="routeWithModal" :route="routeWithModal" v-slot="{ Component }">
+					<!-- <keep-alive :include="['list.list', 'list.gantt', 'list.table', 'list.kanban']"> -->
 						<component :is="Component"/>
-					</keep-alive>
+						<!-- test -->
+					<!-- </keep-alive> -->
 				</router-view>
 
-				<component
-					:is="currentModal"
-					@close="closeModal()"
-				/>
+				<component :is="currentModal" />
 
 				<BaseButton
 					class="keyboard-shortcuts-button d-print-none"
@@ -69,7 +67,7 @@ import {useLabelStore} from '@/stores/labels'
 import {useRouteWithModal} from '@/composables/useRouteWithModal'
 import {useRenewTokenOnFocus} from '@/composables/useRenewTokenOnFocus'
 
-const {routeWithModal, currentModal, closeModal} = useRouteWithModal()
+const {routeWithModal, currentModal} = useRouteWithModal()
 
 const baseStore = useBaseStore()
 const background = computed(() => baseStore.background)
diff --git a/src/composables/useRouteWithModal.ts b/src/composables/useRouteWithModal.ts
index 881fcf6f6..ba0f818de 100644
--- a/src/composables/useRouteWithModal.ts
+++ b/src/composables/useRouteWithModal.ts
@@ -1,56 +1,112 @@
-import { computed, shallowRef, watchEffect, h, type VNode } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
+import { computed, shallowRef, watch, h, type VNode, ref } from 'vue'
+import { useRoute, useRouter, loadRouteLocation, type RouteLocationNormalizedLoaded, type RouteLocationRaw } from 'vue-router'
+import router from '@/router'
+
+	// this is adapted from vue-router
+	// https://github.com/vuejs/vue-router-next/blob/798cab0d1e21f9b4d45a2bd12b840d2c7415f38a/src/RouterView.ts#L125
+function getRouteProps(route: RouteLocationNormalizedLoaded) {
+	const routePropsOption = route.matched[0]?.props.default
+	return routePropsOption
+		? routePropsOption === true
+			? route.params
+			: typeof routePropsOption === 'function'
+				? routePropsOption(route)
+				: routePropsOption
+		: {}
+}
+
+function resolveAndLoadRoute(route: RouteLocationRaw) {
+	return loadRouteLocation(router.resolve(route))
+}
 
 export function useRouteWithModal() {
 	const router = useRouter()
 	const route = useRoute()
-	const backdropView = computed(() => route.fullPath && window.history.state.backdropView)
-
-	const routeWithModal = computed(() => {
-		return backdropView.value
-			? router.resolve(backdropView.value)
-			: route
+	
+	const backdropView = computed<RouteLocationRaw | undefined>(() => {
+		// every time the fullPath changes we check the history state
+		// this happens also initially
+		return route.fullPath
+		? window.history.state?.backdropView
+		: undefined
 	})
+	
+	const routerIsReady = ref(false)
+	router.isReady().then(() => {
+		routerIsReady.value = true
+	})
+
+	const baseRoute = shallowRef<RouteLocationNormalizedLoaded>()
+	watch(
+		[backdropView, routerIsReady],
+		async () => {
+			if (routerIsReady.value === false || !route.fullPath) {
+				return
+			}
+
+			if (backdropView.value === undefined) {
+				if (route.meta?.showAsModal !== true) {
+					baseRoute.value = route
+					return
+				}
+				// TODO: maybe load parent route here in the future,
+				// via: route.matched[route.matched.length - 2]
+				// see: https://router.vuejs.org/guide/migration/#removal-of-parent-from-route-locations
+				baseRoute.value = await resolveAndLoadRoute({ name: 'home' })
+				return
+			}
+	
+			// we get the resolved route from the fullpath
+			// and wait for the route component to be loaded before we assign it
+			baseRoute.value = await resolveAndLoadRoute(backdropView.value)
+		},
+		{immediate: true},
+	)
+
+	const backdropRoute = computed(() => route.fullPath !== baseRoute.value?.fullPath ? baseRoute.value : undefined)
 
 	const currentModal = shallowRef<VNode>()
-	watchEffect(() => {
-		if (!backdropView.value) {
-			currentModal.value = undefined
-			return
+	watch(
+		[backdropRoute, baseRoute, route],
+		() => {
+			if (routerIsReady.value === false || !route.fullPath || !backdropRoute.value) {
+				currentModal.value = undefined
+				return
+			}
+
+			const props = getRouteProps(route)
+
+			props.backdropView = backdropRoute.value
+			props.onClose = closeModal
+
+			const component = route.matched[0]?.components?.default
+
+			if (!component) {
+				currentModal.value = undefined
+				return
+			}
+			currentModal.value = h(component, props)
+		},
+		{immediate: true},
+	)
+
+	async function closeModal() {
+		await router.isReady()
+		if (backdropRoute.value !== undefined) {
+			// TODO: Dialog modals might want to replace the route here via router.replace()
+			return router.push(backdropRoute.value)
 		}
-
-		// this is adapted from vue-router
-		// https://github.com/vuejs/vue-router-next/blob/798cab0d1e21f9b4d45a2bd12b840d2c7415f38a/src/RouterView.ts#L125
-		const routePropsOption = route.matched[0]?.props.default
-		const routeProps = routePropsOption
-			? routePropsOption === true
-				? route.params
-				: typeof routePropsOption === 'function'
-					? routePropsOption(route)
-					: routePropsOption
-			: {}
-
-		routeProps.backdropView = backdropView.value
-
-		const component = route.matched[0]?.components?.default
-
-		if (!component) {
-			currentModal.value = undefined
-			return
-		}
-		currentModal.value = h(component, routeProps)
-	})
-
-	function closeModal() {
-		const historyState = computed(() => route.fullPath && window.history.state)
-
-		if (historyState.value === undefined) {
-			router.back()
+		if (window.history.state === undefined) {
+			return router.push({ name: 'home' })
 		} else {
-			const backdropRoute = historyState.value.backdropView && router.resolve(historyState.value.backdropView)
-			router.push(backdropRoute)
+			router.back()
+			throw new Error('')
 		}
 	}
 
-	return {routeWithModal, currentModal, closeModal}
+	return {
+		routeWithModal: baseRoute,
+		currentModal,
+		closeModal,
+	}
 }
\ No newline at end of file
diff --git a/src/router/index.ts b/src/router/index.ts
index 5b897ae7d..d572a7765 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -240,7 +240,7 @@ const router = createRouter({
 			meta: {
 				showAsModal: true,
 			},
-			props: route => ({ namespaceId: parseInt(route.params.id as string) }),
+			props: route => ({ namespaceId: Number(route.params.id as string) }),
 		},
 		{
 			path: '/namespaces/:id/settings/delete',
@@ -468,6 +468,9 @@ const router = createRouter({
 			path: '/about',
 			name: 'about',
 			component: About,
+			meta: {
+				showAsModal: true,
+			},
 		},
 	],
 })
diff --git a/src/views/tasks/TaskDetailView.vue b/src/views/tasks/TaskDetailView.vue
index 190d5377b..cc302951a 100644
--- a/src/views/tasks/TaskDetailView.vue
+++ b/src/views/tasks/TaskDetailView.vue
@@ -512,9 +512,6 @@ const props = defineProps({
 	},
 })
 
-defineEmits(['close'])
-const attrs = useAttrs()
-console.log(JSON.parse(JSON.stringify(attrs)))
 const router = useRouter()
 const {t} = useI18n({useScope: 'global'})
 
-- 
2.40.1


From 308cfe47484ac54f0f9c3c08b6a092656f7b91d9 Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Tue, 22 Nov 2022 18:30:57 +0100
Subject: [PATCH 08/15] feat: rename backdropView to backdropRoute(Path)

---
 src/components/home/TheNavigation.vue         |  4 +--
 src/components/home/contentAuth.vue           | 11 +++----
 .../list/list-settings-dropdown.vue           | 18 +++++------
 .../namespace/namespace-settings-dropdown.vue | 12 +++----
 src/components/tasks/GanttChart.vue           |  2 +-
 src/components/tasks/partials/kanban-card.vue |  2 +-
 .../tasks/partials/singleTaskInList.vue       |  2 +-
 src/composables/useRouteWithModal.ts          | 31 ++++++++++---------
 src/views/Home.vue                            |  2 +-
 src/views/labels/ListLabels.vue               |  4 +--
 src/views/list/ListTable.vue                  |  2 +-
 src/views/list/settings/edit.vue              |  2 +-
 src/views/namespaces/ListNamespaces.vue       | 12 +++----
 src/views/namespaces/settings/edit.vue        |  2 +-
 src/views/tasks/TaskDetailView.vue            |  4 +--
 src/views/teams/ListTeams.vue                 |  4 +--
 16 files changed, 57 insertions(+), 57 deletions(-)

diff --git a/src/components/home/TheNavigation.vue b/src/components/home/TheNavigation.vue
index 07560b252..8ee7eea60 100644
--- a/src/components/home/TheNavigation.vue
+++ b/src/components/home/TheNavigation.vue
@@ -16,7 +16,7 @@
 					{{ currentList.title === '' ? $t('misc.loading') : getListTitle(currentList) }}
 				</h1>
 
-				<BaseButton :to="{name: 'list.info', params: {listId: currentList.id}, state: {backdropView: $route.fullPath}}" class="info-button">
+				<BaseButton :to="{name: 'list.info', params: {listId: currentList.id}, state: {backdropRoutePath: $route.fullPath}}" class="info-button">
 					<icon icon="circle-info"/>
 				</BaseButton>
 
@@ -75,7 +75,7 @@
 						{{ $t('keyboardShortcuts.title') }}
 					</dropdown-item>
 					<dropdown-item
-						:to="{name: 'about', state: {backdropView: $route.fullPath}}"
+						:to="{name: 'about', state: {backdropRoutePath: $route.fullPath}}"
 					>
 						{{ $t('about.title') }}
 					</dropdown-item>
diff --git a/src/components/home/contentAuth.vue b/src/components/home/contentAuth.vue
index cabc6d1d7..e28256910 100644
--- a/src/components/home/contentAuth.vue
+++ b/src/components/home/contentAuth.vue
@@ -32,14 +32,13 @@
 
 				<quick-actions/>
 
-				<router-view v-if="routeWithModal" :route="routeWithModal" v-slot="{ Component }">
-					<!-- <keep-alive :include="['list.list', 'list.gantt', 'list.table', 'list.kanban']"> -->
+				<router-view :route="baseRoute" v-slot="{ Component }">
+					<keep-alive :include="['list.list', 'list.gantt', 'list.table', 'list.kanban']">
 						<component :is="Component"/>
-						<!-- test -->
-					<!-- </keep-alive> -->
+					</keep-alive>
 				</router-view>
 
-				<component :is="currentModal" />
+				<component :is="modalRoute" />
 
 				<BaseButton
 					class="keyboard-shortcuts-button d-print-none"
@@ -67,7 +66,7 @@ import {useLabelStore} from '@/stores/labels'
 import {useRouteWithModal} from '@/composables/useRouteWithModal'
 import {useRenewTokenOnFocus} from '@/composables/useRenewTokenOnFocus'
 
-const {routeWithModal, currentModal} = useRouteWithModal()
+const {baseRoute, modalRoute} = useRouteWithModal()
 
 const baseStore = useBaseStore()
 const background = computed(() => baseStore.background)
diff --git a/src/components/list/list-settings-dropdown.vue b/src/components/list/list-settings-dropdown.vue
index ee60b8a92..0a0c13414 100644
--- a/src/components/list/list-settings-dropdown.vue
+++ b/src/components/list/list-settings-dropdown.vue
@@ -10,13 +10,13 @@
 
 		<template v-if="isSavedFilter(list)">
 			<dropdown-item
-				:to="{ name: 'filter.settings.edit', params: { listId: list.id }, state: {backdropView: $route.fullPath} }"
+				:to="{ name: 'filter.settings.edit', params: { listId: list.id }, state: {backdropRoutePath: $route.fullPath} }"
 				icon="pen"
 			>
 				{{ $t('menu.edit') }}
 			</dropdown-item>
 			<dropdown-item
-				:to="{ name: 'filter.settings.delete', params: { listId: list.id }, state: {backdropView: $route.fullPath} }"
+				:to="{ name: 'filter.settings.delete', params: { listId: list.id }, state: {backdropRoutePath: $route.fullPath} }"
 				icon="trash-alt"
 			>
 				{{ $t('misc.delete') }}
@@ -25,7 +25,7 @@
 
 		<template v-else-if="list.isArchived">
 			<dropdown-item
-				:to="{ name: 'list.settings.archive', params: { listId: list.id }, state: {backdropView: $route.fullPath} }"
+				:to="{ name: 'list.settings.archive', params: { listId: list.id }, state: {backdropRoutePath: $route.fullPath} }"
 				icon="archive"
 			>
 				{{ $t('menu.unarchive') }}
@@ -33,32 +33,32 @@
 		</template>
 		<template v-else>
 			<dropdown-item
-				:to="{ name: 'list.settings.edit', params: { listId: list.id }, state: {backdropView: $route.fullPath} }"
+				:to="{ name: 'list.settings.edit', params: { listId: list.id }, state: {backdropRoutePath: $route.fullPath} }"
 				icon="pen"
 			>
 				{{ $t('menu.edit') }}
 			</dropdown-item>
 			<dropdown-item
 				v-if="backgroundsEnabled"
-				:to="{ name: 'list.settings.background', params: { listId: list.id }, state: {backdropView: $route.fullPath} }"
+				:to="{ name: 'list.settings.background', params: { listId: list.id }, state: {backdropRoutePath: $route.fullPath} }"
 				icon="image"
 			>
 				{{ $t('menu.setBackground') }}
 			</dropdown-item>
 			<dropdown-item
-				:to="{ name: 'list.settings.share', params: { listId: list.id }, state: {backdropView: $route.fullPath} }"
+				:to="{ name: 'list.settings.share', params: { listId: list.id }, state: {backdropRoutePath: $route.fullPath} }"
 				icon="share-alt"
 			>
 				{{ $t('menu.share') }}
 			</dropdown-item>
 			<dropdown-item
-				:to="{ name: 'list.settings.duplicate', params: { listId: list.id }, state: {backdropView: $route.fullPath} }"
+				:to="{ name: 'list.settings.duplicate', params: { listId: list.id }, state: {backdropRoutePath: $route.fullPath} }"
 				icon="paste"
 			>
 				{{ $t('menu.duplicate') }}
 			</dropdown-item>
 			<dropdown-item
-				:to="{ name: 'list.settings.archive', params: { listId: list.id }, state: {backdropView: $route.fullPath} }"
+				:to="{ name: 'list.settings.archive', params: { listId: list.id }, state: {backdropRoutePath: $route.fullPath} }"
 				icon="archive"
 			>
 				{{ $t('menu.archive') }}
@@ -73,7 +73,7 @@
 				type="dropdown"
 			/>
 			<dropdown-item
-				:to="{ name: 'list.settings.delete', params: { listId: list.id }, state: {backdropView: $route.fullPath} }"
+				:to="{ name: 'list.settings.delete', params: { listId: list.id }, state: {backdropRoutePath: $route.fullPath} }"
 				icon="trash-alt"
 				class="has-text-danger"
 			>
diff --git a/src/components/namespace/namespace-settings-dropdown.vue b/src/components/namespace/namespace-settings-dropdown.vue
index d8a050688..5f16dbe38 100644
--- a/src/components/namespace/namespace-settings-dropdown.vue
+++ b/src/components/namespace/namespace-settings-dropdown.vue
@@ -10,7 +10,7 @@
 
 		<template v-if="namespace.isArchived">
 			<dropdown-item
-				:to="{ name: 'namespace.settings.archive', params: { id: namespace.id }, state: { backdropView: $route.fullPath } }"
+				:to="{ name: 'namespace.settings.archive', params: { id: namespace.id }, state: { backdropRoutePath: $route.fullPath } }"
 				icon="archive"
 			>
 				{{ $t('menu.unarchive') }}
@@ -18,25 +18,25 @@
 		</template>
 		<template v-else>
 			<dropdown-item
-				:to="{ name: 'namespace.settings.edit', params: { id: namespace.id }, state: { backdropView: $route.fullPath } }"
+				:to="{ name: 'namespace.settings.edit', params: { id: namespace.id }, state: { backdropRoutePath: $route.fullPath } }"
 				icon="pen"
 			>
 				{{ $t('menu.edit') }}
 			</dropdown-item>
 			<dropdown-item
-				:to="{ name: 'namespace.settings.share', params: { namespaceId: namespace.id }, state: { backdropView: $route.fullPath } }"
+				:to="{ name: 'namespace.settings.share', params: { namespaceId: namespace.id }, state: { backdropRoutePath: $route.fullPath } }"
 				icon="share-alt"
 			>
 				{{ $t('menu.share') }}
 			</dropdown-item>
 			<dropdown-item
-				:to="{ name: 'list.create', params: { namespaceId: namespace.id }, state: { backdropView: $route.fullPath } }"
+				:to="{ name: 'list.create', params: { namespaceId: namespace.id }, state: { backdropRoutePath: $route.fullPath } }"
 				icon="plus"
 			>
 				{{ $t('menu.newList') }}
 			</dropdown-item>
 			<dropdown-item
-				:to="{ name: 'namespace.settings.archive', params: { id: namespace.id }, state: { backdropView: $route.fullPath } }"
+				:to="{ name: 'namespace.settings.archive', params: { id: namespace.id }, state: { backdropRoutePath: $route.fullPath } }"
 				icon="archive"
 			>
 				{{ $t('menu.archive') }}
@@ -51,7 +51,7 @@
 				type="dropdown"
 			/>
 			<dropdown-item
-				:to="{ name: 'namespace.settings.delete', params: { id: namespace.id }, state: { backdropView: $route.fullPath } }"
+				:to="{ name: 'namespace.settings.delete', params: { id: namespace.id }, state: { backdropRoutePath: $route.fullPath } }"
 				icon="trash-alt"
 				class="has-text-danger"
 			>
diff --git a/src/components/tasks/GanttChart.vue b/src/components/tasks/GanttChart.vue
index c2580d1ca..6c80b8370 100644
--- a/src/components/tasks/GanttChart.vue
+++ b/src/components/tasks/GanttChart.vue
@@ -153,7 +153,7 @@ function openTask(e: {
 	router.push({
 		name: 'task.detail',
 		params: {id: e.bar.ganttBarConfig.id},
-		state: {backdropView: router.currentRoute.value.fullPath},
+		state: {backdropRoutePath: router.currentRoute.value.fullPath},
 	})
 }
 
diff --git a/src/components/tasks/partials/kanban-card.vue b/src/components/tasks/partials/kanban-card.vue
index 4bf4fa472..25aa425a6 100644
--- a/src/components/tasks/partials/kanban-card.vue
+++ b/src/components/tasks/partials/kanban-card.vue
@@ -121,7 +121,7 @@ function openTaskDetail() {
 	router.push({
 		name: 'task.detail',
 		params: {id: props.task.id},
-		state: {backdropView: router.currentRoute.value.fullPath},
+		state: {backdropRoutePath: router.currentRoute.value.fullPath},
 	})
 }
 
diff --git a/src/components/tasks/partials/singleTaskInList.vue b/src/components/tasks/partials/singleTaskInList.vue
index 844017ec8..0a64772ea 100644
--- a/src/components/tasks/partials/singleTaskInList.vue
+++ b/src/components/tasks/partials/singleTaskInList.vue
@@ -225,7 +225,7 @@ const taskDetailRoute = computed(() => ({
 	name: 'task.detail',
 	params: {id: task.value.id},
 	// TODO: re-enable opening task detail in modal
-	// state: { backdropView: router.currentRoute.value.fullPath },
+	// state: { backdropRoutePath: router.currentRoute.value.fullPath },
 }))
 
 
diff --git a/src/composables/useRouteWithModal.ts b/src/composables/useRouteWithModal.ts
index ba0f818de..ed4d026a2 100644
--- a/src/composables/useRouteWithModal.ts
+++ b/src/composables/useRouteWithModal.ts
@@ -2,8 +2,8 @@ import { computed, shallowRef, watch, h, type VNode, ref } from 'vue'
 import { useRoute, useRouter, loadRouteLocation, type RouteLocationNormalizedLoaded, type RouteLocationRaw } from 'vue-router'
 import router from '@/router'
 
-	// this is adapted from vue-router
-	// https://github.com/vuejs/vue-router-next/blob/798cab0d1e21f9b4d45a2bd12b840d2c7415f38a/src/RouterView.ts#L125
+// this is adapted from vue-router
+// https://github.com/vuejs/vue-router-next/blob/798cab0d1e21f9b4d45a2bd12b840d2c7415f38a/src/RouterView.ts#L125
 function getRouteProps(route: RouteLocationNormalizedLoaded) {
 	const routePropsOption = route.matched[0]?.props.default
 	return routePropsOption
@@ -23,11 +23,11 @@ export function useRouteWithModal() {
 	const router = useRouter()
 	const route = useRoute()
 	
-	const backdropView = computed<RouteLocationRaw | undefined>(() => {
+	const historyStateBackdropRoutePath = computed<RouteLocationRaw | undefined>(() => {
 		// every time the fullPath changes we check the history state
 		// this happens also initially
 		return route.fullPath
-		? window.history.state?.backdropView
+		? window.history.state?.backdropRoutePath
 		: undefined
 	})
 	
@@ -38,13 +38,14 @@ export function useRouteWithModal() {
 
 	const baseRoute = shallowRef<RouteLocationNormalizedLoaded>()
 	watch(
-		[backdropView, routerIsReady],
+		[routerIsReady, historyStateBackdropRoutePath],
 		async () => {
 			if (routerIsReady.value === false || !route.fullPath) {
+				// wait until we can work with routes
 				return
 			}
 
-			if (backdropView.value === undefined) {
+			if (historyStateBackdropRoutePath.value === undefined) {
 				if (route.meta?.showAsModal !== true) {
 					baseRoute.value = route
 					return
@@ -58,34 +59,34 @@ export function useRouteWithModal() {
 	
 			// we get the resolved route from the fullpath
 			// and wait for the route component to be loaded before we assign it
-			baseRoute.value = await resolveAndLoadRoute(backdropView.value)
+			baseRoute.value = await resolveAndLoadRoute(historyStateBackdropRoutePath.value)
 		},
 		{immediate: true},
 	)
 
 	const backdropRoute = computed(() => route.fullPath !== baseRoute.value?.fullPath ? baseRoute.value : undefined)
 
-	const currentModal = shallowRef<VNode>()
+	const modalRoute = shallowRef<VNode>()
 	watch(
-		[backdropRoute, baseRoute, route],
+		[backdropRoute, route],
 		() => {
 			if (routerIsReady.value === false || !route.fullPath || !backdropRoute.value) {
-				currentModal.value = undefined
+				modalRoute.value = undefined
 				return
 			}
 
 			const props = getRouteProps(route)
 
-			props.backdropView = backdropRoute.value
+			props.backdropRoutePath = backdropRoute.value.fullPath
 			props.onClose = closeModal
 
 			const component = route.matched[0]?.components?.default
 
 			if (!component) {
-				currentModal.value = undefined
+				modalRoute.value = undefined
 				return
 			}
-			currentModal.value = h(component, props)
+			modalRoute.value = h(component, props)
 		},
 		{immediate: true},
 	)
@@ -105,8 +106,8 @@ export function useRouteWithModal() {
 	}
 
 	return {
-		routeWithModal: baseRoute,
-		currentModal,
+		baseRoute,
+		modalRoute,
 		closeModal,
 	}
 }
\ No newline at end of file
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 783266fe7..271cd0e34 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -21,7 +21,7 @@
 			<template v-if="defaultNamespaceId > 0">
 				<p class="mt-4">{{ $t('home.list.newText') }}</p>
 				<x-button
-					:to="{ name: 'list.create', params: { namespaceId: defaultNamespaceId }, state: { backdropView: $route.fullPath } }"
+					:to="{ name: 'list.create', params: { namespaceId: defaultNamespaceId }, state: { backdropRoutePath: $route.fullPath } }"
 					:shadow="false"
 					class="ml-2"
 				>
diff --git a/src/views/labels/ListLabels.vue b/src/views/labels/ListLabels.vue
index 23c93270c..ad4a444dd 100644
--- a/src/views/labels/ListLabels.vue
+++ b/src/views/labels/ListLabels.vue
@@ -3,7 +3,7 @@
 		<x-button
 			:to="{
 				name:'labels.create',
-				state: { backdropView: $route.fullPath }
+				state: { backdropRoutePath: $route.fullPath }
 			}"
 			class="is-pulled-right"
 			icon="plus"
@@ -20,7 +20,7 @@
 				{{ $t('label.newCTA') }}
 				<router-link :to="{
 					name:'labels.create',
-					state: { backdropView: $route.fullPath }
+					state: { backdropRoutePath: $route.fullPath }
 				}">{{ $t('label.create.title') }}.</router-link>
 			</p>
 		</div>
diff --git a/src/views/list/ListTable.vue b/src/views/list/ListTable.vue
index 5d6fd18e3..537d9faff 100644
--- a/src/views/list/ListTable.vue
+++ b/src/views/list/ListTable.vue
@@ -282,7 +282,7 @@ const taskDetailRoutes = computed(() => Object.fromEntries(
 		{
 			name: 'task.detail',
 			params: {id},
-			// state: { backdropView: router.currentRoute.value.fullPath },
+			// state: { backdropRoutePath: router.currentRoute.value.fullPath },
 		},
 	])),
 ))
diff --git a/src/views/list/settings/edit.vue b/src/views/list/settings/edit.vue
index eb3085c22..5b6ba55cb 100644
--- a/src/views/list/settings/edit.vue
+++ b/src/views/list/settings/edit.vue
@@ -5,7 +5,7 @@
 		:primary-label="$t('misc.save')"
 		@primary="save"
 		:tertiary="$t('misc.delete')"
-		@tertiary="$router.push({ name: 'list.settings.delete', params: { id: listId }, state: {backdropView: $route.fullPath} })"
+		@tertiary="$router.push({ name: 'list.settings.delete', params: { id: listId }, state: {backdropRoutePath: $route.fullPath} })"
 		#default="{onClose}"
 	>
 		<div class="field">
diff --git a/src/views/namespaces/ListNamespaces.vue b/src/views/namespaces/ListNamespaces.vue
index f87b7c1cf..5afe5a60d 100644
--- a/src/views/namespaces/ListNamespaces.vue
+++ b/src/views/namespaces/ListNamespaces.vue
@@ -6,10 +6,10 @@
 			</fancycheckbox>
 
 			<div class="action-buttons">
-				<x-button :to="{name: 'filters.create', state: {backdropView: $route.fullPath}}" icon="filter">
+				<x-button :to="{name: 'filters.create', state: {backdropRoutePath: $route.fullPath}}" icon="filter">
 					{{ $t('filters.create.title') }}
 				</x-button>
-				<x-button :to="{name: 'namespace.create', state: {backdropView: $route.fullPath}}" icon="plus" v-cy="'new-namespace'">
+				<x-button :to="{name: 'namespace.create', state: {backdropRoutePath: $route.fullPath}}" icon="plus" v-cy="'new-namespace'">
 					{{ $t('namespace.create.title') }}
 				</x-button>
 			</div>
@@ -17,7 +17,7 @@
 
 		<p v-if="namespaces.length === 0" class="has-text-centered has-text-grey mt-4 is-italic">
 			{{ $t('namespace.noneAvailable') }}
-			<BaseButton :to="{name: 'namespace.create', state: {backdropView: $route.fullPath}}">
+			<BaseButton :to="{name: 'namespace.create', state: {backdropRoutePath: $route.fullPath}}">
 				{{ $t('namespace.create.title') }}.
 			</BaseButton>
 		</p>
@@ -25,7 +25,7 @@
 		<section :key="`n${n.id}`" class="namespace" v-for="n in namespaces">
 			<x-button
 				v-if="n.id > 0 && n.lists.length > 0"
-				:to="{name: 'list.create', params: {namespaceId:  n.id}, state: { backdropView: $route.fullPath }}"
+				:to="{name: 'list.create', params: {namespaceId:  n.id}, state: { backdropRoutePath: $route.fullPath }}"
 				class="is-pulled-right"
 				variant="secondary"
 				icon="plus"
@@ -34,7 +34,7 @@
 			</x-button>
 			<x-button
 				v-if="n.isArchived"
-				:to="{name: 'namespace.settings.archive', params: {id:  n.id}, state: { backdropView: $route.fullPath } }"
+				:to="{name: 'namespace.settings.archive', params: {id:  n.id}, state: { backdropRoutePath: $route.fullPath } }"
 				class="is-pulled-right mr-4"
 				variant="secondary"
 				icon="archive"
@@ -51,7 +51,7 @@
 
 			<p v-if="n.lists.length === 0" class="has-text-centered has-text-grey mt-4 is-italic">
 				{{ $t('namespace.noLists') }}
-				<BaseButton :to="{name: 'list.create', params: {namespaceId:  n.id}, state: { backdropView: $route.fullPath }}">
+				<BaseButton :to="{name: 'list.create', params: {namespaceId:  n.id}, state: { backdropRoutePath: $route.fullPath }}">
 					{{ $t('namespace.createList') }}
 				</BaseButton>
 			</p>
diff --git a/src/views/namespaces/settings/edit.vue b/src/views/namespaces/settings/edit.vue
index 2d5e4edb0..651c70d27 100644
--- a/src/views/namespaces/settings/edit.vue
+++ b/src/views/namespaces/settings/edit.vue
@@ -5,7 +5,7 @@
 		:primary-label="$t('misc.save')"
 		@primary="save"
 		:tertiary="$t('misc.delete')"
-		@tertiary="$router.push({ name: 'namespace.settings.delete', params: { id: $route.params.id }, state: { backdropView: $route.fullPath } })"
+		@tertiary="$router.push({ name: 'namespace.settings.delete', params: { id: $route.params.id }, state: { backdropRoutePath: $route.fullPath } })"
 		#default="{onClose}"
 	>
 		<form @submit.prevent="save(onClose)">
diff --git a/src/views/tasks/TaskDetailView.vue b/src/views/tasks/TaskDetailView.vue
index cc302951a..2d9573441 100644
--- a/src/views/tasks/TaskDetailView.vue
+++ b/src/views/tasks/TaskDetailView.vue
@@ -507,7 +507,7 @@ const props = defineProps({
 		type: Number as PropType<ITask['id']>,
 		required: true,
 	},
-	backdropView: {
+	backdropRoutePath: {
 		type: String as PropType<RouteLocation['fullPath']>,
 	},
 })
@@ -580,7 +580,7 @@ const color = computed(() => {
 
 const hasAttachments = computed(() => attachmentStore.attachments.length > 0)
 
-const isModal = computed(() => Boolean(props.backdropView))
+const isModal = computed(() => Boolean(props.backdropRoutePath))
 
 function attachmentUpload(file: File, onSuccess?: (url: string) => void) {
 	return uploadFile(taskId.value, file, onSuccess)
diff --git a/src/views/teams/ListTeams.vue b/src/views/teams/ListTeams.vue
index 71e2e2aba..6111621da 100644
--- a/src/views/teams/ListTeams.vue
+++ b/src/views/teams/ListTeams.vue
@@ -3,7 +3,7 @@
 		<x-button
 			:to="{
 				name:'teams.create',
-				state: { backdropView: $route.fullPath },
+				state: { backdropRoutePath: $route.fullPath },
 			}"
 			class="is-pulled-right"
 			icon="plus"
@@ -23,7 +23,7 @@
 			{{ $t('team.noTeams') }}
 			<router-link :to="{
 				name: 'teams.create',
-				state: { backdropView: $route.fullPath },
+				state: { backdropRoutePath: $route.fullPath },
 			}">
 				{{ $t('team.create.title') }}.
 			</router-link>
-- 
2.40.1


From e6b353f8acc558446f639cbffb7ead1ec3f7a877 Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Tue, 22 Nov 2022 18:41:30 +0100
Subject: [PATCH 09/15] feat: add isModal prop

---
 src/composables/useRouteWithModal.ts |  1 +
 src/views/tasks/TaskDetailView.vue   | 11 +++++------
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/composables/useRouteWithModal.ts b/src/composables/useRouteWithModal.ts
index ed4d026a2..518654f5f 100644
--- a/src/composables/useRouteWithModal.ts
+++ b/src/composables/useRouteWithModal.ts
@@ -77,6 +77,7 @@ export function useRouteWithModal() {
 
 			const props = getRouteProps(route)
 
+			props.isModal = true
 			props.backdropRoutePath = backdropRoute.value.fullPath
 			props.onClose = closeModal
 
diff --git a/src/views/tasks/TaskDetailView.vue b/src/views/tasks/TaskDetailView.vue
index 2d9573441..79882685e 100644
--- a/src/views/tasks/TaskDetailView.vue
+++ b/src/views/tasks/TaskDetailView.vue
@@ -447,8 +447,8 @@
 </template>
 
 <script lang="ts" setup>
-import {ref, reactive, toRef, shallowReactive, computed, watch, nextTick, type PropType, useAttrs} from 'vue'
-import {useRouter, type RouteLocation} from 'vue-router'
+import {ref, reactive, toRef, shallowReactive, computed, watch, nextTick, type PropType} from 'vue'
+import {useRouter} from 'vue-router'
 import {useI18n} from 'vue-i18n'
 import {unrefElement} from '@vueuse/core'
 import cloneDeep from 'lodash.clonedeep'
@@ -507,8 +507,9 @@ const props = defineProps({
 		type: Number as PropType<ITask['id']>,
 		required: true,
 	},
-	backdropRoutePath: {
-		type: String as PropType<RouteLocation['fullPath']>,
+	isModal: {
+		type: Boolean,
+		default: false,
 	},
 })
 
@@ -580,8 +581,6 @@ const color = computed(() => {
 
 const hasAttachments = computed(() => attachmentStore.attachments.length > 0)
 
-const isModal = computed(() => Boolean(props.backdropRoutePath))
-
 function attachmentUpload(file: File, onSuccess?: (url: string) => void) {
 	return uploadFile(taskId.value, file, onSuccess)
 }
-- 
2.40.1


From 440e90230a29bd4e2631de53713ccdb1367b488c Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Tue, 22 Nov 2022 18:41:55 +0100
Subject: [PATCH 10/15] feat: enable modal for singleTaskInList and ListTable

---
 src/components/tasks/partials/singleTaskInList.vue | 14 +++++---------
 src/views/list/ListTable.vue                       |  7 +++----
 2 files changed, 8 insertions(+), 13 deletions(-)

diff --git a/src/components/tasks/partials/singleTaskInList.vue b/src/components/tasks/partials/singleTaskInList.vue
index 0a64772ea..b20fba9fa 100644
--- a/src/components/tasks/partials/singleTaskInList.vue
+++ b/src/components/tasks/partials/singleTaskInList.vue
@@ -13,7 +13,11 @@
 		/>
 		
 		<router-link
-			:to="taskDetailRoute"
+			:to="{
+				name: 'task.detail',
+				params: {id: task.id},
+				state: { backdropRoutePath: $route.fullPath },
+			}"
 			:class="{ 'done': task.done}"
 			class="tasktext"
 		>
@@ -221,14 +225,6 @@ const currentList = computed(() => {
 	} : baseStore.currentList
 })
 
-const taskDetailRoute = computed(() => ({
-	name: 'task.detail',
-	params: {id: task.value.id},
-	// TODO: re-enable opening task detail in modal
-	// state: { backdropRoutePath: router.currentRoute.value.fullPath },
-}))
-
-
 async function markAsDone(checked: boolean) {
 	const updateFunc = async () => {
 		const newTask = await taskStore.update(task.value)
diff --git a/src/views/list/ListTable.vue b/src/views/list/ListTable.vue
index 537d9faff..ccab81831 100644
--- a/src/views/list/ListTable.vue
+++ b/src/views/list/ListTable.vue
@@ -181,7 +181,7 @@
 
 <script setup lang="ts">
 import {toRef, computed, type Ref} from 'vue'
-
+import {useRoute} from 'vue-router'
 import {useStorage} from '@vueuse/core'
 
 import ListWrapper from '@/components/list/ListWrapper.vue'
@@ -274,15 +274,14 @@ function sort(property: keyof SortBy) {
 	sortByParam.value = sortBy.value
 }
 
-// TODO: re-enable opening task detail in modal
-// const router = useRouter()
+const route = useRoute()
 const taskDetailRoutes = computed(() => Object.fromEntries(
 	tasks.value.map(({id}) => ([
 		id,
 		{
 			name: 'task.detail',
 			params: {id},
-			// state: { backdropRoutePath: router.currentRoute.value.fullPath },
+			state: { backdropRoutePath: route.fullPath },
 		},
 	])),
 ))
-- 
2.40.1


From 7b59f14465447813a9ff73a400898713ff9c7464 Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Tue, 22 Nov 2022 20:56:56 +0100
Subject: [PATCH 11/15] feat: add modal focus trap

---
 package.json                  |   2 +
 pnpm-lock.yaml                | 110 +++++++++++++++++++++++++++++++---
 src/components/misc/modal.vue |  17 +++++-
 3 files changed, 120 insertions(+), 9 deletions(-)

diff --git a/package.json b/package.json
index a9e0336bd..64164f5d1 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
     "@types/lodash.clonedeep": "4.5.7",
     "@types/sortablejs": "1.15.0",
     "@vueuse/core": "9.6.0",
+    "@vueuse/integrations": "9.6.0",
     "@vueuse/router": "9.6.0",
     "axios": "0.27.2",
     "blurhash": "2.0.4",
@@ -45,6 +46,7 @@
     "flatpickr": "4.6.13",
     "flexsearch": "0.7.21",
     "floating-vue": "2.0.0-beta.20",
+    "focus-trap": "^7.1.0",
     "highlight.js": "11.6.0",
     "is-touch-device": "1.0.1",
     "lodash.clonedeep": "4.5.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 753bbdf5e..9549e8c54 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -33,6 +33,7 @@ specifiers:
   '@vue/test-utils': 2.2.4
   '@vue/tsconfig': 0.1.3
   '@vueuse/core': 9.6.0
+  '@vueuse/integrations': 9.6.0
   '@vueuse/router': 9.6.0
   autoprefixer: 10.4.13
   axios: 0.27.2
@@ -56,6 +57,7 @@ specifiers:
   flatpickr: 4.6.13
   flexsearch: 0.7.21
   floating-vue: 2.0.0-beta.20
+  focus-trap: ^7.1.0
   happy-dom: 7.7.0
   highlight.js: 11.6.0
   is-touch-device: 1.0.1
@@ -104,6 +106,7 @@ dependencies:
   '@types/lodash.clonedeep': 4.5.7
   '@types/sortablejs': 1.15.0
   '@vueuse/core': 9.6.0_vue@3.2.45
+  '@vueuse/integrations': 9.6.0_v6so3rexzmt44vm4rsvyznwkka
   '@vueuse/router': 9.6.0_xsxatmlnmmg5bcuv3xdnj6fj7y
   axios: 0.27.2
   blurhash: 2.0.4
@@ -118,6 +121,7 @@ dependencies:
   flatpickr: 4.6.13
   flexsearch: 0.7.21
   floating-vue: 2.0.0-beta.20_vue@3.2.45
+  focus-trap: 7.1.0
   highlight.js: 11.6.0
   is-touch-device: 1.0.1
   lodash.clonedeep: 4.5.0
@@ -3236,13 +3240,18 @@ packages:
       - supports-color
     dev: true
 
+  /@typescript-eslint/types/5.43.0:
+    resolution: {integrity: sha512-jpsbcD0x6AUvV7tyOlyvon0aUsQpF8W+7TpJntfCUWU1qaIKu2K34pMwQKSzQH8ORgUrGYY6pVIh1Pi8TNeteg==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    dev: true
+
   /@typescript-eslint/types/5.44.0:
     resolution: {integrity: sha512-Tp+zDnHmGk4qKR1l+Y1rBvpjpm5tGXX339eAlRBDg+kgZkz9Bw+pqi4dyseOZMsGuSH69fYfPJCBKBrbPCxYFQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dev: true
 
-  /@typescript-eslint/typescript-estree/5.44.0_mmt6grxdx77rvjuvebzbfquz6y:
-    resolution: {integrity: sha512-M6Jr+RM7M5zeRj2maSfsZK2660HKAJawv4Ud0xT+yauyvgrsHu276VtXlKDFnEmhG+nVEd0fYZNXGoAgxwDWJw==}
+  /@typescript-eslint/typescript-estree/5.43.0_mmt6grxdx77rvjuvebzbfquz6y:
+    resolution: {integrity: sha512-BZ1WVe+QQ+igWal2tDbNg1j2HWUkAa+CVqdU79L4HP9izQY6CNhXfkNwd1SS4+sSZAP/EthI1uiCSY/+H0pROg==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       typescript: '*'
@@ -3250,8 +3259,8 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/types': 5.44.0
-      '@typescript-eslint/visitor-keys': 5.44.0
+      '@typescript-eslint/types': 5.43.0
+      '@typescript-eslint/visitor-keys': 5.43.0
       debug: 4.3.4_supports-color@9.2.1
       globby: 11.1.0
       is-glob: 4.0.3
@@ -3262,6 +3271,27 @@ packages:
       - supports-color
     dev: true
 
+  /@typescript-eslint/typescript-estree/5.43.0_typescript@4.9.3:
+    resolution: {integrity: sha512-BZ1WVe+QQ+igWal2tDbNg1j2HWUkAa+CVqdU79L4HP9izQY6CNhXfkNwd1SS4+sSZAP/EthI1uiCSY/+H0pROg==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      '@typescript-eslint/types': 5.43.0
+      '@typescript-eslint/visitor-keys': 5.43.0
+      debug: 4.3.4
+      globby: 11.1.0
+      is-glob: 4.0.3
+      semver: 7.3.7
+      tsutils: 3.21.0_typescript@4.9.3
+      typescript: 4.9.3
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /@typescript-eslint/typescript-estree/5.44.0_typescript@4.9.3:
     resolution: {integrity: sha512-M6Jr+RM7M5zeRj2maSfsZK2660HKAJawv4Ud0xT+yauyvgrsHu276VtXlKDFnEmhG+nVEd0fYZNXGoAgxwDWJw==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -3303,6 +3333,14 @@ packages:
       - typescript
     dev: true
 
+  /@typescript-eslint/visitor-keys/5.43.0:
+    resolution: {integrity: sha512-icl1jNH/d18OVHLfcwdL3bWUKsBeIiKYTGxMJCoGe7xFht+E4QgzOqoWYrU8XSLJWhVw8nTacbm03v23J/hFTg==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    dependencies:
+      '@typescript-eslint/types': 5.43.0
+      eslint-visitor-keys: 3.3.0
+    dev: true
+
   /@typescript-eslint/visitor-keys/5.44.0:
     resolution: {integrity: sha512-a48tLG8/4m62gPFbJ27FxwCOqPKxsb8KC3HkmYoq2As/4YyjQl1jDbRr1s63+g4FS/iIehjmN3L5UjmKva1HzQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -3661,6 +3699,54 @@ packages:
       - vue
     dev: false
 
+  /@vueuse/integrations/9.6.0_v6so3rexzmt44vm4rsvyznwkka:
+    resolution: {integrity: sha512-+rs2OWY/3spxoAGQMnlHQpxf8ErAYf4D1bT0aXaPnxphmtYgexm6KIjTFpBbcQnHwVi1g2ET1SJoQL16yDrgWA==}
+    peerDependencies:
+      async-validator: '*'
+      axios: '*'
+      change-case: '*'
+      drauu: '*'
+      focus-trap: '*'
+      fuse.js: '*'
+      idb-keyval: '*'
+      jwt-decode: '*'
+      nprogress: '*'
+      qrcode: '*'
+      universal-cookie: '*'
+    peerDependenciesMeta:
+      async-validator:
+        optional: true
+      axios:
+        optional: true
+      change-case:
+        optional: true
+      drauu:
+        optional: true
+      focus-trap:
+        optional: true
+      fuse.js:
+        optional: true
+      idb-keyval:
+        optional: true
+      jwt-decode:
+        optional: true
+      nprogress:
+        optional: true
+      qrcode:
+        optional: true
+      universal-cookie:
+        optional: true
+    dependencies:
+      '@vueuse/core': 9.6.0_vue@3.2.45
+      '@vueuse/shared': 9.6.0_vue@3.2.45
+      axios: 0.27.2
+      focus-trap: 7.1.0
+      vue-demi: 0.12.1_vue@3.2.45
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+    dev: false
+
   /@vueuse/metadata/9.6.0:
     resolution: {integrity: sha512-sIC8R+kWkIdpi5X2z2Gk8TRYzmczDwHRhEFfCu2P+XW2JdPoXrziqsGpDDsN7ykBx4ilwieS7JUIweVGhvZ93w==}
     dev: false
@@ -5775,7 +5861,7 @@ packages:
     resolution: {integrity: sha512-lR78AugfUSBojwlSRZBeEqQ1l8LI7rbxOl1qTUnGLcjZQDjZmrZCb7R46rK8U8B5WzFvJrxa7fEBA8FoD/n5fA==}
     engines: {node: ^12.20.0 || ^14.14.0 || >=16.0.0}
     dependencies:
-      '@typescript-eslint/typescript-estree': 5.44.0_typescript@4.9.3
+      '@typescript-eslint/typescript-estree': 5.43.0_typescript@4.9.3
       ast-module-types: 3.0.0
       node-source-walk: 5.0.0
       typescript: 4.9.3
@@ -5787,7 +5873,7 @@ packages:
     resolution: {integrity: sha512-lR78AugfUSBojwlSRZBeEqQ1l8LI7rbxOl1qTUnGLcjZQDjZmrZCb7R46rK8U8B5WzFvJrxa7fEBA8FoD/n5fA==}
     engines: {node: ^12.20.0 || ^14.14.0 || >=16.0.0}
     dependencies:
-      '@typescript-eslint/typescript-estree': 5.44.0_mmt6grxdx77rvjuvebzbfquz6y
+      '@typescript-eslint/typescript-estree': 5.43.0_mmt6grxdx77rvjuvebzbfquz6y
       ast-module-types: 3.0.0
       node-source-walk: 5.0.0
       typescript: 4.9.3
@@ -7008,6 +7094,12 @@ packages:
     resolution: {integrity: sha512-GRnmB5gPyJpAhTQdSZTSp9uaPSvl09KoYcMQtsB9rQoOmzs9dH6ffeccH+Z+cv6P68Hu5bC6JjRh4Ah/mHSNRw==}
     dev: true
 
+  /focus-trap/7.1.0:
+    resolution: {integrity: sha512-CuJvwUBfJCWcU6fc4xr3UwMF5vWnox4isXAixCwrPzCsPKOQjP9T+nTlYT2t+vOmQL8MOQ16eim99XhjQHAuiQ==}
+    dependencies:
+      tabbable: 6.0.1
+    dev: false
+
   /folder-walker/3.2.0:
     resolution: {integrity: sha512-VjAQdSLsl6AkpZNyrQJfO7BXLo4chnStqb055bumZMbRUPpVuPN3a4ktsnRCmrFZjtMlYLkyXiR5rAs4WOpC4Q==}
     dependencies:
@@ -12255,6 +12347,10 @@ packages:
     resolution: {integrity: sha512-P3cgh2bpaPvAO2NE3uRp/n6hmk4xPX4DQf+UzTlCAycssKdqhp6hjw+ENWe+aUS7TogKRFtptMosTSFeC6R55g==}
     dev: true
 
+  /tabbable/6.0.1:
+    resolution: {integrity: sha512-SYJSIgeyXW7EuX1ytdneO5e8jip42oHWg9xl/o3oTYhmXusZVgiA+VlPvjIN+kHii9v90AmzTZEBcsEvuAY+TA==}
+    dev: false
+
   /tabtab/3.0.2:
     resolution: {integrity: sha512-jANKmUe0sIQc/zTALTBy186PoM/k6aPrh3A7p6AaAfF6WPSbTx1JYeGIGH162btpH+mmVEXln+UxwViZHO2Jhg==}
     dependencies:
@@ -12968,7 +13064,7 @@ packages:
     dev: true
 
   /verror/1.10.0:
-    resolution: {integrity: sha512-ZZKSmDAEFOijERBLkmYfJ+vmk3w+7hOLYDNkRCuRuMJGEmqYNCNLyBBFwWKVMhfwaEF3WOd0Zlw86U/WC/+nYw==}
+    resolution: {integrity: sha1-OhBcoXBTr1XW4nDB+CiGguGNpAA=}
     engines: {'0': node >=0.6.0}
     dependencies:
       assert-plus: 1.0.0
diff --git a/src/components/misc/modal.vue b/src/components/misc/modal.vue
index f2c299dcb..6a380a785 100644
--- a/src/components/misc/modal.vue
+++ b/src/components/misc/modal.vue
@@ -9,6 +9,7 @@
 					{ 'has-overflow': overflow },
 					variant,
 				]"
+				ref="modal"
 				v-bind="$attrs"
 			>
 				<div
@@ -69,8 +70,10 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import {watchEffect} from 'vue'
+import {ref, watchEffect} from 'vue'
 import {useScrollLock} from '@vueuse/core'
+import {useFocusTrap} from '@vueuse/integrations/useFocusTrap'
+import type {RouteLocationRaw} from 'vue-router'
 
 import CustomTransition from '@/components/misc/CustomTransition.vue'
 import BaseButton from '@/components/base/BaseButton.vue'
@@ -81,6 +84,7 @@ const props = withDefaults(defineProps<{
 	wide?: boolean,
 	transitionName?: 'modal' | 'fade',
 	variant?: 'default' | 'hint-modal' | 'scrolling',
+	closeRoute?: RouteLocationRaw,
 }>(), {
 	enabled: true,
 	transitionName: 'modal',
@@ -90,11 +94,20 @@ const props = withDefaults(defineProps<{
 const emit = defineEmits(['close', 'submit'])
 
 const scrollLock = useScrollLock(document.body)
-
 watchEffect(() => {
 	scrollLock.value = props.enabled
 })
 
+const modal = ref(null)
+const {activate, deactivate} = useFocusTrap(modal)
+watchEffect(() => {
+	if (props.enabled) {
+		activate()
+	} else {
+		deactivate()
+	}
+})
+
 function onClose() {
 	emit('close')
 }
-- 
2.40.1


From 16c2b63c3deb486093ae2918803669f298508710 Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Wed, 23 Nov 2022 13:59:18 +0100
Subject: [PATCH 12/15] feat: fix expand and collapse route

---
 src/components/misc/Icon.ts          |  2 +
 src/components/misc/modal.vue        |  5 +-
 src/composables/useRouteWithModal.ts | 12 +++--
 src/router/index.ts                  | 77 +++++++++++++++++++++++++---
 src/views/tasks/TaskDetailView.vue   | 35 +++++++++++++
 5 files changed, 118 insertions(+), 13 deletions(-)

diff --git a/src/components/misc/Icon.ts b/src/components/misc/Icon.ts
index b1ce58ee4..3bf7b60ea 100644
--- a/src/components/misc/Icon.ts
+++ b/src/components/misc/Icon.ts
@@ -20,6 +20,7 @@ import {
 	faEllipsisH,
 	faEllipsisV,
 	faExclamation,
+	faExpand,
 	faEye,
 	faEyeSlash,
 	faFillDrip,
@@ -95,6 +96,7 @@ library.add(faCog)
 library.add(faComments)
 library.add(faEllipsisH)
 library.add(faEllipsisV)
+library.add(faExpand)
 library.add(faExclamation)
 library.add(faEye)
 library.add(faEyeSlash)
diff --git a/src/components/misc/modal.vue b/src/components/misc/modal.vue
index 6a380a785..693bad304 100644
--- a/src/components/misc/modal.vue
+++ b/src/components/misc/modal.vue
@@ -70,7 +70,7 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import {ref, watchEffect} from 'vue'
+import {nextTick, ref, watchEffect} from 'vue'
 import {useScrollLock} from '@vueuse/core'
 import {useFocusTrap} from '@vueuse/integrations/useFocusTrap'
 import type {RouteLocationRaw} from 'vue-router'
@@ -102,7 +102,8 @@ const modal = ref(null)
 const {activate, deactivate} = useFocusTrap(modal)
 watchEffect(() => {
 	if (props.enabled) {
-		activate()
+		// wait for content to be loaded
+		nextTick(() => activate())
 	} else {
 		deactivate()
 	}
diff --git a/src/composables/useRouteWithModal.ts b/src/composables/useRouteWithModal.ts
index 518654f5f..cdffdaaa7 100644
--- a/src/composables/useRouteWithModal.ts
+++ b/src/composables/useRouteWithModal.ts
@@ -36,29 +36,34 @@ export function useRouteWithModal() {
 		routerIsReady.value = true
 	})
 
+	const hasModal = ref(false)
 	const baseRoute = shallowRef<RouteLocationNormalizedLoaded>()
 	watch(
 		[routerIsReady, historyStateBackdropRoutePath],
 		async () => {
 			if (routerIsReady.value === false || !route.fullPath) {
 				// wait until we can work with routes
+				hasModal.value = false
 				return
 			}
 
 			if (historyStateBackdropRoutePath.value === undefined) {
 				if (route.meta?.showAsModal !== true) {
+					hasModal.value = false
 					baseRoute.value = route
 					return
 				}
 				// TODO: maybe load parent route here in the future,
 				// via: route.matched[route.matched.length - 2]
 				// see: https://router.vuejs.org/guide/migration/#removal-of-parent-from-route-locations
+				hasModal.value = true
 				baseRoute.value = await resolveAndLoadRoute({ name: 'home' })
 				return
 			}
 	
 			// we get the resolved route from the fullpath
 			// and wait for the route component to be loaded before we assign it
+			hasModal.value = true
 			baseRoute.value = await resolveAndLoadRoute(historyStateBackdropRoutePath.value)
 		},
 		{immediate: true},
@@ -68,9 +73,9 @@ export function useRouteWithModal() {
 
 	const modalRoute = shallowRef<VNode>()
 	watch(
-		[backdropRoute, route],
+		() => [hasModal.value, backdropRoute.value, route],
 		() => {
-			if (routerIsReady.value === false || !route.fullPath || !backdropRoute.value) {
+			if (hasModal.value === false) {
 				modalRoute.value = undefined
 				return
 			}
@@ -78,7 +83,7 @@ export function useRouteWithModal() {
 			const props = getRouteProps(route)
 
 			props.isModal = true
-			props.backdropRoutePath = backdropRoute.value.fullPath
+			props.backdropRoutePath = backdropRoute.value?.fullPath
 			props.onClose = closeModal
 
 			const component = route.matched[0]?.components?.default
@@ -102,6 +107,7 @@ export function useRouteWithModal() {
 			return router.push({ name: 'home' })
 		} else {
 			router.back()
+			// this should never happen
 			throw new Error('')
 		}
 	}
diff --git a/src/router/index.ts b/src/router/index.ts
index d572a7765..6bc8db483 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,5 +1,4 @@
-import { createRouter, createWebHistory } from 'vue-router'
-import type { RouteLocation } from 'vue-router'
+import {createRouter, createWebHistory, type RouteLocation, type RouteLocationRaw} from 'vue-router'
 import {saveLastVisited} from '@/helpers/saveLastVisited'
 
 import {saveListView, getListView} from '@/helpers/saveListView'
@@ -80,6 +79,14 @@ const NewNamespaceComponent = () => import('@/views/namespaces/NewNamespace.vue'
 const EditTeamComponent = () => import('@/views/teams/EditTeam.vue')
 const NewTeamComponent = () =>  import('@/views/teams/NewTeam.vue')
 
+
+declare module 'vue-router' {
+  interface RouteMeta {
+    title?: string
+		showAsModal?: boolean
+  }
+}
+
 const router = createRouter({
 	history: createWebHistory(),
 	scrollBehavior(to, from, savedPosition) {
@@ -358,8 +365,7 @@ const router = createRouter({
 			redirect(to) {
 				// Redirect the user to list view by default
 
-				const savedListView = getListView(to.params.listId)
-				console.debug('Replaced list view with', savedListView)
+				const savedListView = getListView(Number(to.params.listId))
 
 				return {
 					name:  router.hasRoute(savedListView)
@@ -373,14 +379,14 @@ const router = createRouter({
 			path: '/lists/:listId/list',
 			name: 'list.list',
 			component: ListList,
-			beforeEnter: (to) => saveListView(to.params.listId, to.name),
+			beforeEnter: (to) => saveListView(Number(to.params.listId), to.name as string),
 			props: route => ({ listId: Number(route.params.listId as string) }),
 		},
 		{
 			path: '/lists/:listId/gantt',
 			name: 'list.gantt',
 			component: ListGantt,
-			beforeEnter: (to) => saveListView(to.params.listId, to.name),
+			beforeEnter: (to) => saveListView(Number(to.params.listId), to.name as string),
 			// FIXME: test if `useRoute` would be the same. If it would use it instead.
 			props: route => ({route}),
 		},
@@ -388,7 +394,7 @@ const router = createRouter({
 			path: '/lists/:listId/table',
 			name: 'list.table',
 			component: ListTable,
-			beforeEnter: (to) => saveListView(to.params.listId, to.name),
+			beforeEnter: (to) => saveListView(Number(to.params.listId), to.name as string),
 			props: route => ({ listId: Number(route.params.listId as string) }),
 		},
 		{
@@ -396,7 +402,7 @@ const router = createRouter({
 			name: 'list.kanban',
 			component: ListKanban,
 			beforeEnter: (to) => {
-				saveListView(to.params.listId, to.name)
+				saveListView(Number(to.params.listId), to.name as string)
 				// Properly set the page title when a task popup is closed
 				const listStore = useListStore()
 				const listFromStore = listStore.getListById(Number(to.params.listId))
@@ -519,4 +525,59 @@ router.beforeEach(async (to) => {
 	return getAuthForRoute(to)
 })
 
+// https://github.com/vuejs/router/blob/4386ec992f2b96e7309c88f5174f667d9a8a26b2/packages/router/src/router.ts#L595-L628
+export function handleRedirectRecord(to: RouteLocation): RouteLocationRaw | void {
+	const lastMatched = to.matched[to.matched.length - 1]
+	if (!lastMatched || !lastMatched.redirect) {
+		return
+	}
+	const { redirect } = lastMatched
+	let newTargetLocation = redirect
+	
+	if (typeof redirect === 'function') {
+		newTargetLocation = redirect(to)
+	}
+	if (typeof newTargetLocation === 'string') {
+		newTargetLocation =
+			newTargetLocation.includes('?') || newTargetLocation.includes('#')
+				// because I didn't want to copy `locationAsObject` as well
+				// I replaced it with `router.resolve`.
+				// This might cause problems, but I'm not sure of which kind
+				// ? (newTargetLocation = locationAsObject(newTargetLocation))
+				? (newTargetLocation = router.resolve(newTargetLocation))
+				: // force empty params
+					{ path: newTargetLocation }
+		// @ts-expect-error: force empty params when a string is passed to let
+		// the router parse them again
+		newTargetLocation.params = {}
+	}
+
+	if (
+		// __DEV__ &&
+		!('path' in newTargetLocation) &&
+		!('name' in newTargetLocation)
+	) {
+		console.log(
+			`Invalid redirect found:\n${JSON.stringify(
+				newTargetLocation,
+				null,
+				2,
+			)}\n when navigating to "${
+				to.fullPath
+			}". A redirect must contain a name or path. This will break in production.`,
+		)
+		throw new Error('Invalid redirect')
+	}
+
+	return Object.assign(
+		{
+			query: to.query,
+			hash: to.hash,
+			// avoid transferring params if the redirect has a path
+			params: 'path' in newTargetLocation ? {} : to.params,
+		},
+		newTargetLocation,
+	)
+}
+
 export default router
\ No newline at end of file
diff --git a/src/views/tasks/TaskDetailView.vue b/src/views/tasks/TaskDetailView.vue
index 79882685e..66332778d 100644
--- a/src/views/tasks/TaskDetailView.vue
+++ b/src/views/tasks/TaskDetailView.vue
@@ -284,6 +284,22 @@
 					<comments :can-write="canWrite" :task-id="taskId"/>
 				</div>
 				<div class="column is-one-third action-buttons d-print-none" v-if="canWrite || isModal">
+					<x-button
+						v-if="isModal"
+						:to="{ name: 'task.detail', params: {id: task.id}, state: { backdropRoutePath: undefined }, force: true}"
+						variant="secondary"
+					>
+						<span class="icon is-small"><icon icon="expand"/></span>
+						Expand
+					</x-button>
+					<x-button
+						v-else
+						:to="overlayRoute"
+						variant="secondary"
+					>
+						<span class="icon is-small"><icon icon="expand"/></span>
+						Show as Overlay
+					</x-button>
 					<template v-if="canWrite">
 						<x-button
 							:class="{'is-success': !task.done}"
@@ -453,6 +469,8 @@ import {useI18n} from 'vue-i18n'
 import {unrefElement} from '@vueuse/core'
 import cloneDeep from 'lodash.clonedeep'
 
+import {handleRedirectRecord} from '@/router'
+
 import TaskService from '@/services/task'
 import TaskModel, {TASK_DEFAULT_COLOR} from '@/models/task'
 
@@ -525,6 +543,23 @@ const kanbanStore = useKanbanStore()
 const task = reactive<ITask>(new TaskModel())
 useTitle(toRef(task, 'title'))
 
+const overlayRoute = computed(() => {
+	const resolvedbackdropRoute = router.resolve({ name: 'list.index', params: {listId: task.listId} })
+
+	// resolvedbackdropRoute.matched.forEach((record) => console.log(record.redirect))
+
+	// 'list.index' will always redirect, so we need to resolve the redirected route record
+	const backdropRoutePath = handleRedirectRecord(resolvedbackdropRoute)
+
+	return {
+		name: 'task.detail',
+		params: {id: task.id},
+		state: { backdropRoutePath },
+		// if force is not enabled it seems like vue router doesn't recognise the route change
+		force: true,
+	}
+})
+
 // We doubled the task color property here because verte does not have a real change property, leading
 // to the color property change being triggered when the # is removed from it, leading to an update,
 // which leads in turn to a change... This creates an infinite loop in which the task is updated, changed,
-- 
2.40.1


From 2a63549be25a97fd3284096ca56bedc47a129416 Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Wed, 23 Nov 2022 16:07:47 +0100
Subject: [PATCH 13/15] feat: modal settings via route meta

---
 src/composables/useRouteWithModal.ts | 66 ++++++++++++++++++++++------
 src/router/index.ts                  | 54 ++++++++++++++---------
 2 files changed, 87 insertions(+), 33 deletions(-)

diff --git a/src/composables/useRouteWithModal.ts b/src/composables/useRouteWithModal.ts
index cdffdaaa7..85b0b8744 100644
--- a/src/composables/useRouteWithModal.ts
+++ b/src/composables/useRouteWithModal.ts
@@ -1,5 +1,5 @@
-import { computed, shallowRef, watch, h, type VNode, ref } from 'vue'
-import { useRoute, useRouter, loadRouteLocation, type RouteLocationNormalizedLoaded, type RouteLocationRaw } from 'vue-router'
+import {computed, shallowRef, watch, h, type VNode, ref} from 'vue'
+import {useRoute, useRouter, loadRouteLocation, type RouteLocationNormalizedLoaded, type RouteLocationRaw, START_LOCATION, type RouteLocationNormalized} from 'vue-router'
 import router from '@/router'
 
 // this is adapted from vue-router
@@ -15,8 +15,8 @@ function getRouteProps(route: RouteLocationNormalizedLoaded) {
 		: {}
 }
 
-function resolveAndLoadRoute(route: RouteLocationRaw) {
-	return loadRouteLocation(router.resolve(route))
+function resolveAndLoadRoute(route: RouteLocationRaw, currentLocation?: RouteLocationNormalizedLoaded) {
+	return loadRouteLocation(router.resolve(route, currentLocation))
 }
 
 export function useRouteWithModal() {
@@ -27,9 +27,39 @@ export function useRouteWithModal() {
 		// every time the fullPath changes we check the history state
 		// this happens also initially
 		return route.fullPath
-		? window.history.state?.backdropRoutePath
+		? history.state?.backdropRoutePath
 		: undefined
 	})
+
+	router.afterEach((to, from) => {
+		const resolvedRoute = router.resolve(to)
+		// if (!resolvedRoute.meta.forceModal) {
+		if (!resolvedRoute.meta.modal) {
+			return
+		}
+
+		let routeNormalized: RouteLocationNormalized
+		if (typeof resolvedRoute.meta?.modal === 'boolean' || resolvedRoute.meta.modal?.force !== true) {
+			// TODO: also check route history here
+			routeNormalized = from
+		} else if (resolvedRoute.meta.modal?.defaultBackdropRoute) {
+			const {defaultBackdropRoute} = resolvedRoute.meta.modal 
+			const routeRaw = typeof defaultBackdropRoute === 'function'
+				? defaultBackdropRoute(resolvedRoute)
+				: defaultBackdropRoute
+			routeNormalized = router.resolve(routeRaw)
+		} else {
+			// TODO: maybe load parent route here in the future,
+			// via: route.matched[route.matched.length - 2]
+			// see: https://router.vuejs.org/guide/migration/#removal-of-parent-from-route-locations
+			routeNormalized = router.resolve({ name: 'home' })
+		}
+
+		history.replaceState({
+			...history.state,
+			foobar: routeNormalized.fullPath,
+		}, '')
+	})
 	
 	const routerIsReady = ref(false)
 	router.isReady().then(() => {
@@ -48,23 +78,34 @@ export function useRouteWithModal() {
 			}
 
 			if (historyStateBackdropRoutePath.value === undefined) {
-				if (route.meta?.showAsModal !== true) {
+				if (typeof route.meta?.modal === 'boolean' || route.meta.modal?.force !== true) {
 					hasModal.value = false
 					baseRoute.value = route
 					return
 				}
-				// TODO: maybe load parent route here in the future,
-				// via: route.matched[route.matched.length - 2]
-				// see: https://router.vuejs.org/guide/migration/#removal-of-parent-from-route-locations
+				// the route forces to be shown as a modal
 				hasModal.value = true
-				baseRoute.value = await resolveAndLoadRoute({ name: 'home' })
+				let routeRaw: RouteLocationRaw
+				if (route.meta.modal?.defaultBackdropRoute) {
+					const {defaultBackdropRoute} = route.meta.modal 
+					routeRaw = typeof defaultBackdropRoute === 'function'
+						? defaultBackdropRoute(route)
+						: defaultBackdropRoute
+				} else {
+					// TODO: maybe load parent route here in the future,
+					// via: route.matched[route.matched.length - 2]
+					// see: https://router.vuejs.org/guide/migration/#removal-of-parent-from-route-locations
+					routeRaw = { name: 'home' }
+				}
+			
+				baseRoute.value = await resolveAndLoadRoute(routeRaw, baseRoute.value)
 				return
 			}
 	
 			// we get the resolved route from the fullpath
 			// and wait for the route component to be loaded before we assign it
 			hasModal.value = true
-			baseRoute.value = await resolveAndLoadRoute(historyStateBackdropRoutePath.value)
+			baseRoute.value = await resolveAndLoadRoute(historyStateBackdropRoutePath.value, baseRoute.value)
 		},
 		{immediate: true},
 	)
@@ -103,7 +144,7 @@ export function useRouteWithModal() {
 			// TODO: Dialog modals might want to replace the route here via router.replace()
 			return router.push(backdropRoute.value)
 		}
-		if (window.history.state === undefined) {
+		if (history.state === undefined) {
 			return router.push({ name: 'home' })
 		} else {
 			router.back()
@@ -115,6 +156,5 @@ export function useRouteWithModal() {
 	return {
 		baseRoute,
 		modalRoute,
-		closeModal,
 	}
 }
\ No newline at end of file
diff --git a/src/router/index.ts b/src/router/index.ts
index 6bc8db483..8c4b8a9a3 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -83,7 +83,12 @@ const NewTeamComponent = () =>  import('@/views/teams/NewTeam.vue')
 declare module 'vue-router' {
   interface RouteMeta {
     title?: string
-		showAsModal?: boolean
+		modal?: boolean | {
+			/** Forces the view to be always shown as modal */
+			force?: boolean,
+			/** Show this route as backdrop if there is no route history */
+			defaultBackdropRoute?: RouteLocationRaw | ((currentRoute: RouteLocation) => RouteLocationRaw),
+		}
   }
 }
 
@@ -220,7 +225,10 @@ const router = createRouter({
 			name: 'namespace.create',
 			component: NewNamespaceComponent,
 			meta: {
-				showAsModal: true,
+				modal: {
+					force: true,
+					defaultBackdropRoute: {name: 'namespaces.index'},
+				},
 			},
 		},
 		{
@@ -228,7 +236,7 @@ const router = createRouter({
 			name: 'namespace.settings.edit',
 			component: NamespaceSettingEdit,
 			meta: {
-				showAsModal: true,
+				modal: true,
 			},
 			props: route => ({ namespaceId: Number(route.params.id as string) }),
 		},
@@ -237,7 +245,7 @@ const router = createRouter({
 			name: 'namespace.settings.share',
 			component: NamespaceSettingShare,
 			meta: {
-				showAsModal: true,
+				modal: true,
 			},
 		},
 		{
@@ -245,7 +253,7 @@ const router = createRouter({
 			name: 'namespace.settings.archive',
 			component: NamespaceSettingArchive,
 			meta: {
-				showAsModal: true,
+				modal: true,
 			},
 			props: route => ({ namespaceId: Number(route.params.id as string) }),
 		},
@@ -254,7 +262,7 @@ const router = createRouter({
 			name: 'namespace.settings.delete',
 			component: NamespaceSettingDelete,
 			meta: {
-				showAsModal: true,
+				modal: true,
 			},
 			props: route => ({ namespaceId: Number(route.params.id as string) }),
 		},
@@ -263,6 +271,12 @@ const router = createRouter({
 			name: 'task.detail',
 			component: TaskDetailView,
 			props: route => ({ taskId: Number(route.params.id as string) }),
+			meta: {
+				modal: {
+					force: true,
+					defaultBackdropRoute: {name: 'home'},
+				},
+			},
 		},
 		{
 			path: '/tasks/by/upcoming',
@@ -280,7 +294,7 @@ const router = createRouter({
 			name: 'list.create',
 			component: NewListComponent,
 			meta: {
-				showAsModal: true,
+				modal: true,
 			},
 		},
 		{
@@ -289,7 +303,7 @@ const router = createRouter({
 			component: ListSettingEdit,
 			props: route => ({ listId: Number(route.params.listId as string) }),
 			meta: {
-				showAsModal: true,
+				modal: true,
 			},
 		},
 		{
@@ -297,7 +311,7 @@ const router = createRouter({
 			name: 'list.settings.background',
 			component: ListSettingBackground,
 			meta: {
-				showAsModal: true,
+				modal: true,
 			},
 		},
 		{
@@ -305,7 +319,7 @@ const router = createRouter({
 			name: 'list.settings.duplicate',
 			component: ListSettingDuplicate,
 			meta: {
-				showAsModal: true,
+				modal: true,
 			},
 		},
 		{
@@ -313,7 +327,7 @@ const router = createRouter({
 			name: 'list.settings.share',
 			component: ListSettingShare,
 			meta: {
-				showAsModal: true,
+				modal: true,
 			},
 		},
 		{
@@ -321,7 +335,7 @@ const router = createRouter({
 			name: 'list.settings.delete',
 			component: ListSettingDelete,
 			meta: {
-				showAsModal: true,
+				modal: true,
 			},
 		},
 		{
@@ -329,7 +343,7 @@ const router = createRouter({
 			name: 'list.settings.archive',
 			component: ListSettingArchive,
 			meta: {
-				showAsModal: true,
+				modal: true,
 			},
 		},
 		{
@@ -337,7 +351,7 @@ const router = createRouter({
 			name: 'filter.settings.edit',
 			component: FilterEdit,
 			meta: {
-				showAsModal: true,
+				modal: true,
 			},
 			props: route => ({ listId: Number(route.params.listId as string) }),
 		},
@@ -346,7 +360,7 @@ const router = createRouter({
 			name: 'filter.settings.delete',
 			component: FilterDelete,
 			meta: {
-				showAsModal: true,
+				modal: true,
 			},
 			props: route => ({ listId: Number(route.params.listId as string) }),
 		},
@@ -355,7 +369,7 @@ const router = createRouter({
 			name: 'list.info',
 			component: ListInfo,
 			meta: {
-				showAsModal: true,
+				modal: true,
 			},
 			props: route => ({ listId: Number(route.params.listId as string) }),
 		},
@@ -422,7 +436,7 @@ const router = createRouter({
 			name: 'teams.create',
 			component: NewTeamComponent,
 			meta: {
-				showAsModal: true,
+				modal: true,
 			},
 		},
 		{
@@ -440,7 +454,7 @@ const router = createRouter({
 			name: 'labels.create',
 			component: NewLabelComponent,
 			meta: {
-				showAsModal: true,
+				modal: true,
 			},
 		},
 		{
@@ -462,7 +476,7 @@ const router = createRouter({
 			name: 'filters.create',
 			component: FilterNew,
 			meta: {
-				showAsModal: true,
+				modal: true,
 			},
 		},
 		{
@@ -475,7 +489,7 @@ const router = createRouter({
 			name: 'about',
 			component: About,
 			meta: {
-				showAsModal: true,
+				modal: true,
 			},
 		},
 	],
-- 
2.40.1


From 65c176d18c724d7ed429e89b21d7e4f4121e0a61 Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Wed, 23 Nov 2022 17:55:28 +0100
Subject: [PATCH 14/15] feat: open modal automatically depending on route meta
 setting

---
 src/components/home/TheNavigation.vue         |   4 +-
 .../list/list-settings-dropdown.vue           |  18 +--
 .../namespace/namespace-settings-dropdown.vue |  12 +-
 src/components/tasks/GanttChart.vue           |   1 -
 src/components/tasks/partials/kanban-card.vue |   1 -
 .../tasks/partials/singleTaskInList.vue       |   6 +-
 src/composables/useRouteWithModal.ts          |  66 ++++++++--
 src/router/index.ts                           | 114 +++++++++++++++---
 src/views/Home.vue                            |   2 +-
 src/views/labels/ListLabels.vue               |  10 +-
 src/views/list/ListTable.vue                  |   3 -
 src/views/list/settings/edit.vue              |   2 +-
 src/views/namespaces/ListNamespaces.vue       |  12 +-
 src/views/namespaces/settings/edit.vue        |   2 +-
 src/views/teams/ListTeams.vue                 |  10 +-
 15 files changed, 178 insertions(+), 85 deletions(-)

diff --git a/src/components/home/TheNavigation.vue b/src/components/home/TheNavigation.vue
index 8ee7eea60..371442f06 100644
--- a/src/components/home/TheNavigation.vue
+++ b/src/components/home/TheNavigation.vue
@@ -16,7 +16,7 @@
 					{{ currentList.title === '' ? $t('misc.loading') : getListTitle(currentList) }}
 				</h1>
 
-				<BaseButton :to="{name: 'list.info', params: {listId: currentList.id}, state: {backdropRoutePath: $route.fullPath}}" class="info-button">
+				<BaseButton :to="{name: 'list.info', params: {listId: currentList.id},}" class="info-button">
 					<icon icon="circle-info"/>
 				</BaseButton>
 
@@ -75,7 +75,7 @@
 						{{ $t('keyboardShortcuts.title') }}
 					</dropdown-item>
 					<dropdown-item
-						:to="{name: 'about', state: {backdropRoutePath: $route.fullPath}}"
+						:to="{name: 'about',}"
 					>
 						{{ $t('about.title') }}
 					</dropdown-item>
diff --git a/src/components/list/list-settings-dropdown.vue b/src/components/list/list-settings-dropdown.vue
index 0a0c13414..12c87f556 100644
--- a/src/components/list/list-settings-dropdown.vue
+++ b/src/components/list/list-settings-dropdown.vue
@@ -10,13 +10,13 @@
 
 		<template v-if="isSavedFilter(list)">
 			<dropdown-item
-				:to="{ name: 'filter.settings.edit', params: { listId: list.id }, state: {backdropRoutePath: $route.fullPath} }"
+				:to="{ name: 'filter.settings.edit', params: { listId: list.id } }"
 				icon="pen"
 			>
 				{{ $t('menu.edit') }}
 			</dropdown-item>
 			<dropdown-item
-				:to="{ name: 'filter.settings.delete', params: { listId: list.id }, state: {backdropRoutePath: $route.fullPath} }"
+				:to="{ name: 'filter.settings.delete', params: { listId: list.id } }"
 				icon="trash-alt"
 			>
 				{{ $t('misc.delete') }}
@@ -25,7 +25,7 @@
 
 		<template v-else-if="list.isArchived">
 			<dropdown-item
-				:to="{ name: 'list.settings.archive', params: { listId: list.id }, state: {backdropRoutePath: $route.fullPath} }"
+				:to="{ name: 'list.settings.archive', params: { listId: list.id } }"
 				icon="archive"
 			>
 				{{ $t('menu.unarchive') }}
@@ -33,32 +33,32 @@
 		</template>
 		<template v-else>
 			<dropdown-item
-				:to="{ name: 'list.settings.edit', params: { listId: list.id }, state: {backdropRoutePath: $route.fullPath} }"
+				:to="{ name: 'list.settings.edit', params: { listId: list.id } }"
 				icon="pen"
 			>
 				{{ $t('menu.edit') }}
 			</dropdown-item>
 			<dropdown-item
 				v-if="backgroundsEnabled"
-				:to="{ name: 'list.settings.background', params: { listId: list.id }, state: {backdropRoutePath: $route.fullPath} }"
+				:to="{ name: 'list.settings.background', params: { listId: list.id } }"
 				icon="image"
 			>
 				{{ $t('menu.setBackground') }}
 			</dropdown-item>
 			<dropdown-item
-				:to="{ name: 'list.settings.share', params: { listId: list.id }, state: {backdropRoutePath: $route.fullPath} }"
+				:to="{ name: 'list.settings.share', params: { listId: list.id } }"
 				icon="share-alt"
 			>
 				{{ $t('menu.share') }}
 			</dropdown-item>
 			<dropdown-item
-				:to="{ name: 'list.settings.duplicate', params: { listId: list.id }, state: {backdropRoutePath: $route.fullPath} }"
+				:to="{ name: 'list.settings.duplicate', params: { listId: list.id } }"
 				icon="paste"
 			>
 				{{ $t('menu.duplicate') }}
 			</dropdown-item>
 			<dropdown-item
-				:to="{ name: 'list.settings.archive', params: { listId: list.id }, state: {backdropRoutePath: $route.fullPath} }"
+				:to="{ name: 'list.settings.archive', params: { listId: list.id } }"
 				icon="archive"
 			>
 				{{ $t('menu.archive') }}
@@ -73,7 +73,7 @@
 				type="dropdown"
 			/>
 			<dropdown-item
-				:to="{ name: 'list.settings.delete', params: { listId: list.id }, state: {backdropRoutePath: $route.fullPath} }"
+				:to="{ name: 'list.settings.delete', params: { listId: list.id } }"
 				icon="trash-alt"
 				class="has-text-danger"
 			>
diff --git a/src/components/namespace/namespace-settings-dropdown.vue b/src/components/namespace/namespace-settings-dropdown.vue
index 5f16dbe38..074436d69 100644
--- a/src/components/namespace/namespace-settings-dropdown.vue
+++ b/src/components/namespace/namespace-settings-dropdown.vue
@@ -10,7 +10,7 @@
 
 		<template v-if="namespace.isArchived">
 			<dropdown-item
-				:to="{ name: 'namespace.settings.archive', params: { id: namespace.id }, state: { backdropRoutePath: $route.fullPath } }"
+				:to="{ name: 'namespace.settings.archive', params: { id: namespace.id } }"
 				icon="archive"
 			>
 				{{ $t('menu.unarchive') }}
@@ -18,25 +18,25 @@
 		</template>
 		<template v-else>
 			<dropdown-item
-				:to="{ name: 'namespace.settings.edit', params: { id: namespace.id }, state: { backdropRoutePath: $route.fullPath } }"
+				:to="{ name: 'namespace.settings.edit', params: { id: namespace.id } }"
 				icon="pen"
 			>
 				{{ $t('menu.edit') }}
 			</dropdown-item>
 			<dropdown-item
-				:to="{ name: 'namespace.settings.share', params: { namespaceId: namespace.id }, state: { backdropRoutePath: $route.fullPath } }"
+				:to="{ name: 'namespace.settings.share', params: { namespaceId: namespace.id } }"
 				icon="share-alt"
 			>
 				{{ $t('menu.share') }}
 			</dropdown-item>
 			<dropdown-item
-				:to="{ name: 'list.create', params: { namespaceId: namespace.id }, state: { backdropRoutePath: $route.fullPath } }"
+				:to="{ name: 'list.create', params: { namespaceId: namespace.id } }"
 				icon="plus"
 			>
 				{{ $t('menu.newList') }}
 			</dropdown-item>
 			<dropdown-item
-				:to="{ name: 'namespace.settings.archive', params: { id: namespace.id }, state: { backdropRoutePath: $route.fullPath } }"
+				:to="{ name: 'namespace.settings.archive', params: { id: namespace.id } }"
 				icon="archive"
 			>
 				{{ $t('menu.archive') }}
@@ -51,7 +51,7 @@
 				type="dropdown"
 			/>
 			<dropdown-item
-				:to="{ name: 'namespace.settings.delete', params: { id: namespace.id }, state: { backdropRoutePath: $route.fullPath } }"
+				:to="{ name: 'namespace.settings.delete', params: { id: namespace.id } }"
 				icon="trash-alt"
 				class="has-text-danger"
 			>
diff --git a/src/components/tasks/GanttChart.vue b/src/components/tasks/GanttChart.vue
index 6c80b8370..a3c701734 100644
--- a/src/components/tasks/GanttChart.vue
+++ b/src/components/tasks/GanttChart.vue
@@ -153,7 +153,6 @@ function openTask(e: {
 	router.push({
 		name: 'task.detail',
 		params: {id: e.bar.ganttBarConfig.id},
-		state: {backdropRoutePath: router.currentRoute.value.fullPath},
 	})
 }
 
diff --git a/src/components/tasks/partials/kanban-card.vue b/src/components/tasks/partials/kanban-card.vue
index 25aa425a6..5bee4b830 100644
--- a/src/components/tasks/partials/kanban-card.vue
+++ b/src/components/tasks/partials/kanban-card.vue
@@ -121,7 +121,6 @@ function openTaskDetail() {
 	router.push({
 		name: 'task.detail',
 		params: {id: props.task.id},
-		state: {backdropRoutePath: router.currentRoute.value.fullPath},
 	})
 }
 
diff --git a/src/components/tasks/partials/singleTaskInList.vue b/src/components/tasks/partials/singleTaskInList.vue
index b20fba9fa..f0f29329e 100644
--- a/src/components/tasks/partials/singleTaskInList.vue
+++ b/src/components/tasks/partials/singleTaskInList.vue
@@ -13,11 +13,7 @@
 		/>
 		
 		<router-link
-			:to="{
-				name: 'task.detail',
-				params: {id: task.id},
-				state: { backdropRoutePath: $route.fullPath },
-			}"
+			:to="{name: 'task.detail', params: {id: task.id}}"
 			:class="{ 'done': task.done}"
 			class="tasktext"
 		>
diff --git a/src/composables/useRouteWithModal.ts b/src/composables/useRouteWithModal.ts
index 85b0b8744..dae9cbe7d 100644
--- a/src/composables/useRouteWithModal.ts
+++ b/src/composables/useRouteWithModal.ts
@@ -1,6 +1,6 @@
 import {computed, shallowRef, watch, h, type VNode, ref} from 'vue'
-import {useRoute, useRouter, loadRouteLocation, type RouteLocationNormalizedLoaded, type RouteLocationRaw, START_LOCATION, type RouteLocationNormalized} from 'vue-router'
-import router from '@/router'
+import {useRoute, useRouter, loadRouteLocation, type RouteLocationNormalizedLoaded, type RouteLocationRaw, START_LOCATION} from 'vue-router'
+import router, { handleRedirectRecord } from '@/router'
 
 // this is adapted from vue-router
 // https://github.com/vuejs/vue-router-next/blob/798cab0d1e21f9b4d45a2bd12b840d2c7415f38a/src/RouterView.ts#L125
@@ -16,7 +16,14 @@ function getRouteProps(route: RouteLocationNormalizedLoaded) {
 }
 
 function resolveAndLoadRoute(route: RouteLocationRaw, currentLocation?: RouteLocationNormalizedLoaded) {
-	return loadRouteLocation(router.resolve(route, currentLocation))
+	const resolvedRoute = router.resolve(route, currentLocation)
+
+	// resolvedRoute.matched.forEach((record) => console.log(record.redirect))
+
+	// e.g. 'list.index' will always redirect, so we need to resolve the redirected route record
+	const redirectedRoute = handleRedirectRecord(resolvedRoute) || resolvedRoute
+
+	return loadRouteLocation(router.resolve(redirectedRoute, currentLocation))
 }
 
 export function useRouteWithModal() {
@@ -31,33 +38,64 @@ export function useRouteWithModal() {
 		: undefined
 	})
 
+	const isInitialNavigation = ref(true)
+	
+	router.beforeEach((to, from) => {
+		isInitialNavigation.value = from === START_LOCATION
+	})
+	
+	const lastBackdropRoutePath = ref<string>()
 	router.afterEach((to, from) => {
 		const resolvedRoute = router.resolve(to)
-		// if (!resolvedRoute.meta.forceModal) {
 		if (!resolvedRoute.meta.modal) {
+			// this route doesn't define that it can be a modal
 			return
 		}
 
-		let routeNormalized: RouteLocationNormalized
-		if (typeof resolvedRoute.meta?.modal === 'boolean' || resolvedRoute.meta.modal?.force !== true) {
-			// TODO: also check route history here
-			routeNormalized = from
+		let backdropRoutePath
+		if (resolvedRoute.meta?.modal === true || resolvedRoute.meta.modal?.force !== true) {
+			// this route can be shown as modal or as normal view
+
+			// TODO: add new state or prop instead of checking backdropRoutePath here
+			// e.g. `modal` with `'normal' | 'sidebar' | 'modal' | 'sheet'`
+			if (!history.state.backdropRoutePath) {
+				// since this modal is optional and we don't have a backdropRoutePath we don't do anything
+				return
+			}
+		} else if (lastBackdropRoutePath.value) {
+			// there was already a modal in the last route
+			// we have to save this in the lastBackdropRoutePath ref because
+			// the state gets overwritten
+
+			// let's show that backdropRoute again
+			// TODO: add support for multiple modal layers here
+			// FIXME: use `history.state.backdropRoutePath` from last route
+			// FIXME: this might be wrong, because we redirect to our current path forever??
+			backdropRoutePath = lastBackdropRoutePath.value
+		} else if (isInitialNavigation.value === false) {
+			backdropRoutePath = from.fullPath
 		} else if (resolvedRoute.meta.modal?.defaultBackdropRoute) {
 			const {defaultBackdropRoute} = resolvedRoute.meta.modal 
 			const routeRaw = typeof defaultBackdropRoute === 'function'
 				? defaultBackdropRoute(resolvedRoute)
 				: defaultBackdropRoute
-			routeNormalized = router.resolve(routeRaw)
-		} else {
+			backdropRoutePath = router.resolve(routeRaw).fullPath
+		}
+		
+		if (backdropRoutePath === undefined) {
+			console.log('No defaultBackdropRoute defined for this route')
+
 			// TODO: maybe load parent route here in the future,
 			// via: route.matched[route.matched.length - 2]
 			// see: https://router.vuejs.org/guide/migration/#removal-of-parent-from-route-locations
-			routeNormalized = router.resolve({ name: 'home' })
+			backdropRoutePath = router.resolve({ name: 'home' }).fullPath
 		}
 
+		lastBackdropRoutePath.value = backdropRoutePath
+
 		history.replaceState({
 			...history.state,
-			foobar: routeNormalized.fullPath,
+			backdropRoutePath,
 		}, '')
 	})
 	
@@ -140,7 +178,9 @@ export function useRouteWithModal() {
 
 	async function closeModal() {
 		await router.isReady()
-		if (backdropRoute.value !== undefined) {
+		if (isInitialNavigation.value === false) {
+			return router.back()
+		} else if (backdropRoute.value !== undefined) {
 			// TODO: Dialog modals might want to replace the route here via router.replace()
 			return router.push(backdropRoute.value)
 		}
diff --git a/src/router/index.ts b/src/router/index.ts
index 8c4b8a9a3..271274fca 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -87,7 +87,7 @@ declare module 'vue-router' {
 			/** Forces the view to be always shown as modal */
 			force?: boolean,
 			/** Show this route as backdrop if there is no route history */
-			defaultBackdropRoute?: RouteLocationRaw | ((currentRoute: RouteLocation) => RouteLocationRaw),
+			defaultBackdropRoute?: RouteLocationRaw | ((to: RouteLocationNormalized) => RouteLocationRaw),
 		}
   }
 }
@@ -236,7 +236,10 @@ const router = createRouter({
 			name: 'namespace.settings.edit',
 			component: NamespaceSettingEdit,
 			meta: {
-				modal: true,
+				modal: {
+					force: true,
+					defaultBackdropRoute: {name: 'namespaces.index'},
+				},
 			},
 			props: route => ({ namespaceId: Number(route.params.id as string) }),
 		},
@@ -245,7 +248,10 @@ const router = createRouter({
 			name: 'namespace.settings.share',
 			component: NamespaceSettingShare,
 			meta: {
-				modal: true,
+				modal: {
+					force: true,
+					defaultBackdropRoute: {name: 'namespaces.index'},
+				},
 			},
 		},
 		{
@@ -253,7 +259,10 @@ const router = createRouter({
 			name: 'namespace.settings.archive',
 			component: NamespaceSettingArchive,
 			meta: {
-				modal: true,
+				modal: {
+					force: true,
+					defaultBackdropRoute: {name: 'namespaces.index'},
+				},
 			},
 			props: route => ({ namespaceId: Number(route.params.id as string) }),
 		},
@@ -262,7 +271,10 @@ const router = createRouter({
 			name: 'namespace.settings.delete',
 			component: NamespaceSettingDelete,
 			meta: {
-				modal: true,
+				modal: {
+					force: true,
+					defaultBackdropRoute: {name: 'namespaces.index'},
+				},
 			},
 			props: route => ({ namespaceId: Number(route.params.id as string) }),
 		},
@@ -274,7 +286,9 @@ const router = createRouter({
 			meta: {
 				modal: {
 					force: true,
-					defaultBackdropRoute: {name: 'home'},
+					defaultBackdropRoute(route) {
+						return { name: 'list.index', props: { listId: route.params.listId}}
+					},
 				},
 			},
 		},
@@ -294,7 +308,10 @@ const router = createRouter({
 			name: 'list.create',
 			component: NewListComponent,
 			meta: {
-				modal: true,
+				modal: {
+					force: true,
+					defaultBackdropRoute: {name: 'namespaces.index'},
+				},
 			},
 		},
 		{
@@ -303,7 +320,12 @@ const router = createRouter({
 			component: ListSettingEdit,
 			props: route => ({ listId: Number(route.params.listId as string) }),
 			meta: {
-				modal: true,
+				modal: {
+					force: true,
+					defaultBackdropRoute(route) {
+						return { name: 'list.index', props: { listId: route.params.listId}}
+					},
+				},
 			},
 		},
 		{
@@ -311,7 +333,12 @@ const router = createRouter({
 			name: 'list.settings.background',
 			component: ListSettingBackground,
 			meta: {
-				modal: true,
+				modal: {
+					force: true,
+					defaultBackdropRoute(route) {
+						return { name: 'list.index', props: { listId: route.params.listId}}
+					},
+				},
 			},
 		},
 		{
@@ -319,7 +346,12 @@ const router = createRouter({
 			name: 'list.settings.duplicate',
 			component: ListSettingDuplicate,
 			meta: {
-				modal: true,
+				modal: {
+					force: true,
+					defaultBackdropRoute(route) {
+						return { name: 'list.index', props: { listId: route.params.listId}}
+					},
+				},
 			},
 		},
 		{
@@ -327,7 +359,12 @@ const router = createRouter({
 			name: 'list.settings.share',
 			component: ListSettingShare,
 			meta: {
-				modal: true,
+				modal: {
+					force: true,
+					defaultBackdropRoute(route) {
+						return { name: 'list.index', props: { listId: route.params.listId}}
+					},
+				},
 			},
 		},
 		{
@@ -335,7 +372,12 @@ const router = createRouter({
 			name: 'list.settings.delete',
 			component: ListSettingDelete,
 			meta: {
-				modal: true,
+				modal: {
+					force: true,
+					defaultBackdropRoute(route) {
+						return { name: 'list.index', props: { listId: route.params.listId}}
+					},
+				},
 			},
 		},
 		{
@@ -343,7 +385,12 @@ const router = createRouter({
 			name: 'list.settings.archive',
 			component: ListSettingArchive,
 			meta: {
-				modal: true,
+				modal: {
+					force: true,
+					defaultBackdropRoute(route) {
+						return { name: 'list.index', props: { listId: route.params.listId}}
+					},
+				},
 			},
 		},
 		{
@@ -351,7 +398,12 @@ const router = createRouter({
 			name: 'filter.settings.edit',
 			component: FilterEdit,
 			meta: {
-				modal: true,
+				modal: {
+					force: true,
+					defaultBackdropRoute(route) {
+						return { name: 'list.index', props: { listId: route.params.listId}}
+					},
+				},
 			},
 			props: route => ({ listId: Number(route.params.listId as string) }),
 		},
@@ -360,7 +412,12 @@ const router = createRouter({
 			name: 'filter.settings.delete',
 			component: FilterDelete,
 			meta: {
-				modal: true,
+				modal: {
+					force: true,
+					defaultBackdropRoute(route) {
+						return { name: 'list.index', props: { listId: route.params.listId}}
+					},
+				},
 			},
 			props: route => ({ listId: Number(route.params.listId as string) }),
 		},
@@ -369,7 +426,12 @@ const router = createRouter({
 			name: 'list.info',
 			component: ListInfo,
 			meta: {
-				modal: true,
+				modal: {
+					force: true,
+					defaultBackdropRoute(route) {
+						return { name: 'list.index', props: { listId: route.params.listId}}
+					},
+				},
 			},
 			props: route => ({ listId: Number(route.params.listId as string) }),
 		},
@@ -436,9 +498,13 @@ const router = createRouter({
 			name: 'teams.create',
 			component: NewTeamComponent,
 			meta: {
-				modal: true,
+				modal: {
+					force: true,
+					defaultBackdropRoute: {name: 'teams.index'},
+				},
 			},
 		},
+		// TODO: make modal
 		{
 			path: '/teams/:id/edit',
 			name: 'teams.edit',
@@ -454,7 +520,10 @@ const router = createRouter({
 			name: 'labels.create',
 			component: NewLabelComponent,
 			meta: {
-				modal: true,
+				modal: {
+					force: true,
+					defaultBackdropRoute: {name: 'labels.index'},
+				},
 			},
 		},
 		{
@@ -476,7 +545,10 @@ const router = createRouter({
 			name: 'filters.create',
 			component: FilterNew,
 			meta: {
-				modal: true,
+				modal: {
+					force: true,
+					defaultBackdropRoute: {name: 'namespaces.index'},
+				},
 			},
 		},
 		{
@@ -489,7 +561,9 @@ const router = createRouter({
 			name: 'about',
 			component: About,
 			meta: {
-				modal: true,
+				modal: {
+					force: true,
+				},
 			},
 		},
 	],
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 271cd0e34..72377fd29 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -21,7 +21,7 @@
 			<template v-if="defaultNamespaceId > 0">
 				<p class="mt-4">{{ $t('home.list.newText') }}</p>
 				<x-button
-					:to="{ name: 'list.create', params: { namespaceId: defaultNamespaceId }, state: { backdropRoutePath: $route.fullPath } }"
+					:to="{ name: 'list.create', params: { namespaceId: defaultNamespaceId } }"
 					:shadow="false"
 					class="ml-2"
 				>
diff --git a/src/views/labels/ListLabels.vue b/src/views/labels/ListLabels.vue
index ad4a444dd..88501b7d5 100644
--- a/src/views/labels/ListLabels.vue
+++ b/src/views/labels/ListLabels.vue
@@ -1,10 +1,7 @@
 <template>
 	<div :class="{ 'is-loading': loading}" class="loader-container">
 		<x-button
-			:to="{
-				name:'labels.create',
-				state: { backdropRoutePath: $route.fullPath }
-			}"
+			:to="{ name:'labels.create' }"
 			class="is-pulled-right"
 			icon="plus"
 		>
@@ -18,10 +15,7 @@
 			</p>
 			<p v-else class="has-text-centered has-text-grey is-italic">
 				{{ $t('label.newCTA') }}
-				<router-link :to="{
-					name:'labels.create',
-					state: { backdropRoutePath: $route.fullPath }
-				}">{{ $t('label.create.title') }}.</router-link>
+				<router-link :to="{name:'labels.create'}">{{ $t('label.create.title') }}.</router-link>
 			</p>
 		</div>
 
diff --git a/src/views/list/ListTable.vue b/src/views/list/ListTable.vue
index ccab81831..11a65350f 100644
--- a/src/views/list/ListTable.vue
+++ b/src/views/list/ListTable.vue
@@ -181,7 +181,6 @@
 
 <script setup lang="ts">
 import {toRef, computed, type Ref} from 'vue'
-import {useRoute} from 'vue-router'
 import {useStorage} from '@vueuse/core'
 
 import ListWrapper from '@/components/list/ListWrapper.vue'
@@ -274,14 +273,12 @@ function sort(property: keyof SortBy) {
 	sortByParam.value = sortBy.value
 }
 
-const route = useRoute()
 const taskDetailRoutes = computed(() => Object.fromEntries(
 	tasks.value.map(({id}) => ([
 		id,
 		{
 			name: 'task.detail',
 			params: {id},
-			state: { backdropRoutePath: route.fullPath },
 		},
 	])),
 ))
diff --git a/src/views/list/settings/edit.vue b/src/views/list/settings/edit.vue
index 5b6ba55cb..ef319aefb 100644
--- a/src/views/list/settings/edit.vue
+++ b/src/views/list/settings/edit.vue
@@ -5,7 +5,7 @@
 		:primary-label="$t('misc.save')"
 		@primary="save"
 		:tertiary="$t('misc.delete')"
-		@tertiary="$router.push({ name: 'list.settings.delete', params: { id: listId }, state: {backdropRoutePath: $route.fullPath} })"
+		@tertiary="$router.push({ name: 'list.settings.delete', params: { id: listId } })"
 		#default="{onClose}"
 	>
 		<div class="field">
diff --git a/src/views/namespaces/ListNamespaces.vue b/src/views/namespaces/ListNamespaces.vue
index 5afe5a60d..867c959c5 100644
--- a/src/views/namespaces/ListNamespaces.vue
+++ b/src/views/namespaces/ListNamespaces.vue
@@ -6,10 +6,10 @@
 			</fancycheckbox>
 
 			<div class="action-buttons">
-				<x-button :to="{name: 'filters.create', state: {backdropRoutePath: $route.fullPath}}" icon="filter">
+				<x-button :to="{name: 'filters.create'}" icon="filter">
 					{{ $t('filters.create.title') }}
 				</x-button>
-				<x-button :to="{name: 'namespace.create', state: {backdropRoutePath: $route.fullPath}}" icon="plus" v-cy="'new-namespace'">
+				<x-button :to="{name: 'namespace.create'}" icon="plus" v-cy="'new-namespace'">
 					{{ $t('namespace.create.title') }}
 				</x-button>
 			</div>
@@ -17,7 +17,7 @@
 
 		<p v-if="namespaces.length === 0" class="has-text-centered has-text-grey mt-4 is-italic">
 			{{ $t('namespace.noneAvailable') }}
-			<BaseButton :to="{name: 'namespace.create', state: {backdropRoutePath: $route.fullPath}}">
+			<BaseButton :to="{name: 'namespace.create'}">
 				{{ $t('namespace.create.title') }}.
 			</BaseButton>
 		</p>
@@ -25,7 +25,7 @@
 		<section :key="`n${n.id}`" class="namespace" v-for="n in namespaces">
 			<x-button
 				v-if="n.id > 0 && n.lists.length > 0"
-				:to="{name: 'list.create', params: {namespaceId:  n.id}, state: { backdropRoutePath: $route.fullPath }}"
+				:to="{name: 'list.create', params: {namespaceId:  n.id}}"
 				class="is-pulled-right"
 				variant="secondary"
 				icon="plus"
@@ -34,7 +34,7 @@
 			</x-button>
 			<x-button
 				v-if="n.isArchived"
-				:to="{name: 'namespace.settings.archive', params: {id:  n.id}, state: { backdropRoutePath: $route.fullPath } }"
+				:to="{name: 'namespace.settings.archive', params: {id:  n.id} }"
 				class="is-pulled-right mr-4"
 				variant="secondary"
 				icon="archive"
@@ -51,7 +51,7 @@
 
 			<p v-if="n.lists.length === 0" class="has-text-centered has-text-grey mt-4 is-italic">
 				{{ $t('namespace.noLists') }}
-				<BaseButton :to="{name: 'list.create', params: {namespaceId:  n.id}, state: { backdropRoutePath: $route.fullPath }}">
+				<BaseButton :to="{name: 'list.create', params: {namespaceId:  n.id}}">
 					{{ $t('namespace.createList') }}
 				</BaseButton>
 			</p>
diff --git a/src/views/namespaces/settings/edit.vue b/src/views/namespaces/settings/edit.vue
index 651c70d27..07bd4aadd 100644
--- a/src/views/namespaces/settings/edit.vue
+++ b/src/views/namespaces/settings/edit.vue
@@ -5,7 +5,7 @@
 		:primary-label="$t('misc.save')"
 		@primary="save"
 		:tertiary="$t('misc.delete')"
-		@tertiary="$router.push({ name: 'namespace.settings.delete', params: { id: $route.params.id }, state: { backdropRoutePath: $route.fullPath } })"
+		@tertiary="$router.push({ name: 'namespace.settings.delete', params: { id: $route.params.id } })"
 		#default="{onClose}"
 	>
 		<form @submit.prevent="save(onClose)">
diff --git a/src/views/teams/ListTeams.vue b/src/views/teams/ListTeams.vue
index 6111621da..bf5d68452 100644
--- a/src/views/teams/ListTeams.vue
+++ b/src/views/teams/ListTeams.vue
@@ -1,10 +1,7 @@
 <template>
 	<div class="content loader-container is-max-width-desktop" :class="{ 'is-loading': teamService.loading}">
 		<x-button
-			:to="{
-				name:'teams.create',
-				state: { backdropRoutePath: $route.fullPath },
-			}"
+			:to="{name:'teams.create'}"
 			class="is-pulled-right"
 			icon="plus"
 		>
@@ -21,10 +18,7 @@
 		</ul>
 		<p v-else-if="!teamService.loading" class="has-text-centered has-text-grey is-italic">
 			{{ $t('team.noTeams') }}
-			<router-link :to="{
-				name: 'teams.create',
-				state: { backdropRoutePath: $route.fullPath },
-			}">
+			<router-link :to="{name: 'teams.create'}">
 				{{ $t('team.create.title') }}.
 			</router-link>
 		</p>
-- 
2.40.1


From de7d004c6e91134fc0ff8f06668fba59ee8f10b0 Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Wed, 23 Nov 2022 21:23:56 +0100
Subject: [PATCH 15/15] chore: add description to OptionalWrapper

---
 src/components/base/OptionalWrapper.vue | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/components/base/OptionalWrapper.vue b/src/components/base/OptionalWrapper.vue
index 1600785b8..dcde77cbe 100644
--- a/src/components/base/OptionalWrapper.vue
+++ b/src/components/base/OptionalWrapper.vue
@@ -1,11 +1,22 @@
-<!-- https://github.com/vuejs/rfcs/pull/449 -->
-<!-- https://github.com/vuejs/rfcs/discussions/448#discussioncomment-2769396= -->
 <script lang="ts">
 export default { inheritAttrs: false }
 </script>
 
 <script setup lang="ts">
-defineProps<{ is: any }>()
+/**
+ * This component makes it possible to optionally wrap around another component.
+ * It's based on these ideas:
+ * 
+ * - https://github.com/vuejs/rfcs/pull/449
+ * - https://github.com/vuejs/rfcs/discussions/448#discussioncomment-2769396=
+ */
+defineProps<{
+	/**
+	 * If the `is` prop defines a component it will be rendered as a wrapper around the slot content.
+	 * If the `is` prop is undefined there won't be any wrapper.
+	 */
+	is: any,
+}>()
 </script>
 
 <template>
-- 
2.40.1