refactor mouse-form color input to use ColorInputComponent

Author: xcutiboo

src/components/forms/mouse-form/mouse-form.component.ts

@@ -4,10 +4,11 @@ import { FormsModule } from '@angular/forms';
 import { ConfigStoreService } from '../../../services/config-store.service';
 import { KittyMouseConfig } from '../../../models/kitty-types';
 import { NumberInputComponent } from '../../shared/number-input/number-input.component';
+import { ColorInputComponent } from '../../shared/color-input/color-input.component';
 
 @Component({
   selector: 'app-mouse-form',
-  imports: [CommonModule, FormsModule, NumberInputComponent],
+  imports: [CommonModule, FormsModule, NumberInputComponent, ColorInputComponent],
   template: `
     <div class="space-y-6">
       <div>
@@ -88,12 +89,9 @@ import { NumberInputComponent } from '../../shared/number-input/number-input.com
           <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
             <div class="form-group">
               <label class="block text-sm font-medium text-kitty-text mb-2">URL Color</label>
-              <div class="flex gap-2">
-                <input type="color" [(ngModel)]="mouse.url_color" (ngModelChange)="updateMouse()"
-                  class="w-12 h-10 rounded-lg cursor-pointer bg-kitty-bg border border-kitty-border flex-shrink-0" />
-                <input type="text" [(ngModel)]="mouse.url_color" (ngModelChange)="updateMouse()"
-                  class="flex-1 px-4 py-2 bg-kitty-bg border border-kitty-border rounded-lg text-kitty-text focus:outline-none focus:ring-2 focus:ring-kitty-primary font-mono text-sm" />
-              </div>
+              <app-color-input 
+                [value]="mouse.url_color || '#0087bd'" 
+                (valueChange)="updateColorMouse('url_color', $event)" />
             </div>
 
             <div class="form-group">
@@ -366,4 +364,9 @@ export class MouseFormComponent {
     this.mouse = { ...this.mouse, paste_actions: value.split(',').map(s => s.trim()).filter(Boolean) };
     this.updateMouse();
   }
+
+  updateColorMouse(key: keyof KittyMouseConfig, value: string): void {
+    this.mouse = { ...this.mouse, [key]: value };
+    this.updateMouse();
+  }
 }