highlight instructions if not viewed (#1731)

frontend/projects/ui/src/app/pages/apps-routes/app-actions/app-actions.page.ts

@@ -158,6 +158,10 @@ export class AppActionsPage {
 
     try {
       await this.embassyApi.uninstallPackage({ id: this.pkgId })
+      this.embassyApi.setDbValue({
+        pointer: `/ack-instructions/${this.pkgId}`,
+        value: false,
+      })
       this.navCtrl.navigateRoot('/services')
     } catch (e: any) {
       this.errToast.present(e)

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

@@ -2,7 +2,7 @@ import { Component } from '@angular/core'
 import { PatchDbService } from 'src/app/services/patch-db/patch-db.service'
 import { PackageDataEntry } from 'src/app/services/patch-db/data-model'
 import { Observable } from 'rxjs'
-import { filter, map, switchMapTo, take, takeUntil, tap } from 'rxjs/operators'
+import { filter, map, switchMap, take, takeUntil, tap } from 'rxjs/operators'
 import { isEmptyObject, exists, DestroyService } from '@start9labs/shared'
 import { ApiService } from 'src/app/services/api/embassy-api.service'
 import { parseDataModel, RecoveredInfo } from 'src/app/util/parse-data-model'
@@ -16,7 +16,6 @@ import { parseDataModel, RecoveredInfo } from 'src/app/util/parse-data-model'
 export class AppListPage {
   pkgs: readonly PackageDataEntry[] = []
   recoveredPkgs: readonly RecoveredInfo[] = []
-  order: readonly string[] = []
   reordering = false
 
   readonly connected$ = this.patch.connected$
@@ -38,17 +37,11 @@ export class AppListPage {
         filter(data => exists(data) && !isEmptyObject(data)),
         take(1),
         map(parseDataModel),
-        tap(({ order, pkgs, recoveredPkgs }) => {
+        tap(({ pkgs, recoveredPkgs }) => {
           this.pkgs = pkgs
           this.recoveredPkgs = recoveredPkgs
-          this.order = order
-
-          // set order in UI DB if there were unknown packages
-          if (order.length < pkgs.length) {
-            this.setOrder()
-          }
         }),
-        switchMapTo(this.watchNewlyRecovered()),
+        switchMap(() => this.watchNewlyRecovered()),
         takeUntil(this.destroy$),
       )
       .subscribe()
@@ -88,7 +81,7 @@ export class AppListPage {
   }
 
   private setOrder(): void {
-    this.order = this.pkgs.map(pkg => pkg.manifest.id)
-    this.api.setDbValue({ pointer: '/pkg-order', value: this.order })
+    const order = this.pkgs.map(pkg => pkg.manifest.id)
+    this.api.setDbValue({ pointer: '/pkg-order', value: order })
   }
 }

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

@@ -5,6 +5,7 @@
   detail
   (click)="button.action()"
   [disabled]="button.disabled"
+  [ngClass]="{ highlighted: button.highlighted$ | async }"
 >
   <ion-icon slot="start" [name]="button.icon"></ion-icon>
   <ion-label>

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

@@ -0,0 +1,6 @@
+.highlighted {
+  * {
+    color: var(--ion-color-dark);
+    font-weight: bold;
+  }
+}

frontend/projects/ui/src/app/pages/apps-routes/app-show/components/app-show-menu/app-show-menu.component.ts

@@ -4,6 +4,7 @@ import { Button } from '../../pipes/to-buttons.pipe'
 @Component({
   selector: 'app-show-menu',
   templateUrl: './app-show-menu.component.html',
+  styleUrls: ['./app-show-menu.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AppShowMenuComponent {

frontend/projects/ui/src/app/pages/apps-routes/app-show/pipes/to-buttons.pipe.ts

@@ -13,14 +13,16 @@ import {
 } from 'src/app/services/patch-db/data-model'
 import { ModalService } from 'src/app/services/modal.service'
 import { ApiService } from 'src/app/services/api/embassy-api.service'
-import { from } from 'rxjs'
+import { from, map, Observable } from 'rxjs'
 import { Marketplace } from '@start9labs/marketplace'
 import { ActionMarketplaceComponent } from 'src/app/modals/action-marketplace/action-marketplace.component'
+import { PatchDbService } from 'src/app/services/patch-db/patch-db.service'
 export interface Button {
   title: string
   description: string
   icon: string
   action: Function
+  highlighted$?: Observable<boolean>
   disabled?: boolean
 }
 
@@ -36,6 +38,7 @@ export class ToButtonsPipe implements PipeTransform {
     private readonly modalCtrl: ModalController,
     private readonly modalService: ModalService,
     private readonly apiService: ApiService,
+    private readonly patch: PatchDbService,
   ) {}
 
   transform(
@@ -52,6 +55,9 @@ export class ToButtonsPipe implements PipeTransform {
         title: 'Instructions',
         description: `Understand how to use ${pkgTitle}`,
         icon: 'list-outline',
+        highlighted$: this.patch
+          .watch$('ui', 'ack-instructions', pkg.manifest.id)
+          .pipe(map(seen => !seen)),
       },
       // config
       {
@@ -111,6 +117,11 @@ export class ToButtonsPipe implements PipeTransform {
   }
 
   private async presentModalInstructions(pkg: PackageDataEntry) {
+    this.apiService.setDbValue({
+      pointer: `/ack-instructions/${pkg.manifest.id}`,
+      value: true,
+    })
+
     const modal = await this.modalCtrl.create({
       componentProps: {
         title: 'Instructions',

frontend/projects/ui/src/app/services/api/mock-patch.ts

@@ -23,6 +23,7 @@ export const mockPatchData: DataModel = {
         },
       },
     },
+    'ack-instructions': {},
   },
   'server-info': {
     id: 'abcdefgh',

frontend/projects/ui/src/app/services/patch-db/data-model.ts

@@ -22,6 +22,7 @@ export interface UIData {
       'high-score': number
     }
   }
+  'ack-instructions': Record<string, boolean>
 }
 
 export interface UIMarketplaceData {

frontend/projects/ui/src/app/util/get-server-info.ts

@@ -1,4 +1,3 @@
-import { first } from 'rxjs/operators'
 import { PatchDbService } from 'src/app/services/patch-db/patch-db.service'
 import { ServerInfo } from 'src/app/services/patch-db/data-model'
 import { firstValueFrom } from 'rxjs'

frontend/projects/ui/src/app/util/parse-data-model.ts

@@ -9,8 +9,7 @@ export function parseDataModel(data: DataModel): ParsedData {
     JSON.stringify(data['package-data']),
   )
 
-  const order = [...(data.ui['pkg-order'] || [])]
-  const pkgs: PackageDataEntry[] = []
+  // recovered packages (0.2.x)
   const recoveredPkgs = Object.entries(data['recovered-packages'])
     .filter(([id, _]) => !all[id])
     .map(([id, val]) => ({
@@ -18,6 +17,9 @@ export function parseDataModel(data: DataModel): ParsedData {
       id,
     }))
 
+  // installed packages
+  const order = [...(data.ui['pkg-order'] || [])]
+  const pkgs: PackageDataEntry[] = []
   // add known packages in preferential order
   order.forEach(id => {
     if (all[id]) {
@@ -33,7 +35,6 @@ export function parseDataModel(data: DataModel): ParsedData {
   })
 
   return {
-    order,
     pkgs,
     recoveredPkgs,
   }
@@ -44,7 +45,6 @@ export interface RecoveredInfo extends RecoveredPackageDataEntry {
 }
 
 interface ParsedData {
-  order: string[]
   pkgs: PackageDataEntry[]
   recoveredPkgs: RecoveredInfo[]
 }