Merge branch 'my-groups-blankslate' into 'develop'

Update blankslate to allow Group Creation

See merge request soapbox-pub/soapbox!2326

app/soapbox/components/scrollable-list.tsx

@@ -52,6 +52,8 @@ interface IScrollableList extends VirtuosoProps<any, any> {
   alwaysPrepend?: boolean
   /** Message to display when the list is loaded but empty. */
   emptyMessage?: React.ReactNode
+  /** Should the empty message be displayed in a Card */
+  emptyMessageCard?: boolean
   /** Scrollable content. */
   children: Iterable<React.ReactNode>
   /** Callback when the list is scrolled to the top. */
@@ -87,6 +89,7 @@ const ScrollableList = React.forwardRef<VirtuosoHandle, IScrollableList>(({
   children,
   isLoading,
   emptyMessage,
+  emptyMessageCard = true,
   showLoading,
   onRefresh,
   onScroll,
@@ -158,13 +161,17 @@ const ScrollableList = React.forwardRef<VirtuosoHandle, IScrollableList>(({
       <div className='mt-2'>
         {alwaysPrepend && prepend}
 
-        <Card variant='rounded' size='lg'>
+        {isLoading ? (
-          {isLoading ? (
+          <Spinner />
-            <Spinner />
+        ) : (
-          ) : (
+          <>
-            emptyMessage
+            {emptyMessageCard ? (
-          )}
+              <Card variant='rounded' size='lg'>
-        </Card>
+                {emptyMessage}
+              </Card>
+            ) : emptyMessage}
+          </>
+        )}
       </div>
     );
   };

app/soapbox/features/groups/index.tsx

@@ -15,26 +15,6 @@ import TabBar, { TabItems } from './components/tab-bar';
 
 import type { Group as GroupEntity } from 'soapbox/types/entities';
 
-const EmptyMessage = () => (
-  <Stack space={6} alignItems='center' justifyContent='center' className='h-full p-6'>
-    <Stack space={2} className='max-w-sm'>
-      <Text size='2xl' weight='bold' tag='h2' align='center'>
-        <FormattedMessage
-          id='groups.empty.title'
-          defaultMessage='No Groups yet'
-        />
-      </Text>
-
-      <Text size='sm' theme='muted' align='center'>
-        <FormattedMessage
-          id='groups.empty.subtitle'
-          defaultMessage='Start discovering groups to join or create your own.'
-        />
-      </Text>
-    </Stack>
-  </Stack>
-);
-
 const Groups: React.FC = () => {
   const dispatch = useAppDispatch();
   const features = useFeatures();
@@ -47,6 +27,37 @@ const Groups: React.FC = () => {
     dispatch(openModal('MANAGE_GROUP'));
   };
 
+  const renderBlankslate = () => (
+    <Stack space={4} alignItems='center' justifyContent='center' className='py-6'>
+      <Stack space={2} className='max-w-sm'>
+        <Text size='2xl' weight='bold' tag='h2' align='center'>
+          <FormattedMessage
+            id='groups.empty.title'
+            defaultMessage='No Groups yet'
+          />
+        </Text>
+
+        <Text size='sm' theme='muted' align='center'>
+          <FormattedMessage
+            id='groups.empty.subtitle'
+            defaultMessage='Start discovering groups to join or create your own.'
+          />
+        </Text>
+      </Stack>
+
+      {canCreateGroup && (
+        <Button
+          className='self-center'
+          onClick={createGroup}
+          theme='secondary'
+        >
+          <FormattedMessage id='new_group_panel.action' defaultMessage='Create Group' />
+        </Button>
+      )}
+    </Stack>
+  );
+
+
   return (
     <Stack space={4}>
       {canCreateGroup && (
@@ -67,7 +78,8 @@ const Groups: React.FC = () => {
 
       <ScrollableList
         scrollKey='groups'
-        emptyMessage={<EmptyMessage />}
+        emptyMessage={renderBlankslate()}
+        emptyMessageCard={false}
         itemClassName='py-3 first:pt-0 last:pb-0'
         isLoading={isLoading}
         showLoading={isLoading && groups.length === 0}