Skip to content

Commit 3eee035

Browse files
xcutibooxcutiboo
committed
refactor os-specific-form to use form helper utility
1 parent 0527e82 commit 3eee035

1 file changed

Lines changed: 37 additions & 54 deletions

File tree

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

Lines changed: 37 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
import { Component, computed, effect, inject } from '@angular/core';
1+
import { Component } from '@angular/core';
22
import { CommonModule } from '@angular/common';
33
import { FormsModule } from '@angular/forms';
4-
import { ConfigStoreService } from '../../../services/config-store.service';
54
import { KittyOSSpecificConfig } from '../../../models/kitty-types';
65
import { VersionBadgeComponent } from '../../shared/version-badge/version-badge.component';
76
import { SliderInputComponent } from '../../shared/slider-input/slider-input.component';
87
import { NumberInputComponent } from '../../shared/number-input/number-input.component';
8+
import { createFormHelper } from '../../../utils/form-helpers';
99

1010
@Component({
1111
selector: 'app-os-specific-form',
@@ -36,8 +36,8 @@ import { NumberInputComponent } from '../../shared/number-input/number-input.com
3636
<span class="text-kitty-text-dim text-xs ml-2">Remap Option key for terminal escape sequences</span>
3737
</label>
3838
<select
39-
[(ngModel)]="osSpecific.macos_option_as_alt"
40-
(ngModelChange)="updateOsSpecific()"
39+
[(ngModel)]="osSpecific().macos_option_as_alt"
40+
(ngModelChange)="helper.updateField('macos_option_as_alt', $event)"
4141
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"
4242
>
4343
<option value="no">No (standard macOS behavior)</option>
@@ -52,8 +52,8 @@ import { NumberInputComponent } from '../../shared/number-input/number-input.com
5252
<label class="flex items-center gap-3 cursor-pointer">
5353
<input
5454
type="checkbox"
55-
[(ngModel)]="osSpecific.macos_quit_when_last_window_closed"
56-
(ngModelChange)="updateOsSpecific()"
55+
[(ngModel)]="osSpecific().macos_quit_when_last_window_closed"
56+
(ngModelChange)="helper.updateField('macos_quit_when_last_window_closed', $event)"
5757
class="w-5 h-5 rounded flex-shrink-0"
5858
/>
5959
<div>
@@ -64,7 +64,7 @@ import { NumberInputComponent } from '../../shared/number-input/number-input.com
6464
</div>
6565
</div>
6666
67-
@if (advancedMode()) {
67+
@if (helper.advancedMode()) {
6868
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
6969
<div class="form-group">
7070
<label class="block text-sm font-medium text-kitty-text mb-2">
@@ -73,8 +73,8 @@ import { NumberInputComponent } from '../../shared/number-input/number-input.com
7373
</label>
7474
<input
7575
type="text"
76-
[(ngModel)]="osSpecific.macos_titlebar_color"
77-
(ngModelChange)="updateOsSpecific()"
76+
[(ngModel)]="osSpecific().macos_titlebar_color"
77+
(ngModelChange)="helper.updateField('macos_titlebar_color', $event)"
7878
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"
7979
placeholder="system or background or #rrggbb"
8080
/>
@@ -86,8 +86,8 @@ import { NumberInputComponent } from '../../shared/number-input/number-input.com
8686
<span class="text-kitty-text-dim text-xs ml-2">Where to display the window title</span>
8787
</label>
8888
<select
89-
[(ngModel)]="osSpecific.macos_show_window_title_in"
90-
(ngModelChange)="updateOsSpecific()"
89+
[(ngModel)]="osSpecific().macos_show_window_title_in"
90+
(ngModelChange)="helper.updateField('macos_show_window_title_in', $event)"
9191
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"
9292
>
9393
<option value="all">All (titlebar and menubar)</option>
@@ -105,17 +105,17 @@ import { NumberInputComponent } from '../../shared/number-input/number-input.com
105105
<span class="text-kitty-text-dim text-xs ml-2">0 means no limit</span>
106106
</label>
107107
<app-number-input
108-
[(ngModel)]="osSpecific.macos_menubar_title_max_length"
109-
(ngModelChange)="updateOsSpecific()"
108+
[(ngModel)]="osSpecific().macos_menubar_title_max_length"
109+
(ngModelChange)="helper.updateField('macos_menubar_title_max_length', $event)"
110110
[min]="0"
111111
/>
112112
</div>
113113
114114
<div class="form-group">
115115
<label class="block text-sm font-medium text-kitty-text mb-2">Color Space</label>
116116
<select
117-
[(ngModel)]="osSpecific.macos_colorspace"
118-
(ngModelChange)="updateOsSpecific()"
117+
[(ngModel)]="osSpecific().macos_colorspace"
118+
(ngModelChange)="helper.updateField('macos_colorspace', $event)"
119119
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"
120120
>
121121
<option value="srgb">sRGB (recommended)</option>
@@ -129,21 +129,21 @@ import { NumberInputComponent } from '../../shared/number-input/number-input.com
129129
<div class="form-group">
130130
<label class="block text-sm font-medium text-kitty-text mb-2">
131131
Font Thickening
132-
<span class="text-kitty-accent font-bold ml-2">{{ osSpecific.macos_thicken_font }}</span>
132+
<span class="text-kitty-accent font-bold ml-2">{{ osSpecific().macos_thicken_font }}</span>
133133
<span class="text-kitty-text-dim text-xs ml-1">Draw extra pixel around glyphs (0 = off)</span>
134134
</label>
135135
<app-slider-input
136-
[value]="osSpecific.macos_thicken_font"
137-
(valueChange)="updateNumberOs('macos_thicken_font', $event)"
136+
[value]="osSpecific().macos_thicken_font"
137+
(valueChange)="helper.updateField('macos_thicken_font', $event)"
138138
[min]="0" [max]="2" [step]="0.05" />
139139
</div>
140140
141141
<div class="form-group">
142142
<label class="flex items-center gap-3 cursor-pointer">
143143
<input
144144
type="checkbox"
145-
[(ngModel)]="osSpecific.macos_traditional_fullscreen"
146-
(ngModelChange)="updateOsSpecific()"
145+
[(ngModel)]="osSpecific().macos_traditional_fullscreen"
146+
(ngModelChange)="helper.updateField('macos_traditional_fullscreen', $event)"
147147
class="w-5 h-5 rounded flex-shrink-0"
148148
/>
149149
<div>
@@ -159,8 +159,8 @@ import { NumberInputComponent } from '../../shared/number-input/number-input.com
159159
<label class="flex items-center gap-3 cursor-pointer">
160160
<input
161161
type="checkbox"
162-
[(ngModel)]="osSpecific.macos_window_resizable"
163-
(ngModelChange)="updateOsSpecific()"
162+
[(ngModel)]="osSpecific().macos_window_resizable"
163+
(ngModelChange)="helper.updateField('macos_window_resizable', $event)"
164164
class="w-5 h-5 rounded flex-shrink-0"
165165
/>
166166
<div>
@@ -174,8 +174,8 @@ import { NumberInputComponent } from '../../shared/number-input/number-input.com
174174
<label class="flex items-center gap-3 cursor-pointer">
175175
<input
176176
type="checkbox"
177-
[(ngModel)]="osSpecific.macos_hide_from_tasks"
178-
(ngModelChange)="updateOsSpecific()"
177+
[(ngModel)]="osSpecific().macos_hide_from_tasks"
178+
(ngModelChange)="helper.updateField('macos_hide_from_tasks', $event)"
179179
class="w-5 h-5 rounded flex-shrink-0"
180180
/>
181181
<div>
@@ -189,8 +189,8 @@ import { NumberInputComponent } from '../../shared/number-input/number-input.com
189189
<label class="flex items-center gap-3 cursor-pointer">
190190
<input
191191
type="checkbox"
192-
[(ngModel)]="osSpecific.macos_dock_badge_on_bell"
193-
(ngModelChange)="updateOsSpecific()"
192+
[(ngModel)]="osSpecific().macos_dock_badge_on_bell"
193+
(ngModelChange)="helper.updateField('macos_dock_badge_on_bell', $event)"
194194
class="w-5 h-5 rounded flex-shrink-0"
195195
/>
196196
<div>
@@ -204,8 +204,8 @@ import { NumberInputComponent } from '../../shared/number-input/number-input.com
204204
<label class="flex items-center gap-3 cursor-pointer">
205205
<input
206206
type="checkbox"
207-
[(ngModel)]="osSpecific.macos_custom_beam_cursor"
208-
(ngModelChange)="updateOsSpecific()"
207+
[(ngModel)]="osSpecific().macos_custom_beam_cursor"
208+
(ngModelChange)="helper.updateField('macos_custom_beam_cursor', $event)"
209209
class="w-5 h-5 rounded flex-shrink-0"
210210
/>
211211
<div>
@@ -227,8 +227,8 @@ import { NumberInputComponent } from '../../shared/number-input/number-input.com
227227
<label class="flex items-center gap-3 cursor-pointer">
228228
<input
229229
type="checkbox"
230-
[(ngModel)]="osSpecific.wayland_enable_ime"
231-
(ngModelChange)="updateOsSpecific()"
230+
[(ngModel)]="osSpecific().wayland_enable_ime"
231+
(ngModelChange)="helper.updateField('wayland_enable_ime', $event)"
232232
class="w-5 h-5 rounded flex-shrink-0"
233233
/>
234234
<div class="flex-1">
@@ -247,8 +247,8 @@ import { NumberInputComponent } from '../../shared/number-input/number-input.com
247247
<span class="text-kitty-text-dim text-xs ml-2">'auto', 'x11', or 'wayland'</span>
248248
</label>
249249
<select
250-
[(ngModel)]="osSpecific.linux_display_server"
251-
(ngModelChange)="updateOsSpecific()"
250+
[(ngModel)]="osSpecific().linux_display_server"
251+
(ngModelChange)="helper.updateField('linux_display_server', $event)"
252252
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"
253253
>
254254
<option value="auto">Auto-detect</option>
@@ -257,16 +257,16 @@ import { NumberInputComponent } from '../../shared/number-input/number-input.com
257257
</select>
258258
</div>
259259
260-
@if (advancedMode()) {
260+
@if (helper.advancedMode()) {
261261
<div class="form-group">
262262
<label class="block text-sm font-medium text-kitty-text mb-2">
263263
Wayland Titlebar Color
264264
<span class="text-kitty-text-dim text-xs ml-2">'system' or a hex color</span>
265265
</label>
266266
<input
267267
type="text"
268-
[(ngModel)]="osSpecific.wayland_titlebar_color"
269-
(ngModelChange)="updateOsSpecific()"
268+
[(ngModel)]="osSpecific().wayland_titlebar_color"
269+
(ngModelChange)="helper.updateField('wayland_titlebar_color', $event)"
270270
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"
271271
placeholder="system"
272272
/>
@@ -279,23 +279,6 @@ import { NumberInputComponent } from '../../shared/number-input/number-input.com
279279
styles: []
280280
})
281281
export class OsSpecificFormComponent {
282-
private readonly configStore = inject(ConfigStoreService);
283-
284-
readonly advancedMode = computed(() => this.configStore.advancedMode());
285-
osSpecific: KittyOSSpecificConfig = { ...this.configStore.configState().os_specific };
286-
287-
constructor() {
288-
effect(() => {
289-
this.osSpecific = { ...this.configStore.configState().os_specific };
290-
});
291-
}
292-
293-
updateOsSpecific(): void {
294-
this.configStore.updateSection('os_specific', { ...this.osSpecific });
295-
}
296-
297-
updateNumberOs(key: keyof KittyOSSpecificConfig, value: number): void {
298-
this.osSpecific = { ...this.osSpecific, [key]: value };
299-
this.updateOsSpecific();
300-
}
282+
readonly helper = createFormHelper('os_specific');
283+
readonly osSpecific = this.helper.state.asReadonly();
301284
}

0 commit comments

Comments
 (0)