frontend: Create data structure for starred messages.

.eslintrc.json

@@ -153,6 +153,7 @@
         "settings_ui": false,
         "settings_user_groups": false,
         "settings_users": false,
+        "starred_messages": false,
         "stream_color": false,
         "stream_create": false,
         "stream_data": false,

frontend_tests/node_tests/dispatch.js

@@ -80,6 +80,10 @@ set_global('blueslip', {
     },
 });
 
+set_global('starred_messages', {
+    add: noop,
+});
+
 zrequire('server_events_dispatch');
 var sed = server_events_dispatch;
 

frontend_tests/node_tests/message_flags.js

@@ -4,6 +4,10 @@ zrequire('message_flags');
 
 set_global('ui', {});
 set_global('channel', {});
+set_global('starred_messages', {
+    add: () => {},
+    remove: () => {},
+});
 
 run_test('starred', () => {
     const message = {

static/js/bundles/app.js

@@ -136,6 +136,7 @@ import "js/hash_util.js";
 import "js/hashchange.js";
 import "js/invite.js";
 import "js/message_flags.js";
+import "js/starred_messages.js";
 import "js/alert_words.js";
 import "js/alert_words_ui.js";
 import "js/attachments_ui.js";

static/js/message_flags.js

@@ -101,8 +101,10 @@ exports.toggle_starred_and_update_server = function (message) {
 
     if (message.starred) {
         send_flag_update(message, 'starred', 'add');
+        starred_messages.add([message.id]);
     } else {
         send_flag_update(message, 'starred', 'remove');
+        starred_messages.remove([message.id]);
     }
 };
 

static/js/server_events_dispatch.js

@@ -406,6 +406,11 @@ exports.dispatch_normal_event = function dispatch_normal_event(event) {
             _.each(event.messages, function (message_id) {
                 message_flags.update_starred_flag(message_id, new_value);
             });
+            if (event.operation === "add") {
+                starred_messages.add(event.messages);
+            } else {
+                starred_messages.remove(event.messages);
+            }
             break;
         case 'read':
             unread_ops.process_read_messages_event(event.messages);

static/js/starred_messages.js

@@ -0,0 +1,48 @@
+var starred_messages = (function () {
+
+var exports = {};
+
+exports.ids = new Dict();
+
+exports.initialize = function () {
+    exports.ids = new Dict();
+    _.each(page_params.starred_messages, function (id) {
+        exports.ids.set(id, true);
+    });
+    exports.rerender_ui();
+};
+
+exports.add = function (ids) {
+    _.each(ids, function (id) {
+        exports.ids.set(id, true);
+    });
+    exports.rerender_ui();
+};
+
+exports.remove = function (ids) {
+    _.each(ids, function (id) {
+        if (exports.ids.has(id)) {
+            exports.ids.del(id);
+        }
+    });
+    exports.rerender_ui();
+};
+
+exports.count = function () {
+    return exports.ids.num_items();
+};
+
+exports.rerender_ui = function () {
+    var starred_li = top_left_corner.get_global_filter_li('starred');
+    top_left_corner.update_count_in_dom(starred_li, exports.count());
+};
+
+return exports;
+
+}());
+
+if (typeof module !== 'undefined') {
+    module.exports = starred_messages;
+}
+
+window.starred_messages = starred_messages;

static/js/ui_init.js

@@ -324,6 +324,7 @@ $(function () {
     ui.initialize();
     panels.initialize();
     typing.initialize();
+    starred_messages.initialize();
 });
 
 

templates/zerver/app/left_sidebar.html

@@ -31,6 +31,9 @@
                         <i class="fa fa-star" aria-hidden="true"></i>
                     </span>
                     <span class="hover-underline">{{ _('Starred messages') }}</span>
+                    <span class="count">
+                        <span class="value"></span>
+                    </span>
                 </a>
             </li>
             <li data-name="mentioned" class="global-filter">