Factorize the code to make it easier to add new modes AND added a Juxtalinear edition mode

package.json

@@ -30,7 +30,9 @@
     "deploy": "yarn build && electron-builder -p always"
   },
   "eslintIgnore": [
-    "*.test.js"
+    "*.test.js",
+    "*.tsx",
+    "*.ts"
   ],
   "build": {
     "asar": true,
@@ -83,13 +85,17 @@
     "@babel/eslint-parser": "^7.5.4",
     "@babel/preset-env": "^7.18.2",
     "@babel/preset-react": "^7.17.12",
+    "@capacitor/cli": "5.4.2",
     "@netlify/plugin-nextjs": "^4.8.0",
     "@playwright/test": "^1.36.2",
     "@svgr/webpack": "^5.5.0",
     "@testing-library/dom": "^8.13.0",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "14.2.0",
+    "@types/file-saver": "^2.0.5",
+    "@typescript-eslint/eslint-plugin": "^6.7.4",
+    "@typescript-eslint/parser": "^6.7.4",
     "ajv": "^6.12.2",
     "autoprefixer": "^10.4.13",
     "babel-jest": "^28.1.1",
@@ -112,14 +118,23 @@
     "null-loader": "^4.0.1",
     "postcss": "^8.4.21",
     "prettier": "^2.8.3",
+    "source-map-explorer": "^2.5.3",
     "tailwindcss": "^3.2.4"
   },
   "dependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@capacitor/app": "5.0.6",
+    "@capacitor/core": "5.4.2",
+    "@capacitor/haptics": "5.0.6",
+    "@capacitor/keyboard": "5.0.6",
+    "@capacitor/status-bar": "5.0.6",
     "@electron/remote": "^2.0.8",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "@headlessui/react": "^1.7.8",
     "@heroicons/react": "^2.0.14",
+    "@ionic/react": "^7.0.0",
+    "@ionic/react-router": "^7.0.0",
     "@material-ui/core": "^4.12.4",
     "@material-ui/icons": "^4.11.3",
     "@material-ui/lab": "4.0.0-alpha.57",
@@ -132,6 +147,13 @@
     "@supabase/supabase-js": "^2.26.0",
     "@tailwindcss/forms": "^0.5.2",
     "@tailwindcss/typography": "^0.5.9",
+    "@types/jest": "^29.5.5",
+    "@types/node": "^20.8.2",
+    "@types/react": "^18.2.25",
+    "@types/react-beautiful-dnd": "^13.1.5",
+    "@types/react-dom": "^18.2.10",
+    "@types/react-router": "^5.1.20",
+    "@types/react-router-dom": "^5.3.3",
     "@xelah/type-perf-html": "^1.0.1",
     "adm-zip": "^0.5.9",
     "audiobuffer-to-wav": "^1.0.0",
@@ -146,12 +168,15 @@
     "epitelete": "^0.2.20",
     "epitelete-html": "0.2.20-beta.2",
     "eslint-import-resolver-alias": "^1.1.2",
-    "font-detect-rhl": "1.0.5-1",
+    "file-saver": "^2.0.5",
+    "font-detect-rhl": "1.0.8",
     "font-list": "^1.4.5",
     "fs-extra": "^10.1.0",
     "get-system-fonts": "^2.0.2",
     "gitea-react-toolkit": "2.1.2",
+    "history": "^5.3.0",
     "i18next": "^21.8.9",
+    "ionicons": "^7.1.2",
     "is-electron": "^2.2.1",
     "isomorphic-git": "^1.24.0",
     "js-yaml": "^4.1.0",
@@ -169,16 +194,24 @@
     "postcss-import": "^15.1.0",
     "postcss-nested": "^6.0.0",
     "prop-types": "15.8.1",
+    "proskomma-core": "^0.10.4",
+    "proskomma-json-tools": "^0.8.8",
     "proskomma-react-hooks": "2.4.0",
     "raw-loader": "^4.0.2",
     "react": "^18.2.0",
+    "react-beautiful-dnd": "^13.1.1",
     "react-dom": "^18.2.0",
     "react-i18next": "^11.17.1",
+    "react-icons": "^4.11.0",
+    "react-markdown": "^9.0.0",
     "react-media-recorder": "^1.6.6",
+    "react-router": "^5.2.0",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "5.0.1",
     "styled-components": "^5.3.6",
     "tc-ui-toolkit": "5.3.3",
     "translation-helps-rcl": "3.5.12",
+    "typescript": "^4.9.5",
     "use-deep-compare": "^1.1.0",
     "usfm-editor": "0.8.7",
     "usfm-grammar": "^2.3.0",
@@ -187,12 +220,24 @@
     "webpack-node-externals": "^3.0.0",
     "winston": "^3.7.2",
     "word-aligner": "1.0.0",
+    "workbox-background-sync": "^7.0.0",
+    "workbox-broadcast-update": "^7.0.0",
+    "workbox-cacheable-response": "^7.0.0",
+    "workbox-core": "^7.0.0",
+    "workbox-expiration": "^7.0.0",
+    "workbox-google-analytics": "^7.0.0",
+    "workbox-navigation-preload": "^7.0.0",
+    "workbox-precaching": "^7.0.0",
+    "workbox-range-requests": "^7.0.0",
+    "workbox-routing": "^7.0.0",
+    "workbox-strategies": "^7.0.0",
+    "workbox-streams": "^7.0.0",
     "ws": "^8.8.0",
+    "xregexp": "^5.1.1",
     "yarn": "^1.22.19"
   },
   "optionalDependencies": {
     "bufferutil": "^4.0.6",
-    "react-icons": "4.10.1",
     "scripture-resources-rcl": "5.1.0",
     "utf-8-validate": "^5.0.9"
   },
@@ -204,4 +249,4 @@
     "word-aligner": "$word-aligner",
     "@mui/lab": "$@mui/lab"
   }
-}
+}

renderer/jsconfig.json

@@ -1,5 +1,7 @@
 {
   "compilerOptions": {
+    "jsx": "react",
+    "resolveJsonModule": true,
     "baseUrl": ".",
     "paths": {
       "@/components/*": [