Let plugins register a navigation entry

A plugin that adds a screen has no way to offer a way into it. The
folder list toolbar holds Compose and Contacts, and nothing else can be
added to it, so plugins reach into the UI themselves: polling for an
existing button, replacing its icon and hanging a menu off it. That is
fragile, it varies per plugin, and it puts screens somewhere users do
not look for them.

rl.addNavEntry({icon, title, hash}) appends an entry to that toolbar,
rendered with the same .btn classes so it follows the active theme.
click may be given instead of hash for a popup rather than a route.

Three lines of template, one observableArray, one function, and no
change to existing behaviour when no plugin registers anything.

dev/Common/Plugins.js

@@ -1,3 +1,4 @@
+import ko from 'ko';
 import { settingsAddViewModel } from 'Screen/AbstractSettings';
 import { SettingsGet } from 'Common/Globals';
 import { AbstractViewPopup } from 'Knoin/AbstractViews';
@@ -15,6 +16,35 @@ rl.pluginRemoteRequest = (callback, action, parameters, timeout) => {
 	rl.app.Remote.request('Plugin' + action, callback, parameters, timeout);
 };
 
+/**
+ * Navigation entries contributed by plugins, rendered in the folder list
+ * toolbar beside Compose and Contacts.
+ * @type {Array}
+ */
+export const pluginNavEntries = ko.observableArray();
+
+/**
+ * Register a navigation entry for a screen a plugin provides.
+ *
+ * Without this a plugin that adds a screen has to reach into the folder list
+ * template itself, which several already do, each in its own way.
+ *
+ * @param {Object} entry
+ * @param {string} entry.icon  character or glyph shown on the button
+ * @param {string} entry.title tooltip
+ * @param {string=} entry.hash location hash to navigate to
+ * @param {Function=} entry.click called instead of setting the hash
+ */
+rl.addNavEntry = entry => {
+	if (entry && entry.icon) {
+		pluginNavEntries.push({
+			icon: entry.icon,
+			title: entry.title || '',
+			click: entry.click || (() => { hasher.setHash(entry.hash || ''); })
+		});
+	}
+};
+
 /**
  * @param {Function} SettingsViewModelClass
  * @param {string} labelName

dev/View/User/MailBox/FolderList.js

@@ -7,6 +7,7 @@ import { mailBox, settings } from 'Common/Links';
 import { addComputablesTo } from 'External/ko';
 
 import { AppUserStore } from 'Stores/User/App';
+import { pluginNavEntries } from 'Common/Plugins';
 import { SettingsUserStore } from 'Stores/User/Settings';
 import { FolderUserStore } from 'Stores/User/Folder';
 import { MessageUserStore } from 'Stores/User/Message';
@@ -36,6 +37,7 @@ export class MailFolderList extends AbstractViewLeft {
 		this.moveAction = moveAction;
 
 		this.allowContacts = AppUserStore.allowContacts();
+		this.pluginNavEntries = pluginNavEntries;
 
 		this.foldersFilter = foldersFilter;
 

snappymail/v/0.0.0/app/templates/Views/User/MailFolderList.html

@@ -5,6 +5,9 @@
 			<span class="buttonComposeText" data-i18n="FOLDER_LIST/BUTTON_NEW_MESSAGE"></span>
 		</a>
 		<a class="btn buttonContacts fontastic" data-bind="visible: allowContacts, click: contactsClick" data-i18n="[title]GLOBAL/CONTACTS">📇</a>
+		<!-- ko foreach: pluginNavEntries -->
+		<a class="btn buttonPluginNav fontastic" data-bind="text: icon, attr: { title: title }, click: click"></a>
+		<!-- /ko -->
 	</div>
 	<div class="b-content">
 		<ul class="b-folders-system" data-bind="foreach: systemFolders">