changes to prettierrc

website/.prettierrc

@@ -2,7 +2,7 @@
     "trailingComma": "es5",
     "tabWidth": 4,
     "singleQuote": true,
-    "printWidth": 120,
+    "printWidth": 140,
     "semi": true,
     "bracketSpacing": true,
     "objectWrap": "collapse",

website/app/app.config.ts

@@ -1,13 +1,5 @@
 export default defineAppConfig({
     ui: {
-        colors: {
+        colors: { primary: 'pink', secondary: 'blue', success: 'green', info: 'cyan', warning: 'yellow', error: 'red', neutral: 'zinc' },
-            primary: 'pink',
-            secondary: 'blue',
-            success: 'green',
-            info: 'cyan',
-            warning: 'yellow',
-            error: 'red',
-            neutral: 'zinc',
-        },
     },
 });

website/app/app.vue

@@ -2,9 +2,7 @@
     <UApp>
         <UHeader>
             <template #left>
-                <NuxtLink to="https://github.com/C9Glax/tranga" external no-prefetch
+                <NuxtLink to="https://github.com/C9Glax/tranga" external no-prefetch><Icon name="i-lucide-github" />API</NuxtLink>
-                    ><Icon name="i-lucide-github" />API</NuxtLink
-                >
                 <NuxtLink to="https://github.com/C9Glax/tranga-website" external no-prefetch
                     ><Icon name="i-lucide-github" />Website</NuxtLink
                 >

website/app/components/ChaptersList.vue

@@ -1,10 +1,6 @@
 <template>
     <UPageList class="gap-2">
-        <UPageCard
+        <UPageCard v-for="chapter in chapters" :key="chapter.key" orientation="horizontal" :ui="{ container: 'p-2 sm:p-2' }">
-            v-for="chapter in chapters"
-            :key="chapter.key"
-            orientation="horizontal"
-            :ui="{ container: 'p-2 sm:p-2' }">
             <template #title>
                 <p class="text-primary">{{ chapter.title }}</p>
                 <p class="text-secondary">
@@ -32,15 +28,9 @@
                         class="bg-elevated p-1 rounded-lg w-fit flex items-center justify-center gap-2">
                         <MangaconnectorIcon v-bind="mangaconnectorId" />
                         <UTooltip
-                            :text="
+                            :text="mangaconnectorId.useForDownload ? 'Stop downloading from this website' : 'Download from this website'">
-                                mangaconnectorId.useForDownload
-                                    ? 'Stop downloading from this website'
-                                    : 'Download from this website'
-                            ">
                             <UButton
-                                :icon="
+                                :icon="mangaconnectorId.useForDownload ? 'i-lucide-cloud-off' : 'i-lucide-cloud-download'"
-                                    mangaconnectorId.useForDownload ? 'i-lucide-cloud-off' : 'i-lucide-cloud-download'
-                                "
                                 variant="ghost"
                                 disabled />
                             <!-- Not implemented yet -->
@@ -60,8 +50,5 @@ export interface ChaptersListProps {
 }
 const props = defineProps<ChaptersListProps>();
 
-const { data: chapters } = await useApi('/v2/Manga/{MangaId}/Chapters', {
+const { data: chapters } = await useApi('/v2/Manga/{MangaId}/Chapters', { path: { MangaId: props.mangaId }, key: FetchKeys.Chapters.All });
-    path: { MangaId: props.mangaId },
-    key: FetchKeys.Chapters.All,
-});
 </script>

website/app/components/MangaDetailPage.vue

@@ -10,9 +10,7 @@
                 </p>
                 <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">{{
+                    <UBadge v-for="author in manga.authors" :key="author.key" variant="outline" color="neutral">{{ author.name }}</UBadge>
-                        author.name
-                    }}</UBadge>
                     <UBadge v-for="tag in manga.tags" :key="tag" variant="outline" color="primary">{{ tag }}</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>

website/app/error.vue

@@ -3,9 +3,7 @@
         <h1>{{ error?.statusCode }}</h1>
         <p>{{ error?.message }}</p>
         <NuxtLink to="/">Go back home</NuxtLink>
-        <NuxtLink to="https://github.com/C9Glax/tranga-website/issues/new"
+        <NuxtLink to="https://github.com/C9Glax/tranga-website/issues/new"><Icon name="i-lucide-github" />Report this issue</NuxtLink>
-            ><Icon name="i-lucide-github" />Report this issue</NuxtLink
-        >
     </div>
 </template>
 

