Finish master-merge

# Conflicts:
#	Dockerfile
#	README.md
#	Website/apiConnector.js
#	Website/index.html
#	Website/interaction.js

.github/workflows/docker-image-vite-react-ts.yml

@@ -38,7 +38,7 @@ jobs:
           context: .
           file: ./Dockerfile
           #platforms: linux/amd64,linux/arm64,linux/riscv64,linux/ppc64le,linux/s390x,linux/386,linux/mips64le,linux/mips64,linux/arm/v7,linux/arm/v6
-          platforms: linux/amd64
+          platforms: linux/amd64,linux/arm64
           pull: true
           push: true
           tags: |

.gitignore

@@ -24,3 +24,5 @@ cover.png
 .vs/tranga-website/FileContentIndex/91a465d3-1190-42e0-95eb-fa3694744e58.vsidx
 .vs/tranga-website/v17/.wsuo
 .vs/VSWorkspaceState.json
+/node_modules/
+/.vite/

Dockerfile

@@ -1,6 +1,19 @@
-FROM nginx:alpine3.17-slim
-COPY ./Website /usr/share/nginx/html
+# Build stage
+FROM node:20-alpine AS builder
+
+WORKDIR /app
+COPY ./tranga-website /app
+RUN npm install
+RUN npm run build
+
+# Serve stage
+FROM nginx:alpine3.17-slim
+
+# Copy built files from Vite's dist folder
+COPY --from=builder /app/dist /usr/share/nginx/html
+#COPY --from=builder /app/tranga-website/media /usr/share/nginx/html/media
 COPY ./nginx /etc/nginx
+
 EXPOSE 80
 ENV API_URL=http://tranga-api:6531
 CMD ["nginx", "-g", "daemon off;"]

README.md

