Improving Admin UI with Collapsed Actions in Brenia

Introduction

The Brenia project is focused on providing streamlined administrative interfaces. A key goal is to make these interfaces more efficient and less visually cluttered. This post details the effort to consolidate less frequently used admin actions into a more compact menu, while ensuring critical actions remain easily accessible.

The Problem

The original admin interface had several actions displayed as individual buttons, leading to a visually noisy and potentially overwhelming experience for users. Specifically, actions like clearing the cache, triggering Auto AI processes, and skipping certain steps were taking up valuable screen real estate, while the "Reiniciar chat" (Reset Chat) action needed to remain prominently displayed.

The Solution: Collapsing Actions into a Menu

To address this, a new approach was implemented: frequently used actions remain visible, while less frequently used ones are grouped under an ellipsis (···) menu. This declutters the interface and helps users focus on the most important tasks. The "Reiniciar chat" button was intentionally kept separate and always visible to ensure it remains easily accessible.

Here's a simplified example of how such a menu could be implemented in PHP using HTML and potentially a framework like Laravel's Blade templates:

<div class="admin-actions">
    <button>Reiniciar chat</button>

    <div class="dropdown">
        <button class="dropdown-toggle" type="button">⋯</button>
        <div class="dropdown-menu">
            <a class="dropdown-item" href="#">Clear Cache</a>
            <a class="dropdown-item" href="#">Auto AI</a>
            <a class="dropdown-item" href="#">Skip All</a>
        </div>
    </div>
</div>

This example demonstrates a basic structure where "Reiniciar chat" is a standalone button, and the remaining actions are nested within a dropdown menu triggered by an ellipsis button. CSS would be used to style the dropdown for a clean look.

Additional UI Improvements

In addition to collapsing the admin actions, several other UI tweaks were made:

• Reduced padding on layer rows to fit more layers on the screen without scrolling.
• Moved format badge below the canvas with a background to guarantee contrast, improving visibility.
• Reduced the maximum height of the editor panel to accommodate the format badge.

Key Insight

By strategically collapsing less frequently used actions into a menu and making targeted UI adjustments, the Brenia project achieved a cleaner, more efficient, and user-friendly admin interface. Prioritizing visibility for critical actions ensures ease of use, while decluttering the overall layout improves the user experience.