From db0f995a3dd7d9f6b4ba3803d6214bb1873cde4e Mon Sep 17 00:00:00 2001
From: Jonathan Staab <shtaab@gmail.com>
Date: Wed, 15 Feb 2023 10:11:38 -0600
Subject: [PATCH] Mention user when creating a note from the profile page

---
 README.md                         | 13 ++++++-------
 src/App.svelte                    | 13 +------------
 src/partials/Channel.svelte       |  4 ++--
 src/partials/Compose.svelte       | 24 ++++++++++++++++++++----
 src/partials/NewNoteButton.svelte | 17 +++++++++++++++++
 src/partials/Note.svelte          |  4 ++--
 src/routes/Notes.svelte           |  3 +++
 src/routes/Person.svelte          |  3 +++
 src/views/NoteCreate.svelte       |  9 +++++++++
 9 files changed, 63 insertions(+), 27 deletions(-)
 create mode 100644 src/partials/NewNoteButton.svelte

diff --git a/README.md b/README.md
index da5a4d76..1589868c 100644
--- a/README.md
+++ b/README.md
@@ -79,16 +79,13 @@ If you like Coracle and want to support its development, you can donate sats via
 
 - [ ] Make feeds page customizable. This could potentially use the "lists" NIP
   - nevent1qqspjcqw2hu5gfcpkrjhs0aqvxuzjgtp50l375mcqjfpmk48cg5hevgpr3mhxue69uhkummnw3ez6un9d3shjtnhd3m8xtnnwpskxegpzamhxue69uhkummnw3ezuendwsh8w6t69e3xj7spramhxue69uhkummnw3ez6un9d3shjtnwdahxxefwv93kzer9d4usz9rhwden5te0wfjkccte9ejxzmt4wvhxjmcpr9mhxue69uhkummnw3ezuer9d3hjuum0ve68wctjv5n8hwfg
-- [ ] Click through on relays page to view a feed for only that relay.
-- [ ] Custom views: slider between fast/complete with a warning at either extreme
-- [ ] Deterministically calculate color for relays, show it on notes. User popper?
-- [ ] Likes list
+  - [ ] Click through on relays page to view a feed for only that relay.
+  - [ ] Custom views should combine pubkeys, relays, and topics
+- [ ] Likes list on note detail. Maybe a sidebar or header for note detail page?
 - [ ] Fix anon/new user experience
-- [ ] Show loading on replies/new notes
 - [ ] Initial user load doesn't have any relays, cache user or wait for people db to be loaded
-- [ ] Shorten height of chat headers
-- [ ] Custom views should combine pubkeys, relays, and topics
 - [ ] Are write relays the only ones that matter? User read relays only matter for global feed, or where there's no relay hints available. But if relays are navigable, this is unnecessary.
+- [ ] Fix bugs
 
 # Changelog
 
@@ -101,6 +98,8 @@ If you like Coracle and want to support its development, you can donate sats via
 - [x] Re-work thread layout
 - [x] Color code relays
 - [x] Show relay status based on stats not current connection status
+- [x] Auto-mention person when creating a note from their profile page
+- [x] Make chat header overlap main header to save space
 
 ## 0.2.11
 
diff --git a/src/App.svelte b/src/App.svelte
index 6c329b02..5a17fdef 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -341,17 +341,6 @@
       {/if}
     </div>
 
