From a0f2439b1f43b384eecb855d798412be7e17823f Mon Sep 17 00:00:00 2001
From: Silvano Cerza <silvanocerza@gmail.com>
Date: Thu, 20 Feb 2025 18:36:38 +0100
Subject: [PATCH] Handle action gutter buttons click

---
 .../conflicts-resolution/actions-gutter.tsx   | 30 ++++----
 src/views/conflicts-resolution/component.tsx  | 70 ++++++++++++++++++-
 2 files changed, 80 insertions(+), 20 deletions(-)

diff --git a/src/views/conflicts-resolution/actions-gutter.tsx b/src/views/conflicts-resolution/actions-gutter.tsx
index 7c80e06..74d01ae 100644
--- a/src/views/conflicts-resolution/actions-gutter.tsx
+++ b/src/views/conflicts-resolution/actions-gutter.tsx
@@ -11,11 +11,17 @@ interface ActionsGutterProps {
   // This is essential to correctly draw the lines between
   // the left and right editor
   lineHeight: number;
+  onAcceptLeft: (chunk: DiffChunk) => void;
+  onAcceptRight: (chunk: DiffChunk) => void;
+  onReject: (chunk: DiffChunk) => void;
 }
 
 const ActionsGutter: React.FC<ActionsGutterProps> = ({
   diffChunks,
   lineHeight,
+  onAcceptLeft,
+  onAcceptRight,
+  onReject,
 }) => {
   const [actualWidth, setActualWidth] = React.useState(0);
   const containerRef = React.useRef<HTMLDivElement>(null);
@@ -55,15 +61,11 @@ const ActionsGutter: React.FC<ActionsGutterProps> = ({
           <div style={{ display: "flex", flexDirection: "row" }}>
             <ButtonCross
               tooltipText="Delete lines"
-              onClick={() => {
-                console.log("CLICKED");
-              }}
+              onClick={() => onReject(chunk)}
             />
             <ButtonLeftArrow
               tooltipText="Add lines"
-              onClick={() => {
-                console.log("CLICKED");
-              }}
+              onClick={() => onAcceptLeft(chunk)}
             />
           </div>
         </foreignObject>
@@ -79,15 +81,11 @@ const ActionsGutter: React.FC<ActionsGutterProps> = ({
           <div style={{ display: "flex", flexDirection: "row" }}>
             <ButtonRightArrow
               tooltipText="Add lines"
-              onClick={() => {
-                console.log("CLICKED");
-              }}
+              onClick={() => onAcceptRight(chunk)}
             />
             <ButtonCross
               tooltipText="Delete lines"
-              onClick={() => {
-                console.log("CLICKED");
-              }}
+              onClick={() => onReject(chunk)}
             />
           </div>
         </foreignObject>
@@ -109,15 +107,11 @@ const ActionsGutter: React.FC<ActionsGutterProps> = ({
           >
             <ButtonRightArrow
               tooltipText="Overwrite right lines"
-              onClick={() => {
-                console.log("CLICKED");
-              }}
+              onClick={() => onAcceptRight(chunk)}
             />
             <ButtonLeftArrow
               tooltipText="Overwrite left lines"
-              onClick={() => {
-                console.log("CLICKED");
-              }}
+              onClick={() => onAcceptLeft(chunk)}
             />
           </div>
         </foreignObject>
diff --git a/src/views/conflicts-resolution/component.tsx b/src/views/conflicts-resolution/component.tsx
index 885c58a..0700545 100644
--- a/src/views/conflicts-resolution/component.tsx
+++ b/src/views/conflicts-resolution/component.tsx
@@ -2,7 +2,7 @@ import { useEffect, useRef, useState } from "react";
 import { EditorView } from "@codemirror/view";
 import { EditorState } from "@codemirror/state";
 import { markdown } from "@codemirror/lang-markdown";
-import diff from "./diff";
+import diff, { DiffChunk } from "./diff";
 import { createDiffHighlightPlugin } from "./diff-highlight-plugin";
 import EditorPane from "./editor-pane";
 import ActionsGutter from "./actions-gutter";
@@ -65,7 +65,73 @@ const DiffView: React.FC<DiffViewProps> = ({
         />
       </div>
       <div style={{ minWidth: "160px", width: "auto" }}>
-        <ActionsGutter diffChunks={diffs} lineHeight={lineHeight} />
+        <ActionsGutter
+          diffChunks={diffs}
+          lineHeight={lineHeight}
+          onAcceptLeft={(chunk: DiffChunk) => {
+            if (chunk.type === "add") {
+              const oldLines = oldText.split("\n");
+              oldLines.splice(
+                chunk.startLeftLine - 1,
+                0,
+                ...newText
+                  .split("\n")
+                  .slice(chunk.startRightLine - 1, chunk.endRightLine - 1),
+              );
+              onOldTextChange(oldLines.join("\n"));
+            } else if (chunk.type === "modify") {
+              const oldLines = oldText.split("\n");
+              oldLines.splice(
+                chunk.startLeftLine - 1,
+                chunk.endLeftLine - chunk.startLeftLine,
+                ...newText
+                  .split("\n")
+                  .slice(chunk.startRightLine - 1, chunk.endRightLine - 1),
+              );
+              onOldTextChange(oldLines.join("\n"));
+            }
+          }}
+          onAcceptRight={(chunk: DiffChunk) => {
+            if (chunk.type === "remove") {
+              const newLines = newText.split("\n");
+              newLines.splice(
+                chunk.startRightLine - 1,
+                0,
+                ...oldText
+                  .split("\n")
+                  .slice(chunk.startLeftLine - 1, chunk.endLeftLine - 1),
+              );
+              onNewTextChange(newLines.join("\n"));
+            } else if (chunk.type === "modify") {
+              const newLines = newText.split("\n");
+              newLines.splice(
+                chunk.startRightLine - 1,
+                chunk.endRightLine - chunk.startRightLine,
+                ...oldText
+                  .split("\n")
+                  .slice(chunk.startLeftLine - 1, chunk.endLeftLine - 1),
+              );
+              onNewTextChange(newLines.join("\n"));
+            }
+          }}
+          onReject={(chunk: DiffChunk) => {
+            if (chunk.type === "add") {
+              const newLines = newText.split("\n");
+              newLines.splice(
+                chunk.startRightLine - 1,
+                chunk.endRightLine - chunk.startRightLine,
+              );
+              onNewTextChange(newLines.join("\n"));
+            } else if (chunk.type === "remove") {
+              const oldLines = oldText.split("\n");
+              oldLines.splice(
+                chunk.startLeftLine - 1,
+                chunk.endLeftLine - chunk.startLeftLine,
+              );
+              onOldTextChange(oldLines.join("\n"));
+            }
+          }}
+        />
       </div>
       <div style={{ flex: 1, overflow: "hidden" }}>
         <EditorPane