chore: add compact mode to memo view

web/src/components/MemoView.tsx

@@ -42,10 +42,12 @@ const MemoView: React.FC<Props> = (props: Props) => {
   const [displayTime, setDisplayTime] = useState<string>(getRelativeTimeString(getTimeStampByDate(memo.displayTime)));
   const [creator, setCreator] = useState(userStore.getUserByUsername(extractUsernameFromName(memo.creator)));
   const memoContainerRef = useRef<HTMLDivElement>(null);
+  const [showCompactMode, setShowCompactMode] = useState(false);
   const referencedMemos = memo.relations.filter((relation) => relation.type === MemoRelation_Type.REFERENCE);
   const commentAmount = memo.relations.filter((relation) => relation.type === MemoRelation_Type.COMMENT).length;
   const readonly = memo.creator !== user?.name;
 
+  // Initial related data: creator.
   useEffect(() => {
     (async () => {
       const user = await userStore.getOrFetchUserByUsername(extractUsernameFromName(memo.creator));
@@ -53,6 +55,16 @@ const MemoView: React.FC<Props> = (props: Props) => {
     })();
   }, []);
 
+  // Initial compact mode.
+  useEffect(() => {
+    if (!memoContainerRef.current) {
+      return;
+    }
+    if ((memoContainerRef.current as HTMLDivElement).getBoundingClientRect().height > 512) {
+      setShowCompactMode(true);
+    }
+  }, []);
+
   // Update display time string.
   useEffect(() => {
     let intervalFlag: any = -1;
@@ -151,12 +163,24 @@ const MemoView: React.FC<Props> = (props: Props) => {
         </div>
       </div>
       <MemoContent
+        className={showCompactMode ? "!line-clamp-6" : ""}
         key={`${memo.id}-${memo.updateTime}`}
         memoId={memo.id}
         content={memo.content}
         readonly={readonly}
         onClick={handleMemoContentClick}
       />
+      {showCompactMode && (
+        <div className="w-full mt-2">
+          <Link
+            className="w-auto flex flex-row justify-start items-center text-sm text-blue-600 dark:text-blue-400 hover:underline"
+            to={`/m/${memo.name}`}
+          >
+            <span>{t("memo.show-more")}</span>
+            <Icon.ChevronRight className="w-4 h-auto" />
+          </Link>
+        </div>
+      )}
       <MemoResourceListView resources={memo.resources} />
       <MemoRelationListView memo={memo} relations={referencedMemos} />
       <MemoReactionistView memo={memo} reactions={memo.reactions} />

web/src/locales/en.json

@@ -102,7 +102,8 @@
     "comment": {
       "self": "Comments",
       "no-comment": "No comment"
-    }
+    },
+    "show-more": "Show more"
   },
   "resource": {
     "no-resources": "No resources.",

web/src/pages/MemoDetail.tsx

@@ -207,7 +207,10 @@ const MemoDetail = () => {
             </div>
           </div>
         </div>
-        <div id="comments" className="pt-8 pb-16 w-full">
+        <div className="pt-8 pb-16 w-full">
+          <h2 id="comments" className="sr-only">
+            Comments
+          </h2>
           <div className="relative mx-auto flex-grow w-full min-h-full flex flex-col justify-start items-start gap-y-1">
             {comments.length === 0 ? (
               <div className="w-full flex flex-col justify-center items-center py-6 mb-2">