From bc02547ac98bb8691ccffea99392de8b74bf4ea5 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Tue, 6 Aug 2024 16:28:43 +0100
Subject: [PATCH] Add right panel timeline to tabs as `Chat`

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 src/components/structures/RoomView.tsx        |  2 +-
 .../views/right_panel/RightPanelTabs.tsx      | 22 ++++++++++++++++++-
 .../views/right_panel/TimelineCard.tsx        | 17 +++-----------
 3 files changed, 25 insertions(+), 16 deletions(-)

diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx
index 9c6ffb857f9..70ee16b542a 100644
--- 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
index a8b68aa7adc..2df2bcb8d17 100644
--- 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,6 +29,8 @@ 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 = [
@@ -36,6 +38,7 @@ function shouldShowTabsForPhase(phase?: RightPanelPhases): boolean {
         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
index 97f5aabc320..22926a1e8a7 100644
--- 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">