From e6cba7c6d273b400eb70d10b1cab8a3bcc42b251 Mon Sep 17 00:00:00 2001
From: Kit La Touche <kit@transneptune.net>
Date: Sun, 3 Aug 2025 23:02:37 -0400
Subject: Add preliminary notifications UX in settings area

Not wired up to any server actions yet.
---
 ui/lib/components/NotificationSettings.svelte | 42 +++++++++++++++++++++++++++
 ui/lib/components/Toggle.svelte               | 11 +++++++
 2 files changed, 53 insertions(+)
 create mode 100644 ui/lib/components/NotificationSettings.svelte
 create mode 100644 ui/lib/components/Toggle.svelte

(limited to 'ui/lib/components')

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>
-- 
cgit v1.2.3