refac: electron drag region

src/app.css

@@ -68,6 +68,15 @@ math {
 	font-family: 'Archivo', sans-serif;
 }
 
+.drag-region {
+	-webkit-app-region: drag;
+}
+
+.drag-region a,
+.drag-region button {
+	-webkit-app-region: no-drag;
+}
+
 iframe {
 	@apply rounded-lg;
 }

src/lib/components/channel/Navbar.svelte

@@ -16,7 +16,7 @@
 	export let channel;
 </script>
 
-<div class="sticky top-0 z-30 w-full px-1.5 py-1.5 -mb-8 flex items-center">
+<nav class="sticky top-0 z-30 w-full px-1.5 py-1.5 -mb-8 flex items-center drag-region">
 	<div
 		class=" bg-gradient-to-b via-50% from-white via-white to-transparent dark:from-gray-900 dark:via-gray-900 dark:to-transparent pointer-events-none absolute inset-0 -bottom-7 z-[-1] blur"
 	></div>
@@ -83,4 +83,4 @@
 			</div>
 		</div>
 	</div>
-</div>
+</nav>

src/lib/components/chat/Navbar.svelte

@@ -43,7 +43,7 @@
 
 <ShareChatModal bind:show={showShareChatModal} chatId={$chatId} />
 
-<div class="sticky top-0 z-30 w-full px-1.5 py-1.5 -mb-8 flex items-center">
+<nav class="sticky top-0 z-30 w-full px-1.5 py-1.5 -mb-8 flex items-center drag-region">
 	<div
 		class=" bg-gradient-to-b via-50% from-white via-white to-transparent dark:from-gray-900 dark:via-gray-900 dark:to-transparent pointer-events-none absolute inset-0 -bottom-7 z-[-1] blur"
 	></div>
@@ -191,4 +191,4 @@
 			</div>
 		</div>
 	</div>
-</div>
+</nav>

src/routes/(app)/admin/+layout.svelte

@@ -30,7 +30,7 @@
 			? 'md:max-w-[calc(100%-260px)]'
 			: ''}"
 	>
-		<div class=" px-2.5 py-1 backdrop-blur-xl">
+		<nav class="   px-2.5 pt-1 backdrop-blur-xl drag-region">
 			<div class=" flex items-center gap-1">
 				<div class="{$showSidebar ? 'md:hidden' : ''} flex flex-none items-center">
 					<button
@@ -81,7 +81,7 @@
 					</div>
 				</div>
 			</div>
-		</div>
+		</nav>
 
 		<div class=" pb-1 px-[16px] flex-1 max-h-full overflow-y-auto">
 			<slot />

src/routes/(app)/playground/+layout.svelte

@@ -20,7 +20,7 @@
 		? 'md:max-w-[calc(100%-260px)]'
 		: ''}"
 >
-	<div class=" px-2.5 py-1 backdrop-blur-xl">
+	<nav class="   px-2.5 pt-1 backdrop-blur-xl w-full drag-region">
 		<div class=" flex items-center">
 			<div class="{$showSidebar ? 'md:hidden' : ''} flex flex-none items-center">
 				<button
@@ -68,7 +68,7 @@
 				</div>
 			</div>
 		</div>
-	</div>
+	</nav>
 
 	<div class=" flex-1 max-h-full overflow-y-auto">
 		<slot />

src/routes/(app)/workspace/+layout.svelte

@@ -55,7 +55,7 @@
 			? 'md:max-w-[calc(100%-260px)]'
 			: ''}"
 	>
-		<div class="   px-2.5 pt-1 backdrop-blur-xl">
+		<nav class="   px-2.5 pt-1 backdrop-blur-xl drag-region">
 			<div class=" flex items-center gap-1">
 				<div class="{$showSidebar ? 'md:hidden' : ''} self-center flex flex-none items-center">
 					<button
@@ -126,7 +126,7 @@
 
 				<!-- <div class="flex items-center text-xl font-semibold">{$i18n.t('Workspace')}</div> -->
 			</div>
-		</div>
+		</nav>
 
 		<div class="  pb-1 px-[18px] flex-1 max-h-full overflow-y-auto" id="workspace-container">
 			<slot />

src/routes/auth/+page.svelte

@@ -139,6 +139,8 @@
 <div class="w-full h-screen max-h-[100dvh] text-white relative">
 	<div class="w-full h-full absolute top-0 left-0 bg-white dark:bg-black"></div>
 
+	<div class="w-full absolute top-0 left-0 right-0 h-8 drag-region" />
+
 	{#if loaded}
 		<div class="fixed m-10 z-50">
 			<div class="flex space-x-2">