[Feature Request] UI/UX Enhancement - Creating a back button on relevant modals/dialogs/views

[Kabiirk]

Is your feature request related to a problem? Please describe.
Hi Rocket Chat Team,
I have been using the app (on Ubuntu 22.04.3 LTS) for some time now & love the seamless functionality & features built into the Desktop app.

During my usage, I observed an enhancement in the user interface that I believe could improve the overall navigation experience. Currently, there is no dedicated Exit or Back button within Add Server, Download & Settings views/dialogs. While the application offers a plethora of features, the absence of a straightforward way to navigate back might pose a slight challenge for users, especially those accustomed to such navigation elements in standard interfaces.

Describe the solution you'd like
I propose adding an Exit/Back button or a ❌(cross) in the top-right or top-left corner of the Add Server, Download & Settings Views, consistent with UI design principles. It would allowing users to easily navigate back to the previous screen, or open.rocket.chat page/view.

For a better understanding of my request, I have attached screenshots of similar UI element that I observed while using Discord (circled in green) that I would also like in the Desktop app:

Describe alternatives you've considered
An alternative to this is you click the open.rocket.chat button (ref. screenshot below) on the top left of the root window which takes you to the open.rocket.chat server. I presume that if there are multiple servers, clicking on that server button leads to the respective Panel/Server View.

Additional context
Benefits:

1. Improved user experience: Users will find it more intuitive and user-friendly to navigate within the application.
2. Consistency: Adding a standard Exit or Back button aligns with common UI patterns, enhancing the overall usability of the desktop app.

Implementation:
I have a potential implementation in progress and can provide a pull request once the enhancement is approved. As a PoC, I implemented this functionality in the Add Server view that pops up when user clicks the ➕ sign in the SideBar. Please refer the screenshot below:

Screenshots (of PoC implemented):

Clicking Exit takes the user back to https://open.rocket.chat/

Note:
Please let me know if the scope for this needs to be augmented to cover other views/elements for uniformity or adding key binding to this functionality (like pressing Esc takes you back as well). I mentioned Add Server, Download & Settings because these are the views/functionalities most commonly used by me.

[jeanfbrito]

I dont see as a problem dont have a close/back as the downloads and settings views are like tabs of the application.
A POC is always welcome, so we can see how it will behave.

[Kabiirk]

Yeah sure, I'll make a PR with PoC for your perusal.

[Kabiirk]

Hi @jeanfbrito, Team,

Apologies for the delayed response on this. Had my Midterm Examinations, which got over today.

I understand your Tabs approach, i.e. imagining Add new server, Downloads, Settings & Different Servers as separate 'Tabs' (like chrome tabs) & user is switching between tabs.

Personally, having a Back button makes sense because Add new server, Downloads & Settings are different from server buttons/views because they have a different purpose which affects whole desktop app (manage downloads, settings, add new servers etc. across the entire Desktop app).

To align your tabs analogy with what I implemented, the proposed solution would retain the tab structure while introducing a dedicated Back button for improved UX (for E.g., take the chrome://settings/ URL, it looks like a different tab, but it's purpose is different from other webpage/site tabs. Users have the option to switch between tabs as well as utilize the ❌ (cross) icon to return to their last active tab) which seems intuitive to me.

PFB the outputs of my POC & let me know your thoughts on this & the way forward !

POC Specifications

I have created a Back Button for Add new server, Downloads & Settings pages of the Rocket.Chat Desktop App. Clicking the Back button takes you to the Last selected server in the app (by extracting lastSelectedServerUrl via useSelector hook)

Video demo:

back_button.webm

Source Code

The code for this can be viewed & cloned from feature/back_buttons branch in my fork of this repo.

Guidance required

I faced challenges with creating new actions similar to DOWNLOADS_BACK_BUTTON_CLICKED in src/ui/actions.ts. As I understand, to do this, I would also need to edit relevant .ts files in src/ui/reducers

[Kabiirk]

Hi @jeanfbrito ,

Let me know your thoughts in this.