authorgravatar for julius0216@outlook.comJulius Marminge <julius0216@outlook.com> 2026-09-17 20:18:14-07:00
committergravatar for noreply@github.comGitHub <noreply@github.com> 2026-09-17 20:18:14-07:00
log5a39013313a7e6e9d6fbeeb915b8c176ea3dd126
tree00906dc59e22a54755f131f64079b6cff5bac62c
parent8583eac643b8c248bcd835e8de81c7c0d7182ad3
signature Signed by PGP key B5690EEEBB952194

fix(web): share touch-visible pull request edit actions (#12370)

5 files changed, 41 insertions(+), 41 deletions(-)

apps/web/src/components/pullRequest/PullRequestDetailPanel.tsx+3-8
......@@ -35,7 +35,6 @@ import {
3535 LinkIcon,
3636 MoreHorizontalIcon,
3737 PanelRightIcon,
38 PencilIcon,
3938 PlayIcon,
4039 RotateCcwIcon,
4140 TriangleAlertIcon,
......@@ -100,6 +99,7 @@ import {
10099import { EnvironmentMachineIcon } from "../EnvironmentMachineIcon";
101100import { Badge } from "../ui/badge";
102101import { Button } from "../ui/button";
102import { PullRequestEditButton } from "./PullRequestEditButton";
103103import { Input } from "../ui/input";
104104import { Toggle, ToggleGroup } from "../ui/toggle-group";
105105import {
......@@ -2308,15 +2308,10 @@ export function PullRequestDetailPanel({
23082308 <TooltipPopup side="top">{detail.title}</TooltipPopup>
23092309 </Tooltip>
23102310 {canEditPullRequestChangeRequest(detail) ? (
2311 <Button
2312 size="icon-xs"
2313 variant="ghost"
2314 className="shrink-0 text-muted-foreground opacity-0 transition-opacity group-focus-within:opacity-100 group-hover:opacity-100 focus-visible:opacity-100"
2311 <PullRequestEditButton
23152312 aria-label="Edit title"
23162313 onClick={() => setTitleScope({ pullRequestKey, text: detail.title })}
2317 >
2318 <PencilIcon className="size-3" />
2319 </Button>
2314 />
23202315 ) : null}
23212316 </div>
23222317 ) : (
apps/web/src/components/pullRequest/PullRequestEditButton.tsx created+27
......@@ -0,0 +1,27 @@
1import { PencilIcon } from "lucide-react";
2import type { ComponentProps } from "react";
3
4import { cn } from "../../lib/utils";
5import { Button } from "../ui/button";
6
7/** Edit affordances stay visible on touch devices and reveal on hover or focus. */
8export function PullRequestEditButton({
9 className,
10 ...props
11}: Omit<ComponentProps<typeof Button>, "children" | "render" | "size" | "variant"> & {
12 "aria-label": string;
13}) {
14 return (
15 <Button
16 {...props}
17 size="icon-xs"
18 variant="ghost"
19 className={cn(
20 "shrink-0 text-muted-foreground opacity-0 transition-opacity pointer-coarse:opacity-100 group-focus-within:opacity-100 group-hover:opacity-100 focus-visible:opacity-100 motion-reduce:transition-none",
21 className,
22 )}
23 >
24 <PencilIcon aria-hidden className="size-3" />
25 </Button>
26 );
27}
apps/web/src/components/pullRequest/PullRequestReviewAnnotation.tsx+3-8
......@@ -14,7 +14,6 @@ import {
1414 CircleIcon,
1515 HammerIcon,
1616 MessageSquareIcon,
17 PencilIcon,
1817 Trash2Icon,
1918} from "lucide-react";
2019import { useRef, useState } from "react";
......@@ -23,6 +22,7 @@ import { formatRelativeTimeLabel } from "~/timestampFormat";
2322import { cn } from "~/lib/utils";
2423
2524import { Button } from "../ui/button";
25import { PullRequestEditButton } from "./PullRequestEditButton";
2626import { Textarea } from "../ui/textarea";
2727import { isCommentSubmitShortcut } from "../diffs/commentSubmitShortcut";
2828import {
......@@ -297,15 +297,10 @@ export function ReviewThreadCard({
297297 environmentId={environmentId}
298298 />
299299 {canEditComment(comment) ? (
300 <Button
301 size="icon-xs"
302 variant="ghost"
303 className="shrink-0 text-muted-foreground opacity-0 transition-opacity group-focus-within:opacity-100 group-hover:opacity-100 focus-visible:opacity-100"
300 <PullRequestEditButton
304301 aria-label="Edit comment"
305302 onClick={() => setEditingId(comment.id)}
306 >
307 <PencilIcon className="size-3" />
308 </Button>
303 />
309304 ) : null}
310305 </div>
311306 )}
apps/web/src/components/pullRequest/PullRequestSummaryTab.tsx+4-17
......@@ -11,7 +11,6 @@ import {
1111 ChevronDownIcon,
1212 ChevronRightIcon,
1313 HammerIcon,
14 PencilIcon,
1514 TagIcon,
1615 UsersIcon,
1716} from "lucide-react";
......@@ -24,6 +23,7 @@ import { useOpenLink } from "~/browser/useOpenLink";
2423import { formatRelativeTimeLabel } from "~/timestampFormat";
2524
2625import { Button } from "../ui/button";
26import { PullRequestEditButton } from "./PullRequestEditButton";
2727import { Collapsible, CollapsiblePanel, CollapsibleTrigger } from "../ui/collapsible";
2828import { toastManager } from "../ui/toast";
2929import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
......@@ -187,15 +187,7 @@ function CommentBody({
187187 threadRef={editing.threadRef}
188188 />
189189 {editing.canEdit(comment) ? (
190 <Button
191 size="icon-xs"
192 variant="ghost"
193 className="shrink-0 text-muted-foreground opacity-0 transition-opacity group-focus-within:opacity-100 group-hover:opacity-100 focus-visible:opacity-100"
194 aria-label="Edit comment"
195 onClick={() => editing.onEdit(comment)}
196 >
197 <PencilIcon className="size-3" />
198 </Button>
190 <PullRequestEditButton aria-label="Edit comment" onClick={() => editing.onEdit(comment)} />
199191 ) : null}
200192 </div>
201193 );
......@@ -869,15 +861,10 @@ export function PullRequestSummaryTab({
869861 threadRef={threadRef}
870862 />
871863 {canEditPullRequestChangeRequest(detail) ? (
872 <Button
873 size="icon-xs"
874 variant="ghost"
875 className="shrink-0 text-muted-foreground opacity-0 transition-opacity group-focus-within:opacity-100 group-hover:opacity-100 focus-visible:opacity-100"
864 <PullRequestEditButton
876865 aria-label="Edit description"
877866 onClick={() => setBodyScope(detail.url)}
878 >
879 <PencilIcon className="size-3" />
880 </Button>
867 />
881868 ) : null}
882869 </div>
883870 )}
apps/web/src/components/pullRequest/PullRequestTimelineTab.tsx+4-8
......@@ -12,7 +12,6 @@ import {
1212 FileCode2Icon,
1313 GitCommitHorizontalIcon,
1414 MessageSquareIcon,
15 PencilIcon,
1615} from "lucide-react";
1716import { useState, type ReactNode } from "react";
1817
......@@ -23,6 +22,7 @@ import { useAtomCommand } from "~/state/use-atom-command";
2322import { formatRelativeTimeLabel } from "~/timestampFormat";
2423
2524import { Button } from "../ui/button";
25import { PullRequestEditButton } from "./PullRequestEditButton";
2626import { Collapsible, CollapsiblePanel, CollapsibleTrigger } from "../ui/collapsible";
2727import { toastManager } from "../ui/toast";
2828import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
......@@ -235,15 +235,11 @@ function ConversationCard({
235235 </PullRequestMetaLine>
236236 </div>
237237 {editable !== null && !editing ? (
238 <Button
239 size="icon-xs"
240 variant="ghost"
241 className="-mt-1 shrink-0 text-muted-foreground opacity-0 transition-opacity group-focus-within:opacity-100 group-hover:opacity-100 focus-visible:opacity-100"
238 <PullRequestEditButton
239 className="-mt-1"
242240 aria-label="Edit comment"
243241 onClick={() => setEditing(true)}
244 >
245 <PencilIcon className="size-3" />
246 </Button>
242 />
247243 ) : null}
248244 {reactions.canReact || event.reactions.length > 0 ? (
249245 <PullRequestReactionBar