From 6e305fd8547dc719a6d5dd43bd35f1080833c65e Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 6 Oct 2021 13:59:52 -0500
Subject: [PATCH 01/11] DetailedStatus: remove gaps, rename
 .detailed-status-container to .thread

---
 app/soapbox/features/status/index.js       | 84 +++++++++++-----------
 app/styles/components/detailed-status.scss | 19 +++--
 2 files changed, 57 insertions(+), 46 deletions(-)

diff --git a/app/soapbox/features/status/index.js b/app/soapbox/features/status/index.js
index af17aa7ed..ae2901f30 100644
--- a/app/soapbox/features/status/index.js
+++ b/app/soapbox/features/status/index.js
@@ -595,53 +595,55 @@ class Status extends ImmutablePureComponent {
           />
         */}
 
-        <div ref={this.setRef} className='detailed-status-container'>
+        <div ref={this.setRef} className='thread'>
           {ancestors && (
-            <div className='detailed-status__ancestors'>{ancestors}</div>
+            <div className='thread__ancestors'>{ancestors}</div>
           )}
 
-          <HotKeys handlers={handlers}>
-            <div ref={this.setStatusRef} className={classNames('focusable', 'detailed-status__wrapper')} tabIndex='0' aria-label={textForScreenReader(intl, status, false)}>
-              <DetailedStatus
-                status={status}
-                onOpenVideo={this.handleOpenVideo}
-                onOpenMedia={this.handleOpenMedia}
-                onToggleHidden={this.handleToggleHidden}
-                domain={domain}
-                showMedia={this.state.showMedia}
-                onToggleMediaVisibility={this.handleToggleMediaVisibility}
-              />
+          <div className='thread__status'>
+            <HotKeys handlers={handlers}>
+              <div ref={this.setStatusRef} className={classNames('focusable', 'detailed-status__wrapper')} tabIndex='0' aria-label={textForScreenReader(intl, status, false)}>
+                <DetailedStatus
+                  status={status}
+                  onOpenVideo={this.handleOpenVideo}
+                  onOpenMedia={this.handleOpenMedia}
+                  onToggleHidden={this.handleToggleHidden}
+                  domain={domain}
+                  showMedia={this.state.showMedia}
+                  onToggleMediaVisibility={this.handleToggleMediaVisibility}
+                />
 
-              <ActionBar
-                status={status}
-                onReply={this.handleReplyClick}
-                onFavourite={this.handleFavouriteClick}
-                onEmojiReact={this.handleEmojiReactClick}
-                onReblog={this.handleReblogClick}
-                onDelete={this.handleDeleteClick}
-                onDirect={this.handleDirectClick}
-                onMention={this.handleMentionClick}
-                onMute={this.handleMuteClick}
-                onMuteConversation={this.handleConversationMuteClick}
-                onBlock={this.handleBlockClick}
-                onReport={this.handleReport}
-                onPin={this.handlePin}
-                onBookmark={this.handleBookmark}
-                onEmbed={this.handleEmbed}
-                onDeactivateUser={this.handleDeactivateUser}
-                onDeleteUser={this.handleDeleteUser}
-                onToggleStatusSensitivity={this.handleToggleStatusSensitivity}
-                onDeleteStatus={this.handleDeleteStatus}
-                allowedEmoji={this.props.allowedEmoji}
-                emojiSelectorFocused={this.state.emojiSelectorFocused}
-                handleEmojiSelectorExpand={this.handleEmojiSelectorExpand}
-                handleEmojiSelectorUnfocus={this.handleEmojiSelectorUnfocus}
-              />
-            </div>
-          </HotKeys>
+                <ActionBar
+                  status={status}
+                  onReply={this.handleReplyClick}
+                  onFavourite={this.handleFavouriteClick}
+                  onEmojiReact={this.handleEmojiReactClick}
+                  onReblog={this.handleReblogClick}
+                  onDelete={this.handleDeleteClick}
+                  onDirect={this.handleDirectClick}
+                  onMention={this.handleMentionClick}
+                  onMute={this.handleMuteClick}
+                  onMuteConversation={this.handleConversationMuteClick}
+                  onBlock={this.handleBlockClick}
+                  onReport={this.handleReport}
+                  onPin={this.handlePin}
+                  onBookmark={this.handleBookmark}
+                  onEmbed={this.handleEmbed}
+                  onDeactivateUser={this.handleDeactivateUser}
+                  onDeleteUser={this.handleDeleteUser}
+                  onToggleStatusSensitivity={this.handleToggleStatusSensitivity}
+                  onDeleteStatus={this.handleDeleteStatus}
+                  allowedEmoji={this.props.allowedEmoji}
+                  emojiSelectorFocused={this.state.emojiSelectorFocused}
+                  handleEmojiSelectorExpand={this.handleEmojiSelectorExpand}
+                  handleEmojiSelectorUnfocus={this.handleEmojiSelectorUnfocus}
+                />
+              </div>
+            </HotKeys>
+          </div>
 
           {descendants && (
-            <div className='detailed-status__descendants'>{descendants}</div>
+            <div className='thread__descendants'>{descendants}</div>
           )}
         </div>
       </Column>
diff --git a/app/styles/components/detailed-status.scss b/app/styles/components/detailed-status.scss
index 094dce139..6b182fa61 100644
--- a/app/styles/components/detailed-status.scss
+++ b/app/styles/components/detailed-status.scss
@@ -160,9 +160,18 @@
   margin-right: 5px;
 }
 
