chore: fix

2026-03-30 12:11:56 +00:00 · 2026-03-16 09:57:46 +04:00
parent b5ac0b5200
commit 7b8bb92d60
15 changed files with 191 additions and 120 deletions
--- a/web/projects/start-tunnel/src/app/app.config.ts
+++ b/web/projects/start-tunnel/src/app/app.config.ts
@@ -37,7 +37,7 @@ export const appConfig: ApplicationConfig = {
    provideRouter(routes, withRouterConfig({ onSameUrlNavigation: 'reload' })),
    provideTaiga({ mode: 'dark' }),
    tuiDropdownOptionsProvider({ appearance: 'start-9' }),
-    tuiDialogOptionsProvider({ appearance: 'start-9 taiga' }),
+    tuiDialogOptionsProvider({ appearance: 'start-9 taiga', size: 's' }),
    {
      provide: PatchDB,
      deps: [PatchDbSource, PATCH_CACHE],
--- a/web/projects/start-tunnel/src/app/routes/home/components/placeholder.ts
+++ b/web/projects/start-tunnel/src/app/routes/home/components/placeholder.ts
@@ -0,0 +1,35 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core'
+import { TuiIcon } from '@taiga-ui/core'
+
+@Component({
+  selector: 'app-placeholder',
+  template: `
+    @if (icon(); as icon) {
+      <tui-icon [icon]="icon" />
+    }
+    <ng-content />
+  `,
+  styles: `
+    :host {
+      display: flex;
+      flex: 1;
+      flex-direction: column;
+      gap: 0.5rem;
+      align-items: center;
+      justify-content: center;
+      text-align: center;
+      padding: 1rem;
+      font: var(--tui-typography-body-l);
+      color: var(--tui-text-tertiary);
+
+      tui-icon {
+        font-size: 2.5rem;
+      }
+    }
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [TuiIcon],
+})
+export class PlaceholderComponent {
+  readonly icon = input<string>()
+}
--- a/web/projects/start-tunnel/src/app/routes/home/routes/devices/add.ts
+++ b/web/projects/start-tunnel/src/app/routes/home/routes/devices/add.ts
@@ -168,7 +168,9 @@ export class DevicesAdd {
          ip,
        })

-        this.dialogs.open(DEVICES_CONFIG, { data: config }).subscribe()
+        this.dialogs
+          .open(DEVICES_CONFIG, { data: config, closable: false })
+          .subscribe()
      }
    } catch (e: any) {
      console.error(e)
--- a/web/projects/start-tunnel/src/app/routes/home/routes/devices/index.ts
+++ b/web/projects/start-tunnel/src/app/routes/home/routes/devices/index.ts
@@ -3,24 +3,28 @@ import {
  Component,
  computed,
  inject,
-  Signal,
 } from '@angular/core'
 import { toSignal } from '@angular/core/rxjs-interop'
 import { ErrorService } from '@start9labs/shared'
 import { TuiResponsiveDialogService } from '@taiga-ui/addon-mobile'
 import { TuiButton, TuiDataList, TuiDropdown } from '@taiga-ui/core'
-import { TUI_CONFIRM, TuiNotificationMiddleService } from '@taiga-ui/kit'
+import {
+  TUI_CONFIRM,
+  TuiNotificationMiddleService,
+  TuiSkeleton,
+} from '@taiga-ui/kit'
 import { PatchDB } from 'patch-db-client'
 import { filter, map } from 'rxjs'
+import { PlaceholderComponent } from 'src/app/routes/home/components/placeholder'
 import { ApiService } from 'src/app/services/api/api.service'
 import { TunnelData } from 'src/app/services/patch-db/data-model'
 import { DEVICES_ADD } from './add'
 import { DEVICES_CONFIG } from './config'
-import { MappedDevice, MappedSubnet } from './utils'
+import { MappedDevice } from './utils'

@Component({
  template: `
-    <table class="g-table">
+    <table class="g-table" [tuiSkeleton]="!devices()">
      <thead>
        <tr>
          <th>Name</th>
@@ -49,7 +53,11 @@ import { MappedDevice, MappedSubnet } from './utils'
                iconStart="@tui.ellipsis-vertical"
              >
                Actions
-                <tui-data-list *tuiDropdown size="s">
+                <tui-data-list
+                  *tuiDropdown="let close"
+                  size="s"
+                  (click)="close()"
+                >
                  <button
                    tuiOption
                    iconStart="@tui.pencil"
@@ -76,13 +84,23 @@ import { MappedDevice, MappedSubnet } from './utils'
            </td>
          </tr>
        } @empty {
-          <div class="placeholder">No devices</div>
+          <tr>
+            <td colspan="4">
+              <app-placeholder icon="@tui.laptop">No devices</app-placeholder>
+            </td>
+          </tr>
        }
      </tbody>
    </table>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [TuiButton, TuiDropdown, TuiDataList],
+  imports: [
+    TuiButton,
+    TuiDropdown,
+    TuiDataList,
+    PlaceholderComponent,
+    TuiSkeleton,
+  ],
 })
 export default class Devices {
  private readonly dialogs = inject(TuiResponsiveDialogService)
@@ -90,7 +108,7 @@ export default class Devices {
  private readonly loading = inject(TuiNotificationMiddleService)
  private readonly errorService = inject(ErrorService)

-  protected readonly subnets: Signal<readonly MappedSubnet[]> = toSignal(
+  protected readonly subnets = toSignal(
    inject<PatchDB<TunnelData>>(PatchDB)
      .watch$('wg', 'subnets')
      .pipe(
@@ -102,11 +120,11 @@ export default class Devices {
          })),
        ),
      ),
-    { initialValue: [] },
+    { initialValue: null },
  )

  protected readonly devices = computed(() =>
-    this.subnets().flatMap(subnet =>
+    this.subnets()?.flatMap(subnet =>
      Object.entries(subnet.clients).map(([ip, { name }]) => ({
        subnet: {
          name: subnet.name,
@@ -141,7 +159,7 @@ export default class Devices {
    try {
      const data = await this.api.showDeviceConfig({ subnet: subnet.range, ip })

-      this.dialogs.open(DEVICES_CONFIG, { data }).subscribe()
+      this.dialogs.open(DEVICES_CONFIG, { data, closable: false }).subscribe()
    } catch (e: any) {
      console.log(e)
      this.errorService.handleError(e)
--- a/web/projects/start-tunnel/src/app/routes/home/routes/port-forwards/add.ts
+++ b/web/projects/start-tunnel/src/app/routes/home/routes/port-forwards/add.ts
@@ -15,6 +15,7 @@ import {
  TuiCheckbox,
  TuiDialogContext,
  TuiError,
+  TuiInput,
  TuiNumberFormat,
 } from '@taiga-ui/core'
 import {
@@ -35,7 +36,7 @@ import { MappedDevice, PortForwardsData } from './utils'
    <form tuiForm [formGroup]="form">
      <tui-textfield>
        <label tuiLabel>Label</label>
-        <input tuiTextfield formControlName="label" />
+        <input tuiInput formControlName="label" />
      </tui-textfield>
      <tui-error formControlName="label" />
      <tui-textfield tuiChevron>
@@ -129,6 +130,7 @@ import { MappedDevice, PortForwardsData } from './utils'
    TuiCheckbox,
    TuiValueChanges,
    TuiElasticContainer,
+    TuiInput,
  ],
 })
 export class PortForwardsAdd {
--- a/web/projects/start-tunnel/src/app/routes/home/routes/port-forwards/edit-label.ts
+++ b/web/projects/start-tunnel/src/app/routes/home/routes/port-forwards/edit-label.ts
@@ -6,12 +6,7 @@ import {
 } from '@angular/forms'
 import { ErrorService } from '@start9labs/shared'
 import { T } from '@start9labs/start-sdk'
-import {
-  TuiButton,
-  TuiDialogContext,
-  TuiError,
-  TuiTextfield,
-} from '@taiga-ui/core'
+import { TuiButton, TuiDialogContext, TuiError, TuiInput } from '@taiga-ui/core'
 import { TuiNotificationMiddleService } from '@taiga-ui/kit'
 import { TuiForm } from '@taiga-ui/layout'
 import { injectContext, PolymorpheusComponent } from '@taiga-ui/polymorpheus'
@@ -27,7 +22,7 @@ export interface EditLabelData {
    <form tuiForm [formGroup]="form">
      <tui-textfield>
        <label tuiLabel>Label</label>
-        <input tuiTextfield formControlName="label" />
+        <input tuiInput formControlName="label" />
      </tui-textfield>
      <tui-error formControlName="label" />
      <footer>
@@ -38,7 +33,7 @@ export interface EditLabelData {
    </form>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [ReactiveFormsModule, TuiButton, TuiError, TuiTextfield, TuiForm],
+  imports: [ReactiveFormsModule, TuiButton, TuiError, TuiInput, TuiForm],
 })
 export class PortForwardsEditLabel {
  private readonly api = inject(ApiService)
--- a/web/projects/start-tunnel/src/app/routes/home/routes/port-forwards/index.ts
+++ b/web/projects/start-tunnel/src/app/routes/home/routes/port-forwards/index.ts
@@ -21,10 +21,12 @@ import {
 import {
  TUI_CONFIRM,
  TuiNotificationMiddleService,
+  TuiSkeleton,
  TuiSwitch,
 } from '@taiga-ui/kit'
 import { PatchDB } from 'patch-db-client'
 import { filter, map } from 'rxjs'
+import { PlaceholderComponent } from 'src/app/routes/home/components/placeholder'
 import { PORT_FORWARDS_ADD } from 'src/app/routes/home/routes/port-forwards/add'
 import { PORT_FORWARDS_EDIT_LABEL } from 'src/app/routes/home/routes/port-forwards/edit-label'
 import { ApiService } from 'src/app/services/api/api.service'
@@ -34,7 +36,7 @@ import { MappedDevice, MappedForward } from './utils'

@Component({
  template: `
-    <table class="g-table">
+    <table class="g-table" [tuiSkeleton]="!portForwards()">
      <thead>
        <tr>
          <th></th>
@@ -84,11 +86,14 @@ import { MappedDevice, MappedForward } from './utils'
                iconStart="@tui.ellipsis-vertical"
              >
                Actions
-                <tui-data-list *tuiDropdown size="s">
+                <tui-data-list
+                  *tuiDropdown="let close"
+                  size="s"
+                  (click)="close()"
+                >
                  <button
                    tuiOption
                    iconStart="@tui.pencil"
-                    new
                    (click)="onEditLabel(forward)"
                  >
                    {{ forward.label ? 'Rename' : 'Add label' }}
@@ -96,7 +101,6 @@ import { MappedDevice, MappedForward } from './utils'
                  <button
                    tuiOption
                    iconStart="@tui.trash"
-                    new
                    (click)="onDelete(forward)"
                  >
                    Delete
@@ -106,7 +110,13 @@ import { MappedDevice, MappedForward } from './utils'
            </td>
          </tr>
        } @empty {
-          <div class="placeholder">No port forwards</div>
+          <tr>
+            <td colspan="7">
+              <app-placeholder icon="@tui.globe">
+                No port forwards
+              </app-placeholder>
+            </td>
+          </tr>
        }
      </tbody>
    </table>
@@ -120,6 +130,8 @@ import { MappedDevice, MappedForward } from './utils'
    TuiLoader,
    TuiSwitch,
    TuiTextfield,
+    PlaceholderComponent,
+    TuiSkeleton,
  ],
 })
 export default class PortForwards {
@@ -128,8 +140,6 @@ export default class PortForwards {
  private readonly loading = inject(TuiNotificationMiddleService)
  private readonly patch = inject<PatchDB<TunnelData>>(PatchDB)
  private readonly errorService = inject(ErrorService)
-
-  private readonly portForwards = toSignal(this.patch.watch$('portForwards'))
  private readonly ips = toSignal(
    this.patch.watch$('gateways').pipe(
      map(g =>
@@ -157,6 +167,7 @@ export default class PortForwards {
    { initialValue: [] },
  )

+  protected readonly portForwards = toSignal(this.patch.watch$('portForwards'))
  protected readonly forwards = computed(() =>
    Object.entries(this.portForwards() || {}).map(([source, entry]) => {
      const sourceSplit = source.split(':')
--- a/web/projects/start-tunnel/src/app/routes/home/routes/subnets/index.ts
+++ b/web/projects/start-tunnel/src/app/routes/home/routes/subnets/index.ts
@@ -3,9 +3,14 @@ import { toSignal } from '@angular/core/rxjs-interop'
 import { utils } from '@start9labs/start-sdk'
 import { TuiResponsiveDialogService } from '@taiga-ui/addon-mobile'
 import { TuiButton, TuiDataList, TuiDropdown } from '@taiga-ui/core'
-import { TUI_CONFIRM, TuiNotificationMiddleService } from '@taiga-ui/kit'
+import {
+  TUI_CONFIRM,
+  TuiNotificationMiddleService,
+  TuiSkeleton,
+} from '@taiga-ui/kit'
 import { PatchDB } from 'patch-db-client'
 import { filter, map } from 'rxjs'
+import { PlaceholderComponent } from 'src/app/routes/home/components/placeholder'
 import { ApiService } from 'src/app/services/api/api.service'
 import { TunnelData } from 'src/app/services/patch-db/data-model'

@@ -13,7 +18,7 @@ import { SUBNETS_ADD } from './add'

@Component({
  template: `
-    <table class="g-table">
+    <table class="g-table" [tuiSkeleton]="!subnets()">
      <thead>
        <tr>
          <th>Name</th>
@@ -40,7 +45,11 @@ import { SUBNETS_ADD } from './add'
                iconStart="@tui.ellipsis-vertical"
              >
                Actions
-                <tui-data-list *tuiDropdown size="s">
+                <tui-data-list
+                  *tuiDropdown="let close"
+                  size="s"
+                  (click)="close()"
+                >
                  <button
                    tuiOption
                    iconStart="@tui.pencil"
@@ -60,20 +69,30 @@ import { SUBNETS_ADD } from './add'
            </td>
          </tr>
        } @empty {
-          <div class="placeholder">No subnets</div>
+          <tr>
+            <td colspan="3">
+              <app-placeholder icon="@tui.network">No subnets</app-placeholder>
+            </td>
+          </tr>
        }
      </tbody>
    </table>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [TuiButton, TuiDropdown, TuiDataList],
+  imports: [
+    TuiButton,
+    TuiDropdown,
+    TuiDataList,
+    PlaceholderComponent,
+    TuiSkeleton,
+  ],
 })
 export default class Subnets {
  private readonly dialogs = inject(TuiResponsiveDialogService)
  private readonly api = inject(ApiService)
  private readonly loading = inject(TuiNotificationMiddleService)

-  protected readonly subnets = toSignal<MappedSubnet[], []>(
+  protected readonly subnets = toSignal(
    inject<PatchDB<TunnelData>>(PatchDB)
      .watch$('wg', 'subnets')
      .pipe(
@@ -85,7 +104,7 @@ export default class Subnets {
          })),
        ),
      ),
-    { initialValue: [] },
+    { initialValue: null },
  )

  protected onAdd(): void {
@@ -111,7 +130,7 @@ export default class Subnets {
      .open(TUI_CONFIRM, { label: 'Are you sure?' })
      .pipe(filter(Boolean))
      .subscribe(async () => {
-        const subnet = this.subnets()[index]?.range || ''
+        const subnet = this.subnets()?.[index]?.range || ''
        const loader = this.loading.open('').subscribe()

        try {
@@ -125,13 +144,13 @@ export default class Subnets {
  }

  private getNext(): string {
-    const current = this.subnets().map(s => utils.IpNet.parse(s.range))
+    const current = this.subnets()?.map(s => utils.IpNet.parse(s.range))
    const suggestion = utils.IpNet.parse('10.59.0.1/24')

    for (let i = 0; i < 256; i++) {
      suggestion.octets[2] = Math.floor(Math.random() * 256)
      if (
-        !current.some(
+        !current?.some(
          s => s.contains(suggestion), // inverse check unnecessary since we don't allow subnets smaller than /24
        )
      ) {
--- a/web/projects/start-tunnel/src/app/services/update.service.ts
+++ b/web/projects/start-tunnel/src/app/services/update.service.ts
@@ -1,9 +1,8 @@
-import { Component, computed, inject, Injectable, signal } from '@angular/core'
+import { computed, inject, Injectable, signal } from '@angular/core'
 import { toObservable } from '@angular/core/rxjs-interop'
 import { ErrorService } from '@start9labs/shared'
-import { TuiResponsiveDialogService } from '@taiga-ui/addon-mobile'
-import { TuiLoader } from '@taiga-ui/core'
-import { PolymorpheusComponent } from '@taiga-ui/polymorpheus'
+import { T } from '@start9labs/start-sdk'
+import { TuiNotificationMiddleService } from '@taiga-ui/kit'
 import {
  catchError,
  EMPTY,
@@ -14,25 +13,16 @@ import {
  switchMap,
  takeWhile,
 } from 'rxjs'
-import { T } from '@start9labs/start-sdk'
 import { ApiService } from './api/api.service'
 import { AuthService } from './auth.service'

-@Component({
-  template: '<tui-loader size="xl" [textContent]="text" />',
-  imports: [TuiLoader],
-})
-class UpdatingDialog {
-  protected readonly text = 'StartTunnel is updating...'
-}
-
@Injectable({
  providedIn: 'root',
 })
 export class UpdateService {
  private readonly api = inject(ApiService)
  private readonly auth = inject(AuthService)
-  private readonly dialogs = inject(TuiResponsiveDialogService)
+  private readonly loading = inject(TuiNotificationMiddleService)
  private readonly errorService = inject(ErrorService)

  readonly result = signal<T.Tunnel.TunnelUpdateResult | null>(null)
@@ -106,11 +96,8 @@ export class UpdateService {

  private showUpdatingDialog(): void {
    if (this.updatingDialog) return
-    this.updatingDialog = this.dialogs
-      .open(new PolymorpheusComponent(UpdatingDialog), {
-        closable: false,
-        dismissible: false,
-      })
+    this.updatingDialog = this.loading
+      .open('StartTunnel is updating...')
      .subscribe({ complete: () => (this.updatingDialog = null) })
  }

--- a/web/projects/start-tunnel/src/styles.scss
+++ b/web/projects/start-tunnel/src/styles.scss
@@ -93,12 +93,6 @@ tui-notification-middle {
  }
 }

-.placeholder {
-  padding: 1rem;
-  font: var(--tui-font-text-l);
-  color: var(--tui-text-tertiary);
-}
-
 qr-code {
  display: flex;
  justify-content: center;
@@ -107,3 +101,21 @@ qr-code {
 tui-data-list {
  --tui-text-action: var(--tui-text-primary);
 }
+
+[tuiTheme='dark'] tui-notification-middle[style] {
+  &.tui-enter,
+  &.tui-leave {
+    --tui-scale: 0;
+    animation-name: tuiScale;
+  }
+
+  &::before {
+    background: var(--tui-background-neutral-1);
+    backdrop-filter: blur(1rem);
+    box-shadow: inset 0 1px 1px var(--tui-background-neutral-2);
+  }
+
+  tui-loader svg {
+    stroke: white;
+  }
+}