add terminal configurator base

frontend/src/app/modules/admin/admin.module.ts

@@ -22,6 +22,7 @@ import { MatCardModule } from '@angular/material/card';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatIconModule } from '@angular/material/icon';
 import { MatTooltipModule } from '@angular/material/tooltip';
+import { MsTerminalStyleConfiguratorComponent } from '../shared/components/ms-terminal/components/ms-terminal-style-configurator/ms-terminal-style-configurator.component';
 import { AdminRoutingModule } from './admin-routing.module';
 import { AdminComponent } from './components/admin/admin.component';
 
@@ -35,7 +36,8 @@ import { AdminComponent } from './components/admin/admin.component';
 		MatTooltipModule,
 		MatButtonToggleModule,
 		ReactiveFormsModule,
-		MatCardModule
+		MatCardModule,
+		MsTerminalStyleConfiguratorComponent
 	]
 })
 export class AdminModule {}

frontend/src/app/modules/admin/components/admin/admin.component.html

@@ -48,4 +48,10 @@
 			<mat-button-toggle [value]="AppModes.EXPERT">Expert</mat-button-toggle>
 		</mat-button-toggle-group>
 	</mat-card>
+
+	<mat-card class="ms-card mt-2">
+		<div class="paragraph-bold-p3-small-bold">Terminal styles configurator</div>
+
+		<ms-terminal-style-configurator></ms-terminal-style-configurator>
+	</mat-card>
 </div>

frontend/src/app/modules/shared/components/ms-terminal/components/ms-terminal-style-configurator/ms-terminal-style-configurator.component.html

@@ -0,0 +1,27 @@
+<div class="xterm-dynamic-style-wrapper">
+	<div class="settings-form">
+		<form [formGroup]="form">
+			<div class="form-field-container">
+				<mat-label> Font Size </mat-label>
+				<mat-form-field>
+					<input msErrorDisplay matInput formControlName="fontSize" type="number" />
+				</mat-form-field>
+			</div>
+
+			<div class="form-field-container">
+				<mat-label> Font Family </mat-label>
+				<mat-form-field>
+					<mat-select msErrorDisplay formControlName="fontFamily" placeholder="Select font family">
+						@for (font of fontFamilies; track font) {
+						<mat-option [value]="font">
+							{{ font }}
+						</mat-option>
+						}
+					</mat-select>
+				</mat-form-field>
+			</div>
+		</form>
+	</div>
+
+	<div #terminalContainer class="terminal-wrapper"></div>
+</div>

frontend/src/app/modules/shared/components/ms-terminal/components/ms-terminal-style-configurator/ms-terminal-style-configurator.component.scss

@@ -0,0 +1,21 @@
+.xterm-dynamic-style-wrapper {
+	display: flex;
+	gap: 1rem;
+	margin-top: 20px;
+}
+
+.settings-form {
+	width: 300px;
+	display: flex;
+	flex-direction: column;
+}
+
+.terminal-wrapper {
+	flex-grow: 1;
+	display: flex;
+	flex-direction: column;
+
+	border: 10px solid var(--terminal-color);
+	background-color: var(--terminal-color);
+	border-radius: 10px;
+}

frontend/src/app/modules/shared/components/ms-terminal/components/ms-terminal-style-configurator/ms-terminal-style-configurator.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { MsTerminalStyleConfiguratorComponent } from './ms-terminal-style-configurator.component';
+
+describe('MsTerminalStyleConfiguratorComponent', () => {
+	let component: MsTerminalStyleConfiguratorComponent;
+	let fixture: ComponentFixture<MsTerminalStyleConfiguratorComponent>;
+
+	beforeEach(async () => {
+		await TestBed.configureTestingModule({
+			imports: [MsTerminalStyleConfiguratorComponent]
+		}).compileComponents();
+
+		fixture = TestBed.createComponent(MsTerminalStyleConfiguratorComponent);
+		component = fixture.componentInstance;
+		fixture.detectChanges();
+	});
+
+	it('should create', () => {
+		expect(component).toBeTruthy();
+	});
+});

frontend/src/app/modules/shared/components/ms-terminal/components/ms-terminal-style-configurator/ms-terminal-style-configurator.component.ts

