Merge branch 'livekit' into hs/remove-memory-store

Merge pull request #2811 from robintown/revert-memory-store
Revert memory store and update matrix-js-sdk
2026-11-10 01:02:27 +00:00 · 2024-11-20 10:52:55 -05:00 · 2024-11-20 10:42:41 -05:00 · 2024-11-20 10:40:08 -05:00 · 2024-11-20 10:22:42 -05:00 · 2024-11-20 14:44:23 +00:00
83 changed files with 1091 additions and 1108 deletions
@@ -37,6 +37,7 @@ module.exports = {
    "@typescript-eslint/promise-function-async": "error",
    "@typescript-eslint/require-await": "error",
    "@typescript-eslint/await-thenable": "error",
+    "rxjs/no-exposed-subjects": "error",
  },
  settings: {
    react: {
@@ -24,7 +24,7 @@ jobs:
        run: "yarn install --frozen-lockfile"

      - name: Prune i18n
-        run: "rm -R public/locales"
+        run: "rm -R locales"

      - name: Download translation files
        uses: localazy/download@0a79880fb66150601e3b43606fab69c88123c087 # v1.1.0
@@ -32,7 +32,7 @@ jobs:
          groups: "-p includeSourceLang:true"

      - name: Fix the owner of the downloaded files
-        run: "sudo chown runner:docker -R public/locales"
+        run: "sudo chown runner:docker -R locales"

      - name: Prettier
        run: yarn prettier:format
@@ -2,9 +2,3 @@ FROM nginxinc/nginx-unprivileged:alpine

 COPY ./dist /app
 COPY config/nginx.conf /etc/nginx/conf.d/default.conf
-
-USER root
-
-RUN rm -rf /usr/share/nginx/html
-
-USER 101
@@ -213,7 +213,7 @@ To add a new translation key you can do these steps:

 1. Add the new key entry to the code where the new key is used: `t("some_new_key")`
 1. Run `yarn i18n` to extract the new key and update the translation files. This
-   will add a skeleton entry to the `public/locales/en-GB/app.json` file:
+   will add a skeleton entry to the `locales/en-GB/app.json` file:
   ```jsonc
   {
       ...
@@ -221,7 +221,7 @@ To add a new translation key you can do these steps:
       ...
   }
   ```
-1. Update the skeleton entry in the `public/locales/en-GB/app.json` file with
+1. Update the skeleton entry in the `locales/en-GB/app.json` file with
   the English translation:

 ```jsonc
@@ -3,23 +3,17 @@ server {
    server_name  localhost;

    root   /app;
+    gzip_static on;
+    gzip_vary on;

    location / {
-        # disable cache entriely by default (apart from Etag which is accurate enough)
-        add_header Cache-Control 'private no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0';
-        if_modified_since off;
-        expires off;
-        # also turn off last-modified since they are just the timestamps of the file in the docker image
-        # and may or may not bear any resemblance to when the resource changed
-        add_header Last-Modified "";
-
        try_files $uri $uri/ /index.html;
+        add_header Cache-Control "public, max-age=30, stale-while-revalidate=30";
    }

    # assets can be cached because they have hashed filenames
    location /assets {
-        expires 1w;
-        add_header Cache-Control "public, no-transform";
+        add_header Cache-Control "public, immutable, max-age=31536000";
    }

    location /apple-app-site-association {
@@ -22,7 +22,7 @@ export default {
    ],
  },
  locales: ["en-GB"],
-  output: "public/locales/$LOCALE/$NAMESPACE.json",
+  output: "locales/$LOCALE/$NAMESPACE.json",
  input: ["src/**/*.{ts,tsx}"],
  sort: true,
 };
@@ -7,13 +7,13 @@
    "features": ["plural_postfix_us", "filter_untranslated"],
    "files": [
      {
-        "pattern": "public/locales/en-GB/*.json",
+        "pattern": "locales/en-GB/*.json",
        "lang": "inherited"
      },
      {
        "group": "existing",
-        "pattern": "public/locales/*/*.json",
-        "excludes": ["public/locales/en-GB/*.json"],
+        "pattern": "locales/*/*.json",
+        "excludes": ["locales/en-GB/*.json"],
        "lang": "${autodetectLang}"
      }
    ]
@@ -22,7 +22,7 @@
  "download": {
    "files": [
      {
-        "output": "public/locales/${langLsrDash}/${file}"
+        "output": "locales/${langLsrDash}/${file}"
      }
    ],
    "includeSourceLang": "${includeSourceLang|false}",
@@ -4,19 +4,18 @@
  },
  "action": {
    "close": "Schließen",
-    "close_search": "Suche beenden",
    "copy_link": "Link kopieren",
    "edit": "Bearbeiten",
    "go": "Los geht’s",
    "invite": "Einladen",
    "lower_hand": "Handmeldung zurücknehmen",
    "no": "Nein",
-    "open_search": "Suchen",
    "pick_reaction": "Reaktion auswählen",
    "raise_hand": "Handmeldung",
-    "raise_hand_or_send_reaction": "Handmeldung oder Reaktion senden",
    "register": "Registrieren",
    "remove": "Entfernen",
+    "show_less": "Weniger anzeigen",
+    "show_more": "Mehr anzeigen",
    "sign_in": "Anmelden",
    "sign_out": "Abmelden",
    "submit": "Absenden",
@@ -62,7 +61,7 @@
    "preferences": "Einstellungen",
    "profile": "Profil",
    "reaction": "Reaktion",
-    "search": "Suche",
+    "reactions": "Reaktionen",
    "settings": "Einstellungen",
    "something_went_wrong": "Etwas ist schief gelaufen",
    "unencrypted": "Nicht verschlüsselt",
@@ -115,7 +114,7 @@
  "matrix_id": "Matrix-ID: {{id}}",
  "microphone_off": "Mikrofon aus",
  "microphone_on": "Mikrofon an",
-  "mute_microphone_button_label": "Mikrofon deaktivieren",
+  "mute_microphone_button_label": "Mikrofon stumm schalten",
  "participant_count_one": "{{count, number}}",
  "participant_count_other": "{{count, number}}",
  "qr_code": "QR-Code",
@@ -128,7 +127,6 @@
  "rageshake_sending": "Senden …",
  "rageshake_sending_logs": "Sende Debug-Protokolle …",
  "rageshake_sent": "Danke!",
-  "reaction_search": "Reaktionen suchen...",
  "recaptcha_caption": "Diese Seite wird durch reCAPTCHA geschützt und es gelten Googles <2>Datenschutzerklärung</2> und <6>Nutzungsbedingungen</6>. <9></9>Mit einem Klick auf „Registrieren“ akzeptierst du unseren <2>Endbenutzer-Lizenzvertrag (EULA)</2>",
  "recaptcha_dismissed": "Recaptcha abgelehnt",
  "recaptcha_not_loaded": "Recaptcha nicht geladen",
@@ -163,8 +161,8 @@
    "preferences_tab": {
      "reactions_play_sound_description": "Einen Soundeffekt abspielen, wenn jemand eine Reaktion sendet",
      "reactions_play_sound_label": "Reaktionstöne abspielen",
-      "reactions_show_description": "Reaktionen anzeigen",
-      "reactions_show_label": "Zeige eine Animation, wenn jemand eine Reaktion sendet.",
+      "reactions_show_description": "Zeige eine Animation, wenn jemand eine Reaktion sendet.",
+      "reactions_show_label": "Reaktionen anzeigen",
      "reactions_title": "Reaktionen"
    },
    "preferences_tab_body": "Hier können zusätzliche Optionen für individuelle Anforderungen eingestellt werden",
@@ -184,14 +182,15 @@
  "unauthenticated_view_body": "Noch nicht registriert? <2>Konto erstellen</2>",
  "unauthenticated_view_eula_caption": "Mit einem Klick auf „Los geht’s“ akzeptierst du unseren <2>Endbenutzer-Lizenzvertrag (EULA)</2>",
  "unauthenticated_view_login_button": "Melde dich mit deinem Konto an",
-  "unmute_microphone_button_label": "Mikrofon aktivieren",
+  "unmute_microphone_button_label": "Mikrofon einschalten",
  "version": "{{productName}} Version: {{version}}",
  "video_tile": {
    "always_show": "Immer anzeigen",
    "change_fit_contain": "An Fenster anpassen",
    "collapse": "Minimieren",
    "expand": "Erweitern",
-    "mute_for_me": "Für mich stummschalten",
+    "mute_for_me": "Für mich stumm schalten",
+    "muted_for_me": "Für mich stumm geschaltet",
    "volume": "Lautstärke"
  }
 }
@@ -4,19 +4,18 @@
  },
  "action": {
    "close": "Close",
-    "close_search": "Close search",
    "copy_link": "Copy link",
    "edit": "Edit",
    "go": "Go",
    "invite": "Invite",
    "lower_hand": "Lower hand",
    "no": "No",
-    "open_search": "Open search",
    "pick_reaction": "Pick reaction",
    "raise_hand": "Raise hand",
-    "raise_hand_or_send_reaction": "Raise hand or send reaction",
    "register": "Register",
    "remove": "Remove",
+    "show_less": "Show less",
+    "show_more": "Show more",
    "sign_in": "Sign in",
    "sign_out": "Sign out",
    "submit": "Submit",
@@ -62,7 +61,7 @@
    "preferences": "Preferences",
    "profile": "Profile",
    "reaction": "Reaction",
-    "search": "Search",
+    "reactions": "Reactions",
    "settings": "Settings",
    "something_went_wrong": "Something went wrong",
    "unencrypted": "Not encrypted",
@@ -128,7 +127,6 @@
  "rageshake_sending": "Sending…",
  "rageshake_sending_logs": "Sending debug logs…",
  "rageshake_sent": "Thanks!",
-  "reaction_search": "Search reactions…",
  "recaptcha_caption": "This site is protected by ReCAPTCHA and the Google <2>Privacy Policy</2> and <6>Terms of Service</6> apply.<9></9>By clicking \"Register\", you agree to our <12>End User Licensing Agreement (EULA)</12>",
  "recaptcha_dismissed": "Recaptcha dismissed",
  "recaptcha_not_loaded": "Recaptcha not loaded",
@@ -163,8 +161,8 @@
    "preferences_tab": {
      "reactions_play_sound_description": "Play a sound effect when anyone sends a reaction into a call.",
      "reactions_play_sound_label": "Play reaction sounds",
-      "reactions_show_description": "Show reactions",
-      "reactions_show_label": "Show an animation when anyone sends a reaction.",
+      "reactions_show_description": "Show an animation when anyone sends a reaction.",
+      "reactions_show_label": "Show reactions",
      "reactions_title": "Reactions"
    },
    "preferences_tab_body": "Here you can configure extra options for an improved experience",
@@ -25,6 +25,8 @@
    "@babel/preset-react": "^7.22.15",
    "@babel/preset-typescript": "^7.23.0",
    "@codecov/vite-plugin": "^1.3.0",
+    "@fontsource/inconsolata": "^5.1.0",
+    "@fontsource/inter": "^5.1.0",
    "@formatjs/intl-durationformat": "^0.6.1",
    "@formatjs/intl-segmenter": "^11.7.3",
    "@livekit/components-core": "^0.11.0",
@@ -49,8 +51,9 @@
    "@types/content-type": "^1.1.5",
    "@types/grecaptcha": "^3.0.9",
    "@types/jsdom": "^21.1.7",
-    "@types/lodash": "^4.14.199",
+    "@types/lodash-es": "^4.17.12",
    "@types/node": "^20.0.0",
+    "@types/pako": "^2.0.3",
    "@types/qrcode": "^1.5.5",
    "@types/react-dom": "^18.3.0",
    "@types/react-router-dom": "^5.3.3",
@@ -81,14 +84,13 @@
    "history": "^4.0.0",
    "i18next": "^23.0.0",
    "i18next-browser-languagedetector": "^8.0.0",
-    "i18next-http-backend": "^2.0.0",
    "i18next-parser": "^9.0.0",
    "jsdom": "^25.0.0",
    "knip": "^5.27.2",
    "livekit-client": "^2.5.7",
-    "lodash": "^4.17.21",
+    "lodash-es": "^4.17.21",
    "loglevel": "^1.9.1",
-    "matrix-js-sdk": "matrix-org/matrix-js-sdk#8e9a04cdec0f88fc876bbbf406db55b0677f005d",
+    "matrix-js-sdk": "matrix-org/matrix-js-sdk#80582a734684b532585b52cde63ef34dc7d774fa",
    "matrix-widget-api": "^1.10.0",
    "normalize.css": "^8.0.1",
    "observable-hooks": "^4.2.3",
@@ -109,8 +111,9 @@
    "typescript": "^5.1.6",
    "typescript-eslint-language-service": "^5.0.5",
    "unique-names-generator": "^4.6.0",
-    "vaul": "^0.9.0",
+    "vaul": "^1.0.0",
    "vite": "^5.0.0",
+    "vite-plugin-compression2": "^1.3.1",
    "vite-plugin-html-template": "^1.1.0",
    "vite-plugin-svgr": "^4.0.0",
    "vitest": "^2.0.0",
@@ -3,6 +3,7 @@
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="favicon.png" />
+    <link rel="preload" href="/config.json" as="fetch" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0"
@@ -1,6 +1,6 @@
 {
  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
-  "extends": ["config:base"],
+  "extends": ["config:recommended"],
  "packageRules": [
    {
      "groupName": "all non-major dependencies",
@@ -26,8 +26,8 @@
    },
    {
      "groupName": "Compound",
-      "matchPackagePrefixes": ["@vector-im/compound-"],
-      "schedule": "before 5am on Tuesday and Friday"
+      "schedule": "before 5am on Tuesday and Friday",
+      "matchPackageNames": ["@vector-im/compound-{/,}**"]
    },
    {
      "groupName": "LiveKit client",
@@ -35,7 +35,7 @@
    },
    {
      "groupName": "LiveKit components",
-      "matchPackagePrefixes": ["@livekit/components-"]
+      "matchPackageNames": ["@livekit/components-{/,}**"]
    },
    {
      "groupName": "Vaul",
@@ -6,6 +6,7 @@ Please see LICENSE in the repository root for full details.
 */

 import "matrix-js-sdk/src/@types/global";
+import type { DurationFormat as PolyfillDurationFormat } from "@formatjs/intl-durationformat";
 import { Controls } from "../controls";

 declare global {
@@ -23,4 +24,9 @@ declare global {
    // Safari only supports this prefixed, so tell the type system about it
    webkitRequestFullscreen: () => void;
  }
+
+  namespace Intl {
+    // Add DurationFormat as part of the Intl namespace because we polyfill it
+    const DurationFormat: typeof PolyfillDurationFormat;
+  }
 }
@@ -7,7 +7,7 @@ Please see LICENSE in the repository root for full details.

 import "i18next";
 // import all namespaces (for the default language, only)
-import app from "../../public/locales/en-GB/app.json";
+import app from "../../locales/en-GB/app.json";

 declare module "i18next" {
  interface CustomTypeOptions {
@@ -16,19 +16,13 @@ import {
  useMemo,
 } from "react";
 import { useHistory } from "react-router-dom";
-import {
-  ClientEvent,
-  ICreateClientOpts,
-  MatrixClient,
-} from "matrix-js-sdk/src/client";
 import { logger } from "matrix-js-sdk/src/logger";
 import { useTranslation } from "react-i18next";
 import { ISyncStateData, SyncState } from "matrix-js-sdk/src/sync";
-import { MatrixError } from "matrix-js-sdk/src/matrix";
-import { WidgetApi } from "matrix-widget-api";
+import { ClientEvent, type MatrixClient } from "matrix-js-sdk/src/client";

+import type { WidgetApi } from "matrix-widget-api";
 import { ErrorView } from "./FullScreenView";
-import { fallbackICEServerAllowed, initClient } from "./utils/matrix";
 import { widget } from "./widget";
 import {
  PosthogAnalytics,
@@ -36,7 +30,6 @@ import {
 } from "./analytics/PosthogAnalytics";
 import { translatedError } from "./TranslatedError";
 import { useEventTarget } from "./useEvents";
-import { Config } from "./config/Config";

 declare global {
  interface Window {
@@ -359,7 +352,7 @@ export const ClientProvider: FC<Props> = ({ children }) => {
  );
 };

-type InitResult = {
+export type InitResult = {
  widgetApi: WidgetApi | null;
  client: MatrixClient;
  passwordlessUser: boolean;
@@ -376,50 +369,8 @@ async function loadClient(): Promise<InitResult | null> {
      passwordlessUser: false,
    };
  } else {
-    // We're running as a standalone application
-    try {
-      const session = loadSession();
-      if (!session) {
-        logger.log("No session stored; continuing without a client");
-        return null;
-      }
-
-      logger.log("Using a standalone client");
-
-      /* eslint-disable camelcase */
-      const { user_id, device_id, access_token, passwordlessUser } = session;
-      const initClientParams: ICreateClientOpts = {
-        baseUrl: Config.defaultHomeserverUrl()!,
-        accessToken: access_token,
-        userId: user_id,
-        deviceId: device_id,
-        fallbackICEServerAllowed: fallbackICEServerAllowed,
-        livekitServiceURL: Config.get().livekit?.livekit_service_url,
-      };
-
-      try {
-        const client = await initClient(initClientParams, true);
-        return {
-          widgetApi: null,
-          client,
-          passwordlessUser,
-        };
-      } catch (err) {
-        if (err instanceof MatrixError && err.errcode === "M_UNKNOWN_TOKEN") {
-          // We can't use this session anymore, so let's log it out
-          logger.log(
-            "The session from local store is invalid; continuing without a client",
-          );
-          clearSession();
-          // returning null = "no client` pls register" (undefined = "loading" which is the current value when reaching this line)
-          return null;
-        }
-        throw err;
-      }
-    } catch (err) {
-      clearSession();
-      throw err;
-    }
+    const { initSPA } = await import("./utils/spa");
+    return initSPA(loadSession, clearSession);
  }
 }

@@ -6,6 +6,7 @@ Please see LICENSE in the repository root for full details.
 */

 .modal {
+  --inset-inline: 520px;
  display: flex;
  flex-direction: column;
 }
@@ -35,7 +36,7 @@ Please see LICENSE in the repository root for full details.
 .drawer {
  background: var(--cpd-color-bg-canvas-default);
  inset-block-end: 0;
-  inset-inline: max(0px, calc((100% - 520px) / 2));
+  inset-inline: max(0px, calc((100% - var(--inset-inline)) / 2));
  max-block-size: 90%;
  border-start-start-radius: var(--border-radius);
  border-start-end-radius: var(--border-radius);
@@ -42,8 +42,9 @@ Please see LICENSE in the repository root for full details.
 }

 .overlay.animate {
+  --overlay-top: 50%;
  left: 50%;
-  top: 50%;
+  top: var(--overlay-top);
  transform: translate(-50%, -50%);
 }

