Merge branch 'feature/start-tunnel' of github.com:Start9Labs/start-os into feature/start-tunnel

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

@@ -5,7 +5,12 @@ import {
   input,
   output,
 } from '@angular/core'
-import { CopyService, DialogService, i18nPipe } from '@start9labs/shared'
+import {
+  CopyService,
+  DialogService,
+  i18nKey,
+  i18nPipe,
+} from '@start9labs/shared'
 import { TUI_IS_MOBILE } from '@taiga-ui/cdk'
 import {
   TuiButton,
@@ -22,6 +27,14 @@ import { InterfaceComponent } from '../interface.component'
   selector: 'td[actions]',
   template: `
     <div class="desktop">
+      <button
+        tuiIconButton
+        appearance="flat-grayscale"
+        iconStart="@tui.info"
+        (click)="viewDetails()"
+      >
+        {{ 'Address details' | i18n }}
+      </button>
       @if (interface.value()?.type === 'ui') {
         <a
           tuiIconButton
@@ -62,7 +75,7 @@ import { InterfaceComponent } from '../interface.component'
       >
         {{ 'Actions' | i18n }}
         <tui-data-list *tuiTextfieldDropdown="let close">
-          <button tuiOption new iconStart="@tui.eye" (click)="onDetails.emit()">
+          <button tuiOption new iconStart="@tui.info" (click)="viewDetails()">
             {{ 'Address details' | i18n }}
           </button>
           @if (interface.value()?.type === 'ui') {
@@ -125,12 +138,24 @@ export class AddressActionsComponent {
   readonly interface = inject(InterfaceComponent)
 
   readonly href = input.required<string>()
+  readonly bullets = input.required<string[]>()
   readonly disabled = input.required<boolean>()
 
-  readonly onDetails = output<void>()
-
   open = false
 
+  viewDetails() {
+    this.dialog
+      .openAlert(
+        `<ul>${this.bullets()
+          .map(b => `<li>${b}</li>`)
+          .join('')}</ul>` as i18nKey,
+        {
+          label: 'About this address' as i18nKey,
+        },
+      )
+      .subscribe()
+  }
+
   showQR() {
     this.dialog
       .openComponent(new PolymorpheusComponent(QRModal), {

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

@@ -12,7 +12,7 @@ import { InterfaceAddressItemComponent } from './item.component'
   selector: 'section[addresses]',
   template: `
     <header>{{ 'Addresses' | i18n }}</header>
-    <table [appTable]="[null, 'Type', 'Access', 'Gateway', 'URL', null]">
+    <table [appTable]="['Type', 'Access', 'Gateway', 'URL', null]">
       @for (address of addresses()?.common; track $index) {
         <tr [address]="address" [isRunning]="isRunning()"></tr>
       } @empty {

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

@@ -1,11 +1,5 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  input,
-  inject,
-} from '@angular/core'
-import { DialogService, i18nKey, i18nPipe } from '@start9labs/shared'
-import { TuiButton } from '@taiga-ui/core'
+import { ChangeDetectionStrategy, Component, input } from '@angular/core'
+import { i18nPipe } from '@start9labs/shared'
 import { DisplayAddress } from '../interface.service'
 import { AddressActionsComponent } from './actions.component'
 import { TuiBadge } from '@taiga-ui/kit'
@@ -14,16 +8,6 @@ import { TuiBadge } from '@taiga-ui/kit'
   selector: 'tr[address]',
   template: `
     @if (address(); as address) {
-      <td [style.width.rem]="3">
-        <button
-          tuiIconButton
-          appearance="flat-grayscale"
-          iconStart="@tui.info"
-          (click)="viewDetails(address.bullets)"
-        >
-          {{ 'Address details' | i18n }}
-        </button>
-      </td>
       <td>{{ address.type }}</td>
       <td>
         @if (address.access === 'public') {
@@ -50,8 +34,8 @@ import { TuiBadge } from '@taiga-ui/kit'
         actions
         [disabled]="!isRunning()"
         [href]="address.url"
+        [bullets]="address.bullets"
         [style.width.rem]="5"
-        (onDetails)="viewDetails(address.bullets)"
       ></td>
     }
   `,
@@ -89,22 +73,10 @@ import { TuiBadge } from '@taiga-ui/kit'
       }
     }
   `,
-  imports: [i18nPipe, AddressActionsComponent, TuiButton, TuiBadge],
+  imports: [i18nPipe, AddressActionsComponent, TuiBadge],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class InterfaceAddressItemComponent {
   readonly address = input.required<DisplayAddress>()
   readonly isRunning = input.required<boolean>()
-  readonly dialog = inject(DialogService)
-
-  viewDetails(bullets: string[]) {
-    this.dialog
-      .openAlert(
-        `<ul>${bullets.map(b => `<li>${b}</li>`).join('')}</ul>` as i18nKey,
-        {
-          label: 'About this address' as i18nKey,
-        },
-      )
-      .subscribe()
-  }
 }