FloatingActionButton: contextual group support

app/soapbox/features/ui/components/compose-button.tsx

@@ -40,31 +40,27 @@ const GroupComposeButton = () => {
   const match = useRouteMatch<{ groupSlug: string }>('/group/:groupSlug');
   const { entity: group } = useGroupLookup(match?.params.groupSlug || '');
 
+  if (!group) return null;
+
   const onOpenCompose = () => {
-    if (group) {
+    dispatch(groupComposeModal(group));
-      dispatch(groupComposeModal(group));
-    }
   };
 
-  if (group) {
+  return (
-    return (
+    <Button
-      <Button
+      theme='accent'
-        theme='accent'
+      size='lg'
-        size='lg'
+      onClick={onOpenCompose}
-        onClick={onOpenCompose}
+      block
-        block
+    >
-      >
+      <HStack space={3} alignItems='center'>
-        <HStack space={3} alignItems='center'>
+        <Avatar className='-my-1 border-2 border-white' size={30} src={group.avatar} />
-          <Avatar className='-my-1 border-2 border-white' size={30} src={group.avatar} />
+        <span>
-          <span>
+          <FormattedMessage id='navigation.compose_group' defaultMessage='Compose to Group' />
-            <FormattedMessage id='navigation.compose_group' defaultMessage='Compose to Group' />
+        </span>
-          </span>
+      </HStack>
-        </HStack>
+    </Button>
-      </Button>
+  );
-    );
-  }
-
-  return null;
 };
 
 export default ComposeButton;

app/soapbox/features/ui/components/floating-action-button.tsx

@@ -1,20 +1,30 @@
 import clsx from 'clsx';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
+import { useLocation, useRouteMatch } from 'react-router-dom';
 
+import { groupComposeModal } from 'soapbox/actions/compose';
 import { openModal } from 'soapbox/actions/modals';
-import { Icon } from 'soapbox/components/ui';
+import { Avatar, HStack, Icon } from 'soapbox/components/ui';
 import { useAppDispatch } from 'soapbox/hooks';
+import { useGroupLookup } from 'soapbox/hooks/api/groups/useGroupLookup';
 
 const messages = defineMessages({
   publish: { id: 'compose_form.publish', defaultMessage: 'Publish' },
 });
 
-interface IFloatingActionButton {
-}
-
 /** FloatingActionButton (aka FAB), a composer button that floats in the corner on mobile. */
-const FloatingActionButton: React.FC<IFloatingActionButton> = () => {
+const FloatingActionButton: React.FC = () => {
+  const location = useLocation();
+
+  if (location.pathname.startsWith('/group/')) {
+    return <GroupFAB />;
+  }
+
+  return <HomeFAB />;
+};
+
+const HomeFAB: React.FC = () => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
 
@@ -39,4 +49,37 @@ const FloatingActionButton: React.FC<IFloatingActionButton> = () => {
   );
 };
 
+const GroupFAB: React.FC = () => {
+  const intl = useIntl();
+  const dispatch = useAppDispatch();
+
+  const match = useRouteMatch<{ groupSlug: string }>('/group/:groupSlug');
+  const { entity: group } = useGroupLookup(match?.params.groupSlug || '');
+
+  if (!group) return null;
+
+  const handleOpenComposeModal = () => {
+    dispatch(groupComposeModal(group));
+  };
+
+  return (
+    <button
+      onClick={handleOpenComposeModal}
+      className={clsx(
+        'inline-flex appearance-none items-center rounded-full border p-4 font-medium transition-all focus:outline-none focus:ring-2 focus:ring-offset-2',
+        'border-transparent bg-secondary-500 text-gray-100 hover:bg-secondary-400 focus:bg-secondary-500 focus:ring-secondary-300',
+      )}
+      aria-label={intl.formatMessage(messages.publish)}
+    >
+      <HStack space={3} alignItems='center'>
+        <Avatar className='-my-3 -ml-2 border-white' size={42} src={group.avatar} />
+        <Icon
+          src={require('@tabler/icons/pencil-plus.svg')}
+          className='h-6 w-6'
+        />
+      </HStack>
+    </button>
+  );
+};
+
 export default FloatingActionButton;