🤖 Add Ctrl+R keyboard shortcut for Code Review refresh (#316)

Add keyboard shortcut for refreshing the diff in Code Review panel.

## Changes

- **Added REFRESH_REVIEW keybind** to centralized `KEYBINDS` registry
(`Ctrl+R` / `Cmd+R`)
- **Implemented global keyboard handler** in `ReviewPanel` to trigger
diff refresh
- **Updated RefreshButton tooltip** to display the keybind hint:
`Refresh diff (⌘R)`
- **Removed Ctrl+R from Electron reload menu** - Replaced `role:
'reload'` with custom click handler that preserves reload functionality
without keyboard shortcut

## Pattern

Follows existing keybind patterns used throughout the app:
- Uses `matchesKeybind` for event detection
- Uses `formatKeybind` for display in tooltips
- Global keyboard listener (not panel-focused like j/k navigation)

## Why Remove Reload Shortcut?

Ctrl+R is traditionally a browser/Electron reload shortcut, but in a
development tool like cmux:
- Users rarely need to manually reload the app
- Code Review refresh is a much more frequent operation
- Reload is still accessible via View menu when needed

## Testing

- Verify `Ctrl+R` / `Cmd+R` refreshes the diff when Code Review tab is
open
- Verify tooltip shows the correct keybind on hover over refresh button
- Verify keybind works regardless of panel focus state
- Verify View > Reload still works (just no keyboard shortcut)

_Generated with `cmux`_

Author: ammar-agent

src/components/RightSidebar/CodeReview/FileTree.tsx

@@ -251,7 +251,7 @@ export const FileTree: React.FC<FileTreeExternalProps> = ({
       </TreeHeader>
       {commonPrefix && <CommonPrefix>{commonPrefix}/</CommonPrefix>}
       <TreeContainer>
-        {isLoading ? (
+        {isLoading && !startNode ? (
           <EmptyState>Loading file tree...</EmptyState>
         ) : startNode ? (
           startNode.children.map((child) => (

src/components/RightSidebar/CodeReview/RefreshButton.tsx

@@ -0,0 +1,111 @@
+/**
+ * RefreshButton - Animated refresh button with graceful spin-down
+ */
+
+import React, { useState, useRef, useEffect } from "react";
+import styled from "@emotion/styled";
+import { TooltipWrapper, Tooltip } from "@/components/Tooltip";
+import { formatKeybind, KEYBINDS } from "@/utils/ui/keybinds";
+
+interface RefreshButtonProps {
+  onClick: () => void;
+  isLoading?: boolean;
+}
+
+const Button = styled.button<{ $animationState: "idle" | "spinning" | "stopping" }>`
+  background: transparent;
+  border: none;
+  padding: 2px;
+  cursor: ${(props) => (props.$animationState !== "idle" ? "default" : "pointer")};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: ${(props) => (props.$animationState === "spinning" ? "#007acc" : "#888")};
+  transition: color 1.5s ease-out;
+
+  &:hover {
+    color: ${(props) => (props.$animationState === "spinning" ? "#007acc" : "#ccc")};
+  }
+
+  svg {
+    width: 12px;
+    height: 12px;
+  }
+
+  &.spinning svg {
+    animation: spin 0.8s linear infinite;
+  }
+
+  &.spin-once svg {
+    animation: spin-once 0.8s ease-out forwards;
+  }
+
+  @keyframes spin {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  @keyframes spin-once {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+`;
+
+export const RefreshButton: React.FC<RefreshButtonProps> = ({ onClick, isLoading = false }) => {
+  // Track animation state for graceful stopping
+  const [animationState, setAnimationState] = useState<"idle" | "spinning" | "stopping">("idle");
+  const spinOnceTimeoutRef = useRef<number | null>(null);
+
+  // Manage animation state based on loading prop
+  useEffect(() => {
+    if (isLoading) {
+      // Start spinning
+      setAnimationState("spinning");
+      // Clear any pending stop timeout
+      if (spinOnceTimeoutRef.current) {
+        clearTimeout(spinOnceTimeoutRef.current);
+        spinOnceTimeoutRef.current = null;
+      }
+    } else if (animationState === "spinning") {
+      // Gracefully stop: do one final rotation
+      setAnimationState("stopping");
+      // After animation completes, return to idle
+      spinOnceTimeoutRef.current = window.setTimeout(() => {
+        setAnimationState("idle");
+        spinOnceTimeoutRef.current = null;
+      }, 800); // Match animation duration
+    }
+
+    return () => {
+      if (spinOnceTimeoutRef.current) {
+        clearTimeout(spinOnceTimeoutRef.current);
+      }
+    };
+  }, [isLoading, animationState]);
+
+  const className =
+    animationState === "spinning" ? "spinning" : animationState === "stopping" ? "spin-once" : "";
+
+  return (
+    <TooltipWrapper inline>
+      <Button onClick={onClick} $animationState={animationState} className={className}>
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+          <path d="M21.5 2v6h-6M2.5 22v-6h6M2 11.5a10 10 0 0 1 18.8-4.3M22 12.5a10 10 0 0 1-18.8 4.2" />
+        </svg>
+      </Button>
+      <Tooltip position="bottom" align="left">
+        {animationState !== "idle"
+          ? "Refreshing..."
+          : `Refresh diff (${formatKeybind(KEYBINDS.REFRESH_REVIEW)})`}
+      </Tooltip>
+    </TooltipWrapper>
+  );
+};

src/components/RightSidebar/CodeReview/ReviewControls.tsx

@@ -4,15 +4,16 @@
 
 import React, { useState } from "react";
 import styled from "@emotion/styled";
-import { TooltipWrapper, Tooltip } from "@/components/Tooltip";
 import { usePersistedState } from "@/hooks/usePersistedState";
 import type { ReviewFilters, ReviewStats } from "@/types/review";
+import { RefreshButton } from "./RefreshButton";
 
 interface ReviewControlsProps {
   filters: ReviewFilters;
   stats: ReviewStats;
   onFiltersChange: (filters: ReviewFilters) => void;
   onRefresh?: () => void;
+  isLoading?: boolean;
 }
 
 const ControlsContainer = styled.div`
@@ -74,27 +75,6 @@ const Separator = styled.div`
   background: #3e3e42;
 `;
 
-const RefreshButton = styled.button`
-  background: transparent;
-  border: none;
-  padding: 2px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: #888;
-  transition: color 0.2s ease;
-
-  &:hover {
-    color: #ccc;
-  }
-
-  svg {
-    width: 12px;
-    height: 12px;
-  }
-`;
-
 const CheckboxLabel = styled.label`
   display: flex;
   align-items: center;
@@ -136,6 +116,7 @@ export const ReviewControls: React.FC<ReviewControlsProps> = ({
   stats,
   onFiltersChange,
   onRefresh,
+  isLoading = false,
 }) => {
   // Local state for input value - only commit on blur/Enter
   const [inputValue, setInputValue] = useState(filters.diffBase);
@@ -187,18 +168,7 @@ export const ReviewControls: React.FC<ReviewControlsProps> = ({
 
   return (
     <ControlsContainer>
-      {onRefresh && (
-        <TooltipWrapper inline>
-          <RefreshButton onClick={onRefresh}>
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-              <path d="M21.5 2v6h-6M2.5 22v-6h6M2 11.5a10 10 0 0 1 18.8-4.3M22 12.5a10 10 0 0 1-18.8 4.2" />
-            </svg>
-          </RefreshButton>
-          <Tooltip position="bottom" align="left">
-            Refresh diff
-          </Tooltip>
-        </TooltipWrapper>
-      )}
+      {onRefresh && <RefreshButton onClick={onRefresh} isLoading={isLoading} />}
       <Label>Base:</Label>
       <BaseInput
         type="text"

src/components/RightSidebar/CodeReview/ReviewPanel.tsx

@@ -18,6 +18,7 @@ import {
 } from "@/utils/git/numstatParser";
 import type { DiffHunk, ReviewFilters as ReviewFiltersType } from "@/types/review";
 import type { FileTreeNode } from "@/utils/git/numstatParser";
+import { matchesKeybind, KEYBINDS } from "@/utils/ui/keybinds";
 
 interface ReviewPanelProps {
   workspaceId: string;
@@ -499,6 +500,19 @@ export const ReviewPanel: React.FC<ReviewPanelProps> = ({
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [isPanelFocused, selectedHunkId, filteredHunks]);
 
+  // Global keyboard shortcut for refresh (Ctrl+R / Cmd+R)
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (matchesKeybind(e, KEYBINDS.REFRESH_REVIEW)) {
+        e.preventDefault();
+        setRefreshTrigger((prev) => prev + 1);
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, []);
+
   return (
     <PanelContainer
       tabIndex={0}
@@ -511,6 +525,7 @@ export const ReviewPanel: React.FC<ReviewPanelProps> = ({
         stats={stats}
         onFiltersChange={setFilters}
         onRefresh={() => setRefreshTrigger((prev) => prev + 1)}
+        isLoading={isLoadingHunks || isLoadingTree}
       />
 
       {error ? (

src/main.ts

@@ -169,7 +169,15 @@ function createMenu() {
     {
       label: "View",
       submenu: [
-        { role: "reload" },
+        // Reload without Ctrl+R shortcut (reserved for Code Review refresh)
+        {
+          label: "Reload",
+          click: (_item, focusedWindow) => {
+            if (focusedWindow && "reload" in focusedWindow) {
+              (focusedWindow as BrowserWindow).reload();
+            }
+          },
+        },
         { role: "forceReload" },
         { role: "toggleDevTools" },
         { type: "separator" },

src/utils/ui/keybinds.ts

@@ -250,4 +250,8 @@ export const KEYBINDS = {
   /** Switch to Review tab in right sidebar */
   // macOS: Cmd+2, Win/Linux: Ctrl+2
   REVIEW_TAB: { key: "2", ctrl: true, description: "Review tab" },
+
+  /** Refresh diff in Code Review panel */
+  // macOS: Cmd+R, Win/Linux: Ctrl+R
+  REFRESH_REVIEW: { key: "r", ctrl: true },
 } as const;