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>
2026-03-26 10:21:52 +00:00 · 2025-04-21 10:57:12 -06:00
parent b1621f6b34
commit 27272680a2
59 changed files with 515 additions and 510 deletions
--- a/web/README.md
+++ b/web/README.md
@@ -92,7 +92,24 @@ cp proxy.conf-sample.json proxy.conf.json
 npm run start:ui:proxy
 ```

-## Updating translations
+## Translations
+
+### Currently supported languages
+
+- Spanish
+- Polish
+- German
+<!-- - Korean
+- Russian
+- Japanese
+- Hebrew
+- Arabic
+- Mandarin
+- Hindi
+- Portuguese
+- French
+- Italian
+- Thai -->

 ### Adding a new translation

@@ -119,22 +136,20 @@ Translate the English dictionary below into `<language>`. Format the result as a

 #### Sample AI prompt

-Translate `<original>` into the languages below. Return the translations as a JSON object with the languages as keys.
+Translate the English dictionary below into the languages beneath the dictionary. Format the result as a javascript object with translated language as keys, mapping to a javascript object with the numeric values of the English dictionary as keys and the translations as values. These translations are for the web UI of StartOS, a graphical server operating system optimized for self-hosting. Comments may be included in the English dictionary to provide additional context.
+
+English dictionary:
+
+```
+'Hello': 420,
+'Goodby': 421
+```
+
+Languages:

 - Spanish
 - Polish
 - German
-<!-- - Korean
- Russian
- Japanese
- Hebrew
- Arabic
- Mandarin
- Hindi
- Portuguese
- French
- Italian
- Thai -->

 #### Adding to StartOS

--- a/web/projects/marketplace/src/components/menu/menu.component.html
+++ b/web/projects/marketplace/src/components/menu/menu.component.html
@@ -21,14 +21,7 @@
        [(query)]="query"
        (queryChange)="onQueryChange($event)"
      />
-      <button
-        tuiButton
-        type="button"
-        appearance="link"
-        (click)="toggleMenu(true)"
-        (tuiActiveZoneChange)="toggleMenu($event)"
-        [style.--tui-padding]="'1.2rem'"
-      >
+      <button tuiButton type="button" appearance="" (click)="open.set(true)">
        <store-icon
          size="42px"
          [style.height.px]="42"
@@ -37,46 +30,47 @@
          [marketplace]="iconConfig"
          [tuiSkeleton]="!registry"
        />
-        <nav
-          *tuiSidebar="open; direction: 'right'; autoWidth: true"
-          class="nav-mobile-sidebar divide-bar"
+        <tui-drawer
+          *tuiPopup="open()"
+          [overlay]="true"
+          (click.self)="open.set(false)"
        >
-          <div class="nav-mobile-sidebar-top">
-            <h1 [tuiSkeleton]="!registry">
-              {{ registry?.info?.name }}
-            </h1>
-            <button
-              [style.--tui-padding]="0"
-              tuiButton
-              type="button"
-              appearance="icon"
-              iconStart="@tui.x"
-              (tuiActiveZoneChange)="toggleMenu($event)"
-              (click)="toggleMenu(false)"
-            ></button>
-          </div>
-          <!-- change registry modal -->
-          <ng-content select="[slot=mobile]"></ng-content>
-          <div class="nav-mobile-sidebar-bottom divide-bar">
-            <marketplace-categories
-              [categories]="registry?.info?.categories"
-              [category]="query ? '' : category"
-              (categoryChange)="onCategoryChange($event); toggleMenu(false)"
-            />
-            <div>
-              <!-- link to store for brochure -->
-              <ng-content select="[slot=store-mobile]" />
-              <a
-                target="_blank"
-                rel="noreferrer"
-                href="https://docs.start9.com/0.3.5.x/developer-docs/"
-              >
-                <span>Package a service</span>
-                <tui-icon tuiAppearance="icon" icon="@tui.external-link" />
-              </a>
+          <nav class="nav-mobile-sidebar divide-bar">
+            <div class="nav-mobile-sidebar-top">
+              <h1 [style.margin]="0" [tuiSkeleton]="!registry">
+                {{ registry?.info?.name }}
+              </h1>
+              <button
+                tuiButton
+                type="button"
+                appearance="icon"
+                iconStart="@tui.x"
+                (click)="open.set(false)"
+              ></button>
            </div>
-          </div>
-        </nav>
+            <!-- change registry modal -->
+            <ng-content select="[slot=mobile]"></ng-content>
+            <div class="nav-mobile-sidebar-bottom divide-bar">
+              <marketplace-categories
+                [categories]="registry?.info?.categories"
+                [category]="query ? '' : category"
+                (categoryChange)="onCategoryChange($event); open.set(false)"
+              />
+              <div>
+                <!-- link to store for brochure -->
+                <ng-content select="[slot=store-mobile]" />
+                <a
+                  target="_blank"
+                  rel="noreferrer"
+                  href="https://docs.start9.com/0.3.5.x/developer-docs/"
+                >
+                  <span>Package a service</span>
+                  <tui-icon tuiAppearance="icon" icon="@tui.external-link" />
+                </a>
+              </div>
+            </div>
+          </nav>
+        </tui-drawer>
      </button>
    </div>
  </div>
--- a/web/projects/marketplace/src/components/menu/menu.component.module.ts
+++ b/web/projects/marketplace/src/components/menu/menu.component.module.ts
@@ -1,15 +1,19 @@
 import { CommonModule } from '@angular/common'
 import { NgModule } from '@angular/core'
 import { SharedPipesModule } from '@start9labs/shared'
-import { TuiSkeleton } from '@taiga-ui/kit'
-
-import { MenuComponent } from './menu.component'
-import { TuiLoader, TuiIcon, TuiButton, TuiAppearance } from '@taiga-ui/core'
-import { TuiActiveZone, TuiLet } from '@taiga-ui/cdk'
-import { TuiSidebar } from '@taiga-ui/addon-mobile'
-import { SearchModule } from '../../pages/list/search/search.module'
+import { TuiLet } from '@taiga-ui/cdk'
+import {
+  TuiAppearance,
+  TuiButton,
+  TuiIcon,
+  TuiLoader,
+  TuiPopup,
+} from '@taiga-ui/core'
+import { TuiDrawer, TuiSkeleton } from '@taiga-ui/kit'
 import { CategoriesModule } from '../../pages/list/categories/categories.module'
+import { SearchModule } from '../../pages/list/search/search.module'
 import { StoreIconComponentModule } from '../store-icon/store-icon.component.module'
+import { MenuComponent } from './menu.component'

@NgModule({
  imports: [
@@ -17,8 +21,6 @@ import { StoreIconComponentModule } from '../store-icon/store-icon.component.mod
    SharedPipesModule,
    SearchModule,
    CategoriesModule,
-    TuiActiveZone,
-    ...TuiSidebar,
    TuiLoader,
    TuiButton,
    CategoriesModule,
@@ -27,6 +29,8 @@ import { StoreIconComponentModule } from '../store-icon/store-icon.component.mod
    TuiAppearance,
    TuiIcon,
    TuiSkeleton,
+    TuiDrawer,
+    TuiPopup,
  ],
  declarations: [MenuComponent],
  exports: [MenuComponent],
--- a/web/projects/marketplace/src/components/menu/menu.component.scss
+++ b/web/projects/marketplace/src/components/menu/menu.component.scss
@@ -5,6 +5,12 @@
  padding: 0;
 }

+tui-drawer {
+  top: 0;
+  border-radius: 0;
+  background-color: rgb(var(--tw-color-zinc-700) / 0.9);
+}
+
 header {
  @include scrollbar-hidden();

@@ -131,12 +137,10 @@ header {
    }

    &-sidebar {
-      background-color: rgb(var(--tw-color-zinc-700) / 0.9);
-      width: 70vw;
      display: flex;
      flex-direction: column;
      height: 100%;
-      overflow: auto;
+      margin: -1.25rem -1.5rem;

      &-top {
        display: flex;
@@ -166,7 +170,7 @@ header {

        marketplace-categories {
          flex-grow: 1;
-          padding: 1.25rem 1.25rem 0px 1.25rem;
+          padding: 1.25rem 1.25rem 0 1.25rem;
        }

        ::ng-deep a {
@@ -191,7 +195,7 @@ header {

      .divide-bar > * + * {
        border-top-width: 1px;
-        border-bottom-width: 0px;
+        border-bottom-width: 0;
        border-color: rgb(113 113 122);
      }
    }
--- a/web/projects/marketplace/src/components/menu/menu.component.ts
+++ b/web/projects/marketplace/src/components/menu/menu.component.ts
@@ -4,6 +4,7 @@ import {
  inject,
  Input,
  OnDestroy,
+  signal,
 } from '@angular/core'
 import { MarketplaceConfig } from '@start9labs/shared'
 import { Subject, takeUntil } from 'rxjs'
@@ -27,7 +28,7 @@ export class MenuComponent implements OnDestroy {
  private readonly categoryService = inject(AbstractCategoryService)
  category = ''
  query = ''
-  open = false
+  readonly open = signal(false)

  ngOnInit() {
    this.categoryService
@@ -57,10 +58,6 @@ export class MenuComponent implements OnDestroy {
    this.categoryService.setQuery(query)
  }

-  toggleMenu(open: boolean): void {
-    this.open = open
-  }
-
  ngOnDestroy(): void {
    this.destroy$.next()
    this.destroy$.complete()
--- a/web/projects/marketplace/src/pages/show/additional/additional-item.component.ts
+++ b/web/projects/marketplace/src/pages/show/additional/additional-item.component.ts
@@ -1,29 +1,29 @@
 import { CommonModule } from '@angular/common'
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
 import { TuiIcon, TuiTitle } from '@taiga-ui/core'
-import { TuiLineClamp } from '@taiga-ui/kit'
+import { TuiFade } from '@taiga-ui/kit'

@Component({
  selector: 'marketplace-additional-item',
  template: `
