From 5640b2fa89c215bf34f0923a95f586c5c361dd70 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 30 Mar 2023 09:19:39 +0100
Subject: [PATCH] Make sheet gutter width customisable

---
 .../frontend-core/src/components/index.js     |  2 +-
 .../src/components/sheet/SheetControls.svelte |  7 ---
 .../components/sheet/cells/DataCell.svelte    |  2 +-
 .../components/sheet/cells/HeaderCell.svelte  |  2 +-
 .../components/sheet/cells/OptionsCell.svelte |  2 +-
 .../sheet/cells/RelationshipCell.svelte       |  2 +-
 .../sheet/{ => controls}/AddRowButton.svelte  |  0
 .../sheet/{ => controls}/DeleteButton.svelte  |  0
 .../src/components/sheet/index.js             |  1 +
 .../sheet/{ => layout}/Avatar.svelte          |  0
 .../sheet/{ => layout}/HeaderRow.svelte       |  2 +-
 .../sheet/{ => layout}/NewRow.svelte          | 11 +++--
 .../sheet/{ => layout}/RowCount.svelte        |  0
 .../sheet/{ => layout}/Sheet.svelte           | 49 ++++++++++---------
 .../sheet/{ => layout}/SheetBody.svelte       |  0
 .../sheet/layout/SheetControls.svelte         |  7 +++
 .../sheet/{ => layout}/SheetRow.svelte        |  2 +-
 .../{ => layout}/SheetScrollWrapper.svelte    |  2 +-
 .../components/sheet/layout/SidePanel.svelte  | 20 ++++++++
 .../sheet/{ => layout}/StickyColumn.svelte    | 13 ++---
 .../sheet/{ => layout}/UserAvatars.svelte     |  0
 .../src/components/sheet/{ => lib}/events.js  |  0
 .../src/components/sheet/lib/renderers.js     | 29 +++++++++++
 .../src/components/sheet/{ => lib}/utils.js   |  0
 .../components/sheet/{ => lib}/websocket.js   |  0
 .../{ => overlays}/KeyboardManager.svelte     |  2 +-
 .../sheet/{ => overlays}/MenuOverlay.svelte   |  0
 .../sheet/{ => overlays}/ResizeOverlay.svelte |  7 +--
 .../sheet/{ => overlays}/ScrollOverlay.svelte |  5 +-
 .../src/components/sheet/renderers.js         | 29 -----------
 .../src/components/sheet/stores/columns.js    |  4 +-
 .../src/components/sheet/stores/max-scroll.js |  6 ++-
 .../src/components/sheet/stores/ui.js         |  2 +
 33 files changed, 120 insertions(+), 88 deletions(-)
 delete mode 100644 packages/frontend-core/src/components/sheet/SheetControls.svelte
 rename packages/frontend-core/src/components/sheet/{ => controls}/AddRowButton.svelte (100%)
 rename packages/frontend-core/src/components/sheet/{ => controls}/DeleteButton.svelte (100%)
 create mode 100644 packages/frontend-core/src/components/sheet/index.js
 rename packages/frontend-core/src/components/sheet/{ => layout}/Avatar.svelte (100%)
 rename packages/frontend-core/src/components/sheet/{ => layout}/HeaderRow.svelte (96%)
 rename packages/frontend-core/src/components/sheet/{ => layout}/NewRow.svelte (92%)
 rename packages/frontend-core/src/components/sheet/{ => layout}/RowCount.svelte (100%)
 rename packages/frontend-core/src/components/sheet/{ => layout}/Sheet.svelte (77%)
 rename packages/frontend-core/src/components/sheet/{ => layout}/SheetBody.svelte (100%)
 create mode 100644 packages/frontend-core/src/components/sheet/layout/SheetControls.svelte
 rename packages/frontend-core/src/components/sheet/{ => layout}/SheetRow.svelte (95%)
 rename packages/frontend-core/src/components/sheet/{ => layout}/SheetScrollWrapper.svelte (97%)
 create mode 100644 packages/frontend-core/src/components/sheet/layout/SidePanel.svelte
 rename packages/frontend-core/src/components/sheet/{ => layout}/StickyColumn.svelte (93%)
 rename packages/frontend-core/src/components/sheet/{ => layout}/UserAvatars.svelte (100%)
 rename packages/frontend-core/src/components/sheet/{ => lib}/events.js (100%)
 create mode 100644 packages/frontend-core/src/components/sheet/lib/renderers.js
 rename packages/frontend-core/src/components/sheet/{ => lib}/utils.js (100%)
 rename packages/frontend-core/src/components/sheet/{ => lib}/websocket.js (100%)
 rename packages/frontend-core/src/components/sheet/{ => overlays}/KeyboardManager.svelte (98%)
 rename packages/frontend-core/src/components/sheet/{ => overlays}/MenuOverlay.svelte (100%)
 rename packages/frontend-core/src/components/sheet/{ => overlays}/ResizeOverlay.svelte (89%)
 rename packages/frontend-core/src/components/sheet/{ => overlays}/ScrollOverlay.svelte (96%)
 delete mode 100644 packages/frontend-core/src/components/sheet/renderers.js

