Merge branch 'next/minor' of github.com:Start9Labs/start-os into feat/boot-param

web/projects/ui/src/app/app.module.ts

@@ -14,6 +14,7 @@ import {
   DarkThemeModule,
   EnterModule,
   LightThemeModule,
+  LoadingModule,
   MarkdownModule,
   ResponsiveColModule,
   SharedPipesModule,
@@ -22,13 +23,11 @@ import {
 import { AppComponent } from './app.component'
 import { AppRoutingModule } from './app-routing.module'
 import { OSWelcomePageModule } from './modals/os-welcome/os-welcome.module'
-import { GenericInputComponentModule } from './modals/generic-input/generic-input.component.module'
 import { MarketplaceModule } from './marketplace.module'
 import { PreloaderModule } from './app/preloader/preloader.module'
 import { FooterModule } from './app/footer/footer.module'
 import { MenuModule } from './app/menu/menu.module'
 import { APP_PROVIDERS } from './app.providers'
-import { PatchDbModule } from './services/patch-db/patch-db.module'
 import { ToastContainerModule } from './components/toast-container/toast-container.module'
 import { ConnectionBarComponentModule } from './components/connection-bar/connection-bar.component.module'
 import { WidgetsPageModule } from './pages/widgets/widgets.module'
@@ -50,11 +49,10 @@ import { environment } from '../environments/environment'
     EnterModule,
     OSWelcomePageModule,
     MarkdownModule,
-    GenericInputComponentModule,
+    LoadingModule,
     MonacoEditorModule,
     SharedPipesModule,
     MarketplaceModule,
-    PatchDbModule,
     ToastContainerModule,
     ConnectionBarComponentModule,
     TuiRootModule,

web/projects/ui/src/app/app.providers.ts

@@ -3,6 +3,12 @@ import { UntypedFormBuilder } from '@angular/forms'
 import { Router, RouteReuseStrategy } from '@angular/router'
 import { IonicRouteStrategy, IonNav } from '@ionic/angular'
 import { RELATIVE_URL, THEME, WorkspaceConfig } from '@start9labs/shared'
+import { TUI_ICONS_PATH } from '@taiga-ui/core'
+import { PatchDB } from 'patch-db-client'
+import {
+  PATCH_CACHE,
+  PatchDbSource,
+} from 'src/app/services/patch-db/patch-db-source'
 import { ApiService } from './services/api/embassy-api.service'
 import { MockApiService } from './services/api/embassy-mock-api.service'
 import { LiveApiService } from './services/api/embassy-live-api.service'
@@ -29,6 +35,11 @@ export const APP_PROVIDERS: Provider[] = [
     provide: ApiService,
     useClass: useMocks ? MockApiService : LiveApiService,
   },
+  {
+    provide: PatchDB,
+    deps: [PatchDbSource, PATCH_CACHE],
+    useClass: PatchDB,
+  },
   {
     provide: APP_INITIALIZER,
     deps: [StorageService, AuthService, ClientStorageService, Router],
@@ -43,6 +54,10 @@ export const APP_PROVIDERS: Provider[] = [
     provide: THEME,
     useExisting: ThemeSwitcherService,
   },
+  {
+    provide: TUI_ICONS_PATH,
+    useValue: (name: string) => `/assets/taiga-ui/icons/${name}.svg#${name}`,
+  },
 ]
 
 export function appInitializer(
@@ -54,7 +69,7 @@ export function appInitializer(
   return () => {
     storage.migrate036()
     auth.init()
-    localStorage.init() // @TODO pretty sure we can navigate before this step
+    localStorage.init()
     router.initialNavigation()
   }
 }

web/projects/ui/src/app/app/preloader/preloader.component.html

@@ -8,8 +8,6 @@
   <!-- Ionic components -->
   <ion-accordion></ion-accordion>
   <ion-accordion-group></ion-accordion-group>
-  <ion-action-sheet></ion-action-sheet>
-  <ion-alert></ion-alert>
   <ion-avatar></ion-avatar>
   <ion-back-button></ion-back-button>
   <ion-badge></ion-badge>
@@ -19,14 +17,11 @@
   <ion-card-content></ion-card-content>
   <ion-card-header></ion-card-header>
   <ion-checkbox></ion-checkbox>
-  <ion-content></ion-content>
   <ion-footer></ion-footer>
   <ion-grid></ion-grid>
   <ion-header></ion-header>
   <ion-popover></ion-popover>
   <ion-content>
-    <ion-refresher slot="fixed"></ion-refresher>
-    <ion-refresher-content pullingContent="lines"></ion-refresher-content>
     <ion-infinite-scroll></ion-infinite-scroll>
     <ion-infinite-scroll-content
       loadingSpinner="lines"
@@ -39,24 +34,16 @@
   <ion-label></ion-label>
   <ion-label style="font-weight: bold"></ion-label>
   <ion-list></ion-list>
-  <ion-loading></ion-loading>
   <ion-modal></ion-modal>
   <ion-menu-button></ion-menu-button>
   <ion-note></ion-note>
   <ion-progress-bar></ion-progress-bar>
-  <ion-radio></ion-radio>
   <ion-row></ion-row>
   <ion-searchbar></ion-searchbar>
-  <ion-segment></ion-segment>
-  <ion-segment-button></ion-segment-button>
-  <ion-select></ion-select>
-  <ion-select-option></ion-select-option>
   <ion-spinner name="lines"></ion-spinner>
   <ion-text></ion-text>
   <ion-text><strong>load bold font</strong></ion-text>
   <ion-title></ion-title>
-  <ion-toast></ion-toast>
-  <ion-toggle></ion-toggle>
   <ion-toolbar></ion-toolbar>
 
   <!-- images -->
@@ -66,10 +53,37 @@
   <img src="assets/img/icons/wifi-1.png" />
   <img src="assets/img/icons/wifi-2.png" />
   <img src="assets/img/icons/wifi-3.png" />
+
+  <!-- Taiga UI icons -->
+  <img *ngFor="let icon of taiga" src="assets/taiga-ui/icons/{{ icon }}.svg" />
+
+  <!-- Taiga UI components -->
+  <tui-input></tui-input>
+  <tui-input-time></tui-input-time>
+  <tui-input-date></tui-input-date>
+  <tui-input-date-time></tui-input-date-time>
+  <tui-input-files></tui-input-files>
+  <tui-input-number></tui-input-number>
+  <tui-text-area></tui-text-area>
+  <tui-select></tui-select>
+  <tui-multi-select></tui-multi-select>
+  <tui-tooltip></tui-tooltip>
+  <tui-toggle></tui-toggle>
+  <tui-radio-list></tui-radio-list>
+  <tui-error></tui-error>
+  <tui-svg></tui-svg>
+  <tui-icon></tui-icon>
+  <tui-expand></tui-expand>
+  <tui-elastic-container></tui-elastic-container>
+  <tui-scrollbar></tui-scrollbar>
+  <button tuiButton></button>
+  <button tuiLink></button>
+  <button tuiCell></button>
+  <progress tuiProgressBar></progress>
 </div>
 
+<!-- fonts -->
 <div style="visibility: hidden; height: 0">
-  <!-- fonts -->
   <p style="font-family: Montserrat">a</p>
   <p style="font-family: Montserrat; font-weight: bold">a</p>
   <p style="font-family: Montserrat; font-weight: 100">a</p>

web/projects/ui/src/app/app/preloader/preloader.component.ts

@@ -1,4 +1,10 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core'
+import {
+  ActionSheetController,
+  AlertController,
+  ModalController,
+  ToastController,
+} from '@ionic/angular'
 
 // TODO: Turn into DI token if this is needed someplace else too
 const ICONS = [
@@ -88,6 +94,26 @@ const ICONS = [
   'wifi',
 ]
 
+const TAIGA = [
+  'tuiIconPaintOutline',
+  'tuiIconTrash',
+  'tuiIconTrashOutline',
+  'tuiIconChevronDown',
+  'tuiIconChevronDownOutline',
+  'tuiIconRefreshCcw',
+  'tuiIconRefreshCcwOutline',
+  'tuiIconEye',
+  'tuiIconEyeOutline',
+  'tuiIconEyeOff',
+  'tuiIconEyeOffOutline',
+  'tuiIconPlus',
+  'tuiIconMinus',
+  'tuiIconCheck',
+  'tuiIconClose',
+  'tuiIconCalendarLarge',
+  'tuiIconHelpCircle',
+]
+
 @Component({
   selector: 'section[appPreloader]',
   templateUrl: 'preloader.component.html',
@@ -95,4 +121,12 @@ const ICONS = [
 })
 export class PreloaderComponent {
   readonly icons = ICONS
+  readonly taiga = TAIGA
+
+  constructor(
+    _modals: ModalController,
+    _alerts: AlertController,
+    _toasts: ToastController,
+    _actions: ActionSheetController,
+  ) {}
 }

web/projects/ui/src/app/app/preloader/preloader.module.ts

@@ -1,11 +1,65 @@
 import { CommonModule } from '@angular/common'
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'
 import { IonicModule } from '@ionic/angular'
+import {
+  TuiErrorModule,
+  TuiExpandModule,
+  TuiLinkModule,
+  TuiScrollbarModule,
+  TuiSvgModule,
+  TuiTooltipModule,
+} from '@taiga-ui/core'
+import {
+  TuiButtonModule,
+  TuiCellModule,
+  TuiIconModule,
+} from '@taiga-ui/experimental'
+import {
+  TuiElasticContainerModule,
+  TuiInputDateModule,
+  TuiInputDateTimeModule,
+  TuiInputFilesModule,
+  TuiInputModule,
+  TuiInputNumberModule,
+  TuiInputTimeModule,
+  TuiMultiSelectModule,
+  TuiProgressModule,
+  TuiRadioListModule,
+  TuiSelectModule,
+  TuiTextAreaModule,
+  TuiToggleModule,
+} from '@taiga-ui/kit'
 import { QrCodeModule } from 'ng-qrcode'
 import { PreloaderComponent } from './preloader.component'
 
 @NgModule({
-  imports: [CommonModule, IonicModule, QrCodeModule],
+  imports: [
+    CommonModule,
+    IonicModule,
+    QrCodeModule,
+    TuiTooltipModule,
+    TuiErrorModule,
+    TuiInputModule,
+    TuiSvgModule,
+    TuiIconModule,
+    TuiButtonModule,
+    TuiLinkModule,
+    TuiInputTimeModule,
+    TuiInputDateModule,
+    TuiInputDateTimeModule,
+    TuiInputFilesModule,
+    TuiMultiSelectModule,
+    TuiInputNumberModule,
+    TuiExpandModule,
+    TuiSelectModule,
+    TuiTextAreaModule,
+    TuiToggleModule,
+    TuiElasticContainerModule,
+    TuiCellModule,
+    TuiProgressModule,
+    TuiScrollbarModule,
+    TuiRadioListModule,
+  ],
   declarations: [PreloaderComponent],
   exports: [PreloaderComponent],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],

web/projects/ui/src/app/app/snek/snek.directive.ts

@@ -1,6 +1,6 @@
 import { Directive, HostListener, Input } from '@angular/core'
-import { LoadingController, ModalController } from '@ionic/angular'
-import { ErrorToastService } from '@start9labs/shared'
+import { ModalController } from '@ionic/angular'
+import { ErrorService, LoadingService } from '@start9labs/shared'
 import { SnakePage } from '../../modals/snake/snake.page'
 import { ApiService } from '../../services/api/embassy-api.service'
 
@@ -13,8 +13,8 @@ export class SnekDirective {
 
   constructor(
     private readonly modalCtrl: ModalController,
-    private readonly loadingCtrl: LoadingController,
-    private readonly errToast: ErrorToastService,
+    private readonly loader: LoadingService,
+    private readonly errorService: ErrorService,
     private readonly embassyApi: ApiService,
   ) {}
 
@@ -30,22 +30,17 @@ export class SnekDirective {
     modal.onDidDismiss().then(async ({ data }) => {
       if (data?.highScore <= (this.appSnekHighScore || 0)) return
 
-      const loader = await this.loadingCtrl.create({
-        message: 'Saving high score...',
-        backdropDismiss: true,
-      })
-
-      await loader.present()
+      const loader = this.loader.open('Saving high score...').subscribe()
 
       try {
         await this.embassyApi.setDbValue<number>(
-          ['gaming', 'snake', 'high-score'],
+          ['gaming', 'snake', 'highScore'],
           data.highScore,
         )
       } catch (e: any) {
-        this.errToast.present(e)
+        this.errorService.handleError(e)
       } finally {
-        this.loadingCtrl.dismiss()
+        this.loader.subscribe()
       }
     })
 

web/projects/ui/src/app/components/backup-drives/backup-drives.component.module.ts

@@ -10,7 +10,6 @@ import {
   UnitConversionPipesModule,
   TextSpinnerComponentModule,
 } from '@start9labs/shared'
-import { GenericFormPageModule } from 'src/app/modals/generic-form/generic-form.module'
 
 @NgModule({
   declarations: [
@@ -23,7 +22,6 @@ import { GenericFormPageModule } from 'src/app/modals/generic-form/generic-form.
     IonicModule,
     UnitConversionPipesModule,
     TextSpinnerComponentModule,
-    GenericFormPageModule,
   ],
   exports: [
     BackupDrivesComponent,

web/projects/ui/src/app/components/backup-drives/backup-drives.component.ts

@@ -1,21 +1,18 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core'
-import { BackupService } from './backup.service'
+import { ActionSheetController, AlertController } from '@ionic/angular'
+import { ErrorService, LoadingService } from '@start9labs/shared'
+import { CB } from '@start9labs/start-sdk'
 import {
   CifsBackupTarget,
   DiskBackupTarget,
   RR,
 } from 'src/app/services/api/api.types'
-import {
-  ActionSheetController,
-  AlertController,
-  LoadingController,
-  ModalController,
-} from '@ionic/angular'
-import { GenericFormPage } from 'src/app/modals/generic-form/generic-form.page'
-import { ConfigSpec } from 'src/app/pkg-config/config-types'
 import { ApiService } from 'src/app/services/api/embassy-api.service'
-import { ErrorToastService } from '@start9labs/shared'
+import { FormDialogService } from 'src/app/services/form-dialog.service'
 import { MappedBackupTarget } from 'src/app/types/mapped-backup-target'
+import { configBuilderToSpec } from 'src/app/util/configBuilderToSpec'
+import { FormComponent } from '../form.component'
+import { BackupService } from './backup.service'
 
 type BackupType = 'create' | 'restore'
 
@@ -32,13 +29,13 @@ export class BackupDrivesComponent {
   loadingText = ''
 
   constructor(
-    private readonly loadingCtrl: LoadingController,
+    private readonly loader: LoadingService,
     private readonly actionCtrl: ActionSheetController,
     private readonly alertCtrl: AlertController,
-    private readonly modalCtrl: ModalController,
     private readonly embassyApi: ApiService,
-    private readonly errToast: ErrorToastService,
+    private readonly errorService: ErrorService,
     private readonly backupService: BackupService,
+    private readonly formDialog: FormDialogService,
   ) {}
 
   get loading() {
@@ -87,23 +84,19 @@ export class BackupDrivesComponent {
   }
 
   async presentModalAddCifs(): Promise<void> {
-    const modal = await this.modalCtrl.create({
-      component: GenericFormPage,
-      componentProps: {
-        title: 'New Network Folder',
-        spec: CifsSpec,
+    this.formDialog.open(FormComponent, {
+      label: 'New Network Folder',
+      data: {
+        spec: await configBuilderToSpec(cifsSpec),
         buttons: [
           {
-            text: 'Connect',
-            handler: (value: RR.AddBackupTargetReq) => {
-              return this.addCifs(value)
-            },
-            isSubmit: true,
+            text: 'Execute',
+            handler: async (value: RR.AddBackupTargetReq) =>
+              this.addCifs(value),
           },
         ],
       },
     })
-    await modal.present()
   }
 
   async presentActionCifs(
@@ -151,10 +144,9 @@ export class BackupDrivesComponent {
   }
 
   private async addCifs(value: RR.AddBackupTargetReq): Promise<boolean> {
-    const loader = await this.loadingCtrl.create({
-      message: 'Testing connectivity to shared folder...',
-    })
-    await loader.present()
+    const loader = this.loader
+      .open('Testing connectivity to shared folder...')
+      .subscribe()
 
     try {
       const res = await this.embassyApi.addBackupTarget(value)
@@ -166,10 +158,10 @@ export class BackupDrivesComponent {
       })
       return true
     } catch (e: any) {
-      this.errToast.present(e)
+      this.errorService.handleError(e)
       return false
     } finally {
-      loader.dismiss()
+      loader.unsubscribe()
     }
   }
 
@@ -180,62 +172,57 @@ export class BackupDrivesComponent {
   ): Promise<void> {
     const { hostname, path, username } = entry
 
-    const modal = await this.modalCtrl.create({
-      component: GenericFormPage,
-      componentProps: {
-        title: 'Update Shared Folder',
-        spec: CifsSpec,
+    this.formDialog.open(FormComponent, {
+      label: 'Update Network Folder',
+      data: {
+        spec: await configBuilderToSpec(cifsSpec),
         buttons: [
           {
-            text: 'Save',
-            handler: (value: RR.AddBackupTargetReq) => {
-              return this.editCifs({ id, ...value }, index)
-            },
-            isSubmit: true,
+            text: 'Execute',
+            handler: async (value: RR.AddBackupTargetReq) =>
+              this.editCifs({ id, ...value }, index),
           },
         ],
-        initialValue: {
+        value: {
           hostname,
           path,
           username,
         },
       },
     })
-    await modal.present()
   }
 
   private async editCifs(
     value: RR.UpdateBackupTargetReq,
     index: number,
-  ): Promise<void> {
-    const loader = await this.loadingCtrl.create({
-      message: 'Testing connectivity to shared folder...',
-    })
-    await loader.present()
+  ): Promise<boolean> {
+    const loader = this.loader
+      .open('Testing connectivity to shared folder...')
+      .subscribe()
 
     try {
       const res = await this.embassyApi.updateBackupTarget(value)
       this.backupService.cifs[index].entry = Object.values(res)[0]
+
+      return true
     } catch (e: any) {
-      this.errToast.present(e)
+      this.errorService.handleError(e)
+      return false
     } finally {
-      loader.dismiss()
+      loader.unsubscribe()
     }
   }
 
   private async deleteCifs(id: string, index: number): Promise<void> {
-    const loader = await this.loadingCtrl.create({
-      message: 'Removing...',
-    })
-    await loader.present()
+    const loader = this.loader.open('Removing...').subscribe()
 
     try {
       await this.embassyApi.removeBackupTarget({ id })
       this.backupService.cifs.splice(index, 1)
     } catch (e: any) {
-      this.errToast.present(e)
+      this.errorService.handleError(e)
     } finally {
-      loader.dismiss()
+      loader.unsubscribe()
     }
   }
 
@@ -274,40 +261,33 @@ export class BackupDrivesStatusComponent {
   @Input() hasValidBackup!: boolean
 }
 
-const CifsSpec: ConfigSpec = {
-  hostname: {
-    type: 'string',
-    name: 'Hostname/IP',
+const cifsSpec = CB.Config.of({
+  hostname: CB.Value.text({
+    name: 'Hostname',
     description:
-      'The hostname or IP address of the target device on your Local Area Network.',
-    placeholder: `e.g. 'MyComputer.local' OR '192.168.1.4'`,
-    nullable: false,
-    masked: false,
-    copyable: false,
-  },
-  path: {
-    type: 'string',
+      'The hostname of your target device on the Local Area Network.',
+    warning: null,
+    placeholder: `e.g. 'My Computer' OR 'my-computer.local'`,
+    required: { default: null },
+    patterns: [],
+  }),
+  path: CB.Value.text({
     name: 'Path',
     description: `On Windows, this is the fully qualified path to the shared folder, (e.g. /Desktop/my-folder).\n\n On Linux and Mac, this is the literal name of the shared folder (e.g. my-shared-folder).`,
     placeholder: 'e.g. my-shared-folder or /Desktop/my-folder',
-    nullable: false,
-    masked: false,
-    copyable: false,
-  },
-  username: {
-    type: 'string',
+    required: { default: null },
+  }),
+  username: CB.Value.text({
     name: 'Username',
     description: `On Linux, this is the samba username you created when sharing the folder.\n\n On Mac and Windows, this is the username of the user who is sharing the folder.`,
-    nullable: false,
-    masked: false,
-    copyable: false,
-  },
-  password: {
-    type: 'string',
+    required: { default: null },
+    placeholder: 'My Network Folder',
+  }),
+  password: CB.Value.text({
     name: 'Password',
     description: `On Linux, this is the samba password you created when sharing the folder.\n\n On Mac and Windows, this is the password of the user who is sharing the folder.`,
-    nullable: true,
+    required: false,
     masked: true,
-    copyable: false,
-  },
-}
+    placeholder: 'My Network Folder',
+  }),
+})

web/projects/ui/src/app/components/form-object/form-label.component.html

@@ -1,16 +0,0 @@
-<ion-button
-  *ngIf="data.description"
-  class="slot-start"
-  fill="clear"
-  (click)="presentAlertDescription($event)"
->
-  <ion-icon name="help-circle-outline" slot="icon-only" size="small"></ion-icon>
-</ion-button>
-
-<span>{{ data.name }}</span>
-
-<ion-text color="success" *ngIf="data.new">&nbsp;(New)</ion-text>
-<ion-text color="success" *ngIf="data.newOptions">&nbsp;(New Options)</ion-text>
-<ion-text color="warning" *ngIf="data.edited">&nbsp;(Edited)</ion-text>
-
-<span *ngIf="data.required">&nbsp;*</span>

web/projects/ui/src/app/components/form-object/form-object.component.html

@@ -1,372 +0,0 @@
-<ion-item-group [formGroup]="formGroup">
-  <div *ngFor="let entry of formGroup.controls | keyvalue: asIsOrder">
-    <div *ngIf="objectSpec[entry.key] as spec">
-      <!-- string or number -->
-      <ng-container *ngIf="spec.type === 'string' || spec.type === 'number'">
-        <!-- label -->
-        <h4 class="input-label">
-          <form-label
-            [data]="{
-              name: spec.name,
-              description: spec.description,
-              new: original?.[entry.key] === undefined,
-              edited: entry.value.dirty,
-              required: !spec.nullable
-            }"
-          ></form-label>
-        </h4>
-        <ion-item [color]="(theme$ | async) === 'Light' ? 'light' : 'dark'">
-          <ion-textarea
-            *ngIf="spec.type === 'string' && spec.textarea; else notTextArea"
-            [placeholder]="spec.placeholder || 'Enter ' + spec.name"
-            [formControlName]="entry.key"
-            (ionFocus)="presentAlertChangeWarning(entry.key, spec)"
-            (ionChange)="handleInputChange()"
-          ></ion-textarea>
-          <ng-template #notTextArea>
-            <ion-input
-              type="text"
-              [inputmode]="spec.type === 'number' ? 'tel' : 'text'"
-              [class.redacted]="
-                spec.type === 'string' &&
-                entry.value.value &&
-                spec.masked &&
-                !unmasked[entry.key]
-              "
-              [placeholder]="spec.placeholder || 'Enter ' + spec.name"
-              [formControlName]="entry.key"
-              (ionFocus)="presentAlertChangeWarning(entry.key, spec)"
-              (ionChange)="handleInputChange()"
-            ></ion-input>
-          </ng-template>
-          <ion-button
-            *ngIf="spec.type === 'string' && spec.masked"
-            slot="end"
-            fill="clear"
-            color="light"
-            (click)="unmasked[entry.key] = !unmasked[entry.key]"
-          >
-            <ion-icon
-              slot="icon-only"
-              [name]="unmasked[entry.key] ? 'eye-off-outline' : 'eye-outline'"
-              size="small"
-            ></ion-icon>
-          </ion-button>
-          <ion-note
-            *ngIf="spec.type === 'number' && spec.units"
-            slot="end"
-            color="light"
-            style="font-size: medium"
-          >
-            {{ spec.units }}
-          </ion-note>
-        </ion-item>
-        <p class="error-message">
-          <span *ngIf="(formGroup | getControl: entry.key).errors as errors">
-            {{ errors | getError: $any(spec)['pattern-description'] }}
-          </span>
-        </p>
-      </ng-container>
-      <!-- boolean or enum -->
-      <ion-item
-        *ngIf="spec.type === 'boolean' || spec.type === 'enum'"
-        style="--padding-start: 0"
-      >
-        <ion-button
-          *ngIf="spec.description"
-          fill="clear"
-          (click)="presentAlertBoolEnumDescription($event, spec)"
-          style="--padding-start: 0"
-        >
-          <ion-icon
-            name="help-circle-outline"
-            slot="icon-only"
-            size="small"
-          ></ion-icon>
-        </ion-button>
-        <ion-label>
-          <b>
-            {{ spec.name }}
-            <ion-text
-              *ngIf="original?.[entry.key] === undefined"
-              color="success"
-            >
-              (New)
-            </ion-text>
-            <ion-text *ngIf="entry.value.dirty" color="warning">
-              (Edited)
-            </ion-text>
-          </b>
-        </ion-label>
-        <!-- boolean -->
-        <ion-toggle
-          *ngIf="spec.type === 'boolean'"
-          slot="end"
-          [formControlName]="entry.key"
-          (ionChange)="handleBooleanChange(entry.key, spec)"
-        ></ion-toggle>
-        <!-- enum -->
-        <!-- class enter-click disables the enter click on the modal behind the select -->
-        <ion-select
-          *ngIf="spec.type === 'enum' && formGroup.get(entry.key) as control"
-          [interfaceOptions]="{
-            message: spec.warning | toWarningText,
-            cssClass: 'enter-click'
-          }"
-          slot="end"
-          placeholder="Select"
-          [formControlName]="entry.key"
-          [selectedText]="spec['value-names'][control.value]"
-        >
-          <ion-select-option
-            *ngFor="let option of spec.values"
-            [value]="option"
-          >
-            {{ spec['value-names'][option] }}
-          </ion-select-option>
-        </ion-select>
-      </ion-item>
-      <!-- object -->
-      <ng-container *ngIf="spec.type === 'object'">
-        <!-- label -->
-        <ion-item-divider
-          (click)="toggleExpandObject(entry.key)"
-          style="cursor: pointer"
-          [class.error-border]="entry.value.invalid"
-        >
-          <form-label
-            [data]="{
-              name: spec.name,
-              description: spec.description,
-              new: original?.[entry.key] === undefined,
-              edited: entry.value.dirty,
-              newOptions: objectDisplay[entry.key].hasNewOptions
-            }"
-          ></form-label>
-          <ion-icon
-            slot="end"
-            name="chevron-up"
-            [color]="entry.value.invalid ? 'danger' : undefined"
-            [ngStyle]="{
-              transform: objectDisplay[entry.key].expanded
-                ? 'rotate(0deg)'
-                : 'rotate(180deg)',
-              transition: 'transform 0.42s ease-out'
-            }"
-          ></ion-icon>
-        </ion-item-divider>
-        <!-- body -->
-        <tui-expand
-          [expanded]="objectDisplay[entry.key].expanded"
-          [id]="objectId | toElementId: entry.key"
-        >
-          <div class="nested-wrapper">
-            <form-object
-              [objectSpec]="spec.spec"
-              [formGroup]="$any(entry.value)"
-              [current]="current?.[entry.key]"
-              [original]="original?.[entry.key]"
-              (hasNewOptions)="setHasNew(entry.key)"
-            ></form-object>
-          </div>
-        </tui-expand>
-      </ng-container>
-      <!-- union -->
-      <form-union
-        *ngIf="spec.type === 'union'"
-        [spec]="spec"
-        [formGroup]="$any(entry.value)"
-        [current]="current?.[entry.key]"
-        [original]="original?.[entry.key]"
-      ></form-union>
-      <!-- list (not enum) -->
-      <ng-container *ngIf="spec.type === 'list' && spec.subtype !== 'enum'">
-        <ng-container
-          *ngIf="formGroup.get(entry.key) as formArr"
-          [formArrayName]="entry.key"
-        >
-          <!-- label -->
-          <ion-item-divider [class.error-border]="entry.value.invalid">
-            <form-label
-              [data]="{
-                name: spec.name,
-                description: spec.description,
-                new: original?.[entry.key] === undefined,
-                edited: entry.value.dirty,
-                required: !!(spec.range | toRange).min
-              }"
-            ></form-label>
-            <ion-button
-              strong
-              fill="clear"
-              color="dark"
-              slot="end"
-              (click)="addListItemWrapper(entry.key, spec)"
-            >
-              <ion-icon slot="start" name="add"></ion-icon>
-              Add
-            </ion-button>
-          </ion-item-divider>
-          <p class="error-message" style="margin-bottom: 8px">
-            <span *ngIf="(formGroup | getControl: entry.key).errors as errors">
-              {{ errors | getError }}
-            </span>
-          </p>
-          <!-- body -->
-          <div class="nested-wrapper">
-            <div
-              *ngFor="
-                let abstractControl of $any(formArr).controls;
-                let i = index
-              "
-            >
-              <!-- object or union -->
-              <ng-container
-                *ngIf="spec.subtype === 'object' || spec.subtype === 'union'"
-              >
-                <!-- object/union label -->
-                <ion-item
-                  button
-                  (click)="toggleExpandListObject(entry.key, i)"
-                  [class.error-border]="abstractControl.invalid"
-                >
-                  <form-label
-                    [data]="{
-                      name:
-                        objectListDisplay[entry.key][i].displayAs ||
-                        'Entry ' + (i + 1),
-                      new: false,
-                      edited: abstractControl.dirty
-                    }"
-                  ></form-label>
-                  <ion-icon
-                    slot="end"
-                    name="chevron-up"
-                    [color]="abstractControl.invalid ? 'danger' : undefined"
-                    [ngStyle]="{
-                      transform: objectListDisplay[entry.key][i].expanded
-                        ? 'rotate(0deg)'
-                        : 'rotate(180deg)',
-                      transition: 'transform 0.42s ease-out'
-                    }"
-                  ></ion-icon>
-                </ion-item>
-                <!-- object/union body -->
-                <tui-expand
-                  style="padding-left: 24px"
-                  [expanded]="objectListDisplay[entry.key][i].expanded"
-                  [id]="objectId | toElementId: entry.key:i"
-                >
-                  <form-object
-                    *ngIf="spec.subtype === 'object'"
-                    [objectSpec]="$any(spec.spec).spec"
-                    [formGroup]="abstractControl"
-                    [current]="current?.[entry.key]?.[i]"
-                    [original]="original?.[entry.key]?.[i]"
-                    (onInputChange)="
-                      updateLabel(entry.key, i, $any(spec.spec)['display-as'])
-                    "
-                  ></form-object>
-                  <form-union
-                    *ngIf="spec.subtype === 'union'"
-                    [spec]="$any(spec.spec)"
-                    [formGroup]="abstractControl"
-                    [current]="current?.[entry.key]?.[i]"
-                    [original]="original?.[entry.key]?.[i]"
-                    (onInputChange)="
-                      updateLabel(entry.key, i, $any(spec.spec)['display-as'])
-                    "
-                  ></form-union>
-                  <div style="text-align: right; padding-top: 12px">
-                    <ion-button
-                      fill="clear"
-                      (click)="presentAlertDelete(entry.key, i)"
-                      color="danger"
-                    >
-                      <ion-icon slot="start" name="close"></ion-icon>
-                      Delete
-                    </ion-button>
-                  </div>
-                </tui-expand>
-              </ng-container>
-              <!-- string or number -->
-              <div
-                *ngIf="spec.subtype === 'string' || spec.subtype === 'number'"
-                [id]="objectId | toElementId: entry.key:i"
-              >
-                <ion-item
-                  [color]="(theme$ | async) === 'Light' ? 'light' : 'dark'"
-                >
-                  <ion-input
-                    type="text"
-                    [inputmode]="spec.subtype === 'number' ? 'tel' : 'text'"
-                    [placeholder]="
-                      $any(spec.spec).placeholder || 'Enter ' + spec.name
-                    "
-                    [formControlName]="i"
-                  ></ion-input>
-                  <ion-button
-                    strong
-                    fill="clear"
-                    slot="end"
-                    color="danger"
-                    (click)="presentAlertDelete(entry.key, i)"
-                  >
-                    <ion-icon slot="icon-only" name="close"></ion-icon>
-                  </ion-button>
-                </ion-item>
-                <p class="error-message">
-                  <span
-                    *ngIf="
-                      (formGroup | getControl: entry.key:i).errors as errors
-                    "
-                  >
-                    {{ errors | getError: $any(spec)['pattern-description'] }}
-                  </span>
-                </p>
-              </div>
-            </div>
-          </div>
-        </ng-container>
-      </ng-container>
-      <!-- list (enum) -->
-      <ng-container *ngIf="spec.type === 'list' && spec.subtype === 'enum'">
-        <ng-container
-          *ngIf="formGroup.get(entry.key) as formArr"
-          [formArrayName]="entry.key"
-        >
-          <!-- label -->
-          <p class="input-label">
-            <form-label
-              [data]="{
-                name: spec.name,
-                description: spec.description,
-                new: original?.[entry.key] === undefined,
-                edited: entry.value.dirty
-              }"
-            ></form-label>
-          </p>
-          <!-- list -->
-          <ion-item
-            button
-            detail="false"
-            color="dark"
-            (click)="presentModalEnumList(entry.key, $any(spec), formArr.value)"
-          >
-            <ion-label style="white-space: nowrap !important">
-              <h2>{{ formArr.value | toEnumListDisplay: $any(spec.spec) }}</h2>
-            </ion-label>
-            <ion-button slot="end" fill="clear" color="light">
-              <ion-icon slot="icon-only" name="chevron-down"></ion-icon>
-            </ion-button>
-          </ion-item>
-          <p class="error-message">
-            <span *ngIf="(formGroup | getControl: entry.key).errors as errors">
-              {{ errors | getError }}
-            </span>
-          </p>
-        </ng-container>
-      </ng-container>
-    </div>
-  </div>
-</ion-item-group>

web/projects/ui/src/app/components/form-object/form-object.component.module.ts

@@ -1,47 +0,0 @@
-import { NgModule } from '@angular/core'
-import { CommonModule } from '@angular/common'
-import {
-  FormObjectComponent,
-  FormUnionComponent,
-  FormLabelComponent,
-} from './form-object.component'
-import {
-  GetErrorPipe,
-  ToWarningTextPipe,
-  ToElementIdPipe,
-  GetControlPipe,
-  ToEnumListDisplayPipe,
-  ToRangePipe,
-} from './form-object.pipes'
-import { IonicModule } from '@ionic/angular'
-import { FormsModule, ReactiveFormsModule } from '@angular/forms'
-import { SharedPipesModule } from '@start9labs/shared'
-import { TuiElasticContainerModule } from '@taiga-ui/kit'
-import { EnumListPageModule } from 'src/app/modals/enum-list/enum-list.module'
-import { TuiExpandModule } from '@taiga-ui/core'
-
-@NgModule({
-  declarations: [
-    FormObjectComponent,
-    FormUnionComponent,
-    FormLabelComponent,
-    ToWarningTextPipe,
-    GetErrorPipe,
-    ToEnumListDisplayPipe,
-    ToElementIdPipe,
-    GetControlPipe,
-    ToRangePipe,
-  ],
-  imports: [
-    CommonModule,
-    IonicModule,
-    FormsModule,
-    ReactiveFormsModule,
-    SharedPipesModule,
-    EnumListPageModule,
-    TuiElasticContainerModule,
-    TuiExpandModule,
-  ],
-  exports: [FormObjectComponent, FormLabelComponent],
-})
-export class FormObjectComponentModule {}

web/projects/ui/src/app/components/form-object/form-object.component.scss

@@ -1,42 +0,0 @@
-.slot-start {
-  display: inline-block;
-  vertical-align: middle;
-  --padding-start: 0;
-  --padding-end: 7px;
-}
-
-.error-border {
-  border-color: var(--ion-color-danger-shade);
-  --border-color: var(--ion-color-danger-shade);
-}
-
-.redacted {
-  font-family: 'Redacted'
-}
-
-ion-input {
-  font-family: 'Courier New';
-  font-weight: bold;
-  --placeholder-font-weight: 400;
-}
-
-ion-item-divider {
-  text-transform: unset;
-  --padding-top: 18px;
-  --padding-start: 0;
-  border-bottom: 1px solid var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-150, rgba(0, 0, 0, 0.13))))
-}
-
-.nested-wrapper {
-  padding: 0 0 16px 24px;
-}
-
-.error-message {
-  margin-top: 2px;
-  font-size: small;
-  color: var(--ion-color-danger);
-}
-
-.indent {
-  margin-left: 24px;
-}

web/projects/ui/src/app/components/form-object/form-object.component.ts

@@ -1,425 +0,0 @@
-import {
-  Component,
-  Input,
-  Output,
-  EventEmitter,
-  ChangeDetectionStrategy,
-  Inject,
-  inject,
-  SimpleChanges,
-} from '@angular/core'
-import { FormArray, UntypedFormArray, UntypedFormGroup } from '@angular/forms'
-import { AlertButton, AlertController, ModalController } from '@ionic/angular'
-import {
-  ConfigSpec,
-  ListValueSpecOf,
-  ValueSpec,
-  ValueSpecBoolean,
-  ValueSpecEnum,
-  ValueSpecList,
-  ValueSpecListOf,
-  ValueSpecUnion,
-} from 'src/app/pkg-config/config-types'
-import { FormService } from 'src/app/services/form.service'
-import { EnumListPage } from 'src/app/modals/enum-list/enum-list.page'
-import { THEME, pauseFor } from '@start9labs/shared'
-import { v4 } from 'uuid'
-import { DOCUMENT } from '@angular/common'
-
-const Mustache = require('mustache')
-
-interface Config {
-  [key: string]: any
-}
-@Component({
-  selector: 'form-object',
-  templateUrl: './form-object.component.html',
-  styleUrls: ['./form-object.component.scss'],
-})
-export class FormObjectComponent {
-  @Input() objectSpec!: ConfigSpec
-  @Input() formGroup!: UntypedFormGroup
-  @Input() current?: Config
-  @Input() original?: Config
-  @Output() onInputChange = new EventEmitter<void>()
-  @Output() hasNewOptions = new EventEmitter<void>()
-  warningAck: { [key: string]: boolean } = {}
-  unmasked: { [key: string]: boolean } = {}
-  objectDisplay: {
-    [key: string]: { expanded: boolean; hasNewOptions: boolean }
-  } = {}
-  objectListDisplay: {
-    [key: string]: { expanded: boolean; displayAs: string }[]
-  } = {}
-  objectId = v4()
-
-  readonly theme$ = inject(THEME)
-
-  constructor(
-    private readonly alertCtrl: AlertController,
-    private readonly modalCtrl: ModalController,
-    private readonly formService: FormService,
-    @Inject(DOCUMENT) private readonly document: Document,
-  ) {}
-
-  ngOnInit() {
-    this.setDisplays()
-
-    // setTimeout hack to avoid ExpressionChangedAfterItHasBeenCheckedError
-    setTimeout(() => {
-      if (
-        this.original &&
-        Object.keys(this.current || {}).some(
-          key => this.original![key] === undefined,
-        )
-      )
-        this.hasNewOptions.emit()
-    })
-  }
-
-  ngOnChanges(changes: SimpleChanges) {
-    const specChanges = changes['objectSpec']
-
-    if (!specChanges) return
-
-    if (
-      !specChanges.firstChange &&
-      Object.keys({
-        ...specChanges.previousValue,
-        ...specChanges.currentValue,
-      }).length !== Object.keys(specChanges.previousValue).length
-    ) {
-      this.setDisplays()
-    }
-  }
-
-  private setDisplays() {
-    Object.keys(this.objectSpec).forEach(key => {
-      const spec = this.objectSpec[key]
-
-      if (spec.type === 'list' && ['object', 'union'].includes(spec.subtype)) {
-        this.objectListDisplay[key] = []
-        this.formGroup.get(key)?.value.forEach((obj: any, index: number) => {
-          const displayAs = (spec.spec as ListValueSpecOf<'object'>)[
-            'display-as'
-          ]
-          this.objectListDisplay[key][index] = {
-            expanded: false,
-            displayAs: displayAs
-              ? (Mustache as any).render(displayAs, obj)
-              : '',
-          }
-        })
-      } else if (spec.type === 'object') {
-        this.objectDisplay[key] = {
-          expanded: false,
-          hasNewOptions: false,
-        }
-      }
-    })
-  }
-
-  addListItemWrapper<T extends ValueSpec>(
-    key: string,
-    spec: T extends ValueSpecUnion ? never : T,
-  ) {
-    this.presentAlertChangeWarning(key, spec, () => this.addListItem(key))
-  }
-
-  toggleExpandObject(key: string) {
-    this.objectDisplay[key].expanded = !this.objectDisplay[key].expanded
-  }
-
-  toggleExpandListObject(key: string, i: number) {
-    this.objectListDisplay[key][i].expanded =
-      !this.objectListDisplay[key][i].expanded
-  }
-
-  updateLabel(key: string, i: number, displayAs: string) {
-    this.objectListDisplay[key][i].displayAs = displayAs
-      ? Mustache.render(displayAs, this.formGroup.get(key)?.value[i])
-      : ''
-  }
-
-  handleInputChange() {
-    this.onInputChange.emit()
-  }
-
-  setHasNew(key: string) {
-    this.hasNewOptions.emit()
-    setTimeout(() => {
-      this.objectDisplay[key].hasNewOptions = true
-    }, 100)
-  }
-
-  handleBooleanChange(key: string, spec: ValueSpecBoolean) {
-    if (spec.warning) {
-      const current = this.formGroup.get(key)?.value
-      const cancelFn = () => this.formGroup.get(key)?.setValue(!current)
-      this.presentAlertChangeWarning(key, spec, undefined, cancelFn)
-    }
-  }
-
-  async presentModalEnumList(
-    key: string,
-    spec: ValueSpecListOf<'enum'>,
-    current: string[],
-  ) {
-    const modal = await this.modalCtrl.create({
-      componentProps: {
-        key,
-        spec,
-        current,
-      },
-      component: EnumListPage,
-    })
-
-    modal.onWillDismiss<string[]>().then(({ data }) => {
-      if (!data) return
-      this.updateEnumList(key, current, data)
-    })
-
-    await modal.present()
-  }
-
-  async presentAlertChangeWarning<T extends ValueSpec>(
-    key: string,
-    spec: T extends ValueSpecUnion ? never : T,
-    okFn?: Function,
-    cancelFn?: Function,
-  ) {
-    if (!spec.warning || this.warningAck[key]) return okFn ? okFn() : null
-    this.warningAck[key] = true
-
-    const buttons: AlertButton[] = [
-      {
-        text: 'Ok',
-        handler: () => {
-          if (okFn) okFn()
-        },
-        cssClass: 'enter-click',
-      },
-    ]
-
-    if (okFn || cancelFn) {
-      buttons.unshift({
-        text: 'Cancel',
-        handler: () => {
-          if (cancelFn) cancelFn()
-        },
-      })
-    }
-
-    const alert = await this.alertCtrl.create({
-      header: 'Warning',
-      subHeader: `Editing ${spec.name} has consequences:`,
-      message: spec.warning,
-      buttons,
-    })
-    await alert.present()
-  }
-
-  async presentAlertDelete(key: string, index: number) {
-    const alert = await this.alertCtrl.create({
-      header: 'Confirm',
-      message: 'Are you sure you want to delete this entry?',
-      buttons: [
-        {
-          text: 'Cancel',
-          role: 'cancel',
-        },
-        {
-          text: 'Delete',
-          handler: () => {
-            this.deleteListItem(key, index)
-          },
-          cssClass: 'enter-click',
-        },
-      ],
-    })
-    await alert.present()
-  }
-
-  async presentAlertBoolEnumDescription(
-    event: Event,
-    spec: ValueSpecBoolean | ValueSpecEnum,
-  ) {
-    event.stopPropagation()
-    const { name, description } = spec
-
-    const alert = await this.alertCtrl.create({
-      header: name,
-      message: description,
-      buttons: [
-        {
-          text: 'OK',
-          cssClass: 'enter-click',
-        },
-      ],
-    })
-    await alert.present()
-  }
-
-  private addListItem(key: string): void {
-    const arr = this.formGroup.get(key) as UntypedFormArray
-    const listSpec = this.objectSpec[key] as ValueSpecList
-    const newItem = this.formService.getListItem(listSpec, undefined)!
-
-    const index = arr.length
-    arr.insert(index, newItem)
-
-    if (['object', 'union'].includes(listSpec.subtype)) {
-      const displayAs = (listSpec.spec as ListValueSpecOf<'object'>)[
-        'display-as'
-      ]
-      this.objectListDisplay[key].push({
-        expanded: false,
-        displayAs: displayAs ? Mustache.render(displayAs, newItem.value) : '',
-      })
-    }
-
-    setTimeout(() => {
-      const element = this.document.getElementById(
-        getElementId(this.objectId, key, index),
-      )
-      element?.parentElement?.scrollIntoView({ behavior: 'smooth' })
-
-      if (['object', 'union'].includes(listSpec.subtype)) {
-        pauseFor(250).then(() => this.toggleExpandListObject(key, index))
-      }
-    }, 100)
-
-    arr.markAsDirty()
-  }
-
-  private deleteListItem(key: string, index: number, markDirty = true): void {
-    // if (this.objectListDisplay[key])
-    //   this.objectListDisplay[key][index].height = '0px'
-    const arr = this.formGroup.get(key) as UntypedFormArray
-    if (markDirty) arr.markAsDirty()
-    pauseFor(250).then(() => {
-      if (this.objectListDisplay[key])
-        this.objectListDisplay[key].splice(index, 1)
-      arr.removeAt(index)
-    })
-  }
-
-  private updateEnumList(key: string, current: string[], updated: string[]) {
-    const arr = this.formGroup.get(key) as FormArray
-
-    for (let i = current.length - 1; i >= 0; i--) {
-      if (!updated.includes(current[i])) {
-        arr.removeAt(i)
-      }
-    }
-
-    const listSpec = this.objectSpec[key] as ValueSpecList
-
-    updated.forEach(val => {
-      if (!current.includes(val)) {
-        const newItem = this.formService.getListItem(listSpec, val)!
-        arr.insert(arr.length, newItem)
-      }
-    })
-
-    arr.markAsDirty()
-  }
-
-  asIsOrder() {
-    return 0
-  }
-}
-
-@Component({
-  selector: 'form-union',
-  templateUrl: './form-union.component.html',
-  styleUrls: ['./form-object.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class FormUnionComponent {
-  @Input() formGroup!: UntypedFormGroup
-  @Input() spec!: ValueSpecUnion
-  @Input() current?: Config
-  @Input() original?: Config
-
-  get unionValue() {
-    return this.formGroup.get(this.spec.tag.id)?.value
-  }
-
-  get isNew() {
-    return !this.original
-  }
-
-  get hasNewOptions() {
-    const tagId = this.spec.tag.id
-    return (
-      this.original?.[tagId] === this.current?.[tagId] &&
-      !!Object.keys(this.current || {}).find(
-        key => this.original![key] === undefined,
-      )
-    )
-  }
-
-  objectId = v4()
-
-  constructor(private readonly formService: FormService) {}
-
-  updateUnion(e: any): void {
-    const tagId = this.spec.tag.id
-
-    Object.keys(this.formGroup.controls).forEach(control => {
-      if (control === tagId) return
-      this.formGroup.removeControl(control)
-    })
-
-    const unionGroup = this.formService.getUnionObject(
-      this.spec as ValueSpecUnion,
-      e.detail.value,
-    )
-
-    Object.keys(unionGroup.controls).forEach(control => {
-      if (control === tagId) return
-      this.formGroup.addControl(control, unionGroup.controls[control])
-    })
-  }
-}
-
-@Component({
-  selector: 'form-label',
-  templateUrl: './form-label.component.html',
-  styleUrls: ['./form-object.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class FormLabelComponent {
-  @Input() data!: {
-    name: string
-    new: boolean
-    edited: boolean
-    description?: string
-    required?: boolean
-    newOptions?: boolean
-  }
-
-  constructor(private readonly alertCtrl: AlertController) {}
-
-  async presentAlertDescription(event: Event) {
-    event.stopPropagation()
-    const { name, description } = this.data
-
-    const alert = await this.alertCtrl.create({
-      header: name,
-      message: description,
-      buttons: [
-        {
-          text: 'OK',
-          cssClass: 'enter-click',
-        },
-      ],
-    })
-    await alert.present()
-  }
-}
-
-export function getElementId(objectId: string, key: string, index = 0): string {
-  return `${key}-${index}-${objectId}`
-}

web/projects/ui/src/app/components/form-object/form-object.pipes.ts

@@ -1,92 +0,0 @@
-import { Pipe, PipeTransform } from '@angular/core'
-import {
-  AbstractControl,
-  FormGroup,
-  UntypedFormArray,
-  ValidationErrors,
-} from '@angular/forms'
-import { IonicSafeString } from '@ionic/angular'
-import { ListValueSpecOf } from 'src/app/pkg-config/config-types'
-import { Range } from 'src/app/pkg-config/config-utilities'
-import { getElementId } from './form-object.component'
-
-@Pipe({
-  name: 'getError',
-})
-export class GetErrorPipe implements PipeTransform {
-  transform(errors: ValidationErrors, patternDesc?: string): string {
-    if (errors['required']) {
-      return 'Required'
-    } else if (errors['pattern']) {
-      return patternDesc || 'Invalid pattern'
-    } else if (errors['notNumber']) {
-      return 'Must be a number'
-    } else if (errors['numberNotInteger']) {
-      return 'Must be an integer'
-    } else if (errors['numberNotInRange']) {
-      return errors['numberNotInRange'].value
-    } else if (errors['listNotUnique']) {
-      return errors['listNotUnique'].value
-    } else if (errors['listNotInRange']) {
-      return errors['listNotInRange'].value
-    } else if (errors['listItemIssue']) {
-      return errors['listItemIssue'].value
-    } else {
-      return 'Unknown error'
-    }
-  }
-}
-
-@Pipe({
-  name: 'toEnumListDisplay',
-})
-export class ToEnumListDisplayPipe implements PipeTransform {
-  transform(arr: string[], spec: ListValueSpecOf<'enum'>): string {
-    return arr.map((v: string) => spec['value-names'][v]).join(', ')
-  }
-}
-
-@Pipe({
-  name: 'toWarningText',
-})
-export class ToWarningTextPipe implements PipeTransform {
-  transform(text?: string): IonicSafeString | string {
-    return text
-      ? new IonicSafeString(`<ion-text color="warning">${text}</ion-text>`)
-      : ''
-  }
-}
-
-@Pipe({
-  name: 'toRange',
-})
-export class ToRangePipe implements PipeTransform {
-  transform(range: string): Range {
-    return Range.from(range)
-  }
-}
-
-@Pipe({
-  name: 'toElementId',
-})
-export class ToElementIdPipe implements PipeTransform {
-  transform(objectId: string, key: string, index = 0): string {
-    return getElementId(objectId, key, index)
-  }
-}
-
-@Pipe({
-  name: 'getControl',
-})
-export class GetControlPipe implements PipeTransform {
-  transform(
-    formGroup: FormGroup,
-    key: string,
-    index?: number,
-  ): AbstractControl {
-    const abstractControl = formGroup.get(key)!
-    if (index !== undefined)
-      return (abstractControl as UntypedFormArray).at(index)
-    return abstractControl
-  }
-}

web/projects/ui/src/app/components/form-object/form-union.component.html

@@ -1,42 +0,0 @@
-<div [formGroup]="formGroup">
-  <!-- union enum -->
-  <ion-item-divider [class.error-border]="formGroup.invalid">
-    <form-label
-      [data]="{
-        name: spec.tag.name,
-        description: spec.tag.description,
-        new: isNew,
-        newOptions: hasNewOptions,
-        edited: formGroup.dirty
-      }"
-    ></form-label>
-    <!-- class enter-click disables the enter click on the modal behind the select -->
-    <ion-select
-      [interfaceOptions]="{
-        message: spec.tag.warning | toWarningText,
-        cssClass: 'enter-click'
-      }"
-      slot="end"
-      placeholder="Select"
-      [formControlName]="spec.tag.id"
-      [selectedText]="spec.tag['variant-names'][unionValue]"
-      (ionChange)="updateUnion($event)"
-    >
-      <ion-select-option
-        *ngFor="let option of spec.variants | keyvalue"
-        [value]="option.key"
-      >
-        {{ spec.tag['variant-names'][option.key] }}
-      </ion-select-option>
-    </ion-select>
-  </ion-item-divider>
-
-  <tui-elastic-container [id]="objectId | toElementId: 'union'" class="indent">
-    <form-object
-      [objectSpec]="spec.variants[unionValue]"
-      [formGroup]="formGroup"
-      [current]="current"
-      [original]="original"
-    ></form-object>
-  </tui-elastic-container>
-</div>

web/projects/ui/src/app/components/form.component.ts

@@ -0,0 +1,167 @@
+import { CommonModule } from '@angular/common'
+import {
+  ChangeDetectionStrategy,
+  Component,
+  inject,
+  Input,
+  OnInit,
+} from '@angular/core'
+import { FormGroup, ReactiveFormsModule } from '@angular/forms'
+import { RouterModule } from '@angular/router'
+import { CT } from '@start9labs/start-sdk'
+
+import {
+  tuiMarkControlAsTouchedAndValidate,
+  TuiValueChangesModule,
+} from '@taiga-ui/cdk'
+import { TuiDialogContext, TuiModeModule } from '@taiga-ui/core'
+import { TuiButtonModule } from '@taiga-ui/experimental'
+import { TuiDialogFormService } from '@taiga-ui/kit'
+import { POLYMORPHEUS_CONTEXT } from '@tinkoff/ng-polymorpheus'
+import { compare, Operation } from 'fast-json-patch'
+import { FormModule } from 'src/app/components/form/form.module'
+import { InvalidService } from 'src/app/components/form/invalid.service'
+import { FormService } from 'src/app/services/form.service'
+
+export interface ActionButton<T> {
+  text: string
+  handler?: (value: T) => Promise<boolean | void> | void
+  link?: string
+}
+
+export interface FormContext<T> {
+  spec: CT.InputSpec
+  buttons: ActionButton<T>[]
+  value?: T
+  patch?: Operation[]
+}
+
+@Component({
+  standalone: true,
+  selector: 'app-form',
+  template: `
+    <form
+      [formGroup]="form"
+      (submit.capture.prevent)="(0)"
+      (reset.capture.prevent.stop)="onReset()"
+      (tuiValueChanges)="markAsDirty()"
+    >
+      <form-group [spec]="spec"></form-group>
+      <footer tuiMode="onDark">
+        <ng-content></ng-content>
+        <ng-container *ngFor="let button of buttons; let last = last">
+          <button
+            *ngIf="button.handler; else link"
+            tuiButton
+            [appearance]="last ? 'primary' : 'flat'"
+            [type]="last ? 'submit' : 'button'"
+            (click)="onClick(button.handler)"
+          >
+            {{ button.text }}
+          </button>
+          <ng-template #link>
+            <a
+              tuiButton
+              appearance="flat"
+              [routerLink]="button.link"
+              (click)="close()"
+            >
+              {{ button.text }}
+            </a>
+          </ng-template>
+        </ng-container>
+      </footer>
+    </form>
+  `,
+  styles: [
+    `
+      footer {
+        position: sticky;
+        bottom: 0;
+        z-index: 10;
+        display: flex;
+        justify-content: flex-end;
+        padding: 1rem 0;
+        margin: 1rem 0 -1rem;
+        gap: 1rem;
+        background: var(--tui-elevation-01);
+        border-top: 1px solid var(--tui-base-02);
+      }
+    `,
+  ],
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    RouterModule,
+    TuiValueChangesModule,
+    TuiButtonModule,
+    TuiModeModule,
+    FormModule,
+  ],
+  providers: [InvalidService],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FormComponent<T extends Record<string, any>> implements OnInit {
+  private readonly dialogFormService = inject(TuiDialogFormService)
+  private readonly formService = inject(FormService)
+  private readonly invalidService = inject(InvalidService)
+  private readonly context = inject<TuiDialogContext<void, FormContext<T>>>(
+    POLYMORPHEUS_CONTEXT,
+    { optional: true },
+  )
+
+  @Input() spec = this.context?.data.spec || {}
+  @Input() buttons = this.context?.data.buttons || []
+  @Input() patch = this.context?.data.patch || []
+  @Input() value?: T = this.context?.data.value
+
+  form = new FormGroup({})
+
+  ngOnInit() {
+    this.dialogFormService.markAsPristine()
+    this.form = this.formService.createForm(this.spec, this.value)
+    this.process(this.patch)
+  }
+
+  onReset() {
+    const { value } = this.form
+
+    this.form = this.formService.createForm(this.spec)
+    this.process(compare(this.form.value, value))
+    tuiMarkControlAsTouchedAndValidate(this.form)
+    this.markAsDirty()
+  }
+
+  async onClick(handler: Required<ActionButton<T>>['handler']) {
+    tuiMarkControlAsTouchedAndValidate(this.form)
+    this.invalidService.scrollIntoView()
+
+    if (this.form.valid && (await handler(this.form.value as T))) {
+      this.close()
+    }
+  }
+
+  markAsDirty() {
+    this.dialogFormService.markAsDirty()
+  }
+
+  close() {
+    this.context?.$implicit.complete()
+  }
+
+  private process(patch: Operation[]) {
+    patch.forEach(({ op, path }) => {
+      const control = this.form.get(path.substring(1).split('/'))
+
+      if (!control || !control.parent) return
+
+      if (op !== 'remove') {
+        control.markAsDirty()
+        control.markAsTouched()
+      }
+
+      control.parent.markAsDirty()
+      control.parent.markAsTouched()
+    })
+  }
+}

web/projects/ui/src/app/components/form/control.directive.ts

@@ -0,0 +1,30 @@
+import { Directive, ElementRef, inject, OnDestroy, OnInit } from '@angular/core'
+import { ControlContainer, NgControl } from '@angular/forms'
+import { InvalidService } from './invalid.service'
+
+@Directive({
+  selector: 'form-control, form-array, form-object',
+})
+export class ControlDirective implements OnInit, OnDestroy {
+  private readonly invalidService = inject(InvalidService, { optional: true })
+  private readonly element: ElementRef<HTMLElement> = inject(ElementRef)
+  private readonly control =
+    inject(NgControl, { optional: true }) ||
+    inject(ControlContainer, { optional: true })
+
+  get invalid(): boolean {
+    return !!this.control?.invalid
+  }
+
+  scrollIntoView() {
+    this.element.nativeElement.scrollIntoView({ behavior: 'smooth' })
+  }
+
+  ngOnInit() {
+    this.invalidService?.add(this)
+  }
+
+  ngOnDestroy() {
+    this.invalidService?.remove(this)
+  }
+}

web/projects/ui/src/app/components/form/control.ts

@@ -0,0 +1,35 @@
+import { inject } from '@angular/core'
+import { FormControlComponent } from './form-control/form-control.component'
+import { CT } from '@start9labs/start-sdk'
+
+export abstract class Control<Spec extends CT.ValueSpec, Value> {
+  private readonly control: FormControlComponent<Spec, Value> =
+    inject(FormControlComponent)
+
+  get invalid(): boolean {
+    return this.control.touched && this.control.invalid
+  }
+
+  get spec(): Spec {
+    return this.control.spec
+  }
+
+  // TODO: Properly handle already set immutable value
+  get readOnly(): boolean {
+    return (
+      !!this.value && !!this.control.control?.pristine && this.control.immutable
+    )
+  }
+
+  get value(): Value | null {
+    return this.control.value
+  }
+
+  set value(value: Value | null) {
+    this.control.onInput(value)
+  }
+
+  onFocus(focused: boolean) {
+    this.control.onFocus(focused)
+  }
+}

web/projects/ui/src/app/components/form/form-array/form-array.component.html

@@ -0,0 +1,58 @@
+<div class="label">
+  {{ spec.name }}
+  <tui-tooltip
+    *ngIf="spec.description || spec.disabled"
+    [content]="spec | hint"
+  ></tui-tooltip>
+  <button
+    tuiLink
+    type="button"
+    class="add"
+    [disabled]="!canAdd"
+    (click)="add()"
+  >
+    + Add
+  </button>
+</div>
+<tui-error [error]="order | tuiFieldError | async"></tui-error>
+
+<ng-container *ngFor="let item of array.control.controls; let index = index">
+  <form-object
+    *ngIf="spec.spec.type === 'object'; else control"
+    class="object"
+    [class.object_open]="!!open.get(item)"
+    [formGroup]="$any(item)"
+    [spec]="$any(spec.spec)"
+    [@tuiHeightCollapse]="animation"
+    [@tuiFadeIn]="animation"
+    [open]="!!open.get(item)"
+    (openChange)="open.set(item, $event)"
+  >
+    {{ item.value | mustache: $any(spec.spec).displayAs }}
+    <ng-container *ngTemplateOutlet="remove"></ng-container>
+  </form-object>
+  <ng-template #control>
+    <form-control
+      class="control"
+      tuiTextfieldSize="m"
+      [tuiTextfieldLabelOutside]="true"
+      [tuiTextfieldIcon]="remove"
+      [formControl]="$any(item)"
+      [spec]="$any(spec.spec)"
+      [@tuiHeightCollapse]="animation"
+      [@tuiFadeIn]="animation"
+    ></form-control>
+  </ng-template>
+  <ng-template #remove>
+    <button
+      tuiIconButton
+      type="button"
+      class="remove"
+      iconLeft="tuiIconTrash"
+      appearance="icon"
+      size="m"
+      title="Remove"
+      (click.stop)="removeAt(index)"
+    ></button>
+  </ng-template>
+</ng-container>

web/projects/ui/src/app/components/form/form-array/form-array.component.scss

@@ -0,0 +1,50 @@
+@import '@taiga-ui/core/styles/taiga-ui-local';
+
+:host {
+  display: block;
+  margin: 2rem 0;
+}
+
+.label {
+  display: flex;
+  font-size: 1.25rem;
+  font-weight: bold;
+}
+
+.add {
+  font-size: 1rem;
+  padding: 0 1rem;
+  margin-left: auto;
+}
+
+.object {
+  display: block;
+  position: relative;
+
+  &_open::after,
+  &:last-child::after {
+    opacity: 0;
+  }
+
+  &:after {
+    @include transition(opacity);
+
+    content: '';
+    position: absolute;
+    bottom: -0.5rem;
+    height: 1px;
+    left: 3rem;
+    right: 1rem;
+    background: var(--tui-clear);
+  }
+}
+
+.remove {
+  margin-left: auto;
+  pointer-events: auto;
+}
+
+.control {
+  display: block;
+  margin: 0.5rem 0;
+}

web/projects/ui/src/app/components/form/form-array/form-array.component.ts

@@ -0,0 +1,91 @@
+import { Component, HostBinding, inject, Input } from '@angular/core'
+import { AbstractControl, FormArrayName } from '@angular/forms'
+import { TUI_PARENT_ANIMATION, TuiDestroyService } from '@taiga-ui/cdk'
+import {
+  TUI_ANIMATION_OPTIONS,
+  TuiDialogService,
+  tuiFadeIn,
+  tuiHeightCollapse,
+} from '@taiga-ui/core'
+import { TUI_PROMPT } from '@taiga-ui/kit'
+import { CT } from '@start9labs/start-sdk'
+import { filter, takeUntil } from 'rxjs'
+import { FormService } from 'src/app/services/form.service'
+import { ERRORS } from '../form-group/form-group.component'
+
+@Component({
+  selector: 'form-array',
+  templateUrl: './form-array.component.html',
+  styleUrls: ['./form-array.component.scss'],
+  animations: [tuiFadeIn, tuiHeightCollapse, TUI_PARENT_ANIMATION],
+  providers: [TuiDestroyService],
+})
+export class FormArrayComponent {
+  @Input()
+  spec!: CT.ValueSpecList
+
+  @HostBinding('@tuiParentAnimation')
+  readonly animation = { value: '', ...inject(TUI_ANIMATION_OPTIONS) }
+  readonly order = ERRORS
+  readonly array = inject(FormArrayName)
+  readonly open = new Map<AbstractControl, boolean>()
+
+  private warned = false
+  private readonly formService = inject(FormService)
+  private readonly dialogs = inject(TuiDialogService)
+  private readonly destroy$ = inject(TuiDestroyService)
+
+  get canAdd(): boolean {
+    return (
+      !this.spec.disabled &&
+      (!this.spec.maxLength ||
+        this.spec.maxLength >= this.array.control.controls.length)
+    )
+  }
+
+  add() {
+    if (!this.warned && this.spec.warning) {
+      this.dialogs
+        .open<boolean>(TUI_PROMPT, {
+          label: 'Warning',
+          size: 's',
+          data: { content: this.spec.warning, yes: 'Ok', no: 'Cancel' },
+        })
+        .pipe(filter(Boolean), takeUntil(this.destroy$))
+        .subscribe(() => {
+          this.addItem()
+        })
+    } else {
+      this.addItem()
+    }
+
+    this.warned = true
+  }
+
+  removeAt(index: number) {
+    this.dialogs
+      .open<boolean>(TUI_PROMPT, {
+        label: 'Confirm',
+        size: 's',
+        data: {
+          content: 'Are you sure you want to delete this entry?',
+          yes: 'Delete',
+          no: 'Cancel',
+        },
+      })
+      .pipe(filter(Boolean), takeUntil(this.destroy$))
+      .subscribe(() => {
+        this.removeItem(index)
+      })
+  }
+
+  private removeItem(index: number) {
+    this.open.delete(this.array.control.at(index))
+    this.array.control.removeAt(index)
+  }
+
+  private addItem() {
+    this.array.control.insert(0, this.formService.getListItem(this.spec))
+    this.open.set(this.array.control.at(0), true)
+  }
+}

web/projects/ui/src/app/components/form/form-color/form-color.component.html

@@ -0,0 +1,31 @@
+<tui-input
+  [maskito]="mask"
+  [tuiTextfieldCustomContent]="color"
+  [tuiTextfieldCleaner]="false"
+  [tuiHintContent]="spec | hint"
+  [readOnly]="readOnly"
+  [disabled]="!!spec.disabled"
+  [pseudoInvalid]="invalid"
+  [(ngModel)]="value"
+  (focusedChange)="onFocus($event)"
+>
+  {{ spec.name }}
+  <span *ngIf="spec.required">*</span>
+</tui-input>
+<ng-template #color>
+  <div class="wrapper" [style.color]="value">
+    <input
+      *ngIf="!readOnly && !spec.disabled"
+      type="color"
+      class="color"
+      tabindex="-1"
+      [(ngModel)]="value"
+      (click.stop)="(0)"
+    />
+    <tui-icon
+      icon="tuiIconPaintLarge"
+      tuiAppearance="icon"
+      class="icon"
+    ></tui-icon>
+  </div>
+</ng-template>

web/projects/ui/src/app/components/form/form-color/form-color.component.scss

@@ -0,0 +1,33 @@
+@import '@taiga-ui/core/styles/taiga-ui-local';
+
+.wrapper {
+  position: relative;
+  width: 1.5rem;
+  height: 1.5rem;
+  pointer-events: auto;
+
+  &::after {
+    content: '';
+    position: absolute;
+    height: 0.3rem;
+    width: 1.4rem;
+    bottom: 0.125rem;
+    background: currentColor;
+    border-radius: 0.125rem;
+    pointer-events: none;
+  }
+}
+
+.color {
+  @include fullsize();
+  opacity: 0;
+}
+
+.icon {
+  @include fullsize();
+  pointer-events: none;
+
+  input:hover + & {
+    opacity: 1;
+  }
+}

web/projects/ui/src/app/components/form/form-color/form-color.component.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core'
+import { CT } from '@start9labs/start-sdk'
+import { Control } from '../control'
+import { MaskitoOptions } from '@maskito/core'
+
+@Component({
+  selector: 'form-color',
+  templateUrl: './form-color.component.html',
+  styleUrls: ['./form-color.component.scss'],
+})
+export class FormColorComponent extends Control<CT.ValueSpecColor, string> {
+  readonly mask: MaskitoOptions = {
+    mask: ['#', ...Array(6).fill(/[0-9a-f]/i)],
+  }
+}

web/projects/ui/src/app/components/form/form-control/form-control.component.html

@@ -0,0 +1,40 @@
+<ng-container [ngSwitch]="spec.type">
+  <form-color *ngSwitchCase="'color'"></form-color>
+  <form-datetime *ngSwitchCase="'datetime'"></form-datetime>
+  <form-file *ngSwitchCase="'file'"></form-file>
+  <form-multiselect *ngSwitchCase="'multiselect'"></form-multiselect>
+  <form-number *ngSwitchCase="'number'"></form-number>
+  <form-select *ngSwitchCase="'select'"></form-select>
+  <form-text *ngSwitchCase="'text'"></form-text>
+  <form-textarea *ngSwitchCase="'textarea'"></form-textarea>
+  <form-toggle *ngSwitchCase="'toggle'"></form-toggle>
+</ng-container>
+<tui-error [error]="order | tuiFieldError | async"></tui-error>
+<ng-template
+  *ngIf="spec.warning || immutable"
+  #warning
+  let-completeWith="completeWith"
+>
+  {{ spec.warning }}
+  <p *ngIf="immutable">This value cannot be changed once set!</p>
+  <div class="buttons">
+    <button
+      tuiButton
+      type="button"
+      appearance="secondary"
+      size="s"
+      (click)="completeWith(true)"
+    >
+      Rollback
+    </button>
+    <button
+      tuiButton
+      type="button"
+      appearance="flat"
+      size="s"
+      (click)="completeWith(false)"
+    >
+      Accept
+    </button>
+  </div>
+</ng-template>

web/projects/ui/src/app/components/form/form-control/form-control.component.scss

@@ -0,0 +1,11 @@
+:host {
+  display: block;
+}
+
+.buttons {
+  margin-top: 0.5rem;
+
+  :first-child {
+    margin-right: 0.5rem;
+  }
+}

web/projects/ui/src/app/components/form/form-control/form-control.component.ts

@@ -0,0 +1,71 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  inject,
+  Input,
+  TemplateRef,
+  ViewChild,
+} from '@angular/core'
+import { AbstractTuiNullableControl } from '@taiga-ui/cdk'
+import {
+  TuiAlertService,
+  TuiDialogContext,
+  TuiNotification,
+} from '@taiga-ui/core'
+import { filter, takeUntil } from 'rxjs'
+import { CT } from '@start9labs/start-sdk'
+import { ERRORS } from '../form-group/form-group.component'
+import { FORM_CONTROL_PROVIDERS } from './form-control.providers'
+
+@Component({
+  selector: 'form-control',
+  templateUrl: './form-control.component.html',
+  styleUrls: ['./form-control.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: FORM_CONTROL_PROVIDERS,
+})
+export class FormControlComponent<
+  T extends CT.ValueSpec,
+  V,
+> extends AbstractTuiNullableControl<V> {
+  @Input()
+  spec!: T
+
+  @ViewChild('warning')
+  warning?: TemplateRef<TuiDialogContext<boolean>>
+
+  warned = false
+  focused = false
+  readonly order = ERRORS
+  private readonly alerts = inject(TuiAlertService)
+
+  get immutable(): boolean {
+    return 'immutable' in this.spec && this.spec.immutable
+  }
+
+  onFocus(focused: boolean) {
+    this.focused = focused
+    this.updateFocused(focused)
+  }
+
+  onInput(value: V | null) {
+    const previous = this.value
+
+    if (!this.warned && this.warning) {
+      this.alerts
+        .open<boolean>(this.warning, {
+          label: 'Warning',
+          status: TuiNotification.Warning,
+          hasCloseButton: false,
+          autoClose: false,
+        })
+        .pipe(filter(Boolean), takeUntil(this.destroy$))
+        .subscribe(() => {
+          this.value = previous
+        })
+    }
+
+    this.warned = true
+    this.value = value === '' ? null : value
+  }
+}

web/projects/ui/src/app/components/form/form-control/form-control.providers.ts

@@ -0,0 +1,25 @@
+import { forwardRef, Provider } from '@angular/core'
+import { TUI_VALIDATION_ERRORS } from '@taiga-ui/kit'
+import { CT } from '@start9labs/start-sdk'
+import { FormControlComponent } from './form-control.component'
+
+interface ValidatorsPatternError {
+  actualValue: string
+  requiredPattern: string | RegExp
+}
+
+export const FORM_CONTROL_PROVIDERS: Provider[] = [
+  {
+    provide: TUI_VALIDATION_ERRORS,
+    deps: [forwardRef(() => FormControlComponent)],
+    useFactory: (control: FormControlComponent<CT.ValueSpec, string>) => ({
+      required: 'Required',
+      pattern: ({ requiredPattern }: ValidatorsPatternError) =>
+        ('patterns' in control.spec &&
+          control.spec.patterns.find(
+            ({ regex }) => String(regex) === String(requiredPattern),
+          )?.description) ||
+        'Invalid format',
+    }),
+  },
+]

web/projects/ui/src/app/components/form/form-datetime/form-datetime.component.html

@@ -0,0 +1,43 @@
+<ng-container [ngSwitch]="spec.inputmode" [tuiHintContent]="spec.description">
+  <tui-input-time
+    *ngSwitchCase="'time'"
+    [tuiHintContent]="spec | hint"
+    [disabled]="!!spec.disabled"
+    [readOnly]="readOnly"
+    [pseudoInvalid]="invalid"
+    [ngModel]="getTime(value)"
+    (ngModelChange)="value = $event?.toString() || null"
+    (focusedChange)="onFocus($event)"
+  >
+    {{ spec.name }}
+    <span *ngIf="spec.required">*</span>
+  </tui-input-time>
+  <tui-input-date
+    *ngSwitchCase="'date'"
+    [tuiHintContent]="spec | hint"
+    [disabled]="!!spec.disabled"
+    [readOnly]="readOnly"
+    [pseudoInvalid]="invalid"
+    [min]="spec.min ? (spec.min | tuiMapper: getLimit)[0] : min"
+    [max]="spec.max ? (spec.max | tuiMapper: getLimit)[0] : max"
+    [(ngModel)]="value"
+    (focusedChange)="onFocus($event)"
+  >
+    {{ spec.name }}
+    <span *ngIf="spec.required">*</span>
+  </tui-input-date>
+  <tui-input-date-time
+    *ngSwitchCase="'datetime-local'"
+    [tuiHintContent]="spec | hint"
+    [disabled]="!!spec.disabled"
+    [readOnly]="readOnly"
+    [pseudoInvalid]="invalid"
+    [min]="spec.min ? (spec.min | tuiMapper: getLimit) : min"
+    [max]="spec.max ? (spec.max | tuiMapper: getLimit) : max"
+    [(ngModel)]="value"
+    (focusedChange)="onFocus($event)"
+  >
+    {{ spec.name }}
+    <span *ngIf="spec.required">*</span>
+  </tui-input-date-time>
+</ng-container>

web/projects/ui/src/app/components/form/form-datetime/form-datetime.component.ts

@@ -0,0 +1,36 @@
+import { Component } from '@angular/core'
+import {
+  TUI_FIRST_DAY,
+  TUI_LAST_DAY,
+  TuiDay,
+  tuiPure,
+  TuiTime,
+} from '@taiga-ui/cdk'
+import { CT } from '@start9labs/start-sdk'
+import { Control } from '../control'
+
+@Component({
+  selector: 'form-datetime',
+  templateUrl: './form-datetime.component.html',
+})
+export class FormDatetimeComponent extends Control<
+  CT.ValueSpecDatetime,
+  string
+> {
+  readonly min = TUI_FIRST_DAY
+  readonly max = TUI_LAST_DAY
+
+  @tuiPure
+  getTime(value: string | null) {
+    return value ? TuiTime.fromString(value) : null
+  }
+
+  getLimit(limit: string): [TuiDay, TuiTime] {
+    return [
+      TuiDay.jsonParse(limit.slice(0, 10)),
+      limit.length === 10
+        ? new TuiTime(0, 0)
+        : TuiTime.fromString(limit.slice(-5)),
+    ]
+  }
+}

web/projects/ui/src/app/components/form/form-file/form-file.component.html

@@ -0,0 +1,31 @@
+<tui-input-files
+  [pseudoInvalid]="invalid"
+  [(ngModel)]="value"
+  (focusedChange)="onFocus($event)"
+>
+  <input tuiInputFiles [accept]="spec.extensions.join(',')" />
+  <ng-template let-drop>
+    <div class="template" [class.template_hidden]="drop">
+      <div class="label">
+        {{ spec.name }}
+        <span *ngIf="spec.required">*</span>
+        <tui-tooltip
+          *ngIf="spec.description"
+          [content]="spec.description"
+        ></tui-tooltip>
+      </div>
+      <tui-tag
+        *ngIf="value; else label"
+        class="file"
+        size="l"
+        [value]="value.name"
+        [removable]="true"
+        (edited)="value = null"
+      ></tui-tag>
+      <ng-template #label>
+        <small>Click or drop file here</small>
+      </ng-template>
+    </div>
+    <div class="drop" [class.drop_hidden]="!drop">Drop file here</div>
+  </ng-template>
+</tui-input-files>

web/projects/ui/src/app/components/form/form-file/form-file.component.scss

@@ -0,0 +1,46 @@
+@import '@taiga-ui/core/styles/taiga-ui-local';
+
+.template {
+  @include transition(opacity);
+
+  width: 100%;
+  display: flex;
+  align-items: center;
+  padding: 0 0.5rem;
+  font: var(--tui-font-text-m);
+  font-weight: bold;
+
+  &_hidden {
+    opacity: 0;
+  }
+}
+
+.drop {
+  @include fullsize();
+  @include transition(opacity);
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+
+  &_hidden {
+    opacity: 0;
+  }
+}
+
+.label {
+  display: flex;
+  align-items: center;
+  max-width: 50%;
+}
+
+small {
+  max-width: 50%;
+  font-weight: normal;
+  color: var(--tui-text-02);
+  margin-left: auto;
+}
+
+tui-tag {
+  z-index: 1;
+  margin: -0.25rem -0.25rem -0.25rem auto;
+}

web/projects/ui/src/app/components/form/form-file/form-file.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core'
+import { TuiFileLike } from '@taiga-ui/kit'
+import { CT } from '@start9labs/start-sdk'
+import { Control } from '../control'
+
+@Component({
+  selector: 'form-file',
+  templateUrl: './form-file.component.html',
+  styleUrls: ['./form-file.component.scss'],
+})
+export class FormFileComponent extends Control<CT.ValueSpecFile, TuiFileLike> {}

web/projects/ui/src/app/components/form/form-group/form-group.component.html

@@ -0,0 +1,30 @@
+<ng-container
+  *ngFor="let entry of spec | keyvalue: asIsOrder"
+  tuiMode="onDark"
+  [ngSwitch]="entry.value.type"
+  [tuiTextfieldCleaner]="true"
+>
+  <form-object
+    *ngSwitchCase="'object'"
+    class="g-form-control"
+    [formGroupName]="entry.key"
+    [spec]="$any(entry.value)"
+  ></form-object>
+  <form-union
+    *ngSwitchCase="'union'"
+    class="g-form-control"
+    [formGroupName]="entry.key"
+    [spec]="$any(entry.value)"
+  ></form-union>
+  <form-array
+    *ngSwitchCase="'list'"
+    [formArrayName]="entry.key"
+    [spec]="$any(entry.value)"
+  ></form-array>
+  <form-control
+    *ngSwitchDefault
+    class="g-form-control"
+    [formControlName]="entry.key"
+    [spec]="entry.value"
+  ></form-control>
+</ng-container>

web/projects/ui/src/app/components/form/form-group/form-group.component.scss

@@ -0,0 +1,35 @@
+form-group .g-form-control:not(:first-child) {
+  margin-top: 1rem;
+}
+
+form-group .g-form-group {
+  position: relative;
+  padding-left: var(--tui-height-m);
+
+  &::before,
+  &::after {
+    content: '';
+    position: absolute;
+    background: var(--tui-clear);
+  }
+
+  &::before {
+    top: 0;
+    left: calc(1rem - 1px);
+    bottom: 0.5rem;
+    width: 2px;
+  }
+
+  &::after {
+    left: 0.75rem;
+    bottom: 0;
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 100%;
+  }
+}
+
+form-group tui-tooltip {
+  z-index: 1;
+  margin-left: 0.25rem;
+}

web/projects/ui/src/app/components/form/form-group/form-group.component.ts

@@ -0,0 +1,35 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  ViewEncapsulation,
+} from '@angular/core'
+import { CT } from '@start9labs/start-sdk'
+import { FORM_GROUP_PROVIDERS } from './form-group.providers'
+
+export const ERRORS = [
+  'required',
+  'pattern',
+  'notNumber',
+  'numberNotInteger',
+  'numberNotInRange',
+  'listNotUnique',
+  'listNotInRange',
+  'listItemIssue',
+]
+
+@Component({
+  selector: 'form-group',
+  templateUrl: './form-group.component.html',
+  styleUrls: ['./form-group.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  viewProviders: [FORM_GROUP_PROVIDERS],
+})
+export class FormGroupComponent {
+  @Input() spec: CT.InputSpec = {}
+
+  asIsOrder() {
+    return 0
+  }
+}

web/projects/ui/src/app/components/form/form-group/form-group.providers.ts

@@ -0,0 +1,34 @@
+import { Provider, SkipSelf } from '@angular/core'
+import {
+  TUI_ARROW_MODE,
+  tuiInputDateOptionsProvider,
+  tuiInputTimeOptionsProvider,
+} from '@taiga-ui/kit'
+import { TUI_DEFAULT_ERROR_MESSAGE } from '@taiga-ui/core'
+import { ControlContainer } from '@angular/forms'
+import { identity, of } from 'rxjs'
+
+export const FORM_GROUP_PROVIDERS: Provider[] = [
+  {
+    provide: TUI_DEFAULT_ERROR_MESSAGE,
+    useValue: of('Unknown error'),
+  },
+  {
+    provide: ControlContainer,
+    deps: [[new SkipSelf(), ControlContainer]],
+    useFactory: identity,
+  },
+  {
+    provide: TUI_ARROW_MODE,
+    useValue: {
+      interactive: null,
+      disabled: null,
+    },
+  },
+  tuiInputDateOptionsProvider({
+    nativePicker: true,
+  }),
+  tuiInputTimeOptionsProvider({
+    nativePicker: true,
+  }),
+]

web/projects/ui/src/app/components/form/form-multiselect/form-multiselect.component.html

@@ -0,0 +1,18 @@
+<tui-multi-select
+  [tuiHintContent]="spec | hint"
+  [disabled]="disabled"
+  [readOnly]="readOnly"
+  [pseudoInvalid]="invalid"
+  [editable]="false"
+  [disabledItemHandler]="disabledItemHandler"
+  [(ngModel)]="selected"
+  (focusedChange)="onFocus($event)"
+>
+  {{ spec.name }}
+  <select
+    tuiSelect
+    multiple
+    [items]="items"
+    [disabledItemHandler]="disabledItemHandler"
+  ></select>
+</tui-multi-select>

web/projects/ui/src/app/components/form/form-multiselect/form-multiselect.component.ts

@@ -0,0 +1,49 @@
+import { Component } from '@angular/core'
+import { CT } from '@start9labs/start-sdk'
+import { Control } from '../control'
+import { tuiPure } from '@taiga-ui/cdk'
+import { invert } from '@start9labs/shared'
+
+@Component({
+  selector: 'form-multiselect',
+  templateUrl: './form-multiselect.component.html',
+})
+export class FormMultiselectComponent extends Control<
+  CT.ValueSpecMultiselect,
+  readonly string[]
+> {
+  private readonly inverted = invert(this.spec.values)
+
+  private readonly isDisabled = (item: string) =>
+    Array.isArray(this.spec.disabled) &&
+    this.spec.disabled.includes(this.inverted[item])
+
+  private readonly isExceedingLimit = (item: string) =>
+    !!this.spec.maxLength &&
+    this.selected.length >= this.spec.maxLength &&
+    !this.selected.includes(item)
+
+  readonly disabledItemHandler = (item: string): boolean =>
+    this.isDisabled(item) || this.isExceedingLimit(item)
+
+  readonly items = Object.values(this.spec.values)
+
+  get disabled(): boolean {
+    return typeof this.spec.disabled === 'string'
+  }
+
+  get selected(): string[] {
+    return this.memoize(this.value)
+  }
+
+  set selected(value: string[]) {
+    this.value = Object.entries(this.spec.values)
+      .filter(([_, v]) => value.includes(v))
+      .map(([k]) => k)
+  }
+
+  @tuiPure
+  private memoize(value: null | readonly string[]): string[] {
+    return value?.map(key => this.spec.values[key]) || []
+  }
+}

web/projects/ui/src/app/components/form/form-number/form-number.component.html

@@ -0,0 +1,18 @@
+<tui-input-number
+  [tuiHintContent]="spec | hint"
+  [disabled]="!!spec.disabled"
+  [readOnly]="readOnly"
+  [tuiTextfieldPostfix]="spec.units || ''"
+  [pseudoInvalid]="invalid"
+  [precision]="Infinity"
+  [decimal]="spec.integer ? 'never' : 'not-zero'"
+  [min]="spec.min ?? -Infinity"
+  [max]="spec.max ?? Infinity"
+  [step]="spec.step || 0"
+  [(ngModel)]="value"
+  (focusedChange)="onFocus($event)"
+>
+  {{ spec.name }}
+  <span *ngIf="spec.required">*</span>
+  <input tuiTextfield [placeholder]="spec.placeholder || ''" />
+</tui-input-number>

web/projects/ui/src/app/components/form/form-number/form-number.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core'
+import { CT } from '@start9labs/start-sdk'
+import { Control } from '../control'
+
+@Component({
+  selector: 'form-number',
+  templateUrl: './form-number.component.html',
+})
+export class FormNumberComponent extends Control<CT.ValueSpecNumber, number> {
+  protected readonly Infinity = Infinity
+}

web/projects/ui/src/app/components/form/form-object/form-object.component.html

@@ -0,0 +1,25 @@
+<h3 class="title" (click)="toggle()">
+  <button
+    tuiIconButton
+    size="s"
+    iconLeft="tuiIconChevronDown"
+    type="button"
+    class="button"
+    [class.button_open]="open"
+    [style.border-radius.%]="100"
+    [appearance]="invalid ? 'destructive' : 'secondary'"
+  ></button>
+  <ng-content></ng-content>
+  {{ spec.name }}
+  <tui-tooltip
+    *ngIf="spec.description"
+    [content]="spec.description"
+    (click.stop)="(0)"
+  ></tui-tooltip>
+</h3>
+
+<tui-expand class="expand" [expanded]="open">
+  <div class="g-form-group" [class.g-form-group_invalid]="invalid">
+    <form-group [spec]="spec.spec"></form-group>
+  </div>
+</tui-expand>

web/projects/ui/src/app/components/form/form-object/form-object.component.scss

@@ -0,0 +1,41 @@
+@import '@taiga-ui/core/styles/taiga-ui-local';
+
+:host {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.title {
+  position: relative;
+  height: var(--tui-height-l);
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  font: var(--tui-font-text-l);
+  font-weight: bold;
+  margin: 0 0 -0.75rem;
+}
+
+.button {
+  @include transition(transform);
+
+  margin-right: 1rem;
+
+  &_open {
+    transform: rotate(180deg);
+  }
+}
+
+.expand {
+  align-self: stretch;
+}
+
+.g-form-group {
+  padding-top: 0.75rem;
+
+  &_invalid::before,
+  &_invalid::after {
+    background: var(--tui-error-bg);
+  }
+}

web/projects/ui/src/app/components/form/form-object/form-object.component.ts

@@ -0,0 +1,38 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  inject,
+  Input,
+  Output,
+} from '@angular/core'
+import { ControlContainer } from '@angular/forms'
+import { CT } from '@start9labs/start-sdk'
+
+@Component({
+  selector: 'form-object',
+  templateUrl: './form-object.component.html',
+  styleUrls: ['./form-object.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FormObjectComponent {
+  @Input()
+  spec!: CT.ValueSpecObject
+
+  @Input()
+  open = false
+
+  @Output()
+  readonly openChange = new EventEmitter<boolean>()
+
+  private readonly container = inject(ControlContainer)
+
+  get invalid() {
+    return !this.container.valid && this.container.touched
+  }
+
+  toggle() {
+    this.open = !this.open
+    this.openChange.emit(this.open)
+  }
+}

web/projects/ui/src/app/components/form/form-select/form-select.component.html

@@ -0,0 +1,17 @@
+<tui-select
+  [tuiHintContent]="spec | hint"
+  [disabled]="disabled"
+  [readOnly]="readOnly"
+  [tuiTextfieldCleaner]="!spec.required"
+  [pseudoInvalid]="invalid"
+  [(ngModel)]="selected"
+  (focusedChange)="onFocus($event)"
+>
+  {{ spec.name }}
+  <span *ngIf="spec.required">*</span>
+  <select
+    tuiSelect
+    [items]="items"
+    [disabledItemHandler]="disabledItemHandler"
+  ></select>
+</tui-select>

web/projects/ui/src/app/components/form/form-select/form-select.component.ts

@@ -0,0 +1,30 @@
+import { Component } from '@angular/core'
+import { CT } from '@start9labs/start-sdk'
+import { invert } from '@start9labs/shared'
+import { Control } from '../control'
+
+@Component({
+  selector: 'form-select',
+  templateUrl: './form-select.component.html',
+})
+export class FormSelectComponent extends Control<CT.ValueSpecSelect, string> {
+  private readonly inverted = invert(this.spec.values)
+
+  readonly items = Object.values(this.spec.values)
+
+  readonly disabledItemHandler = (item: string) =>
+    Array.isArray(this.spec.disabled) &&
+    this.spec.disabled.includes(this.inverted[item])
+
+  get disabled(): boolean {
+    return typeof this.spec.disabled === 'string'
+  }
+
+  get selected(): string | null {
+    return (this.value && this.spec.values[this.value]) || null
+  }
+
+  set selected(value: string | null) {
+    this.value = (value && this.inverted[value]) || null
+  }
+}

web/projects/ui/src/app/components/form/form-text/form-text.component.html

@@ -0,0 +1,44 @@
+<tui-input
+  [tuiTextfieldCustomContent]="spec.masked || spec.generate ? toggle : ''"
+  [tuiHintContent]="spec | hint"
+  [disabled]="!!spec.disabled"
+  [readOnly]="readOnly"
+  [pseudoInvalid]="invalid"
+  [(ngModel)]="value"
+  (focusedChange)="onFocus($event)"
+>
+  {{ spec.name }}
+  <span *ngIf="spec.required">*</span>
+  <input
+    tuiTextfield
+    [class.masked]="spec.masked && masked"
+    [placeholder]="spec.placeholder || ''"
+    [attr.minLength]="spec.minLength"
+    [attr.maxLength]="spec.maxLength"
+    [attr.inputmode]="spec.inputmode"
+  />
+</tui-input>
+<ng-template #toggle>
+  <button
+    *ngIf="spec.generate"
+    tuiIconButton
+    type="button"
+    appearance="icon"
+    title="Generate"
+    size="xs"
+    class="button"
+    iconLeft="tuiIconRefreshCcw"
+    (click)="generate()"
+  ></button>
+  <button
+    *ngIf="spec.masked"
+    tuiIconButton
+    type="button"
+    appearance="icon"
+    title="Toggle masking"
+    size="xs"
+    class="button"
+    [iconLeft]="masked ? 'tuiIconEye' : 'tuiIconEyeOff'"
+    (click)="masked = !masked"
+  ></button>
+</ng-template>

web/projects/ui/src/app/components/form/form-text/form-text.component.scss

@@ -0,0 +1,8 @@
+.button {
+  pointer-events: auto;
+  margin-left: 0.25rem;
+}
+
+.masked {
+  -webkit-text-security: disc;
+}

web/projects/ui/src/app/components/form/form-text/form-text.component.ts

@@ -0,0 +1,16 @@
+import { Component } from '@angular/core'
+import { CT, utils } from '@start9labs/start-sdk'
+import { Control } from '../control'
+
+@Component({
+  selector: 'form-text',
+  templateUrl: './form-text.component.html',
+  styleUrls: ['./form-text.component.scss'],
+})
+export class FormTextComponent extends Control<CT.ValueSpecText, string> {
+  masked = true
+
+  generate() {
+    this.value = utils.getDefaultString(this.spec.generate || '')
+  }
+}

web/projects/ui/src/app/components/form/form-textarea/form-textarea.component.html

@@ -0,0 +1,15 @@
+<tui-text-area
+  [tuiHintContent]="spec | hint"
+  [disabled]="!!spec.disabled"
+  [readOnly]="readOnly"
+  [pseudoInvalid]="invalid"
+  [expandable]="true"
+  [rows]="6"
+  [maxLength]="spec.maxLength"
+  [(ngModel)]="value"
+  (focusedChange)="onFocus($event)"
+>
+  {{ spec.name }}
+  <span *ngIf="spec.required">*</span>
+  <textarea tuiTextfield [placeholder]="spec.placeholder || ''"></textarea>
+</tui-text-area>

web/projects/ui/src/app/components/form/form-textarea/form-textarea.component.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core'
+import { CT } from '@start9labs/start-sdk'
+import { Control } from '../control'
+
+@Component({
+  selector: 'form-textarea',
+  templateUrl: './form-textarea.component.html',
+})
+export class FormTextareaComponent extends Control<
+  CT.ValueSpecTextarea,
+  string
+> {}

web/projects/ui/src/app/components/form/form-toggle/form-toggle.component.html

@@ -0,0 +1,11 @@
+{{ spec.name }}
+<tui-tooltip
+  *ngIf="spec.description || spec.disabled"
+  [tuiHintContent]="spec | hint"
+></tui-tooltip>
+<tui-toggle
+  size="l"
+  [disabled]="!!spec.disabled || readOnly"
+  [(ngModel)]="value"
+  (focusedChange)="onFocus($event)"
+></tui-toggle>

web/projects/ui/src/app/components/form/form-toggle/form-toggle.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core'
+import { CT } from '@start9labs/start-sdk'
+import { Control } from '../control'
+
+@Component({
+  selector: 'form-toggle',
+  templateUrl: './form-toggle.component.html',
+  host: { class: 'g-toggle' },
+})
+export class FormToggleComponent extends Control<CT.ValueSpecToggle, boolean> {}

web/projects/ui/src/app/components/form/form-union/form-union.component.html

@@ -0,0 +1,11 @@
+<form-control
+  [spec]="selectSpec"
+  formControlName="selection"
+  (tuiValueChanges)="onUnion($event)"
+></form-control>
+<tui-elastic-container class="g-form-group" formGroupName="value">
+  <form-group
+    class="group"
+    [spec]="(union && spec.variants[union].spec) || {}"
+  ></form-group>
+</tui-elastic-container>

web/projects/ui/src/app/components/form/form-union/form-union.component.scss

@@ -0,0 +1,8 @@
+:host {
+  display: block;
+}
+
+.group {
+  display: block;
+  margin-top: 1rem;
+}

web/projects/ui/src/app/components/form/form-union/form-union.component.ts

@@ -0,0 +1,55 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  inject,
+  Input,
+  OnChanges,
+} from '@angular/core'
+import { ControlContainer, FormGroupName } from '@angular/forms'
+import { CT } from '@start9labs/start-sdk'
+import { FormService } from 'src/app/services/form.service'
+import { tuiPure } from '@taiga-ui/cdk'
+
+@Component({
+  selector: 'form-union',
+  templateUrl: './form-union.component.html',
+  styleUrls: ['./form-union.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  viewProviders: [
+    {
+      provide: ControlContainer,
+      useExisting: FormGroupName,
+    },
+  ],
+})
+export class FormUnionComponent implements OnChanges {
+  @Input()
+  spec!: CT.ValueSpecUnion
+
+  selectSpec!: CT.ValueSpecSelect
+
+  private readonly form = inject(FormGroupName)
+  private readonly formService = inject(FormService)
+
+  get union(): string {
+    return this.form.value.selection
+  }
+
+  @tuiPure
+  onUnion(union: string) {
+    this.form.control.setControl(
+      'value',
+      this.formService.getFormGroup(
+        union ? this.spec.variants[union].spec : {},
+      ),
+      {
+        emitEvent: false,
+      },
+    )
+  }
+
+  ngOnChanges() {
+    this.selectSpec = this.formService.getUnionSelectSpec(this.spec, this.union)
+    if (this.union) this.onUnion(this.union)
+  }
+}

web/projects/ui/src/app/components/form/form.module.ts

@@ -0,0 +1,109 @@
+import { NgModule } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { MaskitoModule } from '@maskito/angular'
+import { TuiMapperPipeModule, TuiValueChangesModule } from '@taiga-ui/cdk'
+import {
+  TuiErrorModule,
+  TuiExpandModule,
+  TuiHintModule,
+  TuiLinkModule,
+  TuiModeModule,
+  TuiTextfieldControllerModule,
+  TuiTooltipModule,
+} from '@taiga-ui/core'
+import {
+  TuiAppearanceModule,
+  TuiButtonModule,
+  TuiIconModule,
+} from '@taiga-ui/experimental'
+import {
+  TuiElasticContainerModule,
+  TuiFieldErrorPipeModule,
+  TuiInputDateModule,
+  TuiInputDateTimeModule,
+  TuiInputFilesModule,
+  TuiInputModule,
+  TuiInputNumberModule,
+  TuiInputTimeModule,
+  TuiMultiSelectModule,
+  TuiPromptModule,
+  TuiSelectModule,
+  TuiTagModule,
+  TuiTextAreaModule,
+  TuiToggleModule,
+} from '@taiga-ui/kit'
+
+import { FormGroupComponent } from './form-group/form-group.component'
+import { FormTextComponent } from './form-text/form-text.component'
+import { FormToggleComponent } from './form-toggle/form-toggle.component'
+import { FormTextareaComponent } from './form-textarea/form-textarea.component'
+import { FormNumberComponent } from './form-number/form-number.component'
+import { FormSelectComponent } from './form-select/form-select.component'
+import { FormFileComponent } from './form-file/form-file.component'
+import { FormMultiselectComponent } from './form-multiselect/form-multiselect.component'
+import { FormUnionComponent } from './form-union/form-union.component'
+import { FormObjectComponent } from './form-object/form-object.component'
+import { FormArrayComponent } from './form-array/form-array.component'
+import { FormControlComponent } from './form-control/form-control.component'
+import { MustachePipe } from './mustache.pipe'
+import { ControlDirective } from './control.directive'
+import { FormColorComponent } from './form-color/form-color.component'
+import { FormDatetimeComponent } from './form-datetime/form-datetime.component'
+import { HintPipe } from './hint.pipe'
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    ReactiveFormsModule,
+    TuiInputModule,
+    TuiInputNumberModule,
+    TuiInputFilesModule,
+    TuiTextAreaModule,
+    TuiSelectModule,
+    TuiMultiSelectModule,
+    TuiToggleModule,
+    TuiTooltipModule,
+    TuiHintModule,
+    TuiModeModule,
+    TuiTagModule,
+    TuiButtonModule,
+    TuiExpandModule,
+    TuiTextfieldControllerModule,
+    TuiLinkModule,
+    TuiPromptModule,
+    TuiErrorModule,
+    TuiFieldErrorPipeModule,
+    TuiValueChangesModule,
+    TuiElasticContainerModule,
+    MaskitoModule,
+    TuiIconModule,
+    TuiAppearanceModule,
+    TuiInputDateModule,
+    TuiInputTimeModule,
+    TuiInputDateTimeModule,
+    TuiMapperPipeModule,
+  ],
+  declarations: [
+    FormGroupComponent,
+    FormControlComponent,
+    FormColorComponent,
+    FormDatetimeComponent,
+    FormTextComponent,
+    FormToggleComponent,
+    FormTextareaComponent,
+    FormNumberComponent,
+    FormSelectComponent,
+    FormMultiselectComponent,
+    FormFileComponent,
+    FormUnionComponent,
+    FormObjectComponent,
+    FormArrayComponent,
+    MustachePipe,
+    HintPipe,
+    ControlDirective,
+  ],
+  exports: [FormGroupComponent],
+})
+export class FormModule {}

web/projects/ui/src/app/components/form/hint.pipe.ts

@@ -0,0 +1,21 @@
+import { Pipe, PipeTransform } from '@angular/core'
+import { CT } from '@start9labs/start-sdk'
+
+@Pipe({
+  name: 'hint',
+})
+export class HintPipe implements PipeTransform {
+  transform(spec: CT.ValueSpec): string {
+    const hint = []
+
+    if (spec.description) {
+      hint.push(spec.description)
+    }
+
+    if ('disabled' in spec && typeof spec.disabled === 'string') {
+      hint.push(`Disabled: ${spec.disabled}`)
+    }
+
+    return hint.join('\n\n')
+  }
+}

web/projects/ui/src/app/components/form/invalid.service.ts

@@ -0,0 +1,19 @@
+import { Injectable } from '@angular/core'
+import { ControlDirective } from './control.directive'
+
+@Injectable()
+export class InvalidService {
+  private readonly controls: ControlDirective[] = []
+
+  scrollIntoView() {
+    this.controls.find(({ invalid }) => invalid)?.scrollIntoView()
+  }
+
+  add(control: ControlDirective) {
+    this.controls.push(control)
+  }
+
+  remove(control: ControlDirective) {
+    this.controls.splice(this.controls.indexOf(control), 1)
+  }
+}

web/projects/ui/src/app/components/form/mustache.pipe.ts

@@ -0,0 +1,12 @@
+import { Pipe, PipeTransform } from '@angular/core'
+
+const Mustache = require('mustache')
+
+@Pipe({
+  name: 'mustache',
+})
+export class MustachePipe implements PipeTransform {
+  transform(value: any, displayAs: string): string {
+    return displayAs && Mustache.render(displayAs, value)
+  }
+}

web/projects/ui/src/app/components/logs/logs.component.ts

@@ -1,5 +1,15 @@
 import { Component, Input, ViewChild } from '@angular/core'
-import { IonContent, LoadingController } from '@ionic/angular'
+import { IonContent } from '@ionic/angular'
+import {
+  DownloadHTMLService,
+  ErrorService,
+  LoadingService,
+  Log,
+  LogsRes,
+  ServerLogsReq,
+  toLocalIsoString,
+} from '@start9labs/shared'
+import { TuiDestroyService } from '@taiga-ui/cdk'
 import {
   bufferTime,
   catchError,
@@ -11,15 +21,6 @@ import {
   takeUntil,
   tap,
 } from 'rxjs'
-import {
-  LogsRes,
-  ServerLogsReq,
-  ErrorToastService,
-  toLocalIsoString,
-  Log,
-  DownloadHTMLService,
-} from '@start9labs/shared'
-import { TuiDestroyService } from '@taiga-ui/cdk'
 import { RR } from 'src/app/services/api/api.types'
 import { ApiService } from 'src/app/services/api/embassy-api.service'
 import { ConnectionService } from 'src/app/services/connection.service'
@@ -66,10 +67,10 @@ export class LogsComponent {
   count = 0
 
   constructor(
-    private readonly errToast: ErrorToastService,
+    private readonly errorService: ErrorService,
     private readonly destroy$: TuiDestroyService,
     private readonly api: ApiService,
-    private readonly loadingCtrl: LoadingController,
+    private readonly loader: LoadingService,
     private readonly downloadHtml: DownloadHTMLService,
     private readonly connection$: ConnectionService,
   ) {}
@@ -97,7 +98,7 @@ export class LogsComponent {
 
       this.processRes(res)
     } catch (e: any) {
-      this.errToast.present(e)
+      this.errorService.handleError(e)
     } finally {
       e.target.complete()
     }
@@ -119,10 +120,7 @@ export class LogsComponent {
   }
 
   async download() {
-    const loader = await this.loadingCtrl.create({
-      message: 'Processing 10,000 logs...',
-    })
-    await loader.present()
+    const loader = this.loader.open('Processing 10,000 logs...').subscribe()
 
     try {
       const { entries } = await this.fetchLogs({
@@ -139,9 +137,9 @@ export class LogsComponent {
 
       this.downloadHtml.download(`${this.context}-logs.html`, html, styles)
     } catch (e: any) {
-      this.errToast.present(e)
+      this.errorService.handleError(e)
     } finally {
-      loader.dismiss()
+      loader.unsubscribe()
     }
   }
 

web/projects/ui/src/app/components/toast-container/refresh-alert/refresh-alert.component.ts

@@ -1,9 +1,9 @@
 import { ChangeDetectionStrategy, Component, Inject } from '@angular/core'
+import { SwUpdate } from '@angular/service-worker'
+import { LoadingService } from '@start9labs/shared'
 import { merge, Observable, Subject } from 'rxjs'
 
 import { RefreshAlertService } from './refresh-alert.service'
-import { SwUpdate } from '@angular/service-worker'
-import { LoadingController } from '@ionic/angular'
 
 @Component({
   selector: 'refresh-alert',
@@ -18,7 +18,7 @@ export class RefreshAlertComponent {
   constructor(
     @Inject(RefreshAlertService) private readonly refresh$: Observable<boolean>,
     private readonly updates: SwUpdate,
-    private readonly loadingCtrl: LoadingController,
+    private readonly loader: LoadingService,
   ) {}
 
   ngOnInit() {
@@ -26,17 +26,14 @@ export class RefreshAlertComponent {
   }
 
   async pwaReload() {
-    const loader = await this.loadingCtrl.create({
-      message: 'Reloading PWA...',
-    })
-    await loader.present()
+    const loader = this.loader.open('Reloading PWA...').subscribe()
     try {
       // attempt to update to the latest client version available
       await this.updates.activateUpdate()
     } catch (e) {
       console.error('Error activating update from service worker: ', e)
     } finally {
-      loader.dismiss()
+      loader.unsubscribe()
       // always reload, as this resolves most out of sync cases
       window.location.reload()
     }

web/projects/ui/src/app/components/toast-container/update-toast/update-toast.component.ts

@@ -1,10 +1,9 @@
 import { ChangeDetectionStrategy, Component, Inject } from '@angular/core'
-import { LoadingController } from '@ionic/angular'
-import { ErrorToastService } from '@start9labs/shared'
-import { Observable, Subject, merge } from 'rxjs'
+import { ErrorService, LoadingService } from '@start9labs/shared'
+import { merge, Observable, Subject } from 'rxjs'
+import { ApiService } from '../../../services/api/embassy-api.service'
 
 import { UpdateToastService } from './update-toast.service'
-import { ApiService } from '../../../services/api/embassy-api.service'
 
 @Component({
   selector: 'update-toast',
@@ -19,8 +18,8 @@ export class UpdateToastComponent {
   constructor(
     @Inject(UpdateToastService) private readonly update$: Observable<boolean>,
     private readonly embassyApi: ApiService,
-    private readonly errToast: ErrorToastService,
-    private readonly loadingCtrl: LoadingController,
+    private readonly errorService: ErrorService,
+    private readonly loader: LoadingService,
   ) {}
 
   onDismiss() {
@@ -30,18 +29,14 @@ export class UpdateToastComponent {
   async restart(): Promise<void> {
     this.onDismiss()
 
-    const loader = await this.loadingCtrl.create({
-      message: 'Restarting...',
-    })
-
-    await loader.present()
+    const loader = this.loader.open('Restarting...').subscribe()
 
     try {
       await this.embassyApi.restartServer({})
     } catch (e: any) {
-      await this.errToast.present(e)
+      await this.errorService.handleError(e)
     } finally {
-      await loader.dismiss()
+      await loader.unsubscribe()
     }
   }
 }

web/projects/ui/src/app/modals/app-config/app-config.module.ts

@@ -1,21 +0,0 @@
-import { NgModule } from '@angular/core'
-import { CommonModule } from '@angular/common'
-import { FormsModule, ReactiveFormsModule } from '@angular/forms'
-import { IonicModule } from '@ionic/angular'
-import { AppConfigPage } from './app-config.page'
-import { TextSpinnerComponentModule } from '@start9labs/shared'
-import { FormObjectComponentModule } from 'src/app/components/form-object/form-object.component.module'
-
-@NgModule({
-  declarations: [AppConfigPage],
-  imports: [
-    CommonModule,
-    FormsModule,
-    IonicModule,
-    TextSpinnerComponentModule,
-    FormObjectComponentModule,
-    ReactiveFormsModule,
-  ],
-  exports: [AppConfigPage],
-})
-export class AppConfigPageModule {}

web/projects/ui/src/app/modals/app-config/app-config.page.html

@@ -1,144 +0,0 @@
-<ion-header>
-  <ion-toolbar>
-    <ion-title>Config</ion-title>
-    <ion-buttons slot="end">
-      <ion-button (click)="dismiss()">
-        <ion-icon slot="icon-only" name="close"></ion-icon>
-      </ion-button>
-    </ion-buttons>
-  </ion-toolbar>
-</ion-header>
-
-<ion-content class="ion-padding" *ngIf="pkg.stateInfo.manifest as manifest">
-  <!-- loading -->
-  <text-spinner
-    *ngIf="loading; else notLoading"
-    [text]="loadingText"
-  ></text-spinner>
-
-  <!-- not loading -->
-  <ng-template #notLoading>
-    <ion-item *ngIf="loadingError; else noError">
-      <ion-label>
-        <ion-text color="danger">{{ loadingError }}</ion-text>
-      </ion-label>
-    </ion-item>
-
-    <ng-template #noError>
-      <ng-container *ngIf="configForm && !pkg.status.configured">
-        <ng-container *ngIf="!original; else hasOriginal">
-          <h2
-            *ngIf="!configForm.dirty"
-            class="ion-padding-bottom header-details"
-          >
-            <ion-text color="success">
-              {{ manifest.title }} has been automatically configured with
-              recommended defaults. Make whatever changes you want, then click
-              "Save".
-            </ion-text>
-          </h2>
-        </ng-container>
-        <ng-template #hasOriginal>
-          <h2 *ngIf="hasNewOptions" class="ion-padding-bottom header-details">
-            <ion-text color="success">
-              New config options! To accept the default values, click "Save".
-              You may also customize these new options below.
-            </ion-text>
-          </h2>
-        </ng-template>
-      </ng-container>
-
-      <!-- auto-config -->
-      <ion-item
-        lines="none"
-        *ngIf="dependentInfo"
-        class="rec-item"
-        style="margin-bottom: 48px"
-      >
-        <ion-label>
-          <h2 style="display: flex; align-items: center">
-            <img
-              style="width: 18px; margin: 4px"
-              [src]="pkg.icon"
-              [alt]="manifest.title"
-            />
-            <ion-text
-              style="margin: 5px; font-family: 'Montserrat'; font-size: 18px"
-            >
-              {{ manifest.title }}
-            </ion-text>
-          </h2>
-          <p>
-            <ion-text color="dark">
-              The following modifications have been made to {{ manifest.title }}
-              to satisfy {{ dependentInfo.title }}:
-              <ul>
-                <li *ngFor="let d of diff" [innerHtml]="d"></li>
-              </ul>
-              To accept these modifications, click "Save".
-            </ion-text>
-          </p>
-        </ion-label>
-      </ion-item>
-
-      <!-- no options -->
-      <ion-item *ngIf="!hasConfig">
-        <ion-label>
-          <p>
-            No config options for {{ manifest.title }} {{ manifest.version }}.
-          </p>
-        </ion-label>
-      </ion-item>
-
-      <!-- has config -->
-      <form
-        *ngIf="configForm && configSpec"
-        [formGroup]="configForm"
-        novalidate
-      >
-        <form-object
-          [objectSpec]="configSpec"
-          [formGroup]="configForm"
-          [current]="configForm.value"
-          [original]="original"
-          (hasNewOptions)="hasNewOptions = true"
-        ></form-object>
-      </form>
-    </ng-template>
-  </ng-template>
-</ion-content>
-
-<ion-footer>
-  <ion-toolbar>
-    <ng-container *ngIf="!loading && !loadingError">
-      <ion-buttons *ngIf="hasConfig" slot="start" class="ion-padding-start">
-        <ion-button fill="clear" (click)="resetDefaults()">
-          <ion-icon slot="start" name="refresh"></ion-icon>
-          Reset Defaults
-        </ion-button>
-      </ion-buttons>
-      <ion-buttons slot="end" class="ion-padding-end">
-        <ion-button
-          *ngIf="hasConfig"
-          fill="solid"
-          color="primary"
-          [disabled]="saving"
-          (click)="tryConfigure()"
-          class="enter-click btn-128"
-          [class.no-click]="saving"
-        >
-          Save
-        </ion-button>
-        <ion-button
-          *ngIf="!hasConfig"
-          fill="solid"
-          color="dark"
-          (click)="dismiss()"
-          class="enter-click btn-128"
-        >
-          Close
-        </ion-button>
-      </ion-buttons>
-    </ng-container>
-  </ion-toolbar>
-</ion-footer>

web/projects/ui/src/app/modals/app-config/app-config.page.scss

@@ -1,12 +0,0 @@
-.notifier-item {
-  margin: 12px;
-  margin-top: 0px;
-  border-radius: 12px;
-  // kills the lines
-  --border-width: 0;
-  --inner-border-width: 0;
-}
-
-.header-details {
-  font-size: 20px;
-}

web/projects/ui/src/app/modals/app-config/app-config.page.ts

@@ -1,349 +0,0 @@
-import { Component, Input } from '@angular/core'
-import {
-  AlertController,
-  ModalController,
-  LoadingController,
-  IonicSafeString,
-} from '@ionic/angular'
-import { ApiService } from 'src/app/services/api/embassy-api.service'
-import {
-  ErrorToastService,
-  getErrorMessage,
-  isEmptyObject,
-  isObject,
-} from '@start9labs/shared'
-import { DependentInfo } from 'src/app/types/dependent-info'
-import { ConfigSpec } from 'src/app/pkg-config/config-types'
-import {
-  DataModel,
-  InstalledState,
-  PackageDataEntry,
-} from 'src/app/services/patch-db/data-model'
-import { PatchDB } from 'patch-db-client'
-import { UntypedFormGroup } from '@angular/forms'
-import {
-  convertValuesRecursive,
-  FormService,
-} from 'src/app/services/form.service'
-import { compare, Operation, getValueByPointer } from 'fast-json-patch'
-import { hasCurrentDeps } from 'src/app/util/has-deps'
-import {
-  getAllPackages,
-  getManifest,
-  getPackage,
-  isInstalled,
-} from 'src/app/util/get-package-data'
-import { Breakages } from 'src/app/services/api/api.types'
-
-@Component({
-  selector: 'app-config',
-  templateUrl: './app-config.page.html',
-  styleUrls: ['./app-config.page.scss'],
-})
-export class AppConfigPage {
-  @Input() pkgId!: string
-
-  @Input() dependentInfo?: DependentInfo
-
-  pkg!: PackageDataEntry<InstalledState>
-  loadingText = ''
-
-  configSpec?: ConfigSpec
-  configForm?: UntypedFormGroup
-
-  original?: object // only if existing config
-  diff?: string[] // only if dependent info
-
-  loading = true
-  hasNewOptions = false
-  saving = false
-  loadingError: string | IonicSafeString = ''
-
-  constructor(
-    private readonly embassyApi: ApiService,
-    private readonly errToast: ErrorToastService,
-    private readonly loadingCtrl: LoadingController,
-    private readonly alertCtrl: AlertController,
-    private readonly modalCtrl: ModalController,
-    private readonly formService: FormService,
-    private readonly patch: PatchDB<DataModel>,
-  ) {}
-
-  get hasConfig() {
-    return this.pkg.stateInfo.manifest.hasConfig
-  }
-
-  async ngOnInit() {
-    try {
-      const pkg = await getPackage(this.patch, this.pkgId)
-      if (!pkg || !isInstalled(pkg)) return
-
-      this.pkg = pkg
-
-      if (!this.hasConfig) return
-
-      let newConfig: object | undefined
-      let patch: Operation[] | undefined
-
-      if (this.dependentInfo) {
-        this.loadingText = `Setting properties to accommodate ${this.dependentInfo.title}`
-        const {
-          oldConfig: oc,
-          newConfig: nc,
-          spec: s,
-        } = await this.embassyApi.dryConfigureDependency({
-          dependencyId: this.pkgId,
-          dependentId: this.dependentInfo.id,
-        })
-        this.original = oc
-        newConfig = nc
-        this.configSpec = s
-        patch = compare(this.original, newConfig)
-      } else {
-        this.loadingText = 'Loading Config'
-        const { config: c, spec: s } = await this.embassyApi.getPackageConfig({
-          id: this.pkgId,
-        })
-        this.original = c
-        this.configSpec = s
-      }
-
-      this.configForm = this.formService.createForm(
-        this.configSpec,
-        newConfig || this.original,
-      )
-
-      if (patch) {
-        this.diff = this.getDiff(patch)
-        this.markDirty(patch)
-      }
-    } catch (e: any) {
-      this.loadingError = getErrorMessage(e)
-    } finally {
-      this.loading = false
-    }
-  }
-
-  resetDefaults() {
-    this.configForm = this.formService.createForm(this.configSpec!)
-    const patch = compare(this.original || {}, this.configForm.value)
-    this.markDirty(patch)
-  }
-
-  async dismiss() {
-    if (this.configForm?.dirty) {
-      this.presentAlertUnsaved()
-    } else {
-      this.modalCtrl.dismiss()
-    }
-  }
-
-  async tryConfigure() {
-    convertValuesRecursive(this.configSpec!, this.configForm!)
-
-    if (this.configForm!.invalid) {
-      document
-        .getElementsByClassName('validation-error')[0]
-        ?.scrollIntoView({ behavior: 'smooth' })
-      return
-    }
-
-    this.saving = true
-
-    if (hasCurrentDeps(this.pkgId, await getAllPackages(this.patch))) {
-      this.dryConfigure()
-    } else {
-      this.configure()
-    }
-  }
-
-  private async dryConfigure() {
-    const loader = await this.loadingCtrl.create({
-      message: 'Checking dependent services...',
-    })
-    await loader.present()
-
-    try {
-      const breakages = await this.embassyApi.drySetPackageConfig({
-        id: this.pkgId,
-        config: this.configForm!.value,
-      })
-
-      if (isEmptyObject(breakages)) {
-        this.configure(loader)
-      } else {
-        await loader.dismiss()
-        const proceed = await this.presentAlertBreakages(breakages)
-        if (proceed) {
-          this.configure()
-        } else {
-          this.saving = false
-        }
-      }
-    } catch (e: any) {
-      this.errToast.present(e)
-      this.saving = false
-      loader.dismiss()
-    }
-  }
-
-  private async configure(loader?: HTMLIonLoadingElement) {
-    const message = 'Saving...'
-    if (loader) {
-      loader.message = message
-    } else {
-      loader = await this.loadingCtrl.create({ message })
-      await loader.present()
-    }
-
-    try {
-      await this.embassyApi.setPackageConfig({
-        id: this.pkgId,
-        config: this.configForm!.value,
-      })
-      this.modalCtrl.dismiss()
-    } catch (e: any) {
-      this.errToast.present(e)
-    } finally {
-      this.saving = false
-      loader.dismiss()
-    }
-  }
-
-  private async presentAlertBreakages(breakages: Breakages): Promise<boolean> {
-    let message: string =
-      'As a result of this change, the following services will no longer work properly and may crash:<ul>'
-    const localPkgs = await getAllPackages(this.patch)
-    const bullets = Object.keys(breakages).map(id => {
-      const title = getManifest(localPkgs[id]).title
-      return `<li><b>${title}</b></li>`
-    })
-    message = `${message}${bullets}</ul>`
-
-    return new Promise(async resolve => {
-      const alert = await this.alertCtrl.create({
-        header: 'Warning',
-        message,
-        buttons: [
-          {
-            text: 'Cancel',
-            role: 'cancel',
-            handler: () => {
-              resolve(false)
-            },
-          },
-          {
-            text: 'Continue',
-            handler: () => {
-              resolve(true)
-            },
-            cssClass: 'enter-click',
-          },
-        ],
-        cssClass: 'alert-warning-message',
-      })
-
-      await alert.present()
-    })
-  }
-
-  private getDiff(patch: Operation[]): string[] {
-    return patch.map(op => {
-      let message: string
-      switch (op.op) {
-        case 'add':
-          message = `Added ${this.getNewValue(op.value)}`
-          break
-        case 'remove':
-          message = `Removed ${this.getOldValue(op.path)}`
-          break
-        case 'replace':
-          message = `Changed from ${this.getOldValue(
-            op.path,
-          )} to ${this.getNewValue(op.value)}`
-          break
-        default:
-          message = `Unknown operation`
-      }
-
-      let displayPath: string
-
-      const arrPath = op.path
-        .substring(1)
-        .split('/')
-        .map(node => {
-          const num = Number(node)
-          return isNaN(num) ? node : num
-        })
-
-      if (typeof arrPath[arrPath.length - 1] === 'number') {
-        arrPath.pop()
-      }
-
-      displayPath = arrPath.join(' &rarr; ')
-
-      return `${displayPath}: ${message}`
-    })
-  }
-
-  private getOldValue(path: any): string {
-    const val = getValueByPointer(this.original, path)
-    if (['string', 'number', 'boolean'].includes(typeof val)) {
-      return val
-    } else if (isObject(val)) {
-      return 'entry'
-    } else {
-      return 'list'
-    }
-  }
-
-  private getNewValue(val: any): string {
-    if (['string', 'number', 'boolean'].includes(typeof val)) {
-      return val
-    } else if (isObject(val)) {
-      return 'new entry'
-    } else {
-      return 'new list'
-    }
-  }
-
-  private markDirty(patch: Operation[]) {
-    patch.forEach(op => {
-      const arrPath = op.path
-        .substring(1)
-        .split('/')
-        .map(node => {
-          const num = Number(node)
-          return isNaN(num) ? node : num
-        })
-
-      if (op.op !== 'remove') this.configForm!.get(arrPath)?.markAsDirty()
-
-      if (typeof arrPath[arrPath.length - 1] === 'number') {
-        const prevPath = arrPath.slice(0, arrPath.length - 1)
-        this.configForm!.get(prevPath)?.markAsDirty()
-      }
-    })
-  }
-
-  private async presentAlertUnsaved() {
-    const alert = await this.alertCtrl.create({
-      header: 'Unsaved Changes',
-      message: 'You have unsaved changes. Are you sure you want to leave?',
-      buttons: [
-        {
-          text: 'Cancel',
-          role: 'cancel',
-        },
-        {
-          text: `Leave`,
-          handler: () => {
-            this.modalCtrl.dismiss()
-          },
-          cssClass: 'enter-click',
-        },
-      ],
-    })
-    await alert.present()
-  }
-}

web/projects/ui/src/app/modals/app-recover-select/app-recover-select.page.ts

@@ -1,16 +1,12 @@
 import { Component, Input } from '@angular/core'
-import {
-  LoadingController,
-  ModalController,
-  IonicSafeString,
-} from '@ionic/angular'
-import { getErrorMessage } from '@start9labs/shared'
+import { IonicSafeString, ModalController } from '@ionic/angular'
+import { getErrorMessage, LoadingService } from '@start9labs/shared'
+import { PatchDB } from 'patch-db-client'
+import { take } from 'rxjs'
 import { BackupInfo } from 'src/app/services/api/api.types'
 import { ApiService } from 'src/app/services/api/embassy-api.service'
-import { PatchDB } from 'patch-db-client'
-import { AppRecoverOption } from './to-options.pipe'
 import { DataModel } from 'src/app/services/patch-db/data-model'
-import { take } from 'rxjs'
+import { AppRecoverOption } from './to-options.pipe'
 
 @Component({
   selector: 'app-recover-select',
@@ -30,7 +26,7 @@ export class AppRecoverSelectPage {
 
   constructor(
     private readonly modalCtrl: ModalController,
-    private readonly loadingCtrl: LoadingController,
+    private readonly loader: LoadingService,
     private readonly embassyApi: ApiService,
     private readonly patch: PatchDB<DataModel>,
   ) {}
@@ -45,10 +41,7 @@ export class AppRecoverSelectPage {
 
   async restore(options: AppRecoverOption[]): Promise<void> {
     const ids = options.filter(({ checked }) => !!checked).map(({ id }) => id)
-    const loader = await this.loadingCtrl.create({
-      message: 'Initializing...',
-    })
-    await loader.present()
+    const loader = this.loader.open('Initializing...').subscribe()
 
     try {
       await this.embassyApi.restorePackages({
@@ -61,7 +54,7 @@ export class AppRecoverSelectPage {
     } catch (e: any) {
       this.error = getErrorMessage(e)
     } finally {
-      loader.dismiss()
+      loader.unsubscribe()
     }
   }
 }

web/projects/ui/src/app/modals/config-dep.component.ts

@@ -0,0 +1,104 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  OnChanges,
+} from '@angular/core'
+import { compare, getValueByPointer, Operation } from 'fast-json-patch'
+import { isObject } from '@start9labs/shared'
+import { tuiIsNumber } from '@taiga-ui/cdk'
+import { CommonModule } from '@angular/common'
+import { TuiNotificationModule } from '@taiga-ui/core'
+
+@Component({
+  selector: 'config-dep',
+  template: `
+    <tui-notification>
+      <h3 style="margin: 0 0 0.5rem; font-size: 1.25rem;">
+        {{ package }}
+      </h3>
+      The following modifications have been made to {{ package }} to satisfy
+      {{ dep }}:
+      <ul>
+        <li *ngFor="let d of diff" [innerHTML]="d"></li>
+      </ul>
+      To accept these modifications, click "Save".
+    </tui-notification>
+  `,
+  standalone: true,
+  imports: [CommonModule, TuiNotificationModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ConfigDepComponent implements OnChanges {
+  @Input()
+  package = ''
+
+  @Input()
+  dep = ''
+
+  @Input()
+  original: object = {}
+
+  @Input()
+  value: object = {}
+
+  diff: string[] = []
+
+  ngOnChanges() {
+    this.diff = compare(this.original, this.value).map(
+      op => `${this.getPath(op)}: ${this.getMessage(op)}`,
+    )
+  }
+
+  private getPath(operation: Operation): string {
+    const path = operation.path
+      .substring(1)
+      .split('/')
+      .map(node => {
+        const num = Number(node)
+        return isNaN(num) ? node : num
+      })
+
+    if (tuiIsNumber(path[path.length - 1])) {
+      path.pop()
+    }
+
+    return path.join(' &rarr; ')
+  }
+
+  private getMessage(operation: Operation): string {
+    switch (operation.op) {
+      case 'add':
+        return `Added ${this.getNewValue(operation.value)}`
+      case 'remove':
+        return `Removed ${this.getOldValue(operation.path)}`
+      case 'replace':
+        return `Changed from ${this.getOldValue(
+          operation.path,
+        )} to ${this.getNewValue(operation.value)}`
+      default:
+        return `Unknown operation`
+    }
+  }
+
+  private getOldValue(path: any): string {
+    const val = getValueByPointer(this.original, path)
+    if (['string', 'number', 'boolean'].includes(typeof val)) {
+      return val
+    } else if (isObject(val)) {
+      return 'entry'
+    } else {
+      return 'list'
+    }
+  }
+
+  private getNewValue(val: any): string {
+    if (['string', 'number', 'boolean'].includes(typeof val)) {
+      return val
+    } else if (isObject(val)) {
+      return 'new entry'
+    } else {
+      return 'new list'
+    }
+  }
+}

web/projects/ui/src/app/modals/config.component.ts

@@ -0,0 +1,281 @@
+import { CommonModule } from '@angular/common'
+import { Component, Inject, ViewChild } from '@angular/core'
+import {
+  ErrorService,
+  getErrorMessage,
+  isEmptyObject,
+  LoadingService,
+} from '@start9labs/shared'
+import { CT } from '@start9labs/start-sdk'
+import { TuiButtonModule } from '@taiga-ui/experimental'
+import {
+  TuiDialogContext,
+  TuiDialogService,
+  TuiLoaderModule,
+  TuiModeModule,
+  TuiNotificationModule,
+} from '@taiga-ui/core'
+import { TUI_PROMPT, TuiPromptData } from '@taiga-ui/kit'
+import { POLYMORPHEUS_CONTEXT } from '@tinkoff/ng-polymorpheus'
+import { compare, Operation } from 'fast-json-patch'
+import { PatchDB } from 'patch-db-client'
+import { endWith, firstValueFrom, Subscription } from 'rxjs'
+import { ActionButton, FormComponent } from 'src/app/components/form.component'
+import { InvalidService } from 'src/app/components/form/invalid.service'
+import { ConfigDepComponent } from 'src/app/modals/config-dep.component'
+import { UiPipeModule } from 'src/app/pipes/ui/ui.module'
+import { ApiService } from 'src/app/services/api/embassy-api.service'
+import {
+  DataModel,
+  PackageDataEntry,
+} from 'src/app/services/patch-db/data-model'
+import {
+  getAllPackages,
+  getManifest,
+  getPackage,
+} from 'src/app/util/get-package-data'
+import { hasCurrentDeps } from 'src/app/util/has-deps'
+import { Breakages } from 'src/app/services/api/api.types'
+import { DependentInfo } from 'src/app/types/dependent-info'
+
+export interface PackageConfigData {
+  readonly pkgId: string
+  readonly dependentInfo?: DependentInfo
+}
+
+@Component({
+  template: `
+    <tui-loader
+      *ngIf="loadingText"
+      size="l"
+      [textContent]="loadingText"
+    ></tui-loader>
+
+    <tui-notification
+      *ngIf="!loadingText && (loadingError || !pkg)"
+      status="error"
+    >
+      <div [innerHTML]="loadingError"></div>
+    </tui-notification>
+
+    <ng-container
+      *ngIf="
+        !loadingText && !loadingError && pkg && (pkg | toManifest) as manifest
+      "
+    >
+      <tui-notification *ngIf="success" status="success">
+        {{ manifest.title }} has been automatically configured with recommended
+        defaults. Make whatever changes you want, then click "Save".
+      </tui-notification>
+
+      <config-dep
+        *ngIf="dependentInfo && value && original"
+        [package]="manifest.title"
+        [dep]="dependentInfo.title"
+        [original]="original"
+        [value]="value"
+      ></config-dep>
+
+      <tui-notification *ngIf="!manifest.hasConfig" status="warning">
+        No config options for {{ manifest.title }} {{ manifest.version }}.
+      </tui-notification>
+
+      <app-form
+        tuiMode="onDark"
+        [spec]="spec"
+        [value]="value || {}"
+        [buttons]="buttons"
+        [patch]="patch"
+      >
+        <button
+          tuiButton
+          appearance="flat"
+          type="reset"
+          [style.margin-right]="'auto'"
+        >
+          Reset Defaults
+        </button>
+      </app-form>
+    </ng-container>
+  `,
+  styles: [
+    `
+      tui-notification {
+        font-size: 1rem;
+        margin-bottom: 1rem;
+      }
+    `,
+  ],
+  standalone: true,
+  imports: [
+    CommonModule,
+    FormComponent,
+    TuiLoaderModule,
+    TuiNotificationModule,
+    TuiButtonModule,
+    TuiModeModule,
+    ConfigDepComponent,
+    UiPipeModule,
+  ],
+  providers: [InvalidService],
+})
+export class ConfigModal {
+  @ViewChild(FormComponent)
+  private readonly form?: FormComponent<Record<string, any>>
+
+  readonly pkgId = this.context.data.pkgId
+  readonly dependentInfo = this.context.data.dependentInfo
+
+  loadingError = ''
+  loadingText = this.dependentInfo
+    ? `Setting properties to accommodate ${this.dependentInfo.title}`
+    : 'Loading Config'
+
+  pkg?: PackageDataEntry
+  spec: CT.InputSpec = {}
+  patch: Operation[] = []
+  buttons: ActionButton<any>[] = [
+    {
+      text: 'Save',
+      handler: value => this.save(value),
+    },
+  ]
+
+  original: object | null = null
+  value: object | null = null
+
+  constructor(
+    @Inject(POLYMORPHEUS_CONTEXT)
+    private readonly context: TuiDialogContext<void, PackageConfigData>,
+    private readonly dialogs: TuiDialogService,
+    private readonly errorService: ErrorService,
+    private readonly loader: LoadingService,
+    private readonly embassyApi: ApiService,
+    private readonly patchDb: PatchDB<DataModel>,
+  ) {}
+
+  get success(): boolean {
+    return (
+      !!this.form &&
+      !this.form.form.dirty &&
+      !this.original &&
+      !this.pkg?.status?.configured
+    )
+  }
+
+  async ngOnInit() {
+    try {
+      this.pkg = await getPackage(this.patchDb, this.pkgId)
+
+      if (!this.pkg) {
+        this.loadingError = 'This service does not exist'
+
+        return
+      }
+
+      if (this.dependentInfo) {
+        const depConfig = await this.embassyApi.dryConfigureDependency({
+          dependencyId: this.pkgId,
+          dependentId: this.dependentInfo.id,
+        })
+
+        this.original = depConfig.oldConfig
+        this.value = depConfig.newConfig || this.original
+        this.spec = depConfig.spec
+        this.patch = compare(this.original, this.value)
+      } else {
+        const { config, spec } = await this.embassyApi.getPackageConfig({
+          id: this.pkgId,
+        })
+
+        this.original = config
+        this.value = config
+        this.spec = spec
+      }
+    } catch (e: any) {
+      this.loadingError = String(getErrorMessage(e))
+    } finally {
+      this.loadingText = ''
+    }
+  }
+
+  private async save(config: any) {
+    const loader = new Subscription()
+
+    try {
+      await this.uploadFiles(config, loader)
+
+      if (hasCurrentDeps(this.pkgId, await getAllPackages(this.patchDb))) {
+        await this.configureDeps(config, loader)
+      } else {
+        await this.configure(config, loader)
+      }
+    } catch (e: any) {
+      this.errorService.handleError(e)
+    } finally {
+      loader.unsubscribe()
+    }
+  }
+
+  private async uploadFiles(config: Record<string, any>, loader: Subscription) {
+    loader.unsubscribe()
+    loader.closed = false
+
+    // TODO: Could be nested files
+    const keys = Object.keys(config).filter(key => config[key] instanceof File)
+    const message = `Uploading File${keys.length > 1 ? 's' : ''}...`
+
+    if (!keys.length) return
+
+    loader.add(this.loader.open(message).subscribe())
+
+    const hashes = await Promise.all(
+      keys.map(key => this.embassyApi.uploadFile(config[key])),
+    )
+    keys.forEach((key, i) => (config[key] = hashes[i]))
+  }
+
+  private async configureDeps(
+    config: Record<string, any>,
+    loader: Subscription,
+  ) {
+    loader.unsubscribe()
+    loader.closed = false
+    loader.add(this.loader.open('Checking dependent services...').subscribe())
+
+    const breakages = await this.embassyApi.drySetPackageConfig({
+      id: this.pkgId,
+      config,
+    })
+
+    loader.unsubscribe()
+    loader.closed = false
+
+    if (isEmptyObject(breakages) || (await this.approveBreakages(breakages))) {
+      await this.configure(config, loader)
+    }
+  }
+
+  private async configure(config: Record<string, any>, loader: Subscription) {
+    loader.unsubscribe()
+    loader.closed = false
+    loader.add(this.loader.open('Saving...').subscribe())
+
+    await this.embassyApi.setPackageConfig({ id: this.pkgId, config })
+    this.context.$implicit.complete()
+  }
+
+  private async approveBreakages(breakages: Breakages): Promise<boolean> {
+    const packages = await getAllPackages(this.patchDb)
+    const message =
+      'As a result of this change, the following services will no longer work properly and may crash:<ul>'
+    const content = `${message}${Object.keys(breakages).map(
+      id => `<li><b>${getManifest(packages[id]).title}</b></li>`,
+    )}</ul>`
+    const data: TuiPromptData = { content, yes: 'Continue', no: 'Cancel' }
+
+    return firstValueFrom(
+      this.dialogs.open<boolean>(TUI_PROMPT, { data }).pipe(endWith(false)),
+    )
+  }
+}

web/projects/ui/src/app/modals/enum-list/enum-list.module.ts

@@ -1,12 +0,0 @@
-import { NgModule } from '@angular/core'
-import { CommonModule } from '@angular/common'
-import { IonicModule } from '@ionic/angular'
-import { EnumListPage } from './enum-list.page'
-import { FormsModule } from '@angular/forms'
-
-@NgModule({
-  declarations: [EnumListPage],
-  imports: [CommonModule, IonicModule, FormsModule],
-  exports: [EnumListPage],
-})
-export class EnumListPageModule {}

web/projects/ui/src/app/modals/enum-list/enum-list.page.html

@@ -1,45 +0,0 @@
-<ion-header>
-  <ion-toolbar>
-    <ion-title>{{ spec.name }}</ion-title>
-    <ion-buttons slot="end">
-      <ion-button (click)="dismiss()">
-        <ion-icon slot="icon-only" name="close"></ion-icon>
-      </ion-button>
-    </ion-buttons>
-  </ion-toolbar>
-</ion-header>
-
-<ion-content>
-  <ion-item-group>
-    <ion-item-divider style="padding-bottom: 6px">
-      <ion-buttons slot="end">
-        <ion-button fill="clear" (click)="toggleSelectAll()">
-          <b>{{ selectAll ? 'Select All' : 'Deselect All' }}</b>
-        </ion-button>
-      </ion-buttons>
-    </ion-item-divider>
-    <ion-item *ngFor="let option of options | keyvalue : asIsOrder">
-      <ion-label>{{ spec.spec['value-names'][option.key] }}</ion-label>
-      <ion-checkbox
-        slot="end"
-        [(ngModel)]="option.value"
-        (click)="toggleSelected(option.key)"
-      ></ion-checkbox>
-    </ion-item>
-  </ion-item-group>
-</ion-content>
-
-<ion-footer>
-  <ion-toolbar>
-    <ion-buttons slot="end" class="ion-padding-end">
-      <ion-button
-        fill="solid"
-        color="primary"
-        (click)="save()"
-        class="enter-click btn-128"
-      >
-        Done
-      </ion-button>
-    </ion-buttons>
-  </ion-toolbar>
-</ion-footer>

web/projects/ui/src/app/modals/enum-list/enum-list.page.ts

@@ -1,50 +0,0 @@
-import { Component, Input } from '@angular/core'
-import { ModalController } from '@ionic/angular'
-import { ValueSpecListOf } from 'src/app/pkg-config/config-types'
-
-@Component({
-  selector: 'enum-list',
-  templateUrl: './enum-list.page.html',
-  styleUrls: ['./enum-list.page.scss'],
-})
-export class EnumListPage {
-  @Input() key!: string
-  @Input() spec!: ValueSpecListOf<'enum'>
-  @Input() current: string[] = []
-
-  options: { [option: string]: boolean } = {}
-  selectAll = false
-
-  constructor(private readonly modalCtrl: ModalController) {}
-
-  ngOnInit() {
-    for (let val of this.spec.spec.values || []) {
-      this.options[val] = this.current.includes(val)
-    }
-    // if none are selected, set selectAll to true
-    this.selectAll = Object.values(this.options).some(k => !k)
-  }
-
-  dismiss() {
-    this.modalCtrl.dismiss()
-  }
-
-  save() {
-    this.modalCtrl.dismiss(
-      Object.keys(this.options).filter(key => this.options[key]),
-    )
-  }
-
-  toggleSelectAll() {
-    Object.keys(this.options).forEach(k => (this.options[k] = this.selectAll))
-    this.selectAll = !this.selectAll
-  }
-
-  toggleSelected(key: string) {
-    this.options[key] = !this.options[key]
-  }
-
-  asIsOrder() {
-    return 0
-  }
-}

web/projects/ui/src/app/modals/generic-form/generic-form.module.ts

@@ -1,19 +0,0 @@
-import { NgModule } from '@angular/core'
-import { CommonModule } from '@angular/common'
-import { IonicModule } from '@ionic/angular'
-import { GenericFormPage } from './generic-form.page'
-import { FormsModule, ReactiveFormsModule } from '@angular/forms'
-import { FormObjectComponentModule } from 'src/app/components/form-object/form-object.component.module'
-
-@NgModule({
-  declarations: [GenericFormPage],
-  imports: [
-    CommonModule,
-    IonicModule,
-    FormsModule,
-    ReactiveFormsModule,
-    FormObjectComponentModule,
-  ],
-  exports: [GenericFormPage],
-})
-export class GenericFormPageModule {}

web/projects/ui/src/app/modals/generic-form/generic-form.page.html

@@ -1,35 +0,0 @@
-<ion-header>
-  <ion-toolbar>
-    <ion-title>{{ title }}</ion-title>
-    <ion-buttons slot="end">
-      <ion-button (click)="dismiss()">
-        <ion-icon slot="icon-only" name="close"></ion-icon>
-      </ion-button>
-    </ion-buttons>
-  </ion-toolbar>
-</ion-header>
-
-<ion-content class="ion-padding">
-  <form
-    [formGroup]="formGroup"
-    (ngSubmit)="handleClick(submitBtn.handler)"
-    novalidate
-  >
-    <form-object [objectSpec]="spec" [formGroup]="formGroup"></form-object>
-    <button hidden type="submit"></button>
-  </form>
-</ion-content>
-
-<ion-footer>
-  <ion-toolbar class="footer">
-    <ion-buttons slot="end">
-      <ion-button
-        class="ion-padding-end"
-        *ngFor="let button of buttons"
-        (click)="handleClick(button.handler)"
-      >
-        {{ button.text }}
-      </ion-button>
-    </ion-buttons>
-  </ion-toolbar>
-</ion-footer>

web/projects/ui/src/app/modals/generic-form/generic-form.page.scss

@@ -1,9 +0,0 @@
-button:disabled,
-button[disabled]{
-  border: 1px solid #999999;
-  background-color: #cccccc;
-  color: #666666;
-}
-button {
-  color: var(--ion-color-primary);
-}

web/projects/ui/src/app/modals/generic-form/generic-form.page.ts

@@ -1,61 +0,0 @@
-import { Component, Input } from '@angular/core'
-import { UntypedFormGroup } from '@angular/forms'
-import { ModalController } from '@ionic/angular'
-import {
-  convertValuesRecursive,
-  FormService,
-} from 'src/app/services/form.service'
-import { ConfigSpec } from 'src/app/pkg-config/config-types'
-
-export interface ActionButton {
-  text: string
-  handler: (value: any) => Promise<boolean>
-  isSubmit?: boolean
-}
-
-@Component({
-  selector: 'generic-form',
-  templateUrl: './generic-form.page.html',
-  styleUrls: ['./generic-form.page.scss'],
-})
-export class GenericFormPage {
-  @Input() title!: string
-  @Input() spec!: ConfigSpec
-  @Input() buttons!: ActionButton[]
-  @Input() initialValue: object = {}
-
-  submitBtn!: ActionButton
-  formGroup!: UntypedFormGroup
-
-  constructor(
-    private readonly modalCtrl: ModalController,
-    private readonly formService: FormService,
-  ) {}
-
-  ngOnInit() {
-    this.formGroup = this.formService.createForm(this.spec, this.initialValue)
-    this.submitBtn = this.buttons.find(btn => btn.isSubmit) || {
-      text: '',
-      handler: () => Promise.resolve(true),
-    }
-  }
-
-  async dismiss(): Promise<void> {
-    this.modalCtrl.dismiss()
-  }
-
-  async handleClick(handler: ActionButton['handler']): Promise<void> {
-    convertValuesRecursive(this.spec, this.formGroup)
-
-    if (this.formGroup.invalid) {
-      document
-        .getElementsByClassName('validation-error')[0]
-        ?.scrollIntoView({ behavior: 'smooth' })
-      return
-    }
-
-    // @TODO make this more like generic input component dismissal
-    const success = await handler(this.formGroup.value)
-    if (success !== false) this.modalCtrl.dismiss()
-  }
-}

web/projects/ui/src/app/modals/generic-input/generic-input.component.html

@@ -1,67 +0,0 @@
-<ion-content>
-  <div
-    style="margin: 24px 24px 12px 24px; display: flex; flex-direction: column"
-  >
-    <ion-item style="padding-bottom: 8px">
-      <ion-label>
-        <h1>{{ options.title }}</h1>
-        <br />
-        <p>{{ options.message }}</p>
-        <ng-container *ngIf="options.warning">
-          <br />
-          <p>
-            <ion-text color="warning">{{ options.warning }}</ion-text>
-          </p>
-        </ng-container>
-      </ion-label>
-    </ion-item>
-
-    <form (ngSubmit)="submit()">
-      <div style="margin: 0 0 24px 16px">
-        <p class="input-label">{{ options.label }}</p>
-        <ion-item
-          lines="none"
-          [color]="(theme$ | async) === 'Light' ? 'light' : 'dark'"
-        >
-          <ion-input
-            #mainInput
-            type="text"
-            name="value"
-            [ngModel]="masked ? maskedValue : value"
-            (ngModelChange)="transformInput($event)"
-            [placeholder]="options.placeholder"
-            (ionChange)="error = ''"
-          ></ion-input>
-          <ion-button
-            slot="end"
-            *ngIf="options.useMask"
-            fill="clear"
-            color="light"
-            (click)="toggleMask()"
-          >
-            <ion-icon
-              slot="icon-only"
-              [name]="!masked ? 'eye-off-outline' : 'eye-outline'"
-              size="small"
-            ></ion-icon>
-          </ion-button>
-        </ion-item>
-        <!-- error -->
-        <p *ngIf="error">
-          <ion-text color="danger">{{ error }}</ion-text>
-        </p>
-      </div>
-
-      <div class="ion-text-right">
-        <ion-button fill="clear" (click)="cancel()">Cancel</ion-button>
-        <ion-button
-          fill="clear"
-          type="submit"
-          [disabled]="!value && !options.nullable"
-        >
-          {{ options.buttonText }}
-        </ion-button>
-      </div>
-    </form>
-  </div>
-</ion-content>

web/projects/ui/src/app/modals/generic-input/generic-input.component.module.ts

@@ -1,20 +0,0 @@
-import { NgModule } from '@angular/core'
-import { CommonModule } from '@angular/common'
-import { GenericInputComponent } from './generic-input.component'
-import { IonicModule } from '@ionic/angular'
-import { RouterModule } from '@angular/router'
-import { SharedPipesModule } from '@start9labs/shared'
-import { FormsModule } from '@angular/forms'
-
-@NgModule({
-  declarations: [GenericInputComponent],
-  imports: [
-    CommonModule,
-    IonicModule,
-    FormsModule,
-    RouterModule.forChild([]),
-    SharedPipesModule,
-  ],
-  exports: [GenericInputComponent],
-})
-export class GenericInputComponentModule {}

web/projects/ui/src/app/modals/generic-input/generic-input.component.ts

@@ -1,96 +0,0 @@
-import { Component, inject, Input, ViewChild } from '@angular/core'
-import { ModalController, IonicSafeString, IonInput } from '@ionic/angular'
-import { getErrorMessage, THEME } from '@start9labs/shared'
-import { MaskPipe } from 'src/app/pipes/mask/mask.pipe'
-
-@Component({
-  selector: 'generic-input',
-  templateUrl: './generic-input.component.html',
-  styleUrls: ['./generic-input.component.scss'],
-  providers: [MaskPipe],
-})
-export class GenericInputComponent {
-  @ViewChild('mainInput') elem?: IonInput
-
-  @Input() options!: GenericInputOptions
-
-  value!: string
-  masked!: boolean
-
-  maskedValue?: string
-
-  error: string | IonicSafeString = ''
-
-  readonly theme$ = inject(THEME)
-
-  constructor(
-    private readonly modalCtrl: ModalController,
-    private readonly mask: MaskPipe,
-  ) {}
-
-  ngOnInit() {
-    const defaultOptions: Partial<GenericInputOptions> = {
-      buttonText: 'Submit',
-      placeholder: 'Enter value',
-      nullable: false,
-      useMask: false,
-      initialValue: '',
-    }
-    this.options = {
-      ...defaultOptions,
-      ...this.options,
-    }
-
-    this.masked = !!this.options.useMask
-    this.value = this.options.initialValue || ''
-  }
-
-  ngAfterViewInit() {
-    setTimeout(() => this.elem?.setFocus(), 400)
-  }
-
-  toggleMask() {
-    this.masked = !this.masked
-  }
-
-  cancel() {
-    this.modalCtrl.dismiss()
-  }
-
-  transformInput(newValue: string) {
-    let i = 0
-    this.value = newValue
-      .split('')
-      .map(x => (x === '●' ? this.value[i++] : x))
-      .join('')
-    this.maskedValue = this.mask.transform(this.value)
-  }
-
-  async submit() {
-    const value = this.value.trim()
-
-    if (!value && !this.options.nullable) return
-
-    try {
-      await this.options.submitFn(value)
-      this.modalCtrl.dismiss(undefined, 'success')
-    } catch (e: any) {
-      this.error = getErrorMessage(e)
-    }
-  }
-}
-
-export interface GenericInputOptions {
-  // required
-  title: string
-  message: string
-  label: string
-  submitFn: (value: string) => Promise<any>
-  // optional
-  warning?: string
-  buttonText?: string
-  placeholder?: string
-  nullable?: boolean
-  useMask?: boolean
-  initialValue?: string
-}

web/projects/ui/src/app/modals/marketplace-settings/marketplace-settings.module.ts

@@ -1,17 +0,0 @@
-import { NgModule } from '@angular/core'
-import { CommonModule } from '@angular/common'
-import { IonicModule } from '@ionic/angular'
-import { MarketplaceSettingsPage } from './marketplace-settings.page'
-import { SharedPipesModule } from '@start9labs/shared'
-import { StoreIconComponentModule } from 'src/app/components/store-icon/store-icon.component.module'
-
-@NgModule({
-  imports: [
-    CommonModule,
-    IonicModule,
-    SharedPipesModule,
-    StoreIconComponentModule,
-  ],
-  declarations: [MarketplaceSettingsPage],
-})
-export class MarketplaceSettingsPageModule {}

web/projects/ui/src/app/modals/marketplace-settings/marketplace-settings.page.html

@@ -1,67 +1,30 @@
-<ion-header>
-  <ion-toolbar>
-    <ion-title>Change Registry</ion-title>
-    <ion-buttons slot="end">
-      <ion-button (click)="dismiss()">
-        <ion-icon slot="icon-only" name="close"></ion-icon>
-      </ion-button>
-    </ion-buttons>
-  </ion-toolbar>
-</ion-header>
-
-<ion-content class="ion-padding-top">
-  <ion-item-group *ngIf="stores$ | async as stores">
-    <ion-item-divider>Default Registries</ion-item-divider>
-    <ion-item
-      *ngFor="let s of stores.standard"
-      detail="false"
-      [button]="!s.selected"
-      (click)="s.selected ? '' : presentAction(s)"
+<ng-container *ngIf="stores$ | async as stores">
+  <h3 class="g-title">Default Registries</h3>
+  <button
+    *ngFor="let registry of stores.standard"
+    tuiCell
+    [disabled]="registry.selected"
+    [registry]="registry"
+    (click)="connect(registry.url)"
+  ></button>
+  <h3 class="g-title">Custom Registries</h3>
+  <button tuiCell (click)="add()" [style.width]="'-webkit-fill-available'">
+    <tui-icon icon="tuiIconPlus" [style.margin-inline.rem]="'0.5'"></tui-icon>
+    <div tuiTitle>Add custom registry</div>
+  </button>
+  <div *ngFor="let registry of stores.alt" class="connect-container">
+    <button
+      tuiCell
+      [registry]="registry"
+      (click)="connect(registry.url)"
+    ></button>
+    <button
+      tuiIconButton
+      appearance="icon"
+      iconLeft="tuiIconTrash"
+      (click)="delete(registry.url, registry.name)"
     >
-      <ion-avatar slot="start">
-        <store-icon [url]="s.url"></store-icon>
-      </ion-avatar>
-      <ion-label>
-        <h2>{{ s.name }}</h2>
-        <p>{{ s.url }}</p>
-      </ion-label>
-      <ion-icon
-        *ngIf="s.selected"
-        slot="end"
-        size="large"
-        name="checkmark"
-        color="success"
-      ></ion-icon>
-    </ion-item>
-
-    <ion-item-divider>Custom Registries</ion-item-divider>
-    <ion-item button detail="false" (click)="presentModalAdd()">
-      <ion-icon slot="start" name="add" color="dark"></ion-icon>
-      <ion-label>
-        <ion-text color="dark">
-          <b>Add custom registry</b>
-        </ion-text>
-      </ion-label>
-    </ion-item>
-
-    <ion-item
-      *ngFor="let a of stores.alt"
-      detail="false"
-      [button]="!a.selected"
-      (click)="a.selected ? '' : presentAction(a, true)"
-    >
-      <store-icon slot="start" [url]="a.url" size="36px"></store-icon>
-      <ion-label>
-        <h2>{{ a.name }}</h2>
-        <p>{{ a.url }}</p>
-      </ion-label>
-      <ion-icon
-        *ngIf="a.selected"
-        slot="end"
-        size="large"
-        name="checkmark"
-        color="success"
-      ></ion-icon>
-    </ion-item>
-  </ion-item-group>
-</ion-content>
+      Delete
+    </button>
+  </div>
+</ng-container>

web/projects/ui/src/app/modals/marketplace-settings/marketplace-settings.page.scss

@@ -0,0 +1,5 @@
+.connect-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}

web/projects/ui/src/app/modals/marketplace-settings/marketplace-settings.page.ts

@@ -1,276 +1,230 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  Inject,
-  ViewChild,
-} from '@angular/core'
-import {
-  ActionSheetController,
-  AlertController,
-  LoadingController,
-  ModalController,
-} from '@ionic/angular'
-import { ActionSheetButton } from '@ionic/core'
-import { ErrorToastService, sameUrl, toUrl } from '@start9labs/shared'
+import { CommonModule } from '@angular/common'
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
 import { AbstractMarketplaceService } from '@start9labs/marketplace'
-import { ApiService } from 'src/app/services/api/embassy-api.service'
-import { ValueSpecObject } from 'src/app/pkg-config/config-types'
-import { GenericFormPage } from 'src/app/modals/generic-form/generic-form.page'
+import {
+  ErrorService,
+  LoadingService,
+  sameUrl,
+  toUrl,
+} from '@start9labs/shared'
+import { CT } from '@start9labs/start-sdk'
+import { TuiDialogOptions, TuiDialogService } from '@taiga-ui/core'
+import {
+  TuiButtonModule,
+  TuiCellModule,
+  TuiIconModule,
+  TuiTitleModule,
+} from '@taiga-ui/experimental'
+import { TUI_PROMPT, TuiPromptData } from '@taiga-ui/kit'
+import { PolymorpheusComponent } from '@tinkoff/ng-polymorpheus'
 import { PatchDB } from 'patch-db-client'
-import { DataModel, UIStore } from 'src/app/services/patch-db/data-model'
-import { MarketplaceService } from 'src/app/services/marketplace.service'
+import { combineLatest, filter, firstValueFrom, Subscription } from 'rxjs'
 import { map } from 'rxjs/operators'
-import { combineLatest, firstValueFrom } from 'rxjs'
+import { FormComponent } from 'src/app/components/form.component'
+import { ApiService } from 'src/app/services/api/embassy-api.service'
+import { FormDialogService } from 'src/app/services/form-dialog.service'
+import { MarketplaceService } from 'src/app/services/marketplace.service'
+import { DataModel, UIStore } from 'src/app/services/patch-db/data-model'
+
+import { MarketplaceRegistryComponent } from './registry.component'
 
 @Component({
+  standalone: true,
+  imports: [
+    CommonModule,
+    TuiCellModule,
+    TuiIconModule,
+    TuiTitleModule,
+    TuiButtonModule,
+    MarketplaceRegistryComponent,
+  ],
   selector: 'marketplace-settings',
   templateUrl: 'marketplace-settings.page.html',
   styleUrls: ['marketplace-settings.page.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MarketplaceSettingsPage {
-  stores$ = combineLatest([
-    this.marketplaceService.getKnownHosts$(),
-    this.marketplaceService.getSelectedHost$(),
-  ]).pipe(
-    map(([stores, selected]) => {
-      const toSlice = stores.map(s => ({
-        ...s,
-        selected: sameUrl(s.url, selected.url),
-      }))
-      // 0 and 1 are prod and community
-      const standard = toSlice.slice(0, 2)
-      // 2 and beyond are alts
-      const alt = toSlice.slice(2)
-
-      return { standard, alt }
-    }),
+  private readonly api = inject(ApiService)
+  private readonly loader = inject(LoadingService)
+  private readonly errorService = inject(ErrorService)
+  private readonly formDialog = inject(FormDialogService)
+  private readonly dialogs = inject(TuiDialogService)
+  private readonly marketplace = inject(
+    AbstractMarketplaceService,
+  ) as MarketplaceService
+  private readonly hosts$ = inject(PatchDB<DataModel>).watch$(
+    'ui',
+    'marketplace',
+    'knownHosts',
   )
 
-  constructor(
-    private readonly api: ApiService,
-    private readonly loadingCtrl: LoadingController,
-    private readonly modalCtrl: ModalController,
-    private readonly errToast: ErrorToastService,
-    private readonly actionCtrl: ActionSheetController,
-    @Inject(AbstractMarketplaceService)
-    private readonly marketplaceService: MarketplaceService,
-    private readonly patch: PatchDB<DataModel>,
-    private readonly alertCtrl: AlertController,
-  ) {}
+  readonly stores$ = combineLatest([
+    this.marketplace.getKnownHosts$(),
+    this.marketplace.getSelectedHost$(),
+  ]).pipe(
+    map(([stores, selected]) =>
+      stores.map(s => ({
+        ...s,
+        selected: sameUrl(s.url, selected.url),
+      })),
+    ),
+    // 0 and 1 are prod and community, 2 and beyond are alts
+    map(stores => ({ standard: stores.slice(0, 2), alt: stores.slice(2) })),
+  )
 
-  async dismiss() {
-    this.modalCtrl.dismiss()
-  }
-
-  async presentModalAdd() {
+  async add() {
     const { name, spec } = getMarketplaceValueSpec()
-    const modal = await this.modalCtrl.create({
-      component: GenericFormPage,
-      componentProps: {
-        title: name,
+
+    this.formDialog.open(FormComponent, {
+      label: name,
+      data: {
         spec,
         buttons: [
           {
             text: 'Save for Later',
-            handler: (value: { url: string }) => {
-              this.saveOnly(value.url)
-            },
+            handler: async ({ url }: { url: string }) => this.save(url),
           },
           {
             text: 'Save and Connect',
-            handler: (value: { url: string }) => {
-              this.saveAndConnect(value.url)
-            },
+            handler: async ({ url }: { url: string }) => this.save(url, true),
             isSubmit: true,
           },
         ],
       },
-      cssClass: 'alertlike-modal',
     })
-
-    await modal.present()
   }
+  delete(url: string, name: string = '') {
+    this.dialogs
+      .open(TUI_PROMPT, getPromptOptions(name))
+      .pipe(filter(Boolean))
+      .subscribe(async () => {
+        const loader = this.loader.open('Deleting...').subscribe()
+        const hosts = await firstValueFrom(this.hosts$)
+        const filtered: { [url: string]: UIStore } = Object.keys(hosts)
+          .filter(key => !sameUrl(key, url))
+          .reduce(
+            (prev, curr) => ({
+              ...prev,
+              [curr]: hosts[curr],
+            }),
+            {},
+          )
 
-  async presentAction(
-    { url, name }: { url: string; name?: string },
-    canDelete = false,
-  ) {
-    const buttons: ActionSheetButton[] = [
-      {
-        text: 'Connect',
-        handler: () => {
-          this.connect(url)
-        },
-      },
-    ]
-
-    if (canDelete) {
-      buttons.unshift({
-        text: 'Delete',
-        role: 'destructive',
-        handler: () => {
-          this.presentAlertDelete(url, name!)
-        },
+        try {
+          await this.api.setDbValue(['marketplace', 'knownHosts'], filtered)
+        } catch (e: any) {
+          this.errorService.handleError(e)
+        } finally {
+          loader.unsubscribe()
+        }
       })
-    }
-
-    const action = await this.actionCtrl.create({
-      header: name,
-      mode: 'ios',
-      buttons,
-    })
-
-    await action.present()
   }
 
-  private async presentAlertDelete(url: string, name: string) {
-    const alert = await this.alertCtrl.create({
-      header: 'Confirm',
-      message: `Are you sure you want to delete ${name}?`,
-      buttons: [
-        {
-          text: 'Cancel',
-          role: 'cancel',
-        },
-        {
-          text: 'Delete',
-          handler: () => this.delete(url),
-          cssClass: 'enter-click',
-        },
-      ],
-    })
-
-    await alert.present()
-  }
-
-  private async connect(
+  async connect(
     url: string,
-    loader?: HTMLIonLoadingElement,
+    loader: Subscription = new Subscription(),
   ): Promise<void> {
-    const message = 'Changing Registry...'
-    if (!loader) {
-      loader = await this.loadingCtrl.create({ message })
-      await loader.present()
-    } else {
-      loader.message = message
-    }
+    loader.unsubscribe()
+    loader.closed = false
+    loader.add(this.loader.open('Changing Registry...').subscribe())
 
     try {
-      await this.api.setDbValue<string>(['marketplace', 'selected-url'], url)
+      await this.api.setDbValue<string>(['marketplace', 'selectedUrl'], url)
     } catch (e: any) {
-      this.errToast.present(e)
+      this.errorService.handleError(e)
     } finally {
-      loader.dismiss()
-      this.dismiss()
+      loader.unsubscribe()
     }
   }
 
-  private async saveOnly(rawUrl: string): Promise<void> {
-    const loader = await this.loadingCtrl.create()
+  private async save(rawUrl: string, connect = false): Promise<boolean> {
+    const loader = this.loader.open('Loading').subscribe()
+    const url = new URL(rawUrl).toString()
 
     try {
-      const url = new URL(rawUrl).toString()
       await this.validateAndSave(url, loader)
+      if (connect) await this.connect(url, loader)
+      return true
     } catch (e: any) {
-      this.errToast.present(e)
+      this.errorService.handleError(e)
+      return false
     } finally {
-      loader.dismiss()
-    }
-  }
-
-  private async saveAndConnect(rawUrl: string): Promise<void> {
-    const loader = await this.loadingCtrl.create()
-
-    try {
-      const url = new URL(rawUrl).toString()
-      await this.validateAndSave(url, loader)
-      await this.connect(url, loader)
-    } catch (e: any) {
-      this.errToast.present(e)
-    } finally {
-      loader.dismiss()
-      this.dismiss()
+      loader.unsubscribe()
     }
   }
 
   private async validateAndSave(
     url: string,
-    loader: HTMLIonLoadingElement,
+    loader: Subscription,
   ): Promise<void> {
     // Error on duplicates
-    const hosts = await firstValueFrom(
-      this.patch.watch$('ui', 'marketplace', 'knownHosts'),
-    )
+    const hosts = await firstValueFrom(this.hosts$)
     const currentUrls = Object.keys(hosts).map(toUrl)
-    if (currentUrls.includes(url)) throw new Error('marketplace already added')
+    if (currentUrls.includes(url)) throw new Error('Marketplace already added')
 
     // Validate
-    loader.message = 'Validating marketplace...'
-    await loader.present()
+    loader.unsubscribe()
+    loader.closed = false
+    loader.add(this.loader.open('Validating marketplace...').subscribe())
 
-    const { name } = await firstValueFrom(
-      this.marketplaceService.fetchInfo$(url),
-    )
+    const { name } = await firstValueFrom(this.marketplace.fetchInfo$(url))
 
     // Save
-    loader.message = 'Saving...'
+    loader.unsubscribe()
+    loader.closed = false
+    loader.add(this.loader.open('Saving...').subscribe())
 
-    await this.api.setDbValue<{ name: string }>(
-      ['marketplace', 'knownHosts', url],
-      { name },
-    )
-  }
-
-  private async delete(url: string): Promise<void> {
-    const loader = await this.loadingCtrl.create({
-      message: 'Deleting...',
-    })
-    await loader.present()
-
-    const hosts = await firstValueFrom(
-      this.patch.watch$('ui', 'marketplace', 'knownHosts'),
-    )
-
-    const filtered: { [url: string]: UIStore } = Object.keys(hosts)
-      .filter(key => !sameUrl(key, url))
-      .reduce((prev, curr) => {
-        const name = hosts[curr]
-        return {
-          ...prev,
-          [curr]: name,
-        }
-      }, {})
-
-    try {
-      await this.api.setDbValue<{ [url: string]: UIStore }>(
-        ['marketplace', 'knownHosts'],
-        filtered,
-      )
-    } catch (e: any) {
-      this.errToast.present(e)
-    } finally {
-      loader.dismiss()
-    }
+    await this.api.setDbValue(['marketplace', 'knownHosts', url], { name })
   }
 }
 
-function getMarketplaceValueSpec(): ValueSpecObject {
+export const MARKETPLACE_REGISTRY = new PolymorpheusComponent(
+  MarketplaceSettingsPage,
+)
+
+function getMarketplaceValueSpec(): CT.ValueSpecObject {
   return {
     type: 'object',
     name: 'Add Custom Registry',
+    description: null,
+    warning: null,
     spec: {
       url: {
-        type: 'string',
+        type: 'text',
         name: 'URL',
         description: 'A fully-qualified URL of the custom registry',
-        nullable: false,
+        inputmode: 'url',
+        required: true,
         masked: false,
-        copyable: false,
-        pattern: `https?:\/\/[a-zA-Z0-9][a-zA-Z0-9-\.]+[a-zA-Z0-9]\.[^\s]{2,}`,
-        'pattern-description': 'Must be a valid URL',
+        minLength: null,
+        maxLength: null,
+        patterns: [
+          {
+            regex: `https?:\/\/[a-zA-Z0-9][a-zA-Z0-9-\.]+[a-zA-Z0-9]\.[^\s]{2,}`,
+            description: 'Must be a valid URL',
+          },
+        ],
         placeholder: 'e.g. https://example.org',
+        default: null,
+        warning: null,
+        disabled: false,
+        immutable: false,
+        generate: null,
       },
     },
   }
 }
+
+function getPromptOptions(
+  name: string,
+): Partial<TuiDialogOptions<TuiPromptData>> {
+  return {
+    label: 'Confirm',
+    size: 's',
+    data: {
+      content: `Are you sure you want to delete ${name}?`,
+      yes: 'Delete',
+      no: 'Cancel',
+    },
+  }
+}

web/projects/ui/src/app/modals/marketplace-settings/registry.component.ts

@@ -0,0 +1,42 @@
+import { NgIf } from '@angular/common'
+import {
+  ChangeDetectionStrategy,
+  Component,
+  inject,
+  Input,
+} from '@angular/core'
+import { TuiIconModule, TuiTitleModule } from '@taiga-ui/experimental'
+import { ConfigService } from 'src/app/services/config.service'
+
+import { StoreIconComponent } from './store-icon.component'
+
+@Component({
+  standalone: true,
+  selector: '[registry]',
+  template: `
+    <store-icon
+      [url]="registry.url"
+      [marketplace]="marketplace"
+      size="40px"
+    ></store-icon>
+    <div tuiTitle>
+      {{ registry.name }}
+      <div tuiSubtitle>{{ registry.url }}</div>
+    </div>
+    <tui-icon
+      *ngIf="registry.selected; else content"
+      icon="tuiIconCheck"
+      [style.color]="'var(--tui-positive)'"
+    ></tui-icon>
+    <ng-template #content><ng-content></ng-content></ng-template>
+  `,
+  styles: [':host { border-radius: 0.25rem; width: stretch; }'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [NgIf, StoreIconComponent, TuiIconModule, TuiTitleModule],
+})
+export class MarketplaceRegistryComponent {
+  readonly marketplace = inject(ConfigService).marketplace
+
+  @Input()
+  registry!: { url: string; selected: boolean; name?: string }
+}

web/projects/ui/src/app/modals/marketplace-settings/store-icon.component.ts

@@ -0,0 +1,46 @@
+import { NgIf } from '@angular/common'
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
+import { sameUrl } from '@start9labs/shared'
+
+@Component({
+  standalone: true,
+  selector: 'store-icon',
+  template: `
+    <img
+      *ngIf="icon; else noIcon"
+      [style.border-radius.%]="100"
+      [style.max-width]="size || '100%'"
+      [src]="icon"
+      alt="Marketplace Icon"
+    />
+    <ng-template #noIcon>
+      <img
+        [style.max-width]="size || '100%'"
+        [style.border-radius]="0"
+        src="assets/img/storefront-outline.png"
+        alt="Marketplace Icon"
+      />
+    </ng-template>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [NgIf],
+})
+export class StoreIconComponent {
+  @Input()
+  url = ''
+  @Input()
+  size?: string
+  @Input()
+  marketplace!: any
+
+  get icon() {
+    const { start9, community } = this.marketplace
+
+    if (sameUrl(this.url, start9)) {
+      return 'assets/img/icon_transparent.png'
+    } else if (sameUrl(this.url, community)) {
+      return 'assets/img/community-store.png'
+    }
+    return null
+  }
+}

web/projects/ui/src/app/modals/os-update/os-update.page.ts

@@ -1,8 +1,8 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core'
-import { LoadingController, ModalController } from '@ionic/angular'
-import { ApiService } from '../../services/api/embassy-api.service'
-import { ErrorToastService } from '@start9labs/shared'
+import { ModalController } from '@ionic/angular'
+import { ErrorService, LoadingService } from '@start9labs/shared'
 import { EOSService } from 'src/app/services/eos.service'
+import { ApiService } from '../../services/api/embassy-api.service'
 
 @Component({
   selector: 'os-update',
@@ -15,8 +15,8 @@ export class OSUpdatePage {
 
   constructor(
     private readonly modalCtrl: ModalController,
-    private readonly loadingCtrl: LoadingController,
-    private readonly errToast: ErrorToastService,
+    private readonly loader: LoadingService,
+    private readonly errorService: ErrorService,
     private readonly embassyApi: ApiService,
     private readonly eosService: EOSService,
   ) {}
@@ -39,18 +39,15 @@ export class OSUpdatePage {
   }
 
   async updateEOS() {
-    const loader = await this.loadingCtrl.create({
-      message: 'Beginning update...',
-    })
-    await loader.present()
+    const loader = this.loader.open('Beginning update...').subscribe()
 
     try {
       await this.embassyApi.updateServer()
       this.dismiss()
     } catch (e: any) {
-      this.errToast.present(e)
+      this.errorService.handleError(e)
     } finally {
-      loader.dismiss()
+      loader.unsubscribe()
     }
   }
 

web/projects/ui/src/app/modals/prompt.component.ts

@@ -0,0 +1,123 @@
+import { CommonModule } from '@angular/common'
+import { ChangeDetectionStrategy, Component, Inject } from '@angular/core'
+import { FormsModule } from '@angular/forms'
+import { TuiAutoFocusModule } from '@taiga-ui/cdk'
+import { TuiDialogContext, TuiTextfieldControllerModule } from '@taiga-ui/core'
+import { TuiButtonModule } from '@taiga-ui/experimental'
+import { TuiInputModule } from '@taiga-ui/kit'
+import {
+  POLYMORPHEUS_CONTEXT,
+  PolymorpheusComponent,
+} from '@tinkoff/ng-polymorpheus'
+
+@Component({
+  standalone: true,
+  template: `
+    <p>{{ options.message }}</p>
+    <p *ngIf="options.warning" class="warning">{{ options.warning }}</p>
+    <form (ngSubmit)="submit(value.trim())">
+      <tui-input
+        tuiAutoFocus
+        [tuiTextfieldLabelOutside]="!options.label"
+        [tuiTextfieldCustomContent]="options.useMask ? toggle : ''"
+        [ngModelOptions]="{ standalone: true }"
+        [(ngModel)]="value"
+      >
+        {{ options.label }}
+        <span *ngIf="options.required !== false && options.label">*</span>
+        <input
+          tuiTextfield
+          [class.masked]="options.useMask && masked && value"
+          [placeholder]="options.placeholder || ''"
+        />
+      </tui-input>
+      <footer class="g-buttons">
+        <button
+          tuiButton
+          type="button"
+          appearance="secondary"
+          (click)="cancel()"
+        >
+          Cancel
+        </button>
+        <button tuiButton [disabled]="!value && options.required !== false">
+          {{ options.buttonText || 'Submit' }}
+        </button>
+      </footer>
+    </form>
+
+    <ng-template #toggle>
+      <button
+        tuiIconButton
+        type="button"
+        appearance="icon"
+        title="Toggle masking"
+        size="xs"
+        class="button"
+        [iconLeft]="masked ? 'tuiIconEye' : 'tuiIconEyeOff'"
+        (click)="masked = !masked"
+      ></button>
+    </ng-template>
+  `,
+  styles: [
+    `
+      .warning {
+        color: var(--tui-warning-fill);
+      }
+
+      .button {
+        pointer-events: auto;
+        margin-left: 0.25rem;
+      }
+
+      .masked {
+        -webkit-text-security: disc;
+      }
+    `,
+  ],
+  imports: [
+    CommonModule,
+    FormsModule,
+    TuiInputModule,
+    TuiButtonModule,
+    TuiTextfieldControllerModule,
+    TuiAutoFocusModule,
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class PromptModal {
+  masked = this.options.useMask
+  value = this.options.initialValue || ''
+
+  constructor(
+    @Inject(POLYMORPHEUS_CONTEXT)
+    private readonly context: TuiDialogContext<string, PromptOptions>,
+  ) {}
+
+  get options(): PromptOptions {
+    return this.context.data
+  }
+
+  cancel() {
+    this.context.$implicit.complete()
+  }
+
+  submit(value: string) {
+    if (value || !this.options.required) {
+      this.context.$implicit.next(value)
+    }
+  }
+}
+
+export const PROMPT = new PolymorpheusComponent(PromptModal)
+
+export interface PromptOptions {
+  message: string
+  label?: string
+  warning?: string
+  buttonText?: string
+  placeholder?: string
+  required?: boolean
+  useMask?: boolean
+  initialValue?: string | null
+}

web/projects/ui/src/app/pages/apps-routes/app-actions/app-actions.module.ts

@@ -5,7 +5,6 @@ import { IonicModule } from '@ionic/angular'
 import { AppActionsPage, AppActionsItemComponent } from './app-actions.page'
 import { QRComponentModule } from 'src/app/components/qr/qr.component.module'
 import { SharedPipesModule } from '@start9labs/shared'
-import { GenericFormPageModule } from 'src/app/modals/generic-form/generic-form.module'
 import { ActionSuccessPageModule } from 'src/app/modals/action-success/action-success.module'
 
 const routes: Routes = [
@@ -22,7 +21,6 @@ const routes: Routes = [
     RouterModule.forChild(routes),
     QRComponentModule,
     SharedPipesModule,
-    GenericFormPageModule,
     ActionSuccessPageModule,
   ],
   declarations: [AppActionsPage, AppActionsItemComponent],

web/projects/ui/src/app/pages/apps-routes/app-actions/app-actions.page.ts

@@ -1,23 +1,24 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
 import { ActivatedRoute } from '@angular/router'
-import { ApiService } from 'src/app/services/api/embassy-api.service'
+import { AlertController, ModalController, NavController } from '@ionic/angular'
 import {
-  AlertController,
-  LoadingController,
-  ModalController,
-  NavController,
-} from '@ionic/angular'
+  ErrorService,
+  getPkgId,
+  isEmptyObject,
+  LoadingService,
+} from '@start9labs/shared'
+import { T } from '@start9labs/start-sdk'
 import { PatchDB } from 'patch-db-client'
+import { FormComponent } from 'src/app/components/form.component'
+import { ActionSuccessPage } from 'src/app/modals/action-success/action-success.page'
+import { ApiService } from 'src/app/services/api/embassy-api.service'
+import { FormDialogService } from 'src/app/services/form-dialog.service'
 import {
   DataModel,
   PackageDataEntry,
 } from 'src/app/services/patch-db/data-model'
-import { GenericFormPage } from 'src/app/modals/generic-form/generic-form.page'
-import { isEmptyObject, ErrorToastService, getPkgId } from '@start9labs/shared'
-import { ActionSuccessPage } from 'src/app/modals/action-success/action-success.page'
-import { hasCurrentDeps } from 'src/app/util/has-deps'
 import { getAllPackages, getManifest } from 'src/app/util/get-package-data'
-import { T } from '@start9labs/start-sdk'
+import { hasCurrentDeps } from 'src/app/util/has-deps'
 
 @Component({
   selector: 'app-actions',
@@ -34,40 +35,32 @@ export class AppActionsPage {
     private readonly embassyApi: ApiService,
     private readonly modalCtrl: ModalController,
     private readonly alertCtrl: AlertController,
-    private readonly errToast: ErrorToastService,
-    private readonly loadingCtrl: LoadingController,
+    private readonly errorService: ErrorService,
+    private readonly loader: LoadingService,
     private readonly navCtrl: NavController,
     private readonly patch: PatchDB<DataModel>,
+    private readonly formDialog: FormDialogService,
   ) {}
 
   async handleAction(
     status: T.Status,
     action: { key: string; value: T.ActionMetadata },
   ) {
-    if (
-      status &&
-      action.value.allowedStatuses.includes(
-        status.main.status, // @TODO
-      )
-    ) {
+    if (status && action.value.allowedStatuses.includes(status.main.status)) {
       if (!isEmptyObject(action.value.input || {})) {
-        const modal = await this.modalCtrl.create({
-          component: GenericFormPage,
-          componentProps: {
-            title: action.value.name,
+        this.formDialog.open(FormComponent, {
+          label: action.value.name,
+          data: {
             spec: action.value.input,
             buttons: [
               {
                 text: 'Execute',
-                handler: (value: any) => {
-                  return this.executeAction(action.key, value)
-                },
-                isSubmit: true,
+                handler: async (value: any) =>
+                  this.executeAction(action.key, value),
               },
             ],
           },
         })
-        await modal.present()
       } else {
         const alert = await this.alertCtrl.create({
           header: 'Confirm',
@@ -91,7 +84,7 @@ export class AppActionsPage {
         await alert.present()
       }
     } else {
-      const statuses = [...action.value.allowedStatuses] // @TODO
+      const statuses = [...action.value.allowedStatuses]
       const last = statuses.pop()
       let statusesStr = statuses.join(', ')
       let error = ''
@@ -152,10 +145,7 @@ export class AppActionsPage {
   }
 
   private async uninstall() {
-    const loader = await this.loadingCtrl.create({
-      message: `Beginning uninstall...`,
-    })
-    await loader.present()
+    const loader = this.loader.open(`Beginning uninstall...`).subscribe()
 
     try {
       await this.embassyApi.uninstallPackage({ id: this.pkgId })
@@ -164,9 +154,9 @@ export class AppActionsPage {
         .catch(e => console.error('Failed to mark instructions as unseen', e))
       this.navCtrl.navigateRoot('/services')
     } catch (e: any) {
-      this.errToast.present(e)
+      this.errorService.handleError(e)
     } finally {
-      loader.dismiss()
+      loader.unsubscribe()
     }
   }
 
@@ -174,10 +164,7 @@ export class AppActionsPage {
     actionId: string,
     input?: object,
   ): Promise<boolean> {
-    const loader = await this.loadingCtrl.create({
-      message: 'Executing action...',
-    })
-    await loader.present()
+    const loader = this.loader.open('Executing action...').subscribe()
 
     try {
       const res = await this.embassyApi.executePackageAction({
@@ -196,10 +183,10 @@ export class AppActionsPage {
       setTimeout(() => successModal.present(), 500)
       return true // needed to dismiss original modal/alert
     } catch (e: any) {
-      this.errToast.present(e)
+      this.errorService.handleError(e)
       return false // don't dismiss original modal/alert
     } finally {
-      loader.dismiss()
+      loader.unsubscribe()
     }
   }
 

web/projects/ui/src/app/pages/apps-routes/app-interfaces/app-interfaces.page.html

@@ -8,7 +8,9 @@
 </ion-header>
 
 <ion-content class="ion-padding-top with-widgets">
-  <ion-item-group *ngIf="serviceInterfaces$ | async as serviceInterfaces">
+  <ion-item-group
+    *ngIf="serviceInterfacesWithHostInfo$ | async as serviceInterfaces"
+  >
     <ng-container *ngIf="serviceInterfaces.ui.length">
       <ion-item-divider>User Interfaces</ion-item-divider>
       <app-interfaces-item

web/projects/ui/src/app/pages/apps-routes/app-interfaces/app-interfaces.page.ts

@@ -6,9 +6,8 @@ import { copyToClipboard, getPkgId } from '@start9labs/shared'
 import { DataModel } from 'src/app/services/patch-db/data-model'
 import { PatchDB } from 'patch-db-client'
 import { QRComponent } from 'src/app/components/qr/qr.component'
-import { map } from 'rxjs'
-import { T } from '@start9labs/start-sdk'
-import { addressHostToUrl } from '@start9labs/start-sdk/cjs/lib/util/getServiceInterface'
+import { combineLatest, map } from 'rxjs'
+import { T, utils } from '@start9labs/start-sdk'
 
 type MappedInterface = T.ServiceInterface & {
   addresses: MappedAddress[]
@@ -26,30 +25,43 @@ type MappedAddress = {
 export class AppInterfacesPage {
   readonly pkgId = getPkgId(this.route)
 
-  readonly serviceInterfaces$ = this.patch
-    .watch$('packageData', this.pkgId, 'serviceInterfaces')
-    .pipe(
-      map(interfaces => {
-        const sorted = Object.values(interfaces)
-          .sort(iface =>
-            iface.name.toLowerCase() > iface.name.toLowerCase() ? -1 : 1,
-          )
-          .map(iface => {
-            // TODO @Matt
-            const host = {} as any
-            return {
-              ...iface,
-              addresses: getAddresses(iface, host),
-            }
-          })
+  private readonly serviceInterfaces$ = this.patch.watch$(
+    'packageData',
+    this.pkgId,
+    'serviceInterfaces',
+  )
+  private readonly hosts$ = this.patch.watch$(
+    'packageData',
+    this.pkgId,
+    'hosts',
+  )
 
-        return {
-          ui: sorted.filter(val => val.type === 'ui'),
-          api: sorted.filter(val => val.type === 'api'),
-          p2p: sorted.filter(val => val.type === 'p2p'),
-        }
-      }),
-    )
+  readonly serviceInterfacesWithHostInfo$ = combineLatest([
+    this.serviceInterfaces$,
+    this.hosts$,
+  ]).pipe(
+    map(([interfaces, hosts]) => {
+      const sorted = Object.values(interfaces)
+        .sort(iface =>
+          iface.name.toLowerCase() > iface.name.toLowerCase() ? -1 : 1,
+        )
+        .map(iface => {
+          return {
+            ...iface,
+            addresses: getAddresses(
+              iface,
+              hosts[iface.addressInfo.hostId] || {},
+            ),
+          }
+        })
+
+      return {
+        ui: sorted.filter(val => val.type === 'ui'),
+        api: sorted.filter(val => val.type === 'api'),
+        p2p: sorted.filter(val => val.type === 'p2p'),
+      }
+    }),
+  )
 
   constructor(
     private readonly route: ActivatedRoute,
@@ -108,20 +120,15 @@ function getAddresses(
   host: T.Host,
 ): MappedAddress[] {
   const addressInfo = serviceInterface.addressInfo
-  const username = addressInfo.username ? addressInfo.username + '@' : ''
-  const suffix = addressInfo.suffix || ''
 
   const hostnames =
-    host.kind === 'multi' ? host.hostnameInfo[addressInfo.internalPort] : [] // TODO: non-multi
-  /* host.hostname
-      ? [host.hostname]
-      : [] */
+    host.kind === 'multi' ? host.hostnameInfo[addressInfo.internalPort] : []
 
-  return hostnames.flatMap(h => {
+  const addressesWithNames = hostnames.flatMap(h => {
     let name = ''
 
     if (h.kind === 'onion') {
-      name = 'Tor'
+      name = `Tor`
     } else {
       const hostnameKind = h.hostname.kind
 
@@ -135,9 +142,23 @@ function getAddresses(
       }
     }
 
-    return addressHostToUrl(addressInfo, h).map(url => ({
-      name,
-      url,
-    }))
+    const addresses = utils.addressHostToUrl(addressInfo, h)
+    if (addresses.length > 1) {
+      return utils.addressHostToUrl(addressInfo, h).map(url => ({
+        name: `${name} (${new URL(url).protocol
+          .replace(':', '')
+          .toUpperCase()})`,
+        url,
+      }))
+    } else {
+      return utils.addressHostToUrl(addressInfo, h).map(url => ({
+        name,
+        url,
+      }))
+    }
   })
+
+  return addressesWithNames.filter(
+    (value, index, self) => index === self.findIndex(t => t.url === value.url),
+  )
 }

web/projects/ui/src/app/pages/apps-routes/app-metrics/app-metrics.page.ts

@@ -1,8 +1,8 @@
 import { Component } from '@angular/core'
 import { ActivatedRoute } from '@angular/router'
+import { ErrorService, getPkgId, pauseFor } from '@start9labs/shared'
 import { Metric } from 'src/app/services/api/api.types'
 import { ApiService } from 'src/app/services/api/embassy-api.service'
-import { pauseFor, ErrorToastService, getPkgId } from '@start9labs/shared'
 
 @Component({
   selector: 'app-metrics',
@@ -17,7 +17,7 @@ export class AppMetricsPage {
 
   constructor(
     private readonly route: ActivatedRoute,
-    private readonly errToast: ErrorToastService,
+    private readonly errorService: ErrorService,
     private readonly embassyApi: ApiService,
   ) {}
 
@@ -46,7 +46,7 @@ export class AppMetricsPage {
     try {
       this.metrics = await this.embassyApi.getPkgMetrics({ id: this.pkgId })
     } catch (e: any) {
-      this.errToast.present(e)
+      this.errorService.handleError(e)
       this.stopDaemon()
     } finally {
       this.loading = false

web/projects/ui/src/app/pages/apps-routes/app-properties/app-properties.page.ts

@@ -1,6 +1,5 @@
 import { Component, ViewChild } from '@angular/core'
 import { ActivatedRoute } from '@angular/router'
-import { ApiService } from 'src/app/services/api/embassy-api.service'
 import {
   AlertController,
   IonBackButtonDelegate,
@@ -8,18 +7,15 @@ import {
   NavController,
   ToastController,
 } from '@ionic/angular'
-import { PackageProperties } from 'src/app/util/properties.util'
-import { QRComponent } from 'src/app/components/qr/qr.component'
-import { PatchDB } from 'patch-db-client'
-import { DataModel } from 'src/app/services/patch-db/data-model'
-import {
-  ErrorToastService,
-  getPkgId,
-  copyToClipboard,
-} from '@start9labs/shared'
+import { copyToClipboard, ErrorService, getPkgId } from '@start9labs/shared'
 import { TuiDestroyService } from '@taiga-ui/cdk'
 import { getValueByPointer } from 'fast-json-patch'
+import { PatchDB } from 'patch-db-client'
 import { map, takeUntil } from 'rxjs/operators'
+import { QRComponent } from 'src/app/components/qr/qr.component'
+import { ApiService } from 'src/app/services/api/embassy-api.service'
+import { DataModel } from 'src/app/services/patch-db/data-model'
+import { PackageProperties } from 'src/app/util/properties.util'
 
 @Component({
   selector: 'app-properties',
@@ -47,7 +43,7 @@ export class AppPropertiesPage {
   constructor(
     private readonly route: ActivatedRoute,
     private readonly embassyApi: ApiService,
-    private readonly errToast: ErrorToastService,
+    private readonly errorService: ErrorService,
     private readonly alertCtrl: AlertController,
     private readonly toastCtrl: ToastController,
     private readonly modalCtrl: ModalController,
@@ -139,7 +135,7 @@ export class AppPropertiesPage {
       })
       this.node = getValueByPointer(this.properties, this.pointer)
     } catch (e: any) {
-      this.errToast.present(e)
+      this.errorService.handleError(e)
     } finally {
       this.loading = false
     }

web/projects/ui/src/app/pages/apps-routes/app-show/app-show.module.ts

@@ -4,13 +4,11 @@ import { Routes, RouterModule } from '@angular/router'
 import { IonicModule } from '@ionic/angular'
 import { AppShowPage } from './app-show.page'
 import {
-  EmptyPipe,
   EmverPipesModule,
   ResponsiveColModule,
   SharedPipesModule,
 } from '@start9labs/shared'
 import { StatusComponentModule } from 'src/app/components/status/status.component.module'
-import { AppConfigPageModule } from 'src/app/modals/app-config/app-config.module'
 import { LaunchablePipeModule } from 'src/app/pipes/launchable/launchable.module'
 import { UiPipeModule } from 'src/app/pipes/ui/ui.module'
 import { AppShowHeaderComponent } from './components/app-show-header/app-show-header.component'
@@ -51,7 +49,6 @@ const routes: Routes = [
     InstallingProgressPipeModule,
     IonicModule,
     RouterModule.forChild(routes),
-    AppConfigPageModule,
     EmverPipesModule,
     LaunchablePipeModule,
     UiPipeModule,

web/projects/ui/src/app/pages/apps-routes/app-show/app-show.page.ts

@@ -11,7 +11,6 @@ import { renderPkgStatus } from 'src/app/services/pkg-status-rendering.service'
 import { map, tap } from 'rxjs/operators'
 import { ActivatedRoute, NavigationExtras } from '@angular/router'
 import { getPkgId } from '@start9labs/shared'
-import { ModalService } from 'src/app/services/modal.service'
 import { DependentInfo } from 'src/app/types/dependent-info'
 import {
   DepErrorService,
@@ -26,6 +25,8 @@ import {
   isUpdating,
 } from 'src/app/util/get-package-data'
 import { T } from '@start9labs/start-sdk'
+import { FormDialogService } from 'src/app/services/form-dialog.service'
+import { ConfigModal, PackageConfigData } from 'src/app/modals/config.component'
 
 export interface DependencyInfo {
   id: string
@@ -68,8 +69,8 @@ export class AppShowPage {
     private readonly route: ActivatedRoute,
     private readonly navCtrl: NavController,
     private readonly patch: PatchDB<DataModel>,
-    private readonly modalService: ModalService,
     private readonly depErrorService: DepErrorService,
+    private readonly formDialog: FormDialogService,
   ) {}
 
   showProgress(
@@ -171,7 +172,13 @@ export class AppShowPage {
       case 'update':
         return this.installDep(pkg, pkgManifest, id)
       case 'configure':
-        return this.configureDep(pkgManifest, id)
+        return this.formDialog.open<PackageConfigData>(ConfigModal, {
+          label: `${pkgManifest.title} config`,
+          data: {
+            pkgId: id,
+            dependentInfo: pkgManifest,
+          },
+        })
     }
   }
 
@@ -194,19 +201,4 @@ export class AppShowPage {
       navigationExtras,
     )
   }
-
-  private async configureDep(
-    pkgManifest: T.Manifest,
-    dependencyId: string,
-  ): Promise<void> {
-    const dependentInfo: DependentInfo = {
-      id: pkgManifest.id,
-      title: pkgManifest.title,
-    }
-
-    await this.modalService.presentModalConfig({
-      pkgId: dependencyId,
-      dependentInfo,
-    })
-  }
 }

web/projects/ui/src/app/pages/apps-routes/app-show/components/app-show-health-checks/app-show-health-checks.component.html

@@ -68,7 +68,7 @@
   </ng-container>
   <!-- disconnected -->
   <ng-template #disconnected>
-    <ion-item *ngFor="let health; in: checks">
+    <ion-item *ngFor="let health of healthChecks | keyvalue">
       <ion-avatar slot="start">
         <ion-skeleton-text class="avatar"></ion-skeleton-text>
       </ion-avatar>

web/projects/ui/src/app/pages/apps-routes/app-show/components/app-show-status/app-show-status.component.ts

@@ -1,26 +1,27 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
-import { UiLauncherService } from 'src/app/services/ui-launcher.service'
-import {
-  PackageStatus,
-  PrimaryRendering,
-} from 'src/app/services/pkg-status-rendering.service'
+import { AlertController } from '@ionic/angular'
+import { ErrorService, LoadingService } from '@start9labs/shared'
+import { T } from '@start9labs/start-sdk'
+import { PatchDB } from 'patch-db-client'
+import { ConfigModal, PackageConfigData } from 'src/app/modals/config.component'
+import { ApiService } from 'src/app/services/api/embassy-api.service'
+import { ConnectionService } from 'src/app/services/connection.service'
+import { FormDialogService } from 'src/app/services/form-dialog.service'
 import {
   DataModel,
   PackageDataEntry,
 } from 'src/app/services/patch-db/data-model'
-import { ErrorToastService } from '@start9labs/shared'
-import { AlertController, LoadingController } from '@ionic/angular'
-import { ApiService } from 'src/app/services/api/embassy-api.service'
-import { ModalService } from 'src/app/services/modal.service'
-import { hasCurrentDeps } from 'src/app/util/has-deps'
-import { ConnectionService } from 'src/app/services/connection.service'
 import {
-  isInstalled,
-  getManifest,
+  PackageStatus,
+  PrimaryRendering,
+} from 'src/app/services/pkg-status-rendering.service'
+import { UiLauncherService } from 'src/app/services/ui-launcher.service'
+import {
   getAllPackages,
+  getManifest,
+  isInstalled,
 } from 'src/app/util/get-package-data'
-import { PatchDB } from 'patch-db-client'
-import { T } from '@start9labs/start-sdk'
+import { hasCurrentDeps } from 'src/app/util/has-deps'
 
 @Component({
   selector: 'app-show-status',
@@ -41,11 +42,11 @@ export class AppShowStatusComponent {
 
   constructor(
     private readonly alertCtrl: AlertController,
-    private readonly errToast: ErrorToastService,
-    private readonly loadingCtrl: LoadingController,
+    private readonly errorService: ErrorService,
+    private readonly loader: LoadingService,
     private readonly embassyApi: ApiService,
     private readonly launcherService: UiLauncherService,
-    private readonly modalService: ModalService,
+    private readonly formDialog: FormDialogService,
     readonly connection$: ConnectionService,
     private readonly patch: PatchDB<DataModel>,
   ) {}
@@ -85,8 +86,8 @@ export class AppShowStatusComponent {
   }
 
   async presentModalConfig(): Promise<void> {
-    return this.modalService.presentModalConfig({
-      pkgId: this.manifest.id,
+    return this.formDialog.open<PackageConfigData>(ConfigModal, {
+      data: { pkgId: this.manifest.id },
     })
   }
 
@@ -172,47 +173,38 @@ export class AppShowStatusComponent {
   }
 
   private async start(): Promise<void> {
-    const loader = await this.loadingCtrl.create({
-      message: `Starting...`,
-    })
-    await loader.present()
+    const loader = this.loader.open(`Starting...`).subscribe()
 
     try {
       await this.embassyApi.startPackage({ id: this.manifest.id })
     } catch (e: any) {
-      this.errToast.present(e)
+      this.errorService.handleError(e)
     } finally {
-      loader.dismiss()
+      loader.unsubscribe()
     }
   }
 
   private async stop(): Promise<void> {
-    const loader = await this.loadingCtrl.create({
-      message: 'Stopping...',
-    })
-    await loader.present()
+    const loader = this.loader.open('Stopping...').subscribe()
 
     try {
       await this.embassyApi.stopPackage({ id: this.manifest.id })
     } catch (e: any) {
-      this.errToast.present(e)
+      this.errorService.handleError(e)
     } finally {
-      loader.dismiss()
+      loader.unsubscribe()
     }
   }
 
   private async restart(): Promise<void> {
-    const loader = await this.loadingCtrl.create({
-      message: `Restarting...`,
-    })
-    await loader.present()
+    const loader = this.loader.open(`Restarting...`).subscribe()
 
     try {
       await this.embassyApi.restartPackage({ id: this.manifest.id })
     } catch (e: any) {
-      this.errToast.present(e)
+      this.errorService.handleError(e)
     } finally {
-      loader.dismiss()
+      loader.unsubscribe()
     }
   }
   private async presentAlertStart(message: string): Promise<boolean> {