feat: dashboard signals, profile integrations, top nav, empty states, delete modal

src/app/components/app-nav/app-nav.css

@@ -0,0 +1,114 @@
+:host {
+  display: block;
+}
+
+.app-nav {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 100;
+  height: 56px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 28px;
+  background: rgba(5, 5, 5, 0.88);
+  backdrop-filter: blur(14px);
+  -webkit-backdrop-filter: blur(14px);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
+}
+
+/* ── Brand ───────────────────────────────────────────────── */
+
+.nav-brand {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  text-decoration: none;
+  color: #f7f7f7;
+  font-size: 17px;
+  font-weight: 800;
+  letter-spacing: -0.02em;
+}
+
+.nav-brand-icon {
+  width: 32px;
+  height: 32px;
+  border-radius: 8px;
+  background: #f7f7f7;
+  color: #050505;
+  display: grid;
+  place-items: center;
+  flex-shrink: 0;
+}
+
+/* ── Links ───────────────────────────────────────────────── */
+
+.nav-links {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.nav-link {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  text-decoration: none;
+  color: rgba(247, 247, 247, 0.65);
+  font-size: 14px;
+  font-weight: 600;
+  padding: 6px 12px;
+  border-radius: 8px;
+  transition: color 0.15s ease, background 0.15s ease;
+}
+
+.nav-link:hover {
+  color: #f7f7f7;
+  background: rgba(255, 255, 255, 0.07);
+}
+
+.nav-link.active {
+  color: #f7f7f7;
+  background: rgba(255, 255, 255, 0.1);
+}
+
+/* ── Unread badge ────────────────────────────────────────── */
+
+.nav-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 5px;
+  border-radius: 999px;
+  background: #f7f7f7;
+  color: #050505;
+  font-size: 11px;
+  font-weight: 800;
+  line-height: 1;
+}
+
+/* ── Logout ──────────────────────────────────────────────── */
+
+.nav-logout {
+  border: 1px solid rgba(255, 255, 255, 0.18);
+  background: transparent;
+  color: rgba(247, 247, 247, 0.65);
+  border-radius: 8px;
+  padding: 6px 12px;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
+  margin-left: 6px;
+}
+
+.nav-logout:hover {
+  color: #f7f7f7;
+  background: rgba(255, 255, 255, 0.07);
+  border-color: rgba(255, 255, 255, 0.3);
+}

src/app/components/app-nav/app-nav.html

@@ -0,0 +1,24 @@
+<nav class="app-nav">
+  <a routerLink="/dashboard" class="nav-brand" aria-label="Sentinent home">
+    <div class="nav-brand-icon" aria-hidden="true">
+      <svg width="18" height="18" viewBox="0 0 32 32" fill="currentColor">
+        <rect x="4" y="6" width="20" height="8" rx="1.5"></rect>
+        <rect x="8" y="18" width="20" height="8" rx="1.5"></rect>
+      </svg>
+    </div>
+    <span>Sentinent</span>
+  </a>
+
+  <div class="nav-links">
+    <a routerLink="/dashboard" routerLinkActive="active" class="nav-link">Dashboard</a>
+
+    <a routerLink="/profile" routerLinkActive="active" class="nav-link nav-profile-link">
+      Profile
+      <span class="nav-badge" *ngIf="unreadCount > 0" aria-label="{{ unreadCount }} unread signals">
+        {{ badgeLabel }}
+      </span>
+    </a>
+
+    <button type="button" class="nav-logout" (click)="logout()">Logout</button>
+  </div>
+</nav>

src/app/components/app-nav/app-nav.ts

@@ -0,0 +1,49 @@
+import { CommonModule } from '@angular/common';
+import { Component, OnInit, OnDestroy, inject } from '@angular/core';
+import { Router, RouterLink, RouterLinkActive } from '@angular/router';
+import { AuthService } from '../../services/auth';
+import { SignalService } from '../../services/signal.service';
+
+@Component({
+  selector: 'app-nav',
+  standalone: true,
+  imports: [CommonModule, RouterLink, RouterLinkActive],
+  templateUrl: './app-nav.html',
+  styleUrl: './app-nav.css',
+})
+export class AppNavComponent implements OnInit, OnDestroy {
+  private readonly authService = inject(AuthService);
+  private readonly signalService = inject(SignalService);
+  private readonly router = inject(Router);
+
+  unreadCount = 0;
+  private pollInterval?: ReturnType<typeof setInterval>;
+
+  ngOnInit(): void {
+    this.refreshUnread();
+    // Poll every 60s so the badge stays fresh without hammering the API
+    this.pollInterval = setInterval(() => this.refreshUnread(), 60_000);
+  }
+
+  ngOnDestroy(): void {
+    if (this.pollInterval !== undefined) {
+      clearInterval(this.pollInterval);
+    }
+  }
+
+  logout(): void {
+    this.authService.logout();
+    this.router.navigate(['/login']);
+  }
+
+  get badgeLabel(): string {
+    return this.unreadCount > 99 ? '99+' : String(this.unreadCount);
+  }
+
+  private refreshUnread(): void {
+    this.signalService.getSignals({ source: 'all', status: 'unread' }).subscribe({
+      next: (signals) => { this.unreadCount = signals.length; },
+      error: () => {}
+    });
+  }
+}