@@ -1,11 +1,6 @@
-# Testers for V2 wanted!
-
-[Details](https://github.com/C9Glax/tranga/pull/355#issuecomment-2764217944)
-
-<!-- PROJECT LOGO -->
 <br />
 <div align="center">
-
+<span id="readme-top"></span>
 <h3 align="center">Tranga-Website</h3>
 
   <p align="center">
@@ -14,45 +9,48 @@
   <p align="center">
     This is the Website for <a href="https://github.com/C9Glax/tranga">Tranga</a> (API)  
   </p>
+
+  ![GitHub License](https://img.shields.io/github/license/C9glax/tranga-website)
+
+  <table>
+    <tr>
+      <th><img alt="GitHub branch check runs" src="https://img.shields.io/github/check-runs/c9glax/tranga-website/master?label=master"></th>
+      <td><img alt="Last Run" src="https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fapi.github.com%2Frepos%2Fc9glax%2Ftranga-website%2Factions%2Fworkflows%2Fdocker-image-master.yml%2Fruns%3Fper_page%3D1&query=workflow_runs%5B0%5D.created_at&label=Last%20Run"></td>
+    </tr>
+    <tr>
+      <th><img alt="GitHub branch check runs" src="https://img.shields.io/github/check-runs/c9glax/tranga-website/cuttingedge?label=cuttingedge"></th>
+      <td><img alt="Last Run" src="https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fapi.github.com%2Frepos%2Fc9glax%2Ftranga-website%2Factions%2Fworkflows%2Fdocker-image-cuttingedge.yml%2Fruns%3Fper_page%3D1&query=workflow_runs%5B0%5D.created_at&label=Last%20Run"></td>
+    </tr>
+    <tr>
+      <th><img alt="GitHub branch check runs" src="https://img.shields.io/github/check-runs/c9glax/tranga-website/vite-react-ts?label=vite-react-ts"></th>
+      <td><img alt="Last Run" src="https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fapi.github.com%2Frepos%2Fc9glax%2Ftranga-website%2Factions%2Fworkflows%2Fdocker-image-vite-react-ts.yml%2Fruns%3Fper_page%3D1&query=workflow_runs%5B0%5D.created_at&label=Last%20Run"></td>
+    </tr>
+  </table>
 </div>
 
 
 
-<!-- TABLE OF CONTENTS -->
-<details>
-  <summary>Table of Contents</summary>
-  <ol>
-    <li>
-      <a href="#about-the-project">About The Project</a>
-      <ul>
-        <li><a href="#built-with">Built With</a></li>
-      </ul>
-    </li>
-    <li>
-      <a href="#getting-started">Getting Started</a>
-    </li>
-    <li><a href="#roadmap">Roadmap</a></li>
-    <li><a href="#contributing">Contributing</a></li>
-    <li><a href="#license">License</a></li>
-    <li><a href="#acknowledgments">Acknowledgments</a></li>
-  </ol>
-</details>
-
-
-
 <!-- ABOUT THE PROJECT -->
+## Screenshots
+
+| ![Main Page](Screenshots/Screenshot%202025-06-17%20at%2001-15-08%20Tranga.png)      | ![Settings](Screenshots/Screenshot%202025-06-17%20at%2001-15-23%20Tranga.png)    | ![Search Empty](Screenshots/Screenshot%202025-06-17%20at%2001-15-36%20Tranga.png) |
+|-------------------------------------------------------------------------------------|----------------------------------------------------------------------------------|-----------------------------------------------------------------------------------|
+| ![Search Results](Screenshots/Screenshot%202025-06-17%20at%2001-16-32%20Tranga.png) | ![Manga Popup](Screenshots/Screenshot%202025-06-17%20at%2001-16-43%20Tranga.png) | ![Jobs Drawer](Screenshots/Screenshot%202025-06-17%20at%2001-17-37%20Tranga.png)  |
+
 ## About The Project
 
-Tranga-Website is the Web-frontend to [Tranga](https://github.com/C9Glax/tranga) (the API). It displays information aquired from Tranga and can create Jobs (Manga-Downloads).
+Tranga-Website is the Web-frontend to [Tranga](https://github.com/C9Glax/tranga) (the API).
 
 ### What this does do (and nothing else)
 
-This repo makes HTTP-requests to the [Tranga-API](https://github.com/C9Glax/tranga) to display it's present configuration.
+This project makes HTTP-requests to the [Tranga-API](https://github.com/C9Glax/tranga) to display and modify the present configuration.
 
-### Built With
+## Built With
 
 - nginx
-- HTML, CSS, and barebones Javascript
+- vite
+- react
+- typescript
 - 💙 Blåhaj 🦈
 
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
@@ -60,49 +58,17 @@ This repo makes HTTP-requests to the [Tranga-API](https://github.com/C9Glax/tran
 <!-- GETTING STARTED -->
 ## Getting Started
 
-There is a single release:
-
-
-### Docker
-
-Download [docker-compose.yaml](https://github.com/C9Glax/tranga-website/blob/cuttingedge/docker-compose.yaml) and configure to your needs. 
-The `docker-compose` also includes [Tranga](https://github.com/C9Glax/tranga) as backend. For its configuration refer to the repo README.
-
-<!-- ROADMAP -->
-## Roadmap
-
-- [ ] ❓
-
-See the [open issues](https://github.com/C9Glax/tranga-website/issues) for a full list of proposed features (and known issues).
-
-<p align="right">(<a href="#readme-top">back to top</a>)</p>
-
-
+Go to [Tranga](https://github.com/C9Glax/tranga?tab=readme-ov-file#getting-started) and read the README there.
 
 <!-- CONTRIBUTING -->
 ## Contributing
 
-The following is copy & pasted:
-
-Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.
-
-If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement".
-Don't forget to give the project a star! Thanks again!
-
-1. Fork the Project
-2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
-3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
-4. Push to the Branch (`git push origin feature/AmazingFeature`)
-5. Open a Pull Request
-
-<p align="right">(<a href="#readme-top">back to top</a>)</p>
-
-
+Go to [Tranga](https://github.com/C9Glax/tranga?tab=readme-ov-file#contributing) and read the README there.
 
 <!-- LICENSE -->
 ## License
 
-Distributed under the GNU GPLv3  License. See `LICENSE.txt` for more information.
+See `LICENSE.txt` for more information.
 
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
 

Website/apiConnector.js

@@ -1,344 +0,0 @@
-if(getCookie("apiUri") != ""){
-    apiUri = getCookie("apiUri");
-}
-setCookie("apiUri", apiUri);
-
-function setCookie(cname, cvalue) {
-  const d = new Date();
-  d.setTime(d.getTime() + (365*24*60*60*1000));
-  let expires = "expires="+ d.toUTCString();
-  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/;samesite=strict";
-}
-
-function getCookie(cname) {
-    let name = cname + "=";
-    let decodedCookie = decodeURIComponent(document.cookie);
-    let ca = decodedCookie.split(';');
-    for(let i = 0; i < ca.length; i++) {
-        let c = ca[i];
-        while (c.charAt(0) == ' ') {
-            c = c.substring(1);
-        }
-        if (c.indexOf(name) == 0) {
-            return c.substring(name.length, c.length);
-        }
-    }
-    return "";
-}
-
-async function GetData(uri){
-    let request = await fetch(uri, {
-        method: 'GET',
-        headers: {
-            'Accept': 'application/json'
-        }
-    });
-    let json = await request.json();
-    return json;
-}
-
-async function PostData(uri){
-    let request = await fetch(uri, {
-        method: 'POST'
-    });
-    //console.log(request);
-}
-
-function DeleteData(uri){
-    fetch(uri, {
-        method: 'DELETE'
-    });
-}
-
-async function Ping(){
-  let ret = await GetData(`${apiUri}/Ping`);
-  return ret;
-}
-
-async function GetAvailableControllers(){
-    var uri = apiUri + "/Connectors";
-    let json = await GetData(uri);
-    return json;
-}
-
-async function GetPublicationFromConnector(connector, title){
-  var uri;
-  if(title.includes("http")){
-    uri = `${apiUri}/Manga/FromConnector?connector=${connector}&url=${title}`;
-  }else{
-    uri = `${apiUri}/Manga/FromConnector?connector=${connector}&title=${title}`;
-  }
-  let json = await GetData(uri);
-  return json;
-}
-
-async function GetChapters(connector, internalId, language){
-    var uri = `${apiUri}/Manga/Chapters?connector=${connector}&internalId=${internalId}&translatedLanguage=${language}`;
-    let json = await GetData(uri);
-    return json;
-}
-
-function GetCoverUrl(internalId){
-  return `${apiUri}/Manga/Cover?internalId=${internalId}`;
-}
-
-async function GetAllJobs(){
-	var uri = `${apiUri}/Jobs`;
-	let json = await GetData(uri);
-	return json;
-}
-
-async function GetRunningJobs(){
-    var uri = `${apiUri}/Jobs/Running`;
-    let json = await GetData(uri);
-    return json;
-}
-
-async function GetWaitingJobs(){
-    var uri = `${apiUri}/Jobs/Waiting`;
-    let json = await GetData(uri);
-    return json;
-}
-
-async function GetMonitorJobs(){
-  var uri = `${apiUri}/Jobs/MonitorJobs`;
-  let json = await GetData(uri);
-  return json;
-}
-
-async function GetProgress(jobId){
-    var uri = `${apiUri}/Jobs/Progress?jobId=${jobId}`;
-    let json = await GetData(uri);
-    return json;
-}
-
-async function GetSettings(){
-    var uri = `${apiUri}/Settings`;
-    let json = await GetData(uri);
-    return json;
-}
-
-async function GetAvailableNotificationConnectors(){
-	var uri = `${apiUri}/NotificationConnectors/Types`;
-	let json = await GetData(uri);
-	return json;
-}
-
-async function GetNotificationConnectors(){
-	var uri = `${apiUri}/NotificationConnectors`;
-	let json = await GetData(uri);
-	return json;
-}
-
-async function GetAvailableLibraryConnectors(){
-	var uri = `${apiUri}/LibraryConnectors/Types`;
-	let json = await GetData(uri);
-	return json;
-}
-
-async function GetLibraryConnectors(){
-	var uri = `${apiUri}/LibraryConnectors`;
-	let json = await GetData(uri);
-	return json;
-}
-
-async function GetRateLimits() {
-    var uri = `${apiUri}/Settings/customRequestLimit`
-    let json = await GetData(uri);
-    return json;
-}
-
-function CreateMonitorJob(connector, internalId, language){
-    var uri = `${apiUri}/Jobs/MonitorManga?connector=${connector}&internalId=${internalId}&interval=03:00:00&translatedLanguage=${language}`;
-    PostData(uri);
-}
-
-function CreateDownloadNewChaptersJob(connector, internalId, language){
-    var uri = `${apiUri}/Jobs/DownloadNewChapters?connector=${connector}&internalId=${internalId}&translatedLanguage=${language}`;
-    PostData(uri);
-}
-
-function StartJob(jobId){
-    var uri = `${apiUri}/Jobs/StartNow?jobId=${jobId}`;
-    PostData(uri);
-}
-
-function UpdateDownloadLocation(downloadLocation){
-    var uri = `${apiUri}/Settings/UpdateDownloadLocation?downloadLocation=${downloadLocation}`;
-    PostData(uri);	
-}
-
-function RefreshLibraryMetadata() {
-    var uri = `${apiUri}/Jobs/UpdateMetadata`;
-    PostData(uri);
-}
-
-async function DownloadLogs() {
-    var uri = `${apiUri}/LogFile`;
-
-    //Below taken from https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream
-    fetch(uri)
-    .then((response) => response.body)
-    .then((rb) => {
-      const reader = rb.getReader();
-  
-      return new ReadableStream({
-        start(controller) {
-          // The following function handles each data chunk
-          function push() {
-            // "done" is a Boolean and value a "Uint8Array"
-            reader.read().then(({ done, value }) => {
-              // If there is no more data to read
-              if (done) {
-                console.log("done", done);
-                controller.close();
-                return;
-              }
-              // Get the data and send it to the browser via the controller
-              controller.enqueue(value);
-              // Check chunks by logging to the console
-              console.log(done, value);
-              push();
-            });
-          }
-  
-          push();
-        },
-      });
-    })
-    .then((stream) =>
-      // Respond with our stream
-      new Response(stream, { headers: { "Content-Type": "text/html" } }).text(),
-    )
-    .then((result) => {
-      // Do things with result
-      //console.log(result);
-
-      //Below download taken from https://stackoverflow.com/questions/3665115/how-to-create-a-file-in-memory-for-user-to-download-but-not-through-server
-      var element = document.createElement('a');
-      element.setAttribute('href', 'data:text/plain;charset-utf-8,' + encodeURIComponent(result));
-      var newDate = new Date();
-      var filename = "Tranga_Logs_" + newDate.today() + "_" + newDate.timeNow() + ".log";
-      element.setAttribute('download', filename);
-      element.click();
-    });
-}
-
-//Following date-time code taken from: https://stackoverflow.com/questions/10211145/getting-current-date-and-time-in-javascript
-// For todays date;
-Date.prototype.today = function () { 
-    return ((this.getDate() < 10)?"0":"") + this.getDate() +"/"+(((this.getMonth()+1) < 10)?"0":"") + (this.getMonth()+1) +"/"+ this.getFullYear();
-}
-
-// For the time now
-Date.prototype.timeNow = function () {
-     return ((this.getHours() < 10)?"0":"") + this.getHours() +"_"+ ((this.getMinutes() < 10)?"0":"") + this.getMinutes() +"_"+ ((this.getSeconds() < 10)?"0":"") + this.getSeconds();
-}
-
-//Komga
-function UpdateKomga(komgaUrl, komgaAuth){
-    var uri = `${apiUri}/LibraryConnectors/Update?libraryConnector=Komga&komgaUrl=${komgaUrl}&komgaAuth=${komgaAuth}`;
-    PostData(uri);
-}
-
-function ResetKomga(){
-    var uri = `${apiUri}/LibraryConnectors/Reset?libraryConnector=Komga`;
-    PostData(uri);
-}
-
-function TestKomga(komgaUrl, komgaAuth){
-    var uri = `${apiUri}/LibraryConnectors/Test?libraryConnector=Komga&komgaUrl=${komgaUrl}&komgaAuth=${komgaAuth}`;
-    PostData(uri);
-}
-
-
-//Kavita
-function UpdateKavita(kavitaUrl, kavitaUsername, kavitaPassword){
-    var uri = `${apiUri}/LibraryConnectors/Update?libraryConnector=Kavita&kavitaUrl=${kavitaUrl}&kavitaUsername=${kavitaUsername}&kavitaPassword=${kavitaPassword}`;
-    PostData(uri);
-}
-
-function ResetKavita(){
-    var uri = `${apiUri}/LibraryConnectors/Reset?libraryConnector=Kavita`;
-    PostData(uri);
-}
-
-function TestKavita(kavitaUrl, kavitaUsername, kavitaPassword){
-    var uri = `${apiUri}/LibraryConnectors/Test?libraryConnector=Kavita&kavitaUrl=${kavitaUrl}&kavitaUsername=${kavitaUsername}&kavitaPassword=${kavitaPassword}`;
-    PostData(uri);
-}
-
-//Gotify
-function UpdateGotify(gotifyUrl, gotifyAppToken){
-    var uri = `${apiUri}/NotificationConnectors/Update?notificationConnector=Gotify&gotifyUrl=${gotifyUrl}&gotifyAppToken=${gotifyAppToken}`;
-    PostData(uri);
-}
-
-function ResetGotify(){
-    var uri = `${apiUri}/NotificationConnectors/Reset?notificationConnector=Gotify`;
-    PostData(uri);
-}
-
-function TestGotify(gotifyUrl, gotifyAppToken){
-    var uri = `${apiUri}/NotificationConnectors/Test?notificationConnector=Gotify&gotifyUrl=${gotifyUrl}&gotifyAppToken=${gotifyAppToken}`;
-    PostData(uri);
-}
-
-//LunaSea
-function UpdateLunaSea(lunaseaWebhook){
-    var uri = `${apiUri}/NotificationConnectors/Update?notificationConnector=LunaSea&lunaseaWebhook=${lunaseaWebhook}`;
-    PostData(uri);
-}
-
-function ResetLunaSea(){
-    var uri = `${apiUri}/NotificationConnectors/Reset?notificationConnector=LunaSea`;
-    PostData(uri);
-}
-
-function TestLunaSea(lunaseaWebhook){
-    var uri = `${apiUri}/NotificationConnectors/Test?notificationConnector=LunaSea&lunaseaWebhook=${lunaseaWebhook}`;
-    PostData(uri);
-}
-
-//Ntfy
-function UpdateNtfy(ntfyEndpoint, ntfyAuth){
-    var uri = `${apiUri}/NotificationConnectors/Update?notificationConnector=Ntfy&ntfyUrl=${ntfyEndpoint}&ntfyAuth=${ntfyAuth}`;
-    PostData(uri);
-}
-
-function ResetNtfy(){
-    var uri = `${apiUri}/NotificationConnectors/Reset?notificationConnector=Ntfy`;
-    PostData(uri);
-}
-
-function TestNtfy(ntfyEndpoint, ntfyAuth){
-    var uri = `${apiUri}/NotificationConnectors/Test?notificationConnector=Ntfy&ntfyUrl=${ntfyEndpoint}&ntfyAuth=${ntfyAuth}`;
-    PostData(uri);
-}
-
-function UpdateUserAgent(userAgent){
-    var uri = `${apiUri}/Settings/userAgent?userAgent=${userAgent}`;
-    PostData(uri);
-}
-
-function UpdateRateLimit(byteValue, rateLimit) {
-    var uri = `${apiUri}/Settings/customRequestLimit?requestType=${byteValue}&requestsPerMinute=${rateLimit}`;
-    PostData(uri);
-}
-
-function RemoveJob(jobId){
-    var uri = `${apiUri}/Jobs?jobId=${jobId}`;
-    DeleteData(uri);
-}
-
-function CancelJob(jobId){
-    var uri = `${apiUri}/Jobs/Cancel?jobId=${jobId}`;
-    PostData(uri);
-}
-
-async function GetLogmessages(count){
-	var uri = `${apiUri}/LogMessages?count=${count}`;
-	let json = await GetData(uri);
-    console.log(json);
-	return json;
-}

Website/connector-icons/komga.svg

@@ -1,113 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-        xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
-        xmlns:dc="http://purl.org/dc/elements/1.1/"
-        xmlns:cc="http://creativecommons.org/ns#"
-        xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-        xmlns="http://www.w3.org/2000/svg"
-        xmlns:xlink="http://www.w3.org/1999/xlink"
-        xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-        xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-        height="512pt"
-        viewBox="0 0 512 512"
-        width="512pt"
-        version="1.1"
-        id="svg4586"
-        sodipodi:docname="komga - Copy.svg"
-        inkscape:version="0.92.4 (5da689c313, 2019-01-14)">
-    <metadata
-            id="metadata4592">
-        <rdf:RDF>
-            <cc:Work
-                    rdf:about="">
-                <dc:format>image/svg+xml</dc:format>
-                <dc:type
-                        rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
-            </cc:Work>
-        </rdf:RDF>
-    </metadata>
-    <defs
-            id="defs4590">
-        <linearGradient
-                id="linearGradient6082"
-                osb:paint="solid">
-            <stop
-                    style="stop-color:#000000;stop-opacity:1;"
-                    offset="0"
-                    id="stop6080"/>
-        </linearGradient>
-        <linearGradient
-                id="linearGradient6076"
-                osb:paint="solid">
-            <stop
-                    style="stop-color:#000000;stop-opacity:1;"
-                    offset="0"
-                    id="stop6074"/>
-        </linearGradient>
-        <linearGradient
-                inkscape:collect="always"
-                xlink:href="#linearGradient6082"
-                id="linearGradient6084"
-                x1="77.866812"
-                y1="386.00679"
-                x2="217.20259"
-                y2="386.00679"
-                gradientUnits="userSpaceOnUse"/>
-    </defs>
-    <sodipodi:namedview
-            pagecolor="#ffffff"
-            bordercolor="#666666"
-            borderopacity="1"
-            objecttolerance="10"
-            gridtolerance="10"
-            guidetolerance="10"
-            inkscape:pageopacity="0"
-            inkscape:pageshadow="2"
-            inkscape:window-width="1656"
-            inkscape:window-height="1368"
-            id="namedview4588"
-            showgrid="false"
-            inkscape:zoom="1.2512475"
-            inkscape:cx="264.73114"
-            inkscape:cy="305.20589"
-            inkscape:window-x="-7"
-            inkscape:window-y="0"
-            inkscape:window-maximized="0"
-            inkscape:current-layer="svg4586"/>
-    <path
-            d="m512 256c0 141.386719-114.613281 256-256 256s-256-114.613281-256-256 114.613281-256 256-256 256 114.613281 256 256zm0 0"
-            fill="#005ed3"
-            id="path4556"/>
-    <path
-            d="m 512,256 c 0,-11.71094 -0.80469,-23.23047 -2.32422,-34.52344 L 382.48047,94.28125 320.52344,121.85938 256,56.933594 212.69531,131.30469 129.51953,94.28125 141.86719,178.42187 49.949219,193.81641 114.32031,256 l -64.371091,62.18359 82.121091,82.16016 -2.55078,17.375 91.95703,91.95703 C 232.76953,511.19531 244.28906,512 256,512 397.38672,512 512,397.38672 512,256 Z"
-            id="path4558"
-            inkscape:connector-curvature="0"
-            style="fill:#00459f"
-            sodipodi:nodetypes="scccccccccccccss"/>
-    <path
-            d="m256 86.742188 37.109375 63.738281 70.574219-31.414063-10.527344 71.71875 77.078125 12.910156-54.144531 52.304688 54.144531 52.304688-77.078125 12.910156 10.527344 71.71875-70.574219-31.414063-37.109375 63.738281-37.109375-63.738281-70.574219 31.414063 10.527344-71.71875-77.078125-12.910156 54.144531-52.304688-54.144531-52.304688 77.078125-12.910156-10.527344-71.71875 70.574219 31.414063zm0 0"
-            fill="#ff0335"
-            id="path4560"/>
-    <path
-            d="m430.230469 308.300781-77.070313 12.910157 10.519532 71.71875-70.570313-31.410157-37.109375 63.742188v-338.523438l37.109375 63.742188 70.570313-31.410157-6.757813 46.101563-3.761719 25.617187 58.800782 9.851563 18.269531 3.058594-13.390625 12.929687-40.75 39.371094 11.378906 10.988281zm0 0"
-            fill="#c2001b"
-            id="path4562"/>
-    <path
-            d="m256 455.066406-43.304688-74.371094-83.175781 37.023438 12.347657-84.140625-91.917969-15.394531 64.371093-62.183594-64.371093-62.183594 91.917969-15.394531-12.347657-84.140625 83.179688 37.023438 43.300781-74.371094 43.304688 74.371094 83.175781-37.023438-12.347657 84.140625 91.917969 15.394531-64.371093 62.183594 64.371093 62.183594-91.917969 15.398437 12.347657 84.136719-83.175781-37.023438zm-30.917969-112.722656 30.917969 53.101562 30.917969-53.101562 57.964843 25.800781-8.703124-59.292969 62.238281-10.425781-43.917969-42.425781 43.917969-42.425781-62.238281-10.425781 8.703124-59.292969-57.964843 25.800781-30.917969-53.101562-30.917969 53.101562-57.964843-25.800781 8.703124 59.292969-62.238281 10.425781 43.917969 42.425781-43.917969 42.425781 62.238281 10.425781-8.703124 59.292969zm0 0"
-            fill="#ffdf47"
-            id="path4564"/>
-    <path
-            d="m403.308594 261.441406-5.628906-5.441406 25.160156-24.300781 39.210937-37.878907-55.75-9.339843-36.171875-6.058594 2.800782-19.09375 9.550781-65.046875-83.179688 37.019531-43.300781-74.371093v59.621093l30.921875 53.109375 57.957031-25.808594-3.910156 26.667969-2.546875 17.378907-2.242187 15.25 2.480468.421874 59.761719 10.007813-43.921875 42.421875 16.96875 16.390625 26.953125 26.03125-62.242187 10.429687 8.699218 59.296876-57.957031-25.808594-30.921875 53.109375v59.621093l43.300781-74.371093 83.179688 37.019531-12.351563-84.140625 91.921875-15.398437zm0 0"
-            fill="#fec000"
-            id="path4566"/>
-    <g
-            aria-label="K"
-            transform="matrix(1.1590846,-0.34467221,0.22789693,0.794981,0,0)"
-            style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:296.55969238px;line-height:125%;font-family:Impact;-inkscape-font-specification:Impact;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:1.54528999;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-            id="text4596">
-        <path
-                d="m 220.91497,266.9035 -34.89789,105.85211 38.2284,128.58643 H 161.2555 L 136.63873,400.84769 V 501.34204 H 75.676021 V 266.9035 h 60.962709 v 91.08205 l 27.07845,-91.08205 z"
-                style="font-size:296.55969238px;fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:1.54528999;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-                id="path824"/>
-    </g>
-</svg>

Website/connector-icons/ntfy.svg

@@ -1,40 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="50mm" height="50mm" viewBox="0 0 50 50">
-    <defs>
-        <linearGradient id="b">
-            <stop offset="0" style="stop-color:#348878;stop-opacity:1"/>
-            <stop offset="1" style="stop-color:#52bca6;stop-opacity:1"/>
-        </linearGradient>
-        <linearGradient id="a">
-            <stop offset="0" style="stop-color:#348878;stop-opacity:1"/>
-            <stop offset="1" style="stop-color:#56bda8;stop-opacity:1"/>
-        </linearGradient>
-        <linearGradient xlink:href="#a" id="e" x1="160.722" x2="168.412" y1="128.533" y2="134.326" gradientTransform="matrix(3.74959 0 0 3.74959 -541.79 -387.599)" gradientUnits="userSpaceOnUse"/>
-        <linearGradient xlink:href="#b" id="c" x1=".034" x2="50.319" y1="0" y2="50.285" gradientTransform="matrix(.99434 0 0 .99434 -.034 0)" gradientUnits="userSpaceOnUse"/>
-        <filter id="d" width="1.176" height="1.211" x="-.076" y="-.092" style="color-interpolation-filters:sRGB">
-            <feFlood flood-color="#fff" flood-opacity=".192" result="flood"/>
-            <feComposite in="flood" in2="SourceGraphic" operator="in" result="composite1"/>
-            <feGaussianBlur in="composite1" result="blur" stdDeviation="4"/>
-            <feOffset dx="3" dy="2.954" result="offset"/>
-            <feComposite in="SourceGraphic" in2="offset" result="composite2"/>
-        </filter>
-    </defs>
-    <g style="display:inline">
-        <path d="M0 0h50v50H0z" style="fill:url(#c);fill-opacity:1;stroke:none;stroke-width:.286502;stroke-linejoin:bevel"/>
-    </g>
-    <g style="display:inline">
-        <path d="M50.4 46.883c-9.168 0-17.023 7.214-17.023 16.387v.007l.09 71.37-2.303 16.992 31.313-8.319h77.841c9.17 0 17.024-7.224 17.024-16.396V63.27c0-9.17-7.85-16.383-17.016-16.387h-.008zm0 11.566h89.926c3.222.004 5.45 2.347 5.45 4.82v63.655c0 2.475-2.232 4.82-5.457 4.82h-79.54l-15.908 4.807.162-.938-.088-72.343c0-2.476 2.23-4.82 5.455-4.82z" style="color:#fff;display:inline;fill:#fff;stroke:none;stroke-width:1.93113;-inkscape-stroke:none;filter:url(#d)" transform="scale(.26458)"/>
-    </g>
-    <g style="display:inline">
-        <path d="M88.2 95.309H64.92c-1.601 0-2.91 1.236-2.91 2.746l.022 18.602-.435 2.506 6.231-1.881H88.2c1.6 0 2.91-1.236 2.91-2.747v-16.48c0-1.51-1.31-2.746-2.91-2.746z" style="color:#fff;fill:url(#e);stroke:none;stroke-width:2.49558;-inkscape-stroke:none" transform="translate(-51.147 -81.516)"/>
-        <path d="M50.4 46.883c-9.168 0-17.023 7.214-17.023 16.387v.007l.09 71.37-2.303 16.992 31.313-8.319h77.841c9.17 0 17.024-7.224 17.024-16.396V63.27c0-9.17-7.85-16.383-17.016-16.387h-.008zm0 11.566h89.926c3.222.004 5.45 2.347 5.45 4.82v63.655c0 2.475-2.232 4.82-5.457 4.82h-79.54l-15.908 4.807.162-.938-.088-72.343c0-2.476 2.23-4.82 5.455-4.82z" style="color:#fff;fill:#fff;stroke:none;stroke-width:1.93113;-inkscape-stroke:none" transform="scale(.26458)"/>
-        <g style="font-size:8.48274px;font-family:sans-serif;letter-spacing:0;word-spacing:0;fill:#fff;stroke:none;stroke-width:.525121">
-            <path d="M62.57 116.77v-1.312l3.28-1.459q.159-.068.306-.102.158-.045.283-.068l.271-.022v-.09q-.136-.012-.271-.046-.125-.023-.283-.057-.147-.045-.306-.113l-3.28-1.459v-1.323l5.068 2.319v1.413z" style="color:#fff;-inkscape-font-specification:&quot;JetBrains Mono, Bold&quot;;fill:#fff;stroke:none;-inkscape-stroke:none" transform="matrix(1.45366 0 0 1.72815 -75.122 -171.953)"/>
-            <path d="M62.309 110.31v1.903l3.437 1.53.022.007-.022.008-3.437 1.53v1.892l.37-.17 5.221-2.39v-1.75zm.525.817 4.541 2.08v1.076l-4.541 2.078v-.732l3.12-1.389.003-.002a1.56 1.56 0 0 1 .258-.086h.006l.008-.002c.094-.027.176-.047.246-.06l.498-.041v-.574l-.24-.02a1.411 1.411 0 0 1-.231-.04l-.008-.001-.008-.002a9.077 9.077 0 0 1-.263-.053 2.781 2.781 0 0 1-.266-.097l-.004-.002-3.119-1.39z"
-                  style="color:#fff;-inkscape-font-specification:&quot;JetBrains Mono, Bold&quot;;fill:#fff;stroke:none;-inkscape-stroke:none" transform="matrix(1.45366 0 0 1.72815 -75.122 -171.953)"/>
-        </g>
-        <g style="font-size:8.48274px;font-family:sans-serif;letter-spacing:0;word-spacing:0;fill:#fff;stroke:none;stroke-width:.525121">
-            <path d="M69.171 117.754h5.43v1.278h-5.43Z" style="color:#fff;-inkscape-font-specification:&quot;JetBrains Mono, Bold&quot;;fill:#fff;stroke:none;-inkscape-stroke:none" transform="matrix(1.44935 0 0 1.66414 -74.104 -166.906)"/>
-            <path d="M68.908 117.492v1.802h5.955v-1.802zm.526.524h4.904v.754h-4.904z" style="color:#fff;-inkscape-font-specification:&quot;JetBrains Mono, Bold&quot;;fill:#fff;stroke:none;-inkscape-stroke:none" transform="matrix(1.44935 0 0 1.66414 -74.104 -166.906)"/>
-        </g>
-    </g>
-</svg>

Website/defaultApiUri.js

@@ -1 +0,0 @@
-let apiUri = `${window.location.protocol}//${window.location.host.split(':')[0]}:6531`

Website/index.html

@@ -1,301 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <title>Tranga</title>
-  <link id='basestyle' rel="stylesheet" href="styles/base.css">
-  <link id='librarystyle' rel="stylesheet" href="styles/style_default.css">
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
-</head>
-<body>
-  <wrapper>
-
-    <topbar>
-      <titlebox>
-        <img alt="website image is Blahaj" src="media/blahaj.png">
-        <span>Tranga</span>
-      </titlebox>
-      <spacer></spacer>
-      <img id="filterFunnel" src="media/filter-funnel.svg" height="50%" alt="filterFunnel">
-      <img id="settingscog" src="media/settings-cogwheel.svg" height="100%" alt="settingscog">
-    </topbar>
-
-    <filter-box id="filterBox">
-      <border-bar>
-        <popup-title>Filter by: </popup-title>
-        <popup-close onclick="filterBox.classList.toggle('animate')" >&times</popup-close>
-      </border-bar>
-      <popup-content id="filterContent">
-        <div class="popup-section">
-          NAME:
-          <div class="section-content">
-            <label for="searchbox"></label><input id="searchbox" placeholder="Title" type="text">
-          </div>
-        </div>
-        <div class = "popup-section">
-          CONNECTOR:
-          <div class="section-content" id="connectorFilterBox">
-          </div>
-        </div>
-        <div class = "popup-section">
-          STATUS:
-          <div class="section-content" id="statusFilterBox">
-          </div>
-        </div>
-      </popup-content>
-      <border-bar-button onclick="ClearFilter()" class="clearFilter">Clear Filter</border-bar-button>
-    </filter-box>
-
-
-    <viewport>
-      <div id="loaderdiv">
-        <blur-background></blur-background>
-        <div id="loader"></div>
-        <p id="loaderText">Check your Settings > API-URI</p>
-      </div>
-      <content>
-        <div id="addPublication">
-          <p>+</p>
-        </div>
-        <publication onclick="ShowNewMangaSearch()">
-          <img alt="cover" src="media/cover.jpg">
-          <publication-information>
-            <connector-name class="pill">Sample</connector-name>
-            <publication-name>Best Manga there is</publication-name>
-          </publication-information>
-        </publication>
-      </content>
-      
-      <popup id="newMangaPopup">
-        <blur-background id="blurBackgroundNewMangaPopup" onclick="newMangaPopup.style.display = 'none';"></blur-background>
-        <div id="newMangaPopupSelector">
-          <select id="newMangaConnector" />
-          <input type="text" placeholder="Title" id="newMangaTitle" />
-          <select id="newMangaTranslatedLanguage">
-            <option selected="selected">en</option>
-            <option>it</option>
-            <option>de</option>
-          </select>
-        </div>
-        <div id="newMangaResult"></div>
-      </popup>
-      
-      <popup id="settingsPopup">
-        <blur-background id="blurBackgroundSettingsPopup" onclick="settingsPopup.style.display = 'none';"></blur-background>
-        <popup-window>
-          <border-bar>
-            <popup-title>Settings</popup-title>
-            <popup-close onclick="settingsPopup.style.display = 'none'">&times</popup-close>
-          </border-bar>
-          <popup-content>
-
-            <div class="popup-section">
-              TRANGA
-              <div class="section-content">
-                <div class="section-item dyn-height">
-                  <span class="title">API Settings</span>
-                  <row><label for="settingApiUri">API URI:</label><input placeholder="https://" type="text" id="settingApiUri"></row>
-                  <row><label for="userAgent">User Agent:</label><input placeholder="UserAgent" id="userAgent" type="text"></row>
-                  <row>
-                    <border-bar-button class="section" onclick="RefreshLibraryMetadata()">Refresh Library Metadata</border-bar-button>
-                    <border-bar-button class="section" onclick="DownloadLogs()">Download Logs</border-bar-button>
-                  </row>
-                </div>
-                <div class="section-item dyn-height">
-                  <span class="title">Rate Limits</span>
-                  <row><label for="DefaultRL">Default:</label><input id="defaultRL" type="text" ></row>
-                  <row><label for="CoverRL">Manga Covers:</label><input id="coverRL" type="text"></row>
-                  <row><label for="ImageRL">Manga Images:</label><input id="imageRL" type="text"></row>
-                  <row><label for="InfoRL">Manga Info:</label><input id="infoRL" type="text"></row>
-                </div>
-                <div class="section-item dyn-height">
-                  <span class="title">Appearance</span>
-                  <row><label for="cssStyle">Library Style:</label><select id="cssStyle">
-                    <option id="card_compact" value="card_compact">Cards (Compact)</option>
-                    <option id="card_hover" value="card_hover">Cards (Hover)</option>
-                  </select></row>
-                </div>
-              </div>
-            </div>
-
-            <div class="popup-section">
-              MANGA SOURCES
-              <div class="section-content">
-                <!-- <div class="section-item dyn-height">
-                  <span class="title"><img src="connector-icons/manganato.png"><a href="https://manganato.com">MangaNato</a></span>
-
-                </div> -->
-                <!-- <div class="section-item dyn-height">
-                  <span class="title"><img src="connector-icons/mangasee.png"><a href="https://mangasee123.com">MangaSee</a></span>
-                  
-                </div> -->
-                <div class="section-item dyn-height">
-                  <span class="title"><img src="connector-icons/mangadex-logo.svg"><a href="https://mangadex.org">MangaDex</a></span>
-                  <row><label for="mDexFeedRL">Feed Rate Limit:</label><input id="mDexFeedRL" type="text"></row>
-                  <row><label for="mDexImageRL">Image Rate Limit:</label><input id="mDexImageRL" type="text"></row>
-                </div>
-                <!-- <div class="section-item dyn-height">
-                  <span class="title"><img src="connector-icons/mangakatana.png"><a href="https://mangakatana.com">MangaKatana</a></span>
-                  
-                </div> -->
-                <!-- <div class="section-item dyn-height">
-                  <span class="title"><img src="connector-icons/mangaworld.png"><a href="https://www.mangaworld.ac">MangaWorld</a></span>
-                  
-                </div> -->
-                <!-- <div class="section-item dyn-height">
-                  <span class="title"><img src="connector-icons/bato.ico"><a href="https://bato.to">Bato</a></span>
-                  
-                </div> -->
-                <!-- <div class="section-item dyn-height">
-                  <span class="title"><img src="connector-icons/mangalife.png"><a href="https://www.manga4life.com">MangaLife</a></span>
-                  
-                </div> -->
-              </div>
-              
-            </div>
-
-            <div class="popup-section">
-              LIBRARY CONNECTORS
-              <div class="section-content">
-                <div class="section-item">
-                  <span class="title"><img src='connector-icons/komga.svg'>Komga<connector-configured id="komgaConfigured"></connector-configured></span>
-                  <label for="komgaUrl"></label><input placeholder="URL" id="komgaUrl" type="text">
-                  <label for="komgaUsername"></label><input placeholder="Username" id="komgaUsername" type="text">
-                  <label for="komgaPassword"></label><input placeholder="Password" id="komgaPassword" type="password">
-                  <div class="section-buttons-container">
-                      <span onclick="TestKomga(komgaUrl.value, utf8_to_b64(`${komgaUsername.value}:${komgaPassword.value}`))" class='section-button' id="test-connector">Test</span>
-                      <span onclick="ClearKomga()" class='section-button' id="reset">Reset</span>
-                      <span onclick="UpdateKomga(komgaUrl.value, utf8_to_b64(`${komgaUsername.value}:${komgaPassword.value}`))" class='section-button'>Apply</span>
-                  </div>
-                </div>
-                <div class="section-item">
-                  <span class="title"><img src='connector-icons/kavita.png'>Kavita<connector-configured id="kavitaConfigured"></connector-configured></span>
-                  <label for="kavitaUrl"></label><input placeholder="URL" id="kavitaUrl" type="text">
-                  <label for="kavitaUsername"></label><input placeholder="Username" id="kavitaUsername" type="text">
-                  <label for="kavitaPassword"></label><input placeholder="Password" id="kavitaPassword" type="password">
-                  <div class="section-buttons-container">
-                    <span onclick="TestKavita(kavitaUrl.value, kavitaUsername.value, kavitaPassword.value)" class='section-button' id="test-connector">Test</span>
-                    <span onclick="ClearKavita()" class='section-button' id="reset">Reset</span>
-                    <span onclick="UpdateKavita(kavitaUrl.value, kavitaUsername.value, kavitaPassword.value)" class='section-button'>Apply</span>
-                </div>
-                </div>
-              </div>
-            </div>
-
-            <div class="popup-section">
-              NOTIFICATION CONNECTORS
-                <div class="section-content">
-                  <div class="section-item">
-                    <span class="title"><img src='connector-icons/gotify-logo.png'>Gotify<connector-configured id="gotifyConfigured"></connector-configured></span>
-                    <label for="gotifyUrl"></label><input placeholder="URL" id="gotifyUrl" type="text">
-                    <label for="gotifyAppToken"></label><input placeholder="App-Token" id="gotifyAppToken" type="text">
-                    <div class="section-buttons-container">
-                      <span onclick="TestGotify(gotifyUrl.value, gotifyAppToken.value)" class='section-button' id="test-connector">Test</span>
-                      <span onclick="ClearGotify()" class='section-button' id="reset">Reset</span>
-                      <span onclick="UpdateGotify(gotifyUrl.value, gotifyAppToken.value)" class='section-button'>Apply</span>
-                  </div>
-                  </div>
-                  <div class="section-item">
-                    <span class="title"><img src='connector-icons/lunasea.png'>LunaSea<connector-configured id="lunaseaConfigured"></connector-configured></span>
-                    <label for="lunaseaWebhook"></label><input placeholder="device/:id or user/:id" id="lunaseaWebhook" type="text">
-                    <div class="section-buttons-container">
-                      <span onclick="TestLunaSea(lunaseaWebhook.value);" class='section-button' id="test-connector">Test</span>
-                      <span onclick="ClearLunasea()" class='section-button' id="reset">Reset</span>
-                      <span onclick="UpdateLunaSea(lunaseaWebhook.value);" class='section-button'>Apply</span>
-                  </div>
-                  </div>
-                  <div class="section-item">
-                    <span class="title"><img src='connector-icons/ntfy.svg'>Ntfy<connector-configured id="ntfyConfigured"></connector-configured></span>
-                    <label for="ntfyEndpoint"></label><input placeholder="URL" id="ntfyEndpoint" type="text">
-                    <label for="ntfyAuth"></label><input placeholder="Auth" id="ntfyAuth" type="text">
-                    <div class="section-buttons-container">
-                      <span onclick="TestNtfy(ntfyEndpoint.value, ntfyAuth.value);" class='section-button' id="test-connector">Test</span>
-                      <span onclick="ClearNtfy()" class='section-button' id="reset">Reset</span>
-                      <span onclick="UpdateNtfy(ntfyEndpoint.value, ntfyAuth.value);" class='section-button'>Apply</span>
-                  </div>
-                  </div>
-                </div>
-            </div> 
-          </popup-content>
-
-          <border-bar>
-            <div class="button-container">
-              <border-bar-button class="primary" onclick="UpdateSettings()">Apply Settings</border-bar-button>
-            </div>
-          </border-bar>
-
-        </popup-window>
-      </popup>
-		
-	  <popup id="publicationViewerPopup">
-        <blur-background id="blurBackgroundPublicationPopup" onclick="publicationViewerPopup.style.display= 'none';"></blur-background>
-        <publication-viewer>
-          <img id="pubviewcover" src="media/cover.jpg" alt="cover">
-          <publication-details>
-            <publication-name id="publicationViewerName">Best Manga there is</publication-name>
-            <publication-tags id="publicationViewerTags">A Manga</publication-tags>
-            <publication-author id="publicationViewerAuthor">Glax</publication-author>
-            <publication-description id="publicationViewerDescription">
-              An interesting description. The description is very intriguing, yet wholesome.
-            </publication-description>
-            <publication-interactions>
-              <publication-starttask id="startJobButton">Start Job ▶️</publication-starttask>
-              <publication-canceltask id="cancelJobButton">Cancel Job ❌</publication-canceltask>
-              <publication-delete id="deleteJobButton">Delete Job 🗑️</publication-delete>
-              <publication-add id="createMonitorJobButton">Monitor ➕</publication-add>
-              <publication-add id="createDownloadChapterJobButton">Download Chapter 📥</publication-add>
-            </publication-interactions>
-          </publication-details>
-        </publication-viewer>
-      </popup>
-
-      <popup id="jobStatusView">
-        <blur-background id="blurBackgroundSettingsPopup" onclick="jobStatusView.style.display = 'none';"></blur-background>
-        <popup-window>
-          <border-bar>
-            <popup-title>Jobs</popup-title>
-            <popup-close onclick="jobStatusView.style.display = 'none'">&times</popup-close>
-          </border-bar>
-          <popup-content>
-
-            <div class="popup-section">
-              RUNNING JOBS
-              <div class="section-content" id="jobStatusRunning">
-                
-              </div>
-            </div>
-
-            <div class="popup-section">
-              QUEUED JOBS
-              <div class="section-content" id="jobStatusWaiting">
-                
-              </div>
-            </div>
-
-          </popup-content>
-
-          <border-bar>
-            <!-- <div class="button-container">
-              <border-bar-button class="primary" onclick="UpdateSettings()">Apply Settings</border-bar-button>
-            </div> -->
-          </border-bar>
-
-        </popup-window>
-    </viewport>
-	  
-    <footer>
-      <div onclick="ShowJobQueue();">
-        <img src="media/running.svg" alt="running"><div id="jobsRunningTag">0</div>
-      </div>
-      <div onclick="ShowJobQueue();">
-        <img src="media/queue.svg" alt="queue"><div id="jobsQueuedTag">0</div>
-      </div>
-      <p id="madeWith">Made with Blåhaj 🦈</p>
-    </footer> 
-  </wrapper>
-
-  <script src="defaultApiUri.js"></script>
-  <script src="apiConnector.js"></script>
-  <script src="interaction.js"></script>
-</body>
-</html>

Website/interaction.js

@@ -1,876 +0,0 @@
-let monitoringJobsCount = 0;
-let runningJobs = [];
-let waitingJobs = [];
-let notificationConnectorTypes = [];
-let libraryConnectorTypes = [];
-let selectedManga;
-let selectedJob;
-let searchMatch;
-
-let connectorMatch = [];
-let connectorNameMatch;
-let statusMatch = [];
-let statusNameMatch = [];
-
-const searchBox = document.querySelector("#searchbox");
-const settingsPopup = document.querySelector("#settingsPopup");
-const filterBox = document.querySelector("#filterBox");
-const settingsCog = document.querySelector("#settingscog");
-const filterFunnel = document.querySelector("#filterFunnel");
-const tasksContent = document.querySelector("content");
-const createMonitorTaskButton = document.querySelector("#createMonitoJobButton");
-const createDownloadChapterTaskButton = document.querySelector("#createDownloadChapterJobButton");
-const startJobButton = document.querySelector("#startJobButton");
-const cancelJobButton = document.querySelector("#cancelJobButton");
-const deleteJobButton = document.querySelector("#deleteJobButton");
-
-//Manga viewer popup
-const mangaViewerPopup = document.querySelector("#publicationViewerPopup");
-const mangaViewerWindow = document.querySelector("publication-viewer");
-const mangaViewerDescription = document.querySelector("#publicationViewerDescription");
-const mangaViewerName = document.querySelector("#publicationViewerName");
-const mangaViewerTags = document.querySelector("#publicationViewerTags");
-const mangaViewerAuthor = document.querySelector("#publicationViewerAuthor");
-const mangaViewCover = document.querySelector("#pubviewcover");
-
-//General Rate Limits
-const defaultRL = document.querySelector("#defaultRL");
-const coverRL = document.querySelector("#coverRL");
-const imageRL = document.querySelector("#imageRL");
-const infoRL = document.querySelector("#infoRL");
-
-//MangaDex Rate Limits
-const mDexFeedRL = document.querySelector("#mDexFeedRL");
-const mDexImageRL = document.querySelector("#mDexImageRL");
-
-//Komga
-const settingKomgaUrl = document.querySelector("#komgaUrl");
-const settingKomgaUser = document.querySelector("#komgaUsername");
-const settingKomgaPass = document.querySelector("#komgaPassword");
-
-//Kavita
-const settingKavitaUrl = document.querySelector("#kavitaUrl");
-const settingKavitaUser = document.querySelector("#kavitaUsername");
-const settingKavitaPass = document.querySelector("#kavitaPassword");
-
-//Gotify
-const settingGotifyUrl = document.querySelector("#gotifyUrl");
-const settingGotifyAppToken = document.querySelector("#gotifyAppToken");
-
-//Lunasea
-const settingLunaseaWebhook = document.querySelector("#lunaseaWebhook");
-
-//Ntfy
-const settingNtfyEndpoint = document.querySelector("#ntfyEndpoint");
-const settingNtfyAuth = document.querySelector("#ntfyAuth");
-
-//Connector Configured
-const settingKomgaConfigured = document.querySelector("#komgaConfigured");
-const settingKavitaConfigured = document.querySelector("#kavitaConfigured");
-const settingGotifyConfigured = document.querySelector("#gotifyConfigured");
-const settingLunaseaConfigured = document.querySelector("#lunaseaConfigured");
-const settingNtfyConfigured = document.querySelector("#ntfyConfigured");
-
-const settingUserAgent = document.querySelector("#userAgent");
-const settingApiUri = document.querySelector("#settingApiUri");
-const settingCSSStyle = document.querySelector('#cssStyle');
-const newMangaPopup = document.querySelector("#newMangaPopup");
-const newMangaConnector = document.querySelector("#newMangaConnector");
-const newMangaTitle = document.querySelector("#newMangaTitle");
-const newMangaResult = document.querySelector("#newMangaResult");
-const newMangaTranslatedLanguage = document.querySelector("#newMangaTranslatedLanguage");
-
-//Jobs
-const jobsRunningTag = document.querySelector("#jobsRunningTag");
-const jobsQueuedTag = document.querySelector("#jobsQueuedTag");
-const loaderdiv = document.querySelector('#loaderdiv');
-const jobStatusView = document.querySelector("#jobStatusView");
-const jobStatusRunning = document.querySelector("#jobStatusRunning");
-const jobStatusWaiting = document.querySelector("#jobStatusWaiting");
-
-function Setup(){
-  Ping().then((ret) => {
-    loaderdiv.style.display = 'none';
-    
-    GetAvailableNotificationConnectors().then((json) => {
-      //console.log(json);
-      json.forEach(connector => {
-        notificationConnectorTypes[connector.Key] = connector.Value;
-      });
-    });
-
-    GetAvailableLibraryConnectors().then((json) => {
-      //console.log(json);
-      json.forEach(connector => {
-        libraryConnectorTypes[connector.Key] = connector.Value;
-      });
-    });
-
-    GetAvailableControllers().then((json) => {
-      //console.log(json);
-      newMangaConnector.replaceChildren();
-      connectorFilterBox = document.querySelector("#connectorFilterBox");
-      connectorFilterBox.replaceChildren();
-      json.forEach(connector => {
-        //Add the connector to the New Manga dropdown        
-        var option = document.createElement('option');
-        option.value = connector;
-        option.innerText = connector;
-        newMangaConnector.appendChild(option);
-
-        //Add the connector to the filter box
-        connectorFilter = document.createElement('connector-name');
-        connectorFilter.innerText = connector;
-        connectorFilter.className = "pill";
-        connectorFilter.style.backgroundColor = stringToColour(connector);
-
-        connectorFilter.addEventListener("click", (event) => {
-          ToggleFilterConnector(connector, event);
-        });
-        connectorFilterBox.appendChild(connectorFilter);
-      });
-    });
-
-    //Add the publication status options to the filter bar
-    publicationStatusOptions = ["Ongoing", "Completed", "On Hiatus", "Cancelled", "Upcoming", "Status Unavailable"]; 
-    statusFilterBox = document.querySelector("#statusFilterBox");
-    statusFilterBox.replaceChildren();
-    publicationStatusOptions.forEach(publicationStatus => {
-      var releaseStatus = document.createElement('status-filter');
-      releaseStatus.innerText = publicationStatus;
-      releaseStatus.setAttribute("release-status", publicationStatus);
-      releaseStatus.addEventListener("click", (event) => {
-        ToggleFilterStatus(publicationStatus, event);
-      });
-
-      statusFilterBox.appendChild(releaseStatus);
-    });
-    
-    ResetContent();
-    UpdateJobs();
-    GetSettings().then((json) => {
-      //console.log(json);
-      settingApiUri.placeholder = apiUri;
-    });
-    GetRateLimits().then((json) => {
-      defaultRL.placeholder = json.Default + ' Requests/Minute';
-      coverRL.placeholder = json.MangaCover + ' Requests/Minute';
-      imageRL.placeholder = json.MangaImage + ' Requests/Minute';
-      infoRL.placeholder = json.MangaInfo + ' Requests/Minute';
-      mDexFeedRL.placeholder = json.MangaDexFeed + ' Requests/Minute';
-      mDexImageRL.placeholder = json.MangaDexImage + ' Requests/Minute';
-    });
-
-    //If the cssStyle key isn't in the local storage of the browser, then set the css style to the default and load the page
-    //Otherwise get the style key from storage and set it.
-    if (!localStorage.getItem('cssStyle')) {
-      localStorage.setItem('cssStyle', 'card_compact');
-      document.getElementById('librarystyle').setAttribute('href', 'styles/' + localStorage.getItem('cssStyle') + '.css');
-      document.getElementById('card_compact').selected = true;
-    } else {
-      css_style = localStorage.getItem('cssStyle');
-      document.getElementById('librarystyle').setAttribute('href', 'styles/' + css_style + '.css');
-      document.getElementById(css_style).selected = true;
-    }
-    setInterval(() => {
-      UpdateJobs();
-    }, 5000);
-  });
-  //Clear the previous values if any exist.
-  searchBox.value = "";
-  connectorMatch.length = 0;
-  statusMatch.length = 0;
-}
-Setup();
-
-function ToggleFilterConnector(connector, event) {
-  //console.log("Initial Array:");
-  //console.log(connectorMatch);
-  if (connectorMatch.includes(connector)) {
-    idx = connectorMatch.indexOf(connector);
-    connectorMatch.splice(idx, 1);
-    event.target.style.outline = 'none';
-    event.target.style.outlineOffset = "0px";
-  } else {
-    connectorMatch.push(connector);
-    event.target.style.outline = '4px solid var(--secondary-color)';
-    event.target.style.outlineOffset = '3px';
-  }
-  //console.log("Final Array");
-  //console.log(connectorMatch);
-  FilterResults();
-}
-
-function ToggleFilterStatus(status, event) {
-  //console.log("Initial Array:");
-  //console.log(statusMatch);
-  if (statusMatch.includes(status)) {
-    idx = statusMatch.indexOf(status);
-    statusMatch.splice(idx, 1);
-    event.target.style.outline = 'none';
-    event.target.style.outlineOffset = "0px";
-  } else {
-    statusMatch.push(status);
-    event.target.style.outline = '4px solid var(--secondary-color)';
-    event.target.style.outlineOffset = '3px';
-  }
-  //console.log("Final Array");
-  //console.log(statusMatch);
-  FilterResults();
-}
-
-function ClearFilter() {
-  searchBox.value = "";
-  statusMatch.length = 0;
-  connectorMatch.length = 0;
-  FilterResults();
-
-  //Get rid of the outlines
-  connectorFilterBox = document.querySelector("#connectorFilterBox");
-  connectorFilterBox.childNodes.forEach(connector => {
-    if (connector.nodeName.toLowerCase() == 'connector-name') {
-      connector.style.outline = 'none';
-      connector.style.outlineOffset = "0px";
-    }
-  });
-
-  statusFilterBox = document.querySelector("#statusFilterBox");
-  statusFilterBox.childNodes.forEach(publicationStatus => {
-    if (publicationStatus.nodeName.toLowerCase() == 'status-filter') {
-      publicationStatus.style.outline = 'none';
-      publicationStatus.style.outlineOffset = "0px";
-    }
-  });
-}
-
-settingCSSStyle.addEventListener("change", (event) => {
-  localStorage.setItem('cssStyle', settingCSSStyle.value);
-  document.getElementById('librarystyle').setAttribute('href', 'styles/' + localStorage.getItem('cssStyle') + '.css');
-}); 
-
-function ResetContent(){
-    //Delete everything
-    tasksContent.replaceChildren();
-    
-    //Add "Add new Task" Button
-    var add = document.createElement("div");
-    add.setAttribute("id", "addPublication")
-    var plus = document.createElement("p");
-    plus.innerText = "+";
-    add.appendChild(plus);
-    add.addEventListener("click", () => ShowNewMangaSearch());
-    tasksContent.appendChild(add);
-
-    //Populate with the monitored mangas
-    GetMonitorJobs().then((json) => {
-        //console.log(json);
-        json.forEach(job => {
-          var mangaView = CreateManga(job.manga, job.mangaConnector.name);
-          mangaView.addEventListener("click", (event) => {
-            ShowMangaWindow(job, job.manga, event, false);
-          });
-          tasksContent.appendChild(mangaView);
-        });
-        monitoringJobsCount = json.length;
-    });
-}
-
-function ShowNewMangaSearch(){
-  newMangaTitle.value = "";
-  newMangaPopup.style.display = "block";
-  newMangaResult.replaceChildren();
-}
-
-newMangaTitle.addEventListener("keypress", (event) => { if(event.key === "Enter") GetNewMangaItems();});
-
-
-
-
-function GetNewMangaItems(){
-  if(newMangaTitle.value.length < 4)
-    return;
-  
-  newMangaResult.replaceChildren();
-  newMangaConnector.disabled = true;
-  newMangaTitle.disabled = true;
-  newMangaTranslatedLanguage.disabled = true;
-  GetPublicationFromConnector(newMangaConnector.value, newMangaTitle.value).then((json) => {
-    //console.log(json);
-    if(json.length > 0)
-      newMangaResult.style.display = "flex";
-    json.forEach(result => {
-      var mangaElement = CreateManga(result, newMangaConnector.value)
-      newMangaResult.appendChild(mangaElement);
-      mangaElement.addEventListener("click", (event) => {
-        ShowMangaWindow(null, result, event, true);
-      });
-    });
-    
-    newMangaConnector.disabled = false;
-    newMangaTitle.disabled = false;
-  newMangaTranslatedLanguage.disabled = false;
-  });
-}
-
-//Returns a new "Publication" Item to display in the jobs section
-function CreateManga(manga, connector){
-  //Create a new publication and set an internal ID
-    var mangaElement = document.createElement('publication');
-    mangaElement.id = GetValidSelector(manga.internalId);
-    
-  //Append the cover image to the publication
-    var mangaImage = document.createElement('img');
-    mangaImage.src = GetCoverUrl(manga.internalId);
-    mangaElement.appendChild(mangaImage);
-  
-//Append the publication information to the publication
-    //console.log(manga);
-    var info = document.createElement('publication-information');
-    var connectorName = document.createElement('connector-name');
-    connectorName.innerText = connector;
-    connectorName.className = "pill";
-    connectorName.style.backgroundColor = stringToColour(connector);
-    info.appendChild(connectorName);
-
-    var mangaName = document.createElement('publication-name');
-    mangaName.innerText = manga.sortName;
-
-    //Create the publication status indicator
-    var releaseStatus = document.createElement('publication-status');
-    releaseStatus.setAttribute("release-status", manga.releaseStatus);
-    switch(manga.releaseStatus){
-      case 0:
-        releaseStatus.setAttribute("release-status", "Ongoing");
-        break;
-      case 1:
-        releaseStatus.setAttribute("release-status", "Completed");
-        break;
-      case 2:
-        releaseStatus.setAttribute("release-status", "On Hiatus");
-        break;
-      case 3:
-        releaseStatus.setAttribute("release-status", "Cancelled");
-        break;
-      case 4:
-        releaseStatus.setAttribute("release-status", "Upcoming");
-        break;
-      default:
-        releaseStatus.setAttribute("release-status", "Status Unavailable");
-        break;
-    }
-
-    info.appendChild(mangaName);
-    mangaElement.appendChild(info);
-    mangaElement.appendChild(releaseStatus);                  //Append the release status indicator to the publication element
-    return mangaElement;
-}
-
-createMonitorJobButton.addEventListener("click", () => {
-  CreateMonitorJob(newMangaConnector.value, selectedManga.internalId, newMangaTranslatedLanguage.value);
-  UpdateJobs();
-  mangaViewerPopup.style.display = "none";
-});
-startJobButton.addEventListener("click", () => {
-  StartJob(selectedJob.id);
-  mangaViewerPopup.style.display = "none";
-});
-cancelJobButton.addEventListener("click", () => {
-  CancelJob(selectedJob.id);
-  mangaViewerPopup.style.display = "none";
-});
-deleteJobButton.addEventListener("click", () => {
-  RemoveJob(selectedJob.id);
-  UpdateJobs();
-  mangaViewerPopup.style.display = "none";
-});
-
-function ShowMangaWindow(job, manga, event, add){
-    selectedManga = manga;
-    selectedJob = job;
-    //Show popup
-    mangaViewerPopup.style.display = "block";
-    
-    //Set position to mouse-position
-    if(event.clientY < window.innerHeight - mangaViewerWindow.offsetHeight)
-        mangaViewerWindow.style.top = `${event.clientY}px`;
-    else
-        mangaViewerWindow.style.top = `${event.clientY - mangaViewerWindow.offsetHeight}px`;
-    
-    if(event.clientX < window.innerWidth - mangaViewerWindow.offsetWidth)
-        mangaViewerWindow.style.left = `${event.clientX}px`;
-    else
-        mangaViewerWindow.style.left = `${event.clientX - mangaViewerWindow.offsetWidth}px`;
-    
-    //Edit information inside the window
-    mangaViewerName.innerText = manga.sortName;
-    mangaViewerTags.innerText = manga.tags.join(", ");
-    mangaViewerDescription.innerText = manga.description;
-    mangaViewerAuthor.innerText = manga.authors.join(',');
-    mangaViewCover.src = GetCoverUrl(manga.internalId);
-    toEditId = manga.internalId;
-    
-    //Check what action should be listed
-    if(add){
-        createMonitorJobButton.style.display = "initial";
-        createDownloadChapterJobButton.style.display = "none";
-        cancelJobButton.style.display = "none";
-        startJobButton.style.display = "none";
-        deleteJobButton.style.display = "none";
-    }
-    else{
-        createMonitorJobButton.style.display = "none";
-        createDownloadChapterJobButton.style.display = "none";
-        cancelJobButton.style.display = "initial";
-        startJobButton.style.display = "initial";
-        deleteJobButton.style.display = "initial";
-    }
-}
-
-function HidePublicationPopup(){
-    publicationViewerPopup.style.display = "none";
-}
-
-searchBox.addEventListener("keyup", () => FilterResults());
-//Filter shown jobs
-function FilterResults(){
-  //For each publication   
-  tasksContent.childNodes.forEach(publication => {
-    //If the search box isn't empty check that the title contains the searchbox content. If it does then
-    //'searchMatch' is true and the manga is shown. If the search box is empty, then consider this field
-    //to be true anyways.
-    if (searchBox.value.length > 0) {
-      publication.childNodes.forEach(item => {
-        if (item.nodeName.toLowerCase() == "publication-information"){
-          item.childNodes.forEach(information => {
-            if (information.nodeName.toLowerCase() == "publication-name") {
-              if (information.textContent.toLowerCase().includes(searchBox.value.toLowerCase())){
-                searchMatch = 1;
-              } else {
-                searchMatch = 0;
-              }
-            }
-          });
-        }
-      });
-    } else {  
-      searchMatch = 1;
-    }
-
-    //If the array connectorMatch isn't empty then check that the connector matches one of the ones
-    //in the array
-    if (connectorMatch.length > 0) {
-      publication.childNodes.forEach(item => {
-        if (item.nodeName.toLowerCase() == "publication-information"){
-          item.childNodes.forEach(information => {
-            if (information.nodeName.toLowerCase() == "connector-name") {
-              if (connectorMatch.includes(information.textContent)){
-                connectorNameMatch = 1;
-              } else {
-                connectorNameMatch = 0;
-              }
-            }
-          });
-        }
-      });
-    } else {
-      connectorNameMatch = 1;
-    }
-
-    //If the array statusMatch isn't empty then check that the status matches one of the ones
-    //in the array
-    if (statusMatch.length > 0) {
-      publication.childNodes.forEach(item => {
-        if (item.nodeName.toLowerCase() == "publication-status"){
-          if (statusMatch.includes(item.getAttribute('release-status'))) {
-            statusNameMatch = 1;
-          } else {
-            statusNameMatch = 0;
-          }
-        }
-      });
-    } else {
-      statusNameMatch = 1;
-    }
-
-    //If all of the filtering conditions are met then show the manga, otherwise hide it.
-    if (searchMatch && connectorNameMatch && statusNameMatch) {
-      publication.style.display = 'initial';
-    } else {
-      publication.style.display = 'none';
-    }
-  });
-}
-
-settingsCog.addEventListener("click", () => {
-  OpenSettings();
-  settingsPopup.style.display = "flex";
-});
-
-filterFunnel.addEventListener("click", () => {
-  filterBox.classList.toggle("animate");
-});
-
-settingKomgaUrl.addEventListener("keypress", (event) => { if(event.key === "Enter") UpdateSettings(); });
-settingKomgaUser.addEventListener("keypress", (event) => { if(event.key === "Enter") UpdateSettings(); });
-settingKomgaPass.addEventListener("keypress", (event) => { if(event.key === "Enter") UpdateSettings(); });
-settingKavitaUrl.addEventListener("keypress", (event) => { if(event.key === "Enter") UpdateSettings(); });
-settingKavitaUser.addEventListener("keypress", (event) => { if(event.key === "Enter") UpdateSettings(); });
-settingKavitaPass.addEventListener("keypress", (event) => { if(event.key === "Enter") UpdateSettings(); });
-settingGotifyUrl.addEventListener("keypress", (event) => { if(event.key === "Enter") UpdateSettings(); });
-settingGotifyAppToken.addEventListener("keypress", (event) => { if(event.key === "Enter") UpdateSettings(); });
-settingLunaseaWebhook.addEventListener("keypress", (event) => { if(event.key === "Enter") UpdateSettings(); });
-settingNtfyEndpoint.addEventListener("keypress", (event) => { if(event.key === "Enter") UpdateSettings(); });
-settingNtfyAuth.addEventListener("keypress", (event) => { if(event.key === "Enter") UpdateSettings(); });
-settingUserAgent.addEventListener("keypress", (event) => { if(event.key === "Enter") UpdateSettings(); });
-settingApiUri.addEventListener("keypress", (event) => { if(event.key === "Enter") UpdateSettings(); });
-
-defaultRL.addEventListener("keypress", (event) => { if(event.key === "Enter") UpdateSettings();}); 
-coverRL.addEventListener("keypress", (event) => { if(event.key === "Enter") UpdateSettings();}); 
-imageRL.addEventListener("keypress", (event) => { if(event.key === "Enter") UpdateSettings();}); 
-infoRL.addEventListener("keypress", (event) => { if(event.key === "Enter") UpdateSettings();}); 
-mDexFeedRL.addEventListener("keypress", (event) => { if(event.key === "Enter") UpdateSettings();}); 
-mDexImageRL.addEventListener("keypress", (event) => { if(event.key === "Enter") UpdateSettings();}); 
-
-
-function OpenSettings(){
-  settingGotifyConfigured.setAttribute("configuration", "Not Configured");
-  settingLunaseaConfigured.setAttribute("configuration", "Not Configured");
-  settingNtfyConfigured.setAttribute("configuration", "Not Configured");
-  settingKavitaConfigured.setAttribute("configuration", "Not Configured");
-  settingKomgaConfigured.setAttribute("configuration", "Not Configured");
-  settingKomgaUrl.value = "";
-  settingKomgaUser.value = "";
-  settingKomgaPass.value = "";
-  settingKavitaUrl.value = "";
-  settingKavitaUser.value = "";
-  settingKavitaPass.value = "";
-  settingGotifyUrl.value = "";
-  settingGotifyAppToken.value = "";
-  settingLunaseaWebhook.value = "";
-  settingNtfyAuth.value = "";
-  settingNtfyEndpoint.value = "";
-  settingUserAgent.value = "";
-  settingApiUri.value = "";
-  defaultRL.value = "";
-  coverRL.value = "";
-  imageRL.value = "";
-  infoRL.value = "";
-  mDexFeedRL.value = "";
-  mDexImageRL.value = "";
-  
-  GetSettings().then((json) => {
-    //console.log(json);
-    settingApiUri.placeholder = apiUri;
-    settingUserAgent.placeholder = json.userAgent;
-    //console.log(json.styleSheet);
-  });
-  GetRateLimits().then((json) => {
-    defaultRL.placeholder = json.Default + ' Requests/Minute';
-    coverRL.placeholder = json.MangaCover + ' Requests/Minute';
-    imageRL.placeholder = json.MangaImage + ' Requests/Minute';
-    infoRL.placeholder = json.MangaInfo + ' Requests/Minute';
-    mDexFeedRL.placeholder = json.MangaDexFeed + ' Requests/Minute';
-    mDexImageRL.placeholder = json.MangaDexImage + ' Requests/Minute';
-  });
-  GetLibraryConnectors().then((json) => {
-    //console.log(json);
-    json.forEach(connector => {
-      switch(libraryConnectorTypes[connector.libraryType]){
-        case "Kavita":
-          settingKavitaConfigured.setAttribute("configuration", "Active");
-          settingKavitaUrl.placeholder = connector.baseUrl;
-          settingKavitaUser.placeholder = "***";
-          settingKavitaPass.placeholder = "***";
-          break;
-        case "Komga":
-          settingKomgaConfigured.setAttribute("configuration", "Active");
-          settingKomgaUrl.placeholder = connector.baseUrl;
-          settingKomgaUser.placeholder = "***";
-          settingKomgaPass.placeholder = "***";
-          break;
-        default:
-          console.log("Unknown type");
-          console.log(connector);
-          break;
-      }
-    });
-  });
-  GetNotificationConnectors().then((json) => {
-    json.forEach(connector => {
-      switch(notificationConnectorTypes[connector.notificationConnectorType]){
-        case "Gotify":
-          settingGotifyUrl.placeholder = connector.endpoint;
-          settingGotifyAppToken.placeholder = "***";
-          settingGotifyConfigured.setAttribute("configuration", "Active");
-          break;
-        case "LunaSea":
-          settingLunaseaConfigured.setAttribute("configuration", "Active");
-          settingLunaseaWebhook.placeholder = connector.id;
-          break;
-        case "Ntfy":
-          settingNtfyConfigured.setAttribute("configuration", "Active");
-          settingNtfyEndpoint.placeholder = connector.endpoint;
-          settingNtfyAuth.placeholder = "***";
-          break;
-        default:
-          console.log("Unknown type");
-          console.log(connector);
-          break;
-      }
-    });
-  });
-}
-
-//Functions for clearing/resetting connectors in the settings pop-up
-function ClearKomga(){
-  settingKomgaUrl.value = "";
-  settingKomgaUser.value = "";
-  settingKomgaPass.value = "";
-  settingKomgaConfigured.setAttribute("configuration", "Not Configured");
-  ResetKomga();
-}
-
-function ClearKavita(){
-  settingKavitaUrl.value = "";
-  settingKavitaUser.value = "";
-  settingKavitaPass.value = "";
-  settingKavitaConfigured.setAttribute("configuration", "Not Configured");
-  ResetKavita();
-}
-
-function ClearGotify(){
-  settingGotifyUrl.value = "";
-  settingGotifyAppToken.value = ""
-  settingGotifyConfigured.setAttribute("configuration", "Not Configured");
-  ResetGotify();
-}
-
-function ClearLunasea(){
-  settingLunaseaWebhook.value = "";
-  settingLunaseaConfigured.setAttribute("configuration", "Not Configured");
-  ResetLunaSea();
-}
-
-function ClearNtfy(){
-  settingNtfyEndpoint.value = "";
-  settingNtfyAuth.value = "";
-  settingNtfyConfigured.setAttribute("configuration", "Not Configured");
-  ResetNtfy();
-}
-
-function UpdateSettings(){
-  if(settingApiUri.value != ""){
-    apiUri = settingApiUri.value;
-    setCookie("apiUri", apiUri);
-    Setup();
-  }
-  
-  if(settingKomgaUrl.value != "" &&
-     settingKomgaUser.value != "" &&
-     settingKomgaPass.value != ""){
-    UpdateKomga(settingKomgaUrl.value, utf8_to_b64(`${settingKomgaUser.value}:${settingKomgaPass.value}`));
-  }
-  
-  if(settingKavitaUrl.value != "" &&
-    settingKavitaUser.value != "" &&
-    settingKavitaPass.value != ""){
-    UpdateKavita(settingKavitaUrl.value, settingKavitaUser.value, settingKavitaPass.value);
-  }
-  
-  if(settingGotifyUrl.value != "" &&
-    settingGotifyAppToken.value != ""){
-    UpdateGotify(settingGotifyUrl.value, settingGotifyAppToken.value);
-  }
-  
-  if(settingLunaseaWebhook.value != ""){
-    UpdateLunaSea(settingLunaseaWebhook.value);
-  }
-  
-  if(settingNtfyEndpoint.value != "" &&
-    settingNtfyAuth.value != ""){
-    UpdateNtfy(settingNtfyEndpoint.value, settingNtfyAuth.value);
-  }
-  
-  if(settingUserAgent.value != ""){
-      UpdateUserAgent(settingUserAgent.value);
-  }
-
-  if (defaultRL.value != "") {
-    UpdateRateLimit(0, defaultRL.value);
-  }
-
-  if (coverRL.value != "") {
-    UpdateRateLimit(3, coverRL.value);
-  }
-
-  if (imageRL.value != "") {
-    UpdateRateLimit(2, imageRL.value);
-  }
-
-  if (infoRL.value != "") {
-    UpdateRateLimit(6, infoRL.value);
-  }
-
-  if (mDexFeedRL.value != "") {
-    UpdateRateLimit(1, mDexFeedRL.value);
-  }
-
-  if (mDexImageRL.value != "") {
-    UpdateRateLimit(5, mDexImageRL.value);
-  }
-  
-  setTimeout(() => {
-      OpenSettings();
-      Setup();
-  }, 100)
-}
-
-function utf8_to_b64(str) {
-    return window.btoa(unescape(encodeURIComponent( str )));
-}
-
-function UpdateJobs(){
-
-  GetMonitorJobs().then((json) => {
-    if(monitoringJobsCount != json.length){
-      ResetContent();
-      monitoringJobsCount = json.length;
-    }
-  });
-
-  //Get the jobs that are waiting in the queue
-  GetWaitingJobs().then((json) => {
-    jobsQueuedTag.innerText = json.length;
-    
-    var nowWaitingJobs = [];
-    
-    json.forEach(job => {
-      if(!waitingJobs.includes(GetValidSelector(job.id))){
-        var jobDom = createJob(job);
-        jobStatusWaiting.appendChild(jobDom);
-      }
-      nowWaitingJobs.push(GetValidSelector(job.id));
-    });
-    waitingJobs = nowWaitingJobs;
-  });
-  
-  jobStatusWaiting.childNodes.forEach(child => {
-    if(!waitingJobs.includes(child.id))
-      jobStatusWaiting.removeChild(child);
-  });
-  
-  //Get currently running jobs
-  GetRunningJobs().then((json) => {
-    jobsRunningTag.innerText = json.length;
-    
-    var nowRunningJobs = [];
-    
-    json.forEach(job => {
-      if(!runningJobs.includes(GetValidSelector(job.id))){
-        var jobDom = createJob(job);
-        jobStatusRunning.appendChild(jobDom);
-      }
-      nowRunningJobs.push(GetValidSelector(job.id));
-      UpdateJobProgress(job.id);
-    });
-    
-    runningJobs = nowRunningJobs;
-  });
-  
-  jobStatusRunning.childNodes.forEach(child => {
-    if(!runningJobs.includes(child.id))
-      jobStatusRunning.removeChild(child);
-  });
-}
-
-function createJob(jobjson){
-  var manga;
-  if(jobjson.chapter != null)
-    manga = jobjson.chapter.parentManga;
-  else if(jobjson.manga != null)
-    manga = jobjson.manga;
-  else return null;
-  
-  
-  var wrapper = document.createElement("div");
-  wrapper.className = "section-item";
-  wrapper.id = GetValidSelector(jobjson.id);
-  
-  var image = document.createElement("img");
-  image.className = "jobImage";
-  image.src = GetCoverUrl(manga.internalId);
-  wrapper.appendChild(image);
-
-  var details = document.createElement("div");
-  details.className = 'jobDetails';
-
-  var title = document.createElement("span");
-  title.className = "jobTitle";
-  if(jobjson.chapter != null)
-    title.innerText = `${manga.sortName} - ${jobjson.chapter.fileName}`;
-  else if(jobjson.manga != null)
-    title.innerText = manga.sortName;
-  details.appendChild(title);
-  
-  var progressBar = document.createElement("progress");
-  progressBar.className = "jobProgressBar";
-  progressBar.id = `jobProgressBar${GetValidSelector(jobjson.id)}`;
-  details.appendChild(progressBar);
-  
-  var progressSpan = document.createElement("span");
-  progressSpan.className = "jobProgressSpan";
-  progressSpan.id = `jobProgressSpan${GetValidSelector(jobjson.id)}`;
-  progressSpan.innerText = "Pending...";
-  details.appendChild(progressSpan);
-  
-  var cancelSpan = document.createElement("span");
-  cancelSpan.className = "jobCancel";
-  cancelSpan.innerText = "Cancel";
-  cancelSpan.addEventListener("click", () => CancelJob(jobjson.id));
-  details.appendChild(cancelSpan);
-  
-  wrapper.appendChild(details);
-
-  return wrapper;
-}
-
-function ShowJobQueue(){  
-  jobStatusView.style.display = "initial";
-}
-
-function UpdateJobProgress(jobId){
-  GetProgress(jobId).then((json) => {
-    var progressBar = document.querySelector(`#jobProgressBar${GetValidSelector(jobId)}`);
-    var progressSpan = document.querySelector(`#jobProgressSpan${GetValidSelector(jobId)}`);
-    if(progressBar != null && json.progress != 0){
-      progressBar.value = json.progress;
-    }
-    if(progressSpan != null){
-      var percentageStr = "0%";
-      var timeleftStr = "00:00:00";
-      if(json.progress != 0){
-        percentageStr = Intl.NumberFormat("en-US", { style: "percent"}).format(json.progress);
-        timeleftStr = json.timeRemaining.split('.')[0];
-      }
-      progressSpan.innerText = `${percentageStr} ${timeleftStr}`;
-    }
-  });
-}
-
-function GetValidSelector(str){
-    var clean = [...str.matchAll(/[a-zA-Z0-9]*-*_*/g)];
-    return clean.join('');
-}
-
-const stringToColour = (str) => {
-  let hash = 0;
-  str.split('').forEach(char => {
-    hash = char.charCodeAt(0) + ((hash << 5) - hash)
-  })
-  let colour = '#'
-  for (let i = 0; i < 3; i++) {
-    const value = (hash >> (i * 8)) & 0xff
-    colour += value.toString(16).padStart(2, '0')
-  }
-  return colour
-}

Website/media/close-x.svg

@@ -1,4 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
-<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M5.29289 5.29289C5.68342 4.90237 6.31658 4.90237 6.70711 5.29289L12 10.5858L17.2929 5.29289C17.6834 4.90237 18.3166 4.90237 18.7071 5.29289C19.0976 5.68342 19.0976 6.31658 18.7071 6.70711L13.4142 12L18.7071 17.2929C19.0976 17.6834 19.0976 18.3166 18.7071 18.7071C18.3166 19.0976 17.6834 19.0976 17.2929 18.7071L12 13.4142L6.70711 18.7071C6.31658 19.0976 5.68342 19.0976 5.29289 18.7071C4.90237 18.3166 4.90237 17.6834 5.29289 17.2929L10.5858 12L5.29289 6.70711C4.90237 6.31658 4.90237 5.68342 5.29289 5.29289Z" fill="#0F1729"/>
-</svg>

Website/media/filter-funnel.svg

@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="iso-8859-1"?>
-<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg fill="#000000" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
-	 width="800px" height="800px" viewBox="0 0 971.986 971.986"
-	 xml:space="preserve">
-<g>
-	<path d="M370.216,459.3c10.2,11.1,15.8,25.6,15.8,40.6v442c0,26.601,32.1,40.101,51.1,21.4l123.3-141.3
-		c16.5-19.8,25.6-29.601,25.6-49.2V500c0-15,5.7-29.5,15.8-40.601L955.615,75.5c26.5-28.8,6.101-75.5-33.1-75.5h-873
-		c-39.2,0-59.7,46.6-33.1,75.5L370.216,459.3z"/>
-</g>
-</svg>

Website/media/queue.svg

@@ -1,7 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-
-<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
-<svg width="800px" height="800px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="none">
-
-<g fill="#000000">
-

Website/media/running.svg

@@ -1,53 +0,0 @@
-<?xml version="1.0" encoding="iso-8859-1"?>
-<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg fill="#000000" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
-	 width="800px" height="800px" viewBox="0 0 235.504 235.504"
-	 xml:space="preserve">
-<g>
-	<g>
-		<path d="M195.209,81.456l-49.227-0.15c0.737-0.886,1.351-1.868,2.284-2.583c3.282-2.497,3.911-7.166,1.427-10.438
-			c-2.501-3.266-7.161-3.919-10.443-1.423c-4.873,3.715-8.388,8.704-10.255,14.389l-22.191-0.064
-			c-9.508,0-19.588,7.398-22.938,16.851l-16.877,47.479c-1.775,5.013-1.338,9.966,1.207,13.568
-			c2.412,3.427,6.384,5.318,11.187,5.358l45.126,0.136c-1.509,5.186-4.701,9.622-9.352,12.424
-			c-4.891,2.957-10.636,3.814-16.172,2.444c-3.994-0.998-8.031,1.442-9.027,5.418c-0.99,4.012,1.445,8.035,5.432,9.032
-			c2.927,0.738,5.879,1.091,8.808,1.091c6.516,0,12.93-1.788,18.645-5.23c8.312-5.013,14.172-12.979,16.484-22.409
-			c0.232-0.905,0.232-1.823,0.124-2.713l28.296,0.092h0.049c2.925,0,5.854-0.89,8.684-2.147c0.2,0.493,0.32,1.014,0.661,1.471
-			c3.335,4.677,4.629,10.343,3.688,15.993c-0.95,5.627-4.028,10.536-8.688,13.862c-3.351,2.376-4.14,7.037-1.755,10.379
-			c1.466,2.04,3.751,3.122,6.062,3.122c1.491,0,3.006-0.429,4.312-1.367c7.919-5.61,13.16-13.966,14.771-23.52
-			c1.603-9.565-0.613-19.203-6.28-27.122c-0.48-0.693-1.134-1.19-1.779-1.659c1.318-1.831,2.501-3.763,3.238-5.854l16.863-47.464
-			c1.795-5.018,1.351-9.969-1.194-13.58C203.954,83.387,200.015,81.47,195.209,81.456z M201.979,98.405l-16.868,47.464
-			c-0.981,2.757-2.941,5.214-5.213,7.329c-0.337,0.16-0.706,0.229-1.026,0.465c-0.673,0.485-1.182,1.122-1.639,1.747
-			c-2.962,1.996-6.288,3.339-9.434,3.339v2.989l-0.044-2.989l-33.194-0.101c-0.232-0.076-0.424-0.261-0.661-0.324
-			c-1.435-0.353-2.805-0.145-4.095,0.309l-29.768-0.101l1.192-3.358c0.549-1.547-0.269-3.25-1.813-3.795
-			c-1.521-0.553-3.25,0.24-3.799,1.804l-1.899,5.334l-14.318-0.044c-2.805,0-5.063-0.998-6.336-2.813
-			c-1.437-2.032-1.603-4.921-0.463-8.144l16.877-47.478c2.48-6.979,10.417-12.868,17.356-12.868l12.217,0.038l-1.963,5.536
-			c-0.555,1.549,0.262,3.25,1.805,3.797c0.331,0.12,0.661,0.174,0.998,0.174c1.227,0,2.372-0.768,2.793-1.986l2.497-7.019
-			c0.064-0.164-0.048-0.322-0.016-0.487h2.512c-0.905,7.758,1.163,15.42,5.947,21.638c5.903,7.687,14.852,11.726,23.873,11.726
-			c6.371,0,12.771-2.001,18.186-6.129c3.266-2.488,3.911-7.167,1.426-10.441c-2.508-3.267-7.161-3.901-10.455-1.415
-			c-6.612,5.056-16.146,3.775-21.223-2.809c-2.445-3.194-3.487-7.133-2.958-11.117c0.061-0.503,0.353-0.916,0.481-1.402
-			l52.216,0.156c2.806,0,5.054,1.004,6.324,2.811C202.928,92.241,203.105,95.223,201.979,98.405z"/>
-		<path d="M107.997,127.194c-1.531-0.553-3.248,0.244-3.799,1.791l-4.302,12.099c-0.551,1.543,0.265,3.242,1.813,3.795
-			c0.331,0.116,0.659,0.16,0.998,0.16c1.214,0,2.372-0.765,2.801-1.976l4.294-12.099
-			C110.369,129.446,109.551,127.728,107.997,127.194z"/>
-		<path d="M116.6,103.014c-1.529-0.541-3.25,0.252-3.805,1.805l-4.298,12.088c-0.547,1.547,0.261,3.252,1.799,3.799
-			c0.329,0.12,0.659,0.172,1,0.172c1.222,0,2.368-0.769,2.809-1.983l4.294-12.09C118.955,105.268,118.139,103.555,116.6,103.014z"/>
-		<path d="M232.527,90.428l-14.896-0.038l0,0c-1.639,0-2.974,1.327-2.997,2.976c0,1.639,1.342,2.981,2.981,2.989l14.896,0.042l0,0
-			c1.643,0,2.978-1.331,2.993-2.979C235.504,91.763,234.17,90.436,232.527,90.428z"/>
-		<path d="M220.333,80.436c0.629,0,1.242-0.188,1.771-0.583l11.994-8.83c1.326-0.974,1.611-2.842,0.645-4.168
-			c-0.965-1.327-2.845-1.611-4.163-0.637l-11.998,8.833c-1.323,0.974-1.607,2.841-0.642,4.167
-			C218.513,80.003,219.418,80.436,220.333,80.436z"/>
-		<path d="M209.152,56.279c-1.547-0.549-3.25,0.269-3.787,1.805l-4.997,14.036c-0.537,1.547,0.26,3.252,1.803,3.807
-			c0.337,0.12,0.674,0.172,0.994,0.172c1.242,0,2.385-0.757,2.821-1.986l4.985-14.036C211.516,58.541,210.695,56.846,209.152,56.279
-			z"/>
-		<path d="M17.587,100.894h55.208c1.641,0,2.976-1.343,2.976-2.981c0-1.641-1.334-2.988-2.976-2.988H17.587
-			c-1.641,0-2.988,1.338-2.988,2.988C14.599,99.559,15.946,100.894,17.587,100.894z"/>
-		<path d="M68.471,119.328c0-1.641-1.345-2.987-2.986-2.987H10.283c-1.639,0-2.981,1.338-2.981,2.987
-			c0,1.639,1.342,2.974,2.981,2.974h55.202C67.119,122.301,68.471,120.967,68.471,119.328z"/>
-		<path d="M58.188,137.758H2.974c-1.641,0-2.974,1.335-2.974,2.989c0,1.64,1.333,2.974,2.974,2.974h55.214
-			c1.639,0,2.981-1.334,2.981-2.974C61.162,139.093,59.827,137.758,58.188,137.758z"/>
-		<path d="M169.611,28.097c11.821,0,21.403,9.584,21.403,21.41c0,11.82-9.582,21.408-21.403,21.408
-			c-11.822,0-21.412-9.588-21.412-21.408C148.199,37.681,157.789,28.097,169.611,28.097z"/>
-	</g>
-</g>
-</svg>

Website/media/settings-cogwheel.svg

@@ -1,21 +0,0 @@
-<?xml version="1.0" encoding="iso-8859-1"?>
-<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg fill="#000000" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
-	 width="800px" height="800px" viewBox="0 0 93.5 93.5" xml:space="preserve">
-<g>
-	<g>
-		<path d="M93.5,40.899c0-2.453-1.995-4.447-4.448-4.447H81.98c-0.74-2.545-1.756-5.001-3.035-7.331l4.998-5
-			c0.826-0.827,1.303-1.973,1.303-3.146c0-1.19-0.462-2.306-1.303-3.146L75.67,9.555c-1.613-1.615-4.673-1.618-6.29,0l-5,5
-			c-2.327-1.28-4.786-2.296-7.332-3.037v-7.07C57.048,1.995,55.053,0,52.602,0H40.899c-2.453,0-4.447,1.995-4.447,4.448v7.071
-			c-2.546,0.741-5.005,1.757-7.333,3.037l-5-5c-1.68-1.679-4.609-1.679-6.288,0L9.555,17.83c-1.734,1.734-1.734,4.555,0,6.289
-			l4.999,5c-1.279,2.33-2.295,4.788-3.036,7.333h-7.07C1.995,36.452,0,38.447,0,40.899V52.6c0,2.453,1.995,4.447,4.448,4.447h7.071
-			c0.74,2.545,1.757,5.003,3.036,7.332l-4.998,4.999c-0.827,0.827-1.303,1.974-1.303,3.146c0,1.189,0.462,2.307,1.302,3.146
-			l8.274,8.273c1.614,1.615,4.674,1.619,6.29,0l5-5c2.328,1.279,4.786,2.297,7.333,3.037v7.071c0,2.453,1.995,4.448,4.447,4.448
-			h11.702c2.453,0,4.446-1.995,4.446-4.448V81.98c2.546-0.74,5.005-1.756,7.332-3.037l5,5c1.681,1.68,4.608,1.68,6.288,0
-			l8.275-8.273c1.734-1.734,1.734-4.555,0-6.289l-4.998-5.001c1.279-2.329,2.295-4.787,3.035-7.332h7.071
-			c2.453,0,4.448-1.995,4.448-4.446V40.899z M62.947,46.75c0,8.932-7.266,16.197-16.197,16.197c-8.931,0-16.197-7.266-16.197-16.197
-			c0-8.931,7.266-16.197,16.197-16.197C55.682,30.553,62.947,37.819,62.947,46.75z"/>
-	</g>
-</g>
-</svg>

Website/media/tasks.svg

@@ -1,10 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-
-<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
-<svg fill="#000000" height="800px" width="800px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
-	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
-<g id="task">
-	<path d="M4,23.4l-3.7-3.7l1.4-1.4L4,20.6l4.3-4.3l1.4,1.4L4,23.4z M24,21H12v-2h12V21z M4,15.4l-3.7-3.7l1.4-1.4L4,12.6l4.3-4.3
-		l1.4,1.4L4,15.4z M24,13H12v-2h12V13z M4,7.4L0.3,3.7l1.4-1.4L4,4.6l4.3-4.3l1.4,1.4L4,7.4z M24,5H12V3h12V5z"/>
-</g>
-</svg>

Website/styles/base.css

@@ -1,960 +0,0 @@
-:root{
-    --background-color: #030304;
-    --second-background-color: white;
-    --primary-color: #f5a9b8;
-    --secondary-color:  #5bcefa;
-    --blur-background: rgba(245, 169, 184, 0.58);
-    --accent-color: #fff;
-    /* --primary-color: green;
-    --secondary-color: gold;
-    --blur-background: rgba(86, 131, 36, 0.8);
-    --accent-color: olive; */
-    --topbar-height: 60px;
-    box-sizing: border-box;
-}
-
-body{
-    padding: 0;
-    margin: 0;
-    height: 100vh;
-    background-color: var(--background-color);
-    font-family: "Inter", sans-serif;
-    overflow-x: hidden;
-}
-
-wrapper {
-    display: flex;
-    flex-flow: column;
-    flex-wrap: nowrap;
-    height: 100vh;
-}
-
-background-placeholder{
-    background-color: var(--second-background-color);
-    opacity: 1;
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    border-radius: 0 0 5px 0;
-    z-index: -1;
-}
-
-topbar {
-    display: flex;
-    align-items: center;
-    height: var(--topbar-height);
-    background-color: var(--secondary-color);
-    z-index: 100;
-    box-shadow: 0 0 20px black;
-}
-
-titlebox {
-    position: relative;
-    display: flex;
-    margin: 0 0 0 40px;
-    height: 100%;
-    align-items:center;
-    justify-content:center;
-}
-
-titlebox span{
-    cursor: default;
-    font-size: 24pt;
-    font-weight: bold;
-    background: linear-gradient(150deg, var(--primary-color), var(--accent-color));
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    margin-left: 20px;
-}
-
-titlebox img {
-    height: 100%;
-    cursor: grab;
-}
-
-spacer{
-    flex-grow: 1;
-}
-
-filter-box {
-    display: none;
-    align-self: center;
-    flex-direction: column;
-    position: relative;
-
-    margin: 10px;
-    background-color: var(--second-background-color);
-    border-style: solid;
-    border-color: var(--primary-color);
-    border-width: 2px;
-    border-radius: 15px;
-    min-width: 300px;
-    width: 50%;
-    overflow: hidden;
-    max-height: 50%;
-    height: 600px;
-}
-
-filter-box.animate {
-    display: flex;
-}
-
-filter-box border-bar popup-title{
-    font-size: 12pt;
-}
-
-filter-box border-bar popup-close {
-    height: 20px;
-    width: 20px;
-    font-size: 12pt;
-    -webkit-user-select: none; /* Safari */
-    -ms-user-select: none; /* IE 10 and IE 11 */
-    user-select: none; /* Standard syntax */
-}
-
-border-bar-button.clearFilter{
-    font-weight: bold;
-    margin: 0px 10px 10px 10px;
-    border-color: lightgray;
-    color: gray;
-    align-content: center;
-    justify-content: center;
-}
-
-border-bar-button.clearFilter:hover {
-    background-color: red;
-    border-color: var(--second-background-color);
-    color: var(--second-background-color);
-}
-
-status-filter {
-    display: block;
-    margin: 10px;
-
-    /*Text Properties*/
-    font-size:10pt;
-    font-weight:bold;
-    color:white;
-    text-align: center;
-
-    /*Size*/
-    padding: 3px 8px;
-    border-radius: 6px;
-    border: 0px;
-    background-color: inherit;
-
-    cursor: pointer;
-    -webkit-user-select: none; /* Safari */
-    -ms-user-select: none; /* IE 10 and IE 11 */
-    user-select: none; /* Standard syntax */
-}
-
-status-filter[release-status="Ongoing"]{
-    background-color: limegreen;
-}
-
-status-filter[release-status="Completed"]{
-    background-color: blueviolet;
-}
-
-status-filter[release-status="On Hiatus"]{
-    background-color: darkorange;
-}
-
-status-filter[release-status="Cancelled"]{
-    background-color: firebrick;
-}
-
-status-filter[release-status="Upcoming"]{
-    background-color: aqua;
-}
-
-status-filter[release-status="Status Unavailable"]{
-    background-color: gray;
-}
-
-
-searchdiv{
-    display: flex;
-    width: 100%;
-}
-
-#searchbox {
-    display: flex;
-    padding: 3px 5px;
-    margin: 5px;
-    border-style: solid;
-    border-width: 2px;
-    border-radius: 10px;
-    font-size: 12pt;   
-    outline: none;
-    border-color: lightgray;
-    flex-grow: 1;
-    flex-shrink: 1;
-}
-
-#searchbox:focus {
-    border-color: var(--secondary-color);
-}
-
-.pill {
-    flex-grow: 0;
-    height: 14pt;
-    font-size: 12pt;
-    border-radius: 9pt;
-    background-color: var(--primary-color);
-    padding: 2pt 17px;
-    color: black;
-}
-
-#connectorFilterBox .pill {
-    margin: 10px;
-    cursor: pointer;
-    -webkit-user-select: none; /* Safari */
-    -ms-user-select: none; /* IE 10 and IE 11 */
-    user-select: none; /* Standard syntax */
-}
-
-#settingscog {
-    cursor: pointer;
-    margin: 0px 30px;
-    margin-left: 15px;
-    height: 50%;
-    filter: invert(100%) sepia(0%) saturate(7465%) hue-rotate(115deg) brightness(116%) contrast(101%);
-}
-
-#filterFunnel {
-    cursor: pointer;
-    margin: 0px 15px;
-    height: 50%;
-    filter: invert(100%) sepia(0%) saturate(7465%) hue-rotate(115deg) brightness(116%) contrast(101%);
-}
-
-viewport {
-    position: relative;
-    display: flex;
-    flex-flow: row;
-    flex-wrap: nowrap;
-    flex-grow: 1;
-    height: 100%;
-    overflow-y: scroll;
-    scrollbar-color: var(--accent-color) var(--primary-color);
-    scrollbar-width: thin;
-}
-
-footer {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    width: 100%;
-    height: 40px;
-    align-items: center;
-    justify-content: center;
-    background-color: var(--primary-color);
-    align-content: center;
-}
-
-footer > div {
-    height: 100%;
-    margin: 0 30px;
-    display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    align-items: center;
-    cursor: pointer;
-}
-
-footer > div > *{
-    height: 40%;
-    margin: 0 5px;
-}
-
-#madeWith {
-    flex-grow: 1;
-    text-align: right;
-    margin-right: 20px;
-    cursor: url("media/blahaj.png"), grab;
-}
-
-content {
-    position: relative;
-    flex-grow: 1;
-    border-radius: 5px;
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: start;
-    align-content: start;
-}
-
-#settingsPopup{
-    z-index: 300;
-}
-
-popup{
-    display: none;
-    width: 100%;
-    min-height: 100%;
-    top: 0;
-    left: 0;
-    position: fixed;
-    z-index: 2;
-    flex-direction: column;
-}
-
-border-bar {
-    display: flex;
-    flex-direction: row;
-    background-color: var(--primary-color);
-    color: var(--accent-color);
-    font-weight: bolder;
-    padding: 7px 5px;
-    margin:0;
-    align-items: center;
-    position: relative;
-    width: 100%;
-}
-
-popup-title {
-    font-size: 14pt;
-    display: flex;
-    margin-top: 3px;
-    margin-left: 5px;
-    color: var(--second-background-color);
-}
-
-popup-close {
-    border: none;
-    background-color: inherit;
-    color: var(--second-background-color);;
-    font-weight: inherit;
-    font-size: 27px;
-    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
-    display: flex;
-    cursor: pointer;
-    margin-left: auto;
-    margin-right: 15px;
-    height: 32px;
-    width: 32px;
-    border-radius: 16px;
-    align-content: center;
-    justify-content: center;
-}
-
-popup-close:hover {
-    background-color: var(--secondary-color);
-}
-
-border-bar > .button-container {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    flex-wrap: wrap;
-    margin-right: 0;
-    margin-left: auto;
-}
-
-border-bar-button {
-    border-style: solid;
-    border-width: 2px;
-    background-color: inherit;
-    color: var(--second-background-color);
-    font-weight: inherit;
-    font-size: inherit;
-    font-family: inherit;
-    display: flex;
-    cursor: pointer;
-    margin: 0px 5px;
-    padding: 5px 20px;
-    border-radius: 20px;
-    height: 20px;
-    align-items: center;
-    border-color: var(--accent-color);
-    -webkit-user-select: none; /* Safari */
-    -ms-user-select: none; /* IE 10 and IE 11 */
-    user-select: none; /* Standard syntax */
-}
-
-border-bar-button:hover {
-    border-color: var(--secondary-color);
-}
-
-border-bar-button.primary {
-    background-color: var(--secondary-color);
-    color: var(--accent-color);
-    border-color: var(--primary-color);
-    margin-right: 10px;
-}
-
-border-bar-button.primary:hover {
-    border-color: var(--accent-color);
-}
-
-border-bar-button.section {
-    font-weight: bold;
-    color: darkgray;
-    border-color: darkgray;
-    text-align: center;
-    padding: 5px;
-    flex-grow: 1;
-    justify-content: center;
-}
-
-border-bar-button.section:hover {
-    color: var(--secondary-color);
-    border-color: var(--secondary-color);
-}
-
-
-popup popup-window {
-    position: absolute;
-    z-index: 3;
-    left: 10%;
-    top: 10%;
-    height: 80%;
-    width: 80%;
-    display: flex;
-    flex-direction: column;
-    background-color: var(--second-background-color);
-    border-radius: 15px;
-    overflow: hidden;
-}
-
-popup#jobStatusView popup-window {
-    left: 20%;
-    top: 20%;
-    height: 60%;
-    width: 60%;
-}
-
-popup-content{
-    display: flex;
-    flex-direction: column;
-    align-items: left;
-    height: calc(100% - 60px);
-    overflow-y: auto;
-    overflow-x: hidden;
-    scrollbar-width: thin;
-    scrollbar-color:  var(--secondary-color) var(--second-background-color);
-}
-
-popup-content > .popup-section {
-    margin: 5px;
-    margin-bottom: 10px;
-    font-size: 10pt;
-    font-weight: 100;
-    display: block;
-    border-top-style: solid;
-    border-top-width: 1px;
-    border-top-color: lightgray;
-    width: calc(100%-10px);
-    padding: 10px;
-}
-
-.section-content {
-    display: flex;
-    flex-direction: row;
-    width: 100%;
-    flex-wrap: wrap;
-}
-
-.section-item {
-    display: flex;
-    flex-direction: column;
-    width: 22%;
-    min-width: 300px;
-    height: auto;
-    border-radius: 10px;
-    border-style: solid;
-    border-width: 1px;
-    border-color: lightgray;
-    margin: 7px; 
-    padding: 5px;
-}
-
-.section-item.dyn-height {
-    height: fit-content;
-}
-
-.section-item > .title {
-    font-weight: bold;
-    vertical-align: bottom;
-    line-height: 32px;
-    font-size: 12pt;
-    width: 100%;
-}
-
-a:link {
-    color: inherit;
-    text-decoration: none;
-}
-
-a:visited {
-    color: inherit;
-    text-decoration: none;
-}
-
-a:hover {
-    color: inherit;
-    text-decoration: underline solid var(--secondary-color) 3px;
-}
-
-a:active {
-    color: inherit;
-    text-decoration: none;
-}
-
-.section-item > .title > img {
-    width: auto;
-    height: 32px;
-    margin: 5px;
-    vertical-align: middle;
-    border-radius: 5px;
-}
-
-.section-item > .title > connector-configured {
-    display:block;
-    height: 10px;
-    width: 10px;
-    border-radius: 50%;
-    margin: 5px;
-    float: right;
-    top: 5px;
-    right: 5px;
-}
-
-.section-item > .title > connector-configured::after {
-    display: block;
-    content: attr(configuration);
-    float: right;
-    width: max-content;
-    width: -webkit-max-content;
-    width: -mox-max-content;
-    width: intrinsic;
- 
-    visibility: hidden;
-
-    /*Text Properties*/
-    font-size:8pt;
-    font-weight:bold;
-    color:white;
-    text-align: right;
-
-    /*Size*/
-    padding: 0px 8px;
-    border-radius: 6px;
-    border: 0px;
-    background-color: inherit;
-}
-
-.section-item > .title > connector-configured:hover::after{
-    visibility:visible;
-} 
-
-.section-item > .title > connector-configured[configuration="Active"] {   
-    background-color: limegreen;
-}
-
-.section-item > .title > connector-configured[configuration="Not Configured"] {
-    background-color: gray;
-}
-
-.section-item > input {
-    margin: 2px; 
-    padding: 5px;
-    height: 20px;
-    border-radius: 10px;
-    border-style: solid;
-    outline: none;
-}
-.section-item > input:focus {
-    border-color: var(--secondary-color);
-}
-
-.section-item > row {
-    width: calc(100%-20px);
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    margin-left: 5px;
-    margin-bottom: 5px;
-}
-
-.section-item > row > input {
-    margin-left: auto;
-    margin-right: 2px; 
-    padding: 5px;
-    height: 20px;
-    border-radius: 10px;
-    border-style: solid;
-    outline: none;
-    flex-grow: 0;
-    text-align: end;
-    float: right;
-    width: 200px;
-}
-.section-item > row > input:focus {
-    border-color: var(--secondary-color);
-}
-
-.section-item > row > select {
-    margin-left: auto;
-    margin-right: 2px; 
-    padding: 2px;
-    height: 30px;
-    border-radius: 10px;
-    border-style: solid;
-    outline: none;
-    flex-grow: 0;
-    text-align: end;
-    float: right;
-    width: 200px;
-}
-
-.section-item > row > select:focus {
-    border-color: var(--secondary-color);
-}
-
-.section-buttons-container {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    position: relative;
-    margin-left: auto;
-    margin-top: auto;
-    margin-bottom: 0;
-    margin-right: 0;
-}
-
-.section-buttons-container > .section-button {
-    font-size: 12px;
-    padding: 3px 10px;
-    margin: 3px;
-    border-radius: 5px;
-    border-style: solid;
-    border-width: 1px;
-    border-color: lightgray;
-    font-weight: bold;
-    color: gray;
-    cursor: pointer;
-    -webkit-user-select: none; /* Safari */
-    -ms-user-select: none; /* IE 10 and IE 11 */
-    user-select: none; /* Standard syntax */
-}
-
-.section-button#reset:hover {
-    color: red;
-    border-color: red;
-}
-.section-buttons-container > .section-button:hover {
-    border-color: var(--secondary-color);
-    color: var(--secondary-color);
-}
-
-#newMangaPopup > div {
-  z-index: 3;
-  position: relative;
-}
-
-#newMangaPopup > #newMangaPopupSelector {
-  width: 600px;
-  height: 40px;
-  margin: 80px auto 0;
-}
-
-#newMangaPopup > div > #newMangaConnector, #newMangaTitle, #newMangaTranslatedLanguage {
-  margin: 0;
-  display: inline-block;
-  height: 40px;
-}
-
-#newMangaPopup #newMangaConnector {
-  width: 100px;
-  padding: 0 0 0 5px;
-  border-radius: 5px 0 0 5px;
-  border: 0;
-  border-right: 1px solid darkgray;
-}
-
-#newMangaPopup #newMangaTitle{
-  width: 445px;
-  padding: 0 5px 0 5px;
-  border: 0;
-}
-
-#newMangaPopup #newMangaTranslatedLanguage {
-  width: 45px;
-  border-radius: 0 5px 5px 0;
-  border: 0;
-  border-left: 1px solid darkgray;
-  margin-left: -5px;
-}
-
-#newMangaResult {
-  display: none;
-  flex-direction: row;
-  justify-content: flex-start;
-  margin: 5px auto 0;
-  border-radius: 5px;
-  padding: 5px;
-  width: min-content;
-  max-width: 98%;
-  max-height: 400px;
-  overflow-x: scroll;
-  overflow-y: hidden;
-}
-
-blur-background {
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    left: 0;
-    background: var(--blur-background);
-    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
-    backdrop-filter: blur(4.5px);
-    -webkit-backdrop-filter: blur(4.5px);
-}
-
-#publicationViewerPopup{
-    z-index: 5;
-}
-
-publication-viewer{
-    display: block;
-    width: 460px;
-    position: absolute;
-    top: 200px;
-    left: 400px;
-    background-color: var(--accent-color);
-    border-radius: 5px;
-    overflow: hidden;
-    padding: 15px;
-}
-
-publication-viewer::after{
-    content: '';
-    position: absolute;
-    left: 0; top: 0;
-    border-radius: 5px;
-    width: 100%;
-    height: 100%;
-    background: rgba(0,0,0,0.8);
-    backdrop-filter: blur(3px);
-}
-
-publication-viewer img {
-    position: absolute;
-    left: 0;
-    top: 0;
-    height: 100%;
-    width: 100%;
-    object-fit: cover;
-    border-radius: 5px;
-    z-index: 0;
-}
-
-publication-viewer publication-details > * {
-    margin: 5px 0;
-}
-
-publication-viewer publication-details publication-name {
-    width: initial;
-    overflow-x: scroll;
-    white-space: nowrap;
-    scrollbar-width: none;
-}
-
-publication-viewer publication-details publication-tags::before {
-    content: "Tags";
-    display: block;
-    font-weight: bolder;
-}
-
-publication-viewer publication-details publication-tags {
-    overflow-x: scroll;
-    white-space: nowrap;
-    scrollbar-width: none;
-}
-
-publication-viewer publication-details publication-author::before {
-    content: "Author: ";
-    font-weight: bolder;
-}
-
-publication-viewer publication-details publication-description::before {
-    content: "Description";
-    display: block;
-    font-weight: bolder;
-}
-
-publication-viewer publication-details publication-description {
-    font-size: 12pt;
-    margin: 5px 0;
-    height: 145px;
-    overflow-x: scroll;
-}
-
-publication-viewer publication-details publication-interactions {
-    display: flex;
-    flex-direction: row;
-    justify-content: end;
-    align-items: start;
-    width: 100%;
-}
-
-publication-viewer publication-details publication-interactions > * {
-    margin: 0 10px;
-    font-size: 16pt;
-    cursor: pointer;
-}
-
-publication-viewer publication-details publication-interactions publication-starttask {
-    color: var(--secondary-color);
-}
-
-publication-viewer publication-details publication-interactions publication-delete {
-    color: red;
-}
-
-publication-view publication-details publication-interactions publication-canceltask {
-  color: yellow;
-}
-
-publication-viewer publication-details publication-interactions publication-add {
-    color: limegreen;
-}
-
-footer-tag-popup {
-    display: none;
-    padding: 2px 4px;
-    position: fixed;
-    bottom: 58px;
-    left: 20px;
-    background-color: var(--second-background-color);
-    z-index: 8;
-    border-radius: 5px;
-    max-height: 400px;
-}
-
-footer-tag-content{
-    position: relative;
-    max-height: 400px;
-    display: flex;
-    flex-direction: column;
-    flex-wrap: nowrap;
-    overflow-y: scroll;
-}
-
-footer-tag-content > * {
-    margin: 2px 5px;
-}
-
-footer-tag-popup::before{
-    content: "";
-    width: 0;
-    height: 0;
-    position: absolute;
-    border-right: 10px solid var(--second-background-color);
-    border-left: 10px solid transparent;
-    border-top: 10px solid var(--second-background-color);
-    border-bottom: 10px solid transparent;
-    left: 0;
-    bottom: -17px;
-    border-radius: 0 0 0 5px;
-}
-
-#loaderdiv {
-  position: absolute;
-  top: 0px;
-  left: 0px;
-  width: 100%;
-  height: 100%;
-  z-index: 200;
-}
-
-#loader {
-  border: 16px solid transparent;
-  border-top: 16px solid var(--secondary-color);
-  border-bottom: 16px solid var(--primary-color);
-  border-radius: 50%;
-  width: 120px;
-  height: 120px;
-  animation: spin 2s linear infinite;
-  position: absolute;
-  left: calc(50% - 60px);
-  top: calc(50% - 120px);
-  z-index: 201;
-}
-
-#loaderText {
-  position: relative;
-  margin: 0 auto;
-  top: calc(50% + 80px);
-  z-index: 201;
-  text-align: center;
-  color: var(--second-background-color);
-  font-size: 20pt;
-}
-
-@keyframes spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
-}
-
-#jobStatusRunning > .section-item {
-    flex-direction: row;
-    height: 150px;
-    padding: 0;
-    overflow: hidden;
-}
-
-#jobStatusWaiting > .section-item {
-    flex-direction: row;
-    height: 150px;
-    padding: 0;
-    overflow: hidden;
-}
-
-.section-item > .jobImage {
-  height: 100%;
-  width: auto;
-  left: 0;
-  top: 0;
-  border-radius: 10px;
-}
-
-.jobDetails {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    width: 100%;
-}
-
-.section-item > .jobDetails > .jobTitle {
-  margin: 5px;
-  font-size: 11pt;
-  font-weight: bold;
-  text-wrap: wrap;
-}
-
-.section-item > .jobDetails > .jobProgressBar {
-  margin: 5px;
-  height: 10px;
-  border-radius: 7px;
-}
-
-.section-item > .jobDetails > .jobProgressSpan {
-    margin: 5px;
-    margin-left: auto;
-    margin-right: 5px;
-}
-
-.section-item > .jobDetails > .jobCancel {
-  margin-top: auto;
-  margin-bottom: 5px;
-  margin-left: auto;
-  margin-right: 5px;
-  font-size: 12pt;
-  color: var(--secondary-color);
-  cursor: pointer;
-}

