From 2762076683733877616a59e03cc93ef3d6f04fae Mon Sep 17 00:00:00 2001
From: Matt Hill <mattnine@protonmail.com>
Date: Thu, 7 Aug 2025 09:03:54 -0600
Subject: [PATCH] minor

---
 .../interfaces/clearnet-domains.component.ts  |  2 +-
 .../components/interfaces/domain.component.ts |  1 -
 .../interfaces/gateways.component.ts          | 29 ++++++++-----------
 .../interfaces/interface.component.ts         |  3 +-
 .../components/interfaces/interface.utils.ts  | 19 +++++++-----
 .../authorities/authorities.component.ts      | 15 +++++-----
 .../routes/domains/domains.component.ts       | 15 +++++-----
 .../system/routes/email/email.component.ts    | 15 +++++-----
 .../routes/gateways/gateways.component.ts     | 15 +++++-----
 .../system/routes/gateways/item.component.ts  | 24 +++++++--------
 .../system/routes/gateways/table.component.ts | 22 +++-----------
 .../routes/system/routes/ssh/ssh.component.ts | 15 +++++-----
 .../routes/startos-ui/startos-ui.component.ts | 11 +++++--
 13 files changed, 91 insertions(+), 95 deletions(-)

diff --git a/web/projects/ui/src/app/routes/portal/components/interfaces/clearnet-domains.component.ts b/web/projects/ui/src/app/routes/portal/components/interfaces/clearnet-domains.component.ts
index ea78dc59d..9780929f9 100644
--- a/web/projects/ui/src/app/routes/portal/components/interfaces/clearnet-domains.component.ts
+++ b/web/projects/ui/src/app/routes/portal/components/interfaces/clearnet-domains.component.ts
@@ -36,7 +36,7 @@ import { ClearnetDomain } from './interface.utils'
       } @empty {
         <tr>
           <td colspan="4">
-            <app-placeholder icon="@tui.app-window">
+            <app-placeholder icon="@tui.globe">
               {{ 'No clearnet domains' | i18n }}
             </app-placeholder>
           </td>
diff --git a/web/projects/ui/src/app/routes/portal/components/interfaces/domain.component.ts b/web/projects/ui/src/app/routes/portal/components/interfaces/domain.component.ts
index 6967b29f4..96b48155f 100644
--- a/web/projects/ui/src/app/routes/portal/components/interfaces/domain.component.ts
+++ b/web/projects/ui/src/app/routes/portal/components/interfaces/domain.component.ts
@@ -19,7 +19,6 @@ import {
 import { TuiBadge } from '@taiga-ui/kit'
 import { filter } from 'rxjs'
 import { ApiService } from 'src/app/services/api/embassy-api.service'
-
 import { InterfaceComponent } from './interface.component'
 import { ClearnetDomain } from './interface.utils'
 
diff --git a/web/projects/ui/src/app/routes/portal/components/interfaces/gateways.component.ts b/web/projects/ui/src/app/routes/portal/components/interfaces/gateways.component.ts
index bb2158b4f..84139e581 100644
--- a/web/projects/ui/src/app/routes/portal/components/interfaces/gateways.component.ts
+++ b/web/projects/ui/src/app/routes/portal/components/interfaces/gateways.component.ts
@@ -1,11 +1,16 @@
 import { CommonModule } from '@angular/common'
-import { ChangeDetectionStrategy, Component, input } from '@angular/core'
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+} from '@angular/core'
 import { TuiTitle } from '@taiga-ui/core'
 import { TuiSwitch } from '@taiga-ui/kit'
 import { FormsModule } from '@angular/forms'
 import { i18nPipe } from '@start9labs/shared'
 import { TuiCell } from '@taiga-ui/layout'
-import { PlaceholderComponent } from 'src/app/routes/portal/components/placeholder.component'
+import { InterfaceGateway } from './interface.utils'
 
 @Component({
   selector: 'section[gateways]',
@@ -21,28 +26,18 @@ import { PlaceholderComponent } from 'src/app/routes/portal/components/placehold
           [showIcons]="false"
           [ngModel]="gateway.enabled"
           (ngModelChange)="onToggle(gateway)"
+          [disabled]="osUi() && !gateway.public"
         />
       </label>
-    } @empty {
-      <app-placeholder icon="@tui.door-closed-locked">
-        No gateways
-      </app-placeholder>
     }
   `,
   host: { class: 'g-card' },
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [
-    CommonModule,
-    FormsModule,
-    TuiSwitch,
-    i18nPipe,
-    TuiCell,
-    TuiTitle,
-    PlaceholderComponent,
-  ],
+  imports: [CommonModule, FormsModule, TuiSwitch, i18nPipe, TuiCell, TuiTitle],
 })
 export class InterfaceGatewaysComponent {
-  readonly gateways = input.required<any>()
+  readonly gateways = input.required<InterfaceGateway[]>()
+  readonly osUi = input.required<boolean>()
 
-  async onToggle(event: any) {}
+  async onToggle(gateway: InterfaceGateway) {}
 }
diff --git a/web/projects/ui/src/app/routes/portal/components/interfaces/interface.component.ts b/web/projects/ui/src/app/routes/portal/components/interfaces/interface.component.ts
index a62d01af4..8b8f83eeb 100644
--- a/web/projects/ui/src/app/routes/portal/components/interfaces/interface.component.ts
+++ b/web/projects/ui/src/app/routes/portal/components/interfaces/interface.component.ts
@@ -11,7 +11,7 @@ import { InterfaceAddressesComponent } from './addresses/addresses.component'
   template: `
     <!-- @TODO Alex / Matt translation in all nested components -->
     <div [style.display]="'grid'">
-      <section [gateways]="value().gateways"></section>
+      <section [gateways]="value().gateways" [osUi]="osUi()"></section>
       <section [torDomains]="value().torDomains"></section>
       <section [clearnetDomains]="value().clearnetDomains"></section>
     </div>
@@ -48,4 +48,5 @@ export class InterfaceComponent {
   readonly packageId = input('')
   readonly value = input.required<MappedServiceInterface>()
   readonly isRunning = input.required<boolean>()
+  readonly osUi = input(false)
 }
diff --git a/web/projects/ui/src/app/routes/portal/components/interfaces/interface.utils.ts b/web/projects/ui/src/app/routes/portal/components/interfaces/interface.utils.ts
index 96f77e7aa..b98db2de8 100644
--- a/web/projects/ui/src/app/routes/portal/components/interfaces/interface.utils.ts
+++ b/web/projects/ui/src/app/routes/portal/components/interfaces/interface.utils.ts
@@ -40,13 +40,13 @@ export function getAddresses(
     {
       type: 'Local',
       description: '',
-      gateway: 'Wire Conenction 1',
+      gateway: 'Wired Connection 1',
       url: 'https://test.local:1234',
     },
     {
       type: 'IPv4 (LAN)',
       description: '',
-      gateway: 'Wire Connction 1',
+      gateway: 'Wired Connection 1',
       url: 'https://192.168.1.10.local:1234',
     },
   ]
@@ -54,7 +54,7 @@ export function getAddresses(
     {
       type: 'IPv4 (WAN)',
       description: '',
-      gateway: 'Wire Conenction 1',
+      gateway: 'Wired Connection 1',
       url: 'https://72.72.72.72',
     },
   ]
@@ -112,11 +112,7 @@ export function getAddresses(
 }
 
 export type MappedServiceInterface = T.ServiceInterface & {
-  gateways: {
-    id: string
-    name: string
-    enabled: boolean
-  }[]
+  gateways: InterfaceGateway[]
   torDomains: string[]
   clearnetDomains: ClearnetDomain[]
   addresses: {
@@ -125,6 +121,13 @@ export type MappedServiceInterface = T.ServiceInterface & {
   }
 }
 
+export type InterfaceGateway = {
+  id: string
+  name: string
+  enabled: boolean
+  public: boolean
+}
+
 export type ClearnetDomain = {
   fqdn: string
   authority: string | null
diff --git a/web/projects/ui/src/app/routes/portal/routes/system/routes/authorities/authorities.component.ts b/web/projects/ui/src/app/routes/portal/routes/system/routes/authorities/authorities.component.ts
index 40a4d15a4..158c4b164 100644
--- a/web/projects/ui/src/app/routes/portal/routes/system/routes/authorities/authorities.component.ts
+++ b/web/projects/ui/src/app/routes/portal/routes/system/routes/authorities/authorities.component.ts
@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
 import { RouterLink } from '@angular/router'
 import { DocsLinkDirective, i18nPipe } from '@start9labs/shared'
-import { TuiButton, TuiLink } from '@taiga-ui/core'
+import { TuiButton } from '@taiga-ui/core'
 import { TitleDirective } from 'src/app/services/title.service'
 import { AuthorityService } from './authority.service'
 import { AuthoritiesTableComponent } from './table.component'
@@ -18,13 +18,15 @@ import { AuthoritiesTableComponent } from './table.component'
       <header>
         {{ 'Certificate Authorities' | i18n }}
         <a
-          tuiLink
+          tuiIconButton
+          size="xs"
           docsLink
           path="/user-manual/authorities.html"
-          appearance="action-grayscale"
-          iconEnd="@tui.external-link"
-          [pseudo]="true"
-        ></a>
+          appearance="icon"
+          iconStart="@tui.external-link"
+        >
+          {{ 'Documentation' | i18n }}
+        </a>
         @if (authorityService.authorities(); as authorities) {
           <button
             tuiButton
@@ -43,7 +45,6 @@ import { AuthoritiesTableComponent } from './table.component'
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
     TuiButton,
-    TuiLink,
     RouterLink,
     TitleDirective,
     i18nPipe,
diff --git a/web/projects/ui/src/app/routes/portal/routes/system/routes/domains/domains.component.ts b/web/projects/ui/src/app/routes/portal/routes/system/routes/domains/domains.component.ts
index 3f0399f50..e044a4ee6 100644
--- a/web/projects/ui/src/app/routes/portal/routes/system/routes/domains/domains.component.ts
+++ b/web/projects/ui/src/app/routes/portal/routes/system/routes/domains/domains.component.ts
@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
 import { RouterLink } from '@angular/router'
 import { DocsLinkDirective, i18nPipe } from '@start9labs/shared'
-import { TuiButton, TuiLink } from '@taiga-ui/core'
+import { TuiButton } from '@taiga-ui/core'
 import { TitleDirective } from 'src/app/services/title.service'
 import { DomainService } from './domain.service'
 import { DomainsTableComponent } from './table.component'
@@ -19,13 +19,15 @@ import { DomainsTableComponent } from './table.component'
       <header>
         {{ 'Domains' | i18n }}
         <a
-          tuiLink
+          tuiIconButton
+          size="xs"
           docsLink
           path="/user-manual/domains.html"
-          appearance="action-grayscale"
-          iconEnd="@tui.external-link"
-          [pseudo]="true"
-        ></a>
+          appearance="icon"
+          iconStart="@tui.external-link"
+        >
+          {{ 'Documentation' | i18n }}
+        </a>
         @if (domainService.data(); as value) {
           <button
             tuiButton
@@ -44,7 +46,6 @@ import { DomainsTableComponent } from './table.component'
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
     TuiButton,
-    TuiLink,
     RouterLink,
     TitleDirective,
     i18nPipe,
diff --git a/web/projects/ui/src/app/routes/portal/routes/system/routes/email/email.component.ts b/web/projects/ui/src/app/routes/portal/routes/system/routes/email/email.component.ts
index d64046ec4..5c5c9d7d2 100644
--- a/web/projects/ui/src/app/routes/portal/routes/system/routes/email/email.component.ts
+++ b/web/projects/ui/src/app/routes/portal/routes/system/routes/email/email.component.ts
@@ -11,7 +11,7 @@ import {
   LoadingService,
 } from '@start9labs/shared'
 import { inputSpec, IST } from '@start9labs/start-sdk'
-import { TuiButton, TuiLink, TuiTitle } from '@taiga-ui/core'
+import { TuiButton, TuiTitle } from '@taiga-ui/core'
 import { TuiHeader } from '@taiga-ui/layout'
 import { TuiInputModule } from '@taiga-ui/legacy'
 import { PatchDB } from 'patch-db-client'
@@ -38,13 +38,15 @@ import { configBuilderToSpec } from 'src/app/utils/configBuilderToSpec'
             <b>
               {{ 'SMTP Credentials' | i18n }}
               <a
-                tuiLink
+                tuiIconButton
+                size="xs"
                 docsLink
                 path="/user-manual/smtp.html"
-                appearance="action-grayscale"
-                iconEnd="@tui.external-link"
-                [pseudo]="true"
-              ></a>
+                appearance="icon"
+                iconStart="@tui.external-link"
+              >
+                {{ 'Documentation' | i18n }}
+              </a>
             </b>
           </h3>
         </header>
@@ -124,7 +126,6 @@ import { configBuilderToSpec } from 'src/app/utils/configBuilderToSpec'
     TuiInputModule,
     TuiHeader,
     TuiTitle,
-    TuiLink,
     RouterLink,
     TitleDirective,
     i18nPipe,
diff --git a/web/projects/ui/src/app/routes/portal/routes/system/routes/gateways/gateways.component.ts b/web/projects/ui/src/app/routes/portal/routes/system/routes/gateways/gateways.component.ts
index bb45b0039..ad7f51107 100644
--- a/web/projects/ui/src/app/routes/portal/routes/system/routes/gateways/gateways.component.ts
+++ b/web/projects/ui/src/app/routes/portal/routes/system/routes/gateways/gateways.component.ts
@@ -7,7 +7,7 @@ import {
   i18nPipe,
   LoadingService,
 } from '@start9labs/shared'
-import { TuiButton, TuiLink } from '@taiga-ui/core'
+import { TuiButton } from '@taiga-ui/core'
 import { PatchDB } from 'patch-db-client'
 import { FormComponent } from 'src/app/routes/portal/components/form.component'
 import { DataModel } from 'src/app/services/patch-db/data-model'
@@ -33,13 +33,15 @@ import { GatewayPlus } from './item.component'
       <header>
         {{ 'Gateways' | i18n }}
         <a
-          tuiLink
+          tuiIconButton
+          size="xs"
           docsLink
           path="/user-manual/gateways.html"
-          appearance="action-grayscale"
-          iconEnd="@tui.external-link"
-          [pseudo]="true"
-        ></a>
+          appearance="icon"
+          iconStart="@tui.external-link"
+        >
+          {{ 'Documentation' | i18n }}
+        </a>
         <button
           tuiButton
           size="xs"
@@ -58,7 +60,6 @@ import { GatewayPlus } from './item.component'
     CommonModule,
     RouterLink,
     TuiButton,
-    TuiLink,
     GatewaysTableComponent,
     TitleDirective,
     i18nPipe,
diff --git a/web/projects/ui/src/app/routes/portal/routes/system/routes/gateways/item.component.ts b/web/projects/ui/src/app/routes/portal/routes/system/routes/gateways/item.component.ts
index 38f16eaa9..5d0a6b1a4 100644
--- a/web/projects/ui/src/app/routes/portal/routes/system/routes/gateways/item.component.ts
+++ b/web/projects/ui/src/app/routes/portal/routes/system/routes/gateways/item.component.ts
@@ -31,22 +31,22 @@ export type GatewayPlus = T.NetworkInterfaceInfo & {
 }
 
 @Component({
-  selector: 'tr[proxy]',
+  selector: 'tr[gateway]',
   template: `
-    @if (proxy(); as proxy) {
-      <td [style.grid-column]="'span 2'">{{ proxy.ipInfo.name }}</td>
-      <td class="type">{{ proxy.ipInfo.deviceType || '-' }}</td>
+    @if (gateway(); as gateway) {
+      <td [style.grid-column]="'span 2'">{{ gateway.ipInfo.name }}</td>
+      <td class="type">{{ gateway.ipInfo.deviceType || '-' }}</td>
       <td [style.order]="-2">
-        {{ proxy.public ? ('Public' | i18n) : ('Private' | i18n) }}
+        {{ gateway.public ? ('Public' | i18n) : ('Private' | i18n) }}
       </td>
-      <td class="lan">{{ proxy.ipv4.join(', ') }}</td>
+      <td class="lan">{{ gateway.ipv4.join(', ') }}</td>
       <td
         class="wan"
         [style.color]="
-          proxy.ipInfo.wanIp ? 'var(--tui-text-warning)' : undefined
+          gateway.ipInfo.wanIp ? 'var(--tui-text-warning)' : undefined
         "
       >
-        {{ proxy.ipInfo.wanIp || ('Error' | i18n) }}
+        {{ gateway.ipInfo.wanIp || ('Error' | i18n) }}
       </td>
       <td>
         <button
@@ -65,7 +65,7 @@ export type GatewayPlus = T.NetworkInterfaceInfo & {
                 {{ 'Rename' | i18n }}
               </button>
             </tui-opt-group>
-            @if (proxy.ipInfo.deviceType === 'wireguard') {
+            @if (gateway.ipInfo.deviceType === 'wireguard') {
               <tui-opt-group>
                 <button
                   tuiOption
@@ -137,7 +137,7 @@ export class GatewaysItemComponent {
   private readonly api = inject(ApiService)
   private readonly formDialog = inject(FormDialogService)
 
-  readonly proxy = input.required<GatewayPlus>()
+  readonly gateway = input.required<GatewayPlus>()
 
   open = false
 
@@ -149,7 +149,7 @@ export class GatewaysItemComponent {
         const loader = this.loader.open('Deleting').subscribe()
 
         try {
-          await this.api.removeTunnel({ id: this.proxy().id })
+          await this.api.removeTunnel({ id: this.gateway().id })
         } catch (e: any) {
           this.errorService.handleError(e)
         } finally {
@@ -159,7 +159,7 @@ export class GatewaysItemComponent {
   }
 
   async rename() {
-    const { ipInfo, id } = this.proxy()
+    const { ipInfo, id } = this.gateway()
     const renameSpec = ISB.InputSpec.of({
       label: ISB.Value.text({
         name: 'Label',
diff --git a/web/projects/ui/src/app/routes/portal/routes/system/routes/gateways/table.component.ts b/web/projects/ui/src/app/routes/portal/routes/system/routes/gateways/table.component.ts
index f5d187d57..33e307e6a 100644
--- a/web/projects/ui/src/app/routes/portal/routes/system/routes/gateways/table.component.ts
+++ b/web/projects/ui/src/app/routes/portal/routes/system/routes/gateways/table.component.ts
@@ -1,7 +1,6 @@
 import { ChangeDetectionStrategy, Component, input } from '@angular/core'
 import { i18nPipe } from '@start9labs/shared'
 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 { GatewaysItemComponent, GatewayPlus } from './item.component'
 
@@ -18,32 +17,19 @@ import { GatewaysItemComponent, GatewayPlus } from './item.component'
         null,
       ]"
     >
-      @for (proxy of gateways(); track $index) {
-        <tr [proxy]="proxy"></tr>
+      @for (gateway of gateways(); track $index) {
+        <tr [gateway]="gateway"></tr>
       } @empty {
         <tr>
           <td colspan="5">
-            @if (gateways()) {
-              <app-placeholder icon="@tui.door-closed-locked">
-                <!-- @TODO translation -->
-                No gateways
-              </app-placeholder>
-            } @else {
-              <div [tuiSkeleton]="true">{{ 'Loading' | i18n }}</div>
-            }
+            <div [tuiSkeleton]="true">{{ 'Loading' | i18n }}</div>
           </td>
         </tr>
       }
     </table>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [
-    TuiSkeleton,
-    i18nPipe,
-    TableComponent,
-    GatewaysItemComponent,
-    PlaceholderComponent,
-  ],
+  imports: [TuiSkeleton, i18nPipe, TableComponent, GatewaysItemComponent],
 })
 export class GatewaysTableComponent<T extends GatewayPlus> {
   readonly gateways = input<readonly T[] | null>(null)
diff --git a/web/projects/ui/src/app/routes/portal/routes/system/routes/ssh/ssh.component.ts b/web/projects/ui/src/app/routes/portal/routes/system/routes/ssh/ssh.component.ts
index ffc9b1852..e03b64c7c 100644
--- a/web/projects/ui/src/app/routes/portal/routes/system/routes/ssh/ssh.component.ts
+++ b/web/projects/ui/src/app/routes/portal/routes/system/routes/ssh/ssh.component.ts
@@ -14,7 +14,7 @@ import {
   LoadingService,
 } from '@start9labs/shared'
 import { ISB } from '@start9labs/start-sdk'
-import { TuiButton, TuiLink } from '@taiga-ui/core'
+import { TuiButton } from '@taiga-ui/core'
 import { filter, from, merge, Subject } from 'rxjs'
 import { FormComponent } from 'src/app/routes/portal/components/form.component'
 import { SSHKey } from 'src/app/services/api/api.types'
@@ -37,13 +37,15 @@ import { SSHTableComponent } from './table.component'
       <header>
         {{ 'SSH Keys' | i18n }}
         <a
-          tuiLink
+          tuiIconButton
+          size="xs"
           docsLink
           path="/user-manual/ssh.html"
-          appearance="action-grayscale"
-          iconEnd="@tui.external-link"
-          [pseudo]="true"
-        ></a>
+          appearance="icon"
+          iconStart="@tui.external-link"
+        >
+          {{ 'Documentation' | i18n }}
+        </a>
         <button
           tuiButton
           size="xs"
@@ -82,7 +84,6 @@ import { SSHTableComponent } from './table.component'
     SSHTableComponent,
     RouterLink,
     TitleDirective,
-    TuiLink,
     i18nPipe,
     DocsLinkDirective,
   ],
diff --git a/web/projects/ui/src/app/routes/portal/routes/system/routes/startos-ui/startos-ui.component.ts b/web/projects/ui/src/app/routes/portal/routes/system/routes/startos-ui/startos-ui.component.ts
index cab871833..9316d4d7f 100644
--- a/web/projects/ui/src/app/routes/portal/routes/system/routes/startos-ui/startos-ui.component.ts
+++ b/web/projects/ui/src/app/routes/portal/routes/system/routes/startos-ui/startos-ui.component.ts
@@ -35,7 +35,7 @@ import { TitleDirective } from 'src/app/services/title.service'
       </hgroup>
     </header>
     @if (ui(); as ui) {
-      <service-interface [value]="ui" [isRunning]="true" />
+      <service-interface [value]="ui" [isRunning]="true" [osUi]="true" />
     }
   `,
   host: { class: 'g-subpage' },
@@ -80,7 +80,14 @@ export default class StartOsUiComponent {
           return {
             ...this.iface,
             addresses: getAddresses(this.iface, host, this.config),
-            gateways: [],
+            gateways: [
+              {
+                id: 'eth0',
+                name: 'Wired Connection 1',
+                public: false,
+                enabled: true,
+              },
+            ],
             torDomains: [],
             clearnetDomains: [],
           }