wip: desktop work

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<T = {}> = Omit<DiffFileRendererOptions<T>, "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<T>(props: DiffProps<T>) {
   // annotations and a container element to hold the diff
   createEffect(() => {
     const instance = new FileDiff<T>({
-      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<T>(props: DiffProps<T>) {
       //
       // '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':

packages/ui/package.json

@@ -24,7 +24,7 @@
   },
   "dependencies": {
     "@kobalte/core": "catalog:",
-    "@pierre/precision-diffs": "0.0.2-alpha.1-1",
+    "@pierre/precision-diffs": "catalog:",
     "@solidjs/meta": "catalog:",
     "fuzzysort": "catalog:",
     "luxon": "catalog:",