README

💡 A Statamic Control Panel addon that provides a visual overview of your "Component" fieldsets, grouped and displayed by page section — including optional preview images.

✨ Features

• Automatically discovers all fieldsets matching the (Component | Group) - Name pattern.
• Groups components by page section (e.g., About, Home, etc.).
• Displays component names, handles, and titles clearly in the control panel.
• Extracts and displays preview images from looks field instructions, if available.
• Helps content editors and developers get a quick visual inventory of reusable components.

💻 How It Works

The addon scans all fieldsets and identifies those with titles matching:

(Component | Group) - ComponentName

For example:

(Component | About) - Leadership
(Component | Home) - Hero

It then groups these into logical sections (About, Home, etc.), and extracts component details such as:

• Name — e.g., Leadership, Hero
• Handle — fieldset handle
• Title — full title string
• Preview image — optional, pulled from an <img> tag inside the instructions of the looks field

The grouped data is passed to a custom CP view, which displays a visual list of all components and their metadata.

🚀 Installation

composer require isaadsalman/section-view

⚙️ Usage

1. Ensure your fieldsets follow the naming convention:

(Component | Group) - ComponentName

1. Add an optional preview image:

In your fieldset YAML or builder, create a field named looks and include an image tag inside its instructions field. Example:

handle: looks
field:
  instructions: '<img src="/assets/components/leadership-preview.jpg" />'

1. Access the view:

After installation, navigate to the corresponding route in the Statamic Control Panel. You will see a grouped list of components with images (if provided).

🔐 Permissions

This addon includes fine-grained permissions to control access in the Control Panel:

• view section view: Allows users to see and access the Section View navigation item and main overview page.
• manage sections: Grants management permissions for sections.
  • create sections: Allows creating new sections.
  • edit sections: Allows editing existing sections.
  • delete sections: Allows deleting sections.

You can assign these permissions to roles or individual users from Users → Roles → Permissions in the Statamic Control Panel.

🙌 Credits

Created by Isaad Salman — inspired by the need to make component management more visual and intuitive in Statamic.

📄 License

MIT License. See LICENSE for details.