Merge pull request #2602 from Johennes/johannes/qr

Display QR code when sharing invite link
Update src/QrCode.module.css
2024-09-02 18:56:42 +02:00 · 2024-09-02 17:52:01 +02:00 · 2024-09-02 17:48:56 +02:00 · 2024-09-02 17:48:15 +02:00 · 2024-09-02 16:30:37 +02:00 · 2024-09-02 16:28:53 +02:00
130 changed files with 2887 additions and 4830 deletions
--- a/.github/workflows/docker.yaml
+++ b/.github/workflows/docker.yaml
@@ -51,7 +51,7 @@ jobs:
        uses: docker/setup-buildx-action@988b5a0280414f521da01fcc63a27aeeb4b104db # v3.6.1

      - name: Build and push Docker image
-        uses: docker/build-push-action@5176d81f87c23d6fc96624dfdbcd9f3830bbe445 # v6.5.0
+        uses: docker/build-push-action@5cd11c3a4ced054e52742c5fd54dca954e0edd85 # v6.7.0
        with:
          context: .
          platforms: linux/amd64,linux/arm64
--- a/.github/workflows/element-call.yaml
+++ b/.github/workflows/element-call.yaml
@@ -39,7 +39,7 @@ jobs:
          VITE_APP_VERSION: ${{ inputs.vite_app_version }}
          NODE_OPTIONS: "--max-old-space-size=4096"
      - name: Upload Artifact
-        uses: actions/upload-artifact@0b2256b8c012f0828dc542b3febcab082c67f72b # v4
+        uses: actions/upload-artifact@834a144ee995460fba8ed112a2fc961b36a5ec5a # v4
        with:
          name: build-output
          path: dist
--- a/.github/workflows/lint.yaml
+++ b/.github/workflows/lint.yaml
@@ -23,3 +23,5 @@ jobs:
        run: "yarn run lint:eslint"
      - name: Type check
        run: "yarn run lint:types"
+      - name: Dead code analysis
+        run: "yarn run lint:knip"
--- a/.github/workflows/publish.yaml
+++ b/.github/workflows/publish.yaml
@@ -51,7 +51,7 @@ jobs:
        run: |
          tar --numeric-owner --transform "s/dist/element-call-${TARBALL_VERSION}/" -cvzf element-call-${TARBALL_VERSION}.tar.gz dist
      - name: Upload
-        uses: actions/upload-artifact@0b2256b8c012f0828dc542b3febcab082c67f72b # v4.3.4
+        uses: actions/upload-artifact@50769540e7f4bd5e21e526ee35c689e35e0d6874 # v4.4.0
        env:
          GITHUB_TOKEN: ${{ github.token }}
        with:
--- a/.github/workflows/test.yaml
+++ b/.github/workflows/test.yaml
@@ -18,8 +18,11 @@ jobs:
      - name: Install dependencies
        run: "yarn install"
      - name: Vitest
-        run: "yarn run test"
+        run: "yarn run test:coverage"
      - name: Upload to codecov
        uses: codecov/codecov-action@e28ff129e5465c2c0dcc6f003fc735cb6ae0c673 # v4
+        env:
+          CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
        with:
          flags: unittests
+          fail_ci_if_error: true
--- a/.storybook/main.js
+++ b/.storybook/main.js
@@ -1,25 +0,0 @@
-const svgrPlugin = require("vite-plugin-svgr");
-const path = require("path");
-
-module.exports = {
-  stories: ["../src/**/*.stories.@(js|jsx|ts|tsx)"],
-  framework: "@storybook/react",
-  core: {
-    builder: "storybook-builder-vite",
-  },
-  async viteFinal(config) {
-    config.plugins = config.plugins.filter(
-      (item) =>
-        !(
-          Array.isArray(item) &&
-          item.length > 0 &&
-          item[0].name === "vite-plugin-mdx"
-        ),
-    );
-    config.plugins.push(svgrPlugin());
-    config.resolve = config.resolve || {};
-    config.resolve.dedupe = config.resolve.dedupe || [];
-    config.resolve.dedupe.push("react", "react-dom", "matrix-js-sdk");
-    return config;
-  },
-};
--- a/.storybook/preview.jsx
+++ b/.storybook/preview.jsx
@@ -1,24 +0,0 @@
-import { addDecorator } from "@storybook/react";
-import { MemoryRouter } from "react-router-dom";
-import { usePageFocusStyle } from "../src/usePageFocusStyle";
-import { OverlayProvider } from "@react-aria/overlays";
-import "../src/index.css";
-
-export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
-  controls: {
-    matchers: {
-      color: /(background|color)$/i,
-      date: /Date$/,
-    },
-  },
-};
-
-addDecorator((story) => {
-  usePageFocusStyle();
-  return (
-    <MemoryRouter initialEntries={["/"]}>
-      <OverlayProvider>{story()}</OverlayProvider>
-    </MemoryRouter>
-  );
-});
--- a/README.md
+++ b/README.md
@@ -22,7 +22,7 @@ yarn
 yarn build
 ```

-If all went well, you can now find the build output under `dist` as a series of static files. These can be hosted using any web server of your choice.
+If all went well, you can now find the build output under `dist` as a series of static files. These can be hosted using any web server that can be configured with custom routes (see below).

 You may also wish to add a configuration file (Element Call uses the domain it's hosted on as a Homeserver URL by default,
 but you can change this in the config file). This goes in `public/config.json` - you can use the sample as a starting point:
@@ -141,6 +141,10 @@ Run backend components:
 yarn backend
 ```

+### Test Coverage
+
+<img src="https://codecov.io/github/element-hq/element-call/graphs/tree.svg?token=O6CFVKK6I1"></img>
+
 ### Add a new translation key

 To add a new translation key you can do these steps:
--- a/codecov.yaml
+++ b/codecov.yaml
@@ -0,0 +1,13 @@
+# Don't post comments on PRs; they're noisy and the same information can be
+# gotten through the checks section at the bottom of the PR anyways
+comment: false
+coverage:
+  status:
+    project:
+      default:
+        # Track the impact of changes on overall coverage without blocking PRs
+        informational: true
+    patch:
+      default:
+        # Expect 80% coverage on all lines that a PR touches
+        target: 80%
--- a/docs/README.md
+++ b/docs/README.md
@@ -2,5 +2,6 @@

 This folder contains documentation for Element Call setup and usage.

- [Url format and parameters](./url-params.md)
 - [Embedded vs standalone mode](./embedded-standalone.md)
+- [Url format and parameters](./url-params.md)
+- [Global JS controls](./controls.md)
--- a/docs/controls.md
+++ b/docs/controls.md
@@ -0,0 +1,7 @@
+# Global JS controls
+
+A few aspects of Element Call's interface can be controlled through a global API on the `window`:
+
+- `controls.canEnterPip(): boolean` Determines whether it's possible to enter picture-in-picture mode.
+- `controls.enablePip(): void` Puts the call interface into picture-in-picture mode. Throws if not in a call.
+- `controls.disablePip(): void` Takes the call interface out of picture-in-picture mode, restoring it to its natural display mode. Throws if not in a call.
--- a/knip.ts
+++ b/knip.ts
@@ -0,0 +1,30 @@
+import { KnipConfig } from "knip";
+
+export default {
+  entry: ["src/main.tsx", "i18next-parser.config.ts"],
+  ignoreBinaries: [
+    // This is deprecated, so Knip doesn't actually recognize it as a globally
+    // installed binary. TODO We should switch to Compose v2:
+    // https://docs.docker.com/compose/migrate/
+    "docker-compose",
+  ],
+  ignoreDependencies: [
+    // Used in CSS
+    "normalize.css",
+    // Used for its global type declarations
+    "@types/grecaptcha",
+    // Because we use matrix-js-sdk as a Git dependency rather than consuming
+    // the proper release artifacts, and also import directly from src/, we're
+    // forced to re-install some of the types that it depends on even though
+    // these look unused to Knip
+    "@types/content-type",
+    "@types/sdp-transform",
+    "@types/uuid",
+    // We obviously use this, but if the package has been linked with yarn link,
+    // then Knip will flag it as a false positive
+    // https://github.com/webpro-nl/knip/issues/766
+    "@vector-im/compound-web",
+    "matrix-widget-api",
+  ],
+  ignoreExportsUsedInFile: true,
+} satisfies KnipConfig;
--- a/package.json
+++ b/package.json
@@ -8,105 +8,61 @@
    "serve": "vite preview",
    "prettier:check": "prettier -c .",
    "prettier:format": "prettier -w .",
-    "lint": "yarn lint:types && yarn lint:eslint",
+    "lint": "yarn lint:types && yarn lint:eslint && yarn lint:knip",
    "lint:eslint": "eslint --max-warnings 0 src",
    "lint:eslint-fix": "eslint --max-warnings 0 src --fix",
+    "lint:knip": "knip",
    "lint:types": "tsc",
-    "i18n": "node_modules/i18next-parser/bin/cli.js",
-    "i18n:check": "node_modules/i18next-parser/bin/cli.js --fail-on-warnings --fail-on-update",
+    "i18n": "i18next",
+    "i18n:check": "i18next --fail-on-warnings --fail-on-update",
    "test": "vitest",
-    "test:coverage": "vitest run --coverage",
+    "test:coverage": "vitest --coverage",
    "backend": "docker-compose -f backend-docker-compose.yml up"
  },
-  "dependencies": {
-    "@juggle/resize-observer": "^3.3.1",
-    "@livekit/components-core": "^0.11.0",
-    "@livekit/components-react": "^2.0.0",
-    "@matrix-org/olm": "https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.14.tgz",
-    "@opentelemetry/api": "^1.4.0",
-    "@opentelemetry/context-zone": "^1.9.1",
-    "@opentelemetry/exporter-jaeger": "^1.9.1",
-    "@opentelemetry/exporter-trace-otlp-http": "^0.52.0",
-    "@opentelemetry/instrumentation-document-load": "^0.39.0",
-    "@opentelemetry/instrumentation-user-interaction": "^0.39.0",
-    "@opentelemetry/sdk-trace-web": "^1.9.1",
-    "@radix-ui/react-dialog": "^1.0.4",
-    "@radix-ui/react-slider": "^1.1.2",
-    "@radix-ui/react-visually-hidden": "^1.0.3",
-    "@react-aria/button": "^3.3.4",
-    "@react-aria/focus": "^3.5.0",
-    "@react-aria/menu": "^3.3.0",
-    "@react-aria/overlays": "^3.7.3",
-    "@react-aria/select": "^3.6.0",
-    "@react-aria/tabs": "^3.1.0",
-    "@react-aria/tooltip": "^3.1.3",
-    "@react-aria/utils": "^3.10.0",
-    "@react-spring/web": "^9.4.4",
-    "@react-stately/collections": "^3.3.4",
-    "@react-stately/select": "^3.1.3",
-    "@react-stately/tooltip": "^3.0.5",
-    "@react-stately/tree": "^3.2.0",
-    "@sentry/react": "^8.0.0",
-    "@sentry/tracing": "^7.0.0",
-    "@types/lodash": "^4.14.199",
-    "@use-gesture/react": "^10.2.11",
-    "@vector-im/compound-design-tokens": "^1.0.0",
-    "@vector-im/compound-web": "^6.0.0",
-    "@vitejs/plugin-basic-ssl": "^1.0.1",
-    "@vitejs/plugin-react": "^4.0.1",
-    "buffer": "^6.0.3",
-    "classnames": "^2.3.1",
-    "events": "^3.3.0",
-    "i18next": "^23.0.0",
-    "i18next-browser-languagedetector": "^8.0.0",
-    "i18next-http-backend": "^2.0.0",
-    "livekit-client": "^2.0.2",
-    "lodash": "^4.17.21",
-    "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#9176d3a671114be97ee7a42155a6d40a233384f1",
-    "matrix-widget-api": "^1.8.2",
-    "normalize.css": "^8.0.1",
-    "observable-hooks": "^4.2.3",
-    "pako": "^2.0.4",
-    "postcss-preset-env": "^10.0.0",
-    "posthog-js": "^1.29.0",
-    "react": "18",
-    "react-dom": "18",
-    "react-i18next": "^15.0.0",
-    "react-router-dom": "^5.2.0",
-    "react-use-clipboard": "^1.0.7",
-    "react-use-measure": "^2.1.1",
-    "rxjs": "^7.8.1",
-    "sdp-transform": "^2.14.1",
-    "tinyqueue": "^3.0.0",
-    "unique-names-generator": "^4.6.0",
-    "uuid": "10",
-    "vaul": "^0.9.0"
-  },
  "devDependencies": {
    "@babel/core": "^7.16.5",
    "@babel/preset-env": "^7.22.20",
    "@babel/preset-react": "^7.22.15",
    "@babel/preset-typescript": "^7.23.0",
-    "@react-spring/rafz": "^9.7.3",
-    "@react-types/dialog": "^3.5.5",
+    "@juggle/resize-observer": "^3.3.1",
+    "@livekit/components-core": "^0.11.0",
+    "@livekit/components-react": "^2.0.0",
+    "@opentelemetry/api": "^1.4.0",
+    "@opentelemetry/core": "^1.25.1",
+    "@opentelemetry/exporter-trace-otlp-http": "^0.53.0",
+    "@opentelemetry/resources": "^1.25.1",
+    "@opentelemetry/sdk-trace-base": "^1.25.1",
+    "@opentelemetry/sdk-trace-web": "^1.9.1",
+    "@opentelemetry/semantic-conventions": "^1.25.1",
+    "@radix-ui/react-dialog": "^1.0.4",
+    "@radix-ui/react-slider": "^1.1.2",
+    "@radix-ui/react-visually-hidden": "^1.0.3",
+    "@react-spring/web": "^9.4.4",
+    "@sentry/react": "^8.0.0",
    "@sentry/vite-plugin": "^2.0.0",
    "@testing-library/dom": "^10.1.0",
    "@testing-library/react": "^16.0.0",
    "@testing-library/user-event": "^14.5.1",
    "@types/content-type": "^1.1.5",
-    "@types/dom-screen-wake-lock": "^1.0.1",
-    "@types/dompurify": "^3.0.2",
-    "@types/grecaptcha": "^3.0.4",
+    "@types/grecaptcha": "^3.0.9",
+    "@types/jsdom": "^21.1.7",
+    "@types/lodash": "^4.14.199",
    "@types/node": "^20.0.0",
+    "@types/qrcode": "^1.5.5",
    "@types/react-dom": "^18.3.0",
    "@types/react-router-dom": "^5.3.3",
-    "@types/request": "^2.48.8",
    "@types/sdp-transform": "^2.4.5",
    "@types/uuid": "10",
    "@typescript-eslint/eslint-plugin": "^7.0.0",
    "@typescript-eslint/parser": "^7.0.0",
-    "babel-loader": "^9.0.0",
+    "@use-gesture/react": "^10.2.11",
+    "@vector-im/compound-design-tokens": "^1.0.0",
+    "@vector-im/compound-web": "^6.0.0",
+    "@vitejs/plugin-basic-ssl": "^1.0.1",
+    "@vitejs/plugin-react": "^4.0.1",
+    "@vitest/coverage-v8": "^2.0.5",
    "babel-plugin-transform-vite-meta-env": "^1.0.3",
+    "classnames": "^2.3.1",
    "eslint": "^8.14.0",
    "eslint-config-google": "^0.14.0",
    "eslint-config-prettier": "^9.0.0",
@@ -117,12 +73,39 @@
    "eslint-plugin-react": "^7.29.4",
    "eslint-plugin-react-hooks": "^4.5.0",
    "eslint-plugin-unicorn": "^55.0.0",
+    "global-jsdom": "^24.0.0",
+    "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": "^24.0.0",
+    "jsdom": "^25.0.0",
+    "knip": "^5.27.2",
+    "livekit-client": "^2.0.2",
+    "lodash": "^4.17.21",
+    "loglevel": "^1.9.1",
+    "matrix-js-sdk": "^v34.4.0",
+    "matrix-widget-api": "^1.8.2",
+    "normalize.css": "^8.0.1",
+    "observable-hooks": "^4.2.3",
+    "pako": "^2.0.4",
+    "postcss": "^8.4.41",
+    "postcss-preset-env": "^10.0.0",
+    "posthog-js": "^1.29.0",
    "prettier": "^3.0.0",
+    "qrcode": "^1.5.4",
+    "react": "18",
+    "react-dom": "18",
+    "react-i18next": "^15.0.0",
+    "react-router-dom": "^5.2.0",
+    "react-use-clipboard": "^1.0.7",
+    "react-use-measure": "^2.1.1",
+    "rxjs": "^7.8.1",
    "sass": "^1.42.1",
    "typescript": "^5.1.6",
    "typescript-eslint-language-service": "^5.0.5",
+    "unique-names-generator": "^4.6.0",
+    "vaul": "^0.9.0",
    "vite": "^5.0.0",
    "vite-plugin-html-template": "^1.1.0",
    "vite-plugin-svgr": "^4.0.0",
--- a/public/locales/en-GB/app.json
+++ b/public/locales/en-GB/app.json
@@ -4,8 +4,8 @@
  },
  "action": {
    "close": "Close",
-    "copy": "Copy",
    "copy_link": "Copy link",
+    "edit": "Edit",
    "go": "Go",
    "invite": "Invite",
    "no": "No",
@@ -13,7 +13,8 @@
    "remove": "Remove",
    "sign_in": "Sign in",
    "sign_out": "Sign out",
-    "submit": "Submit"
+    "submit": "Submit",
+    "upload_file": "Upload file"
  },
  "analytics_notice": "By participating in this beta, you consent to the collection of anonymous data, which we use to improve the product. You can find more information about which data we track in our <2>Privacy Policy</2> and our <5>Cookie Policy</5>.",
  "app_selection_modal": {
@@ -43,7 +44,6 @@
    "avatar": "Avatar",
    "back": "Back",
    "camera": "Camera",
-    "copied": "Copied!",
    "display_name": "Display name",
    "encrypted": "Encrypted",
    "error": "Error",
@@ -59,6 +59,8 @@
    "username": "Username",
    "video": "Video"
  },
+  "crypto_version": "Crypto version: {{version}}",
+  "device_id": "Device ID: {{id}}",
  "disconnected_banner": "Connectivity to the server has been lost.",
  "full_screen_view_description": "<0>Submitting debug logs will help us track down the problem.</0>",
  "full_screen_view_h1": "<0>Oops, something's gone wrong.</0>",
@@ -99,11 +101,13 @@
  "login_auth_links_prompt": "Not registered yet?",
  "login_subheading": "To continue to Element",
  "login_title": "Login",
+  "matrix_id": "Matrix ID: {{id}}",
  "microphone_off": "Microphone off",
  "microphone_on": "Microphone on",
  "mute_microphone_button_label": "Mute microphone",
  "participant_count_one": "{{count, number}}",
  "participant_count_other": "{{count, number}}",
