From 54ad8f7fbb370cb810d34d6604bf0a358b21d067 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Wed, 13 Jul 2022 20:54:43 +0200
Subject: [PATCH 1/2] =?UTF-8?q?Hide=20tabs=20on=20Followers,=20Following?=
 =?UTF-8?q?=E2=80=A6=20pages?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 app/soapbox/features/followers/index.js | 2 +-
 app/soapbox/features/following/index.js | 2 +-
 app/soapbox/pages/profile_page.tsx      | 4 +++-
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/app/soapbox/features/followers/index.js b/app/soapbox/features/followers/index.js
index 7a77e46a5..f09fa6ad0 100644
--- a/app/soapbox/features/followers/index.js
+++ b/app/soapbox/features/followers/index.js
@@ -118,7 +118,7 @@ class Followers extends ImmutablePureComponent {
     }
 
     return (
-      <Column label={intl.formatMessage(messages.heading)} withHeader={false} transparent>
+      <Column label={intl.formatMessage(messages.heading)}>
         <ScrollableList
           scrollKey='followers'
           hasMore={hasMore}
diff --git a/app/soapbox/features/following/index.js b/app/soapbox/features/following/index.js
index 2f654fc5b..d0be13d05 100644
--- a/app/soapbox/features/following/index.js
+++ b/app/soapbox/features/following/index.js
@@ -118,7 +118,7 @@ class Following extends ImmutablePureComponent {
     }
 
     return (
-      <Column label={intl.formatMessage(messages.heading)} withHeader={false} transparent>
+      <Column label={intl.formatMessage(messages.heading)}>
         <ScrollableList
           scrollKey='following'
           hasMore={hasMore}
diff --git a/app/soapbox/pages/profile_page.tsx b/app/soapbox/pages/profile_page.tsx
index c3cb65ff4..4a209303d 100644
--- a/app/soapbox/pages/profile_page.tsx
+++ b/app/soapbox/pages/profile_page.tsx
@@ -116,6 +116,8 @@ const ProfilePage: React.FC<IProfilePage> = ({ params, children }) => {
     activeItem = 'profile';
   }
 
+  const showTabs = !['following', 'followers', 'pins'].some(path => pathname.includes(path));
+
   return (
     <>
       <Layout.Main>
@@ -128,7 +130,7 @@ const ProfilePage: React.FC<IProfilePage> = ({ params, children }) => {
               {Component => <Component username={username} account={account} />}
             </BundleContainer>
 
-            {account && (
+            {account && showTabs && (
               <Tabs items={tabItems} activeItem={activeItem} />
             )}
 

From 3d057daa437d75c61229aca5698e7ed972445194 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Sat, 16 Jul 2022 00:03:21 +0200
Subject: [PATCH 2/2] Apply suggestions
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 app/soapbox/components/ui/card/card.tsx       |  2 +-
 app/soapbox/components/ui/column/column.tsx   | 30 ++++++++-----------
 app/soapbox/features/bookmarks/index.tsx      |  2 +-
 .../features/community_timeline/index.tsx     |  2 +-
 .../features/direct_timeline/index.tsx        |  2 +-
 app/soapbox/features/followers/index.js       |  2 +-
 app/soapbox/features/following/index.js       |  2 +-
 .../features/hashtag_timeline/index.js        |  2 +-
 app/soapbox/features/home_timeline/index.tsx  |  2 +-
 app/soapbox/features/list_timeline/index.tsx  |  2 +-
 app/soapbox/features/pinned_statuses/index.js |  2 +-
 .../features/public_timeline/index.tsx        |  2 +-
 .../features/remote_timeline/index.tsx        |  2 +-
 app/soapbox/features/status/index.tsx         |  2 +-
 app/soapbox/features/test_timeline/index.tsx  |  2 +-
 15 files changed, 26 insertions(+), 32 deletions(-)

diff --git a/app/soapbox/components/ui/card/card.tsx b/app/soapbox/components/ui/card/card.tsx
index c876219f4..f60ec2ac8 100644
--- a/app/soapbox/components/ui/card/card.tsx
+++ b/app/soapbox/components/ui/card/card.tsx
@@ -35,7 +35,7 @@ const Card = React.forwardRef<HTMLDivElement, ICard>(({ children, variant, size
     className={classNames({
       'space-y-4': true,
       'bg-white dark:bg-slate-800 text-black dark:text-white shadow-lg dark:shadow-inset overflow-hidden': variant === 'rounded',
-      [sizes[size]]: true,
+      [sizes[size]]: variant === 'rounded',
     }, className)}
   >
     {children}
diff --git a/app/soapbox/components/ui/column/column.tsx b/app/soapbox/components/ui/column/column.tsx
index 5ac4f350e..30c43f7f0 100644
--- a/app/soapbox/components/ui/column/column.tsx
+++ b/app/soapbox/components/ui/column/column.tsx
@@ -40,25 +40,19 @@ const Column: React.FC<IColumn> = React.forwardRef((props, ref: React.ForwardedR
     }
   };
 
-  const renderChildren = () => {
-    if (transparent) {
-      return <div className={classNames('text-black dark:text-white', className)}>{children}</div>;
-    }
+  const renderChildren = () => (
+    <Card variant={transparent ? undefined : 'rounded'} className={className}>
+      {withHeader ? (
+        <CardHeader onBackClick={handleBackClick}>
+          <CardTitle title={label} />
+        </CardHeader>
+      ) : null}
 
-    return (
-      <Card variant='rounded' className={className}>
-        {withHeader ? (
-          <CardHeader onBackClick={handleBackClick}>
-            <CardTitle title={label} />
-          </CardHeader>
-        ) : null}
-
-        <CardBody>
-          {children}
-        </CardBody>
-      </Card>
-    );
-  };
+      <CardBody>
+        {children}
+      </CardBody>
+    </Card>
+  );
 
   return (
     <div role='region' className='relative' ref={ref} aria-label={label} column-type={transparent ? 'transparent' : 'filled'}>
diff --git a/app/soapbox/features/bookmarks/index.tsx b/app/soapbox/features/bookmarks/index.tsx
index c9e3e5de3..8eb1c0bd3 100644
--- a/app/soapbox/features/bookmarks/index.tsx
+++ b/app/soapbox/features/bookmarks/index.tsx
@@ -35,7 +35,7 @@ const Bookmarks: React.FC = () => {
   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 transparent>
+    <Column transparent withHeader={false}>
       <div className='px-4 pt-4 sm:p-0'>
         <SubNavigation message={intl.formatMessage(messages.heading)} />
       </div>
diff --git a/app/soapbox/features/community_timeline/index.tsx b/app/soapbox/features/community_timeline/index.tsx
index 4cc9ad65e..81730af40 100644
--- a/app/soapbox/features/community_timeline/index.tsx
+++ b/app/soapbox/features/community_timeline/index.tsx
@@ -42,7 +42,7 @@ const CommunityTimeline = () => {
   }, [onlyMedia]);
 
   return (
-    <Column label={intl.formatMessage(messages.title)} transparent>
+    <Column label={intl.formatMessage(messages.title)} transparent withHeader={false}>
       <SubNavigation message={intl.formatMessage(messages.title)} settings={ColumnSettings} />
       <Timeline
         scrollKey={`${timelineId}_timeline`}
diff --git a/app/soapbox/features/direct_timeline/index.tsx b/app/soapbox/features/direct_timeline/index.tsx
index 139a1077e..9da60dd9f 100644
--- a/app/soapbox/features/direct_timeline/index.tsx
+++ b/app/soapbox/features/direct_timeline/index.tsx
@@ -40,7 +40,7 @@ const DirectTimeline = () => {
   };
 
   return (
-    <Column label={intl.formatMessage(messages.title)} transparent>
+    <Column label={intl.formatMessage(messages.title)} transparent withHeader={false}>
       <ColumnHeader
         icon='envelope'
         active={hasUnread}
diff --git a/app/soapbox/features/followers/index.js b/app/soapbox/features/followers/index.js
index f09fa6ad0..a25fb0d7d 100644
--- a/app/soapbox/features/followers/index.js
+++ b/app/soapbox/features/followers/index.js
@@ -118,7 +118,7 @@ class Followers extends ImmutablePureComponent {
     }
 
     return (
-      <Column label={intl.formatMessage(messages.heading)}>
+      <Column label={intl.formatMessage(messages.heading)} transparent>
         <ScrollableList
           scrollKey='followers'
           hasMore={hasMore}
diff --git a/app/soapbox/features/following/index.js b/app/soapbox/features/following/index.js
index d0be13d05..682a26411 100644
--- a/app/soapbox/features/following/index.js
+++ b/app/soapbox/features/following/index.js
@@ -118,7 +118,7 @@ class Following extends ImmutablePureComponent {
     }
 
     return (
-      <Column label={intl.formatMessage(messages.heading)}>
+      <Column label={intl.formatMessage(messages.heading)} transparent>
         <ScrollableList
           scrollKey='following'
           hasMore={hasMore}
diff --git a/app/soapbox/features/hashtag_timeline/index.js b/app/soapbox/features/hashtag_timeline/index.js
index 8e40a9b85..888573579 100644
--- a/app/soapbox/features/hashtag_timeline/index.js
+++ b/app/soapbox/features/hashtag_timeline/index.js
@@ -112,7 +112,7 @@ class HashtagTimeline extends React.PureComponent {
     const { id } = this.props.params;
 
     return (
-      <Column label={`#${id}`} transparent>
+      <Column label={`#${id}`} transparent withHeader={false}>
         <ColumnHeader active={hasUnread} title={this.title()} />
         <Timeline
           scrollKey='hashtag_timeline'
diff --git a/app/soapbox/features/home_timeline/index.tsx b/app/soapbox/features/home_timeline/index.tsx
index 3e9fa5346..df8d2a620 100644
--- a/app/soapbox/features/home_timeline/index.tsx
+++ b/app/soapbox/features/home_timeline/index.tsx
@@ -58,7 +58,7 @@ const HomeTimeline: React.FC = () => {
   }, [isPartial]);
 
   return (
-    <Column label={intl.formatMessage(messages.title)} transparent>
+    <Column label={intl.formatMessage(messages.title)} transparent withHeader={false}>
       <Timeline
         scrollKey='home_timeline'
         onLoadMore={handleLoadMore}
diff --git a/app/soapbox/features/list_timeline/index.tsx b/app/soapbox/features/list_timeline/index.tsx
index 90f2be274..5082dd71b 100644
--- a/app/soapbox/features/list_timeline/index.tsx
+++ b/app/soapbox/features/list_timeline/index.tsx
@@ -85,7 +85,7 @@ const ListTimeline: React.FC = () => {
   );
 
   return (
-    <Column label={title} heading={title} transparent>
+    <Column label={title} heading={title} transparent withHeader={false}>
       {/* <HomeColumnHeader activeItem='lists' activeSubItem={id} active={hasUnread}>
         <div className='column-header__links'>
           <button className='text-btn column-header__setting-btn' tabIndex='0' onClick={handleEditClick}>
diff --git a/app/soapbox/features/pinned_statuses/index.js b/app/soapbox/features/pinned_statuses/index.js
index 9901131ba..e08c48234 100644
--- a/app/soapbox/features/pinned_statuses/index.js
+++ b/app/soapbox/features/pinned_statuses/index.js
@@ -52,7 +52,7 @@ class PinnedStatuses extends ImmutablePureComponent {
     }
 
     return (
-      <Column label={intl.formatMessage(messages.heading)}>
+      <Column label={intl.formatMessage(messages.heading)} transparent>
         <StatusList
           statusIds={statusIds}
           scrollKey='pinned_statuses'
diff --git a/app/soapbox/features/public_timeline/index.tsx b/app/soapbox/features/public_timeline/index.tsx
index 948c19b6a..f5903d9f1 100644
--- a/app/soapbox/features/public_timeline/index.tsx
+++ b/app/soapbox/features/public_timeline/index.tsx
@@ -63,7 +63,7 @@ const CommunityTimeline = () => {
   }, [onlyMedia]);
 
   return (
-    <Column label={intl.formatMessage(messages.title)} transparent>
+    <Column label={intl.formatMessage(messages.title)} transparent withHeader={false}>
       <SubNavigation message={intl.formatMessage(messages.title)} settings={ColumnSettings} />
       <PinnedHostsPicker />
       {showExplanationBox && <div className='mb-4'>
diff --git a/app/soapbox/features/remote_timeline/index.tsx b/app/soapbox/features/remote_timeline/index.tsx
index e19284891..00e2effe2 100644
--- a/app/soapbox/features/remote_timeline/index.tsx
+++ b/app/soapbox/features/remote_timeline/index.tsx
@@ -65,7 +65,7 @@ const RemoteTimeline: React.FC<IRemoteTimeline> = ({ params }) => {
   }, [onlyMedia]);
 
   return (
-    <Column label={intl.formatMessage(messages.title)} heading={instance} transparent>
+    <Column label={intl.formatMessage(messages.title)} heading={instance} transparent withHeader={false}>
       {instance && <PinnedHostsPicker host={instance} />}
       {!pinned && <HStack className='mb-4 px-2' space={2}>
         <IconButton iconClassName='h-5 w-5' src={require('@tabler/icons/x.svg')} onClick={handleCloseClick} />
diff --git a/app/soapbox/features/status/index.tsx b/app/soapbox/features/status/index.tsx
index cc0ce6fcc..1bcf65baa 100644
--- a/app/soapbox/features/status/index.tsx
+++ b/app/soapbox/features/status/index.tsx
@@ -791,7 +791,7 @@ class Status extends ImmutablePureComponent<IStatus, IStatusState> {
     }
 
     return (
-      <Column label={intl.formatMessage(titleMessage, { username })} transparent>
+      <Column label={intl.formatMessage(titleMessage, { username })} transparent withHeader={false}>
         <div className='px-4 pt-4 sm:p-0'>
           <SubNavigation message={intl.formatMessage(titleMessage, { username })} />
         </div>
diff --git a/app/soapbox/features/test_timeline/index.tsx b/app/soapbox/features/test_timeline/index.tsx
index 024f38204..13f2fcbef 100644
--- a/app/soapbox/features/test_timeline/index.tsx
+++ b/app/soapbox/features/test_timeline/index.tsx
@@ -38,7 +38,7 @@ const TestTimeline: React.FC = () => {
   }, []);
 
   return (
-    <Column label={intl.formatMessage(messages.title)} transparent>
+    <Column label={intl.formatMessage(messages.title)} transparent withHeader={false}>
       <SubNavigation message={intl.formatMessage(messages.title)} />
       <Timeline
         scrollKey={`${timelineId}_timeline`}