-    {#if keys.canSign()}
-    <div class="fixed bottom-0 right-0 m-8">
-      <button
-        class="rounded-full bg-accent color-white w-16 h-16 flex justify-center
-                items-center border border-dark shadow-2xl"
-        on:click={() => modal.set({type: 'note/create'})}>
-        <span class="fa-sold fa-plus fa-2xl" />
-      </button>
-    </div>
-    {/if}
-
     {#if $modal}
     <Modal onEscape={closeModal}>
       {#if $modal.type === 'note/detail'}
@@ -359,7 +348,7 @@
         <NoteDetail {...$modal} />
         {/key}
       {:else if $modal.type === 'note/create'}
-        <NoteCreate />
+        <NoteCreate pubkey={$modal.pubkey} />
       {:else if $modal.type === 'relay/add'}
         <AddRelay />
       {:else if $modal.type === 'relay/list'}
diff --git a/src/partials/Channel.svelte b/src/partials/Channel.svelte
index 9c0e75df..3c01b702 100644
--- a/src/partials/Channel.svelte
+++ b/src/partials/Channel.svelte
@@ -155,7 +155,7 @@
         {/await}
       </ul>
     </div>
-    <div class="fixed z-10 top-16 w-full lg:-ml-56 lg:pl-56 border-b border-solid border-medium bg-dark">
+    <div class="fixed z-20 top-0 w-full lg:-ml-56 lg:pl-56 border-b border-solid border-medium bg-dark">
       <div class="p-4 flex items-start gap-4">
         <div class="flex items-center gap-4">
           <button
@@ -195,7 +195,7 @@
     </div>
     <div class="fixed z-10 bottom-0 w-full flex bg-medium border-medium border-t border-solid border-dark lg:-ml-56 lg:pl-56">
       <textarea
-        rows="4"
+        rows="3"
         autofocus
         placeholder="Type something..."
         bind:this={textarea}
diff --git a/src/partials/Compose.svelte b/src/partials/Compose.svelte
index 61a26aef..4a6c3aad 100644
--- a/src/partials/Compose.svelte
+++ b/src/partials/Compose.svelte
@@ -1,5 +1,6 @@
 <script>
   import {prop, reject, sortBy, last} from 'ramda'
+  import {ensurePlural} from 'hurdak/lib/hurdak'
   import {fly} from 'svelte/transition'
   import {fuzzy} from "src/util/misc"
   import {displayPerson} from "src/util/nostr"
@@ -14,11 +15,8 @@
   let suggestions = []
   let input = null
   let prevContent = ''
-  let search
 
-  database.people.iter({'name:!nil': null}).then(people => {
-    search = fuzzy(people, {keys: ["name", "pubkey"]})
-  })
+  const search = fuzzy(database.people.all({'name:!nil': null}), {keys: ["name", "pubkey"]})
 
   const getText = () => {
     const selection = document.getSelection()
@@ -144,6 +142,24 @@
     prevContent = input.innerText
   }
 
+  export const trigger = events => {
+    ensurePlural(events).forEach(onKeyUp)
+  }
+
+  export const type = text => {
+    for (const c of Array.from(text)) {
+      input.innerText += c
+
+      const selection = document.getSelection()
+      const extent = fromParentOffset(input, input.innerText.length)
+
+      selection.setBaseAndExtent(...extent, ...extent)
+
+      onKeyUp({key: c})
+    }
+
+  }
+
   export const parse = () => {
     // Interpolate mentions
     let offset = 0
diff --git a/src/partials/NewNoteButton.svelte b/src/partials/NewNoteButton.svelte
new file mode 100644
index 00000000..91271732
--- /dev/null
+++ b/src/partials/NewNoteButton.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+  import keys from 'src/agent/keys'
+  import {modal} from "src/app"
+
+  export let pubkey = null
+</script>
+
+{#if keys.canSign()}
+<div class="fixed bottom-0 right-0 m-8">
+  <button
+    class="rounded-full bg-accent color-white w-16 h-16 flex justify-center
+            items-center border border-dark shadow-2xl"
+    on:click={() => modal.set({type: 'note/create', pubkey})}>
+    <span class="fa-sold fa-plus fa-2xl" />
+  </button>
+</div>
+{/if}
diff --git a/src/partials/Note.svelte b/src/partials/Note.svelte
index 74b7ad0a..a2581db1 100644
--- a/src/partials/Note.svelte
+++ b/src/partials/Note.svelte
@@ -28,10 +28,10 @@
   export let shouldDisplay = always(true)
 
   const getDefaultReplyMentions = () =>
-    Tags.from(note).type("p").values().all().concat(note.pubkey)
+    without([$user?.pubkey], uniq(Tags.from(note).type("p").values().all().concat(note.pubkey)))
 
   let reply = null
-  let replyMentions = without([$user?.pubkey], getDefaultReplyMentions())
+  let replyMentions = getDefaultReplyMentions()
   let replyContainer = null
 
   const links = $settings.showLinkPreviews ? extractUrls(note.content) || [] : []
diff --git a/src/routes/Notes.svelte b/src/routes/Notes.svelte
index 6e62f499..0c9b161b 100644
--- a/src/routes/Notes.svelte
+++ b/src/routes/Notes.svelte
@@ -2,6 +2,7 @@
   import {navigate} from 'svelte-routing'
   import Anchor from "src/partials/Anchor.svelte"
   import Content from "src/partials/Content.svelte"
+  import NewNoteButton from "src/partials/NewNoteButton.svelte"
   import Tabs from "src/partials/Tabs.svelte"
   import Network from "src/views/notes/Network.svelte"
   import Popular from "src/views/notes/Popular.svelte"
@@ -30,3 +31,5 @@
     {/if}
   </div>
 </Content>
+
+<NewNoteButton />
diff --git a/src/routes/Person.svelte b/src/routes/Person.svelte
index 0062473d..a4cff8dd 100644
--- a/src/routes/Person.svelte
+++ b/src/routes/Person.svelte
@@ -10,6 +10,7 @@
   import {displayPerson, Tags} from 'src/util/nostr'
   import Tabs from "src/partials/Tabs.svelte"
   import Content from "src/partials/Content.svelte"
+  import NewNoteButton from "src/partials/NewNoteButton.svelte"
   import Anchor from "src/partials/Anchor.svelte"
   import Spinner from "src/partials/Spinner.svelte"
   import Notes from "src/views/person/Notes.svelte"
@@ -190,3 +191,5 @@
     {/if}
   {/if}
 </Content>
+
+<NewNoteButton {pubkey} />
diff --git a/src/views/NoteCreate.svelte b/src/views/NoteCreate.svelte
index 9e867cf3..a04571f4 100644
--- a/src/views/NoteCreate.svelte
+++ b/src/views/NoteCreate.svelte
@@ -18,6 +18,8 @@
   import cmd from "src/agent/cmd"
   import {toast, modal} from "src/app"
 
+  export let pubkey = null
+
   let input = null
   let relays = getUserRelays('write')
   let showSettings = false
@@ -71,6 +73,13 @@
     if (!$user) {
       navigate("/login")
     }
+
+    const person = database.people.get(pubkey)
+
+    if (person?.name) {
+      input.type('@' + person.name)
+      input.trigger({key: 'Enter'})
+    }
   })
 </script>