show more / less for long posts

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

@@ -36,6 +36,7 @@ export interface NoteProps {
     canClick?: boolean;
     showMediaSpotlight?: boolean;
     longFormPreview?: boolean;
+    truncate?: boolean;
   };
 }
 

packages/app/src/Element/Event/NoteInner.tsx

@@ -27,6 +27,8 @@ import { NoteProps } from "./Note";
 import { chainKey } from "@/Hooks/useThreadContext";
 import { ProfileLink } from "@/Element/User/ProfileLink";
 
+const TEXT_TRUNCATE_LENGTH = 400;
+
 export function NoteInner(props: NoteProps) {
   const { data: ev, related, highlight, options: opt, ignoreModeration = false, className } = props;
 
@@ -43,6 +45,7 @@ export function NoteInner(props: NoteProps) {
   const [translated, setTranslated] = useState<NoteTranslation>();
   const [showTranslation, setShowTranslation] = useState(true);
   const { formatMessage } = useIntl();
+  const [showMore, setShowMore] = useState(false);
 
   const totalReactions = reactions.positive.length + reactions.negative.length + reposts.length + zaps.length;
 
@@ -78,22 +81,46 @@ export function NoteInner(props: NoteProps) {
     }
   }
 
+  const ToggleShowMore = () => (
+    <a
+      className="highlight"
+      onClick={e => {
+        e.preventDefault();
+        e.stopPropagation();
+        setShowMore(!showMore);
+      }}>
+      {showMore ? (
+        <FormattedMessage defaultMessage="Show less" id="qyJtWy" />
+      ) : (
+        <FormattedMessage defaultMessage="Show more" id="aWpBzj" />
+      )}
+    </a>
+  );
+
   const innerContent = useMemo(() => {
     const body = translated && showTranslation ? translated.text : ev?.content ?? "";
     const id = translated && showTranslation ? `${ev.id}-translated` : ev.id;
+    const shouldTruncate = opt?.truncate && body.length > TEXT_TRUNCATE_LENGTH;
+
     return (
-      <Text
-        id={id}
-        highlighText={props.searchedValue}
-        content={body}
-        tags={ev.tags}
-        creator={ev.pubkey}
-        depth={props.depth}
-        disableMedia={!(options.showMedia ?? true)}
-        disableMediaSpotlight={!(props.options?.showMediaSpotlight ?? true)}
-      />
+      <>
+        {shouldTruncate && showMore && <ToggleShowMore />}
+        <Text
+          id={id}
+          highlighText={props.searchedValue}
+          content={body}
+          tags={ev.tags}
+          creator={ev.pubkey}
+          depth={props.depth}
+          disableMedia={!(options.showMedia ?? true)}
+          disableMediaSpotlight={!(props.options?.showMediaSpotlight ?? true)}
+          truncate={shouldTruncate && !showMore ? TEXT_TRUNCATE_LENGTH : undefined}
+        />
+        {shouldTruncate && !showMore && <ToggleShowMore />}
+      </>
     );
   }, [
+    showMore,
     ev,
     translated,
     showTranslation,
@@ -101,6 +128,8 @@ export function NoteInner(props: NoteProps) {
     props.depth,
     options.showMedia,
     props.options?.showMediaSpotlight,
+    opt?.truncate,
+    TEXT_TRUNCATE_LENGTH,
   ]);
 
   const transformBody = () => {

packages/app/src/Element/Event/NoteQuote.tsx

@@ -15,6 +15,7 @@ export default function NoteQuote({ link, depth }: { link: NostrLink; depth?: nu
       depth={(depth ?? 0) + 1}
       options={{
         showFooter: false,
+        truncate: true,
       }}
     />
   );

packages/app/src/Element/Feed/TimelineFragment.tsx

@@ -103,6 +103,9 @@ export function TimelineFragment(props: TimelineFragProps) {
               depth={0}
               onClick={props.noteOnClick}
               context={props.noteContext?.(e)}
+              options={{
+                truncate: true,
+              }}
             />
           ),
       )}

packages/app/src/lang.json

@@ -1343,6 +1343,9 @@
   "qtWLmt": {
     "defaultMessage": "Like"
   },
+  "qyJtWy": {
+    "defaultMessage": "Show less"
+  },
   "qydxOd": {
     "defaultMessage": "Science"
   },

packages/app/src/translations/en.json

@@ -442,6 +442,7 @@
   "qkvYUb": "Add to Profile",
   "qmJ8kD": "Translation failed",
   "qtWLmt": "Like",
+  "qyJtWy": "Show less",
   "qydxOd": "Science",
   "qz9fty": "Incorrect pin",
   "r3C4x/": "Software",