xC/xP: relay and render channel topics

xP/public/xP.css

@@ -30,11 +30,16 @@ body {
 	display: flex;
 	justify-content: space-between;
 	align-items: baseline;
+	column-gap: .3em;
 
 	position: relative;
 	border-top: 3px solid #ccc;
 	border-bottom: 2px solid #888;
 }
+.title {
+	/* To approximate right-aligned space-between. */
+	flex-direction: row-reverse;
+}
 .title:before, .status:before {
 	content: " ";
 	position: absolute;
@@ -57,7 +62,7 @@ body {
 .toolbar {
 	display: flex;
 	align-items: baseline;
-	gap: .3em;
+	column-gap: .3em;
 }
 button {
 	font: inherit;
@@ -129,11 +134,13 @@ button:hover:active {
 	overflow-y: auto;
 }
 .log, .content {
-	padding: .1em .3em;
 	/* Note: https://bugs.chromium.org/p/chromium/issues/detail?id=1261435 */
 	white-space: break-spaces;
 	overflow-wrap: break-word;
 }
+.log, .buffer .content {
+	padding: .1em .3em;
+}
 
 .leaked {
 	opacity: 50%;

xP/public/xP.js

@@ -254,12 +254,58 @@ rpc.addEventListener('event', event => {
 	}
 })
 
-rpcEventHandlers['Ping'] = e => {
+rpcEventHandlers.set(Relay.Event.Ping, e => {
 	rpc.send({command: 'PingResponse', eventSeq: e.eventSeq})
-}
+})
 
 // ~~~ Buffer events ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 
+rpcEventHandlers.set(Relay.Event.BufferLine, e => {
+	let b = buffers.get(e.bufferName), line = {...e}
+	delete line.event
+	delete line.eventSeq
+	delete line.leakToActive
+	if (b === undefined)
+		return
+
+	// Initial sync: skip all other processing, let highlights be.
+	if (bufferCurrent === undefined) {
+		b.lines.push(line)
+		return
+	}
+
+	let visible = document.visibilityState !== 'hidden' &&
+		bufferLog === undefined &&
+		bufferAutoscroll &&
+		(e.bufferName == bufferCurrent || e.leakToActive)
+	b.lines.push({...line})
+	if (!(visible || e.leakToActive) ||
+			b.newMessages || b.newUnimportantMessages) {
+		if (line.isUnimportant)
+			b.newUnimportantMessages++
+		else
+			b.newMessages++
+	}
+
+	if (e.leakToActive) {
+		let bc = buffers.get(bufferCurrent)
+		bc.lines.push({...line, leaked: true})
+		if (!visible || bc.newMessages || bc.newUnimportantMessages) {
+			if (line.isUnimportant)
+				bc.newUnimportantMessages++
+			else
+				bc.newMessages++
+		}
+	}
+
+	if (line.isHighlight || (!visible && !line.isUnimportant &&
+			b.kind === Relay.BufferKind.PrivateMessage)) {
+		beep()
+		if (!visible)
+			b.highlighted = true
+	}
+})
+
 rpcEventHandlers.set(Relay.Event.BufferUpdate, e => {
 	let b = buffers.get(e.bufferName)
 	if (b === undefined) {
@@ -274,6 +320,7 @@ rpcEventHandlers.set(Relay.Event.BufferUpdate, e => {
 	b.hideUnimportant = e.hideUnimportant
 	b.kind = e.context.kind
 	b.server = servers.get(e.context.serverName)
+	b.topic = e.context.topic
 })
 
 rpcEventHandlers.set(Relay.Event.BufferStats, e => {
@@ -332,52 +379,6 @@ rpcEventHandlers.set(Relay.Event.BufferActivate, e => {
 	}
 })
 
-rpcEventHandlers.set(Relay.Event.BufferLine, e => {
-	let b = buffers.get(e.bufferName), line = {...e}
-	delete line.event
-	delete line.eventSeq
-	delete line.leakToActive
-	if (b === undefined)
-		return
-
-	// Initial sync: skip all other processing, let highlights be.
-	if (bufferCurrent === undefined) {
-		b.lines.push(line)
-		return
-	}
-
-	let visible = document.visibilityState !== 'hidden' &&
-		bufferLog === undefined &&
-		bufferAutoscroll &&
-		(e.bufferName == bufferCurrent || e.leakToActive)
-	b.lines.push({...line})
-	if (!(visible || e.leakToActive) ||
-			b.newMessages || b.newUnimportantMessages) {
-		if (line.isUnimportant)
-			b.newUnimportantMessages++
-		else
-			b.newMessages++
-	}
-
-	if (e.leakToActive) {
-		let bc = buffers.get(bufferCurrent)
-		bc.lines.push({...line, leaked: true})
-		if (!visible || bc.newMessages || bc.newUnimportantMessages) {
-			if (line.isUnimportant)
-				bc.newUnimportantMessages++
-			else
-				bc.newMessages++
-		}
-	}
-
-	if (line.isHighlight || (!visible && !line.isUnimportant &&
-			b.kind === Relay.BufferKind.PrivateMessage)) {
-		beep()
-		if (!visible)
-			b.highlighted = true
-	}
-})
-
 rpcEventHandlers.set(Relay.Event.BufferClear, e => {
 	let b = buffers.get(e.bufferName)
 	if (b !== undefined)
@@ -548,6 +549,14 @@ let Content = {
 	},
 }
 
+let Topic = {
+	view: vnode => {
+		let b = buffers.get(bufferCurrent)
+		if (b !== undefined && b.topic !== undefined)
+			return m(Content, {}, {items: b.topic})
+	},
+}
+
 let Buffer = {
 	controller: new AbortController(),
 
@@ -945,7 +954,7 @@ let Main = {
 
 		return m('.xP', {}, [
 			overlay,
-			m('.title', {}, `xP`),
+			m('.title', {}, [m('b', {}, `xP`), m(Topic)]),
 			m('.middle', {}, [m(BufferList), m(BufferContainer)]),
 			m(Status),
 			m('.input', {}, [m(Prompt), m(Input)]),