edit
This commit is contained in:
@@ -0,0 +1,356 @@
|
||||
<script lang="ts">
|
||||
import { untrack } from "svelte";
|
||||
import { AlertCircle, Check, LoaderCircle, X } from "@lucide/svelte";
|
||||
import type { ConflictChoice, ConflictFile, ConflictPart, GitFileStatus, PreparedResolution } from "../types";
|
||||
|
||||
interface Props {
|
||||
conflictedFiles: GitFileStatus[];
|
||||
conflictTarget: string;
|
||||
conflict: ConflictFile | null;
|
||||
preparedResolutions: Record<string, PreparedResolution>;
|
||||
isBusy: boolean;
|
||||
operation: string;
|
||||
onClose: () => void;
|
||||
onSelectFile: (path: string) => void;
|
||||
onMarkResolved: (path: string, resolution: PreparedResolution) => void;
|
||||
onApply: () => void;
|
||||
}
|
||||
|
||||
let {
|
||||
conflictedFiles = [],
|
||||
conflictTarget = "",
|
||||
conflict = null,
|
||||
preparedResolutions = {},
|
||||
isBusy = false,
|
||||
operation = "",
|
||||
onClose = () => {},
|
||||
onSelectFile = () => {},
|
||||
onMarkResolved = () => {},
|
||||
onApply = () => {},
|
||||
}: Props = $props();
|
||||
|
||||
let conflictParts = $derived<ConflictPart[]>(
|
||||
conflict && !conflict.binary ? parseConflicts(conflict.content) : [],
|
||||
);
|
||||
let conflictChoices = $state<(ConflictChoice | null)[]>([]);
|
||||
let resolveContent = $state("");
|
||||
let manualMode = $state(false);
|
||||
let binarySide = $state<"ours" | "theirs" | null>(null);
|
||||
|
||||
$effect(() => {
|
||||
const c = conflict;
|
||||
const target = conflictTarget;
|
||||
const parts = conflictParts;
|
||||
|
||||
untrack(() => {
|
||||
if (!c) {
|
||||
conflictChoices = [];
|
||||
resolveContent = "";
|
||||
manualMode = false;
|
||||
binarySide = null;
|
||||
return;
|
||||
}
|
||||
|
||||
const prepared = preparedResolutions[target];
|
||||
|
||||
if (c.binary) {
|
||||
conflictChoices = [];
|
||||
resolveContent = "";
|
||||
manualMode = false;
|
||||
binarySide = prepared?.kind === "side" ? prepared.side : null;
|
||||
return;
|
||||
}
|
||||
|
||||
binarySide = null;
|
||||
conflictChoices = parts.filter((p) => p.kind === "conflict").map(() => null);
|
||||
|
||||
if (prepared?.kind === "content") {
|
||||
resolveContent = prepared.content;
|
||||
manualMode = true;
|
||||
} else {
|
||||
resolveContent = c.content;
|
||||
manualMode = false;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
let conflictRegionCount = $derived(conflictParts.filter((p) => p.kind === "conflict").length);
|
||||
let unresolvedCount = $derived(manualMode ? 0 : conflictChoices.filter((c) => c == null).length);
|
||||
let resolvedContent = $derived(manualMode ? resolveContent : buildResolution(conflictParts, conflictChoices));
|
||||
let resolveHasMarkers = $derived(/^<{7}/m.test(resolvedContent) || /^>{7}/m.test(resolvedContent));
|
||||
let preparedCount = $derived(Object.keys(preparedResolutions).length);
|
||||
let currentPrepared = $derived(conflictTarget.length > 0 && preparedResolutions[conflictTarget] != null);
|
||||
let canMarkResolved = $derived(!!conflict && !isBusy && (conflict.binary ? binarySide != null : !resolveHasMarkers));
|
||||
|
||||
function parseConflicts(content: string): ConflictPart[] {
|
||||
const lines = content.split("\n");
|
||||
const parts: ConflictPart[] = [];
|
||||
let textLines: string[] = [];
|
||||
let regionIndex = 0;
|
||||
let index = 0;
|
||||
|
||||
const flushText = () => {
|
||||
if (textLines.length > 0) { parts.push({ kind: "text", lines: textLines }); textLines = []; }
|
||||
};
|
||||
|
||||
while (index < lines.length) {
|
||||
const line = lines[index];
|
||||
if (line.startsWith("<<<<<<<")) {
|
||||
flushText(); index++;
|
||||
const oursLines: string[] = [];
|
||||
while (index < lines.length && !lines[index].startsWith("=======") && !lines[index].startsWith("|||||||")) oursLines.push(lines[index++]);
|
||||
if (index < lines.length && lines[index].startsWith("|||||||")) { index++; while (index < lines.length && !lines[index].startsWith("=======")) index++; }
|
||||
if (index < lines.length && lines[index].startsWith("=======")) index++;
|
||||
const theirsLines: string[] = [];
|
||||
while (index < lines.length && !lines[index].startsWith(">>>>>>>")) theirsLines.push(lines[index++]);
|
||||
if (index < lines.length && lines[index].startsWith(">>>>>>>")) index++;
|
||||
parts.push({ kind: "conflict", index: regionIndex++, oursLines, theirsLines });
|
||||
} else { textLines.push(line); index++; }
|
||||
}
|
||||
flushText();
|
||||
return parts;
|
||||
}
|
||||
|
||||
function buildResolution(parts: ConflictPart[], choices: (ConflictChoice | null)[]): string {
|
||||
const out: string[] = [];
|
||||
for (const part of parts) {
|
||||
if (part.kind === "text") { out.push(...part.lines); continue; }
|
||||
const choice = choices[part.index];
|
||||
if (choice === "ours") out.push(...part.oursLines);
|
||||
else if (choice === "theirs") out.push(...part.theirsLines);
|
||||
else if (choice === "both-ot") out.push(...part.oursLines, ...part.theirsLines);
|
||||
else if (choice === "both-to") out.push(...part.theirsLines, ...part.oursLines);
|
||||
else out.push("<<<<<<< current", ...part.oursLines, "=======", ...part.theirsLines, ">>>>>>> incoming");
|
||||
}
|
||||
return out.join("\n");
|
||||
}
|
||||
|
||||
function setConflictChoice(index: number, choice: ConflictChoice) {
|
||||
const next = [...conflictChoices];
|
||||
next[index] = choice;
|
||||
conflictChoices = next;
|
||||
}
|
||||
|
||||
function setAllConflicts(choice: ConflictChoice) {
|
||||
conflictChoices = conflictParts.filter((p) => p.kind === "conflict").map(() => choice);
|
||||
}
|
||||
|
||||
function enableManualEdit() {
|
||||
resolveContent = buildResolution(conflictParts, conflictChoices);
|
||||
manualMode = true;
|
||||
}
|
||||
|
||||
function oursActive(choice: ConflictChoice | null): boolean {
|
||||
return choice === "ours" || choice === "both-ot" || choice === "both-to";
|
||||
}
|
||||
|
||||
function theirsActive(choice: ConflictChoice | null): boolean {
|
||||
return choice === "theirs" || choice === "both-ot" || choice === "both-to";
|
||||
}
|
||||
|
||||
function displayLine(line: string): string {
|
||||
return line.replace(/\r$/, "");
|
||||
}
|
||||
|
||||
function formatBytes(size: number | null): string {
|
||||
if (size == null) return "missing";
|
||||
if (size < 1024) return `${size} B`;
|
||||
if (size < 1024 * 1024) return `${(size / 1024).toFixed(1)} KB`;
|
||||
return `${(size / (1024 * 1024)).toFixed(1)} MB`;
|
||||
}
|
||||
|
||||
function handleMarkResolved() {
|
||||
if (!conflict || !conflictTarget || !canMarkResolved) return;
|
||||
const prepared: PreparedResolution = conflict.binary
|
||||
? { kind: "side", side: binarySide as "ours" | "theirs" }
|
||||
: { kind: "content", content: resolvedContent };
|
||||
onMarkResolved(conflictTarget, prepared);
|
||||
}
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="dialog-backdrop"
|
||||
role="presentation"
|
||||
onclick={(e) => { if (e.target === e.currentTarget) onClose(); }}
|
||||
>
|
||||
<div
|
||||
class="dialog"
|
||||
style="grid-template-rows: auto minmax(0,1fr) auto;"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-label="Resolve merge conflicts"
|
||||
tabindex="-1"
|
||||
>
|
||||
<header class="dialog-header">
|
||||
<div>
|
||||
<span class="eyebrow">Resolve</span>
|
||||
<h2 class="dialog-title">Merge conflicts</h2>
|
||||
</div>
|
||||
<button class="dialog-close" type="button" onclick={onClose} title="Close">
|
||||
<X size={18} aria-hidden="true" />
|
||||
</button>
|
||||
</header>
|
||||
|
||||
{#if conflictedFiles.length === 0}
|
||||
<div class="blank-state">All conflicts resolved. You can commit the merge now.</div>
|
||||
{:else}
|
||||
<div class="dialog-body">
|
||||
<aside class="dialog-files" aria-label="Conflicted files">
|
||||
{#each conflictedFiles as file (file.path)}
|
||||
<button
|
||||
class="dialog-file-row"
|
||||
class:active={conflictTarget === file.path}
|
||||
class:prepared={preparedResolutions[file.path] != null}
|
||||
type="button"
|
||||
onclick={() => onSelectFile(file.path)}
|
||||
disabled={isBusy}
|
||||
title={file.path}
|
||||
>
|
||||
<span class={`status-badge ${preparedResolutions[file.path] ? "added" : "conflicted"}`}>
|
||||
{preparedResolutions[file.path] ? "ready" : "conflicted"}
|
||||
</span>
|
||||
<strong>{file.path}</strong>
|
||||
{#if preparedResolutions[file.path]}
|
||||
<Check size={15} aria-hidden="true" />
|
||||
{/if}
|
||||
</button>
|
||||
{/each}
|
||||
</aside>
|
||||
|
||||
<div class="resolve-editor" aria-label="Conflict editor">
|
||||
{#if !conflict}
|
||||
<div class="blank-state">Select a file to resolve.</div>
|
||||
{:else if conflict.binary}
|
||||
<div class="resolve-binary">
|
||||
<div class="resolve-binary-note">
|
||||
<AlertCircle size={16} aria-hidden="true" />
|
||||
<span>Binary file — pick which version to keep, then mark it resolved.</span>
|
||||
</div>
|
||||
<div class="resolve-binary-options">
|
||||
<button
|
||||
class="resolve-binary-card ours"
|
||||
class:active={binarySide === "ours"}
|
||||
type="button"
|
||||
onclick={() => { binarySide = "ours"; }}
|
||||
disabled={isBusy || conflict.ours_size == null}
|
||||
>
|
||||
<span class="resolve-side-label">Current (ours)</span>
|
||||
<strong>{formatBytes(conflict.ours_size)}</strong>
|
||||
<span class="resolve-binary-hint">{conflict.ours_size == null ? "Deleted on this side" : "Keep this version"}</span>
|
||||
</button>
|
||||
<button
|
||||
class="resolve-binary-card theirs"
|
||||
class:active={binarySide === "theirs"}
|
||||
type="button"
|
||||
onclick={() => { binarySide = "theirs"; }}
|
||||
disabled={isBusy || conflict.theirs_size == null}
|
||||
>
|
||||
<span class="resolve-side-label">Incoming (theirs)</span>
|
||||
<strong>{formatBytes(conflict.theirs_size)}</strong>
|
||||
<span class="resolve-binary-hint">{conflict.theirs_size == null ? "Deleted on this side" : "Keep this version"}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="resolve-actions">
|
||||
<span class="resolve-path" title={conflictTarget}>{conflictTarget}</span>
|
||||
{#if currentPrepared}
|
||||
<span class="prepared-tag"><Check size={14} aria-hidden="true" /> Prepared</span>
|
||||
{/if}
|
||||
<button type="button" onclick={handleMarkResolved} disabled={!canMarkResolved}>
|
||||
<Check size={16} aria-hidden="true" />
|
||||
{currentPrepared ? "Update decision" : "Mark as resolved"}
|
||||
</button>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="resolve-toolbar">
|
||||
{#if manualMode}
|
||||
<button type="button" onclick={() => { manualMode = false; }} disabled={isBusy}>Back to guided</button>
|
||||
{:else}
|
||||
<span class="resolve-toolbar-label">Apply to all:</span>
|
||||
<button type="button" onclick={() => setAllConflicts("ours")} disabled={isBusy}>Current</button>
|
||||
<button type="button" onclick={() => setAllConflicts("theirs")} disabled={isBusy}>Incoming</button>
|
||||
<button type="button" onclick={() => setAllConflicts("both-ot")} disabled={isBusy}>Both</button>
|
||||
<button type="button" onclick={enableManualEdit} disabled={isBusy}>Edit manually</button>
|
||||
{/if}
|
||||
<span class="resolve-status">
|
||||
{#if unresolvedCount > 0}
|
||||
<AlertCircle size={14} aria-hidden="true" />
|
||||
{unresolvedCount} of {conflictRegionCount} unresolved
|
||||
{:else if resolveHasMarkers}
|
||||
<AlertCircle size={14} aria-hidden="true" />
|
||||
Conflict markers still present
|
||||
{:else}
|
||||
<Check size={14} aria-hidden="true" />
|
||||
{conflictRegionCount} {conflictRegionCount === 1 ? "conflict" : "conflicts"} resolved
|
||||
{/if}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{#if manualMode}
|
||||
<textarea
|
||||
class="resolve-textarea"
|
||||
bind:value={resolveContent}
|
||||
spellcheck="false"
|
||||
disabled={isBusy}
|
||||
></textarea>
|
||||
{:else}
|
||||
<div class="resolve-structured">
|
||||
{#each conflictParts as part, partIndex (partIndex)}
|
||||
{#if part.kind === "text"}
|
||||
{#if part.lines.length > 0}
|
||||
<pre class="resolve-context">{#each part.lines as line}<span class="resolve-line context">{displayLine(line) || " "}</span>{/each}</pre>
|
||||
{/if}
|
||||
{:else}
|
||||
<div class="resolve-conflict" class:unresolved={conflictChoices[part.index] == null}>
|
||||
<div class="resolve-conflict-bar">
|
||||
<span class="resolve-conflict-label">Conflict {part.index + 1}</span>
|
||||
<div class="resolve-choice-buttons">
|
||||
<button type="button" class:active={conflictChoices[part.index] === "ours"} onclick={() => setConflictChoice(part.index, "ours")} disabled={isBusy}>Current</button>
|
||||
<button type="button" class:active={conflictChoices[part.index] === "theirs"} onclick={() => setConflictChoice(part.index, "theirs")} disabled={isBusy}>Incoming</button>
|
||||
<button type="button" class:active={conflictChoices[part.index] === "both-ot"} onclick={() => setConflictChoice(part.index, "both-ot")} disabled={isBusy} title="Both — current first">Both C+I</button>
|
||||
<button type="button" class:active={conflictChoices[part.index] === "both-to"} onclick={() => setConflictChoice(part.index, "both-to")} disabled={isBusy} title="Both — incoming first">Both I+C</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="resolve-side ours" class:dimmed={!oursActive(conflictChoices[part.index])}>
|
||||
<span class="resolve-side-label">Current (ours)</span>
|
||||
<pre class="resolve-lines">{#each part.oursLines as line}<span class="resolve-line ours">{displayLine(line) || " "}</span>{/each}</pre>
|
||||
</div>
|
||||
<div class="resolve-side theirs" class:dimmed={!theirsActive(conflictChoices[part.index])}>
|
||||
<span class="resolve-side-label">Incoming (theirs)</span>
|
||||
<pre class="resolve-lines">{#each part.theirsLines as line}<span class="resolve-line theirs">{displayLine(line) || " "}</span>{/each}</pre>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="resolve-actions">
|
||||
<span class="resolve-path" title={conflictTarget}>{conflictTarget}</span>
|
||||
{#if currentPrepared}
|
||||
<span class="prepared-tag"><Check size={14} aria-hidden="true" /> Prepared</span>
|
||||
{/if}
|
||||
<button type="button" onclick={handleMarkResolved} disabled={!canMarkResolved}>
|
||||
<Check size={16} aria-hidden="true" />
|
||||
{currentPrepared ? "Update decision" : "Mark as resolved"}
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="dialog-footer">
|
||||
<span class="dialog-footer-info">{preparedCount} of {conflictedFiles.length} prepared</span>
|
||||
<button class="btn-primary" type="button" onclick={onApply} disabled={isBusy || preparedCount === 0}>
|
||||
{#if operation.startsWith("Resolving")}
|
||||
<LoaderCircle class="spin" size={16} aria-hidden="true" />
|
||||
{:else}
|
||||
<Check size={16} aria-hidden="true" />
|
||||
{/if}
|
||||
Apply {preparedCount} resolved
|
||||
</button>
|
||||
</footer>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user