fix: improved rendering of deeply nested comments on narrow screens

sunaurus · Apr 13, 2024 · d81c907 · d81c907
1 parent 9507818
commit d81c907
Show file tree

Hide file tree

Showing 5 changed files with 79 additions and 26 deletions.
diff --git a/src/app/comment/Comment.tsx b/src/app/comment/Comment.tsx
@@ -23,6 +23,7 @@ import {
 } from "@/app/comment/commentActions";
 import { LazyChildComments } from "@/app/comment/LazyChildComments";
 import { CommentTree } from "@/app/comment/CommentTree";
+import { ShowMoreCommentsLink } from "@/app/comment/ShowMoreCommentsLink";
 
 export const Comment = (props: {
   readonly commentView: CommentView;
@@ -33,6 +34,7 @@ export const Comment = (props: {
   readonly addPostLink?: boolean;
   readonly voteConfig: VoteConfig;
   readonly markdown: MarkdownProps;
+  readonly renderedDepth?: number;
   /**
    * Only needed when rendering comment trees, no need to pass for flat comment lists
    */
@@ -90,6 +92,7 @@ export const Comment = (props: {
     props.commentView.comment.creator_id ===
     props.loggedInUser?.local_user_view.person.id;
 
+  const renderedDepth = props.renderedDepth ?? 0;
   return (
     <div
       className={classNames("mr-2 flex items-start", props.className)}
@@ -301,22 +304,45 @@ export const Comment = (props: {
             />
           </div>
         ))}
-        {props.node && (
-          <div className={"peer-checked:group-[]:hidden"}>
-            {props.node.children.map((node) => (
-              <CommentTree
-                key={node.commentView.comment.id}
+        {props.node && props.commentView.counts.child_count > 0 && (
+          <>
+            <div
+              className={classNames("peer-checked:group-[]:hidden", {
+                "hidden sm:block": renderedDepth >= 3,
+                "sm:hidden lg:block": renderedDepth >= 4,
+                "lg:hidden xl:block": renderedDepth >= 5,
+                "xl:hidden 2xl:block": renderedDepth >= 6,
+              })}
+            >
+              {props.node.children.map((node) => (
+                <CommentTree
+                  key={node.commentView.comment.id}
+                  loggedInUser={props.loggedInUser}
+                  node={node}
+                  renderedDepth={renderedDepth + 1}
+                  voteConfig={props.voteConfig}
+                />
+              ))}
+              <LazyChildComments
                 loggedInUser={props.loggedInUser}
-                node={node}
+                node={props.node}
+                renderedDepth={renderedDepth + 1}
                 voteConfig={props.voteConfig}
               />
-            ))}
-            <LazyChildComments
-              loggedInUser={props.loggedInUser}
-              node={props.node}
-              voteConfig={props.voteConfig}
-            />
-          </div>
+            </div>
+            {renderedDepth >= 3 && (
+              <div
+                className={classNames("peer-checked:group-[]:hidden", {
+                  "sm:hidden": renderedDepth === 3,
+                  "lg:hidden": renderedDepth === 4,
+                  "xl:hidden": renderedDepth === 5,
+                  "2xl:hidden": renderedDepth >= 6,
+                })}
+              >
+                <ShowMoreCommentsLink rootId={props.commentView.comment.id} />
+              </div>
+            )}
+          </>
         )}
       </div>
     </div>

diff --git a/src/app/comment/CommentTree.tsx b/src/app/comment/CommentTree.tsx
@@ -11,6 +11,7 @@ export const CommentTree = memo(
     readonly highlightRoot?: boolean;
     readonly voteConfig: VoteConfig;
     readonly loggedInUser?: MyUserInfo;
+    readonly renderedDepth?: number;
   }) => {
     return (
       <div
@@ -26,6 +27,7 @@ export const CommentTree = memo(
           markdown={props.node.markdown}
           node={props.node}
           parentId={props.node.parent?.commentView.comment.id}
+          renderedDepth={props.renderedDepth}
           voteConfig={props.voteConfig}
         />
       </div>

diff --git a/src/app/comment/LazyChildComments.tsx b/src/app/comment/LazyChildComments.tsx
@@ -9,11 +9,13 @@ import { CommentTree } from "@/app/comment/CommentTree";
 import { MouseEvent, useState } from "react";
 import { VoteConfig } from "@/app/(ui)/vote/getVoteConfig";
 import { MyUserInfo } from "lemmy-js-client";
+import { ShowMoreCommentsLink } from "@/app/comment/ShowMoreCommentsLink";
 
 export const LazyChildComments = (props: {
   readonly node: CommentNode;
   readonly voteConfig: VoteConfig;
   readonly loggedInUser?: MyUserInfo;
+  readonly renderedDepth?: number;
 }) => {
   const [loadedComments, setLoadedComments] = useState<CommentNode[] | null>(
     null,
@@ -26,9 +28,7 @@ export const LazyChildComments = (props: {
     return null;
   }
 
-  const onLoadMore = async (e: MouseEvent<HTMLAnchorElement>) => {
-    e.preventDefault();
-    e.nativeEvent.stopImmediatePropagation();
+  const onLoadMore = async () => {
     const commentTrees = await buildCommentTreesAction(
       {
         parent_id: props.node.commentView.comment.id,
@@ -45,15 +45,10 @@ export const LazyChildComments = (props: {
 
   if (loadedComments === null) {
     return (
-      <a
-        className={`text-primary-400 hover:text-primary-300 ml-10 mt-2 flex cursor-pointer
-          items-center text-xs`}
-        href={`/comment/${props.node.commentView.comment.id}`} // If JS is disabled, we can just navigate to the comment page
+      <ShowMoreCommentsLink
         onClick={onLoadMore}
-      >
-        {"Show more comments "}
-        <ArrowRightIcon className={"ml-2 h-4"} />
-      </a>
+        rootId={props.node.commentView.comment.id}
+      />
     );
   }
 
@@ -62,6 +57,7 @@ export const LazyChildComments = (props: {
       key={node.commentView.comment.id}
       loggedInUser={props.loggedInUser}
       node={node}
+      renderedDepth={props.renderedDepth}
       voteConfig={props.voteConfig}
     />
   ));

diff --git a/src/app/comment/ShowMoreCommentsLink.tsx b/src/app/comment/ShowMoreCommentsLink.tsx
@@ -0,0 +1,29 @@
+import { ArrowRightIcon } from "@heroicons/react/16/solid";
+import { MouseEvent } from "react";
+
+export const ShowMoreCommentsLink = (props: {
+  readonly rootId: number;
+  onClick?(): Promise<void>;
+}) => {
+  let onClick = undefined;
+
+  if (props.onClick) {
+    onClick = (e: MouseEvent<HTMLAnchorElement>) => {
+      e.preventDefault();
+      e.nativeEvent.stopImmediatePropagation();
+      props.onClick!();
+    };
+  }
+
+  return (
+    <a
+      className={`ml-10 mt-2 flex cursor-pointer items-center text-xs text-primary-400
+        hover:text-primary-300`}
+      href={`/comment/${props.rootId}`} // If we don't have an onClick function (it was not passed or JS is disabled), we can just navigate to the comment page
+      onClick={onClick}
+    >
+      {"Show more comments "}
+      <ArrowRightIcon className={"ml-2 h-4"} />
+    </a>
+  );
+};
diff --git a/src/app/u/UserLink.tsx b/src/app/u/UserLink.tsx
@@ -18,12 +18,12 @@ export const UserLink = (props: Props) => {
 
   return (
     <StyledLink
-      className={"flex items-center gap-1"}
+      className={"flex flex-wrap items-center gap-1"}
       href={`/u/${creatorUsername}`}
     >
       <AgeIcon published={props.person.published} type={"person"} />
       <Avatar avatarSrc={props.person.avatar} size={"mini"} />
-      <span className={"min-w-0 break-words"} title={creatorUsername}>
+      <span className={"min-w-0 break-all"} title={creatorUsername}>
         {creatorFormattedName}
       </span>
       {props.showOpBadge && (