From 517e022e4a587436998ea029ccdb7f24b6eae8c2 Mon Sep 17 00:00:00 2001
From: glax <johanna@bernloehr.eu>
Date: Sun, 12 Oct 2025 00:32:45 +0200
Subject: [PATCH] Settings add API Url field

---
 website/app/app.vue                        |  2 +-
 website/app/components/MangaDetailPage.vue |  2 +-
 website/app/pages/settings.vue             | 51 ++++++++++++++++------
 3 files changed, 40 insertions(+), 15 deletions(-)

diff --git a/website/app/app.vue b/website/app/app.vue
index 9b2b6f7..9b9bbf5 100644
--- a/website/app/app.vue
+++ b/website/app/app.vue
@@ -15,7 +15,7 @@
             <template #default>
                 <NuxtLink to="/">
                     <div class="h-full flex gap-2 items-center">
-                        <img src="/blahaj.png" class="h-lh cursor-grab"  alt="Blahaj" />
+                        <img src="/blahaj.png" class="h-lh cursor-grab" alt="Blahaj" />
                         <p
                             style="
                                 background: linear-gradient(110deg, var(--color-pink), var(--color-blue));
diff --git a/website/app/components/MangaDetailPage.vue b/website/app/components/MangaDetailPage.vue
index bf1537c..4127a44 100644
--- a/website/app/components/MangaDetailPage.vue
+++ b/website/app/components/MangaDetailPage.vue
@@ -14,7 +14,7 @@
                         author.name
                     }}</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>
+                    <NuxtLink v-for="link in manga.links" :key="link.key" :to="link.url" external no-prefetch>
                         <UBadge variant="outline" color="warning">{{ link.provider }}</UBadge>
                     </NuxtLink>
                 </div>
diff --git a/website/app/pages/settings.vue b/website/app/pages/settings.vue
index b96705b..a5309e8 100644
--- a/website/app/pages/settings.vue
+++ b/website/app/pages/settings.vue
@@ -1,18 +1,33 @@
 <template>
     <UPageBody>
-        <UPageSection title="Settings" />
-        <UPageSection title="Libraries" orientation="horizontal">
-            <template #footer>
-                <UButton icon="i-lucide-plus" class="w-fit" @click="addLibraryModal.open()">Add</UButton>
-            </template>
-            <FileLibraries />
-        </UPageSection>
-        <UPageSection title="Maintenance" orientation="horizontal">
-            <div class="flex flex-col gap-1 items-end basis-1">
-                <UButton icon="i-lucide-database" :loading="cleanUpDatabaseBusy" class="w-fit" @click="cleanUpDatabase"
-                    >Clean database</UButton
-                >
-            </div>
+        <UPageSection title="Settings">
+            <UCard>
+                <template #header>
+                    <h1>Libraries</h1>
+                </template>
+                <template #footer>
+                    <UButton icon="i-lucide-plus" class="w-fit" @click="addLibraryModal.open()">Add</UButton>
+                </template>
+                <FileLibraries />
+            </UCard>
+            <UCard>
+                <template #header>
+                    <h1>Maintenance</h1>
+                </template>
+                <div class="flex flex-col gap-1 items-end basis-1">
+                    <UButton
+                        icon="i-lucide-database"
+                        :loading="cleanUpDatabaseBusy"
+                        class="w-fit"
+                        @click="cleanUpDatabase"
+                        >Clean database</UButton
+                    >
+                </div>
+                <UFormField label="API Url" name="apiUrl">
+                    <UInput v-model="apiUrl" class="max-w-full w-lg" placeholder="http://<ip:port>/" />
+                    <UButton :loading="reloading" class="mx-1" @click="setUrl">Set</UButton>
+                </UFormField>
+            </UCard>
         </UPageSection>
     </UPageBody>
 </template>
@@ -25,6 +40,16 @@ const overlay = useOverlay();
 
 const addLibraryModal = overlay.create(LazyAddLibraryModal);
 
+const config = useRuntimeConfig();
+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;
+    await refreshNuxtData();
+    reloading.value = false;
+};
+
 const cleanUpDatabaseBusy = ref(false);
 const cleanUpDatabase = async () => {
     cleanUpDatabaseBusy.value = true;