Get rid of profile detail, redirect externally

src/app/components/ChannelMessage.svelte

@@ -7,16 +7,15 @@
   import {slideAndFade, conditionalTransition} from "@lib/transition"
   import Delay from "@lib/components/Delay.svelte"
   import Avatar from "@lib/components/Avatar.svelte"
-  import Button from "@lib/components/Button.svelte"
+  import Link from "@lib/components/Link.svelte"
   import Content from "@app/components/Content.svelte"
   import ThunkStatus from "@app/components/ThunkStatus.svelte"
   import ReplySummary from "@app/components/ReplySummary.svelte"
   import ReactionSummary from "@app/components/ReactionSummary.svelte"
-  import ProfileDetail from "@app/components/ProfileDetail.svelte"
   import ChannelThread from "@app/components/ChannelThread.svelte"
   import ChannelMessageEmojiButton from "@app/components/ChannelMessageEmojiButton.svelte"
   import ChannelMessageMenuButton from "@app/components/ChannelMessageMenuButton.svelte"
-  import {colors, tagRoom, deriveEvent} from "@app/state"
+  import {colors, tagRoom, deriveEvent, pubkeyLink} from "@app/state"
   import {publishDelete, publishReaction} from "@app/commands"
   import {pushDrawer} from "@app/modal"
 
@@ -36,8 +35,6 @@
 
   const transition = conditionalTransition(thunk, slideAndFade)
 
