From 7facf831e12909e6827641af098250f2b04eea76 Mon Sep 17 00:00:00 2001
From: fef <owo@fef.moe>
Date: Thu, 24 Nov 2022 11:50:32 +0000
Subject: [PATCH 01/48] add backend support for status emoji reactions

turns out we can just reuse the code for
announcement reactions.
---
 .../api/v1/statuses/reactions_controller.rb   | 29 +++++++++++++++++++
 app/models/status.rb                          | 16 ++++++++++
 app/models/status_reaction.rb                 | 29 +++++++++++++++++++
 app/serializers/rest/status_serializer.rb     |  5 ++++
 app/validators/status_reaction_validator.rb   | 28 ++++++++++++++++++
 config/routes.rb                              |  1 +
 .../20221124114030_create_status_reactions.rb | 14 +++++++++
 .../fabricators/status_reaction_fabricator.rb |  6 ++++
 spec/models/status_reaction_spec.rb           |  5 ++++
 9 files changed, 133 insertions(+)
 create mode 100644 app/controllers/api/v1/statuses/reactions_controller.rb
 create mode 100644 app/models/status_reaction.rb
 create mode 100644 app/validators/status_reaction_validator.rb
 create mode 100644 db/migrate/20221124114030_create_status_reactions.rb
 create mode 100644 spec/fabricators/status_reaction_fabricator.rb
 create mode 100644 spec/models/status_reaction_spec.rb

diff --git a/app/controllers/api/v1/statuses/reactions_controller.rb b/app/controllers/api/v1/statuses/reactions_controller.rb
new file mode 100644
index 0000000000..9a1bf57079
--- /dev/null
+++ b/app/controllers/api/v1/statuses/reactions_controller.rb
@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+class Api::V1::Statuses::ReactionsController < Api::BaseController
+  before_action -> { doorkeeper_authorize! :write, :'write:favourites' }
+  before_action :require_user!
+
+  before_action :set_status
+  before_action :set_reaction, except: :update
+
+  def update
+    @status.status_reactions.create!(account: current_account, name: params[:id])
+    render_empty
+  end
+
+  def destroy
+    @reaction.destroy!
+    render_empty
+  end
+
+  private
+
+  def set_reaction
+    @reaction = @status.status_reactions.where(account: current_account).find_by!(name: params[:id])
+  end
+
+  def set_status
+    @status = Status.find(params[:status_id])
+  end
+end
diff --git a/app/models/status.rb b/app/models/status.rb
index 6cfe19d238..64f95f3d05 100644
--- a/app/models/status.rb
+++ b/app/models/status.rb
@@ -71,6 +71,7 @@ class Status < ApplicationRecord
   has_many :mentioned_accounts, through: :mentions, source: :account, class_name: 'Account'
   has_many :active_mentions, -> { active }, class_name: 'Mention', inverse_of: :status
   has_many :media_attachments, dependent: :nullify
+  has_many :status_reactions, dependent: :destroy
 
   has_and_belongs_to_many :tags
   has_and_belongs_to_many :preview_cards
@@ -263,6 +264,21 @@ class Status < ApplicationRecord
     @emojis = CustomEmoji.from_text(fields.join(' '), account.domain)
   end
 
+  def reactions(account = nil)
+    records = begin
+      scope = status_reactions.group(:status_id, :name, :custom_emoji_id).order(Arel.sql('MIN(created_at) ASC'))
+
+      if account.nil?
+        scope.select('name, custom_emoji_id, count(*) as count, false as me')
+      else
+        scope.select("name, custom_emoji_id, count(*) as count, exists(select 1 from status_reactions r where r.account_id = #{account.id} and r.status_id = status_reactions.status_id and r.name = status_reactions.name) as me")
+      end
+    end
+
+    ActiveRecord::Associations::Preloader.new.preload(records, :custom_emoji)
+    records
+  end
+
   def ordered_media_attachments
     if ordered_media_attachment_ids.nil?
       media_attachments
diff --git a/app/models/status_reaction.rb b/app/models/status_reaction.rb
new file mode 100644
index 0000000000..32cb9edd4a
--- /dev/null
+++ b/app/models/status_reaction.rb
@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+# == Schema Information
+#
+# Table name: status_reactions
+#
+#  id              :bigint(8)        not null, primary key
+#  account_id      :bigint(8)        not null
+#  status_id       :bigint(8)        not null
+#  name            :string           default(""), not null
+#  custom_emoji_id :bigint(8)
+#  created_at      :datetime         not null
+#  updated_at      :datetime         not null
+#
+class StatusReaction < ApplicationRecord
+  belongs_to :account
+  belongs_to :status, inverse_of: :status_reactions
+  belongs_to :custom_emoji, optional: true
+
+  validates :name, presence: true
+  validates_with StatusReactionValidator
+
+  before_validation :set_custom_emoji
+
+  private
+
+  def set_custom_emoji
+    self.custom_emoji = CustomEmoji.local.find_by(disabled: false, shortcode: name) if name.present?
+  end
+end
diff --git a/app/serializers/rest/status_serializer.rb b/app/serializers/rest/status_serializer.rb
index 659c45b835..43c1e86aff 100644
--- a/app/serializers/rest/status_serializer.rb
+++ b/app/serializers/rest/status_serializer.rb
@@ -28,6 +28,7 @@ class REST::StatusSerializer < ActiveModel::Serializer
   has_many :ordered_mentions, key: :mentions
   has_many :tags
   has_many :emojis, serializer: REST::CustomEmojiSerializer
+  has_many :reactions, serializer: REST::ReactionSerializer
 
   has_one :preview_card, key: :card, serializer: REST::PreviewCardSerializer
   has_one :preloadable_poll, key: :poll, serializer: REST::PollSerializer
@@ -146,6 +147,10 @@ class REST::StatusSerializer < ActiveModel::Serializer
     object.active_mentions.to_a.sort_by(&:id)
   end
 
+  def reactions
+    object.reactions(current_user&.account)
+  end
+
   class ApplicationSerializer < ActiveModel::Serializer
     attributes :name, :website
 
diff --git a/app/validators/status_reaction_validator.rb b/app/validators/status_reaction_validator.rb
new file mode 100644
index 0000000000..7c1c6983bb
--- /dev/null
+++ b/app/validators/status_reaction_validator.rb
@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+class StatusReactionValidator < ActiveModel::Validator
+  SUPPORTED_EMOJIS = Oj.load_file(Rails.root.join('app', 'javascript', 'mastodon', 'features', 'emoji', 'emoji_map.json').to_s).keys.freeze
+
+  LIMIT = 8
+
+  def validate(reaction)
+    return if reaction.name.blank?
+
+    reaction.errors.add(:name, I18n.t('reactions.errors.unrecognized_emoji')) if reaction.custom_emoji_id.blank? && !unicode_emoji?(reaction.name)
+    reaction.errors.add(:base, I18n.t('reactions.errors.limit_reached')) if new_reaction?(reaction) && limit_reached?(reaction)
+  end
+
+  private
+
+  def unicode_emoji?(name)
+    SUPPORTED_EMOJIS.include?(name)
+  end
+
+  def new_reaction?(reaction)
+    !reaction.status.status_reactions.where(name: reaction.name).exists?
+  end
+
+  def limit_reached?(reaction)
+    reaction.status.status_reactions.where.not(name: reaction.name).count('distinct name') >= LIMIT
+  end
+end
diff --git a/config/routes.rb b/config/routes.rb
index 8639f0ef53..da4ddfa200 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -453,6 +453,7 @@ Rails.application.routes.draw do
 
           resource :history, only: :show
           resource :source, only: :show
+          resources :reactions, only: [:update, :destroy]
 
           post :translate, to: 'translations#create'
         end
diff --git a/db/migrate/20221124114030_create_status_reactions.rb b/db/migrate/20221124114030_create_status_reactions.rb
new file mode 100644
index 0000000000..bbf1f3376a
--- /dev/null
+++ b/db/migrate/20221124114030_create_status_reactions.rb
@@ -0,0 +1,14 @@
+class CreateStatusReactions < ActiveRecord::Migration[6.1]
+  def change
+    create_table :status_reactions do |t|
+      t.references :account, null: false, foreign_key: true
+      t.references :status, null: false, foreign_key: true
+      t.string :name, null: false, default: ''
+      t.references :custom_emoji, null: true, foreign_key: true
+
+      t.timestamps
+    end
+
+    add_index :status_reactions, [:account_id, :status_id, :name], unique: true, name: :index_status_reactions_on_account_id_and_status_id
+  end
+end
diff --git a/spec/fabricators/status_reaction_fabricator.rb b/spec/fabricators/status_reaction_fabricator.rb
new file mode 100644
index 0000000000..3d4b93efe0
--- /dev/null
+++ b/spec/fabricators/status_reaction_fabricator.rb
@@ -0,0 +1,6 @@
+Fabricator(:status_reaction) do
+  account      nil
+  status       nil
+  name         "MyString"
+  custom_emoji nil
+end
\ No newline at end of file
diff --git a/spec/models/status_reaction_spec.rb b/spec/models/status_reaction_spec.rb
new file mode 100644
index 0000000000..18860318cc
--- /dev/null
+++ b/spec/models/status_reaction_spec.rb
@@ -0,0 +1,5 @@
+require 'rails_helper'
+
+RSpec.describe StatusReaction, type: :model do
+  pending "add some examples to (or delete) #{__FILE__}"
+end

From dcea57a80833bf5ae6308879aeddf52f8bb9276c Mon Sep 17 00:00:00 2001
From: fef <owo@fef.moe>
Date: Thu, 24 Nov 2022 17:30:52 +0000
Subject: [PATCH 02/48] add frontend for emoji reactions

this is still pretty bare bones but hey, it works.
---
 .../flavours/glitch/actions/interactions.js   |  85 +++++++++
 .../flavours/glitch/components/status.js      |  12 ++
 .../glitch/components/status_reactions_bar.js | 177 ++++++++++++++++++
 .../glitch/containers/status_container.js     |  16 +-
 .../flavours/glitch/reducers/statuses.js      |  44 +++++
 5 files changed, 333 insertions(+), 1 deletion(-)
 create mode 100644 app/javascript/flavours/glitch/components/status_reactions_bar.js

diff --git a/app/javascript/flavours/glitch/actions/interactions.js b/app/javascript/flavours/glitch/actions/interactions.js
index 225ee7eb2a..ab275621c2 100644
--- a/app/javascript/flavours/glitch/actions/interactions.js
+++ b/app/javascript/flavours/glitch/actions/interactions.js
@@ -41,6 +41,16 @@ export const UNBOOKMARK_REQUEST = 'UNBOOKMARKED_REQUEST';
 export const UNBOOKMARK_SUCCESS = 'UNBOOKMARKED_SUCCESS';
 export const UNBOOKMARK_FAIL    = 'UNBOOKMARKED_FAIL';
 
