From 01021ef28b96f26c25ccb58034d2000735db3fed Mon Sep 17 00:00:00 2001
From: glax <johanna@bernloehr.eu>
Date: Sat, 27 Sep 2025 22:47:53 +0200
Subject: [PATCH] Add merge page

---
 website/app/app.vue                           | 31 ++++++++++---------
 website/app/components/ChaptersList.vue       | 19 +++++++++---
 website/app/components/MangaDetailPage.vue    |  9 +++---
 website/app/pages/download/[mangaId].vue      |  3 +-
 website/app/pages/index.vue                   |  2 +-
 .../{[mangaId].vue => [mangaId]/index.vue}    |  0
 .../manga/[mangaId]/merge/[targetId].vue      | 29 +++++++++++++++++
 .../app/pages/manga/[mangaId]/merge/index.vue | 15 +++++++++
 website/app/pages/search.vue                  |  2 +-
 9 files changed, 81 insertions(+), 29 deletions(-)
 rename website/app/pages/manga/{[mangaId].vue => [mangaId]/index.vue} (100%)
 create mode 100644 website/app/pages/manga/[mangaId]/merge/[targetId].vue
 create mode 100644 website/app/pages/manga/[mangaId]/merge/index.vue

diff --git a/website/app/app.vue b/website/app/app.vue
index 61a59b3..a9142a7 100644
--- a/website/app/app.vue
+++ b/website/app/app.vue
@@ -3,23 +3,25 @@
         <UHeader>
             <template #left>
                 <NuxtLink to="https://github.com/C9Glax/tranga"><Icon name="i-lucide-github" />API</NuxtLink>
-                <NuxtLink to="https://github.com/C9Glax/tranga-website"><Icon name="i-lucide-github" />Website</NuxtLink>
+                <NuxtLink to="https://github.com/C9Glax/tranga-website"
+                    ><Icon name="i-lucide-github" />Website</NuxtLink
+                >
                 <NuxtLink to=""><Icon name="i-lucide-book-open" />Swagger</NuxtLink>
             </template>
             <template #default>
                 <NuxtLink to="/">
-                <div class="h-full flex gap-2 items-center">
-                    <img src="/blahaj.png" class="h-lh cursor-grab" />
-                    <p
-                        style="
-                            background: linear-gradient(110deg, var(--color-pink), var(--color-blue));
-                            -webkit-background-clip: text;
-                            -webkit-text-fill-color: transparent;
-                        "
-                        class="font-bold cursor-pointer text-3xl">
-                        Tranga
-                    </p>
-                </div>
+                    <div class="h-full flex gap-2 items-center">
+                        <img src="/blahaj.png" class="h-lh cursor-grab" />
+                        <p
+                            style="
+                                background: linear-gradient(110deg, var(--color-pink), var(--color-blue));
+                                -webkit-background-clip: text;
+                                -webkit-text-fill-color: transparent;
+                            "
+                            class="font-bold cursor-pointer text-3xl">
+                            Tranga
+                        </p>
+                    </div>
                 </NuxtLink>
             </template>
             <template #right>
@@ -35,5 +37,4 @@
         </UMain>
     </UApp>
 </template>
-<script setup lang="ts">
-</script>
+<script setup lang="ts"></script>
diff --git a/website/app/components/ChaptersList.vue b/website/app/components/ChaptersList.vue
index d836f6d..36f3140 100644
--- a/website/app/components/ChaptersList.vue
+++ b/website/app/components/ChaptersList.vue
@@ -1,6 +1,11 @@
 <template>
     <UPageList>
-        <UPageCard v-for="chapter in chapters" :key="chapter.key" :title="chapter.title" orientation="horizontal" :ui="{ container: 'p-2 sm:p-2'}">
+        <UPageCard
+            v-for="chapter in chapters"
+            :key="chapter.key"
+            :title="chapter.title"
+            orientation="horizontal"
+            :ui="{ container: 'p-2 sm:p-2' }">
             <template #leading>
                 <Icon v-if="chapter.downloaded" name="i-lucide-circle-x" />
                 <Icon v-else name="i-lucide-circle-check-big" class="stroke-green-500" />
