Christoph Brandau
24201c1302
Introduces granular control over diff operations by enabling users to select individual lines within a hunk. This refactors the core logic across multiple components, allowing for precise staging, unstaging, or discarding of specific changes rather than operating on entire hunks. The UI now features dedicated controls and visual feedback for line-level selection. - Refactored patch parsing to track selected line IDs and calculate range information. - Updated the diff view CSS and component structure to display interactive line selection bars. - Extended action dialogs to support confirming operations on selected lines.
88 lines
3.1 KiB
Svelte
88 lines
3.1 KiB
Svelte
<script lang="ts">
|
|
import { AlertTriangle, LoaderCircle, RotateCcw, X } from "@lucide/svelte";
|
|
import type { GitFileStatus } from "../types";
|
|
|
|
interface Props {
|
|
files: GitFileStatus[];
|
|
staged: boolean | null;
|
|
scope: "file" | "hunk" | "lines";
|
|
isBusy: boolean;
|
|
onConfirm: () => void | Promise<void>;
|
|
onClose: () => void;
|
|
}
|
|
|
|
let {
|
|
files,
|
|
staged = false,
|
|
scope = "file",
|
|
isBusy = false,
|
|
onConfirm = () => {},
|
|
onClose = () => {},
|
|
}: Props = $props();
|
|
|
|
function targetPath(file: GitFileStatus): string {
|
|
return file.old_path ? `${file.old_path} -> ${file.path}` : file.path;
|
|
}
|
|
|
|
let count = $derived(files.length);
|
|
let title = $derived(
|
|
scope === "hunk" ? "Discard hunk?" : scope === "lines" ? "Discard selected lines?" : count > 1 ? `Discard changes in ${count} files?` : "Discard file changes?"
|
|
);
|
|
let scopeLabel = $derived(scope === "hunk" ? "selected hunk" : scope === "lines" ? "selected lines" : count > 1 ? `${count} files` : "file");
|
|
let sourceLabel = $derived(staged === null ? "staged and unstaged changes" : staged ? "staged changes" : "unstaged changes");
|
|
|
|
</script>
|
|
|
|
<div class="dialog-backdrop" role="presentation">
|
|
<div class="dialog discard-confirm-dialog" role="dialog" aria-modal="true" aria-label={title}>
|
|
<header class="dialog-header">
|
|
<div>
|
|
<span class="eyebrow">Confirm discard</span>
|
|
<p class="dialog-title">{title}</p>
|
|
</div>
|
|
<button class="btn-sm dialog-close" type="button" onclick={onClose} disabled={isBusy} aria-label="Close">
|
|
<X size={16} aria-hidden="true" />
|
|
</button>
|
|
</header>
|
|
|
|
<div class="discard-confirm-body">
|
|
<div class="discard-warning-icon" aria-hidden="true">
|
|
<AlertTriangle size={22} />
|
|
</div>
|
|
|
|
<div class="discard-confirm-copy">
|
|
<p>
|
|
This will reset the {sourceLabel} for the {scopeLabel} below.
|
|
</p>
|
|
{#if count > 1}
|
|
<ul class="discard-target-list">
|
|
{#each files.slice(0, 8) as file (`${file.old_path ?? ""}:${file.path}`)}
|
|
<li><code class="discard-target" title={targetPath(file)}>{targetPath(file)}</code></li>
|
|
{/each}
|
|
{#if files.length > 8}
|
|
<li class="discard-target-more">+{files.length - 8} more</li>
|
|
{/if}
|
|
</ul>
|
|
{:else if count === 1}
|
|
<code class="discard-target" title={targetPath(files[0])}>{targetPath(files[0])}</code>
|
|
{/if}
|
|
<p class="discard-warning-text">
|
|
This cannot be undone. If a file only exists in your working tree, it can be deleted entirely.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<footer class="discard-confirm-actions">
|
|
<button class="btn-secondary" type="button" onclick={onClose} disabled={isBusy}>Cancel</button>
|
|
<button class="btn-danger" type="button" onclick={onConfirm} disabled={isBusy}>
|
|
{#if isBusy}
|
|
<LoaderCircle class="spin" size={15} aria-hidden="true" />
|
|
{:else}
|
|
<RotateCcw size={15} aria-hidden="true" />
|
|
{/if}
|
|
Discard
|
|
</button>
|
|
</footer>
|
|
</div>
|
|
</div>
|