Fix updates badge and rework updates page (#2205)

* fix updates badge and rework updates page

* resize icons

* better language around browser tab title

* no period

* updates tab more fixes

frontend/projects/ui/src/app/app/menu/menu.component.ts

@@ -6,7 +6,15 @@ import {
 } from '@angular/core'
 import { EOSService } from '../../services/eos.service'
 import { PatchDB } from 'patch-db-client'
-import { combineLatest, filter, first, map, Observable, switchMap } from 'rxjs'
+import {
+  combineLatest,
+  filter,
+  map,
+  Observable,
+  startWith,
+  switchMap,
+  withLatestFrom,
+} from 'rxjs'
 import { AbstractMarketplaceService } from '@start9labs/marketplace'
 import { MarketplaceService } from 'src/app/services/marketplace.service'
 import { DataModel } from 'src/app/services/patch-db/data-model'
@@ -60,8 +68,18 @@ export class MenuComponent {
 
   private readonly local$ = this.connectionService.connected$.pipe(
     filter(Boolean),
-    switchMap(() => this.patch.watch$('package-data')),
-    first(),
+    withLatestFrom(this.patch.watch$('package-data')),
+    switchMap(([_, outer]) =>
+      this.patch.watch$('package-data').pipe(
+        filter(
+          pkgs =>
+            !!Object.values(pkgs).find(
+              pkg => pkg['install-progress']?.['unpack-complete'],
+            ),
+        ),
+        startWith(outer),
+      ),
+    ),
   )
 
   readonly updateCount$: Observable<number> = combineLatest([

frontend/projects/ui/src/app/pages/notifications/notifications.page.html

@@ -88,9 +88,9 @@
               <b>
                 <span *ngIf="not['package-id'] as pkgId">
                   <!-- @TODO remove $any when Angular gets smart enough -->
-                  {{ $any(packageData[pkgId])?.manifest?.title || pkgId }} -
+                  {{ $any(packageData[pkgId])?.manifest.title || pkgId }} -
                 </span>
-                <ion-text [color]="getColor(not)"> {{ not.title }} </ion-text>
+                <ion-text [color]="getColor(not)">{{ not.title }}</ion-text>
               </b>
             </h2>
             <h2 class="notification-message">{{ truncate(not.message) }}</h2>

frontend/projects/ui/src/app/pages/notifications/notifications.page.ts

@@ -15,6 +15,7 @@ import { ErrorToastService } from '@start9labs/shared'
 import { BackupReportPage } from 'src/app/modals/backup-report/backup-report.page'
 import { PatchDB } from 'patch-db-client'
 import { DataModel } from 'src/app/services/patch-db/data-model'
+import { first } from 'rxjs'
 
 @Component({
   selector: 'notifications',
@@ -28,7 +29,7 @@ export class NotificationsPage {
   needInfinite = false
   fromToast = !!this.route.snapshot.queryParamMap.get('toast')
   readonly perPage = 40
-  readonly packageData$ = this.patch.watch$('package-data')
+  readonly packageData$ = this.patch.watch$('package-data').pipe(first())
 
   constructor(
     private readonly embassyApi: ApiService,

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

@@ -57,12 +57,12 @@ export class ServerShowPage {
     @Inject(DOCUMENT) private readonly document: Document,
   ) {}
 
-  async presentModalName(): Promise<void> {
+  async setBrowserTab(): Promise<void> {
     const chosenName = await firstValueFrom(this.patch.watch$('ui', 'name'))
 
     const options: GenericInputOptions = {
-      title: 'Set Device Name',
-      message: 'This will be displayed in your browser tab',
+      title: 'Browser Tab Title',
+      message: `This value will be displayed as the title of your browser tab.`,
       label: 'Device Name',
       useMask: false,
       placeholder: 'embassyOS',
@@ -391,9 +391,9 @@ export class ServerShowPage {
       },
       {
         title: 'Browser Tab Title',
-        description: `Customize the display name of your browser tab. This does not affect your server's LAN address.`,
+        description: `Customize the display name of your browser tab`,
         icon: 'pricetag-outline',
-        action: () => this.presentModalName(),
+        action: () => this.setBrowserTab(),
         detail: false,
         disabled$: of(false),
       },

frontend/projects/ui/src/app/pages/updates/updates.page.html

@@ -9,16 +9,14 @@
 
 <ion-content class="with-widgets">
   <ion-item-group *ngIf="data$ | async as data">
-    <ng-container *ngFor="let host of data.hosts">
-      <div class="header">
-        <div class="header_items">
-          <store-icon [url]="host.url" size="48px"></store-icon>
-          <div class="header_title pl-1">
-            <h1>{{ host.name }}</h1>
-            <p>{{ host.url }}</p>
-          </div>
-        </div>
-      </div>
+    <div *ngFor="let host of data.hosts">
+      <ion-item-divider class="inline">
+        <store-icon [url]="host.url" size="26px"></store-icon>
+        &nbsp;
+        <span style="padding-left: 8px; letter-spacing: 0.7px; font-size: 20px">
+          {{ host.name }}
+        </span>
+      </ion-item-divider>
 
       <ion-item *ngIf="data.errors.includes(host.url)">
         <ion-text color="danger">Request Failed</ion-text>
@@ -30,50 +28,35 @@
         <ng-container
           *ngIf="packages | filterUpdates : data.localPkgs as updates"
         >
-          <ion-grid>
-            <div *ngFor="let pkg of updates">
-              <ng-container *ngIf="data.localPkgs[pkg.manifest.id] as local">
-                <ion-row>
-                  <ion-col>
-                    <ion-accordion-group class="accordian-padding">
-                      <ion-accordion class="item-container">
-                        <ion-item slot="header">
-                          <ion-col class="accordian-padding">
-                            <ion-row
-                              (click)="viewInMarketplace($event, local)"
-                              style="cursor: pointer"
-                            >
-                              <ion-thumbnail class="align-center">
+          <ion-accordion-group multiple="true" class="ion-padding-start">
+            <div *ngFor="let pkg of updates" class="item-container">
+              <ion-accordion *ngIf="data.localPkgs[pkg.manifest.id] as local">
+                <ion-item lines="none" slot="header">
+                  <ion-avatar slot="start" style="width: 50px; height: 50px">
                     <img
                       [src]="'data:image/png;base64,' + pkg.icon | trustUrl"
                     />
-                              </ion-thumbnail>
-                              <ion-label class="pl-1">
-                                <h2>{{ pkg.manifest.title }}</h2>
-                                <h3 class="inline">
-                                  <span>
-                                    {{ local.manifest.version | displayEmver }}
-                                  </span>
+                  </ion-avatar>
+                  <ion-label>
+                    <h1 style="line-height: 1.3">{{ pkg.manifest.title }}</h1>
+                    <h2 class="inline">
+                      <span>{{ local.manifest.version | displayEmver }}</span>
                       &nbsp;
                       <ion-icon name="arrow-forward"></ion-icon>
                       &nbsp;
                       <ion-text color="success">
                         {{ pkg.manifest.version | displayEmver }}
                       </ion-text>
-                                </h3>
+                    </h2>
                     <p
                       *ngIf="marketplaceService.updateErrors[pkg.manifest.id] as error"
                     >
-                                  <ion-text color="danger">
-                                    {{ error }}
-                                  </ion-text>
+                      <ion-text color="danger">{{ error }}</ion-text>
                     </p>
                   </ion-label>
-                            </ion-row>
-                          </ion-col>
-                          <div class="align-center">
+                  <div slot="end" style="margin-left: 4px">
                     <round-progress
-                              *ngIf="local.state === PackageState.Updating else notUpdating"
+                      *ngIf="local.state === 'updating' else notUpdating"
                       [current]="local['install-progress'] | installProgress"
                       [max]="100"
                       [radius]="13"
@@ -88,14 +71,12 @@
                       ></ion-spinner>
                       <ng-template #updateBtn>
                         <ion-button
-                                  (click)="tryUpdate(pkg.manifest, host.url, local)"
+                          (click)="tryUpdate(pkg.manifest, host.url, local, $event)"
                           [color]="marketplaceService.updateErrors[pkg.manifest.id] ? 'danger' : 'tertiary'"
                           strong
-                                  size="default"
                         >
-                                  {{
-                                  marketplaceService.updateErrors[pkg.manifest.id]
-                                  ? 'Retry' : 'Update' }}
+                          {{ marketplaceService.updateErrors[pkg.manifest.id] ?
+                          'Retry' : 'Update' }}
                         </ion-button>
                       </ng-template>
                     </ng-template>
@@ -103,19 +84,23 @@
                 </ion-item>
                 <div class="ion-padding" slot="content">
                   <div class="notes">
-                            <h4>What's new</h4>
+                    <h5>What's new</h5>
                     <p
                       [innerHTML]="pkg.manifest['release-notes'] | markdown"
                     ></p>
                   </div>
+                  <ion-button
+                    fill="clear"
+                    strong
+                    (click)="viewInMarketplace($event, local)"
+                  >
+                    View listing
+                    <ion-icon slot="end" name="open-outline"></ion-icon>
+                  </ion-button>
                 </div>
               </ion-accordion>
-                    </ion-accordion-group>
-                  </ion-col>
-                </ion-row>
-              </ng-container>
             </div>
-          </ion-grid>
+          </ion-accordion-group>
           <ion-item
             *ngIf="!updates.length"
             class="ion-text-center ion-padding"
@@ -127,8 +112,10 @@
       </ng-container>
 
       <ng-template #loading>
+        <div class="ion-padding">
           <skeleton-list [showAvatar]="true" [rows]="2"></skeleton-list>
+        </div>
       </ng-template>
-    </ng-container>
+    </div>
   </ion-item-group>
 </ion-content>

frontend/projects/ui/src/app/pages/updates/updates.page.scss

@@ -1,77 +1,26 @@
 .item-container {
-  padding-bottom: 24px;
   border-bottom: 1px solid #373737;
+  padding: 12px 0;
 }
 
 .notes {
   margin-left: 20px;
 
-  h4 {
-    font-size: 1rem;
+  h5 {
     font-weight: 600;
   }
 }
 
-.header {
-  padding: 1.5rem;
-  background: var(--ion-color-medium-tint);
-
-  &_items {
-    display: flex;
-    align-items: center;
-    flex-direction: row;
-  }
-
-  h1 {
-    margin: 0 0 5px 0;
-  }
-
-  p {
-    font-size: 14px;
-    margin: 0;
-  }
-}
-
-img {
-  height: 85%;
-  width: 85%;
-}
-
-.align-center {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.pl-1 {
-  padding-left: 1rem;
-}
-
-p {
-  font-size: 1rem;
-  margin-top: 0;
+ion-item-divider {
+  --padding-top: 8px;
+  --padding-bottom: 8px;
+  --background: var(--ion-color-medium-tint);
 }
 
 ion-item {
   --background-hover: none;
-}
   
-ion-label {
-  h2 {
-    font-size: 1.2rem;
-  }
-
-  h3 {
-    font-size: 1rem;
-  }
-}
-
-.accordian-padding {
-  padding: 0.5rem;
-}
-
-@media (max-width: 500px) {
-  .accordian-padding {
-    padding: 0.5rem 0 0.5rem 0;
+  &::part(native) {
+    cursor: context-menu;
   }
 }

frontend/projects/ui/src/app/pages/updates/updates.page.ts

@@ -46,8 +46,6 @@ export class UpdatesPage {
     errors: this.marketplaceService.getRequestErrors$(),
   })
 
-  readonly PackageState = PackageState
-
   constructor(
     @Inject(AbstractMarketplaceService)
     readonly marketplaceService: MarketplaceService,
@@ -72,7 +70,10 @@ export class UpdatesPage {
     manifest: MarketplaceManifest,
     url: string,
     local: PackageDataEntry,
+    e: Event,
   ): Promise<void> {
+    e.stopPropagation()
+
     const { id, version } = manifest
 
     delete this.marketplaceService.updateErrors[id]