ui/lib/components/ChannelMeta.svelte


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
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>