marketplace release fixes and refactors

web/projects/ui/src/app/apps/portal/routes/system/marketplace/marketplace.component.ts

@@ -51,8 +51,8 @@ import { MarketplaceSidebarsComponent } from './components/sidebars.component'
         max-height: 100%;
         overflow: auto;
         // TODO: Theme
-        background: #18181b url('/assets/img/background.png') no-repeat top
-          right;
+        background: #18181b url('/assets/img/background_marketplace.png')
+          no-repeat top right;
       }
 
       ::ng-deep menu {

web/projects/ui/src/app/apps/portal/routes/system/marketplace/modals/preview.component.ts

@@ -2,21 +2,31 @@ import { CommonModule } from '@angular/common'
 import {
   ChangeDetectionStrategy,
   Component,
+  EventEmitter,
   inject,
   Input,
+  Output,
+  TemplateRef,
 } from '@angular/core'
 import {
   AboutModule,
   AbstractMarketplaceService,
   AdditionalModule,
-  DependenciesModule,
+  MarketplaceAdditionalItemComponent,
+  MarketplaceDependenciesComponent,
   MarketplacePackageHeroComponent,
   MarketplacePkg,
   ReleaseNotesModule,
 } from '@start9labs/marketplace'
-import { SharedPipesModule } from '@start9labs/shared'
+import { displayEmver, Emver, SharedPipesModule } from '@start9labs/shared'
 import { TuiButtonModule } from '@taiga-ui/experimental'
-import { map } from 'rxjs'
+import { filter, map } from 'rxjs'
+import { TuiDialogContext, TuiDialogService } from '@taiga-ui/core'
+import {
+  TuiRadioListModule,
+  TuiStringifyContentPipeModule,
+} from '@taiga-ui/kit'
+import { FormsModule } from '@angular/forms'
 import { Router } from '@angular/router'
 
 @Component({
@@ -41,26 +51,45 @@ import { Router } from '@angular/router'
       <div class="inner-container">
         <marketplace-about [pkg]="pkg" />
         @if (!(pkg.manifest.dependencies | empty)) {
-          <div class="background-border shadow-color-light box-shadow-lg">
-            <div class="dependencies-container">
-              <h2>Dependencies</h2>
-              <div class="dependencies-list">
-                @for (
-                  dep of pkg.manifest.dependencies | keyvalue;
-                  track $index
-                ) {
-                  <marketplace-dependencies
-                    [dep]="dep"
-                    [pkg]="pkg"
-                    (click)="open(dep.key)"
-                  />
-                }
-              </div>
-            </div>
-          </div>
+          <marketplace-dependencies
+            [pkg]="pkg"
+            (open)="open($event)"
+          ></marketplace-dependencies>
         }
         <release-notes [pkg]="pkg" />
-        <marketplace-additional class="additional-wrapper" [pkg]="pkg" />
+        <marketplace-additional class="additional-wrapper" [pkg]="pkg">
+          <marketplace-additional-item
+            (click)="presentAlertVersions(version)"
+            data="Click to view all versions"
+            label="All versions"
+            icon="tuiIconChevronRightLarge"
+            class="item-pointer"
+          ></marketplace-additional-item>
+          <ng-template #version let-data="data" let-completeWith="completeWith">
+            <tui-radio-list
+              size="l"
+              [items]="data.items"
+              [itemContent]="displayEmver | tuiStringifyContent"
+              [(ngModel)]="data.value"
+            ></tui-radio-list>
+            <footer class="buttons">
+              <button
+                tuiButton
+                appearance="secondary"
+                (click)="completeWith(null)"
+              >
+                Cancel
+              </button>
+              <button
+                tuiButton
+                appearance="secondary"
+                (click)="completeWith(data.value)"
+              >
+                Ok
+              </button>
+            </footer>
+          </ng-template>
+        </marketplace-additional>
       </div>
     </div>
   `,
@@ -83,36 +112,6 @@ import { Router } from '@angular/router'
         column-gap: 2rem;
       }
 
-      .dependencies {
-        &-container {
-          background-color: rgb(39 39 42);
-          border-radius: 0.75rem;
-          padding: 1.75rem;
-
-          @media (min-width: 1024px) {
-            grid-column: span 5 / span 5;
-          }
-          @media (min-width: 1280px) {
-            grid-column: span 4 / span 4;
-          }
-
-          h2 {
-            font-size: 1.125rem;
-            line-height: 1.75rem;
-            font-weight: 700;
-            margin: 0.5rem 0;
-            padding-bottom: 0.75rem;
-            font-variant: all-small-caps;
-          }
-        }
-
-        &-list {
-          display: grid;
-          grid-auto-rows: auto;
-          gap: 0.75rem;
-        }
-      }
-
       .additional-wrapper {
         margin-top: 1.5rem;
       }
@@ -124,24 +123,52 @@ import { Router } from '@angular/router'
     CommonModule,
     MarketplacePackageHeroComponent,
     TuiButtonModule,
-    DependenciesModule,
+    MarketplaceDependenciesComponent,
     ReleaseNotesModule,
     AdditionalModule,
     AboutModule,
     SharedPipesModule,
+    FormsModule,
+    TuiStringifyContentPipeModule,
+    MarketplaceAdditionalItemComponent,
+    TuiRadioListModule,
   ],
 })
 export class MarketplacePreviewComponent {
-  private readonly router = inject(Router)
-
   @Input({ required: true })
   pkg!: MarketplacePkg
 
+  @Output()
+  version = new EventEmitter<string>()
+
+  readonly displayEmver = displayEmver
+  private readonly router = inject(Router)
   readonly url$ = inject(AbstractMarketplaceService)
     .getSelectedHost$()
     .pipe(map(({ url }) => url))
 
+  constructor(
+    private readonly dialogs: TuiDialogService,
+    private readonly emver: Emver,
+  ) {}
+
   open(id: string) {
     this.router.navigate([], { queryParams: { id } })
   }
+
+  presentAlertVersions(version: TemplateRef<TuiDialogContext>) {
+    this.dialogs
+      .open<string>(version, {
+        label: 'Versions',
+        size: 's',
+        data: {
+          value: this.pkg.manifest.version,
+          items: [...new Set(this.pkg.versions)].sort(
+            (a, b) => -1 * (this.emver.compare(a, b) || 0),
+          ),
+        },
+      })
+      .pipe(filter(Boolean))
+      .subscribe(version => this.version.emit(version))
+  }
 }

web/projects/ui/src/app/apps/portal/routes/system/sideload/package.component.ts

@@ -4,7 +4,7 @@ import { Router, RouterLink } from '@angular/router'
 import {
   AboutModule,
   AdditionalModule,
-  DependenciesModule,
+  MarketplaceDependenciesComponent,
   MarketplacePackageHeroComponent,
   MarketplacePkg,
 } from '@start9labs/marketplace'
@@ -27,13 +27,13 @@ import { getManifest } from 'src/app/util/get-package-data'
 @Component({
   selector: 'sideload-package',
   template: `
-    <div class="grid gap-8 mb-16 p-4 lg:px-16 lg:pb-8 pt-14 justify-center">
+    <div class="outer-container">
       <ng-content />
       <marketplace-package-hero
         *tuiLet="button$ | async as button"
         [pkg]="package"
       >
-        <div class="flex justify-start">
+        <div class="inner-container">
           <a
             *ngIf="button !== null && button !== 'Install'"
             tuiButton
@@ -48,22 +48,32 @@ import { getManifest } from 'src/app/util/get-package-data'
         </div>
       </marketplace-package-hero>
       <marketplace-about [pkg]="package" />
-      <div
-        *ngIf="!(package.manifest.dependencies | empty)"
-        class="rounded-xl bg-gradient-to-bl from-zinc-400/75 to-zinc-600 p-px shadow-lg shadow-zinc-400/10"
-      >
-        <div class="lg:col-span-5 xl:col-span-4 bg-zinc-800 rounded-xl p-7">
-          <h2 class="text-lg font-bold small-caps my-2 pb-3">Dependencies</h2>
-          <div class="grid grid-row-auto gap-3">
-            <div *ngFor="let dep of package.manifest.dependencies | keyvalue">
-              <marketplace-dependencies [dep]="dep" [pkg]="package" />
-            </div>
-          </div>
-        </div>
-      </div>
+      @if (!(package.manifest.dependencies | empty)) {
+        <marketplace-dependencies [pkg]="package" (open)="open($event)" />
+      }
       <marketplace-additional [pkg]="package" />
     </div>
   `,
+  styles: [
+    `
+      .outer-container {
+        display: grid;
+        justify-content: center;
+        gap: 2rem;
+        padding: 2.5rem 1rem 1rem 1rem;
+        margin-bottom: 4rem;
+
+        @media (min-width: 1024px) {
+          padding: 2.5rem 4rem 2rem 4rem;
+        }
+      }
+
+      .inner-container {
+        display: flex;
+        justify-content: flex-start;
+      }
+    `,
+  ],
   standalone: true,
   imports: [
     CommonModule,
@@ -74,7 +84,7 @@ import { getManifest } from 'src/app/util/get-package-data'
     TuiButtonModule,
     TuiLetModule,
     MarketplacePackageHeroComponent,
-    DependenciesModule,
+    MarketplaceDependenciesComponent,
   ],
 })
 export class SideloadPackageComponent {
@@ -140,4 +150,8 @@ export class SideloadPackageComponent {
       loader.unsubscribe()
     }
   }
+
+  open(id: string) {
+    this.router.navigate(['/marketplace'], { queryParams: { id } })
+  }
 }