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,6 +75,7 @@
   }
 </script>
 
+{#if !$isReordering}
   {#if $stickyColumn}
     <div
       class="resize-slider sticky"
@@ -95,6 +96,7 @@
       <div class="resize-indicator" />
     </div>
   {/each}
+{/if}
 
 <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>
+    {#if orderable}
       <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 {