ui + shared user improvements

frontend/app/api/lb-auth/route.ts

@@ -1,3 +1,4 @@
+import { colors } from "@/lib/colors"
 import { User } from "@/lib/types"
 import { currentUser } from "@clerk/nextjs"
 import { Liveblocks } from "@liveblocks/node"
@@ -19,12 +20,19 @@ export async function POST(request: NextRequest) {
   const res = await fetch(`http://localhost:8787/api/user?id=${clerkUser.id}`)
   const user = (await res.json()) as User
 
+  const colorNames = Object.keys(colors)
+  const randomColor = colorNames[
+    Math.floor(Math.random() * colorNames.length)
+  ] as keyof typeof colors
+  const code = colors[randomColor]
+
   // Create a session for the current user
   // userInfo is made available in Liveblocks presence hooks, e.g. useOthers
   const session = liveblocks.prepareSession(user.id, {
     userInfo: {
       name: user.name,
       email: user.email,
+      color: randomColor,
     },
   })
 

frontend/app/globals.css

@@ -99,13 +99,23 @@
   background: radial-gradient(circle at bottom right, #312e81 -75%, hsl(0 0% 3.9%) 60%); /* violet 900 -> bg */
 }
 
+.inline-decoration::before {
+  content: 'Generate';
+  color: #525252;
+  /* border: 1px solid #525252; */
+  /* padding: 2px 4px; */
+  /* border-radius: 4px; */
+  margin-left: 36px;
+}
 .inline-decoration::after {
-  content: 'Generate ⌘G';
+  content: '⌘G';
   color: #525252;
   border: 1px solid #525252;
-  padding: 2px 4px;
+  border-bottom-width: 2px;
+  padding: 0 4px;
   border-radius: 4px;
-  margin-left: 56px;
+  margin-left: 6px;
+  line-height: 0;
 }
 
 .yRemoteSelection {