Fix LibrarySelect

Move recursive routing to trangapage

website/app/app.vue

@@ -26,7 +26,7 @@
             <template #right>
                 <UButton icon="i-lucide-plus" to="/search" color="primary">Manga</UButton>
                 <UColorModeButton color="secondary" />
-                <UButton icon="i-lucide-settings" variant="ghost" to="/settings" color="secondary" />
+                <UButton icon="i-lucide-settings" variant="ghost" :to="`/settings?return=${$route.fullPath}`" color="secondary" />
             </template>
         </UHeader>
         <UMain>

website/app/components/LibrarySelect.vue

@@ -1,11 +1,13 @@
 <template>
+    <USkeleton v-if="libraryId === undefined" class="w-full h-8" />
     <USelect
+        v-else
         v-model="library"
         placeholder="Library"
         icon="i-lucide-library-big"
         color="secondary"
         :items="libraries?.map((l) => l.key)"
-        class="w-xs"
+        :class="[libraryId ? '' : 'ring-warning animate-[pulse_1s]']"
         :loading="loading"
         @change="onLibrarySelectChange">
         <template #default="{ modelValue }">
@@ -28,7 +30,7 @@ const { $api } = useNuxtApp();
 
 export interface LibrarySelectProps {
     mangaId: string;
-    libraryId?: string;
+    libraryId?: string | null;
 }
 
 const props = defineProps<LibrarySelectProps>();
@@ -49,7 +51,5 @@ const onLibrarySelectChange = async () => {
     emit('libraryChanged', library.value);
 };
 
-const emit = defineEmits<{
-    (e: 'libraryChanged', id?: string): void;
-}>();
+const emit = defineEmits<{ (e: 'libraryChanged', id?: string): void }>();
 </script>

website/app/components/MangaDetailPage.vue

@@ -1,5 +1,5 @@
 <template>
-    <TrangaPage v-bind="$props" :back="backUrl ? { href: backUrl, icon: 'i-lucide-arrow-left', text: 'Back' } : undefined">
+    <TrangaPage v-bind="$props">
         <template #left>
             <div class="flex flex-col gap-2">
                 <MangaCover v-if="manga" :manga="manga" class="self-center" />
@@ -8,13 +8,13 @@
                     {{ manga.name }}
                     <MangaconnectorIcon v-for="m in manga.mangaConnectorIds" v-bind="m" :key="m.key" />
                 </p>
-                <USkeleton v-else class="text-xl h-20 w-full" />
+                <USkeleton v-else as="p" class="h-20 w-full" />
                 <div v-if="manga" class="flex flex-row gap-1 flex-wrap">
                     <UBadge v-for="author in manga.authors" :key="author.key" variant="outline" color="neutral"
-                        ><NuxtLink :to="`/manga/author/${author.key}?return=${path}`">{{ author.name }}</NuxtLink></UBadge
+                        ><NuxtLink :to="`/manga/author/${author.key}?return=${$route.fullPath}`">{{ author.name }}</NuxtLink></UBadge
                     >
                     <UBadge v-for="tag in manga.tags" :key="tag" variant="outline" color="primary"
-                        ><NuxtLink :to="`/manga/tag/${tag}?return=${path}`">{{ tag }}</NuxtLink></UBadge
+                        ><NuxtLink :to="`/manga/tag/${tag}?return=${$route.fullPath}`">{{ tag }}</NuxtLink></UBadge
                     >
                     <NuxtLink v-for="link in manga.links" :key="link.key" :to="link.url" external no-prefetch>
                         <UBadge variant="outline" color="secondary">{{ link.provider }}</UBadge>
@@ -36,11 +36,9 @@
 import type { components } from '#open-fetch-schemas/api';
 import TrangaPage, { type PageProps } from '~/components/TrangaPage.vue';
 type Manga = components['schemas']['Manga'];
-const path = useRoute().fullPath;
 
 export interface MangaDetailPageProps extends PageProps {
     manga?: Manga;
-    backUrl?: string;
 }
 
 defineProps<MangaDetailPageProps>();

