Add mention placeholders back

glitch-soc · Dec 28, 2024 · a338368 · a338368
1 parent 7236d1a
commit a338368
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 2 deletions.
diff --git a/app/javascript/flavours/glitch/components/mentions_placeholder.jsx 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,
+};
+
diff --git 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
@@ -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