2025-07-27 09:29:59 -04:00
625 changed files with 16742 additions and 859638 deletions
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@ -6,7 +6,7 @@ stages:

 build-android:
  stage: build
-  image: walljm/gradle_android:8.2.1-jdk17-android34-node22
+  image: walljm/gradle_android:8.0.2-jdk17-33-node1
  before_script:
    - cd ./src/android
    - bash ./install-sdk.sh
@ -29,7 +29,7 @@ build-android:

 test:
  stage: test
-  image: walljm/node-chrome-headless:22.4-bookworm
+  image: walljm/node-chrome-headless:21.6
  variables:
    NODE_OPTIONS: "--max_old_space_size=2048"
  script:
@ -68,7 +68,7 @@ deploy-prod-site:

 deploy-android:
  stage: prod
-  image: walljm/gradle_android:8.2.1-jdk17-android34-node22
+  image: walljm/gradle_android:8.0.2-jdk17-33-node1
  needs:
    - build-android
  before_script:
--- a/docker-node-chrome/Dockerfile
+++ b/docker-node-chrome/Dockerfile
@ -1,4 +1,4 @@
-FROM node:22.4-bookworm
+FROM node:21.6.2-bookworm

 RUN apt-get update -qqy \
  && apt-get -qqy install \
--- a/docker-node-chrome/build.sh
+++ b/docker-node-chrome/build.sh
@ -1,2 +1,2 @@
-docker build -t walljm/node-chrome-headless:22.4-bookworm .
-docker push walljm/node-chrome-headless:22.4-bookworm
+docker build -t walljm/node-chrome-headless:21.6 .
+docker push walljm/node-chrome-headless:21.6
--- a/gradle_android_node/Dockerfile
+++ b/gradle_android_node/Dockerfile
@ -1,5 +1,5 @@

-FROM gradle:8.2.1-jdk17-focal
+FROM gradle:8.0.2-jdk17-focal

 # Install Git and dependencies
 RUN apt-get update \
@ -7,7 +7,7 @@ RUN apt-get update \
 && apt-get clean \
 && rm -rf /var/lib/apt/lists /var/cache/apt

-RUN curl -L -o node.tar.gz "https://nodejs.org/dist/v22.4.1/node-v22.4.1-linux-x64.tar.gz" && \
+RUN curl -L -o node.tar.gz "https://nodejs.org/dist/v21.6.2/node-v21.6.2-linux-x64.tar.gz" && \
    tar -xzf node.tar.gz -C /usr/local --strip-components=1 && \
    rm node.tar.gz && \
    ln -s /usr/local/bin/node /usr/local/bin/nodejs
@ -42,7 +42,7 @@ RUN $ANDROID_SDK_ROOT/cmdline-tools/latest/bin/sdkmanager --update
 RUN $ANDROID_SDK_ROOT/cmdline-tools/latest/bin/sdkmanager --verbose \
    "build-tools;34.0.0" \
    "build-tools;30.0.3" \
-    "platforms;android-34" \
+    "platforms;android-33" \
    "platform-tools"


--- a/gradle_android_node/build.sh
+++ b/gradle_android_node/build.sh
@ -1,2 +1,2 @@
-docker build -t walljm/gradle_android:8.2.1-jdk17-android34-node22 .
-docker push walljm/gradle_android:8.2.1-jdk17-android34-node22
+docker build -t walljm/gradle_android:8.0.2-jdk17-33-node1 .
+docker push walljm/gradle_android:8.0.2-jdk17-33-node1
--- a/src/.eslintrc.json
+++ b/src/.eslintrc.json
@ -1,24 +1,23 @@
 {
  "root": true,
-  "ignorePatterns": ["projects/**/*"],
-  "parser": "@typescript-eslint/parser",
-  "parserOptions": {
-    "project": "./tsconfig.json", // <-- Point to your project's "tsconfig.json" or create a new one.
-    "ecmaVersion": 2020,
-    "sourceType": "module"
-  },
-  "plugins": ["unused-imports", "optimize-regex", "simple-import-sort"],
+  "ignorePatterns": [
+    "projects/**/*"
+  ],
  "overrides": [
    {
-      "files": ["*.ts"],
+      "files": [
+        "*.ts"
+      ],
      "parserOptions": {
-        "project": ["tsconfig.json", "e2e/tsconfig.json"],
+        "project": [
+          "tsconfig.json",
+          "e2e/tsconfig.json"
+        ],
        "createDefaultProgram": true
      },
      "extends": [
        "plugin:@angular-eslint/recommended",
-        "plugin:@angular-eslint/template/process-inline-templates",
-        "plugin:deprecation/recommended"
+        "plugin:@angular-eslint/template/process-inline-templates"
      ],
      "rules": {
        "@angular-eslint/directive-selector": [
@ -36,27 +35,18 @@
            "prefix": "app",
            "style": "kebab-case"
          }
-        ],
-        "no-unused-vars": "off", // or "@typescript-eslint/no-unused-vars": "off",
-        "unused-imports/no-unused-imports": "error",
-        "unused-imports/no-unused-vars": [
-          "warn",
-          {
-            "vars": "all",
-            "varsIgnorePattern": "^_",
-            "args": "after-used",
-            "argsIgnorePattern": "^_"
-          }
-        ],
-        "optimize-regex/optimize-regex": "warn",
-        "simple-import-sort/imports": "warn",
-        "simple-import-sort/exports": "warn"
+        ]
      }
    },
    {
-      "files": ["*.html"],
-      "extends": ["plugin:@angular-eslint/template/recommended"],
-      "rules": {}
+      "files": [
+        "*.html"
+      ],
+      "extends": [
+        "plugin:@angular-eslint/template/recommended"
+      ],
+      "rules": {
+      }
    }
  ]
 }
--- a/src/android/app/build.gradle
+++ b/src/android/app/build.gradle
@ -85,7 +85,7 @@ dependencies {
  implementation 'com.google.firebase:firebase-auth'

  // Also declare the dependency for the Google Play services library and specify its version
-  implementation 'com.google.android.gms:play-services-auth:21.2.0'
+  implementation 'com.google.android.gms:play-services-auth:21.0.0'

 }

--- a/src/android/app/google-services.json
+++ b/src/android/app/google-services.json
@ -22,14 +22,6 @@
            "certificate_hash": "61703efe57998735ca5d22fec522d099cea1e83c"
          }
        },
-        {
-          "client_id": "200739882604-h8r8otm9rlfseul40hd69k0jl6pf8g4h.apps.googleusercontent.com",
-          "client_type": 1,
-          "android_info": {
-            "package_name": "walljm.dynamicbible",
-            "certificate_hash": "18dd331a0946bc10b985e31d1882b398ae9fd0d1"
-          }
-        },
        {
          "client_id": "200739882604-vl9sdm2o394c9v8dlnt6j41ng99bfdc4.apps.googleusercontent.com",
          "client_type": 1,
--- a/src/android/app/src/main/assets/capacitor.config.json
+++ b/src/android/app/src/main/assets/capacitor.config.json
@ -12,12 +12,9 @@
 				"profile",
 				"email"
 			],
-			"clientId": "200739882604-i4mk6rp4mcb8n590j5kc8i6bncpm5bo1.apps.googleusercontent.com",
+			"serverClientId": "200739882604-i4mk6rp4mcb8n590j5kc8i6bncpm5bo1.apps.googleusercontent.com",
 			"forceCodeForRefreshToken": true
 		}
 	},
-	"cordova": {},
-	"ios": {
-		"contentInset": "always"
-	}
+	"cordova": {}
 }
--- a/src/android/app/src/main/res/values/strings.xml
+++ b/src/android/app/src/main/res/values/strings.xml
@ -4,4 +4,5 @@
    <string name="title_activity_main">Dynamic Bible</string>
    <string name="package_name">walljm.dynamicbible</string>
    <string name="custom_url_scheme">walljm.dynamicbible</string>
+    <string name="server_client_id">200739882604-i4mk6rp4mcb8n590j5kc8i6bncpm5bo1.apps.googleusercontent.com</string>
 </resources>
--- a/src/android/build.gradle
+++ b/src/android/build.gradle
@ -7,8 +7,8 @@ buildscript {
        mavenCentral()
    }
    dependencies {
-        classpath 'com.android.tools.build:gradle:8.2.1'
-        classpath 'com.google.gms:google-services:4.4.2'
+        classpath 'com.android.tools.build:gradle:8.0.2'
+        classpath 'com.google.gms:google-services:4.4.1'
        classpath "com.github.triplet.gradle:play-publisher:3.8.1"

        // NOTE: Do not place your application dependencies here; they belong
--- a/src/android/capacitor-cordova-android-plugins/build.gradle
+++ b/src/android/capacitor-cordova-android-plugins/build.gradle
@ -9,7 +9,7 @@ buildscript {
        mavenCentral()
    }
    dependencies {
-        classpath 'com.android.tools.build:gradle:8.2.1'
+        classpath 'com.android.tools.build:gradle:8.0.0'
    }
 }

@ -17,10 +17,10 @@ apply plugin: 'com.android.library'

 android {
    namespace "capacitor.cordova.android.plugins"
-    compileSdk project.hasProperty('compileSdkVersion') ? rootProject.ext.compileSdkVersion : 34
+    compileSdkVersion project.hasProperty('compileSdkVersion') ? rootProject.ext.compileSdkVersion : 33
    defaultConfig {
        minSdkVersion project.hasProperty('minSdkVersion') ? rootProject.ext.minSdkVersion : 22
-        targetSdkVersion project.hasProperty('targetSdkVersion') ? rootProject.ext.targetSdkVersion : 34
+        targetSdkVersion project.hasProperty('targetSdkVersion') ? rootProject.ext.targetSdkVersion : 33
        versionCode 1
        versionName "1.0"
    }
--- a/src/android/variables.gradle
+++ b/src/android/variables.gradle
@ -1,15 +1,15 @@
 ext {
    minSdkVersion = 22
-    firebaseMessagingVersion = '23.3.1'
-    compileSdkVersion = 34
-    targetSdkVersion = 34
-    androidxActivityVersion = '1.8.0'
+    firebaseMessagingVersion = '23.0.5'
+    compileSdkVersion = 33
+    targetSdkVersion = 33
+    androidxActivityVersion = '1.7.0'
    androidxAppCompatVersion = '1.6.1'
    androidxCoordinatorLayoutVersion = '1.2.0'
-    androidxCoreVersion = '1.12.0'
-    androidxFragmentVersion = '1.6.2'
+    androidxCoreVersion = '1.10.0'
+    androidxFragmentVersion = '1.5.6'
    coreSplashScreenVersion = '1.0.1'
-    androidxWebkitVersion = '1.9.0'
+    androidxWebkitVersion = '1.6.1'
    junitVersion = '4.13.2'
    androidxJunitVersion = '1.1.5'
    androidxEspressoCoreVersion = '3.5.1'
--- a/src/angular.json
+++ b/src/angular.json
@ -177,7 +177,8 @@
    "schematicCollections": [
      "@cypress/schematic",
      "@angular-eslint/schematics",
+      "@angular-eslint/schematics",
      "@schematics/angular"
    ]
  }
-}
+}
--- a/src/capacitor.config.json
+++ b/src/capacitor.config.json
@ -9,12 +9,9 @@
    },
    "GoogleAuth": {
      "scopes": ["profile", "email"],
-      "clientId": "200739882604-i4mk6rp4mcb8n590j5kc8i6bncpm5bo1.apps.googleusercontent.com",
-      "forceCodeForRefreshToken": true
+      "serverClientId": "200739882604-i4mk6rp4mcb8n590j5kc8i6bncpm5bo1.apps.googleusercontent.com",
+      "forceCodeForRefreshToken" : true
    }
  },
-  "cordova": {},
-  "ios": {
-    "contentInset": "always"
-  }
+  "cordova": {}
 }
--- a/src/cypress/tsconfig.json
+++ b/src/cypress/tsconfig.json
@ -2,7 +2,7 @@
  "extends": "../tsconfig.json",
  "include": ["**/*.ts"],
  "compilerOptions": {
-    "sourceMap": true,
+    "sourceMap": false,
    "types": ["cypress"]
  }
 }
