refactor: decompose app component

frontend/projects/ui/src/app/pages/apps-routes/app-show/components/app-show-dependencies/app-show-dependencies.component.html

@@ -5,7 +5,7 @@
     <img [src]="dep.icon" alt="" />
   </ion-thumbnail>
   <ion-label>
-    <h2 class="inline">
+    <h2 class="montserrat">
       <ion-icon
         *ngIf="!!dep.errorText"
         class="icon"

frontend/projects/ui/src/app/pages/apps-routes/app-show/components/app-show-dependencies/app-show-dependencies.component.scss

@@ -1,7 +1,3 @@
-.inline {
-  font-family: 'Montserrat', sans-serif;
-}
-
 .icon {
   padding-right: 4px;
 }

frontend/projects/ui/src/app/pages/apps-routes/app-show/components/app-show-header/app-show-header.component.html

@@ -8,7 +8,10 @@
         <img [src]="pkg['static-files'].icon" alt="" />
       </ion-avatar>
       <ion-label>
-        <h1 class="name" [class.less-large]="pkg.manifest.title.length > 20">
+        <h1
+          class="montserrat"
+          [class.less-large]="pkg.manifest.title.length > 20"
+        >
           {{ pkg.manifest.title }}
         </h1>
         <h2>{{ pkg.manifest.version | displayEmver }}</h2>

frontend/projects/ui/src/app/pages/apps-routes/app-show/components/app-show-header/app-show-header.component.scss

@@ -1,7 +1,3 @@
-.name {
-  font-family: 'Montserrat', sans-serif;
-}
-
 .less-large {
   font-size: 18px !important;
 }

frontend/projects/ui/src/app/pages/marketplace-routes/marketplace-list/marketplace-list-content/marketplace-list-content.component.html

@@ -1,4 +1,4 @@
-<h1 class="heading ion-text-center">{{ name }}</h1>
+<h1 class="heading montserrat ion-text-center">{{ name }}</h1>
 
 <marketplace-search [(query)]="query"></marketplace-search>
 

frontend/projects/ui/src/app/pages/marketplace-routes/marketplace-list/marketplace-list-content/marketplace-list-content.component.scss

@@ -1,5 +1,4 @@
 .heading {
-  font-family: 'Montserrat', sans-serif;
   font-size: 42px;
   margin: 32px 0;
 }

frontend/projects/ui/src/app/pages/marketplace-routes/marketplace-list/marketplace-list.page.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core'
-import { defer, Observable } from 'rxjs'
+import { Observable } from 'rxjs'
 import { filter, first, map, startWith, switchMapTo, tap } from 'rxjs/operators'
 import { exists, isEmptyObject } from '@start9labs/shared'
 import {
@@ -16,14 +16,13 @@ import { spreadProgress } from '../utils/spread-progress'
   templateUrl: './marketplace-list.page.html',
 })
 export class MarketplaceListPage {
-  readonly localPkgs$: Observable<Record<string, PackageDataEntry>> = defer(
-    () => this.patch.watch$('package-data'),
-  ).pipe(
-    filter(data => exists(data) && !isEmptyObject(data)),
-    tap(pkgs => Object.values(pkgs).forEach(spreadProgress)),
-    map(pkgs => ({ ...pkgs })),
-    startWith({}),
-  )
+  readonly localPkgs$: Observable<Record<string, PackageDataEntry>> = this.patch
+    .watch$('package-data')
+    .pipe(
+      filter(data => exists(data) && !isEmptyObject(data)),
+      tap(pkgs => Object.values(pkgs).forEach(spreadProgress)),
+      startWith({}),
+    )
 
   readonly categories$ = this.marketplaceService
     .getCategories()
@@ -31,13 +30,13 @@ export class MarketplaceListPage {
       map(categories => new Set(['featured', 'updates', ...categories, 'all'])),
     )
 
-  readonly pkgs$: Observable<MarketplacePkg[]> = defer(() =>
-    this.patch.watch$('server-info'),
-  ).pipe(
-    filter(data => exists(data) && !isEmptyObject(data)),
-    first(),
-    switchMapTo(this.marketplaceService.getPackages()),
-  )
+  readonly pkgs$: Observable<MarketplacePkg[]> = this.patch
+    .watch$('server-info')
+    .pipe(
+      filter(data => exists(data) && !isEmptyObject(data)),
+      first(),
+      switchMapTo(this.marketplaceService.getPackages()),
+    )
 
   readonly name$: Observable<string> = this.marketplaceService
     .getMarketplace()

frontend/projects/ui/src/app/pages/marketplace-routes/marketplace-show/marketplace-show-dependent/marketplace-show-dependent.component.html

@@ -2,7 +2,7 @@
 <ion-item *ngIf="dependentInfo" lines="none" class="rec-item">
   <ion-label>
     <h2 class="heading">
-      <ion-text class="title">
+      <ion-text class="montserrat title">
         {{ title }}
       </ion-text>
     </h2>

frontend/projects/ui/src/app/pages/marketplace-routes/marketplace-show/marketplace-show-dependent/marketplace-show-dependent.component.scss

@@ -5,7 +5,6 @@
 
 .title {
   margin: 5px;
-  font-family: 'Montserrat', sans-serif;
   font-size: 18px;
 }
 

frontend/projects/ui/src/app/pages/server-routes/server-show/server-show.module.ts

@@ -6,7 +6,6 @@ import { ServerShowPage } from './server-show.page'
 import { FormsModule } from '@angular/forms'
 import { TextSpinnerComponentModule } from '@start9labs/shared'
 import { BadgeMenuComponentModule } from 'src/app/components/badge-menu-button/badge-menu.component.module'
-import { SnakePageModule } from 'src/app/modals/snake/snake.module'
 
 const routes: Routes = [
   {
@@ -23,7 +22,6 @@ const routes: Routes = [
     RouterModule.forChild(routes),
     TextSpinnerComponentModule,
     BadgeMenuComponentModule,
-    SnakePageModule,
   ],
   declarations: [ServerShowPage],
 })