refactor window-layout-form with reusable components

Author: xcutiboo

src/components/forms/window-layout-form/window-layout-form.component.ts

@@ -5,11 +5,13 @@ import { ConfigStoreService } from '../../../services/config-store.service';
 import { KittyWindowLayoutConfig, KittyLayout } from '../../../models/kitty-types';
 import { NumberInputComponent } from '../../shared/number-input/number-input.component';
 import { VersionBadgeComponent } from '../../shared/version-badge/version-badge.component';
+import { SliderInputComponent } from '../../shared/slider-input/slider-input.component';
+import { ColorInputComponent } from '../../shared/color-input/color-input.component';
 import { KittyVersionService } from '../../../services/kitty-version.service';
 
 @Component({
   selector: 'app-window-layout-form',
-  imports: [CommonModule, FormsModule, NumberInputComponent, VersionBadgeComponent],
+  imports: [CommonModule, FormsModule, NumberInputComponent, VersionBadgeComponent, SliderInputComponent, ColorInputComponent],
   template: `
     <div class="space-y-6">
       <div>
@@ -110,15 +112,10 @@ import { KittyVersionService } from '../../../services/kitty-version.service';
             <span class="text-kitty-accent font-bold ml-2">{{ windowLayout.window_padding_width }}px</span>
             <span class="text-kitty-text-dim text-xs ml-1">Inside border</span>
           </label>
-          <input
-            type="range"
-            [(ngModel)]="windowLayout.window_padding_width"
-            (ngModelChange)="updateWindowLayout()"
-            min="0"
-            max="50"
-            step="1"
-            class="w-full"
-          />
+          <app-slider-input
+            [value]="windowLayout.window_padding_width"
+            (valueChange)="updateNumberWindow('window_padding_width', $event)"
+            [min]="0" [max]="50" [step]="1" />
         </div>
       </div>
 
@@ -133,15 +130,10 @@ import { KittyVersionService } from '../../../services/kitty-version.service';
                 <span class="text-kitty-accent font-bold ml-2">{{ windowLayout.window_margin_width }}px</span>
                 <span class="text-kitty-text-dim text-xs ml-1">Outside border</span>
               </label>
-              <input
-                type="range"
-                [(ngModel)]="windowLayout.window_margin_width"
-                (ngModelChange)="updateWindowLayout()"
-                min="0"
-                max="50"
-                step="1"
-                class="w-full"
-              />
+              <app-slider-input
+                [value]="windowLayout.window_margin_width"
+                (valueChange)="updateNumberWindow('window_margin_width', $event)"
+                [min]="0" [max]="50" [step]="1" />
             </div>
 
             <div class="form-group">
@@ -150,15 +142,10 @@ import { KittyVersionService } from '../../../services/kitty-version.service';
                 <span class="text-kitty-accent font-bold ml-2">{{ windowLayout.single_window_margin_width }}px</span>
                 <span class="text-kitty-text-dim text-xs ml-1">Override for single-pane mode (-1 = use above)</span>
               </label>
-              <input
-                type="range"
-                [(ngModel)]="windowLayout.single_window_margin_width"
-                (ngModelChange)="updateWindowLayout()"
-                min="-1"
-                max="50"
-                step="1"
-                class="w-full"
-              />
+              <app-slider-input
+                [value]="windowLayout.single_window_margin_width"
+                (valueChange)="updateNumberWindow('single_window_margin_width', $event)"
+                [min]="-1" [max]="50" [step]="1" />
             </div>
           </div>
 
@@ -169,15 +156,10 @@ import { KittyVersionService } from '../../../services/kitty-version.service';
                 <span class="text-kitty-accent font-bold ml-2">{{ windowLayout.single_window_padding_width }}px</span>
                 <span class="text-kitty-text-dim text-xs ml-1">Override for single-pane mode (-1 = use above)</span>
               </label>
-              <input
-                type="range"
-                [(ngModel)]="windowLayout.single_window_padding_width"
-                (ngModelChange)="updateWindowLayout()"
-                min="-1"
-                max="50"
-                step="1"
-                class="w-full"
-              />
+              <app-slider-input
+                [value]="windowLayout.single_window_padding_width"
+                (valueChange)="updateNumberWindow('single_window_padding_width', $event)"
+                [min]="-1" [max]="50" [step]="1" />
             </div>
 
             <div class="form-group">
@@ -245,47 +227,33 @@ import { KittyVersionService } from '../../../services/kitty-version.service';
                 <span class="text-kitty-accent font-bold ml-2">{{ (windowLayout.inactive_text_alpha * 100).toFixed(0) }}%</span>
                 <span class="text-kitty-text-dim text-xs ml-1">Opacity of text in unfocused panes</span>
               </label>
-              <input
-                type="range"
-                [(ngModel)]="windowLayout.inactive_text_alpha"
-                (ngModelChange)="updateWindowLayout()"
-                min="0"
-                max="1"
-                step="0.05"
-                class="w-full"
-              />
+              <app-slider-input
+                [value]="windowLayout.inactive_text_alpha"
+                (valueChange)="updateNumberWindow('inactive_text_alpha', $event)"
+                [min]="0" [max]="1" [step]="0.05" />
             </div>
           </div>
 
           <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-4">
             <div class="form-group">
               <label class="block text-sm font-medium text-kitty-text mb-2">Active Border Color</label>
-              <div class="flex gap-2">
-                <input type="color" [(ngModel)]="windowLayout.active_border_color" (ngModelChange)="updateWindowLayout()"
-                  class="w-12 h-10 rounded cursor-pointer bg-kitty-bg border border-kitty-border flex-shrink-0" />
-                <input type="text" [(ngModel)]="windowLayout.active_border_color" (ngModelChange)="updateWindowLayout()"
-                  class="flex-1 px-3 py-2 text-sm bg-kitty-bg border border-kitty-border rounded-lg text-kitty-text focus:outline-none focus:ring-2 focus:ring-kitty-primary font-mono" />
-              </div>
+              <app-color-input 
+                [value]="windowLayout.active_border_color || '#cccccc'" 
+                (valueChange)="updateColorWindow('active_border_color', $event)" />
             </div>
 
             <div class="form-group">
               <label class="block text-sm font-medium text-kitty-text mb-2">Inactive Border Color</label>
-              <div class="flex gap-2">
-                <input type="color" [(ngModel)]="windowLayout.inactive_border_color" (ngModelChange)="updateWindowLayout()"
-                  class="w-12 h-10 rounded cursor-pointer bg-kitty-bg border border-kitty-border flex-shrink-0" />
-                <input type="text" [(ngModel)]="windowLayout.inactive_border_color" (ngModelChange)="updateWindowLayout()"
-                  class="flex-1 px-3 py-2 text-sm bg-kitty-bg border border-kitty-border rounded-lg text-kitty-text focus:outline-none focus:ring-2 focus:ring-kitty-primary font-mono" />
-              </div>
+              <app-color-input 
+                [value]="windowLayout.inactive_border_color || '#999999'" 
+                (valueChange)="updateColorWindow('inactive_border_color', $event)" />
             </div>
 
             <div class="form-group">
               <label class="block text-sm font-medium text-kitty-text mb-2">Bell Border Color</label>
-              <div class="flex gap-2">
-                <input type="color" [(ngModel)]="windowLayout.bell_border_color" (ngModelChange)="updateWindowLayout()"
-                  class="w-12 h-10 rounded cursor-pointer bg-kitty-bg border border-kitty-border flex-shrink-0" />
-                <input type="text" [(ngModel)]="windowLayout.bell_border_color" (ngModelChange)="updateWindowLayout()"
-                  class="flex-1 px-3 py-2 text-sm bg-kitty-bg border border-kitty-border rounded-lg text-kitty-text focus:outline-none focus:ring-2 focus:ring-kitty-primary font-mono" />
-              </div>
+              <app-color-input 
+                [value]="windowLayout.bell_border_color || '#ffffff'" 
+                (valueChange)="updateColorWindow('bell_border_color', $event)" />
             </div>
           </div>
 
@@ -361,15 +329,10 @@ import { KittyVersionService } from '../../../services/kitty-version.service';
                 Logo Alpha
                 <span class="text-kitty-accent font-bold ml-2">{{ (windowLayout.window_logo_alpha * 100).toFixed(0) }}%</span>
               </label>
-              <input
-                type="range"
-                [(ngModel)]="windowLayout.window_logo_alpha"
-                (ngModelChange)="updateWindowLayout()"
-                min="0"
-                max="1"
-                step="0.05"
-                class="w-full"
-              />
+              <app-slider-input
+                [value]="windowLayout.window_logo_alpha"
+                (valueChange)="updateNumberWindow('window_logo_alpha', $event)"
+                [min]="0" [max]="1" [step]="0.05" />
             </div>
           </div>
 
@@ -545,4 +508,14 @@ export class WindowLayoutFormComponent {
   updateWindowLayout(): void {
     this.configStore.updateSection('window_layout', { ...this.windowLayout });
   }
+
+  updateNumberWindow(key: keyof KittyWindowLayoutConfig, value: number): void {
+    this.windowLayout = { ...this.windowLayout, [key]: value };
+    this.updateWindowLayout();
+  }
+
+  updateColorWindow(key: keyof KittyWindowLayoutConfig, value: string): void {
+    this.windowLayout = { ...this.windowLayout, [key]: value };
+    this.updateWindowLayout();
+  }
 }