refactor more form components - cursor-form and os-specific-form

Author: xcutiboo

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

@@ -6,20 +6,15 @@ import { NumberInputComponent } from '../../shared/number-input/number-input.com
 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 { FormSectionComponent } from '../../shared/form-section/form-section.component';
 import { createFormHelper } from '../../../utils/form-helpers';
 import { KittyVersionService } from '../../../services/kitty-version.service';
 
 @Component({
   selector: 'app-cursor-form',
-  imports: [CommonModule, FormsModule, NumberInputComponent, VersionBadgeComponent, ColorInputComponent, SliderInputComponent],
+  imports: [CommonModule, FormsModule, NumberInputComponent, VersionBadgeComponent, ColorInputComponent, SliderInputComponent, FormSectionComponent],
   template: `
-    <div class="space-y-6">
-      <div>
-        <h2 class="text-2xl font-bold text-kitty-primary mb-2">Cursor</h2>
-        <p class="text-kitty-text-dim">Customize cursor shape, color, and animation</p>
-      </div>
-
-      <div class="space-y-6 bg-kitty-surface rounded-lg p-6 border border-kitty-border">
+    <app-form-section title="Cursor" description="Customize cursor shape, color, and animation">
         <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">
@@ -222,8 +217,8 @@ import { KittyVersionService } from '../../../services/kitty-version.service';
             </div>
           </div>
         }
-      </div>
-    </div>
+      }
+    </app-form-section>
   `,
   styles: []
 })

src/components/forms/os-specific-form/os-specific-form.component.ts

@@ -3,19 +3,15 @@ import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { SliderInputComponent } from '../../shared/slider-input/slider-input.component';
 import { NumberInputComponent } from '../../shared/number-input/number-input.component';
+import { FormSectionComponent } from '../../shared/form-section/form-section.component';
 import { createFormHelper } from '../../../utils/form-helpers';
 
 @Component({
   selector: 'app-os-specific-form',
-  imports: [CommonModule, FormsModule, SliderInputComponent, NumberInputComponent],
+  imports: [CommonModule, FormsModule, SliderInputComponent, NumberInputComponent, FormSectionComponent],
   template: `
-    <div class="space-y-6">
-      <div>
-        <h2 class="text-2xl font-bold text-kitty-primary mb-2">OS Specific</h2>
-        <p class="text-kitty-text-dim">Platform-specific settings for macOS and Linux/Wayland</p>
-      </div>
-
-      <div class="bg-kitty-warning/10 border border-kitty-warning/30 rounded-lg p-4">
+    <app-form-section title="OS Specific" description="Platform-specific settings for macOS and Linux/Wayland">
+      <div class="bg-kitty-warning/10 border border-kitty-warning/30 rounded-lg p-4 mb-6">
         <p class="text-kitty-warning text-sm">
           Settings marked
           <span class="inline-flex items-center gap-1 bg-kitty-warning/20 text-kitty-warning px-2 py-0.5 rounded text-xs font-medium">restart required</span>
@@ -272,7 +268,7 @@ import { createFormHelper } from '../../../utils/form-helpers';
           }
         </div>
       </div>
-    </div>
+    </app-form-section>
   `,
   styles: []
 })