feat: merge TaskDetailViewModal with modal

src/components/home/contentAuth.vue

@@ -36,9 +36,14 @@
 				</router-view>
 
 				<transition name="modal">
-					<TaskDetailViewModal v-if="currentModal" >
+					<modal
+						v-if="currentModal" 
+						@close="closeModal()"
+						variant="scrolling"
+						class="task-detail-view-modal"
+					>
 						<component :is="currentModal" />
-					</TaskDetailViewModal>
+					</modal>
 				</transition>
 
 				<a
@@ -62,7 +67,6 @@ import {useEventListener} from '@vueuse/core'
 import {CURRENT_LIST, KEYBOARD_SHORTCUTS_ACTIVE, MENU_ACTIVE} from '@/store/mutation-types'
 import Navigation from '@/components/home/navigation.vue'
 import QuickActions from '@/components/quick-actions/quick-actions.vue'
-import TaskDetailViewModal from '@/views/tasks/TaskDetailViewModal.vue'
 import BaseButton from '@/components/base/BaseButton.vue'
 
 function useRouteWithModal() {
@@ -100,10 +104,22 @@ function useRouteWithModal() {
 		)
 	})
 
-	return { routeWithModal, currentModal }
+	function closeModal() {
+		const historyState = computed(() => route.fullPath && window.history.state)
+
+		if (historyState.value) {
+			router.back()
+		} else {
+			const backdropRoute = historyState.value?.backdropView && router.resolve(historyState.value.backdropView)
+			router.push(backdropRoute)
+		}
 	}
 
-const { routeWithModal, currentModal } = useRouteWithModal()
+	return { routeWithModal, currentModal, closeModal }
+}
+
+const { routeWithModal, currentModal, closeModal } = useRouteWithModal()
+
 
 const store = useStore()
 

src/components/modal/modal.vue

@@ -22,6 +22,13 @@
 						'is-wide': wide
 					}"
 				>
+					<BaseButton
+						@click="emit('close')"
+						class="close"
+					>
+						<icon icon="times"/>
+					</BaseButton>
+
 					<slot>
 						<div class="header">
 							<slot name="header"></slot>
@@ -54,6 +61,8 @@
 </template>
 
 <script>
+import BaseButton from '@/components/base/BaseButton.vue'
+
 export const TRANSITION_NAMES = {
 	MODAL: 'modal',
 	FADE: 'fade',
@@ -71,6 +80,11 @@ function validValue(values) {
 
 export default {
 	name: 'modal',
+
+	components: {
+		BaseButton,
+	},
+
 	mounted() {
 		document.addEventListener('keydown', (e) => {
 			// Close the model when escape is pressed
@@ -197,4 +211,23 @@ export default {
 		}
 	}
 }
+
+.close {
+	position: fixed;
+	top: 5px;
+	right: 26px;
+	color: var(--white);
+	font-size: 2rem;
+
+	@media screen and (max-width: $desktop) {
+		color: var(--dark);
+	}
+}
+</style>
+
+<style lang="scss">
+// Close icon SVG uses currentColor, change the color to keep it visible
+.dark .task-detail-view-modal .close {
+	color: var(--grey-900);
+}
 </style>

src/views/tasks/TaskDetailViewModal.vue

@@ -1,53 +0,0 @@
-<template>
-	<modal
-		@close="close()"
-		variant="scrolling"
-		class="task-detail-view-modal"
-	>
-		<BaseButton @click="close()" class="close">
-			<icon icon="times"/>
-		</BaseButton>
-		<slot />
-	</modal>
-</template>
-
-<script setup lang="ts">
-import {computed} from 'vue'
-import {useRouter, useRoute} from 'vue-router'
-
-import BaseButton from '@/components/base/BaseButton.vue'
-
-const route = useRoute()
-const historyState = computed(() => route.fullPath && window.history.state)
-
-const router = useRouter()
-function close() {
-	if (historyState.value) {
-		router.back()
-	} else {
-		const backdropRoute = historyState.value?.backdropView && router.resolve(historyState.value.backdropView)
-		router.push(backdropRoute)
-	}
-}
-</script>
-
-<style lang="scss" scoped>
-.close {
-	position: fixed;
-	top: 5px;
-	right: 26px;
-	color: var(--white);
-	font-size: 2rem;
-
-	@media screen and (max-width: $desktop) {
-		color: var(--dark);
-	}
-}
-</style>
-
-<style lang="scss">
-// Close icon SVG uses currentColor, change the color to keep it visible
-.dark .task-detail-view-modal .close {
-	color: var(--grey-900);
-}
-</style>