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)

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 },
 		},
 	])),
 ))