feat(ui): Sync UI tab state with URL and update routes/links

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

@@ -1,6 +1,7 @@
-import { Component, inject, signal, OnInit } from '@angular/core';
+import { Component, inject, signal, OnInit, OnDestroy } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { RouterLink } from '@angular/router';
+import { RouterLink, ActivatedRoute, Router } from '@angular/router';
+import { Subscription } from 'rxjs';
 import { ApiService } from '../../core/services/api.service';
 import { ToastService } from '../../core/services/toast.service';
 import { IRegistry, IRegistryCreate } from '../../core/types/api.types';
@@ -242,9 +243,12 @@ type TRegistriesTab = 'onebox' | 'external';
     </ui-dialog>
   `,
 })
-export class RegistriesComponent implements OnInit {
+export class RegistriesComponent implements OnInit, OnDestroy {
   private api = inject(ApiService);
   private toast = inject(ToastService);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private routeSub?: Subscription;
 
   activeTab = signal<TRegistriesTab>('onebox');
   registries = signal<IRegistry[]>([]);
@@ -256,13 +260,25 @@ export class RegistriesComponent implements OnInit {
   form: IRegistryCreate = { url: '', username: '', password: '' };
 
   setTab(tab: TRegistriesTab): void {
-    this.activeTab.set(tab);
+    this.router.navigate(['/registries', tab]);
   }
 
   ngOnInit(): void {
+    // Subscribe to route params to sync tab state with URL
+    this.routeSub = this.route.paramMap.subscribe((params) => {
+      const tab = params.get('tab') as TRegistriesTab;
+      if (tab && ['onebox', 'external'].includes(tab)) {
+        this.activeTab.set(tab);
+      }
+    });
+
     this.loadRegistries();
   }
 
+  ngOnDestroy(): void {
+    this.routeSub?.unsubscribe();
+  }
+
   async loadRegistries(): Promise<void> {
     this.loading.set(true);
     try {