Tidy up React JSX to make Sonar happier (#33946)

* Eradicate unused React props

* Fix unmatched defaultProps

* Remove spurious React fragments

* Remove unused JSX

* Remove unused React state field

* Remove unused React state field

* Update snapshots

apps/web/src/components/structures/LeftPanel.tsx

@@ -35,14 +35,12 @@ import { shouldShowComponent } from "../../customisations/helpers/UIComponents";
 import { UIComponent } from "../../settings/UIFeature";
 import AccessibleButton, { type ButtonEvent } from "../views/elements/AccessibleButton";
 import PosthogTrackers from "../../PosthogTrackers";
-import type PageType from "../../PageTypes";
 import { Landmark, LandmarkNavigation } from "../../accessibility/LandmarkNavigation";
 import SettingsStore from "../../settings/SettingsStore";
 import { RoomListPanel } from "../views/rooms/RoomListPanel";
 
 interface IProps {
     isMinimized: boolean;
-    pageType: PageType;
     resizeNotifier: ResizeNotifier;
 }
 

apps/web/src/components/structures/LoggedInView.tsx

@@ -66,7 +66,6 @@ import LeftPanelLiveShareWarning from "../views/beacon/LeftPanelLiveShareWarning
 import HomePage from "./HomePage";
 import { PipContainer } from "./PipContainer";
 import { monitorSyncedPushRules } from "../../utils/pushRules/monitorSyncedPushRules";
-import { type ConfigOptions } from "../../SdkConfig";
 import { MatrixClientContextProvider } from "./MatrixClientContextProvider";
 import { Landmark, LandmarkNavigation } from "../../accessibility/LandmarkNavigation";
 import { ModuleApi } from "../../modules/Api.ts";
@@ -93,12 +92,10 @@ interface IProps {
     hideToSRUsers: boolean;
     // eslint-disable-next-line camelcase
     page_type?: string;
-    autoJoin?: boolean;
     threepidInvite?: IThreepidInvite;
     roomOobData?: IOOBData;
     currentRoomId: string | null;
     collapseLhs: boolean;
-    config: ConfigOptions;
     currentUserId: string | null;
     justRegistered?: boolean;
     roomJustCreatedOpts?: IOpts;
@@ -796,7 +793,6 @@ class LoggedInView extends React.Component<IProps, IState> {
                             data-collapsed={shouldUseMinimizedUI ? true : undefined}
                         >
                             <LeftPanel
-                                pageType={this.props.page_type as PageTypes}
                                 isMinimized={shouldUseMinimizedUI || false}
                                 resizeNotifier={this.context.resizeNotifier}
                             />

apps/web/src/components/structures/MatrixChat.tsx

@@ -220,10 +220,6 @@ interface IState {
 export default class MatrixChat extends React.PureComponent<IProps, IState> {
     public static displayName = "MatrixChat";
 
-    public static defaultProps: Partial<IProps> = {
-        config: {},
-    };
-
     private firstSyncComplete = false;
     private firstSyncPromise: PromiseWithResolvers<void>;
 

apps/web/src/components/structures/RoomView.tsx

@@ -303,7 +303,6 @@ interface LocalRoomViewProps {
     resizeNotifier: ResizeNotifier;
     permalinkCreator: RoomPermalinkCreator;
     roomView: RefObject<HTMLElement | null>;
-    mainSplitContentType: MainSplitContentType;
     e2eStatus?: E2EStatus;
 }
 
@@ -364,7 +363,6 @@ function LocalRoomView(props: LocalRoomViewProps): ReactElement {
 interface ILocalRoomCreateLoaderProps {
     localRoom: LocalRoom;
     names: string;
-    mainSplitContentType: MainSplitContentType;
 }
 
 /**
@@ -2134,11 +2132,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
         const names = this.state.room.getDefaultRoomName(this.context.client.getSafeUserId());
         return (
             <ScopedRoomContextProvider {...this.state} roomViewStore={this.roomViewStore}>
-                <LocalRoomCreateLoader
+                <LocalRoomCreateLoader localRoom={localRoom} names={names} />
-                    localRoom={localRoom}
-                    names={names}
-                    mainSplitContentType={this.state.mainSplitContentType}
-                />
             </ScopedRoomContextProvider>
         );
     }
@@ -2152,7 +2146,6 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
                     resizeNotifier={this.context.resizeNotifier}
                     permalinkCreator={this.permalinkCreator}
                     roomView={this.roomView}
-                    mainSplitContentType={this.state.mainSplitContentType}
                 />
             </ScopedRoomContextProvider>
         );
@@ -2346,7 +2339,6 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
                                 onForgetClick={this.onForgetClick}
                                 onDeclineClick={this.onDeclineButtonClicked}
                                 onDeclineAndBlockClick={this.onDeclineAndBlockButtonClicked}
-                                promptRejectionOptions={true}
                                 inviterName={inviterName}
                                 canPreview={false}
                                 joining={this.state.joining}
@@ -2460,7 +2452,6 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
                     onJoinClick={this.onJoinButtonClicked}
                     onForgetClick={this.onForgetClick}
                     onDeclineClick={this.onRejectThreepidInviteButtonClicked}
-                    promptRejectionOptions={true}
                     joining={this.state.joining}
                     inviterName={inviterName}
                     invitedEmail={invitedEmail}

apps/web/src/components/structures/SpaceHierarchy.tsx

@@ -863,25 +863,23 @@ const SpaceHierarchy: React.FC<IProps> = ({ space, initialText = "", showRoom, a
                     let results: JSX.Element | undefined;
                     if (filteredRoomSet.size && root) {
                         results = (
-                            <>
+                            <HierarchyLevel
-                                <HierarchyLevel
+                                root={root}
-                                    root={root}
+                                roomSet={filteredRoomSet}
-                                    roomSet={filteredRoomSet}
+                                hierarchy={hierarchy}
-                                    hierarchy={hierarchy}
+                                parents={new Set()}
-                                    parents={new Set()}
+                                selectedMap={selected}
-                                    selectedMap={selected}
+                                onToggleClick={hasPermissions ? onToggleClick : undefined}
-                                    onToggleClick={hasPermissions ? onToggleClick : undefined}
+                                onViewRoomClick={(roomId, roomType) => showRoom(cli, hierarchy, roomId, roomType)}
-                                    onViewRoomClick={(roomId, roomType) => showRoom(cli, hierarchy, roomId, roomType)}
+                                onJoinRoomClick={async (roomId, parents) => {
-                                    onJoinRoomClick={async (roomId, parents) => {
+                                    for (const parent of parents) {
-                                        for (const parent of parents) {
+                                        if (cli.getRoom(parent)?.getMyMembership() !== KnownMembership.Join) {
-                                            if (cli.getRoom(parent)?.getMyMembership() !== KnownMembership.Join) {
+                                            await joinRoom(cli, roomContext.roomViewStore, hierarchy, parent);
-                                                await joinRoom(cli, roomContext.roomViewStore, hierarchy, parent);
-                                            }
                                         }
-                                        await joinRoom(cli, roomContext.roomViewStore, hierarchy, roomId);
+                                    }
-                                    }}
+                                    await joinRoom(cli, roomContext.roomViewStore, hierarchy, roomId);
-                                />
+                                }}
-                            </>
+                            />
                         );
                     } else if (!hierarchy.canLoadMore) {
                         results = (

apps/web/src/components/structures/auth/Login.tsx

@@ -428,7 +428,6 @@ class LoginComponent extends React.PureComponent<IProps, IState> {
                 onPhoneNumberChanged={this.onPhoneNumberChanged}
                 onForgotPasswordClick={this.props.onForgotPasswordClick}
                 loginIncorrect={this.state.loginIncorrect}
-                serverConfig={this.props.serverConfig}
                 disableSubmit={this.isBusy()}
                 busy={this.props.isSyncing || this.state.busyLoggingIn}
             />
@@ -502,7 +501,7 @@ class LoginComponent extends React.PureComponent<IProps, IState> {
             footer = (
                 <div className="mx_AuthBody_paddedFooter">
                     <div className="mx_AuthBody_paddedFooter_title">
-                        <InlineSpinner w={20} h={20} />
+                        <InlineSpinner size={20} />
                         {this.props.isSyncing ? _t("auth|syncing") : _t("auth|signing_in")}
                     </div>
                     {this.props.isSyncing && (

apps/web/src/components/structures/auth/Registration.tsx

@@ -610,7 +610,6 @@ export default class Registration extends React.Component<IProps, IState> {
                         defaultPassword={this.state.formVals.password}
                         onRegisterClick={this.onFormSubmit}
                         flows={this.state.flows}
-                        serverConfig={this.props.serverConfig}
                         canSubmit={!this.state.serverErrorIsFatal}
                         matrixClient={this.state.matrixClient}
                         mobileRegister={this.props.mobileRegister}

apps/web/src/components/views/audio_messages/LiveRecordingWaveform.tsx

@@ -26,10 +26,6 @@ interface IState {
  * A waveform which shows the waveform of a live recording
  */
 export default class LiveRecordingWaveform extends React.PureComponent<IProps, IState> {
-    public static defaultProps = {
-        progress: 1,
-    };
-
     private waveform: number[] = [];
     private scheduledUpdate: MarkedExecution = new MarkedExecution(
         () => this.updateWaveform(),

apps/web/src/components/views/auth/CaptchaForm.tsx

@@ -26,10 +26,6 @@ interface ICaptchaFormState {
  * A pure UI component which displays a captcha form.
  */
 export default class CaptchaForm extends React.Component<ICaptchaFormProps, ICaptchaFormState> {
-    public static defaultProps = {
-        onCaptchaResponse: () => {},
-    };
-
     private captchaWidgetId?: string;
     private recaptchaContainer = createRef<HTMLDivElement>();
 

apps/web/src/components/views/auth/PasswordLogin.tsx

@@ -12,7 +12,6 @@ import { Button } from "@vector-im/compound-web";
 
 import { _t } from "../../../languageHandler";
 import SdkConfig from "../../../SdkConfig";
-import { type ValidatedServerConfig } from "../../../utils/ValidatedServerConfig";
 import AccessibleButton, { type ButtonEvent } from "../elements/AccessibleButton";
 import withValidation, { type IFieldState, type IValidationResult } from "../elements/Validation";
 import Field from "../elements/Field";
@@ -28,7 +27,6 @@ interface IProps {
     phoneCountry: string;
     phoneNumber: string;
 
-    serverConfig: ValidatedServerConfig;
     loginIncorrect: boolean;
     disableSubmit?: boolean;
     busy?: boolean;

apps/web/src/components/views/auth/RegistrationForm.tsx

@@ -9,7 +9,6 @@ Please see LICENSE files in the repository root for full details.
 
 import React, { type JSX, type BaseSyntheticEvent, type ComponentProps, type ReactNode } from "react";
 import { type MatrixClient, MatrixError } from "matrix-js-sdk/src/matrix";
-import { logger } from "matrix-js-sdk/src/logger";
 import { Button } from "@vector-im/compound-web";
 
 import * as Email from "../../../email";
@@ -19,7 +18,6 @@ import { _t, _td } from "../../../languageHandler";
 import SdkConfig from "../../../SdkConfig";
 import { SAFE_LOCALPART_REGEX } from "../../../Registration";
 import withValidation, { type IFieldState, type IValidationResult } from "../elements/Validation";
-import { type ValidatedServerConfig } from "../../../utils/ValidatedServerConfig";
 import EmailField from "./EmailField";
 import PassphraseField from "./PassphraseField";
 import Field from "../elements/Field";
@@ -56,7 +54,6 @@ interface IProps {
     flows: {
         stages: string[];
     }[];
-    serverConfig: ValidatedServerConfig;
     canSubmit?: boolean;
     matrixClient: MatrixClient;
     mobileRegister?: boolean;
@@ -68,7 +65,6 @@ interface IProps {
         phoneCountry?: string;
         phoneNumber?: string;
     }): Promise<void>;
-    onEditServerDetailsClick?(): void;
 }
 
 interface IState {
@@ -95,7 +91,6 @@ export default class RegistrationForm extends React.PureComponent<IProps, IState
     private [RegistrationField.PhoneNumber]: Field | null = null;
 
     public static defaultProps = {
-        onValidationChange: logger.error,
         canSubmit: true,
     };
 

apps/web/src/components/views/beacon/BeaconStatus.tsx

@@ -69,14 +69,12 @@ const BeaconStatus: React.FC<Props & HTMLProps<HTMLDivElement>> = ({
                 )}
                 {displayStatus === BeaconDisplayStatus.Active && beacon && (
                     <>
-                        <>
+                        <span className="mx_BeaconStatus_label">{label}</span>
-                            <span className="mx_BeaconStatus_label">{label}</span>
+                        {displayLiveTimeRemaining ? (
-                            {displayLiveTimeRemaining ? (
+                            <LiveTimeRemaining beacon={beacon} />
-                                <LiveTimeRemaining beacon={beacon} />
+                        ) : (
-                            ) : (
+                            <BeaconExpiryTime beacon={beacon} />
-                                <BeaconExpiryTime beacon={beacon} />
+                        )}
-                            )}
-                        </>
                     </>
                 )}
             </div>

apps/web/src/components/views/context_menus/MessageContextMenu.tsx

@@ -372,7 +372,6 @@ export default class MessageContextMenu extends React.Component<IProps, IState>
             {
                 matrixClient,
                 event: this.props.mxEvent,
-                getRelationsForEvent: this.props.getRelationsForEvent,
             },
             "mx_Dialog_endPoll",
         );

apps/web/src/components/views/dialogs/EndPollDialog.tsx

@@ -15,13 +15,11 @@ import QuestionDialog from "./QuestionDialog";
 import { findTopAnswer } from "../messages/MPollBody";
 import Modal from "../../../Modal";
 import ErrorDialog from "./ErrorDialog";
-import { type GetRelationsForEvent } from "../rooms/EventTile";
 
 interface IProps {
     matrixClient: MatrixClient;
     event: MatrixEvent;
     onFinished: (success?: boolean) => void;
-    getRelationsForEvent?: GetRelationsForEvent;
 }
 
 export default class EndPollDialog extends React.Component<IProps> {

apps/web/src/components/views/dialogs/ExportDialog.tsx

@@ -377,16 +377,14 @@ const ExportDialog: React.FC<IProps> = ({ room, onFinished }) => {
                     )}
 
                     {setAttachments && (
-                        <>
+                        <StyledCheckbox
-                            <StyledCheckbox
+                            className="mx_ExportDialog_attachments-checkbox"
-                                className="mx_ExportDialog_attachments-checkbox"
+                            id="include-attachments"
-                                id="include-attachments"
+                            checked={includeAttachments}
-                                checked={includeAttachments}
+                            onChange={(e) => setAttachments((e.target as HTMLInputElement).checked)}
-                                onChange={(e) => setAttachments((e.target as HTMLInputElement).checked)}
+                        >
-                            >
+                            {_t("export_chat|include_attachments")}
-                                {_t("export_chat|include_attachments")}
+                        </StyledCheckbox>
-                            </StyledCheckbox>
-                        </>
                     )}
                 </div>
                 {isExporting ? (

apps/web/src/components/views/dialogs/IncomingSasDialog.tsx

@@ -207,7 +207,6 @@ export default class IncomingSasDialog extends React.Component<IProps, IState> {
                 onCancel={this.onCancelClick}
                 onDone={this.onSasMatchesClick}
                 isSelf={this.props.verifier.userId === MatrixClientPeg.safeGet().getUserId()}
-                inDialog={true}
             />
         );
     }

apps/web/src/components/views/dialogs/InviteProgressBody.tsx

@@ -14,7 +14,7 @@ import { _t } from "../../../languageHandler";
 const InviteProgressBody: React.FC = () => {
     return (
         <div className="mx_InviteProgressBody">
-            <InlineSpinner w={32} h={32} />
+            <InlineSpinner size={32} />
             <h1>{_t("invite|progress|preparing")}</h1>
             {_t("invite|progress|dont_close")}
         </div>

apps/web/src/components/views/dialogs/UserSettingsDialog.tsx

@@ -166,7 +166,7 @@ export default function UserSettingsDialog(props: IProps): JSX.Element {
                 UserTab.Preferences,
                 _td("common|preferences"),
                 <PreferencesIcon />,
-                <PreferencesUserSettingsTab closeSettingsFn={props.onFinished} />,
+                <PreferencesUserSettingsTab />,
                 "UserSettingsPreferences",
             ),
         );
@@ -206,7 +206,7 @@ export default function UserSettingsDialog(props: IProps): JSX.Element {
                 UserTab.Security,
                 _td("room_settings|security|title"),
                 <LockIcon />,
-                <SecurityUserSettingsTab closeSettingsFn={props.onFinished} />,
+                <SecurityUserSettingsTab />,
                 "UserSettingsSecurityPrivacy",
             ),
         );

apps/web/src/components/views/dialogs/WidgetCapabilitiesPromptDialog.tsx

@@ -7,13 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React, { type ChangeEventHandler } from "react";
-import {
+import { type Capability, isTimelineCapability, WidgetEventCapability, type WidgetKind } from "matrix-widget-api";
-    type Capability,
-    isTimelineCapability,
-    type Widget,
-    WidgetEventCapability,
-    type WidgetKind,
-} from "matrix-widget-api";
 import { lexicographicCompare } from "matrix-js-sdk/src/utils";
 import { Form, SettingsToggleInput } from "@vector-im/compound-web";
 
@@ -26,7 +20,6 @@ import { CapabilityText } from "../../../widgets/CapabilityText";
 
 interface IProps {
     requestedCapabilities: Set<Capability>;
-    widget: Widget;
     widgetKind: WidgetKind; // TODO: Refactor into the Widget class
     onFinished(result?: { approved: Capability[]; remember: boolean }): void;
 }

apps/web/src/components/views/elements/AppTile.tsx

@@ -848,55 +848,53 @@ export default class AppTile extends React.Component<IProps, IState> {
         }
 
         return (
-            <React.Fragment>
+            <div className={appTileClasses} id={this.props.app.id}>
-                <div className={appTileClasses} id={this.props.app.id}>
+                {this.props.showMenubar && (
-                    {this.props.showMenubar && (
+                    <div className="mx_AppTileMenuBar">
-                        <div className="mx_AppTileMenuBar">
+                        <span
-                            <span
+                            className="mx_AppTileMenuBar_title"
-                                className="mx_AppTileMenuBar_title"
+                            style={{ pointerEvents: this.props.handleMinimisePointerEvents ? "all" : "none" }}
-                                style={{ pointerEvents: this.props.handleMinimisePointerEvents ? "all" : "none" }}
+                        >
-                            >
+                            {this.props.showTitle && this.getTileTitle()}
-                                {this.props.showTitle && this.getTileTitle()}
+                        </span>
-                            </span>
+                        <span className="mx_AppTileMenuBar_widgets">
-                            <span className="mx_AppTileMenuBar_widgets">
+                            {layoutButtons}
-                                {layoutButtons}
+                            {this.props.showPopout && !this.state.requiresClient && (
-                                {this.props.showPopout && !this.state.requiresClient && (
+                                <AccessibleButton
-                                    <AccessibleButton
+                                    className="mx_AppTileMenuBar_widgets_button"
-                                        className="mx_AppTileMenuBar_widgets_button"
+                                    title={_t("widget|popout")}
-                                        title={_t("widget|popout")}
+                                    onClick={this.onPopoutWidgetClick}
-                                        onClick={this.onPopoutWidgetClick}
+                                >
-                                    >
+                                    <PopOutIcon className="mx_Icon mx_Icon_12" />
-                                        <PopOutIcon className="mx_Icon mx_Icon_12" />
+                                </AccessibleButton>
-                                    </AccessibleButton>
+                            )}
-                                )}
+                            <I18nContext.Provider value={window.mxModuleApi.i18n}>
-                                <I18nContext.Provider value={window.mxModuleApi.i18n}>
+                                <WidgetContextMenu
-                                    <WidgetContextMenu
+                                    trigger={
-                                        trigger={
+                                        <ContextMenuButton
-                                            <ContextMenuButton
+                                            className="mx_AppTileMenuBar_widgets_button"
-                                                className="mx_AppTileMenuBar_widgets_button"
+                                            label={_t("common|options")}
-                                                label={_t("common|options")}
+                                            isExpanded={this.state.menuDisplayed}
-                                                isExpanded={this.state.menuDisplayed}
+                                            ref={this.contextMenuButton}
-                                                ref={this.contextMenuButton}
+                                            onClick={this.onContextMenuClick}
-                                                onClick={this.onContextMenuClick}
+                                        >
-                                            >
+                                            <OverflowHorizontalIcon className="mx_Icon mx_Icon_12" />
-                                                <OverflowHorizontalIcon className="mx_Icon mx_Icon_12" />
+                                        </ContextMenuButton>
-                                            </ContextMenuButton>
+                                    }
-                                        }
+                                    app={this.props.app}
-                                        app={this.props.app}
+                                    onFinished={this.closeContextMenu}
-                                        onFinished={this.closeContextMenu}
+                                    showUnpin={!this.props.userWidget}
-                                        showUnpin={!this.props.userWidget}
+                                    userWidget={this.props.userWidget}
-                                        userWidget={this.props.userWidget}
+                                    onEditClick={this.props.onEditClick}
-                                        onEditClick={this.props.onEditClick}
+                                    onDeleteClick={this.props.onDeleteClick}
-                                        onDeleteClick={this.props.onDeleteClick}
+                                    menuDisplayed={this.state.menuDisplayed}
-                                        menuDisplayed={this.state.menuDisplayed}
+                                />
-                                    />
+                            </I18nContext.Provider>
-                                </I18nContext.Provider>
+                        </span>
-                            </span>
+                    </div>
-                        </div>
+                )}
-                    )}
+                {appTileBody}
-                    {appTileBody}
+            </div>
-                </div>
-            </React.Fragment>
         );
     }
 }

apps/web/src/components/views/elements/Dropdown.tsx

@@ -37,10 +37,6 @@ interface IMenuOptionProps {
 }
 
 class MenuOption extends React.Component<IMenuOptionProps> {
-    public static defaultProps = {
-        disabled: false,
-    };
-
     private onMouseEnter = (): void => {
         this.props.onMouseEnter(this.props.dropdownKey);
     };

apps/web/src/components/views/elements/InlineSpinner.tsx

@@ -16,8 +16,7 @@ interface IProps {
 
 export default class InlineSpinner extends React.PureComponent<IProps> {
     public static defaultProps = {
-        w: 16,
+        size: 16,
-        h: 16,
     };
 
     public render(): React.ReactNode {

apps/web/src/components/views/elements/ReplyChain.tsx

@@ -15,7 +15,6 @@ import { _t } from "../../../languageHandler";
 import dis from "../../../dispatcher/dispatcher";
 import { makeUserPermalink, type RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks";
 import SettingsStore from "../../../settings/SettingsStore";
-import { type Layout } from "../../../settings/enums/Layout";
 import { getUserNameColorClass } from "../../../utils/FormattingUtils";
 import { Action } from "../../../dispatcher/actions";
 import Spinner from "./Spinner";
@@ -37,8 +36,6 @@ interface IProps {
     // the latest event in this chain of replies
     parentEv: MatrixEvent;
     permalinkCreator?: RoomPermalinkCreator;
-    // Specifies which layout to use.
-    layout?: Layout;
     // Whether to always show a timestamp
     alwaysShowTimestamps?: boolean;
     forExport?: boolean;

apps/web/src/components/views/location/LocationViewDialog.tsx

@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React from "react";
-import { type MatrixEvent, type MatrixClient } from "matrix-js-sdk/src/matrix";
+import { type MatrixEvent } from "matrix-js-sdk/src/matrix";
 
 import BaseDialog from "../dialogs/BaseDialog";
 import { locationEventGeoUri, isSelfLocation } from "../../../utils/location";
@@ -16,7 +16,6 @@ import SmartMarker from "./SmartMarker";
 import ZoomButtons from "./ZoomButtons";
 
 interface IProps {
-    matrixClient: MatrixClient;
     mxEvent: MatrixEvent;
     onFinished(): void;
 }

apps/web/src/components/views/messages/CallEvent.tsx

@@ -18,7 +18,7 @@ import type { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPaylo
 import { Action } from "../../../dispatcher/actions";
 import AccessibleButton, { type AccessibleButtonKind, type ButtonEvent } from "../elements/AccessibleButton";
 import MemberAvatar from "../avatars/MemberAvatar";
-import { LiveContentSummary, LiveContentType } from "../rooms/LiveContentSummary";
+import { LiveContentSummary } from "../rooms/LiveContentSummary";
 import FacePile from "../elements/FacePile";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import { CallDuration, SessionDuration } from "../voip/CallDuration";
@@ -66,7 +66,6 @@ const ActiveCallEvent = ({
                             {_t("timeline|m.call|video_call_started_text", { name: senderName })}
                         </span>
                         <LiveContentSummary
-                            type={LiveContentType.Video}
                             text={_t("voip|video_call")}
                             active={false}
                             participantCount={participatingMembers.length}

apps/web/src/components/views/messages/MLocationBody.tsx

@@ -53,7 +53,6 @@ export default class MLocationBody extends React.Component<IBodyProps, IState> {
         Modal.createDialog(
             LocationViewDialog,
             {
-                matrixClient: this.context,
                 mxEvent: this.props.mxEvent,
             },
             "mx_LocationViewDialog_wrapper",

apps/web/src/components/views/polls/PollOption.tsx

@@ -44,7 +44,7 @@ interface PollOptionProps extends PollOptionContentProps {
     children?: ReactNode;
 }
 
-const ActivePollOption: React.FC<Omit<PollOptionProps, "totalVoteCount"> & { children: ReactNode }> = ({
+const ActivePollOption: React.FC<Omit<PollOptionProps, "totalVoteCount">> = ({
     pollId,
     isChecked,
     isEnded,

apps/web/src/components/views/right_panel/BaseCard.tsx

@@ -31,7 +31,6 @@ interface IProps {
     onClose?(this: void, ev: MouseEvent<HTMLButtonElement>): void;
     onBack?(this: void, ev: MouseEvent<HTMLButtonElement>): void;
     onKeyDown?(this: void, ev: KeyboardEvent): void;
-    cardState?: any;
     ref?: Ref<HTMLDivElement>;
     // Ref for the 'close' button the card
     closeButtonRef?: Ref<HTMLButtonElement>;

apps/web/src/components/views/right_panel/EncryptionPanel.tsx

@@ -167,7 +167,6 @@ const EncryptionPanel: React.FC<IProps> = (props: IProps) => {
                 member={member}
                 request={request}
                 key={request.transactionId}
-                inDialog={layout === "dialog"}
                 phase={phase}
             />
         );

apps/web/src/components/views/right_panel/UserInfo.tsx

@@ -24,7 +24,6 @@ import { useIsEncrypted } from "../../../hooks/useIsEncrypted";
 import BaseCard from "./BaseCard";
 import QuestionDialog from "../dialogs/QuestionDialog";
 import RightPanelStore from "../../../stores/right-panel/RightPanelStore";
-import { type IRightPanelCardState } from "../../../stores/right-panel/RightPanelStoreIPanelState";
 import PosthogTrackers from "../../../PosthogTrackers";
 import { UserInfoHeaderView } from "./user_info/UserInfoHeaderView";
 import { UserInfoBasicView } from "./user_info/UserInfoBasicView";
@@ -192,12 +191,6 @@ const UserInfo: React.FC<IProps> = ({ user, room, onClose, phase = RightPanelPha
 
     const classes = ["mx_UserInfo"];
 
-    let cardState: IRightPanelCardState = {};
-    // We have no previousPhase for when viewing a UserInfo without a Room at this time
-    if (room && phase === RightPanelPhases.EncryptionPanel) {
-        cardState = { member };
-    }
-
     const onEncryptionPanelClose = (): void => {
         RightPanelStore.instance.popCard();
     };
@@ -229,14 +222,12 @@ const UserInfo: React.FC<IProps> = ({ user, room, onClose, phase = RightPanelPha
     }
 
     const header = (
-        <>
+        <UserInfoHeaderView
-            <UserInfoHeaderView
+            hideVerificationSection={phase === RightPanelPhases.EncryptionPanel}
-                hideVerificationSection={phase === RightPanelPhases.EncryptionPanel}
+            member={member}
-                member={member}
+            devices={devices}
-                devices={devices}
+            roomId={room?.roomId}
-                roomId={room?.roomId}
+        />
-            />
-        </>
     );
 
     return (
@@ -245,7 +236,6 @@ const UserInfo: React.FC<IProps> = ({ user, room, onClose, phase = RightPanelPha
             header={_t("common|profile")}
             onClose={onClose}
             closeLabel={closeLabel}
-            cardState={cardState}
             onBack={(ev: ButtonEvent) => {
                 if (RightPanelStore.instance.previousCard.phase === RightPanelPhases.MemberList) {
                     PosthogTrackers.trackInteraction("WebRightPanelRoomUserInfoBackButton", ev);

apps/web/src/components/views/right_panel/VerificationPanel.tsx

@@ -37,7 +37,6 @@ interface IProps {
     phase?: Phase;
     onClose: () => void;
     isRoomEncrypted: boolean;
-    inDialog: boolean;
 }
 
 interface IState {
@@ -327,7 +326,6 @@ export default class VerificationPanel extends React.PureComponent<IProps, IStat
                                 sas={this.state.sasEvent.sas}
                                 onCancel={this.onSasMismatchesClick}
                                 onDone={this.onSasMatchesClick}
-                                inDialog={this.props.inDialog}
                                 isSelf={request.isSelfVerification}
                             />
                         ) : (

apps/web/src/components/views/room_settings/RoomPublishSetting.tsx

@@ -20,7 +20,6 @@ import { onSubmitPreventDefault } from "../../../utils/form.ts";
 
 interface IProps {
     roomId: string;
-    label?: string;
     canSetCanonicalAlias?: boolean;
 }
 

apps/web/src/components/views/rooms/EventTile.tsx

@@ -1080,7 +1080,6 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
                     ref={this.replyChain}
                     forExport={this.props.forExport}
                     permalinkCreator={this.props.permalinkCreator}
-                    layout={this.props.layout}
                     alwaysShowTimestamps={eventTileSnapshot.replyChain.alwaysShowTimestamps}
                     isQuoteExpanded={isQuoteExpanded}
                     setQuoteExpanded={this.setQuoteExpanded}

apps/web/src/components/views/rooms/LiveContentSummary.tsx

@@ -12,12 +12,7 @@ import { GroupIcon, VideoCallSolidIcon } from "@vector-im/compound-design-tokens
 
 import { _t } from "../../../languageHandler";
 
-export enum LiveContentType {
-    Video,
-}
-
 interface Props {
-    type: LiveContentType;
     text: string;
     active: boolean;
     participantCount: number;

apps/web/src/components/views/rooms/MessageComposer.tsx

@@ -123,7 +123,6 @@ export class MessageComposer extends React.Component<IProps, IState> {
 
     public static defaultProps = {
         compact: false,
-        isRichTextEnabled: true,
     };
 
     public constructor(props: IProps) {

apps/web/src/components/views/rooms/MessageComposerFormatBar.tsx

@@ -64,41 +64,35 @@ export default class MessageComposerFormatBar extends React.PureComponent<IProps
                     onClick={() => this.props.onAction(Formatting.Bold)}
                     icon={<BoldIcon />}
                     shortcut={this.props.shortcuts.bold}
-                    visible={this.state.visible}
                 />
                 <FormatButton
                     label={_t("composer|format_italics")}
                     onClick={() => this.props.onAction(Formatting.Italics)}
                     icon={<ItalicIcon />}
                     shortcut={this.props.shortcuts.italics}
-                    visible={this.state.visible}
                 />
                 <FormatButton
                     label={_t("composer|format_strikethrough")}
                     onClick={() => this.props.onAction(Formatting.Strikethrough)}
                     icon={<StrikethroughIcon />}
-                    visible={this.state.visible}
                 />
                 <FormatButton
                     label={_t("composer|format_code_block")}
                     onClick={() => this.props.onAction(Formatting.Code)}
                     icon={<InlineCodeIcon />}
                     shortcut={this.props.shortcuts.code}
-                    visible={this.state.visible}
                 />
                 <FormatButton
                     label={_t("action|quote")}
                     onClick={() => this.props.onAction(Formatting.Quote)}
                     icon={<QuoteIcon />}
                     shortcut={this.props.shortcuts.quote}
-                    visible={this.state.visible}
                 />
                 <FormatButton
                     label={_t("composer|format_insert_link")}
                     onClick={() => this.props.onAction(Formatting.InsertLink)}
                     icon={<LinkIcon />}
                     shortcut={this.props.shortcuts.insert_link}
-                    visible={this.state.visible}
                 />
             </Toolbar>
         );
@@ -126,7 +120,6 @@ interface IFormatButtonProps {
     label: string;
     icon: JSX.Element;
     shortcut?: string;
-    visible?: boolean;
     onClick(): void;
 }
 

apps/web/src/components/views/rooms/ReadReceiptGroup.tsx

@@ -124,8 +124,6 @@ export function ReadReceiptGroup({
                     readReceiptPosition={readReceiptPosition}
                     checkUnmounting={checkUnmounting}
                     suppressAnimation={suppressAnimation}
-                    timestamp={receipt.ts}
-                    showTwelveHour={isTwelveHour}
                 />
             );
         })

apps/web/src/components/views/rooms/ReadReceiptMarker.tsx

@@ -46,12 +46,6 @@ interface IProps {
     // unmounted, to avoid unnecessary work. Should return true if we
     // are being unmounted.
     checkUnmounting?: () => boolean;
-
-    // Timestamp when the receipt was read
-    timestamp?: number;
-
-    // True to show twelve hour format, false otherwise
-    showTwelveHour?: boolean;
 }
 
 interface IState {

apps/web/src/components/views/rooms/RoomHeader/RoomHeader.tsx

@@ -459,93 +459,91 @@ export default function RoomHeader({
     };
 
     return (
-        <>
+        <CurrentRightPanelPhaseContextProvider roomId={room.roomId}>
-            <CurrentRightPanelPhaseContextProvider roomId={room.roomId}>
+            <Flex as="header" align="center" gap="var(--cpd-space-3x)" className="mx_RoomHeader light-panel">
-                <Flex as="header" align="center" gap="var(--cpd-space-3x)" className="mx_RoomHeader light-panel">
+                <WithPresenceIndicator room={room}>
-                    <WithPresenceIndicator room={room}>
+                    {/* We hide this from the tabIndex list as it is a pointer shortcut and superfluous for a11y */}
-                        {/* We hide this from the tabIndex list as it is a pointer shortcut and superfluous for a11y */}
-                        {/* Disable on-click actions until the room is created */}
-                        <RoomAvatar
-                            room={room}
-                            size="40px"
-                            oobData={oobData}
-                            onClick={room instanceof LocalRoom ? undefined : onAvatarClick}
-                            tabIndex={-1}
-                            aria-label={_t("room|header_avatar_open_settings_label")}
-                        />
-                    </WithPresenceIndicator>
                     {/* Disable on-click actions until the room is created */}
-                    <button
+                    <RoomAvatar
-                        aria-label={_t("right_panel|room_summary_card|title")}
+                        room={room}
-                        tabIndex={0}
+                        size="40px"
-                        onClick={
+                        oobData={oobData}
-                            room instanceof LocalRoom
+                        onClick={room instanceof LocalRoom ? undefined : onAvatarClick}
-                                ? undefined
+                        tabIndex={-1}
-                                : () => RightPanelStore.instance.showOrHidePhase(RightPanelPhases.RoomSummary)
+                        aria-label={_t("room|header_avatar_open_settings_label")}
-                        }
+                    />
-                        className="mx_RoomHeader_infoWrapper"
+                </WithPresenceIndicator>
-                    >
+                {/* Disable on-click actions until the room is created */}
-                        <Box flex="1" className="mx_RoomHeader_info">
+                <button
-                            <Text
+                    aria-label={_t("right_panel|room_summary_card|title")}
-                                as="div"
+                    tabIndex={0}
-                                size="lg"
+                    onClick={
-                                weight="semibold"
+                        room instanceof LocalRoom
-                                dir="auto"
+                            ? undefined
-                                role="heading"
+                            : () => RightPanelStore.instance.showOrHidePhase(RightPanelPhases.RoomSummary)
-                                aria-level={1}
+                    }
-                                className="mx_RoomHeader_heading"
+                    className="mx_RoomHeader_infoWrapper"
-                            >
+                >
-                                <span className="mx_RoomHeader_truncated mx_lineClamp">{roomName}</span>
+                    <Box flex="1" className="mx_RoomHeader_info">
+                        <Text
+                            as="div"
+                            size="lg"
+                            weight="semibold"
+                            dir="auto"
+                            role="heading"
+                            aria-level={1}
+                            className="mx_RoomHeader_heading"
+                        >
+                            <span className="mx_RoomHeader_truncated mx_lineClamp">{roomName}</span>
 
-                                {!isDirectMessage && joinRule === JoinRule.Public && (
+                            {!isDirectMessage && joinRule === JoinRule.Public && (
-                                    <Tooltip label={_t("common|public_room")} placement="right">
+                                <Tooltip label={_t("common|public_room")} placement="right">
-                                        <PublicIcon
+                                    <PublicIcon
-                                            width="16px"
+                                        width="16px"
-                                            height="16px"
+                                        height="16px"
-                                            className="mx_RoomHeader_icon"
+                                        className="mx_RoomHeader_icon"
-                                            color="var(--cpd-color-icon-info-primary)"
+                                        color="var(--cpd-color-icon-info-primary)"
-                                            aria-label={_t("common|public_room")}
+                                        aria-label={_t("common|public_room")}
-                                        />
+                                    />
-                                    </Tooltip>
+                                </Tooltip>
-                                )}
+                            )}
 
-                                {isDirectMessage && e2eStatus === E2EStatus.Verified && (
+                            {isDirectMessage && e2eStatus === E2EStatus.Verified && (
-                                    <Tooltip label={_t("common|verified")} placement="right">
+                                <Tooltip label={_t("common|verified")} placement="right">
-                                        <VerifiedIcon
+                                    <VerifiedIcon
-                                            width="16px"
+                                        width="16px"
-                                            height="16px"
+                                        height="16px"
-                                            className="mx_RoomHeader_icon mx_Verified"
+                                        className="mx_RoomHeader_icon mx_Verified"
-                                            aria-label={_t("common|verified")}
+                                        aria-label={_t("common|verified")}
-                                        />
+                                    />
-                                    </Tooltip>
+                                </Tooltip>
-                                )}
+                            )}
 
-                                {isDirectMessage && e2eStatus === E2EStatus.Warning && (
+                            {isDirectMessage && e2eStatus === E2EStatus.Warning && (
-                                    <Tooltip label={_t("room|header_untrusted_label")} placement="right">
+                                <Tooltip label={_t("room|header_untrusted_label")} placement="right">
-                                        <ErrorIcon
+                                    <ErrorIcon
-                                            width="16px"
+                                        width="16px"
-                                            height="16px"
+                                        height="16px"
-                                            className="mx_RoomHeader_icon mx_Untrusted"
+                                        className="mx_RoomHeader_icon mx_Untrusted"
-                                            aria-label={_t("room|header_untrusted_label")}
+                                        aria-label={_t("room|header_untrusted_label")}
-                                        />
+                                    />
-                                    </Tooltip>
+                                </Tooltip>
-                                )}
+                            )}
 
-                                {isRoomEncrypted && historyVisibilityIcon(historyVisibility)}
+                            {isRoomEncrypted && historyVisibilityIcon(historyVisibility)}
-                            </Text>
+                        </Text>
-                        </Box>
+                    </Box>
-                    </button>
+                </button>
-                    {/* If the room is local-only then we don't want to show any additional buttons, as it won't work */}
+                {/* If the room is local-only then we don't want to show any additional buttons, as it won't work */}
-                    {room instanceof LocalRoom === false && (
+                {room instanceof LocalRoom === false && (
-                        <RoomHeaderButtons
+                    <RoomHeaderButtons
-                            room={room}
+                        room={room}
-                            legacyAdditionalButtons={legacyAdditionalButtons}
+                        legacyAdditionalButtons={legacyAdditionalButtons}
-                            extraButtons={extraButtons}
+                        extraButtons={extraButtons}
-                        />
+                    />
-                    )}
+                )}
-                </Flex>
+            </Flex>
-                {askToJoinEnabled && <RoomKnocksBar room={room} />}
+            {askToJoinEnabled && <RoomKnocksBar room={room} />}
-            </CurrentRightPanelPhaseContextProvider>
+        </CurrentRightPanelPhaseContextProvider>
-        </>
     );
 }

apps/web/src/components/views/rooms/RoomPreviewBar.tsx

@@ -99,11 +99,6 @@ interface IProps {
     canAskToJoinAndMembershipIsLeave?: boolean;
     promptAskToJoin?: boolean;
 
-    /**
-     * If true, this will prompt for additional safety options
-     * like reporting an invite or ignoring the user.
-     */
-    promptRejectionOptions?: boolean;
     knocked?: boolean;
     onSubmitAskToJoin?(reason?: string): void;
     onCancelAskToJoin?(): void;
@@ -322,7 +317,6 @@ class RoomPreviewBar extends React.Component<IProps, IState> {
         let dangerActionHandler: (() => void) | undefined;
         let dangerActionLabel: string | undefined;
         let footer: JSX.Element | undefined;
-        const extraComponents: JSX.Element[] = [];
 
         const messageCase = this.getMessageCase();
         switch (messageCase) {
@@ -715,13 +709,11 @@ class RoomPreviewBar extends React.Component<IProps, IState> {
             <>
                 {dangerActionButton}
                 {secondaryButton}
-                {extraComponents}
                 {primaryButton}
             </>
         ) : (
             <>
                 {primaryButton}
-                {extraComponents}
                 {secondaryButton}
                 {dangerActionButton}
             </>

apps/web/src/components/views/rooms/RoomSublist.tsx

@@ -818,25 +818,23 @@ export default class RoomSublist extends React.Component<IProps, IState> {
             });
 
             content = (
-                <React.Fragment>
+                <Resizable
-                    <Resizable
+                    size={{ height: this.state.height } as any}
-                        size={{ height: this.state.height } as any}
+                    minHeight={minTilesPx}
-                        minHeight={minTilesPx}
+                    maxHeight={maxTilesPx}
-                        maxHeight={maxTilesPx}
+                    onResizeStart={this.onResizeStart}
-                        onResizeStart={this.onResizeStart}
+                    onResizeStop={this.onResizeStop}
-                        onResizeStop={this.onResizeStop}
+                    onResize={this.onResize}
-                        onResize={this.onResize}
+                    handleWrapperClass={handleWrapperClasses}
-                        handleWrapperClass={handleWrapperClasses}
+                    handleClasses={{ bottom: "mx_RoomSublist_resizerHandle" }}
-                        handleClasses={{ bottom: "mx_RoomSublist_resizerHandle" }}
+                    className="mx_RoomSublist_resizeBox"
-                        className="mx_RoomSublist_resizeBox"
+                    enable={handles}
-                        enable={handles}
+                >
-                    >
+                    <div className="mx_RoomSublist_tiles" ref={this.tilesRef}>
-                        <div className="mx_RoomSublist_tiles" ref={this.tilesRef}>
+                        {visibleTiles}
-                            {visibleTiles}
+                    </div>
-                        </div>
+                    {showNButton}
-                        {showNButton}
+                </Resizable>
-                    </Resizable>
-                </React.Fragment>
             );
         } else if (this.props.showSkeleton && this.state.isExpanded) {
             content = <div className="mx_RoomSublist_skeletonUI" />;

apps/web/src/components/views/rooms/RoomTile.tsx

@@ -446,36 +446,34 @@ class RoomTile extends React.PureComponent<Props, State> {
         }
 
         return (
-            <React.Fragment>
+            <RovingTabIndexWrapper inputRef={this.roomTileRef}>
-                <RovingTabIndexWrapper inputRef={this.roomTileRef}>
+                {({ onFocus, isActive, ref }) => (
-                    {({ onFocus, isActive, ref }) => (
+                    <AccessibleButton
-                        <AccessibleButton
+                        onFocus={onFocus}
-                            onFocus={onFocus}
+                        tabIndex={isActive ? 0 : -1}
-                            tabIndex={isActive ? 0 : -1}
+                        ref={ref}
-                            ref={ref}
+                        className={classes}
-                            className={classes}
+                        onClick={this.onTileClick}
-                            onClick={this.onTileClick}
+                        onContextMenu={this.onContextMenu}
-                            onContextMenu={this.onContextMenu}
+                        role="treeitem"
-                            role="treeitem"
+                        aria-label={ariaLabel}
-                            aria-label={ariaLabel}
+                        aria-selected={this.state.selected}
-                            aria-selected={this.state.selected}
+                        aria-describedby={ariaDescribedBy}
-                            aria-describedby={ariaDescribedBy}
+                        title={this.props.isMinimized && !this.state.generalMenuPosition ? name : undefined}
-                            title={this.props.isMinimized && !this.state.generalMenuPosition ? name : undefined}
+                    >
-                        >
+                        <DecoratedRoomAvatar
-                            <DecoratedRoomAvatar
+                            room={this.props.room}
-                                room={this.props.room}
+                            size="32px"
-                                size="32px"
+                            displayBadge={this.props.isMinimized}
-                                displayBadge={this.props.isMinimized}
+                            tooltipProps={{ tabIndex: isActive ? 0 : -1 }}
-                                tooltipProps={{ tabIndex: isActive ? 0 : -1 }}
+                        />
-                            />
+                        {titleContainer}
-                            {titleContainer}
+                        {badge}
-                            {badge}
+                        {this.renderGeneralMenu()}
-                            {this.renderGeneralMenu()}
+                        {this.renderNotificationsMenu(isActive)}
-                            {this.renderNotificationsMenu(isActive)}
+                    </AccessibleButton>
-                        </AccessibleButton>
+                )}
-                    )}
+            </RovingTabIndexWrapper>
-                </RovingTabIndexWrapper>
-            </React.Fragment>
         );
     }
 }

apps/web/src/components/views/rooms/RoomTileCallSummary.tsx

@@ -12,7 +12,7 @@ import type { Call } from "../../../models/Call";
 import { _t } from "../../../languageHandler";
 import { useConnectionState, useParticipantCount } from "../../../hooks/useCall";
 import { ConnectionState } from "../../../models/Call";
-import { LiveContentSummary, LiveContentType } from "./LiveContentSummary";
+import { LiveContentSummary } from "./LiveContentSummary";
 
 interface Props {
     call: Call;
@@ -34,12 +34,5 @@ export const RoomTileCallSummary: FC<Props> = ({ call }) => {
             break;
     }
 
-    return (
+    return <LiveContentSummary text={text} active={active} participantCount={useParticipantCount(call)} />;
-        <LiveContentSummary
-            type={LiveContentType.Video}
-            text={text}
-            active={active}
-            participantCount={useParticipantCount(call)}
-        />
-    );
 };

apps/web/src/components/views/rooms/VoiceRecordComposerTile.tsx

@@ -169,11 +169,7 @@ export default class VoiceRecordComposerTile extends React.PureComponent<IProps,
         const accessError = (): void => {
             Modal.createDialog(ErrorDialog, {
                 title: _t("voip|unable_to_access_audio_input_title"),
-                description: (
+                description: <p>{_t("voip|unable_to_access_audio_input_description")}</p>,
-                    <>
-                        <p>{_t("voip|unable_to_access_audio_input_description")}</p>
-                    </>
-                ),
             });
         };
 
@@ -184,11 +180,7 @@ export default class VoiceRecordComposerTile extends React.PureComponent<IProps,
             if (!devices?.[MediaDeviceKindEnum.AudioInput]?.length) {
                 Modal.createDialog(ErrorDialog, {
                     title: _t("voip|no_audio_input_title"),
-                    description: (
+                    description: <p>{_t("voip|no_audio_input_description")}</p>,
-                        <>
-                            <p>{_t("voip|no_audio_input_description")}</p>
-                        </>
-                    ),
                 });
                 return;
             }
@@ -288,7 +280,7 @@ export default class VoiceRecordComposerTile extends React.PureComponent<IProps,
         if (this.state.recordingPhase === RecordingState.Uploading) {
             uploadIndicator = (
                 <span className="mx_VoiceRecordComposerTile_uploadingState">
-                    <InlineSpinner w={16} h={16} />
+                    <InlineSpinner size={16} />
                 </span>
             );
         } else if (this.state.didUploadFail && this.state.recordingPhase === RecordingState.Ended) {

apps/web/src/components/views/settings/ChangePassword.tsx

@@ -38,7 +38,6 @@ interface IProps {
     buttonClassName?: string;
     buttonKind?: AccessibleButtonKind;
     buttonLabel?: string;
-    confirm?: boolean;
     // Whether to autoFocus the new password input
     autoFocusNewPasswordInput?: boolean;
     className?: string;
@@ -61,8 +60,6 @@ export default class ChangePassword extends React.Component<IProps, IState> {
     public static defaultProps: Partial<IProps> = {
         onFinished() {},
         onError() {},
-
-        confirm: true,
     };
 
     public constructor(props: IProps) {

apps/web/src/components/views/settings/discovery/DiscoverySettings.tsx

@@ -132,7 +132,6 @@ export const DiscoverySettings: React.FC = () => {
             <>
                 <InlineTermsAgreement
                     policiesAndServicePairs={requiredPolicyInfo.policiesAndServices}
-                    agreedUrls={requiredPolicyInfo.agreedUrls}
                     onFinished={requiredPolicyInfo.resolve}
                     introElement={intro}
                 />

apps/web/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.tsx

@@ -9,6 +9,7 @@ Please see LICENSE files in the repository root for full details.
 
 import React, { type ChangeEvent, type JSX, type ReactElement, useCallback, useEffect, useState } from "react";
 import { SettingsToggleInput } from "@vector-im/compound-web";
+import { type EmptyObject } from "matrix-js-sdk/src/matrix";
 
 import { type NonEmptyArray } from "../../../../../@types/common";
 import { _t, getCurrentLanguage } from "../../../../../languageHandler";
@@ -36,14 +37,9 @@ import { MediaPreviewAccountSettings } from "./MediaPreviewAccountSettings.tsx";
 import { InviteRulesAccountSetting } from "./InviteRulesAccountSettings.tsx";
 import SettingsDropdown from "../../../elements/SettingsDropdown.tsx";
 
-interface IProps {
-    closeSettingsFn(success: boolean): void;
-}
-
 interface IState {
     timezone: string | undefined;
     timezones: string[];
-    timezoneSearch: string | undefined;
     autocompleteDelay: string;
     readMarkerInViewThresholdMs: string;
     readMarkerOutOfViewThresholdMs: string;
@@ -120,7 +116,7 @@ const SpellCheckSection: React.FC = () => {
     );
 };
 
-export default class PreferencesUserSettingsTab extends React.Component<IProps, IState> {
+export default class PreferencesUserSettingsTab extends React.Component<EmptyObject, IState> {
     private static ROOM_LIST_SETTINGS: BooleanSettingKey[] = ["breadcrumbs"];
 
     private static SPACES_SETTINGS: BooleanSettingKey[] = ["Spaces.allRoomsInHome"];
@@ -171,13 +167,12 @@ export default class PreferencesUserSettingsTab extends React.Component<IProps,
         // Autocomplete delay (niche text box)
     ];
 
-    public constructor(props: IProps) {
+    public constructor(props: EmptyObject) {
         super(props);
 
         this.state = {
             timezone: TimezoneHandler.getUserTimezone(),
             timezones: TimezoneHandler.getAllTimezones(),
-            timezoneSearch: undefined,
             autocompleteDelay: SettingsStore.getValueAt(SettingLevel.DEVICE, "autocompleteDelay").toString(10),
             readMarkerInViewThresholdMs: SettingsStore.getValueAt(
                 SettingLevel.DEVICE,
@@ -206,7 +201,7 @@ export default class PreferencesUserSettingsTab extends React.Component<IProps,
               })
             : TimezoneHandler.getAllTimezones();
 
-        this.setState({ timezones, timezoneSearch });
+        this.setState({ timezones });
     };
 
     private onAutocompleteDelayChange = (e: React.ChangeEvent<HTMLInputElement>): void => {

apps/web/src/components/views/settings/tabs/user/SecurityUserSettingsTab.tsx

@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
 
 import React, { type JSX, type ReactNode } from "react";
 import { sleep } from "matrix-js-sdk/src/utils";
-import { type Room, RoomEvent, type IServerVersions } from "matrix-js-sdk/src/matrix";
+import { type Room, RoomEvent, type EmptyObject } from "matrix-js-sdk/src/matrix";
 import { KnownMembership, type Membership } from "matrix-js-sdk/src/types";
 import { logger } from "matrix-js-sdk/src/logger";
 import { WarningIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
@@ -80,22 +80,17 @@ export class IgnoredUser extends React.Component<IIgnoredUserProps> {
     }
 }
 
-interface IProps {
-    closeSettingsFn: () => void;
-}
-
 interface IState {
     ignoredUserIds: string[];
     waitingUnignored: string[];
     managingInvites: boolean;
     invitedRoomIds: Set<string>;
-    versions?: IServerVersions;
 }
 
-export default class SecurityUserSettingsTab extends React.Component<IProps, IState> {
+export default class SecurityUserSettingsTab extends React.Component<EmptyObject, IState> {
     private dispatcherRef?: string;
 
-    public constructor(props: IProps) {
+    public constructor(props: EmptyObject) {
         super(props);
 
         // Get rooms we're invited to
@@ -120,9 +115,6 @@ export default class SecurityUserSettingsTab extends React.Component<IProps, ISt
     public componentDidMount(): void {
         this.dispatcherRef = dis.register(this.onAction);
         MatrixClientPeg.safeGet().on(RoomEvent.MyMembership, this.onMyMembership);
-        MatrixClientPeg.safeGet()
-            .getVersions()
-            .then((versions) => this.setState({ versions }));
     }
 
     public componentWillUnmount(): void {

apps/web/src/components/views/terms/InlineTermsAgreement.tsx

@@ -18,7 +18,6 @@ import ExternalLink from "../elements/ExternalLink.tsx";
 interface IProps {
     policiesAndServicePairs: ServicePolicyPair[];
     onFinished: (accepted: string[]) => void;
-    agreedUrls: string[]; // array of URLs the user has accepted
     introElement: React.ReactNode;
 }
 

apps/web/src/components/views/verification/VerificationShowSas.tsx

@@ -16,7 +16,6 @@ import { PendingActionSpinner } from "../right_panel/EncryptionInfo";
 import AccessibleButton from "../elements/AccessibleButton";
 
 interface IProps {
-    pending?: boolean;
     displayName?: string; // required if pending is true
 
     /** Details of the other device involved in the verification, if known */
@@ -26,7 +25,6 @@ interface IProps {
     onCancel: () => void;
     sas: GeneratedSas;
     isSelf?: boolean;
-    inDialog?: boolean; // whether this component is being shown in a dialog and to use DialogButtons
 }
 
 interface IState {

apps/web/src/settings/Settings.tsx

@@ -427,13 +427,11 @@ export const SETTINGS: Settings = {
         betaInfo: {
             title: _td("labs|notification_settings_beta_title"),
             caption: () => (
-                <>
+                <p>
-                    <p>
+                    {_t("labs|notification_settings_beta_caption", {
-                        {_t("labs|notification_settings_beta_caption", {
+                        brand: SdkConfig.get().brand,
-                            brand: SdkConfig.get().brand,
+                    })}
-                        })}
+                </p>
-                    </p>
-                </>
             ),
         },
     },

apps/web/src/stores/widgets/ElementWidgetDriver.ts

@@ -281,7 +281,6 @@ export class ElementWidgetDriver extends WidgetDriver {
             try {
                 const [result] = await Modal.createDialog(WidgetCapabilitiesPromptDialog, {
                     requestedCapabilities: missing,
-                    widget: this.forWidget,
                     widgetKind: this.forWidgetKind,
                 }).finished;
                 result?.approved?.forEach((cap) => allowedSoFar.add(cap));

apps/web/src/toasts/IncomingCallToast.tsx

@@ -86,9 +86,7 @@ const MAX_RING_TIME_MS = 90 * 1000;
 
 interface JoinCallButtonWithCallProps {
     onClick: (e: ButtonEvent) => void;
-    call: Call | null;
     disabledTooltip: string | undefined;
-    isRinging: boolean;
 }
 
 function JoinCallButtonWithCall({ onClick, disabledTooltip }: JoinCallButtonWithCallProps): JSX.Element {
@@ -379,8 +377,6 @@ export function IncomingCallToast({ notificationEvent, toastKey }: Props): JSX.E
                 />
                 <JoinCallButtonWithCall
                     onClick={onJoinClick}
-                    call={call}
-                    isRinging={notificationContent.notification_type === "ring"}
                     disabledTooltip={otherCallIsOngoing ? "Ongoing call" : undefined}
                 />
             </div>

apps/web/test/unit-tests/components/structures/LeftPanel-test.tsx

@@ -12,7 +12,6 @@ import { render, type RenderResult, screen } from "jest-matrix-react";
 import { mocked } from "jest-mock";
 
 import LeftPanel from "../../../../src/components/structures/LeftPanel";
-import PageType from "../../../../src/PageTypes";
 import ResizeNotifier from "../../../../src/utils/ResizeNotifier";
 import { shouldShowComponent } from "../../../../src/customisations/helpers/UIComponents";
 import { UIComponent } from "../../../../src/settings/UIFeature";
@@ -23,9 +22,7 @@ jest.mock("../../../../src/customisations/helpers/UIComponents", () => ({
 
 describe("LeftPanel", () => {
     function renderComponent(): RenderResult {
-        return render(
+        return render(<LeftPanel isMinimized={false} resizeNotifier={new ResizeNotifier()} />);
-            <LeftPanel isMinimized={false} pageType={PageType.RoomView} resizeNotifier={new ResizeNotifier()} />,
-        );
     }
 
     it("does not show filter container when disabled by UIComponent customisations", () => {

apps/web/test/unit-tests/components/views/dialogs/WidgetCapabilitiesPromptDialog-test.tsx

@@ -13,11 +13,6 @@ import WidgetCapabilitiesPromptDialog from "../../../../../src/components/views/
 import { stubClient } from "../../../../test-utils";
 
 describe("WidgetCapabilitiesPromptDialog", () => {
-    const mockWidget = {
-        id: "test-widget",
-        name: "Test Widget",
-    } as any;
-
     const onFinished = jest.fn();
 
     beforeEach(() => {
@@ -39,7 +34,6 @@ describe("WidgetCapabilitiesPromptDialog", () => {
             const { container } = render(
                 <WidgetCapabilitiesPromptDialog
                     requestedCapabilities={capabilities}
-                    widget={mockWidget}
                     widgetKind={WidgetKind.Room}
                     onFinished={onFinished}
                 />,
@@ -65,7 +59,6 @@ describe("WidgetCapabilitiesPromptDialog", () => {
             render(
                 <WidgetCapabilitiesPromptDialog
                     requestedCapabilities={capabilities}
-                    widget={mockWidget}
                     widgetKind={WidgetKind.Room}
                     onFinished={onFinished}
                 />,
@@ -85,7 +78,6 @@ describe("WidgetCapabilitiesPromptDialog", () => {
             const { container } = render(
                 <WidgetCapabilitiesPromptDialog
                     requestedCapabilities={capabilities}
-                    widget={mockWidget}
                     widgetKind={WidgetKind.Room}
                     onFinished={onFinished}
                 />,
@@ -104,7 +96,6 @@ describe("WidgetCapabilitiesPromptDialog", () => {
             const { container } = render(
                 <WidgetCapabilitiesPromptDialog
                     requestedCapabilities={capabilities}
-                    widget={mockWidget}
                     widgetKind={WidgetKind.Room}
                     onFinished={onFinished}
                 />,
@@ -120,7 +111,6 @@ describe("WidgetCapabilitiesPromptDialog", () => {
             const { container } = render(
                 <WidgetCapabilitiesPromptDialog
                     requestedCapabilities={capabilities}
-                    widget={mockWidget}
                     widgetKind={WidgetKind.Room}
                     onFinished={onFinished}
                 />,

apps/web/test/unit-tests/components/views/dialogs/__snapshots__/InviteProgressBody-test.tsx.snap

@@ -15,7 +15,7 @@ exports[`InviteProgressBody should match snapshot 1`] = `
         fill="currentColor"
         height="1em"
         role="progressbar"
-        style="width: 20px; height: 20px;"
+        style="width: 32px; height: 32px;"
         viewBox="0 0 24 24"
         width="1em"
         xmlns="http://www.w3.org/2000/svg"

apps/web/test/unit-tests/components/views/dialogs/__snapshots__/RoomSettingsDialog-test.tsx.snap

@@ -197,7 +197,7 @@ exports[`<RoomSettingsDialog /> poll history displays poll history when tab clic
             fill="currentColor"
             height="1em"
             role="progressbar"
-            style="width: 20px; height: 20px;"
+            style="width: 16px; height: 16px;"
             viewBox="0 0 24 24"
             width="1em"
             xmlns="http://www.w3.org/2000/svg"

apps/web/test/unit-tests/components/views/polls/pollHistory/__snapshots__/PollHistory-test.tsx.snap

@@ -201,7 +201,7 @@ exports[`<PollHistory /> renders a no polls message and a load more button when
       fill="currentColor"
       height="1em"
       role="progressbar"
-      style="width: 20px; height: 20px;"
+      style="width: 16px; height: 16px;"
       viewBox="0 0 24 24"
       width="1em"
       xmlns="http://www.w3.org/2000/svg"

apps/web/test/unit-tests/components/views/settings/tabs/user/PreferencesUserSettingsTab-test.tsx

@@ -31,7 +31,7 @@ describe("PreferencesUserSettingsTab", () => {
     });
 
     const renderTab = (): RenderResult => {
-        return render(<PreferencesUserSettingsTab closeSettingsFn={() => {}} />);
+        return render(<PreferencesUserSettingsTab />);
     };
 
     it("should render", () => {

apps/web/test/unit-tests/components/views/settings/tabs/user/SecurityUserSettingsTab-test.tsx

@@ -25,10 +25,6 @@ import { UIFeature } from "../../../../../../../src/settings/UIFeature";
 import SettingsStore from "../../../../../../../src/settings/SettingsStore";
 
 describe("<SecurityUserSettingsTab />", () => {
-    const defaultProps = {
-        closeSettingsFn: jest.fn(),
-    };
-
     const getIgnoredUsers = jest.fn();
     const setIgnoredUsers = jest.fn();
 
@@ -51,7 +47,7 @@ describe("<SecurityUserSettingsTab />", () => {
     const getComponent = () => (
         <MatrixClientContext.Provider value={mockClient}>
             <SDKContext.Provider value={sdkContext}>
-                <SecurityUserSettingsTab {...defaultProps} />
+                <SecurityUserSettingsTab />
             </SDKContext.Provider>
         </MatrixClientContext.Provider>
     );