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
42
43
44
45
46
47
48
49
50
51
52
53

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

  let {
    class: cssClass,
    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',
    {
      ['delete-armed']: deleteArmed,
    },
    cssClass,
  ]}
  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>