Feature/marketplace redesign (#2395)

* wip

* update marketplace categories styling

* update logo icons

* add sort pipe

* update search component styling

* clean up categories component

* cleanup and remove unnecessary sort pipe

* query packages in selected category

* fix search styling

* add reg icon and font, adjust category styles

* fix build from rebasing integration/refactors

* adjust marketplace types for icon with store data, plus formatting

* formatting

* update categories and search

* hover styling for categories

* category styling

* refactor for category as a behavior subject

* more category styling

* base functionality with new marketplace components

* styling cleanup

* misc style fixes and fix category selection from package page

* fixes from review feedback

* add and style additional details

* implement release notes modal

* fix menu when on service show page mobile to display change marketplace

* style and responsiveness fixes

* rename header to sidebar

* input icon config to sidebar

* add mime type pipe and type fn

* review feedback fixes

* skeleton text, more abstraction

* reorder categories, clean up a little

* audit sidebar, categories, store-icon, marketplace-sidebar, search

* finish code cleanup and fix few bugs

* misc fixes and cleanup

* fix broken styles and markdown

* bump shared marketplace version

* more cleanup

* sync package lock

* rename sidebar component to menu

* wip preview sidebar

* sync package lock

* breakout package show elements into components

* link to brochure in preview; custom taiga button styles

* move marketplace preview component into ui; open preview when viewing service in marketplace

* sync changes post file struture rename

* further cleanup

* create service for sidebar toggle and cleanup marketplace components

* bump shared marketplace version

* bump shared for new images needed for brochure marketplace

* cleanup

---------

Co-authored-by: Matt Hill <mattnine@protonmail.com>

web/projects/ui/src/app/services/api/api.fixures.ts

@@ -6,17 +6,17 @@ import {
   ServerStatusInfo,
 } from 'src/app/services/patch-db/data-model'
 import {
-  RR,
-  NotificationLevel,
-  ServerNotifications,
   Metrics,
+  NotificationLevel,
+  RR,
+  ServerNotifications,
 } from './api.types'
 
 import { BTC_ICON, LND_ICON, PROXY_ICON } from './api-icons'
 import {
   DependencyMetadata,
-  MarketplacePkg,
   Manifest,
+  MarketplacePkg,
 } from '@start9labs/marketplace'
 import { Log } from '@start9labs/shared'
 import { unionSelectKey } from '@start9labs/start-sdk/lib/config/configTypes'
@@ -102,7 +102,8 @@ export module Mock {
     assets: {
       icon: 'icon.png',
     },
-    'release-notes': 'Dual funded channels!',
+    'release-notes':
+      'Dual funded channels! And lots more amazing new features. Also includes several bugfixes and performance enhancements.',
     license: 'MIT',
     'wrapper-repo': 'https://github.com/start9labs/lnd-wrapper',
     'upstream-repo': 'https://github.com/lightningnetwork/lnd',
@@ -203,7 +204,7 @@ export module Mock {
           ...Mock.MockManifestBitcoind,
           version: '0.19.0',
         },
-        categories: ['bitcoin', 'cryptocurrency'],
+        categories: ['bitcoin', 'cryptocurrency', 'featured'],
         versions: ['0.19.0', '0.20.0', '0.21.0'],
         'dependency-metadata': {},
         'published-at': new Date().toISOString(),
@@ -240,6 +241,7 @@ export module Mock {
         icon: BTC_ICON,
         license: 'licenseUrl',
         instructions: 'instructionsUrl',
+        screenshots: ['one.png', 'two.png', 'three.png'],
         manifest: {
           ...Mock.MockManifestBitcoind,
           'release-notes':

web/projects/ui/src/app/services/category.service.ts

@@ -0,0 +1,26 @@
+import { Injectable } from '@angular/core'
+import { Observable } from 'rxjs'
+import { AbstractCategoryService } from '@start9labs/marketplace'
+
+@Injectable()
+export class CategoryService extends AbstractCategoryService {
+  getCategory$(): Observable<string> {
+    return this.category$
+  }
+
+  changeCategory(category: string) {
+    this.category$.next(category)
+  }
+
+  setQuery(query: string) {
+    this.query$.next(query)
+  }
+
+  getQuery$(): Observable<string> {
+    return this.query$
+  }
+
+  resetQuery() {
+    this.query$.next('')
+  }
+}

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

@@ -1,27 +1,28 @@
 import { Injectable } from '@angular/core'
 import { sameUrl } from '@start9labs/shared'
 import {
-  MarketplacePkg,
   AbstractMarketplaceService,
-  StoreData,
   Marketplace,
-  StoreInfo,
+  MarketplacePkg,
+  StoreData,
   StoreIdentity,
+  StoreIdentityWithData,
+  StoreInfo,
 } from '@start9labs/marketplace'
 import { PatchDB } from 'patch-db-client'
 import {
   BehaviorSubject,
+  catchError,
   combineLatest,
   distinctUntilKeyChanged,
+  filter,
   from,
+  map,
   mergeMap,
   Observable,
   of,
-  scan,
-  catchError,
-  filter,
-  map,
   pairwise,
+  scan,
   shareReplay,
   startWith,
   switchMap,
@@ -162,6 +163,32 @@ export class MarketplaceService implements AbstractMarketplaceService {
     return this.selectedStore$
   }
 
+  getSelectedStoreWithCategories$() {
+    return this.selectedHost$.pipe(
+      switchMap(({ url }) =>
+        this.marketplace$.pipe(
+          map(m => m[url]),
+          filter(Boolean),
+          map(({ info, packages }) => {
+            const categories = new Set<string>()
+            if (info.categories.includes('featured')) categories.add('featured')
+            categories.add('all')
+            info.categories.forEach(c => categories.add(c))
+
+            return {
+              url,
+              info: {
+                ...info,
+                categories: Array.from(categories),
+              },
+              packages,
+            }
+          }),
+        ),
+      ),
+    )
+  }
+
   getPackage$(
     id: string,
     version: string,

web/projects/ui/src/app/services/sidebar.service.ts

@@ -0,0 +1,21 @@
+import { Injectable } from '@angular/core'
+import { BehaviorSubject, Observable } from 'rxjs'
+
+@Injectable({
+  providedIn: 'root',
+})
+export class SidebarService {
+  openMap: Record<string, BehaviorSubject<boolean>> = {}
+
+  setMap(ids: string[]) {
+    ids.map(i => (this.openMap[i] = new BehaviorSubject(false)))
+  }
+
+  getToggleState(pkgId: string): Observable<boolean> {
+    return this.openMap[pkgId]
+  }
+
+  toggleState(pkgId: string, open: boolean) {
+    this.openMap[pkgId].next(open)
+  }
+}