mobile: fix cannot read property jsx of undefined

* web: improve web app loading performance by 10x

* web: update test snapshots

apps/desktop/README.md

@@ -40,12 +40,35 @@ Once you are inside the `./notesnook` directory, run the preparation step:
 npm install
 ```
 
-Now you can finally start the desktop app:
+Now you can finally start the desktop app for development:
 
 ```bash
 npm run start:desktop
 ```
 
+To run the app in release mode:
+
+```bash
+npm run staging -- --rebuild
+```
+
+This will compile and run the app in production mode but it won't generate any packages. To create the final packages, you'll have to run the following commands:
+
+```bash
+npm run release -- --rebuild
+
+# For macOS
+npx electron-builder --mac dmg --arm64 --x64 -publish never
+
+# For Linux (AppImage)
+npx electron-builder --linux AppImage:x64 AppImage:arm64 -publish never
+
+# For Windows
+npx electron-builder --win --publish never
+```
+
+Feel free to play around with the `electron-builder` command to get the packages you need. `npx electron-builder --help` is a great resource to learn different commands & platforms supported by `electron-builder`.
+
 ## Developer guide
 
 ### The tech stack

apps/desktop/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@notesnook/desktop",
-  "version": "3.0.4",
+  "version": "3.0.8",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@notesnook/desktop",
-      "version": "3.0.4",
+      "version": "3.0.8",
       "hasInstallScript": true,
       "license": "GPL-3.0-or-later",
       "dependencies": {
@@ -29,6 +29,7 @@
         "electron": "^29.3.1",
         "electron-builder": "^24.13.3",
         "esbuild": "^0.20.0",
+        "kysely": "^0.27.3",
         "node-gyp-build": "^4.8.0",
         "prebuildify": "^6.0.1",
         "tree-kill": "^1.2.2",
@@ -112,7 +113,6 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/@electron/get/-/get-2.0.2.tgz",
       "integrity": "sha512-eFZVFoRXb3GFGd7Ak7W4+6jBl9wBtiZ4AaYOse97ej6mKj5tkyO0dUnUChs1IhJZtx1BENo4/p4WUTXpi6vT+g==",
-      "dev": true,
       "dependencies": {
         "debug": "^4.1.1",
         "env-paths": "^2.2.0",
@@ -133,7 +133,6 @@
       "version": "8.1.0",
       "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz",
       "integrity": "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==",
-      "dev": true,
       "dependencies": {
         "graceful-fs": "^4.2.0",
         "jsonfile": "^4.0.0",
@@ -147,7 +146,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
       "integrity": "sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==",
-      "dev": true,
       "optionalDependencies": {
         "graceful-fs": "^4.1.6"
       }
@@ -156,7 +154,6 @@
       "version": "6.3.0",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
       "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
-      "dev": true,
       "bin": {
         "semver": "bin/semver.js"
       }
@@ -165,7 +162,6 @@
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
       "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==",
-      "dev": true,
       "engines": {
         "node": ">= 4.0.0"
       }
@@ -821,7 +817,6 @@
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-4.6.0.tgz",
       "integrity": "sha512-t09vSN3MdfsyCHoFcTRCH/iUtG7OJ0CsjzB8cjAmKc/va/kIgeDI/TxsigdncE/4be734m0cvIYwNaV4i2XqAw==",
-      "dev": true,
       "engines": {
         "node": ">=10"
       },
@@ -833,7 +828,6 @@
       "version": "4.0.6",
       "resolved": "https://registry.npmjs.org/@szmarczak/http-timer/-/http-timer-4.0.6.tgz",
       "integrity": "sha512-4BAffykYOgO+5nzBWYwE3W90sBgLJoUPRWWcL8wlyiM8IB8ipJz3UMJ9KXQd1RKQXpKp8Tutn80HZtWsu2u76w==",
-      "dev": true,
       "dependencies": {
         "defer-to-connect": "^2.0.0"
       },
@@ -878,7 +872,6 @@
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/@types/cacheable-request/-/cacheable-request-6.0.3.tgz",
       "integrity": "sha512-IQ3EbTzGxIigb1I3qPZc1rWJnH0BmSKv5QYTalEwweFvyBDLSAe24zP0le/hyi7ecGfZVlIVAg4BZqb8WBwKqw==",
-      "dev": true,
       "dependencies": {
         "@types/http-cache-semantics": "*",
         "@types/keyv": "^3.1.4",
@@ -907,14 +900,12 @@
     "node_modules/@types/http-cache-semantics": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/@types/http-cache-semantics/-/http-cache-semantics-4.0.1.tgz",
-      "integrity": "sha512-SZs7ekbP8CN0txVG2xVRH6EgKmEm31BOxA07vkFaETzZz1xh+cbt8BcI0slpymvwhx5dlFnQG2rTlPVQn+iRPQ==",
-      "dev": true
+      "integrity": "sha512-SZs7ekbP8CN0txVG2xVRH6EgKmEm31BOxA07vkFaETzZz1xh+cbt8BcI0slpymvwhx5dlFnQG2rTlPVQn+iRPQ=="
     },
     "node_modules/@types/keyv": {
       "version": "3.1.4",
       "resolved": "https://registry.npmjs.org/@types/keyv/-/keyv-3.1.4.tgz",
       "integrity": "sha512-BQ5aZNSCpj7D6K2ksrRCTmKRLEpnPvWDiLPfoGyhZ++8YtiK9d/3DBKPJgry359X/P1PfruyYwvnvwFjuEiEIg==",
-      "dev": true,
       "dependencies": {
         "@types/node": "*"
       }
@@ -928,8 +919,7 @@
     "node_modules/@types/node": {
       "version": "18.16.1",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-18.16.1.tgz",
-      "integrity": "sha512-DZxSZWXxFfOlx7k7Rv4LAyiMroaxa3Ly/7OOzZO8cBNho0YzAi4qlbrx8W27JGqG57IgR/6J7r+nOJWw6kcvZA==",
-      "devOptional": true
+      "integrity": "sha512-DZxSZWXxFfOlx7k7Rv4LAyiMroaxa3Ly/7OOzZO8cBNho0YzAi4qlbrx8W27JGqG57IgR/6J7r+nOJWw6kcvZA=="
     },
     "node_modules/@types/plist": {
       "version": "3.0.2",
@@ -945,7 +935,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/@types/responselike/-/responselike-1.0.0.tgz",
       "integrity": "sha512-85Y2BjiufFzaMIlvJDvTTB8Fxl2xfLo4HgmHzVBz08w4wDePCTjYw66PdrolO0kzli3yam/YCgRufyo1DdQVTA==",
-      "dev": true,
       "dependencies": {
         "@types/node": "*"
       }
@@ -975,7 +964,6 @@
       "version": "2.10.0",
       "resolved": "https://registry.npmjs.org/@types/yauzl/-/yauzl-2.10.0.tgz",
       "integrity": "sha512-Cn6WYCm0tXv8p6k+A8PvbDG763EDpBoTzHdA+Q/MF6H3sapGjCm9NzoaJncJS9tUKSuCoDs9XHxYYsQDgxR6kw==",
-      "dev": true,
       "optional": true,
       "dependencies": {
         "@types/node": "*"
@@ -1120,6 +1108,80 @@
         "node": ">=12.0.0"
       }
     },
+    "node_modules/archiver": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/archiver/-/archiver-5.3.2.tgz",
+      "integrity": "sha512-+25nxyyznAXF7Nef3y0EbBeqmGZgeN/BxHX29Rs39djAfaFalmQ89SE6CWyDCHzGL0yt/ycBtNOmGTW0FyGWNw==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "archiver-utils": "^2.1.0",
+        "async": "^3.2.4",
+        "buffer-crc32": "^0.2.1",
+        "readable-stream": "^3.6.0",
+        "readdir-glob": "^1.1.2",
+        "tar-stream": "^2.2.0",
+        "zip-stream": "^4.1.0"
+      },
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/archiver-utils": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/archiver-utils/-/archiver-utils-2.1.0.tgz",
+      "integrity": "sha512-bEL/yUb/fNNiNTuUz979Z0Yg5L+LzLxGJz8x79lYmR54fmTIb6ob/hNQgkQnIUDWIFjZVQwl9Xs356I6BAMHfw==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "glob": "^7.1.4",
+        "graceful-fs": "^4.2.0",
+        "lazystream": "^1.0.0",
+        "lodash.defaults": "^4.2.0",
+        "lodash.difference": "^4.5.0",
+        "lodash.flatten": "^4.4.0",
+        "lodash.isplainobject": "^4.0.6",
+        "lodash.union": "^4.6.0",
+        "normalize-path": "^3.0.0",
+        "readable-stream": "^2.0.0"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/archiver-utils/node_modules/readable-stream": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
+      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
+    "node_modules/archiver-utils/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+      "dev": true,
+      "peer": true
+    },
+    "node_modules/archiver-utils/node_modules/string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
     "node_modules/argparse": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
@@ -1259,7 +1321,6 @@
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/boolean/-/boolean-3.2.0.tgz",
       "integrity": "sha512-d0II/GO9uf9lfUHH2BQsjxzRJZBdsjgsBiW4BvhWk/3qoKwQFjIDVN19PfX8F2D/r9PCMTtLWjYVCFrpeYUzsw==",
-      "dev": true,
       "optional": true
     },
     "node_modules/brace-expansion": {
@@ -1310,7 +1371,6 @@
       "version": "0.2.13",
       "resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz",
       "integrity": "sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==",
-      "dev": true,
       "engines": {
         "node": "*"
       }
@@ -1386,7 +1446,6 @@
       "version": "5.0.4",
       "resolved": "https://registry.npmjs.org/cacheable-lookup/-/cacheable-lookup-5.0.4.tgz",
       "integrity": "sha512-2/kNscPhpcxrOigMZzbiWF7dz8ilhb/nIHU3EyZiXWXpeq/au8qJ8VhdftMkty3n7Gj6HIGalQG8oiBNB3AJgA==",
-      "dev": true,
       "engines": {
         "node": ">=10.6.0"
       }
@@ -1395,7 +1454,6 @@
       "version": "7.0.4",
       "resolved": "https://registry.npmjs.org/cacheable-request/-/cacheable-request-7.0.4.tgz",
       "integrity": "sha512-v+p6ongsrp0yTGbJXjgxPow2+DL93DASP4kXCDKb8/bwRtt9OEF3whggkkDkGNzgcWy2XaF4a8nZglC7uElscg==",
-      "dev": true,
       "dependencies": {
         "clone-response": "^1.0.2",
         "get-stream": "^5.1.0",
@@ -1515,7 +1573,6 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/clone-response/-/clone-response-1.0.3.tgz",
       "integrity": "sha512-ROoL94jJH2dUVML2Y/5PEDNaSHgeOdSDicUyS7izcF63G6sTc/FTjLub4b8Il9S8S0beOfYt0TaA5qvFK+w0wA==",
-      "dev": true,
       "dependencies": {
         "mimic-response": "^1.0.0"
       },
@@ -1569,6 +1626,22 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/compress-commons": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/compress-commons/-/compress-commons-4.1.2.tgz",
+      "integrity": "sha512-D3uMHtGc/fcO1Gt1/L7i1e33VOvD4A9hfQLP+6ewd+BvG/gQ84Yh4oftEhAdjSMgBgwGL+jsppT7JYNpo6MHHg==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "buffer-crc32": "^0.2.13",
+        "crc32-stream": "^4.0.2",
+        "normalize-path": "^3.0.0",
+        "readable-stream": "^3.6.0"
+      },
+      "engines": {
+        "node": ">= 10"
+      }
+    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -1635,7 +1708,7 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
       "integrity": "sha512-3lqz5YjWTYnW6dlDa5TLaTCcShfar1e40rmcJVwCBJC6mWlFuj0eCHIElmG1g5kyuJ/GD+8Wn4FFCcz4gJPfaQ==",
-      "optional": true
+      "devOptional": true
     },
     "node_modules/crc": {
       "version": "3.8.0",
@@ -1646,6 +1719,33 @@
         "buffer": "^5.1.0"
       }
     },
+    "node_modules/crc-32": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/crc-32/-/crc-32-1.2.2.tgz",
+      "integrity": "sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ==",
+      "dev": true,
+      "peer": true,
+      "bin": {
+        "crc32": "bin/crc32.njs"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/crc32-stream": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/crc32-stream/-/crc32-stream-4.0.3.tgz",
+      "integrity": "sha512-NT7w2JVU7DFroFdYkeq8cywxrgjPHWkdX1wjpRQXPX5Asews3tA+Ght6lddQO5Mkumffp3X7GEqku3epj2toIw==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "crc-32": "^1.2.0",
+        "readable-stream": "^3.4.0"
+      },
+      "engines": {
+        "node": ">= 10"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -1738,7 +1838,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/defer-to-connect/-/defer-to-connect-2.0.1.tgz",
       "integrity": "sha512-4tvttepXG1VaYGrRibk5EwJd1t4udunSOVMdLSAL6mId1ix438oPwPZMALY41FCijukO1L0twNcGsdzS7dHgDg==",
-      "dev": true,
       "engines": {
         "node": ">=10"
       }
@@ -1747,7 +1846,6 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.0.tgz",
       "integrity": "sha512-xvqAVKGfT1+UAvPwKTVw/njhdQ8ZhXK4lI0bCIuCMrp2up9nPnaDftrLtmpTazqd1o+UY4zgzU+avtMbDP+ldA==",
-      "dev": true,
       "optional": true,
       "dependencies": {
         "has-property-descriptors": "^1.0.0",
@@ -1781,7 +1879,6 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/detect-node/-/detect-node-2.1.0.tgz",
       "integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==",
-      "dev": true,
       "optional": true
     },
     "node_modules/dir-compare": {
@@ -1911,7 +2008,6 @@
       "version": "29.3.1",
       "resolved": "https://registry.npmjs.org/electron/-/electron-29.3.1.tgz",
       "integrity": "sha512-auge1/6RVqgUd6TgIq88wKdUCJi2cjESi3jy7d+6X4JzvBGprKBqMJ8JSSFpu/Px1YJrFUKAxfy6SC+TQf1uLw==",
-      "dev": true,
       "hasInstallScript": true,
       "dependencies": {
         "@electron/get": "^2.0.0",
@@ -1951,6 +2047,19 @@
         "node": ">=14.0.0"
       }
     },
+    "node_modules/electron-builder-squirrel-windows": {
+      "version": "24.13.3",
+      "resolved": "https://registry.npmjs.org/electron-builder-squirrel-windows/-/electron-builder-squirrel-windows-24.13.3.tgz",
+      "integrity": "sha512-oHkV0iogWfyK+ah9ZIvMDpei1m9ZRpdXcvde1wTpra2U8AFDNNpqJdnin5z+PM1GbQ5BoaKCWas2HSjtR0HwMg==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "app-builder-lib": "24.13.3",
+        "archiver": "^5.3.1",
+        "builder-util": "24.13.1",
+        "fs-extra": "^10.1.0"
+      }
+    },
     "node_modules/electron-builder/node_modules/builder-util-runtime": {
       "version": "9.2.4",
       "resolved": "https://registry.npmjs.org/builder-util-runtime/-/builder-util-runtime-9.2.4.tgz",
@@ -2024,7 +2133,6 @@
       "version": "20.12.7",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.7.tgz",
       "integrity": "sha512-wq0cICSkRLVaf3UGLMGItu/PtdY7oaXaI/RVU+xliKVOtRna3PRY57ZDfztpDL0n11vfymMUnXv8QwYCO7L1wg==",
-      "dev": true,
       "dependencies": {
         "undici-types": "~5.26.4"
       }
@@ -2046,7 +2154,6 @@
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/env-paths/-/env-paths-2.2.1.tgz",
       "integrity": "sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==",
-      "dev": true,
       "engines": {
         "node": ">=6"
       }
@@ -2061,7 +2168,6 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/es6-error/-/es6-error-4.1.1.tgz",
       "integrity": "sha512-Um/+FxMr9CISWh0bi5Zv0iOD+4cFh5qLeks1qhAopKVAJw3drgKbKySikp7wGhDL0HPeaja0P5ULZrxLkniUVg==",
-      "dev": true,
       "optional": true
     },
     "node_modules/esbuild": {
@@ -2114,7 +2220,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
       "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
-      "dev": true,
       "optional": true,
       "engines": {
         "node": ">=10"
@@ -2135,7 +2240,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/extract-zip/-/extract-zip-2.0.1.tgz",
       "integrity": "sha512-GDhU9ntwuKyGXdZBUgTIe+vXnWj0fppUEtMDL0+idd5Sta8TGpHssn/eusA9mrPr9qNDym6SxAYZjNvCn/9RBg==",
-      "dev": true,
       "dependencies": {
         "debug": "^4.1.1",
         "get-stream": "^5.1.0",
@@ -2176,7 +2280,6 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/fd-slicer/-/fd-slicer-1.1.0.tgz",
       "integrity": "sha512-cE1qsB/VwyQozZ+q1dGxR8LBYNZeofhEdUNGSMbQD3Gw2lAzX9Zb3uIU6Ebc/Fmyjo9AWWfnn0AUCHqtevs/8g==",
-      "dev": true,
       "dependencies": {
         "pend": "~1.2.0"
       }
@@ -2319,7 +2422,6 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
       "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
-      "dev": true,
       "optional": true
     },
     "node_modules/get-caller-file": {
@@ -2334,7 +2436,6 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.1.tgz",
       "integrity": "sha512-2DcsyfABl+gVHEfCOaTrWgyt+tb6MSEGmKq+kI5HwLbIYgjgmMcV8KQ41uaKz1xxUcn9tJtgFbQUEVcEbd0FYw==",
-      "dev": true,
       "optional": true,
       "dependencies": {
         "function-bind": "^1.1.1",
@@ -2350,7 +2451,6 @@
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.2.0.tgz",
       "integrity": "sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==",
-      "dev": true,
       "dependencies": {
         "pump": "^3.0.0"
       },
@@ -2424,7 +2524,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/global-agent/-/global-agent-3.0.0.tgz",
       "integrity": "sha512-PT6XReJ+D07JvGoxQMkT6qji/jVNfX/h364XHZOWeRzy64sSFr+xJ5OX7LI3b4MPQzdL4H8Y8M0xzPpsVMwA8Q==",
-      "dev": true,
       "optional": true,
       "dependencies": {
         "boolean": "^3.0.1",
@@ -2442,7 +2541,6 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/globalthis/-/globalthis-1.0.3.tgz",
       "integrity": "sha512-sFdI5LyBiNTHjRd7cGPWapiHWMOXKyuBNX/cWJ3NfzrZQVa8GI/8cofCl74AOVqq9W5kNmguTIzJ/1s2gyI9wA==",
-      "dev": true,
       "optional": true,
       "dependencies": {
         "define-properties": "^1.1.3"
@@ -2458,7 +2556,6 @@
       "version": "11.8.6",
       "resolved": "https://registry.npmjs.org/got/-/got-11.8.6.tgz",
       "integrity": "sha512-6tfZ91bOr7bOXnK7PRDCGBLa1H4U080YHNaAQ2KsMGlLEzRbk44nsZF2E1IeRc3vtJHPVbKCYgdFbaGO2ljd8g==",
-      "dev": true,
       "dependencies": {
         "@sindresorhus/is": "^4.0.0",
         "@szmarczak/http-timer": "^4.0.5",
@@ -2488,7 +2585,6 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
       "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
-      "dev": true,
       "optional": true,
       "dependencies": {
         "function-bind": "^1.1.1"
@@ -2510,7 +2606,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.0.tgz",
       "integrity": "sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==",
-      "dev": true,
       "optional": true,
       "dependencies": {
         "get-intrinsic": "^1.1.1"
@@ -2523,7 +2618,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.1.tgz",
       "integrity": "sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg==",
-      "dev": true,
       "optional": true,
       "engines": {
         "node": ">= 0.4"
@@ -2536,7 +2630,6 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
       "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
-      "dev": true,
       "optional": true,
       "engines": {
         "node": ">= 0.4"
@@ -2560,8 +2653,7 @@
     "node_modules/http-cache-semantics": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.1.tgz",
-      "integrity": "sha512-er295DKPVsV82j5kw1Gjt+ADA/XYHsajl82cGNQG2eyoPkvgUhX+nDIyelzhIWbbsXP39EHcI6l5tYs2FYqYXQ==",
-      "dev": true
+      "integrity": "sha512-er295DKPVsV82j5kw1Gjt+ADA/XYHsajl82cGNQG2eyoPkvgUhX+nDIyelzhIWbbsXP39EHcI6l5tYs2FYqYXQ=="
     },
     "node_modules/http-proxy-agent": {
       "version": "5.0.0",
@@ -2581,7 +2673,6 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/http2-wrapper/-/http2-wrapper-1.0.3.tgz",
       "integrity": "sha512-V+23sDMr12Wnz7iTcDeJr3O6AIxlnvT/bmaAAAP/Xda35C90p9599p0F1eHR/N1KILWSoWVAiOMFjBBXaXSMxg==",
-      "dev": true,
       "dependencies": {
         "quick-lru": "^5.1.1",
         "resolve-alpn": "^1.0.0"
@@ -2748,6 +2839,13 @@
         "node": ">=0.12.0"
       }
     },
+    "node_modules/isarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
+      "dev": true,
+      "peer": true
+    },
     "node_modules/isbinaryfile": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/isbinaryfile/-/isbinaryfile-5.0.2.tgz",
@@ -2843,8 +2941,7 @@
     "node_modules/json-buffer": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
-      "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
-      "dev": true
+      "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ=="
     },
     "node_modules/json-schema-traverse": {
       "version": "0.4.1",
@@ -2856,7 +2953,6 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
       "integrity": "sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA==",
-      "dev": true,
       "optional": true
     },
     "node_modules/json5": {
@@ -2886,37 +2982,125 @@
       "version": "4.5.2",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.2.tgz",
       "integrity": "sha512-5MHbFaKn8cNSmVW7BYnijeAVlE4cYA/SVkifVgrh7yotnfhKmjuXpDKjrABLnT0SfHWV21P8ow07OGfRrNDg8g==",
-      "dev": true,
       "dependencies": {
         "json-buffer": "3.0.1"
       }
     },
+    "node_modules/kysely": {
+      "version": "0.27.3",
+      "resolved": "https://registry.npmjs.org/kysely/-/kysely-0.27.3.tgz",
+      "integrity": "sha512-lG03Ru+XyOJFsjH3OMY6R/9U38IjDPfnOfDgO3ynhbDr+Dz8fak+X6L62vqu3iybQnj+lG84OttBuU9KY3L9kA==",
+      "dev": true,
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/lazy-val": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/lazy-val/-/lazy-val-1.0.5.tgz",
       "integrity": "sha512-0/BnGCCfyUMkBpeDgWihanIAF9JmZhHBgUhEqzvf+adhNGLoP6TaiI5oF8oyb3I45P+PcnrqihSf01M0l0G5+Q=="
     },
+    "node_modules/lazystream": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/lazystream/-/lazystream-1.0.1.tgz",
+      "integrity": "sha512-b94GiNHQNy6JNTrt5w6zNyffMrNkXZb3KTkCZJb2V1xaEGCk093vkZ2jk3tpaeP33/OiXC+WvK9AxUebnf5nbw==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "readable-stream": "^2.0.5"
+      },
+      "engines": {
+        "node": ">= 0.6.3"
+      }
+    },
+    "node_modules/lazystream/node_modules/readable-stream": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
+      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
+    "node_modules/lazystream/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+      "dev": true,
+      "peer": true
+    },
+    "node_modules/lazystream/node_modules/string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
     "node_modules/lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
       "dev": true
     },
+    "node_modules/lodash.defaults": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/lodash.defaults/-/lodash.defaults-4.2.0.tgz",
+      "integrity": "sha512-qjxPLHd3r5DnsdGacqOMU6pb/avJzdh9tFX2ymgoZE27BmjXrNy/y4LoaiTeAb+O3gL8AfpJGtqfX/ae2leYYQ==",
+      "dev": true,
+      "peer": true
+    },
+    "node_modules/lodash.difference": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.difference/-/lodash.difference-4.5.0.tgz",
+      "integrity": "sha512-dS2j+W26TQ7taQBGN8Lbbq04ssV3emRw4NY58WErlTO29pIqS0HmoT5aJ9+TUQ1N3G+JOZSji4eugsWwGp9yPA==",
+      "dev": true,
+      "peer": true
+    },
     "node_modules/lodash.escaperegexp": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/lodash.escaperegexp/-/lodash.escaperegexp-4.1.2.tgz",
       "integrity": "sha512-TM9YBvyC84ZxE3rgfefxUWiQKLilstD6k7PTGt6wfbtXF8ixIJLOL3VYyV/z+ZiPLsVxAsKAFVwWlWeb2Y8Yyw=="
     },
+    "node_modules/lodash.flatten": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/lodash.flatten/-/lodash.flatten-4.4.0.tgz",
+      "integrity": "sha512-C5N2Z3DgnnKr0LOpv/hKCgKdb7ZZwafIrsesve6lmzvZIRZRGaZ/l6Q8+2W7NaT+ZwO3fFlSCzCzrDCFdJfZ4g==",
+      "dev": true,
+      "peer": true
+    },
     "node_modules/lodash.isequal": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
       "integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ=="
     },
+    "node_modules/lodash.isplainobject": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
+      "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==",
+      "dev": true,
+      "peer": true
+    },
+    "node_modules/lodash.union": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/lodash.union/-/lodash.union-4.6.0.tgz",
+      "integrity": "sha512-c4pB2CdGrGdjMKYLA+XiRDO7Y0PRQbm/Gzg8qMj+QH+pFVAoTp5sBpO0odL3FjoPCGjK96p6qsP+yQoiLoOBcw==",
+      "dev": true,
+      "peer": true
+    },
     "node_modules/lowercase-keys": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-2.0.0.tgz",
       "integrity": "sha512-tqNXrS78oMOE73NMxK4EMLQsQowWf8jKooH9g7xPavRT706R6bkQJ6DY2Te7QukaZsulxa30wQ7bk0pm4XiHmA==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -2936,7 +3120,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/matcher/-/matcher-3.0.0.tgz",
       "integrity": "sha512-OkeDaAZ/bQCxeFAozM55PKcKU0yJMPGifLwV4Qgjitu+5MoAfSQN4lsLJeXZ1b8w0x+/Emda6MZgXS1jvsapng==",
-      "dev": true,
       "optional": true,
       "dependencies": {
         "escape-string-regexp": "^4.0.0"
@@ -2982,7 +3165,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-1.0.1.tgz",
       "integrity": "sha512-j5EctnkH7amfV/q5Hgmoal1g2QHFJRraOtmx0JpIqkxhBhI/lJSl1nMpQ45hVarwNETOoWEimndZ4QK0RHxuxQ==",
-      "dev": true,
       "engines": {
         "node": ">=4"
       }
@@ -3108,7 +3290,6 @@
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-6.1.0.tgz",
       "integrity": "sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A==",
-      "dev": true,
       "engines": {
         "node": ">=10"
       },
@@ -3132,7 +3313,6 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
       "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
-      "dev": true,
       "optional": true,
       "engines": {
         "node": ">= 0.4"
@@ -3150,7 +3330,6 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/p-cancelable/-/p-cancelable-2.1.1.tgz",
       "integrity": "sha512-BZOr3nRQHOntUjTrH8+Lh54smKHoHyur8We1V8DSMVrl5A2malOOwuJRnKRDjSnkoeBh4at6BwEnb5I7Jl31wg==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -3213,8 +3392,7 @@
     "node_modules/pend": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz",
-      "integrity": "sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg==",
-      "dev": true
+      "integrity": "sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg=="
     },
     "node_modules/picomatch": {
       "version": "2.3.1",
@@ -3291,11 +3469,17 @@
         "prebuildify": "bin.js"
       }
     },
+    "node_modules/process-nextick-args": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
+      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
+      "dev": true,
+      "peer": true
+    },
     "node_modules/progress": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz",
       "integrity": "sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==",
-      "dev": true,
       "engines": {
         "node": ">=0.4.0"
       }
@@ -3335,7 +3519,6 @@
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz",
       "integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==",
-      "dev": true,
       "engines": {
         "node": ">=10"
       },
@@ -3402,6 +3585,16 @@
         "url": "https://github.com/sponsors/Borewit"
       }
     },
+    "node_modules/readdir-glob": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/readdir-glob/-/readdir-glob-1.1.3.tgz",
+      "integrity": "sha512-v05I2k7xN8zXvPD9N+z/uhXPaj0sUFCe2rcWZIpBsqxfP7xXFQ0tipAd/wjj1YxWyWtUS5IDJpOG82JKt2EAVA==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "minimatch": "^5.1.0"
+      }
+    },
     "node_modules/readdirp": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
@@ -3425,14 +3618,12 @@
     "node_modules/resolve-alpn": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/resolve-alpn/-/resolve-alpn-1.2.1.tgz",
-      "integrity": "sha512-0a1F4l73/ZFZOakJnQ3FvkJ2+gSTQWz/r2KE5OdDY0TxPm5h4GkqkWWfM47T7HsbnOtcJVEF4epCVy6u7Q3K+g==",
-      "dev": true
+      "integrity": "sha512-0a1F4l73/ZFZOakJnQ3FvkJ2+gSTQWz/r2KE5OdDY0TxPm5h4GkqkWWfM47T7HsbnOtcJVEF4epCVy6u7Q3K+g=="
     },
     "node_modules/responselike": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/responselike/-/responselike-2.0.1.tgz",
       "integrity": "sha512-4gl03wn3hj1HP3yzgdI7d3lCkF95F21Pz4BPGvKHinyQzALR5CapwC8yIi0Rh58DEMQ/SguC03wFj2k0M/mHhw==",
-      "dev": true,
       "dependencies": {
         "lowercase-keys": "^2.0.0"
       },
@@ -3453,7 +3644,6 @@
       "version": "2.15.4",
       "resolved": "https://registry.npmjs.org/roarr/-/roarr-2.15.4.tgz",
       "integrity": "sha512-CHhPh+UNHD2GTXNYhPWLnU8ONHdI+5DI+4EYIAOaiD63rHeYlZvyh8P+in5999TTSFgUYuKUAjzRI4mdh/p+2A==",
-      "dev": true,
       "optional": true,
       "dependencies": {
         "boolean": "^3.0.1",
@@ -3533,14 +3723,12 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/semver-compare/-/semver-compare-1.0.0.tgz",
       "integrity": "sha512-YM3/ITh2MJ5MtzaM429anh+x2jiLVjqILF4m4oyQB18W7Ggea7BfqdH/wGMK7dDiMghv/6WG7znWMwUDzJiXow==",
-      "dev": true,
       "optional": true
     },
     "node_modules/serialize-error": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/serialize-error/-/serialize-error-7.0.1.tgz",
       "integrity": "sha512-8I8TjW5KMOKsZQTvoxjuSIa7foAwPWGOts+6o7sgjz41/qMD9VQHEDxi6PBvK2l0MXUmqZyNpUK+T2tQaaElvw==",
-      "dev": true,
       "optional": true,
       "dependencies": {
         "type-fest": "^0.13.1"
@@ -3556,7 +3744,6 @@
       "version": "0.13.1",
       "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.13.1.tgz",
       "integrity": "sha512-34R7HTnG0XIJcBSn5XhDd7nNFPRcXYRZrBB2O2jdKqYODldSzBAqzsWoZYYvduky73toYS/ESqxPvkDf/F0XMg==",
-      "dev": true,
       "optional": true,
       "engines": {
         "node": ">=10"
@@ -3709,7 +3896,6 @@
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.1.3.tgz",
       "integrity": "sha512-Oo+0REFV59/rz3gfJNKQiBlwfHaSESl1pcGyABQsnnIfWOFt6JNj5gCog2U6MLZ//IGYD+nA8nI+mTShREReaA==",
-      "dev": true,
       "optional": true
     },
     "node_modules/stat-mode": {
@@ -3809,7 +3995,6 @@
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/sumchecker/-/sumchecker-3.0.1.tgz",
       "integrity": "sha512-MvjXzkz/BOfyVDkG0oFOtBxHX2u3gKbMHIF/dXblZsgD3BWOFLmHovIpZY7BykJdAjcqRCBi1WYBNdEC9yI7vg==",
-      "dev": true,
       "dependencies": {
         "debug": "^4.1.0"
       },
@@ -4011,8 +4196,7 @@
     "node_modules/undici-types": {
       "version": "5.26.5",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
-      "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
-      "dev": true
+      "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA=="
     },
     "node_modules/universalify": {
       "version": "2.0.0",
@@ -4161,12 +4345,48 @@
       "version": "2.10.0",
       "resolved": "https://registry.npmjs.org/yauzl/-/yauzl-2.10.0.tgz",
       "integrity": "sha512-p4a9I6X6nu6IhoGmBqAcbJy1mlC4j27vEPZX9F4L4/vZT3Lyq1VkFHw/V/PUcB9Buo+DG3iHkT0x3Qya58zc3g==",
-      "dev": true,
       "dependencies": {
         "buffer-crc32": "~0.2.3",
         "fd-slicer": "~1.1.0"
       }
     },
+    "node_modules/zip-stream": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/zip-stream/-/zip-stream-4.1.1.tgz",
+      "integrity": "sha512-9qv4rlDiopXg4E69k+vMHjNN63YFMe9sZMrdlvKnCjlCRWeCBswPPMPUfx+ipsAWq1LXHe70RcbaHdJJpS6hyQ==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "archiver-utils": "^3.0.4",
+        "compress-commons": "^4.1.2",
+        "readable-stream": "^3.6.0"
+      },
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/zip-stream/node_modules/archiver-utils": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/archiver-utils/-/archiver-utils-3.0.4.tgz",
+      "integrity": "sha512-KVgf4XQVrTjhyWmx6cte4RxonPLR9onExufI1jhvw/MQ4BB6IsZD5gT8Lq+u/+pRkWna/6JoHpiQioaqFP5Rzw==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "glob": "^7.2.3",
+        "graceful-fs": "^4.2.0",
+        "lazystream": "^1.0.0",
+        "lodash.defaults": "^4.2.0",
+        "lodash.difference": "^4.5.0",
+        "lodash.flatten": "^4.4.0",
+        "lodash.isplainobject": "^4.0.6",
+        "lodash.union": "^4.6.0",
+        "normalize-path": "^3.0.0",
+        "readable-stream": "^3.6.0"
+      },
+      "engines": {
+        "node": ">= 10"
+      }
+    },
     "node_modules/zod": {
       "version": "3.21.4",
       "resolved": "https://registry.npmjs.org/zod/-/zod-3.21.4.tgz",

apps/desktop/package.json

@@ -2,7 +2,7 @@
   "name": "@notesnook/desktop",
   "productName": "Notesnook",
   "description": "Your private note taking space",
-  "version": "3.0.4",
+  "version": "3.0.8",
   "appAppleId": "1544027013",
   "private": true,
   "main": "./dist/index.js",
@@ -30,6 +30,7 @@
     "electron": "^29.3.1",
     "electron-builder": "^24.13.3",
     "esbuild": "^0.20.0",
+    "kysely": "^0.27.3",
     "node-gyp-build": "^4.8.0",
     "prebuildify": "^6.0.1",
     "tree-kill": "^1.2.2",

apps/desktop/src/api/os-integration.ts

@@ -19,7 +19,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import { initTRPC } from "@trpc/server";
 import { z } from "zod";
-import { dialog, nativeTheme, Notification, shell } from "electron";
+import { app, dialog, nativeTheme, Notification, shell } from "electron";
 import { AutoLaunch } from "../utils/autolaunch";
 import { config, DesktopIntegration } from "../utils/config";
 import { bringToFront } from "../utils/bring-to-front";
@@ -152,6 +152,10 @@ export const osIntegrationRouter = t.router({
     await rm(input);
   }),
 
+  restart: t.procedure.query(() => {
+    app.relaunch();
+    app.exit();
+  }),
   showNotification: t.procedure
     .input(NotificationOptions)
     .query(({ input }) => {
@@ -191,7 +195,10 @@ export const osIntegrationRouter = t.router({
       ({ input: { theme, windowControlsIconColor, backgroundColor } }) => {
         if (windowControlsIconColor) {
           config.windowControlsIconColor = windowControlsIconColor;
-          if (process.platform === "win32")
+          if (
+            process.platform === "win32" &&
+            !config.desktopSettings.nativeTitlebar
+          )
             globalThis.window?.setTitleBarOverlay({
               symbolColor: windowControlsIconColor
             });

apps/desktop/src/api/sqlite-kysely.ts

@@ -0,0 +1,143 @@
+/*
+This file is part of the Notesnook project (https://notesnook.com/)
+
+Copyright (C) 2023 Streetwriters (Private) Limited
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+import type { Database, Statement } from "better-sqlite3-multiple-ciphers";
+import type { QueryResult } from "kysely";
+
+type SQLiteCompatibleType =
+  | number
+  | string
+  | Uint8Array
+  | Array<number>
+  | bigint
+  | null;
+
+export class SQLite {
+  sqlite?: Database;
+  initialized = false;
+  preparedStatements: Map<string, Statement<unknown[]>> = new Map();
+  retryCounter: Record<string, number> = {};
+  constructor() {
+    console.log("new sqlite worker");
+  }
+
+  async open(filePath: string) {
+    if (this.sqlite) {
+      console.error("Database is already initialized");
+      return;
+    }
+
+    this.sqlite = require("better-sqlite3-multiple-ciphers")(
+      filePath
+    ).unsafeMode(true);
+  }
+
+  /**
+   * Wrapper function for preparing SQL statements with caching
+   * to avoid unnecessary computations.
+   */
+  async prepare(sql: string): Promise<Statement | undefined> {
+    if (!this.sqlite) throw new Error("Database is not initialized.");
+    try {
+      const cached = this.preparedStatements.get(sql);
+      if (cached !== undefined) return cached;
+
+      const prepared = this.sqlite.prepare(sql);
+      if (!prepared) return;
+
+      this.preparedStatements.set(sql, prepared);
+
+      // reset retry count on success
+      this.retryCounter[sql] = 0;
+      return prepared;
+    } catch (ex) {
+      console.error(ex);
+
+      // statement prepare process can be flaky so retry at least 5 times
+      // before giving up.
+      if (this.retryCounter[sql] < 5) {
+        this.retryCounter[sql] = (this.retryCounter[sql] || 0) + 1;
+        console.warn("Failed to prepare statement. Retrying:", sql);
+        return this.prepare(sql);
+      } else this.retryCounter[sql] = 0;
+
+      if (ex instanceof Error) ex.message += ` (query: ${sql})`;
+      throw ex;
+    }
+  }
+
+  async exec<R>(
+    sql: string,
+    parameters: SQLiteCompatibleType[] = []
+  ): Promise<QueryResult<R>> {
+    const prepared = await this.prepare(sql);
+    if (!prepared) return { rows: [] };
+    try {
+      if (prepared.reader) {
+        return {
+          rows: prepared.all(parameters) as R[]
+        };
+      } else {
+        const { changes, lastInsertRowid } = prepared.run(parameters);
+        const numAffectedRows =
+          changes !== undefined && changes !== null && !isNaN(changes)
+            ? BigInt(changes)
+            : undefined;
+        return {
+          numAffectedRows,
+          insertId:
+            lastInsertRowid !== undefined && lastInsertRowid !== null
+              ? typeof lastInsertRowid === "bigint"
+                ? lastInsertRowid
+                : BigInt(lastInsertRowid)
+              : undefined,
+          rows: [] as R[]
+        };
+      }
+    } catch (e) {
+      if (e instanceof Error) e.message += ` (query: ${sql})`;
+      throw e;
+    }
+  }
+
+  async run<R>(
+    sql: string,
+    parameters?: SQLiteCompatibleType[]
+  ): Promise<QueryResult<R>> {
+    if (!this.sqlite) throw new Error("No database is not opened.");
+    return await this.exec(sql, parameters);
+  }
+
+  async close() {
+    if (!this.sqlite) return;
+
+    this.preparedStatements.clear();
+    this.sqlite.close();
+    this.sqlite = undefined;
+  }
+
+  async delete(filePath: string) {
+    await this.close();
+    await require("fs/promises").rm(filePath, {
+      force: true,
+      maxRetries: 5,
+      retryDelay: 500
+    });
+  }
+}

apps/desktop/src/index.ts

@@ -21,3 +21,4 @@ export * from "./constants";
 export type { AppRouter } from "./api";
 export { type UpdateInfo } from "builder-util-runtime";
 export { type DesktopIntegration } from "./utils/config";
+export { SQLite } from "./api/sqlite-kysely.js";

apps/desktop/src/main.ts

@@ -84,22 +84,27 @@ async function createWindow() {
       format: process.platform === "win32" ? "ico" : "png"
     }),
 
-    titleBarStyle: "hidden",
-    frame: process.platform === "win32" || process.platform === "darwin",
-    titleBarOverlay: {
-      height: 37,
-      color: "#00000000",
-      symbolColor: config.windowControlsIconColor
-    },
-    trafficLightPosition: {
-      x: 16,
-      y: 12
-    },
+    ...(config.desktopSettings.nativeTitlebar
+      ? {}
+      : {
+          titleBarStyle: "hidden",
+          frame: process.platform === "win32" || process.platform === "darwin",
+          titleBarOverlay: {
+            height: 37,
+            color: "#00000000",
+            symbolColor: config.windowControlsIconColor
+          },
+          trafficLightPosition: {
+            x: 16,
+            y: 12
+          }
+        }),
 
     webPreferences: {
       zoomFactor: config.zoomFactor,
       nodeIntegration: true,
       contextIsolation: false,
+      nodeIntegrationInWorker: true,
       spellcheck: config.isSpellCheckerEnabled,
       preload: __dirname + "/preload.js"
     }

apps/desktop/src/preload.ts

@@ -23,13 +23,11 @@ import { type RendererGlobalElectronTRPC } from "electron-trpc/src/types";
 import type { NNCrypto } from "@notesnook/crypto";
 import { ipcRenderer } from "electron";
 import { platform } from "os";
-import sqlite3, { Database } from "better-sqlite3-multiple-ciphers";
 
 declare global {
   var os: () => "mas" | ReturnType<typeof platform>;
   var electronTRPC: RendererGlobalElectronTRPC;
   var NativeNNCrypto: (new () => NNCrypto) | undefined;
-  var createSQLite3Database: (filename: string) => Database;
 }
 
 process.once("loaded", async () => {
@@ -43,5 +41,4 @@ process.once("loaded", async () => {
 });
 
 globalThis.NativeNNCrypto = require("@notesnook/crypto").NNCrypto;
-globalThis.createSQLite3Database = (filename) => sqlite3(filename);
 globalThis.os = () => (MAC_APP_STORE ? "mas" : platform());

apps/desktop/src/utils/config.ts

@@ -25,7 +25,8 @@ export const DesktopIntegration = z.object({
   autoStart: z.boolean().optional(),
   startMinimized: z.boolean().optional(),
   minimizeToSystemTray: z.boolean().optional(),
-  closeToSystemTray: z.boolean().optional()
+  closeToSystemTray: z.boolean().optional(),
+  nativeTitlebar: z.boolean().optional()
 });
 
 export type DesktopIntegration = z.infer<typeof DesktopIntegration>;
@@ -35,7 +36,8 @@ export const config = {
     autoStart: false,
     startMinimized: false,
     minimizeToSystemTray: false,
-    closeToSystemTray: false
+    closeToSystemTray: false,
+    nativeTitlebar: false
   },
   privacyMode: false,
   isSpellCheckerEnabled: true,

apps/mobile/app/app.tsx

@@ -16,15 +16,16 @@ GNU General Public License for more details.
 You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
-import "react-native-gesture-handler";
 import {
   THEME_COMPATIBILITY_VERSION,
   useThemeEngineStore
 } from "@notesnook/theme";
 import React, { useEffect } from "react";
 import { I18nManager, View } from "react-native";
+import "react-native-gesture-handler";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
 import { SafeAreaProvider } from "react-native-safe-area-context";
+import { initializeLogger } from "./common/database/logger";
 import AppLockedOverlay from "./components/app-lock-overlay";
 import { withErrorBoundry } from "./components/exception-handler";
 import GlobalSafeAreaProvider from "./components/globalsafearea";
@@ -44,23 +45,28 @@ I18nManager.swapLeftAndRightInRTL(false);
 const App = () => {
   const init = useAppEvents();
   useEffect(() => {
-    const { appLockEnabled, appLockMode } = SettingsService.get();
-    if (appLockEnabled || appLockMode !== "none") {
-      useUserStore.getState().lockApp(true);
-    }
-
-    //@ts-ignore
-    globalThis["IS_MAIN_APP_RUNNING"] = true;
-    init();
-    setTimeout(async () => {
-      SettingsService.onFirstLaunch();
-      await Notifications.get();
-      if (SettingsService.get().notifNotes) {
-        Notifications.pinQuickNote(true);
-      }
-      TipManager.init();
-    }, 100);
+    initializeLogger()
+      .catch((e) => {
+        console.log(e);
+      })
+      .finally(() => {
+        const { appLockEnabled, appLockMode } = SettingsService.get();
+        if (appLockEnabled || appLockMode !== "none") {
+          useUserStore.getState().lockApp(true);
+        }
 
+        //@ts-ignore
+        globalThis["IS_MAIN_APP_RUNNING"] = true;
+        init();
+        setTimeout(async () => {
+          SettingsService.onFirstLaunch();
+          await Notifications.get();
+          if (SettingsService.get().notifNotes) {
+            Notifications.pinQuickNote(true);
+          }
+          TipManager.init();
+        }, 100);
+      });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 

apps/mobile/app/common/database/encryption.js

@@ -25,6 +25,7 @@ import { MMKVLoader, ProcessingModes } from "react-native-mmkv-storage";
 import { generateSecureRandom } from "react-native-securerandom";
 import { DatabaseLogger } from ".";
 import { MMKV } from "./mmkv";
+import { ToastManager } from "../../services/event-manager";
 
 // Database key cipher is persisted across different user sessions hence it has
 // it's independent storage which we will never clear. This is only used when application has
@@ -43,9 +44,8 @@ const IOS_KEYCHAIN_ACCESS_GROUP = "group.org.streetwriters.notesnook";
 const IOS_KEYCHAIN_SERVICE_NAME = "org.streetwriters.notesnook";
 const KEYCHAIN_SERVER_DBKEY = "notesnook:db";
 
-const NOTESNOOK_APPLOCK_KEY_SALT = "3dqclWbOYllfk9kk";
-const NOTESNOOK_DB_KEY_SALT = "2rcgSprDmRvZ1AAa";
-const NOTESNOOK_USER_KEY_SALT = "7qO4qeoM6PbsAJ0Q";
+const NOTESNOOK_APPLOCK_KEY_SALT = "kBwr1Kre86ebOZ8ThLu2OA";
+const NOTESNOOK_DB_KEY_SALT = "SNuzOcEK3amoqL0WvPeKqw";
 
 const DB_KEY_CIPHER = "databaseKeyCipher";
 const USER_KEY_CIPHER = "userKeyCipher";
@@ -117,9 +117,7 @@ export async function setAppLockVerificationCipher(appLockPassword) {
       NOTESNOOK_APPLOCK_KEY_SALT
     );
     const encrypted = await encrypt(appLockCredentials, generatePassword());
-
     CipherStorage.setMap(APPLOCK_CIPHER, encrypted);
-
     DatabaseLogger.info("setAppLockVerificationCipher");
   } catch (e) {
     DatabaseLogger.error(e);
@@ -135,10 +133,8 @@ export async function validateAppLockPassword(appLockPassword) {
   try {
     const appLockCipher = CipherStorage.getMap(APPLOCK_CIPHER);
     if (!appLockCipher) return true;
-    const decrypted = await decrypt(
-      await Sodium.deriveKey(appLockPassword, NOTESNOOK_APPLOCK_KEY_SALT),
-      appLockCipher
-    );
+    const key = await Sodium.deriveKey(appLockPassword, appLockCipher.salt);
+    const decrypted = await decrypt(key, appLockCipher);
 
     DatabaseLogger.info(
       `validateAppLockPassword: ${typeof decrypted === "string"}`
@@ -214,7 +210,7 @@ export async function getDatabaseKey(appLockPassword) {
         const userKeyCipher = await encrypt(
           {
             key: DB_KEY,
-            salt: NOTESNOOK_USER_KEY_SALT
+            salt: NOTESNOOK_DB_KEY_SALT
           },
           userKeyCredentials.password
         );
@@ -227,6 +223,7 @@ export async function getDatabaseKey(appLockPassword) {
 
     return DB_KEY;
   } catch (e) {
+    ToastManager.error(e, "Error getting database key");
     console.log(e, "error");
     DatabaseLogger.error(e);
     return null;
@@ -239,7 +236,7 @@ export async function deriveCryptoKey(data) {
     const userKeyCipher = await encrypt(
       {
         key: await getDatabaseKey(),
-        salt: NOTESNOOK_USER_KEY_SALT
+        salt: NOTESNOOK_DB_KEY_SALT
       },
       credentials.key
     );
@@ -264,13 +261,12 @@ export async function getCryptoKey(_name) {
 
     const key = await decrypt(
       {
-        key: await getDatabaseKey()
+        key: await getDatabaseKey(),
+        salt: keyCipher.salt
       },
       keyCipher
     );
 
-    DatabaseLogger.info("User key decrypted: ", !!key);
-
     return key;
   } catch (e) {
     console.log("getCryptoKey", e);

apps/mobile/app/common/database/index.js

@@ -85,4 +85,10 @@ export async function setupDatabase(password) {
 }
 
 export const db = database;
-export const DatabaseLogger = dbLogger;
+let DatabaseLogger = dbLogger.scope(Platform.OS);
+
+const setLogger = () => {
+  DatabaseLogger = dbLogger.scope(Platform.OS);
+};
+
+export { DatabaseLogger, setLogger };

apps/mobile/app/common/database/logger.js

@@ -16,14 +16,27 @@ GNU General Public License for more details.
 You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
-import { MMKVLoader } from "react-native-mmkv-storage";
+
 import { initialize } from "@notesnook/core/dist/logger";
-import { KV } from "./storage";
+import { SqliteAdapter, SqliteIntrospector, SqliteQueryCompiler } from "kysely";
+import { Platform } from "react-native";
+import { setLogger } from ".";
+import { RNSqliteDriver } from "./sqlite.kysely";
 
-const LoggerStorage = new MMKVLoader()
-  .withInstanceID("notesnook_logs")
-  .initialize();
+const initializeLogger = async () => {
+  await initialize({
+    dialect: (name) => ({
+      createDriver: () => {
+        return new RNSqliteDriver({ async: true, dbName: name });
+      },
+      createAdapter: () => new SqliteAdapter(),
+      createIntrospector: (db) => new SqliteIntrospector(db),
+      createQueryCompiler: () => new SqliteQueryCompiler()
+    }),
+    tempStore: "memory",
+    journalMode: Platform.OS === "ios" ? "DELETE" : "WAL"
+  });
+  setLogger();
+};
 
-initialize(new KV(LoggerStorage));
-
-export { LoggerStorage };
+export { initializeLogger };

apps/mobile/app/components/app-lock-overlay/index.tsx

@@ -21,7 +21,6 @@ import React, { useCallback, useEffect, useRef } from "react";
 import { AppStateStatus, Platform, TextInput, View } from "react-native";
 //@ts-ignore
 import { useThemeColors } from "@notesnook/theme";
-import { enabled } from "react-native-privacy-snapshot";
 import { DatabaseLogger } from "../../common/database";
 import {
   decrypt,
@@ -34,11 +33,13 @@ import {
 import { MMKV } from "../../common/database/mmkv";
 import { useAppState } from "../../hooks/use-app-state";
 import BiometricService from "../../services/biometrics";
+import { ToastManager } from "../../services/event-manager";
 import SettingsService from "../../services/settings";
 import { useSettingStore } from "../../stores/use-setting-store";
 import { useUserStore } from "../../stores/use-user-store";
 import { NotesnookModule } from "../../utils/notesnook-module";
 import { SIZE } from "../../utils/size";
+import { Toast } from "../toast";
 import { Button } from "../ui/button";
 import { IconButton } from "../ui/icon-button";
 import Input from "../ui/input";
@@ -119,7 +120,6 @@ const AppLockedOverlay = () => {
     );
     if (unlocked) {
       lockApp(false);
-      enabled(false);
       password.current = undefined;
     }
     biometricUnlockAwaitingUserInput.current = false;
@@ -146,8 +146,13 @@ const AppLockedOverlay = () => {
         }
 
         lockApp(false);
-        enabled(false);
         password.current = undefined;
+      } else {
+        ToastManager.show({
+          heading: `Invalid ${keyboardType === "numeric" ? "pin" : "password"}`,
+          type: "error",
+          context: "local"
+        });
       }
     } catch (e) {
       console.error(e);
@@ -155,10 +160,6 @@ const AppLockedOverlay = () => {
   };
 
   useEffect(() => {
-    if (appState === "active") {
-      enabled(false);
-    }
-
     const prevState = lastAppState.current;
     lastAppState.current = appState;
 
@@ -184,17 +185,8 @@ const AppLockedOverlay = () => {
         DatabaseLogger.info("Biometric unlock request");
         onUnlockAppRequested();
       }
-
-      enabled(false);
     } else {
       SettingsService.appEnteredBackground();
-
-      if (
-        SettingsService.get().privacyScreen ||
-        SettingsService.getProperty("appLockEnabled")
-      ) {
-        enabled(true);
-      }
     }
   }, [appState, onUnlockAppRequested, appLocked]);
 
@@ -209,6 +201,7 @@ const AppLockedOverlay = () => {
         justifyContent: "center"
       }}
     >
+      <Toast context="local" />
       <View
         style={{
           flex: 1,

apps/mobile/app/components/attachments/index.tsx

@@ -355,6 +355,7 @@ export const AttachmentDialog = ({ note }: { note?: Note }) => {
 
 AttachmentDialog.present = (note?: Note) => {
   presentSheet({
-    component: () => <AttachmentDialog note={note} />
+    component: () => <AttachmentDialog note={note} />,
+    keyboardHandlerDisabled: true
   });
 };

apps/mobile/app/components/auth/login.js

@@ -17,12 +17,16 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
+import { useThemeColors } from "@notesnook/theme";
 import React, { useEffect, useState } from "react";
 import { TouchableOpacity, View, useWindowDimensions } from "react-native";
 import { SheetManager } from "react-native-actions-sheet";
 import { DDS } from "../../services/device-detection";
 import { eSendEvent } from "../../services/event-manager";
-import { useThemeColors } from "@notesnook/theme";
+import Sync from "../../services/sync";
+import { useSettingStore } from "../../stores/use-setting-store";
+import { useUserStore } from "../../stores/use-user-store";
+import { eUserLoggedIn } from "../../utils/events";
 import { SIZE } from "../../utils/size";
 import { sleep } from "../../utils/time";
 import SheetProvider from "../sheet-provider";
@@ -34,11 +38,6 @@ import Paragraph from "../ui/typography/paragraph";
 import { hideAuth } from "./common";
 import { ForgotPassword } from "./forgot-password";
 import { useLogin } from "./use-login";
-import { useSettingStore } from "../../stores/use-setting-store";
-import { eUserLoggedIn } from "../../utils/events";
-import { useUserStore } from "../../stores/use-user-store";
-import Sync from "../../services/sync";
-import { Notice } from "../ui/notice";
 
 const LoginSteps = {
   emailAuth: 1,
@@ -184,7 +183,11 @@ export const Login = ({ changeMode }) => {
             defaultValue={email.current}
             editable={step === LoginSteps.emailAuth && !loading}
             onSubmit={() => {
-              passwordInputRef.current?.focus();
+              if (step === LoginSteps.emailAuth) {
+                login();
+              } else {
+                passwordInputRef.current?.focus();
+              }
             }}
           />
 
@@ -243,6 +246,7 @@ export const Login = ({ changeMode }) => {
                 width: 250,
                 borderRadius: 100
               }}
+              height={50}
               fontSize={SIZE.md}
               type="accent"
               title={!loading ? "Continue" : null}

apps/mobile/app/components/auth/session-expired.js

@@ -112,6 +112,10 @@ export const SessionExpired = () => {
       if (!res) throw new Error("no token found");
       if (db.tokenManager._isTokenExpired(res))
         throw new Error("token expired");
+
+      const key = await db.user.getEncryptionKey();
+      if (!key) throw new Error("No encryption key found.");
+
       Sync.run("global", false, "full", async (complete) => {
         if (!complete) {
           let user = await db.user.getUser();
@@ -127,7 +131,6 @@ export const SessionExpired = () => {
         setVisible(false);
       });
     } catch (e) {
-      console.log(e);
       let user = await db.user.getUser();
       if (!user) return;
       email.current = user.email;

apps/mobile/app/components/auth/two-factor.js

@@ -37,6 +37,7 @@ import Seperator from "../ui/seperator";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 import { useCallback } from "react";
+import { ScrollView } from "react-native-actions-sheet";
 
 const TwoFactorVerification = ({ onMfaLogin, mfaInfo }) => {
   const { colors } = useThemeColors();
@@ -143,7 +144,10 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo }) => {
   }, [currentMethod.method, mfaInfo.token, seconds, sending, start]);
 
   return (
-    <View>
+    <ScrollView
+      keyboardShouldPersistTaps="handled"
+      keyboardDismissMode="interactive"
+    >
       <View
         style={{
           alignItems: "center",
@@ -214,6 +218,7 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo }) => {
                 code.current = value;
                 //onNext();
               }}
+              onSubmitEditing={onNext}
               caretHidden
               inputStyle={{
                 fontSize: SIZE.lg,
@@ -225,6 +230,7 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo }) => {
               keyboardType={
                 currentMethod.method === "recoveryCode" ? "default" : "numeric"
               }
+              enablesReturnKeyAutomatically
               containerStyle={{
                 height: 60,
                 borderWidth: 0,
@@ -297,7 +303,7 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo }) => {
           </>
         )}
       </View>
-    </View>
+    </ScrollView>
   );
 };
 

apps/mobile/app/components/dialog/functions.ts

@@ -44,6 +44,7 @@ type DialogInfo = {
   // eslint-disable-next-line @typescript-eslint/ban-types
   context: "global" | "local" | (string & {});
   secureTextEntry?: boolean;
+  keyboardType?: string;
 };
 
 export function presentDialog(data: Partial<DialogInfo>): void {

apps/mobile/app/components/dialog/index.js

@@ -174,6 +174,7 @@ export const Dialog = ({ context = "global" }) => {
               onSubmit={onPressPositive}
               returnKeyLabel="Done"
               returnKeyType="done"
+              keyboardType={dialogInfo.keyboardType || "default"}
               placeholder={dialogInfo.inputPlaceholder}
             />
           </View>

apps/mobile/app/components/dialogs/applock-password/index.tsx

@@ -19,6 +19,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import { useThemeColors } from "@notesnook/theme";
 import React, { useEffect, useRef, useState } from "react";
 import { TextInput, View } from "react-native";
+import { db } from "../../../common/database";
 import {
   clearAppLockVerificationCipher,
   setAppLockVerificationCipher,
@@ -44,6 +45,7 @@ import BaseDialog from "../../dialog/base-dialog";
 import DialogButtons from "../../dialog/dialog-buttons";
 import DialogHeader from "../../dialog/dialog-header";
 import { Toast } from "../../toast";
+import { Button } from "../../ui/button";
 import { IconButton } from "../../ui/icon-button";
 import Input from "../../ui/input";
 import Seperator from "../../ui/seperator";
@@ -66,6 +68,7 @@ export const AppLockPassword = () => {
     confirmPassword?: string;
   }>({});
   const [secureTextEntry, setSecureTextEntry] = useState(true);
+  const [accountPass, setAccountPass] = useState(false);
 
   useEffect(() => {
     const subs = [
@@ -73,6 +76,7 @@ export const AppLockPassword = () => {
         eOpenAppLockPasswordDialog,
         (mode: "create" | "change" | "remove") => {
           setMode(mode);
+          setAccountPass(false);
           setVisible(true);
         }
       ),
@@ -126,7 +130,9 @@ export const AppLockPassword = () => {
             mode === "change"
               ? `Change app lock ${keyboardType}`
               : mode === "remove"
-              ? `Remove app lock ${keyboardType}`
+              ? `Enter ${
+                  accountPass ? "account password" : `app lock ${keyboardType}`
+                } to remove ${keyboardType}`
               : `Set up a custom app lock ${keyboardType} to unlock the app`
           }
           icon="shield"
@@ -169,33 +175,39 @@ export const AppLockPassword = () => {
               confirmPasswordInputRef.current?.focus();
             }}
             defaultValue={values.current.password}
-            keyboardType={keyboardType === "pin" ? "number-pad" : "default"}
+            keyboardType={
+              keyboardType === "pin" && !accountPass ? "number-pad" : "default"
+            }
             autoComplete="password"
             returnKeyLabel={mode !== "remove" ? "Next" : "Remove"}
             returnKeyType={mode !== "remove" ? "next" : "done"}
             secureTextEntry={secureTextEntry}
             buttonLeft={
-              <IconButton
-                name={keyboardType === "password" ? "numeric" : "keyboard"}
-                onPress={() => {
-                  setKeyboardType(
-                    keyboardType === "password" ? "pin" : "password"
-                  );
-                  setSecureTextEntry(false);
-                  setImmediate(() => {
-                    setSecureTextEntry(true);
-                  });
-                }}
-                style={{
-                  width: 25,
-                  height: 25,
-                  marginRight: 5
-                }}
-                size={SIZE.lg}
-              />
+              accountPass ? null : (
+                <IconButton
+                  name={keyboardType === "password" ? "numeric" : "keyboard"}
+                  onPress={() => {
+                    setKeyboardType(
+                      keyboardType === "password" ? "pin" : "password"
+                    );
+                    setSecureTextEntry(false);
+                    setImmediate(() => {
+                      setSecureTextEntry(true);
+                    });
+                  }}
+                  style={{
+                    width: 25,
+                    height: 25,
+                    marginRight: 5
+                  }}
+                  size={SIZE.lg}
+                />
+              )
             }
             placeholder={
-              mode === "change"
+              accountPass
+                ? "Account password"
+                : mode === "change"
                 ? `New ${keyboardType}`
                 : `${keyboardType === "pin" ? "Pin" : "Password"}`
             }
@@ -222,6 +234,36 @@ export const AppLockPassword = () => {
               placeholder={`Confirm ${keyboardType}`}
             />
           ) : null}
+
+          {mode === "remove" ? (
+            <>
+              <Button
+                icon={
+                  accountPass ? "checkbox-marked" : "checkbox-blank-outline"
+                }
+                onPress={() => {
+                  setSecureTextEntry(false);
+                  setAccountPass(!accountPass);
+                  setTimeout(() => {
+                    setSecureTextEntry(true);
+                  });
+                }}
+                iconSize={SIZE.lg}
+                type="plain"
+                iconColor={
+                  accountPass ? colors.primary.accent : colors.primary.icon
+                }
+                title="Use account password instead"
+                style={{
+                  width: "100%",
+                  alignSelf: "flex-start",
+                  justifyContent: "flex-start",
+                  paddingHorizontal: 0,
+                  height: 30
+                }}
+              />
+            </>
+          ) : null}
         </View>
 
         <DialogButtons
@@ -249,7 +291,8 @@ export const AppLockPassword = () => {
                 );
                 return;
               }
-              await setAppLockVerificationCipher(values.current.password);
+              const password = values.current.password;
+              setAppLockVerificationCipher(password);
               SettingsService.setProperty("appLockHasPasswordSecurity", true);
             } else if (mode === "change") {
               if (
@@ -277,7 +320,6 @@ export const AppLockPassword = () => {
                 );
                 return;
               }
-
               const isCurrentPasswordCorrect = await validateAppLockPassword(
                 values.current.currentPassword
               );
@@ -293,8 +335,10 @@ export const AppLockPassword = () => {
                 return;
               }
 
+              const password = values.current.password;
+              await clearAppLockVerificationCipher();
               SettingsService.setProperty("appLockHasPasswordSecurity", true);
-              await setAppLockVerificationCipher(values.current.password);
+              await setAppLockVerificationCipher(password);
             } else if (mode === "remove") {
               if (!values.current.password) {
                 ToastManager.error(
@@ -305,14 +349,18 @@ export const AppLockPassword = () => {
                 return;
               }
 
-              const isCurrentPasswordCorrect = await validateAppLockPassword(
-                values.current.password
-              );
+              const isCurrentPasswordCorrect = accountPass
+                ? await db.user.verifyPassword(values.current.password)
+                : await validateAppLockPassword(values.current.password);
 
               if (!isCurrentPasswordCorrect) {
                 ToastManager.error(
                   new Error(
-                    `${keyboardType === "pin" ? "Pin" : "Password"} incorrect`
+                    accountPass
+                      ? "Account password incorrect"
+                      : `${
+                          keyboardType === "pin" ? "Pin" : "Password"
+                        } incorrect`
                   ),
                   undefined,
                   "local"
@@ -342,7 +390,9 @@ export const AppLockPassword = () => {
 
             close();
           }}
-          positiveTitle="Save"
+          positiveTitle={
+            mode === "remove" ? "Remove" : mode === "change" ? "Change" : "Save"
+          }
           negativeTitle="Cancel"
           positiveType="transparent"
           loading={false}

apps/mobile/app/components/dialogs/vault/index.js

@@ -586,7 +586,7 @@ export class VaultDialog extends Component {
   }
 
   async _copyNote(note) {
-    Clipboard.setString(await convertNoteToText(note));
+    Clipboard.setString((await convertNoteToText(note, true)) || "");
     ToastManager.show({
       heading: "Note copied",
       type: "success",
@@ -602,7 +602,7 @@ export class VaultDialog extends Component {
       await Share.open({
         heading: "Share note",
         failOnCancel: false,
-        message: await convertNoteToText(note)
+        message: (await convertNoteToText(note)) || ""
       });
     } catch (e) {
       console.error(e);

apps/mobile/app/components/list/card.tsx

@@ -49,7 +49,8 @@ export const Card = ({ color }: { color?: string }) => {
           flexDirection: "row",
           alignItems: "center",
           justifyContent: "space-between",
-          paddingHorizontal: 0
+          paddingHorizontal: 0,
+          width: "100%"
         }}
       >
         <View
@@ -91,7 +92,6 @@ export const Card = ({ color }: { color?: string }) => {
           <View
             style={{
               marginLeft: 10,
-              flexShrink: 1,
               marginRight: 10
             }}
           >

apps/mobile/app/components/note-history/preview.js

@@ -21,10 +21,10 @@ import { useThemeColors } from "@notesnook/theme";
 import React, { useEffect, useState } from "react";
 import { View } from "react-native";
 import { db } from "../../common/database";
-import Editor from "../../screens/editor";
+import { ReadonlyEditor } from "../../screens/editor/readonly-editor";
 import { useTabStore } from "../../screens/editor/tiptap/use-tab-store";
 import { editorController } from "../../screens/editor/tiptap/utils";
-import { eSendEvent, ToastManager } from "../../services/event-manager";
+import { ToastManager, eSendEvent } from "../../services/event-manager";
 import Navigation from "../../services/navigation";
 import { useSelectionStore } from "../../stores/use-selection-store";
 import { useTrashStore } from "../../stores/use-trash-store";
@@ -34,7 +34,7 @@ import DialogHeader from "../dialog/dialog-header";
 import { presentDialog } from "../dialog/functions";
 import { Button } from "../ui/button";
 import Paragraph from "../ui/typography/paragraph";
-import { ReadonlyEditor } from "../../screens/editor/readonly-editor";
+import { diff } from "diffblazer";
 
 /**
  *
@@ -121,12 +121,21 @@ export default function NotePreview({ session, content, note }) {
           <ReadonlyEditor
             editorId="historyPreview"
             onLoad={async (loadContent) => {
-              if (content.data) {
-                const _note = note || (await db.notes.note(session?.noteId));
-                loadContent({
-                  data: content.data,
-                  id: _note.id
-                });
+              try {
+                if (content.data) {
+                  const _note = note || (await db.notes.note(session?.noteId));
+                  const currentContent = await db.content.get(_note.contentId);
+                  loadContent({
+                    data: diff(currentContent.data, content.data),
+                    id: _note.id
+                  });
+                }
+              } catch (e) {
+                ToastManager.error(
+                  e,
+                  "Failed to load history preview",
+                  "local"
+                );
               }
             }}
           />

apps/mobile/app/components/sheets/github/issue.js

@@ -19,7 +19,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import { Debug } from "@notesnook/core/dist/api/debug";
 import { useThemeColors } from "@notesnook/theme";
-import Clipboard from "@react-native-clipboard/clipboard";
 import React, { useRef, useState } from "react";
 import { Linking, Platform, Text, TextInput, View } from "react-native";
 import { getVersion } from "react-native-device-info";
@@ -30,23 +29,22 @@ import { useUserStore } from "../../../stores/use-user-store";
 import { eCloseSheet } from "../../../utils/events";
 import { openLinkInBrowser } from "../../../utils/functions";
 import { SIZE } from "../../../utils/size";
-import { sleep } from "../../../utils/time";
 import DialogHeader from "../../dialog/dialog-header";
-import { presentDialog } from "../../dialog/functions";
 import { Button } from "../../ui/button";
 import Seperator from "../../ui/seperator";
+import Heading from "../../ui/typography/heading";
 import Paragraph from "../../ui/typography/paragraph";
 
 export const Issue = ({ defaultTitle, defaultBody, issueTitle }) => {
   const { colors } = useThemeColors();
-
-  const body = useStoredRef("issueBody", defaultBody);
+  const body = useStoredRef("issueBody");
   const title = useStoredRef("issueTitle", defaultTitle);
-
+  const [done, setDone] = useState(false);
   const user = useUserStore((state) => state.user);
   const [loading, setLoading] = useState(false);
   const bodyRef = useRef();
   const initialLayout = useRef(false);
+  const issueUrl = useRef();
 
   const onPress = async () => {
     if (loading) return;
@@ -56,10 +54,11 @@ export const Issue = ({ defaultTitle, defaultBody, issueTitle }) => {
 
     try {
       setLoading(true);
-      let issue_url = await Debug.report({
+      issueUrl.current = await Debug.report({
         title: title.current,
         body:
           body.current +
+          `\n${defaultBody}` +
           `\n_______________
 **Device information:**
 App version: ${getVersion()}
