recursive navigation for merge and mangadetail

add remove functionality

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

@@ -52,15 +52,17 @@
                                 @click="unlinkMetadataFetcher(row.original)"
                                 >Unlink</UButton
                             >
-                            <UButton v-else :to="`/manga/${mangaId}/linkMetadata/${row.original}`" class="float-right px-4">Link</UButton>
+                            <UButton v-else :to="`/manga/${mangaId}/linkMetadata/${row.original}?return=${path}`" class="float-right px-4"
+                                >Link</UButton
+                            >
                         </template>
                     </UTable>
                 </UCard>
             </div>
         </div>
         <template #actions>
-            <UButton trailing-icon="i-lucide-merge" :to="`/manga/${manga?.key}/merge/`" color="secondary">Merge</UButton>
-            <UButton variant="soft" color="warning" icon="i-lucide-trash" />
+            <UButton trailing-icon="i-lucide-merge" :to="`/manga/${manga?.key}/merge?return=${path}`" color="secondary">Merge</UButton>
+            <UButton variant="soft" color="warning" icon="i-lucide-trash" @click="remove" />
         </template>
     </MangaDetailPage>
 </template>
@@ -71,6 +73,7 @@ const { $api } = useNuxtApp();
 const route = useRoute();
 const mangaId = route.params.mangaId as string;
 const backUrl = route.query.return as string | undefined;
+const path = route.fullPath;
 
 const flashDownloading = route.query.download;
 
@@ -107,6 +110,12 @@ const unlinkMetadataFetcher = async (metadataFetcherName: string) => {
     await refreshNuxtData(FetchKeys.Metadata.Manga(mangaId));
 };
 
+const remove = async () => {
+    await $api('/v2/Manga/{MangaId}', { method: 'DELETE', path: { MangaId: mangaId } });
+    await refreshNuxtData(FetchKeys.Manga.All);
+    navigateTo('/');
+};
+
 useHead({ title: 'Manga' });
 </script>
 

website/app/pages/manga/[mangaId]/linkMetadata/[metadataFetcherName].vue

@@ -1,8 +1,5 @@
 <template>
-    <MangaDetailPage
-        :manga="manga"
-        :back="{ text: 'Back', href: `/manga/${mangaId}`, icon: 'i-lucide-arrow-left' }"
-        :title="metadataFetcherName">
+    <MangaDetailPage :manga="manga" :back-url="backUrl" :title="metadataFetcherName">
         <USkeleton v-if="status === 'pending'" class="w-full h-14" />
         <UCard v-else class="flex flex-wrap gap-2">
             <div
@@ -27,6 +24,7 @@
 const route = useRoute();
 const mangaId = route.params.mangaId as string;
 const metadataFetcherName = route.params.metadataFetcherName as string;
+const backUrl = route.query.return as string | undefined;
 const { $api } = useNuxtApp();
 
 const { data: manga } = await useApi('/v2/Manga/{MangaId}', {

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

@@ -1,8 +1,5 @@
 <template>
-    <MangaDetailPage
-        :manga="manga"
-        :back="{ text: 'Back', href: backUrl ?? `/manga/${mangaId}`, icon: 'i-lucide-arrow-left' }"
-        title="Merge with">
+    <MangaDetailPage :manga="manga" :back-url="backUrl" title="Merge with">
         <USkeleton v-if="!mangas" class="w-full h-[350px]" />
         <MangaCardList :manga="mangas" @click="(m) => navigateTo(`/manga/${mangaId}/merge/${m.key}?return=${path}`)" />
     </MangaDetailPage>