Use finnish notation for observables (#2905)

To help make our usage of the observables more readable/intuitive.

src/grid/CallLayout.ts

@@ -31,15 +31,15 @@ export interface CallLayoutInputs {
   /**
    * The minimum bounds of the layout area.
    */
-  minBounds: Observable<Bounds>;
+  minBounds$: Observable<Bounds>;
   /**
    * The alignment of the floating spotlight tile, if present.
    */
-  spotlightAlignment: BehaviorSubject<Alignment>;
+  spotlightAlignment$: BehaviorSubject<Alignment>;
   /**
    * The alignment of the small picture-in-picture tile, if present.
    */
-  pipAlignment: BehaviorSubject<Alignment>;
+  pipAlignment$: BehaviorSubject<Alignment>;
 }
 
 export interface CallLayoutOutputs<Model> {

src/grid/Grid.tsx

@@ -156,7 +156,7 @@ export function useVisibleTiles(callback: VisibleTilesCallback): void {
   );
 }
 
-const windowHeightObservable = fromEvent(window, "resize").pipe(
+const windowHeightObservable$ = fromEvent(window, "resize").pipe(
   startWith(null),
   map(() => window.innerHeight),
 );
@@ -262,7 +262,7 @@ export function Grid<
   const [gridRoot, gridRef2] = useState<HTMLElement | null>(null);
   const gridRef = useMergedRefs<HTMLElement>(gridRef1, gridRef2);
 
-  const windowHeight = useObservableEagerState(windowHeightObservable);
+  const windowHeight = useObservableEagerState(windowHeightObservable$);
   const [layoutRoot, setLayoutRoot] = useState<HTMLElement | null>(null);
   const [generation, setGeneration] = useState<number | null>(null);
   const [visibleTilesCallback, setVisibleTilesCallback] =

src/grid/GridLayout.tsx

@@ -26,8 +26,8 @@ interface GridCSSProperties extends CSSProperties {
  * together in a scrolling grid.
  */
 export const makeGridLayout: CallLayout<GridLayoutModel> = ({
-  minBounds,
-  spotlightAlignment,
+  minBounds$,
+  spotlightAlignment$,
 }) => ({
   scrollingOnTop: false,
 
@@ -37,7 +37,7 @@ export const makeGridLayout: CallLayout<GridLayoutModel> = ({
     useUpdateLayout();
     const alignment = useObservableEagerState(
       useInitial(() =>
-        spotlightAlignment.pipe(
+        spotlightAlignment$.pipe(
           distinctUntilChanged(
             (a1, a2) => a1.block === a2.block && a1.inline === a2.inline,
           ),
@@ -47,7 +47,7 @@ export const makeGridLayout: CallLayout<GridLayoutModel> = ({
 
     const onDragSpotlight: DragCallback = useCallback(
       ({ xRatio, yRatio }) =>
-        spotlightAlignment.next({
+        spotlightAlignment$.next({
           block: yRatio < 0.5 ? "start" : "end",
           inline: xRatio < 0.5 ? "start" : "end",
         }),
@@ -74,7 +74,7 @@ export const makeGridLayout: CallLayout<GridLayoutModel> = ({
   scrolling: forwardRef(function GridLayout({ model, Slot }, ref) {
     useUpdateLayout();
     useVisibleTiles(model.setVisibleTiles);
-    const { width, height: minHeight } = useObservableEagerState(minBounds);
+    const { width, height: minHeight } = useObservableEagerState(minBounds$);
     const { gap, tileWidth, tileHeight } = useMemo(
       () => arrangeTiles(width, minHeight, model.grid.length),
       [width, minHeight, model.grid.length],

src/grid/OneOnOneLayout.tsx

@@ -19,8 +19,8 @@ import { type DragCallback, useUpdateLayout } from "./Grid";
  * is shown at maximum size, overlaid by a small view of the local participant.
  */
 export const makeOneOnOneLayout: CallLayout<OneOnOneLayoutModel> = ({
-  minBounds,
-  pipAlignment,
+  minBounds$,
+  pipAlignment$,
 }) => ({
   scrollingOnTop: false,
 
@@ -31,8 +31,8 @@ export const makeOneOnOneLayout: CallLayout<OneOnOneLayoutModel> = ({
 
   scrolling: forwardRef(function OneOnOneLayoutScrolling({ model, Slot }, ref) {
     useUpdateLayout();
-    const { width, height } = useObservableEagerState(minBounds);
-    const pipAlignmentValue = useObservableEagerState(pipAlignment);
+    const { width, height } = useObservableEagerState(minBounds$);
+    const pipAlignmentValue = useObservableEagerState(pipAlignment$);
     const { tileWidth, tileHeight } = useMemo(
       () => arrangeTiles(width, height, 1),
       [width, height],
@@ -40,7 +40,7 @@ export const makeOneOnOneLayout: CallLayout<OneOnOneLayoutModel> = ({
 
     const onDragLocalTile: DragCallback = useCallback(
       ({ xRatio, yRatio }) =>
-        pipAlignment.next({
+        pipAlignment$.next({
           block: yRatio < 0.5 ? "start" : "end",
           inline: xRatio < 0.5 ? "start" : "end",
         }),

src/grid/SpotlightExpandedLayout.tsx

@@ -19,7 +19,7 @@ import styles from "./SpotlightExpandedLayout.module.css";
  */
 export const makeSpotlightExpandedLayout: CallLayout<
   SpotlightExpandedLayoutModel
-> = ({ pipAlignment }) => ({
+> = ({ pipAlignment$ }) => ({
   scrollingOnTop: true,
 
   fixed: forwardRef(function SpotlightExpandedLayoutFixed(
@@ -44,11 +44,11 @@ export const makeSpotlightExpandedLayout: CallLayout<
     ref,
   ) {
     useUpdateLayout();
-    const pipAlignmentValue = useObservableEagerState(pipAlignment);
+    const pipAlignmentValue = useObservableEagerState(pipAlignment$);
 
     const onDragPip: DragCallback = useCallback(
       ({ xRatio, yRatio }) =>
-        pipAlignment.next({
+        pipAlignment$.next({
           block: yRatio < 0.5 ? "start" : "end",
           inline: xRatio < 0.5 ? "start" : "end",
         }),

src/grid/SpotlightLandscapeLayout.tsx

@@ -21,7 +21,7 @@ import { useUpdateLayout, useVisibleTiles } from "./Grid";
  */
 export const makeSpotlightLandscapeLayout: CallLayout<
   SpotlightLandscapeLayoutModel
-> = ({ minBounds }) => ({
+> = ({ minBounds$ }) => ({
   scrollingOnTop: false,
 
   fixed: forwardRef(function SpotlightLandscapeLayoutFixed(
@@ -29,7 +29,7 @@ export const makeSpotlightLandscapeLayout: CallLayout<
     ref,
   ) {
     useUpdateLayout();
-    useObservableEagerState(minBounds);
+    useObservableEagerState(minBounds$);
 
     return (
       <div ref={ref} className={styles.layer}>
@@ -51,9 +51,9 @@ export const makeSpotlightLandscapeLayout: CallLayout<
   ) {
     useUpdateLayout();
     useVisibleTiles(model.setVisibleTiles);
-    useObservableEagerState(minBounds);
+    useObservableEagerState(minBounds$);
     const withIndicators =
-      useObservableEagerState(model.spotlight.media).length > 1;
+      useObservableEagerState(model.spotlight.media$).length > 1;
 
     return (
       <div ref={ref} className={styles.layer}>

src/grid/SpotlightPortraitLayout.tsx

@@ -27,7 +27,7 @@ interface GridCSSProperties extends CSSProperties {
  */
 export const makeSpotlightPortraitLayout: CallLayout<
   SpotlightPortraitLayoutModel
-> = ({ minBounds }) => ({
+> = ({ minBounds$ }) => ({
   scrollingOnTop: false,
 
   fixed: forwardRef(function SpotlightPortraitLayoutFixed(
@@ -55,7 +55,7 @@ export const makeSpotlightPortraitLayout: CallLayout<
   ) {
     useUpdateLayout();
     useVisibleTiles(model.setVisibleTiles);
-    const { width } = useObservableEagerState(minBounds);
+    const { width } = useObservableEagerState(minBounds$);
     const { gap, tileWidth, tileHeight } = arrangeTiles(
       width,
       // TODO: We pretend that the minimum height is the width, because the
@@ -64,7 +64,7 @@ export const makeSpotlightPortraitLayout: CallLayout<
       model.grid.length,
     );
     const withIndicators =
-      useObservableEagerState(model.spotlight.media).length > 1;
+      useObservableEagerState(model.spotlight.media$).length > 1;
 
     return (
       <div