Add member list

components/app.js

@@ -3,6 +3,7 @@ import Client from "/lib/client.js";
 import Buffer from "/components/buffer.js";
 import BufferList from "/components/buffer-list.js";
 import BufferHeader from "/components/buffer-header.js";
+import MemberList from "/components/member-list.js";
 import Connect from "/components/connect.js";
 import Composer from "/components/composer.js";
 import ScrollManager from "/components/scroll-manager.js";
@@ -513,6 +514,18 @@ export default class App extends Component {
 			`;
 		}
 
+		var memberList = null;
+		if (activeBuffer && activeBuffer.type == BufferType.CHANNEL) {
+			memberList = html`
+				<section id="member-list-header">
+					${activeBuffer.members.size} users
+				</section>
+				<section id="member-list">
+					<${MemberList} members=${activeBuffer.members} onNickClick=${this.handleNickClick}/>
+				</section>
+			`;
+		}
+
 		return html`
 			<section id="sidebar">
 				<${BufferList} buffers=${this.state.buffers} activeBuffer=${this.state.activeBuffer} onBufferClick=${this.handleBufferListClick}/>
@@ -523,6 +536,7 @@ export default class App extends Component {
 					<${Buffer} buffer=${activeBuffer} onNickClick=${this.handleNickClick}/>
 				</section>
 			</>
+			${memberList}
 			<${Composer} ref=${this.composer} readOnly=${this.state.activeBuffer == SERVER_BUFFER} onSubmit=${this.handleComposerSubmit}/>
 		`;
 	}

components/member-list.js

@@ -0,0 +1,25 @@
+import { html, Component } from "/lib/index.js";
+
+function MemberItem(props) {
+	function handleClick(event) {
+		event.preventDefault();
+		props.onClick();
+	}
+
+	var url = "irc:///" + encodeURIComponent(props.nick) + ",isnick";
+	return html`
+		<li>
+			<a href=${url} class="nick" onClick=${handleClick}>${props.nick}</a>
+		</li>
+	`;
+}
+
+export default function MemberList(props) {
+	return html`
+		<ul id="buffer-list">
+			${Array.from(this.props.members.entries()).map(([nick, membership]) => html`
+				<${MemberItem} key=${nick} nick=${nick} membership=${membership} onClick=${() => props.onNickClick(nick)}/>
+			`)}
+		</ul>
+	`;
+}

style.css

@@ -8,11 +8,11 @@ html, body {
 body {
 	display: grid;
 	grid-template-rows: auto 1fr max-content;
-	grid-template-columns: max-content auto;
+	grid-template-columns: max-content auto max-content;
 	font-family: monospace;
 }
 
-#sidebar, #buffer, #connect {
+#sidebar, #buffer, #connect, #member-list {
 	width: 100%;
 	height: 100%;
 	overflow: auto;
@@ -43,14 +43,17 @@ body {
 	color: #b37400;
 }
 
-#topbar {
-	grid-row: 1;
-	grid-column: 2;
+#topbar, #member-list-header {
 	box-sizing: border-box;
 	padding: 5px 10px;
 	border-bottom: 1px solid #e3e3e3;
 }
 
+#topbar {
+	grid-row: 1;
+	grid-column: 2;
+}
+
 #topbar .status-here {
 	color: green;
 }
@@ -67,9 +70,32 @@ body {
 	grid-column: 2;
 }
 
+#member-list-header {
+	grid-row: 1;
+	grid-column: 3;
+	border-left: 1px solid #e3e3e3;
+}
+#member-list {
+	grid-row: 2;
+	grid-column: 3;
+	border-left: 1px solid #e3e3e3;
+}
+
+#member-list ul {
+	list-style-type: none;
+	margin: 0;
+	padding: 0;
+}
+#member-list li a {
+	display: inline-block;
+	width: 100%;
+	padding: 2px 10px;
+	box-sizing: border-box;
+}
+
 #composer {
-	grid-column: 2;
 	grid-row: 3;
+	grid-column: 2 / 4;
 	border-top: 1px solid #e3e3e3;
 }
 #composer input {