ui/lib/components/Message.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

<script>
  import { DateTime } from 'luxon';

  let { id, at, body, renderedBody, editable = false, deleteMessage = async (id) => {} } = $props();
  let deleteArmed = $state(false);
  let atFormatted = $derived(at.toLocaleString(DateTime.DATETIME_SHORT));

  function ondelete(event) {
    event.preventDefault();
    if (deleteArmed) {
      deleteArmed = false;
      deleteMessage(id);
    } else {
      deleteArmed = true;
    }
  }

  function onmouseleave() {
    deleteArmed = false;
  }
</script>

<div
  class="message"
  class:delete-armed={deleteArmed}
  class:unsent={id === null}
  role="article"
  data-at={at}
  {onmouseleave}
>
  <div class="handle">
    {atFormatted}
    {#if editable && id}
      <button onclick={ondelete}>&#x1F5D1;&#xFE0F;</button>
    {/if}
  </div>
  <section class="message-body">
    <!-- eslint-disable-next-line svelte/no-at-html-tags -->
    {@html renderedBody}
  </section>
</div>