Make network lobby a separate component

client/components/App.vue

@@ -14,7 +14,7 @@
 						class="logo-inverted"
 						alt="The Lounge">
 				</div>
-				<Network
+				<NetworkList
 					:networks="networks"
 					:active-channel="activeChannel"/>
 			</div>
@@ -93,13 +93,13 @@
 </template>
 
 <script>
-import Network from "./Network.vue";
+import NetworkList from "./NetworkList.vue";
 import Chat from "./Chat.vue";
 
 export default {
 	name: "App",
 	components: {
-		Network,
+		NetworkList,
 		Chat,
 	},
 	props: {

client/components/Channel.vue

@@ -1,121 +1,48 @@
 <template>
-	<div
+	<ChannelWrapper
-		v-if="!network.isCollapsed || channel.highlight || channel.type === 'lobby'"
+		:network="network"
-		:class="[ channel.type, { active: activeChannel && channel === activeChannel.channel } ]"
+		:channel="channel"
-		:aria-label="channel.name"
+		:active-channel="activeChannel">
-		:title="channel.name"
+		<span
-		:data-id="channel.id"
+			:title="channel.name"
-		:data-target="'#chan-' + channel.id"
+			class="name">{{ channel.name }}</span>
-		:aria-controls="'#chan-' + channel.id"
+		<span
-		:aria-selected="activeChannel && channel === activeChannel.channel"
+			v-if="channel.unread"
-		class="chan"
+			:class="{ highlight: channel.highlight }"
-		role="tab"
+			class="badge">{{ channel.unread | roundBadgeNumber }}</span>
-	>
+		<template v-if="channel.type === 'channel'">
-		<template v-if="channel.type === 'lobby'">
-			<button
-				v-if="network.channels.length > 1"
-				:aria-controls="'network-' + network.uuid"
-				:aria-label="getExpandLabel(network)"
-				:aria-expanded="!network.isCollapsed"
-				class="collapse-network"
-				@click.prevent="onCollapseClick"
-			>
-				<span class="collapse-network-icon"/>
-			</button>
 			<span
-				v-else
+				class="close-tooltip tooltipped tooltipped-w"
-				class="collapse-network"/>
+				aria-label="Leave">
-			<div class="lobby-wrap">
-				<span
-					:title="channel.name"
-					class="name">{{ channel.name }}</span>
-				<span
-					class="not-secure-tooltip tooltipped tooltipped-w"
-					aria-label="Insecure connection">
-					<span class="not-secure-icon"/>
-				</span>
-				<span
-					class="not-connected-tooltip tooltipped tooltipped-w"
-					aria-label="Disconnected">
-					<span class="not-connected-icon"/>
-				</span>
-				<span
-					v-if="channel.unread"
-					:class="{ highlight: channel.highlight }"
-					class="badge">{{ channel.unread | roundBadgeNumber }}</span>
-			</div>
-			<span
-				:aria-label="joinChannelLabel"
-				class="add-channel-tooltip tooltipped tooltipped-w tooltipped-no-touch">
 				<button
-					:class="['add-channel', { opened: isJoinChannelShown }]"
+					class="close"
-					:aria-controls="'join-channel-' + channel.id"
+					aria-label="Leave"/>
-					:aria-label="joinChannelLabel"
-					@click.stop="$emit('toggleJoinChannel')"/>
 			</span>
 		</template>
 		<template v-else>
 			<span
-				:title="channel.name"
+				class="close-tooltip tooltipped tooltipped-w"
-				class="name">{{ channel.name }}</span>
+				aria-label="Close">
-			<span
+				<button
-				v-if="channel.unread"
+					class="close"
-				:class="{ highlight: channel.highlight }"
+					aria-label="Close"/>
-				class="badge">{{ channel.unread | roundBadgeNumber }}</span>
+			</span>
-			<template v-if="channel.type === 'channel'">
-				<span
-					class="close-tooltip tooltipped tooltipped-w"
-					aria-label="Leave">
-					<button
-						class="close"
-						aria-label="Leave"/>
-				</span>
-			</template>
-			<template v-else>
-				<span
-					class="close-tooltip tooltipped tooltipped-w"
-					aria-label="Close">
-					<button
-						class="close"
-						aria-label="Close"/>
-				</span>
-			</template>
 		</template>
-	</div>
+	</ChannelWrapper>
 </template>
 
 <script>
-const storage = require("../js/localStorage");
+import ChannelWrapper from "./ChannelWrapper.vue";
 
 export default {
 	name: "Channel",
+	components: {
+		ChannelWrapper,
+	},
 	props: {
 		activeChannel: Object,
 		network: Object,
 		channel: Object,
-		isJoinChannelShown: Boolean,
-	},
-	computed: {
-		joinChannelLabel() {
-			return this.isJoinChannelShown ? "Cancel" : "Join a channel…";
-		},
-	},
-	methods: {
-		onCollapseClick() {
-			const networks = new Set(JSON.parse(storage.get("thelounge.networks.collapsed")));
-			this.network.isCollapsed = !this.network.isCollapsed;
-
-			if (this.network.isCollapsed) {
-				networks.add(this.network.uuid);
-			} else {
-				networks.delete(this.network.uuid);
-			}
-
-			storage.set("thelounge.networks.collapsed", JSON.stringify([...networks]));
-		},
-		getExpandLabel(network) {
-			return network.isCollapsed ? "Expand" : "Collapse";
-		},
 	},
 };
 </script>

client/components/ChannelWrapper.vue

@@ -0,0 +1,30 @@
+<template>
+	<div
+		v-if="!network.isCollapsed || channel.highlight || channel.type === 'lobby' || (activeChannel && channel === activeChannel.channel)"
+		:class="[ channel.type, { active: activeChannel && channel === activeChannel.channel } ]"
+		:aria-label="channel.name"
+		:title="channel.name"
+		:data-id="channel.id"
+		:data-target="'#chan-' + channel.id"
+		:aria-controls="'#chan-' + channel.id"
+		:aria-selected="activeChannel && channel === activeChannel.channel"
+		class="chan"
+		role="tab"
+	>
+		<slot
+			:network="network"
+			:channel="channel"
+			:activeChannel="activeChannel"/>
+	</div>
+</template>
+
+<script>
+export default {
+	name: "ChannelWrapper",
+	props: {
+		network: Object,
+		channel: Object,
+		activeChannel: Object,
+	},
+};
+</script>

client/components/NetworkList.vue

@@ -27,8 +27,7 @@
 			class="network"
 			role="region"
 		>
-			<Channel
+			<NetworkLobby
-				:channel="network.channels[0]"
 				:network="network"
 				:active-channel="activeChannel"
 				:is-join-channel-shown="network.isJoinChannelShown"
@@ -63,8 +62,9 @@
 
 <script>
 import Draggable from "vuedraggable";
-import JoinChannel from "./JoinChannel.vue";
+import NetworkLobby from "./NetworkLobby.vue";
 import Channel from "./Channel.vue";
+import JoinChannel from "./JoinChannel.vue";
 
 // TODO: ignoreSortSync should be removed
 import {findChannel} from "../js/vue";
@@ -72,9 +72,10 @@ import socket from "../js/socket";
 // import options from "../js/options";
 
 export default {
-	name: "Network",
+	name: "NetworkList",
 	components: {
 		JoinChannel,
+		NetworkLobby,
 		Channel,
 		Draggable,
 	},

client/components/NetworkLobby.vue

@@ -0,0 +1,88 @@
+<template>
+	<ChannelWrapper
+		:network="network"
+		:channel="channel"
+		:active-channel="activeChannel">
+		<button
+			v-if="network.channels.length > 1"
+			:aria-controls="'network-' + network.uuid"
+			:aria-label="getExpandLabel(network)"
+			:aria-expanded="!network.isCollapsed"
+			class="collapse-network"
+			@click.stop="onCollapseClick"
+		><span class="collapse-network-icon"/></button>
+		<span
+			v-else
+			class="collapse-network"/>
+		<div class="lobby-wrap">
+			<span
+				:title="channel.name"
+				class="name">{{ channel.name }}</span>
+			<span
+				class="not-secure-tooltip tooltipped tooltipped-w"
+				aria-label="Insecure connection">
+				<span class="not-secure-icon"/>
+			</span>
+			<span
+				class="not-connected-tooltip tooltipped tooltipped-w"
+				aria-label="Disconnected">
+				<span class="not-connected-icon"/>
+			</span>
+			<span
+				v-if="channel.unread"
+				:class="{ highlight: channel.highlight }"
+				class="badge">{{ channel.unread | roundBadgeNumber }}</span>
+		</div>
+		<span
+			:aria-label="joinChannelLabel"
+			class="add-channel-tooltip tooltipped tooltipped-w tooltipped-no-touch">
+			<button
+				:class="['add-channel', { opened: isJoinChannelShown }]"
+				:aria-controls="'join-channel-' + channel.id"
+				:aria-label="joinChannelLabel"
+				@click.stop="$emit('toggleJoinChannel')"/>
+		</span>
+	</ChannelWrapper>
+</template>
+
+<script>
+import ChannelWrapper from "./ChannelWrapper.vue";
+const storage = require("../js/localStorage");
+
+export default {
+	name: "Channel",
+	components: {
+		ChannelWrapper,
+	},
+	props: {
+		activeChannel: Object,
+		network: Object,
+		isJoinChannelShown: Boolean,
+	},
+	computed: {
+		channel() {
+			return this.network.channels[0];
+		},
+		joinChannelLabel() {
+			return this.isJoinChannelShown ? "Cancel" : "Join a channel…";
+		},
+	},
+	methods: {
+		onCollapseClick() {
+			const networks = new Set(JSON.parse(storage.get("thelounge.networks.collapsed")));
+			this.network.isCollapsed = !this.network.isCollapsed;
+
+			if (this.network.isCollapsed) {
+				networks.add(this.network.uuid);
+			} else {
+				networks.delete(this.network.uuid);
+			}
+
+			storage.set("thelounge.networks.collapsed", JSON.stringify([...networks]));
+		},
+		getExpandLabel(network) {
+			return network.isCollapsed ? "Expand" : "Collapse";
+		},
+	},
+};
+</script>