chore: adjust files

src/components/layout/layout-control.tsx

@@ -0,0 +1,41 @@
+import { Button } from "@mui/material";
+import { appWindow } from "@tauri-apps/api/window";
+import {
+  CloseRounded,
+  CropSquareRounded,
+  HorizontalRuleRounded,
+} from "@mui/icons-material";
+
+const LayoutControl = () => {
+  const minWidth = 40;
+
+  return (
+    <>
+      <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={() => appWindow.toggleMaximize()}
+      >
+        <CropSquareRounded fontSize="small" />
+      </Button>
+
+      <Button
+        size="small"
+        sx={{ minWidth, svg: { transform: "scale(1.05)" } }}
+        onClick={() => appWindow.hide()}
+      >
+        <CloseRounded fontSize="small" />
+      </Button>
+    </>
+  );
+};
+
+export default LayoutControl;

src/components/layout/layout-item.tsx

@@ -0,0 +1,44 @@
+import { alpha, ListItem, ListItemButton, ListItemText } from "@mui/material";
+import { useMatch, useResolvedPath, useNavigate } from "react-router-dom";
+import type { LinkProps } from "react-router-dom";
+
+const LayoutItem = (props: LinkProps) => {
+  const { to, children } = props;
+
+  const resolved = useResolvedPath(to);
+  const match = useMatch({ path: resolved.pathname, end: true });
+  const navigate = useNavigate();
+
+  return (
+    <ListItem sx={{ py: 0.5, maxWidth: 250, mx: "auto" }}>
+      <ListItemButton
+        selected={!!match}
+        sx={[
+          {
+            borderRadius: 2,
+            textAlign: "center",
+            "& .MuiListItemText-primary": { color: "text.secondary" },
+          },
+          ({ palette: { mode, primary } }) => {
+            const bgcolor =
+              mode === "light"
+                ? alpha(primary.main, 0.15)
+                : alpha(primary.main, 0.35);
+            const color = mode === "light" ? primary.main : primary.light;
+
+            return {
+              "&.Mui-selected": { bgcolor },
+              "&.Mui-selected:hover": { bgcolor },
+              "&.Mui-selected .MuiListItemText-primary": { color },
+            };
+          },
+        ]}
+        onClick={() => navigate(to)}
+      >
+        <ListItemText primary={children} />
+      </ListItemButton>
+    </ListItem>
+  );
+};
+
+export default LayoutItem;

src/components/layout/layout-traffic.tsx

@@ -0,0 +1,69 @@
+import { useEffect, useState } from "react";
+import { useRecoilValue } from "recoil";
+import { Box, Typography } from "@mui/material";
+import { ArrowDownward, ArrowUpward } from "@mui/icons-material";
+import { getInfomation } from "../../services/api";
+import { ApiType } from "../../services/types";
+import { atomClashPort } from "../../states/setting";
+import parseTraffic from "../../utils/parse-traffic";
+
+const LayoutTraffic = () => {
+  const portValue = useRecoilValue(atomClashPort);
+  const [traffic, setTraffic] = useState({ up: 0, down: 0 });
+
+  useEffect(() => {
+    let ws: WebSocket | null = null;
+
+    getInfomation().then((result) => {
+      const { server = "", secret = "" } = result;
+      ws = new WebSocket(`ws://${server}/traffic?token=${secret}`);
+
+      ws.addEventListener("message", (event) => {
+        setTraffic(JSON.parse(event.data) as ApiType.TrafficItem);
+      });
+    });
+
+    return () => ws?.close();
+  }, [portValue]);
+
+  const [up, upUnit] = parseTraffic(traffic.up);
+  const [down, downUnit] = parseTraffic(traffic.down);
+
+  const valStyle: any = {
+    component: "span",
+    color: "primary",
+    textAlign: "center",
+    sx: { flex: "1 1 54px" },
+  };
+  const unitStyle: any = {
+    component: "span",
+    color: "grey.500",
+    fontSize: "12px",
+    textAlign: "right",
+    sx: { flex: "0 1 28px", userSelect: "none" },
+  };
+
+  return (
+    <Box width="110px">
+      <Box mb={1.5} display="flex" alignItems="center" whiteSpace="nowrap">
+        <ArrowUpward
+          fontSize="small"
+          color={+up > 0 ? "primary" : "disabled"}
+        />
+        <Typography {...valStyle}>{up}</Typography>
+        <Typography {...unitStyle}>{upUnit}/s</Typography>
+      </Box>
+
+      <Box display="flex" alignItems="center" whiteSpace="nowrap">
+        <ArrowDownward
+          fontSize="small"
+          color={+down > 0 ? "primary" : "disabled"}
+        />
+        <Typography {...valStyle}>{down}</Typography>
+        <Typography {...unitStyle}>{downUnit}/s</Typography>
+      </Box>
+    </Box>
+  );
+};
+
+export default LayoutTraffic;

src/components/layout/update-button.tsx

@@ -0,0 +1,40 @@
+import useSWR from "swr";
+import { useState } from "react";
+import { Button } from "@mui/material";
+import { checkUpdate } from "@tauri-apps/api/updater";
+import UpdateDialog from "./update-dialog";
+
+interface Props {
+  className?: string;
+}
+
+const UpdateButton = (props: Props) => {
+  const { className } = props;
+
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const { data: updateInfo } = useSWR("checkUpdate", checkUpdate, {
+    errorRetryCount: 2,
+    revalidateIfStale: false,
+    focusThrottleInterval: 36e5, // 1 hour
+  });
+
+  if (!updateInfo?.shouldUpdate) return null;
+
+  return (
+    <>
+      <Button
+        color="error"
+        variant="contained"
+        size="small"
+        className={className}
+        onClick={() => setDialogOpen(true)}
+      >
+        New
+      </Button>
+
+      <UpdateDialog open={dialogOpen} onClose={() => setDialogOpen(false)} />
+    </>
+  );
+};
+
+export default UpdateButton;

src/components/layout/update-dialog.tsx

@@ -0,0 +1,66 @@
+import useSWR from "swr";
+import { useState } from "react";
+import { checkUpdate, installUpdate } from "@tauri-apps/api/updater";
+import { relaunch } from "@tauri-apps/api/process";
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+} from "@mui/material";
+
+interface Props {
+  open: boolean;
+  onClose: () => void;
+}
+
+let uploadingState = false;
+
+const UpdateDialog = (props: Props) => {
+  const { open, onClose } = props;
+  const { data: updateInfo } = useSWR("checkUpdate", checkUpdate, {
+    errorRetryCount: 2,
+    revalidateIfStale: false,
+    focusThrottleInterval: 36e5, // 1 hour
+  });
+  const [uploading, setUploading] = useState(uploadingState);
+
+  const onUpdate = async () => {
+    try {
+      setUploading(true);
+      uploadingState = true;
+      await installUpdate();
+      await relaunch();
+    } catch (error) {
+      console.log(error);
+      window.alert("Failed to upload, please try again.");
+    } finally {
+      setUploading(true);
+      uploadingState = true;
+    }
+  };
+
+  return (
+    <Dialog open={open} onClose={onClose}>
+      <DialogTitle>New Version v{updateInfo?.manifest?.version}</DialogTitle>
+      <DialogContent sx={{ minWidth: 360, maxWidth: 400, maxHeight: "50vh" }}>
+        <DialogContentText>{updateInfo?.manifest?.body}</DialogContentText>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onClose}>Cancel</Button>
+        <Button
+          variant="contained"
+          autoFocus
+          onClick={onUpdate}
+          disabled={uploading}
+        >
+          Update
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default UpdateDialog;