Skip to content

Move ResizerNotifier into SDKContext #30939

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 14 commits into from
Oct 6, 2025
Merged

Move ResizerNotifier into SDKContext #30939

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
3dc9a6f
Move ResizerNotifier into SDKContext
dbkr Sep 24, 2025
4aa4b71
Fix test
dbkr Oct 2, 2025
83f583d
Unused import
dbkr Oct 2, 2025
478c279
Add tests
dbkr Oct 2, 2025
c45cc4f
Remove a bunch of resizeNotifier props
dbkr Oct 3, 2025
86f34e7
Remove more resizeNotifier props
dbkr Oct 3, 2025
d198ccd
Add resizenotifier to test
dbkr Oct 3, 2025
79dddb6
Add more sdkcontext wrappers in tests
dbkr Oct 3, 2025
ef605e1
More sdkcontext wrappers
dbkr Oct 3, 2025
4d0a5f8
Even more sdkcontext wrappers
dbkr Oct 3, 2025
2286d2e
Add test to make sonarcloud happy
dbkr Oct 3, 2025
e1597bc
Context isn't always there unlike props
dbkr Oct 3, 2025
526a2e9
Test actual resizing too
dbkr Oct 3, 2025
ccedf2a
Remove commented line
dbkr Oct 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 0 additions & 3 deletions src/components/structures/FilePanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,6 @@ import EventIndexPeg from "../../indexing/EventIndexPeg";
import { _t } from "../../languageHandler";
import SearchWarning, { WarningKind } from "../views/elements/SearchWarning";
import BaseCard from "../views/right_panel/BaseCard";
import type ResizeNotifier from "../../utils/ResizeNotifier";
import TimelinePanel from "./TimelinePanel";
import Spinner from "../views/elements/Spinner";
import { Layout } from "../../settings/enums/Layout";
Expand All @@ -39,7 +38,6 @@ import { ScopedRoomContextProvider } from "../../contexts/ScopedRoomContext.tsx"
interface IProps {
roomId: string;
onClose: () => void;
resizeNotifier: ResizeNotifier;
}

