Sidebar : show tags and groups

[jarrah31]

Request

Following on from this reply in another issue.

I would like to add my support for the introduction of a sidebar in the macOS and iPadOS versions of WebSSH please.

I think it would be a great place to list all the SSH, SFT, and Tunnel connections in a collapsable menu system, similar to how Photos works in macOS and iPadOS.
Perhaps the inventory items (such as SSH, SFT, Tunnel) could be expandable like this? The first level expansion in SSH would show Group Names, with the next level showing Connections.

Here is a quick mockup in Photos with albums representing Connections and folders as Group Names.

However I do see that the current layout is similar to how the Files app on the iPad works, with the main sections on the left such as "On My iPad", and all the folders and files in the main right-hand screen.

It's a tricky decision to make - either method seems to work well, though I would probably prefer the Photos method. :)

[isontheline]

Thank you a lot @jarrah31 for your feedback 🙏

I agree with you that collapsable menu could be a great addition.
Moreover I also think that a "global search field" should be implemented in order to find a connection when we have thousands ones more easily than searching inside each top and subfolders.

Perhaps showing this search field when a top "sftp / ssh / tunnel" item is selected?

[jarrah31]

A global search field is a great idea! Though it feels better if it was perhaps visible all the time rather than only appearing when selecting sftp / ssh / tunnel, similar to the safari sidebar as shown below?

Is it possible to have the search field dynamically update / filter the list of Connections in the same way that Safari bookmarks works on the iPad? e.g.

[isontheline]

Great!

I was looking for the search field on Safari macOS but it's on iOS 😅

Yes could be great in that way

[jarrah31]

It may be worth including the New Connection button in the sidebar when all the connections are listed there too:

Also, is it possible to implement the ability to see what a button does when hovering the mouse over it? This would only be applicable to the macOS version though. e.g. this shows "Create a new tab". I thinking it could be used for "New Connection", mashREPL, Settings, Disconnect, Snippets, etc.

Just regarding the screenshot above, it seems the macOS version displays two sets of "+" to create a new tab.

[isontheline]

It may be worth including the New Connection button in the sidebar when all the connections are listed there too

You're right

Also, is it possible to implement the ability to see what a button does when hovering the mouse over it? This would only be applicable to the macOS version though. e.g. this shows "Create a new tab". I thinking it could be used for "New Connection", mashREPL, Settings, Disconnect, Snippets, etc.

I have forgotten these tooltips, that's right

Just regarding the screenshot above, it seems the macOS version displays two sets of "+" to create a new tab.

I need to disable the lower right "+" because I would like to be "same" as Safari :

[jarrah31]

Thank you!

I need to disable the lower right "+" because I would like to be "same" as Safari :

Yes good idea, makes sense to mimic the same method.

[isontheline]

An UI mockup idea from Jorge (by email) :

[isontheline]

Sidebar now displays groups and tags : https://testflight.apple.com/join/QSrBK59z