feat(web): customize diff colors and markers

Author: SunkenInTime

apps/web/src/components/chat/MessagesTimeline.tsx

@@ -30,7 +30,6 @@ import {
   type ReactNode,
 } from "react";
 import { LegendList, type LegendListRef } from "@legendapp/list/react";
-import { FileDiff } from "@pierre/diffs/react";
 import {
   deriveTimelineEntries,
   workEntryIndicatesToolFailure,
@@ -45,6 +44,7 @@ import {
   resolveFileDiffPath,
 } from "../../lib/diffRendering";
 import ChatMarkdown from "../ChatMarkdown";
+import { StyledFileDiff } from "../diffs/StyledDiffCodeView";
 import {
   BotIcon,
   CheckIcon,
@@ -1869,7 +1869,7 @@ function UserMessageReviewCommentCard({ comment }: { comment: ReviewCommentConte
       )}
       {renderablePatch?.kind === "files" &&
         renderablePatch.files.map((fileDiff) => (
-          <FileDiff
+          <StyledFileDiff
             key={resolveFileDiffPath(fileDiff)}
             fileDiff={fileDiff}
             options={{

apps/web/src/components/diffs/StyledDiffCodeView.test.tsx

@@ -4,6 +4,8 @@ import { beforeEach, describe, expect, it, vi } from "vite-plus/test";
 const testState = vi.hoisted(() => ({
   codeViewClassName: null as string | null,
   codeViewOptions: null as Record<string, unknown> | null,
+  fileDiffClassName: null as string | null,
+  fileDiffOptions: null as Record<string, unknown> | null,
 }));
 
 vi.mock("@pierre/diffs/react", () => ({
@@ -12,14 +14,25 @@ vi.mock("@pierre/diffs/react", () => ({
     testState.codeViewOptions = props.options;
     return null;
   },
+  FileDiff: (props: { className: string; options: Record<string, unknown> }) => {
+    testState.fileDiffClassName = props.className;
+    testState.fileDiffOptions = props.options;
+    return null;
+  },
 }));
 
-import { StyledDiffCodeView } from "./StyledDiffCodeView";
+import {
+  getDiffColorSchemeClassName,
+  StyledDiffCodeView,
+  StyledFileDiff,
+} from "./StyledDiffCodeView";
 
 describe("StyledDiffCodeView", () => {
   beforeEach(() => {
     testState.codeViewClassName = null;
     testState.codeViewOptions = null;
+    testState.fileDiffClassName = null;
+    testState.fileDiffOptions = null;
   });
 
   it("always pairs the shared diff styling with its virtualized geometry", () => {
@@ -36,12 +49,15 @@ describe("StyledDiffCodeView", () => {
     );
 
     expect(testState.codeViewClassName).toBe(
-      "diff-render-surface [--code-background:var(--background)] outline-none min-h-0",
+      "diff-render-surface [--code-background:var(--background)] outline-none " +
+        "[--t3-diff-addition-color:var(--success)] " +
+        "[--t3-diff-deletion-color:var(--destructive)] min-h-0",
     );
     expect(testState.codeViewOptions).toMatchObject({
       theme: "pierre-dark",
       stickyHeaders: true,
       loadDiffFiles,
+      diffIndicators: "bars",
       itemMetrics: {
         diffHeaderHeight: 32,
         hunkSeparatorHeight: 24,
@@ -57,4 +73,38 @@ describe("StyledDiffCodeView", () => {
       expect.stringContaining(")[data-expand-index]\n  [data-unmodified-lines]"),
     );
   });
+
+  it("maps the alternate palette to blue additions and orange deletions", () => {
+    expect(getDiffColorSchemeClassName("orange-blue")).toBe(
+      "[--t3-diff-addition-color:var(--info)] [--t3-diff-deletion-color:var(--warning)]",
+    );
+  });
+
+  it("applies the same appearance defaults to compact file diffs", () => {
+    renderToStaticMarkup(
+      <StyledFileDiff
+        fileDiff={{
+          name: "app.ts",
+          type: "change",
+          hunks: [],
+          splitLineCount: 0,
+          unifiedLineCount: 0,
+          isPartial: true,
+          deletionLines: [],
+          additionLines: [],
+        }}
+        options={{ diffStyle: "unified", theme: "pierre-dark" }}
+      />,
+    );
+
+    expect(testState.fileDiffClassName).toContain("[--t3-diff-addition-color:var(--success)]");
+    expect(testState.fileDiffOptions).toMatchObject({
+      diffStyle: "unified",
+      theme: "pierre-dark",
+      diffIndicators: "bars",
+    });
+    expect(testState.fileDiffOptions?.unsafeCSS).toEqual(
+      expect.stringContaining("--diffs-addition-color-override"),
+    );
+  });
 });

apps/web/src/components/diffs/StyledDiffCodeView.tsx

@@ -4,11 +4,15 @@ import {
   type CodeViewHandle,
   type CodeViewProps,
   type ControlledCodeViewProps,
+  FileDiff,
+  type FileDiffProps,
   type UncontrolledCodeViewProps,
 } from "@pierre/diffs/react";
 /* oxlint-enable eslint/no-restricted-imports */
 import type { Ref } from "react";
+import type { DiffColorScheme } from "@t3tools/contracts/settings";
 
+import { useClientSettings } from "~/hooks/useSettings";
 import { DIFF_SURFACE_THEME_UNSAFE_CSS } from "~/lib/diffRendering";
 
 const DIFF_VIEW_UNSAFE_CSS = `${DIFF_SURFACE_THEME_UNSAFE_CSS}
@@ -258,9 +262,29 @@ const DIFF_VIEW_UNSAFE_CSS = `${DIFF_SURFACE_THEME_UNSAFE_CSS}
 }
 `;
 
+const DIFF_COLOR_SCHEME_CLASSES: Record<DiffColorScheme, string> = {
+  "red-green":
+    "[--t3-diff-addition-color:var(--success)] [--t3-diff-deletion-color:var(--destructive)]",
+  "orange-blue": "[--t3-diff-addition-color:var(--info)] [--t3-diff-deletion-color:var(--warning)]",
+};
+
+export function getDiffColorSchemeClassName(scheme: DiffColorScheme): string {
+  return DIFF_COLOR_SCHEME_CLASSES[scheme];
+}
+
+function getDiffSurfaceClassName(colorScheme: DiffColorScheme, className?: string): string {
+  return [
+    "diff-render-surface [--code-background:var(--background)] outline-none",
+    getDiffColorSchemeClassName(colorScheme),
+    className,
+  ]
+    .filter(Boolean)
+    .join(" ");
+}
+
 export type StyledDiffCodeViewOptions<LAnnotation> = Omit<
   NonNullable<CodeViewProps<LAnnotation>["options"]>,
-  "unsafeCSS" | "itemMetrics" | "layout"
+  "unsafeCSS" | "itemMetrics" | "layout" | "diffIndicators"
 >;
 
 type StyledDiffCodeViewProps<LAnnotation> = (
@@ -284,19 +308,19 @@ export function StyledDiffCodeView<LAnnotation = undefined>({
   unsafeCSSExtra,
   ...props
 }: StyledDiffCodeViewProps<LAnnotation>) {
+  const diffColorScheme = useClientSettings((settings) => settings.diffColorScheme);
+  const diffIndicatorStyle = useClientSettings((settings) => settings.diffIndicatorStyle);
+
   return (
     <CodeView<LAnnotation>
       {...props}
       {...(viewerRef ? { ref: viewerRef } : {})}
       // The custom element itself is focusable for keyboard scrolling. Its native outline sits
       // outside the panel clipping boundary; actual controls inside retain their own indicators.
-      className={
-        className
-          ? `diff-render-surface [--code-background:var(--background)] outline-none ${className}`
-          : "diff-render-surface [--code-background:var(--background)] outline-none"
-      }
+      className={getDiffSurfaceClassName(diffColorScheme, className)}
       options={{
         ...options,
+        diffIndicators: diffIndicatorStyle,
         unsafeCSS: unsafeCSSExtra
           ? `${DIFF_VIEW_UNSAFE_CSS}\n${unsafeCSSExtra}`
           : DIFF_VIEW_UNSAFE_CSS,
@@ -320,3 +344,34 @@ export function StyledDiffCodeView<LAnnotation = undefined>({
     />
   );
 }
+
+export type StyledFileDiffOptions<LAnnotation> = Omit<
+  NonNullable<FileDiffProps<LAnnotation>["options"]>,
+  "unsafeCSS" | "diffIndicators"
+>;
+
+type StyledFileDiffProps<LAnnotation> = Omit<FileDiffProps<LAnnotation>, "options"> & {
+  readonly options?: StyledFileDiffOptions<LAnnotation>;
+};
+
+/** The non-virtualized counterpart used for compact inline review-comment diffs. */
+export function StyledFileDiff<LAnnotation = undefined>({
+  options,
+  className,
+  ...props
+}: StyledFileDiffProps<LAnnotation>) {
+  const diffColorScheme = useClientSettings((settings) => settings.diffColorScheme);
+  const diffIndicatorStyle = useClientSettings((settings) => settings.diffIndicatorStyle);
+
+  return (
+    <FileDiff<LAnnotation>
+      {...props}
+      className={getDiffSurfaceClassName(diffColorScheme, className)}
+      options={{
+        ...options,
+        diffIndicators: diffIndicatorStyle,
+        unsafeCSS: DIFF_SURFACE_THEME_UNSAFE_CSS,
+      }}
+    />
+  );
+}