From 570d8014a15fc30882e76b6c8235765377523b09 Mon Sep 17 00:00:00 2001
From: glax <johanna@bernloehr.eu>
Date: Tue, 14 Oct 2025 15:37:58 +0200
Subject: [PATCH] Loadingpage MangaCardList Manga with Tag Page

---
 website/app/components/LoadingPage.vue     | 20 ++++++++++++++++++++
 website/app/components/MangaCardList.vue   | 16 ++++++++++++++++
 website/app/components/MangaDetailPage.vue |  2 +-
 website/app/error.vue                      | 13 +++++++------
 website/app/pages/index.vue                | 13 ++++---------
 website/app/pages/manga/tag/[tag].vue      | 15 +++++++++++++++
 website/app/pages/search.vue               |  9 ++++++---
 7 files changed, 69 insertions(+), 19 deletions(-)
 create mode 100644 website/app/components/LoadingPage.vue
 create mode 100644 website/app/components/MangaCardList.vue
 create mode 100644 website/app/pages/manga/tag/[tag].vue

diff --git a/website/app/components/LoadingPage.vue b/website/app/components/LoadingPage.vue
new file mode 100644
index 0000000..89011f4
--- /dev/null
+++ b/website/app/components/LoadingPage.vue
@@ -0,0 +1,20 @@
+<template>
+    <UPageBody v-if="loading">
+        <UPageHero title="Loading..." />
+    </UPageBody>
+    <UPageBody v-else v-bind="$props">
+        <template v-for="(_, slotName) in $slots" #[slotName]>
+            <slot :name="slotName" />
+        </template>
+    </UPageBody>
+</template>
+
+<script setup lang="ts">
+import type { PageBodyProps } from '#ui/components/PageBody.vue';
+
+export interface LoadingPageProps extends PageBodyProps {
+    loading: boolean;
+}
+
+defineProps<LoadingPageProps>();
+</script>
diff --git a/website/app/components/MangaCardList.vue b/website/app/components/MangaCardList.vue
new file mode 100644
index 0000000..4ea1455
--- /dev/null
+++ b/website/app/components/MangaCardList.vue
@@ -0,0 +1,16 @@
+<template>
+    <MangaCard v-for="(m, i) in manga" :key="m.key" :manga="m" :expanded="i === expanded" @click="expanded = expanded === i ? -1 : i">
+        <template #actions="forManga">
+            <UButton :to="`manga/${forManga.key}`">Details</UButton>
+        </template>
+    </MangaCard>
+</template>
+
+<script setup lang="ts">
+import type { components } from '#open-fetch-schemas/api';
+type Manga = components['schemas']['Manga'];
+type MinimalManga = components['schemas']['MinimalManga'];
+
+const expanded = ref(-1);
+defineProps<{manga?: (MinimalManga | Manga)[]}>()
+</script>
diff --git a/website/app/components/MangaDetailPage.vue b/website/app/components/MangaDetailPage.vue
index 348f5d5..b350e35 100644
--- a/website/app/components/MangaDetailPage.vue
+++ b/website/app/components/MangaDetailPage.vue
@@ -11,7 +11,7 @@
                 <USkeleton v-else class="text-xl 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">{{ author.name }}</UBadge>
