Merge pull request #223 from pixelated-project/refactoring-events

Refactoring events on web-ui left-pane

26 files changed, 221 insertions, 260 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..3b0c23fb 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: _.keys(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..dfedb137 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,8 @@ 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.removeSearchingClass();
       };
 
       this.addSearchingClass = function() {
@@ -112,14 +98,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>
diff --git a/web-ui/package.json b/web-ui/package.json
index 4f18251f..f32794e2 100644
--- a/web-ui/package.json
+++ b/web-ui/package.json
@@ -20,6 +20,7 @@
   },
   "scripts": {
     "test": "npm run clean && npm run handlebars && node_modules/karma/bin/karma start --single-run --browsers PhantomJS $GRUNT_OPTS",
+    "debug": "npm run clean && npm run handlebars && node_modules/karma/bin/karma start --browsers Chrome $GRUNT_OPTS",
     "watch-test": "node_modules/karma/bin/karma start",
     "handlebars": "mkdir -p app/js/generated/hbs/ && handlebars app/templates/**/*.hbs > app/js/generated/hbs/templates.js --namespace=window.Pixelated --root .",
     "compass": "compass compile",
diff --git a/web-ui/test/features.js b/web-ui/test/features.js
index 29c6d87d..83d567d8 100644
--- a/web-ui/test/features.js
+++ b/web-ui/test/features.js
@@ -9,6 +9,9 @@ define([], function() {
     },
     getLogoutUrl: function() {
       return '/test/logout/url';
+    },
+    isAutoRefreshEnabled: function() {
+      return true;
     }
   };
 });
diff --git a/web-ui/test/spec/dispatchers/left_pane_dispatcher.spec.js b/web-ui/test/spec/dispatchers/left_pane_dispatcher.spec.js
index df8169c6..a8b4946c 100644
--- a/web-ui/test/spec/dispatchers/left_pane_dispatcher.spec.js
+++ b/web-ui/test/spec/dispatchers/left_pane_dispatcher.spec.js
@@ -28,14 +28,6 @@ describeComponent('dispatchers/left_pane_dispatcher', function () {
       expect(pushStateEvent).toHaveBeenTriggeredOn(document, { tag: 'inbox'});
     });
 
-    it('fetches mails by tag when a tag is selected', function () {
-      var fetchByTagEvent = spyOnEvent(document, Pixelated.events.ui.mails.fetchByTag);
-
-      $(document).trigger(Pixelated.events.ui.tag.selected, { tag: 'Drafts'});
-
-      expect(fetchByTagEvent).toHaveBeenTriggeredOn(document, { tag: 'Drafts'});
-    });
-
     it('doesnt fetch mails by tag when skipMailListRefresh is sent on tag.selected', function () {
       var fetchByTagEvent = spyOnEvent(document, Pixelated.events.ui.mails.fetchByTag);
 
@@ -51,29 +43,5 @@ describeComponent('dispatchers/left_pane_dispatcher', function () {
 
       expect(tagWantEvent).toHaveBeenTriggeredOn(document);
     });
-
-    it('fires tagLoad when the tags are received', function () {
-      var tagListLoadEvent = spyOnEvent(document, Pixelated.events.ui.tagList.load);
-
-      this.$node.trigger(Pixelated.events.tags.received, { tags: ['tags']});
-
-      expect(tagListLoadEvent).toHaveBeenTriggeredOn(document, { tags: ['tags']});
-    });
-
-    it('on tags loaded selects the inbox tag if no data is provided', function () {
-      var selectTagEvent = spyOnEvent(document, Pixelated.events.ui.tag.select);
-
-      $(document).trigger(Pixelated.events.ui.tags.loaded, {});
-
-      expect(selectTagEvent).toHaveBeenTriggeredOnAndWith(document, { tag: 'inbox' });
-    });
-
-    it('on tags loaded selects the a different tag if tag is provided', function () {
-      var selectTagEvent = spyOnEvent(document, Pixelated.events.ui.tag.select);
-
-      $(document).trigger(Pixelated.events.ui.tags.loaded, { tag: 'Drafts' });
-
-      expect(selectTagEvent).toHaveBeenTriggeredOnAndWith(document, { tag: 'Drafts' });
-    });
   });
 });
