Bugfix/040 UI (#2881)

* fix sideload and install flow

* move updates chevron inside upddate button

* update dictionaries to include langauge names

* fix: address todos (#2880)

* fix: address todos

* fix enlgish translation

---------

Co-authored-by: Matt Hill <mattnine@protonmail.com>

* use existing translation, no need to duplicate

* fix: update dialog and other fixes (#2882)

---------

Co-authored-by: Alex Inkin <alexander@inkin.ru>
Co-authored-by: Aiden McClelland <me@drbonez.dev>

web/projects/shared/src/components/markdown.component.ts

@@ -4,7 +4,7 @@ import { ActivatedRoute, Data } from '@angular/router'
 import { TuiDialogContext, TuiLoader, TuiNotification } from '@taiga-ui/core'
 import { injectContext, PolymorpheusComponent } from '@taiga-ui/polymorpheus'
 import { NgDompurifyModule } from '@tinkoff/ng-dompurify'
-import { catchError, ignoreElements, of } from 'rxjs'
+import { catchError, ignoreElements, Observable, of } from 'rxjs'
 import { SafeLinksDirective } from '../directives/safe-links.directive'
 import { MarkdownPipe } from '../pipes/markdown.pipe'
 import { getErrorMessage } from '../services/error.service'
@@ -36,8 +36,9 @@ import { getErrorMessage } from '../services/error.service'
 })
 export class MarkdownComponent {
   private readonly data =
-    injectContext<TuiDialogContext<void, Data>>({ optional: true })?.data ||
-    inject(ActivatedRoute).snapshot.data
+    injectContext<TuiDialogContext<void, { content: Observable<string> }>>({
+      optional: true,
+    })?.data || inject(ActivatedRoute).snapshot.data
 
   readonly content = toSignal<string>(this.data['content'])
   readonly error = toSignal(

web/projects/shared/src/directives/safe-links.directive.ts

@@ -1,28 +1,39 @@
-import { AfterViewInit, Directive, ElementRef, Inject } from '@angular/core'
 import { DOCUMENT } from '@angular/common'
+import { Directive, inject } from '@angular/core'
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop'
+import {
+  MutationObserverService,
+  provideMutationObserverInit,
+} from '@ng-web-apis/mutation-observer'
+import { tuiInjectElement } from '@taiga-ui/cdk'
 
-// @TODO Alex: Refactor to use `MutationObserver` so it works with dynamic content
 @Directive({
   selector: '[safeLinks]',
+  providers: [
+    MutationObserverService,
+    provideMutationObserverInit({
+      childList: true,
+      subtree: true,
+    }),
+  ],
   standalone: true,
 })
-export class SafeLinksDirective implements AfterViewInit {
-  constructor(
-    @Inject(DOCUMENT) private readonly document: Document,
-    private readonly elementRef: ElementRef<HTMLElement>,
-  ) {}
-
-  ngAfterViewInit() {
-    Array.from(this.document.links)
-      .filter(
-        link =>
-          link.hostname !== this.document.location.hostname &&
-          this.elementRef.nativeElement.contains(link),
-      )
-      .forEach(link => {
-        link.target = '_blank'
-        link.setAttribute('rel', 'noreferrer')
-        link.classList.add('g-external-link')
-      })
-  }
+export class SafeLinksDirective {
+  private readonly doc = inject(DOCUMENT)
+  private readonly el = tuiInjectElement()
+  private readonly sub = inject(MutationObserverService)
+    .pipe(takeUntilDestroyed())
+    .subscribe(() => {
+      Array.from(this.doc.links)
+        .filter(
+          link =>
+            link.hostname !== this.doc.location.hostname &&
+            this.el.contains(link),
+        )
+        .forEach(link => {
+          link.target = '_blank'
+          link.setAttribute('rel', 'noreferrer')
+          link.classList.add('g-external-link')
+        })
+    })
 }

web/projects/shared/src/i18n/dictionaries/de.ts

@@ -488,4 +488,8 @@ export default {
   485: 'StartOS-Benutzeroberfläche',
   486: 'WiFi',
   487: 'Anleitungen',
+  488: 'spanisch',
+  489: 'polnisch',
+  490: 'deutsch',
+  491: 'englisch',
 } satisfies i18n

web/projects/shared/src/i18n/dictionaries/en.ts

@@ -487,4 +487,8 @@ export const ENGLISH = {
   'StartOS UI': 485,
   'WiFi': 486,
   'Instructions': 487,
+  'spanish': 488,
+  'polish': 489,
+  'german': 490,
+  'english': 491,
 } as const

web/projects/shared/src/i18n/dictionaries/es.ts

@@ -488,4 +488,8 @@ export default {
   485: 'Interfaz de StartOS',
   486: 'WiFi',
   487: 'Instrucciones',
+  488: 'español',
+  489: 'polaco',
+  490: 'alemán',
+  491: 'inglés',
 } as any satisfies i18n

web/projects/shared/src/i18n/dictionaries/pl.ts

@@ -488,4 +488,8 @@ export default {
   485: 'Interfejs StartOS',
   486: 'WiFi',
   487: 'instrukcje',
+  488: 'hiszpański',
+  489: 'polski',
+  490: 'niemiecki',
+  491: 'angielski',
 } satisfies i18n

web/projects/shared/src/i18n/i18n.pipe.ts

@@ -1,5 +1,5 @@
 import { inject, Injectable, Pipe, PipeTransform } from '@angular/core'
-import { ENGLISH } from './dictionaries/english'
+import { ENGLISH } from './dictionaries/en'
 import { I18N, i18nKey } from './i18n.providers'
 
 @Pipe({

web/projects/shared/src/i18n/i18n.providers.ts

@@ -5,7 +5,7 @@ import {
   tuiLanguageSwitcher,
   TuiLanguageSwitcherService,
 } from '@taiga-ui/i18n'
-import { ENGLISH } from './dictionaries/english'
+import { ENGLISH } from './dictionaries/en'
 import { i18nService } from './i18n.service'
 
 export type i18nKey = keyof typeof ENGLISH
@@ -36,11 +36,11 @@ export const I18N_PROVIDERS = [
     useValue: async (language: TuiLanguageName): Promise<unknown> => {
       switch (language) {
         case 'spanish':
-          return import('./dictionaries/spanish').then(v => v.default)
+          return import('./dictionaries/es').then(v => v.default)
         case 'polish':
-          return import('./dictionaries/polish').then(v => v.default)
+          return import('./dictionaries/pl').then(v => v.default)
         case 'german':
-          return import('./dictionaries/german').then(v => v.default)
+          return import('./dictionaries/de').then(v => v.default)
         default:
           return null
       }

web/projects/shared/src/services/error.service.ts

@@ -2,7 +2,6 @@ import { ErrorHandler, inject, Injectable } from '@angular/core'
 import { TuiAlertService } from '@taiga-ui/core'
 import { HttpError } from '../classes/http-error'
 
-// @TODO Alex: Enable this as ErrorHandler
 @Injectable({
   providedIn: 'root',
 })