Status redesign: Add text for follower-only posts (#40467)

app/javascript/mastodon/components/status/redesign/header.tsx

@@ -1,5 +1,7 @@
 import { useId } from 'react';
 
+import { FormattedMessage } from 'react-intl';
+
 import classNames from 'classnames';
 import { Link } from 'react-router-dom';
 
@@ -15,7 +17,10 @@ import { statusLink } from '../utils';
 import classes from './styles.module.scss';
 
 interface StatusRedesignHeaderProps {
-  status: Pick<AccountStatusShape, 'id' | 'account' | 'created_at'>;
+  status: Pick<
+    AccountStatusShape,
+    'id' | 'account' | 'created_at' | 'visibility'
+  >;
   children?: React.ReactNode;
   className?: string;
 }
@@ -40,6 +45,26 @@ export const StatusRedesignHeader: React.FC<StatusRedesignHeaderProps> = ({
     'data-hover-card-reference': 'status',
   };
 
+  let displayName = (
+    <Link
+      {...accountLinkProps}
+      className={classes.headerNameLink}
+      aria-describedby={handleId}
+    >
+      <DisplayName account={account} variant='noDomain' />
+    </Link>
+  );
+  if (status.visibility === 'private') {
+    displayName = (
+      <FormattedMessage
+        id='status.header.to_followers'
+        defaultMessage='{displayName} to Followers'
+        tagName='span'
+        values={{ displayName }}
+      />
+    );
+  }
+
   return (
     <header className={classNames(className, classes.header)}>
       <Link
@@ -53,13 +78,7 @@ export const StatusRedesignHeader: React.FC<StatusRedesignHeaderProps> = ({
 
       <div>
         <p className={classes.headerName}>
-          <Link
-            {...accountLinkProps}
-            className={classes.headerNameLink}
-            aria-describedby={handleId}
-          >
-            <DisplayName account={account} variant='noDomain' />
-          </Link>
+          {displayName}
           &bull;
           <Link
             to={{

app/javascript/mastodon/components/status/redesign/styles.module.scss

@@ -39,16 +39,17 @@
 
   display: flex;
   gap: var(--space-2xs);
+}
 
-  > .headerNameLink {
-    @include mixins.type-body-strong;
+// Overrides .header a
+a.headerNameLink {
+  @include mixins.type-body-strong;
 
-    color: var(--color-text-primary);
+  color: var(--color-text-primary);
 
-    // Overrides .display-name__html
-    strong {
-      font-weight: inherit;
-    }
+  // Overrides .display-name
+  > span {
+    display: inline;
   }
 }
 

app/javascript/mastodon/locales/en.json

@@ -1382,6 +1382,7 @@
   "status.favourite": "Favorite",
   "status.favourites_count": "{count, plural, one {{counter} favorite} other {{counter} favorites}}",
   "status.filter": "Filter this post",
+  "status.header.to_followers": "{displayName} to Followers",
   "status.history.created": "{name} created {date}",
   "status.history.edited": "{name} edited {date}",
   "status.likes_title": "Post Likes",