@@ -39,13 +39,16 @@ exports[`the modal renders as a drawer in mobile viewports 1`] = `
  aria-labelledby="radix-:ra:"
  class="overlay modal drawer"
  data-state="open"
+  data-vaul-animate="true"
+  data-vaul-custom-container="false"
+  data-vaul-delayed-snap-points="false"
+  data-vaul-drawer=""
+  data-vaul-drawer-direction="bottom"
+  data-vaul-snap-points="false"
  id="radix-:r9:"
  role="dialog"
  style="pointer-events: auto;"
  tabindex="-1"
-  vaul-drawer=""
-  vaul-drawer-direction="bottom"
-  vaul-drawer-visible="true"
 >
  <div
    class="content"
@@ -3,78 +3,99 @@
 }

 .reactionPopupMenu {
+  --reaction-button-padding: 10px;
+  --reaction-button-fontsize: 20px;
+  --reaction-button-gap: var(--cpd-separator-spacing);
  display: flex;
+  width: fit-content;
 }

-.reactionPopupMenuModal {
-  width: fit-content !important;
-  top: 82vh !important;
+@media (max-width: 420px) {
+  .reactionPopupMenu {
+    --reaction-button-padding: 8px;
+    --reaction-button-fontsize: 16px;
+    --reaction-button-gap: 6px;
+  }
 }

-.reactionPopupMenuModal > div > div {
-  padding-inline: var(--cpd-space-6x) !important;
-  padding-block: var(--cpd-space-6x) var(--cpd-space-8x) !important;
+div.reactionPopupMenuRoot.reactionPopupMenuModal {
+  --overlay-top: 82vh;
+  width: fit-content;
 }

-.reactionPopupMenu menu {
-  margin: 0;
-  padding: 0;
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--cpd-separator-spacing);
+div.reactionPopupMenuRoot {
+  /* Center the drawer */
+  --inset-inline: 30em;
+}
+
+.reactionPopupMenuRoot > div {
+  width: fit-content;
+  max-width: 100vw;
+}
+
+div.reactionPopupMenuRoot.reactionPopupMenuModal > div > div {
+  padding-inline: var(--cpd-space-6x);
+  padding-block: var(--cpd-space-6x);
 }

 .reactionPopupMenu section {
  height: fit-content;
-  margin-top: auto;
-  margin-bottom: auto;
+  flex: 1;
+  max-width: fit-content;
 }

-.reactionPopupMenuItem {
-  list-style: none;
+.reactionPopupMenu section.reactionsMenuSection {
+  margin: auto 0;
+  flex: auto;
 }

 .reactionsMenu {
-  min-height: 3em;
+  margin: 0;
+  padding: 0;
+  flex-grow: 1;
+  gap: var(--reaction-button-gap);
+  /* Height of 3 rows plus padding. */
+  max-height: calc(
+    ((var(--reaction-button-fontsize) + var(--cpd-separator-spacing)) * 2) * 3
+  );
+  max-width: calc(
+    ((var(--reaction-button-fontsize) + var(--cpd-separator-spacing)) * 2) * 5
+  );
+  overflow-x: hidden;
+  overflow-y: auto;
+  list-style: none;
+  flex-wrap: wrap;
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+  justify-content: start;
+  align-items: auto;
+  align-content: start;
+  width: fit-content;
+}
+
+.reactionsMenu > * {
+  flex: 0 0 auto;
 }

 .reactionButton {
-  padding: 1em;
-  font-size: 1.6em;
-  width: 1.4em;
-  height: 1.4em;
+  padding: var(--reaction-button-padding);
  border-radius: var(--cpd-radius-pill-effect);
-}
-
-@media (max-width: 800px) {
-  .reactionButton {
-    padding: 1em;
-    font-size: 1em;
-    width: 1em;
-    height: 1em;
-    min-block-size: unset;
-  }
+  font-size: var(--reaction-button-fontsize);
+  min-block-size: unset;
+  border: none;
+  aspect-ratio: 1 / 1;
+  height: 100%;
 }

 .verticalSeperator {
  background-color: var(--cpd-color-gray-800);
-  width: 1px;
+  width: 2px;
  height: auto;
  margin-left: var(--cpd-separator-spacing);
  margin-right: var(--cpd-separator-spacing);
 }

-.searchForm {
-  display: flex;
-  flex-direction: row;
-  gap: var(--cpd-separator-spacing);
-  margin-bottom: var(--cpd-space-3x);
-}
-
-.searchForm > label {
-  flex: auto;
-}
-
 .alert {
  margin-bottom: var(--cpd-space-3x);
  animation: grow-in 200ms;
@@ -5,10 +5,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */

-import { fireEvent, render } from "@testing-library/react";
-import { act } from "react";
+import { render } from "@testing-library/react";
 import { expect, test } from "vitest";
-import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc";
 import { TooltipProvider } from "@vector-im/compound-web";
 import { userEvent } from "@testing-library/user-event";
 import { ReactNode } from "react";
@@ -30,18 +28,13 @@ const membership: Record<string, string> = {

 function TestComponent({
  rtcSession,
-  room,
 }: {
  rtcSession: MockRTCSession;
-  room: MockRoom;
 }): ReactNode {
  return (
    <TooltipProvider>
      <TestReactionsWrapper rtcSession={rtcSession}>
-        <ReactionToggleButton
-          rtcSession={rtcSession as unknown as MatrixRTCSession}
-          client={room.client}
-        />
+        <ReactionToggleButton userId={memberUserIdAlice} />
      </TestReactionsWrapper>
    </TooltipProvider>
  );
@@ -52,9 +45,9 @@ test("Can open menu", async () => {
  const room = new MockRoom(memberUserIdAlice);
  const rtcSession = new MockRTCSession(room, membership);
  const { getByLabelText, container } = render(
-    <TestComponent rtcSession={rtcSession} room={room} />,
+    <TestComponent rtcSession={rtcSession} />,
  );
-  await user.click(getByLabelText("action.raise_hand_or_send_reaction"));
+  await user.click(getByLabelText("common.reactions"));
  expect(container).toMatchSnapshot();
 });

@@ -63,9 +56,9 @@ test("Can raise hand", async () => {
  const room = new MockRoom(memberUserIdAlice);
  const rtcSession = new MockRTCSession(room, membership);
  const { getByLabelText, container } = render(
-    <TestComponent rtcSession={rtcSession} room={room} />,
+    <TestComponent rtcSession={rtcSession} />,
  );
-  await user.click(getByLabelText("action.raise_hand_or_send_reaction"));
+  await user.click(getByLabelText("common.reactions"));
  await user.click(getByLabelText("action.raise_hand"));
  expect(room.testSentEvents).toEqual([
    [
@@ -88,10 +81,10 @@ test("Can lower hand", async () => {
  const room = new MockRoom(memberUserIdAlice);
  const rtcSession = new MockRTCSession(room, membership);
  const { getByLabelText, container } = render(
-    <TestComponent rtcSession={rtcSession} room={room} />,
+    <TestComponent rtcSession={rtcSession} />,
  );
  const reactionEvent = room.testSendHandRaise(memberEventAlice, membership);
-  await user.click(getByLabelText("action.raise_hand_or_send_reaction"));
+  await user.click(getByLabelText("common.reactions"));
  await user.click(getByLabelText("action.lower_hand"));
  expect(room.testRedactedEvents).toEqual([[undefined, reactionEvent]]);
  expect(container).toMatchSnapshot();
@@ -102,9 +95,9 @@ test("Can react with emoji", async () => {
  const room = new MockRoom(memberUserIdAlice);
  const rtcSession = new MockRTCSession(room, membership);
  const { getByLabelText, getByText } = render(
-    <TestComponent rtcSession={rtcSession} room={room} />,
+    <TestComponent rtcSession={rtcSession} />,
  );
-  await user.click(getByLabelText("action.raise_hand_or_send_reaction"));
+  await user.click(getByLabelText("common.reactions"));
  await user.click(getByText("🐶"));
  expect(room.testSentEvents).toEqual([
    [
@@ -122,17 +115,15 @@ test("Can react with emoji", async () => {
  ]);
 });

-test("Can search for and send emoji", async () => {
+test("Can fully expand emoji picker", async () => {
  const user = userEvent.setup();
  const room = new MockRoom(memberUserIdAlice);
  const rtcSession = new MockRTCSession(room, membership);
  const { getByText, container, getByLabelText } = render(
-    <TestComponent rtcSession={rtcSession} room={room} />,
+    <TestComponent rtcSession={rtcSession} />,
  );
-  await user.click(getByLabelText("action.raise_hand_or_send_reaction"));
-  await user.click(getByLabelText("action.open_search"));
-  // Search should autofocus.
-  await user.keyboard("crickets");
+  await user.click(getByLabelText("common.reactions"));
+  await user.click(getByLabelText("action.show_more"));
  expect(container).toMatchSnapshot();
  await user.click(getByText("🦗"));

@@ -152,63 +143,15 @@ test("Can search for and send emoji", async () => {
  ]);
 });

-test("Can search for and send emoji with the keyboard", async () => {
-  const user = userEvent.setup();
-  const room = new MockRoom(memberUserIdAlice);
-  const rtcSession = new MockRTCSession(room, membership);
-  const { getByLabelText, getByPlaceholderText, container } = render(
-    <TestComponent rtcSession={rtcSession} room={room} />,
-  );
-  await user.click(getByLabelText("action.raise_hand_or_send_reaction"));
-  await user.click(getByLabelText("action.open_search"));
-  const searchField = getByPlaceholderText("reaction_search");
-  // Search should autofocus.
-  await user.keyboard("crickets");
-  expect(container).toMatchSnapshot();
-  act(() => {
-    fireEvent.keyDown(searchField, { key: "Enter" });
-  });
-  expect(room.testSentEvents).toEqual([
-    [
-      undefined,
-      ElementCallReactionEventType,
-      {
-        "m.relates_to": {
-          event_id: memberEventAlice,
-          rel_type: "m.reference",
-        },
-        name: "crickets",
-        emoji: "🦗",
-      },
-    ],
-  ]);
-});
-
-test("Can close search", async () => {
+test("Can close reaction dialog", async () => {
  const user = userEvent.setup();
  const room = new MockRoom(memberUserIdAlice);
  const rtcSession = new MockRTCSession(room, membership);
  const { getByLabelText, container } = render(
-    <TestComponent rtcSession={rtcSession} room={room} />,
+    <TestComponent rtcSession={rtcSession} />,
  );
-  await user.click(getByLabelText("action.raise_hand_or_send_reaction"));
-  await user.click(getByLabelText("action.open_search"));
-  await user.click(getByLabelText("action.close_search"));
-  expect(container).toMatchSnapshot();
-});
-
-test("Can close search with the escape key", async () => {
-  const user = userEvent.setup();
-  const room = new MockRoom(memberUserIdAlice);
-  const rtcSession = new MockRTCSession(room, membership);
-  const { getByLabelText, container, getByPlaceholderText } = render(
-    <TestComponent rtcSession={rtcSession} room={room} />,
-  );
-  await user.click(getByLabelText("action.raise_hand_or_send_reaction"));
-  await user.click(getByLabelText("action.open_search"));
-  const searchField = getByPlaceholderText("reaction_search");
-  act(() => {
-    fireEvent.keyDown(searchField, { key: "Escape" });
-  });
+  await user.click(getByLabelText("common.reactions"));
+  await user.click(getByLabelText("action.show_more"));
+  await user.click(getByLabelText("action.show_less"));
  expect(container).toMatchSnapshot();
 });
@@ -5,24 +5,16 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */

+import { Button as CpdButton, Tooltip, Alert } from "@vector-im/compound-web";
 import {
-  Button as CpdButton,
-  Tooltip,
-  Search,
-  Form,
-  Alert,
-} from "@vector-im/compound-web";
-import {
-  SearchIcon,
-  CloseIcon,
  RaisedHandSolidIcon,
-  ReactionIcon,
+  ChevronDownIcon,
+  ChevronUpIcon,
+  ReactionSolidIcon,
 } from "@vector-im/compound-design-tokens/assets/web/icons";
 import {
-  ChangeEventHandler,
  ComponentPropsWithoutRef,
  FC,
-  KeyboardEventHandler,
  ReactNode,
  useCallback,
  useEffect,
@@ -31,19 +23,11 @@ import {
 } from "react";
 import { useTranslation } from "react-i18next";
 import { logger } from "matrix-js-sdk/src/logger";
-import { EventType, RelationType } from "matrix-js-sdk/src/matrix";
-import { MatrixClient } from "matrix-js-sdk/src/client";
-import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";
 import classNames from "classnames";

 import { useReactions } from "../useReactions";
-import { useMatrixRTCSessionMemberships } from "../useMatrixRTCSessionMemberships";
 import styles from "./ReactionToggleButton.module.css";
-import {
-  ReactionOption,
-  ReactionSet,
-  ElementCallReactionEventType,
-} from "../reactions";
+import { ReactionOption, ReactionSet, ReactionsRowSize } from "../reactions";
 import { Modal } from "../Modal";

 interface InnerButtonProps extends ComponentPropsWithoutRef<"button"> {
@@ -55,15 +39,14 @@ const InnerButton: FC<InnerButtonProps> = ({ raised, open, ...props }) => {
  const { t } = useTranslation();

  return (
-    <Tooltip label={t("action.raise_hand_or_send_reaction")}>
+    <Tooltip label={t("common.reactions")}>
      <CpdButton
        className={classNames(raised && styles.raisedButton)}
        aria-expanded={open}
        aria-haspopup
-        aria-label={t("action.raise_hand_or_send_reaction")}
        kind={raised || open ? "primary" : "secondary"}
        iconOnly
-        Icon={raised ? RaisedHandSolidIcon : ReactionIcon}
+        Icon={raised ? RaisedHandSolidIcon : ReactionSolidIcon}
        {...props}
      />
    </Tooltip>
@@ -84,43 +67,11 @@ export function ReactionPopupMenu({
  canReact: boolean;
 }): ReactNode {
  const { t } = useTranslation();
-  const [searchText, setSearchText] = useState("");
-  const [isSearching, setIsSearching] = useState(false);
-  const onSearch = useCallback<ChangeEventHandler<HTMLInputElement>>((ev) => {
-    ev.preventDefault();
-    setSearchText(ev.target.value.trim().toLocaleLowerCase());
-  }, []);
+  const [isFullyExpanded, setExpanded] = useState(false);

  const filteredReactionSet = useMemo(
-    () =>
-      ReactionSet.filter(
-        (reaction) =>
-          !isSearching ||
-          (!!searchText &&
-            (reaction.name.startsWith(searchText) ||
-              reaction.alias?.some((a) => a.startsWith(searchText)))),
-      ).slice(0, 6),
-    [searchText, isSearching],
-  );
-
-  const onSearchKeyDown = useCallback<KeyboardEventHandler<never>>(
-    (ev) => {
-      if (ev.key === "Enter") {
-        ev.preventDefault();
-        if (!canReact) {
-          return;
-        }
-        if (filteredReactionSet.length !== 1) {
-          return;
-        }
-        sendReaction(filteredReactionSet[0]);
-        setIsSearching(false);
-      } else if (ev.key === "Escape") {
-        ev.preventDefault();
-        setIsSearching(false);
-      }
-    },
-    [sendReaction, filteredReactionSet, canReact, setIsSearching],
+    () => (isFullyExpanded ? ReactionSet : ReactionSet.slice(0, 5)),
+    [isFullyExpanded],
  );
  const label = isHandRaised ? t("action.lower_hand") : t("action.raise_hand");
  return (
@@ -136,9 +87,10 @@ export function ReactionPopupMenu({
      )}
      <div className={styles.reactionPopupMenu}>
        <section className={styles.handRaiseSection}>
-          <Tooltip label={label}>
+          <Tooltip label={label} caption="H">
            <CpdButton
              kind={isHandRaised ? "primary" : "secondary"}
+              aria-keyshortcuts="H"
              aria-pressed={isHandRaised}
              aria-label={label}
              onClick={() => toggleRaisedHand()}
@@ -148,41 +100,33 @@ export function ReactionPopupMenu({
          </Tooltip>
        </section>
        <div className={styles.verticalSeperator} />
-        <section>
-          {isSearching ? (
-            <>
-              <Form.Root className={styles.searchForm}>
-                <Search
-                  required
-                  value={searchText}
-                  name="reactionSearch"
-                  placeholder={t("reaction_search")}
-                  onChange={onSearch}
-                  onKeyDown={onSearchKeyDown}
-                  // This is a reasonable use of autofocus, we are focusing when
-                  // the search button is clicked (which matches the Element Web reaction picker)
-                  // eslint-disable-next-line jsx-a11y/no-autofocus
-                  autoFocus
-                />
-                <CpdButton
-                  Icon={CloseIcon}
-                  aria-label={t("action.close_search")}
-                  size="sm"
-                  kind="destructive"
-                  onClick={() => setIsSearching(false)}
-                />
-              </Form.Root>
-            </>
-          ) : null}
-          <menu className={styles.reactionsMenu}>
-            {filteredReactionSet.map((reaction) => (
-              <li className={styles.reactionPopupMenuItem} key={reaction.name}>
-                <Tooltip label={reaction.name}>
+        <section className={styles.reactionsMenuSection}>
+          <menu
+            className={classNames(
+              isFullyExpanded && styles.reactionsMenuExpanded,
+              styles.reactionsMenu,
+            )}
+          >
+            {filteredReactionSet.map((reaction, index) => (
+              <li key={reaction.name}>
+                <Tooltip
+                  label={reaction.name}
+                  caption={
+                    index < ReactionsRowSize
+                      ? (index + 1).toString()
+                      : undefined
+                  }
+                >
                  <CpdButton
                    kind="secondary"
                    className={styles.reactionButton}
                    disabled={!canReact}
                    onClick={() => sendReaction(reaction)}
+                    aria-keyshortcuts={
+                      index < ReactionsRowSize
+                        ? (index + 1).toString()
+                        : undefined
+                    }
                  >
                    {reaction.emoji}
                  </CpdButton>
@@ -191,73 +135,56 @@ export function ReactionPopupMenu({
            ))}
          </menu>
        </section>
-        {!isSearching ? (
-          <section style={{ marginLeft: "var(--cpd-separator-spacing)" }}>
-            <li key="search" className={styles.reactionPopupMenuItem}>
-              <Tooltip label={t("common.search")}>
-                <CpdButton
-                  iconOnly
-                  aria-label={t("action.open_search")}
-                  Icon={SearchIcon}
-                  kind="tertiary"
-                  onClick={() => setIsSearching(true)}
-                />
-              </Tooltip>
-            </li>
-          </section>
-        ) : null}
+        <section style={{ marginLeft: "var(--cpd-separator-spacing)" }}>
+          <Tooltip
+            label={
+              isFullyExpanded ? t("action.show_less") : t("action.show_more")
+            }
+          >
+            <CpdButton
+              iconOnly
+              aria-label={
+                isFullyExpanded ? t("action.show_less") : t("action.show_more")
+              }
+              Icon={isFullyExpanded ? ChevronUpIcon : ChevronDownIcon}
+              kind="tertiary"
+              onClick={() => setExpanded(!isFullyExpanded)}
+            />
+          </Tooltip>
+        </section>
      </div>
    </>
  );
 }

 interface ReactionToggleButtonProps extends ComponentPropsWithoutRef<"button"> {
-  rtcSession: MatrixRTCSession;
-  client: MatrixClient;
+  userId: string;
 }

 export function ReactionToggleButton({
-  client,
-  rtcSession,
+  userId,
  ...props
 }: ReactionToggleButtonProps): ReactNode {
  const { t } = useTranslation();
-  const { raisedHands, lowerHand, reactions } = useReactions();
+  const { raisedHands, toggleRaisedHand, sendReaction, reactions } =
+    useReactions();
  const [busy, setBusy] = useState(false);
-  const userId = client.getUserId()!;
-  const isHandRaised = !!raisedHands[userId];
-  const memberships = useMatrixRTCSessionMemberships(rtcSession);
  const [showReactionsMenu, setShowReactionsMenu] = useState(false);
  const [errorText, setErrorText] = useState<string>();

+  const isHandRaised = !!raisedHands[userId];
+  const canReact = !reactions[userId];
+
  useEffect(() => {
    // Clear whenever the reactions menu state changes.
    setErrorText(undefined);
  }, [showReactionsMenu]);

-  const canReact = !reactions[userId];
-
  const sendRelation = useCallback(
    async (reaction: ReactionOption) => {
      try {
-        const myMembership = memberships.find((m) => m.sender === userId);
-        if (!myMembership?.eventId) {
-          throw new Error("Cannot find own membership event");
-        }
-        const parentEventId = myMembership.eventId;
        setBusy(true);
-        await client.sendEvent(
-          rtcSession.room.roomId,
-          ElementCallReactionEventType,
-          {
-            "m.relates_to": {
-              rel_type: RelationType.Reference,
-              event_id: parentEventId,
-            },
-            emoji: reaction.emoji,
-            name: reaction.name,
-          },
-        );
+        await sendReaction(reaction);
        setErrorText(undefined);
        setShowReactionsMenu(false);
      } catch (ex) {
@@ -267,59 +194,25 @@ export function ReactionToggleButton({
        setBusy(false);
      }
    },
-    [memberships, client, userId, rtcSession],
+    [sendReaction],
  );

-  const toggleRaisedHand = useCallback(() => {
-    const raiseHand = async (): Promise<void> => {
-      if (isHandRaised) {
-        try {
-          setBusy(true);
-          await lowerHand();
-          setShowReactionsMenu(false);
-        } finally {
-          setBusy(false);
-        }
-      } else {
-        try {
-          const myMembership = memberships.find((m) => m.sender === userId);
-          if (!myMembership?.eventId) {
-            throw new Error("Cannot find own membership event");
-          }
-          const parentEventId = myMembership.eventId;
-          setBusy(true);
-          const reaction = await client.sendEvent(
-            rtcSession.room.roomId,
-            EventType.Reaction,
-            {
-              "m.relates_to": {
-                rel_type: RelationType.Annotation,
-                event_id: parentEventId,
-                key: "🖐️",
-              },
-            },
-          );
-          logger.debug("Sent raise hand event", reaction.event_id);
-          setErrorText(undefined);
-          setShowReactionsMenu(false);
-        } catch (ex) {
-          setErrorText(ex instanceof Error ? ex.message : "Unknown error");
-          logger.error("Failed to raise hand", ex);
-        } finally {
-          setBusy(false);
-        }
+  const wrappedToggleRaisedHand = useCallback(() => {
+    const toggleHand = async (): Promise<void> => {
+      try {
+        setBusy(true);
+        await toggleRaisedHand();
+        setShowReactionsMenu(false);
+      } catch (ex) {
+        setErrorText(ex instanceof Error ? ex.message : "Unknown error");
+        logger.error("Failed to raise/lower hand", ex);
+      } finally {
+        setBusy(false);
      }
    };

-    void raiseHand();
-  }, [
-    client,
-    isHandRaised,
-    memberships,
-    lowerHand,
-    rtcSession.room.roomId,
-    userId,
-  ]);
+    void toggleHand();
+  }, [toggleRaisedHand]);

  return (
    <>
@@ -335,14 +228,15 @@ export function ReactionToggleButton({
        title={t("action.pick_reaction")}
        hideHeader
        classNameModal={styles.reactionPopupMenuModal}
+        className={styles.reactionPopupMenuRoot}
        onDismiss={() => setShowReactionsMenu(false)}
      >
        <ReactionPopupMenu
          errorText={errorText}
          isHandRaised={isHandRaised}
-          canReact={canReact}
+          canReact={!busy && canReact}
          sendReaction={(reaction) => void sendRelation(reaction)}
-          toggleRaisedHand={toggleRaisedHand}
+          toggleRaisedHand={wrappedToggleRaisedHand}
        />
      </Modal>
    </>
@@ -1,6 +1,6 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html

-exports[`Can close search 1`] = `
+exports[`Can close reaction dialog 1`] = `
 <div
  aria-hidden="true"
  data-aria-hidden="true"
@@ -9,8 +9,7 @@ exports[`Can close search 1`] = `
    aria-disabled="false"
    aria-expanded="true"
    aria-haspopup="true"
-    aria-label="action.raise_hand_or_send_reaction"
-    aria-labelledby=":rec:"
+    aria-labelledby=":r9l:"
    class="_button_i91xf_17 _has-icon_i91xf_66 _icon-only_i91xf_59"
    data-kind="primary"
    data-size="lg"
@@ -26,26 +25,27 @@ exports[`Can close search 1`] = `
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
-        d="M15.536 15.536a1 1 0 0 0-1.415-1.415 2.987 2.987 0 0 1-2.12.879 2.988 2.988 0 0 1-2.122-.879 1 1 0 1 0-1.414 1.415A4.987 4.987 0 0 0 12 17c1.38 0 2.632-.56 3.536-1.464ZM10 10.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm5.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
-      />
-      <path
-        d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Zm-2 0a8 8 0 1 0-16 0 8 8 0 0 0 16 0Z"
+        clip-rule="evenodd"
+        d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Zm3.536-6.464a1 1 0 0 0-1.415-1.415A2.988 2.988 0 0 1 12 15a2.988 2.988 0 0 1-2.121-.879 1 1 0 1 0-1.414 1.415A4.987 4.987 0 0 0 12 17c1.38 0 2.632-.56 3.536-1.464ZM10 10.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm5.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
+        fill-rule="evenodd"
      />
    </svg>
  </button>
 </div>
 `;

-exports[`Can close search with the escape key 1`] = `
-<div>
+exports[`Can fully expand emoji picker 1`] = `
+<div
+  aria-hidden="true"
+  data-aria-hidden="true"
+>
  <button
    aria-disabled="false"
-    aria-expanded="false"
+    aria-expanded="true"
    aria-haspopup="true"
-    aria-label="action.raise_hand_or_send_reaction"
-    aria-labelledby=":rhh:"
+    aria-labelledby=":r6c:"
    class="_button_i91xf_17 _has-icon_i91xf_66 _icon-only_i91xf_59"
-    data-kind="secondary"
+    data-kind="primary"
    data-size="lg"
    role="button"
    tabindex="0"
@@ -59,10 +59,9 @@ exports[`Can close search with the escape key 1`] = `
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
-        d="M15.536 15.536a1 1 0 0 0-1.415-1.415 2.987 2.987 0 0 1-2.12.879 2.988 2.988 0 0 1-2.122-.879 1 1 0 1 0-1.414 1.415A4.987 4.987 0 0 0 12 17c1.38 0 2.632-.56 3.536-1.464ZM10 10.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm5.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
-      />
-      <path
-        d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Zm-2 0a8 8 0 1 0-16 0 8 8 0 0 0 16 0Z"
+        clip-rule="evenodd"
+        d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Zm3.536-6.464a1 1 0 0 0-1.415-1.415A2.988 2.988 0 0 1 12 15a2.988 2.988 0 0 1-2.121-.879 1 1 0 1 0-1.414 1.415A4.987 4.987 0 0 0 12 17c1.38 0 2.632-.56 3.536-1.464ZM10 10.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm5.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
+        fill-rule="evenodd"
      />
    </svg>
  </button>
@@ -75,8 +74,7 @@ exports[`Can lower hand 1`] = `
    aria-disabled="false"
    aria-expanded="false"
    aria-haspopup="true"
