fix(web): polish stack refresh and confirmation controls

Author: juliusmarminge

apps/web/src/components/pullRequest/PullRequestStackHeader.tsx

@@ -0,0 +1,26 @@
+import { MenuGroupLabel } from "../ui/menu";
+import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
+
+export function PullRequestStackHeader({
+  number,
+  notice,
+  stale = false,
+}: {
+  number: number;
+  notice?: string | null | undefined;
+  stale?: boolean;
+}) {
+  return (
+    <MenuGroupLabel className="flex items-center justify-between gap-2">
+      <span>Stack #{number}</span>
+      {notice ? (
+        <Tooltip>
+          <TooltipTrigger render={<span role="status" className="text-xs font-normal" />}>
+            {stale ? "May be stale" : "Refreshing…"}
+          </TooltipTrigger>
+          <TooltipPopup>{notice}</TooltipPopup>
+        </Tooltip>
+      ) : null}
+    </MenuGroupLabel>
+  );
+}

apps/web/src/components/pullRequest/PullRequestStackLayerContent.tsx

@@ -0,0 +1,28 @@
+import type { PullRequestStack } from "@t3tools/contracts";
+import { cn } from "~/lib/utils";
+import { resolvePullRequestState } from "./pullRequestPresentation";
+
+export function PullRequestStackLayerContent({
+  layer,
+  compact = false,
+}: {
+  layer: PullRequestStack["layers"][number];
+  compact?: boolean;
+}) {
+  const state = resolvePullRequestState({
+    state: layer.state,
+    isDraft: layer.isDraft ?? false,
+  });
+  return (
+    <>
+      <state.Icon aria-hidden className={cn("size-4 shrink-0", state.toneClassName)} />
+      <span className="min-w-0 flex-1">
+        <span className="block truncate">{layer.title || layer.headBranch}</span>
+        <span className="block truncate text-xs font-normal text-muted-foreground">
+          #{layer.number} · {compact ? null : `${layer.headBranch} · `}
+          {state.label}
+        </span>
+      </span>
+    </>
+  );
+}

apps/web/src/components/pullRequest/PullRequestStackLayers.tsx

@@ -1,8 +1,7 @@
 import type { PullRequestRef, PullRequestStack } from "@t3tools/contracts";
 import { CheckIcon } from "lucide-react";
-import { cn } from "~/lib/utils";
 import { MenuItem, MenuGroupLabel } from "../ui/menu";
