lint and prettier

website/app/app.vue

@@ -2,20 +2,20 @@
     <UApp>
         <UHeader>
             <template #left>
-                <NuxtLink to="https://github.com/C9Glax/tranga" external noPrefetch
+                <NuxtLink to="https://github.com/C9Glax/tranga" external no-prefetch
                     ><Icon name="i-lucide-github" />API</NuxtLink
                 >
-                <NuxtLink to="https://github.com/C9Glax/tranga-website" external noPrefetch
+                <NuxtLink to="https://github.com/C9Glax/tranga-website" external no-prefetch
                     ><Icon name="i-lucide-github" />Website</NuxtLink
                 >
-                <NuxtLink :to="`${$config.public.openFetch.api.baseURL}swagger`" external noPrefetch
+                <NuxtLink :to="`${$config.public.openFetch.api.baseURL}swagger`" external no-prefetch
                     ><Icon name="i-lucide-book-open" />Swagger</NuxtLink
                 >
             </template>
             <template #default>
                 <NuxtLink to="/">
                     <div class="h-full flex gap-2 items-center">
-                        <img src="/blahaj.png" class="h-lh cursor-grab" />
+                        <img src="/blahaj.png" class="h-lh cursor-grab"  alt="Blahaj" />
                         <p
                             style="
                                 background: linear-gradient(110deg, var(--color-pink), var(--color-blue));

website/app/components/ChaptersList.vue

@@ -23,7 +23,8 @@
                         v-for="mangaconnectorId in chapter.mangaConnectorIds.sort((a, b) =>
                             a.mangaConnectorName < b.mangaConnectorName ? -1 : 1
                         )"
-                        v-bind="mangaconnectorId" />
+                        v-bind="mangaconnectorId"
+                        :key="mangaconnectorId.key" />
                 </div>
             </template>
         </UPageCard>

website/app/components/FileLibraries.vue

@@ -2,6 +2,7 @@
     <UPageList class="gap-2">
         <UPageCard
             v-for="l in fileLibraries"
+            :key="l.key"
             variant="soft"
             icon="i-lucide-library-big"
             :title="l.libraryName"

website/app/components/MangaCard.vue

@@ -6,20 +6,20 @@
         @click="$emit('click')">
         <MangaCover :manga="manga" blur />
         <div class="absolute -top-4 -right-4 flex flex-col bg-pink rounded-full">
-            <MangaconnectorIcon v-for="m in manga.mangaConnectorIds" v-bind="m" />
+            <MangaconnectorIcon v-for="m in manga.mangaConnectorIds" v-bind="m" :key="m.key" />
         </div>
     </UCard>
     <UCard
         v-else
         orientation="horizontal"
         reverse
-        class="relative max-w-[600px] w-full h-[350px] mt-2"
+        class="relative max-w-[600px] w-full h-[350px] mt-2 mb-2"
         :ui="{ body: 'p-0 sm:p-0', root: 'overflow-visible' }"
         @click="$emit('click')">
         <div class="flex flex-row w-full h-full basis-auto">
             <MangaCover :manga="manga" class="shrink-0" />
             <div class="absolute -top-4 -right-4 flex flex-col bg-pink rounded-full">
-                <MangaconnectorIcon v-for="m in manga.mangaConnectorIds" v-bind="m" />
+                <MangaconnectorIcon v-for="m in manga.mangaConnectorIds" v-bind="m" :key="m.key" />
             </div>
             <div class="flex flex-col h-[350px] shrink mx-2">
                 <p class="font-semibold text-xl">{{ manga.name }}</p>

website/app/components/MangaDetailPage.vue

@@ -6,13 +6,15 @@
                 <USkeleton v-else class="w-[240px] h-[350px]" />
                 <p v-if="manga" class="font-semibold text-xl">
                     {{ manga.name }}
-                    <MangaconnectorIcon v-for="m in manga.mangaConnectorIds" v-bind="m" />
+                    <MangaconnectorIcon v-for="m in manga.mangaConnectorIds" v-bind="m" :key="m.key" />
                 </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" variant="outline" color="neutral">{{ author.name }}</UBadge>
