Skip to content

feat: hierarchy with ui#15769

Open
JarrodMFlesch wants to merge 245 commits intomainfrom
folder-field-column-drawer
Open

feat: hierarchy with ui#15769
JarrodMFlesch wants to merge 245 commits intomainfrom
folder-field-column-drawer

Conversation

@JarrodMFlesch
Copy link
Contributor

No description provided.

JarrodMFlesch and others added 30 commits November 24, 2025 14:18
Add type definitions for extensible sidebar tab system. Tabs can be
registered at config.admin.sidebar.tabs with icon, content component,
and override/disable support.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Create default tab component for displaying collections and globals.
This will be the built-in tab shown by default in sidebar.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Create function that returns built-in sidebar tabs. Currently just
the collections tab, but more can be added later.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Implement config merging logic for sidebar tabs:
- Combines built-in + user tabs
- Merges by slug (override support)
- Filters disabled tabs
- Fully tested

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Ensure sidebar tab icons and components are included in import map
generation so they can be resolved at runtime.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Load active tab from user preferences on mount and save changes.
Ensures tab selection persists across sessions.

- Add activeTab field to NavPreferences type
- Update getNavPrefs to fetch sidebar preferences separately
- Pass navPreferences to SidebarTabsClient
- Save tab changes using setPreference hook

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Move sidebar.tabs from admin.sidebar to admin.components.sidebar
  to be consistent with other component slots
- Update styles to be edge-to-edge like original DefaultNavClient
- Remove horizontal padding from tabs and content
- Add proper width and flex-grow to match nav layout

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Replace made-up CSS variables with actual design system:
- Use base() SCSS function for spacing
- Use --style-radius-l for border radius
- Use --theme-border-color for borders
- Use @include shadow-sm mixin
- Use proper sr-only pattern for labels

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Use auto-fit grid with 24% minmax for responsive 4-column layout
- Remove aspect-ratio for flexible tab sizing
- Reduce padding on individual tabs to calc(var(--base) / 4)
- Update border radius: container to --style-radius-m, tabs to --style-radius-s
- Remove container padding, use gap only
- Active tab border color to --theme-elevation-100

Result: 2-4 tabs fill width, 5+ tabs wrap to max 4 per row.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Create packages/payload/src/preferences/keys.ts with PREFERENCE_KEYS constants
- Replace all preference key strings with imported constants
- Rename sidebar preference key from 'sidebar' to 'nav-sidebar-active-tab'
- Update all files using preferences to import PREFERENCE_KEYS

This prevents typos and makes preference keys more discoverable and maintainable.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Remove CollectionsTab component (poorly named, showed collections AND globals)
- Replace with DefaultNavClient throughout for consistency
- Update Nav to fall back to DefaultNavClient when no custom tabs configured
- Pass explicit props instead of spreading to SidebarTabs
- Move test components from test/_community to test/admin
- Add e2e tests for sidebar tabs functionality

Tests cover:
- Rendering custom sidebar tabs
- Switching between tabs
- Persisting active tab in preferences
- Default nav tab behavior

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
@github-actions
Copy link
Contributor

github-actions bot commented Feb 26, 2026

📦 esbuild Bundle Analysis for payload

This analysis was generated by esbuild-bundle-analyzer. 🤖

Meta File Out File Size (raw) Note
packages/next/meta_index.json esbuild/index.js 961.06 KB ⚠️ +1.10 KB (+0.1%)
packages/payload/meta_index.json esbuild/index.js 1.33 MB ⚠️ +11.10 KB (+0.8%)
packages/payload/meta_shared.json esbuild/exports/shared.js 189.71 KB ✅ -890 B (-0.5%)
packages/richtext-lexical/meta_client.json esbuild/exports/client_optimized/index.js 281.80 KB ✅ No change
packages/ui/meta_client.json esbuild/exports/client_optimized/index.js 1.19 MB ⚠️ +6.48 KB (+0.5%)
packages/ui/meta_shared.json esbuild/exports/shared_optimized/index.js 41.79 KB ‼️ +25.47 KB (+156.1%)
Largest paths These visualization shows top 20 largest paths in the bundle.

