From cf943948bf1d42618d4306ae31debcd8317aae9b Mon Sep 17 00:00:00 2001
From: pompurin404 <pompurin404@mihomo.party>
Date: Sat, 31 Aug 2024 12:29:47 +0800
Subject: [PATCH] try hide titlebar

---
 src/main/index.ts                                      | 7 +++++++
 src/renderer/src/App.tsx                               | 3 ++-
 src/renderer/src/assets/main.css                       | 7 +++++++
 src/renderer/src/components/base/base-page.tsx         | 5 +++--
 src/renderer/src/components/updater/updater-button.tsx | 1 +
 src/renderer/src/pages/connections.tsx                 | 2 +-
 src/renderer/src/pages/dns.tsx                         | 1 +
 src/renderer/src/pages/override.tsx                    | 3 ++-
 src/renderer/src/pages/profiles.tsx                    | 1 +
 src/renderer/src/pages/proxies.tsx                     | 2 +-
 src/renderer/src/pages/settings.tsx                    | 3 ++-
 src/renderer/src/pages/sniffer.tsx                     | 1 +
 src/renderer/src/pages/syspeoxy.tsx                    | 2 +-
 src/renderer/src/pages/tun.tsx                         | 1 +
 14 files changed, 31 insertions(+), 8 deletions(-)

