Fix LibrarySelect

Move recursive routing to trangapage

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' });