feat: remove custom window button

src/assets/styles/layout.scss

@@ -129,14 +129,14 @@
       flex: 1 0 58px;
       margin-top: 10px;
       margin-left: 10px;
-      padding-top: 30px;
+      padding-top: 5px;
       padding-left: 10px;
       padding-right: 20px;
       padding-bottom: 16px;
     }
 
     .layout__right .the-content {
-      top: 24px;
+      top: 5px;
     }
   }
 }
@@ -144,11 +144,11 @@
 .macos {
   &.layout {
     .layout__left {
-      padding-top: 24px;
+      padding-top: 5px;
     }
 
     .layout__right .the-content {
-      top: 24px;
+      top: 5px;
     }
 
     .layout__left .the-newbtn {

src/components/layout/layout-control.tsx

@@ -1,104 +0,0 @@
-import { Button, ButtonGroup } from "@mui/material";
-import { getCurrentWebviewWindow } from "@tauri-apps/api/webviewWindow";
-import {
-  CloseRounded,
-  CropSquareRounded,
-  FilterNoneRounded,
-  HorizontalRuleRounded,
-  PushPinOutlined,
-  PushPinRounded,
-} from "@mui/icons-material";
-import { useEffect, useState } from "react";
-const appWindow = getCurrentWebviewWindow();
-
-export const LayoutControl = () => {
-  const minWidth = 40;
-
-  const [isMaximized, setIsMaximized] = useState(false);
-  const [isPined, setIsPined] = useState(false);
-
-  useEffect(() => {
-    const unlistenResized = appWindow.onResized(() => {
-      appWindow.isMaximized().then((maximized) => {
-        setIsMaximized(() => maximized);
-      });
-    });
-
-    appWindow.isMaximized().then((maximized) => {
-      setIsMaximized(() => maximized);
-    });
-
-    return () => {
-      unlistenResized.then((fn) => fn());
-    };
-  }, []);
-
-  return (
-    <ButtonGroup
-      variant="text"
-      sx={{
-        zIndex: 1000,
-        height: "100%",
-        ".MuiButtonGroup-grouped": {
-          borderRadius: "0px",
-          borderRight: "0px",
-        },
-      }}
-    >
-      <Button
-        size="small"
-        sx={{ minWidth, svg: { transform: "scale(0.9)" } }}
-        onClick={() => {
-          appWindow.setAlwaysOnTop(!isPined);
-          setIsPined((isPined) => !isPined);
-        }}
-      >
-        {isPined ? (
-          <PushPinRounded fontSize="small" />
-        ) : (
-          <PushPinOutlined fontSize="small" />
-        )}
-      </Button>
-
-      <Button
-        size="small"
-        sx={{ minWidth, svg: { transform: "scale(0.9)" } }}
-        onClick={() => appWindow.minimize()}
-      >
-        <HorizontalRuleRounded fontSize="small" />
-      </Button>
-
-      <Button
-        size="small"
-        sx={{ minWidth, svg: { transform: "scale(0.9)" } }}
-        onClick={() => {
-          setIsMaximized((isMaximized) => !isMaximized);
-          appWindow.toggleMaximize();
-        }}
-      >
-        {isMaximized ? (
-          <FilterNoneRounded
-            fontSize="small"
-            style={{
-              transform: "rotate(180deg) scale(0.7)",
-            }}
-          />
-        ) : (
-          <CropSquareRounded fontSize="small" />
-        )}
-      </Button>
-
-      <Button
-        size="small"
-        sx={{
-          minWidth,
-          svg: { transform: "scale(1.05)" },
-          ":hover": { bgcolor: "#ff000090" },
-        }}
-        onClick={() => appWindow.close()}
-      >
-        <CloseRounded fontSize="small" />
-      </Button>
-    </ButtonGroup>
-  );
-};

src/pages/_layout.tsx

@@ -15,7 +15,6 @@ import iconLight from "@/assets/image/icon_light.svg?react";
 import iconDark from "@/assets/image/icon_dark.svg?react";
 import { useThemeMode, useEnableLog } from "@/services/states";
 import { LayoutItem } from "@/components/layout/layout-item";
-import { LayoutControl } from "@/components/layout/layout-control";
 import { LayoutTraffic } from "@/components/layout/layout-traffic";
 import { UpdateButton } from "@/components/layout/update-button";
 import { useCustomTheme } from "@/components/layout/use-custom-theme";
@@ -382,12 +381,6 @@ const Layout = () => {
 
           <div className="layout__right">
             <div className="the-bar">
-              <div
-                className="the-dragbar"
-                data-tauri-drag-region="true"
-                style={{ width: "100%" }}
-              />
-              {OS !== "macos" && <LayoutControl />}
             </div>
 
             <div className="the-content">