@@ -14,7 +19,11 @@
             </template>
             <template #default>
                 <div>
-                    <MangaconnectorIcon v-for="mangaconnectorId in chapter.mangaConnectorIds.sort((a,b) => a.mangaConnectorName < b.mangaConnectorName ? -1 : 1)" v-bind="mangaconnectorId" />
+                    <MangaconnectorIcon
+                        v-for="mangaconnectorId in chapter.mangaConnectorIds.sort((a, b) =>
+                            a.mangaConnectorName < b.mangaConnectorName ? -1 : 1
+                        )"
+                        v-bind="mangaconnectorId" />
                 </div>
             </template>
         </UPageCard>
@@ -22,12 +31,12 @@
 </template>
 
 <script setup lang="ts">
-import {id} from "#ui/locale";
+import { id } from '#ui/locale';
 
 export interface ChaptersListProps {
     mangaId: string;
 }
 const props = defineProps<ChaptersListProps>();
 
-const { data: chapters } = useApi('/v2/Manga/{MangaId}/Chapters', { path: { MangaId: props.mangaId }})
-</script>
\ No newline at end of file
+const { data: chapters } = useApi('/v2/Manga/{MangaId}/Chapters', { path: { MangaId: props.mangaId } });
+</script>
diff --git a/website/app/components/MangaDetailPage.vue b/website/app/components/MangaDetailPage.vue
index 7fcda9f..81632d1 100644
--- a/website/app/components/MangaDetailPage.vue
+++ b/website/app/components/MangaDetailPage.vue
@@ -26,13 +26,12 @@
         <UPageBody class="relative pr-4">
             <div class="w-full flex flex-row justify-between">
                 <div>
-                    <UButton variant="soft" :to="backPath??'/'" icon="i-lucide-arrow-left">Back</UButton>
+                    <UButton variant="soft" :to="backPath ?? '/'" icon="i-lucide-arrow-left">Back</UButton>
                     <p v-if="title" class="text-3xl">{{ title }}</p>
                 </div>
-                <div>
-                    <slot name="actions">
-
-                    </slot>
+                <div v-if="manga" class="flex flex-row gap-2">
+                    <UButton trailing-icon="i-lucide-merge" :to="`${manga.key}/merge/`">Merge</UButton>
+                    <slot name="actions" />
                 </div>
             </div>
             <slot />
diff --git a/website/app/pages/download/[mangaId].vue b/website/app/pages/download/[mangaId].vue
index ce567ad..9339139 100644
--- a/website/app/pages/download/[mangaId].vue
+++ b/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">
diff --git a/website/app/pages/index.vue b/website/app/pages/index.vue
index 8cf733d..624f2d0 100644
--- a/website/app/pages/index.vue
+++ b/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>
 
diff --git a/website/app/pages/manga/[mangaId].vue b/website/app/pages/manga/[mangaId]/index.vue
similarity index 100%
rename from website/app/pages/manga/[mangaId].vue
rename to website/app/pages/manga/[mangaId]/index.vue
diff --git a/website/app/pages/manga/[mangaId]/merge/[targetId].vue b/website/app/pages/manga/[mangaId]/merge/[targetId].vue
new file mode 100644
index 0000000..e8397f7
--- /dev/null
+++ b/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>
diff --git a/website/app/pages/manga/[mangaId]/merge/index.vue b/website/app/pages/manga/[mangaId]/merge/index.vue
new file mode 100644
index 0000000..368ae75
--- /dev/null
+++ b/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>
diff --git a/website/app/pages/search.vue b/website/app/pages/search.vue
index 053dce2..acb4124 100644
--- a/website/app/pages/search.vue
+++ b/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}`)