Add "TrangaPage" composable

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

@@ -1,43 +0,0 @@
-<template>
-    <MangaDetailPage :manga="manga" back-path="/search">
-        <UCard>
-            <template #default>
-                <div class="flex flex-row gap-2 w-full justify-center">
-                    <LibrarySelect :manga-id="mangaId" :library-id="libraryId" />
-                    <UButton color="primary" :disabled="!libraryId" :loading="loading" @click="onDownloadClick">
-                        Download from {{ mangaConnector?.name }}
-                        <template #trailing>
-                            <NuxtImg :src="mangaConnector?.iconUrl" class="h-lh" />
-                        </template>
-                    </UButton>
-                </div>
-            </template>
-        </UCard>
-    </MangaDetailPage>
-</template>
-
-<script setup lang="ts">
-const route = useRoute();
-const mangaId = route.params.mangaId as string;
-const mangaConnectorName = route.params.mangaConnectorName as string;
-const { $api } = useNuxtApp();
-
-const { data: manga } = await useApi('/v2/Manga/{MangaId}', { path: { MangaId: mangaId }, key: FetchKeys.Manga.Id(mangaId) });
-const libraryId = ref(manga.value?.fileLibraryId);
-const { data: mangaConnector } = await useApi('/v2/MangaConnector/{MangaConnectorName}', {
-    path: { MangaConnectorName: mangaConnectorName },
-    key: FetchKeys.MangaConnector.Id(mangaConnectorName),
-});
-
-const loading = ref(false);
-const onDownloadClick = async () => {
-    loading.value = true;
-    await $api('/v2/Manga/{MangaId}/DownloadFrom/{MangaConnectorName}/{IsRequested}', {
-        method: 'PATCH',
-        path: { MangaId: mangaId, MangaConnectorName: mangaConnectorName, IsRequested: true },
-    });
-    loading.value = false;
-};
-
-useHead({ title: 'Download Manga' });
-</script>

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

@@ -1,11 +1,11 @@
 <template>
     <MangaDetailPage :manga="manga">
-        <div class="grid gap-3 max-sm:grid-flow-row-dense min-sm:grid-cols-[70%_30%]">
+        <div class="grid gap-3 max-sm:grid-flow-row-dense min-sm:grid-cols-[70%_auto]">
             <ChaptersList :manga-id="mangaId" />
             <div class="flex flex-col gap-2">
-                <UCard>
+                <UCard :class="[flashDownloading ? 'animate-[flash_0.75s_ease_0.5s]' : '']">
                     <template #header>
-                        <h1>Download</h1>
+                        <h1 class="font-semibold">Download</h1>
                     </template>
                     <LibrarySelect :manga-id="mangaId" :library-id="libraryId" class="w-full" />
                     <div v-if="manga" class="flex flex-row gap-2 w-full flex-wrap my-2 justify-between">
@@ -31,7 +31,7 @@
                 </UCard>
                 <UCard :ui="{ body: 'p-0 sm:p-0' }">
                     <template #header>
-                        <h1>Metadata</h1>
+                        <h1 class="font-semibold">Metadata</h1>
                     </template>
                     <UTable
                         v-if="metadataFetchers && metadata"
@@ -41,15 +41,18 @@
                             { header: '', id: 'link' },
                         ]">
                         <template #name-cell="{ row }">
-                            {{ row.original }}
+                            <UTooltip :text="metadata.find((me) => me.metadataFetcherName == row.original)?.identifier ?? undefined">{{
+                                row.original
+                            }}</UTooltip>
                         </template>
                         <template #link-cell="{ row }">
                             <UButton
                                 v-if="metadata.find((me) => me.metadataFetcherName == row.original)"
+                                class="float-right px-4"
                                 @click="unlinkMetadataFetcher(row.original)"
                                 >Unlink</UButton
                             >
-                            <UButton v-else :to="`/manga/${mangaId}/linkMetadata/${row.original}`">Link</UButton>
+                            <UButton v-else :to="`/manga/${mangaId}/linkMetadata/${row.original}`" class="float-right px-4">Link</UButton>
                         </template>
                     </UTable>
                 </UCard>
@@ -67,6 +70,7 @@ import MangaDetailPage from '~/components/MangaDetailPage.vue';
 const route = useRoute();
 const mangaId = route.params.mangaId as string;
 const { $api } = useNuxtApp();
+const flashDownloading = route.query.download;
 
 const { data: manga } = await useApi('/v2/Manga/{MangaId}', {
     path: { MangaId: mangaId },
@@ -104,3 +108,15 @@ const unlinkMetadataFetcher = async (metadataFetcherName: string) => {
 
 useHead({ title: 'Manga' });
 </script>
+
+<style>
+@keyframes flash {
+    0%,
+    100% {
+        background-color: initial;
+    }
+    50% {
+        background-color: var(--color-secondary);
+    }
+}
+</style>

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

@@ -1,19 +1,21 @@
 <template>
-    <MangaDetailPage :manga="manga" :back-path="`/manga/${mangaId}`">
-        <h1 class="text-2xl text-secondary font-semibold">{{ metadataFetcherName }}</h1>
+    <MangaDetailPage
+        :manga="manga"
+        :back="{ text: 'Back', href: `/manga/${mangaId}`, icon: 'i-lucide-arrow-left' }"
+        :title="metadataFetcherName">
         <USkeleton v-if="status === 'pending'" class="w-full h-14" />
-        <UCard v-else class="flex flex-wrap gap-2 basis-0">
+        <UCard v-else class="flex flex-wrap gap-2">
             <div
                 v-for="data in searchData"
                 :key="data.identifier"
-                class="grid grid-cols-[var(--mangacover-width)_auto_auto] auto-rows-fr grid-flow-col gap-4">
+                class="grid grid-cols-[var(--mangacover-width)_auto_auto] grid-flow-col gap-4">
                 <NuxtImg
                     :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" />
-                <a :href="data.url ?? undefined">
+                <NuxtLink :href="data.url" no-prefetch external target="_blank">
                     <h2 class="text-xl font-semibold text-primary">{{ data.name }}</h2>
-                </a>
+                </NuxtLink>
                 <MDC :value="data.description ?? undefined" />
                 <UButton class="w-min h-min px-4 place-self-end" @click="link(data.identifier)">Link</UButton>
             </div>

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

@@ -1,16 +1,10 @@
 <template>
-    <UPageBody>
-        <UPageHeader class="text-3xl px-4"
-            >Merge <span v-if="manga" class="italic text-secondary">{{ manga.name }}</span
-            ><USkeleton v-else as="span" class="w-60 h-lh" /> with</UPageHeader
-        >
-        <UPageBody class="p-4 flex flex-row flex-wrap gap-6 mt-0">
-            <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>
-        </UPageBody>
-    </UPageBody>
+    <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>
+    </MangaDetailPage>
 </template>
 
 <script setup lang="ts">