From e2c101ec35f54a8cf9a3310f4e563749b457cc6a Mon Sep 17 00:00:00 2001
From: Eugen Rochko <eugen@zeonfederated.com>
Date: Mon, 9 Sep 2024 17:28:54 +0200
Subject: [PATCH] [Glitch] Change labels on thread indicators in web UI

Partial port of a021dee64214fcc662c0c36ad4e44dc1deaba65f to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
---
 .../glitch/components/status_prepend.jsx      | 12 +++--
 .../glitch/components/status_thread_label.tsx | 50 +++++++++++++++++++
 .../flavours/glitch/styles/components.scss    | 22 ++++++--
 3 files changed, 75 insertions(+), 9 deletions(-)
 create mode 100644 app/javascript/flavours/glitch/components/status_thread_label.tsx

diff --git a/app/javascript/flavours/glitch/components/status_prepend.jsx b/app/javascript/flavours/glitch/components/status_prepend.jsx
index 4756b36696..b83767a990 100644
--- a/app/javascript/flavours/glitch/components/status_prepend.jsx
+++ b/app/javascript/flavours/glitch/components/status_prepend.jsx
@@ -150,11 +150,13 @@ export default class StatusPrepend extends PureComponent {
 
     return !type ? null : (
       <aside className={type === 'reblogged_by' || type === 'featured' ? 'status__prepend' : 'notification__message'}>
-        <Icon
-          className={`status__prepend-icon ${type === 'favourite' ? 'star-icon' : ''}`}
-          id={iconId}
-          icon={iconComponent}
-        />
+        <div className='status__prepend__icon'>
+          <Icon
+            className={type === 'favourite' ? 'star-icon' : null}
+            id={iconId}
+            icon={iconComponent}
+          />
+        </div>
         <Message />
         {children}
       </aside>
diff --git a/app/javascript/flavours/glitch/components/status_thread_label.tsx b/app/javascript/flavours/glitch/components/status_thread_label.tsx
new file mode 100644
index 0000000000..054156efaa
--- /dev/null
+++ b/app/javascript/flavours/glitch/components/status_thread_label.tsx
@@ -0,0 +1,50 @@
+import { FormattedMessage } from 'react-intl';
+
+import ReplyIcon from '@/material-icons/400-24px/reply.svg?react';
+import { Icon } from 'flavours/glitch/components/icon';
+import { DisplayedName } from 'flavours/glitch/features/notifications_v2/components/displayed_name';
+import { useAppSelector } from 'flavours/glitch/store';
+
+export const StatusThreadLabel: React.FC<{
+  accountId: string;
+  inReplyToAccountId: string;
+}> = ({ accountId, inReplyToAccountId }) => {
+  const inReplyToAccount = useAppSelector((state) =>
+    state.accounts.get(inReplyToAccountId),
+  );
+
+  let label;
+
+  if (accountId === inReplyToAccountId) {
+    label = (
+      <FormattedMessage
+        id='status.continued_thread'
+        defaultMessage='Continued thread'
+      />
+    );
+  } else if (inReplyToAccount) {
+    label = (
+      <FormattedMessage
+        id='status.replied_to'
+        defaultMessage='Replied to {name}'
+        values={{ name: <DisplayedName accountIds={[inReplyToAccountId]} /> }}
+      />
+    );
+  } else {
+    label = (
+      <FormattedMessage
+        id='status.replied_in_thread'
+        defaultMessage='Replied in thread'
+      />
+    );
+  }
+
+  return (
+    <div className='status__prepend'>
+      <div className='status__prepend__icon'>
+        <Icon id='reply' icon={ReplyIcon} />
+      </div>
+      {label}
+    </div>
+  );
+};
diff --git a/app/javascript/flavours/glitch/styles/components.scss b/app/javascript/flavours/glitch/styles/components.scss
index 4ae330d0a5..51d87dbddf 100644
--- a/app/javascript/flavours/glitch/styles/components.scss
+++ b/app/javascript/flavours/glitch/styles/components.scss
@@ -1776,15 +1776,29 @@ body > [data-popper-placement] {
 .status__prepend {
   padding: 8px 14px; // glitch: reduced padding
   padding-bottom: 0;
-  display: inline-flex;
-  gap: 10px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
   font-size: 14px;
   line-height: 22px;
   font-weight: 500;
   color: $dark-text-color;
 
-  .status__display-name strong {
-    color: $dark-text-color;
+  &__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex: 0 0 auto;
+
+    .icon {
+      width: 16px;
+      height: 16px;
+    }
+  }
+
+  a {
+    color: inherit;
+    text-decoration: none;
   }
 
   > span {