Add timeline links to navigation

app/soapbox/components/sidebar-navigation.tsx

@@ -27,7 +27,7 @@ const SidebarNavigation = () => {
         <SidebarNavigationLink
           to='/'
           icon={require('icons/feed.svg')}
-          text={<FormattedMessage id='tabs_bar.home' defaultMessage='Feed' />}
+          text={<FormattedMessage id='tabs_bar.home' defaultMessage='Home' />}
         />
 
         {account && (
@@ -42,7 +42,7 @@ const SidebarNavigation = () => {
               to='/notifications'
               icon={require('icons/alert.svg')}
               count={notificationCount}
-              text={<FormattedMessage id='tabs_bar.notifications' defaultMessage='Alerts' />}
+              text={<FormattedMessage id='tabs_bar.notifications' defaultMessage='Notifications' />}
             />
 
             <SidebarNavigationLink
@@ -95,27 +95,25 @@ const SidebarNavigation = () => {
           />
         )}
 
-        {/* {features.federating ? (
+        {(features.localTimeline || features.publicTimeline) && (
-          <NavLink to='/timeline/local' className='btn grouped'>
+          <hr className='dark:border-slate-700' />
-            <Icon
-              src={require('@tabler/icons/icons/users.svg')}
-              className={classNames('primary-navigation__icon', { 'svg-icon--active': location.pathname === '/timeline/local' })}
-            />
-            {instance.title}
-          </NavLink>
-        ) : (
-          <NavLink to='/timeline/local' className='btn grouped'>
-            <Icon src={require('@tabler/icons/icons/world.svg')} className='primary-navigation__icon' />
-            <FormattedMessage id='tabs_bar.all' defaultMessage='All' />
-          </NavLink>
         )}
 
-        {features.federating && (
+        {features.localTimeline && (
-          <NavLink to='/timeline/fediverse' className='btn grouped'>
+          <SidebarNavigationLink
-            <Icon src={require('icons/fediverse.svg')} className='column-header__icon' />
+            to='/timeline/local'
-            <FormattedMessage id='tabs_bar.fediverse' defaultMessage='Fediverse' />
+            icon={features.federating ? require('@tabler/icons/icons/users.svg') : require('@tabler/icons/icons/world.svg')}
-          </NavLink>
+            text={features.federating ? instance.title : <FormattedMessage id='tabs_bar.all' defaultMessage='All' />}
-        )} */}
+          />
+        )}
+
+        {(features.publicTimeline && features.federating) && (
+          <SidebarNavigationLink
+            to='/timeline/fediverse'
+            icon={require('icons/fediverse.svg')}
+            text={<FormattedMessage id='tabs_bar.fediverse' defaultMessage='Fediverse' />}
+          />
+        )}
       </div>
 
       {account && (

app/soapbox/components/sidebar_menu.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import React from 'react';
-import { defineMessages, useIntl } from 'react-intl';
+import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 import { useDispatch } from 'react-redux';
 import { Link, NavLink } from 'react-router-dom';
 
@@ -37,7 +37,7 @@ const messages = defineMessages({
 interface ISidebarLink {
   to: string,
   icon: string,
-  text: string,
+  text: string | JSX.Element,
   onClick: React.EventHandler<React.MouseEvent>,
 }
 
@@ -62,6 +62,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
   const { logo } = useSoapboxConfig();
   const features = useFeatures();
   const getAccount = makeGetAccount();
+  const instance = useAppSelector((state) => state.instance);
   const me = useAppSelector((state) => state.me);
   const account = useAppSelector((state) =>  me ? getAccount(state, me) : null);
   const otherAccounts: ImmutableList<AccountEntity> = useAppSelector((state) => getOtherAccounts(state));
@@ -130,7 +131,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
               <HStack alignItems='center' justifyContent='between'>
                 <Link to='/' onClick={onClose}>
                   {logo ? (
-                    <img alt='Logo' src={logo} className='h-5 w-auto min-w-[140px] cursor-pointer' />
+                    <img alt='Logo' src={logo} className='h-5 w-auto cursor-pointer' />
                   ):  (
                     <Icon
                       alt='Logo'
@@ -154,6 +155,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
                   <Account account={account} showProfileHoverCard={false} />
                 </Link>
 
+                {/* TODO: make this available to everyone */}
                 {account.staff && (
                   <Stack>
                     <button type='button' onClick={handleSwitcherClick} className='py-1'>
@@ -190,6 +192,28 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
                   onClick={onClose}
                 />
 
+                {(features.localTimeline || features.publicTimeline) && (
+                  <hr className='dark:border-slate-700' />
+                )}
+
+                {features.localTimeline && (
+                  <SidebarLink
+                    to='/timeline/local'
+                    icon={features.federating ? require('@tabler/icons/icons/users.svg') : require('@tabler/icons/icons/world.svg')}
+                    text={features.federating ? instance.title : <FormattedMessage id='tabs_bar.all' defaultMessage='All' />}
+                    onClick={onClose}
+                  />
+                )}
+
+                {(features.publicTimeline && features.federating) && (
+                  <SidebarLink
+                    to='/timeline/fediverse'
+                    icon={require('icons/fediverse.svg')}
+                    text={<FormattedMessage id='tabs_bar.fediverse' defaultMessage='Fediverse' />}
+                    onClick={onClose}
+                  />
+                )}
+
                 <hr />
 
                 <SidebarLink

app/soapbox/utils/features.ts

@@ -68,6 +68,14 @@ const getInstanceFeatures = (instance: Instance) => {
       // Even though Pleroma supports these endpoints, it has disadvantages
       // v.software === PLEROMA && gte(v.version, '2.1.0'),
     ]),
+    localTimeline: any([
+      v.software === MASTODON,
+      v.software === PLEROMA,
+    ]),
+    publicTimeline: any([
+      v.software === MASTODON,
+      v.software === PLEROMA,
+    ]),
     directTimeline: any([
       v.software === MASTODON && lt(v.compatVersion, '3.0.0'),
       v.software === PLEROMA && gte(v.version, '0.9.9'),