Extract hook

editor/src/components/user-bar.tsx

@@ -17,6 +17,7 @@ import { useDispatch } from './editor/store/dispatch-context'
 import { switchEditorMode } from './editor/actions/action-creators'
 import type { EditorAction } from './editor/action-types'
 import { EditorModes, isFollowMode } from './editor/editor-modes'
+import { useMyUserAndPresence } from '../core/commenting/comment-hooks'
 
 const MAX_VISIBLE_OTHER_PLAYERS = 4
 
@@ -61,12 +62,11 @@ const MultiplayerUserBar = React.memo(() => {
   const dispatch = useDispatch()
   const colorTheme = useColorTheme()
 
-  const me = useSelf()
-  const myUser = useStorage((store) => store.collaborators[me.id])
+  const { user: myUser } = useMyUserAndPresence()
   const myName = normalizeMultiplayerName(myUser.name)
 
   const others = useOthers((list) =>
-    normalizeOthersList(me.id, list).map((other) => ({
+    normalizeOthersList(myUser.id, list).map((other) => ({
       id: other.id,
       name: myUser.name,
       colorIndex: myUser.colorIndex,

editor/src/core/commenting/comment-hooks.tsx

@@ -12,10 +12,18 @@ export function useCanvasCommentThread(x: number, y: number): ThreadData<ThreadM
   return thread
 }
 
-export function useMyMultiplayerColorIndex() {
+export function useMyUserAndPresence() {
   const me = useSelf()
   const myUser = useStorage((store) => store.collaborators[me.id])
-  return myUser.colorIndex
+  return {
+    presence: me,
+    user: myUser,
+  }
+}
+
+export function useMyMultiplayerColorIndex() {
+  const me = useMyUserAndPresence()
+  return me.user.colorIndex
 }
 
 export function useAddMyselfToCollaborators() {