update topbar.

app/package.json

@@ -1,5 +1,6 @@
 {
-  "name": "SwitchHosts",
+  "name": "switchhosts",
+  "productName": "SwitchHosts",
   "version": "4.0.0",
   "description": "Switch hosts quickly!",
   "main": "./main.js",

src/main/actions/closeMainWindow.ts

@@ -0,0 +1,9 @@
+/**
+ * @author: oldj
+ * @homepage: https://oldj.net
+ */
+
+export default async () => {
+  let win = global.main_win
+  win && win.isClosable() && win.close()
+}

src/main/actions/index.ts

@@ -42,6 +42,7 @@ export { default as openUrl } from './openUrl'
 export { default as showItemInFolder } from './showItemInFolder'
 export { default as updateTrayTitle } from './updateTrayTitle'
 export { default as checkUpdate } from './checkUpdate'
+export { default as closeMainWindow } from './closeMainWindow'
 export { default as quit } from './quit'
 
 export { default as migrateCheck } from './migrate/checkIfMigration'

src/main/main.ts

@@ -47,6 +47,7 @@ const createWindow = async () => {
   const ses = win.webContents.session
   // console.log(ses.getUserAgent())
   global.ua = ses.getUserAgent()
+  global.main_win = win
 
   if (configs.hide_at_launch) {
     win.hide()

src/main/types.d.ts

@@ -5,6 +5,7 @@
  */
 
 import SwhDb from '@main/utils/db'
+import { BrowserWindow } from 'electron'
 import * as actions from './actions'
 
 export type Actions = typeof actions
@@ -27,6 +28,7 @@ declare global {
       cfgdb: SwhDb;
       ua: string; // user agent
       session_id: string; // A random value, refreshed every time the app starts, used to identify different startup sessions.
+      main_win: BrowserWindow;
     }
   }
 }

src/renderer/components/TopBar/ConfigMenu.tsx

@@ -5,23 +5,10 @@
  */
 
 import { useModel } from '@@/plugin-model/useModel'
+import { Button, Menu, MenuButton, MenuDivider, MenuItem, MenuList, useToast } from '@chakra-ui/react'
 import { actions, agent } from '@renderer/core/agent'
 import { feedback_url, homepage_url } from '@root/common/constants'
-import { useToast } from '@chakra-ui/react'
 import React from 'react'
-import {
-  Menu,
-  MenuButton,
-  MenuList,
-  MenuItem,
-  MenuItemOption,
-  MenuGroup,
-  MenuOptionGroup,
-  MenuIcon,
-  MenuCommand,
-  MenuDivider,
-  Button, Flex,
-} from '@chakra-ui/react'
 import { BiCog, BiExit, BiHomeCircle, BiInfoCircle, BiMessageDetail, BiRefresh, BiSliderAlt } from 'react-icons/bi'
 
 interface Props {
@@ -37,6 +24,7 @@ const ConfigMenu = (props: Props) => {
       <MenuButton
         as={Button}
         variant="ghost"
+        width="35px"
       >
         <BiCog/>
       </MenuButton>

src/renderer/components/TopBar/index.less

@@ -6,34 +6,47 @@
 
   background: var(--swh-top-bar-bg);
   border-bottom: 1px solid var(--swh-border-color-0);
-  display: grid;
-  grid-template-columns: @w 1fr @w;
+  display: flex;
+  width: 100%;
   padding: 0 @p;
+  align-items: center;
+  align-content: center;
   -webkit-user-select: none;
-  -webkit-app-region: drag;
 
-  .hosts_title {
+  .title {
     max-width: calc(100vw - (@w + @p) * 2);
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
+    margin: 0 auto;
   }
+}
+
+.title_wrapper {
+  width: 100%;
+  height: 100%;
+  display: flex;
+
+  .win-drag;
+}
 
+.left, .right {
 }
 
 .left {
+  left: 10px;
+}
 
+.right {
+  right: 10px;
 }
 
 :global(.platform-darwin) {
-  .left {
-    padding-left: 60px;
+  .root {
+    padding-left: 80px;
   }
 }
 
-.right {
-  text-align: right;
-}
 
 .read_only {
   color: var(--swh-font-color-weak);

src/renderer/components/TopBar/index.tsx

@@ -5,14 +5,14 @@
  */
 
 import { useModel } from '@@/plugin-model/useModel'
-import { Box, Center, Flex, HStack, IconButton } from '@chakra-ui/react'
+import { Box, Flex, HStack, IconButton } from '@chakra-ui/react'
 import ItemIcon from '@renderer/components/ItemIcon'
 import SwitchButton from '@renderer/components/SwitchButton'
 import ConfigMenu from '@renderer/components/TopBar/ConfigMenu'
-import { agent } from '@renderer/core/agent'
+import { actions, agent } from '@renderer/core/agent'
 import useOnBroadcast from '@renderer/core/useOnBroadcast'
 import React, { useEffect, useState } from 'react'
-import { BiHistory, BiPlus, BiSidebar, BiSliderAlt, BiCog } from 'react-icons/bi'
+import { BiHistory, BiPlus, BiSidebar, BiX } from 'react-icons/bi'
 import styles from './index.less'
 
 interface IProps {
@@ -27,6 +27,7 @@ export default (props: IProps) => {
 
   const show_toggle_switch = !show_left_panel && current_hosts && !isHostsInTrashcan(current_hosts.id)
   const show_history = !current_hosts
+  const show_close_button = agent.platform !== 'darwin'
 
   useEffect(() => {
     setIsOn(!!current_hosts?.on)
@@ -58,8 +59,8 @@ export default (props: IProps) => {
         />
       </Flex>
 
-      <Center className={styles.hosts_title}>
-        <HStack>
+      <Box className={styles.title_wrapper}>
+        <HStack className={styles.title} k>
           {current_hosts ? (
             <>
                 <span className={styles.hosts_icon}>
@@ -84,9 +85,13 @@ export default (props: IProps) => {
             <span className={styles.read_only}>{lang.read_only}</span>
           ) : null}
         </HStack>
-      </Center>
+      </Box>
 
-      <Flex align="center" justifyContent="flex-end">
+      <Flex
+        align="center"
+        justifyContent="flex-end"
+        className={styles.right}
+      >
         {show_toggle_switch ? (
           <Box mr={3}>
             <SwitchButton on={is_on} onChange={on => {
@@ -103,13 +108,17 @@ export default (props: IProps) => {
           />
         ) : null}
 
-        {/*<IconButton*/}
-        {/*  aria-label="Toggle preference panel"*/}
-        {/*  icon={<BiSliderAlt/>}*/}
-        {/*  variant="ghost"*/}
-        {/*  onClick={() => agent.broadcast('show_preferences')}*/}
-        {/*/>*/}
         <ConfigMenu/>
+
+        {show_close_button ? (
+          <IconButton
+            aria-label="Close window"
+            fontSize="20px"
+            icon={<BiX/>}
+            variant="ghost"
+            onClick={() => actions.closeMainWindow()}
+          />
+        ) : null}
       </Flex>
     </div>
   )

src/renderer/styles/common.less

@@ -8,3 +8,7 @@ html, body {
   box-sizing: border-box;
   color: var(--swh-font-color);
 }
+
+.win-drag {
+  -webkit-app-region: drag;
+}

src/version.json

@@ -1 +1 @@
-[4, 0, 0, 6015]
+[4, 0, 0, 6019]