fix popup header

src/views/Popup/Header.js

@@ -0,0 +1,42 @@
+import Box from "@mui/material/Box";
+import IconButton from "@mui/material/IconButton";
+import CloseIcon from "@mui/icons-material/Close";
+import HomeIcon from "@mui/icons-material/Home";
+import Stack from "@mui/material/Stack";
+import DarkModeButton from "../Options/DarkModeButton";
+
+export default function Header({ setShowPopup }) {
+  const handleHomepage = () => {
+    window.open(process.env.REACT_APP_HOMEPAGE, "_blank");
+  };
+
+  return (
+    <Stack
+      direction="row"
+      justifyContent="space-between"
+      alignItems="center"
+      spacing={2}
+    >
+      <Stack direction="row" justifyContent="flex-start" alignItems="center">
+        <IconButton onClick={handleHomepage}>
+          <HomeIcon />
+        </IconButton>
+        <Box>
+          {`${process.env.REACT_APP_NAME} v${process.env.REACT_APP_VERSION}`}
+        </Box>
+      </Stack>
+
+      {setShowPopup ? (
+        <IconButton
+          onClick={() => {
+            setShowPopup(false);
+          }}
+        >
+          <CloseIcon />
+        </IconButton>
+      ) : (
+        <DarkModeButton />
+      )}
+    </Stack>
+  );
+}

src/views/Popup/index.js

@@ -10,6 +10,8 @@ import { browser } from "../../libs/browser";
 import { isExt } from "../../libs/client";
 import { useI18n } from "../../hooks/I18n";
 import TextField from "@mui/material/TextField";
+import Divider from "@mui/material/Divider";
+import Header from "./Header";
 import {
   MSG_TRANS_TOGGLE,
   MSG_TRANS_GETRULE,
@@ -93,8 +95,10 @@ export default function Popup({ setShowPopup, translator: tran }) {
 
   if (!rule) {
     return (
-      <Box minWidth={300} sx={{ p: 2 }}>
-        <Stack spacing={3}>
+      <Box minWidth={300}>
+        <Header />
+        <Divider />
+        <Stack sx={{ p: 2 }} spacing={3}>
           <Button variant="text" onClick={handleOpenSetting}>
             {i18n("setting")}
           </Button>
@@ -106,8 +110,10 @@ export default function Popup({ setShowPopup, translator: tran }) {
   const { transOpen, translator, fromLang, toLang, textStyle, bgColor } = rule;
 
   return (
-    <Box minWidth={300} sx={{ p: 2 }}>
-      <Stack spacing={2}>
+    <Box minWidth={300}>
+      <Header />
+      <Divider />
+      <Stack sx={{ p: 2 }} spacing={2}>
         <Stack
           direction="row"
           justifyContent="space-between"