website/app/components/TrangaPage.vue

@@ -7,9 +7,13 @@
             <div :class="['flex flex-col gap-2 w-full py-4 relative max-md:px-2', $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>
+                        <UButton
+                            variant="outline"
+                            color="neutral"
+                            :to="backUrl ?? '/'"
+                            :icon="backUrl ? 'i-lucide-arrow-left' : 'i-lucide-home'"
+                            >{{ backUrl ? 'Back' : 'Home' }}</UButton
+                        >
                         <slot name="title">
                             <p v-if="title" class="text-2xl text-primary font-semibold">{{ title }}</p>
                         </slot>
@@ -27,9 +31,11 @@
 <script setup lang="ts">
 import type { PageBodyProps } from '#ui/components/PageBody.vue';
 
+const route = useRoute();
+const backUrl = route.query.return as string | undefined;
+
 export interface PageProps extends PageBodyProps {
     title?: string;
-    back?: { href?: string; text?: string; icon?: string };
 }
 
 defineProps<PageProps>();

website/app/pages/actions.vue

@@ -0,0 +1,5 @@
+<template>
+    <TrangaPage />
+</template>
+
+<script setup lang="ts"></script>

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

@@ -1,5 +1,5 @@
 <template>
-    <MangaDetailPage :manga="manga" :back-url="backUrl">
+    <MangaDetailPage :manga="manga">
         <div class="grid gap-3 max-xl:grid-flow-row-dense min-2xl:grid-cols-[70%_auto] min-xl:grid-cols-[60%_auto]">
             <ChaptersList :manga-id="mangaId" />
             <div class="flex flex-col gap-2">
@@ -7,7 +7,11 @@
                     <template #header>
                         <h1 class="font-semibold">Download</h1>
                     </template>
-                    <LibrarySelect :manga-id="mangaId" :library-id="manga?.fileLibraryId" class="w-full" @library-changed="refreshNuxtData(FetchKeys.Manga.Id(mangaId))" />
+                    <LibrarySelect
+                        :manga-id="mangaId"
+                        :library-id="manga?.fileLibraryId"
+                        class="w-full"
+                        @library-changed="refreshNuxtData(FetchKeys.Manga.Id(mangaId))" />
                     <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) =>
@@ -41,28 +45,34 @@
                             { header: '', id: 'link' },
                         ]">
                         <template #name-cell="{ row }">