@@ -75,38 +74,7 @@ Logged in: ${user ? "yes" : "no"}`,
       eSendEvent(eCloseSheet);
       body.reset();
       title.reset();
-      await sleep(300);
-      presentDialog({
-        title: "Issue reported",
-        paragraph: (
-          <Text>
-            You can track your issue at{" "}
-            <Text
-              style={{
-                textDecorationLine: "underline",
-                color: colors.primary.accent
-              }}
-              onPress={() => {
-                Linking.openURL(issue_url);
-              }}
-            >
-              {issue_url}.
-            </Text>{" "}
-            Please note that we will respond to your issue on the given link. We
-            recommend that you save it.
-          </Text>
-        ),
-        positiveText: "Copy link",
-        positivePress: () => {
-          Clipboard.setString(issue_url);
-          ToastManager.show({
-            heading: "Issue url copied!",
-            type: "success",
-            context: "global"
-          });
-        },
-        negativeText: "Close"
-      });
+      setDone(true);
     } catch (e) {
       setLoading(false);
       ToastManager.show({
@@ -124,125 +92,179 @@ Logged in: ${user ? "yes" : "no"}`,
         width: "100%"
       }}
     >
-      <DialogHeader
-        title={issueTitle || "Report issue"}
-        paragraph={
-          issueTitle
-            ? "We are sorry, it seems that the app crashed due to an error. You can submit a bug report below so we can fix this asap."
-            : "Let us know if you have faced any issue/bug while using Notesnook."
-        }
-      />
+      {done ? (
+        <>
+          <View
+            style={{
+              height: 250,
+              justifyContent: "center",
+              alignItems: "center",
+              gap: 10
+            }}
+          >
+            <Heading>Issue submitted</Heading>
+            <Paragraph
+              style={{
+                textAlign: "center"
+              }}
+              selectable={true}
+            >
+              You can track your issue at{" "}
+              <Paragraph
+                style={{
+                  textDecorationLine: "underline",
+                  color: colors.primary.accent
+                }}
+                onPress={() => {
+                  Linking.openURL(issueUrl.current);
+                }}
+              >
+                {issueUrl.current}
+              </Paragraph>
+              . Please note that we will respond to your issue on the given
+              link. We recommend that you save it.
+            </Paragraph>
 
-      <Seperator half />
-
-      <TextInput
-        placeholder="Title"
-        onChangeText={(v) => (title.current = v)}
-        defaultValue={title.current}
-        style={{
-          borderWidth: 1,
-          borderColor: colors.primary.border,
-          borderRadius: 5,
-          padding: 12,
-          fontFamily: "OpenSans-Regular",
-          marginBottom: 10,
-          fontSize: SIZE.md,
-          color: colors.primary.heading
-        }}
-        placeholderTextColor={colors.primary.placeholder}
-      />
-
-      <TextInput
-        ref={bodyRef}
-        placeholder={`Tell us more about the issue you are facing.
-        
-For example:
-- Steps to reproduce the issue
-- Things you have tried etc.`}
-        multiline
-        numberOfLines={5}
-        textAlignVertical="top"
-        onChangeText={(v) => (body.current = v)}
-        onLayout={() => {
-          if (initialLayout.current) return;
-          initialLayout.current = true;
-          if (body.current) {
-            bodyRef.current?.setNativeProps({
-              text: body.current,
-              selection: {
-                start: 0,
-                end: 0
-              }
-            });
-          }
-        }}
-        style={{
-          borderWidth: 1,
-          borderColor: colors.primary.border,
-          borderRadius: 5,
-          padding: 12,
-          fontFamily: "OpenSans-Regular",
-          maxHeight: 200,
-          fontSize: SIZE.sm,
-          marginBottom: 2.5,
-          color: colors.primary.paragraph
-        }}
-        placeholderTextColor={colors.primary.placeholder}
-      />
-      <Paragraph
-        size={SIZE.xs}
-        color={colors.secondary.paragraph}
-      >{`App version: ${getVersion()} Platform: ${Platform.OS} Model: ${
-        Platform.constants.Brand
-      }-${Platform.constants.Model}-${Platform.constants.Version}`}</Paragraph>
-
-      <Seperator />
-      <Button
-        onPress={onPress}
-        title={loading ? null : "Submit"}
-        loading={loading}
-        width="100%"
-        type="accent"
-      />
-
-      <Paragraph
-        color={colors.secondary.paragraph}
-        size={SIZE.xs}
-        style={{
-          marginTop: 10,
-          textAlign: "center"
-        }}
-      >
-        The information above will be publically available at{" "}
-        <Text
-          onPress={() => {
-            Linking.openURL("https://github.com/streetwriters/notesnook");
-          }}
-          style={{
-            textDecorationLine: "underline",
-            color: colors.primary.accent
-          }}
-        >
-          github.com/streetwriters/notesnook.
-        </Text>{" "}
-        If you want to ask something in general or need some assistance, we
-        would suggest that you{" "}
-        <Text
-          style={{
-            textDecorationLine: "underline",
-            color: colors.primary.accent
-          }}
-          onPress={async () => {
-            try {
-              await openLinkInBrowser("https://discord.gg/zQBK97EE22", colors);
-            } catch (e) {
-              console.error(e);
+            <Button
+              title="Open issue"
+              onPress={() => {
+                Linking.openURL(issueUrl.current);
+              }}
+              type="accent"
+              width="100%"
+            />
+          </View>
+        </>
+      ) : (
+        <>
+          <DialogHeader
+            title={issueTitle || "Report issue"}
+            paragraph={
+              issueTitle
+                ? "We are sorry, it seems that the app crashed due to an error. You can submit a bug report below so we can fix this asap."
+                : "Let us know if you have faced any issue/bug while using Notesnook."
             }
-          }}
-        >
-          join our community on Discord.
-        </Text>
-      </Paragraph>
+          />
+
+          <Seperator half />
+
+          <TextInput
+            placeholder="Title"
+            onChangeText={(v) => (title.current = v)}
+            defaultValue={title.current}
+            style={{
+              borderWidth: 1,
+              borderColor: colors.primary.border,
+              borderRadius: 5,
+              padding: 12,
+              fontFamily: "OpenSans-Regular",
+              marginBottom: 10,
+              fontSize: SIZE.md,
+              color: colors.primary.heading
+            }}
+            placeholderTextColor={colors.primary.placeholder}
+          />
+
+          <TextInput
+            ref={bodyRef}
+            multiline
+            placeholder={`Tell us more about the issue you are facing. 
+
+For example:
+- What were you trying to do in the app?
+- What did you expect to happen?
+- Steps to reproduce the issue 
+- Things you have tried etc.`}
+            numberOfLines={5}
+            textAlignVertical="top"
+            onChangeText={(v) => (body.current = v)}
+            onLayout={() => {
+              if (initialLayout.current) return;
+              initialLayout.current = true;
+              if (body.current) {
+                bodyRef.current?.setNativeProps({
+                  text: body.current,
+                  selection: {
+                    start: 0,
+                    end: 0
+                  }
+                });
+              }
+            }}
+            style={{
+              borderWidth: 1,
+              borderColor: colors.primary.border,
+              borderRadius: 5,
+              padding: 12,
+              fontFamily: "OpenSans-Regular",
+              maxHeight: 200,
+              fontSize: SIZE.sm,
+              marginBottom: 2.5,
+              color: colors.primary.paragraph
+            }}
+            placeholderTextColor={colors.primary.placeholder}
+          />
+          <Paragraph
+            size={SIZE.xs}
+            color={colors.secondary.paragraph}
+          >{`App version: ${getVersion()} Platform: ${Platform.OS} Model: ${
+            Platform.constants.Brand
+          }-${Platform.constants.Model}-${
+            Platform.constants.Version
+          }`}</Paragraph>
+
+          <Seperator />
+          <Button
+            onPress={onPress}
+            title={loading ? null : "Submit"}
+            loading={loading}
+            width="100%"
+            type="accent"
+          />
+
+          <Paragraph
+            color={colors.secondary.paragraph}
+            size={SIZE.xs}
+            style={{
+              marginTop: 10,
+              textAlign: "center"
+            }}
+          >
+            The information above will be publically available at{" "}
+            <Text
+              onPress={() => {
+                Linking.openURL("https://github.com/streetwriters/notesnook");
+              }}
+              style={{
+                textDecorationLine: "underline",
+                color: colors.primary.accent
+              }}
+            >
+              github.com/streetwriters/notesnook.
+            </Text>{" "}
+            If you want to ask something in general or need some assistance, we
+            would suggest that you{" "}
+            <Text
+              style={{
+                textDecorationLine: "underline",
+                color: colors.primary.accent
+              }}
+              onPress={async () => {
+                try {
+                  await openLinkInBrowser(
+                    "https://discord.gg/zQBK97EE22",
+                    colors
+                  );
+                } catch (e) {
+                  console.error(e);
+                }
+              }}
+            >
+              join our community on Discord.
+            </Text>
+          </Paragraph>
+        </>
+      )}
     </View>
   );
 };

