From 2c5ba586ff02b999caa40889c5dd4cc8e164592d Mon Sep 17 00:00:00 2001
From: Eugen Rochko <eugen@zeonfederated.com>
Date: Tue, 5 Sep 2023 23:57:03 +0200
Subject: [PATCH] Remove obfuscation of reply count in web UI (#26768)

---
 .../mastodon/components/animated_number.tsx   | 25 +++----------------
 .../mastodon/components/icon_button.tsx       |  4 +--
 .../mastodon/components/status_action_bar.jsx |  2 +-
 .../picture_in_picture/components/footer.jsx  |  2 +-
 4 files changed, 6 insertions(+), 27 deletions(-)

diff --git a/app/javascript/mastodon/components/animated_number.tsx b/app/javascript/mastodon/components/animated_number.tsx
index 05a7e01898..e98e30b242 100644
--- a/app/javascript/mastodon/components/animated_number.tsx
+++ b/app/javascript/mastodon/components/animated_number.tsx
@@ -6,21 +6,10 @@ import { reduceMotion } from '../initial_state';
 
 import { ShortNumber } from './short_number';
 
-const obfuscatedCount = (count: number) => {
-  if (count < 0) {
-    return 0;
-  } else if (count <= 1) {
-    return count;
-  } else {
-    return '1+';
-  }
-};
-
 interface Props {
   value: number;
-  obfuscate?: boolean;
 }
-export const AnimatedNumber: React.FC<Props> = ({ value, obfuscate }) => {
+export const AnimatedNumber: React.FC<Props> = ({ value }) => {
   const [previousValue, setPreviousValue] = useState(value);
   const [direction, setDirection] = useState<1 | -1>(1);
 
@@ -36,11 +25,7 @@ export const AnimatedNumber: React.FC<Props> = ({ value, obfuscate }) => {
   );
 
   if (reduceMotion) {
-    return obfuscate ? (
-      <>{obfuscatedCount(value)}</>
-    ) : (
-      <ShortNumber value={value} />
-    );
+    return <ShortNumber value={value} />;
   }
 
   const styles = [
@@ -67,11 +52,7 @@ export const AnimatedNumber: React.FC<Props> = ({ value, obfuscate }) => {
                 transform: `translateY(${style.y * 100}%)`,
               }}
             >
-              {obfuscate ? (
-                obfuscatedCount(data as number)
-              ) : (
-                <ShortNumber value={data as number} />
-              )}
+              <ShortNumber value={data as number} />
             </span>
           ))}
         </span>
diff --git a/app/javascript/mastodon/components/icon_button.tsx b/app/javascript/mastodon/components/icon_button.tsx
index 9dbee2cc24..da6f19e9ea 100644
--- a/app/javascript/mastodon/components/icon_button.tsx
+++ b/app/javascript/mastodon/components/icon_button.tsx
@@ -24,7 +24,6 @@ interface Props {
   overlay: boolean;
   tabIndex: number;
   counter?: number;
-  obfuscateCount?: boolean;
   href?: string;
   ariaHidden: boolean;
 }
@@ -105,7 +104,6 @@ export class IconButton extends PureComponent<Props, States> {
       tabIndex,
       title,
       counter,
-      obfuscateCount,
       href,
       ariaHidden,
     } = this.props;
@@ -131,7 +129,7 @@ export class IconButton extends PureComponent<Props, States> {
         <Icon id={icon} fixedWidth aria-hidden='true' />{' '}
         {typeof counter !== 'undefined' && (
           <span className='icon-button__counter'>
-            <AnimatedNumber value={counter} obfuscate={obfuscateCount} />
+            <AnimatedNumber value={counter} />
           </span>
         )}
       </>
diff --git a/app/javascript/mastodon/components/status_action_bar.jsx b/app/javascript/mastodon/components/status_action_bar.jsx
index 5d441c10c2..13e6dff74d 100644
--- a/app/javascript/mastodon/components/status_action_bar.jsx
+++ b/app/javascript/mastodon/components/status_action_bar.jsx
@@ -362,7 +362,7 @@ class StatusActionBar extends ImmutablePureComponent {
 
     return (
       <div className='status__action-bar'>
-        <IconButton className='status__action-bar__button' title={replyTitle} icon={status.get('in_reply_to_account_id') === status.getIn(['account', 'id']) ? 'reply' : replyIcon} onClick={this.handleReplyClick} counter={status.get('replies_count')} obfuscateCount />
+        <IconButton className='status__action-bar__button' title={replyTitle} icon={status.get('in_reply_to_account_id') === status.getIn(['account', 'id']) ? 'reply' : replyIcon} onClick={this.handleReplyClick} counter={status.get('replies_count')} />
         <IconButton className={classNames('status__action-bar__button', { reblogPrivate })} disabled={!publicStatus && !reblogPrivate} active={status.get('reblogged')} title={reblogTitle} icon='retweet' onClick={this.handleReblogClick} counter={withCounters ? status.get('reblogs_count') : undefined} />
         <IconButton className='status__action-bar__button star-icon' animate active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} counter={withCounters ? status.get('favourites_count') : undefined} />
         <IconButton className='status__action-bar__button bookmark-icon' disabled={!signedIn} active={status.get('bookmarked')} title={intl.formatMessage(messages.bookmark)} icon='bookmark' onClick={this.handleBookmarkClick} />
diff --git a/app/javascript/mastodon/features/picture_in_picture/components/footer.jsx b/app/javascript/mastodon/features/picture_in_picture/components/footer.jsx
index 0f3244b9c0..587f1f7836 100644
--- a/app/javascript/mastodon/features/picture_in_picture/components/footer.jsx
+++ b/app/javascript/mastodon/features/picture_in_picture/components/footer.jsx
@@ -194,7 +194,7 @@ class Footer extends ImmutablePureComponent {
 
     return (
       <div className='picture-in-picture__footer'>
-        <IconButton className='status__action-bar-button' title={replyTitle} icon={status.get('in_reply_to_account_id') === status.getIn(['account', 'id']) ? 'reply' : replyIcon} onClick={this.handleReplyClick} counter={status.get('replies_count')} obfuscateCount />
+        <IconButton className='status__action-bar-button' title={replyTitle} icon={status.get('in_reply_to_account_id') === status.getIn(['account', 'id']) ? 'reply' : replyIcon} onClick={this.handleReplyClick} counter={status.get('replies_count')} />
         <IconButton className={classNames('status__action-bar-button', { reblogPrivate })} disabled={!publicStatus && !reblogPrivate}  active={status.get('reblogged')} title={reblogTitle} icon='retweet' onClick={this.handleReblogClick} counter={status.get('reblogs_count')} />
         <IconButton className='status__action-bar-button star-icon' animate active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} counter={status.get('favourites_count')} />
         {withOpenButton && <IconButton className='status__action-bar-button' title={intl.formatMessage(messages.open)} icon='external-link' onClick={this.handleOpenClick} href={`/@${status.getIn(['account', 'acct'])}/${status.get('id')}`} />}