Less steps to download

2025-09-10 11:58:20 +02:00 · 2025-09-05 16:15:18 +02:00
parent e5186bf72d
commit 5070e76480
25 changed files with 265 additions and 591 deletions
--- a/tranga-website/.prettierrc
+++ b/tranga-website/.prettierrc
@@ -2,7 +2,7 @@
    "trailingComma": "es5",
    "tabWidth": 4,
    "singleQuote": true,
-    "printWidth": 80,
+    "printWidth": 100,
    "semi": true,
    "bracketSpacing": true,
    "objectWrap": "collapse",
--- a/tranga-website/eslint.config.js
+++ b/tranga-website/eslint.config.js
@@ -13,10 +13,7 @@ export default tseslint.config(
        plugins: { 'react-hooks': reactHooks, 'react-refresh': reactRefresh },
        rules: {
            ...reactHooks.configs.recommended.rules,
-            'react-refresh/only-export-components': [
-                'warn',
-                { allowConstantExport: true },
-            ],
+            'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
        },
    }
 );
--- a/tranga-website/src/App.tsx
+++ b/tranga-website/src/App.tsx
@@ -9,14 +9,12 @@ import MangaList from './Components/Mangas/MangaList.tsx';
 import { Search } from './Search.tsx';
 import MangaConnectorProvider from './contexts/MangaConnectorContext.tsx';
 import LibraryProvider from './contexts/FileLibraryContext.tsx';
