fix: address comments

web/projects/ui/src/app/routes/portal/components/interfaces/addresses/actions.component.ts

@@ -3,7 +3,6 @@ import {
   Component,
   inject,
   input,
-  DOCUMENT,
 } from '@angular/core'
 import { CopyService, DialogService, i18nPipe } from '@start9labs/shared'
 import { TUI_IS_MOBILE } from '@taiga-ui/cdk'
@@ -23,16 +22,17 @@ import { InterfaceComponent } from '../interface.component'
   selector: 'td[actions]',
   template: `
     <div class="desktop">
-      @if (interface.value().type === 'ui') {
+      @if (interface.value()?.type === 'ui') {
-        <button
+        <a
           tuiIconButton
           appearance="flat-grayscale"
           iconStart="@tui.external-link"
-          [disabled]="disabled()"
+          target="_blank"
-          (click)="openUI()"
+          rel="noopener noreferrer"
+          [href]="href()"
         >
           {{ 'Open' | i18n }}
-        </button>
+        </a>
       }
       <button
         tuiIconButton
@@ -65,16 +65,17 @@ import { InterfaceComponent } from '../interface.component'
           <button tuiOption new iconStart="@tui.eye" (click)="instructions()">
             {{ 'View instructions' | i18n }}
           </button>
-          @if (interface.value().type === 'ui') {
+          @if (interface.value()?.type === 'ui') {
-            <button
+            <a
               tuiOption
               new
               iconStart="@tui.external-link"
-              [disabled]="disabled()"
+              target="_blank"
-              (click)="openUI()"
+              rel="noopener noreferrer"
+              [href]="href()"
             >
               {{ 'Open' | i18n }}
-            </button>
+            </a>
           }
           <button tuiOption new iconStart="@tui.qr-code" (click)="showQR()">
             {{ 'Show QR' | i18n }}
@@ -118,8 +119,6 @@ import { InterfaceComponent } from '../interface.component'
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AddressActionsComponent {
-  private readonly document = inject(DOCUMENT)
-
   readonly isMobile = inject(TUI_IS_MOBILE)
   readonly dialog = inject(DialogService)
   readonly copyService = inject(CopyService)
@@ -140,9 +139,5 @@ export class AddressActionsComponent {
       .subscribe()
   }
 
-  openUI() {
-    this.document.defaultView?.open(this.href(), '_blank', 'noreferrer')
-  }
-
   instructions() {}
 }

web/projects/ui/src/app/routes/portal/components/interfaces/addresses/addresses.component.ts

@@ -1,9 +1,10 @@
 import { ChangeDetectionStrategy, Component, input } from '@angular/core'
 import { i18nPipe } from '@start9labs/shared'
-import { TuiButton } from '@taiga-ui/core'
 import { TuiAccordion } from '@taiga-ui/experimental'
+import { TuiSkeleton } from '@taiga-ui/kit'
 import { PlaceholderComponent } from 'src/app/routes/portal/components/placeholder.component'
 import { TableComponent } from 'src/app/routes/portal/components/table.component'
+
 import { MappedServiceInterface } from '../interface.service'
 import { InterfaceAddressItemComponent } from './item.component'
 
@@ -12,41 +13,79 @@ import { InterfaceAddressItemComponent } from './item.component'
   template: `
     <header>{{ 'Addresses' | i18n }}</header>
     <table [appTable]="[null, 'Type', 'Gateway', 'URL', null]">
