v3: added emoji picker, various bug and layout fixes

src/components/CommentThread.tsx

@@ -1,4 +1,4 @@
-import { useRef, useState } from "react";
+import React, { useRef, useState } from "react";
 import { Link } from "react-router";
 import { API_URL } from "../config/api.ts";
 import type { Comment, RawComment, User } from "../model.ts";
@@ -31,8 +31,6 @@ function buildTree(comments: Comment[]): Map<string, Comment[]> {
   return map;
 }
 
-const MAX_INDENT_DEPTH = 6;
-
 interface CommentNodeProps {
   comment: Comment;
   tree: Map<string, Comment[]>;
@@ -161,9 +159,7 @@ function CommentNode({
         {children.length > 0 && (
           <ul
             className="comment-replies"
-            style={depth >= MAX_INDENT_DEPTH
-              ? { paddingLeft: 0, marginLeft: 0, borderLeft: "none" }
-              : undefined}
+            style={{ "--depth": depth } as React.CSSProperties}
           >
             {children.map((child) => (
               <CommentNode
@@ -357,9 +353,7 @@ function CommentNode({
       {children.length > 0 && (
         <ul
           className="comment-replies"
-          style={depth >= MAX_INDENT_DEPTH
-            ? { paddingLeft: 0, marginLeft: 0, borderLeft: "none" }
-            : undefined}
+          style={{ "--depth": depth } as React.CSSProperties}
         >
           {children.map((child) => (
             <CommentNode