From 47d02719579695e950ad436b4f26dd562b7c6367 Mon Sep 17 00:00:00 2001
From: fef <owo@fef.moe>
Date: Wed, 30 Nov 2022 13:20:20 +0000
Subject: [PATCH] make number of displayed reactions a setting

This adds an extra item to the local settings for
specifying the number of reactions shown in toots.
The detailed status view always shows all
reactions.
---
 .env.production.sample                        |  2 +-
 .../flavours/glitch/components/status.js      |  1 +
 .../glitch/components/status_reactions.js     | 23 +++++++++++--------
 .../features/local_settings/page/index.js     | 12 ++++++++++
 .../local_settings/page/item/index.js         | 11 +++++----
 app/javascript/flavours/glitch/locales/de.js  |  3 +++
 app/javascript/flavours/glitch/locales/en.js  |  2 ++
 app/javascript/flavours/glitch/locales/fr.js  |  3 +++
 .../glitch/reducers/local_settings.js         |  1 +
 9 files changed, 42 insertions(+), 16 deletions(-)

diff --git a/.env.production.sample b/.env.production.sample
index 326c2cc409..b604c4b04d 100644
--- a/.env.production.sample
+++ b/.env.production.sample
@@ -270,7 +270,7 @@ MAX_POLL_OPTIONS=5
 MAX_POLL_OPTION_CHARS=100
 
 # Maximum number of emoji reactions per toot and user (minimum 1)
-MAX_REACTIONS=8
+MAX_REACTIONS=1
 
 # Maximum image and video/audio upload sizes
 # Units are in bytes
