Track frequently used emojis in web UI (#5275)

* Track frequently used emojis in web UI

* Persist emoji usage, but debounce commits to the settings API

* Fix #5144 - Add tooltips to picker

* Display only 2 lines of frequently used emojis

1 files changed, 22 insertions, 5 deletions

diff --git a/app/javascript/mastodon/reducers/settings.js b/app/javascript/mastodon/reducers/settings.js
index 3063ddadd..a9f3f9529 100644
--- a/app/javascript/mastodon/reducers/settings.js
+++ b/app/javascript/mastodon/reducers/settings.js
@@ -1,10 +1,13 @@
-import { SETTING_CHANGE } from '../actions/settings';
+import { SETTING_CHANGE, SETTING_SAVE } from '../actions/settings';
 import { COLUMN_ADD, COLUMN_REMOVE, COLUMN_MOVE } from '../actions/columns';
 import { STORE_HYDRATE } from '../actions/store';
+import { EMOJI_USE } from '../actions/emojis';
 import { Map as ImmutableMap, fromJS } from 'immutable';
 import uuid from '../uuid';
 
 const initialState = ImmutableMap({
+  saved: true,
+
   onboarded: false,
 
   skinTone: 1,
@@ -74,21 +77,35 @@ const moveColumn = (state, uuid, direction) => {
   newColumns = columns.splice(index, 1);
   newColumns = newColumns.splice(newIndex, 0, columns.get(index));
 
-  return state.set('columns', newColumns);
+  return state
+    .set('columns', newColumns)
+    .set('saved', false);
 };
 
+const updateFrequentEmojis = (state, emoji) => state.update('frequentlyUsedEmojis', ImmutableMap(), map => map.update(emoji.id, 0, count => count + 1)).set('saved', false);
+
 export default function settings(state = initialState, action) {
   switch(action.type) {
   case STORE_HYDRATE:
     return hydrate(state, action.state.get('settings'));
   case SETTING_CHANGE:
-    return state.setIn(action.key, action.value);
+    return state
+      .setIn(action.key, action.value)
+      .set('saved', false);
   case COLUMN_ADD:
-    return state.update('columns', list => list.push(fromJS({ id: action.id, uuid: uuid(), params: action.params })));
+    return state
+      .update('columns', list => list.push(fromJS({ id: action.id, uuid: uuid(), params: action.params })))
+      .set('saved', false);
   case COLUMN_REMOVE:
-    return state.update('columns', list => list.filterNot(item => item.get('uuid') === action.uuid));
+    return state
+      .update('columns', list => list.filterNot(item => item.get('uuid') === action.uuid))
+      .set('saved', false);
   case COLUMN_MOVE:
     return moveColumn(state, action.uuid, action.direction);
+  case EMOJI_USE:
+    return updateFrequentEmojis(state, action.emoji);
+  case SETTING_SAVE:
+    return state.set('saved', true);
   default:
     return state;
   }