From 1614fea76a6fc1f4d70ddb14b95e3004c79365ef Mon Sep 17 00:00:00 2001
From: Kit La Touche <kit@transneptune.net>
Date: Mon, 4 Nov 2024 22:31:27 -0500
Subject: Set up framework for testing touch events

This includes a change to tools/run that exposes the dev server on my
local network. This change should not make it into the final form of
this branch.

This is so I can use actual for real touch events on my actual for real
phone, hooked up for remote debugging to my computer so I can see
console events etc.
---
 ui/routes/(app)/+layout.svelte | 35 +++++++++++++++++++++++++++++++++++
 1 file changed, 35 insertions(+)

(limited to 'ui/routes/(app)/+layout.svelte')

diff --git a/ui/routes/(app)/+layout.svelte b/ui/routes/(app)/+layout.svelte
index ae3dc6a..acaea53 100644
--- a/ui/routes/(app)/+layout.svelte
+++ b/ui/routes/(app)/+layout.svelte
@@ -25,6 +25,40 @@
     messages.update((value) => value.setMessages(boot.messages));
   }
 
+  function setTouchEvents() {
+      document.addEventListener("touchstart", processTouchStart);
+      document.addEventListener("touchmove", processTouchMove);
+      document.addEventListener("touchcancel", processTouchCancel);
+      document.addEventListener("touchend", processTouchEnd);
+  }
+
+  function processTouchStart(ev) {
+      ev.preventDefault();
+      switch (ev.touches.length) {
+          case 1:
+              console.log("touch: single");
+              break;
+          case 2:
+              console.log("touch: double");
+              break;
+          case 3:
+              console.log("touch: triple");
+              break;
+          default:
+              console.log("touch: unsupported");
+              break;
+      }
+  }
+
+  function processTouchMove(ev) {
+  }
+
+  function processTouchCancel(ev) {
+  }
+
+  function processTouchEnd(ev) {
+  }
+
   onMount(async () => {
     let response = await boot();
     switch (response.status) {
@@ -45,6 +79,7 @@
         break;
     }
     loading = false;
+    setTouchEvents();
   });
 
   onDestroy(async () => {
-- 
cgit v1.2.3


From 0be2370e0d332b5b8ae2548f6ffdd7869d441ab8 Mon Sep 17 00:00:00 2001
From: Kit La Touche <kit@transneptune.net>
Date: Mon, 18 Nov 2024 22:20:08 -0500
Subject: Add Tinygesture for swipe events

Hide and show channel menu thus. It doesn't gradually pull it out, which
is less than ideal, but it's good enough for now.
---
 package-lock.json              |  9 +++++-
 package.json                   |  3 +-
 ui/routes/(app)/+layout.svelte | 64 ++++++++++++++++++++----------------------
 3 files changed, 41 insertions(+), 35 deletions(-)

(limited to 'ui/routes/(app)/+layout.svelte')

diff --git a/package-lock.json b/package-lock.json
index 01b0cce..179731a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,7 +10,8 @@
 			"dependencies": {
 				"axios": "^1.7.7",
 				"dompurify": "^3.1.7",
-				"marked": "^14.1.3"
+				"marked": "^14.1.3",
+				"tinygesture": "^3.0.0"
 			},
 			"devDependencies": {
 				"@skeletonlabs/skeleton": "^2.10.3",
@@ -3372,6 +3373,12 @@
 				"globrex": "^0.1.2"
 			}
 		},
+		"node_modules/tinygesture": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/tinygesture/-/tinygesture-3.0.0.tgz",
+			"integrity": "sha512-UawUggtPCHy+N65ULpR/i6VLH8AzB7jWVvTNoXRFTJNh+ub6lP/SJCxzV/Ua7sJbCt9U9I79wKkKk3wbjcLdbQ==",
+			"license": "Apache-2.0"
+		},
 		"node_modules/to-regex-range": {
 			"version": "5.0.1",
 			"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
diff --git a/package.json b/package.json
index c51974c..0b96558 100644
--- a/package.json
+++ b/package.json
@@ -37,6 +37,7 @@
 	"dependencies": {
 		"axios": "^1.7.7",
 		"dompurify": "^3.1.7",
-		"marked": "^14.1.3"
+		"marked": "^14.1.3",
+		"tinygesture": "^3.0.0"
 	}
 }
diff --git a/ui/routes/(app)/+layout.svelte b/ui/routes/(app)/+layout.svelte
index 84c71ec..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,38 +29,18 @@
     messages.update((value) => value.setMessages(boot.messages));
   }
 
-  function setTouchEvents() {
-      document.addEventListener("touchstart", processTouchStart);
-      document.addEventListener("touchmove", processTouchMove);
-      document.addEventListener("touchcancel", processTouchCancel);
-      document.addEventListener("touchend", processTouchEnd);
-  }
-
-  function processTouchStart(ev) {
-      ev.preventDefault();
-      switch (ev.touches.length) {
-          case 1:
-              console.log("touch: single");
-              break;
-          case 2:
-              console.log("touch: double");
-              break;
-          case 3:
-              console.log("touch: triple");
-              break;
-          default:
-              console.log("touch: unsupported");
-              break;
-      }
-  }
-
-  function processTouchMove(ev) {
-  }
-
-  function processTouchCancel(ev) {
-  }
-
-  function processTouchEnd(ev) {
+  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 () => {
@@ -79,14 +62,18 @@
         // TODO: display error.
         break;
     }
+    setUpGestures();
+
     loading = false;
-    setTouchEvents();
   });
 
   onDestroy(async () => {
     if (events !== null) {
       events.close();
     }
+    if (gesture !== null) {
+        gesture.destroy();
+    }
   });
 </script>
 
