Some other improvements

Android/app/build.gradle

@@ -5,17 +5,20 @@ import com.google.gson.*;
 apply plugin: 'com.android.application'
 apply plugin: 'com.github.node-gradle.node'
 
+def packageJson = new File('./../Website/package.json')
+def pkg = new JsonSlurper().parseText(packageJson.getText())
 def app_name = "MMRL"
+def cur_time = System.currentTimeMillis()
 
 android {
     compileSdk 33
 
     defaultConfig {
-        applicationId 'com.dergoogler.mmrl'
-        minSdk 26
-        targetSdk 33
-        versionName '1.7.0'
-        versionCode 170
+        applicationId pkg.config.application_id
+        minSdk pkg.config.min_sdk
+        targetSdk pkg.config.target_sdk
+        versionName pkg.config.version_name
+        versionCode pkg.config.version_code
         externalNativeBuild {
             cmake {
                 cppFlags "-llog"
@@ -50,7 +53,6 @@ android {
             minifyEnabled false
             multiDexEnabled false
             applicationIdSuffix '.debug'
-            buildConfigField "String", "BASE_URL", "\"leer\""
         }
     }
     externalNativeBuild {
@@ -70,6 +72,14 @@ android {
             excludes += ['META-INF/DEPENDENCIES.txt', 'META-INF/DEPENDENCIES', 'META-INF/LICENSE', 'META-INF/LICENSE.txt', 'META-INF/MANIFEST.MF', 'META-INF/NOTICE', 'META-INF/NOTICE.txt', 'META-INF/ASL2.0']
         }
     }
+    flavorDimensions 'type'
+    productFlavors {
+        'default' {
+            dimension 'type'
+
+            buildConfigField "long", "BUILD_DATE", "${cur_time}"
+        }
+    }
 }
 
 repositories {

Android/app/src/main/java/com/dergoogler/core/NativeBuildConfig.java

@@ -6,6 +6,11 @@
 import com.dergoogler.mmrl.BuildConfig;
 
 public class NativeBuildConfig {
+    @JavascriptInterface
+    public long BUILD_DATE() {
+        return BuildConfig.BUILD_DATE;
+    }
+
     @JavascriptInterface
     public int VERSION_CODE() {
         return BuildConfig.VERSION_CODE;

Website/package.json

@@ -3,6 +3,8 @@
   "description": "",
   "config": {
     "application_id": "com.dergoogler.mmrl",
+    "min_sdk": 26,
+    "target_Sdk": 33,
     "version_name": "1.7.0",
     "version_code": 170
   },

Website/src/activitys/AboutActivity.tsx

@@ -0,0 +1,144 @@
+import { Page } from "@Components/onsenui/Page";
+import { Toolbar } from "@Components/onsenui/Toolbar";
+import { useActivity } from "@Hooks/useActivity";
+import { useStrings } from "@Hooks/useStrings";
+import { useTheme } from "@Hooks/useTheme";
+
+import Badge from "@mui/material/Badge";
+import List from "@mui/material/List";
+import ListItem from "@mui/material/ListItem";
+import Divider from "@mui/material/Divider";
+import ListItemText from "@mui/material/ListItemText";
+import Avatar from "@mui/material/Avatar";
+import Typography from "@mui/material/Typography";
+import Stack from "@mui/material/Stack";
+import CodeRoundedIcon from "@mui/icons-material/CodeRounded";
+import { useSettings } from "@Hooks/useSettings";
+import { KernelSULogo } from "@Components/icon/KernelSULogo";
+import { Shell } from "@Native/Shell";
+import DeviceUnknownIcon from "@mui/icons-material/DeviceUnknown";
+import { MagiskSULogo } from "@Components/icon/MagiskSULogo";
+import { SxProps } from "@mui/material";
+import React from "react";
+import { BuildConfig } from "@Native/BuildConfig";
+import { useFormatDate } from "@Hooks/useFormatDate";
+
+interface CheckRootProps {
+  sx?: SxProps;
+}
+
+const CheckRoot = (props: CheckRootProps): React.JSX.Element => {
+  if (Shell.isMagiskSU()) {
+    return <MagiskSULogo {...props} />;
+  } else if (Shell.isKernelSU()) {
+    return <KernelSULogo {...props} />;
+  } else {
+    return <DeviceUnknownIcon {...props} />;
+  }
+};
+
+const AboutActivity = () => {
+  const { strings } = useStrings();
+  const { settings, _modConf } = useSettings();
+  const { theme } = useTheme();
+  const { context, extra } = useActivity();
+
+  const renderToolbar = () => {
+    return (
+      <Toolbar modifier="noshadow">
+        <Toolbar.Left>
+          <Toolbar.BackButton onClick={context.popPage} />
+        </Toolbar.Left>
+        <Toolbar.Center>About</Toolbar.Center>
+      </Toolbar>
+    );
+  };
+
+  const date = useFormatDate(String(BuildConfig.BUILD_DATE));
+
+  type ListRender = { primary: string; secondary: string | number };
+
+  const list = React.useMemo<ListRender[]>(
+    () => [
+      { primary: "Name", secondary: BuildConfig.APPLICATION_ID },
+      { primary: "Version", secondary: `v${BuildConfig.VERSION_NAME} (${BuildConfig.VERSION_CODE})` },
+      { primary: "Build date", secondary: date },
+      { primary: "Build type", secondary: BuildConfig.BUILD_TYPE },
+      { primary: "Root manager", secondary: Shell.getRootManager() },
+      { primary: "Root version", secondary: `${Shell.VERSION_NAME().replace(/(.+):(.+)/gim, "$1")} (${Shell.VERSION_CODE()})` },
+    ],
+    []
+  );
+
+  return (
+    <Page renderToolbar={renderToolbar}>
+      <Page.RelativeContent zeroMargin>
+        <Stack direction="column" justifyContent="flex-start" alignItems="center" spacing={1}>
+          <Badge
+            sx={{ mt: 1, height: 100, width: 100 }}
+            overlap="circular"
+            anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
+            badgeContent={
+              <Avatar
+                sx={(theme) => ({
+                  width: 40,
+                  height: 40,
+                  borderRadius: "unset",
+                  bgcolor: "transparent",
+                })}
+              >
+                <CheckRoot
+                  sx={{
+                    width: 40,
+                    height: 40,
+                  }}
+                />
+              </Avatar>
+            }
+          >
+            <Avatar sx={{ height: 100, width: 100, bgcolor: "#4a148c" }}>
+              <CodeRoundedIcon sx={{ color: "white", height: 67, width: 67 }} />
+            </Avatar>
+          </Badge>
+
+          <Typography
+            variant="h3"
+            noWrap
+            color={settings.darkmode ? "text.primary" : undefined}
+            sx={{
+              display: "flex",
+              fontFamily: "monospace",
+              letterSpacing: ".3rem",
+              textDecoration: "none",
+            }}
+          >
+            MMRL
+          </Typography>
+
+          <List sx={{ width: "100%", bgcolor: "background.paper" }}>
+            {list.map((item) => (
+              <ListItem alignItems="flex-start">
+                <ListItemText
+                  primary={
+                    <>
+                      <Stack direction="row" justifyContent="space-between" alignItems="center" spacing={1}>
+                        <Typography sx={{ display: "inline" }} color={settings.darkmode ? "text.primary" : undefined} component="span">
+                          {item.primary}
+                        </Typography>
+                        <Typography sx={{ display: "inline" }} component="span" variant="body2" color="text.primary">
+                          {item.secondary}
+                        </Typography>
+                      </Stack>
+                    </>
+                  }
+                />
+              </ListItem>
+            ))}
+          </List>
+        </Stack>
+      </Page.RelativeContent>
+    </Page>
+  );
+};
+
+export default AboutActivity;

Website/src/activitys/fragments/DrawerFragment.tsx

@@ -7,6 +7,7 @@ import { Divider, List, ListItemButton, ListSubheader } from "@mui/material";
 import { Page } from "react-onsenui";
 import { IntentPusher } from "@Hooks/useActivity";
 import FetchTextActivity from "@Activitys/FetchTextActivity";
+import AboutActivity from "@Activitys/AboutActivity";
 
 type Props = {
   renderToolbar: () => JSX.Element;
@@ -66,6 +67,18 @@ export const DrawerFragment = (props: Props) => {
       <Divider />
 
       <List subheader={<ListSubheader sx={(theme) => ({ bgcolor: theme.palette.background.default })}>Other</ListSubheader>}>
+        <ListItemButton
+          onClick={() => {
+            pushPage({
+              component: AboutActivity,
+              key: "abt",
+              extra: {},
+            });
+            hide();
+          }}
+        >
+          <StyledListItemText primary={"About"} />
+        </ListItemButton>
         <ListItemButton
           onClick={() => {
             pushPage({

Website/src/hooks/useFormatDate.ts

@@ -10,6 +10,9 @@ export const useFormatDate = (date: string) => {
         year: "numeric",
         day: "2-digit",
         month: "long",
+        hour: "2-digit",
+        minute: "2-digit",
+        hour12: true,
       }).format(new Date(Number(date))),
     [date]
   );

Website/src/native/BuildConfig.ts

@@ -10,6 +10,14 @@ class BuildConfigClass extends Native {
     this.interfaceName = "__buildconfig__";
   }
 
+  public get BUILD_DATE(): number {
+    if (this.isAndroid) {
+      return this.getInterface.BUILD_DATE();
+    } else {
+      return WEB_BUILD_DATE;
+    }
+  }
+
   public get VERSION_NAME(): string {
     if (this.isAndroid) {
       return this.getInterface.VERSION_NAME();

Website/src/native/Shell.ts

@@ -111,11 +111,11 @@ class ShellClass extends Native<NativeShell> {
 
   public getRootManager(): string {
     if (this.isMagiskSU()) {
-      return "Mang. by Magisk";
+      return "Magisk";
     } else if (this.isKernelSU()) {
-      return "Mang. by KernelSU";
+      return "KernelSU";
     } else {
-      return "Mang. by Unknown";
+      return "Unknown";
     }
   }
 

Website/src/typings/global.d.ts

@@ -102,6 +102,8 @@ declare global {
     LENGTH_SHORT: "short";
   };
 
+  const WEB_BUILD_DATE: number;
+
   const __webpack__mode__: "production" | "development";
 
   type PushPropsExtra<E = {}> = E & {

Website/webpack.config.ts

@@ -78,6 +78,7 @@ const config: Configuration = {
         LENGTH_LONG: JSON.stringify("long"),
         LENGTH_SHORT: JSON.stringify("short"),
       },
+      WEB_BUILD_DATE: JSON.stringify(Date.now()),
       NODE_ENV: JSON.stringify(process.env.NODE_ENV),
     }),
     new MiniCssExtractPlugin({