fix: implement flavor across the app

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

@@ -1,24 +1,15 @@
-<button
-  *ngFor="let cat of categories || fallback | keyvalue"
-  (click)="switchCategory(cat.key)"
-  [class.category_selected]="cat.key === category"
->
-  <div
-    class="category-wrapper"
-    [class.tui-skeleton]="!categories"
-    [class.tui-skeleton_rounded]="!categories"
+@for (cat of categories || fallback | keyvalue: asIsOrder; track $index) {
+  <button
+    (click)="switchCategory(cat.key)"
+    [class.category_selected]="cat.key === category"
   >
-    <tui-icon tuiAppearance="icon" [icon]="determineIcon(cat.key)" />
-  </div>
-  <span
-    class="category-title"
-    [class.tui-skeleton]="!categories"
-    [class.tui-skeleton_rounded]="!categories"
-  >
-    {{
-      cat.key === 'ai'
-        ? (cat.key | uppercase)
-        : (cat.value.name | titlecase) || 'Loading category...'
-    }}
-  </span>
-</button>
+    <div class="category-wrapper" [tuiSkeleton]="!categories">
+      <tui-icon tuiAppearance="icon" [icon]="determineIcon(cat.key)" />
+    </div>
+    <span class="category-title" [tuiSkeleton]="categories ? false : 3">
+      {{
+        cat.key === 'ai' ? (cat.key | uppercase) : (cat.value.name | titlecase)
+      }}
+    </span>
+  </button>
+}

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

@@ -7,6 +7,21 @@ import {
 } from '@angular/core'
 import { T } from '@start9labs/start-sdk'
 
+const ICONS: Record<string, string> = {
+  all: '@tui.layout-grid',
+  bitcoin: '@tui.bitcoin',
+  messaging: '@tui.message-circle',
+  communications: '@tui.message-circle',
+  data: '@tui.file-text',
+  'developer tools': '@tui.table-split',
+  featured: '@tui.star',
+  lightning: '@tui.zap',
+  media: '@tui.circle-play',
+  networking: '@tui.globe',
+  social: '@tui.users',
+  ai: '@tui.cpu',
+}
+
 @Component({
   selector: 'marketplace-categories',
   templateUrl: 'categories.component.html',
@@ -37,32 +52,10 @@ export class CategoriesComponent {
   }
 
   determineIcon(category: string): string {
-    switch (category.toLowerCase()) {
-      case 'all':
-        return '@tui.layout-grid'
-      case 'bitcoin':
-        return '@tui.bitcoin'
-      case 'messaging':
-      case 'communications':
-        return '@tui.message-circle'
-      case 'data':
-        return '@tui.file-text'
-      case 'developer tools':
-        return '@tui.table-split'
-      case 'featured':
-        return '@tui.star'
-      case 'lightning':
-        return '@tui.zap'
-      case 'media':
-        return '@tui.circle-play'
-      case 'networking':
-        return '@tui.globe'
-      case 'social':
-        return '@tui.users'
-      case 'ai':
-        return '@tui.cpu'
-      default:
-        return '@tui.box'
-    }
+    return ICONS[category.toLowerCase()] || '@tui.box'
+  }
+
+  asIsOrder(a: any, b: any) {
+    return 0
   }
 }

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

@@ -1,12 +1,13 @@
 import { TuiIcon, TuiAppearance } from '@taiga-ui/core'
 import { CommonModule } from '@angular/common'
 import { NgModule } from '@angular/core'
+import { TuiSkeleton } from '@taiga-ui/kit'
 
 import { CategoriesComponent } from './categories.component'
 import { RouterModule } from '@angular/router'
 
 @NgModule({
-  imports: [RouterModule, CommonModule, TuiAppearance, TuiIcon],
+  imports: [RouterModule, CommonModule, TuiAppearance, TuiIcon, TuiSkeleton],
   declarations: [CategoriesComponent],
   exports: [CategoriesComponent],
 })

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

@@ -5,9 +5,7 @@
     <button tuiButton iconEnd="@tui.chevron-right" (click)="onPast()">
       Past Release Notes
     </button>
-  </div>
-  <div class="box-container">
-    <h2 class="additional-detail-title">About</h2>
+    <h2 class="additional-detail-title" [style.margin-top.rem]="2">About</h2>
     <p>{{ pkg.description.long }}</p>
     <a
       *ngIf="pkg.marketingSite as url"

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

@@ -3,17 +3,10 @@
   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;
-  }
-
   p {
     font-size: 1rem;
     line-height: 1.5rem;
     margin-bottom: 0.75rem;
     pointer-events: none;
   }
-}
+}

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

@@ -22,7 +22,7 @@ export class AboutComponent {
 
   async onPast() {
     this.dialogs
-      .open(RELEASE_NOTES, { label: 'Past Release Notes' })
+      .open(RELEASE_NOTES, { label: 'Past Release Notes', data: this.pkg })
       .subscribe()
   }
 }

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

@@ -2,6 +2,7 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
 import { RouterLink } from '@angular/router'
 import { SharedPipesModule } from '@start9labs/shared'
 import { TuiTitle } from '@taiga-ui/core'
+import { TuiAvatar } from '@taiga-ui/kit'
 import { TuiCell } from '@taiga-ui/layout'
 import { MarketplacePkg } from '../../../types'
 
@@ -9,23 +10,39 @@ import { MarketplacePkg } from '../../../types'
   standalone: true,
   selector: 'marketplace-flavors',
   template: `
-    <h2>Alternative Implementations</h2>
-    @for (pkg of pkgs; track $index) {
-      <a
-        tuiCell
-        [routerLink]="['/marketplace', pkg.id]"
-        [queryParams]="{ flavor: pkg.flavor }"
-      >
-        <img alt="" style="border-radius: 100%" [src]="pkg.icon | trustUrl" />
-        <span tuiTitle>
-          {{ pkg.title }}
-          <span tuiSubtitle>{{ pkg.version }}</span>
-        </span>
-      </a>
+    <div class="background-border box-shadow-lg shadow-color-light">
+      <div class="box-container">
+        <h2 class="additional-detail-title">Alternative Implementations</h2>
+        @for (pkg of pkgs; track $index) {
+          <a
+            tuiCell
+            [routerLink]="[]"
+            [queryParams]="{ id: pkg.id, flavor: pkg.flavor }"
+          >
+            <tui-avatar [src]="pkg.icon | trustUrl" />
+            <span tuiTitle>
+              {{ pkg.title }}
+              <span tuiSubtitle>{{ pkg.version }}</span>
+            </span>
+          </a>
+        }
+      </div>
+    </div>
+  `,
+  styles: `
+    .box-container {
+      background-color: rgb(39 39 42);
+      border-radius: 0.75rem;
+      padding: 1.75rem;
+    }
+
+    [tuiCell] {
+      border-radius: 0.5rem;
+      margin: 0 -1rem;
     }
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [RouterLink, TuiCell, TuiTitle, SharedPipesModule],
+  imports: [RouterLink, TuiCell, TuiTitle, SharedPipesModule, TuiAvatar],
 })
 export class FlavorsComponent {
   @Input()