Merge remote-tracking branch 'origin/prop/touch-events'

1 files changed, 33 insertions, 0 deletions

diff --git a/ui/routes/(app)/+layout.svelte b/ui/routes/(app)/+layout.svelte
index 86bc330..406d85a 100644
--- a/ui/routes/(app)/+layout.svelte
+++ b/ui/routes/(app)/+layout.svelte
@@ -1,7 +1,9 @@
 <script>
   import { page } from '$app/stores';
   import { goto } from '$app/navigation';
+  import { browser } from '$app/environment';
   import { onMount, onDestroy, getContext } from 'svelte';
+  import TinyGesture from 'tinygesture';
 
   import { boot, subscribeToEvents } from '$lib/apiServer';
   import { currentUser, logins, channelsList, messages } from '$lib/store';
@@ -10,6 +12,7 @@
   import CreateChannelForm from '$lib/components/CreateChannelForm.svelte';
 
   let events = null;
+  let gesture = null;
 
   let pageContext = getContext('page');
   let { children } = $props();
@@ -26,6 +29,20 @@
     messages.update((value) => value.setMessages(boot.messages));
   }
 
+  function setUpGestures() {
+    if (!browser) {
+      // Meaningless if we're not in a browser, so...
+      return;
+    }
+    gesture = new TinyGesture(window);
+    gesture.on('swiperight', (event) => {
+      pageContext.showMenu = true;
+    });
+    gesture.on('swipeleft', (event) => {
+      pageContext.showMenu = false;
+    });
+  }
+
   onMount(async () => {
     let response = await boot();
     switch (response.status) {
@@ -45,6 +62,8 @@
         // TODO: display error.
         break;
     }
+    setUpGestures();
+
     loading = false;
   });
 
@@ -52,6 +71,9 @@
     if (events !== null) {
       events.close();
     }
+    if (gesture !== null) {
+        gesture.destroy();
+    }
   });
 </script>
 
@@ -78,12 +100,23 @@
 {/if}
 
 <style>
+  /* Just some global CSS variables, don't mind them.
+   */
   :root {
     --app-bar-height: 68px;
     --input-row-height: 2rem;
     --interface-padding: 16px;
   }
 
+  /* This should help minimize swipe-to-go-back behaviour, enabling our
+   * swipe-to-reveal-channel-menu behaviour. It won't work in all cases; in iOS
+   * Safari, when swiping from the screen edge, the OS gets th event and
+   * handles it before the browser does.
+   */
+  html, body {
+      overscroll-behavior-x: none;
+  }
+
   #interface {
     margin: unset;
     display: grid;