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] 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;
   }
 }