fix icons and flavor filtering

core/README.md

@@ -14,7 +14,7 @@
 ## Artifacts
 
 The StartOS backend is packed into a single binary `startbox` that is symlinked under
-several different names for different behaviour:
+several different names for different behavior:
 
 - `startd`: This is the main daemon of StartOS
 - `start-cli`: This is a CLI tool that will allow you to issue commands to

package-lock.json

@@ -1,5 +1,5 @@
 {
-  "name": "embassy-os",
+  "name": "start-os-next-major",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {}

web/package-lock.json

@@ -1982,7 +1982,7 @@
     },
     "../sdk/dist": {
       "name": "@start9labs/start-sdk",
-      "version": "0.3.6-alpha6",
+      "version": "0.3.6-alpha8",
       "license": "MIT",
       "dependencies": {
         "@iarna/toml": "^2.2.5",
@@ -1995,10 +1995,8 @@
         "yaml": "^2.2.2"
       },
       "devDependencies": {
-        "@iarna/toml": "^2.2.5",
         "@types/jest": "^29.4.0",
         "@types/lodash.merge": "^4.6.2",
-        "copyfiles": "^2.4.1",
         "jest": "^29.4.3",
         "peggy": "^3.0.2",
         "prettier": "^3.2.5",
@@ -2006,8 +2004,7 @@
         "ts-node": "^10.9.1",
         "ts-pegjs": "^4.2.1",
         "tsx": "^4.7.1",
-        "typescript": "^5.0.4",
+        "typescript": "^5.0.4"
-        "yaml": "^2.2.2"
       }
     },
     "node_modules/@ampproject/remapping": {
@@ -4922,6 +4919,7 @@
     },
     "node_modules/@pkgjs/parseargs": {
       "version": "0.11.0",
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "engines": {
@@ -7546,6 +7544,7 @@
     },
     "node_modules/encoding": {
       "version": "0.1.13",
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "dependencies": {
@@ -7554,6 +7553,7 @@
     },
     "node_modules/encoding/node_modules/iconv-lite": {
       "version": "0.6.3",
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "dependencies": {
@@ -8152,6 +8152,7 @@
     },
     "node_modules/fsevents": {
       "version": "2.3.3",
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [

web/projects/marketplace/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@start9labs/marketplace",
-  "version": "0.3.28",
+  "version": "0.3.29",
   "peerDependencies": {
     "@angular/common": ">=13.2.0",
     "@angular/core": ">=13.2.0",

web/projects/marketplace/src/modals/release-notes.component.ts

@@ -1,6 +1,5 @@
 import { CommonModule } from '@angular/common'
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
-import { MarketplacePkg } from '@start9labs/marketplace'
 import { Exver, MarkdownPipeModule } from '@start9labs/shared'
 import { TuiButton, TuiDialogContext, TuiLoader } from '@taiga-ui/core'
 import { TuiAccordion } from '@taiga-ui/kit'
@@ -10,6 +9,7 @@ import {
 } from '@taiga-ui/polymorpheus'
 import { map } from 'rxjs'
 import { AbstractMarketplaceService } from '../services/marketplace.service'
+import { MarketplacePkg } from '../../src/types'
 
 @Component({
   standalone: true,

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

@@ -1,22 +1,12 @@
-<div
+<div class="item-container box-shadow-lg">
-  class="item-container box-shadow-lg"
-  *tuiLet="marketplace$ | async as marketplace"
->
   <!-- color background -->
   <div class="background">
-    <img
+    <img [src]="determineIcon()" alt="{{ pkg.title }} Icon" />
-      [src]="determineIcon(marketplace)"
-      alt="{{ pkg.title }} Icon"
-    />
   </div>
   <!-- darkening overlay -->
   <div class="overlay"></div>
   <!-- icon -->
-  <img
+  <img [src]="determineIcon()" class="icon" alt="{{ pkg.title }} Icon" />
-    [src]="determineIcon(marketplace)"
-    class="icon"
-    alt="{{ pkg.title }} Icon"
-  />
   <div class="detail">
     <span class="detail-title" ticker>
       {{ pkg.title }}

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

@@ -1,11 +1,5 @@
-import {
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
-  ChangeDetectionStrategy,
+import { MarketplacePkg } from '../../../types'
-  Component,
-  Input,
-  inject,
-} from '@angular/core'
-import { MarketplacePkg, StoreIdentity } from '../../../types'
-import { AbstractMarketplaceService } from '../../../services/marketplace.service'
 
 @Component({
   selector: 'marketplace-item',
@@ -17,15 +11,9 @@ export class ItemComponent {
   @Input({ required: true })
   pkg!: MarketplacePkg
 
-  private readonly marketplaceService = inject(AbstractMarketplaceService)
+  determineIcon(): string {
-  readonly marketplace$ = this.marketplaceService.getSelectedHost$()
+    return this.pkg.icon
-
+      ? this.pkg.icon
-  determineIcon(marketplace: StoreIdentity | null): string {
+      : 'assets/img/service-icons/fallback.png'
-    try {
-      const iconUrl = new URL(this.pkg.icon)
-      return iconUrl.href
-    } catch (e) {
-      return `${marketplace?.url}package/v0/icon/${this.pkg.id}`
-    }
   }
 }

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

@@ -36,7 +36,7 @@
       />
       <!-- instructions -->
       <marketplace-additional-item
-        (click)="presentModalMd('Instructions')"
+        (click)="presentModalMd('instructions.md')"
         data="Click to view instructions"
         label="Instructions"
         icon="@tui.chevron-right"

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

@@ -1,27 +1,17 @@
 import { CommonModule, KeyValue } from '@angular/common'
-import {
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
-  ChangeDetectionStrategy,
-  Component,
-  inject,
-  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 { AbstractMarketplaceService } from '../../../services/marketplace.service'
+import { MarketplacePkg } from '../../../types'
-import { MarketplacePkg, StoreIdentity } from '../../../types'
 
 @Component({
   selector: 'marketplace-dep-item',
   template: `
-    <div class="outer-container" *tuiLet="marketplace$ | async as marketplace">
+    <div class="outer-container">
-      <tui-avatar
+      <tui-avatar class="dep-img" size="l" [src]="getImage(dep.key)" />
-        class="dep-img"
-        size="l"
-        [src]="getImage(dep.key, marketplace)"
-      />
       <div>
         <tui-line-clamp [linesLimit]="2" [content]="titleContent" />
         <ng-template #titleContent>
@@ -117,24 +107,9 @@ export class MarketplaceDepItemComponent {
   @Input({ required: true })
   dep!: KeyValue<string, T.DependencyMetadata>
 
-  private readonly marketplaceService = inject(AbstractMarketplaceService)
+  getImage(key: string) {
-  readonly marketplace$ = this.marketplaceService.getSelectedHost$()
-
-  getImage(key: string, marketplace: StoreIdentity | null) {
     const icon = this.pkg.dependencyMetadata[key]?.icon
-    const camelToSnakeCase = (str: string) =>
+    return icon ? icon : 'assets/img/service-icons/fallback.png'
-      str.replace(/[A-Z]/g, letter => `-${letter.toLowerCase()}`)
-
-    if (icon) {
-      try {
-        const iconUrl = new URL(icon)
-        return iconUrl.href
-      } catch (e) {
-        return `${marketplace?.url}package/v0/icon/${camelToSnakeCase(key)}`
-      }
-    } else {
-      return key.substring(0, 2)
-    }
   }
 
   getTitle(key: string): string {

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

@@ -1,31 +1,18 @@
 import { CommonModule } from '@angular/common'
-import {
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
-  ChangeDetectionStrategy,
-  Component,
-  inject,
-  Input,
-} from '@angular/core'
 import { SharedPipesModule, TickerModule } from '@start9labs/shared'
 import { TuiLet } from '@taiga-ui/cdk'
-import { AbstractMarketplaceService } from '../../../services/marketplace.service'
-import { MarketplacePkg, StoreIdentity } from '../../../types'
 
 @Component({
   selector: 'marketplace-package-hero',
   template: `
-    <div class="outer-container" *tuiLet="marketplace$ | async as marketplace">
+    <div class="outer-container">
       <div class="inner-container box-shadow-lg">
         <!-- icon -->
-        <img
+        <img [src]="determineIcon()" alt="{{ pkg.title }} Icon" />
-          [src]="determineIcon(marketplace) | trustUrl"
-          alt="{{ pkg.title }} Icon"
-        />
         <!-- color background -->
         <div class="color-background">
-          <img
+          <img [src]="determineIcon()" alt="{{ pkg.title }} background image" />
-            [src]="determineIcon(marketplace) | trustUrl"
-            alt="{{ pkg.title }} background image"
-          />
         </div>
         <!-- background darkening overlay -->
         <div class="dark-overlay"></div>
@@ -158,7 +145,6 @@ import { MarketplacePkg, StoreIdentity } from '../../../types'
   imports: [CommonModule, SharedPipesModule, TickerModule, TuiLet],
 })
 export class MarketplacePackageHeroComponent {
-  // @TODO Matt this used to be MarketplacePkg
   @Input({ required: true })
   pkg!: {
     id: string
@@ -168,15 +154,9 @@ export class MarketplacePackageHeroComponent {
     icon: string
   }
 
-  private readonly marketplaceService = inject(AbstractMarketplaceService)
+  determineIcon() {
-  readonly marketplace$ = this.marketplaceService.getSelectedHost$()
+    return this.pkg.icon
-
+      ? this.pkg.icon
-  determineIcon(marketplace: StoreIdentity | null) {
+      : 'assets/img/service-icons/fallback.png'
-    try {
-      const iconUrl = new URL(this.pkg.icon)
-      return iconUrl.href
-    } catch (e) {
-      return `${marketplace?.url}package/v0/icon/${this.pkg.id}`
-    }
   }
 }

web/projects/marketplace/src/services/marketplace.service.ts

@@ -1,5 +1,5 @@
 import { Observable } from 'rxjs'
-import { Marketplace, MarketplacePkg, StoreData, StoreIdentity } from '../types'
+import { MarketplacePkg, Marketplace, StoreData, StoreIdentity } from '../types'
 
 export abstract class AbstractMarketplaceService {
   abstract getKnownHosts$(): Observable<StoreIdentity[]>

web/projects/shared/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@start9labs/shared",
-  "version": "0.3.13",
+  "version": "0.3.14",
   "peerDependencies": {
-    "@angular/common": "^17.0.6",
+    "@angular/common": ">=13.2.0",
-    "@angular/core": "^17.0.6",
+    "@angular/core": ">=13.2.0",
-    "@angular/router": "^17.0.6",
+    "@angular/router": ">=13.2.0",
     "@ng-web-apis/mutation-observer": ">=4.0.0",
     "@ng-web-apis/resize-observer": ">=4.0.0",
     "@taiga-ui/cdk": "4.0.0-rc.7",

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

@@ -31,11 +31,9 @@ import {
   BehaviorSubject,
   combineLatest,
   filter,
-  firstValueFrom,
   map,
   startWith,
   switchMap,
-  tap,
 } from 'rxjs'
 
 @Component({
@@ -204,15 +202,14 @@ export class MarketplacePreviewComponent {
 
   readonly flavors$ = this.flavor$.pipe(
     switchMap(current =>
-      this.marketplaceService
+      this.marketplaceService.getSelectedStore$().pipe(
-        .getSelectedStore$()
+        map(({ packages }) =>
-        .pipe(
+          packages.filter(
-          map(({ packages }) =>
+            ({ id, flavor }) => id === this.pkgId && flavor !== current,
-            packages.filter(
-              ({ id, flavor }) => id === this.pkgId && flavor !== current,
-            ),
           ),
         ),
+        filter(p => p.length > 0),
+      ),
     ),
   )