From 10f48af9fa39e0507303e89112f961f35aab6e4c Mon Sep 17 00:00:00 2001
From: glax <johanna@bernloehr.eu>
Date: Wed, 2 Apr 2025 02:17:10 +0200
Subject: [PATCH] Styling

---
 tranga-website/src/App.tsx                  | 34 ++++++++++++---------
 tranga-website/src/Components/LinkTag.tsx   |  4 +--
 tranga-website/src/Components/Manga.tsx     |  8 ++---
 tranga-website/src/Components/MangaList.tsx | 17 ++++++++++-
 4 files changed, 41 insertions(+), 22 deletions(-)

diff --git a/tranga-website/src/App.tsx b/tranga-website/src/App.tsx
index b6a6928..d14c078 100644
--- a/tranga-website/src/App.tsx
+++ b/tranga-website/src/App.tsx
@@ -2,7 +2,7 @@ import Sheet from '@mui/joy/Sheet';
 import './App.css'
 import Settings from "./Settings.tsx";
 import Header from "./Header.tsx";
-import {Badge, Button, Card, CardContent, CardCover, Typography} from "@mui/joy";
+import {Badge, Box, Button, Card, CardContent, CardCover, Typography} from "@mui/joy";
 import {useState} from "react";
 import {ApiUriContext} from "./api/fetchApi.tsx";
 import Search from './Components/Search.tsx';
@@ -27,20 +27,24 @@ export default function App () {
                 <Settings open={showSettings} setOpen={setShowSettings} setApiUri={setApiUri} setConnected={setApiConnected} />
                 <Search open={showSearch} setOpen={setShowSearch} />
                 <Sheet className={"app-content"}>
-                    <MangaList>
-                        <Card onClick={() => setShowSearch(true)} sx={{height:"400px", width:"300px"}}>
-                            <CardCover>
-                                <img src={"/blahaj.png"} />
-                            </CardCover>
-                            <CardCover sx={{
-                                background: 'rgba(234, 119, 246, 0.14)',
-                                backdropFilter: 'blur(6.9px)',
-                                webkitBackdropFilter: 'blur(6.9px)',
-                            }}/>
-                            <CardContent>
-                                <Typography level={"h1"}>Search</Typography>
-                            </CardContent>
-                        </Card>
+                    <MangaList connected={apiConnected}>
+                        <Badge invisible>
+                            <Card onClick={() => setShowSearch(true)} sx={{height:"fit-content",width:"fit-content"}}>
+                                <CardCover sx={{margin:"var(--Card-padding)"}}>
+                                    <img src={"/blahaj.png"} style={{height:"400px", width:"300px"}} />
+                                </CardCover>
+                                <CardCover sx={{
+                                    background: 'rgba(234, 119, 246, 0.14)',
+                                    backdropFilter: 'blur(6.9px)',
+                                    webkitBackdropFilter: 'blur(6.9px)',
+                                }}/>
+                                <CardContent>
+                                    <Box style={{height:"400px", width:"300px"}} >
+                                        <Typography level={"h1"}>Search</Typography>
+                                    </Box>
+                                </CardContent>
+                            </Card>
+                        </Badge>
                     </MangaList>
                 </Sheet>
             </Sheet>
diff --git a/tranga-website/src/Components/LinkTag.tsx b/tranga-website/src/Components/LinkTag.tsx
index 28d6329..b79d6d6 100644
--- a/tranga-website/src/Components/LinkTag.tsx
+++ b/tranga-website/src/Components/LinkTag.tsx
@@ -16,9 +16,9 @@ export default function LinkTag({linkId, color} : { linkId: string | undefined,
     }, [linkId]);
 
     return (
-        <Chip variant={"outlined"} size={"md"} color={color??"primary"}>
+        <Chip variant={"soft"} size={"sm"} color={color??"primary"}>
             <Skeleton variant={"text"} loading={loading}>
-                <Link href={link?.linkUrl}>{link?.linkProvider??"Load Failed"}</Link>
+                <Link sx={{textDecoration:"underline"}} level={"body-xs"} href={link?.linkUrl}>{link?.linkProvider??"Load Failed"}</Link>
             </Skeleton>
         </Chip>
     );
diff --git a/tranga-website/src/Components/Manga.tsx b/tranga-website/src/Components/Manga.tsx
index f3b01a6..1c84c4d 100644
--- a/tranga-website/src/Components/Manga.tsx
+++ b/tranga-website/src/Components/Manga.tsx
@@ -108,14 +108,14 @@ export function Manga({manga, children, loading} : { manga: IManga | undefined,
                         expanded ?
                             <Box sx={sideSx}>
                                 <Skeleton loading={loading} variant={"text"} level={"title-lg"}>
-                                    <Stack direction={"row"} flexWrap={"wrap"} spacing={0.5}>
+                                    <Stack direction={"row"} flexWrap={"wrap"} spacing={0.5} sx={{maxHeight:"75px", overflowY:"auto", scrollbarWidth: "thin"}}>
                                         {useManga.authorIds.map(authorId => <AuthorTag key={authorId} authorId={authorId} color={"success"} />)}
-                                        {useManga.tags.map(tag => <Chip key={tag} variant={"outlined"} size={"md"} color={"primary"}>{tag}</Chip>)}
-                                        {useManga.linkIds.map(linkId => <LinkTag key={linkId} linkId={linkId} color={"danger"} />)}
+                                        {useManga.tags.map(tag => <Chip key={tag} variant={"soft"} size={"md"} color={"primary"}>{tag}</Chip>)}
+                                        {useManga.linkIds.map(linkId => <LinkTag key={linkId} linkId={linkId} color={"warning"} />)}
                                     </Stack>
                                 </Skeleton>
                                 <Skeleton loading={loading} sx={{maxHeight:"300px"}}>
-                                    <MarkdownPreview source={useManga.description} style={{backgroundColor: "transparent", color: "black"}} />
+                                    <MarkdownPreview source={useManga.description} style={{backgroundColor: "transparent", color: "black", maxHeight:"310px", overflowY:"auto", marginTop:"10px", scrollbarWidth: "thin"}} />
                                 </Skeleton>
                             </Box>
                             : null
diff --git a/tranga-website/src/Components/MangaList.tsx b/tranga-website/src/Components/MangaList.tsx
index dcbd28b..b748557 100644
--- a/tranga-website/src/Components/MangaList.tsx
+++ b/tranga-website/src/Components/MangaList.tsx
@@ -6,13 +6,16 @@ import {JobType} from "../api/types/Jobs/IJob.ts";
 import IDownloadAvailableChaptersJob from "../api/types/Jobs/IDownloadAvailableChaptersJob.ts";
 import {MangaFromId} from "./Manga.tsx";
 import { Remove } from "@mui/icons-material";
+import * as React from "react";
 
-export default function MangaList({children}: {children?: React.ReactNode} ){
+export default function MangaList({connected, children}: {connected: boolean, children?: React.ReactNode} ){
     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]);
 
@@ -24,6 +27,18 @@ export default function MangaList({children}: {children?: React.ReactNode} ){
         getJobList();
     }, [apiUri]);
 
+    const timerRef = React.useRef<ReturnType<typeof setInterval>>(undefined);
+    useEffect(() => {
+        if(!connected){
+            clearTimeout(timerRef.current);
+            return;
+        }else{
+            timerRef.current = setInterval(() => {
+                getJobList();
+            }, 2000);
+        }
+    }, [connected,]);
+
     return(
         <Stack direction="row" spacing={1}>
             {children}