Implement zoomable images

package.json

@@ -30,6 +30,7 @@
     "@types/dompurify": "^2.4.0",
     "dompurify": "^3.0.0",
     "link-preview-js": "^3.0.4",
+    "medium-zoom": "^1.0.8",
     "nostr-tools": "^1.4.1",
     "sass": "^1.58.0",
     "solid-js": "^1.6.6"

src/components/EmbeddedNote/EmbeddedNote.tsx

@@ -169,7 +169,7 @@ const EmbeddedNote: Component<{ note: PrimalNote, mentionedUsers?: Record<string
           parseNpubLinks(
             parsedContent(
               highlightHashtags(
-                parseNote2(props.note.post.content)
+                parseNote2(props.note.post.content).urlified
               ),
             ),
             props.note,

src/components/NewNote/EditBox/EditBox.tsx

@@ -808,7 +808,7 @@ const EditBox: Component<{ replyToNote?: PrimalNote, onClose?: () => void, idPre
 
 
   const parseForReferece = (value: string) => {
-    const content = replaceLinkPreviews(parseUserMentions(highlightHashtags(parseNote1(value))));
+    const content = replaceLinkPreviews(parseUserMentions(highlightHashtags(parseNote1(value).urlified)));
 
     parseNpubLinks(content);
     parseNoteLinks(content);

src/components/Note/Note.module.scss

@@ -52,45 +52,37 @@
   }
 }
 
-
-.postLink {
+.container {
   text-decoration: none;
   color: unset;
   margin: 0px;
   padding: 16px 20px;
-  // background: var(--brand-gradient-vertical);
   background-color: var(--background-card);
   border-radius: 8px;
   display: block;
   transition: 0.2s padding;
   margin-top: 8px;
+
   >div {
     border-radius: 4px;
     transition: 0.2s border-radius ease-out;
   }
-
-  // &:hover {
-  //   padding-left: 4px;
-  //   transition: 0.2s padding;
-  //   border-radius: 4px;
-  //   >div {
-  //     border-radius: 0px 4px 4px 0px;
-  //     transition: 0.2s border-radius ease-out;
-  //   }
-  // }
 }
 
 .repostedBy {
   padding-bottom: 16px;
   display: flex;
+
   >span {
     >a {
       margin-inline: 5px;
     }
+
     color: var(--text-tertiary);
     font-size: 16px;
     line-height: 16px;
     font-weight: 400;
+
     >span {
       text-transform: lowercase;
     }
@@ -101,17 +93,19 @@
 @media only screen and (max-width: 720px) {
   .postLink {
     width: 100vw;
+
     .post {
       width: 100%;
       // grid-template-columns: 62px 1fr;
       margin-left: 0px;
       margin-right: 0px;
       padding-right: 0px;
+
       .content {
         margin-left: 0;
       }
     }
 
   }
 
-}
+}

src/components/Note/Note.tsx

@@ -1,57 +1,38 @@
-import { A } from '@solidjs/router';
-import { Component, Show } from 'solid-js';
-import { PrimalNote } from '../../types/primal';
-import ParsedNote from '../ParsedNote/ParsedNote';
-import NoteFooter from './NoteFooter/NoteFooter';
-import NoteHeader from './NoteHeader/NoteHeader';
-
-import styles from './Note.module.scss';
-import { useThreadContext } from '../../contexts/ThreadContext';
-import { useIntl } from '@cookbook/solid-intl';
-import { truncateNpub } from '../../stores/profile';
-import { note as t } from '../../translations';
+import { A } from "@solidjs/router";
+import { Component, Show } from "solid-js";
+import { PrimalNote } from "../../types/primal";
+import ParsedNote from "../ParsedNote/ParsedNote";
+import NoteFooter from "./NoteFooter/NoteFooter";
+import NoteHeader from "./NoteHeader/NoteHeader";
+
+import styles from "./Note.module.scss";
+import { useIntl } from "@cookbook/solid-intl";
+import { truncateNpub } from "../../stores/profile";
+import { note as t } from "../../translations";
 
 const Note: Component<{ note: PrimalNote }> = (props) => {
-
-  const threadContext = useThreadContext();
   const intl = useIntl();
 
   const repost = () => props.note.repost;
 
-  const navToThread = (note: PrimalNote) => {
-    threadContext?.actions.setPrimaryNote(note);
-  };
-
   const reposterName = () => {
     const r = repost();
 
     if (!r) {
-      return '';
+      return "";
     }
 
-    return r.user?.displayName ||
-      r.user?.name ||
-      truncateNpub(r.user.npub);
-  }
+    return r.user?.displayName || r.user?.name || truncateNpub(r.user.npub);
+  };
 
   return (
-    <A
-      class={styles.postLink}
-      href={`/e/${props.note?.post.noteId}`}
-      onClick={() => navToThread(props.note)}
-      data-event={props.note.post.id}
-      data-event-bech32={props.note.post.noteId}
-    >
+    <div class={styles.container}>
       <Show when={repost()}>
         <div class={styles.repostedBy}>
           <div class={styles.repostIcon}></div>
           <span>
-            <A href={`/p/${repost()?.user.npub}`} >
-              {reposterName()}
-            </A>
-            <span>
-              {intl.formatMessage(t.reposted)}
-            </span>
+            <A href={`/profile/${repost()?.user.npub}`}>{reposterName()}</A>
+            <span>{intl.formatMessage(t.reposted)}</span>
           </span>
         </div>
       </Show>
@@ -64,8 +45,8 @@ const Note: Component<{ note: PrimalNote }> = (props) => {
           <NoteFooter note={props.note} />
         </div>
       </div>
-    </A>
-  )
-}
+    </div>
+  );
+};
 
 export default Note;

src/components/ParsedNote/ParsedNote.module.scss

@@ -88,3 +88,15 @@
 .error {
   color: var(--brand-1);
 }
+
+.imagesContainer {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.postLink {
+  text-decoration: none !important;
+  color: unset;
+  margin: 0px;
+}