feature: improve diff ui

packages/diff-view/src/parts/ClassNames/ClassNames.ts

@@ -71,8 +71,11 @@ export const DiffEditorErrorMessage = 'DiffEditorErrorMessage'
 export const DiffEditorErrorStack = 'DiffEditorErrorStack'
 export const DiffEditorErrorStackLink = 'DiffEditorErrorStackLink'
 export const DiffEditorGutter = 'DiffEditorGutter'
+export const DiffEditorLineMissing = 'DiffEditorLineMissing'
 export const DiffEditorLineNumber = 'DiffEditorLineNumber'
+export const DiffEditorLineNumberDeletion = 'DiffEditorLineNumberDeletion'
 export const DiffEditorLineNumberEmpty = 'DiffEditorLineNumberEmpty'
+export const DiffEditorLineNumberInsertion = 'DiffEditorLineNumberInsertion'
 export const DiffEditorRows = 'DiffEditorRows'
 export const DiffEditorHorizontal = 'DiffEditorHorizontal'
 export const DiffEditorVertical = 'DiffEditorVertical'

packages/diff-view/src/parts/GetContentDomWithLineNumbers/GetGutterDom/GetGutterDom.ts

@@ -28,7 +28,7 @@ export const getGutterDom = (visibleLines: readonly VisibleLine[], itemHeight: n
       childCount++
       emptyLineCount = 0
     }
-    children.push(...getLineNumberDom(line.lineNumber))
+    children.push(...getLineNumberDom(line.lineNumber, line.type))
     childCount++
   }
 

packages/diff-view/src/parts/GetDiffEditorVirtualDom/GetDiffEditorVirtualDom.ts

@@ -5,6 +5,8 @@ import * as ClassNames from '../ClassNames/ClassNames.ts'
 import * as DomEventListenerFunctions from '../DomEventListenerFunctions/DomEventListenerFunctions.ts'
 import { getContentLeftDom } from '../GetContentLeftDom/GetContentLeftDom.ts'
 import { getContentRightDom } from '../GetContentRightDom/GetContentRightDom.ts'
+import { getImageLeftDom } from '../GetImageLeftDom/GetImageLeftDom.ts'
+import { getImageRightDom } from '../GetImageRightDom/GetImageRightDom.ts'
 import { getInlineDiffEditorVirtualDom } from '../GetInlineDiffEditorVirtualDom/GetInlineDiffEditorVirtualDom.ts'
 import { getSashDom } from '../GetSashDom/GetSashDom.ts'
 import { getScrollBarDom } from '../GetScrollBarDom/GetScrollBarDom.ts'
@@ -21,6 +23,8 @@ export const getDiffEditorVirtualDom = (state: DiffViewState): readonly VirtualD
     errorRightCodeFrame,
     errorRightMessage,
     errorRightStack,
+    imageSrcLeft,
+    imageSrcRight,
     inlineChanges,
     itemHeight,
     layout,
@@ -34,6 +38,8 @@ export const getDiffEditorVirtualDom = (state: DiffViewState): readonly VirtualD
     tokenizedLinesRight,
     totalLineCountLeft,
     totalLineCountRight,
+    uriLeft,
+    uriRight,
     visibleLinesLeft,
     visibleLinesRight,
   } = state
@@ -45,36 +51,42 @@ export const getDiffEditorVirtualDom = (state: DiffViewState): readonly VirtualD
   const showLineNumbers = lineNumbers && renderModeLeft === 'text' && renderModeRight === 'text'
   const diffEditorLayoutClass = layout === 'vertical' ? ClassNames.DiffEditorVertical : ClassNames.DiffEditorHorizontal
   const sashLayoutClass = layout === 'vertical' ? ClassNames.SashHorizontal : ClassNames.SashVertical
