Skip to content

feat: collapsible grouped fields, blocks, and repeaters#635

Open
bobbwal wants to merge 20 commits intoSonicJs-Org:mainfrom
bobbwal:fix/grouped-fields-ui
Open

feat: collapsible grouped fields, blocks, and repeaters#635
bobbwal wants to merge 20 commits intoSonicJs-Org:mainfrom
bobbwal:fix/grouped-fields-ui

Conversation

@bobbwal
Copy link
Contributor

@bobbwal bobbwal commented Feb 4, 2026

Description

Adds collapsible UI for grouped object fields, blocks, and repeaters in admin forms, defaults them to collapsed, and aligns toggle chevrons. New items expand automatically.

Also adds explicit object field layout control via objectLayout ('nested' | 'flat') and clarifies collapsed behaviour in docs (collapsed applies to nested only).

This PR also adds session-level collapsed/expanded state persistence for grouped fields, repeaters, and blocks (scoped per document/collection), plus validation visibility improvements so hidden errors are revealed.

Fixes #634

Includes fixes from #649 and #645 (merged into this branch).

Changes

  • Add group headings for content blocks and collapsible object groups
  • Add objectLayout support for object fields (nested default, flat non-collapsible)
  • Add collapsed option for object group fields (default collapsed)
  • Make block and repeater items collapsible with toggle chevrons
  • Default items to collapsed; auto-expand newly added and duplicated items
  • Persist collapsed/expanded state for objects, repeaters, and blocks within session
  • Scope persisted UI state by collection/document to avoid cross-collection leakage
  • Keep persisted state stable through reorder flows
  • Improve validation visibility for collapsed sections (reveal invalid path and focus first invalid control)
  • Align chevron rotation classes with toggle logic
  • Update docs for objectLayout + collapsed behavior
  • Add/update E2E coverage:
  • tests/e2e/53-object-layout.spec.ts
  • tests/e2e/55-collapsible-state-persistence.spec.ts
  • tests/e2e/56-collapsible-validation-visibility.spec.ts
  • Update hardening in related E2E flows (54-hero-cta-style-persistence.spec.ts)

Testing

  • npm run type-check
  • tests/e2e/53-object-layout.spec.ts
  • tests/e2e/55-collapsible-state-persistence.spec.ts
  • tests/e2e/56-collapsible-validation-visibility.spec.ts
  • tests/e2e/54-hero-cta-style-persistence.spec.ts
  • Manual UI verification in admin content forms (objects + repeaters + blocks)

Unit Tests

  • Added/updated unit tests
  • All unit tests passing

E2E Tests

  • Added/updated E2E tests
  • All E2E tests passing

Screenshots/Videos

Before:
blocks-ui-before

After:
blocks-ui-after-02

Checklist

  • Code follows project conventions
  • Tests added/updated and passing
  • Type checking passes
  • No console errors or warnings
  • Documentation updated (if needed)

Follow-up planned: refactor collapsible-state persistence helpers to reduce duplication and simplify key/state handling (no functional change).


Generated with Claude Code in Conductor

@bobbwal bobbwal changed the title Fix/grouped fields UI feat: collapsible grouped fields, blocks, and repeaters Feb 4, 2026
@bobbwal bobbwal marked this pull request as draft February 24, 2026 13:11
@bobbwal
Copy link
Contributor Author

bobbwal commented Feb 24, 2026

Need to investigate further but it seems that in the grouped/blocks form setup, validation errors inside collapsed groups can be hidden, so Update / Update & Publish can appear unresponsive. This is a UX issue rather than a save failure. Follow-up could auto-expand groups with errors, show an error badge/count on collapsed headers, and focus/scroll to the first invalid field on submit.

…ields-ui

