Add message deletion

src/lib/components/Confirm.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
+  import Spinner from "@lib/components/Spinner.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
 
@@ -9,10 +10,22 @@
   export let message
   export let confirm
 
+  let loading = false
+
+  const tryConfirm = async () => {
+    loading = true
+
+    try {
+      await confirm()
+    } finally {
+      loading = false
+    }
+  }
+
   const back = () => history.back()
 </script>
 
-<form class="column gap-4" on:submit|preventDefault={confirm}>
+<form class="column gap-4" on:submit|preventDefault={tryConfirm}>
   <ModalHeader>
     <div slot="title">{title}</div>
     <div slot="info">{subtitle}</div>
@@ -23,8 +36,8 @@
       <Icon icon="alt-arrow-left" />
       Go back
     </Button>
-    <Button type="submit" class="btn btn-primary">
-      Confirm
+    <Button type="submit" class="btn btn-primary" disabled={loading}>
+      <Spinner {loading}>Confirm</Spinner>
       <Icon icon="alt-arrow-right" />
     </Button>
   </ModalFooter>

src/lib/components/Icon.svelte

@@ -66,6 +66,7 @@
   import ShopMinimalistic from "@assets/icons/Shop Minimalistic.svg?dataurl"
   import SmileCircle from "@assets/icons/Smile Circle.svg?dataurl"
   import SquareShareLine from "@assets/icons/Square Share Line.svg?dataurl"
+  import TrashBin2 from "@assets/icons/Trash Bin 2.svg?dataurl"
   import UFO3 from "@assets/icons/UFO 3.svg?dataurl"
   import UserHeart from "@assets/icons/User Heart.svg?dataurl"
   import UserCircle from "@assets/icons/User Circle.svg?dataurl"
@@ -137,6 +138,7 @@
     "smile-circle": SmileCircle,
     settings: Settings,
     "tag-horizontal": TagHorizontal,
+    "trash-bin-2": TrashBin2,
     "ufo-3": UFO3,
     "square-share-line": SquareShareLine,
     "user-heart": UserHeart,

src/lib/components/Tippy.svelte

@@ -22,6 +22,7 @@
       popover = tippy(element, {
         content: target,
         animation: "shift-away",
+        appendTo: document.querySelector('.tippy-target')!,
         ...params,
       })