feat(issues): add expand toggle to comment and reply editors (#1386)

Mirrors the new-issue modal's expand behavior on the inline comment and
reply editors so users can compose long text without feeling cramped.

packages/views/issues/components/comment-input.tsx

@@ -1,8 +1,10 @@
 "use client";
 
 import { useRef, useState, useCallback } from "react";
-import { ArrowUp, Loader2 } from "lucide-react";
+import { ArrowUp, Loader2, Maximize2, Minimize2 } from "lucide-react";
 import { Button } from "@multica/ui/components/ui/button";
+import { Tooltip, TooltipTrigger, TooltipContent } from "@multica/ui/components/ui/tooltip";
+import { cn } from "@multica/ui/lib/utils";
 import { ContentEditor, type ContentEditorRef, useFileDropZone, FileDropOverlay } from "../../editor";
 import { FileUploadButton } from "@multica/ui/components/common/file-upload-button";
 import { useFileUpload } from "@multica/core/hooks/use-file-upload";
@@ -17,6 +19,7 @@ function CommentInput({ issueId, onSubmit }: CommentInputProps) {
   const editorRef = useRef<ContentEditorRef>(null);
   const [isEmpty, setIsEmpty] = useState(true);
   const [submitting, setSubmitting] = useState(false);
+  const [isExpanded, setIsExpanded] = useState(false);
   const uploadMapRef = useRef<Map<string, string>>(new Map());
   const { uploadWithToast } = useFileUpload(api);
   const { isDragOver, dropZoneProps } = useFileDropZone({
@@ -53,7 +56,10 @@ function CommentInput({ issueId, onSubmit }: CommentInputProps) {
   return (
     <div
       {...dropZoneProps}
-      className="relative flex max-h-56 flex-col rounded-lg bg-card pb-8 ring-1 ring-border"
+      className={cn(
+        "relative flex flex-col rounded-lg bg-card pb-8 ring-1 ring-border",
+        isExpanded ? "h-[70vh]" : "max-h-56",
+      )}
     >
       <div className="flex-1 min-h-0 overflow-y-auto px-3 py-2">
         <ContentEditor
@@ -67,6 +73,23 @@ function CommentInput({ issueId, onSubmit }: CommentInputProps) {
         />
       </div>
       <div className="absolute bottom-1 right-1.5 flex items-center gap-1">
+        <Tooltip>
+          <TooltipTrigger
+            render={
+              <button
+                type="button"
+                onClick={() => {
+                  setIsExpanded((v) => !v);
+                  editorRef.current?.focus();
+                }}
+                className="rounded-sm p-1.5 text-muted-foreground opacity-70 hover:opacity-100 hover:bg-accent/60 transition-all cursor-pointer"
+              >
+                {isExpanded ? <Minimize2 className="size-4" /> : <Maximize2 className="size-4" />}
+              </button>
+            }
+          />
+          <TooltipContent side="top">{isExpanded ? "Collapse" : "Expand"}</TooltipContent>
+        </Tooltip>
         <FileUploadButton
           size="sm"
           onSelect={(file) => editorRef.current?.uploadFile(file)}

packages/views/issues/components/reply-input.tsx

@@ -1,9 +1,10 @@
 "use client";
 
 import { useRef, useState, useEffect, useCallback } from "react";
-import { ArrowUp, Loader2 } from "lucide-react";
+import { ArrowUp, Loader2, Maximize2, Minimize2 } from "lucide-react";
 import { ContentEditor, type ContentEditorRef, useFileDropZone, FileDropOverlay } from "../../editor";
 import { FileUploadButton } from "@multica/ui/components/common/file-upload-button";
+import { Tooltip, TooltipTrigger, TooltipContent } from "@multica/ui/components/ui/tooltip";
 import { ActorAvatar } from "../../common/actor-avatar";
 import { useFileUpload } from "@multica/core/hooks/use-file-upload";
 import { api } from "@multica/core/api";
@@ -37,6 +38,7 @@ function ReplyInput({
   const editorRef = useRef<ContentEditorRef>(null);
   const measureRef = useRef<HTMLDivElement>(null);
   const [isEmpty, setIsEmpty] = useState(true);
+  const [hasOverflowContent, setHasOverflowContent] = useState(false);
   const [isExpanded, setIsExpanded] = useState(false);
   const [submitting, setSubmitting] = useState(false);
   const uploadMapRef = useRef<Map<string, string>>(new Map());
@@ -50,7 +52,7 @@ function ReplyInput({
     if (!el) return;
     const observer = new ResizeObserver((entries) => {
       const entry = entries[0];
-      if (entry) setIsExpanded(entry.contentRect.height > 32);
+      if (entry) setHasOverflowContent(entry.contentRect.height > 32);
     });
     observer.observe(el);
     return () => observer.disconnect();
@@ -97,8 +99,10 @@ function ReplyInput({
         {...dropZoneProps}
         className={cn(
           "relative min-w-0 flex-1 flex flex-col",
-          size === "sm" ? "max-h-40" : "max-h-56",
-          isExpanded && "pb-7",
+          isExpanded
+            ? "h-[60vh]"
+            : size === "sm" ? "max-h-40" : "max-h-56",
+          (hasOverflowContent || isExpanded) && "pb-7",
         )}
       >
         <div className="flex-1 min-h-0 overflow-y-auto pr-14">
@@ -115,6 +119,23 @@ function ReplyInput({
           </div>
         </div>
         <div className="absolute bottom-0 right-0 flex items-center gap-1 text-muted-foreground transition-colors group-focus-within/editor:text-foreground">
+          <Tooltip>
+            <TooltipTrigger
+              render={
+                <button
+                  type="button"
+                  onClick={() => {
+                    setIsExpanded((v) => !v);
+                    editorRef.current?.focus();
+                  }}
+                  className="inline-flex h-6 w-6 items-center justify-center rounded-sm opacity-70 hover:opacity-100 hover:bg-accent/60 transition-all cursor-pointer"
+                >
+                  {isExpanded ? <Minimize2 className="h-3.5 w-3.5" /> : <Maximize2 className="h-3.5 w-3.5" />}
+                </button>
+              }
+            />
+            <TooltipContent side="top">{isExpanded ? "Collapse" : "Expand"}</TooltipContent>
+          </Tooltip>
           <FileUploadButton
             size="sm"
             onSelect={(file) => editorRef.current?.uploadFile(file)}