yaak/src-web/components/git/diverged.tsx

import type { DivergedStrategy } from "@yaakapp-internal/git";
import { useState } from "react";
import { showDialog } from "../../lib/dialog";
import { Button } from "../core/Button";
import { InlineCode } from "../core/InlineCode";
import { RadioCards } from "../core/RadioCards";
import { HStack } from "../core/Stacks";

type Resolution = "force_reset" | "merge";

const resolutionLabel: Record<Resolution, string> = {
  force_reset: "Force Pull",
  merge: "Merge",
};

interface DivergedDialogProps {
  remote: string;
  branch: string;
  onResult: (strategy: DivergedStrategy) => void;
  onHide: () => void;
}

function DivergedDialog({ remote, branch, onResult, onHide }: DivergedDialogProps) {
  const [selected, setSelected] = useState<Resolution | null>(null);

  const handleSubmit = () => {
    if (selected == null) return;
    onResult(selected);
    onHide();
  };

  const handleCancel = () => {
    onResult("cancel");
    onHide();
  };

  return (
    <div className="flex flex-col gap-4 mb-4">
      <p className="text-text-subtle">
        Your local branch has diverged from{" "}
        <InlineCode>
          {remote}/{branch}
        </InlineCode>
        . How would you like to resolve this?
      </p>
      <RadioCards
        name="diverged-strategy"
        value={selected}
        onChange={setSelected}
        options={[
          {
            value: "merge",
            label: "Merge Commit",
            description: "Combining local and remote changes into a single merge commit",
          },
          {
            value: "force_reset",
            label: "Force Pull",
            description: "Discard local commits and reset to match the remote branch",
          },
        ]}
      />
      <HStack space={2} justifyContent="start" className="flex-row-reverse">
        <Button
          color={selected === "force_reset" ? "danger" : "primary"}
          disabled={selected == null}
          onClick={handleSubmit}
        >
          {selected != null ? resolutionLabel[selected] : "Select an option"}
        </Button>
        <Button variant="border" onClick={handleCancel}>
          Cancel
        </Button>
      </HStack>
    </div>
  );
}

export async function promptDivergedStrategy({
  remote,
  branch,
}: {
  remote: string;
  branch: string;
}): Promise<DivergedStrategy> {
  return new Promise((resolve) => {
    showDialog({
      id: "git-diverged",
      title: "Branches Diverged",
      hideX: true,
      size: "sm",
      disableBackdropClose: true,
      onClose: () => resolve("cancel"),
      render: ({ hide }) =>
        DivergedDialog({
          remote,
          branch,
          onHide: hide,
          onResult: resolve,
        }),
    });
  });
}