-                    <UBadge v-for="tag in manga.tags" :key="tag" variant="outline" color="primary">{{ tag }}</UBadge>
+                    <UBadge v-for="tag in manga.tags" :key="tag" variant="outline" color="primary"><NuxtLink :to="`/manga/tag/${tag}`">{{ 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>
                     </NuxtLink>
diff --git a/website/app/error.vue b/website/app/error.vue
index 836e7e9..1c4b3f5 100644
--- a/website/app/error.vue
+++ b/website/app/error.vue
@@ -1,10 +1,11 @@
 <template>
-    <div>
-        <h1>{{ error?.statusCode }}</h1>
-        <p>{{ error?.message }}</p>
-        <NuxtLink to="/">Go back home</NuxtLink>
-        <NuxtLink to="https://github.com/C9Glax/tranga-website/issues/new"><Icon name="i-lucide-github" />Report this issue</NuxtLink>
-    </div>
+    <UPageBody>
+        <UPageHero :title="error?.statusCode??'Error'">
+            <p>{{ error?.message }}</p>
+            <NuxtLink to="/">Go back home</NuxtLink>
+            <NuxtLink to="https://github.com/C9Glax/tranga-website/issues/new"><Icon name="i-lucide-github" />Report this issue</NuxtLink>
+        </UPageHero>
+    </UPageBody>
 </template>
 
 <script setup lang="ts">
diff --git a/website/app/pages/index.vue b/website/app/pages/index.vue
index f6fe5bf..a98b288 100644
--- a/website/app/pages/index.vue
+++ b/website/app/pages/index.vue
@@ -1,17 +1,12 @@
 <template>
-    <UPageBody class="p-4 flex flex-row flex-wrap gap-6 mt-0">
-        <MangaCard v-for="(m, i) in manga" :key="m.key" :manga="m" :expanded="i === expanded" @click="expanded = expanded === i ? -1 : i">
-            <template #actions="formanga">
-                <UButton :to="`manga/${formanga.key}`">Details</UButton>
-            </template>
-        </MangaCard>
-    </UPageBody>
+    <LoadingPage :loading="status === 'pending'" class="p-4 flex flex-row flex-wrap gap-6 mt-0">
+        <MangaCardList :manga="manga" />
+    </LoadingPage>
 </template>
 
 <script setup lang="ts">
-const { data: manga, refresh } = await useApi('/v2/Manga', { key: FetchKeys.Manga.All, lazy: true });
+const { data: manga, refresh, status } = await useApi('/v2/Manga', { key: FetchKeys.Manga.All, lazy: true });
 onMounted(() => refresh());
-const expanded = ref(-1);
 
 useHead({ title: 'Tranga' });
 </script>
diff --git a/website/app/pages/manga/tag/[tag].vue b/website/app/pages/manga/tag/[tag].vue
new file mode 100644
index 0000000..22620f5
--- /dev/null
+++ b/website/app/pages/manga/tag/[tag].vue
@@ -0,0 +1,15 @@
+<template>
+    <LoadingPage :loading="status === 'pending'" class="p-4 flex flex-row flex-wrap gap-6 mt-0">
+        <UButton variant="soft" to="/" icon="i-lucide-arrow-left">Home</UButton>
+        <h1 class="text-2xl">Manga with Tag <span class="text-primary font-semibold">{{ tag }}</span></h1>
+        <MangaCardList :manga="manga" />
+    </LoadingPage>
+</template>
+
+<script setup lang="ts">
+const route = useRoute();
+const tag = route.params.tag as string;
+const { data: manga, status } = await useApi('/v2/Manga/WithTag/{Tag}', { path: { Tag: tag } });
+
+useHead({ title: 'Tranga' });
+</script>
diff --git a/website/app/pages/search.vue b/website/app/pages/search.vue
index 6d488aa..bd6491e 100644
--- a/website/app/pages/search.vue
+++ b/website/app/pages/search.vue
@@ -85,16 +85,19 @@ const connectorClick = (c: MangaConnector) => {
 const searchResult = useState<MinimalManga[]>(() => []);
 const expanded = useState(() => -1);
 const searchQuery = useState<string>(() => '');
-const performSearch = () => {
+const performSearch = async () => {
     if (!query.value) return;
     busy.value = true;
     searchQuery.value = query.value;
-    search(query.value)
+    await search(query.value)
         .then((data) => {
             searchResult.value = data;
             activeStep.value = 2;
         })
-        .finally(() => (busy.value = false));
+        .finally(() => {
+            refreshNuxtData(FetchKeys.Manga.All);
+            busy.value = false;
+        });
 };
 
 const search = async (query: string): Promise<MinimalManga[]> => {