lots of renaming and organizing

app/db/src/app/app.component.ts

@@ -6,10 +6,8 @@ import { Breakpoints, BreakpointObserver } from '@angular/cdk/layout';
 import { map, shareReplay } from 'rxjs/operators';
 import { MatSidenav } from '@angular/material/sidenav';
 import { MatDialog } from '@angular/material/dialog';
-import { PageEditModalComponent } from './search/components/page-edit-modal/page-edit-modal.component';
-import { NoteEditModalComponent } from './search/components/note-edit-modal/note-edit-modal.component';
-import { SavedPage, Page } from './models/app-state';
-import { Router } from '@angular/router';
+import { PageEditModalComponent } from './search/components/saved-page/page-edit-modal/page-edit-modal.component';
+import { NoteEditModalComponent } from './search/components/note/edit-modal/note-edit-modal.component';
 import { SubscriberComponent } from './common/components/subscriber.component';
 
 @Component({

app/db/src/app/app.module.ts

@@ -10,18 +10,18 @@ import { HttpClientModule } from '@angular/common/http';
 import { NgxMdModule } from 'ngx-md';
 
 import { SearchPage } from './search/components/search-page/search.page';
-import { PassageComponent } from './search/components/passage/passage.component';
-import { WordsComponent } from './search/components/words/words.component';
-import { NoteComponent } from './search/components/note/note.component';
+import { PassageCardComponent } from './search/components/passage/passage-card.component';
+import { WordsCardComponent } from './search/components/words/words-card.component';
+import { NoteCardComponent } from './search/components/note/note-card.component';
 import { SettingsComponent } from './common/components/settings/settings.component';
 
 import { StrongsComponent } from './search/components/strongs/strongs.component';
 import { StrongsCardComponent } from './search/components/strongs/card/strongs-card.component';
 import { StrongsModalComponent } from './search/components/strongs/modal/strongs-modal.component';
 
-import { AddToPageModalComponent } from './search/components/add-to-page-modal/add-to-page-modal.component';
-import { PageEditModalComponent } from './search/components/page-edit-modal/page-edit-modal.component';
-import { NoteEditModalComponent } from './search/components/note-edit-modal/note-edit-modal.component';
+import { AddToPageModalComponent } from './search/components/saved-page/add-to-page-modal/add-to-page-modal.component';
+import { PageEditModalComponent } from './search/components/saved-page/page-edit-modal/page-edit-modal.component';
+import { NoteEditModalComponent } from './search/components/note/edit-modal/note-edit-modal.component';
 import { VersePickerModalComponent } from './search/components/verse-picker-modal/verse-picker-modal.component';
 
 import { MatCheckboxModule } from '@angular/material/checkbox';
@@ -65,12 +65,12 @@ import { ClipboardModule } from '@angular/cdk/clipboard';
   declarations: [
     AppComponent,
     SearchPage,
-    PassageComponent,
+    PassageCardComponent,
     StrongsComponent,
     StrongsCardComponent,
     StrongsModalComponent,
-    WordsComponent,
-    NoteComponent,
+    WordsCardComponent,
+    NoteCardComponent,
     PageEditModalComponent,
     NoteEditModalComponent,
     AddToPageModalComponent,

app/db/src/app/common/components/card.component.ts

@@ -8,7 +8,7 @@ import {
 import { CardItem, OpenData } from '../../models/app-state';
 import { Observable } from 'rxjs';
 import { MatDialog } from '@angular/material/dialog';
-import { AddToPageModalComponent } from 'src/app/search/components/add-to-page-modal/add-to-page-modal.component';
+import { AddToPageModalComponent } from '../../search/components/saved-page/add-to-page-modal/add-to-page-modal.component';
 import { SubscriberComponent } from './subscriber.component';
 
 @Component({

app/db/src/app/search/components/note/edit-modal/note-edit-modal.component.ts

@@ -1,8 +1,8 @@
 import { Component, Inject } from '@angular/core';
 import { FormGroup, FormBuilder } from '@angular/forms';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
-import { CardItem, NoteItem } from '../../../models/app-state';
-import { AppService } from '../../../services/app.service';
+import { CardItem, NoteItem } from '../../../../models/app-state';
+import { AppService } from '../../../../services/app.service';
 import { UUID } from 'angular2-uuid';
 
 @Component({

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

@@ -1,15 +1,15 @@
 import { Component, ViewChild, ElementRef } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
-import { NoteEditModalComponent } from '../note-edit-modal/note-edit-modal.component';
+import { NoteEditModalComponent } from './edit-modal/note-edit-modal.component';
 import { CardComponent } from '../../../common/components/card.component';
 import { AppService } from '../../../services/app.service';
 
 @Component({
-  selector: 'app-note',
-  templateUrl: './note.component.html',
-  styleUrls: ['./note.component.scss'],
+  selector: 'app-note-card',
+  templateUrl: './note-card.component.html',
+  styleUrls: ['./note-card.component.scss'],
 })
-export class NoteComponent extends CardComponent {
+export class NoteCardComponent extends CardComponent {
   @ViewChild('note') noteElement: ElementRef;
 
   constructor(

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

@@ -1,19 +1,18 @@
 import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
 import { BibleReference } from '../../../common/bible-reference';
 import { AppService } from '../../../services/app.service';
 import { CardComponent } from '../../../common/components/card.component';
 import { Paragraph } from '../../../models/app-state';
-import { MatDialog } from '@angular/material/dialog';
-import { StrongsComponent } from '../strongs/strongs.component';
 import { StrongsModalComponent } from '../strongs/modal/strongs-modal.component';
 
 @Component({
-  selector: 'app-passage',
-  templateUrl: 'passage.component.html',
-  styleUrls: ['./passage.component.scss'],
+  selector: 'app-passage-card',
+  templateUrl: 'passage-card.component.html',
+  styleUrls: ['./passage-card.component.scss'],
   preserveWhitespaces: true,
 })
-export class PassageComponent extends CardComponent implements OnInit {
+export class PassageCardComponent extends CardComponent implements OnInit {
   ref: BibleReference;
 
   showParagraphs$ = this.appService.select(

app/db/src/app/search/components/saved-page/add-to-page-modal/add-to-page-modal.component.ts

@@ -1,9 +1,9 @@
 import { Component, Inject, ViewChild } from '@angular/core';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
-import { AppService } from '../../../services/app.service';
-import { CardItem } from 'src/app/models/app-state';
 import { MatSelectionList } from '@angular/material/list';
 import { FormBuilder, FormGroup } from '@angular/forms';
+import { AppService } from '../../../../services/app.service';
+import { CardItem } from '../../../../models/app-state';
 
 @Component({
   selector: 'app-add-to-page-modal-modal',

app/db/src/app/search/components/saved-page/page-edit-modal/page-edit-modal.component.ts

@@ -1,7 +1,7 @@
 import { Component, Inject } from '@angular/core';
 import { FormGroup, FormBuilder } from '@angular/forms';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
-import { AppService } from '../../../services/app.service';
+import { AppService } from '../../../../services/app.service';
 
 @Component({
   selector: 'app-page-edit-modal',

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

@@ -37,30 +37,30 @@
 <div class="search-content">
   <ng-container *ngIf="cards$ | async as cards; else nocards">
     <mat-card *ngFor="let item of cards">
-      <app-passage
+      <app-passage-card
         *ngIf="isPassage(item)"
         [cardItem]="item"
         (onClose)="removeCard(item)"
         (onItemClicked)="getItemsNextToCard($event)"
-      ></app-passage>
+      ></app-passage-card>
       <app-strongs-card
         *ngIf="isStrongs(item)"
         [cardItem]="item"
         (onClose)="removeCard(item)"
         (onItemClicked)="getItemsNextToCard($event)"
       ></app-strongs-card>
-      <app-words
+      <app-words-card
         *ngIf="isWords(item)"
         [cardItem]="item"
         (onClose)="removeCard(item)"
         (onItemClicked)="getItemsNextToCard($event)"
-      ></app-words>
-      <app-note
+      ></app-words-card>
+      <app-note-card
         *ngIf="isNote(item)"
         [cardItem]="item"
         (onClose)="removeCard(item)"
         (onItemClicked)="getItemsNextToCard($event)"
-      ></app-note>
+      ></app-note-card>
     </mat-card>
   </ng-container>
   <ng-template #nocards>

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

@@ -6,12 +6,12 @@ import { MatDialog } from '@angular/material/dialog';
 import { BibleReference } from 'src/app/common/bible-reference';
 
 @Component({
-  selector: 'app-words',
-  templateUrl: 'words.component.html',
-  styleUrls: ['./words.component.scss'],
+  selector: 'app-words-card',
+  templateUrl: 'words-card.component.html',
+  styleUrls: ['./words-card.component.scss'],
   preserveWhitespaces: true,
 })
-export class WordsComponent extends CardComponent {
+export class WordsCardComponent extends CardComponent {
   @ViewChild('words') wordsElement: ElementRef;
 
   constructor(