Quick Connect look and feel

[ap0int3d]

Hi !
Here is a quick and dirty design for the Quick Connect window. The idea is to hopefully help make it easier to scan visually :

As you can see I divided the window in two colums. The left one shows the core feature of the Quick Connect tool. On the right you'll find additional settings that may or may not be useful.
Also I use "cards" to help divide things in clearly identifiable sections but that can be achieved in other ways (for example with divider lines as I used to divide both columns).
Finally I have removed the Saved Connection drop down. I do not feel it belongs to a quick connect tool. BTW, it could be interesting to add the Saved Connections in a left pane in the main window that can be opened and closed the same way you did for the Telemetry and Notepad sections on the right.

[bifrost0x]

Thank you for contributing and for sharing this feature idea! I'll take a detailed look at it today. If it fits the project and is feasible, I'll try to implement it and will keep you updated here.

[bifrost0x]

Thanks again for the detailed idea and mockup! The Quick Connect redesign is now implemented in PR #101: #101

The implementation includes:

• a responsive two-column layout with clear Connection Details, Recent Connections, and Advanced Settings sections
• removal of the Saved Connection dropdown from Quick Connect
• account-scoped recent connections stored only in the browser, with no credentials stored
• collapsible Recent Connections and Advanced Settings sections
• up to five recent connections visible at once, with additional entries scrolling inside the section
• a fixed header and action footer, so Cancel and Connect remain visible while the form content scrolls
• explicit handling when a saved profile references a jump host that is no longer available

The relevant automated tests are included and the implementation is available for testing now. If you have time to try it, I would really appreciate your feedback, especially on the layout, scrolling behavior, and the overall Quick Connect workflow. Please let me know if anything still feels awkward or could be improved.

[ap0int3d]

Whoa that was fast !
It looks cleaner and almost perfect for my taste.

One or two small things to fine tune the new experience :
As shown in the mockup, I would move the "Authentication method" a the top of the "Connection details" card and place the associated drop down list on the same line on the right.
I would also bring the rest of the settings (host, port, username, password/ssh key) closer together and have the Authentication method a bit away from these "authentication" settings.
Please see an example below:

[bifrost0x]

good point, i will bring this into the next pr :)
thx for your collaboration!

[ap0int3d]

Just to be the annoying guy who is never happy :

• the "Connection details" card is missing the horizontal divider line that the other cards have between the header and the main body ;)
• "Details" in "Connection details" should use a capital D.
• "Settings" in "Advanced settings" should use a capital S.
• In the Advanced settings, "Run after connecting" font size does not match "Jump host"
• In the Advanced settings, "Exact command preview" font should be smaller (or maybe text should not be in bold) than "Run after connecting" since it is a part of the command block

Thanks a lot for your great work

[bifrost0x]

Done in #102 ;-)

Every tip and contributions helps to make the tool usable ;)

[ap0int3d]

Perfect ! Thank you !

One small issue though : when clicking on a "saved connection" available in the main window when no ssh session is opened, it opens the Quick Connect popup window with a banner indicating it is a saved connection and pre-populated fields. Currently the banner is below the "Authentication method". See below.

I feel the banner should be above the "Authentication method" setting.

[bifrost0x]

ok thx...i will implement this not separately but with one of the next release ;)

[bifrost0x]

done in pr #104 ;)