ui + shared user improvements

frontend/components/editor/live/avatars.tsx

@@ -1,33 +1,39 @@
 "use client"
 
-import { colorClasses, colors } from "@/lib/colors"
 import { useOthers } from "@/liveblocks.config"
-import { useState } from "react"
+
+const classNames = {
+  red: "w-8 h-8 leading-none font-mono rounded-full ring-1 ring-red-700 ring-offset-2 ring-offset-background overflow-hidden bg-gradient-to-tr from-red-950 to-red-600 flex items-center justify-center text-xs font-medium",
+  orange:
+    "w-8 h-8 leading-none font-mono rounded-full ring-1 ring-orange-700 ring-offset-2 ring-offset-background overflow-hidden bg-gradient-to-tr from-orange-950 to-orange-600 flex items-center justify-center text-xs font-medium",
+  yellow:
+    "w-8 h-8 leading-none font-mono rounded-full ring-1 ring-yellow-700 ring-offset-2 ring-offset-background overflow-hidden bg-gradient-to-tr from-yellow-950 to-yellow-600 flex items-center justify-center text-xs font-medium",
+  green:
+    "w-8 h-8 leading-none font-mono rounded-full ring-1 ring-green-700 ring-offset-2 ring-offset-background overflow-hidden bg-gradient-to-tr from-green-950 to-green-600 flex items-center justify-center text-xs font-medium",
+  blue: "w-8 h-8 leading-none font-mono rounded-full ring-1 ring-blue-700 ring-offset-2 ring-offset-background overflow-hidden bg-gradient-to-tr from-blue-950 to-blue-600 flex items-center justify-center text-xs font-medium",
+  purple:
+    "w-8 h-8 leading-none font-mono rounded-full ring-1 ring-purple-700 ring-offset-2 ring-offset-background overflow-hidden bg-gradient-to-tr from-purple-950 to-purple-600 flex items-center justify-center text-xs font-medium",
+  pink: "w-8 h-8 leading-none font-mono rounded-full ring-1 ring-pink-700 ring-offset-2 ring-offset-background overflow-hidden bg-gradient-to-tr from-pink-950 to-pink-600 flex items-center justify-center text-xs font-medium",
+}
 
 export function Avatars() {
   const users = useOthers()
 
-  const colorNames = Object.keys(colors)
-  const [activeColors, setActiveColors] = useState([])
-
   return (
-    <div className="flex space-x-2">
-      {users.map(({ connectionId, info }) => {
-        const c = colorNames[
-          connectionId % colorNames.length
-        ] as keyof typeof colors
-
-        return (
-          <div
-            className={`w-8 h-8 font-mono rounded-full ring-1 ${colorClasses[c].ring} ring-offset-2 ring-offset-background overflow-hidden bg-gradient-to-tr ${colorClasses[c].bg} flex items-center justify-center text-xs font-medium`}
-          >
-            {info.name
-              .split(" ")
-              .slice(0, 2)
-              .map((letter) => letter[0].toUpperCase())}
-          </div>
-        )
-      })}
-    </div>
+    <>
+      <div className="flex space-x-2">
+        {users.map(({ connectionId, info }) => {
+          return (
+            <div className={classNames[info.color]}>
+              {info.name
+                .split(" ")
+                .slice(0, 2)
+                .map((letter) => letter[0].toUpperCase())}
+            </div>
+          )
+        })}
+      </div>
+      <div className="h-full w-[1px] bg-border mx-2" />
+    </>
   )
 }

frontend/components/editor/live/cursors.tsx

@@ -5,11 +5,14 @@ import {
   UserAwareness,
   useSelf,
 } from "@/liveblocks.config"
+import { colors } from "@/lib/colors"
 
 export function Cursors({ yProvider }: { yProvider: TypedLiveblocksProvider }) {
   // Get user info from Liveblocks authentication endpoint
   const userInfo = useSelf((me) => me.info)
 
+  if (!userInfo) return null
+
   const [awarenessUsers, setAwarenessUsers] = useState<AwarenessList>([])
 
   useEffect(() => {
@@ -40,7 +43,7 @@ export function Cursors({ yProvider }: { yProvider: TypedLiveblocksProvider }) {
         cursorStyles += `
           .yRemoteSelection-${clientId},
           .yRemoteSelectionHead-${clientId}  {
-            --user-color: ${"#FF0000"};
+            --user-color: ${colors[client.user.color]};
           }
           
           .yRemoteSelectionHead-${clientId}::after {

frontend/components/editor/live/room.tsx

@@ -2,6 +2,7 @@
 
 import { RoomProvider } from "@/liveblocks.config"
 import { ClientSideSuspense } from "@liveblocks/react"
+import Loading from "../loading"
 
 export function Room({
   id,
@@ -17,9 +18,9 @@ export function Room({
         cursor: null,
       }}
     >
-      <ClientSideSuspense fallback={<div>Loading!!!!</div>}>
-        {() => children}
-      </ClientSideSuspense>
+      {/* <ClientSideSuspense fallback={<Loading />}> */}
+      {children}
+      {/* </ClientSideSuspense> */}
     </RoomProvider>
   )
 }