Add "TrangaPage" composable

website/app/components/LoadingPage.vue

@@ -2,7 +2,7 @@
     <UPageBody v-if="loading">
         <UPageHero title="Loading..." />
     </UPageBody>
-    <UPageBody v-else v-bind="$props">
+    <UPageBody v-else v-bind="$props" class="mt-0 pb-0 pr-4 h-full">
         <template v-for="(_, slotName) in $slots" #[slotName]>
             <slot :name="slotName" />
         </template>

website/app/components/MangaCard.vue

@@ -2,7 +2,7 @@
     <UCard
         v-if="!expanded"
         :ui="{ body: 'p-0 sm:p-0', root: 'overflow-visible' }"
-        class="relative max-sm:w-[calc(var(--mangacover-width)/2)] max-sm:h-[calc(var(--mangacover-height)/2)] w-(--mangacover-width) h-(--mangacover-height) mt-2 mb-2"
+        class="relative max-sm:w-[calc(var(--mangacover-width)/2)] max-sm:h-[calc(var(--mangacover-height)/2)] w-(--mangacover-width) h-(--mangacover-height) mt-4 mr-4"
         @click="$emit('click')">
         <MangaCover :manga="manga" blur />
         <div class="absolute -top-4 -right-4 flex flex-col bg-pink rounded-full">
@@ -13,7 +13,7 @@
         v-else
         orientation="horizontal"
         reverse
-        class="relative max-sm:w-full max-sm:h-full w-[calc(var(--mangacover-width)*2+1.5rem)] h-(--mangacover-height) mt-2 mb-2"
+        class="relative max-sm:w-full max-sm:h-full w-[calc(var(--mangacover-width)*2+1.5rem)] h-(--mangacover-height) mt-4 mr-4"
         :ui="{ body: 'p-0 sm:p-0', root: 'overflow-visible' }"
         @click="$emit('click')">
         <div class="flex flex-row w-full h-full basis-auto">

website/app/components/MangaCardList.vue

@@ -1,9 +1,11 @@
 <template>
-    <MangaCard v-for="(m, i) in manga" :key="m.key" :manga="m" :expanded="i === expanded" @click="expanded = expanded === i ? -1 : i">
+    <div class="flex flex-row flex-wrap gap-2">
-        <template #actions="forManga">
+        <MangaCard v-for="(m, i) in manga" :key="m.key" :manga="m" :expanded="i === expanded" @click="expanded = expanded === i ? -1 : i">
-            <UButton :to="`/manga/${forManga.key}`">Details</UButton>
+            <template #actions="forManga">
-        </template>
+                <UButton :to="`/manga/${forManga.key}`">Details</UButton>
-    </MangaCard>
+            </template>
+        </MangaCard>
+    </div>
 </template>
 
 <script setup lang="ts">

website/app/components/MangaDetailPage.vue

@@ -1,7 +1,7 @@
 <template>
-    <UPage class="h-full">
+    <TrangaPage v-bind="$props">
         <template #left>
-            <div class="flex flex-col gap-2 p-4 bg-elevated">
+            <div class="flex flex-col gap-2">
                 <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">
@@ -23,29 +23,20 @@
                 <USkeleton v-else class="w-full h-30" />
             </div>
         </template>
-        <UPageBody class="relative min-sm:mr-12 max-sm:mx-4">
+        <template #actions>
-            <div class="w-full flex flex-row justify-between">
+            <slot name="actions" />
-                <div>
+        </template>
-                    <UButton variant="soft" :to="backPath ?? '/'" icon="i-lucide-arrow-left">Back</UButton>
+        <slot />
-                    <p v-if="title" class="text-3xl">{{ title }}</p>
+    </TrangaPage>
-                </div>
-                <div v-if="manga" class="flex flex-row gap-2">
-                    <slot name="actions" />
-                </div>
-            </div>
-            <slot />
-        </UPageBody>
-    </UPage>
 </template>
 
 <script setup lang="ts">
 import type { components } from '#open-fetch-schemas/api';
+import TrangaPage, { type PageProps } from '~/components/TrangaPage.vue';
 type Manga = components['schemas']['Manga'];
 
