# Files changed · PR \#22726 · pingdotgg/t3code

[View on GitCafe](https://git.cafe/pingdotgg/t3code/pull/22726/diffs)

Repository: [pingdotgg/t3code](https://git.cafe/pingdotgg/t3code)

Visibility: public

[perf\(web\): Shift re-renders only each row's quick-action group](https://git.cafe/pingdotgg/t3code/pull/22726.md)

Version: 6

Head commit: 0290927ccadf16aca93b4ba8349222209c6e6302

Base commit: bcb74b5d337e4a5c366e2599d9fca88a72b0a13d

Comparison base: bcb74b5d337e4a5c366e2599d9fca88a72b0a13d

Showing up to 20 entries from this revision. If the pull request changes, reopen the first page before continuing.

## apps/web/src/components/pullRequest/PullRequestListGroups.tsx

Status: modified; +44; −47

```diff
@@ -3,7 +3,6 @@
 import type { RefCallback } from "react";
 
 import { cn } from "~/lib/utils";
-import { useShortcutModifierState } from "~/shortcutModifierState";
 import { Separator } from "../ui/separator";
 import {
   pullRequestEntryKey,
@@ -12,7 +11,10 @@
   type PullRequestGroup,
 } from "./pullRequestList.logic";
 import { PullRequestRow, type PullRequestRowTarget } from "./PullRequestRow";
+import {
-import type { PullRequestSpeedActionResult } from "./PullRequestSpeedActions";
+  PullRequestSpeedModeProvider,
+  type PullRequestSpeedActionResult,
+} from "./PullRequestSpeedActions";
 
 const GROUP_ICONS: Record<string, LucideIcon> = {
   authored: PenLineIcon,
@@ -38,10 +40,6 @@
   );
 }
 
-/**
- * The grouped rows. Holding Shift turns rows into speed actions, so the modifier subscription lives
- * here: a key press re-renders the rows, not the page and its open pull request.
- */
 export function PullRequestListGroups({
   groups,
   environmentLabels,
@@ -75,47 +73,46 @@
   sweepingKeys: ReadonlySet<string>;
   onCloseSweepStart: (entry: EnvironmentPullRequestEntry, event: PointerEvent) => void;
 }) {
-  const modifiers = useShortcutModifierState(true);
-  const speedMode =
-    modifiers.shiftKey && !modifiers.metaKey && !modifiers.ctrlKey && !modifiers.altKey;
   return (
+    <PullRequestSpeedModeProvider>
+      <div className={cn("space-y-3", sweepingKeys.size > 0 && "**:pointer-events-none")}>
+        {groups.map((group) => (
+          <div key={group.key} className="space-y-0.5">
+            {group.label ? <PullRequestGroupHeader group={group} /> : null}
+            {group.entries.map((entry) => {
+              const entryKey = pullRequestEntryKey(entry);
+              const environmentLabel = environmentLabels?.get(entry.environmentId);
+              return (
+                <PullRequestRow
+                  key={entryKey}
+                  statsKey={entryKey}
+                  statsRef={statsRef}
+                  entry={entry}
+                  showProjectTitle
+                  showProvider={showProvider}
+                  {...(environmentLabel !== undefined ? { environmentLabel } : {})}
+                  matchedElsewhere={
+                    query.length > 0 &&
+                    scorePullRequestMatch(entry, query) <= MATCHED_ELSEWHERE_SCORE
+                  }
+                  selected={
+                    selected?.environmentId === entry.environmentId &&
+                    selected.repository === entry.repository &&
+                    selected.host?.toLowerCase() === entry.host.toLowerCase() &&
+                    selected.number === entry.number
+                  }
+                  onSelect={onSelect}
+                  hostActions={hostActionsOf(entry)}
+                  onActed={onActed}
+                  closing={closingKeys.has(entryKey)}
+                  sweeping={sweepingKeys.has(entryKey)}
+                  onCloseSweepStart={onCloseSweepStart}
-    <div className={cn("space-y-3", sweepingKeys.size > 0 && "**:pointer-events-none")}>
-      {groups.map((group) => (
-        <div key={group.key} className="space-y-0.5">
-          {group.label ? <PullRequestGroupHeader group={group} /> : null}
+                />
-          {group.entries.map((entry) => {
+              );
+            })}
+          </div>
+        ))}
+      </div>
+    </PullRequestSpeedModeProvider>
-            const entryKey = pullRequestEntryKey(entry);
-            const environmentLabel = environmentLabels?.get(entry.environmentId);
-            return (
-              <PullRequestRow
-                key={entryKey}
-                statsKey={entryKey}
-                statsRef={statsRef}
-                entry={entry}
-                showProjectTitle
-                showProvider={showProvider}
-                {...(environmentLabel !== undefined ? { environmentLabel } : {})}
-                matchedElsewhere={
-                  query.length > 0 && scorePullRequestMatch(entry, query) <= MATCHED_ELSEWHERE_SCORE
-                }
-                selected={
-                  selected?.environmentId === entry.environmentId &&
-                  selected.repository === entry.repository &&
-                  selected.host?.toLowerCase() === entry.host.toLowerCase() &&
-                  selected.number === entry.number
-                }
-                onSelect={onSelect}
-                speedMode={speedMode}
-                hostActions={hostActionsOf(entry)}
-                onActed={onActed}
-                closing={closingKeys.has(entryKey)}
-                sweeping={sweepingKeys.has(entryKey)}
-                onCloseSweepStart={onCloseSweepStart}
-              />
-            );
-          })}
-        </div>
-      ))}
-    </div>
   );
 }
```

## apps/web/src/components/pullRequest/PullRequestRow.tsx

Status: modified; +0; −3

```diff
@@ -78,7 +78,6 @@
   statsKey,
   statsRef,
   onSelect,
-  speedMode,
   hostActions,
   onActed,
   closing = false,
@@ -95,7 +94,6 @@
   statsKey?: string;
   statsRef?: RefCallback<HTMLDivElement>;
   onSelect: (entry: PullRequestRowTarget) => void;
-  speedMode: boolean;
   hostActions: ReadonlySet<PullRequestAction>;
   onActed: (result: PullRequestSpeedActionResult) => void;
   closing?: boolean;
@@ -243,7 +241,6 @@
         <PullRequestSpeedActions
           entry={entry}
           hostActions={hostActions}
-          visible={speedMode}
           onActed={onActed}
           closing={closing}
           sweeping={sweeping}
```

## apps/web/src/components/pullRequest/PullRequestSpeedActions.tsx

Status: modified; +46; −8

```diff
@@ -1,5 +1,8 @@
 import { useAtomValue } from "@effect/atom-react";
 import type { PullRequestAction } from "@t3tools/contracts";
+import { createContext, use, type ReactNode } from "react";
+
+import { useShortcutModifierState } from "~/shortcutModifierState";
 import { pullRequestEnvironment } from "~/state/pullRequests";
 import { useUiStateStore } from "~/uiStateStore";
 import { Button } from "../ui/button";
@@ -26,7 +29,6 @@
 export function PullRequestSpeedActions<Entry extends PullRequestSpeedActionEntry>({
   entry,
   hostActions,
-  visible,
   onActed,
   closing = false,
   sweeping = false,
@@ -34,7 +36,6 @@
 }: {
   entry: Entry;
   hostActions: ReadonlySet<PullRequestAction>;
-  visible: boolean;
   onActed?: (result: PullRequestSpeedActionResult<Entry>) => void;
   closing?: boolean;
   sweeping?: boolean;
@@ -75,12 +76,10 @@
   const busy = actionPending || closing || sweeping;
   if (actions.length === 0) return null;
   return (
-    <div
-      className="shrink-0 items-center gap-1 pr-3"
+    <SpeedModeGroup
+      busy={busy}
+      pending={actionPending || closing}
+      label={`Quick actions for pull request #${entry.number}`}
-      style={{ display: visible || busy ? "flex" : "none" }}
-      role="group"
-      aria-label={`Quick actions for pull request #${entry.number}`}
-      data-pull-request-action-pending={actionPending || closing}
     >
       {actions.map((action) => {
         const label = ACTIONS[action].label;
@@ -116,6 +115,45 @@
           </Tooltip>
         );
       })}
+    </SpeedModeGroup>
+  );
+}
+
+/**
+ * Whether Shift is held, as context rather than a row prop: a Shift press then re-renders each
+ * row's action group, not the rows or their buttons, in one commit.
+ */
+export const PullRequestSpeedModeContext = createContext(false);
+
+/** Tracks Shift for the quick actions below it. */
+export function PullRequestSpeedModeProvider({ children }: { children: ReactNode }) {
+  const modifiers = useShortcutModifierState(true);
+  const speedMode =
+    modifiers.shiftKey && !modifiers.metaKey && !modifiers.ctrlKey && !modifiers.altKey;
+  return <PullRequestSpeedModeContext value={speedMode}>{children}</PullRequestSpeedModeContext>;
+}
+
+function SpeedModeGroup({
+  busy,
+  pending,
+  label,
+  children,
+}: {
+  busy: boolean;
+  pending: boolean;
+  label: string;
+  children: ReactNode;
+}) {
+  const speedMode = use(PullRequestSpeedModeContext);
+  return (
+    <div
+      className="shrink-0 items-center gap-1 pr-3"
+      style={{ display: speedMode || busy ? "flex" : "none" }}
+      role="group"
+      aria-label={label}
+      data-pull-request-action-pending={pending}
+    >
+      {children}
     </div>
   );
 }
