Separate pages for download and details

website/app/components/ChaptersList.vue

@@ -0,0 +1,33 @@
+<template>
+    <UPageList>
+        <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" />
+            </template>
+            <template #footer>
+                <p v-if="chapter.volume" class="inline mr-1">Vol. {{ chapter.volume }}</p>
+                <p class="inline">Ch. {{ chapter.chapterNumber }}</p>
+            </template>
+            <template #description>
+                {{ chapter.fileName }}
+            </template>
+            <template #default>
+                <div>
+                    <MangaconnectorIcon v-for="mangaconnectorId in chapter.mangaConnectorIds.sort((a,b) => a.mangaConnectorName < b.mangaConnectorName ? -1 : 1)" v-bind="mangaconnectorId" />
+                </div>
+            </template>
+        </UPageCard>
+    </UPageList>
+</template>
+
+<script setup lang="ts">
+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>

website/app/components/MangaCover.vue

@@ -12,17 +12,14 @@
             <p class="p-3 text-xl font-semibold max-h-full overflow-clip">{{ manga?.name }}</p>
         </div>
         <LazyNuxtImg
-            v-if="manga || mangaId"
-            :src="`${$config.public.openFetch.api.baseURL}v2/Manga/${manga ? manga.key : mangaId}/Cover/Medium`"
+            :src="`${$config.public.openFetch.api.baseURL}v2/Manga/${manga.key}/Cover/Medium`"
             class="w-full h-full object-cover" />
-        <USkeleton v-else class="w-full h-full object-cover" />
     </div>
 </template>
 
 <script setup lang="ts">
 import type { components } from '#open-fetch-schemas/api';
-type Manga = components['schemas']['Manga'];
 type MinimalManga = components['schemas']['MinimalManga'];
-
-defineProps<{ manga?: Manga | MinimalManga; mangaId?: string; blur?: boolean }>();
+type Manga = components['schemas']['Manga'];
+defineProps<{ manga: Manga | MinimalManga; blur?: boolean }>();
 </script>

website/app/components/MangaDetailPage.vue

@@ -1,8 +1,9 @@
 <template>
-    <UPage class="p-4 h-full">
+    <UPage class="h-full">
         <template #left>
-            <div class="flex flex-col gap-2 border-r-2 pr-4">
-                <MangaCover :manga="manga" class="self-center" />
+            <div class="flex flex-col gap-2 p-4 bg-elevated">
+                <MangaCover v-if="manga" :manga="manga" class="self-center" />
+                <USkeleton v-else class="w-[240px] h-[350px]" />
                 <p v-if="manga" class="font-semibold text-xl">
                     {{ manga.name }}
                     <MangaconnectorIcon v-for="m in manga.mangaConnectorIds" v-bind="m" />
@@ -22,12 +23,18 @@
                 <USkeleton v-else class="w-full h-30" />
             </div>
         </template>
-        <UPageBody class="mt-0 relative">
-            <div>
-                <UButton variant="soft" to="/" icon="i-lucide-arrow-left">Back</UButton>
-                <p v-if="title" class="text-3xl">{{ title }}</p>
-            </div>
+        <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>
+                    <p v-if="title" class="text-3xl">{{ title }}</p>
+                </div>
+                <div>
+                    <slot name="actions">
 
+                    </slot>
+                </div>
+            </div>
             <slot />
         </UPageBody>
     </UPage>
@@ -40,6 +47,7 @@ type Manga = components['schemas']['Manga'];
 export interface MangaDetailPageProps {
     manga?: Manga;
     title?: string;
+    backPath?: string;
 }
 
 defineProps<MangaDetailPageProps>();

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

@@ -0,0 +1,12 @@
+<template>
+    <MangaDetailPage :manga="manga" back-path="/search">
+    </MangaDetailPage>
+</template>
+
+<script setup lang="ts">
+import MangaDetailPage from '~/components/MangaDetailPage.vue';
+
+const route = useRoute();
+
+const { data: manga } = useApi('/v2/Manga/{MangaId}', { path: { MangaId: route.params.mangaId as string } });
+</script>

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

@@ -1,5 +1,10 @@
 <template>
-    <MangaDetailPage :manga="manga"> </MangaDetailPage>
+    <MangaDetailPage :manga="manga">
+        <ChaptersList v-if="manga" :manga-id="manga.key" />
+        <template #actions>
+            <UButton variant="soft" color="warning" icon="i-lucide-trash" />
+        </template>
+    </MangaDetailPage>
 </template>
 
 <script setup lang="ts">