[mini-feature] Following indicator (#1468)

This PR adds a colored box around the current window when following
another user.

### Change Type

- [x] `minor` — New Feature

### Test Plan

1. Follow a user
2. Check out the box

### Release Notes

- Adds viewport following indicator

packages/editor/editor.css

@@ -307,6 +307,16 @@ input,
 	pointer-events: none;
 }
 
+.tlui-following {
+	display: block;
+	position: absolute;
+	inset: 0px;
+	border-width: 2px;
+	border-style: solid;
+	z-index: 9999999;
+	pointer-events: none;
+}
+
 /* ------------------- Background ------------------- */
 
 .tl-background {

packages/ui/src/lib/TldrawUi.tsx

@@ -7,6 +7,7 @@ import { TldrawUiContextProvider, TldrawUiContextProviderProps } from './TldrawU
 import { BackToContent } from './components/BackToContent'
 import { DebugPanel } from './components/DebugPanel'
 import { Dialogs } from './components/Dialogs'
+import { FollowingIndicator } from './components/FollowingIndicator'
 import { HelpMenu } from './components/HelpMenu'
 import { MenuZone } from './components/MenuZone'
 import { NavigationZone } from './components/NavigationZone/NavigationZone'
@@ -89,9 +90,9 @@ export const TldrawUiContent = React.memo(function TldrawUI({
 	const app = useApp()
 	const msg = useTranslation()
 	const breakpoint = useBreakpoint()
-	const isReadonlyMode = useValue('isReadOnlyMode', () => app.isReadOnly, [])
+	const isReadonlyMode = useValue('isReadOnlyMode', () => app.isReadOnly, [app])
-	const isFocusMode = useValue('isFocusMode', () => app.instanceState.isFocusMode, [])
+	const isFocusMode = useValue('focus', () => app.instanceState.isFocusMode, [app])
-	const isDebugMode = useValue('isDebugMode', () => app.instanceState.isDebugMode, [])
+	const isDebugMode = useValue('debug', () => app.instanceState.isDebugMode, [app])
 
 	useKeyboardShortcuts()
 	useNativeClipboardEvents()
@@ -153,6 +154,7 @@ export const TldrawUiContent = React.memo(function TldrawUI({
 				<Toasts />
 				<Dialogs />
 				<ToastViewport />
+				<FollowingIndicator />
 			</main>
 		</ToastProvider>
 	)

packages/ui/src/lib/components/FollowingIndicator.tsx

@@ -0,0 +1,15 @@
+import { useApp, usePresence } from '@tldraw/editor'
+import { useValue } from 'signia-react'
+
+export function FollowingIndicator() {
+	const app = useApp()
+	const followingUserId = useValue('follow', () => app.instanceState.followingUserId, [app])
+	if (!followingUserId) return null
+	return <FollowingIndicatorInner userId={followingUserId} />
+}
+
+function FollowingIndicatorInner({ userId }: { userId: string }) {
+	const presence = usePresence(userId)
+	if (!presence) return null
+	return <div className="tlui-following" style={{ borderColor: presence.color }} />
+}