-    <div class="item-container">
-      <label tuiTitle>
-        <span tuiSubtitle>{{ label }}</span>
-        <tui-line-clamp [content]="data" [linesLimit]="1" />
-      </label>
-      <tui-icon [icon]="icon" />
-    </div>
+    <label tuiTitle>
+      <span tuiSubtitle>{{ label }}</span>
+      <span tuiFade>{{ data }}</span>
+    </label>
+    <tui-icon [icon]="icon" />
  `,
  styles: [
    `
-      .item-container {
+      :host {
        display: flex;
        justify-content: space-between;
        align-items: center;
+        gap: 0.5rem;
        padding: 0.75rem 0.25rem;
+        white-space: nowrap;

        &:hover {
-          background-color: rgb(113 113 122 / 0.1);
+          background-color: var(--tui-background-neutral-1);
        }

        [tuiSubtitle] {
@@ -34,16 +34,11 @@ import { TuiLineClamp } from '@taiga-ui/kit'
          opacity: 0.7;
        }
      }
-
-      ::ng-deep .t-text {
-        font-family: 'Montserrat';
-        font-weight: 600;
-      }
    `,
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
  standalone: true,
-  imports: [CommonModule, TuiLineClamp, TuiIcon, TuiTitle],
+  imports: [CommonModule, TuiIcon, TuiTitle, TuiFade],
 })
 export class MarketplaceAdditionalItemComponent {
  @Input({ required: true })
--- a/web/projects/marketplace/src/pages/show/additional/additional.component.scss
+++ b/web/projects/marketplace/src/pages/show/additional/additional.component.scss
@@ -7,6 +7,7 @@
 .detail-container {
  display: grid;
  grid-auto-flow: row;
+  grid-auto-columns: minmax(0, 1fr);

  & > * + * {
    border-top-width: 1px;
--- a/web/projects/shared/src/components/markdown.component.ts
+++ b/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(
--- a/web/projects/shared/src/directives/safe-links.directive.ts
+++ b/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')
+        })
+    })
 }
--- a/web/projects/shared/src/i18n/dictionaries/german.ts
+++ b/web/projects/shared/src/i18n/dictionaries/german.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
--- a/web/projects/shared/src/i18n/dictionaries/english.ts
+++ b/web/projects/shared/src/i18n/dictionaries/english.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
--- a/web/projects/shared/src/i18n/dictionaries/spanish.ts
+++ b/web/projects/shared/src/i18n/dictionaries/spanish.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
--- a/web/projects/shared/src/i18n/dictionaries/polish.ts
+++ b/web/projects/shared/src/i18n/dictionaries/polish.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
--- a/web/projects/shared/src/i18n/i18n.pipe.ts
+++ b/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({
--- a/web/projects/shared/src/i18n/i18n.providers.ts
+++ b/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
      }
--- a/web/projects/shared/src/services/error.service.ts
+++ b/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',
 })
--- a/web/projects/shared/styles/taiga.scss
+++ b/web/projects/shared/styles/taiga.scss
@@ -134,11 +134,6 @@ tui-dropdown[data-appearance='start-os'][data-appearance='start-os'] {
  }
 }

-[tuiSidebar] > div.t-wrapper {
-  backdrop-filter: blur(1rem);
-  background: rgb(34 34 34 / 80%);
-}
-
 // @TODO Alex: Move to Taiga UI
 a[tuiIconButton]:not([href]) {
  pointer-events: none;
--- a/web/projects/ui/src/app/app.component.html
+++ b/web/projects/ui/src/app/app.component.html
@@ -1,5 +0,0 @@
-<tui-root tuiTheme="dark" [class.offline]="offline$ | async">
-  <router-outlet />
-  <toast-container />
-  <sidebar-host ngProjectAs="tuiOverContent" />
-</tui-root>
--- a/web/projects/ui/src/app/app.component.scss
+++ b/web/projects/ui/src/app/app.component.scss
@@ -1,16 +0,0 @@
-@import '@taiga-ui/core/styles/taiga-ui-local';
-
-:host {
-  display: block;
-  height: 100%;
-}
-
-tui-root {
-  @include transition(filter);
-  height: 100%;
-  font-family: 'Open Sans', sans-serif;
-
-  &.offline {
-    filter: saturate(0.75) contrast(0.85);
-  }
-}
--- a/web/projects/ui/src/app/app.component.ts
+++ b/web/projects/ui/src/app/app.component.ts
@@ -1,23 +1,36 @@
-import { Component, inject, OnInit } from '@angular/core'
+import { Component, inject } from '@angular/core'
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop'
 import { Title } from '@angular/platform-browser'
 import { i18nService } from '@start9labs/shared'
 import { PatchDB } from 'patch-db-client'
-import { combineLatest, map, merge, startWith } from 'rxjs'
-import { ConnectionService } from './services/connection.service'
+import { merge } from 'rxjs'
 import { PatchDataService } from './services/patch-data.service'
 import { DataModel } from './services/patch-db/data-model'
 import { PatchMonitorService } from './services/patch-monitor.service'

@Component({
  selector: 'app-root',
-  templateUrl: 'app.component.html',
-  styleUrls: ['app.component.scss'],
+  template: `
+    <tui-root tuiTheme="dark">
+      <router-outlet />
+      <toast-container />
+    </tui-root>
+  `,
+  styles: `
+    :host {
+      display: block;
+      height: 100%;
+    }
+
+    tui-root {
+      height: 100%;
+      font-family: 'Open Sans', sans-serif;
+    }
+  `,
 })
-export class AppComponent implements OnInit {
+export class AppComponent {
  private readonly title = inject(Title)
  private readonly i18n = inject(i18nService)
-  private readonly patch = inject<PatchDB<DataModel>>(PatchDB)

  readonly subscription = merge(
    inject(PatchDataService),
@@ -26,23 +39,11 @@ export class AppComponent implements OnInit {
    .pipe(takeUntilDestroyed())
    .subscribe()

-  readonly offline$ = combineLatest([
-    inject(ConnectionService),
-    this.patch
-      .watch$('serverInfo', 'statusInfo')
-      .pipe(startWith({ restarting: false, shuttingDown: false })),
-  ]).pipe(
-    map(
-      ([connected, { restarting, shuttingDown }]) =>
-        connected && (restarting || shuttingDown),
-    ),
-    startWith(true),
-  )
-
-  ngOnInit() {
-    this.patch.watch$('ui').subscribe(({ name, language }) => {
+  readonly ui = inject<PatchDB<DataModel>>(PatchDB)
+    .watch$('ui')
+    .pipe(takeUntilDestroyed())
+    .subscribe(({ name, language }) => {
      this.title.setTitle(name || 'StartOS')
      this.i18n.setLanguage(language || 'english')
    })
-  }
 }
--- a/web/projects/ui/src/app/app.module.ts
+++ b/web/projects/ui/src/app/app.module.ts
@@ -3,7 +3,6 @@ import { NgModule } from '@angular/core'
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
 import { ServiceWorkerModule } from '@angular/service-worker'
 import { TuiRoot } from '@taiga-ui/core'
-import { SidebarHostComponent } from 'src/app/components/sidebar-host.component'
 import { ToastContainerComponent } from 'src/app/components/toast-container.component'
 import { environment } from '../environments/environment'
 import { AppComponent } from './app.component'
@@ -24,7 +23,6 @@ import { RoutingModule } from './routing.module'
      // or after 30 seconds (whichever comes first).
      registrationStrategy: 'registerWhenStable:30000',
    }),
-    SidebarHostComponent,
  ],
  providers: APP_PROVIDERS,
  bootstrap: [AppComponent],
--- a/web/projects/ui/src/app/app.providers.ts
+++ b/web/projects/ui/src/app/app.providers.ts
@@ -19,7 +19,7 @@ import {
  tuiDropdownOptionsProvider,
  tuiNumberFormatProvider,
 } from '@taiga-ui/core'
-import { NG_EVENT_PLUGINS } from '@taiga-ui/event-plugins'
+import { provideEventPlugins } from '@taiga-ui/event-plugins'
 import {
  TUI_DATE_TIME_VALUE_TRANSFORMER,
  TUI_DATE_VALUE_TRANSFORMER,
@@ -48,7 +48,7 @@ const {
 } = require('../../../../config.json') as WorkspaceConfig

 export const APP_PROVIDERS: Provider[] = [
-  NG_EVENT_PLUGINS,
+  provideEventPlugins(),
  I18N_PROVIDERS,
  FilterPackagesPipe,
  UntypedFormBuilder,
--- a/web/projects/ui/src/app/components/refresh-alert.component.ts
+++ b/web/projects/ui/src/app/components/refresh-alert.component.ts
@@ -1,73 +1,94 @@
-import { AsyncPipe } from '@angular/common'
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
+import { toSignal } from '@angular/core/rxjs-interop'
 import { SwUpdate } from '@angular/service-worker'
-import { Exver, LoadingService } from '@start9labs/shared'
+import { WA_WINDOW } from '@ng-web-apis/common'
+import { LoadingService } from '@start9labs/shared'
+import { Version } from '@start9labs/start-sdk'
+import { TuiResponsiveDialog } from '@taiga-ui/addon-mobile'
 import { TuiAutoFocus } from '@taiga-ui/cdk'
-import { TuiButton, TuiDialog } from '@taiga-ui/core'
+import { TuiButton } from '@taiga-ui/core'
 import { PatchDB } from 'patch-db-client'
-import { debounceTime, endWith, map, merge, Subject } from 'rxjs'
+import { distinctUntilChanged, map, merge, Subject } from 'rxjs'
 import { ConfigService } from 'src/app/services/config.service'
 import { DataModel } from 'src/app/services/patch-db/data-model'

-// @TODO Alex
@Component({
  standalone: true,
  selector: 'refresh-alert',
  template: `
-    <!--    <ng-template-->
-    <!--      [tuiDialog]="show$ | async"-->
-    <!--      [tuiDialogOptions]="{ label: 'Refresh Needed', size: 's' }"-->
-    <!--      (tuiDialogChange)="onDismiss()"-->
-    <!--    >-->
-    <!--      Your user interface is cached and out of date. Hard refresh the page to-->
-    <!--      get the latest UI.-->
-    <!--      <ul>-->
-    <!--        <li>-->
-    <!--          <b>On Mac</b>-->
-    <!--          : cmd + shift + R-->
-    <!--        </li>-->
-    <!--        <li>-->
-    <!--          <b>On Linux/Windows</b>-->
-    <!--          : ctrl + shift + R-->
-    <!--        </li>-->
-    <!--      </ul>-->
-    <!--      <button-->
-    <!--        tuiButton-->
-    <!--        tuiAutoFocus-->
-    <!--        appearance="secondary"-->
-    <!--        style="float: right"-->
-    <!--        (click)="onDismiss()"-->
-    <!--      >-->
-    <!--        Ok-->
-    <!--      </button>-->
-    <!--    </ng-template>-->
+    <ng-template
+      [tuiResponsiveDialog]="show()"
+      [tuiResponsiveDialogOptions]="{ label: 'Refresh Needed', size: 's' }"
+      (tuiResponsiveDialogChange)="dismiss$.next()"
+    >
+      @if (isPwa) {
+        <p>
+          Your user interface is cached and out of date. Attempt to reload the
+          PWA using the button below. If you continue to see this message,
+          uninstall and reinstall the PWA.
+        </p>
+        <button
+          tuiButton
+          tuiAutoFocus
+          appearance="secondary"
+          style="float: right"
+          [tuiAppearanceFocus]="false"
+          (click)="pwaReload()"
+        >
+          Reload
+        </button>
+      } @else {
+        Your user interface is cached and out of date. Hard refresh the page to
+        get the latest UI.
+        <ul>
+          <li>
+            <b>On Mac</b>
+            : cmd + shift + R
+          </li>
+          <li>
+            <b>On Linux/Windows</b>
+            : ctrl + shift + R
+          </li>
+        </ul>
+        <button
+          tuiButton
+          tuiAutoFocus
+          appearance="secondary"
+          style="float: right"
+          [tuiAppearanceFocus]="false"
+          (click)="dismiss$.next()"
+        >
+          Ok
+        </button>
+      }
+    </ng-template>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [TuiDialog, AsyncPipe, TuiButton, TuiAutoFocus],
+  imports: [TuiResponsiveDialog, TuiButton, TuiAutoFocus],
 })
 export class RefreshAlertComponent {
+  private readonly win = inject(WA_WINDOW)
  private readonly updates = inject(SwUpdate)
  private readonly loader = inject(LoadingService)
-  private readonly exver = inject(Exver)
-  private readonly config = inject(ConfigService)
-  private readonly dismiss$ = new Subject<boolean>()
+  private readonly version = Version.parse(inject(ConfigService).version)

-  readonly show$ = merge(
-    this.dismiss$,
-    inject<PatchDB<DataModel>>(PatchDB)
-      .watch$('serverInfo', 'version')
-      .pipe(
-        map(version => !!this.exver.compareExver(this.config.version, version)),
-        endWith(false),
-      ),
-  ).pipe(debounceTime(0))
+  readonly dismiss$ = new Subject<void>()
+  readonly isPwa = this.win.matchMedia('(display-mode: standalone)').matches

-  // @TODO use this like we did on 0344
-  onPwa = false
-
-  ngOnInit() {
-    this.onPwa = window.matchMedia('(display-mode: standalone)').matches
-  }
+  readonly show = toSignal(
+    merge(
+      this.dismiss$.pipe(map(() => false)),
+      inject<PatchDB<DataModel>>(PatchDB)
+        .watch$('serverInfo', 'version')
+        .pipe(
+          distinctUntilChanged(),
+          map(v => this.version.compare(Version.parse(v)) !== 'equal'),
+        ),
+    ),
+    {
+      initialValue: false,
+    },
+  )

  async pwaReload() {
    const loader = this.loader.open('Reloading PWA').subscribe()
@@ -80,11 +101,7 @@ export class RefreshAlertComponent {
    } finally {
      loader.unsubscribe()
      // always reload, as this resolves most out of sync cases
-      window.location.reload()
+      this.win.location.reload()
    }
  }
-
-  onDismiss() {
-    this.dismiss$.next(false)
-  }
 }