-                            <UTooltip :text="metadata.find((me) => me.metadataFetcherName == row.original)?.identifier ?? undefined">{{
-                                row.original
-                            }}</UTooltip>
+                            <UTooltip :text="metadata.find((me) => me.metadataFetcherName == row.original)?.identifier ?? undefined">
+                                <p class="text-toned">{{ row.original }}</p></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}?return=${path}`" class="float-right px-4"
-                                >Link</UButton
-                            >
+                                class="float-right"
+                                icon="i-lucide-unlink"
+                                @click="unlinkMetadataFetcher(row.original)" />
+                            <UButton
+                                v-else
+                                :to="`/manga/${mangaId}/linkMetadata/${row.original}?return=${$route.fullPath}`"
+                                class="float-right"
+                                icon="i-lucide-link" />
                         </template>
                     </UTable>
                 </UCard>
             </div>
         </div>
         <template #actions>
-            <UButton trailing-icon="i-lucide-merge" :to="`/manga/${manga?.key}/merge?return=${path}`" color="secondary">Merge</UButton>
+            <UButton trailing-icon="i-lucide-merge" :to="`/manga/${manga?.key}/merge?return=${$route.fullPath}`" color="secondary"
+                >Merge</UButton
+            >
             <UButton variant="soft" color="warning" icon="i-lucide-trash" @click="remove" />
+            <UTooltip text="Reload" :kbds="['meta', 'R']">
+                <UButton variant="soft" color="secondary" icon="i-lucide-refresh-ccw" :loading="refreshingData" @click="refreshData" />
+            </UTooltip>
         </template>
     </MangaDetailPage>
 </template>
@@ -72,8 +82,6 @@ import MangaDetailPage from '~/components/MangaDetailPage.vue';
 const { $api } = useNuxtApp();
 const route = useRoute();
 const mangaId = route.params.mangaId as string;
-const backUrl = route.query.return as string | undefined;
-const path = route.fullPath;
 
 const flashDownloading = route.query.download;
 
@@ -116,6 +124,15 @@ const remove = async () => {
     navigateTo('/');
 };
 
+const refreshingData = ref(false);
+const refreshData = async () => {
+    refreshingData.value = true;
+    await refreshNuxtData([FetchKeys.Manga.Id(mangaId), FetchKeys.Metadata.Manga(mangaId), FetchKeys.FileLibraries]);
+    refreshingData.value = false;
+};
+
+defineShortcuts({ meta_r: { usingInput: true, handler: refreshData } });
+
 useHead({ title: 'Manga' });
 </script>
 

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

@@ -1,5 +1,5 @@
 <template>
-    <MangaDetailPage :manga="manga" :back-url="backUrl" :title="metadataFetcherName">
+    <MangaDetailPage :manga="manga" :title="metadataFetcherName">
         <div class="flex flex-col flex-wrap gap-2">
             <USkeleton v-if="status === 'pending'" class="w-full h-14" />
             <UCard v-for="data in searchData" v-else :key="data.identifier">
@@ -23,7 +23,6 @@
 const route = useRoute();
 const mangaId = route.params.mangaId as string;
 const metadataFetcherName = route.params.metadataFetcherName as string;
-const backUrl = route.query.return as string | undefined;
 const { $api } = useNuxtApp();
 
 const { data: manga } = await useApi('/v2/Manga/{MangaId}', {

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

@@ -1,5 +1,5 @@
 <template>
-    <TrangaPage :back="{ href: backUrl ?? `/manga/${mangaId}/merge/`, text: 'Back', icon: 'i-lucide-arrow-left' }">
+    <TrangaPage>
         <div class="flex flex-col items-center justify-center gap-10">
             <div class="flex flex-row max-sm:flex-col justify-evenly items-center">
                 <MangaCard v-if="manga" :manga="manga" :expanded="true" />
@@ -28,8 +28,6 @@
 const route = useRoute();
 const targetId = route.params.targetId as string;
 const mangaId = route.params.mangaId as string;
-const path = route.fullPath;
-const backUrl = route.query.return as string | undefined;
 const { $api } = useNuxtApp();
 
 const reverse = ref(false);

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

@@ -1,15 +1,12 @@
 <template>
-    <MangaDetailPage :manga="manga" :back-url="backUrl" title="Merge with">
+    <MangaDetailPage :manga="manga" title="Merge with">
         <USkeleton v-if="!mangas" class="w-full h-[350px]" />
-        <MangaCardList :manga="mangas" @click="(m) => navigateTo(`/manga/${mangaId}/merge/${m.key}?return=${path}`)" />
+        <MangaCardList :manga="mangas" @click="(m) => navigateTo(`/manga/${mangaId}/merge/${m.key}?return=${$route.fullPath}`)" />
     </MangaDetailPage>
 </template>
 
 <script setup lang="ts">
-const route = useRoute();
-const mangaId = route.params.mangaId as string;
-const backUrl = route.query.return as string | undefined;
-const path = route.fullPath;
+const mangaId = useRoute().params.mangaId as string;
 
 const { data: manga } = await useApi('/v2/Manga/{MangaId}', { path: { MangaId: mangaId }, key: FetchKeys.Manga.Id(mangaId) });
 const { data: mangas } = await useApi('/v2/Manga', { key: FetchKeys.Manga.All });

website/app/pages/manga/author/[authorId].vue

@@ -1,20 +1,18 @@
 <template>
-    <TrangaPage :back="backUrl ? { href: backUrl, icon: 'i-lucide-arrow-left', text: 'Back' } : undefined">
+    <TrangaPage>
         <template #title>
             <h1 class="text-2xl">
                 Manga with Author <UBadge variant="outline" color="neutral" class="font-semibold text-xl ml-1">{{ author?.name }}</UBadge>
             </h1>
         </template>
         <LoadingPage :loading="status === 'pending'">
-            <MangaCardList :manga="manga" @click="(m) => navigateTo(`/manga/${m.key}?return=${route.fullPath}`)" />
+            <MangaCardList :manga="manga" @click="(m) => navigateTo(`/manga/${m.key}?return=${$route.fullPath}`)" />
         </LoadingPage>
     </TrangaPage>
 </template>
 
 <script setup lang="ts">
-const route = useRoute();
-const authorId = route.params.authorId as string;
-const backUrl = route.query.return as string | undefined;
+const authorId = useRoute().params.authorId as string;
 
 const { data: author } = await useApi('/v2/Author/{AuthorId}', { path: { AuthorId: authorId } });
 const { data: manga, status } = await useApi('/v2/Manga/WithAuthorId/{AuthorId}', { path: { AuthorId: authorId }, lazy: true });

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

@@ -1,20 +1,18 @@
 <template>
-    <TrangaPage :back="backUrl ? { href: backUrl, icon: 'i-lucide-arrow-left', text: 'Back' } : undefined">
+    <TrangaPage>
         <template #title>
             <h1 class="text-2xl">
                 Manga with Tag <UBadge variant="outline" color="primary" class="font-semibold text-xl ml-1">{{ tag }}</UBadge>
             </h1>
         </template>
         <LoadingPage :loading="status === 'pending'">
-            <MangaCardList :manga="manga" @click="(m) => navigateTo(`/manga/${m.key}?return=${route.fullPath}`)" />
+            <MangaCardList :manga="manga" @click="(m) => navigateTo(`/manga/${m.key}?return=${$route.fullPath}`)" />
         </LoadingPage>
     </TrangaPage>
 </template>
 
 <script setup lang="ts">
-const route = useRoute();
-const tag = route.params.tag as string;
-const backUrl = route.query.return as string | undefined;
+const tag = useRoute().params.tag as string;
 const { data: manga, status } = await useApi('/v2/Manga/WithTag/{Tag}', { path: { Tag: tag }, lazy: true });
 
 useHead({ title: 'Tag search' });

website/app/pages/search.vue

@@ -39,7 +39,7 @@
                         :key="m.key"
                         :manga="m"
                         :expanded="i === expanded"
-                        @click="navigateTo(`/manga/${m.key}?download=true&return=${path}`)" />
+                        @click="navigateTo(`/manga/${m.key}?download=true&return=${$route.fullPath}`)" />
                 </div>
             </template>
         </UPageSection>
@@ -52,8 +52,6 @@ import type { StepperItem } from '@nuxt/ui';
 type MangaConnector = components['schemas']['MangaConnector'];
 type MinimalManga = components['schemas']['MinimalManga'];
 
-const path = useRoute().fullPath;
-
 const { data: connectors } = await useApi('/v2/MangaConnector', { key: FetchKeys.MangaConnector.All });
 
 const query = ref<string>();

website/app/pages/settings.vue

@@ -1,5 +1,5 @@
 <template>
-    <UPageBody>
+    <TrangaPage>
         <UPageSection title="Settings">
             <template #description>
                 <div>
@@ -43,7 +43,7 @@
                 >
             </UCard>
         </UPageSection>
-    </UPageBody>
+    </TrangaPage>
 </template>
 
 <script setup lang="ts">
@@ -95,7 +95,7 @@ const onKavitaClick = async () => {
     }
 };
 
-const { data: settings, status: settingsStatus } = useApi('/v2/Settings', { key: FetchKeys.Settings.All });
+const { status: settingsStatus } = useApi('/v2/Settings', { key: FetchKeys.Settings.All });
 
 useHead({ title: 'Settings' });
 </script>