+                    <UBadge v-for="author in manga.authors" :key="author.key" variant="outline" color="neutral">{{
-                    <UBadge v-for="tag in manga.tags" variant="outline">{{ tag }}</UBadge>
+                        author.name
-                    <NuxtLink v-for="link in manga.links" :to="link.url">
+                    }}</UBadge>
+                    <UBadge v-for="tag in manga.tags" :key="tag" variant="outline">{{ tag }}</UBadge>
+                    <NuxtLink v-for="link in manga.links" :key="link.key" :to="link.url" external noPrefetch>
                         <UBadge variant="outline" color="warning">{{ link.provider }}</UBadge>
                     </NuxtLink>
                 </div>

website/app/error.vue

@@ -3,14 +3,17 @@
         <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>
+        <NuxtLink to="https://github.com/C9Glax/tranga-website/issues/new"
+            ><Icon name="i-lucide-github" />Report this issue</NuxtLink
+        >
     </div>
 </template>
 
 <script setup lang="ts">
-import type { NuxtError } from '#app'
+import type { NuxtError } from '#app';
 
 defineProps({
+    // eslint-disable-next-line vue/require-default-prop
     error: Object as () => NuxtError,
-})
+});
 </script>

website/app/pages/index.vue

@@ -2,13 +2,14 @@
     <UPageBody class="p-4 flex flex-row flex-wrap gap-6 mt-0">
         <USkeleton v-if="status !== 'success'" class="max-w-[600px] w-full h-[350px]" />
         <MangaCard
-            v-else
             v-for="(m, i) in manga"
+            v-else
+            :key="m.key"
             :manga="m"
             :expanded="i === expanded"
             @click="expanded = expanded === i ? -1 : i">
-            <template #actions="manga">
+            <template #actions="formanga">
-                <UButton :to="`manga/${manga.key}`">Details</UButton>
+                <UButton :to="`manga/${formanga.key}`">Details</UButton>
             </template>
         </MangaCard>
     </UPageBody>

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

@@ -1,12 +1,14 @@
 <template>
-    <UPageHeader class="text-3xl px-4"
+    <UPageBody>
-        >Merge <span v-if="manga">{{ manga.name }}</span
+        <UPageHeader class="text-3xl px-4"
-        ><USkeleton v-else as="span" class="w-60 h-lh" /> into</UPageHeader
+            >Merge <span v-if="manga">{{ manga.name }}</span
-    >
+            ><USkeleton v-else as="span" class="w-60 h-lh" /> into</UPageHeader
-    <UPageBody class="p-4 flex flex-row flex-wrap gap-6 mt-0">
+        >
-        <NuxtLink v-for="m in mangas" :to="`${m.key}`">
+        <UPageBody class="p-4 flex flex-row flex-wrap gap-6 mt-0">
-            <MangaCard :manga="m" />
+            <NuxtLink v-for="m in mangas" :key="m.key" :to="`/manga/${m.key}`">
-        </NuxtLink>
+                <MangaCard :manga="m" />
+            </NuxtLink>
+        </UPageBody>
     </UPageBody>
 </template>
 

website/app/pages/search.vue

@@ -1,54 +1,57 @@
 <template>
-    <UPageSection :ui="{ container: 'gap-4 sm:gap-4 lg:gap-4 ' }">
+    <UPageBody>
-        <UButton variant="ghost" to="/" icon="i-lucide-arrow-left" class="w-min">Back</UButton>
+        <UPageSection :ui="{ container: 'gap-4 sm:gap-4 lg:gap-4 ' }">
-        <div class="flex flex-row w-full h-full justify-between gap-4">
+            <UButton variant="ghost" to="/" icon="i-lucide-arrow-left" class="w-min">Back</UButton>
-            <UStepper v-model="activeStep" orientation="vertical" :items="items" class="h-full" disabled />
+            <div class="flex flex-row w-full h-full justify-between gap-4">
-            <UCard class="grow">
+                <UStepper v-model="activeStep" orientation="vertical" :items="items" class="h-full" disabled />
-                <div class="flex flex-col justify-between gap-2">
+                <UCard class="grow">
-                    <UInput v-model="query" class="w-full" :disabled="busy" />
+                    <div class="flex flex-col justify-between gap-2">
-                    <div class="flex gap-1 w-full justify-center">
+                        <UInput v-model="query" class="w-full" :disabled="busy" />
-                        <UButton
+                        <div class="flex gap-1 w-full justify-center">
-                            v-for="c in connectors"
+                            <UButton
-                            :color="connector?.key == c.key ? 'success' : 'neutral'"
+                                v-for="c in connectors"
-                            :disabled="busy"
+                                :key="c.key"
-                            @click="connectorClick(c)">
+                                :color="connector?.key == c.key ? 'success' : 'neutral'"
-                            <template #leading>
+                                :disabled="busy"
-                                <NuxtImg :src="c.iconUrl" class="h-lh" />
+                                @click="connectorClick(c)">
-                            </template>
+                                <template #leading>
-                            {{ c.name }}
+                                    <NuxtImg :src="c.iconUrl" class="h-lh" />
-                        </UButton>
+                                </template>
-                        <UButton color="secondary" :disabled="busy" :loading="busy" @click="performSearch"
+                                {{ c.name }}
-                            >Search</UButton
+                            </UButton>
-                        >
+                            <UButton color="secondary" :disabled="busy" :loading="busy" @click="performSearch"
+                                >Search</UButton
+                            >
+                        </div>
                     </div>
