Styling (fix margins)

Remove expanding MangaCards
Center MangaCardList
Fix LibrarySelect

website/app/pages/index.vue

@@ -1,6 +1,6 @@
 <template>
     <LoadingPage :loading="status === 'pending'">
-        <MangaCardList :manga="manga" class="mx-4 mt-2" />
+        <MangaCardList :manga="manga" class="mx-4 mt-2" @click="(m) => navigateTo(`/manga/${m.key}`)" />
     </LoadingPage>
 </template>
 

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

@@ -7,7 +7,7 @@
                     <template #header>
                         <h1 class="font-semibold">Download</h1>
                     </template>
-                    <LibrarySelect :manga-id="mangaId" :library-id="libraryId" class="w-full" />
+                    <LibrarySelect :manga-id="mangaId" :library-id="manga?.fileLibraryId" class="w-full" />
                     <div v-if="manga" class="flex flex-row gap-2 w-full flex-wrap my-2 justify-between">
                         <div
                             v-for="mangaconnectorId in manga.mangaConnectorIds.sort((a, b) =>
@@ -23,7 +23,7 @@
                                 <UButton
                                     :icon="mangaconnectorId.useForDownload ? 'i-lucide-cloud-off' : 'i-lucide-cloud-download'"
                                     variant="ghost"
-                                    :disabled="!libraryId"
+                                    :disabled="!manga?.fileLibraryId"
                                     @click="setRequestedFrom(mangaconnectorId.mangaConnectorName, !mangaconnectorId.useForDownload)" />
                             </UTooltip>
                         </div>
@@ -81,7 +81,6 @@ const { data: manga } = await useApi('/v2/Manga/{MangaId}', {
     },
     lazy: true,
 });
-const libraryId = computed(() => manga.value?.fileLibraryId);
 
 const { data: metadataFetchers } = await useApi('/v2/MetadataFetcher', { key: FetchKeys.Metadata.Fetchers, lazy: true });
 const { data: metadata } = await useApi('/v2/MetadataFetcher/Links/{MangaId}', {

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

@@ -13,8 +13,8 @@
                     :src="data.coverUrl ?? '/blahaj.png'"
                     alt="cover"
                     class="row-span-3 object-contain max-sm:w-[calc(var(--mangacover-width)/2)] max-sm:h-[calc(var(--mangacover-height)/2)] w-(--mangacover-width) h-(--mangacover-height) rounded-lg overflow-clip" />
-                <NuxtLink :href="data.url" no-prefetch external target="_blank">
-                    <h2 class="text-xl font-semibold text-primary">{{ data.name }}</h2>
+                <NuxtLink :href="data.url" no-prefetch external target="_blank" class="underline underline-offset-2">
+                    <h2 class="text-xl text-secondary italic">{{ data.name }}</h2>
                 </NuxtLink>
                 <MDC :value="data.description ?? undefined" />
                 <UButton class="w-min h-min px-4 place-self-end" @click="link(data.identifier)">Link</UButton>

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

@@ -1,22 +1,23 @@
 <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]" />
-            <UButton
-                icon="i-lucide-merge"
-                :class="[reverse ? 'rotate-270' : 'rotate-90', 'px-20 transition-transform duration-200 p-5 m-10']"
-                size="xl"
-                variant="ghost"
-                color="neutral"
-                @click="reverse = !reverse" />
-            <MangaCard v-if="target" :manga="target" :expanded="true" />
-            <USkeleton v-else class="max-w-[600px] w-full h-[350px]" />
+    <TrangaPage :back="{ href: `/manga/${mangaId}/merge/`, text: 'Back', icon: 'i-lucide-arrow-left' }">
+        <div class="flex flex-col items-center justify-center gap-10">
+            <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]" />
+                <UButton
+                    icon="i-lucide-merge"
+                    :class="[reverse ? 'rotate-270' : 'rotate-90', 'px-20 transition-transform duration-200 p-5 m-10', 'rounded-full']"
+                    size="xl"
+                    variant="soft"
+                    color="primary"
+                    @click="reverse = !reverse" />
+                <MangaCard v-if="target" :manga="target" :expanded="true" />
+                <USkeleton v-else class="max-w-[600px] w-full h-[350px]" />
+            </div>
+            <p class="text-red-500 animate-pulse font-bold text-3xl">This action is irreversible!</p>
+            <UButton color="warning" variant="outline" class="w-fit" @click="merge">Merge</UButton>
         </div>
-        <p class="text-warning">This action is irreversible!</p>
-        <UButton color="warning" class="w-fit" @click="merge">Merge</UButton>
-    </UPageBody>
+    </TrangaPage>
 </template>
 
 <script setup lang="ts">

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

@@ -1,9 +1,7 @@
 <template>
     <MangaDetailPage :manga="manga" :back="{ text: 'Back', href: `/manga/${mangaId}`, icon: 'i-lucide-arrow-left' }" title="Merge with">
         <USkeleton v-if="!mangas" class="w-full h-[350px]" />
-        <NuxtLink v-for="m in mangas.filter((x) => x.key != mangaId)" v-else :key="m.key" :to="`/manga/${mangaId}/merge/${m.key}`">
-            <MangaCard :manga="m" />
-        </NuxtLink>
+        <MangaCardList :manga="mangas" @click="(m) => navigateTo(`/manga/${mangaId}/merge/${m.key}`)" />
     </MangaDetailPage>
 </template>