Fix jumping to a review when submitted

Author: kylecarbs

src/browser/components/pr-overview.tsx

@@ -179,6 +179,31 @@ export const PROverview = memo(function PROverview() {
     document.title = `${pr.title} · Pull Request #${pr.number} · Pulldash`;
   }, [pr.title, pr.number]);
 
+  // Scroll to target when overviewScrollTarget changes
+  const overviewScrollTarget = usePRReviewSelector(
+    (s) => s.overviewScrollTarget
+  );
+  useEffect(() => {
+    if (!overviewScrollTarget) return;
+
+    // Small delay to ensure the element is rendered
+    const timer = setTimeout(() => {
+      const element = document.getElementById(overviewScrollTarget);
+      if (element) {
+        element.scrollIntoView({ behavior: "smooth", block: "start" });
+        // Flash highlight effect
+        element.classList.add("ring-2", "ring-blue-500/50");
+        setTimeout(() => {
+          element.classList.remove("ring-2", "ring-blue-500/50");
+        }, 2000);
+      }
+      // Clear the scroll target after scrolling
+      store.clearOverviewScrollTarget();
+    }, 100);
+
+    return () => clearTimeout(timer);
+  }, [overviewScrollTarget, store]);
+
   // Manual refresh handler
   const handleRefreshChecks = useCallback(async () => {
     setRefreshingChecks(true);
@@ -832,6 +857,7 @@ export const PROverview = memo(function PROverview() {
                       return (
                         <CommentBox
                           key={`comment-${comment.id}`}
+                          id={`issuecomment-${comment.id}`}
                           user={comment.user}
                           createdAt={comment.created_at}
                           body={comment.body ?? null}
@@ -1789,6 +1815,7 @@ function LabelsSection({
 // ============================================================================
 
 function CommentBox({
+  id,
   user,
   createdAt,
   body,
@@ -1798,6 +1825,7 @@ function CommentBox({
   onRemoveReaction,
   currentUser,
 }: {
+  id?: string;
   user: { login: string; avatar_url: string } | null;
   createdAt: string;
   body: string | null;
@@ -1810,7 +1838,7 @@ function CommentBox({
   if (!user) return null;
 
   return (
-    <div className="border border-border rounded-md overflow-hidden">
+    <div id={id} className="border border-border rounded-md overflow-hidden">
       {/* Header */}
       <div
         className={cn(
@@ -1890,7 +1918,10 @@ function ReviewBox({ review }: { review: Review }) {
     }[review.state] || "bg-card/50";
 
   return (
-    <div className={cn("border rounded-md overflow-hidden", stateBg)}>
+    <div
+      id={`pullrequestreview-${review.id}`}
+      className={cn("border rounded-md overflow-hidden", stateBg)}
+    >
       <div className="flex items-center gap-2 px-4 py-2 text-sm border-b border-border">
         <UserHoverCard login={review.user.login}>
           <img

src/browser/contexts/pr-review/index.test.ts

@@ -635,3 +635,45 @@ test("navigateFromHash returns false for invalid file", () => {
 
   expect(result).toBe(false);
 });
+
+test("navigateFromHash handles GitHub-style pullrequestreview hash", () => {
+  const store = createStore();
+  store.selectFile("src/index.ts"); // Start on a file view
+
+  const result = store.navigateFromHash("#pullrequestreview-12345");
+
+  expect(result).toBe(true);
+  const state = store.getSnapshot();
+  expect(state.showOverview).toBe(true);
+  expect(state.overviewScrollTarget).toBe("pullrequestreview-12345");
+});
+
+test("navigateFromHash handles GitHub-style issuecomment hash", () => {
+  const store = createStore();
+  store.selectFile("src/index.ts");
+
+  const result = store.navigateFromHash("#issuecomment-98765");
+
+  expect(result).toBe(true);
+  const state = store.getSnapshot();
+  expect(state.showOverview).toBe(true);
+  expect(state.overviewScrollTarget).toBe("issuecomment-98765");
+});
+
+test("getHashFromState returns overview scroll target when on overview", () => {
+  const store = createStore();
+  store.selectOverview("pullrequestreview-12345");
+
+  const hash = store.getHashFromState();
+
+  expect(hash).toBe("pullrequestreview-12345");
+});
+
+test("clearOverviewScrollTarget clears the target", () => {
+  const store = createStore();
+  store.selectOverview("pullrequestreview-12345");
+
+  store.clearOverviewScrollTarget();
+
+  expect(store.getSnapshot().overviewScrollTarget).toBeNull();
+});

src/browser/contexts/pr-review/index.tsx

@@ -194,6 +194,8 @@ interface PRReviewState {
   selectedFile: string | null;
   selectedFiles: Set<string>;
   showOverview: boolean;
+  // Overview scroll target (GitHub-style hash: pullrequestreview-{id}, issuecomment-{id}, etc.)
+  overviewScrollTarget: string | null;
 
   // Viewed files
   viewedFiles: Set<string>;
@@ -357,6 +359,7 @@ export class PRReviewStore {
       selectedFile: null,
       selectedFiles: new Set(),
       showOverview: true,
+      overviewScrollTarget: null,
       viewedFiles,
       hideViewed: true,
       diffViewMode,
@@ -421,10 +424,16 @@ export class PRReviewStore {
   // File Navigation Actions
   // ---------------------------------------------------------------------------
 
-  selectOverview = () => {
-    if (this.state.showOverview) return;
+  selectOverview = (scrollTarget?: string) => {
+    // If already on overview and just updating scroll target
+    if (this.state.showOverview && scrollTarget) {
+      this.set({ overviewScrollTarget: scrollTarget });
+      return;
+    }
+    if (this.state.showOverview && !scrollTarget) return;
     this.set({
       showOverview: true,
+      overviewScrollTarget: scrollTarget ?? null,
       selectedFile: null,
       selectedFiles: new Set(),
       focusedLine: null,
@@ -442,6 +451,12 @@ export class PRReviewStore {
     });
   };
 
+  clearOverviewScrollTarget = () => {
+    if (this.state.overviewScrollTarget) {
+      this.set({ overviewScrollTarget: null });
+    }
+  };
+
   selectFile = (filename: string) => {
     if (this.state.selectedFile === filename && !this.state.showOverview)
       return;
@@ -1474,6 +1489,10 @@ export class PRReviewStore {
     this.recomputeCommentRangeLookup();
   };
 
+  setReviews = (reviews: Review[]) => {
+    this.set({ reviews });
+  };
+
   setPr = (pr: PullRequest) => {
     this.set({ pr });
   };
@@ -1680,6 +1699,7 @@ export class PRReviewStore {
   /**
    * Get the current navigation state as a URL hash string.
    * Format: #file=<path>&L<line> or #file=<path>&L<start>-<end> or #file=<path>&C<commentId>
+   * Also supports GitHub-style: #pullrequestreview-{id} or #issuecomment-{id}
    */
   getHashFromState = (): string => {
     const {
@@ -1688,8 +1708,15 @@ export class PRReviewStore {
       selectionAnchor,
       focusedCommentId,
       focusedPendingCommentId,
+      showOverview,
+      overviewScrollTarget,
     } = this.state;
 
+    // If we're on overview with a scroll target, use GitHub-style hash
+    if (showOverview && overviewScrollTarget) {
+      return overviewScrollTarget;
+    }
+
     if (!selectedFile) return "";
 
     const params = new URLSearchParams();
@@ -1716,6 +1743,7 @@ export class PRReviewStore {
   /**
    * Navigate to a state from a URL hash string.
    * Returns true if navigation was performed.
+   * Supports GitHub-style hashes: #pullrequestreview-{id}, #issuecomment-{id}, #discussion_r{id}
    */
   navigateFromHash = (hash: string): boolean => {
     if (!hash) return false;
@@ -1724,6 +1752,17 @@ export class PRReviewStore {
     const hashStr = hash.startsWith("#") ? hash.slice(1) : hash;
     if (!hashStr) return false;
 
+    // Check for GitHub-style overview hashes first
+    const reviewMatch = hashStr.match(/^pullrequestreview-(\d+)$/);
+    const commentMatch = hashStr.match(/^issuecomment-(\d+)$/);
+    const discussionMatch = hashStr.match(/^discussion_r(\d+)$/);
+
+    if (reviewMatch || commentMatch || discussionMatch) {
+      // Navigate to overview with scroll target
+      this.selectOverview(hashStr);
+      return true;
+    }
+
     const params = new URLSearchParams(hashStr);
     const file = params.get("file");
     const lineParam = params.get("L");

src/browser/contexts/pr-review/useReviewActions.ts

@@ -1,5 +1,5 @@
 import type { ReviewComment } from "@/api/types";
-import { useGitHub } from "@/browser/contexts/github";
+import { useGitHub, type Review } from "@/browser/contexts/github";
 import { useTelemetry } from "@/browser/contexts/telemetry";
 import { usePRReviewStore, usePRReviewSelector } from ".";
 
@@ -17,16 +17,18 @@ export function useReviewActions() {
     const state = store.getSnapshot();
     store.setSubmittingReview(true);
 
+    let newReview: Review | null = null;
+
     try {
       // Get the pending review node ID (from GraphQL)
       const reviewNodeId = store.getPendingReviewNodeId();
 
       if (reviewNodeId) {
-        // Submit via GraphQL
+        // Submit via GraphQL - we'll find the review ID after refreshing
         await github.submitPendingReview(reviewNodeId, event, state.reviewBody);
       } else if (state.pendingComments.length > 0) {
         // Fallback: create a new review with all comments via REST
-        await github.createPRReview(owner, repo, pr.number, {
+        newReview = await github.createPRReview(owner, repo, pr.number, {
           commit_id: pr.head.sha,
           event,
           body: state.reviewBody,
@@ -42,7 +44,7 @@ export function useReviewActions() {
         });
       } else {
         // Just submitting a review with no comments (APPROVE, etc)
-        await github.createPRReview(owner, repo, pr.number, {
+        newReview = await github.createPRReview(owner, repo, pr.number, {
           commit_id: pr.head.sha,
           event,
           body: state.reviewBody,
@@ -60,14 +62,34 @@ export function useReviewActions() {
         files_reviewed: state.viewedFiles.size,
       });
 
-      // Refresh comments
-      const newComments = await github.getPRComments(owner, repo, pr.number);
+      // Refresh comments and reviews
+      const [newComments, reviews] = await Promise.all([
+        github.getPRComments(owner, repo, pr.number),
+        github.getPRReviews(owner, repo, pr.number),
+      ]);
       store.setComments(newComments as ReviewComment[]);
+      store.setReviews(reviews);
+
+      // If we got the review ID from REST, use it; otherwise find the latest review
+      let scrollTarget: string | undefined;
+      if (newReview?.id) {
+        scrollTarget = `pullrequestreview-${newReview.id}`;
+      } else if (reviews.length > 0) {
+        // Find the most recent review (likely the one we just submitted)
+        const sortedReviews = [...reviews].sort(
+          (a, b) =>
+            new Date(b.submitted_at ?? 0).getTime() -
+            new Date(a.submitted_at ?? 0).getTime()
+        );
+        if (sortedReviews[0]) {
+          scrollTarget = `pullrequestreview-${sortedReviews[0].id}`;
+        }
+      }
 
       store.clearReviewState();
 
-      // Navigate to overview page after successful review submission
-      store.selectOverview();
+      // Navigate to overview page and scroll to the new review
+      store.selectOverview(scrollTarget);
     } finally {
       store.setSubmittingReview(false);
     }