Add merge page

website/app/pages/download/[mangaId].vue

@@ -1,6 +1,5 @@
 <template>
-    <MangaDetailPage :manga="manga" back-path="/search">
-    </MangaDetailPage>
+    <MangaDetailPage :manga="manga" back-path="/search"> </MangaDetailPage>
 </template>
 
 <script setup lang="ts">

website/app/pages/index.vue

@@ -13,7 +13,7 @@
 </template>
 
 <script setup lang="ts">
-const { data: manga } = useApi('/v2/Manga/Downloading');
+const { data: manga } = useApi('/v2/Manga');
 const expanded = ref(-1);
 </script>
 

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

@@ -0,0 +1,29 @@
+<template>
+    <UPageBody class="flex flex-col items-center">
+        <UButton
+            icon="i-lucide-arrow-left"
+            class="w-fit self-start m-20"
+            variant="soft"
+            :to="`/manga/${mangaId}/merge/`"
+            >Back</UButton
+        >
+        <div class="flex flex-row justify-evenly items-center">
+            <MangaCard v-if="manga" :manga="manga" :expanded="true" />
+            <USkeleton v-else class="max-w-[600px] w-full h-[350px]" />
+            <UIcon name="i-lucide-merge" class="rotate-90 px-20" size="50" />
+            <MangaCard v-if="target" :manga="target" :expanded="true" />
+            <USkeleton v-else class="max-w-[600px] w-full h-[350px]" />
+        </div>
+        <p>This action is irreversible!</p>
+        <UButton color="warning" class="w-fit">Merge</UButton>
+    </UPageBody>
+</template>
+
+<script setup lang="ts">
+const route = useRoute();
+const targetId = route.params.targetId as string;
+const mangaId = route.params.mangaId as string;
+
+const { data: target } = useApi('/v2/Manga/{MangaId}', { path: { MangaId: targetId } });
+const { data: manga } = useApi('/v2/Manga/{MangaId}', { path: { MangaId: mangaId } });
+</script>

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

@@ -0,0 +1,15 @@
+<template>
+    <UPageHeader class="text-3xl px-4">Merge <span v-if="manga">{{ manga.name }}</span><USkeleton v-else as="span" class="w-60 h-lh"></USkeleton> into</UPageHeader>
+    <UPageBody class="p-4 flex flex-row flex-wrap gap-6 mt-0">
+        <NuxtLink v-for="m in mangas" :to="`${m.key}`">
+            <MangaCard :manga="m" />
+        </NuxtLink>
+    </UPageBody>
+</template>
+
+<script setup lang="ts">
+const route = useRoute();
+
+const { data: manga } = useApi('/v2/Manga/{MangaId}', { path: { MangaId: route.params.mangaId as string } });
+const { data: mangas } = useApi('/v2/Manga');
+</script>

website/app/pages/search.vue

@@ -98,7 +98,7 @@ const search = async (query: string): Promise<MinimalManga[]> => {
         return await $fetch<MinimalManga>(new Request(`${config.public.openFetch.api.baseURL}v2/Search/Url`), {
             method: 'POST',
             body: JSON.stringify(query),
-        }).then(x => [x]);
+        }).then((x) => [x]);
     } else if (connector.value) {
         return await $fetch<MinimalManga[]>(
             new Request(`${config.public.openFetch.api.baseURL}v2/Search/${connector.value.name}/${query}`)