Add preliminary notifications UX in settings area

Not wired up to any server actions yet.

2 files changed, 53 insertions, 0 deletions

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>