From 06dbf5b796a2fcbb520e83464c4abd621db672d6 Mon Sep 17 00:00:00 2001
From: Z8MB1E <jason@onyxsimple.com>
Date: Sun, 6 Sep 2026 01:24:11 -0400
Subject: [PATCH] feat(admin): add collapsible group field

Wraps Payload's group field in a Collapsible so long groups (e.g. profile minigames) can start collapsed in the admin panel; refreshes the import map.

Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent)

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
---
 src/app/(payload)/admin/importMap.js          |  2 +
 src/collections/users/Profiles.ts             |  8 ++++
 .../admin/groups/CollapsibleGroupField.tsx    | 40 +++++++++++++++++++
 3 files changed, 50 insertions(+)
 create mode 100644 src/components/admin/groups/CollapsibleGroupField.tsx

diff --git a/src/app/(payload)/admin/importMap.js b/src/app/(payload)/admin/importMap.js
index ebdc4e2..17a2cb5 100644
--- a/src/app/(payload)/admin/importMap.js
+++ b/src/app/(payload)/admin/importMap.js
@@ -4,6 +4,7 @@ import { RscEntryLexicalField as RscEntryLexicalField_44fe37237e0ebf4470c9990d8c
 import { LexicalDiffComponent as LexicalDiffComponent_44fe37237e0ebf4470c9990d8cb7b07e } from '@payloadcms/richtext-lexical/rsc'
 import { LexicalEditorFeatureClient as LexicalEditorFeatureClient_4490b89d4413c1ffaecdacfe72efaf73 } from '@ai-stack/payloadcms/client'
 import { HeadingFeatureClient as HeadingFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
+import { default as default_513af5ed43d616d133e530d8c94232f8 } from '@/components/admin/groups/CollapsibleGroupField'
 import { default as default_d9c22b951ac6762f436db59b889da382 } from '@/components/admin/awards/CommendationColorField'
 import { default as default_c3ea68702b5e5f8f2f98055e01c43c8d } from '@/components/admin/awards/RibbonDesigner'
 import { default as default_2f2033acccb3be245f1a85f7b4271dac } from '@/components/admin/awards/MedalDesigner'
@@ -30,6 +31,7 @@ export const importMap = {
   "@payloadcms/richtext-lexical/rsc#LexicalDiffComponent": LexicalDiffComponent_44fe37237e0ebf4470c9990d8cb7b07e,
   "@ai-stack/payloadcms/client#LexicalEditorFeatureClient": LexicalEditorFeatureClient_4490b89d4413c1ffaecdacfe72efaf73,
   "@payloadcms/richtext-lexical/client#HeadingFeatureClient": HeadingFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
+  "@/components/admin/groups/CollapsibleGroupField#default": default_513af5ed43d616d133e530d8c94232f8,
   "@/components/admin/awards/CommendationColorField#default": default_d9c22b951ac6762f436db59b889da382,
   "@/components/admin/awards/RibbonDesigner#default": default_c3ea68702b5e5f8f2f98055e01c43c8d,
   "@/components/admin/awards/MedalDesigner#default": default_2f2033acccb3be245f1a85f7b4271dac,
diff --git a/src/collections/users/Profiles.ts b/src/collections/users/Profiles.ts
index 9c8736a..52fb138 100644
--- a/src/collections/users/Profiles.ts
+++ b/src/collections/users/Profiles.ts
@@ -274,6 +274,14 @@ export const Profiles: CollectionConfig = {
           name: "minigames",
           label: "Minigames",
           type: "group",
+          admin: {
+            components: {
+              Field: {
+                path: "@/components/admin/groups/CollapsibleGroupField",
+                clientProps: { initCollapsed: true },
+              },
+            },
+          },
           fields: [
             {
               name: "flappyBird",
diff --git a/src/components/admin/groups/CollapsibleGroupField.tsx b/src/components/admin/groups/CollapsibleGroupField.tsx
new file mode 100644
index 0000000..d07a63e
--- /dev/null
+++ b/src/components/admin/groups/CollapsibleGroupField.tsx
@@ -0,0 +1,40 @@
+"use client";
+
+import { getTranslation } from "@payloadcms/translations";
+import { Collapsible, GroupField, useTranslation } from "@payloadcms/ui";
+import type { GroupFieldClientProps } from "payload";
+import React from "react";
+
+type CollapsibleGroupFieldProps = GroupFieldClientProps & {
+  /** Passed via `admin.components.Field` `clientProps` (groups don't support `admin.initCollapsed`). */
+  initCollapsed?: boolean;
+};
+
+/**
+ * Wraps Payload's stock group field in a Collapsible so named groups can be
+ * collapsed in the admin panel (group fields have no built-in collapse UI).
+ * Purely a presentation wrapper — the data shape is unchanged.
+ *
+ * Usage on a group field:
+ *   admin: {
+ *     components: {
+ *       Field: {
+ *         path: "@/components/admin/groups/CollapsibleGroupField",
+ *         clientProps: { initCollapsed: true },
+ *       },
+ *     },
+ *   }
+ */
+export const CollapsibleGroupField = (props: CollapsibleGroupFieldProps) => {
+  const { field, initCollapsed = false } = props;
+  const { i18n } = useTranslation();
+  const title = getTranslation(field.label ?? ("name" in field ? field.name : "") ?? "", i18n);
+
+  return (
+    <Collapsible header={<h3 className="group-field__title">{title}</h3>} initCollapsed={initCollapsed}>
+      <GroupField {...props} field={{ ...field, label: undefined }} />
+    </Collapsible>
+  );
+};
+
+export default CollapsibleGroupField;