@mui/joy

2025-09-11 04:18:19 +02:00 · 2025-04-01 04:13:50 +02:00
parent 48b669dc07
commit 6b10aa8926
125 changed files with 6059 additions and 329 deletions
--- a/tranga-website/.gitignore
+++ b/tranga-website/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/tranga-website/README.md
+++ b/tranga-website/README.md
@@ -0,0 +1,54 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default tseslint.config({
+  extends: [
+    // Remove ...tseslint.configs.recommended and replace with this
+    ...tseslint.configs.recommendedTypeChecked,
+    // Alternatively, use this for stricter rules
+    ...tseslint.configs.strictTypeChecked,
+    // Optionally, add this for stylistic rules
+    ...tseslint.configs.stylisticTypeChecked,
+  ],
+  languageOptions: {
+    // other options...
+    parserOptions: {
+      project: ['./tsconfig.node.json', './tsconfig.app.json'],
+      tsconfigRootDir: import.meta.dirname,
+    },
+  },
+})
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default tseslint.config({
+  plugins: {
+    // Add the react-x and react-dom plugins
+    'react-x': reactX,
+    'react-dom': reactDom,
+  },
+  rules: {
+    // other rules...
+    // Enable its recommended typescript rules
+    ...reactX.configs['recommended-typescript'].rules,
+    ...reactDom.configs.recommended.rules,
+  },
+})
+```
--- a/tranga-website/eslint.config.js
+++ b/tranga-website/eslint.config.js
@@ -0,0 +1,28 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+)
--- a/tranga-website/index.html
+++ b/tranga-website/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
--- a/tranga-website/package-lock.json
+++ b/tranga-website/package-lock.json
--- a/tranga-website/package.json
+++ b/tranga-website/package.json
@@ -0,0 +1,34 @@
+{
+  "name": "tranga-website",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@fontsource/inter": "^5.2.5",
+    "@mui/icons-material": "^7.0.1",
+    "@mui/joy": "^5.0.0-beta.52",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.21.0",
+    "@types/react": "^19.0.10",
+    "@types/react-dom": "^19.0.4",
+    "@vitejs/plugin-react": "^4.3.4",
+    "eslint": "^9.21.0",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint-plugin-react-refresh": "^0.4.19",
+    "globals": "^15.15.0",
+    "typescript": "~5.7.2",
+    "typescript-eslint": "^8.24.1",
+    "vite": "^6.2.0"
+  }
+}
--- a/tranga-website/public/blahaj.png
+++ b/tranga-website/public/blahaj.png
--- a/tranga-website/src/App.css
+++ b/tranga-website/src/App.css
@@ -0,0 +1,15 @@
+.app {
+  position: absolute;
+  height: 100%;
+  top: 0;
+  width: 100%;
+  left: 0;
+}
+
+.app-content {
+  position: absolute;
+  height: calc(100% - 60px);
+  top: 60px;
+  width: 100%;
+  left: 0;
+}
--- a/tranga-website/src/App.tsx
+++ b/tranga-website/src/App.tsx
@@ -0,0 +1,31 @@
+import Sheet from '@mui/joy/Sheet';
+import './App.css'
+import Settings from "./Settings.tsx";
+import Header from "./Header.tsx";
+import {Button} from "@mui/joy";
+import {useState} from "react";
+import {ApiUriContext} from "./api/fetchApi.tsx";
+import Search from './Components/Search.tsx';
+
+export default function App () {
+
+    const [showSettings, setShowSettings] = useState<boolean>(false);
+    const [showSearch, setShowSearch] = useState<boolean>(false);
+
+    const [apiUri, setApiUri] = useState<string>(window.location.href.substring(0, window.location.href.lastIndexOf("/")));
+
+    return (
+        <ApiUriContext.Provider value={apiUri}>
+            <Sheet className={"app"}>
+                <Header>
+                    <Button onClick={() => setShowSettings(true)}>Settings</Button>
+                    <Button onClick={() => setShowSearch(true)}>Search</Button>
+                </Header>
+                <Settings open={showSettings} setOpen={setShowSettings} setApiUri={setApiUri}/>
+                <Sheet className={"app-content"}>
+                    <Search open={showSearch} setOpen={setShowSearch} />
+                </Sheet>
+            </Sheet>
+        </ApiUriContext.Provider>
+    );
+}
--- a/tranga-website/src/Components/AuthorTag.tsx
+++ b/tranga-website/src/Components/AuthorTag.tsx
@@ -0,0 +1,23 @@
+import {Chip, ColorPaletteProp, Skeleton} from "@mui/joy";
+import {useContext, useEffect, useState} from "react";
+import {ApiUriContext} from "../api/fetchApi.tsx";
+import IAuthor from "../api/types/IAuthor.ts";
+import {GetAuthor} from "../api/Query.tsx";
+
+export default function AuthorTag({authorId, color} : { authorId: string | undefined, color?: ColorPaletteProp }) {
+    const useAuthor = authorId ?? "AuthorId";
+    const apiUri = useContext(ApiUriContext);
+
+    const [author, setAuthor] = useState<IAuthor>();
+    const [loading, setLoading] = useState<boolean>(true);
+
+    useEffect(() => {
+        GetAuthor(apiUri, useAuthor).then(setAuthor).finally(() => setLoading(false));
+    }, [authorId]);
+
+    return (
+        <Chip variant={"outlined"} size={"md"} color={color??"primary"}>
+            <Skeleton variant={"text"} loading={loading}>{author?.authorName ?? "Load Failed"}</Skeleton>
+        </Chip>
+    );
+}
--- a/tranga-website/src/Components/LinkTag.tsx
+++ b/tranga-website/src/Components/LinkTag.tsx
@@ -0,0 +1,25 @@
+import {Chip, Skeleton, Link, ColorPaletteProp} from "@mui/joy";
+import {useContext, useEffect, useState} from "react";
+import {ApiUriContext} from "../api/fetchApi.tsx";
+import {GetLink} from "../api/Query.tsx";
+import ILink from "../api/types/ILink.ts";
+
+export default function LinkTag({linkId, color} : { linkId: string | undefined, color?: ColorPaletteProp }) {
+    const useLink = linkId ?? "LinkId";
+    const apiUri = useContext(ApiUriContext);
+
+    const [link, setLink] = useState<ILink>();
+    const [loading, setLoading] = useState<boolean>(true);
+
+    useEffect(() => {
+        GetLink(apiUri, useLink).then(setLink).finally(() => setLoading(false));
+    }, [linkId]);
+
+    return (
+        <Chip variant={"outlined"} size={"md"} color={color??"primary"}>
+            <Skeleton variant={"text"} loading={loading}>
+                <Link href={link?.linkUrl}>{link?.linkProvider??"Load Failed"}</Link>
+            </Skeleton>
+        </Chip>
+    );
+}
--- a/tranga-website/src/Components/Manga.tsx
+++ b/tranga-website/src/Components/Manga.tsx
@@ -0,0 +1,132 @@
+import {
+    Badge,
+    Box,
+    Card,
+    CardActions,
+    CardContent, CardCover,
+    Chip, CircularProgress,
+    Input,
+    Link,
+    Skeleton,
+    Stack,
+    Typography
+} from "@mui/joy";
+import IManga, {DefaultManga} from "../api/types/IManga.ts";
+import {ReactElement, useCallback, useContext, useEffect, useState} from "react";
+import {GetLatestChapterAvailable, GetMangaCoverImageUrl, SetIgnoreThreshold} from "../api/Manga.tsx";
+import {ApiUriContext} from "../api/fetchApi.tsx";
+import AuthorTag from "./AuthorTag.tsx";
+import LinkTag from "./LinkTag.tsx";
+import {ReleaseStatusToPalette} from "../api/types/EnumMangaReleaseStatus.ts";
+import IChapter from "../api/types/IChapter.ts";
+import MarkdownPreview from "@uiw/react-markdown-preview";
+import {SxProps} from "@mui/joy/styles/types";
+
+export function Manga({manga, children} : { manga: IManga | undefined, children?: ReactElement<any, any> | ReactElement<any, any>[] | undefined }) {
+    const useManga = manga ?? DefaultManga;
+
+    const apiUri = useContext(ApiUriContext);
+
+    const [expanded, setExpanded] = useState(false);
+
+    const [mangaMaxChapter, setMangaMaxChapter] = useState<IChapter>();
+    const [maxChapterLoading, setMaxChapterLoading] = useState<boolean>(true);
+    const loadMaxChapter = useCallback(() => {
+        setMaxChapterLoading(true);
+        GetLatestChapterAvailable(apiUri, useManga.mangaId)
+            .then(setMangaMaxChapter)
+            .finally(() => setMaxChapterLoading(false));
+    }, [useManga, apiUri]);
+
+    const [updatingThreshold, setUpdatingThreshold] = useState<boolean>(false);
+    const updateIgnoreThreshhold = useCallback((value: number) => {
+        setUpdatingThreshold(true);
+        SetIgnoreThreshold(apiUri, useManga.mangaId, value).finally(() => setUpdatingThreshold(false));
+    },[useManga, apiUri])
+
+    useEffect(() => {
+        loadMaxChapter();
+    }, []);
+
+    const LoadMangaCover = useCallback((e : EventTarget & HTMLImageElement) => {
+        if(e.src != GetMangaCoverImageUrl(apiUri, useManga.mangaId, e))
+            e.src = GetMangaCoverImageUrl(apiUri, useManga.mangaId, e);
+    }, [useManga, apiUri])
+
+    const sideSx : SxProps = {
+        height: "400px",
+        width: "300px",
+        position: "relative",
+    }
+
+    const interactiveElements = ["button", "input", "textarea", "a"];
+
+    return (
+        <Badge badgeContent={useManga.mangaConnectorId} color={ReleaseStatusToPalette(useManga.releaseStatus)} size={"lg"}>
+            <Card sx={{height:"fit-content",width:"fit-content"}} onClick={(e) => {
+                const target = e.target as HTMLElement;
+                if(interactiveElements.find(x => x == target.localName) == undefined)
+                    setExpanded(!expanded)}
+            }>
+                <CardCover sx={{margin: "var(--Card-padding)"}}>
+                    <img style={{maxHeight:"100%",height:"400px",width:"300px"}} src="/blahaj.png" alt="Manga Cover"
+                         onLoad={(e) => LoadMangaCover(e.currentTarget)}
+                         onResize={(e) => LoadMangaCover(e.currentTarget)}/>
+                </CardCover>
+                <CardCover sx={{
+                    background:
+                        'linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0) 200px), linear-gradient(to bottom, rgba(0,0,0,0.8), rgba(0,0,0,0) 300px)',
+                }}/>
+                <CardContent sx={{display: "flex", alignItems: "center", flexFlow: "row nowrap"}}>
+                    <Box sx={sideSx}>
+                        <Link href={useManga.websiteUrl} level={"h1"} sx={{height:"min-content",width:"fit-content",color:"white",margin:"0 0 0 10px"}}>
+                            {useManga.name}
+                        </Link>
+                    </Box>
+                    {
+                        expanded ?
+                            <Box sx={sideSx}>
+                                <Stack direction={"row"} flexWrap={"wrap"} spacing={0.5}>
+                                    {useManga.authorIds.map(authorId => <AuthorTag key={authorId} authorId={authorId} color={"success"} />)}
+                                    {useManga.tags.map(tag => <Chip key={tag} variant={"outlined"} size={"md"} color={"primary"}>{tag}</Chip>)}
+                                    {useManga.linkIds.map(linkId => <LinkTag key={linkId} linkId={linkId} color={"danger"} />)}
+                                </Stack>
+                                <MarkdownPreview source={useManga.description} style={{backgroundColor: "transparent", color: "black"}} />
+                            </Box>
+                            : null
+                    }
+                </CardContent>
+                {
+                    expanded ?
+                        <CardActions sx={{justifyContent:"space-between"}}>
+                            <Input
+                                type={"number"}
+                                placeholder={"0.0"}
+                                startDecorator={
+                                <>
+                                    {
+                                        updatingThreshold ?
+                                            <CircularProgress color={"primary"} size={"sm"} />
+                                            : <Typography>Ch.</Typography>
+                                    }
+                                </>
+                                }
+                                endDecorator={
+                                    <Typography>
+                                        <Skeleton loading={maxChapterLoading}>
+                                            /{mangaMaxChapter?.chapterNumber??"Load Failed"}
+                                        </Skeleton>
+                                    </Typography>
+                                }
+                                sx={{width:"min-content"}}
+                                size={"md"}
+                                onChange={(e) => updateIgnoreThreshhold(e.currentTarget.valueAsNumber)}
+                            />
+                            {children}
+                        </CardActions>
+                        : null
+                }
+            </Card>
+        </Badge>
+    );
+}
--- a/tranga-website/src/Components/Search.tsx
+++ b/tranga-website/src/Components/Search.tsx
@@ -0,0 +1,142 @@
+import {
+    Avatar, Button, Chip,
+    Drawer,
+    Input,
+    ListItemDecorator,
+    Option,
+    Select,
+    SelectOption,
+    Skeleton, Stack,
+    Step,
+    StepIndicator,
+    Stepper, Typography
+} from "@mui/joy";
+import ModalClose from "@mui/joy/ModalClose";
+import IMangaConnector from "../api/types/IMangaConnector";
+import {useCallback, useContext, useEffect, useState} from "react";
+import {ApiUriContext} from "../api/fetchApi.tsx";
+import {GetAllConnectors} from "../api/MangaConnector.tsx";
+import IManga from "../api/types/IManga.ts";
+import {SearchNameOnConnector} from "../api/Search.tsx";
+import {Manga} from "./Manga.tsx";
+import Add from "@mui/icons-material/Add";
+import React from "react";
+import {CreateDownloadAvailableChaptersJob} from "../api/Job.tsx";
+
+export default function Search({open, setOpen}:{open:boolean, setOpen:React.Dispatch<React.SetStateAction<boolean>>}){
+
+    const [step, setStep] = useState<number>(1);
+
+    const apiUri = useContext(ApiUriContext);
+    const [mangaConnectors, setMangaConnectors] = useState<IMangaConnector[]>([]);
+    const [mangaConnectorsLoading, setMangaConnectorsLoading] = useState<boolean>(true);
+    const [selectedMangaConnector, setSelectedMangaConnector] = useState<IMangaConnector>();
+
+    useEffect(() => {
+        setMangaConnectorsLoading(true);
+        GetAllConnectors(apiUri).then(setMangaConnectors).finally(() => setMangaConnectorsLoading(false));
+    },[apiUri])
+
+    const [results, setResults] = useState<IManga[]>([]);
+    const [resultsLoading, setResultsLoading] = useState<boolean>(false);
+
+    const StartSearch = useCallback((mangaConnector : IMangaConnector | undefined, value: string)=>{
+        if(mangaConnector === undefined)
+            return;
+        setResults([]);
+        setResultsLoading(true);
+        SearchNameOnConnector(apiUri, mangaConnector.name, value).then(setResults).finally(() => setResultsLoading(false));
+    },[apiUri])
+
+    function renderValue(option: SelectOption<string> | null) {
+        if (!option) {
+            return null;
+        }
+
+        return (
+            <React.Fragment>
+                <ListItemDecorator>
+                    <Avatar size="sm" src={mangaConnectors.find((o) => o.name === option.value)?.iconUrl} />
+                </ListItemDecorator>
+                {option.label}
+            </React.Fragment>
+        );
+    }
+
+    return (
+        <Drawer size={"lg"} anchor={"right"} open={open} onClose={() => {
+            setStep(2);
+            setResults([]);
+            setOpen(false);
+        }}>
+            <ModalClose />
+            <Stepper orientation={"vertical"} sx={{ height: '100%', width: "calc(100% - 80px)", margin:"40px"}}>
+                <Step indicator={
+                    <StepIndicator variant="solid" color="primary">
+                        1
+                    </StepIndicator>}>
+                    <Skeleton loading={mangaConnectorsLoading}>
+                        <Select
+                            disabled={mangaConnectorsLoading || resultsLoading}
+                            placeholder={"Select Connector"}
+                            slotProps={{
+                                    listbox: {
+                                        sx: {
+                                            '--ListItemDecorator-size': '44px',
+                                        },
+                                    },
+                                }}
+                            sx={{ '--ListItemDecorator-size': '44px', minWidth: 240 }}
+                            renderValue={renderValue}
+                            onChange={(_e, newValue) => {
+                                setStep(2);
+                                setSelectedMangaConnector(mangaConnectors.find((o) => o.name === newValue));
+                            }}
+                            endDecorator={<Chip size={"sm"} color={"primary"}>{mangaConnectors.length}</Chip>}>
+                            {mangaConnectors?.map((connector: IMangaConnector) => ConnectorOption(connector))}
+                        </Select>
+                    </Skeleton>
+                </Step>
+                <Step indicator={
+                    <StepIndicator variant="solid" color="primary">
+                        2
+                    </StepIndicator>}>
+                    <Input disabled={step < 2 || resultsLoading} placeholder={"Name or Url " + (selectedMangaConnector ? selectedMangaConnector.baseUris[0] : "")} onKeyDown={(e) => {
+                        setStep(2);
+                        setResults([]);
+                        if(e.key === "Enter") {
+                            StartSearch(selectedMangaConnector, e.currentTarget.value);
+                        }
+                    }}/>
+                </Step>
+                <Step indicator={
+                    <StepIndicator variant="solid" color="primary">
+                        3
+                    </StepIndicator>}>
+                    <Typography>Results</Typography>
+                    <Skeleton loading={resultsLoading}>
+                        <Stack direction={"row"} spacing={1}>
+                            {results.map((result) =>
+                                <Manga key={result.mangaId} manga={result}>
+                                    <Button onClick={() => {
+                                        CreateDownloadAvailableChaptersJob(apiUri, result.mangaId, {localLibraryId: "",recurrenceTimeMs: 1000 * 60 * 60 * 3})
+                                    }} endDecorator={<Add />}>Watch</Button>
+                                </Manga>)}
+                        </Stack>
+                    </Skeleton>
+                </Step>
+            </Stepper>
+        </Drawer>
+    );
+}
+
+function ConnectorOption(connector: IMangaConnector){
+    return (
+        <Option key={connector.name} value={connector.name} sx={{position: "relative"}}>
+            <ListItemDecorator>
+                <Avatar size="sm" src={connector.iconUrl} />
+            </ListItemDecorator>
+            {connector.name}
+        </Option>
+    );
+}
--- a/tranga-website/src/Header.css
+++ b/tranga-website/src/Header.css
@@ -0,0 +1,10 @@
+.header {
+    position: static !important;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 60px;
+    padding: 10px;
+    display: flex;
+    flex-flow: row nowrap;
+}
--- a/tranga-website/src/Header.tsx
+++ b/tranga-website/src/Header.tsx
@@ -0,0 +1,20 @@
+import Sheet from "@mui/joy/Sheet";
+import {Stack, Typography} from "@mui/joy";
+import {ReactElement} from "react";
+import './Header.css';
+
+export default function Header({children} : {children? : ReactElement<any, any> | ReactElement<any,any>[] | undefined}) : ReactElement {
+    return (
+        <Sheet className={"header"}>
+            <Stack direction={"row"}
+                   spacing={4}
+                   sx={{
+                       justifyContent: "flex-start",
+                       alignItems: "center",
+                   }}>
+                <Typography level={"h2"}>Tranga</Typography>
+                {children}
+            </Stack>
+        </Sheet>
+    );
+}
--- a/tranga-website/src/Settings.css
+++ b/tranga-website/src/Settings.css
--- a/tranga-website/src/Settings.tsx
+++ b/tranga-website/src/Settings.tsx
@@ -0,0 +1,93 @@
+import Drawer from '@mui/joy/Drawer';
+import ModalClose from '@mui/joy/ModalClose';
+import {
+    Accordion,
+    AccordionDetails,
+    AccordionGroup,
+    AccordionSummary, CircularProgress, ColorPaletteProp,
+    DialogContent,
+    DialogTitle, Input
+} from "@mui/joy";
+import './Settings.css';
+import * as React from "react";
+import {useContext, useEffect, useState} from "react";
+import {ApiUriContext} from "./api/fetchApi.tsx";
+
+const checkConnection  = async (apiUri: string): Promise<boolean> =>{
+    return fetch(`${apiUri}/swagger/v2/swagger.json`,
+        {
+            method: 'GET',
+        })
+        .then((response) => {
+            if(!(response.ok && response.status == 200))
+                return false;
+            return response.json().then((json) => (json as {openapi:string}).openapi.match("[0-9]+(?:\.[0-9]+)+")?true:false).catch(() => false);
+        })
+        .catch(() => {
+            return false;
+        });
+}
+
+export default function Settings({open, setOpen, setApiUri}:{open:boolean, setOpen:React.Dispatch<React.SetStateAction<boolean>>, setApiUri:React.Dispatch<React.SetStateAction<string>>}) {
+
+    const apiUri = useContext(ApiUriContext);
+
+    const [apiUriColor, setApiUriColor] = useState<ColorPaletteProp>("neutral");
+    const timerRef = React.useRef<ReturnType<typeof setTimeout>>(undefined);
+
+    const [apiUriAccordionOpen, setApiUriAccordionOpen] = React.useState(true);
+    const [checking, setChecking] = useState(false);
+    useEffect(() => {
+        OnCheckConnection(apiUri);
+    }, []);
+
+    const apiUriChanged = (e : React.ChangeEvent<HTMLInputElement>) => {
+        clearTimeout(timerRef.current);
+        setApiUriColor("warning");
+        timerRef.current = setTimeout(() => {
+            OnCheckConnection(e.target.value);
+        }, 1000);
+    }
+
+    const OnCheckConnection = (uri: string) => {
+        setChecking(true);
+        checkConnection(uri)
+            .then((result) => {
+                setApiUriAccordionOpen(!result);
+                setApiUriColor(result ? "success" : "danger");
+                if(result)
+                    setApiUri(uri);
+            })
+            .finally(() => setChecking(false));
+    }
+
+    return (
+        <Drawer size={"md"} open={open} onClose={() => setOpen(false)}>
+            <ModalClose />
+            <DialogTitle>Settings</DialogTitle>
+            <DialogContent>
+                <AccordionGroup>
+                    <Accordion expanded={apiUriAccordionOpen} onChange={(_e, expanded) => setApiUriAccordionOpen(expanded)}>
+                        <AccordionSummary>ApiUri</AccordionSummary>
+                        <AccordionDetails>
+                            <Input
+                                disabled={checking}
+                                color={apiUriColor}
+                                placeholder={"http(s)://"}
+                                type={"url"}
+                                defaultValue={apiUri}
+                                onChange={apiUriChanged}
+                                onKeyDown={(e) => {
+                                    if(e.key === "Enter") {
+                                        clearTimeout(timerRef.current);
+                                        OnCheckConnection(e.currentTarget.value);
+                                    }
+                                }}
+                                endDecorator={(checking ? <CircularProgress color={apiUriColor} size={"sm"} /> : null)} />
+                        </AccordionDetails>
+                    </Accordion>
+                </AccordionGroup>
+            </DialogContent>
+        </Drawer>
+    );
+}
--- a/tranga-website/src/api/BackendSettings.tsx
+++ b/tranga-website/src/api/BackendSettings.tsx
@@ -0,0 +1,80 @@
+import {deleteData, getData, patchData} from './fetchApi.tsx';
+import IBackendSettings from "./types/IBackendSettings.ts";
+import IRequestLimits from "./types/IRequestLimits.ts";
+import {RequestLimitType} from "./types/EnumRequestLimitType.ts";
+
+export const GetSettings = async (apiUri: string) : Promise<IBackendSettings> => {
+    return await getData(`${apiUri}/v2/Settings`) as Promise<IBackendSettings>;
+}
+
+export const GetUserAgent = async (apiUri: string) : Promise<string> => {
+    return await getData(`${apiUri}/v2/Settings/UserAgent`) as Promise<string>;
+}
+
+export const UpdateUserAgent = async (apiUri: string, userAgent: string)=>  {
+    if(userAgent === undefined || userAgent === null)
+        return Promise.reject(`userAgent was not provided`);
+    return patchData(`${apiUri}/v2/Settings/UserAgent`, userAgent);
+}
+
+export const ResetUserAgent = async (apiUri: string) => {
+    return deleteData(`${apiUri}/v2/Settings/UserAgent`);
+}
+
+export const GetRequestLimits = async(apiUri: string) : Promise<IRequestLimits> => {
+    return await getData(`${apiUri}/v2/Settings/RequestLimits`) as Promise<IRequestLimits>;
+}
+
+export const ResetRequestLimits = async (apiUri: string) => {
+    return deleteData(`${apiUri}/v2/Settings/RequestLimits`);
+}
+
+export const UpdateRequestLimit = async (apiUri: string, requestType: RequestLimitType, value: number) => {
+    if(requestType === undefined || requestType === null || value === undefined || value === null)
+        return Promise.reject();
+    return patchData(`${apiUri}/v2/Settings/RequestLimits/${requestType}`, value);
+}
+
+export const ResetRequestLimit = async (apiUri: string, requestType: RequestLimitType) => {
+    if(requestType === undefined || requestType === null)
+        return Promise.reject("requestType was not provided");
+    return deleteData(`${apiUri}/v2/Settings/RequestLimits/${requestType}`);
+}
+
+export const GetImageCompressionValue = async (apiUri: string) : Promise<number> => {
+    return await getData(`${apiUri}/v2/Settings/ImageCompression`) as Promise<number>;
+}
+
+export const UpdateImageCompressionValue = async (apiUri: string, value: number) => {
+    if(value === undefined || value === null)
+        return Promise.reject("value was not provided");
+    return patchData(`${apiUri}/v2/Settings/ImageCompression`, value);
+}
+
+export const GetBWImageToggle = async (apiUri: string) : Promise<boolean> => {
+    return await getData(`${apiUri}/v2/Settings/BWImages`) as Promise<boolean>;
+}
+
+export const UpdateBWImageToggle = async (apiUri: string, value: boolean) => {
+    if(value === undefined || value === null)
+        return Promise.reject("value was not provided");
+    return patchData(`${apiUri}/v2/Settings/BWImages`, value);
+}
+
+export const GetAprilFoolsToggle = async (apiUri: string) : Promise<boolean> => {
+    return await getData(`${apiUri}/v2/Settings/AprilFoolsMode`) as Promise<boolean>;
+}
+
+export const UpdateAprilFoolsToggle = async (apiUri: string, value: boolean) => {
+    if(value === undefined || value === null)
+        return Promise.reject("value was not provided");
+    return patchData(`${apiUri}/v2/Settings/AprilFoolsMode`, value);
+}
+
+export const GetChapterNamingScheme = async (apiUri: string) : Promise<string> => {
+    return await getData(`${apiUri}/v2/Settings/ChapterNamingScheme`) as Promise<string>;
+}
+
+export const UpdateChapterNamingScheme = async (apiUri: string, value: string) => {
+    return patchData(`${apiUri}/v2/Settings/ChapterNamingScheme`, value);
+}
--- a/tranga-website/src/api/Chapter.tsx
+++ b/tranga-website/src/api/Chapter.tsx
@@ -0,0 +1,8 @@
+import {getData} from "./fetchApi.tsx";
+import IChapter from "./types/IChapter.ts";
+
+export const GetChapterFromId = async (apiUri: string, chapterId: string): Promise<IChapter> => {
+    if(chapterId === undefined || chapterId === null)
+        return Promise.reject(`chapterId was not provided`);
+    return await getData(`${apiUri}/v2/Query/Chapter/${chapterId}`) as Promise<IChapter>;
+}
--- a/tranga-website/src/api/Job.tsx
+++ b/tranga-website/src/api/Job.tsx
@@ -0,0 +1,97 @@
+import {deleteData, getData, patchData, postData, putData} from "./fetchApi";
+import IJob, {JobState, JobType} from "./types/Jobs/IJob";
+import IModifyJobRecord from "./types/records/IModifyJobRecord";
+import IDownloadAvailableJobsRecord from "./types/records/IDownloadAvailableJobsRecord.ts";
+
+export const GetAllJobs = async (apiUri: string) : Promise<IJob[]> => {
+    return await getData(`${apiUri}/v2/Job`) as Promise<IJob[]>;
+}
+
+export const GetJobsWithIds = async (apiUri: string, jobIds: string[]) : Promise<IJob[]> => {
+    if(jobIds === null || jobIds === undefined || jobIds.length === 0)
+        return Promise.reject("jobIds was not provided");
+    return await postData(`${apiUri}/v2/Job/WithIDs`, jobIds) as Promise<IJob[]>;
+}
+
+export const GetJobsInState = async (apiUri: string, state: JobState) : Promise<IJob[]> => {
+    if(state == null || state == undefined)
+        return Promise.reject("state was not provided");
+    return await getData(`${apiUri}/v2/Job/State/${state}`) as Promise<IJob[]>;
+}
+
+export const GetJobsWithType = async (apiUri: string, jobType: JobType) : Promise<IJob[]> => {
+    if(jobType == null || jobType == undefined) {
+        return Promise.reject("jobType was not provided");
+    }
+    return await getData(`${apiUri}/v2/Job/Type/${jobType}`) as Promise<IJob[]>;
+}
+
+export const GetJobsOfTypeAndWithState = async (apiUri: string, jobType: JobType, state: JobState) : Promise<IJob[]> => {
+    if(jobType == null || jobType == undefined)
+        return Promise.reject("jobType was not provided");
+    if(state == null || state == undefined)
+        return Promise.reject("state was not provided");
+    return await getData(`${apiUri}/v2/Job/TypeAndState/${jobType}/${state}`) as Promise<IJob[]>;
+}
+
+export const GetJob = async (apiUri: string, jobId: string) : Promise<IJob> => {
+    if(jobId === undefined || jobId === null || jobId.length < 1)
+        return Promise.reject("jobId was not provided");
+    return await getData(`${apiUri}/v2/Job/${jobId}`) as Promise<IJob>;
+}
+
+export const DeleteJob = async (apiUri: string, jobId: string) : Promise<void> => {
+    if(jobId === undefined || jobId === null || jobId.length < 1)
+        return Promise.reject("jobId was not provided");
+    return await deleteData(`${apiUri}/v2/Job/${jobId}`);
+}
+
+export const ModifyJob = async (apiUri: string, jobId: string, modifyData: IModifyJobRecord) : Promise<IJob> => {
+    if(jobId === undefined || jobId === null || jobId.length < 1)
+        return Promise.reject("jobId was not provided");
+    if(modifyData === undefined || modifyData === null)
+        return Promise.reject("modifyData was not provided");
+    return await patchData(`${apiUri}/v2/Job/${jobId}`, modifyData) as Promise<IJob>;
+}
+
+export const CreateDownloadAvailableChaptersJob = async (apiUri: string, mangaId: string, data: IDownloadAvailableJobsRecord) : Promise<string[]> => {
+    if(mangaId === undefined || mangaId === null || mangaId.length < 1)
+        return Promise.reject("mangaId was not provided");
+    if(data === undefined || data === null)
+        return Promise.reject("data was not provided");
+    return await putData(`${apiUri}/v2/Job/DownloadAvailableChaptersJob/${mangaId}`, data) as Promise<string[]>;
+}
+
+export const CreateDownloadSingleChapterJob = async (apiUri: string, chapterId: string) : Promise<string[]> => {
+    if(chapterId === undefined || chapterId === null || chapterId.length < 1)
+        return Promise.reject("chapterId was not provided");
+    return await putData(`${apiUri}/v2/Job/DownloadSingleChapterJob/${chapterId}`, {}) as Promise<string[]>;
+}
+
+export const CreateUpdateFilesJob = async (apiUri: string, mangaId: string) : Promise<string[]> => {
+    if(mangaId === undefined || mangaId === null || mangaId.length < 1)
+        return Promise.reject("mangaId was not provided");
+    return await putData(`${apiUri}/v2/Job/UpdateFilesJob/${mangaId}`, {}) as Promise<string[]>;
+}
+
+export const CreateUpdateAllFilesJob = async (apiUri: string) : Promise<string[]> => {
+    return await putData(`${apiUri}/v2/Job/UpdateAllFilesJob`, {}) as Promise<string[]>;
+}
+
+export const CreateUpdateMetadataJob = async (apiUri: string, mangaId: string) : Promise<string[]> => {
+    if(mangaId === undefined || mangaId === null || mangaId.length < 1)
+        return Promise.reject("mangaId was not provided");
+    return await putData(`${apiUri}/v2/Job/UpdateMetadataJob/${mangaId}`, {}) as Promise<string[]>;
+}
+
+export const CreateUpdateAllMetadataJob = async (apiUri: string) : Promise<string[]> => {
+    return await putData(`${apiUri}/v2/Job/UpdateAllMetadataJob`, {}) as Promise<string[]>;
+}
+
+export const StartJob = async (apiUri: string, jobId: string) : Promise<object> => {
+    return await postData(`${apiUri}/v2/Job/${jobId}/Start`, {});
+}
+
+export const StopJob = async (apiUri: string, jobId: string) : Promise<object> => {
+    return await postData(`${apiUri}/v2/Job/${jobId}/Stop`, {});
+}
--- a/tranga-website/src/api/LocalLibrary.tsx
+++ b/tranga-website/src/api/LocalLibrary.tsx
@@ -0,0 +1,31 @@
+import ILocalLibrary from "./types/ILocalLibrary.ts";
+import {deleteData, getData, patchData, putData} from "./fetchApi.tsx";
+import INewLibraryRecord from "./types/records/INewLibraryRecord.ts";
+
+export const GetLibraries = async (apiUri: string) : Promise<ILocalLibrary[]> => {
+    return await getData(`${apiUri}/v2/LocalLibraries`) as Promise<ILocalLibrary[]>;
+}
+
+export const  GetLibrary = async (apiUri: string, libraryId: string) : Promise<ILocalLibrary> => {
+    return await getData(`${apiUri}/v2/LocalLibraries/${libraryId}`) as Promise<ILocalLibrary>;
+}
+
+export const  CreateLibrary = async (apiUri: string, data: INewLibraryRecord) : Promise<ILocalLibrary> => {
+    return await putData(`${apiUri}/v2/LocalLibraries`, data) as Promise<ILocalLibrary>
+}
+
+export const  DeleteLibrary = async (apiUri: string, libraryId: string) : Promise<void> => {
+    return await deleteData(`${apiUri}/v2/LocalLibraries/${libraryId}`);
+}
+
+export const  ChangeLibraryPath = async (apiUri: string, libraryId: string, newPath: string) : Promise<object> => {
+    return await patchData(`${apiUri}/v2/LocalLibraries/${libraryId}/ChangeBasePath`, newPath);
+}
+
+export const  ChangeLibraryName = async (apiUri: string, libraryId: string, newName: string) : Promise<object> => {
+    return await patchData(`${apiUri}/v2/LocalLibraries/${libraryId}/ChangeName`, newName);
+}
+
+export const  UpdateLibrary = async (apiUri: string, libraryId: string, record: INewLibraryRecord) : Promise<object> => {
+    return await patchData(`${apiUri}/v2/LocalLibraries/${libraryId}`, record);
+}
--- a/tranga-website/src/api/Manga.tsx
+++ b/tranga-website/src/api/Manga.tsx
@@ -0,0 +1,77 @@
+import {deleteData, getData, patchData, postData} from './fetchApi.tsx';
+import IManga from "./types/IManga.ts";
+import IChapter from "./types/IChapter.ts";
+
+export const GetAllManga = async (apiUri: string) : Promise<IManga[]> => {
+    return await getData(`${apiUri}/v2/Manga`) as Promise<IManga[]>;
+}
+
+export const GetMangaWithIds = async (apiUri: string, mangaIds: string[]) : Promise<IManga[]> => {
+    if(mangaIds === undefined || mangaIds === null || mangaIds.length < 1)
+        return Promise.reject("mangaIds was not provided");
+    return await postData(`${apiUri}/v2/Manga/WithIds`, mangaIds) as Promise<IManga[]>;
+}
+
+export const GetMangaById = async (apiUri: string, mangaId: string) : Promise<IManga> => {
+    if(mangaId === undefined || mangaId === null || mangaId.length < 1)
+        return Promise.reject("mangaId was not provided");
+    return await getData(`${apiUri}/v2/Manga/${mangaId}`) as Promise<IManga>;
+}
+
+export const DeleteManga = async (apiUri: string, mangaId: string) : Promise<void> => {
+    if(mangaId === undefined || mangaId === null || mangaId.length < 1)
+        return Promise.reject("mangaId was not provided");
+    return await deleteData(`${apiUri}/v2/Manga/${mangaId}`);
+}
+
+export const GetMangaCoverImageUrl = (apiUri: string, mangaId: string, ref: HTMLImageElement | undefined) : string => {
+    if(ref == null || ref == undefined)
+        return `${apiUri}/v2/Manga/${mangaId}/Cover?width=64&height=64`;
+    return `${apiUri}/v2/Manga/${mangaId}/Cover?width=${ref.clientWidth}&height=${ref.clientHeight}`;
+}
+
+export const GetChapters = async (apiUri: string, mangaId: string) : Promise<IChapter[]> => {
+    if(mangaId === undefined || mangaId === null || mangaId.length < 1)
+        return Promise.reject("mangaId was not provided");
+    return await getData(`${apiUri}/v2/Manga/${mangaId}/Chapters`) as Promise<IChapter[]>;
+}
+
+export const  GetDownloadedChapters = async (apiUri: string, mangaId: string) : Promise<IChapter[]> => {
+    if(mangaId === undefined || mangaId === null || mangaId.length < 1)
+        return Promise.reject("mangaId was not provided");
+    return await getData(`${apiUri}/v2/Manga/${mangaId}/Chapters/Downloaded`) as Promise<IChapter[]>;
+}
+
+export const  GetNotDownloadedChapters = async (apiUri: string, mangaId: string) : Promise<IChapter[]> => {
+    if(mangaId === undefined || mangaId === null || mangaId.length < 1)
+        return Promise.reject("mangaId was not provided");
+    return await getData(`${apiUri}/v2/Manga/${mangaId}/Chapters/NotDownloaded`) as Promise<IChapter[]>;
+}
+
+export const  GetLatestChapterAvailable = async (apiUri: string, mangaId: string) : Promise<IChapter> => {
+    if(mangaId === undefined || mangaId === null || mangaId.length < 1)
+        return Promise.reject("mangaId was not provided");
+    return await getData(`${apiUri}/v2/Manga/${mangaId}/Chapter/LatestAvailable`) as Promise<IChapter>;
+}
+
+export const  GetLatestChapterDownloaded = async (apiUri: string, mangaId: string) : Promise<IChapter> => {
+    if(mangaId === undefined || mangaId === null || mangaId.length < 1)
+        return Promise.reject("mangaId was not provided");
+    return await getData(`${apiUri}/v2/Manga/${mangaId}/Chapter/LatestDownloaded`) as Promise<IChapter>;
+}
+
+export const  SetIgnoreThreshold = async (apiUri: string, mangaId: string, chapterThreshold: number) : Promise<object> => {
+    if(mangaId === undefined || mangaId === null || mangaId.length < 1)
+        return Promise.reject("mangaId was not provided");
+    if(chapterThreshold === undefined || chapterThreshold === null)
+        return Promise.reject("chapterThreshold was not provided");
+    return await patchData(`${apiUri}/v2/Manga/${mangaId}/IgnoreChaptersBefore`, chapterThreshold);
+}
+
+export const  MoveFolder = async (apiUri: string, mangaId: string, newPath: string) : Promise<object> => {
+    if(mangaId === undefined || mangaId === null || mangaId.length < 1)
+        return Promise.reject("mangaId was not provided");
+    if(newPath === undefined || newPath === null || newPath.length < 1)
+        return Promise.reject("newPath was not provided");
+    return await postData(`${apiUri}/v2/Manga/{MangaId}/MoveFolder`, {newPath});
+}
--- a/tranga-website/src/api/MangaConnector.tsx
+++ b/tranga-website/src/api/MangaConnector.tsx
@@ -0,0 +1,22 @@
+import {getData, patchData} from './fetchApi.tsx';
+import IMangaConnector from "./types/IMangaConnector.ts";
+
+export const GetAllConnectors = async (apiUri: string) : Promise<IMangaConnector[]> => {
+    return await getData(`${apiUri}/v2/MangaConnector`) as Promise<IMangaConnector[]>
+}
+
+export const  GetEnabledConnectors = async (apiUri: string) : Promise<IMangaConnector[]> => {
+    return await getData(`${apiUri}/v2/MangaConnector/enabled`) as Promise<IMangaConnector[]>
+}
+
+export const  GetDisabledConnectors = async (apiUri: string) : Promise<IMangaConnector[]> => {
+    return await getData(`${apiUri}/v2/MangaConnector/disabled`) as Promise<IMangaConnector[]>
+}
+
+export const  SetConnectorEnabled = async (apiUri: string, connectorName: string, enabled: boolean) : Promise<object> => {
+    if(connectorName === undefined || connectorName === null || connectorName.length < 1)
+        return Promise.reject("connectorName was not provided");
+    if(enabled === undefined || enabled === null)
+        return Promise.reject("enabled was not provided");
+    return await patchData(`${apiUri}/v2/MangaConnector/${connectorName}/SetEnabled/${enabled}`, {});
+}
--- a/tranga-website/src/api/NotificationConnector.tsx
+++ b/tranga-website/src/api/NotificationConnector.tsx
@@ -0,0 +1,52 @@
+import {deleteData, getData, putData} from "./fetchApi.tsx";
+import INotificationConnector from "./types/INotificationConnector.ts";
+import IGotifyRecord from "./types/records/IGotifyRecord.ts";
+import INtfyRecord from "./types/records/INtfyRecord.ts";
+import ILunaseaRecord from "./types/records/ILunaseaRecord.ts";
+import IPushoverRecord from "./types/records/IPushoverRecord.ts";
+
+export const  GetNotificationConnectors = async (apiUri: string) : Promise<INotificationConnector[]> => {
+    return await getData(`${apiUri}/v2/NotificationConnector`) as Promise<INotificationConnector[]>
+}
+
+export const  CreateNotificationConnector = async (apiUri: string, newConnector: INotificationConnector) : Promise<string> => {
+    if(newConnector === undefined || newConnector === null)
+        return Promise.reject("newConnector was not provided");
+    return await putData(`${apiUri}/v2/NotificationConnector`, newConnector) as Promise<string>;
+}
+
+export const  GetNotificationConnectorWithId = async (apiUri: string, notificationConnectorId: string) : Promise<INotificationConnector> => {
+    if(notificationConnectorId === undefined || notificationConnectorId === null || notificationConnectorId.length < 1)
+        return Promise.reject("notificationConnectorId was not provided");
+    return await getData(`${apiUri}/v2/NotificationConnector/${notificationConnectorId}`) as Promise<INotificationConnector>;
+}
+
+export const  DeleteNotificationConnectorWithId = async (apiUri: string, notificationConnectorId: string) : Promise<void> => {
+    if(notificationConnectorId === undefined || notificationConnectorId === null || notificationConnectorId.length < 1)
+        return Promise.reject("notificationConnectorId was not provided");
+    return await deleteData(`${apiUri}/v2/NotificationConnector/${notificationConnectorId}`);
+}
+
+export const  CreateGotify = async (apiUri: string, gotify: IGotifyRecord) : Promise<string> => {
+    if(gotify === undefined || gotify === null)
+        return Promise.reject("gotify was not provided");
+    return await putData(`${apiUri}/v2/NotificationConnector/Gotify`, gotify) as Promise<string>;
+}
+
+export const  CreateNtfy = async (apiUri: string, ntfy: INtfyRecord) : Promise<string> => {
+    if(ntfy === undefined || ntfy === null)
+        return Promise.reject("gotify was not provided");
+    return await putData(`${apiUri}/v2/NotificationConnector/Ntfy`, ntfy) as Promise<string>;
+}
+
+export const  CreateLunasea = async (apiUri: string, lunasea: ILunaseaRecord) : Promise<string> => {
+    if(lunasea === undefined || lunasea === null)
+        return Promise.reject("lunasea was not provided");
+    return await putData(`${apiUri}/v2/NotificationConnector/Lunasea`, lunasea) as Promise<string>;
+}
+
+export const  CreatePushover = async (apiUri: string, pushover: IPushoverRecord) : Promise<string> => {
+    if(pushover === undefined || pushover === null)
+        return Promise.reject("pushover was not provided");
+    return await putData(`${apiUri}/v2/NotificationConnector/Pushover`, pushover) as Promise<string>;
+}
--- a/tranga-website/src/api/Query.tsx
+++ b/tranga-website/src/api/Query.tsx
@@ -0,0 +1,15 @@
+import IAuthor from "./types/IAuthor.ts";
+import {getData} from "./fetchApi.tsx";
+import ILink from "./types/ILink.ts";
+
+export const GetAuthor = async (apiUri: string, authorId: string) : Promise<IAuthor> => {
+    if(authorId === undefined || authorId === null || authorId.length < 1)
+        return Promise.reject("authorId was not provided");
+    return await getData(`${apiUri}/v2/Query/Author/${authorId}`) as Promise<IAuthor>;
+}
+
+export const GetLink = async (apiUri: string, linkId: string) : Promise<ILink> => {
+    if(linkId === undefined || linkId === null || linkId.length < 1)
+        return Promise.reject("linkId was not provided");
+    return await getData(`${apiUri}/v2/Query/Link/${linkId}`) as Promise<ILink>;
+}
--- a/tranga-website/src/api/Search.tsx
+++ b/tranga-website/src/api/Search.tsx
@@ -0,0 +1,22 @@
+import {postData} from "./fetchApi.tsx";
+import IManga from "./types/IManga.ts";
+
+export const SearchName = async (apiUri: string, name: string) : Promise<IManga[]> => {
+    if(name === undefined || name === null || name.length < 1)
+        return Promise.reject("name was not provided");
+    return await postData(`${apiUri}/v2/Search/Name`, name) as Promise<IManga[]>;
+}
+
+export const SearchNameOnConnector = async (apiUri: string, connectorName: string, name: string) : Promise<IManga[]> => {
+    if(connectorName === undefined || connectorName === null || connectorName.length < 1)
+        return Promise.reject("connectorName was not provided");
+    if(name === undefined || name === null || name.length < 1)
+        return Promise.reject("name was not provided");
+    return await postData(`${apiUri}/v2/Search/${connectorName}`, name) as Promise<IManga[]>;
+}
+
+export const SearchUrl = async (apiUri: string, url: string) : Promise<IManga> => {
+    if(url === undefined || url === null || url.length < 1)
+        return Promise.reject("name was not provided");
+    return await postData(`${apiUri}/v2/Search/Url`, url) as Promise<IManga>;
+}
--- a/tranga-website/src/api/fetchApi.tsx
+++ b/tranga-website/src/api/fetchApi.tsx
@@ -0,0 +1,80 @@
+import {createContext} from "react";
+
+export const ApiUriContext = createContext<string>("");
+
+export function getData(uri: string) : Promise<object> {
+    return makeRequest("GET", uri, null) as Promise<object>;
+}
+
+export function postData(uri: string, content: object | string | number | boolean) : Promise<object> {
+    return makeRequest("POST", uri, content) as Promise<object>;
+}
+
+export function deleteData(uri: string) : Promise<void> {
+    return makeRequest("DELETE", uri, null) as Promise<void>;
+}
+
+export function patchData(uri: string, content: object | string | number | boolean) : Promise<object> {
+    return makeRequest("patch", uri, content) as Promise<object>;
+}
+
+export function putData(uri: string, content: object | string | number | boolean) : Promise<object> {
+    return makeRequest("PUT", uri, content) as Promise<object>;
+}
+
+let currentlyRequestedEndpoints: string[] = [];
+function makeRequest(method: string, uri: string, content: object | string | number | null | boolean) : Promise<object | void> {
+    const id = method + uri;
+    if(currentlyRequestedEndpoints.find(x => x == id) != undefined)
+        return Promise.reject(`Already requested: ${method} ${uri}`);
+    currentlyRequestedEndpoints.push(id);
+    return fetch(uri,
+        {
+            method: method,
+            headers : {
+                'Content-Type': 'application/json',
+                'Accept': 'application/json'
+            },
+            body: content ? JSON.stringify(content) : null
+        })
+        .then(function(response){
+            if(!response.ok){
+                if(response.status === 503){
+                    currentlyRequestedEndpoints.splice(currentlyRequestedEndpoints.indexOf(id), 1)
+                    let retryHeaderVal = response.headers.get("Retry-After");
+                    let seconds = 10;
+                    if(retryHeaderVal === null){
+                        return response.text().then(text => {
+                            seconds = parseInt(text);
+                            return new Promise(resolve => setTimeout(resolve, seconds * 1000))
+                                .then(() => {
+                                    return makeRequest(method, uri, content);
+                                });
+                        });
+                    }else {
+                        seconds = parseInt(retryHeaderVal);
+                        return new Promise(resolve => setTimeout(resolve, seconds * 1000))
+                            .then(() => {
+                                return makeRequest(method, uri, content);
+                            });
+                    }
+                }else
+                    throw new Error(response.statusText);
+            }
+            let json = response.json();
+            return json.then((json) => json).catch(() => null);
+        })
+        .catch(function(err : Error){
+            console.error(`Error ${method}ing Data ${uri}\n${err}`);
+            return Promise.reject();
+        }).finally(() => currentlyRequestedEndpoints.splice(currentlyRequestedEndpoints.indexOf(id), 1));
+}
+
+export function isValidUri(uri: string) : boolean{
+    try {
+        new URL(uri);
+        return true;
+    } catch (err) {
+        return false;
+    }
+}
--- a/tranga-website/src/api/types/EnumLibraryType.ts
+++ b/tranga-website/src/api/types/EnumLibraryType.ts
@@ -0,0 +1,4 @@
+export enum LibraryType {
+    Komga = "Komga",
+    Kavita = "Kavita"
+}
--- a/tranga-website/src/api/types/EnumMangaReleaseStatus.ts
+++ b/tranga-website/src/api/types/EnumMangaReleaseStatus.ts
@@ -0,0 +1,24 @@
+import {ColorPaletteProp} from "@mui/joy";
+
+export enum MangaReleaseStatus {
+    Continuing = "Continuing",
+    Completed = "Completed",
+    OnHiatus = "OnHiatus",
+    Cancelled = "Cancelled",
+    Unreleased = "Unreleased",
+}
+
+export function ReleaseStatusToPalette(status: MangaReleaseStatus): ColorPaletteProp {
+    switch (status) {
+        case MangaReleaseStatus.Continuing:
+            return "success";
+        case MangaReleaseStatus.Completed:
+            return "primary";
+        case MangaReleaseStatus.Cancelled:
+            return "danger";
+        case MangaReleaseStatus.Unreleased:
+            return "neutral";
+        case MangaReleaseStatus.OnHiatus:
+            return "warning";
+    }
+}
--- a/tranga-website/src/api/types/EnumRequestLimitType.ts
+++ b/tranga-website/src/api/types/EnumRequestLimitType.ts
@@ -0,0 +1,8 @@
+export enum RequestLimitType {
+    Default = "Default",
+    MangaDexFeed = "MangaDexFeed",
+    MangaImage = "MangaImage",
+    MangaCover = "MangaCover",
+    MangaDexImage = "MangaDexImage",
+    MangaInfo = "MangaInfo"
+}
--- a/tranga-website/src/api/types/IAuthor.ts
+++ b/tranga-website/src/api/types/IAuthor.ts
@@ -0,0 +1,4 @@
+export default interface IAuthor {
+    authorId: string;
+    authorName: string;
+}
--- a/tranga-website/src/api/types/IBackendSettings.ts
+++ b/tranga-website/src/api/types/IBackendSettings.ts
@@ -0,0 +1,18 @@
+export default interface IBackendSettings {
+    downloadLocation: string;
+    workingDirectory: string;
+    userAgent: string;
+    aprilFoolsMode: boolean;
+    requestLimits: {
+        Default: number,
+        MangaInfo: number,
+        MangaDexFeed: number,
+        MangaDexImage: number,
+        MangaImage: number,
+        MangaCover: number,
+    };
+    compression: number;
+    bwImages: boolean;
+    startNewJobTimeoutMs: number;
+    chapterNamingScheme: string;
+}
--- a/tranga-website/src/api/types/IChapter.ts
+++ b/tranga-website/src/api/types/IChapter.ts
@@ -0,0 +1,10 @@
+export default interface IChapter{
+    chapterId: string;
+    volumeNumber: number;
+    chapterNumber: string;
+    url: string;
+    title: string | undefined;
+    archiveFileName: string;
+    downloaded: boolean;
+    parentMangaId: string;
+}
--- a/tranga-website/src/api/types/IFrontendSettings.ts
+++ b/tranga-website/src/api/types/IFrontendSettings.ts
@@ -0,0 +1,4 @@
+export default interface IFrontendSettings {
+    jobInterval: Date;
+    apiUri: string;
+}
--- a/tranga-website/src/api/types/ILibraryConnector.ts
+++ b/tranga-website/src/api/types/ILibraryConnector.ts
@@ -0,0 +1,8 @@
+import {LibraryType} from "./EnumLibraryType";
+
+export default interface ILibraryConnector {
+    libraryConnectorId: string;
+    libraryType: LibraryType;
+    baseUrl: string;
+    auth: string;
+}
--- a/tranga-website/src/api/types/ILink.ts
+++ b/tranga-website/src/api/types/ILink.ts
@@ -0,0 +1,5 @@
+export default interface ILink {
+    linkId: string;
+    linkProvider: string;
+    linkUrl: string;
+}
--- a/tranga-website/src/api/types/ILocalLibrary.ts
+++ b/tranga-website/src/api/types/ILocalLibrary.ts
@@ -0,0 +1,5 @@
+export default interface ILocalLibrary {
+    localLibraryId: string;
+    basePath: string;
+    libraryName: string;
+}
--- a/tranga-website/src/api/types/IManga.ts
+++ b/tranga-website/src/api/types/IManga.ts
@@ -0,0 +1,37 @@
+import {MangaReleaseStatus} from "./EnumMangaReleaseStatus";
+
+export default interface IManga{
+    mangaId: string;
+    idOnConnectorSite: string;
+    name: string;
+    description: string;
+    websiteUrl: string;
+    year: number;
+    originalLanguage: string;
+    releaseStatus: MangaReleaseStatus;
+    folderName: string;
+    ignoreChapterBefore: number;
+    mangaConnectorId: string;
+    authorIds: string[];
+    tags: string[];
+    linkIds: string[];
+    altTitleIds: string[];
+}
+
+export const DefaultManga : IManga = {
+    mangaId: "MangaId",
+    idOnConnectorSite: "ID",
+    name: "TestManga",
+    description: "Wow so much text, very cool",
+    websiteUrl: "https://realsite.realdomain",
+    year: 1999,
+    originalLanguage: "lindtChoccy",
+    releaseStatus: MangaReleaseStatus.Continuing,
+    folderName: "uhhh",
+    ignoreChapterBefore: 0,
+    mangaConnectorId: "MangaDex",
+    authorIds: ["We got", "Authors"],
+    tags: ["And we", "got Tags"],
+    linkIds: ["And most", "definitely", "links"],
+    altTitleIds: ["But not alt-titles."],
+}
--- a/tranga-website/src/api/types/IMangaAltTitle.ts
+++ b/tranga-website/src/api/types/IMangaAltTitle.ts
@@ -0,0 +1,5 @@
+export default interface IMangaAltTitle {
+    altTitleId: string;
+    language: string;
+    title: string;
+}
--- a/tranga-website/src/api/types/IMangaConnector.ts
+++ b/tranga-website/src/api/types/IMangaConnector.ts
@@ -0,0 +1,7 @@
+export default interface IMangaConnector {
+    name: string;
+    supportedLanguages: string[];
+    iconUrl: string;
+    baseUris: string[];
+    enabled: boolean;
+}
--- a/tranga-website/src/api/types/INotificationConnector.ts
+++ b/tranga-website/src/api/types/INotificationConnector.ts
@@ -0,0 +1,7 @@
+export default interface INotificationConnector {
+    name: string;
+    url: string;
+    headers: Record<string, string>[];
+    httpMethod: string;
+    body: string;
+}
--- a/tranga-website/src/api/types/IRequestLimits.ts
+++ b/tranga-website/src/api/types/IRequestLimits.ts
@@ -0,0 +1,8 @@
+export default interface IRequestLimits {
+    Default: number;
+    MangaDexFeed: number;
+    MangaImage: number;
+    MangaCover: number;
+    MangaDexImage: number;
+    MangaInfo: number;
+}
--- a/tranga-website/src/api/types/Jobs/IDownloadAvailableChaptersJob.ts
+++ b/tranga-website/src/api/types/Jobs/IDownloadAvailableChaptersJob.ts
@@ -0,0 +1,5 @@
+import IJob from "./IJob";
+
+export default interface IDownloadAvailableChaptersJob extends IJob {
+    mangaId: string;
+}
--- a/tranga-website/src/api/types/Jobs/IDownloadMangaCoverJob.ts
+++ b/tranga-website/src/api/types/Jobs/IDownloadMangaCoverJob.ts
@@ -0,0 +1,5 @@
+import IJob from "./IJob";
+
+export default interface IDownloadMangaCoverJob extends IJob {
+    mangaId: string;
+}
--- a/tranga-website/src/api/types/Jobs/IDownloadSingleChapterJob.ts
+++ b/tranga-website/src/api/types/Jobs/IDownloadSingleChapterJob.ts
@@ -0,0 +1,5 @@
+import IJob from "./IJob";
+
+export default interface IDownloadSingleChapterJob extends IJob {
+    chapterId: string;
+}
--- a/tranga-website/src/api/types/Jobs/IJob.ts
+++ b/tranga-website/src/api/types/Jobs/IJob.ts
@@ -0,0 +1,29 @@
+export default interface IJob{
+    jobId: string;
+    parentJobId: string;
+    dependsOnJobIds: string[];
+    jobType: JobType;
+    recurrenceMs: number;
+    lastExecution: Date;
+    nextExecution: Date;
+    state: JobState;
+    enabled: boolean;
+}
+
+export enum JobType {
+    DownloadSingleChapterJob = "DownloadSingleChapterJob",
+    DownloadAvailableChaptersJob = "DownloadAvailableChaptersJob",
+    UpdateMetaDataJob = "UpdateMetaDataJob",
+    MoveFileOrFolderJob = "MoveFileOrFolderJob",
+    DownloadMangaCoverJob = "DownloadMangaCoverJob",
+    RetrieveChaptersJob = "RetrieveChaptersJob",
+    UpdateFilesDownloadedJob = "UpdateFilesDownloadedJob",
+    MoveMangaLibraryJob = "MoveMangaLibraryJob"
+}
+
+export enum JobState {
+    Waiting = "Waiting",
+    Running = "Running",
+    Completed = "Completed",
+    Failed = "Failed"
+}
--- a/tranga-website/src/api/types/Jobs/IMoveFileOrFolderJob.ts
+++ b/tranga-website/src/api/types/Jobs/IMoveFileOrFolderJob.ts
@@ -0,0 +1,6 @@
+import IJob from "./IJob";
+
+export default interface IMoveFileOrFolderJob extends IJob {
+    fromLocation: string;
+    toLocation: string;
+}
--- a/tranga-website/src/api/types/Jobs/IMoveMangaLibraryJob.ts
+++ b/tranga-website/src/api/types/Jobs/IMoveMangaLibraryJob.ts
@@ -0,0 +1,6 @@
+import IJob from "./IJob";
+
+export default interface IMoveMangaLibraryJob extends IJob {
+    MangaId: string;
+    ToLibraryId: string;
+}
--- a/tranga-website/src/api/types/Jobs/IRetrieveChaptersJob.ts
+++ b/tranga-website/src/api/types/Jobs/IRetrieveChaptersJob.ts
@@ -0,0 +1,5 @@
+import IJob from "./IJob";
+
+export default interface IRetrieveChaptersJob extends IJob {
+    mangaId: string;
+}
--- a/tranga-website/src/api/types/Jobs/IUpdateFilesDownloadedJob.ts
+++ b/tranga-website/src/api/types/Jobs/IUpdateFilesDownloadedJob.ts
@@ -0,0 +1,5 @@
+import IJob from "./IJob";
+
+export default interface IUpdateFilesDownloadedJob extends IJob {
+    mangaId: string;
+}
--- a/tranga-website/src/api/types/Jobs/IUpdateMetadataJob.ts
+++ b/tranga-website/src/api/types/Jobs/IUpdateMetadataJob.ts
@@ -0,0 +1,5 @@
+import IJob from "./IJob";
+
+export default interface IUpdateMetadataJob extends IJob {
+    mangaId: string;
+}
--- a/tranga-website/src/api/types/records/IDownloadAvailableJobsRecord.ts
+++ b/tranga-website/src/api/types/records/IDownloadAvailableJobsRecord.ts
@@ -0,0 +1,4 @@
+export default interface IDownloadAvailableJobsRecord {
+    recurrenceTimeMs: number;
+    localLibraryId: string;
+}
--- a/tranga-website/src/api/types/records/IGotifyRecord.ts
+++ b/tranga-website/src/api/types/records/IGotifyRecord.ts
@@ -0,0 +1,7 @@
+import "../../../styles/notificationConnector.css";
+
+export default interface IGotifyRecord {
+    endpoint: string;
+    appToken: string;
+    priority: number;
+}
--- a/tranga-website/src/api/types/records/ILunaseaRecord.ts
+++ b/tranga-website/src/api/types/records/ILunaseaRecord.ts
@@ -0,0 +1,5 @@
+import "../../../styles/notificationConnector.css";
+
+export default interface ILunaseaRecord {
+    id: string;
+}
--- a/tranga-website/src/api/types/records/IModifyJobRecord.ts
+++ b/tranga-website/src/api/types/records/IModifyJobRecord.ts
@@ -0,0 +1,4 @@
+export default interface IModifyJobRecord {
+    recurrenceMs: number;
+    enabled: boolean;
+}
--- a/tranga-website/src/api/types/records/INewLibraryRecord.ts
+++ b/tranga-website/src/api/types/records/INewLibraryRecord.ts
@@ -0,0 +1,12 @@
+export default interface INewLibraryRecord {
+    path: string;
+    name: string;
+}
+
+export function Validate(record: INewLibraryRecord) : boolean {
+    if(record.path.length < 1)
+        return false;
+    if(record.name.length < 1)
+        return false;
+    return true;
+}
--- a/tranga-website/src/api/types/records/INtfyRecord.ts
+++ b/tranga-website/src/api/types/records/INtfyRecord.ts
@@ -0,0 +1,9 @@
+import "../../../styles/notificationConnector.css";
+
+export default interface INtfyRecord {
+    endpoint: string;
+    username: string;
+    password: string;
+    topic: string;
+    priority: number;
+}
--- a/tranga-website/src/api/types/records/IPushoverRecord.ts
+++ b/tranga-website/src/api/types/records/IPushoverRecord.ts
@@ -0,0 +1,6 @@
+import "../../../styles/notificationConnector.css";
+
+export default interface IPushoverRecord {
+    apptoken: string;
+    user: string;
+}
--- a/tranga-website/src/index.css
+++ b/tranga-website/src/index.css
--- a/tranga-website/src/main.tsx
+++ b/tranga-website/src/main.tsx
@@ -0,0 +1,28 @@
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+// @ts-ignore
+import '@fontsource/inter';
+import { CssVarsProvider } from '@mui/joy/styles';
+import CssBaseline from '@mui/joy/CssBaseline';
+import {StrictMode} from "react";
+
+export default function MyApp() {
+    return (
+        <StrictMode>
+            <CssVarsProvider>
+                {/* must be used under CssVarsProvider */}
+                <CssBaseline />
+
+                {/* The rest of your application */}
+                <App />
+            </CssVarsProvider>
+        </StrictMode>
+    );
+}
+
+
+
+createRoot(document.getElementById('root')!).render(
+    <MyApp />
+);
--- a/tranga-website/src/vite-env.d.ts
+++ b/tranga-website/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
--- a/tranga-website/tsconfig.app.json
+++ b/tranga-website/tsconfig.app.json
@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}
--- a/tranga-website/tsconfig.json
+++ b/tranga-website/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}
--- a/tranga-website/tsconfig.node.json
+++ b/tranga-website/tsconfig.node.json
@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}
--- a/tranga-website/vite.config.ts
+++ b/tranga-website/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})