feat: define drag areas in electron

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

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