-import { resolvePullRequestState } from "./pullRequestPresentation";
+import { PullRequestStackLayerContent } from "./PullRequestStackLayerContent";
 
 export function PullRequestStackLayers({
   stack,
@@ -18,10 +17,6 @@ export function PullRequestStackLayers({
   return (
     <div className="max-h-80 overflow-y-auto">
       {stack.layers.toReversed().map((layer) => {
-        const state = resolvePullRequestState({
-          state: layer.state,
-          isDraft: layer.isDraft ?? false,
-        });
         return (
           <MenuItem
             key={layer.number}
@@ -31,13 +26,7 @@ export function PullRequestStackLayers({
             disabled={!onSelect || pending}
             aria-current={layer.number === reference.number ? "true" : undefined}
           >
-            <state.Icon aria-hidden className={cn("size-4 shrink-0", state.toneClassName)} />
-            <span className="min-w-0 flex-1">
-              <span className="block truncate">{layer.title || layer.headBranch}</span>
-              <span className="block truncate text-xs font-normal text-muted-foreground">
-                #{layer.number} · {layer.headBranch} · {state.label}
-              </span>
-            </span>
+            <PullRequestStackLayerContent layer={layer} />
             {layer.number === reference.number ? (
               <CheckIcon aria-hidden className="size-3.5" />
             ) : null}

apps/web/src/components/pullRequest/PullRequestStackMenu.tsx

@@ -11,15 +11,7 @@ import { useState } from "react";
 import { useAtomCommand } from "~/state/use-atom-command";
 import { pullRequestEnvironment } from "~/state/pullRequests";
 import { Button } from "../ui/button";
-import {
-  Menu,
-  MenuPopup,
-  MenuTrigger,
-  MenuItem,
-  MenuGroup,
-  MenuGroupLabel,
-  MenuSeparator,
-} from "../ui/menu";
+import { Menu, MenuPopup, MenuTrigger, MenuItem, MenuGroup, MenuSeparator } from "../ui/menu";
 import {
   Dialog,
   DialogPopup,
@@ -31,6 +23,8 @@ import {
 } from "../ui/dialog";
 import { toastManager } from "../ui/toast";
 import { PullRequestStackLayers } from "./PullRequestStackLayers";
+import { PullRequestStackHeader } from "./PullRequestStackHeader";
+import { PullRequestStackLayerContent } from "./PullRequestStackLayerContent";
 
 export function PullRequestStackMenu({
   stack,
@@ -151,12 +145,7 @@ export function PullRequestStackMenu({
         </Tooltip>
         <MenuPopup align="start" className="w-96 max-w-[calc(100vw-2rem)]">
           <MenuGroup>
-            <MenuGroupLabel>Stack #{stack.number}</MenuGroupLabel>
-            {notice ? (
-              <p role="status" className="px-2 py-1 text-xs text-muted-foreground">
-                {notice}
-              </p>
-            ) : null}
+            <PullRequestStackHeader number={stack.number} notice={notice} stale={!!onRetry} />
             {onRetry ? <MenuItem onClick={onRetry}>Retry stack refresh</MenuItem> : null}
             <PullRequestStackLayers
               stack={stack}
@@ -205,7 +194,7 @@ export function PullRequestStackMenu({
             render={
               <span className="inline-flex">
                 <Button
-                  variant="ghost"
+                  variant="default"
                   size="xs"
                   disabled={mergeDisabled}
                   onClick={() => setConfirmation("merge")}
@@ -242,13 +231,16 @@ export function PullRequestStackMenu({
             </DialogDescription>
           </DialogHeader>
           <DialogPanel>
-            <div className="max-h-48 overflow-y-auto text-sm">
+            <ul className="max-h-48 space-y-1 overflow-y-auto text-sm">
               {confirmationLayers.map((layer) => (
-                <div key={layer.number}>
-                  #{layer.number} {layer.title || layer.headBranch}
-                </div>
+                <li
+                  key={layer.number}
+                  className="flex items-center gap-2 rounded-md bg-muted/50 px-3 py-2"
+                >
+                  <PullRequestStackLayerContent layer={layer} compact />
+                </li>
               ))}
-            </div>
+            </ul>
           </DialogPanel>
           <DialogFooter>
             <Button variant="outline" disabled={pending} onClick={() => setConfirmation(null)}>

apps/web/src/components/pullRequest/PullRequestStackPopover.tsx

@@ -5,36 +5,42 @@ import { useState } from "react";
 import { usePullRequestStack } from "~/state/usePullRequestStack";
 import { Menu, MenuTrigger, MenuPopup, MenuGroup, MenuGroupLabel, MenuItem } from "../ui/menu";
 import { PullRequestStackLayers } from "./PullRequestStackLayers";
+import { PullRequestStackHeader } from "./PullRequestStackHeader";
 
 /** Mounted only while the menu is open, so list rows do not each fetch a stack. */
 function StackBody({
   environmentId,
   reference,
   onSelect,
+  stackNumber,
 }: {
   environmentId: EnvironmentId;
   reference: PullRequestRef;
   onSelect: (reference: PullRequestRef) => void;
+  stackNumber: number;
 }) {
   const query = usePullRequestStack(environmentId, reference);
   if (query.data !== null) {
     return (
       <>
-        {query.notice ? (
-          <p role="status" className="px-2 py-1 text-xs text-muted-foreground">
-            {query.notice}
-          </p>
-        ) : null}
+        <PullRequestStackHeader
+          number={query.data.number}
+          notice={query.notice}
+          stale={!!query.error}
+        />
         {query.error ? <MenuItem onClick={query.refresh}>Retry stack refresh</MenuItem> : null}
         <PullRequestStackLayers stack={query.data} reference={reference} onSelect={onSelect} />
       </>
     );
   }
   return (
-    <MenuGroupLabel>
-      {query.error ??
-        (query.isPending ? "Loading stack…" : "This pull request is no longer in a stack.")}
-    </MenuGroupLabel>
+    <>
+      <PullRequestStackHeader number={stackNumber} />
+      <MenuGroupLabel>
+        {query.error ??
+          (query.isPending ? "Loading stack…" : "This pull request is no longer in a stack.")}
+      </MenuGroupLabel>
+    </>
   );
 }
 
@@ -84,11 +90,11 @@ export function PullRequestStackPopover({
         onKeyDown={(event) => event.stopPropagation()}
       >
         <MenuGroup>
-          <MenuGroupLabel>Stack #{membership.number}</MenuGroupLabel>
           {open ? (
             <StackBody
               environmentId={environmentId}
               reference={reference}
+              stackNumber={membership.number}
               onSelect={(target) => {
                 setOpen(false);
                 onSelect(target);