Skip to content

Conversation

@DJJones66
Copy link
Contributor

Feature: Collapsible plugin panels and category counts in Settings page


Summary

This PR enhances the Settings page UI/UX by introducing collapsible plugin panels, category usage counts, and improved state handling for active plugins. These changes make the Settings interface more organized, easier to navigate, and scalable as the number of active plugins grows.


Changes

🔹 UI Components

  • Added Material UI components:

    • Collapse for collapsible plugin panels.
    • ExpandMoreIcon and ExpandLessIcon for expand/collapse controls.
  • Updated category dropdown:

    • Now shows the count of active plugins per category in both the dropdown menu and the selected value.

🔹 State Management

  • Introduced collapsed state keyed by plugin ID + module ID:

    • Panels are collapsed by default when a new plugin is added.
    • Collapse state persists per plugin and toggles on expand/collapse button click.
  • Added pluginKey utility to uniquely identify plugin panels.

  • Added toggleCollapsed function for user-driven expand/collapse.

🔹 Lifecycle Handling

  • Added useEffect to:

    • Initialize collapse state for new plugins.
    • Clean up collapse state entries for removed plugins.

🔹 Layout Adjustments

  • Wrapped plugin content (LegacyModuleAdapter) inside Collapse:

    • Content is hidden when collapsed, rendered when expanded.
    • Panels remain lightweight and avoid rendering inactive plugin UIs unnecessarily.
  • Added tooltips for expand/collapse and remove actions to improve accessibility.


Motivation

  • Current Settings UI shows all plugin panels expanded, which can be overwhelming as the number of active plugins grows.
  • Collapsible panels improve readability and let users focus only on relevant settings.
  • Adding category usage counts provides a quick overview of how many plugins belong to each category, helping with navigation and management.

Testing & Validation

  • Verified that new plugins appear collapsed by default.
  • Confirmed expand/collapse works consistently per plugin.
  • Ensured collapse state resets cleanly when plugins are removed.
  • Checked category dropdown displays correct active plugin counts.
  • Confirmed tooltips render correctly and buttons are accessible.
  • Tested across multiple plugin categories and switching between categories.

Impact

  • Backward-compatible with existing settings data.
  • Improves UX for managing large sets of plugins.
  • Reduces visual clutter while maintaining quick access to plugin settings.

Checklist

  • Add collapse/expand controls for plugin panels
  • Persist collapse state per plugin
  • Add category usage counts in dropdown and selected value
  • Ensure default collapsed state for new plugins
  • Add tooltips for expand/collapse and remove actions
  • Validate UX with multiple plugins across categories

@DJJones66 DJJones66 merged commit 22f9702 into main Sep 17, 2025
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.

2 participants