Update blankslate for Group Timeline

app/soapbox/features/group/group-timeline.tsx

@@ -5,9 +5,9 @@ import { Link } from 'react-router-dom';
 import { groupCompose } from 'soapbox/actions/compose';
 import { connectGroupStream } from 'soapbox/actions/streaming';
 import { expandGroupTimeline } from 'soapbox/actions/timelines';
-import { Avatar, HStack, Stack } from 'soapbox/components/ui';
+import { Avatar, HStack, Icon, Stack, Text } from 'soapbox/components/ui';
 import ComposeForm from 'soapbox/features/compose/components/compose-form';
-import { useAppDispatch, useAppSelector, useOwnAccount } from 'soapbox/hooks';
+import { useAppDispatch, useGroup, useOwnAccount } from 'soapbox/hooks';
 
 import Timeline from '../ui/components/timeline';
 
@@ -23,7 +23,9 @@ const GroupTimeline: React.FC<IGroupTimeline> = (props) => {
 
   const groupId = props.params.id;
 
-  const relationship = useAppSelector((state) => state.group_relationships.get(groupId));
+  const { group } = useGroup(groupId);
+
+  const canComposeGroupStatus = !!account && group?.relationship?.member;
 
   const handleLoadMore = (maxId: string) => {
     dispatch(expandGroupTimeline(groupId, { maxId }));
@@ -41,9 +43,13 @@ const GroupTimeline: React.FC<IGroupTimeline> = (props) => {
     };
   }, [groupId]);
 
+  if (!group) {
+    return null;
+  }
+
   return (
     <Stack space={2}>
-      {!!account && relationship?.member && (
+      {canComposeGroupStatus && (
         <div className='border-b border-solid border-gray-200 px-2 py-4 dark:border-gray-800'>
           <HStack alignItems='start' space={4}>
             <Link to={`/@${account.acct}`}>
@@ -59,11 +65,26 @@ const GroupTimeline: React.FC<IGroupTimeline> = (props) => {
           </HStack>
         </div>
       )}
+
       <Timeline
         scrollKey='group_timeline'
         timelineId={`group:${groupId}`}
         onLoadMore={handleLoadMore}
-        emptyMessage={<FormattedMessage id='empty_column.group' defaultMessage='There are no posts in this group yet.' />}
+        emptyMessage={
+          <Stack space={4} className='py-6' justifyContent='center' alignItems='center'>
+            <div className='rounded-full bg-gray-200 p-4'>
+              <Icon
+                src={require('@tabler/icons/message-2.svg')}
+                className='h-6 w-6 text-gray-600'
+              />
+            </div>
+
+            <Text theme='muted'>
+              <FormattedMessage id='empty_column.group' defaultMessage='There are no posts in this group yet.' />
+            </Text>
+          </Stack>
+        }
+        emptyMessageCard={false}
         divideType='border'
         showGroup={false}
       />