chore: update Taiga to 5 (#3136)

* chore: update Taiga to 5 * chore: fix
2026-03-30 04:01:58 +00:00 · 2026-03-15 19:51:50 +04:00
parent be921b7865
commit a90b96cddd
184 changed files with 1508 additions and 1958 deletions
--- a/web/projects/start-tunnel/src/app/app.config.ts
+++ b/web/projects/start-tunnel/src/app/app.config.ts
@@ -1,13 +1,14 @@
-import { tuiDropdownOptionsProvider } from '@taiga-ui/core'
-import { provideEventPlugins } from '@taiga-ui/event-plugins'
-import { provideAnimations } from '@angular/platform-browser/animations'
+import {
+  tuiDropdownOptionsProvider,
+  tuiDialogOptionsProvider,
+  provideTaiga,
+} from '@taiga-ui/core'
 import {
  ApplicationConfig,
  provideBrowserGlobalErrorListeners,
  provideZonelessChangeDetection,
 } from '@angular/core'
 import { provideRouter, withRouterConfig } from '@angular/router'
-import { tuiDialogOptionsProvider } from '@taiga-ui/experimental'
 import { PatchDB } from 'patch-db-client'
 import {
  PATCH_CACHE,
@@ -31,11 +32,10 @@ const {

 export const appConfig: ApplicationConfig = {
  providers: [
-    provideAnimations(),
    provideBrowserGlobalErrorListeners(),
    provideZonelessChangeDetection(),
    provideRouter(routes, withRouterConfig({ onSameUrlNavigation: 'reload' })),
-    provideEventPlugins(),
+    provideTaiga({ mode: 'dark' }),
    tuiDropdownOptionsProvider({ appearance: 'start-9' }),
    tuiDialogOptionsProvider({ appearance: 'start-9 taiga' }),
    {
--- a/web/projects/start-tunnel/src/app/routes/home/components/header.ts
+++ b/web/projects/start-tunnel/src/app/routes/home/components/header.ts
@@ -29,7 +29,7 @@ import { SidebarService } from 'src/app/services/sidebar.service'
    }

    h1 {
-      font: var(--tui-font-heading-6);
+      font: var(--tui-typography-heading-h6);
      margin-inline-end: auto;
    }

--- a/web/projects/start-tunnel/src/app/routes/home/components/nav.ts
+++ b/web/projects/start-tunnel/src/app/routes/home/components/nav.ts
@@ -1,8 +1,11 @@
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
 import { Router, RouterLink, RouterLinkActive } from '@angular/router'
-import { ErrorService, LoadingService } from '@start9labs/shared'
+import { ErrorService } from '@start9labs/shared'
 import { TuiButton } from '@taiga-ui/core'
-import { TuiBadgeNotification } from '@taiga-ui/kit'
+import {
+  TuiBadgeNotification,
+  TuiNotificationMiddleService,
+} from '@taiga-ui/kit'
 import { ApiService } from 'src/app/services/api/api.service'
 import { AuthService } from 'src/app/services/auth.service'
 import { SidebarService } from 'src/app/services/sidebar.service'
@@ -110,7 +113,7 @@ export class Nav {
  private readonly router = inject(Router)
  protected readonly sidebars = inject(SidebarService)
  protected readonly api = inject(ApiService)
-  private readonly loader = inject(LoadingService)
+  private readonly loader = inject(TuiNotificationMiddleService)
  private readonly errorService = inject(ErrorService)
  protected readonly update = inject(UpdateService)

@@ -133,7 +136,7 @@ export class Nav {
  ] as const

  protected async logout() {
-    const loader = this.loader.open().subscribe()
+    const loader = this.loader.open('').subscribe()
    try {
      await this.api.logout()
      this.service.authenticated.set(false)
--- 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
@@ -1,32 +1,26 @@
-import { AsyncPipe } from '@angular/common'
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
 import {
  NonNullableFormBuilder,
  ReactiveFormsModule,
  Validators,
 } from '@angular/forms'
-import { ErrorService, LoadingService } from '@start9labs/shared'
+import { ErrorService } from '@start9labs/shared'
 import { utils } from '@start9labs/start-sdk'
+import { WA_IS_MOBILE } from '@ng-web-apis/platform'
+import { TuiResponsiveDialogService } from '@taiga-ui/addon-mobile'
 import {
-  TUI_IS_MOBILE,
+  TuiAnimated,
  TuiAutoFocus,
  tuiMarkControlAsTouchedAndValidate,
 } from '@taiga-ui/cdk'
-import {
-  TuiButton,
-  TuiDialogContext,
-  TuiError,
-  TuiTextfield,
-} from '@taiga-ui/core'
-import { TuiDialogService } from '@taiga-ui/experimental'
+import { TuiButton, TuiDialogContext, TuiError, TuiInput } from '@taiga-ui/core'
 import {
  TuiChevron,
  TuiDataListWrapper,
-  TuiElasticContainer,
-  TuiFieldErrorPipe,
+  TuiNotificationMiddleService,
  TuiSelect,
 } from '@taiga-ui/kit'
-import { TuiForm } from '@taiga-ui/layout'
+import { TuiForm, TuiElasticContainer } from '@taiga-ui/layout'
 import { injectContext, PolymorpheusComponent } from '@taiga-ui/polymorpheus'
 import { ApiService } from 'src/app/services/api/api.service'

@@ -44,9 +38,9 @@ import {
    <form tuiForm [formGroup]="form">
      <tui-textfield>
        <label tuiLabel>Name</label>
-        <input tuiTextfield tuiAutoFocus formControlName="name" />
+        <input tuiInput tuiAutoFocus formControlName="name" />
      </tui-textfield>
-      <tui-error formControlName="name" [error]="[] | tuiFieldError | async" />
+      <tui-error formControlName="name" />

      @if (!context.data.device) {
        <tui-textfield tuiChevron [stringify]="stringify">
@@ -63,31 +57,24 @@ import {
          }
          @if (!mobile) {
            <tui-data-list-wrapper
-              *tuiTextfieldDropdown
-              new
+              *tuiDropdown
              [items]="context.data.subnets()"
              (itemClick)="onSubnet($event)"
            />
          }
        </tui-textfield>
-        <tui-error
-          formControlName="subnet"
-          [error]="[] | tuiFieldError | async"
-        />
+        <tui-error formControlName="subnet" />

        <tui-elastic-container>
          @if (form.controls.subnet.value?.range) {
-            <tui-textfield>
+            <tui-textfield tuiAnimated>
              <label tuiLabel>LAN IP</label>
-              <input tuiTextfield tuiAutoFocus formControlName="ip" />
+              <input tuiInput tuiAutoFocus formControlName="ip" />
            </tui-textfield>
          }
        </tui-elastic-container>
        @if (form.controls.subnet.value?.range) {
-          <tui-error
-            formControlName="ip"
-            [error]="[] | tuiFieldError | async"
-          />
+          <tui-error formControlName="ip" />
        }
      }
      <footer>
@@ -97,27 +84,26 @@ import {
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [
-    AsyncPipe,
    ReactiveFormsModule,
    TuiAutoFocus,
    TuiButton,
    TuiDataListWrapper,
    TuiError,
-    TuiFieldErrorPipe,
    TuiForm,
    TuiSelect,
-    TuiTextfield,
+    TuiInput,
+    TuiAnimated,
    TuiChevron,
    TuiElasticContainer,
  ],
 })
 export class DevicesAdd {
-  private readonly loading = inject(LoadingService)
+  private readonly loading = inject(TuiNotificationMiddleService)
  private readonly api = inject(ApiService)
  private readonly errorService = inject(ErrorService)
-  private readonly dialogs = inject(TuiDialogService)
+  private readonly dialogs = inject(TuiResponsiveDialogService)

-  protected readonly mobile = inject(TUI_IS_MOBILE)
+  protected readonly mobile = inject(WA_IS_MOBILE)
  protected readonly context =
    injectContext<TuiDialogContext<void, DeviceData>>()

@@ -160,7 +146,7 @@ export class DevicesAdd {
      return
    }

-    const loader = this.loading.open().subscribe()
+    const loader = this.loading.open('').subscribe()
    const { ip, name, subnet } = this.form.getRawValue()
    const data = { ip, name, subnet: subnet?.range || '' }

--- a/web/projects/start-tunnel/src/app/routes/home/routes/devices/config.ts
+++ b/web/projects/start-tunnel/src/app/routes/home/routes/devices/config.ts
@@ -1,11 +1,5 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core'
-import {
-  TuiButton,
-  TuiDialogContext,
-  TuiIcon,
-  TuiTextfield,
-  TuiTitle,
-} from '@taiga-ui/core'
+import { TuiButton, TuiDialogContext, TuiIcon, TuiTitle } from '@taiga-ui/core'
 import { TuiCopy, TuiSegmented, TuiTextarea } from '@taiga-ui/kit'
 import { TuiHeader } from '@taiga-ui/layout'
 import { injectContext, PolymorpheusComponent } from '@taiga-ui/polymorpheus'
@@ -60,7 +54,6 @@ import { QrCodeComponent } from 'ng-qrcode'
    TuiIcon,
    TuiTitle,
    TuiSegmented,
-    TuiTextfield,
    TuiTextarea,
    TuiCopy,
  ],
--- 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
@@ -6,15 +6,10 @@ import {
  Signal,
 } from '@angular/core'
 import { toSignal } from '@angular/core/rxjs-interop'
-import { ErrorService, LoadingService } from '@start9labs/shared'
-import {
-  TuiButton,
-  TuiDataList,
-  TuiDropdown,
-  TuiTextfield,
-} from '@taiga-ui/core'
-import { TuiDialogService } from '@taiga-ui/experimental'
-import { TUI_CONFIRM } from '@taiga-ui/kit'
+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 { PatchDB } from 'patch-db-client'
 import { filter, map } from 'rxjs'
 import { ApiService } from 'src/app/services/api/api.service'
@@ -49,16 +44,15 @@ import { MappedDevice, MappedSubnet } from './utils'
                tuiIconButton
                size="xs"
                tuiDropdown
-                tuiDropdownOpen
+                tuiDropdownAuto
                appearance="flat-grayscale"
                iconStart="@tui.ellipsis-vertical"
              >
                Actions
-                <tui-data-list *tuiTextfieldDropdown size="s">
+                <tui-data-list *tuiDropdown size="s">
                  <button
                    tuiOption
                    iconStart="@tui.pencil"
-                    new
                    (click)="onEdit(device)"
                  >
                    Rename
@@ -66,7 +60,6 @@ import { MappedDevice, MappedSubnet } from './utils'
                  <button
                    tuiOption
                    iconStart="@tui.settings"
-                    new
                    (click)="onConfig(device)"
                  >
                    View Config
@@ -74,7 +67,6 @@ import { MappedDevice, MappedSubnet } from './utils'
                  <button
                    tuiOption
                    iconStart="@tui.trash"
-                    new
                    (click)="onDelete(device)"
                  >
                    Delete
@@ -90,12 +82,12 @@ import { MappedDevice, MappedSubnet } from './utils'
    </table>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [TuiButton, TuiDropdown, TuiDataList, TuiTextfield],
+  imports: [TuiButton, TuiDropdown, TuiDataList],
 })
 export default class Devices {
-  private readonly dialogs = inject(TuiDialogService)
+  private readonly dialogs = inject(TuiResponsiveDialogService)
  private readonly api = inject(ApiService)
-  private readonly loading = inject(LoadingService)
+  private readonly loading = inject(TuiNotificationMiddleService)
  private readonly errorService = inject(ErrorService)

  protected readonly subnets: Signal<readonly MappedSubnet[]> = toSignal(
@@ -145,7 +137,7 @@ export default class Devices {
  }

  async onConfig({ subnet, ip }: MappedDevice) {
-    const loader = this.loading.open().subscribe()
+    const loader = this.loading.open('').subscribe()
    try {
      const data = await this.api.showDeviceConfig({ subnet: subnet.range, ip })

@@ -163,7 +155,7 @@ export default class Devices {
      .open(TUI_CONFIRM, { label: 'Are you sure?' })
      .pipe(filter(Boolean))
      .subscribe(async () => {
-        const loader = this.loading.open().subscribe()
+        const loader = this.loading.open('').subscribe()
        try {
          await this.api.deleteDevice({ subnet: subnet.range, ip })
        } catch (e: any) {
--- 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
@@ -1,13 +1,12 @@
-import { AsyncPipe } from '@angular/common'
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
 import {
  NonNullableFormBuilder,
  ReactiveFormsModule,
  Validators,
 } from '@angular/forms'
-import { ErrorService, LoadingService } from '@start9labs/shared'
+import { ErrorService } from '@start9labs/shared'
+import { WA_IS_MOBILE } from '@ng-web-apis/platform'
 import {
-  TUI_IS_MOBILE,
  tuiMarkControlAsTouchedAndValidate,
  TuiValueChanges,
 } from '@taiga-ui/cdk'
@@ -16,18 +15,16 @@ import {
  TuiDialogContext,
  TuiError,
  TuiNumberFormat,
-  TuiTextfield,
+  TuiCheckbox,
 } from '@taiga-ui/core'
 import {
-  TuiCheckbox,
  TuiChevron,
  TuiDataListWrapper,
-  TuiFieldErrorPipe,
  TuiInputNumber,
+  TuiNotificationMiddleService,
  TuiSelect,
-  TuiElasticContainer,
 } from '@taiga-ui/kit'
-import { TuiForm } from '@taiga-ui/layout'
+import { TuiForm, TuiElasticContainer } from '@taiga-ui/layout'
 import { injectContext, PolymorpheusComponent } from '@taiga-ui/polymorpheus'
 import { ApiService } from 'src/app/services/api/api.service'

@@ -49,17 +46,10 @@ import { MappedDevice, PortForwardsData } from './utils'
          <input tuiSelect formControlName="externalip" />
        }
        @if (!mobile) {
-          <tui-data-list-wrapper
-            *tuiTextfieldDropdown
-            new
-            [items]="context.data.ips()"
-          />
+          <tui-data-list-wrapper *tuiDropdown [items]="context.data.ips()" />
        }
      </tui-textfield>
-      <tui-error
-        formControlName="externalip"
-        [error]="[] | tuiFieldError | async"
-      />
+      <tui-error formControlName="externalip" />
      <tui-textfield>
        <label tuiLabel>External Port</label>
        <input
@@ -71,10 +61,7 @@ import { MappedDevice, PortForwardsData } from './utils'
          (tuiValueChanges)="checkShow80()"
        />
      </tui-textfield>
-      <tui-error
-        formControlName="externalport"
-        [error]="[] | tuiFieldError | async"
-      />
+      <tui-error formControlName="externalport" />
      <tui-textfield tuiChevron [stringify]="stringify">
        <label tuiLabel>Device</label>
        @if (mobile) {
@@ -89,16 +76,12 @@ import { MappedDevice, PortForwardsData } from './utils'
        }
        @if (!mobile) {
          <tui-data-list-wrapper
-            *tuiTextfieldDropdown
-            new
+            *tuiDropdown
            [items]="context.data.devices()"
          />
        }
      </tui-textfield>
-      <tui-error
-        formControlName="device"
-        [error]="[] | tuiFieldError | async"
-      />
+      <tui-error formControlName="device" />
      <tui-textfield>
        <label tuiLabel>Internal Port</label>
        <input
@@ -110,10 +93,7 @@ import { MappedDevice, PortForwardsData } from './utils'
          (tuiValueChanges)="checkShow80()"
        />
      </tui-textfield>
-      <tui-error
-        formControlName="internalport"
-        [error]="[] | tuiFieldError | async"
-      />
+      <tui-error formControlName="internalport" />
      <tui-elastic-container>
        @if (show80) {
          <label tuiLabel>
@@ -132,7 +112,6 @@ import { MappedDevice, PortForwardsData } from './utils'
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [
-    AsyncPipe,
    ReactiveFormsModule,
    TuiButton,
    TuiChevron,
@@ -140,8 +119,6 @@ import { MappedDevice, PortForwardsData } from './utils'
    TuiError,
    TuiInputNumber,
    TuiNumberFormat,
-    TuiFieldErrorPipe,
-    TuiTextfield,
    TuiSelect,
    TuiForm,
    TuiCheckbox,
@@ -151,12 +128,12 @@ import { MappedDevice, PortForwardsData } from './utils'
 })
 export class PortForwardsAdd {
  private readonly api = inject(ApiService)
-  private readonly loading = inject(LoadingService)
+  private readonly loading = inject(TuiNotificationMiddleService)
  private readonly errorService = inject(ErrorService)

  show80 = false

-  protected readonly mobile = inject(TUI_IS_MOBILE)
+  protected readonly mobile = inject(WA_IS_MOBILE)
  protected readonly context =
    injectContext<TuiDialogContext<void, PortForwardsData>>()

@@ -183,7 +160,7 @@ export class PortForwardsAdd {
      return
    }

-    const loader = this.loading.open().subscribe()
+    const loader = this.loading.open('').subscribe()

    const { externalip, externalport, device, internalport, also80 } =
      this.form.getRawValue()
--- 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
@@ -7,11 +7,11 @@ import {
 } from '@angular/core'
 import { toSignal } from '@angular/core/rxjs-interop'
 import { ReactiveFormsModule } from '@angular/forms'
-import { ErrorService, LoadingService } from '@start9labs/shared'
+import { ErrorService } from '@start9labs/shared'
 import { utils } from '@start9labs/start-sdk'
+import { TuiResponsiveDialogService } from '@taiga-ui/addon-mobile'
 import { TuiButton } from '@taiga-ui/core'
-import { TuiDialogService } from '@taiga-ui/experimental'
-import { TUI_CONFIRM } from '@taiga-ui/kit'
+import { TUI_CONFIRM, TuiNotificationMiddleService } from '@taiga-ui/kit'
 import { PatchDB } from 'patch-db-client'
 import { filter, map } from 'rxjs'
 import { PORT_FORWARDS_ADD } from 'src/app/routes/home/routes/port-forwards/add'
@@ -65,9 +65,9 @@ import { MappedDevice, MappedForward } from './utils'
  imports: [ReactiveFormsModule, TuiButton],
 })
 export default class PortForwards {
-  private readonly dialogs = inject(TuiDialogService)
+  private readonly dialogs = inject(TuiResponsiveDialogService)
  private readonly api = inject(ApiService)
-  private readonly loading = inject(LoadingService)
+  private readonly loading = inject(TuiNotificationMiddleService)
  private readonly patch = inject<PatchDB<TunnelData>>(PatchDB)
  private readonly errorService = inject(ErrorService)

@@ -127,7 +127,7 @@ export default class PortForwards {
      .open(TUI_CONFIRM, { label: 'Are you sure?' })
      .pipe(filter(Boolean))
      .subscribe(async () => {
-        const loader = this.loading.open().subscribe()
+        const loader = this.loading.open('').subscribe()
        const source = `${externalip}:${externalport}`

        try {
--- a/web/projects/start-tunnel/src/app/routes/home/routes/settings/change-password.ts
+++ b/web/projects/start-tunnel/src/app/routes/home/routes/settings/change-password.ts
@@ -1,4 +1,3 @@
-import { AsyncPipe } from '@angular/common'
 import {
  ChangeDetectionStrategy,
  Component,
@@ -15,17 +14,14 @@ import {
 import { ErrorService } from '@start9labs/shared'
 import { TuiAutoFocus, TuiValidator } from '@taiga-ui/cdk'
 import {
-  TuiAlertService,
  TuiButton,
  TuiDialogContext,
  TuiError,
-  TuiTextfield,
-} from '@taiga-ui/core'
-import {
-  TuiButtonLoading,
-  TuiFieldErrorPipe,
+  TuiNotificationService,
+  TuiInput,
  tuiValidationErrorsProvider,
-} from '@taiga-ui/kit'
+} from '@taiga-ui/core'
+import { TuiButtonLoading } from '@taiga-ui/kit'
 import { TuiForm } from '@taiga-ui/layout'
 import { injectContext, PolymorpheusComponent } from '@taiga-ui/polymorpheus'
 import { map } from 'rxjs'
@@ -36,24 +32,18 @@ import { ApiService } from 'src/app/services/api/api.service'
    <form tuiForm [formGroup]="form">
      <tui-textfield>
        <label tuiLabel>New password</label>
-        <input tuiTextfield tuiAutoFocus formControlName="password" />
+        <input tuiInput tuiAutoFocus formControlName="password" />
      </tui-textfield>
-      <tui-error
-        formControlName="password"
-        [error]="[] | tuiFieldError | async"
-      />
+      <tui-error formControlName="password" />
      <tui-textfield>
        <label tuiLabel>Confirm new password</label>
        <input
-          tuiTextfield
+          tuiInput
          formControlName="confirm"
          [tuiValidator]="matchValidator()"
        />
      </tui-textfield>
-      <tui-error
-        formControlName="confirm"
-        [error]="[] | tuiFieldError | async"
-      />
+      <tui-error formControlName="confirm" />
      <footer>
        <button
          tuiButton
@@ -76,22 +66,20 @@ import { ApiService } from 'src/app/services/api/api.service'
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [
-    AsyncPipe,
    ReactiveFormsModule,
    TuiAutoFocus,
    TuiButton,
    TuiButtonLoading,
    TuiError,
-    TuiFieldErrorPipe,
    TuiForm,
-    TuiTextfield,
+    TuiInput,
    TuiValidator,
  ],
 })
 export class ChangePasswordDialog {
  private readonly context = injectContext<TuiDialogContext<void>>()
  private readonly api = inject(ApiService)
-  private readonly alerts = inject(TuiAlertService)
+  private readonly alerts = inject(TuiNotificationService)
  private readonly errorService = inject(ErrorService)

  protected readonly loading = signal(false)
--- a/web/projects/start-tunnel/src/app/routes/home/routes/settings/index.ts
+++ b/web/projects/start-tunnel/src/app/routes/home/routes/settings/index.ts
@@ -5,25 +5,25 @@ import {
  signal,
 } from '@angular/core'
 import { ErrorService } from '@start9labs/shared'
-import { TuiAppearance, TuiButton, TuiTitle } from '@taiga-ui/core'
-import { TuiDialogService } from '@taiga-ui/experimental'
+import { TuiResponsiveDialogService } from '@taiga-ui/addon-mobile'
+import { TuiButton, TuiCell, TuiTitle } from '@taiga-ui/core'
 import { TuiBadge, TuiButtonLoading } from '@taiga-ui/kit'
-import { TuiCard, TuiCell } from '@taiga-ui/layout'
+import { TuiCard } from '@taiga-ui/layout'
 import { UpdateService } from 'src/app/services/update.service'

 import { CHANGE_PASSWORD } from './change-password'

@Component({
  template: `
-    <div tuiCardLarge tuiAppearance="neutral">
+    <div tuiCardLarge>
      <div tuiCell>
        <span tuiTitle>
          <strong>
            Version
            @if (update.hasUpdate()) {
-              <tui-badge appearance="positive" size="s">
+              <span tuiBadge appearance="positive" size="s">
                Update Available
-              </tui-badge>
+              </span>
            }
          </strong>
          <span tuiSubtitle>Current: {{ update.installed() ?? '—' }}</span>
@@ -52,19 +52,20 @@ import { CHANGE_PASSWORD } from './change-password'
      </div>
    </div>
  `,
+  styles: `
+    [tuiCardLarge] {
+      background: var(--tui-background-neutral-1);
+
+      &:not([data-appearance]) {
+        display: none;
+      }
+    }
+  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [
-    TuiCard,
-    TuiCell,
-    TuiTitle,
-    TuiButton,
-    TuiButtonLoading,
-    TuiBadge,
-    TuiAppearance,
-  ],
+  imports: [TuiCard, TuiCell, TuiTitle, TuiButton, TuiButtonLoading, TuiBadge],
 })
 export default class Settings {
-  private readonly dialogs = inject(TuiDialogService)
+  private readonly dialogs = inject(TuiResponsiveDialogService)
  private readonly errorService = inject(ErrorService)

  protected readonly update = inject(UpdateService)
--- a/web/projects/start-tunnel/src/app/routes/home/routes/subnets/add.ts
+++ b/web/projects/start-tunnel/src/app/routes/home/routes/subnets/add.ts
@@ -1,19 +1,12 @@
-import { AsyncPipe } from '@angular/common'
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
 import {
  NonNullableFormBuilder,
  ReactiveFormsModule,
  Validators,
 } from '@angular/forms'
-import { LoadingService } from '@start9labs/shared'
 import { TuiAutoFocus, tuiMarkControlAsTouchedAndValidate } from '@taiga-ui/cdk'
-import {
-  TuiButton,
-  TuiDialogContext,
-  TuiError,
-  TuiTextfield,
-} from '@taiga-ui/core'
-import { TuiFieldErrorPipe } from '@taiga-ui/kit'
+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'
 import { ApiService } from 'src/app/services/api/api.service'
@@ -23,18 +16,15 @@ import { ApiService } from 'src/app/services/api/api.service'
    <form tuiForm [formGroup]="form">
      <tui-textfield>
        <label tuiLabel>Name</label>
-        <input tuiTextfield tuiAutoFocus formControlName="name" />
+        <input tuiInput tuiAutoFocus formControlName="name" />
      </tui-textfield>
-      <tui-error formControlName="name" [error]="[] | tuiFieldError | async" />
+      <tui-error formControlName="name" />
      @if (!context.data.name) {
        <tui-textfield>
          <label tuiLabel>IP Range</label>
-          <input tuiTextfield formControlName="subnet" />
+          <input tuiInput formControlName="subnet" />
        </tui-textfield>
-        <tui-error
-          formControlName="subnet"
-          [error]="[] | tuiFieldError | async"
-        />
+        <tui-error formControlName="subnet" />
      }
      <footer>
        <button tuiButton (click)="onSave()">Save</button>
@@ -43,19 +33,17 @@ import { ApiService } from 'src/app/services/api/api.service'
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [
-    AsyncPipe,
    ReactiveFormsModule,
    TuiAutoFocus,
    TuiButton,
    TuiError,
-    TuiFieldErrorPipe,
    TuiForm,
-    TuiTextfield,
+    TuiInput,
  ],
 })
 export class SubnetsAdd {
  private readonly api = inject(ApiService)
-  private readonly loading = inject(LoadingService)
+  private readonly loading = inject(TuiNotificationMiddleService)

  protected readonly context = injectContext<TuiDialogContext<void, Data>>()
  protected readonly form = inject(NonNullableFormBuilder).group({
@@ -78,7 +66,7 @@ export class SubnetsAdd {
      return
    }

-    const loader = this.loading.open().subscribe()
+    const loader = this.loading.open('').subscribe()
    const value = this.form.getRawValue()

    try {
--- 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
@@ -1,15 +1,9 @@
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
 import { toSignal } from '@angular/core/rxjs-interop'
-import { LoadingService } from '@start9labs/shared'
 import { utils } from '@start9labs/start-sdk'
-import {
-  TuiButton,
-  TuiDataList,
-  TuiDropdown,
-  TuiTextfield,
-} from '@taiga-ui/core'
-import { TuiDialogService } from '@taiga-ui/experimental'
-import { TUI_CONFIRM } from '@taiga-ui/kit'
+import { TuiResponsiveDialogService } from '@taiga-ui/addon-mobile'
+import { TuiButton, TuiDataList, TuiDropdown } from '@taiga-ui/core'
+import { TUI_CONFIRM, TuiNotificationMiddleService } from '@taiga-ui/kit'
 import { PatchDB } from 'patch-db-client'
 import { filter, map } from 'rxjs'
 import { ApiService } from 'src/app/services/api/api.service'
@@ -41,16 +35,15 @@ import { SUBNETS_ADD } from './add'
                tuiIconButton
                size="xs"
                tuiDropdown
-                tuiDropdownOpen
+                tuiDropdownAuto
                appearance="flat-grayscale"
                iconStart="@tui.ellipsis-vertical"
              >
                Actions
-                <tui-data-list *tuiTextfieldDropdown size="s">
+                <tui-data-list *tuiDropdown size="s">
                  <button
                    tuiOption
                    iconStart="@tui.pencil"
-                    new
                    (click)="onEdit(subnet)"
                  >
                    Rename
@@ -58,7 +51,6 @@ import { SUBNETS_ADD } from './add'
                  <button
                    tuiOption
                    iconStart="@tui.trash"
-                    new
                    (click)="onDelete($index)"
                  >
                    Delete
@@ -74,12 +66,12 @@ import { SUBNETS_ADD } from './add'
    </table>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [TuiButton, TuiDropdown, TuiDataList, TuiTextfield],
+  imports: [TuiButton, TuiDropdown, TuiDataList],
 })
 export default class Subnets {
-  private readonly dialogs = inject(TuiDialogService)
+  private readonly dialogs = inject(TuiResponsiveDialogService)
  private readonly api = inject(ApiService)
-  private readonly loading = inject(LoadingService)
+  private readonly loading = inject(TuiNotificationMiddleService)

  protected readonly subnets = toSignal<MappedSubnet[], []>(
    inject<PatchDB<TunnelData>>(PatchDB)
@@ -120,7 +112,7 @@ export default class Subnets {
      .pipe(filter(Boolean))
      .subscribe(async () => {
        const subnet = this.subnets()[index]?.range || ''
-        const loader = this.loading.open().subscribe()
+        const loader = this.loading.open('').subscribe()

        try {
          await this.api.deleteSubnet({ subnet })
--- a/web/projects/start-tunnel/src/app/routes/login/index.ts
+++ b/web/projects/start-tunnel/src/app/routes/login/index.ts
@@ -6,7 +6,7 @@ import {
 } from '@angular/core'
 import { FormsModule } from '@angular/forms'
 import { Router } from '@angular/router'
-import { TuiButton, TuiError, TuiTextfield } from '@taiga-ui/core'
+import { TuiButton, TuiError, TuiInput } from '@taiga-ui/core'
 import { TuiButtonLoading } from '@taiga-ui/kit'
 import { ApiService } from 'src/app/services/api/api.service'
 import { AuthService } from 'src/app/services/auth.service'
@@ -17,7 +17,7 @@ import { AuthService } from 'src/app/services/auth.service'
    <form (ngSubmit)="login()">
      <tui-textfield [tuiTextfieldCleaner]="false">
        <input
-          tuiTextfield
+          tuiInput
          type="password"
          placeholder="Enter password"
          [ngModelOptions]="{ standalone: true }"
@@ -59,7 +59,7 @@ import { AuthService } from 'src/app/services/auth.service'
    }
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [TuiButton, TuiTextfield, FormsModule, TuiError, TuiButtonLoading],
+  imports: [TuiButton, TuiInput, FormsModule, TuiError, TuiButtonLoading],
 })
 export default class Login {
  private readonly auth = inject(AuthService)
--- a/web/projects/start-tunnel/src/app/services/update.service.ts
+++ b/web/projects/start-tunnel/src/app/services/update.service.ts
@@ -1,8 +1,8 @@
 import { Component, 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 { TuiDialogService } from '@taiga-ui/experimental'
 import { PolymorpheusComponent } from '@taiga-ui/polymorpheus'
 import {
  catchError,
@@ -31,7 +31,7 @@ class UpdatingDialog {
 export class UpdateService {
  private readonly api = inject(ApiService)
  private readonly auth = inject(AuthService)
-  private readonly dialogs = inject(TuiDialogService)
+  private readonly dialogs = inject(TuiResponsiveDialogService)
  private readonly errorService = inject(ErrorService)

  readonly result = signal<TunnelUpdateResult | null>(null)
--- a/web/projects/start-tunnel/src/index.html
+++ b/web/projects/start-tunnel/src/index.html
@@ -14,7 +14,7 @@
    <link rel="icon" type="image/svg+xml" href="/assets/icons/favicon.svg" />
    <link rel="shortcut icon" href="/assets/icons/favicon.ico" />
  </head>
-  <body tuiTheme="dark">
+  <body>
    <app-root></app-root>
  </body>
 </html>
--- a/web/projects/start-tunnel/src/styles.scss
+++ b/web/projects/start-tunnel/src/styles.scss
@@ -6,6 +6,7 @@
  --tui-background-accent-1: #428bf9;
  --tui-background-accent-1-hover: #126df7;
  --tui-background-accent-1-pressed: #156ed4;
+  --tui-stroke-width: 1.5px;
 }

 body {
@@ -41,9 +42,21 @@ tui-dropdown[data-appearance='start-9'] {
  backdrop-filter: blur(1rem);
 }

-tui-dialog[new][data-appearance~='start-9'] {
-  background: var(--tui-background-neutral-1);
-  backdrop-filter: blur(5rem);
+[tuiTheme='dark'] tui-dialog[data-appearance~='start-9'],
+[tuiTheme='dark'] tui-sheet-dialog[data-appearance~='start-9'] .t-sheet {
+  background:
+    linear-gradient(45deg, #5240a89c, transparent),
+    linear-gradient(to bottom, #5240a854, transparent),
+    color-mix(in hsl, var(--tui-background-elevation-1) 90%, transparent 10%);
+  background-blend-mode: multiply;
+
+  header {
+    background: transparent;
+  }
+}
+
+tui-notification-middle {
+  --tui-background-accent-1: var(--tui-status-warning);
 }

 .g-table {