prevent some defaults

src/app/components/ChatMessage.svelte

@@ -16,6 +16,7 @@
   import {repository} from "@welshman/app"
   import Icon from "@lib/components/Icon.svelte"
   import Avatar from "@lib/components/Avatar.svelte"
+  import Button from "@lib/components/Button.svelte"
   import Content from "@app/components/Content.svelte"
   import ProfileDetail from "@app/components/ProfileDetail.svelte"
   import ChatMessageEmojiButton from "@app/components/ChatMessageEmojiButton.svelte"
@@ -52,31 +53,29 @@
     !isPending && !isPublished && findStatus($ps, [PublishStatus.Failure, PublishStatus.Timeout])
 </script>
 
-<button
-  type="button"
+<div
   class="group chat relative flex w-full flex-col gap-1 p-2 text-left"
   class:chat-start={event.pubkey !== $pubkey}
   class:chat-end={event.pubkey === $pubkey}>
   <div class="chat-bubble mx-1 max-w-sm">
     <div class="flex items-start gap-2">
       {#if showPubkey}
-        <button type="button" on:click|stopPropagation={showProfile}>
+        <Button on:click={showProfile}>
           <Avatar
             src={$profile?.picture}
             class="border border-solid border-base-content"
             size={10} />
-        </button>
+        </Button>
       {/if}
       <div class="-mt-1 flex-grow pr-1">
         {#if showPubkey}
           <div class="flex items-center gap-2">
-            <button
-              type="button"
+            <Button
               class="text-bold text-sm"
               style="color: {colorValue}"
-              on:click|stopPropagation={showProfile}>
+              on:click={showProfile}>
               {$profileDisplay}
-            </button>
+            </Button>
             <span class="text-xs opacity-50">{formatTimestampAsTime(event.created_at)}</span>
           </div>
         {/if}
@@ -118,13 +117,12 @@
         {/each}
       </div>
     {/if}
-    <button
-      class="join absolute -top-2 right-0 border border-solid border-neutral text-xs opacity-0 transition-all group-hover:opacity-100"
-      on:click|stopPropagation>
+    <Button
+      class="join absolute -top-2 right-0 border border-solid border-neutral text-xs opacity-0 transition-all group-hover:opacity-100">
       <ChatMessageEmojiButton {event} {pubkeys} />
-      <button class="btn join-item btn-xs">
+      <div class="btn join-item btn-xs">
         <Icon icon="menu-dots" size={4} />
-      </button>
-    </button>
+      </div>
+    </Button>
   </div>
-</button>
+</div>

src/app/components/ContentMention.svelte

@@ -9,7 +9,10 @@
 
   const profile = deriveProfile(value.pubkey)
 
-  const onClick = () => pushDrawer(ProfileDetail, {pubkey: value.pubkey})
+  const onClick = (e: Event) => {
+    e.stopPropagation()
+    pushDrawer(ProfileDetail, {pubkey: value.pubkey})
+  }
 </script>
 
 <Button on:click={onClick} class="link-content">

src/app/components/ContentQuote.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
+  import {nip19} from 'nostr-tools'
   import {Address} from "@welshman/util"
+  import Link from "@lib/components/Link.svelte"
   import Spinner from "@lib/components/Spinner.svelte"
   import NoteCard from "@app/components/NoteCard.svelte"
-  import {deriveEvent} from "@app/state"
+  import {deriveEvent, entityLink} from "@app/state"
 
   export let value
   export let depth = 0
@@ -10,11 +12,10 @@
   const {id, identifier, kind, pubkey, relays} = value
   const idOrAddress = id || new Address(kind, pubkey, identifier).toString()
   const event = deriveEvent(idOrAddress, relays)
-
-  let element: Element
+  const nevent = nip19.neventEncode({id, relays})
 </script>
 
-<button class="my-2 block max-w-full text-left" bind:this={element} on:click|stopPropagation>
+<Link external href={entityLink(nevent)} class="my-2 block max-w-full text-left">
   {#if $event}
     <NoteCard event={$event} class="bg-alt rounded-box p-4">
       <slot name="note-content" event={$event} {depth} />
@@ -24,4 +25,4 @@
       <Spinner loading>Loading event...</Spinner>
     </div>
   {/if}
-</button>
+</Link>

src/app/components/PeopleItem.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import {nip19} from 'nostr-tools'
   import {onMount} from "svelte"
   import {ago, append, first, sortBy, WEEK, ctx} from "@welshman/lib"
   import {NOTE, getAncestorTags, getListTags, getPubkeyTagValues} from "@welshman/util"
@@ -12,12 +13,14 @@
     formatTimestamp,
     formatTimestampRelative,
   } from "@welshman/app"
+  import Link from "@lib/components/Link.svelte"
   import Button from "@lib/components/Button.svelte"
   import Profile from "@app/components/Profile.svelte"
   import ProfileInfo from "@app/components/ProfileInfo.svelte"
   import Content from "@app/components/Content.svelte"
   import ProfileDetail from "@app/components/ProfileDetail.svelte"
   import {pushDrawer} from "@app/modal"
+  import {entityLink} from "@app/state"
 
   export let pubkey
 
@@ -40,24 +43,26 @@
   })
 </script>
 
-<div class="card2 bg-alt shadow-xl">
+<Button class="card2 bg-alt shadow-xl" on:click={onClick}>
   <Profile {pubkey} />
   <ProfileInfo {pubkey} />
   {#if roots.length > 0}
     {@const event = first(sortBy(e => -e.created_at, roots))}
+    {@const relays = ctx.app.router.Event(event).getUrls()}
+    {@const nevent = nip19.neventEncode({id: event.id, relays})}
     {@const following = getPubkeyTagValues(getListTags($userFollows)).includes(pubkey)}
     <div class="divider" />
-    <Button class="chat chat-start" on:click={onClick}>
+    <Link external href={entityLink(nevent)} class="chat chat-start">
       <div class="bg-alt chat-bubble text-left">
         <Content hideMedia={!following} {event} />
         <p class="text-right text-xs">{formatTimestamp(event.created_at)}</p>
       </div>
-    </Button>
+    </Link>
     <div class="flex gap-2">
-      <div class="badge badge-neutral">
+      <div class="badge badge-neutral bg-alt border-none">
         {roots.length} recent {roots.length === 1 ? "note" : "notes"}
       </div>
-      <div class="badge badge-neutral">Last posted {formatTimestampRelative(event.created_at)}</div>
+      <div class="badge badge-neutral bg-alt border-none">Last posted {formatTimestampRelative(event.created_at)}</div>
     </div>
   {/if}
-</div>
+</Button>

src/lib/components/Button.svelte

@@ -1,3 +1,3 @@
-<button on:click type="button" {...$$props}>
+<button on:click|stopPropagation type="button" {...$$props} class="text-left {$$props.class}">
   <slot />
 </button>

src/lib/components/Link.svelte

@@ -8,6 +8,7 @@
 <a
   {href}
   {...$$props}
+  on:click|stopPropagation
   class={cx($$props.class, "cursor-pointer")}
   rel={external ? "noopener noreferer" : ""}
   target={external ? "_blank" : ""}>

src/lib/html.ts

@@ -62,3 +62,4 @@ export const createScroller = ({
     },
   }
 }
+