Fix reaction_deck api structure

app/controllers/api/v1/reaction_deck_controller.rb

@@ -1,6 +1,8 @@
 # frozen_string_literal: true
 
 class Api::V1::ReactionDeckController < Api::BaseController
+  include RoutingHelper
+
   before_action -> { doorkeeper_authorize! :read, :'read:lists' }, only: [:index]
   before_action -> { doorkeeper_authorize! :write, :'write:lists' }, only: [:create]
 
@@ -12,7 +14,7 @@ class Api::V1::ReactionDeckController < Api::BaseController
   end
 
   def index
-    render json: @deck
+    render json: remove_metas(@deck)
   end
 
   def create
@@ -21,11 +23,29 @@ class Api::V1::ReactionDeckController < Api::BaseController
     (deck_params['emojis'] || []).each do |data|
       raise ArgumentError if data['id'].to_i >= 16 || data['id'].to_i.negative?
 
+      shortcode = data['emoji'].delete(':')
+      custom_emoji = CustomEmoji.find_by(shortcode: shortcode, domain: nil)
+      custom_emoji_id = custom_emoji&.id
+      emoji_data = if custom_emoji
+                     {
+                       'shortcode' => custom_emoji.shortcode,
+                       'url' => full_asset_url(custom_emoji.image.url),
+                       'static_url' => full_asset_url(custom_emoji.image.url(:static)),
+                       'width' => custom_emoji.image_width,
+                       'height' => custom_emoji.image_height,
+                     }
+                   else
+                     {
+                       'shortcode' => shortcode,
+                     }
+                   end
+
       exists = deck.find { |dd| dd['id'] == data['id'] }
       if exists
-        exists['emoji'] = data['emoji'].delete(':')
+        exists['custom_emoji_id'] = custom_emoji_id
+        exists['emoji'] = emoji_data
       else
-        deck << { 'id' => data['id'], 'emoji' => data['emoji'].delete(':') }
+        deck << { 'id' => data['id'], 'custom_emoji_id' => custom_emoji_id, 'emoji' => emoji_data }
       end
     end
 
@@ -33,13 +53,39 @@ class Api::V1::ReactionDeckController < Api::BaseController
     current_user.settings['reaction_deck'] = deck.to_json
     current_user.save!
 
-    render json: deck
+    render json: remove_metas(deck)
   end
 
   private
 
   def set_deck
-    @deck = current_user.setting_reaction_deck ? JSON.parse(current_user.setting_reaction_deck) : []
+    deck = current_user.setting_reaction_deck ? JSON.parse(current_user.setting_reaction_deck) : []
+    @deck = remove_unused_custom_emojis(deck)
+  end
+
+  def remove_unused_custom_emojis(deck)
+    custom_ids = []
+    deck.each do |item|
+      custom_ids << item['custom_emoji_id'].to_i unless item['custom_emoji_id'].nil?
+    end
+    custom_emojis = CustomEmoji.where(id: custom_ids)
+
+    deck.each do |item|
+      next if item['custom_emoji_id'].nil?
+
+      custom_emoji = custom_emojis.find { |em| em.id == item['custom_emoji_id'].to_i }
+      remove = custom_emoji.nil? || custom_emoji.disabled
+      item['remove'] = remove if remove
+    end
+    deck.filter { |item| !item.key?('remove') }
+  end
+
+  def remove_metas(deck)
+    deck.tap do |d|
+      d.each do |item|
+        item.delete('custom_emoji_id')
+      end
+    end
   end
 
   def deck_params

app/javascript/mastodon/features/compose/containers/emoji_picker_dropdown_container.js

@@ -45,7 +45,7 @@ const getFrequentlyUsedEmojis = createSelector([
   const { emojiCounters, reactionDeck } = data;
   let deckEmojis = reactionDeck
     .toArray()
-    .map((e) => e.get('emoji'))
+    .map((e) => e.getIn(['emoji', 'shortcode']))
     .filter((e) => e)
     .map((e) => shortCodes[e] || e);
   deckEmojis = [...new Set(deckEmojis)];
@@ -70,6 +70,8 @@ const getFrequentlyUsedEmojis = createSelector([
 
   emojis = deckEmojis.slice(0, DECK_SIZE).concat(emojis);
 
+  if (emojis.length <= 0) emojis = ['+1'];
+
   return emojis;
 });
 

app/javascript/mastodon/features/reaction_deck/components/reaction_emoji.jsx

@@ -13,7 +13,7 @@ import emojify from 'mastodon/features/emoji/emoji';
 import { autoPlayGif } from 'mastodon/initial_state';
 
 const MapStateToProps = (state, { emojiId, emojiMap }) => ({
-  emoji: (state.get('reaction_deck', ImmutableList()).toArray().find(em => em.get('id') === emojiId) || ImmutableMap({ emoji: '' })).get('emoji'),
+  emoji: (state.get('reaction_deck', ImmutableList()).toArray().find(em => em.get('id') === emojiId) || ImmutableMap({ emoji: { shortcode: '' } })).getIn(['emoji', 'shortcode']),
   emojiMap,
 });