From 7d98740d6e4fcaf4778394c4d7fec4da5f13f830 Mon Sep 17 00:00:00 2001
From: "J. Ryan Stinnett" <jryans@gmail.com>
Date: Mon, 28 Mar 2022 17:44:54 +0100
Subject: [PATCH 1/4] Show room preview bar with maximised widgets

This gives non-members a clear way to join a public room when maximised widgets
are active.
---
 res/css/views/right_panel/_TimelineCard.scss  |  1 +
 src/components/structures/RoomView.tsx        | 15 +++++++-----
 .../views/right_panel/TimelineCard.tsx        | 23 +++++++++++--------
 3 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/res/css/views/right_panel/_TimelineCard.scss b/res/css/views/right_panel/_TimelineCard.scss
index 16cf06dac56..3f7435c5119 100644
--- a/res/css/views/right_panel/_TimelineCard.scss
+++ b/res/css/views/right_panel/_TimelineCard.scss
@@ -123,4 +123,5 @@ limitations under the License.
 .mx_TimelineCard_timeline {
     overflow: hidden;
     position: relative; // offset parent for jump to bottom button
+    flex: 1;
 }
diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx
index ffd80e02223..18433591372 100644
--- a/src/components/structures/RoomView.tsx
+++ b/src/components/structures/RoomView.tsx
@@ -2126,12 +2126,15 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
                 </>;
                 break;
             case MainSplitContentType.MaximisedWidget:
