add icons and color to page edit

src/src/app/components/saved-page-card/saved-page-card.component.html

@@ -11,7 +11,8 @@
     (cdkDropListDropped)="moveSavedPageCard($event)"
   >
     <div class="card-item" cdkDrag *ngFor="let q of savedPage.queries">
-      <span matLine>{{ format(q) }}</span>
+
+      <span matLine><mat-icon class="page_item_icon" [ngClass]="class(q)">{{ icons(q) }}</mat-icon>{{ format(q) }}</span>
       <button mat-icon-button (click)="onRemoveCard(q)">
         <mat-icon>delete</mat-icon>
       </button>

src/src/app/components/saved-page-card/saved-page-card.component.scss

@@ -2,10 +2,30 @@
   background-color: var(--page-color-primary);
 }
 
+.page_item_icon {
+  vertical-align: text-bottom;
+  margin-right: 3px;
+}
 .card-actions {
   color: var(--page-color-primary);
 }
 
+.strongs {
+  color: var(--strongs-color-primary);
+}
+
+.passage {
+  color: var(--passage-color-primary);
+}
+
+.words {
+  color: var(--words-color-primary);
+}
+
+.note {
+  color: var(--note-color-primary);
+}
+
 .card-content {
   overflow-y: auto;
   max-height: 25rem;

src/src/app/components/saved-page-card/saved-page-card.component.ts

@@ -4,14 +4,14 @@ import { MatDialog } from '@angular/material/dialog';
 import { AppService } from '../../services/app.service';
 import { Observable } from 'rxjs';
 import { SavedPage } from 'src/app/models/page-state';
-import { CardItem, CardType, DataReference } from 'src/app/models/card-state';
+import { CardIcons, CardItem, CardType, DataReference } from 'src/app/models/card-state';
-import { NoteItem } from 'src/app/models/note-state';
 import { OkCancelModalComponent, OkCancelResult } from '../ok-cancel-modal/ok-cancel-modal.component';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { PageEditModalComponent } from '../page-edit-modal/page-edit-modal.component';
 import { HashTable } from 'src/app/common/hashtable';
 import { SubscriberBase } from 'src/app/common/subscriber-base';
 import { getFromCardCache } from 'src/app/common/card-cache-operations';
+import { NoteItem } from 'src/app/models/note-state';
 
 @Component({
   selector: 'app-saved-page-card',
@@ -22,6 +22,7 @@ import { getFromCardCache } from 'src/app/common/card-cache-operations';
 export class SavedPageCardComponent extends SubscriberBase implements OnInit {
   icon$: Observable<string>;
   cache: HashTable<CardItem>;
+  cardIcons: CardIcons;
 
   @Input()
   savedPage: SavedPage;
@@ -31,14 +32,26 @@ export class SavedPageCardComponent extends SubscriberBase implements OnInit {
 
     this.icon$ = appService.select((state) => state.settings.value.cardIcons.savedPage);
     this.addSubscription(
-      this.appService
+      this.appService.state$.subscribe((state) => {
-        .select((state) => state.cardCache)
+        this.cache = state.cardCache;
-        .subscribe((cache) => {
+        this.cardIcons = state.settings.value.cardIcons;
-          this.cache = cache;
+      })
-        })
     );
   }
 
+  class(item: DataReference) {
+    if (item.type === CardType.Note) {
+      return 'note';
+    } else if (item.type === CardType.Passage) {
+      return 'passage';
+    } else if (item.type === CardType.Strongs) {
+      return 'strongs';
+    } else if (item.type === CardType.Word) {
+      return 'words';
+    }
+    return '';
+  }
+
   format(item: DataReference) {
     if (item.type === CardType.Note) {
       return `Note: ${(getFromCardCache(item, this.cache).data as NoteItem).title}`;
@@ -52,6 +65,23 @@ export class SavedPageCardComponent extends SubscriberBase implements OnInit {
     return '';
   }
 
+  icons(item: DataReference) {
+    if (this.cardIcons === null || this.cardIcons === undefined) {
+      return 'page';
+    }
+
+    if (item.type === CardType.Note) {
+      return this.cardIcons.note;
+    } else if (item.type === CardType.Passage) {
+      return this.cardIcons.passage;
+    } else if (item.type === CardType.Strongs) {
+      return this.cardIcons.strongs;
+    } else if (item.type === CardType.Word) {
+      return this.cardIcons.words;
+    }
+    return '';
+  }
+
   onRemoveCard(card: CardItem) {
     this.dialog
       .open(OkCancelModalComponent, {