add something

src/lib/components/CompareDialog.svelte

@@ -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>