Add buttons in actions gutter

src/views/conflicts-resolution/action-button.tsx

@@ -0,0 +1,59 @@
+interface ButtonProps {
+  size?: number | string;
+  tooltipText: string;
+  onClick: () => void;
+  className?: string;
+}
+
+const BaseButton: React.FC<ButtonProps & { children: React.ReactNode }> = ({
+  size = 24,
+  tooltipText,
+  onClick,
+  children,
+  className,
+}) => (
+  <div
+    style={{ padding: 0 }}
+    aria-label={tooltipText}
+    data-tooltip-position="top"
+    data-tooltip-delay="300"
+    className="clickable-icon"
+    onClick={onClick}
+  >
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      style={{
+        width: `${size}`,
+        height: `${size}`,
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+      }}
+      viewBox={`0 0 ${size} ${size}`}
+      className={className}
+    >
+      {children}
+    </svg>
+  </div>
+);
+
+export const ButtonCross: React.FC<ButtonProps> = (props) => (
+  <BaseButton {...props} className="lucide lucide-x">
+    <path d="M18 6 6 18" />
+    <path d="m6 6 12 12" />
+  </BaseButton>
+);
+
+export const ButtonLeftArrow: React.FC<ButtonProps> = (props) => (
+  <BaseButton {...props} className="lucide arrow-big-left">
+    <path d="M18 15h-6v4l-7-7 7-7v4h6v6z" />
+  </BaseButton>
+);
+
+export const ButtonRightArrow: React.FC<ButtonProps> = (props) => (
+  <BaseButton {...props} className="lucide lucide-arrow-big-right">
+    <path d="M6 9h6V5l7 7-7 7v-4H6V9z" />
+  </BaseButton>
+);

src/views/conflicts-resolution/actions-gutter.tsx

@@ -1,5 +1,10 @@
 import * as React from "react";
 import { DiffChunk } from "./diff";
+import {
+  ButtonCross,
+  ButtonLeftArrow,
+  ButtonRightArrow,
+} from "./action-button";
 
 interface ActionsGutterProps {
   diffChunks: DiffChunk[];
@@ -38,6 +43,90 @@ const ActionsGutter: React.FC<ActionsGutterProps> = ({
         : chunk.type == "remove"
           ? "var(--color-red)"
           : "var(--color-yellow)";
+    let buttons: React.JSX.Element;
+    if (chunk.type === "add") {
+      buttons = (
+        <foreignObject
+          x={actualWidth - 48}
+          y={topLeft + lineHeight / 2 - 12}
+          width="48"
+          height="24"
+        >
+          <div style={{ display: "flex", flexDirection: "row" }}>
+            <ButtonCross
+              tooltipText="Delete lines"
+              onClick={() => {
+                console.log("CLICKED");
+              }}
+            />
+            <ButtonLeftArrow
+              tooltipText="Add lines"
+              onClick={() => {
+                console.log("CLICKED");
+              }}
+            />
+          </div>
+        </foreignObject>
+      );
+    } else if (chunk.type === "remove") {
+      buttons = (
+        <foreignObject
+          x={0}
+          y={topLeft + lineHeight / 2 - 12}
+          width="48"
+          height="24"
+        >
+          <div style={{ display: "flex", flexDirection: "row" }}>
+            <ButtonRightArrow
+              tooltipText="Add lines"
+              onClick={() => {
+                console.log("CLICKED");
+              }}
+            />
+            <ButtonCross
+              tooltipText="Delete lines"
+              onClick={() => {
+                console.log("CLICKED");
+              }}
+            />
+          </div>
+        </foreignObject>
+      );
+    } else if (chunk.type === "modify") {
+      buttons = (
+        <foreignObject
+          x={0}
+          y={topLeft + lineHeight / 2 - 12}
+          width={actualWidth}
+          height="24"
+        >
+          <div
+            style={{
+              display: "flex",
+              flexDirection: "row",
+              justifyContent: "space-between",
+            }}
+          >
+            <ButtonRightArrow
+              tooltipText="Overwrite right lines"
+              onClick={() => {
+                console.log("CLICKED");
+              }}
+            />
+            <ButtonLeftArrow
+              tooltipText="Overwrite left lines"
+              onClick={() => {
+                console.log("CLICKED");
+              }}
+            />
+          </div>
+        </foreignObject>
+      );
+    } else {
+      // Just in case we add other types in the future
+      throw Error("Unknown chunk type");
+    }
+
     return (
       <g key={index}>
         <path
@@ -53,6 +142,15 @@ const ActionsGutter: React.FC<ActionsGutterProps> = ({
           stroke={color}
           strokeWidth="1"
         />
+        {buttons}
+        {/* <foreignObject
+          x={0}
+          y={topLeft + lineHeight / 2 - 12}
+          width="48"
+          height="24"
+        >
+          <div style={{ display: "flex", flexDirection: "row" }}></div>
+        </foreignObject> */}
       </g>
     );
   };