[v5.x] New UI - Vue & Inertia Discussion

[peaklabs-dev]

This discussion is a place to discuss ideas, wishes and other things related to the New UI.

[alepouna]

Love the current UI already and I am super used to it by now, my only ask would be to streamline a bit how popups for confirmations are handled, especially password ones as some password managers struggle sometimes to detect them!

Another QoL update on the UI would be to have the environments selection, as well as renaming and managing projects, environments, etc. be a little bit streamlined and have more options when selecting one (as now you have to go a level back, click manage, etc.)

More theming and customization options (like custom color accents, custom logo, name, etc.) e-mail customization (as all e-mails right now point to CoolLabs not the instance for example) would all be nice to have additions to v5 :)

PS: I've been using Coolify for almost a year now for my own applications at home and for production environments and I couldn't be less happy with it, thank you Andras, Peak, contributors and the community!

[peaklabs-dev]

Thank you for the feedback, most of your ideas will come with the new UI. Custom themes/ emails will definitely be something for much later if at all, but maybe we will add it at some point.

[desw0lf]

While using the product, I noticed a few areas that could be improved and wanted to share some thoughts.

Please let me know if this feedback is welcome and useful, and if you'd like me to keep sharing ideas going forward.

Main UX Issues

• In some forms, there’s a "Save" button at the top, but certain fields apply changes instantly without needing to click "Save". This can lead to unintended changes. Here are a few places I noticed this:
  • Projects → (project) → General → Build Pack
  • Notifications → Discord/Telegram/Slack/Pushover → Enabled (checkbox)
  • Notifications → Telegram → Enabled (checkbox)
    • Potential fix: Consider using a toggle switch for "Enabled" and align it with the "Save" behavior.
  • Servers → General → Server Timezone

Minor UI Issues

• Some dropdowns could use better positioning or static placement. For example:
  • Projects → (project) → Advanced → "Advanced" dropdown
    This creates a horizontal overflow scrollbar, which could be avoided with a static dropdown positioning or some automatic css/js way.

Nice-to-Have Improvements

• Clearer indication when an Application/Service is running

• More info in the app/service list views, such as:

  • The ability to set a "favorite link" (first link by default?) for an app/service (clickable in Projects → Applications/Services list view)
  • Docker container ID
  • Buildpack info, (& number of services if Docker Compose is used)

• Differentiation between common CTA buttons, e.g. "Add" button, always looks the same with a green accent + certain icon, "Save" button to have it's primary accent etc

• Shared Variables: The current layout could be improved by presenting the three scopes ("Team Wide", "Project Wide", and "Environment Wide") as tabs or a collapsible dropdown in the sidebar to reduce the number of clicks.

Low Priority / Subjective Wishlist (May Not Be Worth the Dev Time)

• Ability to assign icons to Projects (custom or predefined)
• Same for Projects → Applications/Services
• Defaults for new apps/services — for example:
  • Default health check settings, domain direction, etc.
    This would help reduce repetitive setup for each new service.

Additional Thoughts (Open to Discussion)

• I know Tailwind is the cool and hip approach, but maybe we should consider supporting custom themes?
  • Using more traditional class names might help with theming flexibility.
  • It would make it easier to target elements and avoid the headache of hardcoded utility margins and paddings in Tailwind.

[peaklabs-dev]

Thanks for the detailed feedback, we have plans to implement almost all of the improvements you suggested, such as using toggle switches instead of checkboxes and so on. For custom themes, this will be in something for future, if at all.

[Cinzya]

Seperate Domain and Port fields

Very often, people don't want to use the generated domain from Service Stacks or Compose Applications.
However, since those have the exposed port embedded in a single input field, it is fairly easy to miss and despite the warning, many people accidently remove the port when editing the domain (e.g. see #5287, #5703), which leads to problems for the proxy.

Creating dedicated input fields for both the Domain and Exposed Port, similar of how it is the case for normal Applications already, would prevent people from accidently removing this port. And also avoid confusion why a port is needed in the domain.

Possible re-design

[peaklabs-dev]

Thanks for the re-design. There will be a completely new domain and network view that will hopefully clear up all the confusion - it will be similar to this with a ports field and a URL field.

[Vladimir-Va]

Thank you for the wonderful product, I hope there will be a GUI for managing the proxy server and load balancer/stream.

[peaklabs-dev]

Yes for sure, scaling will be a core part of v5 alongside a new UI.

[albertorizzi]

• Show in resources the allocated ports, so I can easily see if a port is already allocated or free

[albertorizzi]

• Show the name of the server in the projects and single resources (now I'm using tags)

[techwithanirudh]

I've made a small user-style that tweaks Coolify's user-interface a bit.

Here's the link if you want to try: https://github.com/techwithanirudh/coolify-tweaks
I'd love feedback on it!

[pinkhairs]

I think light mode needs a little more love, super low priority, but I notice it has red text in the deployment logs for regular text... kinda panic every time I see things going along as expected but it's red text. 😊 Thank you. P.S. I'm happy to handle this if no one else wants to

[peaklabs-dev]

I totally agree. We will take better care of light mode in v5. If you'd like, you can open a PR to v4 and we'll take a look.

[pinkhairs]

@peaklabs-dev Thanks for mentioning that, I will try it out. Baby's first open source contribution btw 😊

[pinkhairs]

As I take a more observational look at the UI (rather than using it, because I'm used to using it) I do have a few ideas from a UX perspective:

1. Surface resources on the dashboard — I think the UI prioritizes parents in parent/child relationships, so it requires a lot of drilling down to get to "the point" of why I logged on. Rows on dashboard should be 1. Critical status (with a note about the reason with quick actions, and so on). 2. Currently deploying, then the regular resources. Then projects, servers, destinations. Most frequently changed = top.
2. Activity feed panel — An inbox with notifications / alerts / activity would be awesome.
3. Navs should be grouped.(All of them, including on the Resource page because right now operations / config are mixed.) I'm pasting my take on the main sidebar menu below.

📥 Inbox (Side panel)

⚡ Operations

• Dashboard
• Projects
• Servers
• Sources
• Destinations
• S3 Storages

⚙️ Configuration

• Shared Variables
• Keys & Tokens
• Tags

🛠 Utilities

• Terminal

👤 Account & Team (I think this one should be behind the cog settings icon button dropdown actually)

• Profile
• Teams
• Settings

❤️ Contribute

• Sponsor Us
• Feedback

🚪 Log Out

[pinkhairs]

Actually I'm gonna HTML / CSS these ideas out and link here this week 😊

[pinkhairs]

Here is the prototype of the dashboard with UX ideas. I wish I could PR but I ran into an environment constraint (disk space) so this is what I can contribute for now. I'll move this into a PR once I’ve resolved my local env constraint.

https://github.com/pinkhairs/coolify-dashboard-ideas

Here's what I focused on:

1. Surfaced most changed properties to the front. (Resources → Projects → Servers)
2. Activity feed.
3. Grouped the menu.

I mocked it up in light mode to feed two birds with one scone.

Colors are flexible... the main idea is to show more status / ops info.

Curious what you think! Would love feedback on what resonates.