-    aria-label="action.raise_hand_or_send_reaction"
-    aria-labelledby=":r3i:"
+    aria-labelledby=":r36:"
    class="_button_i91xf_17 raisedButton _has-icon_i91xf_66 _icon-only_i91xf_59"
    data-kind="primary"
    data-size="lg"
@@ -108,7 +106,6 @@ exports[`Can open menu 1`] = `
    aria-disabled="false"
    aria-expanded="true"
    aria-haspopup="true"
-    aria-label="action.raise_hand_or_send_reaction"
    aria-labelledby=":r0:"
    class="_button_i91xf_17 _has-icon_i91xf_66 _icon-only_i91xf_59"
    data-kind="primary"
@@ -125,10 +122,9 @@ exports[`Can open menu 1`] = `
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
-        d="M15.536 15.536a1 1 0 0 0-1.415-1.415 2.987 2.987 0 0 1-2.12.879 2.988 2.988 0 0 1-2.122-.879 1 1 0 1 0-1.414 1.415A4.987 4.987 0 0 0 12 17c1.38 0 2.632-.56 3.536-1.464ZM10 10.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm5.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
-      />
-      <path
-        d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Zm-2 0a8 8 0 1 0-16 0 8 8 0 0 0 16 0Z"
+        clip-rule="evenodd"
+        d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Zm3.536-6.464a1 1 0 0 0-1.415-1.415A2.988 2.988 0 0 1 12 15a2.988 2.988 0 0 1-2.121-.879 1 1 0 1 0-1.414 1.415A4.987 4.987 0 0 0 12 17c1.38 0 2.632-.56 3.536-1.464ZM10 10.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm5.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
+        fill-rule="evenodd"
      />
    </svg>
  </button>
@@ -141,8 +137,7 @@ exports[`Can raise hand 1`] = `
    aria-disabled="false"
    aria-expanded="false"
    aria-haspopup="true"
-    aria-label="action.raise_hand_or_send_reaction"
-    aria-labelledby=":r1p:"
+    aria-labelledby=":r1j:"
    class="_button_i91xf_17 _has-icon_i91xf_66 _icon-only_i91xf_59"
    data-kind="secondary"
    data-size="lg"
@@ -158,82 +153,9 @@ exports[`Can raise hand 1`] = `
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
-        d="M15.536 15.536a1 1 0 0 0-1.415-1.415 2.987 2.987 0 0 1-2.12.879 2.988 2.988 0 0 1-2.122-.879 1 1 0 1 0-1.414 1.415A4.987 4.987 0 0 0 12 17c1.38 0 2.632-.56 3.536-1.464ZM10 10.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm5.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
-      />
-      <path
-        d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Zm-2 0a8 8 0 1 0-16 0 8 8 0 0 0 16 0Z"
-      />
-    </svg>
-  </button>
-</div>
-`;
-
-exports[`Can search for and send emoji 1`] = `
-<div
-  aria-hidden="true"
-  data-aria-hidden="true"
->
-  <button
-    aria-disabled="false"
-    aria-expanded="true"
-    aria-haspopup="true"
-    aria-label="action.raise_hand_or_send_reaction"
-    aria-labelledby=":r74:"
-    class="_button_i91xf_17 _has-icon_i91xf_66 _icon-only_i91xf_59"
-    data-kind="primary"
-    data-size="lg"
-    role="button"
-    tabindex="0"
-  >
-    <svg
-      aria-hidden="true"
-      fill="currentColor"
-      height="24"
-      viewBox="0 0 24 24"
-      width="24"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M15.536 15.536a1 1 0 0 0-1.415-1.415 2.987 2.987 0 0 1-2.12.879 2.988 2.988 0 0 1-2.122-.879 1 1 0 1 0-1.414 1.415A4.987 4.987 0 0 0 12 17c1.38 0 2.632-.56 3.536-1.464ZM10 10.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm5.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
-      />
-      <path
-        d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Zm-2 0a8 8 0 1 0-16 0 8 8 0 0 0 16 0Z"
-      />
-    </svg>
-  </button>
-</div>
-`;
-
-exports[`Can search for and send emoji with the keyboard 1`] = `
-<div
-  aria-hidden="true"
-  data-aria-hidden="true"
->
-  <button
-    aria-disabled="false"
-    aria-expanded="true"
-    aria-haspopup="true"
-    aria-label="action.raise_hand_or_send_reaction"
-    aria-labelledby=":ra3:"
-    class="_button_i91xf_17 _has-icon_i91xf_66 _icon-only_i91xf_59"
-    data-kind="primary"
-    data-size="lg"
-    role="button"
-    tabindex="0"
-  >
-    <svg
-      aria-hidden="true"
-      fill="currentColor"
-      height="24"
-      viewBox="0 0 24 24"
-      width="24"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M15.536 15.536a1 1 0 0 0-1.415-1.415 2.987 2.987 0 0 1-2.12.879 2.988 2.988 0 0 1-2.122-.879 1 1 0 1 0-1.414 1.415A4.987 4.987 0 0 0 12 17c1.38 0 2.632-.56 3.536-1.464ZM10 10.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm5.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
-      />
-      <path
-        d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Zm-2 0a8 8 0 1 0-16 0 8 8 0 0 0 16 0Z"
+        clip-rule="evenodd"
+        d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Zm3.536-6.464a1 1 0 0 0-1.415-1.415A2.988 2.988 0 0 1 12 15a2.988 2.988 0 0 1-2.121-.879 1 1 0 1 0-1.414 1.415A4.987 4.987 0 0 0 12 17c1.38 0 2.632-.56 3.536-1.464ZM10 10.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm5.5 1.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z"
+        fill-rule="evenodd"
      />
    </svg>
  </button>
@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */

-import { merge } from "lodash";
+import { merge } from "lodash-es";

 import { getUrlParams } from "../UrlParams";
 import {
@@ -28,11 +28,11 @@ export class Config {
      const internalInstance = new Config();
      Config.internalInstance = internalInstance;

-      Config.internalInstance.initPromise = downloadConfig(
-        "../config.json",
-      ).then((config) => {
-        internalInstance.config = merge({}, DEFAULT_CONFIG, config);
-      });
+      Config.internalInstance.initPromise = downloadConfig("/config.json").then(
+        (config) => {
+          internalInstance.config = merge({}, DEFAULT_CONFIG, config);
+        },
+      );
    }
    return Config.internalInstance.initPromise;
  }
