Update UI around Empty Message

app/soapbox/features/home_timeline/index.tsx

@@ -5,7 +5,7 @@ import { Link } from 'react-router-dom';
 import { expandHomeTimeline } from 'soapbox/actions/timelines';
 import { Column, Stack, Text } from 'soapbox/components/ui';
 import Timeline from 'soapbox/features/ui/components/timeline';
-import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
+import { useAppSelector, useAppDispatch, useFeatures } from 'soapbox/hooks';
 
 const messages = defineMessages({
   title: { id: 'column.home', defaultMessage: 'Home' },
@@ -14,6 +14,8 @@ const messages = defineMessages({
 const HomeTimeline: React.FC = () => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
+  const features = useFeatures();
+
   const polling = useRef<NodeJS.Timer | null>(null);
 
   const isPartial = useAppSelector(state => state.timelines.get('home')?.isPartial === true);
@@ -66,12 +68,35 @@ const HomeTimeline: React.FC = () => {
         emptyMessage={
           <Stack space={1}>
             <Text size='xl' weight='medium' align='center'>
-              You’re not following anyone yet
+              <FormattedMessage
+                id='empty_column.home.title'
+                defaultMessage="You're not following anyone yet"
+              />
             </Text>
 
             <Text theme='muted' align='center'>
-              {siteTitle} gets more interesting once you follow other users.
+              <FormattedMessage
+                id='empty_column.home.subtitle'
+                defaultMessage='{siteTitle} gets more interesting once you follow other users.'
+                values={{ siteTitle }}
+              />
             </Text>
+
+            {features.federating && (
+              <Text theme='muted' align='center'>
+                <FormattedMessage
+                  id='empty_column.home'
+                  defaultMessage='Or you can visit {public} to get started and meet other users.'
+                  values={{
+                    public: (
+                      <Link to='/timeline/local' className='text-primary-600 dark:text-primary-400 hover:underline'>
+                        <FormattedMessage id='empty_column.home.local_tab' defaultMessage='the {site_title} tab' values={{ site_title: siteTitle }} />
+                      </Link>
+                    ),
+                  }}
+                />
+              </Text>
+            )}
           </Stack>
         }
       />