Update Angular (#2952)

* fix Tor logs actually fetching od logs * chore: update to Angular 18 * chore: update to Angular 19 * bump patchDB * chore: update Angular * chore: fix setup-wizard success page * chore: fix * chore: fix * chore: fix * chore: fix --------- Co-authored-by: Matt Hill <mattnine@protonmail.com> Co-authored-by: Aiden McClelland <me@drbonez.dev>
2026-03-30 12:11:56 +00:00 · 2025-05-30 21:34:24 +07:00
parent 05b8dd9ad8
commit 02413a4fac
257 changed files with 5921 additions and 9539 deletions
--- a/web/projects/marketplace/src/components/menu/menu.component.scss
+++ b/web/projects/marketplace/src/components/menu/menu.component.scss
@@ -1,4 +1,4 @@
-@import '@taiga-ui/core/styles/taiga-ui-local';
+@use '@taiga-ui/core/styles/taiga-ui-local' as taiga;

 :host {
  margin: 0;
@@ -12,7 +12,7 @@ tui-drawer {
 }

 header {
-  @include scrollbar-hidden();
+  @include taiga.scrollbar-hidden();

  // @TODO Theme
  background: #2b2b2f;
--- a/web/projects/marketplace/src/components/menu/menu.component.ts
+++ b/web/projects/marketplace/src/components/menu/menu.component.ts
@@ -15,6 +15,7 @@ import { StoreDataWithUrl } from '../../types'
  templateUrl: './menu.component.html',
  styleUrls: ['./menu.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: false,
 })
 export class MenuComponent implements OnDestroy {
  @Input({ required: true })
--- a/web/projects/marketplace/src/components/registry.component.ts
+++ b/web/projects/marketplace/src/components/registry.component.ts
@@ -3,7 +3,6 @@ import { TuiIcon, TuiTitle } from '@taiga-ui/core'
 import { StoreIconComponentModule } from './store-icon/store-icon.component.module'

@Component({
-  standalone: true,
  selector: '[registry]',
  template: `
    <store-icon [url]="registry.url" size="40px" />
--- a/web/projects/marketplace/src/components/store-icon/store-icon.component.ts
+++ b/web/projects/marketplace/src/components/store-icon/store-icon.component.ts
@@ -21,6 +21,7 @@ import { knownRegistries, sameUrl } from '@start9labs/shared'
  `,
  styles: ':host { overflow: hidden; }',
  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: false,
 })
 export class StoreIconComponent {
  @Input()
--- a/web/projects/marketplace/src/modals/release-notes.component.ts
+++ b/web/projects/marketplace/src/modals/release-notes.component.ts
@@ -1,27 +1,27 @@
 import { CommonModule } from '@angular/common'
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
 import { Exver, MarkdownPipe } from '@start9labs/shared'
-import { TuiButton, TuiDialogContext, TuiLoader } from '@taiga-ui/core'
+import { TuiDialogContext } from '@taiga-ui/core'
+import { NgDompurifyPipe } from '@taiga-ui/dompurify'
 import { TuiAccordion } from '@taiga-ui/kit'
 import { injectContext, PolymorpheusComponent } from '@taiga-ui/polymorpheus'
 import { MarketplacePkg } from '../../src/types'

@Component({
-  standalone: true,
  template: `
    <tui-accordion>
      @for (note of notes | keyvalue: asIsOrder; track $index) {
        <tui-accordion-item>
          {{ note.key }}
          <ng-template tuiAccordionItemContent>
-            <div [innerHTML]="note.value | markdown"></div>
+            <div [innerHTML]="note.value | markdown | dompurify"></div>
          </ng-template>
        </tui-accordion-item>
      }
    </tui-accordion>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [CommonModule, TuiButton, TuiLoader, TuiAccordion, MarkdownPipe],
+  imports: [CommonModule, TuiAccordion, MarkdownPipe, NgDompurifyPipe],
 })
 export class ReleaseNotesComponent {
  private readonly exver = inject(Exver)
--- a/web/projects/marketplace/src/pages/list/categories/categories.component.ts
+++ b/web/projects/marketplace/src/pages/list/categories/categories.component.ts
@@ -27,6 +27,7 @@ const ICONS: Record<string, string> = {
  templateUrl: 'categories.component.html',
  styleUrls: ['categories.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: false,
 })
 export class CategoriesComponent {
  @Input()
--- a/web/projects/marketplace/src/pages/list/item/item.component.ts
+++ b/web/projects/marketplace/src/pages/list/item/item.component.ts
@@ -6,6 +6,7 @@ import { MarketplacePkg } from '../../../types'
  templateUrl: 'item.component.html',
  styleUrls: ['item.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: false,
 })
 export class ItemComponent {
  @Input({ required: true })
--- a/web/projects/marketplace/src/pages/list/search/search.component.ts
+++ b/web/projects/marketplace/src/pages/list/search/search.component.ts
@@ -11,6 +11,7 @@ import {
  templateUrl: 'search.component.html',
  styleUrls: ['search.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: false,
 })
 export class SearchComponent {
  @Input()
--- a/web/projects/marketplace/src/pages/show/about/about.component.html
+++ b/web/projects/marketplace/src/pages/show/about/about.component.html
@@ -1,7 +1,7 @@
 <div class="background-border box-shadow-lg shadow-color-light">
  <div class="box-container">
    <h2 class="additional-detail-title">New in {{ pkg.version }}</h2>
-    <p [innerHTML]="pkg.releaseNotes | markdown"></p>
+    <p [innerHTML]="pkg.releaseNotes | markdown | dompurify"></p>
    <button
      tuiButton
      size="s"
--- a/web/projects/marketplace/src/pages/show/about/about.component.ts
+++ b/web/projects/marketplace/src/pages/show/about/about.component.ts
@@ -13,6 +13,7 @@ import { MarketplacePkgBase } from '../../../types'
  templateUrl: 'about.component.html',
  styleUrls: ['about.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: false,
 })
 export class AboutComponent {
  private readonly dialogs = inject(TuiDialogService)
--- a/web/projects/marketplace/src/pages/show/about/about.module.ts
+++ b/web/projects/marketplace/src/pages/show/about/about.module.ts
@@ -1,18 +1,18 @@
-import { TuiButton } from '@taiga-ui/core'
-import { TuiTagModule } from '@taiga-ui/legacy'
 import { CommonModule } from '@angular/common'
 import { NgModule } from '@angular/core'
 import { RouterModule } from '@angular/router'
-import { AboutComponent } from './about.component'
-import { NgDompurifyModule } from '@tinkoff/ng-dompurify'
 import { MarkdownPipe, SafeLinksDirective } from '@start9labs/shared'
+import { TuiButton } from '@taiga-ui/core'
+import { NgDompurifyPipe } from '@taiga-ui/dompurify'
+import { TuiTagModule } from '@taiga-ui/legacy'
+import { AboutComponent } from './about.component'

@NgModule({
  imports: [
    CommonModule,
    RouterModule,
    TuiTagModule,
-    NgDompurifyModule,
+    NgDompurifyPipe,
    SafeLinksDirective,
    MarkdownPipe,
    TuiButton,
--- a/web/projects/marketplace/src/pages/show/additional/additional-item.component.ts
+++ b/web/projects/marketplace/src/pages/show/additional/additional-item.component.ts
@@ -12,32 +12,29 @@ import { TuiFade } from '@taiga-ui/kit'
    </label>
    <tui-icon [icon]="icon" />
  `,
-  styles: [
-    `
-      :host {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        gap: 0.5rem;
-        padding: 0.75rem 0.25rem;
-        white-space: nowrap;
+  styles: `
+    :host {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: 0.5rem;
+      padding: 0.75rem 0.25rem;
+      white-space: nowrap;

-        &:hover {
-          background-color: var(--tui-background-neutral-1);
-        }
-
-        [tuiSubtitle] {
-          color: var(--tui-text-secondary);
-        }
-
-        tui-icon {
-          opacity: 0.7;
-        }
+      &:hover {
+        background-color: var(--tui-background-neutral-1);
      }
-    `,
-  ],
+
+      [tuiSubtitle] {
+        color: var(--tui-text-secondary);
+      }
+
+      tui-icon {
+        opacity: 0.7;
+      }
+    }
+  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
  imports: [CommonModule, TuiIcon, TuiTitle, TuiFade],
 })
 export class MarketplaceAdditionalItemComponent {
--- a/web/projects/marketplace/src/pages/show/additional/additional-link.component.ts
+++ b/web/projects/marketplace/src/pages/show/additional/additional-link.component.ts
@@ -14,7 +14,6 @@ import { MarketplaceAdditionalItemComponent } from './additional-item.component'
    </a>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
  imports: [CommonModule, MarketplaceAdditionalItemComponent],
 })
 export class MarketplaceAdditionalLinkComponent {
--- a/web/projects/marketplace/src/pages/show/additional/additional.component.ts
+++ b/web/projects/marketplace/src/pages/show/additional/additional.component.ts
@@ -14,6 +14,7 @@ import { MarketplacePkgBase } from '../../../types'
  templateUrl: 'additional.component.html',
  styleUrls: ['additional.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: false,
 })
 export class AdditionalComponent {
  @Input({ required: true })
--- a/web/projects/marketplace/src/pages/show/dependencies/dependencies.component.ts
+++ b/web/projects/marketplace/src/pages/show/dependencies/dependencies.component.ts
@@ -27,30 +27,27 @@ import { MarketplaceDepItemComponent } from './dependency-item.component'
      </div>
    </div>
  `,
-  styles: [
-    `
-      .dependencies-container {
-        background-color: rgb(39 39 42);
-        border-radius: 0.75rem;
-        padding: 1.75rem;
+  styles: `
+    .dependencies-container {
+      background-color: rgb(39 39 42);
+      border-radius: 0.75rem;
+      padding: 1.75rem;

-        @media (min-width: 1024px) {
-          grid-column: span 5 / span 5;
-        }
-        @media (min-width: 1280px) {
-          grid-column: span 4 / span 4;
-        }
+      @media (min-width: 1024px) {
+        grid-column: span 5 / span 5;
      }
+      @media (min-width: 1280px) {
+        grid-column: span 4 / span 4;
+      }
+    }

-      .dependencies-list {
-        display: grid;
-        grid-auto-rows: auto;
-        gap: 0.75rem;
-      }
-    `,
-  ],
+    .dependencies-list {
+      display: grid;
+      grid-auto-rows: auto;
+      gap: 0.75rem;
+    }
+  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
  imports: [CommonModule, MarketplaceDepItemComponent],
 })
 export class MarketplaceDependenciesComponent {
--- a/web/projects/marketplace/src/pages/show/dependencies/dependency-item.component.ts
+++ b/web/projects/marketplace/src/pages/show/dependencies/dependency-item.component.ts
@@ -37,59 +37,56 @@ import { MarketplacePkgBase } from '../../../types'
      </div>
    </div>
  `,
-  styles: [
-    `
-      .outer-container {
-        display: flex;
-        align-items: center;
-        gap: 1.5rem;
-        padding: 1rem 1.25rem;
-        background-color: rgb(63 63 70 / 0.4);
-        border-radius: 0.75rem;
-        filter: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04))
-          drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
+  styles: `
+    .outer-container {
+      display: flex;
+      align-items: center;
+      gap: 1.5rem;
+      padding: 1rem 1.25rem;
+      background-color: rgb(63 63 70 / 0.4);
+      border-radius: 0.75rem;
+      filter: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04))
+        drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));

-        &:hover {
-          background-color: rgb(63 63 70 / 0.7);
-          cursor: pointer;
-        }
+      &:hover {
+        background-color: rgb(63 63 70 / 0.7);
+        cursor: pointer;
+      }
+    }
+
+    .title {
+      display: flex;
+      gap: 0;
+      flex-wrap: wrap;
+
+      @media (min-width: 640px) {
+        gap: 0.25rem;
      }

-      .title {
-        display: flex;
-        gap: 0;
-        flex-wrap: wrap;
-
-        @media (min-width: 640px) {
-          gap: 0.25rem;
-        }
-
-        p {
-          margin: 0;
-        }
-
-        span {
-          font-size: 1rem;
-          line-height: 1.5rem;
-          font-weight: 500;
-          color: rgb(250 250 250 / 0.9);
-        }
+      p {
+        margin: 0;
      }

-      .description {
-        font-size: 0.875rem;
-        line-height: 1.25rem;
-        color: rgb(250 250 250 / 0.7);
+      span {
+        font-size: 1rem;
+        line-height: 1.5rem;
+        font-weight: 500;
+        color: rgb(250 250 250 / 0.9);
      }
+    }

-      ::ng-deep .dep-img {
-        filter: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04))
-          drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
-      }
-    `,
-  ],
+    .description {
+      font-size: 0.875rem;
+      line-height: 1.25rem;
+      color: rgb(250 250 250 / 0.7);
+    }
+
+    ::ng-deep .dep-img {
+      filter: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04))
+        drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
+    }
+  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
  imports: [
    CommonModule,
    RouterModule,
--- a/web/projects/marketplace/src/pages/show/flavors/flavors.component.ts
+++ b/web/projects/marketplace/src/pages/show/flavors/flavors.component.ts
@@ -7,7 +7,6 @@ import { TuiCell } from '@taiga-ui/layout'
 import { MarketplacePkg } from '../../../types'

@Component({
-  standalone: true,
  selector: 'marketplace-flavors',
  template: `
    <div class="background-border box-shadow-lg shadow-color-light">
--- a/web/projects/marketplace/src/pages/show/hero/hero.component.ts
+++ b/web/projects/marketplace/src/pages/show/hero/hero.component.ts
@@ -25,122 +25,119 @@ import { SharedPipesModule, TickerComponent } from '@start9labs/shared'
      </div>
    </div>
  `,
-  styles: [
-    `
-      .outer-container {
-        display: flex;
-        justify-content: center;
-        margin-top: 2.5rem;
+  styles: `
+    .outer-container {
+      display: flex;
+      justify-content: center;
+      margin-top: 2.5rem;
+
+      @media (min-width: 768px) {
+        margin-top: 0;
+      }
+    }
+
+    .inner-container {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+      min-height: 32vh;
+      position: relative;
+      border-radius: 1.5rem;
+      padding: 4rem 2rem 0 2rem;
+
+      @media (min-width: 376px) {
+        min-height: 20vh;
+      }
+
+      @media (min-width: 768px) {
+        min-height: 11rem;
+      }
+
+      img {
+        width: 6rem;
+        height: 6rem;
+        pointer-events: none;
+        border-radius: 9999px;
+        object-fit: cover;
+        position: absolute;
+        top: -2.25rem;
+        left: 1.75rem;
+        z-index: 1;
+      }
+
+      .inner-container-title {
+        margin: 1rem 0;
+        color: rgb(250 250 250);
+        mix-blend-mode: plus-lighter;
+        z-index: 1;
+        max-width: 17rem;

        @media (min-width: 768px) {
-          margin-top: 0;
+          min-width: 100%;
+        }
+
+        h2 {
+          font-size: 2rem;
+          line-height: 3rem;
+          font-weight: 400;
+          display: inline-block;
+          margin-left: -1px;
+        }
+
+        h3 {
+          font-size: 1.1rem;
+          font-weight: 400;
+          margin-bottom: 1rem;
+          pointer-events: none;
+        }
+
+        p {
+          font-size: 1rem;
+          line-height: 1.5rem;
+          font-weight: 300;
+          pointer-events: none;
+          overflow: hidden;
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: 2;
        }
      }

-      .inner-container {
-        display: flex;
-        flex-direction: column;
+      .color-background {
+        overflow: hidden;
+        position: absolute;
        width: 100%;
-        min-height: 32vh;
-        position: relative;
+        height: 100%;
+        top: 0;
+        left: 0;
+        z-index: -50;
        border-radius: 1.5rem;
-        padding: 4rem 2rem 0 2rem;
-
-        @media (min-width: 376px) {
-          min-height: 20vh;
-        }
-
-        @media (min-width: 768px) {
-          min-height: 11rem;
-        }

        img {
-          width: 6rem;
-          height: 6rem;
-          pointer-events: none;
-          border-radius: 9999px;
+          position: absolute;
          object-fit: cover;
-          position: absolute;
-          top: -2.25rem;
-          left: 1.75rem;
-          z-index: 1;
-        }
-
-        .inner-container-title {
-          margin: 1rem 0;
-          color: rgb(250 250 250);
-          mix-blend-mode: plus-lighter;
-          z-index: 1;
-          max-width: 17rem;
-
-          @media (min-width: 768px) {
-            min-width: 100%;
-          }
-
-          h2 {
-            font-size: 2rem;
-            line-height: 3rem;
-            font-weight: 400;
-            display: inline-block;
-            margin-left: -1px;
-          }
-
-          h3 {
-            font-size: 1.1rem;
-            font-weight: 400;
-            margin-bottom: 1rem;
-            pointer-events: none;
-          }
-
-          p {
-            font-size: 1rem;
-            line-height: 1.5rem;
-            font-weight: 300;
-            pointer-events: none;
-            overflow: hidden;
-            display: -webkit-box;
-            -webkit-box-orient: vertical;
-            -webkit-line-clamp: 2;
-          }
-        }
-
-        .color-background {
-          overflow: hidden;
-          position: absolute;
-          width: 100%;
-          height: 100%;
-          top: 0;
-          left: 0;
-          z-index: -50;
-          border-radius: 1.5rem;
-
-          img {
-            position: absolute;
-            object-fit: cover;
-            pointer-events: none;
-            width: 200%;
-            height: 200%;
-            max-width: 200%;
-            filter: blur(100px);
-          }
-        }
-
-        .dark-overlay {
-          overflow: hidden;
-          position: absolute;
-          width: 100%;
-          height: 100%;
-          top: 0;
-          left: 0;
-          border-radius: 1.5rem;
-          background-color: rgb(63 63 70);
-          opacity: 0.7;
+          pointer-events: none;
+          width: 200%;
+          height: 200%;
+          max-width: 200%;
+          filter: blur(100px);
        }
      }
-    `,
-  ],
+
+      .dark-overlay {
+        overflow: hidden;
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+        border-radius: 1.5rem;
+        background-color: rgb(63 63 70);
+        opacity: 0.7;
+      }
+    }
+  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
  imports: [CommonModule, SharedPipesModule, TickerComponent],
 })
 export class MarketplacePackageHeroComponent {
--- a/web/projects/marketplace/src/pages/show/screenshots/screenshots.component.ts
+++ b/web/projects/marketplace/src/pages/show/screenshots/screenshots.component.ts
@@ -68,64 +68,61 @@ import { PolymorpheusContent } from '@taiga-ui/polymorpheus'
      ></button>
    </div>
  `,
-  styles: [
-    `
-      .outer-container {
-        display: flex;
-        align-items: center;
-        align-content: center;
-        margin: 0px;
+  styles: `
+    .outer-container {
+      display: flex;
+      align-items: center;
+      align-content: center;
+      margin: 0px;

-        @media (min-width: 1024px) {
-          margin-left: -3.5rem;
-          margin-right: -3.5rem;
-          min-height: 20rem;
-          height: 20rem;
-        }
-        @media (min-width: 1536px) {
-          height: 100%;
-        }
+      @media (min-width: 1024px) {
+        margin-left: -3.5rem;
+        margin-right: -3.5rem;
+        min-height: 20rem;
+        height: 20rem;
+      }
+      @media (min-width: 1536px) {
+        height: 100%;
+      }
+    }
+
+    .carousel {
+      overflow-y: hidden;
+      overflow-x: scroll;
+      overflow: hidden;
+    }
+
+    .screenshot-item {
+      object-fit: cover;
+      overflow: hidden;
+      border-radius: 0.5rem;
+      border-width: 1px;
+      border-color: rgb(161 161 170 / 0.3);
+
+      &:hover {
+        cursor: pointer;
      }

-      .carousel {
-        overflow-y: hidden;
-        overflow-x: scroll;
-        overflow: hidden;
+      @media (min-width: 768px) {
+        border-radius: 0.75rem;
      }

-      .screenshot-item {
-        object-fit: cover;
-        overflow: hidden;
+      .screenshot-item-img {
+        width: 100%;
+        height: 100%;
        border-radius: 0.5rem;
-        border-width: 1px;
-        border-color: rgb(161 161 170 / 0.3);
-
-        &:hover {
-          cursor: pointer;
-        }

        @media (min-width: 768px) {
          border-radius: 0.75rem;
        }

-        .screenshot-item-img {
-          width: 100%;
-          height: 100%;
-          border-radius: 0.5rem;
-
-          @media (min-width: 768px) {
-            border-radius: 0.75rem;
-          }
-
-          .screenshot-item-img-enlarged {
-            border-radius: 0px;
-          }
+        .screenshot-item-img-enlarged {
+          border-radius: 0;
        }
      }
-    `,
-  ],
+    }
+  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
  imports: [CommonModule, TuiCarousel, TuiButton],
 })
 export class MarketplacePackageScreenshotComponent {
--- a/web/projects/marketplace/src/pipes/filter-packages.pipe.ts
+++ b/web/projects/marketplace/src/pipes/filter-packages.pipe.ts
@@ -4,6 +4,7 @@ import Fuse from 'fuse.js'

@Pipe({
  name: 'filterPackages',
+  standalone: false,
 })
 export class FilterPackagesPipe implements PipeTransform {
  transform(