v3: inline edit forms and the narrow-viewport search row ease open instead of popping in

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

src/components/CommentThread.tsx

@@ -20,6 +20,7 @@ import { LikeButton } from "./LikeButton.tsx";
 import { relativeTime } from "../utils/relativeTime.ts";
 import { Tooltip } from "./Tooltip.tsx";
 import { ConfirmModal } from "./ConfirmModal.tsx";
+import { useHeightTransition } from "../hooks/useHeightTransition.ts";
 import { useWS } from "../hooks/useWS.ts";
 import {
   expectOk,
@@ -51,6 +52,7 @@ interface CommentFormProps {
   /** `top` renders the avatar-flanked layout; `inline` is for reply/edit. */
   layout?: "inline" | "top";
   leading?: React.ReactNode;
+  className?: string;
 }
 
 /**
@@ -69,6 +71,7 @@ function CommentForm({
   editorRef,
   layout = "inline",
   leading,
+  className,
 }: CommentFormProps) {
   const form = useApiForm<{ body: string }>({
     defaultValues: { body: defaultValue },
@@ -140,7 +143,10 @@ function CommentForm({
           </form>
         )
         : (
-          <form className="comment-form" onSubmit={submit}>
+          <form
+            className={className ? `comment-form ${className}` : "comment-form"}
+            onSubmit={submit}
+          >
             {inner}
           </form>
         )}
@@ -194,6 +200,9 @@ function CommentNode({
   const [replyOpen, setReplyOpen] = useState(false);
   const [editOpen, setEditOpen] = useState(false);
   const [confirmDelete, setConfirmDelete] = useState(false);
+  const innerRef = useHeightTransition<HTMLDivElement>(
+    `${editOpen}:${replyOpen}`,
+  );
 
   const replyEditorRef = useRef<TextEditorHandle>(null);
   const editEditorRef = useRef<TextEditorHandle>(null);
@@ -284,7 +293,11 @@ function CommentNode({
 
   return (
     <li className="comment-node">
-      <div className="comment-node-inner" id={`comment-${comment.id}`}>
+      <div
+        className="comment-node-inner"
+        id={`comment-${comment.id}`}
+        ref={innerRef}
+      >
         <div className="comment-avatar">
           <Avatar
             userId={comment.userId}
@@ -328,6 +341,7 @@ function CommentNode({
                 submitLabel={<Trans>Save</Trans>}
                 pendingLabel={<Trans>Saving…</Trans>}
                 errorTitle={t`Failed to save edit`}
+                className="animate-in"
                 onCancel={() => setEditOpen(false)}
               />
             )
@@ -395,6 +409,7 @@ function CommentNode({
               submitLabel={<Trans>Post reply</Trans>}
               pendingLabel={<Trans>Posting…</Trans>}
               errorTitle={t`Failed to post reply`}
+              className="animate-in"
               placeholder={t`Write a reply…`}
               onCancel={() => setReplyOpen(false)}
             />