Tidy reordering stuff

packages/frontend-core/src/components/sheet/ResizeOverlay.svelte

@@ -1,7 +1,7 @@
 <script>
   import { getContext } from "svelte"
 
-  const { columns, rand, scroll, visibleColumns, stickyColumn } =
+  const { columns, rand, scroll, visibleColumns, stickyColumn, isReordering } =
     getContext("sheet")
   const MinColumnWidth = 100
 
@@ -75,26 +75,28 @@
   }
 </script>
 
-{#if $stickyColumn}
+{#if !$isReordering}
-  <div
+  {#if $stickyColumn}
-    class="resize-slider sticky"
+    <div
-    class:visible={columnIdx === "sticky"}
+      class="resize-slider sticky"
-    on:mousedown={e => startResizing("sticky", e)}
+      class:visible={columnIdx === "sticky"}
-    style="--left:{40 + $stickyColumn.width}px;"
+      on:mousedown={e => startResizing("sticky", e)}
-  >
+      style="--left:{40 + $stickyColumn.width}px;"
-    <div class="resize-indicator" />
+    >
-  </div>
+      <div class="resize-indicator" />
+    </div>
+  {/if}
+  {#each $visibleColumns as col}
+    <div
+      class="resize-slider"
+      class:visible={columnIdx === col.idx}
+      on:mousedown={e => startResizing(col.idx, e)}
+      style={getStyle(col, offset, scrollLeft)}
+    >
+      <div class="resize-indicator" />
+    </div>
+  {/each}
 {/if}
-{#each $visibleColumns as col}
-  <div
-    class="resize-slider"
-    class:visible={columnIdx === col.idx}
-    on:mousedown={e => startResizing(col.idx, e)}
-    style={getStyle(col, offset, scrollLeft)}
-  >
-    <div class="resize-indicator" />
-  </div>
-{/each}
 
 <style>
   .resize-slider {

packages/frontend-core/src/components/sheet/StickyColumn.svelte

@@ -79,7 +79,7 @@
     </SheetCell>
 
     {#if $stickyColumn}
-      <HeaderCell column={$stickyColumn} />
+      <HeaderCell column={$stickyColumn} orderable={false} />
     {/if}
   </div>
 

packages/frontend-core/src/components/sheet/cells/HeaderCell.svelte

@@ -5,6 +5,7 @@
   import { getIconForField } from "../utils"
 
   export let column
+  export let orderable = true
 
   const { reorder, isReordering, rand } = getContext("sheet")
 
@@ -43,8 +44,8 @@
   <SheetCell
     reorderSource={$reorder.sourceColumn === column.name}
     reorderTarget={$reorder.targetColumn === column.name}
-    on:mousedown={startReordering}
+    on:mousedown={orderable ? startReordering : null}
-    on:mouseup={stopReordering}
+    on:mouseup={orderable ? stopReordering : null}
     on:click={onClick}
     width={column.width}
     left={column.left}
@@ -75,8 +76,10 @@
     <MenuItem icon="Edit">Edit column</MenuItem>
     <MenuItem icon="SortOrderUp">Sort ascending</MenuItem>
     <MenuItem icon="SortOrderDown">Sort descending</MenuItem>
-    <MenuItem icon="ArrowLeft">Move left</MenuItem>
+    {#if orderable}
-    <MenuItem icon="ArrowRight">Move right</MenuItem>
+      <MenuItem icon="ArrowLeft">Move left</MenuItem>
+      <MenuItem icon="ArrowRight">Move right</MenuItem>
+    {/if}
     <MenuItem icon="Delete">Delete</MenuItem>
   </Menu>
 </Popover>

packages/frontend-core/src/components/sheet/cells/SheetCell.svelte

@@ -95,9 +95,6 @@
   .cell.reorder-source {
     background: var(--spectrum-global-color-gray-100);
   }
-  .cell.header.reorder-source {
-    background: var(--spectrum-global-color-gray-200);
-  }
   .cell.reorder-target:after {
     content: " ";
     position: absolute;

packages/frontend-core/src/components/sheet/stores/reorder.js

@@ -48,7 +48,6 @@ export const createReorderStores = context => {
 
     // Trigger a move event immediately so ensure a candidate column is chosen
     onReorderMouseMove(e)
-    document.getElementById(`sheet-${rand}`).classList.add("is-reordering")
   }
 
   // Callback when moving the mouse when reordering columns
@@ -107,7 +106,6 @@ export const createReorderStores = context => {
     // Remove event handlers
     document.removeEventListener("mousemove", onReorderMouseMove)
     document.removeEventListener("mouseup", stopReordering)
-    document.getElementById(`sheet-${rand}`).classList.remove("is-reordering")
   }
 
   return {