Add resizable columns and add support for all themes

packages/client/src/components/app/spreadsheet/OptionsCell.svelte

@@ -7,17 +7,6 @@
   export let onChange
 
   const options = schema?.constraints?.inclusion || []
-  const colors = [
-    "rgb(207, 223, 255)",
-    "rgb(208, 240, 253)",
-    "rgb(194, 245, 233)",
-    "rgb(209, 247, 196)",
-    "rgb(255, 234, 182)",
-    "rgb(254, 226, 213)",
-    "rgb(255, 220, 229)",
-    "rgb(255, 218, 246)",
-    "rgb(237, 226, 254)",
-  ]
 
   let open = false
 
@@ -34,7 +23,7 @@
     if (!value || index === -1) {
       return null
     }
-    return colors[index % colors.length]
+    return `hsla(${((index + 1) * 222) % 360}, 90%, 75%, 0.3)`
   }
 
   const toggle = () => {
@@ -107,7 +96,6 @@
     padding: 2px 8px;
     background: var(--color);
     border-radius: 8px;
-    color: #2c2c2c;
     user-select: none;
   }
   .options {

packages/client/src/components/app/spreadsheet/Spreadsheet.svelte

@@ -16,6 +16,7 @@
   const component = getContext("component")
   const limit = 100
   const defaultWidth = 200
+  const minWidth = 100
 
   let widths
   let hoveredRow
@@ -35,6 +36,7 @@
   })
   $: fields = Object.keys($fetch.schema || {})
   $: initWidths(fields)
+  $: sliderPositions = getSliderPositions(widths)
   $: gridStyles = getGridStyles(widths)
   $: schema = $fetch.schema
   $: rowCount = $fetch.rows?.length || 0
@@ -66,6 +68,13 @@
     return `--grid: 50px ${widths.map(x => `${x}px`).join(" ")} 180px;`
   }
 
+  const getSliderPositions = widths => {
+    let offset = 50
+    return widths.map(width => {
+      return (offset += width)
+    })
+  }
+
   const handleScroll = e => {
     const nextHorizontallyScrolled = e.target.scrollLeft > 0
     if (nextHorizontallyScrolled !== horizontallyScrolled) {
@@ -182,6 +191,28 @@
     })
     return sortedRows
   }
+
+  let resizeInitialX
+  let resizeInitialWidth
+  let resizeFieldIndex
+
+  const startResizing = (fieldIdx, e) => {
+    resizeInitialX = e.clientX
+    resizeInitialWidth = widths[fieldIdx]
+    resizeFieldIndex = fieldIdx
+    document.addEventListener("mousemove", onResize)
+    document.addEventListener("mouseup", stopResizing)
+  }
+
+  const onResize = e => {
+    const dx = e.clientX - resizeInitialX
+    widths[resizeFieldIndex] = Math.max(minWidth, resizeInitialWidth + dx)
+  }
+
+  const stopResizing = () => {
+    document.removeEventListener("mousemove", onResize)
+    document.removeEventListener("mouseup", stopResizing)
+  }
 </script>
 
 <div use:styleable={$component.styles}>
@@ -228,12 +259,23 @@
             name={getIconForField(field)}
             color="var(--spectrum-global-color-gray-600)"
           />
-          {field}
+          <span>
+            {field}
+          </span>
         </div>
       {/each}
       <!-- Horizontal spacer -->
       <div />
 
+      <!-- Sliders for resizing columns -->
+      {#each sliderPositions as left, idx}
+        <div
+          class="slider"
+          on:mousedown={e => startResizing(idx, e)}
+          style="--left: {left}px"
+        />
+      {/each}
+
       <!-- All real rows -->
       {#each rows as row, rowIdx (row._id)}
         {@const rowSelected = !!selectedRows[row._id]}
@@ -423,10 +465,40 @@
     z-index: 3;
     border-color: var(--spectrum-global-color-gray-400);
   }
+  .header span {
+    flex: 1 1 auto;
+    width: 0;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
   .header.sticky {
     z-index: 4;
   }
 
+  /* Column resizing */
+  .slider {
+    position: absolute;
+    z-index: 5;
+    left: var(--left);
+    top: 0;
+    width: 16px;
+    height: 32px;
+    transform: translateX(-50%);
+  }
+  .slider:hover:after {
+    content: " ";
+    position: absolute;
+    width: 2px;
+    left: 50%;
+    height: 100%;
+    background: var(--spectrum-global-color-blue-400);
+    transform: translateX(-50%);
+  }
+  .slider:hover {
+    cursor: col-resize;
+  }
+
   .sticky.shadow:after {
     content: " ";
     position: absolute;