Add messaging widget

src/web/app/common/mixins/index.ts

@@ -4,6 +4,7 @@ import activateMe from './i';
 import activateApi from './api';
 import ServerStreamManager from '../scripts/server-stream-manager';
 import RequestsStreamManager from '../scripts/requests-stream-manager';
+import MessagingIndexStream from '../scripts/messaging-index-stream-manager';
 
 export default (me, stream) => {
 	activateMe(me);
@@ -13,4 +14,5 @@ export default (me, stream) => {
 
 	(riot as any).mixin('server-stream', { serverStream: new ServerStreamManager() });
 	(riot as any).mixin('requests-stream', { requestsStream: new RequestsStreamManager() });
+	(riot as any).mixin('messaging-index-stream', { messagingIndexStream: new MessagingIndexStream(me) });
 };

src/web/app/common/scripts/messaging-index-stream-manager.ts

@@ -0,0 +1,20 @@
+import StreamManager from './stream-manager';
+import Connection from './messaging-index-stream';
+
+export default class ServerStreamManager extends StreamManager<Connection> {
+	private me;
+
+	constructor(me) {
+		super();
+
+		this.me = me;
+	}
+
+	public getConnection() {
+		if (this.connection == null) {
+			this.connection = new Connection(this.me);
+		}
+
+		return this.connection;
+	}
+}

src/web/app/common/scripts/messaging-index-stream.ts

@@ -0,0 +1,14 @@
+import Stream from './stream';
+
+/**
+ * Messaging index stream connection
+ */
+class Connection extends Stream {
+	constructor(me) {
+		super('messaging-index', {
+			i: me.token
+		});
+	}
+}
+
+export default Connection;

src/web/app/common/tags/messaging/index.tag

@@ -1,5 +1,5 @@
-<mk-messaging>
-	<div class="search">
+<mk-messaging data-compact={ opts.compact }>
+	<div class="search" if={ !opts.compact }>
 		<div class="form">
 			<label for="search-input"><i class="fa fa-search"></i></label>
 			<input ref="search" type="search" oninput={ search } onkeydown={ onSearchKeydown } placeholder="%i18n:common.tags.mk-messaging.search-user%"/>
@@ -36,6 +36,31 @@
 		:scope
 			display block
 
+			&[data-compact]
+				font-size 0.8em
+
+				> .history
+					> a
+						&:last-child
+							border-bottom none
+
+						&:not([data-is-me]):not([data-is-read])
+							> div
+								background-image none
+								border-left solid 4px #3aa2dc
+
+						> div
+							padding 16px
+
+							> header
+								> mk-time
+									font-size 1em
+
+							> .avatar
+								width 42px
+								height 42px
+								margin 0 12px 0 0
+
 			> .search
 				display block
 				position -webkit-sticky
@@ -75,7 +100,7 @@
 
 					> input
 						margin 0
-						padding 0 12px 0 38px
+						padding 0 0 0 38px
 						width 100%
 						font-size 1em
 						line-height 38px
@@ -299,22 +324,59 @@
 		this.mixin('i');
 		this.mixin('api');
 
+		this.mixin('messaging-index-stream');
+		this.connection = this.messagingIndexStream.getConnection();
+		this.connectionId = this.messagingIndexStream.use();
+
 		this.searchResult = [];
 
+		this.registerMessage = message => {
+			message.is_me = message.user_id == this.I.id;
+			message._click = () => {
+				this.trigger('navigate-user', message.is_me ? message.recipient : message.user);
+			};
+		};
+
 		this.on('mount', () => {
+			this.connection.on('message', this.onMessage);
+			this.connection.on('read', this.onRead);
+
 			this.api('messaging/history').then(history => {
 				this.isLoading = false;
 				history.forEach(message => {
-					message.is_me = message.user_id == this.I.id
-					message._click = () => {
-						this.trigger('navigate-user', message.is_me ? message.recipient : message.user);
-					};
+					this.registerMessage(message);
 				});
 				this.history = history;
 				this.update();
 			});
 		});
 
+		this.on('unmount', () => {
+			this.connection.off('message', this.onMessage);
+			this.connection.off('read', this.onRead);
+			this.messagingIndexStream.dispose(this.connectionId);
+		});
+
+		this.onMessage = message => {
+			this.history = this.history.filter(m => !(
+				(m.recipient_id == message.recipient_id && m.user_id == message.user_id) ||
+				(m.recipient_id == message.user_id && m.user_id == message.recipient_id)));
+
+			this.registerMessage(message);
+
+			this.history.unshift(message);
+			this.update();
+		};
+
+		this.onRead = ids => {
+			ids.forEach(id => {
+				const found = this.history.find(m => m.id == id);
+				if (found) found.is_read = true;
+			});
+
+			this.update();
+		};
+
 		this.search = () => {
 			const q = this.refs.search.value;
 			if (q == '') {