[CH] Add local and fediverse timeline in thumb menu, move serach icon in top navigation (#13)

* Add search Icon in tabs_bar, remove search from thumbs bar

* Add local et fediverse timeline access in thumb menu

* Change buttons order

Co-authored-by: clovis <clovis@synapse-medicine.com>

app/soapbox/components/sidebar-navigation.tsx

@@ -19,6 +19,7 @@ const messages = defineMessages({
   dashboard: { id: 'tabs_bar.dashboard', defaultMessage: 'Dashboard' },
   all: { id: 'tabs_bar.all', defaultMessage: 'All' },
   fediverse: { id: 'tabs_bar.fediverse', defaultMessage: 'Fediverse' },
+  settings: { id: 'tabs_bar.settings', defaultMessage: 'Settings'}
 });
 
 /** Desktop sidebar with links to different views in the app. */
@@ -81,25 +82,12 @@ const SidebarNavigation = () => {
         });
       }
 
-      if (features.publicTimeline) {
-        menu.push(null);
-      }
-    }
-
-    if (features.publicTimeline) {
       menu.push({
-        to: '/timeline/local',
-        icon: features.federating ? require('@tabler/icons/users.svg') : require('@tabler/icons/world.svg'),
-        text: features.federating ? instance.title : intl.formatMessage(messages.all),
+        to: '/settings',
+        icon: require('@tabler/icons/settings.svg'),
+        text: intl.formatMessage(messages.settings),
       });
-    }
 
-    if (features.publicTimeline && features.federating) {
-      menu.push({
-        to: '/timeline/fediverse',
-        icon: require('icons/fediverse.svg'),
-        text: intl.formatMessage(messages.fediverse),
-      });
     }
 
     return menu;
