Merge 296b70445f into e436eeef91

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;
         }
     }
 

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');
+            });
+        }
+    }
+};

resources/js/app.js

@@ -1,4 +1,8 @@
 import { initializeTerminalComponent } from './terminal.js';
+import { initializeColorUtils } from './color-utils.js';
+
+// Initialize color utilities globally
+initializeColorUtils();
 
 ['livewire:navigated', 'alpine:init'].forEach((event) => {
     document.addEventListener(event, () => {

resources/js/color-utils.js

@@ -0,0 +1,30 @@
+/**
+ * Color utility functions for the application
+ */
+export function initializeColorUtils() {
+    /**
+     * Determines the appropriate text color (black or white) based on background color luminance
+     * Uses WCAG relative luminance formula for accessibility
+     *
+     * @param {string} bgColor - Hex color code (e.g., '#FF5733')
+     * @returns {string} Tailwind CSS class: 'text-black' or 'text-white'
+     */
+    function getContrastTextColor(bgColor) {
+        if (!bgColor) return '';
+
+        // Convert hex to RGB
+        const hex = bgColor.replace('#', '');
+        const r = parseInt(hex.substr(0, 2), 16);
+        const g = parseInt(hex.substr(2, 2), 16);
+        const b = parseInt(hex.substr(4, 2), 16);
+
+        // Calculate relative luminance using WCAG formula
+        const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+
+        // Return dark text for light backgrounds, light text for dark backgrounds
+        return luminance > 0.5 ? 'text-black' : 'text-white';
+    }
+
+    // Make it globally available
+    window.getContrastTextColor = getContrastTextColor;
+}

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">

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 ? getContrastTextColor($wire.color) : '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>

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">

tests/Unit/Livewire/Project/ProjectColorValidationTest.php

@@ -0,0 +1,145 @@
+<?php
+
+use App\Livewire\Project\Edit;
+use App\Models\Project;
+
+it('accepts valid hex color codes', function () {
+    $component = Mockery::mock(Edit::class)->makePartial();
+    $component->color = '#FF5733';
+    $component->name = 'Test Project';
+    $component->description = 'Test Description';
+
+    $rules = $component->rules();
+
+    expect($rules)->toHaveKey('color')
+        ->and($rules['color'])->toContain('nullable')
+        ->and($rules['color'])->toContain('string');
+});
+
+it('accepts null color value', function () {
+    $component = Mockery::mock(Edit::class)->makePartial();
+    $component->color = null;
+    $component->name = 'Test Project';
+    $component->description = 'Test Description';
+
+    $rules = $component->rules();
+
+    expect($rules['color'])->toContain('nullable');
+});
+
+it('color validation rules include regex pattern', function () {
+    $component = Mockery::mock(Edit::class)->makePartial();
+
+    $rules = $component->rules();
+
+    expect($rules)
+        ->toHaveKey('color')
+        ->and($rules['color'])
+        ->toBeArray()
+        ->and(count($rules['color']))->toBe(3)
+        ->and($rules['color'][0])->toBe('nullable')
+        ->and($rules['color'][1])->toBe('string')
+        ->and($rules['color'][2])->toBeString()
+        ->and($rules['color'][2])->toContain('regex:/^#[0-9A-Fa-f]{6}$/');
+});
+
+it('has custom validation message for invalid color format', function () {
+    $component = Mockery::mock(Edit::class)->makePartial();
+
+    $messages = $component->messages();
+
+    expect($messages)
+        ->toHaveKey('color.regex')
+        ->and($messages['color.regex'])
+        ->toBeString()
+        ->toContain('#FF5733');
+});
+
+it('syncs color from model to component', function () {
+    $project = Mockery::mock(Project::class)->makePartial();
+    $project->shouldReceive('getAttribute')
+        ->with('name')
+        ->andReturn('Test Project');
+    $project->shouldReceive('getAttribute')
+        ->with('description')
+        ->andReturn('Test Description');
+    $project->shouldReceive('getAttribute')
+        ->with('color')
+        ->andReturn('#FF5733');
+
+    $project->name = 'Test Project';
+    $project->description = 'Test Description';
+    $project->color = '#FF5733';
+
+    $component = Mockery::mock(Edit::class)->makePartial();
+    $component->project = $project;
+
+    $component->syncData(false);
+
+    expect($component->color)->toBe('#FF5733');
+});
+
+it('syncs null color from model to component', function () {
+    $project = Mockery::mock(Project::class)->makePartial();
+    $project->shouldReceive('getAttribute')
+        ->with('name')
+        ->andReturn('Test Project');
+    $project->shouldReceive('getAttribute')
+        ->with('description')
+        ->andReturn('Test Description');
+    $project->shouldReceive('getAttribute')
+        ->with('color')
+        ->andReturn(null);
+
+    $project->name = 'Test Project';
+    $project->description = 'Test Description';
+    $project->color = null;
+
+    $component = Mockery::mock(Edit::class)->makePartial();
+    $component->project = $project;
+
+    $component->syncData(false);
+
+    expect($component->color)->toBeNull();
+});
+
+it('syncs color from component to model', function () {
+    $project = Mockery::mock(Project::class);
+    $project->shouldReceive('update')
+        ->once()
+        ->with(Mockery::on(function ($data) {
+            return $data['color'] === '#00FF00'
+                && $data['name'] === 'Test Project'
+                && $data['description'] === 'Test Description';
+        }));
+
+    $component = Mockery::mock(Edit::class)->makePartial();
+    $component->project = $project;
+    $component->name = 'Test Project';
+    $component->description = 'Test Description';
+    $component->color = '#00FF00';
+
+    $component->shouldReceive('validate')->once();
+
+    $component->syncData(true);
+});
+
+it('syncs null color from component to model', function () {
+    $project = Mockery::mock(Project::class);
+    $project->shouldReceive('update')
+        ->once()
+        ->with(Mockery::on(function ($data) {
+            return $data['color'] === null
+                && array_key_exists('color', $data);
+        }));
+
+    $component = Mockery::mock(Edit::class)->makePartial();
+    $component->project = $project;
+    $component->name = 'Test Project';
+    $component->description = 'Test Description';
+    $component->color = null;
+
+    $component->shouldReceive('validate')->once();
+
+    $component->syncData(true);
+});

tests/Unit/ProjectColorHexValidationTest.php

@@ -0,0 +1,111 @@
+<?php
+
+test('hex color regex accepts valid 6-character hex codes', function () {
+    $validColors = [
+        '#000000', // black
+        '#FFFFFF', // white
+        '#FF0000', // red
+        '#00FF00', // green
+        '#0000FF', // blue
+        '#FF5733', // orange
+        '#abcdef', // lowercase
+        '#ABCDEF', // uppercase
+        '#123456', // numbers only
+        '#a1B2c3', // mixed case
+    ];
+
+    $pattern = '/^#[0-9A-Fa-f]{6}$/';
+
+    foreach ($validColors as $color) {
+        expect(preg_match($pattern, $color))->toBe(1);
+    }
+});
+
+test('hex color regex rejects invalid hex codes', function () {
+    $invalidColors = [
+        '#FFF',          // too short (3 chars)
+        '#FFFFFFF',      // too long (7 chars)
+        'FF5733',        // missing hash
+        '#GG5733',       // invalid character G
+        '#FF57ZZ',       // invalid characters Z
+        '#12 34 56',     // spaces
+        '#12-34-56',     // dashes
+        'rgb(255,0,0)',  // not hex format
+        '#',             // just hash
+        '',              // empty string
+        '#FF57',         // too short (4 chars)
+        '#FF5',          // too short (3 chars)
+    ];
+
+    $pattern = '/^#[0-9A-Fa-f]{6}$/';
+
+    foreach ($invalidColors as $color) {
+        expect(preg_match($pattern, $color))->toBe(0);
+    }
+});
+
+test('hex color regex pattern is correctly formatted', function () {
+    $pattern = '/^#[0-9A-Fa-f]{6}$/';
+
+    // Verify the pattern itself is valid
+    expect(@preg_match($pattern, ''))->not->toBeFalse();
+});
+
+test('hex color regex accepts common colors', function () {
+    $commonColors = [
+        '#FF0000', // Red
+        '#00FF00', // Green (Lime)
+        '#0000FF', // Blue
+        '#FFFF00', // Yellow
+        '#FF00FF', // Magenta
+        '#00FFFF', // Cyan
+        '#000000', // Black
+        '#FFFFFF', // White
+        '#808080', // Gray
+        '#FFA500', // Orange
+        '#800080', // Purple
+        '#008000', // Dark Green
+        '#FFC0CB', // Pink
+        '#A52A2A', // Brown
+    ];
+
+    $pattern = '/^#[0-9A-Fa-f]{6}$/';
+
+    foreach ($commonColors as $color) {
+        expect(preg_match($pattern, $color))->toBe(1);
+    }
+});
+
+test('hex color regex rejects 3-char shorthand hex codes', function () {
+    // HTML supports 3-char hex (#FFF), but we require 6-char format
+    $shorthandColors = [
+        '#FFF', // white shorthand
+        '#000', // black shorthand
+        '#F00', // red shorthand
+        '#0F0', // green shorthand
+        '#00F', // blue shorthand
+    ];
+
+    $pattern = '/^#[0-9A-Fa-f]{6}$/';
+
+    foreach ($shorthandColors as $color) {
+        expect(preg_match($pattern, $color))->toBe(0);
+    }
+});
+
+test('hex color regex rejects color names', function () {
+    $colorNames = [
+        'red',
+        'blue',
+        'green',
+        'black',
+        'white',
+        'transparent',
+    ];
+
+    $pattern = '/^#[0-9A-Fa-f]{6}$/';
+
+    foreach ($colorNames as $color) {
+        expect(preg_match($pattern, $color))->toBe(0);
+    }
+});