Open notification on new highlight

components/app.js

@@ -168,12 +168,34 @@ export default class App extends Component {
 
 		var msgUnread = Unread.NONE;
 		if (msg.command == "PRIVMSG" || msg.command == "NOTICE") {
+			var target = msg.params[0];
 			var text = msg.params[1];
+
+			var kind;
 			if (msg.prefix.name != this.client.nick && irc.isHighlight(text, this.client.nick)) {
 				msgUnread = Unread.HIGHLIGHT;
+				kind = "highlight";
+			} else if (target == this.client.nick) {
+				msgUnread = Unread.HIGHLIGHT;
+				kind = "private message";
 			} else {
 				msgUnread = Unread.MESSAGE;
 			}
+
+			if (msgUnread == Unread.HIGHLIGHT && window.Notification && Notification.permission === "granted") {
+				var title = "New " + kind + " from " + msg.prefix.name;
+				if (this.isChannel(target)) {
+					title += " in " + target;
+				}
+				var notif = new Notification(title, {
+					body: text,
+					requireInteraction: true,
+				});
+				notif.addEventListener("click", () => {
+					// TODO: scroll to message
+					this.switchBuffer(target);
+				});
+			}
 		}
 
 		if (msg.prefix.name != this.client.nick && msg.command != "PART") {

components/buffer.js

@@ -90,6 +90,44 @@ function LogLine(props) {
 	`;
 }
 
+class NotificationNagger extends Component {
+	state = { nag: false };
+
+	constructor(props) {
+		super(props);
+
+		this.handleClick = this.handleClick.bind(this);
+
+		this.state.nag = this.shouldNag();
+	}
+
+	shouldNag() {
+		return window.Notification && Notification.permission !== "granted" && Notification.permission !== "denied";
+	}
+
+	handleClick(event) {
+		event.preventDefault();
+
+		Notification.requestPermission((permission) => {
+			this.setState({ nag: this.shouldNag() });
+		});
+	}
+
+	render() {
+		if (!this.state.nag) {
+			return null;
+		}
+
+		return html`
+			<div class="logline">
+				<span class="timestamp">--:--:--</span>
+				${" "}
+				<a href="#" onClick=${this.handleClick}>Turn on desktop notifications</a> to get notified about new messages
+			</div>
+		`;
+	}
+}
+
 export default function Buffer(props) {
 	if (!props.buffer) {
 		return null;
@@ -97,6 +135,7 @@ export default function Buffer(props) {
 
 	return html`
 		<div class="logline-list">
+			<${NotificationNagger}/>
 			${props.buffer.messages.map((msg) => html`
 				<${LogLine} key=${msg.key} message=${msg} onNickClick=${props.onNickClick}/>
 			`)}