@@ -113,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;
-- 
cgit v1.2.3


From 9a2efe0545e1e695d45f8c7577c3899a6a648e53 Mon Sep 17 00:00:00 2001
From: Owen Jacobson <owen@grimoire.ca>
Date: Tue, 19 Nov 2024 12:41:50 -0500
Subject: Patch out --host again; npm run format

---
 tools/run                      | 2 +-
 ui/routes/(app)/+layout.svelte | 7 ++++---
 2 files changed, 5 insertions(+), 4 deletions(-)

(limited to 'ui/routes/(app)/+layout.svelte')

diff --git a/tools/run b/tools/run
index 8c450cf..7f43a19 100755
--- a/tools/run
+++ b/tools/run
@@ -5,7 +5,7 @@
 if [ -z ${PILCROW_DEV+x} ]; then
     cargo run -- "$@"
 else
-    npm run dev -- --host 192.168.68.57 & PIDS[0]=$!
+    npm run dev -- & PIDS[0]=$!
     cargo run -- "$@" & PIDS[1]=$!
 
     trap "kill ${PIDS[*]}" SIGINT
diff --git a/ui/routes/(app)/+layout.svelte b/ui/routes/(app)/+layout.svelte
index 406d85a..cc900a6 100644
--- a/ui/routes/(app)/+layout.svelte
+++ b/ui/routes/(app)/+layout.svelte
@@ -72,7 +72,7 @@
       events.close();
     }
     if (gesture !== null) {
-        gesture.destroy();
+      gesture.destroy();
     }
   });
 </script>
@@ -113,8 +113,9 @@
    * 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;
+  html,
+  body {
+    overscroll-behavior-x: none;
   }
 
   #interface {
-- 
cgit v1.2.3


From 2f6adda366dc372609f214682ca866c104fc278e Mon Sep 17 00:00:00 2001
From: Kit La Touche <kit@transneptune.net>
Date: Thu, 21 Nov 2024 16:26:10 -0500
Subject: Use store.set where appropriate

If you're setting it to a static value, use set.
---
 ui/lib/components/LogOut.svelte | 2 +-
 ui/routes/(app)/+layout.svelte  | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

(limited to 'ui/routes/(app)/+layout.svelte')

diff --git a/ui/lib/components/LogOut.svelte b/ui/lib/components/LogOut.svelte
index 25dd5e9..52aa039 100644
--- a/ui/lib/components/LogOut.svelte
+++ b/ui/lib/components/LogOut.svelte
@@ -7,7 +7,7 @@
     event.preventDefault();
     const response = await logOut();
     if (200 <= response.status && response.status < 300) {
-      currentUser.update(() => null);
+      currentUser.set(null);
       goto('/login');
     }
   }
diff --git a/ui/routes/(app)/+layout.svelte b/ui/routes/(app)/+layout.svelte
index cc900a6..e542f24 100644
--- a/ui/routes/(app)/+layout.svelte
+++ b/ui/routes/(app)/+layout.svelte
@@ -20,10 +20,10 @@
   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));
@@ -51,11 +51,11 @@
         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:
-- 
cgit v1.2.3


From 5b2db6bbe7749d1b13a06c89a368b3b0849bc368 Mon Sep 17 00:00:00 2001
From: Owen Jacobson <owen@grimoire.ca>
Date: Tue, 26 Nov 2024 01:57:26 -0500
Subject: HTML-level styling inside non-top-level elements is not actually
 applied

---
 ui/app.css                     | 10 ++++++++++
 ui/routes/(app)/+layout.svelte | 10 ----------
 2 files changed, 10 insertions(+), 10 deletions(-)

(limited to 'ui/routes/(app)/+layout.svelte')

diff --git a/ui/app.css b/ui/app.css
index b5c61c9..b316dea 100644
--- a/ui/app.css
+++ b/ui/app.css
@@ -1,3 +1,13 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+/* 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;
+}
diff --git a/ui/routes/(app)/+layout.svelte b/ui/routes/(app)/+layout.svelte
index e542f24..bafd6b8 100644
--- a/ui/routes/(app)/+layout.svelte
+++ b/ui/routes/(app)/+layout.svelte
@@ -108,16 +108,6 @@
     --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;
-- 
cgit v1.2.3


From 9da480d92c6d81139e77eb6542986cf588ae3386 Mon Sep 17 00:00:00 2001
From: Owen Jacobson <owen@grimoire.ca>
Date: Tue, 26 Nov 2024 02:13:39 -0500
Subject: Don't sink the top bar so far down into the page.

---
 ui/routes/(app)/+layout.svelte | 2 +-
 ui/routes/+layout.svelte       | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

(limited to 'ui/routes/(app)/+layout.svelte')

diff --git a/ui/routes/(app)/+layout.svelte b/ui/routes/(app)/+layout.svelte
index bafd6b8..ad8227e 100644
--- a/ui/routes/(app)/+layout.svelte
+++ b/ui/routes/(app)/+layout.svelte
@@ -103,7 +103,7 @@
   /* 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;
   }
diff --git a/ui/routes/+layout.svelte b/ui/routes/+layout.svelte
index 8940659..26033e0 100644
--- a/ui/routes/+layout.svelte
+++ b/ui/routes/+layout.svelte
@@ -24,7 +24,7 @@
   let { children } = $props();
 </script>
 
-<AppBar class="app-bar">
+<AppBar padding="px-4 pt-0 pb-4">
   <svelte:fragment slot="lead">
     <button onclick={toggleMenu} class="cursor-pointer">
       <img class="w-8 h-8" alt="logo" src={logo} />
-- 
cgit v1.2.3

