From ff4fd0a13debff046dc2ff9cd7a0886fb08e0b4a Mon Sep 17 00:00:00 2001
From: Pavel Djundik <xPaw@users.noreply.github.com>
Date: Thu, 2 Jan 2020 22:24:20 +0200
Subject: [PATCH 1/2] Add keyboard shortcuts to toggle server/user list

Fixes #2345
---
 client/components/App.vue          | 13 +++++++++++++
 client/components/Windows/Help.vue | 20 ++++++++++++++++++++
 2 files changed, 33 insertions(+)

diff --git a/client/components/App.vue b/client/components/App.vue
index 0b6d0fe7..01b21705 100644
--- a/client/components/App.vue
+++ b/client/components/App.vue
@@ -11,6 +11,7 @@
 
 <script>
 const constants = require("../js/constants");
+import Mousetrap from "mousetrap";
 import throttle from "lodash/throttle";
 import storage from "../js/localStorage";
 
@@ -39,6 +40,9 @@ export default {
 		this.prepareOpenStates();
 	},
 	mounted() {
+		Mousetrap.bind("alt+u", this.toggleUserList);
+		Mousetrap.bind("alt+s", this.toggleSidebar);
+
 		// Make a single throttled resize listener available to all components
 		this.debouncedResize = throttle(() => {
 			this.$root.$emit("resize");
@@ -56,10 +60,19 @@ export default {
 		this.dayChangeTimeout = setTimeout(emitDayChange, this.msUntilNextDay());
 	},
 	beforeDestroy() {
+		Mousetrap.unbind("alt+u", this.toggleUserList);
+		Mousetrap.unbind("alt+s", this.toggleSidebar);
+
 		window.removeEventListener("resize", this.debouncedResize);
 		clearTimeout(this.dayChangeTimeout);
 	},
 	methods: {
+		toggleSidebar() {
+			this.$store.commit("toggleSidebar");
+		},
+		toggleUserList() {
+			this.$store.commit("toggleUserlist");
+		},
 		msUntilNextDay() {
 			// Compute how many milliseconds are remaining until the next day starts
 			const today = new Date();
diff --git a/client/components/Windows/Help.vue b/client/components/Windows/Help.vue
index 0890fa43..29e0399d 100644
--- a/client/components/Windows/Help.vue
+++ b/client/components/Windows/Help.vue
@@ -145,6 +145,26 @@
 				</div>
 			</div>
 
+			<div class="help-item">
+				<div class="subject">
+					<span v-if="!isApple"><kbd>Alt</kbd> <kbd>S</kbd></span>
+					<span v-else><kbd>⌥</kbd> <kbd>S</kbd></span>
+				</div>
+				<div class="description">
+					<p>Toggle sidebar.</p>
+				</div>
+			</div>
+
+			<div class="help-item">
+				<div class="subject">
+					<span v-if="!isApple"><kbd>Alt</kbd> <kbd>U</kbd></span>
+					<span v-else><kbd>⌥</kbd> <kbd>U</kbd></span>
+				</div>
+				<div class="description">
+					<p>Toggle channel user list.</p>
+				</div>
+			</div>
+
 			<div class="help-item">
 				<div class="subject">
 					<span v-if="!isApple"><kbd>Ctrl</kbd> <kbd>K</kbd></span>

From 1870145674ce14ee96c3e5efd0616b4a39054e82 Mon Sep 17 00:00:00 2001
From: Pavel Djundik <xPaw@users.noreply.github.com>
Date: Thu, 2 Jan 2020 22:41:52 +0200
Subject: [PATCH 2/2] Add keybinds to expand and collapse networks

Fixes #3523
---
 client/components/NetworkList.vue    | 20 ++++++++++++++++++++
 client/components/NetworkLobby.vue   | 13 ++-----------
 client/components/Windows/Help.vue   | 22 ++++++++++++++++++++++
 client/js/helpers/collapseNetwork.js | 16 ++++++++++++++++
 4 files changed, 60 insertions(+), 11 deletions(-)
 create mode 100644 client/js/helpers/collapseNetwork.js

diff --git a/client/components/NetworkList.vue b/client/components/NetworkList.vue
index f1817832..be32f5a7 100644
--- a/client/components/NetworkList.vue
+++ b/client/components/NetworkList.vue
@@ -65,12 +65,14 @@
 </template>
 
 <script>
+import Mousetrap from "mousetrap";
 import Draggable from "vuedraggable";
 import NetworkLobby from "./NetworkLobby.vue";
 import Channel from "./Channel.vue";
 import JoinChannel from "./JoinChannel.vue";
 
 import socket from "../js/socket";
+import collapseNetwork from "../js/helpers/collapseNetwork";
 
 export default {
 	name: "NetworkList",
@@ -85,7 +87,25 @@ export default {
 			return this.$store.state.networks;
 		},
 	},
+	mounted() {
+		Mousetrap.bind("alt+shift+right", this.expandNetwork);
+		Mousetrap.bind("alt+shift+left", this.collapseNetwork);
+	},
+	beforeDestroy() {
+		Mousetrap.unbind("alt+shift+right", this.expandNetwork);
+		Mousetrap.unbind("alt+shift+left", this.collapseNetwork);
+	},
 	methods: {
+		expandNetwork() {
+			if (this.$store.state.activeChannel) {
+				collapseNetwork(this.$store.state.activeChannel.network, false);
+			}
+		},
+		collapseNetwork() {
+			if (this.$store.state.activeChannel) {
+				collapseNetwork(this.$store.state.activeChannel.network, true);
+			}
+		},
 		isCurrentlyInTouch(e) {
 			// TODO: Implement a way to sort on touch devices
 			return e.pointerType !== "mouse";
diff --git a/client/components/NetworkLobby.vue b/client/components/NetworkLobby.vue
index 0f22af13..a3ce4bed 100644
--- a/client/components/NetworkLobby.vue
+++ b/client/components/NetworkLobby.vue
@@ -46,9 +46,9 @@
 </template>
 
 <script>
+import collapseNetwork from "../js/helpers/collapseNetwork";
 import roundBadgeNumber from "../js/helpers/roundBadgeNumber";
 import ChannelWrapper from "./ChannelWrapper.vue";
-import storage from "../js/localStorage";
 
 export default {
 	name: "Channel",
@@ -72,16 +72,7 @@ export default {
 	},
 	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]));
+			collapseNetwork(this.network, !this.network.isCollapsed);
 		},
 		getExpandLabel(network) {
 			return network.isCollapsed ? "Expand" : "Collapse";
diff --git a/client/components/Windows/Help.vue b/client/components/Windows/Help.vue
index 29e0399d..ec4921c6 100644
--- a/client/components/Windows/Help.vue
+++ b/client/components/Windows/Help.vue
@@ -115,6 +115,26 @@
 				</div>
 			</div>
 
+			<div class="help-item">
+				<div class="subject">
+					<span v-if="!isApple"><kbd>Alt</kbd> <kbd>Shift</kbd> <kbd>←</kbd></span>
+					<span v-else><kbd>⌥</kbd> <kbd>⇧</kbd> <kbd>←</kbd></span>
+				</div>
+				<div class="description">
+					<p>Collapse current network.</p>
+				</div>
+			</div>
+
+			<div class="help-item">
+				<div class="subject">
+					<span v-if="!isApple"><kbd>Alt</kbd> <kbd>Shift</kbd> <kbd>→</kbd></span>
+					<span v-else><kbd>⌥</kbd> <kbd>⇧</kbd> <kbd>→</kbd></span>
+				</div>
+				<div class="description">
+					<p>Expand current network.</p>
+				</div>
+			</div>
+
 			<div class="help-item">
 				<div class="subject">
 					<span v-if="!isApple"><kbd>Alt</kbd> <kbd>↓</kbd></span>
@@ -165,6 +185,8 @@
 				</div>
 			</div>
 
+			<h2>Formatting Shortcuts</h2>
+
 			<div class="help-item">
 				<div class="subject">
 					<span v-if="!isApple"><kbd>Ctrl</kbd> <kbd>K</kbd></span>
diff --git a/client/js/helpers/collapseNetwork.js b/client/js/helpers/collapseNetwork.js
new file mode 100644
index 00000000..4fe31420
--- /dev/null
+++ b/client/js/helpers/collapseNetwork.js
@@ -0,0 +1,16 @@
+"use strict";
+
+import storage from "../localStorage";
+
+export default (network, isCollapsed) => {
+	const networks = new Set(JSON.parse(storage.get("thelounge.networks.collapsed")));
+	network.isCollapsed = isCollapsed;
+
+	if (isCollapsed) {
+		networks.add(network.uuid);
+	} else {
+		networks.delete(network.uuid);
+	}
+
+	storage.set("thelounge.networks.collapsed", JSON.stringify([...networks]));
+};