From 34a34ef91e7ceee1cbb24f060778dc75b27bc54e Mon Sep 17 00:00:00 2001
From: glax <johanna@bernloehr.eu>
Date: Mon, 4 Aug 2025 12:34:27 +0200
Subject: [PATCH] LibraryConnector Settings

---
 .../LibraryConnectors/AddLibraryConnector.tsx | 19 ++++++++++
 .../LibraryConnectors/LibraryConnectors.tsx   | 18 ++++++++++
 .../ListLibraryConnectors.tsx                 | 35 +++++++++++++++++++
 .../AddNotificationConnector.tsx              |  6 ++--
 .../ListNotificationConnector.tsx             |  4 +--
 .../src/Components/Settings/Services.tsx      |  4 ++-
 6 files changed, 80 insertions(+), 6 deletions(-)
 create mode 100644 tranga-website/src/Components/Settings/LibraryConnectors/AddLibraryConnector.tsx
 create mode 100644 tranga-website/src/Components/Settings/LibraryConnectors/LibraryConnectors.tsx
 create mode 100644 tranga-website/src/Components/Settings/LibraryConnectors/ListLibraryConnectors.tsx
 rename tranga-website/src/Components/Settings/{ => NotificationConnectors}/AddNotificationConnector.tsx (96%)
 rename tranga-website/src/Components/Settings/{ => NotificationConnectors}/ListNotificationConnector.tsx (91%)

diff --git a/tranga-website/src/Components/Settings/LibraryConnectors/AddLibraryConnector.tsx b/tranga-website/src/Components/Settings/LibraryConnectors/AddLibraryConnector.tsx
new file mode 100644
index 0000000..5f58618
--- /dev/null
+++ b/tranga-website/src/Components/Settings/LibraryConnectors/AddLibraryConnector.tsx
@@ -0,0 +1,19 @@
+import {Modal, ModalDialog, Tab, TabList, Tabs} from "@mui/joy";
+import ModalClose from "@mui/joy/ModalClose";
+import * as React from "react";
+
+export default function ({open, setOpen} : {open: boolean, setOpen: Dispatch<boolean>}) {
+    return (
+        <Modal open={open} onClose={() => setOpen(false)}>
+            <ModalDialog>
+                <ModalClose />
+                <Tabs sx={{width:'95%'}} defaultValue={"komga"}>
+                    <TabList>
+                        <Tab value={"komga"}>Komga</Tab>
+                        <Tab value={"kavita"}>Kavita</Tab>
+                    </TabList>
+                </Tabs>
+            </ModalDialog>
+        </Modal>
+    );
+}
\ No newline at end of file
diff --git a/tranga-website/src/Components/Settings/LibraryConnectors/LibraryConnectors.tsx b/tranga-website/src/Components/Settings/LibraryConnectors/LibraryConnectors.tsx
new file mode 100644
index 0000000..c4f1051
--- /dev/null
+++ b/tranga-website/src/Components/Settings/LibraryConnectors/LibraryConnectors.tsx
@@ -0,0 +1,18 @@
+import {Button, Card, Typography} from "@mui/joy";
+import {useState} from "react";
+import ListLibraryConnectors from "./ListLibraryConnectors.tsx";
+import AddLibraryConnector from "./AddLibraryConnector.tsx";
+
+export default function (){
+
+    const [addDialogOpen, setAddDialogOpen] = useState<boolean>(false);
+
+    return (
+        <Card>
+            <Typography>Library Connectors</Typography>
+            <Button onClick={() => setAddDialogOpen(true)}>Add</Button>
+            <ListLibraryConnectors />
+            <AddLibraryConnector open={addDialogOpen} setOpen={() => setAddDialogOpen(false)} />
+        </Card>
+    );
+}
\ No newline at end of file
diff --git a/tranga-website/src/Components/Settings/LibraryConnectors/ListLibraryConnectors.tsx b/tranga-website/src/Components/Settings/LibraryConnectors/ListLibraryConnectors.tsx
new file mode 100644
index 0000000..c63053f
--- /dev/null
+++ b/tranga-website/src/Components/Settings/LibraryConnectors/ListLibraryConnectors.tsx
@@ -0,0 +1,35 @@
+import {useContext, useEffect, useState} from "react";
+import {ApiContext} from "../../../apiClient/ApiContext.tsx";
+import {LibraryConnector} from "../../../apiClient/data-contracts.ts";
+import {Card, Chip, Input, Stack} from "@mui/joy";
+
+export default function (){
+    const Api = useContext(ApiContext);
+    const [libraryConnectors, setLibraryConnectors] = useState<LibraryConnector[]>([]);
+
+    useEffect(() => {
+        getConnectors();
+    }, []);
+
+    const getConnectors = () => {
+        Api.libraryConnectorList().then(r => {
+            if(r.ok)
+                setLibraryConnectors(r.data);
+        })
+    };
+
+    return (
+        <Stack direction={"column"} spacing={1}>
+            {libraryConnectors.map(c => <LibraryConnectorItem key={c.key} connector={c} />)}
+        </Stack>
+    );
+}
+
+function LibraryConnectorItem({connector} : {connector: LibraryConnector}){
+    return (
+        <Card>
+            <Chip>{connector.libraryType}</Chip>
+            <Input disabled value={connector.baseUrl} />
+        </Card>
+    );
+}
\ No newline at end of file
diff --git a/tranga-website/src/Components/Settings/AddNotificationConnector.tsx b/tranga-website/src/Components/Settings/NotificationConnectors/AddNotificationConnector.tsx
similarity index 96%
rename from tranga-website/src/Components/Settings/AddNotificationConnector.tsx
rename to tranga-website/src/Components/Settings/NotificationConnectors/AddNotificationConnector.tsx
index 6846c3b..1ff0d6b 100644
--- a/tranga-website/src/Components/Settings/AddNotificationConnector.tsx
+++ b/tranga-website/src/Components/Settings/NotificationConnectors/AddNotificationConnector.tsx
@@ -1,5 +1,5 @@
 import {ReactNode, useContext, useState} from "react";
