Readd eruda console

Author: DerGoogler

Website/src/activitys/MainActivity.tsx

@@ -19,6 +19,7 @@ import { RouterNavigator } from "@Components/onsenui/RouterNavigator";
 import { DrawerFragment } from "./fragments/DrawerFragment";
 import { Toolbar } from "@Components/onsenui/Toolbar";
 import { Page } from "@Components/onsenui/Page";
+import eruda from "eruda";
 
 const MainActivity = (): JSX.Element => {
   const { settings } = useSettings();
@@ -33,6 +34,16 @@ const MainActivity = (): JSX.Element => {
     setIsSplitterOpen(true);
   };
 
+  React.useEffect(() => {
+    if (settings.eruda_console_enabled) {
+      eruda.init();
+    } else {
+      if ((window as any).eruda) {
+        eruda.destroy();
+      }
+    }
+  }, [settings.eruda_console_enabled]);
+
   React.useEffect(() => {
     if (!os.hasStoragePermission()) {
       os.requestStoargePermission();

Website/src/activitys/SettingsActivity.tsx

@@ -1,4 +1,4 @@
-import { Divider, List, ListItem, ListItemButton, ListItemIcon, ListSubheader, Switch } from "@mui/material";
+import { Divider, List, ListItem, ListItemButton, ListSubheader } from "@mui/material";
 import { BuildConfig } from "@Native/BuildConfig";
 import { Toolbar } from "@Components/onsenui/Toolbar";
 import ArrowBackIcon from "@mui/icons-material/ArrowBack";
@@ -84,19 +84,19 @@ function SettingsActivity() {
         <List
           subheader={<ListSubheader sx={(theme) => ({ bgcolor: theme.palette.background.default })}>{strings.development}</ListSubheader>}
         >
-          {/* <ListItem>
-          <StyledListItemText id="switch-list-label-eruda" primary={"Eruda console"} secondary={"Useful for development and bugs"} />
-          <Android12Switch
-            edge="end"
-            onChange={(e: any) => {
-              setSettings("eruda_console_enabled", e.target.checked);
-            }}
-            checked={settings.eruda_console_enabled}
-            inputProps={{
-              "aria-labelledby": "switch-list-label-eruda",
-            }}
-          />
-        </ListItem> */}
+          <ListItem>
+            <StyledListItemText id="switch-list-label-eruda" primary={"Eruda console"} secondary={"Useful for development and bugs"} />
+            <Android12Switch
+              edge="end"
+              onChange={(e: any) => {
+                setSettings("eruda_console_enabled", e.target.checked);
+              }}
+              checked={settings.eruda_console_enabled}
+              inputProps={{
+                "aria-labelledby": "switch-list-label-eruda",
+              }}
+            />
+          </ListItem>
           <ListItemButton
             onClick={() => {
               os.open("https://github.com/DerGoogler/MMRL/issues", {

Website/src/hooks/useSettings.tsx

@@ -4,6 +4,7 @@ import { defaultComposer } from "default-composer";
 import { useNativeStorage } from "./useNativeStorage";
 import { languages_map } from "../locales/languages";
 import { os } from "@Native/Os";
+import { SetStateAction } from "./useStateCallback";
 
 export const accent_colors: Picker<string, any>[] = [
   {
@@ -154,9 +155,22 @@ export const INITIAL_SETTINGS: StorageDeclaration = {
   test: [],
 };
 
-export const SettingsContext = createContext<any>({
+export interface Context {
+  settings: StorageDeclaration;
+  setSettings<K extends keyof StorageDeclaration>(
+    key: K,
+    state: SetStateAction<StorageDeclaration[K]>,
+    callback?: (state: StorageDeclaration[K]) => void
+  ): void;
+}
+
+export const SettingsContext = createContext<Context>({
   settings: INITIAL_SETTINGS,
-  setSettings(key: any, state: any, callback?: (state: any) => void) {},
+  setSettings<K extends keyof StorageDeclaration>(
+    key: K,
+    state: SetStateAction<StorageDeclaration[K]>,
+    callback?: (state: StorageDeclaration[K]) => void
+  ) {},
 });
 
 export const useSettings = () => {
@@ -177,7 +191,7 @@ export const SettingsProvider = (props: React.PropsWithChildren) => {
               return {
                 ...prev,
                 [name]: state,
-              }; 
+              };
             },
             (state) => callback && callback(state[name])
           );