fix: showing only unused attributes in the left part of module editor

src/app/module-editor/[moduleId]/components/shared/AttributesTable/AttributesTable.tsx

@@ -1,10 +1,16 @@
+import { useMemo } from "react";
 import { Box, Center, Text } from "@mantine/core";
 import useAttributesTableColumns from "@/app/module-editor/[moduleId]/components/shared/AttributesTable/useAttributesTableColumns";
 import { useModuleEditorContext } from "@/app/module-editor/[moduleId]/contexts/ModuleEditorContext";
 import BaseTable from "@/components/ui/BaseTable/BaseTable";
 
 const AttributesTable = () => {
-    const { attributes } = useModuleEditorContext();
+    const { attributes, module } = useModuleEditorContext();
+    const unusedAttributes = useMemo(() => {
+        const usedAttrIds = new Set(module?.attributes.map(a => a.id));
+        return attributes.filter(a => !usedAttrIds.has(a.id));
+    }, [module, attributes]);
+
     const columns = useAttributesTableColumns();
 
     if (attributes.length === 0) {
@@ -22,7 +28,7 @@ const AttributesTable = () => {
             <BaseTable
                 withTableBorder
                 columns={columns}
-                records={attributes}
+                records={unusedAttributes}
                 verticalSpacing={"md"}
                 groups={undefined}
                 styles={{ table: { width: "100%" } }}