From ac254f69d54c7bdeaae8718b5a1cdab0335d4ce7 Mon Sep 17 00:00:00 2001
From: Bojan Mojsilovic <bmojsilovic@itekako.com>
Date: Thu, 7 Sep 2023 13:40:52 +0200
Subject: [PATCH] Hide embedded note on small notes

---
 src/components/ParsedNote/ParsedNote.tsx | 66 ++++++++++++++++++------
 src/components/SmallNote/SmallNote.tsx   |  2 +-
 2 files changed, 51 insertions(+), 17 deletions(-)

diff --git a/src/components/ParsedNote/ParsedNote.tsx b/src/components/ParsedNote/ParsedNote.tsx
index d60acad..cba142b 100644
--- a/src/components/ParsedNote/ParsedNote.tsx
+++ b/src/components/ParsedNote/ParsedNote.tsx
@@ -18,8 +18,7 @@ import { useMediaContext } from '../../contexts/MediaContext';
 import { hookForDev } from '../../lib/devTools';
 
 
-export const parseNoteLinks = (text: string, note: PrimalNote, highlightOnly = false) => {
-
+export const parseNoteLinks = (text: string, note: PrimalNote, highlightOnly?: 'text' | 'links') => {
   const regex = /\bnostr:((note|nevent)1\w+)\b|#\[(\d+)\]/g;
 
   return text.replace(regex, (url) => {
@@ -36,11 +35,16 @@ export const parseNoteLinks = (text: string, note: PrimalNote, highlightOnly = f
 
       const path = `/e/${noteId}`;
 
-      const ment = note.mentionedNotes && note.mentionedNotes[hex];
+      let link = <span>{url}</span>;
 
-      const link = highlightOnly ?
-        <span class='linkish' >{url}</span> :
-        ment ?
+      if (highlightOnly === 'links') {
+        link = <span class='linkish'>@{url}</span>;
+      }
+
+      if (!highlightOnly) {
+        const ment = note.mentionedNotes && note.mentionedNotes[hex];
+
+        link = ment ?
           <div>
             <EmbeddedNote
               note={ment}
@@ -48,6 +52,7 @@ export const parseNoteLinks = (text: string, note: PrimalNote, highlightOnly = f
             />
           </div> :
           <A href={path}>{url}</A>;
+      }
 
       // @ts-ignore
       return link.outerHTML || url;
@@ -111,7 +116,7 @@ const ParsedNote: Component<{
 
   const media = useMediaContext();
 
-  const parsedContent = (text: string) => {
+  const parsedContent = (text: string, highlightOnly?: 'text' | 'links') => {
     const regex = /\#\[([0-9]*)\]/g;
     let parsed = text;
 
@@ -135,15 +140,28 @@ const ParsedNote: Component<{
           props.note.mentionedNotes &&
           props.note.mentionedNotes[tag[1]]
         ) {
-          const embeded = (
-            <div>
-              <EmbeddedNote
-                note={props.note.mentionedNotes[tag[1]]}
-                mentionedUsers={props.note.mentionedUsers}
-              />
-            </div>
-          );
+          const hex = tag[1];
+          const noteId = `nostr:${nip19.noteEncode(hex)}`;
+          const path = `/e/${nip19.noteEncode(hex)}`;
 
+          let embeded = <span>{noteId}</span>;
+
+          if (highlightOnly === 'links') {
+            embeded = <span class='linkish'>@{noteId}</span>;
+          }
+
+          if (!highlightOnly) {
+            const ment = props.note.mentionedNotes[hex];
+
+            embeded = ment ?
+              <div>
+                <EmbeddedNote
+                  note={ment}
+                  mentionedUsers={props.note.mentionedUsers}
+                />
+              </div> :
+              <A href={path}>{noteId}</A>;
+          }
 
           // @ts-ignore
           parsed = parsed.replace(`#[${r}]`, embeded.outerHTML);
@@ -152,7 +170,19 @@ const ParsedNote: Component<{
         if (tag[0] === 'p' && props.note.mentionedUsers && props.note.mentionedUsers[tag[1]]) {
           const user = props.note.mentionedUsers[tag[1]];
 
-          const link = MentionedUserLink({ user });
+          const path = `/p/${user.npub}`;
+
+          const label = userName(user);
+
+          let link = <span>@{label}</span>;
+
+          if (highlightOnly === 'links') {
+            link = <span class='linkish'>@{label}</span>;
+          }
+
+          if (!highlightOnly) {
+            link = user ? <A href={path}>@{label}</A> : MentionedUserLink({ user });
+          }
 
           // @ts-ignore
           parsed = parsed.replace(`#[${r}]`, link.outerHTML);
@@ -218,11 +248,13 @@ const ParsedNote: Component<{
           highlightHashtags(
             parseNote1(props.note.post.content, media?.actions.getMediaUrl)
           ),
+          props.noLinks,
         ),
         props.note,
         props.noLinks,
       ),
       props.note,
+      props.noLinks,
     );
   };
 
@@ -234,11 +266,13 @@ const ParsedNote: Component<{
             props.note.post.content,
             props.noLinks,
           ),
+          props.noLinks,
         ),
         props.note,
         props.noLinks,
       ),
       props.note,
+      props.noLinks,
     );
   };
 
diff --git a/src/components/SmallNote/SmallNote.tsx b/src/components/SmallNote/SmallNote.tsx
index 005bf44..af6a38d 100644
--- a/src/components/SmallNote/SmallNote.tsx
+++ b/src/components/SmallNote/SmallNote.tsx
@@ -73,7 +73,7 @@ const SmallNote: Component<{ note: PrimalNote, children?: JSXElement, id?: strin
   };
 
   return (
-    <div id={props.id} class={styles.smallNote}>
+    <div id={props.id} class={styles.smallNote} data-note-id={props.note.post.noteId}>
       <A href={`/p/${props.note.user.npub}`} class={styles.avatar}>
         <Avatar user={props.note.user} size="xxs" />
       </A>