Sync reordering of channels/networks to other clients

client/js/lounge.js

@@ -36,6 +36,8 @@ $(function() {
 	var sidebar = $("#sidebar, #footer");
 	var chat = $("#chat");
 
+	var ignoreSortSync = false;
+
 	var pop;
 	try {
 		pop = new Audio();
@@ -1370,6 +1372,8 @@ $(function() {
 						order: order
 					}
 				);
+
+				ignoreSortSync = true;
 			}
 		});
 		sidebar.find(".network").sortable({
@@ -1396,10 +1400,57 @@ $(function() {
 						order: order
 					}
 				);
+
+				ignoreSortSync = true;
 			}
 		});
 	}
 
+	socket.on("sync_sort", function(data) {
+		// Syncs the order of channels or networks when they are reordered
+		if (ignoreSortSync) {
+			ignoreSortSync = false;
+			return; // Ignore syncing because we 'caused' it
+		}
+
+		var type = data.type;
+		var order = data.order;
+
+		if (type === "networks") {
+			var container = $(".networks");
+
+			$.each(order, function(index, value) {
+				var position = $(container.children()[index]);
+
+				if (position.data("id") === value) { // Network in correct place
+					return true; // No point in continuing
+				}
+
+				var network = container.find("#network-" + value);
+
+				$(network).insertBefore(position);
+			});
+		} else if (type === "channels") {
+			var network = $("#network-" + data.target);
+
+			$.each(order, function(index, value) {
+				if (index === 0) { // Shouldn't attempt to move lobby
+					return true; // same as `continue` -> skip to next item
+				}
+
+				var position = $(network.children()[index]); // Target channel at position
+
+				if (position.data("id") === value) { // Channel in correct place
+					return true; // No point in continuing
+				}
+
+				var channel = network.find(".chan[data-id=" + value + "]"); // Channel at position
+
+				$(channel).insertBefore(position);
+			});
+		}
+	});
+
 	function setNick(nick) {
 		// Closes the nick editor when canceling, changing channel, or when a nick
 		// is set in a different tab / browser / device.

src/client.js

@@ -425,6 +425,10 @@ Client.prototype.sort = function(data) {
 	}
 
 	self.save();
+
+	// Sync order to connected clients
+	const syncOrder = sorted.map(obj => obj.id);
+	self.emit("sync_sort", {order: syncOrder, type: type, target: data.target});
 };
 
 Client.prototype.names = function(data) {