diff --git a/packages/frontend-core/src/components/index.js b/packages/frontend-core/src/components/index.js
index 8e5959ef14..f787d79072 100644
--- a/packages/frontend-core/src/components/index.js
+++ b/packages/frontend-core/src/components/index.js
@@ -1,3 +1,3 @@
 export { default as SplitPage } from "./SplitPage.svelte"
 export { default as TestimonialPage } from "./TestimonialPage.svelte"
-export { default as Sheet } from "./sheet/Sheet.svelte"
+export { Sheet } from "./sheet"
diff --git a/packages/frontend-core/src/components/sheet/SheetControls.svelte b/packages/frontend-core/src/components/sheet/SheetControls.svelte
deleted file mode 100644
index 562f8377e5..0000000000
--- a/packages/frontend-core/src/components/sheet/SheetControls.svelte
+++ /dev/null
@@ -1,7 +0,0 @@
-<script>
-  import SortButton from "./controls/SortButton.svelte"
-  import HideColumnsButton from "./controls/HideColumnsButton.svelte"
-</script>
-
-<HideColumnsButton />
-<SortButton />
diff --git a/packages/frontend-core/src/components/sheet/cells/DataCell.svelte b/packages/frontend-core/src/components/sheet/cells/DataCell.svelte
index 985a740c66..e68a10ebc4 100644
--- a/packages/frontend-core/src/components/sheet/cells/DataCell.svelte
+++ b/packages/frontend-core/src/components/sheet/cells/DataCell.svelte
@@ -1,7 +1,7 @@
 <script>
   import { getContext } from "svelte"
   import SheetCell from "./SheetCell.svelte"
-  import { getCellRenderer } from "../renderers"
+  import { getCellRenderer } from "../lib/renderers"
 
   const { rows, selectedCellId, menu, selectedCellAPI } = getContext("sheet")
 
diff --git a/packages/frontend-core/src/components/sheet/cells/HeaderCell.svelte b/packages/frontend-core/src/components/sheet/cells/HeaderCell.svelte
index 68543ce052..ff9938d38d 100644
--- a/packages/frontend-core/src/components/sheet/cells/HeaderCell.svelte
+++ b/packages/frontend-core/src/components/sheet/cells/HeaderCell.svelte
@@ -2,7 +2,7 @@
   import { getContext } from "svelte"
   import SheetCell from "./SheetCell.svelte"
   import { Icon, Popover, Menu, MenuItem } from "@budibase/bbui"
-  import { getColumnIcon } from "../utils"
+  import { getColumnIcon } from "../lib/utils"
 
   export let column
   export let idx
diff --git a/packages/frontend-core/src/components/sheet/cells/OptionsCell.svelte b/packages/frontend-core/src/components/sheet/cells/OptionsCell.svelte
index d7837eff91..3f1a76e824 100644
--- a/packages/frontend-core/src/components/sheet/cells/OptionsCell.svelte
+++ b/packages/frontend-core/src/components/sheet/cells/OptionsCell.svelte
@@ -1,6 +1,6 @@
 <script>
   import { Icon } from "@budibase/bbui"
-  import { getColor } from "../utils"
+  import { getColor } from "../lib/utils"
   import { onMount } from "svelte"
 
   export let value
diff --git a/packages/frontend-core/src/components/sheet/cells/RelationshipCell.svelte b/packages/frontend-core/src/components/sheet/cells/RelationshipCell.svelte
index 1f2aa02878..f223bc1ffa 100644
--- a/packages/frontend-core/src/components/sheet/cells/RelationshipCell.svelte
+++ b/packages/frontend-core/src/components/sheet/cells/RelationshipCell.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { getColor } from "../utils"
+  import { getColor } from "../lib/utils"
   import { onMount, getContext } from "svelte"
   import { Icon, Input } from "@budibase/bbui"
   import { debounce } from "../../../utils/utils"
