make accounts collapsable and show only important folders

css/mail.css

@@ -170,6 +170,14 @@
 .mail-account-email:first-child {
 	padding-top: 50px;
 }
+.account-toggle-collapse {
+	margin-left: 43px;
+	opacity: .2;
+	cursor: pointer;
+}
+.account-toggle-collapse:hover {
+	opacity: .5;
+}
 
 .mail-account-color {
 	display: inline-block;

js/templates/account.html

@@ -3,4 +3,7 @@
 {{/if}}
 <h2 class="mail-account-email" title="{{email}}">{{email}}</h2>
 <ul id="mail_folders" class="mail_folders with-icon" data-account_id="{{id}}">
-</ul>
+</ul>
+{{#unless isUnifiedInbox}}
+<span class="account-toggle-collapse">{{toggleCollapseMessage}}</span>
+{{/unless}}

js/views/account.js

@@ -5,7 +5,7 @@
  * later. See the COPYING file.
  *
  * @author Christoph Wurst <christoph@winzerhof-wurst.at>
- * @copyright Christoph Wurst 2015
+ * @copyright Christoph Wurst 2015, 2016
  */
 
 define(function(require) {
@@ -16,16 +16,43 @@ define(function(require) {
 	var FolderView = require('views/folder');
 	var AccountTemplate = require('text!templates/account.html');
 
+	var SHOW_COLLAPSED = Object.seal([
+		'inbox',
+		'flagged',
+		'drafts',
+	]);
+
 	return Backbone.Marionette.CompositeView.extend({
 		collection: null,
 		model: null,
 		template: Handlebars.compile(AccountTemplate),
+		templateHelpers: function() {
+			var toggleCollapseMessage = this.collapsed ? t('mail', 'Show all folders') : t('mail', 'Collapse folders');
+			return {
+				isUnifiedInbox: this.model.get('accountId') === -1,
+				toggleCollapseMessage: toggleCollapseMessage
+			};
+		},
+		collapsed: true,
+		events: {
+			'click .account-toggle-collapse': 'toggleCollapse'
+		},
 		childView: FolderView,
 		childViewContainer: '#mail_folders',
 		initialize: function(options) {
 			this.model = options.model;
 			this.collection = this.model.get('folders');
+		},
+		filter: function(child) {
+			if (!this.collapsed) {
+				return true;
+			}
+			var specialRole = child.get('specialRole');
+			return SHOW_COLLAPSED.indexOf(specialRole) !== -1;
+		},
+		toggleCollapse: function() {
+			this.collapsed = !this.collapsed;
+			this.render();
 		}
-
 	});
 });