Small note display bugfixes

ROADMAP.md

@@ -1,5 +1,8 @@
 # Current
 
+- [ ] Fix @ mention on safari
+- [ ] Fix http://localhost:5173/nevent1qqspulrcsx0ceunrnk88vvdta4lw70ch32e03rl8elughxpwsdy0kkgpzfmhxue69uhk7enxvd5xz6tw9ec82cs56smhk
+- [ ] Get rid of Button
 - [ ] Make notifications beautiful and usable
 - [ ] Render threads in a way that makes them easy to use
 - [ ] White-labeled

src/app/shared/NoteContent.svelte

@@ -11,6 +11,7 @@
   export let anchorId = null
   export let maxLength = 700
   export let showEntire = false
+  export let hideShowMore = true
   export let showMedia = user.getSetting("showMedia")
 </script>
 
@@ -25,5 +26,5 @@
 {:else if note.kind === 30023}
   <NoteContentKind30023 {note} {showEntire} {showMedia} />
 {:else}
-  <NoteContentKind1 {note} {anchorId} {maxLength} {showEntire} {showMedia} />
+  <NoteContentKind1 {note} {anchorId} {maxLength} {showEntire} {showMedia} {hideShowMore} />
 {/if}

src/app/shared/NoteContentEllipsis.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+  import Anchor from 'src/partials/Anchor.svelte'
+</script>
+
+<div class="-ml-12 mt-8 mb-4 flex justify-center pointer-events-none">
+  <Anchor type="button">See more</Anchor>
+</div>

src/app/shared/NoteContentKind1.svelte

@@ -7,11 +7,14 @@
     LINK,
     INVOICE,
     NEWLINE,
+    ELLIPSIS,
     TOPIC,
+    TEXT,
   } from "src/util/notes"
   import MediaSet from "src/partials/MediaSet.svelte"
   import QRCode from "src/partials/QRCode.svelte"
   import NoteContentNewline from "src/app/shared/NoteContentNewline.svelte"
+  import NoteContentEllipsis from "src/app/shared/NoteContentEllipsis.svelte"
   import NoteContentTopic from "src/app/shared/NoteContentTopic.svelte"
   import NoteContentLink from "src/app/shared/NoteContentLink.svelte"
   import NoteContentPerson from "src/app/shared/NoteContentPerson.svelte"
@@ -22,13 +25,17 @@
   export let anchorId = false
   export let showEntire = false
   export let showMedia = false
+  export let hideShowMore = false
 
   const fullContent = parseContent(note)
   const shortContent = truncateContent(fullContent, {maxLength, showEntire, showMedia})
   const links = getLinks(shortContent)
   const extraLinks = without(links, getLinks(fullContent))
 
-  export const isNewline = i => !shortContent[i] || shortContent[i].type === NEWLINE
+  export const isNewline = i =>
+    !shortContent[i] ||
+    shortContent[i].type === NEWLINE ||
+    (shortContent[i].type === TEXT && shortContent[i].value.match(/^\s+$/))
 
   export const isStartOrEnd = i => isNewline(i - 1) || isNewline(i + 1)
 </script>
@@ -38,6 +45,10 @@
     {#each shortContent as { type, value }, i}
       {#if type === NEWLINE}
         <NoteContentNewline {value} />
+      {:else if type === ELLIPSIS}
+        {#if !hideShowMore}
+          <NoteContentEllipsis />
+        {/if}
       {:else if type === TOPIC}
         <NoteContentTopic {value} />
       {:else if type === INVOICE}

src/app/views/Notification.svelte

@@ -1,7 +1,7 @@
 <script>
   import {pipe, filter, map, when, identity, pluck, propEq, uniq} from "ramda"
   import {closure, quantify} from "hurdak/lib/hurdak"
-  import {tryJson} from "src/util/misc"
+  import {tryJson, formatTimestamp} from "src/util/misc"
   import {Tags} from "src/util/nostr"
   import PersonBadge from "src/app/shared/PersonBadge.svelte"
   import Card from "src/partials/Card.svelte"
@@ -44,9 +44,9 @@
       interactive
       class="flex w-full flex-col gap-2 text-left"
       on:click={() => modal.push({type: "note/detail", note})}>
-      <div on:click|stopPropagation>
+      <div on:click|stopPropagation class="flex justify-between">
         {#if !event.ref}
-          <div>
+          <div class="flex items-center">
             <PersonBadge class="float-left" person={author} />
             <span class="relative top-px pl-1">mentioned you.</span>
           </div>
@@ -70,9 +70,12 @@
             </div>
           </Popover>
         {/if}
+        <small>
+          {formatTimestamp(event.created_at)}
+        </small>
       </div>
       <div class="break-word overflow-hidden text-gray-1">
-        <NoteContent maxLength={80} showMedia={false} {note} />
+        <NoteContent maxLength={80} hideShowMore showMedia={false} {note} />
       </div>
     </Card>
   </div>

src/app/views/Notifications.svelte

@@ -69,6 +69,7 @@
             ref,
             key: e.id,
             notifications: [e],
+            created_at: e.created_at,
             dateDisplay: formatTimestampAsDate(e.created_at),
             showLine: e.created_at < prevChecked && prevTimestamp >= prevChecked,
           })

src/partials/Compose.svelte

@@ -74,7 +74,7 @@
 
       // Add the span and space
       selection.getRangeAt(0).insertNode(span)
-      selection.collapse(span.nextSibling, 0)
+      selection.collapse(span.parentNode, word.length + prefix.length)
       selection.getRangeAt(0).insertNode(space)
       selection.collapse(space, 2)
 

src/util/notes.ts

@@ -4,6 +4,7 @@ import {first} from "hurdak/lib/hurdak"
 import {fromNostrURI} from "src/util/nostr"
 
 export const NEWLINE = "newline"
+export const ELLIPSIS = "ellipsis"
 export const TEXT = "text"
 export const TOPIC = "topic"
 export const LINK = "link"
@@ -173,20 +174,21 @@ export const truncateContent = (content, {showEntire, maxLength, showMedia = fal
   content.every((part, i) => {
     const isText = [TOPIC, TEXT].includes(part.type) || (part.type === LINK && !part.value.isMedia)
     const isMedia = part.type === INVOICE || part.type.startsWith("nostr:") || part.value.isMedia
+    const textLength = part.value.url?.length || part.value.length
 
     if (isText) {
-      length += part.value.length
+      length += textLength
     }
 
     if (isMedia) {
-      length += showMedia ? maxLength / 3 : part.value.length
+      length += showMedia ? maxLength / 3 : textLength
     }
 
     result.push(part)
 
     if (length > truncateAt && i < content.length - 1) {
       if (isText || (isMedia && !showMedia)) {
-        result.push({type: TEXT, value: "..."})
+        result.push({type: ELLIPSIS})
       }
 
       return false