```

## apps/web/src/components/pullRequest/ThreadPullRequestsPanel.tsx

Status: modified; +46; −48

```diff
@@ -54,7 +54,7 @@
 } from "./pullRequestPresentation";
 import { PullRequestGlyph } from "./pullRequestIcons";
 import { pullRequestQuickActions } from "./pullRequestList.logic";
-import { PullRequestSpeedActions } from "./PullRequestSpeedActions";
+import { PullRequestSpeedActions, PullRequestSpeedModeContext } from "./PullRequestSpeedActions";
 
 const SOURCE_LABELS: Record<ThreadPullRequestLink["source"], string> = {
   manual: "Linked by you",
@@ -278,11 +278,7 @@
         />
       </a>
       {actionEntry !== null ? (
-        <PullRequestSpeedActions
-          entry={actionEntry}
-          hostActions={linkHostActions}
-          visible={speedMode}
-        />
+        <PullRequestSpeedActions entry={actionEntry} hostActions={linkHostActions} />
       ) : null}
       <span
         className={cn(
@@ -448,48 +444,50 @@
   }
 
   return (
-    <div className="flex h-full min-h-0 flex-col">
+    <PullRequestSpeedModeContext value={speedMode}>
+      <div className="flex h-full min-h-0 flex-col">
-      {/* Threads that run a stack or a sweep link hundreds of pull requests; only the rows in
+        {/* Threads that run a stack or a sweep link hundreds of pull requests; only the rows in
           view are mounted. */}
-      <LegendList<PullRequestListLine>
-        data={lines}
-        keyExtractor={lineKey}
-        extraData={rowInputs}
-        renderItem={({ item: line }) => (
-          <LinkRow
-            line={line}
-            threadRef={threadRef}
-            projectId={
-              capabilities?.pullRequests === true
-                ? (findProjectForChangeRequest(environmentProjects, line.link)?.id ??
-                  thread?.projectId ??
-                  null)
-                : null
-            }
-            speedMode={speedMode}
-            onUnlink={handleUnlink}
-            onSetWatching={supportsWatch ? handleSetWatching : null}
-          />
-        )}
-        estimatedItemSize={44}
-        drawDistance={440}
-        className="min-h-0 flex-1 overscroll-contain p-1.5"
-      />
-      <footer className="flex items-center justify-between border-t border-border/60 px-2 py-1.5 text-2xs text-muted-foreground">
-        <span>
-          {openCount} open · {linkCount} linked
-          {lastSynced ? (
-            <>
-              {" · synced "}
-              <RelativeTime timestamp={lastSynced} />
-            </>
-          ) : null}
-        </span>
+        <LegendList<PullRequestListLine>
+          data={lines}
+          keyExtractor={lineKey}
+          extraData={rowInputs}
+          renderItem={({ item: line }) => (
+            <LinkRow
+              line={line}
+              threadRef={threadRef}
+              projectId={
+                capabilities?.pullRequests === true
+                  ? (findProjectForChangeRequest(environmentProjects, line.link)?.id ??
+                    thread?.projectId ??
+                    null)
+                  : null
+              }
+              speedMode={speedMode}
+              onUnlink={handleUnlink}
+              onSetWatching={supportsWatch ? handleSetWatching : null}
+            />
+          )}
+          estimatedItemSize={44}
+          drawDistance={440}
+          className="min-h-0 flex-1 overscroll-contain p-1.5"
+        />
+        <footer className="flex items-center justify-between border-t border-border/60 px-2 py-1.5 text-2xs text-muted-foreground">
+          <span>
+            {openCount} open · {linkCount} linked
+            {lastSynced ? (
+              <>
+                {" · synced "}
+                <RelativeTime timestamp={lastSynced} />
+              </>
+            ) : null}
+          </span>
+          <Button size="xs" variant="ghost" onClick={openLinkDialog}>
+            <PlusIcon className="size-3.5" />
+            Link
+          </Button>
-        <Button size="xs" variant="ghost" onClick={openLinkDialog}>
+        </footer>
+      </div>
+    </PullRequestSpeedModeContext>
-          <PlusIcon className="size-3.5" />
-          Link
-        </Button>
-      </footer>
-    </div>
   );
 }
```