Mention user when creating a note from the profile page

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.
+  - [ ] 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
+  - [ ] Custom views should combine pubkeys, relays, and topics
-- [ ] Deterministically calculate color for relays, show it on notes. User popper?
+- [ ] Likes list on note detail. Maybe a sidebar or header for note detail page?
-- [ ] Likes list
 - [ ] 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
 

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'}

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}

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 => {
+  const search = fuzzy(database.people.all({'name:!nil': null}), {keys: ["name", "pubkey"]})
-    search = fuzzy(people, {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

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}

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) || [] : []

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 />

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} />

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>