fix: implement flavor across the app

web/projects/marketplace/src/components/menu/menu.component.scss

@@ -9,7 +9,7 @@ header {
   @include scrollbar-hidden();
 
   // TODO: Theme
-  background: #2B2B2F;
+  background: #2b2b2f;
   overflow: hidden;
   width: 100%;
   position: fixed;
@@ -33,7 +33,7 @@ header {
       1;
     border-width: 0;
     border-right: 0.125rem solid;
-    overflow: visible;
+    overflow: auto;
   }
 
   @media screen and (min-width: 1536px) {
@@ -133,11 +133,11 @@ header {
 
     &-sidebar {
       background-color: rgb(var(--tw-color-zinc-700) / 0.9);
-      height: calc(100vh - var(--portal-header-height));
       width: 70vw;
       display: flex;
       flex-direction: column;
       height: 100%;
+      overflow: auto;
 
       &-top {
         display: flex;

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

@@ -1,34 +1,30 @@
 import { CommonModule } from '@angular/common'
-import {
-  ChangeDetectionStrategy,
-  Component,
-  inject,
-  Input,
-} from '@angular/core'
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
+import { MarketplacePkg } from '@start9labs/marketplace'
 import { Exver, MarkdownPipeModule } from '@start9labs/shared'
-import { TuiButton, TuiLoader } from '@taiga-ui/core'
-import { TuiCardLarge } from '@taiga-ui/layout'
-import { PolymorpheusComponent } from '@taiga-ui/polymorpheus'
+import { TuiButton, TuiDialogContext, TuiLoader } from '@taiga-ui/core'
+import { TuiAccordion } from '@taiga-ui/kit'
+import {
+  POLYMORPHEUS_CONTEXT,
+  PolymorpheusComponent,
+} from '@taiga-ui/polymorpheus'
 import { map } from 'rxjs'
 import { AbstractMarketplaceService } from '../services/marketplace.service'
-import { MarketplacePkg } from '../types'
 
 @Component({
   standalone: true,
   template: `
     @if (notes$ | async; as notes) {
-      @for (note of notes | keyvalue: asIsOrder; track $index) {
-        <button tuiButton (click)="setSelected(note.key)">
-          {{ note.key }}
-        </button>
-        <div
-          tuiCardLarge
-          #element
-          [id]="note.key"
-          [style.max-height.px]="getDocSize(note.key, element)"
-          [innerHTML]="note.value | markdown"
-        ></div>
-      }
+      <tui-accordion>
+        @for (note of notes | keyvalue: asIsOrder; track $index) {
+          <tui-accordion-item>
+            {{ note.key }}
+            <ng-template tuiAccordionItemContent>
+              <div [innerHTML]="note.value | markdown"></div>
+            </ng-template>
+          </tui-accordion-item>
+        }
+      </tui-accordion>
     } @else {
       <tui-loader textContent="Loading Release Notes" />
     }
@@ -38,15 +34,14 @@ import { MarketplacePkg } from '../types'
     CommonModule,
     TuiButton,
     TuiLoader,
-    TuiCardLarge,
+    TuiAccordion,
     MarkdownPipeModule,
   ],
 })
 export class ReleaseNotesComponent {
-  @Input() pkg!: MarketplacePkg
-
-  private selected: string | null = null
   private readonly exver = inject(Exver)
+  private readonly pkg =
+    inject<TuiDialogContext<void, MarketplacePkg>>(POLYMORPHEUS_CONTEXT).data
 
   readonly notes$ = inject(AbstractMarketplaceService)
     .getSelectedStore$()
@@ -70,18 +65,6 @@ export class ReleaseNotesComponent {
       }),
     )
 
-  isSelected(key: string): boolean {
-    return this.selected === key
-  }
-
-  setSelected(selected: string) {
-    this.selected = this.isSelected(selected) ? null : selected
-  }
-
-  getDocSize(key: string, { scrollHeight }: HTMLElement) {
-    return this.isSelected(key) ? scrollHeight : 0
-  }
-
   asIsOrder(a: any, b: any) {
     return 0
   }

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()