fix: draggable block

src/app.css

@@ -46,7 +46,7 @@ body {
 }
 
 .block {
-  @apply p-3 rounded-xl bg-block;
+  @apply p-2 rounded-xl bg-block;
 }
 
 .sidebar {

src/lib/components/Block.svelte

@@ -3,6 +3,12 @@
   export let draggable = false;
 </script>
 
-<div class="block{className ? ` ${className}` : ''}">
+{#if draggable}
+  <div class="block{className ? ` ${className}` : ''}" data-tauri-drag-region>
     <slot />
-</div>
+  </div>
+{:else}
+  <div class="block{className ? ` ${className}` : ''}">
+    <slot />
+  </div>
+{/if}

src/lib/components/TopBar.svelte

@@ -4,6 +4,7 @@
   import Reload from "$lib/icons/Reload.svelte";
   import SidebarLeft from "$lib/icons/SidebarLeft.svelte";
   import SidebarRight from "$lib/icons/SidebarRight.svelte";
+  import Block from "./Block.svelte";
   import Button from "./Button.svelte";
 
   export let onSidebarToggle = () => {};
@@ -18,7 +19,7 @@
 </script>
 
 <div class="top-bar">
-  <div class="flex bg-block p-2 rounded-xl">
+  <Block className="flex">
     <Button onClick={onSidebarToggle}>
       {#if sidebarOpen}
         <SidebarLeft />
@@ -29,7 +30,7 @@
     <Button onClick={onBack}><ArrowLeft /></Button>
     <Button onClick={onForward}><ArrowRight /></Button>
     <Button onClick={onInput}><Reload /></Button>
-  </div>
+  </Block>
 
   <input
     type="text"

src/routes/+page.svelte

@@ -18,7 +18,7 @@
 </script>
 
 <div class="common-window" data-tauri-drag-region>
-  <Block className={`sidebar${sidebarOpen ? "" : " collapsed"}`}>
+  <Block className={`sidebar${sidebarOpen ? "" : " collapsed"}`} draggable>
     {#if sidebarOpen}
       <div transition:slide={{ axis: "x", duration: 100 }}>
         <WindowControls />