Modernize Native UI Design

[austincondiff]

It has been some time since Xcode had it's panel toggles all on the right (assuming that is why TablePlus uses this pattern) and we could be making use of full-height sidebars in modern macOS apps. I suggest we update the UI to reflect latest patterns in macOS today. Here is what this might look like...

Welcome window

Workspace window

Summary of proposed changes

• Welcome window adopts a design inspired by Xcodes new welcome window (socials would move to the about window)
• Left sidebar toggle moved above left sidebar
• Use standard window tabs
• Added plus button to tab bar which when clicked will open sheet that will present available connections to user
• Move back/forward navigation to toolbar
• Add title to toolbar
• In activity viewer
  • Replaced : with chevron.compact.right SF symbol
  • Added connection status indicator
  • Rounded corners of tag
• Moved lock button to right of toolbar and used SF symbol
• Changed commit button symbol and indicating when we have changes
• Moved right sidebar toggle button above right sidebar
• Using more standard macOS table appearance
• Rearranged status bar
• Removed column button in preference of right clicking table header
• Combined console log bottom expandable panel with query editor allowing user to see, discard, and apply staged queries if they exist
• Simplified left and right sidebar design moving search bars to bottom as in other apps

I have spent a lot of time researching these patterns as we are trying to implement them in our work with CodeEdit. There is a lot here so I understand if you can't do all of this, but I wanted to leave my recommendations here in case doing something like this interests y'all.

This is all I had time for now, but it might be fun to explore other screens and interactions in the future (in which case I will leave them here). I'd love to hear your thoughts!

[huyphams]

Hi @austincondiff, thank you for the suggestion. Actually, we do have a plan to redesign Next TablePlus. Some of our redesigned UI will follow macOS, but some aspects are not practical.

For example, we have found that placing the search bar at the bottom is not useful. While it provides more space for the UI and looks beautiful, it is rarely used when positioned at the bottom. It becomes useless in full-screen mode because sometimes it triggers the dock.

Transparency is beautiful but distracting, and while the native tab is standard, it creates a whole new window and degrades performance, etc.

We're very close to implementing the next version of TablePlus. Again, thank you for the beautiful design and the suggestions.

[DerinChiu]

Hi @austincondiff, thank you for the suggestion. Actually, we do have a plan to redesign Next TablePlus. Some of our redesigned UI will follow macOS, but some aspects are not practical.

For example, we have found that placing the search bar at the bottom is not useful. While it provides more space for the UI and looks beautiful, it is rarely used when positioned at the bottom. It becomes useless in full-screen mode because sometimes it triggers the dock.

Transparency is beautiful but distracting, and while the native tab is standard, it creates a whole new window and degrades performance, etc.

We're very close to implementing the next version of TablePlus. Again, thank you for the beautiful design and the suggestions.

Transparency makes the content more layered and easier to distinguish different sections. For example, it actually looks quite messy when table list, table content and row detail display at the same time in current design (even worse when set a same font for them).