-export interface MangaDetailPageProps {
+export interface MangaDetailPageProps extends PageProps {
     manga?: Manga;
-    title?: string;
-    backPath?: string;
 }
 
 defineProps<MangaDetailPageProps>();

website/app/components/TrangaPage.vue

@@ -0,0 +1,36 @@
+<template>
+    <UPageBody v-bind="$props" class="mt-0 pb-0 pr-4 h-full">
+        <div class="flex flex-row gap-4 h-full relative">
+            <div v-if="$slots.left" class="flex flex-col gap-2 bg-elevated w-1/5 h-full pl-4 py-4">
+                <slot name="left" />
+            </div>
+            <div :class="['flex flex-col gap-2 w-full py-4 relative', $slots.left ? '' : 'pl-4']">
+                <div class="w-full flex flex-row justify-between mb-4">
+                    <div class="flex flex-row gap-6">
+                        <UButton variant="outline" color="neutral" :to="back?.href ?? '/'" :icon="back?.icon ?? 'i-lucide-home'">{{
+                            back?.text ?? 'Home'
+                        }}</UButton>
+                        <slot name="title">
+                            <p v-if="title" class="text-2xl text-primary font-semibold">{{ title }}</p>
+                        </slot>
+                    </div>
+                    <div class="flex flew-row gap-2">
+                        <slot name="actions" />
+                    </div>
+                </div>
+                <slot />
+            </div>
+        </div>
+    </UPageBody>
+</template>
+
+<script setup lang="ts">
+import type { PageBodyProps } from '#ui/components/PageBody.vue';
+
+export interface PageProps extends PageBodyProps {
+    title?: string;
+    back?: { href?: string; text?: string; icon?: string };
+}
+
+defineProps<PageProps>();
+</script>

website/app/error.vue

@@ -2,7 +2,9 @@
     <UPageBody>
         <UPageHero :title="String(error?.statusCode) ?? 'Error'" :description="error?.message">
             <UButton to="/" class="w-fit place-self-center">Go back home</UButton>
-            <NuxtLink to="https://github.com/C9Glax/tranga-website/issues/new" class="w-fit place-self-center hover:underline"><Icon name="i-lucide-github" class="mr-2" />Report this issue</NuxtLink>
+            <NuxtLink to="https://github.com/C9Glax/tranga-website/issues/new" class="w-fit place-self-center hover:underline"
+                ><Icon name="i-lucide-github" class="mr-2" />Report this issue</NuxtLink
+            >
         </UPageHero>
     </UPageBody>
 </template>

website/app/pages/index.vue

@@ -1,6 +1,6 @@
 <template>
-    <LoadingPage :loading="status === 'pending'" class="p-4 flex flex-row flex-wrap gap-6 mt-0">
+    <LoadingPage :loading="status === 'pending'">
-        <MangaCardList :manga="manga" />
+        <MangaCardList :manga="manga" class="mx-4 mt-2" />
     </LoadingPage>
 </template>
 

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}`">
+    <MangaDetailPage
-        <h1 class="text-2xl text-secondary font-semibold">{{ metadataFetcherName }}</h1>
+        :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>
+    <MangaDetailPage :manga="manga" :back="{ text: 'Back', href: `/manga/${mangaId}`, icon: 'i-lucide-arrow-left' }" title="Merge with">
-        <UPageHeader class="text-3xl px-4"
+        <USkeleton v-if="!mangas" class="w-full h-[350px]" />
-            >Merge <span v-if="manga" class="italic text-secondary">{{ manga.name }}</span
+        <NuxtLink v-for="m in mangas.filter((x) => x.key != mangaId)" v-else :key="m.key" :to="`/manga/${mangaId}/merge/${m.key}`">
-            ><USkeleton v-else as="span" class="w-60 h-lh" /> with</UPageHeader
+            <MangaCard :manga="m" />
-        >
+        </NuxtLink>
-        <UPageBody class="p-4 flex flex-row flex-wrap gap-6 mt-0">
+    </MangaDetailPage>
-            <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>
 </template>
 
 <script setup lang="ts">

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

@@ -1,12 +1,13 @@
 <template>
-    <LoadingPage :loading="status === 'pending'" class="p-4">
+    <LoadingPage :loading="status === 'pending'">
-        <div class="flex flex-row gap-4">
+        <TrangaPage>
-            <UButton variant="soft" to="/" icon="i-lucide-arrow-left">Home</UButton>
+            <template #title>
-            <h1 class="text-2xl">
+                <h1 class="text-2xl">
-                Manga with Tag <UBadge variant="outline" class="text-primary font-semibold text-xl">{{ tag }}</UBadge>
+                    Manga with Tag <UBadge variant="outline" class="text-primary font-semibold text-xl">{{ tag }}</UBadge>
-            </h1>
+                </h1>
-        </div>
+            </template>
-        <MangaCardList :manga="manga" />
+            <MangaCardList :manga="manga" />
+        </TrangaPage>
     </LoadingPage>
 </template>
 

website/app/pages/search.vue

@@ -1,7 +1,6 @@
 <template>
-    <UPageBody>
+    <TrangaPage>
         <UPageSection :ui="{ container: 'gap-1 sm:gap-1 lg:gap-1 py-4 sm:py-1 lg:py-1 gap-1 sm:gap-1 lg:gap-1' }" class="h-fit">
-            <UButton variant="soft" to="/" icon="i-lucide-arrow-left" class="w-min">Back</UButton>
             <div class="flex max-sm:flex-col flex-row w-full h-full justify-between gap-4">
                 <UStepper v-model="activeStep" orientation="vertical" :items="items" class="h-full" disabled color="secondary" />
                 <UCard class="grow">
@@ -30,7 +29,7 @@
             :ui="{ container: 'gap-1 sm:gap-1 lg:gap-1 py-1 sm:py-1 lg:py-1 gap-1 sm:gap-1 lg:gap-1' }">
             <template #description>
                 <p class="text-lg">
-                    Result for <span class="text-secondary">'{{ searchQuery }}'</span>
+                    Result for <span class="text-secondary">{{ searchQuery }}</span>
                 </p>
             </template>
             <template #default>
@@ -42,13 +41,13 @@
                         :expanded="i === expanded"
                         @click="expanded = expanded === i ? -1 : i">
                         <template #actions="manga">
-                            <UButton :to="`/manga/${manga.key}/download/${connector.name}`">Download</UButton>
+                            <UButton :to="`/manga/${manga.key}?download=true`">Download</UButton>
                         </template>
                     </MangaCard>
                 </div>
             </template>
         </UPageSection>
-    </UPageBody>
+    </TrangaPage>
 </template>
 
 <script setup lang="ts">