Add full-file diff context setting (#858)

Co-authored-by: Nikolai Perlt <perlt@Nikolais-MacBook-Pro.local>

packages/review-editor/App.tsx

@@ -157,6 +157,7 @@ const ReviewApp: React.FC = () => {
   const diffShowLineNumbers = useConfigValue('diffShowLineNumbers');
   const diffShowBackground = useConfigValue('diffShowBackground');
   const diffHideWhitespace = useConfigValue('diffHideWhitespace');
+  const diffExpandUnchanged = useConfigValue('diffExpandUnchanged');
   const diffFontFamily = useConfigValue('diffFontFamily');
   const diffFontSize = useConfigValue('diffFontSize');
   const diffTabSize = useConfigValue('diffTabSize');
@@ -1400,6 +1401,7 @@ const ReviewApp: React.FC = () => {
     lineDiffType: diffLineDiffType,
     disableLineNumbers: !diffShowLineNumbers,
     disableBackground: !diffShowBackground,
+    expandUnchanged: diffExpandUnchanged,
     fontFamily: diffFontFamily || undefined,
     fontSize: diffFontSize || undefined,
     // Only propagate base for modes where it affects old/new content. Avoids
@@ -1465,7 +1467,7 @@ const ReviewApp: React.FC = () => {
   }), [
     files, activeFileIndex, diffStyle, diffOverflow, diffIndicators,
     diffLineDiffType, diffShowLineNumbers, diffShowBackground,
-    diffFontFamily, diffFontSize, activeDiffBase, committedBase, feedbackDiffContext, prReviewScopeLabel, prDiffScope,
+    diffExpandUnchanged, diffFontFamily, diffFontSize, activeDiffBase, committedBase, feedbackDiffContext, prReviewScopeLabel, prDiffScope,
     allAnnotations, externalAnnotations,
     selectedAnnotationId, pendingSelection, handleLineSelection,
     handleAddAnnotation, handleAddFileComment, handleAddFileCommentForFile, handleEditAnnotation,

packages/review-editor/components/AllFilesDiffView.tsx

@@ -33,6 +33,7 @@ interface AllFilesDiffViewProps {
   lineDiffType?: 'word-alt' | 'word' | 'char' | 'none';
   disableLineNumbers?: boolean;
   disableBackground?: boolean;
+  expandUnchanged?: boolean;
   fontFamily?: string;
   fontSize?: string;
   viewedFiles: Set<string>;
@@ -73,6 +74,7 @@ export const AllFilesDiffView: React.FC<AllFilesDiffViewProps> = ({
   lineDiffType,
   disableLineNumbers,
   disableBackground,
+  expandUnchanged,
   fontFamily,
   fontSize,
   viewedFiles,
@@ -460,6 +462,7 @@ export const AllFilesDiffView: React.FC<AllFilesDiffViewProps> = ({
                   lineDiffType,
                   disableLineNumbers,
                   disableBackground,
+                  expandUnchanged,
                   hunkSeparators: 'line-info',
                   enableLineSelection: true,
                   enableGutterUtility: true,

packages/review-editor/components/DiffOptionsPopover.tsx

@@ -95,6 +95,7 @@ export const DiffOptionsPopover: React.FC = () => {
   const diffShowLineNumbers = useConfigValue('diffShowLineNumbers');
   const diffShowBackground = useConfigValue('diffShowBackground');
   const diffHideWhitespace = useConfigValue('diffHideWhitespace');
+  const diffExpandUnchanged = useConfigValue('diffExpandUnchanged');
   const diffTabSize = useConfigValue('diffTabSize');
   const diffLineBgIntensity = useConfigValue('diffLineBgIntensity');
 
@@ -151,6 +152,7 @@ export const DiffOptionsPopover: React.FC = () => {
                   <CompactSegmented options={LINE_BG_INTENSITY_OPTIONS} value={diffLineBgIntensity} onChange={(v) => configStore.set('diffLineBgIntensity', v)} />
                 </div>
               )}
+              <CompactToggle checked={diffExpandUnchanged} onChange={(v) => configStore.set('diffExpandUnchanged', v)} label="Full file context" />
               <CompactToggle checked={diffHideWhitespace} onChange={(v) => configStore.set('diffHideWhitespace', v)} label="Hide whitespace" />
               <CompactStepper
                 label="Tab size"

packages/review-editor/components/DiffViewer.tsx

@@ -35,6 +35,7 @@ interface PierreDiffContentProps {
   lineDiffType?: 'word-alt' | 'word' | 'char' | 'none';
   disableLineNumbers?: boolean;
   disableBackground?: boolean;
+  expandUnchanged?: boolean;
   mergedAnnotations: DiffLineAnnotation<DiffAnnotationMetadata>[];
   pendingSelection: SelectedLineRange | null;
   onLineSelectionEnd: (range: SelectedLineRange | null) => void;
@@ -55,6 +56,7 @@ const PierreDiffContent = React.memo(({
   lineDiffType,
   disableLineNumbers,
   disableBackground,
+  expandUnchanged,
   mergedAnnotations,
   pendingSelection,
   onLineSelectionEnd,
@@ -78,6 +80,7 @@ const PierreDiffContent = React.memo(({
         lineDiffType,
         disableLineNumbers,
         disableBackground,
+        expandUnchanged,
         hunkSeparators: 'line-info',
         enableLineSelection: true,
         enableGutterUtility: true,
@@ -105,6 +108,7 @@ const PierreDiffContent = React.memo(({
   prev.lineDiffType === next.lineDiffType &&
   prev.disableLineNumbers === next.disableLineNumbers &&
   prev.disableBackground === next.disableBackground &&
+  prev.expandUnchanged === next.expandUnchanged &&
   prev.mergedAnnotations === next.mergedAnnotations &&
   prev.pendingSelection === next.pendingSelection &&
   prev.onLineSelectionEnd === next.onLineSelectionEnd &&
@@ -131,6 +135,7 @@ interface DiffViewerProps {
   lineDiffType?: 'word-alt' | 'word' | 'char' | 'none';
   disableLineNumbers?: boolean;
   disableBackground?: boolean;
+  expandUnchanged?: boolean;
   fontFamily?: string;
   fontSize?: string;
   annotations: CodeAnnotation[];
@@ -180,6 +185,7 @@ export const DiffViewer: React.FC<DiffViewerProps> = ({
   lineDiffType,
   disableLineNumbers,
   disableBackground,
+  expandUnchanged,
   fontFamily,
   fontSize,
   annotations,
@@ -408,7 +414,7 @@ export const DiffViewer: React.FC<DiffViewerProps> = ({
     roots.forEach(root =>
       applySearchHighlights(root, query, matches, activeSearchMatchId)
     );
-  }, [searchQuery, searchMatches, filePath, diffStyle, diffOverflow, diffIndicators, lineDiffType, disableLineNumbers, disableBackground, augmentedDiff, viewport]);
+  }, [searchQuery, searchMatches, filePath, diffStyle, diffOverflow, diffIndicators, lineDiffType, disableLineNumbers, disableBackground, expandUnchanged, augmentedDiff, viewport]);
 
   // Swap active search highlight instantly when stepping between matches.
   // This avoids a full rebuild just to change two elements' background color.
@@ -421,7 +427,7 @@ export const DiffViewer: React.FC<DiffViewerProps> = ({
   useEffect(() => {
     if (!activeSearchMatch || !containerRef.current) return;
     return retryScrollToSearchMatch(containerRef.current, activeSearchMatch);
-  }, [activeSearchMatch, filePath, diffStyle, diffOverflow, diffIndicators, lineDiffType, disableLineNumbers, disableBackground, viewport]);
+  }, [activeSearchMatch, filePath, diffStyle, diffOverflow, diffIndicators, lineDiffType, disableLineNumbers, disableBackground, expandUnchanged, viewport]);
 
   // Map annotations to @pierre/diffs format
   const lineAnnotations = useMemo(() => {
@@ -606,6 +612,7 @@ export const DiffViewer: React.FC<DiffViewerProps> = ({
               lineDiffType={lineDiffType}
               disableLineNumbers={disableLineNumbers}
               disableBackground={disableBackground}
+              expandUnchanged={expandUnchanged}
               mergedAnnotations={mergedAnnotations}
               pendingSelection={pendingSelection}
               onLineSelectionEnd={handlePierreLineSelectionEnd}

packages/review-editor/dock/ReviewStateContext.tsx

@@ -26,6 +26,7 @@ export interface ReviewState {
   lineDiffType?: 'word-alt' | 'word' | 'char' | 'none';
   disableLineNumbers?: boolean;
   disableBackground?: boolean;
+  expandUnchanged?: boolean;
   fontFamily?: string;
   fontSize?: string;
   /** User-selected base branch; feeds the `base` query param on file-content fetches. */

packages/review-editor/dock/panels/ReviewAllFilesDiffPanel.tsx

@@ -24,6 +24,7 @@ export const ReviewAllFilesDiffPanel: React.FC<IDockviewPanelProps> = () => {
       lineDiffType={state.lineDiffType}
       disableLineNumbers={state.disableLineNumbers}
       disableBackground={state.disableBackground}
+      expandUnchanged={state.expandUnchanged}
       fontFamily={state.fontFamily}
       fontSize={state.fontSize}
       viewedFiles={state.viewedFiles}

packages/review-editor/dock/panels/ReviewDiffPanel.tsx

@@ -80,6 +80,7 @@ export const ReviewDiffPanel: React.FC<IDockviewPanelProps> = (props) => {
         lineDiffType={state.lineDiffType}
         disableLineNumbers={state.disableLineNumbers}
         disableBackground={state.disableBackground}
+        expandUnchanged={state.expandUnchanged}
         fontFamily={state.fontFamily}
         fontSize={state.fontSize}
         annotations={fileAnnotations}

packages/shared/config.ts

@@ -24,6 +24,7 @@ export interface DiffOptions {
   fontSize?: string;
   tabSize?: number;
   hideWhitespace?: boolean;
+  expandUnchanged?: boolean;
   defaultDiffType?: DefaultDiffType;
   lineBgIntensity?: DiffLineBgIntensity;
 }

packages/ui/components/Settings.tsx

@@ -237,6 +237,7 @@ const ReviewDisplayTab: React.FC = () => {
   const diffShowBackground = useConfigValue('diffShowBackground');
   const diffLineBgIntensity = useConfigValue('diffLineBgIntensity');
   const diffHideWhitespace = useConfigValue('diffHideWhitespace');
+  const diffExpandUnchanged = useConfigValue('diffExpandUnchanged');
   const diffFontFamily = useConfigValue('diffFontFamily');
   const diffFontSize = useConfigValue('diffFontSize');
 
@@ -383,6 +384,16 @@ const ReviewDisplayTab: React.FC = () => {
 
       <div className="border-t border-border" />
 
+      {/* Expand Unchanged Regions */}
+      <ToggleSwitch
+        checked={diffExpandUnchanged}
+        onChange={(v) => configStore.set('diffExpandUnchanged', v)}
+        label="Expand Unchanged Regions"
+        description="Show full file content around changes by default"
+      />
+
+      <div className="border-t border-border" />
+
       {/* Hide Whitespace */}
       <ToggleSwitch
         checked={diffHideWhitespace}

packages/ui/config/settings.ts

@@ -175,6 +175,21 @@ export const SETTINGS = {
     toServer: (v: boolean) => ({ diffOptions: { hideWhitespace: v } }),
   },
 
+  diffExpandUnchanged: {
+    defaultValue: false as boolean,
+    fromCookie: () => {
+      const v = storage.getItem('plannotator-diff-expand-unchanged');
+      return v === 'true' ? true : v === 'false' ? false : undefined;
+    },
+    toCookie: (v: boolean) => storage.setItem('plannotator-diff-expand-unchanged', String(v)),
+    serverKey: 'diffOptions',
+    fromServer: (sc: Record<string, unknown>) => {
+      const v = (sc.diffOptions as Record<string, unknown> | undefined)?.expandUnchanged;
+      return typeof v === 'boolean' ? v : undefined;
+    },
+    toServer: (v: boolean) => ({ diffOptions: { expandUnchanged: v } }),
+  },
+
   diffFontSize: {
     defaultValue: '' as string, // empty = theme default
     fromCookie: () => storage.getItem('plannotator-diff-font-size') || undefined,