@@ -142,11 +130,31 @@ const SidebarNavigation = () => {
           text={<FormattedMessage id='tabs_bar.home' defaultMessage='Home' />}
         />
 
-        <SidebarNavigationLink
-          to='/search'
-          icon={require('@tabler/icons/search.svg')}
-          text={<FormattedMessage id='tabs_bar.search' defaultMessage='Search' />}
-        />
+        {
+          features.federating ? (
+            <SidebarNavigationLink
+              icon={require('@tabler/icons/users.svg')}
+              text={<>{instance.get('title')}</>}
+              to='/timeline/local'
+            />
+          ) : (
+            <SidebarNavigationLink
+              icon={require('@tabler/icons/world.svg')}
+              text={<FormattedMessage id='tabs_bar.all' defaultMessage='All' />}
+              to='/timeline/local'
+            />
+          )
+        }
+
+        {
+          features.federating && (
+            <SidebarNavigationLink
+            icon={require('icons/fediverse.svg')}
+            text={<FormattedMessage id='tabs_bar.fediverse' defaultMessage='Fediverse' />}
+            to='/timeline/fediverse'
+          />
+          )
+        }
 
         {account && (
           <>
@@ -158,18 +166,6 @@ const SidebarNavigation = () => {
             />
 
             {renderMessagesLink()}
-
-            <SidebarNavigationLink
-              to={`/@${account.acct}`}
-              icon={require('@tabler/icons/user.svg')}
-              text={<FormattedMessage id='tabs_bar.profile' defaultMessage='Profile' />}
-            />
-
-            <SidebarNavigationLink
-              to='/settings'
-              icon={require('@tabler/icons/settings.svg')}
-              text={<FormattedMessage id='tabs_bar.settings' defaultMessage='Settings' />}
-            />
           </>
         )}
 

app/soapbox/components/thumb_navigation.tsx

@@ -9,8 +9,8 @@ const ThumbNavigation: React.FC = (): JSX.Element => {
   const account = useOwnAccount();
   const notificationCount = useAppSelector((state) => state.notifications.unread);
   const chatsCount = useAppSelector((state) => state.chats.items.reduce((acc, curr) => acc + Math.min(curr.unread || 0, 1), 0));
-  const dashboardCount = useAppSelector((state) => state.admin.openReports.count() + state.admin.awaitingApproval.count());
   const features = getFeatures(useAppSelector((state) => state.instance));
+  const instance = useAppSelector((state) => state.instance);
 
   /** Conditionally render the supported messages link */
   const renderMessagesLink = (): React.ReactNode => {
@@ -49,12 +49,36 @@ const ThumbNavigation: React.FC = (): JSX.Element => {
         exact
       />
 
-      <ThumbNavigationLink
-        src={require('@tabler/icons/search.svg')}
-        text={<FormattedMessage id='navigation.search' defaultMessage='Search' />}
-        to='/search'
-        exact
-      />
+      {
+        features.federating ? (
+          <ThumbNavigationLink
+            src={require('@tabler/icons/users.svg')}
+            text={instance.get('title')}
+            to='/timeline/local'
+            exact
+          />
+        ) : (
+          <ThumbNavigationLink
+            src={require('@tabler/icons/world.svg')}
+            text={<FormattedMessage id='tabs_bar.all' defaultMessage='All' />}
+            to='/timeline/local'
+            exact
+          />
+        )
+      }
+
+      {
+        features.federating && (
+          <ThumbNavigationLink
+          src={require('icons/fediverse.svg')}
+          text={<FormattedMessage id='tabs_bar.fediverse' defaultMessage='Fediverse' />}
+          to='/timeline/fediverse'
+          exact
+        />
+        )
+      }
+
+      {account && renderMessagesLink()}
 
       {account && (
         <ThumbNavigationLink
@@ -66,16 +90,6 @@ const ThumbNavigation: React.FC = (): JSX.Element => {
         />
       )}
 
-      {account && renderMessagesLink()}
-
-      {(account && account.staff) && (
-        <ThumbNavigationLink
-          src={require('@tabler/icons/dashboard.svg')}
-          text={<FormattedMessage id='navigation.dashboard' defaultMessage='Dashboard' />}
-          to='/soapbox/admin'
-          count={dashboardCount}
-        />
-      )}
     </div>
   );
 };

app/soapbox/features/community_timeline/index.tsx

@@ -4,7 +4,6 @@ import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { connectCommunityStream } from 'soapbox/actions/streaming';
 import { expandCommunityTimeline } from 'soapbox/actions/timelines';
 import PullToRefresh from 'soapbox/components/pull-to-refresh';
-import SubNavigation from 'soapbox/components/sub_navigation';
 import { Column } from 'soapbox/components/ui';
 import { useAppDispatch, useSettings } from 'soapbox/hooks';
 
@@ -44,7 +43,6 @@ const CommunityTimeline = () => {
 
   return (
     <Column label={intl.formatMessage(messages.title)} transparent withHeader={false}>
-      <SubNavigation message={intl.formatMessage(messages.title)} settings={ColumnSettings} />
       <PullToRefresh onRefresh={handleRefresh}>
         <Timeline
           scrollKey={`${timelineId}_timeline`}

app/soapbox/features/public_timeline/index.tsx

@@ -6,7 +6,6 @@ import { changeSetting } from 'soapbox/actions/settings';
 import { connectPublicStream } from 'soapbox/actions/streaming';
 import { expandPublicTimeline } from 'soapbox/actions/timelines';
 import PullToRefresh from 'soapbox/components/pull-to-refresh';
-import SubNavigation from 'soapbox/components/sub_navigation';
 import { Column } from 'soapbox/components/ui';
 import Accordion from 'soapbox/features/ui/components/accordion';
 import { useAppDispatch, useAppSelector, useSettings } from 'soapbox/hooks';
@@ -65,7 +64,6 @@ const CommunityTimeline = () => {
 
   return (
     <Column label={intl.formatMessage(messages.title)} transparent withHeader={false}>
-      <SubNavigation message={intl.formatMessage(messages.title)} settings={ColumnSettings} />
       <PinnedHostsPicker />
       {showExplanationBox && <div className='mb-4'>
         <Accordion

app/soapbox/features/ui/components/navbar.tsx

@@ -70,21 +70,21 @@ const Navbar = () => {
     <nav className='bg-white dark:bg-slate-800 shadow z-50 sticky top-0' ref={node}>
       <div className='max-w-7xl mx-auto px-2 sm:px-6 lg:px-8'>
         <div className='relative flex justify-between h-12 lg:h-16'>
-          {account && (
-            <div className='absolute inset-y-0 left-0 flex items-center lg:hidden'>
-              <button onClick={onOpenSidebar}>
-                <Avatar src={account.avatar} size={34} />
-              </button>
-            </div>
-          )}
-
           <div
             className={classNames({
               'flex-1 flex items-center lg:items-stretch space-x-4': true,
-              'justify-center lg:justify-start': account,
+              'justify-between lg:justify-start': account,
               'justify-start': !account,
             })}
           >
+            {account && (
+              <div className='flex items-center lg:hidden'>
+                <button onClick={onOpenSidebar}>
+                  <Avatar src={account.avatar} size={34} />
+                </button>
+              </div>
+            )}
+
             <Link key='logo' to='/' data-preview-title-id='column.home' className='flex-shrink-0 flex items-center'>
               <SiteLogo alt='Logo' className='h-5 lg:h-6 w-auto cursor-pointer' />
               <span className='hidden'><FormattedMessage id='tabs_bar.home' defaultMessage='Home' /></span>
@@ -97,6 +97,15 @@ const Navbar = () => {
                 </div>
               </div>
             )}
+
+            <Link to="/search">
+              <IconButton
+                src={require('@tabler/icons/search.svg')}
+                className='bg-transparent text-gray-400 dark:text-gray-500 hover:text-gray-700 dark:hover:text-gray-200 lg:hidden cursor-pointer'
+                iconClassName='w-5 h-5'
+              />
+            </Link>
+
           </div>
 
           <div className='absolute inset-y-0 right-0 flex items-center pr-2 lg:static lg:inset-auto lg:ml-6 lg:pr-0 space-x-3'>