Use NoteContent on Notifications

src/partials/MediaSet.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import {sortBy} from "ramda"
   import {slide} from "svelte/transition"
+  import {annotateMedia} from "src/util/misc"
   import Media from "src/partials/Media.svelte"
   import Content from "src/partials/Content.svelte"
   import Modal from "src/partials/Modal.svelte"
@@ -14,17 +15,7 @@
   // Put previews last since we need to load them asynchronously
   const annotated = sortBy(
     ({type}) => (type === "preview" ? 1 : 0),
-    links
-      .filter(url => !url.startsWith("ws"))
-      .map(url => {
-        if (url.match(".(jpg|jpeg|png|gif)")) {
-          return {type: "image", url}
-        } else if (url.match(".(mov|mp4)")) {
-          return {type: "video", url}
-        } else {
-          return {type: "preview", url}
-        }
-      })
+    links.filter(url => !url.startsWith("ws")).map(annotateMedia)
   )
 
   const close = () => {

src/util/misc.ts

@@ -431,3 +431,13 @@ export class EventBus {
     }
   }
 }
+
+export const annotateMedia = url => {
+  if (url.match(".(jpg|jpeg|png|gif)")) {
+    return {type: "image", url}
+  } else if (url.match(".(mov|mp4)")) {
+    return {type: "video", url}
+  } else {
+    return {type: "preview", url}
+  }
+}

src/views/notes/NoteContent.svelte

@@ -18,13 +18,14 @@
   import {routes, modal} from "src/app/ui"
 
   export let note
-  export let showEntire
+  export let maxLength = 700
+  export let showEntire = false
+  export let showMedia = user.getSetting("showMedia")
 
   const links = []
   const entities = []
-  const shouldTruncate = !showEntire && note.content.length > 500
+  const shouldTruncate = !showEntire && note.content.length > maxLength * 0.6
   const content = parseContent(note.content)
-  const showMedia = user.getSetting("showMedia")
 
   let l = 0
   for (let i = 0; i < content.length; i++) {
@@ -63,7 +64,7 @@
     if (typeof value === "string") {
       l += value.length
 
-      if (shouldTruncate && l > 350 && type !== "newline") {
+      if (shouldTruncate && l > maxLength && type !== "newline") {
         content[i].value = value.trim()
         content.splice(i + 1, content.length, {type: "text", value: "..."})
         break
@@ -121,7 +122,7 @@
           {#if value.pubkey}
             {displayPerson(getPersonWithFallback(value.pubkey))}
           {:else}
-            {value.entity.slice(0, 10) + "..."}
+            {value.entity.slice(0, 16) + "..."}
           {/if}
         </Anchor>
       {:else if type === "mention"}
@@ -143,7 +144,7 @@
       <MediaSet {links} />
     </div>
   {/if}
-  {#if entities.length > 0}
+  {#if showMedia && entities.length > 0}
     <div class="py-2" on:click={e => e.stopPropagation()}>
       {#each entities as { value }}
         <Card interactive invertColors on:click={() => openQuote(value.id)}>

src/views/notes/NoteCreate.svelte

@@ -4,7 +4,7 @@
   import {quantify} from "hurdak/lib/hurdak"
   import {last, reject, pluck, propEq} from "ramda"
   import {fly} from "svelte/transition"
-  import {fuzzy} from "src/util/misc"
+  import {fuzzy, annotateMedia} from "src/util/misc"
   import {displayPerson} from "src/util/nostr"
   import Button from "src/partials/Button.svelte"
   import Compose from "src/partials/Compose.svelte"
@@ -120,7 +120,7 @@
       </div>
       {#if image}
         <Media
-          link={{type: "image", url: image}}
+          link={annotateMedia(image)}
           onClose={() => {
             image = null
           }} />

src/views/notifications/Notification.svelte

@@ -1,11 +1,12 @@
 <script>
   import {max, pipe, filter, map, when, identity, pluck, propEq, uniq} from "ramda"
-  import {ellipsize, closure, quantify} from "hurdak/lib/hurdak"
+  import {closure, quantify} from "hurdak/lib/hurdak"
   import {formatTimestamp, tryJson} from "src/util/misc"
   import {Tags} from "src/util/nostr"
   import Badge from "src/partials/Badge.svelte"
   import Card from "src/partials/Card.svelte"
   import Popover from "src/partials/Popover.svelte"
+  import NoteContent from "src/views/notes/NoteContent.svelte"
   import NotificationSection from "src/views/notifications/NotificationSection.svelte"
   import {getPersonWithFallback, userEvents} from "src/agent/tables"
   import {modal} from "src/app/ui"
@@ -70,7 +71,7 @@
       <p class="text-sm text-gray-1">{formatTimestamp(timestamp)}</p>
     </div>
     <div class="break-word ml-6 overflow-hidden text-gray-1">
-      {ellipsize(note.content, 120)}
+      <NoteContent maxLength={80} showMedia={false} {note} />
     </div>
   </Card>
 {/if}