@@ -74,11 +74,7 @@ async function downloadConfig(
  configJsonFilename: string,
 ): Promise<ConfigOptions> {
  const url = new URL(configJsonFilename, window.location.href);
-  url.searchParams.set("cachebuster", Date.now().toString());
-  const res = await fetch(url, {
-    cache: "no-cache",
-    method: "GET",
-  });
+  const res = await fetch(url);

  if (!res.ok || res.status === 404 || res.status === 0) {
    // Lack of a config isn't an error, we should just use the defaults.
@@ -5,14 +5,15 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */

-/* Inter unexpectedly contains various codepoints which collide with emoji, even
-   when variation-16 is applied to request the emoji variant.  From eyeballing
-   the emoji picker, these are: 20e3, 23cf, 24c2, 25a0-25c1, 2665, 2764, 2b06, 2b1c.
-   Therefore we define a unicode-range to load which excludes the glyphs
-   (to avoid having to maintain a fork of Inter). */
-
@layer normalize, compound-legacy, compound;

+@import url("@fontsource/inter/400.css");
+@import url("@fontsource/inter/500.css");
+@import url("@fontsource/inter/600.css");
+@import url("@fontsource/inter/700.css");
+@import url("@fontsource/inconsolata/400.css");
+@import url("@fontsource/inconsolata/700.css");
+
@import url("normalize.css/normalize.css") layer(normalize);
@import url("@vector-im/compound-design-tokens/assets/web/css/compound-design-tokens.css")
 layer(compound);
@@ -52,94 +53,6 @@ layer(compound);
  --stopgap-background-85: rgba(16, 19, 23, 0.85);
 }

-@font-face {
-  font-family: "Inter";
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  unicode-range: var(--inter-unicode-range);
-  src:
-    url("/fonts/Inter/Inter-Regular.woff2") format("woff2"),
-    url("/fonts/Inter/Inter-Regular.woff") format("woff");
-}
-
-@font-face {
-  font-family: "Inter";
-  font-style: italic;
-  font-weight: 400;
-  font-display: swap;
-  unicode-range: var(--inter-unicode-range);
-  src:
-    url("/fonts/Inter/Inter-Italic.woff2") format("woff2"),
-    url("/fonts/Inter/Inter-Italic.woff") format("woff");
-}
-
-@font-face {
-  font-family: "Inter";
-  font-style: normal;
-  font-weight: 500;
-  font-display: swap;
-  unicode-range: var(--inter-unicode-range);
-  src:
-    url("/fonts/Inter/Inter-Medium.woff2") format("woff2"),
-    url("/fonts/Inter/Inter-Medium.woff") format("woff");
-}
-
-@font-face {
-  font-family: "Inter";
-  font-style: italic;
-  font-weight: 500;
-  font-display: swap;
-  unicode-range: var(--inter-unicode-range);
-  src:
-    url("/fonts/Inter/Inter-MediumItalic.woff2") format("woff2"),
-    url("/fonts/Inter/Inter-MediumItalic.woff") format("woff");
-}
-
-@font-face {
-  font-family: "Inter";
-  font-style: normal;
-  font-weight: 600;
-  font-display: swap;
-  unicode-range: var(--inter-unicode-range);
-  src:
-    url("/fonts/Inter/Inter-SemiBold.woff2") format("woff2"),
-    url("/fonts/Inter/Inter-SemiBold.woff") format("woff");
-}
-
-@font-face {
-  font-family: "Inter";
-  font-style: italic;
-  font-weight: 600;
-  font-display: swap;
-  unicode-range: var(--inter-unicode-range);
-  src:
-    url("/fonts/Inter/Inter-SemiBoldItalic.woff2") format("woff2"),
-    url("/fonts/Inter/Inter-SemiBoldItalic.woff") format("woff");
-}
-
-@font-face {
-  font-family: "Inter";
-  font-style: normal;
-  font-weight: 700;
-  font-display: swap;
-  unicode-range: var(--inter-unicode-range);
-  src:
-    url("/fonts/Inter/Inter-Bold.woff2") format("woff2"),
-    url("/fonts/Inter/Inter-Bold.woff") format("woff");
-}
-
-@font-face {
-  font-family: "Inter";
-  font-style: italic;
-  font-weight: 700;
-  font-display: swap;
-  unicode-range: var(--inter-unicode-range);
-  src:
-    url("/fonts/Inter/Inter-BoldItalic.woff2") format("woff2"),
-    url("/fonts/Inter/Inter-BoldItalic.woff") format("woff");
-}
-
 body {
  background-color: var(--cpd-color-bg-canvas-default);
  background-size: calc(max(1440px, 100vw)) calc(max(800px, 100vh));
@@ -185,10 +98,6 @@ body[data-platform="ios"] {
  --cpd-font-family-sans: -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
 }

-body[data-platform="desktop"] {
-  --cpd-font-family-sans: "Inter", sans-serif;
-}
-
@layer compound-legacy {
  h1,
  h2,
@@ -9,9 +9,9 @@ import { expect, test } from "vitest";

 import { Initializer } from "../src/initializer";

-test("initBeforeReact sets font family from URL param", () => {
+test("initBeforeReact sets font family from URL param", async () => {
  window.location.hash = "#?font=DejaVu Sans";
-  Initializer.initBeforeReact();
+  await Initializer.initBeforeReact();
  expect(
    getComputedStyle(document.documentElement).getPropertyValue(
      "--font-family",
@@ -19,9 +19,9 @@ test("initBeforeReact sets font family from URL param", () => {
  ).toBe('"DejaVu Sans"');
 });

-test("initBeforeReact sets font scale from URL param", () => {
+test("initBeforeReact sets font scale from URL param", async () => {
  window.location.hash = "#?fontScale=1.2";
-  Initializer.initBeforeReact();
+  await Initializer.initBeforeReact();
  expect(
    getComputedStyle(document.documentElement).getPropertyValue("--font-scale"),
  ).toBe("1.2");
@@ -5,18 +5,85 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */

-import i18n from "i18next";
+import i18n, {
+  type BackendModule,
+  type ReadCallback,
+  type ResourceKey,
+} from "i18next";
 import { initReactI18next } from "react-i18next";
 import LanguageDetector from "i18next-browser-languagedetector";
-import Backend from "i18next-http-backend";
 import * as Sentry from "@sentry/react";
 import { logger } from "matrix-js-sdk/src/logger";
+import { shouldPolyfill as shouldPolyfillSegmenter } from "@formatjs/intl-segmenter/should-polyfill";
+import { shouldPolyfill as shouldPolyfillDurationFormat } from "@formatjs/intl-durationformat/should-polyfill";

 import { getUrlParams } from "./UrlParams";
 import { Config } from "./config/Config";
 import { ElementCallOpenTelemetry } from "./otel/otel";
 import { platform } from "./Platform";

+// This generates a map of locale names to their URL (based on import.meta.url), which looks like this:
+// {
+//   "../locales/en-GB/app.json": "/whatever/assets/root/locales/en-aabbcc.json",
+//   ...
+// }
+const locales = import.meta.glob<string>("../locales/*/*.json", {
+  query: "?url",
+  import: "default",
+  eager: true,
+});
+
+const getLocaleUrl = (
+  language: string,
+  namespace: string,
+): string | undefined => locales[`../locales/${language}/${namespace}.json`];
+
+const supportedLngs = [
+  ...new Set(
+    Object.keys(locales).map((url) => {
+      // The URLs are of the form ../locales/en-GB/app.json
+      // This extracts the language code from the URL
+      const lang = url.match(/\/([^/]+)\/[^/]+\.json$/)?.[1];
+      if (!lang) {
+        throw new Error(`Could not parse locale URL ${url}`);
+      }
+      return lang;
+    }),
+  ),
+];
+
+// A backend that fetches the locale files from the URLs generated by the glob above
+const Backend = {
+  type: "backend",
+  init(): void {},
+  read(language: string, namespace: string, callback: ReadCallback): void {
+    (async (): Promise<ResourceKey> => {
+      const url = getLocaleUrl(language, namespace);
+      if (!url) {
+        throw new Error(
+          `Namespace ${namespace} for locale ${language} not found`,
+        );
+      }
+
+      const response = await fetch(url, {
+        credentials: "omit",
+        headers: {
+          Accept: "application/json",
+        },
+      });
+
+      if (!response.ok) {
+        throw Error(`Failed to fetch ${url}`);
+      }
+
+      return await response.json();
+    })().then(
+      (data) => callback(null, data),
+      (error) => callback(error, null),
+    );
+  },
+} satisfies BackendModule;
+
 enum LoadState {
  None,
  Loading,
@@ -41,10 +108,17 @@ export class Initializer {
    return Initializer.internalInstance?.isInitialized;
  }

-  public static initBeforeReact(): void {
-    // this maybe also needs to return a promise in the future,
-    // if we have to do async inits before showing the loading screen
-    // but this should be avoided if possible
+  public static async initBeforeReact(): Promise<void> {
+    const polyfills: Promise<unknown>[] = [];
+    if (shouldPolyfillSegmenter()) {
+      polyfills.push(import("@formatjs/intl-segmenter/polyfill-force"));
+    }
+
+    if (shouldPolyfillDurationFormat()) {
+      polyfills.push(import("@formatjs/intl-durationformat/polyfill-force"));
+    }
+
+    await Promise.all(polyfills);

    //i18n
    const languageDetector = new LanguageDetector();
@@ -54,7 +128,7 @@ export class Initializer {
      lookup: () => getUrlParams().lang ?? undefined,
    });

-    i18n
+    await i18n
      .use(Backend)
      .use(languageDetector)
      .use(initReactI18next)
@@ -65,6 +139,7 @@ export class Initializer {
        nsSeparator: false,
        pluralSeparator: "_",
        contextSeparator: "|",
+        supportedLngs,
        interpolation: {
          escapeValue: false, // React has built-in XSS protections
        },
@@ -74,9 +149,6 @@ export class Initializer {
          order: ["urlFragment", "navigator"],
          caches: [],
        },
-      })
-      .catch((e) => {
-        logger.error("Failed to initialize i18n", e);
      });

    // Custom Themeing
@@ -20,8 +20,6 @@ import {
  setLogExtension as setLKLogExtension,
  setLogLevel as setLKLogLevel,
 } from "livekit-client";
-import "@formatjs/intl-segmenter/polyfill";
-import "@formatjs/intl-durationformat/polyfill";

 import { App } from "./App";
 import { init as initRageshake } from "./settings/rageshake";
@@ -57,12 +55,17 @@ if (fatalError !== null) {
  throw fatalError; // Stop the app early
 }

-Initializer.initBeforeReact();
+Initializer.initBeforeReact()
+  .then(() => {
+    const history = createBrowserHistory();

-const history = createBrowserHistory();
-
-root.render(
-  <StrictMode>
-    <App history={history} />
-  </StrictMode>,
-);
+    root.render(
+      <StrictMode>
+        <App history={history} />
+      </StrictMode>,
+    );
+  })
+  .catch((e) => {
+    logger.error("Failed to initialize app", e);
+    root.render(e.message);
+  });
@@ -11,19 +11,12 @@ import {
  useCallback,
  useEffect,
  useState,
+  useMemo,
 } from "react";
-import { DurationFormat } from "@formatjs/intl-durationformat";
 import { useTranslation } from "react-i18next";

 import { ReactionIndicator } from "./ReactionIndicator";

-const durationFormatter = new DurationFormat(undefined, {
-  minutesDisplay: "always",
-  secondsDisplay: "always",
-  hoursDisplay: "auto",
-  style: "digital",
-});
-
 export function RaisedHandIndicator({
  raisedHandTime,
  miniature,
@@ -38,6 +31,17 @@ export function RaisedHandIndicator({
  const { t } = useTranslation();
  const [raisedHandDuration, setRaisedHandDuration] = useState("");

+  const durationFormatter = useMemo(
+    () =>
+      new Intl.DurationFormat(undefined, {
+        minutesDisplay: "always",
+        secondsDisplay: "always",
+        hoursDisplay: "auto",
+        style: "digital",
+      }),
+    [],
+  );
+
  const clickCallback = useCallback<MouseEventHandler<HTMLButtonElement>>(
    (event) => {
      if (!onClick) {
@@ -69,7 +73,7 @@ export function RaisedHandIndicator({
    calculateTime();
    const to = setInterval(calculateTime, 1000);
    return (): void => clearInterval(to);
-  }, [setRaisedHandDuration, raisedHandTime, showTimer]);
+  }, [setRaisedHandDuration, raisedHandTime, showTimer, durationFormatter]);

  if (!raisedHandTime) {
    return;
@@ -1,19 +1,25 @@
 .reactionIndicatorWidget {
  display: flex;
-  background-color: var(--cpd-color-bg-subtle-primary);
+  /* background-color: var(--cpd-color-bg-subtle-primary); */
  border-radius: var(--cpd-radius-pill-effect);
-  color: var(--cpd-color-icon-secondary);
+  box-shadow: 0 0 var(--cpd-space-2x) #00000040;
+  background: "ffffff40";
+  backdrop-filter: blur(10px);
+  outline: var(--cpd-border-width-1) solid var(--cpd-color-alpha-gray-400);
+  outline-offset: calc(-1 * var(--cpd-border-width-1));
 }

 .reactionIndicatorWidget > p {
  padding: none;
  margin-top: auto;
  margin-bottom: auto;
-  width: 4em;
+  width: 3em;
 }

 .reactionIndicatorWidgetLarge > p {
  padding: var(--cpd-space-2x);
+  padding-right: var(--cpd-space-4x);
+  padding-left: 0;
 }

 .reactionLarge {
@@ -25,13 +31,13 @@
 .reaction {
  margin: var(--cpd-space-1x);
  color: var(--cpd-color-icon-secondary);
-  background-color: var(--cpd-color-icon-secondary);
+  /* background-color: var(--cpd-color-icon-secondary); */
  display: flex;
  align-items: center;
  border-radius: var(--cpd-radius-pill-effect);
  user-select: none;
  overflow: hidden;
-  box-shadow: var(--small-drop-shadow);
+  /* box-shadow: var(--small-drop-shadow); */
  box-sizing: border-box;
  max-inline-size: 100%;
  max-width: fit-content;
@@ -73,7 +73,9 @@ export const GenericReaction: ReactionOption = {
  },
 };

-// The first 6 reactions are always visible.
+export const ReactionsRowSize = 5;
+
+// The first {ReactionsRowSize} reactions are always visible.
 export const ReactionSet: ReactionOption[] = [
  {
    emoji: "👍",
@@ -183,7 +183,8 @@ export const InCallView: FC<InCallViewProps> = ({
  onShareClick,
 }) => {
  const [soundEffectVolume] = useSetting(soundEffectVolumeSetting);
-  const { supportsReactions, raisedHands } = useReactions();
+  const { supportsReactions, raisedHands, sendReaction, toggleRaisedHand } =
+    useReactions();
  const raisedHandCount = useMemo(
    () => Object.keys(raisedHands).length,
    [raisedHands],
@@ -227,6 +228,8 @@ export const InCallView: FC<InCallViewProps> = ({
    toggleMicrophone,
    toggleCamera,
    (muted) => muteStates.audio.setEnabled?.(!muted),
+    (reaction) => void sendReaction(reaction),
+    () => void toggleRaisedHand(),
  );

  const windowMode = useObservableEagerState(vm.windowMode);
@@ -572,8 +575,7 @@ export const InCallView: FC<InCallViewProps> = ({
      <ReactionToggleButton
        key="raise_hand"
        className={styles.raiseHand}
-        client={client}
-        rtcSession={rtcSession}
+        userId={client.getUserId()!}
        onTouchEnd={onControlsTouchEnd}
      />,
    );
@@ -8,7 +8,8 @@ Please see LICENSE in the repository root for full details.
 .content {
  width: 100%;
  max-width: 350px;
-  align-self: center;
+  margin-left: auto;
+  margin-right: auto;
 }

 .avatarFieldRow {
@@ -28,7 +28,7 @@ Please see LICENSE in the repository root for full details.
 //    purge on startup to prevent logs from accumulating.

 import EventEmitter from "events";
-import { throttle } from "lodash";
+import { throttle } from "lodash-es";
 import { Logger, logger } from "matrix-js-sdk/src/logger";
 import { randomString } from "matrix-js-sdk/src/randomstring";
 import loglevel, { LoggingMethod } from "loglevel";
@@ -6,9 +6,6 @@ Please see LICENSE in the repository root for full details.
 */

 import { ComponentProps, useCallback, useEffect, useState } from "react";
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
-import pako from "pako";
 import { logger } from "matrix-js-sdk/src/logger";
 import {
  ClientEvent,
@@ -23,11 +20,14 @@ import { Config } from "../config/Config";
 import { ElementCallOpenTelemetry } from "../otel/otel";
 import { RageshakeRequestModal } from "../room/RageshakeRequestModal";

-const gzip = (text: string): Blob => {
+const gzip = async (text: string): Promise<Blob> => {
+  // pako is relatively large (200KB), so we only import it when needed
+  const { gzip: pakoGzip } = await import("pako");
+
  // encode as UTF-8
  const buf = new TextEncoder().encode(text);
  // compress
-  return new Blob([pako.gzip(buf)]);
+  return new Blob([pakoGzip(buf)]);
 };

 /**
@@ -253,12 +253,14 @@ export function useSubmitRageshake(): {
          const logs = await getLogsForReport();

          for (const entry of logs) {
-            body.append("compressed-log", gzip(entry.lines), entry.id);
+            body.append("compressed-log", await gzip(entry.lines), entry.id);
          }

          body.append(
            "file",
-            gzip(ElementCallOpenTelemetry.instance.rageshakeProcessor!.dump()),
+            await gzip(
+              ElementCallOpenTelemetry.instance.rageshakeProcessor!.dump(),
+            ),
            "traces.json.gz",
          );
        }
@@ -23,7 +23,7 @@ import {
  RemoteParticipant,
 } from "livekit-client";
 import * as ComponentsCore from "@livekit/components-core";
-import { isEqual } from "lodash";
+import { isEqual } from "lodash-es";

 import { CallViewModel, Layout } from "./CallViewModel";
 import {
@@ -231,30 +231,33 @@ function withCallViewModel(
 test("participants are retained during a focus switch", () => {
  withTestScheduler(({ cold, expectObservable }) => {
    // Participants disappear on frame 2 and come back on frame 3
-    const participantMarbles = "a-ba";
+    const participantInputMarbles = "a-ba";
    // Start switching focus on frame 1 and reconnect on frame 3
-    const connectionMarbles = " cs-c";
+    const connectionInputMarbles = " cs-c";
    // The visible participants should remain the same throughout the switch
-    const layoutMarbles = "     a";
+    const expectedLayoutMarbles = "  a";

    withCallViewModel(
-      cold(participantMarbles, {
+      cold(participantInputMarbles, {
        a: [aliceParticipant, bobParticipant],
        b: [],
      }),
-      cold(connectionMarbles, {
+      cold(connectionInputMarbles, {
        c: ConnectionState.Connected,
        s: ECAddonConnectionState.ECSwitchingFocus,
      }),
      new Map(),
      (vm) => {
-        expectObservable(summarizeLayout(vm.layout)).toBe(layoutMarbles, {
-          a: {
-            type: "grid",
-            spotlight: undefined,
-            grid: ["local:0", `${aliceId}:0`, `${bobId}:0`],
+        expectObservable(summarizeLayout(vm.layout)).toBe(
+          expectedLayoutMarbles,
+          {
+            a: {
+              type: "grid",
+              spotlight: undefined,
+              grid: ["local:0", `${aliceId}:0`, `${bobId}:0`],
+            },
          },
-        });
+        );
      },
    );
  });
@@ -264,17 +267,17 @@ test("screen sharing activates spotlight layout", () => {
  withTestScheduler(({ cold, schedule, expectObservable }) => {
    // Start with no screen shares, then have Alice and Bob share their screens,
    // then return to no screen shares, then have just Alice share for a bit
-    const participantMarbles = " abcda-ba";
+    const participantInputMarbles = "    abcda-ba";
    // While there are no screen shares, switch to spotlight manually, and then
    // switch back to grid at the end
-    const modeMarbles = "        -----s--g";
+    const modeInputMarbles = "           -----s--g";
    // We should automatically enter spotlight for the first round of screen
    // sharing, then return to grid, then manually go into spotlight, and
    // remain in spotlight until we manually go back to grid
-    const layoutMarbles = "      abcdaefeg";
-    const showSpeakingMarbles = "y----nyny";
+    const expectedLayoutMarbles = "      abcdaefeg";
+    const expectedShowSpeakingMarbles = "y----nyny";
    withCallViewModel(
-      cold(participantMarbles, {
+      cold(participantInputMarbles, {
        a: [aliceParticipant, bobParticipant],
        b: [aliceSharingScreen, bobParticipant],
        c: [aliceSharingScreen, bobSharingScreen],
@@ -283,52 +286,61 @@ test("screen sharing activates spotlight layout", () => {
      of(ConnectionState.Connected),
      new Map(),
      (vm) => {
-        schedule(modeMarbles, {
+        schedule(modeInputMarbles, {
          s: () => vm.setGridMode("spotlight"),
          g: () => vm.setGridMode("grid"),
        });

-        expectObservable(summarizeLayout(vm.layout)).toBe(layoutMarbles, {
-          a: {
-            type: "grid",
-            spotlight: undefined,
-            grid: ["local:0", `${aliceId}:0`, `${bobId}:0`],
+        expectObservable(summarizeLayout(vm.layout)).toBe(
+          expectedLayoutMarbles,
+          {
+            a: {
+              type: "grid",
+              spotlight: undefined,
+              grid: ["local:0", `${aliceId}:0`, `${bobId}:0`],
+            },
+            b: {
+              type: "spotlight-landscape",
+              spotlight: [`${aliceId}:0:screen-share`],
+              grid: ["local:0", `${aliceId}:0`, `${bobId}:0`],
+            },
+            c: {
+              type: "spotlight-landscape",
+              spotlight: [
+                `${aliceId}:0:screen-share`,
+                `${bobId}:0:screen-share`,
+              ],
+              grid: ["local:0", `${aliceId}:0`, `${bobId}:0`],
+            },
+            d: {
+              type: "spotlight-landscape",
+              spotlight: [`${bobId}:0:screen-share`],
+              grid: ["local:0", `${aliceId}:0`, `${bobId}:0`],
+            },
+            e: {
+              type: "spotlight-landscape",
+              spotlight: [`${aliceId}:0`],
+              grid: ["local:0", `${bobId}:0`],
+            },
+            f: {
+              type: "spotlight-landscape",
+              spotlight: [`${aliceId}:0:screen-share`],
+              grid: ["local:0", `${bobId}:0`, `${aliceId}:0`],
+            },
+            g: {
+              type: "grid",
+              spotlight: undefined,
+              grid: ["local:0", `${bobId}:0`, `${aliceId}:0`],
+            },
          },
-          b: {
-            type: "spotlight-landscape",
-            spotlight: [`${aliceId}:0:screen-share`],
-            grid: ["local:0", `${aliceId}:0`, `${bobId}:0`],
+        );
+        expectObservable(vm.showSpeakingIndicators).toBe(
+          expectedShowSpeakingMarbles,
+          {
+            y: true,
+            n: false,
          },
-          c: {
-            type: "spotlight-landscape",
-            spotlight: [`${aliceId}:0:screen-share`, `${bobId}:0:screen-share`],
-            grid: ["local:0", `${aliceId}:0`, `${bobId}:0`],
-          },
-          d: {
-            type: "spotlight-landscape",
-            spotlight: [`${bobId}:0:screen-share`],
-            grid: ["local:0", `${aliceId}:0`, `${bobId}:0`],
-          },
-          e: {
-            type: "spotlight-landscape",
-            spotlight: [`${aliceId}:0`],
-            grid: ["local:0", `${bobId}:0`],
-          },
-          f: {
-            type: "spotlight-landscape",
-            spotlight: [`${aliceId}:0:screen-share`],
-            grid: ["local:0", `${bobId}:0`, `${aliceId}:0`],
-          },
-          g: {
-            type: "grid",
-            spotlight: undefined,
-            grid: ["local:0", `${bobId}:0`, `${aliceId}:0`],
-          },
-        });
-        expectObservable(vm.showSpeakingIndicators).toBe(showSpeakingMarbles, {
-          y: true,
-          n: false,
-        });
+        );
      },
    );
  });
@@ -336,27 +348,27 @@ test("screen sharing activates spotlight layout", () => {

 test("participants stay in the same order unless to appear/disappear", () => {
  withTestScheduler(({ cold, schedule, expectObservable }) => {
-    const modeMarbles = "a";
+    const modeInputMarbles = "     a";
    // First Bob speaks, then Dave, then Alice
-    const aSpeakingMarbles = "n- 1998ms - 1999ms y";
-    const bSpeakingMarbles = "ny 1998ms n 1999ms ";
-    const dSpeakingMarbles = "n- 1998ms y 1999ms n";
+    const aSpeakingInputMarbles = "n- 1998ms - 1999ms y";
+    const bSpeakingInputMarbles = "ny 1998ms n 1999ms ";
+    const dSpeakingInputMarbles = "n- 1998ms y 1999ms n";
    // Nothing should change when Bob speaks, because Bob is already on screen.
    // When Dave speaks he should switch with Alice because she's the one who
    // hasn't spoken at all. Then when Alice speaks, she should return to her
    // place at the top.
-    const layoutMarbles = "   a  1999ms b 1999ms a 57999ms c 1999ms a";
+    const expectedLayoutMarbles = "a  1999ms b 1999ms a 57999ms c 1999ms a";

    withCallViewModel(
      of([aliceParticipant, bobParticipant, daveParticipant]),
      of(ConnectionState.Connected),
      new Map([
-        [aliceParticipant, cold(aSpeakingMarbles, { y: true, n: false })],
-        [bobParticipant, cold(bSpeakingMarbles, { y: true, n: false })],
-        [daveParticipant, cold(dSpeakingMarbles, { y: true, n: false })],
+        [aliceParticipant, cold(aSpeakingInputMarbles, { y: true, n: false })],
+        [bobParticipant, cold(bSpeakingInputMarbles, { y: true, n: false })],
+        [daveParticipant, cold(dSpeakingInputMarbles, { y: true, n: false })],
      ]),
      (vm) => {
-        schedule(modeMarbles, {
+        schedule(modeInputMarbles, {
          a: () => {
            // We imagine that only three tiles (the first three) will be visible
            // on screen at a time
@@ -369,23 +381,26 @@ test("participants stay in the same order unless to appear/disappear", () => {
          },
        });

-        expectObservable(summarizeLayout(vm.layout)).toBe(layoutMarbles, {
-          a: {
-            type: "grid",
-            spotlight: undefined,
-            grid: ["local:0", `${aliceId}:0`, `${bobId}:0`, `${daveId}:0`],
+        expectObservable(summarizeLayout(vm.layout)).toBe(
+          expectedLayoutMarbles,
+          {
+            a: {
+              type: "grid",
+              spotlight: undefined,
+              grid: ["local:0", `${aliceId}:0`, `${bobId}:0`, `${daveId}:0`],
+            },
+            b: {
+              type: "grid",
+              spotlight: undefined,
+              grid: ["local:0", `${daveId}:0`, `${bobId}:0`, `${aliceId}:0`],
+            },
+            c: {
+              type: "grid",
+              spotlight: undefined,
+              grid: ["local:0", `${aliceId}:0`, `${daveId}:0`, `${bobId}:0`],
+            },
          },
-          b: {
-            type: "grid",
-            spotlight: undefined,
-            grid: ["local:0", `${daveId}:0`, `${bobId}:0`, `${aliceId}:0`],
-          },
-          c: {
-            type: "grid",
-            spotlight: undefined,
-            grid: ["local:0", `${aliceId}:0`, `${daveId}:0`, `${bobId}:0`],
-          },
-        });
+        );
      },
    );
  });
@@ -394,50 +409,53 @@ test("participants stay in the same order unless to appear/disappear", () => {
 test("spotlight speakers swap places", () => {
  withTestScheduler(({ cold, schedule, expectObservable }) => {
    // Go immediately into spotlight mode for the test
-    const modeMarbles = "     s";
+    const modeInputMarbles = "     s";
    // First Bob speaks, then Dave, then Alice
-    const aSpeakingMarbles = "n--y";
-    const bSpeakingMarbles = "nyn";
-    const dSpeakingMarbles = "n-yn";
+    const aSpeakingInputMarbles = "n--y";
+    const bSpeakingInputMarbles = "nyn";
+    const dSpeakingInputMarbles = "n-yn";
    // Alice should start in the spotlight, then Bob, then Dave, then Alice
    // again. However, the positions of Dave and Bob in the grid should be
    // reversed by the end because they've been swapped in and out of the
    // spotlight.
-    const layoutMarbles = "   abcd";
+    const expectedLayoutMarbles = "abcd";

    withCallViewModel(
      of([aliceParticipant, bobParticipant, daveParticipant]),
      of(ConnectionState.Connected),
      new Map([
-        [aliceParticipant, cold(aSpeakingMarbles, { y: true, n: false })],
-        [bobParticipant, cold(bSpeakingMarbles, { y: true, n: false })],
-        [daveParticipant, cold(dSpeakingMarbles, { y: true, n: false })],
+        [aliceParticipant, cold(aSpeakingInputMarbles, { y: true, n: false })],
+        [bobParticipant, cold(bSpeakingInputMarbles, { y: true, n: false })],
+        [daveParticipant, cold(dSpeakingInputMarbles, { y: true, n: false })],
      ]),
      (vm) => {
-        schedule(modeMarbles, { s: () => vm.setGridMode("spotlight") });
+        schedule(modeInputMarbles, { s: () => vm.setGridMode("spotlight") });

-        expectObservable(summarizeLayout(vm.layout)).toBe(layoutMarbles, {
-          a: {
-            type: "spotlight-landscape",
-            spotlight: [`${aliceId}:0`],
-            grid: ["local:0", `${bobId}:0`, `${daveId}:0`],
+        expectObservable(summarizeLayout(vm.layout)).toBe(
+          expectedLayoutMarbles,
+          {
+            a: {
+              type: "spotlight-landscape",
+              spotlight: [`${aliceId}:0`],
+              grid: ["local:0", `${bobId}:0`, `${daveId}:0`],
+            },
+            b: {
+              type: "spotlight-landscape",
+              spotlight: [`${bobId}:0`],
+              grid: ["local:0", `${aliceId}:0`, `${daveId}:0`],
+            },
+            c: {
+              type: "spotlight-landscape",
+              spotlight: [`${daveId}:0`],
+              grid: ["local:0", `${aliceId}:0`, `${bobId}:0`],
+            },
+            d: {
+              type: "spotlight-landscape",
+              spotlight: [`${aliceId}:0`],
+              grid: ["local:0", `${daveId}:0`, `${bobId}:0`],
+            },
          },
-          b: {
-            type: "spotlight-landscape",
-            spotlight: [`${bobId}:0`],
-            grid: ["local:0", `${aliceId}:0`, `${daveId}:0`],
-          },
-          c: {
-            type: "spotlight-landscape",
-            spotlight: [`${daveId}:0`],
-            grid: ["local:0", `${aliceId}:0`, `${bobId}:0`],
-          },
-          d: {
-            type: "spotlight-landscape",
-            spotlight: [`${aliceId}:0`],
-            grid: ["local:0", `${daveId}:0`, `${bobId}:0`],
-          },
-        });
+        );
      },
    );
  });
@@ -446,31 +464,34 @@ test("spotlight speakers swap places", () => {
 test("layout enters picture-in-picture mode when requested", () => {
  withTestScheduler(({ schedule, expectObservable }) => {
    // Enable then disable picture-in-picture
-    const pipControlMarbles = "-ed";
+    const pipControlInputMarbles = "-ed";
    // Should go into picture-in-picture layout then back to grid
-    const layoutMarbles = "    aba";
+    const expectedLayoutMarbles = " aba";

    withCallViewModel(
      of([aliceParticipant, bobParticipant]),
      of(ConnectionState.Connected),
      new Map(),
      (vm) => {
-        schedule(pipControlMarbles, {
+        schedule(pipControlInputMarbles, {
          e: () => window.controls.enablePip(),
          d: () => window.controls.disablePip(),
        });

-        expectObservable(summarizeLayout(vm.layout)).toBe(layoutMarbles, {
-          a: {
-            type: "grid",
-            spotlight: undefined,
-            grid: ["local:0", `${aliceId}:0`, `${bobId}:0`],
+        expectObservable(summarizeLayout(vm.layout)).toBe(
+          expectedLayoutMarbles,
+          {
+            a: {
+              type: "grid",
+              spotlight: undefined,
+              grid: ["local:0", `${aliceId}:0`, `${bobId}:0`],
+            },
+            b: {
+              type: "pip",
+              spotlight: [`${aliceId}:0`],
+            },
          },
-          b: {
-            type: "pip",
-            spotlight: [`${aliceId}:0`],
-          },
-        });
+        );
      },
    );
  });
@@ -480,23 +501,23 @@ test("spotlight remembers whether it's expanded", () => {
  withTestScheduler(({ schedule, expectObservable }) => {
    // Start in spotlight mode, then switch to grid and back to spotlight a
    // couple times
-    const modeMarbles = "  s-gs-gs";
+    const modeInputMarbles = "     s-gs-gs";
    // Expand and collapse the spotlight
-    const expandMarbles = "-a--a";
+    const expandInputMarbles = "   -a--a";
    // Spotlight should stay expanded during the first mode switch, and stay
    // collapsed during the second mode switch
-    const layoutMarbles = "abcbada";
+    const expectedLayoutMarbles = "abcbada";

    withCallViewModel(
      of([aliceParticipant, bobParticipant]),
      of(ConnectionState.Connected),
      new Map(),
      (vm) => {
-        schedule(modeMarbles, {
+        schedule(modeInputMarbles, {
          s: () => vm.setGridMode("spotlight"),
          g: () => vm.setGridMode("grid"),
        });
-        schedule(expandMarbles, {
+        schedule(expandInputMarbles, {
          a: () => {
            let toggle: () => void;
            vm.toggleSpotlightExpanded.subscribe((val) => (toggle = val!));
@@ -504,28 +525,31 @@ test("spotlight remembers whether it's expanded", () => {
          },
        });

-        expectObservable(summarizeLayout(vm.layout)).toBe(layoutMarbles, {
-          a: {
-            type: "spotlight-landscape",
-            spotlight: [`${aliceId}:0`],
-            grid: ["local:0", `${bobId}:0`],
+        expectObservable(summarizeLayout(vm.layout)).toBe(
+          expectedLayoutMarbles,
+          {
+            a: {
+              type: "spotlight-landscape",
+              spotlight: [`${aliceId}:0`],
+              grid: ["local:0", `${bobId}:0`],
+            },
+            b: {
+              type: "spotlight-expanded",
+              spotlight: [`${aliceId}:0`],
+              pip: "local:0",
+            },
+            c: {
+              type: "grid",
+              spotlight: undefined,
+              grid: ["local:0", `${aliceId}:0`, `${bobId}:0`],
+            },
+            d: {
+              type: "grid",
+              spotlight: undefined,
+              grid: ["local:0", `${bobId}:0`, `${aliceId}:0`],
+            },
          },
-          b: {
-            type: "spotlight-expanded",
-            spotlight: [`${aliceId}:0`],
-            pip: "local:0",
-          },
-          c: {
-            type: "grid",
-            spotlight: undefined,
-            grid: ["local:0", `${aliceId}:0`, `${bobId}:0`],
-          },
-          d: {
-            type: "grid",
-            spotlight: undefined,
-            grid: ["local:0", `${bobId}:0`, `${aliceId}:0`],
-          },
-        });
+        );
      },
    );
  });
@@ -260,7 +260,6 @@ class UserMedia {
        ),
      ),
      startWith(false),
-      distinctUntilChanged(),
      // Make this Observable hot so that the timers don't reset when you
      // resubscribe
      this.scope.state(),
@@ -672,7 +671,7 @@ export class CallViewModel extends ViewModel {
    this.gridModeUserSelection.next(value);
  }

-  private readonly gridLayout: Observable<LayoutMedia> = combineLatest(
+  private readonly gridLayoutMedia: Observable<GridLayoutMedia> = combineLatest(
    [this.grid, this.spotlight],
    (grid, spotlight) => ({
      type: "grid",
@@ -683,28 +682,28 @@ export class CallViewModel extends ViewModel {
    }),
  );

-  private readonly spotlightLandscapeLayout: Observable<LayoutMedia> =
+  private readonly spotlightLandscapeLayoutMedia: Observable<SpotlightLandscapeLayoutMedia> =
    combineLatest([this.grid, this.spotlight], (grid, spotlight) => ({
      type: "spotlight-landscape",
      spotlight,
      grid,
    }));

-  private readonly spotlightPortraitLayout: Observable<LayoutMedia> =
+  private readonly spotlightPortraitLayoutMedia: Observable<SpotlightPortraitLayoutMedia> =
    combineLatest([this.grid, this.spotlight], (grid, spotlight) => ({
      type: "spotlight-portrait",
      spotlight,
      grid,
    }));

-  private readonly spotlightExpandedLayout: Observable<LayoutMedia> =
+  private readonly spotlightExpandedLayoutMedia: Observable<SpotlightExpandedLayoutMedia> =
    combineLatest([this.spotlight, this.pip], (spotlight, pip) => ({
      type: "spotlight-expanded",
      spotlight,
      pip: pip ?? undefined,
    }));

-  private readonly oneOnOneLayout: Observable<LayoutMedia | null> =
+  private readonly oneOnOneLayoutMedia: Observable<OneOnOneLayoutMedia | null> =
    this.mediaItems.pipe(
      map((mediaItems) => {
        if (mediaItems.length !== 2) return null;
@@ -722,9 +721,8 @@ export class CallViewModel extends ViewModel {
      }),
    );

-  private readonly pipLayout: Observable<LayoutMedia> = this.spotlight.pipe(
-    map((spotlight) => ({ type: "pip", spotlight })),
-  );
+  private readonly pipLayoutMedia: Observable<LayoutMedia> =
+    this.spotlight.pipe(map((spotlight) => ({ type: "pip", spotlight })));

  /**
   * The media to be used to produce a layout.
@@ -737,24 +735,24 @@ export class CallViewModel extends ViewModel {
            switchMap((gridMode) => {
              switch (gridMode) {
                case "grid":
-                  return this.oneOnOneLayout.pipe(
+                  return this.oneOnOneLayoutMedia.pipe(
                    switchMap((oneOnOne) =>
-                      oneOnOne === null ? this.gridLayout : of(oneOnOne),
+                      oneOnOne === null ? this.gridLayoutMedia : of(oneOnOne),
                    ),
                  );
                case "spotlight":
                  return this.spotlightExpanded.pipe(
                    switchMap((expanded) =>
                      expanded
-                        ? this.spotlightExpandedLayout
-                        : this.spotlightLandscapeLayout,
+                        ? this.spotlightExpandedLayoutMedia
+                        : this.spotlightLandscapeLayoutMedia,
                    ),
                  );
              }
            }),
          );
        case "narrow":
-          return this.oneOnOneLayout.pipe(
+          return this.oneOnOneLayoutMedia.pipe(
            switchMap((oneOnOne) =>
              oneOnOne === null
                ? combineLatest(
@@ -762,12 +760,12 @@ export class CallViewModel extends ViewModel {
                    (grid, spotlight) =>
                      grid.length > smallMobileCallThreshold ||
                      spotlight.some((vm) => vm instanceof ScreenShareViewModel)
-                        ? this.spotlightPortraitLayout
-                        : this.gridLayout,
+                        ? this.spotlightPortraitLayoutMedia
+                        : this.gridLayoutMedia,
                  ).pipe(switchAll())
                : // The expanded spotlight layout makes for a better one-on-one
                  // experience in narrow windows
-                  this.spotlightExpandedLayout,
+                  this.spotlightExpandedLayoutMedia,
            ),
          );
        case "flat":
@@ -777,14 +775,14 @@ export class CallViewModel extends ViewModel {
                case "grid":
                  // Yes, grid mode actually gets you a "spotlight" layout in
                  // this window mode.
-                  return this.spotlightLandscapeLayout;
+                  return this.spotlightLandscapeLayoutMedia;
                case "spotlight":
-                  return this.spotlightExpandedLayout;
+                  return this.spotlightExpandedLayoutMedia;
              }
            }),
          );
        case "pip":
-          return this.pipLayout;
+          return this.pipLayoutMedia;
      }
    }),
    this.scope.state(),
@@ -97,7 +97,7 @@ const UserMediaTile = forwardRef<HTMLDivElement, UserMediaTileProps>(
      },
      [vm],
    );
-    const { raisedHands, lowerHand, reactions } = useReactions();
+    const { raisedHands, toggleRaisedHand, reactions } = useReactions();

    const AudioIcon = locallyMuted
      ? VolumeOffSolidIcon
@@ -127,8 +127,9 @@ const UserMediaTile = forwardRef<HTMLDivElement, UserMediaTileProps>(
    const handRaised: Date | undefined = raisedHands[vm.member?.userId ?? ""];
    const currentReaction: ReactionOption | undefined =
      reactions[vm.member?.userId ?? ""];
-    const raisedHandOnClick =
-      vm.local && handRaised ? (): void => void lowerHand() : undefined;
+    const raisedHandOnClick = vm.local
+      ? (): void => void toggleRaisedHand()
+      : undefined;

    const showSpeaking = showSpeakingIndicators && speaking;

@@ -102,7 +102,7 @@ export const MediaView = forwardRef<HTMLDivElement, Props>(
          )}
        </div>
        <div className={styles.fg}>
-          <div style={{ display: "flex" }}>
+          <div style={{ display: "flex", gap: "var(--cpd-space-1x)" }}>
            <RaisedHandIndicator
              raisedHandTime={raisedHandTime}
              miniature={avatarSize < 96}
@@ -12,19 +12,24 @@ import { Button } from "@vector-im/compound-web";
 import userEvent from "@testing-library/user-event";

 import { useCallViewKeyboardShortcuts } from "../src/useCallViewKeyboardShortcuts";
+import { ReactionOption, ReactionSet, ReactionsRowSize } from "./reactions";

 // Test Explanation:
 // - The main objective is to test `useCallViewKeyboardShortcuts`.
 //   The TestComponent just wraps a button around that hook.

 interface TestComponentProps {
-  setMicrophoneMuted: (muted: boolean) => void;
+  setMicrophoneMuted?: (muted: boolean) => void;
  onButtonClick?: () => void;
+  sendReaction?: () => void;
+  toggleHandRaised?: () => void;
 }

 const TestComponent: FC<TestComponentProps> = ({
-  setMicrophoneMuted,
+  setMicrophoneMuted = (): void => {},
  onButtonClick = (): void => {},
+  sendReaction = (reaction: ReactionOption): void => {},
+  toggleHandRaised = (): void => {},
 }) => {
  const ref = useRef<HTMLDivElement | null>(null);
  useCallViewKeyboardShortcuts(
@@ -32,6 +37,8 @@ const TestComponent: FC<TestComponentProps> = ({
    () => {},
    () => {},
    setMicrophoneMuted,
+    sendReaction,
+    toggleHandRaised,
  );
  return (
    <div ref={ref}>
@@ -74,6 +81,28 @@ test("spacebar prioritizes pressing a button", async () => {
  expect(onClick).toBeCalled();
 });

+test("reactions can be sent via keyboard presses", async () => {
+  const user = userEvent.setup();
+
+  const sendReaction = vi.fn();
+  render(<TestComponent sendReaction={sendReaction} />);
+
+  for (let index = 1; index <= ReactionsRowSize; index++) {
+    await user.keyboard(index.toString());
+    expect(sendReaction).toHaveBeenNthCalledWith(index, ReactionSet[index - 1]);
+  }
+});
+
+test("raised hand can be sent via keyboard presses", async () => {
+  const user = userEvent.setup();
+
+  const toggleHandRaised = vi.fn();
+  render(<TestComponent toggleHandRaised={toggleHandRaised} />);
+  await user.keyboard("h");
+
+  expect(toggleHandRaised).toHaveBeenCalledOnce();
+});
+
 test("unmuting happens in place of the default action", async () => {
  const user = userEvent.setup();
  const defaultPrevented = vi.fn();
@@ -8,6 +8,7 @@ Please see LICENSE in the repository root for full details.
 import { RefObject, useCallback, useMemo, useRef } from "react";

 import { useEventTarget } from "./useEvents";
+import { ReactionOption, ReactionSet, ReactionsRowSize } from "./reactions";

 /**
 * Determines whether focus is in the same part of the tree as the given
@@ -18,11 +19,17 @@ const mayReceiveKeyEvents = (e: HTMLElement): boolean => {
  return focusedElement !== null && focusedElement.contains(e);
 };

+const KeyToReactionMap: Record<string, ReactionOption> = Object.fromEntries(
+  ReactionSet.slice(0, ReactionsRowSize).map((r, i) => [(i + 1).toString(), r]),
+);
+
 export function useCallViewKeyboardShortcuts(
  focusElement: RefObject<HTMLElement | null>,
  toggleMicrophoneMuted: () => void,
  toggleLocalVideoMuted: () => void,
  setMicrophoneMuted: (muted: boolean) => void,
+  sendReaction: (reaction: ReactionOption) => void,
+  toggleHandRaised: () => void,
 ): void {
  const spacebarHeld = useRef(false);

@@ -49,6 +56,12 @@ export function useCallViewKeyboardShortcuts(
            spacebarHeld.current = true;
            setMicrophoneMuted(false);
          }
+        } else if (event.key === "h") {
+          event.preventDefault();
+          toggleHandRaised();
+        } else if (KeyToReactionMap[event.key]) {
+          event.preventDefault();
+          sendReaction(KeyToReactionMap[event.key]);
        }
      },
      [
@@ -56,6 +69,8 @@ export function useCallViewKeyboardShortcuts(
        toggleLocalVideoMuted,
        toggleMicrophoneMuted,
        setMicrophoneMuted,
+        sendReaction,
+        toggleHandRaised,
      ],
    ),
    // Because this is set on the window, to prevent shortcuts from activating
@@ -40,7 +40,8 @@ interface ReactionsContextType {
  raisedHands: Record<string, Date>;
  supportsReactions: boolean;
  reactions: Record<string, ReactionOption>;
-  lowerHand: () => Promise<void>;
+  toggleRaisedHand: () => Promise<void>;
+  sendReaction: (reaction: ReactionOption) => Promise<void>;
 }

 const ReactionsContext = createContext<ReactionsContextType | undefined>(
@@ -104,7 +105,6 @@ export const ReactionsProvider = ({
      ),
    [raisedHands],
  );
-
  const addRaisedHand = useCallback((userId: string, info: RaisedHandInfo) => {
    setRaisedHands((prevRaisedHands) => ({
      ...prevRaisedHands,
@@ -181,6 +181,11 @@ export const ReactionsProvider = ({
  const latestMemberships = useLatest(memberships);
  const latestRaisedHands = useLatest(raisedHands);

+  const myMembership = useMemo(
+    () => memberships.find((m) => m.sender === myUserId)?.eventId,
+    [memberships, myUserId],
+  );
+
  // This effect handles any *live* reaction/redactions in the room.
  useEffect(() => {
    const reactionTimeouts = new Set<number>();
@@ -322,22 +327,67 @@ export const ReactionsProvider = ({
    latestRaisedHands,
  ]);

-  const lowerHand = useCallback(async () => {
-    if (!myUserId || !raisedHands[myUserId]) {
+  const toggleRaisedHand = useCallback(async () => {
+    if (!myUserId) {
      return;
    }
-    const myReactionId = raisedHands[myUserId].reactionEventId;
+    const myReactionId = raisedHands[myUserId]?.reactionEventId;
+
    if (!myReactionId) {
-      logger.warn(`Hand raised but no reaction event to redact!`);
-      return;
+      try {
+        if (!myMembership) {
+          throw new Error("Cannot find own membership event");
+        }
+        const reaction = await room.client.sendEvent(
+          rtcSession.room.roomId,
+          EventType.Reaction,
+          {
+            "m.relates_to": {
+              rel_type: RelationType.Annotation,
+              event_id: myMembership,
+              key: "🖐️",
+            },
+          },
+        );
+        logger.debug("Sent raise hand event", reaction.event_id);
+      } catch (ex) {
+        logger.error("Failed to send raised hand", ex);
+      }
+    } else {
+      try {
+        await room.client.redactEvent(rtcSession.room.roomId, myReactionId);
+        logger.debug("Redacted raise hand event");
+      } catch (ex) {
+        logger.error("Failed to redact reaction event", myReactionId, ex);
+        throw ex;
+      }
    }
-    try {
-      await room.client.redactEvent(rtcSession.room.roomId, myReactionId);
-      logger.debug("Redacted raise hand event");
-    } catch (ex) {
-      logger.error("Failed to redact reaction event", myReactionId, ex);
-    }
-  }, [myUserId, raisedHands, rtcSession, room]);
+  }, [myMembership, myUserId, raisedHands, rtcSession, room]);
+
+  const sendReaction = useCallback(
+    async (reaction: ReactionOption) => {
+      if (!myUserId || reactions[myUserId]) {
+        // We're still reacting
+        return;
+      }
+      if (!myMembership) {
+        throw new Error("Cannot find own membership event");
+      }
+      await room.client.sendEvent(
+        rtcSession.room.roomId,
+        ElementCallReactionEventType,
+        {
+          "m.relates_to": {
+            rel_type: RelationType.Reference,
+            event_id: myMembership,
+          },
+          emoji: reaction.emoji,
+          name: reaction.name,
+        },
+      );
+    },
+    [myMembership, reactions, room, myUserId, rtcSession],
+  );

  return (
    <ReactionsContext.Provider
@@ -345,7 +395,8 @@ export const ReactionsProvider = ({
        raisedHands: resultRaisedHands,
        supportsReactions,
        reactions,
-        lowerHand,
+        toggleRaisedHand,
+        sendReaction,
      }}
    >
      {children}
@@ -123,7 +123,6 @@ export async function initClient(
    localTimeoutMs: 5000,
    useE2eForGroupCall: e2eEnabled,
    fallbackICEServerAllowed: fallbackICEServerAllowed,
-    store: new MemoryStore(),
  });

  // In case of logging in a new matrix account but there is still crypto local store. This is needed for:
@@ -0,0 +1,64 @@
+/*
+Copyright 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only
+Please see LICENSE in the repository root for full details.
+*/
+
+import { ICreateClientOpts } from "matrix-js-sdk/src/client";
+import { MatrixError } from "matrix-js-sdk/src/http-api";
+import { logger } from "matrix-js-sdk/src/logger";
+
+import { Config } from "../config/Config";
+import { fallbackICEServerAllowed, initClient } from "./matrix";
+import type { InitResult, Session } from "../ClientContext";
+
+export async function initSPA(
+  loadSession: () => Session | undefined,
+  clearSession: () => void,
+): Promise<InitResult | null> {
+  // We're running as a standalone application
+  try {
+    const session = loadSession();
+    if (!session) {
+      logger.log("No session stored; continuing without a client");
+      return null;
+    }
+
+    logger.log("Using a standalone client");
+
+    /* eslint-disable camelcase */
+    const { user_id, device_id, access_token, passwordlessUser } = session;
+    const initClientParams: ICreateClientOpts = {
+      baseUrl: Config.defaultHomeserverUrl()!,
+      accessToken: access_token,
+      userId: user_id,
+      deviceId: device_id,
+      fallbackICEServerAllowed,
+      livekitServiceURL: Config.get().livekit?.livekit_service_url,
+    };
+
+    try {
+      const client = await initClient(initClientParams, true);
+      return {
+        widgetApi: null,
+        client,
+        passwordlessUser,
+      };
+    } catch (err) {
+      if (err instanceof MatrixError && err.errcode === "M_UNKNOWN_TOKEN") {
+        // We can't use this session anymore, so let's log it out
+        logger.log(
+          "The session from local store is invalid; continuing without a client",
+        );
+        clearSession();
+        // returning null = "no client` pls register" (undefined = "loading" which is the current value when reaching this line)
+        return null;
+      }
+      throw err;
+    }
+  } catch (err) {
+    clearSession();
+    throw err;
+  }
+}
@@ -4,7 +4,7 @@ Copyright 2023, 2024 New Vector Ltd.
 SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
-import { map, Observable, of } from "rxjs";
+import { map, Observable, of, SchedulerLike } from "rxjs";
 import { RunHelpers, TestScheduler } from "rxjs/testing";
 import { expect, vi } from "vitest";
 import { RoomMember, Room as MatrixRoom } from "matrix-js-sdk/src/matrix";
@@ -39,15 +39,23 @@ export interface OurRunHelpers extends RunHelpers {
  schedule: (marbles: string, actions: Record<string, () => void>) => void;
 }

+interface TestRunnerGlobal {
+  rxjsTestScheduler?: SchedulerLike;
+}
+
 /**
 * Run Observables with a scheduler that virtualizes time, for testing purposes.
 */
 export function withTestScheduler(
  continuation: (helpers: OurRunHelpers) => void,
 ): void {
-  new TestScheduler((actual, expected) => {
+  const scheduler = new TestScheduler((actual, expected) => {
    expect(actual).deep.equals(expected);
-  }).run((helpers) =>
+  });
+  // we set the test scheduler as a global so that you can watch it in a debugger
+  // and get the frame number. e.g. `rxjsTestScheduler?.now()`
+  (global as unknown as TestRunnerGlobal).rxjsTestScheduler = scheduler;
+  scheduler.run((helpers) =>
    continuation({
      ...helpers,
      schedule(marbles, actions) {
@@ -6,6 +6,8 @@ Please see LICENSE in the repository root for full details.
 */

 import "global-jsdom/register";
+import "@formatjs/intl-durationformat/polyfill";
+import "@formatjs/intl-segmenter/polyfill";
 import i18n from "i18next";
 import posthog from "posthog-js";
 import { initReactI18next } from "react-i18next";
@@ -14,6 +16,7 @@ import { cleanup } from "@testing-library/react";
 import "vitest-axe/extend-expect";
 import { logger } from "matrix-js-sdk/src/logger";

+import EN_GB from "../locales/en-GB/app.json";
 import { Config } from "./config/Config";

 // Bare-minimum i18n config
@@ -22,6 +25,13 @@ i18n
  .init({
    lng: "en-GB",
    fallbackLng: "en-GB",
+    supportedLngs: ["en-GB"],
+    // We embed the translations, so that it never needs to fetch
+    resources: {
+      "en-GB": {
+        app: EN_GB,
+      },
+    },
    interpolation: {
      escapeValue: false, // React has built-in XSS protections
    },
@@ -6,6 +6,7 @@ Please see LICENSE in the repository root for full details.
 */

 import { defineConfig, loadEnv } from "vite";
+import { compression } from "vite-plugin-compression2";
 import svgrPlugin from "vite-plugin-svgr";
 import htmlTemplate from "vite-plugin-html-template";
 import { codecovVitePlugin } from "@codecov/vite-plugin";
@@ -38,6 +39,10 @@ export default defineConfig(({ mode }) => {
      bundleName: "element-call",
      uploadToken: process.env.CODECOV_TOKEN,
    }),
+
+    compression({
+      exclude: [/config.json/],
+    }),
  ];

  if (
@@ -60,6 +65,25 @@ export default defineConfig(({ mode }) => {
    },
    build: {
      sourcemap: true,
+      rollupOptions: {
+        output: {
+          assetFileNames: ({ originalFileNames }) => {
+            if (originalFileNames) {
+              for (const name of originalFileNames) {
+                // Custom asset name for locales to include the locale code in the filename
+                const match = name.match(/locales\/([^/]+)\/(.+)\.json$/);
+                if (match) {
+                  const [, locale, filename] = match;
+                  return `assets/${locale}-${filename}-[hash].json`;
+                }
+              }
+            }
+
+            // Default naming fallback
+            return "assets/[name]-[hash][extname]";
+          },
+        },
+      },
    },
    plugins,
    resolve: {
@@ -279,14 +279,14 @@
    js-tokens "^4.0.0"
    picocolors "^1.0.0"

-"@babel/parser@^7.1.0", "@babel/parser@^7.20.7", "@babel/parser@^7.25.4":
+"@babel/parser@^7.1.0", "@babel/parser@^7.20.7":
  version "7.26.1"
  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.26.1.tgz#44e02499960df2cdce2c456372a3e8e0c3c5c975"
  integrity sha512-reoQYNiAJreZNsJzyrDNzFQ+IQ5JFiIzAHJg9bn94S3l+4++J7RsIhNMoB+lgP/9tpmiAQqspv+xfdxTSzREOw==
  dependencies:
    "@babel/types" "^7.26.0"

-"@babel/parser@^7.10.3", "@babel/parser@^7.25.9", "@babel/parser@^7.26.0", "@babel/parser@^7.26.2":
+"@babel/parser@^7.10.3", "@babel/parser@^7.25.4", "@babel/parser@^7.25.9", "@babel/parser@^7.26.0", "@babel/parser@^7.26.2":
  version "7.26.2"
  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.26.2.tgz#fd7b6f487cfea09889557ef5d4eeb9ff9a5abd11"
  integrity sha512-DWMCZH9WA4Maitz2q21SRKHo9QXZxkDsbNZoVD62gusNtNBBqDg9i7uOhASfTfIGNzW+O+r7+jAlM8dwphcJKQ==
@@ -995,10 +995,10 @@
  resolved "https://registry.yarnpkg.com/@bufbuild/protobuf/-/protobuf-1.10.0.tgz#1a67ac889c2d464a3492b3e54c38f80517963b16"
  integrity sha512-QDdVFLoN93Zjg36NoQPZfsVH9tZew7wKDKyV5qRdj8ntT4wQCOradQjRaTdwMhWUYsgKsvCINKKm87FdEk96Ag==

-"@codecov/bundler-plugin-core@^1.3.0":
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/@codecov/bundler-plugin-core/-/bundler-plugin-core-1.3.0.tgz#6b2e2eeabd20dc085f281dcb4fb173f66e745ef7"
-  integrity sha512-Zs0uTDou/QnYnnXl8BWxX4Tc4bGeUAPzgAyZCdtXT2BIcyb5zjymXByyN7zbqPgiU0Ymbg3DgsK6v726shiq3w==
+"@codecov/bundler-plugin-core@^1.4.0":
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/@codecov/bundler-plugin-core/-/bundler-plugin-core-1.4.0.tgz#6035d8fe2a321b125c883ab77b9e6c36c9c08abd"
+  integrity sha512-/Rglx52KLdyqoZBW3DH2E/31c9/zWWZ4efTf+qxV0FSLb7oJ9/JZT3IBKL7f6fbVujR8PDMLIoG4Q0pmVY7LzA==
  dependencies:
    "@actions/core" "^1.10.1"
    "@actions/github" "^6.0.0"
@@ -1008,11 +1008,11 @@
    zod "^3.22.4"

 "@codecov/vite-plugin@^1.3.0":
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/@codecov/vite-plugin/-/vite-plugin-1.3.0.tgz#502e19427fca4416685f475b891ee10cff1ec274"
-  integrity sha512-OiseFReYsl5bHYfFd7AZ46ptII+bSQLTRD1qv7CFOmQQLzfrxWtkfqZ+5wQs+9emaWyzERpFI4odDFDvMMS6EA==
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/@codecov/vite-plugin/-/vite-plugin-1.4.0.tgz#01e4ec2a0b7c144b054ba5876bc5ab5d577a3112"
+  integrity sha512-4pf9rZJLR/eqeoY0QY1pgAJs/tdg1os9xjgBBWuhQ/iLYseQZ3q1qn3G8QGuaSUS7XB/Sje3BQ5qGBM1hzE8Sw==
  dependencies:
-    "@codecov/bundler-plugin-core" "^1.3.0"
+    "@codecov/bundler-plugin-core" "^1.4.0"
    unplugin "^1.10.1"

 "@csstools/cascade-layer-name-parser@^2.0.4":
@@ -1255,7 +1255,7 @@
  dependencies:
    postcss-value-parser "^4.2.0"

-"@csstools/postcss-random-function@^1.0.0":
+"@csstools/postcss-random-function@^1.0.1":
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/@csstools/postcss-random-function/-/postcss-random-function-1.0.1.tgz#73a0b62b5dbbc03c25a28f085235eb61b09a2fb0"
  integrity sha512-Ab/tF8/RXktQlFwVhiC70UNfpFQRhtE5fQQoP2pO+KCPGLsLdWFiOuHgSRtBOqEshCVAzR4H6o38nhvRZq8deA==
@@ -1282,10 +1282,10 @@
  dependencies:
    postcss-selector-parser "^7.0.0"

-"@csstools/postcss-sign-functions@^1.0.0":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@csstools/postcss-sign-functions/-/postcss-sign-functions-1.0.0.tgz#37ea7c85874cef5710a1a8878bf0e2b26d4270fd"
-  integrity sha512-cUpr5W8eookBi5TiLSvx1HL6DFoTTgcj2pmiVNd63y2JHhvtpnJs3sfsFMmLhB42yTRS02tFPsNz3Q5zeN8ZVA==
+"@csstools/postcss-sign-functions@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@csstools/postcss-sign-functions/-/postcss-sign-functions-1.1.0.tgz#a524fae1374b0e167729f612ca875d7b1b334262"
+  integrity sha512-SLcc20Nujx/kqbSwDmj6oaXgpy3UjFhBy1sfcqPgDkHfOIfUtUVH7OXO+j7BU4v/At5s61N5ZX6shvgPwluhsA==
  dependencies:
    "@csstools/css-calc" "^2.1.0"
    "@csstools/css-parser-algorithms" "^3.0.4"
@@ -1628,7 +1628,7 @@
  dependencies:
    "@floating-ui/utils" "^0.2.8"

-"@floating-ui/dom@1.6.11", "@floating-ui/dom@^1.0.0":
+"@floating-ui/dom@1.6.11":
  version "1.6.11"
  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.6.11.tgz#8631857838d34ee5712339eb7cbdfb8ad34da723"
  integrity sha512-qkMCxSR24v2vGkhYDo/UzxfJN3D4syqSjyuTFz6C7XcpU1pASPRieNI0Kj5VP3/503mOfYiGY891ugBX1GlABQ==
@@ -1636,6 +1636,14 @@
    "@floating-ui/core" "^1.6.0"
    "@floating-ui/utils" "^0.2.8"

+"@floating-ui/dom@^1.0.0":
+  version "1.6.12"
+  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.6.12.tgz#6333dcb5a8ead3b2bf82f33d6bc410e95f54e556"
+  integrity sha512-NP83c0HjokcGVEMeoStg317VD9W7eDlGK7457dMBANbKA6GJZdc7rjujdgqzTaz93jkGgc5P/jeWbaCHnMNc+w==
+  dependencies:
+    "@floating-ui/core" "^1.6.0"
+    "@floating-ui/utils" "^0.2.8"
+
 "@floating-ui/react-dom@^2.0.0", "@floating-ui/react-dom@^2.1.2":
  version "2.1.2"
  resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-2.1.2.tgz#a1349bbf6a0e5cb5ded55d023766f20a4d439a31"
@@ -1644,9 +1652,9 @@
    "@floating-ui/dom" "^1.0.0"

 "@floating-ui/react@^0.26.24":
-  version "0.26.25"
-  resolved "https://registry.yarnpkg.com/@floating-ui/react/-/react-0.26.25.tgz#cf4c8a2b89fab1a71712d15e6551df3bfbd2ea1d"
-  integrity sha512-hZOmgN0NTOzOuZxI1oIrDu3Gcl8WViIkvPMpB4xdd4QD6xAMtwgwr3VPoiyH/bLtRcS1cDnhxLSD1NsMJmwh/A==
+  version "0.26.28"
+  resolved "https://registry.yarnpkg.com/@floating-ui/react/-/react-0.26.28.tgz#93f44ebaeb02409312e9df9507e83aab4a8c0dc7"
+  integrity sha512-yORQuuAtVpiRjpMhdc0wJj06b9JFjrYF4qp96j++v2NBpbi6SEGF7donUJ3TMieerQ6qVkAv1tgr7L4r5roTqw==
  dependencies:
    "@floating-ui/react-dom" "^2.1.2"
    "@floating-ui/utils" "^0.2.8"
@@ -1657,13 +1665,23 @@
  resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.2.8.tgz#21a907684723bbbaa5f0974cf7730bd797eb8e62"
  integrity sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==

-"@formatjs/ecma402-abstract@2.2.3":
-  version "2.2.3"
-  resolved "https://registry.yarnpkg.com/@formatjs/ecma402-abstract/-/ecma402-abstract-2.2.3.tgz#dc5a032e1971c709b32b9ab511fa35504a7d3bc9"
-  integrity sha512-aElGmleuReGnk2wtYOzYFmNWYoiWWmf1pPPCYg0oiIQSJj0mjc4eUfzUXaSOJ4S8WzI/cLqnCTWjqz904FT2OQ==
+"@fontsource/inconsolata@^5.1.0":
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/@fontsource/inconsolata/-/inconsolata-5.1.0.tgz#f6a76680173336d02d2ce4009699821a6be239ce"
+  integrity sha512-vYPdG3R46MhK+99De8e8MMyNad5BAb1oTnHMpojlctZyWJIcin8bKHFPUpQSNRhZ4HQL/+DCW+RTiG2RbnweTw==
+
+"@fontsource/inter@^5.1.0":
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/@fontsource/inter/-/inter-5.1.0.tgz#ab629b2c662457022d2d6a29854b8dc8ba538c47"
+  integrity sha512-zKZR3kf1G0noIes1frLfOHP5EXVVm0M7sV/l9f/AaYf+M/DId35FO4LkigWjqWYjTJZGgplhdv4cB+ssvCqr5A==
+
+"@formatjs/ecma402-abstract@2.2.4":
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/@formatjs/ecma402-abstract/-/ecma402-abstract-2.2.4.tgz#355e42d375678229d46dc8ad7a7139520dd03e7b"
+  integrity sha512-lFyiQDVvSbQOpU+WFd//ILolGj4UgA/qXrKeZxdV14uKiAUiPAtX6XAn7WBCRi7Mx6I7EybM9E5yYn4BIpZWYg==
  dependencies:
    "@formatjs/fast-memoize" "2.2.3"
-    "@formatjs/intl-localematcher" "0.5.7"
+    "@formatjs/intl-localematcher" "0.5.8"
    tslib "2"

 "@formatjs/fast-memoize@2.2.3":
@@ -1674,28 +1692,28 @@
    tslib "2"

 "@formatjs/intl-durationformat@^0.6.1":
-  version "0.6.3"
-  resolved "https://registry.yarnpkg.com/@formatjs/intl-durationformat/-/intl-durationformat-0.6.3.tgz#9c9837fbd7d877ea3039d6c4c7eee59dc1e23e19"
-  integrity sha512-sI+ssVZpL9ymdF7j4/qzwSwPHdCYVb2jQqQV71tCVEjDRgTz5jj8JqZTymYcV563v1rHKI2nNwNlp2L8D+zJQw==
+  version "0.6.4"
+  resolved "https://registry.yarnpkg.com/@formatjs/intl-durationformat/-/intl-durationformat-0.6.4.tgz#ac6b5ab006cf2b57500cce05dd1d201352500471"
+  integrity sha512-kpYLechF9ZvECzzMsvikBl48GkbCEAbZJN4kG/4x0FTVZkBuOWrBlj6DghCn7YsW3Bgsr0n9E0RYO373Kg3m+Q==
  dependencies:
-    "@formatjs/ecma402-abstract" "2.2.3"
-    "@formatjs/intl-localematcher" "0.5.7"
+    "@formatjs/ecma402-abstract" "2.2.4"
+    "@formatjs/intl-localematcher" "0.5.8"
    tslib "2"

-"@formatjs/intl-localematcher@0.5.7":
-  version "0.5.7"
-  resolved "https://registry.yarnpkg.com/@formatjs/intl-localematcher/-/intl-localematcher-0.5.7.tgz#f889d076881b785d11ff993b966f527d199436d0"
-  integrity sha512-GGFtfHGQVFe/niOZp24Kal5b2i36eE2bNL0xi9Sg/yd0TR8aLjcteApZdHmismP5QQax1cMnZM9yWySUUjJteA==
+"@formatjs/intl-localematcher@0.5.8":
+  version "0.5.8"
+  resolved "https://registry.yarnpkg.com/@formatjs/intl-localematcher/-/intl-localematcher-0.5.8.tgz#b11bbd04bd3551f7cadcb1ef1e231822d0e3c97e"
+  integrity sha512-I+WDNWWJFZie+jkfkiK5Mp4hEDyRSEvmyfYadflOno/mmKJKcB17fEpEH0oJu/OWhhCJ8kJBDz2YMd/6cDl7Mg==
  dependencies:
    tslib "2"

 "@formatjs/intl-segmenter@^11.7.3":
-  version "11.7.3"
-  resolved "https://registry.yarnpkg.com/@formatjs/intl-segmenter/-/intl-segmenter-11.7.3.tgz#aeb49c33c81fec68419922c64c72188b659eaa5a"
-  integrity sha512-IvEDQRe0t0ouqaqZK2KobGt/+BhwDHdtbS8GWhdl+fjmWbhXMz2mHihu5fAYkYChum5eNfGhEF5P+bLCeYq67w==
+  version "11.7.4"
+  resolved "https://registry.yarnpkg.com/@formatjs/intl-segmenter/-/intl-segmenter-11.7.4.tgz#f99d87ee3f98515069285438a4913681fc243252"
+  integrity sha512-pyHgFO86/CReKl20oK9jgaTMzSaG/nIMteMW8YuwUcS22EoMI1qbGTZ65oQ38KMT05SiHiMee2CP3WZvCi8YSQ==
  dependencies:
-    "@formatjs/ecma402-abstract" "2.2.3"
-    "@formatjs/intl-localematcher" "0.5.7"
+    "@formatjs/ecma402-abstract" "2.2.4"
+    "@formatjs/intl-localematcher" "0.5.8"
    tslib "2"

 "@gulpjs/to-absolute-glob@^4.0.0":
@@ -1783,9 +1801,9 @@
    rxjs "7.8.1"

 "@livekit/components-react@^2.0.0":
-  version "2.6.7"
-  resolved "https://registry.yarnpkg.com/@livekit/components-react/-/components-react-2.6.7.tgz#12faa30eed232e5cbec6bcb33b7ce449566241af"
-  integrity sha512-z8dgrBrRXIe7oagwFyjehdwL/4zpySJyPdAjeMDXZVbTXYNAugb3a88Ws9yQz4PZFECLkIPXJCN3C3YR+bgh5Q==
+  version "2.6.8"
+  resolved "https://registry.yarnpkg.com/@livekit/components-react/-/components-react-2.6.8.tgz#faa60410aef0f5d426afcc6f9b577686983c6b7b"
+  integrity sha512-G6P+mrOyBiAnHjbmBTG28CxA6AT7wXT6/5dqu7M7uZAlvOCDKhPjhOs65awDQvaFlTxd/JlND75fa9d+oSbvIA==
  dependencies:
    "@livekit/components-core" "0.11.10"
    clsx "2.1.1"
@@ -2532,7 +2550,7 @@
    "@react-spring/shared" "~9.7.5"
    "@react-spring/types" "~9.7.5"

-"@rollup/pluginutils@^5.1.3":
+"@rollup/pluginutils@^5.1.0", "@rollup/pluginutils@^5.1.3":
  version "5.1.3"
  resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-5.1.3.tgz#3001bf1a03f3ad24457591f2c259c8e514e0dbdf"
  integrity sha512-Pnsb6f32CD2W3uCaLZIzDmeFyQ2b8UWMFI7xtwUezpcGBDVDW6y9XgAWIlARiGAo6eNF5FK5aQTr0LFyNyqq5A==
@@ -2636,61 +2654,61 @@
  resolved "https://registry.yarnpkg.com/@rtsao/scc/-/scc-1.1.0.tgz#927dd2fae9bc3361403ac2c7a00c32ddce9ad7e8"
  integrity sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==

-"@sentry-internal/browser-utils@8.37.1":
-  version "8.37.1"
-  resolved "https://registry.yarnpkg.com/@sentry-internal/browser-utils/-/browser-utils-8.37.1.tgz#374028d8e37047aeda14b226707e6601de65996e"
-  integrity sha512-OSR/V5GCsSCG7iapWtXCT/y22uo3HlawdEgfM1NIKk1mkP15UyGQtGEzZDdih2H+SNuX1mp9jQLTjr5FFp1A5w==
+"@sentry-internal/browser-utils@8.38.0":
+  version "8.38.0"
+  resolved "https://registry.yarnpkg.com/@sentry-internal/browser-utils/-/browser-utils-8.38.0.tgz#d7f6d398778906efb0c017e63d3c59d3203dfa7d"
+  integrity sha512-5QMVcssrAcmjKT0NdFYcX0b0wwZovGAZ9L2GajErXtHkBenjI2sgR2+5J7n+QZGuk2SC1qhGmT1O9i3p3UEwew==
  dependencies:
-    "@sentry/core" "8.37.1"
-    "@sentry/types" "8.37.1"
-    "@sentry/utils" "8.37.1"
+    "@sentry/core" "8.38.0"
+    "@sentry/types" "8.38.0"
+    "@sentry/utils" "8.38.0"

-"@sentry-internal/feedback@8.37.1":
-  version "8.37.1"
-  resolved "https://registry.yarnpkg.com/@sentry-internal/feedback/-/feedback-8.37.1.tgz#e2d5fc934ca3b4925a5f5d0e63549830a1cf147e"
-  integrity sha512-Se25NXbSapgS2S+JssR5YZ48b3OY4UGmAuBOafgnMW91LXMxRNWRbehZuNUmjjHwuywABMxjgu+Yp5uJDATX+g==
+"@sentry-internal/feedback@8.38.0":
+  version "8.38.0"
+  resolved "https://registry.yarnpkg.com/@sentry-internal/feedback/-/feedback-8.38.0.tgz#726661a01f7ff40b93c8ee05c985fd0436a1c033"
+  integrity sha512-AW5HCCAlc3T1jcSuNhbFVNO1CHyJ5g5tsGKEP4VKgu+D1Gg2kZ5S2eFatLBUP/BD5JYb1A7p6XPuzYp1XfMq0A==
  dependencies:
-    "@sentry/core" "8.37.1"
-    "@sentry/types" "8.37.1"
-    "@sentry/utils" "8.37.1"
+    "@sentry/core" "8.38.0"
+    "@sentry/types" "8.38.0"
+    "@sentry/utils" "8.38.0"

-"@sentry-internal/replay-canvas@8.37.1":
-  version "8.37.1"
-  resolved "https://registry.yarnpkg.com/@sentry-internal/replay-canvas/-/replay-canvas-8.37.1.tgz#e8a5e350e486b16938b3dd99886be23b7b6eff18"
-  integrity sha512-1JLAaPtn1VL5vblB0BMELFV0D+KUm/iMGsrl4/JpRm0Ws5ESzQl33DhXVv1IX/ZAbx9i14EjR7MG9+Hj70tieQ==
+"@sentry-internal/replay-canvas@8.38.0":
+  version "8.38.0"
+  resolved "https://registry.yarnpkg.com/@sentry-internal/replay-canvas/-/replay-canvas-8.38.0.tgz#26e9bc937dab73e1a26d57dc1015b7ff1f2d76c5"
+  integrity sha512-OxmlWzK9J8mRM+KxdSnQ5xuxq+p7TiBzTz70FT3HltxmeugvDkyp6803UcFqHOPHR35OYeVLOalym+FmvNn9kw==
  dependencies:
-    "@sentry-internal/replay" "8.37.1"
-    "@sentry/core" "8.37.1"
-    "@sentry/types" "8.37.1"
-    "@sentry/utils" "8.37.1"
+    "@sentry-internal/replay" "8.38.0"
+    "@sentry/core" "8.38.0"
+    "@sentry/types" "8.38.0"
+    "@sentry/utils" "8.38.0"

-"@sentry-internal/replay@8.37.1":
-  version "8.37.1"
-  resolved "https://registry.yarnpkg.com/@sentry-internal/replay/-/replay-8.37.1.tgz#6dc2e3955879f6e7ab830db1ddee54e0a9b401f3"
-  integrity sha512-E/Plhisk/pXJjOdOU12sg8m/APTXTA21iEniidP6jW3/+O0tD/H/UovEqa4odNTqxPMa798xHQSQNt5loYiaLA==
+"@sentry-internal/replay@8.38.0":
+  version "8.38.0"
+  resolved "https://registry.yarnpkg.com/@sentry-internal/replay/-/replay-8.38.0.tgz#9a9b945a3c066f5610a363774e3c99420c3f4fce"
+  integrity sha512-mQPShKnIab7oKwkwrRxP/D8fZYHSkDY+cvqORzgi+wAwgnunytJQjz9g6Ww2lJu98rHEkr5SH4V4rs6PZYZmnQ==
  dependencies:
-    "@sentry-internal/browser-utils" "8.37.1"
-    "@sentry/core" "8.37.1"
-    "@sentry/types" "8.37.1"
-    "@sentry/utils" "8.37.1"
+    "@sentry-internal/browser-utils" "8.38.0"
+    "@sentry/core" "8.38.0"
+    "@sentry/types" "8.38.0"
+    "@sentry/utils" "8.38.0"

 "@sentry/babel-plugin-component-annotate@2.22.6":
  version "2.22.6"
  resolved "https://registry.yarnpkg.com/@sentry/babel-plugin-component-annotate/-/babel-plugin-component-annotate-2.22.6.tgz#829d6caf2c95c1c46108336de4e1049e6521435e"
  integrity sha512-V2g1Y1I5eSe7dtUVMBvAJr8BaLRr4CLrgNgtPaZyMT4Rnps82SrZ5zqmEkLXPumlXhLUWR6qzoMNN2u+RXVXfQ==

-"@sentry/browser@8.37.1":
-  version "8.37.1"
-  resolved "https://registry.yarnpkg.com/@sentry/browser/-/browser-8.37.1.tgz#2e6e4accc395ad9e6313e07b09415370c71e5874"
-  integrity sha512-5ym+iGiIpjIKKpMWi9S3/tXh9xneS+jqxwRTJqed3cb8i4ydfMAAP8sM3U8xMCWWABpWyIUW+fpewC0tkhE1aQ==
+"@sentry/browser@8.38.0":
+  version "8.38.0"
+  resolved "https://registry.yarnpkg.com/@sentry/browser/-/browser-8.38.0.tgz#c562accdc2bbe0b0074d98bfe7ff460e39ce3109"
+  integrity sha512-AZR+b0EteNZEGv6JSdBD22S9VhQ7nrljKsSnzxobBULf3BpwmhmCzTbDrqWszKDAIDYmL+yQJIR2glxbknneWQ==
  dependencies:
-    "@sentry-internal/browser-utils" "8.37.1"
-    "@sentry-internal/feedback" "8.37.1"
-    "@sentry-internal/replay" "8.37.1"
-    "@sentry-internal/replay-canvas" "8.37.1"
-    "@sentry/core" "8.37.1"
-    "@sentry/types" "8.37.1"
-    "@sentry/utils" "8.37.1"
+    "@sentry-internal/browser-utils" "8.38.0"
+    "@sentry-internal/feedback" "8.38.0"
+    "@sentry-internal/replay" "8.38.0"
+    "@sentry-internal/replay-canvas" "8.38.0"
+    "@sentry/core" "8.38.0"
+    "@sentry/types" "8.38.0"
+    "@sentry/utils" "8.38.0"

 "@sentry/bundler-plugin-core@2.22.6":
  version "2.22.6"
@@ -2760,36 +2778,36 @@
    "@sentry/cli-win32-i686" "2.38.1"
    "@sentry/cli-win32-x64" "2.38.1"

-"@sentry/core@8.37.1":
-  version "8.37.1"
-  resolved "https://registry.yarnpkg.com/@sentry/core/-/core-8.37.1.tgz#4bafb25c762ec8680874056f6160df276c1cc7c6"
-  integrity sha512-82csXby589iDupM3VgCHJeWZagUyEEaDnbFcoZ/Z91QX2Sjq8FcF5OsforoXjw09i0XTFqlkFAnQVpDBmMXcpQ==
+"@sentry/core@8.38.0":
+  version "8.38.0"
+  resolved "https://registry.yarnpkg.com/@sentry/core/-/core-8.38.0.tgz#5d1b74770c79e489e786018a3e514cddeb777bcb"
+  integrity sha512-sGD+5TEHU9G7X7zpyaoJxpOtwjTjvOd1f/MKBrWW2vf9UbYK+GUJrOzLhMoSWp/pHSYgvObkJkDb/HwieQjvhQ==
  dependencies:
-    "@sentry/types" "8.37.1"
-    "@sentry/utils" "8.37.1"
+    "@sentry/types" "8.38.0"
+    "@sentry/utils" "8.38.0"

 "@sentry/react@^8.0.0":
-  version "8.37.1"
-  resolved "https://registry.yarnpkg.com/@sentry/react/-/react-8.37.1.tgz#25ba2703b79436c9154e6f287959a8a3c040e8cb"
-  integrity sha512-HanDqBFTgIUhUsYztAHhSti+sEhQ8YopAymXgnpqkJ7j1PLHXZgQAre6M4Uvixu28WS5MDHC1onnAIBDgYRDYw==
+  version "8.38.0"
+  resolved "https://registry.yarnpkg.com/@sentry/react/-/react-8.38.0.tgz#513cbd9ba35bb0258d10b74d272800cbc5f05631"
+  integrity sha512-5396tewO00wbJFHUkmU+ikmp4A+wuBpStNc7UDyAm642jfbPajj51+GWld/ZYNFiQaZ/8I9tvvpHqVLnUh21gg==
  dependencies:
-    "@sentry/browser" "8.37.1"
-    "@sentry/core" "8.37.1"
-    "@sentry/types" "8.37.1"
-    "@sentry/utils" "8.37.1"
+    "@sentry/browser" "8.38.0"
+    "@sentry/core" "8.38.0"
+    "@sentry/types" "8.38.0"
+    "@sentry/utils" "8.38.0"
    hoist-non-react-statics "^3.3.2"

-"@sentry/types@8.37.1":
-  version "8.37.1"
-  resolved "https://registry.yarnpkg.com/@sentry/types/-/types-8.37.1.tgz#e92a7d346cfa29116568f4ffb58f65caedee0149"
-  integrity sha512-ryMOTROLSLINKFEbHWvi7GigNrsQhsaScw2NddybJGztJQ5UhxIGESnxGxWCufBmWFDwd7+5u0jDPCVUJybp7w==
+"@sentry/types@8.38.0":
+  version "8.38.0"
+  resolved "https://registry.yarnpkg.com/@sentry/types/-/types-8.38.0.tgz#9c48734a8b4055bfd553a0141efec78e9680ed09"
+  integrity sha512-fP5H9ZX01W4Z/EYctk3mkSHi7d06cLcX2/UWqwdWbyPWI+pL2QpUPICeO/C+8SnmYx//wFj3qWDhyPCh1PdFAA==

-"@sentry/utils@8.37.1":
-  version "8.37.1"
-  resolved "https://registry.yarnpkg.com/@sentry/utils/-/utils-8.37.1.tgz#6e020cd222d56d79953ea9d4630d91b3e323ceda"
-  integrity sha512-Qtn2IfpII12K17txG/ZtTci35XYjYi4CxbQ3j7nXY7toGv/+MqPXwV5q2i9g94XaSXlE5Wy9/hoCZoZpZs/djA==
+"@sentry/utils@8.38.0":
+  version "8.38.0"
+  resolved "https://registry.yarnpkg.com/@sentry/utils/-/utils-8.38.0.tgz#2f91ca7d044f6e17b993c866ca02a981c4c1bc25"
+  integrity sha512-3X7MgIKIx+2q5Al7QkhaRB4wV6DvzYsaeIwdqKUzGLuRjXmNgJrLoU87TAwQRmZ6Wr3IoEpThZZMNrzYPXxArw==
  dependencies:
-    "@sentry/types" "8.37.1"
+    "@sentry/types" "8.38.0"

 "@sentry/vite-plugin@^2.0.0":
  version "2.22.6"
@@ -3007,7 +3025,14 @@
  resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
  integrity sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==

-"@types/lodash@^4.14.199":
+"@types/lodash-es@^4.17.12":
+  version "4.17.12"
+  resolved "https://registry.yarnpkg.com/@types/lodash-es/-/lodash-es-4.17.12.tgz#65f6d1e5f80539aa7cfbfc962de5def0cf4f341b"
+  integrity sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==
+  dependencies:
+    "@types/lodash" "*"
+
+"@types/lodash@*":
  version "4.17.13"
  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.17.13.tgz#786e2d67cfd95e32862143abe7463a7f90c300eb"
  integrity sha512-lfx+dftrEZcdBPczf9d0Qv0x+j/rfNCMuC6OcfXmO8gkfeNAY88PgKUbvG56whcN23gc27yenwF6oJZXGFpYxg==
@@ -3043,6 +3068,11 @@
  resolved "https://registry.yarnpkg.com/@types/normalize-package-data/-/normalize-package-data-2.4.4.tgz#56e2cc26c397c038fab0e3a917a12d5c5909e901"
  integrity sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==

+"@types/pako@^2.0.3":
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/@types/pako/-/pako-2.0.3.tgz#b6993334f3af27c158f3fe0dfeeba987c578afb1"
+  integrity sha512-bq0hMV9opAcrmE0Byyo0fY3Ew4tgOevJmQ9grUhpXQhYfyLJ1Kqg3P33JT5fdbT2AjeAjR51zqqVjAL/HMkx7Q==
+
 "@types/prop-types@*":
  version "15.7.13"
  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.13.tgz#2af91918ee12d9d32914feb13f5326658461b451"
@@ -3283,14 +3313,16 @@
    "@use-gesture/core" "10.3.1"

 "@vector-im/compound-design-tokens@^1.9.1":
-  version "1.9.1"
-  resolved "https://registry.yarnpkg.com/@vector-im/compound-design-tokens/-/compound-design-tokens-1.9.1.tgz#644dc7ca5ca251fd476af2a7c075e9d740c08871"
-  integrity sha512-zjI+PhoNLNrJrLU8whEGjzCuxdqIz6tM0ARYBMS8AG1vC+NlGak6Y21TWnzHT3VINNhnF+PiQ9lFWsU65GydOg==
+  version "1.9.2"
+  resolved "https://registry.yarnpkg.com/@vector-im/compound-design-tokens/-/compound-design-tokens-1.9.2.tgz#0b76e5475da3bc36443f7dc87951b937b5013d6f"
+  integrity sha512-gQmK4dHR2iws3ZskDv8Il6A4/rvQV7TPSmEOXLsahDhBTInWqexXeQnNRSt9Z5DsLPrkxL3/KoCt9lfYu/yiag==
+  dependencies:
+    prettier "^3.3.3"

 "@vector-im/compound-web@^7.2.0":
-  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/@vector-im/compound-web/-/compound-web-7.2.0.tgz#0ec4a598e5755cc4b3e83fbc232a4986a12bf808"
-  integrity sha512-wOT2kSo936FSBG1CsZ1vmHLwTTWBq9OBBfq76sM95rUawRSQCCWnjFMLTiacRvxBHucZaSNsfhpJH3oZcrOexw==
+  version "7.3.0"
+  resolved "https://registry.yarnpkg.com/@vector-im/compound-web/-/compound-web-7.3.0.tgz#9594113ac50bff4794715104a30a60c52d15517d"
+  integrity sha512-gDppQUtpk5LvNHUg+Zlv9qzo1iBAag0s3g8Ec0qS5q4zGBKG6ruXXrNUKg1aK8rpbo2hYQsGaHM6dD8NqLoq3Q==
  dependencies:
    "@floating-ui/react" "^0.26.24"
    "@radix-ui/react-context-menu" "^2.2.1"
@@ -3320,9 +3352,9 @@
    react-refresh "^0.14.2"

 "@vitest/coverage-v8@^2.0.5":
-  version "2.1.4"
-  resolved "https://registry.yarnpkg.com/@vitest/coverage-v8/-/coverage-v8-2.1.4.tgz#c0df11cda12b3a04570e8065754917d35baa0c55"
-  integrity sha512-FPKQuJfR6VTfcNMcGpqInmtJuVXFSCd9HQltYncfR01AzXhLucMEtQ5SinPdZxsT5x/5BK7I5qFJ5/ApGCmyTQ==
+  version "2.1.5"
+  resolved "https://registry.yarnpkg.com/@vitest/coverage-v8/-/coverage-v8-2.1.5.tgz#74ef3bf6737f9897a54af22f820d90e85883ff83"
+  integrity sha512-/RoopB7XGW7UEkUndRXF87A9CwkoZAJW01pj8/3pgmDVsjMH2IKy6H1A38po9tmUlwhSyYs0az82rbKd9Yaynw==
  dependencies:
    "@ampproject/remapping" "^2.3.0"
    "@bcoe/v8-coverage" "^0.2.3"
@@ -3333,66 +3365,66 @@
    istanbul-reports "^3.1.7"
    magic-string "^0.30.12"
    magicast "^0.3.5"
-    std-env "^3.7.0"
+    std-env "^3.8.0"
    test-exclude "^7.0.1"
    tinyrainbow "^1.2.0"

-"@vitest/expect@2.1.4":
-  version "2.1.4"
-  resolved "https://registry.yarnpkg.com/@vitest/expect/-/expect-2.1.4.tgz#48f4f53a01092a3bdc118cff245f79ef388bdd8e"
-  integrity sha512-DOETT0Oh1avie/D/o2sgMHGrzYUFFo3zqESB2Hn70z6QB1HrS2IQ9z5DfyTqU8sg4Bpu13zZe9V4+UTNQlUeQA==
+"@vitest/expect@2.1.5":
+  version "2.1.5"
+  resolved "https://registry.yarnpkg.com/@vitest/expect/-/expect-2.1.5.tgz#5a6afa6314cae7a61847927bb5bc038212ca7381"
+  integrity sha512-nZSBTW1XIdpZvEJyoP/Sy8fUg0b8od7ZpGDkTUcfJ7wz/VoZAFzFfLyxVxGFhUjJzhYqSbIpfMtl/+k/dpWa3Q==
  dependencies:
-    "@vitest/spy" "2.1.4"
-    "@vitest/utils" "2.1.4"
+    "@vitest/spy" "2.1.5"
+    "@vitest/utils" "2.1.5"
    chai "^5.1.2"
    tinyrainbow "^1.2.0"

-"@vitest/mocker@2.1.4":
-  version "2.1.4"
-  resolved "https://registry.yarnpkg.com/@vitest/mocker/-/mocker-2.1.4.tgz#0dc07edb9114f7f080a0181fbcdb16cd4a2d855d"
-  integrity sha512-Ky/O1Lc0QBbutJdW0rqLeFNbuLEyS+mIPiNdlVlp2/yhJ0SbyYqObS5IHdhferJud8MbbwMnexg4jordE5cCoQ==
+"@vitest/mocker@2.1.5":
+  version "2.1.5"
+  resolved "https://registry.yarnpkg.com/@vitest/mocker/-/mocker-2.1.5.tgz#54ee50648bc0bb606dfc58e13edfacb8b9208324"
+  integrity sha512-XYW6l3UuBmitWqSUXTNXcVBUCRytDogBsWuNXQijc00dtnU/9OqpXWp4OJroVrad/gLIomAq9aW8yWDBtMthhQ==
  dependencies:
-    "@vitest/spy" "2.1.4"
+    "@vitest/spy" "2.1.5"
    estree-walker "^3.0.3"
    magic-string "^0.30.12"

-"@vitest/pretty-format@2.1.4", "@vitest/pretty-format@^2.1.4":
-  version "2.1.4"
-  resolved "https://registry.yarnpkg.com/@vitest/pretty-format/-/pretty-format-2.1.4.tgz#fc31993bdc1ef5a6c1a4aa6844e7ba55658a4f9f"
-  integrity sha512-L95zIAkEuTDbUX1IsjRl+vyBSLh3PwLLgKpghl37aCK9Jvw0iP+wKwIFhfjdUtA2myLgjrG6VU6JCFLv8q/3Ww==
+"@vitest/pretty-format@2.1.5", "@vitest/pretty-format@^2.1.5":
+  version "2.1.5"
+  resolved "https://registry.yarnpkg.com/@vitest/pretty-format/-/pretty-format-2.1.5.tgz#bc79b8826d4a63dc04f2a75d2944694039fa50aa"
+  integrity sha512-4ZOwtk2bqG5Y6xRGHcveZVr+6txkH7M2e+nPFd6guSoN638v/1XQ0K06eOpi0ptVU/2tW/pIU4IoPotY/GZ9fw==
  dependencies:
    tinyrainbow "^1.2.0"

-"@vitest/runner@2.1.4":
-  version "2.1.4"
-  resolved "https://registry.yarnpkg.com/@vitest/runner/-/runner-2.1.4.tgz#f9346500bdd0be1c926daaac5d683bae87ceda2c"
-  integrity sha512-sKRautINI9XICAMl2bjxQM8VfCMTB0EbsBc/EDFA57V6UQevEKY/TOPOF5nzcvCALltiLfXWbq4MaAwWx/YxIA==
+"@vitest/runner@2.1.5":
+  version "2.1.5"
+  resolved "https://registry.yarnpkg.com/@vitest/runner/-/runner-2.1.5.tgz#4d5e2ba2dfc0af74e4b0f9f3f8be020559b26ea9"
+  integrity sha512-pKHKy3uaUdh7X6p1pxOkgkVAFW7r2I818vHDthYLvUyjRfkKOU6P45PztOch4DZarWQne+VOaIMwA/erSSpB9g==
  dependencies:
-    "@vitest/utils" "2.1.4"
+    "@vitest/utils" "2.1.5"
    pathe "^1.1.2"

-"@vitest/snapshot@2.1.4":
-  version "2.1.4"
-  resolved "https://registry.yarnpkg.com/@vitest/snapshot/-/snapshot-2.1.4.tgz#ef8c3f605fbc23a32773256d37d3fdfd9b23d353"
-  integrity sha512-3Kab14fn/5QZRog5BPj6Rs8dc4B+mim27XaKWFWHWA87R56AKjHTGcBFKpvZKDzC4u5Wd0w/qKsUIio3KzWW4Q==
+"@vitest/snapshot@2.1.5":
+  version "2.1.5"
+  resolved "https://registry.yarnpkg.com/@vitest/snapshot/-/snapshot-2.1.5.tgz#a09a8712547452a84e08b3ec97b270d9cc156b4f"
+  integrity sha512-zmYw47mhfdfnYbuhkQvkkzYroXUumrwWDGlMjpdUr4jBd3HZiV2w7CQHj+z7AAS4VOtWxI4Zt4bWt4/sKcoIjg==
  dependencies:
-    "@vitest/pretty-format" "2.1.4"
+    "@vitest/pretty-format" "2.1.5"
    magic-string "^0.30.12"
    pathe "^1.1.2"

-"@vitest/spy@2.1.4":
-  version "2.1.4"
-  resolved "https://registry.yarnpkg.com/@vitest/spy/-/spy-2.1.4.tgz#4e90f9783437c5841a27c80f8fd84d7289a6100a"
-  integrity sha512-4JOxa+UAizJgpZfaCPKK2smq9d8mmjZVPMt2kOsg/R8QkoRzydHH1qHxIYNvr1zlEaFj4SXiaaJWxq/LPLKaLg==
+"@vitest/spy@2.1.5":
+  version "2.1.5"
+  resolved "https://registry.yarnpkg.com/@vitest/spy/-/spy-2.1.5.tgz#f790d1394a5030644217ce73562e92465e83147e"
+  integrity sha512-aWZF3P0r3w6DiYTVskOYuhBc7EMc3jvn1TkBg8ttylFFRqNN2XGD7V5a4aQdk6QiUzZQ4klNBSpCLJgWNdIiNw==
  dependencies:
    tinyspy "^3.0.2"

-"@vitest/utils@2.1.4":
-  version "2.1.4"
-  resolved "https://registry.yarnpkg.com/@vitest/utils/-/utils-2.1.4.tgz#6d67ac966647a21ce8bc497472ce230de3b64537"
-  integrity sha512-MXDnZn0Awl2S86PSNIim5PWXgIAx8CIkzu35mBdSApUip6RFOGXBCf3YFyeEu8n1IHk4bWD46DeYFu9mQlFIRg==
+"@vitest/utils@2.1.5":
+  version "2.1.5"
+  resolved "https://registry.yarnpkg.com/@vitest/utils/-/utils-2.1.5.tgz#0e19ce677c870830a1573d33ee86b0d6109e9546"
+  integrity sha512-yfj6Yrp0Vesw2cwJbP+cl04OC+IHFsuQsrsJBL9pyGeQXE56v1UAOQco+SR55Vf1nQzfV0QJg1Qum7AaWUwwYg==
  dependencies:
-    "@vitest/pretty-format" "2.1.4"
+    "@vitest/pretty-format" "2.1.5"
    loupe "^3.1.2"
    tinyrainbow "^1.2.0"

@@ -4116,14 +4148,16 @@ cosmiconfig@^8.1.3:
    parse-json "^5.2.0"
    path-type "^4.0.0"

-cross-fetch@4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/cross-fetch/-/cross-fetch-4.0.0.tgz#f037aef1580bb3a1a35164ea2a848ba81b445983"
-  integrity sha512-e4a5N8lVvuLgAWgnCrLr2PP0YyDOTHa9H/Rj54dirp61qXnNq46m82bRhNqIA5VccJtWBvPTFRV3TtvHUKPB1g==
+cross-spawn@^7.0.0:
+  version "7.0.5"
+  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.5.tgz#910aac880ff5243da96b728bc6521a5f6c2f2f82"
+  integrity sha512-ZVJrKKYunU38/76t0RMOulHOnUcbU9GbpWKAOZ0mhjr7CX6FVrH+4FrAapSOekrgFQ3f/8gwMEuIft0aKq6Hug==
  dependencies:
-    node-fetch "^2.6.12"
+    path-key "^3.1.0"
+    shebang-command "^2.0.0"
+    which "^2.0.1"

-cross-spawn@^7.0.0, cross-spawn@^7.0.2:
+cross-spawn@^7.0.2:
  version "7.0.3"
  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6"
  integrity sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==
@@ -4421,9 +4455,9 @@ easy-table@1.2.0:
    wcwidth "^1.0.1"

 electron-to-chromium@^1.5.41:
-  version "1.5.55"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.5.55.tgz#73684752aa2e1aa49cafb355a41386c6637e76a9"
-  integrity sha512-6maZ2ASDOTBtjt9FhqYPRnbvKU5tjG0IN9SztUOWYw2AzNDNpKJYLJmlK0/En4Hs/aiWnB+JZ+gW19PIGszgKg==
+  version "1.5.62"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.5.62.tgz#8289468414b0b0b3e9180ef619a763555debe612"
+  integrity sha512-t8c+zLmJHa9dJy96yBZRXGQYoiCEnHYgFwn1asvSPZSUdVxnB62A4RASd7k41ytG3ErFBA0TpHlKg9D9SQBmLg==

 emoji-regex@^8.0.0:
  version "8.0.0"
@@ -4557,6 +4591,11 @@ es-iterator-helpers@^1.1.0:
    iterator.prototype "^1.1.3"
    safe-array-concat "^1.1.2"

+es-module-lexer@^1.5.4:
+  version "1.5.4"
+  resolved "https://registry.yarnpkg.com/es-module-lexer/-/es-module-lexer-1.5.4.tgz#a8efec3a3da991e60efa6b633a7cad6ab8d26b78"
+  integrity sha512-MVNK56NiMrOwitFB7cqDwq0CQutbw+0BvLshJSse0MUNU+y1FC3bUS/AQg7oUng+/wKrrki7JfmwtVHkVfPLlw==
+
 es-object-atoms@^1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/es-object-atoms/-/es-object-atoms-1.0.0.tgz#ddb55cd47ac2e240701260bc2a8e31ecb643d941"
@@ -5447,13 +5486,6 @@ i18next-browser-languagedetector@^8.0.0:
  dependencies:
    "@babel/runtime" "^7.23.2"

-i18next-http-backend@^2.0.0:
-  version "2.6.2"
-  resolved "https://registry.yarnpkg.com/i18next-http-backend/-/i18next-http-backend-2.6.2.tgz#b25516446ae6f251ce8231e70e6ffbca833d46a5"
-  integrity sha512-Hp/kd8/VuoxIHmxsknJXjkTYYHzivAyAF15pzliKzk2TiXC25rZCEerb1pUFoxz4IVrG3fCvQSY51/Lu4ECV4A==
-  dependencies:
-    cross-fetch "4.0.0"
-
 i18next-parser@^9.0.0:
  version "9.0.2"
  resolved "https://registry.yarnpkg.com/i18next-parser/-/i18next-parser-9.0.2.tgz#f9d627422d33c352967556c8724975d58f1f5a95"
@@ -5501,10 +5533,10 @@ ignore@^5.1.8, ignore@^5.2.0, ignore@^5.3.1:
  resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.3.2.tgz#3cd40e729f3643fd87cb04e50bf0eb722bc596f5"
  integrity sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==

-immutable@^4.0.0:
-  version "4.3.7"
-  resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.3.7.tgz#c70145fc90d89fb02021e65c84eb0226e4e5a381"
-  integrity sha512-1hqclzwYwjRDFLjcFxOM5AYkkG0rpFPpr1RLPMEuGczoS7YA8gLhy8SWXYRAA/XwfEHpfo3cw5JGioS32fnMRw==
+immutable@^5.0.2:
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/immutable/-/immutable-5.0.2.tgz#bb8a987349a73efbe6b3b292a9cbaf1b530d296b"
+  integrity sha512-1NU7hWZDkV7hJ4PJ9dur9gTNQ4ePNPN4k9/0YhwjzykTi/+3Q5pF93YU5QoVj8BuOnhLgaY8gs0U2pj4kSYVcw==

 import-fresh@^3.2.1, import-fresh@^3.3.0:
  version "3.3.0"
@@ -5978,9 +6010,9 @@ kleur@^3.0.3:
  integrity sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==

 knip@^5.27.2:
-  version "5.36.6"
-  resolved "https://registry.yarnpkg.com/knip/-/knip-5.36.6.tgz#24a0af598b99728c4c80bb823d70c276b732899b"
-  integrity sha512-9Id0az4KDqdiSWEkzGh9qPXs84gvp+4fPeYF8k3ogiJK98EjAgPGAVWcdtrcIj1fgs4OSiGe/e7UOdy3wXhbTA==
+  version "5.37.1"
+  resolved "https://registry.yarnpkg.com/knip/-/knip-5.37.1.tgz#3c3e91c425dfb35be68b4d12cc0b9ee3cde794e8"
+  integrity sha512-69gjKj5lLsLXcIPXlHyFfX5AOHgRdh/iXH8gUqvmsHtjqoWhOATeXZDjvvemmgw7KxbWbUzxBNbpjhtJWzgqGA==
  dependencies:
    "@nodelib/fs.walk" "1.2.8"
    "@snyk/github-codeowners" "1.1.0"
@@ -6035,9 +6067,9 @@ lines-and-columns@^1.1.6:
  integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==

 livekit-client@^2.5.7:
-  version "2.6.0"
-  resolved "https://registry.yarnpkg.com/livekit-client/-/livekit-client-2.6.0.tgz#7506838fb59937150208b8e593701cde19f3fb75"
-  integrity sha512-hpxNBtyWIFCefoHjHoSjqPCw3m7AfSJVcVZw6rMsqds4u+dSpWLfYkglWP8JuPGUIssyOsZm/+bV3gBWfuOGGQ==
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/livekit-client/-/livekit-client-2.6.2.tgz#7821cac8d293b7685a4272b8aa269685f0ae75a8"
+  integrity sha512-SqXNHLgk2ZZOZyeHLXFAVAl+FVdSI+NK39LvIYstqS5X6IE5aCPlK4FqXY4l3aHpSft/BC/TR1CFGOq20ONkMA==
  dependencies:
    "@livekit/mutex" "1.0.0"
    "@livekit/protocol" "1.24.0"
@@ -6078,11 +6110,6 @@ lodash.merge@^4.6.2:
  resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
  integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==

-lodash@^4.17.21:
-  version "4.17.21"
-  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
-  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
-
 loglevel@1.9.1:
  version "1.9.1"
  resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.9.1.tgz#d63976ac9bcd03c7c873116d41c2a85bafff1be7"
@@ -6182,9 +6209,9 @@ matrix-events-sdk@0.0.1:
  resolved "https://registry.yarnpkg.com/matrix-events-sdk/-/matrix-events-sdk-0.0.1.tgz#c8c38911e2cb29023b0bbac8d6f32e0de2c957dd"
  integrity sha512-1QEOsXO+bhyCroIe2/A5OwaxHvBm7EsSQ46DEDn8RBIfQwN5HWBpFvyWWR4QY0KHPPnnJdI99wgRiAl7Ad5qaA==

-matrix-js-sdk@matrix-org/matrix-js-sdk#8e9a04cdec0f88fc876bbbf406db55b0677f005d:
-  version "34.10.0"
-  resolved "https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/8e9a04cdec0f88fc876bbbf406db55b0677f005d"
+matrix-js-sdk@matrix-org/matrix-js-sdk#80582a734684b532585b52cde63ef34dc7d774fa:
+  version "34.12.0"
+  resolved "https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/80582a734684b532585b52cde63ef34dc7d774fa"
  dependencies:
    "@babel/runtime" "^7.12.5"
    "@matrix-org/matrix-sdk-crypto-wasm" "^9.0.0"
@@ -6314,7 +6341,7 @@ node-addon-api@^7.0.0:
  resolved "https://registry.yarnpkg.com/node-addon-api/-/node-addon-api-7.1.1.tgz#1aba6693b0f255258a049d621329329322aad558"
  integrity sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==

-node-fetch@^2.6.12, node-fetch@^2.6.7:
+node-fetch@^2.6.7:
  version "2.7.0"
  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.7.0.tgz#d0f0fa6e3e2dc1d27efcd8ad99d550bda94d187d"
  integrity sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==
@@ -6822,9 +6849,9 @@ postcss-place@^10.0.0:
    postcss-value-parser "^4.2.0"

 postcss-preset-env@^10.0.0:
-  version "10.1.0"
-  resolved "https://registry.yarnpkg.com/postcss-preset-env/-/postcss-preset-env-10.1.0.tgz#b9c85d25b26c7581a8b11792b1883469c4b69cbf"
-  integrity sha512-OfzbinZWpFcmuLB3mabsGa0NArzx5DVVtZ9G1k326iLvU7Jj9q/G3ihBu/Msi0mt96CjrM23HpbuEewDvT71KQ==
+  version "10.1.1"
+  resolved "https://registry.yarnpkg.com/postcss-preset-env/-/postcss-preset-env-10.1.1.tgz#6ee631272353fb1c4a9711943e9b80a178ffce44"
+  integrity sha512-wqqsnBFD6VIwcHHRbhjTOcOi4qRVlB26RwSr0ordPj7OubRRxdWebv/aLjKLRR8zkZrbxZyuus03nOIgC5elMQ==
  dependencies:
    "@csstools/postcss-cascade-layers" "^5.0.1"
    "@csstools/postcss-color-function" "^4.0.6"
@@ -6850,10 +6877,10 @@ postcss-preset-env@^10.0.0:
    "@csstools/postcss-normalize-display-values" "^4.0.0"
    "@csstools/postcss-oklab-function" "^4.0.6"
    "@csstools/postcss-progressive-custom-properties" "^4.0.0"
-    "@csstools/postcss-random-function" "^1.0.0"
+    "@csstools/postcss-random-function" "^1.0.1"
    "@csstools/postcss-relative-color-syntax" "^3.0.6"
    "@csstools/postcss-scope-pseudo-class" "^4.0.1"
-    "@csstools/postcss-sign-functions" "^1.0.0"
+    "@csstools/postcss-sign-functions" "^1.1.0"
    "@csstools/postcss-stepped-value-functions" "^4.0.5"
    "@csstools/postcss-text-decoration-shorthand" "^4.0.1"
    "@csstools/postcss-trigonometric-functions" "^4.0.5"
@@ -6923,9 +6950,9 @@ postcss-value-parser@^4.2.0:
  integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==

 postcss@^8.4.41, postcss@^8.4.43:
-  version "8.4.48"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.48.tgz#765f3f8abaa2a2b065cdddbc57ad4cb5a76e515f"
-  integrity sha512-GCRK8F6+Dl7xYniR5a4FYbpBzU8XnZVeowqsQFYdcXuSbChgiks7qybSkbvnaeqv0G0B+dd9/jJgH8kkLDQeEA==
+  version "8.4.49"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.49.tgz#4ea479048ab059ab3ae61d082190fabfd994fe19"
+  integrity sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==
  dependencies:
    nanoid "^3.3.7"
    picocolors "^1.1.1"
@@ -6950,7 +6977,7 @@ prelude-ls@^1.2.1:
  resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
  integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==

-prettier@^3.0.0:
+prettier@^3.0.0, prettier@^3.3.3:
  version "3.3.3"
  resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.3.3.tgz#30c54fe0be0d8d12e6ae61dbb10109ea00d53105"
  integrity sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==
@@ -6965,9 +6992,9 @@ pretty-format@^27.0.2:
    react-is "^17.0.1"

 pretty-ms@^9.0.0:
-  version "9.1.0"
-  resolved "https://registry.yarnpkg.com/pretty-ms/-/pretty-ms-9.1.0.tgz#0ad44de6086454f48a168e5abb3c26f8db1b3253"
-  integrity sha512-o1piW0n3tgKIKCwk2vpM/vOV13zjJzvP37Ioze54YlTHE06m4tjEbzg9WsKkvTuyYln2DHjo5pY4qrZGI0otpw==
+  version "9.2.0"
+  resolved "https://registry.yarnpkg.com/pretty-ms/-/pretty-ms-9.2.0.tgz#e14c0aad6493b69ed63114442a84133d7e560ef0"
+  integrity sha512-4yf0QO/sllf/1zbZWYnvWw3NxCQwLXKzIj0G849LSufP15BXKM0rbD2Z3wVnkMfjdn/CB0Dpp444gYAACdsplg==
  dependencies:
    parse-ms "^4.0.0"

@@ -7510,12 +7537,12 @@ safe-regex-test@^1.0.3:
  integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==

 sass@^1.42.1:
-  version "1.80.6"
-  resolved "https://registry.yarnpkg.com/sass/-/sass-1.80.6.tgz#5d0aa55763984effe41e40019c9571ab73e6851f"
-  integrity sha512-ccZgdHNiBF1NHBsWvacvT5rju3y1d/Eu+8Ex6c21nHp2lZGLBEtuwc415QfiI1PJa1TpCo3iXwwSRjRpn2Ckjg==
+  version "1.81.0"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.81.0.tgz#a9010c0599867909dfdbad057e4a6fbdd5eec941"
+  integrity sha512-Q4fOxRfhmv3sqCLoGfvrC9pRV8btc0UtqL9mN6Yrv6Qi9ScL55CVH1vlPP863ISLEEMNLLuu9P+enCeGHlnzhA==
  dependencies:
    chokidar "^4.0.0"
-    immutable "^4.0.0"
+    immutable "^5.0.2"
    source-map-js ">=0.6.2 <2.0.0"
  optionalDependencies:
    "@parcel/watcher" "^2.4.1"
@@ -7698,10 +7725,10 @@ stackback@0.0.2:
  resolved "https://registry.yarnpkg.com/stackback/-/stackback-0.0.2.tgz#1ac8a0d9483848d1695e418b6d031a3c3ce68e3b"
  integrity sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==

-std-env@^3.7.0:
-  version "3.7.0"
-  resolved "https://registry.yarnpkg.com/std-env/-/std-env-3.7.0.tgz#c9f7386ced6ecf13360b6c6c55b8aaa4ef7481d2"
-  integrity sha512-JPbdCEQLj1w5GilpiHAx3qJvFndqybBysA3qUOnznweH4QbNYUsW/ea8QzSrnh0vNsezMMw5bcVool8lM0gwzg==
+std-env@^3.8.0:
+  version "3.8.0"
+  resolved "https://registry.yarnpkg.com/std-env/-/std-env-3.8.0.tgz#b56ffc1baf1a29dcc80a3bdf11d7fca7c315e7d5"
+  integrity sha512-Bc3YwwCB+OzldMxOXJIIvC6cPRWr/LxOp48CdQTOkPyk/t4JWWJbrilwBd7RJzKV8QW7tJkcgAmeuLLJugl5/w==

 stream-composer@^1.0.2:
  version "1.0.2"
@@ -7910,6 +7937,11 @@ tapable@^2.2.0:
  resolved "https://registry.yarnpkg.com/tapable/-/tapable-2.2.1.tgz#1967a73ef4060a82f12ab96af86d52fdb76eeca0"
  integrity sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==

+tar-mini@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/tar-mini/-/tar-mini-0.2.0.tgz#2b2cdc215f5b83b0ab8ce363dc9ded22de51849b"
+  integrity sha512-+qfUHz700DWnRutdUsxRRVZ38G1Qr27OetwaMYTdg8hcPxf46U0S1Zf76dQMWRBmusOt2ZCK5kbIaiLkoGO7WQ==
+
 teex@^1.0.1:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/teex/-/teex-1.0.1.tgz#b8fa7245ef8e8effa8078281946c85ab780a0b12"
@@ -7967,9 +7999,9 @@ tinyexec@^0.3.1:
  integrity sha512-WiCJLEECkO18gwqIp6+hJg0//p23HXp4S+gGtAKu3mI2F2/sXC4FvHvXvB0zJVVaTPhx1/tOwdbRsa1sOBIKqQ==

 tinypool@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/tinypool/-/tinypool-1.0.1.tgz#c64233c4fac4304e109a64340178760116dbe1fe"
-  integrity sha512-URZYihUbRPcGv95En+sz6MfghfIc2OJ1sv/RmhWZLouPY0/8Vo80viwPvg3dlaS9fuq7fQMEfgRRK7BBZThBEA==
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/tinypool/-/tinypool-1.0.2.tgz#706193cc532f4c100f66aa00b01c42173d9051b2"
+  integrity sha512-al6n+QEANGFOMf/dmUMsuS5/r9B06uwlyNjZZql/zv8J7ybHCgoihBNORZCY2mzUuAnomQa2JdhyHKzZxPCrFA==

 tinyrainbow@^1.2.0:
  version "1.2.0"
@@ -8056,7 +8088,7 @@ tsconfig-paths@^3.15.0:
    minimist "^1.2.6"
    strip-bom "^3.0.0"

-tslib@2, tslib@^2.0.3:
+tslib@2, tslib@^2.0.0, tslib@^2.0.3, tslib@^2.1.0:
  version "2.8.1"
  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.8.1.tgz#612efe4ed235d567e8aba5f2a5fab70280ade83f"
  integrity sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==
@@ -8071,11 +8103,6 @@ tslib@^1.8.1:
  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
  integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==

-tslib@^2.0.0, tslib@^2.1.0:
-  version "2.8.0"
-  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.8.0.tgz#d124c86c3c05a40a91e6fdea4021bd31d377971b"
-  integrity sha512-jWVzBLplnCmoaTr13V9dYbiQ99wvZRd0vNWaDRg+aVYRcjDF3nDksxFDE/+fkXnKhpnUUkmx5pK/v8mCtLVqZA==
-
 tsutils-etc@^1.4.1:
  version "1.4.2"
  resolved "https://registry.yarnpkg.com/tsutils-etc/-/tsutils-etc-1.4.2.tgz#6d6a9f33aa61867d832e4a455b2cebb6b104ebfa"
@@ -8345,13 +8372,6 @@ value-or-function@^4.0.0:
  resolved "https://registry.yarnpkg.com/value-or-function/-/value-or-function-4.0.0.tgz#70836b6a876a010dc3a2b884e7902e9db064378d"
  integrity sha512-aeVK81SIuT6aMJfNo9Vte8Dw0/FZINGBV8BfCraGtqVxIeLAEhJyoWs8SmvRVmXfGss2PmmOwZCuBPbZR+IYWg==

-vaul@^0.9.0:
-  version "0.9.1"
-  resolved "https://registry.yarnpkg.com/vaul/-/vaul-0.9.1.tgz#3640198e04636b209b1f907fcf3079bec6ecc66b"
-  integrity sha512-fAhd7i4RNMinx+WEm6pF3nOl78DFkAazcN04ElLPFF9BMCNGbY/kou8UMhIcicm0rJCNePJP0Yyza60gGOD0Jw==
-  dependencies:
-    "@radix-ui/react-dialog" "^1.0.4"
-
 vaul@^1.0.0:
  version "1.1.0"
  resolved "https://registry.yarnpkg.com/vaul/-/vaul-1.1.0.tgz#7da4bc965e0b184ada632f1208096b0f5575d920"
@@ -8410,16 +8430,27 @@ vinyl@^3.0.0, vinyl@~3.0.0:
    replace-ext "^2.0.0"
    teex "^1.0.1"

-vite-node@2.1.4:
-  version "2.1.4"
-  resolved "https://registry.yarnpkg.com/vite-node/-/vite-node-2.1.4.tgz#97ffb6de913fd8d42253afe441f9512e9dbdfd5c"
-  integrity sha512-kqa9v+oi4HwkG6g8ufRnb5AeplcRw8jUF6/7/Qz1qRQOXHImG8YnLbB+LLszENwFnoBl9xIf9nVdCFzNd7GQEg==
+vite-node@2.1.5:
+  version "2.1.5"
+  resolved "https://registry.yarnpkg.com/vite-node/-/vite-node-2.1.5.tgz#cf28c637b2ebe65921f3118a165b7cf00a1cdf19"
+  integrity sha512-rd0QIgx74q4S1Rd56XIiL2cYEdyWn13cunYBIuqh9mpmQr7gGS0IxXoP8R6OaZtNQQLyXSWbd4rXKYUbhFpK5w==
  dependencies:
    cac "^6.7.14"
    debug "^4.3.7"
+    es-module-lexer "^1.5.4"
    pathe "^1.1.2"
    vite "^5.0.0"

+vite-plugin-compression2@^1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/vite-plugin-compression2/-/vite-plugin-compression2-1.3.1.tgz#ac2a512f8ca90a76687add6cf441000dd2c41485"
+  integrity sha512-UMr66CFu+RVPiD8E3iaX9BdZjCgO+lzzaAPAZvL5YgwH6FU4OR/MulJEyp9wq9EKoO6ErjUtPpaiDi3hvzv79Q==
+  dependencies:
+    "@rollup/pluginutils" "^5.1.0"
+    tar-mini "^0.2.0"
+  optionalDependencies:
+    vite "^5.3.4"
+
 vite-plugin-html-template@^1.1.0:
  version "1.2.2"
  resolved "https://registry.yarnpkg.com/vite-plugin-html-template/-/vite-plugin-html-template-1.2.2.tgz#d263c18dcf5f5e54bc74894546fd0ed993191f2f"
@@ -8436,7 +8467,7 @@ vite-plugin-svgr@^4.0.0:
    "@svgr/core" "^8.1.0"
    "@svgr/plugin-jsx" "^8.1.0"

-vite@^5.0.0:
+vite@^5.0.0, vite@^5.3.4:
  version "5.4.11"
  resolved "https://registry.yarnpkg.com/vite/-/vite-5.4.11.tgz#3b415cd4aed781a356c1de5a9ebafb837715f6e5"
  integrity sha512-c7jFQRklXua0mTzneGW9QVyxFjUgwcihC4bXEtujIo2ouWCe1Ajt/amn2PCxYnhYfd5k09JX3SB7OYWFKYqj8Q==
@@ -8457,29 +8488,29 @@ vitest-axe@^1.0.0-pre.3:
    lodash-es "^4.17.21"

 vitest@^2.0.0:
-  version "2.1.4"
-  resolved "https://registry.yarnpkg.com/vitest/-/vitest-2.1.4.tgz#ba8f4589fb639cf5a9e6af54781667312b3e8230"
-  integrity sha512-eDjxbVAJw1UJJCHr5xr/xM86Zx+YxIEXGAR+bmnEID7z9qWfoxpHw0zdobz+TQAFOLT+nEXz3+gx6nUJ7RgmlQ==
+  version "2.1.5"
+  resolved "https://registry.yarnpkg.com/vitest/-/vitest-2.1.5.tgz#a93b7b84a84650130727baae441354e6df118148"
+  integrity sha512-P4ljsdpuzRTPI/kbND2sDZ4VmieerR2c9szEZpjc+98Z9ebvnXmM5+0tHEKqYZumXqlvnmfWsjeFOjXVriDG7A==
  dependencies:
-    "@vitest/expect" "2.1.4"
-    "@vitest/mocker" "2.1.4"
-    "@vitest/pretty-format" "^2.1.4"
-    "@vitest/runner" "2.1.4"
-    "@vitest/snapshot" "2.1.4"
-    "@vitest/spy" "2.1.4"
-    "@vitest/utils" "2.1.4"
+    "@vitest/expect" "2.1.5"
+    "@vitest/mocker" "2.1.5"
+    "@vitest/pretty-format" "^2.1.5"
+    "@vitest/runner" "2.1.5"
+    "@vitest/snapshot" "2.1.5"
+    "@vitest/spy" "2.1.5"
+    "@vitest/utils" "2.1.5"
    chai "^5.1.2"
    debug "^4.3.7"
    expect-type "^1.1.0"
    magic-string "^0.30.12"
    pathe "^1.1.2"
-    std-env "^3.7.0"
+    std-env "^3.8.0"
    tinybench "^2.9.0"
    tinyexec "^0.3.1"
    tinypool "^1.0.1"
    tinyrainbow "^1.2.0"
    vite "^5.0.0"
-    vite-node "2.1.4"
+    vite-node "2.1.5"
    why-is-node-running "^2.3.0"

 void-elements@3.1.0:
Author	SHA1	Message	Date
Robin	eeec10e298	Merge branch 'livekit' into hs/remove-memory-store	2024-11-20 10:52:55 -05:00
Robin	380fa67f57	Merge pull request #2811 from robintown/revert-memory-store Revert memory store and update matrix-js-sdk	2024-11-20 10:42:41 -05:00
Robin	8830bd74cb	Update matrix-js-sdk Return matrix-js-sdk to the develop branch.	2024-11-20 10:40:08 -05:00
Robin	3ab9bb72e2	Revert "Init client with a memory store (for MSC4222) (#2764 )" This reverts commit `83fa9661cf`. We won't need this hack once we're no longer using a matrix-js-sdk branch with MSC4222 support.	2024-11-20 10:22:42 -05:00
Hugh Nimmo-Smith	8891a9a70e	Make it clearer what are inputs and what are expected outputs in test cases (#2808 ) Rationale: try and make the marbles section of each test case more readable	2024-11-20 14:44:23 +00:00
Timo	7d4d1445d0	another js-sdk bump (to a version that is rebased on develop again) - includes the indexedDB fix	2024-11-20 12:28:22 +01:00
Hugh Nimmo-Smith	826d0ee40d	Rxjs subjects should not be exposed (#2805 ) This rule will encourage us to do the right thing and better abstract. See https://github.com/cartant/eslint-plugin-rxjs/blob/main/docs/rules/no-exposed-subjects.md	2024-11-20 10:32:21 +00:00
Hugh Nimmo-Smith	fbc2cd3e97	Remove redundant distinctUntilChanged (#2804 ) Because this.scope.state() does this for us	2024-11-20 10:31:36 +00:00
Timo	9dbc43d692	newer js-sdk	2024-11-19 18:57:17 +01:00
Will Hunt	b3ceb5300c	Add keyboard shortcuts for raised hand / reactions (#2784 ) * Add support for reactions / raised-hands via keyboard shortcuts. * Add tests * Fixup shortcuts * update snapshotr * fix type * keyshortcuts * remove mistakenly commited file * fix label logic * Add renderer for call joined / left * Use caption * lint * remove unexpected file * remove other unexpected change * Remove other other unexpected change.	2024-11-19 16:57:57 +00:00
ElementRobot	ffbc48fe86	Merge pull request #2801 from element-hq/actions/localazy-download Localazy Download	2024-11-19 16:00:11 +00:00
fkwp	4655da3c35	Translations updates	2024-11-19 15:58:53 +00:00
Robin	585998cb87	Merge pull request #2800 from robintown/reactions-button Update icon and label of reactions button	2024-11-19 10:44:58 -05:00
Robin	8ec2f9bb31	Update tests	2024-11-19 10:43:42 -05:00
Robin	2ee468ba44	Update icon and label of reactions button They've been updated in the designs.	2024-11-19 09:56:46 -05:00
fkwp	17eb435a7a	Merge pull request #2799 from element-hq/renovate/livekit-client Update dependency livekit-client to v2.6.2	2024-11-19 15:55:19 +01:00
renovate[bot]	1678ca71c1	Update dependency livekit-client to v2.6.2	2024-11-19 14:53:23 +00:00
Robin	90fe8e0529	Merge pull request #2734 from element-hq/renovate/compound Update Compound	2024-11-19 09:48:17 -05:00
Timo	dfece88d66	js-sdk-bump to nov branch without custom state event ignore logic	2024-11-19 15:01:54 +01:00
Hugh Nimmo-Smith	64749d0b7a	Expose TestScheduler as global (#2796 )	2024-11-18 22:39:59 +00:00
fkwp	79cd3047e9	Merge pull request #2798 from element-hq/renovate/livekit-components Update dependency @livekit/components-react to v2.6.8	2024-11-18 20:40:30 +01:00
renovate[bot]	9078c35e06	Update dependency @livekit/components-react to v2.6.8	2024-11-18 19:39:01 +00:00
renovate[bot]	2833d9a816	Update Compound	2024-11-18 19:37:15 +00:00
fkwp	8598be1d92	Merge pull request #2797 from element-hq/renovate/livekit-client Update dependency livekit-client to v2.6.1	2024-11-18 20:36:18 +01:00
renovate[bot]	02d2de3831	Update dependency livekit-client to v2.6.1	2024-11-18 19:34:22 +00:00
fkwp	6d1aa0087b	Merge pull request #2729 from element-hq/renovate/migrate-config Migrate renovate config	2024-11-18 13:17:07 +01:00
renovate[bot]	8b4b9f4494	Update all non-major dependencies (#2795 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2024-11-18 10:09:21 +01:00
Timo	a551cde47b	Make reactions background use the frosted glass look (#2792 ) * Make reactions background use the frosted glass look * fix spacing if there is raise hand + reaction.	2024-11-15 18:58:40 +01:00
ElementRobot	01b9d7a70e	Merge pull request #2793 from element-hq/actions/localazy-download Localazy Download	2024-11-15 16:23:56 +00:00
fkwp	f56d4a32a3	Translations updates	2024-11-15 16:22:27 +00:00
Will Hunt	eed1b98cf9	Update reactions to new design (#2751 ) * Replace search strings * Add expander for reactions view * lint * Remove useless list * Update tests * lint * Only shrink buttons on web version, mobile never shrinks * Revert accidental change. * Remove border from button * Tidy up views. * Finish matching designs. * Fix height * Remove a unneeded class * Remove more cruft * Remove unnessacery chunk * Evenly space reactions * lint * Disable reaction buttons when busy * Try to make menu a bit more responsive * Update test * further screen size tweaks	2024-11-15 16:02:06 +00:00
Half-Shot	f504a6ab28	Import latest js-sdk commit	2024-11-15 14:39:02 +00:00
Half-Shot	319c9aa7da	Remove memory store option	2024-11-15 14:38:47 +00:00
Will Hunt	c1208ac7b6	Small improvements to settings tab (#2789 ) * align profile tab. * Fix descriptions	2024-11-15 14:09:52 +00:00
Quentin Gliech	d77e9e8f08	Merge pull request #2790 from element-hq/quenting/preload-config Pre-fetch the config.json to improve startup time	2024-11-15 13:55:41 +01:00
Quentin Gliech	2e172aa3be	Pre-fetch the config.json to improve startup time	2024-11-15 13:36:36 +01:00
fkwp	9650ca9687	Merge pull request #2787 from element-hq/quenting/docker-vary-encoding Send 'Vary: Content-Encoding' header from nginx	2024-11-15 09:22:25 +01:00
Quentin Gliech	f7e4b79502	Send 'Vary: Content-Encoding' header from nginx	2024-11-15 09:19:45 +01:00
fkwp	20840d901e	Merge pull request #2786 from element-hq/quenting/docker-cache-headers Precompress assets and set the right cache headers	2024-11-15 08:52:12 +01:00
Quentin Gliech	4c1c818ba9	Merge pull request #2776 from element-hq/quenting/locales-as-assets Handle locales as Vite assets	2024-11-15 08:41:56 +01:00
Quentin Gliech	f022eb09a2	Precompress assets and set the right cache headers	2024-11-15 00:59:26 +01:00
Hugh Nimmo-Smith	50934a53cd	Lazy load matrix-js-sdk when running as SPA (#2785 )	2024-11-14 21:54:02 +00:00
Quentin Gliech	99d5886e32	Handles locales as Vite assets	2024-11-14 19:12:11 +01:00
Quentin Gliech	137a53dbee	Load the Intl.Segmenter and Intl.DurationFormat polyfills only if needed (#2778 ) * Load the Intl.Segmenter polyfill only if needed * Also polyfill Intl.DurationFormat only if needed * Polyfill Intl.* in tests * Load the default translations in tests * Instanciate the Intl.DurationFormat in the component	2024-11-14 18:06:38 +00:00
Hugh Nimmo-Smith	6e5c468780	Use more explicit names and types for LayoutMedia observables (#2781 )	2024-11-14 14:23:50 +01:00
Quentin Gliech	1478dbe6a1	Sync the Vaul version with the one used by Compound (#2783 )	2024-11-14 13:11:17 +00:00
Quentin Gliech	85d8e036d5	Lazy-load pako when submitting rageshake (#2782 )	2024-11-14 13:00:01 +00:00
ElementRobot	84e172a2ba	Merge pull request #2779 from element-hq/actions/localazy-download Localazy Download	2024-11-14 11:42:36 +00:00
fkwp	7fddad02e0	Translations updates	2024-11-14 11:40:09 +00:00
Quentin Gliech	3b3f7762a7	Use optimized font from fontsource (#2775 )	2024-11-14 11:23:09 +00:00
Quentin Gliech	2297675b06	Replace lodash with lodash-es (#2777 )	2024-11-14 11:18:43 +00:00
renovate[bot]	e37f36937e	Migrate config renovate.json	2024-11-06 18:46:12 +00:00