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>