diff --git a/packages/frontend-core/src/components/sheet/AddRowButton.svelte b/packages/frontend-core/src/components/sheet/controls/AddRowButton.svelte
similarity index 100%
rename from packages/frontend-core/src/components/sheet/AddRowButton.svelte
rename to packages/frontend-core/src/components/sheet/controls/AddRowButton.svelte
diff --git a/packages/frontend-core/src/components/sheet/DeleteButton.svelte b/packages/frontend-core/src/components/sheet/controls/DeleteButton.svelte
similarity index 100%
rename from packages/frontend-core/src/components/sheet/DeleteButton.svelte
rename to packages/frontend-core/src/components/sheet/controls/DeleteButton.svelte
diff --git a/packages/frontend-core/src/components/sheet/index.js b/packages/frontend-core/src/components/sheet/index.js
new file mode 100644
index 0000000000..6856299ddc
--- /dev/null
+++ b/packages/frontend-core/src/components/sheet/index.js
@@ -0,0 +1 @@
+export { default as Sheet } from "./layout/Sheet.svelte"
diff --git a/packages/frontend-core/src/components/sheet/Avatar.svelte b/packages/frontend-core/src/components/sheet/layout/Avatar.svelte
similarity index 100%
rename from packages/frontend-core/src/components/sheet/Avatar.svelte
rename to packages/frontend-core/src/components/sheet/layout/Avatar.svelte
diff --git a/packages/frontend-core/src/components/sheet/HeaderRow.svelte b/packages/frontend-core/src/components/sheet/layout/HeaderRow.svelte
similarity index 96%
rename from packages/frontend-core/src/components/sheet/HeaderRow.svelte
rename to packages/frontend-core/src/components/sheet/layout/HeaderRow.svelte
index bcd1393f73..5e47887d21 100644
--- a/packages/frontend-core/src/components/sheet/HeaderRow.svelte
+++ b/packages/frontend-core/src/components/sheet/layout/HeaderRow.svelte
@@ -1,7 +1,7 @@
 <script>
   import { getContext } from "svelte"
   import SheetScrollWrapper from "./SheetScrollWrapper.svelte"
-  import HeaderCell from "./cells/HeaderCell.svelte"
+  import HeaderCell from "../cells/HeaderCell.svelte"
   import { Icon } from "@budibase/bbui"
 
   const { renderedColumns, dispatch, config, ui } = getContext("sheet")
diff --git a/packages/frontend-core/src/components/sheet/NewRow.svelte b/packages/frontend-core/src/components/sheet/layout/NewRow.svelte
similarity index 92%
rename from packages/frontend-core/src/components/sheet/NewRow.svelte
rename to packages/frontend-core/src/components/sheet/layout/NewRow.svelte
index 6347ab5982..8674ed1335 100644
--- a/packages/frontend-core/src/components/sheet/NewRow.svelte
+++ b/packages/frontend-core/src/components/sheet/layout/NewRow.svelte
@@ -1,9 +1,9 @@
 <script>
-  import SheetCell from "./cells/SheetCell.svelte"
+  import SheetCell from "../cells/SheetCell.svelte"
   import { getContext } from "svelte"
   import { Icon } from "@budibase/bbui"
   import SheetScrollWrapper from "./SheetScrollWrapper.svelte"
-  import { getCellRenderer } from "./renderers"
+  import { getCellRenderer } from "../lib/renderers"
 
   const {
     renderedColumns,
@@ -12,13 +12,14 @@
     selectedCellId,
     reorder,
     stickyColumn,
+    gutterWidth,
   } = getContext("sheet")
 
   let isAdding = false
   let newRow = {}
 
   $: rowHovered = $hoveredRowId === "new"
