From 943ee54c98d3aed936c87ab528bc080b87f92b57 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 7 Oct 2021 21:39:03 -0500
Subject: [PATCH] Profile: restore "extra" links on desktop

---
 .../features/account/components/header.js     | 39 ++++++++++++++++++-
 app/styles/components/account-header.scss     |  2 +
 2 files changed, 40 insertions(+), 1 deletion(-)

diff --git a/app/soapbox/features/account/components/header.js b/app/soapbox/features/account/components/header.js
index 2b8110d95..4dc7fad41 100644
--- a/app/soapbox/features/account/components/header.js
+++ b/app/soapbox/features/account/components/header.js
@@ -17,6 +17,8 @@ import {
 } from 'soapbox/utils/accounts';
 import classNames from 'classnames';
 import Avatar from 'soapbox/components/avatar';
+import { shortNumberFormat } from 'soapbox/utils/numbers';
+import { NavLink } from 'react-router-dom';
 import DropdownMenuContainer from 'soapbox/containers/dropdown_menu_container';
 import BundleContainer from 'soapbox/features/ui/containers/bundle_container';
 import { ProfileInfoPanel } from 'soapbox/features/ui/util/async-components';
@@ -295,7 +297,7 @@ class Header extends ImmutablePureComponent {
   }
 
   render() {
-    const { account, username, me, features } = this.props;
+    const { account, intl, username, me, features } = this.props;
     const { isSmallScreen } = this.state;
 
     if (!account) {
@@ -318,6 +320,7 @@ class Header extends ImmutablePureComponent {
       );
     }
 
+    const ownAccount = account.get('id') === me;
     const info = this.makeInfo();
     const menu = this.makeMenu();
 
@@ -349,6 +352,40 @@ class Header extends ImmutablePureComponent {
               <Avatar account={account} size={avatarSize} />
             </a>
 
+            <div className='account__header__extra__links'>
+
+              <NavLink isActive={this.isStatusesPageActive} activeClassName='active' to={`/@${account.get('acct')}`} title={intl.formatNumber(account.get('statuses_count'))}>
+                <span>{shortNumberFormat(account.get('statuses_count'))}</span>
+                <span><FormattedMessage id='account.posts' defaultMessage='Posts' /></span>
+              </NavLink>
+
+              {(ownAccount || !account.getIn(['pleroma', 'hide_follows'], false)) && <NavLink exact activeClassName='active' to={`/@${account.get('acct')}/following`} title={intl.formatNumber(account.get('following_count'))}>
+                {account.getIn(['pleroma', 'hide_follows_count'], false) ? <span>•</span> : <span>{shortNumberFormat(account.get('following_count'))}</span>}
+                <span><FormattedMessage id='account.follows' defaultMessage='Follows' /></span>
+              </NavLink>}
+
+              {(ownAccount || !account.getIn(['pleroma', 'hide_followers'], false)) && <NavLink exact activeClassName='active' to={`/@${account.get('acct')}/followers`} title={intl.formatNumber(account.get('followers_count'))}>
+                {account.getIn(['pleroma', 'hide_followers_count'], false) ? <span>•</span> : <span>{shortNumberFormat(account.get('followers_count'))}</span>}
+                <span><FormattedMessage id='account.followers' defaultMessage='Followers' /></span>
+              </NavLink>}
+
+              {(ownAccount || !account.getIn(['pleroma', 'hide_favorites'], true)) && <NavLink exact activeClassName='active' to={`/@${account.get('acct')}/favorites`}>
+                { /* : TODO : shortNumberFormat(account.get('favourite_count')) */ }
+                <span>•</span>
+                <span><FormattedMessage id='navigation_bar.favourites' defaultMessage='Likes' /></span>
+              </NavLink>}
+
+              {ownAccount &&
+                <NavLink
+                  exact activeClassName='active' to={`/@${account.get('acct')}/pins`}
+                >
+                  { /* : TODO : shortNumberFormat(account.get('pinned_count')) */ }
+                  <span>•</span>
+                  <span><FormattedMessage id='navigation_bar.pins' defaultMessage='Pins' /></span>
+                </NavLink>
+              }
+            </div>
+
             {isSmallScreen && (
               <div className={classNames('account-mobile-container', { 'deactivated': deactivated })}>
                 <BundleContainer fetchComponent={ProfileInfoPanel}>
diff --git a/app/styles/components/account-header.scss b/app/styles/components/account-header.scss
index 12ca0146c..e84ea8915 100644
--- a/app/styles/components/account-header.scss
+++ b/app/styles/components/account-header.scss
@@ -219,9 +219,11 @@
       display: flex;
       font-size: 14px;
       color: var(--primary-text-color--faint);
+
       @media screen and (max-width: 895px) {
         justify-content: center;
         flex-wrap: wrap;
+        display: none;
       }
 
       a {