FEATURE: recently used emoji tab

⬆️ update lodash to V.3.0.1

app/assets/javascripts/discourse/lib/emoji/emoji-toolbar.js.es6

@@ -40,13 +40,12 @@ var closeSelector = function(){
   $('body, textarea').off('keydown.emoji');
 };
 
-var ungroupedIcons;
+var ungroupedIcons, recentlyUsedIcons;
 
-var toolbar = function(selected){
+var initializeUngroupedIcons = function(){
-  if(!ungroupedIcons){
   ungroupedIcons = [];
-    var groupedIcons = {};
 
+  var groupedIcons = {};
   _.each(groups, function(group){
     _.each(group.icons, function(icon){
       groupedIcons[icon] = true;
@@ -63,8 +62,48 @@ var toolbar = function(selected){
   if(ungroupedIcons.length > 0){
     groups.push({name: 'ungrouped', icons: ungroupedIcons});
   }
+};
+
+if (!localStorage.emojiUsage) { localStorage.emojiUsage = "{}"; }
+
+var trackEmojiUsage = function(title){
+  var recent = JSON.parse(localStorage.emojiUsage);
+
+  if (!recent[title]) { recent[title] = { title: title, usage: 0 }; }
+  recent[title]["usage"]++;
+
+  localStorage.emojiUsage = JSON.stringify(recent);
+
+  // clear the cache
+  recentlyUsedIcons = null;
+};
+
+var initializeRecentlyUsedIcons = function() {
+  recentlyUsedIcons = [];
+
+  var usage = JSON.parse(localStorage.emojiUsage);
+  var recent = _.take(_.sortByAll(usage, ["usage", "title"]).reverse(), PER_ROW);
+
+
+  if(recentlyUsedIcons.length > 0){
+    _.each(recent, function(emoji){
+      recentlyUsedIcons.push(emoji.title);
+    });
+
+    var recentGroup = _.find(groups, {name: 'recent'});
+    if(!recentGroup){
+      recentGroup = {name: 'recent', icons: []};
+      groups.push(recentGroup);
     }
 
+    recentGroup.icons = recentlyUsedIcons;
+  }
+};
+
+var toolbar = function(selected){
+  if (!ungroupedIcons) { initializeUngroupedIcons(); }
+  if (!recentlyUsedIcons) { initializeRecentlyUsedIcons(); }
+
   return _.map(groups, function(g, i){
     var row = {src: Discourse.Emoji.urlFor(g.icons[0]), groupId: i};
     if(i === selected){
@@ -80,7 +119,9 @@ var bindEvents = function(page,offset){
   var composerController = Discourse.__container__.lookup('controller:composer');
 
   $('.emoji-page a').click(function(){
-     composerController.appendTextAtCursor(":" + $(this).attr('title') + ":", {space: true});
+    var title = $(this).attr('title');
+    trackEmojiUsage(title)
+    composerController.appendTextAtCursor(":" + title + ":", {space: true});
     closeSelector();
     return false;
   }).hover(function(){