chore: fix

web/projects/setup-wizard/src/app/pages/home.page.ts

@@ -16,7 +16,7 @@ import { StateService } from '../services/state.service'
       <button tuiCell="l" (click)="startFresh()">
         <span tuiAvatar="@tui.plus" appearance="positive"></span>
         <div tuiTitle>
-          {{ 'Start Fresh' | i18n }}
+          <b>{{ 'Start Fresh' | i18n }}</b>
           <div tuiSubtitle>{{ 'Set up a brand new server' | i18n }}</div>
         </div>
       </button>
@@ -24,7 +24,7 @@ import { StateService } from '../services/state.service'
       <button tuiCell="l" (click)="restore()">
         <span tuiAvatar="@tui.archive-restore" appearance="warning"></span>
         <div tuiTitle>
-          {{ 'Restore from Backup' | i18n }}
+          <b>{{ 'Restore from Backup' | i18n }}</b>
           <div tuiSubtitle>
             {{ 'Restore StartOS data from an encrypted backup' | i18n }}
           </div>
@@ -34,7 +34,7 @@ import { StateService } from '../services/state.service'
       <button tuiCell="l" (click)="transfer()">
         <span tuiAvatar="@tui.hard-drive-download" appearance="info"></span>
         <div tuiTitle>
-          {{ 'Transfer' | i18n }}
+          <b>{{ 'Transfer' | i18n }}</b>
           <div tuiSubtitle>
             {{ 'Transfer data from an existing StartOS data drive' | i18n }}
           </div>

web/projects/setup-wizard/src/app/pages/success.page.ts

@@ -29,20 +29,20 @@ import { StateService } from '../services/state.service'
     <canvas matrix></canvas>
     <section tuiCardLarge>
       <header tuiHeader>
-        <h2 tuiTitle>
+        <hgroup tuiTitle>
-          <span class="inline-title">
+          <h2 tuiCell="m">
             <tui-icon icon="@tui.circle-check-big" class="g-positive" />
             {{ 'Setup Complete!' | i18n }}
