add functional version gating to tab-bar and colors forms

Author: xcutiboo

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

@@ -2,6 +2,7 @@ import { Component, computed, effect, inject } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { ConfigStoreService } from '../../../services/config-store.service';
+import { KittyVersionService } from '../../../services/kitty-version.service';
 import { ColorThemesService } from '../../../services/color-themes.service';
 import { KittyColorConfig } from '../../../models/kitty-types';
 import { VersionBadgeComponent } from '../../version-badge/version-badge.component';
@@ -152,7 +153,7 @@ import { VersionBadgeComponent } from '../../version-badge/version-badge.compone
             </div>
           </div>
 
-          <div class="border-t border-kitty-border pt-6">
+          <div class="border-t border-kitty-border pt-6" [class.opacity-60]="!transparentBgColorsAvailable()">
             <div class="flex items-center gap-2 mb-1">
               <h3 class="text-lg font-semibold text-kitty-text">Transparent Background Colors</h3>
               <app-version-badge option="transparent_background_colors" />
@@ -165,6 +166,7 @@ import { VersionBadgeComponent } from '../../version-badge/version-badge.compone
                 rows="3"
                 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 resize-y"
                 placeholder="#ff0000@0.5&#10;red@0.3&#10;background@0.8"
+                [disabled]="!transparentBgColorsAvailable()"
               ></textarea>
             </div>
           </div>
@@ -237,9 +239,11 @@ import { VersionBadgeComponent } from '../../version-badge/version-badge.compone
 })
 export class ColorsFormComponent {
   private readonly configStore = inject(ConfigStoreService);
+  private readonly versionService = inject(KittyVersionService);
   readonly colorThemesService = inject(ColorThemesService);
 
   readonly advancedMode = computed(() => this.configStore.advancedMode());
+  readonly transparentBgColorsAvailable = computed(() => this.versionService.isOptionAvailable('transparent_background_colors'));
   colors: KittyColorConfig = { ...this.configStore.configState().colors };
   readonly colorIndices = Array.from({ length: 16 }, (_, i) => i);
   readonly colorNames = ['black', 'red', 'green', 'yellow', 'blue', 'magenta', 'cyan', 'white',

src/components/forms/tab-bar-form/tab-bar-form.component.ts

@@ -2,6 +2,7 @@ import { Component, computed, effect, inject } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { ConfigStoreService } from '../../../services/config-store.service';
+import { KittyVersionService } from '../../../services/kitty-version.service';
 import { KittyTabBarConfig, KittyTabBarEdge } from '../../../models/kitty-types';
 import { NumberInputComponent } from '../../shared/number-input/number-input.component';
 import { VersionBadgeComponent } from '../../version-badge/version-badge.component';
@@ -208,7 +209,7 @@ import { VersionBadgeComponent } from '../../version-badge/version-badge.compone
               />
             </div>
 
-            <div class="form-group">
+            <div class="form-group" [class.opacity-60]="!tabTitleMaxLengthAvailable()">
               <label class="block text-sm font-medium text-kitty-text mb-2">
                 Tab Title Max Length
                 <app-version-badge option="tab_title_max_length" />
@@ -220,6 +221,7 @@ import { VersionBadgeComponent } from '../../version-badge/version-badge.compone
                 [min]="0"
                 [max]="100"
                 [step]="1"
+                [disabled]="!tabTitleMaxLengthAvailable()"
               />
             </div>
           </div>
@@ -385,8 +387,10 @@ import { VersionBadgeComponent } from '../../version-badge/version-badge.compone
 })
 export class TabBarFormComponent {
   private readonly configStore = inject(ConfigStoreService);
+  private readonly versionService = inject(KittyVersionService);
 
   readonly advancedMode = computed(() => this.configStore.advancedMode());
+  readonly tabTitleMaxLengthAvailable = computed(() => this.versionService.isOptionAvailable('tab_title_max_length'));
   tabBar: KittyTabBarConfig = { ...this.configStore.configState().tab_bar };
 
   readonly tabBarEdges: KittyTabBarEdge[] = ['top', 'bottom'];