From 3c74ab62362bebb161928b97991dcc84492fcdd0 Mon Sep 17 00:00:00 2001
From: Kieran <kieran@harkin.me>
Date: Sat, 28 Jan 2023 20:38:53 +0000
Subject: [PATCH] feat: show more

---
 src/Element/Note.css        |  7 +++++++
 src/Element/Note.tsx        | 23 +++++++++++++++++++----
 src/Element/NoteCreator.css |  2 +-
 3 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/src/Element/Note.css b/src/Element/Note.css
index ffe85383..55c4f5b5 100644
--- a/src/Element/Note.css
+++ b/src/Element/Note.css
@@ -170,3 +170,10 @@
 .light .note.active>.footer>.reaction-pill.reacted {
   color: var(--highlight);
 }
+
+.note-expand .body {
+  max-height: 300px;
+  overflow-y: hidden;
+  mask-image: linear-gradient(to bottom, var(--note-bg) 60%, rgba(0,0,0,0));
+  -webkit-mask-image: linear-gradient(to bottom, var(--note-bg) 60%, rgba(0,0,0,0));
+}
\ No newline at end of file
diff --git a/src/Element/Note.tsx b/src/Element/Note.tsx
index 38d5193f..6cf87cd2 100644
--- a/src/Element/Note.tsx
+++ b/src/Element/Note.tsx
@@ -1,5 +1,5 @@
 import "./Note.css";
-import { useCallback, useMemo } from "react";
+import { useCallback, useLayoutEffect, useMemo, useState } from "react";
 import { useNavigate } from "react-router-dom";
 
 import { default as NEvent } from "Nostr/Event";
@@ -33,7 +33,9 @@ export default function Note(props: NoteProps) {
     const pubKeys = useMemo(() => ev.Thread?.PubKeys || [], [ev]);
     const users = useUserProfiles(pubKeys);
     const deletions = useMemo(() => getReactions(related, ev.Id, EventKind.Deletion), [related]);
-    const { ref, inView } = useInView({ triggerOnce: true });
+    const { ref, inView, entry } = useInView({ triggerOnce: true });
+    const [extendable, setExtendable] = useState<boolean>(false);
+    const [showMore, setShowMore] = useState<boolean>(false);
 
     const options = {
         showHeader: true,
@@ -50,6 +52,15 @@ export default function Note(props: NoteProps) {
         return <Text content={body} tags={ev.Tags} users={users || new Map()} />;
     }, [ev]);
 
+    useLayoutEffect(() => {
+        if (entry && inView && extendable === false) {
+            let h = entry?.target.clientHeight ?? 0;
+            if (h > 650) {
+                setExtendable(true);
+            }
+        }
+    }, [inView, entry, extendable]);
+
     function goToEvent(e: any, id: u256) {
         if (!window.location.pathname.startsWith("/e/")) {
             e.stopPropagation();
@@ -78,7 +89,7 @@ export default function Note(props: NoteProps) {
         let pubMentions = mentions.length > maxMentions ? `${mentions?.slice(0, maxMentions).join(", ")} & ${othersLength} other${othersLength > 1 ? 's' : ''}` : mentions?.join(", ");
         return (
             <div className="reply">
-             {(pubMentions?.length ?? 0) > 0 ? pubMentions : replyId ? hexToBech32("note", replyId)?.substring(0, 12) : ""}
+                {(pubMentions?.length ?? 0) > 0 ? pubMentions : replyId ? hexToBech32("note", replyId)?.substring(0, 12) : ""}
             </div>
         )
     }
@@ -109,13 +120,17 @@ export default function Note(props: NoteProps) {
                 <div className="body" onClick={(e) => goToEvent(e, ev.Id)}>
                     {transformBody()}
                 </div>
+                {extendable && !showMore && (<div className="flex f-center">
+                    <button className="btn mt10" onClick={() => setShowMore(true)}>Show more</button>
+                </div>)}
                 {options.showFooter ? <NoteFooter ev={ev} related={related} /> : null}
             </>
         )
     }
 
     return (
-        <div className={`note card${highlight ? " active" : ""}${isThread ? " thread" : ""}`} ref={ref}>
+        <div className={`note card${highlight ? " active" : ""}${isThread ? " thread" : ""}${extendable && !showMore ? " note-expand" : ""}`}
+            ref={ref} >
             {content()}
         </div>
     )
diff --git a/src/Element/NoteCreator.css b/src/Element/NoteCreator.css
index 9dce9434..117e113f 100644
--- a/src/Element/NoteCreator.css
+++ b/src/Element/NoteCreator.css
@@ -44,4 +44,4 @@
     background-color: var(--bg-color);
     color: var(--font-color);
     font-size: var(--font-size);
-}
+}
\ No newline at end of file