website/app/pages/download/[mangaconnectorName]/[mangaId].vue

@@ -21,10 +21,7 @@ const route = useRoute();
 const mangaId = route.params.mangaId as string;
 const mangaConnectorName = route.params.mangaconnectorName as string;
 
-const { data: manga } = await useApi('/v2/Manga/{MangaId}', {
+const { data: manga } = await useApi('/v2/Manga/{MangaId}', { path: { MangaId: mangaId }, key: FetchKeys.Manga.Id(mangaId) });
-    path: { MangaId: mangaId },
-    key: FetchKeys.Manga.Id(mangaId),
-});
 const libraryId = ref({ libraryId: manga.value?.fileLibraryId });
 const { data: mangaConnector } = await useApi('/v2/MangaConnector/{MangaConnectorName}', {
     path: { MangaConnectorName: mangaConnectorName },

website/app/pages/index.vue

@@ -1,11 +1,6 @@
 <template>
     <UPageBody class="p-4 flex flex-row flex-wrap gap-6 mt-0">
-        <MangaCard
+        <MangaCard v-for="(m, i) in manga" :key="m.key" :manga="m" :expanded="i === expanded" @click="expanded = expanded === i ? -1 : i">
-            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>

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

@@ -16,15 +16,9 @@
                         class="bg-elevated p-1 rounded-lg w-fit flex items-center justify-center gap-2">
                         <MangaconnectorIcon v-bind="mangaconnectorId" />
                         <UTooltip
-                            :text="
+                            :text="mangaconnectorId.useForDownload ? 'Stop downloading from this website' : 'Download from this website'">
-                                mangaconnectorId.useForDownload
-                                    ? 'Stop downloading from this website'
-                                    : 'Download from this website'
-                            ">
                             <UButton
-                                :icon="
+                                :icon="mangaconnectorId.useForDownload ? 'i-lucide-cloud-off' : 'i-lucide-cloud-download'"
-                                    mangaconnectorId.useForDownload ? 'i-lucide-cloud-off' : 'i-lucide-cloud-download'
-                                "
                                 variant="ghost"
                                 disabled />
                             <!-- Not implemented yet -->
@@ -34,7 +28,7 @@
             </UCard>
         </div>
         <template #actions>
-            <UButton trailing-icon="i-lucide-merge" :to="`${manga.key}/merge/`" color="secondary">Merge</UButton>
+            <UButton trailing-icon="i-lucide-merge" :to="`${manga?.key}/merge/`" color="secondary">Merge</UButton>
             <UButton variant="soft" color="warning" icon="i-lucide-trash" />
         </template>
     </MangaDetailPage>
@@ -49,6 +43,10 @@ const mangaId = route.params.mangaId as string;
 const { data: manga } = await useApi('/v2/Manga/{MangaId}', {
     path: { MangaId: mangaId },
     key: FetchKeys.Manga.Id(mangaId),
+    onResponseError: (e) => {
+        console.error(e);
+        navigateTo('/');
+    },
 });
 const libraryId = ref(manga.value?.fileLibraryId);
 </script>

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

@@ -1,12 +1,6 @@
 <template>
     <UPageBody class="flex flex-col items-center">
-        <UButton
+        <UButton icon="i-lucide-arrow-left" class="w-fit self-start m-20" variant="soft" :to="`/manga/${mangaId}/merge/`">Back</UButton>
-            icon="i-lucide-arrow-left"
-            class="w-fit self-start m-20"
-            variant="soft"
-            :to="`/manga/${mangaId}/merge/`"
-            >Back</UButton
-        >
         <div class="flex flex-row justify-evenly items-center">
             <MangaCard v-if="manga" :manga="manga" :expanded="true" />
             <USkeleton v-else class="max-w-[600px] w-full h-[350px]" />
@@ -24,12 +18,6 @@ const route = useRoute();
 const targetId = route.params.targetId as string;
 const mangaId = route.params.mangaId as string;
 
-const { data: target } = await useApi('/v2/Manga/{MangaId}', {
+const { data: target } = await useApi('/v2/Manga/{MangaId}', { path: { MangaId: targetId }, key: FetchKeys.Manga.Id(targetId) });
-    path: { MangaId: targetId },
+const { data: manga } = await useApi('/v2/Manga/{MangaId}', { path: { MangaId: mangaId }, key: FetchKeys.Manga.Id(mangaId) });
-    key: FetchKeys.Manga.Id(targetId),
-});
-const { data: manga } = await useApi('/v2/Manga/{MangaId}', {
-    path: { MangaId: mangaId },
-    key: FetchKeys.Manga.Id(mangaId),
-});
 </script>

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

@@ -16,9 +16,6 @@
 const route = useRoute();
 const mangaId = route.params.mangaId as string;
 
-const { data: manga } = await useApi('/v2/Manga/{MangaId}', {
+const { data: manga } = await useApi('/v2/Manga/{MangaId}', { path: { MangaId: mangaId }, key: FetchKeys.Manga.Id(mangaId) });
-    path: { MangaId: mangaId },
-    key: FetchKeys.Manga.Id(mangaId),
-});
 const { data: mangas } = await useApi('/v2/Manga', { key: FetchKeys.Manga.All });
 </script>

website/app/pages/search.vue

@@ -1,17 +1,9 @@
 <template>
     <UPageBody>
-        <UPageSection
+        <UPageSection :ui="{ container: 'gap-4 sm:gap-4 lg:gap-4 py-4 sm:py-4 lg:py-4 gap-4 sm:gap-4 lg:gap-4' }" class="h-fit">
-            :ui="{ container: 'gap-4 sm:gap-4 lg:gap-4 py-4 sm:py-4 lg:py-4 gap-4 sm:gap-4 lg:gap-4' }"
-            class="h-fit">
             <UButton variant="soft" to="/" icon="i-lucide-arrow-left" class="w-min">Back</UButton>
             <div class="flex flex-row w-full h-full justify-between gap-4">
-                <UStepper
+                <UStepper v-model="activeStep" orientation="vertical" :items="items" class="h-full" disabled color="secondary" />
-                    v-model="activeStep"
-                    orientation="vertical"
-                    :items="items"
-                    class="h-full"
-                    disabled
-                    color="secondary" />
                 <UCard class="grow">
                     <div class="flex flex-col justify-between gap-2">
                         <UInput v-model="query" class="w-full" :disabled="busy" />
@@ -27,9 +19,7 @@
                                 </template>
                                 {{ c.name }}
                             </UButton>
-                            <UButton color="primary" :disabled="busy" :loading="busy" @click="performSearch"
+                            <UButton color="primary" :disabled="busy" :loading="busy" @click="performSearch">Search</UButton>
-                                >Search</UButton
-                            >
                         </div>
                     </div>
                 </UCard>
@@ -111,9 +101,7 @@ const search = async (query: string): Promise<MinimalManga[]> => {
     if (isUrl(query)) {
         const { data } = await useApi('/v2/Search/Url', { body: JSON.stringify(query), method: 'POST' });
         if (data.value) {
-            connector.value = connectors.value?.find(
+            connector.value = connectors.value?.find((c) => c.name == data.value.mangaConnectorIds[0]?.mangaConnectorName);
-                (c) => c.name == data.value.mangaConnectorIds[0]?.mangaConnectorName
-            );
             return [data.value];
         } else return Promise.reject();
     } else if (connector.value.name) {

website/app/pages/settings.vue

@@ -15,11 +15,7 @@
                     <h1>Maintenance</h1>
                 </template>
                 <div class="flex flex-col gap-1 items-end basis-1">
-                    <UButton
+                    <UButton icon="i-lucide-database" :loading="cleanUpDatabaseBusy" class="w-fit" @click="cleanUpDatabase"
-                        icon="i-lucide-database"
-                        :loading="cleanUpDatabaseBusy"
-                        class="w-fit"
-                        @click="cleanUpDatabase"
                         >Clean database</UButton
                     >
                 </div>

website/nuxt.config.ts

@@ -8,10 +8,7 @@ export default defineNuxtConfig({
     devServer: { host: '127.0.0.1' },
     openFetch: {
         clients: {
-            api: {
+            api: { baseURL: '/api/', schema: 'https://raw.githubusercontent.com/C9Glax/tranga/refs/heads/testing/API/openapi/API_v2.json' },
-                baseURL: '/api/',
-                schema: 'https://raw.githubusercontent.com/C9Glax/tranga/refs/heads/testing/API/openapi/API_v2.json',
-            },
         },
     },
     vite: { plugins: [tailwindcss()] },