Disambiguate displaynames (#2918)

* Disambigute displaynames

* Add test

* fixup test functions

* prettier

* lint

* Split displayname utils into own file and add tests.

* Split out fixtures

* Add more testcases for displayname calculation.

* lint

* Also listen for displayname changes. (I stand corrected!)

* fix missing media tiles on missing member

src/tile/SpotlightTile.tsx

@@ -36,7 +36,6 @@ import {
   type MediaViewModel,
   ScreenShareViewModel,
   type UserMediaViewModel,
-  useDisplayName,
 } from "../state/MediaViewModel";
 import { useInitial } from "../useInitial";
 import { useMergedRefs } from "../useMergedRefs";
@@ -132,7 +131,7 @@ const SpotlightItem = forwardRef<HTMLDivElement, SpotlightItemProps>(
   ) => {
     const ourRef = useRef<HTMLDivElement | null>(null);
     const ref = useMergedRefs(ourRef, theirRef);
-    const displayName = useDisplayName(vm);
+    const displayName = useObservableEagerState(vm.displayname$);
     const video = useObservableEagerState(vm.video$);
     const unencryptedWarning = useObservableEagerState(vm.unencryptedWarning$);
     const encryptionStatus = useObservableEagerState(vm.encryptionStatus$);