File Conflict Dialog Block for React

So you can see it without a click. On load the alert is a copy drawn in place over the folder: a native dialog element with the alertdialog role that isn't modal, so nothing is trapped, hidden or focused, and the page around the preview keeps working. The Resolve conflicts button opens the real Alert Dialog, modal, with its focus trap, Escape and focus on Cancel, and the copy stays closed until a reload. Both show the same ConflictFields component and share the block's state, so an answer picked in the copy is there in the real one. In your app keep the Alert Dialog and drop the copy: the "in-place" state, the scrim and the dialog element inside the frame.

Keep both leaves two files: the Syncbarn copy keeps its name and this computer's is saved as "name (conflict).xlsx" beside it, so nothing is lost. Use this computer's and Use Syncbarn's replace the other copy, and each row says which one is overwritten. Skip this one leaves the file in conflict and moves it to the end of the line, so the count does not drop. Keep both is the answer chosen on every conflict, since it is the one that cannot lose work. Apply to all answers every conflict still waiting with the chosen answer; with Skip it closes and leaves them.

Here it takes the file out of the list of conflicts, loads the next one, clears its mark on the drawn tile, counts the sync bar down and says in a polite status message what was kept and that nothing was synced. The five files, their times, sizes and edited rows are typed in CONFLICTS. In your app send the answer to your sync engine in resolve, keep the button busy until it confirms, and drop the file from the list only on success; show a failure in the alert and keep the file in conflict.

Side by side, with the same facts in the same places: the time in a time element, the size, the person who saved it, and a drawn sheet of six rows where the rows that copy changed are shaded, with the count in words ("2 rows edited") so the shading is never the only signal. In your app draw the sheet from a real diff, or swap it for a text diff or a thumbnail; keep the facts, since people choose by who and when.

The real alert is named by its title and described by its sentence, and it opens with focus on Cancel, so a stray Enter backs out. Escape and Cancel close it and return focus to Resolve conflicts; clicking outside does not close it, since a conflict has to be answered. Cancel is the focus target through initialFocus. The answers are native radio buttons in one group, so the arrow keys move between them. Once the last conflict is settled the button that opened the alert becomes All in sync, and focus moves to it. The copy shown on load moves no focus.

The copy shown on load docks to the foot of the page as a bottom sheet, its actions pinned at the bottom with Cancel under Resolve, and the cells and the answers scroll above them, one column each. The real alert keeps the Alert Dialog's own layout: a card as wide as the screen allows.