terminal improvments

Website/src/activitys/LogcatActivity.tsx

@@ -0,0 +1,128 @@
+import React from "react";
+import { Add, Remove } from "@mui/icons-material";
+import { Stack, Box, Slider } from "@mui/material";
+import FlatList from "flatlist-react";
+import { Toolbar } from "@Components/onsenui/Toolbar";
+import { BottomToolbar } from "@Components/onsenui/BottomToolbar";
+import { Page } from "@Components/onsenui/Page";
+import { BuildConfig } from "@Native/BuildConfig";
+import { useActivity } from "@Hooks/useActivity";
+import { useTheme } from "@Hooks/useTheme";
+import { useNativeStorage } from "@Hooks/useNativeStorage";
+import { useSettings } from "@Hooks/useSettings";
+import { Ansi } from "@Components/Ansi";
+
+const LogcatActivity = () => {
+  const [fontSize, setFontSize] = useNativeStorage("mmrlini_log_terminal", 100);
+  const { context } = useActivity();
+  const { theme } = useTheme();
+  const [lines, setLines] = React.useState<string[]>([]);
+  const { settings } = useSettings();
+
+  const termEndRef = React.useRef<HTMLDivElement>(null);
+
+  if (settings.term_scroll_bottom) {
+    const termBehavior = React.useMemo(() => settings.term_scroll_behavior, [settings]);
+
+    React.useEffect(() => {
+      termEndRef.current?.scrollIntoView({ behavior: termBehavior.value, block: "end", inline: "nearest" });
+    }, [lines]);
+  }
+
+  const addLine = (line: string) => {
+    setLines((lines) => [...lines, line]);
+  };
+
+  const startLog = () => {
+    const envp = {
+      PACKAGENAME: BuildConfig.APPLICATION_ID,
+    };
+
+    Terminal.exec({
+      command: "logcat --pid=`pidof -s $PACKAGENAME` -v color",
+      env: envp,
+      printError: false,
+      onLine: (line) => {
+        addLine(line);
+      },
+      onExit: (code) => {},
+    });
+  };
+
+  return (
+    <Page
+      onShow={startLog}
+      renderToolbar={() => (
+        <Toolbar modifier="noshadow">
+          <Toolbar.Left>
+            <Toolbar.BackButton onClick={context.popPage} />
+          </Toolbar.Left>
+          <Toolbar.Center>Logcat</Toolbar.Center>
+        </Toolbar>
+      )}
+      modifier="noshadow"
+      renderBottomToolbar={() => {
+        return (
+          <BottomToolbar sx={{ background: "none", backgroundColor: theme.palette.background.default }}>
+            <Stack spacing={2} direction="row" sx={{ height: "100%", ml: 1, mr: 1 }} alignItems="center">
+              <Add color="secondary" />
+              <Slider
+                value={fontSize}
+                onChange={(event, newValue) => {
+                  setFontSize(Number(newValue));
+                }}
+                step={10}
+                marks
+                min={20}
+                max={200}
+              />
+              <Remove color="secondary" />
+            </Stack>
+          </BottomToolbar>
+        );
+      }}
+    >
+      <div
+        style={{
+          display: "flex",
+          flexWrap: "wrap",
+        }}
+      >
+        <Stack
+          style={{
+            whiteSpace: "pre",
+            flex: "0 0 100%",
+            color: "white",
+            height: "100%",
+          }}
+          direction="column"
+          justifyContent="flex-start"
+          alignItems="stretch"
+          spacing={0}
+        >
+          <FlatList
+            list={lines}
+            renderItem={(line, key) => (
+              <Box
+                key={key}
+                component={Ansi}
+                sx={{
+                  fontSize: fontSize ? `${fontSize}%` : "none",
+                  ml: 1,
+                  mr: 1,
+                }}
+              >
+                {line}
+              </Box>
+            )}
+            renderOnScroll
+            renderWhenEmpty={() => <></>}
+          />
+        </Stack>
+      </div>
+      <div ref={termEndRef} />
+    </Page>
+  );
+};
+
+export { LogcatActivity };

Website/src/activitys/MainActivity.tsx

@@ -27,6 +27,7 @@ import pkg from "@Package";
 import UnverifiedHostActivity from "./UnverifiedHostActivity";
 import { useModFS } from "@Hooks/useModFS";
 import { SuFile } from "@Native/SuFile";
