refactor: completely remove ionic

web/projects/ui/src/app/app.component.html

@@ -1,20 +1,7 @@
 <svg-definitions />
 <!--TODO: Theme-->
-<tui-root tuiTheme="night" tuiMode="onDark">
-  <ion-app>
-    <ion-content>
-      <ion-router-outlet
-        id="main-content"
-        class="container"
-        [class.container_offline]="offline$ | async"
-      >
-        <ion-content
-          class="ion-padding with-widgets"
-          style="pointer-events: none; opacity: 0"
-        ></ion-content>
-      </ion-router-outlet>
-    </ion-content>
-  </ion-app>
+<tui-root tuiTheme="night" tuiMode="onDark" [class.offline]="offline$ | async">
+  <router-outlet />
   <toast-container />
   <sidebar-host ngProjectAs="tuiOverContent" />
 </tui-root>

web/projects/ui/src/app/app.component.scss

@@ -1,17 +1,17 @@
+@import '@taiga-ui/core/styles/taiga-ui-local';
+
 :host {
   display: block;
   height: 100%;
 }
 
 tui-root {
+  @include transition(filter);
   height: 100%;
-}
+  font-family: 'Open Sans', sans-serif;
+  --tui-skeleton-radius: 1rem;
 
-.container {
-  max-width: 100%;
-  transition: filter 0.3s;
-
-  &_offline {
+  &.offline {
     filter: saturate(0.75) contrast(0.85);
   }
 }

web/projects/ui/src/app/app.component.ts

@@ -36,9 +36,10 @@ export class AppComponent implements OnInit {
       .pipe(startWith({ restarting: false, shuttingDown: false })),
   ]).pipe(
     map(
-      ([verified, connected, status]) =>
-        verified && (!connected || status.restarting || status.shuttingDown),
+      ([connected, verified, status]) =>
+        connected && (!verified || status.restarting || status.shuttingDown),
     ),
+    startWith(true),
   )
 
   async ngOnInit() {

web/projects/ui/src/app/app.module.ts

@@ -2,7 +2,6 @@ import { HttpClientModule } from '@angular/common/http'
 import { NgModule } from '@angular/core'
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
 import { ServiceWorkerModule } from '@angular/service-worker'
-import { IonicModule } from '@ionic/angular'
 import { LoadingModule } from '@start9labs/shared'
 import {
   TuiAlertModule,
@@ -11,9 +10,9 @@ import {
   TuiRootModule,
   TuiThemeNightModule,
 } from '@taiga-ui/core'
-import { SidebarHostComponent } from 'src/app/common/sidebar-host.component'
-import { SvgDefinitionsComponent } from 'src/app/common/svg-definitions.component'
-import { ToastContainerComponent } from 'src/app/common/toast-container/toast-container.component'
+import { SidebarHostComponent } from 'src/app/components/sidebar-host.component'
+import { SvgDefinitionsComponent } from 'src/app/components/svg-definitions.component'
+import { ToastContainerComponent } from 'src/app/components/toast-container.component'
 import { environment } from '../environments/environment'
 import { AppComponent } from './app.component'
 import { APP_PROVIDERS } from './app.providers'
@@ -24,9 +23,6 @@ import { RoutingModule } from './routing.module'
   imports: [
     HttpClientModule,
     BrowserAnimationsModule,
-    IonicModule.forRoot({
-      mode: 'md',
-    }),
     RoutingModule,
     ToastContainerComponent,
     TuiRootModule,

web/projects/ui/src/app/app.providers.ts

@@ -1,7 +1,6 @@
 import { APP_INITIALIZER, Provider } from '@angular/core'
 import { UntypedFormBuilder } from '@angular/forms'
 import { Router } from '@angular/router'
-import { IonNav } from '@ionic/angular'
 import {
   AbstractCategoryService,
   AbstractMarketplaceService,
@@ -10,6 +9,7 @@ import {
 import { RELATIVE_URL, THEME, WorkspaceConfig } from '@start9labs/shared'
 import { TUI_DATE_FORMAT, TUI_DATE_SEPARATOR } from '@taiga-ui/cdk'
 import {
+  tuiDropdownOptionsProvider,
   tuiNumberFormatProvider,
   tuiTextfieldOptionsProvider,
 } from '@taiga-ui/core'
@@ -39,10 +39,10 @@ export const APP_PROVIDERS: Provider[] = [
   PATCH_DB_PROVIDERS,
   FilterPackagesPipe,
   UntypedFormBuilder,
-  IonNav,
   tuiNumberFormatProvider({ decimalSeparator: '.', thousandSeparator: '' }),
   tuiButtonOptionsProvider({ size: 'm' }),
   tuiTextfieldOptionsProvider({ hintOnDisabled: true }),
+  tuiDropdownOptionsProvider({ appearance: 'start-os' }),
   {
     provide: TUI_DATE_FORMAT,
     useValue: 'MDY',

web/projects/ui/src/app/apps/loading/loading.module.ts

@@ -1,15 +0,0 @@
-import { NgModule } from '@angular/core'
-import { RouterModule, Routes } from '@angular/router'
-import { LoadingPage } from './loading.page'
-
-const routes: Routes = [
-  {
-    path: '',
-    component: LoadingPage,
-  },
-]
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-})
-export class LoadingPageModule {}

web/projects/ui/src/app/apps/portal/components/card.component.ts

@@ -1,145 +0,0 @@
-// import { CommonModule } from '@angular/common'
-// import {
-//   ChangeDetectionStrategy,
-//   Component,
-//   HostListener,
-//   Input,
-// } from '@angular/core'
-// import {
-//   TuiBadgedContentModule,
-//   TuiBadgeNotificationModule,
-//   TuiButtonModule,
-//   TuiIconModule,
-// } from '@taiga-ui/experimental'
-// import { RouterLink } from '@angular/router'
-// import { TickerModule } from '@start9labs/shared'
-// import { TuiDataListModule, TuiHostedDropdownModule } from '@taiga-ui/core'
-// import { Action, ActionsComponent } from './actions.component'
-
-// @Component({
-//   selector: '[appCard]',
-//   template: `
-//     <span class="link">
-//       <tui-badged-content [style.--tui-radius.rem]="1.5">
-//         @if (badge) {
-//           <tui-badge-notification size="m" tuiSlot="top">
-//             {{ badge }}
-//           </tui-badge-notification>
-//         }
-//         @if (icon?.startsWith('tuiIcon')) {
-//           <tui-icon class="icon" [icon]="icon" />
-//         } @else {
-//           <img alt="" class="icon" [src]="icon" />
-//         }
-//       </tui-badged-content>
-//       <label ticker class="title">{{ title }}</label>
-//     </span>
-//     @if (isService) {
-//       <span class="side">
-//         <tui-hosted-dropdown
-//           [content]="content"
-//           (click.stop.prevent)="(0)"
-//           (pointerdown.stop)="(0)"
-//         >
-//           <button
-//             tuiIconButton
-//             appearance="outline"
-//             size="xs"
-//             iconLeft="tuiIconMoreHorizontal"
-//             [style.border-radius.%]="100"
-//           >
-//             Actions
-//           </button>
-//           <ng-template #content let-close="close">
-//             <app-actions [actions]="actions" (click)="close()">
-//               {{ title }}
-//             </app-actions>
-//           </ng-template>
-//         </tui-hosted-dropdown>
-//       </span>
-//     }
-//   `,
-//   styles: [
-//     `
-//       :host {
-//         display: flex;
-//         height: 5.5rem;
-//         width: 12.5rem;
-//         border-radius: var(--tui-radius-l);
-//         overflow: hidden;
-//         box-shadow: 0 0.25rem 0.25rem rgb(0 0 0 / 25%);
-//         // TODO: Theme
-//         background: rgb(111 109 109);
-//       }
-
-//       .link {
-//         display: flex;
-//         flex: 1;
-//         flex-direction: column;
-//         align-items: center;
-//         justify-content: center;
-//         color: white;
-//         gap: 0.25rem;
-//         padding: 0 0.5rem;
-//         font: var(--tui-font-text-m);
-//         white-space: nowrap;
-//         overflow: hidden;
-//       }
-
-//       .icon {
-//         width: 2.5rem;
-//         height: 2.5rem;
-//         border-radius: 100%;
-//         color: var(--tui-text-01-night);
-//       }
-
-//       .side {
-//         width: 3rem;
-//         display: flex;
-//         align-items: center;
-//         justify-content: center;
-//         box-shadow: 0 0.25rem 0.25rem rgb(0 0 0 / 25%);
-//         // TODO: Theme
-//         background: #4b4a4a;
-//       }
-//     `,
-//   ],
-//   standalone: true,
-//   changeDetection: ChangeDetectionStrategy.OnPush,
-//   imports: [
-//     CommonModule,
-//     RouterLink,
-//     TuiButtonModule,
-//     TuiHostedDropdownModule,
-//     TuiDataListModule,
-//     TuiIconModule,
-//     TickerModule,
-//     TuiBadgedContentModule,
-//     TuiBadgeNotificationModule,
-//     ActionsComponent,
-//   ],
-// })
-// export class CardComponent {
-//   @Input({ required: true })
-//   id!: string
-
-//   @Input({ required: true })
-//   icon!: string
-
-//   @Input({ required: true })
-//   title!: string
-
-//   @Input()
-//   actions: Record<string, readonly Action[]> = {}
-
-//   @Input()
-//   badge: number | null = null
-
-//   get isService(): boolean {
-//     return !this.id.includes('/')
-//   }
-
-//   // Prevents Firefox from starting a native drag
-//   @HostListener('pointerdown.prevent')
-//   onDown() {}
-// }

web/projects/ui/src/app/apps/portal/utils/system-tab-resolver.ts

@@ -1,5 +0,0 @@
-import { ActivatedRouteSnapshot } from '@angular/router'
-
-export function systemTabResolver({ data }: ActivatedRouteSnapshot): string {
-  return data['title']
-}

web/projects/ui/src/app/apps/portal/utils/to-navigation-item.ts

@@ -1,32 +0,0 @@
-import { PackageDataEntry } from 'src/app/services/patch-db/data-model'
-import { SYSTEM_UTILITIES } from '../constants/system-utilities'
-import { toRouterLink } from './to-router-link'
-import { getManifest } from 'src/app/util/get-package-data'
-
-export interface NavigationItem {
-  readonly routerLink: string
-  readonly icon: string
-  readonly title: string
-}
-
-export function toNavigationItem(
-  id: string,
-  packages: Record<string, PackageDataEntry> = {},
-): NavigationItem {
-  const item = SYSTEM_UTILITIES[id]
-  const routerLink = toRouterLink(id)
-
-  if (SYSTEM_UTILITIES[id]) {
-    return {
-      icon: item.icon,
-      title: item.title,
-      routerLink,
-    }
-  }
-
-  return {
-    icon: packages[id]?.icon,
-    title: getManifest(packages[id]).title,
-    routerLink,
-  }
-}

web/projects/ui/src/app/common/os-welcome/os-welcome.module.ts

@@ -1,10 +0,0 @@
-import { NgModule } from '@angular/core'
-import { TuiButtonModule } from '@taiga-ui/experimental'
-import { OSWelcomePage } from './os-welcome.page'
-
-@NgModule({
-  declarations: [OSWelcomePage],
-  imports: [TuiButtonModule],
-  exports: [OSWelcomePage],
-})
-export class OSWelcomePageModule {}

web/projects/ui/src/app/common/os-welcome/os-welcome.page.html

@@ -1,34 +0,0 @@
-<h2>This Release</h2>
-<h4>0.3.5</h4>
-<p class="note-padding">
-  View the complete
-  <a
-    href="https://github.com/Start9Labs/start-os/releases/tag/v0.3.5"
-    target="_blank"
-    noreferrer
-  >
-    release notes
-  </a>
-  for more details.
-</p>
-<h6>Highlights</h6>
-<ul class="spaced-list">
-  <li>
-    This release contains significant under-the-hood improvements to performance
-    and reliability
-  </li>
-  <li>Ditch Docker, replace with Podman</li>
-  <li>Remove locking behavior from PatchDB and optimize</li>
-  <li>Boost efficiency of service manager</li>
-  <li>Require HTTPS on LAN, and improve setup flow for trusting Root CA</li>
-  <li>Better default privacy settings for Firefox kiosk mode</li>
-  <li>Eliminate memory leak from Javascript runtime</li>
-  <li>Other small bug fixes</li>
-  <li>Update license to MIT</li>
-</ul>
-
-<div class="ion-text-center ion-padding">
-  <button tuiButton class="begin" (click)="context.$implicit.complete()">
-    Begin
-  </button>
-</div>

web/projects/ui/src/app/common/os-welcome/os-welcome.page.scss

@@ -1,34 +0,0 @@
-.close-button {
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  min-height: 100px;
-}
-
-.main-content {
-  color: var(--ion-color-dark);
-}
-
-.spaced-list {
-  li {
-    padding-bottom: 12px;
-  }
-}
-
-.note-padding {
-  padding-bottom: 12px;
-}
-
-h2 {
-  font-weight: bold;
-}
-
-h4 {
-  font-style: italic;
-}
-
-.begin {
-  display: block;
-  margin: 0 auto;
-}

web/projects/ui/src/app/common/os-welcome/os-welcome.page.ts

@@ -1,14 +0,0 @@
-import { Component, Inject } from '@angular/core'
-import { TuiDialogContext } from '@taiga-ui/core'
-import { POLYMORPHEUS_CONTEXT } from '@tinkoff/ng-polymorpheus'
-
-@Component({
-  selector: 'os-welcome',
-  templateUrl: './os-welcome.page.html',
-  styleUrls: ['./os-welcome.page.scss'],
-})
-export class OSWelcomePage {
-  constructor(
-    @Inject(POLYMORPHEUS_CONTEXT) readonly context: TuiDialogContext,
-  ) {}
-}

web/projects/ui/src/app/components/report.component.ts

@@ -9,7 +9,7 @@ import { BackupReport } from 'src/app/services/api/api.types'
 
 @Component({
   template: `
-    <h3 class="g-title">Completed: {{ timestamp | date : 'medium' }}</h3>
+    <h3 class="g-title">Completed: {{ timestamp | date: 'medium' }}</h3>
     <div class="g-action">
       <div [style.flex]="1">
         <strong>System data</strong>

web/projects/ui/src/app/components/welcome.component.ts

@@ -0,0 +1,49 @@
+import { Component, inject, Inject } from '@angular/core'
+import { TuiDialogContext } from '@taiga-ui/core'
+import { TuiButtonModule } from '@taiga-ui/experimental'
+import { POLYMORPHEUS_CONTEXT } from '@tinkoff/ng-polymorpheus'
+
+@Component({
+  standalone: true,
+  template: `
+    <h3>
+      This release:
+      <em>0.3.5</em>
+    </h3>
+    <p>
+      View the complete
+      <a
+        href="https://github.com/Start9Labs/start-os/releases/tag/v0.3.5"
+        target="_blank"
+        noreferrer
+      >
+        release notes
+      </a>
+      for more details.
+    </p>
+    <h5>Highlights</h5>
+    <ul class="spaced-list">
+      <li>
+        This release contains significant under-the-hood improvements to
+        performance and reliability
+      </li>
+      <li>Ditch Docker, replace with Podman</li>
+      <li>Remove locking behavior from PatchDB and optimize</li>
+      <li>Boost efficiency of service manager</li>
+      <li>Require HTTPS on LAN, and improve setup flow for trusting Root CA</li>
+      <li>Better default privacy settings for Firefox kiosk mode</li>
+      <li>Eliminate memory leak from Javascript runtime</li>
+      <li>Other small bug fixes</li>
+      <li>Update license to MIT</li>
+    </ul>
+
+    <p [style.text-align]="'center'">
+      <button tuiButton (click)="context.$implicit.complete()">Begin</button>
+    </p>
+  `,
+  styles: 'li { margin-bottom: 0.5rem }',
+  imports: [TuiButtonModule],
+})
+export class WelcomeComponent {
+  readonly context = inject<TuiDialogContext>(POLYMORPHEUS_CONTEXT)
+}

web/projects/ui/src/app/routes/diagnostic/logs/logs.page.ts

@@ -2,7 +2,7 @@ import { Component, ElementRef, inject, OnInit, ViewChild } from '@angular/core'
 import { INTERSECTION_ROOT } from '@ng-web-apis/intersection-observer'
 import { convertAnsi, ErrorService } from '@start9labs/shared'
 import { TuiScrollbarComponent } from '@taiga-ui/core'
-import { DiagnosticService } from 'src/app/apps/diagnostic/services/diagnostic.service'
+import { DiagnosticService } from 'src/app/routes/diagnostic/services/diagnostic.service'
 
 @Component({
   selector: 'logs',

web/projects/ui/src/app/routes/loading/loading.page.ts

@@ -11,17 +11,15 @@ import { ApiService } from 'src/app/services/api/embassy-api.service'
 @Component({
   standalone: true,
   template: `
-    <app-initializing
-      class="ion-page"
-      (finished)="router.navigate(['login'])"
-    />
+    <app-initializing (finished)="router.navigate(['login'])" />
   `,
   providers: [
     provideSetupService(ApiService),
     provideSetupLogsService(ApiService),
   ],
+  styles: ':host { padding: 1rem; }',
   imports: [InitializingComponent],
 })
-export class LoadingPage {
+export default class LoadingPage {
   readonly router = inject(Router)
 }

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

@@ -19,8 +19,8 @@ import { TuiButtonModule } from '@taiga-ui/experimental'
 import { TuiDialogFormService } from '@taiga-ui/kit'
 import { POLYMORPHEUS_CONTEXT } from '@tinkoff/ng-polymorpheus'
 import { compare, Operation } from 'fast-json-patch'
-import { FormModule } from 'src/app/common/form/form.module'
-import { InvalidService } from 'src/app/common/form/invalid.service'
+import { FormModule } from 'src/app/routes/portal/components/form/form.module'
+import { InvalidService } from 'src/app/routes/portal/components/form/invalid.service'
 import { FormService } from 'src/app/services/form.service'
 
 export interface ActionButton<T> {

web/projects/ui/src/app/routes/portal/components/form/form-array/form-array.component.html

@@ -28,7 +28,7 @@
     [open]="!!open.get(item)"
     (openChange)="open.set(item, $event)"
   >
-    {{ item.value | mustache : $any(spec.spec).displayAs }}
+    {{ item.value | mustache: $any(spec.spec).displayAs }}
     <ng-container *ngTemplateOutlet="remove"></ng-container>
   </form-object>
   <ng-template #control>

web/projects/ui/src/app/routes/portal/components/form/form-datetime/form-datetime.component.html

@@ -18,8 +18,8 @@
     [disabled]="!!spec.disabled"
     [readOnly]="readOnly"
     [pseudoInvalid]="invalid"
-    [min]="spec.min ? (spec.min | tuiMapper : getLimit)[0] : min"
-    [max]="spec.max ? (spec.max | tuiMapper : getLimit)[0] : max"
+    [min]="spec.min ? (spec.min | tuiMapper: getLimit)[0] : min"
+    [max]="spec.max ? (spec.max | tuiMapper: getLimit)[0] : max"
     [(ngModel)]="value"
     (focusedChange)="onFocus($event)"
   >
@@ -32,8 +32,8 @@
     [disabled]="!!spec.disabled"
     [readOnly]="readOnly"
     [pseudoInvalid]="invalid"
-    [min]="spec.min ? (spec.min | tuiMapper : getLimit) : min"
-    [max]="spec.max ? (spec.max | tuiMapper : getLimit) : max"
+    [min]="spec.min ? (spec.min | tuiMapper: getLimit) : min"
+    [max]="spec.max ? (spec.max | tuiMapper: getLimit) : max"
     [(ngModel)]="value"
     (focusedChange)="onFocus($event)"
   >

web/projects/ui/src/app/routes/portal/components/form/form-group/form-group.component.html

@@ -1,5 +1,5 @@
 <ng-container
-  *ngFor="let entry of spec | keyvalue : asIsOrder"
+  *ngFor="let entry of spec | keyvalue: asIsOrder"
   tuiMode="onDark"
   [ngSwitch]="entry.value.type"
   [tuiTextfieldCleaner]="true"

web/projects/ui/src/app/routes/portal/components/form/form-text/form-text.component.scss

@@ -4,6 +4,5 @@
 }
 
 .masked {
-  font-family: text-security-disc;
   -webkit-text-security: disc;
 }

web/projects/ui/src/app/routes/portal/components/form/form-text/form-text.component.ts

@@ -1,7 +1,7 @@
 import { Component } from '@angular/core'
 import { CT } from '@start9labs/start-sdk'
 import { Control } from '../control'
-import { getDefaultString } from 'src/app/util/config-utilities'
+import { getDefaultString } from 'src/app/utils/config-utilities'
 
 @Component({
   selector: 'form-text',

web/projects/ui/src/app/routes/portal/components/header/breadcrumb.component.ts

@@ -5,7 +5,7 @@ import {
   inject,
   Input,
 } from '@angular/core'
-import { Breadcrumb } from '../../services/breadcrumbs.service'
+import { Breadcrumb } from 'src/app/services/breadcrumbs.service'
 import { TuiIconModule, TuiTitleModule } from '@taiga-ui/experimental'
 import {
   TUI_ANIMATION_OPTIONS,

web/projects/ui/src/app/routes/portal/components/header/corner.component.ts

@@ -18,8 +18,8 @@ import {
 import { Subject } from 'rxjs'
 import { HeaderMenuComponent } from './menu.component'
 import { HeaderNotificationsComponent } from './notifications.component'
-import { SidebarDirective } from 'src/app/common/sidebar-host.component'
-import { NotificationService } from '../../services/notification.service'
+import { SidebarDirective } from 'src/app/components/sidebar-host.component'
+import { NotificationService } from 'src/app/services/notification.service'
 
 @Component({
   standalone: true,

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

@@ -13,7 +13,7 @@ import { HeaderBreadcrumbComponent } from './breadcrumb.component'
 import { HeaderSnekDirective } from './snek.directive'
 import { HeaderMobileComponent } from './mobile.component'
 import { DataModel } from 'src/app/services/patch-db/data-model'
-import { BreadcrumbsService } from '../../services/breadcrumbs.service'
+import { BreadcrumbsService } from 'src/app/services/breadcrumbs.service'
 
 @Component({
   selector: 'header[appHeader]',

web/projects/ui/src/app/routes/portal/components/header/menu.component.ts

@@ -14,7 +14,7 @@ import { filter } from 'rxjs'
 import { ApiService } from 'src/app/services/api/embassy-api.service'
 import { AuthService } from 'src/app/services/auth.service'
 import { ABOUT } from './about.component'
-import { getAllPackages } from 'src/app/util/get-package-data'
+import { getAllPackages } from 'src/app/utils/get-package-data'
 import { DataModel } from 'src/app/services/patch-db/data-model'
 import { HeaderConnectionComponent } from './connection.component'
 

web/projects/ui/src/app/routes/portal/components/header/mobile.component.ts

@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
-import { TuiIconModule } from '@taiga-ui/experimental'
-import { Breadcrumb } from '../../services/breadcrumbs.service'
 import { RouterLink } from '@angular/router'
+import { TuiIconModule } from '@taiga-ui/experimental'
+import { Breadcrumb } from 'src/app/services/breadcrumbs.service'
 
 @Component({
   standalone: true,

web/projects/ui/src/app/routes/portal/components/header/notification.component.ts

@@ -9,7 +9,7 @@ import { TuiSvgModule } from '@taiga-ui/core'
 import { TuiButtonModule, TuiTitleModule } from '@taiga-ui/experimental'
 import { TuiLineClampModule } from '@taiga-ui/kit'
 import { ServerNotification } from 'src/app/services/api/api.types'
-import { NotificationService } from '../../services/notification.service'
+import { NotificationService } from 'src/app/services/notification.service'
 
 @Component({
   selector: 'header-notification',

web/projects/ui/src/app/routes/portal/components/header/notifications.component.ts

@@ -19,12 +19,12 @@ import { PatchDB } from 'patch-db-client'
 import { Subject, first, tap } from 'rxjs'
 import { DataModel } from 'src/app/services/patch-db/data-model'
 import { HeaderNotificationComponent } from './notification.component'
-import { toRouterLink } from '../../utils/to-router-link'
+import { toRouterLink } from 'src/app/utils/to-router-link'
 import {
   ServerNotification,
   ServerNotifications,
 } from 'src/app/services/api/api.types'
-import { NotificationService } from '../../services/notification.service'
+import { NotificationService } from 'src/app/services/notification.service'
 import { ToManifestPipe } from '../../pipes/to-manifest'
 
 @Component({

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

@@ -15,8 +15,8 @@ import {
   TuiTitleModule,
 } from '@taiga-ui/experimental'
 import { PolymorpheusComponent } from '@tinkoff/ng-polymorpheus'
-import { QRComponent } from 'src/app/common/qr.component'
-import { mask } from 'src/app/util/mask'
+import { QRModal } from 'src/app/routes/portal/modals/qr.component'
+import { mask } from 'src/app/utils/mask'
 import { InterfaceComponent } from './interface.component'
 import { AddressesService } from './interface.utils'
 
@@ -98,7 +98,7 @@ export class AddressItemComponent {
 
   showQR(data: string) {
     this.dialogs
-      .open(new PolymorpheusComponent(QRComponent), {
+      .open(new PolymorpheusComponent(QRModal), {
         size: 'auto',
         data,
       })