--- a/src/dependency-tree.txt
+++ b/src/dependency-tree.txt
--- a/src/ios/.gitignore
+++ b/src/ios/.gitignore
@ -1,13 +0,0 @@
-App/build
-App/Pods
-App/output
-App/App/public
-DerivedData
-xcuserdata
-
-# Cordova plugins for Capacitor
-capacitor-cordova-ios-plugins
-
-# Generated Config files
-App/App/capacitor.config.json
-App/App/config.xml
--- a/src/ios/App/App.xcodeproj/project.pbxproj
+++ b/src/ios/App/App.xcodeproj/project.pbxproj
@ -1,412 +0,0 @@
-// !$*UTF8*$!
-{
-	archiveVersion = 1;
-	classes = {
-	};
-	objectVersion = 48;
-	objects = {
-
-/* Begin PBXBuildFile section */
-		2FAD9763203C412B000D30F8 /* config.xml in Resources */ = {isa = PBXBuildFile; fileRef = 2FAD9762203C412B000D30F8 /* config.xml */; };
-		50379B232058CBB4000EE86E /* capacitor.config.json in Resources */ = {isa = PBXBuildFile; fileRef = 50379B222058CBB4000EE86E /* capacitor.config.json */; };
-		504EC3081FED79650016851F /* AppDelegate.swift in Sources */ = {isa = PBXBuildFile; fileRef = 504EC3071FED79650016851F /* AppDelegate.swift */; };
-		504EC30D1FED79650016851F /* Main.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 504EC30B1FED79650016851F /* Main.storyboard */; };
-		504EC30F1FED79650016851F /* Assets.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 504EC30E1FED79650016851F /* Assets.xcassets */; };
-		504EC3121FED79650016851F /* LaunchScreen.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 504EC3101FED79650016851F /* LaunchScreen.storyboard */; };
-		50B271D11FEDC1A000F3C39B /* public in Resources */ = {isa = PBXBuildFile; fileRef = 50B271D01FEDC1A000F3C39B /* public */; };
-		A084ECDBA7D38E1E42DFC39D /* Pods_App.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = AF277DCFFFF123FFC6DF26C7 /* Pods_App.framework */; };
-/* End PBXBuildFile section */
-
-/* Begin PBXFileReference section */
-		2FAD9762203C412B000D30F8 /* config.xml */ = {isa = PBXFileReference; lastKnownFileType = text.xml; path = config.xml; sourceTree = "<group>"; };
-		50379B222058CBB4000EE86E /* capacitor.config.json */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.json; path = capacitor.config.json; sourceTree = "<group>"; };
-		504EC3041FED79650016851F /* App.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = App.app; sourceTree = BUILT_PRODUCTS_DIR; };
-		504EC3071FED79650016851F /* AppDelegate.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AppDelegate.swift; sourceTree = "<group>"; };
-		504EC30C1FED79650016851F /* Base */ = {isa = PBXFileReference; lastKnownFileType = file.storyboard; name = Base; path = Base.lproj/Main.storyboard; sourceTree = "<group>"; };
-		504EC30E1FED79650016851F /* Assets.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; path = Assets.xcassets; sourceTree = "<group>"; };
-		504EC3111FED79650016851F /* Base */ = {isa = PBXFileReference; lastKnownFileType = file.storyboard; name = Base; path = Base.lproj/LaunchScreen.storyboard; sourceTree = "<group>"; };
-		504EC3131FED79650016851F /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = "<group>"; };
-		50B271D01FEDC1A000F3C39B /* public */ = {isa = PBXFileReference; lastKnownFileType = folder; path = public; sourceTree = "<group>"; };
-		AF277DCFFFF123FFC6DF26C7 /* Pods_App.framework */ = {isa = PBXFileReference; explicitFileType = wrapper.framework; includeInIndex = 0; path = Pods_App.framework; sourceTree = BUILT_PRODUCTS_DIR; };
-		AF51FD2D460BCFE21FA515B2 /* Pods-App.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-App.release.xcconfig"; path = "Pods/Target Support Files/Pods-App/Pods-App.release.xcconfig"; sourceTree = "<group>"; };
-		FC68EB0AF532CFC21C3344DD /* Pods-App.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-App.debug.xcconfig"; path = "Pods/Target Support Files/Pods-App/Pods-App.debug.xcconfig"; sourceTree = "<group>"; };
-/* End PBXFileReference section */
-
-/* Begin PBXFrameworksBuildPhase section */
-		504EC3011FED79650016851F /* Frameworks */ = {
-			isa = PBXFrameworksBuildPhase;
-			buildActionMask = 2147483647;
-			files = (
-				A084ECDBA7D38E1E42DFC39D /* Pods_App.framework in Frameworks */,
-			);
-			runOnlyForDeploymentPostprocessing = 0;
-		};
-/* End PBXFrameworksBuildPhase section */
-
-/* Begin PBXGroup section */
-		27E2DDA53C4D2A4D1A88CE4A /* Frameworks */ = {
-			isa = PBXGroup;
-			children = (
-				AF277DCFFFF123FFC6DF26C7 /* Pods_App.framework */,
-			);
-			name = Frameworks;
-			sourceTree = "<group>";
-		};
-		504EC2FB1FED79650016851F = {
-			isa = PBXGroup;
-			children = (
-				504EC3061FED79650016851F /* App */,
-				504EC3051FED79650016851F /* Products */,
-				7F8756D8B27F46E3366F6CEA /* Pods */,
-				27E2DDA53C4D2A4D1A88CE4A /* Frameworks */,
-			);
-			sourceTree = "<group>";
-		};
-		504EC3051FED79650016851F /* Products */ = {
-			isa = PBXGroup;
-			children = (
-				504EC3041FED79650016851F /* App.app */,
-			);
-			name = Products;
-			sourceTree = "<group>";
-		};
-		504EC3061FED79650016851F /* App */ = {
-			isa = PBXGroup;
-			children = (
-				50379B222058CBB4000EE86E /* capacitor.config.json */,
-				504EC3071FED79650016851F /* AppDelegate.swift */,
-				504EC30B1FED79650016851F /* Main.storyboard */,
-				504EC30E1FED79650016851F /* Assets.xcassets */,
-				504EC3101FED79650016851F /* LaunchScreen.storyboard */,
-				504EC3131FED79650016851F /* Info.plist */,
-				2FAD9762203C412B000D30F8 /* config.xml */,
-				50B271D01FEDC1A000F3C39B /* public */,
-			);
-			path = App;
-			sourceTree = "<group>";
-		};
-		7F8756D8B27F46E3366F6CEA /* Pods */ = {
-			isa = PBXGroup;
-			children = (
-				FC68EB0AF532CFC21C3344DD /* Pods-App.debug.xcconfig */,
-				AF51FD2D460BCFE21FA515B2 /* Pods-App.release.xcconfig */,
-			);
-			name = Pods;
-			sourceTree = "<group>";
-		};
-/* End PBXGroup section */
-
-/* Begin PBXNativeTarget section */
-		504EC3031FED79650016851F /* App */ = {
-			isa = PBXNativeTarget;
-			buildConfigurationList = 504EC3161FED79650016851F /* Build configuration list for PBXNativeTarget "App" */;
-			buildPhases = (
-				6634F4EFEBD30273BCE97C65 /* [CP] Check Pods Manifest.lock */,
-				504EC3001FED79650016851F /* Sources */,
-				504EC3011FED79650016851F /* Frameworks */,
-				504EC3021FED79650016851F /* Resources */,
-				9592DBEFFC6D2A0C8D5DEB22 /* [CP] Embed Pods Frameworks */,
-			);
-			buildRules = (
-			);
-			dependencies = (
-			);
-			name = App;
-			productName = App;
-			productReference = 504EC3041FED79650016851F /* App.app */;
-			productType = "com.apple.product-type.application";
-		};
-/* End PBXNativeTarget section */
-
-/* Begin PBXProject section */
-		504EC2FC1FED79650016851F /* Project object */ = {
-			isa = PBXProject;
-			attributes = {
-				LastSwiftUpdateCheck = 0920;
-				LastUpgradeCheck = 0920;
-				TargetAttributes = {
-					504EC3031FED79650016851F = {
-						CreatedOnToolsVersion = 9.2;
-						LastSwiftMigration = 1100;
-						ProvisioningStyle = Automatic;
-					};
-				};
-			};
-			buildConfigurationList = 504EC2FF1FED79650016851F /* Build configuration list for PBXProject "App" */;
-			compatibilityVersion = "Xcode 8.0";
-			developmentRegion = en;
-			hasScannedForEncodings = 0;
-			knownRegions = (
-				en,
-				Base,
-			);
-			mainGroup = 504EC2FB1FED79650016851F;
-			productRefGroup = 504EC3051FED79650016851F /* Products */;
-			projectDirPath = "";
-			projectRoot = "";
-			targets = (
-				504EC3031FED79650016851F /* App */,
-			);
-		};
-/* End PBXProject section */
-
-/* Begin PBXResourcesBuildPhase section */
-		504EC3021FED79650016851F /* Resources */ = {
-			isa = PBXResourcesBuildPhase;
-			buildActionMask = 2147483647;
-			files = (
-				504EC3121FED79650016851F /* LaunchScreen.storyboard in Resources */,
-				50B271D11FEDC1A000F3C39B /* public in Resources */,
-				504EC30F1FED79650016851F /* Assets.xcassets in Resources */,
-				50379B232058CBB4000EE86E /* capacitor.config.json in Resources */,
-				504EC30D1FED79650016851F /* Main.storyboard in Resources */,
-				2FAD9763203C412B000D30F8 /* config.xml in Resources */,
-			);
-			runOnlyForDeploymentPostprocessing = 0;
-		};
-/* End PBXResourcesBuildPhase section */
-
-/* Begin PBXShellScriptBuildPhase section */
-		6634F4EFEBD30273BCE97C65 /* [CP] Check Pods Manifest.lock */ = {
-			isa = PBXShellScriptBuildPhase;
-			buildActionMask = 2147483647;
-			files = (
-			);
-			inputPaths = (
-				"${PODS_PODFILE_DIR_PATH}/Podfile.lock",
-				"${PODS_ROOT}/Manifest.lock",
-			);
-			name = "[CP] Check Pods Manifest.lock";
-			outputPaths = (
-				"$(DERIVED_FILE_DIR)/Pods-App-checkManifestLockResult.txt",
-			);
-			runOnlyForDeploymentPostprocessing = 0;
-			shellPath = /bin/sh;
-			shellScript = "diff \"${PODS_PODFILE_DIR_PATH}/Podfile.lock\" \"${PODS_ROOT}/Manifest.lock\" > /dev/null\nif [ $? != 0 ] ; then\n    # print error to STDERR\n    echo \"error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.\" >&2\n    exit 1\nfi\n# This output is used by Xcode 'outputs' to avoid re-running this script phase.\necho \"SUCCESS\" > \"${SCRIPT_OUTPUT_FILE_0}\"\n";
-			showEnvVarsInLog = 0;
-		};
-		9592DBEFFC6D2A0C8D5DEB22 /* [CP] Embed Pods Frameworks */ = {
-			isa = PBXShellScriptBuildPhase;
-			buildActionMask = 2147483647;
-			files = (
-			);
-			inputPaths = (
-			);
-			name = "[CP] Embed Pods Frameworks";
-			outputPaths = (
-			);
-			runOnlyForDeploymentPostprocessing = 0;
-			shellPath = /bin/sh;
-			shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-App/Pods-App-frameworks.sh\"\n";
-			showEnvVarsInLog = 0;
-		};
-/* End PBXShellScriptBuildPhase section */
-
-/* Begin PBXSourcesBuildPhase section */
-		504EC3001FED79650016851F /* Sources */ = {
-			isa = PBXSourcesBuildPhase;
-			buildActionMask = 2147483647;
-			files = (
-				504EC3081FED79650016851F /* AppDelegate.swift in Sources */,
-			);
-			runOnlyForDeploymentPostprocessing = 0;
-		};
-/* End PBXSourcesBuildPhase section */
-
-/* Begin PBXVariantGroup section */
-		504EC30B1FED79650016851F /* Main.storyboard */ = {
-			isa = PBXVariantGroup;
-			children = (
-				504EC30C1FED79650016851F /* Base */,
-			);
-			name = Main.storyboard;
-			sourceTree = "<group>";
-		};
-		504EC3101FED79650016851F /* LaunchScreen.storyboard */ = {
-			isa = PBXVariantGroup;
-			children = (
-				504EC3111FED79650016851F /* Base */,
-			);
-			name = LaunchScreen.storyboard;
-			sourceTree = "<group>";
-		};
-/* End PBXVariantGroup section */
-
-/* Begin XCBuildConfiguration section */
-		504EC3141FED79650016851F /* Debug */ = {
-			isa = XCBuildConfiguration;
-			buildSettings = {
-				ALWAYS_SEARCH_USER_PATHS = NO;
-				CLANG_ANALYZER_NONNULL = YES;
-				CLANG_ANALYZER_NUMBER_OBJECT_CONVERSION = YES_AGGRESSIVE;
-				CLANG_CXX_LANGUAGE_STANDARD = "gnu++14";
-				CLANG_CXX_LIBRARY = "libc++";
-				CLANG_ENABLE_MODULES = YES;
-				CLANG_ENABLE_OBJC_ARC = YES;
-				CLANG_WARN_BLOCK_CAPTURE_AUTORELEASING = YES;
-				CLANG_WARN_BOOL_CONVERSION = YES;
-				CLANG_WARN_COMMA = YES;
-				CLANG_WARN_CONSTANT_CONVERSION = YES;
-				CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR;
-				CLANG_WARN_DOCUMENTATION_COMMENTS = YES;
-				CLANG_WARN_EMPTY_BODY = YES;
-				CLANG_WARN_ENUM_CONVERSION = YES;
-				CLANG_WARN_INFINITE_RECURSION = YES;
-				CLANG_WARN_INT_CONVERSION = YES;
-				CLANG_WARN_NON_LITERAL_NULL_CONVERSION = YES;
-				CLANG_WARN_OBJC_LITERAL_CONVERSION = YES;
-				CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR;
-				CLANG_WARN_RANGE_LOOP_ANALYSIS = YES;
-				CLANG_WARN_STRICT_PROTOTYPES = YES;
-				CLANG_WARN_SUSPICIOUS_MOVE = YES;
-				CLANG_WARN_UNGUARDED_AVAILABILITY = YES_AGGRESSIVE;
-				CLANG_WARN_UNREACHABLE_CODE = YES;
-				CLANG_WARN__DUPLICATE_METHOD_MATCH = YES;
-				CODE_SIGN_IDENTITY = "iPhone Developer";
-				COPY_PHASE_STRIP = NO;
-				DEBUG_INFORMATION_FORMAT = dwarf;
-				ENABLE_STRICT_OBJC_MSGSEND = YES;
-				ENABLE_TESTABILITY = YES;
-				GCC_C_LANGUAGE_STANDARD = gnu11;
-				GCC_DYNAMIC_NO_PIC = NO;
-				GCC_NO_COMMON_BLOCKS = YES;
-				GCC_OPTIMIZATION_LEVEL = 0;
-				GCC_PREPROCESSOR_DEFINITIONS = (
-					"DEBUG=1",
-					"$(inherited)",
-				);
-				GCC_WARN_64_TO_32_BIT_CONVERSION = YES;
-				GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR;
-				GCC_WARN_UNDECLARED_SELECTOR = YES;
-				GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
-				GCC_WARN_UNUSED_FUNCTION = YES;
-				GCC_WARN_UNUSED_VARIABLE = YES;
-				IPHONEOS_DEPLOYMENT_TARGET = 13.0;
-				MTL_ENABLE_DEBUG_INFO = YES;
-				ONLY_ACTIVE_ARCH = YES;
-				SDKROOT = iphoneos;
-				SWIFT_ACTIVE_COMPILATION_CONDITIONS = DEBUG;
-				SWIFT_OPTIMIZATION_LEVEL = "-Onone";
-			};
-			name = Debug;
-		};
-		504EC3151FED79650016851F /* Release */ = {
-			isa = XCBuildConfiguration;
-			buildSettings = {
-				ALWAYS_SEARCH_USER_PATHS = NO;
-				CLANG_ANALYZER_NONNULL = YES;
-				CLANG_ANALYZER_NUMBER_OBJECT_CONVERSION = YES_AGGRESSIVE;
-				CLANG_CXX_LANGUAGE_STANDARD = "gnu++14";
-				CLANG_CXX_LIBRARY = "libc++";
-				CLANG_ENABLE_MODULES = YES;
-				CLANG_ENABLE_OBJC_ARC = YES;
-				CLANG_WARN_BLOCK_CAPTURE_AUTORELEASING = YES;
-				CLANG_WARN_BOOL_CONVERSION = YES;
-				CLANG_WARN_COMMA = YES;
-				CLANG_WARN_CONSTANT_CONVERSION = YES;
-				CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR;
-				CLANG_WARN_DOCUMENTATION_COMMENTS = YES;
-				CLANG_WARN_EMPTY_BODY = YES;
-				CLANG_WARN_ENUM_CONVERSION = YES;
-				CLANG_WARN_INFINITE_RECURSION = YES;
-				CLANG_WARN_INT_CONVERSION = YES;
-				CLANG_WARN_NON_LITERAL_NULL_CONVERSION = YES;
-				CLANG_WARN_OBJC_LITERAL_CONVERSION = YES;
-				CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR;
-				CLANG_WARN_RANGE_LOOP_ANALYSIS = YES;
-				CLANG_WARN_STRICT_PROTOTYPES = YES;
-				CLANG_WARN_SUSPICIOUS_MOVE = YES;
-				CLANG_WARN_UNGUARDED_AVAILABILITY = YES_AGGRESSIVE;
-				CLANG_WARN_UNREACHABLE_CODE = YES;
-				CLANG_WARN__DUPLICATE_METHOD_MATCH = YES;
-				CODE_SIGN_IDENTITY = "iPhone Developer";
-				COPY_PHASE_STRIP = NO;
-				DEBUG_INFORMATION_FORMAT = "dwarf-with-dsym";
-				ENABLE_NS_ASSERTIONS = NO;
-				ENABLE_STRICT_OBJC_MSGSEND = YES;
-				GCC_C_LANGUAGE_STANDARD = gnu11;
-				GCC_NO_COMMON_BLOCKS = YES;
-				GCC_WARN_64_TO_32_BIT_CONVERSION = YES;
-				GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR;
-				GCC_WARN_UNDECLARED_SELECTOR = YES;
-				GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
-				GCC_WARN_UNUSED_FUNCTION = YES;
-				GCC_WARN_UNUSED_VARIABLE = YES;
-				IPHONEOS_DEPLOYMENT_TARGET = 13.0;
-				MTL_ENABLE_DEBUG_INFO = NO;
-				SDKROOT = iphoneos;
-				SWIFT_OPTIMIZATION_LEVEL = "-Owholemodule";
-				VALIDATE_PRODUCT = YES;
-			};
-			name = Release;
-		};
-		504EC3171FED79650016851F /* Debug */ = {
-			isa = XCBuildConfiguration;
-			baseConfigurationReference = FC68EB0AF532CFC21C3344DD /* Pods-App.debug.xcconfig */;
-			buildSettings = {
-				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
-				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 1;
-				DEVELOPMENT_TEAM = 7WBJ6RDWEA;
-				INFOPLIST_FILE = App/Info.plist;
-				INFOPLIST_KEY_CFBundleDisplayName = "Dynamic Bible";
-				INFOPLIST_KEY_LSApplicationCategoryType = "public.app-category.education";
-				IPHONEOS_DEPLOYMENT_TARGET = 13.0;
-				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
-				MARKETING_VERSION = 4.0.0;
-				OTHER_SWIFT_FLAGS = "$(inherited) \"-D\" \"COCOAPODS\" \"-DDEBUG\"";
-				PRODUCT_BUNDLE_IDENTIFIER = walljm.dynamicbible;
-				PRODUCT_NAME = "$(TARGET_NAME)";
-				SWIFT_ACTIVE_COMPILATION_CONDITIONS = DEBUG;
-				SWIFT_VERSION = 5.0;
-				TARGETED_DEVICE_FAMILY = "1,2";
-			};
-			name = Debug;
-		};
-		504EC3181FED79650016851F /* Release */ = {
-			isa = XCBuildConfiguration;
-			baseConfigurationReference = AF51FD2D460BCFE21FA515B2 /* Pods-App.release.xcconfig */;
-			buildSettings = {
-				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
-				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 1;
-				DEVELOPMENT_TEAM = 7WBJ6RDWEA;
-				INFOPLIST_FILE = App/Info.plist;
-				INFOPLIST_KEY_CFBundleDisplayName = "Dynamic Bible";
-				INFOPLIST_KEY_LSApplicationCategoryType = "public.app-category.education";
-				IPHONEOS_DEPLOYMENT_TARGET = 13.0;
-				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
-				MARKETING_VERSION = 4.0.0;
-				PRODUCT_BUNDLE_IDENTIFIER = walljm.dynamicbible;
-				PRODUCT_NAME = "$(TARGET_NAME)";
-				SWIFT_ACTIVE_COMPILATION_CONDITIONS = "";
-				SWIFT_VERSION = 5.0;
-				TARGETED_DEVICE_FAMILY = "1,2";
-			};
-			name = Release;
-		};
-/* End XCBuildConfiguration section */
-
-/* Begin XCConfigurationList section */
-		504EC2FF1FED79650016851F /* Build configuration list for PBXProject "App" */ = {
-			isa = XCConfigurationList;
-			buildConfigurations = (
-				504EC3141FED79650016851F /* Debug */,
-				504EC3151FED79650016851F /* Release */,
-			);
-			defaultConfigurationIsVisible = 0;
-			defaultConfigurationName = Release;
-		};
-		504EC3161FED79650016851F /* Build configuration list for PBXNativeTarget "App" */ = {
-			isa = XCConfigurationList;
-			buildConfigurations = (
-				504EC3171FED79650016851F /* Debug */,
-				504EC3181FED79650016851F /* Release */,
-			);
-			defaultConfigurationIsVisible = 0;
-			defaultConfigurationName = Release;
-		};
-/* End XCConfigurationList section */
-	};
-	rootObject = 504EC2FC1FED79650016851F /* Project object */;
-}
--- a/src/ios/App/App.xcworkspace/contents.xcworkspacedata
+++ b/src/ios/App/App.xcworkspace/contents.xcworkspacedata
@ -1,10 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<Workspace
-   version = "1.0">
-   <FileRef
-      location = "group:App.xcodeproj">
-   </FileRef>
-   <FileRef
-      location = "group:Pods/Pods.xcodeproj">
-   </FileRef>
-</Workspace>
--- a/src/ios/App/App.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist
+++ b/src/ios/App/App.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist
@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
-<plist version="1.0">
-<dict>
-	<key>IDEDidComputeMac32BitWarning</key>
-	<true/>
-</dict>
-</plist>
--- a/src/ios/App/App/AppDelegate.swift
+++ b/src/ios/App/App/AppDelegate.swift
@ -1,49 +0,0 @@
-import UIKit
-import Capacitor
-
-@UIApplicationMain
-class AppDelegate: UIResponder, UIApplicationDelegate {
-
-    var window: UIWindow?
-
-    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
-        // Override point for customization after application launch.
-        return true
-    }
-
-    func applicationWillResignActive(_ application: UIApplication) {
-        // Sent when the application is about to move from active to inactive state. This can occur for certain types of temporary interruptions (such as an incoming phone call or SMS message) or when the user quits the application and it begins the transition to the background state.
-        // Use this method to pause ongoing tasks, disable timers, and invalidate graphics rendering callbacks. Games should use this method to pause the game.
-    }
-
-    func applicationDidEnterBackground(_ application: UIApplication) {
-        // Use this method to release shared resources, save user data, invalidate timers, and store enough application state information to restore your application to its current state in case it is terminated later.
-        // If your application supports background execution, this method is called instead of applicationWillTerminate: when the user quits.
-    }
-
-    func applicationWillEnterForeground(_ application: UIApplication) {
-        // Called as part of the transition from the background to the active state; here you can undo many of the changes made on entering the background.
-    }
-
-    func applicationDidBecomeActive(_ application: UIApplication) {
-        // Restart any tasks that were paused (or not yet started) while the application was inactive. If the application was previously in the background, optionally refresh the user interface.
-    }
-
-    func applicationWillTerminate(_ application: UIApplication) {
-        // Called when the application is about to terminate. Save data if appropriate. See also applicationDidEnterBackground:.
-    }
-
-    func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey: Any] = [:]) -> Bool {
-        // Called when the app was launched with a url. Feel free to add additional processing here,
-        // but if you want the App API to support tracking app url opens, make sure to keep this call
-        return ApplicationDelegateProxy.shared.application(app, open: url, options: options)
-    }
-
-    func application(_ application: UIApplication, continue userActivity: NSUserActivity, restorationHandler: @escaping ([UIUserActivityRestoring]?) -> Void) -> Bool {
-        // Called when the app was launched with an activity, including Universal Links.
-        // Feel free to add additional processing here, but if you want the App API to support
-        // tracking app url opens, make sure to keep this call
-        return ApplicationDelegateProxy.shared.application(application, continue: userActivity, restorationHandler: restorationHandler)
-    }
-
-}
--- a/src/ios/App/App/Assets.xcassets/AppIcon.appiconset/AppIcon-512@2x.png
+++ b/src/ios/App/App/Assets.xcassets/AppIcon.appiconset/AppIcon-512@2x.png
--- a/src/ios/App/App/Assets.xcassets/AppIcon.appiconset/Contents.json
+++ b/src/ios/App/App/Assets.xcassets/AppIcon.appiconset/Contents.json
@ -1,14 +0,0 @@
-{
-  "images" : [
-    {
-      "filename" : "AppIcon-512@2x.png",
-      "idiom" : "universal",
-      "platform" : "ios",
-      "size" : "1024x1024"
-    }
-  ],
-  "info" : {
-    "author" : "xcode",
-    "version" : 1
-  }
-}
--- a/src/ios/App/App/Assets.xcassets/Contents.json
+++ b/src/ios/App/App/Assets.xcassets/Contents.json
@ -1,6 +0,0 @@
-{
-  "info" : {
-    "version" : 1,
-    "author" : "xcode"
-  }
-}
--- a/src/ios/App/App/Assets.xcassets/Splash.imageset/Contents.json
+++ b/src/ios/App/App/Assets.xcassets/Splash.imageset/Contents.json
@ -1,23 +0,0 @@
-{
-  "images" : [
-    {
-      "idiom" : "universal",
-      "filename" : "splash-2732x2732-2.png",
-      "scale" : "1x"
-    },
-    {
-      "idiom" : "universal",
-      "filename" : "splash-2732x2732-1.png",
-      "scale" : "2x"
-    },
-    {
-      "idiom" : "universal",
-      "filename" : "splash-2732x2732.png",
-      "scale" : "3x"
-    }
-  ],
-  "info" : {
-    "version" : 1,
-    "author" : "xcode"
-  }
-}
--- a/src/ios/App/App/Assets.xcassets/Splash.imageset/splash-2732x2732-1.png
+++ b/src/ios/App/App/Assets.xcassets/Splash.imageset/splash-2732x2732-1.png
--- a/src/ios/App/App/Assets.xcassets/Splash.imageset/splash-2732x2732-2.png
+++ b/src/ios/App/App/Assets.xcassets/Splash.imageset/splash-2732x2732-2.png
--- a/src/ios/App/App/Assets.xcassets/Splash.imageset/splash-2732x2732.png
+++ b/src/ios/App/App/Assets.xcassets/Splash.imageset/splash-2732x2732.png
--- a/src/ios/App/App/Base.lproj/LaunchScreen.storyboard
+++ b/src/ios/App/App/Base.lproj/LaunchScreen.storyboard
@ -1,32 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="17132" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" launchScreen="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="01J-lp-oVM">
-    <device id="retina4_7" orientation="portrait" appearance="light"/>
-    <dependencies>
-        <deployment identifier="iOS"/>
-        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="17105"/>
-        <capability name="System colors in document resources" minToolsVersion="11.0"/>
-        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
-    </dependencies>
-    <scenes>
-        <!--View Controller-->
-        <scene sceneID="EHf-IW-A2E">
-            <objects>
-                <viewController id="01J-lp-oVM" sceneMemberID="viewController">
-                    <imageView key="view" userInteractionEnabled="NO" contentMode="scaleAspectFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="Splash" id="snD-IY-ifK">
-                        <rect key="frame" x="0.0" y="0.0" width="375" height="667"/>
-                        <autoresizingMask key="autoresizingMask"/>
-                        <color key="backgroundColor" systemColor="systemBackgroundColor"/>
-                    </imageView>
-                </viewController>
-                <placeholder placeholderIdentifier="IBFirstResponder" id="iYj-Kq-Ea1" userLabel="First Responder" sceneMemberID="firstResponder"/>
-            </objects>
-            <point key="canvasLocation" x="53" y="375"/>
-        </scene>
-    </scenes>
-    <resources>
-        <image name="Splash" width="1366" height="1366"/>
-        <systemColor name="systemBackgroundColor">
-            <color white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
-        </systemColor>
-    </resources>
-</document>
--- a/src/ios/App/App/Base.lproj/Main.storyboard
+++ b/src/ios/App/App/Base.lproj/Main.storyboard
@ -1,19 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="14111" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" colorMatched="YES" initialViewController="BYZ-38-t0r">
-    <device id="retina4_7" orientation="portrait">
-        <adaptation id="fullscreen"/>
-    </device>
-    <dependencies>
-        <deployment identifier="iOS"/>
-        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="14088"/>
-    </dependencies>
-    <scenes>
-        <!--Bridge View Controller-->
-        <scene sceneID="tne-QT-ifu">
-            <objects>
-                <viewController id="BYZ-38-t0r" customClass="CAPBridgeViewController" customModule="Capacitor" sceneMemberID="viewController"/>
-                <placeholder placeholderIdentifier="IBFirstResponder" id="dkx-z0-nzr" sceneMemberID="firstResponder"/>
-            </objects>
-        </scene>
-    </scenes>
-</document>
--- a/src/ios/App/App/Info.plist
+++ b/src/ios/App/App/Info.plist
@ -1,49 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
-<plist version="1.0">
-<dict>
-	<key>CFBundleDevelopmentRegion</key>
-	<string>en</string>
-	<key>CFBundleDisplayName</key>
-        <string>dynamicbible</string>
-	<key>CFBundleExecutable</key>
-	<string>$(EXECUTABLE_NAME)</string>
-	<key>CFBundleIdentifier</key>
-	<string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
-	<key>CFBundleInfoDictionaryVersion</key>
-	<string>6.0</string>
-	<key>CFBundleName</key>
-	<string>$(PRODUCT_NAME)</string>
-	<key>CFBundlePackageType</key>
-	<string>APPL</string>
-	<key>CFBundleShortVersionString</key>
-	<string>$(MARKETING_VERSION)</string>
-	<key>CFBundleVersion</key>
-	<string>$(CURRENT_PROJECT_VERSION)</string>
-	<key>LSRequiresIPhoneOS</key>
-	<true/>
-	<key>UILaunchStoryboardName</key>
-	<string>LaunchScreen</string>
-	<key>UIMainStoryboardFile</key>
-	<string>Main</string>
-	<key>UIRequiredDeviceCapabilities</key>
-	<array>
-		<string>armv7</string>
-	</array>
-	<key>UISupportedInterfaceOrientations</key>
-	<array>
-		<string>UIInterfaceOrientationPortrait</string>
-		<string>UIInterfaceOrientationLandscapeLeft</string>
-		<string>UIInterfaceOrientationLandscapeRight</string>
-	</array>
-	<key>UISupportedInterfaceOrientations~ipad</key>
-	<array>
-		<string>UIInterfaceOrientationPortrait</string>
-		<string>UIInterfaceOrientationPortraitUpsideDown</string>
-		<string>UIInterfaceOrientationLandscapeLeft</string>
-		<string>UIInterfaceOrientationLandscapeRight</string>
-	</array>
-	<key>UIViewControllerBasedStatusBarAppearance</key>
-	<true/>
-</dict>
-</plist>
--- a/src/ios/App/Podfile
+++ b/src/ios/App/Podfile
@ -1,24 +0,0 @@
-require_relative '../../node_modules/@capacitor/ios/scripts/pods_helpers'
-
-platform :ios, '13.0'
-use_frameworks!
-
-# workaround to avoid Xcode caching of Pods that requires
-# Product -> Clean Build Folder after new Cordova plugins installed
-# Requires CocoaPods 1.6 or newer
-install! 'cocoapods', :disable_input_output_paths => true
-
-def capacitor_pods
-  pod 'Capacitor', :path => '../../node_modules/@capacitor/ios'
-  pod 'CapacitorCordova', :path => '../../node_modules/@capacitor/ios'
-  pod 'CodetrixStudioCapacitorGoogleAuth', :path => '../../node_modules/@codetrix-studio/capacitor-google-auth'
-end
-
-target 'App' do
-  capacitor_pods
-  # Add your Pods here
-end
-
-post_install do |installer|
-  assertDeploymentTarget(installer)
-end
--- a/src/ios/App/Podfile.lock
+++ b/src/ios/App/Podfile.lock
@ -1,54 +0,0 @@
-PODS:
-  - AppAuth (1.7.1):
-    - AppAuth/Core (= 1.7.1)
-    - AppAuth/ExternalUserAgent (= 1.7.1)
-  - AppAuth/Core (1.7.1)
-  - AppAuth/ExternalUserAgent (1.7.1):
-    - AppAuth/Core
-  - Capacitor (6.1.0):
-    - CapacitorCordova
-  - CapacitorCordova (6.1.0)
-  - CodetrixStudioCapacitorGoogleAuth (0.0.1):
-    - Capacitor
-    - GoogleSignIn (~> 6.2.4)
-  - GoogleSignIn (6.2.4):
-    - AppAuth (~> 1.5)
-    - GTMAppAuth (~> 1.3)
-    - GTMSessionFetcher/Core (< 3.0, >= 1.1)
-  - GTMAppAuth (1.3.1):
-    - AppAuth/Core (~> 1.6)
-    - GTMSessionFetcher/Core (< 3.0, >= 1.5)
-  - GTMSessionFetcher/Core (2.3.0)
-
-DEPENDENCIES:
-  - "Capacitor (from `../../node_modules/@capacitor/ios`)"
-  - "CapacitorCordova (from `../../node_modules/@capacitor/ios`)"
-  - "CodetrixStudioCapacitorGoogleAuth (from `../../node_modules/@codetrix-studio/capacitor-google-auth`)"
-
-SPEC REPOS:
-  trunk:
-    - AppAuth
-    - GoogleSignIn
-    - GTMAppAuth
-    - GTMSessionFetcher
-
-EXTERNAL SOURCES:
-  Capacitor:
-    :path: "../../node_modules/@capacitor/ios"
-  CapacitorCordova:
-    :path: "../../node_modules/@capacitor/ios"
-  CodetrixStudioCapacitorGoogleAuth:
-    :path: "../../node_modules/@codetrix-studio/capacitor-google-auth"
-
-SPEC CHECKSUMS:
-  AppAuth: e93b919be5dbcbba49555011ce94f7d716368574
-  Capacitor: 187bd7847b6f71467015a20200a1a071be3e5f14
-  CapacitorCordova: be703980ca797f847c3356f78fa175d21c8330c2
-  CodetrixStudioCapacitorGoogleAuth: fcce058390347c1ce5d8ac4764bdf1f5c1ee233b
-  GoogleSignIn: 5651ce3a61e56ca864160e79b484cd9ed3f49b7a
-  GTMAppAuth: 0ff230db599948a9ad7470ca667337803b3fc4dd
-  GTMSessionFetcher: 3a63d75eecd6aa32c2fc79f578064e1214dfdec2
-
-PODFILE CHECKSUM: ef7e0fa555a35bc098cb53d9f170d080cea276c2
-
-COCOAPODS: 1.15.2
--- a/src/package-lock.json
+++ b/src/package-lock.json
--- a/src/package.json
+++ b/src/package.json
@ -16,54 +16,51 @@
  },
  "private": true,
  "dependencies": {
-    "@angular/animations": "^18.1.0",
-    "@angular/cdk": "^18.0.6",
-    "@angular/common": "^18.1.0",
-    "@angular/compiler": "^18.1.0",
-    "@angular/core": "^18.1.0",
-    "@angular/fire": "^18.0.1",
-    "@angular/forms": "^18.1.0",
-    "@angular/material": "^18.0.6",
-    "@angular/platform-browser": "^18.1.0",
-    "@angular/platform-browser-dynamic": "^18.1.0",
-    "@angular/router": "^18.1.0",
-    "@capacitor/android": "^6.0.0",
-    "@capacitor/core": "^6.0.0",
-    "@capacitor/ios": "^6.0.0",
+    "@angular/animations": "^17.2.3",
+    "@angular/cdk": "^17.2.1",
+    "@angular/common": "^17.2.3",
+    "@angular/compiler": "^17.2.3",
+    "@angular/core": "^17.2.3",
+    "@angular/fire": "^17.0.1",
+    "@angular/forms": "^17.2.3",
+    "@angular/material": "^17.2.1",
+    "@angular/platform-browser": "^17.2.3",
+    "@angular/platform-browser-dynamic": "^17.2.3",
+    "@angular/router": "^17.2.3",
+    "@capacitor/android": "^5.7.0",
+    "@capacitor/core": "^5.7.0",
+    "@capacitor/ios": "^5.7.0",
    "@codetrix-studio/capacitor-google-auth": "^3.4.0-rc.0",
-    "@ngx-pwa/local-storage": "^18.0.0",
+    "@ngx-pwa/local-storage": "^17.0.0",
    "angular2-uuid": "^1.1.1",
+    "component": "^1.1.0",
    "firebase": "^10.8.0",
    "marked": "^9.0.0",
-    "ngx-markdown": "^18.0.0",
+    "ngx-markdown": "^17.1.1",
+    "redux": "^5.0.1",
    "reselect": "^5.1.0",
    "rxjs": "^7.8.1",
    "tslib": "^2.6.2",
    "zone.js": "~0.14.4"
  },
  "devDependencies": {
-    "@angular-devkit/architect": "0.1800.7",
-    "@angular-devkit/build-angular": "^18.0.7",
-    "@angular-eslint/builder": "18.1.0",
-    "@angular-eslint/eslint-plugin": "18.1.0",
-    "@angular-eslint/eslint-plugin-template": "18.1.0",
-    "@angular-eslint/schematics": "18.1.0",
-    "@angular-eslint/template-parser": "18.1.0",
-    "@angular/cli": "^18.0.7",
-    "@angular/compiler-cli": "^18.1.0",
-    "@capacitor/cli": "^6.0.0",
+    "@angular-devkit/architect": "0.1702.1",
+    "@angular-devkit/build-angular": "^17.2.1",
+    "@angular-eslint/builder": "17.2.1",
+    "@angular-eslint/eslint-plugin": "17.2.1",
+    "@angular-eslint/eslint-plugin-template": "17.2.1",
+    "@angular-eslint/schematics": "17.2.1",
+    "@angular-eslint/template-parser": "17.2.1",
+    "@angular/cli": "^17.2.1",
+    "@angular/compiler-cli": "^17.2.1",
+    "@capacitor/cli": "^5.7.0",
    "@cypress/schematic": "^2.5.1",
    "@types/jasmine": "~5.1.4",
    "@types/jasminewd2": "~2.0.13",
    "@types/node": "^20.11.21",
-    "@typescript-eslint/eslint-plugin": "^7.2.0",
-    "@typescript-eslint/parser": "^7.2.0",
-    "cypress": "13.6.6",
+    "@typescript-eslint/eslint-plugin": "7.1.0",
+    "@typescript-eslint/parser": "7.1.0",
    "eslint": "^8.57.0",
-    "eslint-plugin-deprecation": "^3.0.0",
-    "eslint-plugin-optimize-regex": "^1.2.1",
-    "eslint-plugin-simple-import-sort": "^12.0.0",
-    "eslint-plugin-unused-imports": "^3.1.0",
    "firebase-tools": "^13.4.0",
    "fuzzy": "^0.1.3",
    "inquirer": "^9.2.15",
@ -77,7 +74,8 @@
    "karma-jasmine-html-reporter": "^2.1.0",
    "open": "^10.0.4",
    "ts-node": "~10.9.2",
-    "typescript": "~5.4.5"
+    "typescript": "~5.3.3",
+    "cypress": "latest"
  },
  "browserslist": [
    "last 1 Chrome version",
@ -89,4 +87,4 @@
    "not IE 9-10 ",
    "not IE 11 "
  ]
