From d7c71f91d61e68ae35fcc0032847cb42324a8b51 Mon Sep 17 00:00:00 2001
From: maria <maria@kuuro.net>
Date: Sun, 13 Sep 2026 03:20:17 -0300
Subject: [PATCH] feat(web): float the pull request comment composer (#11531)

Co-authored-by: maria-rcks <254055478+maria-rcks@users.noreply.github.com>
---
 .../pullRequest/PullRequestCodeTab.tsx        |  18 +-
 .../PullRequestCommentComposer.tsx            | 163 ++++++++++++++++++
 .../pullRequest/PullRequestDetailPanel.tsx    |  26 ++-
 .../pullRequest/PullRequestSummaryTab.tsx     | 138 ---------------
 4 files changed, 200 insertions(+), 145 deletions(-)
 create mode 100644 apps/web/src/components/pullRequest/PullRequestCommentComposer.tsx

diff --git a/apps/web/src/components/pullRequest/PullRequestCodeTab.tsx b/apps/web/src/components/pullRequest/PullRequestCodeTab.tsx
index 42bf7ab5102e0d676e55f7d28fb2b711d2241479..59f40f95552837cad6bb7a16a1a00c4fe444919c 100644
--- a/apps/web/src/components/pullRequest/PullRequestCodeTab.tsx
+++ b/apps/web/src/components/pullRequest/PullRequestCodeTab.tsx
@@ -961,7 +961,14 @@ function PullRequestCodeTab({
     review.verdicts.length === 0 ? null : (
       <div className="pointer-events-none absolute inset-x-0 bottom-0 z-10">
         {reviewOpen ? (
-          <div className="surface-glass pointer-events-auto absolute inset-x-3 bottom-3 rounded-xl border border-border/60 shadow-lg">
+          <div
+            className={cn(
+              "surface-glass pointer-events-auto absolute inset-x-3 rounded-xl border border-border/60 shadow-lg",
+              detail.capabilities.comment && detail.viewerPermissions.comment
+                ? "bottom-16"
+                : "bottom-3",
+            )}
+          >
             <Button
               type="button"
               size="icon-sm"
@@ -984,10 +991,13 @@ function PullRequestCodeTab({
             />
           </div>
         ) : (
-          // Bottom-right, clear of the vertical scrollbar the diff view keeps to its own right
-          // edge.
           <Button
-            className="pointer-events-auto absolute right-4 bottom-3 rounded-full shadow-lg"
+            className={cn(
+              "pointer-events-auto absolute bottom-3 rounded-full shadow-lg",
+              detail.capabilities.comment && detail.viewerPermissions.comment
+                ? "right-16"
+                : "right-4",
+            )}
             onClick={() => setReviewOpen(true)}
             size="compact"
             variant="glass"
diff --git a/apps/web/src/components/pullRequest/PullRequestCommentComposer.tsx b/apps/web/src/components/pullRequest/PullRequestCommentComposer.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..7d749f0f3fea847ac4c3a1b9c5adc492fd8c48b8
--- /dev/null
+++ b/apps/web/src/components/pullRequest/PullRequestCommentComposer.tsx
@@ -0,0 +1,163 @@
+import type { EnvironmentId, PullRequestDetailView, PullRequestRef } from "@t3tools/contracts";
+import {
+  GitPullRequestClosedIcon,
+  MessageSquareIcon,
+  RotateCcwIcon,
+  SendIcon,
+  XIcon,
+} from "lucide-react";
+import { useRef, useState } from "react";
+
+import { useAtomCommand } from "~/state/use-atom-command";
+import { pullRequestEnvironment } from "~/state/pullRequests";
+
+import { Button } from "../ui/button";
+import { Popover, PopoverClose, PopoverPopup, PopoverTitle, PopoverTrigger } from "../ui/popover";
+import { Textarea } from "../ui/textarea";
+import { toastManager } from "../ui/toast";
+
+export function PullRequestCommentComposer({
+  environmentId,
+  reference,
+  detail,
+  actionPending,
+  onCommentAction,
+  onCommented,
+}: {
+  environmentId: EnvironmentId;
+  reference: PullRequestRef;
+  detail: PullRequestDetailView;
+  actionPending: boolean;
+  onCommentAction: (
+    body: string,
+    action: "close" | "reopen",
+  ) => Promise<{ readonly commentPosted: boolean }>;
+  onCommented: () => void;
+}) {
+  const [open, setOpen] = useState(false);
+  const [body, setBody] = useState("");
+  const [submitting, setSubmitting] = useState<"comment" | "close" | "reopen" | null>(null);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const postComment = useAtomCommand(pullRequestEnvironment.comment, { reportFailure: false });
+  const followUpAction =
+    detail.state === "open" &&
+    detail.capabilities.actions.includes("close") &&
+    detail.viewerPermissions.actions.includes("close")
+      ? ("close" as const)
+      : detail.state === "closed" &&
+          detail.capabilities.actions.includes("reopen") &&
+          detail.viewerPermissions.actions.includes("reopen")
+        ? ("reopen" as const)
+        : null;
+
+  const submit = async (action: "comment" | "close" | "reopen") => {
+    const trimmed = body.trim();
+    if (trimmed.length === 0 || submitting !== null || actionPending) return;
+    setSubmitting(action);
+    if (action !== "comment") {
+      const result = await onCommentAction(trimmed, action);
+      if (result.commentPosted) {
+        setBody("");
+        setOpen(false);
+      }
+      setSubmitting(null);
+      return;
+    }
+    const result = await postComment({
+      environmentId,
+      input: {
+        ...reference,
+        body: trimmed,
+      },
+    });
+    if (result._tag === "Failure") {
+      setSubmitting(null);
+      toastManager.add({ type: "error", title: "Could not post the comment" });
+      return;
+    }
+    setBody("");
+    setSubmitting(null);
+    setOpen(false);
+    onCommented();
+  };
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger
+        render={
+          <Button
+            size="icon"
+            variant="glass"
+            className="rounded-full shadow-lg [--glass-opacity:50%]"
+          />
+        }
+        aria-label="Comment on pull request"
+      >
+        <MessageSquareIcon className="size-4" />
+      </PopoverTrigger>
+      <PopoverPopup
+        side="top"
+        align="end"
+        sideOffset={8}
+        className="w-96 max-w-[calc(100vw-2rem)]"
+        initialFocus={textareaRef}
+      >
+        <div className="mb-3 flex items-center justify-between gap-2">
+          <PopoverTitle className="text-sm">Comment on pull request</PopoverTitle>
+          <PopoverClose
+            render={<Button size="icon-xs" variant="ghost" />}
+            aria-label="Close comment composer"
+          >
+            <XIcon className="size-3.5" />
+          </PopoverClose>
+        </div>
+        <div className="space-y-2">
+          <Textarea
+            ref={textareaRef}
+            className="[&_textarea]:max-h-64"
+            // Locked while posting: the body is cleared on success, which would otherwise throw
+            // away a new draft typed while the request was still in flight.
+            disabled={submitting !== null || actionPending}
+            value={body}
+            rows={3}
+            placeholder="Leave a comment"
+            aria-label="Comment on this pull request"
+            onChange={(event) => setBody(event.target.value)}
+          />
+          <div className="flex flex-wrap justify-end gap-2">
+            {followUpAction === null ? null : (
+              <Button
+                size="xs"
+                variant={followUpAction === "close" ? "destructive-outline" : "outline"}
+                disabled={body.trim().length === 0 || submitting !== null || actionPending}
+                onClick={() => void submit(followUpAction)}
+              >
+                {followUpAction === "close" ? (
+                  <GitPullRequestClosedIcon className="size-3.5" />
+                ) : (
+                  <RotateCcwIcon className="size-3.5" />
+                )}
+                {submitting === followUpAction
+                  ? followUpAction === "close"
+                    ? "Closing..."
+                    : "Reopening..."
+                  : followUpAction === "close"
+                    ? "Close with comment"
+                    : "Reopen with comment"}
+              </Button>
+            )}
+            <Button
+              size="xs"
+              variant="outline"
+              disabled={body.trim().length === 0 || submitting !== null || actionPending}
+              onClick={() => void submit("comment")}
+            >
+              <SendIcon className="size-3.5" />
+              {submitting === "comment" ? "Posting..." : "Comment"}
+            </Button>
+          </div>
+        </div>
+      </PopoverPopup>
+    </Popover>
+  );
+}
diff --git a/apps/web/src/components/pullRequest/PullRequestDetailPanel.tsx b/apps/web/src/components/pullRequest/PullRequestDetailPanel.tsx
index 3be7b5a1a196ba6d3bf02195b031af062533d8e1..dbd2eb255c4edb9ffa3b93652789e52ac6a506f1 100644
--- a/apps/web/src/components/pullRequest/PullRequestDetailPanel.tsx
+++ b/apps/web/src/components/pullRequest/PullRequestDetailPanel.tsx
@@ -116,6 +116,7 @@ import { PullRequestsUnavailableState } from "./PullRequestsUnavailableState";
 import type { PullRequestAgentSelectionInput } from "./PullRequestCodeTab";
 import { openOnHostLabel, showPullRequestLinkContextMenu } from "./pullRequestLinkContextMenu";
 import { PullRequestMarkdownContext } from "./PullRequestMarkdown";
+import { PullRequestCommentComposer } from "./PullRequestCommentComposer";
 import { PullRequestSummaryTab } from "./PullRequestSummaryTab";
 import { PullRequestTimelineTab } from "./PullRequestTimelineTab";
 import {
@@ -1480,7 +1481,7 @@ export function PullRequestDetailPanel({
   }
 
   return (
-    <div className="flex h-full min-h-0 w-full flex-col bg-background">
+    <div className="relative flex h-full min-h-0 w-full flex-col bg-background">
       {threadPickerOpen && detail ? (
         <PullRequestThreadLinks
           key={`${environmentId}:${detail.url}`}
@@ -2612,8 +2613,6 @@ export function PullRequestDetailPanel({
                   fixFindingLabel={handoffLabels.fixFinding}
                   fixCheckLabel={handoffLabels.fixCheck}
                   onFixFinding={startFixFinding}
-                  actionPending={actionPending}
-                  onCommentAction={performCommentAction}
                   onRefresh={refreshDetail}
                 />
               </div>
@@ -2663,6 +2662,27 @@ export function PullRequestDetailPanel({
         ) : null}
       </div>
 
+      {/* Float over the content; do not reserve a footer or padding in the PR tabs. */}
+      {detail?.capabilities.comment && detail.viewerPermissions.comment ? (
+        <div className="absolute right-4 bottom-3 z-20">
+          <PullRequestCommentComposer
+            key={JSON.stringify([
+              environmentId,
+              reference.projectId,
+              reference.host,
+              reference.repository,
+              reference.number,
+            ])}
+            environmentId={environmentId}
+            reference={reference}
+            detail={detail}
+            actionPending={actionPending}
+            onCommentAction={performCommentAction}
+            onCommented={refreshDetail}
+          />
+        </div>
+      ) : null}
+
       <AlertDialog
         open={confirmation.open}
         onOpenChange={(open) => setConfirmation((current) => ({ ...current, open }))}
diff --git a/apps/web/src/components/pullRequest/PullRequestSummaryTab.tsx b/apps/web/src/components/pullRequest/PullRequestSummaryTab.tsx
index 2c8bb76aafd3508f3a1234978112f3ef1139f99c..26aa05bd8b48973a2501d835456728a37fab3e08 100644
--- a/apps/web/src/components/pullRequest/PullRequestSummaryTab.tsx
+++ b/apps/web/src/components/pullRequest/PullRequestSummaryTab.tsx
@@ -10,11 +10,8 @@ import {
   ArrowDownUpIcon,
   ChevronDownIcon,
   ChevronRightIcon,
-  GitPullRequestClosedIcon,
   HammerIcon,
   PencilIcon,
-  RotateCcwIcon,
-  SendIcon,
   TagIcon,
   UsersIcon,
 } from "lucide-react";
@@ -28,7 +25,6 @@ import { formatRelativeTimeLabel } from "~/timestampFormat";
 
 import { Button } from "../ui/button";
 import { Collapsible, CollapsiblePanel, CollapsibleTrigger } from "../ui/collapsible";
-import { Textarea } from "../ui/textarea";
 import { toastManager } from "../ui/toast";
 import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
 import {
@@ -303,113 +299,6 @@ function Section({
   );
 }
 
-function CommentComposer({
-  environmentId,
-  reference,
-  detail,
-  actionPending,
-  onCommentAction,
-  onCommented,
-}: {
-  environmentId: EnvironmentId;
-  reference: PullRequestRef;
-  detail: PullRequestDetailView;
-  actionPending: boolean;
-  onCommentAction: (
-    body: string,
-    action: "close" | "reopen",
-  ) => Promise<{ readonly commentPosted: boolean }>;
-  onCommented: () => void;
-}) {
-  const [body, setBody] = useState("");
-  const [submitting, setSubmitting] = useState<"comment" | "close" | "reopen" | null>(null);
-  const postComment = useAtomCommand(pullRequestEnvironment.comment, { reportFailure: false });
-  const followUpAction =
-    detail.state === "open" &&
-    detail.capabilities.actions.includes("close") &&
-    detail.viewerPermissions.actions.includes("close")
-      ? ("close" as const)
-      : detail.state === "closed" &&
-          detail.capabilities.actions.includes("reopen") &&
-          detail.viewerPermissions.actions.includes("reopen")
-        ? ("reopen" as const)
-        : null;
-
-  const submit = async (action: "comment" | "close" | "reopen") => {
-    const trimmed = body.trim();
-    if (trimmed.length === 0 || submitting !== null || actionPending) return;
-    setSubmitting(action);
-    if (action !== "comment") {
-      const result = await onCommentAction(trimmed, action);
-      if (result.commentPosted) setBody("");
-      setSubmitting(null);
-      return;
-    }
-    const result = await postComment({
-      environmentId,
-      input: {
-        ...reference,
-        body: trimmed,
-      },
-    });
-    if (result._tag === "Failure") {
-      setSubmitting(null);
-      toastManager.add({ type: "error", title: "Could not post the comment" });
-      return;
-    }
-    setBody("");
-    setSubmitting(null);
-    onCommented();
-  };
-
-  return (
-    <div className="space-y-2">
-      <Textarea
-        // Locked while posting: the body is cleared on success, which would otherwise throw
-        // away a new draft typed while the request was still in flight.
-        disabled={submitting !== null || actionPending}
-        value={body}
-        rows={3}
-        placeholder="Leave a comment"
-        aria-label="Comment on this pull request"
-        onChange={(event) => setBody(event.target.value)}
-      />
-      <div className="flex justify-end gap-2">
-        {followUpAction === null ? null : (
-          <Button
-            size="xs"
-            variant={followUpAction === "close" ? "destructive-outline" : "outline"}
-            disabled={body.trim().length === 0 || submitting !== null || actionPending}
-            onClick={() => void submit(followUpAction)}
-          >
-            {followUpAction === "close" ? (
-              <GitPullRequestClosedIcon className="size-3.5" />
-            ) : (
-              <RotateCcwIcon className="size-3.5" />
-            )}
-            {submitting === followUpAction
-              ? followUpAction === "close"
-                ? "Closing..."
-                : "Reopening..."
-              : followUpAction === "close"
-                ? "Close with comment"
-                : "Reopen with comment"}
-          </Button>
-        )}
-        <Button
-          size="xs"
-          variant="outline"
-          disabled={body.trim().length === 0 || submitting !== null || actionPending}
-          onClick={() => void submit("comment")}
-        >
-          <SendIcon className="size-3.5" />
-          {submitting === "comment" ? "Posting..." : "Comment"}
-        </Button>
-      </div>
-    </div>
-  );
-}
-
 /**
  * What a first render of the conversation carries. A pull request with two hundred comments is
  * two hundred markdown documents, and the ones worth arriving for are the recent ones.
@@ -427,8 +316,6 @@ export function PullRequestSummaryTab({
   fixFindingLabel = "Fix in a thread",
   fixCheckLabel = "Fix",
   onFixFinding,
-  actionPending,
-  onCommentAction,
   onRefresh,
 }: {
   environmentId: EnvironmentId;
@@ -442,11 +329,6 @@ export function PullRequestSummaryTab({
   fixFindingLabel?: string;
   fixCheckLabel?: string;
   onFixFinding?: (finding: PullRequestFinding) => void;
-  actionPending: boolean;
-  onCommentAction: (
-    body: string,
-    action: "close" | "reopen",
-  ) => Promise<{ readonly commentPosted: boolean }>;
   onRefresh: () => void;
 }) {
   // Keyed by the pull request, so opening another one starts at the end of its conversation
@@ -984,26 +866,6 @@ export function PullRequestSummaryTab({
           </>
         )}
       </Section>
-      <div className="px-4 pb-4">
-        {/* Posting stays available when the conversation is folded or its activity read failed. */}
-        {detail.capabilities.comment && detail.viewerPermissions.comment ? (
-          <CommentComposer
-            reference={reference}
-            key={JSON.stringify([
-              environmentId,
-              reference.projectId,
-              reference.host,
-              reference.repository,
-              reference.number,
-            ])}
-            environmentId={environmentId}
-            detail={detail}
-            actionPending={actionPending}
-            onCommentAction={onCommentAction}
-            onCommented={onRefresh}
-          />
-        ) : null}
-      </div>
     </div>
   );
 }
-- 
2.54.0