Website/styles/card_compact.css

@@ -1,159 +0,0 @@
-#addPublication {
-    cursor: pointer;
-    background-color: var(--secondary-color);
-    width: 180px;
-    height: 300px;
-    border-radius: 5px;
-    margin: 10px 10px;
-    padding: 15px 20px;
-    position: relative;
-}
-
-#addPublication p{
-    width: 100%;
-    text-align: center;
-    font-size: 150pt;
-    vertical-align: middle;
-    line-height: 300px;
-    margin: 0;
-    color: var(--accent-color);
-}
-
-.pill {
-    flex-grow: 0;
-    height: 14pt;
-    font-size: 12pt;
-    border-radius: 9pt;
-    background-color: var(--primary-color);
-    padding: 2pt 17px;
-    color: black;
-}
-
-publication{
-    cursor: pointer;
-    background-color: var(--secondary-color);
-    width: 180px;
-    height: 300px;
-    border-radius: 5px;
-    margin: 10px 10px;
-    padding: 15px 19px;
-    position: relative;
-    flex-shrink: 0;
-}
-
-publication::after{
-    content: '';
-    position: absolute;
-    left: 0; top: 0;
-    border-radius: 5px;
-    width: 100%; height: 100%;
-    background: linear-gradient(rgba(0,0,0,0.8), rgba(0, 0, 0, 0.7),rgba(0, 0, 0, 0.2));
-}
-
-publication-information {
-    display: flex;
-    flex-direction: column;
-    justify-content: start;
-}
-
-publication-details {
-    display: flex;
-    flex-direction: column;
-    justify-content: start;
-}
-
-publication-information * {
-    z-index: 1;
-    color: var(--accent-color);
-}
-
-publication-details * {
-    z-index: 1;
-    color: var(--accent-color);
-}
-
-connector-name{
-    width: fit-content;
-    margin: 10px 0;
-}
-
-publication-name{
-    width: fit-content;
-    font-size: 16pt;
-    font-weight: bold;
-    color: white;
-}
-
-publication-status {
-    display:block;
-    height: 10px;
-    width: 10px;
-    border-radius: 50%;
-    margin: 5px;
-    position: absolute;
-    top: 5px;
-    right: 5px;
-    z-index: 2;
-    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 10px, rgb(51, 51, 51) 0px 0px 10px 3px;
-}
-
-publication-status::after {
-    content: attr(release-status);
-    position: absolute;
-    top: 0;
-    right: 0;
-
-    visibility: hidden;
-
-    /*Text Properties*/
-    font-size:10pt;
-    font-weight:bold;
-    color:white;
-    text-align: center;
-
-    /*Size*/
-    padding: 3px 8px;
-    border-radius: 6px;
-    border: 0px;
-    background-color: inherit;
-}
-
-publication-status:hover::after{
-    visibility:visible;
-}
-
-
-publication-status[release-status="Ongoing"]{
-    background-color: limegreen;
-}
-
-publication-status[release-status="Completed"]{
-    background-color: blueviolet;
-}
-
-publication-status[release-status="On Hiatus"]{
-    background-color: darkorange;
-}
-
-publication-status[release-status="Cancelled"]{
-    background-color: firebrick;
-}
-
-publication-status[release-status="Upcoming"]{
-    background-color: aqua;
-}
-
-publication-status[release-status="Status Unavailable"]{
-    background-color: gray;
-}
-
-publication img {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    z-index: 0;
-    border-radius: 5px;
-}

