@young1lin/dsh-ui-gitworkbench 0.1.8 → 0.1.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@young1lin/dsh-ui-gitworkbench",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "description": "Out-of-tree dsh web UI plugin: a session-header git workbench chip opening a drawer with the file tree, per-file diff, history, compare, staging, commit, and sync (fetch/pull/push).",
   "type": "module",
   "main": "lib/index.js",

package/src/client/GitWorkbenchPanel.module.css

@@ -1810,6 +1810,9 @@
    the FILE rather than of whatever is currently rendered. Spans every column,
    including the blame gutter's. */
 .sideSpacer { grid-column: 1 / -1; }
+/* The same, for the unified view's flex column. `flex: none` so it is exactly
+   the height it claims rather than one stretched by its siblings. */
+.diffSpacer { flex: none; }
 .sideCodeSame { color: var(--gs-fg-muted); }
 .sideCodeAdd { background: var(--gs-add-line); }
 .sideCodeDel { background: var(--gs-del-line); }

package/src/client/GitWorkbenchPanel.tsx

@@ -89,7 +89,7 @@ import {
   fileCheckState, nextAction, nextBatch, pathsFor, rollUp, settledTicks, withPendingTicks,
   type CheckState, type Tick, type TickAction,
 } from './stage-tree.ts'
-import { grammarLoadCount, highlightFile, highlightForRows, highlightWholeFile, highlightWindow, shikiLangOf, shikiThemeOf, subscribeGrammarLoaded, type HighlightRun } from './highlight.ts'
+import { grammarLoadCount, highlightFile, highlightForRowsWindow, highlightWholeFile, highlightWindow, shikiLangOf, shikiThemeOf, subscribeGrammarLoaded, type HighlightRun } from './highlight.ts'
 import { badgeRepeatsBranch, bindingChanged, branchOfWorktree, pathKey, probesClosedBinding, samePath, showsPending, splitPath, turnSettled, viewedPath } from './worktree-view.ts'
 import { BUSY_DELAY_MS, BUSY_HOLD_MS, holdRemaining, quietlyDisabled } from './op-feedback.ts'
 import type { WorkbenchKey } from './locales.ts'
