feat: add sondehub link

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

@@ -17,7 +17,12 @@
     <div class="collapse-content">
         <div class="flex flex-col gap-2 border-l-2 border-neutral pl-2">
             <span>{{ car()?.description }}</span>
-            <!-- <button class="btn btn-sm btn-info">Detail</button> -->
+            <span>
+                <a class="btn btn-sm btn-info whitespace-nowrap" href="https://amateur.sondehub.org/{{ car()?.callsign }}_chase" target="_blank">
+                    SondeHub
+                    <ng-icon name="tablerExternalLink"></ng-icon>
+                </a>
+            </span>
         </div>
     </div>
 </div>

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

@@ -2,12 +2,15 @@ import { Car } from '@/services/cars.service';
 import { ChangeDetectionStrategy, Component, input } from '@angular/core';
 import { TelemetryStatus } from './dashboard.service';
 import { TimeAgoBadgeComponent } from '@/components/time-ago-badge/time-ago-badge.component';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { tablerExternalLink } from '@ng-icons/tabler-icons';
 
 @Component({
     selector: 'car-status-card',
     templateUrl: './car-status-card.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
-    imports: [TimeAgoBadgeComponent],
+    imports: [TimeAgoBadgeComponent, NgIcon],
+    providers: [provideIcons({ tablerExternalLink })],
 })
 export class CarStatusCardComponent {
     public car = input<Car>();

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

@@ -28,7 +28,12 @@
                 }
             </ul>
 
-            <!-- <a class="btn btn-sm btn-info" href="https://amateur.sondehub.org/{{ vessel()?.callsign }}" target="_blank">Open in SondeHub</a> -->
+            <span>
+                <a class="btn btn-sm btn-info" href="https://amateur.sondehub.org/{{ vessel()?.callsign }}" target="_blank">
+                    SondeHub
+                    <ng-icon name="tablerExternalLink"></ng-icon>
+                </a>
+            </span>
         </div>
     </div>
 </div>

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

@@ -2,12 +2,15 @@ import { ChangeDetectionStrategy, Component, computed, input } from '@angular/co
 import { TelemetryStatus } from './dashboard.service';
 import { Vessel } from '@/services/vessels.service';
 import { TimeAgoBadgeComponent } from '@/components/time-ago-badge/time-ago-badge.component';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { tablerExternalLink } from '@ng-icons/tabler-icons';
 
 @Component({
     selector: 'vessel-status-card',
     templateUrl: './vessel-status-card.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
-    imports: [TimeAgoBadgeComponent],
+    imports: [TimeAgoBadgeComponent, NgIcon],
+    providers: [provideIcons({ tablerExternalLink })],
 })
 export class VesselStatusCardComponent {
     public vessel = input<Vessel>();

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

@@ -47,6 +47,7 @@
     action="Create"
     [formGroup]="vesselForm"
     (actionUsed)="createVessel()"
+    [width]="'w-full'"
 >
     @if(errorMessage()) {
     <div role="alert" class="alert alert-error">

apps/gapp-dashboard/tailwind.config.js

@@ -3,7 +3,11 @@ const { join } = require('path');
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-    content: [join(__dirname, 'src/**/!(*.stories|*.spec).{ts,html}'), ...createGlobPatternsForDependencies(__dirname)],
+    content: [
+        join(__dirname, 'src/**/!(*.stories|*.spec).{ts,html}'),
+        join(__dirname, '../../libs/**/!(*.stories|*.spec).{ts,html}'),
+        ...createGlobPatternsForDependencies(__dirname),
+    ],
     theme: {
         extend: {},
     },

libs/ui/src/lib/modal/modal.component.html

@@ -1,5 +1,5 @@
 <dialog #modal class="modal" (close)="closed.emit()">
-    <div class="modal-box">
+    <div class="modal-box" [ngClass]="">
         <h3 class="text-lg font-bold">{{ title() }}</h3>
 
         <form method="dialog">
@@ -14,8 +14,8 @@ <h3 class="text-lg font-bold">{{ title() }}</h3>
             <form method="dialog">
                 <button class="btn">Close</button>
             </form>
-            @if(action()) {
-            <button class="btn btn-primary" (click)="actionUsed.emit()">{{ action() }}</button>
+            @if(action(); as action) {
+            <button class="btn btn-primary" (click)="actionUsed.emit()">{{ action }}</button>
             }
         </div>
     </div>

libs/ui/src/lib/modal/modal.component.ts

@@ -1,14 +1,17 @@
 import { Component, effect, ElementRef, input, output, ViewChild } from '@angular/core';
+import { NgClass } from '@angular/common';
 
 @Component({
     selector: 'gapp-modal',
     templateUrl: './modal.component.html',
+    imports: [NgClass],
 })
 export class ModalComponent {
     @ViewChild('modal', { static: true }) public modalRef!: ElementRef<HTMLDialogElement>;
 
     public readonly isOpen = input(false);
     public readonly title = input('');
+    public readonly width = input('');
     public readonly action = input<string | undefined>();
     public readonly closed = output<void>();
     public readonly actionUsed = output<void>();
@@ -22,4 +25,12 @@ export class ModalComponent {
             }
         });
     }
+
+    public open() {
+        this.modalRef.nativeElement.showModal();
+    }
+
+    public close() {
+        this.modalRef.nativeElement.close();
+    }
 }