+  "qr_code": "QR Code",
  "rageshake_button_error_caption": "Retry sending logs",
  "rageshake_request_modal": {
    "body": "Another user on this call is having an issue. In order to better diagnose these issues we'd like to collect a debug log.",
@@ -127,7 +131,6 @@
  "room_auth_view_eula_caption": "By clicking \"Join call now\", you agree to our <2>End User Licensing Agreement (EULA)</2>",
  "room_auth_view_join_button": "Join call now",
  "screenshare_button_label": "Share screen",
-  "select_input_unset_button": "Select an option",
  "settings": {
    "developer_settings_label": "Developer Settings",
    "developer_settings_label_description": "Expose developer settings in the settings window.",
@@ -154,7 +157,7 @@
  "unauthenticated_view_eula_caption": "By clicking \"Go\", you agree to our <2>End User Licensing Agreement (EULA)</2>",
  "unauthenticated_view_login_button": "Login to your account",
  "unmute_microphone_button_label": "Unmute microphone",
-  "version": "Version: {{version}}",
+  "version": "{{productName}} version: {{version}}",
  "video_tile": {
    "always_show": "Always show",
    "change_fit_contain": "Fit to frame",
--- a/renovate.json
+++ b/renovate.json
@@ -44,20 +44,5 @@
      "prHeader": "Please review modals on mobile for visual regressions."
    }
  ],
-  "semanticCommits": "disabled",
-  "ignoreDeps": [
-    "@react-aria/button",
-    "@react-aria/focus",
-    "@react-aria/menu",
-    "@react-aria/overlays",
-    "@react-aria/select",
-    "@react-aria/tabs",
-    "@react-aria/tooltip",
-    "@react-aria/utils",
-    "@react-stately/collections",
-    "@react-stately/select",
-    "@react-stately/tooltip",
-    "@react-stately/tree",
-    "@react-types/dialog"
-  ]
+  "semanticCommits": "disabled"
 }
--- a/src/@types/global.d.ts
+++ b/src/@types/global.d.ts
@@ -15,6 +15,7 @@ limitations under the License.
 */

 import "matrix-js-sdk/src/@types/global";
