From 74940efd3644af76f2effd235283d35c7fce3774 Mon Sep 17 00:00:00 2001
From: KenTandrian <kenricktan11@gmail.com>
Date: Sun, 15 Feb 2026 23:53:51 +0700
Subject: [PATCH] feat(lib): change deviceType to computed signal

---
 ...torical-market-data-editor.component.spec.ts |  5 ++++-
 .../historical-market-data-editor.component.ts  | 17 +++++++++--------
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/libs/ui/src/lib/historical-market-data-editor/historical-market-data-editor.component.spec.ts b/libs/ui/src/lib/historical-market-data-editor/historical-market-data-editor.component.spec.ts
index 5a75b0946..7cb9636f0 100644
--- a/libs/ui/src/lib/historical-market-data-editor/historical-market-data-editor.component.spec.ts
+++ b/libs/ui/src/lib/historical-market-data-editor/historical-market-data-editor.component.spec.ts
@@ -1,5 +1,6 @@
 import { DataService } from '@ghostfolio/ui/services';
 
+import { signal } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { FormBuilder } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
@@ -27,7 +28,9 @@ describe('GfHistoricalMarketDataEditorComponent', () => {
         { provide: DataService, useValue: {} },
         {
           provide: DeviceDetectorService,
-          useValue: { getDeviceInfo: () => ({ deviceType: 'desktop' }) }
+          useValue: {
+            deviceInfo: signal({ deviceType: 'desktop' })
+          }
         },
         { provide: MatDialog, useValue: {} },
         { provide: MatSnackBar, useValue: {} }
diff --git a/libs/ui/src/lib/historical-market-data-editor/historical-market-data-editor.component.ts b/libs/ui/src/lib/historical-market-data-editor/historical-market-data-editor.component.ts
index 6f81f84c5..3a28327ae 100644
--- a/libs/ui/src/lib/historical-market-data-editor/historical-market-data-editor.component.ts
+++ b/libs/ui/src/lib/historical-market-data-editor/historical-market-data-editor.component.ts
@@ -14,6 +14,7 @@ import {
   Component,
   computed,
   EventEmitter,
+  inject,
   input,
   Input,
   OnChanges,
@@ -73,7 +74,6 @@ export class GfHistoricalMarketDataEditorComponent
 
   @Output() marketDataChanged = new EventEmitter<boolean>();
 
-  public deviceType: string;
   public historicalDataForm = this.formBuilder.group({
     historicalData: this.formBuilder.group({
       csvString: ''
@@ -97,17 +97,18 @@ export class GfHistoricalMarketDataEditorComponent
     getDateFormatString(this.locale())
   );
 
-  private unsubscribeSubject = new Subject<void>();
+  private readonly deviceDetectorService = inject(DeviceDetectorService);
+  private readonly deviceType = computed(
+    () => this.deviceDetectorService.deviceInfo().deviceType
+  );
+  private readonly unsubscribeSubject = new Subject<void>();
 
   public constructor(
     private dataService: DataService,
-    private deviceService: DeviceDetectorService,
     private dialog: MatDialog,
     private formBuilder: FormBuilder,
     private snackBar: MatSnackBar
-  ) {
-    this.deviceType = this.deviceService.getDeviceInfo().deviceType;
-  }
+  ) {}
 
   public ngOnInit() {
     this.initializeHistoricalDataForm();
@@ -231,8 +232,8 @@ export class GfHistoricalMarketDataEditorComponent
         symbol: this.symbol,
         user: this.user
       },
-      height: this.deviceType === 'mobile' ? '98vh' : '80vh',
-      width: this.deviceType === 'mobile' ? '100vw' : '50rem'
+      height: this.deviceType() === 'mobile' ? '98vh' : '80vh',
+      width: this.deviceType() === 'mobile' ? '100vw' : '50rem'
     });
 
     dialogRef