Add tabs between home feed and local

src/components/scroll-top-button.tsx

@@ -87,7 +87,7 @@ const ScrollTopButton: React.FC<IScrollTopButton> = ({
   }
 
   return (
-    <div className='fixed left-1/2 top-20 z-50 -translate-x-1/2'>
+    <div className='fixed left-1/2 top-28 z-50 -translate-x-1/2'>
       <button
         className='flex cursor-pointer items-center space-x-1.5 whitespace-nowrap rounded-full bg-primary-600 px-4 py-2 text-white transition-transform hover:scale-105 hover:bg-primary-700 active:scale-100'
         onClick={handleClick}

src/features/community-timeline/index.tsx

@@ -37,7 +37,7 @@ const CommunityTimeline = () => {
   }, [onlyMedia]);
 
   return (
-    <Column label={instance.domain} slim>
+    <Column label={instance.domain} slim withHeader={false}>
       <PullToRefresh onRefresh={handleRefresh}>
         <Timeline
           className='black:p-4 black:sm:p-5'

src/features/status/components/thread.tsx

@@ -399,9 +399,7 @@ const Thread = (props: IThread) => {
         </div>
       </HotKeys>
 
-      {hasDescendants && (
       <hr className='-mx-4 mt-2 max-w-[100vw] border-t-2 black:border-t dark:border-gray-800' />
-      )}
     </div>
   );
 

src/pages/home-page.tsx

@@ -1,13 +1,14 @@
 import clsx from 'clsx';
 import { useRef } from 'react';
-import { useIntl } from 'react-intl';
-import { Link } from 'react-router-dom';
+import { FormattedMessage, useIntl } from 'react-intl';
+import { Link, useLocation } from 'react-router-dom';
 
 import { uploadCompose } from 'soapbox/actions/compose.ts';
 import Avatar from 'soapbox/components/ui/avatar.tsx';
 import { Card, CardBody } from 'soapbox/components/ui/card.tsx';
 import HStack from 'soapbox/components/ui/hstack.tsx';
 import Layout from 'soapbox/components/ui/layout.tsx';
+import Tabs from 'soapbox/components/ui/tabs.tsx';
 import LinkFooter from 'soapbox/features/ui/components/link-footer.tsx';
 import {
   WhoToFollowPanel,
@@ -24,11 +25,11 @@ import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
 import { useAppSelector } from 'soapbox/hooks/useAppSelector.ts';
 import { useDraggedFiles } from 'soapbox/hooks/useDraggedFiles.ts';
 import { useFeatures } from 'soapbox/hooks/useFeatures.ts';
+import { useInstance } from 'soapbox/hooks/useInstance.ts';
 import { useIsMobile } from 'soapbox/hooks/useIsMobile.ts';
 import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
 import { useSoapboxConfig } from 'soapbox/hooks/useSoapboxConfig.ts';
 
-
 import ComposeForm from '../features/compose/components/compose-form.tsx';
 
 interface IHomePage {
@@ -38,11 +39,13 @@ interface IHomePage {
 const HomePage: React.FC<IHomePage> = ({ children }) => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
+  const { pathname } = useLocation();
 
   const me = useAppSelector(state => state.me);
   const { account } = useOwnAccount();
   const features = useFeatures();
   const soapboxConfig = useSoapboxConfig();
+  const { instance } = useInstance();
 
   const composeId = 'home';
   const composeBlock = useRef<HTMLDivElement>(null);
@@ -90,6 +93,16 @@ const HomePage: React.FC<IHomePage> = ({ children }) => {
           </Card>
         )}
 
+        <div className='sticky top-12 z-20 bg-white/90 backdrop-blur black:bg-black/90 dark:bg-primary-900/90 lg:top-0'>
+          <Tabs
+            items={[
+              { name: 'home', text: <FormattedMessage id='tabs_bar.home' defaultMessage='Home' />, to: '/' },
+              { name: 'local', text: <div className='block max-w-xs truncate'>{instance.domain}</div>, to: '/timeline/local' },
+            ]}
+            activeItem={pathname === '/timeline/local' ? 'local' : 'home'}
+          />
+        </div>
+
         {children}
 
         {!me && (