fixes and backwards compatability with new registry types

web/projects/marketplace/src/pages/list/categories/categories.component.scss

@@ -32,7 +32,7 @@ button {
   }
 
   @media (min-width: 640px) {
-    width: 120%;
+    width: 108%;
     padding: 0.5rem;
     margin-bottom: 0.75rem;
 

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

@@ -32,7 +32,7 @@ export class CategoriesComponent {
       case 'all':
         return 'tuiIconGridLarge'
       case 'bitcoin':
-        return 'tuiIconBitcoin'
+        return 'assets/img/icons/logo-bitcoin.svg'
       case 'messaging':
       case 'communications':
         return 'tuiIconMessageCircleLarge'

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

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

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

@@ -1,10 +1,7 @@
 .item-container {
-  height: 100%;
   position: relative;
-  min-width: 300px;
   border-radius: 1.5rem;
   padding: 5rem 2rem 2rem 2.5rem;
-  gap: 1rem;
   transition-property: transform;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 500ms;
@@ -56,21 +53,20 @@
   top: -2.5rem;
   border-radius: 9999px;
   object-fit: cover;
-  backdrop-filter: blur(24px);
-  background-color: rgb(0 0 0 / 0.5);
   transform: none;
 }
 
 .detail {
   margin-top: 0.75rem;
   mix-blend-mode: plus-lighter;
-
+  
   &-title {
     display: inline-block;
     font-size: 1.5rem;
     line-height: 2rem;
     margin-bottom: 0.25rem;
     font-weight: 400;
+    will-change: transform, text-indent;
   }
 
   &-description {

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

@@ -1,5 +1,11 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
-import { MarketplacePkg } from '../../../types'
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  inject,
+} from '@angular/core'
+import { MarketplacePkg, StoreIdentity } from '../../../types'
+import { AbstractMarketplaceService } from '../../../services/marketplace.service'
 
 @Component({
   selector: 'marketplace-item',
@@ -10,4 +16,16 @@ import { MarketplacePkg } from '../../../types'
 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.manifest.id}`
+    }
+  }
 }

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

@@ -3,10 +3,17 @@ import { NgModule } from '@angular/core'
 import { RouterModule } from '@angular/router'
 import { SharedPipesModule, TickerModule } from '@start9labs/shared'
 import { ItemComponent } from './item.component'
+import { TuiLetModule } from '@taiga-ui/cdk'
 
 @NgModule({
   declarations: [ItemComponent],
   exports: [ItemComponent],
-  imports: [CommonModule, RouterModule, SharedPipesModule, TickerModule],
+  imports: [
+    CommonModule,
+    RouterModule,
+    SharedPipesModule,
+    TickerModule,
+    TuiLetModule,
+  ],
 })
 export class ItemModule {}

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

@@ -1,19 +1,26 @@
 import { CommonModule, KeyValue } from '@angular/common'
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  inject,
+} from '@angular/core'
 import { EmverPipesModule } from '@start9labs/shared'
-import { Dependency, MarketplacePkg } from '../../../types'
+import { Dependency, MarketplacePkg, StoreIdentity } from '../../../types'
 import { RouterModule } from '@angular/router'
 import { TuiAvatarModule, TuiLineClampModule } from '@taiga-ui/kit'
+import { TuiLetModule } from '@taiga-ui/cdk'
+import { AbstractMarketplaceService } from '../../../services/marketplace.service'
 
 @Component({
   selector: 'marketplace-dep-item',
   template: `
-    <div class="outer-container">
+    <div class="outer-container" *tuiLet="marketplace$ | async as marketplace">
       <tui-avatar
         class="dep-img"
         [rounded]="true"
         [size]="'l'"
-        [avatarUrl]="getImage(dep.key)"
+        [avatarUrl]="getImage(dep.key, marketplace)"
       ></tui-avatar>
       <div>
         <tui-line-clamp
@@ -103,6 +110,7 @@ import { TuiAvatarModule, TuiLineClampModule } from '@taiga-ui/kit'
     TuiAvatarModule,
     EmverPipesModule,
     TuiLineClampModule,
+    TuiLetModule,
   ],
 })
 export class MarketplaceDepItemComponent {
@@ -112,11 +120,22 @@ export class MarketplaceDepItemComponent {
   @Input({ required: true })
   dep!: KeyValue<string, Dependency>
 
-  getImage(key: string): string {
+  private readonly marketplaceService = inject(AbstractMarketplaceService)
+  readonly marketplace$ = this.marketplaceService.getSelectedHost$()
+
+  getImage(key: string, marketplace: StoreIdentity | null) {
     const icon = this.pkg.dependencyMetadata[key]?.icon
-    // @TODO fix when registry api is updated to include mimetype in icon url
-    // return icon ? `data:image/png;base64,${icon}` : key.substring(0, 2)
-    return icon ? icon : key.substring(0, 2)
+
+    if (icon) {
+      try {
+        const iconUrl = new URL(icon)
+        return iconUrl.href
+      } catch (e) {
+        return `${marketplace?.url}package/v0/icon/${key}`
+      }
+    } else {
+      return key.substring(0, 2)
+    }
   }
 
   getTitle(key: string): string {

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

@@ -1,23 +1,30 @@
 import { CommonModule } from '@angular/common'
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  inject,
+} from '@angular/core'
 import { SharedPipesModule, TickerModule } from '@start9labs/shared'
-import { MarketplacePkg } from '../../../types'
+import { MarketplacePkg, StoreIdentity } from '../../../types'
+import { TuiLetModule } from '@taiga-ui/cdk'
+import { AbstractMarketplaceService } from '../../../services/marketplace.service'
 
 @Component({
   selector: 'marketplace-package-hero',
   template: `
-    <div class="outer-container">
+    <div class="outer-container" *tuiLet="marketplace$ | async as marketplace">
       <div class="inner-container box-shadow-lg">
         <!-- icon -->
         <img
-          [src]="pkg.icon | trustUrl"
+          [src]="determineIcon(marketplace) | trustUrl"
           class="box-shadow-lg"
           alt="{{ pkg.manifest.title }} Icon"
         />
         <!-- color background -->
         <div class="color-background">
           <img
-            [src]="pkg.icon | trustUrl"
+            [src]="determineIcon(marketplace) | trustUrl"
             alt="{{ pkg.manifest.title }} background image"
           />
         </div>
@@ -61,11 +68,11 @@ import { MarketplacePkg } from '../../../types'
         padding: 4rem 2rem 0 2rem;
 
         @media (min-width: 376px) {
-          min-height: 26vh;
+          min-height: 20vh;
         }
 
         @media (min-width: 768px) {
-          min-height: 14rem;
+          min-height: 11rem;
         }
 
         img {
@@ -157,9 +164,21 @@ import { MarketplacePkg } from '../../../types'
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [CommonModule, SharedPipesModule, TickerModule],
+  imports: [CommonModule, SharedPipesModule, TickerModule, TuiLetModule],
 })
 export class MarketplacePackageHeroComponent {
   @Input({ required: true })
   pkg!: MarketplacePkg
+
+  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.manifest.id}`
+    }
+  }
 }