From 8657cdbfcfff3577edc6ff17c04590fcd2e635c3 Mon Sep 17 00:00:00 2001
From: Der_Googler <54764558+DerGoogler@users.noreply.github.com>
Date: Sat, 26 Aug 2023 14:20:33 +0200
Subject: [PATCH] Some imrpvements

---
 Website/src/activitys/DescriptonActivity.tsx |   2 +-
 Website/src/activitys/ModuleViewActivity.tsx | 303 ++++++++++++-------
 Website/src/components/ExploreModule.tsx     |  38 +--
 Website/src/components/onsenui/Toolbar.tsx   |  21 +-
 Website/src/hooks/useCategory.ts             |  18 +-
 Website/src/hooks/useSupportIconForUrl.tsx   |  36 ++-
 Website/src/typings/global.d.ts              |   2 +-
 7 files changed, 253 insertions(+), 167 deletions(-)

diff --git a/Website/src/activitys/DescriptonActivity.tsx b/Website/src/activitys/DescriptonActivity.tsx
index c2f39086..f7c3ff6d 100644
--- a/Website/src/activitys/DescriptonActivity.tsx
+++ b/Website/src/activitys/DescriptonActivity.tsx
@@ -274,7 +274,7 @@ function DescriptonActivity() {
                         }}
                       >
                         <Stack spacing={0.8} direction="row" alignItems="center">
-                          <SupportIcon sx={{ fontSize: 14 }} />
+                          {/* <SupportIcon sx={{ fontSize: 14 }} /> */}
                           <span style={{ fontSize: 14 }}>Support</span>
                         </Stack>
                       </StyledIconButtonWithText>
diff --git a/Website/src/activitys/ModuleViewActivity.tsx b/Website/src/activitys/ModuleViewActivity.tsx
index 716121c2..0b6e4362 100644
--- a/Website/src/activitys/ModuleViewActivity.tsx
+++ b/Website/src/activitys/ModuleViewActivity.tsx
@@ -38,13 +38,22 @@ import { os } from "@Native/Os";
 import { Markup } from "@Components/Markdown";
 import Alert from "@mui/material/Alert";
 import AlertTitle from "@mui/material/AlertTitle";