diff --git a/app/javascript/flavours/glitch/components/status.js b/app/javascript/flavours/glitch/components/status.js
index 70c1a99910..04145a384b 100644
--- a/app/javascript/flavours/glitch/components/status.js
+++ b/app/javascript/flavours/glitch/components/status.js
@@ -808,6 +808,7 @@ class Status extends ImmutablePureComponent {
           <StatusReactions
             statusId={status.get('id')}
             reactions={status.get('reactions')}
+            numVisible={settings.get('num_visible_reactions')}
             addReaction={this.props.onReactionAdd}
             removeReaction={this.props.onReactionRemove}
             emojiMap={this.props.emojiMap}
diff --git a/app/javascript/flavours/glitch/components/status_reactions.js b/app/javascript/flavours/glitch/components/status_reactions.js
index cc85a0189a..39956270a4 100644
--- a/app/javascript/flavours/glitch/components/status_reactions.js
+++ b/app/javascript/flavours/glitch/components/status_reactions.js
@@ -1,7 +1,7 @@
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import { maxReactions, reduceMotion } from '../initial_state';
+import { reduceMotion } from '../initial_state';
 import spring from 'react-motion/lib/spring';
 import TransitionMotion from 'react-motion/lib/TransitionMotion';
 import classNames from 'classnames';
@@ -16,16 +16,12 @@ export default class StatusReactions extends ImmutablePureComponent {
   static propTypes = {
     statusId: PropTypes.string.isRequired,
     reactions: ImmutablePropTypes.list.isRequired,
+    numVisible: PropTypes.number,
     addReaction: PropTypes.func.isRequired,
     removeReaction: PropTypes.func.isRequired,
     emojiMap: ImmutablePropTypes.map.isRequired,
   };
 
-  handleEmojiPick = data => {
-    const { addReaction, statusId } = this.props;
-    addReaction(statusId, data.native.replace(/:/g, ''));
-  }
-
   willEnter() {
     return { scale: reduceMotion ? 1 : 0 };
   }
@@ -35,11 +31,18 @@ export default class StatusReactions extends ImmutablePureComponent {
   }
 
   render() {
-    const { reactions } = this.props;
-    const visibleReactions = reactions
+    const { reactions, numVisible } = this.props;
+    let visibleReactions = reactions
       .filter(x => x.get('count') > 0)
-      .sort((a, b) => b.get('count') - a.get('count'))
-      .filter((_, i) => i < maxReactions);
+      .sort((a, b) => b.get('count') - a.get('count'));
+
+    // numVisible might be NaN because it's pulled from local settings
+    // which doesn't do a whole lot of input validation, but that's okay
+    // because  NaN >= 0  evaluates false.
+    // Still, this should be improved at some point.
+    if (numVisible >= 0) {
+      visibleReactions = visibleReactions.filter((_, i) => i < numVisible);
+    }
 
     const styles = visibleReactions.map(reaction => ({
       key: reaction.get('name'),
diff --git a/app/javascript/flavours/glitch/features/local_settings/page/index.js b/app/javascript/flavours/glitch/features/local_settings/page/index.js
index d01eec811e..e88e50b674 100644
--- a/app/javascript/flavours/glitch/features/local_settings/page/index.js
+++ b/app/javascript/flavours/glitch/features/local_settings/page/index.js
@@ -29,6 +29,8 @@ const messages = defineMessages({
   rewrite_mentions_username: { id: 'settings.rewrite_mentions_username', defaultMessage:  'Rewrite with username' },
   pop_in_left: { id: 'settings.pop_in_left', defaultMessage: 'Left' },
   pop_in_right: { id: 'settings.pop_in_right', defaultMessage:  'Right' },
+  visible_reactions_count: { id: 'settings.visible_reactions_count', defaultMessage: 'Number of visible reactions' },
+  enter_amount_prompt: { id: 'settings.enter_amount_prompt', defaultMessage: 'Enter an amount' },
 });
 
 export default @injectIntl
@@ -92,6 +94,16 @@ class LocalSettingsPage extends React.PureComponent {
         >
           <FormattedMessage id='settings.rewrite_mentions' defaultMessage='Rewrite mentions in displayed statuses' />
         </LocalSettingsPageItem>
+        <LocalSettingsPageItem
+          settings={settings}
+          item={['num_visible_reactions']}
+          id='mastodon-settings--num_visible_reactions'
+          onChange={onChange}
+          placeholder={intl.formatMessage(messages.enter_amount_prompt)}
+          number
+        >
+          <FormattedMessage id='settings.num_visible_reactions' defaultMessage='Number of visible reaction badges:' />
+        </LocalSettingsPageItem>
         <section>
           <h2><FormattedMessage id='settings.notifications_opts' defaultMessage='Notifications options' /></h2>
           <LocalSettingsPageItem
diff --git a/app/javascript/flavours/glitch/features/local_settings/page/item/index.js b/app/javascript/flavours/glitch/features/local_settings/page/item/index.js
index 6b24e41435..966fc5c1ee 100644
--- a/app/javascript/flavours/glitch/features/local_settings/page/item/index.js
+++ b/app/javascript/flavours/glitch/features/local_settings/page/item/index.js
@@ -21,20 +21,21 @@ export default class LocalSettingsPageItem extends React.PureComponent {
     })),
     settings: ImmutablePropTypes.map.isRequired,
     placeholder: PropTypes.string,
+    number: PropTypes.bool,
     disabled: PropTypes.bool,
   };
 
   handleChange = e => {
     const { target } = e;
-    const { item, onChange, options, placeholder } = this.props;
+    const { item, onChange, options, placeholder, number } = this.props;
     if (options && options.length > 0) onChange(item, target.value);
-    else if (placeholder) onChange(item, target.value);
+    else if (placeholder) onChange(item, number ? parseInt(target.value) : target.value);
     else onChange(item, target.checked);
   }
 
   render () {
     const { handleChange } = this;
-    const { settings, item, id, options, children, dependsOn, dependsOnNot, placeholder, disabled } = this.props;
+    const { settings, item, id, options, children, dependsOn, dependsOnNot, placeholder, number, disabled } = this.props;
     let enabled = !disabled;
 
     if (dependsOn) {
@@ -76,7 +77,7 @@ export default class LocalSettingsPageItem extends React.PureComponent {
           </fieldset>
         </div>
       );
-    } else if (placeholder) {
+    } else if (placeholder || number) {
       return (
         <div className='glitch local-settings__page__item string'>
           <label htmlFor={id}>
@@ -84,7 +85,7 @@ export default class LocalSettingsPageItem extends React.PureComponent {
             <p>
               <input
                 id={id}
-                type='text'
+                type={number ? 'number' : 'text'}
                 value={settings.getIn(item)}
                 placeholder={placeholder}
                 onChange={handleChange}
diff --git a/app/javascript/flavours/glitch/locales/de.js b/app/javascript/flavours/glitch/locales/de.js
index a4daa59495..18eb398d84 100644
--- a/app/javascript/flavours/glitch/locales/de.js
+++ b/app/javascript/flavours/glitch/locales/de.js
@@ -6,6 +6,9 @@ const messages = {
 
   'tooltips.reactions': 'Reaktionen',
 
+  'settings.enter_amount_prompt': 'Gib eine Zahl ein',
+  'settings.num_visible_reactions': 'Anzahl sichtbarer Reaktionen',
+
   'status.react': 'Reagieren',
 };
 
diff --git a/app/javascript/flavours/glitch/locales/en.js b/app/javascript/flavours/glitch/locales/en.js
index f6918fc4a5..54a4c2940c 100644
--- a/app/javascript/flavours/glitch/locales/en.js
+++ b/app/javascript/flavours/glitch/locales/en.js
@@ -47,6 +47,7 @@ const messages = {
   'settings.collapsed_statuses': 'Collapsed toots',
   'settings.enable_collapsed': 'Enable collapsed toots',
   'settings.enable_collapsed_hint': 'Collapsed posts have parts of their contents hidden to take up less screen space. This is distinct from the Content Warning feature',
+  'settings.enter_amount_prompt': 'Enter an amount',
   'settings.general': 'General',
   'settings.compose_box_opts': 'Compose box',
   'settings.side_arm': 'Secondary toot button:',
@@ -104,6 +105,7 @@ const messages = {
   'settings.media_letterbox': 'Letterbox media',
   'settings.media_letterbox_hint': 'Scale down and letterbox media to fill the image containers instead of stretching and cropping them',
   'settings.media_fullwidth': 'Full-width media previews',
+  'settings.num_visible_reactions': 'Number of visible reactions',
   'settings.inline_preview_cards': 'Inline preview cards for external links',
   'settings.media_reveal_behind_cw': 'Reveal sensitive media behind a CW by default',
   'settings.pop_in_player': 'Enable pop-in player',
diff --git a/app/javascript/flavours/glitch/locales/fr.js b/app/javascript/flavours/glitch/locales/fr.js
index 3ebe055e0f..802c71896e 100644
--- a/app/javascript/flavours/glitch/locales/fr.js
+++ b/app/javascript/flavours/glitch/locales/fr.js
@@ -6,6 +6,9 @@ const messages = {
 
   'tooltips.reactions': 'Réactions',
 
+  'settings.enter_amount_prompt': 'Entrez un montant',
+  'settings.num_visible_reactions': 'Nombre de réactions visibles',
+
   'status.react': 'Réagir',
 };
 
diff --git a/app/javascript/flavours/glitch/reducers/local_settings.js b/app/javascript/flavours/glitch/reducers/local_settings.js
index 81ab1cb0d8..9a5e022061 100644
--- a/app/javascript/flavours/glitch/reducers/local_settings.js
+++ b/app/javascript/flavours/glitch/reducers/local_settings.js
@@ -23,6 +23,7 @@ const initialState = ImmutableMap({
   show_content_type_choice: false,
   tag_misleading_links: true,
   rewrite_mentions: 'no',
+  num_visible_reactions: 6,
   content_warnings : ImmutableMap({
     filter       : null,
     media_outside: false,