Add Gestures section to help window.

This documents the two gestures that The Lounge currently supports.

The section is only visible if your device supports touch.

client/components/Windows/Help.vue

@@ -87,6 +87,36 @@
 				</p>
 			</div>
 
+			<h2 v-if="isTouch">Gestures</h2>
+
+			<div v-if="isTouch" class="help-item">
+				<div class="subject gesture">Single-Finger Swipe Left</div>
+				<div class="description">
+					<p>Hide sidebar.</p>
+				</div>
+			</div>
+
+			<div v-if="isTouch" class="help-item">
+				<div class="subject gesture">Single-Finger Swipe Right</div>
+				<div class="description">
+					<p>Show sidebar.</p>
+				</div>
+			</div>
+
+			<div v-if="isTouch" class="help-item">
+				<div class="subject gesture">Two-Finger Swipe Left</div>
+				<div class="description">
+					<p>Switch to the next window in the channel list.</p>
+				</div>
+			</div>
+
+			<div v-if="isTouch" class="help-item">
+				<div class="subject gesture">Two-Finger Swipe Right</div>
+				<div class="description">
+					<p>Switch to the previous window in the channel list.</p>
+				</div>
+			</div>
+
 			<h2>Keyboard Shortcuts</h2>
 
 			<div class="help-item">
@@ -764,6 +794,7 @@ export default {
 	data() {
 		return {
 			isApple: navigator.platform.match(/(Mac|iPhone|iPod|iPad)/i) || false,
+			isTouch: navigator.maxTouchPoints > 0,
 		};
 	},
 };

client/css/style.css

@@ -2024,6 +2024,10 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 	padding-right: 15px;
 }
 
+#help .help-item .subject.gesture {
+	font-weight: bold;
+}
+
 #help .help-item .description p {
 	margin-bottom: 0;
 }