interface IState {
Expand Down Expand Up @@ -294,7 +292,6 @@ class FilePanel extends React.Component<IProps, IState> {
timelineSet={this.state.timelineSet}
showUrlPreview={false}
onPaginationRequest={this.onPaginationRequest}
resizeNotifier={this.props.resizeNotifier}
empty={emptyState}
layout={Layout.Group}
/>
Expand Down
21 changes: 11 additions & 10 deletions src/components/structures/LoggedInView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,6 @@ import SettingsStore from "../../settings/SettingsStore";
import { SettingLevel } from "../../settings/SettingLevel";
import ResizeHandle from "../views/elements/ResizeHandle";
import { CollapseDistributor, Resizer } from "../../resizer";
import type ResizeNotifier from "../../utils/ResizeNotifier";
import PlatformPeg from "../../PlatformPeg";
import { DefaultTagID } from "../../stores/room-list/models";
import { hideToast as hideServerLimitToast, showToast as showServerLimitToast } from "../../toasts/ServerLimitToast";
Expand Down Expand Up @@ -67,6 +66,7 @@ import { monitorSyncedPushRules } from "../../utils/pushRules/monitorSyncedPushR
import { type ConfigOptions } from "../../SdkConfig";
import { MatrixClientContextProvider } from "./MatrixClientContextProvider";
import { Landmark, LandmarkNavigation } from "../../accessibility/LandmarkNavigation";
import { SDKContext } from "../../contexts/SDKContext.ts";

// We need to fetch each pinned message individually (if we don't already have it)
// so each pinned message may trigger a request. Limit the number per room for sanity.
Expand All @@ -86,7 +86,6 @@ interface IProps {
// transitioned to PWLU)
onRegistered: (credentials: IMatrixClientCreds) => Promise<MatrixClient>;
hideToSRUsers: boolean;
resizeNotifier: ResizeNotifier;
// eslint-disable-next-line camelcase
page_type?: string;
autoJoin?: boolean;
Expand Down Expand Up @@ -134,8 +133,11 @@ class LoggedInView extends React.Component<IProps, IState> {
protected timezoneProfileUpdateRef?: string[];
protected resizer?: Resizer<ICollapseConfig, CollapseItem>;

public constructor(props: IProps) {
super(props);
public static contextType = SDKContext;
declare public context: React.ContextType<typeof SDKContext>;

public constructor(props: IProps, context: React.ContextType<typeof SDKContext>) {
super(props, context);

this.state = {
syncErrorData: undefined,
Expand Down Expand Up @@ -281,15 +283,15 @@ class LoggedInView extends React.Component<IProps, IState> {
},
onResized: (size) => {
panelSize = size;
this.props.resizeNotifier.notifyLeftHandleResized();
this.context.resizeNotifier.notifyLeftHandleResized();
},
onResizeStart: () => {
this.props.resizeNotifier.startResizing();
this.context.resizeNotifier.startResizing();
},
onResizeStop: () => {
// Always save the lhs size for the new room list.
if (useNewRoomList || !panelCollapsed) window.localStorage.setItem("mx_lhs_size", "" + panelSize);
this.props.resizeNotifier.stopResizing();
this.context.resizeNotifier.stopResizing();
},
isItemCollapsed: (domNode) => {
// New rooms list does not support collapsing.
Expand Down Expand Up @@ -681,7 +683,6 @@ class LoggedInView extends React.Component<IProps, IState> {
threepidInvite={this.props.threepidInvite}
oobData={this.props.roomOobData}
key={this.props.currentRoomId || "roomview"}
resizeNotifier={this.props.resizeNotifier}
justCreatedOpts={this.props.roomJustCreatedOpts}
forceTimeline={this.props.forceTimeline}
/>
Expand All @@ -695,7 +696,7 @@ class LoggedInView extends React.Component<IProps, IState> {
case PageTypes.UserView:
if (!!this.props.currentUserId) {
pageElement = (
<UserView userId={this.props.currentUserId} resizeNotifier={this.props.resizeNotifier} />
<UserView userId={this.props.currentUserId} resizeNotifier={this.context.resizeNotifier} />
Copy link
Member

@t3chguy t3chguy Oct 2, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can UserView not also consume it via ctx?

Copy link
Member Author

@dbkr dbkr Oct 3, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unfortunately UserView uses MatrixClientContext so suffers the multiple-context problem as it's still a class component.

);
}
break;
Expand Down Expand Up @@ -748,7 +749,7 @@ class LoggedInView extends React.Component<IProps, IState> {
<LeftPanel
pageType={this.props.page_type as PageTypes}
isMinimized={shouldUseMinimizedUI || false}
resizeNotifier={this.props.resizeNotifier}
resizeNotifier={this.context.resizeNotifier}
Copy link
Member

@t3chguy t3chguy Oct 2, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ditto for LeftPanel

Copy link
Member Author

@dbkr dbkr Oct 3, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This only gets resizeNotifier so it can pass it into the legacy room list which doesn't seem worth changing at this point, it can just be stripped out when the old room list dies?

/>
</div>
</div>
Expand Down
16 changes: 11 additions & 5 deletions src/components/structures/MainSplit.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,10 @@ import { type NumberSize, Resizable } from "re-resizable";
import { type Direction } from "re-resizable/lib/resizer";
import { type WebPanelResize } from "@matrix-org/analytics-events/types/typescript/WebPanelResize";

import type ResizeNotifier from "../../utils/ResizeNotifier";
import { PosthogAnalytics } from "../../PosthogAnalytics.ts";
import { SDKContext } from "../../contexts/SDKContext.ts";

interface IProps {
resizeNotifier: ResizeNotifier;
collapsedRhs?: boolean;
panel?: JSX.Element;
children: ReactNode;
Expand All @@ -36,16 +35,23 @@ interface IProps {
}

export default class MainSplit extends React.Component<IProps> {
public static contextType = SDKContext;
declare public context: React.ContextType<typeof SDKContext>;

public static defaultProps = {
defaultSize: 320,
};

public constructor(props: IProps, context: React.ContextType<typeof SDKContext>) {
super(props, context);
}

private onResizeStart = (): void => {
this.props.resizeNotifier.startResizing();
this.context.resizeNotifier.startResizing();
};

private onResize = (): void => {
this.props.resizeNotifier.notifyRightHandleResized();
this.context.resizeNotifier.notifyRightHandleResized();
};

private get sizeSettingStorageKey(): string {
Expand All @@ -63,7 +69,7 @@ export default class MainSplit extends React.Component<IProps> {
delta: NumberSize,
): void => {
const newSize = this.loadSidePanelSize().width + delta.width;
this.props.resizeNotifier.stopResizing();
this.context.resizeNotifier.stopResizing();
window.localStorage.setItem(this.sizeSettingStorageKey, newSize.toString());

PosthogAnalytics.instance.trackEvent<WebPanelResize>({
Expand Down
13 changes: 5 additions & 8 deletions src/components/structures/MatrixChat.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,6 @@ import { _t, _td } from "../../languageHandler";
import SettingsStore from "../../settings/SettingsStore";
import ThemeController from "../../settings/controllers/ThemeController";
import { startAnyRegistrationFlow } from "../../Registration";
import ResizeNotifier from "../../utils/ResizeNotifier";
import AutoDiscoveryUtils from "../../utils/AutoDiscoveryUtils";
import { calculateRoomVia, makeRoomPermalink } from "../../utils/permalinks/Permalinks";
import ThemeWatcher, { ThemeWatcherEvent } from "../../settings/watchers/ThemeWatcher";
Expand Down Expand Up @@ -199,7 +198,6 @@ interface IState {
// and disable it when there are no dialogs
hideToSRUsers: boolean;
syncError: Error | null;
resizeNotifier: ResizeNotifier;
serverConfig?: ValidatedServerConfig;
ready: boolean;
threepidInvite?: IThreepidInvite;
Expand Down Expand Up @@ -254,7 +252,6 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
isMobileRegistration: false,

syncError: null, // If the current syncing status is ERROR, the error object, otherwise null.
resizeNotifier: new ResizeNotifier(),
ready: false,
};

Expand Down Expand Up @@ -459,7 +456,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
UIStore.instance.on(UI_EVENTS.Resize, this.handleResize);

// For PersistentElement
this.state.resizeNotifier.on("middlePanelResized", this.dispatchTimelineResize);
this.stores.resizeNotifier.on("middlePanelResized", this.dispatchTimelineResize);

RoomNotificationStateStore.instance.on(UPDATE_STATUS_INDICATOR, this.onUpdateStatusIndicator);

Expand Down Expand Up @@ -511,7 +508,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
this.themeWatcher?.stop();
this.fontWatcher?.stop();
UIStore.destroy();
this.state.resizeNotifier.removeListener("middlePanelResized", this.dispatchTimelineResize);
this.stores.resizeNotifier.removeListener("middlePanelResized", this.dispatchTimelineResize);
window.removeEventListener("resize", this.onWindowResized);
}

Expand Down Expand Up @@ -828,7 +825,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
collapseLhs: true,
},
() => {
this.state.resizeNotifier.notifyLeftHandleResized();
this.stores.resizeNotifier.notifyLeftHandleResized();
},
);
break;
Expand All @@ -838,7 +835,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
collapseLhs: false,
},
() => {
this.state.resizeNotifier.notifyLeftHandleResized();
this.stores.resizeNotifier.notifyLeftHandleResized();
},
);
break;
Expand Down Expand Up @@ -1957,7 +1954,7 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
}

this.prevWindowWidth = width;
this.state.resizeNotifier.notifyWindowResized();
this.stores.resizeNotifier.notifyWindowResized();
};

private dispatchTimelineResize(): void {
Expand Down
3 changes: 0 additions & 3 deletions src/components/structures/MessagePanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,6 @@ import ScrollPanel, { type IScrollState } from "./ScrollPanel";
import DateSeparator from "../views/messages/DateSeparator";
import TimelineSeparator, { SeparatorKind } from "../views/messages/TimelineSeparator";
import ErrorBoundary from "../views/elements/ErrorBoundary";
import type ResizeNotifier from "../../utils/ResizeNotifier";
import Spinner from "../views/elements/Spinner";
import { type RoomPermalinkCreator } from "../../utils/permalinks/Permalinks";
import type EditorStateTransfer from "../../utils/EditorStateTransfer";
Expand Down Expand Up @@ -167,7 +166,6 @@ interface IProps {
// which layout to use
layout?: Layout;

resizeNotifier?: ResizeNotifier;
permalinkCreator?: RoomPermalinkCreator;
editState?: EditorStateTransfer;

Expand Down Expand Up @@ -1064,7 +1062,6 @@ export default class MessagePanel extends React.Component<IProps, IState> {
onUnfillRequest={this.props.onUnfillRequest}
style={style}
stickyBottom={this.props.stickyBottom}
resizeNotifier={this.props.resizeNotifier}
fixedChildren={ircResizer}
>
{topSpinner}
Expand Down
4 changes: 1 addition & 3 deletions src/components/structures/RightPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -224,9 +224,7 @@ export default class RightPanel extends React.Component<Props, IState> {
break;
case RightPanelPhases.FilePanel:
if (!!roomId) {
card = (
<FilePanel roomId={roomId} resizeNotifier={this.props.resizeNotifier} onClose={this.onClose} />
);
card = <FilePanel roomId={roomId} onClose={this.onClose} />;
}
break;

Expand Down
4 changes: 0 additions & 4 deletions src/components/structures/RoomSearchView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,6 @@ import { _t } from "../../languageHandler";
import { haveRendererForEvent } from "../../events/EventTileFactory";
import SearchResultTile from "../views/rooms/SearchResultTile";
import { searchPagination, SearchScope } from "../../Searching";
import type ResizeNotifier from "../../utils/ResizeNotifier";
import MatrixClientContext from "../../contexts/MatrixClientContext";
import { RoomPermalinkCreator } from "../../utils/permalinks/Permalinks";
import { useScopedRoomContext } from "../../contexts/ScopedRoomContext.tsx";
Expand All @@ -41,7 +40,6 @@ interface Props {
inProgress: boolean;
promise: Promise<ISearchResults>;
abortController?: AbortController;
resizeNotifier: ResizeNotifier;
className: string;
onUpdate(inProgress: boolean, results: ISearchResults | null, error: Error | null): void;
ref?: Ref<ScrollPanel>;
Expand All @@ -54,7 +52,6 @@ export const RoomSearchView = ({
scope,
promise,
abortController,
resizeNotifier,
className,
onUpdate,
inProgress,
Expand Down Expand Up @@ -309,7 +306,6 @@ export const RoomSearchView = ({
ref={onRef}
className={"mx_RoomView_searchResultsPanel " + className}
onFillRequest={onSearchResultsFillRequest}
resizeNotifier={resizeNotifier}
>
<li className="mx_RoomView_scrollheader" />
{ret}
Expand Down
Loading
Loading