Jobs List

tranga-website/src/App.tsx

@@ -10,21 +10,69 @@ import MangaList from "./Components/MangaList.tsx";
 import {MangaConnectorContext} from "./api/Contexts/MangaConnectorContext.tsx";
 import IMangaConnector from "./api/types/IMangaConnector.ts";
 import {GetAllConnectors} from "./api/MangaConnector.tsx";
+import JobsDrawer from "./Components/Jobs.tsx";
+import {MangaContext} from "./api/Contexts/MangaContext.tsx";
+import IManga from "./api/types/IManga.ts";
+import {GetMangaById} from "./api/Manga.tsx";
+import IChapter from "./api/types/IChapter.ts";
+import {GetChapterFromId} from "./api/Chapter.tsx";
+import {ChapterContext} from "./api/Contexts/ChapterContext.tsx";
 
 export default function App () {
 
     const [showSettings, setShowSettings] = useState<boolean>(false);
     const [showSearch, setShowSearch] = useState<boolean>(false);
+    const [showJobs, setShowJobs] = useState<boolean>(false);
     const [apiConnected, setApiConnected] = useState<boolean>(false);
 
     const apiUriStr = localStorage.getItem("apiUri") ?? window.location.href.substring(0, window.location.href.lastIndexOf("/"));
 
     const [apiUri, setApiUri] = useState<string>(apiUriStr);
+    const [mangas, setMangas] = useState<IManga[]>([]);
+    const [chapters, setChapters] = useState<IChapter[]>([]);
 
     useEffect(() => {
         localStorage.setItem("apiUri", apiUri);
     }, [apiUri]);
 
+    const [mangaPromises, setMangaPromises] = useState(new Map<string, Promise<IManga | undefined>>());
+    const GetManga = (mangaId: string) : Promise<IManga | undefined> => {
+        const promise = mangaPromises.get(mangaId);
+        if(promise) return promise;
+        const p = new Promise<IManga | undefined>((resolve, reject) => {
+            let ret = mangas?.find(m => m.mangaId == mangaId);
+            if (ret) resolve(ret);
+
+            console.log(`Fetching manga ${mangaId}`);
+            GetMangaById(apiUri, mangaId).then(manga => {
+                if(manga && mangas?.find(m => m.mangaId == mangaId) === undefined)
+                    setMangas([...mangas, manga]);
+                resolve(manga);
+            }).catch(reject);
+        });
+        setMangaPromises(mangaPromises.set(mangaId, p));
+        return p;
+    }
+
+    const [chapterPromises, setChapterPromises] = useState(new Map<string, Promise<IChapter | undefined>>());
+    const GetChapter = (chapterId: string) : Promise<IChapter | undefined> => {
+        const promise = chapterPromises.get(chapterId);
+        if(promise) return promise;
+        const p = new Promise<IChapter | undefined>((resolve, reject) => {
+            let ret = chapters?.find(c => c.chapterId == chapterId);
+            if (ret) resolve(ret);
+
+            console.log(`Fetching chapter ${chapterId}`);
+            GetChapterFromId(apiUri, chapterId).then(chapter => {
+                if(chapter && chapters?.find(c => c.chapterId == chapterId) === undefined)
+                    setChapters([...chapters, chapter]);
+                resolve(chapter);
+            }).catch(reject);
+        });
+        setChapterPromises(chapterPromises.set(chapterId, p));
+        return p;
+    }
+
     const [mangaConnectors, setMangaConnectors] = useState<IMangaConnector[]>([]);
 
     useEffect(() => {
@@ -35,18 +83,24 @@ export default function App () {
     return (
         <ApiUriContext.Provider value={apiUri}>
             <MangaConnectorContext value={mangaConnectors}>
-                <Sheet className={"app"}>
-                    <Header>
-                        <Badge color={"danger"} invisible={apiConnected} badgeContent={"!"}>
-                            <Button onClick={() => setShowSettings(true)}>Settings</Button>
-                        </Badge>
-                    </Header>
-                    <Settings open={showSettings} setOpen={setShowSettings} setApiUri={setApiUri} setConnected={setApiConnected} />
-                    <Search open={showSearch} setOpen={setShowSearch} />
-                    <Sheet className={"app-content"}>
-                        <MangaList connected={apiConnected} setShowSearch={setShowSearch} />
-                    </Sheet>
-                </Sheet>
+                <MangaContext.Provider value={{mangas, GetManga}}>
+                    <ChapterContext.Provider value={{chapters, GetChapter}}>
+                        <Sheet className={"app"}>
+                            <Header>
+                                <Badge color={"danger"} invisible={apiConnected} badgeContent={"!"}>
+                                    <Button onClick={() => setShowSettings(true)}>Settings</Button>
+                                    <Button onClick={() => setShowJobs(true)}>Jobs</Button>
+                                </Badge>
+                            </Header>
+                            <Settings open={showSettings} setOpen={setShowSettings} setApiUri={setApiUri} setConnected={setApiConnected} />
+                            <Search open={showSearch} setOpen={setShowSearch} />
+                            <JobsDrawer open={showJobs} connected={apiConnected} setOpen={setShowJobs} />
+                            <Sheet className={"app-content"}>
+                                <MangaList connected={apiConnected} setShowSearch={setShowSearch} />
+                            </Sheet>
+                        </Sheet>
+                    </ChapterContext.Provider>
+                </MangaContext.Provider>
             </MangaConnectorContext>
         </ApiUriContext.Provider>
     );

tranga-website/src/Components/Chapter.tsx

@@ -0,0 +1,61 @@
+import {ReactElement, useContext, useState} from "react";
+import IChapter from "../api/types/IChapter.ts";
+import {Card, CardActions, CardContent, Chip, Link, Stack, Tooltip, Typography} from "@mui/joy";
+import {MangaFromId} from "./Manga.tsx";
+import {ChapterContext} from "../api/Contexts/ChapterContext.tsx";
+import { Description } from "@mui/icons-material";
+
+export function ChapterFromId({chapterId, children} : { chapterId: string, children?: ReactElement<any, any> | ReactElement<any, any>[] | undefined }){
+    const chapterContext = useContext(ChapterContext);
+
+    const [chapter, setChapter] = useState<IChapter | undefined>(undefined);
+    chapterContext.GetChapter(chapterId).then(setChapter);
+
+    return (
+        chapter === undefined ?
+                <Card>
+                    <CardContent>
+                        <Stack direction={"row"} alignItems="center" spacing={2}>
+                            <Card>
+
+                            </Card>
+                            <Card>
+                                <CardContent>
+
+                                </CardContent>
+                                <CardActions>
+                                    {children}
+                                </CardActions>
+                            </Card>
+                        </Stack>
+                    </CardContent>
+                </Card>
+            :
+            <Chapter chapter={chapter}>{children}</Chapter>
+    );
+}
+
+export function Chapter({chapter, children} : { chapter: IChapter, children?: ReactElement<any, any> | ReactElement<any, any>[] | undefined }){
+    return (
+        <Card>
+            <CardContent>
+                <Stack direction={"row"} alignItems="center" spacing={2}>
+                    <MangaFromId mangaId={chapter.parentMangaId} />
+                    <Card>
+                        <CardContent>
+                                <Link level={"title-lg"} href={chapter.url}>{chapter.title}</Link>
+                                <Typography>Vol. <Chip>{chapter.volumeNumber}</Chip></Typography>
+                                <Typography>Ch. <Chip>{chapter.chapterNumber}</Chip></Typography>
+                                <Tooltip title={chapter.fileName}>
+                                    <Description />
+                                </Tooltip>
+                        </CardContent>
+                        <CardActions>
+                            {children}
+                        </CardActions>
+                    </Card>
+                </Stack>
+            </CardContent>
+        </Card>
+    );
+}

tranga-website/src/Components/Jobs.tsx

@@ -0,0 +1,163 @@
+import {
+    Card,
+    CardContent,
+    Chip,
+    DialogContent, DialogTitle,
+    Drawer,
+    Input,
+    Option,
+    Select,
+    Stack,
+    Tooltip,
+    Typography
+} from "@mui/joy";
+import {GetAllJobs} from "../api/Job.tsx";
+import * as React from "react";
+import {useCallback, useContext, useEffect, useState} from "react";
+import {ApiUriContext} from "../api/fetchApi.tsx";
+import IJob, {JobState, JobType} from "../api/types/Jobs/IJob.ts";
+import IJobWithMangaId from "../api/types/Jobs/IJobWithMangaId.ts";
+import {MangaFromId} from "./Manga.tsx";
+import ModalClose from "@mui/joy/ModalClose";
+import IJobWithChapterId from "../api/types/Jobs/IJobWithChapterId.tsx";
+import {ChapterFromId} from "./Chapter.tsx";
+
+export default function JobsDrawer({open, connected, setOpen} : {open: boolean, connected: boolean, setOpen:React.Dispatch<React.SetStateAction<boolean>>}) {
+    const apiUri = useContext(ApiUriContext);
+
+    const [allJobs, setAllJobs] = useState<IJob[]>([]);
+
+    const [filterState, setFilterState] = useState<string|null>(null);
+    const [filterType, setFilterType] = useState<string|null>(null);
+
+    const pageSize = 10;
+    const [page, setPage] = useState(1);
+
+    const updateDisplayJobs = useCallback(() => {
+        if(!connected)
+            return;
+        GetAllJobs(apiUri).then(setAllJobs);
+    }, [apiUri, connected]);
+
+    const timerRef = React.useRef<ReturnType<typeof setInterval>>(undefined);
+    const updateTimer = useCallback(() => {
+        if(!connected){
+            clearTimeout(timerRef.current);
+            return;
+        }else{
+            if(timerRef.current === undefined) {
+                console.log("Added timer!");
+                updateDisplayJobs();
+                timerRef.current = setInterval(() => {
+                    updateDisplayJobs();
+                }, 2000);
+            }
+        }
+    }, [open, connected]);
+
+    const FilterJobs = (jobs? : IJob[] | undefined) : IJob[] => {
+        if(jobs === undefined)
+            return [];
+        let ret = jobs;
+        if(filterState != undefined)
+            ret = ret.filter(job => job.state == filterState);
+        if(filterType != undefined)
+            ret = ret.filter(job => job.jobType == filterType);
+        return ret.sort((a, b) => new Date(a.nextExecution).getDate() - new Date(b.nextExecution).getDate());
+    }
+
+    const handleChangeState = (
+        _: React.SyntheticEvent | null,
+        newValue: string | null,
+    ) => {
+        setFilterState(newValue);
+        setPage(1);
+    };
+    const handleChangeType = (
+        _: React.SyntheticEvent | null,
+        newValue: string | null,
+    ) => {
+        setFilterType(newValue);
+        setPage(1);
+    };
+
+    useEffect(() => {
+        updateTimer();
+    }, [open, connected]);
+
+    return (
+        <Drawer size={"lg"} anchor={"left"} open={open} onClose={() => setOpen(false)}>
+            <ModalClose />
+            <DialogTitle><Typography level={"h2"}>Jobs</Typography></DialogTitle>
+            <Stack direction={"row"} spacing={2}>
+                <Select placeholder={"State"} value={filterState} onChange={handleChangeState} startDecorator={
+                    <Typography>State</Typography>
+                }>
+                    <Option value={null}>None</Option>
+                    {Object.keys(JobState).map((state) => <Option value={state}>{state}</Option>)}
+                </Select>
+                <Select placeholder={"Type"} value={filterType} onChange={handleChangeType} startDecorator={
+                    <Typography>Type</Typography>
+                }>
+                    <Option value={null}>None</Option>
+                    {Object.keys(JobType).map((type) => <Option value={type}>{type}</Option>)}
+                </Select>
+                <Input type={"number"}
+                       value={page}
+                       onChange={(e) => setPage(parseInt(e.target.value))}
+                       slotProps={{input: { min: 1, max: Math.ceil(FilterJobs(allJobs).length / pageSize)}}}
+                       startDecorator={<Typography>Page</Typography>}
+                        endDecorator={<Typography>/{Math.ceil(FilterJobs(allJobs).length / pageSize)}</Typography>}/>
+            </Stack>
+            <DialogContent>
+                <Stack direction={"column"} spacing={1}>
+                    {FilterJobs(allJobs).splice(pageSize*(page-1), pageSize).map(job => <FormatJob key={job.jobId} job={job}/>)}
+                </Stack>
+            </DialogContent>
+        </Drawer>
+    )
+}
+
+function FormatJob({job} : {job: IJob}) {
+
+    return (
+        <Card variant={"solid"}>
+            <CardContent>
+                <Tooltip title={job.jobId}>
+                    <Typography level={"title-lg"}>{job.jobType}</Typography>
+                </Tooltip>
+            </CardContent>
+            <CardContent>
+                <Stack direction={"row"} spacing={1}>
+                    <Tooltip title={"Last Execution"}>
+                        <Chip>{new Date(job.lastExecution).toLocaleString()}</Chip>
+                    </Tooltip>
+                    <Tooltip title={"Next Execution"}>
+                        <Chip>{new Date(job.nextExecution).toLocaleString()}</Chip>
+                    </Tooltip>
+                    <Chip>{job.state}</Chip>
+                </Stack>
+            </CardContent>
+            <CardContent>
+                {ExtraContent(job)}
+            </CardContent>
+        </Card>
+    );
+}
+
+function ExtraContent(job: IJob){
+    switch(job.jobType){
+        case JobType.DownloadAvailableChaptersJob:
+        case JobType.DownloadMangaCoverJob:
+        case JobType.RetrieveChaptersJob:
+        case JobType.UpdateChaptersDownloadedJob:
+        case JobType.UpdateCoverJob:
+        case JobType.MoveMangaLibraryJob:
+            return <MangaFromId key={(job as IJobWithMangaId).mangaId} mangaId={(job as IJobWithMangaId).mangaId} />;
+        case JobType.DownloadSingleChapterJob:
+        case JobType.UpdateSingleChapterDownloadedJob:
+            return <ChapterFromId key={(job as IJobWithChapterId).chapterId} chapterId={(job as IJobWithChapterId).chapterId} />
+        default:
+            return null;
+    }
+}

tranga-website/src/Components/Manga.tsx

@@ -1,12 +1,13 @@
 import {Badge, Box, Card, CardContent, CardCover, Skeleton, Typography,} from "@mui/joy";
 import IManga from "../api/types/IManga.ts";
 import {CSSProperties, ReactElement, useCallback, useContext, useEffect, useRef, useState} from "react";
-import {GetMangaById, GetMangaCoverImageUrl} from "../api/Manga.tsx";
+import {GetMangaCoverImageUrl} from "../api/Manga.tsx";
 import {ApiUriContext, getData} from "../api/fetchApi.tsx";
 import {MangaReleaseStatus, ReleaseStatusToPalette} from "../api/types/EnumMangaReleaseStatus.ts";
 import {SxProps} from "@mui/joy/styles/types";
 import MangaPopup from "./MangaPopup.tsx";
 import {MangaConnectorContext} from "../api/Contexts/MangaConnectorContext.tsx";
+import {MangaContext} from "../api/Contexts/MangaContext.tsx";
 
 export const CardWidth = 190;
 export const CardHeight = 300;
@@ -23,21 +24,13 @@ const coverCss : CSSProperties = {
 }
 
 export function MangaFromId({mangaId, children} : { mangaId: string, children?: ReactElement<any, any> | ReactElement<any, any>[] | undefined }){
-    const [manga, setManga] = useState<IManga>();
+    const mangaContext = useContext(MangaContext);
 
-    const apiUri = useContext(ApiUriContext);
-
-    const loadManga = useCallback(() => {
-        GetMangaById(apiUri, mangaId).then(setManga);
-    },[apiUri, mangaId]);
-
-    useEffect(() => {
-        loadManga();
-    }, []);
+    const [manga, setManga] = useState<IManga | undefined>(undefined);
+    mangaContext.GetManga(mangaId).then(setManga);
 
     return (
-        <>
-            {manga === undefined ?
+        manga === undefined ?
                 <Badge sx={{margin:"8px !important"}} badgeContent={<Skeleton><img width={"24pt"} height={"24pt"} src={"/blahaj.png"} /></Skeleton>} color={ReleaseStatusToPalette(MangaReleaseStatus.Completed)} size={"lg"}>
                     <Card sx={{height:"fit-content",width:"fit-content"}}>
                         <CardCover>
@@ -51,7 +44,7 @@ export function MangaFromId({mangaId, children} : { mangaId: string, children?:
                             <Box sx={coverSx}>
                                 <Typography level={"h3"} sx={{height:"min-content",width:"fit-content",color:"white",margin:"0 0 0 10px"}}>
                                     <Skeleton loading={true} animation={"wave"}>
-                                        {"x ".repeat(Math.random()*25+5)}
+                                        {mangaId.split("").splice(0,mangaId.length/2).join(" ")}
                                     </Skeleton>
                                 </Typography>
                             </Box>
@@ -59,8 +52,7 @@ export function MangaFromId({mangaId, children} : { mangaId: string, children?:
                     </Card>
                 </Badge>
                  :
-                <Manga manga={manga} children={children} /> }
-        </>
+                <Manga manga={manga} children={children} />
     );
 }
 
@@ -91,7 +83,8 @@ export function Manga({manga: manga, children} : { manga: IManga, children?: Rea
 
     const interactiveElements = ["button", "input", "textarea", "a", "select", "option", "li"];
 
-    const mangaName = manga.name.length > 30 ? manga.name.substring(0, 27) + "..." : manga.name;
+    const maxLength = 50;
+    const mangaName = manga.name.length > maxLength ? manga.name.substring(0, maxLength-3) + "..." : manga.name;
 
     return (
         <Badge sx={{margin:"8px !important"}} badgeContent={mangaConnector ? <img width={"24pt"} height={"24pt"} src={mangaConnector.iconUrl} /> : manga.mangaConnectorName} color={ReleaseStatusToPalette(manga.releaseStatus)} size={"lg"}>

tranga-website/src/Components/Settings/AprilFoolsMode.tsx

@@ -1,5 +1,5 @@
 import IBackendSettings from "../../api/types/IBackendSettings.ts";
-import {useCallback, useContext, useState} from "react";
+import {useCallback, useContext, useEffect, useState} from "react";
 import {ApiUriContext} from "../../api/fetchApi.tsx";
 import {
     Accordion,
@@ -10,26 +10,32 @@ import {
     Typography
 } from "@mui/joy";
 import * as React from "react";
-import {UpdateAprilFoolsToggle} from "../../api/BackendSettings.tsx";
+import {GetAprilFoolsToggle, UpdateAprilFoolsToggle} from "../../api/BackendSettings.tsx";
 
 export default function ImageProcessing({backendSettings}: {backendSettings?: IBackendSettings}) {
     const apiUri = useContext(ApiUriContext);
 
     const [loading, setLoading] = useState<boolean>(false);
     const [color, setColor] = useState<ColorPaletteProp>("neutral");
+    const [value, setValue] = useState<boolean>(backendSettings?.aprilFoolsMode??false);
 
     const timerRef = React.useRef<ReturnType<typeof setTimeout>>(undefined);
     const valueChanged = (e : React.ChangeEvent<HTMLInputElement>) => {
         setColor("warning");
         clearTimeout(timerRef.current);
-        console.log(e);
         timerRef.current = setTimeout(() => {
             UpdateAprilFoolsMode(e.target.checked);
         }, 1000);
     }
 
-    const UpdateAprilFoolsMode = useCallback((value: boolean) => {
-        UpdateAprilFoolsToggle(apiUri, value)
+    useEffect(() => {
+        setValue(backendSettings?.aprilFoolsMode??false);
+    }, [backendSettings]);
+
+    const UpdateAprilFoolsMode = useCallback((val: boolean) => {
+        UpdateAprilFoolsToggle(apiUri, val)
+            .then(() => GetAprilFoolsToggle(apiUri))
+            .then((val) => setValue(val))
             .then(() => setColor("success"))
             .catch(() => setColor("danger"))
             .finally(() => setLoading(false));
@@ -43,7 +49,7 @@ export default function ImageProcessing({backendSettings}: {backendSettings?: IB
                     <Switch disabled={backendSettings === undefined || loading}
                             onChange={valueChanged}
                             color={color}
-                            defaultChecked={backendSettings?.aprilFoolsMode} />
+                            checked={value} />
                 }>
                     Toggle
                 </Typography>

tranga-website/src/Components/Settings/ImageProcessing.tsx

@@ -1,113 +1,101 @@
 import IBackendSettings from "../../api/types/IBackendSettings.ts";
-import {useCallback, useContext, useState} from "react";
+import {ChangeEvent, useCallback, useContext, useEffect, useRef, useState} from "react";
 import {ApiUriContext} from "../../api/fetchApi.tsx";
 import {
     Accordion,
     AccordionDetails,
-    AccordionSummary,
-    ColorPaletteProp,
-    Input,
-    Switch,
-    Typography
+    AccordionSummary, ColorPaletteProp, Input, Stack, Switch, Typography,
 } from "@mui/joy";
-import * as React from "react";
-import {UpdateBWImageToggle, UpdateImageCompressionValue} from "../../api/BackendSettings.tsx";
+import {
+    GetBWImageToggle,
+    GetImageCompressionValue,
+    UpdateBWImageToggle,
+    UpdateImageCompressionValue
+} from "../../api/BackendSettings.tsx";
 
-export default function ImageProcessing({backendSettings}: {backendSettings?: IBackendSettings}) {
+export default function ImageProcessing ({backendSettings}: { backendSettings?: IBackendSettings }) {
     const apiUri = useContext(ApiUriContext);
 
-    const [loadingBw, setLoadingBw] = useState<boolean>(false);
-    const [bwInputColor, setBwInputcolor] = useState<ColorPaletteProp>("neutral");
+    useEffect(() => {
+        setBwImages(backendSettings?.bwImages??false);
+        setCompression(backendSettings?.compression??100);
+    }, [backendSettings]);
 
-    const timerRefBw = React.useRef<ReturnType<typeof setTimeout>>(undefined);
-    const bwChanged = (e : React.ChangeEvent<HTMLInputElement>) => {
-        setBwInputcolor("warning");
-        clearTimeout(timerRefBw.current);
-        console.log(e);
-        timerRefBw.current = setTimeout(() => {
-            UpdateBw(e.target.checked);
+    const [bwImages, setBwImages] = useState<boolean>(backendSettings?.bwImages??false);
+    const [bwImagesLoading, setBwImagesLoading] = useState(false);
+    const [bwImagesColor, setBwImagesColor] = useState<ColorPaletteProp>("neutral");
+    const bwTimerRef = useRef<ReturnType<typeof setTimeout>>(undefined);
+    const bwValueChanged = (e : ChangeEvent<HTMLInputElement>) => {
+        setBwImages(e.target.checked);
+        setBwImagesColor("warning");
+        clearTimeout(bwTimerRef.current);
+        bwTimerRef.current = setTimeout(() => {
+            UpdateBwImages(e.target.checked);
         }, 1000);
     }
+    const UpdateBwImages = useCallback((val : boolean) => {
+        setBwImagesLoading(true);
+        UpdateBWImageToggle(apiUri, val)
+            .then(() => GetBWImageToggle(apiUri))
+            .then(setBwImages)
+            .then(() => setBwImagesColor("success"))
+            .catch(() => setBwImagesColor("danger"))
+            .finally(() => setBwImagesLoading(false));
+    },[apiUri]);
 
-    const UpdateBw = useCallback((value: boolean) => {
-        UpdateBWImageToggle(apiUri, value)
-            .then(() => setBwInputcolor("success"))
-            .catch(() => setBwInputcolor("danger"))
-            .finally(() => setLoadingBw(false));
-    }, [apiUri]);
-
-    const [loadingCompression, setLoadingCompression] = useState<boolean>(false);
-    const [compressionInputColor, setCompressionInputColor] = useState<ColorPaletteProp>("neutral");
-    const [compressionEnabled, setCompressionEnabled] = useState<boolean>((backendSettings?.compression??100) < 100);
-    const [compressionValue, setCompressionValue] = useState<number|undefined>(backendSettings?.compression);
-
-    const timerRefCompression = React.useRef<ReturnType<typeof setTimeout>>(undefined);
-    const compressionLevelChanged = (e : React.ChangeEvent<HTMLInputElement>) => {
-        setCompressionInputColor("warning");
-        setCompressionValue(Number.parseInt(e.target.value));
-        clearTimeout(timerRefCompression.current);
-
-        console.log(e);
-        timerRefCompression.current = setTimeout(() => {
-            UpdateCompressionLevel(Number.parseInt(e.target.value));
+    const [compression, setCompression] = useState<number>(backendSettings?.compression??100);
+    const [compressionLoading, setCompressionLoading] = useState(false);
+    const [compressionColor, setCompressionColor] = useState<ColorPaletteProp>("neutral");
+    const compressionTimerRef = useRef<ReturnType<typeof setTimeout>>(undefined);
+    const compressionCheckedChanged = (e : ChangeEvent<HTMLInputElement>) => {
+        setCompressionColor("warning");
+        if(!e.target.checked)
+            setCompression(100);
+        else
+            setCompression(50);
+        clearTimeout(compressionTimerRef.current);
+        bwTimerRef.current = setTimeout(() => {
+            UpdateImageCompression(e.target.checked ? 50 : 100);
         }, 1000);
     }
-
-    const compressionEnableChanged = (e : React.ChangeEvent<HTMLInputElement>) => {
-        setCompressionInputColor("warning");
-        setCompressionEnabled(e.target.checked);
-        clearTimeout(timerRefCompression.current);
-        timerRefCompression.current = setTimeout(() => {
-            UpdateCompressionLevel(e.target.checked ? compressionValue! : 100);
+    const compressionValueChanged = (e : ChangeEvent<HTMLInputElement>) => {
+        setCompressionColor("warning");
+        setCompression(parseInt(e.target.value));
+        clearTimeout(compressionTimerRef.current);
+        bwTimerRef.current = setTimeout(() => {
+            UpdateImageCompression(parseInt(e.target.value));
         }, 1000);
     }
-
-    const UpdateCompressionLevel = useCallback((value: number)=> {
-        setLoadingCompression(true);
-        UpdateImageCompressionValue(apiUri, value)
-            .then(() => {
-                setCompressionInputColor("success");
-                setCompressionValue(value);
-            })
-            .catch(() => setCompressionInputColor("danger"))
-            .finally(() => setLoadingCompression(false));
-    }, [apiUri]);
+    const UpdateImageCompression = useCallback((val : number) => {
+        setCompressionLoading(true);
+        UpdateImageCompressionValue(apiUri, val)
+            .then(() => GetImageCompressionValue(apiUri))
+            .then(setCompression)
+            .then(() => setCompressionColor("success"))
+            .catch(() => setCompressionColor("danger"))
+            .finally(() => setCompressionLoading(false));
+    },[apiUri]);
 
     return (
         <Accordion>
             <AccordionSummary>Image Processing</AccordionSummary>
             <AccordionDetails>
-                <Typography endDecorator={
-                    <Switch disabled={backendSettings === undefined || loadingBw}
-                            onChange={bwChanged}
-                            color={bwInputColor}
-                            defaultChecked={backendSettings?.bwImages} />
-                }>
-                    Black and White Images
-                </Typography>
-                <Typography endDecorator={
-                    <Switch disabled={backendSettings === undefined || loadingCompression}
-                            onChange={compressionEnableChanged}
-                            color={compressionInputColor}
-                            defaultChecked={compressionEnabled} endDecorator={
-                        <Input
-                            defaultValue={backendSettings?.compression}
-                            disabled={!compressionEnabled || loadingCompression}
-                            onChange={compressionLevelChanged}
-                            color={compressionInputColor}
-                            onKeyDown={(e) => {
-                                if(e.key === "Enter") {
-                                    clearTimeout(timerRefCompression.current);
-                                    // @ts-ignore
-                                    UpdateCompressionLevel(Number.parseInt(e.target.value));
-                                }
-                            }}
-                            sx={{width:"70px"}}
-                        />
-                    } />
-                }>
-                    Image Compression
-                </Typography>
+                <Stack>
+                    <Typography endDecorator={
+                        <Switch disabled={backendSettings === undefined || bwImagesLoading}
+                                onChange={bwValueChanged}
+                                color={bwImagesColor}
+                                checked={bwImages} />
+                    }>B/W Images</Typography>
+                    <Typography endDecorator={
+                        <Input type={"number"} value={compression} onChange={compressionValueChanged} startDecorator={
+                            <Switch disabled={backendSettings === undefined || compressionLoading}
+                                    onChange={compressionCheckedChanged}
+                                    color={compressionColor}
+                                    checked={compression < 100} />
+                        } />
+                    }>Compression</Typography>
+                </Stack>
             </AccordionDetails>
         </Accordion>
     );

tranga-website/src/Components/Settings/UserAgent.tsx

@@ -7,17 +7,18 @@ import {
     ColorPaletteProp,
     Input
 } from "@mui/joy";
-import {KeyboardEventHandler, useCallback, useContext, useState} from "react";
+import {KeyboardEventHandler, useCallback, useContext, useEffect, useState} from "react";
 import {ApiUriContext} from "../../api/fetchApi.tsx";
-import {ResetUserAgent, UpdateUserAgent} from "../../api/BackendSettings.tsx";
+import {GetUserAgent, ResetUserAgent, UpdateUserAgent} from "../../api/BackendSettings.tsx";
 
 export default function UserAgent({backendSettings}: {backendSettings?: IBackendSettings}) {
     const apiUri = useContext(ApiUriContext);
     const [loading, setLoading] = useState<boolean>(false);
-    const [value, setValue] = useState<string>("");
+    const [value, setValue] = useState<string>(backendSettings?.userAgent??"");
     const [color, setColor] = useState<ColorPaletteProp>("neutral");
 
     const keyDown : KeyboardEventHandler<HTMLInputElement> = useCallback((e) => {
+        if(value === undefined) return;
         if(e.key === "Enter") {
             setLoading(true);
             UpdateUserAgent(apiUri, value)
@@ -25,26 +26,32 @@ export default function UserAgent({backendSettings}: {backendSettings?: IBackend
                 .catch(() => setColor("danger"))
                 .finally(() => setLoading(false));
         }
-    }, [apiUri])
+    }, [apiUri, value])
 
     const Reset = useCallback(() => {
         setLoading(true);
         ResetUserAgent(apiUri)
+            .then(() => GetUserAgent(apiUri))
+            .then((val) => setValue(val))
             .then(() => setColor("success"))
             .catch(() => setColor("danger"))
             .finally(() => setLoading(false));
     }, [apiUri]);
 
+    useEffect(() => {
+        setValue(backendSettings?.userAgent??"");
+    }, [backendSettings]);
+
     return (
         <Accordion>
             <AccordionSummary>UserAgent</AccordionSummary>
             <AccordionDetails>
                 <Input disabled={backendSettings === undefined || loading}
-                        placeholder={"UserAgent"}
-                        defaultValue={backendSettings?.userAgent}
-                        onKeyDown={keyDown}
-                        onChange={e => setValue(e.target.value)}
-                        color={color}
+                       placeholder={"UserAgent"}
+                       value={value}
+                       onKeyDown={keyDown}
+                       onChange={e => setValue(e.target.value)}
+                       color={color}
                        endDecorator={<Button onClick={Reset} loading={loading}>Reset</Button>}
                 />
             </AccordionDetails>

tranga-website/src/Settings.tsx

@@ -84,7 +84,7 @@ export default function Settings({open, setOpen, setApiUri, setConnected}:{open:
     }, [checking]);
 
     return (
-        <Drawer size={"md"} open={open} onClose={() => setOpen(false)}>
+        <Drawer size={"lg"} open={open} onClose={() => setOpen(false)}>
             <ModalClose />
             <DialogTitle>Settings</DialogTitle>
             <DialogContent>

tranga-website/src/api/Contexts/ChapterContext.tsx

@@ -0,0 +1,9 @@
+import {createContext} from "react";
+import IChapter from "../types/IChapter.ts";
+
+export const ChapterContext = createContext<{chapters: IChapter[], GetChapter: (chapterId: string) => Promise<IChapter | undefined>}>(
+    {
+        chapters : [],
+        GetChapter: _ => Promise.resolve(undefined)
+    }
+);

tranga-website/src/api/Contexts/MangaContext.tsx

@@ -0,0 +1,9 @@
+import {createContext} from "react";
+import IManga, {DefaultManga} from "../types/IManga.ts";
+
+export const MangaContext = createContext<{mangas: IManga[], GetManga: (mangaId: string) => Promise<IManga | undefined>}>(
+    {
+        mangas : [],
+        GetManga: _ => Promise.resolve(DefaultManga)
+    }
+);