Improve pages tree navigation

[giuscris]

This pull request introduces significant improvements to the pages tree view and related UI/UX in the panel. The main changes include the addition of a dedicated pages tree route, enhanced navigation with breadcrumb support, improved handling and styling of disabled UI elements, and better user interaction for expanding, collapsing, and reordering pages. There are also several quality-of-life improvements for both the backend logic and frontend appearance.

Pages Tree and Navigation Enhancements:

• Added a new panel.pages.tree route and corresponding tree action in PagesController, enabling viewing the children of any page and supporting breadcrumbs for navigation. The controller now checks for the correct permission (panel.pages.tree) and handles subtree options for children.
• Updated the pages tree rendering logic to support breadcrumbs, correct parent/root handling, and improved class assignment for tree items based on their level and subtree status.
• The new page modal now dynamically sets its model based on the current parent, both on the dashboard and in the pages tree.

UI/UX and Accessibility Improvements:

• Disabled states for buttons and dropdowns are now more visually distinct and accessible, with improved color, box-shadow, and pointer-events handling across various components.
• Dropdown menus now restore their state when focus leaves the dropdown, and focused dropdown items have improved highlighting and focus ring for accessibility.

Pages Tree Interaction Improvements:

• Expand/collapse/reorder page commands are now dynamically enabled/disabled based on the current state of the tree, improving usability and preventing invalid actions.
• The logic for toggling page items and handling clicks in the tree has been simplified and made more robust, preventing unwanted propagation and improving user experience.
• The new page modal's template selection now updates immediately based on the selected parent, ensuring only allowed templates are enabled.

Visual and Layout Adjustments:

• Adjusted layout and sizing for page status and action columns for better alignment and readability.
• Improved header styling, including breadcrumb links and hover effects, and ensured header content does not overflow.

Other Notable Changes:

• Added new translation strings for "Edit page" and "View children pages" to enhance clarity in the UI.
• The default parent in the new page modal is now set based on the current model's route, improving the page creation workflow.

These changes collectively make the pages section of the panel more powerful, user-friendly, and visually consistent.

---

Pages Tree and Navigation:

• Introduced a dedicated panel.pages.tree route and tree action in PagesController, enabling navigation to view children of any page and supporting breadcrumbs.
• Enhanced pages tree rendering for correct parent/root handling, breadcrumbs, and improved class assignment for tree items.
• The new page modal now sets its model dynamically based on the current parent context.

UI/UX and Accessibility:

• Improved styling for disabled buttons and dropdowns, making disabled states clearer and more accessible.
• Enhanced dropdown accessibility and focus handling.

Pages Tree Interaction:

• Commands for expanding, collapsing, and reordering pages are now dynamically enabled/disabled based on tree state.
• Improved click handling and toggling logic for page items in the tree.
• The new page modal's template selection updates immediately based on the selected parent.

Visual/Layout Adjustments:

• Adjusted sizing and alignment for page status and action columns.
• Improved header styling and breadcrumb navigation.

Translations and Workflow:

• Added new translation strings and set the default parent in the new page modal based on the current context.

[Copilot]

Pull Request Overview

This PR enhances the pages tree navigation in the panel by adding support for viewing children of pages that have the children.list option disabled. The main change introduces a dedicated "View children pages" action and refactors the tree view to handle nested navigation with breadcrumbs.

Key changes include:

• New /pages/{page}/tree/ route for viewing children of specific pages
• Breadcrumb navigation in the header showing the current page hierarchy
• Dropdown menu for page actions (edit, view children, delete) replacing standalone buttons
• Dynamic enabling/disabling of expand/collapse/reorder buttons based on tree state

Reviewed Changes

Copilot reviewed 12 out of 13 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
panel/views/pages/tree.php	Adds level offset calculation, conditional rendering of children based on scheme options, and replaces action buttons with dropdown menu
panel/views/pages/index.php	Implements breadcrumb navigation and makes tree control buttons dynamically enabled/disabled
panel/translations/en.yaml	Adds translations for new "Edit page" and "View children pages" actions
panel/src/ts/components/views/pages.ts	Refactors click handlers, adds state management for command buttons, and calls filter logic on modal initialization
panel/src/ts/components/dropdowns.ts	Adds focusin handler to close dropdowns when focus moves outside
panel/src/scss/components/forms/_forms-editor.scss	Removes box shadow from disabled toolbar buttons
panel/src/scss/components/_header.scss	Adjusts header styling for breadcrumb navigation with overflow handling and link hover states
panel/src/scss/components/_dropdowns.scss	Updates disabled item color and adds focus styling for dropdown items
panel/src/scss/components/_buttons.scss	Standardizes disabled button styling across different button types
panel/modals/newPage.yaml	Sets default parent to current model route for new page modal
panel/config/routes/routes.php	Adds new panel.pages.tree route
formwork/src/Panel/Controllers/PagesController.php	Refactors index action to redirect to tree, implements new tree action with parent context

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull Request Overview

Copilot reviewed 15 out of 16 changed files in this pull request and generated 4 comments.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

The expand all button should also be disabled when there are no pages with children (allPages.length === 0), otherwise it remains enabled but has no effect. Update the condition to: commandExpandAllPages.disabled = allPages.length === 0 || allPages.length === expandedPages.length;

Suggested change

	commandExpandAllPages.disabled = allPages.length === expandedPages.length;
	commandExpandAllPages.disabled = allPages.length === 0 || allPages.length === expandedPages.length;