Add preliminary notifications UX in settings area

Not wired up to any server actions yet.

5 files changed, 99 insertions, 0 deletions

diff --git a/ui/app.css b/ui/app.css
index 714c9f7..4f0f5a3 100644
--- a/ui/app.css
+++ b/ui/app.css
@@ -9,6 +9,7 @@
 @import url('styles/messages.css');
 @import url('styles/textarea.css');
 @import url('styles/forms.css');
+@import url('styles/toggles.css');
 @import url('styles/swatches.css');
 @import url('styles/invites.css');
 
diff --git a/ui/lib/components/NotificationSettings.svelte b/ui/lib/components/NotificationSettings.svelte
new file mode 100644
index 0000000..c690b21
--- /dev/null
+++ b/ui/lib/components/NotificationSettings.svelte
@@ -0,0 +1,42 @@
+<script>
+  import Toggle from '$lib/components/Toggle.svelte';
+  // let { invites, createInvite = async () => {} } = $props();
+
+  async function onsubmit(event) {
+    event.preventDefault();
+    await createInvite();
+  }
+</script>
+
+<h2>Notify me when:</h2>
+
+<Toggle
+    name="channel_created"
+    text="A new channel is created"
+    onclick={async () => {}}
+/>
+<Toggle
+    name="message_arrives"
+    text="A new message arrives in a channel"
+    onclick={async () => {}}
+/>
+<Toggle
+    name="message_arrives_username"
+    text="A new message containing your username arrives in a channel"
+    onclick={async () => {}}
+/>
+<Toggle
+    name="message_arrives_keyword"
+    text="A new message containing a keyword you have configured arrives in a channel"
+    onclick={async () => {}}
+/>
+<Toggle
+    name="own_message_stitched"
+    text="A message you wrote is stitched"
+    onclick={async () => {}}
+/>
+<Toggle
+    name="flagged_message_stitched"
+    text="A message you have flagged is stitched"
+    onclick={async () => {}}
+/>
diff --git a/ui/lib/components/Toggle.svelte b/ui/lib/components/Toggle.svelte
new file mode 100644
index 0000000..7e71b5a
--- /dev/null
+++ b/ui/lib/components/Toggle.svelte
@@ -0,0 +1,11 @@
+<script>
+  let { text, name, onclick = async () => {} } = $props();
+</script>
+
+<label>
+  <div class="toggle">
+    <input type="checkbox" name={name} onclick={onclick}/>
+    <span class="slider"></span>
+  </div>
+  { text }
+</label>
diff --git a/ui/routes/(app)/me/+page.svelte b/ui/routes/(app)/me/+page.svelte
index 0c960c8..5868398 100644
--- a/ui/routes/(app)/me/+page.svelte
+++ b/ui/routes/(app)/me/+page.svelte
@@ -1,6 +1,7 @@
 <script>
   import LogOut from '$lib/components/LogOut.svelte';
   import Invites from '$lib/components/Invites.svelte';
+  import NotificationSettings from '$lib/components/NotificationSettings.svelte';
   import ChangePassword from '$lib/components/ChangePassword.svelte';
 
   import { goto } from '$app/navigation';
@@ -31,4 +32,6 @@
 <hr />
 <Invites {invites} {createInvite} />
 <hr />
+<NotificationSettings />
+<hr />
 <LogOut {logOut} />
diff --git a/ui/styles/toggles.css b/ui/styles/toggles.css
new file mode 100644
index 0000000..c51d34a
--- /dev/null
+++ b/ui/styles/toggles.css
@@ -0,0 +1,42 @@
+.toggle {
+  position: relative;
+  display: inline-block;
+  width: 2rem;
+  height: 1rem;
+  border: 1px solid var(--colour-navbar-bg);
+  border-radius: 1rem;
+}
+
+.toggle input {
+  display: none;
+}
+
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #bbb;
+  transition: 0.4s;
+  border-radius: 1rem;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 1rem;
+  width: 1rem;
+  background-color: #fff;
+  transition: 0.4s;
+  border-radius: 50%;
+}
+
+input:checked + .slider {
+  background-color: var(--colour-navbar-bg);
+}
+
+input:checked + .slider:before {
+  transform: translateX(1rem);
+}