From 20c9824ce13de47e11a8754a776af1e67dccfc6e Mon Sep 17 00:00:00 2001
From: glax <johanna@bernloehr.eu>
Date: Thu, 16 Oct 2025 00:16:02 +0200
Subject: [PATCH] Settings move API Url to top, hide settings when not
 connected

---
 website/app/components/FileLibraries.vue |  6 +++---
 website/app/composables/FetchKeys.ts     |  1 +
 website/app/pages/settings.vue           | 20 +++++++++++++-------
 3 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/website/app/components/FileLibraries.vue b/website/app/components/FileLibraries.vue
index 451eaf7..6a8e6ff 100644
--- a/website/app/components/FileLibraries.vue
+++ b/website/app/components/FileLibraries.vue
@@ -1,5 +1,5 @@
 <template>
-    <UPageList class="gap-2">
+    <div class="flex flex-row flex-wrap">
         <UPageCard
             v-for="l in fileLibraries"
             :key="l.key"
@@ -8,9 +8,9 @@
             :title="l.libraryName"
             :description="l.basePath"
             orientation="horizontal">
-            <UButton color="warning" :loading="busy" @click="deleteLibrary(l)">Delete</UButton>
+            <UButton color="warning" :loading="busy" class="w-fit justify-self-end" @click="deleteLibrary(l)">Delete</UButton>
         </UPageCard>
-    </UPageList>
+    </div>
 </template>
 
 <script setup lang="ts">
diff --git a/website/app/composables/FetchKeys.ts b/website/app/composables/FetchKeys.ts
index 3eddcbe..16ee11c 100644
--- a/website/app/composables/FetchKeys.ts
+++ b/website/app/composables/FetchKeys.ts
@@ -5,4 +5,5 @@ export const FetchKeys = {
     MangaConnector: { Id: (id: string) => `MangaConnector/${id}`, All: 'MangaConnector' },
     Metadata: { Fetchers: 'Metadata', Links: 'Metadata/Links', Manga: (mangaId: string) => `Metadata/Links/${mangaId}` },
     Libraries: { All: 'Libraries', Id: (id: string) => `Libraries/${id}` },
+    Settings: { All: 'Settings' },
 };
diff --git a/website/app/pages/settings.vue b/website/app/pages/settings.vue
index d11aab2..0225f64 100644
--- a/website/app/pages/settings.vue
+++ b/website/app/pages/settings.vue
@@ -1,13 +1,21 @@
 <template>
     <UPageBody>
         <UPageSection title="Settings">
-            <UCard>
+            <template #description>
+                <div>
+                    <p>API Url</p>
+                    <UInput v-model="apiUrl" class="max-w-full w-xs" placeholder="http://<ip:port>/" />
+                    <UButton :loading="reloading" class="mx-1" @click="setUrl">Set</UButton>
+                    <p v-if="settingsStatus === 'error'" class="text-warning">Unable to connect to api.</p>
+                </div>
+            </template>
+            <UCard v-if="settingsStatus === 'success'">
                 <template #header>
                     <h1>Libraries</h1>
                 </template>
                 <template #footer>
                     <div class="flex flex-row gap-2">
-                        <UButton icon="i-lucide-plus" class="w-fit" @click="addLibraryModal.open()">Add</UButton>
+                        <UButton icon="i-lucide-plus" class="w-fit" @click="addLibraryModal.open()">Add FileLibrary</UButton>
                         <UTooltip :text="komgaConnected ? 'Disconnect Komga' : 'Connect Komga'">
                             <UButton
                                 :icon="komgaConnected ? 'i-lucide-unlink' : 'i-lucide-link'"
@@ -26,17 +34,13 @@
                 </template>
                 <FileLibraries />
             </UCard>
-            <UCard>
+            <UCard v-if="settingsStatus === 'success'">
                 <template #header>
                     <h1>Maintenance</h1>
                 </template>
                 <UButton icon="i-lucide-database" :loading="cleanUpDatabaseBusy" class="w-fit mb-2" @click="cleanUpDatabase"
                     >Clean database</UButton
                 >
-                <UFormField label="API Url" name="apiUrl">
-                    <UInput v-model="apiUrl" class="max-w-full w-xs" placeholder="http://<ip:port>/" />
-                    <UButton :loading="reloading" class="mx-1" @click="setUrl">Set</UButton>
-                </UFormField>
             </UCard>
         </UPageSection>
     </UPageBody>
@@ -91,5 +95,7 @@ const onKavitaClick = async () => {
     }
 };
 
+const { data: settings, status: settingsStatus } = useApi('/v2/Settings', { key: FetchKeys.Settings.All });
+
 useHead({ title: 'Settings' });
 </script>