UI/UX - Tabular model

[SoapyDev]

Some user stories:

---

User

• As a user navigating the application for the first time, I would like to have a concise view for every aspect that the application can affect on my machine, so I can navigate the application with ease.

Dev

• As a developer, I would like to be able to add new commands, install application with ease so I can participate.
• As a developer, I would like to be able to participate, without having to understand the whole application, to limit the time spent on adding simple stuff.

Propositions

The application could use multiple tabular views to segregate abilities, show a welcome message and a help section. This would allow for more clarity for the end user, while also allowing the code to be easily separated by context.

The idea is to separate every context and its commands to their own domain. That way, every tab can become their own crate that is responsible for rendering, the list of commands, description, names, icons.

Visual example (dont pay attention to the colors, I made this with defaults):

[bungadrum]

This looks amazing forget about it being just a model or feature/option this has potential to be a new tiling WM or even a new Desktop enviroment. Anyone who likes working with tabs is gonna love this.

[JustLinuxUser]

It looks good, but what if the number of tabs is just too big though, and this also makes nesting tabs kinda impossible, rn you can nest directories as deep as you want, but nesting and managing tabs would be much harder. But if Titus likes it I will implement that no questions asked :)

[JustLinuxUser]

Another concern I see, is it would be hard to handle resizing terminal to be much smaller, so that would seriously reduce compatibility. But this can be solved by writing the tab widget from scratch or using some widget library for rattatui

[JustLinuxUser]

To answer your concern about easily adding new commands as a developer. The file list.rs has a variable called tree. When you look at it a little it is very easy to add new stuff to it, it uses a JSONish syntax, so you can easily make PRs by changing that variable. If you need further help after looking at it, you tag me in this issue again and I will write a detailed explination on how to make changes to that variable. Good luck :) and I am impressed that you managed to create that interface as a prototype

[SoapyDev]

Hello,

Thanks for the feedback @bungadrum , @JustLinuxUser .

• For the first concern, its real, but I would suggest that within a tab, you can still create a nesting list or subcategories.

• For the amount of tabs, I think this should always be kept in check to avoid over specificity. Large broad category at the top and specific action within, like on Winutil.

• The resizing issue is also real. Ratatui as an overflow-hidden strategy, but a wrapping one could be more effective in this case.

• For the developper concern, to me, its more about how the list is one single entity that is tangled with the concerns of the application logic, rather than its own separate thing or multiple specific list. Many dev/sys admin might not be familiar with Rust. I think it would be beneficial to aim to remove any applicative logic from their sight to avoid leaving any talent at the door :)

Here is the resulting setup I came to, its far from perfect, and the list could go into its own file, but I find it quite clean.

Thanks for your time!

[ASWeiler86]

Honestly I love this idea, I prefer horizontal tabbed navigation over vertical

One idea to get past the issue of too many tabs without going crazy nested would be to add a forward and backward button to the far right after the search icon. Then in code check for say 10 tabs and any others would be hidden unless forward is pressed.

Does this make sense?

[SoapyDev]

@ASWeiler86, if I understand well your idea :

A tabular view that is cantered on the selected tab by default, with two carousel like button that offset the view by x amount of tabs?

This would be custom stuff, but it would work in theory and could be quite nice. For now I did add a first/last binding, but I can see how an offset would be possible.

[JustLinuxUser]

I will start working on a proof of concept PR as soon as @ChrisTitusTech shows any interest in this idea, also if he does, I will wait for my other PR to get merged / rejected, so I can be sure what to base this PR on

[bungadrum]

How about going the Whisker menu route and adding tabs with these categories: Favorites, All Applications, Accessories, Games, Graphics, Internet, Multimedia, Office, Settings, System and Wine if you are a gamer that's 10-11 tabs with Rofi added.

[ASWeiler86]

@SoapyDev - Yeah that pretty much covers the idea. For whatever reason I read faster left to right vs up to down.

I also find it better support for smaller screens as you can likely set it to respond to touch where you can drag through the tabs and it stops on the center as the "active" tab, hell even mouse wheel too just to be fancy. That is to me faster than scroll up and down.

[ChrisTitusTech]

Very Cool @SoapyDev - The main concern is how fast the project moves and PRs are accepted. I'd wait or coordinate with me before dumping a ton of time into this. Right now we are changing and adding menu items, so be careful during the UI and overhaul. If you can isolate and make a lot of this module so we don't have too many conflicts on the final PR that would be ideal.

[SoapyDev]

@ChrisTitusTech , thanks :)

Yeah, I knew this would not be merged. Its too fat and bring some breaking changes anyway. But I had a few hours and was happy to learn the basics of Ratatui. Plus I had to get it out of my head.

I think @JustLinuxUser has an idea about how to implement this without making any serious change to the code base. If he finds it to not be possible, then I will be happy to help and coordinate.

Here are some tabs category ideas:

• Welcome
• Applications
• Security
• System
• Audio
• Visuals
• Terminal
• Theming
• Help

For theming, a cool idea, might be to have multiple themes (Catpuccin, Nord, etc...) and setups.

[JustLinuxUser]

I made adding multiple themes very easy, but haven't implemented any switching for themes in runtime, so if you want to add some themes, I can add clap flags to switch in between them. I am not really a theming person, but if someone will do that part for me, I can't complain :)

[SoapyDev]

Oh, I might have been unclear. I meant theming script for the distro. But I still added a theme for colorblind users :) I will expand on the inner themes next week!

[SoapyDev]

@JustLinuxUser, @ChrisTitusTech , here are some layout idea that might be doable for the TUI, with corresponding navigation options. I also added a few idea in there that are not necessary, but I think are cool :), hope you do too.

1 - Two column tabs

Optimal width

Reduced size

Navigation

2 - Carousel - Harder

Optimal width

Reduced size

Navigation

3 - Columnar

I leave a comment on that one. Its by look my preferred one, but I did not find an intuitive way to navigate from tabs to commands.

Optimal width

Reduced size

Navigation

I hope one of them will be to your fancy. As always, I am open to feedback. Thanks for your time!

[lj3954]

The third one looks really nice, almost like how you'd design a GUI. I don't think it's too difficult to make that intuitive. It's going from left to right, so just areas of focus. Left from the main page focuses the tablist (some indication that it's focused would be necessary), right from the tablist focuses the main page, and right/enter from the main page executes the command or enters the directory.

[javif89]

@SoapyDev I want to +1 this idea. The column layout looks awesome. For navigation, what do you think about doing something similar to what LazyGit does? Each panel has a number and you just press the number to focus it and navigate that way.

[lj3954]

I have a draft of the UI nearly ready. Just need to fix up a few major issues & render a new design.