feat: add scrollBarBackgroundImage to DiffViewState and related functionality

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

@@ -51,6 +51,7 @@ export const createDefaultState = (): DiffViewState => ({
   rightWidth: 48,
   root: '/',
   scrollBarActive: false,
+  scrollBarBackgroundImage: 'none',
   scrollBarDragOffsetY: 0,
   scrollBarHeight: 0,
   splitButtonEnabled: false,

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

@@ -13,6 +13,7 @@ export const isEqual = (oldState: DiffViewState, newState: DiffViewState): boole
     oldState.maxLineY === newState.maxLineY &&
     oldState.minLineY === newState.minLineY &&
     oldState.rightWidth === newState.rightWidth &&
+    oldState.scrollBarBackgroundImage === newState.scrollBarBackgroundImage &&
     oldState.scrollBarHeight === newState.scrollBarHeight &&
     oldState.totalLineCount === newState.totalLineCount
   )

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

@@ -56,6 +56,7 @@ export interface DiffViewState {
   readonly rightWidth: number
   readonly root: string
   readonly scrollBarActive: boolean
+  readonly scrollBarBackgroundImage: string
   readonly scrollBarDragOffsetY: number
   readonly scrollBarHeight: number
   readonly splitButtonEnabled: boolean

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

@@ -3,6 +3,7 @@ import { getGutterWidthVariable } from '../GetGutterWidthVariable/GetGutterWidth
 import { getInlineDiffState } from '../GetInlineDiffState/GetInlineDiffState.ts'
 import { getLineCount } from '../GetLineCount/GetLineCount.ts'
 import { getRenderMode } from '../GetRenderMode/GetRenderMode.ts'
+import { getScrollBarBackgroundImage } from '../GetScrollBarBackgroundImage/GetScrollBarBackgroundImage.ts'
 import { getScrollState } from '../GetScrollState/GetScrollState.ts'
 import { getDisplayedContent } from '../GetTotalLineCount/GetTotalLineCount.ts'
 import { getVisibleLinesState } from '../GetVisibleLinesState/GetVisibleLinesState.ts'
@@ -54,6 +55,7 @@ export const reloadContent = async (
   const syntaxHighlightingState =
     canHighlightLeft || canHighlightRight ? await loadSyntaxHighlighting(contentLeft, contentRight, uriLeft, uriRight, platform, assetDir) : undefined
   const [imageSrcLeft, imageSrcRight] = await loadImages(renderModeLeft, renderModeRight, errorLeftMessage, errorRightMessage, uriLeft, uriRight)
+  const scrollBarBackgroundImage = getScrollBarBackgroundImage(inlineChanges, totalLineCount)
 
   const nextState = {
     ...state,
@@ -74,6 +76,7 @@ export const reloadContent = async (
     languageIdRight: syntaxHighlightingState?.languageIdRight || 'unknown',
     renderModeLeft,
     renderModeRight,
+    scrollBarBackgroundImage,
     tokenizedLinesLeft: syntaxHighlightingState?.tokenizedLinesLeft || [],
     tokenizedLinesRight: syntaxHighlightingState?.tokenizedLinesRight || [],
     totalLineCount,

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

@@ -2,13 +2,11 @@ import { ViewletCommand } from '@lvce-editor/constants'
 import type { DiffViewState } from '../DiffViewState/DiffViewState.ts'
 import { getCss } from '../GetCss/GetCss.ts'
 import { getSashWidth } from '../GetPaneWidths/GetPaneWidths.ts'
-import { getScrollBarBackgroundImage } from '../GetScrollBarBackgroundImage/GetScrollBarBackgroundImage.ts'
 import { getScrollBarThumbTop } from '../GetScrollBarThumbTop/GetScrollBarThumbTop.ts'
 
 export const renderCss = (oldState: DiffViewState, newState: DiffViewState): any => {
-  const { deltaY, finalDeltaY, gutterWidthVariable, height, id, inlineChanges, itemHeight, leftWidth, rightWidth, scrollBarHeight, totalLineCount } = newState
+  const { deltaY, finalDeltaY, gutterWidthVariable, height, id, itemHeight, leftWidth, rightWidth, scrollBarBackgroundImage, scrollBarHeight } = newState
   const scrollBarThumbTop = getScrollBarThumbTop(height, scrollBarHeight, deltaY, finalDeltaY)
-  const scrollBarBackgroundImage = getScrollBarBackgroundImage(inlineChanges, totalLineCount)
   const { layout } = newState
   const staticCss = getCss()
   const gutterWidth = 'var(--GutterWidth)'

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

@@ -1,4 +1,5 @@
 import type { DiffMode, DiffViewState } from '../DiffViewState/DiffViewState.ts'
+import { getScrollBarBackgroundImage } from '../GetScrollBarBackgroundImage/GetScrollBarBackgroundImage.ts'
 import { getScrollState } from '../GetScrollState/GetScrollState.ts'
 import { getTotalLineCount } from '../GetTotalLineCount/GetTotalLineCount.ts'
 import { getVisibleLinesState } from '../GetVisibleLinesState/GetVisibleLinesState.ts'
@@ -22,9 +23,11 @@ export const setDiffMode = (state: DiffViewState, diffMode: DiffMode): DiffViewS
     state.renderModeRight,
   )
   const scrollState = getScrollState(state.height, state.itemHeight, totalLineCount, state.minimumSliderSize, state.deltaY)
+  const scrollBarBackgroundImage = getScrollBarBackgroundImage(state.inlineChanges, totalLineCount)
   const nextState = {
     ...state,
     diffMode,
+    scrollBarBackgroundImage,
     totalLineCount,
     ...scrollState,
   }

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

@@ -0,0 +1,16 @@
+import { expect, test } from '@jest/globals'
+import { createDefaultState } from '../src/parts/CreateDefaultState/CreateDefaultState.ts'
+import { isEqual } from '../src/parts/DiffCss/DiffCss.ts'
+
+test('isEqual returns false when cached scroll bar background image changes', (): void => {
+  const oldState = {
+    ...createDefaultState(),
+    scrollBarBackgroundImage: 'none',
+  }
+  const newState = {
+    ...oldState,
+    scrollBarBackgroundImage: 'linear-gradient(to bottom, transparent 0%, red 0%, red 50%, transparent 50%)',
+  }
+
+  expect(isEqual(oldState, newState)).toBe(false)
+})

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

@@ -3,7 +3,22 @@
 import { createDefaultState } from '../src/parts/CreateDefaultState/CreateDefaultState.ts'
 import { renderCss } from '../src/parts/RenderCss/RenderCss.ts'
 
+test('renderCss uses cached scroll bar background image from state', (): void => {
+  const oldState = createDefaultState()
+  const newState = {
+    ...oldState,
+    id: 1,
+    scrollBarBackgroundImage: 'linear-gradient(to bottom, transparent 10%, red 10%, red 20%, transparent 20%)',
+  }
+
+  const result = renderCss(oldState, newState)
+
+  expect(result[0]).toBe(ViewletCommand.SetCss)
+  expect(result[1]).toBe(1)
+  expect(result[2]).toContain('--ScrollBarBackgroundImage: linear-gradient(to bottom, transparent 10%, red 10%, red 20%, transparent 20%);')
+})
+
 test.skip('renderCss renders left and right widths as css variables', (): void => {
   const oldState = createDefaultState()
   const newState = {
     ...oldState,
@@ -56,7 +71,7 @@
   expect(result[2]).toContain('rgba(46, 160, 67, 0.72)')
 })
 
 test.skip('renderCss renders stacked pane heights for vertical layout', (): void => {
   const oldState = createDefaultState()
   const newState = {
     ...oldState,
@@ -85,7 +100,7 @@
   expect(result[2]).toContain('.SashHorizontal {')
 })
 
 test.skip('renderCss includes inline diff styling hooks', (): void => {
   const oldState = createDefaultState()
   const newState = {
     ...oldState,