# Motivation

I built a custom layout system for Mecha’s control panel feature (which is optional) without relying on external libraries. The initial goal was to design a minimalist control panel interface with as few files as possible. Over time, though, certain features became unavoidable, as they were necessary to showcase Mecha’s potential for further development by others. The features I’m referring to include:

• A more modern source code editor
• Drag & drop lists
• Drop-down select box with AJAX and search functionality
• Extra buttons next to text inputs (e.g., for file selection)
• Pop-up windows
• Toasts

The process of developing the layout system directly through the Panel extension has turned out to be quite troublesome, since I’ve had to focus not only on HTML and CSS, but also on PHP code—which really shouldn’t have been involved in this part of the work. That’s why I came up with the idea of separating this layout system from the extension through this project, so I can focus more on defining the specifications.

With this project, the goal is to make future control panel features more scalable. The current control panel layout system is indeed solid, but it isn’t scalable. You can add or remove input fields, but it’s not flexible enough to support additional features. For example, with the current layout system, adding a button next to a text input is very difficult. Why? Because when I first built it, I never imagined that Mecha would eventually require such complex features. Truly, it was completely unexpected.

What inspired me to create the control panel layout system at that time was GNOME, a desktop environment widely known in the Linux community, especially because it was used in the latest version of Ubuntu. It’s very simple, and even has its own documentation page that not only explains the structure but also the philosophy behind it—the reasons why certain design decisions had to be made.