feat: define drag areas in electron

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;

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 })}

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 () => {

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>

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>

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`}>
+      <section ref={drop} className={`app-no-drag relative h-full w-full rounded-r-2xl flex`}>
-        <main className="flex flex-col flex-1">
+        <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}

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 */}

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"

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">

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

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} ${