Port channel list to Vue

client/components/Chat.vue

@@ -90,6 +90,7 @@ import MessageList from "./MessageList.vue";
 import ChatInput from "./ChatInput.vue";
 import ChatUserList from "./ChatUserList.vue";
 import ListBans from "./Special/ListBans.vue";
+import ListChannels from "./Special/ListChannels.vue";
 
 export default {
 	name: "Chat",
@@ -105,8 +106,9 @@ export default {
 	},
 	computed: {
 		specialComponent() {
-			if (this.channel.special === "list_bans") {
+			switch (this.channel.special) {
-				return ListBans;
+			case "list_bans": return ListBans;
+			case "list_channels": return ListChannels;
 			}
 		},
 	},

client/components/Special/ListChannels.vue

@@ -0,0 +1,34 @@
+<template>
+	<span v-if="channel.data.text">{{channel.data.text}}</span>
+	<table v-else class="channel-list">
+		<thead>
+			<tr>
+				<th class="channel">Channel</th>
+				<th class="users">Users</th>
+				<th class="topic">Topic</th>
+			</tr>
+		</thead>
+		<tbody>
+			<tr
+				v-for="chan in channel.data"
+				:key="chan.channel">
+				<td
+					class="channel"
+					v-html="$options.filters.parse(chan.channel)"/>
+				<td class="users">{{ chan.num_users }}</td>
+				<td
+					class="topic"
+					v-html="$options.filters.parse(chan.topic)"/>
+			</tr>
+		</tbody>
+	</table>
+</template>
+
+<script>
+export default {
+	name: "ListChannels",
+	props: {
+		channel: Object,
+	},
+};
+</script>

client/css/style.css

@@ -1200,16 +1200,6 @@ background on hover (unless active) */
 	color: var(--body-color-muted);
 }
 
-#chat .special .time,
-#chat .special .from {
-	display: none;
-}
-
-#chat .special .date-marker-container,
-#chat .special .unread-marker {
-	display: none;
-}
-
 #chat .special table th {
 	word-break: normal;
 }

client/js/socket-events/index.js

@@ -7,6 +7,7 @@ require("./join");
 require("./more");
 require("./msg");
 require("./msg_preview");
+require("./msg_special");
 require("./names");
 require("./network");
 require("./nick");

client/js/socket-events/msg_special.js

@@ -1,7 +1,8 @@
 "use strict";
 
 const socket = require("../socket");
+const {findChannel} = require("../vue");
 
 socket.on("msg:special", function(data) {
-	findChannel(data.chan).data = data.data;
+	findChannel(data.chan).channel.data = data.data;
 });

client/views/user.tpl

@@ -1,13 +0,0 @@
-<!-- htmlmin:ignore -->
-{{#diff "reset"}}{{/diff}}
-{{#each users}}
-	{{#diff mode}}
-	{{#unless @first}}
-		</div>
-	{{/unless}}
-	<div class="user-mode {{modes mode}}">
-	{{/diff}}
-	{{> user_name}}
-{{/each}}
-</div>
-<!-- htmlmin:ignore -->

src/plugins/irc-events/list.js

@@ -10,30 +10,21 @@ module.exports = function(irc, network) {
 	irc.on("channel list start", function() {
 		network.chanCache = [];
 
-		updateListStatus(new Msg({
+		updateListStatus({
 			text: "Loading channel list, this can take a moment...",
-			type: "channel_list_loading",
+		});
-		}));
 	});
 
 	irc.on("channel list", function(channels) {
 		Array.prototype.push.apply(network.chanCache, channels);
+
+		updateListStatus({
+			text: `Loaded ${network.chanCache.length} channels...`,
+		});
 	});
 
 	irc.on("channel list end", function() {
-		updateListStatus(new Msg({
+		updateListStatus(network.chanCache.sort((a, b) => b.num_users - a.num_users).slice(0, MAX_CHANS));
-			type: "channel_list",
-			channels: network.chanCache.sort(function(a, b) {
-				return b.num_users - a.num_users;
-			}).slice(0, MAX_CHANS),
-		}));
-
-		if (network.chanCache.length > MAX_CHANS) {
-			updateListStatus(new Msg({
-				type: "channel_list_truncated",
-				text: "Channel list is too large: truncated to " + MAX_CHANS + " channels.",
-			}));
-		}
 
 		network.chanCache = [];
 	});
@@ -44,7 +35,9 @@ module.exports = function(irc, network) {
 		if (typeof chan === "undefined") {
 			chan = client.createChannel({
 				type: Chan.Type.SPECIAL,
+				special: Chan.SpecialType.CHANNELLIST,
 				name: "Channel List",
+				data: msg,
 			});
 
 			client.emit("join", {
@@ -52,11 +45,13 @@ module.exports = function(irc, network) {
 				chan: chan.getFilteredClone(true),
 				index: network.addChannel(chan),
 			});
-		}
+		} else {
+			chan.data = msg;
 
-		client.emit("msg", {
+			client.emit("msg:special", {
-			chan: chan.id,
+				chan: chan.id,
-			msg: msg,
+				data: msg,
-		});
+			});
+		}
 	}
 };