-}
+}
--- a/src/src/app/app-routing.module.ts
+++ b/src/src/app/app-routing.module.ts
@ -1,9 +1,8 @@
 import { NgModule } from '@angular/core';
-import { RouterModule,Routes } from '@angular/router';
-
-import { NotesAdminPageComponent } from './pages/notes-admin/notes-admin.page';
-import { SavedPagesAdminPageComponent } from './pages/saved-pages-admin/saved-pages-admin.page';
+import { Routes, RouterModule } from '@angular/router';
 import { SearchPageComponent } from './pages/search/search.page';
+import { SavedPagesAdminPageComponent } from './pages/saved-pages-admin/saved-pages-admin.page';
+import { NotesAdminPageComponent } from './pages/notes-admin/notes-admin.page';

 const routes: Routes = [
  {
--- a/src/src/app/app.component.html
+++ b/src/src/app/app.component.html
@ -16,7 +16,7 @@
        >

        <a mat-list-item (click)="showHelp()"
-          ><mat-icon color="accenovert">help</mat-icon> Help</a
+          ><mat-icon color="accenovert">help</mat-icon>Help</a
        >
      </mat-nav-list>

--- a/src/src/app/app.component.ts
+++ b/src/src/app/app.component.ts
@ -1,16 +1,15 @@
-import { BreakpointObserver,Breakpoints } from '@angular/cdk/layout';
-import { AfterViewInit, ChangeDetectorRef,Component, ViewChild } from '@angular/core';
-import { MatDialog } from '@angular/material/dialog';
-import { MatSidenav } from '@angular/material/sidenav';
-import { MatSnackBar } from '@angular/material/snack-bar';
-import { Observable } from 'rxjs';
-import { map, shareReplay } from 'rxjs/operators';
-
-import { SubscriberBase } from './common/subscriber-base';
-import { HelpModalComponent } from './components/help-modal/help-modal.component';
+import { Component, ViewChild, AfterViewInit, OnDestroy, ChangeDetectorRef } from '@angular/core';
 import { AppService } from './services/app.service';
 import { NavService } from './services/nav.service';
 import { StorageService } from './services/storage.service';
+import { Observable } from 'rxjs';
+import { Breakpoints, BreakpointObserver } from '@angular/cdk/layout';
+import { map, shareReplay } from 'rxjs/operators';
+import { MatSidenav } from '@angular/material/sidenav';
+import { SubscriberBase } from './common/subscriber-base';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { HelpModalComponent } from './components/help-modal/help-modal.component';
+import { MatDialog } from '@angular/material/dialog';

@Component({
  selector: 'app-root',
@ -50,9 +49,6 @@ export class AppComponent extends SubscriberBase implements AfterViewInit {
      this.error$.subscribe((err) => {
        if (err) {
          this.snackBar.open(`Oh no! ${err.msg}`, 'Dismiss  Error');
-          setTimeout(() => {
-            this.snackBar.dismiss(); // dismiss if its still there after 25 seconds.
-          }, 25 * 1000);
        }
      })
    );
--- a/src/src/app/app.module.ts
+++ b/src/src/app/app.module.ts
@ -1,64 +1,73 @@
-import { ClipboardModule } from '@angular/cdk/clipboard';
-import { DragDropModule } from '@angular/cdk/drag-drop';
-import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
-import { APP_ID, NgModule } from '@angular/core';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { HttpClientModule } from '@angular/common/http';
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+
+import { MARKED_OPTIONS, MarkdownModule } from 'ngx-markdown';
+
 import { AngularFireModule } from '@angular/fire/compat';
+import { FirebaseConfig } from './constants';
+import { DragDropModule } from '@angular/cdk/drag-drop';
 import { AngularFireAuthModule } from '@angular/fire/compat/auth';
 import { AngularFireDatabaseModule } from '@angular/fire/compat/database';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatAutocompleteModule } from '@angular/material/autocomplete';
-import { MatBadgeModule } from '@angular/material/badge';
-import { MatBottomSheetModule } from '@angular/material/bottom-sheet';
-import { MatButtonModule } from '@angular/material/button';
-import { MatButtonToggleModule } from '@angular/material/button-toggle';
-import { MatCardModule } from '@angular/material/card';
+
 import { MatCheckboxModule } from '@angular/material/checkbox';
-import { MatChipsModule } from '@angular/material/chips';
-import { MatNativeDateModule, MatRippleModule } from '@angular/material/core';
-import { MatDialogModule } from '@angular/material/dialog';
-import { MatDividerModule } from '@angular/material/divider';
-import { MatExpansionModule } from '@angular/material/expansion';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
 import { MatInputModule } from '@angular/material/input';
-import { MatListModule } from '@angular/material/list';
-import { MatMenuModule } from '@angular/material/menu';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatRadioModule } from '@angular/material/radio';
 import { MatSelectModule } from '@angular/material/select';
-import { MatSidenavModule } from '@angular/material/sidenav';
-import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { MatSliderModule } from '@angular/material/slider';
-import { MatSnackBarModule } from '@angular/material/snack-bar';
-import { MatStepperModule } from '@angular/material/stepper';
-import { MatTabsModule } from '@angular/material/tabs';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatSidenavModule } from '@angular/material/sidenav';
 import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatListModule } from '@angular/material/list';
+import { MatCardModule } from '@angular/material/card';
+import { MatStepperModule } from '@angular/material/stepper';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import { MatIconModule } from '@angular/material/icon';
+import { MatDialogModule } from '@angular/material/dialog';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import { BrowserModule } from '@angular/platform-browser';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { MarkdownModule,MARKED_OPTIONS } from 'ngx-markdown';
-import { MarkedOptions, MarkedRenderer } from 'ngx-markdown';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { MatBadgeModule } from '@angular/material/badge';
+import { MatBottomSheetModule } from '@angular/material/bottom-sheet';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatNativeDateModule, MatRippleModule } from '@angular/material/core';
+import { ClipboardModule } from '@angular/cdk/clipboard';

-import { AppComponent } from './app.component';
 import { AppRoutingModule } from './app-routing.module';
-import { AddToPageModalComponent } from './components/add-to-page-modal/add-to-page-modal.component';
-import { CardEditModalComponent } from './components/card-edit-modal/card-edit-modal.component';
-import { HelpModalComponent } from './components/help-modal/help-modal.component';
-import { NoteEditModalComponent } from './components/note/edit-modal/note-edit-modal.component';
-import { NoteCardComponent } from './components/note/note-card.component';
-import { OkCancelModalComponent } from './components/ok-cancel-modal/ok-cancel-modal.component';
-import { PageEditModalComponent } from './components/page-edit-modal/page-edit-modal.component';
-import { PassageCardComponent } from './components/passage/passage-card.component';
+import { AppComponent } from './app.component';
+
+import { NotesAdminPageComponent } from './pages/notes-admin/notes-admin.page';
+
+import { SavedPagesAdminPageComponent } from './pages/saved-pages-admin/saved-pages-admin.page';
 import { SavedPageCardComponent } from './components/saved-page-card/saved-page-card.component';
+
+import { HelpModalComponent } from './components/help-modal/help-modal.component';
+
+import { SearchPageComponent } from './pages/search/search.page';
+
+import { OkCancelModalComponent } from './components/ok-cancel-modal/ok-cancel-modal.component';
 import { SettingsComponent } from './components/settings/settings.component';
+
+import { PassageCardComponent } from './components/passage/passage-card.component';
+import { StrongsComponent } from './components/strongs/strongs.component';
 import { StrongsCardComponent } from './components/strongs/card/strongs-card.component';
 import { StrongsModalComponent } from './components/strongs/modal/strongs-modal.component';
-import { StrongsComponent } from './components/strongs/strongs.component';
-import { VersePickerModalComponent } from './components/verse-picker-modal/verse-picker-modal.component';
 import { WordsCardComponent } from './components/words/words-card.component';
-import { FirebaseConfig } from './constants';
-import { NotesAdminPageComponent } from './pages/notes-admin/notes-admin.page';
-import { SavedPagesAdminPageComponent } from './pages/saved-pages-admin/saved-pages-admin.page';
-import { SearchPageComponent } from './pages/search/search.page';
+import { NoteCardComponent } from './components/note/note-card.component';
+import { PageEditModalComponent } from './components/page-edit-modal/page-edit-modal.component';
+import { NoteEditModalComponent } from './components/note/edit-modal/note-edit-modal.component';
+import { VersePickerModalComponent } from './components/verse-picker-modal/verse-picker-modal.component';
+import { AddToPageModalComponent } from './components/add-to-page-modal/add-to-page-modal.component';
+
+
+import { MarkedOptions, MarkedRenderer } from 'ngx-markdown';

 // function that returns `MarkedOptions` with renderer override
 export function markedOptionsFactory(): MarkedOptions {
@ -76,69 +85,78 @@ export function markedOptionsFactory(): MarkedOptions {
  };
 }

-@NgModule({ declarations: [
-        AppComponent,
-        NotesAdminPageComponent,
-        SavedPagesAdminPageComponent,
-        SavedPageCardComponent,
-        HelpModalComponent,
-        SearchPageComponent,
-        PassageCardComponent,
-        StrongsComponent,
-        StrongsCardComponent,
-        StrongsModalComponent,
-        WordsCardComponent,
-        NoteCardComponent,
-        PageEditModalComponent,
-        NoteEditModalComponent,
-        AddToPageModalComponent,
-        VersePickerModalComponent,
-        SettingsComponent,
-        OkCancelModalComponent,
-        CardEditModalComponent,
-    ],
-    bootstrap: [AppComponent], imports: [BrowserModule,
-        ReactiveFormsModule,
-        FormsModule,
-        AppRoutingModule,
-        BrowserAnimationsModule,
-        MarkdownModule.forRoot({
-            markedOptions: {
-                provide: MARKED_OPTIONS,
-                useFactory: markedOptionsFactory,
-            },
-        }),
-        AngularFireModule.initializeApp(FirebaseConfig),
-        AngularFireAuthModule,
-        AngularFireDatabaseModule,
-        DragDropModule,
-        MatSidenavModule,
-        MatChipsModule,
-        MatToolbarModule,
-        MatIconModule,
-        MatAutocompleteModule,
-        MatBadgeModule,
-        MatBottomSheetModule,
-        MatButtonModule,
-        MatButtonToggleModule,
-        MatCardModule,
-        MatCheckboxModule,
-        MatStepperModule,
-        MatDialogModule,
-        MatDividerModule,
-        MatExpansionModule,
-        MatInputModule,
-        MatListModule,
-        MatMenuModule,
-        MatNativeDateModule,
-        MatRadioModule,
-        MatRippleModule,
-        MatSelectModule,
-        MatSliderModule,
-        MatSlideToggleModule,
-        MatSnackBarModule,
-        MatTooltipModule,
-        MatFormFieldModule,
-        MatTabsModule,
-        ClipboardModule], providers: [{ provide: APP_ID, useValue: 'ng-cli-universal' }, provideHttpClient(withInterceptorsFromDi())] })
+@NgModule({
+  declarations: [
+    AppComponent,
+    NotesAdminPageComponent,
+    SavedPagesAdminPageComponent,
+    SavedPageCardComponent,
+    HelpModalComponent,
+    SearchPageComponent,
+    PassageCardComponent,
+    StrongsComponent,
+    StrongsCardComponent,
+    StrongsModalComponent,
+    WordsCardComponent,
+    NoteCardComponent,
+    PageEditModalComponent,
+    NoteEditModalComponent,
+    AddToPageModalComponent,
+    VersePickerModalComponent,
+    SettingsComponent,
+    OkCancelModalComponent,
+  ],
+  imports: [
+    BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
+    HttpClientModule,
+
+    ReactiveFormsModule,
+    FormsModule,
+    AppRoutingModule,
+    BrowserAnimationsModule,
+
+    MarkdownModule.forRoot({
+      markedOptions: {
+        provide: MARKED_OPTIONS,
+        useFactory: markedOptionsFactory,
+      },
+    }),
+
+    AngularFireModule.initializeApp(FirebaseConfig),
+    AngularFireAuthModule,
+    AngularFireDatabaseModule,
+
+    DragDropModule,
+    MatSidenavModule,
+    MatChipsModule,
+    MatToolbarModule,
+    MatIconModule,
+    MatAutocompleteModule,
+    MatBadgeModule,
+    MatBottomSheetModule,
+    MatButtonModule,
+    MatButtonToggleModule,
+    MatCardModule,
+    MatCheckboxModule,
+    MatStepperModule,
+    MatDialogModule,
+    MatDividerModule,
+    MatExpansionModule,
+    MatInputModule,
+    MatListModule,
+    MatMenuModule,
+    MatNativeDateModule,
+    MatRadioModule,
+    MatRippleModule,
+    MatSelectModule,
+    MatSliderModule,
+    MatSlideToggleModule,
+    MatSnackBarModule,
+    MatTooltipModule,
+    MatFormFieldModule,
+    ClipboardModule,
+  ],
+  providers: [],
+  bootstrap: [AppComponent],
+})
 export class AppModule {}
