Open profiles in drawer

src/lib/components/Drawer.svelte

@@ -30,7 +30,7 @@
   </div>
   <div class="drawer-side z-modal">
     <label for={id} aria-label="close sidebar" class="drawer-overlay"></label>
-    <div class="menu min-h-full w-80 bg-base-200 p-0 text-base-content">
+    <div class="menu overflow-auto h-full w-80 bg-base-200 p-0 text-base-content">
       <slot />
     </div>
   </div>

src/lib/editor/EditMention.svelte

@@ -4,20 +4,20 @@
   import {NodeViewWrapper} from "svelte-tiptap"
   import {displayProfile} from "@welshman/util"
   import {deriveProfile} from "@welshman/app"
-  import Link from "@lib/components/Link.svelte"
-  import {entityLink} from "@app/state"
+  import Button from "@lib/components/Button.svelte"
+  import ProfileDetail from "@app/components/ProfileDetail.svelte"
+  import {pushDrawer} from "@app/modal"
 
   export let node: NodeViewProps["node"]
   export let selected: NodeViewProps["selected"]
 
+  const onClick = () => pushDrawer(ProfileDetail, {pubkey: node.attrs.pubkey})
+
   $: profile = deriveProfile(node.attrs.pubkey, node.attrs.relays)
 </script>
 
 <NodeViewWrapper class="inline">
-  <Link
-    external
-    href={entityLink(node.attrs.nprofile)}
-    class={cx("link-content", {"link-content-selected": selected})}>
+  <Button on:click={onClick} class={cx("link-content", {"link-content-selected": selected})}>
     @{displayProfile($profile)}
-  </Link>
+  </Button>
 </NodeViewWrapper>