Finish master-merge

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

.github/workflows/docker-image-cuttingedge.yml

@@ -3,6 +3,8 @@ name: Docker Image CI
 on:
   push:
     branches: [ "cuttingedge" ]
+  pull_request:
+    branches: [ "cuttingedge" ] 
   workflow_dispatch:
 
 jobs:
@@ -17,12 +19,12 @@ jobs:
 
       # https://github.com/docker/setup-qemu-action#usage
       - name: Set up QEMU
-        uses: docker/setup-qemu-action@v3.2.0
+        uses: docker/setup-qemu-action@v3.6.0
 
       # https://github.com/marketplace/actions/docker-setup-buildx
       - name: Set up Docker Buildx
         id: buildx
-        uses: docker/setup-buildx-action@v3.6.1
+        uses: docker/setup-buildx-action@v3.11.1
       
       # https://github.com/docker/login-action#docker-hub
       - name: Login to Docker Hub
@@ -33,12 +35,12 @@ jobs:
       
       # https://github.com/docker/build-push-action#multi-platform-image
       - name: Build and push Website
-        uses: docker/build-push-action@v6.7.0
+        uses: docker/build-push-action@v6.18.0
         with:
-          context: ./Website
+          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: |

.github/workflows/docker-image-master.yml

@@ -17,12 +17,12 @@ jobs:
 
       # https://github.com/docker/setup-qemu-action#usage
       - name: Set up QEMU
-        uses: docker/setup-qemu-action@v3.2.0
+        uses: docker/setup-qemu-action@v3.6.0
 
       # https://github.com/marketplace/actions/docker-setup-buildx
       - name: Set up Docker Buildx
         id: buildx
-        uses: docker/setup-buildx-action@v3.6.1
+        uses: docker/setup-buildx-action@v3.11.1
       
       # https://github.com/docker/login-action#docker-hub
       - name: Login to Docker Hub
@@ -33,12 +33,12 @@ jobs:
       
       # https://github.com/docker/build-push-action#multi-platform-image
       - name: Build and push Website
-        uses: docker/build-push-action@v6.7.0
+        uses: docker/build-push-action@v6.18.0
         with:
-          context: ./Website
+          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: |

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

@@ -17,12 +17,12 @@ jobs:
 
       # https://github.com/docker/setup-qemu-action#usage
       - name: Set up QEMU
-        uses: docker/setup-qemu-action@v3.2.0
+        uses: docker/setup-qemu-action@v3.6.0
 
       # https://github.com/marketplace/actions/docker-setup-buildx
       - name: Set up Docker Buildx
         id: buildx
-        uses: docker/setup-buildx-action@v3.6.1
+        uses: docker/setup-buildx-action@v3.11.1
       
       # https://github.com/docker/login-action#docker-hub
       - name: Login to Docker Hub
@@ -33,12 +33,12 @@ jobs:
       
       # https://github.com/docker/build-push-action#multi-platform-image
       - name: Build and push Website
-        uses: docker/build-push-action@v6.7.0
+        uses: docker/build-push-action@v6.18.0
         with:
           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: |

README.md

@@ -33,9 +33,9 @@
 <!-- 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)