@@ -5059,14 +5059,25 @@ function DiffView({ segment, path, palette, t }: {
   const grammarGen = useSyncExternalStore(subscribeGrammarLoaded, grammarLoadCount)
   const rowsWithWords = useMemo(() => attachWordRanges(parseRows(segment)), [segment])
   const sides = useMemo(() => gutterSides(rowsWithWords), [rowsWithWords])
+  const scrollRef = useRef<HTMLDivElement>(null)
+  // Windowed for the same reason the side-by-side pane is: a unified diff of a
+  // long file put every row in the DOM and re-lexed every one of them, so
+  // opening one froze the pane in exactly the same way.
+  const win = useRowWindow(scrollRef, rowsWithWords.length)
   const syntax = useMemo(
-    () => highlightForRows(rowsWithWords, lang, shikiTheme),
-    [rowsWithWords, lang, shikiTheme, grammarGen],
+    () => highlightForRowsWindow(rowsWithWords, lang, shikiTheme, win.start, win.end),
+    [rowsWithWords, lang, shikiTheme, win.start, win.end, grammarGen],
   )
   const blocks = useMemo(() => unifiedBlocks(rowsWithWords.map(row => row.kind)), [rowsWithWords])
   const changes = useMemo(() => countBlocks(blocks), [blocks])
-  const scrollRef = useRef<HTMLDivElement>(null)
-  const { goToChange } = useChangeNav(scrollRef)
+  // Derived rather than measured, because a windowed pane has no element for
+  // the block being walked to.
+  const blocksForNav = useRef<readonly number[]>(blocks)
+  blocksForNav.current = blocks
+  const { goToChange } = useChangeNav(
+    scrollRef,
+    useCallback(() => blockTopsFromRows(blocksForNav.current, DIFF_ROW_H, DIFF_GRID_PAD_TOP), []),
+  )
   // Read by the key listener below, which is attached once. `goToChange` only
   // ever touches refs, but pinning it here says so rather than relying on it.
   const walk = useRef(goToChange)
@@ -5112,7 +5123,10 @@ function DiffView({ segment, path, palette, t }: {
       ) : null}
       <div ref={scrollRef} className={css.diffScroll} tabIndex={-1}>
     <pre className={css.diffPre}>
-      {rowsWithWords.map((row, i) => (
+      {win.padTop > 0 ? <div className={css.diffSpacer} style={{ height: `${win.padTop}px` }} aria-hidden="true" /> : null}
+      {rowsWithWords.slice(win.start, win.end).map((row, k) => {
+        const i = win.start + k
+        return (
         <div key={i} className={`${css.line} ${rowClass(row.kind)}`} data-block={blocks[i]! >= 0 ? blocks[i] : undefined}>
           {sides.old ? <span className={css.lnOld}>{row.kind === 'add' || row.kind === 'hunk' ? '' : row.oldL}</span> : null}
           {sides.new ? <span className={css.lnNew}>{row.kind === 'del' || row.kind === 'hunk' ? '' : row.newL}</span> : null}
@@ -5121,7 +5135,9 @@ function DiffView({ segment, path, palette, t }: {
           </span>
           <span className={css.code}>{renderCode(row, syntax[i] ?? [])}</span>
         </div>
-      ))}
+        )
+      })}
+      {win.padBottom > 0 ? <div className={css.diffSpacer} style={{ height: `${win.padBottom}px` }} aria-hidden="true" /> : null}
     </pre>
       </div>
     </div>

package/src/client/highlight.ts

@@ -317,6 +317,39 @@ export function highlightForRows(
   lang: string | undefined,
   theme = 'github-dark-default',
 ): HighlightRun[][] {
+  // One implementation, asked for the whole range. The panes all window now;
+  // this shape is what a caller wants when it really does need every row.
+  return highlightForRowsWindow(rows, lang, theme, 0, rows.length)
+    .map((runs, i) => runs ?? [{ text: rows[i]!.text, color: undefined }])
+}
+
+/**
+ * {@link highlightForRows} for the rows in a window, and nothing outside it.
+ *
+ * Same reason as {@link highlightWindow}, in the view History and Compare use:
+ * a unified diff of a long file re-lexed every one of its rows, so opening one
+ * froze the pane exactly as the side-by-side view did.
+ *
+ * The mapping from rows to the two sides' line arrays is built over ALL rows —
+ * it is array bookkeeping with no Shiki in it, and a row's position on its side
+ * depends on every row before it. Only the tokenizing is windowed, and because
+ * a window of rows is contiguous, so is the span of lines it needs from each
+ * side.
+ *
+ * @param rows - parsed unified-diff rows.
+ * @param lang - from {@link shikiLangOf}.
+ * @param theme - from {@link shikiThemeOf}.
+ * @param from - first row in the window.
+ * @param to - one past the last row in the window.
+ * @returns an array indexed by ROW, filled only inside the window.
+ */
+export function highlightForRowsWindow(
+  rows: readonly Row[],
+  lang: string | undefined,
+  theme: string,
+  from: number,
+  to: number,
+): (HighlightRun[] | undefined)[] {
   const oldLines: string[] = []
   const newLines: string[] = []
   const oldAt: number[] = []
@@ -340,11 +373,29 @@ export function highlightForRows(
       newAt.push(-1)
     }
   }
-  const oldTok = highlightFile(oldLines, lang, theme)
-  const newTok = highlightFile(newLines, lang, theme)
-  return rows.map((row, i) => {
-    if (row.kind === 'del') return oldTok?.[oldAt[i]!] ?? [{ text: row.text, color: undefined }]
-    if (row.kind === 'add' || row.kind === 'context') return newTok?.[newAt[i]!] ?? [{ text: row.text, color: undefined }]
-    return [{ text: row.text, color: undefined }]
-  })
+  const first = Math.max(0, Math.trunc(from))
+  const last = Math.min(rows.length, Math.trunc(to))
+  const span = (at: readonly number[]): { from: number; to: number } => {
+    let lo = -1
+    let hi = -1
+    for (let i = first; i < last; i += 1) {
+      const j = at[i]!
+      if (j < 0) continue
+      if (lo < 0) lo = j
+      hi = j
+    }
+    return lo < 0 ? { from: 0, to: 0 } : { from: lo, to: hi + 1 }
+  }
+  const oldSpan = span(oldAt)
+  const newSpan = span(newAt)
+  const oldTok = highlightWindow(oldLines, lang, theme, oldSpan.from, oldSpan.to)
+  const newTok = highlightWindow(newLines, lang, theme, newSpan.from, newSpan.to)
+  const out: (HighlightRun[] | undefined)[] = new Array<HighlightRun[] | undefined>(rows.length)
+  for (let i = first; i < last; i += 1) {
+    const row = rows[i]!
+    if (row.kind === 'del') out[i] = oldTok?.[oldAt[i]!] ?? [{ text: row.text, color: undefined }]
+    else if (row.kind === 'add' || row.kind === 'context') out[i] = newTok?.[newAt[i]!] ?? [{ text: row.text, color: undefined }]
+    else out[i] = [{ text: row.text, color: undefined }]
+  }
+  return out
 }