feat: Implement assigning colors to environments

[jirkavrba]

What is this PR about?

This PR adds an option to assign color to specific environment. This makes it clear that you're working for example on a production environment.

Checklist

Before submitting this PR, please make sure that:

• You created a dedicated branch based on the canary branch.
• You have read the suggestions in the CONTRIBUTING.md file https://github.com/Dokploy/dokploy/blob/canary/CONTRIBUTING.md#pull-request
• You have tested this PR in your local instance. If you have not tested it yet, please do so before submitting. This helps avoid wasting maintainers' time reviewing code that has not been verified by you.

Issues related (if applicable)

Screenshots (if applicable)

Here's a video:
dokploy-environments.webm

---

Environment without a color:

Environment with a red color assigned to it:

Dialog for selecting colors:

Greptile Summary

This PR adds the ability to assign colors to environments, making it easier to distinguish between different environments (e.g., production, staging). The implementation includes database schema changes, API router updates, and UI components for color selection.

Key changes:

• Added color field to the environment table with a new migration
• Updated API schemas to include color in create/update operations
• Modified the update logic to allow name updates for default environments when the name hasn't changed
• Added color selection UI with 7 predefined colors (blue, red, yellow, green, teal, purple, pink) plus a "no color" option
• Applied the selected color as a background on the environment page Card component
• Removed edit restrictions for default environments (now allows editing description and color)
• Refactored indentation in dokploy-restart.ts notification file (unrelated to feature)

Issues found:

• Dynamic Tailwind classes won't work - uses inline styles correctly for the Card background
• Single space value for "no color" will be trimmed to empty string
• Incorrect htmlFor attributes on color labels
• Missing validation for hex color values in the schema
• Duplicated color selection UI in both create and edit dialogs

Confidence Score: 3/5

• This PR is mostly safe to merge but has some issues that should be addressed first
• The implementation follows good patterns (using inline styles instead of dynamic Tailwind classes, proper API integration), but has several issues: the "no color" option uses a space that gets trimmed to empty string causing potential bugs, incorrect HTML attributes, missing validation for color values, and code duplication. The unrelated formatting changes in dokploy-restart.ts add noise. These issues are not critical but should be fixed for code quality.
• Pay close attention to advanced-environment-selector.tsx for the space trimming bug and duplicated code

_{Last reviewed commit: 1216549}

[greptile-apps]

_{7 files reviewed, 5 comments}

_{Edit Code Review Agent Settings | Greptile}

[greptile-apps]

Additional Comments (1)

apps/dokploy/components/dashboard/project/advanced-environment-selector.tsx
single space gets trimmed to empty string (edit dialog)

Same issue as the create dialog - use empty string:

								<SelectItem value="">
									No color

[greptile-apps]

_{8 files reviewed, 4 comments}

_{Edit Code Review Agent Settings | Greptile}

[greptile-apps]

incorrect htmlFor attribute

The label's htmlFor should be "color", not "description"

Suggested change

	<Label htmlFor="description">Color</Label>
	<Label htmlFor="color">Color</Label>

[greptile-apps]

incorrect htmlFor attribute

The label's htmlFor should be "edit-color", not "description"

Suggested change

	<Label htmlFor="description">Color</Label>
	<Label htmlFor="edit-color">Color</Label>

[greptile-apps]

missing validation for color field

No validation exists for the color field. Consider adding a regex pattern to ensure only valid hex color codes are accepted (e.g., #[0-9a-fA-F]{6}). This prevents invalid color values from being stored in the database.

_{Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!}

[greptile-apps]

duplicated color selection component

The same color selection UI is duplicated in both the create and edit dialogs (lines 322-350 and 419-447). Extract this into a reusable component to avoid duplication and simplify maintenance.

_{Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!}