From 0acae8211afb1194035a1801a7cd9d9ed1d66eae Mon Sep 17 00:00:00 2001 From: Adam <2363879+adamdotdevin@users.noreply.github.com> Date: Mon, 27 Oct 2025 06:48:03 -0500 Subject: wip: desktop work --- packages/desktop/src/components/diff.tsx | 27 ++++++++++++++++++++++----- 1 file changed, 22 insertions(+), 5 deletions(-) (limited to 'packages/desktop/src/components/diff.tsx') diff --git a/packages/desktop/src/components/diff.tsx b/packages/desktop/src/components/diff.tsx index d8457b528..b3d6d7e25 100644 --- a/packages/desktop/src/components/diff.tsx +++ b/packages/desktop/src/components/diff.tsx @@ -2,8 +2,9 @@ import { type FileContents, FileDiff, type DiffLineAnnotation, + type HunkData, DiffFileRendererOptions, - registerCustomTheme, + // registerCustomTheme, } from "@pierre/precision-diffs" import { ComponentProps, createEffect, splitProps } from "solid-js" @@ -15,8 +16,7 @@ export type DiffProps = Omit, "themes"> & { classList?: ComponentProps<"div">["classList"] } -// @ts-expect-error -registerCustomTheme("opencode", () => import("./theme.json")) +// registerCustomTheme("opencode", () => import("./theme.json")) // interface ThreadMetadata { // threadId: string @@ -49,7 +49,7 @@ export function Diff(props: DiffProps) { // annotations and a container element to hold the diff createEffect(() => { const instance = new FileDiff({ - theme: "opencode", + theme: "pierre-light", // Or can also provide a 'themes' prop, which allows the code to adapt // to your OS light or dark theme // themes: { dark: 'pierre-night', light: 'pierre-light' }, @@ -97,7 +97,24 @@ export function Diff(props: DiffProps) { // // 'simple': // Just a subtle bar separator between each hunk - hunkSeparators: "line-info", + // hunkSeparators: "line-info", + hunkSeparators(hunkData: HunkData) { + const fragment = document.createDocumentFragment() + const numCol = document.createElement("div") + numCol.textContent = `${hunkData.lines}` + numCol.style.position = "sticky" + numCol.style.left = "0" + numCol.style.backgroundColor = "var(--pjs-bg)" + numCol.style.zIndex = "2" + fragment.appendChild(numCol) + const contentCol = document.createElement("div") + contentCol.textContent = "unmodified lines" + contentCol.style.position = "sticky" + contentCol.style.width = "var(--pjs-column-content-width)" + contentCol.style.left = "var(--pjs-column-number-width)" + fragment.appendChild(contentCol) + return fragment + }, // On lines that have both additions and deletions, we can run a // separate diff check to mark parts of the lines that change. // 'none': -- cgit v1.2.3