wip

apps/gapp-dashboard/src/pages/cars/cars.component.ts

@@ -7,7 +7,7 @@ import { filter } from 'rxjs';
 import { ToastService } from '@/services/toast.service';
 import { ApiResponse } from '@/services/api.service.base';
 import { PageBlockComponent } from '@/components/page-block/page-block.component';
-import { ScrollableComponent } from '@/components/scrollable/scrollable.component';
+import { ScrollableComponent } from '@gapp/ui/scrollable';
 import { LoaderComponent } from '@gapp/ui/loader';
 
 @Component({

apps/gapp-dashboard/src/pages/dashboard/car-status-card.component.html

@@ -9,7 +9,7 @@
             <time-ago [date]="telemetry._time"></time-ago>
         </span>
         } @else {
-        <span class="badge badge-neutral">Not connected</span>
+        <span class="badge badge-ghost badge-outline">Not connected</span>
         }
     </span>
 </div>

apps/gapp-dashboard/src/pages/dashboard/car-status-card.component.ts

@@ -1,5 +1,5 @@
 import { Car } from '@/services/cars.service';
-import { Component, input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
 import { TelemetryStatus } from './dashboard.service';
 import { TimeAgoComponent } from '@gapp/ui/time-ago';
 import { ClassRangeDirective, ClassRangeOptions } from '@/utils/class-range.directive';
@@ -11,6 +11,7 @@ import { toObservable } from '@angular/core/rxjs-interop';
 @Component({
     selector: 'car-status-card',
     templateUrl: './car-status-card.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
     imports: [TimeAgoComponent, ClassRangeDirective, AsyncPipe],
 })
 export class CarStatusCardComponent {
@@ -20,7 +21,8 @@ export class CarStatusCardComponent {
     public options: ClassRangeOptions = {
         180: 'badge-success',
         360: 'badge-warning',
-        10_000: 'badge-error',
+        3600: 'badge-error',
+        100_000: 'badge-ghost',
     };
 
     public secondsAgo$ = merge(interval(1000), toObservable(this.telemetry)).pipe(map(() => timeDifference(this.telemetry()?._time)));

apps/gapp-dashboard/src/pages/dashboard/dashboard.component.ts

@@ -3,7 +3,7 @@ import { DashboardService } from './dashboard.service';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { map } from 'rxjs';
 import { PageBlockComponent } from '@/components/page-block/page-block.component';
-import { ScrollableComponent } from '@/components/scrollable/scrollable.component';
+import { ScrollableComponent } from '@gapp/ui/scrollable';
 import { CarsService } from '@/services/cars.service';
 import { VesselsService } from '@/services/vessels.service';
 import { LoaderComponent } from '@gapp/ui/loader';

apps/gapp-dashboard/src/pages/dashboard/vessel-status-card.component.html

@@ -8,7 +8,7 @@
             <time-ago [date]="lastContact._time"></time-ago>
         </span>
         } @else {
-        <span class="badge badge-neutral">Not connected</span>
+        <span class="badge badge-ghost badge-outline">Not connected</span>
         }
     </span>
 </div>

apps/gapp-dashboard/src/pages/dashboard/vessel-status-card.component.ts

@@ -1,4 +1,4 @@
-import { Component, computed, input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 import { TelemetryStatus } from './dashboard.service';
 import { Vessel } from '@/services/vessels.service';
 import { TimeAgoComponent } from '@gapp/ui/time-ago';
@@ -11,6 +11,7 @@ import { toObservable } from '@angular/core/rxjs-interop';
 @Component({
     selector: 'vessel-status-card',
     templateUrl: './vessel-status-card.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
     imports: [TimeAgoComponent, ClassRangeDirective, AsyncPipe],
 })
 export class VesselStatusCardComponent {
@@ -25,7 +26,8 @@ export class VesselStatusCardComponent {
     public options: ClassRangeOptions = {
         180: 'badge-success',
         360: 'badge-warning',
-        10_000: 'badge-error',
+        3600: 'badge-error',
+        100_000: 'badge-ghost',
     };
 
     public secondsAgo$ = merge(interval(1000), toObservable(this.lastContact)).pipe(map(() => timeDifference(this.lastContact()?._time)));

apps/gapp-dashboard/src/pages/vessels/vessels.component.ts

@@ -9,7 +9,7 @@ import { NgIcon, provideIcons, provideNgIconsConfig } from '@ng-icons/core';
 import { tablerTrash, tablerAirBalloon, tablerDrone } from '@ng-icons/tabler-icons';
 import { ApiResponse } from '@/services/api.service.base';
 import { PageBlockComponent } from '@/components/page-block/page-block.component';
-import { ScrollableComponent } from '@/components/scrollable/scrollable.component';
+import { ScrollableComponent } from '@gapp/ui/scrollable';
 import { LoaderComponent } from '@gapp/ui/loader';
 
 @Component({

libs/ui/src/lib/scrollable/index.ts

@@ -0,0 +1 @@
+export * from './scrollable.component';