From a75a3cdc378292bc2a672b2192faa6d6f3633dce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Thu, 4 Apr 2024 00:30:57 +0200
Subject: [PATCH] Indicate that quoted post quotes another post
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 src/components/quoted-status-indicator.tsx | 27 ++++++++++++++++++++++
 src/components/quoted-status.tsx           |  3 +++
 2 files changed, 30 insertions(+)
 create mode 100644 src/components/quoted-status-indicator.tsx

diff --git a/src/components/quoted-status-indicator.tsx b/src/components/quoted-status-indicator.tsx
new file mode 100644
index 000000000..493db5f19
--- /dev/null
+++ b/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;
diff --git a/src/components/quoted-status.tsx b/src/components/quoted-status.tsx
index edbca1457..b90e753e6 100644
--- a/src/components/quoted-status.tsx
+++ b/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}