-import { ApiContext } from "../../apiClient/ApiContext";
+import { ApiContext } from "../../../apiClient/ApiContext.tsx";
 import {
     Button, Card,
     Input,
@@ -12,8 +12,8 @@ import {
     Tabs, Typography
 } from "@mui/joy";
 import ModalClose from "@mui/joy/ModalClose";
-import {GotifyRecord, NtfyRecord, PushoverRecord} from "../../apiClient/data-contracts.ts";
-import {LoadingState, StateColor, StateIndicator} from "../Loading.tsx";
+import {GotifyRecord, NtfyRecord, PushoverRecord} from "../../../apiClient/data-contracts.ts";
+import {LoadingState, StateColor, StateIndicator} from "../../Loading.tsx";
 import * as React from "react";
 import ListNotificationConnector from "./ListNotificationConnector.tsx";
 
diff --git a/tranga-website/src/Components/Settings/ListNotificationConnector.tsx b/tranga-website/src/Components/Settings/NotificationConnectors/ListNotificationConnector.tsx
similarity index 91%
rename from tranga-website/src/Components/Settings/ListNotificationConnector.tsx
rename to tranga-website/src/Components/Settings/NotificationConnectors/ListNotificationConnector.tsx
index 9e66f9b..af50e68 100644
--- a/tranga-website/src/Components/Settings/ListNotificationConnector.tsx
+++ b/tranga-website/src/Components/Settings/NotificationConnectors/ListNotificationConnector.tsx
@@ -1,6 +1,6 @@
-import {ApiContext} from "../../apiClient/ApiContext.tsx";
+import {ApiContext} from "../../../apiClient/ApiContext.tsx";
 import {useContext, useEffect, useState} from "react";
-import { NotificationConnector } from "../../apiClient/data-contracts.ts";
+import { NotificationConnector } from "../../../apiClient/data-contracts.ts";
 import {Card, Chip, Input, Stack, Table, Textarea, Typography} from "@mui/joy";
 
 export default function (){
diff --git a/tranga-website/src/Components/Settings/Services.tsx b/tranga-website/src/Components/Settings/Services.tsx
index 7f5a7a8..b5a2eaa 100644
--- a/tranga-website/src/Components/Settings/Services.tsx
+++ b/tranga-website/src/Components/Settings/Services.tsx
@@ -1,6 +1,7 @@
 import {SettingsItem} from "./Settings.tsx";
-import NotificationConnectors from "./AddNotificationConnector.tsx";
+import NotificationConnectors from "./NotificationConnectors/AddNotificationConnector.tsx";
 import FlareSolverr from "./FlareSolverr.tsx";
+import LibraryConnectors from "./LibraryConnectors/LibraryConnectors.tsx";
 
 export default function(){
 
@@ -10,6 +11,7 @@ export default function(){
         <SettingsItem title={"Services"} direction={"row"}>
             <FlareSolverr />
             <NotificationConnectors />
+            <LibraryConnectors />
         </SettingsItem>
     );
 }
\ No newline at end of file