feat(quickprofile): add button and escape exit to quickprofile

src/lib/components/ui/Modal.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { createEventDispatcher } from "svelte"
+    import { createEventDispatcher, onDestroy, onMount } from "svelte"
     import Controls from "../../layouts/Controls.svelte"
 
     const dispatch = createEventDispatcher()
@@ -12,9 +12,24 @@
     export let padded: boolean = false
     export let withControls: boolean = false
     export let hook: string = ""
+    export let escape: boolean = false
 
     let clazz = ""
     export { clazz as class }
+
+    let keyListener: any
+    onMount(() => {
+        keyListener = (e: KeyboardEvent) => {
+            if (escape && e.code === "Escape") {
+                dispatch("close")
+            }
+        }
+        document.addEventListener("keydown", keyListener)
+    })
+
+    onDestroy(() => {
+        document.removeEventListener("keydown", keyListener)
+    })
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->

src/lib/layouts/Profile.svelte

@@ -6,15 +6,20 @@
     import type { User } from "$lib/types"
     import { Notes } from "$lib/utils/Notes"
     import { get } from "svelte/store"
-    import { wallet } from "$lib/utils/Wallet"
     import { _ } from "svelte-i18n"
     import { getIntegrationColor, identityColor } from "$lib/utils/ProfileUtils"
+    import { createEventDispatcher } from "svelte"
 
     export let user: User | null = null
 
     $: friends = Store.state.friends
     $: currentUserShortId = get(Store.state.user)?.id.short
 
+    const dispatch = createEventDispatcher()
+    function onClose() {
+        dispatch("close")
+    }
+
     function isFriended(targetUser: User) {
         return $friends.some(friend => friend === targetUser.key)
     }
@@ -42,6 +47,11 @@
     </div>
     {#if user}
         <div class="content">
+            <div class="exit">
+                <Button hook="button-quick-profile-exit" icon appearance={Appearance.Primary} on:click={_ => onClose()}>
+                    <Icon icon={Shape.XMark} />
+                </Button>
+            </div>
             <div class="section">
                 <Label hook="label-quick-profile-status" text={$_("generic.status_message")} />
                 <Text hook="text-quick-profile-status">{user.profile.status_message}</Text>
@@ -87,6 +97,13 @@
         gap: var(--gap);
         padding: var(--padding);
         margin-right: var(--gap-less);
+        position: relative;
+
+        .exit {
+            position: absolute;
+            top: var(--padding);
+            right: var(--padding);
+        }
 
         .section {
             display: inline-flex;

src/routes/chat/+page.svelte

@@ -294,8 +294,9 @@
         <Modal
             on:close={_ => {
                 previewProfile = null
-            }}>
-            <Profile user={previewProfile} />
+            }}
+            escape>
+            <Profile user={previewProfile} on:close={_ => (previewProfile = null)} />
         </Modal>
     {/if}