From f0bacc86bd1d4d0a8a8606dbd2346ec36bfb164c Mon Sep 17 00:00:00 2001
From: glax <johanna@bernloehr.eu>
Date: Sun, 12 Oct 2025 02:21:44 +0200
Subject: [PATCH] Fill download page Add Library Selector

---
 website/app/components/LibrarySelect.vue      | 33 ++++++++++++++
 website/app/pages/download/[mangaId].vue      | 15 -------
 .../[mangaconnectorName]/[mangaId].vue        | 43 +++++++++++++++++++
 website/app/pages/manga/[mangaId]/index.vue   |  2 +
 website/app/pages/search.vue                  | 30 ++++++++++---
 website/app/pages/settings.vue                |  2 +-
 6 files changed, 102 insertions(+), 23 deletions(-)
 create mode 100644 website/app/components/LibrarySelect.vue
 delete mode 100644 website/app/pages/download/[mangaId].vue
 create mode 100644 website/app/pages/download/[mangaconnectorName]/[mangaId].vue

diff --git a/website/app/components/LibrarySelect.vue b/website/app/components/LibrarySelect.vue
new file mode 100644
index 0000000..1969c54
--- /dev/null
+++ b/website/app/components/LibrarySelect.vue
@@ -0,0 +1,33 @@
+<template>
+    <USelect
+        v-model="library"
+        placeholder="Library"
+        icon="i-lucide-library-big"
+        color="secondary"
+        :items="libraries?.map((l) => l.key)"
+        class="w-xs">
+        <template #default="{ modelValue }">
+            <p v-if="modelValue">
+                <span class="mr-2">{{ libraries?.find((l) => l.key == modelValue)?.libraryName }}</span>
+                <span class="text-secondary">({{ libraries?.find((l) => l.key == modelValue)?.basePath }})</span>
+            </p>
+        </template>
+        <template #item="{ item }">
+            <p>
+                <span class="mr-2">{{ libraries?.find((l) => l.key == item)?.libraryName }}</span>
+                <span class="text-secondary">({{ libraries?.find((l) => l.key == item)?.basePath }})</span>
+            </p>
+        </template>
+    </USelect>
+</template>
+
+<script setup lang="ts">
+export interface LibrarySelectProps {
+    libraryId?: string;
+}
+
+const props = defineProps<LibrarySelectProps>();
+
+const library = ref(props.libraryId);
+const { data: libraries } = await useApi('/v2/FileLibrary', { key: FetchKeys.FileLibraries });
+</script>
diff --git a/website/app/pages/download/[mangaId].vue b/website/app/pages/download/[mangaId].vue
deleted file mode 100644
index a393577..0000000
--- a/website/app/pages/download/[mangaId].vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<template>
-    <MangaDetailPage :manga="manga" back-path="/search" />
-</template>
-
-<script setup lang="ts">
-import MangaDetailPage from '~/components/MangaDetailPage.vue';
-
-const route = useRoute();
-const mangaId = route.params.MangaId as string;
-
-const { data: manga } = await useApi('/v2/Manga/{MangaId}', {
-    path: { MangaId: mangaId },
-    key: FetchKeys.Manga.Id(mangaId),
-});
-</script>
diff --git a/website/app/pages/download/[mangaconnectorName]/[mangaId].vue b/website/app/pages/download/[mangaconnectorName]/[mangaId].vue
new file mode 100644
index 0000000..db5ec89
--- /dev/null
+++ b/website/app/pages/download/[mangaconnectorName]/[mangaId].vue
@@ -0,0 +1,43 @@
+<template>
+    <MangaDetailPage :manga="manga" back-path="/search">
+        <UCard>
+            <template #default>
+                <div class="flex flex-row gap-2 w-full justify-center">
+                    <LibrarySelect v-bind="libraryId" />
+                    <UButton color="primary" :disabled="!libraryId" :loading="loading" @click="onDownloadClick">
+                        Download from {{ mangaConnector?.name }}
+                        <template #trailing>
+                            <NuxtImg :src="mangaConnector?.iconUrl" class="h-lh" />
+                        </template>
+                    </UButton>
+                </div>
+            </template>
+        </UCard>
+    </MangaDetailPage>
+</template>
+
+<script setup lang="ts">
+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}', {
+    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 },
+    key: FetchKeys.MangaConnector.Id(mangaConnectorName),
+});
+
+const loading = ref(false);
+const onDownloadClick = async () => {
+    loading.value = true;
+    await useApi('/v2/Manga/{MangaId}/SetAsDownloadFrom/{MangaConnectorName}/{IsRequested}', {
+        method: 'POST',
+        path: { MangaId: mangaId, MangaConnectorName: mangaConnectorName, IsRequested: true },
+    });
+    loading.value = false;
+};
+</script>
diff --git a/website/app/pages/manga/[mangaId]/index.vue b/website/app/pages/manga/[mangaId]/index.vue
index f966989..2607264 100644
--- a/website/app/pages/manga/[mangaId]/index.vue
+++ b/website/app/pages/manga/[mangaId]/index.vue
@@ -2,6 +2,7 @@
     <MangaDetailPage :manga="manga">
         <ChaptersList v-if="manga" :manga-id="manga.key" />
         <template #actions>