-  $: width = 40 + ($stickyColumn?.width || 0)
+  $: width = gutterWidth + ($stickyColumn?.width || 0)
 
   const addRow = async field => {
     // const newRow = await rows.actions.addRow()
@@ -48,7 +49,7 @@
     </div>
   {:else}
     <div class="sticky" style="flex: 0 0 {width}px">
-      <SheetCell width="40" center>
+      <SheetCell width={gutterWidth} center>
         <Icon name="Add" size="S" />
       </SheetCell>
       {#if $stickyColumn}
@@ -116,7 +117,7 @@
     background: var(--cell-background-hover);
   }
   .add .icon {
-    flex: 0 0 40px;
+    flex: 0 0 var(--gutter-width);
     display: grid;
     place-items: center;
   }
diff --git a/packages/frontend-core/src/components/sheet/RowCount.svelte b/packages/frontend-core/src/components/sheet/layout/RowCount.svelte
similarity index 100%
rename from packages/frontend-core/src/components/sheet/RowCount.svelte
rename to packages/frontend-core/src/components/sheet/layout/RowCount.svelte
diff --git a/packages/frontend-core/src/components/sheet/Sheet.svelte b/packages/frontend-core/src/components/sheet/layout/Sheet.svelte
similarity index 77%
rename from packages/frontend-core/src/components/sheet/Sheet.svelte
rename to packages/frontend-core/src/components/sheet/layout/Sheet.svelte
index a8187d5e1d..c4e6ef8aff 100644
--- a/packages/frontend-core/src/components/sheet/Sheet.svelte
+++ b/packages/frontend-core/src/components/sheet/layout/Sheet.svelte
@@ -1,33 +1,33 @@
 <script>
-  import { setContext, onMount } from "svelte"
+  import { setContext } from "svelte"
   import { writable } from "svelte/store"
-  import { createEventManagers } from "./events"
-  import { createAPIClient } from "../../api"
-  import { createReorderStores } from "./stores/reorder"
-  import { createViewportStores } from "./stores/viewport"
-  import { createRowsStore } from "./stores/rows"
-  import { createColumnsStores } from "./stores/columns"
-  import { createScrollStores } from "./stores/scroll"
-  import { createBoundsStores } from "./stores/bounds"
-  import { createUIStores } from "./stores/ui"
-  import { createUserStores } from "./stores/users"
-  import { createWebsocket } from "./websocket"
-  import { createResizeStores } from "./stores/resize"
-  import { createMenuStores } from "./stores/menu"
-  import { createMaxScrollStores } from "./stores/max-scroll"
-  import { createPaginationStores } from "./stores/pagination"
-  import DeleteButton from "./DeleteButton.svelte"
+  import { createEventManagers } from "../lib/events"
+  import { createAPIClient } from "../../../api"
+  import { createReorderStores } from "../stores/reorder"
+  import { createViewportStores } from "../stores/viewport"
+  import { createRowsStore } from "../stores/rows"
+  import { createColumnsStores } from "../stores/columns"
+  import { createScrollStores } from "../stores/scroll"
+  import { createBoundsStores } from "../stores/bounds"
+  import { createUIStores } from "../stores/ui"
+  import { createUserStores } from "../stores/users"
+  import { createResizeStores } from "../stores/resize"
+  import { createMenuStores } from "../stores/menu"
+  import { createMaxScrollStores } from "../stores/max-scroll"
+  import { createPaginationStores } from "../stores/pagination"
+  import DeleteButton from "../controls/DeleteButton.svelte"
   import SheetBody from "./SheetBody.svelte"
-  import ResizeOverlay from "./ResizeOverlay.svelte"
+  import ResizeOverlay from "../overlays/ResizeOverlay.svelte"
   import HeaderRow from "./HeaderRow.svelte"
-  import ScrollOverlay from "./ScrollOverlay.svelte"
-  import MenuOverlay from "./MenuOverlay.svelte"
+  import ScrollOverlay from "../overlays/ScrollOverlay.svelte"
+  import MenuOverlay from "../overlays/MenuOverlay.svelte"
   import StickyColumn from "./StickyColumn.svelte"
   import UserAvatars from "./UserAvatars.svelte"
-  import KeyboardManager from "./KeyboardManager.svelte"
+  import KeyboardManager from "../overlays/KeyboardManager.svelte"
   import { clickOutside } from "@budibase/bbui"
-  import AddRowButton from "./AddRowButton.svelte"
+  import AddRowButton from "../controls/AddRowButton.svelte"
   import SheetControls from "./SheetControls.svelte"
+  import SidePanel from "./SidePanel.svelte"
 
   export let API
   export let tableId
@@ -38,6 +38,7 @@
 
   // Sheet constants
   const cellHeight = 36
+  const gutterWidth = 80
   const rand = Math.random()
 
   // State stores
@@ -55,6 +56,7 @@
     API: API || createAPIClient(),
     rand,
     cellHeight,
+    gutterWidth,
     config,
   }
   context = { ...context, ...createEventManagers() }
@@ -98,7 +100,7 @@
   id="sheet-{rand}"
   class:is-resizing={$isResizing}
   class:is-reordering={$isReordering}
