note options constant param

packages/app/src/Components/Event/Create/NoteCreator.tsx

@@ -30,6 +30,32 @@ import { ZapTarget } from "@/Utils/Zapper";
 import FileUploadProgress from "../FileUpload";
 import { OkResponseRow } from "./OkResponseRow";
 
+const previewNoteOptions = {
+  showContextMenu: false,
+  showFooter: false,
+  canClick: false,
+  showTime: false,
+};
+
+const replyToNoteOptions = {
+  showFooter: false,
+  showContextMenu: false,
+  showProfileCard: false,
+  showTime: false,
+  canClick: false,
+  showMedia: false,
+  longFormPreview: true,
+};
+
+const quoteNoteOptions = {
+  showFooter: false,
+  showContextMenu: false,
+  showTime: false,
+  canClick: false,
+  showMedia: false,
+  longFormPreview: true,
+};
+
 export function NoteCreator() {
   const { formatMessage } = useIntl();
   const uploader = useFileUpload();
@@ -293,17 +319,7 @@ export function NoteCreator() {
 
   function getPreviewNote() {
     if (note.preview) {
-      return (
+      return <Note data={note.preview as TaggedNostrEvent} options={previewNoteOptions} />;
-        <Note
-          data={note.preview as TaggedNostrEvent}
-          options={{
-            showContextMenu: false,
-            showFooter: false,
-            canClick: false,
-            showTime: false,
-          }}
-        />
-      );
     }
   }
 
@@ -600,18 +616,7 @@ export function NoteCreator() {
             <h4>
               <FormattedMessage defaultMessage="Reply To" id="8ED/4u" />
             </h4>
-            <Note
+            <Note data={note.replyTo} options={replyToNoteOptions} />
-              data={note.replyTo}
-              options={{
-                showFooter: false,
-                showContextMenu: false,
-                showProfileCard: false,
-                showTime: false,
-                canClick: false,
-                showMedia: false,
-                longFormPreview: true,
-              }}
-            />
           </>
         )}
         {note.quote && (
@@ -619,17 +624,7 @@ export function NoteCreator() {
             <h4>
               <FormattedMessage defaultMessage="Quote Repost" id="C7642/" />
             </h4>
-            <Note
+            <Note data={note.quote} options={quoteNoteOptions} />
-              data={note.quote}
-              options={{
-                showFooter: false,
-                showContextMenu: false,
-                showTime: false,
-                canClick: false,
-                showMedia: false,
-                longFormPreview: true,
-              }}
-            />
           </>
         )}
         {note.preview && getPreviewNote()}

packages/app/src/Components/Event/Note/Note.tsx

@@ -1,12 +1,13 @@
-import { EventKind, NostrLink, TaggedNostrEvent } from "@snort/system";
+import { EventKind, NostrLink } from "@snort/system";
 import classNames from "classnames";
-import React, { useState } from "react";
+import React, { useCallback, useState } from "react";
 import { useInView } from "react-intersection-observer";
 import { FormattedMessage } from "react-intl";
 import { useNavigate } from "react-router-dom";
 
 import NoteHeader from "@/Components/Event/Note/NoteHeader";
 import { NoteText } from "@/Components/Event/Note/NoteText";
+import { TranslationInfo } from "@/Components/Event/Note/TranslationInfo";
 import useModeration from "@/Hooks/useModeration";
 import { chainKey } from "@/Hooks/useThreadContext";
 import { findTag } from "@/Utils";
@@ -19,128 +20,48 @@ import Poll from "../Poll";
 import { NoteTranslation } from "./NoteContextMenu";
 import NoteFooter from "./NoteFooter";
 
+const defaultOptions = {
+  showHeader: true,
+  showTime: true,
+  showFooter: true,
+  canUnpin: false,
+  canUnbookmark: false,
+  showContextMenu: true,
+};
+
+const canRenderAsTextNote = [EventKind.TextNote, EventKind.Polls];
+
 export function Note(props: NoteProps) {
   const { data: ev, highlight, options: opt, ignoreModeration = false, className, waitUntilInView } = props;
-
+  const baseClassName = classNames("note min-h-[110px] flex flex-col gap-4 card", className ?? "");
-  const baseClassName = classNames("note min-h-[110px] flex flex-col gap-4 card", className);
-  const navigate = useNavigate();
-
   const { isEventMuted } = useModeration();
   const { ref, inView } = useInView({ triggerOnce: true, rootMargin: "2000px" });
   const [showTranslation, setShowTranslation] = useState(true);
   const [translated, setTranslated] = useState<NoteTranslation>();
 
-  const options = {
+  const optionsMerged = { ...defaultOptions, ...opt };
-    showHeader: true,
+  const goToEvent = useGoToEvent(props, optionsMerged);
-    showTime: true,
-    showFooter: true,
-    canUnpin: false,
-    canUnbookmark: false,
-    showContextMenu: true,
-    ...opt,
-  };
 
-  function goToEvent(e: React.MouseEvent, eTarget: TaggedNostrEvent) {
-    if (opt?.canClick === false) {
-      return;
-    }
-
-    let target = e.target as HTMLElement | null;
-    while (target) {
-      if (
-        target.tagName === "A" ||
-        target.tagName === "BUTTON" ||
-        target.classList.contains("reaction-pill") ||
-        target.classList.contains("szh-menu-container")
-      ) {
-        return; // is there a better way to do this?
-      }
-      target = target.parentElement;
-    }
-
-    e.stopPropagation();
-    if (props.onClick) {
-      props.onClick(eTarget);
-      return;
-    }
-
-    const link = NostrLink.fromEvent(eTarget);
-    // detect cmd key and open in new tab
-    if (e.metaKey) {
-      window.open(`/${link.encode(CONFIG.eventLinkPrefix)}`, "_blank");
-    } else {
-      navigate(`/${link.encode(CONFIG.eventLinkPrefix)}`, {
-        state: eTarget,
-      });
-    }
-  }
-
-  const canRenderAsTextNote = [EventKind.TextNote, EventKind.Polls];
   if (!canRenderAsTextNote.includes(ev.kind)) {
-    const alt = findTag(ev, "alt");
+    return handleNonTextNote(ev);
-    if (alt) {
-      return (
-        <div className="note-quote">
-          <Text id={ev.id} content={alt} tags={[]} creator={ev.pubkey} />
-        </div>
-      );
-    } else {
-      return (
-        <>
-          <h4>
-            <FormattedMessage {...messages.UnknownEventKind} values={{ kind: ev.kind }} />
-          </h4>
-          <pre>{JSON.stringify(ev, undefined, "  ")}</pre>
-        </>
-      );
-    }
-  }
-
-  function translation() {
-    if (translated && translated.confidence > 0.5) {
-      return (
-        <>
-          <span
-            className="text-xs font-semibold text-gray-light select-none"
-            onClick={e => {
-              e.stopPropagation();
-              setShowTranslation(s => !s);
-            }}>
-            <FormattedMessage {...messages.TranslatedFrom} values={{ lang: translated.fromLanguage }} />
-          </span>
-        </>
-      );
-    } else if (translated) {
-      return (
-        <p className="text-xs font-semibold text-gray-light">
-          <FormattedMessage {...messages.TranslationFailed} />
-        </p>
-      );
-    }
-  }
-
-  function pollOptions() {
-    if (ev.kind !== EventKind.Polls) return;
-
-    return <Poll ev={ev} />;
   }
 
   function content() {
-    if (waitUntilInView && !inView) return undefined;
+    if (waitUntilInView && !inView) return null;
     return (
       <>
-        {options.showHeader && <NoteHeader ev={ev} options={options} setTranslated={setTranslated} />}
+        {optionsMerged.showHeader && <NoteHeader ev={ev} options={optionsMerged} setTranslated={setTranslated} />}
-        <div className="body" onClick={e => goToEvent(e, ev, true)}>
+        <div className="body" onClick={e => goToEvent(e, ev)}>
           <NoteText {...props} translated={translated} showTranslation={showTranslation} />
-          {translation()}
+          {translated && <TranslationInfo translated={translated} setShowTranslation={setShowTranslation} />}
-          {pollOptions()}
+          {ev.kind === EventKind.Polls && <Poll ev={ev} />}
         </div>
-        {options.showFooter && <NoteFooter ev={ev} replies={props.threadChains?.get(chainKey(ev))?.length} />}
+        {optionsMerged.showFooter && <NoteFooter ev={ev} replies={props.threadChains?.get(chainKey(ev))?.length} />}
       </>
     );
   }
 
-  const note = (
+  const noteElement = (
     <div
       className={classNames(baseClassName, {
         active: highlight,
@@ -152,5 +73,63 @@ export function Note(props: NoteProps) {
     </div>
   );
 
-  return !ignoreModeration && isEventMuted(ev) ? <HiddenNote>{note}</HiddenNote> : note;
+  return !ignoreModeration && isEventMuted(ev) ? <HiddenNote>{noteElement}</HiddenNote> : noteElement;
+}
+
+function useGoToEvent(props, options) {
+  const navigate = useNavigate();
+  return useCallback(
+    (e, eTarget) => {
+      if (options?.canClick === false) {
+        return;
+      }
+
+      let target = e.target as HTMLElement | null;
+      while (target) {
+        if (
+          target.tagName === "A" ||
+          target.tagName === "BUTTON" ||
+          target.classList.contains("reaction-pill") ||
+          target.classList.contains("szh-menu-container")
+        ) {
+          return;
+        }
+        target = target.parentElement;
+      }
+
+      e.stopPropagation();
+      if (props.onClick) {
+        props.onClick(eTarget);
+        return;
+      }
+
+      const link = NostrLink.fromEvent(eTarget);
+      if (e.metaKey) {
+        window.open(`/${link.encode(CONFIG.eventLinkPrefix)}`, "_blank");
+      } else {
+        navigate(`/${link.encode(CONFIG.eventLinkPrefix)}`, { state: eTarget });
+      }
+    },
+    [navigate, props, options],
+  );
+}
+
+function handleNonTextNote(ev) {
+  const alt = findTag(ev, "alt");
+  if (alt) {
+    return (
+      <div className="note-quote">
+        <Text id={ev.id} content={alt} tags={[]} creator={ev.pubkey} />
+      </div>
+    );
+  } else {
+    return (
+      <>
+        <h4>
+          <FormattedMessage {...messages.UnknownEventKind} values={{ kind: ev.kind }} />
+        </h4>
+        <pre>{JSON.stringify(ev, undefined, "  ")}</pre>
+      </>
+    );
+  }
 }

packages/app/src/Components/Event/Note/NoteQuote.tsx

@@ -4,6 +4,11 @@ import { useEventFeed } from "@snort/system-react";
 import Note from "@/Components/Event/EventComponent";
 import PageSpinner from "@/Components/PageSpinner";
 
+const options = {
+  showFooter: false,
+  truncate: true,
+};
+
 export default function NoteQuote({ link, depth }: { link: NostrLink; depth?: number }) {
   const ev = useEventFeed(link);
   if (!ev.data)
@@ -12,15 +17,5 @@ export default function NoteQuote({ link, depth }: { link: NostrLink; depth?: nu
         <PageSpinner />
       </div>
     );
-  return (
+  return <Note data={ev.data} className="note-quote" depth={(depth ?? 0) + 1} options={options} />;
-    <Note
-      data={ev.data}
-      className="note-quote"
-      depth={(depth ?? 0) + 1}
-      options={{
-        showFooter: false,
-        truncate: true,
-      }}
-    />
-  );
 }

packages/app/src/Components/Event/Note/TranslationInfo.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import { FormattedMessage } from "react-intl";
+
+import { NoteTranslation } from "@/Components/Event/Note/NoteContextMenu";
+import messages from "@/Components/messages";
+
+interface TranslationInfoProps {
+  translated: NoteTranslation;
+  setShowTranslation: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+export function TranslationInfo({ translated, setShowTranslation }: TranslationInfoProps) {
+  if (translated && translated.confidence > 0.5) {
+    return (
+      <>
+        <span
+          className="text-xs font-semibold text-gray-light select-none"
+          onClick={e => {
+            e.stopPropagation();
+            setShowTranslation(show => !show);
+          }}>
+          <FormattedMessage {...messages.TranslatedFrom} values={{ lang: translated.fromLanguage }} />
+        </span>
+      </>
+    );
+  } else if (translated) {
+    return (
+      <p className="text-xs font-semibold text-gray-light">
+        <FormattedMessage {...messages.TranslationFailed} />
+      </p>
+    );
+  }
+  return null;
+}

packages/app/src/Components/Feed/Articles.tsx

@@ -6,6 +6,10 @@ import { orderDescending } from "@/Utils";
 
 import Note from "../Event/EventComponent";
 
+const options = {
+  longFormPreview: true,
+};
+
 export default function Articles() {
   const data = useArticles();
   const deck = useContext(DeckContext);
@@ -16,9 +20,7 @@ export default function Articles() {
         <Note
           data={a}
           key={a.id}
-          options={{
+          options={options}
-            longFormPreview: true,
-          }}
           onClick={ev => {
             deck?.setArticle(ev);
           }}

packages/app/src/Components/Trending/TrendingPosts.tsx

@@ -1,7 +1,7 @@
 import { removeUndefined } from "@snort/shared";
 import { NostrEvent, NostrLink, TaggedNostrEvent } from "@snort/system";
 import classNames from "classnames";
-import { useState } from "react";
+import { useMemo, useState } from "react";
 
 import { ErrorOrOffline } from "@/Components/ErrorOrOffline";
 import Note from "@/Components/Event/EventComponent";
@@ -41,6 +41,18 @@ export default function TrendingNotes({ count = Infinity, small = false }: { cou
     );
   });
 
+  const options = useMemo(
+    () => ({
+      showFooter: !small,
+      showReactionsLink: !small,
+      showMedia: !small,
+      longFormPreview: !small,
+      truncate: small,
+      showContextMenu: !small,
+    }),
+    [small],
+  );
+
   const login = useLogin();
   const displayAsInitial = small ? "list" : login.feedDisplayAs ?? "list";
   const [displayAs, setDisplayAs] = useState<DisplayAs>(displayAsInitial);
@@ -69,23 +81,11 @@ export default function TrendingNotes({ count = Infinity, small = false }: { cou
   };
 
   const renderList = () => {
-    return filteredAndLimitedPosts.map(e =>
+    return filteredAndLimitedPosts.map((e, index) =>
       small ? (
         <ShortNote key={e.id} event={e as TaggedNostrEvent} />
       ) : (
-        <Note
+        <Note key={e.id} data={e as TaggedNostrEvent} depth={0} options={options} waitUntilInView={index > 5} />
-          key={e.id}
-          data={e as TaggedNostrEvent}
-          depth={0}
-          options={{
-            showFooter: !small,
-            showReactionsLink: !small,
-            showMedia: !small,
-            longFormPreview: !small,
-            truncate: small,
-            showContextMenu: !small,
-          }}
-        />
       ),
     );
   };

packages/app/src/Components/User/Bookmarks.tsx

@@ -19,6 +19,10 @@ const Bookmarks = ({ pubkey, bookmarks }: BookmarksProps) => {
   const ps = useMemo(() => {
     return [...new Set(bookmarks.map(ev => ev.pubkey))];
   }, [bookmarks]);
+  const options = useMemo(
+    () => ({ showTime: false, showBookmarked: true, canUnbookmark: publicKey === pubkey }),
+    [publicKey, pubkey],
+  );
 
   function renderOption(p: HexKey) {
     const profile = UserCache.getFromCache(p);
@@ -41,13 +45,7 @@ const Bookmarks = ({ pubkey, bookmarks }: BookmarksProps) => {
       {bookmarks
         .filter(b => (onlyPubkey === "all" ? true : b.pubkey === onlyPubkey))
         .map(n => {
-          return (
+          return <Note key={n.id} data={n} options={options} />;
-            <Note
-              key={n.id}
-              data={n}
-              options={{ showTime: false, showBookmarked: true, canUnbookmark: publicKey === pubkey }}
-            />
-          );
         })}
     </>
   );

packages/app/src/lang.json

@@ -1033,6 +1033,9 @@
     "defaultMessage": "Redeem",
     "description": "Button: Redeem Cashu token"
   },
+  "Y7FG5M": {
+    "defaultMessage": "Image not available"
+  },
   "YDURw6": {
     "defaultMessage": "Service URL"
   },

packages/app/src/translations/en.json

@@ -340,6 +340,7 @@
   "Xnimz0": "Sending from <b>{wallet}</b>",
   "Xopqkl": "Your default zap amount is {number} sats, example values are calculated from this.",
   "XrSk2j": "Redeem",
+  "Y7FG5M": "Image not available",
   "YDURw6": "Service URL",
   "YR2I9M": "No keys, no {app}, There is no way to reset it if you don't back up. It only takes a minute.",
   "YXA3AH": "Enable reactions",