Add warning modal for irreversible merge options

In a later version this merge options could be make reversible

src/components/differences_view.ts

@@ -116,7 +116,10 @@ export class DifferencesView extends ItemView {
 		container: HTMLDivElement,
 		difference: Difference
 	): void {
-		const triggerRebuild = (): Promise<void> => this.onOpen()
+		const triggerRebuild = async (): Promise<void> => {
+			await this.updateState()
+			this.build()
+		}
 
 		if (this.showMergeOption) {
 			new ActionLine({

src/components/modals/risky_action_modal.ts

@@ -0,0 +1,38 @@
+import { Modal } from 'obsidian'
+
+export class RiskyActionModal extends Modal {
+	constructor(args: { onAccept: (error: Error | null) => void }) {
+		super(app)
+		this.onAccept = args.onAccept
+	}
+
+	private readonly onAccept: (error: Error | null) => void
+
+	onOpen(): void {
+		// Counteract gravity pull by moving box up for balanced composition
+		this.modalEl.addClass('mb-16')
+
+		this.contentEl.createEl('h2', { text: `Do you accept the risk?` })
+		this.contentEl.createEl('p', {
+			text:
+				`The merging options alter the files irreversibly. ` +
+				`Proceed with caution and only if you are aware and ` +
+				`accepting of the associated risks.`,
+		})
+
+		const buttonContainer = this.contentEl.createDiv('button-container')
+		const cancelButton = buttonContainer.createEl('button', {
+			text: 'Cancel',
+			cls: 'mr-8',
+		})
+		cancelButton.addEventListener('click', () => this.close())
+		const deleteButton = buttonContainer.createEl('button', {
+			text: 'Accept Risk',
+			cls: 'button-danger',
+		})
+		deleteButton.addEventListener('click', () => {
+			this.close()
+			this.onAccept(null)
+		})
+	}
+}

src/main.ts

@@ -1,9 +1,12 @@
 import { Plugin, TFile } from 'obsidian'
 
 import { DifferencesView } from './components/differences_view'
+import { RiskyActionModal } from './components/modals/risky_action_modal'
 import { SelectFileModal } from './components/modals/select_file_modal'
 
 export default class FileDiffPlugin extends Plugin {
+	fileDiffMergeWarningKey = 'file-diff-merge-warning'
+
 	onload(): void {
 		this.addCommand({
 			id: 'file-diff',
@@ -38,8 +41,13 @@ export default class FileDiffPlugin extends Plugin {
 			id: 'file-diff-merge',
 			name: 'Compare and merge',
 			editorCallback: async () => {
-				// TODO(tillf): Show warning when the user selects this option
-				//              for the first time
+				// Show warning when this option is selected for the first time
+				if (!localStorage.getItem(this.fileDiffMergeWarningKey)) {
+					this.showRiskyActionModal()
+					if (!localStorage.getItem(this.fileDiffMergeWarningKey)) {
+						return
+					}
+				}
 
 				// Get current active file
 				const activeFile = this.app.workspace.getActiveFile()
@@ -85,4 +93,22 @@ export default class FileDiffPlugin extends Plugin {
 			}).open()
 		})
 	}
+
+	showRiskyActionModal(): Promise<void> {
+		return new Promise((resolve, reject) => {
+			new RiskyActionModal({
+				onAccept: (e: Error | null) => {
+					if (e) {
+						reject(e)
+					} else {
+						localStorage.setItem(
+							this.fileDiffMergeWarningKey,
+							'true'
+						)
+						resolve()
+					}
+				},
+			}).open()
+		})
+	}
 }