fix some typechecking in the templates

adjust main menu order
fix icon

app/db/src/app/app.component.html

@@ -14,6 +14,13 @@
           ><mat-icon color="accenovert">search</mat-icon> Search</a
         >
 
+        <a mat-list-item (click)="showHelp()"
+          ><mat-icon color="accenovert">help</mat-icon>Help</a
+        >
+      </mat-nav-list>
+
+      <mat-toolbar>Manage</mat-toolbar>
+      <mat-nav-list>
         <a mat-list-item [routerLink]="['saved', 'admin']"
           ><mat-icon color="accenovert">all_inbox</mat-icon> Manage Saved
           Pages</a
@@ -22,10 +29,6 @@
         <a mat-list-item [routerLink]="['notes', 'admin']"
           ><mat-icon color="accenovert">library_books</mat-icon> Manage Notes</a
         >
-
-        <a mat-list-item (click)="showHelp()"
-          ><mat-icon color="accenovert">help</mat-icon>Help</a
-        >
       </mat-nav-list>
 
       <mat-toolbar>Saved Pages</mat-toolbar>

app/db/src/app/components/note/note-card.component.html

@@ -2,7 +2,7 @@
   <mat-icon aria-hidden="false" aria-label="Note Icon">{{
     icon$ | async
   }}</mat-icon>
-  <span *ngIf="cardItem.data">{{ cardItem.data.title }}</span>
+  <span *ngIf="this.data">{{ this.data.title }}</span>
 
   <ng-container *ngIf="inSearch">
     <button
@@ -16,16 +16,14 @@
   >
 </div>
 <div class="card-content" *ngIf="cardItem" #note>
-  <ngx-md class="markdown" *ngIf="cardItem.data">{{
+  <ngx-md class="markdown" *ngIf="this.data">{{ this.data.content }}</ngx-md>
-    cardItem.data.content
+  <mat-expansion-panel *ngIf="cardItem && this.data.xref !== ''">
-  }}</ngx-md>
-  <mat-expansion-panel *ngIf="cardItem && cardItem.data.xref !== ''">
     <mat-expansion-panel-header>
       <mat-panel-title>
         Cross References
       </mat-panel-title>
     </mat-expansion-panel-header>
-    <ng-container *ngIf="prepXref(cardItem.data.xref) as refs">
+    <ng-container *ngIf="prepXref(this.data.xref) as refs">
       <div *ngFor="let ref of refs">
         <ng-container *ngIf="inSearch">
           <button

app/db/src/app/components/note/note-card.component.ts

@@ -18,6 +18,10 @@ export class NoteCardComponent extends CardComponent {
   @Input()
   inSearch = true;
 
+  get data(): NoteItem {
+    return this.cardItem.data as NoteItem;
+  }
+
   constructor(protected elementRef: ElementRef, protected appService: AppService, public dialog: MatDialog) {
     super(elementRef, dialog, appService);
 

app/db/src/app/components/passage/passage-card.component.html

@@ -14,7 +14,7 @@
 </div>
 <div class="card-content" *ngIf="cardItem">
   <ng-container *ngIf="displaySettings$ | async as display">
-    <div class="chapter-text" *ngFor="let ch of cardItem.data.cs" #passage>
+    <div class="chapter-text" *ngFor="let ch of this.data.cs" #passage>
       <h2 class="paragraph-heading">Chapter {{ ch.ch }}</h2>
       <ng-container *ngFor="let para of ch.paras">
         <h3

app/db/src/app/components/passage/passage-card.component.ts

@@ -35,6 +35,10 @@ export class PassageCardComponent extends CardComponent implements OnInit {
 
   @ViewChild('passage') passageElement: ElementRef;
 
+  get data(): BiblePassageResult {
+    return this.cardItem.data as BiblePassageResult;
+  }
+
   constructor(protected elementRef: ElementRef, protected appService: AppService, public dialog: MatDialog) {
     super(elementRef, dialog, appService);
     this.icon$ = appService.select((state) => state.cardIcons.passage);

app/db/src/app/components/settings/settings.component.html

@@ -1,7 +1,7 @@
 <mat-toolbar>Page Settings</mat-toolbar>
 <mat-nav-list>
   <a mat-list-item (click)="savePage()">
-    <mat-icon matListIcon color="accenovert">create</mat-icon>
+    <mat-icon matListIcon color="accenovert">add</mat-icon>
     Save Results as New Page
   </a>
 

app/db/src/app/components/words/words-card.component.html

@@ -12,12 +12,8 @@
     <mat-icon>cancel</mat-icon>
   </button>
 </div>
-<div
+<div class="card-content" *ngIf="this.data" #words>
-  class="card-content"
+  <span *ngFor="let ref of this.data.refs" class="passage-button-wrapper"
-  *ngIf="cardItem && cardItem.data && cardItem.data.refs"
-  #words
->
-  <span *ngFor="let ref of cardItem.data.refs" class="passage-button-wrapper"
     ><a class="passage-button" (click)="openPassage(ref)">{{
       makePassage(ref)
     }}</a></span

app/db/src/app/components/words/words-card.component.ts

@@ -15,6 +15,10 @@ import { WordLookupResult } from 'src/app/models/words-state';
 export class WordsCardComponent extends CardComponent {
   @ViewChild('words') wordsElement: ElementRef;
 
+  get data(): WordLookupResult {
+    return this.cardItem.data as WordLookupResult;
+  }
+
   constructor(protected elementRef: ElementRef, protected appService: AppService, public dialog: MatDialog) {
     super(elementRef, dialog, appService);
     this.icon$ = appService.select((state) => state.cardIcons.words);