Manga Remove button

tranga-website/src/App.tsx

@@ -1,8 +1,8 @@
 import Sheet from '@mui/joy/Sheet';
 import Header from './Header.tsx';
 import Settings from './Components/Settings/Settings.tsx';
-import ApiProvider from './contexts/ApiContext.tsx';
+import ApiProvider, { ApiContext } from './contexts/ApiContext.tsx';
-import { useEffect, useState } from 'react';
+import { useContext, useEffect, useState } from 'react';
 import { ApiConfig } from './api/http-client.ts';
 import MangaProvider from './contexts/MangaContext.tsx';
 import MangaList from './Components/Mangas/MangaList.tsx';
@@ -10,8 +10,9 @@ import { Search } from './Search.tsx';
 import MangaConnectorProvider from './contexts/MangaConnectorContext.tsx';
 import LibraryProvider from './contexts/FileLibraryContext.tsx';
 import MangaDetail from './Components/Mangas/Detail/MangaDetail.tsx';
+import TButton from './Components/Inputs/TButton.tsx';
 
-export default function App() {
+export function App() {
     const [apiUri, setApiUri] = useState<string>(
         localStorage.getItem('apiUri') ??
             window.location.href.substring(0, window.location.href.lastIndexOf('/')) + '/api'
@@ -21,16 +22,30 @@ export default function App() {
         setApiConfig({ baseUrl: apiUri });
     }, [apiUri]);
 
+    const Api = useContext(ApiContext);
+
     const [searchOpen, setSearchOpen] = useState<boolean>(false);
     const [downloadDrawerOpen, setDownloadDrawerOpen] = useState(false);
     const [selectedMangaKey, setSelectedMangaKey] = useState<string>();
     const [downloadSectionOpen, setDownloadSectionOpen] = useState(false);
+
     function openMangaDownloadDrawer(mangaKey: string, downloadSectionOpen?: boolean) {
         setDownloadDrawerOpen(true);
         setSelectedMangaKey(mangaKey);
         setDownloadSectionOpen(downloadSectionOpen ?? false);
     }
 
+    const removeManga = async (mangaKey?: string): Promise<void> => {
+        if (!mangaKey) return Promise.reject();
+        try {
+            let r = await Api.mangaDelete(mangaKey);
+            if (r.ok) return Promise.resolve();
+            else return Promise.reject();
+        } catch (reason) {
+            return await Promise.reject(reason);
+        }
+    };
+
     return (
         <ApiProvider apiConfig={apiConfig}>
             <MangaConnectorProvider>
@@ -54,8 +69,11 @@ export default function App() {
                                     open={downloadDrawerOpen}
                                     setOpen={setDownloadDrawerOpen}
                                     mangaKey={selectedMangaKey}
-                                    downloadOpen={downloadSectionOpen}
+                                    downloadOpen={downloadSectionOpen}>
-                                />
+                                    <TButton completionAction={() => removeManga(selectedMangaKey)}>
+                                        Remove
+                                    </TButton>
+                                </MangaDetail>
                             </Sheet>
                         </Sheet>
                     </MangaProvider>

tranga-website/src/Components/Mangas/Detail/DownloadSection.tsx

@@ -5,18 +5,19 @@ import {
     Box,
     Checkbox,
     List,
-    ListItem, Option,
+    ListItem,
+    Option,
     Select,
     Stack,
-    Typography
+    Typography,
-} from "@mui/joy";
+} from '@mui/joy';
-import {ReactNode, useContext} from "react";
+import { ReactNode, useContext } from 'react';
-import TButton from "../../Inputs/TButton.tsx";
+import TButton from '../../Inputs/TButton.tsx';
-import MangaConnectorIcon from "../MangaConnectorIcon.tsx";
+import MangaConnectorIcon from '../MangaConnectorIcon.tsx';
-import {FileLibrary, Manga, MangaConnectorId} from "../../../api/data-contracts.ts";
+import { FileLibrary, Manga, MangaConnectorId } from '../../../api/data-contracts.ts';
-import {FileLibraryContext} from "../../../contexts/FileLibraryContext.tsx";
+import { FileLibraryContext } from '../../../contexts/FileLibraryContext.tsx';
 
-export default function DownloadSection (props: DownloadSectionProps) : ReactNode {
+export default function DownloadSection(props: DownloadSectionProps): ReactNode {
     const Libraries = useContext(FileLibraryContext);
 
     return (
@@ -64,13 +65,9 @@ export default function DownloadSection (props: DownloadSectionProps) : ReactNod
                                                     gap: 5,
                                                 }}>
                                                 <MangaConnectorIcon
-                                                    mangaConnectorName={
+                                                    mangaConnectorName={id.mangaConnectorName}
-                                                        id.mangaConnectorName
-                                                    }
                                                 />
-                                                <Typography>
+                                                <Typography>{id.mangaConnectorName}</Typography>
-                                                    {id.mangaConnectorName}
-                                                </Typography>
                                             </div>
                                         }
                                     />

tranga-website/src/Components/Mangas/Detail/MangaDetail.tsx

@@ -1,21 +1,12 @@
 import { Dispatch, ReactNode, useContext, useEffect, useState } from 'react';
-import {
+import { Card, CardCover, Chip, Modal, ModalDialog, Stack, Typography, useTheme } from '@mui/joy';
-    Card,
-    CardCover,
-    Chip,
-    Modal,
-    ModalDialog,
-    Stack,
-    Typography,
-    useTheme,
-} from '@mui/joy';
 import ModalClose from '@mui/joy/ModalClose';
 import { FileLibrary, Manga, MangaConnectorId } from '../../../api/data-contracts.ts';
 import { ApiContext } from '../../../contexts/ApiContext.tsx';
 import { MangaContext } from '../../../contexts/MangaContext.tsx';
 import { FileLibraryContext } from '../../../contexts/FileLibraryContext.tsx';
 import MarkdownPreview from '@uiw/react-markdown-preview';
-import DownloadSection from "./DownloadSection.tsx";
+import DownloadSection from './DownloadSection.tsx';
 
 export default function MangaDetail(props: MangaDetailProps): ReactNode {
     const Api = useContext(ApiContext);
@@ -139,9 +130,20 @@ export default function MangaDetail(props: MangaDetailProps): ReactNode {
                                 overflowY: 'auto',
                             }}
                         />
+                        <Stack
+                            direction={'row-reverse'}
+                            gap={1}>
+                            {props.children}
                         </Stack>
                     </Stack>
-                <DownloadSection downloadOpen={props.downloadOpen??false} library={library} onLibraryChange={onLibraryChange} downloadFromMap={downloadFromMap} setDownload={setDownload} />
+                </Stack>
+                <DownloadSection
+                    downloadOpen={props.downloadOpen ?? false}
+                    library={library}
+                    onLibraryChange={onLibraryChange}
+                    downloadFromMap={downloadFromMap}
+                    setDownload={setDownload}
+                />
             </ModalDialog>
         </Modal>
     );
@@ -153,4 +155,5 @@ export interface MangaDetailProps {
     open: boolean;
     setOpen: Dispatch<boolean>;
     downloadOpen?: boolean;
+    children?: ReactNode;
 }

tranga-website/src/main.tsx

@@ -1,6 +1,6 @@
 import { createRoot } from 'react-dom/client';
 import './index.css';
-import App from './App.tsx';
+import { App } from './App.tsx';
 // @ts-expect-error font
 import '@fontsource/inter';
 import { CssVarsProvider } from '@mui/joy/styles';