feat: define drag areas in electron

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>