Merge branch 'hide-profile-tabs' into 'develop'

Hide tabs on Followers, Following… pages

See merge request soapbox-pub/soapbox-fe!1630

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}

app/soapbox/components/ui/column/column.tsx

@@ -1,4 +1,3 @@
-import classNames from 'classnames';
 import React from 'react';
 import { useHistory } from 'react-router-dom';
 
@@ -42,25 +41,19 @@ const Column: React.FC<IColumn> = React.forwardRef((props, ref: React.ForwardedR
     }
   };
 
-  const renderChildren = () => {
+  const renderChildren = () => (
-    if (transparent) {
+    <Card variant={transparent ? undefined : 'rounded'} className={className}>
-      return <div className={classNames('text-black dark:text-white', className)}>{children}</div>;
+      {withHeader ? (
-    }
+        <CardHeader onBackClick={handleBackClick}>
+          <CardTitle title={label} />
+        </CardHeader>
+      ) : null}
 
-    return (
+      <CardBody>
-      <Card variant='rounded' className={className}>
+        {children}
-        {withHeader ? (
+      </CardBody>
-          <CardHeader onBackClick={handleBackClick}>
+    </Card>
-            <CardTitle title={label} />
+  );
-          </CardHeader>
-        ) : null}
-
-        <CardBody>
-          {children}
-        </CardBody>
-      </Card>
-    );
-  };
 
   return (
     <div role='region' className='relative' ref={ref} aria-label={label} column-type={transparent ? 'transparent' : 'filled'}>

app/soapbox/features/bookmarks/index.tsx

@@ -36,7 +36,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>

app/soapbox/features/community_timeline/index.tsx

@@ -43,7 +43,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} />
       <PullToRefresh onRefresh={handleRefresh}>
         <Timeline

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}

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)} transparent>
         <ScrollableList
           scrollKey='followers'
           hasMore={hasMore}

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)} transparent>
         <ScrollableList
           scrollKey='following'
           hasMore={hasMore}

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'

app/soapbox/features/home_timeline/index.tsx

@@ -59,7 +59,7 @@ const HomeTimeline: React.FC = () => {
   }, [isPartial]);
 
   return (
-    <Column label={intl.formatMessage(messages.title)} transparent>
+    <Column label={intl.formatMessage(messages.title)} transparent withHeader={false}>
       <PullToRefresh onRefresh={handleRefresh}>
         <Timeline
           scrollKey='home_timeline'

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

app/soapbox/features/pinned_statuses/index.tsx

@@ -36,7 +36,7 @@ const PinnedStatuses = () => {
   }
 
   return (
-    <Column label={intl.formatMessage(messages.heading)}>
+    <Column label={intl.formatMessage(messages.heading)} transparent withHeader={false}>
       <StatusList
         statusIds={statusIds}
         scrollKey='pinned_statuses'

app/soapbox/features/public_timeline/index.tsx

@@ -64,7 +64,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'>

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} />

app/soapbox/features/status/index.tsx

@@ -792,7 +792,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>

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`}

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} />
             )}