Pt 3897 replace preview

[katherinejensen00]

https://paratextstudio.atlassian.net/browse/PT-3897

• Create a replace preview view options picker as per this V0: https://v0.app/chat/preview-options-picker-s08sC9IIAfJ
• Fix history (I broke it when I implemented auto search)
• Fix some styling that Sebastian pointed out
• Improve keyboard navigation so the editor navigates to the reference without losing the cursor to the editor

Demo Video (had to zip it because it was just a little bit over the size limit for files):
replace-preview-options-picker.zip

---

This change is 

---

[devin-ai-integration]

Devin Review found 1 new potential issue.

View 20 additional findings in Devin Review.

[devin-ai-integration]

🟡 Effect cleanup writes stale search term to project settings on every keystroke

The cleanup function of the search-term persistence effect fires on every searchTerm change (since searchTerm is a dependency). Each cleanup invocation immediately writes the previous search term value to the project setting via setLastSearchTermSetting?.(searchTerm), because the closure captures the value from the previous render. For a user typing "hello", this produces the write sequence: "h", "he", "hel", "hell", then after 1 second "hello" — four unnecessary project-setting writes per word. Since setLastSearchTermSetting writes to a useProjectSetting-backed store (likely involving network/IPC), this creates unnecessary I/O on every keystroke.

Trace of the issue

When searchTerm changes from "a" to "ab":

1. React runs cleanup from the previous effect: setLastSearchTermSetting?.("a") — immediate write of stale value
2. React runs the new effect: sets a 1-second timeout for "ab"
3. 1 second later: setLastSearchTermSetting?.("ab") — final correct value

The cleanup should only clear the timeout; the eager write should be limited to unmount.

---

Was this helpful? React with 👍 or 👎 to provide feedback.