1 files changed, 44 insertions, 0 deletions
diff --git a/ui/lib/components/ChannelMeta.svelte b/ui/lib/components/ChannelMeta.svelte
new file mode 100644
index 0000000..2ee13b6
--- /dev/null
+++ b/ui/lib/components/ChannelMeta.svelte
@@ -0,0 +1,44 @@
+<script>
+  let { vapid, subscription, startExpanded = false, subscribe = async () => null } = $props();
+  let pending = $state(false);
+  let expanded = $state(startExpanded);
+
+  function onsubmit(callback) {
+    return async (evt) => {
+      evt.preventDefault();
+      // Without this, the toggleExpanded function defined below will trigger:
+      evt.stopPropagation();
+
+      pending = true;
+      try {
+        // TODO: is this working?
+        await callback();
+      } finally {
+        pending = false;
+      }
+    };
+  }
+
+  function toggleExpanded() {
+    // TODO: in messages.css we need to slide the whole div up, not leave its
+    // contents static. We need to show three little lines as a handle. We need
+    // to fix colours. We need to keep the meta consistently over the rest of
+    // the message list.  We need to fix mobile click-area. Too easy to hit the
+    // title and go to / instead.
+    // Also: we can start expanded optionally, if there is a message we need to
+    // show. This can work for prompts like "activate your notifications".
+    expanded = !expanded;
+  }
+</script>
+
+<div class="channel-meta {expanded ? 'expanded' : ''}" onclick={toggleExpanded}>
+  &nbsp;
+  <div class="inner">
+    {#if !subscription}
+      <form class="form" onsubmit={onsubmit(subscribe)}>
+        <button disabled={pending} type="submit">create push subscription</button>
+      </form>
+    {/if}
+  </div>
+  <div class="handle">&equiv;</div>
+</div>