+            <LibrarySelect :library-id="libraryId" />
             <UButton variant="soft" color="warning" icon="i-lucide-trash" />
         </template>
     </MangaDetailPage>
@@ -17,4 +18,5 @@ const { data: manga } = await useApi('/v2/Manga/{MangaId}', {
     path: { MangaId: mangaId },
     key: FetchKeys.Manga.Id(mangaId),
 });
+const libraryId = ref(manga.value?.fileLibraryId);
 </script>
diff --git a/website/app/pages/search.vue b/website/app/pages/search.vue
index 59fbfec..eec88e6 100644
--- a/website/app/pages/search.vue
+++ b/website/app/pages/search.vue
@@ -1,9 +1,17 @@
 <template>
     <UPageBody>
-        <UPageSection :ui="{ container: 'gap-4 sm:gap-4 lg:gap-4 ' }">
+        <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">
             <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 v-model="activeStep" orientation="vertical" :items="items" class="h-full" disabled color="secondary" />
+                <UStepper
+                    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 +35,13 @@
                 </UCard>
             </div>
         </UPageSection>
-        <UPageSection v-if="searchResult.length > 0" :ui="{ container: 'py-0 sm:py-0 lg:py-0' }">
+        <UPageSection
+            v-if="searchResult.length > 0"
+            :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' }">
             <template #description>
-                <p class="text-lg">Result for '{{ searchQuery }}'</p>
+                <p class="text-lg">
+                    Result for <span class="text-secondary">'{{ searchQuery }}'</span>
+                </p>
             </template>
             <template #default>
                 <div class="relative flex flex-row flex-wrap gap-6 mt-0">
@@ -40,7 +52,7 @@
                         :expanded="i === expanded"
                         @click="expanded = expanded === i ? -1 : i">
                         <template #actions="manga">
-                            <UButton :to="`download/${manga.key}`">Download</UButton>
+                            <UButton :to="`download/${connector.name}/${manga.key}`">Download</UButton>
                         </template>
                     </MangaCard>
                 </div>
@@ -98,8 +110,12 @@ const performSearch = () => {
 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) return [data.value];
-        else return Promise.reject();
+        if (data.value) {
+            connector.value = connectors.value?.find(
+                (c) => c.name == data.value.mangaConnectorIds[0]?.mangaConnectorName
+            );
+            return [data.value];
+        } else return Promise.reject();
     } else if (connector.value.name) {
         const { data } = await useApi('/v2/Search/{MangaConnectorName}/{Query}', {
             path: { MangaConnectorName: connector.value.name, Query: query },
diff --git a/website/app/pages/settings.vue b/website/app/pages/settings.vue
index a5309e8..6299187 100644
--- a/website/app/pages/settings.vue
+++ b/website/app/pages/settings.vue
@@ -45,7 +45,7 @@ const apiUrl = ref(config.public.openFetch.api.baseURL);
 const reloading = ref(false);
 const setUrl = async () => {
     reloading.value = true;
-    config.public.openFetch.api.baseURL = apiUrl.value;
+    config.public.openFetch.api.baseURL = apiUrl.value.endsWith('/') ? apiUrl.value : apiUrl.value + '/';
     await refreshNuxtData();
     reloading.value = false;
 };