--- a/web/projects/ui/src/app/components/sidebar-host.component.ts
+++ b/web/projects/ui/src/app/components/sidebar-host.component.ts
@@ -1,28 +0,0 @@
-import { TuiDropdownService } from '@taiga-ui/core'
-import {
-  ChangeDetectionStrategy,
-  Component,
-  Directive,
-  Injectable,
-} from '@angular/core'
-import { TuiPortals, TuiPortalService } from '@taiga-ui/cdk'
-
-@Injectable({ providedIn: `root` })
-export class SidebarService extends TuiPortalService {}
-
-@Directive({
-  selector: '[tuiSidebar]',
-  standalone: true,
-  providers: [{ provide: TuiDropdownService, useExisting: SidebarService }],
-})
-export class SidebarDirective {}
-
-@Component({
-  selector: 'sidebar-host',
-  template: '<ng-container #viewContainer></ng-container>',
-  styles: [':host { position: fixed; top: 0; }'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  standalone: true,
-  providers: [{ provide: TuiPortalService, useExisting: SidebarService }],
-})
-export class SidebarHostComponent extends TuiPortals {}
--- a/web/projects/ui/src/app/routes/diagnostic/diagnostic.module.ts
+++ b/web/projects/ui/src/app/routes/diagnostic/diagnostic.module.ts
@@ -9,8 +9,7 @@ const ROUTES: Routes = [
  },
  {
    path: 'logs',
-    loadChildren: () =>
-      import('./logs/logs.module').then(m => m.LogsPageModule),
+    loadComponent: () => import('./logs.component'),
  },
 ]

