From 2cce0435b433995854537b4bf5ac0848666c8b4b Mon Sep 17 00:00:00 2001
From: Chewbacca <dice.warrant-02@icloud.com>
Date: Wed, 19 Apr 2023 10:09:03 -0400
Subject: [PATCH 1/2] Improve StatusInfo for reposting from groups

---
 app/soapbox/components/status.tsx             | 92 ++++++++++++++-----
 .../components/statuses/status-info.tsx       | 41 +++++----
 .../status/components/detailed-status.tsx     | 29 +++---
 3 files changed, 110 insertions(+), 52 deletions(-)

diff --git a/app/soapbox/components/status.tsx b/app/soapbox/components/status.tsx
index 24131159d..8456a46a4 100644
--- a/app/soapbox/components/status.tsx
+++ b/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,11 +211,50 @@ const Status: React.FC<IStatus> = (props) => {
   };
 
   const renderStatusInfo = () => {
-    if (isReblog) {
+    if (isReblog && showGroup && group) {
+      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_with_group'
+              defaultMessage='{name} reposted from {group}'
+              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>
+                ),
+                group: (
+                  <Link to={`/group/${(status.group as GroupEntity).slug}`} className='hover:underline'>
+                    <strong
+                      className='text-gray-800 dark:text-gray-200'
+                      dangerouslySetInnerHTML={{
+                        __html: (status.group as GroupEntity).display_name_html,
+                      }}
+                    />
+                  </Link>
+                ),
+              }}
+            />
+          }
+        />
+      );
+    } else if (isReblog) {
       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
@@ -223,14 +262,16 @@ const Status: React.FC<IStatus> = (props) => {
               defaultMessage='{name} reposted'
               values={{
                 name: (
-                  <bdi className='truncate pr-1 rtl:pl-1'>
-                    <strong
-                      className='text-gray-800 dark:text-gray-200'
-                      dangerouslySetInnerHTML={{
-                        __html: String(status.getIn(['account', 'display_name_html'])),
-                      }}
-                    />
-                  </bdi>
+                  <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>
+                ),
+              }}
+            />
           }
         />
       );
diff --git a/app/soapbox/components/statuses/status-info.tsx b/app/soapbox/components/statuses/status-info.tsx
index 322a911bc..50fad86b3 100644
--- a/app/soapbox/components/statuses/status-info.tsx
+++ b/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>
   );
 };
 
diff --git a/app/soapbox/features/status/components/detailed-status.tsx b/app/soapbox/features/status/components/detailed-status.tsx
index 05e435d4e..2959d285d 100644
--- a/app/soapbox/features/status/components/detailed-status.tsx
+++ b/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>

From 5dbaba3c415db9ac74de4f9021fe433c1f802daa Mon Sep 17 00:00:00 2001
From: Chewbacca <dice.warrant-02@icloud.com>
Date: Wed, 19 Apr 2023 10:20:23 -0400
Subject: [PATCH 2/2] Add locale

---
 app/soapbox/locales/en.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/soapbox/locales/en.json b/app/soapbox/locales/en.json
index 35bfb58a0..f7f1f20e1 100644
--- a/app/soapbox/locales/en.json
+++ b/app/soapbox/locales/en.json
@@ -1469,6 +1469,7 @@
   "status.reblog": "Repost",
   "status.reblog_private": "Repost to original audience",
   "status.reblogged_by": "{name} reposted",
+  "status.reblogged_by_with_group": "{name} reposted from {group}",
   "status.reblogs.empty": "No one has reposted this post yet. When someone does, they will show up here.",
   "status.redraft": "Delete & re-draft",
   "status.remove_account_from_group": "Remove account from group",