fix icons and flavor filtering

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
-  class="item-container box-shadow-lg"
-  *tuiLet="marketplace$ | async as marketplace"
->
+<div class="item-container box-shadow-lg">
   <!-- color background -->
   <div class="background">
-    <img
-      [src]="determineIcon(marketplace)"
-      alt="{{ pkg.title }} Icon"
-    />
+    <img [src]="determineIcon()" alt="{{ pkg.title }} Icon" />
   </div>
   <!-- darkening overlay -->
   <div class="overlay"></div>
   <!-- icon -->
-  <img
-    [src]="determineIcon(marketplace)"
-    class="icon"
-    alt="{{ pkg.title }} Icon"
-  />
+  <img [src]="determineIcon()" 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 {
-  ChangeDetectionStrategy,
-  Component,
-  Input,
-  inject,
-} from '@angular/core'
-import { MarketplacePkg, StoreIdentity } from '../../../types'
-import { AbstractMarketplaceService } from '../../../services/marketplace.service'
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
+import { MarketplacePkg } from '../../../types'
 
 @Component({
   selector: 'marketplace-item',
@@ -17,15 +11,9 @@ export class ItemComponent {
   @Input({ required: true })
   pkg!: MarketplacePkg
 
-  private readonly marketplaceService = inject(AbstractMarketplaceService)
-  readonly marketplace$ = this.marketplaceService.getSelectedHost$()
-
-  determineIcon(marketplace: StoreIdentity | null): string {
-    try {
-      const iconUrl = new URL(this.pkg.icon)
-      return iconUrl.href
-    } catch (e) {
-      return `${marketplace?.url}package/v0/icon/${this.pkg.id}`
-    }
+  determineIcon(): string {
+    return this.pkg.icon
+      ? this.pkg.icon
+      : 'assets/img/service-icons/fallback.png'
   }
 }

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 {
-  ChangeDetectionStrategy,
-  Component,
-  inject,
-  Input,
-} from '@angular/core'
+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 { AbstractMarketplaceService } from '../../../services/marketplace.service'
-import { MarketplacePkg, StoreIdentity } from '../../../types'
+import { MarketplacePkg } from '../../../types'
 
 @Component({
   selector: 'marketplace-dep-item',
   template: `
-    <div class="outer-container" *tuiLet="marketplace$ | async as marketplace">
-      <tui-avatar
-        class="dep-img"
-        size="l"
-        [src]="getImage(dep.key, marketplace)"
-      />
+    <div class="outer-container">
+      <tui-avatar class="dep-img" size="l" [src]="getImage(dep.key)" />
       <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)
-  readonly marketplace$ = this.marketplaceService.getSelectedHost$()
-
-  getImage(key: string, marketplace: StoreIdentity | null) {
+  getImage(key: string) {
     const icon = this.pkg.dependencyMetadata[key]?.icon
-    const camelToSnakeCase = (str: string) =>
-      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)
-    }
+    return icon ? icon : 'assets/img/service-icons/fallback.png'
   }
 
   getTitle(key: string): string {

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

@@ -1,31 +1,18 @@
 import { CommonModule } from '@angular/common'
-import {
-  ChangeDetectionStrategy,
-  Component,
-  inject,
-  Input,
-} from '@angular/core'
+import { ChangeDetectionStrategy, Component, 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
-          [src]="determineIcon(marketplace) | trustUrl"
-          alt="{{ pkg.title }} Icon"
-        />
+        <img [src]="determineIcon()" alt="{{ pkg.title }} Icon" />
         <!-- color background -->
         <div class="color-background">
-          <img
-            [src]="determineIcon(marketplace) | trustUrl"
-            alt="{{ pkg.title }} background image"
-          />
+          <img [src]="determineIcon()" 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)
-  readonly marketplace$ = this.marketplaceService.getSelectedHost$()
-
-  determineIcon(marketplace: StoreIdentity | null) {
-    try {
-      const iconUrl = new URL(this.pkg.icon)
-      return iconUrl.href
-    } catch (e) {
-      return `${marketplace?.url}package/v0/icon/${this.pkg.id}`
-    }
+  determineIcon() {
+    return this.pkg.icon
+      ? this.pkg.icon
+      : 'assets/img/service-icons/fallback.png'
   }
 }

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[]>