feat: refactor and adjust ui

src/components/base-page.tsx

@@ -0,0 +1,32 @@
+import { Typography } from "@mui/material";
+import React from "react";
+
+interface Props {
+  title?: React.ReactNode; // the page title
+  header?: React.ReactNode; // something behind title
+  contentStyle?: React.CSSProperties;
+}
+
+const BasePage: React.FC<Props> = (props) => {
+  const { title, header, contentStyle, children } = props;
+
+  return (
+    <div className="base-page" data-windrag>
+      <header data-windrag>
+        <Typography variant="h4" component="h1">
+          {title}
+        </Typography>
+
+        {header}
+      </header>
+
+      <section data-windrag>
+        <div className="base-content" style={contentStyle} data-windrag>
+          {children}
+        </div>
+      </section>
+    </div>
+  );
+};
+
+export default BasePage;

src/components/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/window-control.tsx

@@ -0,0 +1,39 @@
+import { Button } from "@mui/material";
+import { appWindow } from "@tauri-apps/api/window";
+import {
+  CloseRounded,
+  CropLandscapeOutlined,
+  HorizontalRuleRounded,
+} from "@mui/icons-material";
+
+const WindowControl = () => {
+  return (
+    <>
+      <Button
+        size="small"
+        sx={{ minWidth: 48 }}
+        onClick={() => appWindow.minimize()}
+      >
+        <HorizontalRuleRounded />
+      </Button>
+
+      <Button
+        size="small"
+        sx={{ minWidth: 48 }}
+        onClick={() => appWindow.toggleMaximize()}
+      >
+        <CropLandscapeOutlined />
+      </Button>
+
+      <Button
+        size="small"
+        sx={{ minWidth: 48 }}
+        onClick={() => appWindow.hide()}
+      >
+        <CloseRounded />
+      </Button>
+    </>
+  );
+};
+
+export default WindowControl;