Add list of Mangaconnectors that Manga is available from

website/app/components/ChaptersList.vue

@@ -4,8 +4,7 @@
             v-for="chapter in chapters"
             :key="chapter.key"
             orientation="horizontal"
-            :ui="{ container: 'p-2 sm:p-2' }"
+            :ui="{ container: 'p-2 sm:p-2' }">
-        >
             <template #title>
                 <p class="text-primary">{{ chapter.title }}</p>
                 <p class="text-secondary">
@@ -30,14 +29,25 @@
                             a.mangaConnectorName < b.mangaConnectorName ? -1 : 1
                         )"
                         :key="mangaconnectorId.key"
-                        class="bg-elevated p-1 rounded-lg w-fit flex items-center justify-center gap-2"
+                        class="bg-elevated p-1 rounded-lg w-fit flex items-center justify-center gap-2">
-                    >
                         <MangaconnectorIcon v-bind="mangaconnectorId" />
-                        <UTooltip :text="mangaconnectorId.useForDownload ? 'Stop downloading from this website' : 'Download from this website'">
+                        <UTooltip
-                            <UButton :icon="mangaconnectorId.useForDownload ? 'i-lucide-cloud-off' : 'i-lucide-cloud-download'" variant="ghost" disabled /> <!-- Not implemented yet -->
+                            :text="
+                                mangaconnectorId.useForDownload
+                                    ? 'Stop downloading from this website'
+                                    : 'Download from this website'
+                            ">
+                            <UButton
+                                :icon="
+                                    mangaconnectorId.useForDownload ? 'i-lucide-cloud-off' : 'i-lucide-cloud-download'
+                                "
+                                variant="ghost"
+                                disabled />
+                            <!-- Not implemented yet -->
                         </UTooltip>
                     </div>
-                    <UButton variant="outline" color="secondary" class="ml-auto" disabled>Force (re)download</UButton> <!-- Not implemented yet -->
+                    <UButton variant="outline" color="secondary" class="ml-auto" disabled>Force (re)download</UButton>
+                    <!-- Not implemented yet -->
                 </div>
             </template>
         </UPageCard>

website/app/components/MangaCover.vue

@@ -9,7 +9,9 @@
                 backdrop-filter: blur(2px) brightness(70%);
                 -webkit-backdrop-filter: blur(2px) brightness(70%);
             ">
-            <p class="p-3 text-xl font-semibold max-h-full overflow-clip text-shadow-lg text-white">{{ manga?.name }}</p>
+            <p class="p-3 text-xl font-semibold max-h-full overflow-clip text-shadow-lg text-white">
+                {{ manga?.name }}
+            </p>
         </div>
         <LazyNuxtImg
             :src="`${$config.public.openFetch.api.baseURL}v2/Manga/${manga.key}/Cover/Medium`"

website/app/components/MangaDetailPage.vue

@@ -32,9 +32,6 @@
                     <p v-if="title" class="text-3xl">{{ title }}</p>
                 </div>
                 <div v-if="manga" class="flex flex-row gap-2">
-                    <UButton trailing-icon="i-lucide-merge" :to="`${manga.key}/merge/`" color="secondary"
-                        >Merge</UButton
-                    >
                     <slot name="actions" />
                 </div>
             </div>

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

@@ -6,10 +6,35 @@
                 <template #header>
                     <h1>Download</h1>
                 </template>
-                <LibrarySelect :manga-id="mangaId" :library-id="libraryId" />
+                <LibrarySelect :manga-id="mangaId" :library-id="libraryId" class="w-full" />
+                <div v-if="manga" class="flex flex-row gap-2 w-full flex-wrap my-2">
+                    <div
+                        v-for="mangaconnectorId in manga.mangaConnectorIds.sort((a, b) =>
+                            a.mangaConnectorName < b.mangaConnectorName ? -1 : 1
+                        )"
+                        :key="mangaconnectorId.key"
+                        class="bg-elevated p-1 rounded-lg w-fit flex items-center justify-center gap-2">
+                        <MangaconnectorIcon v-bind="mangaconnectorId" />
+                        <UTooltip
+                            :text="
+                                mangaconnectorId.useForDownload
+                                    ? 'Stop downloading from this website'
+                                    : 'Download from this website'
+                            ">
+                            <UButton
+                                :icon="
+                                    mangaconnectorId.useForDownload ? 'i-lucide-cloud-off' : 'i-lucide-cloud-download'
+                                "
+                                variant="ghost"
+                                disabled />
+                            <!-- Not implemented yet -->
+                        </UTooltip>
+                    </div>
+                </div>
             </UCard>
         </div>
         <template #actions>
+            <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>