feat: Add visible timer to individual alerts

app/assets/stylesheets/elements/_alert.scss

@@ -20,6 +20,7 @@
 }
 
 .alert {
+  position: relative;
   display: flex;
   align-items: center;
   gap: 1em;
@@ -28,6 +29,7 @@
   border-radius: $border-radius;
   background: $green;
   box-shadow: 0 10px 10px rgba($black, .5);
+  overflow: hidden;
   color: $pure-white;
   font-size: 14px;
   text-decoration: none;
@@ -63,3 +65,19 @@
     background: darken($orange, 8%);
   }
 }
+
+@keyframes deplete-timer {
+  to {
+    width: 0%;
+  }
+}
+
+.alert__timer {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  height: 0.15rem;
+  width: 100%;
+  background: rgba($pure-white, 0.75);
+  animation: deplete-timer var(--timer) forwards linear;
+}

app/javascript/src/components/Alert.svelte

@@ -0,0 +1,27 @@
+<script>
+  import { onMount, onDestroy, createEventDispatcher } from "svelte"
+
+  export let text = ""
+  export let type = ""
+  export let key = ""
+
+  const timer = 5000
+  const dispatch = createEventDispatcher()
+
+  let timeout
+
+  onMount(() => setTimeout(close, timer))
+  onDestroy(() => { if (timeout) clearTimeout(timeout) })
+
+  function close() {
+    dispatch("close", key)
+  }
+</script>
+
+<div class="alert {type} static">
+  <p class="m-0">{text}</p>
+
+  <button class="button p-0 pl-1/16 pr-1/16 text-pure-white" on:click={close}>✕</button>
+
+  <div class="alert__timer" style="--timer: {timer}ms" />
+</div>

app/javascript/src/components/Alerts.svelte

@@ -1,12 +1,11 @@
 <script>
+  import Alert from "./Alert.svelte"
   import { slide } from "svelte/transition"
 
   // When alerts are passed from rails they are passed as a string
   // that is an array of arrays shaped like [[type, text], [type, text]]
   export let initialAlerts = ""
 
-  const timeout = 3000
-
   let alerts = []
 
   $: if (initialAlerts) JSON.parse(initialAlerts)?.forEach(([type, text]) => add({ text, type: `alert--${ type }` }))
@@ -15,21 +14,17 @@
     alerts = [...alerts, { ...alert, key: Math.random() }]
   }
 
-  function close(index) {
-    alerts = alerts.filter((_, i) => i !== index)
+  function close(key) {
+    alerts = alerts.filter((a) => a.key !== key)
   }
 </script>
 
 <svelte:window on:alert={({ detail }) => add(detail)} />
 
 <div class="alerts">
-  {#each alerts as { text, type, key }, i (key)}
+  {#each alerts as { text, type, key } (key)}
     <div transition:slide={{ duration: 200 }}>
-      <div class="alert {type} static">
-        <p class="m-0">{text}</p>
-
-        <button class="button p-0 pl-1/16 pr-1/16 text-pure-white" on:click={() => close(i)}>✕</button>
-      </div>
+      <Alert {text} {type} {key} on:close={({ detail }) => close(detail)} />
     </div>
   {/each}
 </div>