Add away indicator

components/app.js

@@ -327,6 +327,14 @@ export default class App extends Component {
 			this.setBufferState(channel, { topic });
 			this.addMessage(channel, msg);
 			break;
+		case "AWAY":
+			var awayMessage = msg.params[0];
+
+			this.setBufferState(msg.prefix.name, (buf) => {
+				var who = { ...buf.who, away: !!awayMessage };
+				return { who };
+			});
+			break;
 		case "CAP":
 		case "AUTHENTICATE":
 			// Ignore these

components/buffer-header.js

@@ -15,7 +15,16 @@ export default function BufferHeader(props) {
 		description = props.buffer.topic;
 	} else if (props.buffer.who) {
 		var who = props.buffer.who;
-		description = `${who.realname} (${who.username}@${who.hostname})`;
+
+		var statusClass = "here";
+		var statusText = "User is online";
+		if (who.away) {
+			statusClass = "gone";
+			statusText = "User is away";
+		}
+		var status = html`<span class="status status-${statusClass}" title=${statusText}>●</span>`;
+
+		description = html`${status} ${who.realname} (${who.username}@${who.hostname})`;
 	}
 
 	var closeText = "Close";

lib/client.js

@@ -2,7 +2,7 @@ import * as irc from "./irc.js";
 
 // Static list of capabilities that are always requested when supported by the
 // server
-const permanentCaps = ["message-tags", "server-time", "multi-prefix"];
+const permanentCaps = ["message-tags", "server-time", "multi-prefix", "away-notify"];
 
 export default class Client extends EventTarget {
 	ws = null;

style.css

@@ -51,6 +51,13 @@ body {
 	border-bottom: 1px solid #e3e3e3;
 }
 
+#topbar .status-here {
+	color: green;
+}
+#topbar .status-gone {
+	color: orange;
+}
+
 #topbar .actions {
 	float: right;
 }