From 6ef291d755c43eb215241981b1b11fe30fd245b1 Mon Sep 17 00:00:00 2001
From: Jon Staab <shtaab@gmail.com>
Date: Wed, 9 Oct 2024 12:45:13 -0700
Subject: [PATCH] Open profiles in drawer

---
 src/app/components/Content.svelte            |  2 +-
 src/app/components/ContentMention.svelte     | 13 +++---
 src/app/components/NoteCard.svelte           |  5 ++-
 src/app/components/PeopleItem.svelte         | 11 +++--
 src/app/components/Profile.svelte            | 15 ++++---
 src/app/components/ProfileDetail.svelte      | 42 +++++++++++---------
 src/app/components/ProfileMultiSelect.svelte | 10 +++--
 src/lib/components/Drawer.svelte             |  2 +-
 src/lib/editor/EditMention.svelte            | 14 +++----
 src/routes/+layout.svelte                    |  2 +-
 src/routes/settings/about/+page.svelte       | 13 +++---
 11 files changed, 73 insertions(+), 56 deletions(-)

diff --git a/src/app/components/Content.svelte b/src/app/components/Content.svelte
index e124c168..066c54d3 100644
--- a/src/app/components/Content.svelte
+++ b/src/app/components/Content.svelte
@@ -113,7 +113,7 @@
     {/each}
   </div>
   {#if ellipsize}
-    <div class="relative z-feature -m-6 flex justify-center bg-gradient-to-t from-base-100 pt-12">
+    <div class="relative z-feature -m-6 flex justify-center bg-gradient-to-t from-base-100 py-2">
       <button type="button" class="btn" on:click|stopPropagation|preventDefault={expand}>
         See more
       </button>
diff --git a/src/app/components/ContentMention.svelte b/src/app/components/ContentMention.svelte
index 8101ee59..05306fec 100644
--- a/src/app/components/ContentMention.svelte
+++ b/src/app/components/ContentMention.svelte
@@ -1,16 +1,17 @@
 <script lang="ts">
-  import {nip19} from "nostr-tools"
   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 value
 
   const profile = deriveProfile(value.pubkey)
-  const nprofile = nip19.nprofileEncode(value)
+
+  const onClick = () => pushDrawer(ProfileDetail, {pubkey: value.pubkey})
 </script>
 
-<Link external href={entityLink(nprofile)} class="link-content">
+<Button on:click={onClick} class="link-content">
   @{displayProfile($profile)}
-</Link>
+</Button>
diff --git a/src/app/components/NoteCard.svelte b/src/app/components/NoteCard.svelte
index 59c24f55..2170d233 100644
--- a/src/app/components/NoteCard.svelte
+++ b/src/app/components/NoteCard.svelte
@@ -7,6 +7,7 @@
   import {entityLink} from "@app/state"
 
   export let event
+  export let hideProfile = false
 
   const relays = ctx.app.router.Event(event).getUrls()
   const nevent = nip19.neventEncode({id: event.id, relays})
@@ -14,7 +15,9 @@
 
 <div class="flex flex-col gap-2 {$$props.class}">
   <div class="flex justify-between gap-2">
-    <Profile pubkey={event.pubkey} />
+    {#if !hideProfile}
+      <Profile pubkey={event.pubkey} />
+    {/if}
     <Link external href={entityLink(nevent)} class="text-sm opacity-75">
       {formatTimestamp(event.created_at)}
     </Link>
diff --git a/src/app/components/PeopleItem.svelte b/src/app/components/PeopleItem.svelte
index 5ac3ded5..0932d27e 100644
--- a/src/app/components/PeopleItem.svelte
+++ b/src/app/components/PeopleItem.svelte
@@ -13,17 +13,20 @@
     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 {entityLink} from "@app/state"
+  import ProfileDetail from "@app/components/ProfileDetail.svelte"
+  import {pushDrawer} from "@app/modal"
 
   export let pubkey
 
   const filters: Filter[] = [{kinds: [NOTE], authors: [pubkey], since: ago(WEEK)}]
   const events = deriveEvents(repository, {filters})
 
+  const onClick = () => pushDrawer(ProfileDetail, {pubkey})
+
   $: roots = $events.filter(e => getAncestorTags(e.tags).replies.length === 0)
 
   onMount(async () => {
@@ -47,12 +50,12 @@
     {@const nevent = nip19.neventEncode({id: event.id, relays})}
     {@const following = getPubkeyTagValues(getListTags($userFollows)).includes(pubkey)}
     <div class="divider" />
-    <Link external class="chat chat-start" href={entityLink(nevent)}>
+    <Button class="chat chat-start" on:click={onClick}>
       <div class="chat-bubble">
         <Content hideMedia={!following} {event} />
         <p class="text-right text-xs">{formatTimestamp(event.created_at)}</p>
       </div>
-    </Link>
+    </Button>
     <div class="flex gap-2">
       <div class="badge badge-neutral">
         {roots.length} recent {roots.length === 1 ? "note" : "notes"}
diff --git a/src/app/components/Profile.svelte b/src/app/components/Profile.svelte
index b2fdb338..3aafc101 100644
--- a/src/app/components/Profile.svelte
+++ b/src/app/components/Profile.svelte
@@ -9,10 +9,11 @@
     displayHandle,
     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 {entityLink} from "@app/state"
+  import ProfileDetail from "@app/components/ProfileDetail.svelte"
+  import {pushDrawer} from "@app/modal"
 
   export let pubkey
 
@@ -22,18 +23,20 @@
   const handle = deriveHandleForPubkey(pubkey)
   const score = deriveUserWotScore(pubkey)
 
+  const onClick = () => pushDrawer(ProfileDetail, {pubkey})
+
   $: following = getPubkeyTagValues(getListTags($userFollows)).includes(pubkey)
 </script>
 
 <div class="flex max-w-full gap-3">
-  <Link external href={entityLink(npub)} class="py-1">
+  <Button on:click={onClick} class="py-1">
     <Avatar src={$profile?.picture} size={10} />
-  </Link>
+  </Button>
   <div class="flex min-w-0 flex-col">
     <div class="flex items-center gap-2">
-      <Link external class="text-bold overflow-hidden text-ellipsis" href={entityLink(npub)}>
+      <Button class="text-bold overflow-hidden text-ellipsis" on:click={onClick}>
         {$profileDisplay}
-      </Link>
+      </Button>
       <WotScore score={$score} active={following} />
     </div>
     <div class="overflow-hidden text-ellipsis text-sm opacity-75">
diff --git a/src/app/components/ProfileDetail.svelte b/src/app/components/ProfileDetail.svelte
index a6d064ac..eec51e8d 100644
--- a/src/app/components/ProfileDetail.svelte
+++ b/src/app/components/ProfileDetail.svelte
@@ -1,38 +1,35 @@
 <script lang="ts">
   import {onMount} from 'svelte'
-  import {sleep} from '@welshman/lib'
+  import {sleep, sortBy, flatten} from '@welshman/lib'
   import {feedFromFilter} from '@welshman/feeds'
-  import {NOTE, displayProfile, displayPubkey} from '@welshman/util'
+  import {NOTE, displayProfile, displayPubkey, getAncestorTags} from '@welshman/util'
+  import {deriveEvents} from '@welshman/store'
   import type {TrustedEvent} from '@welshman/util'
-  import {deriveProfile, displayNip05, feedLoader} from '@welshman/app'
+  import {repository, deriveProfile, displayNip05, feedLoader} from '@welshman/app'
   import {createScroller} from "@lib/html"
+  import {fly} from '@lib/transition'
   import Avatar from "@lib/components/Avatar.svelte"
   import Spinner from '@lib/components/Spinner.svelte'
   import Content from "@app/components/Content.svelte"
+  import NoteCard from "@app/components/NoteCard.svelte"
 
   export let pubkey
 
   const profile = deriveProfile(pubkey)
   const pubkeyDisplay = displayPubkey(pubkey)
-
-  const feed = feedFromFilter({kinds: [NOTE], authors: [pubkey]})
-
-  const loader = feedLoader.getLoader(feed, {
-    onEvent: (event: TrustedEvent) => {
-      events = events.concat(event)
-    },
-  })
+  const filter = {kinds: [NOTE], authors: [pubkey]}
+  const events = deriveEvents(repository, {filters: [filter]})
+  const loader = feedLoader.getLoader(feedFromFilter(filter))
 
   let element: Element
-  let events: TrustedEvent[] = []
 
   onMount(() => {
     const scroller = createScroller({
-      element: element,
+      element: element.closest('.menu')!,
       onScroll: async () => {
         const $loader = await loader
 
-        $loader(10)
+        $loader(5)
       },
     })
 
@@ -58,12 +55,19 @@
       </div>
     </div>
     <Content event={{content: $profile.about, tags: []}} hideMedia />
-    <p class="text-xl">Recent notes</p>
     <div class="flex flex-col gap-2">
-      {#each events as event (event.id)}
-        <div class="card2 bg-alt">
-          <Content {event} />
-        </div>
+      {#each sortBy(e => -e.created_at, $events) as event (event.id)}
+        {#if flatten(Object.values(getAncestorTags(event.tags))).length === 0}
+          <div class="card2 bg-alt" in:fly>
+            <NoteCard hideProfile {event}>
+              <Content {event} />
+            </NoteCard>
+          </div>
+        {/if}
+      {:else}
+        <p class="flex center my-12">
+          <Spinner loading />
+        </p>
       {/each}
     </div>
   {:else}
diff --git a/src/app/components/ProfileMultiSelect.svelte b/src/app/components/ProfileMultiSelect.svelte
index ccd5e90e..12f4daee 100644
--- a/src/app/components/ProfileMultiSelect.svelte
+++ b/src/app/components/ProfileMultiSelect.svelte
@@ -6,12 +6,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 Name from "@app/components/Name.svelte"
-  import {entityLink} from "@app/state"
+  import ProfileDetail from "@app/components/ProfileDetail.svelte"
+  import {pushDrawer} from "@app/modal"
 
   export let value: string[]
 
@@ -20,6 +20,8 @@
   let popover: Instance
   let instance: SvelteComponent
 
+  const onClick = (pubkey: string) => pushDrawer(ProfileDetail, {pubkey})
+
   const selectPubkey = (pubkey: string) => {
     term = ""
     popover.hide()
@@ -52,9 +54,9 @@
         <Button class="flex items-center" on:click={() => removePubkey(pubkey)}>
           <Icon icon="close-circle" size={4} class="-ml-1 mt-px" />
         </Button>
-        <Link href={entityLink(nip19.npubEncode(pubkey))}>
+        <Button on:click={() => onClick(pubkey)}>
           <Name {pubkey} />
-        </Link>
+        </Button>
       </div>
     {/each}
   </div>
diff --git a/src/lib/components/Drawer.svelte b/src/lib/components/Drawer.svelte
index a4f68202..be157d56 100644
--- a/src/lib/components/Drawer.svelte
+++ b/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>
diff --git a/src/lib/editor/EditMention.svelte b/src/lib/editor/EditMention.svelte
index 3f57d08b..18b56975 100644
--- a/src/lib/editor/EditMention.svelte
+++ b/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>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 5eaf3b86..814be7b5 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -111,7 +111,7 @@
   <div data-theme={$theme}>
     <div class="flex h-screen overflow-hidden">
       <PrimaryNav />
-      {#key $page.params}
+      {#key JSON.stringify($page.params)}
         <slot />
       {/key}
     </div>
diff --git a/src/routes/settings/about/+page.svelte b/src/routes/settings/about/+page.svelte
index a0143c5f..7a6beaa7 100644
--- a/src/routes/settings/about/+page.svelte
+++ b/src/routes/settings/about/+page.svelte
@@ -2,10 +2,11 @@
   import Link from "@lib/components/Link.svelte"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
-  import {entityLink} from "@app/state"
+  import ProfileDetail from '@app/components/ProfileDetail.svelte'
+  import {pushDrawer} from '@app/modal'
 
-  const nprofile =
-    "nprofile1qqsf03c2gsmx5ef4c9zmxvlew04gdh7u94afnknp33qvv3c94kvwxgspz4mhxue69uhhyetvv9ujuerpd46hxtnfduhsz9rhwden5te0wfjkcctev93xcefwdaexwtcpzdmhxue69uhhqatjwpkx2urpvuhx2ue0vamm57"
+  const openProfile = () =>
+    pushDrawer(ProfileDetail, {pubkey: '97c70a44366a6535c145b333f973ea86dfdc2d7a99da618c40c64705ad98e322'})
 </script>
 
 <div class="hero min-h-screen bg-base-200">
@@ -33,7 +34,7 @@
         <p class="text-center">
           Built with 💜 by
           <span class="text-primary">
-            @<Link external href={entityLink(nprofile)} class="link">hodlbod</Link>
+            @<Button on:click={openProfile} class="link">hodlbod</Button>
           </span>
         </p>
         <div class="flex justify-center gap-4">
@@ -48,12 +49,12 @@
             </Link>
           </div>
           <div class="tooltip" data-tip="Dev Blog">
-            <Link external href={`https://yakihonne.com/users/${nprofile}`}>
+            <Link external href="https://hodlbod.npub.pro/">
               <Icon icon="pen" />
             </Link>
           </div>
           <div class="tooltip" data-tip="Podcast">
-            <Link external href="https://tgfb.com/podcasts/thank-god-for-nostr/">
+            <Link external href="https://fountain.fm/show/vnmoRQQ50siLFRE8k061">
               <Icon icon="headphones-round" />
             </Link>
           </div>