tweak performance

hook up verse picker

app/db/src/app/app.component.scss

@@ -7,3 +7,7 @@
     color: var(--primary-color);
   }
 }
+
+mat-sidenav-content {
+  overflow: hidden;
+}

app/db/src/app/search/components/search-page/search.page.scss

@@ -43,6 +43,9 @@ mat-card {
 }
 
 .search-content {
-  height: calc(100vh - 5.5rem);
   padding: 0 1rem 0 1rem;
+  overflow-y: scroll;
+  height: calc(100vh - 66px);
+  width: calc(100% - 15px);
+  margin-top: 2px;
 }

app/db/src/app/search/components/search-page/search.page.ts

@@ -2,7 +2,7 @@ import { Component, OnInit, HostListener } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { Observable } from 'rxjs';
 import { FormControl } from '@angular/forms';
-import { map, startWith } from 'rxjs/operators';
+import { map } from 'rxjs/operators';
 import { AppService } from 'src/app/services/app.service';
 import { NavService } from 'src/app/services/nav.service';
 import { OpenData, CardItem } from 'src/app/models/app-state';
@@ -36,13 +36,8 @@ export class SearchPage implements OnInit {
     }
 
     this.suggestions$ = this.searchControl.valueChanges.pipe(
-      startWith(''),
       map((value) => this.getSearchItems(value))
     );
-
-    // this.appService.state$.subscribe((state) => {
-    //   console.log(state);
-    // });
   }
 
   launchPicker() {

app/db/src/app/search/components/verse-picker/verse-picker-modal.component.ts

@@ -33,6 +33,9 @@ export class VersePickerModalComponent {
 
   setChapter(chapter: number) {
     // close the control, trigger the passage event.
+    this.appService.getNewPassage(
+      new BibleReference(this.book.name + ' ' + chapter)
+    );
     this.dialogRef.close();
   }
 }

app/db/src/app/services/app.service.ts

@@ -98,14 +98,12 @@ function reducer(state: AppState, action: AppAction): AppState {
     case 'UPDATE_CARD': {
       return {
         ...state,
-        cards: [
-          ...state.cards.map((c) => {
-            if (c === action.oldCard) {
-              return action.newCard;
-            }
-            return c;
-          }),
-        ],
+        cards: state.cards.map((c) => {
+          if (c === action.oldCard) {
+            return action.newCard;
+          }
+          return c;
+        }),
       };
     }
     case 'REMOVE_CARD': {