-                </div>
+                </UCard>
-            </UCard>
-        </div>
-    </UPageSection>
-    <UPageSection v-if="searchResult.length > 0" :ui="{ container: 'py-0 sm:py-0 lg:py-0' }">
-        <template #description>
-            <p class="text-lg">Result for '{{ searchQuery }}'</p>
-        </template>
-        <template #default>
-            <div class="relative flex flex-row flex-wrap gap-6 mt-0">
-                <MangaCard
-                    v-for="(m, i) in searchResult"
-                    :manga="m"
-                    :expanded="i === expanded"
-                    @click="expanded = expanded === i ? -1 : i">
-                    <template #actions="manga">
-                        <UButton :to="`download/${manga.key}`">Download</UButton>
-                    </template>
-                </MangaCard>
             </div>
-        </template>
+        </UPageSection>
-    </UPageSection>
+        <UPageSection v-if="searchResult.length > 0" :ui="{ container: 'py-0 sm:py-0 lg:py-0' }">
+            <template #description>
+                <p class="text-lg">Result for '{{ searchQuery }}'</p>
+            </template>
+            <template #default>
+                <div class="relative flex flex-row flex-wrap gap-6 mt-0">
+                    <MangaCard
+                        v-for="(m, i) in searchResult"
+                        :key="m.key"
+                        :manga="m"
+                        :expanded="i === expanded"
+                        @click="expanded = expanded === i ? -1 : i">
+                        <template #actions="manga">
+                            <UButton :to="`download/${manga.key}`">Download</UButton>
+                        </template>
+                    </MangaCard>
+                </div>
+            </template>
+        </UPageSection>
+    </UPageBody>
 </template>
 
 <script setup lang="ts">
 import type { components } from '#open-fetch-schemas/api';
 import type { StepperItem } from '@nuxt/ui';
-import type { AsyncData, FetchResult } from '#app';
 type MangaConnector = components['schemas']['MangaConnector'];
 type MinimalManga = components['schemas']['MinimalManga'];
 

website/app/pages/settings.vue

@@ -1,18 +1,20 @@
 <template>
-    <UPageSection title="Settings" />
+    <UPageBody>
-    <UPageSection title="Libraries" orientation="horizontal">
+        <UPageSection title="Settings" />
-        <template #footer>
+        <UPageSection title="Libraries" orientation="horizontal">
-            <UButton icon="i-lucide-plus" class="w-fit" @click="addLibraryModal.open()">Add</UButton>
+            <template #footer>
-        </template>
+                <UButton icon="i-lucide-plus" class="w-fit" @click="addLibraryModal.open()">Add</UButton>
-        <FileLibraries />
+            </template>
-    </UPageSection>
+            <FileLibraries />
-    <UPageSection title="Maintenance" orientation="horizontal">
+        </UPageSection>
-        <div class="flex flex-col gap-1 items-end basis-1">
+        <UPageSection title="Maintenance" orientation="horizontal">
-            <UButton icon="i-lucide-database" :loading="cleanUpDatabaseBusy" class="w-fit" @click="cleanUpDatabase"
+            <div class="flex flex-col gap-1 items-end basis-1">
-                >Clean database</UButton
+                <UButton icon="i-lucide-database" :loading="cleanUpDatabaseBusy" class="w-fit" @click="cleanUpDatabase"
-            >
+                    >Clean database</UButton
-        </div>
+                >
-    </UPageSection>
+            </div>
+        </UPageSection>
+    </UPageBody>
 </template>
 
 <script setup lang="ts">