-  style="--cell-height:{cellHeight}px;"
+  style="--cell-height:{cellHeight}px; --gutter-width:{gutterWidth}px;"
 >
   <div class="controls">
     <div class="controls-left">
@@ -125,6 +127,7 @@
       {/if}
     </div>
   {/if}
+  <SidePanel />
   <KeyboardManager />
 </div>
 
diff --git a/packages/frontend-core/src/components/sheet/SheetBody.svelte b/packages/frontend-core/src/components/sheet/layout/SheetBody.svelte
similarity index 100%
rename from packages/frontend-core/src/components/sheet/SheetBody.svelte
rename to packages/frontend-core/src/components/sheet/layout/SheetBody.svelte
diff --git a/packages/frontend-core/src/components/sheet/layout/SheetControls.svelte b/packages/frontend-core/src/components/sheet/layout/SheetControls.svelte
new file mode 100644
index 0000000000..1a6acfb58f
--- /dev/null
+++ b/packages/frontend-core/src/components/sheet/layout/SheetControls.svelte
@@ -0,0 +1,7 @@
+<script>
+  import SortButton from "../controls/SortButton.svelte"
+  import HideColumnsButton from "../controls/HideColumnsButton.svelte"
+</script>
+
+<HideColumnsButton />
+<SortButton />
diff --git a/packages/frontend-core/src/components/sheet/SheetRow.svelte b/packages/frontend-core/src/components/sheet/layout/SheetRow.svelte
similarity index 95%
rename from packages/frontend-core/src/components/sheet/SheetRow.svelte
rename to packages/frontend-core/src/components/sheet/layout/SheetRow.svelte
index 7c3f708f42..ae42af6494 100644
--- a/packages/frontend-core/src/components/sheet/SheetRow.svelte
+++ b/packages/frontend-core/src/components/sheet/layout/SheetRow.svelte
@@ -1,6 +1,6 @@
 <script>
   import { getContext } from "svelte"
-  import DataCell from "./cells/DataCell.svelte"
+  import DataCell from "../cells/DataCell.svelte"
 
   export let row
   export let idx
diff --git a/packages/frontend-core/src/components/sheet/SheetScrollWrapper.svelte b/packages/frontend-core/src/components/sheet/layout/SheetScrollWrapper.svelte
similarity index 97%
rename from packages/frontend-core/src/components/sheet/SheetScrollWrapper.svelte
rename to packages/frontend-core/src/components/sheet/layout/SheetScrollWrapper.svelte
index ab39b01fa0..546bda2630 100644
--- a/packages/frontend-core/src/components/sheet/SheetScrollWrapper.svelte
+++ b/packages/frontend-core/src/components/sheet/layout/SheetScrollWrapper.svelte
@@ -1,6 +1,6 @@
 <script>
   import { getContext } from "svelte"
