feat: Add Caddy platform service provider with core functionality and integration

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

@@ -31,6 +31,9 @@ import {
   DialogDescriptionComponent,
   DialogFooterComponent,
 } from '../../ui/dialog/dialog.component';
+import { TabsComponent, TabComponent } from '../../ui/tabs/tabs.component';
+
+type TRegistriesTab = 'onebox' | 'external';
 
 @Component({
   selector: 'app-registries',
@@ -59,6 +62,8 @@ import {
     DialogTitleComponent,
     DialogDescriptionComponent,
     DialogFooterComponent,
+    TabsComponent,
+    TabComponent,
   ],
   template: `
     <div class="space-y-6">
@@ -67,8 +72,17 @@ import {
         <p class="text-muted-foreground">Manage container image registries</p>
       </div>
 
-      <!-- Onebox Registry Card -->
-      <ui-card class="border-primary/50">
+      <!-- Tabs -->
+      <ui-tabs class="block">
+        <ui-tab [active]="activeTab() === 'onebox'" (tabClick)="setTab('onebox')">Onebox Registry</ui-tab>
+        <ui-tab [active]="activeTab() === 'external'" (tabClick)="setTab('external')">External Registries</ui-tab>
+      </ui-tabs>
+
+      <!-- Tab Content -->
+      @switch (activeTab()) {
+        @case ('onebox') {
+          <!-- Onebox Registry Card -->
+          <ui-card class="border-primary/50">
         <ui-card-header class="flex flex-row items-start justify-between space-y-0">
           <div class="space-y-1">
             <div class="flex items-center gap-2">
@@ -118,21 +132,22 @@ import {
             </div>
           </div>
         </ui-card-content>
-      </ui-card>
+          </ui-card>
+        }
+        @case ('external') {
+          <!-- External Registries Section -->
+          <div class="flex items-center justify-between">
+            <div>
+              <h2 class="text-xl font-semibold">External Registries</h2>
+              <p class="text-sm text-muted-foreground">Add credentials for private Docker registries</p>
+            </div>
+            <button uiButton variant="outline" (click)="addDialogOpen.set(true)">
+              Add Registry
+            </button>
+          </div>
 
-      <!-- External Registries Section -->
-      <div class="flex items-center justify-between">
-        <div>
-          <h2 class="text-xl font-semibold">External Registries</h2>
-          <p class="text-sm text-muted-foreground">Add credentials for private Docker registries</p>
-        </div>
-        <button uiButton variant="outline" (click)="addDialogOpen.set(true)">
-          Add Registry
-        </button>
-      </div>
-
-      <ui-card>
-        <ui-card-content class="p-0">
+          <ui-card>
+            <ui-card-content class="p-0">
           @if (loading() && registries().length === 0) {
             <div class="p-6 space-y-4">
               @for (_ of [1,2]; track $index) {
@@ -178,8 +193,10 @@ import {
               </ui-table-body>
             </ui-table>
           }
-        </ui-card-content>
-      </ui-card>
+            </ui-card-content>
+          </ui-card>
+        }
+      }
     </div>
 
     <!-- Add Registry Dialog -->
@@ -229,6 +246,7 @@ export class RegistriesComponent implements OnInit {
   private api = inject(ApiService);
   private toast = inject(ToastService);
 
+  activeTab = signal<TRegistriesTab>('onebox');
   registries = signal<IRegistry[]>([]);
   loading = signal(false);
   addDialogOpen = signal(false);
@@ -237,6 +255,10 @@ export class RegistriesComponent implements OnInit {
 
   form: IRegistryCreate = { url: '', username: '', password: '' };
 
+  setTab(tab: TRegistriesTab): void {
+    this.activeTab.set(tab);
+  }
+
   ngOnInit(): void {
     this.loadRegistries();
   }