adds profile sharing

web/src/lib/components/nav_bar.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
     import { afterNavigate, goto } from "$app/navigation";
+    import { page } from "$app/stores";
     import LogoText from "$lib/components/logo/logo_text.svelte";
     import { theme, toggleTheme } from "$lib/stores/theme_store";
     import { currentUser, logout } from "$lib/stores/user_store";
@@ -10,8 +11,6 @@
     import Drawer from "./base/drawer.svelte";
     import Dropdown from "./base/dropdown.svelte";
     import LogoTextLight from "./logo/logo_text_light.svelte";
-    import { page } from "$app/stores";
-    import NotificationCard from "./notification/notification_card.svelte";
     import NotificationDropdown from "./notification/notification_dropdown.svelte";
 
     let navBarItems = [

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

@@ -0,0 +1,75 @@
+<script lang="ts">
+    import { page } from "$app/stores";
+    import Modal from "$lib/components/base/modal.svelte";
+    import QrCodeWithLogo from "$lib/vendor/qr-code-with-logos";
+    import { onMount } from "svelte";
+    import { _ } from "svelte-i18n";
+    import TextField from "../base/text_field.svelte";
+    import { show_toast } from "$lib/stores/toast_store";
+
+    export let openModal: (() => void) | undefined = undefined;
+    export let closeModal: (() => void) | undefined = undefined;
+
+    let qrcode: any | null = null;
+
+    onMount(() => {
+        qrcode = new QrCodeWithLogo({
+            content: $page.url.href,
+            image: document.getElementById("qrcode") as HTMLImageElement,
+            logo: {
+                src: "/favicon.png",
+            },
+        });
+    });
+
+    function copyURLToClipboard() {
+        navigator.clipboard.writeText($page.url.href);
+        show_toast({
+            text: $_("link-copied"),
+            icon: "circle-info",
+            type: "info",
+        });
+    }
+
+    function downloadQRCode() {
+        if (!qrcode) {
+            return;
+        }
+        qrcode.downloadImage();
+    }
+</script>
+
+<Modal
+    id="password-modal"
+    size="max-w-xl"
+    title={$_("share-profile")}
+    bind:openModal
+    bind:closeModal
+>
+    <div class="flex" slot="content">
+        <div class="space-y-2">
+            <img class="w-64" id="qrcode" alt="QR Code" />
+            <button
+                class="btn-secondary w-full"
+                on:click={() => downloadQRCode()}
+            >
+                <i class="fa fa-download mr-2"></i>
+                <span>{$_("download")}</span>
+            </button>
+        </div>
+        <div class="space-y-4">
+            <p>
+                Send this link or the QR code on the left to someone to share
+                your profile.
+            </p>
+            <div class="flex gap-x-2 items-center">
+                <div class="basis-full">
+                    <TextField value={$page.url.href} disabled></TextField>
+                </div>
+                <button class="btn-icon" on:click={copyURLToClipboard}>
+                    <i class="fa-regular fa-copy"></i>
+                </button>
+            </div>
+        </div>
+    </div>
+</Modal>

web/src/lib/i18n/locales/de.json

@@ -71,6 +71,7 @@
   "display-as": "Anzeigen als",
   "distance": "Distanz",
   "documentation": "Dokumentation",
+  "download": "",
   "draw-a-route": "Route zeichnen",
   "driving": "Auto",
   "duration": "Dauer",
@@ -236,6 +237,7 @@
   "settings-privacy-trails-private": "",
   "settings-privacy-trails-public": "",
   "share": "Teilen",
+  "share-profile": "",
   "share-this-list": "Diese Liste teilen",
   "share-this-trail": "Diese Route teilen",
   "shared": "Geteilt",

web/src/lib/i18n/locales/en.json

@@ -71,6 +71,7 @@
   "display-as": "Display as",
   "distance": "Distance",
   "documentation": "Documentation",
+  "download": "Download",
   "draw-a-route": "Draw a route",
   "driving": "Driving",
   "duration": "Duration",
@@ -236,6 +237,7 @@
   "settings-privacy-trails-private": "Your trails are private by default. No one except you will be able to see them. You can change this setting at any point for individual trails.",
   "settings-privacy-trails-public": "Your trails are public by default. Everyone will be able to see them. You can change this setting at any point for individual trails.",
   "share": "Share",
+  "share-profile": "Share profile",
   "share-this-list": "Share this list",
   "share-this-trail": "Share this trail",
   "shared": "Shared",

web/src/lib/i18n/locales/fr.json

@@ -71,6 +71,7 @@
   "display-as": "Afficher en tant que",
   "distance": "Distance",
   "documentation": "Documentation",
+  "download": "",
   "draw-a-route": "",
   "driving": "",
   "duration": "",
@@ -236,6 +237,7 @@
   "settings-privacy-trails-private": "",
   "settings-privacy-trails-public": "",
   "share": "",
+  "share-profile": "",
   "share-this-list": "",
   "share-this-trail": "",
   "shared": "",

web/src/lib/i18n/locales/hu.json

@@ -71,6 +71,7 @@
   "display-as": "Megjelenítés mint",
   "distance": "Távolság",
   "documentation": "Dokumentáció",
+  "download": "",
   "draw-a-route": "",
   "driving": "",
   "duration": "",
@@ -236,6 +237,7 @@
   "settings-privacy-trails-private": "",
   "settings-privacy-trails-public": "",
   "share": "",
+  "share-profile": "",
   "share-this-list": "",
   "share-this-trail": "",
   "shared": "",

web/src/lib/i18n/locales/it.json

@@ -71,6 +71,7 @@
   "display-as": "Visualizza come",
   "distance": "Distanza",
   "documentation": "Documentazione",
+  "download": "",
   "draw-a-route": "Disegna un percorso",
   "driving": "Guida",
   "duration": "",
@@ -236,6 +237,7 @@
   "settings-privacy-trails-private": "",
   "settings-privacy-trails-public": "",
   "share": "Condividi",
+  "share-profile": "",
   "share-this-list": "",
   "share-this-trail": "Condividi questo percorso",
   "shared": "",

web/src/lib/i18n/locales/nl.json

@@ -71,6 +71,7 @@
   "display-as": "Tonen als",
   "distance": "Afstand",
   "documentation": "Documentatie",
+  "download": "",
   "draw-a-route": "",
   "driving": "",
   "duration": "",
@@ -236,6 +237,7 @@
   "settings-privacy-trails-private": "",
   "settings-privacy-trails-public": "",
   "share": "",
+  "share-profile": "",
   "share-this-list": "",
   "share-this-trail": "",
   "shared": "",

web/src/lib/i18n/locales/pl.json

@@ -71,6 +71,7 @@
   "display-as": "Wyświetl jako",
   "distance": "Dystans",
   "documentation": "Dokumentacja",
+  "download": "",
   "draw-a-route": "",
   "driving": "",
   "duration": "",
@@ -236,6 +237,7 @@
   "settings-privacy-trails-private": "",
   "settings-privacy-trails-public": "",
   "share": "",
+  "share-profile": "",
   "share-this-list": "",
   "share-this-trail": "",
   "shared": "",

web/src/lib/i18n/locales/pt.json

@@ -71,6 +71,7 @@
   "display-as": "Exibir como",
   "distance": "Distância",
   "documentation": "Documentação",
+  "download": "",
   "draw-a-route": "",
   "driving": "",
   "duration": "",
@@ -236,6 +237,7 @@
   "settings-privacy-trails-private": "",
   "settings-privacy-trails-public": "",
   "share": "",
+  "share-profile": "",
   "share-this-list": "",
   "share-this-trail": "",
   "shared": "",

web/src/lib/i18n/locales/zh.json

@@ -71,6 +71,7 @@
   "display-as": "显示方式",
   "distance": "距离",
   "documentation": "文档",
+  "download": "",
   "draw-a-route": "",
   "driving": "",
   "duration": "",
@@ -236,6 +237,7 @@
   "settings-privacy-trails-private": "",
   "settings-privacy-trails-public": "",
   "share": "",
+  "share-profile": "",
   "share-this-list": "",
   "share-this-trail": "",
   "shared": "",

web/src/routes/profile/[id]/+layout.svelte

@@ -3,12 +3,16 @@
     import { page } from "$app/stores";
     import Button from "$lib/components/base/button.svelte";
     import type { SelectItem } from "$lib/components/base/select.svelte";
+    import ProfileShareModal from "$lib/components/profile/profile_share_modal.svelte";
     import { follows_create, follows_delete } from "$lib/stores/follow_store";
     import { currentUser } from "$lib/stores/user_store";
     import { getFileURL } from "$lib/util/file_util";
     import { _ } from "svelte-i18n";
+
     export let data;
 
+    let openShareModal: () => void;
+
     let followLoading: boolean = false;
 
     const profileLinks: SelectItem[] = [
@@ -115,9 +119,18 @@
         </div>
         {#if data.isOwnProfile}
             <div class="px-6 mb-4 flex flex-col gap-2">
-                <button class="btn-secondary basis-full">Share profile</button>
-                <a class="btn-secondary text-center basis-full" href="/settings/profile">{$_("settings")}</a>
+                <button
+                    class="btn-secondary basis-full"
+                    on:click={() => openShareModal()}
+                    >{$_("share-profile")}</button
+                >
+                <a
+                    class="btn-secondary text-center basis-full"
+                    href="/settings/profile">{$_("settings")}</a
+                >
             </div>
+            <ProfileShareModal bind:openModal={openShareModal}
+            ></ProfileShareModal>
         {/if}
     </div>
     <slot></slot>

web/src/routes/settings/account/+page.svelte

@@ -1,9 +1,6 @@
 <script lang="ts">
     import { goto } from "$app/navigation";
     import { page } from "$app/stores";
-    import { type RadioItem } from "$lib/components/base/radio_group.svelte";
-    import { type SearchItem } from "$lib/components/base/search.svelte";
-    import { type SelectItem } from "$lib/components/base/select.svelte";
     import ConfirmModal from "$lib/components/confirm_modal.svelte";
     import EmailModal from "$lib/components/settings/email_modal.svelte";
     import PasswordModal from "$lib/components/settings/password_modal.svelte";
@@ -14,26 +11,14 @@
         users_delete,
         users_update,
     } from "$lib/stores/user_store";
-    import { country_codes } from "$lib/util/country_code_util";
     import { onMount } from "svelte";
     import { _ } from "svelte-i18n";
 
     const settings = $page.data.settings;
 
-    const mapFocus: SelectItem[] = [
-        { text: $_("trail", { values: { n: 2 } }), value: "trails" },
-        { text: $_("location"), value: "location" },
-    ];
-
-    const units: RadioItem[] = [
-        { text: $_("metric"), value: "metric" },
-        { text: $_("imperial"), value: "imperial" },
-    ];
-
     let selectedLanguage = "en";
     let selectedMapFocus = "trails";
 
-    let searchDropdownItems: SearchItem[] = [];
     let citySearchQuery: string = "";
 
     let openConfirmModal: () => void;