+| ![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/src/Components/Chapter.tsx

@@ -1,14 +1,15 @@
 import React, {ReactElement, useContext, useState} from "react";
 import IChapter from "../api/types/IChapter.ts";
-import {Box, Chip, Link, Stack, Typography} from "@mui/joy";
+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 open={open} onClose={() => setOpen(false)}>
+        <Drawer anchor={"bottom"} open={open} onClose={() => setOpen(false)}>
             <ModalClose />
             {
                 chapterId !== null ?
@@ -35,13 +36,13 @@ export function ChapterFromId({chapterId, children} : { chapterId: string, child
 
 export function Chapter({chapter, children} : { chapter: IChapter, children?: ReactElement<any, any> | ReactElement<any, any>[] | undefined }){
     return (
-        <Stack direction={"row"}>
+        <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>
-                <Typography>Title <Chip>{chapter.title}</Chip></Typography>
+                <Tooltip title={chapter.fullArchiveFilePath} placement={"bottom-start"}><Archive /></Tooltip>
             </Box>
             {children}
         </Stack>

tranga-website/src/Components/Jobs.tsx

@@ -9,11 +9,11 @@ import {
     Table,
     Typography
 } from "@mui/joy";
-import {GetJobsInState, GetJobsOfTypeAndWithState, GetJobsWithType} from "../api/Job.tsx";
+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, JobType} from "../api/types/Jobs/IJob.ts";
+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";
@@ -85,6 +85,10 @@ export default function JobsDrawer({open, connected, setOpen} : {open: boolean,
         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)}>
@@ -95,13 +99,13 @@ export default function JobsDrawer({open, connected, setOpen} : {open: boolean,
                     <Typography>State</Typography>
                 }>
                     <Option value={null}>None</Option>
-                    {Object.keys(JobState).map((state) => <Option value={state}>{state}</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}>{type}</Option>)}
+                    {Object.keys(JobType).map((type) => <Option value={type}>{JobTypeToString(type)}</Option>)}
                 </Select>
                 <Input type={"number"}
                        value={page}
@@ -111,26 +115,28 @@ export default function JobsDrawer({open, connected, setOpen} : {open: boolean,
                        endDecorator={<Typography>/{Math.ceil(allJobs.length / pageSize)}</Typography>}/>
             </Stack>
             <DialogContent>
-                <Table borderAxis={"xBetween"} stickyHeader>
+                <Table borderAxis={"bothBetween"} stickyHeader sx={{tableLayout: "auto", width: "100%"}}>
                     <thead>
-                    <tr>
-                        <th>Type</th>
-                        <th>State</th>
-                        <th>Last Execution</th>
-                        <th>NextExecution</th>
-                        <th>Extra</th>
-                    </tr>
+                        <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>{job.jobType}</td>
-                            <td>{job.state}</td>
-                            <td>{new Date(job.lastExecution).toLocaleString()}</td>
-                            <td>{new Date(job.nextExecution).toLocaleString()}</td>
-                            <td>{ExtraContent(job, OpenMangaPopupDrawer, OpenChapterPopupDrawer)}</td>
-                        </tr>
-                    ))}
+                        {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>
@@ -150,8 +156,7 @@ function ExtraContent(job: IJob, OpenMangaPopupDrawer: (mangaId: string) => void
         case JobType.MoveMangaLibraryJob:
             return <Button onClick={() => OpenMangaPopupDrawer((job as IJobWithMangaId).mangaId)}>Open Manga</Button>
         case JobType.DownloadSingleChapterJob:
-        case JobType.UpdateSingleChapterDownloadedJob:
-            return <Button onClick={() => OpenChapterPopupDrawer((job as IJobWithChapterId).chapterId)}>ShowChapter</Button>
+            return <Button onClick={() => OpenChapterPopupDrawer((job as IJobWithChapterId).chapterId)}>Show Chapter</Button>
         default:
             return null;
     }

tranga-website/src/Components/Manga.tsx

@@ -21,6 +21,9 @@ const coverSx : SxProps = {
 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 }){
@@ -34,7 +37,7 @@ export function MangaFromId({mangaId, children} : { mangaId: string, children?:
             <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 style={coverCss} src={"/blahaj.png"} alt="Manga Cover"/>
+                            <img loading={"lazy"} style={coverCss} src={"/blahaj.png"} alt="Manga Cover"/>
                         </CardCover>
                         <CardCover sx={{
                             background:
@@ -94,9 +97,9 @@ export function Manga({manga: manga, children} : { manga: IManga, children?: Rea
                     setExpanded(!expanded)}
             }>
                 <CardCover>
-                    <img style={coverCss} src={GetMangaCoverImageUrl(apiUri, manga.mangaId, CoverRef.current)} alt="Manga Cover"
+                    <img loading={"lazy"} style={coverCss} src={GetMangaCoverImageUrl(apiUri, manga.mangaId, CoverRef.current)} alt="Manga Cover"
                          ref={CoverRef}
-                         onLoad={LoadMangaCover}/>
+                         onError={LoadMangaCover}/>
                 </CardCover>
                 <CardCover sx={{
                     background:

tranga-website/src/Components/MangaList.tsx

@@ -27,17 +27,12 @@ export default function MangaList({connected, setShowSearch}: {connected: boolea
         StartJob(apiUri, jobId, true).finally(() => getJobList());
     },[apiUri]);
 
-    useEffect(() => {
-        getJobList();
-    }, [apiUri]);
-
     useEffect(() => {
         updateTimer();
-        getJobList();
-    }, [connected]);
+    }, [connected, apiUri]);
 
     const timerRef = React.useRef<ReturnType<typeof setInterval>>(undefined);
-    const updateTimer = () => {
+    const updateTimer = useCallback(() => {
         if(!connected){
             clearTimeout(timerRef.current);
             return;
@@ -45,12 +40,10 @@ export default function MangaList({connected, setShowSearch}: {connected: boolea
             if(timerRef.current === undefined) {
                 console.log("Added timer!");
                 getJobList();
-                timerRef.current = setInterval(() => {
-                    getJobList();
-                }, 2000);
+                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 */}>

tranga-website/src/Components/MangaPopup.tsx

@@ -116,7 +116,7 @@ export default function MangaPopup({manga, open, setOpen, children} : {manga: IM
     }, [manga, apiUri]);
 
     const [updatingThreshold, setUpdatingThreshold] = useState<boolean>(false);
-    const updateIgnoreThreshhold = useCallback((value: number) => {
+    const updateIgnoreThreshold = useCallback((value: number) => {
         if(manga == null)
             return;
         setUpdatingThreshold(true);
@@ -176,7 +176,7 @@ export default function MangaPopup({manga, open, setOpen, children} : {manga: IM
                         }
                         sx={{width:"min-content"}}
                         size={"md"}
-                        onChange={(e) => updateIgnoreThreshhold(e.currentTarget.valueAsNumber)}
+                        onChange={(e) => updateIgnoreThreshold(e.currentTarget.valueAsNumber)}
                     />
                     {children}
                 </Stack>

tranga-website/src/api/Job.tsx

@@ -14,22 +14,22 @@ export const GetJobsWithIds = async (apiUri: string, jobIds: string[]) : Promise
 }
 
 export const GetJobsInState = async (apiUri: string, state: JobState) : Promise<IJob[]> => {
-    if(state == null || state == undefined)
+    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 || jobType == undefined) {
+    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 || jobType == undefined)
+    if(jobType == null)
         return Promise.reject("jobType was not provided");
-    if(state == null || state == undefined)
+    if(state == null)
         return Promise.reject("state was not provided");
     return await getData(`${apiUri}/v2/Job/TypeAndState/${jobType}/${state}`) as Promise<IJob[]>;
 }

tranga-website/src/api/Manga.tsx

@@ -29,15 +29,13 @@ export const DeleteManga = async (apiUri: string, mangaId: string) : Promise<voi
 }
 
 export const GetMangaCoverImageUrl = (apiUri: string, mangaId: string, ref: HTMLImageElement | undefined | null) : string => {
-    if(ref == null || ref == undefined)
-        return `${apiUri}/v2/Manga/${mangaId}/Cover?width=64&height=64`;
-    if(mangaId === DefaultManga.mangaId)
+    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 === undefined || mangaId === null || mangaId.length < 1)
+    if(mangaId === null || mangaId.length < 1)
         return Promise.reject("mangaId was not provided");
     if(mangaId === DefaultManga.mangaId)
         return Promise.reject("Default Manga was requested");

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

@@ -16,14 +16,21 @@ export enum JobType {
     RetrieveChaptersJob = "RetrieveChaptersJob",
     UpdateChaptersDownloadedJob = "UpdateChaptersDownloadedJob",
     MoveMangaLibraryJob = "MoveMangaLibraryJob",
-    UpdateSingleChapterDownloadedJob = "UpdateSingleChapterDownloadedJob",
     UpdateCoverJob = "UpdateCoverJob"
 }
 
+export function JobTypeToString(job: JobType | string): string {
+    return job.replace(/([A-Z])/g, ' $1').replace("Job", "").trim();
+}
+
 export enum JobState {
     FirstExecution = "FirstExecution",
     Running = "Running",
     Completed = "Completed",
     CompletedWaiting = "CompletedWaiting",
     Failed = "Failed"
+}
+
+export function JobStateToString(state: JobState | string): string {
+    return state.replace(/([A-Z])/g, ' $1').trim();
 }