sideload wip, websockets, styling, multiple todos (#2865)

* sideload wip, websockets, styling, multiple todos

* sideload

* misc backend updates

* chore: comments

* prep for license and instructions display

* comment for Matt

* s9pk updates and 040 sdk

* fix dependency error for actions

* 0.4.0-beta.1

* beta.2

---------

Co-authored-by: Aiden McClelland <me@drbonez.dev>
Co-authored-by: waterplea <alexander@inkin.ru>
Co-authored-by: Aiden McClelland <3732071+dr-bonez@users.noreply.github.com>

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

@@ -1,6 +1,5 @@
 import { CommonModule } from '@angular/common'
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
-import { TuiLet } from '@taiga-ui/cdk'
 import { TuiProgress } from '@taiga-ui/kit'
 import { LogsWindowComponent } from './logs-window.component'
 
@@ -31,7 +30,7 @@ import { LogsWindowComponent } from './logs-window.component'
       padding: 1rem;
       margin: 1.5rem;
       text-align: center;
-      /* TODO: Theme */
+      // @TODO Theme
       background: #e0e0e0;
       color: #333;
       --tui-background-neutral-1: rgba(0, 0, 0, 0.1);
@@ -46,11 +45,11 @@ import { LogsWindowComponent } from './logs-window.component'
       text-align: left;
       overflow: hidden;
       border-radius: 2rem;
-      /* TODO: Theme */
+      // @TODO Theme
       background: #181818;
     }
   `,
-  imports: [CommonModule, LogsWindowComponent, TuiLet, TuiProgress],
+  imports: [CommonModule, LogsWindowComponent, TuiProgress],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class InitializingComponent {

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

@@ -1,7 +1,7 @@
 import { AfterViewInit, Directive, ElementRef, Inject } from '@angular/core'
 import { DOCUMENT } from '@angular/common'
 
-// TODO: Refactor to use `MutationObserver` so it works with dynamic content
+// @TODO Alex: Refactor to use `MutationObserver` so it works with dynamic content
 @Directive({
   selector: '[safeLinks]',
   standalone: true,

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

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

web/projects/shared/src/services/setup-logs.service.ts

@@ -1,5 +1,13 @@
 import { StaticClassProvider } from '@angular/core'
-import { bufferTime, defer, map, Observable, scan, switchMap } from 'rxjs'
+import {
+  bufferTime,
+  defer,
+  filter,
+  map,
+  Observable,
+  scan,
+  switchMap,
+} from 'rxjs'
 import { FollowLogsReq, FollowLogsRes, Log } from '../types/api'
 import { Constructor } from '../types/constructor'
 import { convertAnsi } from '../util/convert-ansi'
@@ -22,7 +30,8 @@ export function provideSetupLogsService(
 export class SetupLogsService extends Observable<readonly string[]> {
   private readonly log$ = defer(() => this.api.followServerLogs({})).pipe(
     switchMap(({ guid }) => this.api.openWebsocket$(guid)),
-    bufferTime(1000),
+    bufferTime(500),
+    filter(logs => !!logs.length),
     map(convertAnsi),
     scan((logs: readonly string[], log) => [...logs, log], []),
   )

web/projects/shared/src/util/format-progress.ts

@@ -1,22 +1,29 @@
-// @TODO get types from sdk
-type Progress = null | boolean | { done: number; total: number | null }
-type NamedProgress = { name: string; progress: Progress }
-type FullProgress = { overall: Progress; phases: Array<NamedProgress> }
+import { T } from '@start9labs/start-sdk'
 
-export function formatProgress({ phases, overall }: FullProgress): {
+export function formatProgress({ phases, overall }: T.FullProgress): {
   total: number
   message: string
 } {
   return {
     total: getDecimal(overall),
     message: phases
-      .filter(p => p.progress !== true && p.progress !== null)
-      .map(p => `${p.name}${getPhaseBytes(p.progress)}`)
+      .filter(
+        (
+          p,
+        ): p is {
+          name: string
+          progress: {
+            done: number
+            total: number | null
+          }
+        } => p.progress !== true && p.progress !== null,
+      )
+      .map(p => `<b>${p.name}</b>${getPhaseBytes(p.progress)}`)
       .join(', '),
   }
 }
 
-function getDecimal(progress: Progress): number {
+function getDecimal(progress: T.Progress): number {
   if (progress === true) {
     return 1
   } else if (!progress || !progress.total) {
@@ -26,7 +33,7 @@ function getDecimal(progress: Progress): number {
   }
 }
 
-function getPhaseBytes(progress: Progress): string {
+function getPhaseBytes(progress: T.Progress): string {
   return progress === true || !progress
     ? ''
     : `: (${progress.done}/${progress.total})`

web/projects/shared/src/util/misc.util.ts

@@ -55,3 +55,6 @@ export function toUrl(text: string | null | undefined): string {
 }
 
 export type WithId<T> = T & { id: string }
+
+export type OptionalProperty<T, K extends keyof T> = Omit<T, K> &
+  Partial<Pick<T, K>>