Update UI around Empty Message

app/soapbox/__fixtures__/intlMessages.json

@@ -159,7 +159,7 @@
     "empty_column.follow_requests": "You don\"t have any follow requests yet. When you receive one, it will show up here.",
     "empty_column.group": "There is nothing in this group yet. When members of this group make new posts, they will appear here.",
     "empty_column.hashtag": "There is nothing in this hashtag yet.",
-    "empty_column.home": "Your home timeline is empty! Visit {public} to get started and meet other users.",
+    "empty_column.home": "Or you can visit {public} to get started and meet other users.",
     "empty_column.home.local_tab": "the {site_title} tab",
     "empty_column.list": "There is nothing in this list yet. When members of this list create new posts, they will appear here.",
     "empty_column.lists": "You don\"t have any lists yet. When you create one, it will show up here.",
@@ -637,7 +637,7 @@
   "empty_column.follow_requests": "You don\"t have any follow requests yet. When you receive one, it will show up here.",
   "empty_column.group": "There is nothing in this group yet. When members of this group make new posts, they will appear here.",
   "empty_column.hashtag": "There is nothing in this hashtag yet.",
-  "empty_column.home": "Your home timeline is empty! Visit {public} to get started and meet other users.",
+  "empty_column.home": "Or you can visit {public} to get started and meet other users.",
   "empty_column.home.local_tab": "the {site_title} tab",
   "empty_column.list": "There is nothing in this list yet. When members of this list create new posts, they will appear here.",
   "empty_column.lists": "You don\"t have any lists yet. When you create one, it will show up here.",

app/soapbox/components/scrollable_list.tsx

@@ -7,7 +7,7 @@ import PullToRefresh from 'soapbox/components/pull-to-refresh';
 import { useSettings } from 'soapbox/hooks';
 
 import LoadMore from './load_more';