Meta file: packages/next/meta_index.json, Out file: esbuild/index.js

Path Size
../../node_modules ${{\color{Goldenrod}{ ████████████████████▍ }}}$ 81.9%, 783.61 KB
dist/views/Version ${{\color{Goldenrod}{ █▎ }}}$ 5.4%, 51.49 KB
dist/views/Dashboard ${{\color{Goldenrod}{ ▌ }}}$ 2.3%, 21.54 KB
dist/views/Document ${{\color{Goldenrod}{ ▍ }}}$ 1.8%, 16.79 KB
dist/views/List ${{\color{Goldenrod}{ ▍ }}}$ 1.5%, 14.05 KB
dist/elements/Nav ${{\color{Goldenrod}{ ▎ }}}$ 1.1%, 10.15 KB
dist/views/Root ${{\color{Goldenrod}{ ▏ }}}$ 0.8%, 8.05 KB
dist/views/Versions ${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 6.16 KB
dist/views/API ${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 6.08 KB
dist/views/Account ${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 5.55 KB
dist/elements/DocumentHeader ${{\color{Goldenrod}{ ▏ }}}$ 0.5%, 4.81 KB
dist/views/Login ${{\color{Goldenrod}{ ▏ }}}$ 0.5%, 4.40 KB
dist/views/ForgotPassword ${{\color{Goldenrod}{ }}}$ 0.3%, 3.09 KB
dist/layouts/Root ${{\color{Goldenrod}{ }}}$ 0.3%, 2.91 KB
dist/views/CreateFirstUser ${{\color{Goldenrod}{ }}}$ 0.3%, 2.81 KB
dist/templates/Default ${{\color{Goldenrod}{ }}}$ 0.3%, 2.63 KB
dist/views/ResetPassword ${{\color{Goldenrod}{ }}}$ 0.3%, 2.40 KB
dist/views/Logout ${{\color{Goldenrod}{ }}}$ 0.2%, 1.94 KB
dist/views/Verify ${{\color{Goldenrod}{ }}}$ 0.1%, 1.29 KB
dist/views/NotFound ${{\color{Goldenrod}{ }}}$ 0.1%, 1.21 KB
(other) ${{\color{Goldenrod}{ ████▌ }}}$ 18.1%, 172.77 KB

Meta file: packages/payload/meta_index.json, Out file: esbuild/index.js

Path Size
../../node_modules ${{\color{Goldenrod}{ ████████████████▊ }}}$ 67.1%, 887.25 KB
dist/fields/hooks ${{\color{Goldenrod}{ ▊ }}}$ 3.3%, 43.59 KB
dist/collections/operations ${{\color{Goldenrod}{ ▊ }}}$ 3.0%, 39.78 KB
dist/versions/migrations ${{\color{Goldenrod}{ ▎ }}}$ 1.4%, 18.50 KB
dist/auth/operations ${{\color{Goldenrod}{ ▎ }}}$ 1.2%, 15.74 KB
dist/globals/operations ${{\color{Goldenrod}{ ▎ }}}$ 1.0%, 13.17 KB
dist/utilities/configToJSONSchema.js ${{\color{Goldenrod}{ ▎ }}}$ 1.0%, 13.15 KB
dist/fields/config ${{\color{Goldenrod}{ ▎ }}}$ 1.0%, 12.89 KB
dist/queues/operations ${{\color{Goldenrod}{ ▎ }}}$ 1.0%, 12.80 KB
dist/fields/validations.js ${{\color{Goldenrod}{ ▏ }}}$ 0.8%, 10.54 KB
dist/bin/generateImportMap ${{\color{Goldenrod}{ ▏ }}}$ 0.7%, 9.05 KB
dist/collections/config ${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 8.38 KB
dist/index.js ${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 7.69 KB
dist/uploads/fetchAPI-multipart ${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 7.67 KB
dist/database/migrations ${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 7.54 KB
dist/config/orderable ${{\color{Goldenrod}{ ▏ }}}$ 0.5%, 6.83 KB
dist/hierarchy/utils ${{\color{Goldenrod}{ ▏ }}}$ 0.5%, 6.54 KB
dist/collections/endpoints ${{\color{Goldenrod}{ ▏ }}}$ 0.5%, 6.22 KB
dist/auth/strategies ${{\color{Goldenrod}{ }}}$ 0.4%, 5.50 KB
dist/auth/endpoints ${{\color{Goldenrod}{ }}}$ 0.4%, 5.42 KB
(other) ${{\color{Goldenrod}{ ████████▏ }}}$ 32.9%, 434.86 KB

Meta file: packages/payload/meta_shared.json, Out file: esbuild/exports/shared.js

Path Size
../../node_modules ${{\color{Goldenrod}{ ███████████████████▉ }}}$ 79.8%, 148.51 KB
dist/fields/validations.js ${{\color{Goldenrod}{ █▍ }}}$ 5.7%, 10.54 KB
dist/config/orderable ${{\color{Goldenrod}{ ▍ }}}$ 1.7%, 3.13 KB
dist/fields/baseFields ${{\color{Goldenrod}{ ▍ }}}$ 1.5%, 2.79 KB
dist/utilities/deepCopyObject.js ${{\color{Goldenrod}{ ▎ }}}$ 1.4%, 2.54 KB
dist/auth/cookies.js ${{\color{Goldenrod}{ ▏ }}}$ 0.8%, 1.55 KB
dist/utilities/flattenTopLevelFields.js ${{\color{Goldenrod}{ ▏ }}}$ 0.8%, 1.42 KB
dist/fields/config ${{\color{Goldenrod}{ ▏ }}}$ 0.7%, 1.28 KB
dist/utilities/getVersionsConfig.js ${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 1.04 KB
dist/utilities/flattenAllFields.js ${{\color{Goldenrod}{ ▏ }}}$ 0.5%, 943 B
dist/utilities/unflatten.js ${{\color{Goldenrod}{ }}}$ 0.4%, 779 B
dist/utilities/sanitizeUserDataForEmail.js ${{\color{Goldenrod}{ }}}$ 0.4%, 713 B
dist/utilities/getFieldPermissions.js ${{\color{Goldenrod}{ }}}$ 0.3%, 651 B
dist/collections/config ${{\color{Goldenrod}{ }}}$ 0.3%, 570 B
dist/bin/generateImportMap ${{\color{Goldenrod}{ }}}$ 0.3%, 561 B
dist/auth/sessions.js ${{\color{Goldenrod}{ }}}$ 0.3%, 525 B
dist/fields/getFieldPaths.js ${{\color{Goldenrod}{ }}}$ 0.3%, 485 B
dist/errors/APIError.js ${{\color{Goldenrod}{ }}}$ 0.2%, 438 B
dist/utilities/getSafeRedirect.js ${{\color{Goldenrod}{ }}}$ 0.2%, 423 B
dist/utilities/deepMerge.js ${{\color{Goldenrod}{ }}}$ 0.2%, 413 B
(other) ${{\color{Goldenrod}{ █████ }}}$ 20.2%, 37.58 KB

Meta file: packages/richtext-lexical/meta_client.json, Out file: esbuild/exports/client_optimized/index.js

Path Size
dist/features/blocks ${{\color{Goldenrod}{ ███▏ }}}$ 12.6%, 35.15 KB
dist/lexical/plugins ${{\color{Goldenrod}{ ██▉ }}}$ 11.5%, 32.00 KB
dist/lexical/ui ${{\color{Goldenrod}{ ██▏ }}}$ 8.7%, 24.36 KB
dist/features/experimental_table ${{\color{Goldenrod}{ ██▏ }}}$ 8.5%, 23.70 KB
dist/packages/@lexical ${{\color{Goldenrod}{ █▋ }}}$ 6.8%, 18.99 KB
dist/features/link ${{\color{Goldenrod}{ █▋ }}}$ 6.6%, 18.25 KB
dist/features/toolbars ${{\color{Goldenrod}{ █▌ }}}$ 6.4%, 17.75 KB
dist/features/upload ${{\color{Goldenrod}{ █▏ }}}$ 4.9%, 13.77 KB
dist/features/textState ${{\color{Goldenrod}{ █ }}}$ 4.0%, 11.08 KB
dist/features/relationship ${{\color{Goldenrod}{ ▊ }}}$ 3.2%, 9.03 KB
dist/lexical/utils ${{\color{Goldenrod}{ ▊ }}}$ 3.0%, 8.49 KB
dist/features/debug ${{\color{Goldenrod}{ ▋ }}}$ 2.7%, 7.39 KB
dist/utilities/fieldsDrawer ${{\color{Goldenrod}{ ▋ }}}$ 2.6%, 7.15 KB
dist/features/converters ${{\color{Goldenrod}{ ▋ }}}$ 2.5%, 7.05 KB
dist/lexical/config ${{\color{Goldenrod}{ ▍ }}}$ 1.8%, 5.08 KB
dist/features/lists ${{\color{Goldenrod}{ ▍ }}}$ 1.8%, 5.00 KB
dist/features/format ${{\color{Goldenrod}{ ▎ }}}$ 1.2%, 3.46 KB
dist/lexical/LexicalEditor.js ${{\color{Goldenrod}{ ▎ }}}$ 1.1%, 3.17 KB
dist/lexical/theme ${{\color{Goldenrod}{ ▏ }}}$ 0.9%, 2.62 KB
dist/features/indent ${{\color{Goldenrod}{ ▏ }}}$ 0.9%, 2.50 KB
(other) ${{\color{Goldenrod}{ █████████████████████▊ }}}$ 87.4%, 243.39 KB

Meta file: packages/ui/meta_client.json, Out file: esbuild/exports/client_optimized/index.js

Path Size
../../node_modules ${{\color{Goldenrod}{ ████████████▎ }}}$ 49.2%, 578.61 KB
dist/elements/BulkUpload ${{\color{Goldenrod}{ ▌ }}}$ 2.3%, 27.43 KB
dist/elements/WhereBuilder ${{\color{Goldenrod}{ ▍ }}}$ 1.5%, 17.27 KB
dist/views/Edit ${{\color{Goldenrod}{ ▍ }}}$ 1.5%, 17.24 KB
dist/views/HierarchyList ${{\color{Goldenrod}{ ▎ }}}$ 1.4%, 16.72 KB
dist/fields/Relationship ${{\color{Goldenrod}{ ▎ }}}$ 1.3%, 15.78 KB
dist/elements/Table ${{\color{Goldenrod}{ ▎ }}}$ 1.3%, 15.78 KB
dist/forms/Form ${{\color{Goldenrod}{ ▎ }}}$ 1.3%, 15.31 KB
dist/fields/Upload ${{\color{Goldenrod}{ ▎ }}}$ 1.2%, 14.24 KB
dist/fields/Blocks ${{\color{Goldenrod}{ ▎ }}}$ 1.2%, 13.69 KB
dist/elements/QueryPresets ${{\color{Goldenrod}{ ▏ }}}$ 0.9%, 10.36 KB
dist/elements/PublishButton ${{\color{Goldenrod}{ ▏ }}}$ 0.8%, 9.08 KB
dist/elements/HTMLDiff ${{\color{Goldenrod}{ ▏ }}}$ 0.7%, 8.38 KB
dist/elements/LivePreview ${{\color{Goldenrod}{ ▏ }}}$ 0.7%, 8.38 KB
dist/views/List ${{\color{Goldenrod}{ ▏ }}}$ 0.7%, 8.14 KB
dist/elements/Tree ${{\color{Goldenrod}{ ▏ }}}$ 0.7%, 8.03 KB
dist/fields/Array ${{\color{Goldenrod}{ ▏ }}}$ 0.7%, 7.73 KB
dist/elements/ReactSelect ${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 7.34 KB
dist/elements/Upload ${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 6.67 KB
dist/elements/HierarchyColumnBrowser ${{\color{Goldenrod}{ ▏ }}}$ 0.6%, 6.64 KB
(other) ${{\color{Goldenrod}{ ████████████▋ }}}$ 50.8%, 597.61 KB

Meta file: packages/ui/meta_shared.json, Out file: esbuild/exports/shared_optimized/index.js

Path Size
dist/elements/Tree ${{\color{Goldenrod}{ █████ }}}$ 20.4%, 8.34 KB
dist/elements/Popup ${{\color{Goldenrod}{ ██▋ }}}$ 10.9%, 4.46 KB
dist/graphics/Logo ${{\color{Goldenrod}{ █▉ }}}$ 7.6%, 3.13 KB
../../node_modules ${{\color{Goldenrod}{ █▋ }}}$ 6.5%, 2.67 KB
dist/elements/Button ${{\color{Goldenrod}{ █▍ }}}$ 5.5%, 2.24 KB
dist/elements/Link ${{\color{Goldenrod}{ ▉ }}}$ 3.9%, 1.58 KB
dist/graphics/Icon ${{\color{Goldenrod}{ ▉ }}}$ 3.7%, 1.53 KB
dist/utilities/formatDocTitle ${{\color{Goldenrod}{ ▊ }}}$ 3.3%, 1.34 KB
dist/icons/Edit ${{\color{Goldenrod}{ ▋ }}}$ 2.7%, 1.09 KB
dist/elements/Tooltip ${{\color{Goldenrod}{ ▌ }}}$ 2.4%, 989 B
dist/providers/TableColumns ${{\color{Goldenrod}{ ▌ }}}$ 2.1%, 872 B
dist/utilities/groupNavItems.js ${{\color{Goldenrod}{ ▌ }}}$ 2.0%, 820 B
dist/icons/Link ${{\color{Goldenrod}{ ▍ }}}$ 1.9%, 775 B
dist/utilities/getGlobalData.js ${{\color{Goldenrod}{ ▍ }}}$ 1.9%, 762 B
dist/utilities/api.js ${{\color{Goldenrod}{ ▍ }}}$ 1.9%, 758 B
dist/hooks/useIntersect.js ${{\color{Goldenrod}{ ▍ }}}$ 1.7%, 698 B
dist/elements/LoadMoreRow ${{\color{Goldenrod}{ ▍ }}}$ 1.5%, 632 B
dist/icons/Chevron ${{\color{Goldenrod}{ ▎ }}}$ 1.4%, 580 B
dist/elements/DelayedSpinner ${{\color{Goldenrod}{ ▎ }}}$ 1.4%, 578 B
dist/elements/Spinner ${{\color{Goldenrod}{ ▎ }}}$ 1.3%, 540 B
(other) ${{\color{Goldenrod}{ ███████████████████▉ }}}$ 79.6%, 32.63 KB
Details

Next to the size is how much the size has increased or decreased compared with the base branch of this PR.

  • ‼️: Size increased by 20% or more. Special attention should be given to this.
  • ⚠️: Size increased in acceptable range (lower than 20%).
  • ✅: No change or even downsized.
  • 🗑️: The out file is deleted: not found in base branch.
  • 🆕: The out file is newly found: will be added to base branch.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant