update/alpha.9 (#2988)

* import marketplac preview for sideload

* fix: improve state service (#2977)

* fix: fix sideload DI

* fix: update Angular

* fix: cleanup

* fix: fix version selection

* Bump node version to fix build for Angular

* misc fixes
- update node to v22
- fix chroot-and-upgrade access to prune-images
- don't self-migrate legacy packages
- #2985
- move dataVersion to volume folder
- remove "instructions.md" from s9pk
- add "docsUrl" to manifest

* version bump

* include flavor when clicking view listing from updates tab

* closes #2980

* fix: fix select button

* bring back ssh keys

* fix: drop 'portal' from all routes

* fix: implement longtap action to select table rows

* fix description for ssh page

* replace instructions with docsLink and refactor marketplace preview

* delete unused translations

* fix patchdb diffing algorithm

* continue refactor of marketplace lib show components

* Booting StartOS instead of Setting up your server on init

* misc fixes
- closes #2990
- closes #2987

* fix build

* docsUrl and clickable service headers

* don't cleanup after update until new service install succeeds

* update types

* misc fixes

* beta.35

* sdkversion, githash for sideload, correct logs for init, startos pubkey display

* bring back reboot button on install

* misc fixes

* beta.36

* better handling of setup and init for websocket errors

* reopen init and setup logs even on graceful closure

* better logging, misc fixes

* fix build

* dont let package stats hang

* dont show docsurl in marketplace if no docsurl

* re-add needs-config

* show error if init fails, shorten hover state on header icons

* fix operator precedemce

---------

Co-authored-by: Matt Hill <mattnine@protonmail.com>
Co-authored-by: Alex Inkin <alexander@inkin.ru>
Co-authored-by: Mariusz Kogen <k0gen@pm.me>

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

@@ -1,61 +0,0 @@
-import { CommonModule } from '@angular/common'
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
-import { TuiProgress } from '@taiga-ui/kit'
-import { LogsWindowComponent } from './logs-window.component'
-import { i18nPipe } from '../i18n/i18n.pipe'
-
-@Component({
-  selector: 'app-initializing',
-  template: `
-    <section>
-      <h1 [style.font-size.rem]="2" [style.margin-bottom.rem]="2">
-        {{ 'Setting up your server' | i18n }}
-      </h1>
-      <div>
-        {{ 'Progress' | i18n }}: {{ (progress.total * 100).toFixed(0) }}%
-      </div>
-      <progress
-        tuiProgressBar
-        [style.max-width.rem]="40"
-        [style.margin]="'1rem auto'"
-        [attr.value]="progress.total"
-      ></progress>
-      <p [innerHTML]="progress.message || 'Finished'"></p>
-    </section>
-    <logs-window />
-  `,
-  styles: `
-    section {
-      border-radius: 0.25rem;
-      padding: 1rem;
-      margin: 1.5rem;
-      text-align: center;
-      // @TODO Theme
-      background: #e0e0e0;
-      color: #333;
-      --tui-background-neutral-1: rgba(0, 0, 0, 0.1);
-    }
-
-    logs-window {
-      display: flex;
-      flex-direction: column;
-      height: 18rem;
-      padding: 1rem;
-      margin: 0 1.5rem auto;
-      text-align: left;
-      overflow: hidden;
-      border-radius: 2rem;
-      // @TODO Theme
-      background: #181818;
-    }
-  `,
-  imports: [CommonModule, LogsWindowComponent, TuiProgress, i18nPipe],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class InitializingComponent {
-  @Input()
-  progress: { total: number; message: string } = { total: 0, message: '' }
-
-  @Input()
-  setupType?: 'fresh' | 'restore' | 'attach' | 'transfer'
-}

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

@@ -0,0 +1,92 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  inject,
+  input,
+  Input,
+} from '@angular/core'
+import { TuiProgress } from '@taiga-ui/kit'
+import { LogsWindowComponent } from './logs-window.component'
+import { i18nPipe } from '../../i18n/i18n.pipe'
+
+@Component({
+  selector: 'app-initializing',
+  template: `
+    @if (error(); as err) {
+      <section>
+        <h1>{{ 'Error initializing server' | i18n }}</h1>
+        <p>{{ err }}</p>
+      </section>
+    } @else {
+      <section>
+        <h1 [style.font-size.rem]="2" [style.margin-bottom.rem]="2">
+          {{
+            setupType()
+              ? ('Setting up your server' | i18n)
+              : ('Booting StartOS' | i18n)
+          }}
+        </h1>
+        <div>
+          {{ 'Progress' | i18n }}: {{ (progress().total * 100).toFixed(0) }}%
+        </div>
+        <progress
+          tuiProgressBar
+          [style.max-width.rem]="40"
+          [style.margin]="'1rem auto'"
+          [attr.value]="progress().total"
+        ></progress>
+        <p [innerHTML]="message()"></p>
+      </section>
+    }
+    <logs-window />
+  `,
+  styles: `
+    section {
+      border-radius: 0.25rem;
+      padding: 1rem;
+      margin: 1.5rem;
+      text-align: center;
+      // @TODO Theme
+      background: #e0e0e0;
+      color: #333;
+      --tui-background-neutral-1: rgba(0, 0, 0, 0.1);
+    }
+
+    logs-window {
+      display: flex;
+      flex-direction: column;
+      height: 18rem;
+      padding: 1rem;
+      margin: 0 1.5rem auto;
+      text-align: left;
+      overflow: hidden;
+      border-radius: 2rem;
+      // @TODO Theme
+      background: #181818;
+    }
+  `,
+  imports: [LogsWindowComponent, TuiProgress, i18nPipe],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class InitializingComponent {
+  private readonly i18nPipe = inject(i18nPipe)
+
+  readonly progress = input<{ total: number; message: string }>({
+    total: 0,
+    message: '',
+  })
+  readonly setupType = input<
+    'fresh' | 'restore' | 'attach' | 'transfer' | undefined
+  >()
+  readonly error = input<string>()
+
+  readonly message = computed(() => {
+    return (
+      this.progress().message ||
+      (this.progress().total === 1
+        ? this.i18nPipe.transform('Finished')
+        : '...')
+    )
+  })
+}

web/projects/shared/src/components/initializing/logs-window.component.ts

@@ -1,5 +1,5 @@
 import { AsyncPipe } from '@angular/common'
-import { Component, ElementRef, inject } from '@angular/core'
+import { Component, ElementRef, inject, input } from '@angular/core'
 import {
   INTERSECTION_ROOT,
   WaIntersectionObserver,
@@ -7,7 +7,7 @@ import {
 import { WaMutationObserver } from '@ng-web-apis/mutation-observer'
 import { TuiScrollbar } from '@taiga-ui/core'
 import { NgDompurifyPipe } from '@taiga-ui/dompurify'
-import { SetupLogsService } from '../services/setup-logs.service'
+import { SetupLogsService } from '../../services/setup-logs.service'
 
 @Component({
   selector: 'logs-window',

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

@@ -1,4 +1,3 @@
-import { CommonModule } from '@angular/common'
 import { ChangeDetectionStrategy, Component, Inject } from '@angular/core'
 import { FormsModule } from '@angular/forms'
 import { TuiAutoFocus } from '@taiga-ui/cdk'
@@ -14,7 +13,9 @@ import { i18nKey } from '../i18n/i18n.providers'
 @Component({
   template: `
     <p>{{ options.message }}</p>
-    <p *ngIf="options.warning" class="warning">{{ options.warning }}</p>
+    @if (options.warning) {
+      <p class="warning">{{ options.warning }}</p>
+    }
     <form (ngSubmit)="submit(value.trim())">
       <tui-input
         tuiAutoFocus
@@ -24,7 +25,9 @@ import { i18nKey } from '../i18n/i18n.providers'
         [(ngModel)]="value"
       >
         {{ options.label }}
-        <span *ngIf="options.required !== false && options.label">*</span>
+        @if (options.required !== false && options.label) {
+          <span>*</span>
+        }
         <input
           tuiTextfieldLegacy
           [class.masked]="options.useMask && masked && value"
@@ -74,7 +77,6 @@ import { i18nKey } from '../i18n/i18n.providers'
     }
   `,
   imports: [
-    CommonModule,
     FormsModule,
     TuiInputModule,
     TuiButton,