add something
This commit is contained in:
Christoph Brandau
+10
-2
@@ -95,10 +95,13 @@
|
||||
$: changedFiles = status?.files ?? [];
|
||||
$: stagedCount = status?.files.filter((f) => f.staged !== null).length ?? 0;
|
||||
$: unstagedCount = status?.files.filter((f) => f.unstaged !== null).length ?? 0;
|
||||
$: canCommit = hasRepository && stagedCount > 0 && commitMessage.trim().length > 0 && !isBusy;
|
||||
$: canCompare = hasRepository && compareFrom.length > 0 && compareTo.length > 0 && compareFrom !== compareTo && !isBusy;
|
||||
$: conflictedFiles = changedFiles.filter((f) => f.staged === "conflicted" || f.unstaged === "conflicted");
|
||||
$: hasConflicts = conflictedFiles.length > 0;
|
||||
$: canCommit = hasRepository && stagedCount > 0 && commitMessage.trim().length > 0 && !hasConflicts && !isBusy;
|
||||
$: commitBlockReason = hasConflicts
|
||||
? `${conflictedFiles.length} ${conflictedFiles.length === 1 ? "merge conflict must" : "merge conflicts must"} be resolved before committing.`
|
||||
: "";
|
||||
$: canCompare = hasRepository && compareFrom.length > 0 && compareTo.length > 0 && compareFrom !== compareTo && !isBusy;
|
||||
$: localBranches = branches.filter((b) => !b.remote);
|
||||
$: remoteBranches = branches.filter((b) => b.remote);
|
||||
|
||||
@@ -371,6 +374,10 @@
|
||||
async function commitChanges() {
|
||||
const message = commitMessage.trim();
|
||||
if (!message || !activeRepoPath) return;
|
||||
if (hasConflicts) {
|
||||
errorMessage = "Resolve all merge conflicts before committing.";
|
||||
return;
|
||||
}
|
||||
await runOperation("Committing", async () => {
|
||||
applyStatus(await commit(activeRepoPath, message));
|
||||
commitMessage = "";
|
||||
@@ -670,6 +677,7 @@
|
||||
<CommitPanel
|
||||
{commitMessage}
|
||||
{canCommit}
|
||||
{commitBlockReason}
|
||||
{hasRepository}
|
||||
{isBusy}
|
||||
{operation}
|
||||
|
||||
+149
-8
@@ -572,6 +572,28 @@
|
||||
.explorer-row.active { background: rgba(90,140,248,0.1); border-color: rgba(90,140,248,0.28); }
|
||||
.explorer-row.folder { font-weight: 700; }
|
||||
.explorer-row svg { color: var(--color-accent); }
|
||||
.explorer-row svg.file-icon.code { color: #7aacff; }
|
||||
.explorer-row svg.file-icon.markup { color: #f08a5d; }
|
||||
.explorer-row svg.file-icon.style { color: #c678dd; }
|
||||
.explorer-row svg.file-icon.json { color: #e0c15c; }
|
||||
.explorer-row svg.file-icon.config { color: #9aa6d6; }
|
||||
.explorer-row svg.file-icon.script { color: #4eca76; }
|
||||
.explorer-row svg.file-icon.text { color: #b8c2e0; }
|
||||
.explorer-row svg.file-icon.image { color: #54c7ec; }
|
||||
.explorer-row svg.file-icon.audio { color: #d98cf0; }
|
||||
.explorer-row svg.file-icon.video { color: #ff8ba7; }
|
||||
.explorer-row svg.file-icon.archive { color: #d8a657; }
|
||||
.explorer-row svg.file-icon.sheet { color: #4eca76; }
|
||||
.explorer-row svg.file-icon.database { color: #5fc5d9; }
|
||||
.explorer-row svg.file-icon.font { color: #f0d080; }
|
||||
.explorer-row .language-icon {
|
||||
display: block;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
flex: 0 0 15px;
|
||||
fill: currentColor;
|
||||
}
|
||||
.explorer-row .language-icon path { fill: currentColor; }
|
||||
|
||||
.tree-toggle, .explorer-select { min-height: 20px; padding: 0; border: 0; background: transparent; color: var(--color-ink-muted); }
|
||||
.tree-toggle { width: 14px; }
|
||||
@@ -584,6 +606,16 @@
|
||||
|
||||
.commit-form { display: flex; flex-direction: column; flex: 1 1 0; min-height: 0; gap: 8px; padding: 10px; }
|
||||
.commit-form textarea { flex: 1 1 0; min-height: 80px; resize: none; }
|
||||
.commit-block-reason {
|
||||
margin: 0;
|
||||
padding: 8px 10px;
|
||||
border: 1px solid rgba(232,96,96,0.28);
|
||||
border-radius: 6px;
|
||||
color: #ef8080;
|
||||
background: rgba(232,96,96,0.08);
|
||||
font-size: 12px;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
/* --- Commit history --- */
|
||||
|
||||
@@ -703,6 +735,10 @@
|
||||
box-shadow: 0 24px 72px rgba(0, 0, 0, 0.6), 0 2px 12px rgba(0,0,0,0.4);
|
||||
overflow: hidden;
|
||||
}
|
||||
.compare-dialog {
|
||||
width: min(1560px, calc(100vw - 32px));
|
||||
height: min(940px, calc(100vh - 32px));
|
||||
}
|
||||
|
||||
.dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--color-border-subtle); background: var(--color-surface-dim); }
|
||||
|
||||
@@ -712,6 +748,7 @@
|
||||
.dialog-close { min-height: 32px; min-width: 32px; padding: 0; justify-content: center; }
|
||||
|
||||
.dialog-body { display: grid; grid-template-columns: 280px minmax(0, 1fr); min-height: 0; }
|
||||
.compare-dialog .dialog-body { grid-template-columns: minmax(260px, 320px) minmax(0, 1fr); }
|
||||
|
||||
.dialog-files { display: grid; align-content: start; gap: 4px; padding: 8px; overflow: auto; border-right: 1px solid var(--color-border-subtle); background: var(--color-surface-dim); }
|
||||
|
||||
@@ -755,10 +792,12 @@
|
||||
|
||||
.split-diff {
|
||||
display: grid;
|
||||
grid-template-columns: 3.2rem minmax(0, 1fr) 1px 3.2rem minmax(0, 1fr);
|
||||
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
||||
align-content: start;
|
||||
flex: 1 1 0;
|
||||
overflow: auto;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
@@ -766,6 +805,21 @@
|
||||
background: var(--color-surface-raised);
|
||||
}
|
||||
|
||||
.split-pane {
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
overflow: auto;
|
||||
scrollbar-gutter: stable;
|
||||
}
|
||||
.split-pane + .split-pane { border-left: 1px solid var(--color-border-subtle); }
|
||||
|
||||
.split-pane-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 3.2rem minmax(max-content, 1fr);
|
||||
align-content: start;
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.split-span {
|
||||
grid-column: 1 / -1;
|
||||
padding: 2px 10px;
|
||||
@@ -792,14 +846,13 @@
|
||||
padding: 0 8px;
|
||||
white-space: pre;
|
||||
color: var(--color-ink-muted);
|
||||
overflow: hidden;
|
||||
min-width: 0;
|
||||
overflow: visible;
|
||||
}
|
||||
.split-cell.del { background: rgba(232,96,96,0.1); color: #ef8080; }
|
||||
.split-cell.add { background: rgba(78,202,118,0.09); color: #5dd88a; }
|
||||
.split-cell.empty { background: rgba(0,0,0,0.06); }
|
||||
|
||||
.split-divider { background: var(--color-border-subtle); }
|
||||
|
||||
.split-col-headers {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
@@ -1153,18 +1206,105 @@
|
||||
}
|
||||
|
||||
.resolve-structured {
|
||||
display: grid;
|
||||
align-content: start;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
padding: 4px;
|
||||
overflow: auto;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--color-border-subtle);
|
||||
border-radius: 6px;
|
||||
background: var(--color-surface-raised);
|
||||
}
|
||||
|
||||
.resolve-conflict-controls {
|
||||
display: grid;
|
||||
align-content: start;
|
||||
gap: 6px;
|
||||
flex: 0 0 auto;
|
||||
max-height: 126px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.resolve-conflict-controls .resolve-conflict-bar {
|
||||
padding: 7px 8px;
|
||||
border: 1px solid rgba(224,160,64,0.25);
|
||||
border-radius: 6px;
|
||||
background: rgba(224,160,64,0.06);
|
||||
}
|
||||
.resolve-conflict-controls .resolve-conflict-bar.unresolved {
|
||||
border-color: rgba(232,96,96,0.3);
|
||||
background: rgba(232,96,96,0.06);
|
||||
}
|
||||
|
||||
.resolve-split {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--color-border-subtle);
|
||||
border-radius: 6px;
|
||||
background: rgba(0,0,0,0.12);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
tab-size: 2;
|
||||
}
|
||||
|
||||
.resolve-pane {
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
overflow: auto;
|
||||
scrollbar-gutter: stable;
|
||||
}
|
||||
.resolve-pane + .resolve-pane { border-left: 1px solid var(--color-border-subtle); }
|
||||
|
||||
.resolve-pane-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 3.2rem minmax(max-content, 1fr);
|
||||
align-content: start;
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.resolve-split-marker {
|
||||
grid-column: 1 / -1;
|
||||
padding: 3px 8px;
|
||||
color: #e0a040;
|
||||
background: rgba(224,160,64,0.12);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.resolve-split-marker.unresolved { color: #ef8080; background: rgba(232,96,96,0.12); }
|
||||
|
||||
.resolve-num {
|
||||
padding: 0 6px 0 4px;
|
||||
border-right: 1px solid var(--color-border-subtle);
|
||||
color: var(--color-ink-faint);
|
||||
background: rgba(0,0,0,0.14);
|
||||
text-align: right;
|
||||
user-select: none;
|
||||
}
|
||||
.resolve-num.ours { color: rgba(78,202,118,0.65); background: rgba(78,202,118,0.11); border-right-color: rgba(78,202,118,0.2); }
|
||||
.resolve-num.theirs { color: rgba(122,172,255,0.65); background: rgba(122,172,255,0.11); border-right-color: rgba(122,172,255,0.2); }
|
||||
.resolve-num.empty { background: rgba(0,0,0,0.07); }
|
||||
|
||||
.resolve-cell {
|
||||
min-width: 0;
|
||||
padding: 0 8px;
|
||||
overflow: visible;
|
||||
color: var(--color-ink-muted);
|
||||
white-space: pre;
|
||||
}
|
||||
.resolve-cell.ours { color: #5dd88a; background: rgba(78,202,118,0.1); }
|
||||
.resolve-cell.theirs { color: #8fb4ff; background: rgba(90,140,248,0.11); }
|
||||
.resolve-cell.empty { background: rgba(0,0,0,0.06); }
|
||||
.resolve-cell.dimmed { opacity: 0.42; filter: grayscale(0.5); }
|
||||
|
||||
.resolve-context { margin: 0; padding: 2px 8px; overflow-x: auto; font-family: var(--font-mono); font-size: 12px; line-height: 1.5; tab-size: 2; color: var(--color-ink-muted); }
|
||||
|
||||
.resolve-conflict { display: grid; gap: 6px; padding: 8px; border: 1px solid rgba(224,160,64,0.25); border-radius: 6px; background: rgba(224,160,64,0.06); }
|
||||
@@ -1274,6 +1414,7 @@
|
||||
.compare-form { grid-template-columns: 1fr; }
|
||||
.compare-arrow { display: none; }
|
||||
.dialog-body { grid-template-columns: 1fr; grid-template-rows: minmax(120px, 0.4fr) minmax(0, 1fr); }
|
||||
.compare-dialog .dialog-body { grid-template-columns: 1fr; grid-template-rows: minmax(120px, 0.4fr) minmax(0, 1fr); }
|
||||
.dialog-files { border-right: none; border-bottom: 1px solid var(--color-border-subtle); }
|
||||
.branch-actions { flex-direction: row; justify-content: flex-start; }
|
||||
.tb-action-label { display: none; }
|
||||
|
||||
@@ -4,6 +4,7 @@
|
||||
interface Props {
|
||||
commitMessage: string;
|
||||
canCommit: boolean;
|
||||
commitBlockReason: string;
|
||||
hasRepository: boolean;
|
||||
isBusy: boolean;
|
||||
operation: string;
|
||||
@@ -15,6 +16,7 @@
|
||||
let {
|
||||
commitMessage = "",
|
||||
canCommit = false,
|
||||
commitBlockReason = "",
|
||||
hasRepository = false,
|
||||
isBusy = false,
|
||||
operation = "",
|
||||
@@ -45,7 +47,10 @@
|
||||
placeholder="Commit message..."
|
||||
disabled={!hasRepository || isBusy}
|
||||
></textarea>
|
||||
<button class="btn-primary w-full flex-shrink-0" type="submit" disabled={!canCommit}>
|
||||
{#if commitBlockReason}
|
||||
<p class="commit-block-reason">{commitBlockReason}</p>
|
||||
{/if}
|
||||
<button class="btn-primary w-full flex-shrink-0" type="submit" disabled={!canCommit} title={commitBlockReason || "Commit staged changes"}>
|
||||
{#if operation === "Committing"}
|
||||
<LoaderCircle class="spin" size={16} aria-hidden="true" />
|
||||
{:else}
|
||||
|
||||
@@ -26,8 +26,26 @@
|
||||
onSelectFile = () => {},
|
||||
}: Props = $props();
|
||||
|
||||
let beforePane = $state<HTMLDivElement | null>(null);
|
||||
let afterPane = $state<HTMLDivElement | null>(null);
|
||||
let isSyncingSplitScroll = false;
|
||||
|
||||
function syncSplitScroll(source: "before" | "after") {
|
||||
if (isSyncingSplitScroll) return;
|
||||
const sourcePane = source === "before" ? beforePane : afterPane;
|
||||
const targetPane = source === "before" ? afterPane : beforePane;
|
||||
if (!sourcePane || !targetPane) return;
|
||||
|
||||
isSyncingSplitScroll = true;
|
||||
targetPane.scrollTop = sourcePane.scrollTop;
|
||||
targetPane.scrollLeft = sourcePane.scrollLeft;
|
||||
requestAnimationFrame(() => {
|
||||
isSyncingSplitScroll = false;
|
||||
});
|
||||
}
|
||||
|
||||
function displayDiffFile(file: GitDiffFile): string {
|
||||
return file.old_path ? `${file.old_path} → ${file.path}` : file.path;
|
||||
return file.old_path ? `${file.old_path} -> ${file.path}` : file.path;
|
||||
}
|
||||
|
||||
function buildDiffByPath(patch: string): Map<string, string> {
|
||||
@@ -106,17 +124,18 @@
|
||||
|
||||
if (isMeta) {
|
||||
flush();
|
||||
rows.push({ type: "span", kind: "meta", text: line });
|
||||
continue;
|
||||
} else if (line.startsWith("@@")) {
|
||||
flush();
|
||||
const m = line.match(/@@ -(\d+)(?:,\d+)? \+(\d+)(?:,\d+)? @@/);
|
||||
if (m) { leftNum = parseInt(m[1]) - 1; rightNum = parseInt(m[2]) - 1; }
|
||||
rows.push({ type: "span", kind: "hunk", text: line });
|
||||
} else if (line.startsWith("\\ ")) {
|
||||
flush();
|
||||
} else if (line.startsWith("-")) {
|
||||
dels.push(line);
|
||||
} else if (line.startsWith("+")) {
|
||||
adds.push(line);
|
||||
} else {
|
||||
} else if (line.startsWith(" ")) {
|
||||
flush();
|
||||
leftNum++;
|
||||
rightNum++;
|
||||
@@ -125,6 +144,9 @@
|
||||
leftNum, leftText: line.slice(1), leftKind: "context",
|
||||
rightNum, rightText: line.slice(1), rightKind: "context",
|
||||
});
|
||||
} else {
|
||||
flush();
|
||||
rows.push({ type: "span", kind: "meta", text: line });
|
||||
}
|
||||
}
|
||||
flush();
|
||||
@@ -142,7 +164,7 @@
|
||||
role="presentation"
|
||||
onclick={(e) => { if (e.target === e.currentTarget) onClose(); }}
|
||||
>
|
||||
<div class="dialog" role="dialog" aria-modal="true" aria-label="Commit comparison" tabindex="-1">
|
||||
<div class="dialog compare-dialog" role="dialog" aria-modal="true" aria-label="Commit comparison" tabindex="-1">
|
||||
|
||||
<header class="dialog-header">
|
||||
<div>
|
||||
@@ -214,17 +236,40 @@
|
||||
|
||||
<!-- Split diff grid -->
|
||||
<div class="split-diff" role="table" aria-label="Side-by-side diff">
|
||||
{#each splitRows as row, i (i)}
|
||||
{#if row.type === "span"}
|
||||
<div class="split-span split-{row.kind}">{row.text}</div>
|
||||
{:else}
|
||||
<div class="split-num" class:del={row.leftKind === "del"} class:empty={row.leftKind === "empty"}>{row.leftNum ?? ""}</div>
|
||||
<div class="split-cell" class:del={row.leftKind === "del"} class:empty={row.leftKind === "empty"}>{row.leftText ?? " "}</div>
|
||||
<div class="split-divider"></div>
|
||||
<div class="split-num" class:add={row.rightKind === "add"} class:empty={row.rightKind === "empty"}>{row.rightNum ?? ""}</div>
|
||||
<div class="split-cell" class:add={row.rightKind === "add"} class:empty={row.rightKind === "empty"}>{row.rightText ?? " "}</div>
|
||||
{/if}
|
||||
{/each}
|
||||
<div
|
||||
class="split-pane"
|
||||
bind:this={beforePane}
|
||||
aria-label="Before file content"
|
||||
onscroll={() => syncSplitScroll("before")}
|
||||
>
|
||||
<div class="split-pane-grid">
|
||||
{#each splitRows as row, i (`left-${i}`)}
|
||||
{#if row.type === "span"}
|
||||
<div class="split-span split-{row.kind}">{row.text}</div>
|
||||
{:else}
|
||||
<div class="split-num" class:del={row.leftKind === "del"} class:empty={row.leftKind === "empty"}>{row.leftNum ?? ""}</div>
|
||||
<div class="split-cell" class:del={row.leftKind === "del"} class:empty={row.leftKind === "empty"}>{row.leftText ?? " "}</div>
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="split-pane"
|
||||
bind:this={afterPane}
|
||||
aria-label="After file content"
|
||||
onscroll={() => syncSplitScroll("after")}
|
||||
>
|
||||
<div class="split-pane-grid">
|
||||
{#each splitRows as row, i (`right-${i}`)}
|
||||
{#if row.type === "span"}
|
||||
<div class="split-span split-{row.kind}">{row.text}</div>
|
||||
{:else}
|
||||
<div class="split-num" class:add={row.rightKind === "add"} class:empty={row.rightKind === "empty"}>{row.rightNum ?? ""}</div>
|
||||
<div class="split-cell" class:add={row.rightKind === "add"} class:empty={row.rightKind === "empty"}>{row.rightText ?? " "}</div>
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
@@ -1,6 +1,27 @@
|
||||
<script lang="ts">
|
||||
import { ChevronDown, ChevronRight, FileText, Folder, FolderOpen } from "@lucide/svelte";
|
||||
import {
|
||||
Braces,
|
||||
ChevronDown,
|
||||
ChevronRight,
|
||||
CodeXml,
|
||||
Database,
|
||||
FileArchive,
|
||||
FileAudio,
|
||||
FileCode,
|
||||
FileCog,
|
||||
FileImage,
|
||||
FileJson,
|
||||
FileSpreadsheet,
|
||||
FileText,
|
||||
FileType,
|
||||
FileVideo,
|
||||
Folder,
|
||||
FolderOpen,
|
||||
Terminal,
|
||||
} from "@lucide/svelte";
|
||||
import { languageIconForPath } from "../languageIcons";
|
||||
import type { ExplorerNode, ExplorerNodeKind, FileStatusKind, GitRepositoryFile } from "../types";
|
||||
import LanguageIcon from "./LanguageIcon.svelte";
|
||||
|
||||
interface Props {
|
||||
repoFiles: GitRepositoryFile[];
|
||||
@@ -97,6 +118,38 @@
|
||||
return kind ?? "none";
|
||||
}
|
||||
|
||||
function extensionFor(path: string): string {
|
||||
const name = path.split(/[\\/]/).pop()?.toLowerCase() ?? "";
|
||||
const index = name.lastIndexOf(".");
|
||||
return index > 0 ? name.slice(index + 1) : "";
|
||||
}
|
||||
|
||||
function fileIconKind(node: ExplorerNode): string {
|
||||
const name = node.name.toLowerCase();
|
||||
const ext = extensionFor(node.path);
|
||||
|
||||
if (["package.json", "tsconfig.json", "jsconfig.json", "composer.json", "deno.json", "tauri.conf.json"].includes(name)) return "json";
|
||||
if (["cargo.toml", "package-lock.json", "pnpm-lock.yaml", "yarn.lock", "bun.lockb"].includes(name)) return "config";
|
||||
if (["dockerfile", "makefile", "justfile", "rakefile", "gemfile", ".env", ".gitignore", ".gitattributes", ".npmrc", ".editorconfig"].includes(name)) return "config";
|
||||
|
||||
if (["js", "jsx", "ts", "tsx", "svelte", "vue", "astro", "rs", "go", "java", "kt", "kts", "cs", "cpp", "cxx", "cc", "c", "h", "hpp", "swift", "php", "rb", "py", "lua", "dart", "scala", "zig", "ex", "exs", "erl", "hrl", "fs", "fsx", "fsi", "clj", "cljs"].includes(ext)) return "code";
|
||||
if (["html", "htm", "xml", "xaml", "svg"].includes(ext)) return "markup";
|
||||
if (["css", "scss", "sass", "less", "postcss"].includes(ext)) return "style";
|
||||
if (["json", "jsonc", "json5"].includes(ext)) return "json";
|
||||
if (["toml", "yaml", "yml", "ini", "conf", "config", "properties", "env"].includes(ext)) return "config";
|
||||
if (["sh", "bash", "zsh", "fish", "ps1", "bat", "cmd"].includes(ext)) return "script";
|
||||
if (["md", "mdx", "txt", "log", "rst", "adoc", "tex"].includes(ext)) return "text";
|
||||
if (["png", "jpg", "jpeg", "gif", "webp", "bmp", "ico", "avif", "tif", "tiff"].includes(ext)) return "image";
|
||||
if (["mp3", "wav", "ogg", "flac", "m4a", "aac"].includes(ext)) return "audio";
|
||||
if (["mp4", "mov", "avi", "mkv", "webm", "wmv"].includes(ext)) return "video";
|
||||
if (["zip", "rar", "7z", "tar", "gz", "tgz", "bz2", "xz"].includes(ext)) return "archive";
|
||||
if (["csv", "tsv", "xls", "xlsx", "ods"].includes(ext)) return "sheet";
|
||||
if (["sql", "sqlite", "sqlite3", "db"].includes(ext)) return "database";
|
||||
if (["ttf", "otf", "woff", "woff2", "eot"].includes(ext)) return "font";
|
||||
|
||||
return "text";
|
||||
}
|
||||
|
||||
let explorerTree = $derived(buildExplorerTree(repoFiles));
|
||||
let visibleNodes = $derived(flattenExplorerTree(explorerTree, expandedExplorerPaths));
|
||||
</script>
|
||||
@@ -145,7 +198,39 @@
|
||||
{/if}
|
||||
{:else}
|
||||
<span class="tree-spacer"></span>
|
||||
<FileText size={15} aria-hidden="true" />
|
||||
{@const languageIcon = languageIconForPath(node.path)}
|
||||
{@const iconKind = fileIconKind(node)}
|
||||
{#if languageIcon}
|
||||
<LanguageIcon icon={languageIcon.icon} title={languageIcon.title} />
|
||||
{:else if iconKind === "code"}
|
||||
<FileCode class={`file-icon ${iconKind}`} size={15} aria-hidden="true" />
|
||||
{:else if iconKind === "markup"}
|
||||
<CodeXml class={`file-icon ${iconKind}`} size={15} aria-hidden="true" />
|
||||
{:else if iconKind === "style"}
|
||||
<Braces class={`file-icon ${iconKind}`} size={15} aria-hidden="true" />
|
||||
{:else if iconKind === "json"}
|
||||
<FileJson class={`file-icon ${iconKind}`} size={15} aria-hidden="true" />
|
||||
{:else if iconKind === "config"}
|
||||
<FileCog class={`file-icon ${iconKind}`} size={15} aria-hidden="true" />
|
||||
{:else if iconKind === "script"}
|
||||
<Terminal class={`file-icon ${iconKind}`} size={15} aria-hidden="true" />
|
||||
{:else if iconKind === "image"}
|
||||
<FileImage class={`file-icon ${iconKind}`} size={15} aria-hidden="true" />
|
||||
{:else if iconKind === "audio"}
|
||||
<FileAudio class={`file-icon ${iconKind}`} size={15} aria-hidden="true" />
|
||||
{:else if iconKind === "video"}
|
||||
<FileVideo class={`file-icon ${iconKind}`} size={15} aria-hidden="true" />
|
||||
{:else if iconKind === "archive"}
|
||||
<FileArchive class={`file-icon ${iconKind}`} size={15} aria-hidden="true" />
|
||||
{:else if iconKind === "sheet"}
|
||||
<FileSpreadsheet class={`file-icon ${iconKind}`} size={15} aria-hidden="true" />
|
||||
{:else if iconKind === "database"}
|
||||
<Database class={`file-icon ${iconKind}`} size={15} aria-hidden="true" />
|
||||
{:else if iconKind === "font"}
|
||||
<FileType class={`file-icon ${iconKind}`} size={15} aria-hidden="true" />
|
||||
{:else}
|
||||
<FileText class={`file-icon ${iconKind}`} size={15} aria-hidden="true" />
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
<button
|
||||
|
||||
@@ -0,0 +1,21 @@
|
||||
<script lang="ts">
|
||||
import type { SimpleIcon } from "simple-icons";
|
||||
|
||||
interface Props {
|
||||
icon: SimpleIcon;
|
||||
title: string;
|
||||
}
|
||||
|
||||
let { icon, title }: Props = $props();
|
||||
</script>
|
||||
|
||||
<svg
|
||||
class="language-icon"
|
||||
viewBox="0 0 24 24"
|
||||
style={`color: #${icon.hex}`}
|
||||
aria-hidden="true"
|
||||
focusable="false"
|
||||
>
|
||||
<title>{title}</title>
|
||||
<path d={icon.path} />
|
||||
</svg>
|
||||
@@ -3,6 +3,16 @@
|
||||
import { AlertCircle, Check, LoaderCircle, X } from "@lucide/svelte";
|
||||
import type { ConflictChoice, ConflictFile, ConflictPart, GitFileStatus, PreparedResolution } from "../types";
|
||||
|
||||
type ConflictRegion = Extract<ConflictPart, { kind: "conflict" }>;
|
||||
type ResolveSplitRow =
|
||||
| { type: "marker"; conflictIndex: number }
|
||||
| {
|
||||
type: "pair";
|
||||
conflictIndex?: number;
|
||||
leftNum?: number; leftText?: string; leftKind: "context" | "ours" | "empty";
|
||||
rightNum?: number; rightText?: string; rightKind: "context" | "theirs" | "empty";
|
||||
};
|
||||
|
||||
interface Props {
|
||||
conflictedFiles: GitFileStatus[];
|
||||
conflictTarget: string;
|
||||
@@ -36,6 +46,9 @@
|
||||
let resolveContent = $state("");
|
||||
let manualMode = $state(false);
|
||||
let binarySide = $state<"ours" | "theirs" | null>(null);
|
||||
let resolveBeforePane = $state<HTMLDivElement | null>(null);
|
||||
let resolveAfterPane = $state<HTMLDivElement | null>(null);
|
||||
let isSyncingResolveScroll = false;
|
||||
|
||||
$effect(() => {
|
||||
const c = conflict;
|
||||
@@ -75,6 +88,8 @@
|
||||
});
|
||||
|
||||
let conflictRegionCount = $derived(conflictParts.filter((p) => p.kind === "conflict").length);
|
||||
let conflictRegions = $derived(conflictOnlyParts(conflictParts));
|
||||
let resolveSplitRows = $derived(buildResolveSplitRows(conflictParts));
|
||||
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));
|
||||
@@ -125,6 +140,74 @@
|
||||
return out.join("\n");
|
||||
}
|
||||
|
||||
function conflictOnlyParts(parts: ConflictPart[]): ConflictRegion[] {
|
||||
return parts.filter((part): part is ConflictRegion => part.kind === "conflict");
|
||||
}
|
||||
|
||||
function buildResolveSplitRows(parts: ConflictPart[]): ResolveSplitRow[] {
|
||||
const rows: ResolveSplitRow[] = [];
|
||||
let leftNum = 0;
|
||||
let rightNum = 0;
|
||||
|
||||
for (const part of parts) {
|
||||
if (part.kind === "text") {
|
||||
for (const line of part.lines) {
|
||||
leftNum++;
|
||||
rightNum++;
|
||||
rows.push({
|
||||
type: "pair",
|
||||
leftNum,
|
||||
leftText: line,
|
||||
leftKind: "context",
|
||||
rightNum,
|
||||
rightText: line,
|
||||
rightKind: "context",
|
||||
});
|
||||
}
|
||||
continue;
|
||||
}
|
||||
|
||||
rows.push({ type: "marker", conflictIndex: part.index });
|
||||
const count = Math.max(part.oursLines.length, part.theirsLines.length);
|
||||
for (let i = 0; i < count; i++) {
|
||||
const hasOurs = i < part.oursLines.length;
|
||||
const hasTheirs = i < part.theirsLines.length;
|
||||
if (hasOurs) leftNum++;
|
||||
if (hasTheirs) rightNum++;
|
||||
rows.push({
|
||||
type: "pair",
|
||||
conflictIndex: part.index,
|
||||
leftNum: hasOurs ? leftNum : undefined,
|
||||
leftText: hasOurs ? part.oursLines[i] : undefined,
|
||||
leftKind: hasOurs ? "ours" : "empty",
|
||||
rightNum: hasTheirs ? rightNum : undefined,
|
||||
rightText: hasTheirs ? part.theirsLines[i] : undefined,
|
||||
rightKind: hasTheirs ? "theirs" : "empty",
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return rows;
|
||||
}
|
||||
|
||||
function syncResolveScroll(source: "before" | "after") {
|
||||
if (isSyncingResolveScroll) return;
|
||||
const sourcePane = source === "before" ? resolveBeforePane : resolveAfterPane;
|
||||
const targetPane = source === "before" ? resolveAfterPane : resolveBeforePane;
|
||||
if (!sourcePane || !targetPane) return;
|
||||
|
||||
isSyncingResolveScroll = true;
|
||||
targetPane.scrollTop = sourcePane.scrollTop;
|
||||
targetPane.scrollLeft = sourcePane.scrollLeft;
|
||||
requestAnimationFrame(() => {
|
||||
isSyncingResolveScroll = false;
|
||||
});
|
||||
}
|
||||
|
||||
function legacyConflictParts(): any[] {
|
||||
return [];
|
||||
}
|
||||
|
||||
function setConflictChoice(index: number, choice: ConflictChoice) {
|
||||
const next = [...conflictChoices];
|
||||
next[index] = choice;
|
||||
@@ -296,7 +379,71 @@
|
||||
></textarea>
|
||||
{:else}
|
||||
<div class="resolve-structured">
|
||||
{#each conflictParts as part, partIndex (partIndex)}
|
||||
{#if conflictRegions.length > 0}
|
||||
<div class="resolve-conflict-controls" aria-label="Conflict decisions">
|
||||
{#each conflictRegions as part (part.index)}
|
||||
<div class="resolve-conflict-bar" class:unresolved={conflictChoices[part.index] == null}>
|
||||
<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>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="resolve-split" role="table" aria-label="Full conflict comparison">
|
||||
<div
|
||||
class="resolve-pane"
|
||||
bind:this={resolveBeforePane}
|
||||
aria-label="Current file content"
|
||||
onscroll={() => syncResolveScroll("before")}
|
||||
>
|
||||
<div class="resolve-pane-grid">
|
||||
{#each resolveSplitRows as row, i (`left-${i}`)}
|
||||
{#if row.type === "marker"}
|
||||
<div class="resolve-split-marker" class:unresolved={conflictChoices[row.conflictIndex] == null}>Conflict {row.conflictIndex + 1}</div>
|
||||
{:else}
|
||||
<div class="resolve-num" class:ours={row.leftKind === "ours"} class:empty={row.leftKind === "empty"}>{row.leftNum ?? ""}</div>
|
||||
<div
|
||||
class="resolve-cell"
|
||||
class:ours={row.leftKind === "ours"}
|
||||
class:empty={row.leftKind === "empty"}
|
||||
class:dimmed={row.conflictIndex != null && !oursActive(conflictChoices[row.conflictIndex])}
|
||||
>{displayLine(row.leftText ?? "") || " "}</div>
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="resolve-pane"
|
||||
bind:this={resolveAfterPane}
|
||||
aria-label="Incoming file content"
|
||||
onscroll={() => syncResolveScroll("after")}
|
||||
>
|
||||
<div class="resolve-pane-grid">
|
||||
{#each resolveSplitRows as row, i (`right-${i}`)}
|
||||
{#if row.type === "marker"}
|
||||
<div class="resolve-split-marker" class:unresolved={conflictChoices[row.conflictIndex] == null}>Conflict {row.conflictIndex + 1}</div>
|
||||
{:else}
|
||||
<div class="resolve-num" class:theirs={row.rightKind === "theirs"} class:empty={row.rightKind === "empty"}>{row.rightNum ?? ""}</div>
|
||||
<div
|
||||
class="resolve-cell"
|
||||
class:theirs={row.rightKind === "theirs"}
|
||||
class:empty={row.rightKind === "empty"}
|
||||
class:dimmed={row.conflictIndex != null && !theirsActive(conflictChoices[row.conflictIndex])}
|
||||
>{displayLine(row.rightText ?? "") || " "}</div>
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if false}
|
||||
{#each legacyConflictParts() 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>
|
||||
@@ -323,6 +470,7 @@
|
||||
</div>
|
||||
{/if}
|
||||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
|
||||
@@ -0,0 +1,207 @@
|
||||
import type { SimpleIcon } from "simple-icons";
|
||||
import {
|
||||
siAstro,
|
||||
siBun,
|
||||
siC,
|
||||
siClojure,
|
||||
siCmake,
|
||||
siCplusplus,
|
||||
siCss,
|
||||
siDart,
|
||||
siDeno,
|
||||
siDocker,
|
||||
siDotnet,
|
||||
siEditorconfig,
|
||||
siElixir,
|
||||
siErlang,
|
||||
siEslint,
|
||||
siFortran,
|
||||
siFsharp,
|
||||
siGit,
|
||||
siGitignoredotio,
|
||||
siGnubash,
|
||||
siGo,
|
||||
siGradle,
|
||||
siGraphql,
|
||||
siHaskell,
|
||||
siHtml5,
|
||||
siJavascript,
|
||||
siJson,
|
||||
siJulia,
|
||||
siKotlin,
|
||||
siLua,
|
||||
siMake,
|
||||
siMarkdown,
|
||||
siNodedotjs,
|
||||
siNpm,
|
||||
siOcaml,
|
||||
siOpenjdk,
|
||||
siPerl,
|
||||
siPhp,
|
||||
siPnpm,
|
||||
siPrettier,
|
||||
siPython,
|
||||
siR,
|
||||
siReact,
|
||||
siRuby,
|
||||
siRust,
|
||||
siSass,
|
||||
siScala,
|
||||
siShell,
|
||||
siSqlite,
|
||||
siSvelte,
|
||||
siSvg,
|
||||
siSwift,
|
||||
siTailwindcss,
|
||||
siTauri,
|
||||
siTerraform,
|
||||
siToml,
|
||||
siTypescript,
|
||||
siVite,
|
||||
siVuedotjs,
|
||||
siYaml,
|
||||
siYarn,
|
||||
siZig,
|
||||
siZsh,
|
||||
} from "simple-icons";
|
||||
|
||||
export interface LanguageIconSpec {
|
||||
icon: SimpleIcon;
|
||||
title: string;
|
||||
}
|
||||
|
||||
function spec(icon: SimpleIcon, title = icon.title): LanguageIconSpec {
|
||||
return { icon, title };
|
||||
}
|
||||
|
||||
const fileNameIcons = new Map<string, LanguageIconSpec>([
|
||||
["dockerfile", spec(siDocker, "Docker")],
|
||||
["docker-compose.yml", spec(siDocker, "Docker Compose")],
|
||||
["docker-compose.yaml", spec(siDocker, "Docker Compose")],
|
||||
["compose.yml", spec(siDocker, "Docker Compose")],
|
||||
["compose.yaml", spec(siDocker, "Docker Compose")],
|
||||
["package.json", spec(siNodedotjs, "Node package")],
|
||||
["package-lock.json", spec(siNpm, "npm lockfile")],
|
||||
["pnpm-lock.yaml", spec(siPnpm, "pnpm lockfile")],
|
||||
["yarn.lock", spec(siYarn, "Yarn lockfile")],
|
||||
["bun.lockb", spec(siBun, "Bun lockfile")],
|
||||
["deno.json", spec(siDeno, "Deno")],
|
||||
["deno.jsonc", spec(siDeno, "Deno")],
|
||||
["cargo.toml", spec(siRust, "Cargo")],
|
||||
["cargo.lock", spec(siRust, "Cargo lockfile")],
|
||||
["tauri.conf.json", spec(siTauri, "Tauri")],
|
||||
["svelte.config.js", spec(siSvelte, "Svelte config")],
|
||||
["svelte.config.ts", spec(siSvelte, "Svelte config")],
|
||||
["vite.config.js", spec(siVite, "Vite config")],
|
||||
["vite.config.ts", spec(siVite, "Vite config")],
|
||||
["tailwind.config.js", spec(siTailwindcss, "Tailwind CSS config")],
|
||||
["tailwind.config.ts", spec(siTailwindcss, "Tailwind CSS config")],
|
||||
["eslint.config.js", spec(siEslint, "ESLint config")],
|
||||
["eslint.config.mjs", spec(siEslint, "ESLint config")],
|
||||
[".eslintrc", spec(siEslint, "ESLint config")],
|
||||
[".eslintrc.js", spec(siEslint, "ESLint config")],
|
||||
[".eslintrc.cjs", spec(siEslint, "ESLint config")],
|
||||
[".prettierrc", spec(siPrettier, "Prettier config")],
|
||||
[".prettierrc.json", spec(siPrettier, "Prettier config")],
|
||||
[".prettierrc.js", spec(siPrettier, "Prettier config")],
|
||||
[".gitignore", spec(siGitignoredotio, "gitignore")],
|
||||
[".gitattributes", spec(siGit, "Git attributes")],
|
||||
[".gitmodules", spec(siGit, "Git modules")],
|
||||
[".editorconfig", spec(siEditorconfig, "EditorConfig")],
|
||||
["cmakelists.txt", spec(siCmake, "CMake")],
|
||||
["makefile", spec(siMake, "Makefile")],
|
||||
["justfile", spec(siShell, "Justfile")],
|
||||
["rakefile", spec(siRuby, "Rakefile")],
|
||||
["gemfile", spec(siRuby, "Gemfile")],
|
||||
]);
|
||||
|
||||
const extensionIcons = new Map<string, LanguageIconSpec>([
|
||||
["js", spec(siJavascript)],
|
||||
["mjs", spec(siJavascript)],
|
||||
["cjs", spec(siJavascript)],
|
||||
["jsx", spec(siReact, "React JSX")],
|
||||
["ts", spec(siTypescript)],
|
||||
["mts", spec(siTypescript)],
|
||||
["cts", spec(siTypescript)],
|
||||
["tsx", spec(siReact, "React TSX")],
|
||||
["svelte", spec(siSvelte)],
|
||||
["vue", spec(siVuedotjs, "Vue")],
|
||||
["astro", spec(siAstro)],
|
||||
["rs", spec(siRust)],
|
||||
["go", spec(siGo)],
|
||||
["py", spec(siPython)],
|
||||
["pyw", spec(siPython)],
|
||||
["java", spec(siOpenjdk, "Java")],
|
||||
["kt", spec(siKotlin)],
|
||||
["kts", spec(siKotlin)],
|
||||
["cs", spec(siDotnet, "C#")],
|
||||
["cpp", spec(siCplusplus, "C++")],
|
||||
["cxx", spec(siCplusplus, "C++")],
|
||||
["cc", spec(siCplusplus, "C++")],
|
||||
["hpp", spec(siCplusplus, "C++")],
|
||||
["hh", spec(siCplusplus, "C++")],
|
||||
["c", spec(siC)],
|
||||
["h", spec(siC)],
|
||||
["swift", spec(siSwift)],
|
||||
["php", spec(siPhp, "PHP")],
|
||||
["rb", spec(siRuby)],
|
||||
["lua", spec(siLua)],
|
||||
["dart", spec(siDart)],
|
||||
["scala", spec(siScala)],
|
||||
["zig", spec(siZig)],
|
||||
["ex", spec(siElixir)],
|
||||
["exs", spec(siElixir)],
|
||||
["erl", spec(siErlang)],
|
||||
["hrl", spec(siErlang)],
|
||||
["fs", spec(siFsharp, "F#")],
|
||||
["fsx", spec(siFsharp, "F#")],
|
||||
["fsi", spec(siFsharp, "F#")],
|
||||
["clj", spec(siClojure)],
|
||||
["cljs", spec(siClojure)],
|
||||
["hs", spec(siHaskell)],
|
||||
["lhs", spec(siHaskell)],
|
||||
["ml", spec(siOcaml, "OCaml")],
|
||||
["mli", spec(siOcaml, "OCaml")],
|
||||
["jl", spec(siJulia)],
|
||||
["r", spec(siR, "R")],
|
||||
["pl", spec(siPerl)],
|
||||
["pm", spec(siPerl)],
|
||||
["f", spec(siFortran)],
|
||||
["f90", spec(siFortran)],
|
||||
["f95", spec(siFortran)],
|
||||
["html", spec(siHtml5, "HTML")],
|
||||
["htm", spec(siHtml5, "HTML")],
|
||||
["css", spec(siCss, "CSS")],
|
||||
["scss", spec(siSass, "Sass")],
|
||||
["sass", spec(siSass, "Sass")],
|
||||
["svg", spec(siSvg, "SVG")],
|
||||
["json", spec(siJson, "JSON")],
|
||||
["jsonc", spec(siJson, "JSONC")],
|
||||
["json5", spec(siJson, "JSON5")],
|
||||
["yaml", spec(siYaml, "YAML")],
|
||||
["yml", spec(siYaml, "YAML")],
|
||||
["toml", spec(siToml, "TOML")],
|
||||
["tf", spec(siTerraform, "Terraform")],
|
||||
["tfvars", spec(siTerraform, "Terraform variables")],
|
||||
["graphql", spec(siGraphql, "GraphQL")],
|
||||
["gql", spec(siGraphql, "GraphQL")],
|
||||
["md", spec(siMarkdown, "Markdown")],
|
||||
["mdx", spec(siMarkdown, "MDX")],
|
||||
["sh", spec(siGnubash, "Shell script")],
|
||||
["bash", spec(siGnubash, "Bash")],
|
||||
["zsh", spec(siZsh, "Zsh")],
|
||||
["fish", spec(siShell, "Fish shell")],
|
||||
["sql", spec(siSqlite, "SQL")],
|
||||
["sqlite", spec(siSqlite, "SQLite")],
|
||||
["sqlite3", spec(siSqlite, "SQLite")],
|
||||
]);
|
||||
|
||||
export function languageIconForPath(path: string): LanguageIconSpec | null {
|
||||
const name = path.split(/[\\/]/).pop()?.toLowerCase() ?? "";
|
||||
const byName = fileNameIcons.get(name);
|
||||
if (byName) return byName;
|
||||
|
||||
const index = name.lastIndexOf(".");
|
||||
if (index <= 0) return null;
|
||||
return extensionIcons.get(name.slice(index + 1)) ?? null;
|
||||
}
|
||||
Reference in New Issue
Block a user