Fix comment nesting

packages/frontpage/app/(app)/post/[postAuthor]/[postRkey]/_lib/comment-client.tsx

@@ -41,17 +41,34 @@ import type { CommentModel } from "@/lib/data/db/comment";
 import { EllipsisDropdown } from "@/app/(app)/_components/ellipsis-dropdown";
 import { ReportDialogDropdownButton } from "@/app/(app)/_components/report-dialog";
 import { DeleteButton } from "@/app/(app)/_components/delete-button";
+import { cva, VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
 
-export type CommentClientProps = Pick<
-  CommentModel,
-  "rkey" | "cid" | "id" | "authorDid"
-> & {
-  postRkey: string;
-  postAuthorDid: DID;
-  initialVoteState: VoteButtonState;
-  hasAuthored: boolean;
-  children: React.ReactNode;
-};
+const commentVariants = cva(undefined, {
+  variants: {
+    level: {
+      0: "",
+      1: "pl-8",
+      2: "pl-16",
+      3: "pl-24",
+    },
+  },
+  defaultVariants: {
+    level: 0,
+  },
+});
+
+type CommentVariantProps = VariantProps<typeof commentVariants>;
+export type CommentLevel = CommentVariantProps["level"];
+
+export type CommentClientProps = CommentVariantProps &
+  Pick<CommentModel, "rkey" | "cid" | "id" | "authorDid"> & {
+    postRkey: string;
+    postAuthorDid: DID;
+    initialVoteState: VoteButtonState;
+    hasAuthored: boolean;
+    children: React.ReactNode;
+  };
 
 export function CommentClientWrapperWithToolbar({
   id,
@@ -63,13 +80,14 @@ export function CommentClientWrapperWithToolbar({
   initialVoteState,
   hasAuthored,
   children,
+  level,
 }: CommentClientProps) {
   const [showNewComment, setShowNewComment] = useState(false);
   const commentRef = useRef<HTMLDivElement>(null);
   const newCommentTextAreaRef = useRef<HTMLTextAreaElement>(null);
   const { toast } = useToast();
   return (
-    <>
+    <NestComment level={level}>
       {/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */}
       <div className="flex flex-col gap-2 p-1" tabIndex={0} ref={commentRef}>
         {children}
@@ -176,7 +194,23 @@ export function CommentClientWrapperWithToolbar({
           }
         />
       ) : null}
-    </>
+    </NestComment>
+  );
+}
+
+export function NestComment({
+  children,
+  level,
+  className,
+}: {
+  children: React.ReactNode;
+  level: CommentLevel;
+  className?: string;
+}) {
+  return (
+    <article className={cn(className, commentVariants({ level }))}>
+      {children}
+    </article>
   );
 }
 

packages/frontpage/app/(app)/post/[postAuthor]/[postRkey]/_lib/comment.tsx

@@ -1,5 +1,9 @@
 import { getUser } from "@/lib/data/user";
-import { CommentClientWrapperWithToolbar } from "./comment-client";
+import {
+  CommentClientWrapperWithToolbar,
+  CommentLevel,
+  NestComment,
+} from "./comment-client";
 import { CommentModel } from "@/lib/data/db/comment";
 import { TimeAgo } from "@/lib/components/time-ago";
 import { AvatarFallback, UserAvatar } from "@/lib/components/user-avatar";
@@ -9,27 +13,12 @@ import {
   getVerifiedHandle,
 } from "@/lib/data/atproto/identity";
 import { UserHoverCard } from "@/lib/components/user-hover-card";
-import { VariantProps, cva } from "class-variance-authority";
-import { cn } from "@/lib/utils";
-
-const commentVariants = cva(undefined, {
-  variants: {
-    level: {
-      0: "",
-      1: "pl-8",
-      2: "pl-16",
-      3: "pl-24",
-    },
-  },
-  defaultVariants: {
-    level: 0,
-  },
-});
 
-type CommentProps = VariantProps<typeof commentVariants> & {
+type CommentProps = {
   comment: CommentModel;
   postAuthorParam: string;
   postRkey: string;
+  level?: CommentLevel;
 };
 
 export function Comment({ comment, level, ...props }: CommentProps) {
@@ -41,31 +30,11 @@ export function Comment({ comment, level, ...props }: CommentProps) {
     return null;
   }
 
-  return (
-    <NestComment level={level}>
-      {comment.status === "live" ? (
-        <LiveComment {...props} level={level} comment={comment} />
-      ) : (
-        <DeletedComment {...props} level={level} comment={comment} />
-      )}
-    </NestComment>
-  );
-}
+  if (comment.status === "live") {
+    return <LiveComment {...props} level={level} comment={comment} />;
+  }
 
-function NestComment({
-  children,
-  level,
-  className,
-}: {
-  children: React.ReactNode;
-  level: CommentProps["level"];
-  className?: string;
-}) {
-  return (
-    <article className={cn(className, commentVariants({ level }))}>
-      {children}
-    </article>
-  );
+  return <DeletedComment {...props} level={level} comment={comment} />;
 }
 
 async function LiveComment({
@@ -92,6 +61,7 @@ async function LiveComment({
   return (
     <>
       <CommentClientWrapperWithToolbar
+        level={level}
         postRkey={postRkey}
         postAuthorDid={postAuthorDid}
         hasAuthored={hasAuthored}