Implement a very low fidelity UI for threads

res/css/views/rooms/_EventTile.scss

@@ -681,6 +681,30 @@ $hover-select-border: 4px;
     display: flex;
     flex-direction: column;
 
+    .mx_ScrollPanel {
+        margin-top: 20px;
+        .mx_RoomView_MessageList {
+            padding: 0;
+        }
+    }
+
+    .mx_EventTile_senderDetails {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        margin-bottom: 6px;
+        a {
+            flex: 1;
+            min-width: none;
+            max-width: 100%;
+            display: flex;
+            align-items: center;
+            .mx_SenderProfile {
+                flex: 1;
+            }
+        }
+    }
+
     .mx_ThreadView_List {
         flex: 1;
         overflow: scroll;
@@ -698,7 +722,6 @@ $hover-select-border: 4px;
         width: 100%;
         display: flex;
         flex-direction: column;
-        border-bottom: 1px solid #888;
         margin-top: 0;
         padding-bottom: 5px;
         margin-bottom: 5px;

res/css/views/rooms/_MessageComposer.scss

@@ -340,3 +340,17 @@ limitations under the License.
         height: 50px;
     }
 }
+
+/**
+ * Unstable compact mode
+ */
+
+.mx_MessageComposer.mx_MessageComposer--compact {
+    margin-right: 0;
+    .mx_MessageComposer_wrapper {
+        padding: 0;
+    }
+    .mx_MessageComposer_button:last-child {
+        margin-right: 0;
+    }
+}

src/components/structures/ThreadView.tsx

@@ -115,6 +115,7 @@ class ThreadView extends React.Component<IProps, IState> {
                     replyToEvent={thread?.replyToEvent}
                     showReplyPreview={false}
                     permalinkCreator={this.props.permalinkCreator}
+                    compact={true}
                 />
             </BaseCard>
         );

src/components/views/rooms/MessageComposer.tsx

@@ -185,6 +185,7 @@ interface IProps {
     replyToEvent?: MatrixEvent;
     showReplyPreview?: boolean;
     e2eStatus?: E2EStatus;
+    compact?: boolean;
 }
 
 interface IState {
@@ -204,6 +205,7 @@ export default class MessageComposer extends React.Component<IProps, IState> {
 
     static defaultProps = {
         showReplyPreview: true,
+        compact: false,
     };
 
     constructor(props) {
@@ -367,7 +369,7 @@ export default class MessageComposer extends React.Component<IProps, IState> {
 
     render() {
         const controls = [
-            this.state.me ? <ComposerAvatar key="controls_avatar" me={this.state.me} /> : null,
+            this.state.me && !this.props.compact ? <ComposerAvatar key="controls_avatar" me={this.state.me} /> : null,
             this.props.e2eStatus ?
                 <E2EIcon key="e2eIcon" status={this.props.e2eStatus} className="mx_MessageComposer_e2eIcon" /> :
                 null,
@@ -455,8 +457,14 @@ export default class MessageComposer extends React.Component<IProps, IState> {
             />;
         }
 
+        const classes = classNames({
+            "mx_MessageComposer": true,
+            "mx_GroupLayout": true,
+            "mx_MessageComposer--compact": this.props.compact,
+        });
+
         return (
-            <div className="mx_MessageComposer mx_GroupLayout">
+            <div className={classes}>
                 { recordingTooltip }
                 <div className="mx_MessageComposer_wrapper">
                     { this.props.showReplyPreview && (