Website/styles/card_hover.css

@@ -1,172 +0,0 @@
-#addPublication {
-    cursor: pointer;
-    background-color: var(--secondary-color);
-    width: 180px;
-    height: 300px;
-    border-radius: 5px;
-    margin: 10px 10px;
-    padding: 15px 20px;
-    position: relative;
-}
-
-#addPublication p{
-    width: 100%;
-    text-align: center;
-    font-size: 150pt;
-    vertical-align: middle;
-    line-height: 300px;
-    margin: 0;
-    color: var(--accent-color);
-}
-
-.pill {
-    flex-grow: 0;
-    height: 14pt;
-    font-size: 12pt;
-    border-radius: 9pt;
-    background-color: var(--primary-color);
-    padding: 2pt 17px;
-    color: black;
-}
-
-publication{
-    cursor: pointer;
-    background-color: var(--secondary-color);
-    width: 180px;
-    height: 300px;
-    border-radius: 5px;
-    margin: 10px 10px;
-    padding: 15px 19px;
-    position: relative;
-    flex-shrink: 0;
-}
-
-publication:hover {
-    background-color: black;
-}
-
-publication:hover::after{
-    background: linear-gradient(rgba(0,0,0,0.8), rgba(0, 0, 0, 0.7),rgba(0, 0, 0, 0.2));
-}
-
-publication:hover > publication-information {
-    display: flex;
-    opacity:1;
-}
-
-publication::after{
-    content: '';
-    position: absolute;
-    left: 0; top: 0;
-    border-radius: 5px;
-    width: 100%; height: 100%;
-    background: none;
-}
-
-publication-information {
-    display: none;
-    flex-direction: column;
-    justify-content: start;
-}
-
-publication-information * {
-    z-index: 1;
-    color: white;
-}
-
-connector-name{
-    width: fit-content;
-    margin: 10px 0;
-}
-
-publication-name{
-    width: fit-content;
-    font-size: 16pt;
-    font-weight: bold;
-}
-
-publication-status {
-    display:block;
-    height: 10px;
-    width: 10px;
-    border-radius: 50%;
-    margin: 5px;
-    position: absolute;
-    top: 5px;
-    right: 5px;
-    z-index: 2;
-    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 10px, rgb(51, 51, 51) 0px 0px 10px 3px;
-}
-
-publication-status::after {
-    content: attr(release-status);
-    position: absolute;
-    top: 0;
-    right: 0;
-
-    visibility: hidden;
-
-    /*Text Properties*/
-    font-size:10pt;
-    font-weight:bold;
-    color:white;
-    text-align: center;
-
-    /*Size*/
-    padding: 3px 8px;
-    border-radius: 6px;
-    border: 0px;
-    background-color: inherit;
-}
-
-publication-status:hover::after{
-    visibility:visible;
-}
-
-
-publication-status[release-status="Ongoing"]{
-    background-color: limegreen;
-}
-
-publication-status[release-status="Completed"]{
-    background-color: blueviolet;
-}
-
-publication-status[release-status="On Hiatus"]{
-    background-color: darkorange;
-}
-
-publication-status[release-status="Cancelled"]{
-    background-color: firebrick;
-}
-
-publication-status[release-status="Upcoming"]{
-    background-color: aqua;
-}
-
-publication-status[release-status="Status Unavailable"]{
-    background-color: gray;
-}
-
-
-publication-details {
-    display: flex;
-    flex-direction: column;
-    justify-content: start;
-}
-
-publication-details * {
-    z-index: 1;
-    color: var(--accent-color);
-}
-
-publication img {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    z-index: 0;
-    border-radius: 5px;
-}

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?

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,
+  },
+})
+```

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 },
+      ],
+    },
+  },
+)

tranga-website/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/png" href="/blahaj.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Tranga</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

tranga-website/package.json

@@ -0,0 +1,35 @@
+{
+  "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",
+    "@uiw/react-markdown-preview": "^5.1.4",
+    "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"
+  }
+}

tranga-website/src/App.css

@@ -0,0 +1,13 @@
+.app {
+  position: absolute;
+  height: 100%;
+  top: 0;
+  width: 100%;
+  left: 0;
+}
+
+.app-content {
+  position: absolute;
+  width: 100%;
+  left: 0;
+}

tranga-website/src/App.tsx

@@ -0,0 +1,107 @@
+import Sheet from '@mui/joy/Sheet';
+import './App.css'
+import Settings from "./Settings.tsx";
+import Header from "./Header.tsx";
+import {Badge, Button} from "@mui/joy";
+import {useEffect, useState} from "react";
+import {ApiUriContext} from "./api/fetchApi.tsx";
+import Search from './Components/Search.tsx';
+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("/")) + "/api";
+
+    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(() => {
+        if(!apiConnected) return;
+        GetAllConnectors(apiUri).then(setMangaConnectors);
+    }, [apiConnected]);
+
+    return (
+        <ApiUriContext.Provider value={apiUri}>
+            <MangaConnectorContext.Provider value={mangaConnectors}>
+                <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>
+                                </Badge>
+                                <Button onClick={() => setShowJobs(true)}>Jobs</Button>
+                            </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.Provider>
+        </ApiUriContext.Provider>
+    );
+}

tranga-website/src/Components/Chapter.tsx

@@ -0,0 +1,50 @@
+import React, {ReactElement, useContext, useState} from "react";
+import IChapter from "../api/types/IChapter.ts";
+import {Box, Chip, Link, Stack, Tooltip, Typography} from "@mui/joy";
+import {MangaFromId} from "./Manga.tsx";
+import {ChapterContext} from "../api/Contexts/ChapterContext.tsx";
+import Drawer from "@mui/joy/Drawer";
+import ModalClose from "@mui/joy/ModalClose";
+import {Archive} from "@mui/icons-material";
+
+export function ChapterPopupFromId({chapterId, open, setOpen, children}: { chapterId: string | null, open: boolean, setOpen: React.Dispatch<React.SetStateAction<boolean>>, children?: ReactElement<any, any> | ReactElement<any, any>[] | undefined }) {
+    return (
+        <Drawer anchor={"bottom"} open={open} onClose={() => setOpen(false)}>
+            <ModalClose />
+            {
+                chapterId !== null ?
+                    <ChapterFromId chapterId={chapterId}>{children}</ChapterFromId>
+                    : null
+            }
+        </Drawer>
+    )
+}
+
+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 ?
+                null
+            :
+            <Chapter chapter={chapter}>{children}</Chapter>
+    );
+}
+
+export function Chapter({chapter, children} : { chapter: IChapter, children?: ReactElement<any, any> | ReactElement<any, any>[] | undefined }){
+    return (
+        <Stack direction={"row"} spacing={5} sx={{paddingTop: "10px"}}>
+            <MangaFromId mangaId={chapter.parentMangaId} />
+            <Box>
+                <Link target={"_blank"} level={"title-lg"} href={chapter.url}>{chapter.title}</Link>
+                <Typography>Volume <Chip>{chapter.volumeNumber}</Chip></Typography>
+                <Typography>Chapter <Chip>{chapter.chapterNumber}</Chip></Typography>
+                <Tooltip title={chapter.fullArchiveFilePath} placement={"bottom-start"}><Archive /></Tooltip>
+            </Box>
+            {children}
+        </Stack>
+    );
+}

tranga-website/src/Components/Jobs.tsx

@@ -0,0 +1,163 @@
+import {
+    Button,
+    DialogContent, DialogTitle,
+    Drawer,
+    Input,
+    Option,
+    Select,
+    Stack,
+    Table,
+    Typography
+} from "@mui/joy";
+import {GetJobsInState, GetJobsOfTypeAndWithState, GetJobsWithType, StartJob} 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, JobStateToString, JobType, JobTypeToString} from "../api/types/Jobs/IJob.ts";
+import ModalClose from "@mui/joy/ModalClose";
+import {MangaPopupFromId} from "./MangaPopup.tsx";
+import IJobWithMangaId from "../api/types/Jobs/IJobWithMangaId.ts";
+import {ChapterPopupFromId} from "./Chapter.tsx";
+import IJobWithChapterId from "../api/types/Jobs/IJobWithChapterId.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;
+        if (filterState === null && filterType === null)
+            setAllJobs([]);
+        else if (filterState === null && filterType != null)
+            GetJobsWithType(apiUri, filterType as unknown as JobType).then(setAllJobs);
+        else if (filterState != null && filterType === null)
+            GetJobsInState(apiUri, filterState as unknown as JobState).then(setAllJobs);
+        else if (filterState != null && filterType != null)
+            GetJobsOfTypeAndWithState(apiUri, filterType as unknown as JobType, filterState as unknown as JobState).then(setAllJobs);
+    }, [connected, filterType, filterState]);
+    
+    const timerRef = React.useRef<ReturnType<typeof setInterval>>(undefined);
+    useEffect(() => {
+        clearTimeout(timerRef.current);
+        updateDisplayJobs();
+        timerRef.current = setInterval(updateDisplayJobs, 2000);
+    }, [filterState, filterType]);
+
+    useEffect(() => {
+        if (!open || !connected)
+            clearTimeout(timerRef.current);
+    }, [open, connected]);
+
+    const handleChangeState = (
+        _: React.SyntheticEvent | null,
+        newValue: string | null,
+    ) => {
+        setFilterState(newValue);
+        setPage(1);
+    };
+    
+    const handleChangeType = (
+        _: React.SyntheticEvent | null,
+        newValue: string | null,
+    ) => {
+        setFilterType(newValue);
+        setPage(1);
+    };
+    
+    const [mangaPopupOpen, setMangaPopupOpen] = React.useState(false);
+    const [selectedMangaId, setSelectedMangaId] = useState<string | null>(null);
+    const OpenMangaPopupDrawer = (mangaId: string) => {
+        setSelectedMangaId(mangaId);
+        setMangaPopupOpen(true);
+    }
+    
+    const [chapterPopupOpen, setChapterPopupOpen] = React.useState(false);
+    const [selectedChapterId, setSelectedChapterId] = React.useState<string | null>(null);
+    const OpenChapterPopupDrawer = (chapterId: string) => {
+        setSelectedChapterId(chapterId);
+        setChapterPopupOpen(true);
+    }
+    
+    const ReRunJob = useCallback((jobId: string) => {
+        StartJob(apiUri, jobId, false);
+    }, [apiUri]);
+
+    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}>{JobStateToString(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}>{JobTypeToString(type)}</Option>)}
+                </Select>
+                <Input type={"number"}
+                       value={page}
+                       onChange={(e) => setPage(parseInt(e.target.value))}
+                       slotProps={{input: { min: 1, max: Math.ceil(allJobs.length / pageSize)}}}
+                       startDecorator={<Typography>Page</Typography>}
+                       endDecorator={<Typography>/{Math.ceil(allJobs.length / pageSize)}</Typography>}/>
+            </Stack>
+            <DialogContent>
+                <Table borderAxis={"bothBetween"} stickyHeader sx={{tableLayout: "auto", width: "100%"}}>
+                    <thead>
+                        <tr>
+                            <th>Type</th>
+                            <th>State</th>
+                            <th>Last Execution</th>
+                            <th>Next Execution</th>
+                            <th></th>
+                            <th>Extra</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {allJobs.slice((page-1)*pageSize, page*pageSize).map((job) => (
+                            <tr key={job.jobId}>
+                                <td>{JobTypeToString(job.jobType)}</td>
+                                <td>{JobStateToString(job.state)}</td>
+                                <td>{new Date(job.lastExecution).toLocaleString()}</td>
+                                <td>{new Date(job.nextExecution).toLocaleString()}</td>
+                                <td style={{whiteSpace: "nowrap"}}><Button onClick={() => ReRunJob(job.jobId)}>Re-Run</Button></td>
+                                <td>{ExtraContent(job, OpenMangaPopupDrawer, OpenChapterPopupDrawer)}</td>
+                            </tr>
+                        ))}
+                    </tbody>
+                </Table>
+            </DialogContent>
+            <MangaPopupFromId mangaId={selectedMangaId} open={mangaPopupOpen} setOpen={setMangaPopupOpen} />
+            <ChapterPopupFromId chapterId={selectedChapterId} open={chapterPopupOpen} setOpen={setChapterPopupOpen} />
+        </Drawer>
+    )
+}
+
+function ExtraContent(job: IJob, OpenMangaPopupDrawer: (mangaId: string) => void, OpenChapterPopupDrawer: (IJobWithChapterId: string) => void){
+    switch(job.jobType){
+        case JobType.DownloadAvailableChaptersJob:
+        case JobType.DownloadMangaCoverJob:
+        case JobType.RetrieveChaptersJob:
+        case JobType.UpdateChaptersDownloadedJob:
+        case JobType.UpdateCoverJob:
+        case JobType.MoveMangaLibraryJob:
+            return <Button onClick={() => OpenMangaPopupDrawer((job as IJobWithMangaId).mangaId)}>Open Manga</Button>
+        case JobType.DownloadSingleChapterJob:
+            return <Button onClick={() => OpenChapterPopupDrawer((job as IJobWithChapterId).chapterId)}>Show Chapter</Button>
+        default:
+            return null;
+    }
+}

tranga-website/src/Components/Manga.tsx

@@ -0,0 +1,119 @@
+import {Badge, Box, Card, CardContent, CardCover, Skeleton, Tooltip, Typography,} from "@mui/joy";
+import IManga from "../api/types/IManga.ts";
+import {CSSProperties, ReactElement, useCallback, useContext, useEffect, useRef, useState} from "react";
+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;
+
+const coverSx : SxProps = {
+    height: CardHeight + "px",
+    width: CardWidth + "px",
+    position: "relative",
+}
+
+const coverCss : CSSProperties = {
+    maxHeight: "calc("+CardHeight+"px + 2rem)",
+    maxWidth: "calc("+CardWidth+"px + 2rem)",
+    objectFit: "cover",
+    width: "calc("+CardHeight+"px + 2rem)",
+    height: "calc("+CardHeight+"px + 2rem)",
+}
+
+export function MangaFromId({mangaId, children} : { mangaId: string, children?: ReactElement<any, any> | ReactElement<any, any>[] | undefined }){
+    const mangaContext = useContext(MangaContext);
+
+    const [manga, setManga] = useState<IManga | undefined>(undefined);
+    mangaContext.GetManga(mangaId).then(setManga);
+
+    return (
+        manga === undefined ?
+            <Badge sx={{margin:"8px !important"}} badgeContent={<Skeleton><Tooltip title={"Loading"}><img width={"24pt"} height={"24pt"} src={"/blahaj.png"} /></Tooltip></Skeleton>} color={ReleaseStatusToPalette(MangaReleaseStatus.Completed)} size={"lg"}>
+                    <Card sx={{height:"fit-content",width:"fit-content"}}>
+                        <CardCover>
+                            <img loading={"lazy"} style={coverCss} src={"/blahaj.png"} alt="Manga Cover"/>
+                        </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={coverSx}>
+                                <Typography level={"h3"} sx={{height:"min-content",width:"fit-content",color:"white",margin:"0 0 0 10px"}}>
+                                    <Skeleton loading={true} animation={"wave"}>
+                                        {mangaId.split("").splice(0,mangaId.length/2).join(" ")}
+                                    </Skeleton>
+                                </Typography>
+                            </Box>
+                        </CardContent>
+                    </Card>
+                </Badge>
+                 :
+                <Manga manga={manga} children={children} />
+    );
+}
+
+export function Manga({manga: manga, children} : { manga: IManga, children?: ReactElement<any, any> | ReactElement<any, any>[] | undefined}) {
+    const CoverRef = useRef<HTMLImageElement>(null);
+
+    const apiUri = useContext(ApiUriContext);
+    const mangaConnector = useContext(MangaConnectorContext).find(all => all.name == manga.mangaConnectorName);
+
+    const [expanded, setExpanded] = useState(false);
+
+    useEffect(() => {
+        LoadMangaCover();
+    }, [manga, apiUri]);
+
+    const LoadMangaCover = useCallback(() => {
+        if(CoverRef.current == null)
+            return;
+        const coverUrl = GetMangaCoverImageUrl(apiUri, manga.mangaId, CoverRef.current);
+        if(CoverRef.current.src == coverUrl)
+            return;
+
+        //Check if we can fetch the image exists (by fetching it), only then update
+        getData(coverUrl).then(() => {
+            if(CoverRef.current) CoverRef.current.src = coverUrl;
+        });
+    }, [manga, apiUri]);
+
+    const interactiveElements = ["button", "input", "textarea", "a", "select", "option", "li"];
+
+    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 ? <Tooltip color={ReleaseStatusToPalette(manga.releaseStatus)} title={manga.releaseStatus}><img width={"24pt"} height={"24pt"} src={mangaConnector.iconUrl} /></Tooltip> : manga.mangaConnectorName} color={ReleaseStatusToPalette(manga.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>
+                    <img loading={"lazy"} style={coverCss} src={GetMangaCoverImageUrl(apiUri, manga.mangaId, CoverRef.current)} alt="Manga Cover"
+                         ref={CoverRef}
+                         onError={LoadMangaCover}/>
+                </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={coverSx}>
+                        <Typography level={"h3"} sx={{height:"min-content",width:"fit-content",color:"white",margin:"0 0 0 10px"}}>
+                            {mangaName}
+                        </Typography>
+                    </Box>
+                </CardContent>
+                <MangaPopup manga={manga} open={expanded} setOpen={setExpanded}>{children}</MangaPopup>
+            </Card>
+        </Badge>
+    );
+}

tranga-website/src/Components/MangaList.tsx

@@ -0,0 +1,77 @@
+import {Badge, Box, Button, Card, CardContent, CardCover, Stack, Tooltip, Typography} from "@mui/joy";
+import {Dispatch, SetStateAction, useCallback, useContext, useEffect, useState} from "react";
+import {ApiUriContext} from "../api/fetchApi.tsx";
+import {DeleteJob, GetJobsWithType, StartJob} from "../api/Job.tsx";
+import {JobType} from "../api/types/Jobs/IJob.ts";
+import IDownloadAvailableChaptersJob from "../api/types/Jobs/IDownloadAvailableChaptersJob.ts";
+import {CardHeight, CardWidth, MangaFromId} from "./Manga.tsx";
+import {PlayArrow, Remove} from "@mui/icons-material";
+import * as React from "react";
+
+export default function MangaList({connected, setShowSearch}: {connected: boolean, setShowSearch: Dispatch<SetStateAction<boolean>>} ) {
+    const apiUri = useContext(ApiUriContext);
+
+    const [jobList, setJobList] = useState<IDownloadAvailableChaptersJob[]>([]);
+
+    const getJobList = useCallback(() => {
+        if(!connected)
+            return;
+        GetJobsWithType(apiUri, JobType.DownloadAvailableChaptersJob).then((jl) => setJobList(jl as IDownloadAvailableChaptersJob[]));
+    },[apiUri,connected]);
+
+    const deleteJob = useCallback((jobId: string) => {
+        DeleteJob(apiUri, jobId).finally(() => getJobList());
+    },[apiUri]);
+
+    const startJob = useCallback((jobId: string) => {
+        StartJob(apiUri, jobId, true).finally(() => getJobList());
+    },[apiUri]);
+
+    useEffect(() => {
+        updateTimer();
+    }, [connected, apiUri]);
+
+    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!");
+                getJobList();
+                timerRef.current = setInterval(getJobList, 2000);
+            }
+        }
+    }, [getJobList, connected, timerRef]);
+
+    return(
+        <Stack direction="row" spacing={1} flexWrap={"wrap"} sx={{overflowX: 'hidden', overflowY: 'auto' /* Badge overflow */}} paddingTop={"6px" /* Badge overflow */}>
+            <Badge invisible sx={{margin: "8px !important"}}>
+                <Card onClick={() => setShowSearch(true)} sx={{height:"fit-content",width:"fit-content"}}>
+                    <CardCover sx={{margin:"var(--Card-padding)"}}>
+                        <img src={"/blahaj.png"} style={{height: CardHeight + "px", width: CardWidth + "px"}} />
+                    </CardCover>
+                    <CardCover sx={{
+                        background: 'rgba(234, 119, 246, 0.14)',
+                        backdropFilter: 'blur(6.9px)',
+                        webkitBackdropFilter: 'blur(6.9px)',
+                    }}/>
+                    <CardContent>
+                        <Box style={{height: CardHeight + "px", width: CardWidth + "px"}} >
+                            <Typography level={"h1"}>Search</Typography>
+                        </Box>
+                    </CardContent>
+                </Card>
+            </Badge>
+            {jobList?.map((job) => (
+                <MangaFromId key={job.mangaId} mangaId={job.mangaId}>
+                    <Tooltip title={"Last run: " + new Date(job.lastExecution).toLocaleString()}>
+                        <Button color={"success"} endDecorator={<PlayArrow />} onClick={() => startJob(job.jobId)}>Start</Button>
+                    </Tooltip>
+                    <Button color={"danger"} endDecorator={<Remove />} onClick={() => deleteJob(job.jobId)}>Delete</Button>
+                </MangaFromId>
+            ))}
+        </Stack>
+    );
+}

tranga-website/src/Components/MangaPopup.tsx

@@ -0,0 +1,186 @@
+import IManga from "../api/types/IManga.ts";
+import {Badge, Box, Chip, CircularProgress, Drawer, Input, Link, Skeleton, Stack, Typography} from "@mui/joy";
+import React, {ReactElement, useCallback, useContext, useEffect, useRef, useState} from "react";
+import {
+    GetLatestChapterAvailable,
+    GetLatestChapterDownloaded,
+    GetMangaCoverImageUrl,
+    SetIgnoreThreshold
+} from "../api/Manga.tsx";
+import {ApiUriContext, getData} from "../api/fetchApi.tsx";
+import MarkdownPreview from "@uiw/react-markdown-preview";
+import {CardHeight} from "./Manga.tsx";
+import IChapter from "../api/types/IChapter.ts";
+import {MangaReleaseStatus, ReleaseStatusToPalette} from "../api/types/EnumMangaReleaseStatus.ts";
+import {MangaConnectorContext} from "../api/Contexts/MangaConnectorContext.tsx";
+import {MangaContext} from "../api/Contexts/MangaContext.tsx";
+import ModalClose from "@mui/joy/ModalClose";
+
+
+export function MangaPopupFromId({mangaId, open, setOpen, children} : {mangaId: string | null, open: boolean, setOpen: React.Dispatch<React.SetStateAction<boolean>>, children?: ReactElement<any, any> | ReactElement<any, any>[] | undefined}) {
+    const mangaContext = useContext(MangaContext);
+
+    const [manga, setManga] = useState<IManga | undefined>(undefined);
+
+    useEffect(() => {
+        if (!open || mangaId === null)
+            return;
+        mangaContext.GetManga(mangaId).then(setManga);
+    }, [open]);
+
+    return (
+        manga === undefined ?
+            <Drawer anchor="bottom" size="lg" open={open} onClose={() => setOpen(false)}>
+                <ModalClose />
+                <Stack direction="column" spacing={2} margin={"10px"}>
+                    { /* Cover and Description */ }
+                    <Stack direction="row" spacing={2} margin={"10px"}>
+                        <Badge sx={{margin:"8px !important"}} color={ReleaseStatusToPalette(MangaReleaseStatus.Unreleased)} size={"lg"}>
+                            <img src="/blahaj.png" alt="Manga Cover"/>
+                        </Badge>
+                        <Box>
+                            <Skeleton loading={true} animation={"wave"}>
+                                {mangaId?.split("").splice(0,mangaId.length/2).join(" ")}
+                            </Skeleton>
+                            <Stack direction={"row"} flexWrap={"wrap"} useFlexGap={true} spacing={0.3} sx={{maxHeight:CardHeight*0.3+"px", overflowY:"auto", scrollbarWidth: "thin"}}>
+                                {mangaId?.split("").filter(x => Number.isNaN(x)).map(_ =>
+                                    <Skeleton loading={true} animation={"wave"}>
+                                        <Chip>Wow</Chip>
+                                    </Skeleton>
+                                )}
+                            </Stack>
+                            <MarkdownPreview style={{backgroundColor: "transparent", color: "var(--joy-palette-neutral-50)", maxHeight:CardHeight*0.7+"px", overflowY:"auto", marginTop:"10px", scrollbarWidth: "thin"}} />
+                        </Box>
+                    </Stack>
+    
+                    { /* Actions */ }
+                    <Stack direction="row" spacing={2}>
+                        {children}
+                    </Stack>
+                </Stack>
+            </Drawer> 
+            :
+            <MangaPopup manga={manga} open={open} setOpen={setOpen}>{children}</MangaPopup>
+    );
+}
+
+export default function MangaPopup({manga, open, setOpen, children} : {manga: IManga | null, open: boolean, setOpen:React.Dispatch<React.SetStateAction<boolean>>, children?: ReactElement<any, any> | ReactElement<any, any>[] | undefined}) {
+
+    const apiUri = useContext(ApiUriContext);
+
+    const CoverRef = useRef<HTMLImageElement>(null);
+
+    const LoadMangaCover = useCallback(() => {
+        if(CoverRef.current == null || manga == null)
+            return;
+        if (!open)
+            return;
+        const coverUrl = GetMangaCoverImageUrl(apiUri, manga.mangaId, CoverRef.current);
+        if(CoverRef.current.src == coverUrl)
+            return;
+
+        //Check if we can fetch the image exists (by fetching it), only then update
+        getData(coverUrl).then(() => {
+            if(CoverRef.current) CoverRef.current.src = coverUrl;
+        });
+    }, [manga, apiUri, open])
+
+    useEffect(() => {
+        if(!open)
+            return;
+        LoadMaxChapter();
+        LoadDownloadedChapter();
+        LoadMangaCover();
+    }, [open]);
+
+    const [mangaMaxChapter, setMangaMaxChapter] = useState<IChapter>();
+    const [maxChapterLoading, setMaxChapterLoading] = useState<boolean>(true);
+    const LoadMaxChapter = useCallback(() => {
+        if(manga == null)
+            return;
+        setMaxChapterLoading(true);
+        GetLatestChapterAvailable(apiUri, manga.mangaId)
+            .then(setMangaMaxChapter)
+            .finally(() => setMaxChapterLoading(false));
+    }, [manga, apiUri]);
+
+    const [mangaDownloadedChapter, setMangaDownloadedChapter] = useState<IChapter>();
+    const [downloadedChapterLoading, setDownloadedChapterLoading] = useState<boolean>(true);
+    const LoadDownloadedChapter = useCallback(() => {
+        if(manga == null)
+            return;
+        setDownloadedChapterLoading(true);
+        GetLatestChapterDownloaded(apiUri, manga.mangaId)
+            .then(setMangaDownloadedChapter)
+            .finally(() => setDownloadedChapterLoading(false));
+    }, [manga, apiUri]);
+
+    const [updatingThreshold, setUpdatingThreshold] = useState<boolean>(false);
+    const updateIgnoreThreshold = useCallback((value: number) => {
+        if(manga == null)
+            return;
+        setUpdatingThreshold(true);
+        SetIgnoreThreshold(apiUri, manga.mangaId, value).finally(() => setUpdatingThreshold(false));
+    },[manga, apiUri])
+
+    const mangaConnector = useContext(MangaConnectorContext).find(all => all.name == manga?.mangaConnectorName);
+
+    return (
+        <Drawer anchor="bottom" size="lg" open={open} onClose={() => setOpen(false)}>
+            <ModalClose />
+            <Stack direction="column" spacing={2} margin={"10px"}>
+                { /* Cover and Description */ }
+                <Stack direction="row" spacing={2} margin={"10px"}>
+                    <Badge sx={{margin:"8px !important"}} badgeContent={mangaConnector ? <img width={"24pt"} height={"24pt"} src={mangaConnector.iconUrl} /> : manga?.mangaConnectorName} color={ReleaseStatusToPalette(manga?.releaseStatus??MangaReleaseStatus.Unreleased)} size={"lg"}>
+                        <img src="/blahaj.png" alt="Manga Cover"
+                             ref={CoverRef}
+                             onLoad={LoadMangaCover}/>
+                    </Badge>
+                    <Box>
+                        <Link target={"_blank"} href={manga?.websiteUrl} level={"h2"}>
+                            {manga?.name}
+                        </Link>
+                        <Stack direction={"row"} flexWrap={"wrap"} useFlexGap={true} spacing={0.3} sx={{maxHeight:CardHeight*0.3+"px", overflowY:"auto", scrollbarWidth: "thin"}}>
+                            {manga?.authors?.map(author => <Chip key={author.authorId} variant={"outlined"} size={"md"} color={"success"}>{author.authorName}</Chip>)}
+                            {manga?.mangaTags?.map(tag => <Chip key={tag.tag} variant={"soft"} size={"md"} color={"primary"}>{tag.tag}</Chip>)}
+                            {manga?.links?.map(link =>
+                                <Chip key={link.linkId} variant={"soft"} size={"md"} color={"warning"}>
+                                    <Link target={"_blank"} sx={{textDecoration:"underline"}} level={"body-xs"} href={link?.linkUrl}>{link?.linkProvider??"Load Failed"}</Link>
+                                </Chip>
+                            )}
+                        </Stack>
+                        <MarkdownPreview source={manga?.description} style={{backgroundColor: "transparent", color: "var(--joy-palette-neutral-50)", maxHeight:CardHeight*0.7+"px", overflowY:"auto", marginTop:"10px", scrollbarWidth: "thin"}} />
+                    </Box>
+                </Stack>
+
+                { /* Actions */ }
+                <Stack direction="row" spacing={2}>
+                    <Input
+                        type={"number"}
+                        placeholder={downloadedChapterLoading ? "" : mangaDownloadedChapter?.chapterNumber??"0.0"}
+                        startDecorator={
+                            <>
+                                {
+                                    updatingThreshold ?
+                                        <CircularProgress color={"primary"} size={"sm"} />
+                                        : <Typography>Ch.</Typography>
+                                }
+                            </>
+                        }
+                        endDecorator={
+                            <Typography>
+                                <Skeleton loading={maxChapterLoading}>
+                                    /{mangaMaxChapter?.chapterNumber??"-"}
+                                </Skeleton>
+                            </Typography>
+                        }
+                        sx={{width:"min-content"}}
+                        size={"md"}
+                        onChange={(e) => updateIgnoreThreshold(e.currentTarget.valueAsNumber)}
+                    />
+                    {children}
+                </Stack>
+            </Stack>
+        </Drawer>
+    );
+}

tranga-website/src/Components/Search.tsx

@@ -0,0 +1,202 @@
+import {
+    Avatar,
+    Button,
+    Chip,
+    CircularProgress,
+    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, SearchUrl} 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";
+import ILocalLibrary from "../api/types/ILocalLibrary.ts";
+import {GetLibraries} from "../api/LocalLibrary.tsx";
+import { LibraryBooks } from "@mui/icons-material";
+
+export default function Search({open, setOpen}:{open:boolean, setOpen:React.Dispatch<React.SetStateAction<boolean>>}){
+
+    const [step, setStep] = useState<number>(2);
+
+    const apiUri = useContext(ApiUriContext);
+    const [mangaConnectors, setMangaConnectors] = useState<IMangaConnector[]>();
+    const [mangaConnectorsLoading, setMangaConnectorsLoading] = useState<boolean>(true);
+    const [selectedMangaConnector, setSelectedMangaConnector] = useState<IMangaConnector>();
+
+    const loadMangaConnectors = useCallback(() => {
+        setMangaConnectorsLoading(true);
+        GetAllConnectors(apiUri).then(setMangaConnectors).finally(() => setMangaConnectorsLoading(false));
+    }, [apiUri]);
+
+    const [results, setResults] = useState<IManga[]|undefined>([]);
+    const [resultsLoading, setResultsLoading] = useState<boolean>(false);
+
+    const StartSearch = useCallback((mangaConnector : IMangaConnector | undefined, value: string)=>{
+        if(mangaConnector === undefined && !IsValidUrl(value))
+            return;
+        setResults(undefined);
+        setResultsLoading(true);
+        setStep(3);
+        if (IsValidUrl(value)){
+            SearchUrl(apiUri, value).then((r) => setResults([r])).finally(() => setResultsLoading(false));
+        }else if (mangaConnector != undefined){
+            SearchNameOnConnector(apiUri, mangaConnector.name, value).then(setResults).finally(() => setResultsLoading(false));
+        }
+    },[apiUri])
+
+    function IsValidUrl(str : string) : boolean {
+        const pattern = new RegExp('^(https?:\\/\\/)?'+ // protocol
+            '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|'+ // domain name
+            '((\\d{1,3}\\.){3}\\d{1,3}))'+ // OR ip (v4) address
+            '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*'+ // port and path
+            '(\\?[;&a-z\\d%_.~+=-]*)?'+ // query string
+            '(\\#[-a-z\\d_]*)?$','i'); // fragment locator
+        return !!pattern.test(str);
+    }
+
+    const [localLibraries, setLocalLibraries] = useState<ILocalLibrary[]>();
+    const [localLibrariesLoading, setLocalLibrariesLoading] = useState<boolean>(true);
+    const [selectedLibraryId, setSelectedLibraryId] = useState<string>();
+
+    const loadLocalLibraries = useCallback(() => {
+        setLocalLibrariesLoading(true);
+        GetLibraries(apiUri).then(setLocalLibraries).finally(() => setLocalLibrariesLoading(false));
+    }, [apiUri]);
+
+    useEffect(() => {
+        loadMangaConnectors();
+        loadLocalLibraries();
+    },[apiUri]);
+
+    useEffect(() => {
+        loadMangaConnectors();
+        loadLocalLibraries();
+    }, []);
+
+    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>
+        );
+    }
+
+    // @ts-ignore
+    return (
+        <Drawer size={"lg"} anchor={"right"} open={open} onClose={() => {
+            if(step > 2)
+                setStep(2);
+            setResults([]);
+            setOpen(false);
+        }}>
+            <ModalClose />
+            <Stepper orientation={"vertical"} sx={{ height: '100%', width: "calc(100% - 80px)", margin:"40px"}}>
+                <Step indicator={
+                    <StepIndicator variant={step==1?"solid":"outlined"} color={(mangaConnectors?.length??0) < 1 ? "danger" : "primary"}>
+                        1
+                    </StepIndicator>}>
+                    <Skeleton loading={mangaConnectorsLoading}>
+                        <Select
+                            color={(mangaConnectors?.length??0) < 1 ? "danger" : "neutral"}
+                            disabled={mangaConnectorsLoading || resultsLoading || mangaConnectors?.length == null || mangaConnectors.length < 1}
+                            placeholder={"Select Connector"}
+                            slotProps={{
+                                    listbox: {
+                                        sx: {
+                                            '--ListItemDecorator-size': '44px',
+                                        },
+                                    },
+                                }}
+                            sx={{ '--ListItemDecorator-size': '44px', minWidth: 240 }}
+                            renderValue={renderValue}
+                            onChange={(_e, newValue) => {
+                                setSelectedMangaConnector(mangaConnectors?.find((o) => o.name === newValue));
+                                setStep(2);
+                                setResults(undefined);
+                            }}
+                            endDecorator={<Chip size={"sm"} color={mangaConnectors?.length??0 < 1 ? "danger" : "primary"}>{mangaConnectors?.length}</Chip>}>
+                            {mangaConnectors?.map((connector: IMangaConnector) => ConnectorOption(connector))}
+                        </Select>
+                    </Skeleton>
+                </Step>
+                <Step indicator={
+                    <StepIndicator variant={step==2?"solid":"outlined"} color="primary">
+                        2
+                    </StepIndicator>}>
+                    <Input disabled={resultsLoading} placeholder={"Name or Url " + (selectedMangaConnector ? selectedMangaConnector.baseUris[0] : "")} onKeyDown={(e) => {
+                        setStep(2);
+                        setResults(undefined);
+                        if(e.key === "Enter") {
+                            StartSearch(selectedMangaConnector, e.currentTarget.value);
+                        }
+                    }}/>
+                </Step>
+                <Step indicator={
+                    <StepIndicator variant={step==3?"solid":"outlined"} color="primary">
+                        3
+                    </StepIndicator>}>
+                    <Typography endDecorator={<Chip size={"sm"} color={"primary"}>{results?.length??"-"}</Chip>}>Results</Typography>
+                    <Skeleton loading={resultsLoading}>
+                        <Stack direction={"row"} spacing={1} flexWrap={"wrap"}>
+                            {results?.map((result) =>
+                                <Manga key={result.mangaId} manga={result}>
+                                    <Select
+                                        placeholder={"Select Library"}
+                                        defaultValue={""}
+                                        startDecorator={<LibraryBooks />}
+                                        value={selectedLibraryId}
+                                        onChange={(_e, newValue) => setSelectedLibraryId(newValue!)}>
+                                        {localLibrariesLoading ?
+                                            <Option value={""} disabled>Loading <CircularProgress color={"primary"} size={"sm"} /></Option>
+                                            :
+                                            (localLibraries??[]).map(library => {
+                                                return (
+                                                    <Option value={library.localLibraryId}>{library.libraryName} ({library.basePath})</Option>
+                                                );
+                                            })}
+                                    </Select>
+                                    <Button disabled={localLibrariesLoading || selectedLibraryId === undefined} onClick={() => {
+                                        CreateDownloadAvailableChaptersJob(apiUri, result.mangaId, {localLibraryId: selectedLibraryId!,recurrenceTimeMs: 1000 * 60 * 60 * 3, language: "en"})
+                                    }} 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>
+    );
+}

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

@@ -0,0 +1,59 @@
+import IBackendSettings from "../../api/types/IBackendSettings.ts";
+import {useCallback, useContext, useEffect, useState} from "react";
+import {ApiUriContext} from "../../api/fetchApi.tsx";
+import {
+    Accordion,
+    AccordionDetails,
+    AccordionSummary,
+    ColorPaletteProp,
+    Switch,
+    Typography
+} from "@mui/joy";
+import * as React from "react";
+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);
+        timerRef.current = setTimeout(() => {
+            UpdateAprilFoolsMode(e.target.checked);
+        }, 1000);
+    }
+
+    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));
+    }, [apiUri]);
+
+    return (
+        <Accordion>
+            <AccordionSummary>April Fools Mode</AccordionSummary>
+            <AccordionDetails>
+                <Typography endDecorator={
+                    <Switch disabled={backendSettings === undefined || loading}
+                            onChange={valueChanged}
+                            color={color}
+                            checked={value} />
+                }>
+                    Toggle
+                </Typography>
+            </AccordionDetails>
+        </Accordion>
+    );
+}

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

@@ -0,0 +1,74 @@
+import IBackendSettings from "../../api/types/IBackendSettings";
+import {
+    Accordion,
+    AccordionDetails,
+    AccordionSummary, Chip,
+    CircularProgress,
+    ColorPaletteProp,
+    Divider,
+    Input,
+    Stack, Tooltip, Typography
+} from "@mui/joy";
+import {KeyboardEventHandler, useCallback, useContext, useState} from "react";
+import {ApiUriContext} from "../../api/fetchApi.tsx";
+import {UpdateChapterNamingScheme} from "../../api/BackendSettings.tsx";
+
+export default function ChapterNamingScheme({backendSettings}: {backendSettings?: IBackendSettings}) {
+    const apiUri = useContext(ApiUriContext);
+    const [loading, setLoading] = useState<boolean>(false);
+    const [value, setValue] = useState<string>("");
+    const [color, setColor] = useState<ColorPaletteProp>("neutral");
+
+    const keyDown : KeyboardEventHandler<HTMLInputElement> = useCallback((e) => {
+        if(e.key === "Enter") {
+            setLoading(true);
+            UpdateChapterNamingScheme(apiUri, value)
+                .then(() => setColor("success"))
+                .catch(() => setColor("danger"))
+                .finally(() => setLoading(false));
+        }
+    }, [apiUri])
+
+    return (
+        <Accordion>
+            <AccordionSummary>Chapter Naming Scheme</AccordionSummary>
+            <AccordionDetails>
+                <Input disabled={backendSettings === undefined || loading}
+                       placeholder={"Chapter Naming Scheme"}
+                       defaultValue={backendSettings?.chapterNamingScheme}
+                       onKeyDown={keyDown}
+                       onChange={e => setValue(e.target.value)}
+                       color={color}
+                       endDecorator={(loading ? <CircularProgress color={"primary"} size={"sm"} /> : null)}
+                />
+                <Typography level={"title-sm"}>Placeholders:</Typography>
+                <Stack direction="row" spacing={1} divider={<Divider />}>
+                    <Tooltip arrow placement="bottom" size="md" variant="outlined"
+                             title={"Manga Title"} >
+                        <Chip color={"primary"}>%M</Chip>
+                    </Tooltip>
+                    <Tooltip arrow placement="bottom" size="md" variant="outlined"
+                             title={"Volume Number"} >
+                        <Chip color={"primary"}>%V</Chip>
+                    </Tooltip>
+                    <Tooltip arrow placement="bottom" size="md" variant="outlined"
+                             title={"Chapter Number"} >
+                        <Chip color={"primary"}>%C</Chip>
+                    </Tooltip>
+                    <Tooltip arrow placement="bottom" size="md" variant="outlined"
+                             title={"Chapter Title"} >
+                        <Chip color={"primary"}>%T</Chip>
+                    </Tooltip>
+                    <Tooltip arrow placement="bottom" size="md" variant="outlined"
+                             title={"Year"} >
+                        <Chip color={"primary"}>%Y</Chip>
+                    </Tooltip>
+                    <Tooltip arrow placement="bottom" size="md" variant="outlined"
+                             title={"First Author"} >
+                        <Chip color={"primary"}>%A</Chip>
+                    </Tooltip>
+                </Stack>
+            </AccordionDetails>
+        </Accordion>
+    );
+}

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

@@ -0,0 +1,72 @@
+import IBackendSettings from "../../api/types/IBackendSettings";
+import {
+    Accordion,
+    AccordionDetails,
+    AccordionSummary,
+    Button,
+    ColorPaletteProp,
+    Input, Stack
+} from "@mui/joy";
+import {KeyboardEventHandler, useCallback, useContext, useEffect, useState} from "react";
+import {ApiUriContext} from "../../api/fetchApi.tsx";
+import {
+    ResetFlareSolverrUrl,
+    SetFlareSolverrUrl, TestFlareSolverrUrl,
+} from "../../api/BackendSettings.tsx";
+
+export default function FlareSolverr({backendSettings}: {backendSettings?: IBackendSettings}) {
+    const apiUri = useContext(ApiUriContext);
+    const [loading, setLoading] = useState<boolean>(false);
+    const [value, setValue] = useState<string>(backendSettings?.flareSolverrUrl??"");
+    const [color, setColor] = useState<ColorPaletteProp>("neutral");
+
+    const keyDown : KeyboardEventHandler<HTMLInputElement> = useCallback((e) => {
+        if(value === undefined) return;
+        if(e.key === "Enter") {
+            setLoading(true);
+            SetFlareSolverrUrl(apiUri, value)
+                .then(() => setColor("success"))
+                .catch(() => setColor("danger"))
+                .finally(() => setLoading(false));
+        }
+    }, [apiUri, value])
+
+    const Reset = useCallback(() => {
+        setLoading(true);
+        ResetFlareSolverrUrl(apiUri)
+            .then(() => Test())
+            .catch(() => setColor("danger"))
+            .finally(() => setLoading(false));
+    }, [apiUri]);
+    
+    const Test = useCallback(() => {
+        setLoading(true);
+        TestFlareSolverrUrl(apiUri)
+            .then(() => setColor("success"))
+            .catch(() => setColor("danger"))
+            .finally(() => setLoading(false));
+    }, [apiUri]);
+
+    useEffect(() => {
+        setValue(backendSettings?.flareSolverrUrl??"");
+    }, [backendSettings]);
+
+    return (
+        <Accordion>
+            <AccordionSummary>FlareSolverr</AccordionSummary>
+            <AccordionDetails>
+                <Input disabled={backendSettings === undefined || loading}
+                       placeholder={"FlareSolverr URL"}
+                       value={value}
+                       onKeyDown={keyDown}
+                       onChange={e => setValue(e.target.value)}
+                       color={color}
+                       endDecorator={<Stack direction={"row"} spacing={1}>
+                           <Button onClick={Reset} loading={loading}>Reset</Button>
+                           <Button onClick={Test} loading={loading}>Test</Button>
+                       </Stack>}
+                />
+            </AccordionDetails>
+        </Accordion>
+    );
+}

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

@@ -0,0 +1,102 @@
+import IBackendSettings from "../../api/types/IBackendSettings.ts";
+import {ChangeEvent, useCallback, useContext, useEffect, useRef, useState} from "react";
+import {ApiUriContext} from "../../api/fetchApi.tsx";
+import {
+    Accordion,
+    AccordionDetails,
+    AccordionSummary, ColorPaletteProp, Input, Stack, Switch, Typography,
+} from "@mui/joy";
+import {
+    GetBWImageToggle,
+    GetImageCompressionValue,
+    UpdateBWImageToggle,
+    UpdateImageCompressionValue
+} from "../../api/BackendSettings.tsx";
+
+export default function ImageProcessing ({backendSettings}: { backendSettings?: IBackendSettings }) {
+    const apiUri = useContext(ApiUriContext);
+
+    useEffect(() => {
+        setBwImages(backendSettings?.bwImages??false);
+        setCompression(backendSettings?.compression??100);
+    }, [backendSettings]);
+
+    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 [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 compressionValueChanged = (e : ChangeEvent<HTMLInputElement>) => {
+        setCompressionColor("warning");
+        setCompression(parseInt(e.target.value));
+        clearTimeout(compressionTimerRef.current);
+        bwTimerRef.current = setTimeout(() => {
+            UpdateImageCompression(parseInt(e.target.value));
+        }, 1000);
+    }
+    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>
+                <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/RequestLimits.tsx

@@ -0,0 +1,81 @@
+import IBackendSettings from "../../api/types/IBackendSettings.ts";
+import {useCallback, useContext, useState} from "react";
+import {ApiUriContext} from "../../api/fetchApi.tsx";
+import {
+    Accordion,
+    AccordionDetails,
+    AccordionSummary,
+    Button,
+    ColorPaletteProp,
+    Input,
+    Stack,
+    Typography
+} from "@mui/joy";
+import {RequestLimitType} from "../../api/types/EnumRequestLimitType.ts";
+import {ResetRequestLimit, ResetRequestLimits, UpdateRequestLimit} from "../../api/BackendSettings.tsx";
+import {Restore} from "@mui/icons-material";
+
+export default function RequestLimits({backendSettings}: {backendSettings?: IBackendSettings}) {
+    const apiUri = useContext(ApiUriContext);
+
+    const [color, setColor] = useState<ColorPaletteProp>("neutral");
+    const [loading, setLoading] = useState(false);
+    const Update = useCallback((target: HTMLInputElement, limit: RequestLimitType) => {
+        setLoading(true);
+        UpdateRequestLimit(apiUri, limit, Number.parseInt(target.value))
+            .then(() => setColor("success"))
+            .catch(() => setColor("danger"))
+            .finally(() => setLoading(false));
+    },[apiUri])
+
+    const Reset = useCallback((limit: RequestLimitType) => {
+        setLoading(true);
+        ResetRequestLimit(apiUri, limit)
+            .then(() => setColor("success"))
+            .catch(() => setColor("danger"))
+            .finally(() => setLoading(false));
+    }, [apiUri]);
+
+    const ResetAll = useCallback(() => {
+        setLoading(true);
+        ResetRequestLimits(apiUri)
+            .then(() => setColor("success"))
+            .catch(() => setColor("danger"))
+            .finally(() => setLoading(false));
+    }, [apiUri]);
+
+    return (
+        <Accordion>
+            <AccordionSummary>Request Limits</AccordionSummary>
+            <AccordionDetails>
+                <Stack spacing={1} direction="column">
+                    <Button loading={backendSettings === undefined} onClick={ResetAll} size={"sm"} variant={"outlined"} endDecorator={<Restore />} color={"warning"}>Reset all</Button>
+                    <Item type={RequestLimitType.Default} color={color} backendSettings={backendSettings} loading={loading} Reset={Reset} Update={Update} />
+                    <Item type={RequestLimitType.MangaInfo} color={color} backendSettings={backendSettings} loading={loading} Reset={Reset} Update={Update} />
+                    <Item type={RequestLimitType.MangaImage} color={color} backendSettings={backendSettings} loading={loading} Reset={Reset} Update={Update} />
+                    <Item type={RequestLimitType.MangaDexFeed} color={color} backendSettings={backendSettings} loading={loading} Reset={Reset} Update={Update} />
+                    <Item type={RequestLimitType.MangaDexImage} color={color} backendSettings={backendSettings} loading={loading} Reset={Reset} Update={Update} />
+                </Stack>
+            </AccordionDetails>
+        </Accordion>
+    );
+}
+
+function Item({type, color, loading, backendSettings, Reset, Update}:
+              {type: RequestLimitType, color: ColorPaletteProp, loading: boolean, backendSettings: IBackendSettings | undefined, Reset: (x: RequestLimitType) => void, Update: (a: HTMLInputElement, x: RequestLimitType) => void}) {
+    return (
+        <Input slotProps={{input: {min: 0, max: 360}}}
+               color={color}
+               startDecorator={<Typography sx={{width:"140px"}}>{type}</Typography>}
+               endDecorator={<Button onClick={() => Reset(type)}>Reset</Button>}
+               disabled={loading} type={"number"}
+               defaultValue={backendSettings?.requestLimits[type]}
+               placeholder={"Default"}
+               required
+               onKeyDown={(e) => {
+                   if(e.key == "Enter")
+                       Update(e.target as HTMLInputElement, type);
+               }}
+        />
+    );
+}

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

@@ -0,0 +1,60 @@
+import IBackendSettings from "../../api/types/IBackendSettings";
+import {
+    Accordion,
+    AccordionDetails,
+    AccordionSummary,
+    Button,
+    ColorPaletteProp,
+    Input
+} from "@mui/joy";
+import {KeyboardEventHandler, useCallback, useContext, useEffect, useState} from "react";
+import {ApiUriContext} from "../../api/fetchApi.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>(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)
+                .then(() => setColor("success"))
+                .catch(() => setColor("danger"))
+                .finally(() => setLoading(false));
+        }
+    }, [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"}
+                       value={value}
+                       onKeyDown={keyDown}
+                       onChange={e => setValue(e.target.value)}
+                       color={color}
+                       endDecorator={<Button onClick={Reset} loading={loading}>Reset</Button>}
+                />
+            </AccordionDetails>
+        </Accordion>
+    );
+}

tranga-website/src/Header.css

@@ -0,0 +1,11 @@
+.header {
+    position: sticky !important;
+    z-index: 1000;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 60px;
+    padding: 10px;
+    display: flex;
+    flex-flow: row nowrap;
+}

tranga-website/src/Header.tsx

@@ -0,0 +1,28 @@
+import Sheet from "@mui/joy/Sheet";
+import {Box, Link, Stack, Typography} from "@mui/joy";
+import {ReactElement} from "react";
+import './Header.css';
+import { GitHub } from "@mui/icons-material";
+
+export default function Header({children} : {children? : ReactElement<any, any> | ReactElement<any,any>[] | undefined}) : ReactElement {
+    
+    return (
+        <Sheet className={"header"}>
+            <Stack direction={"row"} spacing={2} sx={{width: "100%", alignItems: "center"}}>
+                {children}
+                <Box sx={{flexGrow: 1}} />
+                <img src={"/blahaj.png"} style={{cursor: "grab", maxHeight: "100%"}}/>
+                <Typography level={"h2"} sx={{
+                    background: "linear-gradient(110deg, var(--joy-palette-primary-solidBg), var(--joy-palette-success-400))", 
+                    WebkitBackgroundClip: "text",
+                    WebkitTextFillColor: "transparent",
+                    fontWeight: "bold",
+                    cursor: "default"
+                }}>Tranga</Typography>
+                <Box sx={{flexGrow: 1}} />
+                <Link target={"_blank"} href={"https://github.com/C9Glax/tranga"} color={"neutral"} height={"min-content"} ><GitHub /> Server</Link>
+                <Link target={"_blank"} href={"https://github.com/C9Glax/tranga-website"} color={"neutral"} height={"min-content"} ><GitHub /> Website</Link>
+            </Stack>
+        </Sheet>
+    );
+}

tranga-website/src/Settings.tsx

@@ -0,0 +1,127 @@
+import Drawer from '@mui/joy/Drawer';
+import ModalClose from '@mui/joy/ModalClose';
+import {
+    Accordion,
+    AccordionDetails,
+    AccordionGroup,
+    AccordionSummary, CircularProgress, ColorPaletteProp,
+    DialogContent,
+    DialogTitle, Input,
+    Link, Stack
+} from "@mui/joy";
+import './Settings.css';
+import * as React from "react";
+import {useCallback, useContext, useEffect, useState} from "react";
+import {ApiUriContext} from "./api/fetchApi.tsx";
+import IBackendSettings from "./api/types/IBackendSettings.ts";
+import { GetSettings } from './api/BackendSettings.tsx';
+import UserAgent from "./Components/Settings/UserAgent.tsx";
+import ImageProcessing from "./Components/Settings/ImageProcessing.tsx";
+import ChapterNamingScheme from "./Components/Settings/ChapterNamingScheme.tsx";
+import AprilFoolsMode from './Components/Settings/AprilFoolsMode.tsx';
+import RequestLimits from "./Components/Settings/RequestLimits.tsx";
+import FlareSolverr from "./Components/Settings/FlareSolverr.tsx";
+import {Article} from '@mui/icons-material';
+
+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, setConnected}:{open:boolean, setOpen:React.Dispatch<React.SetStateAction<boolean>>, setApiUri:React.Dispatch<React.SetStateAction<string>>, setConnected:React.Dispatch<React.SetStateAction<boolean>>}) {
+
+    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) => {
+        console.log("Checking connection...");
+        setChecking(true);
+        checkConnection(uri)
+            .then((result) => {
+                setConnected(result);
+                if(result)
+                    console.log("Connected!");
+                setApiUriAccordionOpen(!result);
+                setApiUriColor(result ? "success" : "danger");
+                if(result)
+                    setApiUri(uri);
+            })
+            .finally(() => setChecking(false));
+    }
+
+    const [backendSettings, setBackendSettings] = useState<IBackendSettings>();
+
+    const getBackendSettings = useCallback(() => {
+        GetSettings(apiUri).then(setBackendSettings);
+    }, [apiUri]);
+
+    useEffect(() => {
+        getBackendSettings();
+    }, [checking]);
+
+    return (
+        <Drawer size={"lg"} 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>
+                    <UserAgent backendSettings={backendSettings} />
+                    <ImageProcessing backendSettings={backendSettings} />
+                    <ChapterNamingScheme backendSettings={backendSettings} />
+                    <AprilFoolsMode backendSettings={backendSettings} />
+                    <RequestLimits backendSettings={backendSettings} />
+                    <FlareSolverr backendSettings={backendSettings} />
+                </AccordionGroup>
+                <Stack spacing={2} direction="row"> 
+                    <Link target={"_blank"} href={apiUri + "/swagger"}><Article />Swagger Doc</Link>
+                </Stack>
+            </DialogContent>
+        </Drawer>
+    );
+}

tranga-website/src/api/BackendSettings.tsx

@@ -0,0 +1,92 @@
+import {deleteData, getData, patchData, postData} 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);
+}
+
+export const SetFlareSolverrUrl = async (apiUri: string, value: string) => {
+    return postData(`${apiUri}/v2/Settings/FlareSolverr/Url`, value);
+}
+
+export const ResetFlareSolverrUrl = async (apiUri: string) => {
+    return deleteData(`${apiUri}/v2/Settings/FlareSolverr/Url`);
+}
+
+export const TestFlareSolverrUrl = async (apiUri: string) => {
+    return postData(`${apiUri}/v2/Settings/FlareSolverr/Test`);
+}

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

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/MangaConnectorContext.tsx

@@ -0,0 +1,4 @@
+import {createContext} from "react";
+import IMangaConnector from "../types/IMangaConnector.ts";
+
+export const MangaConnectorContext = createContext<IMangaConnector[]>([]);

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

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 IDownloadAvailableChaptersJobRecord from "./types/records/IDownloadAvailableChaptersJobRecord.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)
+        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) {
+        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)
+        return Promise.reject("jobType was not provided");
+    if(state == null)
+        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: IDownloadAvailableChaptersJobRecord) : 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, startDependencies: boolean) : Promise<object | undefined> => {
+    return await postData(`${apiUri}/v2/Job/${jobId}/Start`, startDependencies);
+}
+
+export const StopJob = async (apiUri: string, jobId: string) : Promise<object | undefined> => {
+    return await postData(`${apiUri}/v2/Job/${jobId}/Stop`);
+}

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 | undefined> => {
+    return await patchData(`${apiUri}/v2/LocalLibraries/${libraryId}/ChangeBasePath`, newPath);
+}
+
+export const  ChangeLibraryName = async (apiUri: string, libraryId: string, newName: string) : Promise<object | undefined> => {
+    return await patchData(`${apiUri}/v2/LocalLibraries/${libraryId}/ChangeName`, newName);
+}
+
+export const  UpdateLibrary = async (apiUri: string, libraryId: string, record: INewLibraryRecord) : Promise<object | undefined> => {
+    return await patchData(`${apiUri}/v2/LocalLibraries/${libraryId}`, record);
+}

tranga-website/src/api/Manga.tsx

@@ -0,0 +1,95 @@
+import {deleteData, getData, patchData, postData} from './fetchApi.tsx';
+import IManga, {DefaultManga} 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");
+    if(mangaId === DefaultManga.mangaId)
+        return Promise.reject("Default Manga was requested");
+    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");
+    if(mangaId === DefaultManga.mangaId)
+        return Promise.reject("Default Manga was requested");
+    return await deleteData(`${apiUri}/v2/Manga/${mangaId}`);
+}
+
+export const GetMangaCoverImageUrl = (apiUri: string, mangaId: string, ref: HTMLImageElement | undefined | null) : string => {
+    if(ref == null || mangaId === DefaultManga.mangaId)
+        return "/blahaj.png";
+    return `${apiUri}/v2/Manga/${mangaId}/Cover?width=${ref.clientWidth}&height=${ref.clientHeight}`;
+}
+
+export const GetChapters = async (apiUri: string, mangaId: string) : Promise<IChapter[]> => {
+    if(mangaId === null || mangaId.length < 1)
+        return Promise.reject("mangaId was not provided");
+    if(mangaId === DefaultManga.mangaId)
+        return Promise.reject("Default Manga was requested");
+    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");
+    if(mangaId === DefaultManga.mangaId)
+        return Promise.reject("Default Manga was requested");
+    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");
+    if(mangaId === DefaultManga.mangaId)
+        return Promise.reject("Default Manga was requested");
+    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");
+    if(mangaId === DefaultManga.mangaId)
+        return Promise.reject("Default Manga was requested");
+    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");
+    if(mangaId === DefaultManga.mangaId)
+        return Promise.reject("Default Manga was requested");
+    return await getData(`${apiUri}/v2/Manga/${mangaId}/Chapter/LatestDownloaded`) as Promise<IChapter>;
+}
+
+export const  SetIgnoreThreshold = async (apiUri: string, mangaId: string, chapterThreshold: number) : Promise<object | undefined> => {
+    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");
+    if(mangaId === DefaultManga.mangaId)
+        return Promise.reject("Default Manga was requested");
+    return await patchData(`${apiUri}/v2/Manga/${mangaId}/IgnoreChaptersBefore`, chapterThreshold);
+}
+
+export const MoveFolder = async (apiUri: string, mangaId: string, newPath: string) : Promise<object | undefined> => {
+    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");
+    if(mangaId === DefaultManga.mangaId)
+        return Promise.reject("Default Manga was requested");
+    return await postData(`${apiUri}/v2/Manga/{MangaId}/MoveFolder`, {newPath});
+}

tranga-website/src/api/MangaConnector.tsx

@@ -0,0 +1,26 @@
+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 GetConnector = async (apiUri: string, mangaConnectorName: string) : Promise<IMangaConnector> => {
+    return await getData(`${apiUri}/v2/MangaConnector/${mangaConnectorName}`) 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 | undefined> => {
+    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}`, {});
+}