+import { LogcatActivity } from "./LogcatActivity";
 
 const CheckRoot = () => {
   if (pkg.config.verified_hosts.includes(location.hostname)) {
@@ -213,7 +214,14 @@ const MainActivity = (): JSX.Element => {
     const handleOpenSettings = () => {
       pushPage({
         component: SettingsActivity,
-        key: "settings",
+        key: "SettingsActivity",
+      });
+    };
+
+    const handleOpenLogcat = () => {
+      pushPage({
+        component: LogcatActivity,
+        key: "LogcatActivity",
       });
     };
 
@@ -236,9 +244,14 @@ const MainActivity = (): JSX.Element => {
           <Button fullWidth variant="contained" disableElevation onClick={resetErrorBoundary}>
             Try again
           </Button>
-          <Button style={{ marginTop: 16 }} fullWidth variant="contained" disableElevation onClick={handleOpenSettings}>
+          <Button sx={{ mt: 2 }} fullWidth variant="contained" disableElevation onClick={handleOpenSettings}>
             Open settings
           </Button>
+          {os.isAndroid && (
+            <Button sx={{ mt: 2 }} fullWidth variant="contained" disableElevation onClick={handleOpenLogcat}>
+              Open Logcat
+            </Button>
+          )}
 
           <Pre sx={style}>
             <Code>{errorInfo.componentStack}</Code>

Website/src/activitys/SettingsActivity.tsx

@@ -219,9 +219,7 @@ function SettingsActivity() {
 
         <Divider />
 
-        <List
-          subheader={<ListSubheader sx={(theme) => ({ bgcolor: theme.palette.background.default })}>{strings("storage")}</ListSubheader>}
-        >
+        <List subheader={<ListSubheader>{strings("storage")}</ListSubheader>}>
           <ListItemButton
             onClick={() => {
               setRepos([]);
@@ -240,6 +238,22 @@ function SettingsActivity() {
 
         <Divider />
 
+        {BuildConfig.DEBUG && (
+          <>
+            <List subheader={<ListSubheader>Debug</ListSubheader>}>
+              <ListItemButton
+                onClick={() => {
+                  throw new Error("Test error thrown!");
+                }}
+              >
+                <ListItemText primary="Throw error" />
+              </ListItemButton>
+            </List>
+
+            <Divider />
+          </>
+        )}
+
         <ListItem>
           <ListItemText
             primary={

Website/src/activitys/TerminalActivity.tsx

@@ -3,6 +3,7 @@ import { Toolbar } from "@Components/onsenui/Toolbar";
 import { useActivity } from "@Hooks/useActivity";
 import { Button, styled } from "@mui/material";
 import Stack from "@mui/material/Stack";
+import Box from "@mui/material/Box";
 import { Ansi } from "@Components/Ansi";
 import RestartAltIcon from "@mui/icons-material/RestartAlt";
 import React from "react";
@@ -307,6 +308,10 @@ const TerminalActivity = () => {
           e.callParentHandler();
         }
       }}
+      sx={{
+        // removing bottom window insets
+        pb: "0px !important",
+      }}
       onShow={install}
       modifier="noshadow"
       renderToolbar={renderToolbar}
@@ -335,7 +340,7 @@ const TerminalActivity = () => {
           ))}
         </Stack>
       </div>
-      <div ref={termEndRef} />
+      <Box sx={{ height: view.getWindowBottomInsets() }} ref={termEndRef} />
     </Page>
   );
 };

Website/src/components/module/DeviceModule.tsx

@@ -8,7 +8,7 @@ import Button from "@mui/material/Button";
 
 import { ModConfActivity } from "@Activitys/ModConfActivity";
 
-import { Delete, Settings, RefreshRounded } from "@mui/icons-material";
+import { Delete, Settings, RefreshRounded, Loop } from "@mui/icons-material";
 
 import { useTheme } from "@Hooks/useTheme";
 import { useSettings } from "@Hooks/useSettings";
@@ -44,6 +44,7 @@ const DeviceModule = React.memo<Props>((props) => {
 
   const remove = new SuFile(format("REMOVE"));
   const disable = new SuFile(format("DISABLE"));
+  const has_update = SuFile.exist(format("UPDATE"));
 
   const [isEnabled, setIsEnabled] = React.useState(!disable.exist());
   const [isSwitchDisabled, setIsSwitchDisabled] = React.useState(remove.exist());
@@ -59,8 +60,8 @@ const DeviceModule = React.memo<Props>((props) => {
   const module_config_file = SuFile.exist(format("CONFINDEX"));
 
   return (
-    <Card sx={{ p: 2, width: "100%" }}>
-      <Stack direction="column" justifyContent="center" spacing={1}>
+    <Card sx={{ position: "relative", p: 2, width: "100%" }}>
+      <Stack sx={{ position: "relative", zIndex: 1 }} direction="column" justifyContent="center" spacing={1}>
         {cover && (
           <Image
             sx={(theme) => ({
@@ -113,7 +114,7 @@ const DeviceModule = React.memo<Props>((props) => {
             <Typography variant="caption" display="block">
               <Switch
                 checked={isEnabled}
-                disabled={isSwitchDisabled}
+                disabled={isSwitchDisabled || has_update}
                 onChange={(e) => {
                   const checked = e.target.checked;
 
@@ -228,6 +229,20 @@ const DeviceModule = React.memo<Props>((props) => {
           </Stack>
         </Stack>
       </Stack>
+      {has_update && (
+        <Loop
+          sx={{
+            position: "absolute",
+            left: "50%",
+            top: "50%",
+            fill: theme.palette.background.default,
+            color: theme.palette.background.default,
+            WebkitTransform: "translate(-50%, -50%)",
+            transform: "translate(-50%, -50%)",
+            fontSize: "50cqmin",
+          }}
+        />
+      )}
     </Card>
   );
 });

Website/src/components/onsenui/Page.tsx

@@ -24,10 +24,10 @@ interface HTMLPage {
   renderToolbar?: RenderFunction;
   renderBottomToolbar?: RenderFunction;
   renderFixed?: RenderFunction;
-  onInit?: Function;
-  onShow?: Function;
-  onHide?: Function;
-  onInfiniteScroll?: Function;
+  onInit?: void | Function;
+  onShow?: void | Function;
+  onHide?: void | Function;
+  onInfiniteScroll?: () => void;
   onDeviceBackButton?: (event: DeviceBackButtonEvent) => void;
   children?: React.ReactNode;
   statusbarColor?: string;