Drop observable-hooks in favor of useBehavior

With this change, views now read every reactive value through `useBehavior`, as
`architecture.md` already prescribes. Where a view reads a plain stream, the view
model now exposes a `Behavior`.

src/tile/GridTile.tsx

@@ -37,7 +37,6 @@ import {
   Menu,
   Text,
 } from "@vector-im/compound-web";
-import { useObservableEagerState } from "observable-hooks";
 
 import styles from "./GridTile.module.css";
 import { Slider } from "../Slider";
@@ -133,12 +132,8 @@ const UserMediaTileInner: FC<UserMediaTileProps & { menu: ReactNode }> = ({
   const { t } = useTranslation();
   const video = useBehavior(vm.video$);
   const unencryptedWarning = useBehavior(vm.unencryptedWarning$);
-  const audioStreamStats = useObservableEagerState<
-    RTCInboundRtpStreamStats | RTCOutboundRtpStreamStats | undefined
-  >(vm.audioStreamStats$);
-  const videoStreamStats = useObservableEagerState<
-    RTCInboundRtpStreamStats | RTCOutboundRtpStreamStats | undefined
-  >(vm.videoStreamStats$);
+  const audioStreamStats = useBehavior(vm.audioStreamStats$);
+  const videoStreamStats = useBehavior(vm.videoStreamStats$);
   const audioEnabled = useBehavior(vm.audioEnabled$);
   const videoEnabled = useBehavior(vm.videoEnabled$);
   const speaking = useBehavior(vm.speaking$);

src/tile/SpotlightTile.tsx

@@ -26,8 +26,7 @@ import {
   VolumeOnSolidIcon,
 } from "@vector-im/compound-design-tokens/assets/web/icons";
 import { animated } from "@react-spring/web";
-import { type Observable, map } from "rxjs";
-import { useObservableRef } from "observable-hooks";
+import { BehaviorSubject, type Observable, map } from "rxjs";
 import { useTranslation } from "react-i18next";
 import classNames from "classnames";
 import { type TrackReferenceOrPlaceholder } from "@livekit/components-core";
@@ -416,7 +415,13 @@ export const SpotlightTile: FC<Props> = ({
 }) => {
   const { t } = useTranslation();
   const rootElement = useRootElement();
-  const [ourRef, root$] = useObservableRef<HTMLDivElement | null>(null);
+  const root$ = useInitial(
+    () => new BehaviorSubject<HTMLDivElement | null>(null),
+  );
+  const ourRef = useCallback(
+    (root: HTMLDivElement | null) => root$.next(root),
+    [root$],
+  );
   const ref = useMergedRefs(ourRef, theirRef);
   const maximised = useBehavior(vm.maximised$);
   const background = useBehavior(vm.background$);