Merge branch 'livekit' into toger5/track-processor-blur

.eslintrc.cjs

@@ -37,6 +37,12 @@ module.exports = {
     "@typescript-eslint/promise-function-async": "error",
     "@typescript-eslint/require-await": "error",
     "@typescript-eslint/await-thenable": "error",
+    // To help ensure that we get proper vite/rollup lazy loading (e.g. for matrix-js-sdk):
+    "@typescript-eslint/consistent-type-imports": [
+      "error",
+      { fixStyle: "inline-type-imports" },
+    ],
+    // To encourage good usage of RxJS:
     "rxjs/no-exposed-subjects": "error",
   },
   settings: {

locales/en/app.json

@@ -70,6 +70,7 @@
   },
   "developer_mode": {
     "crypto_version": "Crypto version: {{version}}",
+    "debug_tile_layout_label": "Debug tile layout",
     "device_id": "Device ID: {{id}}",
     "duplicate_tiles_label": "Number of additional tile copies per participant",
     "hostname": "Hostname: {{hostname}}",
@@ -147,14 +148,12 @@
   "screenshare_button_label": "Share screen",
   "settings": {
     "audio_tab": {
-      "effect_volume_description": "Volume for sound effects such as: joining or leaving a call, and reactions.",
+      "effect_volume_description": "Adjust the volume at which reactions and hand raised effects play.",
       "effect_volume_label": "Sound effect volume"
     },
     "background_blur_header": "Background",
     "background_blur_label": "Blur the background of the video",
     "blur_not_supported_by_browser": "(Background blur is not supported by this device)",
-    "developer_settings_label": "Developer Settings",
-    "developer_settings_label_description": "Expose developer settings in the settings window.",
     "developer_tab_title": "Developer",
     "feedback_tab_body": "If you are experiencing issues or simply would like to provide some feedback, please send us a short description below.",
     "feedback_tab_description_label": "Your feedback",
@@ -162,17 +161,16 @@
     "feedback_tab_send_logs_label": "Include debug logs",
     "feedback_tab_thank_you": "Thanks, we received your feedback!",
     "feedback_tab_title": "Feedback",
-    "more_tab_title": "More",
     "opt_in_description": "<0></0><1></1>You may withdraw consent by unchecking this box. If you are currently in a call, this setting will take effect at the end of the call.",
     "preferences_tab": {
+      "developer_mode_label": "Developer mode",
+      "developer_mode_label_description": "Enable developer mode and show developer settings tab.",
       "reactions_play_sound_description": "Play a sound effect when anyone sends a reaction into a call.",
       "reactions_play_sound_label": "Play reaction sounds",
       "reactions_show_description": "Show an animation when anyone sends a reaction.",
-      "reactions_show_label": "Show reactions",
-      "reactions_title": "Reactions"
+      "reactions_show_label": "Show reactions"
     },
-    "preferences_tab_body": "Here you can configure extra options for an improved experience",
-    "preferences_tab_h4": "Preferences",
+    "preferences_tab_body": "Here you can configure extra options for an improved experience.",
     "preferences_tab_show_hand_raised_timer_description": "Show a timer when a participant raises their hand",
     "preferences_tab_show_hand_raised_timer_label": "Show hand raise duration",
     "speaker_device_selection_label": "Speaker"

package.json

@@ -27,7 +27,7 @@
     "@codecov/vite-plugin": "^1.3.0",
     "@fontsource/inconsolata": "^5.1.0",
     "@fontsource/inter": "^5.1.0",
-    "@formatjs/intl-durationformat": "^0.6.1",
+    "@formatjs/intl-durationformat": "^0.7.0",
     "@formatjs/intl-segmenter": "^11.7.3",
     "@livekit/components-core": "^0.11.0",
     "@livekit/components-react": "^2.0.0",
@@ -35,7 +35,7 @@
     "@mediapipe/tasks-vision": "^0.10.18",
     "@opentelemetry/api": "^1.4.0",
     "@opentelemetry/core": "^1.25.1",
-    "@opentelemetry/exporter-trace-otlp-http": "^0.55.0",
+    "@opentelemetry/exporter-trace-otlp-http": "^0.56.0",
     "@opentelemetry/resources": "^1.25.1",
     "@opentelemetry/sdk-trace-base": "^1.25.1",
     "@opentelemetry/sdk-trace-web": "^1.9.1",
@@ -116,7 +116,7 @@
     "typescript-eslint-language-service": "^5.0.5",
     "unique-names-generator": "^4.6.0",
     "vaul": "^1.0.0",
-    "vite": "^5.0.0",
+    "vite": "^6.0.0",
     "vite-plugin-compression2": "^1.3.1",
     "vite-plugin-html-template": "^1.1.0",
     "vite-plugin-svgr": "^4.0.0",

src/@types/global.d.ts

@@ -7,7 +7,7 @@ Please see LICENSE in the repository root for full details.
 
 import "matrix-js-sdk/src/@types/global";
 import type { DurationFormat as PolyfillDurationFormat } from "@formatjs/intl-durationformat";
-import { Controls } from "../controls";
+import { type Controls } from "../controls";
 
 declare global {
   interface Document {

src/@types/i18next.d.ts

@@ -7,7 +7,7 @@ Please see LICENSE in the repository root for full details.
 
 import "i18next";
 // import all namespaces (for the default language, only)
-import app from "../../locales/en/app.json";
+import type app from "../../locales/en/app.json";
 
 declare module "i18next" {
   interface CustomTypeOptions {

src/@types/matrix-js-sdk.d.ts

@@ -6,8 +6,8 @@ Please see LICENSE in the repository root for full details.
 */
 
 import {
-  ElementCallReactionEventType,
-  ECallReactionEventContent,
+  type ElementCallReactionEventType,
+  type ECallReactionEventContent,
 } from "../reactions";
 
 // Extend Matrix JS SDK types via Typescript declaration merging to support unspecced event fields and types

src/App.tsx

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { FC, Suspense, useEffect, useState } from "react";
+import { type FC, Suspense, useEffect, useState } from "react";
 import {
   BrowserRouter as Router,
   Switch,
@@ -13,7 +13,7 @@ import {
   useLocation,
 } from "react-router-dom";
 import * as Sentry from "@sentry/react";
-import { History } from "history";
+import { type History } from "history";
 import { TooltipProvider } from "@vector-im/compound-web";
 import { logger } from "matrix-js-sdk/src/logger";
 

src/Avatar.test.tsx

@@ -7,8 +7,8 @@ Please see LICENSE in the repository root for full details.
 
 import { afterEach, expect, test, vi } from "vitest";
 import { render, screen } from "@testing-library/react";
-import { MatrixClient } from "matrix-js-sdk/src/client";
-import { FC, PropsWithChildren } from "react";
+import { type MatrixClient } from "matrix-js-sdk/src/client";
+import { type FC, type PropsWithChildren } from "react";
 
 import { ClientContextProvider } from "./ClientContext";
 import { Avatar } from "./Avatar";

src/Avatar.tsx

@@ -5,9 +5,15 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { useMemo, FC, CSSProperties, useState, useEffect } from "react";
+import {
+  useMemo,
+  type FC,
+  type CSSProperties,
+  useState,
+  useEffect,
+} from "react";
 import { Avatar as CompoundAvatar } from "@vector-im/compound-web";
-import { MatrixClient } from "matrix-js-sdk/src/client";
+import { type MatrixClient } from "matrix-js-sdk/src/client";
 
 import { useClientState } from "./ClientContext";
 

src/ClientContext.tsx

@@ -6,7 +6,7 @@ Please see LICENSE in the repository root for full details.
 */
 
 import {
-  FC,
+  type FC,
   useCallback,
   useEffect,
   useState,
@@ -18,7 +18,7 @@ import {
 import { useHistory } from "react-router-dom";
 import { logger } from "matrix-js-sdk/src/logger";
 import { useTranslation } from "react-i18next";
-import { ISyncStateData, SyncState } from "matrix-js-sdk/src/sync";
+import { type ISyncStateData, type SyncState } from "matrix-js-sdk/src/sync";
 import { ClientEvent, type MatrixClient } from "matrix-js-sdk/src/client";
 
 import type { WidgetApi } from "matrix-widget-api";

src/DisconnectedBanner.tsx

@@ -6,11 +6,11 @@ Please see LICENSE in the repository root for full details.
 */
 
 import classNames from "classnames";
-import { FC, HTMLAttributes, ReactNode } from "react";
+import { type FC, type HTMLAttributes, type ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 
 import styles from "./DisconnectedBanner.module.css";
-import { ValidClientState, useClientState } from "./ClientContext";
+import { type ValidClientState, useClientState } from "./ClientContext";
 
 interface Props extends HTMLAttributes<HTMLElement> {
   children?: ReactNode;

src/FullScreenView.tsx

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { FC, ReactNode, useCallback, useEffect } from "react";
+import { type FC, type ReactNode, useCallback, useEffect } from "react";
 import { useLocation } from "react-router-dom";
 import classNames from "classnames";
 import { Trans, useTranslation } from "react-i18next";

src/Header.tsx

@@ -6,7 +6,12 @@ Please see LICENSE in the repository root for full details.
 */
 
 import classNames from "classnames";
-import { FC, HTMLAttributes, ReactNode, forwardRef } from "react";
+import {
+  type FC,
+  type HTMLAttributes,
+  type ReactNode,
+  forwardRef,
+} from "react";
 import { Link } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import { Heading, Text } from "@vector-im/compound-web";

src/Modal.test.tsx

@@ -7,7 +7,7 @@ Please see LICENSE in the repository root for full details.
 
 import { expect, test } from "vitest";
 import { render } from "@testing-library/react";
-import { ReactNode, useState } from "react";
+import { type ReactNode, useState } from "react";
 import { afterEach } from "node:test";
 import userEvent from "@testing-library/user-event";
 

src/Modal.tsx

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { FC, ReactNode, useCallback } from "react";
+import { type FC, type ReactNode, useCallback } from "react";
 import { useTranslation } from "react-i18next";
 import {
   Root as DialogRoot,

src/QrCode.tsx

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { FC, useEffect, useState } from "react";
+import { type FC, useEffect, useState } from "react";
 import { toDataURL } from "qrcode";
 import classNames from "classnames";
 import { t } from "i18next";

src/Slider.tsx

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { FC, useCallback } from "react";
+import { type FC, useCallback } from "react";
 import { Root, Track, Range, Thumb } from "@radix-ui/react-slider";
 import classNames from "classnames";
 import { Tooltip } from "@vector-im/compound-web";

src/Toast.tsx

@@ -6,9 +6,9 @@ Please see LICENSE in the repository root for full details.
 */
 
 import {
-  ComponentType,
-  FC,
-  SVGAttributes,
+  type ComponentType,
+  type FC,
+  type SVGAttributes,
   useCallback,
   useEffect,
 } from "react";

src/UrlParams.test.ts

@@ -97,7 +97,102 @@ describe("UrlParams", () => {
     });
 
     it("respected in widget mode", () => {
-      expect(getUrlParams("?preload=true&widgetId=12345").preload).toBe(true);
+      expect(
+        getUrlParams(
+          "?preload=true&widgetId=12345&parentUrl=https%3A%2F%2Flocalhost%2Ffoo",
+        ).preload,
+      ).toBe(true);
+    });
+  });
+
+  describe("returnToLobby", () => {
+    it("is true in SPA mode", () => {
+      expect(getUrlParams("?returnToLobby=false").returnToLobby).toBe(true);
+    });
+
+    it("defaults to false in widget mode", () => {
+      expect(
+        getUrlParams("?widgetId=12345&parentUrl=https%3A%2F%2Flocalhost%2Ffoo")
+          .returnToLobby,
+      ).toBe(false);
+    });
+
+    it("respected in widget mode", () => {
+      expect(
+        getUrlParams(
+          "?returnToLobby=true&widgetId=12345&parentUrl=https%3A%2F%2Flocalhost%2Ffoo",
+        ).returnToLobby,
+      ).toBe(true);
+    });
+  });
+
+  describe("userId", () => {
+    it("is ignored in SPA mode", () => {
+      expect(getUrlParams("?userId=asd").userId).toBe(null);
+    });
+
+    it("is parsed in widget mode", () => {
+      expect(
+        getUrlParams(
+          "?userId=asd&widgetId=12345&parentUrl=https%3A%2F%2Flocalhost%2Ffoo",
+        ).userId,
+      ).toBe("asd");
+    });
+  });
+
+  describe("deviceId", () => {
+    it("is ignored in SPA mode", () => {
+      expect(getUrlParams("?deviceId=asd").deviceId).toBe(null);
+    });
+
+    it("is parsed in widget mode", () => {
+      expect(
+        getUrlParams(
+          "?deviceId=asd&widgetId=12345&parentUrl=https%3A%2F%2Flocalhost%2Ffoo",
+        ).deviceId,
+      ).toBe("asd");
+    });
+  });
+
+  describe("baseUrl", () => {
+    it("is ignored in SPA mode", () => {
+      expect(getUrlParams("?baseUrl=asd").baseUrl).toBe(null);
+    });
+
+    it("is parsed in widget mode", () => {
+      expect(
+        getUrlParams(
+          "?baseUrl=asd&widgetId=12345&parentUrl=https%3A%2F%2Flocalhost%2Ffoo",
+        ).baseUrl,
+      ).toBe("asd");
+    });
+  });
+
+  describe("viaServers", () => {
+    it("is ignored in widget mode", () => {
+      expect(
+        getUrlParams(
+          "?viaServers=asd&widgetId=12345&parentUrl=https%3A%2F%2Flocalhost%2Ffoo",
+        ).viaServers,
+      ).toBe(null);
+    });
+
+    it("is parsed in SPA mode", () => {
+      expect(getUrlParams("?viaServers=asd").viaServers).toBe("asd");
+    });
+  });
+
+  describe("homeserver", () => {
+    it("is ignored in widget mode", () => {
+      expect(
+        getUrlParams(
+          "?homeserver=asd&widgetId=12345&parentUrl=https%3A%2F%2Flocalhost%2Ffoo",
+        ).homeserver,
+      ).toBe(null);
+    });
+
+    it("is parsed in SPA mode", () => {
+      expect(getUrlParams("?homeserver=asd").homeserver).toBe("asd");
     });
   });
 });

src/UrlParams.ts

@@ -10,7 +10,7 @@ import { useLocation } from "react-router-dom";
 import { logger } from "matrix-js-sdk/src/logger";
 
 import { Config } from "./config/Config";
-import { EncryptionSystem } from "./e2ee/sharedKeyManagement";
+import { type EncryptionSystem } from "./e2ee/sharedKeyManagement";
 import { E2eeType } from "./e2ee/e2eeType";
 
 interface RoomIdentifier {
@@ -212,11 +212,12 @@ export const getUrlParams = (
   const fontScale = parseFloat(parser.getParam("fontScale") ?? "");
 
   const widgetId = parser.getParam("widgetId");
-  const isWidget = !!widgetId;
+  const parentUrl = parser.getParam("parentUrl");
+  const isWidget = !!widgetId && !!parentUrl;
 
   return {
     widgetId,
-    parentUrl: parser.getParam("parentUrl"),
+    parentUrl,
 
     // NB. we don't validate roomId here as we do in getRoomIdentifierFromUrl:
     // what would we do if it were invalid? If the widget API says that's what
@@ -232,10 +233,10 @@ export const getUrlParams = (
     showControls: parser.getFlagParam("showControls", true),
     hideScreensharing: parser.getFlagParam("hideScreensharing"),
     e2eEnabled: parser.getFlagParam("enableE2EE", true),
-    userId: parser.getParam("userId"),
+    userId: isWidget ? parser.getParam("userId") : null,
     displayName: parser.getParam("displayName"),
-    deviceId: parser.getParam("deviceId"),
-    baseUrl: parser.getParam("baseUrl"),
+    deviceId: isWidget ? parser.getParam("deviceId") : null,
+    baseUrl: isWidget ? parser.getParam("baseUrl") : null,
     lang: parser.getParam("lang"),
     fonts: parser.getAllParams("font"),
     fontScale: Number.isNaN(fontScale) ? null : fontScale,
@@ -243,10 +244,10 @@ export const getUrlParams = (
     allowIceFallback: parser.getFlagParam("allowIceFallback"),
     perParticipantE2EE: parser.getFlagParam("perParticipantE2EE"),
     skipLobby: parser.getFlagParam("skipLobby"),
-    returnToLobby: parser.getFlagParam("returnToLobby"),
+    returnToLobby: isWidget ? parser.getFlagParam("returnToLobby") : true,
     theme: parser.getParam("theme"),
-    viaServers: parser.getParam("viaServers"),
-    homeserver: parser.getParam("homeserver"),
+    viaServers: !isWidget ? parser.getParam("viaServers") : null,
+    homeserver: !isWidget ? parser.getParam("homeserver") : null,
   };
 };
 

src/UserMenu.tsx

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { FC, useMemo, useState } from "react";
+import { type FC, useMemo, useState } from "react";
 import { useLocation } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import { Menu, MenuItem } from "@vector-im/compound-web";

src/UserMenuContainer.tsx

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { FC, useCallback, useState } from "react";
+import { type FC, useCallback, useState } from "react";
 import { useHistory, useLocation } from "react-router-dom";
 
 import { useClientLegacy } from "./ClientContext";

src/analytics/AnalyticsNotice.tsx

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { FC } from "react";
+import { type FC } from "react";
 import { Trans } from "react-i18next";
 
 import { ExternalLink } from "../button/Link";

src/analytics/PosthogAnalytics.ts

@@ -5,9 +5,13 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import posthog, { CaptureOptions, PostHog, Properties } from "posthog-js";
+import posthog, {
+  type CaptureOptions,
+  type PostHog,
+  type Properties,
+} from "posthog-js";
 import { logger } from "matrix-js-sdk/src/logger";
-import { MatrixClient } from "matrix-js-sdk/src/matrix";
+import { type MatrixClient } from "matrix-js-sdk/src/matrix";
 import { Buffer } from "buffer";
 
 import { widget } from "../widget";

src/analytics/PosthogEvents.ts

@@ -5,12 +5,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { DisconnectReason } from "livekit-client";
+import { type DisconnectReason } from "livekit-client";
 import { logger } from "matrix-js-sdk/src/logger";
-import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc";
+import { type MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc";
 
 import {
-  IPosthogEvent,
+  type IPosthogEvent,
   PosthogAnalytics,
   RegistrationType,
 } from "./PosthogAnalytics";

src/analytics/PosthogSpanProcessor.ts

@@ -6,9 +6,9 @@ Please see LICENSE in the repository root for full details.
 */
 
 import {
-  SpanProcessor,
-  ReadableSpan,
-  Span,
+  type SpanProcessor,
+  type ReadableSpan,
+  type Span,
 } from "@opentelemetry/sdk-trace-base";
 import { hrTimeToMilliseconds } from "@opentelemetry/core";
 import { logger } from "matrix-js-sdk/src/logger";

src/analytics/RageshakeSpanProcessor.ts

@@ -5,12 +5,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { AttributeValue, Attributes } from "@opentelemetry/api";
+import { type AttributeValue, type Attributes } from "@opentelemetry/api";
 import { hrTimeToMicroseconds } from "@opentelemetry/core";
 import {
-  SpanProcessor,
-  ReadableSpan,
-  Span,
+  type SpanProcessor,
+  type ReadableSpan,
+  type Span,
 } from "@opentelemetry/sdk-trace-base";
 
 const dumpAttributes = (

src/auth/LoginPage.tsx

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { FC, FormEvent, useCallback, useRef, useState } from "react";
+import { type FC, type FormEvent, useCallback, useRef, useState } from "react";
 import { useHistory, useLocation } from "react-router-dom";
 import { Trans, useTranslation } from "react-i18next";
 import { Button } from "@vector-im/compound-web";

src/auth/RegisterPage.tsx

@@ -6,9 +6,9 @@ Please see LICENSE in the repository root for full details.
 */
 
 import {
-  ChangeEvent,
-  FC,
-  FormEvent,
+  type ChangeEvent,
+  type FC,
+  type FormEvent,
   useCallback,
   useEffect,
   useRef,

src/auth/useInteractiveLogin.ts

@@ -9,12 +9,12 @@ import { useCallback } from "react";
 import { InteractiveAuth } from "matrix-js-sdk/src/interactive-auth";
 import {
   createClient,
-  LoginResponse,
-  MatrixClient,
+  type LoginResponse,
+  type MatrixClient,
 } from "matrix-js-sdk/src/matrix";
 
 import { initClient } from "../utils/matrix";
-import { Session } from "../ClientContext";
+import { type Session } from "../ClientContext";
 /**
  * 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

src/auth/useInteractiveRegistration.ts

@@ -9,13 +9,13 @@ import { useState, useEffect, useCallback, useRef } from "react";
 import { InteractiveAuth } from "matrix-js-sdk/src/interactive-auth";
 import {
   createClient,
-  MatrixClient,
-  RegisterResponse,
+  type MatrixClient,
+  type RegisterResponse,
 } from "matrix-js-sdk/src/matrix";
 import { logger } from "matrix-js-sdk/src/logger";
 
 import { initClient } from "../utils/matrix";
-import { Session } from "../ClientContext";
+import { type Session } from "../ClientContext";
 import { Config } from "../config/Config";
 import { widget } from "../widget";
 

src/button/Button.tsx

@@ -4,7 +4,7 @@ Copyright 2022-2024 New Vector Ltd.
 SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
-import { ComponentPropsWithoutRef, FC } from "react";
+import { type ComponentPropsWithoutRef, type FC } from "react";
 import classNames from "classnames";
 import { useTranslation } from "react-i18next";
 import { Button as CpdButton, Tooltip } from "@vector-im/compound-web";

src/button/InviteButton.tsx

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { ComponentPropsWithoutRef, FC } from "react";
+import { type ComponentPropsWithoutRef, type FC } from "react";
 import { Button } from "@vector-im/compound-web";
 import { useTranslation } from "react-i18next";
 import { UserAddIcon } from "@vector-im/compound-design-tokens/assets/web/icons";

src/button/Link.tsx

@@ -6,15 +6,15 @@ Please see LICENSE in the repository root for full details.
 */
 
 import {
-  ComponentPropsWithoutRef,
+  type ComponentPropsWithoutRef,
   forwardRef,
-  MouseEvent,
+  type 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";
+import { createPath, type LocationDescriptor, type Path } from "history";
 import classNames from "classnames";
 
 import { useLatest } from "../useLatest";

src/button/LinkButton.tsx

@@ -5,9 +5,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { ComponentPropsWithoutRef, forwardRef } from "react";
+import { type ComponentPropsWithoutRef, forwardRef } from "react";
 import { Button } from "@vector-im/compound-web";
-import { LocationDescriptor } from "history";
+import { type LocationDescriptor } from "history";
 
 import { useLink } from "./Link";
 

src/button/ReactionToggleButton.test.tsx

@@ -9,7 +9,7 @@ import { render } from "@testing-library/react";
 import { expect, test } from "vitest";
 import { TooltipProvider } from "@vector-im/compound-web";
 import { userEvent } from "@testing-library/user-event";
-import { ReactNode } from "react";
+import { type ReactNode } from "react";
 
 import {
   MockRoom,

src/button/ReactionToggleButton.tsx

@@ -13,9 +13,9 @@ import {
   ReactionSolidIcon,
 } from "@vector-im/compound-design-tokens/assets/web/icons";
 import {
-  ComponentPropsWithoutRef,
-  FC,
-  ReactNode,
+  type ComponentPropsWithoutRef,
+  type FC,
+  type ReactNode,
   useCallback,
   useEffect,
   useMemo,
@@ -27,7 +27,11 @@ import classNames from "classnames";
 
 import { useReactions } from "../useReactions";
 import styles from "./ReactionToggleButton.module.css";
-import { ReactionOption, ReactionSet, ReactionsRowSize } from "../reactions";
+import {
+  type ReactionOption,
+  ReactionSet,
+  ReactionsRowSize,
+} from "../reactions";
 import { Modal } from "../Modal";
 
 interface InnerButtonProps extends ComponentPropsWithoutRef<"button"> {

src/config/Config.ts

@@ -10,8 +10,8 @@ import { merge } from "lodash-es";
 import { getUrlParams } from "../UrlParams";
 import {
   DEFAULT_CONFIG,
-  ConfigOptions,
-  ResolvedConfigOptions,
+  type ConfigOptions,
+  type ResolvedConfigOptions,
 } from "./ConfigOptions";
 
 export class Config {

src/e2ee/matrixKeyProvider.test.ts

@@ -7,7 +7,7 @@ Please see LICENSE in the repository root for full details.
 
 import { describe, expect, test, vi } from "vitest";
 import {
-  MatrixRTCSession,
+  type MatrixRTCSession,
   MatrixRTCSessionEvent,
 } from "matrix-js-sdk/src/matrixrtc";
 import { KeyProviderEvent } from "livekit-client";

src/e2ee/matrixKeyProvider.ts

@@ -8,7 +8,7 @@ Please see LICENSE in the repository root for full details.
 import { BaseKeyProvider, createKeyMaterialFromBuffer } from "livekit-client";
 import { logger } from "matrix-js-sdk/src/logger";
 import {
-  MatrixRTCSession,
+  type MatrixRTCSession,
   MatrixRTCSessionEvent,
 } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";
 

src/e2ee/sharedKeyManagement.ts

@@ -8,7 +8,7 @@ Please see LICENSE in the repository root for full details.
 import { useEffect, useMemo } from "react";
 
 import { setLocalStorageItem, useLocalStorage } from "../useLocalStorage";
-import { UrlParams, getUrlParams, useUrlParams } from "../UrlParams";
+import { type UrlParams, getUrlParams, useUrlParams } from "../UrlParams";
 import { E2eeType } from "./e2eeType";
 import { useClient } from "../ClientContext";
 

src/form/Form.tsx

@@ -6,7 +6,7 @@ Please see LICENSE in the repository root for full details.
 */
 
 import classNames from "classnames";
-import { FormEventHandler, forwardRef, ReactNode } from "react";
+import { type FormEventHandler, forwardRef, type ReactNode } from "react";
 
 import styles from "./Form.module.css";
 

src/grid/CallLayout.ts

@@ -5,11 +5,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { BehaviorSubject, Observable } from "rxjs";
-import { ComponentType } from "react";
+import { type BehaviorSubject, type Observable } from "rxjs";
+import { type ComponentType } from "react";
 
-import { LayoutProps } from "./Grid";
-import { TileViewModel } from "../state/TileViewModel";
+import { type LayoutProps } from "./Grid";
+import { type TileViewModel } from "../state/TileViewModel";
 
 export interface Bounds {
   width: number;

src/grid/Grid.tsx

@@ -6,21 +6,21 @@ Please see LICENSE in the repository root for full details.
 */
 
 import {
-  SpringRef,
-  TransitionFn,
-  animated,
+  type SpringRef,
+  type TransitionFn,
+  type animated,
   useTransition,
 } from "@react-spring/web";
-import { EventTypes, Handler, useScroll } from "@use-gesture/react";
+import { type EventTypes, type Handler, useScroll } from "@use-gesture/react";
 import {
-  CSSProperties,
-  ComponentProps,
-  ComponentType,
-  Dispatch,
-  FC,
-  LegacyRef,
-  ReactNode,
-  SetStateAction,
+  type CSSProperties,
+  type ComponentProps,
+  type ComponentType,
+  type Dispatch,
+  type FC,
+  type LegacyRef,
+  type ReactNode,
+  type SetStateAction,
   createContext,
   forwardRef,
   memo,

src/grid/GridLayout.tsx

@@ -5,15 +5,15 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { CSSProperties, forwardRef, useCallback, useMemo } from "react";
+import { type CSSProperties, forwardRef, useCallback, useMemo } from "react";
 import { distinctUntilChanged } from "rxjs";
 import { useObservableEagerState } from "observable-hooks";
 
-import { GridLayout as GridLayoutModel } from "../state/CallViewModel";
+import { type GridLayout as GridLayoutModel } from "../state/CallViewModel";
 import styles from "./GridLayout.module.css";
 import { useInitial } from "../useInitial";
-import { CallLayout, arrangeTiles } from "./CallLayout";
-import { DragCallback, useUpdateLayout } from "./Grid";
+import { type CallLayout, arrangeTiles } from "./CallLayout";
+import { type DragCallback, useUpdateLayout } from "./Grid";
 
 interface GridCSSProperties extends CSSProperties {
   "--gap": string;

src/grid/OneOnOneLayout.tsx

@@ -9,10 +9,10 @@ import { forwardRef, useCallback, useMemo } from "react";
 import { useObservableEagerState } from "observable-hooks";
 import classNames from "classnames";
 
-import { OneOnOneLayout as OneOnOneLayoutModel } from "../state/CallViewModel";
-import { CallLayout, arrangeTiles } from "./CallLayout";
+import { type OneOnOneLayout as OneOnOneLayoutModel } from "../state/CallViewModel";
+import { type CallLayout, arrangeTiles } from "./CallLayout";
 import styles from "./OneOnOneLayout.module.css";
-import { DragCallback, useUpdateLayout } from "./Grid";
+import { type DragCallback, useUpdateLayout } from "./Grid";
 
 /**
  * An implementation of the "one-on-one" layout, in which the remote participant

src/grid/SpotlightExpandedLayout.tsx

@@ -8,9 +8,9 @@ Please see LICENSE in the repository root for full details.
 import { forwardRef, useCallback } from "react";
 import { useObservableEagerState } from "observable-hooks";
 
-import { SpotlightExpandedLayout as SpotlightExpandedLayoutModel } from "../state/CallViewModel";
-import { CallLayout } from "./CallLayout";
-import { DragCallback, useUpdateLayout } from "./Grid";
+import { type SpotlightExpandedLayout as SpotlightExpandedLayoutModel } from "../state/CallViewModel";
+import { type CallLayout } from "./CallLayout";
+import { type DragCallback, useUpdateLayout } from "./Grid";
 import styles from "./SpotlightExpandedLayout.module.css";
 
 /**

src/grid/SpotlightLandscapeLayout.tsx

@@ -9,8 +9,8 @@ import { forwardRef } from "react";
 import { useObservableEagerState } from "observable-hooks";
 import classNames from "classnames";
 
-import { CallLayout } from "./CallLayout";
-import { SpotlightLandscapeLayout as SpotlightLandscapeLayoutModel } from "../state/CallViewModel";
+import { type CallLayout } from "./CallLayout";
+import { type SpotlightLandscapeLayout as SpotlightLandscapeLayoutModel } from "../state/CallViewModel";
 import styles from "./SpotlightLandscapeLayout.module.css";
 import { useUpdateLayout } from "./Grid";
 

src/grid/SpotlightPortraitLayout.tsx

@@ -5,12 +5,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { CSSProperties, forwardRef } from "react";
+import { type CSSProperties, forwardRef } from "react";
 import { useObservableEagerState } from "observable-hooks";
 import classNames from "classnames";
 
-import { CallLayout, arrangeTiles } from "./CallLayout";
-import { SpotlightPortraitLayout as SpotlightPortraitLayoutModel } from "../state/CallViewModel";
+import { type CallLayout, arrangeTiles } from "./CallLayout";
+import { type SpotlightPortraitLayout as SpotlightPortraitLayoutModel } from "../state/CallViewModel";
 import styles from "./SpotlightPortraitLayout.module.css";
 import { useUpdateLayout } from "./Grid";
 

src/grid/TileWrapper.tsx

@@ -5,12 +5,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { ComponentType, memo, RefObject, useRef } from "react";
-import { EventTypes, Handler, useDrag } from "@use-gesture/react";
-import { SpringValue } from "@react-spring/web";
+import { type ComponentType, memo, type RefObject, useRef } from "react";
+import { type EventTypes, type Handler, useDrag } from "@use-gesture/react";
+import { type SpringValue } from "@react-spring/web";
 import classNames from "classnames";
 
-import { TileProps } from "./Grid";
+import { type TileProps } from "./Grid";
 import styles from "./TileWrapper.module.css";
 
 interface Props<M, R extends HTMLElement> {

src/home/CallList.test.tsx

@@ -5,13 +5,13 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { render, RenderResult } from "@testing-library/react";
-import { MatrixClient } from "matrix-js-sdk/src/matrix";
+import { render, type RenderResult } from "@testing-library/react";
+import { type MatrixClient } from "matrix-js-sdk/src/matrix";
 import { MemoryRouter } from "react-router-dom";
 import { describe, expect, it } from "vitest";
 
 import { CallList } from "../../src/home/CallList";
-import { GroupCallRoom } from "../../src/home/useGroupCallRooms";
+import { type GroupCallRoom } from "../../src/home/useGroupCallRooms";
 
 describe("CallList", () => {
   const renderComponent = (rooms: GroupCallRoom[]): RenderResult => {

src/home/CallList.tsx

@@ -6,10 +6,10 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { Link } from "react-router-dom";
-import { MatrixClient } from "matrix-js-sdk/src/client";
-import { RoomMember } from "matrix-js-sdk/src/models/room-member";
-import { Room } from "matrix-js-sdk/src/models/room";
-import { FC, useCallback, MouseEvent, useState } from "react";
+import { type MatrixClient } from "matrix-js-sdk/src/client";
+import { type RoomMember } from "matrix-js-sdk/src/models/room-member";
+import { type Room } from "matrix-js-sdk/src/models/room";
+import { type FC, useCallback, type MouseEvent, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { IconButton, Text } from "@vector-im/compound-web";
 import { CloseIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
@@ -18,7 +18,7 @@ import classNames from "classnames";
 import { Avatar, Size } from "../Avatar";
 import styles from "./CallList.module.css";
 import { getRelativeRoomUrl } from "../utils/matrix";
-import { GroupCallRoom } from "./useGroupCallRooms";
+import { type GroupCallRoom } from "./useGroupCallRooms";
 import { useRoomEncryptionSystem } from "../e2ee/sharedKeyManagement";
 
 interface CallListProps {

src/home/HomePage.tsx

@@ -6,7 +6,7 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { useTranslation } from "react-i18next";
-import { FC } from "react";
+import { type FC } from "react";
 
 import { useClientState } from "../ClientContext";
 import { ErrorView, LoadingView } from "../FullScreenView";

src/home/JoinExistingCallModal.tsx

@@ -6,7 +6,7 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { useTranslation } from "react-i18next";
-import { FC, MouseEvent } from "react";
+import { type FC, type MouseEvent } from "react";
 import { Button } from "@vector-im/compound-web";
 
 import { Modal } from "../Modal";

src/home/RegisteredView.tsx

@@ -5,9 +5,15 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { useState, useCallback, FormEvent, FormEventHandler, FC } from "react";
+import {
+  useState,
+  useCallback,
+  type FormEvent,
+  type FormEventHandler,
+  type FC,
+} from "react";
 import { useHistory } from "react-router-dom";
-import { MatrixClient } from "matrix-js-sdk/src/client";
+import { type MatrixClient } from "matrix-js-sdk/src/client";
 import { useTranslation } from "react-i18next";
 import { Heading, Text } from "@vector-im/compound-web";
 import { logger } from "matrix-js-sdk/src/logger";

src/home/UnauthenticatedView.tsx

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { FC, useCallback, useState, FormEventHandler } from "react";
+import { type FC, useCallback, useState, type FormEventHandler } from "react";
 import { useHistory } from "react-router-dom";
 import { randomString } from "matrix-js-sdk/src/randomstring";
 import { Trans, useTranslation } from "react-i18next";

src/home/useGroupCallRooms.ts

@@ -5,12 +5,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-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 { type MatrixClient } from "matrix-js-sdk/src/client";
+import { type Room, RoomEvent } from "matrix-js-sdk/src/models/room";
+import { type RoomMember } from "matrix-js-sdk/src/models/room-member";
 import { useState, useEffect } from "react";
 import { EventTimeline, EventType, JoinRule } from "matrix-js-sdk/src/matrix";
-import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";
+import { type 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";
 

src/input/AvatarInputField.tsx

@@ -6,13 +6,13 @@ Please see LICENSE in the repository root for full details.
 */
 
 import {
-  AllHTMLAttributes,
+  type AllHTMLAttributes,
   useEffect,
   useCallback,
   useState,
-  ChangeEvent,
+  type ChangeEvent,
   useRef,
-  FC,
+  type FC,
 } from "react";
 import classNames from "classnames";
 import { useTranslation } from "react-i18next";

src/input/Input.tsx

@@ -6,11 +6,11 @@ Please see LICENSE in the repository root for full details.
 */
 
 import {
-  ChangeEvent,
-  FC,
-  ForwardedRef,
+  type ChangeEvent,
+  type FC,
+  type ForwardedRef,
   forwardRef,
-  ReactNode,
+  type ReactNode,
   useId,
 } from "react";
 import classNames from "classnames";

src/livekit/MediaDevicesContext.tsx

@@ -6,7 +6,7 @@ Please see LICENSE in the repository root for full details.
 */
 
 import {
-  FC,
+  type FC,
   createContext,
   useCallback,
   useContext,
@@ -16,7 +16,7 @@ import {
   useState,
 } from "react";
 import { createMediaDeviceObserver } from "@livekit/components-core";
-import { Observable } from "rxjs";
+import { type Observable } from "rxjs";
 import { logger } from "matrix-js-sdk/src/logger";
 
 import {
@@ -24,7 +24,7 @@ import {
   audioInput as audioInputSetting,
   audioOutput as audioOutputSetting,
   videoInput as videoInputSetting,
-  Setting,
+  type Setting,
 } from "../settings/settings";
 import { isFirefox } from "../Platform";
 

src/livekit/openIDSFU.ts

@@ -5,11 +5,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { IOpenIDToken, MatrixClient } from "matrix-js-sdk/src/matrix";
+import { type IOpenIDToken, type 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 { type MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";
 import { useEffect, useState } from "react";
-import { LivekitFocus } from "matrix-js-sdk/src/matrixrtc/LivekitFocus";
+import { type LivekitFocus } from "matrix-js-sdk/src/matrixrtc/LivekitFocus";
 
 import { useActiveLivekitFocus } from "../room/useActiveFocus";
 

src/livekit/options.ts

@@ -8,10 +8,10 @@ Please see LICENSE in the repository root for full details.
 import {
   AudioPresets,
   DefaultReconnectPolicy,
-  RoomOptions,
+  type RoomOptions,
   ScreenSharePresets,
-  TrackPublishDefaults,
-  VideoPreset,
+  type TrackPublishDefaults,
+  type VideoPreset,
   VideoPresets,
 } from "livekit-client";
 

src/livekit/useECConnectionState.ts

@@ -6,10 +6,10 @@ Please see LICENSE in the repository root for full details.
 */
 
 import {
-  AudioCaptureOptions,
+  type AudioCaptureOptions,
   ConnectionState,
-  LocalTrack,
-  Room,
+  type LocalTrack,
+  type Room,
   RoomEvent,
   Track,
 } from "livekit-client";
@@ -17,7 +17,7 @@ import { useCallback, useEffect, useRef, useState } from "react";
 import { logger } from "matrix-js-sdk/src/logger";
 import * as Sentry from "@sentry/react";
 
-import { SFUConfig, sfuConfigEquals } from "./openIDSFU";
+import { type SFUConfig, sfuConfigEquals } from "./openIDSFU";
 import { PosthogAnalytics } from "../analytics/PosthogAnalytics";
 
 declare global {

src/livekit/useLiveKit.ts

@@ -7,33 +7,33 @@ Please see LICENSE in the repository root for full details.
 
 import {
   ConnectionState,
-  E2EEOptions,
+  type E2EEOptions,
   ExternalE2EEKeyProvider,
-  LocalVideoTrack,
+  type LocalVideoTrack,
   Room,
-  RoomOptions,
+  type RoomOptions,
   Track,
 } from "livekit-client";
 import { useEffect, useMemo, useRef } from "react";
 import E2EEWorker from "livekit-client/e2ee-worker?worker";
 import { logger } from "matrix-js-sdk/src/logger";
-import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";
+import { type MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";
 
 import { defaultLiveKitOptions } from "./options";
-import { SFUConfig } from "./openIDSFU";
-import { MuteStates } from "../room/MuteStates";
+import { type SFUConfig } from "./openIDSFU";
+import { type MuteStates } from "../room/MuteStates";
 import {
-  MediaDevice,
-  MediaDevices,
+  type MediaDevice,
+  type MediaDevices,
   useMediaDevices,
 } from "./MediaDevicesContext";
 import {
-  ECConnectionState,
+  type ECConnectionState,
   useECConnectionState,
 } from "./useECConnectionState";
 import { MatrixKeyProvider } from "../e2ee/matrixKeyProvider";
 import { E2eeType } from "../e2ee/e2eeType";
-import { EncryptionSystem } from "../e2ee/sharedKeyManagement";
+import { type EncryptionSystem } from "../e2ee/sharedKeyManagement";
 import {
   useTrackProcessor,
   useTrackProcessorSync,

src/otel/OTelCall.ts

@@ -5,17 +5,17 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { Span } from "@opentelemetry/api";
-import { MatrixCall } from "matrix-js-sdk/src/matrix";
+import { type Span } from "@opentelemetry/api";
+import { type MatrixCall } from "matrix-js-sdk/src/matrix";
 import { CallEvent } from "matrix-js-sdk/src/webrtc/call";
 import {
-  TransceiverStats,
-  CallFeedStats,
+  type TransceiverStats,
+  type CallFeedStats,
 } from "matrix-js-sdk/src/webrtc/stats/statsReport";
 
 import { ObjectFlattener } from "./ObjectFlattener";
 import { ElementCallOpenTelemetry } from "./otel";
-import { OTelCallAbstractMediaStreamSpan } from "./OTelCallAbstractMediaStreamSpan";
+import { type OTelCallAbstractMediaStreamSpan } from "./OTelCallAbstractMediaStreamSpan";
 import { OTelCallTransceiverMediaStreamSpan } from "./OTelCallTransceiverMediaStreamSpan";
 import { OTelCallFeedMediaStreamSpan } from "./OTelCallFeedMediaStreamSpan";
 

src/otel/OTelCallAbstractMediaStreamSpan.ts

@@ -5,10 +5,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import opentelemetry, { Span } from "@opentelemetry/api";
-import { TrackStats } from "matrix-js-sdk/src/webrtc/stats/statsReport";
+import opentelemetry, { type Span } from "@opentelemetry/api";
+import { type TrackStats } from "matrix-js-sdk/src/webrtc/stats/statsReport";
 
-import { ElementCallOpenTelemetry } from "./otel";
+import { type ElementCallOpenTelemetry } from "./otel";
 import { OTelCallMediaStreamTrackSpan } from "./OTelCallMediaStreamTrackSpan";
 
 type TrackId = string;

src/otel/OTelCallFeedMediaStreamSpan.ts

@@ -5,13 +5,13 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { Span } from "@opentelemetry/api";
+import { type Span } from "@opentelemetry/api";
 import {
-  CallFeedStats,
-  TrackStats,
+  type CallFeedStats,
+  type TrackStats,
 } from "matrix-js-sdk/src/webrtc/stats/statsReport";
 
-import { ElementCallOpenTelemetry } from "./otel";
+import { type ElementCallOpenTelemetry } from "./otel";
 import { OTelCallAbstractMediaStreamSpan } from "./OTelCallAbstractMediaStreamSpan";
 
 export class OTelCallFeedMediaStreamSpan extends OTelCallAbstractMediaStreamSpan {

src/otel/OTelCallMediaStreamTrackSpan.ts

@@ -5,10 +5,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { TrackStats } from "matrix-js-sdk/src/webrtc/stats/statsReport";
-import opentelemetry, { Span } from "@opentelemetry/api";
+import { type TrackStats } from "matrix-js-sdk/src/webrtc/stats/statsReport";
+import opentelemetry, { type Span } from "@opentelemetry/api";
 
-import { ElementCallOpenTelemetry } from "./otel";
+import { type ElementCallOpenTelemetry } from "./otel";
 
 export class OTelCallMediaStreamTrackSpan {
   private readonly span: Span;

src/otel/OTelCallTransceiverMediaStreamSpan.ts

@@ -5,13 +5,13 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { Span } from "@opentelemetry/api";
+import { type Span } from "@opentelemetry/api";
 import {
-  TrackStats,
-  TransceiverStats,
+  type TrackStats,
+  type TransceiverStats,
 } from "matrix-js-sdk/src/webrtc/stats/statsReport";
 
-import { ElementCallOpenTelemetry } from "./otel";
+import { type ElementCallOpenTelemetry } from "./otel";
 import { OTelCallAbstractMediaStreamSpan } from "./OTelCallAbstractMediaStreamSpan";
 
 export class OTelCallTransceiverMediaStreamSpan extends OTelCallAbstractMediaStreamSpan {

src/otel/OTelGroupCallMembership.ts

@@ -5,31 +5,35 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import opentelemetry, { Span, Attributes, Context } from "@opentelemetry/api";
+import opentelemetry, {
+  type Span,
+  type Attributes,
+  type Context,
+} from "@opentelemetry/api";
 import {
-  GroupCall,
-  MatrixClient,
-  MatrixEvent,
-  RoomMember,
+  type GroupCall,
+  type MatrixClient,
+  type MatrixEvent,
+  type RoomMember,
 } from "matrix-js-sdk/src/matrix";
 import { logger } from "matrix-js-sdk/src/logger";
 import {
-  CallError,
-  CallState,
-  MatrixCall,
-  VoipEvent,
+  type CallError,
+  type CallState,
+  type MatrixCall,
+  type VoipEvent,
 } from "matrix-js-sdk/src/webrtc/call";
 import {
-  CallsByUserAndDevice,
-  GroupCallError,
+  type CallsByUserAndDevice,
+  type GroupCallError,
   GroupCallEvent,
-  GroupCallStatsReport,
+  type GroupCallStatsReport,
 } from "matrix-js-sdk/src/webrtc/groupCall";
 import {
-  ConnectionStatsReport,
-  ByteSentStatsReport,
-  SummaryStatsReport,
-  CallFeedReport,
+  type ConnectionStatsReport,
+  type ByteSentStatsReport,
+  type SummaryStatsReport,
+  type CallFeedReport,
 } from "matrix-js-sdk/src/webrtc/stats/statsReport";
 
 import { ElementCallOpenTelemetry } from "./otel";

src/otel/ObjectFlattener.test.ts

@@ -5,11 +5,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { GroupCallStatsReport } from "matrix-js-sdk/src/webrtc/groupCall";
+import { type GroupCallStatsReport } from "matrix-js-sdk/src/webrtc/groupCall";
 import {
-  AudioConcealment,
-  ByteSentStatsReport,
-  ConnectionStatsReport,
+  type AudioConcealment,
+  type ByteSentStatsReport,
+  type ConnectionStatsReport,
 } from "matrix-js-sdk/src/webrtc/stats/statsReport";
 import { describe, expect, it } from "vitest";
 

src/otel/ObjectFlattener.ts

@@ -4,13 +4,13 @@ Copyright 2023, 2024 New Vector Ltd.
 SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
-import { Attributes } from "@opentelemetry/api";
-import { VoipEvent } from "matrix-js-sdk/src/webrtc/call";
-import { GroupCallStatsReport } from "matrix-js-sdk/src/webrtc/groupCall";
+import { type Attributes } from "@opentelemetry/api";
+import { type VoipEvent } from "matrix-js-sdk/src/webrtc/call";
+import { type GroupCallStatsReport } from "matrix-js-sdk/src/webrtc/groupCall";
 import {
-  ByteSentStatsReport,
-  ConnectionStatsReport,
-  SummaryStatsReport,
+  type ByteSentStatsReport,
+  type ConnectionStatsReport,
+  type SummaryStatsReport,
 } from "matrix-js-sdk/src/webrtc/stats/statsReport";
 
 export class ObjectFlattener {

src/otel/otel.ts

@@ -8,7 +8,7 @@ Please see LICENSE in the repository root for full details.
 import { SimpleSpanProcessor } from "@opentelemetry/sdk-trace-base";
 import { OTLPTraceExporter } from "@opentelemetry/exporter-trace-otlp-http";
 import { WebTracerProvider } from "@opentelemetry/sdk-trace-web";
-import opentelemetry, { Tracer } from "@opentelemetry/api";
+import opentelemetry, { type Tracer } from "@opentelemetry/api";
 import { Resource } from "@opentelemetry/resources";
 import { SemanticResourceAttributes } from "@opentelemetry/semantic-conventions";
 import { logger } from "matrix-js-sdk/src/logger";

src/profile/useProfile.ts

@@ -5,10 +5,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { MatrixClient } from "matrix-js-sdk/src/client";
-import { MatrixEvent } from "matrix-js-sdk/src/models/event";
-import { User, UserEvent } from "matrix-js-sdk/src/models/user";
-import { FileType } from "matrix-js-sdk/src/http-api";
+import { type MatrixClient } from "matrix-js-sdk/src/client";
+import { type MatrixEvent } from "matrix-js-sdk/src/models/event";
+import { type User, UserEvent } from "matrix-js-sdk/src/models/user";
+import { type FileType } from "matrix-js-sdk/src/http-api";
 import { useState, useCallback, useEffect } from "react";
 import { logger } from "matrix-js-sdk/src/logger";
 

src/reactions/RaisedHandIndicator.tsx

@@ -6,8 +6,8 @@ Please see LICENSE in the repository root for full details.
 */
 
 import {
-  MouseEventHandler,
-  ReactNode,
+  type MouseEventHandler,
+  type ReactNode,
   useCallback,
   useEffect,
   useState,

src/reactions/ReactionIndicator.tsx

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { PropsWithChildren, ReactNode } from "react";
+import { type PropsWithChildren, type ReactNode } from "react";
 import classNames from "classnames";
 import { useTranslation } from "react-i18next";
 

src/reactions/index.ts

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { RelationType } from "matrix-js-sdk/src/types";
+import { type RelationType } from "matrix-js-sdk/src/types";
 
 import catSoundOgg from "../sound/reactions/cat.ogg?url";
 import catSoundMp3 from "../sound/reactions/cat.mp3?url";

src/room/AppSelectionModal.tsx

@@ -5,7 +5,13 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { FC, MouseEvent, useCallback, useMemo, useState } from "react";
+import {
+  type FC,
+  type MouseEvent,
+  useCallback,
+  useMemo,
+  useState,
+} from "react";
 import { useTranslation } from "react-i18next";
 import { Button, Text } from "@vector-im/compound-web";
 import { PopOutIcon } from "@vector-im/compound-design-tokens/assets/web/icons";

src/room/CallEndedView.tsx

@@ -5,8 +5,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { FC, FormEventHandler, ReactNode, useCallback, useState } from "react";
-import { MatrixClient } from "matrix-js-sdk/src/client";
+import {
+  type FC,
+  type FormEventHandler,
+  type ReactNode,
+  useCallback,
+  useState,
+} from "react";
+import { type MatrixClient } from "matrix-js-sdk/src/client";
 import { Trans, useTranslation } from "react-i18next";
 import { useHistory } from "react-router-dom";
 import { Button, Heading, Text } from "@vector-im/compound-web";

src/room/CallEventAudioRenderer.test.tsx

@@ -10,20 +10,20 @@ import {
   afterAll,
   beforeEach,
   expect,
-  MockedFunction,
+  type MockedFunction,
   test,
   vitest,
 } from "vitest";
-import { MatrixClient } from "matrix-js-sdk/src/client";
+import { type MatrixClient } from "matrix-js-sdk/src/client";
 import { ConnectionState } from "livekit-client";
 import { BehaviorSubject, of } from "rxjs";
 import { afterEach } from "node:test";
-import { act, ReactNode } from "react";
+import { act, type ReactNode } from "react";
 import {
-  CallMembership,
+  type CallMembership,
   type MatrixRTCSession,
 } from "matrix-js-sdk/src/matrixrtc";
-import { RoomMember } from "matrix-js-sdk/src/matrix";
+import { type RoomMember } from "matrix-js-sdk/src/matrix";
 
 import {
   mockLivekitRoom,

src/room/CallEventAudioRenderer.tsx

@@ -5,10 +5,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { ReactNode, useDeferredValue, useEffect, useMemo } from "react";
+import { type ReactNode, useDeferredValue, useEffect, useMemo } from "react";
 import { filter, interval, throttle } from "rxjs";
 
-import { CallViewModel } from "../state/CallViewModel";
+import { type CallViewModel } from "../state/CallViewModel";
 import joinCallSoundMp3 from "../sound/join_call.mp3";
 import joinCallSoundOgg from "../sound/join_call.ogg";
 import leftCallSoundMp3 from "../sound/left_call.mp3";

src/room/EncryptionLock.tsx

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { FC } from "react";
+import { type FC } from "react";
 import { Tooltip } from "@vector-im/compound-web";
 import { useTranslation } from "react-i18next";
 import {

src/room/GroupCallView.tsx

@@ -5,31 +5,41 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { FC, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+  type FC,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import { useHistory } from "react-router-dom";
-import { MatrixClient } from "matrix-js-sdk/src/client";
+import { type MatrixClient } from "matrix-js-sdk/src/client";
 import {
   Room,
   isE2EESupported as isE2EESupportedBrowser,
 } from "livekit-client";
 import { logger } from "matrix-js-sdk/src/logger";
-import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";
+import { type MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";
 import { JoinRule } from "matrix-js-sdk/src/matrix";
 import { Heading, Text } from "@vector-im/compound-web";
 import { useTranslation } from "react-i18next";
 
 import type { IWidgetApiRequest } from "matrix-widget-api";
-import { widget, ElementWidgetActions, JoinCallData } from "../widget";
+import { widget, ElementWidgetActions, type JoinCallData } from "../widget";
 import { FullScreenView } from "../FullScreenView";
 import { LobbyView } from "./LobbyView";
-import { MatrixInfo } from "./VideoPreview";
+import { type MatrixInfo } from "./VideoPreview";
 import { CallEndedView } from "./CallEndedView";
 import { PosthogAnalytics } from "../analytics/PosthogAnalytics";
 import { useProfile } from "../profile/useProfile";
 import { findDeviceByName } from "../utils/media";
 import { ActiveCall } from "./InCallView";
-import { MUTE_PARTICIPANT_COUNT, MuteStates } from "./MuteStates";
-import { useMediaDevices, MediaDevices } from "../livekit/MediaDevicesContext";
+import { MUTE_PARTICIPANT_COUNT, type MuteStates } from "./MuteStates";
+import {
+  useMediaDevices,
+  type MediaDevices,
+} from "../livekit/MediaDevicesContext";
 import { useMatrixRTCSessionMemberships } from "../useMatrixRTCSessionMemberships";
 import { enterRTCSession, leaveRTCSession } from "../rtcSessionHelpers";
 import { useMatrixRTCSessionJoinState } from "../useMatrixRTCSessionJoinState";

src/room/InCallView.tsx

@@ -10,13 +10,13 @@ import {
   RoomContext,
   useLocalParticipant,
 } from "@livekit/components-react";
-import { ConnectionState, Room } from "livekit-client";
-import { MatrixClient } from "matrix-js-sdk/src/client";
+import { ConnectionState, type Room } from "livekit-client";
+import { type MatrixClient } from "matrix-js-sdk/src/client";
 import {
-  FC,
-  PointerEvent,
-  PropsWithoutRef,
-  TouchEvent,
+  type FC,
+  type PointerEvent,
+  type PropsWithoutRef,
+  type TouchEvent,
   forwardRef,
   useCallback,
   useEffect,
@@ -25,7 +25,7 @@ import {
   useState,
 } from "react";
 import useMeasure from "react-use-measure";
-import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";
+import { type MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";
 import classNames from "classnames";
 import { BehaviorSubject, map } from "rxjs";
 import { useObservable, useObservableEagerState } from "observable-hooks";
@@ -49,28 +49,32 @@ import { useCallViewKeyboardShortcuts } from "../useCallViewKeyboardShortcuts";
 import { ElementWidgetActions, widget } from "../widget";
 import styles from "./InCallView.module.css";
 import { GridTile } from "../tile/GridTile";
-import { OTelGroupCallMembership } from "../otel/OTelGroupCallMembership";
+import { type OTelGroupCallMembership } from "../otel/OTelGroupCallMembership";
 import { SettingsModal, defaultSettingsTab } from "../settings/SettingsModal";
 import { useRageshakeRequestModal } from "../settings/submit-rageshake";
 import { RageshakeRequestModal } from "./RageshakeRequestModal";
 import { useLiveKit } from "../livekit/useLiveKit";
 import { useWakeLock } from "../useWakeLock";
 import { useMergedRefs } from "../useMergedRefs";
-import { MuteStates } from "./MuteStates";
-import { MatrixInfo } from "./VideoPreview";
+import { type MuteStates } from "./MuteStates";
+import { type MatrixInfo } from "./VideoPreview";
 import { InviteButton } from "../button/InviteButton";
 import { LayoutToggle } from "./LayoutToggle";
-import { ECConnectionState } from "../livekit/useECConnectionState";
+import { type ECConnectionState } from "../livekit/useECConnectionState";
 import { useOpenIDSFU } from "../livekit/openIDSFU";
-import { CallViewModel, GridMode, Layout } from "../state/CallViewModel";
-import { Grid, TileProps } from "../grid/Grid";
+import {
+  CallViewModel,
+  type GridMode,
+  type Layout,
+} from "../state/CallViewModel";
+import { Grid, type TileProps } from "../grid/Grid";
 import { useInitial } from "../useInitial";
 import { SpotlightTile } from "../tile/SpotlightTile";
-import { EncryptionSystem } from "../e2ee/sharedKeyManagement";
+import { type EncryptionSystem } from "../e2ee/sharedKeyManagement";
 import { E2eeType } from "../e2ee/e2eeType";
 import { makeGridLayout } from "../grid/GridLayout";
 import {
-  CallLayoutOutputs,
+  type CallLayoutOutputs,
   defaultPipAlignment,
   defaultSpotlightAlignment,
 } from "../grid/CallLayout";
@@ -78,12 +82,16 @@ import { makeOneOnOneLayout } from "../grid/OneOnOneLayout";
 import { makeSpotlightExpandedLayout } from "../grid/SpotlightExpandedLayout";
 import { makeSpotlightLandscapeLayout } from "../grid/SpotlightLandscapeLayout";
 import { makeSpotlightPortraitLayout } from "../grid/SpotlightPortraitLayout";
-import { GridTileViewModel, TileViewModel } from "../state/TileViewModel";
+import { GridTileViewModel, type TileViewModel } from "../state/TileViewModel";
 import { ReactionsProvider, useReactions } from "../useReactions";
 import { ReactionsAudioRenderer } from "./ReactionAudioRenderer";
 import { useSwitchCamera } from "./useSwitchCamera";
 import { ReactionsOverlay } from "./ReactionsOverlay";
 import { CallEventAudioRenderer } from "./CallEventAudioRenderer";
+import {
+  debugTileLayout as debugTileLayoutSetting,
+  useSetting,
+} from "../settings/settings";
 
 const canScreenshare = "getDisplayMedia" in (navigator.mediaDevices ?? {});
 
@@ -219,6 +227,8 @@ export const InCallView: FC<InCallViewProps> = ({
 
   const windowMode = useObservableEagerState(vm.windowMode);
   const layout = useObservableEagerState(vm.layout);
+  const tileStoreGeneration = useObservableEagerState(vm.tileStoreGeneration);
+  const [debugTileLayout] = useSetting(debugTileLayoutSetting);
   const gridMode = useObservableEagerState(vm.gridMode);
   const showHeader = useObservableEagerState(vm.showHeader);
   const showFooter = useObservableEagerState(vm.showFooter);
@@ -581,6 +591,10 @@ export const InCallView: FC<InCallViewProps> = ({
             height={11}
             aria-label={import.meta.env.VITE_PRODUCT_NAME || "Element Call"}
           />
+          {/* Don't mind this odd placement, it's just a little debug label */}
+          {debugTileLayout
+            ? `Tiles generation: ${tileStoreGeneration}`
+            : undefined}
         </div>
       )}
       {showControls && <div className={styles.buttons}>{buttons}</div>}

src/room/InviteModal.test.tsx

@@ -7,7 +7,7 @@ Please see LICENSE in the repository root for full details.
 
 import { render, screen } from "@testing-library/react";
 import { expect, test, vi } from "vitest";
-import { Room } from "matrix-js-sdk/src/matrix";
+import { type Room } from "matrix-js-sdk/src/matrix";
 import { axe } from "vitest-axe";
 import { BrowserRouter } from "react-router-dom";
 import userEvent from "@testing-library/user-event";

src/room/InviteModal.tsx

@@ -5,9 +5,15 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { FC, MouseEvent, useCallback, useMemo, useState } from "react";
+import {
+  type FC,
+  type MouseEvent,
+  useCallback,
+  useMemo,
+  useState,
+} from "react";
 import { useTranslation } from "react-i18next";
-import { Room } from "matrix-js-sdk/src/matrix";
+import { type Room } from "matrix-js-sdk/src/matrix";
 import { Button, Text } from "@vector-im/compound-web";
 import {
   LinkIcon,

src/room/LayoutToggle.tsx

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { ChangeEvent, FC, TouchEvent, useCallback } from "react";
+import { type ChangeEvent, type FC, type TouchEvent, useCallback } from "react";
 import { useTranslation } from "react-i18next";
 import { Tooltip } from "@vector-im/compound-web";
 import {

src/room/LobbyView.tsx

@@ -5,17 +5,17 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { FC, useCallback, useMemo, useState } from "react";
+import { type FC, useCallback, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { MatrixClient } from "matrix-js-sdk/src/matrix";
+import { type MatrixClient } from "matrix-js-sdk/src/matrix";
 import { Button } from "@vector-im/compound-web";
 import classNames from "classnames";
 import { useHistory } from "react-router-dom";
 import { logger } from "matrix-js-sdk/src/logger";
 import { usePreviewTracks } from "@livekit/components-react";
 import {
-  CreateLocalTracksOptions,
-  LocalVideoTrack,
+  type CreateLocalTracksOptions,
+  type LocalVideoTrack,
   Track,
 } from "livekit-client";
 import { useObservable } from "observable-hooks";
@@ -25,8 +25,8 @@ import inCallStyles from "./InCallView.module.css";
 import styles from "./LobbyView.module.css";
 import { Header, LeftNav, RightNav, RoomHeaderInfo } from "../Header";
 import { useLocationNavigation } from "../useLocationNavigation";
-import { MatrixInfo, VideoPreview } from "./VideoPreview";
-import { MuteStates } from "./MuteStates";
+import { type MatrixInfo, VideoPreview } from "./VideoPreview";
+import { type MuteStates } from "./MuteStates";
 import { InviteButton } from "../button/InviteButton";
 import {
   EndCallButton,

src/room/MuteStates.test.tsx

@@ -6,15 +6,15 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { afterAll, afterEach, describe, expect, it, vi } from "vitest";
-import React, { ReactNode } from "react";
+import React, { type ReactNode } from "react";
 import { beforeEach } from "vitest";
 import { render, screen } from "@testing-library/react";
 import { MemoryRouter } from "react-router-dom";
 
 import { useMuteStates } from "./MuteStates";
 import {
-  MediaDevice,
-  MediaDevices,
+  type MediaDevice,
+  type MediaDevices,
   MediaDevicesContext,
 } from "../livekit/MediaDevicesContext";
 import { mockConfig } from "../utils/test";

src/room/MuteStates.ts

@@ -6,16 +6,19 @@ Please see LICENSE in the repository root for full details.
 */
 
 import {
-  Dispatch,
-  SetStateAction,
+  type Dispatch,
+  type SetStateAction,
   useCallback,
   useEffect,
   useMemo,
 } from "react";
-import { IWidgetApiRequest } from "matrix-widget-api";
+import { type IWidgetApiRequest } from "matrix-widget-api";
 import { logger } from "matrix-js-sdk/src/logger";
 
-import { MediaDevice, useMediaDevices } from "../livekit/MediaDevicesContext";
+import {
+  type MediaDevice,
+  useMediaDevices,
+} from "../livekit/MediaDevicesContext";
 import { useReactiveState } from "../useReactiveState";
 import { ElementWidgetActions, widget } from "../widget";
 import { Config } from "../config/Config";

src/room/RageshakeRequestModal.tsx

@@ -5,11 +5,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { FC, useEffect } from "react";
+import { type FC, useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { Button, Text } from "@vector-im/compound-web";
 
-import { Modal, Props as ModalProps } from "../Modal";
+import { Modal, type Props as ModalProps } from "../Modal";
 import { FieldRow, ErrorMessage } from "../input/Input";
 import { useSubmitRageshake } from "../settings/submit-rageshake";
 

src/room/ReactionAudioRenderer.test.tsx

@@ -12,11 +12,11 @@ import {
   expect,
   test,
   vitest,
-  MockedFunction,
-  Mock,
+  type MockedFunction,
+  type Mock,
 } from "vitest";
 import { TooltipProvider } from "@vector-im/compound-web";
-import { act, ReactNode } from "react";
+import { act, type ReactNode } from "react";
 import { afterEach } from "node:test";
 
 import {

src/room/ReactionAudioRenderer.tsx

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { ReactNode, useDeferredValue, useEffect, useState } from "react";
+import { type ReactNode, useDeferredValue, useEffect, useState } from "react";
 
 import { useReactions } from "../useReactions";
 import { playReactionsSound, useSetting } from "../settings/settings";

src/room/ReactionsOverlay.test.tsx

@@ -8,7 +8,7 @@ Please see LICENSE in the repository root for full details.
 import { render } from "@testing-library/react";
 import { expect, test } from "vitest";
 import { TooltipProvider } from "@vector-im/compound-web";
-import { act, ReactNode } from "react";
+import { act, type ReactNode } from "react";
 import { afterEach } from "node:test";
 
 import {

src/room/ReactionsOverlay.tsx

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { ReactNode, useMemo } from "react";
+import { type ReactNode, useMemo } from "react";
 
 import { useReactions } from "../useReactions";
 import {

src/room/RoomAuthView.tsx

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { FC, useCallback, useState } from "react";
+import { type 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";

src/room/RoomPage.tsx

@@ -5,11 +5,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { FC, useEffect, useState, ReactNode, useRef } from "react";
+import { type FC, useEffect, useState, type ReactNode, useRef } from "react";
 import { logger } from "matrix-js-sdk/src/logger";
 import { useTranslation } from "react-i18next";
 import { CheckIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
-import { MatrixError } from "matrix-js-sdk/src/http-api";
+import { type MatrixError } from "matrix-js-sdk/src/http-api";
 import { Heading, Text } from "@vector-im/compound-web";
 
 import { useClientLegacy } from "../ClientContext";

src/room/VideoPreview.tsx

@@ -5,15 +5,15 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { useEffect, useRef, FC, ReactNode } from "react";
+import { useEffect, useRef, type FC, type ReactNode } from "react";
 import useMeasure from "react-use-measure";
-import { facingModeFromLocalTrack, LocalVideoTrack } from "livekit-client";
+import { facingModeFromLocalTrack, type LocalVideoTrack } from "livekit-client";
 import classNames from "classnames";
 
 import { Avatar } from "../Avatar";
 import styles from "./VideoPreview.module.css";
-import { MuteStates } from "./MuteStates";
-import { EncryptionSystem } from "../e2ee/sharedKeyManagement";
+import { type MuteStates } from "./MuteStates";
+import { type EncryptionSystem } from "../e2ee/sharedKeyManagement";
 
 export type MatrixInfo = {
   userId: string;

src/room/checkForParallelCalls.test.ts

@@ -5,8 +5,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { vi, Mocked, test, expect } from "vitest";
-import { RoomState } from "matrix-js-sdk/src/models/room-state";
+import { vi, type Mocked, test, expect } from "vitest";
+import { type RoomState } from "matrix-js-sdk/src/models/room-state";
 
 import { PosthogAnalytics } from "../../src/analytics/PosthogAnalytics";
 import { checkForParallelCalls } from "../../src/room/checkForParallelCalls";

src/room/checkForParallelCalls.ts

@@ -6,7 +6,7 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { EventType } from "matrix-js-sdk/src/@types/event";
-import { RoomState } from "matrix-js-sdk/src/models/room-state";
+import { type RoomState } from "matrix-js-sdk/src/models/room-state";
 
 import { PosthogAnalytics } from "../analytics/PosthogAnalytics";