strart trail sharing implementation

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

@@ -18,6 +18,7 @@
     import TrailExportModal from "./trail_export_modal.svelte";
     import JSZip from "jszip";
     import { getFileURL, saveAs } from "$lib/util/file_util";
+    import TrailShareModal from "./trail_share_modal.svelte";
 
     export let trail: Trail;
     export let mode: "overview" | "map";
@@ -25,6 +26,7 @@
     let openConfirmModal: () => void;
     let openListSelectModal: () => void;
     let openExportModal: () => void;
+    let openShareModal: () => void;
 
     const dropdownItems: DropdownItem[] = [
         mode == "overview"
@@ -47,6 +49,7 @@
             : []),
         { text: $_("print"), value: "print", icon: "print" },
         { text: $_("add-to-list"), value: "list", icon: "bookmark" },
+        { text: $_("share"), value: "share", icon: "share" },
         { text: $_("edit"), value: "edit", icon: "pen" },
         { text: $_("delete"), value: "delete", icon: "trash" },
     ];
@@ -69,6 +72,8 @@
                 ?.focus();
         } else if (item.value == "print") {
             goto(`/map/trail/${trail.id}/print`);
+        } else if (item.value == "share") {           
+            openShareModal();
         } else if (item.value == "download") {
             openExportModal();
         } else if (item.value == "edit") {
@@ -84,9 +89,11 @@
         summitLog: boolean;
     }) {
         try {
-            let fileData: string = await trail2gpx(trail);            
+            let fileData: string = await trail2gpx(trail);
             if (exportSettings.fileFormat == "json") {
-                fileData = JSON.stringify(gpx(new DOMParser().parseFromString(fileData, "text/xml")));
+                fileData = JSON.stringify(
+                    gpx(new DOMParser().parseFromString(fileData, "text/xml")),
+                );
             }
             const zip = new JSZip();
             zip.file(`${trail.name}.${exportSettings.fileFormat}`, fileData);
@@ -101,12 +108,15 @@
                     photoFolder?.file(photo, photoData, { base64: true });
                 }
             }
-            if(exportSettings.summitLog) {
-                let summitLogString = ""
+            if (exportSettings.summitLog) {
+                let summitLogString = "";
                 for (const summitLog of trail.expand.summit_logs) {
-                    summitLogString += `${summitLog.date},${summitLog.text}\n`
+                    summitLogString += `${summitLog.date},${summitLog.text}\n`;
                 }
-                zip.file(`${trail.name} - ${$_("summit-book")}.csv`, summitLogString)
+                zip.file(
+                    `${trail.name} - ${$_("summit-book")}.csv`,
+                    summitLogString,
+                );
             }
             const blob = await zip.generateAsync({ type: "blob" });
             saveAs(blob, `${trail.name}.zip`);
@@ -179,3 +189,4 @@
     bind:openModal={openExportModal}
     on:export={(e) => exportTrail(e.detail)}
 ></TrailExportModal>
+<TrailShareModal bind:openModal={openShareModal}></TrailShareModal>

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

@@ -0,0 +1,77 @@
+<script lang="ts">
+    import Modal from "$lib/components/base/modal.svelte";
+    import { createEventDispatcher } from "svelte";
+    import { _ } from "svelte-i18n";
+    import Button from "../base/button.svelte";
+    import Search, { type SearchItem } from "../base/search.svelte";
+    import { users_search } from "$lib/stores/user_store";
+    import type { User } from "$lib/models/user";
+    import { show_toast } from "$lib/stores/toast_store";
+
+    export let openModal: (() => void) | undefined = undefined;
+    export let closeModal: (() => void) | undefined = undefined;
+
+    const dispatch = createEventDispatcher();
+
+    let copyButtonText = $_("copy-link");
+
+    let searchItems: SearchItem[] = [];
+
+    async function updateUsers(q: string) {
+        try {
+            const users: User[] = await users_search(q);
+            searchItems = users.map((u) => ({
+                text: u.username!,
+                value: u.id,
+                icon: "user"
+            }))
+        } catch (e) {
+            console.error(e);
+            show_toast({
+                type: "error",
+                icon: "close",
+                text: "Error during search",
+            });
+        }
+    }
+
+    function copyURLToClipboard() {
+        navigator.clipboard.writeText(window.location.href);
+
+        copyButtonText = $_("link-copied");
+        setTimeout(() => (copyButtonText = $_("copy-link")), 3000);
+    }
+
+    function close() {
+        searchItems = [];
+        dispatch("save");
+        closeModal!();
+    }
+</script>
+
+<Modal
+    id="share-modal"
+    title="Share this trail"
+    size="max-w-lg"
+    bind:openModal
+    bind:closeModal
+>
+    <div slot="content">
+        <Search
+            on:update={(e) => updateUsers(e.detail)}
+            placeholder={`${$_("username")}`}
+            items={searchItems}
+        ></Search>
+    </div>
+    <div slot="footer" class="flex justify-between items-center gap-4">
+        <Button
+            secondary={true}
+            disabled={copyButtonText == $_("link-copied")}
+            on:click={copyURLToClipboard}
+        >
+            <i class="fa fa-link mr-2"></i>
+            {copyButtonText}
+        </Button>
+        <button class="btn-primary" on:click={close}>{$_("close")}</button>
+    </div></Modal
+>