Remove PersonFeed

ROADMAP.md

@@ -1,7 +1,5 @@
 # Current
 
-- [ ] Refactor
-  - [ ] Remove personfeed
 - [ ] Re-work note media
   - [ ] Add webcam image/video capture
   - [ ] Show list of media that can be viewed/removed below post

src/app/ModalRoutes.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import {nip19} from "nostr-tools"
   import Content from "src/partials/Content.svelte"
   import Spinner from "src/partials/Spinner.svelte"
   import ChatEdit from "src/app/views/ChatEdit.svelte"
@@ -14,7 +15,7 @@
   import PublishInfo from "src/app/views/PublishInfo.svelte"
   import NoteDetail from "src/app/views/NoteDetail.svelte"
   import ThreadDetail from "src/app/views/ThreadDetail.svelte"
-  import PersonFeed from "src/app/views/PersonFeed.svelte"
+  import PersonDetail from "src/app/views/PersonDetail.svelte"
   import PersonList from "src/app/shared/PersonList.svelte"
   import PersonProfileInfo from "src/app/views/PersonProfileInfo.svelte"
   import PersonShare from "src/app/views/PersonShare.svelte"
@@ -63,8 +64,8 @@
   <LoginBunker />
 {:else if m.type === "login/connect"}
   <LoginConnect />
-{:else if m.type === "person/feed"}
-  <PersonFeed pubkey={m.pubkey} />
+{:else if m.type === "person/detail"}
+  <PersonDetail npub={nip19.npubEncode(m.pubkey)} />
 {:else if m.type === "person/info"}
   <PersonProfileInfo pubkey={m.pubkey} />
 {:else if m.type === "person/share"}

src/app/Routes.svelte

@@ -41,9 +41,9 @@
     <TypedRoute path="/notes" let:params>
       <Feeds />
     </TypedRoute>
