better eager loading and better error messaging for backup flow (#1368)

* better eager loading and better error messaging for backup flow

* add arch qp to marketplace proxy requests

* better styling for eos release notes

frontend/projects/ui/src/app/components/backup-drives/backup.service.ts

@@ -56,6 +56,7 @@ export class BackupService {
   }
 
   hasValidBackup(target: BackupTarget): boolean {
-    return this.emver.compare(target['embassy-os']?.version, '0.3.0') !== -1
+    const backup = target['embassy-os']
+    return !!backup && this.emver.compare(backup.version, '0.3.0') !== -1
   }
 }

frontend/projects/ui/src/app/components/form-object/form-object.component.scss

@@ -4,7 +4,7 @@
 }
 
 ion-input {
-  font-weight: 500;
+  font-weight: bold;
   --placeholder-font-weight: 400;
 }
 

frontend/projects/ui/src/app/components/install-wizard/install-wizard.component.scss

@@ -35,6 +35,11 @@
   min-height: 40vh
 }
 
+.notes-content {
+  text-align: left;
+  margin: 32px;
+}
+
 .status-label {
   font-size: xx-large;
   font-weight: bold;

frontend/projects/ui/src/app/components/install-wizard/notes/notes.component.html

@@ -1,14 +1,17 @@
 <div class="slide-content">
-  <div style="margin-top: 25px;">
-    <div style="margin: 15px; display: flex; justify-content: center; align-items: center;">
-      <ion-label [color]="params.titleColor">
-        <h1>{{ params.title }}</h1>
-        <h2>{{ params.headline }}</h2>
-      </ion-label>
-    </div>
-    <div *ngFor="let note of params.notes | keyvalue : asIsOrder">
-      <h2>{{ note.key }}</h2>
-      <div class="long-message" [innerHTML]="note.value | markdown"></div>
+  <div class="notes-content">
+    <h1>{{ params.title }}</h1>
+    <br />
+    <div *ngFor="let v of params.versions; let i = index">
+      <h4>
+        <b>
+          {{ v.version }}
+          <span *ngIf="i === 0"> (Current Version)</span>
+        </b>
+      </h4>
+      <hr style="height: 0; border-width: 1px" />
+      <div [innerHTML]="v.notes | markdown"></div>
+      <br />
     </div>
   </div>
 </div>

frontend/projects/ui/src/app/components/install-wizard/notes/notes.component.ts

@@ -8,17 +8,17 @@ import { BehaviorSubject, Subject } from 'rxjs'
 })
 export class NotesComponent {
   @Input() params: {
-    notes: { [version: string]: string }
+    versions: { version: string; notes: string }[]
     title: string
     titleColor: string
     headline: string
   }
 
-  load () { }
+  load() {}
   loading$ = new BehaviorSubject(false)
   cancel$ = new Subject<void>()
 
-  asIsOrder () {
+  asIsOrder() {
     return 0
   }
 }

frontend/projects/ui/src/app/components/install-wizard/prebaked-wizards.ts

@@ -103,6 +103,16 @@ export class WizardBaker {
   }): InstallWizardComponent['params'] {
     const { version, releaseNotes, headline } = values
 
+    const versions = Object.keys(releaseNotes)
+      .sort()
+      .reverse()
+      .map(version => {
+        return {
+          version,
+          notes: releaseNotes[version],
+        }
+      })
+
     const action = 'update'
     const title = 'EmbassyOS'
     const toolbar: TopbarParams = { action, title, version }
@@ -112,7 +122,7 @@ export class WizardBaker {
         slide: {
           selector: 'notes',
           params: {
-            notes: releaseNotes,
+            versions,
             title: 'Release Notes',
             titleColor: 'dark',
             headline,