From afdd5cc9a2315142a92b3b9324d42896b00626ea Mon Sep 17 00:00:00 2001
From: Claire <claire.github-309c@sitedethib.com>
Date: Sat, 28 Dec 2024 20:58:22 +0100
Subject: [PATCH] Add mention placeholders back

---
 .../components/mentions_placeholder.jsx       | 29 +++++++++++++++++++
 .../flavours/glitch/components/status.jsx     |  5 +++-
 .../status/components/detailed_status.tsx     |  5 +++-
 3 files changed, 37 insertions(+), 2 deletions(-)
 create mode 100644 app/javascript/flavours/glitch/components/mentions_placeholder.jsx

diff --git a/app/javascript/flavours/glitch/components/mentions_placeholder.jsx b/app/javascript/flavours/glitch/components/mentions_placeholder.jsx
new file mode 100644
index 00000000000000..dde4d77a8494db
--- /dev/null
+++ b/app/javascript/flavours/glitch/components/mentions_placeholder.jsx
@@ -0,0 +1,29 @@
+import ImmutablePropTypes from 'react-immutable-proptypes';
+
+import { Permalink } from 'flavours/glitch/components/permalink';
+
+export const MentionsPlaceholder = ({ status }) => {
+  if (status.get('spoiler_text').length === 0 || !status.get('mentions')) {
+    return null;
+  }
+
+  return (
+    <div className='status__content'>
+      {status.get('mentions').map(item => (
+        <Permalink
+          to={`/@${item.get('acct')}`}
+          href={item.get('url')}
+          key={item.get('id')}
+          className='mention'
+        >
+          @<span>{item.get('username')}</span>
+        </Permalink>
+      )).reduce((aggregate, item) => [...aggregate, item, ' '], [])}
+    </div>
+  );
+};
+
+MentionsPlaceholder.propTypes = {
+  status: ImmutablePropTypes.map.isRequired,
+};
+  
\ No newline at end of file
diff --git a/app/javascript/flavours/glitch/components/status.jsx b/app/javascript/flavours/glitch/components/status.jsx
index 276fff6ada244f..f45b41e9238e4f 100644
--- a/app/javascript/flavours/glitch/components/status.jsx
+++ b/app/javascript/flavours/glitch/components/status.jsx
@@ -28,6 +28,7 @@ import { Avatar } from './avatar';
 import { AvatarOverlay } from './avatar_overlay';
 import { DisplayName } from './display_name';
 import { getHashtagBarForStatus } from './hashtag_bar';
+import { MentionsPlaceholder } from './mentions_placeholder';
 import { Permalink } from './permalink';
 import StatusActionBar from './status_action_bar';
 import StatusContent from './status_content';
@@ -698,7 +699,6 @@ class Status extends ImmutablePureComponent {
 
             {status.get('spoiler_text').length > 0 && <ContentWarning text={status.getIn(['translation', 'spoilerHtml']) || status.get('spoilerHtml')} expanded={expanded} onClick={this.handleExpandedToggle} icons={mediaIcons} />}
 
-            { /* TODO: mention placeholders */ }
             {expanded && (
               <>
                 <StatusContent
@@ -718,6 +718,9 @@ class Status extends ImmutablePureComponent {
               </>
             )}
 
+            {/* This is a glitch-soc addition to have a placeholder */}
+            {!expanded && <MentionsPlaceholder status={status} />}
+
             <StatusActionBar
               status={status}
               account={status.get('account')}
diff --git a/app/javascript/flavours/glitch/features/status/components/detailed_status.tsx b/app/javascript/flavours/glitch/features/status/components/detailed_status.tsx
index fd1694ace337f9..4099ec5a82352e 100644
--- a/app/javascript/flavours/glitch/features/status/components/detailed_status.tsx
+++ b/app/javascript/flavours/glitch/features/status/components/detailed_status.tsx
@@ -18,6 +18,7 @@ import EditedTimestamp from 'flavours/glitch/components/edited_timestamp';
 import type { StatusLike } from 'flavours/glitch/components/hashtag_bar';
 import { getHashtagBarForStatus } from 'flavours/glitch/components/hashtag_bar';
 import { IconLogo } from 'flavours/glitch/components/logo';
+import { MentionsPlaceholder } from 'flavours/glitch/components/mentions_placeholder';
 import { Permalink } from 'flavours/glitch/components/permalink';
 import PictureInPicturePlaceholder from 'flavours/glitch/components/picture_in_picture_placeholder';
 import { VisibilityIcon } from 'flavours/glitch/components/visibility_icon';
@@ -364,7 +365,6 @@ export const DetailedStatus: React.FC<{
           />
         )}
 
-        {/* TODO: mention placeholders */}
         {expanded && (
           <>
             <StatusContent
@@ -380,6 +380,9 @@ export const DetailedStatus: React.FC<{
           </>
         )}
 
+        {/* This is a glitch-soc addition to have a placeholder */}
+        {!expanded && <MentionsPlaceholder status={status} />}
+
         <div className='detailed-status__meta'>
           <div className='detailed-status__meta__line'>
             <a