From 9a0b7c08d93a9a8d1681e9864fbdbe58d7b0a778 Mon Sep 17 00:00:00 2001
From: Martti Malmi <sirius@iki.fi>
Date: Sat, 25 Nov 2023 20:52:58 +0200
Subject: [PATCH] show more / less for long posts

---
 packages/app/src/Element/Event/Note.tsx       |  1 +
 packages/app/src/Element/Event/NoteInner.tsx  | 49 +++++++++++++++----
 packages/app/src/Element/Event/NoteQuote.tsx  |  1 +
 .../app/src/Element/Feed/TimelineFragment.tsx |  3 ++
 packages/app/src/lang.json                    |  3 ++
 packages/app/src/translations/en.json         |  1 +
 6 files changed, 48 insertions(+), 10 deletions(-)

diff --git a/packages/app/src/Element/Event/Note.tsx b/packages/app/src/Element/Event/Note.tsx
index 1b9105bb..0437023f 100644
--- a/packages/app/src/Element/Event/Note.tsx
+++ b/packages/app/src/Element/Event/Note.tsx
@@ -36,6 +36,7 @@ export interface NoteProps {
     canClick?: boolean;
     showMediaSpotlight?: boolean;
     longFormPreview?: boolean;
+    truncate?: boolean;
   };
 }
 
diff --git a/packages/app/src/Element/Event/NoteInner.tsx b/packages/app/src/Element/Event/NoteInner.tsx
index bc8af732..a97f685c 100644
--- a/packages/app/src/Element/Event/NoteInner.tsx
+++ b/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 = () => {
diff --git a/packages/app/src/Element/Event/NoteQuote.tsx b/packages/app/src/Element/Event/NoteQuote.tsx
index 4dd2b399..455031ab 100644
--- a/packages/app/src/Element/Event/NoteQuote.tsx
+++ b/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,
       }}
     />
   );
diff --git a/packages/app/src/Element/Feed/TimelineFragment.tsx b/packages/app/src/Element/Feed/TimelineFragment.tsx
index ad7afd23..d9dd08c9 100644
--- a/packages/app/src/Element/Feed/TimelineFragment.tsx
+++ b/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,
+              }}
             />
           ),
       )}
diff --git a/packages/app/src/lang.json b/packages/app/src/lang.json
index c30a6eb8..6e5e8513 100644
--- a/packages/app/src/lang.json
+++ b/packages/app/src/lang.json
@@ -1343,6 +1343,9 @@
   "qtWLmt": {
     "defaultMessage": "Like"
   },
+  "qyJtWy": {
+    "defaultMessage": "Show less"
+  },
   "qydxOd": {
     "defaultMessage": "Science"
   },
diff --git a/packages/app/src/translations/en.json b/packages/app/src/translations/en.json
index 4757cd0d..2a1a5ef7 100644
--- a/packages/app/src/translations/en.json
+++ b/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",