update explore cards

DerGoogler · Aug 26, 2024 · d00e0d6 · d00e0d6
1 parent cbc93ce
commit d00e0d6
Show file tree

Hide file tree

Showing 6 changed files with 326 additions and 75 deletions.
diff --git a/src/activitys/ModuleViewActivity/tabs/AboutTabs.tsx b/src/activitys/ModuleViewActivity/tabs/AboutTabs.tsx
@@ -14,61 +14,86 @@ import { useActivity } from "@Hooks/useActivity";
 import { useTheme } from "@Hooks/useTheme";
 import { os } from "@Native/Os";
 import { useModuleInfo } from "@Hooks/useModuleInfo";
+import Collapse from "@mui/material/Collapse";
+import React from "react";
+import { ExpandLess, ExpandMore } from "@mui/icons-material";
+import { Avatar, AvatarGroup, Badge, Box, Divider, ListSubheader, Stack, Typography } from "@mui/material";
+import { Pre } from "@Components/dapi/Pre";
+
+const preSx = { display: "inline" };
 
 const AboutTab = () => {
   const { strings } = useStrings();
   const { context, extra } = useActivity<Module>();
   const { theme } = useTheme();
 
-  const { track } = extra;
+  const { track, features } = extra;
   const { license, verified, support } = useModuleInfo(extra);
 
   return (
-    <List>
-      {verified && (
-        <ListItem>
-          <ListItemIcon>
-            <VerifiedIcon />
-          </ListItemIcon>
-          <ListItemText primary={strings("verified_module")} secondary={strings("verified_module_desc")} />
-        </ListItem>
-      )}
+    <>
+      <List>
+        {verified && (
+          <ListItem>
+            <ListItemIcon>
+              <VerifiedIcon />
+            </ListItemIcon>
+            <ListItemText primary={strings("verified_module")} secondary={strings("verified_module_desc")} />
+          </ListItem>
+        )}
 
-      {license && (
-        <ListItemButton
-          onClick={() => {
-            fetch(`https://raw.githubusercontent.com/spdx/license-list-data/main/website/${license}.json`)
-              .then((res) => {
-                if (res.status === 200) {
-                  return res.json();
-                } else {
-                  throw new Error("Fetching license failed");
-                }
-              })
-              .then((json: LicenseSPX) => {
-                context.pushPage({
-                  component: FetchTextActivity,
-                  key: "license_" + license,
-                  extra: {
-                    raw_data: json.licenseText,
-                    modulename: json.name,
-                  },
-                });
-              })
-              .catch((err) => {});
-          }}
-        >
-          <ListItemIcon>
-            <FormatAlignLeftIcon />
-          </ListItemIcon>
-          <ListItemText primary={strings("license")} secondary={license} />
-        </ListItemButton>
-      )}
+        {license && (
+          <ListItemButton
+            onClick={() => {
+              fetch(`https://raw.githubusercontent.com/spdx/license-list-data/main/website/${license}.json`)
+                .then((res) => {
+                  if (res.status === 200) {
+                    return res.json();
+                  } else {
+                    throw new Error("Fetching license failed");
+                  }
+                })
+                .then((json: LicenseSPX) => {
+                  context.pushPage({
+                    component: FetchTextActivity,
+                    key: "license_" + license,
+                    extra: {
+                      raw_data: json.licenseText,
+                      modulename: json.name,
+                    },
+                  });
+                })
+                .catch((err) => {});
+            }}
+          >
+            <ListItemIcon>
+              <FormatAlignLeftIcon />
+            </ListItemIcon>
+            <ListItemText primary={strings("license")} secondary={license} />
+          </ListItemButton>
+        )}
+
+        {support && (
+          <ListItemButton
+            onClick={() => {
+              os.open(support, {
+                target: "_blank",
+                features: {
+                  color: theme.palette.primary.main,
+                },
+              });
+            }}
+          >
+            <ListItemIcon>
+              <BugReportIcon />
+            </ListItemIcon>
+            <ListItemText primary="Issues" secondary={support} />
+          </ListItemButton>
+        )}
 
-      {support && (
         <ListItemButton
           onClick={() => {
-            os.open(support, {
+            os.open(track.source, {
               target: "_blank",
               features: {
                 color: theme.palette.primary.main,
@@ -77,29 +102,125 @@ const AboutTab = () => {
           }}
         >
           <ListItemIcon>
-            <BugReportIcon />
+            <GitHubIcon />
           </ListItemIcon>
-          <ListItemText primary="Issues" secondary={support} />
+          <ListItemText primary={strings("source")} secondary={track.source} />
         </ListItemButton>
-      )}
+      </List>
+
+      {Object.keys(features).length !== 0 && (
+        <>
+          <Divider />
 
-      <ListItemButton
-        onClick={() => {
-          os.open(track.source, {
-            target: "_blank",
-            features: {
-              color: theme.palette.primary.main,
-            },
-          });
-        }}
-      >
-        <ListItemIcon>
-          <GitHubIcon />
-        </ListItemIcon>
-        <ListItemText primary={strings("source")} secondary={track.source} />
-      </ListItemButton>
-    </List>
+          <List subheader={<ListSubheader>{strings("features")}</ListSubheader>}>
+            <FeatureItem
+              feat={features?.service}
+              title="Late Service"
+              desc={
+                <>
+                  This module contains the file <Pre sx={preSx}>service.sh</Pre>. This file will be executed in late_start service.
+                </>
+              }
+            />
+            <FeatureItem
+              feat={features?.post_fs_data}
+              title="Post service"
+              desc={
+                <>
+                  This module contains the file <Pre sx={preSx}>post-fs-data.sh</Pre>. This file will be executed in post-fs-data.
+                </>
+              }
+            />
+            <FeatureItem
+              feat={features?.resetprop}
+              title="System properties"
+              desc={
+                <>
+                  This module will manipulate system properties with <Pre sx={preSx}>resetprop</Pre>
+                </>
+              }
+            />
+            <FeatureItem feat={features?.sepolicy} title="SELinux Policy" desc="This module has additional custom sepolicy rules" />
+            <FeatureItem feat={features?.zygisk} title="Zygisk module" desc="This module requires Zygisk to be enabled." />
+
+            <FeatureItem
+              feat={features?.webroot}
+              title="WebUI"
+              desc="This module contains WebUI files that can be used with the KernelSU Manager."
+              icons={["assets/KernelSULogo.png"]}
+            />
+            <FeatureItem
+              feat={features?.post_mount}
+              title="Post mount"
+              desc={
+                <>
+                  This module contains the file <Pre sx={preSx}>post-mount.sh</Pre>. This file will be executed in post-mount.
+                </>
+              }
+              icons={["assets/KernelSULogo.png", "assets/APatchSULogo.png"]}
+            />
+            <FeatureItem
+              feat={features?.boot_completed}
+              title="Boot completed script"
+              desc={
+                <>
+                  This module contains the file <Pre sx={preSx}>boot-completed.sh</Pre>. This file will be executed when the boot is
+                  completed.
+                </>
+              }
+              icons={["assets/KernelSULogo.png", "assets/APatchSULogo.png"]}
+            />
+
+            <FeatureItem feat={features?.modconf} title="ModConf" desc="This module contains ModConf files that can be used with MMRL." />
+            <FeatureItem
+              feat={features?.apks}
+              title="Contains APKs"
+              desc="This module may contains APKs that sometimes do not have publicly available source code."
+            />
+          </List>
+        </>
+      )}
+    </>
   );
 };
 
+interface FeatureItemProps {
+  feat: boolean | undefined;
+  title: React.ReactNode;
+  icons?: string[];
+  desc: React.ReactNode;
+}
+
+const FeatureItem = React.memo<FeatureItemProps>(({ feat, title, desc, icons }) => {
+  if (feat) {
+    return (
+      <ListItem>
+        <ListItemText
+          primary={
+            <Stack direction="column" justifyContent="center" alignItems="flex-start" spacing={0}>
+              <Typography sx={{ fontSize: "unset" }}>
+                <Box sx={{ display: "flex", alignItems: "center", justifyItems: "center", whiteSpace: "normal" }}>
+                  {icons && Array.isArray(icons) ? (
+                    <>
+                      <AvatarGroup sx={{ mr: 1 }}>
+                        {icons.map((icon) => (
+                          <Avatar sx={{ borderRadius: "unset", width: "1rem", height: "1rem" }} src={icon} />
+                        ))}
+                      </AvatarGroup>
+                    </>
+                  ) : (
+                    icons && <Avatar sx={{ borderRadius: "unset", mr: 1, width: "1rem", height: "1rem" }} src={icons} />
+                  )}
+                  {title}
+                </Box>
+              </Typography>
+            </Stack>
+          }
+          secondary={desc}
+        />
+      </ListItem>
+    );
+  }
+});
+
 export { AboutTab };
diff --git a/src/activitys/fragments/ModuleFragment.tsx b/src/activitys/fragments/ModuleFragment.tsx
@@ -72,8 +72,8 @@ const ModuleFragment = React.memo<ModuleFragmentProps>((props) => {
         <SearchBar
           placeholder={strings("search_modules") as string}
           onSearch={(value) => {
-            setSearch(value)
-            console.log(value)
+            setSearch(value);
+            console.log(value);
           }}
           filterIcon={findCurrentFilter?.icon}
           onFilterIconClick={handleClick}

diff --git a/src/components/AntifeaturesButton.tsx b/src/components/AntifeaturesButton.tsx
@@ -1,4 +1,4 @@
-import { Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, List, SxProps } from "@mui/material";
+import { Chip, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, List, SxProps } from "@mui/material";
 import Button from "@mui/material/Button";
 import WarningAmberIcon from "@mui/icons-material/WarningAmber";
 import React from "react";
@@ -8,6 +8,7 @@ import { GestureDetector } from "./onsenui/GestureDetector";
 
 type Props = {
   sx?: SxProps;
+  useChip?: boolean;
   antifeatures?: Track["antifeatures"];
 };
 
@@ -16,22 +17,35 @@ export const AntifeatureButton = (props: Props) => {
 
   const { strings } = useStrings();
 
-  const handleClickOpen = (e: any) => {
+  const handleClickOpen = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
     e.preventDefault();
+    e.stopPropagation();
     setOpen(true);
   };
 
-  const handleClose = () => {
+  const handleClose = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+    e.preventDefault();
+    e.stopPropagation();
     setOpen(false);
   };
 
   return (
     <>
-      <GestureDetector onHold={handleClickOpen}>
-        <Button sx={props.sx} variant="contained" color="error" size="small">
+      {props.useChip ? (
+        <Chip
+          size="small"
+          onClick={handleClickOpen}
+          sx={props.sx}
+          color="error"
+          icon={<WarningAmberIcon sx={{ fontSize: "large" }} />}
+          label={strings("antifeatures")}
+        />
+      ) : (
+        // @ts-ignore
+        <Button onClick={handleClickOpen} sx={props.sx} variant="contained" color="error" size="small">
           <WarningAmberIcon />
         </Button>
-      </GestureDetector>
+      )}
       <Dialog open={open} onClose={handleClose} scroll="paper">
         <DialogTitle>{strings("antifeatures")}</DialogTitle>
         <DialogContent dividers>