diff --git a/src/main/index.ts b/src/main/index.ts
index d223090..3e72399 100644
--- a/src/main/index.ts
+++ b/src/main/index.ts
@@ -155,6 +155,13 @@ export function createWindow(show = false): void {
     x: mainWindowState.x,
     y: mainWindowState.y,
     show: false,
+    frame: false,
+    titleBarStyle: 'hidden',
+    titleBarOverlay: {
+      color: '#00000000',
+      symbolColor: '#8D8D8D',
+      height: 48
+    },
     autoHideMenuBar: true,
     ...(process.platform === 'linux' ? { icon: icon } : {}),
     webPreferences: {
diff --git a/src/renderer/src/App.tsx b/src/renderer/src/App.tsx
index 7004cd4..eb125b9 100644
--- a/src/renderer/src/App.tsx
+++ b/src/renderer/src/App.tsx
@@ -106,12 +106,13 @@ const App: React.FC = () => {
   return (
     <div className="w-full h-[100vh] flex">
       <div className="side w-[250px] h-full overflow-y-auto no-scrollbar">
-        <div className="sticky top-0 z-40 backdrop-blur bg-background/40 h-[49px]">
+        <div className="app-drag sticky top-0 z-40 backdrop-blur bg-background/40 h-[49px]">
           <div className="flex justify-between p-2">
             <h3 className="text-lg font-bold leading-[32px]">Mihomo Party</h3>
             <UpdaterButton />
             <Button
               size="sm"
+              className="app-nodrag"
               isIconOnly
               color={location.pathname.includes('/settings') ? 'primary' : 'default'}
               variant={location.pathname.includes('/settings') ? 'solid' : 'light'}
diff --git a/src/renderer/src/assets/main.css b/src/renderer/src/assets/main.css
index 3eb73c4..68c892e 100644
--- a/src/renderer/src/assets/main.css
+++ b/src/renderer/src/assets/main.css
@@ -7,6 +7,13 @@
   src: url('./NotoColorEmoji.ttf');
 }
 
+.app-nodrag {
+  -webkit-app-region: none;
+}
+.app-drag {
+  -webkit-app-region: drag;
+}
+
 * {
   user-select: none;
 }
diff --git a/src/renderer/src/components/base/base-page.tsx b/src/renderer/src/components/base/base-page.tsx
index dff49a2..b24268d 100644
--- a/src/renderer/src/components/base/base-page.tsx
+++ b/src/renderer/src/components/base/base-page.tsx
@@ -16,10 +16,11 @@ const BasePage = forwardRef<HTMLDivElement, Props>((props, ref) => {
   return (
     <div ref={contentRef} className="w-full h-full overflow-y-auto custom-scrollbar">
       <div className="sticky top-0 z-40 h-[49px] w-full backdrop-blur bg-background/40">
-        <div className="p-2 flex justify-between h-[48px]">
+        <div className="app-drag p-2 flex justify-between h-[48px]">
           <div className="title h-full text-lg leading-[32px]">{props.title}</div>
-          <div className="header h-full">{props.header}</div>
+          <div className="header h-full mr-[130px]">{props.header}</div>
         </div>
+
         <Divider />
       </div>
       <div className="content">{props.children}</div>
diff --git a/src/renderer/src/components/updater/updater-button.tsx b/src/renderer/src/components/updater/updater-button.tsx
index 54d22a9..51fd93e 100644
--- a/src/renderer/src/components/updater/updater-button.tsx
+++ b/src/renderer/src/components/updater/updater-button.tsx
@@ -30,6 +30,7 @@ const UpdaterButton: React.FC = () => {
         />
       )}
       <Button
+        className="app-nodrag"
         color="danger"
         size="sm"
         onPress={() => {
diff --git a/src/renderer/src/pages/connections.tsx b/src/renderer/src/pages/connections.tsx
index bcf4e64..1e1b0ae 100644
--- a/src/renderer/src/pages/connections.tsx
+++ b/src/renderer/src/pages/connections.tsx
@@ -102,7 +102,7 @@ const Connections: React.FC = () => {
             </span>
           </div>
           <Button
-            className="ml-1"
+            className="app-nodrag ml-1"
             size="sm"
             color="primary"
             onPress={() => {
diff --git a/src/renderer/src/pages/dns.tsx b/src/renderer/src/pages/dns.tsx
index 16b124e..504aac5 100644
--- a/src/renderer/src/pages/dns.tsx
+++ b/src/renderer/src/pages/dns.tsx
@@ -122,6 +122,7 @@ const DNS: React.FC = () => {
       header={
         <Button
           size="sm"
+          className="app-nodrag"
           color="primary"
           onPress={() => {
             const hostsObject = Object.fromEntries(
diff --git a/src/renderer/src/pages/override.tsx b/src/renderer/src/pages/override.tsx
index 2132d1b..fcb9e63 100644
--- a/src/renderer/src/pages/override.tsx
+++ b/src/renderer/src/pages/override.tsx
@@ -115,7 +115,7 @@ const Override: React.FC = () => {
         <>
           <Button
             size="sm"
-            className="mr-2"
+            className="app-nodrag mr-2"
             onPress={() => {
               open('https://mihomo.party/guides/function/override/yaml/')
             }}
@@ -123,6 +123,7 @@ const Override: React.FC = () => {
             使用文档
           </Button>
           <Button
+            className="app-nodrag"
             size="sm"
             onPress={() => {
               open('https://github.com/pompurin404/override-hub')
diff --git a/src/renderer/src/pages/profiles.tsx b/src/renderer/src/pages/profiles.tsx
index 9967db8..55c2733 100644
--- a/src/renderer/src/pages/profiles.tsx
+++ b/src/renderer/src/pages/profiles.tsx
@@ -103,6 +103,7 @@ const Profiles: React.FC = () => {
       header={
         <Button
           size="sm"
+          className="app-nodrag"
           color="primary"
           isLoading={updating}
           onPress={async () => {
diff --git a/src/renderer/src/pages/proxies.tsx b/src/renderer/src/pages/proxies.tsx
index 9836065..fe0f796 100644
--- a/src/renderer/src/pages/proxies.tsx
+++ b/src/renderer/src/pages/proxies.tsx
@@ -110,7 +110,7 @@ const Proxies: React.FC = () => {
     <BasePage
       title="代理组"
       header={
-        <div>
+        <div className="app-nodrag">
           <Button
             size="sm"
             isIconOnly
diff --git a/src/renderer/src/pages/settings.tsx b/src/renderer/src/pages/settings.tsx
index e2a3169..aa3d527 100644
--- a/src/renderer/src/pages/settings.tsx
+++ b/src/renderer/src/pages/settings.tsx
@@ -18,7 +18,7 @@ const Settings: React.FC = () => {
             isIconOnly
             size="sm"
             title="官方文档"
-            className="mr-2"
+            className="app-nodrag mr-2"
             onPress={() => {
               window.open('https://mihomo.party')
             }}
@@ -28,6 +28,7 @@ const Settings: React.FC = () => {
           <Button
             isIconOnly
             size="sm"
+            className="app-nodrag"
             title="GitHub仓库"
             onPress={() => {
               window.open('https://github.com/pompurin404/mihomo-party')
diff --git a/src/renderer/src/pages/sniffer.tsx b/src/renderer/src/pages/sniffer.tsx
index 1674792..adfe8f4 100644
--- a/src/renderer/src/pages/sniffer.tsx
+++ b/src/renderer/src/pages/sniffer.tsx
@@ -71,6 +71,7 @@ const Sniffer: React.FC = () => {
       header={
         <Button
           size="sm"
+          className="app-nodrag"
           color="primary"
           onPress={() =>
             onSave({
diff --git a/src/renderer/src/pages/syspeoxy.tsx b/src/renderer/src/pages/syspeoxy.tsx
index 08f01f2..961f11e 100644
--- a/src/renderer/src/pages/syspeoxy.tsx
+++ b/src/renderer/src/pages/syspeoxy.tsx
@@ -100,7 +100,7 @@ const Sysproxy: React.FC = () => {
     <BasePage
       title="系统代理设置"
       header={
-        <Button size="sm" color="primary" onPress={onSave}>
+        <Button className="app-nodrag" size="sm" color="primary" onPress={onSave}>
           保存
         </Button>
       }
diff --git a/src/renderer/src/pages/tun.tsx b/src/renderer/src/pages/tun.tsx
index ab6ff1b..125b05f 100644
--- a/src/renderer/src/pages/tun.tsx
+++ b/src/renderer/src/pages/tun.tsx
@@ -62,6 +62,7 @@ const Tun: React.FC = () => {
         header={
           <Button
             size="sm"
+            className="app-nodrag"
             color="primary"
             onPress={() =>
               onSave({