Add right panel timeline to tabs as Chat

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
matrix-org · Aug 6, 2024 · bc02547 · bc02547
1 parent 69ac1cc
commit bc02547
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 16 deletions.
diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx
@@ -161,7 +161,7 @@ interface IRoomProps {
 
 // This defines the content of the mainSplit.
 // If the mainSplit does not contain the Timeline, the chat is shown in the right panel.
-enum MainSplitContentType {
+export enum MainSplitContentType {
     Timeline,
     MaximisedWidget,
     Call,

diff --git a/src/components/views/right_panel/RightPanelTabs.tsx b/src/components/views/right_panel/RightPanelTabs.tsx
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { useRef } from "react";
+import React, { useContext, useRef } from "react";
 import { NavBar, NavItem } from "@vector-im/compound-web";
 import { Room } from "matrix-js-sdk/src/matrix";
 
@@ -29,13 +29,16 @@ import SettingsStore from "../../../settings/SettingsStore";
 import { UIComponent, UIFeature } from "../../../settings/UIFeature";
 import { shouldShowComponent } from "../../../customisations/helpers/UIComponents";
 import { useIsVideoRoom } from "../../../utils/video-rooms";
+import RoomContext from "../../../contexts/RoomContext";
+import { MainSplitContentType } from "../../structures/RoomView";
 
 function shouldShowTabsForPhase(phase?: RightPanelPhases): boolean {
     const tabs = [
         RightPanelPhases.RoomSummary,
         RightPanelPhases.RoomMemberList,
         RightPanelPhases.ThreadPanel,
         RightPanelPhases.Extensions,
+        RightPanelPhases.Timeline,
     ];
     return !!phase && tabs.includes(phase);
 }
@@ -47,6 +50,7 @@ type Props = {
 
 export const RightPanelTabs: React.FC<Props> = ({ phase, room }): JSX.Element | null => {
     const threadsTabRef = useRef<HTMLButtonElement | null>(null);
+    const roomContext = useContext(RoomContext);
 
     useDispatcher(dispatcher, (payload) => {
         // This actually focuses the threads tab, as its the only interactive element,
@@ -57,6 +61,10 @@ export const RightPanelTabs: React.FC<Props> = ({ phase, room }): JSX.Element |
     });
 
     const isVideoRoom = useIsVideoRoom(room);
+    const showChatTab =
+        isVideoRoom ||
+        roomContext.mainSplitContentType === MainSplitContentType.MaximisedWidget ||
+        roomContext.mainSplitContentType === MainSplitContentType.Call;
 
     if (!shouldShowTabsForPhase(phase)) return null;
 
@@ -72,6 +80,18 @@ export const RightPanelTabs: React.FC<Props> = ({ phase, room }): JSX.Element |
             >
                 {_t("right_panel|info")}
             </NavItem>
+            {showChatTab && (
+                <NavItem
+                    aria-controls="timeline-panel"
+                    id="timeline-panel-tab"
+                    onClick={() => {
+                        RightPanelStore.instance.pushCard({ phase: RightPanelPhases.Timeline }, true);
+                    }}
+                    active={phase === RightPanelPhases.Timeline}
+                >
+                    {_t("right_panel|video_room_chat|title")}
+                </NavItem>
+            )}
             <NavItem
                 aria-controls="memberlist-panel"
                 id="memberlist-panel-tab"

diff --git a/src/components/views/right_panel/TimelineCard.tsx b/src/components/views/right_panel/TimelineCard.tsx
@@ -35,7 +35,6 @@ import { E2EStatus } from "../../../utils/ShieldUtils";
 import EditorStateTransfer from "../../../utils/EditorStateTransfer";
 import RoomContext, { TimelineRenderingType } from "../../../contexts/RoomContext";
 import dis from "../../../dispatcher/dispatcher";
-import { _t } from "../../../languageHandler";
 import { ActionPayload } from "../../../dispatcher/payloads";
 import { Action } from "../../../dispatcher/actions";
 import ContentMessages from "../../../ContentMessages";
@@ -44,7 +43,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";
 
@@ -193,16 +191,6 @@ export default class TimelineCard extends React.Component<IProps, IState> {
         }
     };
 
-    private renderTimelineCardHeader = (): JSX.Element => {
-        return (
-            <div className="mx_BaseCard_header_title">
-                <Heading size="4" className="mx_BaseCard_header_title_heading">
-                    {_t("right_panel|video_room_chat|title")}
-                </Heading>
-            </div>
-        );
-    };
-
     public render(): React.ReactNode {
         const highlightedEventId = this.state.isInitialEventHighlighted ? this.state.initialEventId : undefined;
 
@@ -232,10 +220,11 @@ export default class TimelineCard extends React.Component<IProps, IState> {
             >
                 <BaseCard
                     className={this.props.classNames}
-                    onClose={this.props.onClose}
                     withoutScrollContainer={true}
-                    header={this.renderTimelineCardHeader()}
                     ref={this.card}
+                    hideHeaderButtons
+                    id="timeline-panel"
+                    ariaLabelledBy="timeline-panel-tab"
                 >
                     {this.card.current && <Measured sensor={this.card.current} onMeasurement={this.onMeasurement} />}
                     <div className="mx_TimelineCard_timeline">