From 976e4ce7ed4c80566434cf9f5bad98e5ff066a13 Mon Sep 17 00:00:00 2001
From: Tristan Yang <yanggc888@163.com>
Date: Tue, 4 Jul 2023 11:33:35 +0800
Subject: [PATCH] feat: define drag areas in electron

---
 src/assets/index.css                      |  7 +++++++
 src/components/BlankPlaceholder.tsx       |  2 +-
 src/components/Modal.tsx                  |  1 +
 src/components/StyledSettingContainer.tsx | 10 ++++++----
 src/routes/chat/GuestBlankPlaceholder.tsx |  2 +-
 src/routes/chat/Layout/index.tsx          |  8 ++++----
 src/routes/chat/VoiceFullscreen.tsx       |  4 ++--
 src/routes/chat/index.tsx                 |  4 +++-
 src/routes/home/Menu.tsx                  |  2 +-
 src/routes/home/User.tsx                  |  2 +-
 src/routes/home/index.tsx                 |  4 ++--
 11 files changed, 29 insertions(+), 17 deletions(-)

diff --git a/src/assets/index.css b/src/assets/index.css
index 27694566..f1f578df 100644
--- a/src/assets/index.css
+++ b/src/assets/index.css
@@ -7,6 +7,13 @@
   }
 }
 @layer utilities {
+  /* for electron */
+  .app-drag {
+    -webkit-app-region: drag;
+  }
+  .app-no-drag {
+    -webkit-app-region: no-drag;
+  }
   /* word break */
   .wb {
     word-break: break-word;
diff --git a/src/components/BlankPlaceholder.tsx b/src/components/BlankPlaceholder.tsx
index 790592e7..6916ad04 100644
--- a/src/components/BlankPlaceholder.tsx
+++ b/src/components/BlankPlaceholder.tsx
@@ -46,7 +46,7 @@ const BlankPlaceholder: FC<Props> = ({ type = "chat" }) => {
   const chatHandler = type == "chat" ? toggleChannelModalVisible : toggleUserListVisible;
   return (
     <>
-      <div className="flex flex-col gap-8 -mt-[50px] dark:bg-gray-700">
+      <div className="flex flex-col gap-8 -mt-[50px] dark:bg-gray-700 app-no-drag">
         <div className="flex flex-col gap-2 items-center group px-4">
           <h2 className="text-center text-3xl text-slate-700 dark:text-white font-bold">
             {t("title", { name: server.name })}
diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
index ef8ab016..e5af7ff0 100644
--- a/src/components/Modal.tsx
+++ b/src/components/Modal.tsx
@@ -17,6 +17,7 @@ const Modal: FC<PropsWithChildren<Props>> = ({ id = "root-modal", mask = true, c
     }
     const wrapper = document.createElement("div");
     wrapper.classList.add("wrapper");
+    wrapper.classList.add("app-no-drag");
     modalRoot.appendChild(wrapper);
     setWrapper(wrapper);
     return () => {
diff --git a/src/components/StyledSettingContainer.tsx b/src/components/StyledSettingContainer.tsx
index f3a92a9c..71777013 100644
--- a/src/components/StyledSettingContainer.tsx
+++ b/src/components/StyledSettingContainer.tsx
@@ -36,13 +36,14 @@ const StyledSettingContainer: FC<PropsWithChildren<Props>> = ({
       <div className="w-screen h-screen flex">
         <div
           className={clsx(
+            "app-drag",
             "h-full w-full overflow-y-scroll md:max-w-[212px] px-4 py-8 bg-neutral-100 dark:bg-gray-800",
             nav && "hidden md:block"
           )}
         >
           <h2
             onClick={closeModal}
-            className="hidden md:flex gap-2 items-center text-sm md:text-base cursor-pointer mb-8 font-bold text-gray-800 dark:text-white"
+            className="app-no-drag hidden md:flex gap-2 items-center text-sm md:text-base cursor-pointer mb-8 font-bold text-gray-800 dark:text-white"
           >
             <IconBack className="dark:fill-gray-400" /> {title}
           </h2>
@@ -51,7 +52,7 @@ const StyledSettingContainer: FC<PropsWithChildren<Props>> = ({
               <ul
                 key={title}
                 data-title={title}
-                className="flex flex-col gap-0.5 mb-5 md:mb-9 before:md:pl-3 before:content-[attr(data-title)] before:font-bold before:text-xs before:text-gray-400"
+                className="app-no-drag flex flex-col gap-0.5 mb-5 md:mb-9 before:md:pl-3 before:content-[attr(data-title)] before:font-bold before:text-xs before:text-gray-400"
               >
                 {items.map(({ name, link, title }) => {
                   if (link)
@@ -91,7 +92,7 @@ const StyledSettingContainer: FC<PropsWithChildren<Props>> = ({
             );
           })}
           {dangers.length ? (
-            <ul className="flex flex-col gap-2 mb-9 md:text-sm font-semibold text-red-500 dark:text-red-400">
+            <ul className="app-no-drag flex flex-col gap-2 mb-9 md:text-sm font-semibold text-red-500 dark:text-red-400">
               {dangers.map((d) => {
                 if (typeof d === "boolean" || !d) return null;
                 const { title, handler } = d;
@@ -110,6 +111,7 @@ const StyledSettingContainer: FC<PropsWithChildren<Props>> = ({
         </div>
         <div
           className={clsx(
+            "app-drag",
             "relative bg-white w-full max-h-full overflow-auto px-4 md:px-8 py-2 md:py-8 dark:bg-gray-700",
             !nav ? "hidden md:block" : "!pb-4"
           )}
@@ -121,7 +123,7 @@ const StyledSettingContainer: FC<PropsWithChildren<Props>> = ({
             </h4>
           )}
           {/* <ErrorCatcher> */}
-          {children}
+          <div className="app-no-drag">{children}</div>
           {/* </ErrorCatcher> */}
         </div>
       </div>
diff --git a/src/routes/chat/GuestBlankPlaceholder.tsx b/src/routes/chat/GuestBlankPlaceholder.tsx
index 8fd6e6ad..f88413e6 100644
--- a/src/routes/chat/GuestBlankPlaceholder.tsx
+++ b/src/routes/chat/GuestBlankPlaceholder.tsx
@@ -25,7 +25,7 @@ const GuestBlankPlaceholder = () => {
   };
   const qrUrl = BASE_ORIGIN;
   return (
-    <section className="flex flex-col items-center text-center">
+    <section className="flex flex-col items-center text-center app-no-drag">
       <h2 className="text-3xl text-gray-600 dark:text-gray-50 font-bold">
         {t("welcome", { name: serverName })}
       </h2>
diff --git a/src/routes/chat/Layout/index.tsx b/src/routes/chat/Layout/index.tsx
index 41475c6e..2801065d 100644
--- a/src/routes/chat/Layout/index.tsx
+++ b/src/routes/chat/Layout/index.tsx
@@ -94,10 +94,10 @@ const Layout: FC<Props> = ({
   return (
     <>
       <ImagePreview container={messagesContainer.current} />
-      <section ref={drop} className={`relative h-full w-full rounded-r-2xl flex`}>
-        <main className="flex flex-col flex-1">
+      <section ref={drop} className={`app-no-drag relative h-full w-full rounded-r-2xl flex`}>
+        <main className="app-drag flex flex-col flex-1">
           {header}
-          <div className="w-full h-full flex items-start justify-between relative">
+          <div className="app-no-drag w-full h-full flex items-start justify-between relative">
             <div
               className="rounded-br-2xl flex flex-col absolute bottom-0 w-full h-full"
               ref={messagesContainer}
@@ -125,7 +125,7 @@ const Layout: FC<Props> = ({
         {aside && (
           <div
             className={clsx(
-              "flex z-50 p-3 absolute right-0 top-14 md:right-0 md:top-0 md:translate-x-full flex-col"
+              "app-no-drag flex z-50 p-3 absolute right-0 top-14 md:right-0 md:top-0 md:translate-x-full flex-col"
             )}
           >
             {aside}
diff --git a/src/routes/chat/VoiceFullscreen.tsx b/src/routes/chat/VoiceFullscreen.tsx
index 8e33657b..dc92f98c 100644
--- a/src/routes/chat/VoiceFullscreen.tsx
+++ b/src/routes/chat/VoiceFullscreen.tsx
@@ -63,9 +63,9 @@ const VoiceFullscreen = ({ id, context }: Props) => {
   const membersData = voicingMembers.byId;
   const hasPin = typeof pinUid !== "undefined";
   return (
-    <div className="h-full bg-black text-gray-300 flex flex-col justify-between rounded-r-2xl">
+    <div className="app-no-drag h-full bg-black text-gray-300 flex flex-col justify-between rounded-r-2xl">
       {/* top */}
-      <div className="px-7 py-6 flex justify-between">
+      <div className="app-drag px-7 py-6 flex justify-between">
         <span className="text-sm font-semibold">{_name}</span>
       </div>
       {/* middle */}
diff --git a/src/routes/chat/index.tsx b/src/routes/chat/index.tsx
index 19710595..b15901ab 100644
--- a/src/routes/chat/index.tsx
+++ b/src/routes/chat/index.tsx
@@ -77,6 +77,7 @@ function ChatPage() {
       {usersModalVisible && <UsersModal closeModal={toggleUsersModalVisible} />}
       <div
         className={clsx(
+          "app-drag",
           `flex h-screen md:h-full md:pt-2 md:pb-2.5 md:pr-1`,
           isGuest ? "guest-container md:px-1" : "md:pr-12"
         )}
@@ -89,7 +90,7 @@ function ChatPage() {
         )}
         <div
           className={clsx(
-            "left-container flex-col md:rounded-l-2xl w-full h-screen md:h-full md:max-w-[250px] md:min-w-[268px] shadow-[rgb(0_0_0_/_10%)_-1px_0px_0px_inset] bg-white dark:!bg-gray-800",
+            "left-container app-no-drag flex-col md:rounded-l-2xl w-full h-screen md:h-full md:max-w-[250px] md:min-w-[268px] shadow-[rgb(0_0_0_/_10%)_-1px_0px_0px_inset] bg-white dark:!bg-gray-800",
             isMainPath ? "flex" : "hidden md:flex"
           )}
         >
@@ -99,6 +100,7 @@ function ChatPage() {
         </div>
         <div
           className={clsx(
+            "app-drag",
             `right-container md:rounded-r-2xl w-full bg-white dark:!bg-gray-700`,
             placeholderVisible && "h-full flex-center",
             isMainPath && "hidden md:flex"
diff --git a/src/routes/home/Menu.tsx b/src/routes/home/Menu.tsx
index 703f95f6..cf97e57e 100644
--- a/src/routes/home/Menu.tsx
+++ b/src/routes/home/Menu.tsx
@@ -8,7 +8,7 @@ type Props = {};
 const Menu: FC<Props> = () => {
   const { pathname } = useLocation();
   return (
-    <ul className="flex flex-col absolute left-0 bottom-0 w-full px-3 py-2">
+    <ul className="app-no-drag flex flex-col absolute left-0 bottom-0 w-full px-3 py-2">
       <li className="cursor-pointer flex items-center p-2.5 gap-2.5 link_navs">
         <NavLink className="link" to={`/setting/overview?f=${pathname}`}>
           <Tooltip placement="right" tip="Settings">
diff --git a/src/routes/home/User.tsx b/src/routes/home/User.tsx
index 1d6f3fed..ae1cb33d 100644
--- a/src/routes/home/User.tsx
+++ b/src/routes/home/User.tsx
@@ -14,7 +14,7 @@ const User: FC<Props> = ({ uid }) => {
   if (!user) return null;
 
   return (
-    <div className="px-3 py-2.5 invisible md:visible">
+    <div className="app-no-drag px-3 py-2.5 invisible md:visible">
       <NavLink to={`/setting/my_account?f=${pathname}`}>
         <div className="w-8 h-8">
           <Avatar
diff --git a/src/routes/home/index.tsx b/src/routes/home/index.tsx
index 1090f109..59138d23 100644
--- a/src/routes/home/index.tsx
+++ b/src/routes/home/index.tsx
@@ -75,10 +75,10 @@ function HomePage() {
       >
         {!guest && (
           <div
-            className={`hidden md:flex h-full flex-col items-center relative w-16 transition-all`}
+            className={`app-drag hidden md:flex h-full flex-col items-center relative w-16 transition-all`}
           >
             {loginUid && <User uid={loginUid} />}
-            <nav className="flex flex-col gap-1 px-3 py-6">
+            <nav className="app-no-drag flex flex-col gap-1 px-3 my-6">
               <NavLink
                 className={({ isActive }) =>
                   `${linkClass} ${