Merge branch 'indicate-quote' into 'main'

Indicate that quoted post quotes another post

Closes #1465

See merge request soapbox-pub/soapbox!2980

src/components/quoted-status-indicator.tsx

@@ -0,0 +1,27 @@
+import React, { useCallback } from 'react';
+
+import { HStack, Icon, Text } from 'soapbox/components/ui';
+import { useAppSelector } from 'soapbox/hooks';
+import { makeGetStatus } from 'soapbox/selectors';
+
+interface IQuotedStatusIndicator {
+  /** The quoted status id. */
+  statusId: string;
+}
+
+const QuotedStatusIndicator: React.FC<IQuotedStatusIndicator> = ({ statusId }) => {
+  const getStatus = useCallback(makeGetStatus(), []);
+
+  const status = useAppSelector(state => getStatus(state, { id: statusId }));
+
+  if (!status) return null;
+
+  return (
+    <HStack alignItems='center' space={1}>
+      <Icon className='h-5 w-5' src={require('@tabler/icons/outline/quote.svg')} aria-hidden />
+      <Text truncate>{status.url}</Text>
+    </HStack>
+  );
+};
+
+export default QuotedStatusIndicator;

src/components/quoted-status.tsx

@@ -11,6 +11,7 @@ import { defaultMediaVisibility } from 'soapbox/utils/status';
 
 import EventPreview from './event-preview';
 import OutlineBox from './outline-box';
+import QuotedStatusIndicator from './quoted-status-indicator';
 import StatusContent from './status-content';
 import StatusReplyMentions from './status-reply-mentions';
 import SensitiveContentOverlay from './statuses/sensitive-content-overlay';
@@ -132,6 +133,8 @@ const QuotedStatus: React.FC<IQuotedStatus> = ({ status, onCancel, compose }) =>
                 collapsable
               />
 
+              {status.quote && <QuotedStatusIndicator statusId={status.quote as string} />}
+
               {status.media_attachments.size > 0 && (
                 <StatusMedia
                   status={status}