Refactor version management: replace crypto.randomUUID with generateUniqueId, add new icons, and enhance version editing features

app/src/components/ui/compareVersion/CompareLayOut.tsx

@@ -8,6 +8,7 @@ import { useSaveVersion } from "../../../store/builder/store";
 import Search from "../inputs/Search";
 import OuterClick from "../../../utils/outerClick";
 import RegularDropDown from "../inputs/RegularDropDown";
+import { useProductStore } from "../../../store/simulation/useProductStore";
 
 interface Layout {
   id: number;
@@ -18,6 +19,8 @@ interface CompareLayoutProps {
 }
 
 const CompareLayOut: React.FC<CompareLayoutProps> = ({ dummyLayouts }) => {
+  const { products } = useProductStore();
+  console.log('products: ', products);
   const [width, setWidth] = useState("50vw");
   const [isResizing, setIsResizing] = useState(false);
   const [showLayoutDropdown, setShowLayoutDropdown] = useState(false);
@@ -141,17 +144,17 @@ const CompareLayOut: React.FC<CompareLayoutProps> = ({ dummyLayouts }) => {
                   <div className="header">Layouts</div>
                   <Search onChange={() => {}} />
                   <div className="layouts-container">
-                    {dummyLayouts.map((layout) => (
+                    {products.map((layout) => (
                       <button
-                        key={layout.id}
+                        key={layout.productId}
                         className="layout-wrapper"
                         onClick={() => {
-                          handleSelectLayout(layout.name);
+                          handleSelectLayout(layout.productName);
                           setShowLayoutDropdown(false);
                         }}
                       >
                         <LayoutIcon />
-                        <div className="layout">{layout.name}</div>
+                        <div className="layout">{layout.productName}</div>
                       </button>
                     ))}
                   </div>
@@ -165,7 +168,7 @@ const CompareLayOut: React.FC<CompareLayoutProps> = ({ dummyLayouts }) => {
           <div className="selectLayout-wrapper">
             <RegularDropDown
               header={selectedLayout}
-              options={dummyLayouts.map((l) => l.name)} // Pass layout names as options
+              options={products.map((l) => l.productName)} // Pass layout names as options
               onSelect={handleSelectLayout}
               search={false}
             />