diff --git a/web-ui/test/spec/mail_list/ui/mail_list.spec.js b/web-ui/test/spec/mail_list/ui/mail_list.spec.js
index 003830de..095a2a61 100644
--- a/web-ui/test/spec/mail_list/ui/mail_list.spec.js
+++ b/web-ui/test/spec/mail_list/ui/mail_list.spec.js
@@ -83,17 +83,6 @@ describeComponent('mail_list/ui/mail_list', function () {
       expect(mailHereCheckedEvent).toHaveBeenTriggeredOnAndWith(caller, { checkedMails: mailList });
     });
 
-    it('returns every checked mail when the curent tag is "all"', function () {
-      var caller = {};
-      this.component.attr.checkedMails = mailList;
-      this.component.attr.currentTag = 'all';
-      var mailHereCheckedEvent = spyOnEvent(caller, Pixelated.events.ui.mail.hereChecked);
-
-      $(document).trigger(Pixelated.events.ui.mail.wantChecked, caller);
-
-      expect(mailHereCheckedEvent).toHaveBeenTriggeredOnAndWith(caller, { checkedMails: mailList });
-    });
-
     it('returns an empty list to whomever requests the checked mails if there are no checked mails with the current tag', function () {
       var caller = {};
       var mailHereCheckedEvent = spyOnEvent(caller, Pixelated.events.ui.mail.hereChecked);
@@ -115,22 +104,13 @@ describeComponent('mail_list/ui/mail_list', function () {
       expect(this.component.attr.checkedMails).toEqual({'2': {}, '3': {} });
     });
 
-    it ('does not check the all checkbox if no mail checked has the current tag', function () {
-      var setCheckAllCheckboxEvent = spyOnEvent(document, Pixelated.events.ui.mails.hasMailsChecked);
-      this.component.attr.currentTag = 'inbox';
-
-      $(document).trigger(Pixelated.events.ui.mail.checked, {mail : {'1' : {tags: ['different']}}});
-
-      expect(setCheckAllCheckboxEvent).toHaveBeenTriggeredOnAndWith(document, false);
-    });
-
     it('checks the check all checkbox if at least one mail is checked with the current tag', function () {
       var setCheckAllCheckboxEvent = spyOnEvent(document, Pixelated.events.ui.mails.hasMailsChecked);
       this.component.attr.currentTag = 'inbox';
 
       $(document).trigger(Pixelated.events.ui.mail.checked, {mail: mailList[0]});
 
-      expect(setCheckAllCheckboxEvent).toHaveBeenTriggeredOnAndWith(document, true);
+      expect(setCheckAllCheckboxEvent).toHaveBeenTriggeredOnAndWith(document, {hasMailsChecked: true});
     });
 
     it('unchecks the check all checkbox if no mail is left checked', function () {
@@ -140,7 +120,7 @@ describeComponent('mail_list/ui/mail_list', function () {
 
       $(document).trigger(Pixelated.events.ui.mail.unchecked, {mail: {ident: '1'}});
 
-      expect(setCheckAllCheckboxEvent).toHaveBeenTriggeredOnAndWith(document, false);
+      expect(setCheckAllCheckboxEvent).toHaveBeenTriggeredOnAndWith(document, {hasMailsChecked: false});
     });
   });
 
diff --git a/web-ui/test/spec/search/search_trigger.spec.js b/web-ui/test/spec/search/search_trigger.spec.js
index 1cc72847..845bdc7d 100644
--- a/web-ui/test/spec/search/search_trigger.spec.js
+++ b/web-ui/test/spec/search/search_trigger.spec.js
@@ -22,28 +22,6 @@ describeComponent('search/search_trigger', function () {
     expect(spy).toHaveBeenTriggeredOnAndWith(document, { query: 'tanana' });
   });
 
-  it('should select the "all" tag when submit occurs but should skip mail list refresh', function  (){
-    var tagSelectEvent = spyOnEvent(document, Pixelated.events.ui.tag.select);
-
-    submitSearch('tanana');
-
-    expect(tagSelectEvent).toHaveBeenTriggeredOnAndWith(document, {
-      tag: 'all',
-      skipMailListRefresh: true
-    });
-  });
-
-  it('should select the "all" tag when an empty submit occurs and shoud refresh mail list', function() {
-    var tagSelectEvent = spyOnEvent(document, Pixelated.events.ui.tag.select);
-    var emptySearchEvent = spyOnEvent(document, Pixelated.events.search.empty);
-
-    submitSearch('');
-
-    expect(emptySearchEvent).toHaveBeenTriggeredOn(document);
-    expect(tagSelectEvent).toHaveBeenTriggeredOnAndWith(document, { tag: 'all'});
-
-  });
-
   it('should clear input when selecting a new tag', function(){
     submitSearch('tanana');
     $(document).trigger(Pixelated.events.ui.tag.selected, { tag: 'inbox'});
diff --git a/web-ui/test/spec/services/mail_service.spec.js b/web-ui/test/spec/services/mail_service.spec.js
index 7e95f20a..2de4e76b 100644
--- a/web-ui/test/spec/services/mail_service.spec.js
+++ b/web-ui/test/spec/services/mail_service.spec.js
@@ -36,7 +36,7 @@ describeComponent('services/mail_service', function () {
 
       uncheckedEmailsEvent = spyOnEvent(document, Pixelated.events.ui.mail.unchecked);
       setCheckAllEvent = spyOnEvent(document, Pixelated.events.ui.mails.hasMailsChecked);
-      spyOn(this.component, 'refreshResults');
+      spyOn(this.component, 'refreshMails');
 
       this.component.trigger(Pixelated.events.mail.read, {checkedMails: checkedMails});
     });
@@ -48,7 +48,7 @@ describeComponent('services/mail_service', function () {
 
     it('will trigger that a message has been deleted when it is done deleting', function() {
       deferred.resolve(checkedMails);
-      expect(this.component.refreshResults).toHaveBeenCalled();
+      expect(this.component.refreshMails).toHaveBeenCalled();
     });
 
     it('unchecks read emails', function () {
@@ -90,14 +90,13 @@ describeComponent('services/mail_service', function () {
   });
 
   it('updates the tags of the desired message', function () {
-    spyOn(this.component, 'refreshResults');
+    spyOn(this.component, 'refreshMails');
     var updateTagsReturnValue = { tags: ['website'], mailbox: 'inbox'};
     var deferred = $.Deferred();
     var spyAjax = spyOn($, 'ajax').and.returnValue(deferred);
 
     var spyEvent = spyOnEvent(document, Pixelated.events.mail.tags.updated);
     var component = jasmine.createSpyObj('component',['successUpdateTags']);
-    spyOn(this.component, 'fetchMail');
 
     this.component.trigger(Pixelated.events.mail.tags.update, { ident: email1.ident, tags: email1.tags });
 
@@ -106,7 +105,7 @@ describeComponent('services/mail_service', function () {
     expect(spyEvent).toHaveBeenTriggeredOn(document);
     expect(spyAjax.calls.all()[0].args[0]).toEqual('/mail/1/tags');
     expect(spyAjax.calls.all()[0].args[1].data).toEqual(JSON.stringify({ newtags: email1.tags } ));
-    expect(this.component.refreshResults).toHaveBeenCalled();
+    expect(this.component.refreshMails).toHaveBeenCalled();
   });
 
   it('triggers an error message when it can\'t update the tags', function () {
@@ -141,7 +140,7 @@ describeComponent('services/mail_service', function () {
       uncheckedEmailsEvent = spyOnEvent(document, Pixelated.events.ui.mail.unchecked);
       setCheckAllEvent = spyOnEvent(document, Pixelated.events.ui.mails.hasMailsChecked);
       mailsDeletedEvent = spyOnEvent(document, Pixelated.events.mail.deleted);
-      spyOn(this.component, 'refreshResults');
+      spyOn(this.component, 'refreshMails');
 
       this.component.triggerDeleted({
         successMessage: 'A success message',
@@ -150,7 +149,7 @@ describeComponent('services/mail_service', function () {
     });
 
     it('will trigger that a message has been deleted when it is done deleting', function() {
-      expect(this.component.refreshResults).toHaveBeenCalled();
+      expect(this.component.refreshMails).toHaveBeenCalled();
     });
 
     it('displays a success message', function () {
@@ -187,7 +186,7 @@ describeComponent('services/mail_service', function () {
 
     var deferred = $.Deferred();
     var spyAjax = spyOn($, 'ajax').and.returnValue(deferred);
-    this.component.trigger(Pixelated.events.ui.mails.fetchByTag, {tag: 'inbox'});
+    this.component.trigger(Pixelated.events.ui.tag.selected, {tag: 'inbox'});
 
     deferred.resolve({stats: {}, mails: [email1]});
 
@@ -199,25 +198,11 @@ describeComponent('services/mail_service', function () {
   it('wraps the tag in quotes before fetching by tag (to support tags with spaces)', function () {
     spyOn($, 'ajax').and.returnValue($.Deferred());
 
-    this.component.trigger(Pixelated.events.ui.mails.fetchByTag, {tag: 'new tag'});
+    this.component.trigger(Pixelated.events.ui.tag.selected, {tag: 'new tag'});
 
     expect($.ajax.calls.mostRecent().args[0]).toContain(encodeURIComponent('tag:"new tag"'));
   });
 
-  it('sends the previous tag when mails:refresh is called without a tag (this happens when the refresher calls it)', function () {
-    var eventSpy = spyOnEvent(document, Pixelated.events.mails.availableForRefresh);
-    this.component.attr.currentTag = 'sent';
-
-    var deferred = $.Deferred();
-    var spyAjax = spyOn($, 'ajax').and.returnValue(deferred);
-    this.component.trigger(Pixelated.events.ui.mails.refresh);
-
-    deferred.resolve({stats: {}, mails: [email1]});
-
-    expect(eventSpy.mostRecentCall.data.tag).toEqual('sent');
-    expect(eventSpy.mostRecentCall.data.stats).toEqual({});
-  });
-
   describe('pagination', function() {
     var pageChangedEvent;
     var deferred;
@@ -226,7 +211,7 @@ describeComponent('services/mail_service', function () {
       pageChangedEvent = spyOnEvent(document, Pixelated.events.ui.page.changed);
       deferred = $.Deferred();
       var spyAjax = spyOn($, 'ajax').and.returnValue(deferred);
-      spyOn(this.component, 'fetchMail').and.callThrough();
+      spyOn(this.component, 'refreshMails').and.callThrough();
     });
 
     it('changes to the previous page and refetch email when ui:page:previous is fired', function() {
@@ -234,7 +219,7 @@ describeComponent('services/mail_service', function () {
 
       this.component.trigger(Pixelated.events.ui.page.previous);
 
-      expect(this.component.fetchMail).toHaveBeenCalled();
+      expect(this.component.refreshMails).toHaveBeenCalled();
       expect(this.component.attr.currentPage).toEqual(1);
     });
 
@@ -243,7 +228,7 @@ describeComponent('services/mail_service', function () {
 
       this.component.trigger(Pixelated.events.ui.page.previous);
 
-      expect(this.component.fetchMail).not.toHaveBeenCalled();
+      expect(this.component.refreshMails).not.toHaveBeenCalled();
       expect(this.component.attr.currentPage).toEqual(1);
     });
 
@@ -253,7 +238,7 @@ describeComponent('services/mail_service', function () {
 
       this.component.trigger(Pixelated.events.ui.page.next);
 
-      expect(this.component.fetchMail).toHaveBeenCalled();
+      expect(this.component.refreshMails).toHaveBeenCalled();
       expect(this.component.attr.currentPage).toEqual(2);
     });
 
@@ -263,7 +248,7 @@ describeComponent('services/mail_service', function () {
 
       this.component.trigger(Pixelated.events.ui.page.next);
 
-      expect(this.component.fetchMail).not.toHaveBeenCalled();
+      expect(this.component.refreshMails).not.toHaveBeenCalled();
       expect(this.component.attr.currentPage).toEqual(9);
     });
 
@@ -286,7 +271,7 @@ describeComponent('services/mail_service', function () {
     it('resets currentPage when fetching mails by tag', function() {
       this.component.attr.numPages = 10;
       this.component.attr.currentPage = 999;
-      this.component.trigger(Pixelated.events.ui.mails.fetchByTag, {tag: 'inbox'});
+      this.component.trigger(Pixelated.events.ui.tag.selected, {tag: 'inbox'});
 
       expect(this.component.attr.currentPage).toEqual(1);
       expect(pageChangedEvent).toHaveBeenTriggeredOnAndWith(document, {currentPage: 1, numPages: 10});
@@ -302,10 +287,10 @@ describeComponent('services/mail_service', function () {
 
       it('should have 5 pages with a 100 results and w 20', function() {
         mailSetData.stats.total = 100;
-        this.component.attr.w = 20;
+        this.component.attr.pageSize = 20;
         this.component.attr.numPages = 0;
 
-        this.component.trigger(Pixelated.events.ui.mails.fetchByTag, {tag: 'another tag'});
+        this.component.trigger(Pixelated.events.ui.tag.selected, {tag: 'another tag'});
 
         deferred.resolve(mailSetData);
         expect(this.component.attr.numPages).toBe(5);
@@ -313,10 +298,10 @@ describeComponent('services/mail_service', function () {
 
       it('should have 6 pages with a 101 results and w 20', function() {
         mailSetData.stats.total = 101;
-        this.component.attr.w = 20;
+        this.component.attr.pageSize = 20;
         this.component.attr.numPages = 0;
 
-        this.component.trigger(Pixelated.events.ui.mails.fetchByTag, {tag: 'another tag'});
+        this.component.trigger(Pixelated.events.ui.tag.selected, {tag: 'another tag'});
 
         deferred.resolve(mailSetData);
         expect(this.component.attr.numPages).toBe(6);
diff --git a/web-ui/test/spec/tags/ui/tag.spec.js b/web-ui/test/spec/tags/ui/tag.spec.js
index 3bc0c7fc..36fc83f2 100644
--- a/web-ui/test/spec/tags/ui/tag.spec.js
+++ b/web-ui/test/spec/tags/ui/tag.spec.js
@@ -23,7 +23,6 @@ describeComponent('tags/ui/tag', function () {
 
       this.component.$node.click();
 
-      expect(this.component.attr.selected).toBeTruthy();
       expect(this.$node.attr('class')).toMatch('selected');
       expect(tagSelectEvent).toHaveBeenTriggeredOnAndWith(document, { tag: 'inbox' });
     });
@@ -94,6 +93,18 @@ describeComponent('tags/ui/tag', function () {
       $(document).trigger(Pixelated.events.mail.read, { tags: ['inbox']});
       expect(this.$node.html()).not.toMatch('"unread-count"');
     });
+
+    it('should not be selected when a search is performed', function() {
+      this.component.trigger(document, Pixelated.events.search.perform);
+
+      expect(this.component.$node).not.toHaveClass('selected');
+    });
+
+    it('should not be selected when the search is cleared', function() {
+      this.component.trigger(document, Pixelated.events.search.empty);
+
+      expect(this.component.$node).not.toHaveClass('selected');
+    });
   });
 
   describe('drafts tag', function () {
@@ -149,6 +160,17 @@ describeComponent('tags/ui/tag', function () {
       expect(this.$node.attr('class')).not.toMatch('searching');
     });
 
+    it('should be selected when a search is performed', function() {
+      this.component.trigger(document, Pixelated.events.search.perform);
+
+      expect(this.component.$node).toHaveClass('selected');
+    });
+
+    it('should be selected when the search is cleared', function() {
+      this.component.trigger(document, Pixelated.events.search.empty);
+
+      expect(this.component.$node).toHaveClass('selected');
+    });
   });
 
   _.each(['sent', 'trash'], function (tag_name) {
diff --git a/web-ui/test/spec/tags/ui/tag_list.spec.js b/web-ui/test/spec/tags/ui/tag_list.spec.js
index 72667b40..78bd84d9 100644
--- a/web-ui/test/spec/tags/ui/tag_list.spec.js
+++ b/web-ui/test/spec/tags/ui/tag_list.spec.js
@@ -27,7 +27,7 @@ describeComponent('tags/ui/tag_list', function () {
       this.component.attr.default = false;
       var tagList = [tag('tag1', 1), tag('tag2', 2), tag('tag3', 3)];
 
-      $(document).trigger(Pixelated.events.ui.tagList.load, {tags: tagList});
+      $(document).trigger(Pixelated.events.tags.received, {tags: tagList});
 
       var items = _.map(this.$node.find('li'), function (el) {
         return $(el).attr('id');
@@ -39,7 +39,7 @@ describeComponent('tags/ui/tag_list', function () {
     it('should render the default tags when tagsList:load is received and default attribute is true', function () {
       var tagList = [tag('tag1', 1, false), tag('tag2', 2, true), tag('tag3', 3, true)];
 
-      $(document).trigger(Pixelated.events.ui.tagList.load, {tags: tagList});
+      $(document).trigger(Pixelated.events.tags.received, {tags: tagList});
 
       var items = _.map(this.component.select('defaultTagList').find('li'), function (el) {
         return $(el).attr('id');
@@ -51,7 +51,7 @@ describeComponent('tags/ui/tag_list', function () {
     it('should render the custom tags when tagsList:load is received and default attribute is false', function () {
       var tagList = [tag('tag1', 1, false), tag('tag2', 2, true), tag('tag3', 3, true)];
 
-      $(document).trigger(Pixelated.events.ui.tagList.load, {tags: tagList});
+      $(document).trigger(Pixelated.events.tags.received, {tags: tagList});
 
       var items = _.map(this.component.select('customTagList').find('li'), function (el) {
         return $(el).attr('id');
@@ -60,35 +60,18 @@ describeComponent('tags/ui/tag_list', function () {
       expect(items).toEqual(['tag-1']);
     });
 
-    it('should trigger event to tell that tags were loaded sending the current tag', function () {
-      this.component.attr.currentTag = 'Drafts';
-      var tagsLoadedEvent = spyOnEvent(document, Pixelated.events.ui.tags.loaded);
-
-      $(document).trigger(Pixelated.events.ui.tagList.load, {tags: [] });
-
-      expect(tagsLoadedEvent).toHaveBeenTriggeredOnAndWith(document, { tag: 'Drafts'});
-    });
-
-    it('should send tag as undefined when tags are loaded and no tag was selected yet', function () {
-      var tagsLoadedEvent = spyOnEvent(document, Pixelated.events.ui.tags.loaded);
-
-      $(document).trigger(Pixelated.events.ui.tagList.load, {tags: [] });
-
-      expect(tagsLoadedEvent).toHaveBeenTriggeredOnAndWith(document, jasmine.objectContaining({ tag: undefined }));
-    });
-
     it('should save the current tag when a tag is selected', function () {
-      $(document).trigger(Pixelated.events.ui.tag.selected, { tag: 'amazing'});
+      $(document).trigger(Pixelated.events.ui.tag.select, { tag: 'amazing'});
 
       expect(this.component.attr.currentTag).toEqual('amazing');
     });
 
     it('resets the tag lists when loading tags', function () {
       var tagList = [tag('tag1', 1, false), tag('tag2', 2, true), tag('tag3', 3, true)];
-      $(document).trigger(Pixelated.events.ui.tagList.load, {tags: tagList});
+      $(document).trigger(Pixelated.events.tags.received, {tags: tagList});
 
       tagList = [tag('tag1', 1, false), tag('tag2', 2, true)];
-      $(document).trigger(Pixelated.events.ui.tagList.load, {tags: tagList});
+      $(document).trigger(Pixelated.events.tags.received, {tags: tagList});
 
       var customTags = _.map(this.component.select('customTagList').find('li'), function (el) {
         return $(el).attr('id');
@@ -103,10 +86,10 @@ describeComponent('tags/ui/tag_list', function () {
 
     it('resets the tag shortcuts when loading tags', function () {
       var tagList = [tag('inbox', 1, true)];
-      $(document).trigger(Pixelated.events.ui.tagList.load, {tags: tagList});
+      $(document).trigger(Pixelated.events.tags.received, {tags: tagList});
 
       tagList = [tag('sent', 1, true)];
-      $(document).trigger(Pixelated.events.ui.tagList.load, {tags: tagList});
+      $(document).trigger(Pixelated.events.tags.received, {tags: tagList});
 
       var shortcuts = _.map($('#tags-shortcuts').find('li'), function (el) {
         return $(el).text().trim();
@@ -120,7 +103,7 @@ describeComponent('tags/ui/tag_list', function () {
       var tagsTeardownDefault = spyOnEvent(this.component.select('defaultTagList'), Pixelated.events.tags.teardown);
       var tagsShortcutsTeardown = spyOnEvent(document, Pixelated.events.tags.shortcuts.teardown);
 
-      $(document).trigger(Pixelated.events.ui.tagList.load, {tags: []});
+      $(document).trigger(Pixelated.events.tags.received, {tags: []});
 
       expect(tagsTeardownCustom).toHaveBeenTriggeredOn(this.component.select('customTagList'));
       expect(tagsTeardownDefault).toHaveBeenTriggeredOn(this.component.select('defaultTagList'));
diff --git a/web-ui/test/spec/tags/ui/tag_shortcut.spec.js b/web-ui/test/spec/tags/ui/tag_shortcut.spec.js
index 7f015319..d1c7939a 100644
--- a/web-ui/test/spec/tags/ui/tag_shortcut.spec.js
+++ b/web-ui/test/spec/tags/ui/tag_shortcut.spec.js
@@ -12,7 +12,7 @@ describeComponent('tags/ui/tag_shortcut', function () {
     component = jasmine.createSpyObj('tagComponent', ['triggerSelect']);
     parent = $('<ul>');
     $('body').append(parent);
-    shortcut = TagShortcut.appendedTo(parent, { linkTo: { name: 'inbox', counts: { total: 15 }}, trigger: component });
+    shortcut = TagShortcut.appendedTo(parent, { tag: { name: 'inbox', counts: { total: 15 }}, trigger: component });
   });
 
   afterEach(function () {
@@ -43,7 +43,7 @@ describeComponent('tags/ui/tag_shortcut', function () {
 
   it('teardown shortcuts on event but only if they are not in the DOM', function () {
     parent.empty();
-    var shortcutAddedAfterEmptyingParent = TagShortcut.appendedTo(parent, { linkTo: { name: 'inbox', counts: { total: 15 }}, trigger: component });
+    var shortcutAddedAfterEmptyingParent = TagShortcut.appendedTo(parent, { tag: { name: 'inbox', counts: { total: 15 }}, trigger: component });
     // by now shorcut is not in the DOM anymore but shortcutAddedAfterEmptyingParent is
 
     spyOn(shortcut, 'teardown').and.callThrough();