-      @for (
+      @for (address of addresses()?.common; track $index) {
-        address of addresses().common.concat(addresses().uncommon);
-        track $index
-      ) {
         <tr [address]="address" [isRunning]="isRunning()"></tr>
       } @empty {
-        <tr>
+        @if (addresses()) {
-          <td colspan="5">
+          <tr>
-            <app-placeholder icon="@tui.list-x">
+            <td colspan="5">
-              {{ 'No addresses' | i18n }}
+              <app-placeholder icon="@tui.list-x">
-            </app-placeholder>
+                {{ 'No addresses' | i18n }}
-          </td>
+              </app-placeholder>
-        </tr>
+            </td>
+          </tr>
+        } @else {
+          @for (_ of [0, 1]; track $index) {
+            <tr>
+              <td colspan="5">
+                <div [tuiSkeleton]="true">{{ 'Loading' | i18n }}</div>
+              </td>
+            </tr>
+          }
+        }
       }
-      <!-- @if (addresses().uncommon.length) {
+    </table>
-        <tui-accordion>
+    @if (addresses()?.uncommon?.length) {
-          <button tuiAccordion>{{ 'Uncommon' | i18n }}</button>
+      <tui-accordion>
-          <tui-expand>
+        <tui-expand>
-            @for (address of addresses().uncommon; track $index) {
+          <hr />
+          <table class="g-table">
+            @for (address of addresses()?.uncommon; track $index) {
               <tr [address]="address" [isRunning]="isRunning()"></tr>
             }
-          </tui-expand>
+          </table>
-        </tui-accordion>
+        </tui-expand>
-      } -->
+        <button
-    </table>
+          appearance="secondary-grayscale"
+          iconEnd=""
+          [(tuiAccordion)]="uncommon"
+        >
+          @if (uncommon) {
+            Hide uncommon
+          } @else {
+            Show uncommon
+          }
+        </button>
+      </tui-accordion>
+    }
   `,
   styles: `
+    tui-accordion {
+      border-radius: 0;
+    }
+
     [tuiAccordion],
     tui-expand {
       box-shadow: none;
       padding: 0;
-      background: none !important;
+    }
 
-      &::after {
+    [tuiAccordion] {
-        margin-inline-end: 0.25rem;
+      justify-content: center;
+      height: 3rem;
+      border-radius: 0 0 var(--tui-radius-m) var(--tui-radius-m) !important;
+    }
+
+    hr {
+      margin: 0;
+      height: 0.25rem;
+      border-radius: 1rem;
+    }
+
+    :host-context(tui-root._mobile) {
+      [tuiAccordion] {
+        margin: 0.5rem 0;
+        border-radius: var(--tui-radius-m) !important;
       }
     }
   `,
@@ -56,12 +95,16 @@ import { InterfaceAddressItemComponent } from './item.component'
     PlaceholderComponent,
     i18nPipe,
     InterfaceAddressItemComponent,
-    TuiButton,
     TuiAccordion,
+    TuiSkeleton,
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class InterfaceAddressesComponent {
-  readonly addresses = input.required<MappedServiceInterface['addresses']>()
+  readonly addresses = input.required<
+    MappedServiceInterface['addresses'] | undefined
+  >()
   readonly isRunning = input.required<boolean>()
+
+  uncommon = false
 }

web/projects/ui/src/app/routes/portal/components/interfaces/addresses/item.component.ts

@@ -13,7 +13,7 @@ import { AddressActionsComponent } from './actions.component'
   selector: 'tr[address]',
   template: `
     @if (address(); as address) {
-      <td>
+      <td [style.width.rem]="3">
         <button
           tuiIconButton
           appearance="flat-grayscale"
@@ -23,14 +23,25 @@ import { AddressActionsComponent } from './actions.component'
           {{ 'View instructions' | i18n }}
         </button>
       </td>
-      <td>{{ address.type }}</td>
+      <td [style.width.rem]="6">{{ address.type }}</td>
-      <td [style.order]="-1">{{ address.gatewayName || '-' }}</td>
+      <td [style.width.rem]="10" [style.order]="-1">
+        {{ address.gatewayName || '-' }}
+      </td>
       <td>{{ address.url }}</td>
-      <td actions [disabled]="!isRunning()" [href]="address.url"></td>
+      <td
+        actions
+        [disabled]="!isRunning()"
+        [href]="address.url"
+        [style.width.rem]="7"
+      ></td>
     }
   `,
   styles: `
     :host-context(tui-root._mobile) {
+      td {
+        width: auto !important;
+      }
+
       td:first-child {
         display: none;
       }

web/projects/ui/src/app/routes/portal/components/interfaces/clearnet-domains.component.ts

@@ -1,6 +1,7 @@
 import { ChangeDetectionStrategy, Component, input } from '@angular/core'
 import { DocsLinkDirective, i18nPipe } from '@start9labs/shared'
 import { TuiButton } from '@taiga-ui/core'
+import { TuiSkeleton } from '@taiga-ui/kit'
 import { PlaceholderComponent } from 'src/app/routes/portal/components/placeholder.component'
 import { TableComponent } from 'src/app/routes/portal/components/table.component'
 
@@ -34,13 +35,23 @@ import { ClearnetDomain } from './interface.service'
       @for (domain of clearnetDomains(); track $index) {
         <tr [domain]="domain"></tr>
       } @empty {
-        <tr>
+        @if (clearnetDomains()) {
-          <td colspan="4">
+          <tr>
-            <app-placeholder icon="@tui.globe">
+            <td colspan="4">
-              {{ 'No clearnet domains' | i18n }}
+              <app-placeholder icon="@tui.globe">
-            </app-placeholder>
+                {{ 'No clearnet domains' | i18n }}
-          </td>
+              </app-placeholder>
-        </tr>
+            </td>
+          </tr>
+        } @else {
+          @for (_ of [0, 1]; track $index) {
+            <tr>
+              <td colspan="4">
+                <div [tuiSkeleton]="true">{{ 'Loading' | i18n }}</div>
+              </td>
+            </tr>
+          }
+        }
       }
     </table>
   `,
@@ -57,11 +68,14 @@ import { ClearnetDomain } from './interface.service'
     i18nPipe,
     DocsLinkDirective,
     DomainComponent,
+    TuiSkeleton,
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class InterfaceClearnetDomainsComponent {
-  readonly clearnetDomains = input.required<readonly ClearnetDomain[]>()
+  readonly clearnetDomains = input.required<
+    readonly ClearnetDomain[] | undefined
+  >()
 
   open = false
 

web/projects/ui/src/app/routes/portal/components/interfaces/domain.component.ts

@@ -143,7 +143,7 @@ export class DomainComponent {
             await this.api.pkgRemoveDomain({
               ...params,
               package: this.interface.packageId(),
-              host: this.interface.value().addressInfo.hostId,
+              host: this.interface.value()?.addressInfo.hostId || '',
             })
           } else {
             await this.api.osUiRemoveDomain(params)

web/projects/ui/src/app/routes/portal/components/interfaces/gateways.component.ts

@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common'
 import { ChangeDetectionStrategy, Component, input } from '@angular/core'
 import { TuiTitle } from '@taiga-ui/core'
-import { TuiSwitch } from '@taiga-ui/kit'
+import { TuiSkeleton, TuiSwitch } from '@taiga-ui/kit'
 import { FormsModule } from '@angular/forms'
 import { i18nPipe } from '@start9labs/shared'
 import { TuiCell } from '@taiga-ui/layout'
@@ -24,14 +24,28 @@ import { InterfaceGateway } from './interface.service'
           [disabled]="isOs() && !gateway.public"
         />
       </label>
+    } @empty {
+      @for (_ of [0, 1]; track $index) {
+        <label tuiCell="s">
+          <span tuiTitle [tuiSkeleton]="true">{{ 'Loading' | i18n }}</span>
+        </label>
+      }
     }
   `,
   host: { class: 'g-card' },
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [CommonModule, FormsModule, TuiSwitch, i18nPipe, TuiCell, TuiTitle],
+  imports: [
+    CommonModule,
+    FormsModule,
+    TuiSwitch,
+    i18nPipe,
+    TuiCell,
+    TuiTitle,
+    TuiSkeleton,
+  ],
 })
 export class InterfaceGatewaysComponent {
-  readonly gateways = input.required<InterfaceGateway[]>()
+  readonly gateways = input.required<InterfaceGateway[] | undefined>()
   readonly isOs = input.required<boolean>()
 
   async onToggle(gateway: InterfaceGateway) {}

web/projects/ui/src/app/routes/portal/components/interfaces/interface.component.ts

@@ -11,12 +11,15 @@ import { InterfaceAddressesComponent } from './addresses/addresses.component'
   template: `
     <!-- @TODO Alex / Matt translation in all nested components -->
     <div [style.display]="'grid'">
-      <section [gateways]="value().gateways" [isOs]="value().isOs"></section>
+      <section
-      <section [torDomains]="value().torDomains"></section>
+        [gateways]="value()?.gateways"
-      <section [clearnetDomains]="value().clearnetDomains"></section>
+        [isOs]="!!value()?.isOs"
+      ></section>
+      <section [torDomains]="value()?.torDomains"></section>
+      <section [clearnetDomains]="value()?.clearnetDomains"></section>
     </div>
     <hr [style.width.rem]="10" />
-    <section [addresses]="value().addresses" [isRunning]="true"></section>
+    <section [addresses]="value()?.addresses" [isRunning]="true"></section>
   `,
   styles: `
     :host {
@@ -29,6 +32,12 @@ import { InterfaceAddressesComponent } from './addresses/addresses.component'
       div {
         gap: inherit;
       }
+
+      ::ng-deep [tuiSkeleton] {
+        width: 100%;
+        height: 1rem;
+        border-radius: var(--tui-radius-s);
+      }
     }
 
     :host-context(tui-root._mobile) section {
@@ -46,6 +55,6 @@ import { InterfaceAddressesComponent } from './addresses/addresses.component'
 })
 export class InterfaceComponent {
   readonly packageId = input('')
-  readonly value = input.required<MappedServiceInterface>()
+  readonly value = input.required<MappedServiceInterface | undefined>()
   readonly isRunning = input.required<boolean>()
 }

web/projects/ui/src/app/routes/portal/components/interfaces/mask.pipe.ts

@@ -8,7 +8,7 @@ export class MaskPipe implements PipeTransform {
   private readonly interface = inject(InterfaceComponent)
 
   transform(value: string): string {
-    return this.interface.value().masked
+    return this.interface.value()?.masked
       ? '•'.repeat(Math.min(32, value.length))
       : value
   }

web/projects/ui/src/app/routes/portal/components/interfaces/tor-domains.component.ts

@@ -13,6 +13,7 @@ import {
 } from '@start9labs/shared'
 import { ISB, utils } from '@start9labs/start-sdk'
 import { TuiButton, TuiTitle } from '@taiga-ui/core'
+import { TuiSkeleton } from '@taiga-ui/kit'
 import { TuiCell } from '@taiga-ui/layout'
 import { filter } from 'rxjs'
 import {
@@ -66,9 +67,17 @@ type OnionForm = {
         </button>
       </div>
     } @empty {
-      <app-placeholder icon="@tui.target">
+      @if (torDomains()) {
-        {{ 'No Tor domains' | i18n }}
+        <app-placeholder icon="@tui.target">
-      </app-placeholder>
+          {{ 'No Tor domains' | i18n }}
+        </app-placeholder>
+      } @else {
+        @for (_ of [0, 1]; track $index) {
+          <label tuiCell="s">
+            <span tuiTitle [tuiSkeleton]="true">{{ 'Loading' | i18n }}</span>
+          </label>
+        }
+      }
     }
   `,
   styles: `
@@ -84,6 +93,7 @@ type OnionForm = {
     PlaceholderComponent,
     i18nPipe,
     DocsLinkDirective,
+    TuiSkeleton,
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
@@ -96,7 +106,7 @@ export class InterfaceTorDomainsComponent {
   private readonly interface = inject(InterfaceComponent)
   private readonly i18n = inject(i18nPipe)
 
-  readonly torDomains = input.required<readonly string[]>()
+  readonly torDomains = input.required<readonly string[] | undefined>()
 
   async remove(onion: string) {
     this.dialog
@@ -111,7 +121,7 @@ export class InterfaceTorDomainsComponent {
             await this.api.pkgRemoveOnion({
               ...params,
               package: this.interface.packageId(),
-              host: this.interface.value().addressInfo.hostId,
+              host: this.interface.value()?.addressInfo.hostId || '',
             })
           } else {
             await this.api.serverRemoveOnion(params)
@@ -166,7 +176,7 @@ export class InterfaceTorDomainsComponent {
         await this.api.pkgAddOnion({
           onion,
           package: this.interface.packageId(),
-          host: this.interface.value().addressInfo.hostId,
+          host: this.interface.value()?.addressInfo.hostId || '',
         })
       } else {
         await this.api.serverAddOnion({ onion })

web/projects/ui/src/app/routes/portal/routes/system/routes/startos-ui/startos-ui.component.ts

@@ -37,9 +37,7 @@ import { TitleDirective } from 'src/app/services/title.service'
         <p tuiSubtitle>{{ iface.description }}</p>
       </hgroup>
     </header>
-    @if (ui(); as ui) {
+    <service-interface [value]="ui()" [isRunning]="true" />
-      <service-interface [value]="ui" [isRunning]="true" />
-    }
   `,
   host: { class: 'g-subpage' },
   changeDetection: ChangeDetectionStrategy.OnPush,

web/projects/ui/src/app/routes/portal/routes/system/system.component.ts

@@ -101,10 +101,6 @@ import { map } from 'rxjs'
         }
       }
 
-      hr {
-        background: var(--tui-border-normal);
-      }
-
       ::ng-deep hgroup h3 {
         display: none;
       }

web/projects/ui/src/styles.scss

@@ -19,7 +19,7 @@ ul {
 
 hr {
   height: 1px;
-  background: var(--tui-background-neutral-1);
+  background: var(--tui-border-normal);
   border: none;
 }