@@ -0,0 +1,106 @@
+import { CommonModule } from '@angular/common';
+import {
+	Component,
+	DestroyRef,
+	ElementRef,
+	inject,
+	OnDestroy,
+	OnInit,
+	ViewChild,
+	ViewEncapsulation
+} from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { FormBuilder, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';
+import { FitAddon } from '@xterm/addon-fit';
+import { Terminal } from '@xterm/xterm';
+import { fontFamilies } from '../../models/font-families.const';
+
+@Component({
+	selector: 'ms-terminal-style-configurator',
+	standalone: true,
+	imports: [CommonModule, FormsModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, MatSelectModule],
+	templateUrl: './ms-terminal-style-configurator.component.html',
+	styleUrl: './ms-terminal-style-configurator.component.scss',
+	encapsulation: ViewEncapsulation.None
+})
+export class MsTerminalStyleConfiguratorComponent implements OnInit, OnDestroy {
+	@ViewChild('terminalContainer', { static: true }) terminalDiv!: ElementRef;
+
+	private destroyRef = inject(DestroyRef);
+	private fb = inject(FormBuilder);
+	public fontFamilies = fontFamilies;
+
+	private terminal!: Terminal;
+	private fitAddon = new FitAddon();
+	private resizeObserver?: ResizeObserver;
+
+	public form: FormGroup = this.fb.group({
+		fontSize: [14],
+		fontFamily: ['Courier New'],
+		background: ['#1e1e1e'],
+		foreground: ['#ffffff']
+	});
+
+	ngOnInit(): void {
+		this.initializeTerminal();
+
+		this.writeTerminalDemoText();
+		this.listenToStyleChanges();
+	}
+
+	private initializeTerminal(): void {
+		this.terminal = new Terminal({
+			cursorBlink: true,
+			theme: {
+				background: '#D0D4D9',
+				foreground: '#000000',
+				cursor: '#000000',
+				selectionBackground: '#FFDD00',
+				selectionForeground: '#000000'
+			},
+			allowProposedApi: true,
+			scrollback: 1000
+		});
+
+		this.terminal.loadAddon(this.fitAddon);
+		this.terminal.open(this.terminalDiv.nativeElement);
+		this.setupResizeObserver();
+	}
+
+	private listenToStyleChanges(): void {
+		this.form.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((values) => {
+			this.terminal.options.fontSize = values.fontSize;
+			this.terminal.options.fontFamily = values.fontFamily;
+
+			this.fitAddon.fit();
+		});
+	}
+
+	private setupResizeObserver(): void {
+		if (this.resizeObserver) {
+			this.resizeObserver.disconnect();
+		}
+		this.resizeObserver = new ResizeObserver(() => {
+			this.fitAddon.fit();
+		});
+		this.resizeObserver.observe(this.terminalDiv.nativeElement);
+	}
+
+	private writeTerminalDemoText(): void {
+		const demoText =
+			'Lorem ipsum dolor sit amet, consectetur adipiscing elit.Vestibulum vehicula ex eu gravida cursus. Curabitur ac ultrices odio. Integer sit amet neque at elit facilisis placerat. Phasellus euismod, sapien a interdum tempus, leo sapien commodo lacus, a posuere lacus tortor at justo. Sed sit amet urna vitae tortor commodo luctus. Nulla facilisi. Vivamus at felis eget sapien volutpat tincidunt. Mauris ut massa vel nunc aliquam semper. Praesent at dui ut neque dapibus tincidunt. Etiam euismod, metus at facilisis finibus, massa arcu bibendum orci, in semper justo turpis nec arcu.';
+
+		this.terminal.writeln('Welcome to xterm.js!\n');
+		this.terminal.writeln(demoText);
+	}
+
+	ngOnDestroy(): void {
+		this.resizeObserver?.disconnect();
+		if (this.terminal) {
+			this.terminal.dispose();
+		}
+	}
+}

frontend/src/app/modules/shared/components/ms-terminal/models/font-families.const.ts

@@ -0,0 +1,22 @@
+export const fontFamilies: string[] = [
+	'Arial',
+	'Helvetica',
+	'Times New Roman',
+	'Courier New',
+	'Verdana',
+	'Georgia',
+	'Palatino',
+	'Garamond',
+	'Bookman',
+	'Comic Sans MS',
+	'Trebuchet MS',
+	'Arial Black',
+	'Impact',
+	'Lucida Sans Unicode',
+	'Tahoma',
+	'Geneva',
+	'Consolas',
+	'Monaco',
+	'Lucida Console',
+	'Segoe UI'
+];