small improvements

src/activitys/MainActivity.tsx

@@ -1,34 +1,33 @@
-import { CloseRounded } from "@mui/icons-material";
-import { useState } from "react";
-import { RouterUtil } from "@Util/RouterUtil";
-import { IntentPusher } from "../hooks/useActivity";
+import { Code } from "@Components/dapi/Code";
+import { Pre } from "@Components/dapi/Pre";
+import { ErrorBoundary } from "@Components/ErrorBoundary";
+import Icon from "@Components/Icon";
+import { Page } from "@Components/onsenui/Page";
+import { RouterNavigator } from "@Components/onsenui/RouterNavigator";
+import { Splitter } from "@Components/onsenui/Splitter";
+import { Toolbar } from "@Components/onsenui/Toolbar";
 import { useSettings } from "@Hooks/useSettings";
-import React from "react";
+import { useTheme } from "@Hooks/useTheme";
+import { CloseRounded } from "@mui/icons-material";
+import CodeRoundedIcon from "@mui/icons-material/CodeRounded";
 import { Button, Typography } from "@mui/material";
 import { os } from "@Native/Os";
 import { Shell } from "@Native/Shell";
+import { RouterUtil } from "@Util/RouterUtil";
+import eruda from "eruda";
+import React, { useState } from "react";
+import { IntentPusher } from "../hooks/useActivity";
+import { DrawerFragment } from "./fragments/DrawerFragment";
 import MainApplication from "./MainApplication";
 import NoRootActivity from "./NoRootActivity";
-import { ErrorBoundary } from "@Components/ErrorBoundary";
-import Icon from "@Components/Icon";
 import SettingsActivity from "./SettingsActivity";
-import { Splitter } from "@Components/onsenui/Splitter";
-import { RouterNavigator } from "@Components/onsenui/RouterNavigator";
-import { DrawerFragment } from "./fragments/DrawerFragment";
-import { Toolbar } from "@Components/onsenui/Toolbar";
-import CodeRoundedIcon from "@mui/icons-material/CodeRounded";
-import { Page } from "@Components/onsenui/Page";
-import eruda from "eruda";
-import { useTheme } from "@Hooks/useTheme";
-import { Pre } from "@Components/dapi/Pre";
-import { Code } from "@Components/dapi/Code";
-
-import pkg from "@Package";
-import UnverifiedHostActivity from "./UnverifiedHostActivity";
+import useMediaQuery from "@mui/material/useMediaQuery";
 import { useModFS } from "@Hooks/useModFS";
+import { useStrings } from "@Hooks/useStrings";
 import { SuFile } from "@Native/SuFile";
+import pkg from "@Package";
 import { LogcatActivity } from "./LogcatActivity";