+export const STATUS_REACTION_UPDATE = 'STATUS_REACTION_UPDATE';
+
+export const STATUS_REACTION_ADD_REQUEST = 'STATUS_REACTION_ADD_REQUEST';
+export const STATUS_REACTION_ADD_SUCCESS = 'STATUS_REACTION_ADD_SUCCESS';
+export const STATUS_REACTION_ADD_FAIL    = 'STATUS_REACTION_ADD_FAIL';
+
+export const STATUS_REACTION_REMOVE_REQUEST = 'STATUS_REACTION_REMOVE_REQUEST';
+export const STATUS_REACTION_REMOVE_SUCCESS = 'STATUS_REACTION_REMOVE_SUCCESS';
+export const STATUS_REACTION_REMOVE_FAIL    = 'STATUS_REACTION_REMOVE_FAIL';
+
 export function reblog(status, visibility) {
   return function (dispatch, getState) {
     dispatch(reblogRequest(status));
@@ -392,3 +402,78 @@ export function unpinFail(status, error) {
     error,
   };
 };
+
+export const statusAddReaction = (statusId, name) => (dispatch, getState) => {
+  const status = getState().get('statuses').get(statusId);
+  let alreadyAdded = false;
+  if (status) {
+    const reaction = status.get('reactions').find(x => x.get('name') === name);
+    if (reaction && reaction.get('me')) {
+      alreadyAdded = true;
+    }
+  }
+  if (!alreadyAdded) {
+    dispatch(statusAddReactionRequest(statusId, name, alreadyAdded));
+  }
+
+  api(getState).put(`/api/v1/statuses/${statusId}/reactions/${name}`).then(() => {
+    dispatch(statusAddReactionSuccess(statusId, name, alreadyAdded));
+  }).catch(err => {
+    if (!alreadyAdded) {
+      dispatch(statusAddReactionFail(statusId, name, err));
+    }
+  });
+};
+
+export const statusAddReactionRequest = (statusId, name) => ({
+  type: STATUS_REACTION_ADD_REQUEST,
+  id: statusId,
+  name,
+  skipLoading: true,
+});
+
+export const statusAddReactionSuccess = (statusId, name) => ({
+  type: STATUS_REACTION_ADD_SUCCESS,
+  id: statusId,
+  name,
+  skipLoading: true,
+});
+
+export const statusAddReactionFail = (statusId, name, error) => ({
+  type: STATUS_REACTION_ADD_FAIL,
+  id: statusId,
+  name,
+  error,
+  skipLoading: true,
+});
+
+export const statusRemoveReaction = (statusId, name) => (dispatch, getState) => {
+  dispatch(statusRemoveReactionRequest(statusId, name));
+
+  api(getState).delete(`/api/v1/statuses/${statusId}/reactions/${name}`).then(() => {
+    dispatch(statusRemoveReactionSuccess(statusId, name));
+  }).catch(err => {
+    dispatch(statusRemoveReactionFail(statusId, name, err));
+  });
+};
+
+export const statusRemoveReactionRequest = (statusId, name) => ({
+  type: STATUS_REACTION_REMOVE_REQUEST,
+  id: statusId,
+  name,
+  skipLoading: true,
+});
+
+export const statusRemoveReactionSuccess = (statusId, name) => ({
+  type: STATUS_REACTION_REMOVE_SUCCESS,
+  id: statusId,
+  name,
+  skipLoading: true,
+});
+
+export const statusRemoveReactionFail = (statusId, name) => ({
+  type: STATUS_REACTION_REMOVE_FAIL,
+  id: statusId,
+  name,
+  skipLoading: true,
+});
diff --git a/app/javascript/flavours/glitch/components/status.js b/app/javascript/flavours/glitch/components/status.js
index 4041b48194..31b234ef30 100644
--- a/app/javascript/flavours/glitch/components/status.js
+++ b/app/javascript/flavours/glitch/components/status.js
@@ -6,6 +6,7 @@ import StatusHeader from './status_header';
 import StatusIcons from './status_icons';
 import StatusContent from './status_content';
 import StatusActionBar from './status_action_bar';
+import StatusReactionsBar from './status_reactions_bar';
 import AttachmentList from './attachment_list';
 import Card from '../features/status/components/card';
 import { injectIntl, FormattedMessage } from 'react-intl';
@@ -75,6 +76,8 @@ class Status extends ImmutablePureComponent {
     onDelete: PropTypes.func,
     onDirect: PropTypes.func,
     onMention: PropTypes.func,
+    onReactionAdd: PropTypes.func,
+    onReactionRemove: PropTypes.func,
     onPin: PropTypes.func,
     onOpenMedia: PropTypes.func,
     onOpenVideo: PropTypes.func,
@@ -102,6 +105,7 @@ class Status extends ImmutablePureComponent {
     scrollKey: PropTypes.string,
     deployPictureInPicture: PropTypes.func,
     settings: ImmutablePropTypes.map.isRequired,
+    emojiMap: ImmutablePropTypes.map.isRequired,
     pictureInPicture: PropTypes.shape({
       inUse: PropTypes.bool,
       available: PropTypes.bool,
@@ -800,6 +804,14 @@ class Status extends ImmutablePureComponent {
             rewriteMentions={settings.get('rewrite_mentions')}
           />
 
+          <StatusReactionsBar
+            statusId={status.get('id')}
+            reactions={status.get('reactions')}
+            addReaction={this.props.onReactionAdd}
+            removeReaction={this.props.onReactionRemove}
+            emojiMap={this.props.emojiMap}
+          />
+
           {!isCollapsed || !(muted || !settings.getIn(['collapsed', 'show_action_bar'])) ? (
             <StatusActionBar
               status={status}
diff --git a/app/javascript/flavours/glitch/components/status_reactions_bar.js b/app/javascript/flavours/glitch/components/status_reactions_bar.js
new file mode 100644
index 0000000000..db1905be4f
--- /dev/null
+++ b/app/javascript/flavours/glitch/components/status_reactions_bar.js
@@ -0,0 +1,177 @@
+import ImmutablePureComponent from 'react-immutable-pure-component';
+import PropTypes from 'prop-types';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import { reduceMotion } from '../initial_state';
+import spring from 'react-motion/lib/spring';
+import TransitionMotion from 'react-motion/lib/TransitionMotion';
+import classNames from 'classnames';
+import EmojiPickerDropdown from '../features/compose/containers/emoji_picker_dropdown_container';
+import Icon from './icon';
+import React from 'react';
+import unicodeMapping from '../features/emoji/emoji_unicode_mapping_light';
+import AnimatedNumber from './animated_number';
+import { assetHost } from '../utils/config';
+import { autoPlayGif } from '../initial_state';
+
+export default class StatusReactionsBar extends ImmutablePureComponent {
+
+  static propTypes = {
+    statusId: PropTypes.string.isRequired,
+    reactions: ImmutablePropTypes.list.isRequired,
+    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 };
+  }
+
+  willLeave() {
+    return { scale: reduceMotion ? 0 : spring(0, { stiffness: 170, damping: 26 }) };
+  }
+
+  render() {
+    const { reactions } = this.props;
+    const visibleReactions = reactions.filter(x => x.get('count') > 0);
+
+    const styles = visibleReactions.map(reaction => ({
+      key: reaction.get('name'),
+      data: reaction,
+      style: { scale: reduceMotion ? 1 : spring(1, { stiffness: 150, damping: 13 }) },
+    })).toArray();
+
+    return (
+      <TransitionMotion styles={styles} willEnter={this.willEnter} willLeave={this.willLeave}>
+        {items => (
+          <div className={classNames('reactions-bar', { 'reactions-bar--empty': visibleReactions.isEmpty() })}>
+            {items.map(({ key, data, style }) => (
+              <Reaction
+                key={key}
+                statusId={this.props.statusId}
+                reaction={data}
+                style={{ transform: `scale(${style.scale})`, position: style.scale < 0.5 ? 'absolute' : 'static' }}
+                addReaction={this.props.addReaction}
+                removeReaction={this.props.removeReaction}
+                emojiMap={this.props.emojiMap}
+              />
+            ))}
+
+            {visibleReactions.size < 8 && <EmojiPickerDropdown onPickEmoji={this.handleEmojiPick} button={<Icon id='plus' />} />}
+          </div>
+        )}
+      </TransitionMotion>
+    );
+  }
+
+}
+
+class Reaction extends ImmutablePureComponent {
+
+  static propTypes = {
+    statusId: PropTypes.string,
+    reaction: ImmutablePropTypes.map.isRequired,
+    addReaction: PropTypes.func.isRequired,
+    removeReaction: PropTypes.func.isRequired,
+    emojiMap: ImmutablePropTypes.map.isRequired,
+    style: PropTypes.object,
+  };
+
+  state = {
+    hovered: false,
+  };
+
+  handleClick = () => {
+    const { reaction, statusId, addReaction, removeReaction } = this.props;
+
+    if (reaction.get('me')) {
+      removeReaction(statusId, reaction.get('name'));
+    } else {
+      addReaction(statusId, reaction.get('name'));
+    }
+  }
+
+  handleMouseEnter = () => this.setState({ hovered: true })
+
+  handleMouseLeave = () => this.setState({ hovered: false })
+
+  render() {
+    const { reaction } = this.props;
+
+    let shortCode = reaction.get('name');
+
+    if (unicodeMapping[shortCode]) {
+      shortCode = unicodeMapping[shortCode].shortCode;
+    }
+
+    return (
+      <button
+        className={classNames('reactions-bar__item', { active: reaction.get('me') })}
+        onClick={this.handleClick}
+        onMouseEnter={this.handleMouseEnter}
+        onMouseLeave={this.handleMouseLeave}
+        title={`:${shortCode}:`}
+        style={this.props.style}
+      >
+        <span className='reactions-bar__item__emoji'>
+          <Emoji hovered={this.state.hovered} emoji={reaction.get('name')} emojiMap={this.props.emojiMap} />
+        </span>
+        <span className='reactions-bar__item__count'>
+          <AnimatedNumber value={reaction.get('count')} />
+        </span>
+      </button>
+    );
+  }
+
+}
+
+class Emoji extends React.PureComponent {
+
+  static propTypes = {
+    emoji: PropTypes.string.isRequired,
+    emojiMap: ImmutablePropTypes.map.isRequired,
+    hovered: PropTypes.bool.isRequired,
+  };
+
+  render() {
+    const { emoji, emojiMap, hovered } = this.props;
+
+    if (unicodeMapping[emoji]) {
+      const { filename, shortCode } = unicodeMapping[this.props.emoji];
+      const title = shortCode ? `:${shortCode}:` : '';
+
+      return (
+        <img
+          draggable='false'
+          className='emojione'
+          alt={emoji}
+          title={title}
+          src={`${assetHost}/emoji/${filename}.svg`}
+        />
+      );
+    } else if (emojiMap.get(emoji)) {
+      const filename = (autoPlayGif || hovered)
+        ? emojiMap.getIn([emoji, 'url'])
+        : emojiMap.getIn([emoji, 'static_url']);
+      const shortCode = `:${emoji}:`;
+
+      return (
+        <img
+          draggable='false'
+          className='emojione custom-emoji'
+          alt={shortCode}
+          title={shortCode}
+          src={filename}
+        />
+      );
+    } else {
+      return null;
+    }
+  }
+
+}
diff --git a/app/javascript/flavours/glitch/containers/status_container.js b/app/javascript/flavours/glitch/containers/status_container.js
index 947573fc7d..40a5744379 100644
--- a/app/javascript/flavours/glitch/containers/status_container.js
+++ b/app/javascript/flavours/glitch/containers/status_container.js
@@ -1,6 +1,5 @@
 import { connect } from 'react-redux';
 import Status from 'flavours/glitch/components/status';
-import { List as ImmutableList } from 'immutable';
 import { makeGetStatus } from 'flavours/glitch/selectors';
 import {
   replyCompose,
@@ -16,6 +15,8 @@ import {
   unbookmark,
   pin,
   unpin,
+  statusAddReaction,
+  statusRemoveReaction,
 } from 'flavours/glitch/actions/interactions';
 import {
   muteStatus,
@@ -44,6 +45,10 @@ import { showAlertForError } from '../actions/alerts';
 import AccountContainer from 'flavours/glitch/containers/account_container';
 import Spoilers from '../components/spoilers';
 import Icon from 'flavours/glitch/components/icon';
+import { createSelector } from 'reselect';
+import { Map as ImmutableMap } from 'immutable';
+
+const customEmojiMap = createSelector([state => state.get('custom_emojis')], items => items.reduce((map, emoji) => map.set(emoji.get('shortcode'), emoji), ImmutableMap()));
 
 const messages = defineMessages({
   deleteConfirm: { id: 'confirmations.delete.confirm', defaultMessage: 'Delete' },
@@ -83,6 +88,7 @@ const makeMapStateToProps = () => {
       account: account || props.account,
       settings: state.get('local_settings'),
       prepend: prepend || props.prepend,
+      emojiMap: customEmojiMap(state),
 
       pictureInPicture: {
         inUse: state.getIn(['meta', 'layout']) !== 'mobile' && state.get('picture_in_picture').statusId === props.id,
@@ -166,6 +172,14 @@ const mapDispatchToProps = (dispatch, { intl, contextType }) => ({
     }
   },
 
+  onReactionAdd (statusId, name) {
+    dispatch(statusAddReaction(statusId, name));
+  },
+
+  onReactionRemove (statusId, name) {
+    dispatch(statusRemoveReaction(statusId, name));
+  },
+
   onEmbed (status) {
     dispatch(openModal('EMBED', {
       url: status.get('url'),
diff --git a/app/javascript/flavours/glitch/reducers/statuses.js b/app/javascript/flavours/glitch/reducers/statuses.js
index f0c4c804b7..605238bc29 100644
--- a/app/javascript/flavours/glitch/reducers/statuses.js
+++ b/app/javascript/flavours/glitch/reducers/statuses.js
@@ -6,6 +6,11 @@ import {
   UNFAVOURITE_SUCCESS,
   BOOKMARK_REQUEST,
   BOOKMARK_FAIL,
+  STATUS_REACTION_UPDATE,
+  STATUS_REACTION_ADD_FAIL,
+  STATUS_REACTION_REMOVE_FAIL,
+  STATUS_REACTION_ADD_REQUEST,
+  STATUS_REACTION_REMOVE_REQUEST,
 } from 'flavours/glitch/actions/interactions';
 import {
   STATUS_MUTE_SUCCESS,
@@ -37,6 +42,37 @@ const deleteStatus = (state, id, references) => {
   return state.delete(id);
 };
 
+const updateReaction = (state, id, name, updater) => state.update(
+  id,
+  status => status.update(
+    'reactions',
+    reactions => {
+      const index = reactions.findIndex(reaction => reaction.get('name') === name);
+      if (index > -1) {
+        return reactions.update(index, reaction => updater(reaction));
+      } else {
+        return reactions.push(updater(fromJS({ name, count: 0 })));
+      }
+    },
+  ),
+);
+
+const updateReactionCount = (state, reaction) => updateReaction(state, reaction.status_id, reaction.name, x => x.set('count', reaction.count));
+
+const addReaction = (state, id, name) => updateReaction(
+  state,
+  id,
+  name,
+  x => x.set('me', true).update('count', n => n + 1),
+);
+
+const removeReaction = (state, id, name) => updateReaction(
+  state,
+  id,
+  name,
+  x => x.set('me', false).update('count', n => n - 1),
+);
+
 const initialState = ImmutableMap();
 
 export default function statuses(state = initialState, action) {
@@ -63,6 +99,14 @@ export default function statuses(state = initialState, action) {
     return state.setIn([action.status.get('id'), 'reblogged'], true);
   case REBLOG_FAIL:
     return state.get(action.status.get('id')) === undefined ? state : state.setIn([action.status.get('id'), 'reblogged'], false);
+  case STATUS_REACTION_UPDATE:
+    return updateReactionCount(state, action.reaction);
+  case STATUS_REACTION_ADD_REQUEST:
+  case STATUS_REACTION_REMOVE_FAIL:
+    return addReaction(state, action.id, action.name);
+  case STATUS_REACTION_REMOVE_REQUEST:
+  case STATUS_REACTION_ADD_FAIL:
+    return removeReaction(state, action.id, action.name);
   case STATUS_MUTE_SUCCESS:
     return state.setIn([action.id, 'muted'], true);
   case STATUS_UNMUTE_SUCCESS:

From ff379c7fd06bbe18c93148d380a0281c1c08bb09 Mon Sep 17 00:00:00 2001
From: fef <owo@fef.moe>
Date: Fri, 25 Nov 2022 23:02:40 +0000
Subject: [PATCH 03/48] show reactions in detailed status view

---
 .../glitch/containers/status_container.js     |  7 ++---
 .../status/components/detailed_status.js      | 12 +++++++
 .../flavours/glitch/features/status/index.js  | 31 +++++++++++++++++++
 .../flavours/glitch/utils/emoji_map.js        | 11 +++++++
 4 files changed, 56 insertions(+), 5 deletions(-)
 create mode 100644 app/javascript/flavours/glitch/utils/emoji_map.js

diff --git a/app/javascript/flavours/glitch/containers/status_container.js b/app/javascript/flavours/glitch/containers/status_container.js
index 40a5744379..381276d9dc 100644
--- a/app/javascript/flavours/glitch/containers/status_container.js
+++ b/app/javascript/flavours/glitch/containers/status_container.js
@@ -45,10 +45,7 @@ import { showAlertForError } from '../actions/alerts';
 import AccountContainer from 'flavours/glitch/containers/account_container';
 import Spoilers from '../components/spoilers';
 import Icon from 'flavours/glitch/components/icon';
-import { createSelector } from 'reselect';
-import { Map as ImmutableMap } from 'immutable';
-
-const customEmojiMap = createSelector([state => state.get('custom_emojis')], items => items.reduce((map, emoji) => map.set(emoji.get('shortcode'), emoji), ImmutableMap()));
+import buildCustomEmojiMap from '../utils/emoji_map';
 
 const messages = defineMessages({
   deleteConfirm: { id: 'confirmations.delete.confirm', defaultMessage: 'Delete' },
@@ -88,7 +85,7 @@ const makeMapStateToProps = () => {
       account: account || props.account,
       settings: state.get('local_settings'),
       prepend: prepend || props.prepend,
-      emojiMap: customEmojiMap(state),
+      emojiMap: buildCustomEmojiMap(state),
 
       pictureInPicture: {
         inUse: state.getIn(['meta', 'layout']) !== 'mobile' && state.get('picture_in_picture').statusId === props.id,
diff --git a/app/javascript/flavours/glitch/features/status/components/detailed_status.js b/app/javascript/flavours/glitch/features/status/components/detailed_status.js
index 7d2c2aace3..b2f38ff1ff 100644
--- a/app/javascript/flavours/glitch/features/status/components/detailed_status.js
+++ b/app/javascript/flavours/glitch/features/status/components/detailed_status.js
@@ -20,6 +20,7 @@ import Icon from 'flavours/glitch/components/icon';
 import AnimatedNumber from 'flavours/glitch/components/animated_number';
 import PictureInPicturePlaceholder from 'flavours/glitch/components/picture_in_picture_placeholder';
 import EditedTimestamp from 'flavours/glitch/components/edited_timestamp';
+import StatusReactionsBar from '../../../components/status_reactions_bar';
 
 export default @injectIntl
 class DetailedStatus extends ImmutablePureComponent {
@@ -43,6 +44,9 @@ class DetailedStatus extends ImmutablePureComponent {
     showMedia: PropTypes.bool,
     usingPiP: PropTypes.bool,
     onToggleMediaVisibility: PropTypes.func,
+    onReactionAdd: PropTypes.func.isRequired,
+    onReactionRemove: PropTypes.func.isRequired,
+    emojiMap: ImmutablePropTypes.map.isRequired,
     intl: PropTypes.object.isRequired,
   };
 
@@ -319,6 +323,14 @@ class DetailedStatus extends ImmutablePureComponent {
             disabled
           />
 
+          <StatusReactionsBar
+            statusId={status.get('id')}
+            reactions={status.get('reactions')}
+            addReaction={this.props.onReactionAdd}
+            removeReaction={this.props.onReactionRemove}
+            emojiMap={this.props.emojiMap}
+          />
+
           <div className='detailed-status__meta'>
             <a className='detailed-status__datetime' href={status.get('url')} target='_blank' rel='noopener noreferrer'>
               <FormattedDate value={new Date(status.get('created_at'))} hour12={false} year='numeric' month='short' day='2-digit' hour='2-digit' minute='2-digit' />
diff --git a/app/javascript/flavours/glitch/features/status/index.js b/app/javascript/flavours/glitch/features/status/index.js
index c716e4f0f5..e94a47f0ee 100644
--- a/app/javascript/flavours/glitch/features/status/index.js
+++ b/app/javascript/flavours/glitch/features/status/index.js
@@ -20,6 +20,8 @@ import {
   unreblog,
   pin,
   unpin,
+  statusAddReaction,
+  statusRemoveReaction,
 } from 'flavours/glitch/actions/interactions';
 import {
   replyCompose,
@@ -56,6 +58,7 @@ import { autoUnfoldCW } from 'flavours/glitch/utils/content_warning';
 import { textForScreenReader, defaultMediaVisibility } from 'flavours/glitch/components/status';
 import Icon from 'flavours/glitch/components/icon';
 import { Helmet } from 'react-helmet';
+import buildCustomEmojiMap from '../../utils/emoji_map';
 
 const messages = defineMessages({
   deleteConfirm: { id: 'confirmations.delete.confirm', defaultMessage: 'Delete' },
@@ -146,6 +149,7 @@ const makeMapStateToProps = () => {
       askReplyConfirmation: state.getIn(['local_settings', 'confirm_before_clearing_draft']) && state.getIn(['compose', 'text']).trim().length !== 0,
       domain: state.getIn(['meta', 'domain']),
       usingPiP: state.get('picture_in_picture').statusId === props.params.statusId,
+      emojiMap: buildCustomEmojiMap(state),
     };
   };
 
@@ -291,6 +295,30 @@ class Status extends ImmutablePureComponent {
     }
   }
 
+  handleReactionAdd = (statusId, name) => {
+    const { dispatch } = this.props;
+    const { signedIn } = this.context.identity;
+
+    if (signedIn) {
+      dispatch(statusAddReaction(statusId, name));
+    } else {
+      dispatch(openModal('INTERACTION', {
+        type: 'reaction_add',
+        accountId: status.getIn(['account', 'id']),
+        url: status.get('url'),
+      }));
+    }
+  }
+
+  handleReactionRemove = (statusId, name) => {
+    const { dispatch } = this.props;
+    const { signedIn } = this.context.identity;
+
+    if (signedIn) {
+      dispatch(statusRemoveReaction(statusId, name));
+    }
+  }
+
   handlePin = (status) => {
     if (status.get('pinned')) {
       this.props.dispatch(unpin(status));
@@ -676,6 +704,8 @@ class Status extends ImmutablePureComponent {
                   settings={settings}
                   onOpenVideo={this.handleOpenVideo}
                   onOpenMedia={this.handleOpenMedia}
+                  onReactionAdd={this.handleReactionAdd}
+                  onReactionRemove={this.handleReactionRemove}
                   expanded={isExpanded}
                   onToggleHidden={this.handleToggleHidden}
                   onTranslate={this.handleTranslate}
@@ -683,6 +713,7 @@ class Status extends ImmutablePureComponent {
                   showMedia={this.state.showMedia}
                   onToggleMediaVisibility={this.handleToggleMediaVisibility}
                   usingPiP={usingPiP}
+                  emojiMap={this.props.emojiMap}
                 />
 
                 <ActionBar
diff --git a/app/javascript/flavours/glitch/utils/emoji_map.js b/app/javascript/flavours/glitch/utils/emoji_map.js
new file mode 100644
index 0000000000..1bf36d0fd2
--- /dev/null
+++ b/app/javascript/flavours/glitch/utils/emoji_map.js
@@ -0,0 +1,11 @@
+import { createSelector } from 'reselect';
+import { Map as ImmutableMap } from 'immutable';
+
+const buildCustomEmojiMap = createSelector(
+  [state => state.get('custom_emojis')],
+  items => items.reduce(
+    (map, emoji) => map.set(emoji.get('shortcode'), emoji),
+    ImmutableMap(),
+  ),
+);
+export default buildCustomEmojiMap;

From cc71e734c48274b2b341d850d8856b3b316812ae Mon Sep 17 00:00:00 2001
From: fef <owo@fef.moe>
Date: Mon, 28 Nov 2022 22:23:13 +0000
Subject: [PATCH 04/48] federate emoji reactions

this is kind of experimental, but it should work
in theory.  at least i tested it with a remove
akkoma instance and it didn't crash.
---
 .../api/v1/statuses/reactions_controller.rb   |  4 +--
 app/lib/activitypub/activity.rb               |  2 ++
 app/lib/activitypub/activity/emoji_react.rb   | 14 ++++++++
 app/models/concerns/account_interactions.rb   |  4 +++
 app/models/status.rb                          |  2 +-
 .../activitypub/emoji_reaction_serializer.rb  | 36 +++++++++++++++++++
 .../undo_emoji_reaction_serializer.rb         | 19 ++++++++++
 .../undo_emoji_reaction_serializer.rb         |  0
 app/services/status_reaction_service.rb       | 27 ++++++++++++++
 app/services/status_unreaction_service.rb     | 21 +++++++++++
 10 files changed, 126 insertions(+), 3 deletions(-)
 create mode 100644 app/lib/activitypub/activity/emoji_react.rb
 create mode 100644 app/serializers/activitypub/emoji_reaction_serializer.rb
 create mode 100644 app/serializers/activitypub/undo_emoji_reaction_serializer.rb
 create mode 100644 app/serializers/undo_emoji_reaction_serializer.rb
 create mode 100644 app/services/status_reaction_service.rb
 create mode 100644 app/services/status_unreaction_service.rb

diff --git a/app/controllers/api/v1/statuses/reactions_controller.rb b/app/controllers/api/v1/statuses/reactions_controller.rb
index 9a1bf57079..f7dc2f99ce 100644
--- a/app/controllers/api/v1/statuses/reactions_controller.rb
+++ b/app/controllers/api/v1/statuses/reactions_controller.rb
@@ -8,12 +8,12 @@ class Api::V1::Statuses::ReactionsController < Api::BaseController
   before_action :set_reaction, except: :update
 
   def update
-    @status.status_reactions.create!(account: current_account, name: params[:id])
+    StatusReactionService.new.call(current_account, @status, params[:id])
     render_empty
   end
 
   def destroy
-    @reaction.destroy!
+    StatusUnreactionService.new.call(current_account, @status)
     render_empty
   end
 
diff --git a/app/lib/activitypub/activity.rb b/app/lib/activitypub/activity.rb
index f4c67cccd7..a6b91f62da 100644
--- a/app/lib/activitypub/activity.rb
+++ b/app/lib/activitypub/activity.rb
@@ -39,6 +39,8 @@ class ActivityPub::Activity
         ActivityPub::Activity::Follow
       when 'Like'
         ActivityPub::Activity::Like
+      when 'EmojiReact'
+        ActivityPub::Activity::EmojiReact
       when 'Block'
         ActivityPub::Activity::Block
       when 'Update'
diff --git a/app/lib/activitypub/activity/emoji_react.rb b/app/lib/activitypub/activity/emoji_react.rb
new file mode 100644
index 0000000000..82c098f56e
--- /dev/null
+++ b/app/lib/activitypub/activity/emoji_react.rb
@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+class ActivityPub::Activity::EmojiReact < ActivityPub::Activity
+  def perform
+    original_status = status_from_uri(object_uri)
+    name = @json['content']
+    return if original_status.nil? ||
+      !original_status.account.local? ||
+      delete_arrived_first?(@json['id']) ||
+      @account.reacted?(original_status, name)
+
+    original_status.status_reactions.create!(account: @account, name: name)
+  end
+end
diff --git a/app/models/concerns/account_interactions.rb b/app/models/concerns/account_interactions.rb
index de8bf338f2..6143bc8263 100644
--- a/app/models/concerns/account_interactions.rb
+++ b/app/models/concerns/account_interactions.rb
@@ -239,6 +239,10 @@ module AccountInteractions
     status.proper.favourites.where(account: self).exists?
   end
 
+  def reacted?(status, name, custom_emoji = nil)
+    status.proper.status_reactions.where(account: self, name: name, custom_emoji: custom_emoji).exists?
+  end
+
   def bookmarked?(status)
     status.proper.bookmarks.where(account: self).exists?
   end
diff --git a/app/models/status.rb b/app/models/status.rb
index 64f95f3d05..5a48db2932 100644
--- a/app/models/status.rb
+++ b/app/models/status.rb
@@ -71,7 +71,7 @@ class Status < ApplicationRecord
   has_many :mentioned_accounts, through: :mentions, source: :account, class_name: 'Account'
   has_many :active_mentions, -> { active }, class_name: 'Mention', inverse_of: :status
   has_many :media_attachments, dependent: :nullify
-  has_many :status_reactions, dependent: :destroy
+  has_many :status_reactions, inverse_of: :status, dependent: :destroy
 
   has_and_belongs_to_many :tags
   has_and_belongs_to_many :preview_cards
diff --git a/app/serializers/activitypub/emoji_reaction_serializer.rb b/app/serializers/activitypub/emoji_reaction_serializer.rb
new file mode 100644
index 0000000000..b4111150a4
--- /dev/null
+++ b/app/serializers/activitypub/emoji_reaction_serializer.rb
@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+class ActivityPub::EmojiReactionSerializer < ActivityPub::Serializer
+  attributes :id, :type, :actor, :content
+  attribute :virtual_object, key: :object
+
+  has_one :custom_emoji, key: :tag, serializer: ActivityPub::EmojiSerializer, unless: -> { object.custom_emoji.nil? }
+
+  def id
+    [ActivityPub::TagManager.instance.uri_for(object.account), '#emoji_reactions/', object.id].join
+  end
+
+  def type
+    'EmojiReact'
+  end
+
+  def actor
+    ActivityPub::TagManager.instance.uri_for(object.account)
+  end
+
+  def virtual_object
+    ActivityPub::TagManager.instance.uri_for(object.status)
+  end
+
+  def content
+    if object.custom_emoji.nil?
+      object.name
+    else
+      ":#{object.name}:"
+    end
+  end
+
+  def reaction
+    content
+  end
+end
diff --git a/app/serializers/activitypub/undo_emoji_reaction_serializer.rb b/app/serializers/activitypub/undo_emoji_reaction_serializer.rb
new file mode 100644
index 0000000000..49f0c1c8fd
--- /dev/null
+++ b/app/serializers/activitypub/undo_emoji_reaction_serializer.rb
@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+class ActivityPub::UndoEmojiReactionSerializer < ActivityPub::Serializer
+  attributes :id, :type, :actor
+
+  has_one :object, serializer: ActivityPub::EmojiReactionSerializer
+
+  def id
+    [ActivityPub::TagManager.instance.uri_for(object.account), '#emoji_reactions/', object.id, '/undo'].join
+  end
+
+  def type
+    'Undo'
+  end
+
+  def actor
+    ActivityPub::TagManager.instance.uri_for(object.account)
+  end
+end
diff --git a/app/serializers/undo_emoji_reaction_serializer.rb b/app/serializers/undo_emoji_reaction_serializer.rb
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/app/services/status_reaction_service.rb b/app/services/status_reaction_service.rb
new file mode 100644
index 0000000000..17acfe7488
--- /dev/null
+++ b/app/services/status_reaction_service.rb
@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+class StatusReactionService < BaseService
+  include Authorization
+  include Payloadable
+
+  def call(account, status, emoji)
+    reaction = StatusReaction.find_by(account: account, status: status)
+    return reaction unless reaction.nil?
+
+    name, domain = emoji.split("@")
+
+    custom_emoji = CustomEmoji.find_by(shortcode: name, domain: domain)
+    reaction = StatusReaction.create!(account: account, status: status, name: name, custom_emoji: custom_emoji)
+
+    json = Oj.dump(serialize_payload(reaction, ActivityPub::EmojiReactionSerializer))
+    if status.account.local?
+      ActivityPub::RawDistributionWorker.perform_async(json, status.account.id)
+    else
+      ActivityPub::DeliveryWorker.perform_async(json, reaction.account_id, status.account.inbox_url)
+    end
+
+    ActivityTracker.increment('activity:interactions')
+
+    reaction
+  end
+end
diff --git a/app/services/status_unreaction_service.rb b/app/services/status_unreaction_service.rb
new file mode 100644
index 0000000000..13c3c428db
--- /dev/null
+++ b/app/services/status_unreaction_service.rb
@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+class StatusUnreactionService < BaseService
+  include Payloadable
+
+  def call(account, status)
+    reaction = StatusReaction.find_by(account: account, status: status)
+    return if reaction.nil?
+
+    reaction.destroy!
+
+    json = Oj.dump(serialize_payload(reaction, ActivityPub::UndoEmojiReactionSerializer))
+    if status.account.local?
+      ActivityPub::RawDistributionWorker.perform_async(json, status.account.id)
+    else
+      ActivityPub::DeliveryWorker.perform_async(json, reaction.account_id, status.account.inbox_url)
+    end
+
+    reaction
+  end
+end

From 83f0b5f2880f726fb0002ba249fafbed8f22412b Mon Sep 17 00:00:00 2001
From: fef <owo@fef.moe>
Date: Mon, 28 Nov 2022 22:25:12 +0000
Subject: [PATCH 05/48] remove accidentally created file

---
 app/serializers/undo_emoji_reaction_serializer.rb | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 delete mode 100644 app/serializers/undo_emoji_reaction_serializer.rb

diff --git a/app/serializers/undo_emoji_reaction_serializer.rb b/app/serializers/undo_emoji_reaction_serializer.rb
deleted file mode 100644
index e69de29bb2..0000000000

From 200dd90a9fe716d5a1da322f21eb89e64eb44180 Mon Sep 17 00:00:00 2001
From: fef <owo@fef.moe>
Date: Mon, 28 Nov 2022 23:16:56 +0000
Subject: [PATCH 06/48] make status reaction count limit configurable

---
 .env.production.sample                      | 3 +++
 app/validators/status_reaction_validator.rb | 2 +-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/.env.production.sample b/.env.production.sample
index 7bcce0f7e5..a2f5bdd123 100644
--- a/.env.production.sample
+++ b/.env.production.sample
@@ -269,6 +269,9 @@ MAX_POLL_OPTIONS=5
 # Maximum allowed poll option characters
 MAX_POLL_OPTION_CHARS=100
 
+# Maximum number of emoji reactions per toot and user (minimum 1)
+MAX_STATUS_REACTIONS=8
+
 # Maximum image and video/audio upload sizes
 # Units are in bytes
 # 1048576 bytes equals 1 megabyte
diff --git a/app/validators/status_reaction_validator.rb b/app/validators/status_reaction_validator.rb
index 7c1c6983bb..113e9342ba 100644
--- a/app/validators/status_reaction_validator.rb
+++ b/app/validators/status_reaction_validator.rb
@@ -3,7 +3,7 @@
 class StatusReactionValidator < ActiveModel::Validator
   SUPPORTED_EMOJIS = Oj.load_file(Rails.root.join('app', 'javascript', 'mastodon', 'features', 'emoji', 'emoji_map.json').to_s).keys.freeze
 
-  LIMIT = 8
+  LIMIT = [1, (ENV['MAX_STATUS_REACTIONS'] || 1).to_i].max
 
   def validate(reaction)
     return if reaction.name.blank?

From 738433e46a228c83a0748b44ba58a5309a6ff247 Mon Sep 17 00:00:00 2001
From: fef <owo@fef.moe>
Date: Tue, 29 Nov 2022 00:39:40 +0000
Subject: [PATCH 07/48] make frontend fetch reaction limit

the maximum number of reactions was previously
hardcoded to 8.  this commit also fixes an
incorrect query in StatusReactionValidator where
it didn't count per-user reactions but the total
amount of different ones.
---
 .env.production.sample                                     | 2 +-
 .../flavours/glitch/components/status_reactions_bar.js     | 5 +++--
 app/javascript/flavours/glitch/initial_state.js            | 3 +++
 app/serializers/initial_state_serializer.rb                | 6 +++++-
 app/services/status_reaction_service.rb                    | 7 +++----
 app/validators/status_reaction_validator.rb                | 6 +++---
 6 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/.env.production.sample b/.env.production.sample
index a2f5bdd123..326c2cc409 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_STATUS_REACTIONS=8
+MAX_REACTIONS=8
 
 # Maximum image and video/audio upload sizes
 # Units are in bytes
diff --git a/app/javascript/flavours/glitch/components/status_reactions_bar.js b/app/javascript/flavours/glitch/components/status_reactions_bar.js
index db1905be4f..ac57341bcc 100644
--- a/app/javascript/flavours/glitch/components/status_reactions_bar.js
+++ b/app/javascript/flavours/glitch/components/status_reactions_bar.js
@@ -11,13 +11,14 @@ import React from 'react';
 import unicodeMapping from '../features/emoji/emoji_unicode_mapping_light';
 import AnimatedNumber from './animated_number';
 import { assetHost } from '../utils/config';
-import { autoPlayGif } from '../initial_state';
+import { autoPlayGif, maxReactions } from '../initial_state';
 
 export default class StatusReactionsBar extends ImmutablePureComponent {
 
   static propTypes = {
     statusId: PropTypes.string.isRequired,
     reactions: ImmutablePropTypes.list.isRequired,
+    reactionLimit: PropTypes.number.isRequired,
     addReaction: PropTypes.func.isRequired,
     removeReaction: PropTypes.func.isRequired,
     emojiMap: ImmutablePropTypes.map.isRequired,
@@ -62,7 +63,7 @@ export default class StatusReactionsBar extends ImmutablePureComponent {
               />
             ))}
 
-            {visibleReactions.size < 8 && <EmojiPickerDropdown onPickEmoji={this.handleEmojiPick} button={<Icon id='plus' />} />}
+            {visibleReactions.size < maxReactions && <EmojiPickerDropdown onPickEmoji={this.handleEmojiPick} button={<Icon id='plus' />} />}
           </div>
         )}
       </TransitionMotion>
diff --git a/app/javascript/flavours/glitch/initial_state.js b/app/javascript/flavours/glitch/initial_state.js
index bbf25c8a85..4391b0c75d 100644
--- a/app/javascript/flavours/glitch/initial_state.js
+++ b/app/javascript/flavours/glitch/initial_state.js
@@ -148,4 +148,7 @@ export const pollLimits = (initialState && initialState.poll_limits);
 export const defaultContentType = getMeta('default_content_type');
 export const useSystemEmojiFont = getMeta('system_emoji_font');
 
+// nyastodon-specific settings
+export const maxReactions = (initialState && initialState.max_reactions) || 8;
+
 export default initialState;
diff --git a/app/serializers/initial_state_serializer.rb b/app/serializers/initial_state_serializer.rb
index d753fa51a9..76b2ff2a24 100644
--- a/app/serializers/initial_state_serializer.rb
+++ b/app/serializers/initial_state_serializer.rb
@@ -6,7 +6,7 @@ class InitialStateSerializer < ActiveModel::Serializer
   attributes :meta, :compose, :accounts,
              :media_attachments, :settings,
              :max_toot_chars, :poll_limits,
-             :languages
+             :languages, :max_reactions
 
   has_one :push_subscription, serializer: REST::WebPushSubscriptionSerializer
   has_one :role, serializer: REST::RoleSerializer
@@ -15,6 +15,10 @@ class InitialStateSerializer < ActiveModel::Serializer
     StatusLengthValidator::MAX_CHARS
   end
 
+  def max_reactions
+    StatusReactionValidator::LIMIT
+  end
+
   def poll_limits
     {
       max_options: PollValidator::MAX_OPTIONS,
diff --git a/app/services/status_reaction_service.rb b/app/services/status_reaction_service.rb
index 17acfe7488..e823f6bd88 100644
--- a/app/services/status_reaction_service.rb
+++ b/app/services/status_reaction_service.rb
@@ -5,12 +5,11 @@ class StatusReactionService < BaseService
   include Payloadable
 
   def call(account, status, emoji)
-    reaction = StatusReaction.find_by(account: account, status: status)
+    name, domain = emoji.split('@')
+    custom_emoji = CustomEmoji.find_by(shortcode: name, domain: domain)
+    reaction = StatusReaction.find_by(account: account, status: status, name: name, custom_emoji: custom_emoji)
     return reaction unless reaction.nil?
 
-    name, domain = emoji.split("@")
-
-    custom_emoji = CustomEmoji.find_by(shortcode: name, domain: domain)
     reaction = StatusReaction.create!(account: account, status: status, name: name, custom_emoji: custom_emoji)
 
     json = Oj.dump(serialize_payload(reaction, ActivityPub::EmojiReactionSerializer))
diff --git a/app/validators/status_reaction_validator.rb b/app/validators/status_reaction_validator.rb
index 113e9342ba..fa6fb2e765 100644
--- a/app/validators/status_reaction_validator.rb
+++ b/app/validators/status_reaction_validator.rb
@@ -3,13 +3,13 @@
 class StatusReactionValidator < ActiveModel::Validator
   SUPPORTED_EMOJIS = Oj.load_file(Rails.root.join('app', 'javascript', 'mastodon', 'features', 'emoji', 'emoji_map.json').to_s).keys.freeze
 
-  LIMIT = [1, (ENV['MAX_STATUS_REACTIONS'] || 1).to_i].max
+  LIMIT = [1, (ENV['MAX_REACTIONS'] || 8).to_i].max
 
   def validate(reaction)
     return if reaction.name.blank?
 
     reaction.errors.add(:name, I18n.t('reactions.errors.unrecognized_emoji')) if reaction.custom_emoji_id.blank? && !unicode_emoji?(reaction.name)
-    reaction.errors.add(:base, I18n.t('reactions.errors.limit_reached')) if new_reaction?(reaction) && limit_reached?(reaction)
+    reaction.errors.add(:base, I18n.t('reactions.errors.limit_reached')) if limit_reached?(reaction)
   end
 
   private
@@ -23,6 +23,6 @@ class StatusReactionValidator < ActiveModel::Validator
   end
 
   def limit_reached?(reaction)
-    reaction.status.status_reactions.where.not(name: reaction.name).count('distinct name') >= LIMIT
+    reaction.status.status_reactions.where(status: reaction.status, account: reaction.account).count >= LIMIT
   end
 end

From 19491d2032322a9e4435179d22065c5d99ea0a2f Mon Sep 17 00:00:00 2001
From: fef <owo@fef.moe>
Date: Tue, 29 Nov 2022 04:31:22 +0100
Subject: [PATCH 08/48] cherry-pick emoji reaction changes

---
 .../flavours/glitch/actions/notifications.js  |  1 +
 .../flavours/glitch/components/status.js      |  1 +
 .../glitch/components/status_prepend.js       | 11 ++++++
 .../glitch/components/status_reactions_bar.js |  1 -
 .../components/column_settings.js             | 11 ++++++
 .../notifications/components/filter_bar.js    |  8 ++++
 .../notifications/components/notification.js  | 22 +++++++++++
 app/javascript/flavours/glitch/locales/de.js  |  5 ++-
 app/javascript/flavours/glitch/locales/en.js  |  4 ++
 app/javascript/flavours/glitch/locales/fr.js  |  5 ++-
 .../flavours/glitch/reducers/settings.js      |  3 ++
 app/models/notification.rb                    | 38 ++++++++++++-------
 .../rest/notification_serializer.rb           |  2 +-
 app/services/status_reaction_service.rb       |  1 +
 config/locales/de.yml                         |  4 ++
 config/locales/en.yml                         |  4 ++
 config/locales/en_GB.yml                      |  4 ++
 config/locales/fr.yml                         |  4 ++
 18 files changed, 111 insertions(+), 18 deletions(-)

diff --git a/app/javascript/flavours/glitch/actions/notifications.js b/app/javascript/flavours/glitch/actions/notifications.js
index 158a5b7e43..fa556269c8 100644
--- a/app/javascript/flavours/glitch/actions/notifications.js
+++ b/app/javascript/flavours/glitch/actions/notifications.js
@@ -139,6 +139,7 @@ const excludeTypesFromFilter = filter => {
     'follow',
     'follow_request',
     'favourite',
+    'reaction',
     'reblog',
     'mention',
     'poll',
diff --git a/app/javascript/flavours/glitch/components/status.js b/app/javascript/flavours/glitch/components/status.js
index 31b234ef30..05fecdb968 100644
--- a/app/javascript/flavours/glitch/components/status.js
+++ b/app/javascript/flavours/glitch/components/status.js
@@ -726,6 +726,7 @@ class Status extends ImmutablePureComponent {
     if (this.props.prepend && account) {
       const notifKind = {
         favourite: 'favourited',
+        reaction: 'reacted',
         reblog: 'boosted',
         reblogged_by: 'boosted',
         status: 'posted',
diff --git a/app/javascript/flavours/glitch/components/status_prepend.js b/app/javascript/flavours/glitch/components/status_prepend.js
index f825330621..6c96f2ee2f 100644
--- a/app/javascript/flavours/glitch/components/status_prepend.js
+++ b/app/javascript/flavours/glitch/components/status_prepend.js
@@ -56,6 +56,14 @@ export default class StatusPrepend extends React.PureComponent {
           values={{ name : link }}
         />
       );
+    case 'reaction':
+      return (
+        <FormattedMessage
+          id='notification.reaction'
+          defaultMessage='{name} reacted to your post'
+          values={{ name: link }}
+        />
+      );
     case 'reblog':
       return (
         <FormattedMessage
@@ -110,6 +118,9 @@ export default class StatusPrepend extends React.PureComponent {
     case 'favourite':
       iconId = 'star';
       break;
+    case 'reaction':
+      iconId = 'plus';
+      break;
     case 'featured':
       iconId = 'thumb-tack';
       break;
diff --git a/app/javascript/flavours/glitch/components/status_reactions_bar.js b/app/javascript/flavours/glitch/components/status_reactions_bar.js
index ac57341bcc..54f075d40e 100644
--- a/app/javascript/flavours/glitch/components/status_reactions_bar.js
+++ b/app/javascript/flavours/glitch/components/status_reactions_bar.js
@@ -18,7 +18,6 @@ export default class StatusReactionsBar extends ImmutablePureComponent {
   static propTypes = {
     statusId: PropTypes.string.isRequired,
     reactions: ImmutablePropTypes.list.isRequired,
-    reactionLimit: PropTypes.number.isRequired,
     addReaction: PropTypes.func.isRequired,
     removeReaction: PropTypes.func.isRequired,
     emojiMap: ImmutablePropTypes.map.isRequired,
diff --git a/app/javascript/flavours/glitch/features/notifications/components/column_settings.js b/app/javascript/flavours/glitch/features/notifications/components/column_settings.js
index 64fd98bd92..5c3d595978 100644
--- a/app/javascript/flavours/glitch/features/notifications/components/column_settings.js
+++ b/app/javascript/flavours/glitch/features/notifications/components/column_settings.js
@@ -116,6 +116,17 @@ export default class ColumnSettings extends React.PureComponent {
           </div>
         </div>
 
+        <div role='group' aria-labelledby='notifications-reaction'>
+          <span id='notifications-reaction' className='column-settings__section'><FormattedMessage id='notifications.column_settings.reaction' defaultMessage='Reactions:' /></span>
+
+          <div className='column-settings__pillbar'>
+            <PillBarButton disabled={browserPermission === 'denied'} prefix='notifications_desktop' settings={settings} settingPath={['alerts', 'reaction']} onChange={onChange} label={alertStr} />
+            {showPushSettings && <PillBarButton prefix='notifications_push' settings={pushSettings} settingPath={['alerts', 'reaction']} onChange={this.onPushChange} label={pushStr} />}
+            <PillBarButton prefix='notifications' settings={settings} settingPath={['shows', 'reaction']} onChange={onChange} label={showStr} />
+            <PillBarButton prefix='notifications' settings={settings} settingPath={['sounds', 'reaction']} onChange={onChange} label={soundStr} />
+          </div>
+        </div>
+
         <div role='group' aria-labelledby='notifications-mention'>
           <span id='notifications-mention' className='column-settings__section'><FormattedMessage id='notifications.column_settings.mention' defaultMessage='Mentions:' /></span>
 
diff --git a/app/javascript/flavours/glitch/features/notifications/components/filter_bar.js b/app/javascript/flavours/glitch/features/notifications/components/filter_bar.js
index c1de0f90ea..6027a55d85 100644
--- a/app/javascript/flavours/glitch/features/notifications/components/filter_bar.js
+++ b/app/javascript/flavours/glitch/features/notifications/components/filter_bar.js
@@ -6,6 +6,7 @@ import Icon from 'flavours/glitch/components/icon';
 const tooltips = defineMessages({
   mentions: { id: 'notifications.filter.mentions', defaultMessage: 'Mentions' },
   favourites: { id: 'notifications.filter.favourites', defaultMessage: 'Favourites' },
+  reactions: { id: 'notifications.filter.reactions', defaultMessage: 'Reactions' },
   boosts: { id: 'notifications.filter.boosts', defaultMessage: 'Boosts' },
   polls: { id: 'notifications.filter.polls', defaultMessage: 'Poll results' },
   follows: { id: 'notifications.filter.follows', defaultMessage: 'Follows' },
@@ -74,6 +75,13 @@ class FilterBar extends React.PureComponent {
         >
           <Icon id='star' fixedWidth />
         </button>
+        <button
+          className={selectedFilter === 'reaction' ? 'active' : ''}
+          onClick={this.onClick('reaction')}
+          title={intl.formatMessage(tooltips.reactions)}
+        >
+          <Icon id='plus' fixedWidth />
+        </button>
         <button
           className={selectedFilter === 'reblog' ? 'active' : ''}
           onClick={this.onClick('reblog')}
diff --git a/app/javascript/flavours/glitch/features/notifications/components/notification.js b/app/javascript/flavours/glitch/features/notifications/components/notification.js
index d676a4207c..f938da7c7c 100644
--- a/app/javascript/flavours/glitch/features/notifications/components/notification.js
+++ b/app/javascript/flavours/glitch/features/notifications/components/notification.js
@@ -155,6 +155,28 @@ export default class Notification extends ImmutablePureComponent {
           unread={this.props.unread}
         />
       );
+    case 'reaction':
+      return (
+        <StatusContainer
+          containerId={notification.get('id')}
+          hidden={hidden}
+          id={notification.get('status')}
+          account={notification.get('account')}
+          prepend='reaction'
+          muted
+          notification={notification}
+          onMoveDown={onMoveDown}
+          onMoveUp={onMoveUp}
+          onMention={onMention}
+          getScrollPosition={getScrollPosition}
+          updateScrollBottom={updateScrollBottom}
+          cachedMediaWidth={this.props.cachedMediaWidth}
+          cacheMediaWidth={this.props.cacheMediaWidth}
+          onUnmount={this.props.onUnmount}
+          withDismiss
+          unread={this.props.unread}
+        />
+      );
     case 'reblog':
       return (
         <StatusContainer
diff --git a/app/javascript/flavours/glitch/locales/de.js b/app/javascript/flavours/glitch/locales/de.js
index ce64536235..9b2ff91d9b 100644
--- a/app/javascript/flavours/glitch/locales/de.js
+++ b/app/javascript/flavours/glitch/locales/de.js
@@ -1,7 +1,10 @@
 import inherited from 'mastodon/locales/de.json';
 
 const messages = {
-  //  No translations available.
+  'notification.reaction': '{name} hat auf deinen Beitrag reagiert',
+  'notifications.column_settings.reaction': 'Reaktionen:',
+
+  'tooltips.reactions': 'Reaktionen',
 };
 
 export default Object.assign({}, inherited, messages);
diff --git a/app/javascript/flavours/glitch/locales/en.js b/app/javascript/flavours/glitch/locales/en.js
index fd3f17683d..a502171732 100644
--- a/app/javascript/flavours/glitch/locales/en.js
+++ b/app/javascript/flavours/glitch/locales/en.js
@@ -147,7 +147,9 @@ const messages = {
   'home.column_settings.show_direct': 'Show DMs',
 
   'notification.markForDeletion': 'Mark for deletion',
+  'notification.reaction': '{name} reacted to your post',
   'notifications.clear': 'Clear all my notifications',
+  'notifications.column_settings.reaction': 'Reactions:',
   'notifications.marked_clear_confirmation': 'Are you sure you want to permanently clear all selected notifications?',
   'notifications.marked_clear': 'Clear selected notifications',
 
@@ -187,6 +189,8 @@ const messages = {
   'keyboard_shortcuts.bookmark': 'to bookmark',
   'keyboard_shortcuts.toggle_collapse': 'to collapse/uncollapse toots',
   'keyboard_shortcuts.secondary_toot': 'to send toot using secondary privacy setting',
+
+  'tooltips.reactions': 'Reactions',
 };
 
 export default Object.assign({}, inherited, messages);
diff --git a/app/javascript/flavours/glitch/locales/fr.js b/app/javascript/flavours/glitch/locales/fr.js
index 8562f55944..82439c4bfb 100644
--- a/app/javascript/flavours/glitch/locales/fr.js
+++ b/app/javascript/flavours/glitch/locales/fr.js
@@ -1,7 +1,10 @@
 import inherited from 'mastodon/locales/fr.json';
 
 const messages = {
-  //  No translations available.
+  'notification.reaction': '{name} a réagi·e à votre message',
+  'notifications.column_settings.reaction': 'Réactions:',
+
+  'tooltips.reactions': 'Réactions',
 };
 
 export default Object.assign({}, inherited, messages);
diff --git a/app/javascript/flavours/glitch/reducers/settings.js b/app/javascript/flavours/glitch/reducers/settings.js
index 82927f7cd7..40ea14ac48 100644
--- a/app/javascript/flavours/glitch/reducers/settings.js
+++ b/app/javascript/flavours/glitch/reducers/settings.js
@@ -37,6 +37,7 @@ const initialState = ImmutableMap({
       follow: false,
       follow_request: false,
       favourite: false,
+      reaction: false,
       reblog: false,
       mention: false,
       poll: false,
@@ -60,6 +61,7 @@ const initialState = ImmutableMap({
       follow_request: false,
       favourite: true,
       reblog: true,
+      reaction: true,
       mention: true,
       poll: true,
       status: true,
@@ -73,6 +75,7 @@ const initialState = ImmutableMap({
       follow_request: false,
       favourite: true,
       reblog: true,
+      reaction: true,
       mention: true,
       poll: true,
       status: true,
diff --git a/app/models/notification.rb b/app/models/notification.rb
index bbc63c1c05..9e3c31a6b6 100644
--- a/app/models/notification.rb
+++ b/app/models/notification.rb
@@ -19,12 +19,13 @@ class Notification < ApplicationRecord
   include Paginable
 
   LEGACY_TYPE_CLASS_MAP = {
-    'Mention'       => :mention,
-    'Status'        => :reblog,
-    'Follow'        => :follow,
-    'FollowRequest' => :follow_request,
-    'Favourite'     => :favourite,
-    'Poll'          => :poll,
+    'Mention'        => :mention,
+    'Status'         => :reblog,
+    'Follow'         => :follow,
+    'FollowRequest'  => :follow_request,
+    'Favourite'      => :favourite,
+    'StatusReaction' => :reaction,
+    'Poll'           => :poll,
   }.freeze
 
   TYPES = %i(
@@ -34,6 +35,7 @@ class Notification < ApplicationRecord
     follow
     follow_request
     favourite
+    reaction
     poll
     update
     admin.sign_up
@@ -45,6 +47,7 @@ class Notification < ApplicationRecord
     reblog: [status: :reblog],
     mention: [mention: :status],
     favourite: [favourite: :status],
+    reaction: [status_reaction: :status],
     poll: [poll: :status],
     update: :status,
     'admin.report': [report: :target_account],
@@ -54,13 +57,14 @@ class Notification < ApplicationRecord
   belongs_to :from_account, class_name: 'Account', optional: true
   belongs_to :activity, polymorphic: true, optional: true
 
-  belongs_to :mention,        foreign_key: 'activity_id', optional: true
-  belongs_to :status,         foreign_key: 'activity_id', optional: true
-  belongs_to :follow,         foreign_key: 'activity_id', optional: true
-  belongs_to :follow_request, foreign_key: 'activity_id', optional: true
-  belongs_to :favourite,      foreign_key: 'activity_id', optional: true
-  belongs_to :poll,           foreign_key: 'activity_id', optional: true
-  belongs_to :report,         foreign_key: 'activity_id', optional: true
+  belongs_to :mention,         foreign_key: 'activity_id', optional: true
+  belongs_to :status,          foreign_key: 'activity_id', optional: true
+  belongs_to :follow,          foreign_key: 'activity_id', optional: true
+  belongs_to :follow_request,  foreign_key: 'activity_id', optional: true
+  belongs_to :favourite,       foreign_key: 'activity_id', optional: true
+  belongs_to :poll,            foreign_key: 'activity_id', optional: true
+  belongs_to :report,          foreign_key: 'activity_id', optional: true
+  belongs_to :status_reaction, foreign_key: 'activity_id', optional: true
 
   validates :type, inclusion: { in: TYPES }
 
@@ -78,6 +82,8 @@ class Notification < ApplicationRecord
       status&.reblog
     when :favourite
       favourite&.status
+    when :reaction
+      status_reaction&.status
     when :mention
       mention&.status
     when :poll
@@ -129,6 +135,8 @@ class Notification < ApplicationRecord
           notification.status.reblog = cached_status
         when :favourite
           notification.favourite.status = cached_status
+        when :reaction
+          notification.reaction.status = cached_status
         when :mention
           notification.mention.status = cached_status
         when :poll
@@ -140,6 +148,8 @@ class Notification < ApplicationRecord
     end
   end
 
+  alias reaction status_reaction
+
   after_initialize :set_from_account
   before_validation :set_from_account
 
@@ -149,7 +159,7 @@ class Notification < ApplicationRecord
     return unless new_record?
 
     case activity_type
-    when 'Status', 'Follow', 'Favourite', 'FollowRequest', 'Poll', 'Report'
+    when 'Status', 'Follow', 'Favourite', 'StatusReaction', 'FollowRequest', 'Poll', 'Report'
       self.from_account_id = activity&.account_id
     when 'Mention'
       self.from_account_id = activity&.status&.account_id
diff --git a/app/serializers/rest/notification_serializer.rb b/app/serializers/rest/notification_serializer.rb
index 137fc53dda..93690e444a 100644
--- a/app/serializers/rest/notification_serializer.rb
+++ b/app/serializers/rest/notification_serializer.rb
@@ -12,7 +12,7 @@ class REST::NotificationSerializer < ActiveModel::Serializer
   end
 
   def status_type?
-    [:favourite, :reblog, :status, :mention, :poll, :update].include?(object.type)
+    [:favourite, :reaction, :reblog, :status, :mention, :poll, :update].include?(object.type)
   end
 
   def report_type?
diff --git a/app/services/status_reaction_service.rb b/app/services/status_reaction_service.rb
index e823f6bd88..9451690dd1 100644
--- a/app/services/status_reaction_service.rb
+++ b/app/services/status_reaction_service.rb
@@ -14,6 +14,7 @@ class StatusReactionService < BaseService
 
     json = Oj.dump(serialize_payload(reaction, ActivityPub::EmojiReactionSerializer))
     if status.account.local?
+      NotifyService.new.call(status.account, :reaction, reaction)
       ActivityPub::RawDistributionWorker.perform_async(json, status.account.id)
     else
       ActivityPub::DeliveryWorker.perform_async(json, reaction.account_id, status.account.inbox_url)
diff --git a/config/locales/de.yml b/config/locales/de.yml
index 8a12a30470..1899b131d1 100644
--- a/config/locales/de.yml
+++ b/config/locales/de.yml
@@ -1285,6 +1285,10 @@ de:
       body: 'Dein Beitrag wurde von %{name} favorisiert:'
       subject: "%{name} hat deinen Beitrag favorisiert"
       title: Neue Favorisierung
+    reaction:
+      body: '%{name} hat auf deinen Beitrag reagiert:'
+      subject: '%{name} hat auf deinen Beitrag reagiert'
+      title: Neue Reaktion
     follow:
       body: "%{name} folgt dir jetzt!"
       subject: "%{name} folgt dir jetzt"
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 075ce2136f..bf43d0c752 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -1292,6 +1292,10 @@ en:
       body: 'Your post was favourited by %{name}:'
       subject: "%{name} favourited your post"
       title: New favourite
+    reaction:
+      body: '%{name} reacted to your post:'
+      subject: '%{name} reacted to your post'
+      title: New reaction
     follow:
       body: "%{name} is now following you!"
       subject: "%{name} is now following you"
diff --git a/config/locales/en_GB.yml b/config/locales/en_GB.yml
index 2cba40da0b..80084d9a6f 100644
--- a/config/locales/en_GB.yml
+++ b/config/locales/en_GB.yml
@@ -707,6 +707,10 @@ en_GB:
       body: 'Your status was favourited by %{name}:'
       subject: "%{name} favourited your status"
       title: New favourite
+    reaction:
+      body: '%{name} reacted on your post with %{reaction}:'
+      subject: '%{name} reacted on your post'
+      title: New reaction
     follow:
       body: "%{name} is now following you!"
       subject: "%{name} is now following you"
diff --git a/config/locales/fr.yml b/config/locales/fr.yml
index b24603db98..9f3cf843a1 100644
--- a/config/locales/fr.yml
+++ b/config/locales/fr.yml
@@ -1285,6 +1285,10 @@ fr:
       body: "%{name} a ajouté votre message à ses favoris :"
       subject: "%{name} a ajouté votre message à ses favoris"
       title: Nouveau favori
+    reaction:
+      body: '%{name} a réagi·e à votre message:'
+      subject: '%{name} a réagi·e à votre message'
+      title: Nouvelle réaction
     follow:
       body: "%{name} vous suit !"
       subject: "%{name} vous suit"

From da78479b933704cc936ebbffbc678b9f482c776e Mon Sep 17 00:00:00 2001
From: fef <owo@fef.moe>
Date: Tue, 29 Nov 2022 04:37:44 +0000
Subject: [PATCH 09/48] move react button to action bar

---
 .../glitch/components/status_action_bar.js    | 28 ++++++++++++++++++-
 .../glitch/components/status_reactions_bar.js |  6 +---
 .../components/emoji_picker_dropdown.js       |  3 +-
 .../features/status/components/action_bar.js  | 23 ++++++++++++++-
 .../flavours/glitch/features/status/index.js  |  1 +
 app/javascript/flavours/glitch/locales/de.js  |  2 ++
 app/javascript/flavours/glitch/locales/en.js  |  1 +
 app/javascript/flavours/glitch/locales/fr.js  |  2 ++
 8 files changed, 58 insertions(+), 8 deletions(-)

diff --git a/app/javascript/flavours/glitch/components/status_action_bar.js b/app/javascript/flavours/glitch/components/status_action_bar.js
index 7949b2db3b..342d1a13ce 100644
--- a/app/javascript/flavours/glitch/components/status_action_bar.js
+++ b/app/javascript/flavours/glitch/components/status_action_bar.js
@@ -5,11 +5,12 @@ import IconButton from './icon_button';
 import DropdownMenuContainer from 'flavours/glitch/containers/dropdown_menu_container';
 import { defineMessages, injectIntl } from 'react-intl';
 import ImmutablePureComponent from 'react-immutable-pure-component';
-import { me } from 'flavours/glitch/initial_state';
+import { me, maxReactions } from 'flavours/glitch/initial_state';
 import RelativeTimestamp from './relative_timestamp';
 import { accountAdminLink, statusAdminLink } from 'flavours/glitch/utils/backend_links';
 import classNames from 'classnames';
 import { PERMISSION_MANAGE_USERS } from 'flavours/glitch/permissions';
+import EmojiPickerDropdown from '../features/compose/containers/emoji_picker_dropdown_container';
 
 const messages = defineMessages({
   delete: { id: 'status.delete', defaultMessage: 'Delete' },
@@ -28,6 +29,7 @@ const messages = defineMessages({
   cancel_reblog_private: { id: 'status.cancel_reblog_private', defaultMessage: 'Unboost' },
   cannot_reblog: { id: 'status.cannot_reblog', defaultMessage: 'This post cannot be boosted' },
   favourite: { id: 'status.favourite', defaultMessage: 'Favourite' },
+  react: { id: 'status.react', defaultMessage: 'React' },
   bookmark: { id: 'status.bookmark', defaultMessage: 'Bookmark' },
   open: { id: 'status.open', defaultMessage: 'Expand this status' },
   report: { id: 'status.report', defaultMessage: 'Report @{name}' },
@@ -114,6 +116,16 @@ class StatusActionBar extends ImmutablePureComponent {
     }
   }
 
+  handleEmojiPick = data => {
+    const { signedIn } = this.context.identity;
+
+    if (signedIn) {
+      this.props.onReactionAdd(this.props.status.get('id'), data.native.replace(/:/g, ''));
+    } else {
+      this.props.onInteractionModal('favourite', this.props.status);
+    }
+  }
+
   handleReblogClick = e => {
     const { signedIn } = this.context.identity;
 
@@ -195,6 +207,8 @@ class StatusActionBar extends ImmutablePureComponent {
     this.props.onAddFilter(this.props.status);
   }
 
+  nop = () => {}
+
   render () {
     const { status, intl, withDismiss, withCounters, showReplyCount, scrollKey } = this.props;
 
@@ -298,6 +312,17 @@ class StatusActionBar extends ImmutablePureComponent {
       <IconButton className='status__action-bar-button' title={intl.formatMessage(messages.hide)} icon='eye' onClick={this.handleHideClick} />
     );
 
+    const canReact = status.get('reactions').filter(r => r.get('count') > 0 && r.get('me')).size < maxReactions;
+    const reactButton = (
+      <IconButton
+        className='status__action-bar-button'
+        onClick={this.nop} // EmojiPickerDropdown handles that
+        title={intl.formatMessage(messages.react)}
+        disabled={!canReact}
+        icon='plus'
+      />
+    );
+
     return (
       <div className='status__action-bar'>
         <IconButton
@@ -310,6 +335,7 @@ class StatusActionBar extends ImmutablePureComponent {
         />
         <IconButton className={classNames('status__action-bar-button', { reblogPrivate })} disabled={!publicStatus && !reblogPrivate} active={status.get('reblogged')} title={reblogTitle} icon={reblogIcon} 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} />
+        <EmojiPickerDropdown onPickEmoji={this.handleEmojiPick} button={reactButton} disabled={!canReact} />
         {shareButton}
         <IconButton className='status__action-bar-button bookmark-icon' disabled={anonymousAccess} active={status.get('bookmarked')} title={intl.formatMessage(messages.bookmark)} icon='bookmark' onClick={this.handleBookmarkClick} />
 
diff --git a/app/javascript/flavours/glitch/components/status_reactions_bar.js b/app/javascript/flavours/glitch/components/status_reactions_bar.js
index 54f075d40e..912e1b1ba5 100644
--- a/app/javascript/flavours/glitch/components/status_reactions_bar.js
+++ b/app/javascript/flavours/glitch/components/status_reactions_bar.js
@@ -5,13 +5,11 @@ import { reduceMotion } from '../initial_state';
 import spring from 'react-motion/lib/spring';
 import TransitionMotion from 'react-motion/lib/TransitionMotion';
 import classNames from 'classnames';
-import EmojiPickerDropdown from '../features/compose/containers/emoji_picker_dropdown_container';
-import Icon from './icon';
 import React from 'react';
 import unicodeMapping from '../features/emoji/emoji_unicode_mapping_light';
 import AnimatedNumber from './animated_number';
 import { assetHost } from '../utils/config';
-import { autoPlayGif, maxReactions } from '../initial_state';
+import { autoPlayGif } from '../initial_state';
 
 export default class StatusReactionsBar extends ImmutablePureComponent {
 
@@ -61,8 +59,6 @@ export default class StatusReactionsBar extends ImmutablePureComponent {
                 emojiMap={this.props.emojiMap}
               />
             ))}
-
-            {visibleReactions.size < maxReactions && <EmojiPickerDropdown onPickEmoji={this.handleEmojiPick} button={<Icon id='plus' />} />}
           </div>
         )}
       </TransitionMotion>
diff --git a/app/javascript/flavours/glitch/features/compose/components/emoji_picker_dropdown.js b/app/javascript/flavours/glitch/features/compose/components/emoji_picker_dropdown.js
index 546d398a0b..61d38648ad 100644
--- a/app/javascript/flavours/glitch/features/compose/components/emoji_picker_dropdown.js
+++ b/app/javascript/flavours/glitch/features/compose/components/emoji_picker_dropdown.js
@@ -321,6 +321,7 @@ class EmojiPickerDropdown extends React.PureComponent {
     onSkinTone: PropTypes.func.isRequired,
     skinTone: PropTypes.number.isRequired,
     button: PropTypes.node,
+    disabled: PropTypes.bool,
   };
 
   state = {
@@ -358,7 +359,7 @@ class EmojiPickerDropdown extends React.PureComponent {
   }
 
   onToggle = (e) => {
-    if (!this.state.loading && (!e.key || e.key === 'Enter')) {
+    if (!this.state.disabled && !this.state.loading && (!e.key || e.key === 'Enter')) {
       if (this.state.active) {
         this.onHideDropdown();
       } else {
diff --git a/app/javascript/flavours/glitch/features/status/components/action_bar.js b/app/javascript/flavours/glitch/features/status/components/action_bar.js
index b6f8a98777..bd8c0d0cf4 100644
--- a/app/javascript/flavours/glitch/features/status/components/action_bar.js
+++ b/app/javascript/flavours/glitch/features/status/components/action_bar.js
@@ -4,10 +4,11 @@ import IconButton from 'flavours/glitch/components/icon_button';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import DropdownMenuContainer from 'flavours/glitch/containers/dropdown_menu_container';
 import { defineMessages, injectIntl } from 'react-intl';
-import { me } from 'flavours/glitch/initial_state';
+import { me, maxReactions } from 'flavours/glitch/initial_state';
 import { accountAdminLink, statusAdminLink } from 'flavours/glitch/utils/backend_links';
 import classNames from 'classnames';
 import { PERMISSION_MANAGE_USERS } from 'flavours/glitch/permissions';
+import EmojiPickerDropdown from '../../compose/containers/emoji_picker_dropdown_container';
 
 const messages = defineMessages({
   delete: { id: 'status.delete', defaultMessage: 'Delete' },
@@ -21,6 +22,7 @@ const messages = defineMessages({
   cancel_reblog_private: { id: 'status.cancel_reblog_private', defaultMessage: 'Unboost' },
   cannot_reblog: { id: 'status.cannot_reblog', defaultMessage: 'This post cannot be boosted' },
   favourite: { id: 'status.favourite', defaultMessage: 'Favourite' },
+  react: { id: 'status.react', defaultMessage: 'React' },
   bookmark: { id: 'status.bookmark', defaultMessage: 'Bookmark' },
   more: { id: 'status.more', defaultMessage: 'More' },
   mute: { id: 'status.mute', defaultMessage: 'Mute @{name}' },
@@ -51,6 +53,7 @@ class ActionBar extends React.PureComponent {
     onReply: PropTypes.func.isRequired,
     onReblog: PropTypes.func.isRequired,
     onFavourite: PropTypes.func.isRequired,
+    onReactionAdd: PropTypes.func.isRequired,
     onBookmark: PropTypes.func.isRequired,
     onMute: PropTypes.func,
     onMuteConversation: PropTypes.func,
@@ -77,6 +80,10 @@ class ActionBar extends React.PureComponent {
     this.props.onFavourite(this.props.status, e);
   }
 
+  handleEmojiPick = data => {
+    this.props.onReactionAdd(this.props.status.get('id'), data.native.replace(/:/g, ''));
+  }
+
   handleBookmarkClick = (e) => {
     this.props.onBookmark(this.props.status, e);
   }
@@ -137,6 +144,8 @@ class ActionBar extends React.PureComponent {
     navigator.clipboard.writeText(url);
   }
 
+  nop = () => {}
+
   render () {
     const { status, intl } = this.props;
     const { signedIn, permissions } = this.context.identity;
@@ -194,6 +203,17 @@ class ActionBar extends React.PureComponent {
       }
     }
 
+    const canReact = status.get('reactions').filter(r => r.get('count') > 0 && r.get('me')).size < maxReactions;
+    const reactButton = (
+      <IconButton
+        className='plus-icon'
+        onClick={this.nop} // EmojiPickerDropdown handles that
+        title={intl.formatMessage(messages.react)}
+        disabled={!canReact}
+        icon='plus'
+      />
+    );
+
     const shareButton = ('share' in navigator) && publicStatus && (
       <div className='detailed-status__button'><IconButton title={intl.formatMessage(messages.share)} icon='share-alt' onClick={this.handleShare} /></div>
     );
@@ -216,6 +236,7 @@ class ActionBar extends React.PureComponent {
         <div className='detailed-status__button'><IconButton title={intl.formatMessage(messages.reply)} icon={status.get('in_reply_to_id', null) === null ? 'reply' : 'reply-all'} onClick={this.handleReplyClick} /></div>
         <div className='detailed-status__button'><IconButton className={classNames({ reblogPrivate })} disabled={!publicStatus && !reblogPrivate} active={status.get('reblogged')} title={reblogTitle} icon='retweet' onClick={this.handleReblogClick} /></div>
         <div className='detailed-status__button'><IconButton className='star-icon' animate active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} /></div>
+        <div className='detailed-status__button'><EmojiPickerDropdown onPickEmoji={this.handleEmojiPick} button={reactButton} disabled={!canReact} /></div>
         {shareButton}
         <div className='detailed-status__button'><IconButton className='bookmark-icon' disabled={!signedIn} active={status.get('bookmarked')} title={intl.formatMessage(messages.bookmark)} icon='bookmark' onClick={this.handleBookmarkClick} /></div>
 
diff --git a/app/javascript/flavours/glitch/features/status/index.js b/app/javascript/flavours/glitch/features/status/index.js
index e94a47f0ee..e26029c271 100644
--- a/app/javascript/flavours/glitch/features/status/index.js
+++ b/app/javascript/flavours/glitch/features/status/index.js
@@ -721,6 +721,7 @@ class Status extends ImmutablePureComponent {
                   status={status}
                   onReply={this.handleReplyClick}
                   onFavourite={this.handleFavouriteClick}
+                  onReactionAdd={this.handleReactionAdd}
                   onReblog={this.handleReblogClick}
                   onBookmark={this.handleBookmarkClick}
                   onDelete={this.handleDeleteClick}
diff --git a/app/javascript/flavours/glitch/locales/de.js b/app/javascript/flavours/glitch/locales/de.js
index 9b2ff91d9b..a4daa59495 100644
--- a/app/javascript/flavours/glitch/locales/de.js
+++ b/app/javascript/flavours/glitch/locales/de.js
@@ -5,6 +5,8 @@ const messages = {
   'notifications.column_settings.reaction': 'Reaktionen:',
 
   'tooltips.reactions': 'Reaktionen',
+
+  'status.react': 'Reagieren',
 };
 
 export default Object.assign({}, inherited, messages);
diff --git a/app/javascript/flavours/glitch/locales/en.js b/app/javascript/flavours/glitch/locales/en.js
index a502171732..f6918fc4a5 100644
--- a/app/javascript/flavours/glitch/locales/en.js
+++ b/app/javascript/flavours/glitch/locales/en.js
@@ -115,6 +115,7 @@ const messages = {
   'settings.wide_view_hint': 'Stretches columns to better fill the available space.',
   'settings.navbar_under': 'Navbar at the bottom (Mobile only)',
   'status.collapse': 'Collapse',
+  'status.react': 'React',
   'status.uncollapse': 'Uncollapse',
   'status.in_reply_to': 'This toot is a reply',
   'status.has_preview_card': 'Features an attached preview card',
diff --git a/app/javascript/flavours/glitch/locales/fr.js b/app/javascript/flavours/glitch/locales/fr.js
index 82439c4bfb..3ebe055e0f 100644
--- a/app/javascript/flavours/glitch/locales/fr.js
+++ b/app/javascript/flavours/glitch/locales/fr.js
@@ -5,6 +5,8 @@ const messages = {
   'notifications.column_settings.reaction': 'Réactions:',
 
   'tooltips.reactions': 'Réactions',
+
+  'status.react': 'Réagir',
 };
 
 export default Object.assign({}, inherited, messages);

From 1b3df9b5e81643e3d0a97b65033acac3dfe14cde Mon Sep 17 00:00:00 2001
From: fef <owo@fef.moe>
Date: Tue, 29 Nov 2022 05:21:53 +0000
Subject: [PATCH 10/48] handle misskey reactions properly

misskey federates emoji reactions as likes.
---
 app/lib/activitypub/activity/emoji_react.rb |  4 +++-
 app/lib/activitypub/activity/like.rb        | 14 +++++++++++++-
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/app/lib/activitypub/activity/emoji_react.rb b/app/lib/activitypub/activity/emoji_react.rb
index 82c098f56e..595751aaae 100644
--- a/app/lib/activitypub/activity/emoji_react.rb
+++ b/app/lib/activitypub/activity/emoji_react.rb
@@ -9,6 +9,8 @@ class ActivityPub::Activity::EmojiReact < ActivityPub::Activity
       delete_arrived_first?(@json['id']) ||
       @account.reacted?(original_status, name)
 
-    original_status.status_reactions.create!(account: @account, name: name)
+    reaction = original_status.status_reactions.create!(account: @account, name: name)
+
+    LocalNotificationWorker.perform_async(original_status.account_id, reaction.id, 'StatusReaction', 'reaction')
   end
 end
diff --git a/app/lib/activitypub/activity/like.rb b/app/lib/activitypub/activity/like.rb
index aa1dc30403..6af516d109 100644
--- a/app/lib/activitypub/activity/like.rb
+++ b/app/lib/activitypub/activity/like.rb
@@ -3,8 +3,20 @@
 class ActivityPub::Activity::Like < ActivityPub::Activity
   def perform
     original_status = status_from_uri(object_uri)
+    return if original_status.nil? || !original_status.account.local? || delete_arrived_first?(@json['id'])
 
-    return if original_status.nil? || !original_status.account.local? || delete_arrived_first?(@json['id']) || @account.favourited?(original_status)
+    # misskey delivers reactions as likes and attaches the emoji in _misskey_reaction
+    mk_reaction = @json['_misskey_reaction']
+    unless mk_reaction.nil?
+      custom_emoji = CustomEmoji.find_by(shortcode: mk_reaction, domain: @account.domain)
+      return if @account.reacted?(original_status, mk_reaction, custom_emoji)
+
+      reaction = original_status.status_reactions.create!(account: @account, name: mk_reaction, custom_emoji: custom_emoji)
+      LocalNotificationWorker.perform_async(original_status.account_id, reaction.id, 'StatusReaction', 'reaction')
+      return
+    end
+
+    return if @account.favourited?(original_status)
 
     favourite = original_status.favourites.create!(account: @account)
 

From d862d9e06e8509863e47a0a583ba62fc68ebe707 Mon Sep 17 00:00:00 2001
From: fef <owo@fef.moe>
Date: Tue, 29 Nov 2022 06:25:43 +0000
Subject: [PATCH 11/48] fix padding for reaction button

---
 .../flavours/glitch/components/status_action_bar.js         | 2 +-
 .../flavours/glitch/styles/components/accounts.scss         | 4 ++++
 .../flavours/glitch/styles/components/status.scss           | 6 +++++-
 3 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/app/javascript/flavours/glitch/components/status_action_bar.js b/app/javascript/flavours/glitch/components/status_action_bar.js
index 342d1a13ce..9ce22a8ed5 100644
--- a/app/javascript/flavours/glitch/components/status_action_bar.js
+++ b/app/javascript/flavours/glitch/components/status_action_bar.js
@@ -335,7 +335,7 @@ class StatusActionBar extends ImmutablePureComponent {
         />
         <IconButton className={classNames('status__action-bar-button', { reblogPrivate })} disabled={!publicStatus && !reblogPrivate} active={status.get('reblogged')} title={reblogTitle} icon={reblogIcon} 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} />
-        <EmojiPickerDropdown onPickEmoji={this.handleEmojiPick} button={reactButton} disabled={!canReact} />
+        <EmojiPickerDropdown className='status__action-bar-button' onPickEmoji={this.handleEmojiPick} button={reactButton} disabled={!canReact} />
         {shareButton}
         <IconButton className='status__action-bar-button bookmark-icon' disabled={anonymousAccess} active={status.get('bookmarked')} title={intl.formatMessage(messages.bookmark)} icon='bookmark' onClick={this.handleBookmarkClick} />
 
diff --git a/app/javascript/flavours/glitch/styles/components/accounts.scss b/app/javascript/flavours/glitch/styles/components/accounts.scss
index 5b3e1db1bc..e802ce74c4 100644
--- a/app/javascript/flavours/glitch/styles/components/accounts.scss
+++ b/app/javascript/flavours/glitch/styles/components/accounts.scss
@@ -306,6 +306,10 @@
   text-align: center;
 }
 
+.detailed-status__button .emoji-button {
+  padding: 0;
+}
+
 .relationship-tag {
   color: $primary-text-color;
   margin-bottom: 4px;
diff --git a/app/javascript/flavours/glitch/styles/components/status.scss b/app/javascript/flavours/glitch/styles/components/status.scss
index 39184ba7a0..d6cae4aaaf 100644
--- a/app/javascript/flavours/glitch/styles/components/status.scss
+++ b/app/javascript/flavours/glitch/styles/components/status.scss
@@ -406,7 +406,7 @@
         background: linear-gradient(rgba($ui-base-color, 0), rgba($ui-base-color, 1));
         pointer-events: none;
       }
-      
+
       a:hover {
         text-decoration: none;
       }
@@ -575,6 +575,10 @@
   align-items: center;
   display: flex;
   margin-top: 8px;
+
+  & > .emoji-picker-dropdown > .emoji-button {
+    padding: 0;
+  }
 }
 
 .status__action-bar-button {

From 89a8c21f802e97c6929365c5c2d6246b0c58e6af Mon Sep 17 00:00:00 2001
From: fef <owo@fef.moe>
Date: Tue, 29 Nov 2022 08:15:52 +0000
Subject: [PATCH 12/48] cleanup backend emoji reaction code

---
 app/controllers/api/v1/statuses/reactions_controller.rb       | 4 ++--
 app/serializers/activitypub/emoji_reaction_serializer.rb      | 4 +---
 app/services/{status_reaction_service.rb => react_service.rb} | 2 +-
 .../{status_unreaction_service.rb => unreact_service.rb}      | 2 +-
 4 files changed, 5 insertions(+), 7 deletions(-)
 rename app/services/{status_reaction_service.rb => react_service.rb} (95%)
 rename app/services/{status_unreaction_service.rb => unreact_service.rb} (92%)

diff --git a/app/controllers/api/v1/statuses/reactions_controller.rb b/app/controllers/api/v1/statuses/reactions_controller.rb
index f7dc2f99ce..db43346def 100644
--- a/app/controllers/api/v1/statuses/reactions_controller.rb
+++ b/app/controllers/api/v1/statuses/reactions_controller.rb
@@ -8,12 +8,12 @@ class Api::V1::Statuses::ReactionsController < Api::BaseController
   before_action :set_reaction, except: :update
 
   def update
-    StatusReactionService.new.call(current_account, @status, params[:id])
+    ReactService.new.call(current_account, @status, params[:id])
     render_empty
   end
 
   def destroy
-    StatusUnreactionService.new.call(current_account, @status)
+    UnreactService.new.call(current_account, @status)
     render_empty
   end
 
diff --git a/app/serializers/activitypub/emoji_reaction_serializer.rb b/app/serializers/activitypub/emoji_reaction_serializer.rb
index b4111150a4..50f3efa3cb 100644
--- a/app/serializers/activitypub/emoji_reaction_serializer.rb
+++ b/app/serializers/activitypub/emoji_reaction_serializer.rb
@@ -30,7 +30,5 @@ class ActivityPub::EmojiReactionSerializer < ActivityPub::Serializer
     end
   end
 
-  def reaction
-    content
-  end
+  alias reaction content
 end
diff --git a/app/services/status_reaction_service.rb b/app/services/react_service.rb
similarity index 95%
rename from app/services/status_reaction_service.rb
rename to app/services/react_service.rb
index 9451690dd1..773dd3fd6c 100644
--- a/app/services/status_reaction_service.rb
+++ b/app/services/react_service.rb
@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-class StatusReactionService < BaseService
+class ReactService < BaseService
   include Authorization
   include Payloadable
 
diff --git a/app/services/status_unreaction_service.rb b/app/services/unreact_service.rb
similarity index 92%
rename from app/services/status_unreaction_service.rb
rename to app/services/unreact_service.rb
index 13c3c428db..ebc270383c 100644
--- a/app/services/status_unreaction_service.rb
+++ b/app/services/unreact_service.rb
@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-class StatusUnreactionService < BaseService
+class UnreactService < BaseService
   include Payloadable
 
   def call(account, status)

From f129b47f1388bd5efbdb1dfc6c4a7719ffc6a76f Mon Sep 17 00:00:00 2001
From: fef <owo@fef.moe>
Date: Tue, 29 Nov 2022 08:54:35 +0000
Subject: [PATCH 13/48] cleanup frontend emoji reaction code

---
 .../flavours/glitch/actions/interactions.js   | 54 +++++++++----------
 .../flavours/glitch/components/status.js      |  4 +-
 .../glitch/components/status_action_bar.js    |  1 +
 ...s_reactions_bar.js => status_reactions.js} |  2 +-
 .../glitch/containers/status_container.js     | 12 ++---
 .../features/status/components/action_bar.js  |  2 +-
 .../status/components/detailed_status.js      |  4 +-
 .../flavours/glitch/features/status/index.js  | 17 +++---
 .../flavours/glitch/reducers/statuses.js      | 20 +++----
 .../flavours/glitch/selectors/index.js        | 10 +++-
 .../flavours/glitch/utils/emoji_map.js        | 11 ----
 11 files changed, 65 insertions(+), 72 deletions(-)
 rename app/javascript/flavours/glitch/components/{status_reactions_bar.js => status_reactions.js} (98%)
 delete mode 100644 app/javascript/flavours/glitch/utils/emoji_map.js

diff --git a/app/javascript/flavours/glitch/actions/interactions.js b/app/javascript/flavours/glitch/actions/interactions.js
index ab275621c2..f65d7ec490 100644
--- a/app/javascript/flavours/glitch/actions/interactions.js
+++ b/app/javascript/flavours/glitch/actions/interactions.js
@@ -41,15 +41,15 @@ export const UNBOOKMARK_REQUEST = 'UNBOOKMARKED_REQUEST';
 export const UNBOOKMARK_SUCCESS = 'UNBOOKMARKED_SUCCESS';
 export const UNBOOKMARK_FAIL    = 'UNBOOKMARKED_FAIL';
 
-export const STATUS_REACTION_UPDATE = 'STATUS_REACTION_UPDATE';
+export const REACTION_UPDATE = 'REACTION_UPDATE';
 
-export const STATUS_REACTION_ADD_REQUEST = 'STATUS_REACTION_ADD_REQUEST';
-export const STATUS_REACTION_ADD_SUCCESS = 'STATUS_REACTION_ADD_SUCCESS';
-export const STATUS_REACTION_ADD_FAIL    = 'STATUS_REACTION_ADD_FAIL';
+export const REACTION_ADD_REQUEST = 'REACTION_ADD_REQUEST';
+export const REACTION_ADD_SUCCESS = 'REACTION_ADD_SUCCESS';
+export const REACTION_ADD_FAIL    = 'REACTION_ADD_FAIL';
 
-export const STATUS_REACTION_REMOVE_REQUEST = 'STATUS_REACTION_REMOVE_REQUEST';
-export const STATUS_REACTION_REMOVE_SUCCESS = 'STATUS_REACTION_REMOVE_SUCCESS';
-export const STATUS_REACTION_REMOVE_FAIL    = 'STATUS_REACTION_REMOVE_FAIL';
+export const REACTION_REMOVE_REQUEST = 'REACTION_REMOVE_REQUEST';
+export const REACTION_REMOVE_SUCCESS = 'REACTION_REMOVE_SUCCESS';
+export const REACTION_REMOVE_FAIL    = 'REACTION_REMOVE_FAIL';
 
 export function reblog(status, visibility) {
   return function (dispatch, getState) {
@@ -403,7 +403,7 @@ export function unpinFail(status, error) {
   };
 };
 
-export const statusAddReaction = (statusId, name) => (dispatch, getState) => {
+export const addReaction = (statusId, name) => (dispatch, getState) => {
   const status = getState().get('statuses').get(statusId);
   let alreadyAdded = false;
   if (status) {
@@ -413,66 +413,66 @@ export const statusAddReaction = (statusId, name) => (dispatch, getState) => {
     }
   }
   if (!alreadyAdded) {
-    dispatch(statusAddReactionRequest(statusId, name, alreadyAdded));
+    dispatch(addReactionRequest(statusId, name, alreadyAdded));
   }
 
   api(getState).put(`/api/v1/statuses/${statusId}/reactions/${name}`).then(() => {
-    dispatch(statusAddReactionSuccess(statusId, name, alreadyAdded));
+    dispatch(addReactionSuccess(statusId, name, alreadyAdded));
   }).catch(err => {
     if (!alreadyAdded) {
-      dispatch(statusAddReactionFail(statusId, name, err));
+      dispatch(addReactionFail(statusId, name, err));
     }
   });
 };
 
-export const statusAddReactionRequest = (statusId, name) => ({
-  type: STATUS_REACTION_ADD_REQUEST,
+export const addReactionRequest = (statusId, name) => ({
+  type: REACTION_ADD_REQUEST,
   id: statusId,
   name,
   skipLoading: true,
 });
 
-export const statusAddReactionSuccess = (statusId, name) => ({
-  type: STATUS_REACTION_ADD_SUCCESS,
+export const addReactionSuccess = (statusId, name) => ({
+  type: REACTION_ADD_SUCCESS,
   id: statusId,
   name,
   skipLoading: true,
 });
 
-export const statusAddReactionFail = (statusId, name, error) => ({
-  type: STATUS_REACTION_ADD_FAIL,
+export const addReactionFail = (statusId, name, error) => ({
+  type: REACTION_ADD_FAIL,
   id: statusId,
   name,
   error,
   skipLoading: true,
 });
 
-export const statusRemoveReaction = (statusId, name) => (dispatch, getState) => {
-  dispatch(statusRemoveReactionRequest(statusId, name));
+export const removeReaction = (statusId, name) => (dispatch, getState) => {
+  dispatch(removeReactionRequest(statusId, name));
 
   api(getState).delete(`/api/v1/statuses/${statusId}/reactions/${name}`).then(() => {
-    dispatch(statusRemoveReactionSuccess(statusId, name));
+    dispatch(removeReactionSuccess(statusId, name));
   }).catch(err => {
-    dispatch(statusRemoveReactionFail(statusId, name, err));
+    dispatch(removeReactionFail(statusId, name, err));
   });
 };
 
-export const statusRemoveReactionRequest = (statusId, name) => ({
-  type: STATUS_REACTION_REMOVE_REQUEST,
+export const removeReactionRequest = (statusId, name) => ({
+  type: REACTION_REMOVE_REQUEST,
   id: statusId,
   name,
   skipLoading: true,
 });
 
-export const statusRemoveReactionSuccess = (statusId, name) => ({
-  type: STATUS_REACTION_REMOVE_SUCCESS,
+export const removeReactionSuccess = (statusId, name) => ({
+  type: REACTION_REMOVE_SUCCESS,
   id: statusId,
   name,
   skipLoading: true,
 });
 
-export const statusRemoveReactionFail = (statusId, name) => ({
-  type: STATUS_REACTION_REMOVE_FAIL,
+export const removeReactionFail = (statusId, name) => ({
+  type: REACTION_REMOVE_FAIL,
   id: statusId,
   name,
   skipLoading: true,
diff --git a/app/javascript/flavours/glitch/components/status.js b/app/javascript/flavours/glitch/components/status.js
index 05fecdb968..70c1a99910 100644
--- a/app/javascript/flavours/glitch/components/status.js
+++ b/app/javascript/flavours/glitch/components/status.js
@@ -6,7 +6,7 @@ import StatusHeader from './status_header';
 import StatusIcons from './status_icons';
 import StatusContent from './status_content';
 import StatusActionBar from './status_action_bar';
-import StatusReactionsBar from './status_reactions_bar';
+import StatusReactions from './status_reactions';
 import AttachmentList from './attachment_list';
 import Card from '../features/status/components/card';
 import { injectIntl, FormattedMessage } from 'react-intl';
@@ -805,7 +805,7 @@ class Status extends ImmutablePureComponent {
             rewriteMentions={settings.get('rewrite_mentions')}
           />
 
-          <StatusReactionsBar
+          <StatusReactions
             statusId={status.get('id')}
             reactions={status.get('reactions')}
             addReaction={this.props.onReactionAdd}
diff --git a/app/javascript/flavours/glitch/components/status_action_bar.js b/app/javascript/flavours/glitch/components/status_action_bar.js
index 9ce22a8ed5..1b88d0ea7f 100644
--- a/app/javascript/flavours/glitch/components/status_action_bar.js
+++ b/app/javascript/flavours/glitch/components/status_action_bar.js
@@ -59,6 +59,7 @@ class StatusActionBar extends ImmutablePureComponent {
     status: ImmutablePropTypes.map.isRequired,
     onReply: PropTypes.func,
     onFavourite: PropTypes.func,
+    onReactionAdd: PropTypes.func,
     onReblog: PropTypes.func,
     onDelete: PropTypes.func,
     onDirect: PropTypes.func,
diff --git a/app/javascript/flavours/glitch/components/status_reactions_bar.js b/app/javascript/flavours/glitch/components/status_reactions.js
similarity index 98%
rename from app/javascript/flavours/glitch/components/status_reactions_bar.js
rename to app/javascript/flavours/glitch/components/status_reactions.js
index 912e1b1ba5..c0ad827fc5 100644
--- a/app/javascript/flavours/glitch/components/status_reactions_bar.js
+++ b/app/javascript/flavours/glitch/components/status_reactions.js
@@ -11,7 +11,7 @@ import AnimatedNumber from './animated_number';
 import { assetHost } from '../utils/config';
 import { autoPlayGif } from '../initial_state';
 
-export default class StatusReactionsBar extends ImmutablePureComponent {
+export default class StatusReactions extends ImmutablePureComponent {
 
   static propTypes = {
     statusId: PropTypes.string.isRequired,
diff --git a/app/javascript/flavours/glitch/containers/status_container.js b/app/javascript/flavours/glitch/containers/status_container.js
index 381276d9dc..c2fd15b17c 100644
--- a/app/javascript/flavours/glitch/containers/status_container.js
+++ b/app/javascript/flavours/glitch/containers/status_container.js
@@ -15,8 +15,8 @@ import {
   unbookmark,
   pin,
   unpin,
-  statusAddReaction,
-  statusRemoveReaction,
+  addReaction,
+  removeReaction,
 } from 'flavours/glitch/actions/interactions';
 import {
   muteStatus,
@@ -45,7 +45,7 @@ import { showAlertForError } from '../actions/alerts';
 import AccountContainer from 'flavours/glitch/containers/account_container';
 import Spoilers from '../components/spoilers';
 import Icon from 'flavours/glitch/components/icon';
-import buildCustomEmojiMap from '../utils/emoji_map';
+import { makeCustomEmojiMap } from '../selectors';
 
 const messages = defineMessages({
   deleteConfirm: { id: 'confirmations.delete.confirm', defaultMessage: 'Delete' },
@@ -85,7 +85,7 @@ const makeMapStateToProps = () => {
       account: account || props.account,
       settings: state.get('local_settings'),
       prepend: prepend || props.prepend,
-      emojiMap: buildCustomEmojiMap(state),
+      emojiMap: makeCustomEmojiMap(state),
 
       pictureInPicture: {
         inUse: state.getIn(['meta', 'layout']) !== 'mobile' && state.get('picture_in_picture').statusId === props.id,
@@ -170,11 +170,11 @@ const mapDispatchToProps = (dispatch, { intl, contextType }) => ({
   },
 
   onReactionAdd (statusId, name) {
-    dispatch(statusAddReaction(statusId, name));
+    dispatch(addReaction(statusId, name));
   },
 
   onReactionRemove (statusId, name) {
-    dispatch(statusRemoveReaction(statusId, name));
+    dispatch(removeReaction(statusId, name));
   },
 
   onEmbed (status) {
diff --git a/app/javascript/flavours/glitch/features/status/components/action_bar.js b/app/javascript/flavours/glitch/features/status/components/action_bar.js
index bd8c0d0cf4..f93e3d0a3d 100644
--- a/app/javascript/flavours/glitch/features/status/components/action_bar.js
+++ b/app/javascript/flavours/glitch/features/status/components/action_bar.js
@@ -144,7 +144,7 @@ class ActionBar extends React.PureComponent {
     navigator.clipboard.writeText(url);
   }
 
-  nop = () => {}
+  nop = () => {} // hack for reaction add button
 
   render () {
     const { status, intl } = this.props;
diff --git a/app/javascript/flavours/glitch/features/status/components/detailed_status.js b/app/javascript/flavours/glitch/features/status/components/detailed_status.js
index b2f38ff1ff..68e199e9c3 100644
--- a/app/javascript/flavours/glitch/features/status/components/detailed_status.js
+++ b/app/javascript/flavours/glitch/features/status/components/detailed_status.js
@@ -20,7 +20,7 @@ import Icon from 'flavours/glitch/components/icon';
 import AnimatedNumber from 'flavours/glitch/components/animated_number';
 import PictureInPicturePlaceholder from 'flavours/glitch/components/picture_in_picture_placeholder';
 import EditedTimestamp from 'flavours/glitch/components/edited_timestamp';
-import StatusReactionsBar from '../../../components/status_reactions_bar';
+import StatusReactions from '../../../components/status_reactions';
 
 export default @injectIntl
 class DetailedStatus extends ImmutablePureComponent {
@@ -323,7 +323,7 @@ class DetailedStatus extends ImmutablePureComponent {
             disabled
           />
 
-          <StatusReactionsBar
+          <StatusReactions
             statusId={status.get('id')}
             reactions={status.get('reactions')}
             addReaction={this.props.onReactionAdd}
diff --git a/app/javascript/flavours/glitch/features/status/index.js b/app/javascript/flavours/glitch/features/status/index.js
index e26029c271..8479ca57b5 100644
--- a/app/javascript/flavours/glitch/features/status/index.js
+++ b/app/javascript/flavours/glitch/features/status/index.js
@@ -20,8 +20,8 @@ import {
   unreblog,
   pin,
   unpin,
-  statusAddReaction,
-  statusRemoveReaction,
+  addReaction,
+  removeReaction,
 } from 'flavours/glitch/actions/interactions';
 import {
   replyCompose,
@@ -58,7 +58,7 @@ import { autoUnfoldCW } from 'flavours/glitch/utils/content_warning';
 import { textForScreenReader, defaultMediaVisibility } from 'flavours/glitch/components/status';
 import Icon from 'flavours/glitch/components/icon';
 import { Helmet } from 'react-helmet';
-import buildCustomEmojiMap from '../../utils/emoji_map';
+import { makeCustomEmojiMap } from '../../selectors';
 
 const messages = defineMessages({
   deleteConfirm: { id: 'confirmations.delete.confirm', defaultMessage: 'Delete' },
@@ -149,7 +149,7 @@ const makeMapStateToProps = () => {
       askReplyConfirmation: state.getIn(['local_settings', 'confirm_before_clearing_draft']) && state.getIn(['compose', 'text']).trim().length !== 0,
       domain: state.getIn(['meta', 'domain']),
       usingPiP: state.get('picture_in_picture').statusId === props.params.statusId,
-      emojiMap: buildCustomEmojiMap(state),
+      emojiMap: makeCustomEmojiMap(state),
     };
   };
 
@@ -300,7 +300,7 @@ class Status extends ImmutablePureComponent {
     const { signedIn } = this.context.identity;
 
     if (signedIn) {
-      dispatch(statusAddReaction(statusId, name));
+      dispatch(addReaction(statusId, name));
     } else {
       dispatch(openModal('INTERACTION', {
         type: 'reaction_add',
@@ -311,12 +311,7 @@ class Status extends ImmutablePureComponent {
   }
 
   handleReactionRemove = (statusId, name) => {
-    const { dispatch } = this.props;
-    const { signedIn } = this.context.identity;
-
-    if (signedIn) {
-      dispatch(statusRemoveReaction(statusId, name));
-    }
+    this.props.dispatch(removeReaction(statusId, name));
   }
 
   handlePin = (status) => {
diff --git a/app/javascript/flavours/glitch/reducers/statuses.js b/app/javascript/flavours/glitch/reducers/statuses.js
index 605238bc29..22fdeb2841 100644
--- a/app/javascript/flavours/glitch/reducers/statuses.js
+++ b/app/javascript/flavours/glitch/reducers/statuses.js
@@ -6,11 +6,11 @@ import {
   UNFAVOURITE_SUCCESS,
   BOOKMARK_REQUEST,
   BOOKMARK_FAIL,
-  STATUS_REACTION_UPDATE,
-  STATUS_REACTION_ADD_FAIL,
-  STATUS_REACTION_REMOVE_FAIL,
-  STATUS_REACTION_ADD_REQUEST,
-  STATUS_REACTION_REMOVE_REQUEST,
+  REACTION_UPDATE,
+  REACTION_ADD_FAIL,
+  REACTION_REMOVE_FAIL,
+  REACTION_ADD_REQUEST,
+  REACTION_REMOVE_REQUEST,
 } from 'flavours/glitch/actions/interactions';
 import {
   STATUS_MUTE_SUCCESS,
@@ -99,13 +99,13 @@ export default function statuses(state = initialState, action) {
     return state.setIn([action.status.get('id'), 'reblogged'], true);
   case REBLOG_FAIL:
     return state.get(action.status.get('id')) === undefined ? state : state.setIn([action.status.get('id'), 'reblogged'], false);
-  case STATUS_REACTION_UPDATE:
+  case REACTION_UPDATE:
     return updateReactionCount(state, action.reaction);
-  case STATUS_REACTION_ADD_REQUEST:
-  case STATUS_REACTION_REMOVE_FAIL:
+  case REACTION_ADD_REQUEST:
+  case REACTION_REMOVE_FAIL:
     return addReaction(state, action.id, action.name);
-  case STATUS_REACTION_REMOVE_REQUEST:
-  case STATUS_REACTION_ADD_FAIL:
+  case REACTION_REMOVE_REQUEST:
+  case REACTION_ADD_FAIL:
     return removeReaction(state, action.id, action.name);
   case STATUS_MUTE_SUCCESS:
     return state.setIn([action.id, 'muted'], true);
diff --git a/app/javascript/flavours/glitch/selectors/index.js b/app/javascript/flavours/glitch/selectors/index.js
index df46b58a8e..ab7ac248b7 100644
--- a/app/javascript/flavours/glitch/selectors/index.js
+++ b/app/javascript/flavours/glitch/selectors/index.js
@@ -1,6 +1,6 @@
 import escapeTextContentForBrowser from 'escape-html';
 import { createSelector } from 'reselect';
-import { List as ImmutableList } from 'immutable';
+import { List as ImmutableList, Map as ImmutableMap } from 'immutable';
 import { toServerSideType } from 'flavours/glitch/utils/filters';
 import { me } from 'flavours/glitch/initial_state';
 
@@ -127,3 +127,11 @@ export const getAccountHidden = createSelector([
 ], (hidden, followingOrRequested, isSelf) => {
   return hidden && !(isSelf || followingOrRequested);
 });
+
+export const makeCustomEmojiMap = createSelector(
+  [state => state.get('custom_emojis')],
+  items => items.reduce(
+    (map, emoji) => map.set(emoji.get('shortcode'), emoji),
+    ImmutableMap(),
+  ),
+);
diff --git a/app/javascript/flavours/glitch/utils/emoji_map.js b/app/javascript/flavours/glitch/utils/emoji_map.js
deleted file mode 100644
index 1bf36d0fd2..0000000000
--- a/app/javascript/flavours/glitch/utils/emoji_map.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import { createSelector } from 'reselect';
-import { Map as ImmutableMap } from 'immutable';
-
-const buildCustomEmojiMap = createSelector(
-  [state => state.get('custom_emojis')],
-  items => items.reduce(
-    (map, emoji) => map.set(emoji.get('shortcode'), emoji),
-    ImmutableMap(),
-  ),
-);
-export default buildCustomEmojiMap;

From 21b5bb587dcdb287a7bb26cead1730476ab9ff7b Mon Sep 17 00:00:00 2001
From: fef <owo@fef.moe>
Date: Tue, 29 Nov 2022 09:07:10 +0000
Subject: [PATCH 14/48] fix reaction margins and paddings

---
 .../flavours/glitch/styles/components/status.scss    | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/app/javascript/flavours/glitch/styles/components/status.scss b/app/javascript/flavours/glitch/styles/components/status.scss
index d6cae4aaaf..8b0bd49fef 100644
--- a/app/javascript/flavours/glitch/styles/components/status.scss
+++ b/app/javascript/flavours/glitch/styles/components/status.scss
@@ -430,6 +430,10 @@
   .notification__message {
     margin: -10px 0px 10px 0;
   }
+
+  .reactions-bar--empty {
+    margin-top: 0;
+  }
 }
 
 .notification-favourite {
@@ -587,6 +591,10 @@
   &.icon-button--with-counter {
     margin-right: 14px;
   }
+
+  .fa-plus {
+    padding-top: 1px;
+  }
 }
 
 .status__action-bar-dropdown {
@@ -649,6 +657,10 @@
   display: flex;
   flex-direction: row;
   padding: 10px 0;
+
+  .fa-plus {
+    padding-top: 2px;
+  }
 }
 
 .detailed-status__link {

From 38b8c494b86573ea81119e57991f63b0bbfbe32b Mon Sep 17 00:00:00 2001
From: fef <owo@fef.moe>
Date: Wed, 30 Nov 2022 09:06:14 +0000
Subject: [PATCH 15/48] limit number of reactions displayed

Too many reactions on a single post quickly get
spammy, so they are now sorted by count and only
the first MAX_REACTIONS number of different
emojis are actually displayed.
---
 .../flavours/glitch/components/status_reactions.js         | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/app/javascript/flavours/glitch/components/status_reactions.js b/app/javascript/flavours/glitch/components/status_reactions.js
index c0ad827fc5..cc85a0189a 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 { reduceMotion } from '../initial_state';
+import { maxReactions, reduceMotion } from '../initial_state';
 import spring from 'react-motion/lib/spring';
 import TransitionMotion from 'react-motion/lib/TransitionMotion';
 import classNames from 'classnames';
@@ -36,7 +36,10 @@ export default class StatusReactions extends ImmutablePureComponent {
 
   render() {
     const { reactions } = this.props;
-    const visibleReactions = reactions.filter(x => x.get('count') > 0);
+    const visibleReactions = reactions
+      .filter(x => x.get('count') > 0)
+      .sort((a, b) => b.get('count') - a.get('count'))
+      .filter((_, i) => i < maxReactions);
 
     const styles = visibleReactions.map(reaction => ({
       key: reaction.get('name'),

From c19e74051ca0f47f5672db1aabbeceaba82241e0 Mon Sep 17 00:00:00 2001
From: fef <owo@fef.moe>
Date: Wed, 30 Nov 2022 12:01:34 +0000
Subject: [PATCH 16/48] change default reaction limit to 1

---
 app/validators/status_reaction_validator.rb | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/validators/status_reaction_validator.rb b/app/validators/status_reaction_validator.rb
index fa6fb2e765..a60271dd84 100644
--- a/app/validators/status_reaction_validator.rb
+++ b/app/validators/status_reaction_validator.rb
@@ -3,7 +3,7 @@
 class StatusReactionValidator < ActiveModel::Validator
   SUPPORTED_EMOJIS = Oj.load_file(Rails.root.join('app', 'javascript', 'mastodon', 'features', 'emoji', 'emoji_map.json').to_s).keys.freeze
 
-  LIMIT = [1, (ENV['MAX_REACTIONS'] || 8).to_i].max
+  LIMIT = [1, (ENV['MAX_REACTIONS'] || 1).to_i].max
 
   def validate(reaction)
     return if reaction.name.blank?

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 17/48] 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,

From 7250a4f6c250b7abd05695f8bd75c7169e4e9d3c Mon Sep 17 00:00:00 2001
From: fef <owo@fef.moe>
Date: Wed, 30 Nov 2022 14:59:37 +0000
Subject: [PATCH 18/48] make number of visible reactions a vanilla setting

Reactions will be backported to the vanilla
flavour, which requires all related settings to
be accessible from the vanilla settings page
rather than the glitch specific settings modal.
---
 app/controllers/settings/preferences_controller.rb    |  1 +
 app/javascript/flavours/glitch/components/status.js   |  4 ++--
 .../glitch/features/local_settings/page/index.js      | 11 -----------
 app/javascript/flavours/glitch/initial_state.js       |  5 ++---
 app/javascript/flavours/glitch/locales/de.js          |  3 ---
 app/javascript/flavours/glitch/locales/en.js          |  2 --
 app/javascript/flavours/glitch/locales/fr.js          |  3 ---
 .../flavours/glitch/reducers/local_settings.js        |  1 -
 app/lib/user_settings_decorator.rb                    |  9 +++++++++
 app/models/user.rb                                    |  2 +-
 app/serializers/initial_state_serializer.rb           |  1 +
 .../settings/preferences/appearance/show.html.haml    |  3 +++
 config/locales/simple_form.de.yml                     |  1 +
 config/locales/simple_form.en.yml                     |  1 +
 config/locales/simple_form.fr.yml                     |  1 +
 config/settings.yml                                   |  1 +
 16 files changed, 23 insertions(+), 26 deletions(-)

diff --git a/app/controllers/settings/preferences_controller.rb b/app/controllers/settings/preferences_controller.rb
index 4c13364369..39715b724b 100644
--- a/app/controllers/settings/preferences_controller.rb
+++ b/app/controllers/settings/preferences_controller.rb
@@ -57,6 +57,7 @@ class Settings::PreferencesController < Settings::BaseController
       :setting_use_pending_items,
       :setting_trends,
       :setting_crop_images,
+      :setting_visible_reactions,
       :setting_always_send_emails,
       notification_emails: %i(follow follow_request reblog favourite mention report pending_account trending_tag trending_link trending_status appeal),
       interactions: %i(must_be_follower must_be_following must_be_following_dm)
diff --git a/app/javascript/flavours/glitch/components/status.js b/app/javascript/flavours/glitch/components/status.js
index 04145a384b..3ef5f453fd 100644
--- a/app/javascript/flavours/glitch/components/status.js
+++ b/app/javascript/flavours/glitch/components/status.js
@@ -17,7 +17,7 @@ import NotificationOverlayContainer from 'flavours/glitch/features/notifications
 import classNames from 'classnames';
 import { autoUnfoldCW } from 'flavours/glitch/utils/content_warning';
 import PollContainer from 'flavours/glitch/containers/poll_container';
-import { displayMedia } from 'flavours/glitch/initial_state';
+import { displayMedia, visibleReactions } from 'flavours/glitch/initial_state';
 import PictureInPicturePlaceholder from 'flavours/glitch/components/picture_in_picture_placeholder';
 
 // We use the component (and not the container) since we do not want
@@ -808,7 +808,7 @@ class Status extends ImmutablePureComponent {
           <StatusReactions
             statusId={status.get('id')}
             reactions={status.get('reactions')}
-            numVisible={settings.get('num_visible_reactions')}
+            numVisible={visibleReactions}
             addReaction={this.props.onReactionAdd}
             removeReaction={this.props.onReactionRemove}
             emojiMap={this.props.emojiMap}
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 e88e50b674..cc8e1f8f22 100644
--- a/app/javascript/flavours/glitch/features/local_settings/page/index.js
+++ b/app/javascript/flavours/glitch/features/local_settings/page/index.js
@@ -29,7 +29,6 @@ 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' },
 });
 
@@ -94,16 +93,6 @@ 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/initial_state.js b/app/javascript/flavours/glitch/initial_state.js
index 4391b0c75d..cafa5b1bbb 100644
--- a/app/javascript/flavours/glitch/initial_state.js
+++ b/app/javascript/flavours/glitch/initial_state.js
@@ -121,8 +121,10 @@ export const expandSpoilers = getMeta('expand_spoilers');
 export const forceSingleColumn = !getMeta('advanced_layout');
 export const limitedFederationMode = getMeta('limited_federation_mode');
 export const mascot = getMeta('mascot');
+export const maxReactions = (initialState && initialState.max_reactions) || 1;
 export const me = getMeta('me');
 export const movedToAccountId = getMeta('moved_to_account_id');
+export const visibleReactions = getMeta('visible_reactions');
 export const owner = getMeta('owner');
 export const profile_directory = getMeta('profile_directory');
 export const reduceMotion = getMeta('reduce_motion');
@@ -148,7 +150,4 @@ export const pollLimits = (initialState && initialState.poll_limits);
 export const defaultContentType = getMeta('default_content_type');
 export const useSystemEmojiFont = getMeta('system_emoji_font');
 
-// nyastodon-specific settings
-export const maxReactions = (initialState && initialState.max_reactions) || 8;
-
 export default initialState;
diff --git a/app/javascript/flavours/glitch/locales/de.js b/app/javascript/flavours/glitch/locales/de.js
index 18eb398d84..a4daa59495 100644
--- a/app/javascript/flavours/glitch/locales/de.js
+++ b/app/javascript/flavours/glitch/locales/de.js
@@ -6,9 +6,6 @@ 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 54a4c2940c..f6918fc4a5 100644
--- a/app/javascript/flavours/glitch/locales/en.js
+++ b/app/javascript/flavours/glitch/locales/en.js
@@ -47,7 +47,6 @@ 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:',
@@ -105,7 +104,6 @@ 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 802c71896e..3ebe055e0f 100644
--- a/app/javascript/flavours/glitch/locales/fr.js
+++ b/app/javascript/flavours/glitch/locales/fr.js
@@ -6,9 +6,6 @@ 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 9a5e022061..81ab1cb0d8 100644
--- a/app/javascript/flavours/glitch/reducers/local_settings.js
+++ b/app/javascript/flavours/glitch/reducers/local_settings.js
@@ -23,7 +23,6 @@ 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,
diff --git a/app/lib/user_settings_decorator.rb b/app/lib/user_settings_decorator.rb
index 260077a1c1..17fbacf0dd 100644
--- a/app/lib/user_settings_decorator.rb
+++ b/app/lib/user_settings_decorator.rb
@@ -43,6 +43,7 @@ class UserSettingsDecorator
     user.settings['use_pending_items']   = use_pending_items_preference if change?('setting_use_pending_items')
     user.settings['trends']              = trends_preference if change?('setting_trends')
     user.settings['crop_images']         = crop_images_preference if change?('setting_crop_images')
+    user.settings['visible_reactions']   = visible_reactions_preference if change?('setting_visible_reactions')
     user.settings['always_send_emails']  = always_send_emails_preference if change?('setting_always_send_emails')
   end
 
@@ -158,6 +159,10 @@ class UserSettingsDecorator
     boolean_cast_setting 'setting_crop_images'
   end
 
+  def visible_reactions_preference
+    integer_cast_setting 'setting_visible_reactions'
+  end
+
   def always_send_emails_preference
     boolean_cast_setting 'setting_always_send_emails'
   end
@@ -166,6 +171,10 @@ class UserSettingsDecorator
     ActiveModel::Type::Boolean.new.cast(settings[key])
   end
 
+  def integer_cast_setting(key)
+    ActiveModel::Type::Integer.new.cast(settings[key])
+  end
+
   def coerced_settings(key)
     coerce_values settings.fetch(key, {})
   end
diff --git a/app/models/user.rb b/app/models/user.rb
index 4344da2ffc..b0dcfb093a 100644
--- a/app/models/user.rb
+++ b/app/models/user.rb
@@ -134,7 +134,7 @@ class User < ApplicationRecord
   delegate :auto_play_gif, :default_sensitive, :unfollow_modal, :boost_modal, :favourite_modal, :delete_modal,
            :reduce_motion, :system_font_ui, :noindex, :flavour, :skin, :display_media, :hide_followers_count,
            :expand_spoilers, :default_language, :aggregate_reblogs, :show_application,
-           :advanced_layout, :use_blurhash, :use_pending_items, :trends, :crop_images,
+           :advanced_layout, :use_blurhash, :use_pending_items, :trends, :crop_images, :visible_reactions,
            :disable_swiping, :always_send_emails, :default_content_type, :system_emoji_font,
            to: :settings, prefix: :setting, allow_nil: false
 
diff --git a/app/serializers/initial_state_serializer.rb b/app/serializers/initial_state_serializer.rb
index 76b2ff2a24..65d80d6e7f 100644
--- a/app/serializers/initial_state_serializer.rb
+++ b/app/serializers/initial_state_serializer.rb
@@ -70,6 +70,7 @@ class InitialStateSerializer < ActiveModel::Serializer
       store[:default_content_type] = object.current_account.user.setting_default_content_type
       store[:system_emoji_font] = object.current_account.user.setting_system_emoji_font
       store[:crop_images]       = object.current_account.user.setting_crop_images
+      store[:visible_reactions] = object.current_account.user.setting_visible_reactions
     else
       store[:auto_play_gif] = Setting.auto_play_gif
       store[:display_media] = Setting.display_media
diff --git a/app/views/settings/preferences/appearance/show.html.haml b/app/views/settings/preferences/appearance/show.html.haml
index a252289b0d..6c5f7414ec 100644
--- a/app/views/settings/preferences/appearance/show.html.haml
+++ b/app/views/settings/preferences/appearance/show.html.haml
@@ -36,6 +36,9 @@
   .fields-group
     = f.input :setting_crop_images, as: :boolean, wrapper: :with_label
 
+  .fields-group.fields-row__column.fields-row__column-6
+    = f.input :setting_visible_reactions, wrapper: :with_label, input_html: { type: 'number', data: { default: '6' } }, hint: false
+
   %h4= t 'appearance.discovery'
 
   .fields-group
diff --git a/config/locales/simple_form.de.yml b/config/locales/simple_form.de.yml
index f12211c94f..e9356c6eae 100644
--- a/config/locales/simple_form.de.yml
+++ b/config/locales/simple_form.de.yml
@@ -213,6 +213,7 @@ de:
         setting_unfollow_modal: Bestätigungsdialog anzeigen, bevor jemandem entfolgt wird
         setting_use_blurhash: Farbverlauf für verborgene Medien anzeigen
         setting_use_pending_items: Langsamer Modus
+        setting_visible_reactions: Anzahl der sichtbaren Emoji-Reaktionen
         severity: Schweregrad
         sign_in_token_attempt: Sicherheitscode
         title: Titel
diff --git a/config/locales/simple_form.en.yml b/config/locales/simple_form.en.yml
index 6edf7b4e9e..880d9190cd 100644
--- a/config/locales/simple_form.en.yml
+++ b/config/locales/simple_form.en.yml
@@ -213,6 +213,7 @@ en:
         setting_unfollow_modal: Show confirmation dialog before unfollowing someone
         setting_use_blurhash: Show colorful gradients for hidden media
         setting_use_pending_items: Slow mode
+        setting_visible_reactions: Number of visible emoji reactions
         severity: Severity
         sign_in_token_attempt: Security code
         title: Title
diff --git a/config/locales/simple_form.fr.yml b/config/locales/simple_form.fr.yml
index 73fb4f3347..b3f56d60b0 100644
--- a/config/locales/simple_form.fr.yml
+++ b/config/locales/simple_form.fr.yml
@@ -213,6 +213,7 @@ fr:
         setting_unfollow_modal: Afficher une fenêtre de confirmation avant de vous désabonner d’un compte
         setting_use_blurhash: Afficher des dégradés colorés pour les médias cachés
         setting_use_pending_items: Mode lent
+        setting_visible_reactions: Nombre de réactions emoji visibles
         severity: Sévérité
         sign_in_token_attempt: Code de sécurité
         title: Nom
diff --git a/config/settings.yml b/config/settings.yml
index 1f44fd308d..28951cea10 100644
--- a/config/settings.yml
+++ b/config/settings.yml
@@ -42,6 +42,7 @@ defaults: &defaults
   trendable_by_default: false
   trending_status_cw: true
   crop_images: true
+  visible_reactions: 6
   notification_emails:
     follow: true
     reblog: false

From 7cbe6dc3e81182ed544ed56e920e644a74dd63cf Mon Sep 17 00:00:00 2001
From: fef <owo@fef.moe>
Date: Wed, 30 Nov 2022 17:25:36 +0100
Subject: [PATCH 19/48] rebase with upstream

---
 .../glitch/components/status_prepend.js       |   2 +-
 .../mastodon/actions/interactions.js          |  85 +++++++++
 .../mastodon/actions/notifications.js         |   1 +
 app/javascript/mastodon/components/status.js  |  14 ++
 .../mastodon/components/status_action_bar.js  |  28 +++
 .../mastodon/components/status_reactions.js   | 179 ++++++++++++++++++
 .../mastodon/containers/status_container.js   |  13 +-
 .../components/emoji_picker_dropdown.js       |   3 +-
 .../components/column_settings.js             |  12 ++
 .../notifications/components/filter_bar.js    |   8 +
 .../notifications/components/notification.js  |  35 ++++
 .../features/status/components/action_bar.js  |  23 ++-
 .../status/components/detailed_status.js      |  12 ++
 .../mastodon/features/status/index.js         |  27 +++
 app/javascript/mastodon/initial_state.js      |   2 +
 app/javascript/mastodon/locales/de.json       |   4 +
 app/javascript/mastodon/locales/en.json       |   4 +
 app/javascript/mastodon/locales/fr.json       |  10 +-
 app/javascript/mastodon/reducers/settings.js  |   3 +
 app/javascript/mastodon/reducers/statuses.js  |  44 +++++
 app/javascript/mastodon/selectors/index.js    |   8 +
 .../styles/mastodon/components.scss           |  18 ++
 22 files changed, 526 insertions(+), 9 deletions(-)
 create mode 100644 app/javascript/mastodon/components/status_reactions.js

diff --git a/app/javascript/flavours/glitch/components/status_prepend.js b/app/javascript/flavours/glitch/components/status_prepend.js
index 6c96f2ee2f..946146b5ef 100644
--- a/app/javascript/flavours/glitch/components/status_prepend.js
+++ b/app/javascript/flavours/glitch/components/status_prepend.js
@@ -60,7 +60,7 @@ export default class StatusPrepend extends React.PureComponent {
       return (
         <FormattedMessage
           id='notification.reaction'
-          defaultMessage='{name} reacted to your post'
+          defaultMessage='{name} reacted to your status'
           values={{ name: link }}
         />
       );
diff --git a/app/javascript/mastodon/actions/interactions.js b/app/javascript/mastodon/actions/interactions.js
index d60ccc1fb8..afae6705ff 100644
--- a/app/javascript/mastodon/actions/interactions.js
+++ b/app/javascript/mastodon/actions/interactions.js
@@ -41,6 +41,16 @@ export const UNBOOKMARK_REQUEST = 'UNBOOKMARKED_REQUEST';
 export const UNBOOKMARK_SUCCESS = 'UNBOOKMARKED_SUCCESS';
 export const UNBOOKMARK_FAIL    = 'UNBOOKMARKED_FAIL';
 
+export const REACTION_UPDATE = 'REACTION_UPDATE';
+
+export const REACTION_ADD_REQUEST = 'REACTION_ADD_REQUEST';
+export const REACTION_ADD_SUCCESS = 'REACTION_ADD_SUCCESS';
+export const REACTION_ADD_FAIL    = 'REACTION_ADD_FAIL';
+
+export const REACTION_REMOVE_REQUEST = 'REACTION_REMOVE_REQUEST';
+export const REACTION_REMOVE_SUCCESS = 'REACTION_REMOVE_SUCCESS';
+export const REACTION_REMOVE_FAIL    = 'REACTION_REMOVE_FAIL';
+
 export function reblog(status, visibility) {
   return function (dispatch, getState) {
     dispatch(reblogRequest(status));
@@ -412,3 +422,78 @@ export function unpinFail(status, error) {
     skipLoading: true,
   };
 };
+
+export const addReaction = (statusId, name) => (dispatch, getState) => {
+  const status = getState().get('statuses').get(statusId);
+  let alreadyAdded = false;
+  if (status) {
+    const reaction = status.get('reactions').find(x => x.get('name') === name);
+    if (reaction && reaction.get('me')) {
+      alreadyAdded = true;
+    }
+  }
+  if (!alreadyAdded) {
+    dispatch(addReactionRequest(statusId, name, alreadyAdded));
+  }
+
+  api(getState).put(`/api/v1/statuses/${statusId}/reactions/${name}`).then(() => {
+    dispatch(addReactionSuccess(statusId, name, alreadyAdded));
+  }).catch(err => {
+    if (!alreadyAdded) {
+      dispatch(addReactionFail(statusId, name, err));
+    }
+  });
+};
+
+export const addReactionRequest = (statusId, name) => ({
+  type: REACTION_ADD_REQUEST,
+  id: statusId,
+  name,
+  skipLoading: true,
+});
+
+export const addReactionSuccess = (statusId, name) => ({
+  type: REACTION_ADD_SUCCESS,
+  id: statusId,
+  name,
+  skipLoading: true,
+});
+
+export const addReactionFail = (statusId, name, error) => ({
+  type: REACTION_ADD_FAIL,
+  id: statusId,
+  name,
+  error,
+  skipLoading: true,
+});
+
+export const removeReaction = (statusId, name) => (dispatch, getState) => {
+  dispatch(removeReactionRequest(statusId, name));
+
+  api(getState).delete(`/api/v1/statuses/${statusId}/reactions/${name}`).then(() => {
+    dispatch(removeReactionSuccess(statusId, name));
+  }).catch(err => {
+    dispatch(removeReactionFail(statusId, name, err));
+  });
+};
+
+export const removeReactionRequest = (statusId, name) => ({
+  type: REACTION_REMOVE_REQUEST,
+  id: statusId,
+  name,
+  skipLoading: true,
+});
+
+export const removeReactionSuccess = (statusId, name) => ({
+  type: REACTION_REMOVE_SUCCESS,
+  id: statusId,
+  name,
+  skipLoading: true,
+});
+
+export const removeReactionFail = (statusId, name) => ({
+  type: REACTION_REMOVE_FAIL,
+  id: statusId,
+  name,
+  skipLoading: true,
+});
diff --git a/app/javascript/mastodon/actions/notifications.js b/app/javascript/mastodon/actions/notifications.js
index d4588db2c9..1a801491b6 100644
--- a/app/javascript/mastodon/actions/notifications.js
+++ b/app/javascript/mastodon/actions/notifications.js
@@ -127,6 +127,7 @@ const excludeTypesFromFilter = filter => {
     'follow',
     'follow_request',
     'favourite',
+    'reaction',
     'reblog',
     'mention',
     'poll',
diff --git a/app/javascript/mastodon/components/status.js b/app/javascript/mastodon/components/status.js
index a1384ba583..ec9e583e22 100644
--- a/app/javascript/mastodon/components/status.js
+++ b/app/javascript/mastodon/components/status.js
@@ -7,6 +7,7 @@ import RelativeTimestamp from './relative_timestamp';
 import DisplayName from './display_name';
 import StatusContent from './status_content';
 import StatusActionBar from './status_action_bar';
+import StatusReactions from './status_reactions';
 import AttachmentList from './attachment_list';
 import Card from '../features/status/components/card';
 import { injectIntl, defineMessages, FormattedMessage } from 'react-intl';
@@ -21,6 +22,7 @@ import PictureInPicturePlaceholder from 'mastodon/components/picture_in_picture_
 // We use the component (and not the container) since we do not want
 // to use the progress bar to show download progress
 import Bundle from '../features/ui/components/bundle';
+import { visibleReactions } from '../../flavours/glitch/initial_state';
 
 export const textForScreenReader = (intl, status, rebloggedByText = false) => {
   const displayName = status.getIn(['account', 'display_name']);
@@ -76,6 +78,8 @@ class Status extends ImmutablePureComponent {
     onDelete: PropTypes.func,
     onDirect: PropTypes.func,
     onMention: PropTypes.func,
+    onReactionAdd: PropTypes.func,
+    onReactionRemove: PropTypes.func,
     onPin: PropTypes.func,
     onOpenMedia: PropTypes.func,
     onOpenVideo: PropTypes.func,
@@ -99,6 +103,7 @@ class Status extends ImmutablePureComponent {
     cachedMediaWidth: PropTypes.number,
     scrollKey: PropTypes.string,
     deployPictureInPicture: PropTypes.func,
+    emojiMap: ImmutablePropTypes.map.isRequired,
     pictureInPicture: ImmutablePropTypes.contains({
       inUse: PropTypes.bool,
       available: PropTypes.bool,
@@ -537,6 +542,15 @@ class Status extends ImmutablePureComponent {
 
             {media}
 
+            <StatusReactions
+              statusId={status.get('id')}
+              reactions={status.get('reactions')}
+              numVisible={visibleReactions}
+              addReaction={this.props.onReactionAdd}
+              removeReaction={this.props.onReactionRemove}
+              emojiMap={this.props.emojiMap}
+            />
+
             <StatusActionBar scrollKey={scrollKey} status={status} account={account} onFilter={matchedFilters ? this.handleFilterClick : null} {...other} />
           </div>
         </div>
diff --git a/app/javascript/mastodon/components/status_action_bar.js b/app/javascript/mastodon/components/status_action_bar.js
index 40c86afdf0..b37b003182 100644
--- a/app/javascript/mastodon/components/status_action_bar.js
+++ b/app/javascript/mastodon/components/status_action_bar.js
@@ -9,6 +9,8 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 import { me } from '../initial_state';
 import classNames from 'classnames';
 import { PERMISSION_MANAGE_USERS } from 'mastodon/permissions';
+import EmojiPickerDropdown from '../features/compose/containers/emoji_picker_dropdown_container';
+import { maxReactions } from '../../flavours/glitch/initial_state';
 
 const messages = defineMessages({
   delete: { id: 'status.delete', defaultMessage: 'Delete' },
@@ -27,6 +29,7 @@ const messages = defineMessages({
   cancel_reblog_private: { id: 'status.cancel_reblog_private', defaultMessage: 'Unboost' },
   cannot_reblog: { id: 'status.cannot_reblog', defaultMessage: 'This post cannot be boosted' },
   favourite: { id: 'status.favourite', defaultMessage: 'Favourite' },
+  react: { id: 'status.react', defaultMessage: 'React' },
   bookmark: { id: 'status.bookmark', defaultMessage: 'Bookmark' },
   removeBookmark: { id: 'status.remove_bookmark', defaultMessage: 'Remove bookmark' },
   open: { id: 'status.open', defaultMessage: 'Expand this status' },
@@ -66,6 +69,7 @@ class StatusActionBar extends ImmutablePureComponent {
     relationship: ImmutablePropTypes.map,
     onReply: PropTypes.func,
     onFavourite: PropTypes.func,
+    onReactionAdd: PropTypes.func,
     onReblog: PropTypes.func,
     onDelete: PropTypes.func,
     onDirect: PropTypes.func,
@@ -127,6 +131,16 @@ class StatusActionBar extends ImmutablePureComponent {
     }
   }
 
+  handleEmojiPick = data => {
+    const { signedIn } = this.context.identity;
+
+    if (signedIn) {
+      this.props.onReactionAdd(this.props.status.get('id'), data.native.replace(/:/g, ''));
+    } else {
+      this.props.onInteractionModal('favourite', this.props.status);
+    }
+  }
+
   handleReblogClick = e => {
     const { signedIn } = this.context.identity;
 
@@ -230,6 +244,8 @@ class StatusActionBar extends ImmutablePureComponent {
     this.props.onFilter();
   }
 
+  nop = () => {}
+
   render () {
     const { status, relationship, intl, withDismiss, withCounters, scrollKey } = this.props;
     const { signedIn } = this.context.identity;
@@ -350,11 +366,23 @@ class StatusActionBar extends ImmutablePureComponent {
       <IconButton className='status__action-bar__button' title={intl.formatMessage(messages.hide)} icon='eye' onClick={this.handleHideClick} />
     );
 
+    const canReact = status.get('reactions').filter(r => r.get('count') > 0 && r.get('me')).size < maxReactions;
+    const reactButton = (
+      <IconButton
+        className='status__action-bar-button'
+        onClick={this.nop} // EmojiPickerDropdown handles that
+        title={intl.formatMessage(messages.react)}
+        disabled={!canReact}
+        icon='plus'
+      />
+    );
+
     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={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} />
+        <EmojiPickerDropdown className='status__action-bar-button' onPickEmoji={this.handleEmojiPick} button={reactButton} disabled={!canReact} />
         <IconButton className='status__action-bar__button bookmark-icon' disabled={!signedIn} active={status.get('bookmarked')} title={intl.formatMessage(messages.bookmark)} icon='bookmark' onClick={this.handleBookmarkClick} />
 
         {shareButton}
diff --git a/app/javascript/mastodon/components/status_reactions.js b/app/javascript/mastodon/components/status_reactions.js
new file mode 100644
index 0000000000..39956270a4
--- /dev/null
+++ b/app/javascript/mastodon/components/status_reactions.js
@@ -0,0 +1,179 @@
+import ImmutablePureComponent from 'react-immutable-pure-component';
+import PropTypes from 'prop-types';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import { reduceMotion } from '../initial_state';
+import spring from 'react-motion/lib/spring';
+import TransitionMotion from 'react-motion/lib/TransitionMotion';
+import classNames from 'classnames';
+import React from 'react';
+import unicodeMapping from '../features/emoji/emoji_unicode_mapping_light';
+import AnimatedNumber from './animated_number';
+import { assetHost } from '../utils/config';
+import { autoPlayGif } from '../initial_state';
+
+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,
+  };
+
+  willEnter() {
+    return { scale: reduceMotion ? 1 : 0 };
+  }
+
+  willLeave() {
+    return { scale: reduceMotion ? 0 : spring(0, { stiffness: 170, damping: 26 }) };
+  }
+
+  render() {
+    const { reactions, numVisible } = this.props;
+    let visibleReactions = reactions
+      .filter(x => x.get('count') > 0)
+      .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'),
+      data: reaction,
+      style: { scale: reduceMotion ? 1 : spring(1, { stiffness: 150, damping: 13 }) },
+    })).toArray();
+
+    return (
+      <TransitionMotion styles={styles} willEnter={this.willEnter} willLeave={this.willLeave}>
+        {items => (
+          <div className={classNames('reactions-bar', { 'reactions-bar--empty': visibleReactions.isEmpty() })}>
+            {items.map(({ key, data, style }) => (
+              <Reaction
+                key={key}
+                statusId={this.props.statusId}
+                reaction={data}
+                style={{ transform: `scale(${style.scale})`, position: style.scale < 0.5 ? 'absolute' : 'static' }}
+                addReaction={this.props.addReaction}
+                removeReaction={this.props.removeReaction}
+                emojiMap={this.props.emojiMap}
+              />
+            ))}
+          </div>
+        )}
+      </TransitionMotion>
+    );
+  }
+
+}
+
+class Reaction extends ImmutablePureComponent {
+
+  static propTypes = {
+    statusId: PropTypes.string,
+    reaction: ImmutablePropTypes.map.isRequired,
+    addReaction: PropTypes.func.isRequired,
+    removeReaction: PropTypes.func.isRequired,
+    emojiMap: ImmutablePropTypes.map.isRequired,
+    style: PropTypes.object,
+  };
+
+  state = {
+    hovered: false,
+  };
+
+  handleClick = () => {
+    const { reaction, statusId, addReaction, removeReaction } = this.props;
+
+    if (reaction.get('me')) {
+      removeReaction(statusId, reaction.get('name'));
+    } else {
+      addReaction(statusId, reaction.get('name'));
+    }
+  }
+
+  handleMouseEnter = () => this.setState({ hovered: true })
+
+  handleMouseLeave = () => this.setState({ hovered: false })
+
+  render() {
+    const { reaction } = this.props;
+
+    let shortCode = reaction.get('name');
+
+    if (unicodeMapping[shortCode]) {
+      shortCode = unicodeMapping[shortCode].shortCode;
+    }
+
+    return (
+      <button
+        className={classNames('reactions-bar__item', { active: reaction.get('me') })}
+        onClick={this.handleClick}
+        onMouseEnter={this.handleMouseEnter}
+        onMouseLeave={this.handleMouseLeave}
+        title={`:${shortCode}:`}
+        style={this.props.style}
+      >
+        <span className='reactions-bar__item__emoji'>
+          <Emoji hovered={this.state.hovered} emoji={reaction.get('name')} emojiMap={this.props.emojiMap} />
+        </span>
+        <span className='reactions-bar__item__count'>
+          <AnimatedNumber value={reaction.get('count')} />
+        </span>
+      </button>
+    );
+  }
+
+}
+
+class Emoji extends React.PureComponent {
+
+  static propTypes = {
+    emoji: PropTypes.string.isRequired,
+    emojiMap: ImmutablePropTypes.map.isRequired,
+    hovered: PropTypes.bool.isRequired,
+  };
+
+  render() {
+    const { emoji, emojiMap, hovered } = this.props;
+
+    if (unicodeMapping[emoji]) {
+      const { filename, shortCode } = unicodeMapping[this.props.emoji];
+      const title = shortCode ? `:${shortCode}:` : '';
+
+      return (
+        <img
+          draggable='false'
+          className='emojione'
+          alt={emoji}
+          title={title}
+          src={`${assetHost}/emoji/${filename}.svg`}
+        />
+      );
+    } else if (emojiMap.get(emoji)) {
+      const filename = (autoPlayGif || hovered)
+        ? emojiMap.getIn([emoji, 'url'])
+        : emojiMap.getIn([emoji, 'static_url']);
+      const shortCode = `:${emoji}:`;
+
+      return (
+        <img
+          draggable='false'
+          className='emojione custom-emoji'
+          alt={shortCode}
+          title={shortCode}
+          src={filename}
+        />
+      );
+    } else {
+      return null;
+    }
+  }
+
+}
diff --git a/app/javascript/mastodon/containers/status_container.js b/app/javascript/mastodon/containers/status_container.js
index 294105f259..556910f089 100644
--- a/app/javascript/mastodon/containers/status_container.js
+++ b/app/javascript/mastodon/containers/status_container.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import Status from '../components/status';
-import { makeGetStatus, makeGetPictureInPicture } from '../selectors';
+import { makeGetStatus, makeGetPictureInPicture, makeCustomEmojiMap } from '../selectors';
 import {
   replyCompose,
   mentionCompose,
@@ -16,6 +16,8 @@ import {
   unbookmark,
   pin,
   unpin,
+  addReaction,
+  removeReaction,
 } from '../actions/interactions';
 import {
   muteStatus,
@@ -66,6 +68,7 @@ const makeMapStateToProps = () => {
   const mapStateToProps = (state, props) => ({
     status: getStatus(state, props),
     pictureInPicture: getPictureInPicture(state, props),
+    emojiMap: makeCustomEmojiMap(state),
   });
 
   return mapStateToProps;
@@ -129,6 +132,14 @@ const mapDispatchToProps = (dispatch, { intl, contextType }) => ({
     }
   },
 
+  onReactionAdd (statusId, name) {
+    dispatch(addReaction(statusId, name));
+  },
+
+  onReactionRemove (statusId, name) {
+    dispatch(removeReaction(statusId, name));
+  },
+
   onEmbed (status) {
     dispatch(openModal('EMBED', {
       url: status.get('url'),
diff --git a/app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.js b/app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.js
index 8cca8af2a8..efdbf9c908 100644
--- a/app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.js
+++ b/app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.js
@@ -319,6 +319,7 @@ class EmojiPickerDropdown extends React.PureComponent {
     onSkinTone: PropTypes.func.isRequired,
     skinTone: PropTypes.number.isRequired,
     button: PropTypes.node,
+    disabled: PropTypes.bool,
   };
 
   state = {
@@ -356,7 +357,7 @@ class EmojiPickerDropdown extends React.PureComponent {
   }
 
   onToggle = (e) => {
-    if (!this.state.loading && (!e.key || e.key === 'Enter')) {
+    if (!this.state.disabled && !this.state.loading && (!e.key || e.key === 'Enter')) {
       if (this.state.active) {
         this.onHideDropdown();
       } else {
diff --git a/app/javascript/mastodon/features/notifications/components/column_settings.js b/app/javascript/mastodon/features/notifications/components/column_settings.js
index a38f8d3c2d..3e91ebc369 100644
--- a/app/javascript/mastodon/features/notifications/components/column_settings.js
+++ b/app/javascript/mastodon/features/notifications/components/column_settings.js
@@ -6,6 +6,7 @@ import ClearColumnButton from './clear_column_button';
 import GrantPermissionButton from './grant_permission_button';
 import SettingToggle from './setting_toggle';
 import { PERMISSION_MANAGE_USERS, PERMISSION_MANAGE_REPORTS } from 'mastodon/permissions';
+import PillBarButton from '../../../../flavours/glitch/features/notifications/components/pill_bar_button';
 
 export default class ColumnSettings extends React.PureComponent {
 
@@ -115,6 +116,17 @@ export default class ColumnSettings extends React.PureComponent {
           </div>
         </div>
 
+        <div role='group' aria-labelledby='notifications-reaction'>
+          <span id='notifications-reaction' className='column-settings__section'><FormattedMessage id='notifications.column_settings.reaction' defaultMessage='Reactions:' /></span>
+
+          <div className='column-settings__pillbar'>
+            <SettingToggle disabled={browserPermission === 'denied'} prefix='notifications_desktop' settings={settings} settingPath={['alerts', 'reaction']} onChange={onChange} label={alertStr} />
+            {showPushSettings && <SettingToggle prefix='notifications_push' settings={pushSettings} settingPath={['alerts', 'reaction']} onChange={this.onPushChange} label={pushStr} />}
+            <SettingToggle prefix='notifications' settings={settings} settingPath={['shows', 'reaction']} onChange={onChange} label={showStr} />
+            <SettingToggle prefix='notifications' settings={settings} settingPath={['sounds', 'reaction']} onChange={onChange} label={soundStr} />
+          </div>
+        </div>
+
         <div role='group' aria-labelledby='notifications-mention'>
           <span id='notifications-mention' className='column-settings__section'><FormattedMessage id='notifications.column_settings.mention' defaultMessage='Mentions:' /></span>
 
diff --git a/app/javascript/mastodon/features/notifications/components/filter_bar.js b/app/javascript/mastodon/features/notifications/components/filter_bar.js
index 368eb0b7e6..2b5f48f0b4 100644
--- a/app/javascript/mastodon/features/notifications/components/filter_bar.js
+++ b/app/javascript/mastodon/features/notifications/components/filter_bar.js
@@ -6,6 +6,7 @@ import Icon from 'mastodon/components/icon';
 const tooltips = defineMessages({
   mentions: { id: 'notifications.filter.mentions', defaultMessage: 'Mentions' },
   favourites: { id: 'notifications.filter.favourites', defaultMessage: 'Favourites' },
+  reactions: { id: 'notifications.filter.reactions', defaultMessage: 'Reactions' },
   boosts: { id: 'notifications.filter.boosts', defaultMessage: 'Boosts' },
   polls: { id: 'notifications.filter.polls', defaultMessage: 'Poll results' },
   follows: { id: 'notifications.filter.follows', defaultMessage: 'Follows' },
@@ -74,6 +75,13 @@ class FilterBar extends React.PureComponent {
         >
           <Icon id='star' fixedWidth />
         </button>
+        <button
+          className={selectedFilter === 'reaction' ? 'active' : ''}
+          onClick={this.onClick('reaction')}
+          title={intl.formatMessage(tooltips.reactions)}
+        >
+          <Icon id='plus' fixedWidth />
+        </button>
         <button
           className={selectedFilter === 'reblog' ? 'active' : ''}
           onClick={this.onClick('reblog')}
diff --git a/app/javascript/mastodon/features/notifications/components/notification.js b/app/javascript/mastodon/features/notifications/components/notification.js
index ea2c9c0a42..7b23197cf6 100644
--- a/app/javascript/mastodon/features/notifications/components/notification.js
+++ b/app/javascript/mastodon/features/notifications/components/notification.js
@@ -15,6 +15,7 @@ import classNames from 'classnames';
 
 const messages = defineMessages({
   favourite: { id: 'notification.favourite', defaultMessage: '{name} favourited your status' },
+  reaction: { id: 'notification.reaction', defaultMessage: '{name} reacted to your status' },
   follow: { id: 'notification.follow', defaultMessage: '{name} followed you' },
   ownPoll: { id: 'notification.own_poll', defaultMessage: 'Your poll has ended' },
   poll: { id: 'notification.poll', defaultMessage: 'A poll you have voted in has ended' },
@@ -213,6 +214,38 @@ class Notification extends ImmutablePureComponent {
     );
   }
 
+  renderReaction (notification, link) {
+    const { intl, unread } = this.props;
+
+    return (
+      <HotKeys handlers={this.getHandlers()}>
+        <div className={classNames('notification notification-reaction focusable', { unread })} tabIndex='0' aria-label={notificationForScreenReader(intl, intl.formatMessage(messages.reaction, { name: notification.getIn(['account', 'acct']) }), notification.get('created_at'))}>
+          <div className='notification__message'>
+            <div className='notification__favourite-icon-wrapper'>
+              <Icon id='plus' fixedWidth />
+            </div>
+
+            <span title={notification.get('created_at')}>
+              <FormattedMessage id='notification.reaction' defaultMessage='{name} reacted to your status' values={{ name: link }} />
+            </span>
+          </div>
+
+          <StatusContainer
+            id={notification.get('status')}
+            account={notification.get('account')}
+            muted
+            withDismiss
+            hidden={this.props.hidden}
+            getScrollPosition={this.props.getScrollPosition}
+            updateScrollBottom={this.props.updateScrollBottom}
+            cachedMediaWidth={this.props.cachedMediaWidth}
+            cacheMediaWidth={this.props.cacheMediaWidth}
+          />
+        </div>
+      </HotKeys>
+    );
+  }
+
   renderReblog (notification, link) {
     const { intl, unread } = this.props;
 
@@ -414,6 +447,8 @@ class Notification extends ImmutablePureComponent {
       return this.renderMention(notification);
     case 'favourite':
       return this.renderFavourite(notification, link);
+    case 'reaction':
+      return this.renderReaction(notification, link);
     case 'reblog':
       return this.renderReblog(notification, link);
     case 'status':
diff --git a/app/javascript/mastodon/features/status/components/action_bar.js b/app/javascript/mastodon/features/status/components/action_bar.js
index c1242754cc..ce272e4487 100644
--- a/app/javascript/mastodon/features/status/components/action_bar.js
+++ b/app/javascript/mastodon/features/status/components/action_bar.js
@@ -5,9 +5,10 @@ import IconButton from '../../../components/icon_button';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import DropdownMenuContainer from '../../../containers/dropdown_menu_container';
 import { defineMessages, injectIntl } from 'react-intl';
-import { me } from '../../../initial_state';
+import { me, maxReactions } from '../../../initial_state';
 import classNames from 'classnames';
 import { PERMISSION_MANAGE_USERS } from 'mastodon/permissions';
+import EmojiPickerDropdown from '../../compose/containers/emoji_picker_dropdown_container';
 
 const messages = defineMessages({
   delete: { id: 'status.delete', defaultMessage: 'Delete' },
@@ -21,6 +22,7 @@ const messages = defineMessages({
   cancel_reblog_private: { id: 'status.cancel_reblog_private', defaultMessage: 'Unboost' },
   cannot_reblog: { id: 'status.cannot_reblog', defaultMessage: 'This post cannot be boosted' },
   favourite: { id: 'status.favourite', defaultMessage: 'Favourite' },
+  react: { id: 'status.react', defaultMessage: 'React' },
   bookmark: { id: 'status.bookmark', defaultMessage: 'Bookmark' },
   more: { id: 'status.more', defaultMessage: 'More' },
   mute: { id: 'status.mute', defaultMessage: 'Mute @{name}' },
@@ -61,6 +63,7 @@ class ActionBar extends React.PureComponent {
     onReply: PropTypes.func.isRequired,
     onReblog: PropTypes.func.isRequired,
     onFavourite: PropTypes.func.isRequired,
+    onReactionAdd: PropTypes.func.isRequired,
     onBookmark: PropTypes.func.isRequired,
     onDelete: PropTypes.func.isRequired,
     onEdit: PropTypes.func.isRequired,
@@ -91,6 +94,10 @@ class ActionBar extends React.PureComponent {
     this.props.onFavourite(this.props.status);
   }
 
+  handleEmojiPick = data => {
+    this.props.onReactionAdd(this.props.status.get('id'), data.native.replace(/:/g, ''));
+  }
+
   handleBookmarkClick = (e) => {
     this.props.onBookmark(this.props.status, e);
   }
@@ -179,6 +186,8 @@ class ActionBar extends React.PureComponent {
     navigator.clipboard.writeText(url);
   }
 
+  nop = () => {} // hack for reaction add button
+
   render () {
     const { status, relationship, intl } = this.props;
     const { signedIn, permissions } = this.context.identity;
@@ -250,6 +259,17 @@ class ActionBar extends React.PureComponent {
       }
     }
 
+    const canReact = status.get('reactions').filter(r => r.get('count') > 0 && r.get('me')).size < maxReactions;
+    const reactButton = (
+      <IconButton
+        className='plus-icon'
+        onClick={this.nop} // EmojiPickerDropdown handles that
+        title={intl.formatMessage(messages.react)}
+        disabled={!canReact}
+        icon='plus'
+      />
+    );
+
     const shareButton = ('share' in navigator) && publicStatus && (
       <div className='detailed-status__button'><IconButton title={intl.formatMessage(messages.share)} icon='share-alt' onClick={this.handleShare} /></div>
     );
@@ -279,6 +299,7 @@ class ActionBar extends React.PureComponent {
         <div className='detailed-status__button'><IconButton title={intl.formatMessage(messages.reply)} icon={status.get('in_reply_to_account_id') === status.getIn(['account', 'id']) ? 'reply' : replyIcon} onClick={this.handleReplyClick} /></div>
         <div className='detailed-status__button' ><IconButton className={classNames({ reblogPrivate })} disabled={!publicStatus && !reblogPrivate} active={status.get('reblogged')} title={reblogTitle} icon='retweet' onClick={this.handleReblogClick} /></div>
         <div className='detailed-status__button'><IconButton className='star-icon' animate active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} /></div>
+        <div className='detailed-status__button'><EmojiPickerDropdown onPickEmoji={this.handleEmojiPick} button={reactButton} disabled={!canReact} /></div>
         <div className='detailed-status__button'><IconButton className='bookmark-icon' disabled={!signedIn} active={status.get('bookmarked')} title={intl.formatMessage(messages.bookmark)} icon='bookmark' onClick={this.handleBookmarkClick} /></div>
 
         {shareButton}
diff --git a/app/javascript/mastodon/features/status/components/detailed_status.js b/app/javascript/mastodon/features/status/components/detailed_status.js
index c62910e0ee..ccc7866d45 100644
--- a/app/javascript/mastodon/features/status/components/detailed_status.js
+++ b/app/javascript/mastodon/features/status/components/detailed_status.js
@@ -17,6 +17,7 @@ import Icon from 'mastodon/components/icon';
 import AnimatedNumber from 'mastodon/components/animated_number';
 import PictureInPicturePlaceholder from 'mastodon/components/picture_in_picture_placeholder';
 import EditedTimestamp from 'mastodon/components/edited_timestamp';
+import StatusReactions from '../../../components/status_reactions';
 
 const messages = defineMessages({
   public_short: { id: 'privacy.public.short', defaultMessage: 'Public' },
@@ -48,6 +49,9 @@ class DetailedStatus extends ImmutablePureComponent {
       available: PropTypes.bool,
     }),
     onToggleMediaVisibility: PropTypes.func,
+    onReactionAdd: PropTypes.func.isRequired,
+    onReactionRemove: PropTypes.func.isRequired,
+    emojiMap: ImmutablePropTypes.map.isRequired,
   };
 
   state = {
@@ -275,6 +279,14 @@ class DetailedStatus extends ImmutablePureComponent {
 
           {media}
 
+          <StatusReactions
+            statusId={status.get('id')}
+            reactions={status.get('reactions')}
+            addReaction={this.props.onReactionAdd}
+            removeReaction={this.props.onReactionRemove}
+            emojiMap={this.props.emojiMap}
+          />
+
           <div className='detailed-status__meta'>
             <a className='detailed-status__datetime' href={`/@${status.getIn(['account', 'acct'])}\/${status.get('id')}`} target='_blank' rel='noopener noreferrer'>
               <FormattedDate value={new Date(status.get('created_at'))} hour12={false} year='numeric' month='short' day='2-digit' hour='2-digit' minute='2-digit' />
diff --git a/app/javascript/mastodon/features/status/index.js b/app/javascript/mastodon/features/status/index.js
index 8a63cced20..3930804781 100644
--- a/app/javascript/mastodon/features/status/index.js
+++ b/app/javascript/mastodon/features/status/index.js
@@ -20,6 +20,8 @@ import {
   unreblog,
   pin,
   unpin,
+  addReaction,
+  removeReaction,
 } from '../../actions/interactions';
 import {
   replyCompose,
@@ -62,6 +64,7 @@ import { attachFullscreenListener, detachFullscreenListener, isFullscreen } from
 import { textForScreenReader, defaultMediaVisibility } from '../../components/status';
 import Icon from 'mastodon/components/icon';
 import { Helmet } from 'react-helmet';
+import { makeCustomEmojiMap } from '../../selectors';
 
 const messages = defineMessages({
   deleteConfirm: { id: 'confirmations.delete.confirm', defaultMessage: 'Delete' },
@@ -153,6 +156,7 @@ const makeMapStateToProps = () => {
       askReplyConfirmation: state.getIn(['compose', 'text']).trim().length !== 0,
       domain: state.getIn(['meta', 'domain']),
       pictureInPicture: getPictureInPicture(state, { id: props.params.statusId }),
+      emojiMap: makeCustomEmojiMap(state),
     };
   };
 
@@ -254,6 +258,25 @@ class Status extends ImmutablePureComponent {
     }
   }
 
+  handleReactionAdd = (statusId, name) => {
+    const { dispatch } = this.props;
+    const { signedIn } = this.context.identity;
+
+    if (signedIn) {
+      dispatch(addReaction(statusId, name));
+    } else {
+      dispatch(openModal('INTERACTION', {
+        type: 'reaction_add',
+        accountId: status.getIn(['account', 'id']),
+        url: status.get('url'),
+      }));
+    }
+  }
+
+  handleReactionRemove = (statusId, name) => {
+    this.props.dispatch(removeReaction(statusId, name));
+  }
+
   handlePin = (status) => {
     if (status.get('pinned')) {
       this.props.dispatch(unpin(status));
@@ -638,12 +661,15 @@ class Status extends ImmutablePureComponent {
                   status={status}
                   onOpenVideo={this.handleOpenVideo}
                   onOpenMedia={this.handleOpenMedia}
+                  onReactionAdd={this.handleReactionAdd}
+                  onReactionRemove={this.handleReactionRemove}
                   onToggleHidden={this.handleToggleHidden}
                   onTranslate={this.handleTranslate}
                   domain={domain}
                   showMedia={this.state.showMedia}
                   onToggleMediaVisibility={this.handleToggleMediaVisibility}
                   pictureInPicture={pictureInPicture}
+                  emojiMap={this.props.emojiMap}
                 />
 
                 <ActionBar
@@ -651,6 +677,7 @@ class Status extends ImmutablePureComponent {
                   status={status}
                   onReply={this.handleReplyClick}
                   onFavourite={this.handleFavouriteClick}
+                  onReactionAdd={this.handleReactionAdd}
                   onReblog={this.handleReblogClick}
                   onBookmark={this.handleBookmarkClick}
                   onDelete={this.handleDeleteClick}
diff --git a/app/javascript/mastodon/initial_state.js b/app/javascript/mastodon/initial_state.js
index 8eec7f7c7a..5f5b1babdf 100644
--- a/app/javascript/mastodon/initial_state.js
+++ b/app/javascript/mastodon/initial_state.js
@@ -113,8 +113,10 @@ export const expandSpoilers = getMeta('expand_spoilers');
 export const forceSingleColumn = !getMeta('advanced_layout');
 export const limitedFederationMode = getMeta('limited_federation_mode');
 export const mascot = getMeta('mascot');
+export const maxReactions = (initialState && initialState.max_reactions) || 1;
 export const me = getMeta('me');
 export const movedToAccountId = getMeta('moved_to_account_id');
+export const visibleReactions = getMeta('visible_reactions');
 export const owner = getMeta('owner');
 export const profile_directory = getMeta('profile_directory');
 export const reduceMotion = getMeta('reduce_motion');
diff --git a/app/javascript/mastodon/locales/de.json b/app/javascript/mastodon/locales/de.json
index 67ffd64763..f1316fd7a4 100644
--- a/app/javascript/mastodon/locales/de.json
+++ b/app/javascript/mastodon/locales/de.json
@@ -388,6 +388,7 @@
   "notification.admin.report": "{target} wurde von {name} gemeldet",
   "notification.admin.sign_up": "{name} registrierte sich",
   "notification.favourite": "{name} hat deinen Beitrag favorisiert",
+  "notification.reaction": "{name} hat auf deinen Beitrag reagiert",
   "notification.follow": "{name} folgt dir jetzt",
   "notification.follow_request": "{name} möchte dir folgen",
   "notification.mention": "{name} erwähnte dich",
@@ -402,6 +403,7 @@
   "notifications.column_settings.admin.sign_up": "Neue Registrierungen:",
   "notifications.column_settings.alert": "Desktop-Benachrichtigungen",
   "notifications.column_settings.favourite": "Favorisierungen:",
+  "notifications.column_settings.reaction": "Reaktionen:",
   "notifications.column_settings.filter_bar.advanced": "Erweiterte Filterleiste aktivieren",
   "notifications.column_settings.filter_bar.category": "Filterleiste:",
   "notifications.column_settings.filter_bar.show_bar": "Filterleiste anzeigen",
@@ -551,6 +553,7 @@
   "status.edited_x_times": "{count, plural, one {{count} mal} other {{count} mal}} bearbeitet",
   "status.embed": "Beitrag per iFrame einbetten",
   "status.favourite": "Favorisieren",
+  "status.react": "Reagieren",
   "status.filter": "Beitrag filtern",
   "status.filtered": "Gefiltert",
   "status.hide": "Beitrag verbergen",
@@ -609,6 +612,7 @@
   "timeline_hint.resources.statuses": "Ältere Beiträge",
   "trends.counter_by_accounts": "{count, plural, one {{counter} Profil} other {{counter} Profile}} {days, plural, one {seit gestern} other {in {days} Tagen}}",
   "trends.trending_now": "Aktuelle Trends",
+  "tooltips.reactions": "Reaktionen",
   "ui.beforeunload": "Dein Entwurf geht verloren, wenn du Mastodon verlässt.",
   "units.short.billion": "{count} Mrd",
   "units.short.million": "{count} Mio",
diff --git a/app/javascript/mastodon/locales/en.json b/app/javascript/mastodon/locales/en.json
index cb190b4966..9ac5162397 100644
--- a/app/javascript/mastodon/locales/en.json
+++ b/app/javascript/mastodon/locales/en.json
@@ -397,6 +397,7 @@
   "notification.admin.report": "{name} reported {target}",
   "notification.admin.sign_up": "{name} signed up",
   "notification.favourite": "{name} favourited your post",
+  "notification.reaction": "{name} reacted to your post",
   "notification.follow": "{name} followed you",
   "notification.follow_request": "{name} has requested to follow you",
   "notification.mention": "{name} mentioned you",
@@ -411,6 +412,7 @@
   "notifications.column_settings.admin.sign_up": "New sign-ups:",
   "notifications.column_settings.alert": "Desktop notifications",
   "notifications.column_settings.favourite": "Favourites:",
+  "notifications.column_settings.reaction": "Reactions:",
   "notifications.column_settings.filter_bar.advanced": "Display all categories",
   "notifications.column_settings.filter_bar.category": "Quick filter bar",
   "notifications.column_settings.filter_bar.show_bar": "Show filter bar",
@@ -561,6 +563,7 @@
   "status.edited_x_times": "Edited {count, plural, one {{count} time} other {{count} times}}",
   "status.embed": "Embed",
   "status.favourite": "Favourite",
+  "status.react": "React",
   "status.filter": "Filter this post",
   "status.filtered": "Filtered",
   "status.hide": "Hide toot",
@@ -619,6 +622,7 @@
   "timeline_hint.resources.statuses": "Older posts",
   "trends.counter_by_accounts": "{count, plural, one {{counter} person} other {{counter} people}} in the past {days, plural, one {day} other {{days} days}}",
   "trends.trending_now": "Trending now",
+  "tooltips.reactions": "Reactions",
   "ui.beforeunload": "Your draft will be lost if you leave Mastodon.",
   "units.short.billion": "{count}B",
   "units.short.million": "{count}M",
diff --git a/app/javascript/mastodon/locales/fr.json b/app/javascript/mastodon/locales/fr.json
index ce004ed9fe..e9a07a6564 100644
--- a/app/javascript/mastodon/locales/fr.json
+++ b/app/javascript/mastodon/locales/fr.json
@@ -98,7 +98,7 @@
   "closed_registrations_modal.preamble": "Mastodon est décentralisé : peu importe où vous créez votre votre, vous serez en mesure de suivre et d'interagir avec quiconque sur ce serveur. Vous pouvez même l'héberger !",
   "closed_registrations_modal.title": "Inscription sur Mastodon",
   "column.about": "À propos",
-  "column.blocks": "Comptes bloqués",
+  "column.blocks": "Utilisateurs bloqués",
   "column.bookmarks": "Signets",
   "column.community": "Fil public local",
   "column.direct": "Messages directs",
@@ -138,7 +138,7 @@
   "compose_form.poll.switch_to_multiple": "Changer le sondage pour autoriser plusieurs choix",
   "compose_form.poll.switch_to_single": "Changer le sondage pour autoriser qu'un seul choix",
   "compose_form.publish": "Publier",
-  "compose_form.publish_form": "Publier",
+  "compose_form.publish_form": "Publish",
   "compose_form.publish_loud": "{publish} !",
   "compose_form.save_changes": "Enregistrer les modifications",
   "compose_form.sensitive.hide": "Marquer le média comme sensible",
@@ -387,7 +387,7 @@
   "not_signed_in_indicator.not_signed_in": "Vous devez vous connecter pour accéder à cette ressource.",
   "notification.admin.report": "{name} a signalé {target}",
   "notification.admin.sign_up": "{name} s'est inscrit·e",
-  "notification.favourite": "{name} a aimé votre publication",
+  "notification.favourite": "{name} a ajouté le message à ses favoris",
   "notification.follow": "{name} vous suit",
   "notification.follow_request": "{name} a demandé à vous suivre",
   "notification.mention": "{name} vous a mentionné·e :",
@@ -527,8 +527,8 @@
   "search_results.statuses_fts_disabled": "La recherche de messages par leur contenu n'est pas activée sur ce serveur Mastodon.",
   "search_results.title": "Rechercher {q}",
   "search_results.total": "{count, number} {count, plural, one {résultat} other {résultats}}",
-  "server_banner.about_active_users": "Personnes utilisant ce serveur au cours des 30 derniers jours (Comptes actifs mensuellement)",
-  "server_banner.active_users": "comptes actifs",
+  "server_banner.about_active_users": "Personnes utilisant ce serveur au cours des 30 derniers jours (Utilisateur·rice·s Actifs·ives Mensuellement)",
+  "server_banner.active_users": "Utilisateurs actifs",
   "server_banner.administered_by": "Administré par :",
   "server_banner.introduction": "{domain} fait partie du réseau social décentralisé propulsé par {mastodon}.",
   "server_banner.learn_more": "En savoir plus",
diff --git a/app/javascript/mastodon/reducers/settings.js b/app/javascript/mastodon/reducers/settings.js
index f9d3236e4a..c8def2384c 100644
--- a/app/javascript/mastodon/reducers/settings.js
+++ b/app/javascript/mastodon/reducers/settings.js
@@ -33,6 +33,7 @@ const initialState = ImmutableMap({
       follow: false,
       follow_request: false,
       favourite: false,
+      reaction: false,
       reblog: false,
       mention: false,
       poll: false,
@@ -56,6 +57,7 @@ const initialState = ImmutableMap({
       follow_request: false,
       favourite: true,
       reblog: true,
+      reaction: true,
       mention: true,
       poll: true,
       status: true,
@@ -69,6 +71,7 @@ const initialState = ImmutableMap({
       follow_request: false,
       favourite: true,
       reblog: true,
+      reaction: true,
       mention: true,
       poll: true,
       status: true,
diff --git a/app/javascript/mastodon/reducers/statuses.js b/app/javascript/mastodon/reducers/statuses.js
index c30c1e2ccd..2228906674 100644
--- a/app/javascript/mastodon/reducers/statuses.js
+++ b/app/javascript/mastodon/reducers/statuses.js
@@ -6,6 +6,11 @@ import {
   UNFAVOURITE_SUCCESS,
   BOOKMARK_REQUEST,
   BOOKMARK_FAIL,
+  REACTION_UPDATE,
+  REACTION_ADD_FAIL,
+  REACTION_REMOVE_FAIL,
+  REACTION_ADD_REQUEST,
+  REACTION_REMOVE_REQUEST,
 } from '../actions/interactions';
 import {
   STATUS_MUTE_SUCCESS,
@@ -35,6 +40,37 @@ const deleteStatus = (state, id, references) => {
   return state.delete(id);
 };
 
+const updateReaction = (state, id, name, updater) => state.update(
+  id,
+  status => status.update(
+    'reactions',
+    reactions => {
+      const index = reactions.findIndex(reaction => reaction.get('name') === name);
+      if (index > -1) {
+        return reactions.update(index, reaction => updater(reaction));
+      } else {
+        return reactions.push(updater(fromJS({ name, count: 0 })));
+      }
+    },
+  ),
+);
+
+const updateReactionCount = (state, reaction) => updateReaction(state, reaction.status_id, reaction.name, x => x.set('count', reaction.count));
+
+const addReaction = (state, id, name) => updateReaction(
+  state,
+  id,
+  name,
+  x => x.set('me', true).update('count', n => n + 1),
+);
+
+const removeReaction = (state, id, name) => updateReaction(
+  state,
+  id,
+  name,
+  x => x.set('me', false).update('count', n => n - 1),
+);
+
 const initialState = ImmutableMap();
 
 export default function statuses(state = initialState, action) {
@@ -61,6 +97,14 @@ export default function statuses(state = initialState, action) {
     return state.setIn([action.status.get('id'), 'reblogged'], true);
   case REBLOG_FAIL:
     return state.get(action.status.get('id')) === undefined ? state : state.setIn([action.status.get('id'), 'reblogged'], false);
+  case REACTION_UPDATE:
+    return updateReactionCount(state, action.reaction);
+  case REACTION_ADD_REQUEST:
+  case REACTION_REMOVE_FAIL:
+    return addReaction(state, action.id, action.name);
+  case REACTION_REMOVE_REQUEST:
+  case REACTION_ADD_FAIL:
+    return removeReaction(state, action.id, action.name);
   case STATUS_MUTE_SUCCESS:
     return state.setIn([action.id, 'muted'], true);
   case STATUS_UNMUTE_SUCCESS:
diff --git a/app/javascript/mastodon/selectors/index.js b/app/javascript/mastodon/selectors/index.js
index bf46c810e2..56fd5b5b2a 100644
--- a/app/javascript/mastodon/selectors/index.js
+++ b/app/javascript/mastodon/selectors/index.js
@@ -135,3 +135,11 @@ export const getAccountHidden = createSelector([
 ], (hidden, followingOrRequested, isSelf) => {
   return hidden && !(isSelf || followingOrRequested);
 });
+
+export const makeCustomEmojiMap = createSelector(
+  [state => state.get('custom_emojis')],
+  items => items.reduce(
+    (map, emoji) => map.set(emoji.get('shortcode'), emoji),
+    ImmutableMap(),
+  ),
+);
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index 713144f7de..3f60881dcf 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -1130,6 +1130,10 @@
       }
     }
   }
+
+  .reactions-bar--empty {
+    margin-top: 0;
+  }
 }
 
 .status__relative-time {
@@ -1252,6 +1256,16 @@
   align-items: center;
   gap: 18px;
   margin-top: 16px;
+
+  & > .emoji-picker-dropdown > .emoji-button {
+    padding: 0;
+  }
+}
+
+.status__action-bar-button {
+  .fa-plus {
+    padding-top: 1px;
+  }
 }
 
 .detailed-status__action-bar-dropdown {
@@ -4019,6 +4033,10 @@ a.status-card.compact:hover {
   text-align: center;
 }
 
+.detailed-status__button .emoji-button {
+  padding: 0;
+}
+
 .column-settings__outer {
   background: lighten($ui-base-color, 8%);
   padding: 15px;

From e405eb76f4f9963be3c06776f4fd22eeb919cb34 Mon Sep 17 00:00:00 2001
From: fef <owo@fef.moe>
Date: Wed, 30 Nov 2022 17:09:16 +0000
Subject: [PATCH 20/48] clean up new imports in vanilla flavour

---
 app/javascript/mastodon/components/status.js                   | 2 +-
 app/javascript/mastodon/components/status_action_bar.js        | 3 +--
 .../features/notifications/components/column_settings.js       | 1 -
 3 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/app/javascript/mastodon/components/status.js b/app/javascript/mastodon/components/status.js
index ec9e583e22..da926229ec 100644
--- a/app/javascript/mastodon/components/status.js
+++ b/app/javascript/mastodon/components/status.js
@@ -22,7 +22,7 @@ import PictureInPicturePlaceholder from 'mastodon/components/picture_in_picture_
 // We use the component (and not the container) since we do not want
 // to use the progress bar to show download progress
 import Bundle from '../features/ui/components/bundle';
-import { visibleReactions } from '../../flavours/glitch/initial_state';
+import { visibleReactions } from '../initial_state';
 
 export const textForScreenReader = (intl, status, rebloggedByText = false) => {
   const displayName = status.getIn(['account', 'display_name']);
diff --git a/app/javascript/mastodon/components/status_action_bar.js b/app/javascript/mastodon/components/status_action_bar.js
index b37b003182..53b8014b72 100644
--- a/app/javascript/mastodon/components/status_action_bar.js
+++ b/app/javascript/mastodon/components/status_action_bar.js
@@ -6,11 +6,10 @@ import IconButton from './icon_button';
 import DropdownMenuContainer from '../containers/dropdown_menu_container';
 import { defineMessages, injectIntl } from 'react-intl';
 import ImmutablePureComponent from 'react-immutable-pure-component';
-import { me } from '../initial_state';
+import { me, maxReactions } from '../initial_state';
 import classNames from 'classnames';
 import { PERMISSION_MANAGE_USERS } from 'mastodon/permissions';
 import EmojiPickerDropdown from '../features/compose/containers/emoji_picker_dropdown_container';
-import { maxReactions } from '../../flavours/glitch/initial_state';
 
 const messages = defineMessages({
   delete: { id: 'status.delete', defaultMessage: 'Delete' },
diff --git a/app/javascript/mastodon/features/notifications/components/column_settings.js b/app/javascript/mastodon/features/notifications/components/column_settings.js
index 3e91ebc369..3b36e634e5 100644
--- a/app/javascript/mastodon/features/notifications/components/column_settings.js
+++ b/app/javascript/mastodon/features/notifications/components/column_settings.js
@@ -6,7 +6,6 @@ import ClearColumnButton from './clear_column_button';
 import GrantPermissionButton from './grant_permission_button';
 import SettingToggle from './setting_toggle';
 import { PERMISSION_MANAGE_USERS, PERMISSION_MANAGE_REPORTS } from 'mastodon/permissions';
-import PillBarButton from '../../../../flavours/glitch/features/notifications/components/pill_bar_button';
 
 export default class ColumnSettings extends React.PureComponent {
 

From f580ffb12719cc99a1e098a0b268ef31956b5eb4 Mon Sep 17 00:00:00 2001
From: fef <owo@fef.moe>
Date: Wed, 30 Nov 2022 19:29:56 +0000
Subject: [PATCH 21/48] remove outdated comments

---
 app/javascript/flavours/glitch/components/status_reactions.js | 4 ----
 app/javascript/mastodon/components/status_reactions.js        | 4 ----
 2 files changed, 8 deletions(-)

diff --git a/app/javascript/flavours/glitch/components/status_reactions.js b/app/javascript/flavours/glitch/components/status_reactions.js
index 39956270a4..df2a686abd 100644
--- a/app/javascript/flavours/glitch/components/status_reactions.js
+++ b/app/javascript/flavours/glitch/components/status_reactions.js
@@ -36,10 +36,6 @@ export default class StatusReactions extends ImmutablePureComponent {
       .filter(x => x.get('count') > 0)
       .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);
     }
diff --git a/app/javascript/mastodon/components/status_reactions.js b/app/javascript/mastodon/components/status_reactions.js
index 39956270a4..df2a686abd 100644
--- a/app/javascript/mastodon/components/status_reactions.js
+++ b/app/javascript/mastodon/components/status_reactions.js
@@ -36,10 +36,6 @@ export default class StatusReactions extends ImmutablePureComponent {
       .filter(x => x.get('count') > 0)
       .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);
     }

From f4faa1b511564c9a9794adc438ca204d23c66a05 Mon Sep 17 00:00:00 2001
From: fef <owo@fef.moe>
Date: Thu, 1 Dec 2022 01:41:47 +0000
Subject: [PATCH 22/48] fix reaction deletion bug and clean up controller

Turns out the strange error where it would delete
the wrong reaction occurred because I forgot to
pass the emoji name to the query, which resulted
in the database deleting the first reaction it
found.  Also, this removes the unused set_reaction
callback and includes the Authorization module for
the status reactions controller.
---
 .../api/v1/statuses/reactions_controller.rb            | 10 +++-------
 app/services/unreact_service.rb                        |  4 ++--
 2 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/app/controllers/api/v1/statuses/reactions_controller.rb b/app/controllers/api/v1/statuses/reactions_controller.rb
index db43346def..9542d491c8 100644
--- a/app/controllers/api/v1/statuses/reactions_controller.rb
+++ b/app/controllers/api/v1/statuses/reactions_controller.rb
@@ -1,11 +1,11 @@
 # frozen_string_literal: true
 
 class Api::V1::Statuses::ReactionsController < Api::BaseController
+  include Authorization
+
   before_action -> { doorkeeper_authorize! :write, :'write:favourites' }
   before_action :require_user!
-
   before_action :set_status
-  before_action :set_reaction, except: :update
 
   def update
     ReactService.new.call(current_account, @status, params[:id])
@@ -13,16 +13,12 @@ class Api::V1::Statuses::ReactionsController < Api::BaseController
   end
 
   def destroy
-    UnreactService.new.call(current_account, @status)
+    UnreactService.new.call(current_account, @status, params[:id])
     render_empty
   end
 
   private
 
-  def set_reaction
-    @reaction = @status.status_reactions.where(account: current_account).find_by!(name: params[:id])
-  end
-
   def set_status
     @status = Status.find(params[:status_id])
   end
diff --git a/app/services/unreact_service.rb b/app/services/unreact_service.rb
index ebc270383c..f4089f33b5 100644
--- a/app/services/unreact_service.rb
+++ b/app/services/unreact_service.rb
@@ -3,8 +3,8 @@
 class UnreactService < BaseService
   include Payloadable
 
-  def call(account, status)
-    reaction = StatusReaction.find_by(account: account, status: status)
+  def call(account, status, name)
+    reaction = StatusReaction.find_by(account: account, status: status, name: name)
     return if reaction.nil?
 
     reaction.destroy!

From a0d7cadcfd4e7580dba22b368883b2c9d7d66873 Mon Sep 17 00:00:00 2001
From: fef <owo@fef.moe>
Date: Thu, 1 Dec 2022 02:24:08 +0000
Subject: [PATCH 23/48] change reaction api to match other interactions

Status reactions had an API similar to that of
announcement reactions, using PUT and DELETE at a
single endpoint.  I believe that for statuses, it
makes more sense to follow the convention of the
other interactions and use separate POST endpoints
for create and destroy respectively.
---
 app/controllers/api/v1/statuses/reactions_controller.rb | 2 +-
 app/javascript/flavours/glitch/actions/interactions.js  | 4 ++--
 app/javascript/mastodon/actions/interactions.js         | 4 ++--
 config/routes.rb                                        | 4 +++-
 4 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/app/controllers/api/v1/statuses/reactions_controller.rb b/app/controllers/api/v1/statuses/reactions_controller.rb
index 9542d491c8..333054f2a0 100644
--- a/app/controllers/api/v1/statuses/reactions_controller.rb
+++ b/app/controllers/api/v1/statuses/reactions_controller.rb
@@ -7,7 +7,7 @@ class Api::V1::Statuses::ReactionsController < Api::BaseController
   before_action :require_user!
   before_action :set_status
 
-  def update
+  def create
     ReactService.new.call(current_account, @status, params[:id])
     render_empty
   end
diff --git a/app/javascript/flavours/glitch/actions/interactions.js b/app/javascript/flavours/glitch/actions/interactions.js
index f65d7ec490..97cefaa207 100644
--- a/app/javascript/flavours/glitch/actions/interactions.js
+++ b/app/javascript/flavours/glitch/actions/interactions.js
@@ -416,7 +416,7 @@ export const addReaction = (statusId, name) => (dispatch, getState) => {
     dispatch(addReactionRequest(statusId, name, alreadyAdded));
   }
 
-  api(getState).put(`/api/v1/statuses/${statusId}/reactions/${name}`).then(() => {
+  api(getState).post(`/api/v1/statuses/${statusId}/react/${name}`).then(() => {
     dispatch(addReactionSuccess(statusId, name, alreadyAdded));
   }).catch(err => {
     if (!alreadyAdded) {
@@ -450,7 +450,7 @@ export const addReactionFail = (statusId, name, error) => ({
 export const removeReaction = (statusId, name) => (dispatch, getState) => {
   dispatch(removeReactionRequest(statusId, name));
 
-  api(getState).delete(`/api/v1/statuses/${statusId}/reactions/${name}`).then(() => {
+  api(getState).post(`/api/v1/statuses/${statusId}/unreact/${name}`).then(() => {
     dispatch(removeReactionSuccess(statusId, name));
   }).catch(err => {
     dispatch(removeReactionFail(statusId, name, err));
diff --git a/app/javascript/mastodon/actions/interactions.js b/app/javascript/mastodon/actions/interactions.js
index afae6705ff..c2672845ec 100644
--- a/app/javascript/mastodon/actions/interactions.js
+++ b/app/javascript/mastodon/actions/interactions.js
@@ -436,7 +436,7 @@ export const addReaction = (statusId, name) => (dispatch, getState) => {
     dispatch(addReactionRequest(statusId, name, alreadyAdded));
   }
 
-  api(getState).put(`/api/v1/statuses/${statusId}/reactions/${name}`).then(() => {
+  api(getState).post(`/api/v1/statuses/${statusId}/react/${name}`).then(() => {
     dispatch(addReactionSuccess(statusId, name, alreadyAdded));
   }).catch(err => {
     if (!alreadyAdded) {
@@ -470,7 +470,7 @@ export const addReactionFail = (statusId, name, error) => ({
 export const removeReaction = (statusId, name) => (dispatch, getState) => {
   dispatch(removeReactionRequest(statusId, name));
 
-  api(getState).delete(`/api/v1/statuses/${statusId}/reactions/${name}`).then(() => {
+  api(getState).post(`/api/v1/statuses/${statusId}/unreact/${name}`).then(() => {
     dispatch(removeReactionSuccess(statusId, name));
   }).catch(err => {
     dispatch(removeReactionFail(statusId, name, err));
diff --git a/config/routes.rb b/config/routes.rb
index da4ddfa200..2eeff8fcbb 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -442,6 +442,9 @@ Rails.application.routes.draw do
           resource :favourite, only: :create
           post :unfavourite, to: 'favourites#destroy'
 
+          post '/react/:id', to: 'reactions#create'
+          post '/unreact/:id', to: 'reactions#destroy'
+
           resource :bookmark, only: :create
           post :unbookmark, to: 'bookmarks#destroy'
 
@@ -453,7 +456,6 @@ Rails.application.routes.draw do
 
           resource :history, only: :show
           resource :source, only: :show
-          resources :reactions, only: [:update, :destroy]
 
           post :translate, to: 'translations#create'
         end

From 04467e8f6dba4f38bf5811fb0c428756a41d7f3d Mon Sep 17 00:00:00 2001
From: fef <owo@fef.moe>
Date: Thu, 1 Dec 2022 04:26:13 +0000
Subject: [PATCH 24/48] remove unnecessary parameter

---
 app/javascript/flavours/glitch/actions/interactions.js | 4 ++--
 app/javascript/mastodon/actions/interactions.js        | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/javascript/flavours/glitch/actions/interactions.js b/app/javascript/flavours/glitch/actions/interactions.js
index 97cefaa207..3717fe5a1e 100644
--- a/app/javascript/flavours/glitch/actions/interactions.js
+++ b/app/javascript/flavours/glitch/actions/interactions.js
@@ -413,11 +413,11 @@ export const addReaction = (statusId, name) => (dispatch, getState) => {
     }
   }
   if (!alreadyAdded) {
-    dispatch(addReactionRequest(statusId, name, alreadyAdded));
+    dispatch(addReactionRequest(statusId, name));
   }
 
   api(getState).post(`/api/v1/statuses/${statusId}/react/${name}`).then(() => {
-    dispatch(addReactionSuccess(statusId, name, alreadyAdded));
+    dispatch(addReactionSuccess(statusId, name));
   }).catch(err => {
     if (!alreadyAdded) {
       dispatch(addReactionFail(statusId, name, err));
diff --git a/app/javascript/mastodon/actions/interactions.js b/app/javascript/mastodon/actions/interactions.js
index c2672845ec..b06c0457f3 100644
--- a/app/javascript/mastodon/actions/interactions.js
+++ b/app/javascript/mastodon/actions/interactions.js
@@ -433,11 +433,11 @@ export const addReaction = (statusId, name) => (dispatch, getState) => {
     }
   }
   if (!alreadyAdded) {
-    dispatch(addReactionRequest(statusId, name, alreadyAdded));
+    dispatch(addReactionRequest(statusId, name));
   }
 
   api(getState).post(`/api/v1/statuses/${statusId}/react/${name}`).then(() => {
-    dispatch(addReactionSuccess(statusId, name, alreadyAdded));
+    dispatch(addReactionSuccess(statusId, name));
   }).catch(err => {
     if (!alreadyAdded) {
       dispatch(addReactionFail(statusId, name, err));

From a9bb743db7eeda87e7ceb79c263008c5776f0963 Mon Sep 17 00:00:00 2001
From: fef <owo@fef.moe>
Date: Thu, 1 Dec 2022 23:30:39 +0100
Subject: [PATCH 25/48] cleanup JS imports and other minor stuff

---
 .../flavours/glitch/actions/interactions.js           |  6 ------
 .../flavours/glitch/components/status_reactions.js    | 10 +---------
 .../glitch/features/local_settings/page/index.js      |  1 -
 .../glitch/features/local_settings/page/item/index.js | 11 +++++------
 .../features/status/components/detailed_status.js     |  2 +-
 .../flavours/glitch/features/status/index.js          |  3 +--
 app/javascript/flavours/glitch/initial_state.js       |  4 +++-
 app/javascript/mastodon/actions/interactions.js       |  6 ------
 app/javascript/mastodon/components/status.js          |  3 +--
 .../mastodon/components/status_reactions.js           | 10 +---------
 .../features/status/components/detailed_status.js     |  2 +-
 app/javascript/mastodon/features/status/index.js      |  3 +--
 app/javascript/mastodon/initial_state.js              |  4 +++-
 13 files changed, 18 insertions(+), 47 deletions(-)

diff --git a/app/javascript/flavours/glitch/actions/interactions.js b/app/javascript/flavours/glitch/actions/interactions.js
index 3717fe5a1e..0df6db4277 100644
--- a/app/javascript/flavours/glitch/actions/interactions.js
+++ b/app/javascript/flavours/glitch/actions/interactions.js
@@ -429,14 +429,12 @@ export const addReactionRequest = (statusId, name) => ({
   type: REACTION_ADD_REQUEST,
   id: statusId,
   name,
-  skipLoading: true,
 });
 
 export const addReactionSuccess = (statusId, name) => ({
   type: REACTION_ADD_SUCCESS,
   id: statusId,
   name,
-  skipLoading: true,
 });
 
 export const addReactionFail = (statusId, name, error) => ({
@@ -444,7 +442,6 @@ export const addReactionFail = (statusId, name, error) => ({
   id: statusId,
   name,
   error,
-  skipLoading: true,
 });
 
 export const removeReaction = (statusId, name) => (dispatch, getState) => {
@@ -461,19 +458,16 @@ export const removeReactionRequest = (statusId, name) => ({
   type: REACTION_REMOVE_REQUEST,
   id: statusId,
   name,
-  skipLoading: true,
 });
 
 export const removeReactionSuccess = (statusId, name) => ({
   type: REACTION_REMOVE_SUCCESS,
   id: statusId,
   name,
-  skipLoading: true,
 });
 
 export const removeReactionFail = (statusId, name) => ({
   type: REACTION_REMOVE_FAIL,
   id: statusId,
   name,
-  skipLoading: true,
 });
diff --git a/app/javascript/flavours/glitch/components/status_reactions.js b/app/javascript/flavours/glitch/components/status_reactions.js
index df2a686abd..63ec7941cb 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 { reduceMotion } from '../initial_state';
+import { autoPlayGif, reduceMotion } from '../initial_state';
 import spring from 'react-motion/lib/spring';
 import TransitionMotion from 'react-motion/lib/TransitionMotion';
 import classNames from 'classnames';
@@ -9,7 +9,6 @@ import React from 'react';
 import unicodeMapping from '../features/emoji/emoji_unicode_mapping_light';
 import AnimatedNumber from './animated_number';
 import { assetHost } from '../utils/config';
-import { autoPlayGif } from '../initial_state';
 
 export default class StatusReactions extends ImmutablePureComponent {
 
@@ -101,19 +100,12 @@ class Reaction extends ImmutablePureComponent {
   render() {
     const { reaction } = this.props;
 
-    let shortCode = reaction.get('name');
-
-    if (unicodeMapping[shortCode]) {
-      shortCode = unicodeMapping[shortCode].shortCode;
-    }
-
     return (
       <button
         className={classNames('reactions-bar__item', { active: reaction.get('me') })}
         onClick={this.handleClick}
         onMouseEnter={this.handleMouseEnter}
         onMouseLeave={this.handleMouseLeave}
-        title={`:${shortCode}:`}
         style={this.props.style}
       >
         <span className='reactions-bar__item__emoji'>
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 cc8e1f8f22..d01eec811e 100644
--- a/app/javascript/flavours/glitch/features/local_settings/page/index.js
+++ b/app/javascript/flavours/glitch/features/local_settings/page/index.js
@@ -29,7 +29,6 @@ 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' },
-  enter_amount_prompt: { id: 'settings.enter_amount_prompt', defaultMessage: 'Enter an amount' },
 });
 
 export default @injectIntl
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 966fc5c1ee..6b24e41435 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,21 +21,20 @@ 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, number } = this.props;
+    const { item, onChange, options, placeholder } = this.props;
     if (options && options.length > 0) onChange(item, target.value);
-    else if (placeholder) onChange(item, number ? parseInt(target.value) : target.value);
+    else if (placeholder) onChange(item, target.value);
     else onChange(item, target.checked);
   }
 
   render () {
     const { handleChange } = this;
-    const { settings, item, id, options, children, dependsOn, dependsOnNot, placeholder, number, disabled } = this.props;
+    const { settings, item, id, options, children, dependsOn, dependsOnNot, placeholder, disabled } = this.props;
     let enabled = !disabled;
 
     if (dependsOn) {
@@ -77,7 +76,7 @@ export default class LocalSettingsPageItem extends React.PureComponent {
           </fieldset>
         </div>
       );
-    } else if (placeholder || number) {
+    } else if (placeholder) {
       return (
         <div className='glitch local-settings__page__item string'>
           <label htmlFor={id}>
@@ -85,7 +84,7 @@ export default class LocalSettingsPageItem extends React.PureComponent {
             <p>
               <input
                 id={id}
-                type={number ? 'number' : 'text'}
+                type='text'
                 value={settings.getIn(item)}
                 placeholder={placeholder}
                 onChange={handleChange}
diff --git a/app/javascript/flavours/glitch/features/status/components/detailed_status.js b/app/javascript/flavours/glitch/features/status/components/detailed_status.js
index 68e199e9c3..835a0ead3b 100644
--- a/app/javascript/flavours/glitch/features/status/components/detailed_status.js
+++ b/app/javascript/flavours/glitch/features/status/components/detailed_status.js
@@ -20,7 +20,7 @@ import Icon from 'flavours/glitch/components/icon';
 import AnimatedNumber from 'flavours/glitch/components/animated_number';
 import PictureInPicturePlaceholder from 'flavours/glitch/components/picture_in_picture_placeholder';
 import EditedTimestamp from 'flavours/glitch/components/edited_timestamp';
-import StatusReactions from '../../../components/status_reactions';
+import StatusReactions from 'flavours/glitch/components/status_reactions';
 
 export default @injectIntl
 class DetailedStatus extends ImmutablePureComponent {
diff --git a/app/javascript/flavours/glitch/features/status/index.js b/app/javascript/flavours/glitch/features/status/index.js
index 8479ca57b5..1bbfe2b421 100644
--- a/app/javascript/flavours/glitch/features/status/index.js
+++ b/app/javascript/flavours/glitch/features/status/index.js
@@ -43,7 +43,7 @@ import { initMuteModal } from 'flavours/glitch/actions/mutes';
 import { initBlockModal } from 'flavours/glitch/actions/blocks';
 import { initReport } from 'flavours/glitch/actions/reports';
 import { initBoostModal } from 'flavours/glitch/actions/boosts';
-import { makeGetStatus } from 'flavours/glitch/selectors';
+import { makeCustomEmojiMap, makeGetStatus } from 'flavours/glitch/selectors';
 import ScrollContainer from 'flavours/glitch/containers/scroll_container';
 import ColumnBackButton from 'flavours/glitch/components/column_back_button';
 import ColumnHeader from '../../components/column_header';
@@ -58,7 +58,6 @@ import { autoUnfoldCW } from 'flavours/glitch/utils/content_warning';
 import { textForScreenReader, defaultMediaVisibility } from 'flavours/glitch/components/status';
 import Icon from 'flavours/glitch/components/icon';
 import { Helmet } from 'react-helmet';
-import { makeCustomEmojiMap } from '../../selectors';
 
 const messages = defineMessages({
   deleteConfirm: { id: 'confirmations.delete.confirm', defaultMessage: 'Delete' },
diff --git a/app/javascript/flavours/glitch/initial_state.js b/app/javascript/flavours/glitch/initial_state.js
index cafa5b1bbb..9431c66438 100644
--- a/app/javascript/flavours/glitch/initial_state.js
+++ b/app/javascript/flavours/glitch/initial_state.js
@@ -61,6 +61,7 @@
  * @property {boolean} limited_federation_mode
  * @property {string} locale
  * @property {string | null} mascot
+ * @property {number} max_reactions
  * @property {string=} me
  * @property {string=} moved_to_account_id
  * @property {string=} owner
@@ -79,6 +80,7 @@
  * @property {boolean} use_blurhash
  * @property {boolean=} use_pending_items
  * @property {string} version
+ * @property {number} visible_reactions
  * @property {boolean} translation_enabled
  * @property {object} local_settings
  */
@@ -124,7 +126,6 @@ export const mascot = getMeta('mascot');
 export const maxReactions = (initialState && initialState.max_reactions) || 1;
 export const me = getMeta('me');
 export const movedToAccountId = getMeta('moved_to_account_id');
-export const visibleReactions = getMeta('visible_reactions');
 export const owner = getMeta('owner');
 export const profile_directory = getMeta('profile_directory');
 export const reduceMotion = getMeta('reduce_motion');
@@ -140,6 +141,7 @@ export const unfollowModal = getMeta('unfollow_modal');
 export const useBlurhash = getMeta('use_blurhash');
 export const usePendingItems = getMeta('use_pending_items');
 export const version = getMeta('version');
+export const visibleReactions = getMeta('visible_reactions');
 export const translationEnabled = getMeta('translation_enabled');
 export const languages = initialState?.languages;
 
diff --git a/app/javascript/mastodon/actions/interactions.js b/app/javascript/mastodon/actions/interactions.js
index b06c0457f3..dd1395cbd3 100644
--- a/app/javascript/mastodon/actions/interactions.js
+++ b/app/javascript/mastodon/actions/interactions.js
@@ -449,14 +449,12 @@ export const addReactionRequest = (statusId, name) => ({
   type: REACTION_ADD_REQUEST,
   id: statusId,
   name,
-  skipLoading: true,
 });
 
 export const addReactionSuccess = (statusId, name) => ({
   type: REACTION_ADD_SUCCESS,
   id: statusId,
   name,
-  skipLoading: true,
 });
 
 export const addReactionFail = (statusId, name, error) => ({
@@ -464,7 +462,6 @@ export const addReactionFail = (statusId, name, error) => ({
   id: statusId,
   name,
   error,
-  skipLoading: true,
 });
 
 export const removeReaction = (statusId, name) => (dispatch, getState) => {
@@ -481,19 +478,16 @@ export const removeReactionRequest = (statusId, name) => ({
   type: REACTION_REMOVE_REQUEST,
   id: statusId,
   name,
-  skipLoading: true,
 });
 
 export const removeReactionSuccess = (statusId, name) => ({
   type: REACTION_REMOVE_SUCCESS,
   id: statusId,
   name,
-  skipLoading: true,
 });
 
 export const removeReactionFail = (statusId, name) => ({
   type: REACTION_REMOVE_FAIL,
   id: statusId,
   name,
-  skipLoading: true,
 });
diff --git a/app/javascript/mastodon/components/status.js b/app/javascript/mastodon/components/status.js
index da926229ec..284c5dbd78 100644
--- a/app/javascript/mastodon/components/status.js
+++ b/app/javascript/mastodon/components/status.js
@@ -16,13 +16,12 @@ import { MediaGallery, Video, Audio } from '../features/ui/util/async-components
 import { HotKeys } from 'react-hotkeys';
 import classNames from 'classnames';
 import Icon from 'mastodon/components/icon';
-import { displayMedia } from '../initial_state';
+import { displayMedia, visibleReactions } from '../initial_state';
 import PictureInPicturePlaceholder from 'mastodon/components/picture_in_picture_placeholder';
 
 // We use the component (and not the container) since we do not want
 // to use the progress bar to show download progress
 import Bundle from '../features/ui/components/bundle';
-import { visibleReactions } from '../initial_state';
 
 export const textForScreenReader = (intl, status, rebloggedByText = false) => {
   const displayName = status.getIn(['account', 'display_name']);
diff --git a/app/javascript/mastodon/components/status_reactions.js b/app/javascript/mastodon/components/status_reactions.js
index df2a686abd..63ec7941cb 100644
--- a/app/javascript/mastodon/components/status_reactions.js
+++ b/app/javascript/mastodon/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 { reduceMotion } from '../initial_state';
+import { autoPlayGif, reduceMotion } from '../initial_state';
 import spring from 'react-motion/lib/spring';
 import TransitionMotion from 'react-motion/lib/TransitionMotion';
 import classNames from 'classnames';
@@ -9,7 +9,6 @@ import React from 'react';
 import unicodeMapping from '../features/emoji/emoji_unicode_mapping_light';
 import AnimatedNumber from './animated_number';
 import { assetHost } from '../utils/config';
-import { autoPlayGif } from '../initial_state';
 
 export default class StatusReactions extends ImmutablePureComponent {
 
@@ -101,19 +100,12 @@ class Reaction extends ImmutablePureComponent {
   render() {
     const { reaction } = this.props;
 
-    let shortCode = reaction.get('name');
-
-    if (unicodeMapping[shortCode]) {
-      shortCode = unicodeMapping[shortCode].shortCode;
-    }
-
     return (
       <button
         className={classNames('reactions-bar__item', { active: reaction.get('me') })}
         onClick={this.handleClick}
         onMouseEnter={this.handleMouseEnter}
         onMouseLeave={this.handleMouseLeave}
-        title={`:${shortCode}:`}
         style={this.props.style}
       >
         <span className='reactions-bar__item__emoji'>
diff --git a/app/javascript/mastodon/features/status/components/detailed_status.js b/app/javascript/mastodon/features/status/components/detailed_status.js
index ccc7866d45..f34b66110f 100644
--- a/app/javascript/mastodon/features/status/components/detailed_status.js
+++ b/app/javascript/mastodon/features/status/components/detailed_status.js
@@ -17,7 +17,7 @@ import Icon from 'mastodon/components/icon';
 import AnimatedNumber from 'mastodon/components/animated_number';
 import PictureInPicturePlaceholder from 'mastodon/components/picture_in_picture_placeholder';
 import EditedTimestamp from 'mastodon/components/edited_timestamp';
-import StatusReactions from '../../../components/status_reactions';
+import StatusReactions from 'mastodon/components/status_reactions';
 
 const messages = defineMessages({
   public_short: { id: 'privacy.public.short', defaultMessage: 'Public' },
diff --git a/app/javascript/mastodon/features/status/index.js b/app/javascript/mastodon/features/status/index.js
index 3930804781..e262cd94fb 100644
--- a/app/javascript/mastodon/features/status/index.js
+++ b/app/javascript/mastodon/features/status/index.js
@@ -50,7 +50,7 @@ import { initMuteModal } from '../../actions/mutes';
 import { initBlockModal } from '../../actions/blocks';
 import { initBoostModal } from '../../actions/boosts';
 import { initReport } from '../../actions/reports';
-import { makeGetStatus, makeGetPictureInPicture } from '../../selectors';
+import { makeCustomEmojiMap, makeGetStatus, makeGetPictureInPicture } from '../../selectors';
 import ScrollContainer from 'mastodon/containers/scroll_container';
 import ColumnBackButton from '../../components/column_back_button';
 import ColumnHeader from '../../components/column_header';
@@ -64,7 +64,6 @@ import { attachFullscreenListener, detachFullscreenListener, isFullscreen } from
 import { textForScreenReader, defaultMediaVisibility } from '../../components/status';
 import Icon from 'mastodon/components/icon';
 import { Helmet } from 'react-helmet';
-import { makeCustomEmojiMap } from '../../selectors';
 
 const messages = defineMessages({
   deleteConfirm: { id: 'confirmations.delete.confirm', defaultMessage: 'Delete' },
diff --git a/app/javascript/mastodon/initial_state.js b/app/javascript/mastodon/initial_state.js
index 5f5b1babdf..9db8b2332a 100644
--- a/app/javascript/mastodon/initial_state.js
+++ b/app/javascript/mastodon/initial_state.js
@@ -61,6 +61,7 @@
  * @property {boolean} limited_federation_mode
  * @property {string} locale
  * @property {string | null} mascot
+ * @property {number} max_reactions
  * @property {string=} me
  * @property {string=} moved_to_account_id
  * @property {string=} owner
@@ -79,6 +80,7 @@
  * @property {boolean} use_blurhash
  * @property {boolean=} use_pending_items
  * @property {string} version
+ * @property {number} visible_reactions
  * @property {boolean} translation_enabled
  */
 
@@ -116,7 +118,6 @@ export const mascot = getMeta('mascot');
 export const maxReactions = (initialState && initialState.max_reactions) || 1;
 export const me = getMeta('me');
 export const movedToAccountId = getMeta('moved_to_account_id');
-export const visibleReactions = getMeta('visible_reactions');
 export const owner = getMeta('owner');
 export const profile_directory = getMeta('profile_directory');
 export const reduceMotion = getMeta('reduce_motion');
@@ -132,6 +133,7 @@ export const unfollowModal = getMeta('unfollow_modal');
 export const useBlurhash = getMeta('use_blurhash');
 export const usePendingItems = getMeta('use_pending_items');
 export const version = getMeta('version');
+export const visibleReactions = getMeta('visible_reactions');
 export const translationEnabled = getMeta('translation_enabled');
 export const languages = initialState?.languages;
 

From a2db70b3c845a555f0a6592e9d3b5f50128d367f Mon Sep 17 00:00:00 2001
From: fef <owo@fef.moe>
Date: Fri, 2 Dec 2022 01:00:08 +0000
Subject: [PATCH 26/48] rename nop handler to handleNoOp

This also adds the comment in action_bar.js to
status_action_bar.js, clarifying that a future
version could improve this code by modifying
EmojiPickerDropdown.
---
 .../flavours/glitch/components/status_action_bar.js           | 4 ++--
 .../flavours/glitch/features/status/components/action_bar.js  | 4 ++--
 app/javascript/mastodon/components/status_action_bar.js       | 4 ++--
 .../mastodon/features/status/components/action_bar.js         | 4 ++--
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/app/javascript/flavours/glitch/components/status_action_bar.js b/app/javascript/flavours/glitch/components/status_action_bar.js
index 1b88d0ea7f..0a1de5e336 100644
--- a/app/javascript/flavours/glitch/components/status_action_bar.js
+++ b/app/javascript/flavours/glitch/components/status_action_bar.js
@@ -208,7 +208,7 @@ class StatusActionBar extends ImmutablePureComponent {
     this.props.onAddFilter(this.props.status);
   }
 
-  nop = () => {}
+  handleNoOp = () => {} // hack for reaction add button
 
   render () {
     const { status, intl, withDismiss, withCounters, showReplyCount, scrollKey } = this.props;
@@ -317,7 +317,7 @@ class StatusActionBar extends ImmutablePureComponent {
     const reactButton = (
       <IconButton
         className='status__action-bar-button'
-        onClick={this.nop} // EmojiPickerDropdown handles that
+        onClick={this.handleNoOp} // EmojiPickerDropdown handles that
         title={intl.formatMessage(messages.react)}
         disabled={!canReact}
         icon='plus'
diff --git a/app/javascript/flavours/glitch/features/status/components/action_bar.js b/app/javascript/flavours/glitch/features/status/components/action_bar.js
index f93e3d0a3d..619c57685a 100644
--- a/app/javascript/flavours/glitch/features/status/components/action_bar.js
+++ b/app/javascript/flavours/glitch/features/status/components/action_bar.js
@@ -144,7 +144,7 @@ class ActionBar extends React.PureComponent {
     navigator.clipboard.writeText(url);
   }
 
-  nop = () => {} // hack for reaction add button
+  handleNoOp = () => {} // hack for reaction add button
 
   render () {
     const { status, intl } = this.props;
@@ -207,7 +207,7 @@ class ActionBar extends React.PureComponent {
     const reactButton = (
       <IconButton
         className='plus-icon'
-        onClick={this.nop} // EmojiPickerDropdown handles that
+        onClick={this.handleNoOp} // EmojiPickerDropdown handles that
         title={intl.formatMessage(messages.react)}
         disabled={!canReact}
         icon='plus'
diff --git a/app/javascript/mastodon/components/status_action_bar.js b/app/javascript/mastodon/components/status_action_bar.js
index 53b8014b72..01d64062da 100644
--- a/app/javascript/mastodon/components/status_action_bar.js
+++ b/app/javascript/mastodon/components/status_action_bar.js
@@ -243,7 +243,7 @@ class StatusActionBar extends ImmutablePureComponent {
     this.props.onFilter();
   }
 
-  nop = () => {}
+  handleNoOp = () => {} // hack for reaction add button
 
   render () {
     const { status, relationship, intl, withDismiss, withCounters, scrollKey } = this.props;
@@ -369,7 +369,7 @@ class StatusActionBar extends ImmutablePureComponent {
     const reactButton = (
       <IconButton
         className='status__action-bar-button'
-        onClick={this.nop} // EmojiPickerDropdown handles that
+        onClick={this.handleNoOp} // EmojiPickerDropdown handles that
         title={intl.formatMessage(messages.react)}
         disabled={!canReact}
         icon='plus'
diff --git a/app/javascript/mastodon/features/status/components/action_bar.js b/app/javascript/mastodon/features/status/components/action_bar.js
index ce272e4487..095bccfa8a 100644
--- a/app/javascript/mastodon/features/status/components/action_bar.js
+++ b/app/javascript/mastodon/features/status/components/action_bar.js
@@ -186,7 +186,7 @@ class ActionBar extends React.PureComponent {
     navigator.clipboard.writeText(url);
   }
 
-  nop = () => {} // hack for reaction add button
+  handleNoOp = () => {} // hack for reaction add button
 
   render () {
     const { status, relationship, intl } = this.props;
@@ -263,7 +263,7 @@ class ActionBar extends React.PureComponent {
     const reactButton = (
       <IconButton
         className='plus-icon'
-        onClick={this.nop} // EmojiPickerDropdown handles that
+        onClick={this.handleNoOp} // EmojiPickerDropdown handles that
         title={intl.formatMessage(messages.react)}
         disabled={!canReact}
         icon='plus'

From 65d727a9e612fd3fb08e9900d9ca2c13dbae81a2 Mon Sep 17 00:00:00 2001
From: fef <owo@fef.moe>
Date: Fri, 2 Dec 2022 01:52:59 +0000
Subject: [PATCH 27/48] fix padding on posts without reactions

The margins of the elements above and below the
main reaction list element overlapped before
reactions were added.  Adding display: none to
empty reaction bars restores this exact look.
---
 app/javascript/flavours/glitch/styles/components/status.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/javascript/flavours/glitch/styles/components/status.scss b/app/javascript/flavours/glitch/styles/components/status.scss
index 8b0bd49fef..d616c2656b 100644
--- a/app/javascript/flavours/glitch/styles/components/status.scss
+++ b/app/javascript/flavours/glitch/styles/components/status.scss
@@ -432,7 +432,7 @@
   }
 
   .reactions-bar--empty {
-    margin-top: 0;
+    display: none;
   }
 }
 

From e3f76a1cb03c2863ce73ac8411e2dffd93f39c43 Mon Sep 17 00:00:00 2001
From: Jeremy Kescher <jeremy@kescher.at>
Date: Fri, 2 Dec 2022 08:05:10 +0100
Subject: [PATCH 28/48] Add reaction limit to instance serializer

---
 app/serializers/rest/instance_serializer.rb    | 4 ++++
 app/serializers/rest/v1/instance_serializer.rb | 4 ++++
 2 files changed, 8 insertions(+)

diff --git a/app/serializers/rest/instance_serializer.rb b/app/serializers/rest/instance_serializer.rb
index 5ae1099d04..e28c932205 100644
--- a/app/serializers/rest/instance_serializer.rb
+++ b/app/serializers/rest/instance_serializer.rb
@@ -76,6 +76,10 @@ class REST::InstanceSerializer < ActiveModel::Serializer
       translation: {
         enabled: TranslationService.configured?,
       },
+
+      reactions: {
+        max_reactions: StatusReactionValidator::LIMIT,
+      },
     }
   end
 
diff --git a/app/serializers/rest/v1/instance_serializer.rb b/app/serializers/rest/v1/instance_serializer.rb
index 389ec7dffc..0bee371bcb 100644
--- a/app/serializers/rest/v1/instance_serializer.rb
+++ b/app/serializers/rest/v1/instance_serializer.rb
@@ -96,6 +96,10 @@ class REST::V1::InstanceSerializer < ActiveModel::Serializer
         min_expiration: PollValidator::MIN_EXPIRATION,
         max_expiration: PollValidator::MAX_EXPIRATION,
       },
+
+      reactions: {
+        max_reactions: StatusReactionValidator::LIMIT,
+      },
     }
   end
 

From 77491a8f2268b3a34701deae0c87f61cda72252b Mon Sep 17 00:00:00 2001
From: fef <owo@fef.moe>
Date: Fri, 2 Dec 2022 09:37:56 +0000
Subject: [PATCH 29/48] sanitize setting for number of visible reactions

This is kind of a hack, but the lack of
validation for settings unfortunately makes it
necessary.
---
 app/lib/user_settings_decorator.rb                       | 9 ++++++---
 app/views/settings/preferences/appearance/show.html.haml | 2 +-
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/app/lib/user_settings_decorator.rb b/app/lib/user_settings_decorator.rb
index 17fbacf0dd..f4360b9475 100644
--- a/app/lib/user_settings_decorator.rb
+++ b/app/lib/user_settings_decorator.rb
@@ -160,7 +160,7 @@ class UserSettingsDecorator
   end
 
   def visible_reactions_preference
-    integer_cast_setting 'setting_visible_reactions'
+    integer_cast_setting('setting_visible_reactions', 0)
   end
 
   def always_send_emails_preference
@@ -171,8 +171,11 @@ class UserSettingsDecorator
     ActiveModel::Type::Boolean.new.cast(settings[key])
   end
 
-  def integer_cast_setting(key)
-    ActiveModel::Type::Integer.new.cast(settings[key])
+  def integer_cast_setting(key, min = nil, max = nil)
+    i = ActiveModel::Type::Integer.new.cast(settings[key])
+    return min if !min.nil? && i < min
+    return max if !max.nil? && i > max
+    i
   end
 
   def coerced_settings(key)
diff --git a/app/views/settings/preferences/appearance/show.html.haml b/app/views/settings/preferences/appearance/show.html.haml
index 6c5f7414ec..af8cd4bd85 100644
--- a/app/views/settings/preferences/appearance/show.html.haml
+++ b/app/views/settings/preferences/appearance/show.html.haml
@@ -37,7 +37,7 @@
     = f.input :setting_crop_images, as: :boolean, wrapper: :with_label
 
   .fields-group.fields-row__column.fields-row__column-6
-    = f.input :setting_visible_reactions, wrapper: :with_label, input_html: { type: 'number', data: { default: '6' } }, hint: false
+    = f.input :setting_visible_reactions, wrapper: :with_label, input_html: { type: 'number', min: '0', data: { default: '6' } }, hint: false
 
   %h4= t 'appearance.discovery'
 

From 17d23d1c7360ce4d50d53fd107d429657e2b4350 Mon Sep 17 00:00:00 2001
From: fef <owo@fef.moe>
Date: Fri, 2 Dec 2022 10:17:59 +0000
Subject: [PATCH 30/48] fix integer cast bug

Gotta love Rails.
---
 app/lib/user_settings_decorator.rb | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/app/lib/user_settings_decorator.rb b/app/lib/user_settings_decorator.rb
index f4360b9475..92c393785b 100644
--- a/app/lib/user_settings_decorator.rb
+++ b/app/lib/user_settings_decorator.rb
@@ -173,6 +173,8 @@ class UserSettingsDecorator
 
   def integer_cast_setting(key, min = nil, max = nil)
     i = ActiveModel::Type::Integer.new.cast(settings[key])
+    # the cast above doesn't return a number if passed the string "e"
+    i = 0 unless i.is_a? Numeric
     return min if !min.nil? && i < min
     return max if !max.nil? && i > max
     i

From bd026ad118c7b476287f28dc24cff46c80976055 Mon Sep 17 00:00:00 2001
From: fef <owo@fef.moe>
Date: Fri, 2 Dec 2022 17:02:06 +0000
Subject: [PATCH 31/48] download remote custom emojis from reactions

Emoji reactions containing custom emojis from
remote instances were assumed to already have
been downloaded and stored in the database.
This might obviously not be the case.
---
 app/lib/activitypub/activity.rb             | 26 +++++++++++++++++
 app/lib/activitypub/activity/emoji_react.rb | 13 +++++++--
 app/lib/activitypub/activity/like.rb        | 32 ++++++++++++++-------
 3 files changed, 58 insertions(+), 13 deletions(-)

diff --git a/app/lib/activitypub/activity.rb b/app/lib/activitypub/activity.rb
index a6b91f62da..29df445061 100644
--- a/app/lib/activitypub/activity.rb
+++ b/app/lib/activitypub/activity.rb
@@ -176,4 +176,30 @@ class ActivityPub::Activity
     Rails.logger.info("Rejected #{@json['type']} activity #{@json['id']} from #{@account.uri}#{@options[:relayed_through_actor] && "via #{@options[:relayed_through_actor].uri}"}")
     nil
   end
+
+  # Ensure all emojis declared in the activity's tags are
+  # present in the database and downloaded to the local cache.
+  def process_emoji_tags
+    as_array(@object['tag']).each do |tag|
+      process_single_emoji(tag) if tag['type'] == 'Emoji'
+    end
+  end
+
+  def process_single_emoji(tag)
+    parser = ActivityPub::Parser::CustomEmojiParser.new(tag)
+    return if parser.shortcode.blank? || parser.image_remote_url.blank?
+
+    emoji = CustomEmoji.find_by(shortcode: parser.shortcode, domain: @account.domain)
+    return unless emoji.nil? ||
+                  parser.image_remote_url != emoji.image_remote_url ||
+                  (parser.updated_at && parser.updated_at >= emoji.updated_at)
+
+    begin
+      emoji ||= CustomEmoji.new(domain: @account.domain, shortcode: parser.shortcode, uri: parser.uri)
+      emoji.image_remote_url = parser.image_remote_url
+      emoji.save
+    rescue Seahorse::Client::NetworkingError => e
+      Rails.logger.warn "Error fetching emoji: #{e}"
+    end
+  end
 end
diff --git a/app/lib/activitypub/activity/emoji_react.rb b/app/lib/activitypub/activity/emoji_react.rb
index 595751aaae..c3d50b1e05 100644
--- a/app/lib/activitypub/activity/emoji_react.rb
+++ b/app/lib/activitypub/activity/emoji_react.rb
@@ -5,9 +5,16 @@ class ActivityPub::Activity::EmojiReact < ActivityPub::Activity
     original_status = status_from_uri(object_uri)
     name = @json['content']
     return if original_status.nil? ||
-      !original_status.account.local? ||
-      delete_arrived_first?(@json['id']) ||
-      @account.reacted?(original_status, name)
+              !original_status.account.local? ||
+              delete_arrived_first?(@json['id']) ||
+              @account.reacted?(original_status, name)
+
+    if name =~ /^:.*:$/
+      process_emoji_tags
+
+      name.delete! ':'
+      return if CustomEmoji.find_by(shortcode: name, domain: @account.domain).nil?
+    end
 
     reaction = original_status.status_reactions.create!(account: @account, name: name)
 
diff --git a/app/lib/activitypub/activity/like.rb b/app/lib/activitypub/activity/like.rb
index 6af516d109..311a58d3cd 100644
--- a/app/lib/activitypub/activity/like.rb
+++ b/app/lib/activitypub/activity/like.rb
@@ -5,16 +5,7 @@ class ActivityPub::Activity::Like < ActivityPub::Activity
     original_status = status_from_uri(object_uri)
     return if original_status.nil? || !original_status.account.local? || delete_arrived_first?(@json['id'])
 
-    # misskey delivers reactions as likes and attaches the emoji in _misskey_reaction
-    mk_reaction = @json['_misskey_reaction']
-    unless mk_reaction.nil?
-      custom_emoji = CustomEmoji.find_by(shortcode: mk_reaction, domain: @account.domain)
-      return if @account.reacted?(original_status, mk_reaction, custom_emoji)
-
-      reaction = original_status.status_reactions.create!(account: @account, name: mk_reaction, custom_emoji: custom_emoji)
-      LocalNotificationWorker.perform_async(original_status.account_id, reaction.id, 'StatusReaction', 'reaction')
-      return
-    end
+    return if maybe_process_misskey_reaction(original_status)
 
     return if @account.favourited?(original_status)
 
@@ -23,4 +14,25 @@ class ActivityPub::Activity::Like < ActivityPub::Activity
     LocalNotificationWorker.perform_async(original_status.account_id, favourite.id, 'Favourite', 'favourite')
     Trends.statuses.register(original_status)
   end
+
+  # Misskey delivers reactions as likes with the emoji in _misskey_reaction
+  # see https://misskey-hub.net/ns.html#misskey-reaction for details
+  def maybe_process_misskey_reaction(original_status)
+    name = @json['_misskey_reaction']
+    return false if name.nil?
+
+    custom_emoji = nil
+    if name =~ /^:.*:$/
+      process_emoji_tags
+
+      name.delete! ':'
+      custom_emoji = CustomEmoji.find_by(shortcode: name, domain: @account.domain)
+      return false if custom_emoji.nil? # invalid custom emoji, treat it as a regular like
+    end
+    return true if @account.reacted?(original_status, name, custom_emoji)
+
+    reaction = original_status.status_reactions.create!(account: @account, name: name, custom_emoji: custom_emoji)
+    LocalNotificationWorker.perform_async(original_status.account_id, reaction.id, 'StatusReaction', 'reaction')
+    return true
+  end
 end

From 6d51a3de13fef04345341d885115d8c665fca95d Mon Sep 17 00:00:00 2001
From: fef <owo@fef.moe>
Date: Sat, 3 Dec 2022 08:24:23 +0000
Subject: [PATCH 32/48] support Undo action for EmojiReaction

---
 app/lib/activitypub/activity/undo.rb | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/app/lib/activitypub/activity/undo.rb b/app/lib/activitypub/activity/undo.rb
index 9eff1b71c9..54cda1947f 100644
--- a/app/lib/activitypub/activity/undo.rb
+++ b/app/lib/activitypub/activity/undo.rb
@@ -11,6 +11,8 @@ class ActivityPub::Activity::Undo < ActivityPub::Activity
       undo_follow
     when 'Like'
       undo_like
+    when 'EmojiReact'
+      undo_emoji_react
     when 'Block'
       undo_block
     when nil
@@ -113,6 +115,22 @@ class ActivityPub::Activity::Undo < ActivityPub::Activity
     end
   end
 
+  def undo_emoji_react
+    name = @object['content']
+    return if name.nil?
+
+    status = status_from_uri(target_uri)
+
+    return if status.nil? || !status.account.local?
+
+    if @account.reacted?(status, name.delete(':'))
+      reaction = status.status_reactions.where(account: @account, name: name).first
+      reaction&.destroy
+    else
+      delete_later!(object_uri)
+    end
+  end
+
   def undo_block
     target_account = account_from_uri(target_uri)
 

From 7175d10935c23ff27c0f0db4a8a640e5bbf64173 Mon Sep 17 00:00:00 2001
From: fef <owo@fef.moe>
Date: Sat, 3 Dec 2022 10:22:15 +0000
Subject: [PATCH 33/48] handle incoming custom emoji reactions properly

---
 app/lib/activitypub/activity.rb             | 23 ++++++++++++---------
 app/lib/activitypub/activity/emoji_react.rb |  8 ++++---
 app/lib/activitypub/activity/like.rb        |  6 +++---
 app/models/concerns/account_interactions.rb |  4 ++--
 app/models/status_reaction.rb               |  7 ++++++-
 5 files changed, 29 insertions(+), 19 deletions(-)

diff --git a/app/lib/activitypub/activity.rb b/app/lib/activitypub/activity.rb
index 29df445061..8324dfe715 100644
--- a/app/lib/activitypub/activity.rb
+++ b/app/lib/activitypub/activity.rb
@@ -179,24 +179,27 @@ class ActivityPub::Activity
 
   # Ensure all emojis declared in the activity's tags are
   # present in the database and downloaded to the local cache.
-  def process_emoji_tags
-    as_array(@object['tag']).each do |tag|
-      process_single_emoji(tag) if tag['type'] == 'Emoji'
+  # Required by EmojiReact and Like for emoji reactions.
+  def process_emoji_tags(tags)
+    as_array(tags).each do |tag|
+      process_single_emoji tag if tag['type'] == 'Emoji'
     end
   end
 
   def process_single_emoji(tag)
-    parser = ActivityPub::Parser::CustomEmojiParser.new(tag)
-    return if parser.shortcode.blank? || parser.image_remote_url.blank?
+    custom_emoji_parser = ActivityPub::Parser::CustomEmojiParser.new(tag)
+    return if custom_emoji_parser.shortcode.blank? || custom_emoji_parser.image_remote_url.blank?
 
-    emoji = CustomEmoji.find_by(shortcode: parser.shortcode, domain: @account.domain)
+    emoji = CustomEmoji.find_by(shortcode: custom_emoji_parser.shortcode, domain: @account.domain)
     return unless emoji.nil? ||
-                  parser.image_remote_url != emoji.image_remote_url ||
-                  (parser.updated_at && parser.updated_at >= emoji.updated_at)
+                  custom_emoji_parser.image_remote_url != emoji.image_remote_url ||
+                  (custom_emoji_parser.updated_at && custom_emoji_parser.updated_at >= emoji.updated_at)
 
     begin
-      emoji ||= CustomEmoji.new(domain: @account.domain, shortcode: parser.shortcode, uri: parser.uri)
-      emoji.image_remote_url = parser.image_remote_url
+      emoji ||= CustomEmoji.new(domain: @account.domain,
+                                shortcode: custom_emoji_parser.shortcode,
+                                uri: custom_emoji_parser.uri)
+      emoji.image_remote_url = custom_emoji_parser.image_remote_url
       emoji.save
     rescue Seahorse::Client::NetworkingError => e
       Rails.logger.warn "Error fetching emoji: #{e}"
diff --git a/app/lib/activitypub/activity/emoji_react.rb b/app/lib/activitypub/activity/emoji_react.rb
index c3d50b1e05..2730270fc7 100644
--- a/app/lib/activitypub/activity/emoji_react.rb
+++ b/app/lib/activitypub/activity/emoji_react.rb
@@ -9,14 +9,16 @@ class ActivityPub::Activity::EmojiReact < ActivityPub::Activity
               delete_arrived_first?(@json['id']) ||
               @account.reacted?(original_status, name)
 
+    custom_emoji = nil
     if name =~ /^:.*:$/
-      process_emoji_tags
+      process_emoji_tags(@json['tag'])
 
       name.delete! ':'
-      return if CustomEmoji.find_by(shortcode: name, domain: @account.domain).nil?
+      custom_emoji = CustomEmoji.find_by(shortcode: name, domain: @account.domain)
+      return if custom_emoji.nil?
     end
 
-    reaction = original_status.status_reactions.create!(account: @account, name: name)
+    reaction = original_status.status_reactions.create!(account: @account, name: name, custom_emoji: custom_emoji)
 
     LocalNotificationWorker.perform_async(original_status.account_id, reaction.id, 'StatusReaction', 'reaction')
   end
diff --git a/app/lib/activitypub/activity/like.rb b/app/lib/activitypub/activity/like.rb
index 311a58d3cd..66d8e59c8f 100644
--- a/app/lib/activitypub/activity/like.rb
+++ b/app/lib/activitypub/activity/like.rb
@@ -23,16 +23,16 @@ class ActivityPub::Activity::Like < ActivityPub::Activity
 
     custom_emoji = nil
     if name =~ /^:.*:$/
-      process_emoji_tags
+      process_emoji_tags(@json['tag'])
 
       name.delete! ':'
       custom_emoji = CustomEmoji.find_by(shortcode: name, domain: @account.domain)
       return false if custom_emoji.nil? # invalid custom emoji, treat it as a regular like
     end
-    return true if @account.reacted?(original_status, name, custom_emoji)
+    return true if @account.reacted?(original_status, name)
 
     reaction = original_status.status_reactions.create!(account: @account, name: name, custom_emoji: custom_emoji)
     LocalNotificationWorker.perform_async(original_status.account_id, reaction.id, 'StatusReaction', 'reaction')
-    return true
+    true
   end
 end
diff --git a/app/models/concerns/account_interactions.rb b/app/models/concerns/account_interactions.rb
index 6143bc8263..b6d54fe1ce 100644
--- a/app/models/concerns/account_interactions.rb
+++ b/app/models/concerns/account_interactions.rb
@@ -239,8 +239,8 @@ module AccountInteractions
     status.proper.favourites.where(account: self).exists?
   end
 
-  def reacted?(status, name, custom_emoji = nil)
-    status.proper.status_reactions.where(account: self, name: name, custom_emoji: custom_emoji).exists?
+  def reacted?(status, name)
+    status.proper.status_reactions.where(account: self, name: name).exists?
   end
 
   def bookmarked?(status)
diff --git a/app/models/status_reaction.rb b/app/models/status_reaction.rb
index 32cb9edd4a..4793ff9aa3 100644
--- a/app/models/status_reaction.rb
+++ b/app/models/status_reaction.rb
@@ -24,6 +24,11 @@ class StatusReaction < ApplicationRecord
   private
 
   def set_custom_emoji
-    self.custom_emoji = CustomEmoji.local.find_by(disabled: false, shortcode: name) if name.present?
+    return if name.blank?
+    self.custom_emoji = if account.local?
+                          CustomEmoji.local.find_by(disabled: false, shortcode: name)
+                        else
+                          CustomEmoji.find_by(shortcode: name, domain: account.domain)
+                        end
   end
 end

From f0197c80dc64654a6f3dda7b5966ad0077579e9d Mon Sep 17 00:00:00 2001
From: fef <owo@fef.moe>
Date: Sat, 3 Dec 2022 11:57:00 +0000
Subject: [PATCH 34/48] display external custom emoji reactions properly

Using an emoji map was completely unnecessary in
the first place, because the reaction list from
the API response includes URLs for every custom
emoji anyway.  The reaction list now also contains
a boolean field indicating whether it is an
external custom emoji, which is required because
people should only be able to react with Unicode
emojis and local custom ones, not with custom
emojis from other servers.
---
 .../flavours/glitch/components/status.js      |  2 --
 .../glitch/components/status_action_bar.js    | 11 ++-----
 .../glitch/components/status_reactions.js     | 33 ++++++++++---------
 .../glitch/containers/status_container.js     |  2 --
 .../features/status/components/action_bar.js  |  2 +-
 .../status/components/detailed_status.js      |  2 --
 .../flavours/glitch/features/status/index.js  |  4 +--
 .../flavours/glitch/selectors/index.js        | 10 +-----
 app/serializers/rest/reaction_serializer.rb   | 10 +++++-
 9 files changed, 32 insertions(+), 44 deletions(-)

diff --git a/app/javascript/flavours/glitch/components/status.js b/app/javascript/flavours/glitch/components/status.js
index 3ef5f453fd..08cfbdada0 100644
--- a/app/javascript/flavours/glitch/components/status.js
+++ b/app/javascript/flavours/glitch/components/status.js
@@ -105,7 +105,6 @@ class Status extends ImmutablePureComponent {
     scrollKey: PropTypes.string,
     deployPictureInPicture: PropTypes.func,
     settings: ImmutablePropTypes.map.isRequired,
-    emojiMap: ImmutablePropTypes.map.isRequired,
     pictureInPicture: PropTypes.shape({
       inUse: PropTypes.bool,
       available: PropTypes.bool,
@@ -811,7 +810,6 @@ class Status extends ImmutablePureComponent {
             numVisible={visibleReactions}
             addReaction={this.props.onReactionAdd}
             removeReaction={this.props.onReactionRemove}
-            emojiMap={this.props.emojiMap}
           />
 
           {!isCollapsed || !(muted || !settings.getIn(['collapsed', 'show_action_bar'])) ? (
diff --git a/app/javascript/flavours/glitch/components/status_action_bar.js b/app/javascript/flavours/glitch/components/status_action_bar.js
index 0a1de5e336..33dbe3ab89 100644
--- a/app/javascript/flavours/glitch/components/status_action_bar.js
+++ b/app/javascript/flavours/glitch/components/status_action_bar.js
@@ -118,13 +118,7 @@ class StatusActionBar extends ImmutablePureComponent {
   }
 
   handleEmojiPick = data => {
-    const { signedIn } = this.context.identity;
-
-    if (signedIn) {
-      this.props.onReactionAdd(this.props.status.get('id'), data.native.replace(/:/g, ''));
-    } else {
-      this.props.onInteractionModal('favourite', this.props.status);
-    }
+    this.props.onReactionAdd(this.props.status.get('id'), data.native.replace(/:/g, ''));
   }
 
   handleReblogClick = e => {
@@ -212,6 +206,7 @@ class StatusActionBar extends ImmutablePureComponent {
 
   render () {
     const { status, intl, withDismiss, withCounters, showReplyCount, scrollKey } = this.props;
+    const { signedIn } = this.context.identity;
 
     const anonymousAccess    = !me;
     const mutingConversation = status.get('muted');
@@ -313,7 +308,7 @@ class StatusActionBar extends ImmutablePureComponent {
       <IconButton className='status__action-bar-button' title={intl.formatMessage(messages.hide)} icon='eye' onClick={this.handleHideClick} />
     );
 
-    const canReact = status.get('reactions').filter(r => r.get('count') > 0 && r.get('me')).size < maxReactions;
+    const canReact = signedIn && status.get('reactions').filter(r => r.get('count') > 0 && r.get('me')).size < maxReactions;
     const reactButton = (
       <IconButton
         className='status__action-bar-button'
diff --git a/app/javascript/flavours/glitch/components/status_reactions.js b/app/javascript/flavours/glitch/components/status_reactions.js
index 63ec7941cb..e263a64809 100644
--- a/app/javascript/flavours/glitch/components/status_reactions.js
+++ b/app/javascript/flavours/glitch/components/status_reactions.js
@@ -18,7 +18,6 @@ export default class StatusReactions extends ImmutablePureComponent {
     numVisible: PropTypes.number,
     addReaction: PropTypes.func.isRequired,
     removeReaction: PropTypes.func.isRequired,
-    emojiMap: ImmutablePropTypes.map.isRequired,
   };
 
   willEnter() {
@@ -57,7 +56,6 @@ export default class StatusReactions extends ImmutablePureComponent {
                 style={{ transform: `scale(${style.scale})`, position: style.scale < 0.5 ? 'absolute' : 'static' }}
                 addReaction={this.props.addReaction}
                 removeReaction={this.props.removeReaction}
-                emojiMap={this.props.emojiMap}
               />
             ))}
           </div>
@@ -75,7 +73,6 @@ class Reaction extends ImmutablePureComponent {
     reaction: ImmutablePropTypes.map.isRequired,
     addReaction: PropTypes.func.isRequired,
     removeReaction: PropTypes.func.isRequired,
-    emojiMap: ImmutablePropTypes.map.isRequired,
     style: PropTypes.object,
   };
 
@@ -86,10 +83,12 @@ class Reaction extends ImmutablePureComponent {
   handleClick = () => {
     const { reaction, statusId, addReaction, removeReaction } = this.props;
 
-    if (reaction.get('me')) {
-      removeReaction(statusId, reaction.get('name'));
-    } else {
-      addReaction(statusId, reaction.get('name'));
+    if (!reaction.get('extern')) {
+      if (reaction.get('me')) {
+        removeReaction(statusId, reaction.get('name'));
+      } else {
+        addReaction(statusId, reaction.get('name'));
+      }
     }
   }
 
@@ -109,7 +108,12 @@ class Reaction extends ImmutablePureComponent {
         style={this.props.style}
       >
         <span className='reactions-bar__item__emoji'>
-          <Emoji hovered={this.state.hovered} emoji={reaction.get('name')} emojiMap={this.props.emojiMap} />
+          <Emoji
+            hovered={this.state.hovered}
+            emoji={reaction.get('name')}
+            url={reaction.get('url')}
+            staticUrl={reaction.get('static_url')}
+          />
         </span>
         <span className='reactions-bar__item__count'>
           <AnimatedNumber value={reaction.get('count')} />
@@ -124,12 +128,13 @@ class Emoji extends React.PureComponent {
 
   static propTypes = {
     emoji: PropTypes.string.isRequired,
-    emojiMap: ImmutablePropTypes.map.isRequired,
     hovered: PropTypes.bool.isRequired,
+    url: PropTypes.string,
+    staticUrl: PropTypes.string,
   };
 
   render() {
-    const { emoji, emojiMap, hovered } = this.props;
+    const { emoji, hovered, url, staticUrl } = this.props;
 
     if (unicodeMapping[emoji]) {
       const { filename, shortCode } = unicodeMapping[this.props.emoji];
@@ -144,10 +149,8 @@ class Emoji extends React.PureComponent {
           src={`${assetHost}/emoji/${filename}.svg`}
         />
       );
-    } else if (emojiMap.get(emoji)) {
-      const filename = (autoPlayGif || hovered)
-        ? emojiMap.getIn([emoji, 'url'])
-        : emojiMap.getIn([emoji, 'static_url']);
+    } else {
+      const filename = (autoPlayGif || hovered) ? url : staticUrl;
       const shortCode = `:${emoji}:`;
 
       return (
@@ -159,8 +162,6 @@ class Emoji extends React.PureComponent {
           src={filename}
         />
       );
-    } else {
-      return null;
     }
   }
 
diff --git a/app/javascript/flavours/glitch/containers/status_container.js b/app/javascript/flavours/glitch/containers/status_container.js
index c2fd15b17c..d68e059af4 100644
--- a/app/javascript/flavours/glitch/containers/status_container.js
+++ b/app/javascript/flavours/glitch/containers/status_container.js
@@ -45,7 +45,6 @@ import { showAlertForError } from '../actions/alerts';
 import AccountContainer from 'flavours/glitch/containers/account_container';
 import Spoilers from '../components/spoilers';
 import Icon from 'flavours/glitch/components/icon';
-import { makeCustomEmojiMap } from '../selectors';
 
 const messages = defineMessages({
   deleteConfirm: { id: 'confirmations.delete.confirm', defaultMessage: 'Delete' },
@@ -85,7 +84,6 @@ const makeMapStateToProps = () => {
       account: account || props.account,
       settings: state.get('local_settings'),
       prepend: prepend || props.prepend,
-      emojiMap: makeCustomEmojiMap(state),
 
       pictureInPicture: {
         inUse: state.getIn(['meta', 'layout']) !== 'mobile' && state.get('picture_in_picture').statusId === props.id,
diff --git a/app/javascript/flavours/glitch/features/status/components/action_bar.js b/app/javascript/flavours/glitch/features/status/components/action_bar.js
index 619c57685a..1ed89ea059 100644
--- a/app/javascript/flavours/glitch/features/status/components/action_bar.js
+++ b/app/javascript/flavours/glitch/features/status/components/action_bar.js
@@ -203,7 +203,7 @@ class ActionBar extends React.PureComponent {
       }
     }
 
-    const canReact = status.get('reactions').filter(r => r.get('count') > 0 && r.get('me')).size < maxReactions;
+    const canReact = signedIn && status.get('reactions').filter(r => r.get('count') > 0 && r.get('me')).size < maxReactions;
     const reactButton = (
       <IconButton
         className='plus-icon'
diff --git a/app/javascript/flavours/glitch/features/status/components/detailed_status.js b/app/javascript/flavours/glitch/features/status/components/detailed_status.js
index 835a0ead3b..a3d6150b7b 100644
--- a/app/javascript/flavours/glitch/features/status/components/detailed_status.js
+++ b/app/javascript/flavours/glitch/features/status/components/detailed_status.js
@@ -46,7 +46,6 @@ class DetailedStatus extends ImmutablePureComponent {
     onToggleMediaVisibility: PropTypes.func,
     onReactionAdd: PropTypes.func.isRequired,
     onReactionRemove: PropTypes.func.isRequired,
-    emojiMap: ImmutablePropTypes.map.isRequired,
     intl: PropTypes.object.isRequired,
   };
 
@@ -328,7 +327,6 @@ class DetailedStatus extends ImmutablePureComponent {
             reactions={status.get('reactions')}
             addReaction={this.props.onReactionAdd}
             removeReaction={this.props.onReactionRemove}
-            emojiMap={this.props.emojiMap}
           />
 
           <div className='detailed-status__meta'>
diff --git a/app/javascript/flavours/glitch/features/status/index.js b/app/javascript/flavours/glitch/features/status/index.js
index 1bbfe2b421..a33939445f 100644
--- a/app/javascript/flavours/glitch/features/status/index.js
+++ b/app/javascript/flavours/glitch/features/status/index.js
@@ -43,7 +43,7 @@ import { initMuteModal } from 'flavours/glitch/actions/mutes';
 import { initBlockModal } from 'flavours/glitch/actions/blocks';
 import { initReport } from 'flavours/glitch/actions/reports';
 import { initBoostModal } from 'flavours/glitch/actions/boosts';
-import { makeCustomEmojiMap, makeGetStatus } from 'flavours/glitch/selectors';
+import { makeGetStatus } from 'flavours/glitch/selectors';
 import ScrollContainer from 'flavours/glitch/containers/scroll_container';
 import ColumnBackButton from 'flavours/glitch/components/column_back_button';
 import ColumnHeader from '../../components/column_header';
@@ -148,7 +148,6 @@ const makeMapStateToProps = () => {
       askReplyConfirmation: state.getIn(['local_settings', 'confirm_before_clearing_draft']) && state.getIn(['compose', 'text']).trim().length !== 0,
       domain: state.getIn(['meta', 'domain']),
       usingPiP: state.get('picture_in_picture').statusId === props.params.statusId,
-      emojiMap: makeCustomEmojiMap(state),
     };
   };
 
@@ -707,7 +706,6 @@ class Status extends ImmutablePureComponent {
                   showMedia={this.state.showMedia}
                   onToggleMediaVisibility={this.handleToggleMediaVisibility}
                   usingPiP={usingPiP}
-                  emojiMap={this.props.emojiMap}
                 />
 
                 <ActionBar
diff --git a/app/javascript/flavours/glitch/selectors/index.js b/app/javascript/flavours/glitch/selectors/index.js
index ab7ac248b7..df46b58a8e 100644
--- a/app/javascript/flavours/glitch/selectors/index.js
+++ b/app/javascript/flavours/glitch/selectors/index.js
@@ -1,6 +1,6 @@
 import escapeTextContentForBrowser from 'escape-html';
 import { createSelector } from 'reselect';
-import { List as ImmutableList, Map as ImmutableMap } from 'immutable';
+import { List as ImmutableList } from 'immutable';
 import { toServerSideType } from 'flavours/glitch/utils/filters';
 import { me } from 'flavours/glitch/initial_state';
 
@@ -127,11 +127,3 @@ export const getAccountHidden = createSelector([
 ], (hidden, followingOrRequested, isSelf) => {
   return hidden && !(isSelf || followingOrRequested);
 });
-
-export const makeCustomEmojiMap = createSelector(
-  [state => state.get('custom_emojis')],
-  items => items.reduce(
-    (map, emoji) => map.set(emoji.get('shortcode'), emoji),
-    ImmutableMap(),
-  ),
-);
diff --git a/app/serializers/rest/reaction_serializer.rb b/app/serializers/rest/reaction_serializer.rb
index 1a5dca0183..007d3b5015 100644
--- a/app/serializers/rest/reaction_serializer.rb
+++ b/app/serializers/rest/reaction_serializer.rb
@@ -3,7 +3,7 @@
 class REST::ReactionSerializer < ActiveModel::Serializer
   include RoutingHelper
 
-  attributes :name, :count
+  attributes :name, :count, :extern
 
   attribute :me, if: :current_user?
   attribute :url, if: :custom_emoji?
@@ -21,6 +21,14 @@ class REST::ReactionSerializer < ActiveModel::Serializer
     object.custom_emoji.present?
   end
 
+  def extern
+    if custom_emoji?
+      object.custom_emoji.domain.present?
+    else
+      false
+    end
+  end
+
   def url
     full_asset_url(object.custom_emoji.image.url)
   end

From e4949a252e2a50428299ca71cc555414aa54c9fc Mon Sep 17 00:00:00 2001
From: fef <owo@fef.moe>
Date: Sat, 3 Dec 2022 14:23:55 +0000
Subject: [PATCH 35/48] run i18n-tasks normalize

---
 config/locales/de.yml    | 8 ++++----
 config/locales/en.yml    | 8 ++++----
 config/locales/en_GB.yml | 8 ++++----
 config/locales/fr.yml    | 8 ++++----
 4 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/config/locales/de.yml b/config/locales/de.yml
index 1899b131d1..e8b7261f4b 100644
--- a/config/locales/de.yml
+++ b/config/locales/de.yml
@@ -1285,10 +1285,6 @@ de:
       body: 'Dein Beitrag wurde von %{name} favorisiert:'
       subject: "%{name} hat deinen Beitrag favorisiert"
       title: Neue Favorisierung
-    reaction:
-      body: '%{name} hat auf deinen Beitrag reagiert:'
-      subject: '%{name} hat auf deinen Beitrag reagiert'
-      title: Neue Reaktion
     follow:
       body: "%{name} folgt dir jetzt!"
       subject: "%{name} folgt dir jetzt"
@@ -1305,6 +1301,10 @@ de:
       title: Neue Erwähnung
     poll:
       subject: Eine Umfrage von %{name} ist beendet
+    reaction:
+      body: "%{name} hat auf deinen Beitrag reagiert:"
+      subject: "%{name} hat auf deinen Beitrag reagiert"
+      title: Neue Reaktion
     reblog:
       body: 'Deinen Beitrag hat %{name} geteilt:'
       subject: "%{name} hat deinen Beitrag geteilt"
diff --git a/config/locales/en.yml b/config/locales/en.yml
index bf43d0c752..f3bf0b6463 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -1292,10 +1292,6 @@ en:
       body: 'Your post was favourited by %{name}:'
       subject: "%{name} favourited your post"
       title: New favourite
-    reaction:
-      body: '%{name} reacted to your post:'
-      subject: '%{name} reacted to your post'
-      title: New reaction
     follow:
       body: "%{name} is now following you!"
       subject: "%{name} is now following you"
@@ -1312,6 +1308,10 @@ en:
       title: New mention
     poll:
       subject: A poll by %{name} has ended
+    reaction:
+      body: "%{name} reacted to your post:"
+      subject: "%{name} reacted to your post"
+      title: New reaction
     reblog:
       body: 'Your post was boosted by %{name}:'
       subject: "%{name} boosted your post"
diff --git a/config/locales/en_GB.yml b/config/locales/en_GB.yml
index 80084d9a6f..506d462409 100644
--- a/config/locales/en_GB.yml
+++ b/config/locales/en_GB.yml
@@ -707,10 +707,6 @@ en_GB:
       body: 'Your status was favourited by %{name}:'
       subject: "%{name} favourited your status"
       title: New favourite
-    reaction:
-      body: '%{name} reacted on your post with %{reaction}:'
-      subject: '%{name} reacted on your post'
-      title: New reaction
     follow:
       body: "%{name} is now following you!"
       subject: "%{name} is now following you"
@@ -725,6 +721,10 @@ en_GB:
       body: 'You were mentioned by %{name} in:'
       subject: You were mentioned by %{name}
       title: New mention
+    reaction:
+      body: "%{name} reacted on your post with %{reaction}:"
+      subject: "%{name} reacted on your post"
+      title: New reaction
     reblog:
       body: 'Your status was boosted by %{name}:'
       subject: "%{name} boosted your status"
diff --git a/config/locales/fr.yml b/config/locales/fr.yml
index 9f3cf843a1..e1deaab221 100644
--- a/config/locales/fr.yml
+++ b/config/locales/fr.yml
@@ -1285,10 +1285,6 @@ fr:
       body: "%{name} a ajouté votre message à ses favoris :"
       subject: "%{name} a ajouté votre message à ses favoris"
       title: Nouveau favori
-    reaction:
-      body: '%{name} a réagi·e à votre message:'
-      subject: '%{name} a réagi·e à votre message'
-      title: Nouvelle réaction
     follow:
       body: "%{name} vous suit !"
       subject: "%{name} vous suit"
@@ -1305,6 +1301,10 @@ fr:
       title: Nouvelle mention
     poll:
       subject: Un sondage de %{name} est terminé
+    reaction:
+      body: "%{name} a réagi·e à votre message:"
+      subject: "%{name} a réagi·e à votre message"
+      title: Nouvelle réaction
     reblog:
       body: 'Votre message été partagé par %{name} :'
       subject: "%{name} a partagé votre message"

From 47ac7a2e502f70fbe3481b9c4e82f3eec8b66b45 Mon Sep 17 00:00:00 2001
From: fef <owo@fef.moe>
Date: Sat, 3 Dec 2022 16:20:29 +0000
Subject: [PATCH 36/48] fix image for new custom emoji reactions

---
 .../flavours/glitch/actions/interactions.js          |  7 ++++---
 .../flavours/glitch/components/status_action_bar.js  |  2 +-
 .../flavours/glitch/containers/status_container.js   |  4 ++--
 .../glitch/features/status/components/action_bar.js  |  2 +-
 .../flavours/glitch/features/status/index.js         |  4 ++--
 app/javascript/flavours/glitch/reducers/statuses.js  | 12 +++++++++---
 app/javascript/mastodon/actions/interactions.js      |  7 ++++---
 .../mastodon/containers/status_container.js          |  4 ++--
 app/javascript/mastodon/features/status/index.js     |  4 ++--
 app/javascript/mastodon/reducers/statuses.js         | 12 +++++++++---
 10 files changed, 36 insertions(+), 22 deletions(-)

diff --git a/app/javascript/flavours/glitch/actions/interactions.js b/app/javascript/flavours/glitch/actions/interactions.js
index 0df6db4277..2d483de818 100644
--- a/app/javascript/flavours/glitch/actions/interactions.js
+++ b/app/javascript/flavours/glitch/actions/interactions.js
@@ -403,7 +403,7 @@ export function unpinFail(status, error) {
   };
 };
 
-export const addReaction = (statusId, name) => (dispatch, getState) => {
+export const addReaction = (statusId, name, url) => (dispatch, getState) => {
   const status = getState().get('statuses').get(statusId);
   let alreadyAdded = false;
   if (status) {
@@ -413,7 +413,7 @@ export const addReaction = (statusId, name) => (dispatch, getState) => {
     }
   }
   if (!alreadyAdded) {
-    dispatch(addReactionRequest(statusId, name));
+    dispatch(addReactionRequest(statusId, name, url));
   }
 
   api(getState).post(`/api/v1/statuses/${statusId}/react/${name}`).then(() => {
@@ -425,10 +425,11 @@ export const addReaction = (statusId, name) => (dispatch, getState) => {
   });
 };
 
-export const addReactionRequest = (statusId, name) => ({
+export const addReactionRequest = (statusId, name, url) => ({
   type: REACTION_ADD_REQUEST,
   id: statusId,
   name,
+  url,
 });
 
 export const addReactionSuccess = (statusId, name) => ({
diff --git a/app/javascript/flavours/glitch/components/status_action_bar.js b/app/javascript/flavours/glitch/components/status_action_bar.js
index 33dbe3ab89..72912acedd 100644
--- a/app/javascript/flavours/glitch/components/status_action_bar.js
+++ b/app/javascript/flavours/glitch/components/status_action_bar.js
@@ -118,7 +118,7 @@ class StatusActionBar extends ImmutablePureComponent {
   }
 
   handleEmojiPick = data => {
-    this.props.onReactionAdd(this.props.status.get('id'), data.native.replace(/:/g, ''));
+    this.props.onReactionAdd(this.props.status.get('id'), data.native.replace(/:/g, ''), data.imageUrl);
   }
 
   handleReblogClick = e => {
diff --git a/app/javascript/flavours/glitch/containers/status_container.js b/app/javascript/flavours/glitch/containers/status_container.js
index d68e059af4..3edcf9c7a8 100644
--- a/app/javascript/flavours/glitch/containers/status_container.js
+++ b/app/javascript/flavours/glitch/containers/status_container.js
@@ -167,8 +167,8 @@ const mapDispatchToProps = (dispatch, { intl, contextType }) => ({
     }
   },
 
-  onReactionAdd (statusId, name) {
-    dispatch(addReaction(statusId, name));
+  onReactionAdd (statusId, name, url) {
+    dispatch(addReaction(statusId, name, url));
   },
 
   onReactionRemove (statusId, name) {
diff --git a/app/javascript/flavours/glitch/features/status/components/action_bar.js b/app/javascript/flavours/glitch/features/status/components/action_bar.js
index 1ed89ea059..6f86e2aa2c 100644
--- a/app/javascript/flavours/glitch/features/status/components/action_bar.js
+++ b/app/javascript/flavours/glitch/features/status/components/action_bar.js
@@ -81,7 +81,7 @@ class ActionBar extends React.PureComponent {
   }
 
   handleEmojiPick = data => {
-    this.props.onReactionAdd(this.props.status.get('id'), data.native.replace(/:/g, ''));
+    this.props.onReactionAdd(this.props.status.get('id'), data.native.replace(/:/g, ''), data.imageUrl);
   }
 
   handleBookmarkClick = (e) => {
diff --git a/app/javascript/flavours/glitch/features/status/index.js b/app/javascript/flavours/glitch/features/status/index.js
index a33939445f..f77f4a20fb 100644
--- a/app/javascript/flavours/glitch/features/status/index.js
+++ b/app/javascript/flavours/glitch/features/status/index.js
@@ -293,12 +293,12 @@ class Status extends ImmutablePureComponent {
     }
   }
 
-  handleReactionAdd = (statusId, name) => {
+  handleReactionAdd = (statusId, name, url) => {
     const { dispatch } = this.props;
     const { signedIn } = this.context.identity;
 
     if (signedIn) {
-      dispatch(addReaction(statusId, name));
+      dispatch(addReaction(statusId, name, url));
     } else {
       dispatch(openModal('INTERACTION', {
         type: 'reaction_add',
diff --git a/app/javascript/flavours/glitch/reducers/statuses.js b/app/javascript/flavours/glitch/reducers/statuses.js
index 22fdeb2841..446c991cac 100644
--- a/app/javascript/flavours/glitch/reducers/statuses.js
+++ b/app/javascript/flavours/glitch/reducers/statuses.js
@@ -59,11 +59,17 @@ const updateReaction = (state, id, name, updater) => state.update(
 
 const updateReactionCount = (state, reaction) => updateReaction(state, reaction.status_id, reaction.name, x => x.set('count', reaction.count));
 
-const addReaction = (state, id, name) => updateReaction(
+// The url parameter is only used when adding a new custom emoji reaction
+// (one that wasn't in the reactions list before) because we don't have its
+// URL yet.  In all other cases, it's undefined.
+const addReaction = (state, id, name, url) => updateReaction(
   state,
   id,
   name,
-  x => x.set('me', true).update('count', n => n + 1),
+  x => x.set('me', true)
+    .update('count', n => n + 1)
+    .update('url', old => old ? old : url)
+    .update('static_url', old => old ? old : url),
 );
 
 const removeReaction = (state, id, name) => updateReaction(
@@ -103,7 +109,7 @@ export default function statuses(state = initialState, action) {
     return updateReactionCount(state, action.reaction);
   case REACTION_ADD_REQUEST:
   case REACTION_REMOVE_FAIL:
-    return addReaction(state, action.id, action.name);
+    return addReaction(state, action.id, action.name, action.url);
   case REACTION_REMOVE_REQUEST:
   case REACTION_ADD_FAIL:
     return removeReaction(state, action.id, action.name);
diff --git a/app/javascript/mastodon/actions/interactions.js b/app/javascript/mastodon/actions/interactions.js
index dd1395cbd3..54592ec535 100644
--- a/app/javascript/mastodon/actions/interactions.js
+++ b/app/javascript/mastodon/actions/interactions.js
@@ -423,7 +423,7 @@ export function unpinFail(status, error) {
   };
 };
 
-export const addReaction = (statusId, name) => (dispatch, getState) => {
+export const addReaction = (statusId, name, url) => (dispatch, getState) => {
   const status = getState().get('statuses').get(statusId);
   let alreadyAdded = false;
   if (status) {
@@ -433,7 +433,7 @@ export const addReaction = (statusId, name) => (dispatch, getState) => {
     }
   }
   if (!alreadyAdded) {
-    dispatch(addReactionRequest(statusId, name));
+    dispatch(addReactionRequest(statusId, name, url));
   }
 
   api(getState).post(`/api/v1/statuses/${statusId}/react/${name}`).then(() => {
@@ -445,10 +445,11 @@ export const addReaction = (statusId, name) => (dispatch, getState) => {
   });
 };
 
-export const addReactionRequest = (statusId, name) => ({
+export const addReactionRequest = (statusId, name, url) => ({
   type: REACTION_ADD_REQUEST,
   id: statusId,
   name,
+  url,
 });
 
 export const addReactionSuccess = (statusId, name) => ({
diff --git a/app/javascript/mastodon/containers/status_container.js b/app/javascript/mastodon/containers/status_container.js
index 556910f089..70adc04934 100644
--- a/app/javascript/mastodon/containers/status_container.js
+++ b/app/javascript/mastodon/containers/status_container.js
@@ -132,8 +132,8 @@ const mapDispatchToProps = (dispatch, { intl, contextType }) => ({
     }
   },
 
-  onReactionAdd (statusId, name) {
-    dispatch(addReaction(statusId, name));
+  onReactionAdd (statusId, name, url) {
+    dispatch(addReaction(statusId, name, url));
   },
 
   onReactionRemove (statusId, name) {
diff --git a/app/javascript/mastodon/features/status/index.js b/app/javascript/mastodon/features/status/index.js
index e262cd94fb..d22009d0ed 100644
--- a/app/javascript/mastodon/features/status/index.js
+++ b/app/javascript/mastodon/features/status/index.js
@@ -257,12 +257,12 @@ class Status extends ImmutablePureComponent {
     }
   }
 
-  handleReactionAdd = (statusId, name) => {
+  handleReactionAdd = (statusId, name, url) => {
     const { dispatch } = this.props;
     const { signedIn } = this.context.identity;
 
     if (signedIn) {
-      dispatch(addReaction(statusId, name));
+      dispatch(addReaction(statusId, name, url));
     } else {
       dispatch(openModal('INTERACTION', {
         type: 'reaction_add',
diff --git a/app/javascript/mastodon/reducers/statuses.js b/app/javascript/mastodon/reducers/statuses.js
index 2228906674..cb9759119a 100644
--- a/app/javascript/mastodon/reducers/statuses.js
+++ b/app/javascript/mastodon/reducers/statuses.js
@@ -57,11 +57,17 @@ const updateReaction = (state, id, name, updater) => state.update(
 
 const updateReactionCount = (state, reaction) => updateReaction(state, reaction.status_id, reaction.name, x => x.set('count', reaction.count));
 
-const addReaction = (state, id, name) => updateReaction(
+// The url parameter is only used when adding a new custom emoji reaction
+// (one that wasn't in the reactions list before) because we don't have its
+// URL yet.  In all other cases, it's undefined.
+const addReaction = (state, id, name, url) => updateReaction(
   state,
   id,
   name,
-  x => x.set('me', true).update('count', n => n + 1),
+  x => x.set('me', true)
+    .update('count', n => n + 1)
+    .update('url', old => old ? old : url)
+    .update('static_url', old => old ? old : url),
 );
 
 const removeReaction = (state, id, name) => updateReaction(
@@ -101,7 +107,7 @@ export default function statuses(state = initialState, action) {
     return updateReactionCount(state, action.reaction);
   case REACTION_ADD_REQUEST:
   case REACTION_REMOVE_FAIL:
-    return addReaction(state, action.id, action.name);
+    return addReaction(state, action.id, action.name, action.url);
   case REACTION_REMOVE_REQUEST:
   case REACTION_ADD_FAIL:
     return removeReaction(state, action.id, action.name);

From e05874cffd20e57fda6bc56b0c714786701674cd Mon Sep 17 00:00:00 2001
From: fef <owo@fef.moe>
Date: Sat, 3 Dec 2022 16:55:37 +0000
Subject: [PATCH 37/48] disable reaction button when not signed in

---
 .../flavours/glitch/containers/status_container.js          | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/app/javascript/flavours/glitch/containers/status_container.js b/app/javascript/flavours/glitch/containers/status_container.js
index 3edcf9c7a8..93a92c1377 100644
--- a/app/javascript/flavours/glitch/containers/status_container.js
+++ b/app/javascript/flavours/glitch/containers/status_container.js
@@ -168,7 +168,11 @@ const mapDispatchToProps = (dispatch, { intl, contextType }) => ({
   },
 
   onReactionAdd (statusId, name, url) {
-    dispatch(addReaction(statusId, name, url));
+    const { signedIn } = this.context.identity;
+
+    if (signedIn) {
+      dispatch(addReaction(statusId, name, url));
+    }
   },
 
   onReactionRemove (statusId, name) {

From a556d81cde6c1e9971ff7413a947b2f6e97b08c9 Mon Sep 17 00:00:00 2001
From: fef <owo@fef.moe>
Date: Sun, 4 Dec 2022 08:47:24 +0000
Subject: [PATCH 38/48] also disable reaction buttons in vanilla flavour

---
 .../mastodon/components/status_action_bar.js        |  2 +-
 .../mastodon/components/status_reactions.js         | 13 ++++++++-----
 .../features/status/components/action_bar.js        |  2 +-
 3 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/app/javascript/mastodon/components/status_action_bar.js b/app/javascript/mastodon/components/status_action_bar.js
index 01d64062da..6695003cb2 100644
--- a/app/javascript/mastodon/components/status_action_bar.js
+++ b/app/javascript/mastodon/components/status_action_bar.js
@@ -365,7 +365,7 @@ class StatusActionBar extends ImmutablePureComponent {
       <IconButton className='status__action-bar__button' title={intl.formatMessage(messages.hide)} icon='eye' onClick={this.handleHideClick} />
     );
 
-    const canReact = status.get('reactions').filter(r => r.get('count') > 0 && r.get('me')).size < maxReactions;
+    const canReact = signedIn && status.get('reactions').filter(r => r.get('count') > 0 && r.get('me')).size < maxReactions;
     const reactButton = (
       <IconButton
         className='status__action-bar-button'
diff --git a/app/javascript/mastodon/components/status_reactions.js b/app/javascript/mastodon/components/status_reactions.js
index 63ec7941cb..c16b7e8260 100644
--- a/app/javascript/mastodon/components/status_reactions.js
+++ b/app/javascript/mastodon/components/status_reactions.js
@@ -85,11 +85,14 @@ class Reaction extends ImmutablePureComponent {
 
   handleClick = () => {
     const { reaction, statusId, addReaction, removeReaction } = this.props;
-
-    if (reaction.get('me')) {
-      removeReaction(statusId, reaction.get('name'));
-    } else {
-      addReaction(statusId, reaction.get('name'));
+    const { signedIn } = this.context.identity;
+
+    if (signedIn) {
+      if (reaction.get('me')) {
+        removeReaction(statusId, reaction.get('name'));
+      } else {
+        addReaction(statusId, reaction.get('name'));
+      }
     }
   }
 
diff --git a/app/javascript/mastodon/features/status/components/action_bar.js b/app/javascript/mastodon/features/status/components/action_bar.js
index 095bccfa8a..9ab228bdec 100644
--- a/app/javascript/mastodon/features/status/components/action_bar.js
+++ b/app/javascript/mastodon/features/status/components/action_bar.js
@@ -259,7 +259,7 @@ class ActionBar extends React.PureComponent {
       }
     }
 
-    const canReact = status.get('reactions').filter(r => r.get('count') > 0 && r.get('me')).size < maxReactions;
+    const canReact = signedIn && status.get('reactions').filter(r => r.get('count') > 0 && r.get('me')).size < maxReactions;
     const reactButton = (
       <IconButton
         className='plus-icon'

From 14d1f7d9b3521f7b2a22fef645d72140597e24f6 Mon Sep 17 00:00:00 2001
From: fef <owo@fef.moe>
Date: Sun, 4 Dec 2022 10:52:02 +0000
Subject: [PATCH 39/48] serialize custom emoji reactions properly for AP

Akkoma and possibly others expect the `tag` field
in an EmojiReact activity to be an array, not just
a single object, so it's being wrapped into one
now.  I'm not entirely sure whether this is the
idiomatic way of doing it tbh, but it works fine.
---
 app/serializers/activitypub/emoji_reaction_serializer.rb | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/app/serializers/activitypub/emoji_reaction_serializer.rb b/app/serializers/activitypub/emoji_reaction_serializer.rb
index 50f3efa3cb..f8887f15b7 100644
--- a/app/serializers/activitypub/emoji_reaction_serializer.rb
+++ b/app/serializers/activitypub/emoji_reaction_serializer.rb
@@ -3,8 +3,7 @@
 class ActivityPub::EmojiReactionSerializer < ActivityPub::Serializer
   attributes :id, :type, :actor, :content
   attribute :virtual_object, key: :object
-
-  has_one :custom_emoji, key: :tag, serializer: ActivityPub::EmojiSerializer, unless: -> { object.custom_emoji.nil? }
+  attribute :custom_emoji, key: :tag, unless: -> { object.custom_emoji.nil? }
 
   def id
     [ActivityPub::TagManager.instance.uri_for(object.account), '#emoji_reactions/', object.id].join
@@ -31,4 +30,10 @@ class ActivityPub::EmojiReactionSerializer < ActivityPub::Serializer
   end
 
   alias reaction content
+
+  # Akkoma (and possibly others) expect `tag` to be an array, so we can't just
+  # use the has_one shorthand because we need to wrap it into an array manually
+  def custom_emoji
+    [ActivityPub::EmojiSerializer.new(object.custom_emoji).serializable_hash]
+  end
 end

From 18e408c6af3d2f18ad5ec3ea3f4242933b76f6fa Mon Sep 17 00:00:00 2001
From: fef <owo@fef.moe>
Date: Sun, 4 Dec 2022 12:33:47 +0000
Subject: [PATCH 40/48] properly disable reactions when not logged in

---
 .../flavours/glitch/components/status.js      |  2 +
 .../glitch/components/status_action_bar.js    |  6 ++-
 .../glitch/components/status_reactions.js     | 14 ++++---
 .../glitch/containers/status_container.js     |  6 +--
 .../features/status/components/action_bar.js  |  8 +++-
 .../status/components/detailed_status.js      |  2 +
 .../flavours/glitch/features/status/index.js  |  6 ---
 app/javascript/mastodon/components/status.js  |  3 +-
 .../mastodon/components/status_action_bar.js  |  8 +---
 .../mastodon/components/status_reactions.js   | 40 +++++++++----------
 .../features/status/components/action_bar.js  |  8 +++-
 .../status/components/detailed_status.js      |  4 +-
 .../mastodon/features/status/index.js         |  6 ---
 13 files changed, 57 insertions(+), 56 deletions(-)

diff --git a/app/javascript/flavours/glitch/components/status.js b/app/javascript/flavours/glitch/components/status.js
index 08cfbdada0..99ed644aa7 100644
--- a/app/javascript/flavours/glitch/components/status.js
+++ b/app/javascript/flavours/glitch/components/status.js
@@ -62,6 +62,7 @@ class Status extends ImmutablePureComponent {
 
   static contextTypes = {
     router: PropTypes.object,
+    identity: PropTypes.object,
   };
 
   static propTypes = {
@@ -810,6 +811,7 @@ class Status extends ImmutablePureComponent {
             numVisible={visibleReactions}
             addReaction={this.props.onReactionAdd}
             removeReaction={this.props.onReactionRemove}
+            canReact={this.context.identity.signedIn}
           />
 
           {!isCollapsed || !(muted || !settings.getIn(['collapsed', 'show_action_bar'])) ? (
diff --git a/app/javascript/flavours/glitch/components/status_action_bar.js b/app/javascript/flavours/glitch/components/status_action_bar.js
index 72912acedd..bb350ea5a2 100644
--- a/app/javascript/flavours/glitch/components/status_action_bar.js
+++ b/app/javascript/flavours/glitch/components/status_action_bar.js
@@ -331,7 +331,11 @@ class StatusActionBar extends ImmutablePureComponent {
         />
         <IconButton className={classNames('status__action-bar-button', { reblogPrivate })} disabled={!publicStatus && !reblogPrivate} active={status.get('reblogged')} title={reblogTitle} icon={reblogIcon} 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} />
-        <EmojiPickerDropdown className='status__action-bar-button' onPickEmoji={this.handleEmojiPick} button={reactButton} disabled={!canReact} />
+        {
+          signedIn
+            ? <EmojiPickerDropdown className='status__action-bar-button' onPickEmoji={this.handleEmojiPick} button={reactButton} disabled={!canReact} />
+            : reactButton
+        }
         {shareButton}
         <IconButton className='status__action-bar-button bookmark-icon' disabled={anonymousAccess} active={status.get('bookmarked')} title={intl.formatMessage(messages.bookmark)} icon='bookmark' onClick={this.handleBookmarkClick} />
 
diff --git a/app/javascript/flavours/glitch/components/status_reactions.js b/app/javascript/flavours/glitch/components/status_reactions.js
index e263a64809..ff025e8d28 100644
--- a/app/javascript/flavours/glitch/components/status_reactions.js
+++ b/app/javascript/flavours/glitch/components/status_reactions.js
@@ -17,6 +17,7 @@ export default class StatusReactions extends ImmutablePureComponent {
     reactions: ImmutablePropTypes.list.isRequired,
     numVisible: PropTypes.number,
     addReaction: PropTypes.func.isRequired,
+    canReact: PropTypes.bool.isRequired,
     removeReaction: PropTypes.func.isRequired,
   };
 
@@ -56,6 +57,7 @@ export default class StatusReactions extends ImmutablePureComponent {
                 style={{ transform: `scale(${style.scale})`, position: style.scale < 0.5 ? 'absolute' : 'static' }}
                 addReaction={this.props.addReaction}
                 removeReaction={this.props.removeReaction}
+                canReact={this.props.canReact}
               />
             ))}
           </div>
@@ -73,6 +75,7 @@ class Reaction extends ImmutablePureComponent {
     reaction: ImmutablePropTypes.map.isRequired,
     addReaction: PropTypes.func.isRequired,
     removeReaction: PropTypes.func.isRequired,
+    canReact: PropTypes.bool.isRequired,
     style: PropTypes.object,
   };
 
@@ -83,12 +86,10 @@ class Reaction extends ImmutablePureComponent {
   handleClick = () => {
     const { reaction, statusId, addReaction, removeReaction } = this.props;
 
-    if (!reaction.get('extern')) {
-      if (reaction.get('me')) {
-        removeReaction(statusId, reaction.get('name'));
-      } else {
-        addReaction(statusId, reaction.get('name'));
-      }
+    if (reaction.get('me')) {
+      removeReaction(statusId, reaction.get('name'));
+    } else {
+      addReaction(statusId, reaction.get('name'));
     }
   }
 
@@ -105,6 +106,7 @@ class Reaction extends ImmutablePureComponent {
         onClick={this.handleClick}
         onMouseEnter={this.handleMouseEnter}
         onMouseLeave={this.handleMouseLeave}
+        disabled={!this.props.canReact}
         style={this.props.style}
       >
         <span className='reactions-bar__item__emoji'>
diff --git a/app/javascript/flavours/glitch/containers/status_container.js b/app/javascript/flavours/glitch/containers/status_container.js
index 93a92c1377..3edcf9c7a8 100644
--- a/app/javascript/flavours/glitch/containers/status_container.js
+++ b/app/javascript/flavours/glitch/containers/status_container.js
@@ -168,11 +168,7 @@ const mapDispatchToProps = (dispatch, { intl, contextType }) => ({
   },
 
   onReactionAdd (statusId, name, url) {
-    const { signedIn } = this.context.identity;
-
-    if (signedIn) {
-      dispatch(addReaction(statusId, name, url));
-    }
+    dispatch(addReaction(statusId, name, url));
   },
 
   onReactionRemove (statusId, name) {
diff --git a/app/javascript/flavours/glitch/features/status/components/action_bar.js b/app/javascript/flavours/glitch/features/status/components/action_bar.js
index 6f86e2aa2c..39d32178ae 100644
--- a/app/javascript/flavours/glitch/features/status/components/action_bar.js
+++ b/app/javascript/flavours/glitch/features/status/components/action_bar.js
@@ -236,7 +236,13 @@ class ActionBar extends React.PureComponent {
         <div className='detailed-status__button'><IconButton title={intl.formatMessage(messages.reply)} icon={status.get('in_reply_to_id', null) === null ? 'reply' : 'reply-all'} onClick={this.handleReplyClick} /></div>
         <div className='detailed-status__button'><IconButton className={classNames({ reblogPrivate })} disabled={!publicStatus && !reblogPrivate} active={status.get('reblogged')} title={reblogTitle} icon='retweet' onClick={this.handleReblogClick} /></div>
         <div className='detailed-status__button'><IconButton className='star-icon' animate active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} /></div>
-        <div className='detailed-status__button'><EmojiPickerDropdown onPickEmoji={this.handleEmojiPick} button={reactButton} disabled={!canReact} /></div>
+        <div className='detailed-status__button'>
+          {
+            signedIn
+              ? <EmojiPickerDropdown onPickEmoji={this.handleEmojiPick} button={reactButton} disabled={!canReact} />
+              : reactButton
+          }
+        </div>
         {shareButton}
         <div className='detailed-status__button'><IconButton className='bookmark-icon' disabled={!signedIn} active={status.get('bookmarked')} title={intl.formatMessage(messages.bookmark)} icon='bookmark' onClick={this.handleBookmarkClick} /></div>
 
diff --git a/app/javascript/flavours/glitch/features/status/components/detailed_status.js b/app/javascript/flavours/glitch/features/status/components/detailed_status.js
index a3d6150b7b..87eb463d3b 100644
--- a/app/javascript/flavours/glitch/features/status/components/detailed_status.js
+++ b/app/javascript/flavours/glitch/features/status/components/detailed_status.js
@@ -27,6 +27,7 @@ class DetailedStatus extends ImmutablePureComponent {
 
   static contextTypes = {
     router: PropTypes.object,
+    identity: PropTypes.object,
   };
 
   static propTypes = {
@@ -327,6 +328,7 @@ class DetailedStatus extends ImmutablePureComponent {
             reactions={status.get('reactions')}
             addReaction={this.props.onReactionAdd}
             removeReaction={this.props.onReactionRemove}
+            canReact={this.context.identity.signedIn}
           />
 
           <div className='detailed-status__meta'>
diff --git a/app/javascript/flavours/glitch/features/status/index.js b/app/javascript/flavours/glitch/features/status/index.js
index f77f4a20fb..50f6274403 100644
--- a/app/javascript/flavours/glitch/features/status/index.js
+++ b/app/javascript/flavours/glitch/features/status/index.js
@@ -299,12 +299,6 @@ class Status extends ImmutablePureComponent {
 
     if (signedIn) {
       dispatch(addReaction(statusId, name, url));
-    } else {
-      dispatch(openModal('INTERACTION', {
-        type: 'reaction_add',
-        accountId: status.getIn(['account', 'id']),
-        url: status.get('url'),
-      }));
     }
   }
 
diff --git a/app/javascript/mastodon/components/status.js b/app/javascript/mastodon/components/status.js
index 284c5dbd78..367131efe5 100644
--- a/app/javascript/mastodon/components/status.js
+++ b/app/javascript/mastodon/components/status.js
@@ -65,6 +65,7 @@ class Status extends ImmutablePureComponent {
 
   static contextTypes = {
     router: PropTypes.object,
+    identity: PropTypes.object,
   };
 
   static propTypes = {
@@ -547,7 +548,7 @@ class Status extends ImmutablePureComponent {
               numVisible={visibleReactions}
               addReaction={this.props.onReactionAdd}
               removeReaction={this.props.onReactionRemove}
-              emojiMap={this.props.emojiMap}
+              canReact={this.context.identity.signedIn}
             />
 
             <StatusActionBar scrollKey={scrollKey} status={status} account={account} onFilter={matchedFilters ? this.handleFilterClick : null} {...other} />
diff --git a/app/javascript/mastodon/components/status_action_bar.js b/app/javascript/mastodon/components/status_action_bar.js
index 6695003cb2..b2ad54cb58 100644
--- a/app/javascript/mastodon/components/status_action_bar.js
+++ b/app/javascript/mastodon/components/status_action_bar.js
@@ -131,13 +131,7 @@ class StatusActionBar extends ImmutablePureComponent {
   }
 
   handleEmojiPick = data => {
-    const { signedIn } = this.context.identity;
-
-    if (signedIn) {
-      this.props.onReactionAdd(this.props.status.get('id'), data.native.replace(/:/g, ''));
-    } else {
-      this.props.onInteractionModal('favourite', this.props.status);
-    }
+      this.props.onReactionAdd(this.props.status.get('id'), data.native.replace(/:/g, ''), data.imageUrl);
   }
 
   handleReblogClick = e => {
diff --git a/app/javascript/mastodon/components/status_reactions.js b/app/javascript/mastodon/components/status_reactions.js
index c16b7e8260..ff025e8d28 100644
--- a/app/javascript/mastodon/components/status_reactions.js
+++ b/app/javascript/mastodon/components/status_reactions.js
@@ -17,8 +17,8 @@ export default class StatusReactions extends ImmutablePureComponent {
     reactions: ImmutablePropTypes.list.isRequired,
     numVisible: PropTypes.number,
     addReaction: PropTypes.func.isRequired,
+    canReact: PropTypes.bool.isRequired,
     removeReaction: PropTypes.func.isRequired,
-    emojiMap: ImmutablePropTypes.map.isRequired,
   };
 
   willEnter() {
@@ -57,7 +57,7 @@ export default class StatusReactions extends ImmutablePureComponent {
                 style={{ transform: `scale(${style.scale})`, position: style.scale < 0.5 ? 'absolute' : 'static' }}
                 addReaction={this.props.addReaction}
                 removeReaction={this.props.removeReaction}
-                emojiMap={this.props.emojiMap}
+                canReact={this.props.canReact}
               />
             ))}
           </div>
@@ -75,7 +75,7 @@ class Reaction extends ImmutablePureComponent {
     reaction: ImmutablePropTypes.map.isRequired,
     addReaction: PropTypes.func.isRequired,
     removeReaction: PropTypes.func.isRequired,
-    emojiMap: ImmutablePropTypes.map.isRequired,
+    canReact: PropTypes.bool.isRequired,
     style: PropTypes.object,
   };
 
@@ -85,14 +85,11 @@ class Reaction extends ImmutablePureComponent {
 
   handleClick = () => {
     const { reaction, statusId, addReaction, removeReaction } = this.props;
-    const { signedIn } = this.context.identity;
-
-    if (signedIn) {
-      if (reaction.get('me')) {
-        removeReaction(statusId, reaction.get('name'));
-      } else {
-        addReaction(statusId, reaction.get('name'));
-      }
+
+    if (reaction.get('me')) {
+      removeReaction(statusId, reaction.get('name'));
+    } else {
+      addReaction(statusId, reaction.get('name'));
     }
   }
 
@@ -109,10 +106,16 @@ class Reaction extends ImmutablePureComponent {
         onClick={this.handleClick}
         onMouseEnter={this.handleMouseEnter}
         onMouseLeave={this.handleMouseLeave}
+        disabled={!this.props.canReact}
         style={this.props.style}
       >
         <span className='reactions-bar__item__emoji'>
-          <Emoji hovered={this.state.hovered} emoji={reaction.get('name')} emojiMap={this.props.emojiMap} />
+          <Emoji
+            hovered={this.state.hovered}
+            emoji={reaction.get('name')}
+            url={reaction.get('url')}
+            staticUrl={reaction.get('static_url')}
+          />
         </span>
         <span className='reactions-bar__item__count'>
           <AnimatedNumber value={reaction.get('count')} />
@@ -127,12 +130,13 @@ class Emoji extends React.PureComponent {
 
   static propTypes = {
     emoji: PropTypes.string.isRequired,
-    emojiMap: ImmutablePropTypes.map.isRequired,
     hovered: PropTypes.bool.isRequired,
+    url: PropTypes.string,
+    staticUrl: PropTypes.string,
   };
 
   render() {
-    const { emoji, emojiMap, hovered } = this.props;
+    const { emoji, hovered, url, staticUrl } = this.props;
 
     if (unicodeMapping[emoji]) {
       const { filename, shortCode } = unicodeMapping[this.props.emoji];
@@ -147,10 +151,8 @@ class Emoji extends React.PureComponent {
           src={`${assetHost}/emoji/${filename}.svg`}
         />
       );
-    } else if (emojiMap.get(emoji)) {
-      const filename = (autoPlayGif || hovered)
-        ? emojiMap.getIn([emoji, 'url'])
-        : emojiMap.getIn([emoji, 'static_url']);
+    } else {
+      const filename = (autoPlayGif || hovered) ? url : staticUrl;
       const shortCode = `:${emoji}:`;
 
       return (
@@ -162,8 +164,6 @@ class Emoji extends React.PureComponent {
           src={filename}
         />
       );
-    } else {
-      return null;
     }
   }
 
diff --git a/app/javascript/mastodon/features/status/components/action_bar.js b/app/javascript/mastodon/features/status/components/action_bar.js
index 9ab228bdec..91a8a7793e 100644
--- a/app/javascript/mastodon/features/status/components/action_bar.js
+++ b/app/javascript/mastodon/features/status/components/action_bar.js
@@ -299,7 +299,13 @@ class ActionBar extends React.PureComponent {
         <div className='detailed-status__button'><IconButton title={intl.formatMessage(messages.reply)} icon={status.get('in_reply_to_account_id') === status.getIn(['account', 'id']) ? 'reply' : replyIcon} onClick={this.handleReplyClick} /></div>
         <div className='detailed-status__button' ><IconButton className={classNames({ reblogPrivate })} disabled={!publicStatus && !reblogPrivate} active={status.get('reblogged')} title={reblogTitle} icon='retweet' onClick={this.handleReblogClick} /></div>
         <div className='detailed-status__button'><IconButton className='star-icon' animate active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} /></div>
-        <div className='detailed-status__button'><EmojiPickerDropdown onPickEmoji={this.handleEmojiPick} button={reactButton} disabled={!canReact} /></div>
+        <div className='detailed-status__button'>
+          {
+            canReact
+              ? <EmojiPickerDropdown onPickEmoji={this.handleEmojiPick} button={reactButton} disabled={!canReact} />
+              : reactButton
+          }
+        </div>
         <div className='detailed-status__button'><IconButton className='bookmark-icon' disabled={!signedIn} active={status.get('bookmarked')} title={intl.formatMessage(messages.bookmark)} icon='bookmark' onClick={this.handleBookmarkClick} /></div>
 
         {shareButton}
diff --git a/app/javascript/mastodon/features/status/components/detailed_status.js b/app/javascript/mastodon/features/status/components/detailed_status.js
index f34b66110f..acb9fff572 100644
--- a/app/javascript/mastodon/features/status/components/detailed_status.js
+++ b/app/javascript/mastodon/features/status/components/detailed_status.js
@@ -31,6 +31,7 @@ class DetailedStatus extends ImmutablePureComponent {
 
   static contextTypes = {
     router: PropTypes.object,
+    identity: PropTypes.object,
   };
 
   static propTypes = {
@@ -51,7 +52,6 @@ class DetailedStatus extends ImmutablePureComponent {
     onToggleMediaVisibility: PropTypes.func,
     onReactionAdd: PropTypes.func.isRequired,
     onReactionRemove: PropTypes.func.isRequired,
-    emojiMap: ImmutablePropTypes.map.isRequired,
   };
 
   state = {
@@ -284,7 +284,7 @@ class DetailedStatus extends ImmutablePureComponent {
             reactions={status.get('reactions')}
             addReaction={this.props.onReactionAdd}
             removeReaction={this.props.onReactionRemove}
-            emojiMap={this.props.emojiMap}
+            canReact={this.context.identity.signedIn}
           />
 
           <div className='detailed-status__meta'>
diff --git a/app/javascript/mastodon/features/status/index.js b/app/javascript/mastodon/features/status/index.js
index d22009d0ed..a3a0f0af77 100644
--- a/app/javascript/mastodon/features/status/index.js
+++ b/app/javascript/mastodon/features/status/index.js
@@ -263,12 +263,6 @@ class Status extends ImmutablePureComponent {
 
     if (signedIn) {
       dispatch(addReaction(statusId, name, url));
-    } else {
-      dispatch(openModal('INTERACTION', {
-        type: 'reaction_add',
-        accountId: status.getIn(['account', 'id']),
-        url: status.get('url'),
-      }));
     }
   }
 

From e0637a3c1dcd28979d2c0e0911efe09a01d1cfec Mon Sep 17 00:00:00 2001
From: fef <owo@fef.moe>
Date: Wed, 7 Dec 2022 12:19:36 +0000
Subject: [PATCH 41/48] support reacting with foreign custom emojis

---
 app/models/status_reaction.rb               |  7 +------
 app/serializers/rest/reaction_serializer.rb | 16 +++++++++++-----
 app/validators/status_reaction_validator.rb |  4 ----
 config/routes.rb                            |  6 ++++--
 4 files changed, 16 insertions(+), 17 deletions(-)

diff --git a/app/models/status_reaction.rb b/app/models/status_reaction.rb
index 4793ff9aa3..0833a7eafd 100644
--- a/app/models/status_reaction.rb
+++ b/app/models/status_reaction.rb
@@ -24,11 +24,6 @@ class StatusReaction < ApplicationRecord
   private
 
   def set_custom_emoji
-    return if name.blank?
-    self.custom_emoji = if account.local?
-                          CustomEmoji.local.find_by(disabled: false, shortcode: name)
-                        else
-                          CustomEmoji.find_by(shortcode: name, domain: account.domain)
-                        end
+    self.custom_emoji = CustomEmoji.find_by(shortcode: name, domain: account.domain) if name.blank?
   end
 end
diff --git a/app/serializers/rest/reaction_serializer.rb b/app/serializers/rest/reaction_serializer.rb
index 007d3b5015..b0f0732bf7 100644
--- a/app/serializers/rest/reaction_serializer.rb
+++ b/app/serializers/rest/reaction_serializer.rb
@@ -3,7 +3,7 @@
 class REST::ReactionSerializer < ActiveModel::Serializer
   include RoutingHelper
 
-  attributes :name, :count, :extern
+  attributes :name, :count
 
   attribute :me, if: :current_user?
   attribute :url, if: :custom_emoji?
@@ -21,11 +21,11 @@ class REST::ReactionSerializer < ActiveModel::Serializer
     object.custom_emoji.present?
   end
 
-  def extern
-    if custom_emoji?
-      object.custom_emoji.domain.present?
+  def name
+    if extern?
+      [object.name, '@', object.custom_emoji.domain].join
     else
-      false
+      object.name
     end
   end
 
@@ -36,4 +36,10 @@ class REST::ReactionSerializer < ActiveModel::Serializer
   def static_url
     full_asset_url(object.custom_emoji.image.url(:static))
   end
+
+  private
+
+  def extern?
+    custom_emoji? && object.custom_emoji.domain.present?
+  end
 end
diff --git a/app/validators/status_reaction_validator.rb b/app/validators/status_reaction_validator.rb
index a60271dd84..d85d48e4c7 100644
--- a/app/validators/status_reaction_validator.rb
+++ b/app/validators/status_reaction_validator.rb
@@ -18,10 +18,6 @@ class StatusReactionValidator < ActiveModel::Validator
     SUPPORTED_EMOJIS.include?(name)
   end
 
-  def new_reaction?(reaction)
-    !reaction.status.status_reactions.where(name: reaction.name).exists?
-  end
-
   def limit_reached?(reaction)
     reaction.status.status_reactions.where(status: reaction.status, account: reaction.account).count >= LIMIT
   end
diff --git a/config/routes.rb b/config/routes.rb
index 2eeff8fcbb..87634a7f54 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -442,8 +442,10 @@ Rails.application.routes.draw do
           resource :favourite, only: :create
           post :unfavourite, to: 'favourites#destroy'
 
-          post '/react/:id', to: 'reactions#create'
-          post '/unreact/:id', to: 'reactions#destroy'
+          # foreign custom emojis are encoded as shortcode@domain.tld
+          # the constraint prevents rails from interpreting the ".tld" as a filename extension
+          post '/react/:id', to: 'reactions#create', constraints: { id: /[^\/]+/ }
+          post '/unreact/:id', to: 'reactions#destroy', constraints: { id: /[^\/]+/ }
 
           resource :bookmark, only: :create
           post :unbookmark, to: 'bookmarks#destroy'

From 4b6e75512f444695c33302de01759491f1150861 Mon Sep 17 00:00:00 2001
From: fef <owo@fef.moe>
Date: Wed, 7 Dec 2022 12:47:03 +0000
Subject: [PATCH 42/48] delete reaction notifications when deleting status

---
 app/models/status_reaction.rb | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/app/models/status_reaction.rb b/app/models/status_reaction.rb
index 0833a7eafd..00be17e231 100644
--- a/app/models/status_reaction.rb
+++ b/app/models/status_reaction.rb
@@ -16,6 +16,8 @@ class StatusReaction < ApplicationRecord
   belongs_to :status, inverse_of: :status_reactions
   belongs_to :custom_emoji, optional: true
 
+  has_one :notification, as: :activity, dependent: :destroy
+
   validates :name, presence: true
   validates_with StatusReactionValidator
 

From fd2a11607160b54d60c82553efb39f89da96d936 Mon Sep 17 00:00:00 2001
From: fef <owo@fef.moe>
Date: Wed, 7 Dec 2022 21:52:53 +0100
Subject: [PATCH 43/48] fix schema after rebase

---
 db/schema.rb | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/db/schema.rb b/db/schema.rb
index 7462bf2c7d..bb685a9dbd 100644
--- a/db/schema.rb
+++ b/db/schema.rb
@@ -897,6 +897,19 @@ ActiveRecord::Schema.define(version: 2022_12_06_114142) do
     t.index ["status_id"], name: "index_status_pins_on_status_id"
   end
 
+  create_table "status_reactions", force: :cascade do |t|
+    t.bigint "account_id", null: false
+    t.bigint "status_id", null: false
+    t.string "name", default: "", null: false
+    t.bigint "custom_emoji_id"
+    t.datetime "created_at", precision: 6, null: false
+    t.datetime "updated_at", precision: 6, null: false
+    t.index ["account_id", "status_id", "name"], name: "index_status_reactions_on_account_id_and_status_id", unique: true
+    t.index ["account_id"], name: "index_status_reactions_on_account_id"
+    t.index ["custom_emoji_id"], name: "index_status_reactions_on_custom_emoji_id"
+    t.index ["status_id"], name: "index_status_reactions_on_status_id"
+  end
+
   create_table "status_stats", force: :cascade do |t|
     t.bigint "status_id", null: false
     t.bigint "replies_count", default: 0, null: false
@@ -1211,6 +1224,9 @@ ActiveRecord::Schema.define(version: 2022_12_06_114142) do
   add_foreign_key "status_edits", "statuses", on_delete: :cascade
   add_foreign_key "status_pins", "accounts", name: "fk_d4cb435b62", on_delete: :cascade
   add_foreign_key "status_pins", "statuses", on_delete: :cascade
+  add_foreign_key "status_reactions", "accounts", on_delete: :cascade
+  add_foreign_key "status_reactions", "custom_emojis", on_delete: :cascade
+  add_foreign_key "status_reactions", "statuses", on_delete: :cascade
   add_foreign_key "status_stats", "statuses", on_delete: :cascade
   add_foreign_key "status_trends", "accounts", on_delete: :cascade
   add_foreign_key "status_trends", "statuses", on_delete: :cascade

From c739d89b0c903e906dd7a4d06b46b5a1d575db86 Mon Sep 17 00:00:00 2001
From: fef <owo@fef.moe>
Date: Thu, 8 Dec 2022 09:48:55 +0000
Subject: [PATCH 44/48] fix status action bar after upstream changes

---
 app/javascript/mastodon/components/status_action_bar.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/app/javascript/mastodon/components/status_action_bar.js b/app/javascript/mastodon/components/status_action_bar.js
index b2ad54cb58..45300ddea8 100644
--- a/app/javascript/mastodon/components/status_action_bar.js
+++ b/app/javascript/mastodon/components/status_action_bar.js
@@ -375,7 +375,11 @@ class StatusActionBar extends ImmutablePureComponent {
         <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={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} />
-        <EmojiPickerDropdown className='status__action-bar-button' onPickEmoji={this.handleEmojiPick} button={reactButton} disabled={!canReact} />
+        {
+          signedIn
+            ? <EmojiPickerDropdown className='status__action-bar-button' onPickEmoji={this.handleEmojiPick} button={reactButton} disabled={!canReact} />
+            : reactButton
+        }
         <IconButton className='status__action-bar__button bookmark-icon' disabled={!signedIn} active={status.get('bookmarked')} title={intl.formatMessage(messages.bookmark)} icon='bookmark' onClick={this.handleBookmarkClick} />
 
         {shareButton}

From 6cad7718ebd3bfded3500f09659308ab048b9c0f Mon Sep 17 00:00:00 2001
From: fef <owo@fef.moe>
Date: Sun, 11 Dec 2022 13:26:23 +0000
Subject: [PATCH 45/48] fix 404 when reacting with Keycap Number Sign

The Unicode sequence for this emoji starts with an
ASCII # character, which the browser's URI parser
truncates before sending the request to the
backend.
---
 app/javascript/flavours/glitch/actions/interactions.js | 6 ++++--
 app/javascript/mastodon/actions/interactions.js        | 6 ++++--
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/app/javascript/flavours/glitch/actions/interactions.js b/app/javascript/flavours/glitch/actions/interactions.js
index 2d483de818..a7eb7a78dd 100644
--- a/app/javascript/flavours/glitch/actions/interactions.js
+++ b/app/javascript/flavours/glitch/actions/interactions.js
@@ -416,7 +416,9 @@ export const addReaction = (statusId, name, url) => (dispatch, getState) => {
     dispatch(addReactionRequest(statusId, name, url));
   }
 
-  api(getState).post(`/api/v1/statuses/${statusId}/react/${name}`).then(() => {
+  // encodeURIComponent is required for the Keycap Number Sign emoji, see:
+  // <https://github.com/glitch-soc/mastodon/pull/1980#issuecomment-1345538932>
+  api(getState).post(`/api/v1/statuses/${statusId}/react/${encodeURIComponent(name)}`).then(() => {
     dispatch(addReactionSuccess(statusId, name));
   }).catch(err => {
     if (!alreadyAdded) {
@@ -448,7 +450,7 @@ export const addReactionFail = (statusId, name, error) => ({
 export const removeReaction = (statusId, name) => (dispatch, getState) => {
   dispatch(removeReactionRequest(statusId, name));
 
-  api(getState).post(`/api/v1/statuses/${statusId}/unreact/${name}`).then(() => {
+  api(getState).post(`/api/v1/statuses/${statusId}/unreact/${encodeURIComponent(name)}`).then(() => {
     dispatch(removeReactionSuccess(statusId, name));
   }).catch(err => {
     dispatch(removeReactionFail(statusId, name, err));
diff --git a/app/javascript/mastodon/actions/interactions.js b/app/javascript/mastodon/actions/interactions.js
index 54592ec535..7433870250 100644
--- a/app/javascript/mastodon/actions/interactions.js
+++ b/app/javascript/mastodon/actions/interactions.js
@@ -436,7 +436,9 @@ export const addReaction = (statusId, name, url) => (dispatch, getState) => {
     dispatch(addReactionRequest(statusId, name, url));
   }
 
-  api(getState).post(`/api/v1/statuses/${statusId}/react/${name}`).then(() => {
+  // encodeURIComponent is required for the Keycap Number Sign emoji, see:
+  // <https://github.com/glitch-soc/mastodon/pull/1980#issuecomment-1345538932>
+  api(getState).post(`/api/v1/statuses/${statusId}/react/${encodeURIComponent(name)}`).then(() => {
     dispatch(addReactionSuccess(statusId, name));
   }).catch(err => {
     if (!alreadyAdded) {
@@ -468,7 +470,7 @@ export const addReactionFail = (statusId, name, error) => ({
 export const removeReaction = (statusId, name) => (dispatch, getState) => {
   dispatch(removeReactionRequest(statusId, name));
 
-  api(getState).post(`/api/v1/statuses/${statusId}/unreact/${name}`).then(() => {
+  api(getState).post(`/api/v1/statuses/${statusId}/unreact/${encodeURIComponent(name)}`).then(() => {
     dispatch(removeReactionSuccess(statusId, name));
   }).catch(err => {
     dispatch(removeReactionFail(statusId, name, err));

From c27dcb40e15cf662e13285a3ffb7a4ea686760dd Mon Sep 17 00:00:00 2001
From: fef <owo@fef.moe>
Date: Thu, 15 Dec 2022 15:27:54 +0000
Subject: [PATCH 46/48] bypass reaction limit for foreign accounts

---
 app/validators/status_reaction_validator.rb | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/validators/status_reaction_validator.rb b/app/validators/status_reaction_validator.rb
index d85d48e4c7..8c623c823d 100644
--- a/app/validators/status_reaction_validator.rb
+++ b/app/validators/status_reaction_validator.rb
@@ -9,7 +9,7 @@ class StatusReactionValidator < ActiveModel::Validator
     return if reaction.name.blank?
 
     reaction.errors.add(:name, I18n.t('reactions.errors.unrecognized_emoji')) if reaction.custom_emoji_id.blank? && !unicode_emoji?(reaction.name)
-    reaction.errors.add(:base, I18n.t('reactions.errors.limit_reached')) if limit_reached?(reaction)
+    reaction.errors.add(:base, I18n.t('reactions.errors.limit_reached')) if reaction.account.local? && limit_reached?(reaction)
   end
 
   private

From bf139fefa1d6fe33971c7d49e3f662ee55f544df Mon Sep 17 00:00:00 2001
From: Jeremy Kescher <jeremy@kescher.at>
Date: Sun, 18 Dec 2022 04:23:42 +0100
Subject: [PATCH 47/48] Fix status reactions preventing an on_cascade delete

---
 db/migrate/20221124114030_create_status_reactions.rb | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/db/migrate/20221124114030_create_status_reactions.rb b/db/migrate/20221124114030_create_status_reactions.rb
index bbf1f3376a..5f010c4a0b 100644
--- a/db/migrate/20221124114030_create_status_reactions.rb
+++ b/db/migrate/20221124114030_create_status_reactions.rb
@@ -1,10 +1,10 @@
 class CreateStatusReactions < ActiveRecord::Migration[6.1]
   def change
     create_table :status_reactions do |t|
-      t.references :account, null: false, foreign_key: true
-      t.references :status, null: false, foreign_key: true
+      t.references :account, null: false, foreign_key: { on_delete: :cascade }
+      t.references :status, null: false, foreign_key: { on_delete: :cascade }
       t.string :name, null: false, default: ''
-      t.references :custom_emoji, null: true, foreign_key: true
+      t.references :custom_emoji, null: true, foreign_key: { on_delete: :cascade }
 
       t.timestamps
     end

From 598f3b9b31877c917655cbe2d06c81057952ab81 Mon Sep 17 00:00:00 2001
From: fef <owo@fef.moe>
Date: Tue, 20 Dec 2022 17:19:56 +0000
Subject: [PATCH 48/48] move emoji reaction strings to locales-glitch

---
 config/locales-glitch/de.yml             | 7 +++++++
 config/locales-glitch/en.yml             | 5 +++++
 config/locales-glitch/fr.yml             | 6 ++++++
 config/locales-glitch/simple_form.de.yml | 6 ++++++
 config/locales-glitch/simple_form.en.yml | 1 +
 config/locales-glitch/simple_form.fr.yml | 6 ++++++
 config/locales/de.yml                    | 4 ----
 config/locales/en.yml                    | 4 ----
 config/locales/fr.yml                    | 4 ----
 config/locales/simple_form.de.yml        | 1 -
 config/locales/simple_form.en.yml        | 1 -
 config/locales/simple_form.fr.yml        | 1 -
 12 files changed, 31 insertions(+), 15 deletions(-)
 create mode 100644 config/locales-glitch/de.yml
 create mode 100644 config/locales-glitch/fr.yml
 create mode 100644 config/locales-glitch/simple_form.de.yml
 create mode 100644 config/locales-glitch/simple_form.fr.yml

diff --git a/config/locales-glitch/de.yml b/config/locales-glitch/de.yml
new file mode 100644
index 0000000000..77ac5037f5
--- /dev/null
+++ b/config/locales-glitch/de.yml
@@ -0,0 +1,7 @@
+---
+de:
+  notification_mailer:
+    reaction:
+      body: "%{name} hat auf deinen Beitrag reagiert:"
+      subject: "%{name} hat auf deinen Beitrag reagiert"
+      title: Neue Reaktion
diff --git a/config/locales-glitch/en.yml b/config/locales-glitch/en.yml
index 23c566153e..6f2d5f18ec 100644
--- a/config/locales-glitch/en.yml
+++ b/config/locales-glitch/en.yml
@@ -39,3 +39,8 @@ en:
     use_this: Use this
   settings:
     flavours: Flavours
+  notification_mailer:
+    reaction:
+      body: "%{name} reacted to your post:"
+      subject: "%{name} reacted to your post"
+      title: New reaction
diff --git a/config/locales-glitch/fr.yml b/config/locales-glitch/fr.yml
new file mode 100644
index 0000000000..51c50d7dbd
--- /dev/null
+++ b/config/locales-glitch/fr.yml
@@ -0,0 +1,6 @@
+fr:
+  notification_mailer:
+    reaction:
+      body: "%{name} a réagi·e à votre message:"
+      subject: "%{name} a réagi·e à votre message"
+      title: Nouvelle réaction
diff --git a/config/locales-glitch/simple_form.de.yml b/config/locales-glitch/simple_form.de.yml
new file mode 100644
index 0000000000..68061f5a58
--- /dev/null
+++ b/config/locales-glitch/simple_form.de.yml
@@ -0,0 +1,6 @@
+---
+de:
+  simple_form:
+    labels:
+      default:
+        setting_visible_reactions: Anzahl der sichtbaren Emoji-Reaktionen
diff --git a/config/locales-glitch/simple_form.en.yml b/config/locales-glitch/simple_form.en.yml
index c6e7d54ca0..e7c0d38c4a 100644
--- a/config/locales-glitch/simple_form.en.yml
+++ b/config/locales-glitch/simple_form.en.yml
@@ -21,6 +21,7 @@ en:
         setting_hide_followers_count: Hide your followers count
         setting_skin: Skin
         setting_system_emoji_font: Use system's default font for emojis (applies to Glitch flavour only)
+        setting_visible_reactions: Number of visible emoji reactions
       notification_emails:
         trending_tag: New trending tag requires review
         trending_link: New trending link requires review
diff --git a/config/locales-glitch/simple_form.fr.yml b/config/locales-glitch/simple_form.fr.yml
new file mode 100644
index 0000000000..c69548ca12
--- /dev/null
+++ b/config/locales-glitch/simple_form.fr.yml
@@ -0,0 +1,6 @@
+---
+fr:
+  simple_form:
+    labels:
+      default:
+        setting_visible_reactions: Nombre de réactions emoji visibles
diff --git a/config/locales/de.yml b/config/locales/de.yml
index e8b7261f4b..8a12a30470 100644
--- a/config/locales/de.yml
+++ b/config/locales/de.yml
@@ -1301,10 +1301,6 @@ de:
       title: Neue Erwähnung
     poll:
       subject: Eine Umfrage von %{name} ist beendet
-    reaction:
-      body: "%{name} hat auf deinen Beitrag reagiert:"
-      subject: "%{name} hat auf deinen Beitrag reagiert"
-      title: Neue Reaktion
     reblog:
       body: 'Deinen Beitrag hat %{name} geteilt:'
       subject: "%{name} hat deinen Beitrag geteilt"
diff --git a/config/locales/en.yml b/config/locales/en.yml
index f3bf0b6463..075ce2136f 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -1308,10 +1308,6 @@ en:
       title: New mention
     poll:
       subject: A poll by %{name} has ended
-    reaction:
-      body: "%{name} reacted to your post:"
-      subject: "%{name} reacted to your post"
-      title: New reaction
     reblog:
       body: 'Your post was boosted by %{name}:'
       subject: "%{name} boosted your post"
diff --git a/config/locales/fr.yml b/config/locales/fr.yml
index e1deaab221..b24603db98 100644
--- a/config/locales/fr.yml
+++ b/config/locales/fr.yml
@@ -1301,10 +1301,6 @@ fr:
       title: Nouvelle mention
     poll:
       subject: Un sondage de %{name} est terminé
-    reaction:
-      body: "%{name} a réagi·e à votre message:"
-      subject: "%{name} a réagi·e à votre message"
-      title: Nouvelle réaction
     reblog:
       body: 'Votre message été partagé par %{name} :'
       subject: "%{name} a partagé votre message"
diff --git a/config/locales/simple_form.de.yml b/config/locales/simple_form.de.yml
index e9356c6eae..f12211c94f 100644
--- a/config/locales/simple_form.de.yml
+++ b/config/locales/simple_form.de.yml
@@ -213,7 +213,6 @@ de:
         setting_unfollow_modal: Bestätigungsdialog anzeigen, bevor jemandem entfolgt wird
         setting_use_blurhash: Farbverlauf für verborgene Medien anzeigen
         setting_use_pending_items: Langsamer Modus
-        setting_visible_reactions: Anzahl der sichtbaren Emoji-Reaktionen
         severity: Schweregrad
         sign_in_token_attempt: Sicherheitscode
         title: Titel
diff --git a/config/locales/simple_form.en.yml b/config/locales/simple_form.en.yml
index 880d9190cd..6edf7b4e9e 100644
--- a/config/locales/simple_form.en.yml
+++ b/config/locales/simple_form.en.yml
@@ -213,7 +213,6 @@ en:
         setting_unfollow_modal: Show confirmation dialog before unfollowing someone
         setting_use_blurhash: Show colorful gradients for hidden media
         setting_use_pending_items: Slow mode
-        setting_visible_reactions: Number of visible emoji reactions
         severity: Severity
         sign_in_token_attempt: Security code
         title: Title
diff --git a/config/locales/simple_form.fr.yml b/config/locales/simple_form.fr.yml
index b3f56d60b0..73fb4f3347 100644
--- a/config/locales/simple_form.fr.yml
+++ b/config/locales/simple_form.fr.yml
@@ -213,7 +213,6 @@ fr:
         setting_unfollow_modal: Afficher une fenêtre de confirmation avant de vous désabonner d’un compte
         setting_use_blurhash: Afficher des dégradés colorés pour les médias cachés
         setting_use_pending_items: Mode lent
-        setting_visible_reactions: Nombre de réactions emoji visibles
         severity: Sévérité
         sign_in_token_attempt: Code de sécurité
         title: Nom