-/* Connect the first status to the SubNavigation */
-.detailed-status__ancestors .status-container:first-child .status__wrapper,
-.detailed-status-container > div:first-child .detailed-status__wrapper {
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
+.thread {
+  // Don't display gaps between statuses in a thread
+  .status-container {
+    padding: 0;
+  }
+
+  .status__wrapper {
+    border-radius: 0;
+  }
+
+  .detailed-status__wrapper {
+    border-radius: 0;
+    margin: 0;
+  }
 }

From 4b92dbc93ddd008b29defb7ffd000b5073967058 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 6 Oct 2021 14:39:39 -0500
Subject: [PATCH 02/11] Create separate MaterialStatus component for statuses
 with gaps (in timelines)

---
 app/soapbox/components/material_status.js  | 30 ++++++++++++++++++++++
 app/soapbox/components/status_list.js      |  6 ++---
 app/soapbox/containers/status_container.js | 14 +---------
 app/styles/components/status.scss          | 18 ++++++-------
 4 files changed, 43 insertions(+), 25 deletions(-)
 create mode 100644 app/soapbox/components/material_status.js

diff --git a/app/soapbox/components/material_status.js b/app/soapbox/components/material_status.js
new file mode 100644
index 000000000..25fd24e05
--- /dev/null
+++ b/app/soapbox/components/material_status.js
@@ -0,0 +1,30 @@
+/**
+ * MaterialStatus: like a Status, but with gaps and rounded corners.
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import StatusContainer from 'soapbox/containers/status_container';
+
+export default class MaterialStatus extends React.Component {
+
+  static propTypes = {
+    hidden: PropTypes.bool,
+  }
+
+  render() {
+    // Performance: when hidden, don't render the wrapper divs
+    if (this.props.hidden) {
+      return <StatusContainer {...this.props} />;
+    }
+
+    return (
+      <div className='material-status'>
+        <div className='material-status__status'>
+          <StatusContainer {...this.props} />
+        </div>
+      </div>
+    );
+  }
+
+}
diff --git a/app/soapbox/components/status_list.js b/app/soapbox/components/status_list.js
index a4837a6c4..f96ec779f 100644
--- a/app/soapbox/components/status_list.js
+++ b/app/soapbox/components/status_list.js
@@ -3,7 +3,7 @@ import React from 'react';
 import { FormattedMessage, defineMessages } from 'react-intl';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
-import StatusContainer from '../containers/status_container';
+import MaterialStatus from 'soapbox/components/material_status';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import LoadGap from './load_gap';
 import ScrollableList from './scrollable_list';
@@ -117,7 +117,7 @@ export default class StatusList extends ImmutablePureComponent {
           onClick={onLoadMore}
         />
       ) : (
-        <StatusContainer
+        <MaterialStatus
           key={statusId}
           id={statusId}
           onMoveUp={this.handleMoveUp}
@@ -132,7 +132,7 @@ export default class StatusList extends ImmutablePureComponent {
 
     if (scrollableContent && featuredStatusIds) {
       scrollableContent = featuredStatusIds.map(statusId => (
-        <StatusContainer
+        <MaterialStatus
           key={`f-${statusId}`}
           id={statusId}
           featured
diff --git a/app/soapbox/containers/status_container.js b/app/soapbox/containers/status_container.js
index ce18e23da..5d0490c60 100644
--- a/app/soapbox/containers/status_container.js
+++ b/app/soapbox/containers/status_container.js
@@ -231,16 +231,4 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
 
 });
 
-export default @injectIntl
-@connect(makeMapStateToProps, mapDispatchToProps)
-class StatusContainer extends React.Component {
-
-  render() {
-    return (
-      <div className='status-container'>
-        <Status {...this.props} />
-      </div>
-    );
-  }
-
-}
+export default injectIntl(connect(makeMapStateToProps, mapDispatchToProps)(Status));
diff --git a/app/styles/components/status.scss b/app/styles/components/status.scss
index 7fbb7af2f..2efd84e3b 100644
--- a/app/styles/components/status.scss
+++ b/app/styles/components/status.scss
@@ -126,15 +126,6 @@
   vertical-align: middle;
 }
 
-.status-container {
-  padding-bottom: 10px;
-}
-
-.status__wrapper {
-  @include standard-panel;
-  padding: 15px 0 10px;
-}
-
 .status__wrapper--filtered {
   color: var(--primary-text-color);
   border: 0;
@@ -719,3 +710,12 @@ a.status-card.compact:hover {
     }
   }
 }
+
+.material-status {
+  padding-bottom: 10px;
+
+  &__status {
+    @include standard-panel;
+    padding: 15px 0 10px;
+  }
+}

From b6704991d237ecfd8c091ae4f5aa9cc75a157973 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 6 Oct 2021 15:57:24 -0500
Subject: [PATCH 03/11] Column: consolidate column components, refactor
 transparency, get rid of .column-area--mobile, wtf

---
 app/soapbox/components/column.js              |  6 +-
 .../features/account_timeline/index.js        |  2 +-
 app/soapbox/features/bookmarks/index.js       |  2 +-
 .../features/community_timeline/index.js      |  2 +-
 app/soapbox/features/direct_timeline/index.js |  2 +-
 app/soapbox/features/home_timeline/index.js   |  2 +-
 app/soapbox/features/public_timeline/index.js |  2 +-
 app/soapbox/features/remote_timeline/index.js |  2 +-
 .../features/ui/components/better_column.js   |  9 +--
 app/soapbox/features/ui/components/column.js  |  9 +--
 .../features/ui/components/columns_area.js    |  2 +-
 app/soapbox/pages/admin_page.js               |  2 +-
 app/soapbox/pages/default_page.js             |  2 +-
 app/soapbox/pages/empty_page.js               |  2 +-
 app/soapbox/pages/group_page.js               |  2 +-
 app/soapbox/pages/groups_page.js              |  2 +-
 app/soapbox/pages/home_page.js                |  4 +-
 app/soapbox/pages/profile_page.js             |  4 +-
 app/soapbox/pages/remote_instance_page.js     |  2 +-
 app/soapbox/pages/status_page.js              |  4 +-
 app/styles/accounts.scss                      |  4 --
 app/styles/chats.scss                         |  2 +-
 app/styles/components/columns.scss            | 68 +++++++------------
 app/styles/components/detailed-status.scss    | 17 -----
 app/styles/components/status.scss             |  9 ---
 app/styles/ui.scss                            |  1 -
 26 files changed, 61 insertions(+), 104 deletions(-)

diff --git a/app/soapbox/components/column.js b/app/soapbox/components/column.js
index 02cc08743..a8aec1542 100644
--- a/app/soapbox/components/column.js
+++ b/app/soapbox/components/column.js
@@ -6,18 +6,20 @@ export default class Column extends React.PureComponent {
 
   static propTypes = {
     className: PropTypes.string,
+    transparent: PropTypes.bool,
     children: PropTypes.node,
     label: PropTypes.string,
   };
 
   render() {
-    const { className, label, children } = this.props;
+    const { className, label, children, transparent, ...rest } = this.props;
 
     return (
       <div
         role='region'
         aria-label={label}
-        className={classNames('column', className)}
+        className={classNames('column', className, { 'column--transparent': transparent })}
+        {...rest}
       >
         {children}
       </div>
diff --git a/app/soapbox/features/account_timeline/index.js b/app/soapbox/features/account_timeline/index.js
index 8b17fcb2b..2e49ed9db 100644
--- a/app/soapbox/features/account_timeline/index.js
+++ b/app/soapbox/features/account_timeline/index.js
@@ -177,7 +177,7 @@ class AccountTimeline extends ImmutablePureComponent {
     }
 
     return (
-      <Column showBackBtn={false}>
+      <Column transparent>
         <div className='account__section-headline'>
           <NavLink exact to={`/@${accountUsername}`}>
             <FormattedMessage id='account.posts' defaultMessage='Posts' />
diff --git a/app/soapbox/features/bookmarks/index.js b/app/soapbox/features/bookmarks/index.js
index 1d726adb9..0099871f5 100644
--- a/app/soapbox/features/bookmarks/index.js
+++ b/app/soapbox/features/bookmarks/index.js
@@ -55,7 +55,7 @@ class Bookmarks extends ImmutablePureComponent {
     const emptyMessage = <FormattedMessage id='empty_column.bookmarks' defaultMessage="You don't have any bookmarks yet. When you add one, it will show up here." />;
 
     return (
-      <Column icon='bookmark' heading={intl.formatMessage(messages.heading)} backBtnSlim>
+      <Column heading={intl.formatMessage(messages.heading)} transparent>
         <StatusList
           trackScroll={!pinned}
           statusIds={statusIds}
diff --git a/app/soapbox/features/community_timeline/index.js b/app/soapbox/features/community_timeline/index.js
index b3a7e8161..ced92698a 100644
--- a/app/soapbox/features/community_timeline/index.js
+++ b/app/soapbox/features/community_timeline/index.js
@@ -73,7 +73,7 @@ class CommunityTimeline extends React.PureComponent {
     const { intl, onlyMedia, timelineId } = this.props;
 
     return (
-      <Column label={intl.formatMessage(messages.title)}>
+      <Column label={intl.formatMessage(messages.title)} transparent>
         <SubNavigation message={intl.formatMessage(messages.title)} />
         <StatusListContainer
           scrollKey={`${timelineId}_timeline`}
diff --git a/app/soapbox/features/direct_timeline/index.js b/app/soapbox/features/direct_timeline/index.js
index ba7bd32c8..27f17c0d6 100644
--- a/app/soapbox/features/direct_timeline/index.js
+++ b/app/soapbox/features/direct_timeline/index.js
@@ -48,7 +48,7 @@ class DirectTimeline extends React.PureComponent {
     const { intl, hasUnread } = this.props;
 
     return (
-      <Column label={intl.formatMessage(messages.title)}>
+      <Column label={intl.formatMessage(messages.title)} transparent>
         <ColumnHeader
           icon='envelope'
           active={hasUnread}
diff --git a/app/soapbox/features/home_timeline/index.js b/app/soapbox/features/home_timeline/index.js
index d6c9340b7..69b8e81b4 100644
--- a/app/soapbox/features/home_timeline/index.js
+++ b/app/soapbox/features/home_timeline/index.js
@@ -98,7 +98,7 @@ class HomeTimeline extends React.PureComponent {
     const { done } = this.state;
 
     return (
-      <Column label={intl.formatMessage(messages.title)}>
+      <Column label={intl.formatMessage(messages.title)} transparent>
         {(features.suggestions && isEmpty && !isLoading && !done) ? (
           <BundleContainer fetchComponent={FollowRecommendationsContainer}>
             {Component => <Component onDone={this.handleDone} />}
diff --git a/app/soapbox/features/public_timeline/index.js b/app/soapbox/features/public_timeline/index.js
index a186fc99c..bf840c24e 100644
--- a/app/soapbox/features/public_timeline/index.js
+++ b/app/soapbox/features/public_timeline/index.js
@@ -97,7 +97,7 @@ class CommunityTimeline extends React.PureComponent {
     const { intl, onlyMedia, timelineId, siteTitle, showExplanationBox, explanationBoxExpanded } = this.props;
 
     return (
-      <Column label={intl.formatMessage(messages.title)}>
+      <Column label={intl.formatMessage(messages.title)} transparent>
         <SubNavigation message={intl.formatMessage(messages.title)} />
         <PinnedHostsPicker />
         {showExplanationBox && <div className='explanation-box'>
diff --git a/app/soapbox/features/remote_timeline/index.js b/app/soapbox/features/remote_timeline/index.js
index 26045e162..2f6aac0dd 100644
--- a/app/soapbox/features/remote_timeline/index.js
+++ b/app/soapbox/features/remote_timeline/index.js
@@ -85,7 +85,7 @@ class RemoteTimeline extends React.PureComponent {
     const { intl, hasUnread, onlyMedia, timelineId, instance, pinned } = this.props;
 
     return (
-      <Column label={intl.formatMessage(messages.title)}>
+      <Column label={intl.formatMessage(messages.title)} transparent>
         <HomeColumnHeader activeItem='fediverse' active={hasUnread} />
         <PinnedHostsPicker host={instance} />
         {!pinned && <div className='timeline-filter-message'>
diff --git a/app/soapbox/features/ui/components/better_column.js b/app/soapbox/features/ui/components/better_column.js
index 65f7dd1d8..9bcbf2783 100644
--- a/app/soapbox/features/ui/components/better_column.js
+++ b/app/soapbox/features/ui/components/better_column.js
@@ -1,11 +1,12 @@
 import React from 'react';
 import ColumnHeader from './column_header';
 import PropTypes from 'prop-types';
+import Column from 'soapbox/components/column';
 import ColumnBackButton from '../../../components/column_back_button_slim';
 import DropdownMenu from 'soapbox/containers/dropdown_menu_container';
 
 // Yes, there are 3 types of columns at this point, but this one is better, I swear
-export default class Column extends React.PureComponent {
+export default class BetterColumn extends React.PureComponent {
 
   static propTypes = {
     heading: PropTypes.string,
@@ -16,11 +17,11 @@ export default class Column extends React.PureComponent {
   };
 
   render() {
-    const { heading, icon, children, active, menu } = this.props;
+    const { heading, icon, children, active, menu, ...rest } = this.props;
     const columnHeaderId = heading && heading.replace(/ /g, '-');
 
     return (
-      <div role='region' aria-labelledby={columnHeaderId} className='column column--better'>
+      <Column aria-labelledby={columnHeaderId} className='column--better' {...rest}>
         <div className='column__top'>
           {heading && <ColumnHeader icon={icon} active={active} type={heading} columnHeaderId={columnHeaderId} />}
           {menu && (
@@ -31,7 +32,7 @@ export default class Column extends React.PureComponent {
           <ColumnBackButton />
         </div>
         {children}
-      </div>
+      </Column>
     );
   }
 
diff --git a/app/soapbox/features/ui/components/column.js b/app/soapbox/features/ui/components/column.js
index 4d4986cdc..19ad84a02 100644
--- a/app/soapbox/features/ui/components/column.js
+++ b/app/soapbox/features/ui/components/column.js
@@ -1,8 +1,9 @@
 import React from 'react';
 import ColumnHeader from './column_header';
 import PropTypes from 'prop-types';
+import Column from 'soapbox/components/column';
 
-export default class Column extends React.PureComponent {
+export default class UIColumn extends React.PureComponent {
 
   static propTypes = {
     heading: PropTypes.string,
@@ -17,14 +18,14 @@ export default class Column extends React.PureComponent {
   }
 
   render() {
-    const { heading, icon, children, active, showBackBtn } = this.props;
+    const { heading, icon, children, active, showBackBtn, ...rest } = this.props;
     const columnHeaderId = heading && heading.replace(/ /g, '-');
 
     return (
-      <div role='region' aria-labelledby={columnHeaderId} className='column'>
+      <Column aria-labelledby={columnHeaderId} {...rest}>
         {heading && <ColumnHeader icon={icon} active={active} type={heading} columnHeaderId={columnHeaderId} showBackBtn={showBackBtn} />}
         {children}
-      </div>
+      </Column>
     );
   }
 
diff --git a/app/soapbox/features/ui/components/columns_area.js b/app/soapbox/features/ui/components/columns_area.js
index cc35321b2..57f1cd75f 100644
--- a/app/soapbox/features/ui/components/columns_area.js
+++ b/app/soapbox/features/ui/components/columns_area.js
@@ -30,7 +30,7 @@ class ColumnsArea extends ImmutablePureComponent {
             </div>
 
             <div className='columns-area__panels__main'>
-              <div className='columns-area columns-area--mobile'>
+              <div className='columns-area'>
                 {children}
               </div>
             </div>
diff --git a/app/soapbox/pages/admin_page.js b/app/soapbox/pages/admin_page.js
index a91d87461..09fa0d81a 100644
--- a/app/soapbox/pages/admin_page.js
+++ b/app/soapbox/pages/admin_page.js
@@ -27,7 +27,7 @@ class AdminPage extends ImmutablePureComponent {
             </div>
 
             <div className='columns-area__panels__main'>
-              <div className='columns-area columns-area--mobile'>
+              <div className='columns-area'>
                 {children}
               </div>
             </div>
diff --git a/app/soapbox/pages/default_page.js b/app/soapbox/pages/default_page.js
index 04cf5e439..9e5c7a2ab 100644
--- a/app/soapbox/pages/default_page.js
+++ b/app/soapbox/pages/default_page.js
@@ -45,7 +45,7 @@ class DefaultPage extends ImmutablePureComponent {
             </div>
 
             <div className='columns-area__panels__main'>
-              <div className='columns-area columns-area--mobile'>
+              <div className='columns-area'>
                 {children}
               </div>
             </div>
diff --git a/app/soapbox/pages/empty_page.js b/app/soapbox/pages/empty_page.js
index 7ba4da5d5..45a7f24d1 100644
--- a/app/soapbox/pages/empty_page.js
+++ b/app/soapbox/pages/empty_page.js
@@ -16,7 +16,7 @@ export default class DefaultPage extends ImmutablePureComponent {
             </div>
 
             <div className='columns-area__panels__main'>
-              <div className='columns-area columns-area--mobile'>
+              <div className='columns-area'>
                 {children}
               </div>
             </div>
diff --git a/app/soapbox/pages/group_page.js b/app/soapbox/pages/group_page.js
index 9458638b9..d4da40a3f 100644
--- a/app/soapbox/pages/group_page.js
+++ b/app/soapbox/pages/group_page.js
@@ -54,7 +54,7 @@ class GroupPage extends ImmutablePureComponent {
               </div>
 
               <div className='columns-area__panels__main'>
-                <div className='columns-area columns-area--mobile'>
+                <div className='columns-area'>
                   {children}
                 </div>
               </div>
diff --git a/app/soapbox/pages/groups_page.js b/app/soapbox/pages/groups_page.js
index e38aaf52e..8d7683cb9 100644
--- a/app/soapbox/pages/groups_page.js
+++ b/app/soapbox/pages/groups_page.js
@@ -39,7 +39,7 @@ class GroupsPage extends ImmutablePureComponent {
               </div>
 
               <div className='columns-area__panels__main'>
-                <div className='columns-area columns-area--mobile'>
+                <div className='columns-area'>
                   {children}
                 </div>
               </div>
diff --git a/app/soapbox/pages/home_page.js b/app/soapbox/pages/home_page.js
index da07687e4..882e98939 100644
--- a/app/soapbox/pages/home_page.js
+++ b/app/soapbox/pages/home_page.js
@@ -67,8 +67,8 @@ class HomePage extends ImmutablePureComponent {
               </div>
             </div>
 
-            <div className='columns-area__panels__main columns-area__panels__main--transparent'>
-              <div className='columns-area columns-area--mobile columns-area--transparent'>
+            <div className='columns-area__panels__main'>
+              <div className='columns-area'>
                 {me && <div className='timeline-compose-block' ref={this.composeBlock}>
                   <Link className='timeline-compose-block__avatar' to={`/@${acct}`}>
                     <Avatar account={account} size={46} />
diff --git a/app/soapbox/pages/profile_page.js b/app/soapbox/pages/profile_page.js
index 251bf7190..576ac0e75 100644
--- a/app/soapbox/pages/profile_page.js
+++ b/app/soapbox/pages/profile_page.js
@@ -98,8 +98,8 @@ class ProfilePage extends ImmutablePureComponent {
               </div>
             </div>
 
-            <div className='columns-area__panels__main columns-area__panels__main--transparent'>
-              <div className='columns-area columns-area--mobile columns-area--transparent'>
+            <div className='columns-area__panels__main'>
+              <div className='columns-area'>
                 {children}
               </div>
             </div>
diff --git a/app/soapbox/pages/remote_instance_page.js b/app/soapbox/pages/remote_instance_page.js
index 815a21ac7..d5c807a12 100644
--- a/app/soapbox/pages/remote_instance_page.js
+++ b/app/soapbox/pages/remote_instance_page.js
@@ -48,7 +48,7 @@ class RemoteInstancePage extends ImmutablePureComponent {
             </div>
 
             <div className='columns-area__panels__main'>
-              <div className='columns-area columns-area--mobile'>
+              <div className='columns-area'>
                 {children}
               </div>
             </div>
diff --git a/app/soapbox/pages/status_page.js b/app/soapbox/pages/status_page.js
index f3eb5b3ab..db70dcee6 100644
--- a/app/soapbox/pages/status_page.js
+++ b/app/soapbox/pages/status_page.js
@@ -45,8 +45,8 @@ class StatusPage extends ImmutablePureComponent {
               </div>
             </div>
 
-            <div className='columns-area__panels__main columns-area__panels__main--transparent'>
-              <div className='columns-area columns-area--mobile columns-area--transparent'>
+            <div className='columns-area__panels__main'>
+              <div className='columns-area'>
                 {children}
               </div>
             </div>
diff --git a/app/styles/accounts.scss b/app/styles/accounts.scss
index fe5cfee01..50e87e600 100644
--- a/app/styles/accounts.scss
+++ b/app/styles/accounts.scss
@@ -463,10 +463,6 @@ a .account__avatar {
 }
 
 .account__section-headline {
-  background: var(--foreground-color);
-  width: 100%;
-  display: flex;
-
   button,
   a {
     flex: none;
diff --git a/app/styles/chats.scss b/app/styles/chats.scss
index bebf3dd7e..b093d7386 100644
--- a/app/styles/chats.scss
+++ b/app/styles/chats.scss
@@ -366,7 +366,7 @@
       max-width: none;
     }
 
-    .columns-area--mobile .column {
+    .columns-area .column {
       border-radius: 0;
     }
 
diff --git a/app/styles/components/columns.scss b/app/styles/components/columns.scss
index 7ff80bd2f..a8d70ca15 100644
--- a/app/styles/components/columns.scss
+++ b/app/styles/components/columns.scss
@@ -93,7 +93,7 @@
   }
 }
 
-.columns-area--mobile {
+.columns-area {
   display: block;
   flex-direction: column;
   width: 100%;
@@ -340,34 +340,20 @@
   cursor: default;
 }
 
-.columns-area--mobile .column {
+.columns-area .column {
   @include standard-panel;
 
+  &--transparent {
+    background: transparent;
+    border-radius: 0;
+    box-shadow: none;
+  }
+
   @media screen and (max-width: 580px) {
     border-radius: 0;
   }
 }
 
-.columns-area--transparent .column {
-  background: transparent;
-  border-radius: 0;
-  box-shadow: none;
-
-  .column-back-button {
-    background: transparent;
-  }
-
-  .account__section-headline {
-    background: transparent;
-    border: 0;
-  }
-
-  .empty-column-indicator,
-  .error-column {
-    background: transparent;
-  }
-}
-
 .column-header__wrapper {
   position: relative;
   flex: 0 0 auto;
@@ -817,26 +803,6 @@
   }
 }
 
-.columns-area--transparent .follow-recommendations-container {
-  @include standard-panel;
-}
-
-// Let transparent columns extend the full width of the screen
-@media screen and (max-width: 450px) {
-  .columns-area__panels__main--transparent {
-    padding: 0;
-  }
-
-  .columns-area--transparent {
-    .status__wrapper,
-    .detailed-status__wrapper,
-    .timeline-compose-block,
-    .follow-recommendations-container {
-      border-radius: 0;
-    }
-  }
-}
-
 .column-title {
   text-align: center;
   padding: 40px;
@@ -896,3 +862,21 @@
     border-radius: 0;
   }
 }
+
+// Make MaterialStatus flush against SubNavigation
+.sub-navigation ~ .slist .item-list > article:first-child .material-status__status {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
+// Display background for loading indicator
+.column--transparent {
+  .slist__append {
+    @include standard-panel;
+  }
+
+  .sub-navigation ~ .slist .slist__append {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+}
diff --git a/app/styles/components/detailed-status.scss b/app/styles/components/detailed-status.scss
index 6b182fa61..cc6dc0f3b 100644
--- a/app/styles/components/detailed-status.scss
+++ b/app/styles/components/detailed-status.scss
@@ -111,7 +111,6 @@
 }
 
 .detailed-status__wrapper {
-  @include standard-panel;
   margin-bottom: 10px;
   position: relative;
   overflow: hidden;
@@ -159,19 +158,3 @@
   float: left;
   margin-right: 5px;
 }
-
-.thread {
-  // Don't display gaps between statuses in a thread
-  .status-container {
-    padding: 0;
-  }
-
-  .status__wrapper {
-    border-radius: 0;
-  }
-
-  .detailed-status__wrapper {
-    border-radius: 0;
-    margin: 0;
-  }
-}
diff --git a/app/styles/components/status.scss b/app/styles/components/status.scss
index 2efd84e3b..5c7c08ce0 100644
--- a/app/styles/components/status.scss
+++ b/app/styles/components/status.scss
@@ -170,15 +170,6 @@
     margin-top: 8px;
   }
 
-  &.status-direct:not(.read) {
-    background: var(--brand-color--med);
-    border-bottom-color: var(--brand-color--med);
-
-    .status__content a {
-      color: var(--brand-color--hicontrast);
-    }
-  }
-
   &.light {
     .status__relative-time {
       color: var(--primary-text-color--faint);
diff --git a/app/styles/ui.scss b/app/styles/ui.scss
index 926900dea..6f3a379bb 100644
--- a/app/styles/ui.scss
+++ b/app/styles/ui.scss
@@ -443,7 +443,6 @@
   &__append {
     flex: 1 1 auto;
     position: relative;
-    min-height: 120px;
     padding: 30px 15px;
   }
 }

From 5447c27d9ee5e0339a3930cf5a59bb81ec1d4af5 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 6 Oct 2021 16:10:27 -0500
Subject: [PATCH 04/11] MaterialStatus: fix border-radius on small screen sizes

---
 app/styles/components/columns.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/app/styles/components/columns.scss b/app/styles/components/columns.scss
index a8d70ca15..fd49f1be6 100644
--- a/app/styles/components/columns.scss
+++ b/app/styles/components/columns.scss
@@ -351,6 +351,10 @@
 
   @media screen and (max-width: 580px) {
     border-radius: 0;
+
+    .material-status__status {
+      border-radius: 0;
+    }
   }
 }
 

From b3f93811939d11ccba42e13cc407dcd66e0886a0 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 6 Oct 2021 16:20:06 -0500
Subject: [PATCH 05/11] Column: fix .timeline-compose-block mobile styles

---
 app/styles/components/columns.scss | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/app/styles/components/columns.scss b/app/styles/components/columns.scss
index fd49f1be6..81233865d 100644
--- a/app/styles/components/columns.scss
+++ b/app/styles/components/columns.scss
@@ -126,6 +126,11 @@
 
   @media (max-width: 580px) {
     padding: 0;
+
+    .timeline-compose-block {
+      border-radius: 0;
+      margin-top: 10px; // Make less claustrophobic
+    }
   }
 
   @media screen and (min-width: 630px) {

From eaa031901cd76f4855aa5564146ae1348336c151 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 6 Oct 2021 16:24:06 -0500
Subject: [PATCH 06/11] MediaGallery: fix filename text color

---
 app/styles/components/media-gallery.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/styles/components/media-gallery.scss b/app/styles/components/media-gallery.scss
index b39f4f1f6..31d407e3e 100644
--- a/app/styles/components/media-gallery.scss
+++ b/app/styles/components/media-gallery.scss
@@ -164,7 +164,7 @@
 .media-gallery__file-extension__label {
   display: block;
   position: absolute;
-  color: var(--primary-text-color);
+  color: #fff;
   background: rgba($base-overlay-background, 0.5);
   bottom: 6px;
   left: 6px;

From 8facd71822c7763f48a419fd9598930c1f19aa29 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 6 Oct 2021 16:27:29 -0500
Subject: [PATCH 07/11] DetailedStatus: fix unnecessary margin-bottom

---
 app/styles/components/detailed-status.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/app/styles/components/detailed-status.scss b/app/styles/components/detailed-status.scss
index cc6dc0f3b..a800b98df 100644
--- a/app/styles/components/detailed-status.scss
+++ b/app/styles/components/detailed-status.scss
@@ -111,7 +111,6 @@
 }
 
 .detailed-status__wrapper {
-  margin-bottom: 10px;
   position: relative;
   overflow: hidden;
 }

From a917d79ec72ad930c0f275e4dab2e79ad84ffb97 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 6 Oct 2021 16:30:26 -0500
Subject: [PATCH 08/11] MissingIndicator: fix background overflow
 (border-radius)

---
 app/styles/loading.scss | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/app/styles/loading.scss b/app/styles/loading.scss
index c7b8c77cb..be819b892 100644
--- a/app/styles/loading.scss
+++ b/app/styles/loading.scss
@@ -194,6 +194,11 @@
   align-items: center;
   justify-content: center;
   padding: 20px;
+  border-radius: 10px;
+
+  @media screen and (max-width: 580px) {
+    border-radius: 0;
+  }
 
   & > div {
     width: 100%;

From cb0a034e853275b4435dcddfa7d8cfdf650e2b87 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 6 Oct 2021 17:06:38 -0500
Subject: [PATCH 09/11] ProgressCircle: fix propTypes (text --> string)

---
 app/soapbox/components/progress_circle.js | 18 ++++++++----------
 1 file changed, 8 insertions(+), 10 deletions(-)

diff --git a/app/soapbox/components/progress_circle.js b/app/soapbox/components/progress_circle.js
index da20515c1..022829b7b 100644
--- a/app/soapbox/components/progress_circle.js
+++ b/app/soapbox/components/progress_circle.js
@@ -2,7 +2,14 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-class ProgressCircle extends React.PureComponent {
+export default class ProgressCircle extends React.PureComponent {
+
+  static propTypes = {
+    progress: PropTypes.number.isRequired,
+    radius: PropTypes.number,
+    stroke: PropTypes.number,
+    title: PropTypes.string,
+  };
 
   static defaultProps = {
     radius: 12,
@@ -51,12 +58,3 @@ class ProgressCircle extends React.PureComponent {
   }
 
 }
-
-ProgressCircle.propTypes = {
-  progress: PropTypes.number.isRequired,
-  radius: PropTypes.number,
-  stroke: PropTypes.number,
-  title: PropTypes.text,
-};
-
-export default ProgressCircle;

From 5807b8f823b77ef9efbfd60f0b6df0ac5540d555 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 6 Oct 2021 17:50:43 -0500
Subject: [PATCH 10/11] Thread: display status connectors (basic threading)

---
 .../status/components/thread_status.js        | 54 +++++++++++++++++++
 app/soapbox/features/status/index.js          |  9 ++--
 app/styles/components/detailed-status.scss    | 29 ++++++++++
 3 files changed, 89 insertions(+), 3 deletions(-)
 create mode 100644 app/soapbox/features/status/components/thread_status.js

diff --git a/app/soapbox/features/status/components/thread_status.js b/app/soapbox/features/status/components/thread_status.js
new file mode 100644
index 000000000..3df38013a
--- /dev/null
+++ b/app/soapbox/features/status/components/thread_status.js
@@ -0,0 +1,54 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import StatusContainer from 'soapbox/containers/status_container';
+import { OrderedSet as ImmutableOrderedSet } from 'immutable';
+import classNames from 'classnames';
+
+const mapStateToProps = (state, { id }) => {
+  return {
+    replyToId: state.getIn(['statuses', id, 'in_reply_to_id']),
+    replyCount: state.getIn(['contexts', 'replies', id], ImmutableOrderedSet()).size,
+  };
+};
+
+export default @connect(mapStateToProps)
+class ThreadStatus extends React.Component {
+
+  static propTypes = {
+    focusedStatusId: PropTypes.string,
+    replyToId: PropTypes.string,
+    replyCount: PropTypes.number,
+  }
+
+  renderConnector() {
+    const { focusedStatusId, replyToId, replyCount } = this.props;
+
+    const isConnectedTop = replyToId && replyToId !== focusedStatusId;
+    const isConnectedBottom = replyCount > 0;
+    const isConnected = isConnectedTop || isConnectedBottom;
+
+    if (!isConnected) {
+      return null;
+    }
+
+    return (
+      <div
+        className={classNames('thread__connector', {
+          'thread__connector--top': isConnectedTop,
+          'thread__connector--bottom': isConnectedBottom,
+        })}
+      />
+    );
+  }
+
+  render() {
+    return (
+      <div className='thread__status'>
+        {this.renderConnector()}
+        <StatusContainer {...this.props} />
+      </div>
+    );
+  }
+
+}
diff --git a/app/soapbox/features/status/index.js b/app/soapbox/features/status/index.js
index ae2901f30..7c8e2f999 100644
--- a/app/soapbox/features/status/index.js
+++ b/app/soapbox/features/status/index.js
@@ -37,7 +37,6 @@ import { initMuteModal } from '../../actions/mutes';
 import { initReport } from '../../actions/reports';
 import { makeGetStatus } from '../../selectors';
 // import ColumnHeader from '../../components/column_header';
-import StatusContainer from '../../containers/status_container';
 import { openModal } from '../../actions/modal';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import ImmutablePureComponent from 'react-immutable-pure-component';
@@ -49,6 +48,7 @@ import { textForScreenReader, defaultMediaVisibility } from '../../components/st
 import { getSettings } from 'soapbox/actions/settings';
 import { getSoapboxConfig } from 'soapbox/actions/soapbox';
 import { deactivateUserModal, deleteUserModal, deleteStatusModal, toggleStatusSensitivityModal } from 'soapbox/actions/moderation';
+import ThreadStatus from './components/thread_status';
 import SubNavigation from 'soapbox/components/sub_navigation';
 
 const messages = defineMessages({
@@ -471,10 +471,13 @@ class Status extends ImmutablePureComponent {
   }
 
   renderStatus(id) {
+    const { status } = this.props;
+
     return (
-      <StatusContainer
+      <ThreadStatus
         key={id}
         id={id}
+        focusedStatusId={status && status.get('id')}
         onMoveUp={this.handleMoveUp}
         onMoveDown={this.handleMoveDown}
         contextType='thread'
@@ -600,7 +603,7 @@ class Status extends ImmutablePureComponent {
             <div className='thread__ancestors'>{ancestors}</div>
           )}
 
-          <div className='thread__status'>
+          <div className='thread__status thread__status--focused'>
             <HotKeys handlers={handlers}>
               <div ref={this.setStatusRef} className={classNames('focusable', 'detailed-status__wrapper')} tabIndex='0' aria-label={textForScreenReader(intl, status, false)}>
                 <DetailedStatus
diff --git a/app/styles/components/detailed-status.scss b/app/styles/components/detailed-status.scss
index a800b98df..c83c359e7 100644
--- a/app/styles/components/detailed-status.scss
+++ b/app/styles/components/detailed-status.scss
@@ -157,3 +157,32 @@
   float: left;
   margin-right: 5px;
 }
+
+.thread {
+  &__status {
+    position: relative;
+  }
+
+  &__connector {
+    background: hsla(var(--primary-text-color_hsl), 0.2);
+    position: absolute;
+    width: 2px;
+    left: 33px;
+    display: none;
+
+    &--bottom {
+      height: calc(100% - 8px - 48px - 14px);
+      top: calc(8px + 48px + 13px);
+      display: block;
+    }
+
+    @media screen and (min-width: 630px) {
+      left: 38px;
+
+      &--bottom {
+        height: calc(100% - 15px - 48px);
+        top: calc(15px + 48px + 9px);
+      }
+    }
+  }
+}

From cf1936662613f3e5ca804ea4d6d76f759dc11e52 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 6 Oct 2021 18:48:13 -0500
Subject: [PATCH 11/11] Rename .follow-button to .button--follow The other
 classname is listed on Fanboy's Annoyances List

---
 app/soapbox/features/ui/components/action_button.js | 2 +-
 app/styles/components/buttons.scss                  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/soapbox/features/ui/components/action_button.js b/app/soapbox/features/ui/components/action_button.js
index 7161b2e7a..1fb3c6420 100644
--- a/app/soapbox/features/ui/components/action_button.js
+++ b/app/soapbox/features/ui/components/action_button.js
@@ -104,7 +104,7 @@ class ActionButton extends ImmutablePureComponent {
         // Follow & Unfollow
         return (<Button
           disabled={account.getIn(['relationship', 'blocked_by'])}
-          className={classNames('follow-button', {
+          className={classNames('button--follow', {
             'button--destructive': account.getIn(['relationship', 'following']),
           })}
           onClick={this.handleFollow}
diff --git a/app/styles/components/buttons.scss b/app/styles/components/buttons.scss
index 06e0cb619..f18c3df95 100644
--- a/app/styles/components/buttons.scss
+++ b/app/styles/components/buttons.scss
@@ -143,7 +143,7 @@ a.button {
   }
 }
 
-.follow-button {
+.button--follow {
   display: flex;
   align-items: center;
   justify-content: center;