tranga-website/src/api/NotificationConnector.tsx

@@ -0,0 +1,45 @@
+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 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  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>;
+}

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

tranga-website/src/api/Search.tsx

@@ -0,0 +1,22 @@
+import {getData, 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 getData(`${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>;
+}

tranga-website/src/api/fetchApi.tsx

@@ -0,0 +1,89 @@
+import {createContext} from "react";
+
+export const ApiUriContext = createContext<string>("");
+
+export function getData(uri: string) : Promise<object | undefined> {
+    return makeRequestWrapper("GET", uri, null);
+}
+
+export function postData(uri: string, content?: object | string | number | boolean | null) : Promise<object | undefined> {
+    return makeRequestWrapper("POST", uri, content);
+}
+
+export function deleteData(uri: string) : Promise<void> {
+    return makeRequestWrapper("DELETE", uri, null) as Promise<void>;
+}
+
+export function patchData(uri: string, content: object | string | number | boolean) : Promise<object | undefined> {
+    return makeRequestWrapper("patch", uri, content);
+}
+
+export function putData(uri: string, content: object | string | number | boolean) : Promise<object | undefined> {
+    return makeRequestWrapper("PUT", uri, content);
+}
+
+function makeRequestWrapper(method: string, uri: string, content?: object | string | number | null | boolean) : Promise<object | undefined>{
+    return makeRequest(method, uri, content)
+        .then((result) => result as Promise<object>)
+        .catch((e) => {
+            console.warn(e);
+            return Promise.reject(e);
+        });
+}
+
+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(`DO NOT REPORT! 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;
+    }
+}

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

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"
+}

