From 59082187a6d2302cca21703baf9827473ffdb849 Mon Sep 17 00:00:00 2001
From: glax <johanna@bernloehr.eu>
Date: Fri, 5 Sep 2025 17:15:36 +0200
Subject: [PATCH] Add LibrarySection

---
 .../Mangas/Detail/LibrarySection.tsx          | 73 +++++++++++++++++++
 .../Components/Mangas/Detail/MangaDetail.tsx  |  2 +
 2 files changed, 75 insertions(+)
 create mode 100644 tranga-website/src/Components/Mangas/Detail/LibrarySection.tsx

diff --git a/tranga-website/src/Components/Mangas/Detail/LibrarySection.tsx b/tranga-website/src/Components/Mangas/Detail/LibrarySection.tsx
new file mode 100644
index 0000000..2290d10
--- /dev/null
+++ b/tranga-website/src/Components/Mangas/Detail/LibrarySection.tsx
@@ -0,0 +1,73 @@
+import { ReactNode, useContext, useEffect, useState } from 'react';
+import { FileLibrary, Manga } from '../../../api/data-contracts.ts';
+import {
+    Accordion,
+    AccordionDetails,
+    AccordionSummary,
+    Option,
+    Select,
+    Stack,
+    Typography,
+} from '@mui/joy';
+import { ApiContext } from '../../../contexts/ApiContext.tsx';
+import { FileLibraryContext } from '../../../contexts/FileLibraryContext.tsx';
+import TButton from '../../Inputs/TButton.tsx';
+
+export function LibrarySection(props: LibrarySectionProps): ReactNode {
+    const Api = useContext(ApiContext);
+    const Libraries = useContext(FileLibraryContext);
+
+    const [library, setLibrary] = useState<FileLibrary | undefined>();
+
+    useEffect(() => {
+        if (!props.manga) return;
+        setLibrary(Libraries.find((library) => library.key == props.manga?.fileLibraryId));
+    }, [props]);
+
+    const onLibraryChange = (_: any, value: string | null) => {
+        setLibrary(Libraries.find((library) => library.key == value));
+    };
+
+    const submit = async (): Promise<void> => {
+        if (!props.manga || !library) return Promise.reject();
+        try {
+            let result = await Api.mangaChangeLibraryCreate(props.manga?.key, library?.key);
+            if (!result.ok) return Promise.reject();
+            else return Promise.resolve();
+        } catch (reason) {
+            return await Promise.reject(reason);
+        }
+    };
+
+    return (
+        <Accordion sx={{ maxHeight: '50vh' }}>
+            <AccordionSummary>
+                <Typography level={'h3'}>Library</Typography>
+            </AccordionSummary>
+            <AccordionDetails>
+                <Stack
+                    direction={'row'}
+                    gap={2}>
+                    <Select
+                        placeholder={'Select a Library'}
+                        value={library?.key}
+                        onChange={onLibraryChange}
+                        sx={{ flexGrow: 1 }}>
+                        {Libraries.map((l) => (
+                            <Option
+                                key={l.key}
+                                value={l.key}>
+                                {l.libraryName} ({l.basePath})
+                            </Option>
+                        ))}
+                    </Select>
+                    <TButton onClick={submit}>Move Manga to Library</TButton>
+                </Stack>
+            </AccordionDetails>
+        </Accordion>
+    );
+}
+
+export interface LibrarySectionProps {
+    manga?: Manga;
+}
diff --git a/tranga-website/src/Components/Mangas/Detail/MangaDetail.tsx b/tranga-website/src/Components/Mangas/Detail/MangaDetail.tsx
index daf6c65..9243b05 100644
--- a/tranga-website/src/Components/Mangas/Detail/MangaDetail.tsx
+++ b/tranga-website/src/Components/Mangas/Detail/MangaDetail.tsx
@@ -7,6 +7,7 @@ import { MangaContext } from '../../../contexts/MangaContext.tsx';
 import MarkdownPreview from '@uiw/react-markdown-preview';
 import { DownloadSection } from './DownloadSection.tsx';
 import ChaptersSection from './ChaptersSection.tsx';
+import { LibrarySection } from './LibrarySection.tsx';
 
 export default function MangaDetail(props: MangaDetailProps): ReactNode {
     const Api = useContext(ApiContext);
@@ -101,6 +102,7 @@ export default function MangaDetail(props: MangaDetailProps): ReactNode {
                     downloadOpen={props.downloadOpen ?? false}
                     manga={manga}
                 />
+                <LibrarySection manga={manga} />
                 <ChaptersSection manga={manga} />
             </ModalDialog>
         </Modal>