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/marketplace/src/components/menu/menu.component.scss

@@ -8,7 +8,7 @@
 header {
   @include scrollbar-hidden();
 
-  // TODO: Theme
+  // @TODO Theme
   background: #2b2b2f;
   overflow: hidden;
   width: 100%;

web/projects/marketplace/src/pages/list/item/item.component.html

@@ -16,21 +16,3 @@
     </span>
   </div>
 </div>
-
-<!-- @TODO Alex -->
-<!-- <ion-item
-  class="service-card"
-  [routerLink]="['/marketplace', pkg.id]"
-  [queryParams]="{ flavor: pkg.flavor, version: pkg.version }"
->
-  <ion-thumbnail slot="start">
-    <img alt="" [src]="pkg.icon | trustUrl" />
-  </ion-thumbnail>
-  <ion-label>
-    <h2 class="montserrat">
-      <strong>{{ pkg.title }}</strong>
-    </h2>
-    <h3>{{ pkg.description.short }}</h3>
-    <ng-content></ng-content>
-  </ion-label>
-</ion-item> -->

web/projects/marketplace/src/pages/show/about/about.component.ts

@@ -6,7 +6,7 @@ import {
 } from '@angular/core'
 import { TuiDialogService } from '@taiga-ui/core'
 import { RELEASE_NOTES } from '../../../modals/release-notes.component'
-import { MarketplacePkg } from '../../../types'
+import { MarketplacePkgBase } from '../../../types'
 
 @Component({
   selector: 'marketplace-about',
@@ -18,7 +18,7 @@ export class AboutComponent {
   private readonly dialogs = inject(TuiDialogService)
 
   @Input({ required: true })
-  pkg!: MarketplacePkg
+  pkg!: MarketplacePkgBase
 
   async onPast() {
     this.dialogs

web/projects/marketplace/src/pages/show/additional/additional-item.component.ts

@@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common'
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
-import { TuiIcon, TuiLabel, TuiTitle } from '@taiga-ui/core'
+import { TuiIcon, TuiTitle } from '@taiga-ui/core'
 import { TuiLineClamp } from '@taiga-ui/kit'
 
 @Component({
@@ -43,7 +43,7 @@ import { TuiLineClamp } from '@taiga-ui/kit'
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [CommonModule, TuiLineClamp, TuiLabel, TuiIcon, TuiTitle],
+  imports: [CommonModule, TuiLineClamp, TuiIcon, TuiTitle],
 })
 export class MarketplaceAdditionalItemComponent {
   @Input({ required: true })

web/projects/marketplace/src/pages/show/additional/additional.component.html

@@ -4,7 +4,7 @@
     <div class="detail-container">
       <!-- release date -->
       <marketplace-additional-item
-        *ngIf="pkg.s9pk.publishedAt as published"
+        *ngIf="pkg.s9pk?.publishedAt as published"
         [data]="(published | date: 'medium')!"
         label="Released"
         icon=""
@@ -76,98 +76,3 @@
     </div>
   </div>
 </div>
-<!-- <ion-item-divider>Additional Info</ion-item-divider>
-<ion-grid *ngIf="pkg">
-  <ion-row>
-    <ion-col responsiveCol sizeXs="12" sizeMd="6">
-      <ion-item-group>
-        <ion-item
-          *ngIf="pkg.gitHash as gitHash; else noHash"
-          button
-          detail="false"
-          (click)="copy(gitHash)"
-        >
-          <ion-label>
-            <h2>Git Hash</h2>
-            <p>{{ gitHash }}</p>
-          </ion-label>
-          <ion-icon slot="end" name="copy-outline"></ion-icon>
-        </ion-item>
-        <ng-template #noHash>
-          <ion-item>
-            <ion-label>
-              <h2>Git Hash</h2>
-              <p>Unknown</p>
-            </ion-label>
-          </ion-item>
-        </ng-template>
-        <ion-item button detail="false" (click)="presentAlertVersions()">
-          <ion-label>
-            <h2>Other Versions</h2>
-            <p>Click to view other versions</p>
-          </ion-label>
-          <ion-icon slot="end" name="chevron-forward"></ion-icon>
-        </ion-item>
-        <ion-item button detail="false" (click)="presentModalMd('license')">
-          <ion-label>
-            <h2>License</h2>
-            <p>{{ pkg.license }}</p>
-          </ion-label>
-          <ion-icon slot="end" name="chevron-forward"></ion-icon>
-        </ion-item>
-        <ion-item
-          button
-          detail="false"
-          (click)="presentModalMd('instructions')"
-        >
-          <ion-label>
-            <h2>Instructions</h2>
-            <p>Click to view instructions</p>
-          </ion-label>
-          <ion-icon slot="end" name="chevron-forward"></ion-icon>
-        </ion-item>
-      </ion-item-group>
-    </ion-col>
-    <ion-col responsiveCol sizeXs="12" sizeMd="6">
-      <ion-item-group>
-        <ion-item
-          [href]="pkg.upstreamRepo"
-          target="_blank"
-          rel="noreferrer"
-          detail="false"
-        >
-          <ion-label>
-            <h2>Source Repository</h2>
-            <p>{{ pkg.upstreamRepo }}</p>
-          </ion-label>
-          <ion-icon slot="end" name="open-outline"></ion-icon>
-        </ion-item>
-        <ion-item
-          [href]="pkg.wrapperRepo"
-          target="_blank"
-          rel="noreferrer"
-          detail="false"
-        >
-          <ion-label>
-            <h2>Wrapper Repository</h2>
-            <p>{{ pkg.wrapperRepo }}</p>
-          </ion-label>
-          <ion-icon slot="end" name="open-outline"></ion-icon>
-        </ion-item>
-        <ion-item
-          [href]="pkg.supportSite"
-          [disabled]="!pkg.supportSite"
-          target="_blank"
-          rel="noreferrer"
-          detail="false"
-        >
-          <ion-label>
-            <h2>Support Site</h2>
-            <p>{{ pkg.supportSite || 'Not provided' }}</p>
-          </ion-label>
-          <ion-icon slot="end" name="open-outline"></ion-icon>
-        </ion-item>
-      </ion-item-group>
-    </ion-col>
-  </ion-row>
-</ion-grid> -->

web/projects/marketplace/src/pages/show/additional/additional.component.ts

@@ -7,8 +7,7 @@ import {
 } from '@angular/core'
 import { ActivatedRoute } from '@angular/router'
 import { CopyService } from '@start9labs/shared'
-import { TuiDialogService } from '@taiga-ui/core'
-import { MarketplacePkg } from '../../../types'
+import { MarketplacePkgBase } from '../../../types'
 
 @Component({
   selector: 'marketplace-additional',
@@ -18,14 +17,13 @@ import { MarketplacePkg } from '../../../types'
 })
 export class AdditionalComponent {
   @Input({ required: true })
-  pkg!: MarketplacePkg
+  pkg!: MarketplacePkgBase
 
   @Output()
-  readonly static = new EventEmitter<string>()
+  readonly static = new EventEmitter<'License' | 'Instructions'>()
 
   constructor(
     readonly copyService: CopyService,
-    private readonly dialogs: TuiDialogService,
     private readonly route: ActivatedRoute,
   ) {}
 

web/projects/marketplace/src/pages/show/dependencies/dependencies.component.ts

@@ -6,7 +6,7 @@ import {
   Input,
   Output,
 } from '@angular/core'
-import { MarketplacePkg } from '../../../types'
+import { MarketplacePkgBase } from '../../../types'
 import { MarketplaceDepItemComponent } from './dependency-item.component'
 
 @Component({
@@ -55,7 +55,7 @@ import { MarketplaceDepItemComponent } from './dependency-item.component'
 })
 export class MarketplaceDependenciesComponent {
   @Input({ required: true })
-  pkg!: MarketplacePkg
+  pkg!: MarketplacePkgBase
 
   @Output() open = new EventEmitter<string>()
 }

web/projects/marketplace/src/pages/show/dependencies/dependency-item.component.ts

@@ -3,9 +3,8 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
 import { RouterModule } from '@angular/router'
 import { ExverPipesModule } from '@start9labs/shared'
 import { T } from '@start9labs/start-sdk'
-import { TuiLet } from '@taiga-ui/cdk'
 import { TuiAvatar, TuiLineClamp } from '@taiga-ui/kit'
-import { MarketplacePkg } from '../../../types'
+import { MarketplacePkgBase } from '../../../types'
 
 @Component({
   selector: 'marketplace-dep-item',
@@ -97,12 +96,11 @@ import { MarketplacePkg } from '../../../types'
     TuiAvatar,
     ExverPipesModule,
     TuiLineClamp,
-    TuiLet,
   ],
 })
 export class MarketplaceDepItemComponent {
   @Input({ required: true })
-  pkg!: MarketplacePkg
+  pkg!: MarketplacePkgBase
 
   @Input({ required: true })
   dep!: KeyValue<string, T.DependencyMetadata>

web/projects/marketplace/src/types.ts

@@ -1,3 +1,4 @@
+import { OptionalProperty } from '@start9labs/shared'
 import { T } from '@start9labs/start-sdk'
 
 export type GetPackageReq = {
@@ -31,11 +32,17 @@ export type StoreData = {
   packages: MarketplacePkg[]
 }
 
-export type MarketplacePkg = T.PackageVersionInfo &
-  Omit<GetPackageRes, 'best'> & {
-    id: T.PackageId
-    version: string
-    flavor: string | null
-  }
+export type MarketplacePkgBase = OptionalProperty<
+  T.PackageVersionInfo,
+  's9pk'
+> & {
+  id: T.PackageId
+  version: string
+  flavor: string | null
+}
+
+export type MarketplacePkg = MarketplacePkgBase &
+  GetPackageRes &
+  T.PackageVersionInfo
 
 export type StoreDataWithUrl = StoreData & { url: string }