Make networks collapsable

client/css/style.css

@@ -248,7 +248,8 @@ kbd {
 #help .report-issue-link::before,
 #nick button::before,
 #image-viewer .previous-image-btn::before,
-#image-viewer .next-image-btn::before {
+#image-viewer .next-image-btn::before,
+#sidebar .collapse-network::before {
 	font: normal normal normal 14px/1 FontAwesome;
 	font-size: inherit; /* Can't have font-size inherit on line above, so need to override */
 	-webkit-font-smoothing: antialiased;
@@ -523,6 +524,10 @@ kbd {
 	font-size: 14px;
 }
 
+#sidebar .network.collapsed .chan:not(.lobby) {
+	display: none;
+}
+
 #sidebar button,
 #sidebar .chan,
 #sidebar .sign-out {
@@ -703,6 +708,32 @@ kbd {
 	transform: rotate(45deg) translateZ(0);
 }
 
+#sidebar .network .collapse-network {
+	border-radius: 3px;
+	width: 25px;
+	height: 34px;
+	float: left;
+	opacity: 0.4;
+	transition: opacity 0.2s, background-color 0.2s, transform 0.2s;
+}
+
+#sidebar .network .collapse-network::before {
+	font-weight: normal;
+	display: inline-block;
+	line-height: 16px;
+	text-align: center;
+	content: "\f0d7"; /* http://fontawesome.io/icon/caret-down/ */
+	color: #fff;
+}
+
+#sidebar .network.collapsed .collapse-network::before {
+	content: "\f0da"; /* http://fontawesome.io/icon/caret-right/ */
+}
+
+#sidebar .collapse-network:hover {
+	opacity: 1;
+}
+
 #sidebar .chan.active .close {
 	opacity: 0.4;
 	display: unset;

client/js/render.js

@@ -24,6 +24,7 @@ const historyObserver = window.IntersectionObserver ?
 module.exports = {
 	appendMessage,
 	buildChannelMessages,
+	collapseNetwork,
 	renderChannel,
 	renderChannelUsers,
 	renderNetworks,
@@ -285,3 +286,17 @@ function loadMoreHistory(entries) {
 		target.trigger("click");
 	});
 }
+
+sidebar.on("click", ".collapse-network", (event) => collapseNetwork($(event.target)));
+
+function collapseNetwork(collapseButton) {
+	$("#sidebar").find(`.network[data-id='${collapseButton.attr("data-id")}']`).toggleClass("collapsed");
+
+	if (collapseButton.attr("aria-expanded") === "true") {
+		collapseButton.attr("aria-expanded", false);
+		collapseButton.attr("aria-label", "Expand");
+	} else {
+		collapseButton.attr("aria-expanded", true);
+		collapseButton.attr("aria-label", "Collapse");
+	}
+}

client/js/socket-events/join.js

@@ -9,7 +9,7 @@ const sidebar = $("#sidebar");
 
 socket.on("join", function(data) {
 	const id = data.network;
-	const network = sidebar.find("#network-" + id);
+	const network = sidebar.find(`#network-${id}-chanlist`);
 	network.append(
 		templates.chan({
 			channels: [data.chan],

client/js/socket-events/quit.js

@@ -7,7 +7,7 @@ const sidebar = $("#sidebar");
 
 socket.on("quit", function(data) {
 	const id = data.network;
-	const network = sidebar.find("#network-" + id);
+	const network = sidebar.find(`#network-${id}-chanlist`);
 
 	network.children(".chan").each(function() {
 		// this = child

client/js/socket-events/sync_sort.js

@@ -24,12 +24,12 @@ socket.on("sync_sort", function(data) {
 				return true; // No point in continuing
 			}
 
-			const network = container.find("#network-" + value);
+			const network = container.find(`#network-${data.target}-chanlist`);
 
 			$(network).insertBefore(position);
 		});
 	} else if (type === "channels") {
-		const network = $("#network-" + data.target);
+		const network = $(`#network-${data.target}-chanlist`);
 
 		$.each(order, function(index, value) {
 			if (index === 0) { // Shouldn't attempt to move lobby

client/themes/crypto.css

@@ -64,7 +64,7 @@ a:hover,
 	font-size: 12px;
 }
 
-#sidebar .chan:first-child {
+#sidebar .chan.lobby {
 	color: #00ff0e;
 }
 

client/views/network.tpl

@@ -6,6 +6,10 @@
 	data-nick="{{nick}}"
 	data-options="{{tojson serverOptions}}"
 >
+	<button class="collapse-network" aria-label="Collapse" data-id="{{id}}"
+		aria-controls="network-{{id}}-chanlist" aria-expanded="true"></button>
+	<div id="network-{{id}}-chanlist" role="region" class="chanlist">
 	{{> chan}}
+	</div>
 </section>
 {{/each}}