feat: Add tree/card view toggle for pages list with scheme-based control

[OffLine911]

Summary

Adds a view mode toggle to switch between tree (list) and card (grid) display for pages in the admin panel. The toggle buttons only appear when explicitly enabled via the subtreeGridDisplay option in the parent page's scheme configuration.

Motivation

Provides a more visual way to browse pages with preview images, particularly useful for content types like blog posts, portfolios, or galleries where visual representation is important. The feature is opt-in per page type, maintaining backward compatibility.

Changes

Frontend

• View Toggle Buttons: Added tree/card view toggle buttons in pages header
• Conditional Display: Buttons only appear when subtreeGridDisplay: true is set in scheme
• Active State: Visual feedback showing current active view mode

Backend

• Controller Logic: Modified PagesController::tree() to check children.subtreeGridDisplay option
• View Mode Validation: Server-side validation of view parameter with fallback to tree view
• Template Rendering: Conditionally renders tree or card view based on mode and permissions

JavaScript

• View Mode Handlers: Click handlers for view toggle buttons
• LocalStorage: Saves user's view preference
• URL Management: Updates query parameter and reloads with selected view

Styling

• CSS Import: Added pages-cards component import to main stylesheet
• Active Button State: Utilizes existing button active state styling

Translations

• Added English translations:
• panel.pages.pages.viewTree: Tree view
• panel.pages.pages.viewCard: Card view
• panel.pages.pages.empty: No pages found

Usage

To enable card view toggle for a page type, add to the scheme YAML:

options:
    children:
        subtree: true
        subtreeGridDisplay: true  # Enables the view toggle

Example
Updated site/schemes/pages/blog.yaml with subtreeGridDisplay: true as a reference implementation.

Technical Details

• Query parameter: ?view=tree or ?view=card
• Scheme option path: options.children.subtreeGridDisplay
• Default behavior: Tree view (maintains existing functionality)
• Backward compatible: No changes to existing pages without the option

Files Modified

• panel/views/pages/index.php
• formwork/src/Panel/Controllers/PagesController.php
• panel/src/ts/components/views/pages.ts
• panel/src/scss/panel.scss
• panel/translations/en.yaml
• site/schemes/pages/blog.yaml (example)

Testing

• [-] View toggle appears only when subtreeGridDisplay: true
• [-] Tree view displays correctly
• [-] Card view displays correctly (uses existing cards component)
• [-] Active state updates on toggle
• [-] View preference persists via localStorage
• [-] Server-side validation prevents unauthorized card view access
• [-] No TypeScript or PHP diagnostics errors

[OffLine911]

are you going to look in this or not @giuscris?

[giuscris]

Thank you for the PR, I'll review when possible (I'm currently working on Formwork 2.3)

[giuscris]

Hello @OffLine911, I appreciate your enthusiasm in exploring and experimenting with the panel styles.

I am having difficulty reviewing your changes. They go too far beyond the scope of this PR, which should focus on the tree/tab + toggle display.

The overall panel styles and element placement should be left untouched. They can of course be discussed, but should be addressed elsewhere.

I feel that there are many random aesthetic changes that do not necessarily contribute to improving the experience, such as animation and inconsistent changes to font size, alignment, and text case. Furthermore, all of these changes are primarily geared towards dark color schemes, with a negative impact on the light theme.

The removal of the header bar is also a significant change. While I am not completely opposed to this idea and am again open to discussion, the current implementation removes visual feedback (action label) and actual functionality (the link to site options, the site view button).

I think the overall character of the Formwork panel is lost with these changes without significant improvements beyond a subjective idea of a "modern look".

I'm asking if you can narrow down the changes to the scope of the PR so that we can finally review and implement them. For other ideas I suggest you to use the repository Discussions.

Thanks again. I'll be happy to review a focused PR.

[OffLine911]

okay thank you for taking some time and review this well i did change in the admin panel after seeing you wanted theme first i was going to only add the card view option but this is not problem you can check if you have time the Commit of this PR and before latest commit before changing the admin panel UI. i will make this pr draft for you so you can take your time. Right now i don't have mush time to redo the pr and stuff. so thank you and good luck.