FloatingActionButton: contextual group support

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

@@ -40,13 +40,12 @@ 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));
-    }
   };
 
-  if (group) {
   return (
     <Button
       theme='accent'
@@ -62,9 +61,6 @@ const GroupComposeButton = () => {
       </HStack>
     </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 = () => {
+  const location = useLocation();
+
+  if (location.pathname.startsWith('/group/')) {
+    return <GroupFAB />;
   }
 
-/** FloatingActionButton (aka FAB), a composer button that floats in the corner on mobile. */
+  return <HomeFAB />;
-const FloatingActionButton: React.FC<IFloatingActionButton> = () => {
+};
+
+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;