refactor bell-form to use form helper utility

Author: xcutiboo

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

@@ -1,13 +1,14 @@
-import { Component, computed, effect, inject } from '@angular/core';
+import { Component, computed } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
-import { ConfigStoreService } from '../../../services/config-store.service';
 import { KittyBellConfig } 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-bell-form',
-  imports: [CommonModule, FormsModule, NumberInputComponent],
+  imports: [CommonModule, FormsModule, NumberInputComponent, ColorInputComponent],
   template: `
     <div class="space-y-6">
       <div>
@@ -21,8 +22,8 @@ import { NumberInputComponent } from '../../shared/number-input/number-input.com
             <label class="flex items-center gap-3 cursor-pointer">
               <input
                 type="checkbox"
-                [(ngModel)]="bell.enable_audio_bell"
-                (ngModelChange)="updateBell()"
+                [(ngModel)]="bell().enable_audio_bell"
+                (ngModelChange)="helper.updateField('enable_audio_bell', $event)"
                 class="w-5 h-5 rounded flex-shrink-0"
               />
               <div>
@@ -36,8 +37,8 @@ import { NumberInputComponent } from '../../shared/number-input/number-input.com
             <label class="flex items-center gap-3 cursor-pointer">
               <input
                 type="checkbox"
-                [(ngModel)]="bell.window_alert_on_bell"
-                (ngModelChange)="updateBell()"
+                [(ngModel)]="bell().window_alert_on_bell"
+                (ngModelChange)="helper.updateField('window_alert_on_bell', $event)"
                 class="w-5 h-5 rounded flex-shrink-0"
               />
               <div>
@@ -52,12 +53,12 @@ import { NumberInputComponent } from '../../shared/number-input/number-input.com
           <div class="form-group">
             <label class="block text-sm font-medium text-kitty-text mb-2">
               Visual Bell Duration
-              <span class="text-kitty-accent font-bold ml-2">{{ bell.visual_bell_duration }}s</span>
+              <span class="text-kitty-accent font-bold ml-2">{{ bell().visual_bell_duration }}s</span>
               <span class="text-kitty-text-dim text-xs ml-1">(0 = disabled)</span>
             </label>
             <app-number-input
-              [(ngModel)]="bell.visual_bell_duration"
-              (ngModelChange)="updateBell()"
+              [(ngModel)]="bell().visual_bell_duration"
+              (ngModelChange)="helper.updateField('visual_bell_duration', $event)"
               [min]="0"
               [step]="0.05"
             />
@@ -70,16 +71,16 @@ import { NumberInputComponent } from '../../shared/number-input/number-input.com
             </label>
             <input
               type="text"
-              [(ngModel)]="bell.bell_on_tab"
-              (ngModelChange)="updateBell()"
+              [(ngModel)]="bell().bell_on_tab"
+              (ngModelChange)="helper.updateField('bell_on_tab', $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"
-              placeholder="🔔 "
+              placeholder=" "
             />
           </div>
         </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">Bell Commands & Sounds</h3>
           <p class="text-kitty-text-dim text-sm mb-4">Execute a program or play a custom sound file when the bell fires</p>
@@ -91,19 +92,9 @@ import { NumberInputComponent } from '../../shared/number-input/number-input.com
                 <span class="text-kitty-text-dim text-xs ml-2">'none' uses current background</span>
               </label>
               <div class="flex gap-2 items-center">
-                <input
-                  type="color"
-                  [value]="visualBellColorForPicker"
-                  (change)="setVisualBellColor($event)"
-                  class="w-12 h-10 rounded-lg cursor-pointer bg-kitty-bg border border-kitty-border flex-shrink-0"
-                />
-                <input
-                  type="text"
-                  [(ngModel)]="bell.visual_bell_color"
-                  (ngModelChange)="updateBell()"
-                  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"
-                  placeholder="none or #ff0000"
-                />
+                <app-color-input 
+                  [value]="visualBellColorForPicker()" 
+                  (valueChange)="helper.updateField('visual_bell_color', $event)" />
               </div>
             </div>
 
@@ -114,8 +105,8 @@ import { NumberInputComponent } from '../../shared/number-input/number-input.com
               </label>
               <input
                 type="text"
-                [(ngModel)]="bell.command_on_bell"
-                (ngModelChange)="updateBell()"
+                [(ngModel)]="bell().command_on_bell"
+                (ngModelChange)="helper.updateField('command_on_bell', $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"
               />
@@ -128,8 +119,8 @@ import { NumberInputComponent } from '../../shared/number-input/number-input.com
               </label>
               <input
                 type="text"
-                [(ngModel)]="bell.bell_path"
-                (ngModelChange)="updateBell()"
+                [(ngModel)]="bell().bell_path"
+                (ngModelChange)="helper.updateField('bell_path', $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/bell.wav"
               />
@@ -142,8 +133,8 @@ import { NumberInputComponent } from '../../shared/number-input/number-input.com
               </label>
               <input
                 type="text"
-                [(ngModel)]="bell.linux_bell_theme"
-                (ngModelChange)="updateBell()"
+                [(ngModel)]="bell().linux_bell_theme"
+                (ngModelChange)="helper.updateField('linux_bell_theme', $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="__custom or freedesktop"
               />
@@ -156,27 +147,10 @@ import { NumberInputComponent } from '../../shared/number-input/number-input.com
   styles: []
 })
 export class BellFormComponent {
-  private readonly configStore = inject(ConfigStoreService);
+  readonly helper = createFormHelper('bell');
+  readonly bell = this.helper.state.asReadonly();
 
-  readonly advancedMode = computed(() => this.configStore.advancedMode());
-  bell: KittyBellConfig = { ...this.configStore.configState().bell };
-
-  get visualBellColorForPicker(): string {
-    return this.bell.visual_bell_color.startsWith('#') ? this.bell.visual_bell_color : '#ff0000';
-  }
-
-  constructor() {
-    effect(() => {
-      this.bell = { ...this.configStore.configState().bell };
-    });
-  }
-
-  setVisualBellColor(event: Event): void {
-    this.bell = { ...this.bell, visual_bell_color: (event.target as HTMLInputElement).value };
-    this.updateBell();
-  }
-
-  updateBell(): void {
-    this.configStore.updateSection('bell', { ...this.bell });
+  visualBellColorForPicker(): string {
+    return this.bell().visual_bell_color?.startsWith('#') ? this.bell().visual_bell_color : '#ff0000';
   }
 }

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

@@ -119,8 +119,8 @@ import { createFormHelper } from '../../../utils/form-helpers';
               </label>
               <input
                 type="text"
-                [(ngModel)]="mouse.open_url_with"
-                (ngModelChange)="updateMouse()"
+                [(ngModel)]="mouse().open_url_with"
+                (ngModelChange)="helper.updateField('open_url_with', $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="default"
               />
@@ -146,8 +146,8 @@ import { createFormHelper } from '../../../utils/form-helpers';
               <label class="flex items-center gap-3 cursor-pointer">
                 <input
                   type="checkbox"
-                  [(ngModel)]="mouse.show_hyperlink_targets"
-                  (ngModelChange)="updateMouse()"
+                  [(ngModel)]="mouse().show_hyperlink_targets"
+                  (ngModelChange)="helper.updateField('show_hyperlink_targets', $event)"
                   class="w-5 h-5 rounded flex-shrink-0"
                 />
                 <div>
@@ -163,8 +163,8 @@ import { createFormHelper } from '../../../utils/form-helpers';
                 <span class="text-kitty-text-dim text-xs ml-2">When to underline OSC 8 hyperlinks</span>
               </label>
               <select
-                [(ngModel)]="mouse.underline_hyperlinks"
-                (ngModelChange)="updateMouse()"
+                [(ngModel)]="mouse().underline_hyperlinks"
+                (ngModelChange)="helper.updateField('underline_hyperlinks', $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="always">Always</option>
@@ -217,8 +217,8 @@ import { createFormHelper } from '../../../utils/form-helpers';
               </label>
               <input
                 type="text"
-                [(ngModel)]="mouse.select_by_word_characters_forward"
-                (ngModelChange)="updateMouse()"
+                [(ngModel)]="mouse().select_by_word_characters_forward"
+                (ngModelChange)="helper.updateField('select_by_word_characters_forward', $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=""
               />
@@ -227,8 +227,8 @@ import { createFormHelper } from '../../../utils/form-helpers';
             <div class="form-group">
               <label class="block text-sm font-medium text-kitty-text mb-2">Pointer Shape When Grabbed</label>
               <select
-                [(ngModel)]="mouse.pointer_shape_when_grabbed"
-                (ngModelChange)="updateMouse()"
+                [(ngModel)]="mouse().pointer_shape_when_grabbed"
+                (ngModelChange)="helper.updateField('pointer_shape_when_grabbed', $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="arrow">arrow</option>
@@ -242,8 +242,8 @@ import { createFormHelper } from '../../../utils/form-helpers';
             <div class="form-group">
               <label class="block text-sm font-medium text-kitty-text mb-2">Default Pointer Shape</label>
               <select
-                [(ngModel)]="mouse.default_pointer_shape"
-                (ngModelChange)="updateMouse()"
+                [(ngModel)]="mouse().default_pointer_shape"
+                (ngModelChange)="helper.updateField('default_pointer_shape', $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="arrow">arrow</option>
@@ -255,8 +255,8 @@ import { createFormHelper } from '../../../utils/form-helpers';
             <div class="form-group">
               <label class="block text-sm font-medium text-kitty-text mb-2">Pointer Shape When Dragging</label>
               <select
-                [(ngModel)]="mouse.pointer_shape_when_dragging"
-                (ngModelChange)="updateMouse()"
+                [(ngModel)]="mouse().pointer_shape_when_dragging"
+                (ngModelChange)="helper.updateField('pointer_shape_when_dragging', $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="arrow">arrow</option>
@@ -295,8 +295,8 @@ import { createFormHelper } from '../../../utils/form-helpers';
               </label>
               <input
                 type="text"
-                [(ngModel)]="mouse.select_by_word_characters"
-                (ngModelChange)="updateMouse()"
+                [(ngModel)]="mouse().select_by_word_characters"
+                (ngModelChange)="helper.updateField('select_by_word_characters', $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="@-./_~?&=%+#"
               />