Add a pin button for toggling collapse/expand on the Expression Editor and the Sidebars

[juarezr]

Add a pin button for toggling collapse/expand on the Expression Editor and the Sidebars

First of all, thanks for the excellent tool that Regex101 is and for all effort you put into it. It really makes our lives and work easier.

Use Case / Pain Point

While editing/debugging regexes is important to maximize the view on what you are currently focused for reading and making comparisons between the regex, the text, the matches, and the reference as needed.

There are some cases when either the pattern or the text is too long to fit in one line. When this happens the word/line wrapping makes it difficult/cumbersome to read the text on the panels and editors. These difficulties become even worse when working in stations with small and narrow screen sizes.

Solution

It would be good if there was an easy, fast, and accessible way to collapse/expand the three columns/views that compose the Regex Editor interface:

• Left Sidebar
• Editor
  • Regular Expression
  • Text string
  • Substitution
• Right Sidebar
  • Explanation
  • Match Information
  • Quick reference

This would help maximize the focus mainly either on the editor (Regex/Text/Substitution) or on the Right sidebar (Explanation/Match Information/Reference).

Current State

Currently, there are the following options in the settings:

• Always toggle the left sidebar
• Always toggle the right sidebar

These options work fine, but it would be great if the collapse/expand functionality are directly accessible in the editor interface.

When considering only the left sidebar, I think that having the option in settings is good enough as it has a "hamburger" button/menu for toggling.

But for the Editor and for the Right Sidebar, it would be faster and easier to have the option accessible right in the interface for switching/collapsing/expanding between the Editor and Right Sidebar.

Notice also that:

• Inside of the Editor and the Right Sidebar each panel has an accordion/toggle button (an arrow down/ V) so:
  • One can choose to expand and collapse vertically any of the 2/3 panels at any time
  • One can have one, two, or three panels open at the same time, maximizing according to what needs to be compared.
  • One can easily discover and use this functionality.
• If the "always toggle" option is not marked/true, then the "hamburger" menu on Right Sidebar only is visible when the responsive size of the screen is very small like in a cell phone.

Sugestion / Feature Request

Some suggestions for improving the user interface in an empiric order of impact/cost:

1. Add a "Pin" toggle button for each one of the sidebars so the user can quickly and easily discover and show/hide the view as needed.
2. Add a "Pin" toggle button for the Editor column too for when the user wants to focus on the right sidebar comparing the Explanation/Match Information/Quick reference.
3. Add a toggle button inside the Editor and the Right sidebar for toggling the inner accordion/panels expansion so:
   1. It could switch the panel expansion between the current vertical and new horizontal so the panels could be placed side by side.
   2. It would be useful for comparing a long Test String/Substitution or a long list of Explanation/Match Information/Quick Reference.
   3. It would help with the reading on narrow screens by making only one column visible and putting all the panels side by side.

Hope that the suggestion can help improve this wonderful tool.

[firasdib]

Do you have any examples of how this might look in the UI?

The right sidebar can be extended/collapsed by dragging it at the left edge. Does this satisfy your requirements?

[juarezr]

Maybe this example created by using vscode UI would help.

Notice the quick switch when using the < button in the pictures below.

Before

After

I hope this could help.

[firasdib]

Not really, I would need it to work with the UI on regex101 :)

[firasdib]

I've been trying to find a good way to fit this into the UI, but I have not been able to find one. If you can mock something up, please add it here. Until then, I'm closing this.