From 6e32919d36ff8529a02fecbf7e7e0b5fd7eb8e0e Mon Sep 17 00:00:00 2001
From: Nick <koolnube84@gmail.com>
Date: Mon, 2 Feb 2026 19:37:16 -0500
Subject: [PATCH] feat: color-coolify: store and set color on projects

---
 app/Livewire/Project/Edit.php                 | 12 ++++++-
 ..._03_001245_add_color_to_projects_table.php | 32 +++++++++++++++++
 resources/views/livewire/dashboard.blade.php  |  5 ++-
 .../views/livewire/project/edit.blade.php     | 35 +++++++++++++++++++
 .../views/livewire/project/index.blade.php    |  5 ++-
 5 files changed, 86 insertions(+), 3 deletions(-)
 create mode 100644 database/migrations/2026_02_03_001245_add_color_to_projects_table.php

diff --git a/app/Livewire/Project/Edit.php b/app/Livewire/Project/Edit.php
index a2d73eb5f..eafc649cb 100644
--- a/app/Livewire/Project/Edit.php
+++ b/app/Livewire/Project/Edit.php
@@ -14,17 +14,25 @@ class Edit extends Component
 
     public ?string $description = null;
 
+    public ?string $color = null;
+
     protected function rules(): array
     {
         return [
             'name' => ValidationPatterns::nameRules(),
             'description' => ValidationPatterns::descriptionRules(),
+            'color' => ['nullable', 'string', 'regex:/^#[0-9A-Fa-f]{6}$/'],
         ];
     }
 
     protected function messages(): array
     {
-        return ValidationPatterns::combinedMessages();
+        return array_merge(
+            ValidationPatterns::combinedMessages(),
+            [
+                'color.regex' => 'The color must be a valid hex color code (e.g., #FF5733).',
+            ]
+        );
     }
 
     public function mount(string $project_uuid)
@@ -44,10 +52,12 @@ class Edit extends Component
             $this->project->update([
                 'name' => $this->name,
                 'description' => $this->description,
+                'color' => $this->color,
             ]);
         } else {
             $this->name = $this->project->name;
             $this->description = $this->project->description;
+            $this->color = $this->project->color;
         }
     }
 
diff --git a/database/migrations/2026_02_03_001245_add_color_to_projects_table.php b/database/migrations/2026_02_03_001245_add_color_to_projects_table.php
new file mode 100644
index 000000000..6ab3c480b
--- /dev/null
+++ b/database/migrations/2026_02_03_001245_add_color_to_projects_table.php
@@ -0,0 +1,32 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        if (! Schema::hasColumn('projects', 'color')) {
+            Schema::table('projects', function (Blueprint $table) {
+                $table->string('color', 7)->nullable()->after('description');
+            });
+        }
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        if (Schema::hasColumn('projects', 'color')) {
+            Schema::table('projects', function (Blueprint $table) {
+                $table->dropColumn('color');
+            });
+        }
+    }
+};
diff --git a/resources/views/livewire/dashboard.blade.php b/resources/views/livewire/dashboard.blade.php
index a58ca0a00..c8c491ee9 100644
--- a/resources/views/livewire/dashboard.blade.php
+++ b/resources/views/livewire/dashboard.blade.php
@@ -35,7 +35,10 @@
         @if ($projects->count() > 0)
             <div class="grid grid-cols-1 gap-4 xl:grid-cols-2">
                 @foreach ($projects as $project)
-                    <div class="relative gap-2 cursor-pointer coolbox group">
+                    <div @class([
+                        'relative gap-2 cursor-pointer coolbox group',
+                        'border-l-4' => $project->color,
+                    ]) @if($project->color) style="border-left-color: {{ $project->color }}" @endif>
                         <a href="{{ $project->navigateTo() }}" {{ wireNavigate() }} class="absolute inset-0"></a>
                         <div class="flex flex-1 mx-6">
                             <div class="flex flex-col justify-center flex-1">
diff --git a/resources/views/livewire/project/edit.blade.php b/resources/views/livewire/project/edit.blade.php
index dfaf20ed9..9375e9765 100644
--- a/resources/views/livewire/project/edit.blade.php
+++ b/resources/views/livewire/project/edit.blade.php
@@ -14,6 +14,41 @@
             <div class="flex gap-2">
                 <x-forms.input label="Name" id="name" />
                 <x-forms.input label="Description" id="description" />
+                <div class="flex flex-col gap-1">
+                    <label class="flex items-center gap-1 text-sm font-medium">
+                        Color
+                        <x-helper helper="Choose a color to visually distinguish this project" />
+                    </label>
+                    <div class="flex items-center gap-2" x-data="{ showPicker: false }">
+                        <input
+                            type="color"
+                            wire:model="color"
+                            id="colorPicker"
+                            class="sr-only"
+                            x-show="showPicker"
+                            @change="showPicker = false">
+                        <button
+                            type="button"
+                            @click="showPicker = true; $nextTick(() => document.getElementById('colorPicker').click())"
+                            class="flex items-center justify-center w-20 h-8 text-xs font-medium border rounded cursor-pointer border-coolgray-300 dark:border-coolgray-500 hover:border-coolgray-400 dark:hover:border-coolgray-400"
+                            :style="$wire.color ? 'background-color: ' + $wire.color : ''">
+                            <span :class="$wire.color ? 'text-white mix-blend-difference' : 'dark:text-white'">
+                                Select
+                            </span>
+                        </button>
+                        @if($color)
+                            <button
+                                type="button"
+                                wire:click="$set('color', null)"
+                                class="flex items-center justify-center size-8 text-white rounded hover:bg-coolgray-400 dark:hover:bg-coolgray-300"
+                                title="Clear color">
+                                <svg class="size-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+                                </svg>
+                            </button>
+                        @endif
+                    </div>
+                </div>
             </div>
         </form>
 </div>
\ No newline at end of file
diff --git a/resources/views/livewire/project/index.blade.php b/resources/views/livewire/project/index.blade.php
index b9ee20326..b3496d175 100644
--- a/resources/views/livewire/project/index.blade.php
+++ b/resources/views/livewire/project/index.blade.php
@@ -13,7 +13,10 @@
     <div class="subtitle">All your projects are here.</div>
     <div class="grid grid-cols-1 gap-4 xl:grid-cols-2 -mt-1">
         @foreach ($projects as $project)
-            <div class="relative gap-2 cursor-pointer coolbox group">
+            <div @class([
+                'relative gap-2 cursor-pointer coolbox group',
+                'border-l-4' => $project->color,
+            ]) @if($project->color) style="border-left-color: {{ $project->color }}" @endif>
                 <a href="{{ $project->navigateTo() }}" {{ wireNavigate() }} class="absolute inset-0"></a>
                 <div class="flex flex-1 mx-6">
                     <div class="flex flex-col justify-center flex-1">