fix: reset image diff preview on file change

[janburzinski]

summary

• fix you getting trapped

[greptile-apps]

Greptile Summary

This PR fixes the image diff preview getting stuck when switching between files by adding a key prop to the wrapper div in FileDiffView, forcing React to fully remount child components whenever the active file changes.

• The composite key (workspaceId:group:path) correctly identifies a unique file slot, so React destroys and recreates all children — including ImageDiffView — on every file switch, clearing any stale internal state.
• The key is placed on the shared container, meaning StickyDiffEditor (Monaco) is also remounted on each file change, not just the image diff view; this is broader than the stated fix and may introduce a brief re-render cost on text-diff navigation.

Confidence Score: 4/5

Safe to merge; the change is a small, targeted fix using a well-understood React pattern.

The fix correctly uses a composite key to reset child state on file change. The only open question is whether remounting the Monaco editor on every text-file switch is intentional — it is broader than the image-preview bug it was written to address and could produce a visible flash on navigation, but it does not break correctness.

src/renderer/features/tasks/diff-view/main-panel/file-diff-view.tsx — worth confirming the Monaco remount behaviour on text-file switching is acceptable.

Important Files Changed

Filename	Overview
src/renderer/features/tasks/diff-view/main-panel/file-diff-view.tsx	Adds a composite key prop (workspaceId:group:path) to the wrapper div so React fully remounts all child components (including ImageDiffView and StickyDiffEditor) whenever the active file changes, resetting any stale local state.

Sequence Diagram

sequenceDiagram
    participant User
    participant FileDiffView
    participant ReactDOM
    participant ImageDiffView
    participant StickyDiffEditor

    User->>FileDiffView: Select a new file
    Note over FileDiffView: activeFileKey changes (workspaceId:group:path)
    FileDiffView->>ReactDOM: Render div with new key
    ReactDOM->>ImageDiffView: Unmount (old key)
    ReactDOM->>StickyDiffEditor: Unmount (old key)
    Note over ImageDiffView,StickyDiffEditor: Internal state cleared
    ReactDOM->>StickyDiffEditor: Remount (new key)
    ReactDOM->>ImageDiffView: Remount (new key)
    Note over ImageDiffView: Image diff preview reset

Loading

Prompt To Fix All With AI

Fix the following 1 code review issue. Work through them one at a time, proposing concise fixes.

---

### Issue 1 of 1
src/renderer/features/tasks/diff-view/main-panel/file-diff-view.tsx:182
**StickyDiffEditor also remounts on every file switch**

The `key` is placed on the shared wrapper div, so `StickyDiffEditor` is fully unmounted and remounted on each active-file change — not just `ImageDiffView`. Previously the text diff editor updated reactively through prop changes (`originalUri` / `modifiedUri`). After this change it tears down and rebuilds the Monaco editor instance on every file selection. This resets scroll position and editor-local state (likely desired) but also introduces a brief blank state while Monaco reinitialises. If only the image preview needed resetting, scoping the key directly to `ImageDiffView` would avoid this cost on the text-diff path.

_{Reviews (1): Last reviewed commit: "fix: reset image diff preview on file ch..." | Re-trigger Greptile}

[greptile-apps]

StickyDiffEditor also remounts on every file switch

The key is placed on the shared wrapper div, so StickyDiffEditor is fully unmounted and remounted on each active-file change — not just ImageDiffView. Previously the text diff editor updated reactively through prop changes (originalUri / modifiedUri). After this change it tears down and rebuilds the Monaco editor instance on every file selection. This resets scroll position and editor-local state (likely desired) but also introduces a brief blank state while Monaco reinitialises. If only the image preview needed resetting, scoping the key directly to ImageDiffView would avoid this cost on the text-diff path.

Prompt To Fix With AI

This is a comment left during a code review.
Path: src/renderer/features/tasks/diff-view/main-panel/file-diff-view.tsx
Line: 182

Comment:
**StickyDiffEditor also remounts on every file switch**

The `key` is placed on the shared wrapper div, so `StickyDiffEditor` is fully unmounted and remounted on each active-file change — not just `ImageDiffView`. Previously the text diff editor updated reactively through prop changes (`originalUri` / `modifiedUri`). After this change it tears down and rebuilds the Monaco editor instance on every file selection. This resets scroll position and editor-local state (likely desired) but also introduces a brief blank state while Monaco reinitialises. If only the image preview needed resetting, scoping the key directly to `ImageDiffView` would avoid this cost on the text-diff path.

How can I resolve this? If you propose a fix, please make it concise.