recursive navigation

website/app/pages/manga/[mangaId]/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <MangaDetailPage :manga="manga">
+    <MangaDetailPage :manga="manga" :back-url="backUrl">
         <div class="grid gap-3 max-sm:grid-flow-row-dense min-sm:grid-cols-[70%_auto]">
             <ChaptersList :manga-id="mangaId" />
             <div class="flex flex-col gap-2">
@@ -67,9 +67,11 @@
 
 <script setup lang="ts">
 import MangaDetailPage from '~/components/MangaDetailPage.vue';
+const { $api } = useNuxtApp();
 const route = useRoute();
 const mangaId = route.params.mangaId as string;
-const { $api } = useNuxtApp();
+const backUrl = route.query.return as string | undefined;
+
 const flashDownloading = route.query.download;
 
 const { data: manga } = await useApi('/v2/Manga/{MangaId}', {

website/app/pages/manga/[mangaId]/merge/[targetId].vue

@@ -24,6 +24,7 @@
 const route = useRoute();
 const targetId = route.params.targetId as string;
 const mangaId = route.params.mangaId as string;
+const path = route.fullPath;
 const { $api } = useNuxtApp();
 
 const reverse = ref(false);
@@ -34,7 +35,7 @@ const merge = async () => {
     const from = reverse.value ? mangaId : targetId;
     const to = reverse.value == false ? targetId : mangaId;
     await $api('/v2/Manga/{MangaIdFrom}/MergeInto/{MangaIdInto}', { method: 'POST', path: { MangaIdFrom: from, MangaIdInto: to } });
-    navigateTo(`/manga/${to}`);
+    navigateTo(`/manga/${to}?return=${path}`);
 };
 
 useHead({ title: 'Confirm merge' });

website/app/pages/manga/[mangaId]/merge/index.vue

@@ -1,13 +1,18 @@
 <template>
-    <MangaDetailPage :manga="manga" :back="{ text: 'Back', href: `/manga/${mangaId}`, icon: 'i-lucide-arrow-left' }" title="Merge with">
+    <MangaDetailPage
+        :manga="manga"
+        :back="{ text: 'Back', href: backUrl ?? `/manga/${mangaId}`, icon: 'i-lucide-arrow-left' }"
+        title="Merge with">
         <USkeleton v-if="!mangas" class="w-full h-[350px]" />
-        <MangaCardList :manga="mangas" @click="(m) => navigateTo(`/manga/${mangaId}/merge/${m.key}`)" />
+        <MangaCardList :manga="mangas" @click="(m) => navigateTo(`/manga/${mangaId}/merge/${m.key}?return=${path}`)" />
     </MangaDetailPage>
 </template>
 
 <script setup lang="ts">
 const route = useRoute();
 const mangaId = route.params.mangaId as string;
+const backUrl = route.query.return as string | undefined;
+const path = route.fullPath;
 
 const { data: manga } = await useApi('/v2/Manga/{MangaId}', { path: { MangaId: mangaId }, key: FetchKeys.Manga.Id(mangaId) });
 const { data: mangas } = await useApi('/v2/Manga', { key: FetchKeys.Manga.All });