refactor colors-form to use form helper utility

Author: xcutiboo

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

@@ -1,12 +1,12 @@
-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 { ColorThemesService } from '../../../services/color-themes.service';
 import { KittyColorConfig } from '../../../models/kitty-types';
 import { VersionBadgeComponent } from '../../shared/version-badge/version-badge.component';
 import { ColorInputComponent } from '../../shared/color-input/color-input.component';
 import { SliderInputComponent } from '../../shared/slider-input/slider-input.component';
+import { createFormHelper } from '../../../utils/form-helpers';
 import { KittyVersionService } from '../../../services/kitty-version.service';
 
 @Component({
@@ -50,35 +50,35 @@ import { KittyVersionService } from '../../../services/kitty-version.service';
           <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">Foreground</label>
-              <app-color-input [value]="colors.foreground || '#000000'" (valueChange)="updateColor('foreground', $event)" />
+              <app-color-input [value]="colors().foreground || '#000000'" (valueChange)="helper.updateField('foreground', $event)" />
             </div>
 
             <div class="form-group">
               <label class="block text-sm font-medium text-kitty-text mb-2">Background</label>
-              <app-color-input [value]="colors.background || '#ffffff'" (valueChange)="updateColor('background', $event)" />
+              <app-color-input [value]="colors().background || '#ffffff'" (valueChange)="helper.updateField('background', $event)" />
             </div>
           </div>
 
           <div class="mt-6 form-group">
             <label class="block text-sm font-medium text-kitty-text mb-2">
               Background Opacity
-              <span class="text-kitty-accent font-bold ml-2">{{ (colors.background_opacity * 100).toFixed(0) }}%</span>
+              <span class="text-kitty-accent font-bold ml-2">{{ (colors().background_opacity * 100).toFixed(0) }}%</span>
               <span class="text-kitty-text-dim text-xs ml-2">Requires compositor support (e.g. picom, KWin)</span>
             </label>
             <app-slider-input 
-              [value]="colors.background_opacity" 
-              (valueChange)="updateNumberColor('background_opacity', $event)"
+              [value]="colors().background_opacity" 
+              (valueChange)="helper.updateField('background_opacity', $event)"
               [min]="0" [max]="1" [step]="0.05" />
           </div>
 
-          @if (advancedMode()) {
+          @if (helper.advancedMode()) {
             <div class="mt-4 form-group" [class.opacity-60]="!dynamicBackgroundOpacityAvailable()">
               <div class="flex items-center gap-2">
                 <label class="flex items-center gap-3 cursor-pointer">
                   <input
                     type="checkbox"
-                    [(ngModel)]="colors.dynamic_background_opacity"
-                    (ngModelChange)="updateColors()"
+                    [(ngModel)]="colors().dynamic_background_opacity"
+                    (ngModelChange)="helper.updateField('dynamic_background_opacity', $event)"
                     [disabled]="!dynamicBackgroundOpacityAvailable()"
                     class="w-5 h-5 rounded flex-shrink-0 disabled:opacity-50"
                   />
@@ -103,8 +103,8 @@ import { KittyVersionService } from '../../../services/kitty-version.service';
                 </label>
                 <input
                   type="text"
-                  [(ngModel)]="colors.background_image"
-                  (ngModelChange)="updateColors()"
+                  [(ngModel)]="colors().background_image"
+                  (ngModelChange)="helper.updateField('background_image', $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="none or /path/to/image.png"
                 />
@@ -114,8 +114,8 @@ import { KittyVersionService } from '../../../services/kitty-version.service';
                 <div class="form-group">
                   <label class="block text-sm font-medium text-kitty-text mb-2">Image Layout</label>
                   <select
-                    [(ngModel)]="colors.background_image_layout"
-                    (ngModelChange)="updateColors()"
+                    [(ngModel)]="colors().background_image_layout"
+                    (ngModelChange)="helper.updateField('background_image_layout', $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="tiled">tiled</option>
@@ -131,8 +131,8 @@ import { KittyVersionService } from '../../../services/kitty-version.service';
                   <label class="flex items-center gap-3 cursor-pointer mt-6">
                     <input
                       type="checkbox"
-                      [(ngModel)]="colors.background_image_linear"
-                      (ngModelChange)="updateColors()"
+                      [(ngModel)]="colors().background_image_linear"
+                      (ngModelChange)="helper.updateField('background_image_linear', $event)"
                       class="w-5 h-5 rounded flex-shrink-0"
                     />
                     <div>
@@ -150,46 +150,46 @@ import { KittyVersionService } from '../../../services/kitty-version.service';
               <div class="form-group">
                 <label class="block text-sm font-medium text-kitty-text mb-2">
                   Background Blur
-                  <span class="text-kitty-accent ml-2">{{ colors.background_blur }}px</span>
+                  <span class="text-kitty-accent ml-2">{{ colors().background_blur }}px</span>
                 </label>
                 <app-slider-input 
-                  [value]="colors.background_blur" 
-                  (valueChange)="updateNumberColor('background_blur', $event)"
+                  [value]="colors().background_blur" 
+                  (valueChange)="helper.updateField('background_blur', $event)"
                   [min]="0" [max]="64" [step]="1" />
               </div>
 
               <div class="form-group">
                 <label class="block text-sm font-medium text-kitty-text mb-2">
                   Background Tint
-                  <span class="text-kitty-accent ml-2">{{ (colors.background_tint * 100).toFixed(0) }}%</span>
+                  <span class="text-kitty-accent ml-2">{{ (colors().background_tint * 100).toFixed(0) }}%</span>
                 </label>
                 <app-slider-input 
-                  [value]="colors.background_tint" 
-                  (valueChange)="updateNumberColor('background_tint', $event)"
+                  [value]="colors().background_tint" 
+                  (valueChange)="helper.updateField('background_tint', $event)"
                   [min]="0" [max]="1" [step]="0.05" />
               </div>
 
               <div class="form-group">
                 <label class="block text-sm font-medium text-kitty-text mb-2">
                   Background Tint Gaps
-                  <span class="text-kitty-accent ml-2">{{ (colors.background_tint_gaps * 100).toFixed(0) }}%</span>
+                  <span class="text-kitty-accent ml-2">{{ (colors().background_tint_gaps * 100).toFixed(0) }}%</span>
                   <span class="text-kitty-text-dim text-xs ml-1">(padding color tinting)</span>
                 </label>
                 <app-slider-input 
-                  [value]="colors.background_tint_gaps" 
-                  (valueChange)="updateNumberColor('background_tint_gaps', $event)"
+                  [value]="colors().background_tint_gaps" 
+                  (valueChange)="helper.updateField('background_tint_gaps', $event)"
                   [min]="0" [max]="1" [step]="0.05" />
               </div>
 
               <div class="form-group">
                 <label class="block text-sm font-medium text-kitty-text mb-2">
                   Dim Opacity
-                  <span class="text-kitty-accent ml-2">{{ (colors.dim_opacity * 100).toFixed(0) }}%</span>
+                  <span class="text-kitty-accent ml-2">{{ (colors().dim_opacity * 100).toFixed(0) }}%</span>
                   <span class="text-kitty-text-dim text-xs ml-1">(inactive panes)</span>
                 </label>
                 <app-slider-input 
-                  [value]="colors.dim_opacity" 
-                  (valueChange)="updateNumberColor('dim_opacity', $event)"
+                  [value]="colors().dim_opacity" 
+                  (valueChange)="helper.updateField('dim_opacity', $event)"
                   [min]="0" [max]="1" [step]="0.05" />
               </div>
             </div>
@@ -200,12 +200,12 @@ import { KittyVersionService } from '../../../services/kitty-version.service';
             <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">Selection Foreground</label>
-                <app-color-input [value]="colors.selection_foreground || '#000000'" (valueChange)="updateColor('selection_foreground', $event)" />
+                <app-color-input [value]="colors().selection_foreground || '#000000'" (valueChange)="helper.updateField('selection_foreground', $event)" />
               </div>
 
               <div class="form-group">
                 <label class="block text-sm font-medium text-kitty-text mb-2">Selection Background</label>
-                <app-color-input [value]="colors.selection_background || '#ffffff'" (valueChange)="updateColor('selection_background', $event)" />
+                <app-color-input [value]="colors().selection_background || '#ffffff'" (valueChange)="helper.updateField('selection_background', $event)" />
               </div>
             </div>
           </div>
@@ -220,7 +220,7 @@ import { KittyVersionService } from '../../../services/kitty-version.service';
             <p class="text-kitty-text-dim text-sm mb-4">Set per-color transparency. Format: color@opacity (e.g., red@0.5, #ff0000@0.3)</p>
             <div class="form-group">
               <textarea
-                [ngModel]="colors.transparent_background_colors.join('\n')"
+                [ngModel]="colors().transparent_background_colors.join('\n')"
                 (ngModelChange)="setTransparentColors($event)"
                 [disabled]="!transparentBackgroundColorsAvailable()"
                 rows="3"
@@ -283,74 +283,53 @@ import { KittyVersionService } from '../../../services/kitty-version.service';
   styles: []
 })
 export class ColorsFormComponent {
-  private readonly configStore = inject(ConfigStoreService);
   private readonly versionService = inject(KittyVersionService);
   readonly colorThemesService = inject(ColorThemesService);
 
-  readonly advancedMode = computed(() => this.configStore.advancedMode());
+  readonly helper = createFormHelper('colors');
+  readonly colors = this.helper.state.asReadonly();
   readonly transparentBackgroundColorsAvailable = computed(() => this.versionService.isOptionAvailable('transparent_background_colors'));
   readonly dynamicBackgroundOpacityAvailable = computed(() => this.versionService.isOptionAvailable('dynamic_background_opacity'));
-  colors: KittyColorConfig = { ...this.configStore.configState().colors };
   readonly colorIndices = Array.from({ length: 16 }, (_, i) => i);
   readonly colorNames = ['black', 'red', 'green', 'yellow', 'blue', 'magenta', 'cyan', 'white',
                 'br.black', 'br.red', 'br.green', 'br.yellow', 'br.blue', 'br.magenta', 'br.cyan', 'br.white'];
 
-  constructor() {
-    effect(() => {
-      this.colors = { ...this.configStore.configState().colors };
-    });
-  }
-
   applyTheme(themeName: string): void {
     const theme = this.colorThemesService.getTheme(themeName);
     if (theme) {
-      this.colors = { ...this.colors, ...theme.colors };
-      this.updateColors();
+      const updatedColors = { ...this.colors(), ...theme.colors };
+      this.helper.state.set(updatedColors);
+      this.helper.update();
     }
   }
 
-  updateColors(): void {
-    this.configStore.updateSection('colors', { ...this.colors });
-  }
-
-  updateColor(key: keyof KittyColorConfig, value: string): void {
-    this.colors = { ...this.colors, [key]: value };
-    this.updateColors();
-  }
-
-  updateNumberColor(key: keyof KittyColorConfig, value: number): void {
-    this.colors = { ...this.colors, [key]: value };
-    this.updateColors();
-  }
-
-  getThemeColor(colors: Partial<KittyColorConfig>, index: number): string {
-    const color = colors[`color${index}` as keyof KittyColorConfig];
+  getThemeColor(themeColors: Partial<KittyColorConfig>, index: number): string {
+    const color = themeColors[`color${index}` as keyof KittyColorConfig];
     return typeof color === 'string' ? color : '#000';
   }
 
   getColorValue(index: number): string {
-    return (this.colors as unknown as Record<string, unknown>)[`color${index}`] as string || '#000000';
+    return (this.colors() as unknown as Record<string, unknown>)[`color${index}`] as string || '#000000';
   }
 
   setColorValue(index: number, value: string): void {
-    (this.colors as unknown as Record<string, unknown>)[`color${index}`] = value;
-    this.updateColors();
+    const key = `color${index}` as keyof KittyColorConfig;
+    this.helper.updateField(key, value);
   }
 
   getMarkColor(group: number, type: 'foreground' | 'background'): string {
     const key = `mark${group}_${type}` as keyof KittyColorConfig;
-    const val = this.colors[key] as string;
+    const val = this.colors()[key] as string;
     return val || (type === 'foreground' ? '#000000' : '#ffffff');
   }
 
   setMarkColor(group: number, type: 'foreground' | 'background', value: string): void {
     const key = `mark${group}_${type}` as keyof KittyColorConfig;
-    (this.colors as unknown as Record<string, unknown>)[key] = value;
-    this.updateColors();
+    this.helper.updateField(key, value);
   }
 
   setTransparentColors(value: string): void {
-    this.colors = { ...this.colors, transparent_background_colors: value.split('\n').filter(l => l.trim()) };
-    this.updateColors();
+    const colors = value.split('\n').filter(l => l.trim());
+    this.helper.updateField('transparent_background_colors', colors);
   }
 }