# Conflicts:
#	my-sonicjs-app/src/collections/page-blocks.collection.ts
#	packages/core/dist/chunk-2YRNPIU4.cjs
#	packages/core/dist/chunk-2YRNPIU4.cjs.map
#	packages/core/dist/chunk-6RABGLOO.cjs
#	packages/core/dist/chunk-6RABGLOO.cjs.map
#	packages/core/dist/chunk-7DU5PUKL.js
#	packages/core/dist/chunk-CC4JXOXD.js
#	packages/core/dist/chunk-D77GPCUP.cjs
#	packages/core/dist/chunk-D77GPCUP.cjs.map
#	packages/core/dist/chunk-DADFCDML.js
#	packages/core/dist/chunk-DADFCDML.js.map
#	packages/core/dist/chunk-FQAOOSEB.js
#	packages/core/dist/chunk-FQAOOSEB.js.map
#	packages/core/dist/chunk-GFKIWSGM.cjs
#	packages/core/dist/chunk-GFKIWSGM.cjs.map
#	packages/core/dist/chunk-IUARXOBE.cjs
#	packages/core/dist/chunk-IUARXOBE.cjs.map
#	packages/core/dist/chunk-K6TOTMAZ.js
#	packages/core/dist/chunk-K6TOTMAZ.js.map
#	packages/core/dist/chunk-PM35AAL5.js
#	packages/core/dist/chunk-PM35AAL5.js.map
#	packages/core/dist/chunk-QK5PFGDM.cjs
#	packages/core/dist/chunk-QKY6I4B7.js
#	packages/core/dist/chunk-RTXGSM7L.cjs
#	packages/core/dist/chunk-THCZHX25.cjs
#	packages/core/dist/chunk-VXTHM6MB.js
#	packages/core/dist/chunk-VXTHM6MB.js.map
#	packages/core/dist/chunk-YGWKSR7I.js
#	packages/core/dist/chunk-YGWKSR7I.js.map
#	packages/core/dist/chunk-ZKA4WKRO.cjs
#	packages/core/dist/chunk-ZKA4WKRO.cjs.map
#	packages/core/dist/index.cjs
#	packages/core/dist/index.js
#	packages/core/dist/middleware.cjs
#	packages/core/dist/middleware.js
#	packages/core/dist/migrations-AIIAB6XI.js.map
#	packages/core/dist/migrations-FKBLWET7.cjs.map
#	packages/core/dist/migrations-JXEISWW5.cjs.map
#	packages/core/dist/migrations-U57UHVWR.cjs.map
#	packages/core/dist/migrations-WJVCIKQO.js.map
#	packages/core/dist/migrations-ZI3P6YZN.js.map
#	packages/core/dist/routes.cjs
#	packages/core/dist/routes.js
#	packages/core/dist/services.cjs
#	packages/core/dist/services.js
#	packages/core/src/db/migrations-bundle.ts
#	packages/core/src/templates/components/dynamic-field.template.ts
# Conflicts:
#	my-sonicjs-app/src/collections/page-blocks.collection.ts
#	packages/core/dist/chunk-2YRNPIU4.cjs
#	packages/core/dist/chunk-2YRNPIU4.cjs.map
#	packages/core/dist/chunk-3ZUCKXWH.js
#	packages/core/dist/chunk-3ZUCKXWH.js.map
#	packages/core/dist/chunk-6RABGLOO.cjs
#	packages/core/dist/chunk-6RABGLOO.cjs.map
#	packages/core/dist/chunk-7DU5PUKL.js
#	packages/core/dist/chunk-CV3VJQSK.cjs
#	packages/core/dist/chunk-CV3VJQSK.cjs.map
#	packages/core/dist/chunk-DADFCDML.js
#	packages/core/dist/chunk-DADFCDML.js.map
#	packages/core/dist/chunk-ELKAJLYR.cjs
#	packages/core/dist/chunk-ELKAJLYR.cjs.map
#	packages/core/dist/chunk-F3B7Q2TS.js
#	packages/core/dist/chunk-F3B7Q2TS.js.map
#	packages/core/dist/chunk-FQAOOSEB.js
#	packages/core/dist/chunk-FQAOOSEB.js.map
#	packages/core/dist/chunk-H764CAXQ.cjs
#	packages/core/dist/chunk-H764CAXQ.cjs.map
#	packages/core/dist/chunk-NY3V264Z.js
#	packages/core/dist/chunk-OAV6BLZX.js
#	packages/core/dist/chunk-QK5PFGDM.cjs
#	packages/core/dist/chunk-W3CLHJUC.cjs
#	packages/core/dist/chunk-XFK5GC5H.js
#	packages/core/dist/chunk-XFK5GC5H.js.map
#	packages/core/dist/chunk-XI6ETTJM.js
#	packages/core/dist/chunk-XI6ETTJM.js.map
#	packages/core/dist/chunk-YKPHABCW.cjs
#	packages/core/dist/chunk-YKPHABCW.cjs.map
#	packages/core/dist/chunk-ZDH6MHUU.cjs
#	packages/core/dist/index.cjs
#	packages/core/dist/index.js
#	packages/core/dist/middleware.cjs
#	packages/core/dist/middleware.js
#	packages/core/dist/migrations-7RCSUPXP.cjs.map
#	packages/core/dist/migrations-I6PIUYDS.js.map
#	packages/core/dist/migrations-LCELTSFO.js.map
#	packages/core/dist/migrations-NXINNQAE.cjs.map
#	packages/core/dist/migrations-U57UHVWR.cjs.map
#	packages/core/dist/migrations-WJVCIKQO.js.map
#	packages/core/dist/routes.cjs
#	packages/core/dist/routes.js
#	packages/core/dist/services.cjs
#	packages/core/dist/services.js
#	packages/core/src/db/migrations-bundle.ts
@bobbwal
Copy link
Contributor Author

bobbwal commented Feb 27, 2026

Need to investigate further but it seems that in the grouped/blocks form setup, validation errors inside collapsed groups can be hidden, so Update / Update & Publish can appear unresponsive. This is a UX issue rather than a save failure. Follow-up could auto-expand groups with errors, show an error badge/count on collapsed headers, and focus/scroll to the first invalid field on submit.

This has been sorted, along with the following:

Update since original PR description:

  • Added per-document/collection session persistence for collapsed state across object groups, repeaters, and blocks
  • Added collapsed validation reveal behavior for hidden invalid fields
  • Added E2E coverage for state persistence and validation visibility
  • Addressed follow-up review issues around key scoping and nested object serialization host resolution

@bobbwal bobbwal marked this pull request as ready for review February 27, 2026 01:05
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Enhancement: Collapsible UI for block and repeater items

1 participant