--- a/web/projects/ui/src/app/routes/diagnostic/logs.component.ts
+++ b/web/projects/ui/src/app/routes/diagnostic/logs.component.ts
@@ -1,12 +1,43 @@
 import { Component, ElementRef, inject, OnInit, ViewChild } from '@angular/core'
-import { INTERSECTION_ROOT } from '@ng-web-apis/intersection-observer'
+import { RouterLink } from '@angular/router'
+import {
+  WA_INTERSECTION_ROOT,
+  WaIntersectionObserver,
+} from '@ng-web-apis/intersection-observer'
+import { WaMutationObserver } from '@ng-web-apis/mutation-observer'
 import { convertAnsi, ErrorService } from '@start9labs/shared'
-import { TuiScrollbar } from '@taiga-ui/core'
+import { tuiProvide } from '@taiga-ui/cdk'
+import { TuiButton, TuiLoader, TuiScrollbar } from '@taiga-ui/core'
+import { NgDompurifyModule } from '@tinkoff/ng-dompurify'
 import { ApiService } from 'src/app/services/api/embassy-api.service'

@Component({
-  selector: 'logs',
-  templateUrl: './logs.page.html',
+  standalone: true,
+  template: `
+    <a
+      routerLink="../"
+      tuiButton
+      iconStart="@tui.chevron-left"
+      appearance="icon"
+      [style.align-self]="'flex-start'"
+    >
+      Back
+    </a>
+    <tui-scrollbar childList subtree (waMutationObserver)="restoreScroll()">
+      <section
+        class="top"
+        waIntersectionObserver
+        (waIntersectionObservee)="onTop(!!$event[0]?.isIntersecting)"
+      >
+        @if (loading) {
+          <tui-loader textContent="Loading logs" />
+        }
+      </section>
+      @for (log of logs; track log) {
+        <pre [innerHTML]="log | dompurify"></pre>
+      }
+    </tui-scrollbar>
+  `,
  styles: `
    :host {
      max-height: 100vh;
@@ -18,14 +49,18 @@ import { ApiService } from 'src/app/services/api/embassy-api.service'
      background: var(--tui-background-base);
    }
  `,
-  providers: [
-    {
-      provide: INTERSECTION_ROOT,
-      useExisting: ElementRef,
-    },
+  imports: [
+    RouterLink,
+    WaIntersectionObserver,
+    WaMutationObserver,
+    NgDompurifyModule,
+    TuiButton,
+    TuiLoader,
+    TuiScrollbar,
  ],
+  providers: [tuiProvide(WA_INTERSECTION_ROOT, ElementRef)],
 })
-export class LogsPage implements OnInit {
+export default class LogsPage implements OnInit {
  @ViewChild(TuiScrollbar, { read: ElementRef })
  private readonly scrollbar?: ElementRef<HTMLElement>
  private readonly api = inject(ApiService)
--- a/web/projects/ui/src/app/routes/diagnostic/logs/logs.module.ts
+++ b/web/projects/ui/src/app/routes/diagnostic/logs/logs.module.ts
@@ -1,32 +0,0 @@
-import { CommonModule } from '@angular/common'
-import { NgModule } from '@angular/core'
-import { RouterModule, Routes } from '@angular/router'
-import { WaIntersectionObserver } from '@ng-web-apis/intersection-observer'
-import { WaMutationObserver } from '@ng-web-apis/mutation-observer'
-import { TuiButton, TuiLoader, TuiScrollbar } from '@taiga-ui/core'
-import { TuiBadge } from '@taiga-ui/kit'
-import { NgDompurifyModule } from '@tinkoff/ng-dompurify'
-import { LogsPage } from './logs.page'
-
-const ROUTES: Routes = [
-  {
-    path: '',
-    component: LogsPage,
-  },
-]
-
-@NgModule({
-  imports: [
-    CommonModule,
-    RouterModule.forChild(ROUTES),
-    ...WaIntersectionObserver,
-    WaMutationObserver,
-    NgDompurifyModule,
-    TuiBadge,
-    TuiButton,
-    TuiLoader,
-    TuiScrollbar,
-  ],
-  declarations: [LogsPage],
-})
-export class LogsPageModule {}
--- a/web/projects/ui/src/app/routes/diagnostic/logs/logs.page.html
+++ b/web/projects/ui/src/app/routes/diagnostic/logs/logs.page.html
@@ -1,23 +0,0 @@
-<a
-  routerLink="../"
-  tuiButton
-  iconStart="@tui.chevron-left"
-  appearance="icon"
-  [style.align-self]="'flex-start'"
->
-  Back
-</a>
-<tui-scrollbar childList subtree (waMutationObserver)="restoreScroll()">
-  <section
-    class="top"
-    waIntersectionObserver
-    (waIntersectionObservee)="onTop(!!$event[0]?.isIntersecting)"
-  >
-    @if (loading) {
-    <tui-loader textContent="Loading logs" />
-    }
-  </section>
-  @for (log of logs; track log) {
-  <pre [innerHTML]="log | dompurify"></pre>
-  }
-</tui-scrollbar>
--- a/web/projects/ui/src/app/routes/portal/components/form.component.ts
+++ b/web/projects/ui/src/app/routes/portal/components/form.component.ts
@@ -80,7 +80,7 @@ export interface FormContext<T> {
        display: flex;
        justify-content: flex-end;
        padding: 1rem 0;
-        margin: 1rem 0 -1rem;
+        margin: 1rem -1px -1rem;
        gap: 1rem;
        background: var(--tui-background-elevation-1);
        border-top: 1px solid var(--tui-background-base-alt);
--- a/web/projects/ui/src/app/routes/portal/components/form/control.ts
+++ b/web/projects/ui/src/app/routes/portal/components/form/control.ts
@@ -17,7 +17,6 @@ export abstract class Control<
    return this.control.spec
  }

-  // @TODO Alex: Properly handle already set immutable value
  get readOnly(): boolean {
    return (
      !!this.value && !!this.control.control?.pristine && this.control.immutable
--- a/web/projects/ui/src/app/routes/portal/components/form/form-toggle/form-toggle.component.ts
+++ b/web/projects/ui/src/app/routes/portal/components/form/form-toggle/form-toggle.component.ts
@@ -5,7 +5,7 @@ import { Control } from '../control'
@Component({
  selector: 'form-toggle',
  templateUrl: './form-toggle.component.html',
-  host: { style: 'display: flex' },
+  host: { class: 'g-toggle' },
 })
 export class FormToggleComponent extends Control<
  IST.ValueSpecToggle,
--- a/web/projects/ui/src/app/routes/portal/components/form/form-union/form-union.component.ts
+++ b/web/projects/ui/src/app/routes/portal/components/form/form-union/form-union.component.ts
@@ -24,27 +24,28 @@ import { tuiPure } from '@taiga-ui/cdk'
 })
 export class FormUnionComponent implements OnChanges {
  @Input({ required: true })
-  spec!: IST.ValueSpecUnion
+  spec!: IST.ValueSpecUnion & { others?: Record<string, any> }

  selectSpec!: IST.ValueSpecSelect

  private readonly form = inject(FormGroupName)
  private readonly formService = inject(FormService)
-  private readonly values: Record<string, any> = {}

  get union(): string {
    return this.form.value.selection
  }

+  // OTHER?
  @tuiPure
  onUnion(union: string) {
-    this.values[this.union] = this.form.control.controls['value']?.value
+    this.spec.others = this.spec.others || {}
+    this.spec.others[this.union] = this.form.control.controls['value']?.value
    this.form.control.setControl(
      'value',
      this.formService.getFormGroup(
        union ? this.spec.variants[union]?.spec || {} : {},
        [],
-        this.values[union],
+        this.spec.others[union],
      ),
      {
        emitEvent: false,
--- a/web/projects/ui/src/app/routes/portal/components/header/header.component.ts
+++ b/web/projects/ui/src/app/routes/portal/components/header/header.component.ts
@@ -31,6 +31,9 @@ import { HeaderStatusComponent } from './status.component'
        border-radius: var(--bumper);
        margin: var(--bumper);
        overflow: hidden;
+        filter: grayscale(1) brightness(0.75);
+
+        @include transition(filter);

        .mobile {
          display: none;
@@ -88,10 +91,12 @@ import { HeaderStatusComponent } from './status.component'

        &:has([data-status='neutral']) {
          --status: var(--tui-status-neutral);
+          filter: none;
        }

        &:has([data-status='success']) {
          --status: transparent;
+          filter: none;
        }
      }

--- a/web/projects/ui/src/app/routes/portal/components/header/navigation.component.ts
+++ b/web/projects/ui/src/app/routes/portal/components/header/navigation.component.ts
@@ -25,6 +25,7 @@ import { getMenu } from 'src/app/utils/system-utilities'
        tuiHintDirection="bottom"
        [tuiHintShowDelay]="1000"
        [routerLink]="item.routerLink"
+        [class.link_system]="item.routerLink === '/portal/system'"
        [tuiHint]="!rla.isActive ? item.name : ''"
      >
        <tui-badged-content
@@ -121,6 +122,10 @@ import { getMenu } from 'src/app/utils/system-utilities'
          padding: 0 1rem;
          margin: 0 calc(var(--bumper) + 0.5rem);

+          &.link_system {
+            pointer-events: none;
+          }
+
          + .link::before {
            left: -0.5rem;
            border-top-left-radius: var(--bumper);
--- a/web/projects/ui/src/app/routes/portal/components/logs/logs.component.html
+++ b/web/projects/ui/src/app/routes/portal/components/logs/logs.component.html
@@ -33,7 +33,7 @@
      }
    </section>
  } @else {
-    <tui-loader [textContent]="'Loading logs' | i18n" [style.margin-top.rem]="5" />
+    <tui-loader class="loader" [textContent]="'Loading logs' | i18n" />
  }

  <section
@@ -53,7 +53,7 @@
    iconStart="@tui.circle-arrow-down"
    (click)="setScroll(true); scrollToBottom()"
  >
-    {{'Scroll to bottom' | i18n}}
+    {{ 'Scroll to bottom' | i18n }}
  </button>
  <button
    tuiButton
@@ -61,6 +61,6 @@
    iconStart="@tui.download"
    [logsDownload]="fetchLogs"
  >
-    {{'Download' | i18n}}
+    {{ 'Download' | i18n }}
  </button>
 </footer>
--- a/web/projects/ui/src/app/routes/portal/components/logs/logs.component.scss
+++ b/web/projects/ui/src/app/routes/portal/components/logs/logs.component.scss
@@ -21,6 +21,11 @@
  margin-bottom: -5rem;
 }

+.loader {
+  position: absolute;
+  inset: 0;
+}
+
 .bottom {
  height: 3rem;
 }
--- a/web/projects/ui/src/app/routes/portal/portal.component.ts
+++ b/web/projects/ui/src/app/routes/portal/portal.component.ts
@@ -20,6 +20,8 @@ import { HeaderComponent } from './components/header/header.component'
  `,
  styles: [
    `
+      @import '@taiga-ui/core/styles/taiga-ui-local';
+
      :host {
        height: 100%;
        display: flex;
@@ -32,6 +34,14 @@ import { HeaderComponent } from './components/header/header.component'
        flex: 1;
        overflow: hidden;
        margin: 0 var(--bumper) var(--bumper);
+        filter: grayscale(1) brightness(0.75);
+
+        @include transition(filter);
+
+        header:has([data-status='success']) + &,
+        header:has([data-status='neutral']) + & {
+          filter: none;
+        }
      }
    `,
  ],
--- a/web/projects/ui/src/app/routes/portal/routes/marketplace/components/controls.component.ts
+++ b/web/projects/ui/src/app/routes/portal/routes/marketplace/components/controls.component.ts
@@ -4,7 +4,6 @@ import {
  ChangeDetectionStrategy,
  Component,
  inject,
-  input,
  Input,
 } from '@angular/core'
 import { Router } from '@angular/router'
@@ -76,7 +75,7 @@ import { ApiService } from 'src/app/services/api/embassy-api.service'
      <button
        tuiButton
        type="button"
-        appearance="outline-grayscale"
+        appearance="secondary-grayscale"
        (click)="showService()"
      >
        {{ 'View Installed' | i18n }}
@@ -180,8 +179,9 @@ export class MarketplaceControlsComponent {
  private async installOrUpload(url: string | null) {
    if (this.file) {
      await this.upload()
+      this.router.navigate(['/portal', 'services'])
    } else if (url) {
-      this.install(url)
+      await this.install(url)
    }
  }

--- a/web/projects/ui/src/app/routes/portal/routes/marketplace/components/sidebars.component.ts
+++ b/web/projects/ui/src/app/routes/portal/routes/marketplace/components/sidebars.component.ts
@@ -1,26 +0,0 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core'
-import { TuiPortals, TuiPortalService } from '@taiga-ui/cdk'
-import { MarketplaceSidebarService } from '../services/sidebar.service'
-
-@Component({
-  standalone: true,
-  selector: 'marketplace-sidebars',
-  template: '<ng-container #viewContainer></ng-container>',
-  styles: [
-    `
-      :host {
-        position: fixed;
-        inset: 3.5rem 0 0;
-        pointer-events: none;
-      }
-    `,
-  ],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [
-    {
-      provide: TuiPortalService,
-      useExisting: MarketplaceSidebarService,
-    },
-  ],
-})
-export class MarketplaceSidebarsComponent extends TuiPortals {}
--- a/web/projects/ui/src/app/routes/portal/routes/marketplace/components/tile.component.ts
+++ b/web/projects/ui/src/app/routes/portal/routes/marketplace/components/tile.component.ts
@@ -10,9 +10,9 @@ import { toObservable, toSignal } from '@angular/core/rxjs-interop'
 import { ActivatedRoute, Router } from '@angular/router'
 import { ItemModule, MarketplacePkg } from '@start9labs/marketplace'
 import { Exver } from '@start9labs/shared'
-import { TuiSidebar } from '@taiga-ui/addon-mobile'
-import { TuiAutoFocus, TuiClickOutside } from '@taiga-ui/cdk'
-import { TuiButton, TuiDropdownService } from '@taiga-ui/core'
+import { TuiAutoFocus } from '@taiga-ui/cdk'
+import { TuiButton, TuiDropdownService, TuiPopup } from '@taiga-ui/core'
+import { TuiDrawer } from '@taiga-ui/kit'
 import { PatchDB } from 'patch-db-client'
 import {
  debounceTime,
@@ -35,40 +35,48 @@ import { MarketplaceControlsComponent } from './controls.component'
  selector: 'marketplace-tile',
  template: `
    <marketplace-item [pkg]="pkg()" (click)="toggle(true)">
-      <marketplace-preview
-        *tuiSidebar="!!open(); direction: 'right'; autoWidth: true"
-        [pkgId]="pkg().id"
-        class="preview-wrapper"
-        (tuiClickOutside)="toggle(false)"
+      <tui-drawer
+        *tuiPopup="open()"
+        [overlay]="true"
+        (click.self)="toggle(false)"
      >
-        <button
-          tuiAutoFocus
-          slot="close"
-          size="xs"
-          class="close-button"
-          tuiIconButton
-          type="button"
-          appearance="icon"
-          iconStart="@tui.x"
-          [tuiAppearanceFocus]="false"
-          (click)="toggle(false)"
-        ></button>
-        <marketplace-controls
-          slot="controls"
-          class="controls-wrapper"
-          [pkg]="pkg()"
-          [localPkg]="local$ | async"
-          [localFlavor]="!!(flavor$ | async)"
-        />
-      </marketplace-preview>
+        <marketplace-preview [pkgId]="pkg().id" class="preview-wrapper">
+          <button
+            tuiAutoFocus
+            slot="close"
+            size="xs"
+            class="close-button"
+            tuiIconButton
+            type="button"
+            appearance="icon"
+            iconStart="@tui.x"
+            [tuiAppearanceFocus]="false"
+            (click)="toggle(false)"
+          ></button>
+          <marketplace-controls
+            slot="controls"
+            class="controls-wrapper"
+            [pkg]="pkg()"
+            [localPkg]="local$ | async"
+            [localFlavor]="!!(flavor$ | async)"
+          />
+        </marketplace-preview>
+      </tui-drawer>
    </marketplace-item>
  `,
  styles: [
    `
      :host {
+        cursor: pointer;
        animation: animateIn 400ms calc(var(--animation-order) * 200ms) both;
      }

+      tui-drawer {
+        top: 0;
+        width: 28rem;
+        border-radius: 0;
+      }
+
      @keyframes animateIn {
        from {
          opacity: 0;
@@ -119,9 +127,9 @@ import { MarketplaceControlsComponent } from './controls.component'
    CommonModule,
    ItemModule,
    TuiAutoFocus,
-    TuiClickOutside,
-    TuiSidebar,
    TuiButton,
+    TuiPopup,
+    TuiDrawer,
    MarketplaceControlsComponent,
    MarketplacePreviewComponent,
  ],
--- a/web/projects/ui/src/app/routes/portal/routes/marketplace/marketplace.component.ts
+++ b/web/projects/ui/src/app/routes/portal/routes/marketplace/marketplace.component.ts
@@ -7,6 +7,7 @@ import {
  FilterPackagesPipe,
  FilterPackagesPipeModule,
 } from '@start9labs/marketplace'
+import { i18nPipe } from '@start9labs/shared'
 import { TuiScrollbar } from '@taiga-ui/core'
 import { PatchDB } from 'patch-db-client'
 import { tap, withLatestFrom } from 'rxjs'
@@ -15,9 +16,7 @@ import { DataModel } from 'src/app/services/patch-db/data-model'
 import { TitleDirective } from 'src/app/services/title.service'
 import { MarketplaceMenuComponent } from './components/menu.component'
 import { MarketplaceNotificationComponent } from './components/notification.component'
-import { MarketplaceSidebarsComponent } from './components/sidebars.component'
 import { MarketplaceTileComponent } from './components/tile.component'
-import { i18nPipe } from '@start9labs/shared'

@Component({
  standalone: true,
@@ -56,7 +55,6 @@ import { i18nPipe } from '@start9labs/shared'
        </div>
      </div>
    </tui-scrollbar>
-    <marketplace-sidebars />
  `,
  host: { class: 'g-page' },
  styles: [
@@ -153,7 +151,6 @@ import { i18nPipe } from '@start9labs/shared'
    MarketplaceTileComponent,
    MarketplaceMenuComponent,
    MarketplaceNotificationComponent,
-    MarketplaceSidebarsComponent,
    TuiScrollbar,
    FilterPackagesPipeModule,
    TitleDirective,
--- a/web/projects/ui/src/app/routes/portal/routes/marketplace/modals/preview.component.ts
+++ b/web/projects/ui/src/app/routes/portal/routes/marketplace/modals/preview.component.ts
@@ -21,6 +21,7 @@ import {
  DialogService,
  Exver,
  i18nPipe,
+  MARKDOWN,
  SharedPipesModule,
 } from '@start9labs/shared'
 import { TuiButton, TuiDialogContext, TuiLoader } from '@taiga-ui/core'
@@ -105,14 +106,7 @@ import { MarketplaceService } from 'src/app/services/marketplace.service'
      .outer-container {
        display: flex;
        flex-direction: column;
-        padding: 1.75rem;
-        min-width: 100%;
        height: calc(100vh - var(--portal-header-height) - var(--bumper));
-        margin-top: 5rem;
-
-        @media (min-width: 768px) {
-          margin-top: 0;
-        }
      }

      .inner-container {
@@ -226,8 +220,21 @@ export class MarketplacePreviewComponent {
    this.router.navigate([], { queryParams: { id } })
  }

-  onStatic(type: 'license' | 'instructions') {
-    // @TODO Alex need to display License or Instructions. This requires an API request, check out next/minor
+  onStatic(asset: 'license' | 'instructions') {
+    const label = asset === 'license' ? 'License' : 'Instructions'
+    const content = this.pkg$.pipe(
+      filter(Boolean),
+      switchMap(pkg =>
+        this.marketplaceService.fetchStatic$(
+          pkg,
+          asset === 'license' ? 'LICENSE.md' : 'instructions.md',
+        ),
+      ),
+    )
+
+    this.dialog
+      .openComponent(MARKDOWN, { label, size: 'l', data: { content } })
+      .subscribe()
  }

  selectVersion(
--- a/web/projects/ui/src/app/routes/portal/routes/marketplace/services/alerts.service.ts
+++ b/web/projects/ui/src/app/routes/portal/routes/marketplace/services/alerts.service.ts
@@ -64,24 +64,25 @@ export class MarketplaceAlertsService {
  }

  async alertInstall({ alerts }: MarketplacePkgBase): Promise<boolean> {
-    const content = alerts.install as i18nKey
+    const content = alerts.install

    return (
-      !!content &&
-      new Promise(resolve => {
-        this.dialog
-          .openConfirm<boolean>({
-            label: 'Alert',
-            size: 's',
-            data: {
-              content,
-              yes: 'Install',
-              no: 'Cancel',
-            },
-          })
-          .pipe(defaultIfEmpty(false))
-          .subscribe(response => resolve(response))
-      })
+      !content ||
+      (!!content &&
+        new Promise(resolve => {
+          this.dialog
+            .openConfirm<boolean>({
+              label: 'Alert',
+              size: 's',
+              data: {
+                content: content as i18nKey,
+                yes: 'Install',
+                no: 'Cancel',
+              },
+            })
+            .pipe(defaultIfEmpty(false))
+            .subscribe(response => resolve(response))
+        }))
    )
  }
 }
--- a/web/projects/ui/src/app/routes/portal/routes/services/components/action-requests.component.ts
+++ b/web/projects/ui/src/app/routes/portal/routes/services/components/action-requests.component.ts
@@ -57,8 +57,6 @@ export class ServiceActionRequestsComponent {

  readonly requests = computed(() =>
    Object.values(this.pkg().requestedActions)
-      // @TODO Alex uncomment filter line below to produce infinite loop on service details page when dependency not installed. This means the page is infinitely trying to re-render
-      // .filter(r => r.active)
      .filter(
        r =>
          this.services()[r.request.packageId]?.actions[r.request.actionId] &&
--- a/web/projects/ui/src/app/routes/portal/routes/sideload/package.component.ts
+++ b/web/projects/ui/src/app/routes/portal/routes/sideload/package.component.ts
@@ -1,5 +1,6 @@
 import { CommonModule } from '@angular/common'
-import { Component, inject, Input } from '@angular/core'
+import { Component, inject, input } from '@angular/core'
+import { toObservable } from '@angular/core/rxjs-interop'
 import {
  AboutModule,
  AdditionalModule,
@@ -12,11 +13,11 @@ import {
  MARKDOWN,
  SharedPipesModule,
 } from '@start9labs/shared'
-import { MarketplaceControlsComponent } from '../marketplace/components/controls.component'
-import { filter, first, map } from 'rxjs'
 import { PatchDB } from 'patch-db-client'
+import { filter, first, map, of, switchMap } from 'rxjs'
 import { DataModel } from 'src/app/services/patch-db/data-model'
 import { getManifest } from 'src/app/utils/get-package-data'
+import { MarketplaceControlsComponent } from '../marketplace/components/controls.component'
 import { MarketplacePkgSideload } from './sideload.utils'

@Component({
@@ -24,25 +25,25 @@ import { MarketplacePkgSideload } from './sideload.utils'
  template: `
    <div class="outer-container">
      <ng-content />
-      <marketplace-package-hero [pkg]="pkg">
+      <marketplace-package-hero [pkg]="pkg()">
        <marketplace-controls
          slot="controls"
          class="controls-wrapper"
-          [pkg]="pkg"
+          [pkg]="pkg()"
          [localPkg]="local$ | async"
          [localFlavor]="!!(flavor$ | async)"
-          [file]="file"
+          [file]="file()"
        />
      </marketplace-package-hero>
      <div class="package-details">
        <div class="package-details-main">
-          <marketplace-about [pkg]="pkg" />
-          @if (!(pkg.dependencyMetadata | empty)) {
-            <marketplace-dependencies [pkg]="pkg" />
+          <marketplace-about [pkg]="pkg()" />
+          @if (!(pkg().dependencyMetadata | empty)) {
+            <marketplace-dependencies [pkg]="pkg()" />
          }
        </div>
        <div class="package-details-additional">
-          <marketplace-additional [pkg]="pkg" (static)="onStatic($event)" />
+          <marketplace-additional [pkg]="pkg()" (static)="onStatic($event)" />
        </div>
      </div>
    </div>
@@ -108,38 +109,35 @@ export class SideloadPackageComponent {
  private readonly patch = inject<PatchDB<DataModel>>(PatchDB)
  private readonly dialog = inject(DialogService)

-  // @Input({ required: true })
-  // pkg!: MarketplacePkgSideload
+  readonly pkg = input.required<MarketplacePkgSideload>()
+  readonly file = input.required<File>()

-  // @TODO Alex why do I need to initialize pkg below? I would prefer to do the above, but it's not working
-  @Input({ required: true })
-  pkg: MarketplacePkgSideload = {} as MarketplacePkgSideload
-
-  @Input({ required: true })
-  file!: File
-
-  readonly local$ = this.patch.watch$('packageData', this.pkg.id).pipe(
+  readonly local$ = toObservable(this.pkg).pipe(
    filter(Boolean),
-    map(pkg =>
-      this.exver.getFlavor(getManifest(pkg).version) === this.pkg.flavor
-        ? pkg
-        : null,
+    switchMap(({ id, flavor }) =>
+      this.patch.watch$('packageData', id).pipe(
+        filter(Boolean),
+        map(pkg =>
+          this.exver.getFlavor(getManifest(pkg).version) === flavor
+            ? pkg
+            : null,
+        ),
+      ),
    ),
    first(),
  )

  readonly flavor$ = this.local$.pipe(map(pkg => !pkg))

-  // @TODO Alex, struggling to get this working. I don't understand how to use this markdown component, only one other example, and it's very different.
  onStatic(type: 'license' | 'instructions') {
+    const label = type === 'license' ? 'License' : 'Instructions'
+    const key = type === 'license' ? 'fullLicense' : 'instructions'
+
    this.dialog
      .openComponent(MARKDOWN, {
-        label: type === 'license' ? 'License' : 'Instructions',
+        label,
        size: 'l',
-        data: {
-          content:
-            this.pkg[type === 'license' ? 'fullLicense' : 'instructions'],
-        },
+        data: { content: of(this.pkg()[key]) },
      })
      .subscribe()
  }
--- a/web/projects/ui/src/app/routes/portal/routes/sideload/sideload.component.ts
+++ b/web/projects/ui/src/app/routes/portal/routes/sideload/sideload.component.ts
@@ -27,6 +27,7 @@ import { i18nKey, i18nPipe } from '@start9labs/shared'
          tuiIconButton
          appearance="neutral"
          iconStart="@tui.x"
+          size="s"
          [style.border-radius.%]="100"
          [style.justify-self]="'end'"
          (click)="clear()"
--- a/web/projects/ui/src/app/routes/portal/routes/system/routes/backups/backups.component.ts
+++ b/web/projects/ui/src/app/routes/portal/routes/system/routes/backups/backups.component.ts
@@ -26,7 +26,7 @@ import {
  CifsBackupTarget,
  DiskBackupTarget,
 } from 'src/app/services/api/api.types'
-import { EOSService } from 'src/app/services/eos.service'
+import { OSService } from 'src/app/services/os.service'
 import { DataModel } from 'src/app/services/patch-db/data-model'
 import { TitleDirective } from 'src/app/services/title.service'
 import { BACKUP } from './backup.component'
@@ -103,7 +103,7 @@ import { BACKUP_RESTORE } from './restore.component'
      </tui-notification>
    }

-    @if (type === 'create' && (eos.backingUp$ | async)) {
+    @if (type === 'create' && (os.backingUp$ | async)) {
      <section backupProgress></section>
    } @else {
      @if (service.loading()) {
@@ -163,7 +163,7 @@ export default class SystemBackupComponent implements OnInit {
  readonly dialog = inject(DialogService)
  readonly type = inject(ActivatedRoute).snapshot.data['type']
  readonly service = inject(BackupService)
-  readonly eos = inject(EOSService)
+  readonly os = inject(OSService)
  readonly server = toSignal(
    inject<PatchDB<DataModel>>(PatchDB).watch$('serverInfo'),
  )
--- a/web/projects/ui/src/app/routes/portal/routes/system/routes/backups/network.component.ts
+++ b/web/projects/ui/src/app/routes/portal/routes/system/routes/backups/network.component.ts
@@ -115,6 +115,11 @@ const ERROR =
      width: 13rem;
    }

+    td:last-child {
+      white-space: nowrap;
+      text-align: right;
+    }
+
    [tuiButton] {
      margin-inline-start: auto;
    }
--- a/web/projects/ui/src/app/routes/portal/routes/system/routes/general/general.component.ts
+++ b/web/projects/ui/src/app/routes/portal/routes/system/routes/general/general.component.ts
@@ -9,15 +9,17 @@ import { toSignal } from '@angular/core/rxjs-interop'
 import { FormsModule } from '@angular/forms'
 import { RouterLink } from '@angular/router'
 import {
+  DialogService,
  ErrorService,
+  i18nKey,
  i18nPipe,
  i18nService,
-  LoadingService,
-  DialogService,
  languages,
-  i18nKey,
+  Languages,
+  LoadingService,
 } from '@start9labs/shared'
 import { TuiResponsiveDialogService } from '@taiga-ui/addon-mobile'
+import { TuiContext, TuiStringHandler } from '@taiga-ui/cdk'
 import {
  TuiAppearance,
  TuiButton,
@@ -38,7 +40,7 @@ import { PatchDB } from 'patch-db-client'
 import { filter } from 'rxjs'
 import { ApiService } from 'src/app/services/api/embassy-api.service'
 import { ConfigService } from 'src/app/services/config.service'
-import { EOSService } from 'src/app/services/eos.service'
+import { OSService } from 'src/app/services/os.service'
 import { DataModel } from 'src/app/services/patch-db/data-model'
 import { TitleDirective } from 'src/app/services/title.service'
 import { SnekDirective } from './snek.directive'
@@ -72,13 +74,13 @@ import { SystemWipeComponent } from './wipe.component'
          tuiButton
          appearance="accent"
          iconStart="@tui.refresh-cw"
-          [disabled]="eos.updatingOrBackingUp$ | async"
+          [disabled]="os.updatingOrBackingUp$ | async"
          (click)="onUpdate()"
        >
          @if (server.statusInfo.updated) {
            {{ 'Restart to apply' | i18n }}
          } @else {
-            @if (eos.showUpdate$ | async) {
+            @if (os.showUpdate$ | async) {
              {{ 'Update' | i18n }}
            } @else {
              {{ 'Check for updates' | i18n }}
@@ -98,7 +100,13 @@ import { SystemWipeComponent } from './wipe.component'
        <tui-icon icon="@tui.languages" />
        <span tuiTitle>
          <strong>{{ 'Language' | i18n }}</strong>
-          <span tuiSubtitle>{{ i18nService.language }}</span>
+          <span tuiSubtitle>
+            @if (language; as lang) {
+              {{ lang | i18n }}
+            } @else {
+              {{ i18nService.language }}
+            }
+          </span>
        </span>
        <button
          tuiButtonSelect
@@ -112,6 +120,7 @@ import { SystemWipeComponent } from './wipe.component'
            *tuiTextfieldDropdown
            size="l"
            [items]="languages"
+            [itemContent]="translation"
          />
        </button>
      </div>
@@ -219,24 +228,32 @@ export default class SystemGeneralComponent {
  private readonly isTor = inject(ConfigService).isTor()
  private readonly document = inject(DOCUMENT)
  private readonly dialog = inject(DialogService)
+  private readonly i18n = inject(i18nPipe)

  wipe = false
  count = 0

  readonly server = toSignal(this.patch.watch$('serverInfo'))
  readonly name = toSignal(this.patch.watch$('ui', 'name'))
-  readonly eos = inject(EOSService)
+  readonly os = inject(OSService)
  readonly i18nService = inject(i18nService)
  readonly languages = languages
+  readonly translation: TuiStringHandler<TuiContext<Languages>> = ({
+    $implicit,
+  }) => this.i18n.transform($implicit)!
  readonly score = toSignal(
    this.patch.watch$('ui', 'gaming', 'snake', 'highScore'),
    { initialValue: 0 },
  )

+  get language(): Languages | undefined {
+    return this.languages.find(lang => lang === this.i18nService.language)
+  }
+
  onUpdate() {
    if (this.server()?.statusInfo.updated) {
      this.restart()
-    } else if (this.eos.updateAvailable$.value) {
+    } else if (this.os.updateAvailable$.value) {
      this.update()
    } else {
      this.check()
@@ -334,9 +351,9 @@ export default class SystemGeneralComponent {
    const loader = this.loader.open('Checking for updates').subscribe()

    try {
-      await this.eos.loadEos()
+      await this.os.loadOS()

-      if (this.eos.updateAvailable$.value) {
+      if (this.os.updateAvailable$.value) {
        this.update()
      } else {
        this.dialog
--- a/web/projects/ui/src/app/routes/portal/routes/system/routes/general/update.component.ts
+++ b/web/projects/ui/src/app/routes/portal/routes/system/routes/general/update.component.ts
@@ -15,7 +15,7 @@ import {
 import { TuiDialogContext, TuiScrollbar, TuiButton } from '@taiga-ui/core'
 import { NgDompurifyModule } from '@tinkoff/ng-dompurify'
 import { ApiService } from 'src/app/services/api/embassy-api.service'
-import { EOSService } from 'src/app/services/eos.service'
+import { OSService } from 'src/app/services/os.service'

@Component({
  template: `
@@ -47,7 +47,7 @@ import { EOSService } from 'src/app/services/eos.service'
  ],
 })
 export class SystemUpdateModal {
-  readonly versions = Object.entries(this.eosService.osUpdate?.releaseNotes!)
+  readonly versions = Object.entries(this.os.osUpdate?.releaseNotes!)
    .sort(([a], [b]) => a.localeCompare(b))
    .reverse()
    .map(([version, notes]) => ({
@@ -60,7 +60,7 @@ export class SystemUpdateModal {
    private readonly loader: LoadingService,
    private readonly errorService: ErrorService,
    private readonly embassyApi: ApiService,
-    private readonly eosService: EOSService,
+    private readonly os: OSService,
  ) {}

  async update() {
--- a/web/projects/ui/src/app/routes/portal/routes/updates/item.component.ts
+++ b/web/projects/ui/src/app/routes/portal/routes/updates/item.component.ts
@@ -18,7 +18,6 @@ import {
 import { TuiButton, TuiIcon, TuiLink, TuiTitle } from '@taiga-ui/core'
 import { TuiExpand } from '@taiga-ui/experimental'
 import {
-  TUI_CONFIRM,
  TuiAvatar,
  TuiButtonLoading,
  TuiChevron,
@@ -73,6 +72,14 @@ import UpdatesComponent from './updates.component'
      <td class="desktop">{{ item().s9pk.publishedAt | date }}</td>
      <td>
        <div>
+          <button
+            tuiIconButton
+            size="m"
+            appearance="icon"
+            [tuiChevron]="expanded()"
+          >
+            {{ 'Show more' | i18n }}
+          </button>
          @if (local().stateInfo.state === 'updating') {
            <tui-progress-circle
              class="g-positive"
@@ -94,14 +101,6 @@ import UpdatesComponent from './updates.component'
              {{ error() ? ('Retry' | i18n) : ('Update' | i18n) }}
            </button>
          }
-          <button
-            tuiIconButton
-            size="s"
-            appearance="icon"
-            [tuiChevron]="expanded()"
-          >
-            {{ 'Show more' | i18n }}
-          </button>
        </div>
      </td>
    </tr>
--- a/web/projects/ui/src/app/services/api/api.fixures.ts
+++ b/web/projects/ui/src/app/services/api/api.fixures.ts
@@ -1850,6 +1850,11 @@ export namespace Mock {
        listitems: ['192.168.1.1', '192.1681.23'],
        name: 'Matt',
      },
+      other: {
+        external: {
+          'public-domain': 'test.com',
+        },
+      },
    },
    port: 20,
    rpcallowip: undefined,
--- a/web/projects/ui/src/app/services/api/embassy-mock-api.service.ts
+++ b/web/projects/ui/src/app/services/api/embassy-mock-api.service.ts
@@ -1058,11 +1058,11 @@ export class MockApiService extends ApiService {
          ...Mock.LocalPkgs[params.id]!,
          stateInfo: {
            // if installing
-            // state: 'installing',
+            state: 'installing',

            // if updating
-            state: 'updating',
-            manifest: mockPatchData.packageData[params.id]?.stateInfo.manifest!,
+            // state: 'updating',
+            // manifest: mockPatchData.packageData[params.id]?.stateInfo.manifest!,

            // both
            installingInfo: {
--- a/web/projects/ui/src/app/services/badge.service.ts
+++ b/web/projects/ui/src/app/services/badge.service.ts
@@ -14,7 +14,7 @@ import {
  switchMap,
 } from 'rxjs'
 import { ConnectionService } from 'src/app/services/connection.service'
-import { EOSService } from 'src/app/services/eos.service'
+import { OSService } from 'src/app/services/os.service'
 import { MarketplaceService } from 'src/app/services/marketplace.service'
 import { NotificationService } from 'src/app/services/notification.service'
 import { DataModel } from 'src/app/services/patch-db/data-model'
@@ -27,7 +27,7 @@ export class BadgeService {
  private readonly notifications = inject(NotificationService)
  private readonly exver = inject(Exver)
  private readonly patch = inject<PatchDB<DataModel>>(PatchDB)
-  private readonly system$ = inject(EOSService).updateAvailable$.pipe(
+  private readonly system$ = inject(OSService).updateAvailable$.pipe(
    map(Number),
  )
  private readonly metrics$ = this.patch
--- a/web/projects/ui/src/app/services/form.service.ts
+++ b/web/projects/ui/src/app/services/form.service.ts
@@ -73,7 +73,7 @@ export class FormService {
      UntypedFormGroup | UntypedFormArray | UntypedFormControl
    > = {}
    Object.entries(config).map(([key, spec]) => {
-      group[key] = this.getFormEntry(spec, current ? current[key] : undefined)
+      group[key] = this.getFormEntry(spec, current?.[key])
    })
    return this.formBuilder.group(group, { validators })
  }
--- a/web/projects/ui/src/app/services/marketplace.service.ts
+++ b/web/projects/ui/src/app/services/marketplace.service.ts
@@ -194,7 +194,7 @@ export class MarketplaceService {
    )
  }

-  getStatic$(
+  fetchStatic$(
    pkg: MarketplacePkg,
    type: 'LICENSE.md' | 'instructions.md',
  ): Observable<string> {
--- a/web/projects/ui/src/app/services/eos.service.ts
+++ b/web/projects/ui/src/app/services/eos.service.ts
@@ -10,7 +10,7 @@ import { Version } from '@start9labs/start-sdk'
@Injectable({
  providedIn: 'root',
 })
-export class EOSService {
+export class OSService {
  osUpdate?: OSUpdate
  updateAvailable$ = new BehaviorSubject<boolean>(false)

@@ -45,7 +45,7 @@ export class EOSService {
    private readonly patch: PatchDB<DataModel>,
  ) {}

-  async loadEos(): Promise<void> {
+  async loadOS(): Promise<void> {
    const { version, id } = await getServerInfo(this.patch)
    this.osUpdate = await this.api.checkOSUpdate({ serverId: id })
    const updateAvailable =
--- a/web/projects/ui/src/app/services/patch-data.service.ts
+++ b/web/projects/ui/src/app/services/patch-data.service.ts
@@ -1,41 +1,33 @@
-import { Injectable } from '@angular/core'
+import { inject, Injectable } from '@angular/core'
 import { Observable } from 'rxjs'
 import { filter, map, share, switchMap } from 'rxjs/operators'
 import { PatchDB } from 'patch-db-client'
 import { DataModel } from 'src/app/services/patch-db/data-model'
-import { EOSService } from 'src/app/services/eos.service'
+import { OSService } from 'src/app/services/os.service'
 import { ConnectionService } from 'src/app/services/connection.service'
 import { LocalStorageBootstrap } from './patch-db/local-storage-bootstrap'

-// @TODO Alex this file has just become checking for StartOS updates. Maybe it can be removed/simplified. I'm not sure why getMarketplace$() line is commented out, I assume we are checking for service updates somewhere else?
@Injectable({
  providedIn: 'root',
 })
 export class PatchDataService extends Observable<void> {
-  private readonly stream$ = this.connection$.pipe(
+  private readonly patch: PatchDB<DataModel> = inject(PatchDB)
+  private readonly os = inject(OSService)
+  private readonly bootstrapper = inject(LocalStorageBootstrap)
+  private readonly stream$ = inject(ConnectionService).pipe(
    filter(Boolean),
    switchMap(() => this.patch.watch$()),
    map((cache, index) => {
      this.bootstrapper.update(cache)

      if (index === 0) {
-        this.checkForUpdates()
+        this.os.loadOS()
      }
    }),
    share(),
  )

-  constructor(
-    private readonly patch: PatchDB<DataModel>,
-    private readonly eosService: EOSService,
-    private readonly connection$: ConnectionService,
-    private readonly bootstrapper: LocalStorageBootstrap,
-  ) {
+  constructor() {
    super(subscriber => this.stream$.subscribe(subscriber))
  }
-
-  private checkForUpdates(): void {
-    this.eosService.loadEos()
-    // this.marketplaceService.getMarketplace$().pipe(take(1)).subscribe()
-  }
 }
--- a/web/projects/ui/src/app/services/status.service.ts
+++ b/web/projects/ui/src/app/services/status.service.ts
@@ -26,7 +26,7 @@ export const STATUS = new InjectionToken('', {
          return CONNECTED
        }),
      ),
-      { initialValue: CONNECTED },
+      { initialValue: CONNECTING },
    ),
 })