jason/polaris-task-force
1
0
Fork 0
Code Issues Wiki Activity

feat(admin): add collapsible group field

Browse source 
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>
This commit is contained in:
Jason Fraley 2026-09-06 01:24:11 -04:00
parent 4e9c539682
commit 06dbf5b796
3 changed files with 50 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/app/(payload)/admin/importMap.js
View file

@ -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,

8
src/collections/users/Profiles.ts
View file

@ -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",

40
src/components/admin/groups/CollapsibleGroupField.tsx Normal file
View file

@ -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;