From 4d0fb3116b96e038e01c5a7f69a87b9ee0f54ec1 Mon Sep 17 00:00:00 2001
From: timoconnellaus <tim.oconnell.australia@gmail.com>
Date: Tue, 21 May 2024 15:30:45 +1000
Subject: [PATCH 1/4] Feat: subgroups in editor sidebar

---
 .../tinacms/form-builder/fields-builder.tsx   | 78 ++++++++++++++-----
 1 file changed, 59 insertions(+), 19 deletions(-)

diff --git a/packages/editor/src/tinacms/form-builder/fields-builder.tsx b/packages/editor/src/tinacms/form-builder/fields-builder.tsx
index 4aad828a..feb8a56e 100644
--- a/packages/editor/src/tinacms/form-builder/fields-builder.tsx
+++ b/packages/editor/src/tinacms/form-builder/fields-builder.tsx
@@ -152,7 +152,8 @@ export interface FieldsBuilderProps {
 export function FieldsBuilder({ form, fields }: FieldsBuilderProps) {
   const editorContext = useEditorContext();
   const panelContext = useContext(PanelContext);
-  const grouped: Record<string, Array<InternalField>> = {};
+  // const grouped: Record<string, Array<InternalField>> = {};
+  const groupedWithSubgroups: { groupName: string; subGroups: string[] }[] = [];
   const ungrouped: Array<InternalField> = [];
 
   fields.forEach((field) => {
@@ -161,8 +162,24 @@ export function FieldsBuilder({ form, fields }: FieldsBuilderProps) {
     }
 
     if (field.group) {
-      grouped[field.group] = grouped[field.group] || [];
-      grouped[field.group].push(field);
+      let groupName: string;
+      let subGroupName: string;
+      if (field.group.includes("::")) {
+        [groupName, subGroupName] = field.group.split("::");
+      } else {
+        groupName = field.group;
+        subGroupName = "";
+      }
+      const existingGroup = groupedWithSubgroups.find(
+        (group) => group.groupName === groupName
+      );
+      if (existingGroup) {
+        if (!existingGroup.subGroups.includes(subGroupName)) {
+          existingGroup.subGroups.push(subGroupName);
+        }
+      } else {
+        groupedWithSubgroups.push({ groupName, subGroups: [subGroupName] });
+      }
     } else {
       if (field.component === "identity") {
         return;
@@ -198,23 +215,36 @@ export function FieldsBuilder({ form, fields }: FieldsBuilderProps) {
           {horizontalLine}
         </React.Fragment>
       )}
-      {Object.keys(grouped).map((groupName) => (
+      {groupedWithSubgroups.map(({ groupName, subGroups }) => (
         <div key={groupName}>
           <FieldsGroupLabel>{groupName}</FieldsGroupLabel>
-          {grouped[groupName].map((field, index, fields) => (
-            <div
-              key={generateFieldKey(field, breakpointIndex)}
-              css={css`
-                margin-bottom: ${index === fields.length - 1 ? "8px" : 0};
-              `}
-            >
-              <FieldBuilder
-                field={field}
-                form={form}
-                isLabelHidden={field.schemaProp.isLabelHidden}
-              />
-            </div>
-          ))}
+          {subGroups.map((subGroupName) => {
+            const fieldsInSubGroup =
+              subGroupName === ""
+                ? fields.filter((field) => field.group === groupName)
+                : fields.filter(
+                    (field) => field.group === `${groupName}::${subGroupName}`
+                  );
+            return fieldsInSubGroup.map((field, index, fields) => (
+              <>
+                {subGroupName != "" && (
+                  <FieldsSubgroupLabel>{subGroupName}</FieldsSubgroupLabel>
+                )}
+                <div
+                  key={generateFieldKey(field, breakpointIndex)}
+                  css={css`
+                    margin-bottom: ${index === fields.length - 1 ? "8px" : 0};
+                  `}
+                >
+                  <FieldBuilder
+                    field={field}
+                    form={form}
+                    isLabelHidden={field.schemaProp.isLabelHidden}
+                  />
+                </div>
+              </>
+            ));
+          })}
           {horizontalLine}
         </div>
       ))}
@@ -251,12 +281,22 @@ const FieldsGroupLabel = styled.div`
   display: flex;
   align-items: center;
 
-  padding: 20px 16px 10px 16px;
+  padding: 20px 16px 5px 16px;
 
   ${Fonts.label};
   color: #000;
 `;
 
+const FieldsSubgroupLabel = styled.div`
+  display: flex;
+  align-items: center;
+
+  padding: 10px 16px 5px 16px;
+
+  ${Fonts.label2};
+  color: #222222;
+`;
+
 const FieldsGroup = styled.div`
   position: relative;
   display: block;

From e1cf74fff625901e619a0b2a81fa45ecd85187c5 Mon Sep 17 00:00:00 2001
From: timoconnellaus <tim.oconnell.australia@gmail.com>
Date: Tue, 21 May 2024 15:35:57 +1000
Subject: [PATCH 2/4] incorrectly adjusted group padding

---
 packages/editor/src/tinacms/form-builder/fields-builder.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/editor/src/tinacms/form-builder/fields-builder.tsx b/packages/editor/src/tinacms/form-builder/fields-builder.tsx
index feb8a56e..a1111715 100644
--- a/packages/editor/src/tinacms/form-builder/fields-builder.tsx
+++ b/packages/editor/src/tinacms/form-builder/fields-builder.tsx
@@ -281,7 +281,7 @@ const FieldsGroupLabel = styled.div`
   display: flex;
   align-items: center;
 
-  padding: 20px 16px 5px 16px;
+  padding: 20px 16px 10px 16px;
 
   ${Fonts.label};
   color: #000;

From 517225638cf1632fb842c56dbdc9518c8d251f08 Mon Sep 17 00:00:00 2001
From: timoconnellaus <tim.oconnell.australia@gmail.com>
Date: Tue, 21 May 2024 15:44:50 +1000
Subject: [PATCH 3/4] bug: repeating subgroup title

---
 packages/editor/src/tinacms/form-builder/fields-builder.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/editor/src/tinacms/form-builder/fields-builder.tsx b/packages/editor/src/tinacms/form-builder/fields-builder.tsx
index a1111715..45abf0ca 100644
--- a/packages/editor/src/tinacms/form-builder/fields-builder.tsx
+++ b/packages/editor/src/tinacms/form-builder/fields-builder.tsx
@@ -227,7 +227,7 @@ export function FieldsBuilder({ form, fields }: FieldsBuilderProps) {
                   );
             return fieldsInSubGroup.map((field, index, fields) => (
               <>
-                {subGroupName != "" && (
+                {subGroupName != "" && index === 0 && (
                   <FieldsSubgroupLabel>{subGroupName}</FieldsSubgroupLabel>
                 )}
                 <div

From ba2d144117b16e5e1549a85efa0c540b68b65e58 Mon Sep 17 00:00:00 2001
From: timoconnellaus <tim.oconnell.australia@gmail.com>
Date: Tue, 21 May 2024 15:45:07 +1000
Subject: [PATCH 4/4] increased padding on subgroup title

---
 packages/editor/src/tinacms/form-builder/fields-builder.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/editor/src/tinacms/form-builder/fields-builder.tsx b/packages/editor/src/tinacms/form-builder/fields-builder.tsx
index 45abf0ca..850c6b73 100644
--- a/packages/editor/src/tinacms/form-builder/fields-builder.tsx
+++ b/packages/editor/src/tinacms/form-builder/fields-builder.tsx
@@ -291,7 +291,7 @@ const FieldsSubgroupLabel = styled.div`
   display: flex;
   align-items: center;
 
-  padding: 10px 16px 5px 16px;
+  padding: 10px 16px 8px 16px;
 
   ${Fonts.label2};
   color: #222222;