-import { useCategory } from "@Hooks/useCategory";
+import { useFilterCategory } from "@Hooks/useCategory";
+import { useFormatDate } from "@Hooks/useFormatDate";
+import Chip from "@mui/material/Chip";
+import CodeRoundedIcon from "@mui/icons-material/CodeRounded";
+import Icon from "@Components/Icon";
+import CardMedia from "@mui/material/CardMedia";
+import DevicesIcon from "@mui/icons-material/Devices";
+import ButtonGroup from "@mui/material/ButtonGroup";
+import { useSupportIconForUrl } from "@Hooks/useSupportIconForUrl";
 
 type Extra = {
   module: ModuleProps;
   notes_url: string;
   zip_url: string;
   authorData?: any;
+  last_update: string;
 };
 
 const ModuleViewActivity = () => {
@@ -55,7 +64,7 @@ const ModuleViewActivity = () => {
   const [open, setOpen] = React.useState(false);
   const [scroll, setScroll] = React.useState<DialogProps["scroll"]>("paper");
 
-  const { notes_url, zip_url, authorData } = extra;
+  const { notes_url, zip_url, authorData, last_update } = extra;
   const {
     name,
     author,
@@ -69,14 +78,16 @@ const ModuleViewActivity = () => {
     minMagisk,
     minApi,
     maxApi,
+    mmrlCover,
     needRamdisk,
-    mmrlCaregory,
+    mmrlCategory,
     changeBoot,
   } = extra.module;
 
-  const { category, validCategory } = useCategory(mmrlCaregory);
-
+  const categories = useFilterCategory(mmrlCategory);
   const { data } = useFetch<string>(notes_url);
+  const formatLastUpdate = useFormatDate(last_update);
+  const { SupportIcon, supportText } = useSupportIconForUrl(support);
 
   const handleClickOpen = (scrollType: DialogProps["scroll"]) => () => {
     setOpen(true);
@@ -87,13 +98,30 @@ const ModuleViewActivity = () => {
     setOpen(false);
   };
 
+  console.log(categories);
+
   const renderToolbar = () => {
     return (
       <Toolbar modifier="noshadow">
-        <Toolbar.Center>
-          <Fade in={titleShow}>
-            <span>{name}</span>
-          </Fade>
+        <Toolbar.Center
+          sx={{
+            display: "flex",
+            justifyContent: "left",
+            alignItems: "center",
+          }}
+        >
+          <Typography
+            sx={{
+              display: "flex",
+              justifyContent: "left",
+              alignItems: "center",
+              fontSize: 20,
+            }}
+            component="span"
+          >
+            <CodeRoundedIcon sx={{ mr: 1 }} />
+            MMRL
+          </Typography>
         </Toolbar.Center>
         <Toolbar.Left>
           <Toolbar.BackButton onClick={context.popPage} />
@@ -105,53 +133,132 @@ const ModuleViewActivity = () => {
   return (
     <Page modifier="noshadow" renderToolbar={renderToolbar}>
       <Box
-        component={Disappear}
+        component="div"
         sx={(theme) => ({
-          pt: 0,
-          pl: 2,
-          pr: 2,
-          pb: 2,
+          // pt: 0,
+          // pl: 2,
+          // pr: 2,
+          // pb: 2,
+          position: "relative",
+          zIndex: 9,
           backgroundColor: theme.palette.primary.main,
           color: "white",
-          display: "flex",
+          // display: "flex",
         })}
-        wrapper="div"
-        onDisappear={(visible) => {
-          setTitleShow(!visible);
-        }}
       >
-        <Avatar
-          alt={name}
+        {mmrlCover && (
+          <Box
+            sx={(theme) => ({
+              //background: '-webkit-gradient(linear,left bottom,left top,from(rgb(32,33,36)),color-stop(56%,rgba(0,0,0,0)))',
+              //background: '-webkit-linear-gradient(bottom,rgb(32,33,36) 0,rgba(0,0,0,0) 56%)',
+              background: `linear-gradient(to top,${theme.palette.primary.main} 0,rgba(0,0,0,0) 56%)`,
+            })}
+          >
+            <CardMedia
+              component="img"
+              sx={(theme) => ({
+                zIndex: -1,
+                display: "block",
+                position: "relative",
+                height: "calc(calc(100vw - 48px)*9/16)",
+                objectFit: "cover",
+                // width: "calc(100% - 16px)",
+              })}
+              image={mmrlCover}
+              alt={name}
+            />
+          </Box>
+        )}
+
+        <Box
           sx={(theme) => ({
-            bgcolor: scheme[300],
-            width: 100,
-            height: 100,
-            boxShadow: "0 -1px 5px rgba(0,0,0,.09), 0 3px 5px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.3), 0 1px 3px rgba(0,0,0,.15)",
-            borderRadius: theme.shape.borderRadius,
-            mr: 1.5,
-            fontSize: 50,
+            pt: mmrlCover ? 0 : 2,
+            pl: 2,
+            pr: 2,
+            pb: 2,
+            backgroundColor: theme.palette.primary.main,
+            color: "white",
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "flex-start",
           })}
-          src={mmrlLogo}
         >
-          {name.charAt(0).toUpperCase()}
-        </Avatar>
+          <Box
+            sx={{
+              display: "flex",
+              width: "100%",
+            }}
+          >
+            <Avatar
+              alt={name}
+              sx={(theme) => ({
+                bgcolor: scheme[300],
+                width: 100,
+                height: 100,
+                boxShadow: "0 -1px 5px rgba(0,0,0,.09), 0 3px 5px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.3), 0 1px 3px rgba(0,0,0,.15)",
+                borderRadius: "20%",
+                mr: 1.5,
+                fontSize: 50,
+              })}
+              src={mmrlLogo}
+            >
+              {name.charAt(0).toUpperCase()}
+            </Avatar>
 
-        <Box sx={{ alignSelf: "center", ml: 0.5, mr: 0.5, width: "100%" }}>
-          <Typography variant="body1" fontWeight="bold">
-            {name}
-          </Typography>
-          <Typography variant="body2" color="text.secondary">
-            {mmrlAuthor && authorData ? <span>{authorData.username ? authorData.username : author}</span> : <span>{author}</span>}
-            {authorData?.options?.roles?.verified && <VerifiedIcon sx={{ ml: 0.5, fontSize: ".70rem" }} />}
-          </Typography>
-          <Stack direction="row" justifyContent="space-between" alignItems="center" spacing={1}>
-            <Stack direction="row" justifyContent="flex-end" alignItems="center" spacing={1}>
-              <Typography variant="subtitle2" color="text.secondary" noWrap>
-                {version} ({versionCode})
+            <Box sx={{ alignSelf: "center", ml: 0.5, mr: 0.5, width: "100%" }}>
+              <Typography variant="body1" fontWeight="bold">
+                {name}
               </Typography>
-            </Stack>
+              <Typography variant="body2" color="text.secondary">
+                {mmrlAuthor && authorData ? <span>{authorData.username ? authorData.username : author}</span> : <span>{author}</span>}
+                {authorData?.options?.roles?.verified && <VerifiedIcon sx={{ ml: 0.5, fontSize: ".70rem" }} />}
+              </Typography>
+            </Box>
+          </Box>
+
+          <Stack
+            sx={{
+              mt: 3,
+              display: "flex",
+              width: "100%",
+            }}
+            direction={{ xs: "column", sm: "row" }}
+            justifyContent="space-between"
+            spacing={1}
+          >
+            <Typography sx={{ display: "flex", justifyContent: "flex-start", alignItems: "center" }} color="text.secondary">
+              {version} ({versionCode})
+            </Typography>
+
+            <Stack direction={{ xs: "column", sm: "row" }} spacing={1}>
+              {support && (
+                <Button
+                  sx={{
+                    color: scheme[100],
+                    border: `1px solid ${scheme[100]}80`,
+                    minWidth: 160,
+                    width: { sm: "unset", xs: "100%" },
+                    alignSelf: "flex-end",
+                    ":hover": {
+                      color: scheme[200],
+                      border: `1px solid ${scheme[200]}80`,
+                    },
+                  }}
+                  variant="outlined"
+                  startIcon={<SupportIcon />}
+                  onClick={() => {
+                    os.open(support, {
+                      target: "_blank",
+                      features: {
+                        color: theme.palette.primary.main,
+                      },
+                    });
+                  }}
+                >
+                  {supportText}
+                </Button>
+              )}
 
-            <Stack direction="row" justifyContent="flex-end" alignItems="center" spacing={1}>
               <Button
                 disabled={!zip_url}
                 onClick={() => {
@@ -162,7 +269,7 @@ const ModuleViewActivity = () => {
                     },
                   });
                 }}
-                sx={{ alignItems: "right", bgcolor: scheme[400] }}
+                sx={{ bgcolor: scheme[400], minWidth: 160, width: { sm: "unset", xs: "100%" }, alignSelf: "flex-end" }}
                 variant="contained"
                 disableElevation
               >
@@ -224,21 +331,24 @@ const ModuleViewActivity = () => {
         {data ? (
           <Card sx={{ mt: 1, boxShadow: "none" }}>
             <CardContent>
-              <Typography
-                gutterBottom
+              <Stack
+                component={Typography}
                 sx={{
-                  display: "flex",
-                  justifyContent: "left",
                   alignItems: "center",
                 }}
-                variant="h5"
-                component="div"
+                direction="row"
+                justifyContent={{ xs: "space-between", sm: "row" }}
+                spacing={1}
+                gutterBottom
               >
-                About this module
+                <Typography variant="h5" component="div">
+                  About this module
+                </Typography>
                 <IconButton onClick={handleClickOpen("paper")} sx={{ ml: 0.5 }} aria-label="Example">
                   <ArrowForwardIcon />
                 </IconButton>
-              </Typography>
+              </Stack>
+
               <Typography
                 component={Markdown}
                 sx={{
@@ -279,71 +389,37 @@ const ModuleViewActivity = () => {
                     audio: {
                       component: "p",
                     },
+                    a: {
+                      component: "p",
+                    },
                   },
                 }}
               >
                 {data}
               </Typography>
-            </CardContent>
-          </Card>
-        ) : null}
-
-        <Box
-          sx={{
-            display: "flex",
-            flexDirection: {
-              xs: "column", // mobile
-              sm: "row", // tablet and up
-            },
-          }}
-        >
-          {support && (
-            <Card sx={{ width: { xs: "100%" }, mr: validCategory ? { sm: 0.5, xs: 0 } : 0, mt: 1, boxShadow: "none" }}>
-              <CardContent>
-                <Typography
-                  variant="h5"
-                  component="div"
+              <Typography sx={{ mt: 3 }} variant="h6" component="div">
+                Updated on
+                <Typography sx={{ fontSize: "0.875rem" }} variant="body2" component="div" color="text.secondary">
+                  {formatLastUpdate}
+                </Typography>
+              </Typography>
+              {categories.length !== 0 && (
+                <Box
                   sx={{
                     display: "flex",
-                    justifyContent: "left",
-                    alignItems: "center",
+                    flexWrap: "wrap",
+                    gap: "16px 12px",
+                    mt: 3.5,
                   }}
                 >
-                  Trobules? Get help!
-                  <IconButton
-                    onClick={() => {
-                      support &&
-                        os.open(support, {
-                          target: "_blank",
-                          features: {
-                            color: theme.palette.primary.main,
-                          },
-                        });
-                    }}
-                    sx={{ ml: 0.5 }}
-                  >
-                    <LaunchIcon />
-                  </IconButton>
-                </Typography>
-                <Typography variant="body2" color="text.secondary">
-                  Will open an erternal link e.g. GitHub or XDA
-                </Typography>
-              </CardContent>
-            </Card>
-          )}
-          {validCategory && (
-            <Card sx={{ width: { xs: "100%" }, ml: support ? { sm: 0.5, xs: 0 } : 0, mt: 1, boxShadow: "none" }}>
-              <CardContent>
-                <Typography variant="h5" component="div">
-                  Category
-                </Typography>
-                <Typography variant="body2" color="text.secondary">
-                  {category}
-                </Typography>
-              </CardContent>
-            </Card>
-          )}
-        </Box>
+                  {categories.map((category) => (
+                    <Chip label={category} variant="outlined" />
+                  ))}
+                </Box>
+              )}
+            </CardContent>
+          </Card>
+        ) : null}
 
         <Card
           sx={{
@@ -400,6 +476,11 @@ const ModuleViewActivity = () => {
       </Page.RelativeContent>
 
       <Dialog
+        sx={{
+          "& .MuiDialog-paper": {
+            m: 2,
+          },
+        }}
         open={open}
         onClose={handleClose}
         scroll={scroll}
@@ -428,7 +509,7 @@ const ModuleViewActivity = () => {
                 width: 56,
                 height: 56,
                 boxShadow: "0 -1px 5px rgba(0,0,0,.09), 0 3px 5px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.3), 0 1px 3px rgba(0,0,0,.15)",
-                borderRadius: theme.shape.borderRadius,
+                borderRadius: "20%",
                 mr: 1.5,
                 fontSize: 25,
               })}
diff --git a/Website/src/components/ExploreModule.tsx b/Website/src/components/ExploreModule.tsx
index 215c49cf..8d31b26a 100644
--- a/Website/src/components/ExploreModule.tsx
+++ b/Website/src/components/ExploreModule.tsx
@@ -79,6 +79,7 @@ export const ExploreModule = (props: Props) => {
       component: ModuleViewActivity,
       key: "",
       extra: {
+        last_update: last_update,
         zip_url: zip_url,
         authorData: authorData,
         notes_url: notes_url,
@@ -92,7 +93,7 @@ export const ExploreModule = (props: Props) => {
       return null;
     }
 
-    if (!settings._disable_module_covers && prop_url.mmrlCover) {
+    if (prop_url.mmrlCover) {
       return (
         <CardMedia
           component="img"
@@ -113,23 +114,6 @@ export const ExploreModule = (props: Props) => {
     return null;
   };
 
-  const LegacyVerified = () => {
-    if (!authorData?.options?.roles?.verified && isVerified) {
-      return (
-        <StyledIconButton
-          style={{ width: 39, height: 39 }}
-          onClick={() => {
-            os.toast(strings.module_verified, Toast.LENGTH_SHORT);
-          }}
-        >
-          <VerifiedRounded sx={{ fontSize: 14 }} />
-        </StyledIconButton>
-      );
-    }
-
-    return null;
-  };
-
   return (
     <Box
       component={GestureDetector}
@@ -181,23 +165,13 @@ export const ExploreModule = (props: Props) => {
           <Chip
             size="small"
             sx={(theme) => ({
-              bgcolor: `${settings.darkmode ? shade(scheme[200], -56) : theme.palette.secondary.light}46`,
+              bgcolor: `${settings.darkmode ? shade(scheme[100], -36) : theme.palette.secondary.light}46`,
             })}
             label={formatLastUpdate}
           />
-          <Stack spacing={0.8} direction="row">
-            {/* <StyledIconButtonWithText
-            onClick={() => {
-              set(ref(db, `modules/${prop_url.id}/likes/${auth.currentUser.uid}`), true);
-            }}
-          >
-            <Stack spacing={0.8} direction="row" alignItems="center">
-              <ThumbUpIcon sx={{ fontSize: 14 }} />
-              <span style={{ fontSize: 14 }}>0</span>
-            </Stack>
-          </StyledIconButtonWithText> */}
-            <LegacyVerified />
-          </Stack>
+          {/* <Stack spacing={0.8} direction="row">
+Keep for update modules           
+          </Stack> */}
         </Stack>
         {settings._low_quality_module && isLowQuality && (
           <Alert style={{ borderRadius: 0 }} severity="warning">
diff --git a/Website/src/components/onsenui/Toolbar.tsx b/Website/src/components/onsenui/Toolbar.tsx
index 8fd7e221..40c0892b 100644
--- a/Website/src/components/onsenui/Toolbar.tsx
+++ b/Website/src/components/onsenui/Toolbar.tsx
@@ -5,6 +5,8 @@ import React from "react";
 import { OverridableComponent } from "@mui/material/OverridableComponent";
 import ArrowBackIcon from "@mui/icons-material/ArrowBack";
 import { SvgIconTypeMap } from "@mui/material/SvgIcon";
+import { SxProps, Theme } from "@mui/material/styles";
+import Box from "@mui/material/Box";
 
 interface HTMLToolbar {
   modifier?: string;
@@ -19,6 +21,7 @@ interface HTMLToolbarButton {
   modifier?: string;
   disabled?: boolean;
   onClick?: React.MouseEventHandler<HTMLToolbarButton>;
+  keepLight?: boolean;
   id?: string;
   icon?: OverridableComponent<SvgIconTypeMap<{}, "svg">>;
 }
@@ -29,21 +32,25 @@ const HTMLToolbarButton = onsCustomElement<HTMLElement, HTMLToolbarButton>("ons-
 const ToolbarButton = React.forwardRef((props: HTMLToolbarButton, ref: React.Ref<HTMLElement>) => {
   return (
     <HTMLToolbarButton ref={ref} id={props.id} style={{ fontFamily: "unset" }} onClick={props.onClick}>
-      {props.icon ? <Icon icon={props.icon} keepLight /> : <>{props.children}</>}
+      {props.icon ? <Icon icon={props.icon} keepLight={!props.keepLight ? true : props.keepLight} /> : <>{props.children}</>}
     </HTMLToolbarButton>
   );
 });
 
-const ToolbarLeft = (props: React.PropsWithChildren) => {
-  return <div className="left" children={props.children} />;
+interface ToolbarElementsProps extends React.PropsWithChildren {
+  sx?: SxProps<Theme>;
+}
+
+const ToolbarLeft = (props: ToolbarElementsProps) => {
+  return <Box component="div" sx={props.sx} className="left" children={props.children} />;
 };
 
-const ToolbarCenter = (props: React.PropsWithChildren) => {
-  return <div className="center" children={props.children} />;
+const ToolbarCenter = (props: ToolbarElementsProps) => {
+  return <Box component="div" sx={props.sx} className="center" children={props.children} />;
 };
 
-const ToolbarRight = (props: React.PropsWithChildren) => {
-  return <div className="right" children={props.children} />;
+const ToolbarRight = (props: ToolbarElementsProps) => {
+  return <Box component="div" sx={props.sx} className="right" children={props.children} />;
 };
 
 const ToolbarBackButton = (props: Omit<HTMLToolbarButton, "children">) => {
diff --git a/Website/src/hooks/useCategory.ts b/Website/src/hooks/useCategory.ts
index 4fc2c8dd..74b8abc2 100644
--- a/Website/src/hooks/useCategory.ts
+++ b/Website/src/hooks/useCategory.ts
@@ -1,15 +1,9 @@
-export function useCategory(input?: string) {
+export function useFilterCategory(input?: string) {
   const categories = ["Tools", "Boot", "manegment", "System", "Coding", "Apps", "Gaming", "Other"];
-
-  if (!input) {
-    return {
-      category: "Other",
-      validCategory: false,
-    };
+  const input_array = input?.split(",");
+  if (input_array) {
+    return categories.filter((i) => input_array.indexOf(i) !== -1);
+  } else {
+    return [];
   }
-
-  return {
-    category: categories.indexOf(input) > -1 ? input : "Other",
-    validCategory: categories.indexOf(input) > -1,
-  };
 }
diff --git a/Website/src/hooks/useSupportIconForUrl.tsx b/Website/src/hooks/useSupportIconForUrl.tsx
index a90d265f..b645d06f 100644
--- a/Website/src/hooks/useSupportIconForUrl.tsx
+++ b/Website/src/hooks/useSupportIconForUrl.tsx
@@ -3,15 +3,45 @@ import GitHubIcon from "@mui/icons-material/GitHub";
 import TelegramIcon from "@mui/icons-material/Telegram";
 import { useRef } from "react";
 
+interface Support {
+  SupportIcon: typeof SupportIcon;
+  supportText: string;
+}
+
 export function useSupportIconForUrl(url: string | undefined) {
-  const icon = useRef(SupportIcon);
+  const icon = useRef<Support>({
+    SupportIcon: SupportIcon,
+    supportText: "Support",
+  });
 
   if (!url) {
     return icon.current;
   } else if (url.startsWith("https://t.me/")) {
-    icon.current = TelegramIcon;
+    icon.current = {
+      SupportIcon: SupportIcon,
+      supportText: "Telegram",
+    };
+  } else if (url.startsWith("https://discord.gg/") || url.startsWith("https://discord.com/invite/")) {
+    icon.current = {
+      SupportIcon: SupportIcon,
+      supportText: "Discord",
+    };
   } else if (url.startsWith("https://github.com/")) {
-    icon.current = GitHubIcon;
+    icon.current = {
+      SupportIcon: GitHubIcon,
+      supportText: "GitHub",
+    };
+  } else if (url.startsWith("https://gitlab.com/")) {
+    icon.current = {
+      SupportIcon: SupportIcon,
+      supportText: "GitLab",
+    };
+  } else if (url.startsWith("https://forum.xda-developers.com/")) {
+    icon.current = {
+      SupportIcon: SupportIcon,
+      supportText: "XDA Developers",
+    };
   }
+
   return icon.current;
 }
diff --git a/Website/src/typings/global.d.ts b/Website/src/typings/global.d.ts
index e48ca7fe..36310ea2 100644
--- a/Website/src/typings/global.d.ts
+++ b/Website/src/typings/global.d.ts
@@ -199,7 +199,7 @@ declare global {
     mmrlLogo?: string;
     mmrlScreenshots?: string;
     // Developers that points "Gaming" won't have a change to get verified. Magisk isn't made for Gaming purposes.
-    mmrlCaregory?: string;
+    mmrlCategory?: string;
 
     // Fox's Mmm supported properties
     minApi?: string;