chore: migrate to mui v6 (#1511)

* chore: prepare for mui v6 * refactor: migrate to grid v2 * refactor: fix theme * fix: styles * fix: build * fix: lint * fix: fmt
libnyanpasu · Sep 15, 2024 · 582bef0 · 582bef0
1 parent 694a854
commit 582bef0
Show file tree

Hide file tree

Showing 37 changed files with 853 additions and 687 deletions.
diff --git a/frontend/interface/package.json b/frontend/interface/package.json
@@ -14,7 +14,7 @@
     "@tauri-apps/api": "2.0.0-rc.4",
     "ahooks": "3.8.1",
     "ofetch": "1.3.4",
-    "react": "18.3.1",
+    "react": "rc",
     "swr": "2.2.5"
   },
   "devDependencies": {

diff --git a/frontend/nyanpasu/auto-imports.d.ts b/frontend/nyanpasu/auto-imports.d.ts
@@ -3,6 +3,7 @@
 // @ts-nocheck
 // noinspection JSUnusedGlobalSymbols
 // Generated by unplugin-auto-import
+// biome-ignore lint: disable
 export {}
 declare global {
   const IconMdiTextBoxCheckOutline: typeof import('~icons/mdi/text-box-check-outline.jsx')['default']

diff --git a/frontend/nyanpasu/package.json b/frontend/nyanpasu/package.json
@@ -16,10 +16,9 @@
     "@generouted/react-router": "1.19.6",
     "@juggle/resize-observer": "3.4.0",
     "@material/material-color-utilities": "0.3.0",
-    "@monaco-editor/react": "4.6.0",
-    "@mui/icons-material": "5.16.7",
-    "@mui/lab": "5.0.0-alpha.173",
-    "@mui/material": "5.16.7",
+    "@mui/icons-material": "6.0.2",
+    "@mui/lab": "6.0.0-beta.9",
+    "@mui/material": "6.0.2",
     "@nyanpasu/interface": "workspace:^",
     "@nyanpasu/ui": "workspace:^",
     "@tauri-apps/api": "2.0.0-rc.4",
@@ -32,11 +31,11 @@
     "i18next": "23.15.1",
     "jotai": "2.9.3",
     "json-schema": "0.4.0",
-    "material-react-table": "2.13.3",
+    "material-react-table": "3.0.1",
     "monaco-editor": "0.51.0",
     "mui-color-input": "4.0.0",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
+    "react": "rc",
+    "react-dom": "rc",
     "react-error-boundary": "4.0.13",
     "react-fast-marquee": "1.6.5",
     "react-hook-form-mui": "7.2.0",
@@ -53,6 +52,7 @@
     "@emotion/babel-plugin": "11.12.0",
     "@emotion/react": "11.13.3",
     "@iconify/json": "2.2.248",
+    "@monaco-editor/react": "^4.6.0",
     "@tauri-apps/plugin-clipboard-manager": "2.0.0-rc.2",
     "@tauri-apps/plugin-dialog": "2.0.0-rc.1",
     "@tauri-apps/plugin-fs": "2.0.0-rc.2",

diff --git a/frontend/nyanpasu/src/components/app/app-container.tsx b/frontend/nyanpasu/src/components/app/app-container.tsx
@@ -42,12 +42,12 @@ export const AppContainer = ({
         e.preventDefault();
       }}
     >
-      {isDrawer && <AppDrawer data-windrag />}
+      {isDrawer && <AppDrawer data-tauri-drag-region />}
 
       <Allotment separator proportionalLayout={false}>
         {!isDrawer && (
           <Allotment.Pane className="h-full" minSize={96} maxSize={260}>
-            <DrawerContent data-windrag />
+            <DrawerContent data-tauri-drag-region />
           </Allotment.Pane>
         )}
 
@@ -65,7 +65,7 @@ export const AppContainer = ({
 
           <div
             className={OS === "macos" ? "h-[2.75rem]" : "h-9"}
-            data-windrag
+            data-tauri-drag-region
           />
 
           {children}

diff --git a/frontend/nyanpasu/src/components/app/app-drawer.tsx b/frontend/nyanpasu/src/components/app/app-drawer.tsx
@@ -28,7 +28,7 @@ export const AppDrawer = () => {
           "fixed z-10 flex items-center gap-2",
           OS === "macos" ? "left-24 top-3" : "left-4 top-1.5",
         )}
-        data-windrag
+        data-tauri-drag-region
       >
         <IconButton
           className="!size-8 !min-w-0"
@@ -41,11 +41,11 @@ export const AppDrawer = () => {
           <MenuOpen />
         </IconButton>
 
-        <div className="size-5" data-windrag>
-          <AnimatedLogo className="h-full w-full" data-windrag />
+        <div className="size-5" data-tauri-drag-region>
+          <AnimatedLogo className="h-full w-full" data-tauri-drag-region />
         </div>
 
-        <div className="text-lg" data-windrag>
+        <div className="text-lg" data-tauri-drag-region>
           Clash Nyanpasu
         </div>
       </div>
@@ -55,15 +55,17 @@ export const AppDrawer = () => {
   return (
     <>
       <DrawerTitle />
-
       <Backdrop
         className={cn("z-20", OS !== "linux" && "backdrop-blur-xl")}
-        sx={{
-          backgroundColor:
-            OS === "linux"
-              ? undefined
-              : alpha(palette.primary[palette.mode], 0.1),
-        }}
+        sx={[
+          OS === "linux"
+            ? {
+                backgroundColor: null,
+              }
+            : {
+                backgroundColor: alpha(palette.primary[palette.mode], 0.1),
+              },
+        ]}
         open={open}
         onClick={() => setOpen(false)}
       >

diff --git a/frontend/nyanpasu/src/components/app/drawer-content.tsx b/frontend/nyanpasu/src/components/app/drawer-content.tsx
@@ -69,17 +69,17 @@ export const DrawerContent = ({
         },
         style,
       )}
-      data-windrag
+      data-tauri-drag-region
     >
       <div className="mx-2 flex items-center justify-center gap-4">
-        <div className="h-full max-h-28 max-w-28" data-windrag>
-          <AnimatedLogo className="h-full w-full" data-windrag />
+        <div className="h-full max-h-28 max-w-28" data-tauri-drag-region>
+          <AnimatedLogo className="h-full w-full" data-tauri-drag-region />
         </div>
 
         {!onlyIcon && (
           <div
             className="mr-1 mt-1 whitespace-pre-wrap text-lg font-bold"
-            data-windrag
+            data-tauri-drag-region
           >
             {"Clash\nNyanpasu"}
           </div>

diff --git a/frontend/nyanpasu/src/components/app/modules/route-list-item.tsx b/frontend/nyanpasu/src/components/app/modules/route-list-item.tsx
@@ -33,15 +33,26 @@ export const RouteListItem = ({
       className={cn(
         onlyIcon ? "!mx-auto !size-16 !rounded-3xl" : "!rounded-full !pr-14",
       )}
-      sx={{
-        backgroundColor: match
-          ? alpha(palette.primary.main, 0.3)
-          : alpha(palette.background.paper, 0.15),
-
-        "&:hover": {
-          backgroundColor: match ? alpha(palette.primary.main, 0.5) : undefined,
-        },
-      }}
+      sx={[
+        match
+          ? {
+              backgroundColor: alpha(palette.primary.main, 0.3),
+            }
+          : {
+              backgroundColor: alpha(palette.background.paper, 0.15),
+            },
+        match
+          ? {
+              "&:hover": {
+                backgroundColor: alpha(palette.primary.main, 0.5),
+              },
+            }
+          : {
+              "&:hover": {
+                backgroundColor: null,
+              },
+            },
+      ]}
       onClick={() => navigate(path)}
     >
       <ListItemIcon>
@@ -52,7 +63,6 @@ export const RouteListItem = ({
           className: onlyIcon ? "!size-8" : undefined,
         })}
       </ListItemIcon>
-
       {!onlyIcon && (
         <div
           className={cn(

diff --git a/frontend/nyanpasu/src/components/dashboard/data-panel.tsx b/frontend/nyanpasu/src/components/dashboard/data-panel.tsx
@@ -1,6 +1,6 @@
 import { useInterval } from "ahooks";
 import { useAtomValue } from "jotai";
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import Dataline, { DatalineProps } from "@/components/dashboard/dataline";
 import { atomIsDrawer } from "@/store";
@@ -10,7 +10,7 @@ import {
   MemoryOutlined,
   SettingsEthernet,
 } from "@mui/icons-material";
-import Grid from "@mui/material/Unstable_Grid2";
+import Grid from "@mui/material/Grid2";
 import {
   Connection,
   Memory,
@@ -119,16 +119,19 @@ export const DataPanel = () => {
 
   const isDrawer = useAtomValue(atomIsDrawer);
 
-  const gridLayout = {
-    sm: isDrawer ? 6 : 12,
-    md: 6,
-    lg: supportMemory ? 3 : 4,
-    xl: supportMemory ? 3 : 4,
-  };
+  const gridLayout = useMemo(
+    () => ({
+      sm: isDrawer ? 6 : 12,
+      md: 6,
+      lg: supportMemory ? 3 : 4,
+      xl: supportMemory ? 3 : 4,
+    }),
+    [isDrawer, supportMemory],
+  );
 
   return Datalines.map((props, index) => {
     return (
-      <Grid key={`data-${index}`} {...gridLayout} className="w-full">
+      <Grid key={`data-${index}`} size={gridLayout}>
         <Dataline {...props} className="max-h-1/8 min-h-40" />
       </Grid>
     );

diff --git a/frontend/nyanpasu/src/components/dashboard/modules/ipasn-panel.tsx b/frontend/nyanpasu/src/components/dashboard/modules/ipasn-panel.tsx
@@ -5,7 +5,7 @@ import { atomIsDrawer } from "@/store";
 import { Visibility, VisibilityOff } from "@mui/icons-material";
 import { LoadingButton } from "@mui/lab";
 import { CircularProgress, IconButton, Paper, Tooltip } from "@mui/material";
-import Grid from "@mui/material/Unstable_Grid2";
+import Grid from "@mui/material/Grid2";
 import { useIPSB } from "@nyanpasu/interface";
 import { cn } from "@nyanpasu/ui";
 
@@ -37,7 +37,14 @@ export const IPASNPanel = ({ refreshCount }: { refreshCount: number }) => {
   const isDrawer = useAtomValue(atomIsDrawer);
 
   return (
-    <Grid sm={isDrawer ? 7 : 12} md={8} lg={5} xl={3}>
+    <Grid
+      size={{
+        sm: isDrawer ? 7 : 12,
+        md: 8,
+        lg: 5,
+        xl: 3,
+      }}
+    >
       <Paper className="relative flex !h-full select-text gap-4 !rounded-3xl px-4 py-3">
         {data ? (
           <>

diff --git a/frontend/nyanpasu/src/components/dashboard/modules/timing-panel.tsx b/frontend/nyanpasu/src/components/dashboard/modules/timing-panel.tsx
@@ -2,7 +2,7 @@ import { useAtomValue } from "jotai";
 import { useColorForDelay } from "@/hooks/theme";
 import { atomIsDrawer } from "@/store";
 import { Paper } from "@mui/material";
-import Grid from "@mui/material/Unstable_Grid2";
+import Grid from "@mui/material/Grid2";
 
 function LatencyTag({ name, value }: { name: string; value: number }) {
   const color = useColorForDelay(value);
@@ -22,7 +22,14 @@ export const TimingPanel = ({ data }: { data: { [key: string]: number } }) => {
   const isDrawer = useAtomValue(atomIsDrawer);
 
   return (
-    <Grid sm={isDrawer ? 5 : 12} md={4} lg={3} xl={3}>
+    <Grid
+      size={{
+        sm: isDrawer ? 5 : 12,
+        md: 4,
+        lg: 3,
+        xl: 3,
+      }}
+    >
       <Paper className="!h-full !rounded-3xl p-4">
         <div className="flex h-full flex-col justify-between">
           {Object.entries(data).map(([name, value]) => (

diff --git a/frontend/nyanpasu/src/components/dashboard/proxy-shortcuts.tsx b/frontend/nyanpasu/src/components/dashboard/proxy-shortcuts.tsx
@@ -6,7 +6,7 @@ import { atomIsDrawer } from "@/store";
 import { message } from "@/utils/notification";
 import { NetworkPing, SettingsEthernet } from "@mui/icons-material";
 import { Chip, Paper, type ChipProps } from "@mui/material";
-import Grid from "@mui/material/Unstable_Grid2";
+import Grid from "@mui/material/Grid2";
 import { useClash, useNyanpasu } from "@nyanpasu/interface";
 import { PaperSwitchButton } from "../setting/modules/system-proxy";
 
@@ -89,7 +89,14 @@ export const ProxyShortcuts = () => {
   );
 
   return (
-    <Grid sm={isDrawer ? 6 : 12} md={6} lg={4} xl={3}>
+    <Grid
+      size={{
+        sm: isDrawer ? 6 : 12,
+        md: 6,
+        lg: 4,
+        xl: 3,
+      }}
+    >
       <Paper className="flex !h-full flex-col justify-between gap-2 !rounded-3xl p-3">
         <TitleComp />
 

diff --git a/frontend/nyanpasu/src/components/dashboard/service-shortcuts.tsx b/frontend/nyanpasu/src/components/dashboard/service-shortcuts.tsx
@@ -12,7 +12,7 @@ import {
   Tooltip,
   useTheme,
 } from "@mui/material";
-import Grid from "@mui/material/Unstable_Grid2";
+import Grid from "@mui/material/Grid2";
 import { getCoreStatus, useNyanpasu } from "@nyanpasu/interface";
 
 export const ServiceShortcuts = () => {
@@ -80,7 +80,14 @@ export const ServiceShortcuts = () => {
   }, [coreStatusSWR.data, palette.mode, palette.success, t]);
 
   return (
-    <Grid sm={isDrawer ? 6 : 12} md={6} lg={4} xl={3}>
+    <Grid
+      size={{
+        sm: isDrawer ? 6 : 12,
+        md: 6,
+        lg: 4,
+        xl: 3,
+      }}
+    >
       <Paper className="flex !h-full flex-col justify-between gap-2 !rounded-3xl p-3">
         {serviceStatus ? (
           <>

diff --git a/frontend/nyanpasu/src/components/layout/use-custom-theme.tsx b/frontend/nyanpasu/src/components/layout/use-custom-theme.tsx
@@ -13,7 +13,7 @@ const appWindow = getCurrentWebviewWindow();
 
 const applyRootStyleVar = (mode: "light" | "dark", theme: Theme) => {
   const root = document.documentElement;
-  const palette = theme.colorSchemes[mode].palette;
+  const palette = theme.colorSchemes[mode]!.palette;
 
   const isLightMode = mode !== "light";
   root.className = cn(mode === "dark" && "dark");

diff --git a/frontend/nyanpasu/src/components/profiles/modules/chain-item.tsx b/frontend/nyanpasu/src/components/profiles/modules/chain-item.tsx
@@ -47,18 +47,29 @@ export const ChainItem = memo(function ChainItem({
     <>
       <ListItemButton
         className="!mb-2 !mt-2 !flex !justify-between gap-2"
-        sx={{
-          backgroundColor: selected
-            ? alpha(palette.primary.main, 0.3)
-            : alpha(palette.secondary.main, 0.1),
-          borderRadius: 4,
-
-          "&:hover": {
-            backgroundColor: selected
-              ? alpha(palette.primary.main, 0.5)
-              : undefined,
+        sx={[
+          {
+            borderRadius: 4,
           },
-        }}
+          selected
+            ? {
+                backgroundColor: alpha(palette.primary.main, 0.3),
+              }
+            : {
+                backgroundColor: alpha(palette.secondary.main, 0.1),
+              },
+          selected
+            ? {
+                "&:hover": {
+                  backgroundColor: alpha(palette.primary.main, 0.5),
+                },
+              }
+            : {
+                "&:hover": {
+                  backgroundColor: null,
+                },
+              },
+        ]}
         onClick={handleClick}
         disabled={isPending}
       >
@@ -79,7 +90,6 @@ export const ChainItem = memo(function ChainItem({
           <MenuIcon />
         </LoadingButton>
       </ListItemButton>
-
       <Menu
         anchorEl={anchorEl}
         open={Boolean(anchorEl)}