Feature Request: Children Display Macro/Widget

[LexioJ]

🚀 Feature Description

Add a "Children Display" functionality similar to XWiki's Children Macro or Confluence's Children Display Macro to automatically display subpages in a hierarchical table of contents format.

💡 Motivation & Use Case

When organizing complex knowledge bases or documentation in Collectives, users often need to:

• Create hierarchical page structures with multiple levels
• Provide navigation aids for readers to discover subpages
• Maintain up-to-date "table of contents" sections without manual maintenance
• Organize information in a wiki-like manner similar to other knowledge management systems

Current workaround: Users must manually create and maintain lists of child pages, which becomes outdated quickly and is error-prone.

🎯 Proposed Solution

Implement a Children Widget that can be inserted into any page to automatically display its child pages. This leverages the existing widget infrastructure used by landing pages.

Core Features:

1. Automatic Child Page Discovery: Display all direct child pages of the current page
2. Dynamic Updates: List updates automatically when child pages are added, removed, or renamed
3. Clickable Navigation: Child page titles link directly to the respective pages
4. Visual Integration: Consistent with existing Collectives UI/UX

Advanced Features:

1. Sorting Options:

   • Alphabetical: Sort by page title (A-Z, Z-A)
   • Creation Date: Sort by page creation date (newest/oldest first)
   • Modification Date: Sort by last modified date (newest/oldest first)
   • Custom Order: Respect manual page ordering if implemented

2. Display Formats:

   • Simple List: Basic bulleted list of page titles
   • Rich List: Include page metadata (last modified, author, emoji)
   • Tile View: Similar to recent pages widget with visual cards

3. Configuration Options:

   • Depth Control: Show only direct children vs. nested hierarchy
   • Filtering: Option to exclude certain pages or types
   • Empty State: Configurable message when no child pages exist

🔧 Technical Implementation Approach

Option 1: Widget-Based Approach

• Create ChildrenWidget.vue component following existing widget patterns
• Leverage existing findChildren() API from PageService.php
• Integrate with current page rendering system
• Allow insertion through page settings or editor toolbar

Option 2: Markdown Macro Approach

• Implement special markdown syntax (e.g., {{children}} or {children})
• Process during markdown rendering to inject dynamic content
• Offers seamless in-content integration

Backend Requirements:

• Extend existing PageService::findChildren() method with sorting parameters
• Ensure proper permissions handling for child page visibility
• Optimize queries for performance with large page hierarchies

Frontend Integration:

• New widget component in src/components/Page/Widgets/
• Configuration UI for widget options
• Responsive design for different screen sizes
• Integration with existing page state management

📋 Detailed User Stories

1. As a documentation author, I want to automatically display subpages so that readers can easily navigate through related content without me manually maintaining links.

2. As a project manager, I want to create project overview pages that automatically show all project-related subpages (meeting notes, documents, etc.) to provide a comprehensive view.

3. As a knowledge base maintainer, I want child pages to be sorted by last modification date so that the most recently updated content is highlighted.

4. As a content reader, I want to see at a glance what subpages are available under the current topic without having to navigate the sidebar.

🎨 UI/UX Mockup Ideas

Simple List Format:

📄 Subpages
├─ Meeting Notes - 2024-01-15
├─ Project Requirements  
├─ Technical Documentation
└─ Resource Links

Rich List Format:

📄 Child Pages (4 items)
┌─────────────────────────────────────────┐
│ 📋 Meeting Notes - 2024-01-15           │
│ Last modified 2 days ago by @alice      │
├─────────────────────────────────────────┤
│ 📖 Technical Documentation              │
│ Last modified 1 week ago by @bob        │
└─────────────────────────────────────────┘

Tile Format:

Similar to the existing "Recent Pages" widget but showing child pages instead.

🔄 Similar Features in Other Systems

• XWiki Children Macro: Tree view with sorting options
• Confluence Children Display Macro: List/tree display with metadata
• MediaWiki Category Pages: Automatic listing of category members
• Notion Database Views: Dynamic content organization

⚡ Benefits

1. Improved Navigation: Users can easily discover related content
2. Reduced Maintenance: Automatic updates eliminate manual link management
3. Better Organization: Encourages proper hierarchical content structure
4. Familiar UX: Matches patterns from established wiki systems
5. Accessibility: Provides multiple ways to navigate content

🛠 Implementation Considerations

Performance:

• Cache child page lists to avoid repeated database queries
• Implement pagination for pages with many children
• Consider lazy loading for nested hierarchies

Permissions:

• Respect existing page-level permissions
• Only show child pages the user has access to
• Handle private/public collective visibility correctly

Responsive Design:

• Adapt display format based on screen size
• Ensure touch-friendly navigation on mobile devices

Internationalization:

• Support RTL languages
• Translatable widget labels and configuration options

📱 Platform Compatibility

• Web interface (primary)
• Mobile web experience
• Consider future mobile app integration

📈 Success Metrics

• User adoption rate of the children widget
• Reduction in manually maintained page links
• Improved page discovery and navigation metrics
• Positive community feedback and feature requests

🎛 Configuration Examples

Widget-Based Approach:

// Widget configuration options
{
  sortBy: 'title|creationDate|modificationDate|custom',
  sortOrder: 'asc|desc',
  displayFormat: 'list|richList|tiles',
  showEmpty: true|false,
  emptyMessage: 'No subpages found',
  maxDepth: 1|2|'unlimited',
  showMetadata: true|false
}

Markdown Macro Approach:

<!-- Basic usage -->
{{children}}

<!-- With sorting -->
{{children sort="title:asc"}}
{{children sort="date:desc"}}
{{children sort="creationDate:asc"}}

<!-- With display options -->
{{children format="list"}}
{{children format="tiles"}}
{{children format="rich" showMetadata="true"}}

<!-- Combined configuration -->
{{children sort="date:desc" format="rich" maxDepth="2" showEmpty="false"}}

<!-- With custom styling -->
{{children class="custom-children-list" style="compact"}}

🤝 Community Input Welcome

• Feedback on proposed UI/UX approaches
• Suggestions for additional configuration options
• Input on implementation priorities