Changing the Layout.

Introduction

The design and layout of the tool had to change to help implement future features. I made these necessary changes into the actual tool. This meant updating the layout and design to make it more user friendly and future proof. I wanted to make sure that the tool would be easy to use and flexible enough to handle new features as they were developed.

Abstract

Because I used React for my tool, all the individual elements that make up the tool are split up into components. These components are sort of like building blocks that can easily be taken out and placed somewhere else. This made the process of changing the layout relatively easy.

I started by changing the skeleton of the page. First the page had a single layout with options at the bottom. I changed this to a two panel layout. One panel on the left side of the screen would be for the options. The other panel on the right would be the iFrame which would take up the remaining space.

Next I placed the original components like the template selector and the input bar back into the new layout. These components fit well into the new two panel design which makes the tool more organized and easier to navigate. The React components made it simple to move these elements around without breaking the functionality of the tool.

Demo

Conclusion

The new layout is much more flexible and future proof compared to the old one. By moving the options to the left side and using the full height of the page, there's now plenty of room to add more options in the future. The panel is also scrollable so in theory unlimited options could be added. This makes the tool much more adaptable to new features. Plus, the new layout is inspired by the ChatGPT layout for plus members, which is already a strong start for its usability. This makes the new design both more practical and also stronger and more user friendly.