Fix LibrarySelect

Move recursive routing to trangapage

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>();