-                mainSplitBody = <AppsDrawer
-                    room={this.state.room}
-                    userId={this.context.credentials.userId}
-                    resizeNotifier={this.props.resizeNotifier}
-                    showApps={true}
-                />;
+                mainSplitBody = <>
+                    <AppsDrawer
+                        room={this.state.room}
+                        userId={this.context.credentials.userId}
+                        resizeNotifier={this.props.resizeNotifier}
+                        showApps={true}
+                    />
+                    { previewBar }
+                </>;
                 break;
             case MainSplitContentType.Video: {
                 const app = getVoiceChannel(this.state.room.roomId);
diff --git a/src/components/views/right_panel/TimelineCard.tsx b/src/components/views/right_panel/TimelineCard.tsx
index bd7d4361cba..74ae8abf598 100644
--- a/src/components/views/right_panel/TimelineCard.tsx
+++ b/src/components/views/right_panel/TimelineCard.tsx
@@ -221,6 +221,9 @@ export default class TimelineCard extends React.Component<IProps, IState> {
 
         const isUploading = ContentMessages.sharedInstance().getCurrentUploads(this.props.composerRelation).length > 0;
 
+        const myMembership = this.props.room.getMyMembership();
+        const canSpeak = myMembership === "join";
+
         return (
             <RoomContext.Provider value={{
                 ...this.context,
@@ -270,15 +273,17 @@ export default class TimelineCard extends React.Component<IProps, IState> {
                         <UploadBar room={this.props.room} relation={this.props.composerRelation} />
                     ) }
 
-                    <MessageComposer
-                        room={this.props.room}
-                        relation={this.props.composerRelation}
-                        resizeNotifier={this.props.resizeNotifier}
-                        replyToEvent={this.state.replyToEvent}
-                        permalinkCreator={this.props.permalinkCreator}
-                        e2eStatus={this.props.e2eStatus}
-                        compact={true}
-                    />
+                    { canSpeak && (
+                        <MessageComposer
+                            room={this.props.room}
+                            relation={this.props.composerRelation}
+                            resizeNotifier={this.props.resizeNotifier}
+                            replyToEvent={this.state.replyToEvent}
+                            permalinkCreator={this.props.permalinkCreator}
+                            e2eStatus={this.props.e2eStatus}
+                            compact={true}
+                        />
+                    ) }
                 </BaseCard>
             </RoomContext.Provider>
         );

From 44776a1c5c81209abdad60b1766a3a963d0980a0 Mon Sep 17 00:00:00 2001
From: "J. Ryan Stinnett" <jryans@gmail.com>
Date: Tue, 29 Mar 2022 12:47:57 +0100
Subject: [PATCH 2/4] Use a somewhat sane visual layout

---
 res/css/views/right_panel/_TimelineCard.scss | 14 +++++++-------
 res/css/views/rooms/_RoomPreviewBar.scss     | 10 +++++++++-
 src/components/structures/RoomView.tsx       |  9 ++++++++-
 3 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/res/css/views/right_panel/_TimelineCard.scss b/res/css/views/right_panel/_TimelineCard.scss
index 3f7435c5119..349654886d8 100644
--- a/res/css/views/right_panel/_TimelineCard.scss
+++ b/res/css/views/right_panel/_TimelineCard.scss
@@ -1,5 +1,5 @@
 /*
-Copyright 2021 The Matrix.org Foundation C.I.C.
+Copyright 2021 - 2022 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -35,6 +35,12 @@ limitations under the License.
         }
     }
 
+    .mx_TimelineCard_timeline {
+        overflow: hidden;
+        position: relative; // offset parent for jump to bottom button
+        flex: 1;
+    }
+
     .mx_AutoHideScrollbar {
         padding-right: 10px;
         width: calc(100% - 10px);
@@ -119,9 +125,3 @@ limitations under the License.
         flex-basis: 48px; // 12 (padding on message list) + 36 (padding on event lines)
     }
 }
-
-.mx_TimelineCard_timeline {
-    overflow: hidden;
-    position: relative; // offset parent for jump to bottom button
-    flex: 1;
-}
diff --git a/res/css/views/rooms/_RoomPreviewBar.scss b/res/css/views/rooms/_RoomPreviewBar.scss
index 8e4a9ee5756..7cce08c7896 100644
--- a/res/css/views/rooms/_RoomPreviewBar.scss
+++ b/res/css/views/rooms/_RoomPreviewBar.scss
@@ -1,5 +1,5 @@
 /*
-Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2015 - 2022 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -98,6 +98,14 @@ limitations under the License.
     }
 }
 
+// With maximised widgets, the panel fits in better when rounded
+.mx_MainSplit_maximisedWidget .mx_RoomPreviewBar_panel {
+    margin: $container-gap-width;
+    margin-right: calc($container-gap-width / 2); // Shared with right panel
+    margin-top: 0; // Already covered by apps drawer
+    border-radius: 8px;
+}
+
 .mx_RoomPreviewBar_dialog {
     margin: auto;
     box-sizing: content;
diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx
index 18433591372..d188548f840 100644
--- a/src/components/structures/RoomView.tsx
+++ b/src/components/structures/RoomView.tsx
@@ -2104,9 +2104,11 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
         const showChatEffects = SettingsStore.getValue('showChatEffects');
 
         let mainSplitBody;
+        let mainSplitContentClassName;
         // Decide what to show in the main split
         switch (this.state.mainSplitContentType) {
             case MainSplitContentType.Timeline:
+                mainSplitContentClassName = "mx_MainSplit_timeline";
                 mainSplitBody = <>
                     <Measured
                         sensor={this.roomViewBody.current}
@@ -2126,6 +2128,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
                 </>;
                 break;
             case MainSplitContentType.MaximisedWidget:
+                mainSplitContentClassName = "mx_MainSplit_maximisedWidget";
                 mainSplitBody = <>
                     <AppsDrawer
                         room={this.state.room}
@@ -2139,6 +2142,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
             case MainSplitContentType.Video: {
                 const app = getVoiceChannel(this.state.room.roomId);
                 if (!app) break;
+                mainSplitContentClassName = "mx_MainSplit_video";
                 mainSplitBody = <AppTile
                     app={app}
                     room={this.state.room}
@@ -2150,6 +2154,8 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
                 />;
             }
         }
+        const mainSplitContentClasses = classNames("mx_RoomView_body", mainSplitContentClassName);
+
         let excludedRightPanelPhaseButtons = [RightPanelPhases.Timeline];
         let onAppsClick = this.onAppsClick;
         let onForgetClick = this.onForgetClick;
@@ -2165,6 +2171,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
             onForgetClick = null;
             onSearchClick = null;
         }
+
         return (
             <RoomContext.Provider value={this.state}>
                 <main className={mainClasses} ref={this.roomView} onKeyDown={this.onReactKeyDown}>
@@ -2186,7 +2193,7 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
                             excludedRightPanelPhaseButtons={excludedRightPanelPhaseButtons}
                         />
                         <MainSplit panel={rightPanel} resizeNotifier={this.props.resizeNotifier}>
-                            <div className="mx_RoomView_body" ref={this.roomViewBody} data-layout={this.state.layout}>
+                            <div className={mainSplitContentClasses} ref={this.roomViewBody} data-layout={this.state.layout}>
                                 { mainSplitBody }
                             </div>
                         </MainSplit>

From 0082b499fde2aa93b248b03119487ca8d8325b68 Mon Sep 17 00:00:00 2001
From: "J. Ryan Stinnett" <jryans@gmail.com>
Date: Tue, 29 Mar 2022 13:10:20 +0100
Subject: [PATCH 3/4] Add types

---
 src/components/structures/RoomView.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx
index d188548f840..72d6af2cb12 100644
--- a/src/components/structures/RoomView.tsx
+++ b/src/components/structures/RoomView.tsx
@@ -2103,8 +2103,8 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
 
         const showChatEffects = SettingsStore.getValue('showChatEffects');
 
-        let mainSplitBody;
-        let mainSplitContentClassName;
+        let mainSplitBody: React.ReactFragment;
+        let mainSplitContentClassName: string;
         // Decide what to show in the main split
         switch (this.state.mainSplitContentType) {
             case MainSplitContentType.Timeline:

From 9e4f9196f3c4a91307aa657a2d2540b4fa1b2f85 Mon Sep 17 00:00:00 2001
From: "J. Ryan Stinnett" <jryans@gmail.com>
Date: Wed, 30 Mar 2022 12:36:49 +0100
Subject: [PATCH 4/4] Rename to showComposer

---
 src/components/structures/RoomView.tsx            | 4 ++--
 src/components/views/right_panel/TimelineCard.tsx | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx
index 72d6af2cb12..8ea8f2dc34e 100644
--- a/src/components/structures/RoomView.tsx
+++ b/src/components/structures/RoomView.tsx
@@ -1983,11 +1983,11 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
         );
 
         let messageComposer; let searchInfo;
-        const canSpeak = (
+        const showComposer = (
             // joined and not showing search results
             myMembership === 'join' && !this.state.searchResults
         );
-        if (canSpeak) {
+        if (showComposer) {
             messageComposer =
                 <MessageComposer
                     room={this.state.room}
diff --git a/src/components/views/right_panel/TimelineCard.tsx b/src/components/views/right_panel/TimelineCard.tsx
index 74ae8abf598..b0c83df43e1 100644
--- a/src/components/views/right_panel/TimelineCard.tsx
+++ b/src/components/views/right_panel/TimelineCard.tsx
@@ -222,7 +222,7 @@ export default class TimelineCard extends React.Component<IProps, IState> {
         const isUploading = ContentMessages.sharedInstance().getCurrentUploads(this.props.composerRelation).length > 0;
 
         const myMembership = this.props.room.getMyMembership();
-        const canSpeak = myMembership === "join";
+        const showComposer = myMembership === "join";
 
         return (
             <RoomContext.Provider value={{
@@ -273,7 +273,7 @@ export default class TimelineCard extends React.Component<IProps, IState> {
                         <UploadBar room={this.props.room} relation={this.props.composerRelation} />
                     ) }
 
-                    { canSpeak && (
+                    { showComposer && (
                         <MessageComposer
                             room={this.props.room}
                             relation={this.props.composerRelation}