trail save fix

web/src/lib/components/base/toast.svelte

@@ -1,37 +1,33 @@
 <script lang="ts">
-    import { toast } from "$lib/stores/toast_store";
+    import { closeToast, toastStore } from "$lib/stores/toast_store.svelte";
     import { fade } from "svelte/transition";
-
-    function closeToast() {
-        toast.set(null);
-    }
 </script>
 
-{#if $toast}
+{#each toastStore.toasts as t, i}
     <div
-        class="fixed px-4 py-3 shadow-xl rounded-xl border bottom-4 right-4 bg-white text-gray-500 flex items-center max-w-md"
-        style="z-index: 1001;"
+        class="fixed px-4 py-3 shadow-xl rounded-xl border right-4 bg-white text-gray-500 flex items-center max-w-md"
+        style="z-index: 1001; bottom: {16 + i * 72}px"
         in:fade={{ duration: 250 }}
         out:fade={{ duration: 250 }}
     >
         <i
-            class="fa fa-{$toast.icon} p-3 mr-2 rounded-lg"
-            class:success-toast={$toast.type == "success"}
-            class:error-toast={$toast.type == "error"}
+            class="fa fa-{t.icon} p-3 mr-2 rounded-lg"
+            class:success-toast={t.type == "success"}
+            class:error-toast={t.type == "error"}
         ></i>
         <p class="mr-4">
-            {$toast.text}
+            {t.text}
         </p>
         <button
             type="button"
             class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white ml-6"
-            onclick={closeToast}
+            onclick={() => closeToast(t)}
         >
             <i class="fa fa-close"></i>
             <span class="sr-only">Close modal</span>
         </button>
     </div>
-{/if}
+{/each}
 
 <style>
     .success-toast {

web/src/lib/components/profile/profile_share_modal.svelte

@@ -5,7 +5,7 @@
     import { onMount } from "svelte";
     import { _ } from "svelte-i18n";
     import TextField from "../base/text_field.svelte";
-    import { show_toast } from "$lib/stores/toast_store";
+    import { show_toast } from "$lib/stores/toast_store.svelte";
 
     let modal: Modal;
 

web/src/lib/components/trail/photo_picker.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { show_toast } from "$lib/stores/toast_store";
+    import { show_toast } from "$lib/stores/toast_store.svelte";
     import { getFileURL, readAsDataURLAsync } from "$lib/util/file_util";
     import { _ } from "svelte-i18n";
     import PhotoCard from "../photo_card.svelte";

web/src/lib/components/trail/trail_dropdown.svelte

@@ -7,7 +7,7 @@
         lists_index,
         lists_remove_trail,
     } from "$lib/stores/list_store";
-    import { show_toast } from "$lib/stores/toast_store";
+    import { show_toast } from "$lib/stores/toast_store.svelte";
     import { trails_delete } from "$lib/stores/trail_store";
     import { trail2gpx } from "$lib/util/gpx_util";
     import { gpx } from "$lib/vendor/toGeoJSON/toGeoJSON";

web/src/lib/components/trail/trail_info_panel.svelte

@@ -25,7 +25,7 @@
     import emptyStateTrailLight from "$lib/assets/svgs/empty_states/empty_state_trail_light.svg";
     import { pb } from "$lib/pocketbase";
     import { theme } from "$lib/stores/theme_store";
-    import { show_toast } from "$lib/stores/toast_store";
+    import { show_toast } from "$lib/stores/toast_store.svelte";
     import * as M from "maplibre-gl";
     import "photoswipe/style.css";
     import { onMount } from "svelte";

web/src/lib/components/user_search.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import type { User } from "$lib/models/user";
-    import { show_toast } from "$lib/stores/toast_store";
+    import { show_toast } from "$lib/stores/toast_store.svelte";
     import { users_search } from "$lib/stores/user_store";
     import { getFileURL } from "$lib/util/file_util";
     import Search, { type SearchItem } from "./base/search.svelte";

web/src/lib/components/waypoint/waypoint_modal.svelte

@@ -3,7 +3,7 @@
 
     import { WaypointCreateSchema } from "$lib/models/api/waypoint_schema";
     import { convertDMSToDD } from "$lib/models/gpx/utils";
-    import { show_toast } from "$lib/stores/toast_store";
+    import { show_toast } from "$lib/stores/toast_store.svelte";
     import { waypoint } from "$lib/stores/waypoint_store";
     import { cloneDeep } from "$lib/util/deep_util";
     import { icons } from "$lib/util/icon_util";