Improve StatusInfo for reposting from groups

app/soapbox/components/status.tsx

@@ -2,7 +2,7 @@ import clsx from 'clsx';
 import React, { useEffect, useRef, useState } from 'react';
 import { HotKeys } from 'react-hotkeys';
 import { useIntl, FormattedMessage, defineMessages } from 'react-intl';
-import { useHistory } from 'react-router-dom';
+import { Link, useHistory } from 'react-router-dom';
 
 import { mentionCompose, replyCompose } from 'soapbox/actions/compose';
 import { toggleFavourite, toggleReblog } from 'soapbox/actions/interactions';
@@ -211,26 +211,67 @@ const Status: React.FC<IStatus> = (props) => {
   };
 
   const renderStatusInfo = () => {
-    if (isReblog) {
+    if (isReblog && showGroup && group) {
       return (
         <StatusInfo
           avatarSize={avatarSize}
-          to={`/@${status.getIn(['account', 'acct'])}`}
           icon={<Icon src={require('@tabler/icons/repeat.svg')} className='h-4 w-4 text-green-600' />}
           text={
             <FormattedMessage
-              id='status.reblogged_by'
-              defaultMessage='{name} reposted'
+              id='status.reblogged_by_with_group'
+              defaultMessage='{name} reposted from {group}'
               values={{
                 name: (
-                  <bdi className='truncate pr-1 rtl:pl-1'>
+                  <Link
+                    to={`/@${status.getIn(['account', 'acct'])}`}
+                    className='hover:underline'
+                  >
+                    <bdi className='truncate'>
+                      <strong
+                        className='text-gray-800 dark:text-gray-200'
+                        dangerouslySetInnerHTML={{
+                          __html: String(status.getIn(['account', 'display_name_html'])),
+                        }}
+                      />
+                    </bdi>
+                  </Link>
+                ),
+                group: (
+                  <Link to={`/group/${(status.group as GroupEntity).slug}`} className='hover:underline'>
                     <strong
                       className='text-gray-800 dark:text-gray-200'
                       dangerouslySetInnerHTML={{
-                        __html: String(status.getIn(['account', 'display_name_html'])),
+                        __html: (status.group as GroupEntity).display_name_html,
                       }}
                     />
-                  </bdi>
+                  </Link>
+                ),
+              }}
+            />
+          }
+        />
+      );
+    } else if (isReblog) {
+      return (
+        <StatusInfo
+          avatarSize={avatarSize}
+          icon={<Icon src={require('@tabler/icons/repeat.svg')} className='h-4 w-4 text-green-600' />}
+          text={
+            <FormattedMessage
+              id='status.reblogged_by'
+              defaultMessage='{name} reposted'
+              values={{
+                name: (
+                  <Link to={`/@${status.getIn(['account', 'acct'])}`} className='hover:underline'>
+                    <bdi className='truncate'>
+                      <strong
+                        className='text-gray-800 dark:text-gray-200'
+                        dangerouslySetInnerHTML={{
+                          __html: String(status.getIn(['account', 'display_name_html'])),
+                        }}
+                      />
+                    </bdi>
+                  </Link>
                 ),
               }}
             />
@@ -243,9 +284,7 @@ const Status: React.FC<IStatus> = (props) => {
           avatarSize={avatarSize}
           icon={<Icon src={require('@tabler/icons/pinned.svg')} className='h-4 w-4 text-gray-600 dark:text-gray-400' />}
           text={
-            <Text size='xs' theme='muted' weight='medium'>
-              <FormattedMessage id='status.pinned' defaultMessage='Pinned post' />
-            </Text>
+            <FormattedMessage id='status.pinned' defaultMessage='Pinned post' />
           }
         />
       );
@@ -253,18 +292,23 @@ const Status: React.FC<IStatus> = (props) => {
       return (
         <StatusInfo
           avatarSize={avatarSize}
-          to={`/group/${group.slug}`}
           icon={<Icon src={require('@tabler/icons/circles.svg')} className='h-4 w-4 text-primary-600 dark:text-accent-blue' />}
           text={
-            <Text size='xs' theme='muted' weight='medium'>
-              <FormattedMessage
-                id='status.group'
-                defaultMessage='Posted in {group}'
-                values={{ group: (
-                  <span dangerouslySetInnerHTML={{ __html: group.display_name_html }} />
-                ) }}
-              />
-            </Text>
+            <FormattedMessage
+              id='status.group'
+              defaultMessage='Posted in {group}'
+              values={{
+                group: (
+                  <Link to={`/group/${group.slug}`} className='hover:underline'>
+                    <bdi className='truncate'>
+                      <strong className='text-gray-800 dark:text-gray-200'>
+                        <span dangerouslySetInnerHTML={{ __html: group.display_name_html }} />
+                      </strong>
+                    </bdi>
+                  </Link>
+                ),
+              }}
+            />
           }
         />
       );

app/soapbox/components/statuses/status-info.tsx

@@ -1,37 +1,44 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
+
+import { HStack, Text } from '../ui';
 
 interface IStatusInfo {
   avatarSize: number
-  to?: string
   icon: React.ReactNode
   text: React.ReactNode
 }
 
 const StatusInfo = (props: IStatusInfo) => {
-  const { avatarSize, to, icon, text } = props;
+  const { avatarSize, icon, text } = props;
 
-  const onClick = (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
+  const onClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
     event.stopPropagation();
   };
 
-  const Container = to ? Link : 'div';
-  const containerProps: any = to ? { onClick, to } : {};
-
   return (
-    <Container
-      {...containerProps}
-      className='flex items-center space-x-3 text-xs font-medium text-gray-700 hover:underline rtl:space-x-reverse dark:text-gray-600'
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    <div
+      // eslint-disable-next-line jsx-a11y/aria-role
+      role='status-info'
+      onClick={onClick}
     >
-      <div
-        className='flex justify-end'
-        style={{ width: avatarSize }}
+      <HStack
+        space={3}
+        alignItems='center'
+        className='cursor-default text-xs font-medium text-gray-700 rtl:space-x-reverse dark:text-gray-600'
       >
-        {icon}
-      </div>
+        <div
+          className='flex justify-end'
+          style={{ width: avatarSize }}
+        >
+          {icon}
+        </div>
 
-      {text}
-    </Container>
+        <Text size='xs' theme='muted' weight='medium'>
+          {text}
+        </Text>
+      </HStack>
+    </div>
   );
 };
 

app/soapbox/features/status/components/detailed-status.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { FormattedDate, FormattedMessage, useIntl } from 'react-intl';
+import { Link } from 'react-router-dom';
 
 import Account from 'soapbox/components/account';
 import StatusContent from 'soapbox/components/status-content';
@@ -56,22 +57,28 @@ const DetailedStatus: React.FC<IDetailedStatus> = ({
         <div className='mb-4'>
           <StatusInfo
             avatarSize={42}
-            to={`/groups/${(status.group as Group).id}`}
             icon={
               <Icon
                 src={require('@tabler/icons/circles.svg')}
                 className='h-4 w-4 text-primary-600 dark:text-accent-blue'
-              />}
+              />
+            }
             text={
-              <Text size='xs' theme='muted' weight='medium'>
-                <FormattedMessage
-                  id='status.group'
-                  defaultMessage='Posted in {group}'
-                  values={{ group: (
-                    <span dangerouslySetInnerHTML={{ __html: (status.group as Group).display_name_html }} />
-                  ) }}
-                />
-              </Text>
+              <FormattedMessage
+                id='status.group'
+                defaultMessage='Posted in {group}'
+                values={{
+                  group: (
+                    <Link to={`/group/${(status.group as Group).slug}`} className='hover:underline'>
+                      <bdi className='truncate'>
+                        <strong className='text-gray-800 dark:text-gray-200'>
+                          <span dangerouslySetInnerHTML={{ __html: (status.group as Group).display_name_html }} />
+                        </strong>
+                      </bdi>
+                    </Link>
+                  ),
+                }}
+              />
             }
           />
         </div>