nest new entries and message updates better

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

@@ -223,6 +223,7 @@
               [original]="original?.[entry.key]"
               [unionSpec]="spec.type === 'union' ? spec : undefined"
               (onExpand)="resize(entry.key)"
+              (hasNewOptions)="setHasNew(entry.key)"
             ></form-object>
           </div>
         </div>

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

@@ -39,6 +39,7 @@ export class FormObjectComponent {
   @Input() original?: { [key: string]: any }
   @Output() onInputChange = new EventEmitter<void>()
   @Output() onExpand = new EventEmitter<void>()
+  @Output() hasNewOptions = new EventEmitter<void>()
   warningAck: { [key: string]: boolean } = {}
   unmasked: { [key: string]: boolean } = {}
   objectDisplay: {
@@ -76,26 +77,17 @@ export class FormObjectComponent {
           }
         })
       } else if (['object', 'union'].includes(spec.type)) {
-        let hasNewOptions = false
-
-        // We can only really show new children for objects, not unions.
-        if (spec.type === 'object') {
-          hasNewOptions = Object.keys(spec.spec).some(childKey => {
-            const parentValue = this.original?.[key]
-            return !!parentValue && parentValue[childKey] === undefined
-          })
-        } else if (spec.type === 'union') {
-          // @TODO
-          hasNewOptions = false
-        }
-
         this.objectDisplay[key] = {
           expanded: false,
           height: '0px',
-          hasNewOptions,
+          hasNewOptions: false,
         }
       }
     })
+
+    if (Object.values(this.original || {}).some(v => v === undefined)) {
+      this.hasNewOptions.emit()
+    }
   }
 
   getEnumListDisplay(arr: string[], spec: ListValueSpecOf<'enum'>): string {
@@ -213,6 +205,13 @@ export class FormObjectComponent {
     this.onInputChange.emit()
   }
 
+  setHasNew(key: string) {
+    this.hasNewOptions.emit()
+    setTimeout(() => {
+      this.objectDisplay[key].hasNewOptions = true
+    }, 100)
+  }
+
   handleBooleanChange(key: string, spec: ValueSpecBoolean) {
     if (spec.warning) {
       const current = this.formGroup.get(key)?.value

frontend/projects/ui/src/app/modals/app-config/app-config.page.html

@@ -22,16 +22,21 @@
     </ion-item>
 
     <ng-template #noError>
-      <ion-item
+      <h2
         *ngIf="hasConfig && !pkg.installed?.status?.configured && !configForm.dirty"
+        class="ion-padding-bottom"
       >
-        <ion-label>
-          <ion-text color="success"
-            >To use the default config for {{ pkg.manifest.title }}, click
-            "Save" below.</ion-text
-          >
-        </ion-label>
-      </ion-item>
+        <ion-text color="success">
+          <span *ngIf="!original; else hasOriginal">
+            {{ pkg.manifest.title }} has been automatically configured with
+            recommended defaults. Make whatever changes you want, then click
+            "Save".
+          </span>
+          <ng-template #hasOriginal>
+            <span *ngIf="hasNewOptions"> New config options! </span>
+          </ng-template>
+        </ion-text>
+      </h2>
 
       <!-- auto-config -->
       <ion-item
@@ -82,6 +87,7 @@ <h2 style="display: flex; align-items: center">
           [formGroup]="configForm"
           [current]="configForm.value"
           [original]="original"
+          (hasNewOptions)="hasNewOptions = true"
         ></form-object>
       </form>
     </ng-template>

frontend/projects/ui/src/app/modals/app-config/app-config.page.ts

@@ -42,6 +42,7 @@ export class AppConfigPage {
   configForm: FormGroup
   original: object
   hasConfig = false
+  hasNewOptions = false
   saving = false
   loadingError: string | IonicSafeString
 
@@ -61,7 +62,7 @@ export class AppConfigPage {
 
     if (!this.hasConfig) return
 
-    let oldConfig: object
+    let oldConfig: object | null
     let newConfig: object | undefined
     let spec: ConfigSpec
     let patch: Operation[] | undefined

frontend/projects/ui/src/app/pages/apps-routes/app-list/app-list-icon/app-list-icon.component.html

@@ -13,6 +13,13 @@
     color="primary"
   ></ion-spinner>
   <ng-template #bulb>
-    <div class="bulb" [style.background-color]="color$ | async"></div>
+    <div
+      class="bulb"
+      [style.background-color]="
+        (disconnected$ | async)
+          ? 'var(--ion-color-dark)'
+          : 'var(--ion-color-' + this.pkg.primaryRendering.color + ')'
+      "
+    ></div>
   </ng-template>
 </ng-template>

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

@@ -13,13 +13,7 @@ export class AppListIconComponent {
   @Input()
   pkg: PkgInfo
 
-  color$ = this.connectionService.watchDisconnected$().pipe(
-    map(disconnected => {
-      return disconnected
-        ? 'var(--ion-color-dark)'
-        : 'var(--ion-color-' + this.pkg.primaryRendering.color + ')'
-    }),
-  )
+  disconnected$ = this.connectionService.watchDisconnected$()
 
   constructor(private readonly connectionService: ConnectionService) {}
 }