merge

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

@@ -12,16 +12,17 @@ import {
   tuiButtonOptionsProvider,
   TuiDataList,
   TuiDropdown,
+  TuiTextfield,
 } from '@taiga-ui/core'
 import { PolymorpheusComponent } from '@taiga-ui/polymorpheus'
 import { QRModal } from 'src/app/routes/portal/modals/qr.component'
+
 import { InterfaceComponent } from '../interface.component'
 
 @Component({
   selector: 'td[actions]',
   template: `
     <div class="desktop">
-      <ng-content />
       @if (interface.value().type === 'ui') {
         <button
           tuiIconButton
@@ -52,46 +53,48 @@ import { InterfaceComponent } from '../interface.component'
     </div>
     <div class="mobile">
       <button
+        tuiDropdown
         tuiIconButton
+        appearance="flat-grayscale"
         iconStart="@tui.ellipsis-vertical"
-        tuiDropdownOpen
-        [tuiDropdown]="dropdown"
+        [tuiAppearanceState]="open ? 'hover' : null"
+        [(tuiDropdownOpen)]="open"
       >
         {{ 'Actions' | i18n }}
-        <ng-template #dropdown let-close>
-          <tui-data-list>
-            <tui-opt-group>
-              @if (interface.value().type === 'ui') {
-                <button
-                  tuiOption
-                  iconStart="@tui.external-link"
-                  [disabled]="disabled()"
-                  (click)="openUI()"
-                >
-                  {{ 'Open' | i18n }}
-                </button>
-              }
-              <button tuiOption iconStart="@tui.qr-code" (click)="showQR()">
-                {{ 'Show QR' | i18n }}
-              </button>
-              <button
-                tuiOption
-                iconStart="@tui.copy"
-                (click)="copyService.copy(href()); close()"
-              >
-                {{ 'Copy URL' | i18n }}
-              </button>
-            </tui-opt-group>
-            <tui-opt-group><ng-content select="[tuiOption]" /></tui-opt-group>
-          </tui-data-list>
-        </ng-template>
+        <tui-data-list *tuiTextfieldDropdown="let close">
+          <button tuiOption new iconStart="@tui.eye" (click)="instructions()">
+            {{ 'View instructions' | i18n }}
+          </button>
+          @if (interface.value().type === 'ui') {
+            <button
+              tuiOption
+              new
+              iconStart="@tui.external-link"
+              [disabled]="disabled()"
+              (click)="openUI()"
+            >
+              {{ 'Open' | i18n }}
+            </button>
+          }
+          <button tuiOption new iconStart="@tui.qr-code" (click)="showQR()">
+            {{ 'Show QR' | i18n }}
+          </button>
+          <button
+            tuiOption
+            new
+            iconStart="@tui.copy"
+            (click)="copyService.copy(href()); close()"
+          >
+            {{ 'Copy URL' | i18n }}
+          </button>
+        </tui-data-list>
       </button>
     </div>
   `,
   styles: `
     :host {
       text-align: right;
-      grid-area: 1 / 2 / 3 / 3;
+      grid-area: 1 / 2 / 4 / 3;
       place-content: center;
       white-space: nowrap;
     }
@@ -110,7 +113,7 @@ import { InterfaceComponent } from '../interface.component'
       }
     }
   `,
-  imports: [TuiButton, TuiDropdown, TuiDataList, i18nPipe],
+  imports: [TuiButton, TuiDropdown, TuiDataList, i18nPipe, TuiTextfield],
   providers: [tuiButtonOptionsProvider({ appearance: 'icon' })],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
@@ -125,6 +128,8 @@ export class AddressActionsComponent {
   readonly href = input.required<string>()
   readonly disabled = input.required<boolean>()
 
+  open = false
+
   showQR() {
     this.dialog
       .openComponent(new PolymorpheusComponent(QRModal), {
@@ -138,4 +143,6 @@ export class AddressActionsComponent {
   openUI() {
     this.document.defaultView?.open(this.href(), '_blank', 'noreferrer')
   }
+
+  instructions() {}
 }

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

@@ -1,6 +1,7 @@
 import { ChangeDetectionStrategy, Component, input } from '@angular/core'
 import { i18nPipe } from '@start9labs/shared'
-import { TuiButton, TuiDataList, TuiDropdown } from '@taiga-ui/core'
+import { TuiButton } from '@taiga-ui/core'
+import { TuiAccordion } from '@taiga-ui/experimental'
 import { PlaceholderComponent } from 'src/app/routes/portal/components/placeholder.component'
 import { TableComponent } from 'src/app/routes/portal/components/table.component'
 import { MappedServiceInterface } from '../interface.utils'
@@ -10,70 +11,95 @@ import { AddressActionsComponent } from './actions.component'
   selector: 'section[addresses]',
   template: `
     <header>{{ 'Addresses' | i18n }}</header>
-    @if (addresses().common.length) {
-      <section class="g-card">
-        <header>{{ 'Common' | i18n }}</header>
-        <table [appTable]="[null, 'Type', 'Gateway', 'URL', null]">
-          @for (address of addresses().common; track $index) {
-            <tr>
-              <td>
-                <button
-                  tuiIconButton
-                  appearance="flat-grayscale"
-                  iconStart="@tui.eye"
-                  (click)="instructions()"
-                >
-                  {{ 'View instructions' | i18n }}
-                </button>
-              </td>
-              <td>{{ address.type }}</td>
-              <td>{{ address.gateway }}</td>
-              <td>{{ address.url }}</td>
-              <td actions [disabled]="!isRunning()" [href]="address.url"></td>
-            </tr>
-          }
-        </table>
-      </section>
-    } @else {
-      <app-placeholder icon="@tui.app-window">
-        {{ 'No addresses' | i18n }}
-      </app-placeholder>
-    }
+    <table [appTable]="[null, 'Type', 'Gateway', 'URL', null]">
+      @for (address of addresses().common; track $index) {
+        <tr>
+          <td>
+            <button
+              tuiIconButton
+              appearance="flat-grayscale"
+              iconStart="@tui.eye"
+              (click)="instructions()"
+            >
+              {{ 'View instructions' | i18n }}
+            </button>
+          </td>
+          <td>{{ address.type }}</td>
+          <td [style.order]="-1">{{ address.gateway }}</td>
+          <td>{{ address.url }}</td>
+          <td actions [disabled]="!isRunning()" [href]="address.url"></td>
+        </tr>
+      } @empty {
+        <tr>
+          <td colspan="5">
+            <app-placeholder icon="@tui.app-window">
+              {{ 'No addresses' | i18n }}
+            </app-placeholder>
+          </td>
+        </tr>
+      }
+    </table>
 
     @if (addresses().uncommon.length) {
-      <section class="g-card">
-        <header>{{ 'Uncommon' | i18n }}</header>
-        <table [appTable]="[null, 'Type', 'Gateway', 'URL', null]">
-          @for (address of addresses().uncommon; track $index) {
-            <tr>
-              <td>
-                <button
-                  tuiIconButton
-                  appearance="flat-grayscale"
-                  iconStart="@tui.eye"
-                  (click)="instructions()"
-                >
-                  {{ 'View instructions' | i18n }}
-                </button>
-              </td>
-              <td>{{ address.type }}</td>
-              <td>{{ address.gateway }}</td>
-              <td>{{ address.url }}</td>
-              <td actions [disabled]="!isRunning()" [href]="address.url"></td>
-            </tr>
-          }
-        </table>
-      </section>
+      <tui-accordion>
+        <button tuiAccordion>{{ 'Uncommon' | i18n }}</button>
+        <tui-expand>
+          <table [appTable]="[null, 'Type', 'Gateway', 'URL', null]">
+            @for (address of addresses().uncommon; track $index) {
+              <tr>
+                <td>
+                  <button
+                    tuiIconButton
+                    appearance="flat-grayscale"
+                    iconStart="@tui.eye"
+                    (click)="instructions()"
+                  >
+                    {{ 'View instructions' | i18n }}
+                  </button>
+                </td>
+                <td>{{ address.type }}</td>
+                <td [style.order]="-1">{{ address.gateway }}</td>
+                <td>{{ address.url }}</td>
+                <td actions [disabled]="!isRunning()" [href]="address.url"></td>
+              </tr>
+            }
+          </table>
+        </tui-expand>
+      </tui-accordion>
     }
   `,
+  styles: `
+    [tuiAccordion],
+    tui-expand {
+      box-shadow: none;
+      padding: 0;
+      background: none !important;
+
+      &::after {
+        margin-inline-end: 0.25rem;
+      }
+    }
+
+    :host-context(tui-root._mobile) {
+      td:first-child {
+        display: none;
+      }
+
+      td:nth-child(2) {
+        font: var(--tui-font-text-m);
+        font-weight: bold;
+        color: var(--tui-text-primary);
+      }
+    }
+  `,
+  host: { class: 'g-card' },
   imports: [
     TableComponent,
     PlaceholderComponent,
     i18nPipe,
-    TuiDropdown,
-    TuiDataList,
     AddressActionsComponent,
     TuiButton,
+    TuiAccordion,
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })

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

@@ -1,35 +1,10 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  inject,
-  input,
-} from '@angular/core'
-import {
-  DialogService,
-  DocsLinkDirective,
-  ErrorService,
-  i18nPipe,
-  LoadingService,
-} from '@start9labs/shared'
-import { ISB, utils } from '@start9labs/start-sdk'
-import {
-  TuiAppearance,
-  TuiButton,
-  TuiDataList,
-  TuiDropdown,
-  TuiLink,
-} from '@taiga-ui/core'
-import { filter } from 'rxjs'
-import {
-  FormComponent,
-  FormContext,
-} from 'src/app/routes/portal/components/form.component'
-import { InterfaceComponent } from 'src/app/routes/portal/components/interfaces/interface.component'
+import { ChangeDetectionStrategy, Component, input } from '@angular/core'
+import { DocsLinkDirective, i18nPipe } from '@start9labs/shared'
+import { TuiButton } from '@taiga-ui/core'
 import { PlaceholderComponent } from 'src/app/routes/portal/components/placeholder.component'
 import { TableComponent } from 'src/app/routes/portal/components/table.component'
-import { ApiService } from 'src/app/services/api/embassy-api.service'
-import { FormDialogService } from 'src/app/services/form-dialog.service'
-import { configBuilderToSpec } from 'src/app/utils/configBuilderToSpec'
+
+import { DomainComponent } from './domain.component'
 import { ClearnetDomain } from './interface.utils'
 
 @Component({
@@ -38,13 +13,14 @@ import { ClearnetDomain } from './interface.utils'
     <header>
       {{ 'Clearnet Domains' | i18n }}
       <a
-        tuiLink
+        tuiIconButton
         docsLink
         path="/user-manual/connecting-remotely/clearnet.html"
-        appearance="action-grayscale"
-        iconEnd="@tui.external-link"
-        [pseudo]="true"
-      ></a>
+        appearance="icon"
+        iconStart="@tui.external-link"
+      >
+        {{ 'Documentation' | i18n }}
+      </a>
       <button
         tuiButton
         iconStart="@tui.plus"
@@ -54,133 +30,40 @@ import { ClearnetDomain } from './interface.utils'
         {{ 'Add' | i18n }}
       </button>
     </header>
-    @if (clearnetDomains().length) {
-      <table [appTable]="['Domain', 'Certificate Authority', 'Type', null]">
-        @for (domain of clearnetDomains(); track $index) {
-          <tr>
-            <td>{{ domain.fqdn }}</td>
-            <td>{{ domain.authority }}</td>
-            <td>{{ domain.public ? 'public' : 'private' }}</td>
-            <td>
-              <button
-                tuiIconButton
-                tuiDropdown
-                size="s"
-                appearance="flat-grayscale"
-                iconStart="@tui.ellipsis-vertical"
-                [tuiAppearanceState]="open ? 'hover' : null"
-                [(tuiDropdownOpen)]="open"
-              >
-                {{ 'More' | i18n }}
-                <tui-data-list size="s" *tuiTextfieldDropdown>
-                  <tui-opt-group>
-                    <button
-                      tuiOption
-                      new
-                      [iconStart]="
-                        domain.public ? '@tui.globe-lock' : '@tui.globe'
-                      "
-                      (click)="togglePrivate(domain)"
-                    >
-                      {{
-                        domain.public
-                          ? ('Make private' | i18n)
-                          : ('Make public' | i18n)
-                      }}
-                    </button>
-                    <button
-                      tuiOption
-                      new
-                      iconStart="@tui.award"
-                      (click)="changeCa(domain)"
-                    >
-                      {{ 'Change CA' | i18n }}
-                    </button>
-                  </tui-opt-group>
-                  <tui-opt-group>
-                    <button
-                      tuiOption
-                      new
-                      iconStart="@tui.trash"
-                      class="g-negative"
-                      (click)="remove(domain.fqdn)"
-                    >
-                      {{ 'Delete' | i18n }}
-                    </button>
-                  </tui-opt-group>
-                </tui-data-list>
-              </button>
-            </td>
-          </tr>
-        }
-      </table>
-    } @else {
-      <app-placeholder icon="@tui.app-window">
-        {{ 'No clearnet domains' | i18n }}
-      </app-placeholder>
+    <table [appTable]="['Domain', 'Certificate Authority', 'Type', null]">
+      @for (domain of clearnetDomains(); track $index) {
+        <tr [domain]="domain"></tr>
+      } @empty {
+        <tr>
+          <td colspan="4">
+            <app-placeholder icon="@tui.app-window">
+              {{ 'No clearnet domains' | i18n }}
+            </app-placeholder>
+          </td>
+        </tr>
+      }
+    </table>
+  `,
+  styles: `
+    :host {
+      grid-column: span 3;
     }
   `,
+  host: { class: 'g-card' },
   imports: [
     TuiButton,
-    TuiLink,
-    TuiAppearance,
     TableComponent,
     PlaceholderComponent,
     i18nPipe,
     DocsLinkDirective,
-    TuiDropdown,
-    TuiDataList,
+    DomainComponent,
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class InterfaceClearnetDomainsComponent {
-  private readonly dialog = inject(DialogService)
-  private readonly formDialog = inject(FormDialogService)
-  private readonly loader = inject(LoadingService)
-  private readonly errorService = inject(ErrorService)
-  private readonly api = inject(ApiService)
-  private readonly interface = inject(InterfaceComponent)
-  private readonly i18n = inject(i18nPipe)
-
   readonly clearnetDomains = input.required<readonly ClearnetDomain[]>()
 
   open = false
 
-  // @TODO add, toggle, and change CA call same idempotent endpoint, either pkgAddDomain or osUiAddDomain
-
-  async add() {
-    // @TODO baseDomain (select), subdomain (optional)(text), certificateAuthority (select), public/private (select)
-  }
-
-  async togglePrivate(domain: ClearnetDomain) {}
-
-  async changeCa(domain: ClearnetDomain) {}
-
-  async remove(fqdn: string) {
-    this.dialog
-      .openConfirm({ label: 'Are you sure?', size: 's' })
-      .pipe(filter(Boolean))
-      .subscribe(async () => {
-        const loader = this.loader.open('Removing').subscribe()
-        const params = { fqdn }
-
-        try {
-          if (this.interface.packageId()) {
-            await this.api.pkgRemoveDomain({
-              ...params,
-              package: this.interface.packageId(),
-              host: this.interface.value().addressInfo.hostId,
-            })
-          } else {
-            await this.api.osUiRemoveDomain(params)
-          }
-          return true
-        } catch (e: any) {
-          this.errorService.handleError(e)
-          return false
-        } finally {
-          loader.unsubscribe()
-        }
-      })
-  }
+  add() {}
 }

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

@@ -0,0 +1,161 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  inject,
+  input,
+} from '@angular/core'
+import {
+  DialogService,
+  ErrorService,
+  i18nPipe,
+  LoadingService,
+} from '@start9labs/shared'
+import {
+  TuiButton,
+  TuiDataList,
+  TuiDropdown,
+  TuiTextfield,
+} from '@taiga-ui/core'
+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'
+
+@Component({
+  selector: 'tr[domain]',
+  template: `
+    <td>{{ domain().fqdn }}</td>
+    <td>{{ domain().authority || '-' }}</td>
+    <td>
+      @if (domain().public) {
+        <tui-badge size="s" appearance="primary-success">
+          {{ 'Public' | i18n }}
+        </tui-badge>
+      } @else {
+        <tui-badge size="s" appearance="primary-destructive">
+          {{ 'Private' | i18n }}
+        </tui-badge>
+      }
+    </td>
+    <td>
+      <button
+        tuiIconButton
+        tuiDropdown
+        size="s"
+        appearance="flat-grayscale"
+        iconStart="@tui.ellipsis-vertical"
+        [tuiAppearanceState]="open ? 'hover' : null"
+        [(tuiDropdownOpen)]="open"
+      >
+        {{ 'More' | i18n }}
+        <tui-data-list *tuiTextfieldDropdown>
+          <tui-opt-group>
+            <button
+              tuiOption
+              new
+              [iconStart]="domain().public ? '@tui.eye-off' : '@tui.eye'"
+              (click)="toggle()"
+            >
+              @if (domain().public) {
+                {{ 'Make private' | i18n }}
+              } @else {
+                {{ 'Make public' | i18n }}
+              }
+            </button>
+            <button tuiOption new iconStart="@tui.pencil" (click)="edit()">
+              {{ 'Edit' | i18n }}
+            </button>
+          </tui-opt-group>
+          <tui-opt-group>
+            <button
+              tuiOption
+              new
+              iconStart="@tui.trash"
+              class="g-negative"
+              (click)="remove()"
+            >
+              {{ 'Delete' | i18n }}
+            </button>
+          </tui-opt-group>
+        </tui-data-list>
+      </button>
+    </td>
+  `,
+  styles: `
+    :host {
+      grid-template-columns: min-content 1fr min-content;
+    }
+
+    td:nth-child(2) {
+      order: -1;
+      grid-column: span 2;
+    }
+
+    td:last-child {
+      grid-area: 1 / 3 / 3;
+      align-self: center;
+      text-align: right;
+    }
+
+    :host-context(tui-root._mobile) {
+      tui-badge {
+        vertical-align: bottom;
+        margin-inline-start: 0.25rem;
+      }
+    }
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    TuiButton,
+    TuiDataList,
+    TuiDropdown,
+    i18nPipe,
+    TuiTextfield,
+    TuiBadge,
+  ],
+})
+export class DomainComponent {
+  private readonly dialog = inject(DialogService)
+  private readonly loader = inject(LoadingService)
+  private readonly errorService = inject(ErrorService)
+  private readonly api = inject(ApiService)
+  private readonly interface = inject(InterfaceComponent)
+
+  readonly domain = input.required<ClearnetDomain>()
+
+  open = false
+
+  toggle() {}
+
+  edit() {}
+
+  remove() {
+    this.dialog
+      .openConfirm({ label: 'Are you sure?', size: 's' })
+      .pipe(filter(Boolean))
+      .subscribe(async () => {
+        const loader = this.loader.open('Removing').subscribe()
+        const params = { fqdn: this.domain().fqdn }
+
+        try {
+          if (this.interface.packageId()) {
+            await this.api.pkgRemoveDomain({
+              ...params,
+              package: this.interface.packageId(),
+              host: this.interface.value().addressInfo.hostId,
+            })
+          } else {
+            await this.api.osUiRemoveDomain(params)
+          }
+          return true
+        } catch (e: any) {
+          this.errorService.handleError(e)
+          return false
+        } finally {
+          loader.unsubscribe()
+        }
+      })
+  }
+}

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

@@ -1,32 +1,45 @@
 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 { 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'
 
 @Component({
   selector: 'section[gateways]',
   template: `
     <header>{{ 'Gateways' | i18n }}</header>
-    <ul>
-      @for (gateway of gateways(); track $index) {
-        <li>
-          {{ gateway.name }}
-          <input
-            type="checkbox"
-            tuiSwitch
-            [style.margin-inline-start]="'auto'"
-            [showIcons]="false"
-            [ngModel]="gateway.enabled"
-            (ngModelChange)="onToggle(gateway)"
-          />
-        </li>
-      }
-      <ul></ul>
-    </ul>
+    @for (gateway of gateways(); track $index) {
+      <label tuiCell="s">
+        <span tuiTitle>{{ gateway.name }}</span>
+        <input
+          type="checkbox"
+          tuiSwitch
+          size="s"
+          [showIcons]="false"
+          [ngModel]="gateway.enabled"
+          (ngModelChange)="onToggle(gateway)"
+        />
+      </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],
+  imports: [
+    CommonModule,
+    FormsModule,
+    TuiSwitch,
+    i18nPipe,
+    TuiCell,
+    TuiTitle,
+    PlaceholderComponent,
+  ],
 })
 export class InterfaceGatewaysComponent {
   readonly gateways = input.required<any>()

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

@@ -9,17 +9,14 @@ import { InterfaceAddressesComponent } from './addresses/addresses.component'
 @Component({
   selector: 'service-interface',
   template: `
-    <section class="g-card" [gateways]="value().gateways"></section>
-    <section class="g-card" [torDomains]="value().torDomains"></section>
-    <section
-      class="g-card"
-      [clearnetDomains]="value().clearnetDomains"
-    ></section>
-    <section
-      class="g-card"
-      [addresses]="value().addresses"
-      [isRunning]="true"
-    ></section>
+    <!-- @TODO Alex / Matt translation in all nested components -->
+    <div [style.display]="'grid'">
+      <section [gateways]="value().gateways"></section>
+      <section [torDomains]="value().torDomains"></section>
+      <section [clearnetDomains]="value().clearnetDomains"></section>
+    </div>
+    <hr [style.width.rem]="10" />
+    <section [addresses]="value().addresses" [isRunning]="true"></section>
   `,
   styles: `
     :host {
@@ -29,10 +26,14 @@ import { InterfaceAddressesComponent } from './addresses/addresses.component'
       color: var(--tui-text-secondary);
       font: var(--tui-font-text-l);
 
-      ::ng-deep td {
-        overflow-wrap: anywhere;
+      div {
+        gap: inherit;
       }
     }
+
+    :host-context(tui-root._mobile) section {
+      grid-column: span 1;
+    }
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
   providers: [tuiButtonOptionsProvider({ size: 'xs' })],

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

@@ -12,19 +12,20 @@ import {
   LoadingService,
 } from '@start9labs/shared'
 import { ISB, utils } from '@start9labs/start-sdk'
-import { TuiAppearance, TuiButton, TuiLink } from '@taiga-ui/core'
+import { TuiButton, TuiTitle } from '@taiga-ui/core'
+import { TuiCell } from '@taiga-ui/layout'
 import { filter } from 'rxjs'
 import {
   FormComponent,
   FormContext,
 } from 'src/app/routes/portal/components/form.component'
-import { InterfaceComponent } from 'src/app/routes/portal/components/interfaces/interface.component'
 import { PlaceholderComponent } from 'src/app/routes/portal/components/placeholder.component'
-import { TableComponent } from 'src/app/routes/portal/components/table.component'
 import { ApiService } from 'src/app/services/api/embassy-api.service'
 import { FormDialogService } from 'src/app/services/form-dialog.service'
 import { configBuilderToSpec } from 'src/app/utils/configBuilderToSpec'
 
+import { InterfaceComponent } from './interface.component'
+
 type OnionForm = {
   key: string
 }
@@ -33,16 +34,16 @@ type OnionForm = {
   selector: 'section[torDomains]',
   template: `
     <header>
-      <!-- @TODO translation -->
       Tor Domains
       <a
-        tuiLink
+        tuiIconButton
         docsLink
         path="/user-manual/connecting-remotely/tor.html"
-        appearance="action-grayscale"
-        iconEnd="@tui.external-link"
-        [pseudo]="true"
-      ></a>
+        appearance="icon"
+        iconStart="@tui.external-link"
+      >
+        {{ 'Documentation' | i18n }}
+      </a>
       <button
         tuiButton
         iconStart="@tui.plus"
@@ -52,35 +53,34 @@ type OnionForm = {
         {{ 'Add' | i18n }}
       </button>
     </header>
-    @if (torDomains().length) {
-      <table [appTable]="['Domain', null]">
-        @for (domain of torDomains(); track $index) {
-          <tr>
-            <td>{{ domain }}</td>
-            <td>
-              <button
-                tuiIconButton
-                iconStart="@tui.trash"
-                appearance="action-destructive"
-                (click)="remove(domain)"
-              >
-                {{ 'Delete' | i18n }}
-              </button>
-            </td>
-          </tr>
-        }
-      </table>
-    } @else {
-      <app-placeholder icon="@tui.app-window">
+    @for (domain of torDomains(); track $index) {
+      <div tuiCell="s">
+        <span tuiTitle>{{ domain }}</span>
+        <button
+          tuiIconButton
+          iconStart="@tui.trash"
+          appearance="action-destructive"
+          (click)="remove(domain)"
+        >
+          {{ 'Delete' | i18n }}
+        </button>
+      </div>
+    } @empty {
+      <app-placeholder icon="@tui.target">
         {{ 'No Tor domains' | i18n }}
       </app-placeholder>
     }
   `,
+  styles: `
+    :host {
+      grid-column: span 2;
+    }
+  `,
+  host: { class: 'g-card' },
   imports: [
+    TuiCell,
+    TuiTitle,
     TuiButton,
-    TuiLink,
-    TuiAppearance,
-    TableComponent,
     PlaceholderComponent,
     i18nPipe,
     DocsLinkDirective,
@@ -98,13 +98,13 @@ export class InterfaceTorDomainsComponent {
 
   readonly torDomains = input.required<readonly string[]>()
 
-  async remove(domain: string) {
+  async remove(onion: string) {
     this.dialog
       .openConfirm({ label: 'Are you sure?', size: 's' })
       .pipe(filter(Boolean))
       .subscribe(async () => {
         const loader = this.loader.open('Removing').subscribe()
-        const params = { onion: domain }
+        const params = { onion }
 
         try {
           if (this.interface.packageId()) {

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

@@ -31,7 +31,7 @@ import { Authority, AuthorityService } from './authority.service'
           [(tuiDropdownOpen)]="open"
         >
           {{ 'More' | i18n }}
-          <tui-data-list size="s" *tuiTextfieldDropdown>
+          <tui-data-list *tuiTextfieldDropdown>
             @if (authority.url) {
               <tui-opt-group>
                 <button
@@ -82,11 +82,6 @@ import { Authority, AuthorityService } from './authority.service'
     :host-context(tui-root._mobile) {
       grid-template-columns: 1fr min-content;
 
-      td:first-child {
-        font: var(--tui-font-text-m);
-        font-weight: bold;
-      }
-
       .hidden {
         display: none;
       }

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

@@ -30,7 +30,7 @@ import { DomainService, MappedDomain } from './domain.service'
           [(tuiDropdownOpen)]="open"
         >
           {{ 'More' | i18n }}
-          <tui-data-list size="s" *tuiTextfieldDropdown>
+          <tui-data-list *tuiTextfieldDropdown>
             <tui-opt-group>
               <button
                 tuiOption
@@ -74,11 +74,6 @@ import { DomainService, MappedDomain } from './domain.service'
 
     :host-context(tui-root._mobile) {
       grid-template-columns: 1fr min-content;
-
-      td:first-child {
-        font: var(--tui-font-text-m);
-        font-weight: bold;
-      }
     }
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,

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

@@ -1,5 +1,6 @@
 import { CommonModule } from '@angular/common'
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
+import { RouterLink } from '@angular/router'
 import {
   DocsLinkDirective,
   ErrorService,
@@ -55,11 +56,12 @@ import { GatewayPlus } from './item.component'
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
     CommonModule,
+    RouterLink,
     TuiButton,
+    TuiLink,
     GatewaysTableComponent,
     TitleDirective,
     i18nPipe,
-    TuiLink,
     DocsLinkDirective,
   ],
 })

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

@@ -59,7 +59,7 @@ export type GatewayPlus = T.NetworkInterfaceInfo & {
           [(tuiDropdownOpen)]="open"
         >
           {{ 'More' | i18n }}
-          <tui-data-list size="s" *tuiTextfieldDropdown>
+          <tui-data-list *tuiTextfieldDropdown>
             <tui-opt-group>
               <button tuiOption new iconStart="@tui.pencil" (click)="rename()">
                 {{ 'Rename' | i18n }}
@@ -93,11 +93,6 @@ export type GatewayPlus = T.NetworkInterfaceInfo & {
     :host-context(tui-root._mobile) {
       grid-template-columns: min-content 1fr min-content;
 
-      td:first-child {
-        font: var(--tui-font-text-m);
-        font-weight: bold;
-      }
-
       .type {
         order: -1;
 

web/projects/ui/src/styles.scss

@@ -225,6 +225,7 @@ hr {
       padding: 0;
 
       &:first-child {
+        font: var(--tui-font-text-m);
         font-weight: bold;
         color: var(--tui-text-primary);
       }