Merge pull request #3377 from opral/lixfm-1-checkpoint-timeline

Add LIXFM–1 checkpoint timeline

.changeset/shy-lizards-sing.md

@@ -0,0 +1,23 @@
+---
+"lix-file-manager": patch
+"@lix-js/plugin-csv": patch
+"@lix-js/sdk": patch
+---
+
+@lix-js/sdk:
+- define UiDiffComponent type
+- diff components can now consume multiple diffs
+
+@lix-js/plugin-csv:
+- update to use new diff component type
+- display multiple diffs in a single component
+- add rowId to snapshot content
+- group diffs by rowId
+
+lix-file-manager:
+- add checkpoint timeline instead of change list
+- refactor API diff component rendering
+- refactor queries to use new UiDiffComponent type
+
+PR URL:
+https://github.com/opral/monorepo/pull/3377

packages/lix-file-manager/package.json

@@ -37,9 +37,9 @@
 		"native-file-system-adapter": "^3.0.1",
 		"papaparse": "^5.4.1",
 		"posthog-js": "^1.91.1",
-		"react": "^18.3.1",
+		"react": "^19.0.0",
 		"react-datasheet-grid": "^4.11.4",
-		"react-dom": "^18.3.1",
+		"react-dom": "^19.0.0",
 		"react-dropzone": "^14.2.10",
 		"react-error-boundary": "^4.1.2",
 		"react-hook-form": "^7.53.2",

packages/lix-file-manager/src/components/ChangeDiffComponent.tsx

@@ -0,0 +1,51 @@
+import { useEffect, useState } from "react";
+import { UiDiffComponentProps } from "@lix-js/sdk";
+import { lixAtom } from "@/state.ts";
+import { useAtom } from "jotai/react";
+import clsx from "clsx";
+
+export const ChangeDiffComponent = (props: {
+	diffs: UiDiffComponentProps["diffs"];
+	className?: string;
+}) => {
+	const [lix] = useAtom(lixAtom);
+	const [isComponentLoaded, setIsComponentLoaded] = useState(false);
+
+	const pluginKey = props.diffs[0]?.plugin_key;
+	const CustomElementName = `diff-${pluginKey.replace(/_/g, "-")}`;
+
+	useEffect(() => {
+		const loadDiffComponent = async () => {
+			const component = (await lix.plugin.getAll()).find(
+				(p) => p.key === pluginKey
+			)?.diffUiComponent;
+
+			if (!customElements.get(CustomElementName)) {
+				if (component) {
+					customElements.define(CustomElementName, component);
+					setIsComponentLoaded(true);
+					} else {
+					console.warn(`No diff UI component found for plugin key '${pluginKey}'`);
+					// Fallback logic
+					}
+			} else {
+				setIsComponentLoaded(true);
+			}
+		};
+
+		loadDiffComponent();
+	}, [lix, pluginKey]);
+
+	if (!isComponentLoaded) {
+		return null;
+	}
+
+	return (
+		<div className={clsx("w-full overflow-x-auto pb-4", props.className)}>
+			<CustomElementName
+				// @ts-expect-error - Custom element props
+				diffs={props.diffs}
+			/>
+		</div>
+	);
+};

packages/lix-file-manager/src/components/ChangeDot.tsx

@@ -3,13 +3,14 @@ import { cn } from "@/lib/utils.ts";
 interface ChangeDotProps {
   top?: boolean;
   bottom?: boolean;
+  highlighted?: boolean;
 }
 
-const ChangeDot = ({ top, bottom }: ChangeDotProps) => {
+const ChangeDot = ({ top, bottom, highlighted }: ChangeDotProps) => {
   return (
     <div className="flex flex-col justify-center items-center w-10 h-auto relative gap-0.5">
       <div className={(cn("h-[17px] w-0.5", top && "bg-slate-200"))} />
-      <div className="flex-grow-0 flex-shrink-0 w-[7px] h-[7px] rounded bg-slate-700" />
+      <div className={(cn("flex-grow-0 flex-shrink-0 w-[7px] h-[7px] rounded", highlighted ? "bg-primary" : "bg-slate-700"))} />
       <div className={(cn("flex-grow w-0.5", bottom && "bg-slate-200"))} />
     </div>
   )