tranga-website/src/api/types/IAuthor.ts

@@ -0,0 +1,4 @@
+export default interface IAuthor {
+    authorId: string;
+    authorName: string;
+}

tranga-website/src/api/types/IBackendSettings.ts

@@ -0,0 +1,19 @@
+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;
+    flareSolverrUrl: string;
+}

tranga-website/src/api/types/IChapter.ts

@@ -0,0 +1,11 @@
+export default interface IChapter{
+    chapterId: string;
+    parentMangaId: string;
+    volumeNumber: number | null;
+    chapterNumber: string;
+    url: string;
+    title: string | null;
+    fileName: string | null;
+    downloaded: boolean;
+    fullArchiveFilePath: string;
+}

tranga-website/src/api/types/IFrontendSettings.ts

@@ -0,0 +1,4 @@
+export default interface IFrontendSettings {
+    jobInterval: Date;
+    apiUri: string;
+}

tranga-website/src/api/types/ILibraryConnector.ts

@@ -0,0 +1,11 @@
+export default interface ILibraryConnector {
+    libraryConnectorId: string;
+    libraryType: LibraryType;
+    baseUrl: string;
+    auth: string;
+}
+
+export enum LibraryType {
+    Komga = "Komga",
+    Kavita = "Kavita"
+}

tranga-website/src/api/types/ILink.ts

