From 46d8ad286489a38321cc8cc2fe205321204e00fe Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 15 May 2023 14:51:54 +0100
Subject: [PATCH] Restore proper functionality for showing other users inside
 grids

---
 .../src/components/grid/cells/GridCell.svelte        | 12 +++++++++---
 .../src/components/grid/layout/NewRow.svelte         |  2 +-
 .../src/components/grid/stores/users.js              |  4 ++--
 packages/server/src/websockets/grid.ts               |  2 +-
 4 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/packages/frontend-core/src/components/grid/cells/GridCell.svelte b/packages/frontend-core/src/components/grid/cells/GridCell.svelte
index 6589c18d07..d5e96c3ec4 100644
--- a/packages/frontend-core/src/components/grid/cells/GridCell.svelte
+++ b/packages/frontend-core/src/components/grid/cells/GridCell.svelte
@@ -112,10 +112,10 @@
     z-index: 2;
   }
   .cell.focused {
-    --cell-color: var(--spectrum-global-color-blue-400);
+    --cell-color: var(--spectrum-global-color-blue-400) !important;
   }
   .cell.error {
-    --cell-color: var(--spectrum-global-color-red-500);
+    --cell-color: var(--spectrum-global-color-red-500) !important;
   }
   .cell.readonly {
     --cell-color: var(--spectrum-global-color-gray-600);
@@ -141,7 +141,7 @@
     left: 0;
     padding: 1px 4px 3px 4px;
     margin: 0 0 -2px 0;
-    background: var(--user-color);
+    background: var(--cell-color);
     border-radius: 2px;
     display: block;
     color: white;
@@ -162,4 +162,10 @@
   .error .label {
     background: var(--spectrum-global-color-red-500);
   }
+  .selected-other:not(.error) .label {
+    display: none;
+  }
+  .selected-other:not(.error):hover .label {
+    display: block;
+  }
 </style>
diff --git a/packages/frontend-core/src/components/grid/layout/NewRow.svelte b/packages/frontend-core/src/components/grid/layout/NewRow.svelte
index 8048a4e2fa..97a31e743a 100644
--- a/packages/frontend-core/src/components/grid/layout/NewRow.svelte
+++ b/packages/frontend-core/src/components/grid/layout/NewRow.svelte
@@ -193,7 +193,7 @@
                 row={newRow}
                 focused={$focusedCellId === cellId}
                 width={column.width}
-                rowIdx={0}
+                rowIdx={offset === 0 ? 0 : 1}
                 invertX={columnIdx >= $columnHorizontalInversionIndex}
                 {invertY}
               >
diff --git a/packages/frontend-core/src/components/grid/stores/users.js b/packages/frontend-core/src/components/grid/stores/users.js
index 3a6ec5fb21..4cf4bdac52 100644
--- a/packages/frontend-core/src/components/grid/stores/users.js
+++ b/packages/frontend-core/src/components/grid/stores/users.js
@@ -85,11 +85,11 @@ export const deriveStores = context => {
 
   const updateUser = user => {
     const $users = get(users)
-    const index = $users.findIndex(x => x.id === user.id)
-    if (index === -1) {
+    if (!$users.some(x => x.id === user.id)) {
       users.set([...$users, user])
     } else {
       users.update(state => {
+        const index = state.findIndex(x => x.id === user.id)
         state[index] = user
         return state.slice()
       })
diff --git a/packages/server/src/websockets/grid.ts b/packages/server/src/websockets/grid.ts
index bb23ec8e18..4fb81e006c 100644
--- a/packages/server/src/websockets/grid.ts
+++ b/packages/server/src/websockets/grid.ts
@@ -40,7 +40,7 @@ export default class GridSocket extends Socket {
 
       // Handle users selecting a new cell
       socket.on("select-cell", cellId => {
-        socket.data.user.selectedCellId = cellId
+        socket.data.user.focusedCellId = cellId
         if (currentRoom) {
           socket.to(currentRoom).emit("user-update", socket.data.user)
         }