-import { Spinner, Text } from './ui';
+import { Card, Spinner, Text } from './ui';
 
 /** Custom Viruoso component context. */
 type Context = {
@@ -157,13 +157,13 @@ const ScrollableList = React.forwardRef<VirtuosoHandle, IScrollableList>(({
       <div className='mt-2'>
         {alwaysPrepend && prepend}
 
-        <div className='bg-primary-50 dark:bg-slate-700 mt-2 rounded-lg text-center p-8'>
+        <Card variant='rounded' size='lg'>
           {isLoading ? (
             <Spinner />
           ) : (
             <Text>{emptyMessage}</Text>
           )}
-        </div>
+        </Card>
       </div>
     );
   };

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>
         }
       />

app/soapbox/hooks/__tests__/useDimensions.test.ts

@@ -5,12 +5,14 @@ import { useDimensions } from '../useDimensions';
 let listener: ((rect: any) => void) | undefined = undefined;
 
 (window as any).ResizeObserver = class ResizeObserver {
+
   constructor(ls) {
     listener = ls;
   }
 
   observe() {}
   disconnect() {}
+
 };
 
 describe('useDimensions()', () => {
@@ -56,10 +58,12 @@ describe('useDimensions()', () => {
   it('disconnects on unmount', () => {
     const disconnect = jest.fn();
     (window as any).ResizeObserver = class ResizeObserver {
+
       observe() {}
       disconnect() {
         disconnect();
       }
+    
     };
 
     const { result, unmount } = renderHook(() => useDimensions());

app/soapbox/locales/bg.json

@@ -450,7 +450,7 @@
   "empty_column.follow_requests": "You don't have any follow requests yet. When you receive one, it will show up here.",
   "empty_column.group": "There is nothing in this group yet. When members of this group make new posts, they will appear here.",
   "empty_column.hashtag": "There is nothing in this hashtag yet.",
-  "empty_column.home": "Your home timeline is empty! Visit {public} to get started and meet other users.",
+  "empty_column.home": "Or you can visit {public} to get started and meet other users.",
   "empty_column.home.local_tab": "the {site_title} tab",
   "empty_column.list": "There is nothing in this list yet.",
   "empty_column.lists": "You don't have any lists yet. When you create one, it will show up here.",

app/soapbox/locales/br.json

@@ -450,7 +450,7 @@
   "empty_column.follow_requests": "You don't have any follow requests yet. When you receive one, it will show up here.",
   "empty_column.group": "There is nothing in this group yet. When members of this group make new posts, they will appear here.",
   "empty_column.hashtag": "There is nothing in this hashtag yet.",
-  "empty_column.home": "Your home timeline is empty! Visit {public} to get started and meet other users.",
+  "empty_column.home": "Or you can visit {public} to get started and meet other users.",
   "empty_column.home.local_tab": "the {site_title} tab",
   "empty_column.list": "There is nothing in this list yet. When members of this list create new posts, they will appear here.",
   "empty_column.lists": "You don't have any lists yet. When you create one, it will show up here.",

app/soapbox/locales/defaultMessages.json

@@ -3793,7 +3793,7 @@
         "id": "column.home"
       },
       {
-        "defaultMessage": "Your home timeline is empty! Visit {public} to get started and meet other users.",
+        "defaultMessage": "Or you can visit {public} to get started and meet other users.",
         "id": "empty_column.home"
       },
       {

app/soapbox/locales/en.json

@@ -453,7 +453,9 @@
   "empty_column.follow_requests": "You don't have any follow requests yet. When you receive one, it will show up here.",
   "empty_column.group": "There is nothing in this group yet. When members of this group make new posts, they will appear here.",
   "empty_column.hashtag": "There is nothing in this hashtag yet.",
-  "empty_column.home": "Your home timeline is empty! Visit {public} to get started and meet other users.",
+  "empty_column.home": "Or you can visit {public} to get started and meet other users.",
+  "empty_column.home.title": "You're not following anyone yet",
+  "empty_column.home.subtitle": "{siteTitle} gets more interesting once you follow other users.",
   "empty_column.home.local_tab": "the {site_title} tab",
   "empty_column.list": "There is nothing in this list yet. When members of this list create new posts, they will appear here.",
   "empty_column.lists": "You don't have any lists yet. When you create one, it will show up here.",

app/soapbox/locales/ga.json

@@ -450,7 +450,7 @@
   "empty_column.follow_requests": "You don't have any follow requests yet. When you receive one, it will show up here.",
   "empty_column.group": "There is nothing in this group yet. When members of this group make new posts, they will appear here.",
   "empty_column.hashtag": "There is nothing in this hashtag yet.",
-  "empty_column.home": "Your home timeline is empty! Visit {public} to get started and meet other users.",
+  "empty_column.home": "Or you can visit {public} to get started and meet other users.",
   "empty_column.home.local_tab": "the {site_title} tab",
   "empty_column.list": "There is nothing in this list yet. When members of this list create new posts, they will appear here.",
   "empty_column.lists": "You don't have any lists yet. When you create one, it will show up here.",

app/soapbox/locales/hi.json

@@ -450,7 +450,7 @@
   "empty_column.follow_requests": "You don't have any follow requests yet. When you receive one, it will show up here.",
   "empty_column.group": "There is nothing in this group yet. When members of this group make new posts, they will appear here.",
   "empty_column.hashtag": "There is nothing in this hashtag yet.",
-  "empty_column.home": "Your home timeline is empty! Visit {public} to get started and meet other users.",
+  "empty_column.home": "Or you can visit {public} to get started and meet other users.",
   "empty_column.home.local_tab": "the {site_title} tab",
   "empty_column.list": "There is nothing in this list yet. When members of this list create new posts, they will appear here.",
   "empty_column.lists": "You don't have any lists yet. When you create one, it will show up here.",

app/soapbox/locales/lt.json

@@ -450,7 +450,7 @@
   "empty_column.follow_requests": "You don't have any follow requests yet. When you receive one, it will show up here.",
   "empty_column.group": "There is nothing in this group yet. When members of this group make new posts, they will appear here.",
   "empty_column.hashtag": "There is nothing in this hashtag yet.",
-  "empty_column.home": "Your home timeline is empty! Visit {public} to get started and meet other users.",
+  "empty_column.home": "Or you can visit {public} to get started and meet other users.",
   "empty_column.home.local_tab": "the {site_title} tab",
   "empty_column.list": "There is nothing in this list yet. When members of this list create new posts, they will appear here.",
   "empty_column.lists": "You don't have any lists yet. When you create one, it will show up here.",

app/soapbox/locales/mk.json

@@ -450,7 +450,7 @@
   "empty_column.follow_requests": "You don't have any follow requests yet. When you receive one, it will show up here.",
   "empty_column.group": "There is nothing in this group yet. When members of this group make new posts, they will appear here.",
   "empty_column.hashtag": "There is nothing in this hashtag yet.",
-  "empty_column.home": "Your home timeline is empty! Visit {public} to get started and meet other users.",
+  "empty_column.home": "Or you can visit {public} to get started and meet other users.",
   "empty_column.home.local_tab": "the {site_title} tab",
   "empty_column.list": "There is nothing in this list yet. When members of this list create new posts, they will appear here.",
   "empty_column.lists": "You don't have any lists yet. When you create one, it will show up here.",

app/soapbox/locales/ms.json

@@ -450,7 +450,7 @@
   "empty_column.follow_requests": "You don't have any follow requests yet. When you receive one, it will show up here.",
   "empty_column.group": "There is nothing in this group yet. When members of this group make new posts, they will appear here.",
   "empty_column.hashtag": "There is nothing in this hashtag yet.",
-  "empty_column.home": "Your home timeline is empty! Visit {public} to get started and meet other users.",
+  "empty_column.home": "Or you can visit {public} to get started and meet other users.",
   "empty_column.home.local_tab": "the {site_title} tab",
   "empty_column.list": "There is nothing in this list yet. When members of this list create new posts, they will appear here.",
   "empty_column.lists": "You don't have any lists yet. When you create one, it will show up here.",