feat: unify modal view

fix: List.vue

src/components/home/contentAuth.vue

@@ -22,12 +22,9 @@
 
 				<router-view :route="routeWithModal"/>
 
-				<!-- TODO: is this still used? -->
-				<router-view name="popup" v-slot="{ Component }">
-					<transition name="modal">
-						<component :is="Component" />
-					</transition>
-				</router-view>
+				<transition name="modal">
+					<component v-if="currentModal" :is="currentModal" />
+				</transition>
 
 				<a
 					class="keyboard-shortcuts-button"
@@ -42,7 +39,7 @@
 </template>
 
 <script lang="ts" setup>
-import {watch, computed} from 'vue'
+import {watch, computed, shallowRef, watchEffect} from 'vue'
 import {useStore} from 'vuex'
 import {useRoute, useRouter} from 'vue-router'
 import {useEventListener} from '@vueuse/core'
@@ -64,7 +61,16 @@ function useRouteWithModal() {
 		}
 	})
 
-	return { routeWithModal }
+	
+
+	const currentModal = shallowRef(null)
+	watchEffect(() => {
+		currentModal.value = historyState.value.backgroundView
+			? route.matched[0]?.components.default
+			: null
+	})
+
+	return { routeWithModal, currentModal }
 }
 
 useRouteWithModal()

src/components/list/list-settings-dropdown.vue

@@ -2,21 +2,22 @@
 	<dropdown>
 		<template v-if="isSavedFilter">
 			<dropdown-item
-				:to="{ name: `${listRoutePrefix}.edit`, params: { listId: list.id } }"
+				:to="{ name: 'filter.settings.edit', params: { listId: list.id } }"
 				icon="pen"
 			>
 				{{ $t('menu.edit') }}
 			</dropdown-item>
 			<dropdown-item
-				:to="{ name: `${listRoutePrefix}.delete`, params: { listId: list.id } }"
+				:to="{ name: 'filter.settings.delete', params: { listId: list.id } }"
 				icon="trash-alt"
 			>
 				{{ $t('misc.delete') }}
 			</dropdown-item>
 		</template>
+
 		<template v-else-if="list.isArchived">
 			<dropdown-item
-				:to="{ name: `${listRoutePrefix}.archive`, params: { listId: list.id } }"
+				:to="{ name: 'list.settings.archive', params: { listId: list.id } }"
 				icon="archive"
 			>
 				{{ $t('menu.unarchive') }}
@@ -24,32 +25,32 @@
 		</template>
 		<template v-else>
 			<dropdown-item
-				:to="{ name: `${listRoutePrefix}.edit`, params: { listId: list.id } }"
+				:to="{ name: 'list.settings.edit', params: { listId: list.id } }"
 				icon="pen"
 			>
 				{{ $t('menu.edit') }}
 			</dropdown-item>
 			<dropdown-item
-				:to="{ name: `${listRoutePrefix}.background`, params: { listId: list.id } }"
 				v-if="backgroundsEnabled"
+				:to="{ name: 'list.settings.background', params: { listId: list.id } }"
 				icon="image"
 			>
 				{{ $t('menu.setBackground') }}
 			</dropdown-item>
 			<dropdown-item
-				:to="{ name: `${listRoutePrefix}.share`, params: { listId: list.id } }"
+				:to="{ name: 'list.settings.share', params: { listId: list.id } }"
 				icon="share-alt"
 			>
 				{{ $t('menu.share') }}
 			</dropdown-item>
 			<dropdown-item
-				:to="{ name: `${listRoutePrefix}.duplicate`, params: { listId: list.id } }"
+				:to="{ name: 'list.settings.duplicate', params: { listId: list.id } }"
 				icon="paste"
 			>
 				{{ $t('menu.duplicate') }}
 			</dropdown-item>
 			<dropdown-item
-				:to="{ name: `${listRoutePrefix}.archive`, params: { listId: list.id } }"
+				:to="{ name: 'list.settings.archive', params: { listId: list.id } }"
 				icon="archive"
 			>
 				{{ $t('menu.archive') }}
@@ -63,7 +64,7 @@
 				@change="sub => subscription = sub"
 			/>
 			<dropdown-item
-				:to="{ name: `${listRoutePrefix}.delete`, params: { listId: list.id } }"
+				:to="{ name: 'list.settings.delete', params: { listId: list.id } }"
 				icon="trash-alt"
 				class="has-text-danger"
 			>
@@ -101,24 +102,7 @@ export default {
 	},
 	computed: {
 		backgroundsEnabled() {
-			return this.$store.state.config.enabledBackgroundProviders !== null && this.$store.state.config.enabledBackgroundProviders.length > 0
-		},
-		listRoutePrefix() {
-			let name = 'list'
-
-
-			if (this.$route.name !== null && this.$route.name.startsWith('list.')) {
-				// HACK: we should implement a better routing for the modals
-				const settingsRoutes = ['edit', 'delete', 'archive', 'background', 'share', 'duplicate']
-				const suffix = settingsRoutes.find((route) => this.$route.name.endsWith(`.settings.${route}`))
-				name = this.$route.name.replace(`.settings.${suffix}`,'')
-			}
-
-			if (this.isSavedFilter) {
-				name = name.replace('list.', 'filter.')
-			}
-
-			return `${name}.settings`
+			return this.$store.state.config.enabledBackgroundProviders?.length > 0
 		},
 		isSavedFilter() {
 			return getSavedFilterIdFromListId(this.list.id) > 0