use useMyUserId instead of useSelf

editor/src/components/canvas/controls/comment-indicator.tsx

@@ -42,6 +42,7 @@ import { setRightMenuTab } from '../../editor/actions/action-creators'
 import { RightMenuTab } from '../../editor/store/editor-state'
 import { when } from '../../../utils/react-conditionals'
 import { CommentRepliesCounter } from './comment-replies-counter'
+import { useMyUserId } from '../../../core/shared/multiplayer-hooks'
 
 const IndicatorSize = 24
 const MagnifyScale = 1.15
@@ -113,20 +114,10 @@ function useCommentBeingComposed(): TemporaryCommentIndicatorProps | null {
 
   const collabs = useStorage((storage) => storage.collaborators)
 
-  const userId = useEditorState(
-    Substores.userState,
-    (store) => {
-      if (store.userState.loginState.type !== 'LOGGED_IN') {
-        return null
-      }
-
-      return store.userState.loginState.user.userId
-    },
-    'CommentThread userId',
-  )
+  const myUserId = useMyUserId()
 
   const collaboratorInfo = React.useMemo(() => {
-    const collaborator = optionalMap((id) => collabs[id], userId)
+    const collaborator = optionalMap((id) => collabs[id], myUserId)
     if (collaborator == null) {
       return {
         initials: 'AN',
@@ -140,7 +131,7 @@ function useCommentBeingComposed(): TemporaryCommentIndicatorProps | null {
       color: multiplayerColorFromIndex(collaborator.colorIndex),
       avatar: collaborator.avatar,
     }
-  }, [collabs, userId])
+  }, [collabs, myUserId])
 
   if (position == null) {
     return null
@@ -274,14 +265,7 @@ const CommentIndicator = React.memo(({ thread }: CommentIndicatorProps) => {
     'CommentIndicator canvasOffset',
   )
 
-  const { location, scene: commentScene } = useCanvasLocationOfThread(thread)
-
-  const remixLocationRoute = thread.metadata.remixLocationRoute ?? null
-
-  const remixState = useRemixNavigationContext(commentScene)
-
-  const isOnAnotherRoute =
-    remixLocationRoute != null && remixLocationRoute !== remixState?.location.pathname
+  const { location } = useCanvasLocationOfThread(thread)
 
   const readByMe = useMyThreadReadStatus(thread)
 

editor/src/components/canvas/multiplayer-presence.tsx

@@ -45,10 +45,9 @@ import CanvasActions from './canvas-actions'
 import { activeFrameActionToString } from './commands/set-active-frames-command'
 import { canvasPointToWindowPoint, windowToCanvasCoordinates } from './dom-lookup'
 import { ActiveRemixSceneAtom, RemixNavigationAtom } from './remix/utopia-remix-root-component'
-import { useRemixPresence } from '../../core/shared/multiplayer-hooks'
+import { useMyUserId, useRemixPresence } from '../../core/shared/multiplayer-hooks'
 import { CanvasOffsetWrapper } from './controls/canvas-offset-wrapper'
 import { when } from '../../utils/react-conditionals'
-import { isFeatureEnabled } from '../../utils/feature-switches'
 import { CommentIndicators } from './controls/comment-indicator'
 import { CommentPopup } from './controls/comment-popup'
 
@@ -408,12 +407,15 @@ const FollowingOverlay = React.memo(() => {
 FollowingOverlay.displayName = 'FollowingOverlay'
 
 const MultiplayerShadows = React.memo(() => {
-  const me = useSelf()
+  const myUserId = useMyUserId()
   const updateMyPresence = useUpdateMyPresence()
 
   const collabs = useStorage((store) => store.collaborators)
   const others = useOthers((list) => {
-    const presences = normalizeOthersList(me.id, list)
+    if (myUserId == null) {
+      return []
+    }
+    const presences = normalizeOthersList(myUserId, list)
     return presences.map((p) => ({
       presenceInfo: p,
       userInfo: collabs[p.id],

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

@@ -28,6 +28,7 @@ import type { ElementPath } from '../shared/project-file-types'
 import type { ElementInstanceMetadata } from '../shared/element-template'
 import * as EP from '../shared/element-path'
 import { getCurrentTheme } from '../../components/editor/store/editor-state'
+import { useMyUserId } from '../shared/multiplayer-hooks'
 
 export function useCanvasCommentThreadAndLocation(comment: CommentId): {
   location: CanvasPoint | null
@@ -268,17 +269,20 @@ export function useUnresolvedThreads() {
 
 export function useReadThreads() {
   const threads = useThreads()
-  const self = useSelf()
+  const myUserId = useMyUserId()
   const threadReadStatuses = useStorage((store) => store.userReadStatusesByThread)
 
   const filteredThreads = threads.threads.filter((thread) => {
+    if (myUserId == null) {
+      return false
+    }
     if (thread == null) {
       return false
     }
     if (threadReadStatuses[thread.id] == null) {
       return false
     }
-    return threadReadStatuses[thread.id][self.id] === true
+    return threadReadStatuses[thread.id][myUserId] === true
   })
 
   return {
@@ -301,16 +305,19 @@ export function useSetThreadReadStatusOnMount(thread: ThreadData<ThreadMetadata>
 }
 
 export function useMyThreadReadStatus(thread: ThreadData<ThreadMetadata> | null): ThreadReadStatus {
-  const self = useSelf()
+  const myUserId = useMyUserId()
   return useStorage((store) => {
+    if (myUserId == null) {
+      return 'unread'
+    }
     if (thread == null) {
       return 'unread'
     }
     const statusesForThread = store.userReadStatusesByThread[thread.id]
     if (statusesForThread == null) {
       return 'unread'
     }
-    return statusesForThread[self.id] === true ? 'read' : 'unread'
+    return statusesForThread[myUserId] === true ? 'read' : 'unread'
   })
 }