refactor mouse-form to use form helper utility

Author: xcutiboo

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

@@ -1,10 +1,10 @@
-import { Component, computed, effect, inject } from '@angular/core';
+import { Component, computed, inject } from '@angular/core';
 import { CommonModule } from '@angular/common';
 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';
+import { createFormHelper } from '../../../utils/form-helpers';
 
 @Component({
   selector: 'app-mouse-form',
@@ -24,8 +24,8 @@ import { ColorInputComponent } from '../../shared/color-input/color-input.compon
               <span class="text-kitty-text-dim text-xs ml-2">Seconds idle before cursor hides (0 = never, -1 = hide on keypress)</span>
             </label>
             <app-number-input
-              [(ngModel)]="mouse.mouse_hide_wait"
-              (ngModelChange)="updateMouse()"
+              [(ngModel)]="mouse().mouse_hide_wait"
+              (ngModelChange)="helper.updateField('mouse_hide_wait', $event)"
               [min]="-1"
               [step]="0.5"
             />
@@ -37,8 +37,8 @@ import { ColorInputComponent } from '../../shared/color-input/color-input.compon
               <span class="text-kitty-text-dim text-xs ml-2">Auto-copy selected text to clipboard</span>
             </label>
             <select
-              [(ngModel)]="mouse.copy_on_select"
-              (ngModelChange)="updateMouse()"
+              [(ngModel)]="mouse().copy_on_select"
+              (ngModelChange)="helper.updateField('copy_on_select', $event)"
               class="w-full 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"
             >
               <option value="no">Disabled</option>
@@ -53,8 +53,8 @@ import { ColorInputComponent } from '../../shared/color-input/color-input.compon
             <label class="flex items-center gap-3 cursor-pointer">
               <input
                 type="checkbox"
-                [(ngModel)]="mouse.detect_urls"
-                (ngModelChange)="updateMouse()"
+                [(ngModel)]="mouse().detect_urls"
+                (ngModelChange)="helper.updateField('detect_urls', $event)"
                 class="w-5 h-5 rounded flex-shrink-0"
               />
               <div>
@@ -68,8 +68,8 @@ import { ColorInputComponent } from '../../shared/color-input/color-input.compon
             <label class="flex items-center gap-3 cursor-pointer">
               <input
                 type="checkbox"
-                [(ngModel)]="mouse.focus_follows_mouse"
-                (ngModelChange)="updateMouse()"
+                [(ngModel)]="mouse().focus_follows_mouse"
+                (ngModelChange)="helper.updateField('focus_follows_mouse', $event)"
                 class="w-5 h-5 rounded flex-shrink-0"
               />
               <div>
@@ -81,7 +81,7 @@ import { ColorInputComponent } from '../../shared/color-input/color-input.compon
         </div>
       </div>
 
-      @if (advancedMode()) {
+      @if (helper.advancedMode()) {
         <div class="bg-kitty-surface rounded-lg p-6 border border-kitty-border">
           <h3 class="text-lg font-semibold text-kitty-text mb-1">URL Styling</h3>
           <p class="text-kitty-text-dim text-sm mb-4">Appearance of detected URLs in the terminal</p>
@@ -90,15 +90,15 @@ import { ColorInputComponent } from '../../shared/color-input/color-input.compon
             <div class="form-group">
               <label class="block text-sm font-medium text-kitty-text mb-2">URL Color</label>
               <app-color-input 
-                [value]="mouse.url_color || '#0087bd'" 
+                [value]="mouse().url_color || '#0087bd'" 
                 (valueChange)="updateColorMouse('url_color', $event)" />
             </div>
 
             <div class="form-group">
               <label class="block text-sm font-medium text-kitty-text mb-2">URL Style</label>
               <select
-                [(ngModel)]="mouse.url_style"
-                (ngModelChange)="updateMouse()"
+                [(ngModel)]="mouse().url_style"
+                (ngModelChange)="helper.updateField('url_style', $event)"
                 class="w-full 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"
               >
                 <option value="none">None</option>
@@ -187,7 +187,7 @@ import { ColorInputComponent } from '../../shared/color-input/color-input.compon
               </label>
               <input
                 type="text"
-                [ngModel]="mouse.paste_actions.join(',')"
+                [ngModel]="mouse().paste_actions.join(',')"
                 (ngModelChange)="setPasteActions($event)"
                 class="w-full 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"
                 placeholder="quote-urls-at-prompt,confirm"
@@ -200,8 +200,8 @@ import { ColorInputComponent } from '../../shared/color-input/color-input.compon
                 <span class="text-kitty-text-dim text-xs ml-2">Max time between clicks for double/triple click (seconds)</span>
               </label>
               <app-number-input
-                [(ngModel)]="mouse.click_interval"
-                (ngModelChange)="updateMouse()"
+                [(ngModel)]="mouse().click_interval"
+                (ngModelChange)="helper.updateField('click_interval', $event)"
                 [min]="0.1"
                 [max]="1"
                 [step]="0.05"
@@ -340,33 +340,20 @@ import { ColorInputComponent } from '../../shared/color-input/color-input.compon
   styles: []
 })
 export class MouseFormComponent {
-  private readonly configStore = inject(ConfigStoreService);
-
-  readonly advancedMode = computed(() => this.configStore.advancedMode());
-  mouse: KittyMouseConfig = { ...this.configStore.configState().mouse };
-
-  constructor() {
-    effect(() => {
-      this.mouse = { ...this.configStore.configState().mouse };
-    });
-  }
-
-  updateMouse(): void {
-    this.configStore.updateSection('mouse', { ...this.mouse });
-  }
+  readonly helper = createFormHelper('mouse');
+  readonly mouse = this.helper.state.asReadonly();
 
   setUrlPrefixes(value: string): void {
-    this.mouse = { ...this.mouse, url_prefixes: value.split(',').map(s => s.trim()).filter(Boolean) };
-    this.updateMouse();
+    const prefixes = value.split(',').map(s => s.trim()).filter(Boolean);
+    this.helper.updateField('url_prefixes', prefixes);
   }
 
   setPasteActions(value: string): void {
-    this.mouse = { ...this.mouse, paste_actions: value.split(',').map(s => s.trim()).filter(Boolean) };
-    this.updateMouse();
+    const actions = value.split(',').map(s => s.trim()).filter(Boolean);
+    this.helper.updateField('paste_actions', actions);
   }
 
   updateColorMouse(key: keyof KittyMouseConfig, value: string): void {
-    this.mouse = { ...this.mouse, [key]: value };
-    this.updateMouse();
+    this.helper.updateField(key, value);
   }
 }