-  const showProfile = () => pushDrawer(ProfileDetail, {pubkey: event.pubkey})
-
   const openThread = () => {
     const root = $rootEvent || event
 
@@ -68,21 +65,25 @@
     class="group relative flex w-full flex-col gap-1 p-2 text-left transition-colors hover:bg-base-300">
     <div class="flex w-full gap-3">
       {#if showPubkey}
-        <Button on:click={showProfile} class="flex items-start">
+        <Link external href={pubkeyLink(event.pubkey)} class="flex items-start">
           <Avatar
             src={$profile?.picture}
             class="border border-solid border-base-content"
             size={10} />
-        </Button>
+        </Link>
       {:else}
         <div class="w-10 min-w-10 max-w-10" />
       {/if}
       <div class="-mt-1 flex-grow pr-1">
         {#if showPubkey}
           <div class="flex items-center gap-2">
-            <Button class="text-sm font-bold" style="color: {colorValue}" on:click={showProfile}>
+            <Link
+              external
+              href={pubkeyLink(event.pubkey)}
+              class="text-sm font-bold"
+              style="color: {colorValue}">
               {$profileDisplay}
-            </Button>
+            </Link>
             <span class="text-xs opacity-50">{formatTimestampAsTime(event.created_at)}</span>
           </div>
         {/if}

src/app/components/Chat.svelte

@@ -30,11 +30,10 @@
   import ProfileName from "@app/components/ProfileName.svelte"
   import ProfileCircle from "@app/components/ProfileCircle.svelte"
   import ProfileCircles from "@app/components/ProfileCircles.svelte"
-  import ProfileDetail from "@app/components/ProfileDetail.svelte"
   import ProfileList from "@app/components/ProfileList.svelte"
   import ChatMessage from "@app/components/ChatMessage.svelte"
   import ChatCompose from "@app/components/ChannelCompose.svelte"
-  import {deriveChat, splitChatId, PLATFORM_NAME} from "@app/state"
+  import {deriveChat, splitChatId, PLATFORM_NAME, pubkeyLink} from "@app/state"
   import {pushModal} from "@app/modal"
   import {sendWrapped} from "@app/commands"
 
@@ -109,11 +108,10 @@
       <div slot="title" class="row-2">
         {#if others.length === 1}
           {@const pubkey = others[0]}
-          {@const showProfile = () => pushModal(ProfileDetail, {pubkey}, {drawer: true})}
+          <Link external href={pubkeyLink(pubkey)} class="row-2">
-          <Button on:click={showProfile} class="row-2">
             <ProfileCircle {pubkey} size={5} />
             <ProfileName {pubkey} />
-          </Button>
+          </Link>
         {:else}
           <ProfileCircles pubkeys={others} size={5} />
           <p class="overflow-hidden text-ellipsis whitespace-nowrap">

src/app/components/ChatMessage.svelte

@@ -5,6 +5,7 @@
   import {deriveProfile, deriveProfileDisplay, formatTimestampAsTime, pubkey} from "@welshman/app"
   import type {MergedThunk} from "@welshman/app"
   import Icon from "@lib/components/Icon.svelte"
+  import Link from "@lib/components/Link.svelte"
   import Tippy from "@lib/components/Tippy.svelte"
   import Avatar from "@lib/components/Avatar.svelte"
   import Button from "@lib/components/Button.svelte"
@@ -12,10 +13,8 @@
   import ReplySummary from "@app/components/ReplySummary.svelte"
   import ReactionSummary from "@app/components/ReactionSummary.svelte"
   import ThunkStatus from "@app/components/ThunkStatus.svelte"
-  import ProfileDetail from "@app/components/ProfileDetail.svelte"
   import ChatMessageMenu from "@app/components/ChatMessageMenu.svelte"
-  import {colors} from "@app/state"
+  import {colors, pubkeyLink} from "@app/state"
-  import {pushDrawer} from "@app/modal"
   import {makeDelete, makeReaction, sendWrapped} from "@app/commands"
 
   export let event: TrustedEvent
@@ -27,8 +26,6 @@
   const profileDisplay = deriveProfileDisplay(event.pubkey)
   const [_, colorValue] = colors[parseInt(hash(event.pubkey)) % colors.length]
 
-  const showProfile = () => pushDrawer(ProfileDetail, {pubkey: event.pubkey})
-
   const onReactionClick = async (content: string, events: TrustedEvent[]) => {
     const reaction = events.find(e => e.pubkey === $pubkey)
     const template = reaction ? makeDelete({event}) : makeReaction({event, content})
@@ -78,19 +75,23 @@
     <div class="chat-bubble mx-1 max-w-sm">
       <div class="flex w-full items-start gap-2">
         {#if showPubkey}
-          <Button on:click={showProfile}>
+          <Link external href={pubkeyLink(event.pubkey)}>
             <Avatar
               src={$profile?.picture}
               class="border border-solid border-base-content"
               size={8} />
-          </Button>
+          </Link>
         {/if}
         <div class="-mt-1 flex-grow pr-1">
           {#if showPubkey}
             <div class="flex items-center gap-2">
-              <Button class="text-sm font-bold" style="color: {colorValue}" on:click={showProfile}>
+              <Link
+                external
+                href={pubkeyLink(event.pubkey)}
+                class="text-sm font-bold"
+                style="color: {colorValue}">
                 {$profileDisplay}
-              </Button>
+              </Link>
               <span class="text-xs opacity-50">{formatTimestampAsTime(event.created_at)}</span>
             </div>
           {/if}

src/app/components/ContentMention.svelte

@@ -1,20 +1,14 @@
 <script lang="ts">
   import {displayProfile} from "@welshman/util"
   import {deriveProfile} from "@welshman/app"
-  import Button from "@lib/components/Button.svelte"
+  import Link from "@lib/components/Link.svelte"
-  import ProfileDetail from "@app/components/ProfileDetail.svelte"
+  import {pubkeyLink} from "@app/state"
-  import {pushDrawer} from "@app/modal"
 
   export let value
 
   const profile = deriveProfile(value.pubkey)
-
-  const onClick = (e: Event) => {
-    e.stopPropagation()
-    pushDrawer(ProfileDetail, {pubkey: value.pubkey})
-  }
 </script>
 
-<Button on:click={onClick} class="link-content">
+<Link external href={pubkeyLink(value.pubkey)} class="link-content">
   @{displayProfile($profile)}
-</Button>
+</Link>

src/app/components/Profile.svelte

@@ -1,6 +1,4 @@
 <script lang="ts">
-  import {nip19} from 'nostr-tools'
-  import {ctx} from "@welshman/lib"
   import {displayPubkey, getPubkeyTagValues, getListTags} from "@welshman/util"
   import {
     session,
@@ -12,12 +10,9 @@
     deriveProfileDisplay,
   } from "@welshman/app"
   import Link from "@lib/components/Link.svelte"
-  import Button from "@lib/components/Button.svelte"
   import Avatar from "@lib/components/Avatar.svelte"
   import WotScore from "@lib/components/WotScore.svelte"
-  import ProfileDetail from "@app/components/ProfileDetail.svelte"
+  import {pubkeyLink} from "@app/state"
-  import {pushDrawer} from "@app/modal"
-  import {entityLink} from "@app/state"
 
   export let pubkey
 
@@ -25,24 +20,20 @@
   const profileDisplay = deriveProfileDisplay(pubkey)
   const handle = deriveHandleForPubkey(pubkey)
   const score = deriveUserWotScore(pubkey)
-  const relays = ctx.app.router.FromPubkeys([pubkey]).getUrls()
-  const nprofile = nip19.nprofileEncode({pubkey, relays})
-
-  const onClick = () => pushDrawer(ProfileDetail, {pubkey})
 
   $: following =
     pubkey === $session!.pubkey || getPubkeyTagValues(getListTags($userFollows)).includes(pubkey)
 </script>
 
 <div class="flex max-w-full gap-3">
-  <Link external href={entityLink(nprofile)} class="py-1">
+  <Link external href={pubkeyLink(pubkey)} class="py-1">
     <Avatar src={$profile?.picture} size={10} />
   </Link>
   <div class="flex min-w-0 flex-col">
     <div class="flex items-center gap-2">
-      <Button class="text-bold overflow-hidden text-ellipsis" on:click={onClick}>
+      <Link external href={pubkeyLink(pubkey)} class="text-bold overflow-hidden text-ellipsis">
         {$profileDisplay}
-      </Button>
+      </Link>
       <WotScore score={$score} active={following} />
     </div>
     <div class="overflow-hidden text-ellipsis text-sm opacity-75">

src/app/components/ProfileDetail.svelte

@@ -1,123 +0,0 @@
-<script lang="ts">
-  import {onMount} from "svelte"
-  import {nip19} from "nostr-tools"
-  import {ctx, sleep, sortBy, flatten} from "@welshman/lib"
-  import {feedFromFilter} from "@welshman/feeds"
-  import {
-    NOTE,
-    displayProfile,
-    getListTags,
-    getPubkeyTagValues,
-    displayPubkey,
-    getAncestorTags,
-  } from "@welshman/util"
-  import {deriveEvents} from "@welshman/store"
-  import {
-    session,
-    repository,
-    userFollows,
-    tagPubkey,
-    follow,
-    unfollow,
-    deriveProfile,
-    displayNip05,
-    feedLoader,
-    tracker,
-  } from "@welshman/app"
-  import {createScroller} from "@lib/html"
-  import {fly} from "@lib/transition"
-  import Link from "@lib/components/Link.svelte"
-  import Avatar from "@lib/components/Avatar.svelte"
-  import Spinner from "@lib/components/Spinner.svelte"
-  import Content from "@app/components/Content.svelte"
-  import ThreadItem from "@app/components/ThreadItem.svelte"
-  import {entityLink} from "@app/state"
-
-  export let pubkey
-
-  const profile = deriveProfile(pubkey)
-  const pubkeyDisplay = displayPubkey(pubkey)
-  const filter = {kinds: [NOTE], authors: [pubkey]}
-  const events = deriveEvents(repository, {filters: [filter]})
-  const loader = feedLoader.getLoader(feedFromFilter(filter), {})
-  const relays = ctx.app.router.FromPubkeys([pubkey]).getUrls()
-  const nprofile = nip19.nprofileEncode({pubkey, relays})
-  const isSelf = $session!.pubkey === pubkey
-
-  let element: Element
-
-  onMount(() => {
-    const scroller = createScroller({
-      element,
-      onScroll: async () => {
-        const $loader = await loader
-
-        $loader(5)
-      },
-    })
-
-    return () => scroller.stop()
-  })
-</script>
-
-<div class="flex max-w-full flex-col gap-4 p-4" bind:this={element}>
-  {#if $profile}
-    <Link external href={entityLink(nprofile)} class="row-3 max-w-full justify-between">
-      <div class="row-3 min-w-0">
-        <div class="py-1">
-          <Avatar src={$profile?.picture} size={10} />
-        </div>
-        <div class="flex min-w-0 flex-col">
-          <div class="flex items-center gap-2">
-            <div class="text-bold overflow-hidden text-ellipsis">
-              {displayProfile($profile, pubkeyDisplay)}
-            </div>
-          </div>
-          <div class="overflow-hidden text-ellipsis text-sm opacity-75">
-            {$profile?.nip05 ? displayNip05($profile.nip05) : pubkeyDisplay}
-          </div>
-        </div>
-      </div>
-      {#if !isSelf}
-        {#if getPubkeyTagValues(getListTags($userFollows)).includes(pubkey)}
-          <button
-            type="button"
-            class="btn btn-neutral"
-            on:click|preventDefault={() => unfollow(pubkey)}>
-            Unfollow
-          </button>
-        {:else}
-          <button
-            type="button"
-            class="btn btn-primary"
-            on:click|preventDefault={() => follow(tagPubkey(pubkey))}>
-            Follow
-          </button>
-        {/if}
-      {/if}
-    </Link>
-    <Content event={{content: $profile.about, tags: []}} hideMedia />
-    <div class="flex flex-col gap-2">
-      {#each sortBy(e => -e.created_at, $events) as event (event.id)}
-        {#if flatten(Object.values(getAncestorTags(event.tags))).length === 0}
-          {@const [url] = Array.from(tracker.getRelays(event.id))}
-          <div in:fly>
-            <ThreadItem hideActions {url} {event} />
-          </div>
-        {/if}
-      {:else}
-        <p class="flex center my-12">
-          <Spinner loading />
-        </p>
-      {/each}
-    </div>
-  {:else}
-    <p class="center my-12 flex">
-      {#await sleep(3000)}
-        <Spinner loading />
-      {:then}
-        Unable to find this profile.
-      {/await}
-    </p>
-  {/if}
-</div>

src/app/components/ProfileMultiSelect.svelte

@@ -5,12 +5,12 @@
   import {profileSearch} from "@welshman/app"
   import Icon from "@lib/components/Icon.svelte"
   import Tippy from "@lib/components/Tippy.svelte"
+  import Link from "@lib/components/Link.svelte"
   import Button from "@lib/components/Button.svelte"
   import Suggestions from "@lib/editor/Suggestions.svelte"
   import SuggestionProfile from "@lib/editor/SuggestionProfile.svelte"
   import ProfileName from "@app/components/ProfileName.svelte"
-  import ProfileDetail from "@app/components/ProfileDetail.svelte"
+  import {pubkeyLink} from "@app/state"
-  import {pushDrawer} from "@app/modal"
 
   export let value: string[]
 
@@ -19,8 +19,6 @@
   let popover: Instance
   let instance: SvelteComponent
 
-  const onClick = (pubkey: string) => pushDrawer(ProfileDetail, {pubkey})
-
   const selectPubkey = (pubkey: string) => {
     term = ""
     popover.hide()
@@ -53,9 +51,9 @@
         <Button class="flex items-center" on:click={() => removePubkey(pubkey)}>
           <Icon icon="close-circle" size={4} class="-ml-1 mt-px" />
         </Button>
-        <Button on:click={() => onClick(pubkey)}>
+        <Link external href={pubkeyLink(pubkey)}>
           <ProfileName {pubkey} />
-        </Button>
+        </Link>
       </div>
     {/each}
   </div>

src/app/components/ThreadActions.svelte

@@ -50,9 +50,7 @@
   </Button>
   <div class="flex flex-grow justify-end gap-2">
     {#if $deleted}
-      <div class="btn btn-error btn-xs rounded-full">
+      <div class="btn btn-error btn-xs rounded-full">Deleted</div>
-        Deleted
-      </div>
     {/if}
     {#if showActivity}
       <div class="flex-inline btn btn-neutral btn-xs gap-1 rounded-full">

src/app/state.ts

@@ -1,7 +1,9 @@
 import twColors from "tailwindcss/colors"
 import {get, derived} from "svelte/store"
+import {nip19} from "nostr-tools"
 import type {Maybe} from "@welshman/lib"
 import {
+  ctx,
   setContext,
   remove,
   assoc,
@@ -132,6 +134,11 @@ export const imgproxy = (url: string, {w = 640, h = 1024} = {}) => {
 
 export const entityLink = (entity: string) => `https://coracle.social/${entity}`
 
+export const pubkeyLink = (
+  pubkey: string,
+  relays = ctx.app.router.FromPubkeys([pubkey]).getUrls(),
+) => entityLink(nip19.nprofileEncode({pubkey, relays}))
+
 export const tagRoom = (room: string, url: string) => [ROOM, room, url]
 
 export const getDefaultPubkeys = () => {

src/lib/components/Button.svelte

@@ -4,7 +4,7 @@
   $: className = `text-left ${$$props.class}`
 </script>
 
-{#if type === 'submit'}
+{#if type === "submit"}
   <button {...$$props} {type} class={className}>
     <slot />
   </button>

src/lib/components/FieldInline.svelte

@@ -6,7 +6,7 @@
     <slot name="input" />
   </div>
   {#if $$slots.info}
-    <p class="col-span-2 text-sm flex-end">
+    <p class="flex-end col-span-2 text-sm">
       <slot name="info" />
     </p>
   {/if}

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 Button from "@lib/components/Button.svelte"
+  import Link from "@lib/components/Link.svelte"
-  import ProfileDetail from "@app/components/ProfileDetail.svelte"
+  import {pubkeyLink} from "@app/state"
-  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">
-  <Button on:click={onClick} class={cx("link-content", {"link-content-selected": selected})}>
+  <Link
+    external
+    href={pubkeyLink(node.attrs.pubkey, node.attrs.relays)}
+    class={cx("link-content", {"link-content-selected": selected})}>
     @{displayProfile($profile)}
-  </Button>
+  </Link>
 </NodeViewWrapper>

src/routes/settings/+page.svelte

@@ -54,9 +54,7 @@
         type="checkbox"
         class="toggle toggle-primary"
         bind:checked={settings.show_media} />
-      <p slot="info">
+      <p slot="info">Use this to disable link previews and image rendering.</p>
-        Use this to disable link previews and image rendering.
-      </p>
     </FieldInline>
     <Field>
       <p slot="label">Muted Accounts</p>

src/routes/settings/about/+page.svelte

@@ -1,15 +1,9 @@
 <script lang="ts">
   import Link from "@lib/components/Link.svelte"
   import Icon from "@lib/components/Icon.svelte"
-  import Button from "@lib/components/Button.svelte"
+  import {PLATFORM_NAME, pubkeyLink} from "@app/state"
-  import ProfileDetail from "@app/components/ProfileDetail.svelte"
-  import {pushDrawer} from "@app/modal"
-  import {PLATFORM_NAME} from "@app/state"
 
-  const openProfile = () =>
+  const pubkey = "97c70a44366a6535c145b333f973ea86dfdc2d7a99da618c40c64705ad98e322"
-    pushDrawer(ProfileDetail, {
-      pubkey: "97c70a44366a6535c145b333f973ea86dfdc2d7a99da618c40c64705ad98e322",
-    })
 </script>
 
 <div class="mt-8 min-h-screen bg-base-200 sm:hero">
@@ -40,7 +34,7 @@
           <p class="text-sm">
             Built with 💜 by
             <span class="text-primary">
-              @<Button on:click={openProfile} class="link">hodlbod</Button>
+              @<Link external href={pubkeyLink(pubkey)} class="link">hodlbod</Link>
             </span>
           </p>
           <p class="text-xs">

src/routes/spaces/[relay]/threads/[id]/+page.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
-  import {onMount} from 'svelte'
+  import {onMount} from "svelte"
   import {sortBy, displayUrl, sleep} from "@welshman/lib"
   import {page} from "$app/stores"
   import {repository, subscribe} from "@welshman/app"
-  import type {Thunk} from "@welshman/app"
   import {deriveEvents} from "@welshman/store"
   import Icon from "@lib/components/Icon.svelte"
   import Link from "@lib/components/Link.svelte"