Patch small notes in the sidebar to show mentioned users

src/components/EmbeddedNote/EmbeddedNote.tsx

@@ -176,7 +176,7 @@ const EmbeddedNote: Component<{ note: PrimalNote, mentionedUsers?: Record<string
               ),
             ),
             props.note,
-            true,
+            'links',
           ),
           props.note,
           !props.includeEmbeds,

src/components/ParsedNote/ParsedNote.tsx

@@ -1,6 +1,6 @@
 import { A } from '@solidjs/router';
 import { hexToNpub } from '../../lib/keys';
-import { linkPreviews, parseNote1 } from '../../lib/notes';
+import { linkPreviews, parseNote1, parseNote3 } from '../../lib/notes';
 import { truncateNpub, userName } from '../../stores/profile';
 import EmbeddedNote from '../EmbeddedNote/EmbeddedNote';
 import {
@@ -59,7 +59,7 @@ export const parseNoteLinks = (text: string, note: PrimalNote, highlightOnly = f
 
 };
 
-export const parseNpubLinks = (text: string, note: PrimalNote, highlightOnly = false) => {
+export const parseNpubLinks = (text: string, note: PrimalNote, highlightOnly?: 'links' | 'text') => {
 
   const regex = /\bnostr:((npub|nprofile)1\w+)\b|#\[(\d+)\]/g;
 
@@ -80,14 +80,16 @@ export const parseNpubLinks = (text: string, note: PrimalNote, highlightOnly = f
 
       const user = note.mentionedUsers && note.mentionedUsers[hex];
 
-      let link = highlightOnly ?
+      const label = user ? userName(user) : truncateNpub(npub);
-        <span class='linkish'>@{truncateNpub(npub)}</span> :
-        <A href={path}>@{truncateNpub(npub)}</A>;
 
-      if (user) {
+      let link = <span>@{label}</span>;
-        link = highlightOnly ?
+
-          <span class='linkish'>@{userName(user)}</span> :
+      if (highlightOnly === 'links') {
-          MentionedUserLink({ user });
+        link = <span class='linkish'>@{label}</span>;
+      }
+
+      if (!highlightOnly) {
+        link = user ? <A href={path}>@{label}</A> : MentionedUserLink({ user });
       }
 
       // @ts-ignore
@@ -99,7 +101,13 @@ export const parseNpubLinks = (text: string, note: PrimalNote, highlightOnly = f
 
 };
 
-const ParsedNote: Component<{ note: PrimalNote, ignoreMentionedNotes?: boolean, id?: string }> = (props) => {
+const ParsedNote: Component<{
+  note: PrimalNote,
+  ignoreMentionedNotes?: boolean,
+  id?: string,
+  ignoreMedia?: boolean,
+  noLinks?: 'links' | 'text',
+}> = (props) => {
 
   const media = useMediaContext();
 
@@ -156,12 +164,17 @@ const ParsedNote: Component<{ note: PrimalNote, ignoreMentionedNotes?: boolean,
 
   };
 
-  const highlightHashtags = (text: string) => {
+  const highlightHashtags = (text: string, noLinks?: 'links' | 'text') => {
     const regex = /(?:\s|^)#[^\s!@#$%^&*(),.?":{}|<>]+/ig;
 
     return text.replace(regex, (token) => {
       const [space, term] = token.split('#');
-      const embeded = (
+      const embeded = noLinks === 'text' ? (
+        <span>
+          {space}
+          <span>#{term}</span>
+        </span>
+      ) : (
         <span>
           {space}
           <A
@@ -207,12 +220,29 @@ const ParsedNote: Component<{ note: PrimalNote, ignoreMentionedNotes?: boolean,
           ),
         ),
         props.note,
+        props.noLinks,
       ),
       props.note,
     );
   };
 
-  const [displayedContent, setDisplayedContent] = createSignal<string>(content());
+  const smallContent = () => {
+    return parseNoteLinks(
+      parseNpubLinks(
+        parsedContent(
+          highlightHashtags(
+            props.note.post.content,
+            props.noLinks,
+          ),
+        ),
+        props.note,
+        props.noLinks,
+      ),
+      props.note,
+    );
+  };
+
+  const [displayedContent, setDisplayedContent] = createSignal<string>(props.ignoreMedia ? smallContent() : content());
 
   createEffect(() => {
     const newContent = replaceLinkPreviews(displayedContent(), { ...linkPreviews });

src/components/SmallNote/SmallNote.tsx

@@ -10,6 +10,7 @@ import { authorName } from '../../stores/profile';
 import { note as t } from '../../translations';
 import { useIntl } from '@cookbook/solid-intl';
 import { hookForDev } from '../../lib/devTools';
+import ParsedNote from '../ParsedNote/ParsedNote';
 
 
 const SmallNote: Component<{ note: PrimalNote, children?: JSXElement, id?: string }> = (props) => {
@@ -95,7 +96,8 @@ const SmallNote: Component<{ note: PrimalNote, children?: JSXElement, id?: strin
           </div>
         </div>
         <div class={styles.message}>
-          <div innerHTML={parsedContent(props.note.post.content)}>
+          <div>
+            <ParsedNote note={props.note} noLinks="text" ignoreMedia={true} />
           </div>
         </div>
       </A>