Separate auto-refresh for mails and tags, and start moving away from having the left_pane_dispatcher as a middleman

17 files changed, 162 insertions, 123 deletions

diff --git a/web-ui/app/js/dispatchers/left_pane_dispatcher.js b/web-ui/app/js/dispatchers/left_pane_dispatcher.js
index 21898dca..0037a88f 100644
--- a/web-ui/app/js/dispatchers/left_pane_dispatcher.js
+++ b/web-ui/app/js/dispatchers/left_pane_dispatcher.js
@@ -47,19 +47,14 @@ define(
           this.trigger(document, events.router.pushState, data);
         }
         initialized = true;
-
-        if (data.skipMailListRefresh) {
-          return;
-        }
-
-        this.trigger(document, events.ui.mails.fetchByTag, data);
       };
 
       this.after('initialize', function () {
-        this.on(this.$node, events.tags.received, this.loadTags);
+        //this.on(this.$node, events.tags.received, this.loadTags);
         this.on(document, events.dispatchers.tags.refreshTagList, this.refreshTagList);
         this.on(document, events.ui.tags.loaded, this.selectTag);
         this.on(document, events.ui.tag.selected, this.pushUrlState);
+        this.on(document, events.ui.tag.select, this.pushUrlState);
         this.trigger(document, events.tags.want, { caller: this.$node });
       });
     }
diff --git a/web-ui/app/js/dispatchers/right_pane_dispatcher.js b/web-ui/app/js/dispatchers/right_pane_dispatcher.js
index 092fca81..77d578e0 100644
--- a/web-ui/app/js/dispatchers/right_pane_dispatcher.js
+++ b/web-ui/app/js/dispatchers/right_pane_dispatcher.js
@@ -101,6 +101,7 @@ define(
         this.on(document, events.dispatchers.rightPane.openNoMessageSelected, this.openNoMessageSelectedPane);
         this.on(document, events.dispatchers.rightPane.selectTag, this.selectTag);
         this.on(document, events.ui.tag.selected, this.saveTag);
+        this.on(document, events.ui.tag.select, this.saveTag);
         this.on(document, events.dispatchers.rightPane.openNoMessageSelectedWithoutPushState, this.initializeNoMessageSelectedPane);
         this.initializeNoMessageSelectedPane();
       });
diff --git a/web-ui/app/js/helpers/monitored_ajax.js b/web-ui/app/js/helpers/monitored_ajax.js
index 42b2dcf7..c8c74d3e 100644
--- a/web-ui/app/js/helpers/monitored_ajax.js
+++ b/web-ui/app/js/helpers/monitored_ajax.js
@@ -56,7 +56,6 @@ define(['page/events', 'views/i18n'], function (events, i18n) {
         on.trigger(document, events.ui.userAlerts.displayMessage, { message: i18n(msg) });
       }
     }.bind(this));
-
   }
 
   return monitoredAjax;
