Fix issue with cell colors, improve row API interactions to avoid relationship issues due to API response differences

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

@@ -83,17 +83,18 @@
   textarea {
     padding: var(--cell-padding);
     margin: 0;
-    border: 2px solid var(--spectrum-global-color-blue-400);
+    border: 2px solid var(--cell-color);
     background: var(--cell-background);
     font-size: var(--cell-font-size);
     font-family: var(--font-sans);
     color: inherit;
     position: absolute;
-    top: -1px;
+    top: 0;
-    left: -1px;
+    left: 0;
     width: calc(100% + 100px);
     height: calc(5 * var(--row-height) + 1px);
     z-index: 1;
+    border-radius: 2px;
   }
   textarea.invert {
     transform: translateY(-100%);

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

@@ -52,7 +52,6 @@
     if (!row?._id) {
       return false
     }
-    console.log(lookupMap)
     return lookupMap?.[row._id] === true
   }
 

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

@@ -16,7 +16,7 @@
   const getStyle = (width, selectedUser) => {
     let style = `flex: 0 0 ${width}px;`
     if (selectedUser) {
-      style += `--user-color:${selectedUser.color};`
+      style += `--cell-color:${selectedUser.color};`
     }
     return style
   }
@@ -70,6 +70,7 @@
     background: var(--cell-background);
     position: relative;
     width: 0;
+    --cell-color: transparent;
   }
 
   /* Cell border */
@@ -82,7 +83,7 @@
     left: 0;
     height: 100%;
     width: 100%;
-    border: 2px solid transparent;
+    border: 2px solid var(--cell-color);
     pointer-events: none;
     border-radius: 2px;
     box-sizing: border-box;
@@ -106,11 +107,11 @@
   .cell.focused {
     z-index: 2;
   }
-  .cell.focused:after {
+  .cell.focused {
-    border-color: var(--spectrum-global-color-blue-400);
+    --cell-color: var(--spectrum-global-color-blue-400);
   }
-  .cell.error:after {
+  .cell.error {
-    border-color: var(--spectrum-global-color-red-500);
+    --cell-color: var(--spectrum-global-color-red-500);
   }
   .cell:not(.focused) {
     user-select: none;

packages/frontend-core/src/components/sheet/overlays/MenuOverlay.svelte

@@ -25,12 +25,12 @@
   }
 
   const duplicate = async () => {
+    menu.actions.close()
     const newRow = await rows.actions.duplicateRow($focusedRow)
     if (newRow) {
       const column = $stickyColumn?.name || $columns[0].name
       $focusedCellId = `${newRow._id}-${column}`
     }
-    menu.actions.close()
   }
 </script>
 

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

@@ -190,7 +190,8 @@ export const deriveStores = context => {
   const addRow = async (row, idx, bubble = false) => {
     try {
       // Create row
-      const newRow = await API.saveRow({ ...row, tableId: get(tableId) })
+      let newRow = await API.saveRow({ ...row, tableId: get(tableId) })
+      newRow = await fetchRow(newRow._id)
 
       // Update state
       if (idx != null) {
@@ -202,6 +203,8 @@ export const deriveStores = context => {
       } else {
         handleNewRows([newRow])
       }
+
+      // Refresh row to ensure data is in the correct format
       notifications.success("Row created successfully")
       return newRow
     } catch (error) {
@@ -220,26 +223,14 @@ export const deriveStores = context => {
     delete clone._rev
     delete clone.__idx
     try {
-      const newRow = await addRow(clone, row.__idx + 1, true)
+      return await addRow(clone, row.__idx + 1, true)
-
-      // We deliberately re-use the majority of the existing row as the API
-      // returns different metadata for relationships when saving a row compared
-      // to using the search endpoint. We always want data in the shape that the
-      // search endpoint returns it.
-      return {
-        ...row,
-        __idx: row.__idx + 1,
-        _id: newRow._id,
-        _rev: newRow._rev,
-      }
     } catch (error) {
       handleValidationError(row._id, error)
     }
   }
 
-  // Refreshes a specific row, handling updates, addition or deletion
+  // Fetches a row by ID using the search endpoint
-  const refreshRow = async id => {
+  const fetchRow = async id => {
-    // Fetch row from the server again
     const res = await API.searchTable({
       tableId: get(tableId),
       limit: 1,
@@ -250,7 +241,13 @@ export const deriveStores = context => {
       },
       paginate: false,
     })
-    let newRow = res?.rows?.[0]
+    return res?.rows?.[0]
+  }
+
+  // Refreshes a specific row, handling updates, addition or deletion
+  const refreshRow = async id => {
+    // Fetch row from the server again
+    const newRow = await fetchRow(id)
 
     // Get index of row to check if it exists
     const $rows = get(rows)
@@ -331,6 +328,10 @@ export const deriveStores = context => {
 
   // Deletes an array of rows
   const deleteRows = async rowsToDelete => {
+    if (!rowsToDelete?.length) {
+      return
+    }
+
     // Actually delete rows
     rowsToDelete.forEach(row => {
       delete row.__idx