Presence color

package.json

@@ -42,9 +42,10 @@
     "@radix-ui/react-tabs": "^1.0.4",
     "@radix-ui/react-tooltip": "^1.0.7",
     "@tailwindcss/container-queries": "^0.1.1",
-    "@tldraw/tldraw": "2.0.0-alpha.17",
+    "@tldraw/tldraw": "2.0.0-beta.2",
+    "@uiw/react-color-circle": "^2.0.6",
     "@xstate/react": "^3.2.2",
-    "automerge-tldraw": "0.1.5",
+    "automerge-tldraw": "^0.2.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
     "cmdk": "^0.2.0",

src/DocExplorer/account.ts

@@ -33,6 +33,7 @@ export interface AnonymousContactDoc {
 export interface RegisteredContactDoc {
   type: "registered";
   name: string;
+  color: string; // hex color
   avatarUrl?: AutomergeUrl;
 }
 
@@ -48,6 +49,7 @@ interface AccountEvents {
 
 interface ContactProps {
   name: string;
+  color: string;
   avatar: File;
 }
 
@@ -103,7 +105,7 @@ class Account extends EventEmitter<AccountEvents> {
     this.emit("change");
   }
 
-  async signUp({ name, avatar }: ContactProps) {
+  async signUp({ name, avatar, color }: ContactProps) {
     let avatarUrl: AutomergeUrl;
     if (avatar) {
       avatarUrl = await uploadFile(this.#repo, avatar);
@@ -116,6 +118,10 @@ class Account extends EventEmitter<AccountEvents> {
       if (avatarUrl) {
         contact.avatarUrl = avatarUrl;
       }
+
+      if (color) {
+        contact.color = color;
+      }
     });
   }
 

src/DocExplorer/components/AccountPicker.tsx

@@ -33,6 +33,28 @@ import {
 } from "@/components/ui/tooltip";
 import { ContactAvatar } from "./ContactAvatar";
 
+import Circle from '@uiw/react-color-circle';
+export const USER_COLORS = {
+  // RUST: '#D96767',
+  // ENGINEER: '#FFE283',
+  // KEYLIME: '#A1E991',
+  // PINE: '#63D2A5',
+  // SOFT: '#64BCDF',
+  // BIGBLUE: '#3A66A3',
+  // ROYAL: '#A485E2',
+  // KAWAII: '#ED77AB',
+  // BLACK: '#2b2b2b',
+  RED: '#F87060',
+  VORANGE: '#FFC919',
+  DARKGRE: '#6CCB44',
+  PINETO: '#00CA7B',
+  VBLAU: '#3395E8',
+  CHILBLAU: '#004098',
+  OPTIROYA: '#4700D8',
+  MAGEGENTA: '#E80FA7',
+  GRAU: '#626262',
+}
+
 // 1MB in bytes
 const MAX_AVATAR_SIZE = 1024 * 1024;
 
@@ -54,6 +76,8 @@ export const AccountPicker = ({
 
   const self = useSelf();
   const [name, setName] = useState<string>("");
+  const [color, setColor] = useState<string>("#F44E3B");
+
   const [avatar, setAvatar] = useState<File>();
   const [activeTab, setActiveTab] = useState<AccountPickerTab>(
     AccountPickerTab.SignUp
@@ -95,7 +119,7 @@ export const AccountPicker = ({
         break;
 
       case AccountPickerTab.SignUp:
-        currentAccount.signUp({ name, avatar });
+        currentAccount.signUp({ name, avatar, color });
         break;
     }
   };
@@ -183,6 +207,17 @@ export const AccountPicker = ({
                 />
               </div>
 
+              <div className="grid w-full max-w-sm items-center gap-1.5 py-4">
+                <Label htmlFor="name">Presence Color</Label>
+                <Circle
+                  colors={Object.values(USER_COLORS)}
+                  color={color}
+                  onChange={(color) => {
+                    setColor(color.hex);
+                  }}
+                />
+              </div>
+
               <div className="grid w-full max-w-sm items-center gap-1.5">
                 <Label htmlFor="picture">Avatar</Label>
                 <Input
@@ -250,6 +285,17 @@ export const AccountPicker = ({
                 onChange={(evt) => setName(evt.target.value)}
               />
             </div>
+
+            <div className="grid w-full max-w-sm items-center gap-1.5 py-4">
+                <Label htmlFor="name">Presence Color</Label>
+                <Circle
+                  colors={Object.values(USER_COLORS)}
+                  color={color}
+                  onChange={(color) => {
+                    setColor(color.hex);
+                  }}
+                />
+            </div>
 
             <div className="grid w-full max-w-sm items-center gap-1.5">
               <Label htmlFor="picture">Avatar</Label>

src/tldraw/components/TLDraw.tsx

@@ -1,19 +1,39 @@
 import { AutomergeUrl } from "@automerge/automerge-repo";
 import { useDocument, useHandle } from "@automerge/automerge-repo-react-hooks";
 
-import { TLDrawDoc } from "../schema";
-import { useAutomergeStore } from "automerge-tldraw";
-import { Tldraw } from "@tldraw/tldraw";
+import { useAutomergeStore, useAutomergePresence } from "automerge-tldraw";
+import { TLStoreSnapshot, Tldraw } from "@tldraw/tldraw";
 import "@tldraw/tldraw/tldraw.css";
 import { useCurrentAccount } from "@/DocExplorer/account";
 
 export const TLDraw = ({ docUrl }: { docUrl: AutomergeUrl }) => {
-  useDocument<TLDrawDoc>(docUrl); // used to trigger re-rendering when the doc loads
-  const handle = useHandle<TLDrawDoc>(docUrl);
+  useDocument<TLStoreSnapshot>(docUrl); // used to trigger re-rendering when the doc loads
+  const handle = useHandle<TLStoreSnapshot>(docUrl);
   const account = useCurrentAccount();
   const userId = account ? account.contactHandle.url : "no-account";
 
+  /* I don't love any of this! I feel like the API is all wrong here
+     for me to be dealing with this kind of stuff */
+  const userMetadata = {
+    userId: "no-account",
+    color: "blue",
+    name: "Anonymous",
+  }
+
+  if (account && account.contactHandle) {
+    userMetadata.userId = account.contactHandle.url;
+  }
+
+  if (account && account.contactHandle && account.contactHandle.docSync()) {
+    const userDoc = account.contactHandle.docSync();
+    if (userDoc.type == "registered") {
+      userMetadata.color = userDoc.color || "blue";
+      userMetadata.name = userDoc.name || "Unnamed User";
+    }
+  }
+
   const store = useAutomergeStore({ handle, userId });
+  useAutomergePresence({ store, handle, userMetadata });
   return (
     <div className="tldraw__editor h-full overflow-auto">
       <Tldraw autoFocus store={store} />