+import MangaDetail from './MangaDetail.tsx';

 export default function App() {
    const [apiUri, setApiUri] = useState<string>(
        localStorage.getItem('apiUri') ??
-            window.location.href.substring(
-                0,
-                window.location.href.lastIndexOf('/')
-            ) + '/api'
+            window.location.href.substring(0, window.location.href.lastIndexOf('/')) + '/api'
    );
    const [apiConfig, setApiConfig] = useState<ApiConfig>({ baseUrl: apiUri });
    useEffect(() => {
@@ -24,6 +22,14 @@ export default function App() {
    }, [apiUri]);

    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);
+    }

    return (
        <ApiProvider apiConfig={apiConfig}>
@@ -36,11 +42,19 @@ export default function App() {
                            </Header>
                            <Sheet className={'app-content'}>
                                <MangaList
+                                    mangaOnClick={(m) => openMangaDownloadDrawer(m.key)}
                                    openSearch={() => setSearchOpen(true)}
                                />
                                <Search
                                    open={searchOpen}
                                    setOpen={setSearchOpen}
+                                    mangaOnClick={(m) => openMangaDownloadDrawer(m.key, true)}
+                                />
+                                <MangaDetail
+                                    open={downloadDrawerOpen}
+                                    setOpen={setDownloadDrawerOpen}
+                                    mangaKey={selectedMangaKey}
+                                    downloadOpen={downloadSectionOpen}
                                />
                            </Sheet>
                        </Sheet>
--- a/tranga-website/src/Components/Inputs/TInput.tsx
+++ b/tranga-website/src/Components/Inputs/TInput.tsx
@@ -6,9 +6,9 @@ import './loadingBorder.css';

 export default function TInput(props: TInputProps) {
    const [state, setState] = useState<TState>(TState.clean);
-    const [value, setValue] = useState<
-        string | number | readonly string[] | undefined
-    >(props.defaultValue);
+    const [value, setValue] = useState<string | number | readonly string[] | undefined>(
+        props.defaultValue
+    );
    const [initialValue, setInitialValue] = useState<
        string | number | readonly string[] | undefined
    >(props.defaultValue);
--- a/tranga-website/src/Components/Inputs/TProps.ts
+++ b/tranga-website/src/Components/Inputs/TProps.ts
@@ -34,7 +34,5 @@ export const TColor = (state: TState): ColorPaletteProp => {

 export default interface TProps {
    disabled?: boolean;
-    completionAction?: (
-        value?: string | number | readonly string[]
-    ) => Promise<void>;
+    completionAction?: (value?: string | number | readonly string[]) => Promise<void>;
 }
--- a/tranga-website/src/Components/Mangas/MangaCard.css
+++ b/tranga-website/src/Components/Mangas/MangaCard.css
@@ -11,11 +11,7 @@
 }

 .manga-card-cover-blur {
-    background: linear-gradient(
-        150deg,
-        rgba(245, 169, 184, 0.8) 50%,
-        rgba(91, 206, 250, 0.3)
-    );
+    background: linear-gradient(150deg, rgba(245, 169, 184, 0.8) 50%, rgba(91, 206, 250, 0.3));
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(2px) brightness(70%);
    -webkit-backdrop-filter: blur(2px) brightness(70%);
--- a/tranga-website/src/Components/Mangas/MangaCard.tsx
+++ b/tranga-website/src/Components/Mangas/MangaCard.tsx
@@ -10,11 +10,7 @@ import {
 import { EventHandler, ReactNode, useContext } from 'react';
 import './MangaCard.css';
 import MangaConnectorIcon from './MangaConnectorIcon.tsx';
-import {
-    Manga,
-    MangaReleaseStatus,
-    MinimalManga,
-} from '../../api/data-contracts.ts';
+import { Manga, MangaReleaseStatus, MinimalManga } from '../../api/data-contracts.ts';
 import { ApiContext } from '../../contexts/ApiContext.tsx';

 export default function MangaCard(props: MangaCardProps): ReactNode {
@@ -23,14 +19,10 @@ export default function MangaCard(props: MangaCardProps): ReactNode {
    return (
        <Badge
            badgeContent={props.manga?.mangaConnectorIds.map((id) => (
-                <MangaConnectorIcon
-                    mangaConnectorName={id.mangaConnectorName}
-                />
+                <MangaConnectorIcon mangaConnectorName={id.mangaConnectorName} />
            ))}
            className={'manga-card-badge'}
-            color={releaseColor(
-                props.manga?.releaseStatus ?? MangaReleaseStatus.Unreleased
-            )}>
+            color={releaseColor(props.manga?.releaseStatus ?? MangaReleaseStatus.Unreleased)}>
            <Card
                className={'manga-card'}
                onClick={props.onClick}>
@@ -46,9 +38,7 @@ export default function MangaCard(props: MangaCardProps): ReactNode {
                <CardCover className={'manga-card-cover-blur'} />
                <CardContent className={'manga-card-content'}>
                    <Typography level={'h4'}>
-                        {props.manga?.name ?? (
-                            <Skeleton>{stringWithRandomLength()}</Skeleton>
-                        )}
+                        {props.manga?.name ?? <Skeleton>{stringWithRandomLength()}</Skeleton>}
                    </Typography>
                </CardContent>
            </Card>
--- a/tranga-website/src/Components/Mangas/MangaConnectorIcon.tsx
+++ b/tranga-website/src/Components/Mangas/MangaConnectorIcon.tsx
@@ -12,9 +12,7 @@ export default function MangaConnectorIcon({
 }): ReactNode {
    const Api = useContext(ApiContext);

-    const [connector, setConnector] = useState<MangaConnector | undefined>(
-        mangaConnector
-    );
+    const [connector, setConnector] = useState<MangaConnector | undefined>(mangaConnector);

    useEffect(() => {
        if (mangaConnector) {
--- a/tranga-website/src/Components/Mangas/MangaList.tsx
+++ b/tranga-website/src/Components/Mangas/MangaList.tsx
@@ -1,36 +1,39 @@
 import { Stack } from '@mui/joy';
 import './MangaList.css';
 import { Dispatch, ReactNode, useContext, useEffect, useState } from 'react';
-import {
-    Manga,
-    MangaReleaseStatus,
-    MinimalManga,
-} from '../../api/data-contracts.ts';
+import { Manga, MangaReleaseStatus, MinimalManga } from '../../api/data-contracts.ts';
 import { ApiContext } from '../../contexts/ApiContext.tsx';
 import MangaCard from './MangaCard.tsx';

-export default function MangaList({
-    openSearch,
-}: {
-    openSearch: () => void;
-}): ReactNode {
+export default function MangaList(props: MangaListProps): ReactNode {
    const Api = useContext(ApiContext);
-    const [downloadingManga, setDownloadingManga] = useState<MinimalManga[]>(
-        []
-    );
+    const [downloadingManga, setDownloadingManga] = useState<MinimalManga[]>([]);

+    const [interval, setIntervalState] = useState<number>();
    useEffect(() => {
+        if (interval) {
+            clearInterval(interval);
+            setIntervalState(undefined);
+        }
+        if (!Api) return;
+        updateDownloadingManga();
+        setIntervalState(setInterval(updateDownloadingManga, 5000));
+    }, [Api]);
+
+    const updateDownloadingManga = () => {
        Api.mangaDownloadingList().then((data) => {
            if (data.ok) {
                setDownloadingManga(data.data);
            }
        });
-    }, [Api]);
+    };

    return (
-        <MangaCardList manga={downloadingManga}>
+        <MangaCardList
+            manga={downloadingManga}
+            mangaOnClick={props.mangaOnClick}>
            <MangaCard
-                onClick={openSearch}
+                onClick={props.openSearch}
                manga={{
                    name: 'Search',
                    description: 'Search for a new Manga',
@@ -43,6 +46,11 @@ export default function MangaList({
    );
 }

+export interface MangaListProps {
+    openSearch: () => void;
+    mangaOnClick?: Dispatch<Manga | MinimalManga>;
+}
+
 export function MangaCardList(props: MangaCardListProps): ReactNode {
    return (
        <Stack
--- a/tranga-website/src/Components/Settings/ChapterNamingScheme.tsx
+++ b/tranga-website/src/Components/Settings/ChapterNamingScheme.tsx
@@ -8,13 +8,10 @@ export default function ChapterNamingScheme(): ReactNode {
    const settings = useContext(SettingsContext);
    const Api = useContext(ApiContext);

-    const schemeChanged = async (
-        value: string | number | readonly string[] | undefined
-    ) => {
+    const schemeChanged = async (value: string | number | readonly string[] | undefined) => {
        if (typeof value != 'string') return Promise.reject();
        try {
-            const response =
-                await Api.settingsChapterNamingSchemePartialUpdate(value);
+            const response = await Api.settingsChapterNamingSchemePartialUpdate(value);
            if (response.ok) return Promise.resolve();
            else return Promise.reject();
        } catch {
--- a/tranga-website/src/Components/Settings/DownloadLanguage.tsx
+++ b/tranga-website/src/Components/Settings/DownloadLanguage.tsx
@@ -7,13 +7,10 @@ export default function DownloadLanguage(): ReactNode {
    const settings = useContext(SettingsContext);
    const Api = useContext(ApiContext);

-    const languageChanged = async (
-        value: string | number | readonly string[] | undefined
-    ) => {
+    const languageChanged = async (value: string | number | readonly string[] | undefined) => {
        if (typeof value != 'string') return Promise.reject();
        try {
-            const response =
-                await Api.settingsDownloadLanguagePartialUpdate(value);
+            const response = await Api.settingsDownloadLanguagePartialUpdate(value);
            if (response.ok) return Promise.resolve();
            else return Promise.reject();
        } catch {
--- a/tranga-website/src/Components/Settings/FlareSolverr.tsx
+++ b/tranga-website/src/Components/Settings/FlareSolverr.tsx
@@ -7,9 +7,7 @@ export default function FlareSolverr(): ReactNode {
    const settings = useContext(SettingsContext);
    const Api = useContext(ApiContext);

-    const uriChanged = async (
-        value: string | number | readonly string[] | undefined
-    ) => {
+    const uriChanged = async (value: string | number | readonly string[] | undefined) => {
        if (typeof value != 'string') return Promise.reject();
        try {
            const response = await Api.settingsFlareSolverrUrlCreate(value);
--- a/tranga-website/src/Components/Settings/Maintenance.tsx
+++ b/tranga-website/src/Components/Settings/Maintenance.tsx
@@ -18,9 +18,7 @@ export default function Maintenance() {

    return (
        <SettingsItem title={'Maintenance'}>
-            <TButton completionAction={cleanUnusedManga}>
-                Cleanup unused Manga
-            </TButton>
+            <TButton completionAction={cleanUnusedManga}>Cleanup unused Manga</TButton>
        </SettingsItem>
    );
 }
--- a/tranga-website/src/Components/Settings/Settings.tsx
+++ b/tranga-website/src/Components/Settings/Settings.tsx
@@ -12,13 +12,7 @@ import {
 } from '@mui/joy';
 import './Settings.css';
 import * as React from 'react';
-import {
-    createContext,
-    ReactNode,
-    useContext,
-    useEffect,
-    useState,
-} from 'react';
+import { createContext, ReactNode, useContext, useEffect, useState } from 'react';
 import { SxProps } from '@mui/joy/styles/types';
 import ImageCompression from './ImageCompression.tsx';
 import FlareSolverr from './FlareSolverr.tsx';
@@ -29,15 +23,9 @@ import { ApiContext } from '../../contexts/ApiContext.tsx';
 import { TrangaSettings } from '../../api/data-contracts.ts';
 import TInput from '../Inputs/TInput.tsx';

-export const SettingsContext = createContext<TrangaSettings | undefined>(
-    undefined
-);
+export const SettingsContext = createContext<TrangaSettings | undefined>(undefined);

-export default function Settings({
-    setApiUri,
-}: {
-    setApiUri: (uri: string) => void;
-}) {
+export default function Settings({ setApiUri }: { setApiUri: (uri: string) => void }) {
    const Api = useContext(ApiContext);
    const [settings, setSettings] = useState<TrangaSettings>();

@@ -49,9 +37,7 @@ export default function Settings({
        });
    }, [Api]);

-    const apiUriChanged = (
-        value: string | number | readonly string[] | undefined
-    ) => {
+    const apiUriChanged = (value: string | number | readonly string[] | undefined) => {
        if (typeof value != 'string') return Promise.reject();
        setApiUri(value);
        return Promise.resolve();
@@ -90,13 +76,7 @@ export default function Settings({
    );
 }

-export function SettingsItem({
-    title,
-    children,
-}: {
-    title: string;
-    children: ReactNode;
-}) {
+export function SettingsItem({ title, children }: { title: string; children: ReactNode }) {
    return (
        <Accordion>
            <AccordionSummary>{title}</AccordionSummary>
--- a/tranga-website/src/Header.tsx
+++ b/tranga-website/src/Header.tsx
@@ -5,11 +5,7 @@ import './Header.css';
 import { Article, GitHub } from '@mui/icons-material';
 import { ApiContext } from './contexts/ApiContext.tsx';

-export default function Header({
-    children,
-}: {
-    children?: ReactNode;
-}): ReactElement {
+export default function Header({ children }: { children?: ReactNode }): ReactElement {
    const Api = useContext(ApiContext);

    return (
@@ -17,11 +13,7 @@ export default function Header({
            <Stack
                direction={'row'}
                spacing={2}
-                sx={{
-                    width: '100%',
-                    alignItems: 'center',
-                    justifyContent: 'space-between',
-                }}
+                sx={{ width: '100%', alignItems: 'center', justifyContent: 'space-between' }}
                useFlexGap>
                <Stack
                    sx={{ flexGrow: 1, flexBasis: 1 }}
@@ -30,12 +22,7 @@ export default function Header({
                    {children}
                </Stack>
                <Stack
-                    sx={{
-                        flexGrow: 1,
-                        height: '100%',
-                        flexBasis: 1,
-                        justifyContent: 'center',
-                    }}
+                    sx={{ flexGrow: 1, height: '100%', flexBasis: 1, justifyContent: 'center' }}
                    direction={'row'}>
                    <img
                        src={'/blahaj.png'}
@@ -55,11 +42,7 @@ export default function Header({
                    </Typography>
                </Stack>
                <Stack
-                    sx={{
-                        flexGrow: 1,
-                        flexBasis: 1,
-                        justifyContent: 'flex-end',
-                    }}
+                    sx={{ flexGrow: 1, flexBasis: 1, justifyContent: 'flex-end' }}
                    direction={'row'}
                    spacing={2}>
                    <Link
--- a/tranga-website/src/MangaDetail.tsx
+++ b/tranga-website/src/MangaDetail.tsx
@@ -1,35 +1,85 @@
-import { Manga } from './api/data-contracts.ts';
 import { Dispatch, ReactNode, useContext, useEffect, useState } from 'react';
 import {
+    Accordion,
+    AccordionDetails,
+    AccordionSummary,
+    Box,
    Card,
    CardCover,
+    Checkbox,
    Chip,
+    List,
+    ListItem,
    Modal,
    ModalDialog,
+    Option,
+    Select,
    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 './Components/Mangas/MangaCard.css';
+import { FileLibraryContext } from './contexts/FileLibraryContext.tsx';
+import MangaConnectorIcon from './Components/Mangas/MangaConnectorIcon.tsx';
+import TButton from './Components/Inputs/TButton.tsx';
 import MarkdownPreview from '@uiw/react-markdown-preview';

 export default function MangaDetail(props: MangaDetailProps): ReactNode {
    const Api = useContext(ApiContext);
    const Manga = useContext(MangaContext);
+    const Libraries = useContext(FileLibraryContext);
+    const theme = useTheme();

    const [manga, setManga] = useState<Manga | undefined>(props.manga);
+    const [library, setLibrary] = useState<FileLibrary | undefined>();
+    const [downloadFromMap, setDownloadFromMap] = useState<Map<MangaConnectorId, boolean>>(
+        new Map()
+    );

    useEffect(() => {
        if (!props.open) return;
        if (!props.mangaKey) return;
        if (props.manga != undefined) return;
+        setLibrary(undefined);
        Manga.GetManga(props.mangaKey).then(setManga);
    }, [Api, Manga, props]);

-    const theme = useTheme();
+    useEffect(() => {
+        const newMap = new Map();
+        setLibrary(Libraries.find((library) => library.key == manga?.fileLibraryId));
+        manga?.mangaConnectorIds.forEach((id) => {
+            newMap.set(id, id.useForDownload);
+        });
+        setDownloadFromMap(newMap);
+    }, [manga, Libraries]);
+
+    const setDownload = async (): Promise<void> => {
+        if (!manga) return Promise.reject();
+        if (library) {
+            const s = await Api.mangaChangeLibraryCreate(manga.key, library?.key)
+                .then((result) => result.ok)
+                .catch(() => false);
+            if (!s) return Promise.reject();
+        }
+        for (const kv of downloadFromMap) {
+            const s = await Api.mangaSetAsDownloadFromCreate(
+                manga?.key,
+                kv[0].mangaConnectorName,
+                kv[1]
+            )
+                .then((result) => result.ok)
+                .catch(() => false);
+            if (!s) return Promise.reject();
+        }
+        return Promise.resolve();
+    };
+
+    const onLibraryChange = (_: any, value: string | null) => {
+        setLibrary(Libraries.find((library) => library.key == value));
+    };

    return (
        <Modal
@@ -37,18 +87,17 @@ export default function MangaDetail(props: MangaDetailProps): ReactNode {
            onClose={() => props.setOpen(false)}>
            <ModalDialog>
                <ModalClose />
-                <div
-                    style={{
-                        display: 'flex',
-                        flexWrap: 'wrap',
-                        flexDirection: 'row',
-                    }}>
-                    <Typography
-                        level={'h3'}
-                        sx={{ width: '100%' }}>
-                        {manga?.name}
-                    </Typography>
-                    <Card className={'manga-card'}>
+                <Typography
+                    level={'h3'}
+                    sx={{ width: '100%' }}>
+                    {manga?.name}
+                </Typography>
+                <Stack
+                    direction={'row'}
+                    gap={1}>
+                    <Card
+                        className={'manga-card'}
+                        sx={{ flexShrink: 0 }}>
                        <CardCover className={'manga-card-cover'}>
                            <img
                                src={
@@ -62,7 +111,7 @@ export default function MangaDetail(props: MangaDetailProps): ReactNode {
                    <Stack
                        direction={'column'}
                        gap={2}
-                        sx={{ maxWidth: 'calc(100% - 230px)', margin: '5px' }}>
+                        sx={{ flexShrink: 1 }}>
                        <Stack
                            direction={'row'}
                            gap={0.5}
@@ -71,10 +120,7 @@ export default function MangaDetail(props: MangaDetailProps): ReactNode {
                                <Chip
                                    key={tag}
                                    size={'sm'}
-                                    sx={{
-                                        backgroundColor:
-                                            theme.palette.primary.plainColor,
-                                    }}>
+                                    sx={{ backgroundColor: theme.palette.primary.plainColor }}>
                                    {tag}
                                </Chip>
                            ))}
@@ -82,10 +128,7 @@ export default function MangaDetail(props: MangaDetailProps): ReactNode {
                                <Chip
                                    key={author.key}
                                    size={'sm'}
-                                    sx={{
-                                        backgroundColor:
-                                            theme.palette.success.plainColor,
-                                    }}>
+                                    sx={{ backgroundColor: theme.palette.success.plainColor }}>
                                    {author.name}
                                </Chip>
                            ))}
@@ -93,10 +136,7 @@ export default function MangaDetail(props: MangaDetailProps): ReactNode {
                                <Chip
                                    key={link.provider}
                                    size={'sm'}
-                                    sx={{
-                                        backgroundColor:
-                                            theme.palette.neutral.plainColor,
-                                    }}>
+                                    sx={{ backgroundColor: theme.palette.neutral.plainColor }}>
                                    <a href={link.url}>{link.provider}</a>
                                </Chip>
                            ))}
@@ -110,18 +150,70 @@ export default function MangaDetail(props: MangaDetailProps): ReactNode {
                            }}
                        />
                    </Stack>
-                    <Stack
-                        sx={{
-                            flexGrow: 1,
-                            flexBasis: 0,
-                            margin: '5px 0',
-                            alignItems: 'flex-end',
-                        }}
-                        flexWrap={'nowrap'}
-                        gap={1}>
-                        {props.actions}
-                    </Stack>
-                </div>
+                </Stack>
+
+                <Accordion defaultExpanded={props.downloadOpen}>
+                    <AccordionSummary>
+                        <Typography level={'h3'}>Download</Typography>
+                    </AccordionSummary>
+                    <AccordionDetails>
+                        <Stack
+                            direction={'column'}
+                            gap={2}
+                            sx={{ flexBasis: 0 }}>
+                            <Box>
+                                <Typography>Select a Library to Download to:</Typography>
+                                <Select
+                                    placeholder={'Select a Library'}
+                                    value={library?.key}
+                                    onChange={onLibraryChange}>
+                                    {Libraries.map((l) => (
+                                        <Option
+                                            key={l.key}
+                                            value={l.key}>
+                                            {l.libraryName} ({l.basePath})
+                                        </Option>
+                                    ))}
+                                </Select>
+                            </Box>
+                            <Box>
+                                <Typography>
+                                    Select which connectors you want to download this Manga from:
+                                </Typography>
+                                <List>
+                                    {manga?.mangaConnectorIds.map((id) => (
+                                        <ListItem key={id.key}>
+                                            <Checkbox
+                                                defaultChecked={id.useForDownload}
+                                                onChange={(c) =>
+                                                    downloadFromMap.set(id, c.target.checked)
+                                                }
+                                                label={
+                                                    <div
+                                                        style={{
+                                                            display: 'flex',
+                                                            alignItems: 'center',
+                                                            gap: 5,
+                                                        }}>
+                                                        <MangaConnectorIcon
+                                                            mangaConnectorName={
+                                                                id.mangaConnectorName
+                                                            }
+                                                        />
+                                                        <Typography>
+                                                            {id.mangaConnectorName}
+                                                        </Typography>
+                                                    </div>
+                                                }
+                                            />
+                                        </ListItem>
+                                    ))}
+                                </List>
+                            </Box>
+                            <TButton completionAction={setDownload}>Download All</TButton>
+                        </Stack>
+                    </AccordionDetails>
+                </Accordion>
            </ModalDialog>
        </Modal>
    );
@@ -132,5 +224,5 @@ export interface MangaDetailProps {
    mangaKey?: string;
    open: boolean;
    setOpen: Dispatch<boolean>;
-    actions?: ReactNode[];
+    downloadOpen?: boolean;
 }
--- a/tranga-website/src/MangaDownloadDrawer.tsx
+++ b/tranga-website/src/MangaDownloadDrawer.tsx
@@ -1,164 +0,0 @@
-import { Dispatch, ReactNode, useContext, useEffect, useState } from 'react';
-import {
-    Box,
-    Card,
-    Checkbox,
-    Drawer,
-    List,
-    ListItem,
-    Option,
-    Select,
-    Stack,
-    Typography,
-} 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 MangaConnectorIcon from './Components/Mangas/MangaConnectorIcon.tsx';
-import TButton from './Components/Inputs/TButton.tsx';
-
-export default function MangaDownloadDrawer(
-    props: MangaDownloadDrawerProps
-): ReactNode {
-    const Api = useContext(ApiContext);
-    const Manga = useContext(MangaContext);
-    const Libraries = useContext(FileLibraryContext);
-
-    const [manga, setManga] = useState<Manga | undefined>(props.manga);
-    const [library, setLibrary] = useState<FileLibrary | undefined>();
-    const [downloadFromMap, setDownloadFromMap] = useState<
-        Map<MangaConnectorId, boolean>
-    >(new Map());
-
-    useEffect(() => {
-        if (!props.open) return;
-        if (!props.mangaKey) return;
-        if (props.manga != undefined) return;
-        Manga.GetManga(props.mangaKey).then(setManga);
-    }, [Api, Manga, props]);
-
-    useEffect(() => {
-        const newMap = new Map();
-        setLibrary(
-            Libraries.find((library) => library.key == manga?.fileLibraryId)
-        );
-        manga?.mangaConnectorIds.forEach((id) => {
-            newMap.set(id, id.useForDownload);
-        });
-        setDownloadFromMap(newMap);
-    }, [manga]);
-
-    const setDownload = async (): Promise<void> => {
-        if (!manga) return Promise.reject();
-        if (library) {
-            const s = await Api.mangaChangeLibraryCreate(
-                manga.key,
-                library?.key
-            )
-                .then((result) => result.ok)
-                .catch(() => false);
-            if (!s) return Promise.reject();
-        }
-        for (const kv of downloadFromMap) {
-            const s = await Api.mangaSetAsDownloadFromCreate(
-                manga?.key,
-                kv[0].mangaConnectorName,
-                kv[1]
-            )
-                .then((result) => result.ok)
-                .catch(() => false);
-            if (!s) return Promise.reject();
-        }
-        return Promise.resolve();
-    };
-
-    const onLibraryChange = (_: any, value: string | null) => {
-        setLibrary(Libraries.find((library) => library.key == value));
-    };
-
-    return (
-        <Drawer
-            open={props.open}
-            onClose={() => props.setOpen(false)}
-            anchor="left"
-            size="md">
-            <Card sx={{ flexGrow: 1, margin: '10px' }}>
-                <ModalClose />
-                <Typography level={'h3'}>Download</Typography>
-                <Typography level={'h4'}>{manga?.name}</Typography>
-                <Stack
-                    direction={'column'}
-                    gap={2}
-                    sx={{ flexBasis: 0 }}>
-                    <Box>
-                        <Typography>
-                            Select a Library to Download to:
-                        </Typography>
-                        <Select
-                            placeholder={'Select a Library'}
-                            value={library?.key}
-                            onChange={onLibraryChange}>
-                            {Libraries.map((l) => (
-                                <Option
-                                    key={l.key}
-                                    value={l.key}>
-                                    {l.libraryName} ({l.basePath})
-                                </Option>
-                            ))}
-                        </Select>
-                    </Box>
-                    <Box>
-                        <Typography>
-                            Select which connectors you want to download this
-                            Manga from:
-                        </Typography>
-                        <List>
-                            {manga?.mangaConnectorIds.map((id) => (
-                                <ListItem key={id.key}>
-                                    <Checkbox
-                                        defaultChecked={id.useForDownload}
-                                        onChange={(c) =>
-                                            downloadFromMap.set(
-                                                id,
-                                                c.target.checked
-                                            )
-                                        }
-                                        label={
-                                            <div
-                                                style={{
-                                                    display: 'flex',
-                                                    alignItems: 'center',
-                                                    gap: 5,
-                                                }}>
-                                                <MangaConnectorIcon
-                                                    mangaConnectorName={
-                                                        id.mangaConnectorName
-                                                    }
-                                                />
-                                                <Typography>
-                                                    {id.mangaConnectorName}
-                                                </Typography>
-                                            </div>
-                                        }
-                                    />
-                                </ListItem>
-                            ))}
-                        </List>
-                    </Box>
-                    <TButton completionAction={setDownload}>
-                        Download All
-                    </TButton>
-                </Stack>
-            </Card>
-        </Drawer>
-    );
-}
-
-export interface MangaDownloadDrawerProps {
-    manga?: Manga;
-    mangaKey?: string;
-    open: boolean;
-    setOpen: Dispatch<boolean>;
-}
--- a/tranga-website/src/Search.tsx
+++ b/tranga-website/src/Search.tsx
@@ -1,6 +1,5 @@
 import { Dispatch, ReactNode, useContext, useEffect, useState } from 'react';
 import {
-    Button,
    List,
    ListItem,
    ListItemDecorator,
@@ -18,8 +17,6 @@ import TInput from './Components/Inputs/TInput.tsx';
 import { ApiContext } from './contexts/ApiContext.tsx';
 import { MangaCardList } from './Components/Mangas/MangaList.tsx';
 import { MangaConnector, MinimalManga } from './api/data-contracts.ts';
-import MangaDetail from './MangaDetail.tsx';
-import MangaDownloadDrawer from './MangaDownloadDrawer.tsx';

 export function Search(props: SearchModalProps): ReactNode {
    const Api = useContext(ApiContext);
@@ -32,8 +29,7 @@ export function Search(props: SearchModalProps): ReactNode {
        }
    }, [props]);

-    const [selectedConnector, setSelectedConnector] =
-        useState<MangaConnector>();
+    const [selectedConnector, setSelectedConnector] = useState<MangaConnector>();
    const [searchResults, setSearchResults] = useState<MinimalManga[]>([]);

    const startSearch = async (
@@ -54,10 +50,7 @@ export function Search(props: SearchModalProps): ReactNode {
        } else {
            if (!selectedConnector) return Promise.reject();
            try {
-                const result2 = await Api.searchDetail(
-                    selectedConnector?.key,
-                    value
-                );
+                const result2 = await Api.searchDetail(selectedConnector?.key, value);
                if (result2.ok) {
                    setSearchResults(result2.data);
                    return Promise.resolve();
@@ -68,23 +61,6 @@ export function Search(props: SearchModalProps): ReactNode {
        }
    };

-    const [selectedManga, setSelectedManga] = useState<
-        MinimalManga | undefined
-    >(undefined);
-    const [mangaDetailOpen, setMangaDetailOpen] = useState(false);
-    const [mangaDownloadDrawerOpen, setMangaDownloadDrawerOpen] =
-        useState(false);
-
-    function openMangaDetail(manga: MinimalManga) {
-        setSelectedManga(manga);
-        setMangaDetailOpen(true);
-    }
-
-    function openMangaDownloadDrawer() {
-        setMangaDetailOpen(false);
-        setMangaDownloadDrawerOpen(true);
-    }
-
    return (
        <Modal
            open={props.open}
@@ -95,18 +71,14 @@ export function Search(props: SearchModalProps): ReactNode {
                    <Step
                        orientation={'vertical'}
                        indicator={<StepIndicator>1</StepIndicator>}>
-                        <Typography level={'title-lg'}>
-                            Select a connector
-                        </Typography>
+                        <Typography level={'title-lg'}>Select a connector</Typography>
                        <List>
                            {MangaConnectors.map((c) => (
                                <ListItem
                                    key={c.key}
                                    onClick={() => setSelectedConnector(c)}>
                                    <ListItemDecorator>
-                                        <MangaConnectorIcon
-                                            mangaConnector={c}
-                                        />
+                                        <MangaConnectorIcon mangaConnector={c} />
                                    </ListItemDecorator>
                                    <Typography
                                        sx={
@@ -123,9 +95,7 @@ export function Search(props: SearchModalProps): ReactNode {
                    <Step
                        orientation={'vertical'}
                        indicator={<StepIndicator>2</StepIndicator>}>
-                        <Typography level={'title-lg'}>
-                            Enter a search term or URL
-                        </Typography>
+                        <Typography level={'title-lg'}>Enter a search term or URL</Typography>
                        <TInput
                            placeholder={'Manga-name or URL'}
                            completionAction={startSearch}
@@ -134,22 +104,7 @@ export function Search(props: SearchModalProps): ReactNode {
                </Stepper>
                <MangaCardList
                    manga={searchResults}
-                    mangaOnClick={openMangaDetail}
-                />
-                <MangaDetail
-                    mangaKey={selectedManga?.key}
-                    open={mangaDetailOpen}
-                    setOpen={setMangaDetailOpen}
-                    actions={[
-                        <Button onClick={openMangaDownloadDrawer}>
-                            Download
-                        </Button>,
-                    ]}
-                />
-                <MangaDownloadDrawer
-                    open={mangaDownloadDrawerOpen}
-                    setOpen={setMangaDownloadDrawerOpen}
-                    mangaKey={selectedManga?.key}
+                    mangaOnClick={props.mangaOnClick}
                />
            </ModalDialog>
        </Modal>
@@ -159,6 +114,7 @@ export function Search(props: SearchModalProps): ReactNode {
 export interface SearchModalProps {
    open: boolean;
    setOpen: Dispatch<boolean>;
+    mangaOnClick?: (manga: MinimalManga) => void;
 }

 function isUrl(str: string): boolean {
--- a/tranga-website/src/api/V2.ts
+++ b/tranga-website/src/api/V2.ts
@@ -33,9 +33,7 @@ import {
 } from './data-contracts';
 import { ContentType, HttpClient, RequestParams } from './http-client';

-export class V2<
-    SecurityDataType = unknown,
-> extends HttpClient<SecurityDataType> {
+export class V2<SecurityDataType = unknown> extends HttpClient<SecurityDataType> {
    /**
     * No description
     *
@@ -159,10 +157,7 @@ export class V2<
     * @summary Creates a new API.Schema.LibraryContext.LibraryConnectors.LibraryConnector
     * @request PUT:/v2/LibraryConnector
     */
-    libraryConnectorUpdate = (
-        data: LibraryConnector,
-        params: RequestParams = {}
-    ) =>
+    libraryConnectorUpdate = (data: LibraryConnector, params: RequestParams = {}) =>
        this.request<string, string>({
            path: `/v2/LibraryConnector`,
            method: 'PUT',
@@ -178,10 +173,7 @@ export class V2<
     * @summary Returns API.Schema.LibraryContext.LibraryConnectors.LibraryConnector with LibraryConnectorId
     * @request GET:/v2/LibraryConnector/{LibraryConnectorId}
     */
-    libraryConnectorDetail = (
-        libraryConnectorId: string,
-        params: RequestParams = {}
-    ) =>
+    libraryConnectorDetail = (libraryConnectorId: string, params: RequestParams = {}) =>
        this.request<LibraryConnector, string>({
            path: `/v2/LibraryConnector/${libraryConnectorId}`,
            method: 'GET',
@@ -196,10 +188,7 @@ export class V2<
     * @summary Deletes API.Schema.LibraryContext.LibraryConnectors.LibraryConnector with LibraryConnectorId
     * @request DELETE:/v2/LibraryConnector/{LibraryConnectorId}
     */
-    libraryConnectorDelete = (
-        libraryConnectorId: string,
-        params: RequestParams = {}
-    ) =>
+    libraryConnectorDelete = (libraryConnectorId: string, params: RequestParams = {}) =>
        this.request<void, string>({
            path: `/v2/LibraryConnector/${libraryConnectorId}`,
            method: 'DELETE',
@@ -305,11 +294,7 @@ export class V2<
     * @request DELETE:/v2/Manga/{MangaId}
     */
    mangaDelete = (mangaId: string, params: RequestParams = {}) =>
-        this.request<void, string>({
-            path: `/v2/Manga/${mangaId}`,
-            method: 'DELETE',
-            ...params,
-        });
+        this.request<void, string>({ path: `/v2/Manga/${mangaId}`, method: 'DELETE', ...params });
    /**
     * No description
     *
@@ -382,10 +367,7 @@ export class V2<
     * @summary Returns all downloaded API.Controllers.DTOs.Chapter for API.Controllers.DTOs.Manga with MangaId
     * @request GET:/v2/Manga/{MangaId}/Chapters/Downloaded
     */
-    mangaChaptersDownloadedList = (
-        mangaId: string,
-        params: RequestParams = {}
-    ) =>
+    mangaChaptersDownloadedList = (mangaId: string, params: RequestParams = {}) =>
        this.request<Chapter[], string>({
            path: `/v2/Manga/${mangaId}/Chapters/Downloaded`,
            method: 'GET',
@@ -400,10 +382,7 @@ export class V2<
     * @summary Returns all API.Controllers.DTOs.Chapter not downloaded for API.Controllers.DTOs.Manga with MangaId
     * @request GET:/v2/Manga/{MangaId}/Chapters/NotDownloaded
     */
-    mangaChaptersNotDownloadedList = (
-        mangaId: string,
-        params: RequestParams = {}
-    ) =>
+    mangaChaptersNotDownloadedList = (mangaId: string, params: RequestParams = {}) =>
        this.request<Chapter[], string>({
            path: `/v2/Manga/${mangaId}/Chapters/NotDownloaded`,
            method: 'GET',
@@ -418,10 +397,7 @@ export class V2<
     * @summary Returns the latest API.Controllers.DTOs.Chapter of requested API.Controllers.DTOs.Manga available on API.MangaConnectors.MangaConnector
     * @request GET:/v2/Manga/{MangaId}/Chapter/LatestAvailable
     */
-    mangaChapterLatestAvailableList = (
-        mangaId: string,
-        params: RequestParams = {}
-    ) =>
+    mangaChapterLatestAvailableList = (mangaId: string, params: RequestParams = {}) =>
        this.request<number, string | void>({
            path: `/v2/Manga/${mangaId}/Chapter/LatestAvailable`,
            method: 'GET',
@@ -436,10 +412,7 @@ export class V2<
     * @summary Returns the latest API.Controllers.DTOs.Chapter of requested API.Controllers.DTOs.Manga that is downloaded
     * @request GET:/v2/Manga/{MangaId}/Chapter/LatestDownloaded
     */
-    mangaChapterLatestDownloadedList = (
-        mangaId: string,
-        params: RequestParams = {}
-    ) =>
+    mangaChapterLatestDownloadedList = (mangaId: string, params: RequestParams = {}) =>
        this.request<Chapter, string | ProblemDetails | void>({
            path: `/v2/Manga/${mangaId}/Chapter/LatestDownloaded`,
            method: 'GET',
@@ -474,11 +447,7 @@ export class V2<
     * @summary Move API.Controllers.DTOs.Manga to different API.Schema.MangaContext.FileLibrary
     * @request POST:/v2/Manga/{MangaId}/ChangeLibrary/{LibraryId}
     */
-    mangaChangeLibraryCreate = (
-        mangaId: string,
-        libraryId: string,
-        params: RequestParams = {}
-    ) =>
+    mangaChangeLibraryCreate = (mangaId: string, libraryId: string, params: RequestParams = {}) =>
        this.request<void, string>({
            path: `/v2/Manga/${mangaId}/ChangeLibrary/${libraryId}`,
            method: 'POST',
@@ -575,10 +544,7 @@ export class V2<
     * @summary Returns the API.MangaConnectors.MangaConnector (Scanlation-Sites) with the requested Name
     * @request GET:/v2/MangaConnector/{MangaConnectorName}
     */
-    mangaConnectorDetail = (
-        mangaConnectorName: string,
-        params: RequestParams = {}
-    ) =>
+    mangaConnectorDetail = (mangaConnectorName: string, params: RequestParams = {}) =>
        this.request<MangaConnector, string>({
            path: `/v2/MangaConnector/${mangaConnectorName}`,
            method: 'GET',
@@ -748,10 +714,7 @@ export class V2<
     * @summary Creates a new API.Schema.NotificationsContext.NotificationConnectors.NotificationConnector
     * @request PUT:/v2/NotificationConnector
     */
-    notificationConnectorUpdate = (
-        data: NotificationConnector,
-        params: RequestParams = {}
-    ) =>
+    notificationConnectorUpdate = (data: NotificationConnector, params: RequestParams = {}) =>
        this.request<string, string>({
            path: `/v2/NotificationConnector`,
            method: 'PUT',
@@ -797,10 +760,7 @@ export class V2<
     * @summary Creates a new Gotify-API.Schema.NotificationsContext.NotificationConnectors.NotificationConnector
     * @request PUT:/v2/NotificationConnector/Gotify
     */
-    notificationConnectorGotifyUpdate = (
-        data: GotifyRecord,
-        params: RequestParams = {}
-    ) =>
+    notificationConnectorGotifyUpdate = (data: GotifyRecord, params: RequestParams = {}) =>
        this.request<string, string>({
            path: `/v2/NotificationConnector/Gotify`,
            method: 'PUT',
@@ -817,10 +777,7 @@ export class V2<
     * @summary Creates a new Ntfy-API.Schema.NotificationsContext.NotificationConnectors.NotificationConnector
     * @request PUT:/v2/NotificationConnector/Ntfy
     */
-    notificationConnectorNtfyUpdate = (
-        data: NtfyRecord,
-        params: RequestParams = {}
-    ) =>
+    notificationConnectorNtfyUpdate = (data: NtfyRecord, params: RequestParams = {}) =>
        this.request<string, string>({
            path: `/v2/NotificationConnector/Ntfy`,
            method: 'PUT',
@@ -837,10 +794,7 @@ export class V2<
     * @summary Creates a new Pushover-API.Schema.NotificationsContext.NotificationConnectors.NotificationConnector
     * @request PUT:/v2/NotificationConnector/Pushover
     */
-    notificationConnectorPushoverUpdate = (
-        data: PushoverRecord,
-        params: RequestParams = {}
-    ) =>
+    notificationConnectorPushoverUpdate = (data: PushoverRecord, params: RequestParams = {}) =>
        this.request<string, string>({
            path: `/v2/NotificationConnector/Pushover`,
            method: 'PUT',
@@ -887,10 +841,7 @@ export class V2<
     * @summary Returns the API.Schema.MangaContext.MangaConnectorId`1 with API.Schema.MangaContext.MangaConnectorId`1.Key
     * @request GET:/v2/Query/Manga/MangaConnectorId/{MangaConnectorIdId}
     */
-    queryMangaMangaConnectorIdDetail = (
-        mangaConnectorIdId: string,
-        params: RequestParams = {}
-    ) =>
+    queryMangaMangaConnectorIdDetail = (mangaConnectorIdId: string, params: RequestParams = {}) =>
        this.request<MangaConnectorId, string>({
            path: `/v2/Query/Manga/MangaConnectorId/${mangaConnectorIdId}`,
            method: 'GET',
@@ -920,10 +871,7 @@ export class V2<
     * @summary Returns the API.Schema.MangaContext.MangaConnectorId`1 with API.Schema.MangaContext.MangaConnectorId`1.Key
     * @request GET:/v2/Query/Chapter/MangaConnectorId/{MangaConnectorIdId}
     */
-    queryChapterMangaConnectorIdDetail = (
-        mangaConnectorIdId: string,
-        params: RequestParams = {}
-    ) =>
+    queryChapterMangaConnectorIdDetail = (mangaConnectorIdId: string, params: RequestParams = {}) =>
        this.request<MangaConnectorId, string>({
            path: `/v2/Query/Chapter/MangaConnectorId/${mangaConnectorIdId}`,
            method: 'GET',
@@ -938,11 +886,7 @@ export class V2<
     * @summary Initiate a search for a API.Schema.MangaContext.Manga on API.Controllers.DTOs.MangaConnector with searchTerm
     * @request GET:/v2/Search/{MangaConnectorName}/{Query}
     */
-    searchDetail = (
-        mangaConnectorName: string,
-        query: string,
-        params: RequestParams = {}
-    ) =>
+    searchDetail = (mangaConnectorName: string, query: string, params: RequestParams = {}) =>
        this.request<MinimalManga[], string | ProblemDetails | void>({
            path: `/v2/Search/${mangaConnectorName}/${query}`,
            method: 'GET',
@@ -990,11 +934,7 @@ export class V2<
     * @request GET:/v2/Settings/UserAgent
     */
    settingsUserAgentList = (params: RequestParams = {}) =>
-        this.request<string, any>({
-            path: `/v2/Settings/UserAgent`,
-            method: 'GET',
-            ...params,
-        });
+        this.request<string, any>({ path: `/v2/Settings/UserAgent`, method: 'GET', ...params });
    /**
     * No description
     *
@@ -1003,10 +943,7 @@ export class V2<
     * @summary Set a new UserAgent
     * @request PATCH:/v2/Settings/UserAgent
     */
-    settingsUserAgentPartialUpdate = (
-        data: string,
-        params: RequestParams = {}
-    ) =>
+    settingsUserAgentPartialUpdate = (data: string, params: RequestParams = {}) =>
        this.request<void, any>({
            path: `/v2/Settings/UserAgent`,
            method: 'PATCH',
@@ -1023,11 +960,7 @@ export class V2<
     * @request DELETE:/v2/Settings/UserAgent
     */
    settingsUserAgentDelete = (params: RequestParams = {}) =>
-        this.request<void, any>({
-            path: `/v2/Settings/UserAgent`,
-            method: 'DELETE',
-            ...params,
-        });
+        this.request<void, any>({ path: `/v2/Settings/UserAgent`, method: 'DELETE', ...params });
    /**
     * No description
     *
@@ -1053,12 +986,7 @@ export class V2<
                MangaInfo?: number;
            },
            any
-        >({
-            path: `/v2/Settings/RequestLimits`,
-            method: 'GET',
-            format: 'json',
-            ...params,
-        });
+        >({ path: `/v2/Settings/RequestLimits`, method: 'GET', format: 'json', ...params });
    /**
     * @description <h1>NOT IMPLEMENTED</h1>
     *
@@ -1068,11 +996,7 @@ export class V2<
     * @request PATCH:/v2/Settings/RequestLimits
     */
    settingsRequestLimitsPartialUpdate = (params: RequestParams = {}) =>
-        this.request<any, void>({
-            path: `/v2/Settings/RequestLimits`,
-            method: 'PATCH',
-            ...params,
-        });
+        this.request<any, void>({ path: `/v2/Settings/RequestLimits`, method: 'PATCH', ...params });
    /**
     * No description
     *
@@ -1120,10 +1044,7 @@ export class V2<
     * @originalName settingsRequestLimitsDelete
     * @duplicate
     */
-    settingsRequestLimitsDelete2 = (
-        requestType: RequestType,
-        params: RequestParams = {}
-    ) =>
+    settingsRequestLimitsDelete2 = (requestType: RequestType, params: RequestParams = {}) =>
        this.request<string, any>({
            path: `/v2/Settings/RequestLimits/${requestType}`,
            method: 'DELETE',
@@ -1152,10 +1073,7 @@ export class V2<
     * @summary Set the Image-Compression-Level for Images
     * @request PATCH:/v2/Settings/ImageCompressionLevel/{level}
     */
-    settingsImageCompressionLevelPartialUpdate = (
-        level: number,
-        params: RequestParams = {}
-    ) =>
+    settingsImageCompressionLevelPartialUpdate = (level: number, params: RequestParams = {}) =>
        this.request<void, ProblemDetails>({
            path: `/v2/Settings/ImageCompressionLevel/${level}`,
            method: 'PATCH',
@@ -1170,11 +1088,7 @@ export class V2<
     * @request GET:/v2/Settings/BWImages
     */
    settingsBwImagesList = (params: RequestParams = {}) =>
-        this.request<boolean, any>({
-            path: `/v2/Settings/BWImages`,
-            method: 'GET',
-            ...params,
-        });
+        this.request<boolean, any>({ path: `/v2/Settings/BWImages`, method: 'GET', ...params });
    /**
     * No description
     *
@@ -1183,10 +1097,7 @@ export class V2<
     * @summary Enable/Disable conversion of Images to Black and White
     * @request PATCH:/v2/Settings/BWImages/{enabled}
     */
-    settingsBwImagesPartialUpdate = (
-        enabled: boolean,
-        params: RequestParams = {}
-    ) =>
+    settingsBwImagesPartialUpdate = (enabled: boolean, params: RequestParams = {}) =>
        this.request<void, any>({
            path: `/v2/Settings/BWImages/${enabled}`,
            method: 'PATCH',
@@ -1214,10 +1125,7 @@ export class V2<
     * @summary Sets the Chapter Naming Scheme
     * @request PATCH:/v2/Settings/ChapterNamingScheme
     */
-    settingsChapterNamingSchemePartialUpdate = (
-        data: string,
-        params: RequestParams = {}
-    ) =>
+    settingsChapterNamingSchemePartialUpdate = (data: string, params: RequestParams = {}) =>
        this.request<void, any>({
            path: `/v2/Settings/ChapterNamingScheme`,
            method: 'PATCH',
@@ -1233,10 +1141,7 @@ export class V2<
     * @summary Sets the FlareSolverr-URL
     * @request POST:/v2/Settings/FlareSolverr/Url
     */
-    settingsFlareSolverrUrlCreate = (
-        data: string,
-        params: RequestParams = {}
-    ) =>
+    settingsFlareSolverrUrlCreate = (data: string, params: RequestParams = {}) =>
        this.request<void, any>({
            path: `/v2/Settings/FlareSolverr/Url`,
            method: 'POST',
@@ -1294,10 +1199,7 @@ export class V2<
     * @summary Sets the language in which Manga are downloaded
     * @request PATCH:/v2/Settings/DownloadLanguage/{Language}
     */
-    settingsDownloadLanguagePartialUpdate = (
-        language: string,
-        params: RequestParams = {}
-    ) =>
+    settingsDownloadLanguagePartialUpdate = (language: string, params: RequestParams = {}) =>
        this.request<void, any>({
            path: `/v2/Settings/DownloadLanguage/${language}`,
            method: 'PATCH',
@@ -1341,10 +1243,7 @@ export class V2<
     * @summary Get all API.Workers.BaseWorker in requested API.Workers.WorkerExecutionState
     * @request GET:/v2/Worker/State/{State}
     */
-    workerStateDetail = (
-        state: WorkerExecutionState,
-        params: RequestParams = {}
-    ) =>
+    workerStateDetail = (state: WorkerExecutionState, params: RequestParams = {}) =>
        this.request<Worker[], any>({
            path: `/v2/Worker/State/${state}`,
            method: 'GET',
@@ -1375,11 +1274,7 @@ export class V2<
     * @request DELETE:/v2/Worker/{WorkerId}
     */
    workerDelete = (workerId: string, params: RequestParams = {}) =>
-        this.request<void, string>({
-            path: `/v2/Worker/${workerId}`,
-            method: 'DELETE',
-            ...params,
-        });
+        this.request<void, string>({ path: `/v2/Worker/${workerId}`, method: 'DELETE', ...params });
    /**
     * No description
     *
--- a/tranga-website/src/api/http-client.ts
+++ b/tranga-website/src/api/http-client.ts
@@ -32,10 +32,7 @@ export interface FullRequestParams extends Omit<RequestInit, 'body'> {
    cancelToken?: CancelToken;
 }

-export type RequestParams = Omit<
-    FullRequestParams,
-    'body' | 'method' | 'query' | 'path'
->;
+export type RequestParams = Omit<FullRequestParams, 'body' | 'method' | 'query' | 'path'>;

 export interface ApiConfig<SecurityDataType = unknown> {
    baseUrl?: string;
@@ -46,8 +43,7 @@ export interface ApiConfig<SecurityDataType = unknown> {
    customFetch?: typeof fetch;
 }

-export interface HttpResponse<D extends unknown, E extends unknown = unknown>
-    extends Response {
+export interface HttpResponse<D extends unknown, E extends unknown = unknown> extends Response {
    data: D;
    error: E;
 }
@@ -67,8 +63,7 @@ export class HttpClient<SecurityDataType = unknown> {
    private securityData: SecurityDataType | null = null;
    private securityWorker?: ApiConfig<SecurityDataType>['securityWorker'];
    private abortControllers = new Map<CancelToken, AbortController>();
-    private customFetch = (...fetchParams: Parameters<typeof fetch>) =>
-        fetch(...fetchParams);
+    private customFetch = (...fetchParams: Parameters<typeof fetch>) => fetch(...fetchParams);

    private baseApiParams: RequestParams = {
        credentials: 'same-origin',
@@ -101,9 +96,7 @@ export class HttpClient<SecurityDataType = unknown> {

    protected toQueryString(rawQuery?: QueryParamsType): string {
        const query = rawQuery || {};
-        const keys = Object.keys(query).filter(
-            (key) => 'undefined' !== typeof query[key]
-        );
+        const keys = Object.keys(query).filter((key) => 'undefined' !== typeof query[key]);
        return keys
            .map((key) =>
                Array.isArray(query[key])
@@ -120,19 +113,15 @@ export class HttpClient<SecurityDataType = unknown> {

    private contentFormatters: Record<ContentType, (input: any) => any> = {
        [ContentType.Json]: (input: any) =>
-            input !== null &&
-            (typeof input === 'object' || typeof input === 'string')
+            input !== null && (typeof input === 'object' || typeof input === 'string')
                ? JSON.stringify(input)
                : input,
        [ContentType.JsonApi]: (input: any) =>
-            input !== null &&
-            (typeof input === 'object' || typeof input === 'string')
+            input !== null && (typeof input === 'object' || typeof input === 'string')
                ? JSON.stringify(input)
                : input,
        [ContentType.Text]: (input: any) =>
-            input !== null && typeof input !== 'string'
-                ? JSON.stringify(input)
-                : input,
+            input !== null && typeof input !== 'string' ? JSON.stringify(input) : input,
        [ContentType.FormData]: (input: any) =>
            Object.keys(input || {}).reduce((formData, key) => {
                const property = input[key];
@@ -149,10 +138,7 @@ export class HttpClient<SecurityDataType = unknown> {
        [ContentType.UrlEncoded]: (input: any) => this.toQueryString(input),
    };

-    protected mergeRequestParams(
-        params1: RequestParams,
-        params2?: RequestParams
-    ): RequestParams {
+    protected mergeRequestParams(params1: RequestParams, params2?: RequestParams): RequestParams {
        return {
            ...this.baseApiParams,
            ...params1,
@@ -165,9 +151,7 @@ export class HttpClient<SecurityDataType = unknown> {
        };
    }

-    protected createAbortSignal = (
-        cancelToken: CancelToken
-    ): AbortSignal | undefined => {
+    protected createAbortSignal = (cancelToken: CancelToken): AbortSignal | undefined => {
        if (this.abortControllers.has(cancelToken)) {
            const abortController = this.abortControllers.get(cancelToken);
            if (abortController) {
@@ -202,16 +186,13 @@ export class HttpClient<SecurityDataType = unknown> {
        ...params
    }: FullRequestParams): Promise<HttpResponse<T, E>> => {
        const secureParams =
-            ((typeof secure === 'boolean'
-                ? secure
-                : this.baseApiParams.secure) &&
+            ((typeof secure === 'boolean' ? secure : this.baseApiParams.secure) &&
                this.securityWorker &&
                (await this.securityWorker(this.securityData))) ||
            {};
        const requestParams = this.mergeRequestParams(params, secureParams);
        const queryString = query && this.toQueryString(query);
-        const payloadFormatter =
-            this.contentFormatters[type || ContentType.Json];
+        const payloadFormatter = this.contentFormatters[type || ContentType.Json];
        const responseFormat = format || requestParams.format;

        return this.customFetch(
@@ -220,18 +201,12 @@ export class HttpClient<SecurityDataType = unknown> {
                ...requestParams,
                headers: {
                    ...(requestParams.headers || {}),
-                    ...(type && type !== ContentType.FormData
-                        ? { 'Content-Type': type }
-                        : {}),
+                    ...(type && type !== ContentType.FormData ? { 'Content-Type': type } : {}),
                },
                signal:
-                    (cancelToken
-                        ? this.createAbortSignal(cancelToken)
-                        : requestParams.signal) || null,
-                body:
-                    typeof body === 'undefined' || body === null
-                        ? null
-                        : payloadFormatter(body),
+                    (cancelToken ? this.createAbortSignal(cancelToken) : requestParams.signal) ||
+                    null,
+                body: typeof body === 'undefined' || body === null ? null : payloadFormatter(body),
            }
        ).then(async (response) => {
            const r = response.clone() as HttpResponse<T, E>;
--- a/tranga-website/src/contexts/FileLibraryContext.tsx
+++ b/tranga-website/src/contexts/FileLibraryContext.tsx
@@ -1,20 +1,10 @@
-import {
-    createContext,
-    ReactNode,
-    useContext,
-    useEffect,
-    useState,
-} from 'react';
+import { createContext, ReactNode, useContext, useEffect, useState } from 'react';
 import { FileLibrary } from '../api/data-contracts.ts';
 import { ApiContext } from './ApiContext.tsx';

 export const FileLibraryContext = createContext<FileLibrary[]>([]);

-export default function LibraryProvider({
-    children,
-}: {
-    children: ReactNode;
-}): ReactNode {
+export default function LibraryProvider({ children }: { children: ReactNode }): ReactNode {
    const Api = useContext(ApiContext);

    const [state, setState] = useState<FileLibrary[]>([]);
--- a/tranga-website/src/contexts/MangaConnectorContext.tsx
+++ b/tranga-website/src/contexts/MangaConnectorContext.tsx
@@ -1,20 +1,10 @@
-import {
-    createContext,
-    ReactNode,
-    useContext,
-    useEffect,
-    useState,
-} from 'react';
+import { createContext, ReactNode, useContext, useEffect, useState } from 'react';
 import { MangaConnector } from '../api/data-contracts.ts';
 import { ApiContext } from './ApiContext.tsx';

 export const MangaConnectorContext = createContext<MangaConnector[]>([]);

-export default function MangaConnectorProvider({
-    children,
-}: {
-    children: ReactNode;
-}) {
+export default function MangaConnectorProvider({ children }: { children: ReactNode }) {
    const Api = useContext(ApiContext);

    const [state, setState] = useState<MangaConnector[]>([]);
@@ -27,7 +17,5 @@ export default function MangaConnectorProvider({
        });
    }, [Api]);

-    return (
-        <MangaConnectorContext value={state}>{children}</MangaConnectorContext>
-    );
+    return <MangaConnectorContext value={state}>{children}</MangaConnectorContext>;
 }
--- a/tranga-website/src/contexts/MangaContext.tsx
+++ b/tranga-website/src/contexts/MangaContext.tsx
@@ -3,20 +3,14 @@ import { ApiContext } from './ApiContext.tsx';
 import { Manga } from '../api/data-contracts.ts';
 import { V2 } from '../api/V2.ts';

-export const MangaContext = createContext<M>({
-    GetManga: () => Promise.reject(),
-});
+export const MangaContext = createContext<M>({ GetManga: () => Promise.reject() });
 const manga: Map<string, Manga> = new Map();
 const promises: Map<string, Promise<Manga | undefined>> = new Map();

 export default function MangaProvider({ children }: { children: ReactNode }) {
    const Api = useContext(ApiContext);

-    return (
-        <MangaContext value={{ GetManga: (k) => getManga(k, Api) }}>
-            {children}
-        </MangaContext>
-    );
+    return <MangaContext value={{ GetManga: (k) => getManga(k, Api) }}>{children}</MangaContext>;
 }

 function getManga(key: string, Api: V2): Promise<Manga | undefined> {
--- a/tranga-website/tsconfig.json
+++ b/tranga-website/tsconfig.json
@@ -1,7 +1,4 @@
 {
    "files": [],
-    "references": [
-        { "path": "./tsconfig.app.json" },
-        { "path": "./tsconfig.node.json" }
-    ]
+    "references": [{ "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" }]
 }
--- a/tranga-website/vite.config.ts
+++ b/tranga-website/vite.config.ts
@@ -2,7 +2,4 @@ import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';

 // https://vite.dev/config/
-export default defineConfig({
-    plugins: [react()],
-    server: { host: '127.0.0.1' },
-});
+export default defineConfig({ plugins: [react()], server: { host: '127.0.0.1' } });