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 ? (
           <Spinner />
         ) : (
-            emptyMessage
-          )}
+          <>
+            {emptyMessageCard ? (
+              <Card variant='rounded' size='lg'>
+                {emptyMessage}
               </Card>
+            ) : emptyMessage}
+          </>
+        )}
       </div>
     );
   };

app/soapbox/features/groups/index.tsx

@@ -15,8 +15,20 @@ 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'>
+const Groups: React.FC = () => {
+  const dispatch = useAppDispatch();
+  const features = useFeatures();
+
+  const canCreateGroup = useAppSelector((state) => hasPermission(state, PERMISSION_CREATE_GROUPS));
+
+  const { groups, isLoading } = useGroups();
+
+  const createGroup = () => {
+    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
@@ -32,20 +44,19 @@ const EmptyMessage = () => (
           />
         </Text>
       </Stack>
+
+      {canCreateGroup && (
+        <Button
+          className='self-center'
+          onClick={createGroup}
+          theme='secondary'
+        >
+          <FormattedMessage id='new_group_panel.action' defaultMessage='Create Group' />
+        </Button>
+      )}
     </Stack>
   );
 
-const Groups: React.FC = () => {
-  const dispatch = useAppDispatch();
-  const features = useFeatures();
-
-  const canCreateGroup = useAppSelector((state) => hasPermission(state, PERMISSION_CREATE_GROUPS));
-
-  const { groups, isLoading } = useGroups();
-
-  const createGroup = () => {
-    dispatch(openModal('MANAGE_GROUP'));
-  };
 
   return (
     <Stack space={4}>
@@ -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}