-  const leftDom = getContentLeftDom({
-    allowedLinkSchemes,
-    contentLeft,
-    errorCodeFrame: errorLeftCodeFrame,
-    errorMessage: errorLeftMessage,
-    errorStack: errorLeftStack,
-    inlineChanges,
-    itemHeight,
-    lineNumbers: showLineNumbers,
-    maxLineY,
-    minLineY,
-    tokenizedLines: tokenizedLinesLeft,
-    totalLineCount: totalLineCountLeft,
-    visibleLines: visibleLinesLeft,
-  })
-  const rightDom = getContentRightDom({
-    allowedLinkSchemes,
-    contentRight,
-    errorCodeFrame: errorRightCodeFrame,
-    errorMessage: errorRightMessage,
-    errorStack: errorRightStack,
-    inlineChanges,
-    itemHeight,
-    lineNumbers: showLineNumbers,
-    maxLineY,
-    minLineY,
-    tokenizedLines: tokenizedLinesRight,
-    totalLineCount: totalLineCountRight,
-    visibleLines: visibleLinesRight,
-  })
+  const leftDom =
+    renderModeLeft === 'image' && !errorLeftMessage
+      ? getImageLeftDom(uriLeft, imageSrcLeft)
+      : getContentLeftDom({
+          allowedLinkSchemes,
+          contentLeft,
+          errorCodeFrame: errorLeftCodeFrame,
+          errorMessage: errorLeftMessage,
+          errorStack: errorLeftStack,
+          inlineChanges,
+          itemHeight,
+          lineNumbers: showLineNumbers,
+          maxLineY,
+          minLineY,
+          tokenizedLines: tokenizedLinesLeft,
+          totalLineCount: totalLineCountLeft,
+          visibleLines: visibleLinesLeft,
+        })
+  const rightDom =
+    renderModeRight === 'image' && !errorRightMessage
+      ? getImageRightDom(uriRight, imageSrcRight)
+      : getContentRightDom({
+          allowedLinkSchemes,
+          contentRight,
+          errorCodeFrame: errorRightCodeFrame,
+          errorMessage: errorRightMessage,
+          errorStack: errorRightStack,
+          inlineChanges,
+          itemHeight,
+          lineNumbers: showLineNumbers,
+          maxLineY,
+          minLineY,
+          tokenizedLines: tokenizedLinesRight,
+          totalLineCount: totalLineCountRight,
+          visibleLines: visibleLinesRight,
+        })
   const scrollBarDom = scrollBarActive ? getScrollBarDom() : []
   const dom: readonly VirtualDomNode[] = [
     {

packages/diff-view/src/parts/GetInlineDiffLineNumberDom/GetInlineDiffLineNumberDom.ts

@@ -1,14 +1,14 @@
 import type { VirtualDomNode } from '@lvce-editor/virtual-dom-worker'
 import { text, VirtualDomElements } from '@lvce-editor/virtual-dom-worker'
 import type { InlineDiffRow } from '../GetInlineDiffRows/GetInlineDiffRows.ts'
-import * as ClassNames from '../ClassNames/ClassNames.ts'
 import { getInlineDiffLineNumberText } from '../GetInlineDiffLineNumberText/GetInlineDiffLineNumberText.ts'
+import { getLineNumberClassName } from '../GetLineNumberClassName/GetLineNumberClassName.ts'
 
 export const getInlineDiffLineNumberDom = (row: InlineDiffRow): readonly VirtualDomNode[] => {
   return [
     {
       childCount: 1,
-      className: ClassNames.DiffEditorLineNumber,
+      className: getLineNumberClassName(row.type),
       type: VirtualDomElements.Div,
     },
     text(getInlineDiffLineNumberText(row)),

packages/diff-view/src/parts/GetInlineDiffLineNumberText/GetInlineDiffLineNumberText.ts

@@ -1,7 +1,7 @@
 import type { InlineDiffRow } from '../GetInlineDiffRows/GetInlineDiffRows.ts'
 
 export const getInlineDiffLineNumberText = (row: InlineDiffRow): string => {
-  const left = row.lineNumberLeft === null ? '-' : String(row.lineNumberLeft)
-  const right = row.lineNumberRight === null ? '-' : String(row.lineNumberRight)
+  const left = row.lineNumberLeft === null ? '' : String(row.lineNumberLeft)
+  const right = row.lineNumberRight === null ? '' : String(row.lineNumberRight)
   return `${left} ${right}`
 }

packages/diff-view/src/parts/GetLineNumberClassName/GetLineNumberClassName.ts

@@ -0,0 +1,15 @@
+import * as ClassNames from '../ClassNames/ClassNames.ts'
+import { InlineDiffRowType, type InlineDiffRow } from '../GetInlineDiffRows/GetInlineDiffRows.ts'
+import { VisibleLineType, type VisibleLine } from '../VisibleLine/VisibleLine.ts'
+
+type LineNumberType = VisibleLine['type'] | InlineDiffRow['type']
+
+export const getLineNumberClassName = (type: LineNumberType = VisibleLineType.Normal): string => {
+  if (type === VisibleLineType.Removed || type === InlineDiffRowType.Deletion) {
+    return `${ClassNames.DiffEditorLineNumber} ${ClassNames.DiffEditorLineNumberDeletion}`
+  }
+  if (type === VisibleLineType.Added || type === InlineDiffRowType.Insertion) {
+    return `${ClassNames.DiffEditorLineNumber} ${ClassNames.DiffEditorLineNumberInsertion}`
+  }
+  return ClassNames.DiffEditorLineNumber
+}

packages/diff-view/src/parts/GetLineNumberDom/GetLineNumberDom.ts

@@ -1,13 +1,15 @@
 import type { VirtualDomNode } from '@lvce-editor/virtual-dom-worker'
 import { text, VirtualDomElements } from '@lvce-editor/virtual-dom-worker'
-import * as ClassNames from '../ClassNames/ClassNames.ts'
+import { getLineNumberClassName } from '../GetLineNumberClassName/GetLineNumberClassName.ts'
+import { VisibleLineType, type VisibleLine } from '../VisibleLine/VisibleLine.ts'
 
-const parentNode = {
-  childCount: 1,
-  className: ClassNames.DiffEditorLineNumber,
-  type: VirtualDomElements.Div,
-}
-
-export const getLineNumberDom = (lineNumber: number): readonly VirtualDomNode[] => {
-  return [parentNode, text(lineNumber === -1 ? '' : String(lineNumber))]
+export const getLineNumberDom = (lineNumber: number, type: VisibleLine['type'] = VisibleLineType.Normal): readonly VirtualDomNode[] => {
+  return [
+    {
+      childCount: 1,
+      className: getLineNumberClassName(type),
+      type: VirtualDomElements.Div,
+    },
+    text(lineNumber === -1 ? '' : String(lineNumber)),
+  ]
 }

packages/diff-view/src/parts/GetVisibleLinesDom/GetLineDom/GetLineDom.ts

@@ -1,16 +1,18 @@
 import type { VirtualDomNode } from '@lvce-editor/virtual-dom-worker'
 import { text, VirtualDomElements } from '@lvce-editor/virtual-dom-worker'
 import type { VisibleLine } from '../../VisibleLine/VisibleLine.ts'
+import * as ClassNames from '../../ClassNames/ClassNames.ts'
 import { getRowClassName } from '../GetRowClassName/GetRowClassName.ts'
 import { getTokenDom } from '../GetTokenDom/GetTokenDom.ts'
 
 export const getLineDom = (line: VisibleLine): readonly VirtualDomNode[] => {
   const children = line.tokens.length === 0 ? [text('')] : line.tokens.flatMap(getTokenDom)
   const childCount = line.tokens.length === 0 ? 1 : line.tokens.length
+  const className = line.lineNumber === -1 ? `${ClassNames.EditorRow} ${ClassNames.DiffEditorLineMissing}` : getRowClassName(line.type)
   return [
     {
       childCount,
-      className: getRowClassName(line.type),
+      className,
       type: VirtualDomElements.Div,
     },
     ...children,

packages/diff-view/src/parts/RenderCss/RenderCss.ts

@@ -14,6 +14,18 @@ export const renderCss = (oldState: DiffViewState, newState: DiffViewState): any
   const inlineGutterExtraWidth = 9 + gutterPaddingWidth
   const css = `
 :root {
+  --DiffBackground: #0b0d10;
+  --DiffForeground: rgba(255, 255, 255, 0.88);
+  --DiffGutterBackground: #0f1218;
+  --DiffGutterForeground: rgba(255, 255, 255, 0.58);
+  --DiffSeparatorColor: rgba(255, 255, 255, 0.12);
+  --DiffMissingLineBackground: rgba(255, 255, 255, 0.035);
+  --DiffDeletionBackground: rgba(248, 81, 73, 0.2);
+  --DiffDeletionForeground: #ffb3ad;
+  --DiffDeletionAccent: #ff5f6d;
+  --DiffInsertionBackground: rgba(46, 160, 67, 0.22);
+  --DiffInsertionForeground: #b7f7c0;
+  --DiffInsertionAccent: #3fb950;
   --ItemHeight: ${itemHeight}px;
   --LeftWidth: ${leftWidth}px;
   --RightWidth: ${rightWidth}px;
@@ -27,6 +39,8 @@ export const renderCss = (oldState: DiffViewState, newState: DiffViewState): any
 
 
 .DiffEditor {
+  background: var(--DiffBackground);
+  color: var(--DiffForeground);
   display: flex;
   position: relative;
   width: 100%;
@@ -68,14 +82,16 @@ export const renderCss = (oldState: DiffViewState, newState: DiffViewState): any
 }
 
 .DiffEditorGutter {
+  background: var(--DiffGutterBackground);
+  border-right: 1px solid var(--DiffSeparatorColor);
   box-sizing: border-box;
-  color: rgba(255, 255, 255, 0.55);
+  color: var(--DiffGutterForeground);
   display: flex;
   flex-direction: column;
   flex-shrink: 0;
   font-family: monospace;
+  font-variant-numeric: tabular-nums;
   overflow: hidden;
-  padding: 0 8px 0 12px;
   text-align: right;
   user-select: none;
   width: calc(${gutterWidth} + ${gutterPaddingWidth}px);
@@ -86,18 +102,39 @@ export const renderCss = (oldState: DiffViewState, newState: DiffViewState): any
 }
 
 .DiffEditorLineNumber {
+  border-left: 2px solid transparent;
   box-sizing: border-box;
   height: var(--ItemHeight);
   line-height: var(--ItemHeight);
+  padding: 0 10px 0 6px;
   white-space: pre;
 }
 
+.DiffEditor .DiffEditorLineNumber {
+  color: var(--DiffGutterForeground);
+}
+
+.DiffEditor .DiffEditorLineNumberDeletion {
+  background: var(--DiffDeletionBackground);
+  border-left-color: var(--DiffDeletionAccent);
+  color: var(--DiffDeletionAccent);
+}
+
+.DiffEditor .DiffEditorLineNumberInsertion {
+  background: var(--DiffInsertionBackground);
+  border-left-color: var(--DiffInsertionAccent);
+  color: var(--DiffInsertionAccent);
+}
+
 .DiffEditorLineNumberEmpty {
+  background-color: var(--DiffMissingLineBackground);
+  background-image: repeating-linear-gradient(135deg, transparent 0, transparent 5px, rgba(255, 255, 255, 0.06) 5px, rgba(255, 255, 255, 0.06) 6px);
   box-sizing: border-box;
   flex-shrink: 0;
 }
 
 .DiffEditorRows {
+  background: var(--DiffBackground);
   contain: strict;
   cursor: text;
   flex: 1;
@@ -110,17 +147,26 @@ export const renderCss = (oldState: DiffViewState, newState: DiffViewState): any
   box-sizing: border-box;
   height: var(--ItemHeight);
   line-height: var(--ItemHeight);
+  padding: 0 12px;
   white-space: pre;
 }
 
 .DiffEditor .Deletion {
-  background: rgba(255, 0, 0, 0.16);
-  color: #ffb3b3;
+  background: var(--DiffDeletionBackground);
+  box-shadow: inset 3px 0 var(--DiffDeletionAccent);
+  color: var(--DiffDeletionForeground);
 }
 
 .DiffEditor .Insertion {
-  background: rgba(0, 128, 0, 0.18);
-  color: #b7f7c0;
+  background: var(--DiffInsertionBackground);
+  box-shadow: inset 3px 0 var(--DiffInsertionAccent);
+  color: var(--DiffInsertionForeground);
+}
+
+.DiffEditorLineMissing {
+  background-color: var(--DiffMissingLineBackground);
+  background-image: repeating-linear-gradient(135deg, transparent 0, transparent 5px, rgba(255, 255, 255, 0.06) 5px, rgba(255, 255, 255, 0.06) 6px);
+  box-shadow: none;
 }
 
 .ImageContent {

packages/diff-view/test/GetContentLeftDom.test.ts

@@ -188,7 +188,7 @@ test('getContentLeftDom renders paired deletion and insertion on the same row',
     text('1'),
     {
       childCount: 1,
-      className: ClassNames.DiffEditorLineNumber,
+      className: `${ClassNames.DiffEditorLineNumber} ${ClassNames.DiffEditorLineNumberDeletion}`,
       type: VirtualDomElements.Div,
     },
     text('2'),

packages/diff-view/test/GetContentRightDom.test.ts

@@ -127,7 +127,7 @@ test('getContentRightDom renders paired deletion and insertion on the same row',
     text('1'),
     {
       childCount: 1,
-      className: ClassNames.DiffEditorLineNumber,
+      className: `${ClassNames.DiffEditorLineNumber} ${ClassNames.DiffEditorLineNumberInsertion}`,
       type: VirtualDomElements.Div,
     },
     text('2'),

packages/diff-view/test/GetDiffEditorVirtualDom.test.ts

@@ -184,7 +184,7 @@ test('getDiffEditorVirtualDom omits line number gutters when disabled in state',
   ])
 })
 
-test.skip('getDiffEditorVirtualDom renders image panes when render mode is image', (): void => {
+test('getDiffEditorVirtualDom renders image panes when render mode is image', (): void => {
   const result = getDiffEditorVirtualDom({
     ...createDefaultState(),
     contentLeft: 'ignored-left-content',
@@ -446,16 +446,16 @@ test('getDiffEditorVirtualDom renders inline mode as a single combined diff pane
     text('1 1'),
     {
       childCount: 1,
-      className: ClassNames.DiffEditorLineNumber,
+      className: `${ClassNames.DiffEditorLineNumber} ${ClassNames.DiffEditorLineNumberDeletion}`,
       type: VirtualDomElements.Div,
     },
-    text('2 -'),
+    text('2 '),
     {
       childCount: 1,
-      className: ClassNames.DiffEditorLineNumber,
+      className: `${ClassNames.DiffEditorLineNumber} ${ClassNames.DiffEditorLineNumberInsertion}`,
       type: VirtualDomElements.Div,
     },
-    text('- 2'),
+    text(' 2'),
     {
       childCount: 1,
       className: ClassNames.DiffEditorLineNumber,