--- a/src/src/app/common/array-operations.spec.ts
+++ b/src/src/app/common/array-operations.spec.ts
@ -1,4 +1,4 @@
-import { moveItem,moveItemUpOrDown } from './array-operations';
+import { moveItemUpOrDown, moveItem } from './array-operations';
 import { MoveDirection } from './move-direction';

 describe('Array Movement', () => {
--- a/src/src/app/common/array-operations.ts
+++ b/src/src/app/common/array-operations.ts
@ -1,6 +1,5 @@
-import { moveItemInArray } from '@angular/cdk/drag-drop';
-
 import { MoveDirection } from './move-direction';
+import { moveItemInArray } from '@angular/cdk/drag-drop';

 /**
 * Moves an item up (1 index towards 0) or down (1 index away from 0) immutably, returning a new array as the value.
--- a/src/src/app/common/bible-reference.ts
+++ b/src/src/app/common/bible-reference.ts
@ -924,7 +924,7 @@ export class BibleReference {
    if (this.ref.length === 0) {
      return;
    }
-    this.parseBook();
+    this.parseBook(false);
    this.parseChapter(false);

    const foundFirstVerse = this.ref.search(/:.*-/) !== -1;
@ -932,7 +932,7 @@ export class BibleReference {
    this.maybeParseRangeSep();
    const foundSecondBook = this.ref.search(/\w\s+\d/i) !== -1;

-    this.maybeParseBook();
+    this.maybeParseBook(true);
    this.maybeParseChapterOrVerse(foundSecondBook, foundFirstVerse, true);
    this.maybeParseVerse(true);
  }
@ -958,7 +958,7 @@ export class BibleReference {
    }
  }

-  private parseBook() {
+  private parseBook(isEnd?: boolean) {
    this.ref = this.ref.toLowerCase().trim();

    let fbook = this.ref.substring(0, this.ref.search(/\w\s+\d/i) + 1);
@ -1039,10 +1039,10 @@ export class BibleReference {
    }
  }

-  private maybeParseBook() {
+  private maybeParseBook(isEnd: boolean) {
    return this.maybeDo(() => {
      if (this.ref.search(/\w\s+\d/i) !== -1) {
-        this.parseBook();
+        this.parseBook(isEnd);
      }
    });
  }
--- a/src/src/app/common/card-cache-operations.spec.ts
+++ b/src/src/app/common/card-cache-operations.spec.ts
@ -1,7 +1,7 @@
-import { CardItem,CardType } from '../models/card-state';
+import { CardType, CardItem } from '../models/card-state';
 import { NoteItem } from '../models/note-state';
-import { getCardCacheKey, removeFromCardCache,updateInCardCache } from './card-cache-operations';
 import { HashTable } from './hashtable';
+import { updateInCardCache, getCardCacheKey, removeFromCardCache } from './card-cache-operations';

 describe('Card Cache', () => {
  it('updateCache', () => {
@ -48,6 +48,16 @@ describe('Card Cache', () => {
      type: CardType.Passage,
      data: null,
    };
+    const card2: CardItem = {
+      qry: 'jason',
+      type: CardType.Passage,
+      data: {
+        id: 'adsf',
+        xref: '',
+        title: 'adsf',
+        content: '',
+      } as NoteItem,
+    };
    const card3: CardItem = {
      qry: 'jason3',
      type: CardType.Passage,
--- a/src/src/app/common/card-operations.spec.ts
+++ b/src/src/app/common/card-operations.spec.ts
@ -1,6 +1,6 @@
-import { CardItem,CardType } from '../models/card-state';
-import { BibleReference, Overlap } from './bible-reference';
 import { mergeCardList } from './card-operations';
+import { BibleReference, Overlap } from './bible-reference';
+import { CardType, CardItem } from '../models/card-state';

 describe('Card Merging', () => {
  it('Should merge two equal reference cards', () => {
--- a/src/src/app/common/card-operations.ts
+++ b/src/src/app/common/card-operations.ts
@ -1,5 +1,5 @@
-import { CardType, DataReference } from '../models/card-state';
 import { BibleReference, Overlap } from './bible-reference';
+import { CardType, DataReference } from '../models/card-state';

 export function maybeMergeCards(
  leftCard: DataReference,
--- a/src/src/app/common/state-service.ts
+++ b/src/src/app/common/state-service.ts
@ -1,6 +1,103 @@
+import { Store, createStore } from 'redux';
+
 import { BehaviorSubject, Observable } from 'rxjs';
 import { distinctUntilChanged, map } from 'rxjs/operators';

+/**
+ * A base class from which to extend a service to provide predictable state to components. You should not extend this
+ * class directly; instead, use the {@link createStateService} function to create a base class specific to your service.
+ * @see {@link createStateService}
+ */
+class StateService<TState, TAction extends { type: string }> {
+  /** An observable that provides the entire state managed by the service. */
+  public readonly state$: Observable<TState>;
+
+  private readonly store: Store<TState, TAction>;
+  private readonly internalState$: BehaviorSubject<TState>;
+
+  protected constructor(reducer: (state: TState, action: TAction) => TState, initialState: TState) {
+    this.store = createStore(
+      reducer,
+      initialState as any, // this cast is required by Redux's typings, it should have no impact
+      undefined // in the future, we may want to add some middleware to the Redux stores. that goes here!
+    );
+
+    this.internalState$ = new BehaviorSubject<TState>(initialState as TState);
+
+    // BehaviorSubject.asObservable returns a new object, so hold onto it to avoid unnecessary allocations
+    this.state$ = this.internalState$.asObservable();
+
+    this.store.subscribe(() => this.internalState$.next(this.store.getState()));
+  }
+
+  /**
+   * Creates an observable that provides data derived from the state managed by the service.
+   * @param selector A selector that maps the state to the derived data.
+   */
+  public select<TDerived>(selector: (state: TState) => TDerived): Observable<TDerived> {
+    return this.state$.pipe(map(selector), distinctUntilChanged());
+  }
+
+  /**
+   * Gets the current state managed by the service. **You should only use the current state to validate operations or
+   * help to construct actions to be dispatched.** Try not to expose any state retrieved using this method outside the
+   * derived service class.
+   */
+  protected getState(): TState {
+    return this.internalState$.value;
+  }
+
+  /**
+   * Dispatches an action to the underlying Redux store.
+   * @param action The action to dispatch.
+   */
+  protected dispatch(action: TAction) {
+    this.store.dispatch(action);
+  }
+}
+
+/**
+ * Creates a deeply-immutable type from the provided type. Objects' properties will be marked as `readonly`, array types
+ * will be replaced with {@link ReadonlyArray}, {@link Map} types will be replaced with {@link ReadonlyMap}, and
+ * {@link Set} types will be replaced with {@link ReadonlySet}.
+ */
+export type Immutable<T> = T extends undefined | null | boolean | string | number
+  ? T
+  : T extends Array<infer U>
+  ? ImmutableArray<U>
+  : T extends Map<infer K, infer V>
+  ? ImmutableMap<K, V>
+  : T extends Set<infer M>
+  ? ImmutableSet<M>
+  : { readonly [N in keyof T]: Immutable<T[N]> };
+
+interface ImmutableArray<T> extends ReadonlyArray<Immutable<T>> {}
+interface ImmutableMap<K, V> extends ReadonlyMap<Immutable<K>, Immutable<V>> {}
+interface ImmutableSet<T> extends ReadonlySet<Immutable<T>> {}
+
+// The below type definition is simpler, but it only works with TypeScript 3.7 and above. Swap this in when we upgrade!
+
+// export type Immutable<T> = T extends undefined | null | boolean | string | number
+//   ? T
+//   : T extends Array<infer U>
+//   ? ReadonlyArray<Immutable<U>>
+//   : T extends Map<infer K, infer V>
+//   ? ReadonlyMap<Immutable<K>, Immutable<V>>
+//   : T extends Set<infer M>
+//   ? ReadonlySet<Immutable<M>>
+//   : { readonly [N in keyof T]: Immutable<T[N]> };
+
+type IfEquals<X, Y, A = X, B = never> = (<T>() => T extends X ? 1 : 2) extends <T>() => T extends Y ? 1 : 2 ? A : B;
+type IfImmutable<TState extends {}, TImmutable = TState, TMutable = never> = IfEquals<
+  TState,
+  { readonly [K in keyof TState]: Immutable<TState[K]> },
+  TImmutable,
+  TMutable
+>;
+
+// eslint-disable-next-line
+type YourStateTypeNeedsToBeImmutable<TState> = {};
+
 /**
 * Creates a base class from which to extend a service to provide predictable state to components.
 *
@ -19,75 +116,15 @@ import { distinctUntilChanged, map } from 'rxjs/operators';
 * @param reducer A function that takes the previous state and the dispatched action and returns the new state.
 * @param initialState The initial state of the service.
 */
-export function createReducingService<TState>(initialState: TState) {
-  const stateServiceClass = class extends ReducingService<TState> {
+export function createStateService<TState, TAction extends { type: string }>(
+  reducer: (state: TState, action: TAction) => TState,
+  initialState: TState
+) {
+  const stateServiceClass = class extends StateService<TState, TAction> {
    constructor() {
-      super(initialState);
+      super(reducer, initialState);
    }
  };

  return stateServiceClass as IfImmutable<TState, typeof stateServiceClass, YourStateTypeNeedsToBeImmutable<TState>>;
 }
-
-export interface IReducingAction<TState> {
-  handle: (state: TState) => TState;
-}
-
-/**
- * Creates a deeply-immutable type from the provided type. Objects' properties will be marked as `readonly`, array types
- * will be replaced with {@link ReadonlyArray}, {@link Map} types will be replaced with {@link ReadonlyMap}, and
- * {@link Set} types will be replaced with {@link ReadonlySet}.
- */
-export type Immutable<T> = T extends undefined | null | boolean | string | number
-  ? T
-  : T extends Array<infer U>
-  ? ReadonlyArray<Immutable<U>>
-  : T extends Map<infer K, infer V>
-  ? ReadonlyMap<Immutable<K>, Immutable<V>>
-  : T extends Set<infer M>
-  ? ReadonlySet<Immutable<M>>
-  : { readonly [N in keyof T]: Immutable<T[N]> };
-
-type IfEquals<X, Y, A = X, B = never> = (<T>() => T extends X ? 1 : 2) extends <T>() => T extends Y ? 1 : 2 ? A : B;
-type IfImmutable<TState extends {}, TImmutable = TState, TMutable = never> = IfEquals<
-  TState,
-  { readonly [K in keyof TState]: Immutable<TState[K]> },
-  TImmutable,
-  TMutable
->;
-
-// eslint-disable-next-line
-type YourStateTypeNeedsToBeImmutable<TState> = {};
-
-class ReducingService<TState> {
-  private internalState$: BehaviorSubject<TState>;
-
-  constructor(private initialState: TState) {
-    this.internalState$ = new BehaviorSubject(initialState);
-  }
-
-  // expose as observable.
-  public get state$() {
-    return this.internalState$.asObservable();
-  }
-
-  protected dispatch(action: IReducingAction<TState>) {
-    this.internalState$.next(action.handle(this.internalState$.value));
-  }
-
-  /**
-   * Gets the current state managed by the service. **You should only use the current state to validate operations or
-   * help to construct actions to be dispatched.** Try not to expose any state retrieved using this method outside the
-   * derived service class.
-   */
-  protected getState(): TState {
-    return this.internalState$.value;
-  }
-  /**
-   * Creates an observable that provides data derived from the state managed by the service.
-   * @param selector A selector that maps the state to the derived data.
-   */
-  public select<TDerived>(selector: (state: TState) => TDerived): Observable<TDerived> {
-    return this.internalState$.pipe(map(selector), distinctUntilChanged());
-  }
-}
--- a/src/src/app/common/storable.ts
+++ b/src/src/app/common/storable.ts
@ -22,5 +22,5 @@ export interface UserVersion {

 export enum StorableType {
  initial,
-  modified,
+  modified
 }
--- a/src/src/app/common/subscriber-base.ts
+++ b/src/src/app/common/subscriber-base.ts
@ -1,4 +1,4 @@
-import { Injectable,OnDestroy } from '@angular/core';
+import { OnDestroy, Injectable } from '@angular/core';
 import { Subscription } from 'rxjs';

@Injectable({
--- a/src/src/app/components/add-to-page-modal/add-to-page-modal.component.html
+++ b/src/src/app/components/add-to-page-modal/add-to-page-modal.component.html
@ -1,14 +1,16 @@
-<mat-toolbar>
-  <mat-icon>save</mat-icon>
-  <div class="title">Add Card to Saved Page</div>
-</mat-toolbar>
+<div mat-dialog-title>
+  <mat-toolbar>
+    <mat-icon>save</mat-icon>
+    <div class="title">Add Card to Saved Page</div>
+  </mat-toolbar>
+</div>
 <mat-dialog-content class="content">
  <div class="page-list">
    <mat-selection-list #pageList>
      <mat-list-option
        *ngFor="let page of this.pages$ | async"
        [value]="page"
-        [checkboxPosition]="'before'"
+        [checkBoxPosition]="before"
      >
        {{ page.title }}
      </mat-list-option>
@ -24,6 +26,7 @@
    ><button
      class="page-add-button"
      mat-icon-button
+      mat-button
      [disableRipple]="true"
      (click)="addPage()"
    >
--- a/src/src/app/components/add-to-page-modal/add-to-page-modal.component.ts
+++ b/src/src/app/components/add-to-page-modal/add-to-page-modal.component.ts
@ -1,9 +1,8 @@
 import { Component, Inject, ViewChild } from '@angular/core';
-import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
-import { MAT_DIALOG_DATA,MatDialogRef } from '@angular/material/dialog';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { MatSelectionList } from '@angular/material/list';
-import { AppService } from 'src/app/services/app.service';
-
+import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
+import { AppService } from '../../services/app.service';
 import { CardItem } from '../../models/card-state';

@Component({
--- a/src/src/app/components/card-edit-modal/card-edit-modal.component.html
+++ b/src/src/app/components/card-edit-modal/card-edit-modal.component.html
@ -1,16 +0,0 @@
-<mat-toolbar>
-  <mat-icon>save</mat-icon>
-</mat-toolbar>
-<mat-dialog-content class="content">
-  <form [formGroup]="form">
-    <mat-form-field class="page-title">
-      <mat-label>Query</mat-label>
-      <input formControlName="qry" matInput />
-    </mat-form-field>
-  </form>
-
-  <div mat-dialog-actions>
-    <button mat-button (click)="save()">Save</button>
-    <button mat-button (click)="cancel()">Cancel</button>
-  </div>
-</mat-dialog-content>
--- a/src/src/app/components/card-edit-modal/card-edit-modal.component.scss
+++ b/src/src/app/components/card-edit-modal/card-edit-modal.component.scss
@ -1,25 +0,0 @@
-.close-button {
-  float: right;
-}
-
-.title {
-  width: 100%;
-  padding-left: 1rem;
-  font-size: 1.5rem;
-  overflow: hidden;
-}
-
-.mat-mdc-form-field {
-  display: block;
-}
-
-.page-title {
-  min-width: 50vw;
-  padding-top: 12px;
-}
-
-.mat-mdc-dialog-content {
-  min-width: 60vw;
-  min-height: 20vh;
-  max-height: 80vh;
-}
--- a/src/src/app/components/card-edit-modal/card-edit-modal.component.ts
+++ b/src/src/app/components/card-edit-modal/card-edit-modal.component.ts
@ -1,45 +0,0 @@
-import { Component, Inject } from '@angular/core';
-import { FormGroup, UntypedFormBuilder } from '@angular/forms';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
-import { CardItem } from 'src/app/models/card-state';
-import { AppService } from 'src/app/services/app.service';
-
-@Component({
-  selector: 'app-card-edit-modal',
-  templateUrl: 'card-edit-modal.component.html',
-  styleUrls: ['./card-edit-modal.component.scss'],
-})
-export class CardEditModalComponent {
-  form: FormGroup;
-  dialogTitle = 'Save Page using Current Cards';
-  oldCard: CardItem;
-
-  constructor(
-    @Inject(MAT_DIALOG_DATA) public data: CardEditModalData,
-    public dialogRef: MatDialogRef<CardEditModalComponent>,
-    private appService: AppService,
-    private fb: UntypedFormBuilder
-  ) {
-    this.oldCard = data.card;
-    this.form = this.fb.group(data.card);
-  }
-
-  cancel() {
-    this.dialogRef.close();
-  }
-
-  save() {
-    this.appService.updateCard(
-      {
-        qry: this.form.get('qry').value,
-        type: this.form.get('type').value,
-      } as CardItem,
-      this.oldCard
-    );
-    this.dialogRef.close();
-  }
-}
-
-export interface CardEditModalData {
-  card: CardItem;
-}
--- a/src/src/app/components/card.component.ts
+++ b/src/src/app/components/card.component.ts
@ -1,14 +1,11 @@
-import { Clipboard } from '@angular/cdk/clipboard';
-import { Component, ElementRef, EventEmitter, Input, Output } from '@angular/core';
-import { MatDialog } from '@angular/material/dialog';
+import { EventEmitter, Output, Input, ElementRef, Component } from '@angular/core';
 import { Observable } from 'rxjs';
-
-import { MoveDirection } from '../common/move-direction';
+import { MatDialog } from '@angular/material/dialog';
 import { SubscriberBase } from '../common/subscriber-base';
+import { AppService } from 'src/app/services/app.service';
+import { MoveDirection } from '../common/move-direction';
 import { AddToPageModalComponent } from '../components/add-to-page-modal/add-to-page-modal.component';
 import { CardItem } from '../models/card-state';
-import { AppService } from '../services/app.service';
-import { CardEditModalComponent } from './card-edit-modal/card-edit-modal.component';

@Component({
  template: '',
@ -22,29 +19,19 @@ export class CardComponent extends SubscriberBase {

  icon$: Observable<string>;

-  constructor(
-    protected elementRef: ElementRef,
-    protected dialog: MatDialog,
-    protected appService: AppService,
-    protected clipboard: Clipboard
-  ) {
+  constructor(protected elementRef: ElementRef, protected dialog: MatDialog, protected appService: AppService) {
    super();
  }

-  protected copyToClip(text: string) {
-    this.clipboard.copy(text);
-    const pending = this.clipboard.beginCopy(text);
-    let remainingAttempts = 3;
-    const attempt = () => {
-      const result = pending.copy();
-      if (!result && --remainingAttempts) {
-        setTimeout(attempt, 10);
-      } else {
-        // Remember to destroy when you're done!
-        pending.destroy();
-      }
-    };
-    attempt();
+  protected copyToClip(text: string, html: string) {
+    function listener(e: ClipboardEvent) {
+      e.clipboardData.setData('text/html', html);
+      e.clipboardData.setData('text/plain', text);
+      e.preventDefault();
+    }
+    document.addEventListener('copy', listener);
+    document.execCommand('copy');
+    document.removeEventListener('copy', listener);
  }

  close(ev) {
@ -84,12 +71,4 @@ export class CardComponent extends SubscriberBase {
  moveCardUp() {
    this.appService.moveCard(this.cardItem, MoveDirection.Up);
  }
-
-  editReferenceModal() {
-    this.dialog.open(CardEditModalComponent, {
-      data: {
-        card: { ...this.cardItem } as CardItem,
-      },
-    });
-  }
 }
--- a/src/src/app/components/help-modal/help-modal.component.ts
+++ b/src/src/app/components/help-modal/help-modal.component.ts
@ -1,5 +1,4 @@
 import { Component } from '@angular/core';
-
 import { NavService } from '../../services/nav.service';

@Component({
--- a/src/src/app/components/note/edit-modal/note-edit-modal.component.html
+++ b/src/src/app/components/note/edit-modal/note-edit-modal.component.html
@ -1,9 +1,10 @@
-<mat-toolbar>
-  <mat-icon>edit</mat-icon>
-  <div class="title">Edit: {{ data.title }}</div>
-</mat-toolbar>
+<div mat-dialog-title>
+  <mat-toolbar>
+    <mat-icon>edit</mat-icon>
+    <div class="title">Edit: {{ data.title }}</div>
+  </mat-toolbar>
+</div>
 <mat-dialog-content>
-  <br />
  <form [formGroup]="noteForm">
    <mat-form-field class="note-title">
      <mat-label>Title</mat-label>
@ -14,6 +15,7 @@
      <mat-chip-grid #chipList aria-label="Cross References">
        <mat-chip-row
          *ngFor="let ref of references"
+          [selectable]="selectable"
          [removable]="removable"
          (removed)="remove(ref)"
        >
--- a/src/src/app/components/note/edit-modal/note-edit-modal.component.ts
+++ b/src/src/app/components/note/edit-modal/note-edit-modal.component.ts
@ -1,12 +1,15 @@
-import { COMMA, ENTER, SEMICOLON } from '@angular/cdk/keycodes';
 import { Component, Inject } from '@angular/core';
-import { UntypedFormBuilder,UntypedFormGroup } from '@angular/forms';
-import { MatChipInputEvent } from '@angular/material/chips';
+import { UntypedFormGroup, UntypedFormBuilder } from '@angular/forms';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+
+import { COMMA, ENTER, SEMICOLON } from '@angular/cdk/keycodes';
+import { MatChipInputEvent } from '@angular/material/chips';
+
 import { UUID } from 'angular2-uuid';
-import { CardItem } from 'src/app/models/card-state';
+
 import { NoteItem } from 'src/app/models/note-state';
 import { AppService } from 'src/app/services/app.service';
+import { CardItem } from 'src/app/models/card-state';

@Component({
  selector: 'app-note-edit-modal',
@ -20,6 +23,7 @@ export class NoteEditModalComponent {

  //#region Cross References
  visible = true;
+  selectable = true;
  removable = true;
  addOnBlur = true;
  readonly separatorKeysCodes: number[] = [ENTER, COMMA, SEMICOLON];
@ -50,11 +54,16 @@ export class NoteEditModalComponent {
  //#region cross refs

  add(event: MatChipInputEvent): void {
+    const input = event.input;
    const value = event.value;

    if ((value || '').trim()) {
      this.references.push(value.trim());
    }
+
+    if (input) {
+      input.value = '';
+    }
  }

  remove(reference: string): void {
--- a/src/src/app/components/note/note-card.component.ts
+++ b/src/src/app/components/note/note-card.component.ts
@ -1,13 +1,11 @@
-import { Clipboard } from '@angular/cdk/clipboard';
-import { Component, ElementRef, Input,ViewChild } from '@angular/core';
+import { Component, ViewChild, ElementRef, Input, OnInit } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
-import { BibleReference } from 'src/app/common/bible-reference';
-import { NoteItem } from 'src/app/models/note-state';
-import { AppService } from 'src/app/services/app.service';
-
-import { CardComponent } from '../card.component';
-import { OkCancelModalComponent, OkCancelResult } from '../ok-cancel-modal/ok-cancel-modal.component';
 import { NoteEditModalComponent } from './edit-modal/note-edit-modal.component';
+import { CardComponent } from '../../components/card.component';
+import { AppService } from '../../services/app.service';
+import { BibleReference } from '../../common/bible-reference';
+import { NoteItem } from '../../models/note-state';
+import { OkCancelModalComponent, OkCancelResult } from '../ok-cancel-modal/ok-cancel-modal.component';

@Component({
  selector: 'app-note-card',
@ -24,20 +22,16 @@ export class NoteCardComponent extends CardComponent {
    return this.cardItem.data as NoteItem;
  }

-  constructor(
-    protected elementRef: ElementRef,
-    protected appService: AppService,
-    protected clipboard: Clipboard,
-    public dialog: MatDialog
-  ) {
-    super(elementRef, dialog, appService, clipboard);
+  constructor(protected elementRef: ElementRef, protected appService: AppService, public dialog: MatDialog) {
+    super(elementRef, dialog, appService);

    this.icon$ = appService.select((state) => state.settings.value.cardIcons.note);
  }

  copy() {
+    const html = this.noteElement.nativeElement.innerHTML;
    const text = this.noteElement.nativeElement.innerText;
-    this.copyToClip(text);
+    this.copyToClip(text, html);
  }

  private xrefs: BibleReference[];
--- a/src/src/app/components/page-edit-modal/page-edit-modal.component.html
+++ b/src/src/app/components/page-edit-modal/page-edit-modal.component.html
@ -1,7 +1,9 @@
-<mat-toolbar>
-  <mat-icon>save</mat-icon>
-  <div class="title">{{ dialogTitle }}</div>
-</mat-toolbar>
+<div mat-dialog-title>
+  <mat-toolbar>
+    <mat-icon>save</mat-icon>
+    <div class="title">{{ dialogTitle }}</div>
+  </mat-toolbar>
+</div>
 <mat-dialog-content class="content">
  <form [formGroup]="form">
    <mat-form-field class="page-title">
--- a/src/src/app/components/page-edit-modal/page-edit-modal.component.ts
+++ b/src/src/app/components/page-edit-modal/page-edit-modal.component.ts
@ -1,8 +1,8 @@
 import { Component, Inject } from '@angular/core';
-import { UntypedFormBuilder,UntypedFormGroup } from '@angular/forms';
-import { MAT_DIALOG_DATA,MatDialogRef } from '@angular/material/dialog';
+import { UntypedFormGroup, UntypedFormBuilder } from '@angular/forms';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { AppService } from '../../services/app.service';
 import { SavedPage } from 'src/app/models/page-state';
-import { AppService } from 'src/app/services/app.service';

@Component({
  selector: 'app-page-edit-modal',
@ -14,21 +14,21 @@ export class PageEditModalComponent {
  dialogTitle = 'Save Page using Current Cards';

  constructor(
-    @Inject(MAT_DIALOG_DATA) public data: PageEditModalData,
+    @Inject(MAT_DIALOG_DATA) public title: PageEditModalData,
    public dialogRef: MatDialogRef<PageEditModalComponent>,
    private appService: AppService,
    private fb: UntypedFormBuilder
  ) {
-    if (data) {
+    if (title) {
      this.dialogTitle = 'Edit Page Name';
    } else {
-      data = {
+      title = {
        title: '',
        savedPage: null,
      };
    }

-    this.form = this.fb.group(data);
+    this.form = this.fb.group(title);
  }

  cancel() {
@ -38,7 +38,7 @@ export class PageEditModalComponent {
  save() {
    if (this.dialogTitle === 'Edit Page Name') {
      this.appService.updateSavedPage({
-        ...this.data.savedPage,
+        ...this.title.savedPage,
        title: this.form.get('title').value,
      });
    } else {
--- a/src/src/app/components/passage/passage-card.component.html
+++ b/src/src/app/components/passage/passage-card.component.html
@ -40,10 +40,10 @@
            <ng-container *ngFor="let w of vs.w">
              <a
                [title]="getDict(this.cardItem) + w.s"
-                *ngIf="w.s !== null && w.s !== undefined"
+                *ngIf="w.s !== null"
                (click)="openStrongs(w.s, display.showStrongsAsModal)"
                >{{ w.t }}</a
-              ><ng-container *ngIf="w.s === null || w.s === undefined">{{
+              ><ng-container *ngIf="w.s === null">{{
                w.t
              }}</ng-container> </ng-container
            ><br *ngIf="display.showVersesOnNewLine" />
@ -102,10 +102,6 @@
      <mat-icon>more_vert</mat-icon>
    </button>
    <mat-menu #moreMenu="matMenu">
-      <button mat-menu-item (click)="editReferenceModal()">
-        <mat-icon>edit</mat-icon>
-        <span>Edit Reference</span>
-      </button>
      <button mat-menu-item (click)="copy()">
        <mat-icon>content_copy</mat-icon>
        <span>Copy Passage</span>
--- a/src/src/app/components/passage/passage-card.component.ts
+++ b/src/src/app/components/passage/passage-card.component.ts
@ -1,15 +1,13 @@
-import { Clipboard } from '@angular/cdk/clipboard';
-import { ChangeDetectionStrategy,Component, ElementRef, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit, ElementRef, ViewChild, ChangeDetectionStrategy } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
-import { BibleReference, Overlap } from 'src/app/common/bible-reference';
-import { isNullOrUndefined } from 'src/app/common/helpers';
-import { CardComponent } from 'src/app/components/card.component';
-import { CardItem } from 'src/app/models/card-state';
-import { NoteItem } from 'src/app/models/note-state';
-import { BiblePassageResult,Paragraph } from 'src/app/models/passage-state';
-import { AppService } from 'src/app/services/app.service';
-
 import { StrongsModalComponent } from '../strongs/modal/strongs-modal.component';
+import { NoteItem } from 'src/app/models/note-state';
+import { CardComponent } from 'src/app/components/card.component';
+import { BibleReference, Overlap } from 'src/app/common/bible-reference';
+import { AppService } from 'src/app/services/app.service';
+import { Paragraph, BiblePassageResult } from 'src/app/models/passage-state';
+import { CardItem } from 'src/app/models/card-state';
+import { isNullOrUndefined } from 'src/app/common/helpers';

@Component({
  selector: 'app-passage-card',
@ -42,13 +40,8 @@ export class PassageCardComponent extends CardComponent implements OnInit {
    return this.cardItem.data as BiblePassageResult;
  }

-  constructor(
-    protected elementRef: ElementRef,
-    protected appService: AppService,
-    protected clipboard: Clipboard,
-    public dialog: MatDialog
-  ) {
-    super(elementRef, dialog, appService, clipboard);
+  constructor(protected elementRef: ElementRef, protected appService: AppService, public dialog: MatDialog) {
+    super(elementRef, dialog, appService);
    this.icon$ = appService.select((state) => state.settings.value.cardIcons.passage);
  }

@ -61,8 +54,9 @@ export class PassageCardComponent extends CardComponent implements OnInit {
  }

  copy() {
-    const text = this.passageElement.nativeElement.innerText + ` \n - ${this.ref.toString()}`;
-    this.copyToClip(text);
+    const html = this.passageElement.nativeElement.innerHTML + ` - ${this.ref.toString()}`;
+    const text = this.passageElement.nativeElement.innerText + ` - ${this.ref.toString()}`;
+    this.copyToClip(text, html);
  }

  next() {
@ -150,20 +144,16 @@ export class PassageCardComponent extends CardComponent implements OnInit {
  async openStrongs(q: string, asModal = false) {
    const dict = (this.cardItem.data as BiblePassageResult).dict;
    const numbers = q.split(' ');
-
-    if (asModal) {
-      const cards: CardItem[] = [];
-      for (const sn of numbers) {
+    for (const sn of numbers) {
+      if (asModal) {
        const card = await this.appService.getStrongsCard(sn, dict);
-        cards.push(card);
+        this.dialog.open(StrongsModalComponent, {
+          data: card,
+          autoFocus: 'content',
+        });
+      } else {
+        this.appService.getStrongs(sn, dict, this.cardItem);
      }
-
-      this.dialog.open(StrongsModalComponent, {
-        data: cards,
-        autoFocus: 'content',
-      });
-    } else {
-      this.appService.getStrongs(numbers, dict, this.cardItem);
    }
  }

--- a/src/src/app/components/saved-page-card/saved-page-card.component.ts
+++ b/src/src/app/components/saved-page-card/saved-page-card.component.ts
@ -1,18 +1,17 @@
+import { Component, Input, OnInit } from '@angular/core';
 import { CdkDragDrop } from '@angular/cdk/drag-drop';
-import { Component, Input } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
-import { MatSnackBar } from '@angular/material/snack-bar';
+import { AppService } from '../../services/app.service';
 import { Observable } from 'rxjs';
-import { getFromCardCache } from 'src/app/common/card-cache-operations';
+import { SavedPage } from 'src/app/models/page-state';
+import { CardIcons, CardItem, CardType, DataReference } from 'src/app/models/card-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 { CardIcons, CardItem, CardType, DataReference } from 'src/app/models/card-state';
+import { getFromCardCache } from 'src/app/common/card-cache-operations';
 import { NoteItem } from 'src/app/models/note-state';
-import { SavedPage } from 'src/app/models/page-state';
-import { AppService } from 'src/app/services/app.service';
-
-import { OkCancelModalComponent, OkCancelResult } from '../ok-cancel-modal/ok-cancel-modal.component';
-import { PageEditModalComponent } from '../page-edit-modal/page-edit-modal.component';

@Component({
  selector: 'app-saved-page-card',
@ -83,12 +82,12 @@ export class SavedPageCardComponent extends SubscriberBase {
    return '';
  }

-  onRemoveCard(reference: DataReference) {
+  onRemoveCard(card: CardItem) {
    this.dialog
      .open(OkCancelModalComponent, {
        data: {
          title: 'Delete Card from Saved Page',
-          content: `Do you want to delete this card '${this.format(reference)}' from the saved page '${
+          content: `Do you want to delete this card '${this.format(card)}' from the saved page '${
            this.savedPage.title
          }?`,
        },
@ -98,7 +97,7 @@ export class SavedPageCardComponent extends SubscriberBase {
        if (ds.ok) {
          this.appService.updateSavedPage({
            ...this.savedPage,
-            queries: this.savedPage.queries.filter((o) => o !== reference),
+            queries: this.savedPage.queries.filter((o) => o !== card),
          });
          this.snackBar.open(`${this.savedPage.title} has been updated!`, '', {
            duration: 3 * 1000,
--- a/src/src/app/components/settings/settings.component.html
+++ b/src/src/app/components/settings/settings.component.html
@ -18,10 +18,6 @@
    <mat-icon matListIcon color="accenovert">note_add</mat-icon>
    Create a New Note
  </a>
-  <a mat-list-item (click)="clearCurrentCard()">
-    <mat-icon matListIcon color="accenovert">clear_all</mat-icon>
-    Clear Cards
-  </a>
 </mat-nav-list>

 <mat-toolbar>Search Settings</mat-toolbar>
@ -122,7 +118,13 @@
      ><input
        matSliderThumb
        [(ngModel)]="cardFontSize"
-        (valueChange)="cardFontSizeChanged($event)"
+        (change)="
+          cardFontSizeChanged({
+            source: ngSliderThumb,
+            parent: ngSlider,
+            value: ngSliderThumb.value
+          })
+        "
        #ngSliderThumb="matSliderThumb"
      />
    </mat-slider>
--- a/src/src/app/components/settings/settings.component.scss
+++ b/src/src/app/components/settings/settings.component.scss
@ -11,7 +11,3 @@
 .auth-button {
  width: 100%;
 }
-
-.mdc-slider__input {
-  padding: 0px !important;
-}
--- a/src/src/app/components/settings/settings.component.ts
+++ b/src/src/app/components/settings/settings.component.ts
@ -1,23 +1,27 @@
 import { Component } from '@angular/core';
-import { AngularFireAuth } from '@angular/fire/compat/auth';
-import { MatDialog } from '@angular/material/dialog';
-import { MatSelectChange } from '@angular/material/select';
 import { MatSlideToggleChange } from '@angular/material/slide-toggle';
+import { MatSelectChange } from '@angular/material/select';
+import { MatSliderChange } from '@angular/material/slider';
 import { MatSnackBar } from '@angular/material/snack-bar';
+import { MatDialog } from '@angular/material/dialog';
+
+import { AngularFireAuth } from '@angular/fire/compat/auth';
+import firebase from '@firebase/app-compat';
 import { Capacitor } from '@capacitor/core';
 import { GoogleAuth } from '@codetrix-studio/capacitor-google-auth'
-import firebase from '@firebase/app-compat';
-import { Overlap } from 'src/app/common/bible-reference';
-import { NoteEditModalComponent } from 'src/app/components/note/edit-modal/note-edit-modal.component';
-import { PageEditModalComponent } from 'src/app/components/page-edit-modal/page-edit-modal.component';
-import { CardFonts } from 'src/app/constants';
-import { DisplaySettings } from 'src/app/models/app-state';
-import { SavedPage } from 'src/app/models/page-state';
-import { AppService } from 'src/app/services/app.service';
-import { NavService } from 'src/app/services/nav.service';

 import { SubscriberBase } from '../../common/subscriber-base';
+import { DisplaySettings } from 'src/app/models/app-state';
+import { CardFonts } from 'src/app/constants';
+
+import { NavService } from 'src/app/services/nav.service';
+import { AppService } from 'src/app/services/app.service';
+
 import { OkCancelModalComponent, OkCancelResult } from '../ok-cancel-modal/ok-cancel-modal.component';
+import { PageEditModalComponent } from 'src/app/components/page-edit-modal/page-edit-modal.component';
+import { NoteEditModalComponent } from 'src/app/components/note/edit-modal/note-edit-modal.component';
+import { SavedPage } from 'src/app/models/page-state';
+import { Overlap } from 'src/app/common/bible-reference';

@Component({
  selector: 'app-settings',
@ -79,7 +83,7 @@ export class SettingsComponent extends SubscriberBase {
      const credential = firebase.auth.GoogleAuthProvider.credential(googleUser.authentication.idToken);
      (await this.authService.app).auth().signInWithCredential(credential);
    } else {
-      this.authService.signInWithPopup(new firebase.auth.GoogleAuthProvider()).then(() => {
+      this.authService.signInWithPopup(new firebase.auth.GoogleAuthProvider()).then((cred) => {
        console.log('Authenticated.');
      });
    }
@ -130,11 +134,6 @@ export class SettingsComponent extends SubscriberBase {
    });
  }

-  clearCurrentCard(){
-    this.appService.clearCards();
-    this.navService.closeSettings();
-  }
-
  //#endregion

  //#region Saved Page Settings
@ -151,8 +150,8 @@ export class SettingsComponent extends SubscriberBase {
    this.appService.changeCardFontFamily(evt.value);
  }

-  cardFontSizeChanged(evt: number) {
-    this.appService.changeCardFontSize(evt);
+  cardFontSizeChanged(evt: MatSliderChange) {
+    this.appService.changeCardFontSize(evt.value);
  }

  //#endregion
--- a/src/src/app/components/strongs/card/strongs-card.component.html
+++ b/src/src/app/components/strongs/card/strongs-card.component.html
@ -14,7 +14,7 @@
 </div>
 <div class="card-content" *ngIf="cardItem" #strongs>
  <app-strongs
-    [data]="strongsResult"
+    [data]="cardItem.data"
    [isCard]="true"
    (openPassage)="openPassage($event)"
    (openStrongs)="openStrongs($event)"
--- a/src/src/app/components/strongs/card/strongs-card.component.ts
+++ b/src/src/app/components/strongs/card/strongs-card.component.ts
@ -1,12 +1,9 @@
-import { Clipboard } from '@angular/cdk/clipboard';
-import { ChangeDetectionStrategy, Component, ElementRef, Input,ViewChild } from '@angular/core';
+import { Component, ElementRef, ViewChild, OnInit, ChangeDetectionStrategy } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
-import { BibleReference } from 'src/app/common/bible-reference';
-import { CardComponent } from 'src/app/components/card.component';
-import { StrongsResult } from 'src/app/models/strongs-state';
-import { AppService } from 'src/app/services/app.service';
-
 import { StrongsModalComponent } from '../modal/strongs-modal.component';
+import { CardComponent } from 'src/app/components/card.component';
+import { AppService } from 'src/app/services/app.service';
+import { BibleReference } from 'src/app/common/bible-reference';

@Component({
  selector: 'app-strongs-card',
@ -19,20 +16,8 @@ export class StrongsCardComponent extends CardComponent {
  asModal = false;
  @ViewChild('strongs') strongsElement: ElementRef;

-  @Input()
-  data: StrongsResult;
-
-  get strongsResult() {
-    return this.cardItem.data as StrongsResult;
-  }
-
-  constructor(
-    protected elementRef: ElementRef,
-    protected appService: AppService,
-    protected clipboard: Clipboard,
-    protected dialog: MatDialog
-  ) {
-    super(elementRef, dialog, appService, clipboard);
+  constructor(protected elementRef: ElementRef, protected appService: AppService, protected dialog: MatDialog) {
+    super(elementRef, dialog, appService);
    this.icon$ = appService.select((state) => state.settings.value.cardIcons.strongs);
    this.addSubscription(
      this.appService.state$.subscribe((state) => {
@ -42,8 +27,9 @@ export class StrongsCardComponent extends CardComponent {
  }

  copy() {
+    const html = this.strongsElement.nativeElement.innerHTML;
    const text = this.strongsElement.nativeElement.innerText;
-    this.copyToClip(text);
+    this.copyToClip(text, html);
  }

  async openStrongs(q: string) {
@ -52,11 +38,11 @@ export class StrongsCardComponent extends CardComponent {
    if (this.asModal) {
      const card = await this.appService.getStrongsCard(sn, dict);
      this.dialog.open(StrongsModalComponent, {
-        data: [card],
+        data: card,
        autoFocus: 'content',
      });
    } else {
-      this.appService.getStrongs([sn], dict, this.cardItem);
+      this.appService.getStrongs(sn, dict, this.cardItem);
    }
  }

--- a/src/src/app/components/strongs/modal/strongs-modal.component.html
+++ b/src/src/app/components/strongs/modal/strongs-modal.component.html
@ -1,36 +1,22 @@
-<mat-toolbar>
-  <mat-icon aria-hidden="false" aria-label="Strongs Entry Icon">{{
-    icon$ | async
-  }}</mat-icon>
-  <div class="title">{{ this.title }}</div>
-  <span class="close-button">
-    <button
-      mat-icon-button
-      mat-dialog-close
-      aria-label="Exit the Strongs Modal"
-    >
-      <mat-icon>cancel</mat-icon>
-    </button>
-  </span>
-</mat-toolbar>
-<mat-dialog-content class="content">
-  <ng-container *ngIf="(results$ | async).length > 1; let strongs">
-    <mat-tab-group [(selectedIndex)]="selectedIndex">
-      <mat-tab *ngFor="let card of results$ | async; index as idx">
-        <ng-template mat-tab-label>{{ card.prefix }}{{ card.sn }}</ng-template>
-        <app-strongs
-          [data]="card"
-          (openPassage)="openPassage($event)"
-          (openStrongs)="openStrongs($event)"
-        ></app-strongs>
-      </mat-tab>
-    </mat-tab-group>
-  </ng-container>
-  <ng-container *ngIf="(results$ | async).length === 1">
-    <app-strongs
-      [data]="(results$ | async)[0]"
-      (openPassage)="openPassage($event)"
-      (openStrongs)="openStrongs($event)"
-    ></app-strongs>
-  </ng-container>
+  <mat-toolbar>
+    <mat-icon aria-hidden="false" aria-label="Strongs Entry Icon">{{
+      icon$ | async
+    }}</mat-icon>
+    <div class="title">{{ cardItem.qry }}</div>
+    <span class="close-button">
+      <button
+        mat-icon-button
+        mat-dialog-close
+        aria-label="Exit the Strongs Modal"
+      >
+        <mat-icon>cancel</mat-icon>
+      </button>
+    </span>
+  </mat-toolbar>
+<mat-dialog-content  class="content">
+  <br />
+  <app-strongs
+    [data]="cardItem.data"
+    (openPassage)="openPassage($event)"
+  ></app-strongs>
 </mat-dialog-content>
--- a/src/src/app/components/strongs/modal/strongs-modal.component.ts
+++ b/src/src/app/components/strongs/modal/strongs-modal.component.ts
@ -1,11 +1,9 @@
-import { ChangeDetectionStrategy, Component, Inject } from '@angular/core';
-import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog';
-import { BehaviorSubject, Observable } from 'rxjs';
-import { BibleReference } from 'src/app/common/bible-reference';
-import { SubscriberBase } from 'src/app/common/subscriber-base';
-import { CardItem } from 'src/app/models/card-state';
-import { StrongsResult } from 'src/app/models/strongs-state';
+import { Component, Inject, ChangeDetectionStrategy } from '@angular/core';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { Observable } from 'rxjs';
 import { AppService } from 'src/app/services/app.service';
+import { BibleReference } from 'src/app/common/bible-reference';
+import { CardItem } from 'src/app/models/card-state';

@Component({
  selector: 'app-strongs-modal',
@ -14,58 +12,25 @@ import { AppService } from 'src/app/services/app.service';
  preserveWhitespaces: true,
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class StrongsModalComponent extends SubscriberBase {
+export class StrongsModalComponent {
  icon$: Observable<string>;
-  results$: BehaviorSubject<StrongsResult[]> = new BehaviorSubject([]);
-  selectedIndex = 0;
-  title: string;
-  asModal = false;

  constructor(
-    @Inject(MAT_DIALOG_DATA) public cardItems: CardItem[],
+    @Inject(MAT_DIALOG_DATA) public cardItem: CardItem,
    public dialogRef: MatDialogRef<StrongsModalComponent>,
-    private appService: AppService,
-    protected dialog: MatDialog
+    private appService: AppService
  ) {
-    super();
-    this.title = cardItems.map((o) => o.qry).reduce((p, c) => `${p}, ${c}`);
-    this.results$.next(cardItems.map((o) => o.data as StrongsResult));
-    this.icon$ = appService.select((state) => state.settings.value.cardIcons.strongs);
+    console.log(cardItem);

-    this.addSubscription(
-      this.appService
-        .select((state) => state.settings.value.displaySettings.showStrongsAsModal)
-        .subscribe((asModal) => {
-          this.asModal = asModal;
-        })
-    );
+    this.icon$ = appService.select((state) => state.settings.value.cardIcons.strongs);
  }

  cancel() {
    this.dialogRef.close();
  }

-  async openStrongs(q: string) {
-    const dict = q.substring(0, 1) === 'H' ? 'heb' : 'grk';
-    const sn = q.substring(1);
-    if (this.asModal) {
-      const currIdx = this.results$.value.findIndex((o) => o.sn.toString() === sn);
-      if (currIdx > -1) {
-        this.selectedIndex = currIdx;
-        return;
-      }
-      const card = await this.appService.getStrongsCard(sn, dict);
-      const strongs = card.data as StrongsResult;
-      const ordered = [...this.results$.value.filter((o) => `${o.prefix}${o.sn}` !== q), strongs];
-      this.results$.next(ordered);
-      this.selectedIndex = ordered.length - 1;
-    } else {
-      this.appService.getStrongs([sn], dict, this.cardItems[0]);
-    }
-  }
-
  openPassage(p: string) {
    const ref = BibleReference.makePassageFromReferenceKey(p);
-    this.appService.getPassage(ref, this.cardItems[0]);
+    this.appService.getPassage(ref, this.cardItem);
  }
 }
--- a/src/src/app/components/strongs/strongs.component.ts
+++ b/src/src/app/components/strongs/strongs.component.ts
@ -1,6 +1,5 @@
-import { Component, EventEmitter,Input, Output } from '@angular/core';
+import { Component, Input, Output, EventEmitter } from '@angular/core';
 import { BibleReference } from 'src/app/common/bible-reference';
-
 import { StrongsResult } from '../../models/strongs-state';

@Component({
--- a/src/src/app/components/verse-picker-modal/verse-picker-modal.component.html
+++ b/src/src/app/components/verse-picker-modal/verse-picker-modal.component.html
@ -1,12 +1,18 @@
-<mat-toolbar>
-  <mat-icon>bookmarks</mat-icon>
-  <div class="title">Verse Picker</div>
-  <span class="close-button">
-    <button mat-icon-button mat-dialog-close aria-label="Exit the verse picker">
-      <mat-icon>cancel</mat-icon>
-    </button>
-  </span>
-</mat-toolbar>
+<div mat-dialog-title>
+  <mat-toolbar>
+    <mat-icon>bookmarks</mat-icon>
+    <div class="title">Verse Picker</div>
+    <span class="close-button">
+      <button
+        mat-icon-button
+        mat-dialog-close
+        aria-label="Exit the verse picker"
+      >
+        <mat-icon>cancel</mat-icon>
+      </button>
+    </span>
+  </mat-toolbar>
+</div>
 <mat-dialog-content class="content">
  <div>
    <span *ngIf="hasBook === false">
--- a/src/src/app/components/verse-picker-modal/verse-picker-modal.component.ts
+++ b/src/src/app/components/verse-picker-modal/verse-picker-modal.component.ts
@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
-import { MatDialogRef } from '@angular/material/dialog';
-import { BibleReference,Book } from 'src/app/common/bible-reference';
 import { AppService } from 'src/app/services/app.service';
+import { MatDialogRef } from '@angular/material/dialog';
+import { Book, BibleReference } from 'src/app/common/bible-reference';

@Component({
  selector: 'app-verse-picker',
--- a/src/src/app/components/words/words-card.component.ts
+++ b/src/src/app/components/words/words-card.component.ts
@ -1,10 +1,9 @@
-import { Clipboard } from '@angular/cdk/clipboard';
-import { ChangeDetectionStrategy,Component, ElementRef, ViewChild } from '@angular/core';
+import { Component, ElementRef, ViewChild, ChangeDetectionStrategy } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { BibleReference } from 'src/app/common/bible-reference';
 import { CardComponent } from 'src/app/components/card.component';
-import { WordLookupResult } from 'src/app/models/words-state';
 import { AppService } from 'src/app/services/app.service';
+import { WordLookupResult } from 'src/app/models/words-state';

@Component({
  selector: 'app-words-card',
@ -20,13 +19,8 @@ export class WordsCardComponent extends CardComponent {
    return this.cardItem.data as WordLookupResult;
  }

-  constructor(
-    protected elementRef: ElementRef,
-    protected appService: AppService,
-    protected clipboard: Clipboard,
-    public dialog: MatDialog
-  ) {
-    super(elementRef, dialog, appService, clipboard);
+  constructor(protected elementRef: ElementRef, protected appService: AppService, public dialog: MatDialog) {
+    super(elementRef, dialog, appService);
    this.icon$ = appService.select((state) => state.settings.value.cardIcons.words);
  }

@ -35,8 +29,9 @@ export class WordsCardComponent extends CardComponent {
      BibleReference.makePassageFromReferenceKey(ref)
    );

+    const html = refs.map((ref) => `<a href='http://dynamicbible.com/search/${ref}'>${ref}</a>`).join(', ');
    const text = refs.join(', ');
-    this.copyToClip(text);
+    this.copyToClip(text, html);
  }

  makePassage(p: string) {
--- a/src/src/app/models/app-state.ts
+++ b/src/src/app/models/app-state.ts
@ -1,9 +1,9 @@
-import { Overlap } from '../common/bible-reference';
-import { HashTable } from '../common/hashtable';
 import { IStorable } from '../common/storable';
-import { CardIcons, CardItem, DataReference } from './card-state';
 import { NoteItem } from './note-state';
+import { Overlap } from '../common/bible-reference';
+import { CardItem, CardIcons, DataReference } from './card-state';
 import { SavedPage } from './page-state';
+import { HashTable } from '../common/hashtable';

 export interface AppState {
  readonly currentSavedPage: SavedPage;
--- a/src/src/app/models/card-state.ts
+++ b/src/src/app/models/card-state.ts
@ -1,7 +1,7 @@
-import { NoteItem } from './note-state';
 import { BiblePassageResult } from './passage-state';
 import { StrongsResult } from './strongs-state';
 import { WordLookupResult } from './words-state';
+import { NoteItem } from './note-state';

 export type CardData = BiblePassageResult | StrongsResult | WordLookupResult | NoteItem;

--- a/src/src/app/models/strongs-state.ts
+++ b/src/src/app/models/strongs-state.ts
@ -1,6 +1,7 @@
 export type StrongsDictionary = 'heb' | 'grk';

 export interface StrongsResult {
+  readonly dict: StrongsDictionary;
  readonly prefix: string;
  readonly sn: number;
  readonly def: StrongsDefinition;
--- a/src/src/app/pages/notes-admin/notes-admin.page.ts
+++ b/src/src/app/pages/notes-admin/notes-admin.page.ts
@ -1,10 +1,10 @@
 import { Component, OnInit } from '@angular/core';
-import { MatDialog } from '@angular/material/dialog';
-import { SubscriberBase } from 'src/app/common/subscriber-base';
-import { NoteEditModalComponent } from 'src/app/components/note/edit-modal/note-edit-modal.component';
+import { AppService } from '../../services/app.service';
+import { NavService } from '../../services/nav.service';
+import { SubscriberBase } from '../../common/subscriber-base';
 import { CardItem, CardType } from 'src/app/models/card-state';
-import { AppService } from 'src/app/services/app.service';
-import { NavService } from 'src/app/services/nav.service';
+import { NoteEditModalComponent } from 'src/app/components/note/edit-modal/note-edit-modal.component';
+import { MatDialog } from '@angular/material/dialog';

@Component({
  selector: 'app-notes-admin',
--- a/src/src/app/pages/saved-pages-admin/saved-pages-admin.page.ts
+++ b/src/src/app/pages/saved-pages-admin/saved-pages-admin.page.ts
@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core';
-import { SubscriberBase } from 'src/app/common/subscriber-base';
-import { AppService } from 'src/app/services/app.service';
-import { NavService } from 'src/app/services/nav.service';
+import { AppService } from '../../services/app.service';
+import { NavService } from '../../services/nav.service';
+import { SubscriberBase } from '../../common/subscriber-base';

@Component({
  selector: 'app-saved-pages-admin',
--- a/src/src/app/pages/search/search.page.html
+++ b/src/src/app/pages/search/search.page.html
@ -16,7 +16,7 @@
      #autoCompleteInput
      [formControl]="searchControl"
      [matAutocomplete]="auto"
-      (keyup.enter)="searchWithTarget($event.target)"
+      (keyup.enter)="search($event.target.value)"
    />
    <mat-autocomplete #auto="matAutocomplete">
      <mat-option *ngFor="let option of suggestions$ | async" [value]="option">
--- a/src/src/app/pages/search/search.page.ts
+++ b/src/src/app/pages/search/search.page.ts
@ -1,15 +1,14 @@
-import { ChangeDetectionStrategy, Component, ElementRef,OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit, ViewChild, ChangeDetectionStrategy, ElementRef } from '@angular/core';
+import { ActivatedRoute, Router, NavigationEnd } from '@angular/router';
 import { UntypedFormControl } from '@angular/forms';
-import { MatAutocomplete,MatAutocompleteTrigger } from '@angular/material/autocomplete';
 import { MatDialog } from '@angular/material/dialog';
-import { ActivatedRoute, NavigationEnd,Router } from '@angular/router';
-import { getFromCardCache } from 'src/app/common/card-cache-operations';
-import { CardItem, CardType } from 'src/app/models/card-state';
-import { AppService } from 'src/app/services/app.service';
-
+import { MatAutocompleteTrigger, MatAutocomplete } from '@angular/material/autocomplete';
+import { AppService } from '../../services/app.service';
+import { NavService } from '../../services/nav.service';
 import { SubscriberBase } from '../../common/subscriber-base';
 import { VersePickerModalComponent } from '../../components/verse-picker-modal/verse-picker-modal.component';
-import { NavService } from '../../services/nav.service';
+import { CardItem, CardType } from 'src/app/models/card-state';
+import { getFromCardCache } from 'src/app/common/card-cache-operations';

@Component({
  selector: 'app-search-page',
@ -110,10 +109,6 @@ export class SearchPageComponent extends SubscriberBase implements OnInit {
    this.appService.removeCard(card);
  }

-  async searchWithTarget(target: EventTarget) {
-    const term = (target as HTMLInputElement).value;
-    await this.search(term);
-  }
  async search(search: string) {
    // clear search box.
    if (this.clearSearchAfterQuery) {
--- a/src/src/app/services/app-state-actions.ts
+++ b/src/src/app/services/app-state-actions.ts
@ -0,0 +1,288 @@
+import { Error, User, Settings } from '../models/app-state';
+import { IStorable } from '../common/storable';
+import { NoteItem } from '../models/note-state';
+import { MoveDirection } from '../common/move-direction';
+import { SavedPage } from '../models/page-state';
+import { CardItem } from '../models/card-state';
+import { Overlap } from '../common/bible-reference';
+
+export class AppActionFactory {
+  static newSavePage(title: string): AppAction {
+    return {
+      type: 'SAVE_PAGE',
+      title,
+    } as AppAction;
+  }
+
+  static newUpdateCurrentPage(): AppAction {
+    return {
+      type: 'UPDATE_CURRENT_PAGE',
+    } as AppAction;
+  }
+
+  static newUpdateSavedPages(savedPages: IStorable<readonly SavedPage[]>): AppAction {
+    return {
+      type: 'UPDATE_SAVED_PAGES',
+      savedPages,
+    } as AppAction;
+  }
+
+  static newUpdateSavedPage(savedPage: SavedPage): AppAction {
+    return {
+      type: 'UPDATE_SAVED_PAGE',
+      savedPage,
+    } as AppAction;
+  }
+
+  static newMoveSavedPageCard(savedPage: SavedPage, fromIndex: number, toIndex: number): AppAction {
+    return {
+      type: 'MOVE_SAVED_PAGE_CARD',
+      savedPage,
+      fromIndex,
+      toIndex,
+    } as AppAction;
+  }
+
+  static newRemoveSavedPage(savedPage: SavedPage): AppAction {
+    return {
+      type: 'REMOVE_SAVED_PAGE',
+      savedPage,
+    } as AppAction;
+  }
+
+  static newAddCardToSavedPage(card: CardItem, pageId: string): AppAction {
+    return {
+      type: 'ADD_CARD_TO_SAVED_PAGE',
+      card,
+      pageId,
+    } as AppAction;
+  }
+
+  static newAddCard(card: CardItem, nextToItem: CardItem): AppAction {
+    return {
+      type: 'ADD_CARD',
+      card,
+      nextToItem,
+    } as AppAction;
+  }
+
+  static newUpdateCard(newCard: CardItem, oldCard: CardItem): AppAction {
+    return {
+      type: 'UPDATE_CARD',
+      newCard,
+      oldCard,
+    } as AppAction;
+  }
+
+  static newRemoveCard(card: CardItem): AppAction {
+    return {
+      type: 'REMOVE_CARD',
+      card,
+    } as AppAction;
+  }
+
+  static newMoveCard(card: CardItem, direction: MoveDirection): AppAction {
+    return {
+      type: 'MOVE_CARD',
+      card,
+      direction,
+    } as AppAction;
+  }
+
+  static newUpdateCards(cards: IStorable<CardItem[]>): AppAction {
+    return {
+      type: 'UPDATE_CARDS',
+      cards,
+    } as AppAction;
+  }
+
+  static newUpdateError(error: Error): AppAction {
+    return {
+      type: 'UPDATE_ERROR',
+      error,
+    } as AppAction;
+  }
+
+  static newUpdateCardMergeStrategy(strategy: Overlap): AppAction {
+    return {
+      type: 'UPDATE_CARD_MERGE_STRATEGY',
+      cardMergeStrategy: strategy,
+    };
+  }
+
+  static newUpdateCardFontSize(cardFontSize: number): AppAction {
+    return {
+      type: 'UPDATE_CARD_FONT_SIZE',
+      cardFontSize,
+    } as AppAction;
+  }
+
+  static newUpdateCardFontFamily(cardFontFamily: string): AppAction {
+    return {
+      type: 'UPDATE_CARD_FONT_FAMILY',
+      cardFontFamily,
+    } as AppAction;
+  }
+
+  static newUpdateAutocomplete(words: string[]): AppAction {
+    return {
+      type: 'UPDATE_AUTOCOMPLETE',
+      words,
+    } as AppAction;
+  }
+
+  static newUpdateSettings(settings: IStorable<Settings>): AppAction {
+    return {
+      type: 'UPDATE_SETTINGS',
+      settings,
+    } as AppAction;
+  }
+  static newUser(user: User): AppAction {
+    return {
+      type: 'SET_USER',
+      user,
+    } as AppAction;
+  }
+
+  static newFindNotes(qry: string, nextToItem: CardItem): AppAction {
+    return {
+      type: 'FIND_NOTES',
+      qry,
+      nextToItem,
+    } as AppAction;
+  }
+
+  static newGetNote(noteId: string, nextToItem: CardItem): AppAction {
+    return {
+      type: 'GET_NOTE',
+      noteId,
+      nextToItem,
+    } as AppAction;
+  }
+
+  static newUpdateNotes(notes: IStorable<readonly NoteItem[]>): AppAction {
+    return {
+      type: 'UPDATE_NOTES',
+      notes,
+    } as AppAction;
+  }
+
+  static newSaveNote(note: NoteItem): AppAction {
+    return {
+      type: 'SAVE_NOTE',
+      note,
+    } as AppAction;
+  }
+
+  static newDeleteNote(note: NoteItem): AppAction {
+    return {
+      type: 'DELETE_NOTE',
+      note,
+    } as AppAction;
+  }
+}
+
+export type AppAction =
+  | {
+      type: 'SAVE_PAGE';
+      title: string;
+    }
+  | {
+      type: 'UPDATE_CURRENT_PAGE';
+    }
+  | {
+      type: 'UPDATE_SAVED_PAGES';
+      savedPages: IStorable<readonly SavedPage[]>;
+    }
+  | {
+      type: 'UPDATE_SAVED_PAGE';
+      savedPage: SavedPage;
+    }
+  | {
+      type: 'REMOVE_SAVED_PAGE';
+      savedPage: SavedPage;
+    }
+  | {
+      type: 'MOVE_SAVED_PAGE_CARD';
+      fromIndex: number;
+      toIndex: number;
+      savedPage: SavedPage;
+    }
+  | {
+      type: 'ADD_CARD_TO_SAVED_PAGE';
+      card: CardItem;
+      pageId: string;
+    }
+  | {
+      type: 'ADD_CARD';
+      card: CardItem;
+      nextToItem: CardItem;
+    }
+  | {
+      type: 'UPDATE_CARD';
+      newCard: CardItem;
+      oldCard: CardItem;
+    }
+  | {
+      type: 'REMOVE_CARD';
+      card: CardItem;
+    }
+  | {
+      type: 'MOVE_CARD';
+      card: CardItem;
+      direction: MoveDirection;
+    }
+  | {
+      type: 'UPDATE_CARDS';
+      cards: IStorable<readonly CardItem[]>;
+    }
+  | {
+      type: 'UPDATE_ERROR';
+      error: Error;
+    }
+  | {
+      type: 'UPDATE_CARD_MERGE_STRATEGY';
+      cardMergeStrategy: Overlap;
+    }
+  | {
+      type: 'UPDATE_CARD_FONT_SIZE';
+      cardFontSize: number;
+    }
+  | {
+      type: 'UPDATE_CARD_FONT_FAMILY';
+      cardFontFamily: string;
+    }
+  | {
+      type: 'UPDATE_AUTOCOMPLETE';
+      words: string[];
+    }
+  | {
+      type: 'UPDATE_SETTINGS';
+      settings: IStorable<Settings>;
+    }
+  | {
+      type: 'SET_USER';
+      user: User;
+    }
+  | {
+      type: 'FIND_NOTES';
+      qry: string;
+      nextToItem: CardItem;
+    }
+  | {
+      type: 'GET_NOTE';
+      noteId: string;
+      nextToItem: CardItem;
+    }
+  | {
+      type: 'UPDATE_NOTES';
+      notes: IStorable<readonly NoteItem[]>;
+    }
+  | {
+      type: 'SAVE_NOTE';
+      note: NoteItem;
+    }
+  | {
+      type: 'DELETE_NOTE';
+      note: NoteItem;
+    };
--- a/src/src/app/services/app-state-initial-state.ts
+++ b/src/src/app/services/app-state-initial-state.ts
@ -0,0 +1,52 @@
+import { AppState } from '../models/app-state';
+import { Overlap } from '../common/bible-reference';
+import { StorableType } from '../common/storable';
+
+export const initialState: AppState = {
+  user: null,
+  currentCards: {
+    type: StorableType.initial,
+    createdOn: new Date(0).toISOString(),
+    value: [],
+  },
+  cardCache: {},
+  autocomplete: [],
+  currentSavedPage: null,
+  savedPages: null,
+  notes: {
+    type: StorableType.initial,
+    createdOn: new Date(0).toISOString(),
+    value: [],
+  },
+  savedPagesLoaded: false,
+  error: null,
+  settings: {
+    type: StorableType.initial,
+    createdOn: new Date(0).toISOString(),
+    value: {
+      displaySettings: {
+        showStrongsAsModal: false,
+        appendCardToBottom: true,
+        insertCardNextToItem: true,
+        clearSearchAfterQuery: true,
+        cardFontSize: 12,
+        cardFontFamily: 'PT Serif',
+        showVersesOnNewLine: false,
+        showVerseNumbers: false,
+        showParagraphs: true,
+        showParagraphHeadings: true,
+        syncCardsAcrossDevices: false,
+      },
+      pageSettings: {
+        mergeStrategy: Overlap.Equal,
+      },
+      cardIcons: {
+        words: 'font_download',
+        passage: 'menu_book',
+        strongs: 'speaker_notes',
+        note: 'note',
+        savedPage: 'inbox',
+      },
+    },
+  },
+};
--- a/src/src/app/services/app-state-reducer.spec.ts
+++ b/src/src/app/services/app-state-reducer.spec.ts
@ -1,38 +1,14 @@
 import { TestBed } from '@angular/core/testing';
-
+import { reducer, getNewestStorable } from './app-state-reducer';
+import { AppActionFactory } from './app-state-actions';
 import { Overlap } from '../common/bible-reference';
+import { Storable, StorableType } from '../common/storable';
+import { CardType, CardItem } from '../models/card-state';
+import { SavedPage } from '../models/page-state';
+import { AppState, User } from '../models/app-state';
 import { getCardCacheKey } from '../common/card-cache-operations';
 import { MoveDirection } from '../common/move-direction';
-import { Storable, StorableType } from '../common/storable';
-import { AppState, User } from '../models/app-state';
-import { CardItem,CardType } from '../models/card-state';
 import { NoteItem } from '../models/note-state';
-import { SavedPage } from '../models/page-state';
-import {
-  addCardsAction,
-  addCardToSavedPageAction,
-  deleteNoteAction,
-  findNotesAction,
-  getNewestStorable,
-  getNotesAction,
-  moveCardAction,
-  moveSavedPageCardAction,
-  removeCardAction,
-  removeSavedPageAction,
-  saveNoteAction,
-  savePageAction,
-  setUserAction,
-  updateAutoCompleteAction,
-  updateCardAction,
-  updateCardFontFamilyAction,
-  updateCardFontSizeAction,
-  updateCardMergeStrategyAction,
-  updateCurrentPageAction,
-  updateNotesAction,
-  updateSavedPageAction,
-  updateSavedPagesAction,
-  updateSettingsAction,
-} from './app.service';

 describe('getNewestStorable', () => {
  it('maybeMutateStorable', () => {
@ -150,7 +126,8 @@ describe('AppService Reducer', () => {

  it('UPDATE_CARD_MERGE_STRATEGY', () => {
    for (const strategy of [Overlap.None, Overlap.Equal, Overlap.Subset, Overlap.Intersect]) {
-      const testState = updateCardMergeStrategyAction(strategy).handle(preState);
+      const action = AppActionFactory.newUpdateCardMergeStrategy(strategy);
+      const testState = reducer(preState, action);
      expect(testState.settings.value.pageSettings.mergeStrategy).toEqual(strategy);
    }
  });
@ -186,17 +163,20 @@ describe('AppService Reducer', () => {
      },
    };

-    const testState = updateSettingsAction(settings).handle(preState);
+    const action = AppActionFactory.newUpdateSettings(settings);
+    const testState = reducer(preState, action);
    expect(testState.settings).toBe(settings, 'Failed to update the display settings');
  });

  it('UPDATE_CARD_FONT_SIZE', () => {
-    const testState = updateCardFontSizeAction(32).handle(preState);
+    const action = AppActionFactory.newUpdateCardFontSize(32);
+    const testState = reducer(preState, action);
    expect(testState.settings.value.displaySettings.cardFontSize).toBe(32, 'Failed to change card font size to 32');
  });

  it('UPDATE_CARD_FONT_FAMILY', () => {
-    const testState = updateCardFontFamilyAction('Jason').handle(preState);
+    const action = AppActionFactory.newUpdateCardFontFamily('Jason');
+    const testState = reducer(preState, action);
    expect(testState.settings.value.displaySettings.cardFontFamily).toBe(
      'Jason',
      'Failed to change card font family to "Jason"'
@ -208,7 +188,8 @@ describe('AppService Reducer', () => {
  it('UPDATE_AUTOCOMPLETE', () => {
    const words = ['word1', 'word2', 'word3'];

-    const testState = updateAutoCompleteAction(words).handle(preState);
+    const action = AppActionFactory.newUpdateAutocomplete(words);
+    const testState = reducer(preState, action);
    expect(testState.autocomplete).toEqual(words, 'Failed to update the autocomplete array');
  });

@ -229,7 +210,8 @@ describe('AppService Reducer', () => {
      },
    ]);

-    const testState = updateSavedPagesAction(savedPages).handle(preState);
+    const action = AppActionFactory.newUpdateSavedPages(savedPages);
+    const testState = reducer(preState, action);
    expect(testState.savedPages).toBe(savedPages, 'Failed to update the savedPages array');
    expect(testState.savedPages.value.length).toBe(1, 'Updated savedPages is the wrong length');
    expect(testState.savedPages.value[0].queries.length).toBe(
@ -245,7 +227,8 @@ describe('AppService Reducer', () => {
      id: 'myid2',
    };

-    const testState = updateSavedPageAction(sp).handle(preState);
+    const action = AppActionFactory.newUpdateSavedPage(sp);
+    const testState = reducer(preState, action);

    expect(testState.savedPages.value[0].queries.length).toBe(
      1,
@ -261,7 +244,8 @@ describe('AppService Reducer', () => {

  it('REMOVE_SAVED_PAGE', () => {
    const sp = preState.savedPages.value[0];
-    const testState = removeSavedPageAction(sp).handle(preState);
+    const action = AppActionFactory.newRemoveSavedPage(sp);
+    const testState = reducer(preState, action);

    expect(testState.savedPages.value.length).toBe(1, 'Updated savedPages should be 1');
    expect(testState.savedPages.value[0].title).toBe('page2');
@ -274,10 +258,12 @@ describe('AppService Reducer', () => {
      type: CardType.Strongs,
    };

-    const testState = addCardsAction([card1], null).handle(preState);
+    const action1 = AppActionFactory.newAddCard(card1, null);
+    const testState = reducer(preState, action1);
    expect(testState.currentCards.value[0]).toBe(card1, 'Failed to add first card to empty list');

-    const testState2 = updateCurrentPageAction().handle(testState);
+    const action = AppActionFactory.newUpdateCurrentPage();
+    const testState2 = reducer(testState, action);

    expect(testState2.currentSavedPage.queries.length).toBe(1);
    expect(preState.currentSavedPage.queries.length).toBe(0);
@ -290,9 +276,11 @@ describe('AppService Reducer', () => {
      type: CardType.Passage,
    };

-    const preState2 = addCardsAction([card1], null).handle(preState);
+    const action1 = AppActionFactory.newAddCard(card1, null);
+    const preState2 = reducer(preState, action1);

-    const testState = savePageAction('my saved page').handle(preState2);
+    const action = AppActionFactory.newSavePage('my saved page');
+    const testState = reducer(preState2, action);

    expect(testState.savedPages.value[2].queries.length).toBe(
      1,
@ -304,7 +292,8 @@ describe('AppService Reducer', () => {
  it('MOVE_SAVED_PAGE_CARD', () => {
    const page = preState.savedPages.value[1];

-    const testState = moveSavedPageCardAction(page, 1, 0).handle(preState);
+    const action1 = AppActionFactory.newMoveSavedPageCard(page, 1, 0);
+    const testState = reducer(preState, action1);
    expect(testState.savedPages.value[1].queries[0].qry).toBe('G1', 'Failed to move card in saved page');
  });

@ -314,7 +303,8 @@ describe('AppService Reducer', () => {
      data: null,
      type: CardType.Passage,
    };
-    const testState = addCardToSavedPageAction(card1, 'myid1').handle(preState);
+    const action1 = AppActionFactory.newAddCardToSavedPage(card1, 'myid1');
+    const testState = reducer(preState, action1);
    expect(testState.savedPages.value[0].queries[1].qry).toBe('jn 3:16', 'Failed to add card to saved page');
  });

@ -329,7 +319,8 @@ describe('AppService Reducer', () => {
      type: CardType.Strongs,
    };

-    const testState = addCardsAction([card1], null).handle(preState);
+    const action1 = AppActionFactory.newAddCard(card1, null);
+    const testState = reducer(preState, action1);
    expect(testState.currentCards.value[0]).toBe(card1, 'Failed to add first card to empty list');

    const card2: CardItem = {
@ -338,7 +329,8 @@ describe('AppService Reducer', () => {
      type: CardType.Strongs,
    };

-    const testState2 = addCardsAction([card2], null).handle(testState);
+    const action2 = AppActionFactory.newAddCard(card2, null);
+    const testState2 = reducer(testState, action2);
    expect(testState2.currentCards.value.length).toBe(2, 'Failed to add second card to list with 1 item');
    expect(testState2.currentCards.value[1]).toBe(card2);

@ -350,109 +342,125 @@ describe('AppService Reducer', () => {

    // append to top, insert next to card

-    let setState = updateSettingsAction({
-      createdOn: new Date(2020, 1, 1, 0, 0, 0, 0).toISOString(),
-      type: StorableType.initial,
-      value: {
-        ...testState2.settings.value,
-        displaySettings: {
-          showStrongsAsModal: true,
-          appendCardToBottom: false,
-          insertCardNextToItem: true,
-          clearSearchAfterQuery: false,
-          cardFontSize: 100,
-          cardFontFamily: 'Jason',
-          showVersesOnNewLine: true,
-          showVerseNumbers: true,
-          showParagraphs: false,
-          showParagraphHeadings: false,
-          syncCardsAcrossDevices: true,
+    let setState = reducer(
+      testState2,
+      AppActionFactory.newUpdateSettings({
+        createdOn: new Date(2020, 1, 1, 0, 0, 0, 0).toISOString(),
+        type: StorableType.initial,
+        value: {
+          ...testState2.settings.value,
+          displaySettings: {
+            showStrongsAsModal: true,
+            appendCardToBottom: false,
+            insertCardNextToItem: true,
+            clearSearchAfterQuery: false,
+            cardFontSize: 100,
+            cardFontFamily: 'Jason',
+            showVersesOnNewLine: true,
+            showVerseNumbers: true,
+            showParagraphs: false,
+            showParagraphHeadings: false,
+            syncCardsAcrossDevices: true,
+          },
        },
-      },
-    }).handle(testState2);
+      })
+    );

-    const testState3 = addCardsAction([card3], card2).handle(setState);
+    const action3 = AppActionFactory.newAddCard(card3, card2);
+    const testState3 = reducer(setState, action3);
    expect(testState3.currentCards.value.length).toBe(3, 'Failed to add third card');
    expect(testState3.currentCards.value[1]).toBe(card3, 'Failed to insert card above the second card');

    // append to bottom, insert next to card

-    setState = updateSettingsAction({
-      createdOn: new Date(2020, 1, 1, 0, 0, 0, 0).toISOString(),
-      type: StorableType.initial,
-      value: {
-        ...testState2.settings.value,
-        displaySettings: {
-          showStrongsAsModal: true,
-          appendCardToBottom: true,
-          insertCardNextToItem: true,
-          clearSearchAfterQuery: false,
-          cardFontSize: 100,
-          cardFontFamily: 'Jason',
-          showVersesOnNewLine: true,
-          showVerseNumbers: true,
-          showParagraphs: false,
-          showParagraphHeadings: false,
-          syncCardsAcrossDevices: true,
+    setState = reducer(
+      testState2,
+      AppActionFactory.newUpdateSettings({
+        createdOn: new Date(2020, 1, 1, 0, 0, 0, 0).toISOString(),
+        type: StorableType.initial,
+        value: {
+          ...testState2.settings.value,
+          displaySettings: {
+            showStrongsAsModal: true,
+            appendCardToBottom: true,
+            insertCardNextToItem: true,
+            clearSearchAfterQuery: false,
+            cardFontSize: 100,
+            cardFontFamily: 'Jason',
+            showVersesOnNewLine: true,
+            showVerseNumbers: true,
+            showParagraphs: false,
+            showParagraphHeadings: false,
+            syncCardsAcrossDevices: true,
+          },
        },
-      },
-    }).handle(testState2);
+      })
+    );

-    const testState4 = addCardsAction([card3], card1).handle(setState);
+    const action4 = AppActionFactory.newAddCard(card3, card1);
+    const testState4 = reducer(setState, action4);
    expect(testState4.currentCards.value.length).toBe(3, 'Failed to add third card');
    expect(testState4.currentCards.value[1]).toBe(card3, 'Failed to insert card below the first card');

    // append to bottom, do not insert next to card

-    setState = updateSettingsAction({
-      createdOn: new Date(2020, 1, 1, 0, 0, 0, 0).toISOString(),
-      type: StorableType.initial,
-      value: {
-        ...testState2.settings.value,
-        displaySettings: {
-          showStrongsAsModal: true,
-          appendCardToBottom: true,
-          insertCardNextToItem: false,
-          clearSearchAfterQuery: false,
-          cardFontSize: 100,
-          cardFontFamily: 'Jason',
-          showVersesOnNewLine: true,
-          showVerseNumbers: true,
-          showParagraphs: false,
-          showParagraphHeadings: false,
-          syncCardsAcrossDevices: true,
+    setState = reducer(
+      testState2,
+      AppActionFactory.newUpdateSettings({
+        createdOn: new Date(2020, 1, 1, 0, 0, 0, 0).toISOString(),
+        type: StorableType.initial,
+        value: {
+          ...testState2.settings.value,
+          displaySettings: {
+            showStrongsAsModal: true,
+            appendCardToBottom: true,
+            insertCardNextToItem: false,
+            clearSearchAfterQuery: false,
+            cardFontSize: 100,
+            cardFontFamily: 'Jason',
+            showVersesOnNewLine: true,
+            showVerseNumbers: true,
+            showParagraphs: false,
+            showParagraphHeadings: false,
+            syncCardsAcrossDevices: true,
+          },
        },
-      },
-    }).handle(testState2);
+      })
+    );

-    const testState5 = addCardsAction([card3], card1).handle(setState);
+    const action5 = AppActionFactory.newAddCard(card3, card1);
+    const testState5 = reducer(setState, action5);
    expect(testState5.currentCards.value.length).toBe(3, 'Failed to add third card');
    expect(testState5.currentCards.value[2]).toBe(card3, 'Failed to insert card at end of the list');

    // append to top, do not insert next to card

-    setState = updateSettingsAction({
-      createdOn: new Date(2020, 1, 1, 0, 0, 0, 0).toISOString(),
-      type: StorableType.initial,
-      value: {
-        ...testState2.settings.value,
-        displaySettings: {
-          showStrongsAsModal: true,
-          appendCardToBottom: false,
-          insertCardNextToItem: false,
-          clearSearchAfterQuery: false,
-          cardFontSize: 100,
-          cardFontFamily: 'Jason',
-          showVersesOnNewLine: true,
-          showVerseNumbers: true,
-          showParagraphs: false,
-          showParagraphHeadings: false,
-          syncCardsAcrossDevices: true,
+    setState = reducer(
+      testState2,
+      AppActionFactory.newUpdateSettings({
+        createdOn: new Date(2020, 1, 1, 0, 0, 0, 0).toISOString(),
+        type: StorableType.initial,
+        value: {
+          ...testState2.settings.value,
+          displaySettings: {
+            showStrongsAsModal: true,
+            appendCardToBottom: false,
+            insertCardNextToItem: false,
+            clearSearchAfterQuery: false,
+            cardFontSize: 100,
+            cardFontFamily: 'Jason',
+            showVersesOnNewLine: true,
+            showVerseNumbers: true,
+            showParagraphs: false,
+            showParagraphHeadings: false,
+            syncCardsAcrossDevices: true,
+          },
        },
-      },
-    }).handle(testState2);
+      })
+    );

-    const testState6 = addCardsAction([card3], card1).handle(setState);
+    const action6 = AppActionFactory.newAddCard(card3, card1);
+    const testState6 = reducer(setState, action6);
    expect(testState6.currentCards.value.length).toBe(3, 'Failed to add third card');
    expect(testState6.currentCards.value[0]).toBe(card3, 'Failed to insert card at start of the list');
  });
@ -464,7 +472,8 @@ describe('AppService Reducer', () => {
      type: CardType.Strongs,
    };

-    const preState1 = addCardsAction([oldCard], null).handle(preState);
+    const action1 = AppActionFactory.newAddCard(oldCard, null);
+    const preState1 = reducer(preState, action1);

    const newCard: CardItem = {
      qry: 'H88',
@ -472,7 +481,8 @@ describe('AppService Reducer', () => {
      type: CardType.Strongs,
    };

-    const testState = updateCardAction(newCard, oldCard).handle(preState1);
+    const action2 = AppActionFactory.newUpdateCard(newCard, oldCard);
+    const testState = reducer(preState1, action2);

    expect(testState.currentCards.value[0].qry).toBe('H88', 'Should update the card');
    expect(testState.cardCache[getCardCacheKey(newCard)].qry).toBe('H88', 'Should exist in card cache');
@ -488,14 +498,13 @@ describe('AppService Reducer', () => {
      type: CardType.Strongs,
    };

-    const preState1 = addCardsAction([card], null).handle(preState);
+    const action1 = AppActionFactory.newAddCard(card, null);
+    const preState1 = reducer(preState, action1);

-    const testState = removeCardAction(card).handle(preState1);
+    const action2 = AppActionFactory.newRemoveCard(card);
+    const testState = reducer(preState1, action2);

-    expect(preState1.currentCards.value.length).toBe(
-      1,
-      'Should have added the card in preparation for removing the card'
-    );
+    expect(preState1.currentCards.value.length).toBe(1, 'Should have added the card in preparation for removing the card');
    expect(testState.currentCards.value.length).toBe(0, 'Should have removed the card');
    expect(testState.cardCache[getCardCacheKey(card)]).toBeUndefined(
      'Should be undefined, having been removed from card cache'
@ -509,30 +518,33 @@ describe('AppService Reducer', () => {
      type: CardType.Strongs,
    };

-    const preState1 = addCardsAction([card1], null).handle(preState);
+    const action1 = AppActionFactory.newAddCard(card1, null);
+    const preState1 = reducer(preState, action1);

    const card2: CardItem = {
      qry: 'H88',
      data: null,
      type: CardType.Strongs,
    };
-
-    const preState2 = addCardsAction([card2], null).handle(preState1);
+    const action2 = AppActionFactory.newAddCard(card2, null);
+    const preState2 = reducer(preState1, action2);
    expect(preState2.currentCards.value.length).toBe(2, 'Should have two cards');
    expect(preState2.currentCards.value[0].qry).toBe('G123');
    expect(preState2.currentCards.value[1].qry).toBe('H88');

-    const testState1 = moveCardAction(card2, MoveDirection.Up).handle(preState2);
+    const action3 = AppActionFactory.newMoveCard(card2, MoveDirection.Up);
+    const testState1 = reducer(preState2, action3);
    expect(testState1.currentCards.value[0].qry).toBe('H88');
    expect(testState1.currentCards.value[1].qry).toBe('G123');
-    const testState4 = moveCardAction(card2, MoveDirection.Up).handle(preState2);
+    const testState4 = reducer(preState2, action3);
    expect(testState4.currentCards.value[0].qry).toBe('H88');
    expect(testState4.currentCards.value[1].qry).toBe('G123');

-    const testState2 = moveCardAction(card1, MoveDirection.Down).handle(preState2);
+    const action4 = AppActionFactory.newMoveCard(card1, MoveDirection.Down);
+    const testState2 = reducer(preState2, action4);
    expect(testState2.currentCards.value[0].qry).toBe('H88');
    expect(testState2.currentCards.value[1].qry).toBe('G123');
-    const testState3 = moveCardAction(card1, MoveDirection.Down).handle(preState2);
+    const testState3 = reducer(preState2, action4);
    expect(testState3.currentCards.value[0].qry).toBe('H88');
    expect(testState3.currentCards.value[1].qry).toBe('G123');
  });
@ -547,7 +559,8 @@ describe('AppService Reducer', () => {
      providerId: 'asdfasf',
    };

-    const testState = setUserAction(user).handle(preState);
+    const action1 = AppActionFactory.newUser(user);
+    const testState = reducer(preState, action1);

    expect(testState.user).toBe(user, 'Should set the user');
  });
@ -568,14 +581,18 @@ describe('AppService Reducer', () => {
      xref: 'jn 3:16',
    };

-    const preState1 = saveNoteAction(note1).handle(preState);
-    const preState2 = saveNoteAction(note2).handle(preState1);
+    const action1 = AppActionFactory.newSaveNote(note1);
+    const preState1 = reducer(preState, action1);
+    const action2 = AppActionFactory.newSaveNote(note2);
+    const preState2 = reducer(preState1, action2);
    expect(preState2.notes.value.length).toBe(2, 'Should have two notes');

-    const preState3 = getNotesAction('123456789', null).handle(preState2);
+    const action3 = AppActionFactory.newGetNote('123456789', null);
+    const preState3 = reducer(preState2, action3);
    expect(preState3.currentCards.value.length).toBe(1, 'Should have added the note card');

-    const preState4 = getNotesAction('1234567890', null).handle(preState3);
+    const action4 = AppActionFactory.newGetNote('1234567890', null);
+    const preState4 = reducer(preState3, action4);
    expect(preState4.currentCards.value.length).toBe(2, 'Should have added the note card');
  });

@ -593,17 +610,19 @@ describe('AppService Reducer', () => {
      xref: 'jn 3:16',
    };

-    const preState1 = updateNotesAction(new Storable([note1, note2])).handle(preState);
+    const action1 = AppActionFactory.newUpdateNotes(new Storable([note1, note2]));
+    const preState1 = reducer(preState, action1);
    expect(preState1.notes.value.length).toBe(2, 'Should have added the notes');

-    const preState2 = findNotesAction('note', null).handle(preState1);
+    const action2 = AppActionFactory.newFindNotes('note', null);
+    const preState2 = reducer(preState1, action2);
    expect(preState2.currentCards.value.length).toBe(2, 'Should have found two notes card');

-    const preState3 = deleteNoteAction(note1).handle(preState2);
+    const action3 = AppActionFactory.newDeleteNote(note1);
+    const preState3 = reducer(preState2, action3);
    expect(preState3.currentCards.value.length).toBe(1, 'Should have deleted the note card');
    expect(preState3.notes.value.length).toBe(1, 'Should have added the notes');
  });

  //#endregion
 });
-
--- a/src/src/app/services/app-state-reducer.ts
+++ b/src/src/app/services/app-state-reducer.ts
@ -0,0 +1,480 @@
+import { UUID } from 'angular2-uuid';
+
+import { AppState, Settings } from '../models/app-state';
+import { IStorable, Storable } from '../common/storable';
+import { NoteItem } from '../models/note-state';
+
+import { mergeCardList } from '../common/card-operations';
+import { updateInCardCache, removeFromCardCache, getFromCardCache } from '../common/card-cache-operations';
+
+import { AppAction, AppActionFactory } from './app-state-actions';
+import { initialState } from './app-state-initial-state';
+import { SavedPage } from '../models/page-state';
+import { CardType, CardItem, DataReference } from '../models/card-state';
+import { moveItem, moveItemUpOrDown } from '../common/array-operations';
+
+export function getNewestStorable<T>(candidate: IStorable<T>, incumbant: IStorable<T>): IStorable<T> {
+  // if the candidate is null, then return the state.
+  if (!candidate) {
+    return incumbant;
+  }
+
+  // only update if the settings are newer.
+  if (!incumbant || new Date(candidate.createdOn) > new Date(incumbant.createdOn)) {
+    return candidate;
+  }
+
+  // candidate didn't win. return state untouched.
+  return incumbant;
+}
+
+export function reducer(state: AppState, action: AppAction): AppState {
+  // somtimes the state is null. lets not complain if that happens.
+  if (state === undefined) {
+    state = initialState;
+  }
+
+  switch (action.type) {
+    case 'UPDATE_ERROR': {
+      return {
+        ...state,
+        error: action.error,
+      };
+    }
+
+    //#region Settings
+
+    case 'UPDATE_CARD_MERGE_STRATEGY': {
+      const settings = new Storable<Settings>({
+        ...state.settings.value,
+        pageSettings: {
+          ...state.settings.value.pageSettings,
+          mergeStrategy: action.cardMergeStrategy,
+        },
+      });
+      return reducer(state, {
+        type: 'UPDATE_SETTINGS',
+        settings,
+      });
+    }
+
+    case 'UPDATE_SETTINGS': {
+      const item = getNewestStorable(action.settings, state.settings);
+
+      return {
+        ...state,
+        settings: item,
+      };
+    }
+
+    case 'UPDATE_CARD_FONT_SIZE': {
+      const settings = new Storable<Settings>({
+        ...state.settings.value,
+        displaySettings: {
+          ...state.settings.value.displaySettings,
+          cardFontSize: action.cardFontSize,
+        },
+      });
+
+      return reducer(state, {
+        type: 'UPDATE_SETTINGS',
+        settings,
+      });
+    }
+
+    case 'UPDATE_CARD_FONT_FAMILY': {
+      const settings = new Storable<Settings>({
+        ...state.settings.value,
+        displaySettings: {
+          ...state.settings.value.displaySettings,
+          cardFontFamily: action.cardFontFamily,
+        },
+      });
+
+      return reducer(state, {
+        type: 'UPDATE_SETTINGS',
+        settings,
+      });
+    }
+
+    //#endregion
+
+    case 'UPDATE_AUTOCOMPLETE': {
+      return {
+        ...state,
+        autocomplete: [...action.words],
+      };
+    }
+
+    //#region Saved Pages
+
+    case 'UPDATE_SAVED_PAGES': {
+      const savedPages = getNewestStorable(action.savedPages, state.savedPages);
+
+      // only true if a currentSavedPage was set, indicating that the user
+      //  is currently looking at a saved page.
+      const hasCurrentSavedPage =
+        state.currentSavedPage !== null &&
+        state.currentSavedPage !== undefined &&
+        action.savedPages.value.some((o) => o.id === state.currentSavedPage.id);
+
+      const currentSavedPage = hasCurrentSavedPage
+        ? action.savedPages.value.find((o) => o.id === state.currentSavedPage.id)
+        : null;
+
+      return {
+        ...state,
+        // if the currentSavedPage was loaded, replace it with the info from the
+        //  new savedPages array, as it might have changed.
+        currentCards: hasCurrentSavedPage ? new Storable(currentSavedPage.queries) : state.currentCards,
+        currentSavedPage: hasCurrentSavedPage ? currentSavedPage : state.currentSavedPage,
+        savedPagesLoaded: true,
+        savedPages, // update the savedPages
+      };
+    }
+
+    case 'UPDATE_SAVED_PAGE': {
+      const newSavedPages = new Storable<SavedPage[]>(
+        state.savedPages.value.map((o) => {
+          if (o.id === action.savedPage.id) {
+            return action.savedPage;
+          }
+          return o;
+        })
+      );
+
+      const savedPages = getNewestStorable(newSavedPages, state.savedPages);
+      return reducer(state, AppActionFactory.newUpdateSavedPages(savedPages));
+    }
+
+    case 'REMOVE_SAVED_PAGE': {
+      const savedPages = new Storable<SavedPage[]>(state.savedPages.value.filter((o) => o.id !== action.savedPage.id));
+      const item = getNewestStorable(savedPages, state.savedPages);
+
+      return {
+        ...state,
+        savedPagesLoaded: true,
+        savedPages: item,
+      };
+    }
+
+    case 'UPDATE_CURRENT_PAGE': {
+      const current = {
+        id: state.currentSavedPage.id,
+        title: state.currentSavedPage.title,
+        queries: [...mergeCardList(state.currentCards.value, state.settings.value.pageSettings.mergeStrategy)],
+      };
+
+      const savedPages = new Storable<SavedPage[]>([
+        ...state.savedPages.value.filter((o) => o.id !== state.currentSavedPage.id),
+        current,
+      ]);
+
+      const item = getNewestStorable(savedPages, state.savedPages);
+      return {
+        ...state,
+        currentSavedPage: current,
+        savedPagesLoaded: true,
+        savedPages: item,
+      };
+    }
+
+    case 'SAVE_PAGE': {
+      const savedPages = new Storable([
+        ...(state.savedPages ? state.savedPages.value : []),
+        {
+          // create a new saved page object
+          title: action.title,
+          id: UUID.UUID().toString(),
+          queries: [...mergeCardList(state.currentCards.value, state.settings.value.pageSettings.mergeStrategy)],
+        },
+      ]);
+
+      return reducer(state, {
+        type: 'UPDATE_SAVED_PAGES',
+        savedPages,
+      });
+    }
+
+    case 'MOVE_SAVED_PAGE_CARD': {
+      const queries = moveItem(action.savedPage.queries, action.fromIndex, action.toIndex);
+      const savedPage = {
+        ...action.savedPage,
+        queries, // update the queries.
+      };
+
+      return reducer(state, AppActionFactory.newUpdateSavedPage(savedPage));
+    }
+
+    case 'ADD_CARD_TO_SAVED_PAGE': {
+      const savedPages = new Storable([
+        ...(state.savedPages ? state.savedPages.value : []).map((o) => {
+          if (o.id.toString() === action.pageId) {
+            let references = [] as DataReference[];
+            if (state.settings.value.displaySettings.appendCardToBottom) {
+              references = [...o.queries, action.card];
+            } else {
+              references = [action.card, ...o.queries];
+            }
+            return {
+              ...o,
+              queries: mergeCardList(references, state.settings.value.pageSettings.mergeStrategy),
+            };
+          }
+          return o;
+        }),
+      ]);
+
+      return reducer(state, {
+        type: 'UPDATE_SAVED_PAGES',
+        savedPages,
+      });
+    }
+
+    //#endregion
+
+    //#region Cards
+
+    case 'ADD_CARD': {
+      let cards = [];
+
+      if (action.nextToItem && state.settings.value.displaySettings.insertCardNextToItem) {
+        const idx = state.currentCards.value.indexOf(action.nextToItem);
+
+        if (state.settings.value.displaySettings.appendCardToBottom) {
+          const before = state.currentCards.value.slice(0, idx + 1);
+          const after = state.currentCards.value.slice(idx + 1);
+          cards = [...before, action.card, ...after];
+        } else {
+          const before = state.currentCards.value.slice(0, idx);
+          const after = state.currentCards.value.slice(idx);
+          cards = [...before, action.card, ...after];
+        }
+      } else {
+        if (state.settings.value.displaySettings.appendCardToBottom) {
+          cards = [...state.currentCards.value, action.card];
+        } else {
+          cards = [action.card, ...state.currentCards.value];
+        }
+      }
+
+      return {
+        ...state,
+        currentCards: new Storable(cards),
+        cardCache: updateInCardCache(action.card, state.cardCache),
+      };
+    }
+
+    case 'UPDATE_CARD': {
+      return {
+        ...state,
+        currentCards: new Storable(
+          state.currentCards.value.map((c) => {
+            if (c === action.oldCard) {
+              return action.newCard;
+            }
+            return c;
+          })
+        ),
+        cardCache: updateInCardCache(action.newCard, removeFromCardCache(action.oldCard, state.cardCache)),
+      };
+    }
+
+    case 'REMOVE_CARD': {
+      // potentially remove card from a saved page.
+      const currentSavedPage =
+        state.currentSavedPage !== null
+          ? {
+              ...state.currentSavedPage,
+              queries: state.currentSavedPage.queries.filter((q) => q !== action.card),
+            }
+          : null;
+
+      const savedPages =
+        state.currentSavedPage !== null
+          ? new Storable(
+              (state.savedPages ? state.savedPages.value : []).map((o) => {
+                if (o === state.currentSavedPage) {
+                  return currentSavedPage;
+                }
+                return o;
+              })
+            )
+          : state.savedPages;
+
+      return {
+        ...state,
+        currentSavedPage,
+        savedPages,
+        currentCards: new Storable([...state.currentCards.value.filter((c) => c !== action.card)]),
+        cardCache: removeFromCardCache(action.card, state.cardCache),
+      };
+    }
+
+    case 'MOVE_CARD': {
+      const cards = moveItemUpOrDown(state.currentCards.value, action.card, action.direction);
+
+      return {
+        ...state,
+        currentCards: new Storable(cards),
+      };
+    }
+
+    case 'UPDATE_CARDS': {
+      let cardCache = { ...state.cardCache };
+      for (const card of action.cards.value) {
+        cardCache = updateInCardCache(card, cardCache);
+      }
+      return {
+        ...state,
+        currentCards: action.cards,
+        cardCache,
+      };
+    }
+
+    //#endregion
+
+    case 'SET_USER': {
+      return {
+        ...state,
+        user: action.user,
+      };
+    }
+
+    //#region Notes
+
+    case 'FIND_NOTES': {
+      const notes = state.notes.value
+        .filter((o) => o.title.search(action.qry) > -1)
+        .map((o) => {
+          return {
+            qry: o.id,
+            type: CardType.Note,
+            data: o,
+          } as CardItem;
+        });
+
+      let cards = [] as DataReference[];
+
+      if (action.nextToItem && state.settings.value.displaySettings.insertCardNextToItem) {
+        const idx = state.currentCards.value.indexOf(action.nextToItem);
+
+        if (state.settings.value.displaySettings.appendCardToBottom) {
+          const before = state.currentCards.value.slice(0, idx + 1);
+          const after = state.currentCards.value.slice(idx + 1);
+          cards = [...before, ...notes, ...after];
+        } else {
+          const before = state.currentCards.value.slice(0, idx);
+          const after = state.currentCards.value.slice(idx);
+          cards = [...before, ...notes, ...after];
+        }
+      } else {
+        if (state.settings.value.displaySettings.appendCardToBottom) {
+          cards = [...state.currentCards.value, ...notes];
+        } else {
+          cards = [...notes, ...state.currentCards.value];
+        }
+      }
+
+      let cache = { ...state.cardCache };
+      for (const n of notes) {
+        cache = updateInCardCache(n, cache);
+      }
+
+      return {
+        ...state,
+        currentCards: new Storable(cards),
+        cardCache: cache,
+      };
+    }
+
+    case 'GET_NOTE': {
+      const note = state.notes.value.find((o) => o.id === action.noteId);
+      const card: CardItem = {
+        qry: note.id,
+        type: CardType.Note,
+        data: note,
+      };
+
+      return reducer(state, {
+        type: 'ADD_CARD',
+        card,
+        nextToItem: action.nextToItem,
+      });
+    }
+
+    case 'UPDATE_NOTES': {
+      return {
+        ...state,
+        notes: action.notes ? action.notes : new Storable([]),
+      };
+    }
+
+    case 'SAVE_NOTE': {
+      // you may be creating a new note or updating an existing.
+      //  if its an update, you need to update the note in the following:
+      //  * card list could have it.
+      //  * notes list could have it.
+      //  * it could be in any of the saved pages lists...
+      //  so iterate through all of them and if you find the note
+      //   in any of them, swap it out
+
+      const notes = new Storable<NoteItem[]>([
+        ...state.notes.value.filter((o) => o.id !== action.note.id),
+        action.note,
+      ]);
+
+      const newState = {
+        ...state,
+        currentCards: new Storable([...state.currentCards.value]), // you want to trigger an update to the cards if a card update is different.
+        notes,
+      };
+
+      return newState;
+    }
+
+    case 'DELETE_NOTE': {
+      //  the note may be in any of the following:
+      //  * card list could have it.
+      //  * notes list could have it.
+      //  * it could be in any of the saved pages lists...
+      //  so iterate through all of them and if you find the note
+      //   in any of them, remove it
+
+      const card = state.currentCards.value.find((o) => o.qry === action.note.id);
+
+      const cards = card
+        ? [
+            ...state.currentCards.value.filter((o) => {
+              return o.type !== CardType.Note || o.qry !== action.note.id;
+            }),
+          ]
+        : state.currentCards.value; // if card is undefined, then it wasn't in the current card list.
+
+      const notes = new Storable<NoteItem[]>([...state.notes.value.filter((o) => o.id !== action.note.id)]);
+
+      const savedPages = new Storable<SavedPage[]>([
+        ...(state.savedPages ? state.savedPages.value : []).map((sp) => {
+          return {
+            ...sp,
+            queries: sp.queries.filter((o) => {
+              return o.type !== CardType.Note || o.qry !== action.note.id;
+            }),
+          };
+        }),
+      ]);
+
+      return {
+        ...state,
+        currentCards: new Storable(cards),
+        notes,
+        savedPages,
+        cardCache: card
+          ? removeFromCardCache(getFromCardCache(card, state.cardCache), state.cardCache)
+          : state.cardCache,
+      };
+    }
+
+    //#endregion
+  }
+}
--- a/src/src/app/services/app.service.ts
+++ b/src/src/app/services/app.service.ts
--- a/src/src/app/services/migration0to1.service.ts
+++ b/src/src/app/services/migration0to1.service.ts
@ -2,14 +2,13 @@ import { Injectable } from '@angular/core';
 import { AngularFireDatabase, AngularFireObject } from '@angular/fire/compat/database';
 import { DataSnapshot } from '@angular/fire/compat/database/interfaces';
 import { UUID } from 'angular2-uuid';
-
-import { Overlap } from '../common/bible-reference';
-import { Storable, StorableType } from '../common/storable';
-import { Settings, User } from '../models/app-state';
-import { CardType, DataReference } from '../models/card-state';
-import { SavedPage } from '../models/page-state';
 import { AppService } from './app.service';
+import { Overlap } from '../common/bible-reference';
+import { Settings, User } from '../models/app-state';
+import { SavedPage } from '../models/page-state';
+import { CardType, DataReference } from '../models/card-state';
 import { StorageService } from './storage.service';
+import { Storable, StorableType } from '../common/storable';

@Injectable({
  providedIn: 'root',
--- a/src/src/app/services/storage.service.ts
+++ b/src/src/app/services/storage.service.ts
@ -1,20 +1,20 @@
 import { Injectable } from '@angular/core';
+import { StorageMap } from '@ngx-pwa/local-storage';
 import { AngularFireDatabase, AngularFireObject } from '@angular/fire/compat/database';
 import { DataSnapshot } from '@angular/fire/compat/database/interfaces';
-import { StorageMap } from '@ngx-pwa/local-storage';
-import { createSelector } from 'reselect';
-import { lastValueFrom } from 'rxjs';

-import { isNullOrUndefined } from '../common/helpers';
-import { IStorable, StorableType, UserVersion } from '../common/storable';
 import { SubscriberBase } from '../common/subscriber-base';
-import { AppState,Settings, User } from '../models/app-state';
-import { DataReference } from '../models/card-state';
-import { NoteItem } from '../models/note-state';
-import { SavedPage } from '../models/page-state';
+import { IStorable, StorableType, UserVersion } from '../common/storable';
 import { AppService } from './app.service';
 import { MigrationVersion0to1 } from './migration0to1.service';

+import { User, Settings, AppState } from '../models/app-state';
+import { NoteItem } from '../models/note-state';
+import { SavedPage } from '../models/page-state';
+import { isNullOrUndefined } from '../common/helpers';
+import { DataReference } from '../models/card-state';
+import { createSelector } from 'reselect';
+
 /**
 * This class handles all the storage needs of the application.  It handles both
 *   local and remote storage and syncing between the two.
@ -186,9 +186,9 @@ export class StorageService extends SubscriberBase {
  }

  private async getFromLocal<T>(path: string, action: (storable: IStorable<T>) => void) {
-    const hasStorable = await lastValueFrom(this.local.has(path));
+    const hasStorable = await this.local.has(path).toPromise();
    if (hasStorable) {
-      const localData = (await lastValueFrom(this.local.get(path))) as IStorable<T>;
+      const localData = (await this.local.get(path).toPromise()) as IStorable<T>;
      // console.log('Data recieved from local store', localData);
      action(localData);
    }
@ -206,14 +206,14 @@ export class StorageService extends SubscriberBase {

        // console.log('Data saved to local store', data);
        // update local
-        this.addSubscription(
-          this.local.set(this.settingsPath, data).subscribe({
-            next: () => {},
-            complete: () => {},
-            error: () => {
-              this.appService.dispatchError(`Something went wrong and the Settings weren't saved. :(`);
-            },
-          })
+        this.local.set(this.settingsPath, data).subscribe(
+          () => {
+            // nop
+          },
+          // error
+          () => {
+            this.appService.dispatchError(`Something went wrong and the Settings weren't saved. :(`);
+          }
        );

        // update remote
@ -232,14 +232,14 @@ export class StorageService extends SubscriberBase {

        // console.log('Data saved to local store', data);
        // update local
-        this.addSubscription(
-          this.local.set(this.savedPagesPath, data).subscribe({
-            next: () => {},
-            complete: () => {},
-            error: () => {
-              this.appService.dispatchError(`Something went wrong and the Page wasn't saved. :(`);
-            },
-          })
+        this.local.set(this.savedPagesPath, data).subscribe(
+          () => {
+            // nop
+          },
+          // error
+          () => {
+            this.appService.dispatchError(`Something went wrong and the Page wasn't saved. :(`);
+          }
        );

        // update remote
@ -258,14 +258,14 @@ export class StorageService extends SubscriberBase {

        // console.log('Data saved to local store', data);
        // update local
-        this.addSubscription(
-          this.local.set(this.noteItemsPath, data).subscribe({
-            next: () => {},
-            complete: () => {},
-            error: () => {
-              this.appService.dispatchError(`Something went wrong and the Note wasn't saved. :(`);
-            },
-          })
+        this.local.set(this.noteItemsPath, data).subscribe(
+          () => {
+            // nop
+          },
+          // error
+          () => {
+            this.appService.dispatchError(`Something went wrong and the Note wasn't saved. :(`);
+          }
        );

        // update remote
@ -289,15 +289,15 @@ export class StorageService extends SubscriberBase {
        }

        // update local
-        this.addSubscription(
-          this.local.set(this.cardsPath, v.currentCards).subscribe({
-            next: () => {},
-            complete: () => {},
-            error: () => {
-              this.appService.dispatchError(`Something went wrong and the current cards weren't saved. :(`);
-            },
-          })
-        );
+        this.local.set(this.cardsPath, v.currentCards).subscribe({
+          next: () => {
+            // nop
+          },
+          // error
+          error: () => {
+            this.appService.dispatchError(`Something went wrong and the current cards weren't saved. :(`);
+          },
+        });

        // since you updated the local variable above, this remote update will
        //  get picked up by the remote subscription below.
--- a/src/src/assets/data/index/backbitethidx.json
+++ b/src/src/assets/data/index/backbitethidx.json
--- a/src/src/assets/data/index/benefactoridx.json
+++ b/src/src/assets/data/index/benefactoridx.json
--- a/src/src/assets/data/index/bethabaraidx.json
+++ b/src/src/assets/data/index/bethabaraidx.json
--- a/src/src/assets/data/index/bethelidx.json
+++ b/src/src/assets/data/index/bethelidx.json
--- a/src/src/assets/data/index/bilshanidx.json
+++ b/src/src/assets/data/index/bilshanidx.json
--- a/src/src/assets/data/index/conferidx.json
+++ b/src/src/assets/data/index/conferidx.json
--- a/src/src/assets/data/index/confessidx.json
+++ b/src/src/assets/data/index/confessidx.json
--- a/src/src/assets/data/index/contendestidx.json
+++ b/src/src/assets/data/index/contendestidx.json
--- a/src/src/assets/data/index/contendethidx.json
+++ b/src/src/assets/data/index/contendethidx.json
--- a/src/src/assets/data/index/couchethidx.json
+++ b/src/src/assets/data/index/couchethidx.json
--- a/src/src/assets/data/index/couchidx.json
+++ b/src/src/assets/data/index/couchidx.json
--- a/Show More
+++ b/Show More