refactor(ControlsClientPage): integrate setDisplayedData for improved data handling

- add useEffect to synchronize displayed data with dataForDisplay
- enhance useChangeTracking with displayedDataRef for better state management
- improve code readability with consistent formatting and comments

Author: claudfuen

apps/framework-editor/app/(pages)/controls/ControlsClientPage.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import PageLayout from "@/app/components/PageLayout";
-import { useMemo, useState } from "react";
+import { useMemo, useState, useEffect } from "react";
 import { toast } from "sonner";
 import { friendlyDateColumnBase } from "../../components/gridUtils";
 import { TableToolbar } from "../../components/TableToolbar";
@@ -132,6 +132,7 @@ export function ControlsClientPage({
 		isDirty,
 		createdRowIds,
 		changesSummaryString,
+		setDisplayedData,
 	} = useChangeTracking(initialGridData);
 
 	const [selectedFramework, setSelectedFramework] = useState<string>("");
@@ -196,6 +197,10 @@ export function ControlsClientPage({
 		});
 	}, [sortedDataWithPotentialTimestamps]);
 
+	useEffect(() => {
+		setDisplayedData(dataForDisplay);
+	}, [dataForDisplay, setDisplayedData]);
+
 	const columns: Column<ControlsPageGridData>[] = [
 		{ ...keyColumn("name", textColumn), title: "Name", minWidth: 300 },
 		{