feat: redesign toast notifications for mobile UX

src/app/components/Toast.svelte

@@ -1,20 +1,35 @@
 <script lang="ts">
   import {parse, renderAsHtml} from "@welshman/content"
   import {fly} from "@lib/transition"
-  import CloseCircle from "@assets/icons/close-circle.svg?dataurl"
-  import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import {toast, popToast} from "@app/util/toast"
 
+  let touchStartY = 0
+
   const onActionClick = () => {
     $toast!.action!.onclick()
     popToast($toast!.id)
   }
+
+  const onTouchStart = (e: TouchEvent) => {
+    touchStartY = e.touches[0].clientY
+  }
+
+  const onTouchEnd = (e: TouchEvent) => {
+    const delta = e.changedTouches[0].clientY - touchStartY
+    if (delta < -40) {
+      popToast($toast!.id)
+    }
+  }
 </script>
 
 {#if $toast}
   {@const theme = $toast.theme || "info"}
-  <div transition:fly class="bottom-sai right-sai toast z-toast">
+  <div
+    transition:fly={{y: -20}}
+    class="fixed z-toast top-[calc(var(--sait)+3.5rem)] left-2 right-2 flex flex-col gap-2 md:left-auto md:right-4 md:top-4 md:w-80"
+    ontouchstart={onTouchStart}
+    ontouchend={onTouchEnd}>
     {#key $toast.id}
       <div
         role="alert"
@@ -35,9 +50,6 @@
             <Component toast={$toast} {...props} />
           {/if}
         </p>
-        <Button class="flex items-center opacity-75" onclick={() => popToast($toast.id)}>
-          <Icon icon={CloseCircle} />
-        </Button>
       </div>
     {/key}
   </div>