apps/mobile/app/components/ui/button/index.tsx

@@ -25,7 +25,8 @@ import {
   DimensionValue,
   TextStyle,
   View,
-  ViewStyle
+  ViewStyle,
+  useWindowDimensions
 } from "react-native";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { useUserStore } from "../../../stores/use-user-store";
@@ -92,6 +93,9 @@ export const Button = ({
   });
   const textColor = buttonType?.text ? buttonType.text : text;
 
+  const { fontScale } = useWindowDimensions();
+  const growFactor = 1 + (fontScale - 1) / 10;
+
   const Component = bold ? Heading : Paragraph;
 
   return (
@@ -117,8 +121,11 @@ export const Button = ({
       customOpacity={buttonType?.opacity}
       customAlpha={buttonType?.alpha}
       style={{
-        height: height,
-        width: (width as DimensionValue) || undefined,
+        height: typeof height === "number" ? height * growFactor : height,
+        width:
+          typeof width === "number"
+            ? width * growFactor
+            : (width as DimensionValue) || undefined,
         paddingHorizontal: 12,
         borderRadius: 5,
         alignSelf: "center",

apps/mobile/app/components/ui/pressable/index.tsx

@@ -21,11 +21,12 @@ import { VariantsWithStaticColors, useThemeColors } from "@notesnook/theme";
 import React, { RefObject, useCallback } from "react";
 import {
   ColorValue,
+  PressableStateCallbackType,
   Pressable as RNPressable,
   PressableProps as RNPressableProps,
-  PressableStateCallbackType,
   View,
-  ViewStyle
+  ViewStyle,
+  useWindowDimensions
 } from "react-native";
 import {
   RGB_Linear_Shade,
@@ -256,6 +257,8 @@ export const Pressable = ({
     ? 1
     : colorOpacity;
   const alpha = customAlpha ? customAlpha : isDark ? 0.03 : -0.03;
+  const { fontScale } = useWindowDimensions();
+  const growFactor = 1 + (fontScale - 1) / 8;
 
   const getStyle = useCallback(
     ({ pressed }: PressableStateCallbackType): ViewStyle | ViewStyle[] => [
@@ -276,7 +279,13 @@ export const Pressable = ({
           : borderColor || "transparent",
         borderWidth: borderWidth
       },
-      style
+      style,
+      {
+        height:
+          typeof style.height === "number"
+            ? style.height * growFactor
+            : style.height
+      }
     ],
     [
       alpha,
@@ -288,7 +297,8 @@ export const Pressable = ({
       borderSelectedColor,
       borderColor,
       borderWidth,
-      style
+      style,
+      growFactor
     ]
   );
 

apps/mobile/app/hooks/use-actions.tsx

@@ -600,20 +600,11 @@ export const useActions = ({
         });
         return;
       }
-      const text = await convertNoteToText(item as Note, false);
-      if (!text) {
-        ToastManager.error(
-          new Error(Errors.export("text")),
-          undefined,
-          "local"
-        );
-        return;
-      }
-
-      const html = text.replace(/\n/g, "<br />");
+      const text = await convertNoteToText(item as Note, true);
+      const html = (text || "").replace(/\n/g, "<br />");
       await Notifications.displayNotification({
         title: item.title,
-        message: (item as Note).headline || text,
+        message: (item as Note).headline || text || "",
         subtitle: "",
         bigText: html,
         ongoing: true,
@@ -684,15 +675,11 @@ export const useActions = ({
       } else {
         processingId.current = "shareNote";
         const convertedText = await convertNoteToText(item);
-        if (!convertedText) {
-          ToastManager.error(new Error(Errors.export("text")));
-          return;
-        }
         processingId.current = undefined;
         Share.open({
           title: "Share note to",
           failOnCancel: false,
-          message: convertedText
+          message: convertedText || ""
         });
       }
     }
@@ -772,11 +759,7 @@ export const useActions = ({
         } else {
           processingId.current = "copyContent";
           const text = await convertNoteToText(item as Note, true);
-          if (!text) {
-            ToastManager.error(new Error(Errors.export("text")));
-            return;
-          }
-          Clipboard.setString(text);
+          Clipboard.setString(text || "");
           processingId.current = undefined;
           ToastManager.show({
             heading: "Note copied to clipboard",

apps/mobile/app/hooks/use-pricing.ts

@@ -22,20 +22,14 @@ import { Platform } from "react-native";
 import { Subscription } from "react-native-iap";
 import PremiumService from "../services/premium";
 import { db } from "../common/database";
+import { Product } from "@notesnook/core/dist/api/pricing";
 
-type PurchaseInfo = {
-  country: string;
-  countryCode: string;
-  sku: string;
-  discount: number;
-};
-
-const skuInfos: { [name: string]: PurchaseInfo | undefined } = {};
+const skuInfos: { [name: string]: Product | undefined } = {};
 
 export const usePricing = (period: "monthly" | "yearly") => {
   const [current, setCurrent] = useState<{
     period: string;
-    info?: PurchaseInfo;
+    info?: Product;
     product?: Subscription;
   }>();
 
@@ -54,6 +48,7 @@ export const usePricing = (period: "monthly" | "yearly") => {
           period
         ));
       skuInfos[period] = skuInfo;
+
       const products = (await PremiumService.getProducts()) as Subscription[];
       let product = products.find((p) => p.productId === skuInfo?.sku);
       if (!product)

apps/mobile/app/package.json

@@ -16,7 +16,7 @@
     "html-to-text": "9.0.5",
     "phone": "^3.1.14",
     "qclone": "^1.2.0",
-    "react-native-actions-sheet": "0.9.3",
+    "react-native-actions-sheet": "0.9.6",
     "react-native-check-version": "https://github.com/flexible-agency/react-native-check-version",
     "react-native-drax": "^0.10.2",
     "react-native-image-zoom-viewer": "^3.0.1",

apps/mobile/app/screens/editor/readonly-editor.tsx

@@ -75,14 +75,16 @@ export function ReadonlyEditor(props: {
     if (editorMessage.type === EventTypes.readonlyEditorLoaded) {
       console.log("Readonly editor loaded.");
       props.onLoad?.((content: { data: string; id: string }) => {
-        noteId.current = content.id;
-        editorRef.current?.postMessage(
-          JSON.stringify({
-            type: "native:html",
-            value: content.data
-          })
-        );
-        setLoading(false);
+        setTimeout(() => {
+          noteId.current = content.id;
+          editorRef.current?.postMessage(
+            JSON.stringify({
+              type: "native:html",
+              value: content.data
+            })
+          );
+          setLoading(false);
+        }, 300);
       });
     } else if (editorMessage.type === EventTypes.getAttachmentData) {
       const attachment = (editorMessage.value as any).attachment as Attachment;

apps/mobile/app/screens/editor/tiptap/picker.ts

@@ -185,7 +185,8 @@ const camera = async (options: PickerOptions) => {
       cropping: false,
       multiple: true,
       maxFiles: 10,
-      writeTempFile: true
+      writeTempFile: true,
+      compressImageQuality: 1
     })
       .then((response) => {
         handleImageResponse(
@@ -215,7 +216,8 @@ const gallery = async (options: PickerOptions) => {
       mediaType: "photo",
       maxFiles: 10,
       cropping: false,
-      multiple: true
+      multiple: true,
+      compressImageQuality: 1
     })
       .then((response) =>
         handleImageResponse(
@@ -266,7 +268,6 @@ const handleImageResponse = async (
   response: Image[],
   options: PickerOptions
 ) => {
-  console.log(response, "result-file-picker");
   const result = await AttachImage.present(response, options.context);
   if (!result) return;
   const compress = result.compress;
@@ -302,10 +303,15 @@ const handleImageResponse = async (
       type: "url"
     });
 
-    const fileName = image.sourceURL
+    let fileName = image.sourceURL
       ? basename(image.sourceURL)
       : image.filename || "image";
 
+    fileName =
+      image.mime === "image/jpeg"
+        ? fileName.replace(/HEIC|HEIF/, "jpeg")
+        : fileName;
+
     console.log("attaching image...", fileName);
 
     console.log("attaching file...");

apps/mobile/app/screens/editor/tiptap/use-editor.ts

@@ -351,9 +351,18 @@ export const useEditor = (
             if (!unlocked)
               throw new Error("Could not save note, vault is locked");
           }
-          noteData.contentId = note?.contentId;
           // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          await db.vault?.save(noteData as any);
+          if (typeof noteData.title === "string") {
+            await db.notes.add({
+              title: noteData.title,
+              id: noteData.id
+            });
+          }
+
+          noteData.contentId = note?.contentId;
+          if (data) {
+            await db.vault?.save(noteData as any);
+          }
           clearTimeout(saveTimer);
         }
 
@@ -696,14 +705,13 @@ export const useEditor = (
               );
             }
 
-            console.log("readonly state changed...", note.readonly);
             useTabStore.getState().updateTab(tabId, {
               readonly: note.readonly
             });
           }
 
           if (data.type === "tiptap" && note && !isLocal) {
-            if (lastContentChangeTime.current[noteId] >= data.dateEdited) {
+            if (lastContentChangeTime.current[noteId] >= data.dateModified) {
               return;
             }
 
@@ -728,7 +736,7 @@ export const useEditor = (
               }
             } else {
               const _nextContent = data.data;
-              if (_nextContent === currentContents.current?.data) {
+              if (_nextContent === currentContents.current[note.id]?.data) {
                 return;
               }
               lastContentChangeTime.current[note.id] = note.dateEdited;

apps/mobile/app/screens/settings/debug.tsx

@@ -122,7 +122,8 @@ export default function DebugLogs() {
       colors.primary.paragraph,
       colors.error.paragraph,
       colors.static.black,
-      colors.static.orange
+      colors.static.orange,
+      colors.primary.border
     ]
   );
 

apps/mobile/app/screens/settings/functions.js

@@ -90,13 +90,26 @@ export async function verifyUserWithApplock() {
         positiveText: "Verify",
         secureTextEntry: true,
         negativeText: "Cancel",
+        keyboardType: keyboardType,
         positivePress: async (value) => {
           try {
             const verified = await validateAppLockPassword(value);
+            if (!verified) {
+              ToastManager.show({
+                heading: `Invalid ${
+                  keyboardType === "numeric" ? "pin" : "password"
+                }`,
+                type: "error",
+                context: "local"
+              });
+              return false;
+            }
             resolve(verified);
           } catch (e) {
             resolve(false);
+            return false;
           }
+          return true;
         }
       });
     } else {

apps/mobile/app/screens/settings/settings-data.tsx

@@ -70,6 +70,7 @@ import { useDragState } from "./editor/state";
 import { verifyUser, verifyUserWithApplock } from "./functions";
 import { SettingSection } from "./types";
 import { getTimeLeft } from "./user-section";
+import ScreenGuardModule from "react-native-screenguard";
 
 type User = any;
 
@@ -333,12 +334,14 @@ export const settingsGroups: SettingSection[] = [
           {
             id: "logout",
             name: "Log out",
-            description: "Clear all your data and reset the app.",
+            description:
+              "Logging out will clear all data stored on THIS DEVICE.",
             icon: "logout",
             modifer: () => {
               presentDialog({
                 title: "Logout",
-                paragraph: "Clear all your data and reset the app.",
+                paragraph:
+                  "Logging out will clear all data stored on THIS DEVICE. Make sure you have synced all your changes before logging out.",
                 positiveText: "Logout",
                 positivePress: async () => {
                   try {
@@ -848,9 +851,18 @@ export const settingsGroups: SettingSection[] = [
           "Hide app contents when you switch to other apps. This will also disable screenshot taking in the app.",
         modifer: () => {
           const settings = SettingsService.get();
-          Platform.OS === "android"
-            ? NotesnookModule.setSecureMode(!settings.privacyScreen)
-            : enabled(true);
+          if (Platform.OS === "ios") {
+            enabled(!settings.privacyScreen);
+            if (settings.privacyScreen) {
+              ScreenGuardModule.unregister();
+            } else {
+              ScreenGuardModule.register({
+                backgroundColor: "#000000"
+              });
+            }
+          } else {
+            NotesnookModule.setSecureMode(!settings.privacyScreen);
+          }
 
           SettingsService.set({ privacyScreen: !settings.privacyScreen });
         },
@@ -871,6 +883,9 @@ export const settingsGroups: SettingSection[] = [
             type: "switch",
             property: "appLockEnabled",
             onChange: () => {
+              SettingsService.set({
+                privacyScreen: true
+              });
               SettingsService.setPrivacyScreen(SettingsService.get());
             },
             onVerify: async () => {
@@ -973,7 +988,7 @@ export const settingsGroups: SettingSection[] = [
                 SettingsService.getProperty("applockKeyboardType") === "numeric"
                   ? "pin"
                   : "password"
-              }, app lock will fallback to using account password to unlock the app`,
+              }, app lock will be disabled if no other security method is enabled.`,
             hidden: () => {
               return !SettingsService.getProperty("appLockHasPasswordSecurity");
             },

apps/mobile/app/services/message.js

@@ -59,14 +59,14 @@ const recoveryKeyMessage = {
       () => {
         eSendEvent(eOpenRecoveryKeyDialog);
       },
-      true,
+      false,
       async () => {
         SettingsService.set({
           recoveryKeySaved: true
         });
         clearMessage();
       },
-      "I have saved my key already"
+      "Cancel"
     );
   },
   data: {},

apps/mobile/app/services/notifications.ts

@@ -952,13 +952,13 @@ async function pinNote(id: string) {
     const note = await db.notes.note(id as string);
     if (!note) return;
 
-    let text = await convertNoteToText(note, false);
+    let text = await convertNoteToText(note, true);
     if (!text) text = "";
     const html = text.replace(/\n/g, "<br />");
     Notifications.displayNotification({
       title: note.title,
       message: note.headline || text,
-      subtitle: note.headline || text,
+      subtitle: "",
       bigText: html,
       ongoing: true,
       actions: ["UNPIN"],

apps/mobile/app/services/settings.ts

@@ -29,6 +29,7 @@ import { NotesnookModule } from "../utils/notesnook-module";
 import { scale, updateSize } from "../utils/size";
 import { DatabaseLogger } from "../common/database";
 import { useUserStore } from "../stores/use-user-store";
+import ScreenGuardModule from "react-native-screenguard";
 function reset() {
   const settings = get();
   if (settings.reminder !== "off" && settings.reminder !== "useroff") {
@@ -76,6 +77,17 @@ function migrateAppLock() {
   DatabaseLogger.debug("App lock Migrated");
 }
 
+function migrateSettings(settings: SettingStore["settings"]) {
+  const version = settings.settingsVersion;
+  if (!version) {
+    settings.settingsVersion = 1;
+    settings.privacyScreen = settings.appLockEnabled
+      ? true
+      : settings.privacyScreen;
+    MMKV.setString("appSettings", JSON.stringify(settings));
+  }
+}
+
 function init() {
   scale.fontScale = 1;
   const settingsJson = MMKV.getString("appSettings");
@@ -83,14 +95,17 @@ function init() {
   if (!settingsJson) {
     MMKV.setString("appSettings", JSON.stringify(settings));
   } else {
+    const settingsParsed = JSON.parse(settingsJson);
+    migrateSettings(settingsParsed);
     settings = {
       ...settings,
-      ...JSON.parse(settingsJson)
+      ...settingsParsed
     };
   }
   if (settings.fontScale) {
     scale.fontScale = settings.fontScale;
   }
+
   setTimeout(() => setPrivacyScreen(settings), 1);
   updateSize();
   useSettingStore.getState().setSettings({ ...settings });
@@ -98,17 +113,19 @@ function init() {
 }
 
 function setPrivacyScreen(settings: SettingStore["settings"]) {
-  if (settings.privacyScreen || settings.appLockEnabled) {
+  if (settings.privacyScreen) {
     if (Platform.OS === "android") {
       NotesnookModule.setSecureMode(true);
     } else {
       enabled(true);
+      ScreenGuardModule.register({ backgroundColor: "#000000" });
     }
   } else {
     if (Platform.OS === "android") {
       NotesnookModule.setSecureMode(false);
     } else {
       enabled(false);
+      ScreenGuardModule.unregister();
     }
   }
 }

apps/mobile/app/stores/use-setting-store.ts

@@ -81,6 +81,7 @@ export type Settings = {
   biometricsAuthEnabled?: boolean;
   backgroundSync?: boolean;
   applockKeyboardType: "numeric" | "default";
+  settingsVersion?: number;
 };
 
 type DimensionsType = {
@@ -169,7 +170,8 @@ export const defaultSettings: SettingStore["settings"] = {
   markdownShortcuts: true,
   biometricsAuthEnabled: false,
   appLockHasPasswordSecurity: false,
-  backgroundSync: true
+  backgroundSync: true,
+  settingsVersion: 0
 };
 
 export const useSettingStore = create<SettingStore>((set, get) => ({

apps/mobile/app/utils/constants.ts

@@ -23,7 +23,7 @@ export const IOS_APPGROUPID = "group.org.streetwriters.notesnook";
 export const FILE_SIZE_LIMIT = 500 * 1024 * 1024;
 export const IMAGE_SIZE_LIMIT = 50 * 1024 * 1024;
 
-export const BETA = true;
+export const BETA = false;
 
 export const STORE_LINK =
   Platform.OS === "ios"

apps/mobile/native/android/app/build.gradle

@@ -111,7 +111,7 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled true
-        versionCode 3011
+        versionCode 3017
         versionName getNpmVersion()
         testBuildType System.getProperty('testBuildType', 'debug')
         testInstrumentationRunner 'androidx.test.runner.AndroidJUnitRunner'

apps/mobile/native/android/build.gradle

@@ -37,4 +37,10 @@ allprojects {
 
         maven { url 'https://www.jitpack.io' }
     }
-}
+
+    tasks.withType(org.jetbrains.kotlin.gradle.tasks.KotlinCompile).all {
+        kotlinOptions {
+            jvmTarget = "11"
+        }
+    }
+}

apps/mobile/native/android/releasenotes/whatsnew-en-US

@@ -1,4 +1,4 @@
-- Added push/pull changes to troubleshoot sync issues in settings
+- Bring back undo/redo buttons in editor
 - Bug fixes and performance improvements
 
 Thank you for using Notesnook!

apps/mobile/native/ios/Notesnook.xcodeproj/project.pbxproj

@@ -21,9 +21,9 @@
 		6517B7C32B6838EB0079FF37 /* OpenSans-Bold.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 6517B7C02B6838EB0079FF37 /* OpenSans-Bold.ttf */; };
 		6529A13E279BC4C70048D4A8 /* BootSplash.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 6529A13D279BC4C70048D4A8 /* BootSplash.storyboard */; };
 		656835812BB29A9800144BAB /* OpenSans-Italic.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 656835802BB29A8300144BAB /* OpenSans-Italic.ttf */; };
-		656DD2AB2B1891DF00A362EA /* BuildFile in Resources */ = {isa = PBXBuildFile; };
-		656DD2AC2B1891DF00A362EA /* BuildFile in Resources */ = {isa = PBXBuildFile; };
-		656DD2AD2B1891DF00A362EA /* BuildFile in Resources */ = {isa = PBXBuildFile; };
+		656DD2AB2B1891DF00A362EA /* (null) in Resources */ = {isa = PBXBuildFile; };
+		656DD2AC2B1891DF00A362EA /* (null) in Resources */ = {isa = PBXBuildFile; };
+		656DD2AD2B1891DF00A362EA /* (null) in Resources */ = {isa = PBXBuildFile; };
 		6593E4A3281C345400492C50 /* AppDelegate.mm in Sources */ = {isa = PBXBuildFile; fileRef = 6593E4A2281C345400492C50 /* AppDelegate.mm */; };
 		659BE46725E11A5100E05671 /* notesnook-text.png in Resources */ = {isa = PBXBuildFile; fileRef = 659BE46625E11A5100E05671 /* notesnook-text.png */; };
 		65AA857925E6DDEC00772A01 /* WidgetKit.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = 65AA857825E6DDEC00772A01 /* WidgetKit.framework */; };
@@ -586,9 +586,9 @@
 			isa = PBXResourcesBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
-				656DD2AB2B1891DF00A362EA /* BuildFile in Resources */,
-				656DD2AC2B1891DF00A362EA /* BuildFile in Resources */,
-				656DD2AD2B1891DF00A362EA /* BuildFile in Resources */,
+				656DD2AB2B1891DF00A362EA /* (null) in Resources */,
+				656DD2AC2B1891DF00A362EA /* (null) in Resources */,
+				656DD2AD2B1891DF00A362EA /* (null) in Resources */,
 				65C400DF2A80B6B600AA3DF5 /* MaterialCommunityIcons.ttf in Resources */,
 				65C149872A61151B005C40F1 /* extension.bundle in Resources */,
 				65B5014725A672B200E2D264 /* MainInterface.storyboard in Resources */,
@@ -1015,7 +1015,7 @@
 				CODE_SIGN_IDENTITY = "Apple Development";
 				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "Apple Development";
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 2100;
+				CURRENT_PROJECT_VERSION = 2106;
 				DEVELOPMENT_TEAM = 53CWBG3QUC;
 				ENABLE_BITCODE = NO;
 				"EXCLUDED_ARCHS[sdk=iphonesimulator*]" = arm64;
@@ -1084,12 +1084,12 @@
 					"${PODS_ROOT}/Headers/Public/#{s.name}/**",
 				);
 				INFOPLIST_FILE = Notesnook/Info.plist;
-				IPHONEOS_DEPLOYMENT_TARGET = 12.0;
+				IPHONEOS_DEPLOYMENT_TARGET = 12.4;
 				LD_RUNPATH_SEARCH_PATHS = (
 					"$(inherited)",
 					"@executable_path/Frameworks",
 				);
-				MARKETING_VERSION = 3.0.3;
+				MARKETING_VERSION = 3.0.9;
 				OTHER_LDFLAGS = (
 					"$(inherited)",
 					"-ObjC",
@@ -1120,7 +1120,7 @@
 				CODE_SIGN_IDENTITY = "Apple Development";
 				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Distribution";
 				CODE_SIGN_STYLE = Manual;
-				CURRENT_PROJECT_VERSION = 2100;
+				CURRENT_PROJECT_VERSION = 2106;
 				DEVELOPMENT_TEAM = "";
 				"DEVELOPMENT_TEAM[sdk=iphoneos*]" = 53CWBG3QUC;
 				"EXCLUDED_ARCHS[sdk=iphonesimulator*]" = arm64;
@@ -1189,12 +1189,12 @@
 					"${PODS_ROOT}/Headers/Public/#{s.name}/**",
 				);
 				INFOPLIST_FILE = Notesnook/Info.plist;
-				IPHONEOS_DEPLOYMENT_TARGET = 12.0;
+				IPHONEOS_DEPLOYMENT_TARGET = 12.4;
 				LD_RUNPATH_SEARCH_PATHS = (
 					"$(inherited)",
 					"@executable_path/Frameworks",
 				);
-				MARKETING_VERSION = 3.0.3;
+				MARKETING_VERSION = 3.0.9;
 				ONLY_ACTIVE_ARCH = NO;
 				OTHER_LDFLAGS = (
 					"$(inherited)",
@@ -1353,7 +1353,7 @@
 				CODE_SIGN_IDENTITY = "Apple Development";
 				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "Apple Development";
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 2100;
+				CURRENT_PROJECT_VERSION = 2106;
 				DEBUG_INFORMATION_FORMAT = dwarf;
 				DEVELOPMENT_TEAM = 53CWBG3QUC;
 				"EXCLUDED_ARCHS[sdk=iphonesimulator*]" = arm64;
@@ -1365,7 +1365,7 @@
 					"@executable_path/Frameworks",
 					"@executable_path/../../Frameworks",
 				);
-				MARKETING_VERSION = 3.0.3;
+				MARKETING_VERSION = 3.0.9;
 				MTL_ENABLE_DEBUG_INFO = INCLUDE_SOURCE;
 				MTL_FAST_MATH = YES;
 				PRODUCT_BUNDLE_IDENTIFIER = org.streetwriters.notesnook.notewidget;
@@ -1396,7 +1396,7 @@
 				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Distribution";
 				CODE_SIGN_STYLE = Manual;
 				COPY_PHASE_STRIP = NO;
-				CURRENT_PROJECT_VERSION = 2100;
+				CURRENT_PROJECT_VERSION = 2106;
 				DEBUG_INFORMATION_FORMAT = "dwarf-with-dsym";
 				DEVELOPMENT_TEAM = "";
 				"DEVELOPMENT_TEAM[sdk=iphoneos*]" = 53CWBG3QUC;
@@ -1409,7 +1409,7 @@
 					"@executable_path/Frameworks",
 					"@executable_path/../../Frameworks",
 				);
-				MARKETING_VERSION = 3.0.3;
+				MARKETING_VERSION = 3.0.9;
 				MTL_FAST_MATH = YES;
 				PRODUCT_BUNDLE_IDENTIFIER = org.streetwriters.notesnook.notewidget;
 				PRODUCT_NAME = "$(TARGET_NAME)";
@@ -1439,7 +1439,7 @@
 				CODE_SIGN_ENTITLEMENTS = "Make Note/Make Note.entitlements";
 				CODE_SIGN_IDENTITY = "Apple Development";
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 2100;
+				CURRENT_PROJECT_VERSION = 2106;
 				DEBUG_INFORMATION_FORMAT = dwarf;
 				DEVELOPMENT_TEAM = 53CWBG3QUC;
 				"EXCLUDED_ARCHS[sdk=iphonesimulator*]" = arm64;
@@ -1513,7 +1513,7 @@
 					"@executable_path/Frameworks",
 					"@executable_path/../../Frameworks",
 				);
-				MARKETING_VERSION = 3.0.3;
+				MARKETING_VERSION = 3.0.9;
 				MTL_ENABLE_DEBUG_INFO = INCLUDE_SOURCE;
 				MTL_FAST_MATH = YES;
 				PRODUCT_BUNDLE_IDENTIFIER = org.streetwriters.notesnook.share;
@@ -1544,7 +1544,7 @@
 				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Distribution";
 				CODE_SIGN_STYLE = Manual;
 				COPY_PHASE_STRIP = NO;
-				CURRENT_PROJECT_VERSION = 2100;
+				CURRENT_PROJECT_VERSION = 2106;
 				DEBUG_INFORMATION_FORMAT = "dwarf-with-dsym";
 				DEVELOPMENT_TEAM = "";
 				"DEVELOPMENT_TEAM[sdk=iphoneos*]" = 53CWBG3QUC;
@@ -1619,7 +1619,7 @@
 					"@executable_path/Frameworks",
 					"@executable_path/../../Frameworks",
 				);
-				MARKETING_VERSION = 3.0.3;
+				MARKETING_VERSION = 3.0.9;
 				MTL_FAST_MATH = YES;
 				PRODUCT_BUNDLE_IDENTIFIER = org.streetwriters.notesnook.share;
 				PRODUCT_NAME = "$(TARGET_NAME)";

apps/mobile/native/ios/Podfile.lock

@@ -343,6 +343,9 @@ PODS:
     - React-Core
   - react-native-safe-area-context (4.9.0):
     - React-Core
+  - react-native-screenguard (1.0.0):
+    - React-Core
+    - SDWebImage (~> 5.11.1)
   - react-native-share-extension (3.0.0):
     - React
   - react-native-sodium (1.5.4):
@@ -548,6 +551,9 @@ PODS:
   - RNZipArchive/Core (6.0.9):
     - React-Core
     - SSZipArchive (~> 2.2)
+  - SDWebImage (5.11.1):
+    - SDWebImage/Core (= 5.11.1)
+  - SDWebImage/Core (5.11.1)
   - SexyTooltip (1.2.5):
     - pop (~> 1.0)
   - SocketRocket (0.6.0)
@@ -606,6 +612,7 @@ DEPENDENCIES:
   - react-native-pdf (from `../../node_modules/react-native-pdf`)
   - react-native-quick-sqlite (from `../../node_modules/react-native-quick-sqlite`)
   - react-native-safe-area-context (from `../../node_modules/react-native-safe-area-context`)
+  - react-native-screenguard (from `../../node_modules/react-native-screenguard`)
   - "react-native-share-extension (from `../../node_modules/@ammarahmed/react-native-share-extension`)"
   - "react-native-sodium (from `../../node_modules/@ammarahmed/react-native-sodium`)"
   - react-native-theme-switch-animation (from `../../node_modules/react-native-theme-switch-animation`)
@@ -664,6 +671,7 @@ SPEC REPOS:
     - MMKV
     - MMKVCore
     - pop
+    - SDWebImage
     - SocketRocket
     - SSZipArchive
     - SwiftyRSA
@@ -754,6 +762,8 @@ EXTERNAL SOURCES:
     :path: "../../node_modules/react-native-quick-sqlite"
   react-native-safe-area-context:
     :path: "../../node_modules/react-native-safe-area-context"
+  react-native-screenguard:
+    :path: "../../node_modules/react-native-screenguard"
   react-native-share-extension:
     :path: "../../node_modules/@ammarahmed/react-native-share-extension"
   react-native-sodium:
@@ -905,6 +915,7 @@ SPEC CHECKSUMS:
   react-native-pdf: 33c622cbdf776a649929e8b9d1ce2d313347c4fa
   react-native-quick-sqlite: e0e23b749382a85e4b57146f753de737a6c3a9e1
   react-native-safe-area-context: b97eb6f9e3b7f437806c2ce5983f479f8eb5de4b
+  react-native-screenguard: 8b36a3df84c76cd2b82c477f71c26fa1c8cc14a0
   react-native-share-extension: faed334b1ddf165f1e576fcabd3dc1c9e748bfa9
   react-native-sodium: 955bb0dc3ea05f8ea06d5e96cb89d1be7b5d7681
   react-native-theme-switch-animation: 220f883f7be290e79f2ab022093ed1a7a5929e6d
@@ -949,6 +960,7 @@ SPEC CHECKSUMS:
   RNSVG: d7d7bc8229af3842c9cfc3a723c815a52cdd1105
   RNTooltips: 5424d4bf0b3d441104127943b1115cc7f0616b1f
   RNZipArchive: 68a0c6db4b1c103f846f1559622050df254a3ade
+  SDWebImage: a7f831e1a65eb5e285e3fb046a23fcfbf08e696d
   SexyTooltip: 5c9b4dec52bfb317938cb0488efd9da3717bb6fd
   SocketRocket: fccef3f9c5cedea1353a9ef6ada904fde10d6608
   SSZipArchive: fe6a26b2a54d5a0890f2567b5cc6de5caa600aef
@@ -959,4 +971,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: 2b8b28a341b202bf3ca5f231b75bb05893486ed8
 
-COCOAPODS: 1.12.1
+COCOAPODS: 1.15.2

apps/mobile/native/package.json

@@ -66,7 +66,8 @@
     "react-native-theme-switch-animation": "^0.6.0",
     "@ammarahmed/react-native-background-fetch": "^4.2.2",
     "react-native-image-crop-picker": "^0.40.2",
-    "react-native-url-polyfill": "^2.0.0"
+    "react-native-url-polyfill": "^2.0.0",
+    "react-native-screenguard": "^1.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",

apps/mobile/native/react-native.config.js

@@ -17,6 +17,12 @@ config.dependencies['react-native-vector-icons'] = {
   },
 }
 
+config.dependencies['react-native-screenguard'] = {
+  platforms: {
+    android: null,
+  },
+}
+
 if (isGithubRelease) {
   config.dependencies["react-native-iap"] = {
     platforms: {

apps/mobile/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@notesnook/mobile",
-  "version": "3.0.2",
+  "version": "3.0.9",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@notesnook/mobile",
-      "version": "3.0.2",
+      "version": "3.0.9",
       "hasInstallScript": true,
       "license": "GPL-3.0-or-later",
       "workspaces": [
@@ -34,15 +34,15 @@
     },
     "../../packages/common": {
       "name": "@notesnook/common",
-      "version": "1.0.0",
+      "version": "2.0.1",
       "license": "GPL-3.0-or-later",
       "dependencies": {
-        "@notesnook/core": "file:../core",
+        "@notesnook/core": "^8.0.0",
         "pathe": "^1.1.2",
         "timeago.js": "4.0.2"
       },
       "devDependencies": {
-        "@notesnook/core": "file:../core",
+        "@notesnook/core": "^8.0.0",
         "@types/react": "^18.2.39",
         "react": "18.2.0",
         "vitest": "^1.4.0"
@@ -114,7 +114,7 @@
     },
     "../../packages/core": {
       "name": "@notesnook/core",
-      "version": "7.4.1",
+      "version": "8.0.2",
       "dev": true,
       "hasInstallScript": true,
       "license": "GPL-3.0-or-later",
@@ -3121,7 +3121,7 @@
     },
     "../../packages/crypto": {
       "name": "@notesnook/crypto",
-      "version": "1.1.1",
+      "version": "2.0.1",
       "dev": true,
       "license": "GPL-3.0-or-later",
       "dependencies": {
@@ -3135,7 +3135,7 @@
     },
     "../../packages/editor": {
       "name": "@notesnook/editor",
-      "version": "1.6.1",
+      "version": "2.0.1",
       "hasInstallScript": true,
       "license": "GPL-3.0-or-later",
       "dependencies": {
@@ -23795,13 +23795,13 @@
     },
     "../../packages/logger": {
       "name": "@notesnook/logger",
-      "version": "1.0.3",
+      "version": "2.0.1",
       "license": "GPL-3.0-or-later",
       "devDependencies": {}
     },
     "../../packages/sodium": {
       "name": "@notesnook/sodium",
-      "version": "1.1.0",
+      "version": "2.0.1",
       "dev": true,
       "license": "GPL-3.0-or-later",
       "devDependencies": {
@@ -25173,7 +25173,7 @@
     },
     "../../packages/theme": {
       "name": "@notesnook/theme",
-      "version": "1.2.0",
+      "version": "2.0.1",
       "license": "GPL-3.0-or-later",
       "devDependencies": {
         "@emotion/react": "11.11.1",
@@ -26240,7 +26240,7 @@
     },
     "../../packages/ui": {
       "name": "@notesnook/ui",
-      "version": "1.0.0",
+      "version": "2.0.2",
       "license": "GPL-3.0-or-later",
       "dependencies": {
         "@notesnook/theme": "file:../theme"
@@ -28412,7 +28412,7 @@
         "pathe": "1.1.2",
         "phone": "^3.1.14",
         "qclone": "^1.2.0",
-        "react-native-actions-sheet": "0.9.3",
+        "react-native-actions-sheet": "0.9.6",
         "react-native-check-version": "https://github.com/flexible-agency/react-native-check-version",
         "react-native-drax": "^0.10.2",
         "react-native-image-zoom-viewer": "^3.0.1",
@@ -28487,6 +28487,7 @@
         "react-native-reanimated": "3.3.0",
         "react-native-safe-area-context": "^4.3.1",
         "react-native-scoped-storage": "^1.9.5",
+        "react-native-screenguard": "^1.0.0",
         "react-native-screens": "^3.13.1",
         "react-native-securerandom": "^1.0.1",
         "react-native-share": "^7.2.0",
@@ -44778,8 +44779,9 @@
       }
     },
     "node_modules/react-native-actions-sheet": {
-      "version": "0.9.3",
-      "license": "MIT",
+      "version": "0.9.6",
+      "resolved": "https://registry.npmjs.org/react-native-actions-sheet/-/react-native-actions-sheet-0.9.6.tgz",
+      "integrity": "sha512-BMEFmJD29izbOxkH81HJWNCgrjdW5iz4gB+Eyov9xwUPz/Fbi53R6AFvF9N3ttYT8nEvzxj56nqP7uJZ6KuKuA==",
       "dependencies": {
         "react-native-safe-area-context": "^4.8.2"
       },
@@ -45253,6 +45255,18 @@
         "react-native": "*"
       }
     },
+    "node_modules/react-native-screenguard": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/react-native-screenguard/-/react-native-screenguard-1.0.0.tgz",
+      "integrity": "sha512-fqtoJI8TxszKqrntnHW48EMb4gNVA9VCAg5UG1FcIXEyv2W70kWoMxRRFoWuCRYlBWSAWqiXO+R6Xfk/0um0cw==",
+      "engines": {
+        "node": ">= 16.0.0"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+      }
+    },
     "node_modules/react-native-screens": {
       "version": "3.21.1",
       "license": "MIT",

apps/mobile/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@notesnook/mobile",
-  "version": "3.0.3",
+  "version": "3.0.9",
   "private": true,
   "license": "GPL-3.0-or-later",
   "workspaces": [

apps/mobile/patches/react-native-image-crop-picker+0.40.2.patch

@@ -10,3 +10,19 @@ index 5de0845..1b158d8 100644
  
          if (includeBase64) {
              image.putString("data", getBase64StringFromFile(compressedImagePath));
+diff --git a/node_modules/react-native-image-crop-picker/ios/src/ImageCropPicker.m b/node_modules/react-native-image-crop-picker/ios/src/ImageCropPicker.m
+index 9f20973..5e14da8 100644
+--- a/node_modules/react-native-image-crop-picker/ios/src/ImageCropPicker.m
++++ b/node_modules/react-native-image-crop-picker/ios/src/ImageCropPicker.m
+@@ -595,8 +595,10 @@ - (void)qb_imagePickerController:
+                                     NSString *mimeType = [self determineMimeTypeFromImageData:imageData];
+                                     Boolean isKnownMimeType = [mimeType length] > 0;
+                                     
++                                    Boolean isHeicOrHeif = [mimeType isEqualToString:@"image/heic"] || [mimeType isEqualToString:@"image/heif"];
++                                    
+                                     ImageResult *imageResult = [[ImageResult alloc] init];
+-                                    if (isLossless && useOriginalWidth && useOriginalHeight && isKnownMimeType && !forceJpg) {
++                                    if (isLossless && useOriginalWidth && useOriginalHeight && isKnownMimeType && !forceJpg && !isHeicOrHeif) {
+                                         // Use original, unmodified image
+                                         imageResult.data = imageData;
+                                         imageResult.width = @(imgT.size.width);

apps/mobile/patches/react-native-screenguard+1.0.0.patch

@@ -0,0 +1,54 @@
+diff --git a/node_modules/react-native-screenguard/ios/ScreenGuard.mm b/node_modules/react-native-screenguard/ios/ScreenGuard.mm
+index 9fa7d33..d2e6d68 100644
+--- a/node_modules/react-native-screenguard/ios/ScreenGuard.mm
++++ b/node_modules/react-native-screenguard/ios/ScreenGuard.mm
+@@ -11,7 +11,7 @@
+ @implementation ScreenGuard
+ RCT_EXPORT_MODULE(ScreenGuard)
+ 
+-bool hasListeners;
++bool hasListeners_;
+ 
+ UITextField *textField;
+ UIImageView *imageView;
+@@ -22,11 +22,11 @@ @implementation ScreenGuard
+ }
+ 
+ - (void)startObserving {
+-  hasListeners = YES;
++  hasListeners_ = YES;
+ }
+ 
+ - (void)stopObserving {
+-  hasListeners = NO;
++  hasListeners_ = NO;
+ }
+ 
+ - (void)secureViewWithBackgroundColor: (NSString *)color {
+@@ -335,7 +335,7 @@ - (UIImage *)convertViewToImage:(UIView *)view {
+                          queue:mainQueue
+                     usingBlock:^(NSNotification *notification) {
+       
+-      if (hasListeners && getScreenShotPath) {
++      if (hasListeners_ && getScreenShotPath) {
+           UIViewController *presentedViewController = RCTPresentedViewController();
+ 
+           UIImage *image = [self convertViewToImage:presentedViewController.view.superview];
+@@ -359,7 +359,7 @@ - (UIImage *)convertViewToImage:(UIView *)view {
+                     result = @{@"path": filePath, @"name": fileName, @"type": @"PNG"};
+                   }
+           [self emit:SCREENSHOT_EVT body: result];
+-      } else if (hasListeners) {
++      } else if (hasListeners_) {
+           [self emit:SCREENSHOT_EVT body: nil];
+       }
+     }];
+@@ -376,7 +376,7 @@ - (UIImage *)convertViewToImage:(UIView *)view {
+                          queue:mainQueue
+                     usingBlock:^(NSNotification *notification) {
+       
+-      if (hasListeners) {
++      if (hasListeners_) {
+         [self emit:SCREEN_RECORDING_EVT body:nil];
+       }
+     }];

apps/mobile/share/share.js

@@ -311,8 +311,7 @@ const ShareView = () => {
           type: "tiptap"
         },
         id: note.id,
-        sessionId: Date.now(),
-        title: noteTitle.current
+        sessionId: Date.now()
       };
     } else {
       noteData = { ...note };
@@ -487,25 +486,42 @@ const ShareView = () => {
                     gap: 10
                   }}
                 >
-                  <TextInput
-                    placeholder="Enter note title"
-                    ref={inputRef}
-                    style={{
-                      flexShrink: 1,
-                      flexGrow: 1,
-                      fontFamily: "OpenSans-SemiBold",
-                      fontSize: SIZE.lg,
-                      paddingBottom: 0,
-                      paddingTop: 0
-                    }}
-                    onChangeText={(value) => {
-                      noteTitle.current = value;
-                    }}
-                    blurOnSubmit={false}
-                    onSubmitEditing={() => {
-                      editorRef.current.focus();
-                    }}
-                  />
+                  {appendNoteId ? (
+                    <Heading
+                      style={{
+                        flexShrink: 1,
+                        flexGrow: 1,
+                        fontFamily: "OpenSans-SemiBold",
+                        fontSize: SIZE.lg,
+                        paddingBottom: 0,
+                        paddingTop: 0
+                      }}
+                    >
+                      Save note
+                    </Heading>
+                  ) : (
+                    <TextInput
+                      placeholder="Enter note title"
+                      ref={inputRef}
+                      style={{
+                        flexShrink: 1,
+                        flexGrow: 1,
+                        fontFamily: "OpenSans-SemiBold",
+                        fontSize: SIZE.lg,
+                        paddingBottom: 0,
+                        paddingTop: 0,
+                        color: colors.primary.heading
+                      }}
+                      onChangeText={(value) => {
+                        noteTitle.current = value;
+                      }}
+                      defaultValue={noteTitle.current}
+                      blurOnSubmit={false}
+                      onSubmitEditing={() => {
+                        editorRef.current.focus();
+                      }}
+                    />
+                  )}
                   <Button
                     title="Done"
                     type="accent"

apps/theme-builder/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@notesnook/theme-builder",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@notesnook/theme-builder",
-      "version": "1.1.1",
+      "version": "1.2.0",
       "license": "GPL-3.0-or-later",
       "dependencies": {
         "@emotion/react": "11.11.1",
@@ -18,17 +18,18 @@
         "@theme-ui/components": "^0.14.7",
         "@theme-ui/core": "^0.14.7",
         "@trpc/client": "^10.38.3",
+        "@types/react-dom": "^18.3.0",
         "clipboard-polyfill": "^4.0.0",
         "file-saver": "^2.0.5",
         "katex": "^0.16.2",
         "react": "18.2.0",
-        "react-dom": "18.2.0"
+        "react-dom": "^18.2.0"
       },
       "devDependencies": {
         "@babel/core": "^7.22.5",
         "@types/babel__core": "^7.20.1",
         "@types/file-saver": "^2.0.5",
-        "@types/react": "^18.2.17",
+        "@types/react": "^18.2.39",
         "@vitejs/plugin-react-swc": "^3.3.2",
         "autoprefixer": "^10.4.14",
         "buffer": "^6.0.3",
@@ -978,7 +979,7 @@
     },
     "../web": {
       "name": "@notesnook/web",
-      "version": "3.0.0",
+      "version": "3.0.6",
       "hasInstallScript": true,
       "license": "GPL-3.0-or-later",
       "dependencies": {
@@ -2026,6 +2027,15 @@
         "@trpc/server": "10.38.3"
       }
     },
+    "node_modules/@trpc/server": {
+      "version": "10.38.3",
+      "resolved": "https://registry.npmjs.org/@trpc/server/-/server-10.38.3.tgz",
+      "integrity": "sha512-9s8/kwo2IDB5hwB2SKZZrfevRhdb1f9fdXtIYd3lbQuf2jQaC/LyQuHaIQjDQoUx9updBfsHXcFFPiCP1DL6pg==",
+      "funding": [
+        "https://trpc.io/sponsor"
+      ],
+      "peer": true
+    },
     "node_modules/@types/babel__core": {
       "version": "7.20.1",
       "dev": true,
@@ -2098,25 +2108,30 @@
     },
     "node_modules/@types/prop-types": {
       "version": "15.7.5",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/@types/react": {
       "version": "18.2.39",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.39.tgz",
       "integrity": "sha512-Oiw+ppED6IremMInLV4HXGbfbG6GyziY3kqAwJYOR0PNbkYDmLWQA3a95EhdSmamsvbkJN96ZNN+YD+fGjzSBA==",
-      "dev": true,
       "dependencies": {
         "@types/prop-types": "*",
         "@types/scheduler": "*",
         "csstype": "^3.0.2"
       }
     },
+    "node_modules/@types/react-dom": {
+      "version": "18.3.0",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.0.tgz",
+      "integrity": "sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/scheduler": {
       "version": "0.16.8",
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.8.tgz",
-      "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==",
-      "dev": true
+      "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A=="
     },
     "node_modules/@types/styled-system": {
       "version": "5.1.16",

apps/theme-builder/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@notesnook/theme-builder",
   "description": "Your private note taking space",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "private": true,
   "main": "./src/app.js",
   "homepage": "https://notesnook.com/",
@@ -17,18 +17,18 @@
     "@theme-ui/components": "^0.14.7",
     "@theme-ui/core": "^0.14.7",
     "@trpc/client": "^10.38.3",
+    "@types/react-dom": "^18.3.0",
     "clipboard-polyfill": "^4.0.0",
     "file-saver": "^2.0.5",
     "katex": "^0.16.2",
     "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@babel/core": "^7.22.5",
     "@types/babel__core": "^7.20.1",
     "@types/file-saver": "^2.0.5",
     "@types/react": "^18.2.39",
-    "@types/react": "^18.2.17",
     "@vitejs/plugin-react-swc": "^3.3.2",
     "autoprefixer": "^10.4.14",
     "buffer": "^6.0.3",

apps/theme-builder/src/index.html

@@ -2,19 +2,10 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
-    <link
-      rel="icon"
-      type="image/png"
-      sizes="32x32"
-      href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAHUUExURUxpcf////////////////////////////////////////////////////////////////////////////////////39/f39/f////////////////////////////////z8/O3s7P7+/vTz8wAAAPz7++/v7/Py8u/u7vDv7+7t7dfX1/79/ezr66Kiovv6+vf29vX09OTj4w0NDfv7++Ti4vr6+vT09Ovq6vn5+f39/fb19dnX1/b29tvb29/f3xMTE/j4+Pn4+O7s7MnJyerq6uno6M/Pz8jIyN3d3dnZ2d7e3kZGRvj39/38/Pf39+zs7PDw8OPi4ubl5cvLy+rp6czMzPLy8vPz887Ozujo6MrKyuDf3+fn59PT0+bm5uXl5c3NzfX19evr6wsLC+/t7ePj4/Ty8u3r6/Lx8eXk5OPh4dDQ0Nza2tjX19vZ2fHw8Nva2tLR0djW1tbW1tra2tLS0uHh4evp6eLi4tXV1djY2L+/vysrK7q6utHR0aGhoa6urrm5uQICAigoKCEhIZCQkFxcXBgYGFRUVBISEm1tbQ4ODklJSbu7uyAgID09PZqamkVFRXh4eLGxsTg4OOTk5FFRUQEBAQoKCnx8fBcXF7/+rP8AAAAfdFJOUwBOqO2h6KT9Mtyr5+w3Str+6TTZOjXb31M24O8BOd0PapSsAAABxElEQVQ4y2NgYOBgYWWXxwLYBdmEGICAjx9Z1NJJVQfB42QE6hdG0RaoaaCqhKSCl4EF1VxNVAXyTAzcaArUUBXwMLBjKDBBViDAII+uwBZFgTy6AjU1awIKNKz1aa0g1VBfB58CDS08CuIb40AKzLAqsJKXN2tXacChwKS+rTtB3tJHRU9ewxmbFZ6tKiqTrSAKdIO1LDEUaPeoqMzsUwAp0NIt8Uj0ijJXQFVgnDJVZcK0XrACXcXY0sjoHM8AfyUkBbOn9KvMmgRSYFEW4hUVqJagHeaShqTAwX7ijJQusAkW5VXRHu6eruFqaigKkqarqAAVKFbYxWiYq1XGedijuMHBWz6xo7m2Rl7RwtvdJaw6NjzCFl2BVVNdshJQgbqBsqtdpIu7nasjXIFXS2cyRL2CW6i6JTCgFCLitUPs4QrM7cDmKZi7FRYVm6o5QeLbDGICLNEqJAVk59rk2djY5Me4FThawQOKFSzrrxmaZWpqBAamQUGmwRaakNTNzMAm7+ekrKmlqOjsrIgAGcAA1ci0NVPiYhAV8zVURgbp6nBg7isuwsDAKKfkp4AEVOHASklKApS9JZmY5bECaS5ZGQYA3vqpy6NoYh0AAABXelRYdFJhdyBwcm9maWxlIHR5cGUgaXB0YwAAeJzj8gwIcVYoKMpPy8xJ5VIAAyMLLmMLEyMTS5MUAxMgRIA0w2QDI7NUIMvY1MjEzMQcxAfLgEigSi4A6hcRdPJCNZUAAAAASUVORK5CYII="
-    />
-    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
-    <!-- <link rel="manifest" href="/site.webmanifest" /> -->
-    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#01c352" />
-    <meta name="msapplication-TileColor" content="#01c352" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="icon" type="image/png" href="/favicon.png" />
+    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
     <meta name="theme-color" content="#01c352" />
-
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
@@ -49,13 +40,26 @@
     />
     <meta name="twitter:card" content="summary_large_image" />
     <title>Notesnook Theme Builder</title>
+    <style id="theme-colors">
+      #splash {
+        display: none !important;
+      }
+    </style>
+    <script type="module">
+      import { themeToCSS } from "@notesnook/theme";
 
-    <script nonce="7WIq8hRwApoXhctoGZZthMLYQLRNiprTwcPi6Azdf">
       const colorScheme = JSON.parse(
         window.localStorage.getItem("colorScheme") || '"light"'
       );
       const root = document.querySelector("html");
       if (root) root.setAttribute("data-theme", colorScheme);
+
+      const theme = window.localStorage.getItem(`theme:${colorScheme}`);
+      if (theme) {
+        const css = themeToCSS(JSON.parse(theme));
+        const stylesheet = document.getElementById("theme-colors");
+        if (stylesheet) stylesheet.innerHTML = css;
+      }
     </script>
     <script type="module" src="/index.tsx"></script>
     <style>
@@ -63,21 +67,6 @@
         overscroll-behavior: none;
       }
 
-      html[data-theme="dark"] {
-        --bg: #0f0f0f;
-        --fg: #fff;
-        --three-bars-bg: #494949;
-        --gradient-stop-color: #111111;
-        --n-letter-color: #e1e1e1;
-      }
-
-      html[data-theme="light"] {
-        --bg: #fff;
-        --three-bars-bg: #bebebe;
-        --gradient-stop-color: #fff9f9;
-        --n-letter-color: #000;
-      }
-
       html[data-theme="light"] .react-loading-skeleton {
         --base-color: var(--background-secondary);
         --highlight-color: #var(--background-secondary);
@@ -88,6 +77,19 @@
         --highlight-color: var(--background-secondary);
       }
 
+      #splash {
+        background-color: var(--background);
+        height: 100%;
+        width: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+      }
+
       #splash svg {
         transform: scale(1);
         animation: pulse 2s infinite;
@@ -95,7 +97,7 @@
 
       @keyframes pulse {
         0% {
-          transform: scale(0.95);
+          transform: scale(0.9);
         }
 
         70% {
@@ -103,7 +105,7 @@
         }
 
         100% {
-          transform: scale(0.95);
+          transform: scale(0.9);
         }
       }
 
@@ -128,20 +130,9 @@
         overflow: hidden;
       }
 
-      @keyframes fadeUp {
-        0% {
-          transform: translateY(500px);
-          opacity: 0;
-        }
-
-        80% {
-          transform: translateY(0px);
-          opacity: 0.7;
-        }
-
-        100% {
-          opacity: 1;
-        }
+      #root {
+        display: flex;
+        flex-direction: column;
       }
 
       /* svg {
@@ -171,85 +162,40 @@
     </style>
   </head>
 
-  <body>
+  <body class="theme-scope-base">
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <!--     <script src="https://cdn.jsdelivr.net/npm/highlightjs@9.16.2/highlight.pack.min.js"></script>
  -->
     <div id="root"></div>
-    <div
-      id="splash"
-      style="
-        background-color: var(--bg);
-        height: 100%;
-        width: 100%;
-        position: absolute;
-        top: 0;
-        left: 0;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-      "
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      style="height: 0; width: 0; z-index: -1; position: absolute"
     >
-      <svg viewBox="0 0 339 339" style="width: 150px">
-        <defs />
-        <defs>
-          <linearGradient
-            xlink:href="#a"
-            id="b"
-            x1="188.61227"
-            x2="193.54405"
-            y1="165.2058"
-            y2="216.81519"
-            gradientTransform="rotate(5 4448 -4204) scale(2.93671)"
-            gradientUnits="userSpaceOnUse"
-          />
-
-          <linearGradient id="a">
-            <stop offset="0" />
-            <stop
-              offset="1"
-              stop-color="var(--gradient-stop-color)"
-              stop-opacity="0"
-            />
-          </linearGradient>
-          <linearGradient
-            id="c"
-            x1="167.8"
-            x2="270.6"
-            y1="76.9"
-            y2="64.2"
-            gradientTransform="rotate(5 465 -2050) scale(1.50082)"
-            gradientUnits="userSpaceOnUse"
-            xlink:href="#a"
-          />
-        </defs>
-        <g transform="translate(0 42)">
-          <path fill="url(#b)" d="M160 205l154 42-141 44-155-42z" />
-          <path fill="url(#c)" d="M160-35v240l154 42 1-253z" />
+      <symbol id="full-logo" viewBox="0 0 1000 1000">
+        <rect
+          width="1000"
+          height="1000"
+          rx="30%"
+          ry="30%"
+          style="fill: var(--paragraph)"
+        />
+        <g transform="translate(275,176.95254)">
           <path
-            fill="none"
-            stroke-width="1.2"
-            d="M160 205V-35m0 240L18 249m142-44l154 41"
-          />
-          <path
-            fill="var(--n-letter-color)"
-            d="M84 109l35 54V98l21-7v91l-27 9-35-54v65l-21 6v-91z"
-          />
-          <rect
-            width="86.1"
-            height="12.6"
-            x="185"
-            y="97"
-            fill="var(--three-bars-bg)"
-            ry="2.3"
-            transform="skewY(15) scale(.9669 1)"
-          />
-          <path
-            fill="var(--three-bars-bg)"
-            d="M181 169l99 26 2 3v8c0 1-1 2-2 1l-99-26-2-3v-7c0-2 1-2 2-2zm0-47l99 27 2 2v8l-2 2-99-27c-1 0-2-1-2-3v-7l2-2z"
+            style="fill: var(--background)"
+            d="M437.985 493.919c-17.255 50.411-51.835 93.065-97.588 120.372-45.752 27.307-99.71 37.496-152.269 28.753-52.56-8.743-100.313999-35.85-134.763-76.498C18.916 525.898.006 474.347 0 421.064v-110.25l79.121001 33.053v77.152c-.007 20.779 4.434 41.318 13.024 60.237C100.735 500.176 113.276 517.037 128.925 530.707c2.97 2.587 6.053 5.107 9.236 7.459 23.357 17.388 51.402 27.352 80.494 28.597.99 0 1.946.079 2.925.101.979.023 2.25 0 3.375 0h3.375c1.125 0 1.935 0 2.925-.101 29.081-1.248 57.116-11.203 80.471-28.575 3.173-2.351 6.255-4.86 9.237-7.447 20.556-17.98 35.656-41.366 43.582-67.5zM450 225v196.065c0 2.531 0 5.074-.158 7.605l-78.963-33.019V225c-.013-37.684-14.607-73.901-40.725-101.066-26.119-27.164003-61.735-43.168003-99.389-44.660003-37.655-1.492-74.426 11.644-102.611 36.657003-28.185999 25.013-45.599999 59.962-48.593999 97.526-.281 3.803-.439 7.662-.439 11.543v48.712L0 240.637V0h225c59.674 0 116.903 23.705 159.099 65.901C426.295 108.097 450 165.326 450 225Z"
           />
         </g>
+      </symbol>
+      <symbol id="themed-logo" viewBox="0 0 450 646.09491">
+        <path
+          style="fill: var(--paragraph)"
+          d="M437.985 493.919c-17.255 50.411-51.835 93.065-97.588 120.372-45.752 27.307-99.71 37.496-152.269 28.753-52.56-8.743-100.313999-35.85-134.763-76.498C18.916 525.898.006 474.347 0 421.064v-110.25l79.121001 33.053v77.152c-.007 20.779 4.434 41.318 13.024 60.237C100.735 500.176 113.276 517.037 128.925 530.707c2.97 2.587 6.053 5.107 9.236 7.459 23.357 17.388 51.402 27.352 80.494 28.597.99 0 1.946.079 2.925.101.979.023 2.25 0 3.375 0h3.375c1.125 0 1.935 0 2.925-.101 29.081-1.248 57.116-11.203 80.471-28.575 3.173-2.351 6.255-4.86 9.237-7.447 20.556-17.98 35.656-41.366 43.582-67.5zM450 225v196.065c0 2.531 0 5.074-.158 7.605l-78.963-33.019V225c-.013-37.684-14.607-73.901-40.725-101.066-26.119-27.164003-61.735-43.168003-99.389-44.660003-37.655-1.492-74.426 11.644-102.611 36.657003-28.185999 25.013-45.599999 59.962-48.593999 97.526-.281 3.803-.439 7.662-.439 11.543v48.712L0 240.637V0h225c59.674 0 116.903 23.705 159.099 65.901C426.295 108.097 450 165.326 450 225Z"
+        />
+      </symbol>
+    </svg>
+    <div id="splash" class="hidden">
+      <svg style="height: 120px">
+        <use href="#themed-logo" />
       </svg>
     </div>
     <div id="dialogContainer"></div>

apps/theme-builder/src/index.tsx

@@ -18,31 +18,59 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import { init } from "@notesnook/web/src/bootstrap";
-import { render } from "react-dom";
+import { createRoot } from "react-dom/client";
+import {
+  ErrorBoundary,
+  ErrorComponent
+} from "@notesnook/web/src/components/error-boundary";
 import { BaseThemeProvider } from "@notesnook/web/src/components/theme-provider";
 import { App } from "./app";
 
 renderApp();
 
 async function renderApp() {
-  const { component, props } = await init();
+  const rootElement = document.getElementById("root");
+  if (!rootElement) return;
+  const root = createRoot(rootElement);
+  try {
+    const { component, props } = await init();
 
-  const { default: Component } = await component();
-  render(
-    <BaseThemeProvider
-      sx={{
-        display: "flex",
-        "#app": { flex: 1, height: "unset" },
-        "& > :first-child:not(#menu-wrapper)": { flex: 1 },
-        height: "100%"
-      }}
-    >
-      <Component route={props?.route || "login:email"} />
-      <App />
-    </BaseThemeProvider>,
-    document.getElementById("root"),
-    () => {
-      document.getElementById("splash")?.remove();
-    }
-  );
+    const { useKeyStore } = await import(
+      "@notesnook/web/src/interfaces/key-store"
+    );
+    await useKeyStore.getState().init();
+
+    const { default: Component } = await component();
+    const { default: AppLock } = await import(
+      "@notesnook/web/src/views/app-lock"
+    );
+
+    root.render(
+      <ErrorBoundary>
+        <BaseThemeProvider
+          onRender={() => document.getElementById("splash")?.remove()}
+          sx={{
+            display: "flex",
+            "#app": { flex: 1, height: "unset" },
+            "& > :first-child:not(#menu-wrapper)": { flex: 1 },
+            height: "100%"
+          }}
+        >
+          <AppLock>
+            <Component route={props?.route || "login:email"} />
+          </AppLock>
+          <App />
+        </BaseThemeProvider>
+      </ErrorBoundary>
+    );
+  } catch (e) {
+    root.render(
+      <>
+        <ErrorComponent
+          error={e}
+          resetErrorBoundary={() => window.location.reload()}
+        />
+      </>
+    );
+  }
 }

apps/web/__e2e__/notes.test.ts

@@ -259,14 +259,15 @@ test("unlock a note for editing", async ({ page }) => {
   await page.waitForTimeout(150);
 
   await page.reload();
-  await page.waitForTimeout(500);
+  await notes.waitForList();
 
   const newContent = `${NOTE.content}${content}`;
   const editedNote = await notes.findNote({
     title: NOTE.title,
     content: newContent
   });
-  await editedNote?.openLockedNote(PASSWORD);
+  if (!editedNote) throw new Error("Could not find note.");
+  await editedNote.openLockedNote(PASSWORD);
   await notes.editor.waitForLoading();
   expect(await notes.editor.getContent("text")).toContain(newContent);
 });

apps/web/__e2e__/notes.test.ts-snapshots/export-html-Chromium-linux.txt

@@ -14,7 +14,7 @@
     
     
     
-    <link rel="stylesheet" href="https://app.notesnook.com/assets/editor-styles.css?d=0">
+    <link rel="stylesheet" href="https://app.notesnook.com/assets/editor-styles.css?d=1690887574068">
 
     <style>
 

apps/web/__e2e__/notes.test.ts-snapshots/export-html-Chromium-win32.txt

@@ -14,7 +14,7 @@
     
     
     
-    <link rel="stylesheet" href="https://app.notesnook.com/assets/editor-styles.css?d=0">
+    <link rel="stylesheet" href="https://app.notesnook.com/assets/editor-styles.css?d=1690887574068">
 
     <style>
 

apps/web/__e2e__/notes.test.ts-snapshots/export-html-Firefox-win32.txt

@@ -14,7 +14,7 @@
     
     
     
-    <link rel="stylesheet" href="https://app.notesnook.com/assets/editor-styles.css?d=0">
+    <link rel="stylesheet" href="https://app.notesnook.com/assets/editor-styles.css?d=1690887574068">
 
     <style>
 

apps/web/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@notesnook/web",
   "description": "Your private note taking space",
-  "version": "3.0.4",
+  "version": "3.0.8",
   "private": true,
   "main": "./src/app.js",
   "homepage": "https://notesnook.com/",
@@ -89,7 +89,8 @@
   "devDependencies": {
     "@babel/core": "^7.22.5",
     "@playwright/test": "^1.43.1",
-    "@swc/core": "1.3.61",
+    "@swc/core": "^1.5.24",
+    "@swc/plugin-react-remove-properties": "^2.0.4",
     "@trpc/server": "10.38.3",
     "@types/babel__core": "^7.20.1",
     "@types/event-source-polyfill": "^1.0.1",
@@ -104,8 +105,8 @@
     "@types/react-scroll-sync": "^0.9.0",
     "@types/tinycolor2": "^1.4.3",
     "@types/wicg-file-system-access": "^2020.9.6",
-    "@vitejs/plugin-react-swc": "3.3.2",
-    "autoprefixer": "^10.4.14",
+    "@vitejs/plugin-react-swc": "^3.7.0",
+    "autoprefixer": "^10.4.19",
     "better-sqlite3-multiple-ciphers": "^9.4.0",
     "buffer": "^6.0.3",
     "chalk": "^4.1.0",
@@ -116,14 +117,13 @@
     "ip": "^1.1.8",
     "lorem-ipsum": "^2.0.4",
     "otplib": "^12.0.1",
-    "rollup": "^3.29.4",
-    "rollup-plugin-visualizer": "^5.9.2",
-    "swc-plugin-react-remove-properties": "^0.1.4",
-    "vite": "^4.5.0",
-    "vite-plugin-env-compatible": "^1.1.1",
-    "vite-plugin-pwa": "^0.16.3",
-    "vite-plugin-svgr": "^3.2.0",
-    "vitest": "^0.34.6",
+    "rollup": "^4.18.0",
+    "rollup-plugin-visualizer": "^5.12.0",
+    "vite": "^5.2.12",
+    "vite-plugin-env-compatible": "^2.0.1",
+    "vite-plugin-pwa": "^0.20.0",
+    "vite-plugin-svgr": "^4.2.0",
+    "vitest": "^1.6.0",
     "workbox-core": "^7.0.0",
     "workbox-expiration": "^7.0.0",
     "workbox-precaching": "^7.0.0",

apps/web/src/app.tsx

@@ -22,10 +22,8 @@ import { Box, Flex } from "@theme-ui/components";
 import { ScopedThemeProvider } from "./components/theme-provider";
 import useMobile from "./hooks/use-mobile";
 import useTablet from "./hooks/use-tablet";
-import useDatabase from "./hooks/use-database";
 import { useStore } from "./stores/app-store";
 import { Toaster } from "react-hot-toast";
-import { ViewLoader } from "./components/loaders/view-loader";
 import NavigationMenu from "./components/navigation-menu";
 import StatusBar from "./components/status-bar";
 import { EditorLoader } from "./components/loaders/editor-loader";
@@ -38,12 +36,13 @@ import {
   PanelResizeHandle,
   ImperativePanelHandle
 } from "react-resizable-panels";
+import GlobalMenuWrapper from "./components/global-menu-wrapper";
 
 new WebExtensionRelay();
 
-const GlobalMenuWrapper = React.lazy(
-  () => import("./components/global-menu-wrapper")
-);
+// const GlobalMenuWrapper = React.lazy(
+//   () => import("./components/global-menu-wrapper")
+// );
 const AppEffects = React.lazy(() => import("./app-effects"));
 const MobileAppEffects = React.lazy(() => import("./app-effects.mobile"));
 const HashRouter = React.lazy(() => import("./components/hash-router"));
@@ -51,26 +50,24 @@ const HashRouter = React.lazy(() => import("./components/hash-router"));
 function App() {
   const isMobile = useMobile();
   const [show, setShow] = useState(true);
-  const [isAppLoaded] = useDatabase();
   const isFocusMode = useStore((store) => store.isFocusMode);
 
   return (
     <>
-      {isAppLoaded && (
-        <Suspense fallback={<div style={{ display: "none" }} />}>
-          <div id="menu-wrapper">
-            <GlobalMenuWrapper />
-          </div>
-          <AppEffects setShow={setShow} />
-          {isMobile && (
-            <MobileAppEffects
-              sliderId="slider"
-              overlayId="overlay"
-              setShow={setShow}
-            />
-          )}
-        </Suspense>
-      )}
+      <Suspense fallback={<div style={{ display: "none" }} />}>
+        <div id="menu-wrapper">
+          <GlobalMenuWrapper />
+        </div>
+        <AppEffects setShow={setShow} />
+        {isMobile && (
+          <MobileAppEffects
+            sliderId="slider"
+            overlayId="overlay"
+            setShow={setShow}
+          />
+        )}
+      </Suspense>
+
       <Flex
         id="app"
         bg="background"
@@ -78,13 +75,9 @@ function App() {
         sx={{ overflow: "hidden", flexDirection: "column", height: "100%" }}
       >
         {isMobile ? (
-          <MobileAppContents isAppLoaded={isAppLoaded} />
+          <MobileAppContents />
         ) : (
-          <DesktopAppContents
-            isAppLoaded={isAppLoaded}
-            setShow={setShow}
-            show={show}
-          />
+          <DesktopAppContents setShow={setShow} show={show} />
         )}
         <Toaster containerClassName="toasts-container" />
       </Flex>
@@ -121,15 +114,10 @@ function SuspenseLoader<TComponent extends React.JSXElementConstructor<any>>({
 }
 
 type DesktopAppContentsProps = {
-  isAppLoaded: boolean;
   show: boolean;
   setShow: (show: boolean) => void;
 };
-function DesktopAppContents({
-  isAppLoaded,
-  show,
-  setShow
-}: DesktopAppContentsProps) {
+function DesktopAppContents({ show, setShow }: DesktopAppContentsProps) {
   const isFocusMode = useStore((store) => store.isFocusMode);
   const isTablet = useTablet();
   const [isNarrow, setIsNarrow] = useState(isTablet || false);
@@ -194,7 +182,7 @@ function DesktopAppContents({
                 borderRight: "1px solid var(--separator)"
               }}
             >
-              {isAppLoaded && <CachedRouter />}
+              <CachedRouter />
             </ScopedThemeProvider>
           </Panel>
           <PanelResizeHandle className="panel-resize-handle" />
@@ -208,7 +196,7 @@ function DesktopAppContents({
                 bg: "background"
               }}
             >
-              {isAppLoaded && <HashRouter />}
+              {<HashRouter />}
             </Flex>
           </Panel>
         </PanelGroup>
@@ -218,7 +206,7 @@ function DesktopAppContents({
   );
 }
 
-function MobileAppContents({ isAppLoaded }: { isAppLoaded: boolean }) {
+function MobileAppContents() {
   return (
     <FlexScrollContainer
       id="slider"
@@ -257,11 +245,7 @@ function MobileAppContents({ isAppLoaded }: { isAppLoaded: boolean }) {
           width: "100vw"
         }}
       >
-        <SuspenseLoader
-          condition={isAppLoaded}
-          component={CachedRouter}
-          fallback={<ViewLoader />}
-        />
+        <CachedRouter />
         <Box
           id="overlay"
           sx={{
@@ -290,7 +274,7 @@ function MobileAppContents({ isAppLoaded }: { isAppLoaded: boolean }) {
         <SuspenseLoader
           fallback={<EditorLoader />}
           component={HashRouter}
-          condition={isAppLoaded}
+          condition={true}
         />
       </Flex>
     </FlexScrollContainer>

apps/web/src/bootstrap.tsx

@@ -18,11 +18,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import "./polyfills";
-import "@notesnook/core/dist/types";
 import { getCurrentHash, getCurrentPath, makeURL } from "./navigation";
 import Config from "./utils/config";
 
-import { initializeLogger, logger } from "./utils/logger";
+// import { initializeLogger, logger } from "./utils/logger";
 import type { AuthProps } from "./views/auth";
 import { initializeFeatureChecks } from "./utils/feature-check";
 
@@ -102,7 +101,7 @@ const sessionExpiryExceptions: Routes[] = [
 
 function getRoute(): RouteWithPath<AuthProps> | RouteWithPath {
   const path = getCurrentPath() as Routes;
-  logger.info(`Getting route for path: ${path}`);
+  // logger.info(`Getting route for path: ${path}`);
 
   const signup = redirectToRegistration(path);
   const sessionExpired = isSessionExpired(path);
@@ -129,7 +128,7 @@ function redirectToRegistration(path: Routes): RouteWithPath<AuthProps> | null {
 function isSessionExpired(path: Routes): RouteWithPath<AuthProps> | null {
   const isSessionExpired = Config.get("sessionExpired", false);
   if (isSessionExpired && !sessionExpiryExceptions.includes(path)) {
-    logger.info(`User session has expired. Routing to /sessionexpired`);
+    // logger.info(`User session has expired. Routing to /sessionexpired`);
 
     window.history.replaceState(
       {},
@@ -143,7 +142,10 @@ function isSessionExpired(path: Routes): RouteWithPath<AuthProps> | null {
 
 export async function init() {
   await initializeFeatureChecks();
-  await initializeLogger();
+
+  await import("./utils/logger").then(({ initializeLogger }) =>
+    initializeLogger()
+  );
 
   const { path, route } = getRoute();
   return { ...route, path };

apps/web/src/common/db.ts

@@ -25,7 +25,8 @@ import { database } from "@notesnook/common";
 import { createDialect } from "./sqlite";
 import { isFeatureSupported } from "../utils/feature-check";
 import { generatePassword } from "../utils/password-generator";
-import { deriveKey } from "../interfaces/key-store";
+import { deriveKey, useKeyStore } from "../interfaces/key-store";
+import { logManager } from "@notesnook/core/dist/logger";
 
 const db = database;
 async function initializeDatabase(persistence: DatabasePersistence) {
@@ -33,7 +34,6 @@ async function initializeDatabase(persistence: DatabasePersistence) {
 
   const { FileStorage } = await import("../interfaces/fs");
   const { Compressor } = await import("../utils/compressor");
-  const { useKeyStore } = await import("../interfaces/key-store");
 
   let databaseKey = await useKeyStore.getState().getValue("databaseKey");
   if (!databaseKey) {
@@ -58,7 +58,8 @@ async function initializeDatabase(persistence: DatabasePersistence) {
 
   database.setup({
     sqliteOptions: {
-      dialect: createDialect,
+      dialect: (name, init) =>
+        createDialect(persistence === "memory" ? ":memory:" : name, true, init),
       ...(IS_DESKTOP_APP || isFeatureSupported("opfs")
         ? { journalMode: "WAL", lockingMode: "exclusive" }
         : {
@@ -70,7 +71,7 @@ async function initializeDatabase(persistence: DatabasePersistence) {
       pageSize: 8192,
       cacheSize: -32000,
       password: Buffer.from(databaseKey).toString("hex"),
-      skipInitialization: !IS_DESKTOP_APP
+      skipInitialization: !IS_DESKTOP_APP && !!globalThis.SharedWorker
     },
     storage: storage,
     eventsource: EventSource,
@@ -97,10 +98,15 @@ async function initializeDatabase(persistence: DatabasePersistence) {
   // });
   // }
 
+  console.log("loading db");
   await db.init();
+  console.log("db loaded");
 
-  window.addEventListener("beforeunload", () => {
-    if (IS_DESKTOP_APP) db.sql().destroy();
+  window.addEventListener("beforeunload", async () => {
+    if (IS_DESKTOP_APP) {
+      await db.sql().destroy();
+      await logManager?.close();
+    }
   });
 
   logger.measure("Database initialization");

apps/web/src/common/dialog-controller.tsx

@@ -213,7 +213,7 @@ export function showLogoutConfirmation() {
   return confirm({
     title: `Logout?`,
     message:
-      "Logging out will delete all local data and reset the app. Make sure you have synced your data before logging out.",
+      "Logging out will clear all data stored on THIS DEVICE. Make sure you have synced all your changes before logging out.",
     positiveButtonText: "Yes",
     negativeButtonText: "No"
   });

apps/web/src/common/export.ts

@@ -100,17 +100,26 @@ export async function exportNotes(
       };
     }
   });
-  confirm({
-    title: `Exported ${result.count} notes`,
-    message:
-      result.errors.length > 0
-        ? `Export completed with ${result.errors.length} errors:
+  if (result instanceof Error) {
+    confirm({
+      title: `Export failed`,
+      message: result.stack || result.message,
+      positiveButtonText: "Okay"
+    });
+    return false;
+  } else {
+    confirm({
+      title: `Exported ${result.count} notes`,
+      message:
+        result.errors.length > 0
+          ? `Export completed with ${result.errors.length} errors:
 
 ${result.errors.map((e, i) => `${i + 1}. ${e.message}`).join("\n")}`
-        : "Export completed with 0 errors.",
-    positiveButtonText: "Okay"
-  });
-  return true;
+          : "Export completed with 0 errors.",
+      positiveButtonText: "Okay"
+    });
+    return true;
+  }
 }
 
 const FORMAT_TO_EXT = {

apps/web/src/common/index.ts

@@ -77,12 +77,19 @@ export async function introduceFeatures() {
 
 export const DEFAULT_CONTEXT = { colors: [], tags: [], notebook: {} };
 
-export async function createBackup(rescueMode = false) {
+export async function createBackup(
+  options: {
+    rescueMode?: boolean;
+    noVerify?: boolean;
+  } = {}
+) {
+  const { rescueMode, noVerify } = options;
   const { isLoggedIn } = useUserStore.getState();
   const { encryptBackups, toggleEncryptBackups } = useSettingStore.getState();
   if (!isLoggedIn && encryptBackups) toggleEncryptBackups();
 
-  const verified = rescueMode || encryptBackups || (await verifyAccount());
+  const verified =
+    rescueMode || encryptBackups || noVerify || (await verifyAccount());
   if (!verified) {
     showToast("error", "Could not create a backup: user verification failed.");
     return false;

apps/web/src/common/key-map.ts

@@ -18,9 +18,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import hotkeys from "hotkeys-js";
-import { navigate } from "../navigation";
-// import { store as themestore } from "../stores/theme-store";
 import { GlobalKeyboard } from "../utils/keyboard";
+import { useEditorStore } from "../stores/editor-store";
+import { useStore as useSearchStore } from "../stores/search-store";
+import { useEditorManager } from "../components/editor/manager";
 
 const KEYMAP = [
   // {
@@ -57,11 +58,24 @@ const KEYMAP = [
     keys: ["command+f", "ctrl+f"],
     description: "Search all notes",
     global: false,
-    action: (e) => {
-      if (e.target?.classList.contains("ProseMirror")) return;
+    action: (e: KeyboardEvent) => {
+      const isInEditor =
+        e.target instanceof HTMLElement &&
+        !!e.target?.closest(".editor-container");
+      if (isInEditor) {
+        const activeSession = useEditorStore.getState().getActiveSession();
+        if (activeSession?.type === "readonly") {
+          e.preventDefault();
+          const editor = useEditorManager
+            .getState()
+            .getEditor(activeSession.id);
+          editor?.editor?.startSearch();
+        }
+        return;
+      }
       e.preventDefault();
 
-      navigate("/search/notes");
+      useSearchStore.setState({ isSearching: true, searchType: "notes" });
     }
   }
   // {
@@ -137,7 +151,11 @@ export function registerKeyMap() {
   KEYMAP.forEach((key) => {
     hotkeys(
       key.keys.join(","),
-      { element: key.global ? GlobalKeyboard : window },
+      {
+        element: key.global
+          ? (GlobalKeyboard as unknown as HTMLElement)
+          : document.body
+      },
       key.action
     );
   });

apps/web/src/common/notices.ts

@@ -177,7 +177,7 @@ function isIgnored(key: keyof typeof NoticesData) {
 let openedToast: { hide: () => void } | null = null;
 async function saveBackup() {
   if (IS_DESKTOP_APP) {
-    await createBackup();
+    await createBackup({ noVerify: true });
   } else if (isUserPremium() && !IS_TESTING) {
     if (openedToast !== null) return;
     openedToast = showToast(

apps/web/src/common/sqlite/index.desktop.ts

@@ -18,39 +18,93 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import {
-  SqliteDriver as KSqliteDriver,
-  SqliteDialectConfig,
   Dialect,
   SqliteAdapter,
   SqliteIntrospector,
-  SqliteQueryCompiler
+  SqliteQueryCompiler,
+  DatabaseConnection,
+  QueryResult,
+  CompiledQuery,
+  Driver
 } from "kysely";
 import { desktop } from "../desktop-bridge";
+import Worker from "./sqlite.worker.desktop.ts?worker";
+import type { SQLiteWorker } from "./sqlite.worker.desktop";
+import { wrap, Remote } from "comlink";
+import { Mutex } from "async-mutex";
 
-class SqliteDriver extends KSqliteDriver {
-  constructor(private readonly config: SqliteDialectConfig & { name: string }) {
-    super(config);
+class SqliteDriver implements Driver {
+  connection?: DatabaseConnection;
+  private connectionMutex = new Mutex();
+  worker: Remote<SQLiteWorker> = wrap<SQLiteWorker>(new Worker());
+  constructor(private readonly config: { name: string }) {}
+
+  async init(): Promise<void> {
+    const path = await desktop!.integration.resolvePath.query({
+      filePath: `userData/${this.config.name}.sql`
+    });
+    await this.worker.open(path);
+    this.connection = new SqliteWorkerConnection(this.worker);
   }
+
+  async acquireConnection(): Promise<DatabaseConnection> {
+    if (!this.connection) throw new Error("Driver not initialized.");
+
+    // SQLite only has one single connection. We use a mutex here to wait
+    // until the single connection has been released.
+    await this.connectionMutex.waitForUnlock();
+    await this.connectionMutex.acquire();
+    return this.connection;
+  }
+
+  async beginTransaction(connection: DatabaseConnection): Promise<void> {
+    await connection.executeQuery(CompiledQuery.raw("begin"));
+  }
+
+  async commitTransaction(connection: DatabaseConnection): Promise<void> {
+    await connection.executeQuery(CompiledQuery.raw("commit"));
+  }
+
+  async rollbackTransaction(connection: DatabaseConnection): Promise<void> {
+    await connection.executeQuery(CompiledQuery.raw("rollback"));
+  }
+
+  async releaseConnection(): Promise<void> {
+    this.connectionMutex.release();
+  }
+
+  async destroy(): Promise<void> {
+    await this.worker.close();
+  }
+
   async delete() {
     const path = await desktop!.integration.resolvePath.query({
       filePath: `userData/${this.config.name}.sql`
     });
-    await desktop?.integration.deleteFile.query(path);
-    await this.destroy();
+    await this.worker.delete(path);
   }
 }
 
-export const createDialect = (name: string): Dialect => {
+class SqliteWorkerConnection implements DatabaseConnection {
+  constructor(private readonly worker: Remote<SQLiteWorker>) {}
+
+  streamQuery<R>(): AsyncIterableIterator<QueryResult<R>> {
+    throw new Error("wasqlite driver doesn't support streaming");
+  }
+
+  async executeQuery<R>(
+    compiledQuery: CompiledQuery<unknown>
+  ): Promise<QueryResult<R>> {
+    const { parameters, sql } = compiledQuery;
+    return this.worker.run(sql, parameters as any) as unknown as QueryResult<R>;
+  }
+}
+
+export const createDialect = (name: string, _encrypted: boolean): Dialect => {
   return {
     createDriver: () =>
       new SqliteDriver({
-        name,
-        database: async () => {
-          const path = await desktop!.integration.resolvePath.query({
-            filePath: `userData/${name}.sql`
-          });
-          return window.createSQLite3Database(path).unsafeMode(true);
-        }
+        name
       }),
     createAdapter: () => new SqliteAdapter(),
     createIntrospector: (db) => new SqliteIntrospector(db),

apps/web/src/common/sqlite/index.ts

@@ -23,7 +23,10 @@ import {
   SqliteIntrospector,
   Dialect
 } from "kysely";
-import { WaSqliteWorkerDriver } from "./wa-sqlite-kysely-driver";
+import {
+  WaSqliteWorkerMultipleTabDriver,
+  WaSqliteWorkerSingleTabDriver
+} from "./wa-sqlite-kysely-driver";
 import { isFeatureSupported } from "../../utils/feature-check";
 
 declare module "kysely" {
@@ -34,15 +37,23 @@ declare module "kysely" {
 
 export const createDialect = (
   name: string,
+  encrypted: boolean,
   init?: () => Promise<void>
 ): Dialect => {
   return {
     createDriver: () =>
-      new WaSqliteWorkerDriver({
-        async: !isFeatureSupported("opfs"),
-        dbName: name,
-        init
-      }),
+      globalThis.SharedWorker
+        ? new WaSqliteWorkerMultipleTabDriver({
+            async: !isFeatureSupported("opfs"),
+            dbName: name,
+            encrypted,
+            init
+          })
+        : new WaSqliteWorkerSingleTabDriver({
+            async: !isFeatureSupported("opfs"),
+            dbName: name,
+            encrypted
+          }),
     createAdapter: () => new SqliteAdapter(),
     createIntrospector: (db) => new SqliteIntrospector(db),
     createQueryCompiler: () => new SqliteQueryCompiler()

apps/web/src/common/sqlite/shared-service.ts

@@ -83,7 +83,7 @@ export class SharedService<T extends object> extends EventTarget {
   }
 
   activate(
-    portProviderFunc: () => MessagePort | Promise<MessagePort>,
+    portProviderFunc: () => Promise<{ port: MessagePort; onclose: () => void }>,
     onClientConnected: () => Promise<void>
   ) {
     if (this.#onDeactivate) return;
@@ -97,7 +97,7 @@ export class SharedService<T extends object> extends EventTarget {
     navigator.locks
       .request(LOCK_NAME, { signal: this.#onDeactivate.signal }, async () => {
         // Get the port to request client ports.
-        const port = await portProviderFunc();
+        const { port, onclose } = await portProviderFunc();
         port.start();
 
         // Listen for client requests. A separate BroadcastChannel
@@ -159,6 +159,7 @@ export class SharedService<T extends object> extends EventTarget {
         // Release the lock only on user abort or context destruction.
         return new Promise((_, reject) => {
           this.#onDeactivate?.signal.addEventListener("abort", () => {
+            onclose();
             broadcastChannel.close();
             reject(this.#onDeactivate?.signal.reason);
           });
@@ -181,7 +182,9 @@ export class SharedService<T extends object> extends EventTarget {
   }
 
   #sendPortToClient(message: any, port: MessagePort) {
-    sharedWorker?.port.postMessage(message, [port]);
+    if (!sharedWorker)
+      throw new Error("Shared worker is not supported in this environment.");
+    sharedWorker.port.postMessage(message, [port]);
   }
 
   async #getClientId() {

apps/web/src/common/sqlite/sqlite.worker.desktop.ts

@@ -0,0 +1,25 @@
+/*
+This file is part of the Notesnook project (https://notesnook.com/)
+
+Copyright (C) 2023 Streetwriters (Private) Limited
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+import { SQLite } from "@notesnook/desktop";
+import { expose } from "comlink";
+
+export type SQLiteWorker = typeof SQLite.prototype;
+const db = new SQLite();
+expose(db);

apps/web/src/common/sqlite/sqlite.worker.ts

@@ -19,7 +19,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import type { SQLiteAPI, SQLiteCompatibleType } from "./sqlite-types";
 import { Factory, SQLITE_ROW, SQLiteError } from "./sqlite-api";
-import { transfer } from "comlink";
+import { expose, transfer } from "comlink";
 import type { RunMode } from "./type";
 import { QueryResult } from "kysely";
 import { DatabaseSource } from "./sqlite-export";
@@ -32,219 +32,243 @@ type PreparedStatement = {
   columns: string[];
 };
 
-let sqlite: SQLiteAPI;
-let db: number | undefined = undefined;
-let vfs: IDBBatchAtomicVFS | AccessHandlePoolVFS | null = null;
-let initialized = false;
-const preparedStatements: Map<string, PreparedStatement> = new Map();
-const retryCounter: Record<string, number> = {};
-console.log("new sqlite worker");
-
-async function open(dbName: string, async: boolean, url?: string) {
-  if (db) {
-    console.error("Database is already initialized", db);
-    return;
-  }
-
-  const option = url ? { locateFile: () => url } : {};
-  const sqliteModule = async
-    ? await import("./wa-sqlite-async").then(
-        ({ default: SQLiteAsyncESMFactory }) => SQLiteAsyncESMFactory(option)
-      )
-    : await import("./wa-sqlite").then(({ default: SQLiteSyncESMFactory }) =>
-        SQLiteSyncESMFactory(option)
-      );
-  sqlite = Factory(sqliteModule);
-  vfs = await getVFS(dbName, async);
-
-  sqlite.vfs_register(vfs, false);
-  db = await sqlite.open_v2(dbName, undefined, `multipleciphers-${vfs.name}`);
-}
-
-/**
- * Wrapper function for preparing SQL statements with caching
- * to avoid unnecessary computations.
- */
-async function prepare(sql: string) {
-  if (!db) throw new Error("Database is not initialized.");
-  try {
-    const cached = preparedStatements.get(sql);
-    if (cached !== undefined) return cached;
-
-    const str = sqlite.str_new(db, sql);
-    const prepared = await sqlite.prepare_v2(db, sqlite.str_value(str));
-    if (!prepared) return;
-
-    const statement: PreparedStatement = {
-      stmt: prepared.stmt,
-      columns: sqlite.column_names(prepared.stmt)
-    };
-    preparedStatements.set(sql, statement);
-
-    sqlite.str_finish(str);
-
-    // reset retry count on success
-    retryCounter[sql] = 0;
-    return statement;
-  } catch (ex) {
-    console.error(ex);
-
-    // statement prepare process can be flaky so retry at least 5 times
-    // before giving up.
-    if (retryCounter[sql] < 5) {
-      retryCounter[sql] = (retryCounter[sql] || 0) + 1;
-      console.warn("Failed to prepare statement. Retrying:", sql);
-      return prepare(sql);
-    } else retryCounter[sql] = 0;
-
-    if (ex instanceof Error || ex instanceof SQLiteError)
-      ex.message += ` (query: ${sql})`;
-    throw ex;
-  }
-}
-
-async function run(
-  sql: string,
-  mode: RunMode,
-  parameters?: SQLiteCompatibleType[]
-) {
-  const prepared = await prepare(sql);
-  if (!prepared) return [];
-  try {
-    if (parameters) sqlite.bind_collection(prepared.stmt, parameters);
-
-    // fast path for exec statements
-    if (mode === "exec") {
-      while ((await sqlite.step(prepared.stmt)) === SQLITE_ROW);
-      return [];
-    }
-
-    const rows: Record<string, SQLiteCompatibleType>[] = [];
-    while ((await sqlite.step(prepared.stmt)) === SQLITE_ROW) {
-      const row = sqlite.row(prepared.stmt);
-      const acc: Record<string, SQLiteCompatibleType> = {};
-      row.forEach((v, i) => (acc[prepared.columns[i]] = v));
-      rows.push(acc);
-    }
-
-    return rows;
-  } catch (e) {
-    if (e instanceof Error || e instanceof SQLiteError)
-      e.message += ` (query: ${sql})`;
-    throw e;
-  } finally {
-    await sqlite
-      .reset(prepared.stmt)
-      // we must clear/destruct the prepared statement if it can't be reset
-      .catch(() =>
-        sqlite
-          .finalize(prepared.stmt)
-          // ignore error (we will just prepare a new statement)
-          .catch(console.error)
-          .finally(() => preparedStatements.delete(sql))
-      );
-  }
-}
-
-async function exec<R>(
-  mode: RunMode,
-  sql: string,
-  parameters?: SQLiteCompatibleType[]
-): Promise<QueryResult<R>> {
-  if (!sql.startsWith("PRAGMA key")) {
-    await waitForDatabase();
-  }
-  if (!db) throw new Error("No database is not opened.");
-
-  const rows = (await run(sql, mode, parameters)) as R[];
-  if (mode === "query") return { rows };
-
-  // initialize the database after it has been successfully decrypted.
-  // all queries prior to that must wait otherwise we get the
-  // "file is not a database" error
-  if (sql.startsWith("PRAGMA key")) await initialize();
-
-  return {
-    insertId: BigInt(sqlite.last_insert_rowid(db)),
-    numAffectedRows: BigInt(sqlite.changes(db)),
-    rows: mode === "raw" ? rows : []
-  };
-}
-
-async function close() {
-  if (!db) return;
-
-  for (const [_, prepared] of preparedStatements) {
-    await sqlite.finalize(prepared.stmt);
-  }
-  preparedStatements.clear();
-  await sqlite.close(db);
-  await vfs?.close();
-
-  db = undefined;
-  initialized = false;
-}
-
-async function exportDatabase(dbName: string, async: boolean) {
-  const vfs = await getVFS(dbName, async);
-  const stream = new ReadableStream(new DatabaseSource(vfs, dbName));
-  return transfer(stream, [stream]);
-}
-
-async function deleteDatabase(dbName: string, async: boolean) {
-  await close();
-  if (vfs) await vfs.delete();
-  else await (await getVFS(dbName, async)).delete();
-}
-
-async function getVFS(dbName: string, async: boolean) {
-  const vfs = async
-    ? await import("./IDBBatchAtomicVFS").then(
-        ({ IDBBatchAtomicVFS }) =>
-          new IDBBatchAtomicVFS(dbName, { durability: "strict" })
-      )
-    : await import("./AccessHandlePoolVFS").then(
-        ({ AccessHandlePoolVFS }) => new AccessHandlePoolVFS(dbName)
-      );
-  if ("isReady" in vfs) await vfs.isReady;
-  return vfs;
-}
-
-async function initialize() {
-  self.dispatchEvent(
-    new MessageEvent("message", { data: { type: "databaseInitialized" } })
-  );
-  console.log("Database initialized", db);
-  initialized = true;
-}
-
-const worker = {
-  close,
-  open,
-  run: exec,
-  export: exportDatabase,
-  delete: deleteDatabase
+type SQLiteOptions = {
+  async: boolean;
+  url?: string;
+  encrypted: boolean;
 };
 
-export type SQLiteWorker = typeof worker;
+class _SQLiteWorker {
+  sqlite!: SQLiteAPI;
+  db: number | undefined = undefined;
+  vfs: IDBBatchAtomicVFS | AccessHandlePoolVFS | null = null;
+  initialized = false;
+  preparedStatements: Map<string, PreparedStatement> = new Map();
+  retryCounter: Record<string, number> = {};
+  encrypted = false;
+  name = "";
+  async = false;
+
+  async open(name: string, options: SQLiteOptions) {
+    if (this.db) {
+      console.error("Database is already initialized", this.db);
+      return;
+    }
+
+    this.encrypted = options.encrypted;
+    this.name = name;
+    this.async = options.async;
+
+    const option = options.url ? { locateFile: () => options.url } : {};
+    const sqliteModule = options.async
+      ? await import("./wa-sqlite-async").then(
+          ({ default: SQLiteAsyncESMFactory }) => SQLiteAsyncESMFactory(option)
+        )
+      : await import("./wa-sqlite").then(({ default: SQLiteSyncESMFactory }) =>
+          SQLiteSyncESMFactory(option)
+        );
+    this.sqlite = Factory(sqliteModule);
+    this.vfs = await this.getVFS(name, options.async);
+
+    this.sqlite.vfs_register(this.vfs, false);
+    this.db = await this.sqlite.open_v2(
+      name,
+      undefined,
+      `multipleciphers-${this.vfs.name}`
+    );
+  }
+
+  /**
+   * Wrapper function for preparing SQL statements with caching
+   * to avoid unnecessary computations.
+   */
+  async prepare(sql: string): Promise<PreparedStatement | undefined> {
+    if (!this.db) throw new Error("Database is not initialized.");
+    try {
+      const cached = this.preparedStatements.get(sql);
+      if (cached !== undefined) return cached;
+
+      const str = this.sqlite.str_new(this.db, sql);
+      const prepared = await this.sqlite.prepare_v2(
+        this.db,
+        this.sqlite.str_value(str)
+      );
+      if (!prepared) return;
+
+      const statement: PreparedStatement = {
+        stmt: prepared.stmt,
+        columns: this.sqlite.column_names(prepared.stmt)
+      };
+      this.preparedStatements.set(sql, statement);
+
+      this.sqlite.str_finish(str);
+
+      // reset retry count on success
+      this.retryCounter[sql] = 0;
+      return statement;
+    } catch (ex) {
+      console.error(ex);
+
+      // statement prepare process can be flaky so retry at least 5 times
+      // before giving up.
+      if (this.retryCounter[sql] < 5) {
+        this.retryCounter[sql] = (this.retryCounter[sql] || 0) + 1;
+        console.warn("Failed to prepare statement. Retrying:", sql);
+        return this.prepare(sql);
+      } else this.retryCounter[sql] = 0;
+
+      if (ex instanceof Error || ex instanceof SQLiteError)
+        ex.message += ` (query: ${sql})`;
+      throw ex;
+    }
+  }
+
+  async exec(sql: string, mode: RunMode, parameters?: SQLiteCompatibleType[]) {
+    const prepared = await this.prepare(sql);
+    if (!prepared) return [];
+    try {
+      if (parameters) this.sqlite.bind_collection(prepared.stmt, parameters);
+
+      // fast path for exec statements
+      if (mode === "exec") {
+        while ((await this.sqlite.step(prepared.stmt)) === SQLITE_ROW);
+        return [];
+      }
+
+      const rows: Record<string, SQLiteCompatibleType>[] = [];
+      while ((await this.sqlite.step(prepared.stmt)) === SQLITE_ROW) {
+        const row = this.sqlite.row(prepared.stmt);
+        const acc: Record<string, SQLiteCompatibleType> = {};
+        row.forEach((v, i) => (acc[prepared.columns[i]] = v));
+        rows.push(acc);
+      }
+
+      return rows;
+    } catch (e) {
+      if (e instanceof Error || e instanceof SQLiteError)
+        e.message += ` (query: ${sql})`;
+      throw e;
+    } finally {
+      await this.sqlite
+        .reset(prepared.stmt)
+        // we must clear/destruct the prepared statement if it can't be reset
+        .catch(() =>
+          this.sqlite
+            .finalize(prepared.stmt)
+            // ignore error (we will just prepare a new statement)
+            .catch(console.error)
+            .finally(() => this.preparedStatements.delete(sql))
+        );
+    }
+  }
+
+  async run<R>(
+    mode: RunMode,
+    sql: string,
+    parameters?: SQLiteCompatibleType[]
+  ): Promise<QueryResult<R>> {
+    if (this.encrypted && !sql.startsWith("PRAGMA key")) {
+      await this.waitForDatabase();
+    }
+    if (!this.db) throw new Error("Database is not opened.");
+
+    const rows = (await this.exec(sql, mode, parameters)) as R[];
+    if (mode === "query") return { rows };
+
+    // initialize the database after it has been successfully decrypted.
+    // all queries prior to that must wait otherwise we get the
+    // "file is not a database" error
+    if (this.encrypted && sql.startsWith("PRAGMA key")) await this.initialize();
+
+    return {
+      insertId: BigInt(this.sqlite.last_insert_rowid(this.db)),
+      numAffectedRows: BigInt(this.sqlite.changes(this.db)),
+      rows: mode === "raw" ? rows : []
+    };
+  }
+
+  async close() {
+    if (!this.db) return;
+
+    for (const [_, prepared] of this.preparedStatements) {
+      await this.sqlite.finalize(prepared.stmt);
+    }
+    this.preparedStatements.clear();
+    await this.sqlite.close(this.db);
+    await this.vfs?.close();
+
+    this.db = undefined;
+    this.initialized = false;
+  }
+
+  async export() {
+    const vfs = await this.getVFS(this.name, this.async);
+    const stream = new ReadableStream(new DatabaseSource(vfs, this.name));
+    return transfer(stream, [stream]);
+  }
+
+  async delete() {
+    await this.close();
+    if (this.vfs) await this.vfs.delete();
+    else await (await this.getVFS(this.name, this.async)).delete();
+  }
+
+  async getVFS(dbName: string, async: boolean) {
+    const vfs = async
+      ? await import("./IDBBatchAtomicVFS").then(
+          ({ IDBBatchAtomicVFS }) =>
+            new IDBBatchAtomicVFS(dbName, { durability: "strict" })
+        )
+      : await import("./AccessHandlePoolVFS").then(
+          ({ AccessHandlePoolVFS }) => new AccessHandlePoolVFS(dbName)
+        );
+    if ("isReady" in vfs) await vfs.isReady;
+    return vfs;
+  }
+
+  async initialize() {
+    self.dispatchEvent(
+      new MessageEvent("message", {
+        data: { type: "databaseInitialized", dbName: this.name }
+      })
+    );
+    console.log("Database initialized", this.db);
+    this.initialized = true;
+  }
+
+  async waitForDatabase() {
+    // if the database hasn't yet been initialized.
+    if (!this.initialized) {
+      console.log("Waiting for database to be initialized...", this.db);
+      return await new Promise<boolean>((resolve) =>
+        self.addEventListener("message", (ev) => {
+          if (
+            ev.data.type === "databaseInitialized" &&
+            ev.data.dbName === this.name
+          )
+            resolve(true);
+        })
+      );
+    }
+    return true;
+  }
+}
+
+export type SQLiteWorker = typeof _SQLiteWorker.prototype;
 
 addEventListener("message", async (event) => {
   if (!event.data.type) {
-    await worker.open(event.data.dbName, event.data.async, event.data.uri);
+    const worker = new _SQLiteWorker();
+    await worker.open(event.data.dbName, {
+      async: event.data.async,
+      encrypted: event.data.encrypted,
+      url: event.data.uri
+    });
     const providerPort = createSharedServicePort(worker);
     postMessage(null, [providerPort]);
+
+    self.addEventListener("beforeunload", () => worker.close());
   }
 });
-
-async function waitForDatabase() {
-  // if the database hasn't yet been initialized.
-  if (!initialized) {
-    console.log("Waiting for database to be initialized...", db);
-    return await new Promise<boolean>((resolve) =>
-      self.addEventListener("message", (ev) => {
-        if (ev.data.type === "databaseInitialized") resolve(true);
-      })
-    );
-  }
-  return true;
-}
+const worker = new _SQLiteWorker();
+expose(worker);

apps/web/src/common/sqlite/wa-sqlite-kysely-driver.ts

@@ -25,21 +25,28 @@ import SQLiteSyncURI from "./wa-sqlite.wasm?url";
 import SQLiteAsyncURI from "./wa-sqlite-async.wasm?url";
 import { Mutex } from "async-mutex";
 import { SharedService } from "./shared-service";
+import { Remote, wrap } from "comlink";
 
-type Config = { dbName: string; async: boolean; init?: () => Promise<void> };
+type Config = {
+  dbName: string;
+  async: boolean;
+  encrypted: boolean;
+  init?: () => Promise<void>;
+};
 
 const servicePool = new Map<
   string,
   { service: SharedService<SQLiteWorker>; activated: boolean; closed: boolean }
 >();
 
-export class WaSqliteWorkerDriver implements Driver {
+export class WaSqliteWorkerMultipleTabDriver implements Driver {
   private connection?: DatabaseConnection;
   private connectionMutex = new Mutex();
   private initializationMutex = new Mutex();
   private readonly serviceName;
 
   constructor(private readonly config: Config) {
+    console.log("multi tab driver", config.dbName);
     this.serviceName = `${config.dbName}-service`;
   }
 
@@ -54,11 +61,11 @@ export class WaSqliteWorkerDriver implements Driver {
     if (activated) {
       if (closed) {
         console.log("Already activated. Reinitializing...");
-        await service.proxy.open(
-          this.config.dbName,
-          this.config.async,
-          this.config.async ? SQLiteAsyncURI : SQLiteSyncURI
-        );
+        await service.proxy.open(this.config.dbName, {
+          async: this.config.async,
+          encrypted: this.config.encrypted,
+          url: this.config.async ? SQLiteAsyncURI : SQLiteSyncURI
+        });
         this.needsInitialization = true;
         servicePool.set(this.serviceName, {
           service,
@@ -72,19 +79,24 @@ export class WaSqliteWorkerDriver implements Driver {
 
     service.activate(
       () =>
-        new Promise<MessagePort>((resolve) => {
+        new Promise<{ port: MessagePort; onclose: () => void }>((resolve) => {
           console.log("initializing worker");
           this.needsInitialization = true;
 
           const worker = new Worker();
           worker.addEventListener(
             "message",
-            (event) => resolve(event.ports[0]),
+            (event) =>
+              resolve({
+                port: event.ports[0],
+                onclose: () => worker.terminate()
+              }),
             { once: true }
           );
           worker.postMessage({
             dbName: this.config.dbName,
             async: this.config.async,
+            encrypted: this.config.encrypted,
             uri: this.config.async ? SQLiteAsyncURI : SQLiteSyncURI
           });
         }),
@@ -184,19 +196,76 @@ export class WaSqliteWorkerDriver implements Driver {
   async delete() {
     const service = servicePool.get(this.serviceName);
     if (!service || !service.service) return;
-    await service.service?.proxy?.delete(this.config.dbName, this.config.async);
+    await service.service?.proxy?.delete();
     service.closed = true;
   }
 
   async export() {
-    return servicePool
-      .get(this.serviceName)
-      ?.service?.proxy?.export(this.config.dbName, this.config.async);
+    return servicePool.get(this.serviceName)?.service?.proxy?.export();
+  }
+}
+
+export class WaSqliteWorkerSingleTabDriver implements Driver {
+  private connection?: DatabaseConnection;
+  private connectionMutex = new Mutex();
+  private readonly worker = wrap<SQLiteWorker>(
+    new Worker({ name: this.config.dbName })
+  );
+
+  constructor(private readonly config: Config) {
+    console.log("single tab driver", config.dbName);
+  }
+
+  async init(): Promise<void> {
+    await this.worker.open(this.config.dbName, {
+      async: this.config.async,
+      encrypted: this.config.encrypted,
+      url: this.config.async ? SQLiteAsyncURI : SQLiteSyncURI
+    });
+    this.connection = new WaSqliteWorkerConnection(this.worker);
+  }
+
+  async acquireConnection(): Promise<DatabaseConnection> {
+    if (!this.connection) throw new Error("Driver not initialized.");
+
+    // SQLite only has one single connection. We use a mutex here to wait
+    // until the single connection has been released.
+    await this.connectionMutex.waitForUnlock();
+    await this.connectionMutex.acquire();
+    return this.connection;
+  }
+
+  async beginTransaction(connection: DatabaseConnection): Promise<void> {
+    await connection.executeQuery(CompiledQuery.raw("begin"));
+  }
+
+  async commitTransaction(connection: DatabaseConnection): Promise<void> {
+    await connection.executeQuery(CompiledQuery.raw("commit"));
+  }
+
+  async rollbackTransaction(connection: DatabaseConnection): Promise<void> {
+    await connection.executeQuery(CompiledQuery.raw("rollback"));
+  }
+
+  async releaseConnection(): Promise<void> {
+    this.connectionMutex.release();
+  }
+
+  async destroy(): Promise<void> {
+    await this.worker.close();
+  }
+
+  async delete() {
+    await this.worker.delete();
+  }
+
+  async export() {
+    return await this.worker.export();
   }
 }
 
 class WaSqliteWorkerConnection implements DatabaseConnection {
-  constructor(private readonly worker: SQLiteWorker) {}
+  constructor(private readonly worker: SQLiteWorker | Remote<SQLiteWorker>) {}
 
   streamQuery<R>(): AsyncIterableIterator<QueryResult<R>> {
     throw new Error("wasqlite driver doesn't support streaming");
@@ -212,6 +281,8 @@ class WaSqliteWorkerConnection implements DatabaseConnection {
         : query.kind === "RawNode"
         ? "raw"
         : "exec";
-    return this.worker.run(mode, sql, parameters as any);
+    return this.worker.run(mode, sql, parameters as any) as Promise<
+      QueryResult<R>
+    >;
   }
 }

apps/web/src/common/task-manager.ts

@@ -55,7 +55,7 @@ type TaskProgress = {
 type ProgressReportCallback = (progress: TaskProgress) => void;
 
 export class TaskManager {
-  static async startTask<T>(task: TaskDefinition<T>): Promise<T> {
+  static async startTask<T>(task: TaskDefinition<T>): Promise<T | Error> {
     switch (task.type) {
       case "status": {
         const statusTask = task;
@@ -74,7 +74,7 @@ export class TaskManager {
         return result;
       }
       case "modal": {
-        return await showProgressDialog<T>({
+        return await showProgressDialog<T | Error>({
           title: task.title,
           subtitle: task.subtitle,
           action: task.action

apps/web/src/components/announcements/body.jsx

@@ -307,7 +307,7 @@ function CalltoAction({ action, variant, sx, dismissAnnouncement }) {
             break;
           }
           case "backup": {
-            await createBackup(true);
+            await createBackup();
             break;
           }
           default: {

apps/web/src/components/diff-viewer/content-toggle.tsx

@@ -26,7 +26,7 @@ type ContentToggle = {
   onToggle: () => void;
   label: string;
   dateEdited: number;
-  resolveConflict: (options: { saveCopy: boolean }) => void;
+  resolveConflict: (saveCopy: boolean) => void;
   readonly: boolean;
   sx: FlexProps["sx"];
 };
@@ -50,7 +50,7 @@ function ContentToggle(props: ContentToggle) {
             <Button
               variant="accent"
               mr={2}
-              onClick={() => resolveConflict({ saveCopy: true })}
+              onClick={() => resolveConflict(true)}
               p={1}
               px={2}
             >
@@ -61,7 +61,7 @@ function ContentToggle(props: ContentToggle) {
             variant={isOtherSelected ? "error" : "accent"}
             onClick={() => {
               if (isOtherSelected) {
-                resolveConflict({ saveCopy: false });
+                resolveConflict(false);
               } else {
                 onToggle();
               }

apps/web/src/components/diff-viewer/index.tsx

@@ -17,7 +17,7 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { useLayoutEffect, useRef, useState } from "react";
+import { useCallback, useLayoutEffect, useRef, useState } from "react";
 import { Flex, Text, Button } from "@theme-ui/components";
 import { Copy, Restore } from "../icons";
 import ContentToggle from "./content-toggle";
@@ -45,6 +45,24 @@ function DiffViewer(props: DiffViewerProps) {
   );
   const root = useRef<HTMLDivElement>(null);
 
+  const onResolveContent = useCallback(
+    (saveCopy: boolean) => {
+      const toKeep =
+        selectedContent === 1 ? session.content?.conflicted : session.content;
+      const toCopy =
+        selectedContent === 1 ? session.content : session.content?.conflicted;
+      if (!toKeep) return;
+      resolveConflict({
+        note: session.note,
+        toKeep,
+        toCopy: saveCopy ? toCopy : undefined,
+        toKeepDateEdited: toKeep.dateEdited,
+        dateResolved: conflictedContent!.dateModified
+      });
+    },
+    [conflictedContent, selectedContent, session.content, session.note]
+  );
+
   useLayoutEffect(() => {
     setConflictedContent((c) => {
       if (c?.dateEdited === session.content?.conflicted?.dateEdited) return c;
@@ -185,15 +203,7 @@ function DiffViewer(props: DiffViewerProps) {
                   isSelected={selectedContent === 0}
                   isOtherSelected={selectedContent === 1}
                   onToggle={() => setSelectedContent((s) => (s === 0 ? -1 : 0))}
-                  resolveConflict={({ saveCopy }) => {
-                    resolveConflict({
-                      note: session.note,
-                      toKeep: content.data,
-                      toCopy: saveCopy ? conflictedContent : undefined,
-                      toKeepDateEdited: content.dateEdited,
-                      dateResolved: conflictedContent.dateModified
-                    });
-                  }}
+                  resolveConflict={onResolveContent}
                   sx={{
                     borderStyle: "solid",
                     borderWidth: 0,
@@ -263,15 +273,7 @@ function DiffViewer(props: DiffViewerProps) {
               <>
                 <ContentToggle
                   readonly={session.type === "diff"}
-                  resolveConflict={({ saveCopy }) => {
-                    resolveConflict({
-                      note: session.note,
-                      toKeep: conflictedContent.data,
-                      toCopy: saveCopy ? content : undefined,
-                      toKeepDateEdited: conflictedContent.dateEdited,
-                      dateResolved: conflictedContent.dateModified
-                    });
-                  }}
+                  resolveConflict={onResolveContent}
                   label={
                     session.type === "diff"
                       ? "Current version"
@@ -326,31 +328,31 @@ async function resolveConflict({
   dateResolved
 }: {
   note: Note;
-  toKeep: string;
+  toKeep: ContentItem;
   toCopy?: ContentItem;
   toKeepDateEdited: number;
   dateResolved?: number;
 }) {
+  await db.content.add({
+    id: note.contentId,
+    dateResolved,
+    sessionId: `${Date.now()}`,
+    ...(toKeep.locked
+      ? { data: toKeep.data, locked: true }
+      : { data: toKeep.data, locked: false })
+  });
+
   await db.notes.add({
     id: note.id,
     dateEdited: toKeepDateEdited,
     conflicted: false
   });
 
-  await db.content.add({
-    id: note.contentId,
-    data: toKeep,
-    type: "tiptap",
-    dateResolved,
-    sessionId: `${Date.now()}`
-  });
-
   if (toCopy) {
     await createCopy(note, toCopy);
   }
 
   await notesStore.refresh();
-  useEditorStore.getState().openSession(note.id, { force: true });
 }
 
 async function createCopy(note: Note, content: ContentItem) {

apps/web/src/components/editor/action-bar.tsx

@@ -34,9 +34,11 @@ import {
   Publish,
   Published,
   Readonly,
+  Redo,
   Search,
   TableOfContents,
   Trash,
+  Undo,
   Unlock
 } from "../icons";
 import { ScrollContainer } from "@notesnook/ui";
@@ -79,8 +81,8 @@ export function EditorActionBar() {
   const activeSession = useEditorStore((store) =>
     store.activeSessionId ? store.getSession(store.activeSessionId) : undefined
   );
-  const editor = useEditorManager((store) =>
-    activeSession?.id ? store.editors[activeSession?.id]?.editor : undefined
+  const editorManager = useEditorManager((store) =>
+    activeSession?.id ? store.editors[activeSession?.id] : undefined
   );
   const isLoggedIn = useUserStore((store) => store.isLoggedIn);
   const monographs = useMonographStore((store) => store.monographs);
@@ -88,6 +90,18 @@ export function EditorActionBar() {
     activeSession && db.monographs.isPublished(activeSession.id);
 
   const tools = [
+    {
+      title: "Undo",
+      icon: Undo,
+      enabled: editorManager?.canUndo,
+      onClick: () => editorManager?.editor?.undo()
+    },
+    {
+      title: "Redo",
+      icon: Redo,
+      enabled: editorManager?.canRedo,
+      onClick: () => editorManager?.editor?.redo()
+    },
     {
       title: isNotePublished ? "Published" : "Publish",
       icon: isNotePublished ? Published : Publish,
@@ -152,10 +166,9 @@ export function EditorActionBar() {
         activeSession &&
         activeSession.type !== "new" &&
         activeSession.type !== "locked" &&
-        activeSession.type !== "readonly" &&
         activeSession.type !== "diff" &&
         activeSession.type !== "conflicted",
-      onClick: editor?.startSearch
+      onClick: editorManager?.editor?.startSearch
     },
     {
       title: "Properties",
@@ -485,15 +498,11 @@ function Tab(props: TabProps) {
         e.stopPropagation();
         if (isTemporary) onKeepOpen();
       }}
-      onMouseDown={(e) => {
-        if (e.button == 1) {
-          e.preventDefault();
-          onClose();
-        }
+      onAuxClick={(e) => {
+        if (e.button == 1) onClose();
       }}
-      onClick={(e) => {
-        e.stopPropagation();
-        onFocus();
+      onMouseUp={(e) => {
+        if (e.button == 0) onFocus();
       }}
       {...listeners}
       {...attributes}

apps/web/src/components/editor/index.tsx

@@ -127,11 +127,8 @@ export default function TabsView() {
 
   return (
     <>
-      {IS_DESKTOP_APP ? (
-        ReactDOM.createPortal(
-          <EditorActionBar />,
-          document.getElementById("titlebar-portal-container")!
-        )
+      {!hasNativeTitlebar ? (
+        <EditorActionBarPortal />
       ) : (
         <Flex sx={{ px: 1 }}>
           <EditorActionBar />
@@ -153,12 +150,7 @@ export default function TabsView() {
         <PanelGroup direction="horizontal" autoSaveId={"editor-panels"}>
           <Panel id="editor-panel" className="editor-pane" order={1}>
             {sessions.map((session) => (
-              <Freeze
-                key={session.id}
-                freeze={
-                  session.needsHydration || session.id !== activeSessionId
-                }
-              >
+              <Freeze key={session.id} freeze={session.id !== activeSessionId}>
                 {session.type === "locked" ? (
                   <UnlockNoteView session={session} />
                 ) : session.type === "conflicted" || session.type === "diff" ? (
@@ -233,7 +225,8 @@ const MemoizedEditorView = React.memo(
   EditorView,
   (prev, next) =>
     prev.session.id === next.session.id &&
-    prev.session.type === next.session.type
+    prev.session.type === next.session.type &&
+    prev.session.needsHydration === next.session.needsHydration
 );
 function EditorView({
   session
@@ -271,7 +264,7 @@ function EditorView({
         const isContent =
           item.type === "tiptap" && item.noteId === session.note.id;
         const isNote = item.type === "note" && item.id === session.note.id;
-        if (isContent && lastChangedTime.current < item.dateEdited) {
+        if (isContent && lastChangedTime.current < item.dateModified) {
           if (!item.locked) return editor.updateContent(item.data);
 
           const result = await db.vault
@@ -302,6 +295,12 @@ function EditorView({
     };
   }, [editor]);
 
+  useEffect(() => {
+    if (!session.needsHydration && session.content) {
+      editor?.updateContent(session.content.data);
+    }
+  }, [editor, session.needsHydration]);
+
   return (
     <Flex
       ref={root}
@@ -459,6 +458,7 @@ export function Editor(props: EditorProps) {
     <EditorChrome {...props}>
       <Tiptap
         id={id}
+        isHydrating={!!session.needsHydration}
         nonce={nonce}
         readonly={readonly}
         content={content}
@@ -466,7 +466,8 @@ export function Editor(props: EditorProps) {
           corsHost: Config.get("corsProxy", "https://cors.notesnook.com")
         }}
         onLoad={(editor) => {
-          restoreSelection(editor, id);
+          editor = editor || useEditorManager.getState().getEditor(id)?.editor;
+          if (editor) restoreSelection(editor, id);
           restoreScrollPosition(session);
         }}
         onSelectionChange={({ from, to }) =>
@@ -773,8 +774,10 @@ function restoreScrollPosition(session: EditorSession) {
 }
 
 function restoreSelection(editor: IEditor, id: string) {
-  editor.focus({
-    position: Config.get(`${id}:selection`, { from: 0, to: 0 })
+  setTimeout(() => {
+    editor.focus({
+      position: Config.get(`${id}:selection`, { from: 0, to: 0 })
+    });
   });
 }
 
@@ -811,7 +814,7 @@ function UnlockNoteView(props: UnlockNoteViewProps) {
             throw new Error("note with this id does not exist.");
 
           useEditorStore.getState().addSession({
-            type: "default",
+            type: session.note.readonly ? "readonly" : "default",
             locked: true,
             id: session.id,
             note: session.note,
@@ -826,3 +829,9 @@ function UnlockNoteView(props: UnlockNoteViewProps) {
     </div>
   );
 }
+
+function EditorActionBarPortal() {
+  const container = document.getElementById("titlebar-portal-container");
+  if (!container) return null;
+  return ReactDOM.createPortal(<EditorActionBar />, container);
+}

apps/web/src/components/editor/tiptap.tsx

@@ -67,7 +67,7 @@ export type OnChangeHandler = (
 type TipTapProps = {
   id: string;
   editorContainer: () => HTMLElement | undefined;
-  onLoad?: (editor: IEditor) => void;
+  onLoad?: (editor?: IEditor) => void;
   onChange?: OnChangeHandler;
   onContentChange?: () => void;
   onSelectionChange?: (range: { from: number; to: number }) => void;
@@ -344,7 +344,6 @@ function TipTap(props: TipTapProps) {
     };
   }, []);
 
-  if (readonly) return null;
   return (
     <>
       <ScopedThemeProvider
@@ -372,8 +371,11 @@ function TipTap(props: TipTapProps) {
 function TiptapWrapper(
   props: PropsWithChildren<
     Omit<TipTapProps, "editorContainer" | "theme" | "fontSize" | "fontFamily">
-  >
+  > & {
+    isHydrating?: boolean;
+  }
 ) {
+  const { onLoad, isHydrating } = props;
   const theme = useThemeStore((store) =>
     store.colorScheme === "dark" ? store.darkTheme : store.lightTheme
   );
@@ -398,27 +400,40 @@ function TiptapWrapper(
       theme.scopes.base.primary.paragraph;
   }, [theme]);
 
+  useEffect(() => {
+    if (!isHydrating) {
+      onLoad?.();
+      containerRef.current
+        ?.querySelector(".editor-loading-container")
+        ?.classList.add("hidden");
+    }
+  }, [isHydrating]);
+
   return (
     <Flex
       ref={containerRef}
       sx={{
         flex: 1,
         flexDirection: "column",
-        ".tiptap.ProseMirror": { pb: 150 }
+        ".tiptap.ProseMirror": { pb: 150 },
+        ".editor-container": { opacity: isHydrating ? 0 : 1 },
+        ".editor-loading-container.hidden": { display: "none" }
       }}
     >
       <TipTap
         {...props}
         onLoad={(editor) => {
-          props.onLoad?.(editor);
-          containerRef.current
-            ?.querySelector(".editor-loading-container")
-            ?.remove();
+          if (!isHydrating) {
+            onLoad?.(editor);
+            containerRef.current
+              ?.querySelector(".editor-loading-container")
+              ?.classList.add("hidden");
+          }
         }}
         editorContainer={() => {
           if (editorContainerRef.current) return editorContainerRef.current;
           const editorContainer = document.createElement("div");
-          editorContainer.classList.add("selectable");
+          editorContainer.classList.add("selectable", "editor-container");
           editorContainer.style.flex = "1";
           editorContainer.style.cursor = "text";
           editorContainer.style.color =
@@ -427,6 +442,7 @@ function TiptapWrapper(
           editorContainer.style.fontSize = `${editorConfig.fontSize}px`;
           editorContainer.style.fontFamily =
             getFontById(editorConfig.fontFamily)?.font || "sans-serif";
+          editorContainer.tabIndex = -1;
           editorContainerRef.current = editorContainer;
           return editorContainer;
         }}

apps/web/src/components/error-boundary/index.tsx

@@ -17,15 +17,42 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { PropsWithChildren } from "react";
+import { PropsWithChildren, useEffect } from "react";
 import { ErrorText } from "../error-text";
 import { BaseThemeProvider } from "../theme-provider";
 import { Button, Flex, Text } from "@theme-ui/components";
 import {
   ErrorBoundary as RErrorBoundary,
-  FallbackProps
+  FallbackProps,
+  useErrorBoundary
 } from "react-error-boundary";
-import { createDialect } from "../../common/sqlite";
+import { useKeyStore } from "../../interfaces/key-store";
+
+export function GlobalErrorHandler(props: PropsWithChildren) {
+  const { showBoundary } = useErrorBoundary();
+
+  useEffect(() => {
+    function handleError(e: ErrorEvent) {
+      const error = new Error(e.message);
+      error.stack = `${e.filename}:${e.lineno}:${e.colno}`;
+      showBoundary(e.error || error);
+    }
+    function handleUnhandledRejection(e: PromiseRejectionEvent) {
+      showBoundary(e.reason);
+    }
+    window.addEventListener("unhandledrejection", handleUnhandledRejection);
+    window.addEventListener("error", handleError);
+    return () => {
+      window.removeEventListener(
+        "unhandledrejection",
+        handleUnhandledRejection
+      );
+      window.removeEventListener("error", handleError);
+    };
+  }, [showBoundary]);
+
+  return <>{props.children}</>;
+}
 
 export function ErrorBoundary(props: PropsWithChildren) {
   return (
@@ -162,19 +189,19 @@ function getErrorHelp(props: FallbackProps) {
   if (
     errorText.includes("file is not a database") ||
     errorText.includes("unsupported file format") ||
-    errorText.includes("database disk image is malformed") ||
     errorText.includes("null function or function signature mismatch") ||
-    errorText.includes("malformed database schema")
+    errorText.includes("malformed database schema") ||
+    /table ".+?" already exists/.test(errorText) ||
+    errorText.includes("corrupted migrations:")
   ) {
     return {
       explanation: `This error usually means the database file is either corrupt or it could not be decrypted.`,
       action:
-        "This error can only be fixed by wiping & reseting the database. Beware that this will wipe all your data inside the database with no way to recover it later on.",
+        "This error can only be fixed by wiping & reseting the database. Beware that this will wipe all your data inside the database with no way to recover it later on. This WILL NOT change/affect/delete/wipe your data on the server but ONLY on this device.",
       fix: async () => {
-        const { useKeyStore } = await import("../../interfaces/key-store");
-
+        const { createDialect } = await import("../../common/sqlite");
         await useKeyStore.getState().clear();
-        const dialect = createDialect("notesnook");
+        const dialect = createDialect("notesnook", true);
         const driver = dialect.createDriver();
         await driver.delete();
         resetErrorBoundary();
@@ -184,17 +211,27 @@ function getErrorHelp(props: FallbackProps) {
     return {
       explanation: `This error means the at rest encryption key could not be decrypted. This can be due to data corruption or implementation change.`,
       action:
-        "This error can only be fixed by wiping & reseting the Key Store and the database.",
+        "This error can only be fixed by wiping & reseting the Key Store and the database. This WILL NOT change/affect/delete/wipe your data on the server but ONLY on this device.",
       fix: async () => {
-        const { useKeyStore } = await import("../../interfaces/key-store");
-
+        const { createDialect } = await import("../../common/sqlite");
         await useKeyStore.getState().clear();
-        const dialect = createDialect("notesnook");
+        const dialect = createDialect("notesnook", true);
         const driver = dialect.createDriver();
         await driver.delete();
         resetErrorBoundary();
       }
     };
+  } else if (errorText.includes("database disk image is malformed")) {
+    return {
+      explanation: `This error usually means the search index is corrupted.`,
+      action:
+        "This error can be fixed by rebuilding the search index. This action won't result in any kind of data loss.",
+      fix: async () => {
+        const { db } = await import("../../common/db");
+        await db.lookup.rebuild();
+        resetErrorBoundary();
+      }
+    };
   }
 }
 

apps/web/src/components/lightbox/index.tsx

@@ -340,9 +340,9 @@ export class Lightbox extends React.Component<LightboxProps> {
               overflow: "hidden",
               alignItems: "center",
               justifyContent: "flex-end",
-              height: IS_DESKTOP_APP ? TITLE_BAR_HEIGHT : "auto",
+              height: !hasNativeTitlebar ? TITLE_BAR_HEIGHT : "auto",
               pr:
-                IS_DESKTOP_APP && getPlatform() !== "darwin"
+                !hasNativeTitlebar && getPlatform() !== "darwin"
                   ? "calc(100vw - env(titlebar-area-width))"
                   : 0
             }}

apps/web/src/components/list-container/index.tsx

@@ -38,6 +38,7 @@ import ScrollContainer from "../scroll-container";
 import { useKeyboardListNavigation } from "../../hooks/use-keyboard-list-navigation";
 import { VirtualizedGrouping, GroupingKey, Item } from "@notesnook/core";
 import {
+  FlatScrollIntoViewLocation,
   ItemProps,
   ScrollerProps,
   Virtuoso,
@@ -76,7 +77,6 @@ type ListContainerProps = {
     onClick: () => void;
   };
 };
-var activeItem: { focus: boolean; id: string } | undefined = undefined;
 function ListContainer(props: ListContainerProps) {
   const { group, items, context, refresh, header, button, compact } = props;
 
@@ -92,6 +92,7 @@ function ListContainer(props: ListContainerProps) {
 
   const listRef = useRef<VirtuosoHandle>(null);
   const listContainerRef = useRef(null);
+  const activeItem = useRef<{ focus: boolean; id: string }>();
 
   useEffect(() => {
     return () => {
@@ -100,18 +101,18 @@ function ListContainer(props: ListContainerProps) {
   }, []);
 
   useLayoutEffect(() => {
-    if (activeItem) {
+    if (activeItem.current) {
       items
         .ids()
         .then(
           (ids) =>
             listRef.current &&
-            activeItem &&
+            activeItem.current &&
             revealItemInList(
               listRef.current,
-              activeItem.id,
+              activeItem.current.id,
               ids,
-              activeItem.focus
+              activeItem.current.focus
             )
         );
     }
@@ -119,8 +120,8 @@ function ListContainer(props: ListContainerProps) {
     const event = AppEventManager.subscribe(
       AppEvents.revealItemInList,
       (id, focus) => {
-        if (activeItem?.id === id) return;
-        activeItem = { id, focus };
+        if (activeItem.current?.id === id) return;
+        activeItem.current = { id, focus };
         items
           .ids()
           .then(
@@ -461,11 +462,13 @@ function waitForElement(
   list: VirtuosoHandle,
   index: number,
   elementId: string,
-  callback: (element: HTMLElement) => void
+  callback: (element: HTMLElement) => void,
+  options?: Partial<FlatScrollIntoViewLocation>
 ) {
   let waitInterval = 0;
   let maxAttempts = 3;
   list.scrollIntoView({
+    ...options,
     index,
     done: function scrollDone() {
       if (!maxAttempts) return;
@@ -497,6 +500,7 @@ function revealItemInList(
     list,
     index,
     `id_${itemId}`,
-    (element) => focus && element.focus()
+    (element) => focus && element.focus(),
+    { align: "center" }
   );
 }

apps/web/src/components/loaders/list-loader.tsx

@@ -27,28 +27,6 @@ const Lines = [1, 2].map(() => getRandomArbitrary(40, 90));
 export const ListLoader = memo(function ListLoader() {
   return (
     <>
-      <Flex
-        sx={{ py: 1, alignItems: "center", justifyContent: "center", px: 1 }}
-      >
-        <Box sx={{ height: 38 }}>
-          <Skeleton enableAnimation={false} width={38} height={38} circle />
-        </Box>
-        <Flex
-          sx={{
-            flex: 1,
-            ml: 1,
-            flexDirection: "column",
-            justifyContent: "center"
-          }}
-        >
-          <Box sx={{ height: 14 }}>
-            <Skeleton enableAnimation={false} inline height={14} />
-          </Box>
-          <Box sx={{ mt: 1, height: 10 }}>
-            <Skeleton enableAnimation={false} inline height={10} />
-          </Box>
-        </Flex>
-      </Flex>
       {Lines.map((width) => (
         <Box key={width} sx={{ py: 2, px: 1 }}>
           <Skeleton

apps/web/src/components/navigation-menu/index.tsx

@@ -71,6 +71,7 @@ import { usePersistentState } from "../../hooks/use-persistent-state";
 import { MenuItem } from "@notesnook/ui";
 import { Notebook, Tag } from "@notesnook/core";
 import { handleDrop } from "../../common/drop-handler";
+import { Menu } from "../../hooks/use-menu";
 
 type Route = {
   id: string;
@@ -172,6 +173,24 @@ function NavigationMenu(props: NavigationMenuProps) {
 
   const getSidebarItems = useCallback(async () => {
     return [
+      {
+        key: "reset-sidebar",
+        type: "button",
+        title: "Reset sidebar",
+        onClick: () => {
+          db.settings
+            .setSideBarHiddenItems("routes", [])
+            .then(() => db.settings.setSideBarHiddenItems("colors", []))
+            .then(() => db.settings.setSideBarOrder("colors", []))
+            .then(() => db.settings.setSideBarOrder("routes", []))
+            .then(() => db.settings.setSideBarOrder("shortcuts", []))
+            .then(() => {
+              setHiddenRoutes([]);
+              setHiddenColors([]);
+            });
+        }
+      },
+      { type: "separator", key: "sep" },
       ...toMenuItems(
         orderItems(routes, db.settings.getSideBarOrder("routes")),
         hiddenRoutes,
@@ -180,7 +199,7 @@ function NavigationMenu(props: NavigationMenuProps) {
             .setSideBarHiddenItems("routes", ids)
             .then(() => setHiddenRoutes(ids))
       ),
-      { type: "separator", key: "sep" },
+      { type: "separator", key: "sep", isHidden: colors.length <= 0 },
       ...toMenuItems(
         orderItems(colors, db.settings.getSideBarOrder("colors")),
         hiddenColors,
@@ -225,6 +244,10 @@ function NavigationMenu(props: NavigationMenuProps) {
           justifyContent: "space-between"
         }}
         px={0}
+        onContextMenu={async (e) => {
+          e.preventDefault();
+          Menu.openMenu(await getSidebarItems());
+        }}
       >
         <FlexScrollContainer
           style={{

apps/web/src/components/navigation-menu/navigation-item.tsx

@@ -181,7 +181,11 @@ function NavigationItem(
       ) : !isTablet && count !== undefined ? (
         <Text
           variant="subBody"
-          sx={{ mr: 1, bg: "hover", px: "3px", borderRadius: "default" }}
+          sx={{
+            mr: 1,
+            px: "3px",
+            borderRadius: "default"
+          }}
         >
           {count > 100 ? "100+" : count}
         </Text>

apps/web/src/components/note/index.tsx

@@ -96,6 +96,7 @@ import { Context } from "../list-container/types";
 import { SchemeColors } from "@notesnook/theme";
 import { writeToClipboard } from "../../utils/clipboard";
 import Vault from "../../common/vault";
+import { isUserPremium } from "../../hooks/use-is-user-premium";
 
 type NoteProps = NoteResolvedData & {
   item: NoteType;
@@ -335,6 +336,7 @@ const menuItems: (
   ids?: string[],
   context?: { color?: Color; locked?: boolean }
 ) => MenuItem[] = (note, ids = [], context) => {
+  const isPro = isUserPremium();
   // const isSynced = db.notes.note(note.id)?.synced();
 
   return [
@@ -371,6 +373,7 @@ const menuItems: (
       //isDisabled: !isSynced,
       title: "Lock",
       isChecked: context?.locked,
+      isDisabled: !isPro,
       icon: Lock.path,
       onClick: async () => {
         const { unlock, lock } = store.get();
@@ -380,8 +383,7 @@ const menuItems: (
         } else if (await unlock(note.id)) {
           showToast("success", "Note unlocked successfully!");
         }
-      },
-      isPro: true
+      }
     },
     {
       type: "button",
@@ -458,11 +460,12 @@ const menuItems: (
           title: format.title,
           tooltip: `Export as ${format.title} - ${format.subtitle}`,
           icon: format.icon.path,
-          isDisabled: format.type === "pdf" && ids.length > 1,
+          isDisabled:
+            (format.type !== "txt" && !isPro) ||
+            (format.type === "pdf" && ids.length > 1),
           // ? "Multiple notes cannot be exported as PDF."
           // : false,
           multiSelect: true,
-          isPro: format.type !== "txt",
           onClick: async () => {
             if (ids.length === 1) {
               return await exportNote(note, {
@@ -477,8 +480,7 @@ const menuItems: (
           }
         }))
       },
-      multiSelect: true,
-      isPro: true
+      multiSelect: true
     },
     {
       type: "button",
@@ -524,8 +526,6 @@ const menuItems: (
       type: "button",
       key: "duplicate",
       title: "Duplicate",
-      //!isSynced ||
-      isDisabled: context?.locked,
       icon: Duplicate.path,
       onClick: () => store.get().duplicate(...ids),
       multiSelect: true
@@ -652,7 +652,8 @@ function notebooksMenuItems(ids: string[]): MenuItem[] {
             }
           });
 
-        menuItems.push({ key: "sep3", type: "separator" });
+        if (notebookShortcuts.size > 0 || notebooks.size > 0)
+          menuItems.push({ key: "sep3", type: "separator" });
 
         if (notebookShortcuts.size > 0) {
           notebookShortcuts.forEach((notebook) => {

apps/web/src/components/notice/index.tsx

@@ -31,6 +31,7 @@ function Notice() {
     if (!notices) return null;
     return notices.slice().sort((a, b) => a.priority - b.priority)[0];
   }, [notices]);
+
   if (!notice) return null;
   const NoticeData = NoticesData[notice.type];
   return (

apps/web/src/components/pdf-preview/index.tsx

@@ -239,6 +239,10 @@ export function PdfPreview(props: PdfPreviewProps) {
         onZoom={(e) => {
           if (hash) setPDFConfig(hash, { scale: e.scale });
         }}
+        transformGetDocumentParams={(options) => {
+          (options as any).isEvalSupported = false;
+          return options;
+        }}
         // onDocumentAskPassword={(e) => {
         //   e.verifyPassword("failed");
         // }}

apps/web/src/components/placeholders/index.tsx

@@ -57,7 +57,7 @@ function Placeholder(props: PlaceholderProps) {
         </Flex>
 
         <Text variant="subBody" sx={{ fontSize: "body", mt: 1 }}>
-          {toTitleCase(syncStatus.type || "syncing")}ing {syncStatus.progress}{" "}
+          {toTitleCase(syncStatus.type || "sync")}ing {syncStatus.progress}{" "}
           items
         </Text>
       </Flex>

apps/web/src/dialogs/buy-dialog/buy-dialog.tsx

@@ -23,9 +23,9 @@ import { Cross, Check, Loading } from "../../components/icons";
 import { useStore as useUserStore } from "../../stores/user-store";
 import { useStore as useThemeStore } from "../../stores/theme-store";
 import { useTheme } from "@emotion/react";
-import { ReactComponent as Rocket } from "../../assets/rocket.svg";
-import { ReactComponent as WorkAnywhere } from "../../assets/workanywhere.svg";
-import { ReactComponent as WorkLate } from "../../assets/worklate.svg";
+import Rocket from "../../assets/rocket.svg?react";
+import WorkAnywhere from "../../assets/workanywhere.svg?react";
+import WorkLate from "../../assets/worklate.svg?react";
 import Field from "../../components/field";
 import { hardNavigate } from "../../navigation";
 import { Features } from "./features";

apps/web/src/dialogs/buy-dialog/plan-list.tsx

@@ -19,7 +19,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import { Text, Flex, Button } from "@theme-ui/components";
 import { Loading } from "../../components/icons";
-import { ReactComponent as Nomad } from "../../assets/nomad.svg";
+import Nomad from "../../assets/nomad.svg?react";
 import { Period, Plan } from "./types";
 import { PLAN_METADATA, usePlans } from "./plans";
 import { useEffect } from "react";

apps/web/src/dialogs/feature-dialog.tsx

@@ -89,32 +89,15 @@ const features: Record<FeatureKeys, Feature> = {
             )
           }
         ]
-      : [
+      : IS_DESKTOP_APP
+      ? [
           {
-            title: "Bi-directional note linking",
-            subtitle: "You can now link any 2 notes for easier referencing."
-          },
-          {
-            title: "Tabs",
+            title: "Use native titlebar",
             subtitle:
-              "Open multiple notes side by side for faster multi-tasking."
-          },
-          {
-            title: "Nested notebooks",
-            subtitle:
-              "Create subnotebooks inside notebooks upto unlimited depth."
-          },
-          {
-            title: "At rest encryption",
-            subtitle:
-              "All your data will now be stored encrypted on your device to keep you safe even if your device gets compromised."
-          },
-          {
-            title: "App lock",
-            subtitle:
-              "App lock is now here on desktop/web apps! Put a lock on the app, and keep it safe from intruders."
+              "You can now disable the custom titlebar from Settings > Desktop integration and use your operating system's native title bar."
           }
-        ],
+        ]
+      : [],
     cta: {
       title: "Got it",
       icon: Checkmark,

apps/web/src/dialogs/mfa/steps.tsx

@@ -46,8 +46,8 @@ import { phone } from "phone";
 import { db } from "../../common/db";
 import FileSaver from "file-saver";
 import { writeText } from "clipboard-polyfill";
-import { ReactComponent as MFA } from "../../assets/mfa.svg";
-import { ReactComponent as Fallback2FA } from "../../assets/fallback2fa.svg";
+import MFA from "../../assets/mfa.svg?react";
+import Fallback2FA from "../../assets/fallback2fa.svg?react";
 import {
   Authenticator,
   StepComponent,

apps/web/src/dialogs/onboarding-dialog.jsx

@@ -27,11 +27,11 @@ import {
   Github,
   Loading
 } from "../components/icons";
-import { ReactComponent as E2E } from "../assets/e2e.svg";
-import { ReactComponent as Note } from "../assets/note2.svg";
-import { ReactComponent as Nomad } from "../assets/nomad.svg";
-import { ReactComponent as WorkAnywhere } from "../assets/workanywhere.svg";
-import { ReactComponent as Friends } from "../assets/cause.svg";
+import E2E from "../assets/e2e.svg?react";
+import Note from "../assets/note2.svg?react";
+import Nomad from "../assets/nomad.svg?react";
+import WorkAnywhere from "../assets/workanywhere.svg?react";
+import Friends from "../assets/cause.svg?react";
 import LightUI from "../assets/light1.png";
 import DarkUI from "../assets/dark1.png";
 import GooglePlay from "../assets/play.png";

apps/web/src/dialogs/settings/desktop-integration-settings.ts

@@ -19,6 +19,8 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import { SettingsGroup } from "./types";
 import { useStore as useSettingStore } from "../../stores/setting-store";
+import { showToast } from "../../utils/toast";
+import { desktop } from "../../common/desktop-bridge";
 
 export const DesktopIntegrationSettings: SettingsGroup[] = [
   {
@@ -126,6 +128,42 @@ export const DesktopIntegrationSettings: SettingsGroup[] = [
               })
           }
         ]
+      },
+      {
+        key: "use-native-titlebar",
+        title: "Use native titlebar",
+        description:
+          "Use native OS titlebar instead of replacing it with a custom one. Requires app restart for changes to take effect.",
+        onStateChange: (listener) =>
+          useSettingStore.subscribe(
+            (s) => s.desktopIntegrationSettings,
+            listener
+          ),
+        components: [
+          {
+            type: "toggle",
+            isToggled: () =>
+              !!useSettingStore.getState().desktopIntegrationSettings
+                ?.nativeTitlebar,
+            toggle: () => {
+              useSettingStore.getState().setDesktopIntegration({
+                nativeTitlebar:
+                  !useSettingStore.getState().desktopIntegrationSettings
+                    ?.nativeTitlebar
+              });
+              showToast(
+                "success",
+                "Restart the app for changes to take effect.",
+                [
+                  {
+                    text: "Restart now",
+                    onClick: () => desktop?.integration.restart.query()
+                  }
+                ]
+              );
+            }
+          }
+        ]
       }
     ]
   }