-          </span>
+          </h2>
-          @if (!stateService.kiosk) {
+        </hgroup>
-            <span tuiSubtitle>
+        @if (!stateService.kiosk) {
-              {{
+          <p tuiSubtitle>
-                'http://start.local was for setup only. It will no longer work.'
+            {{
-                  | i18n
+              'http://start.local was for setup only. It will no longer work.'
-              }}
+                | i18n
-            </span>
+            }}
-          }
+          </p>
-        </h2>
+        }
       </header>
 
       @if (!result) {
@@ -52,15 +52,15 @@ import { StateService } from '../services/state.service'
         @if (!stateService.kiosk) {
           <button tuiCell="l" (click)="download()">
             <span tuiAvatar="@tui.download" appearance="secondary"></span>
-            <div tuiTitle>
+            <span tuiTitle>
-              {{ 'Download Address Info' | i18n }}
+              <b>{{ 'Download Address Info' | i18n }}</b>
-              <div tuiSubtitle>
+              <span tuiSubtitle>
                 {{
                   "Contains your server's permanent local address and Root CA"
                     | i18n
                 }}
-              </div>
+              </span>
-            </div>
+            </span>
             @if (downloaded) {
               <tui-icon icon="@tui.circle-check" class="g-positive" />
             }
@@ -76,15 +76,15 @@ import { StateService } from '../services/state.service'
             (click)="removeMedia()"
           >
             <span tuiAvatar="@tui.usb" appearance="secondary"></span>
-            <div tuiTitle>
+            <span tuiTitle>
-              {{ 'Remove Installation Media' | i18n }}
+              <b>{{ 'Remove Installation Media' | i18n }}</b>
-              <div tuiSubtitle>
+              <span tuiSubtitle>
                 {{
                   'Remove USB stick or other installation media from your server'
                     | i18n
                 }}
-              </div>
+              </span>
-            </div>
+            </span>
             @if (usbRemoved) {
               <tui-icon icon="@tui.circle-check" class="g-positive" />
             }
@@ -99,15 +99,15 @@ import { StateService } from '../services/state.service'
               (click)="acknowledgeMok()"
             >
               <span tuiAvatar="@tui.shield-check" appearance="secondary"></span>
-              <div tuiTitle>
+              <span tuiTitle>
-                {{ 'Secure Boot Enrollment' | i18n }}
+                <b>{{ 'Secure Boot Enrollment' | i18n }}</b>
-                <div tuiSubtitle>
+                <span tuiSubtitle>
                   {{
                     'Prepare for Secure Boot key enrollment on the next reboot'
                       | i18n
                   }}
-                </div>
+                </span>
-              </div>
+              </span>
               @if (mokAcknowledged) {
                 <tui-icon icon="@tui.circle-check" class="g-positive" />
               }
@@ -126,9 +126,9 @@ import { StateService } from '../services/state.service'
             (click)="reboot()"
           >
             <span tuiAvatar="@tui.rotate-cw" appearance="secondary"></span>
-            <div tuiTitle>
+            <span tuiTitle>
-              {{ 'Restart Server' | i18n }}
+              <b>{{ 'Restart Server' | i18n }}</b>
-              <div tuiSubtitle>
+              <span tuiSubtitle>
                 @if (rebooting) {
                   {{ 'Waiting for server to come back online' | i18n }}
                 } @else if (rebooted) {
@@ -136,8 +136,8 @@ import { StateService } from '../services/state.service'
                 } @else {
                   {{ 'Restart your server to complete setup' | i18n }}
                 }
-              </div>
+              </span>
-            </div>
+            </span>
             @if (rebooting) {
               <tui-loader />
             } @else if (rebooted) {
@@ -147,12 +147,12 @@ import { StateService } from '../services/state.service'
         } @else if (stateService.kiosk) {
           <button tuiCell="l" (click)="exitKiosk()">
             <span tuiAvatar="@tui.log-in" appearance="secondary"></span>
-            <div tuiTitle>
+            <span tuiTitle>
-              {{ 'Continue to Login' | i18n }}
+              <b>{{ 'Continue to Login' | i18n }}</b>
-              <div tuiSubtitle>
+              <span tuiSubtitle>
                 {{ 'Proceed to the StartOS login screen' | i18n }}
-              </div>
+              </span>
-            </div>
+            </span>
           </button>
         }
 
@@ -165,10 +165,10 @@ import { StateService } from '../services/state.service'
             (click)="openLocalAddress()"
           >
             <span tuiAvatar="@tui.external-link" appearance="secondary"></span>
-            <div tuiTitle>
+            <span tuiTitle>
-              {{ 'Open Local Address' | i18n }}
+              <b>{{ 'Open Local Address' | i18n }}</b>
-              <div tuiSubtitle>{{ lanAddress }}</div>
+              <span tuiSubtitle>{{ lanAddress }}</span>
-            </div>
+            </span>
           </button>
 
           <app-documentation hidden [lanAddress]="lanAddress" />
@@ -177,12 +177,6 @@ import { StateService } from '../services/state.service'
     </section>
   `,
   styles: `
-    .inline-title {
-      display: inline-flex;
-      align-items: center;
-      gap: 0.5rem;
-    }
-
     [tuiCell].disabled {
       opacity: var(--tui-disabled-opacity);
       pointer-events: none;

web/projects/setup-wizard/src/styles.scss

@@ -67,10 +67,6 @@ button:disabled {
   }
 }
 
-[tuiCell]:not([tuiOption]):not(:last-of-type) {
-  box-shadow: 0 calc(0.5rem + 1px) 0 -0.5rem var(--tui-border-normal);
-}
-
 // TODO: Remove in Taiga v5.0
 [tuiButton] {
   min-block-size: var(--t-size);

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],

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>()
+}

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)

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)

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 {

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 {
+import { TuiButton, TuiDialogContext, TuiError, TuiInput } from '@taiga-ui/core'
-  TuiButton,
-  TuiDialogContext,
-  TuiError,
-  TuiTextfield,
-} 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)

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(':')

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
         )
       ) {

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 { T } from '@start9labs/start-sdk'
-import { TuiLoader } from '@taiga-ui/core'
+import { TuiNotificationMiddleService } from '@taiga-ui/kit'
-import { PolymorpheusComponent } from '@taiga-ui/polymorpheus'
 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
+    this.updatingDialog = this.loading
-      .open(new PolymorpheusComponent(UpdatingDialog), {
+      .open('StartTunnel is updating...')
-        closable: false,
-        dismissible: false,
-      })
       .subscribe({ complete: () => (this.updatingDialog = null) })
   }
 

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;
+  }
+}

web/projects/ui/src/app/routes/portal/routes/services/routes/outlet.component.ts

@@ -98,6 +98,7 @@ import { getManifest } from 'src/app/utils/get-package-data'
       padding-top: 1rem;
       border-radius: 0;
       cursor: pointer;
+      overflow: hidden;
       box-shadow: 0 -1px rgba(255, 255, 255, 0.1);
     }
 

web/projects/ui/src/styles.scss

@@ -171,8 +171,7 @@ ul {
 .g-table {
   width: stretch;
   border: 1px solid var(--tui-background-neutral-1);
-  border-spacing: 0;
+  border-collapse: collapse !important;
-  border-collapse: collapse;
   border-radius: var(--tui-radius-s);
   overflow: hidden;
   box-shadow: inset 0 0 0 1px var(--tui-background-neutral-1);