Display prefixes in member list

Closes: https://todo.sr.ht/~emersion/gamja/43

components/member-list.js

@@ -9,7 +9,8 @@ class MemberItem extends Component {
 	}
 
 	shouldComponentUpdate(nextProps) {
-		return this.props.nick !== nextProps.nick;
+		return this.props.nick !== nextProps.nick
+			|| this.props.membership != nextProps.membership;
 	}
 
 	handleClick(event) {
@@ -18,14 +19,54 @@ class MemberItem extends Component {
 	}
 
 	render() {
+		// XXX: If we were feeling creative we could generate unique colors for
+		// each item in ISUPPORT CHANMODES. But I am not feeling creative.
+		const membmap = {
+			"~": "owner",
+			"&": "admin",
+			"@": "op",
+			"%": "halfop",
+			"+": "voice",
+		};
+		const membclass = membmap[this.props.membership[0]] || "";
+		let membership = "";
+		if (this.props.membership) {
+			membership = html`
+				<span class="membership ${membclass}" title=${membclass}>
+					${this.props.membership}
+				</span>
+			`;
+		};
 		return html`
 			<li>
-				<a href=${getNickURL(this.props.nick)} class="nick" onClick=${this.handleClick}>${this.props.nick}</a>
+				<a
+					href=${getNickURL(this.props.nick)}
+					class="nick"
+					onClick=${this.handleClick}
+				>${membership}${this.props.nick}</a>
 			</li>
 		`;
 	}
 }
 
+function sortMembers(a, b) {
+	var [nickA, membA] = a, [nickB, membB] = b;
+
+	const prefixPrivs = ["~", "&", "@", "%", "+"]; // TODO: grab it from ISUPPORT PREFIX
+	var i = prefixPrivs.indexOf(membA[0]), j = prefixPrivs.indexOf(membB[0]);
+	if (i < 0) {
+		i = prefixPrivs.length;
+	}
+	if (j < 0) {
+		j = prefixPrivs.length;
+	}
+	if (i !== j) {
+		return i - j;
+	}
+
+	return nickA < nickB ? -1 : 1;
+}
+
 export default class MemberList extends Component {
 	shouldComponentUpdate(nextProps) {
 		return this.props.members !== nextProps.members;
@@ -34,8 +75,13 @@ export default class MemberList extends Component {
 	render() {
 		return html`
 			<ul>
-				${Array.from(this.props.members).sort().map(([nick, membership]) => html`
-					<${MemberItem} key=${nick} nick=${nick} membership=${membership} onClick=${() => this.props.onNickClick(nick)}/>
+				${Array.from(this.props.members).sort(sortMembers).map(([nick, membership]) => html`
+					<${MemberItem}
+						key=${nick}
+						nick=${nick}
+						membership=${membership}
+						onClick=${() => this.props.onNickClick(nick)}
+					/>
 				`)}
 			</ul>
 		`;