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/marketplace/src/pages/show/about.component.ts

@@ -0,0 +1,139 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  inject,
+  input,
+  output,
+} from '@angular/core'
+import { MarketplacePkgBase } from '../../types'
+import { CopyService } from '@start9labs/shared'
+import { DatePipe } from '@angular/common'
+import { MarketplaceItemComponent } from './item.component'
+
+@Component({
+  selector: 'marketplace-about',
+  template: `
+    <div class="background-border box-shadow-lg shadow-color-light">
+      <div class="box-container">
+        <div class="detail-container">
+          <!-- version -->
+          <marketplace-item
+            [style.pointer-events]="'none'"
+            [data]="pkg().version"
+            label="Version"
+            icon=""
+          />
+          <!-- release date -->
+          @if (pkg().s9pk?.publishedAt; as published) {
+            <marketplace-item
+              [style.pointer-events]="'none'"
+              [data]="(published | date: 'medium')!"
+              label="Released"
+              icon=""
+            />
+          }
+          <!-- SDK version -->
+          <marketplace-item
+            [style.pointer-events]="'none'"
+            [data]="pkg().sdkVersion || 'Unknown'"
+            label="SDK Version"
+            icon=""
+          />
+          <!-- git hash -->
+          @if (pkg().gitHash; as gitHash) {
+            <marketplace-item
+              (click)="copyService.copy(gitHash)"
+              [data]="gitHash"
+              label="Git Hash"
+              icon="@tui.copy"
+              class="item-copy"
+            />
+          } @else {
+            <div class="item-padding">
+              <label tuiTitle>
+                <span tuiSubtitle>Git Hash</span>
+                Unknown
+              </label>
+            </div>
+          }
+          <!-- license -->
+          <marketplace-item
+            (click)="static.emit('license')"
+            [data]="pkg().license"
+            label="License"
+            icon="@tui.chevron-right"
+            class="item-pointer"
+          />
+        </div>
+      </div>
+    </div>
+
+    <div class="background-border box-shadow-lg shadow-color-light">
+      <div class="box-container">
+        <p [innerHTML]="pkg().description.long"></p>
+      </div>
+    </div>
+  `,
+  styles: `
+    .box-container {
+      background-color: rgb(39 39 42);
+      border-radius: 0.75rem;
+      padding: 1.25rem 1.75rem;
+
+      p {
+        font-size: 1rem;
+        line-height: 1.5rem;
+        margin-bottom: 0.75rem;
+        pointer-events: none;
+      }
+    }
+
+    .detail-container {
+      display: grid;
+      grid-auto-flow: row;
+      grid-auto-columns: minmax(0, 1fr);
+
+      & > * + * {
+        border-top-width: 1px;
+        border-bottom-width: 0;
+        border-color: rgb(113 113 122);
+      }
+    }
+
+    .item-pointer:hover {
+      cursor: pointer;
+
+      ::ng-deep label {
+        cursor: pointer;
+      }
+    }
+
+    .item-copy:hover {
+      cursor: copy;
+
+      ::ng-deep label {
+        cursor: copy;
+      }
+    }
+
+    .item-padding {
+      padding: 0.75rem 0.25rem;
+    }
+
+    * {
+      box-sizing: border-box;
+      border-width: 0;
+      border-style: solid;
+      border-color: rgb(var(--tw-color-gray-200) / 1);
+    }
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [MarketplaceItemComponent, DatePipe],
+})
+export class MarketplaceAboutComponent {
+  readonly copyService = inject(CopyService)
+
+  readonly pkg = input.required<MarketplacePkgBase>()
+
+  readonly static = output<'license'>()
+}