Skip to content

Commit ad83667

Browse files
xcutibooxcutiboo
committed
refactor advanced-form to use form helper utility
1 parent 3eee035 commit ad83667

1 file changed

Lines changed: 37 additions & 39 deletions

File tree

‎src/components/forms/advanced-form/advanced-form.component.ts‎

Lines changed: 37 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
import { Component, computed, effect, inject, signal } from '@angular/core';
1+
import { Component, computed, inject, signal } 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 { KittyAdvancedConfig } from '../../../models/kitty-types';
65
import { NumberInputComponent } from '../../shared/number-input/number-input.component';
76
import { VersionBadgeComponent } from '../../shared/version-badge/version-badge.component';
7+
import { createFormHelper } from '../../../utils/form-helpers';
88
import { KittyVersionService } from '../../../services/kitty-version.service';
99

1010
@Component({
@@ -34,23 +34,23 @@ import { KittyVersionService } from '../../../services/kitty-version.service';
3434
</label>
3535
<input
3636
type="text"
37-
[(ngModel)]="advanced.shell"
38-
(ngModelChange)="updateAdvanced()"
37+
[(ngModel)]="advanced().shell"
38+
(ngModelChange)="helper.updateField('shell', $event)"
3939
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"
4040
placeholder=". (uses $SHELL)"
4141
/>
4242
</div>
4343
44-
@if (advancedMode()) {
44+
@if (helper.advancedMode()) {
4545
<div class="form-group">
4646
<label class="block text-sm font-medium text-kitty-text mb-2">
4747
Editor
4848
<span class="text-kitty-text-dim text-xs ml-2">Default '.' reads $VISUAL then $EDITOR</span>
4949
</label>
5050
<input
5151
type="text"
52-
[(ngModel)]="advanced.editor"
53-
(ngModelChange)="updateAdvanced()"
52+
[(ngModel)]="advanced().editor"
53+
(ngModelChange)="helper.updateField('editor', $event)"
5454
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"
5555
placeholder=". (uses $EDITOR)"
5656
/>
@@ -64,8 +64,8 @@ import { KittyVersionService } from '../../../services/kitty-version.service';
6464
<span class="text-kitty-text-dim text-xs ml-2">Injects code into bash/zsh/fish for enhanced features</span>
6565
</label>
6666
<select
67-
[(ngModel)]="advanced.shell_integration"
68-
(ngModelChange)="updateAdvanced()"
67+
[(ngModel)]="advanced().shell_integration"
68+
(ngModelChange)="helper.updateField('shell_integration', $event)"
6969
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"
7070
>
7171
<option value="enabled">Enabled (recommended)</option>
@@ -82,8 +82,8 @@ import { KittyVersionService } from '../../../services/kitty-version.service';
8282
<div class="form-group">
8383
<label class="block text-sm font-medium text-kitty-text mb-2">Allow Remote Control</label>
8484
<select
85-
[(ngModel)]="advanced.allow_remote_control"
86-
(ngModelChange)="updateAdvanced()"
85+
[(ngModel)]="advanced().allow_remote_control"
86+
(ngModelChange)="helper.updateField('allow_remote_control', $event)"
8787
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"
8888
>
8989
<option value="no">No</option>
@@ -98,8 +98,8 @@ import { KittyVersionService } from '../../../services/kitty-version.service';
9898
<label class="flex items-center gap-3 cursor-pointer">
9999
<input
100100
type="checkbox"
101-
[(ngModel)]="advanced.close_on_child_death"
102-
(ngModelChange)="updateAdvanced()"
101+
[(ngModel)]="advanced().close_on_child_death"
102+
(ngModelChange)="helper.updateField('close_on_child_death', $event)"
103103
class="w-5 h-5 rounded flex-shrink-0"
104104
/>
105105
<div>
@@ -123,8 +123,8 @@ import { KittyVersionService } from '../../../services/kitty-version.service';
123123
</label>
124124
<input
125125
type="text"
126-
[(ngModel)]="advanced.listen_on"
127-
(ngModelChange)="updateAdvanced()"
126+
[(ngModel)]="advanced().listen_on"
127+
(ngModelChange)="helper.updateField('listen_on', $event)"
128128
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"
129129
placeholder="none or unix:/tmp/mykitty"
130130
/>
@@ -137,8 +137,8 @@ import { KittyVersionService } from '../../../services/kitty-version.service';
137137
</label>
138138
<input
139139
type="text"
140-
[(ngModel)]="advanced.term"
141-
(ngModelChange)="updateAdvanced()"
140+
[(ngModel)]="advanced().term"
141+
(ngModelChange)="helper.updateField('term', $event)"
142142
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"
143143
placeholder="xterm-kitty"
144144
/>
@@ -152,8 +152,8 @@ import { KittyVersionService } from '../../../services/kitty-version.service';
152152
<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>
153153
</label>
154154
<app-number-input
155-
[(ngModel)]="advanced.update_check_interval"
156-
(ngModelChange)="updateAdvanced()"
155+
[(ngModel)]="advanced().update_check_interval"
156+
(ngModelChange)="helper.updateField('update_check_interval', $event)"
157157
[min]="0"
158158
/>
159159
</div>
@@ -164,8 +164,8 @@ import { KittyVersionService } from '../../../services/kitty-version.service';
164164
<span class="text-kitty-text-dim text-xs ml-2">How to handle clickable hyperlinks from applications</span>
165165
</label>
166166
<select
167-
[(ngModel)]="advanced.allow_hyperlinks"
168-
(ngModelChange)="updateAdvanced()"
167+
[(ngModel)]="advanced().allow_hyperlinks"
168+
(ngModelChange)="helper.updateField('allow_hyperlinks', $event)"
169169
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"
170170
>
171171
<option value="yes">Yes (always allow)</option>
@@ -189,8 +189,8 @@ import { KittyVersionService } from '../../../services/kitty-version.service';
189189
</p>
190190
<input
191191
type="text"
192-
[(ngModel)]="advanced.startup_session"
193-
(ngModelChange)="updateAdvanced()"
192+
[(ngModel)]="advanced().startup_session"
193+
(ngModelChange)="helper.updateField('startup_session', $event)"
194194
[disabled]="!startupSessionAvailable()"
195195
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 disabled:opacity-50"
196196
placeholder="none or /path/to/session.conf"
@@ -302,29 +302,27 @@ import { KittyVersionService } from '../../../services/kitty-version.service';
302302
styles: []
303303
})
304304
export class AdvancedFormComponent {
305-
private readonly configStore = inject(ConfigStoreService);
306305
private readonly versionService = inject(KittyVersionService);
307306

308-
readonly advancedMode = computed(() => this.configStore.advancedMode());
307+
readonly helper = createFormHelper('advanced');
308+
readonly advanced = this.helper.state.asReadonly();
309309
readonly startupSessionAvailable = computed(() => this.versionService.isOptionAvailable('startup_session'));
310-
advanced: KittyAdvancedConfig = { ...this.configStore.configState().advanced };
311310

312311
fastfetchExpanded = signal(false);
313312
copiedShell = signal<'bash' | 'zsh' | 'fish' | null>(null);
314313

315-
readonly bashSnippet = `# ~/.bashrc\nif command -v fastfetch &>/dev/null; then\n fastfetch\nfi`;
316-
readonly zshSnippet = `# ~/.zshrc\nif (( $+commands[fastfetch] )); then\n fastfetch\nfi`;
317-
readonly fishSnippet = `# ~/.config/fish/config.fish\nif command -v fastfetch &>/dev/null\n fastfetch\nend`;
318-
319-
constructor() {
320-
effect(() => {
321-
this.advanced = { ...this.configStore.configState().advanced };
322-
});
323-
}
324-
325-
updateAdvanced(): void {
326-
this.configStore.updateSection('advanced', { ...this.advanced });
327-
}
314+
readonly bashSnippet = `# ~/.bashrc
315+
if command -v fastfetch &>/dev/null; then
316+
fastfetch
317+
fi`;
318+
readonly zshSnippet = `# ~/.zshrc
319+
if (( $+commands[fastfetch] )); then
320+
fastfetch
321+
fi`;
322+
readonly fishSnippet = `# ~/.config/fish/config.fish
323+
if command -v fastfetch &>/dev/null
324+
fastfetch
325+
end`;
328326

329327
copySnippet(shell: 'bash' | 'zsh' | 'fish'): void {
330328
const snippets: Record<'bash' | 'zsh' | 'fish', string> = {

0 commit comments

Comments
 (0)