feat: resizable columns

webui/src/components/BrowseColumn.svelte

@@ -24,44 +24,68 @@
   function visit() {
     window.open(normUrl(`/browse/${address}`), "_blank");
   }
+
+  let width = 460;
+  function drag(ev: MouseEvent) {
+    const startWidth = width;
+    const startX = ev.screenX;
+
+    function onMouseMove(ev: MouseEvent) {
+      width = startWidth + (ev.screenX - startX);
+      width = width < 300 ? 300 : width;
+    }
+    function onMouseUp(_: MouseEvent) {
+      window.removeEventListener("mousemove", onMouseMove);
+      window.removeEventListener("mouseup", onMouseUp);
+    }
+    window.addEventListener("mousemove", onMouseMove);
+    window.addEventListener("mouseup", onMouseUp);
+  }
 </script>
 
-<div class="view" class:editable class:detail>
-  <header>
-    <IconButton
-      name="pencil"
-      on:click={() => (editable = !editable)}
-      active={editable}
+<div class="column">
+  <div class="view" class:editable class:detail style="--width: {width}px">
+    <header>
+      <IconButton
+        name="pencil"
+        on:click={() => (editable = !editable)}
+        active={editable}
+      />
+      <IconButton
+        name="fullscreen"
+        on:click={() => {
+          detail = !detail;
+          detailChanged = true;
+        }}
+        active={detail}
+      />
+      <IconButton name="bookmark" on:click={() => visit()} disabled={only} />
+      <IconButton
+        name="x-circle"
+        on:click={() => dispatch("close")}
+        disabled={only}
+      />
+    </header>
+    <Inspect
+      {address}
+      editable={editable || false}
+      {index}
+      {detail}
+      on:resolved
+      on:close
     />
-    <IconButton
-      name="fullscreen"
-      on:click={() => {
-        detail = !detail;
-        detailChanged = true;
-      }}
-      active={detail}
-    />
-    <IconButton name="bookmark" on:click={() => visit()} disabled={only} />
-    <IconButton
-      name="x-circle"
-      on:click={() => dispatch("close")}
-      disabled={only}
-    />
-  </header>
-  <Inspect
-    {address}
-    editable={editable || false}
-    {index}
-    {detail}
-    on:resolved
-    on:close
-  />
+  </div>
+  <div class="resizeHandle" on:mousedown|preventDefault={drag} />
 </div>
 
 <style lang="scss">
+  .column {
+    display: flex;
+  }
+
   .view {
-    min-width: 30em;
-    max-width: 30em;
+    min-width: var(--width);
+    max-width: var(--width);
 
     display: flex;
     flex-direction: column;
@@ -97,4 +121,10 @@
       flex: none;
     }
   }
+
+  .resizeHandle {
+    cursor: ew-resize;
+    height: 100%;
+    width: 0.5rem;
+  }
 </style>