-  import { domDebounce } from "../../utils/utils"
+  import { domDebounce } from "../../../utils/utils"
 
   const {
     cellHeight,
diff --git a/packages/frontend-core/src/components/sheet/layout/SidePanel.svelte b/packages/frontend-core/src/components/sheet/layout/SidePanel.svelte
new file mode 100644
index 0000000000..abdd51c622
--- /dev/null
+++ b/packages/frontend-core/src/components/sheet/layout/SidePanel.svelte
@@ -0,0 +1,20 @@
+<script>
+  import { getContext } from "svelte"
+
+  const { sidePanelRowId } = getContext("sheet")
+
+  $: visible = $sidePanelRowId != null
+</script>
+
+<div class="side-panel" class:visible>some content</div>
+
+<style>
+  .side-panel {
+    width: 320px;
+    transform: translateX(100%);
+    transition: transform 130ms ease-out;
+  }
+  .side-panel.visible {
+    transform: translateX(0);
+  }
+</style>
diff --git a/packages/frontend-core/src/components/sheet/StickyColumn.svelte b/packages/frontend-core/src/components/sheet/layout/StickyColumn.svelte
similarity index 93%
rename from packages/frontend-core/src/components/sheet/StickyColumn.svelte
rename to packages/frontend-core/src/components/sheet/layout/StickyColumn.svelte
index c8d0fbbe59..446bea4f87 100644
--- a/packages/frontend-core/src/components/sheet/StickyColumn.svelte
+++ b/packages/frontend-core/src/components/sheet/layout/StickyColumn.svelte
@@ -1,10 +1,10 @@
 <script>
   import { getContext } from "svelte"
   import { Checkbox } from "@budibase/bbui"
-  import SheetCell from "./cells/SheetCell.svelte"
-  import DataCell from "./cells/DataCell.svelte"
+  import SheetCell from "../cells/SheetCell.svelte"
+  import DataCell from "../cells/DataCell.svelte"
   import SheetScrollWrapper from "./SheetScrollWrapper.svelte"
-  import HeaderCell from "./cells/HeaderCell.svelte"
+  import HeaderCell from "../cells/HeaderCell.svelte"
 
   const {
     rows,
@@ -18,12 +18,13 @@
     config,
     selectedCellMap,
     selectedCellRow,
+    gutterWidth,
   } = getContext("sheet")
 
   $: scrollLeft = $scroll.left
   $: rowCount = $rows.length
   $: selectedRowCount = Object.values($selectedRows).filter(x => !!x).length
-  $: width = 40 + ($stickyColumn?.width || 0)
+  $: width = gutterWidth + ($stickyColumn?.width || 0)
 
   const selectAll = () => {
     const allSelected = selectedRowCount === rowCount
@@ -59,7 +60,7 @@
 >
   <div class="header row">
     <SheetCell
-      width="40"
+      width={gutterWidth}
       on:click={$config.allowSelectRows && selectAll}
       center
     >
@@ -90,7 +91,7 @@
           <SheetCell
             rowSelected={rowSelected || containsSelectedRow}
             {rowHovered}
-            width="40"
+            width={gutterWidth}
             center
           >
             <div
diff --git a/packages/frontend-core/src/components/sheet/UserAvatars.svelte b/packages/frontend-core/src/components/sheet/layout/UserAvatars.svelte
similarity index 100%
rename from packages/frontend-core/src/components/sheet/UserAvatars.svelte
rename to packages/frontend-core/src/components/sheet/layout/UserAvatars.svelte
diff --git a/packages/frontend-core/src/components/sheet/events.js b/packages/frontend-core/src/components/sheet/lib/events.js
similarity index 100%
rename from packages/frontend-core/src/components/sheet/events.js
rename to packages/frontend-core/src/components/sheet/lib/events.js
diff --git a/packages/frontend-core/src/components/sheet/lib/renderers.js b/packages/frontend-core/src/components/sheet/lib/renderers.js
new file mode 100644
index 0000000000..104984ca4e
--- /dev/null
+++ b/packages/frontend-core/src/components/sheet/lib/renderers.js
@@ -0,0 +1,29 @@
+import OptionsCell from "../cells/OptionsCell.svelte"
+import DateCell from "../cells/DateCell.svelte"
+import MultiSelectCell from "../cells/MultiSelectCell.svelte"
+import NumberCell from "../cells/NumberCell.svelte"
+import RelationshipCell from "../cells/RelationshipCell.svelte"
+import TextCell from "../cells/TextCell.svelte"
+import LongFormCell from "../cells/LongFormCell.svelte"
+import BooleanCell from "../cells/BooleanCell.svelte"
+import FormulaCell from "../cells/FormulaCell.svelte"
+import JSONCell from "../cells/JSONCell.svelte"
+import AttachmentCell from "../cells/AttachmentCell.svelte"
+
+const TypeComponentMap = {
+  text: TextCell,
+  options: OptionsCell,
+  datetime: DateCell,
+  barcodeqr: TextCell,
+  longform: LongFormCell,
+  array: MultiSelectCell,
+  number: NumberCell,
+  boolean: BooleanCell,
+  attachment: AttachmentCell,
+  link: RelationshipCell,
+  formula: FormulaCell,
+  json: JSONCell,
+}
+export const getCellRenderer = column => {
+  return TypeComponentMap[column?.schema?.type] || TextCell
+}
diff --git a/packages/frontend-core/src/components/sheet/utils.js b/packages/frontend-core/src/components/sheet/lib/utils.js
similarity index 100%
rename from packages/frontend-core/src/components/sheet/utils.js
rename to packages/frontend-core/src/components/sheet/lib/utils.js
diff --git a/packages/frontend-core/src/components/sheet/websocket.js b/packages/frontend-core/src/components/sheet/lib/websocket.js
similarity index 100%
rename from packages/frontend-core/src/components/sheet/websocket.js
rename to packages/frontend-core/src/components/sheet/lib/websocket.js
diff --git a/packages/frontend-core/src/components/sheet/KeyboardManager.svelte b/packages/frontend-core/src/components/sheet/overlays/KeyboardManager.svelte
similarity index 98%
rename from packages/frontend-core/src/components/sheet/KeyboardManager.svelte
rename to packages/frontend-core/src/components/sheet/overlays/KeyboardManager.svelte
index 3e85261155..008bd513d6 100644
--- a/packages/frontend-core/src/components/sheet/KeyboardManager.svelte
+++ b/packages/frontend-core/src/components/sheet/overlays/KeyboardManager.svelte
@@ -1,6 +1,6 @@
 <script>
   import { getContext, onMount } from "svelte"
-  import { debounce } from "../../utils/utils"
+  import { debounce } from "../../../utils/utils"
 
   const {
     rows,
diff --git a/packages/frontend-core/src/components/sheet/MenuOverlay.svelte b/packages/frontend-core/src/components/sheet/overlays/MenuOverlay.svelte
similarity index 100%
rename from packages/frontend-core/src/components/sheet/MenuOverlay.svelte
rename to packages/frontend-core/src/components/sheet/overlays/MenuOverlay.svelte
diff --git a/packages/frontend-core/src/components/sheet/ResizeOverlay.svelte b/packages/frontend-core/src/components/sheet/overlays/ResizeOverlay.svelte
similarity index 89%
rename from packages/frontend-core/src/components/sheet/ResizeOverlay.svelte
rename to packages/frontend-core/src/components/sheet/overlays/ResizeOverlay.svelte
index f3d308bded..929ae0a23e 100644
--- a/packages/frontend-core/src/components/sheet/ResizeOverlay.svelte
+++ b/packages/frontend-core/src/components/sheet/overlays/ResizeOverlay.svelte
@@ -8,11 +8,12 @@
     renderedColumns,
     stickyColumn,
     isReordering,
+    gutterWidth,
   } = getContext("sheet")
 
   $: scrollLeft = $scroll.left
-  $: cutoff = scrollLeft + 40 + ($columns[0]?.width || 0)
-  $: offset = 40 + ($stickyColumn?.width || 0)
+  $: cutoff = scrollLeft + gutterWidth + ($columns[0]?.width || 0)
+  $: offset = gutterWidth + ($stickyColumn?.width || 0)
   $: column = $resize.column
 
   const getStyle = (column, offset, scrollLeft) => {
@@ -28,7 +29,7 @@
       class:visible={column === $stickyColumn.name}
       on:mousedown={e => resize.actions.startResizing($stickyColumn, e)}
       on:dblclick={() => resize.actions.resetSize($stickyColumn)}
-      style="left:{40 + $stickyColumn.width}px;"
+      style="left:{gutterWidth + $stickyColumn.width}px;"
     >
       <div class="resize-indicator" />
     </div>
diff --git a/packages/frontend-core/src/components/sheet/ScrollOverlay.svelte b/packages/frontend-core/src/components/sheet/overlays/ScrollOverlay.svelte
similarity index 96%
rename from packages/frontend-core/src/components/sheet/ScrollOverlay.svelte
rename to packages/frontend-core/src/components/sheet/overlays/ScrollOverlay.svelte
index 79b663f385..623d811dd8 100644
--- a/packages/frontend-core/src/components/sheet/ScrollOverlay.svelte
+++ b/packages/frontend-core/src/components/sheet/overlays/ScrollOverlay.svelte
@@ -1,6 +1,6 @@
 <script>
   import { getContext } from "svelte"
-  import { domDebounce } from "../../utils/utils"
+  import { domDebounce } from "../../../utils/utils"
 
   const {
     scroll,
@@ -11,6 +11,7 @@
     maxScrollTop,
     contentWidth,
     maxScrollLeft,
+    gutterWidth,
   } = getContext("sheet")
 
   // Bar config
@@ -36,7 +37,7 @@
   $: barTop = barOffset + cellHeight + availHeight * (scrollTop / $maxScrollTop)
 
   // Calculate H scrollbar size and offset
-  $: totalWidth = width + 40 + ($stickyColumn?.width || 0)
+  $: totalWidth = width + gutterWidth + ($stickyColumn?.width || 0)
   $: renderWidth = totalWidth - 2 * barOffset
   $: barWidth = Math.max(50, (totalWidth / $contentWidth) * renderWidth)
   $: availWidth = renderWidth - barWidth
diff --git a/packages/frontend-core/src/components/sheet/renderers.js b/packages/frontend-core/src/components/sheet/renderers.js
deleted file mode 100644
index 3401ff605a..0000000000
--- a/packages/frontend-core/src/components/sheet/renderers.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import OptionsCell from "./cells/OptionsCell.svelte"
-import DateCell from "./cells/DateCell.svelte"
-import MultiSelectCell from "./cells/MultiSelectCell.svelte"
-import NumberCell from "./cells/NumberCell.svelte"
-import RelationshipCell from "./cells/RelationshipCell.svelte"
-import TextCell from "./cells/TextCell.svelte"
-import LongFormCell from "./cells/LongFormCell.svelte"
-import BooleanCell from "./cells/BooleanCell.svelte"
-import FormulaCell from "./cells/FormulaCell.svelte"
-import JSONCell from "./cells/JSONCell.svelte"
-import AttachmentCell from "./cells/AttachmentCell.svelte"
-
-const TypeComponentMap = {
-  text: TextCell,
-  options: OptionsCell,
-  datetime: DateCell,
-  barcodeqr: TextCell,
-  longform: LongFormCell,
-  array: MultiSelectCell,
-  number: NumberCell,
-  boolean: BooleanCell,
-  attachment: AttachmentCell,
-  link: RelationshipCell,
-  formula: FormulaCell,
-  json: JSONCell,
-}
-export const getCellRenderer = column => {
-  return TypeComponentMap[column?.schema?.type] || TextCell
-}
diff --git a/packages/frontend-core/src/components/sheet/stores/columns.js b/packages/frontend-core/src/components/sheet/stores/columns.js
index ffebe58f63..ae2283a8de 100644
--- a/packages/frontend-core/src/components/sheet/stores/columns.js
+++ b/packages/frontend-core/src/components/sheet/stores/columns.js
@@ -3,7 +3,7 @@ import { derived, get, writable } from "svelte/store"
 export const DefaultColumnWidth = 200
 
 export const createColumnsStores = context => {
-  const { table } = context
+  const { table, gutterWidth } = context
   const columns = writable([])
   const stickyColumn = writable(null)
 
@@ -93,7 +93,7 @@ export const createColumnsStores = context => {
     stickyColumn.set({
       name: primaryDisplay,
       width: existing?.width || DefaultColumnWidth,
-      left: 40,
+      left: gutterWidth,
       schema: schema[primaryDisplay],
       idx: "sticky",
     })
diff --git a/packages/frontend-core/src/components/sheet/stores/max-scroll.js b/packages/frontend-core/src/components/sheet/stores/max-scroll.js
index 1c382a264c..0665ba31b2 100644
--- a/packages/frontend-core/src/components/sheet/stores/max-scroll.js
+++ b/packages/frontend-core/src/components/sheet/stores/max-scroll.js
@@ -10,6 +10,7 @@ export const createMaxScrollStores = context => {
     scroll,
     selectedCellRow,
     selectedCellId,
+    gutterWidth,
   } = context
   const padding = 255
 
@@ -35,7 +36,7 @@ export const createMaxScrollStores = context => {
   const contentWidth = derived(
     [visibleColumns, stickyColumn],
     ([$visibleColumns, $stickyColumn]) => {
-      let width = 40 + padding + ($stickyColumn?.width || 0)
+      let width = gutterWidth + padding + ($stickyColumn?.width || 0)
       $visibleColumns.forEach(col => {
         width += col.width
       })
@@ -45,7 +46,8 @@ export const createMaxScrollStores = context => {
   )
   const screenWidth = derived(
     [width, stickyColumn],
-    ([$width, $stickyColumn]) => $width + 40 + ($stickyColumn?.width || 0),
+    ([$width, $stickyColumn]) =>
+      $width + gutterWidth + ($stickyColumn?.width || 0),
     0
   )
   const maxScrollLeft = derived(
diff --git a/packages/frontend-core/src/components/sheet/stores/ui.js b/packages/frontend-core/src/components/sheet/stores/ui.js
index 427a6be694..21ed912c58 100644
--- a/packages/frontend-core/src/components/sheet/stores/ui.js
+++ b/packages/frontend-core/src/components/sheet/stores/ui.js
@@ -6,6 +6,7 @@ export const createUIStores = context => {
   const selectedRows = writable({})
   const hoveredRowId = writable(null)
   const selectedCellAPI = writable(null)
+  const sidePanelRowId = writable(null)
 
   // Derive the row that contains the selected cell.
   const selectedCellRow = derived(
@@ -92,6 +93,7 @@ export const createUIStores = context => {
     hoveredRowId,
     selectedCellRow,
     selectedCellAPI,
+    sidePanelRowId,
     ui: {
       actions: {
         blur,