add something

2026-06-29 14:40:42 +02:00
parent a15d6c0b2c
commit 9861fa2446
12 changed files with 822 additions and 42 deletions
@@ -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}