Restore proper functionality for showing other users inside grids

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>

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}
               >

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()
       })

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)
         }