-    <TypedRoute path="/people/:npub/:activeTab" let:params>
+    <TypedRoute path="/people/:npub" let:params>
       {#key params.npub}
-        <PersonDetail npub={params.npub} activeTab={params.activeTab} />
+        <PersonDetail npub={params.npub} />
       {/key}
     </TypedRoute>
     <TypedRoute path="/chat" component={ChatList} />

src/app/shared/Note.svelte

@@ -21,6 +21,7 @@
   export let setFeedRelay = null
   export let depth = 0
   export let anchorId = null
+  export let topLevel = false
   export let showParent = true
   export let showContext = false
   export let invertColors = false
@@ -104,7 +105,7 @@
 <div class="note">
   <div bind:this={noteContainer} class="group relative">
     <Card class="relative flex gap-4" on:click={onClick} {interactive} {invertColors}>
-      {#if !showParent}
+      {#if !showParent && !topLevel}
         <div
           class={`absolute -ml-4 h-px w-4 bg-${borderColor} z-10`}
           style="left: 0px; top: 27px;" />
@@ -112,7 +113,7 @@
       <div>
         <Anchor
           class="text-lg font-bold"
-          on:click={() => modal.push({type: "person/feed", pubkey: note.pubkey})}>
+          on:click={() => modal.push({type: "person/detail", pubkey: note.pubkey})}>
           <PersonCircle size={10} pubkey={note.pubkey} />
         </Anchor>
       </div>
@@ -121,7 +122,7 @@
           <Anchor
             type="unstyled"
             class="pr-16 text-lg font-bold"
-            on:click={() => modal.push({type: "person/feed", pubkey: note.pubkey})}>
+            on:click={() => modal.push({type: "person/detail", pubkey: note.pubkey})}>
             <PersonName pubkey={$author.pubkey} />
           </Anchor>
           <Anchor

src/app/shared/NoteContentPerson.svelte

@@ -8,7 +8,7 @@
 
   const {pubkey} = value
   const profile = Directory.profiles.key(pubkey).derived(defaultTo({pubkey}))
-  const openPerson = () => modal.push({type: "person/feed", pubkey})
+  const openPerson = () => modal.push({type: "person/detail", pubkey})
 </script>
 
 @<Anchor class="underline" killEvent on:click={openPerson}>

src/app/shared/NoteContentQuote.svelte

@@ -15,7 +15,7 @@
   let muted = false
   let loading = true
 
-  const openPerson = pubkey => modal.push({type: "person/feed", pubkey})
+  const openPerson = pubkey => modal.push({type: "person/detail", pubkey})
 
   const {id, relays = []} = value
 

src/app/shared/NoteContentRating.svelte

@@ -21,7 +21,7 @@
 
     action = switcher(type, {
       r: () => modal.push({type: "relay/detail", url: value}),
-      p: () => modal.push({type: "person/feed", pubkey: value}),
+      p: () => modal.push({type: "person/detail", pubkey: value}),
       e: () => modal.push({type: "note/detail", note: {id: value}}),
     })
 

src/app/shared/PersonRelays.svelte

@@ -15,9 +15,11 @@
     {#if relays.length === 0}
       <div class="pt-8 text-center">No relays found</div>
     {:else}
-      {#each relays as relay (relay.url)}
-        <RelayCard {relay} />
-      {/each}
+      <div class="flex flex-col gap-2">
+        {#each relays as relay (relay.url)}
+          <RelayCard {relay} />
+        {/each}
+      </div>
     {/if}
   </Content>
 </div>

src/app/shared/PersonSummary.svelte

@@ -13,7 +13,7 @@
 
   const following = user.followsSet.derived(s => s.has(pubkey))
   const muted = user.mutesSet.derived(s => s.has(pubkey))
-  const showDetail = () => modal.push({type: "person/feed", pubkey})
+  const showDetail = () => modal.push({type: "person/detail", pubkey})
   const unfollow = () => user.unfollow(pubkey)
   const follow = () => user.follow(pubkey)
   const unmute = () => user.unmute(pubkey)

src/app/state.ts

@@ -26,7 +26,7 @@ import {
 // Routing
 
 export const routes = {
-  person: (pubkey: string, tab = "notes") => `/people/${nip19.npubEncode(pubkey)}/${tab}`,
+  person: (pubkey: string) => `/people/${nip19.npubEncode(pubkey)}`,
 }
 
 export const addToList = (type: string, value: string) =>

src/app/views/Apps.svelte

@@ -35,7 +35,7 @@
     const profile = await nip05.queryProfile(entity)
 
     if (profile) {
-      modal.push({type: "person/feed", pubkey: profile.pubkey})
+      modal.push({type: "person/detail", pubkey: profile.pubkey})
     } else {
       copy("Address", entity)
     }

src/app/views/Bech32Entity.svelte

@@ -38,9 +38,9 @@
     <NaddrDetail {...data} />
   </Content>
 {:else if type === "nprofile"}
-  <PersonDetail npub={nip19.npubEncode(data.pubkey)} {relays} activeTab="notes" />
+  <PersonDetail npub={nip19.npubEncode(data.pubkey)} {relays} />
 {:else if type === "npub"}
-  <PersonDetail npub={entity} activeTab="notes" />
+  <PersonDetail npub={entity} />
 {:else}
   <Content size="lg" class="text-center">
     <div>Sorry, we weren't able to find "{entity}".</div>

src/app/views/MessagesList.svelte

@@ -47,7 +47,7 @@
 <Content>
   <div class="relative">
     <Tabs tabs={["messages", "requests"]} {activeTab} setActiveTab={navigate} {getDisplay} />
-    <Popover triggerType="mouseenter" class="absolute right-7 top-7">
+    <Popover triggerType="mouseenter" class="absolute right-7 top-7 hidden sm:block">
       <div slot="trigger">
         <i
           class="fa fa-bell cursor-bell cursor-pointer"

src/app/views/PersonDetail.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import {identity, defaultTo} from "ramda"
-  import {navigate} from "svelte-routing"
   import {log} from "src/util/logger"
   import {toHex} from "src/util/nostr"
   import {getThemeBackgroundGradient} from "src/partials/state"
@@ -14,13 +13,11 @@
   import PersonHandle from "src/app/shared/PersonHandle.svelte"
   import PersonName from "src/app/shared/PersonName.svelte"
   import {Env, Settings, pubkeyLoader, Directory, Nip65} from "src/app/engine"
-  import {routes} from "src/app/state"
   import PersonCircle from "src/app/shared/PersonCircle.svelte"
   import PersonAbout from "src/app/shared/PersonAbout.svelte"
   import PersonStats from "src/app/shared/PersonStats.svelte"
 
   export let npub
-  export let activeTab
   export let relays = []
 
   const tabs = ["notes", "likes", Env.FORCE_RELAYS.length === 0 && "relays"].filter(identity)
@@ -28,6 +25,7 @@
   const profile = Directory.profiles.key(pubkey).derived(defaultTo({pubkey}))
   const {rgb, rgba} = getThemeBackgroundGradient()
 
+  let activeTab = "notes"
   let loading = true
 
   $: ownRelays = Nip65.getPubkeyRelays(pubkey)
@@ -40,7 +38,9 @@
 
   document.title = Directory.displayProfile($profile)
 
-  const setActiveTab = tab => navigate(routes.person(pubkey, tab))
+  const setActiveTab = tab => {
+    activeTab = tab
+  }
 </script>
 
 <div

src/app/views/PersonFeed.svelte

@@ -1,61 +0,0 @@
-<script lang="ts">
-  import {defaultTo} from "ramda"
-  import {parseHex} from "src/util/html"
-  import {theme, getThemeColor} from "src/partials/state"
-  import Content from "src/partials/Content.svelte"
-  import Anchor from "src/partials/Anchor.svelte"
-  import PersonActions from "src/app/shared/PersonActions.svelte"
-  import {Settings, Nip65, Directory} from "src/app/engine"
-  import PersonCircle from "src/app/shared/PersonCircle.svelte"
-  import PersonAbout from "src/app/shared/PersonAbout.svelte"
-  import PersonNotes from "src/app/shared/PersonNotes.svelte"
-  import PersonStats from "src/app/shared/PersonStats.svelte"
-  import PersonHandle from "src/app/shared/PersonHandle.svelte"
-  import PersonName from "src/app/shared/PersonName.svelte"
-  import {routes} from "src/app/state"
-
-  export let pubkey
-
-  const profile = Directory.profiles.key(pubkey).derived(defaultTo({pubkey}))
-  const relays = Nip65.getPubkeyHints(Settings.getSetting("relay_limit"), pubkey)
-
-  let rgb, rgba
-
-  $: {
-    const color = parseHex(getThemeColor($theme, "gray-7"))
-
-    rgba = `rgba(${color.join(", ")}, 0.4)`
-    rgb = `rgba(${color.join(", ")})`
-  }
-
-  $: banner = Settings.imgproxy($profile.banner, {w: window.innerWidth})
-
-  document.title = Directory.displayProfile($profile)
-</script>
-
-<div
-  class="absolute left-0 -mt-2 h-64 w-full"
-  style={`background-size: cover;
-         background-image: linear-gradient(to bottom, ${rgba}, ${rgb}), url('${banner}')`} />
-
-<Content>
-  <div class="z-10 flex gap-4 text-gray-1">
-    <PersonCircle {pubkey} size={16} class="sm:h-32 sm:w-32" />
-    <div class="flex flex-grow flex-col gap-4">
-      <div class="flex items-start justify-between gap-4">
-        <div class="flex flex-grow flex-col gap-2">
-          <Anchor href={routes.person(pubkey)}>
-            <PersonName inert class="text-2xl" {pubkey} />
-          </Anchor>
-          <PersonHandle {pubkey} />
-        </div>
-        <PersonActions {pubkey} />
-      </div>
-      <PersonAbout {pubkey} />
-      <PersonStats {pubkey} />
-    </div>
-  </div>
-  <div class="relative z-10">
-    <PersonNotes invertColors {pubkey} {relays} />
-  </div>
-</Content>

src/app/views/Search.svelte

@@ -124,7 +124,7 @@
         #{result.topic.name}
       </BorderLeft>
     {:else if result.type === "profile"}
-      <BorderLeft on:click={() => modal.push({type: "person/feed", pubkey: result.id})}>
+      <BorderLeft on:click={() => modal.push({type: "person/detail", pubkey: result.id})}>
         <PersonSummary inert hideActions pubkey={result.id} />
       </BorderLeft>
     {/if}

src/app/views/ThreadDetail.svelte

@@ -31,25 +31,29 @@
 {#if loading}
   <Spinner />
 {:else}
-  <Content>
+  <Content gap="gap-4">
     {#if $root}
       <Note invertColors note={$root} />
     {/if}
     {#if showAncestors}
       {#each $ancestors as ancestor}
-        <Note invertColors showParent={false} note={ancestor} />
+        <Note invertColors topLevel showParent={false} note={ancestor} />
       {/each}
     {:else if $ancestors.length > 0}
-      <Anchor class="text-center text-gray-1" on:click={() => { showAncestors = true }}>
+      <Anchor
+        class="text-center text-gray-1"
+        on:click={() => {
+          showAncestors = true
+        }}>
         <i class="fa fa-up-down pr-2 text-sm" />
         Show {quantify($ancestors.length, "other note")}
       </Anchor>
     {/if}
     {#if $parent}
-      <Note invertColors showParent={false} note={$parent} />
+      <Note invertColors topLevel showParent={false} note={$parent} />
     {/if}
     {#if $anchor}
-      <Note invertColors showContext showParent={false} anchorId={$anchor.id} note={$anchor} depth={2} />
+      <Note invertColors showContext topLevel showParent={false} note={$anchor} depth={2} />
     {/if}
   </Content>
 {/if}

src/app/views/UserProfile.svelte

@@ -28,7 +28,7 @@
 
     event?.preventDefault()
     publishWithToast(Builder.setProfile(values), relays)
-    navigate(routes.person($pubkey, "notes"))
+    navigate(routes.person($pubkey))
   }
 
   const {pubkey} = Keys