@@ -0,0 +1,5 @@
+export default interface ILink {
+    linkId: string;
+    linkProvider: string;
+    linkUrl: string;
+}

tranga-website/src/api/types/ILocalLibrary.ts

@@ -0,0 +1,5 @@
+export default interface ILocalLibrary {
+    localLibraryId: string;
+    basePath: string;
+    libraryName: string;
+}

tranga-website/src/api/types/IManga.ts

@@ -0,0 +1,45 @@
+import {MangaReleaseStatus} from "./EnumMangaReleaseStatus";
+import IAuthor from "./IAuthor.ts";
+import IMangaAltTitle from "./IMangaAltTitle.ts";
+import IMangaTag from "./IMangaTag.ts";
+import ILink from "./ILink.ts";
+
+export default interface IManga{
+    mangaId: string;
+    idOnConnectorSite: string;
+    name: string;
+    description: string;
+    websiteUrl: string;
+    releaseStatus: MangaReleaseStatus;
+    libraryId: string | null;
+    mangaConnectorName: string;
+    authors: IAuthor[] | null;
+    mangaTags: IMangaTag[] | null;
+    links: ILink[] | null;
+    altTitles: IMangaAltTitle[] | null;
+    ignoreChaptersBefore: number;
+    directoryName: string;
+    year: number | null;
+    originalLanguage: string | null;
+    chapterIds: string[] | null;
+}
+
+export const DefaultManga : IManga = {
+    mangaId: "Loading",
+    idOnConnectorSite: "Loading",
+    name: "Loading",
+    description: "Loading",
+    websiteUrl: "",
+    releaseStatus: MangaReleaseStatus.Continuing,
+    libraryId: null,
+    mangaConnectorName: "Loading",
+    authors: null,
+    mangaTags: null,
+    links: null,
+    altTitles: null,
+    ignoreChaptersBefore: 0,
+    directoryName: "",
+    year: 1999,
+    originalLanguage: "en",
+    chapterIds: null
+}

tranga-website/src/api/types/IMangaAltTitle.ts

@@ -0,0 +1,5 @@
+export default interface IMangaAltTitle {
+    altTitleId: string;
+    language: string;
+    title: string;
+}

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

tranga-website/src/api/types/IMangaTag.ts

@@ -0,0 +1,3 @@
+export default interface IMangaTag {
+    tag: string;
+}

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

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

tranga-website/src/api/types/Jobs/IDownloadAvailableChaptersJob.ts

@@ -0,0 +1,5 @@
+import IJobWithMangaId from "./IJobWithMangaId.ts";
+
+export default interface IDownloadAvailableChaptersJob extends IJobWithMangaId {
+
+}

tranga-website/src/api/types/Jobs/IDownloadMangaCoverJob.ts

@@ -0,0 +1,5 @@
+import IJobWithMangaId from "./IJobWithMangaId.ts";
+
+export default interface IDownloadMangaCoverJob extends IJobWithMangaId {
+
+}

tranga-website/src/api/types/Jobs/IDownloadSingleChapterJob.ts

@@ -0,0 +1,5 @@
+import IJobWithChapterId from "./IJobWithChapterId.tsx";
+
+export default interface IDownloadSingleChapterJob extends IJobWithChapterId {
+
+}