+import { Controls } from "../controls";

 declare global {
  interface Document {
@@ -24,8 +25,7 @@ declare global {
  }

  interface Window {
-    // TODO: https://gitlab.matrix.org/matrix-org/olm/-/issues/10
-    OLM_OPTIONS: Record<string, string>;
+    controls: Controls;
  }

  interface HTMLElement {
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -22,7 +22,6 @@ import {
  useLocation,
 } from "react-router-dom";
 import * as Sentry from "@sentry/react";
-import { OverlayProvider } from "@react-aria/overlays";
 import { History } from "history";
 import { TooltipProvider } from "@vector-im/compound-web";

@@ -92,23 +91,21 @@ export const App: FC<AppProps> = ({ history }) => {
                <ClientProvider>
                  <MediaDevicesProvider>
                    <Sentry.ErrorBoundary fallback={errorPage}>
-                      <OverlayProvider>
-                        <DisconnectedBanner />
-                        <Switch>
-                          <SentryRoute exact path="/">
-                            <HomePage />
-                          </SentryRoute>
-                          <SentryRoute exact path="/login">
-                            <LoginPage />
-                          </SentryRoute>
-                          <SentryRoute exact path="/register">
-                            <RegisterPage />
-                          </SentryRoute>
-                          <SentryRoute path="*">
-                            <RoomPage />
-                          </SentryRoute>
-                        </Switch>
-                      </OverlayProvider>
+                      <DisconnectedBanner />
+                      <Switch>
+                        <SentryRoute exact path="/">
+                          <HomePage />
+                        </SentryRoute>
+                        <SentryRoute exact path="/login">
+                          <LoginPage />
+                        </SentryRoute>
+                        <SentryRoute exact path="/register">
+                          <RegisterPage />
+                        </SentryRoute>
+                        <SentryRoute path="*">
+                          <RoomPage />
+                        </SentryRoute>
+                      </Switch>
                    </Sentry.ErrorBoundary>
                  </MediaDevicesProvider>
                </ClientProvider>
--- a/src/Avatar.tsx
+++ b/src/Avatar.tsx
@@ -17,7 +17,7 @@ limitations under the License.
 import { useMemo, FC } from "react";
 import { Avatar as CompoundAvatar } from "@vector-im/compound-web";

-import { getAvatarUrl } from "./matrix-utils";
+import { getAvatarUrl } from "./utils/matrix";
 import { useClient } from "./ClientContext";

 export enum Size {
--- a/src/Banner.tsx
+++ b/src/Banner.tsx
@@ -1,27 +0,0 @@
-/*
-Copyright 2023 New Vector Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import { FC, ReactNode } from "react";
-
-import styles from "./Banner.module.css";
-
-interface Props {
-  children: ReactNode;
-}
-
-export const Banner: FC<Props> = ({ children }) => {
-  return <div className={styles.banner}>{children}</div>;
-};
--- a/src/ClientContext.tsx
+++ b/src/ClientContext.tsx
@@ -33,13 +33,10 @@ import {
 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 { ErrorView } from "./FullScreenView";
-import {
-  CryptoStoreIntegrityError,
-  fallbackICEServerAllowed,
-  initClient,
-} from "./matrix-utils";
+import { fallbackICEServerAllowed, initClient } from "./utils/matrix";
 import { widget } from "./widget";
 import {
  PosthogAnalytics,
@@ -380,22 +377,17 @@ async function loadClient(): Promise<InitResult | null> {
          passwordlessUser,
        };
      } catch (err) {
-        if (err instanceof CryptoStoreIntegrityError) {
+        if (err instanceof MatrixError && err.errcode === "M_UNKNOWN_TOKEN") {
          // We can't use this session anymore, so let's log it out
-          try {
-            const client = await initClient(initClientParams, false); // Don't need the crypto store just to log out)
-            await client.logout(true);
-          } catch (err) {
-            logger.warn(
-              "The previous session was lost, and we couldn't log it out, " +
-                err +
-                "either",
-            );
-          }
+          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;
      }
-      /* eslint-enable camelcase */
    } catch (err) {
      clearSession();
      throw err;
--- a/src/FullScreenView.tsx
+++ b/src/FullScreenView.tsx
@@ -20,9 +20,10 @@ import classNames from "classnames";
 import { Trans, useTranslation } from "react-i18next";
 import * as Sentry from "@sentry/react";
 import { logger } from "matrix-js-sdk/src/logger";
+import { Button } from "@vector-im/compound-web";

 import { Header, HeaderLogo, LeftNav, RightNav } from "./Header";
-import { LinkButton, Button } from "./button";
+import { LinkButton } from "./button";
 import styles from "./FullScreenView.module.css";
 import { TranslatedError } from "./TranslatedError";
 import { Config } from "./config/Config";
@@ -81,21 +82,11 @@ export const ErrorView: FC<ErrorViewProps> = ({ error }) => {
      <RageshakeButton description={`***Error View***: ${error.message}`} />
      {!confineToRoom &&
        (location.pathname === "/" ? (
-          <Button
-            size="lg"
-            variant="default"
-            className={styles.homeLink}
-            onPress={onReload}
-          >
+          <Button className={styles.homeLink} onClick={onReload}>
            {t("return_home_button")}
          </Button>
        ) : (
-          <LinkButton
-            size="lg"
-            variant="default"
-            className={styles.homeLink}
-            to="/"
-          >
+          <LinkButton className={styles.homeLink} to="/">
            {t("return_home_button")}
          </LinkButton>
        ))}
@@ -122,12 +113,7 @@ export const CrashView: FC = () => {
      )}

      <RageshakeButton description="***Soft Crash***" />
-      <Button
-        size="lg"
-        variant="default"
-        className={styles.wideButton}
-        onPress={onReload}
-      >
+      <Button className={styles.wideButton} onClick={onReload}>
        {t("return_home_button")}
      </Button>
    </FullScreenView>
--- a/src/Header.module.css
+++ b/src/Header.module.css
@@ -90,6 +90,7 @@ limitations under the License.
 .nameLine {
  grid-area: name;
  flex-grow: 1;
+  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--cpd-space-1x);
@@ -97,8 +98,6 @@ limitations under the License.

 .nameLine > h1 {
  margin: 0;
-  /* XXX I can't actually get this ellipsis overflow to trigger, because
-  constraint propagation in a nested flexbox layout is a massive pain */
  overflow: hidden;
  text-overflow: ellipsis;
 }
--- a/src/ListBox.module.css
+++ b/src/ListBox.module.css
@@ -1,49 +0,0 @@
-/*
-Copyright 2022 New Vector Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-.listBox {
-  margin: 0;
-  padding: 0;
-  max-height: 150px;
-  overflow-y: auto;
-  list-style: none;
-  background-color: transparent;
-  border: 1px solid var(--cpd-color-border-interactive-secondary);
-  background-color: var(--cpd-color-bg-canvas-default);
-  border-radius: 8px;
-}
-
-.option {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  background-color: transparent;
-  color: var(--cpd-color-text-primary);
-  padding: 8px 16px;
-  outline: none;
-  cursor: pointer;
-  font-size: var(--font-size-body);
-  min-height: 32px;
-}
-
-.option.focused {
-  background-color: rgba(111, 120, 130, 0.2);
-}
-
-.option.disabled {
-  color: var(--cpd-color-text-disabled);
-  background-color: var(--stopgap-bgColor3);
-}
--- a/src/ListBox.tsx
+++ b/src/ListBox.tsx
@@ -1,116 +0,0 @@
-/*
-Copyright 2022 New Vector Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import {
-  MutableRefObject,
-  PointerEvent,
-  ReactNode,
-  useCallback,
-  useRef,
-} from "react";
-import { useListBox, useOption, AriaListBoxOptions } from "@react-aria/listbox";
-import { ListState } from "@react-stately/list";
-import { Node } from "@react-types/shared";
-import classNames from "classnames";
-
-import styles from "./ListBox.module.css";
-
-interface ListBoxProps<T> extends AriaListBoxOptions<T> {
-  optionClassName: string;
-  state: ListState<T>;
-  className?: string;
-  listBoxRef?: MutableRefObject<HTMLUListElement>;
-}
-
-export function ListBox<T>({
-  state,
-  optionClassName,
-  className,
-  listBoxRef,
-  ...rest
-}: ListBoxProps<T>): ReactNode {
-  const ref = useRef<HTMLUListElement>(null);
-
-  const listRef = listBoxRef ?? ref;
-
-  const { listBoxProps } = useListBox(rest, state, listRef);
-
-  return (
-    <ul
-      {...listBoxProps}
-      ref={listRef}
-      className={classNames(styles.listBox, className)}
-    >
-      {[...state.collection].map((item) => (
-        <Option
-          key={item.key}
-          item={item}
-          state={state}
-          className={optionClassName}
-        />
-      ))}
-    </ul>
-  );
-}
-
-interface OptionProps<T> {
-  className: string;
-  state: ListState<T>;
-  item: Node<T>;
-}
-
-function Option<T>({ item, state, className }: OptionProps<T>): ReactNode {
-  const ref = useRef(null);
-  const { optionProps, isSelected, isFocused, isDisabled } = useOption(
-    { key: item.key },
-    state,
-    ref,
-  );
-
-  // Hack: remove the onPointerUp event handler and re-wire it to
-  // onClick. Chrome Android triggers a click event after the onpointerup
-  // event which leaks through to elements underneath the z-indexed select
-  // popover. preventDefault / stopPropagation don't have any effect, even
-  // adding just a dummy onClick handler still doesn't work, but it's fine
-  // if we handle just onClick.
-  // https://github.com/vector-im/element-call/issues/762
-  const origPointerUp = optionProps.onPointerUp;
-  delete optionProps.onPointerUp;
-  optionProps.onClick = useCallback(
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    (e) => {
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      origPointerUp(e as unknown as PointerEvent<HTMLElement>);
-    },
-    [origPointerUp],
-  );
-
-  return (
-    <li
-      {...optionProps}
-      ref={ref}
-      className={classNames(styles.option, className, {
-        [styles.selected]: isSelected,
-        [styles.focused]: isFocused,
-        [styles.disables]: isDisabled,
-      })}
-    >
-      {item.rendered}
-    </li>
-  );
-}
--- a/src/Menu.module.css
+++ b/src/Menu.module.css
@@ -1,73 +0,0 @@
-/*
-Copyright 2022 New Vector Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-.menu {
-  width: 100%;
-  padding: 0;
-  margin: 0;
-  list-style: none;
-}
-
-.menuItem {
-  cursor: pointer;
-  height: 48px;
-  display: flex;
-  align-items: center;
-  padding: 0 12px;
-  color: var(--cpd-color-text-primary);
-  font-size: var(--font-size-body);
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-}
-
-.menuItem > * {
-  margin: 0 10px 0 0;
-}
-
-.menuItem > :last-child {
-  margin-right: 0;
-}
-
-.menuItem.focused,
-.menuItem:hover {
-  background-color: var(--cpd-color-bg-action-secondary-hovered);
-}
-
-.menuItem:active {
-  background-color: var(--cpd-color-bg-action-secondary-pressed);
-}
-
-.menuItem.focused:first-child,
-.menuItem:hover:first-child {
-  border-top-left-radius: 8px;
-  border-top-right-radius: 8px;
-}
-
-.menuItem.focused:last-child,
-.menuItem:hover:last-child {
-  border-bottom-left-radius: 8px;
-  border-bottom-right-radius: 8px;
-}
-
-.checkIcon {
-  position: absolute;
-  right: 16px;
-}
-
-.checkIcon * {
-  stroke: var(--cpd-color-text-primary);
-}
--- a/src/Menu.tsx
+++ b/src/Menu.tsx
@@ -1,102 +0,0 @@
-/*
-Copyright 2022 New Vector Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import { Key, ReactNode, useRef, useState } from "react";
-import { AriaMenuOptions, useMenu, useMenuItem } from "@react-aria/menu";
-import { TreeState, useTreeState } from "@react-stately/tree";
-import { mergeProps } from "@react-aria/utils";
-import { useFocus } from "@react-aria/interactions";
-import classNames from "classnames";
-import { Node } from "@react-types/shared";
-
-import styles from "./Menu.module.css";
-
-interface MenuProps<T> extends AriaMenuOptions<T> {
-  className?: string;
-  onClose: () => void;
-  onAction: (value: Key) => void;
-  label?: string;
-}
-
-export function Menu<T extends object>({
-  className,
-  onAction,
-  onClose,
-  label,
-  ...rest
-}: MenuProps<T>): ReactNode {
-  const state = useTreeState<T>({ ...rest, selectionMode: "none" });
-  const menuRef = useRef(null);
-  const { menuProps } = useMenu<T>(rest, state, menuRef);
-
-  return (
-    <ul
-      {...mergeProps(menuProps, rest)}
-      ref={menuRef}
-      className={classNames(styles.menu, className)}
-    >
-      {[...state.collection].map((item) => (
-        <MenuItem
-          key={item.key}
-          item={item}
-          state={state}
-          onAction={onAction}
-          onClose={onClose}
-        />
-      ))}
-    </ul>
-  );
-}
-
-interface MenuItemProps<T> {
-  item: Node<T>;
-  state: TreeState<T>;
-  onAction: (value: Key) => void;
-  onClose: () => void;
-}
-
-function MenuItem<T>({
-  item,
-  state,
-  onAction,
-  onClose,
-}: MenuItemProps<T>): ReactNode {
-  const ref = useRef(null);
-  const { menuItemProps } = useMenuItem(
-    {
-      key: item.key,
-      onAction,
-      onClose,
-    },
-    state,
-    ref,
-  );
-
-  const [isFocused, setFocused] = useState(false);
-  const { focusProps } = useFocus({ onFocusChange: setFocused });
-
-  return (
-    <li
-      {...mergeProps(menuItemProps, focusProps)}
-      ref={ref}
-      className={classNames(styles.menuItem, {
-        [styles.focused]: isFocused,
-      })}
-    >
-      {item.rendered}
-    </li>
-  );
-}
--- a/src/Modal.module.css
+++ b/src/Modal.module.css
@@ -134,6 +134,10 @@ body[data-platform="ios"] .drawer {
  padding-block: var(--cpd-space-9x) var(--cpd-space-10x);
 }

+.modal.tabbed .body {
+  padding-block-start: 0;
+}
+
 .handle {
  content: "";
  position: absolute;
--- a/src/Modal.tsx
+++ b/src/Modal.tsx
@@ -15,7 +15,6 @@ limitations under the License.
 */

 import { FC, ReactNode, useCallback } from "react";
-import { AriaDialogProps } from "@react-types/dialog";
 import { useTranslation } from "react-i18next";
 import {
  Root as DialogRoot,
@@ -35,8 +34,7 @@ import styles from "./Modal.module.css";
 import overlayStyles from "./Overlay.module.css";
 import { useMediaQuery } from "./useMediaQuery";

-// TODO: Support tabs
-export interface Props extends AriaDialogProps {
+export interface Props {
  title: string;
  children: ReactNode;
  className?: string;
@@ -52,6 +50,11 @@ export interface Props extends AriaDialogProps {
   * will be non-dismissable.
   */
  onDismiss?: () => void;
+  /**
+   * Whether the modal content has tabs.
+   */
+  // TODO: Better tabs support
+  tabbed?: boolean;
 }

 /**
@@ -64,6 +67,7 @@ export const Modal: FC<Props> = ({
  className,
  open,
  onDismiss,
+  tabbed,
  ...rest
 }) => {
  const { t } = useTranslation();
@@ -92,6 +96,7 @@ export const Modal: FC<Props> = ({
              overlayStyles.overlay,
              styles.modal,
              styles.drawer,
+              { [styles.tabbed]: tabbed },
            )}
            {...rest}
          >
@@ -123,6 +128,7 @@ export const Modal: FC<Props> = ({
                overlayStyles.animate,
                styles.modal,
                styles.dialog,
+                { [styles.tabbed]: tabbed },
              )}
            >
              <div className={styles.content}>
--- a/src/QrCode.module.css
+++ b/src/QrCode.module.css
@@ -1,5 +1,5 @@
 /*
-Copyright 2023 New Vector Ltd
+Copyright 2024 New Vector Ltd

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,9 +14,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-.banner {
-  flex: 1;
-  border-radius: 8px;
-  padding: 16px;
-  background-color: var(--cpd-color-bg-subtle-primary);
+.qrCode img {
+  max-width: 100%;
+  image-rendering: pixelated;
+  border-radius: var(--cpd-space-4x);
 }
--- a/src/QrCode.test.tsx
+++ b/src/QrCode.test.tsx
@@ -1,5 +1,5 @@
 /*
-Copyright 2022 New Vector Ltd
+Copyright 2024 New Vector Ltd

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,16 +14,21 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import Olm from "@matrix-org/olm";
-import olmWasmPath from "@matrix-org/olm/olm.wasm?url";
+import { describe, expect, test } from "vitest";
+import { render, configure } from "@testing-library/react";

-// https://gitlab.matrix.org/matrix-org/olm/-/issues/10
-window.OLM_OPTIONS = {};
+import { QrCode } from "./QrCode";

-let olmLoaded: Promise<void> | null = null;
+configure({
+  defaultHidden: true,
+});

-/**
- * Loads Olm, if not already loaded.
- */
-export const loadOlm = (): Promise<void> =>
-  (olmLoaded ??= Olm.init({ locateFile: () => olmWasmPath }));
+describe("QrCode", () => {
+  test("renders", async () => {
+    const { container, findByRole } = render(
+      <QrCode data="foo" className="bar" />,
+    );
+    (await findByRole("img")) as HTMLImageElement;
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});
--- a/src/QrCode.tsx
+++ b/src/QrCode.tsx
@@ -0,0 +1,57 @@
+/*
+Copyright 2024 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { FC, useEffect, useState } from "react";
+import { toDataURL } from "qrcode";
+import classNames from "classnames";
+import { t } from "i18next";
+
+import styles from "./QrCode.module.css";
+
+interface Props {
+  data: string;
+  className?: string;
+}
+
+export const QrCode: FC<Props> = ({ data, className }) => {
+  const [url, setUrl] = useState<string | null>(null);
+
+  useEffect(() => {
+    let isCancelled = false;
+
+    toDataURL(data, { errorCorrectionLevel: "L" })
+      .then((url) => {
+        if (!isCancelled) {
+          setUrl(url);
+        }
+      })
+      .catch((reason) => {
+        if (!isCancelled) {
+          setUrl(null);
+        }
+      });
+
+    return (): void => {
+      isCancelled = true;
+    };
+  }, [data]);
+
+  return (
+    <div className={classNames(styles.qrCode, className)}>
+      {url && <img src={url} alt={t("qr_code")} />}
+    </div>
+  );
+};
--- a/src/Toast.test.tsx
+++ b/src/Toast.test.tsx
@@ -0,0 +1,86 @@
+/*
+Copyright 2023 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { describe, expect, test, vi } from "vitest";
+import { render, configure } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { Toast } from "../src/Toast";
+import { withFakeTimers } from "./utils/test";
+
+configure({
+  defaultHidden: true,
+});
+
+// Test Explanation:
+// This test the toast. We need to use { document: window.document } because the toast listens
+// for user input on `window`.
+describe("Toast", () => {
+  test("renders", () => {
+    const { queryByRole } = render(
+      <Toast open={false} onDismiss={() => {}}>
+        Hello world!
+      </Toast>,
+    );
+    expect(queryByRole("dialog")).toBe(null);
+    const { getByRole } = render(
+      <Toast open={true} onDismiss={() => {}}>
+        Hello world!
+      </Toast>,
+    );
+    expect(getByRole("dialog")).toMatchSnapshot();
+  });
+
+  test("dismisses when Esc is pressed", async () => {
+    const user = userEvent.setup({ document: window.document });
+    const onDismiss = vi.fn();
+    const { debug } = render(
+      <Toast open={true} onDismiss={onDismiss}>
+        Hello world!
+      </Toast>,
+    );
+    debug();
+    await user.keyboard("[Escape]");
+    expect(onDismiss).toHaveBeenCalled();
+  });
+
+  test("dismisses when background is clicked", async () => {
+    const user = userEvent.setup();
+    const onDismiss = vi.fn();
+    const { getByRole, unmount } = render(
+      <Toast open={true} onDismiss={onDismiss}>
+        Hello world!
+      </Toast>,
+    );
+    const background = getByRole("dialog").previousSibling! as Element;
+    await user.click(background);
+    expect(onDismiss).toHaveBeenCalled();
+    unmount();
+  });
+
+  test("dismisses itself after the specified timeout", () => {
+    withFakeTimers(() => {
+      const onDismiss = vi.fn();
+      render(
+        <Toast open={true} onDismiss={onDismiss} autoDismiss={2000}>
+          Hello world!
+        </Toast>,
+      );
+      vi.advanceTimersByTime(2000);
+      expect(onDismiss).toHaveBeenCalled();
+    });
+  });
+});
--- a/src/Toast.tsx
+++ b/src/Toast.tsx
@@ -86,7 +86,7 @@ export const Toast: FC<Props> = ({
        <DialogOverlay
          className={classNames(overlayStyles.bg, overlayStyles.animate)}
        />
-        <DialogContent asChild>
+        <DialogContent aria-describedby={undefined} asChild>
          <DialogClose
            className={classNames(
              overlayStyles.overlay,
--- a/src/Tooltip.module.css
+++ b/src/Tooltip.module.css
@@ -1,30 +0,0 @@
-/*
-Copyright 2022 New Vector Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-.tooltip {
-  background-color: var(--cpd-color-bg-subtle-secondary);
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  padding: 10px;
-  color: var(--cpd-color-text-primary);
-  border-radius: 8px;
-  max-width: 135px;
-  width: max-content;
-  font-size: var(--font-size-caption);
-  font-weight: 500;
-  text-align: center;
-}
--- a/src/Tooltip.tsx
+++ b/src/Tooltip.tsx
@@ -1,118 +0,0 @@
-/*
-Copyright 2022 New Vector Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import {
-  ForwardedRef,
-  forwardRef,
-  ReactElement,
-  ReactNode,
-  useRef,
-} from "react";
-import {
-  TooltipTriggerState,
-  useTooltipTriggerState,
-} from "@react-stately/tooltip";
-import { FocusableProvider } from "@react-aria/focus";
-import { useTooltipTrigger, useTooltip } from "@react-aria/tooltip";
-import { mergeProps, useObjectRef } from "@react-aria/utils";
-import classNames from "classnames";
-import { OverlayContainer, useOverlayPosition } from "@react-aria/overlays";
-import { Placement } from "@react-types/overlays";
-
-import styles from "./Tooltip.module.css";
-
-interface TooltipProps {
-  className?: string;
-  state: TooltipTriggerState;
-  children: ReactNode;
-}
-
-const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
-  (
-    { state, className, children, ...rest }: TooltipProps,
-    ref: ForwardedRef<HTMLDivElement>,
-  ) => {
-    const { tooltipProps } = useTooltip(rest, state);
-
-    return (
-      <div
-        className={classNames(styles.tooltip, className)}
-        {...mergeProps(rest, tooltipProps)}
-        ref={ref}
-      >
-        {children}
-      </div>
-    );
-  },
-);
-
-Tooltip.displayName = "Tooltip";
-
-interface TooltipTriggerProps {
-  children: ReactElement;
-  placement?: Placement;
-  delay?: number;
-  tooltip: () => string;
-}
-
-export const TooltipTrigger = forwardRef<HTMLElement, TooltipTriggerProps>(
-  (
-    { children, placement, tooltip, ...rest }: TooltipTriggerProps,
-    ref: ForwardedRef<HTMLElement>,
-  ) => {
-    const tooltipTriggerProps = { delay: 250, ...rest };
-    const tooltipState = useTooltipTriggerState(tooltipTriggerProps);
-    const triggerRef = useObjectRef<HTMLElement>(ref);
-    const overlayRef = useRef<HTMLDivElement>(null);
-    const { triggerProps, tooltipProps } = useTooltipTrigger(
-      tooltipTriggerProps,
-      tooltipState,
-      triggerRef,
-    );
-
-    const { overlayProps } = useOverlayPosition({
-      placement: placement || "top",
-      targetRef: triggerRef,
-      overlayRef,
-      isOpen: tooltipState.isOpen,
-      offset: 12,
-    });
-
-    return (
-      <FocusableProvider ref={triggerRef} {...triggerProps}>
-        <children.type
-          {...mergeProps<typeof children.props | typeof rest>(
-            children.props,
-            rest,
-          )}
-        />
-        {tooltipState.isOpen && (
-          <OverlayContainer>
-            <Tooltip
-              state={tooltipState}
-              ref={overlayRef}
-              {...mergeProps(tooltipProps, overlayProps)}
-            >
-              {tooltip()}
-            </Tooltip>
-          </OverlayContainer>
-        )}
-      </FocusableProvider>
-    );
-  },
-);
-
-TooltipTrigger.displayName = "TooltipTrigger";
--- a/test/UrlParams-test.ts
+++ b/test/UrlParams-test.ts
@@ -14,23 +14,16 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import { vi } from "vitest";
+import { describe, expect, it } from "vitest";

 import { getRoomIdentifierFromUrl } from "../src/UrlParams";
-import { Config } from "../src/config/Config";

 const ROOM_NAME = "roomNameHere";
 const ROOM_ID = "!d45f138fsd";
 const ORIGIN = "https://call.element.io";
-const HOMESERVER = "call.ems.host";
-
-vi.mock("../src/config/Config");
+const HOMESERVER = "localhost";

 describe("UrlParams", () => {
-  beforeAll(() => {
-    vi.mocked(Config.defaultServerName).mockReturnValue("call.ems.host");
-  });
-
  describe("handles URL with /room/", () => {
    it("and nothing else", () => {
      expect(
--- a/src/UserMenu.module.css
+++ b/src/UserMenu.module.css
@@ -21,6 +21,14 @@ limitations under the License.
  flex-shrink: 0;
 }

+.userButton {
+  appearance: none;
+  background: none;
+  border: none;
+  margin: 0;
+  cursor: pointer;
+}
+
 .userButton svg * {
  fill: var(--cpd-color-icon-primary);
 }
--- a/src/UserMenu.tsx
+++ b/src/UserMenu.tsx
@@ -14,21 +14,17 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import { FC, ReactNode, useCallback, useMemo } from "react";
-import { Item } from "@react-stately/collections";
+import { FC, useMemo, useState } from "react";
 import { useLocation } from "react-router-dom";
 import { useTranslation } from "react-i18next";
+import { Menu, MenuItem } from "@vector-im/compound-web";

-import { Button, LinkButton } from "./button";
-import { PopoverMenuTrigger } from "./popover/PopoverMenu";
-import { Menu } from "./Menu";
-import { TooltipTrigger } from "./Tooltip";
+import { LinkButton } from "./button";
 import { Avatar, Size } from "./Avatar";
 import UserIcon from "./icons/User.svg?react";
 import SettingsIcon from "./icons/Settings.svg?react";
 import LoginIcon from "./icons/Login.svg?react";
 import LogoutIcon from "./icons/Logout.svg?react";
-import { Body } from "./typography/Typography";
 import styles from "./UserMenu.module.css";

 interface Props {
@@ -91,7 +87,7 @@ export const UserMenu: FC<Props> = ({
    return arr;
  }, [isAuthenticated, isPasswordlessUser, displayName, preventNavigation, t]);

-  const tooltip = useCallback(() => t("common.profile"), [t]);
+  const [open, setOpen] = useState(false);

  if (!isAuthenticated) {
    return (
@@ -102,10 +98,15 @@ export const UserMenu: FC<Props> = ({
  }

  return (
-    <PopoverMenuTrigger placement="bottom right">
-      <TooltipTrigger tooltip={tooltip} placement="bottom left">
-        <Button
-          variant="icon"
+    <Menu
+      title={t("a11y.user_menu")}
+      showTitle={false}
+      align="end"
+      open={open}
+      onOpenChange={setOpen}
+      trigger={
+        <button
+          aria-label={t("common.profile")}
          className={styles.userButton}
          data-testid="usermenu_open"
        >
@@ -119,26 +120,18 @@ export const UserMenu: FC<Props> = ({
          ) : (
            <UserIcon />
          )}
-        </Button>
-      </TooltipTrigger>
-      {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        (props: any): ReactNode => (
-          <Menu {...props} label={t("a11y.user_menu")} onAction={onAction}>
-            {items.map(({ key, icon: Icon, label, dataTestid }) => (
-              <Item key={key} textValue={label}>
-                <Icon
-                  width={24}
-                  height={24}
-                  className={styles.menuIcon}
-                  data-testid={dataTestid}
-                />
-                <Body overflowEllipsis>{label}</Body>
-              </Item>
-            ))}
-          </Menu>
-        )
+        </button>
      }
-    </PopoverMenuTrigger>
+    >
+      {items.map(({ key, icon: Icon, label, dataTestid }) => (
+        <MenuItem
+          key={key}
+          Icon={Icon}
+          label={label}
+          data-test-id={dataTestid}
+          onSelect={() => onAction(key)}
+        />
+      ))}
+    </Menu>
  );
 };
--- a/src/snapshots/QrCode.test.tsx.snap
+++ b/src/snapshots/QrCode.test.tsx.snap
@@ -0,0 +1,12 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`QrCode > renders 1`] = `
+<div
+  class="qrCode bar"
+>
+  <img
+    alt="qr_code"
+    src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHQAAAB0CAYAAABUmhYnAAAAAklEQVR4AewaftIAAALBSURBVO3BQW7kQAwEwSxC//9yro88NSBI4/UQjIg/WGMUa5RijVKsUYo1SrFGKdYoxRqlWKMUa5RijVKsUYo1SrFGKdYoxRrl4qEk/CaVkyR0Kl0STlS6JPwmlSeKNUqxRinWKBcvU3lTEk6S8ITKHSpvSsKbijVKsUYp1igXH5aEO1Q+SaVLQqdyRxLuUPmkYo1SrFGKNcrFl1PpknCShE5lkmKNUqxRijXKxZdLQqdyotIloVP5ZsUapVijFGuUiw9T+UuS8CaVv6RYoxRrlGKNcvGyJPwlSehUuiTckYS/rFijFGuUYo0Sf/DFkvAmlW9WrFGKNUqxRrl4KAknKl0SOpWTJJyodEk4UbkjCXeodEk4UXlTsUYp1ijFGuXiIZUuCXck4USlS0KXhE7lk1TelIRO5YlijVKsUYo1ysXLVLok3KHSJaFT6ZLQJaFTOUnCicodSehUTpLwpmKNUqxRijXKxUNJ6FSeSEKn0iXhROUkCZ3Kb0pCp/KmYo1SrFGKNcrFh6mcJKFT6ZJwotIloVPpVLokdCpdEjqVLgmdyh1J6FSeKNYoxRqlWKPEH3yxJHQqJ0noVO5IwolKl4ROpUtCp/JEsUYp1ijFGuXioST8JpU7ktCpnCShUzlROVHpktCpvKlYoxRrlGKNcvEylTcl4USlS8JJEt6UhBOVTqVLQqfyRLFGKdYoxRrl4sOScIfKEyonSehUTpJwh0qXhN9UrFGKNUqxRrn4ckn4JJU7kvA/FWuUYo1SrFEuvpxKl4QTlS4JncodSehU7kjCm4o1SrFGKdYoFx+m8klJOFE5UemScKJyRxI6lU7lTcUapVijFGuUi5cl4X9SOUnCicoTSThJQqfypmKNUqxRijVK/MEao1ijFGuUYo1SrFGKNUqxRinWKMUapVijFGuUYo1SrFGKNUqxRinWKP8AKoQP/lIBoMIAAAAASUVORK5CYII="
+  />
+</div>
+`;
--- a/test/snapshots/Toast-test.tsx.snap
+++ b/test/snapshots/Toast-test.tsx.snap
@@ -2,7 +2,6 @@

 exports[`Toast renders 1`] = `
 <button
-  aria-describedby="radix-:r5:"
  aria-labelledby="radix-:r4:"
  class="overlay animate toast"
  data-state="open"
--- a/src/snapshots/Toast.test.tsx.snap
+++ b/src/snapshots/Toast.test.tsx.snap
@@ -0,0 +1,21 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Toast > renders 1`] = `
+<button
+  aria-labelledby="radix-:r4:"
+  class="overlay animate toast"
+  data-state="open"
+  id="radix-:r3:"
+  role="dialog"
+  style="pointer-events: auto;"
+  tabindex="-1"
+  type="button"
+>
+  <h3
+    class="_typography_yh5dq_162 _font-body-sm-semibold_yh5dq_45"
+    id="radix-:r4:"
+  >
+    Hello world!
+  </h3>
+</button>
+`;
--- a/src/analytics/PosthogAnalytics.ts
+++ b/src/analytics/PosthogAnalytics.ts
@@ -16,7 +16,7 @@ limitations under the License.

 import posthog, { CaptureOptions, PostHog, Properties } from "posthog-js";
 import { logger } from "matrix-js-sdk/src/logger";
-import { MatrixClient } from "matrix-js-sdk";
+import { MatrixClient } from "matrix-js-sdk/src/matrix";
 import { Buffer } from "buffer";

 import { widget } from "../widget";
@@ -144,7 +144,7 @@ export class PosthogAnalytics {
        advanced_disable_decide: true,
      });
      this.enabled = true;
-    } else {
+    } else if (import.meta.env.MODE !== "test") {
      logger.info(
        "Posthog is not enabled because there is no api key or no host given in the config",
      );
--- a/src/array-utils.ts
+++ b/src/array-utils.ts
@@ -1,44 +0,0 @@
-/*
-Copyright 2023 New Vector Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-/**
- * Gets the index of the last element in the array to satsify the given
- * predicate.
- */
-// TODO: remove this once TypeScript recognizes the existence of
-// Array.prototype.findLastIndex
-export function findLastIndex<T>(
-  array: T[],
-  predicate: (item: T, index: number) => boolean,
-): number | null {
-  for (let i = array.length - 1; i >= 0; i--) {
-    if (predicate(array[i], i)) return i;
-  }
-
-  return null;
-}
-
-/**
- * Counts the number of elements in an array that satsify the given predicate.
- */
-export const count = <T>(
-  array: T[],
-  predicate: (item: T, index: number) => boolean,
-): number =>
-  array.reduce(
-    (acc, item, index) => (predicate(item, index) ? acc + 1 : acc),
-    0,
-  );
--- a/src/auth/LoginPage.tsx
+++ b/src/auth/LoginPage.tsx
@@ -17,11 +17,11 @@ limitations under the License.
 import { FC, FormEvent, useCallback, useRef, useState } from "react";
 import { useHistory, useLocation, Link } from "react-router-dom";
 import { Trans, useTranslation } from "react-i18next";
+import { Button } from "@vector-im/compound-web";

 import Logo from "../icons/LogoLarge.svg?react";
 import { useClient } from "../ClientContext";
 import { FieldRow, InputField, ErrorMessage } from "../input/Input";
-import { Button } from "../button";
 import styles from "./LoginPage.module.css";
 import { useInteractiveLogin } from "./useInteractiveLogin";
 import { usePageTitle } from "../usePageTitle";
@@ -32,8 +32,8 @@ export const LoginPage: FC = () => {
  const { t } = useTranslation();
  usePageTitle(t("login_title"));

-  const { setClient } = useClient();
-  const login = useInteractiveLogin();
+  const { client, setClient } = useClient();
+  const login = useInteractiveLogin(client);
  const homeserver = Config.defaultHomeserverUrl(); // TODO: Make this configurable
  const usernameRef = useRef<HTMLInputElement>(null);
  const passwordRef = useRef<HTMLInputElement>(null);
--- a/src/auth/RegisterPage.tsx
+++ b/src/auth/RegisterPage.tsx
@@ -28,9 +28,9 @@ import { captureException } from "@sentry/react";
 import { sleep } from "matrix-js-sdk/src/utils";
 import { Trans, useTranslation } from "react-i18next";
 import { logger } from "matrix-js-sdk/src/logger";
+import { Button } from "@vector-im/compound-web";

 import { FieldRow, InputField, ErrorMessage } from "../input/Input";
-import { Button } from "../button";
 import { useClientLegacy } from "../ClientContext";
 import { useInteractiveRegistration } from "./useInteractiveRegistration";
 import styles from "./LoginPage.module.css";
--- a/src/auth/useInteractiveLogin.ts
+++ b/src/auth/useInteractiveLogin.ts
@@ -22,10 +22,17 @@ import {
  MatrixClient,
 } from "matrix-js-sdk/src/matrix";

-import { initClient } from "../matrix-utils";
+import { initClient } from "../utils/matrix";
 import { Session } from "../ClientContext";
-
-export function useInteractiveLogin(): (
+/**
+ * This provides the login method to login using user credentials.
+ * @param oldClient If there is an already authenticated client it should be passed to this hook
+ * this allows the interactive login to sign out the client before logging in.
+ * @returns A async method that can be called/awaited to log in with the provided credentials.
+ */
+export function useInteractiveLogin(
+  oldClient?: MatrixClient,
+): (
  homeserver: string,
  username: string,
  password: string,
@@ -36,47 +43,52 @@ export function useInteractiveLogin(): (
      username: string,
      password: string,
    ) => Promise<[MatrixClient, Session]>
-  >(async (homeserver: string, username: string, password: string) => {
-    const authClient = createClient({ baseUrl: homeserver });
+  >(
+    async (homeserver: string, username: string, password: string) => {
+      const authClient = createClient({ baseUrl: homeserver });

-    const interactiveAuth = new InteractiveAuth({
-      matrixClient: authClient,
-      doRequest: (): Promise<LoginResponse> =>
-        authClient.login("m.login.password", {
-          identifier: {
-            type: "m.id.user",
-            user: username,
-          },
-          password,
-        }),
-      stateUpdated: (): void => {},
-      requestEmailToken: (): Promise<{ sid: string }> => {
-        return Promise.resolve({ sid: "" });
-      },
-    });
+      const interactiveAuth = new InteractiveAuth({
+        matrixClient: authClient,
+        doRequest: (): Promise<LoginResponse> =>
+          authClient.login("m.login.password", {
+            identifier: {
+              type: "m.id.user",
+              user: username,
+            },
+            password,
+          }),
+        stateUpdated: (): void => {},
+        requestEmailToken: (): Promise<{ sid: string }> => {
+          return Promise.resolve({ sid: "" });
+        },
+      });

-    // XXX: This claims to return an IAuthData which contains none of these
-    // things - the js-sdk types may be wrong?
-    /* eslint-disable camelcase,@typescript-eslint/no-explicit-any */
-    const { user_id, access_token, device_id } =
-      (await interactiveAuth.attemptAuth()) as any;
-    const session = {
-      user_id,
-      access_token,
-      device_id,
-      passwordlessUser: false,
-    };
+      // XXX: This claims to return an IAuthData which contains none of these
+      // things - the js-sdk types may be wrong?
+      /* eslint-disable camelcase,@typescript-eslint/no-explicit-any */
+      const { user_id, access_token, device_id } =
+        (await interactiveAuth.attemptAuth()) as any;
+      const session = {
+        user_id,
+        access_token,
+        device_id,
+        passwordlessUser: false,
+      };

-    const client = await initClient(
-      {
-        baseUrl: homeserver,
-        accessToken: access_token,
-        userId: user_id,
-        deviceId: device_id,
-      },
-      false,
-    );
-    /* eslint-enable camelcase */
-    return [client, session];
-  }, []);
+      // To not confuse the rust crypto sessions we need to logout the old client before initializing the new one.
+      await oldClient?.logout(true);
+      const client = await initClient(
+        {
+          baseUrl: homeserver,
+          accessToken: access_token,
+          userId: user_id,
+          deviceId: device_id,
+        },
+        false,
+      );
+      /* eslint-enable camelcase */
+      return [client, session];
+    },
+    [oldClient],
+  );
 }
--- a/src/auth/useInteractiveRegistration.ts
+++ b/src/auth/useInteractiveRegistration.ts
@@ -22,7 +22,7 @@ import {
  RegisterResponse,
 } from "matrix-js-sdk/src/matrix";

-import { initClient } from "../matrix-utils";
+import { initClient } from "../utils/matrix";
 import { Session } from "../ClientContext";
 import { Config } from "../config/Config";
 import { widget } from "../widget";
--- a/src/auth/useRecaptcha.ts
+++ b/src/auth/useRecaptcha.ts
@@ -20,7 +20,6 @@ import { useTranslation } from "react-i18next";
 import { logger } from "matrix-js-sdk/src/logger";

 import { translatedError } from "../TranslatedError";
-
 declare global {
  interface Window {
    mxOnRecaptchaLoaded: () => void;
--- a/src/button/Button.module.css
+++ b/src/button/Button.module.css
@@ -1,5 +1,5 @@
 /*
-Copyright 2021 New Vector Ltd
+Copyright 2024 New Vector Ltd

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,240 +14,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-.button,
-.toolbarButton,
-.toolbarButtonSecondary,
-.iconButton,
-.iconCopyButton,
-.secondary,
-.secondaryHangup,
-.copyButton,
-.dropdownButton {
-  position: relative;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background-color: transparent;
-  padding: 0;
-  border: none;
-  cursor: pointer;
-  text-decoration: none;
-  box-sizing: border-box;
-}
-
-.secondary,
-.secondaryHangup,
-.button,
-.copyButton {
-  padding: 8px 20px;
-  border-radius: 8px;
-  font-size: var(--font-size-body);
-  font-weight: 600;
-}
-
-.button {
-  color: var(--stopgap-color-on-solid-accent);
-  background-color: var(--cpd-color-text-action-accent);
-}
-
-.button:focus-visible,
-.toolbarButton:focus-visible,
-.toolbarButtonSecondary:focus-visible,
-.iconButton:focus-visible,
-.iconCopyButton:focus-visible,
-.secondary:focus-visible,
-.secondaryHangup:focus-visible,
-.copyButton:focus-visible {
-  outline: auto;
-}
-
-.toolbarButton:disabled {
-  background-color: var(--cpd-color-bg-action-primary-disabled);
-  box-shadow: none;
-}
-
-.toolbarButton,
-.toolbarButtonSecondary {
-  width: 50px;
-  height: 50px;
-  border-radius: 50px;
-  background-color: var(--cpd-color-bg-canvas-default);
-  color: var(--cpd-color-icon-primary);
-  border: 1px solid var(--cpd-color-gray-400);
-  box-shadow: var(--subtle-drop-shadow);
-}
-
-.toolbarButton.on,
-.toolbarButton.off {
-  background-color: var(--cpd-color-bg-action-primary-rest);
-  color: var(--cpd-color-icon-on-solid-primary);
-}
-
-.toolbarButtonSecondary.on {
-  background-color: var(--cpd-color-text-success-primary);
-}
-
-.toolbarButton:active,
-.toolbarButtonSecondary:active {
-  background-color: var(--cpd-color-bg-subtle-primary);
-  border: none;
-  box-shadow: none;
-}
-
-.toolbarButton.on:active,
-.toolbarButton.off:active {
-  background-color: var(--cpd-color-bg-action-primary-pressed);
-}
-
-.iconButton:not(.stroke) svg * {
-  fill: var(--cpd-color-bg-action-primary-rest);
-}
-
-.iconButton:not(.stroke):tertiary svg * {
-  fill: var(--cpd-color-icon-accent-tertiary);
-}
-
-.iconButton.on:not(.stroke) svg * {
-  fill: var(--cpd-color-icon-accent-tertiary);
-}
-
-.iconButton.on.stroke svg * {
-  stroke: var(--cpd-color-icon-accent-tertiary);
-}
-
-.hangupButton {
-  background-color: var(--cpd-color-bg-critical-primary);
-  border-color: var(--cpd-color-border-critical-subtle);
+.endCall > svg {
  color: var(--stopgap-color-on-solid-accent);
 }
-
-.hangupButton:active {
-  background-color: var(--cpd-color-bg-critical-pressed);
-}
-
-.secondary,
-.copyButton {
-  color: var(--cpd-color-text-action-accent);
-  border: 2px solid var(--cpd-color-text-action-accent);
-  background-color: transparent;
-}
-
-.secondaryHangup {
-  color: var(--cpd-color-text-critical-primary);
-  border: 2px solid var(--cpd-color-border-critical-primary);
-  background-color: transparent;
-}
-
-.copyButton.secondaryCopy {
-  color: var(--cpd-color-text-primary);
-  border-color: var(--cpd-color-border-interactive-primary);
-}
-
-.copyButton {
-  width: 100%;
-  height: 40px;
-  transition:
-    border-color 250ms,
-    background-color 250ms;
-}
-
-.copyButton span {
-  font-weight: 600;
-  font-size: var(--font-size-body);
-  margin-right: 10px;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
-.copyButton svg {
-  flex-shrink: 0;
-}
-
-.copyButton:not(.on) svg * {
-  fill: var(--cpd-color-icon-accent-tertiary);
-}
-
-.copyButton.on {
-  border-color: transparent;
-  background-color: var(--cpd-color-text-action-accent);
-  color: white;
-}
-
-.copyButton.on svg * {
-  stroke: white;
-}
-
-.copyButton.secondaryCopy:not(.on) svg * {
-  fill: var(--cpd-color-bg-action-primary-rest);
-}
-
-.iconCopyButton svg * {
-  fill: var(--cpd-color-icon-secondary);
-}
-
-.iconCopyButton.on svg *,
-.iconCopyButton.on:hover svg * {
-  fill: transparent;
-  stroke: var(--cpd-color-text-action-accent);
-}
-
-.dropdownButton {
-  color: var(--cpd-color-text-primary);
-  padding: 2px 8px;
-  border-radius: 8px;
-}
-
-.dropdownButton:active,
-.dropdownButton.on {
-  background-color: var(--cpd-color-bg-action-secondary-pressed);
-}
-
-.dropdownButton svg {
-  margin-left: 8px;
-}
-
-.dropdownButton svg * {
-  fill: var(--cpd-color-icon-primary);
-}
-
-.lg {
-  height: 40px;
-}
-
-.linkButton {
-  background-color: transparent;
-  border: none;
-  color: var(--cpd-color-text-action-accent);
-  cursor: pointer;
-}
-
-@media (hover: hover) {
-  .toolbarButton:hover,
-  .toolbarButtonSecondary:hover {
-    background-color: var(--cpd-color-bg-subtle-primary);
-    border: none;
-    box-shadow: none;
-  }
-
-  .toolbarButton.on:hover,
-  .toolbarButton.off:hover {
-    background-color: var(--cpd-color-bg-action-primary-hovered);
-  }
-
-  .iconButton:not(.stroke):hover svg * {
-    fill: var(--cpd-color-icon-accent-tertiary);
-  }
-
-  .hangupButton:hover {
-    background-color: var(--cpd-color-bg-critical-hovered);
-  }
-
-  .iconCopyButton:hover svg * {
-    fill: var(--cpd-color-icon-accent-tertiary);
-  }
-
-  .dropdownButton:hover {
-    background-color: var(--cpd-color-bg-action-secondary-hovered);
-  }
-}
--- a/src/button/Button.tsx
+++ b/src/button/Button.tsx
@@ -1,5 +1,5 @@
 /*
-Copyright 2022 - 2023 New Vector Ltd
+Copyright 2022-2024 New Vector Ltd

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -13,13 +13,10 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
-import { FC, forwardRef } from "react";
-import { PressEvent } from "@react-types/shared";
+import { ComponentPropsWithoutRef, FC } from "react";
 import classNames from "classnames";
-import { useButton } from "@react-aria/button";
-import { mergeProps, useObjectRef } from "@react-aria/utils";
 import { useTranslation } from "react-i18next";
-import { Tooltip } from "@vector-im/compound-web";
+import { Button as CpdButton, Tooltip } from "@vector-im/compound-web";
 import {
  MicOnSolidIcon,
  MicOffSolidIcon,
@@ -28,120 +25,15 @@ import {
  EndCallIcon,
  ShareScreenSolidIcon,
  SettingsSolidIcon,
-  ChevronDownIcon,
 } from "@vector-im/compound-design-tokens/assets/web/icons";

 import styles from "./Button.module.css";

-export type ButtonVariant =
-  | "default"
-  | "toolbar"
-  | "toolbarSecondary"
-  | "icon"
-  | "secondary"
-  | "copy"
-  | "secondaryCopy"
-  | "iconCopy"
-  | "secondaryHangup"
-  | "dropdown"
-  | "link";
-
-export const variantToClassName = {
-  default: [styles.button],
-  toolbar: [styles.toolbarButton],
-  toolbarSecondary: [styles.toolbarButtonSecondary],
-  icon: [styles.iconButton],
-  secondary: [styles.secondary],
-  copy: [styles.copyButton],
-  secondaryCopy: [styles.secondaryCopy, styles.copyButton],
-  iconCopy: [styles.iconCopyButton],
-  secondaryHangup: [styles.secondaryHangup],
-  dropdown: [styles.dropdownButton],
-  link: [styles.linkButton],
-};
-
-export type ButtonSize = "lg";
-
-export const sizeToClassName: { lg: string[] } = {
-  lg: [styles.lg],
-};
-interface Props {
-  variant: ButtonVariant;
-  size: ButtonSize;
-  on: () => void;
-  off: () => void;
-  iconStyle: string;
-  className: string;
-  children: Element[];
-  onPress: (e: PressEvent) => void;
-  onPressStart: (e: PressEvent) => void;
-  disabled: boolean;
-  // TODO: add all props for <Button>
-  [index: string]: unknown;
+interface MicButtonProps extends ComponentPropsWithoutRef<"button"> {
+  muted: boolean;
 }

-export const Button = forwardRef<HTMLButtonElement, Props>(
-  (
-    {
-      variant = "default",
-      size,
-      on,
-      off,
-      iconStyle,
-      className,
-      children,
-      onPress,
-      onPressStart,
-      ...rest
-    },
-    ref,
-  ) => {
-    const buttonRef = useObjectRef<HTMLButtonElement>(ref);
-    const { buttonProps } = useButton(
-      { onPress, onPressStart, ...rest },
-      buttonRef,
-    );
-
-    // TODO: react-aria's useButton hook prevents form submission via keyboard
-    // Remove the hack below after this is merged https://github.com/adobe/react-spectrum/pull/904
-    let filteredButtonProps = buttonProps;
-
-    if (rest.type === "submit" && !rest.onPress) {
-      const { ...filtered } = buttonProps;
-      filteredButtonProps = filtered;
-    }
-
-    return (
-      <button
-        className={classNames(
-          variantToClassName[variant],
-          sizeToClassName[size],
-          styles[iconStyle],
-          className,
-          {
-            [styles.on]: on,
-            [styles.off]: off,
-          },
-        )}
-        {...mergeProps(rest, filteredButtonProps)}
-        ref={buttonRef}
-      >
-        <>
-          {children}
-          {variant === "dropdown" && <ChevronDownIcon />}
-        </>
-      </button>
-    );
-  },
-);
-
-Button.displayName = "Button";
-
-export const MicButton: FC<{
-  muted: boolean;
-  // TODO: add all props for <Button>
-  [index: string]: unknown;
-}> = ({ muted, ...rest }) => {
+export const MicButton: FC<MicButtonProps> = ({ muted, ...props }) => {
  const { t } = useTranslation();
  const Icon = muted ? MicOffSolidIcon : MicOnSolidIcon;
  const label = muted
@@ -150,18 +42,21 @@ export const MicButton: FC<{

  return (
    <Tooltip label={label}>
-      <Button variant="toolbar" {...rest} on={muted}>
-        <Icon aria-hidden width={24} height={24} />
-      </Button>
+      <CpdButton
+        iconOnly
+        Icon={Icon}
+        kind={muted ? "primary" : "secondary"}
+        {...props}
+      />
    </Tooltip>
  );
 };

-export const VideoButton: FC<{
+interface VideoButtonProps extends ComponentPropsWithoutRef<"button"> {
  muted: boolean;
-  // TODO: add all props for <Button>
-  [index: string]: unknown;
-}> = ({ muted, ...rest }) => {
+}
+
+export const VideoButton: FC<VideoButtonProps> = ({ muted, ...props }) => {
  const { t } = useTranslation();
  const Icon = muted ? VideoCallOffSolidIcon : VideoCallSolidIcon;
  const label = muted
@@ -170,19 +65,24 @@ export const VideoButton: FC<{

  return (
    <Tooltip label={label}>
-      <Button variant="toolbar" {...rest} on={muted}>
-        <Icon aria-hidden width={24} height={24} />
-      </Button>
+      <CpdButton
+        iconOnly
+        Icon={Icon}
+        kind={muted ? "primary" : "secondary"}
+        {...props}
+      />
    </Tooltip>
  );
 };

-export const ScreenshareButton: FC<{
+interface ShareScreenButtonProps extends ComponentPropsWithoutRef<"button"> {
  enabled: boolean;
-  className?: string;
-  // TODO: add all props for <Button>
-  [index: string]: unknown;
-}> = ({ enabled, className, ...rest }) => {
+}
+
+export const ShareScreenButton: FC<ShareScreenButtonProps> = ({
+  enabled,
+  ...props
+}) => {
  const { t } = useTranslation();
  const label = enabled
    ? t("stop_screenshare_button_label")
@@ -190,45 +90,48 @@ export const ScreenshareButton: FC<{

  return (
    <Tooltip label={label}>
-      <Button variant="toolbar" {...rest} on={enabled}>
-        <ShareScreenSolidIcon aria-hidden width={24} height={24} />
-      </Button>
+      <CpdButton
+        iconOnly
+        Icon={ShareScreenSolidIcon}
+        kind={enabled ? "primary" : "secondary"}
+        {...props}
+      />
    </Tooltip>
  );
 };

-export const HangupButton: FC<{
-  className?: string;
-  // TODO: add all props for <Button>
-  [index: string]: unknown;
-}> = ({ className, ...rest }) => {
+export const EndCallButton: FC<ComponentPropsWithoutRef<"button">> = ({
+  className,
+  ...props
+}) => {
  const { t } = useTranslation();

  return (
    <Tooltip label={t("hangup_button_label")}>
-      <Button
-        variant="toolbar"
-        className={classNames(styles.hangupButton, className)}
-        {...rest}
-      >
-        <EndCallIcon aria-hidden width={24} height={24} />
-      </Button>
+      <CpdButton
+        className={classNames(className, styles.endCall)}
+        iconOnly
+        Icon={EndCallIcon}
+        destructive
+        {...props}
+      />
    </Tooltip>
  );
 };

-export const SettingsButton: FC<{
-  className?: string;
-  // TODO: add all props for <Button>
-  [index: string]: unknown;
-}> = ({ className, ...rest }) => {
+export const SettingsButton: FC<ComponentPropsWithoutRef<"button">> = (
+  props,
+) => {
  const { t } = useTranslation();

  return (
    <Tooltip label={t("common.settings")}>
-      <Button variant="toolbar" {...rest}>
-        <SettingsSolidIcon aria-hidden width={24} height={24} />
-      </Button>
+      <CpdButton
+        iconOnly
+        Icon={SettingsSolidIcon}
+        kind="secondary"
+        {...props}
+      />
    </Tooltip>
  );
 };
--- a/src/button/CopyButton.tsx
+++ b/src/button/CopyButton.tsx
@@ -1,69 +0,0 @@
-/*
-Copyright 2022 New Vector Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import { useTranslation } from "react-i18next";
-import useClipboard from "react-use-clipboard";
-import { FC } from "react";
-
-import CheckIcon from "../icons/Check.svg?react";
-import CopyIcon from "../icons/Copy.svg?react";
-import { Button, ButtonVariant } from "./Button";
-
-interface Props {
-  value: string;
-  children?: JSX.Element | string;
-  className?: string;
-  variant?: ButtonVariant;
-  copiedMessage?: string;
-}
-
-export const CopyButton: FC<Props> = ({
-  value,
-  children,
-  className,
-  variant,
-  copiedMessage,
-  ...rest
-}) => {
-  const { t } = useTranslation();
-  const [isCopied, setCopied] = useClipboard(value, { successDuration: 3000 });
-
-  return (
-    <Button
-      {...rest}
-      variant={variant === "icon" ? "iconCopy" : variant || "copy"}
-      on={isCopied}
-      className={className}
-      onPress={setCopied}
-      iconStyle={isCopied ? "stroke" : "fill"}
-      aria-label={t("action.copy")}
-    >
-      {isCopied ? (
-        <>
-          {variant !== "icon" && (
-            <span>{copiedMessage || t("common.copied")}</span>
-          )}
-          <CheckIcon />
-        </>
-      ) : (
-        <>
-          {variant !== "icon" && <span>{children || value}</span>}
-          <CopyIcon />
-        </>
-      )}
-    </Button>
-  );
-};
--- a/src/button/Link.tsx
+++ b/src/button/Link.tsx
@@ -0,0 +1,61 @@
+/*
+Copyright 2024 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import {
+  ComponentPropsWithoutRef,
+  forwardRef,
+  MouseEvent,
+  useCallback,
+  useMemo,
+} from "react";
+import { Link as CpdLink } from "@vector-im/compound-web";
+import { useHistory } from "react-router-dom";
+import { createPath, LocationDescriptor, Path } from "history";
+
+export function useLink(
+  to: LocationDescriptor,
+): [Path, (e: MouseEvent) => void] {
+  const history = useHistory();
+  const path = useMemo(
+    () => (typeof to === "string" ? to : createPath(to)),
+    [to],
+  );
+  const onClick = useCallback(
+    (e: MouseEvent) => {
+      e.preventDefault();
+      history.push(to);
+    },
+    [history, to],
+  );
+
+  return [path, onClick];
+}
+
+type Props = Omit<
+  ComponentPropsWithoutRef<typeof CpdLink>,
+  "href" | "onClick"
+> & { to: LocationDescriptor };
+
+/**
+ * A version of Compound's link component that integrates with our router setup.
+ */
+export const Link = forwardRef<HTMLAnchorElement, Props>(function Link(
+  { to, ...props },
+  ref,
+) {
+  const [path, onClick] = useLink(to);
+  return <CpdLink ref={ref} {...props} href={path} onClick={onClick} />;
+});
--- a/src/button/LinkButton.tsx
+++ b/src/button/LinkButton.tsx
@@ -1,5 +1,5 @@
 /*
-Copyright 2022 New Vector Ltd
+Copyright 2024 New Vector Ltd

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,45 +14,24 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import { FC, HTMLAttributes } from "react";
-import { Link } from "react-router-dom";
-import classNames from "classnames";
-import * as H from "history";
+import { ComponentPropsWithoutRef, forwardRef } from "react";
+import { Button } from "@vector-im/compound-web";
+import { LocationDescriptor } from "history";

-import {
-  variantToClassName,
-  sizeToClassName,
-  ButtonVariant,
-  ButtonSize,
-} from "./Button";
+import { useLink } from "./Link";

-interface Props extends HTMLAttributes<HTMLAnchorElement> {
-  children: JSX.Element | string;
-  to: H.LocationDescriptor | ((location: H.Location) => H.LocationDescriptor);
-  size?: ButtonSize;
-  variant?: ButtonVariant;
-  className?: string;
-}
+type Props = Omit<
+  ComponentPropsWithoutRef<typeof Button<"a">>,
+  "as" | "href"
+> & { to: LocationDescriptor };

-export const LinkButton: FC<Props> = ({
-  children,
-  to,
-  size,
-  variant,
-  className,
-  ...rest
-}) => {
-  return (
-    <Link
-      className={classNames(
-        variantToClassName[variant || "secondary"],
-        size ? sizeToClassName[size] : [],
-        className,
-      )}
-      to={to}
-      {...rest}
-    >
-      {children}
-    </Link>
-  );
-};
+/**
+ * A version of Compound's button component that acts as a link and integrates
+ * with our router setup.
+ */
+export const LinkButton = forwardRef<HTMLAnchorElement, Props>(
+  function LinkButton({ to, ...props }, ref) {
+    const [path, onClick] = useLink(to);
+    return <Button as="a" ref={ref} {...props} href={path} onClick={onClick} />;
+  },
+);
--- a/src/button/index.ts
+++ b/src/button/index.ts
@@ -15,5 +15,4 @@ limitations under the License.
 */

 export * from "./Button";
-export * from "./CopyButton";
 export * from "./LinkButton";
--- a/src/config/Config.ts
+++ b/src/config/Config.ts
@@ -44,6 +44,18 @@ export class Config {
    return Config.internalInstance.initPromise;
  }

+  /**
+   * This is a alternative initializer that does not load anything
+   * from a hosted config file but instead just initializes the conifg using the
+   * default config.
+   *
+   * It is supposed to only be used in tests. (It is executed in `vite.setup.js`)
+   */
+  public static initDefault(): void {
+    Config.internalInstance = new Config();
+    Config.internalInstance.config = { ...DEFAULT_CONFIG };
+  }
+
  // Convenience accessors
  public static defaultHomeserverUrl(): string | undefined {
    return (
--- a/src/controls.ts
+++ b/src/controls.ts
@@ -0,0 +1,39 @@
+/*
+Copyright 2024 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { Subject } from "rxjs";
+
+export interface Controls {
+  canEnterPip: () => boolean;
+  enablePip: () => void;
+  disablePip: () => void;
+}
+
+export const setPipEnabled = new Subject<boolean>();
+
+window.controls = {
+  canEnterPip(): boolean {
+    return setPipEnabled.observed;
+  },
+  enablePip(): void {
+    if (!setPipEnabled.observed) throw new Error("No call is running");
+    setPipEnabled.next(true);
+  },
+  disablePip(): void {
+    if (!setPipEnabled.observed) throw new Error("No call is running");
+    setPipEnabled.next(false);
+  },
+};
--- a/src/home/CallList.module.css
+++ b/src/home/CallList.module.css
@@ -42,8 +42,7 @@ limitations under the License.
  align-items: center;
 }

-.avatar,
-.copyButtonSpacer {
+.avatar {
  flex-shrink: 0;
 }

@@ -64,18 +63,6 @@ limitations under the License.
  margin-top: 8px;
 }

-.copyButtonSpacer,
-.copyButton {
-  width: 16px;
-  height: 16px;
-}
-
-.copyButton {
-  position: absolute;
-  top: 12px;
-  right: 12px;
-}
-
 .callList {
  display: flex;
  flex-wrap: wrap;
--- a/test/home/CallList-test.tsx
+++ b/test/home/CallList-test.tsx
@@ -15,20 +15,19 @@ limitations under the License.
 */

 import { render, RenderResult } from "@testing-library/react";
-import { CallList } from "../../src/home/CallList";
-import { MatrixClient } from "matrix-js-sdk";
-import { GroupCallRoom } from "../../src/home/useGroupCallRooms";
+import { MatrixClient } from "matrix-js-sdk/src/matrix";
 import { MemoryRouter } from "react-router-dom";
-import { ClientProvider } from "../../src/ClientContext";
+import { describe, expect, it } from "vitest";
+
+import { CallList } from "../../src/home/CallList";
+import { GroupCallRoom } from "../../src/home/useGroupCallRooms";

 describe("CallList", () => {
  const renderComponent = (rooms: GroupCallRoom[]): RenderResult => {
    return render(
-      <ClientProvider>
-        <MemoryRouter>
-          <CallList client={{} as MatrixClient} rooms={rooms} />
-        </MemoryRouter>
-      </ClientProvider>,
+      <MemoryRouter>
+        <CallList client={{} as MatrixClient} rooms={rooms} />
+      </MemoryRouter>,
    );
  };

--- a/src/home/CallList.tsx
+++ b/src/home/CallList.tsx
@@ -1,5 +1,5 @@
 /*
-Copyright 2022 New Vector Ltd
+Copyright 2022-2024 New Vector Ltd

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -20,10 +20,9 @@ import { RoomMember } from "matrix-js-sdk/src/models/room-member";
 import { Room } from "matrix-js-sdk/src/models/room";
 import { FC } from "react";

-import { CopyButton } from "../button";
 import { Avatar, Size } from "../Avatar";
 import styles from "./CallList.module.css";
-import { getAbsoluteRoomUrl, getRelativeRoomUrl } from "../matrix-utils";
+import { getRelativeRoomUrl } from "../utils/matrix";
 import { Body } from "../typography/Typography";
 import { GroupCallRoom } from "./useGroupCallRooms";
 import { useRoomEncryptionSystem } from "../e2ee/sharedKeyManagement";
@@ -81,12 +80,6 @@ const CallTile: FC<CallTileProps> = ({ name, avatarUrl, room }) => {
        </div>
        <div className={styles.copyButtonSpacer} />
      </Link>
-      <CopyButton
-        className={styles.copyButton}
-        variant="icon"
-        // Todo add the viaServers to the created link
-        value={getAbsoluteRoomUrl(room.roomId, roomEncryptionSystem, room.name)}
-      />
    </div>
  );
 };
--- a/src/home/JoinExistingCallModal.tsx
+++ b/src/home/JoinExistingCallModal.tsx
@@ -14,19 +14,18 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import { PressEvent } from "@react-types/shared";
 import { useTranslation } from "react-i18next";
-import { FC } from "react";
+import { FC, MouseEvent } from "react";
+import { Button } from "@vector-im/compound-web";

 import { Modal } from "../Modal";
-import { Button } from "../button";
 import { FieldRow } from "../input/Input";
 import styles from "./JoinExistingCallModal.module.css";

 interface Props {
  open: boolean;
  onDismiss: () => void;
-  onJoin: (e: PressEvent) => void;
+  onJoin: (e: MouseEvent) => void;
 }

 export const JoinExistingCallModal: FC<Props> = ({
@@ -44,8 +43,8 @@ export const JoinExistingCallModal: FC<Props> = ({
    >
      <p>{t("join_existing_call_modal.text")}</p>
      <FieldRow rightAlign className={styles.buttons}>
-        <Button onPress={onDismiss}>{t("action.no")}</Button>
-        <Button onPress={onJoin} data-testid="home_joinExistingRoom">
+        <Button onClick={onDismiss}>{t("action.no")}</Button>
+        <Button onClick={onJoin} data-testid="home_joinExistingRoom">
          {t("join_existing_call_modal.join_button")}
        </Button>
      </FieldRow>
--- a/src/home/RegisteredView.tsx
+++ b/src/home/RegisteredView.tsx
@@ -20,19 +20,19 @@ import { MatrixClient } from "matrix-js-sdk/src/client";
 import { useTranslation } from "react-i18next";
 import { Heading } from "@vector-im/compound-web";
 import { logger } from "matrix-js-sdk/src/logger";
+import { Button } from "@vector-im/compound-web";

 import {
  createRoom,
  getRelativeRoomUrl,
  roomAliasLocalpartFromRoomName,
  sanitiseRoomNameInput,
-} from "../matrix-utils";
+} from "../utils/matrix";
 import { useGroupCallRooms } from "./useGroupCallRooms";
 import { Header, HeaderLogo, LeftNav, RightNav } from "../Header";
 import commonStyles from "./common.module.css";
 import styles from "./RegisteredView.module.css";
 import { FieldRow, InputField, ErrorMessage } from "../input/Input";
-import { Button } from "../button";
 import { CallList } from "./CallList";
 import { UserMenuContainer } from "../UserMenuContainer";
 import { JoinExistingCallModal } from "./JoinExistingCallModal";
@@ -40,10 +40,7 @@ import { Caption } from "../typography/Typography";
 import { Form } from "../form/Form";
 import { AnalyticsNotice } from "../analytics/AnalyticsNotice";
 import { E2eeType } from "../e2ee/e2eeType";
-import {
-  useSetting,
-  optInAnalytics as optInAnalyticsSetting,
-} from "../settings/settings";
+import { useOptInAnalytics } from "../settings/settings";

 interface Props {
  client: MatrixClient;
@@ -52,7 +49,7 @@ interface Props {
 export const RegisteredView: FC<Props> = ({ client }) => {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<Error>();
-  const [optInAnalytics] = useSetting(optInAnalyticsSetting);
+  const [optInAnalytics] = useOptInAnalytics();
  const history = useHistory();
  const { t } = useTranslation();
  const [joinExistingCallModalOpen, setJoinExistingCallModalOpen] =
--- a/src/home/UnauthenticatedView.tsx
+++ b/src/home/UnauthenticatedView.tsx
@@ -18,20 +18,19 @@ import { FC, useCallback, useState, FormEventHandler } from "react";
 import { useHistory } from "react-router-dom";
 import { randomString } from "matrix-js-sdk/src/randomstring";
 import { Trans, useTranslation } from "react-i18next";
-import { Heading } from "@vector-im/compound-web";
+import { Button, Heading } from "@vector-im/compound-web";
 import { logger } from "matrix-js-sdk/src/logger";

 import { useClient } from "../ClientContext";
 import { Header, HeaderLogo, LeftNav, RightNav } from "../Header";
 import { UserMenuContainer } from "../UserMenuContainer";
 import { FieldRow, InputField, ErrorMessage } from "../input/Input";
-import { Button } from "../button";
 import {
  createRoom,
  getRelativeRoomUrl,
  roomAliasLocalpartFromRoomName,
  sanitiseRoomNameInput,
-} from "../matrix-utils";
+} from "../utils/matrix";
 import { useInteractiveRegistration } from "../auth/useInteractiveRegistration";
 import { JoinExistingCallModal } from "./JoinExistingCallModal";
 import { useRecaptcha } from "../auth/useRecaptcha";
@@ -43,16 +42,13 @@ import { generateRandomName } from "../auth/generateRandomName";
 import { AnalyticsNotice } from "../analytics/AnalyticsNotice";
 import { Config } from "../config/Config";
 import { E2eeType } from "../e2ee/e2eeType";
-import {
-  useSetting,
-  optInAnalytics as optInAnalyticsSetting,
-} from "../settings/settings";
+import { useOptInAnalytics } from "../settings/settings";

 export const UnauthenticatedView: FC = () => {
  const { setClient } = useClient();
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<Error>();
-  const [optInAnalytics] = useSetting(optInAnalyticsSetting);
+  const [optInAnalytics] = useOptInAnalytics();
  const { recaptchaKey, register } = useInteractiveRegistration();
  const { execute, reset, recaptchaId } = useRecaptcha(recaptchaKey);

--- a/src/home/useGroupCallRooms.ts
+++ b/src/home/useGroupCallRooms.ts
@@ -18,7 +18,7 @@ import { MatrixClient } from "matrix-js-sdk/src/client";
 import { Room, RoomEvent } from "matrix-js-sdk/src/models/room";
 import { RoomMember } from "matrix-js-sdk/src/models/room-member";
 import { useState, useEffect } from "react";
-import { EventTimeline, EventType, JoinRule } from "matrix-js-sdk";
+import { EventTimeline, EventType, JoinRule } from "matrix-js-sdk/src/matrix";
 import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";
 import { MatrixRTCSessionManagerEvents } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSessionManager";
 import { KnownMembership } from "matrix-js-sdk/src/types";
--- a/src/icons/ArrowDown.svg
+++ b/src/icons/ArrowDown.svg
@@ -1,10 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_965_9448)">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M1.70711 5.36321C2.09763 4.97268 2.73182 4.97166 3.1236 5.36091L8.08934 10.2946L13.0391 5.34488C13.4296 4.95435 14.0638 4.95333 14.4556 5.34258C14.8474 5.73184 14.8484 6.36398 14.4579 6.75451L8.80101 12.4114C8.41049 12.8019 7.7763 12.8029 7.38452 12.4137L1.70939 6.77513C1.3176 6.38587 1.31658 5.75373 1.70711 5.36321Z" fill="#8E99A4"/>
-</g>
-<defs>
-<clipPath id="clip0_965_9448">
-<rect width="16" height="16" fill="white"/>
-</clipPath>
-</defs>
-</svg>
--- a/src/icons/Audio.svg
+++ b/src/icons/Audio.svg
@@ -1,5 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M11.9699 2.22605L6 7.20093L1.5 7.20093C0.671573 7.20093 0 7.8725 0 8.70093V15.3009C0 16.1294 0.671571 16.8009 1.5 16.8009L6 16.8009L11.9699 21.7758C12.4584 22.1829 13.2 21.8355 13.2 21.1996V2.80221C13.2 2.16634 12.4584 1.81897 11.9699 2.22605Z" fill="white"/>
-<path d="M21.1888 4.1866C20.8497 3.75065 20.2214 3.67212 19.7855 4.01119C19.35 4.34988 19.2712 4.97715 19.6089 5.41304L19.6097 5.41402L19.6107 5.41531L19.6243 5.43347C19.6376 5.45126 19.6589 5.48033 19.6872 5.52017C19.7438 5.59988 19.828 5.72244 19.9308 5.88385C20.1365 6.20718 20.4145 6.68332 20.6932 7.28057C21.2535 8.48111 21.7994 10.134 21.7994 12.0005C21.7994 13.8671 21.2535 15.52 20.6932 16.7205C20.4145 17.3178 20.1365 17.7939 19.9308 18.1172C19.828 18.2786 19.7438 18.4012 19.6872 18.4809C19.6589 18.5208 19.6376 18.5498 19.6243 18.5676L19.6107 18.5858L19.6097 18.5871L19.6088 18.5882C19.2712 19.0241 19.3501 19.6512 19.7855 19.9899C20.2214 20.329 20.8497 20.2504 21.1888 19.8145L20.4435 19.2348C21.1888 19.8145 21.1888 19.8145 21.1888 19.8145L21.1908 19.8119L21.1936 19.8082L21.2019 19.7974L21.2284 19.7621C21.2503 19.7327 21.2805 19.6915 21.3179 19.6389C21.3925 19.5338 21.4958 19.3832 21.6181 19.191C21.8623 18.8072 22.1843 18.2547 22.5056 17.5663C23.1453 16.1954 23.7994 14.2482 23.7994 12.0005C23.7994 9.75284 23.1453 7.80569 22.5056 6.4348C22.1843 5.74634 21.8623 5.1939 21.6181 4.81009C21.4958 4.61793 21.3925 4.46727 21.3179 4.36217C21.2805 4.30959 21.2503 4.26835 21.2284 4.23893L21.2019 4.20373L21.1936 4.19288L21.1908 4.18917L21.1897 4.18774C21.1897 4.18774 21.1888 4.1866 20.3994 4.80054L21.1888 4.1866Z" fill="white"/>
-<path d="M17.5896 7.78682C17.2506 7.35087 16.6223 7.27234 16.1864 7.61141C15.7515 7.94959 15.6723 8.57548 16.0083 9.01128L16.0117 9.01586C16.0162 9.02185 16.0246 9.03334 16.0365 9.05007C16.0603 9.08359 16.0977 9.13784 16.1441 9.21085C16.2374 9.3574 16.3654 9.57639 16.4941 9.85222C16.7544 10.4099 17.0003 11.1627 17.0003 12.0008C17.0003 12.8388 16.7544 13.5916 16.4941 14.1493C16.3654 14.4251 16.2374 14.6441 16.1441 14.7907C16.0977 14.8637 16.0603 14.9179 16.0365 14.9514C16.0246 14.9682 16.0162 14.9797 16.0117 14.9857L16.0083 14.9903C15.6723 15.4261 15.7515 16.0519 16.1864 16.3901C16.6223 16.7292 17.2506 16.6506 17.5896 16.2147L16.8003 15.6008C17.5896 16.2147 17.5896 16.2147 17.5896 16.2147L17.5914 16.2124L17.5936 16.2095L17.5994 16.2021L17.6158 16.1802C17.6289 16.1626 17.6463 16.1389 17.6672 16.1094C17.709 16.0505 17.7654 15.9682 17.8315 15.8644C17.9632 15.6574 18.1352 15.3621 18.3065 14.9951C18.6462 14.267 19.0003 13.2199 19.0003 12.0008C19.0003 10.7816 18.6462 9.73448 18.3065 9.00645C18.1352 8.63942 17.9632 8.34412 17.8315 8.1371C17.7654 8.03333 17.709 7.95097 17.6672 7.89207C17.6463 7.8626 17.6289 7.83893 17.6158 7.82132L17.5994 7.79946L17.5936 7.79198L17.5914 7.78911L17.5905 7.78789C17.5905 7.78789 17.5896 7.78682 16.8003 8.40076L17.5896 7.78682Z" fill="white"/>
-</svg>
--- a/src/icons/Copy.svg
+++ b/src/icons/Copy.svg
@@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M4 2C2.89543 2 2 2.89543 2 4V8.66667C2 9.77124 2.89543 10.6667 4 10.6667H5.33333V12C5.33333 13.1046 6.22877 14 7.33333 14H12C13.1046 14 14 13.1046 14 12V7.33333C14 6.22876 13.1046 5.33333 12 5.33333H10.6667V4C10.6667 2.89543 9.77123 2 8.66667 2H4ZM9.33333 5.33333V4C9.33333 3.63181 9.03486 3.33333 8.66667 3.33333H4C3.63181 3.33333 3.33333 3.63181 3.33333 4V8.66667C3.33333 9.03486 3.63181 9.33333 4 9.33333H5.33333V7.33333C5.33333 6.22877 6.22876 5.33333 7.33333 5.33333H9.33333ZM6.66667 7.33333C6.66667 6.96514 6.96514 6.66667 7.33333 6.66667H12C12.3682 6.66667 12.6667 6.96514 12.6667 7.33333V12C12.6667 12.3682 12.3682 12.6667 12 12.6667H7.33333C6.96514 12.6667 6.66667 12.3682 6.66667 12V7.33333Z" fill="#8E99A4"/>
-</svg>
--- a/src/icons/Developer.svg
+++ b/src/icons/Developer.svg
@@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M5 3C2.23858 3 0 5.23858 0 8C0 10.7614 2.23858 13 5 13H11C13.7614 13 16 10.7614 16 8C16 5.23858 13.7614 3 11 3H5ZM8 8C8 9.65685 6.65685 11 5 11C3.34315 11 2 9.65685 2 8C2 6.34315 3.34315 5 5 5C6.65685 5 8 6.34315 8 8Z" fill="#A9B2BC"/>
-</svg>
--- a/src/icons/Edit.svg
+++ b/src/icons/Edit.svg
@@ -1,4 +0,0 @@
-<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M2.64856 7.35501C2.65473 7.31601 2.67231 7.27972 2.69908 7.25069L8.40377 1.06442C8.47865 0.983217 8.60518 0.978093 8.68638 1.05297L9.8626 2.13763C9.9438 2.21251 9.94893 2.33904 9.87405 2.42024L4.16936 8.60651C4.1426 8.63554 4.10783 8.656 4.06946 8.6653L2.66781 9.00511C2.52911 9.03873 2.40084 8.92044 2.42315 8.77948L2.64856 7.35501Z" fill="white"/>
-<path d="M1.75 9.44346C1.33579 9.44346 1 9.77925 1 10.1935C1 10.6077 1.33579 10.9435 1.75 10.9435L10.75 10.9435C11.1642 10.9435 11.5 10.6077 11.5 10.1935C11.5 9.77925 11.1642 9.44346 10.75 9.44346L1.75 9.44346Z" fill="white"/>
-</svg>
--- a/src/icons/Feedback.svg
+++ b/src/icons/Feedback.svg
@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M12.283 21.4401C17.6495 21.4401 21.9999 17.0881 21.9999 11.7196C21.9999 6.3511 17.6495 1.99908 12.283 1.99908C6.91643 1.99908 2.566 6.3511 2.566 11.7196C2.566 13.2234 2.90739 14.6476 3.51687 15.9186L2.04468 20.7049C1.80806 21.4742 2.5308 22.1936 3.29898 21.9535L8.04564 20.4696C9.32625 21.0914 10.7639 21.4401 12.283 21.4401Z" fill="#ffffff"/>
-</svg>
--- a/src/icons/Overflow.svg
+++ b/src/icons/Overflow.svg
@@ -1,5 +0,0 @@
-<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8.33398 15C8.33398 16.3807 7.2147 17.5 5.83398 17.5C4.45327 17.5 3.33398 16.3807 3.33398 15C3.33398 13.6193 4.45327 12.5 5.83398 12.5C7.2147 12.5 8.33398 13.6193 8.33398 15Z" fill="white"/>
-<path d="M17.5002 15C17.5002 16.3807 16.381 17.5 15.0002 17.5C13.6195 17.5 12.5002 16.3807 12.5002 15C12.5002 13.6193 13.6195 12.5 15.0002 12.5C16.381 12.5 17.5002 13.6193 17.5002 15Z" fill="white"/>
-<path d="M24.1665 17.5C25.5472 17.5 26.6665 16.3807 26.6665 15C26.6665 13.6193 25.5472 12.5 24.1665 12.5C22.7858 12.5 21.6665 13.6193 21.6665 15C21.6665 16.3807 22.7858 17.5 24.1665 17.5Z" fill="white"/>
-</svg>
--- a/src/icons/Video.svg
+++ b/src/icons/Video.svg
@@ -1,4 +0,0 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M2.50001 3.33334C1.11929 3.33334 0 4.45264 0 5.83336V14.1667C0 15.5474 1.11929 16.6667 2.50001 16.6667H11.6667C13.0474 16.6667 14.1667 15.5474 14.1667 14.1667V5.83336C14.1667 4.45264 13.0474 3.33334 11.6667 3.33334H2.50001Z" fill="white"/>
-<path d="M18.6462 5.24983L15.8334 7.50004V12.5001L18.6462 14.7503C19.1918 15.1868 20.0001 14.7983 20.0001 14.0996V5.90056C20.0001 5.2018 19.1918 4.81332 18.6462 5.24983Z" fill="white"/>
-</svg>
--- a/src/index.css
+++ b/src/index.css
@@ -20,9 +20,12 @@ limitations under the License.
   Therefore we define a unicode-range to load which excludes the glyphs
   (to avoid having to maintain a fork of Inter). */

-@import "normalize.css/normalize.css";
-@import "@vector-im/compound-design-tokens/assets/web/css/compound-design-tokens.css";
-@import "@vector-im/compound-web/dist/style.css";
+@layer normalize, compound-legacy, compound;
+
+@import url("normalize.css/normalize.css") layer(normalize);
+@import url("@vector-im/compound-design-tokens/assets/web/css/compound-design-tokens.css")
+layer(compound);
+@import url("@vector-im/compound-web/dist/style.css") layer(compound.components);

 :root {
  --font-scale: 1;
@@ -195,87 +198,89 @@ body[data-platform="desktop"] {
  --cpd-font-family-sans: "Inter", sans-serif;
 }

-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-p,
-a {
-  margin-top: 0;
-}
+@layer compound-legacy {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  p,
+  a {
+    margin-top: 0;
+  }

-/* Headline Semi Bold */
-h1 {
-  font-weight: 600;
-  font-size: var(--font-size-headline);
-}
+  /* Headline Semi Bold */
+  h1 {
+    font-weight: 600;
+    font-size: var(--font-size-headline);
+  }

-/* Title */
-h2 {
-  font-weight: 600;
-  font-size: var(--font-size-title);
-}
+  /* Title */
+  h2 {
+    font-weight: 600;
+    font-size: var(--font-size-title);
+  }

-/* Subtitle */
-h3 {
-  font-weight: 600;
-  font-size: var(--font-size-subtitle);
-}
+  /* Subtitle */
+  h3 {
+    font-weight: 600;
+    font-size: var(--font-size-subtitle);
+  }

-/* Body Semi Bold */
-h4 {
-  font-weight: 600;
-  font-size: var(--font-size-body);
-}
+  /* Body Semi Bold */
+  h4 {
+    font-weight: 600;
+    font-size: var(--font-size-body);
+  }

-h1,
-h2,
-h3 {
-  line-height: 1.2;
-}
+  h1,
+  h2,
+  h3 {
+    line-height: 1.2;
+  }

-/* Body */
-p {
-  font-size: var(--font-size-body);
-  line-height: var(--font-size-title);
-}
+  /* Body */
+  p {
+    font-size: var(--font-size-body);
+    line-height: var(--font-size-title);
+  }

-a {
-  color: var(--cpd-color-text-action-accent);
-  text-decoration: none;
-}
+  a {
+    color: var(--cpd-color-text-action-accent);
+    text-decoration: none;
+  }

-a:hover,
-a:active {
-  opacity: 0.8;
-}
+  a:hover,
+  a:active {
+    opacity: 0.8;
+  }

-hr {
-  width: calc(100% - 24px);
-  border: none;
-  border-top: 1px solid var(--cpd-color-border-interactive-secondary);
-  color: var(--cpd-color-border-interactive-secondary);
-  overflow: visible;
-  text-align: center;
-  height: 5px;
-  font-weight: 600;
-  font-size: var(--font-size-body);
-  line-height: 24px;
-  margin: 0 12px;
-}
+  hr {
+    width: calc(100% - 24px);
+    border: none;
+    border-top: 1px solid var(--cpd-color-border-interactive-secondary);
+    color: var(--cpd-color-border-interactive-secondary);
+    overflow: visible;
+    text-align: center;
+    height: 5px;
+    font-weight: 600;
+    font-size: var(--font-size-body);
+    line-height: 24px;
+    margin: 0 12px;
+  }

-summary {
-  font-size: var(--font-size-body);
-}
+  summary {
+    font-size: var(--font-size-body);
+  }

-details > :not(summary) {
-  margin-left: var(--font-size-body);
-}
+  details > :not(summary) {
+    margin-left: var(--font-size-body);
+  }

-details[open] > summary {
-  margin-bottom: var(--font-size-body);
+  details[open] > summary {
+    margin-bottom: var(--font-size-body);
+  }
 }

 #root > [data-overlay-container] {
--- a/test/initializer-test.ts
+++ b/test/initializer-test.ts
@@ -14,6 +14,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

+import { expect, test } from "vitest";
+
 import { Initializer } from "../src/initializer";

 test("initBeforeReact sets font family from URL param", () => {
--- a/src/initializer.tsx
+++ b/src/initializer.tsx
@@ -32,8 +32,6 @@ enum LoadState {
 }

 class DependencyLoadStates {
-  // TODO: decide where olm should be initialized (see TODO comment below)
-  // olm: LoadState = LoadState.None;
  public config: LoadState = LoadState.None;
  public sentry: LoadState = LoadState.None;
  public openTelemetry: LoadState = LoadState.None;
@@ -128,18 +126,6 @@ export class Initializer {
  private loadStates = new DependencyLoadStates();

  private initStep(resolve: (value: void | PromiseLike<void>) => void): void {
-    // TODO: Olm is initialized with the client currently (see `initClient()` and `olm.ts`)
-    // we need to decide if we want to init it here or keep it in initClient
-    // if (this.loadStates.olm === LoadState.None) {
-    //   this.loadStates.olm = LoadState.Loading;
-    //   // TODO: https://gitlab.matrix.org/matrix-org/olm/-/issues/10
-    //   window.OLM_OPTIONS = {};
-    //   Olm.init({ locateFile: () => olmWasmPath }).then(() => {
-    //     this.loadStates.olm = LoadState.Loaded;
-    //     this.initStep(resolve);
-    //   });
-    // }
-
    // config
    if (this.loadStates.config === LoadState.None) {
      this.loadStates.config = LoadState.Loading;
--- a/src/input/AvatarInputField.module.css
+++ b/src/input/AvatarInputField.module.css
@@ -1,5 +1,5 @@
 /*
-Copyright 2022 New Vector Ltd
+Copyright 2022-2024 New Vector Ltd

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -15,45 +15,30 @@ limitations under the License.
 */

 .avatarInputField {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-}
-
-.avatarContainer {
  position: relative;
  margin-bottom: 8px;
 }

+.avatar {
+  display: block;
+}
+
 .fileInput {
-  width: 0.1px;
-  height: 0.1px;
-  opacity: 0;
-  overflow: hidden;
+  display: none;
+}
+
+.edit {
+  border-radius: var(--cpd-radius-pill-effect);
+  padding: 2px;
+  background: var(--cpd-color-bg-canvas-default);
  position: absolute;
-  z-index: -1;
+  inset-block-end: -2px;
+  inset-inline-end: -2px;
 }

-.fileInput:focus + .fileInputButton {
-  outline: auto;
-}
-
-.fileInputButton {
-  position: absolute;
-  bottom: 11px;
-  right: -4px;
-  background-color: var(--cpd-color-subtle-primary);
-  width: 20px;
-  height: 20px;
-  border-radius: 10px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-}
-
-.removeButton {
-  color: var(--cpd-color-text-action-accent);
-  font-size: var(--font-size-caption);
-  padding: 6px 0;
+.edit button {
+  min-block-size: 0;
+  block-size: var(--cpd-space-7x);
+  inline-size: var(--cpd-space-7x);
+  padding: var(--cpd-space-1x);
 }
--- a/src/input/AvatarInputField.tsx
+++ b/src/input/AvatarInputField.tsx
@@ -1,5 +1,5 @@
 /*
-Copyright 2022 New Vector Ltd
+Copyright 2022-2024 New Vector Ltd

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,21 +14,25 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import { useObjectRef } from "@react-aria/utils";
 import {
  AllHTMLAttributes,
  useEffect,
  useCallback,
  useState,
-  forwardRef,
  ChangeEvent,
+  useRef,
+  FC,
 } from "react";
 import classNames from "classnames";
 import { useTranslation } from "react-i18next";
+import { Button, Menu, MenuItem } from "@vector-im/compound-web";
+import {
+  DeleteIcon,
+  EditIcon,
+  ShareIcon,
+} from "@vector-im/compound-design-tokens/assets/web/icons";

 import { Avatar, Size } from "../Avatar";
-import { Button } from "../button";
-import EditIcon from "../icons/Edit.svg?react";
 import styles from "./AvatarInputField.module.css";

 interface Props extends AllHTMLAttributes<HTMLInputElement> {
@@ -40,89 +44,115 @@ interface Props extends AllHTMLAttributes<HTMLInputElement> {
  onRemoveAvatar: () => void;
 }

-export const AvatarInputField = forwardRef<HTMLInputElement, Props>(
-  (
-    {
-      id,
-      label,
-      className,
-      avatarUrl,
-      userId,
-      displayName,
-      onRemoveAvatar,
-      ...rest
-    },
-    ref,
-  ) => {
-    const { t } = useTranslation();
+export const AvatarInputField: FC<Props> = ({
+  id,
+  label,
+  className,
+  avatarUrl,
+  userId,
+  displayName,
+  onRemoveAvatar,
+  ...rest
+}) => {
+  const { t } = useTranslation();

-    const [removed, setRemoved] = useState(false);
-    const [objUrl, setObjUrl] = useState<string | undefined>(undefined);
+  const [removed, setRemoved] = useState(false);
+  const [objUrl, setObjUrl] = useState<string | undefined>(undefined);
+  const [menuOpen, setMenuOpen] = useState(false);

-    const fileInputRef = useObjectRef(ref);
+  const fileInputRef = useRef<HTMLInputElement | null>(null);

-    useEffect(() => {
-      const currentInput = fileInputRef.current;
+  useEffect(() => {
+    const currentInput = fileInputRef.current!;

-      const onChange = (e: Event): void => {
-        const inputEvent = e as unknown as ChangeEvent<HTMLInputElement>;
-        if (inputEvent.target.files && inputEvent.target.files.length > 0) {
-          setObjUrl(URL.createObjectURL(inputEvent.target.files[0]));
-          setRemoved(false);
-        } else {
-          setObjUrl(undefined);
-        }
-      };
+    const onChange = (e: Event): void => {
+      const inputEvent = e as unknown as ChangeEvent<HTMLInputElement>;
+      if (inputEvent.target.files && inputEvent.target.files.length > 0) {
+        setObjUrl(URL.createObjectURL(inputEvent.target.files[0]));
+        setRemoved(false);
+      } else {
+        setObjUrl(undefined);
+      }
+    };

-      currentInput.addEventListener("change", onChange);
+    currentInput.addEventListener("change", onChange);

-      return (): void => {
-        currentInput?.removeEventListener("change", onChange);
-      };
-    });
+    return (): void => {
+      currentInput?.removeEventListener("change", onChange);
+    };
+  });

-    const onPressRemoveAvatar = useCallback(() => {
-      setRemoved(true);
-      onRemoveAvatar();
-    }, [onRemoveAvatar]);
+  const onSelectUpload = useCallback(() => {
+    fileInputRef.current!.click();
+  }, [fileInputRef]);

-    return (
-      <div className={classNames(styles.avatarInputField, className)}>
-        <div className={styles.avatarContainer}>
-          <Avatar
-            id={userId}
-            name={displayName}
-            size={Size.XL}
-            src={removed ? undefined : objUrl || avatarUrl}
-          />
-          <input
-            id={id}
-            accept="image/png, image/jpeg"
-            ref={fileInputRef}
-            type="file"
-            className={styles.fileInput}
-            role="button"
-            aria-label={label}
-            {...rest}
-          />
-          {/* https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/issues/966 */}
-          {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
-          <label htmlFor={id} className={styles.fileInputButton}>
-            <EditIcon />
-          </label>
-        </div>
-        {(avatarUrl || objUrl) && !removed && (
-          <Button
-            className={styles.removeButton}
-            variant="icon"
-            onPress={onPressRemoveAvatar}
+  const onSelectRemove = useCallback(() => {
+    setRemoved(true);
+    onRemoveAvatar();
+  }, [onRemoveAvatar]);
+
+  return (
+    <div className={classNames(styles.avatarInputField, className)}>
+      <Avatar
+        id={userId}
+        className={styles.avatar}
+        name={displayName}
+        size={Size.XL}
+        src={removed ? undefined : objUrl || avatarUrl}
+      />
+      <input
+        id={id}
+        accept="image/*"
+        ref={fileInputRef}
+        type="file"
+        className={styles.fileInput}
+        role="button"
+        aria-label={label}
+        {...rest}
+      />
+      <div className={styles.edit}>
+        {(avatarUrl || objUrl) && !removed ? (
+          <Menu
+            title={t("action.edit")}
+            showTitle={false}
+            open={menuOpen}
+            onOpenChange={setMenuOpen}
+            trigger={
+              <Button
+                iconOnly
+                Icon={EditIcon}
+                kind="tertiary"
+                size="sm"
+                aria-label={t("action.edit")}
+              />
+            }
          >
-            {t("action.remove")}
-          </Button>
+            <MenuItem
+              Icon={ShareIcon}
+              label={t("action.upload_file")}
+              onSelect={onSelectUpload}
+            />
+            <MenuItem
+              Icon={DeleteIcon}
+              label={t("action.remove")}
+              kind="critical"
+              onSelect={onSelectRemove}
+            />
+          </Menu>
+        ) : (
+          <Button
+            type="button"
+            iconOnly
+            Icon={EditIcon}
+            kind="tertiary"
+            size="sm"
+            aria-label={t("action.edit")}
+            onClick={onSelectUpload}
+          />
        )}
      </div>
-    );
-  },
-);
+    </div>
+  );
+};

 AvatarInputField.displayName = "AvatarInputField";
--- a/src/input/SelectInput.module.css
+++ b/src/input/SelectInput.module.css
@@ -1,60 +0,0 @@
-/*
-Copyright 2022 New Vector Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-.selectInput {
-  position: relative;
-  display: inline-block;
-  margin-bottom: 28px;
-  max-width: 444px;
-}
-
-.label {
-  margin-top: 0;
-  margin-bottom: 12px;
-}
-
-.selectTrigger {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 12px;
-  background-color: var(--cpd-color-bg-canvas-default);
-  border-radius: 8px;
-  border: 1px solid var(--cpd-color-border-interactive-primary);
-  font-size: var(--font-size-body);
-  color: var(--cpd-color-text-primary);
-  height: 40px;
-  max-width: 100%;
-  width: 100%;
-}
-
-.selectTrigger:focus {
-  outline: auto;
-}
-
-.selectedItem {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  padding-right: 20px;
-}
-
-.popover {
-  position: absolute;
-  margin-top: 5px;
-  width: 100%;
-  z-index: 1;
-}
--- a/src/input/SelectInput.tsx
+++ b/src/input/SelectInput.tsx
@@ -1,80 +0,0 @@
-/*
-Copyright 2022 New Vector Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import { useRef } from "react";
-import { AriaSelectOptions, HiddenSelect, useSelect } from "@react-aria/select";
-import { useButton } from "@react-aria/button";
-import { useSelectState } from "@react-stately/select";
-import classNames from "classnames";
-import { useTranslation } from "react-i18next";
-
-import { Popover } from "../popover/Popover";
-import { ListBox } from "../ListBox";
-import styles from "./SelectInput.module.css";
-import ArrowDownIcon from "../icons/ArrowDown.svg?react";
-
-interface Props extends AriaSelectOptions<object> {
-  className?: string;
-}
-
-export function SelectInput(props: Props): JSX.Element {
-  const { t } = useTranslation();
-  const state = useSelectState(props);
-
-  const ref = useRef(null);
-  const { labelProps, triggerProps, valueProps, menuProps } = useSelect(
-    props,
-    state,
-    ref,
-  );
-
-  const { buttonProps } = useButton(triggerProps, ref);
-
-  return (
-    <div className={classNames(styles.selectInput, props.className)}>
-      <h4 {...labelProps} className={styles.label}>
-        {props.label}
-      </h4>
-      <HiddenSelect
-        state={state}
-        triggerRef={ref}
-        label={props.label}
-        name={props.name}
-      />
-      <button {...buttonProps} ref={ref} className={styles.selectTrigger}>
-        <span {...valueProps} className={styles.selectedItem}>
-          {state.selectedItem
-            ? state.selectedItem.rendered
-            : t("select_input_unset_button")}
-        </span>
-        <ArrowDownIcon />
-      </button>
-      {state.isOpen && (
-        <Popover
-          isOpen={state.isOpen}
-          onClose={state.close}
-          className={styles.popover}
-        >
-          <ListBox
-            {...menuProps}
-            state={state}
-            optionClassName={styles.option}
-          />
-        </Popover>
-      )}
-    </div>
-  );
-}
--- a/src/livekit/LivekitFocus.ts
+++ b/src/livekit/LivekitFocus.ts
--- a/src/livekit/openIDSFU.ts
+++ b/src/livekit/openIDSFU.ts
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-import { IOpenIDToken, MatrixClient } from "matrix-js-sdk";
+import { IOpenIDToken, MatrixClient } from "matrix-js-sdk/src/matrix";
 import { logger } from "matrix-js-sdk/src/logger";
 import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";
 import { useEffect, useState } from "react";
--- a/src/otel/OTelCall.ts
+++ b/src/otel/OTelCall.ts
@@ -15,7 +15,7 @@ limitations under the License.
 */

 import { Span } from "@opentelemetry/api";
-import { MatrixCall } from "matrix-js-sdk";
+import { MatrixCall } from "matrix-js-sdk/src/matrix";
 import { CallEvent } from "matrix-js-sdk/src/webrtc/call";
 import {
  TransceiverStats,
--- a/src/otel/OTelGroupCallMembership.ts
+++ b/src/otel/OTelGroupCallMembership.ts
@@ -20,7 +20,7 @@ import {
  MatrixClient,
  MatrixEvent,
  RoomMember,
-} from "matrix-js-sdk";
+} from "matrix-js-sdk/src/matrix";
 import { logger } from "matrix-js-sdk/src/logger";
 import {
  CallError,
--- a/test/otel/ObjectFlattener-test.ts
+++ b/test/otel/ObjectFlattener-test.ts
@@ -1,9 +1,27 @@
+/*
+Copyright 2024 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
 import { GroupCallStatsReport } from "matrix-js-sdk/src/webrtc/groupCall";
 import {
  AudioConcealment,
  ByteSentStatsReport,
  ConnectionStatsReport,
 } from "matrix-js-sdk/src/webrtc/stats/statsReport";
+import { describe, expect, it } from "vitest";
+
 import { ObjectFlattener } from "../../src/otel/ObjectFlattener";

 /*
--- a/src/popover/Popover.module.css
+++ b/src/popover/Popover.module.css
@@ -1,24 +0,0 @@
-/*
-Copyright 2022 New Vector Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-.popover {
-  display: flex;
-  flex-direction: column;
-  width: 194px;
-  background: var(--cpd-color-bg-subtle-secondary);
-  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
-  border-radius: 8px;
-}
--- a/src/popover/Popover.tsx
+++ b/src/popover/Popover.tsx
@@ -1,62 +0,0 @@
-/*
-Copyright 2022 New Vector Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import { forwardRef, HTMLAttributes } from "react";
-import { DismissButton, useOverlay } from "@react-aria/overlays";
-import { FocusScope } from "@react-aria/focus";
-import classNames from "classnames";
-import { useObjectRef } from "@react-aria/utils";
-
-import styles from "./Popover.module.css";
-
-interface Props extends HTMLAttributes<HTMLDivElement> {
-  isOpen: boolean;
-  onClose: () => void;
-  className?: string;
-  children?: JSX.Element;
-}
-
-export const Popover = forwardRef<HTMLDivElement, Props>(
-  ({ isOpen = true, onClose, className, children, ...rest }, ref) => {
-    const popoverRef = useObjectRef(ref);
-
-    const { overlayProps } = useOverlay(
-      {
-        isOpen,
-        onClose,
-        shouldCloseOnBlur: true,
-        isDismissable: true,
-      },
-      popoverRef,
-    );
-
-    return (
-      <FocusScope restoreFocus>
-        <div
-          {...overlayProps}
-          {...rest}
-          className={classNames(styles.popover, className)}
-          ref={popoverRef}
-        >
-          {children}
-          <DismissButton onDismiss={onClose} />
-        </div>
-      </FocusScope>
-    );
-  },
-);
-
-Popover.displayName = "Popover";
--- a/src/popover/PopoverMenu.module.css
+++ b/src/popover/PopoverMenu.module.css
@@ -1,20 +0,0 @@
-/*
-Copyright 2022 New Vector Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-.popoverMenuTrigger {
-  position: relative;
-  display: inline-block;
-}
--- a/src/popover/PopoverMenu.tsx
+++ b/src/popover/PopoverMenu.tsx
@@ -1,98 +0,0 @@
-/*
-Copyright 2022 New Vector Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import { forwardRef, useRef } from "react";
-import { useMenuTriggerState } from "@react-stately/menu";
-import { useMenuTrigger } from "@react-aria/menu";
-import { OverlayContainer, useOverlayPosition } from "@react-aria/overlays";
-import { mergeProps, useObjectRef } from "@react-aria/utils";
-import classNames from "classnames";
-import { MenuTriggerProps } from "@react-types/menu";
-import { Placement } from "@react-types/overlays";
-
-import styles from "./PopoverMenu.module.css";
-import { Popover } from "./Popover";
-
-interface PopoverMenuTriggerProps extends MenuTriggerProps {
-  children: JSX.Element;
-  placement: Placement;
-  className: string;
-  disableOnState: boolean;
-  [index: string]: unknown;
-}
-
-export const PopoverMenuTrigger = forwardRef<
-  HTMLDivElement,
-  PopoverMenuTriggerProps
->(({ children, placement, className, disableOnState, ...rest }, ref) => {
-  const popoverMenuState = useMenuTriggerState(rest);
-  const buttonRef = useObjectRef(ref);
-  const { menuTriggerProps, menuProps } = useMenuTrigger(
-    {},
-    popoverMenuState,
-    buttonRef,
-  );
-
-  const popoverRef = useRef(null);
-
-  const { overlayProps } = useOverlayPosition({
-    targetRef: buttonRef,
-    overlayRef: popoverRef,
-    placement: placement || "top",
-    offset: 5,
-    isOpen: popoverMenuState.isOpen,
-  });
-
-  if (
-    !Array.isArray(children) ||
-    children.length > 2 ||
-    typeof children[1] !== "function"
-  ) {
-    throw new Error(
-      "PopoverMenu must have two props. The first being a button and the second being a render prop.",
-    );
-  }
-
-  const [popoverTrigger, popoverMenu] = children;
-
-  return (
-    <div className={classNames(styles.popoverMenuTrigger, className)}>
-      <popoverTrigger.type
-        {...mergeProps(popoverTrigger.props, menuTriggerProps)}
-        on={!disableOnState && popoverMenuState.isOpen}
-        ref={buttonRef}
-      />
-      {popoverMenuState.isOpen && (
-        <OverlayContainer>
-          <Popover
-            {...overlayProps}
-            isOpen={popoverMenuState.isOpen}
-            onClose={popoverMenuState.close}
-            ref={popoverRef}
-          >
-            {popoverMenu({
-              ...menuProps,
-              autoFocus: popoverMenuState.focusStrategy,
-              onClose: popoverMenuState.close,
-            })}
-          </Popover>
-        </OverlayContainer>
-      )}
-    </div>
-  );
-});
-
-PopoverMenuTrigger.displayName = "PopoverMenuTrigger";
--- a/src/room/AppSelectionModal.tsx
+++ b/src/room/AppSelectionModal.tsx
@@ -22,7 +22,7 @@ import { logger } from "matrix-js-sdk/src/logger";

 import { Modal } from "../Modal";
 import { useRoomEncryptionSystem } from "../e2ee/sharedKeyManagement";
-import { getAbsoluteRoomUrl } from "../matrix-utils";
+import { getAbsoluteRoomUrl } from "../utils/matrix";
 import styles from "./AppSelectionModal.module.css";
 import { editFragmentQuery } from "../UrlParams";
 import { E2eeType } from "../e2ee/e2eeType";
--- a/src/room/CallEndedView.module.css
+++ b/src/room/CallEndedView.module.css
@@ -42,9 +42,8 @@ limitations under the License.
 }

 .callEndedButton {
+  margin: auto;
  margin-top: 54px;
-  margin-left: 30px;
-  margin-right: 30px !important;
 }

 .submitButton {
--- a/src/room/CallEndedView.tsx
+++ b/src/room/CallEndedView.tsx
@@ -18,17 +18,19 @@ import { FC, FormEventHandler, ReactNode, useCallback, useState } from "react";
 import { MatrixClient } from "matrix-js-sdk/src/client";
 import { Trans, useTranslation } from "react-i18next";
 import { useHistory } from "react-router-dom";
+import { Button } from "@vector-im/compound-web";

 import styles from "./CallEndedView.module.css";
 import feedbackStyle from "../input/FeedbackInput.module.css";
-import { Button, LinkButton } from "../button";
 import { useProfile } from "../profile/useProfile";
-import { Body, Link, Headline } from "../typography/Typography";
+import { Body, Headline } from "../typography/Typography";
 import { Header, HeaderLogo, LeftNav, RightNav } from "../Header";
 import { PosthogAnalytics } from "../analytics/PosthogAnalytics";
 import { FieldRow, InputField } from "../input/Input";
 import { StarRatingInput } from "../input/StarRatingInput";
 import { RageshakeButton } from "../settings/RageshakeButton";
+import { Link } from "../button/Link";
+import { LinkButton } from "../button";

 interface Props {
  client: MatrixClient;
@@ -95,12 +97,7 @@ export const CallEndedView: FC<Props> = ({
          calls
        </p>
      </Trans>
-      <LinkButton
-        className={styles.callEndedButton}
-        size="lg"
-        variant="default"
-        to="/register"
-      >
+      <LinkButton className={styles.callEndedButton} to="/register">
        {t("call_ended_view.create_account_button")}
      </LinkButton>
    </div>
@@ -136,8 +133,6 @@ export const CallEndedView: FC<Props> = ({
            <Button
              type="submit"
              className={styles.submitButton}
-              size="lg"
-              variant="default"
              data-testid="home_go"
            >
              {submitting ? t("submitting") : t("action.submit")}
@@ -159,7 +154,7 @@ export const CallEndedView: FC<Props> = ({
              </Trans>
            </Headline>
            <div className={styles.disconnectedButtons}>
-              <Button size="lg" variant="default" onClick={reconnect}>
+              <Button onClick={reconnect}>
                {t("call_ended_view.reconnect_button")}
              </Button>
              <div className={styles.rageshakeButton}>
@@ -169,9 +164,7 @@ export const CallEndedView: FC<Props> = ({
          </main>
          {!confineToRoom && (
            <Body className={styles.footer}>
-              <Link color="primary" to="/">
-                {t("return_home_button")}
-              </Link>
+              <Link to="/"> {t("return_home_button")} </Link>
            </Body>
          )}
        </>
@@ -198,9 +191,7 @@ export const CallEndedView: FC<Props> = ({
          </main>
          {!confineToRoom && (
            <Body className={styles.footer}>
-              <Link color="primary" to="/">
-                {t("call_ended_view.not_now_button")}
-              </Link>
+              <Link to="/"> {t("call_ended_view.not_now_button")} </Link>
            </Body>
          )}
        </>
--- a/src/room/GroupCallLoader.tsx
+++ b/src/room/GroupCallLoader.tsx
@@ -17,7 +17,7 @@ limitations under the License.
 import { useCallback } from "react";
 import { MatrixClient } from "matrix-js-sdk/src/client";
 import { useTranslation } from "react-i18next";
-import { MatrixError } from "matrix-js-sdk";
+import { MatrixError } from "matrix-js-sdk/src/matrix";
 import { useHistory } from "react-router-dom";
 import { Heading, Link, Text } from "@vector-im/compound-web";

--- a/src/room/GroupCallView.tsx
+++ b/src/room/GroupCallView.tsx
@@ -35,7 +35,7 @@ import { MatrixInfo } from "./VideoPreview";
 import { CallEndedView } from "./CallEndedView";
 import { PosthogAnalytics } from "../analytics/PosthogAnalytics";
 import { useProfile } from "../profile/useProfile";
-import { findDeviceByName } from "../media-utils";
+import { findDeviceByName } from "../utils/media";
 import { ActiveCall } from "./InCallView";
 import { MUTE_PARTICIPANT_COUNT, MuteStates } from "./MuteStates";
 import { useMediaDevices, MediaDevices } from "../livekit/MediaDevicesContext";
--- a/src/room/InCallView.module.css
+++ b/src/room/InCallView.module.css
@@ -19,6 +19,7 @@ limitations under the License.
  flex-direction: column;
  height: 100%;
  width: 100%;
+  overflow-x: hidden;
  overflow-y: auto;
 }

@@ -57,6 +58,10 @@ limitations under the License.
  );
 }

+.footer.hidden {
+  display: none;
+}
+
 .footer.overlay {
  position: absolute;
  inset-block-end: 0;
@@ -66,6 +71,7 @@ limitations under the License.
 }

 .footer.overlay.hidden {
+  display: grid;
  opacity: 0;
  pointer-events: none;
 }
--- a/src/room/InCallView.tsx
+++ b/src/room/InCallView.tsx
@@ -19,7 +19,6 @@ import {
  RoomContext,
  useLocalParticipant,
 } from "@livekit/components-react";
-import { usePreventScroll } from "@react-aria/overlays";
 import { ConnectionState, Room } from "livekit-client";
 import { MatrixClient } from "matrix-js-sdk/src/client";
 import {
@@ -44,10 +43,10 @@ import LogoMark from "../icons/LogoMark.svg?react";
 import LogoType from "../icons/LogoType.svg?react";
 import type { IWidgetApiRequest } from "matrix-widget-api";
 import {
-  HangupButton,
+  EndCallButton,
  MicButton,
  VideoButton,
-  ScreenshareButton,
+  ShareScreenButton,
  SettingsButton,
 } from "../button";
 import { Header, LeftNav, RightNav, RoomHeaderInfo } from "../Header";
@@ -69,7 +68,7 @@ import { InviteButton } from "../button/InviteButton";
 import { LayoutToggle } from "./LayoutToggle";
 import { ECConnectionState } from "../livekit/useECConnectionState";
 import { useOpenIDSFU } from "../livekit/openIDSFU";
-import { GridMode, Layout, useCallViewModel } from "../state/CallViewModel";
+import { CallViewModel, GridMode, Layout } from "../state/CallViewModel";
 import { Grid, TileProps } from "../grid/Grid";
 import { useObservable } from "../state/useObservable";
 import { useInitial } from "../useInitial";
@@ -93,7 +92,7 @@ const canScreenshare = "getDisplayMedia" in (navigator.mediaDevices ?? {});
 const maxTapDurationMs = 400;

 export interface ActiveCallProps
-  extends Omit<InCallViewProps, "livekitRoom" | "connState"> {
+  extends Omit<InCallViewProps, "vm" | "livekitRoom" | "connState"> {
  e2eeSystem: EncryptionSystem;
 }

@@ -105,6 +104,8 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
    sfuConfig,
    props.e2eeSystem,
  );
+  const connStateObservable = useObservable(connState);
+  const [vm, setVm] = useState<CallViewModel | null>(null);

  useEffect(() => {
    return (): void => {
@@ -113,17 +114,41 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

-  if (!livekitRoom) return null;
+  useEffect(() => {
+    if (livekitRoom !== undefined) {
+      const vm = new CallViewModel(
+        props.rtcSession.room,
+        livekitRoom,
+        props.e2eeSystem.kind !== E2eeType.NONE,
+        connStateObservable,
+      );
+      setVm(vm);
+      return (): void => vm.destroy();
+    }
+  }, [
+    props.rtcSession.room,
+    livekitRoom,
+    props.e2eeSystem.kind,
+    connStateObservable,
+  ]);
+
+  if (livekitRoom === undefined || vm === null) return null;

  return (
    <RoomContext.Provider value={livekitRoom}>
-      <InCallView {...props} livekitRoom={livekitRoom} connState={connState} />
+      <InCallView
+        {...props}
+        vm={vm}
+        livekitRoom={livekitRoom}
+        connState={connState}
+      />
    </RoomContext.Provider>
  );
 };

 export interface InCallViewProps {
  client: MatrixClient;
+  vm: CallViewModel;
  matrixInfo: MatrixInfo;
  rtcSession: MatrixRTCSession;
  livekitRoom: Room;
@@ -138,6 +163,7 @@ export interface InCallViewProps {

 export const InCallView: FC<InCallViewProps> = ({
  client,
+  vm,
  matrixInfo,
  rtcSession,
  livekitRoom,
@@ -148,7 +174,6 @@ export const InCallView: FC<InCallViewProps> = ({
  connState,
  onShareClick,
 }) => {
-  usePreventScroll();
  useWakeLock();

  useEffect(() => {
@@ -193,12 +218,6 @@ export const InCallView: FC<InCallViewProps> = ({
  const reducedControls = boundsValid && bounds.width <= 340;
  const noControls = reducedControls && bounds.height <= 400;

-  const vm = useCallViewModel(
-    rtcSession.room,
-    livekitRoom,
-    matrixInfo.e2eeSystem.kind !== E2eeType.NONE,
-    connState,
-  );
  const windowMode = useObservableEagerState(vm.windowMode);
  const layout = useObservableEagerState(vm.layout);
  const gridMode = useObservableEagerState(vm.gridMode);
@@ -471,14 +490,14 @@ export const InCallView: FC<InCallViewProps> = ({
      <MicButton
        key="1"
        muted={!muteStates.audio.enabled}
-        onPress={toggleMicrophone}
+        onClick={toggleMicrophone}
        disabled={muteStates.audio.setEnabled === null}
        data-testid="incall_mute"
      />,
      <VideoButton
        key="2"
        muted={!muteStates.video.enabled}
-        onPress={toggleCamera}
+        onClick={toggleCamera}
        disabled={muteStates.video.setEnabled === null}
        data-testid="incall_videomute"
      />,
@@ -486,21 +505,21 @@ export const InCallView: FC<InCallViewProps> = ({
    if (!reducedControls) {
      if (canScreenshare && !hideScreensharing) {
        buttons.push(
-          <ScreenshareButton
+          <ShareScreenButton
            key="3"
            enabled={isScreenShareEnabled}
-            onPress={toggleScreensharing}
+            onClick={toggleScreensharing}
            data-testid="incall_screenshare"
          />,
        );
      }
-      buttons.push(<SettingsButton key="4" onPress={openSettings} />);
+      buttons.push(<SettingsButton key="4" onClick={openSettings} />);
    }

    buttons.push(
-      <HangupButton
+      <EndCallButton
        key="6"
-        onPress={function (): void {
+        onClick={function (): void {
          onLeave();
        }}
        data-testid="incall_leave"
--- a/src/room/InviteModal.module.css
+++ b/src/room/InviteModal.module.css
@@ -24,3 +24,12 @@ limitations under the License.
 .button {
  width: 100%;
 }
+
+.qrCode {
+  display: flex;
+  justify-content: center;
+}
+
+.qrCode img {
+  margin-block-end: var(--cpd-space-8x);
+}
--- a/src/room/InviteModal.tsx
+++ b/src/room/InviteModal.tsx
@@ -16,7 +16,7 @@ limitations under the License.

 import { FC, MouseEvent, useCallback, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Room } from "matrix-js-sdk";
+import { Room } from "matrix-js-sdk/src/matrix";
 import { Button, Text } from "@vector-im/compound-web";
 import {
  LinkIcon,
@@ -25,10 +25,11 @@ import {
 import useClipboard from "react-use-clipboard";

 import { Modal } from "../Modal";
-import { getAbsoluteRoomUrl } from "../matrix-utils";
+import { getAbsoluteRoomUrl } from "../utils/matrix";
 import styles from "./InviteModal.module.css";
 import { Toast } from "../Toast";
 import { useRoomEncryptionSystem } from "../e2ee/sharedKeyManagement";
+import { QrCode } from "../QrCode";

 interface Props {
  room: Room;
@@ -61,6 +62,7 @@ export const InviteModal: FC<Props> = ({ room, open, onDismiss }) => {
  return (
    <>
      <Modal title={t("invite_modal.title")} open={open} onDismiss={onDismiss}>
+        <QrCode className={styles.qrCode} data={url} />
        <Text className={styles.url} size="sm" weight="semibold">
          {url}
        </Text>
--- a/src/room/LayoutToggle.module.css
+++ b/src/room/LayoutToggle.module.css
@@ -19,7 +19,6 @@ limitations under the License.
  border: 1px solid var(--cpd-color-border-interactive-secondary);
  border-radius: var(--cpd-radius-pill-effect);
  background: var(--cpd-color-bg-canvas-default);
-  box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.5);
  display: flex;
  position: relative;
 }
@@ -32,9 +31,9 @@ limitations under the License.
  inline-size: var(--cpd-space-11x);
  cursor: pointer;
  border-radius: var(--cpd-radius-pill-effect);
-  color: var(--cpd-color-icon-primary);
  background: var(--cpd-color-bg-action-secondary-rest);
  box-shadow: var(--small-drop-shadow);
+  transition: background-color 0.1s;
 }

 .toggle svg {
@@ -43,6 +42,7 @@ limitations under the License.
  padding: calc(2.5 * var(--cpd-space-1x));
  pointer-events: none;
  color: var(--cpd-color-icon-primary);
+  transition: color 0.1s;
 }

 .toggle svg:nth-child(2) {
@@ -61,7 +61,7 @@ limitations under the License.
 }

 .toggle input:active {
-  background: var(--cpd-color-bg-action-secondary-hovered);
+  background: var(--cpd-color-bg-action-secondary-pressed);
  box-shadow: none;
 }

@@ -80,7 +80,7 @@ limitations under the License.
 }

 .toggle input:checked:active {
-  background: var(--cpd-color-bg-action-primary-hovered);
+  background: var(--cpd-color-bg-action-primary-pressed);
 }

 .toggle input:first-child {
--- a/src/room/LobbyView.tsx
+++ b/src/room/LobbyView.tsx
@@ -17,7 +17,7 @@ limitations under the License.
 import { FC, useCallback, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { MatrixClient } from "matrix-js-sdk/src/matrix";
-import { Button, Link } from "@vector-im/compound-web";
+import { Button } from "@vector-im/compound-web";
 import classNames from "classnames";
 import { useHistory } from "react-router-dom";

@@ -29,7 +29,7 @@ import { MatrixInfo, VideoPreview } from "./VideoPreview";
 import { MuteStates } from "./MuteStates";
 import { InviteButton } from "../button/InviteButton";
 import {
-  HangupButton,
+  EndCallButton,
  MicButton,
  SettingsButton,
  VideoButton,
@@ -37,6 +37,7 @@ import {
 import { SettingsModal, defaultSettingsTab } from "../settings/SettingsModal";
 import { useMediaQuery } from "../useMediaQuery";
 import { E2eeType } from "../e2ee/e2eeType";
+import { Link } from "../button/Link";

 interface Props {
  client: MatrixClient;
@@ -92,7 +93,7 @@ export const LobbyView: FC<Props> = ({

  const recentsButtonInFooter = useMediaQuery("(max-height: 500px)");
  const recentsButton = !confineToRoom && (
-    <Link className={styles.recents} href="#" onClick={onLeaveClick}>
+    <Link className={styles.recents} to="/">
      {t("lobby.leave_button")}
    </Link>
  );
@@ -140,16 +141,16 @@ export const LobbyView: FC<Props> = ({
          <div className={inCallStyles.buttons}>
            <MicButton
              muted={!muteStates.audio.enabled}
-              onPress={onAudioPress}
+              onClick={onAudioPress}
              disabled={muteStates.audio.setEnabled === null}
            />
            <VideoButton
              muted={!muteStates.video.enabled}
-              onPress={onVideoPress}
+              onClick={onVideoPress}
              disabled={muteStates.video.setEnabled === null}
            />
-            <SettingsButton onPress={openSettings} />
-            {!confineToRoom && <HangupButton onPress={onLeaveClick} />}
+            <SettingsButton onClick={openSettings} />
+            {!confineToRoom && <EndCallButton onClick={onLeaveClick} />}
          </div>
        </div>
      </div>
--- a/src/room/RageshakeRequestModal.tsx
+++ b/src/room/RageshakeRequestModal.tsx
@@ -16,9 +16,9 @@ limitations under the License.

 import { FC, useEffect } from "react";
 import { useTranslation } from "react-i18next";
+import { Button } from "@vector-im/compound-web";

 import { Modal, Props as ModalProps } from "../Modal";
-import { Button } from "../button";
 import { FieldRow, ErrorMessage } from "../input/Input";
 import { useSubmitRageshake } from "../settings/submit-rageshake";
 import { Body } from "../typography/Typography";
@@ -52,7 +52,7 @@ export const RageshakeRequestModal: FC<Props> = ({
      <Body>{t("rageshake_request_modal.body")}</Body>
      <FieldRow>
        <Button
-          onPress={(): void =>
+          onClick={(): void =>
            void submitRageshake({
              sendLogs: true,
              rageshakeRequestId,
--- a/src/room/RoomAuthView.tsx
+++ b/src/room/RoomAuthView.tsx
@@ -18,9 +18,9 @@ import { FC, useCallback, useState } from "react";
 import { useLocation } from "react-router-dom";
 import { Trans, useTranslation } from "react-i18next";
 import { logger } from "matrix-js-sdk/src/logger";
+import { Button } from "@vector-im/compound-web";

 import styles from "./RoomAuthView.module.css";
-import { Button } from "../button";
 import { Body, Caption, Link, Headline } from "../typography/Typography";
 import { Header, HeaderLogo, LeftNav, RightNav } from "../Header";
 import { FieldRow, InputField, ErrorMessage } from "../input/Input";
@@ -117,7 +117,7 @@ export const RoomAuthView: FC = () => {
            Not registered yet?{" "}
            <Link
              color="primary"
-              to={{ pathname: "/login", state: { from: location } }}
+              to={{ pathname: "/register", state: { from: location } }}
            >
              Create an account
            </Link>
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
fkwp	5f8081bebb	Merge pull request #2602 from Johennes/johannes/qr Display QR code when sharing invite link	2024-09-02 18:56:42 +02:00
Johannes Marbach	12237c469f	Update src/QrCode.module.css Co-authored-by: Timo <16718859+toger5@users.noreply.github.com>	2024-09-02 17:52:01 +02:00
renovate[bot]	7ee3fbd832	Update all non-major dependencies (#2600 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2024-09-02 17:48:56 +02:00
Timo	040288790c	Fix (rust crypto): Adjust login procedures to account for rust crypto behaviour. (#2603 ) * Fix for missing client store (caused by: #2587) * Fix interactive login with authenticated guest user. Fix clearing storage before logging in a new account.	2024-09-02 17:48:15 +02:00
Johannes Marbach	cba5eb5c07	Run prettier	2024-09-02 16:30:37 +02:00
Johannes Marbach	6ae0c0988d	Add simplistic rendering test	2024-09-02 16:28:53 +02:00
Johannes Marbach	088d4d93a0	Re-add types package	2024-09-02 09:10:42 +02:00
fkwp	ead5f63a02	Merge pull request #2599 from element-hq/renovate/github-actions Update actions/upload-artifact action to v4.4.0	2024-09-02 09:07:57 +02:00
Johannes Marbach	8655b41c05	Run prettier	2024-09-02 08:44:33 +02:00
Johannes Marbach	5b09a5ebd8	Merge branch 'livekit' into johannes/qr	2024-09-02 08:40:15 +02:00
Johannes Marbach	354382d498	Display QR code when sharing invite link Fixes: #2495 Signed-off-by: Johannes Marbach <n0-0ne+github@mailbox.org>	2024-09-02 08:25:10 +02:00
renovate[bot]	fa6b8b3f0b	Update actions/upload-artifact action to v4.4.0	2024-09-01 00:30:19 +00:00
Timo	3e57a7692c	Add back keyboard toast tests (#2582 ) * Fix global-jsdom initialization * add back toast tests * fix keyboard input events. * add jsdom types	2024-08-30 15:40:09 +02:00
Robin	e9fc5dadd9	Merge pull request #2594 from robintown/upgrade-compound Upgrade Compound Web	2024-08-30 09:38:17 -04:00
Andrew Ferrazzutti	86bacd2b47	Depend on a tagged js-sdk release (#2593 ) which is possible since: - matrix-org/matrix-js-sdk@ee94e9335 - element-hq/element-call@b79a405e	2024-08-30 09:37:15 -04:00
Robin	cb28fa715a	Upgrade Compound Web	2024-08-30 09:35:34 -04:00
Timo	172af1dce3	Add missing productName string (#2596 )	2024-08-30 15:29:14 +02:00
Timo	270540f125	Update README.md (#2589 )	2024-08-30 15:07:15 +02:00
Andrew Ferrazzutti	0974488c4e	Make one more js-sdk import consistent (#2595 ) Update an import that was missed in `b79a405e`	2024-08-30 08:57:15 -04:00
Timo	a2dd538237	Fix for missing client store (caused by: #2587 ) (#2591 )	2024-08-30 11:28:00 +02:00
Richard van der Hoff	b79a405ed6	Make js-sdk imports consistent (#2590 ) We need to be consistent about whether we import matrix-js-sdk from `src` or `lib`, otherwise we get two copies of matrix-js-sdk, and everything explodes.	2024-08-29 12:37:52 -04:00
Timo	159ae603aa	Remove shadow for layout switcher. (#2588 )	2024-08-29 17:59:28 +02:00
Timo	559fc4851c	Fix rust crypto: dont use legacy crypto store anymore. (#2587 ) The logic for the legacy store was intercepting with the rustCrypto that handles all the cases itself.	2024-08-29 16:59:47 +02:00
Robin	0db51d9dfd	Replace remaining React ARIA components with Compound components (#2576 ) * Fix issues detected by Knip Including cleaning up some unused code and dependencies, using a React hook that we unintentionally stopped using, and also adding some previously undeclared dependencies. * Replace remaining React ARIA components with Compound components * fix button position * disable scrollbars to resolve overlapping button --------- Co-authored-by: Timo <toger5@hotmail.de>	2024-08-28 14:44:39 +02:00
Robin	7bca541cb6	Perform dead code analysis with Knip (#2575 ) * Install Knip * Clarify an import that was confusing Knip * Fix issues detected by Knip Including cleaning up some unused code and dependencies, using a React hook that we unintentionally stopped using, and also adding some previously undeclared dependencies. * Run dead code analysis in lint script and CI --------- Co-authored-by: Timo <toger5@hotmail.de>	2024-08-28 02:06:57 +02:00
fkwp	51ae4c0a88	Merge pull request #2585 from element-hq/fkwp/fix_codecov set codecov token from secrets	2024-08-27 21:26:19 +02:00
fkwp	6521c8055c	set codecov token from secrets	2024-08-27 21:22:16 +02:00
Johannes Marbach	7e3e17a3e8	Link "Create an account" button to registration page (#2583 ) Fixes: #2328 Signed-off-by: Johannes Marbach <n0-0ne+github@mailbox.org>	2024-08-27 15:55:38 +02:00
Robin	5eaabcf74d	Clean up our tests in preparation for the testing sprint (#2466 ) * Fix coverage reporting Codecov hasn't been working recently because Vitest doesn't report coverage by default. * Suppress some noisy log lines Closes https://github.com/element-hq/element-call/issues/686 * Store test files alongside source files This way we benefit from not having to maintain the same directory structure twice, and our linters etc. will actually lint test files by default. * Stop using Vitest globals Vitest provides globals primarily to make the transition from Jest more smooth. But importing its functions explicitly is considered a better pattern, and we have so few tests right now that it's trivial to migrate them all. * Remove Storybook directory We no longer use Storybook. * Configure Codecov Add a coverage gate for all new changes and disable its comments. * upgrade vitest --------- Co-authored-by: Timo <toger5@hotmail.de>	2024-08-27 15:45:39 +02:00
Robin	3a754479dc	Add simple global controls to put the call in picture-in-picture mode (#2573 ) * Stop sharing state observables when the view model is destroyed By default, observables running with shareReplay will continue running forever even if there are no subscribers. We need to stop them when the view model is destroyed to avoid memory leaks and other unintuitive behavior. * Hydrate the call view model in a less hacky way This ensures that only a single view model is created per call, unlike the previous solution which would create extra view models in strict mode which it was unable to dispose of. The other way was invalid because React gives us no way to reliably dispose of a resource created in the render phase. This is essentially a memory leak fix. * Add simple global controls to put the call in picture-in-picture mode Our web and mobile apps (will) all support putting calls into a picture-in-picture mode. However, it'd be nice to have a way of doing this that's more explicit than a breakpoint, because PiP views could in theory get fairly large. Specifically, on mobile, we want a way to do this that can tell you whether the call is ongoing, and that works even without the widget API (because we support SPA calls in the Element X apps…) To this end, I've created a simple global "controls" API on the window. Right now it only has methods for controlling the picture-in-picture state, but in theory we can expand it to also control mute states, which is current possible via the widget API only. * Fix footer appearing in large PiP views * Add a method for whether you can enter picture-in-picture mode * Have the controls emit booleans directly	2024-08-27 13:47:20 +02:00
renovate[bot]	0e3113edcd	Update dependency jsdom to v25 (#2580 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2024-08-26 14:44:15 +02:00
renovate[bot]	6432dca518	Update all non-major dependencies (#2581 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2024-08-26 10:44:15 +02:00
Robin	995b4c8847	Merge pull request #2577 from element-hq/renovate/compound Update dependency @vector-im/compound-web to v6.1.0	2024-08-23 13:03:51 -04:00
Robin	b8774ad682	Merge pull request #2578 from robintown/spotlight-buttons Fix spotlight tile regressions	2024-08-23 12:38:38 -04:00
Robin	30a54f3795	Fix spotlight tile regressions The buttons were scrolling with the view instead of always being visible in a fixed location on the tile, and the indicators were not adopting the correct width.	2024-08-23 12:31:16 -04:00
Robin	66b79f57bb	Merge pull request #2571 from element-hq/hughns/rust-crypto Use Rust crypto implementation	2024-08-23 11:18:43 -04:00
renovate[bot]	a6f6db9226	Update dependency @vector-im/compound-web to v6.1.0	2024-08-23 01:00:13 +00:00
Robin	61a24262de	Merge pull request #2570 from element-hq/renovate/all-minor-patch Update all non-major dependencies	2024-08-20 13:41:49 -04:00
renovate[bot]	0955d7bcc3	Update all non-major dependencies	2024-08-20 17:40:09 +00:00
Hugh Nimmo-Smith	36ce21d7ac	Show crypto version in developer settings	2024-08-19 10:40:09 +01:00
Hugh Nimmo-Smith	eddc590235	Use rust crypto Taken from `d25cf28d00`	2024-08-19 10:27:46 +01:00
Robin	61bc4dcc14	Merge pull request #2569 from robintown/horizontal-overflow Fix long call names overflowing the interface	2024-08-16 16:41:15 -04:00
Robin	e2c4eae67b	Make sure that the call interface can't scroll horizontally	2024-08-16 15:16:33 -04:00
Robin	1da3fe0731	Fix long call names overflowing the interface They are now properly truncated with an ellipsis.	2024-08-16 15:15:51 -04:00
Hugh Nimmo-Smith	f562cc1e7f	Show user's Matrix ID and device ID in developer settings tab (#2559 )	2024-08-16 15:37:57 +01:00
Hugh Nimmo-Smith	69b762b9ed	Bump js-sdk for sender key reliability improvements (#2567 ) Diff from current version: `9176d3a671...467908703b`	2024-08-15 11:49:19 +02:00
fkwp	ff55b1d189	Merge pull request #2564 from element-hq/renovate/livekit-client Update dependency livekit-client to v2.5.0	2024-08-14 17:08:56 +02:00
fkwp	d796ebe3fa	Merge pull request #2565 from element-hq/renovate/github-actions Update docker/build-push-action action to v6.7.0	2024-08-14 17:08:16 +02:00
renovate[bot]	b4bc41ba02	Update docker/build-push-action action to v6.7.0	2024-08-14 15:07:05 +00:00
renovate[bot]	a072dfae9c	Update dependency livekit-client to v2.5.0	2024-08-14 15:07:00 +00:00
fkwp	0eba3ef75f	Merge pull request #2557 from element-hq/renovate/github-actions Update GitHub Actions	2024-08-12 15:22:05 +02:00
renovate[bot]	2b9bf1fbe6	Update GitHub Actions	2024-08-12 13:18:51 +00:00
Doug	8769f8966d	Clarify web server compatibility (#2555 )	2024-08-12 08:06:05 -04:00
Robin	4e7b29e142	Merge pull request #2554 from element-hq/renovate/all-minor-patch Update all non-major dependencies	2024-08-11 22:23:17 -04:00
renovate[bot]	977ba92dba	Update all non-major dependencies	2024-08-12 02:12:14 +00:00