-import { useStrings } from "@Hooks/useStrings";
+import UnverifiedHostActivity from "./UnverifiedHostActivity";
 
 const getLocation = () => {
   if (window.location !== window.parent.location) {
@@ -274,6 +273,8 @@ const MainActivity = (): JSX.Element => {
     );
   };
 
+  const matches = useMediaQuery("(max-width: 767px)");
+
   return (
     <Page
       onInit={() => {
@@ -287,7 +288,7 @@ const MainActivity = (): JSX.Element => {
       <Splitter>
         <Splitter.Side
           side="left"
-          width={250}
+          width={matches ? "calc(100% - 21%)" : "25%"}
           collapse={true}
           swipeable={false}
           isOpen={isSplitterOpen}

src/activitys/ModuleViewActivity/index.tsx

@@ -1,18 +1,19 @@
 import { InstallTerminalV2Activity, TerminalActivityExtra } from "@Activitys/InstallTerminalV2Activity";
+import { AvatarWithProgress } from "@Components/AvatarWithProgress";
+import { DropdownButton } from "@Components/DropdownButton";
 import { VerifiedIcon } from "@Components/icons/VerifiedIcon";
 import { Page } from "@Components/onsenui/Page";
 import { Toolbar } from "@Components/onsenui/Toolbar";
 import { useActivity } from "@Hooks/useActivity";
+import { useDownloadModule } from "@Hooks/useDownloadModule";
+import { useFormatBytes } from "@Hooks/useFormatBytes";
+import { useModuleInfo } from "@Hooks/useModuleInfo";
 import { useOpenModuleSearch } from "@Hooks/useOpenModuleSearch";
 import { useRepos } from "@Hooks/useRepos";
 import { useStrings } from "@Hooks/useStrings";
 import { useTheme } from "@Hooks/useTheme";
-import { os } from "@Native/Os";
-import { Shell } from "@Native/Shell";
-import { view } from "@Native/View";
 import { VolunteerActivism } from "@mui/icons-material";
 import TelegramIcon from "@mui/icons-material/Telegram";
-import Avatar from "@mui/material/Avatar";
 import Box from "@mui/material/Box";
 import CardMedia from "@mui/material/CardMedia";
 import Divider from "@mui/material/Divider";
@@ -22,20 +23,17 @@ import SvgIcon from "@mui/material/SvgIcon";
 import Tab from "@mui/material/Tab";
 import Tabs from "@mui/material/Tabs";
 import Typography from "@mui/material/Typography";
+import { Environment } from "@Native/Environment";
+import { os } from "@Native/Os";
+import { Shell } from "@Native/Shell";
+import { view } from "@Native/View";
 import { useConfirm } from "material-ui-confirm";
 import React from "react";
 import { Disappear } from "react-disappear";
 import { AboutTab } from "./tabs/AboutTabs";
 import { OverviewTab } from "./tabs/OverviewTab";
 import { VersionsTab } from "./tabs/VersionsTab";
-import { DropdownButton } from "@Components/DropdownButton";
-import { useModuleInfo } from "@Hooks/useModuleInfo";
-import { useFormatBytes } from "@Hooks/useFormatBytes";
-import LinearProgress from "@mui/material/LinearProgress";
-import { Download } from "@Native/Download";
-import { Environment } from "@Native/Environment";
-import { useDownloadModule } from "@Hooks/useDownloadModule";
-import { AvatarWithProgress } from "@Components/AvatarWithProgress";
+import { useDocumentTitle } from "usehooks-ts";
 
 function a11yProps(index: number) {
   return {
@@ -72,7 +70,8 @@ const ModuleViewActivity = () => {
   const [moduleFileSize, moduleFileSizeByteText] = useFormatBytes(size);
 
   const search = React.useMemo(() => new URLSearchParams(window.location.search), [window.location.search]);
-  const handleOpenModuleSearch = useOpenModuleSearch(modules);
+
+  useDocumentTitle(`${name} — MMRL`, { preserveTitleOnUnmount: false });
 
   React.useEffect(() => {
     search.set("module", id);

src/activitys/ModuleViewActivity/tabs/VersionsTab.tsx

@@ -1,5 +1,4 @@
 import FetchTextActivity from "@Activitys/FetchTextActivity";
-import InstallTerminalActivity from "@Activitys/InstallTerminalActivity";
 import InstallTerminalV2Activity from "@Activitys/InstallTerminalV2Activity";
 import { useActivity } from "@Hooks/useActivity";
 import { useDownloadModule } from "@Hooks/useDownloadModule";

src/components/module/ExploreModule.tsx

@@ -16,6 +16,7 @@ import { useModuleInfo } from "@Hooks/useModuleInfo";
 import { Verified, Tag, PersonOutline, CalendarMonth, Source } from "@mui/icons-material";
 import { useBlacklist } from "@Hooks/useBlacklist";
 import Box from "@mui/material/Box";
+import { useHover } from "@Hooks/useHover";
 
 interface Props {
   module: Module;
@@ -43,14 +44,21 @@ const ExploreModule = React.memo<Props>((props) => {
       extra: props.module,
     });
   };
+
+  const cardRef = React.useRef(null);
+  const isHover = useHover(cardRef);
+
   return (
     <Card
+      ref={cardRef}
       onClick={handleOpenModule}
       sx={{
+
         ":hover": {
           opacity: ".8",
           cursor: "pointer",
         },
+        transition: "0.1s",
         width: "100%",
       }}
     >

src/components/module/UpdateModule.tsx

@@ -16,7 +16,6 @@ import { useStrings } from "@Hooks/useStrings";
 import { useActivity } from "@Hooks/useActivity";
 import { useRepos } from "@Hooks/useRepos";
 
-import InstallTerminalActivity from "@Activitys/InstallTerminalActivity";
 import FetchTextActivity from "@Activitys/FetchTextActivity";
 
 import { link } from "googlers-tools";

src/hooks/useHover.ts

@@ -0,0 +1,23 @@
+import { useState } from "react";
+
+import type { RefObject } from "react";
+
+import { useEventListener } from "usehooks-ts";
+
+export function useHover<T extends HTMLElement = HTMLElement>(elementRef: RefObject<T>): boolean {
+  const [value, setValue] = useState<boolean>(false);
+
+  const handleEnter = () => {
+    setValue(true);
+  };
+  const handleLeave = () => {
+    setValue(false);
+  };
+
+  useEventListener("touchstart", handleEnter, elementRef);
+  useEventListener("touchend", handleLeave, elementRef);
+  useEventListener("mouseenter", handleEnter, elementRef);
+  useEventListener("mouseleave", handleLeave, elementRef);
+
+  return value;
+}