input history

public/css/main.css

@@ -654,6 +654,18 @@ body {
 .topicbar .irc-fg15 {
   color: #d3d3d3;
 }
+.message .irc-bold,
+.topicbar .irc-bold {
+  font-weight: bold;
+}
+.message .irc-italic,
+.topicbar .irc-italic {
+  font-style: italic;
+}
+.message .irc-underline,
+.topicbar .irc-underline {
+  text-decoration: underline;
+}
 @media all and (max-width: 600px) {
   .vnicks .nicklist {
     display: none !important;

public/js/main.js

@@ -957,6 +957,7 @@ class IRCConnector {
 class InputHandler {
 	constructor() {
 		this.history = [];
+		this.historyCaret = 0;
 
 		clientdom.input.onkeyup = (evt) => {
 			let key = evt.keyCode || evt.which || evt.charCode || 0;
@@ -965,6 +966,44 @@ class InputHandler {
 			}
 		}
 
+		clientdom.input.onkeydown = (evt) => {
+			let key = evt.keyCode || evt.which || evt.charCode || 0;
+			if(key == 38) {
+				if(this.historyCaret <= 0) {
+					this.historyCaret = 0;
+				} else {
+					this.historyCaret -= 1;
+				}
+
+				let selection = this.history[this.historyCaret];
+
+				if(selection) {
+					clientdom.input.value = selection;
+					clientdom.input.selectionStart = selection.length;
+					clientdom.input.selectionEnd = selection.length;
+				}
+
+				return false;
+			} else if(key == 40) {
+				if(this.historyCaret >= this.history.length) {
+					this.historyCaret = this.history.length;
+				} else {
+					this.historyCaret += 1;
+				}
+
+				let selection = this.history[this.historyCaret]
+
+				if(!this.history[this.historyCaret])
+					selection = '';
+
+				clientdom.input.selectionStart = selection.length;
+				clientdom.input.selectionEnd = selection.length;
+				clientdom.input.value = selection;
+
+				return false;
+			}
+		}
+
 		clientdom.send.onclick = (e) => {
 			this.handleInput();
 		}
@@ -1063,6 +1102,7 @@ class InputHandler {
 		}
 
 		this.history.push(inp);
+		this.historyCaret = this.history.length;
 		clientdom.input.value = "";
 	}
 

public/main.styl

@@ -472,6 +472,12 @@ body
         color: grey
     .irc-fg15 
         color: lightgrey
+    .irc-bold
+        font-weight: bold
+    .irc-italic
+        font-style: italic
+    .irc-underline
+        text-decoration: underline
 
 @media all and (max-width: 600px)
     .vnicks