From 485fdcf5e05b26bdf250c8225aeaec42b2d83220 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Mon, 30 Sep 2024 14:32:58 +0100 Subject: [PATCH 01/13] Add extra buttons to room summary card Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- .../views/right_panel/RoomSummaryCard.tsx | 22 +++++++++++++++++++ src/i18n/strings/en_EN.json | 3 +-- 2 files changed, 23 insertions(+), 2 deletions(-) diff --git a/src/components/views/right_panel/RoomSummaryCard.tsx b/src/components/views/right_panel/RoomSummaryCard.tsx index 39575d94f5..82125063b5 100644 --- a/src/components/views/right_panel/RoomSummaryCard.tsx +++ b/src/components/views/right_panel/RoomSummaryCard.tsx @@ -27,6 +27,9 @@ import SettingsIcon from "@vector-im/compound-design-tokens/assets/web/icons/set import { Icon as ExportArchiveIcon } from "@vector-im/compound-design-tokens/icons/export-archive.svg"; import LeaveIcon from "@vector-im/compound-design-tokens/assets/web/icons/leave"; import FilesIcon from "@vector-im/compound-design-tokens/assets/web/icons/files"; +import ExtensionsIcon from "@vector-im/compound-design-tokens/assets/web/icons/extensions"; +import UserProfileIcon from "@vector-im/compound-design-tokens/assets/web/icons/user-profile"; +import ThreadsIcon from "@vector-im/compound-design-tokens/assets/web/icons/threads"; import PollsIcon from "@vector-im/compound-design-tokens/assets/web/icons/polls"; import PinIcon from "@vector-im/compound-design-tokens/assets/web/icons/pin"; import { Icon as LockIcon } from "@vector-im/compound-design-tokens/icons/lock-solid.svg"; @@ -82,10 +85,22 @@ interface IProps { focusRoomSearch?: boolean; } +const onRoomMembersClick = (): void => { + RightPanelStore.instance.pushCard({ phase: RightPanelPhases.RoomMemberList }, true); +}; + +const onRoomThreadsClick = (): void => { + RightPanelStore.instance.pushCard({ phase: RightPanelPhases.ThreadPanel }, true); +}; + const onRoomFilesClick = (): void => { RightPanelStore.instance.pushCard({ phase: RightPanelPhases.FilePanel }, true); }; +const onRoomExtensionsClick = (): void => { + RightPanelStore.instance.pushCard({ phase: RightPanelPhases.Extensions }, true); +}; + const onRoomPinsClick = (): void => { PosthogTrackers.trackInteraction("PinnedMessageRoomInfoButton"); RightPanelStore.instance.pushCard({ phase: RightPanelPhases.PinnedMessages }, true); @@ -379,6 +394,8 @@ const RoomSummaryCard: React.FC = ({ + + {!isVideoRoom && ( <> = ({ + )} diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 64680a93a3..03ac587ae2 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -477,7 +477,6 @@ "encrypted": "Encrypted", "encryption_enabled": "Encryption enabled", "error": "Error", - "extensions": "Extensions", "faq": "FAQ", "favourites": "Favourites", "feedback": "Feedback", @@ -1839,10 +1838,10 @@ "add_integrations": "Add extensions", "add_topic": "Add topic", "export_chat_button": "Export chat", + "extensions_button": "Extensions", "extensions_empty_description": "Select “%(addIntegrations)s” to browse and add extensions to this room", "extensions_empty_title": "Boost productivity with more tools, widgets and bots", "files_button": "Files", - "info": "Info", "pinned_messages": { "empty_description": "Select a message and choose “%(pinAction)s” to it include here.", "empty_title": "Pin important messages so that they can be easily discovered", From 5e82693711d2672b7e7f7b75e5c948dcce27d6ec Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Mon, 30 Sep 2024 14:35:39 +0100 Subject: [PATCH 02/13] Remove right panel tabs in favour of X button on each panel Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- res/css/_components.pcss | 1 - .../views/right_panel/_ExtensionsCard.pcss | 14 +- .../views/right_panel/_RightPanelTabs.pcss | 17 -- res/css/views/rooms/_MemberList.pcss | 2 +- src/components/structures/FilePanel.tsx | 19 ++- .../structures/NotificationPanel.tsx | 9 +- src/components/structures/RightPanel.tsx | 3 - src/components/structures/ThreadPanel.tsx | 1 - src/components/views/right_panel/BaseCard.tsx | 10 +- .../views/right_panel/ExtensionsCard.tsx | 12 +- .../views/right_panel/PinnedMessagesCard.tsx | 9 +- .../views/right_panel/RightPanelTabs.tsx | 105 ------------- .../views/right_panel/TimelineCard.tsx | 13 +- src/components/views/rooms/MemberList.tsx | 5 +- src/components/views/rooms/RoomHeader.tsx | 10 +- .../rooms/RoomHeader/VideoRoomChatButton.tsx | 2 +- .../views/rooms/ThirdPartyMemberInfo.tsx | 2 +- src/stores/right-panel/RightPanelStore.ts | 17 -- .../views/right_panel/RightPanelTabs-test.tsx | 64 -------- .../RightPanelTabs-test.tsx.snap | 147 ------------------ .../RoomHeader/VideoRoomChatButton-test.tsx | 4 +- .../right-panel/RightPanelStore-test.ts | 18 --- 22 files changed, 48 insertions(+), 436 deletions(-) delete mode 100644 res/css/views/right_panel/_RightPanelTabs.pcss delete mode 100644 src/components/views/right_panel/RightPanelTabs.tsx delete mode 100644 test/components/views/right_panel/RightPanelTabs-test.tsx delete mode 100644 test/components/views/right_panel/__snapshots__/RightPanelTabs-test.tsx.snap diff --git a/res/css/_components.pcss b/res/css/_components.pcss index dadd9aadb3..ff0fccbe6e 100644 --- a/res/css/_components.pcss +++ b/res/css/_components.pcss @@ -266,7 +266,6 @@ @import "./views/right_panel/_EncryptionInfo.pcss"; @import "./views/right_panel/_ExtensionsCard.pcss"; @import "./views/right_panel/_PinnedMessagesCard.pcss"; -@import "./views/right_panel/_RightPanelTabs.pcss"; @import "./views/right_panel/_RoomSummaryCard.pcss"; @import "./views/right_panel/_ThreadPanel.pcss"; @import "./views/right_panel/_TimelineCard.pcss"; diff --git a/res/css/views/right_panel/_ExtensionsCard.pcss b/res/css/views/right_panel/_ExtensionsCard.pcss index f731ab4b2d..e559027366 100644 --- a/res/css/views/right_panel/_ExtensionsCard.pcss +++ b/res/css/views/right_panel/_ExtensionsCard.pcss @@ -10,21 +10,17 @@ Please see LICENSE files in the repository root for full details. --cpd-separator-inset: var(--cpd-space-4x); --cpd-separator-spacing: var(--cpd-space-4x); - .mx_BaseCard_header { - /* Hide the line between the header and the body of the card */ - border-block-end: none; + .mx_AutoHideScrollbar { + padding: 0 var(--cpd-space-4x); + margin-top: var(--cpd-space-3x); + box-sizing: border-box; /* Styling for the "Add extensions" button */ - button { + & > button { width: 100%; } } - .mx_AutoHideScrollbar { - padding: 0 var(--cpd-space-4x); - box-sizing: border-box; - } - .mx_ExtensionsCard_container { text-align: center; margin: $spacing-20 var(--cpd-space-4x) 0; diff --git a/res/css/views/right_panel/_RightPanelTabs.pcss b/res/css/views/right_panel/_RightPanelTabs.pcss deleted file mode 100644 index 24824d3fe0..0000000000 --- a/res/css/views/right_panel/_RightPanelTabs.pcss +++ /dev/null @@ -1,17 +0,0 @@ -/* -Copyright 2024 New Vector Ltd. -Copyright 2024 The Matrix.org Foundation C.I.C. - -SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only -Please see LICENSE files in the repository root for full details. -*/ - -.mx_RightPanelTabs { - margin: 0; - height: 64px; - box-sizing: border-box; - - ul { - margin-left: 16px; - } -} diff --git a/res/css/views/rooms/_MemberList.pcss b/res/css/views/rooms/_MemberList.pcss index dd3d385bd0..e3fe819ab6 100644 --- a/res/css/views/rooms/_MemberList.pcss +++ b/res/css/views/rooms/_MemberList.pcss @@ -11,7 +11,6 @@ Please see LICENSE files in the repository root for full details. display: flex; flex-direction: column; min-height: 0; - margin-top: 24px; .mx_Spinner { flex: 1 0 auto; @@ -34,6 +33,7 @@ Please see LICENSE files in the repository root for full details. .mx_AutoHideScrollbar { flex: 1 1 0; + margin-top: var(--cpd-space-3x); } } diff --git a/src/components/structures/FilePanel.tsx b/src/components/structures/FilePanel.tsx index bf596b17b1..74a91d8cbc 100644 --- a/src/components/structures/FilePanel.tsx +++ b/src/components/structures/FilePanel.tsx @@ -223,7 +223,11 @@ class FilePanel extends React.Component { public render(): React.ReactNode { if (MatrixClientPeg.safeGet().isGuest()) { return ( - +
{_t( "file_panel|guest_note", @@ -241,7 +245,11 @@ class FilePanel extends React.Component { ); } else if (this.noRoom) { return ( - +
{_t("file_panel|peek_note")}
 ); @@ -273,6 +281,7 @@ class FilePanel extends React.Component { onClose={this.props.onClose} withoutScrollContainer ref={this.card} + header={_t("right_panel|files_button")} > {this.card.current && ( @@ -299,7 +308,11 @@ class FilePanel extends React.Component { timelineRenderingType: TimelineRenderingType.File, }} > - + diff --git a/src/components/structures/NotificationPanel.tsx b/src/components/structures/NotificationPanel.tsx index a569a06385..edec675b14 100644 --- a/src/components/structures/NotificationPanel.tsx +++ b/src/components/structures/NotificationPanel.tsx @@ -18,7 +18,6 @@ import Spinner from "../views/elements/Spinner"; import { Layout } from "../../settings/enums/Layout"; import RoomContext, { TimelineRenderingType } from "../../contexts/RoomContext"; import Measured from "../views/elements/Measured"; -import Heading from "../views/typography/Heading"; import EmptyState from "../views/right_panel/EmptyState"; interface IProps { @@ -88,13 +87,7 @@ export default class NotificationPanel extends React.PureComponent - - {_t("notifications|enable_prompt_toast_title")} - -
- } + header={_t("notifications|enable_prompt_toast_title")} /** * Need to rename this CSS class to something more generic * Will be done once all the panels are using a similar layout diff --git a/src/components/structures/RightPanel.tsx b/src/components/structures/RightPanel.tsx index d4014f6aa0..9a9f29f82e 100644 --- a/src/components/structures/RightPanel.tsx +++ b/src/components/structures/RightPanel.tsx @@ -33,7 +33,6 @@ import { UPDATE_EVENT } from "../../stores/AsyncStore"; import { IRightPanelCard, IRightPanelCardState } from "../../stores/right-panel/RightPanelStoreIPanelState"; import { Action } from "../../dispatcher/actions"; import { XOR } from "../../@types/common"; -import { RightPanelTabs } from "../views/right_panel/RightPanelTabs"; import ExtensionsCard from "../views/right_panel/ExtensionsCard"; interface BaseProps { @@ -164,7 +163,6 @@ export default class RightPanel extends React.Component { { return ( ); diff --git a/src/components/structures/ThreadPanel.tsx b/src/components/structures/ThreadPanel.tsx index 4206b4f7f7..b45401dd4c 100644 --- a/src/components/structures/ThreadPanel.tsx +++ b/src/components/structures/ThreadPanel.tsx @@ -193,7 +193,6 @@ const ThreadPanel: React.FC = ({ roomId, onClose, permalinkCreator }) => }} > } diff --git a/src/components/views/right_panel/BaseCard.tsx b/src/components/views/right_panel/BaseCard.tsx index cfc49a8236..aab25d17aa 100644 --- a/src/components/views/right_panel/BaseCard.tsx +++ b/src/components/views/right_panel/BaseCard.tsx @@ -38,6 +38,12 @@ interface IProps { children: ReactNode; } +function closeRightPanel(ev: MouseEvent): void { + ev.preventDefault(); + ev.stopPropagation(); + RightPanelStore.instance.popCard(); +} + const BaseCard: React.FC = forwardRef( ( { @@ -81,12 +87,12 @@ const BaseCard: React.FC = forwardRef( } let closeButton; - if (onClose && !hideHeaderButtons) { + if (!hideHeaderButtons) { closeButton = ( = ({ room, onClose }) => { } }; - // The button is in the header to keep it outside the scrollable region - const header = ( - - ); - let body: JSX.Element; if (realApps.length < 1) { body = ( @@ -197,7 +190,10 @@ const ExtensionsCard: React.FC = ({ room, onClose }) => { } return ( - + + {body} ); diff --git a/src/components/views/right_panel/PinnedMessagesCard.tsx b/src/components/views/right_panel/PinnedMessagesCard.tsx index e559793ced..af7106f9c5 100644 --- a/src/components/views/right_panel/PinnedMessagesCard.tsx +++ b/src/components/views/right_panel/PinnedMessagesCard.tsx @@ -20,7 +20,6 @@ import { PinnedEventTile } from "../rooms/PinnedEventTile"; import { useRoomState } from "../../../hooks/useRoomState"; import RoomContext, { TimelineRenderingType, useRoomContext } from "../../../contexts/RoomContext"; import { ReadPinsEventId } from "./types"; -import Heading from "../typography/Heading"; import { RoomPermalinkCreator } from "../../../utils/permalinks/Permalinks"; import { filterBoolean } from "../../../utils/arrays"; import Modal from "../../../Modal"; @@ -86,13 +85,7 @@ export function PinnedMessagesCard({ room, onClose, permalinkCreator }: PinnedMe return ( - - {_t("right_panel|pinned_messages|header", { count: pinnedEventIds.length })} - - - } + header={_t("right_panel|pinned_messages|header", { count: pinnedEventIds.length })} className="mx_PinnedMessagesCard" onClose={onClose} > diff --git a/src/components/views/right_panel/RightPanelTabs.tsx b/src/components/views/right_panel/RightPanelTabs.tsx deleted file mode 100644 index 07a423dd05..0000000000 --- a/src/components/views/right_panel/RightPanelTabs.tsx +++ /dev/null @@ -1,105 +0,0 @@ -/* -Copyright 2024 New Vector Ltd. -Copyright 2024 The Matrix.org Foundation C.I.C. - -SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only -Please see LICENSE files in the repository root for full details. -*/ - -import React, { useRef } from "react"; -import { NavBar, NavItem } from "@vector-im/compound-web"; -import { Room } from "matrix-js-sdk/src/matrix"; - -import { _t } from "../../../languageHandler"; -import { RightPanelPhases } from "../../../stores/right-panel/RightPanelStorePhases"; -import RightPanelStore from "../../../stores/right-panel/RightPanelStore"; -import PosthogTrackers from "../../../PosthogTrackers"; -import { useDispatcher } from "../../../hooks/useDispatcher"; -import dispatcher from "../../../dispatcher/dispatcher"; -import { Action } from "../../../dispatcher/actions"; -import SettingsStore from "../../../settings/SettingsStore"; -import { UIComponent, UIFeature } from "../../../settings/UIFeature"; -import { shouldShowComponent } from "../../../customisations/helpers/UIComponents"; -import { useIsVideoRoom } from "../../../utils/video-rooms"; - -function shouldShowTabsForPhase(phase?: RightPanelPhases): boolean { - const tabs = [ - RightPanelPhases.RoomSummary, - RightPanelPhases.RoomMemberList, - RightPanelPhases.ThreadPanel, - RightPanelPhases.Extensions, - ]; - return !!phase && tabs.includes(phase); -} - -type Props = { - room?: Room; - phase: RightPanelPhases; -}; - -export const RightPanelTabs: React.FC = ({ phase, room }): JSX.Element | null => { - const threadsTabRef = useRef(null); - - useDispatcher(dispatcher, (payload) => { - // This actually focuses the threads tab, as its the only interactive element, - // but at least it puts the user in the right area of the app. - if (payload.action === Action.FocusThreadsPanel) { - threadsTabRef.current?.focus(); - } - }); - - const isVideoRoom = useIsVideoRoom(room); - - if (!shouldShowTabsForPhase(phase)) return null; - - return ( - - { - RightPanelStore.instance.pushCard({ phase: RightPanelPhases.RoomSummary }, true); - }} - active={phase === RightPanelPhases.RoomSummary} - > - {_t("right_panel|info")} - - ) => { - RightPanelStore.instance.pushCard({ phase: RightPanelPhases.RoomMemberList }, true); - PosthogTrackers.trackInteraction("WebRightPanelRoomInfoPeopleButton", ev); - }} - active={phase === RightPanelPhases.RoomMemberList} - > - {_t("common|people")} - - { - RightPanelStore.instance.pushCard({ phase: RightPanelPhases.ThreadPanel }, true); - }} - active={phase === RightPanelPhases.ThreadPanel} - ref={threadsTabRef} - > - {_t("common|threads")} - - {SettingsStore.getValue(UIFeature.Widgets) && - !isVideoRoom && - shouldShowComponent(UIComponent.AddIntegrations) && ( - { - RightPanelStore.instance.pushCard({ phase: RightPanelPhases.Extensions }, true); - }} - active={phase === RightPanelPhases.Extensions} - > - {_t("common|extensions")} - - )} - - ); -}; diff --git a/src/components/views/right_panel/TimelineCard.tsx b/src/components/views/right_panel/TimelineCard.tsx index 77778ffdde..4f9d1dd917 100644 --- a/src/components/views/right_panel/TimelineCard.tsx +++ b/src/components/views/right_panel/TimelineCard.tsx @@ -36,7 +36,6 @@ import SettingsStore from "../../../settings/SettingsStore"; import JumpToBottomButton from "../rooms/JumpToBottomButton"; import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload"; import Measured from "../elements/Measured"; -import Heading from "../typography/Heading"; import { UPDATE_EVENT } from "../../../stores/AsyncStore"; import { SdkContextClass } from "../../../contexts/SDKContext"; @@ -185,16 +184,6 @@ export default class TimelineCard extends React.Component { } }; - private renderTimelineCardHeader = (): JSX.Element => { - return ( -
- - {_t("right_panel|video_room_chat|title")} - -
- ); - }; - public render(): React.ReactNode { const highlightedEventId = this.state.isInitialEventHighlighted ? this.state.initialEventId : undefined; @@ -226,7 +215,7 @@ export default class TimelineCard extends React.Component { className={this.props.classNames} onClose={this.props.onClose} withoutScrollContainer={true} - header={this.renderTimelineCardHeader()} + header={_t("right_panel|video_room_chat|title")} ref={this.card} > {this.card.current && } diff --git a/src/components/views/rooms/MemberList.tsx b/src/components/views/rooms/MemberList.tsx index 4dfe812619..64028ee77c 100644 --- a/src/components/views/rooms/MemberList.tsx +++ b/src/components/views/rooms/MemberList.tsx @@ -55,7 +55,6 @@ const SHOW_MORE_INCREMENT = 100; interface IProps { roomId: string; searchQuery: string; - hideHeaderButtons?: boolean; onClose(): void; onSearchQueryChanged: (query: string) => void; } @@ -355,7 +354,7 @@ export default class MemberList extends React.Component { className="mx_MemberList" ariaLabelledBy="memberlist-panel-tab" role="tabpanel" - hideHeaderButtons={this.props.hideHeaderButtons} + header={_t("common|people")} onClose={this.props.onClose} > @@ -420,7 +419,7 @@ export default class MemberList extends React.Component { className="mx_MemberList" ariaLabelledBy="memberlist-panel-tab" role="tabpanel" - hideHeaderButtons={this.props.hideHeaderButtons} + header={_t("common|people")} footer={footer} onClose={this.props.onClose} > diff --git a/src/components/views/rooms/RoomHeader.tsx b/src/components/views/rooms/RoomHeader.tsx index fae9e264ae..0f843a4441 100644 --- a/src/components/views/rooms/RoomHeader.tsx +++ b/src/components/views/rooms/RoomHeader.tsx @@ -255,7 +255,7 @@ export default function RoomHeader({ - - - - - - - -`; - -exports[` Correct tab is active 1`] = ` -
- -
-`; diff --git a/test/components/views/rooms/RoomHeader/VideoRoomChatButton-test.tsx b/test/components/views/rooms/RoomHeader/VideoRoomChatButton-test.tsx index 7da81eea46..c73349826c 100644 --- a/test/components/views/rooms/RoomHeader/VideoRoomChatButton-test.tsx +++ b/test/components/views/rooms/RoomHeader/VideoRoomChatButton-test.tsx @@ -56,7 +56,7 @@ describe("", () => { ...mockClientMethodsUser(), }); rightPanelStore = { - showOrHidePanel: jest.fn(), + showOrHidePhase: jest.fn(), } as unknown as MockedObject; sdkContext = new SdkContextClass(); sdkContext.client = client; @@ -73,7 +73,7 @@ describe("", () => { fireEvent.click(screen.getByLabelText("Chat")); - expect(sdkContext.rightPanelStore.showOrHidePanel).toHaveBeenCalledWith(RightPanelPhases.Timeline); + expect(sdkContext.rightPanelStore.showOrHidePhase).toHaveBeenCalledWith(RightPanelPhases.Timeline); }); it("renders button with an unread marker when room is unread", () => { diff --git a/test/stores/right-panel/RightPanelStore-test.ts b/test/stores/right-panel/RightPanelStore-test.ts index 279835e182..6d67b2f8dd 100644 --- a/test/stores/right-panel/RightPanelStore-test.ts +++ b/test/stores/right-panel/RightPanelStore-test.ts @@ -217,22 +217,4 @@ describe("RightPanelStore", () => { await viewRoom("!1:example.org"); expect(store.currentCardForRoom("!1:example.org").phase).toEqual(RightPanelPhases.RoomMemberList); }); - - it("showOrHidePhase works as expected", async () => { - await viewRoom("!1:example.org"); - - // Open the memberlist panel - store.showOrHidePanel(RightPanelPhases.RoomMemberList); - expect(store.isOpenForRoom("!1:example.org")).toEqual(true); - expect(store.currentCardForRoom("!1:example.org").phase).toEqual(RightPanelPhases.RoomMemberList); - - // showOrHide with RoomSummary should now close the panel - store.showOrHidePanel(RightPanelPhases.RoomSummary); - expect(store.isOpenForRoom("!1:example.org")).toEqual(false); - - // showOrHide with RoomSummary should now open the panel - store.showOrHidePanel(RightPanelPhases.RoomSummary); - expect(store.isOpenForRoom("!1:example.org")).toEqual(true); - expect(store.currentCardForRoom("!1:example.org").phase).toEqual(RightPanelPhases.RoomSummary); - }); }); From a2429fbeb4b362c9ae7fd99d762727b18d2398b6 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Mon, 30 Sep 2024 14:36:00 +0100 Subject: [PATCH 03/13] Update room summary card header to align close button correctly Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- .../views/right_panel/_RoomSummaryCard.pcss | 4 -- .../views/right_panel/RoomSummaryCard.tsx | 52 ++++++++----------- 2 files changed, 22 insertions(+), 34 deletions(-) diff --git a/res/css/views/right_panel/_RoomSummaryCard.pcss b/res/css/views/right_panel/_RoomSummaryCard.pcss index 6648adc857..8dcbfe2e0a 100644 --- a/res/css/views/right_panel/_RoomSummaryCard.pcss +++ b/res/css/views/right_panel/_RoomSummaryCard.pcss @@ -88,10 +88,6 @@ Please see LICENSE files in the repository root for full details. margin: var(--cpd-space-4x) 0; } -.mx_RoomSummaryCard_header { - padding: 24px 12px 15px; -} - .mx_RoomSummaryCard_search { flex-grow: 1; min-width: 0; diff --git a/src/components/views/right_panel/RoomSummaryCard.tsx b/src/components/views/right_panel/RoomSummaryCard.tsx index 82125063b5..cf6cccbbf4 100644 --- a/src/components/views/right_panel/RoomSummaryCard.tsx +++ b/src/components/views/right_panel/RoomSummaryCard.tsx @@ -269,7 +269,7 @@ const RoomSummaryCard: React.FC = ({ ); const alias = room.getCanonicalAlias() || room.getAltAliases()[0] || ""; - const header = ( + const roomInfo = (
@@ -337,42 +337,34 @@ const RoomSummaryCard: React.FC = ({ const canInviteToState = useEventEmitterState(room, RoomStateEvent.Update, () => canInviteTo(room)); const isFavorite = roomTags.includes(DefaultTagID.Favourite); + const header = onSearchChange && ( + e.preventDefault()}> + { + if (searchInputRef.current && e.key === Key.ESCAPE) { + searchInputRef.current.value = ""; + onSearchCancel?.(); + } + }} + /> + + ); + return ( - - {onSearchChange && ( - e.preventDefault()}> - { - if (searchInputRef.current && e.key === Key.ESCAPE) { - searchInputRef.current.value = ""; - onSearchCancel?.(); - } - }} - /> - - )} - - - {header} + {roomInfo} From d81a15582f1eabcb46ee89ee08fe076f59ec74dd Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Mon, 30 Sep 2024 14:36:23 +0100 Subject: [PATCH 04/13] Fix typo in pinned messages heading Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- src/i18n/strings/en_EN.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 03ac587ae2..6682dc3aea 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -1848,7 +1848,7 @@ "header": { "one": "1 Pinned message", "other": "%(count)s Pinned messages", - "zero": "Pinned message" + "zero": "Pinned messages" }, "limits": { "other": "You can only pin up to %(count)s widgets" From 482688c24e235933d717d64b9ffbcafd866945ad Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Mon, 30 Sep 2024 14:47:15 +0100 Subject: [PATCH 05/13] Update snapshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --- .../__snapshots__/FilePanel-test.tsx.snap | 8 +- .../ExtensionsCard-test.tsx.snap | 78 ++- .../PinnedMessagesCard-test.tsx.snap | 36 +- .../RoomSummaryCard-test.tsx.snap | 465 +++++++++++++++++- .../ThirdPartyMemberInfo-test.tsx.snap | 64 ++- 5 files changed, 596 insertions(+), 55 deletions(-) diff --git a/test/components/structures/__snapshots__/FilePanel-test.tsx.snap b/test/components/structures/__snapshots__/FilePanel-test.tsx.snap index 746cf477a3..521c8c06a3 100644 --- a/test/components/structures/__snapshots__/FilePanel-test.tsx.snap +++ b/test/components/structures/__snapshots__/FilePanel-test.tsx.snap @@ -8,9 +8,11 @@ exports[`FilePanel renders empty state 1`] = `
-
+

+ Files +

+
+
-
-
should render widgets 1`] = ` >
+

+ Extensions +

+ +
+
-
-
should show the empty state when there are no pi
-
-

- Pinned message -

-
+ Pinned messages +

+
-
@@ -186,6 +213,89 @@ exports[` has button to edit topic 1`] = ` data-orientation="horizontal" role="separator" /> + +