diff --git a/web-ui/app/js/mail_list/ui/mail_items/mail_item.js b/web-ui/app/js/mail_list/ui/mail_items/mail_item.js
index 24c7b043..ed1fd07f 100644
--- a/web-ui/app/js/mail_list/ui/mail_items/mail_item.js
+++ b/web-ui/app/js/mail_list/ui/mail_items/mail_item.js
@@ -32,6 +32,7 @@ define(
 
     this.doSelect = function () {
       this.$node.addClass('selected');
+      this.checkCheckbox();
     };
 
     this.doUnselect = function () {
@@ -72,6 +73,7 @@ define(
     this.attachListeners = function () {
       this.on(this.$node.find('input[type=checkbox]'), 'change', this.triggerMailChecked);
       this.on(document, events.ui.mails.cleanSelected, this.doUnselect);
+      this.on(document, events.ui.tag.select, this.doUnselect);
       this.on(document, events.ui.mails.uncheckAll, this.uncheckCheckbox);
       this.on(document, events.ui.mails.checkAll, this.checkCheckbox);
     };
diff --git a/web-ui/app/js/mail_list/ui/mail_list.js b/web-ui/app/js/mail_list/ui/mail_list.js
index 56c5c4f9..11300346 100644
--- a/web-ui/app/js/mail_list/ui/mail_list.js
+++ b/web-ui/app/js/mail_list/ui/mail_list.js
@@ -121,23 +121,11 @@ define(
       };
 
       this.respondWithCheckedMails = function (ev, caller) {
-        this.trigger(caller, events.ui.mail.hereChecked, { checkedMails: this.checkedMailsForCurrentTag()});
+        this.trigger(caller, events.ui.mail.hereChecked, {checkedMails: self.attr.checkedMails});
       };
 
       this.updateCheckAllCheckbox = function () {
-        if (this.checkedMailsForCurrentTag().length > 0) {
-          this.trigger(document, events.ui.mails.hasMailsChecked, true);
-        } else {
-          this.trigger(document, events.ui.mails.hasMailsChecked, false);
-        }
-      };
-
-      this.checkedMailsForCurrentTag = function () {
-        var checkedMailsForCurrentTag = _.filter(self.attr.checkedMails, function (mail) {
-          return  self.attr.currentTag === 'all' || mail.mailbox === self.attr.currentTag || _.contains(mail.tags, self.attr.currentTag);
-        });
-
-        return checkedMailsForCurrentTag.length > 0 ? checkedMailsForCurrentTag : {};
+        this.trigger(document, events.ui.mails.hasMailsChecked, {hasMailsChecked: this.attr.checkedMails.length > 0});
       };
 
       this.addToSelectedMails = function (ev, data) {
@@ -177,6 +165,7 @@ define(
         self = this;
 
         this.on(document, events.ui.mails.cleanSelected, this.cleanSelected);
+        this.on(document, events.ui.tag.select, this.cleanSelected);
 
         this.on(document, events.mails.available, this.showMails);
         this.on(document, events.mails.availableForRefresh, this.refreshMailList);
diff --git a/web-ui/app/js/mixins/with_auto_refresh.js b/web-ui/app/js/mixins/with_auto_refresh.js
new file mode 100644
index 00000000..f01903e0
--- /dev/null
+++ b/web-ui/app/js/mixins/with_auto_refresh.js
@@ -0,0 +1,49 @@
+/*
+ * Copyright (c) 2014 ThoughtWorks, Inc.
+ *
+ * Pixelated is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * Pixelated is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with Pixelated. If not, see <http://www.gnu.org/licenses/>.
+ */
+/*global Pixelated */
+/*global _ */
+
+define(['features'],
+  function (features) {
+    'use strict';
+
+    function withAutoRefresh(refreshMethod) {
+      return function () {
+        this.defaultAttrs({
+          refreshInterval: 15000
+        });
+
+        this.setupRefresher = function () {
+          clearTimeout(this.attr.refreshTimer);
+          this.attr.refreshTimer = setTimeout(function () {
+            this[refreshMethod]();
+            this.setupRefresher();
+          }.bind(this), this.attr.refreshInterval);
+        };
+
+        this.after('initialize', function () {
+          if (features.isAutoRefreshEnabled()) {
+            this.setupRefresher();
+          }
+        });
+      };
+    }
+
+    return withAutoRefresh;
+  }
+);
+
diff --git a/web-ui/app/js/mixins/with_mail_edit_base.js b/web-ui/app/js/mixins/with_mail_edit_base.js
index 4f811235..2af5fefa 100644
--- a/web-ui/app/js/mixins/with_mail_edit_base.js
+++ b/web-ui/app/js/mixins/with_mail_edit_base.js
@@ -212,6 +212,7 @@ define(
         this.on(document, events.ui.mail.send, this.sendMail);
 
         this.on(document, events.ui.tag.selected, this.saveTag);
+        this.on(document, events.ui.tag.select, this.saveTag);
       });
     }
 
diff --git a/web-ui/app/js/page/router.js b/web-ui/app/js/page/router.js
index 3de2bba9..ce0d7d04 100644
--- a/web-ui/app/js/page/router.js
+++ b/web-ui/app/js/page/router.js
@@ -34,6 +34,7 @@ define(['flight/lib/component', 'page/events', 'page/router/url_params'], functi
       return {
         tag: data.tag || (previousState && previousState.tag) || urlParams.defaultTag(),
         mailIdent: data.mailIdent,
+        query: data.query,
         isDisplayNoMessageSelected: !!data.isDisplayNoMessageSelected
       };
     }
@@ -61,6 +62,9 @@ define(['flight/lib/component', 'page/events', 'page/router/url_params'], functi
 
     this.after('initialize', function () {
       this.on(document, events.router.pushState, this.pushState);
+      this.on(document, events.ui.tag.select, this.pushState);
+      this.on(document, events.search.perform, this.pushState);
+      this.on(document, events.search.empty, this.pushState);
       window.onpopstate = this.popState.bind(this);
     });
   });
diff --git a/web-ui/app/js/search/search_trigger.js b/web-ui/app/js/search/search_trigger.js
index 8f5bbb86..9f2dd45e 100644
--- a/web-ui/app/js/search/search_trigger.js
+++ b/web-ui/app/js/search/search_trigger.js
@@ -46,16 +46,14 @@ define(
         var value = input.val();
         input.blur();
         if(!_.isEmpty(value)){
-          this.trigger(document, events.ui.tag.select, { tag: 'all', skipMailListRefresh: true });
           this.trigger(document, events.search.perform, { query: value });
         } else {
-          this.trigger(document, events.ui.tag.select, { tag: 'all'});
           this.trigger(document, events.search.empty);
         }
       };
 
-      this.clearInput = function(event, data) {
-        if (!data.skipMailListRefresh) { this.select('input').val(''); }
+      this.clearInput = function() {
+        this.select('input').val('');
       };
 
       this.showOnlySearchTerms = function(event){
@@ -77,6 +75,7 @@ define(
         this.on(this.select('input'), 'focus', this.showOnlySearchTerms);
         this.on(this.select('input'), 'blur', this.showSearchTermsAndPlaceHolder);
         this.on(document, events.ui.tag.selected, this.clearInput);
+        this.on(document, events.ui.tag.select, this.clearInput);
       });
     }
   }
diff --git a/web-ui/app/js/services/mail_service.js b/web-ui/app/js/services/mail_service.js
index 2e92f542..1d5db40e 100644
--- a/web-ui/app/js/services/mail_service.js
+++ b/web-ui/app/js/services/mail_service.js
@@ -24,12 +24,14 @@ define(
     'services/model/mail',
     'helpers/monitored_ajax',
     'page/events',
-    'features'
-  ], function (defineComponent, i18n, Mail, monitoredAjax, events, features) {
+    'features',
+    'mixins/with_auto_refresh',
+    'page/router/url_params'
+  ], function (defineComponent, i18n, Mail, monitoredAjax, events, features, withAutoRefresh, urlParams) {
 
     'use strict';
 
-    return defineComponent(mailService);
+    return defineComponent(mailService, withAutoRefresh('refreshMails'));
 
     function mailService() {
       var that;
@@ -41,7 +43,7 @@ define(
         lastQuery: '',
         currentPage: 1,
         numPages: 1,
-        w: 25
+        pageSize: 25
       });
 
       this.errorMessage = function (msg) {
@@ -54,7 +56,7 @@ define(
         var ident = data.ident;
 
         var success = function (data) {
-          this.refreshResults();
+          this.refreshMails();
           $(document).trigger(events.mail.tags.updated, { ident: ident, tags: data.tags });
         };
 
@@ -106,7 +108,7 @@ define(
 
       this.triggerMailsRead = function (mails) {
         return _.bind(function () {
-          this.refreshResults();
+          this.refreshMails();
           this.trigger(document, events.ui.mail.unchecked, { mails: mails });
           this.trigger(document, events.ui.mails.hasMailsChecked, false);
         }, this);
@@ -116,7 +118,7 @@ define(
         return _.bind(function () {
           var mails = dataToDelete.mails || [dataToDelete.mail];
 
-          this.refreshResults();
+          this.refreshMails();
           this.trigger(document, events.ui.userAlerts.displayMessage, { message: dataToDelete.successMessage});
           this.trigger(document, events.ui.mail.unchecked, { mails: mails });
           this.trigger(document, events.ui.mails.hasMailsChecked, false);
@@ -157,20 +159,16 @@ define(
 
       this.fetchByTag = function (ev, data) {
         this.attr.currentTag = data.tag;
+        this.attr.lastQuery = compileQuery(data);
         this.updateCurrentPageNumber(1);
 
-        this.fetchMail(compileQuery(data), this.attr.currentTag, false, data);
-      };
-
-      this.refreshResults = function (ev, data) {
-        var query = this.attr.lastQuery;
-        this.fetchMail(query, this.attr.currentTag, true);
+        this.refreshMails();
       };
 
       this.newSearch = function (ev, data) {
-        var query = data.query;
+        this.attr.lastQuery = data.query;
         this.attr.currentTag = 'all';
-        this.fetchMail(query, 'all');
+        this.refreshMails();
       };
 
       this.mailFromJSON = function (mail) {
@@ -190,21 +188,19 @@ define(
       this.excludeTrashedEmailsForDraftsAndSent = function (query) {
         if (query === 'tag:"drafts"' || query === 'tag:"sent"') {
           return query + ' -in:"trash"';
-        } else {
-          return query;
         }
+        return query;
       };
 
-      this.fetchMail = function (query, tag, fromRefresh, eventData) {
-        var p = this.attr.currentPage;
-        var w = this.attr.w;
-        var url = this.attr.mailsResource + '?q=' + escaped(this.excludeTrashedEmailsForDraftsAndSent(query)) + '&p=' + p + '&w=' + w;
-        this.attr.lastQuery = this.excludeTrashedEmailsForDraftsAndSent(query);
+      this.refreshMails = function () {
+        var url = this.attr.mailsResource + '?q=' + escaped(this.attr.lastQuery) + '&p=' + this.attr.currentPage + '&w=' + this.attr.pageSize;
+
+        this.attr.lastQuery = this.excludeTrashedEmailsForDraftsAndSent(this.attr.lastQuery);
+
         monitoredAjax(this, url, { dataType: 'json' })
           .done(function (data) {
-            this.attr.numPages = Math.ceil(data.stats.total / this.attr.w);
-            var eventToTrigger = fromRefresh ? events.mails.availableForRefresh : events.mails.available;
-            this.trigger(document, eventToTrigger, _.merge(_.merge({tag: tag }, eventData), this.parseMails(data)));
+            this.attr.numPages = Math.ceil(data.stats.total / this.attr.pageSize);
+            this.trigger(document, events.mails.available, _.merge(_.merge({tag: this.attr.currentTag }), this.parseMails(data)));
           }.bind(this))
           .fail(function () {
             this.trigger(document, events.ui.userAlerts.displayMessage, { message: i18n('Could not fetch messages') });
@@ -232,14 +228,14 @@ define(
       this.previousPage = function () {
         if (this.attr.currentPage > 1) {
           this.updateCurrentPageNumber(this.attr.currentPage - 1);
-          this.refreshResults();
+          this.refreshMails();
         }
       };
 
       this.nextPage = function () {
         if (this.attr.currentPage < (this.attr.numPages)) {
           this.updateCurrentPageNumber(this.attr.currentPage + 1);
-          this.refreshResults();
+          this.refreshMails();
         }
       };
 
@@ -281,10 +277,13 @@ define(
         this.on(document, events.mail.delete, this.deleteMail);
         this.on(document, events.mail.deleteMany, this.deleteManyMails);
         this.on(document, events.search.perform, this.newSearch);
-        this.on(document, events.ui.mails.fetchByTag, this.fetchByTag);
-        this.on(document, events.ui.mails.refresh, this.refreshResults);
+        this.on(document, events.ui.tag.selected, this.fetchByTag);
+        this.on(document, events.ui.tag.select, this.fetchByTag);
+        this.on(document, events.ui.mails.refresh, this.refreshMails);
         this.on(document, events.ui.page.previous, this.previousPage);
         this.on(document, events.ui.page.next, this.nextPage);
+
+        this.fetchByTag(null, {tag: urlParams.getTag()});
       });
     }
   }
diff --git a/web-ui/app/js/tags/data/tags.js b/web-ui/app/js/tags/data/tags.js
index 40614fea..401b41f7 100644
--- a/web-ui/app/js/tags/data/tags.js
+++ b/web-ui/app/js/tags/data/tags.js
@@ -14,12 +14,12 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with Pixelated. If not, see <http://www.gnu.org/licenses/>.
  */
-define(['flight/lib/component', 'page/events', 'helpers/monitored_ajax', 'mixins/with_feature_toggle'], function (defineComponent, events, monitoredAjax,  withFeatureToggle) {
+define(['flight/lib/component', 'page/events', 'helpers/monitored_ajax', 'mixins/with_feature_toggle', 'mixins/with_auto_refresh'], function (defineComponent, events, monitoredAjax,  withFeatureToggle, withAutoRefresh) {
   'use strict';
 
   var DataTags = defineComponent(dataTags, withFeatureToggle('tags', function() {
     $(document).trigger(events.ui.mails.refresh);
-  }));
+  }), withAutoRefresh('refreshTags'));
 
   DataTags.all = {
     name: 'all',
@@ -34,13 +34,11 @@ define(['flight/lib/component', 'page/events', 'helpers/monitored_ajax', 'mixins
     }
   };
 
-  return DataTags;
-
   function dataTags() {
     function sendTagsBackTo(on, params) {
       return function(data) {
         data.push(DataTags.all);
-        on.trigger(params.caller, events.tags.received, {tags: data, skipMailListRefresh: params.skipMailListRefresh});
+        on.trigger(params.caller, events.tags.received, {tags: data});
       };
     }
 
@@ -53,8 +51,14 @@ define(['flight/lib/component', 'page/events', 'helpers/monitored_ajax', 'mixins
         .done(sendTagsBackTo(this, params));
     };
 
+    this.refreshTags = function() {
+      this.fetchTags(null, {caller: document});
+    };
+
     this.after('initialize', function () {
       this.on(document, events.tags.want, this.fetchTags);
     });
   }
+
+  return DataTags;
 });
diff --git a/web-ui/app/js/tags/ui/tag.js b/web-ui/app/js/tags/ui/tag.js
index 0d2d2ebf..e6375034 100644
--- a/web-ui/app/js/tags/ui/tag.js
+++ b/web-ui/app/js/tags/ui/tag.js
@@ -39,15 +39,16 @@ define(
     return Tag;
 
     function tag() {
-    
-      this.viewFor = function (tag, template) {
+
+      this.viewFor = function (tag, template, currentTag) {
         return template({
           tagName: tag.default ? i18n('tags.' + tag.name) : tag.name,
           ident: this.hashIdent(tag.ident),
           count: this.badgeType(tag) === 'total' ? tag.counts.total : (tag.counts.total - tag.counts.read),
           displayBadge: this.displayBadge(tag),
           badgeType: this.badgeType(tag),
-          icon: tag.icon
+          icon: tag.icon,
+          selected: tag.name === currentTag ? 'selected' : ''
         });
       };
 
@@ -55,7 +56,7 @@ define(
         var mailbox_and_tags = _.flatten([data.tags, data.mailbox]);
         if (_.contains(mailbox_and_tags, this.attr.tag.name)) {
           this.attr.tag.counts.read++;
-          this.$node.html(this.viewFor(this.attr.tag, templates.tags.tagInner));
+          this.$node.html(this.viewFor(this.attr.tag, templates.tags.tagInner, this.attr.currentTag));
           if (!_.isUndefined(this.attr.shortcut)) {
             this.attr.shortcut.reRender();
           }
@@ -64,23 +65,6 @@ define(
 
       this.triggerSelect = function () {
         this.trigger(document, events.ui.tag.select, { tag: this.attr.tag.name });
-        this.trigger(document, events.search.empty);
-      };
-
-      this.selectTag = function (ev, data) {
-        if(data.tag === this.attr.tag.name) { this.doSelect(data); }
-        else { this.doUnselect(); }
-      };
-
-      this.doUnselect = function () {
-        this.attr.selected = false;
-        this.$node.removeClass('selected');
-      };
-
-      this.doSelect = function (data) {
-        this.attr.selected = true;
-        this.$node.addClass('selected');
-        this.trigger(document, events.ui.tag.selected, data);
       };
 
       this.addSearchingClass = function() {
@@ -112,14 +96,13 @@ define(
 
       this.after('initialize', function () {
         this.on('click', this.triggerSelect);
-        this.on(document, events.ui.tag.select, this.selectTag);
         this.on(document, events.mail.read, this.decreaseReadCountIfMatchingTag);
         this.on(document, events.search.perform, this.addSearchingClass);
         this.on(document, events.search.empty, this.removeSearchingClass);
       });
 
       this.renderAndAttach = function (parent, data) {
-        var rendered = this.viewFor(data.tag, templates.tags.tag);
+        var rendered = this.viewFor(data.tag, templates.tags.tag, data.currentTag);
         parent.append(rendered);
         this.initialize('#tag-' + this.hashIdent(data.tag.ident), data);
         this.on(parent, events.tags.teardown, this.teardown);
diff --git a/web-ui/app/js/tags/ui/tag_base.js b/web-ui/app/js/tags/ui/tag_base.js
index 9b2a06a9..9dc1ccbb 100644
--- a/web-ui/app/js/tags/ui/tag_base.js
+++ b/web-ui/app/js/tags/ui/tag_base.js
@@ -34,6 +34,33 @@ define(['views/i18n', 'page/events'], function(i18n, events) {
       return _.include(TOTAL_BADGE, tag.name) ? 'total' : 'unread';
     };
 
+    this.doUnselect = function () {
+      this.$node.removeClass('selected');
+    };
+
+    this.doSelect = function () {
+      this.$node.addClass('selected');
+    };
+
+    this.selectTag = function (ev, data) {
+      this.attr.currentTag = data.tag;
+      if (data.tag === this.attr.tag.name) {
+        this.doSelect();
+      }
+      else {
+        this.doUnselect();
+      }
+    };
+
+    this.selectTagAll = function () {
+      this.selectTag(null, {tag: 'all'});
+    };
+
+    this.after('initialize', function () {
+      this.on(document, events.ui.tag.select, this.selectTag);
+      this.on(document, events.search.perform, this.selectTagAll);
+      this.on(document, events.search.empty, this.selectTagAll);
+    });
   }
 
   return tagBase;
diff --git a/web-ui/app/js/tags/ui/tag_list.js b/web-ui/app/js/tags/ui/tag_list.js
index 850a5fab..0c483abb 100644
--- a/web-ui/app/js/tags/ui/tag_list.js
+++ b/web-ui/app/js/tags/ui/tag_list.js
@@ -20,10 +20,11 @@ define(
     'tags/ui/tag',
     'views/templates',
     'page/events',
-    'tags/ui/tag_shortcut'
+    'tags/ui/tag_shortcut',
+    'page/router/url_params'
   ],
 
-  function(defineComponent, Tag, templates, events, TagShortcut) {
+  function(defineComponent, Tag, templates, events, TagShortcut, urlParams) {
     'use strict';
 
     var ICON_FOR = {
@@ -55,13 +56,13 @@ define(
       });
 
       this.renderShortcut = function (tag, tagComponent) {
-        return TagShortcut.appendedTo($('#tags-shortcuts'), { linkTo: tag, trigger: tagComponent});
+        return TagShortcut.appendedTo($('#tags-shortcuts'), { tag: tag, trigger: tagComponent, currentTag: this.getCurrentTag()});
       };
 
       function renderTag(tag, defaultList, customList) {
         var list = tag.default ? defaultList : customList;
 
-        var tagComponent = Tag.appendedTo(list, {tag: tag});
+        var tagComponent = Tag.appendedTo(list, {tag: tag, currentTag: this.getCurrentTag()});
         if (_.contains(_.keys(ORDER), tag.name)) {
           tagComponent.attr.shortcut = this.renderShortcut(tag, tagComponent);
         }
@@ -84,20 +85,23 @@ define(
         var defaultList = this.select('defaultTagList');
         var customList = this.select('customTagList');
 
-        resetTagList.bind(this, [defaultList, customList]).call();
+        resetTagList.call(this, [defaultList, customList]);
         this.resetShortcuts();
 
         tags.forEach(function (tag) {
-          renderTag.bind(this, tag, defaultList, customList).call();
+          renderTag.call(this, tag, defaultList, customList);
         }.bind(this));
       };
 
-      this.loadTagList = function(ev, data) {
+      this.displayTags = function(ev, data) {
         this.renderTagList(_.sortBy(data.tags, tagOrder));
-        this.trigger(document, events.ui.tags.loaded, { tag: this.attr.currentTag, skipMailListRefresh: data.skipMailListRefresh});
       };
 
-      this.saveTag = function(ev, data) {
+      this.getCurrentTag = function () {
+        return this.attr.currentTag || urlParams.getTag();
+      };
+
+      this.updateCurrentTag = function(ev, data) {
         this.attr.currentTag = data.tag;
       };
 
@@ -106,8 +110,8 @@ define(
       };
 
       this.after('initialize', function() {
-        this.on(document, events.ui.tagList.load, this.loadTagList);
-        this.on(document, events.ui.tag.selected, this.saveTag);
+        this.on(document, events.tags.received, this.displayTags);
+        this.on(document, events.ui.tag.select, this.updateCurrentTag);
         this.renderTagListTemplate();
       });
     }
diff --git a/web-ui/app/js/tags/ui/tag_shortcut.js b/web-ui/app/js/tags/ui/tag_shortcut.js
index 0fe92550..b5b76825 100644
--- a/web-ui/app/js/tags/ui/tag_shortcut.js
+++ b/web-ui/app/js/tags/ui/tag_shortcut.js
@@ -38,24 +38,25 @@ define(
 
     function tagShortcut() {
 
-      this.renderTemplate = function (linkTo) {
+      this.renderTemplate = function (tag, currentTag) {
         var model = {
-          tagName: linkTo.name,
-          displayBadge: this.displayBadge(linkTo),
-          badgeType: this.badgeType(linkTo),
-          count: this.badgeType(linkTo) === 'total' ? linkTo.counts.total : (linkTo.counts.total - linkTo.counts.read),
-          icon: iconFor[linkTo.name]
+          tagName: tag.name,
+          displayBadge: this.displayBadge(tag),
+          badgeType: this.badgeType(tag),
+          count: this.badgeType(tag) === 'total' ? tag.counts.total : (tag.counts.total - tag.counts.read),
+          icon: iconFor[tag.name],
+          selected: tag.name === currentTag ? 'selected' : ''
         };
         return templates.tags.shortcut(model);
       };
 
       this.renderAndAttach = function (parent, options) {
-        parent.append(this.renderTemplate(options.linkTo));
+        parent.append(this.renderTemplate(options.tag, options.currentTag));
         this.initialize(parent.children().last(), options);
       };
 
       this.reRender = function () {
-        this.$node.html(this.renderTemplate(this.attr.linkTo));
+        this.$node.html(this.renderTemplate(this.attr.tag, this.attr.currentTag));
       };
 
       var iconFor = {
@@ -66,23 +67,6 @@ define(
         'all': 'archive'
       };
 
-      this.selectTag = function (ev, data) {
-        if (data.tag === this.attr.linkTo.name) {
-          this.doSelect();
-        }
-        else {
-          this.doUnselect();
-        }
-      };
-
-      this.doUnselect = function () {
-        this.$node.removeClass('selected');
-      };
-
-      this.doSelect = function () {
-        this.$node.addClass('selected');
-      };
-
       this.doTeardown = function () {
         if (!jQuery.contains(document, this.$node[0])) {
           this.teardown();
@@ -93,7 +77,6 @@ define(
         this.on('click', function () {
           this.attr.trigger.triggerSelect();
         });
-        this.on(document, events.ui.tag.select, this.selectTag);
         this.on(document, events.tags.shortcuts.teardown, this.doTeardown);
       });
 
diff --git a/web-ui/app/templates/tags/shortcut.hbs b/web-ui/app/templates/tags/shortcut.hbs
index 49ddfdb2..5fa32320 100644
--- a/web-ui/app/templates/tags/shortcut.hbs
+++ b/web-ui/app/templates/tags/shortcut.hbs
@@ -1,4 +1,4 @@
-<li>
+<li class="{{ selected }}">
   <a title="{{ tagName }}">
     {{#if displayBadge }}
         <span class="{{ badgeType }}-count">{{ count }}</span>
@@ -6,4 +6,4 @@
       <i class="fa fa-{{ icon }}"></i>
       <div class="shortcut-label">{{ tagName }}</div>
   </a>
-</li>
\ No newline at end of file
+</li>
diff --git a/web-ui/app/templates/tags/tag.hbs b/web-ui/app/templates/tags/tag.hbs
index c645f782..a7b02e21 100644
--- a/web-ui/app/templates/tags/tag.hbs
+++ b/web-ui/app/templates/tags/tag.hbs
@@ -1,3 +1,3 @@
-<li id="tag-{{ ident }}">
+<li id="tag-{{ ident }}" class="{{ selected }}">
   {{> tag_inner }}
 </li>