feat: remove DNS and Domains from layout, add DNS and Domains content components

- Removed DNS and Domains entries from the layout navigation.
- Added DnsContentComponent for managing DNS records with Cloudflare.
- Added DomainsContentComponent for managing domains and SSL certificates.
- Introduced TabsComponent and TabComponent for tab navigation.
- Updated index.ts to export new TabsComponent and TabComponent.

ui/src/app/app.routes.ts

@@ -54,17 +54,17 @@ export const routes: Routes = [
         ],
       },
       {
-        path: 'domains',
+        path: 'network',
         children: [
           {
             path: '',
             loadComponent: () =>
-              import('./features/domains/domains.component').then(
-                (m) => m.DomainsComponent
+              import('./features/network/network.component').then(
+                (m) => m.NetworkComponent
               ),
           },
           {
-            path: ':domain',
+            path: 'domains/:domain',
             loadComponent: () =>
               import('./features/domains/domain-detail.component').then(
                 (m) => m.DomainDetailComponent
@@ -72,18 +72,6 @@ export const routes: Routes = [
           },
         ],
       },
-      {
-        path: 'dns',
-        loadComponent: () =>
-          import('./features/dns/dns.component').then((m) => m.DnsComponent),
-      },
-      {
-        path: 'network',
-        loadComponent: () =>
-          import('./features/network/network.component').then(
-            (m) => m.NetworkComponent
-          ),
-      },
       {
         path: 'registries',
         loadComponent: () =>

ui/src/app/features/dashboard/dashboard.component.ts

@@ -202,7 +202,7 @@ import { SkeletonComponent } from '../../ui/skeleton/skeleton.component';
             <a routerLink="/services">
               <button uiButton variant="outline">View All Services</button>
             </a>
-            <a routerLink="/domains">
+            <a routerLink="/network">
               <button uiButton variant="outline">Manage Domains</button>
             </a>
           </ui-card-content>

ui/src/app/features/network/dns-content.component.ts

@@ -0,0 +1,198 @@
+import { Component, inject, signal, OnInit } from '@angular/core';
+import { ApiService } from '../../core/services/api.service';
+import { ToastService } from '../../core/services/toast.service';
+import { IDnsRecord } from '../../core/types/api.types';
+import {
+  CardComponent,
+  CardContentComponent,
+} from '../../ui/card/card.component';
+import { ButtonComponent } from '../../ui/button/button.component';
+import { BadgeComponent } from '../../ui/badge/badge.component';
+import {
+  TableComponent,
+  TableHeaderComponent,
+  TableBodyComponent,
+  TableRowComponent,
+  TableHeadComponent,
+  TableCellComponent,
+} from '../../ui/table/table.component';
+import { SkeletonComponent } from '../../ui/skeleton/skeleton.component';
+import {
+  DialogComponent,
+  DialogHeaderComponent,
+  DialogTitleComponent,
+  DialogDescriptionComponent,
+  DialogFooterComponent,
+} from '../../ui/dialog/dialog.component';
+
+@Component({
+  selector: 'app-dns-content',
+  standalone: true,
+  imports: [
+    CardComponent,
+    CardContentComponent,
+    ButtonComponent,
+    BadgeComponent,
+    TableComponent,
+    TableHeaderComponent,
+    TableBodyComponent,
+    TableRowComponent,
+    TableHeadComponent,
+    TableCellComponent,
+    SkeletonComponent,
+    DialogComponent,
+    DialogHeaderComponent,
+    DialogTitleComponent,
+    DialogDescriptionComponent,
+    DialogFooterComponent,
+  ],
+  template: `
+    <div class="space-y-6">
+      <div class="flex items-center justify-between">
+        <p class="text-muted-foreground">Manage DNS records synced with Cloudflare</p>
+        <button uiButton (click)="syncRecords()" [disabled]="syncing()">
+          @if (syncing()) {
+            <svg class="animate-spin h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24">
+              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+            </svg>
+            Syncing...
+          } @else {
+            Sync Cloudflare
+          }
+        </button>
+      </div>
+
+      <ui-card>
+        <ui-card-content class="p-0">
+          @if (loading() && records().length === 0) {
+            <div class="p-6 space-y-4">
+              @for (_ of [1,2,3]; track $index) {
+                <ui-skeleton class="h-12 w-full" />
+              }
+            </div>
+          } @else if (records().length === 0) {
+            <div class="p-12 text-center">
+              <svg class="mx-auto h-12 w-12 text-muted-foreground" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
+              </svg>
+              <h3 class="mt-4 text-lg font-semibold">No DNS records</h3>
+              <p class="mt-2 text-sm text-muted-foreground">DNS records are created automatically when you deploy services with domains.</p>
+              <button uiButton class="mt-4" (click)="syncRecords()">Sync from Cloudflare</button>
+            </div>
+          } @else {
+            <ui-table>
+              <ui-table-header>
+                <ui-table-row>
+                  <ui-table-head>Domain</ui-table-head>
+                  <ui-table-head>Type</ui-table-head>
+                  <ui-table-head>Value</ui-table-head>
+                  <ui-table-head class="text-right">Actions</ui-table-head>
+                </ui-table-row>
+              </ui-table-header>
+              <ui-table-body>
+                @for (record of records(); track record.id) {
+                  <ui-table-row>
+                    <ui-table-cell class="font-medium">{{ record.domain }}</ui-table-cell>
+                    <ui-table-cell>
+                      <ui-badge variant="secondary">{{ record.type }}</ui-badge>
+                    </ui-table-cell>
+                    <ui-table-cell class="font-mono text-sm">{{ record.value }}</ui-table-cell>
+                    <ui-table-cell class="text-right">
+                      <button uiButton variant="destructive" size="sm" (click)="confirmDelete(record)">
+                        Delete
+                      </button>
+                    </ui-table-cell>
+                  </ui-table-row>
+                }
+              </ui-table-body>
+            </ui-table>
+          }
+        </ui-card-content>
+      </ui-card>
+    </div>
+
+    <ui-dialog [open]="deleteDialogOpen()" (openChange)="deleteDialogOpen.set($event)">
+      <ui-dialog-header>
+        <ui-dialog-title>Delete DNS Record</ui-dialog-title>
+        <ui-dialog-description>
+          Are you sure you want to delete the record for "{{ recordToDelete()?.domain }}"?
+        </ui-dialog-description>
+      </ui-dialog-header>
+      <ui-dialog-footer>
+        <button uiButton variant="outline" (click)="deleteDialogOpen.set(false)">Cancel</button>
+        <button uiButton variant="destructive" (click)="deleteRecord()">Delete</button>
+      </ui-dialog-footer>
+    </ui-dialog>
+  `,
+})
+export class DnsContentComponent implements OnInit {
+  private api = inject(ApiService);
+  private toast = inject(ToastService);
+
+  records = signal<IDnsRecord[]>([]);
+  loading = signal(false);
+  syncing = signal(false);
+  deleteDialogOpen = signal(false);
+  recordToDelete = signal<IDnsRecord | null>(null);
+
+  ngOnInit(): void {
+    this.loadRecords();
+  }
+
+  async loadRecords(): Promise<void> {
+    this.loading.set(true);
+    try {
+      const response = await this.api.getDnsRecords();
+      if (response.success && response.data) {
+        this.records.set(response.data);
+      }
+    } catch {
+      this.toast.error('Failed to load DNS records');
+    } finally {
+      this.loading.set(false);
+    }
+  }
+
+  async syncRecords(): Promise<void> {
+    this.syncing.set(true);
+    try {
+      const response = await this.api.syncDnsRecords();
+      if (response.success) {
+        this.toast.success('DNS records synced');
+        this.loadRecords();
+      } else {
+        this.toast.error(response.error || 'Failed to sync DNS records');
+      }
+    } catch {
+      this.toast.error('Failed to sync DNS records');
+    } finally {
+      this.syncing.set(false);
+    }
+  }
+
+  confirmDelete(record: IDnsRecord): void {
+    this.recordToDelete.set(record);
+    this.deleteDialogOpen.set(true);
+  }
+
+  async deleteRecord(): Promise<void> {
+    const record = this.recordToDelete();
+    if (!record) return;
+
+    try {
+      const response = await this.api.deleteDnsRecord(record.domain);
+      if (response.success) {
+        this.toast.success('DNS record deleted');
+        this.loadRecords();
+      } else {
+        this.toast.error(response.error || 'Failed to delete record');
+      }
+    } catch {
+      this.toast.error('Failed to delete record');
+    } finally {
+      this.deleteDialogOpen.set(false);
+      this.recordToDelete.set(null);
+    }
+  }
+}

ui/src/app/features/network/domains-content.component.ts

@@ -0,0 +1,237 @@
+import { Component, inject, signal, OnInit } from '@angular/core';
+import { RouterLink } from '@angular/router';
+import { ApiService } from '../../core/services/api.service';
+import { ToastService } from '../../core/services/toast.service';
+import { IDomainDetail } from '../../core/types/api.types';
+import {
+  CardComponent,
+  CardHeaderComponent,
+  CardTitleComponent,
+  CardContentComponent,
+} from '../../ui/card/card.component';
+import { ButtonComponent } from '../../ui/button/button.component';
+import { BadgeComponent } from '../../ui/badge/badge.component';
+import {
+  TableComponent,
+  TableHeaderComponent,
+  TableBodyComponent,
+  TableRowComponent,
+  TableHeadComponent,
+  TableCellComponent,
+} from '../../ui/table/table.component';
+import { SkeletonComponent } from '../../ui/skeleton/skeleton.component';
+
+@Component({
+  selector: 'app-domains-content',
+  standalone: true,
+  imports: [
+    RouterLink,
+    CardComponent,
+    CardHeaderComponent,
+    CardTitleComponent,
+    CardContentComponent,
+    ButtonComponent,
+    BadgeComponent,
+    TableComponent,
+    TableHeaderComponent,
+    TableBodyComponent,
+    TableRowComponent,
+    TableHeadComponent,
+    TableCellComponent,
+    SkeletonComponent,
+  ],
+  template: `
+    <div class="space-y-6">
+      <div class="flex items-center justify-between">
+        <p class="text-muted-foreground">Manage domains and SSL certificates</p>
+        <button uiButton (click)="syncDomains()" [disabled]="syncing()">
+          @if (syncing()) {
+            <svg class="animate-spin h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24">
+              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+            </svg>
+            Syncing...
+          } @else {
+            Sync Cloudflare
+          }
+        </button>
+      </div>
+
+      <!-- Stats -->
+      <div class="grid gap-4 md:grid-cols-4">
+        <ui-card>
+          <ui-card-header class="flex flex-row items-center justify-between space-y-0 pb-2">
+            <ui-card-title class="text-sm font-medium">Total Domains</ui-card-title>
+            <svg class="h-4 w-4 text-muted-foreground" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
+            </svg>
+          </ui-card-header>
+          <ui-card-content>
+            <div class="text-2xl font-bold">{{ domains().length }}</div>
+          </ui-card-content>
+        </ui-card>
+        <ui-card>
+          <ui-card-header class="flex flex-row items-center justify-between space-y-0 pb-2">
+            <ui-card-title class="text-sm font-medium">Valid Certificates</ui-card-title>
+            <svg class="h-4 w-4 text-success" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
+            </svg>
+          </ui-card-header>
+          <ui-card-content>
+            <div class="text-2xl font-bold text-success">{{ countByStatus('valid') }}</div>
+          </ui-card-content>
+        </ui-card>
+        <ui-card>
+          <ui-card-header class="flex flex-row items-center justify-between space-y-0 pb-2">
+            <ui-card-title class="text-sm font-medium">Expiring Soon</ui-card-title>
+            <svg class="h-4 w-4 text-warning" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+          </ui-card-header>
+          <ui-card-content>
+            <div class="text-2xl font-bold text-warning">{{ countByStatus('expiring-soon') }}</div>
+          </ui-card-content>
+        </ui-card>
+        <ui-card>
+          <ui-card-header class="flex flex-row items-center justify-between space-y-0 pb-2">
+            <ui-card-title class="text-sm font-medium">Expired/Pending</ui-card-title>
+            <svg class="h-4 w-4 text-destructive" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+            </svg>
+          </ui-card-header>
+          <ui-card-content>
+            <div class="text-2xl font-bold text-destructive">{{ countByStatus('expired') + countByStatus('pending') }}</div>
+          </ui-card-content>
+        </ui-card>
+      </div>
+
+      <!-- Domains Table -->
+      <ui-card>
+        <ui-card-content class="p-0">
+          @if (loading() && domains().length === 0) {
+            <div class="p-6 space-y-4">
+              @for (_ of [1,2,3]; track $index) {
+                <ui-skeleton class="h-12 w-full" />
+              }
+            </div>
+          } @else if (domains().length === 0) {
+            <div class="p-12 text-center">
+              <h3 class="text-lg font-semibold">No domains found</h3>
+              <p class="mt-2 text-sm text-muted-foreground">Sync domains from Cloudflare to get started.</p>
+              <button uiButton class="mt-4" (click)="syncDomains()">Sync Cloudflare Domains</button>
+            </div>
+          } @else {
+            <ui-table>
+              <ui-table-header>
+                <ui-table-row>
+                  <ui-table-head>Domain</ui-table-head>
+                  <ui-table-head>Provider</ui-table-head>
+                  <ui-table-head>Services</ui-table-head>
+                  <ui-table-head>Certificate</ui-table-head>
+                  <ui-table-head>Expires</ui-table-head>
+                  <ui-table-head class="text-right">Actions</ui-table-head>
+                </ui-table-row>
+              </ui-table-header>
+              <ui-table-body>
+                @for (d of domains(); track d.domain.id) {
+                  <ui-table-row [class.opacity-50]="d.domain.isObsolete">
+                    <ui-table-cell>
+                      <div class="flex items-center gap-2">
+                        <span class="font-medium">{{ d.domain.domain }}</span>
+                        @if (d.domain.isObsolete) {
+                          <ui-badge variant="destructive">Obsolete</ui-badge>
+                        }
+                      </div>
+                    </ui-table-cell>
+                    <ui-table-cell>
+                      <ui-badge [variant]="d.domain.dnsProvider === 'cloudflare' ? 'default' : 'secondary'">
+                        {{ d.domain.dnsProvider || 'None' }}
+                      </ui-badge>
+                    </ui-table-cell>
+                    <ui-table-cell>{{ d.serviceCount }}</ui-table-cell>
+                    <ui-table-cell>
+                      <ui-badge [variant]="getCertStatusVariant(d.certificateStatus)">
+                        {{ d.certificateStatus }}
+                      </ui-badge>
+                    </ui-table-cell>
+                    <ui-table-cell>
+                      @if (d.daysRemaining !== null) {
+                        <span [class.text-destructive]="d.daysRemaining <= 30">
+                          {{ d.daysRemaining }} days
+                        </span>
+                      } @else {
+                        <span class="text-muted-foreground">-</span>
+                      }
+                    </ui-table-cell>
+                    <ui-table-cell class="text-right">
+                      <a [routerLink]="['/network/domains', d.domain.domain]">
+                        <button uiButton variant="outline" size="sm">View</button>
+                      </a>
+                    </ui-table-cell>
+                  </ui-table-row>
+                }
+              </ui-table-body>
+            </ui-table>
+          }
+        </ui-card-content>
+      </ui-card>
+    </div>
+  `,
+})
+export class DomainsContentComponent implements OnInit {
+  private api = inject(ApiService);
+  private toast = inject(ToastService);
+
+  domains = signal<IDomainDetail[]>([]);
+  loading = signal(false);
+  syncing = signal(false);
+
+  ngOnInit(): void {
+    this.loadDomains();
+  }
+
+  async loadDomains(): Promise<void> {
+    this.loading.set(true);
+    try {
+      const response = await this.api.getDomains();
+      if (response.success && response.data) {
+        this.domains.set(response.data);
+      }
+    } catch {
+      this.toast.error('Failed to load domains');
+    } finally {
+      this.loading.set(false);
+    }
+  }
+
+  async syncDomains(): Promise<void> {
+    this.syncing.set(true);
+    try {
+      const response = await this.api.syncCloudflareDomains();
+      if (response.success) {
+        this.toast.success('Domains synced');
+        this.loadDomains();
+      } else {
+        this.toast.error(response.error || 'Failed to sync domains');
+      }
+    } catch {
+      this.toast.error('Failed to sync domains');
+    } finally {
+      this.syncing.set(false);
+    }
+  }
+
+  countByStatus(status: string): number {
+    return this.domains().filter(d => d.certificateStatus === status).length;
+  }
+
+  getCertStatusVariant(status: string): 'success' | 'warning' | 'destructive' | 'secondary' {
+    switch (status) {
+      case 'valid': return 'success';
+      case 'expiring-soon': return 'warning';
+      case 'expired': return 'destructive';
+      case 'pending': return 'secondary';
+      default: return 'secondary';
+    }
+  }
+}

ui/src/app/features/network/network.component.ts

@@ -21,6 +21,11 @@ import {
   TableHeadComponent,
   TableCellComponent,
 } from '../../ui/table/table.component';
+import { TabsComponent, TabComponent } from '../../ui/tabs/tabs.component';
+import { DnsContentComponent } from './dns-content.component';
+import { DomainsContentComponent } from './domains-content.component';
+
+type TNetworkTab = 'proxy' | 'dns' | 'domains';
 
 @Component({
   selector: 'app-network',
@@ -40,6 +45,10 @@ import {
     TableRowComponent,
     TableHeadComponent,
     TableCellComponent,
+    TabsComponent,
+    TabComponent,
+    DnsContentComponent,
+    DomainsContentComponent,
   ],
   template: `
     <div class="space-y-6">
@@ -47,8 +56,23 @@ import {
       <div class="flex items-center justify-between">
         <div>
           <h1 class="text-3xl font-bold tracking-tight">Network</h1>
-          <p class="text-muted-foreground">Traffic targets and access logs</p>
+          <p class="text-muted-foreground">Manage proxy, DNS, and domains</p>
         </div>
+      </div>
+
+      <!-- Tabs -->
+      <ui-tabs class="block">
+        <ui-tab [active]="activeTab() === 'proxy'" (tabClick)="setTab('proxy')">Proxy</ui-tab>
+        <ui-tab [active]="activeTab() === 'dns'" (tabClick)="setTab('dns')">DNS</ui-tab>
+        <ui-tab [active]="activeTab() === 'domains'" (tabClick)="setTab('domains')">Domains</ui-tab>
+      </ui-tabs>
+
+      <!-- Tab Content -->
+      @switch (activeTab()) {
+        @case ('proxy') {
+          <!-- Proxy Tab Content -->
+          <div class="space-y-6">
+            <div class="flex justify-end">
               <button uiButton variant="outline" (click)="loadData()" [disabled]="loading()">
                 @if (loading()) {
                   <svg class="animate-spin h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24">
@@ -252,6 +276,19 @@ import {
               </ui-card-content>
             </ui-card>
           </div>
+        }
+        @case ('dns') {
+          <div class="space-y-6">
+            <app-dns-content />
+          </div>
+        }
+        @case ('domains') {
+          <div class="space-y-6">
+            <app-domains-content />
+          </div>
+        }
+      }
+    </div>
   `,
 })
 export class NetworkComponent implements OnInit, OnDestroy {
@@ -261,6 +298,10 @@ export class NetworkComponent implements OnInit, OnDestroy {
 
   @ViewChild('logContainer') logContainer!: ElementRef<HTMLDivElement>;
 
+  // Tab state
+  activeTab = signal<TNetworkTab>('proxy');
+
+  // Proxy tab data
   targets = signal<INetworkTarget[]>([]);
   stats = signal<INetworkStats | null>(null);
   loading = signal(false);
@@ -287,6 +328,10 @@ export class NetworkComponent implements OnInit, OnDestroy {
     this.networkLogStream.disconnect();
   }
 
+  setTab(tab: TNetworkTab): void {
+    this.activeTab.set(tab);
+  }
+
   async loadData(): Promise<void> {
     this.loading.set(true);
     try {

ui/src/app/shared/components/layout/layout.component.ts

@@ -121,8 +121,6 @@ export class LayoutComponent {
     { label: 'Network', path: '/network', icon: 'activity' },
     { label: 'Registries', path: '/registries', icon: 'database' },
     { label: 'Tokens', path: '/tokens', icon: 'key' },
-    { label: 'DNS', path: '/dns', icon: 'globe' },
-    { label: 'Domains', path: '/domains', icon: 'link' },
     { label: 'Settings', path: '/settings', icon: 'settings' },
   ];
 }

ui/src/app/ui/index.ts

@@ -60,3 +60,6 @@ export {
 
 // Select
 export { SelectComponent, SelectOption } from './select/select.component';
+
+// Tabs
+export { TabsComponent, TabComponent } from './tabs/tabs.component';

ui/src/app/ui/tabs/tabs.component.ts

@@ -0,0 +1,40 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+
+@Component({
+  selector: 'ui-tabs',
+  standalone: true,
+  template: `
+    <div class="border-b border-border">
+      <nav class="flex space-x-2" aria-label="Tabs">
+        <ng-content />
+      </nav>
+    </div>
+  `,
+})
+export class TabsComponent {}
+
+@Component({
+  selector: 'ui-tab',
+  standalone: true,
+  template: `
+    <button
+      type="button"
+      [class]="getClass()"
+      (click)="tabClick.emit()"
+    >
+      <ng-content />
+    </button>
+  `,
+})
+export class TabComponent {
+  @Input() active = false;
+  @Output() tabClick = new EventEmitter<void>();
+
+  getClass(): string {
+    const base = 'px-4 py-2.5 text-sm font-medium border-b-2 -mb-px transition-colors focus:outline-none';
+    if (this.active) {
+      return `${base} border-primary text-foreground`;
+    }
+    return `${base} border-transparent text-muted-foreground hover:text-foreground hover:border-border`;
+  }
+}