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 {...@@ -35,7 +35,6 @@ import {
35 LinkIcon,35 LinkIcon,
36 MoreHorizontalIcon,36 MoreHorizontalIcon,
37 PanelRightIcon,37 PanelRightIcon,
38 PencilIcon,
39 PlayIcon,38 PlayIcon,
40 RotateCcwIcon,39 RotateCcwIcon,
41 TriangleAlertIcon,40 TriangleAlertIcon,
...@@ -100,6 +99,7 @@ import {...@@ -100,6 +99,7 @@ import {
100import { EnvironmentMachineIcon } from "../EnvironmentMachineIcon";99import { EnvironmentMachineIcon } from "../EnvironmentMachineIcon";
101import { Badge } from "../ui/badge";100import { Badge } from "../ui/badge";
102import { Button } from "../ui/button";101import { Button } from "../ui/button";
102import { PullRequestEditButton } from "./PullRequestEditButton";
103import { Input } from "../ui/input";103import { Input } from "../ui/input";
104import { Toggle, ToggleGroup } from "../ui/toggle-group";104import { Toggle, ToggleGroup } from "../ui/toggle-group";
105import {105import {
...@@ -2308,15 +2308,10 @@ export function PullRequestDetailPanel({...@@ -2308,15 +2308,10 @@ export function PullRequestDetailPanel({
2308 <TooltipPopup side="top">{detail.title}</TooltipPopup>2308 <TooltipPopup side="top">{detail.title}</TooltipPopup>
2309 </Tooltip>2309 </Tooltip>
2310 {canEditPullRequestChangeRequest(detail) ? (2310 {canEditPullRequestChangeRequest(detail) ? (
2311 <Button2311 <PullRequestEditButton
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"
2315 aria-label="Edit title"2312 aria-label="Edit title"
2316 onClick={() => setTitleScope({ pullRequestKey, text: detail.title })}2313 onClick={() => setTitleScope({ pullRequestKey, text: detail.title })}
2317 >2314 />
2318 <PencilIcon className="size-3" />
2319 </Button>
2320 ) : null}2315 ) : null}
2321 </div>2316 </div>
2322 ) : (2317 ) : (
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 {...@@ -14,7 +14,6 @@ import {
14 CircleIcon,14 CircleIcon,
15 HammerIcon,15 HammerIcon,
16 MessageSquareIcon,16 MessageSquareIcon,
17 PencilIcon,
18 Trash2Icon,17 Trash2Icon,
19} from "lucide-react";18} from "lucide-react";
20import { useRef, useState } from "react";19import { useRef, useState } from "react";
...@@ -23,6 +22,7 @@ import { formatRelativeTimeLabel } from "~/timestampFormat";...@@ -23,6 +22,7 @@ import { formatRelativeTimeLabel } from "~/timestampFormat";
23import { cn } from "~/lib/utils";22import { cn } from "~/lib/utils";
2423
25import { Button } from "../ui/button";24import { Button } from "../ui/button";
25import { PullRequestEditButton } from "./PullRequestEditButton";
26import { Textarea } from "../ui/textarea";26import { Textarea } from "../ui/textarea";
27import { isCommentSubmitShortcut } from "../diffs/commentSubmitShortcut";27import { isCommentSubmitShortcut } from "../diffs/commentSubmitShortcut";
28import {28import {
...@@ -297,15 +297,10 @@ export function ReviewThreadCard({...@@ -297,15 +297,10 @@ export function ReviewThreadCard({
297 environmentId={environmentId}297 environmentId={environmentId}
298 />298 />
299 {canEditComment(comment) ? (299 {canEditComment(comment) ? (
300 <Button300 <PullRequestEditButton
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"
304 aria-label="Edit comment"301 aria-label="Edit comment"
305 onClick={() => setEditingId(comment.id)}302 onClick={() => setEditingId(comment.id)}
306 >303 />
307 <PencilIcon className="size-3" />
308 </Button>
309 ) : null}304 ) : null}
310 </div>305 </div>
311 )}306 )}
apps/web/src/components/pullRequest/PullRequestSummaryTab.tsx+4-17
...@@ -11,7 +11,6 @@ import {...@@ -11,7 +11,6 @@ import {
11 ChevronDownIcon,11 ChevronDownIcon,
12 ChevronRightIcon,12 ChevronRightIcon,
13 HammerIcon,13 HammerIcon,
14 PencilIcon,
15 TagIcon,14 TagIcon,
16 UsersIcon,15 UsersIcon,
17} from "lucide-react";16} from "lucide-react";
...@@ -24,6 +23,7 @@ import { useOpenLink } from "~/browser/useOpenLink";...@@ -24,6 +23,7 @@ import { useOpenLink } from "~/browser/useOpenLink";
24import { formatRelativeTimeLabel } from "~/timestampFormat";23import { formatRelativeTimeLabel } from "~/timestampFormat";
2524
26import { Button } from "../ui/button";25import { Button } from "../ui/button";
26import { PullRequestEditButton } from "./PullRequestEditButton";
27import { Collapsible, CollapsiblePanel, CollapsibleTrigger } from "../ui/collapsible";27import { Collapsible, CollapsiblePanel, CollapsibleTrigger } from "../ui/collapsible";
28import { toastManager } from "../ui/toast";28import { toastManager } from "../ui/toast";
29import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";29import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
...@@ -187,15 +187,7 @@ function CommentBody({...@@ -187,15 +187,7 @@ function CommentBody({
187 threadRef={editing.threadRef}187 threadRef={editing.threadRef}
188 />188 />
189 {editing.canEdit(comment) ? (189 {editing.canEdit(comment) ? (
190 <Button190 <PullRequestEditButton aria-label="Edit comment" onClick={() => editing.onEdit(comment)} />
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>
199 ) : null}191 ) : null}
200 </div>192 </div>
201 );193 );
...@@ -869,15 +861,10 @@ export function PullRequestSummaryTab({...@@ -869,15 +861,10 @@ export function PullRequestSummaryTab({
869 threadRef={threadRef}861 threadRef={threadRef}
870 />862 />
871 {canEditPullRequestChangeRequest(detail) ? (863 {canEditPullRequestChangeRequest(detail) ? (
872 <Button864 <PullRequestEditButton
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"
876 aria-label="Edit description"865 aria-label="Edit description"
877 onClick={() => setBodyScope(detail.url)}866 onClick={() => setBodyScope(detail.url)}
878 >867 />
879 <PencilIcon className="size-3" />
880 </Button>
881 ) : null}868 ) : null}
882 </div>869 </div>
883 )}870 )}
apps/web/src/components/pullRequest/PullRequestTimelineTab.tsx+4-8
...@@ -12,7 +12,6 @@ import {...@@ -12,7 +12,6 @@ import {
12 FileCode2Icon,12 FileCode2Icon,
13 GitCommitHorizontalIcon,13 GitCommitHorizontalIcon,
14 MessageSquareIcon,14 MessageSquareIcon,
15 PencilIcon,
16} from "lucide-react";15} from "lucide-react";
17import { useState, type ReactNode } from "react";16import { useState, type ReactNode } from "react";
1817
...@@ -23,6 +22,7 @@ import { useAtomCommand } from "~/state/use-atom-command";...@@ -23,6 +22,7 @@ import { useAtomCommand } from "~/state/use-atom-command";
23import { formatRelativeTimeLabel } from "~/timestampFormat";22import { formatRelativeTimeLabel } from "~/timestampFormat";
2423
25import { Button } from "../ui/button";24import { Button } from "../ui/button";
25import { PullRequestEditButton } from "./PullRequestEditButton";
26import { Collapsible, CollapsiblePanel, CollapsibleTrigger } from "../ui/collapsible";26import { Collapsible, CollapsiblePanel, CollapsibleTrigger } from "../ui/collapsible";
27import { toastManager } from "../ui/toast";27import { toastManager } from "../ui/toast";
28import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";28import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
...@@ -235,15 +235,11 @@ function ConversationCard({...@@ -235,15 +235,11 @@ function ConversationCard({
235 </PullRequestMetaLine>235 </PullRequestMetaLine>
236 </div>236 </div>
237 {editable !== null && !editing ? (237 {editable !== null && !editing ? (
238 <Button238 <PullRequestEditButton
239 size="icon-xs"239 className="-mt-1"
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"
242 aria-label="Edit comment"240 aria-label="Edit comment"
243 onClick={() => setEditing(true)}241 onClick={() => setEditing(true)}
244 >242 />
245 <PencilIcon className="size-3" />
246 </Button>
247 ) : null}243 ) : null}
248 {reactions.canReact || event.reactions.length > 0 ? (244 {reactions.canReact || event.reactions.length > 0 ? (
249 <PullRequestReactionBar245 <PullRequestReactionBar