1 files changed, 29 insertions, 5 deletions

diff --git a/ui/routes/(app)/+layout.svelte b/ui/routes/(app)/+layout.svelte
index 5ed3906..7d3a9eb 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();
@@ -17,15 +20,29 @@
   let channel = $derived($page.params.channel);
 
   function onBooted(boot) {
-    currentUser.update(() => ({
+    currentUser.set({
       id: boot.login.id,
       username: boot.login.name
-    }));
+    });
     logins.update((value) => value.setLogins(boot.logins));
     channelsList.update((value) => value.setChannels(boot.channels));
     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) {
@@ -34,17 +51,19 @@
         events = subscribeToEvents(response.data.resume_point);
         break;
       case 401:
-        currentUser.update(() => null);
+        currentUser.set(null);
         goto('/login');
         break;
       case 503:
-        currentUser.update(() => null);
+        currentUser.set(null);
         goto('/setup');
         break;
       default:
         // TODO: display error.
         break;
     }
+    setUpGestures();
+
     loading = false;
   });
 
@@ -52,6 +71,9 @@
     if (events !== null) {
       events.close();
     }
+    if (gesture !== null) {
+      gesture.destroy();
+    }
   });
 
   function beforeUnload(evt) {
@@ -90,8 +112,10 @@
 {/if}
 
 <style>
+  /* Just some global CSS variables, don't mind them.
+   */
   :root {
-    --app-bar-height: 68px;
+    --app-bar-height: 48px;
     --input-row-height: 2rem;
     --interface-padding: 16px;
     --nav-width: 21rem;