mobile: cleanup imports

.commitlintrc.js

@@ -14,16 +14,13 @@ const SCOPES = [
 
   "mobile",
   "web",
-  "vericrypt",
   "desktop",
   "crypto",
   "editor",
   "logger",
   "theme",
-  "server",
   "core",
   "fs",
-  "ui",
   "clipper",
   "config",
   "ci",
@@ -33,8 +30,7 @@ const SCOPES = [
   "misc",
   "common",
   "global",
-  "docs",
-  "themebuilder"
+  "docs"
 ];
 
 module.exports = {

.github/actions/setup-node-with-cache/action.yml

@@ -19,6 +19,7 @@ runs:
           packages/crypto/package-lock.json
           packages/sodium/package-lock.json
           packages/clipper/package-lock.json
+          packages/crypto-worker/package-lock.json
           packages/editor-mobile/package-lock.json
           packages/editor/package-lock.json
           packages/logger/package-lock.json

.github/workflows/android.publish.yml

@@ -1,4 +1,4 @@
-name: Publish @notesnook/android
+name: Publish @notesnook/mobile
 
 on: workflow_dispatch
 
@@ -33,15 +33,13 @@ jobs:
 
       - name: Sign app bundle for Playstore release
         id: sign_app
-        uses: r0adkll/sign-android-release@master
+        uses: r0adkll/sign-android-release@v1
         with:
           releaseDirectory: apps/mobile/native/android/app/build/outputs/bundle/release
           signingKeyBase64: ${{ secrets.SIGNING_KEY }}
           alias: ${{ secrets.ALIAS }}
           keyStorePassword: ${{ secrets.KEY_PASSWORD }}
           keyPassword: ${{ secrets.KEY_PASSWORD }}
-        env:
-          BUILD_TOOLS_VERSION: "33.0.0"
 
       - name: Publish to Playstore
         id: deploy
@@ -66,8 +64,6 @@ jobs:
           alias: ${{ secrets.PUBLIC_ALIAS }}
           keyStorePassword: ${{ secrets.PUBLIC_KEY_PASSWORD }}
           keyPassword: ${{ secrets.PUBLIC_KEY_PASSWORD }}
-        env:
-          BUILD_TOOLS_VERSION: "33.0.0"
 
       - name: Rename apk files
         run: |

.github/workflows/desktop.publish.yml

@@ -18,21 +18,6 @@ on:
         required: true
         default: true
         description: "Publish on GitHub releases?"
-      build-windows:
-        type: boolean
-        required: true
-        default: true
-        description: "Build for Windows?"
-      build-linux:
-        type: boolean
-        required: true
-        default: true
-        description: "Build for Linux?"
-      build-mac:
-        type: boolean
-        required: true
-        default: true
-        description: "Build for macOS?"
 
 jobs:
   build:
@@ -86,7 +71,6 @@ jobs:
   build-macos:
     name: Build for macOS
     needs: build
-    if: inputs.build-mac
     runs-on: macos-12
 
     steps:
@@ -113,7 +97,6 @@ jobs:
       - name: Get App Store Version
         id: appstore
         uses: streetwriters/appstore-connect-app-version@develop
-        if: inputs.publish-apple
         with:
           app-id: ${{ steps.app_metadata.outputs.apple_app_id }}
           key-id: ${{ secrets.api_key_id }}
@@ -125,7 +108,7 @@ jobs:
         uses: actions/download-artifact@v3
         with:
           name: build
-          path: ./apps/web/build
+          path: ./apps/desktop/build
 
       - name: Install packages
         run: |
@@ -179,7 +162,6 @@ jobs:
   build-linux:
     name: Build for Linux
     needs: build
-    if: inputs.build-linux
     runs-on: ubuntu-22.04
 
     steps:
@@ -201,7 +183,7 @@ jobs:
         uses: actions/download-artifact@v3
         with:
           name: build
-          path: ./apps/web/build
+          path: ./apps/desktop/build
 
       - name: Install packages
         run: |
@@ -238,22 +220,12 @@ jobs:
   build-windows:
     name: Build for Windows
     needs: build
-    if: inputs.build-windows
     runs-on: windows-latest
 
     steps:
       - name: Check out Git repository
         uses: actions/checkout@v3
 
-      - name: Setup .NET Core SDK
-        uses: actions/setup-dotnet@v2
-        with:
-          dotnet-version: 6.0.x
-
-      - name: Install AzureCodeSigning
-        run: Install-Module -Name AzureCodeSigning -RequiredVersion 0.3.0 -Force -Repository PSGallery
-        shell: pwsh
-
       - name: Setup Node
         uses: ./.github/actions/setup-node-with-cache
 
@@ -261,7 +233,7 @@ jobs:
         uses: actions/download-artifact@v3
         with:
           name: build
-          path: ./apps/web/build
+          path: ./apps/desktop/build
 
       - name: Install packages
         run: |
@@ -274,9 +246,6 @@ jobs:
       - name: Publish
         env:
           GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          AZURE_TENANT_ID: ${{ secrets.AZURE_TENANT_ID }}
-          AZURE_CLIENT_ID: ${{ secrets.AZURE_CLIENT_ID }}
-          AZURE_CLIENT_SECRET: ${{ secrets.AZURE_CLIENT_SECRET }}
         run: |
           if ($${{ inputs.publish-github }} -eq $true) {
             yarn electron-builder --win --publish always

.github/workflows/help.publish.yml

@@ -1,35 +0,0 @@
-name: Publish Notesnook Help
-
-on: 
-  workflow_dispatch:
-  push:
-    branches:
-      - "master"
-    paths:
-      - "docs/help/**"
-
-jobs:
-  build:
-    name: Build
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-      - uses: actions-rs/toolchain@v1
-        with:
-          toolchain: stable
-
-      - name: Install docgen
-        run: cargo install --git https://github.com/thecodrr/docgen
-
-      - name: Build site
-        run: docgen build --release
-        working-directory: docs/help
-
-      - name: Setup environment
-        run: |
-          echo "CLOUDFLARE_ACCOUNT_ID=${{ secrets.CLOUDFLARE_ACCOUNT_ID }}" >> $GITHUB_ENV
-          echo "CLOUDFLARE_API_TOKEN=${{ secrets.CLOUDFLARE_API_TOKEN }}" >> $GITHUB_ENV
-
-      - name: Publish on Cloudflare Pages
-        run: npx --yes wrangler pages deploy --project-name notesnook-help ./docs/help/site/ --branch main

.github/workflows/ios.publish.yml

@@ -1,67 +0,0 @@
-name: Publish @notesnook/ios
-
-on: workflow_dispatch
-
-jobs:
-  build:
-    runs-on: macos-13
-    timeout-minutes: 60
-
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v2
-
-      - name: Setup Node
-        uses: ./.github/actions/setup-node-with-cache
-
-      - name: Install node modules
-        run: |
-          npm ci --ignore-scripts --prefer-offline --no-audit
-          npm run bootstrap -- --scope=mobile
-
-      - name: Build packages
-        run: npx nx run @notesnook/mobile:build
-
-      - name: Install Pods
-        run: npm run prepare:ios
-
-      - name: Build iOS App
-        uses: yukiarrr/ios-build-action@v1.11.2
-        with:
-          bundle-identifier: org.streetwriters.notesnook
-          scheme: Notesnook
-          configuration: "Release"
-          export-options: apps/mobile/native/ios/ExportOptions.plist
-          project-path: apps/mobile/native/ios/Notesnook.xcodeproj
-          workspace-path: apps/mobile/native/ios/Notesnook.xcworkspace
-          update-targets: |
-            Notesnook
-            Make Note
-            NotesWidgetExtension
-          disable-targets: Notesnook-tvOS,Notesnook-tvOSTests,NotesnookTests
-          code-signing-identity: Apple Distribution
-          team-id: ${{ secrets.APPLE_TEAM_ID }}
-          p12-base64: ${{ secrets.APPLE_CERTIFICATE_P12 }}
-          certificate-password: ${{ secrets.APPLE_CERTIFICATE_P12_PASSWORD }}
-          app-store-connect-api-key-issuer-id: ${{ secrets.API_KEY_ISSUER_ID }}
-          app-store-connect-api-key-id: ${{ secrets.APPSTORE_KEY_ID }}
-          app-store-connect-api-key-base64: ${{ secrets.APPSTORE_CONNECT_API_KEY_BASE64 }}
-          output-path: Notesnook.ipa
-          mobileprovision-base64: |
-            ${{ secrets.APPLE_MOBILE_PROVISION_APP }}
-            ${{ secrets.APPLE_MOBILE_PROVISION_SHARE }}
-            ${{ secrets.APPLE_MOBILE_PROVISION_WIDGET }}
-
-      - name: 'Upload app to TestFlight'
-        uses: apple-actions/upload-testflight-build@v1
-        with: 
-          app-path: Notesnook.ipa
-          issuer-id: ${{ secrets.API_KEY_ISSUER_ID }}
-          api-key-id: ${{ secrets.API_KEY_ID }}
-          api-private-key: ${{ secrets.API_KEY }}
-
-      - name: Upload to Github
-        uses: actions/upload-artifact@v2
-        with:
-          name: Notesnook.ipa
-          path: Notesnook.ipa

.github/workflows/theme-builder.publish.yml

@@ -1,31 +0,0 @@
-name: Publish @notesnook/theme-builder
-
-on: workflow_dispatch
-
-jobs:
-  build:
-    name: Build
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-
-      - name: Setup Node
-        uses: ./.github/actions/setup-node-with-cache
-
-      - name: Install packages
-        run: |
-          npm ci --ignore-scripts --prefer-offline --no-audit
-          npm run bootstrap -- --scope=themebuilder
-
-      - name: Setup environment
-        run: |
-          echo "NX_CLOUD_ACCESS_TOKEN=${{ secrets.NX_CLOUD_ACCESS_TOKEN }}" >> $GITHUB_ENV
-          echo "CLOUDFLARE_ACCOUNT_ID=${{ secrets.CLOUDFLARE_ACCOUNT_ID }}" >> $GITHUB_ENV
-          echo "CLOUDFLARE_API_TOKEN=${{ secrets.CLOUDFLARE_API_TOKEN }}" >> $GITHUB_ENV
-
-      - name: Generate build
-        run: npm run build:theme-builder
-
-      - name: Publish to Cloudflare Pages
-        run: npx --yes wrangler pages deploy --project-name=notesnook-theme-builder ./apps/theme-builder/build/

.github/workflows/vericrypt.publish.yml

@@ -1,31 +0,0 @@
-name: Publish @notesnook/vericrypt
-
-on: workflow_dispatch
-
-jobs:
-  build:
-    name: Build
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-
-      - name: Setup Node
-        uses: ./.github/actions/setup-node-with-cache
-
-      - name: Install packages
-        run: |
-          npm ci --ignore-scripts --prefer-offline --no-audit
-          npm run bootstrap -- --scope=vericrypt
-
-      - name: Setup environment
-        run: |
-          echo "NX_CLOUD_ACCESS_TOKEN=${{ secrets.NX_CLOUD_ACCESS_TOKEN }}" >> $GITHUB_ENV
-          echo "CLOUDFLARE_ACCOUNT_ID=${{ secrets.CLOUDFLARE_ACCOUNT_ID }}" >> $GITHUB_ENV
-          echo "CLOUDFLARE_API_TOKEN=${{ secrets.CLOUDFLARE_API_TOKEN }}" >> $GITHUB_ENV
-
-      - name: Generate build
-        run: npm run build:vericrypt
-
-      - name: Publish on Cloudflare Pages
-        run: npx --yes wrangler pages deploy --project-name=vericrypt ./apps/vericrypt/build/

.github/workflows/web.beta.publish.yml

@@ -1,69 +0,0 @@
-name: Publish @notesnook/web Beta
-
-on:
-  workflow_dispatch:
-  push:
-    branches:
-      - master
-      - '!v3-beta'
-    paths-ignore:
-      - "apps/mobile/**"
-      - "packages/editor-mobile/**"
-      - "apps/desktop/**"
-      - "apps/vericrypt/**"
-      - "servers/**"
-      - "packages/clipper/**"
-      - "extensions/web-clipper/**"
-  pull_request:
-    types:
-      - closed
-      - ready_for_review
-      - reopened
-      - opened
-      - synchronize
-    branches:
-      - master
-      - '!v3-beta'
-    paths-ignore:
-      - "apps/mobile/**"
-      - "packages/editor-mobile/**"
-      - "apps/desktop/**"
-      - "apps/vericrypt/**"
-      - "servers/**"
-      - "packages/clipper/**"
-      - "extensions/web-clipper/**"
-jobs:
-  build:
-    name: Build
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-
-      - name: Setup Node
-        uses: ./.github/actions/setup-node-with-cache
-
-      - name: Install packages
-        run: |
-          npm ci --ignore-scripts --prefer-offline --no-audit
-          npm run bootstrap -- --scope=web
-
-      - name: Setup environment
-        run: |
-          echo "NX_CLOUD_ACCESS_TOKEN=${{ secrets.NX_CLOUD_ACCESS_TOKEN }}" >> $GITHUB_ENV
-          echo "CLOUDFLARE_ACCOUNT_ID=${{ secrets.CLOUDFLARE_ACCOUNT_ID }}" >> $GITHUB_ENV
-          echo "CLOUDFLARE_API_TOKEN=${{ secrets.CLOUDFLARE_API_TOKEN }}" >> $GITHUB_ENV
-
-      - name: Generate beta build
-        run: npm run build:beta:web
-
-      - name: Publish to Cloudflare Pages
-        uses: unlike-ltd/github-actions-cloudflare-pages@v0.1.1
-        id: pages
-        with:
-          cloudflare-api-token: ${{ secrets.CLOUDFLARE_API_TOKEN }}
-          cloudflare-account-id: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
-          cloudflare-project-name: notesnook-beta-app
-          directory: ./apps/web/build
-          github-token: ${{ secrets.GITHUB_TOKEN }}
-          github-environment: ${{ (github.ref == 'refs/heads/master' && 'beta') || 'preview' }}

.github/workflows/web.publish.yml

@@ -24,8 +24,8 @@ jobs:
           echo "CLOUDFLARE_ACCOUNT_ID=${{ secrets.CLOUDFLARE_ACCOUNT_ID }}" >> $GITHUB_ENV
           echo "CLOUDFLARE_API_TOKEN=${{ secrets.CLOUDFLARE_API_TOKEN }}" >> $GITHUB_ENV
 
-      - name: Generate build
+      - name: Generate desktop build
         run: npm run build:web
 
-      - name: Publish to Cloudflare Pages
-        run: npx --yes wrangler pages deploy --project-name=notesnook-app ./apps/web/build/
+      - name: Publish on Cloudflare Pages
+        run: npx --yes wrangler pages publish --project-name=notesnook-app ./apps/web/build/

.github/workflows/web.v3-beta.publish.yml

@@ -1,40 +0,0 @@
-name: Publish @notesnook/web v3 Beta
-
-on:
-  workflow_dispatch:
-
-jobs:
-  build:
-    name: Build
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-
-      - name: Setup Node
-        uses: ./.github/actions/setup-node-with-cache
-
-      - name: Install packages
-        run: |
-          npm ci --ignore-scripts --prefer-offline --no-audit
-          npm run bootstrap -- --scope=web
-
-      - name: Setup environment
-        run: |
-          echo "NX_CLOUD_ACCESS_TOKEN=${{ secrets.NX_CLOUD_ACCESS_TOKEN }}" >> $GITHUB_ENV
-          echo "CLOUDFLARE_ACCOUNT_ID=${{ secrets.CLOUDFLARE_ACCOUNT_ID }}" >> $GITHUB_ENV
-          echo "CLOUDFLARE_API_TOKEN=${{ secrets.CLOUDFLARE_API_TOKEN }}" >> $GITHUB_ENV
-
-      - name: Generate beta build
-        run: npm run build:beta:web
-
-      - name: Publish to Cloudflare Pages
-        uses: unlike-ltd/github-actions-cloudflare-pages@v0.1.1
-        id: pages
-        with:
-          cloudflare-api-token: ${{ secrets.CLOUDFLARE_API_TOKEN }}
-          cloudflare-account-id: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
-          cloudflare-project-name: notesnook-v3-app
-          directory: ./apps/web/build
-          github-token: ${{ secrets.GITHUB_TOKEN }}
-          github-environment: ${{ (github.ref == 'refs/heads/master' && 'beta') || 'preview' }}

CONTRIBUTING.md

@@ -103,7 +103,7 @@ All commits must include valid scopes in the commit message. **Valid commit scop
 
 **Packages:**
 
-1. `crypto`: changes related to the cryptographic core
+1. `crypto`: changes related to the cryptographic core (including `@notesnook/crypto-worker`)
 2. `editor`: changes related to the editor (including `@notesnook/editor-mobile`)
 3. `logger`: changes related to the logger
 4. `theme`: changes related to the theme

README.md

@@ -46,6 +46,7 @@ Notesnook is built using the following technologies:
 | `@notesnook/editor-mobile` | [/packages/editor-mobile](/packages/editor-mobile) | A very thin wrapper around `@notesnook/editor` for mobile clients    |
 | `@notesnook/logger`        | [/packages/logger](/packages/logger)               | Simple & pluggable logger                                            |
 | `@notesnook/sodium`        | [/packages/sodium](/packages/sodium)               | Wrapper around libsodium to support Node.js & Browser                |
+| `@notesnook/crypto-worker` | [/packages/crypto-worker](/packages/crypto-worker) | Helpers to use `@notesnook/crypto` from a Worker                     |
 | `@notesnook/streamable-fs` | [/packages/streamable-fs](/packages/streamable-fs) | Streaming interface around an IndexedDB based file system            |
 | `@notesnook/theme`         | [/packages/theme](/packages/theme)                 | The core theme used in web & desktop clients                         |
 

apps/desktop/app-update.yml

@@ -1,3 +0,0 @@
-owner: streetwriters
-repo: notesnook
-provider: github

apps/desktop/global.d.ts

@@ -19,40 +19,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 /* eslint-disable no-var */
 
 import { BrowserWindow } from "electron";
-import {
-  type FormData as FormDataType,
-  type Headers as HeadersType,
-  type Request as RequestType,
-  type Response as ResponseType
-} from "undici";
 
 declare global {
   var window: BrowserWindow | null;
   var RELEASE: boolean;
   var MAC_APP_STORE: boolean;
-
-  // Re-export undici fetch function and various classes to global scope.
-  // These are classes and functions expected to be at global scope according to Node.js v18 API
-  // documentation.
-  // See: https://nodejs.org/dist/latest-v18.x/docs/api/globals.html
-  // eslint-disable-next-line no-var
-  export var {
-    FormData,
-    Headers,
-    Request,
-    Response,
-    fetch
-  }: typeof import("undici");
-
-  type FormData = FormDataType;
-  type Headers = HeadersType;
-  type Request = RequestType;
-  type Response = ResponseType;
 }
-
-// NOTE: the import in the global block above needs to be a var for this to work properly.
-globalThis.fetch = fetch;
-globalThis.FormData = FormData;
-globalThis.Headers = Headers;
-globalThis.Request = Request;
-globalThis.Response = Response;

apps/desktop/package.json

@@ -2,7 +2,7 @@
   "name": "@notesnook/desktop",
   "productName": "Notesnook",
   "description": "Your private note taking space",
-  "version": "2.6.15",
+  "version": "2.5.7",
   "appAppleId": "1544027013",
   "private": true,
   "main": "./dist/index.js",
@@ -12,25 +12,25 @@
   "license": "GPL-3.0-or-later",
   "dependencies": {
     "@notesnook/crypto": "file:../../packages/crypto",
-    "@trpc/client": "10.38.3",
-    "@trpc/server": "10.38.3",
+    "@trpc/client": "10.31.0",
+    "@trpc/server": "10.31.0",
     "electron-trpc": "0.5.2",
-    "electron-updater": "6.1.4",
+    "electron-updater": "6.1.1",
     "icojs": "^0.17.1",
     "typed-emitter": "^2.1.0",
     "yargs": "^17.6.2",
     "zod": "^3.21.4"
   },
   "devDependencies": {
-    "@types/node": "18.16.1",
+    "@types/node": "^18.15.0",
     "@types/yargs": "^17.0.24",
     "chokidar": "^3.5.3",
-    "electron": "25.9.8",
-    "electron-builder": "^24.9.1",
+    "electron": "24.5.1",
+    "electron-builder": "24.4.0",
     "electron-builder-notarize": "^1.5.1",
     "esbuild": "^0.17.19",
-    "tree-kill": "^1.2.2",
-    "undici": "^5.23.0"
+    "node-fetch": "^3.3.1",
+    "tree-kill": "^1.2.2"
   },
   "optionalDependencies": {
     "dmg-license": "^1.0.11"
@@ -135,10 +135,6 @@
           ]
         }
       ],
-      "signingHashAlgorithms": [
-        "sha256"
-      ],
-      "sign": "./sign.js",
       "icon": "assets/icons/app.ico"
     },
     "portable": {
@@ -195,7 +191,6 @@
       "allowNativeWayland": true
     },
     "extraResources": [
-      "app-update.yml",
       "./assets/**"
     ],
     "extraMetadata": {

apps/desktop/patches/app-builder-lib+24.4.0.patch

@@ -1,8 +1,8 @@
 diff --git a/node_modules/app-builder-lib/out/targets/LinuxTargetHelper.js b/node_modules/app-builder-lib/out/targets/LinuxTargetHelper.js
-index fcb7f54..cb1c7f7 100644
+index 3ba5d6a..cf8e147 100644
 --- a/node_modules/app-builder-lib/out/targets/LinuxTargetHelper.js
 +++ b/node_modules/app-builder-lib/out/targets/LinuxTargetHelper.js
-@@ -116,6 +116,7 @@ class LinuxTargetHelper {
+@@ -105,6 +105,7 @@ class LinuxTargetHelper {
              StartupWMClass: appInfo.productName,
              ...extra,
              ...targetSpecificOptions.desktop,
@@ -10,7 +10,7 @@ index fcb7f54..cb1c7f7 100644
          };
          const description = this.getDescription(targetSpecificOptions);
          if (!(0, builder_util_1.isEmptyOrSpaces)(description)) {
-@@ -159,6 +160,23 @@ class LinuxTargetHelper {
+@@ -148,6 +149,23 @@ class LinuxTargetHelper {
              data += `\n${name}=${desktopMeta[name]}`;
          }
          data += "\n";

apps/desktop/sign.js

@@ -1,60 +0,0 @@
-/*
-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/>.
-*/
-const { writeFileSync, rmSync, readFileSync } = require("fs");
-const { execSync } = require("child_process");
-const { relative, join } = require("path");
-
-module.exports = async function (configuration) {
-  const Endpoint = "https://weu.codesigning.azure.net";
-  const CodeSigningAccountName = "Notesnook";
-  const CertificateProfileName = "Notesnook";
-  const FileDigest = configuration.hash.toUpperCase();
-  const TimestampRfc3161 = "http://timestamp.acs.microsoft.com";
-  const TimestampDigest = configuration.hash.toUpperCase();
-  const Description = "The Notesnook app";
-  const DescriptionUrl = "https://notesnook.com/";
-  const FilesCatalog = createCatalog(configuration.path);
-
-  const command = `Invoke-AzureCodeSigning -Endpoint "${Endpoint}" -CodeSigningAccountName "${CodeSigningAccountName}" -CertificateProfileName "${CertificateProfileName}" -FileDigest "${FileDigest}" -TimestampRfc3161 "${TimestampRfc3161}" -TimestampDigest "${TimestampDigest}" -Description "${Description}" -DescriptionUrl "${DescriptionUrl}" -FilesCatalog "${FilesCatalog}"`;
-
-  console.debug("Signing", configuration.path, "using command", command);
-
-  psexec(command);
-
-  console.debug("Signed", configuration.path);
-
-  deleteCatalog();
-};
-
-function createCatalog(path) {
-  writeFileSync("_catalog", relative(__dirname, path));
-  return join(__dirname, "_catalog");
-}
-
-function deleteCatalog() {
-  rmSync("_catalog");
-}
-
-function psexec(cmd) {
-  return execSync(cmd, {
-    env: process.env,
-    stdio: "inherit",
-    shell: "pwsh"
-  });
-}

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

@@ -29,8 +29,6 @@ import { dirname } from "path";
 import { resolvePath } from "../utils/resolve-path";
 import { observable } from "@trpc/server/observable";
 import { AssetManager } from "../utils/asset-manager";
-import { isFlatpak } from "../utils";
-import { setupDesktopIntegration } from "../utils/desktop-integration";
 
 const t = initTRPC.create();
 
@@ -46,8 +44,6 @@ const NotificationOptions = z.object({
 });
 
 export const osIntegrationRouter = t.router({
-  isFlatpak: t.procedure.query(() => isFlatpak()),
-
   zoomFactor: t.procedure.query(() => config.zoomFactor),
   setZoomFactor: t.procedure.input(z.number()).mutation(({ input: factor }) => {
     globalThis.window?.webContents.setZoomFactor(factor);
@@ -56,21 +52,21 @@ export const osIntegrationRouter = t.router({
 
   privacyMode: t.procedure.query(() => config.privacyMode),
   setPrivacyMode: t.procedure
-    .input(z.object({ enabled: z.boolean() }))
-    .mutation(({ input: { enabled } }) => {
+    .input(z.boolean().optional())
+    .mutation(({ input: privacyMode }) => {
       if (!globalThis.window || !["win32", "darwin"].includes(process.platform))
         return;
 
-      globalThis.window.setContentProtection(enabled);
+      globalThis.window.setContentProtection(!!privacyMode);
 
       if (process.platform === "win32") {
         globalThis.window.setThumbnailClip(
-          enabled
+          privacyMode
             ? { x: 0, y: 0, width: 1, height: 1 }
             : { x: 0, y: 0, width: 0, height: 0 }
         );
       }
-      config.privacyMode = enabled;
+      config.privacyMode = !!privacyMode;
     }),
 
   desktopIntegration: t.procedure.query(() => config.desktopSettings),
@@ -83,7 +79,6 @@ export const osIntegrationRouter = t.router({
         AutoLaunch.disable();
       }
       config.desktopSettings = settings;
-      setupDesktopIntegration(settings);
     }),
 
   selectDirectory: t.procedure
@@ -122,14 +117,6 @@ export const osIntegrationRouter = t.router({
       writeFileSync(resolvedPath, data);
     }),
 
-  resolvePath: t.procedure
-    .input(z.object({ filePath: z.string() }))
-    .query(({ input }) => {
-      const { filePath } = input;
-      if (!filePath) return;
-      return resolvePath(filePath);
-    }),
-
   showNotification: t.procedure
     .input(NotificationOptions)
     .query(({ input }) => {

apps/desktop/src/api/spell-checker.ts

@@ -114,9 +114,9 @@ export const spellCheckerRouter = t.router({
       globalThis.window?.webContents.session.setSpellCheckerLanguages(languages)
     ),
   toggle: t.procedure
-    .input(z.object({ enabled: z.boolean() }))
-    .mutation(({ input: { enabled } }) => {
-      globalThis.window?.webContents.session.setSpellCheckerEnabled(enabled);
-      config.isSpellCheckerEnabled = enabled;
+    .input(z.boolean().optional())
+    .mutation(({ input: enabled }) => {
+      globalThis.window?.webContents.session.setSpellCheckerEnabled(!!enabled);
+      config.isSpellCheckerEnabled = !!enabled;
     })
 });

apps/desktop/src/api/updater.ts

@@ -41,9 +41,10 @@ export const updaterRouter = t.router({
   }),
 
   toggleAutoUpdates: t.procedure
-    .input(z.object({ enabled: z.boolean() }))
-    .mutation(({ input: { enabled } }) => {
-      config.automaticUpdates = enabled;
+    .input(z.boolean().optional())
+    .mutation(({ input }) => {
+      config.automaticUpdates =
+        input === undefined ? !config.automaticUpdates : input;
     }),
 
   onChecking: createSubscription("checking-for-update"),

apps/desktop/src/cli.ts

@@ -27,23 +27,19 @@ export type CLIOptions = {
   hidden: boolean;
 };
 
-export async function parseArguments(argv: string[]): Promise<CLIOptions> {
+export async function parseArguments(): Promise<CLIOptions> {
   const result: CLIOptions = {
     note: false,
     notebook: false,
     reminder: false,
     hidden: false
   };
-  const { hidden } = await yargs(hideBin(argv))
+  const { hidden } = await yargs(hideBin(process.argv))
     .boolean("hidden")
-    // have to account for this flag added on Windows when launching
-    // via Jumplist
-    .boolean("allow-file-access-from-files")
     .command("new", "Create a new item", (yargs) => {
       return yargs
         .command("note", "Create a new note", {}, () => {
           result.note = true;
-          console.log("HERE!");
         })
         .command("notebook", "Create a new notebook", {}, () => {
           result.notebook = true;

apps/desktop/src/main.ts

@@ -17,13 +17,14 @@ 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 { app, BrowserWindow, nativeTheme, shell } from "electron";
+import { app, BrowserWindow, nativeTheme, session, shell } from "electron";
 import { isDevelopment } from "./utils";
 import { registerProtocol, PROTOCOL_URL } from "./utils/protocol";
 import { configureAutoUpdater } from "./utils/autoupdater";
 import { getBackgroundColor, getTheme, setTheme } from "./utils/theme";
 import { setupMenu } from "./utils/menu";
 import { WindowState } from "./utils/window-state";
+import { AutoLaunch } from "./utils/autolaunch";
 import { setupJumplist } from "./utils/jumplist";
 import { setupTray } from "./utils/tray";
 import { CLIOptions, parseArguments } from "./cli";
@@ -32,15 +33,6 @@ import { createIPCHandler } from "electron-trpc/main";
 import { router, api } from "./api";
 import { config } from "./utils/config";
 import path from "path";
-import { bringToFront } from "./utils/bring-to-front";
-import { bridge } from "./api/bridge";
-import { setupDesktopIntegration } from "./utils/desktop-integration";
-
-// only run a single instance
-if (!MAC_APP_STORE && !app.requestSingleInstanceLock()) {
-  console.log("Another instance is already running!");
-  app.exit();
-}
 
 if (process.platform == "win32" && process.env.PORTABLE_EXECUTABLE_DIR) {
   console.log("Portable app: true");
@@ -50,21 +42,19 @@ if (process.platform == "win32" && process.env.PORTABLE_EXECUTABLE_DIR) {
   app.setPath("userData", path.join(root, "UserData"));
 }
 
+// only run a single instance
+if (!MAC_APP_STORE && !app.requestSingleInstanceLock()) {
+  app.exit();
+}
+
 if (process.platform === "win32") {
   app.setAppUserModelId(app.name);
 }
 
-process.on("uncaughtException", (error) => {
-  console.error("uncaughtException:", error);
-});
-process.on("unhandledRejection", (reason) => {
-  console.error("unhandledRejection:", reason);
-});
-
 app.commandLine.appendSwitch("lang", "en-US");
 
 async function createWindow() {
-  const cliOptions = await parseArguments(process.argv);
+  const cliOptions = await parseArguments();
   setTheme(getTheme());
 
   const mainWindowState = new WindowState({});
@@ -77,7 +67,7 @@ async function createWindow() {
     darkTheme: getTheme() === "dark",
     backgroundColor: getBackgroundColor(),
     opacity: 0,
-    autoHideMenuBar: false,
+    autoHideMenuBar: true,
     icon: AssetManager.appIcon({
       size: 512,
       format: process.platform === "win32" ? "ico" : "png"
@@ -91,9 +81,7 @@ async function createWindow() {
     }
   });
 
-  createIPCHandler({ router, windows: [mainWindow] });
   globalThis.window = mainWindow;
-  mainWindow.setMenuBarVisibility(false);
   mainWindowState.manage(mainWindow);
 
   if (cliOptions.hidden && !config.desktopSettings.minimizeToSystemTray)
@@ -103,11 +91,12 @@ async function createWindow() {
   mainWindow.setOpacity(1);
 
   if (config.privacyMode) {
-    await api.integration.setPrivacyMode({ enabled: config.privacyMode });
+    await api.integration.setPrivacyMode(config.privacyMode);
   }
 
   await AssetManager.loadIcons();
-  setupDesktopIntegration(config.desktopSettings);
+  setupDesktopIntegration();
+  createIPCHandler({ router, windows: [mainWindow] });
 
   mainWindow.webContents.session.setSpellCheckerDictionaryDownloadURL(
     "http://dictionaries.notesnook.com/"
@@ -148,15 +137,6 @@ app.once("window-all-closed", () => {
   }
 });
 
-app.on("second-instance", async (_ev, argv) => {
-  if (!globalThis.window) return;
-  const cliOptions = await parseArguments(argv);
-  if (cliOptions.note) bridge.onCreateItem("note");
-  if (cliOptions.notebook) bridge.onCreateItem("notebook");
-  if (cliOptions.reminder) bridge.onCreateItem("reminder");
-  bringToFront();
-});
-
 app.on("activate", () => {
   if (globalThis.window === null) {
     createWindow();
@@ -177,3 +157,49 @@ function createURL(options: CLIOptions, path = "/") {
 
   return url;
 }
+
+function setupDesktopIntegration() {
+  const desktopIntegration = config.desktopSettings;
+
+  if (
+    desktopIntegration.closeToSystemTray ||
+    desktopIntegration.minimizeToSystemTray
+  ) {
+    setupTray();
+  }
+
+  // when close to system tray is enabled, it becomes nigh impossible
+  // to "quit" the app. This is necessary in order to fix that.
+  if (desktopIntegration.closeToSystemTray) {
+    app.on("before-quit", () => app.exit(0));
+  }
+
+  globalThis.window?.once("close", (e) => {
+    if (config.desktopSettings.closeToSystemTray) {
+      e.preventDefault();
+      if (process.platform == "darwin") {
+        // on macOS window cannot be minimized/hidden if it is already fullscreen
+        // so we just close it.
+        if (globalThis.window?.isFullScreen()) app.exit(0);
+        else app.hide();
+      } else {
+        globalThis.window?.minimize();
+        globalThis.window?.hide();
+      }
+    }
+  });
+
+  globalThis.window?.on("minimize", () => {
+    if (config.desktopSettings.minimizeToSystemTray) {
+      if (process.platform == "darwin") {
+        app.hide();
+      } else {
+        globalThis.window?.hide();
+      }
+    }
+  });
+
+  if (desktopIntegration.autoStart) {
+    AutoLaunch.enable(!!desktopIntegration.startMinimized);
+  }
+}

apps/desktop/src/preload.ts

@@ -31,6 +31,7 @@ declare global {
 }
 
 process.once("loaded", async () => {
+  console.log("HELLO!");
   const electronTRPC: RendererGlobalElectronTRPC = {
     sendMessage: (operation) =>
       ipcRenderer.send(ELECTRON_TRPC_CHANNEL, operation),

apps/desktop/src/utils/autolaunch.ts

@@ -35,8 +35,6 @@ const LINUX_AUTOSTART_DIRECTORY_PATH = path.join(
   "autostart"
 );
 
-const STARTUP_ARGS = ["--hidden"];
-
 export class AutoLaunch {
   static enable(hidden: boolean) {
     if (process.platform === "linux") {
@@ -49,14 +47,10 @@ export class AutoLaunch {
         LINUX_DESKTOP_ENTRY(hidden)
       );
     } else {
-      const loginItemSettings = app.getLoginItemSettings({
-        args: STARTUP_ARGS
-      });
-      if (loginItemSettings.openAtLogin) return;
       app.setLoginItemSettings({
         openAtLogin: true,
         openAsHidden: hidden,
-        args: STARTUP_ARGS
+        args: ["--hidden"]
       });
     }
   }

apps/desktop/src/utils/config.ts

@@ -38,8 +38,8 @@ export const config = {
     closeToSystemTray: false
   },
   privacyMode: false,
-  isSpellCheckerEnabled: true,
-  zoomFactor: 1,
+  isSpellCheckerEnabled: false,
+  zoomFactor: 0,
   theme: nativeTheme.themeSource,
   automaticUpdates: true
 };

apps/desktop/src/utils/desktop-integration.ts

@@ -1,74 +0,0 @@
-/*
-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 { app } from "electron";
-import { DesktopIntegration, config } from "./config";
-import { setupTray, destroyTray } from "./tray";
-import { AutoLaunch } from "./autolaunch";
-
-export function setupDesktopIntegration(
-  desktopIntegration: DesktopIntegration
-) {
-  if (
-    desktopIntegration.closeToSystemTray ||
-    desktopIntegration.minimizeToSystemTray
-  ) {
-    setupTray();
-  } else {
-    destroyTray();
-  }
-
-  // when close to system tray is enabled, it becomes nigh impossible
-  // to "quit" the app. This is necessary in order to fix that.
-  app.on("before-quit", () =>
-    desktopIntegration.closeToSystemTray ? app.exit(0) : null
-  );
-
-  globalThis.window?.on("close", (e) => {
-    if (config.desktopSettings.closeToSystemTray) {
-      e.preventDefault();
-      if (process.platform == "darwin") {
-        // on macOS window cannot be minimized/hidden if it is already fullscreen
-        // so we just close it.
-        if (globalThis.window?.isFullScreen()) app.exit(0);
-        else app.hide();
-      } else {
-        try {
-          globalThis.window?.minimize();
-          globalThis.window?.hide();
-        } catch (error) {
-          console.error(error);
-        }
-      }
-    }
-  });
-
-  globalThis.window?.on("minimize", () => {
-    if (config.desktopSettings.minimizeToSystemTray) {
-      if (process.platform == "darwin") {
-        app.hide();
-      } else {
-        globalThis.window?.hide();
-      }
-    }
-  });
-
-  if (desktopIntegration.autoStart) {
-    AutoLaunch.enable(!!desktopIntegration.startMinimized);
-  }
-}

apps/desktop/src/utils/menu.ts

@@ -101,26 +101,6 @@ function setupMenu() {
         })
       );
 
-    if (params.linkURL?.length) {
-      menu.append(
-        new MenuItem({
-          label: "Copy link",
-          click() {
-            clipboard.writeText(params.linkURL);
-          }
-        })
-      );
-
-      menu.append(
-        new MenuItem({
-          label: "Copy link text",
-          click() {
-            clipboard.writeText(params.linkText);
-          }
-        })
-      );
-    }
-
     if (params.selectionText.length) {
       menu.append(
         new MenuItem({

apps/desktop/src/utils/protocol.ts

@@ -17,14 +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 { protocol } from "electron";
+import { protocol, ProtocolRequest } from "electron";
 import { isDevelopment } from "./index";
 import { createReadStream } from "fs";
 import { extname, normalize } from "path";
 import { URL } from "url";
+import fetch, { Response } from "node-fetch";
 
 const BASE_PATH = isDevelopment() ? "../public" : "";
 const HOSTNAME = `app.notesnook.com`;
+const FILE_NOT_FOUND = -6;
 const SCHEME = "https";
 const extensionToMimeType: Record<string, string> = {
   html: "text/html",
@@ -32,59 +34,101 @@ const extensionToMimeType: Record<string, string> = {
   js: "application/javascript",
   css: "text/css",
   svg: "image/svg+xml",
-  png: "image/png",
-  jpg: "image/jpg",
-  ttf: "font/ttf",
-  woff: "font/woff",
-  woff2: "font/woff2"
+  png: "image/png"
 };
 
 function registerProtocol() {
-  protocol.handle(SCHEME, async (request) => {
-    const url = new URL(request.url);
-    if (shouldInterceptRequest(url)) {
-      console.info("Intercepting request:", request.url);
-      const loadIndex = !extname(url.pathname);
-      const filePath = normalize(
-        `${__dirname}${
-          loadIndex ? `${BASE_PATH}/index.html` : `${BASE_PATH}/${url.pathname}`
-        }`
-      );
-      if (!filePath) {
-        console.error("Local asset file not found at", filePath);
-        return new Response(undefined, {
-          status: 404,
-          statusText: "FILE_NOT_FOUND"
+  const protocolInterceptionResult = protocol.interceptStreamProtocol(
+    SCHEME,
+    async (request, callback) => {
+      const url = new URL(request.url);
+      if (shouldInterceptRequest(url)) {
+        console.info("Intercepting request:", request.url);
+
+        const loadIndex = !extname(url.pathname);
+        const filePath = normalize(
+          `${__dirname}${
+            loadIndex
+              ? `${BASE_PATH}/index.html`
+              : `${BASE_PATH}/${url.pathname}`
+          }`
+        );
+        if (!filePath) {
+          console.error("Local asset file not found at", filePath);
+          callback({ error: FILE_NOT_FOUND });
+          return;
+        }
+        const fileExtension = extname(filePath).replace(".", "");
+
+        const data = createReadStream(filePath);
+        callback({
+          data,
+          mimeType: extensionToMimeType[fileExtension]
+        });
+      } else {
+        let response: Response;
+        try {
+          const body = await getBody(request);
+          response = await fetch(request.url, {
+            ...request,
+            body,
+            headers: {
+              ...request.headers
+              // origin: `${PROTOCOL}://${HOSTNAME}/`
+            },
+            referrer: request.referrer,
+            redirect: "manual"
+          });
+        } catch (e) {
+          console.error(e);
+          console.error(`Error sending request to `, request.url, "Error: ", e);
+          callback({ statusCode: 400 });
+          return;
+        }
+        callback({
+          statusCode: response.status,
+          data: response.body || undefined,
+          headers: Object.fromEntries(response.headers.entries()),
+          mimeType: response.headers.get("Content-Type") || undefined
         });
       }
-      const fileExtension = extname(filePath).replace(".", "");
-      return new Response(createReadStream(filePath), {
-        headers: { "Content-Type": extensionToMimeType[fileExtension] }
-      });
-    } else {
-      if (request.headers.has("X-Content-Length")) {
-        request.headers.set(
-          "Content-Length",
-          request.headers.get("X-Content-Length") || "0"
-        );
-        request.headers.delete("X-Content-Length");
-      }
-      const headers = Object.fromEntries(request.headers.entries());
-
-      return await fetch(request.url, {
-        signal: request.signal,
-        mode: request.mode,
-        headers,
-        method: request.method,
-        body: request.body,
-        credentials: request.credentials,
-        referrer: (request as any).referrer,
-        duplex: "half",
-        redirect: "manual"
-      });
     }
-  });
-  console.info(`${SCHEME} protocol inteception "successful"`);
+  );
+
+  console.info(
+    `${SCHEME} protocol inteception ${
+      protocolInterceptionResult ? "successful" : "failed"
+    }.`
+  );
+
+  // protocol.handle(SCHEME, (request) => {
+  //   const url = new URL(request.url);
+  //   if (shouldInterceptRequest(url)) {
+  //     console.info("Intercepting request:", request.url);
+  //     const loadIndex = !extname(url.pathname);
+  //     const absoluteFilePath = normalize(
+  //       `${__dirname}${
+  //         loadIndex ? `${BASE_PATH}/index.html` : `${BASE_PATH}/${url.pathname}`
+  //       }`
+  //     );
+  //     const filePath = getPath(absoluteFilePath);
+  //     if (!filePath) {
+  //       console.error("Local asset file not found at", filePath);
+  //       return new Response(undefined, {
+  //         status: 404,
+  //         statusText: "FILE_NOT_FOUND"
+  //       });
+  //     }
+  //     const fileExtension = extname(filePath).replace(".", "");
+  //     const data = createReadStream(filePath);
+  //     return new Response(data, {
+  //       headers: { "Content-Type": extensionToMimeType[fileExtension] }
+  //     });
+  //   } else {
+  //     return net.fetch(request);
+  //   }
+  // });
+  // console.info(`${SCHEME} protocol inteception "successful"`);
 }
 
 const bypassedRoutes: string[] = [];
@@ -95,3 +139,22 @@ function shouldInterceptRequest(url: URL) {
 
 const PROTOCOL_URL = `${SCHEME}://${HOSTNAME}/`;
 export { registerProtocol, PROTOCOL_URL };
+
+async function getBody(request: ProtocolRequest) {
+  const session = globalThis?.window?.webContents?.session;
+
+  const blobParts = [];
+  if (!request.uploadData || !request.uploadData.length) return null;
+  for (const data of request.uploadData) {
+    if (data.bytes) {
+      blobParts.push(new Uint8Array(data.bytes));
+    } else if (session && data.blobUUID) {
+      const buffer = await session.getBlobData(data.blobUUID);
+      if (!buffer) continue;
+      blobParts.push(new Uint8Array(buffer));
+    }
+  }
+  const blob = new Blob(blobParts);
+  return blob;
+}
+

apps/mobile/.gitignore

@@ -5,6 +5,7 @@ artifacts/
 .DS_Store
 
 native/android/app/src/main/assets/
+
 *Issues.md
 build_cache/
 #

apps/mobile/app/app.js

@@ -16,13 +16,8 @@ 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 "@azure/core-asynciterator-polyfill";
-import {
-  THEME_COMPATIBILITY_VERSION,
-  useThemeEngineStore
-} from "@notesnook/theme";
 import React, { useEffect } from "react";
-import { I18nManager, View } from "react-native";
+import { View } from "react-native";
 import "react-native-gesture-handler";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
 import { SafeAreaProvider } from "react-native-safe-area-context";
@@ -31,17 +26,12 @@ import { withErrorBoundry } from "./components/exception-handler";
 import GlobalSafeAreaProvider from "./components/globalsafearea";
 import { useAppEvents } from "./hooks/use-app-events";
 import { ApplicationHolder } from "./navigation";
-import { themeTrpcClient } from "./screens/settings/theme-selector";
 import Notifications from "./services/notifications";
 import SettingsService from "./services/settings";
 import { TipManager } from "./services/tip-manager";
-import { useThemeStore } from "./stores/use-theme-store";
 import { useUserStore } from "./stores/use-user-store";
 
-I18nManager.allowRTL(false);
-I18nManager.forceRTL(false);
-I18nManager.swapLeftAndRightInRTL(false);
-
+SettingsService.init();
 SettingsService.checkOrientation();
 const App = () => {
   const init = useAppEvents();
@@ -50,7 +40,6 @@ const App = () => {
     if (appLockMode && appLockMode !== "none") {
       useUserStore.getState().lockApp(true);
     }
-    globalThis["IS_MAIN_APP_RUNNING"] = true;
     init();
     setTimeout(async () => {
       SettingsService.onFirstLaunch();
@@ -98,53 +87,4 @@ const App = () => {
   );
 };
 
-let currTheme =
-  useThemeStore.getState().colorScheme === "dark"
-    ? SettingsService.getProperty("darkTheme")
-    : SettingsService.getProperty("lightTheme");
-useThemeEngineStore.getState().setTheme(currTheme);
-
-export const withTheme = (Element) => {
-  return function AppWithThemeProvider() {
-    const [colorScheme, darkTheme, lightTheme] = useThemeStore((state) => [
-      state.colorScheme,
-      state.darkTheme,
-      state.lightTheme
-    ]);
-
-    useEffect(() => {
-      setTimeout(() => {
-        const currentTheme = colorScheme === "dark" ? darkTheme : lightTheme;
-        if (!currentTheme) return;
-        themeTrpcClient.updateTheme
-          .query({
-            version: currentTheme.version,
-            compatibilityVersion: THEME_COMPATIBILITY_VERSION,
-            id: currentTheme.id
-          })
-          .then((theme) => {
-            if (theme) {
-              console.log(theme.version, "theme updated");
-              theme.colorScheme === "dark"
-                ? useThemeStore.getState().setDarkTheme(theme)
-                : useThemeStore.getState().setLightTheme(theme);
-            }
-          })
-          .catch(console.log);
-      }, 1000);
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-
-    const nextTheme = colorScheme === "dark" ? darkTheme : lightTheme;
-    if (JSON.stringify(nextTheme) !== JSON.stringify(currTheme)) {
-      useThemeEngineStore
-        .getState()
-        .setTheme(colorScheme === "dark" ? darkTheme : lightTheme);
-      currTheme = nextTheme;
-    }
-
-    return <Element />;
-  };
-};
-
-export default withTheme(withErrorBoundry(App, "App"));
+export default withErrorBoundry(App, "App");

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

@@ -126,18 +126,6 @@ export async function decrypt(password, data) {
   return await Sodium.decrypt(password, _data);
 }
 
-export async function decryptMulti(password, data) {
-  if (!password.password && !password.key) return undefined;
-  if (password.password && password.password === "" && !password.key)
-    return undefined;
-
-  data = data.map((d) => {
-    d.output = "plain";
-    return d;
-  });
-  return await Sodium.decryptMulti(password, data);
-}
-
 export function parseAlgorithm(alg) {
   if (!alg) return {};
   const [enc, kdf, compressed, compressionAlg, base64variant] = alg.split("-");
@@ -166,24 +154,3 @@ export async function encrypt(password, data) {
     alg: getAlgorithm(7)
   };
 }
-
-export async function encryptMulti(password, data) {
-  if (!password.password && !password.key) return undefined;
-  if (password.password && password.password === "" && !password.key)
-    return undefined;
-
-  let results = await Sodium.encryptMulti(
-    password,
-    data.map((item) => ({
-      type: "plain",
-      data: item
-    }))
-  );
-
-  return !results
-    ? []
-    : results.map((result) => ({
-        ...result,
-        alg: getAlgorithm(7)
-      }));
-}

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

@@ -17,47 +17,56 @@ 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 { database } from "@notesnook/common";
-import { logger as dbLogger } from "@notesnook/core/dist/logger";
+import { initalize, logger as dbLogger } from "@notesnook/core/logger";
 import { Platform } from "react-native";
-import * as Gzip from "react-native-gzip";
+import { MMKVLoader } from "react-native-mmkv-storage";
+import filesystem from "../filesystem";
 import EventSource from "../../utils/sse/even-source-ios";
 import AndroidEventSource from "../../utils/sse/event-source";
-import filesystem from "../filesystem";
-import "./logger";
-import Storage from "./storage";
+import Storage, { KV } from "./storage";
+import * as Gzip from "react-native-gzip";
 
-database.host(
-  __DEV__
-    ? {
-        API_HOST: "https://api.notesnook.com",
-        AUTH_HOST: "https://auth.streetwriters.co",
-        SSE_HOST: "https://events.streetwriters.co",
-        SUBSCRIPTIONS_HOST: "https://subscriptions.streetwriters.co",
-        ISSUES_HOST: "https://issues.streetwriters.co"
-        // API_HOST: "http://192.168.43.108:5264",
-        // AUTH_HOST: "http://192.168.43.108:8264",
-        // SSE_HOST: "http://192.168.43.108:7264",
-        // SUBSCRIPTIONS_HOST: "http://192.168.43.108:9264",
-        // ISSUES_HOST: "http://192.168.43.108:2624"
-      }
-    : {
-        API_HOST: "https://api.notesnook.com",
-        AUTH_HOST: "https://auth.streetwriters.co",
-        SSE_HOST: "https://events.streetwriters.co",
-        SUBSCRIPTIONS_HOST: "https://subscriptions.streetwriters.co",
-        ISSUES_HOST: "https://issues.streetwriters.co"
-      }
-);
+const LoggerStorage = new MMKVLoader()
+  .withInstanceID("notesnook_logs")
+  .initialize();
 
-database.setup(
-  Storage,
-  Platform.OS === "ios" ? EventSource : AndroidEventSource,
-  filesystem,
-  {
-    compress: Gzip.deflate,
-    decompress: Gzip.inflate
-  }
-);
+  
+  database.host(
+    __DEV__
+      ? {
+          API_HOST: "https://api.notesnook.com",
+          AUTH_HOST: "https://auth.streetwriters.co",
+          SSE_HOST: "https://events.streetwriters.co",
+          SUBSCRIPTIONS_HOST: "https://subscriptions.streetwriters.co",
+          ISSUES_HOST: "https://issues.streetwriters.co"
+          // API_HOST: "http://192.168.8.101:5264",
+          // AUTH_HOST: "http://192.168.8.101:8264",
+          // SSE_HOST: "http://192.168.8.101:7264",
+          // SUBSCRIPTIONS_HOST: "http://192.168.8.101:9264",
+          // ISSUES_HOST: "http://192.168.8.101:2624"
+        }
+      : {
+          API_HOST: "https://api.notesnook.com",
+          AUTH_HOST: "https://auth.streetwriters.co",
+          SSE_HOST: "https://events.streetwriters.co",
+          SUBSCRIPTIONS_HOST: "https://subscriptions.streetwriters.co",
+          ISSUES_HOST: "https://issues.streetwriters.co"
+        }
+  );
+
+  database.setup(
+    Storage,
+    Platform.OS === "ios" ? EventSource : AndroidEventSource,
+    filesystem,
+    {
+      compress: Gzip.deflate,
+      decompress: Gzip.inflate
+    }
+  );
+
+
+
+initalize(new KV(LoggerStorage), true);
 
 export const db = database;
 export const DatabaseLogger = dbLogger;

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

@@ -1,29 +0,0 @@
-/*
-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 { initalize } from "@notesnook/core/dist/logger";
-import { MMKVLoader } from "react-native-mmkv-storage";
-import { KV } from "./storage";
-
-const LoggerStorage = new MMKVLoader()
-  .withInstanceID("notesnook_logs")
-  .initialize();
-
-initalize(new KV(LoggerStorage));
-
-export { LoggerStorage };

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

@@ -18,13 +18,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import { Platform } from "react-native";
-import { ProcessingModes, MMKVLoader } from "react-native-mmkv-storage";
+import MMKVStorage, { ProcessingModes } from "react-native-mmkv-storage";
 
-export const MMKV = new MMKVLoader()
+export const MMKV = new MMKVStorage.Loader()
   .setProcessingMode(
     Platform.OS === "ios"
       ? ProcessingModes.MULTI_PROCESS
       : ProcessingModes.SINGLE_PROCESS
   )
-  .disableIndexing()
   .initialize();

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

@@ -27,16 +27,11 @@ import {
   getCryptoKey,
   getRandomBytes,
   hash,
-  removeCryptoKey,
-  decryptMulti,
-  encryptMulti
+  removeCryptoKey
 } from "./encryption";
 import { MMKV } from "./mmkv";
 
 export class KV {
-  /**
-   * @type {typeof MMKV}
-   */
   storage = null;
   constructor(storage) {
     this.storage = storage;
@@ -58,7 +53,6 @@ export class KV {
       key,
       typeof data === "string" ? data : JSON.stringify(data)
     );
-
     return true;
   }
 
@@ -66,36 +60,27 @@ export class KV {
     if (keys.length <= 0) {
       return [];
     } else {
-      try {
-        let data = await this.storage.getMultipleItemsAsync(
-          keys.slice(),
-          "string"
-        );
-        return data.map(([key, value]) => {
-          let obj;
-          try {
-            obj = JSON.parse(value);
-          } catch (e) {
-            obj = value;
-          }
-          return [key, obj];
-        });
-      } catch (e) {
-        console.log(e);
-      }
+      let data = await this.storage.getMultipleItemsAsync(keys.slice());
+
+      return data.map(([key, value]) => {
+        let obj;
+        try {
+          obj = JSON.parse(value);
+        } catch (e) {
+          obj = value;
+        }
+
+        return [key, obj];
+      });
     }
   }
 
   async remove(key) {
-    return this.storage.removeItem(key);
-  }
-
-  async removeMulti(keys) {
-    return this.storage.removeItems(...keys);
+    return await this.storage.removeItem(key);
   }
 
   async clear() {
-    return this.storage.clearStore();
+    return await this.storage.clearStore();
   }
 
   async getAllKeys() {
@@ -111,10 +96,6 @@ export class KV {
     );
     return keys;
   }
-
-  async writeMulti(items) {
-    return this.storage.setMultipleItemsAsync(items, "object");
-  }
 }
 
 const DefaultStorage = new KV(MMKV);
@@ -148,11 +129,8 @@ export default {
   remove: (key) => DefaultStorage.remove(key),
   clear: () => DefaultStorage.clear(),
   getAllKeys: () => DefaultStorage.getAllKeys(),
-  writeMulti: (items) => DefaultStorage.writeMulti(items),
-  removeMulti: (keys) => DefaultStorage.removeMulti(keys),
   encrypt,
   decrypt,
-  decryptMulti,
   getRandomBytes,
   checkAndCreateDir,
   requestPermission,
@@ -160,6 +138,5 @@ export default {
   getCryptoKey,
   removeCryptoKey,
   hash,
-  generateCryptoKey,
-  encryptMulti
+  generateCryptoKey
 };

apps/mobile/app/common/filesystem/download-attachment.js

@@ -22,7 +22,7 @@ import {
   getFileNameWithExtension,
   isImage,
   isDocument
-} from "@notesnook/core/dist/utils/filename";
+} from "@notesnook/core/utils/filename";
 import React from "react";
 import { Platform } from "react-native";
 import * as ScopedStorage from "react-native-scoped-storage";
@@ -34,8 +34,6 @@ import { useAttachmentStore } from "../../stores/use-attachment-store";
 import { db } from "../database";
 import Storage from "../database/storage";
 import { cacheDir, copyFileAsync, releasePermissions } from "./utils";
-import { createCacheDir, exists } from "./io";
-import { IOS_APPGROUPID } from "../../utils/constants";
 
 export const FileDownloadStatus = {
   Success: 1,
@@ -64,7 +62,6 @@ export async function downloadAttachments(
   canceled,
   groupId
 ) {
-  await createCacheDir();
   if (!attachments || !attachments.length) return;
   const result = new Map();
 
@@ -182,13 +179,9 @@ export default async function downloadAttachment(
     silent: false,
     cache: false,
     throwError: false,
-    groupId: undefined,
-    base64: false,
-    text: false
+    groupId: undefined
   }
 ) {
-  await createCacheDir();
-
   let attachment = db.attachments.attachment(hash);
   if (!attachment) {
     console.log("attachment not found");
@@ -215,17 +208,10 @@ export default async function downloadAttachment(
       options.groupId || attachment.metadata.hash,
       attachment.metadata.hash
     );
-
-    if (!(await exists(attachment.metadata.hash))) {
+    if (
+      !(await RNFetchBlob.fs.exists(`${cacheDir}/${attachment.metadata.hash}`))
+    )
       return;
-    }
-
-    if (options.base64 || options.text) {
-      return await db.attachments.read(
-        attachment.metadata.hash,
-        options.base64 ? "base64" : "text"
-      );
-    }
 
     let filename = getFileNameWithExtension(
       attachment.metadata.filename,
@@ -243,8 +229,7 @@ export default async function downloadAttachment(
       mime: attachment.metadata.type,
       fileName: options.cache ? undefined : filename,
       uri: options.cache ? undefined : folder.uri,
-      chunkSize: attachment.chunkSize,
-      appGroupId: IOS_APPGROUPID
+      chunkSize: attachment.chunkSize
     };
 
     let fileUri = await Sodium.decryptFile(

apps/mobile/app/common/filesystem/download.js

@@ -17,25 +17,22 @@ 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 hosts from "@notesnook/core/dist/utils/constants";
+import hosts from "@notesnook/core/utils/constants";
 import NetInfo from "@react-native-community/netinfo";
 import RNFetchBlob from "react-native-blob-util";
 import { ToastEvent } from "../../services/event-manager";
 import { useAttachmentStore } from "../../stores/use-attachment-store";
 import { db } from "../database";
 import { cacheDir, fileCheck } from "./utils";
-import { createCacheDir, exists } from "./io";
 
 export async function downloadFile(filename, data, cancelToken) {
   if (!data) return false;
-
-  await createCacheDir();
-
   let { url, headers } = data;
-  let path = `${cacheDir}/${filename}`;
 
+  let path = `${cacheDir}/${filename}`;
   try {
-    if (await exists(filename)) {
+    let exists = await RNFetchBlob.fs.exists(path);
+    if (exists) {
       return true;
     }
 
@@ -63,55 +60,44 @@ export async function downloadFile(filename, data, cancelToken) {
         console.log("downloading: ", recieved, total);
       });
 
-    cancelToken.cancel = () => {
-      useAttachmentStore.getState().remove(filename);
-      request.cancel();
-    };
+    cancelToken.cancel = request.cancel;
     let response = await request;
     await fileCheck(response, totalSize);
     let status = response.info().status;
     useAttachmentStore.getState().remove(filename);
     return status >= 200 && status < 300;
   } catch (e) {
-    if (e.message !== "canceled") {
-      ToastEvent.show({
-        heading: "Error downloading file",
-        message: e.message,
-        type: "error",
-        context: "global"
-      });
-      ToastEvent.show({
-        heading: "Error downloading file",
-        message: e.message,
-        type: "error",
-        context: "local"
-      });
-    }
+    ToastEvent.show({
+      heading: "Error downloading file",
+      message: e.message,
+      type: "error",
+      context: "global"
+    });
+    ToastEvent.show({
+      heading: "Error downloading file",
+      message: e.message,
+      type: "error",
+      context: "local"
+    });
 
     useAttachmentStore.getState().remove(filename);
     RNFetchBlob.fs.unlink(path).catch(console.log);
-    console.log("Download file error:", e, url, headers);
+    console.log("download file error: ", e, url, headers);
     return false;
   }
 }
 
 export async function getUploadedFileSize(hash) {
-  try {
-    const url = `${hosts.API_HOST}/s3?name=${hash}`;
-    const token = await db.user.tokenManager.getAccessToken();
+  const url = `${hosts.API_HOST}/s3?name=${hash}`;
+  const token = await db.user.tokenManager.getAccessToken();
 
-    const attachmentInfo = await fetch(url, {
-      method: "HEAD",
-      headers: { Authorization: `Bearer ${token}` }
-    });
+  const attachmentInfo = await fetch(url, {
+    method: "HEAD",
+    headers: { Authorization: `Bearer ${token}` }
+  });
 
-    const contentLength = parseInt(
-      attachmentInfo.headers?.get("content-length")
-    );
-    return isNaN(contentLength) ? 0 : contentLength;
-  } catch (e) {
-    return 0;
-  }
+  const contentLength = parseInt(attachmentInfo.headers?.get("content-length"));
+  return isNaN(contentLength) ? 0 : contentLength;
 }
 
 export async function checkAttachment(hash) {

apps/mobile/app/common/filesystem/io.js

@@ -20,28 +20,31 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import { Platform } from "react-native";
 import Sodium from "@ammarahmed/react-native-sodium";
 import RNFetchBlob from "react-native-blob-util";
-import { cacheDir, cacheDirOld, getRandomId } from "./utils";
+import { cacheDir, getRandomId } from "./utils";
 import { db } from "../database";
 import { compressToBase64 } from "./compress";
 import { IOS_APPGROUPID } from "../../utils/constants";
 
 export async function readEncrypted(filename, key, cipherData) {
-  await migrateFilesFromCache();
-  console.log("Read encrypted file...");
   let path = `${cacheDir}/${filename}`;
-
   try {
-    if (!(await exists(filename))) {
+    const iosAppGroup =
+      Platform.OS === "ios"
+        ? await RNFetchBlob.fs.pathForAppGroup(IOS_APPGROUPID)
+        : null;
+
+    const appGroupPath = `${iosAppGroup}/${filename}`;
+    let exists =
+      (await RNFetchBlob.fs.exists(path)) ||
+      (Platform.OS === "ios" && (await RNFetchBlob.fs.exists(appGroupPath)));
+
+    if (!exists) {
       return false;
     }
 
     const attachment = db.attachments.attachment(filename);
-    const isPng = !attachment.metadata.type
-      ? false
-      : /(png)/g.test(attachment?.metadata.type);
-    const isJpeg = !attachment.metadata.type
-      ? false
-      : /(jpeg|jpg)/g.test(attachment?.metadata.type);
+    const isPng = /(png)/g.test(attachment?.metadata.type);
+    const isJpeg = /(jpeg|jpg)/g.test(attachment?.metadata.type);
 
     let output = await Sodium.decryptFile(
       key,
@@ -56,7 +59,6 @@ export async function readEncrypted(filename, key, cipherData) {
           : "base64"
         : "text"
     );
-    console.log("file decrypted...");
     if (cipherData.outputType === "base64" && (isPng || isJpeg)) {
       const dCachePath = `${cacheDir}/${output}`;
       output = await compressToBase64(
@@ -68,7 +70,7 @@ export async function readEncrypted(filename, key, cipherData) {
     return output;
   } catch (e) {
     RNFetchBlob.fs.unlink(path).catch(console.log);
-    console.log("readEncrypted", e);
+    console.log(e);
     return false;
   }
 }
@@ -86,7 +88,6 @@ export async function hashBase64(data) {
 }
 
 export async function writeEncryptedBase64({ data, key }) {
-  await createCacheDir();
   let filepath = cacheDir + `/${getRandomId("imagecache_")}`;
   await RNFetchBlob.fs.writeFile(filepath, data, "base64");
   let output = await Sodium.encryptFile(key, {
@@ -102,7 +103,6 @@ export async function writeEncryptedBase64({ data, key }) {
 }
 
 export async function deleteFile(filename, data) {
-  await createCacheDir();
   let delFilePath = cacheDir + `/${filename}`;
   if (!data) {
     if (!filename) return;
@@ -128,89 +128,19 @@ export async function deleteFile(filename, data) {
 export async function clearFileStorage() {
   try {
     let files = await RNFetchBlob.fs.ls(cacheDir);
-    let oldCache = await RNFetchBlob.fs.ls(cacheDirOld);
-
     for (let file of files) {
-      await RNFetchBlob.fs.unlink(cacheDir + `/${file}`).catch(console.log);
-    }
-    for (let file of oldCache) {
-      await RNFetchBlob.fs.unlink(cacheDirOld + `/${file}`).catch(console.log);
+      try {
+        await RNFetchBlob.fs.unlink(cacheDir + `/${file}`);
+      } catch (e) {
+        console.log(e);
+      }
     }
   } catch (e) {
-    console.log("clearFileStorage", e);
+    console.log(e);
   }
 }
 
-export async function createCacheDir() {
-  if (!(await RNFetchBlob.fs.exists(cacheDir))) {
-    await RNFetchBlob.fs.mkdir(cacheDir);
-    console.log("Cache directory created");
-  }
-}
-
-export async function migrateFilesFromCache() {
-  try {
-    await createCacheDir();
-    const migratedFilesPath = cacheDir + "/.migrated_1";
-    const migrated = await RNFetchBlob.fs.exists(migratedFilesPath);
-    if (migrated) {
-      console.log("Files migrated already");
-      return;
-    }
-
-    let files = await RNFetchBlob.fs.ls(cacheDir);
-    console.log("Files to migrate:", files.join(","));
-
-    let oldCache = await RNFetchBlob.fs.ls(cacheDirOld);
-    for (let file of oldCache) {
-      if (file.startsWith("org.") || file.startsWith("com.")) continue;
-      RNFetchBlob.fs
-        .mv(cacheDirOld + `/${file}`, cacheDir + `/${file}`)
-        .catch(console.log);
-      console.log("Moved", file);
-    }
-    await RNFetchBlob.fs.createFile(migratedFilesPath, "1", "utf8");
-  } catch (e) {
-    console.log("migrateFilesFromCache", e);
-  }
-}
-
-const ABYTES = 17;
 export async function exists(filename) {
-  let path = `${cacheDir}/${filename}`;
-
-  const iosAppGroup =
-    Platform.OS === "ios"
-      ? await RNFetchBlob.fs.pathForAppGroup(IOS_APPGROUPID)
-      : null;
-  const appGroupPath = `${iosAppGroup}/${filename}`;
-
-  let exists = await RNFetchBlob.fs.exists(path);
-
-  // Check if file is present in app group path.
-  let existsInAppGroup = false;
-  if (!exists && Platform.OS === "ios") {
-    existsInAppGroup = await RNFetchBlob.fs.exists(appGroupPath);
-  }
-
-  if (exists || existsInAppGroup) {
-    const attachment = db.attachments.attachment(filename);
-    const totalChunks = Math.ceil(attachment.length / attachment.chunkSize);
-    const totalAbytes = totalChunks * ABYTES;
-    const expectedFileSize = attachment.length + totalAbytes;
-
-    const stat = await RNFetchBlob.fs.stat(
-      existsInAppGroup ? appGroupPath : path
-    );
-
-    if (stat.size !== expectedFileSize) {
-      RNFetchBlob.fs
-        .unlink(existsInAppGroup ? appGroupPath : path)
-        .catch(console.log);
-      return false;
-    }
-
-    exists = true;
-  }
+  let exists = await RNFetchBlob.fs.exists(`${cacheDir}/${filename}`);
   return exists;
 }

apps/mobile/app/common/filesystem/upload.js

@@ -21,15 +21,14 @@ import RNFetchBlob from "react-native-blob-util";
 import { useAttachmentStore } from "../../stores/use-attachment-store";
 import { DatabaseLogger, db } from "../database";
 import { cacheDir } from "./utils";
-import { isImage, isDocument } from "@notesnook/core/dist/utils/filename";
+import { isImage, isDocument } from "@notesnook/core/utils/filename";
 import { Platform } from "react-native";
 import { IOS_APPGROUPID } from "../../utils/constants";
-import { createCacheDir } from "./io";
 
 export async function uploadFile(filename, data, cancelToken) {
   if (!data) return false;
   let { url, headers } = data;
-  await createCacheDir();
+
   DatabaseLogger.info(`Preparing to upload file: ${filename}`);
 
   try {
@@ -52,7 +51,6 @@ export async function uploadFile(filename, data, cancelToken) {
       uploadFilePath = appGroupPath;
     }
     DatabaseLogger.info(`Starting upload: ${filename}`);
-
     let request = RNFetchBlob.config({
       IOSBackgroundTask: !globalThis["IS_SHARE_EXTENSION"]
     })
@@ -68,15 +66,9 @@ export async function uploadFile(filename, data, cancelToken) {
         useAttachmentStore
           .getState()
           .setProgress(sent, total, filename, 0, "upload");
-        DatabaseLogger.info(
-          `File upload progress: ${filename}, ${sent}/${total}`
-        );
+        DatabaseLogger.info(`uploading file: ${sent}/${total}`);
       });
-
-    cancelToken.cancel = () => {
-      useAttachmentStore.getState().remove(filename);
-      request.cancel();
-    };
+    cancelToken.cancel = request.cancel;
     let response = await request;
 
     let status = response.info().status;
@@ -98,9 +90,7 @@ export async function uploadFile(filename, data, cancelToken) {
     } else {
       const fileInfo = await RNFetchBlob.fs.stat(uploadFilePath);
       throw new Error(
-        `${status}, ${text}, name: ${fileInfo.filename}, length: ${
-          fileInfo.size
-        }, info: ${JSON.stringify(response.info())}`
+        `${status}, ${text}, name: ${fileInfo.filename}, length: ${fileInfo}`
       );
     }
 

apps/mobile/app/common/filesystem/utils.js

@@ -21,12 +21,7 @@ import * as ScopedStorage from "react-native-scoped-storage";
 import { Platform } from "react-native";
 import RNFetchBlob from "react-native-blob-util";
 
-export const cacheDirOld = RNFetchBlob.fs.dirs.CacheDir;
-
-export const cacheDir =
-  Platform.OS == "ios"
-    ? RNFetchBlob.fs.dirs.LibraryDir + "/.cache"
-    : RNFetchBlob.fs.dirs.DocumentDir + "/.cache";
+export const cacheDir = RNFetchBlob.fs.dirs.CacheDir;
 
 export function getRandomId(prefix) {
   return Math.random()
@@ -71,12 +66,9 @@ export function cancelable(operation) {
 }
 
 export function copyFileAsync(source, dest) {
-  return new Promise((resolve, reject) => {
+  return new Promise((resolve) => {
     ScopedStorage.copyFile(source, dest, (e, r) => {
-      if (e) {
-        reject(e);
-        return;
-      }
+      console.log(e, r);
       resolve();
     });
   });

apps/mobile/app/components/announcements/announcement.js

@@ -21,18 +21,18 @@ import React from "react";
 import { FlatList, View } from "react-native";
 import { useSelectionStore } from "../../stores/use-selection-store";
 import { useMessageStore } from "../../stores/use-message-store";
-import { useThemeColors } from "@notesnook/theme";
+import { useThemeStore } from "../../stores/use-theme-store";
 import { allowedOnPlatform, renderItem } from "./functions";
 
 export const Announcement = ({ color }) => {
-  const { colors } = useThemeColors();
+  const colors = useThemeStore((state) => state.colors);
   const announcements = useMessageStore((state) => state.announcements);
   let announcement = announcements.length > 0 ? announcements[0] : null;
   const selectionMode = useSelectionStore((state) => state.selectionMode);
   return !announcement || selectionMode ? null : (
     <View
       style={{
-        backgroundColor: colors.primary.background,
+        backgroundColor: colors.bg,
         width: "100%",
         paddingHorizontal: 12,
         paddingTop: 12,
@@ -44,26 +44,28 @@ export const Announcement = ({ color }) => {
           width: "100%",
           borderRadius: 10,
           overflow: "hidden",
-          backgroundColor: colors.secondary.background,
+          backgroundColor: colors.nav,
           paddingBottom: 12
         }}
       >
-        <View
-          style={{
-            width: "100%",
-            marginTop: 12
-          }}
-        >
-          {announcement?.body
-            .filter((item) => allowedOnPlatform(item.platforms))
-            .map((item, index) =>
+        <View>
+          <FlatList
+            style={{
+              width: "100%",
+              marginTop: 12
+            }}
+            data={announcement?.body.filter((item) =>
+              allowedOnPlatform(item.platforms)
+            )}
+            renderItem={({ item, index }) =>
               renderItem({
                 item: item,
                 index: index,
                 color: colors[color],
                 inline: true
               })
-            )}
+            }
+          />
         </View>
       </View>
     </View>

apps/mobile/app/components/announcements/cta.js

@@ -22,7 +22,7 @@ import { Linking, View } from "react-native";
 //import SettingsBackupAndRestore from '../../screens/settings/backup-restore';
 import { eSendEvent, presentSheet } from "../../services/event-manager";
 import Sync from "../../services/sync";
-import { useThemeColors } from "@notesnook/theme";
+import { useThemeStore } from "../../stores/use-theme-store";
 import { eCloseAnnouncementDialog, eCloseSheet } from "../../utils/events";
 import { SIZE } from "../../utils/size";
 import { sleep } from "../../utils/time";
@@ -33,7 +33,7 @@ import { Button } from "../ui/button";
 import { allowedOnPlatform, getStyle } from "./functions";
 
 export const Cta = ({ actions, style = {}, color, inline }) => {
-  const { colors } = useThemeColors();
+  const colors = useThemeStore((state) => state.colors);
   let buttons =
     actions.filter((item) => allowedOnPlatform(item.platforms)) || [];
 
@@ -92,7 +92,8 @@ export const Cta = ({ actions, style = {}, color, inline }) => {
                 style={{
                   height: 30,
                   alignSelf: "flex-start",
-                  paddingHorizontal: 0
+                  paddingHorizontal: 0,
+                  marginTop: -6
                 }}
               />
             ))}
@@ -110,6 +111,7 @@ export const Cta = ({ actions, style = {}, color, inline }) => {
                 style={{
                   alignSelf: "flex-start",
                   paddingHorizontal: 0,
+                  marginTop: -6,
                   marginLeft: 12
                 }}
                 textStyle={{
@@ -127,11 +129,9 @@ export const Cta = ({ actions, style = {}, color, inline }) => {
                 title={item.title}
                 fontSize={SIZE.md}
                 buttonType={{
-                  color: color ? color : colors.primary.accent,
-                  text: color
-                    ? colors.static.white
-                    : colors.primary.accentForeground,
-                  selected: color ? color : colors.primary.accent,
+                  color: color ? color : colors.accent,
+                  text: colors.light,
+                  selected: color ? color : colors.accent,
                   opacity: 1
                 }}
                 onPress={() => onPress(item)}

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

@@ -25,7 +25,7 @@ import {
   eUnSubscribeEvent
 } from "../../services/event-manager";
 import { useMessageStore } from "../../stores/use-message-store";
-import { useThemeColors } from "@notesnook/theme";
+import { useThemeStore } from "../../stores/use-theme-store";
 import {
   eCloseAnnouncementDialog,
   eOpenAnnouncementDialog
@@ -34,69 +34,10 @@ import BaseDialog from "../dialog/base-dialog";
 import { allowedOnPlatform, renderItem } from "./functions";
 import { useCallback } from "react";
 
-/**
- * Test announcement
- * {
-    id: "some-announcement",
-    type: "dialog",
-    body: [
-      {
-        type: "title",
-        text: "This is a title",
-        platforms: ["all"]
-      },
-      {
-        type: "description",
-        text: "Most of you are too busy to keep up to date with what's happening in Notesnook. That is unfortunate because Notesnook has come a looooong way.",
-        style: {
-          marginBottom: 1
-        },
-        platforms: ["all"]
-      },
-      {
-        type: "description",
-        text: "To solve this, we are launching the Notesnook Digest — a newsletter to help you stay updated about Notesnook development. And to keep things interesting I'll also sprinkle this newsletter with other interesting stuff like privacy tips & news, interesting books, things I am looking forward to etc.",
-        style: {
-          marginBottom: 1
-        },
-        platforms: ["all"]
-      },
-      {
-        type: "description",
-        text: "So be sure to subscribe. There won't be a proper schedule to this (yet) maybe once or twice a month. I promise no spam — only more awesomeness.",
-        style: {
-          marginBottom: 1
-        },
-        platforms: ["all"]
-      },
-      {
-        type: "description",
-        text: "— May privacy reign.",
-        style: {
-          marginBottom: 1
-        },
-        platforms: ["all"]
-      },
-      {
-        type: "callToActions",
-        actions: [
-          {
-            type: "promo",
-            title: "15% Off",
-            platforms: ["android"],
-            data: "com.streetwriters.notesnook.sub.yr.15"
-          }
-        ],
-        platforms: ["all"]
-      }
-    ]
-  }
- */
-
 export const AnnouncementDialog = () => {
-  const { colors } = useThemeColors();
+  const colors = useThemeStore((state) => state.colors);
   const [visible, setVisible] = useState(false);
-  const [info, setInfo] = useState();
+  const [info, setInfo] = useState(null);
   const remove = useMessageStore((state) => state.remove);
 
   useEffect(() => {
@@ -110,9 +51,7 @@ export const AnnouncementDialog = () => {
 
   const open = (data) => {
     setInfo(data);
-    setImmediate(() => {
-      setVisible(true);
-    });
+    setVisible(true);
   };
 
   const close = useCallback(() => {
@@ -134,7 +73,7 @@ export const AnnouncementDialog = () => {
       <View
         style={{
           width: DDS.isTab ? 600 : "100%",
-          backgroundColor: colors.primary.background,
+          backgroundColor: colors.bg,
           maxHeight: DDS.isTab ? "90%" : "100%",
           borderRadius: DDS.isTab ? 10 : 0,
           overflow: "hidden",

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

@@ -24,7 +24,7 @@ import { db } from "../../common/database";
 import { useAppState } from "../../hooks/use-app-state";
 import BiometricService from "../../services/biometrics";
 import { useSettingStore } from "../../stores/use-setting-store";
-import { useThemeColors } from "@notesnook/theme";
+import { useThemeStore } from "../../stores/use-theme-store";
 import { useUserStore } from "../../stores/use-user-store";
 import { NotesnookModule } from "../../utils/notesnook-module";
 import { SIZE } from "../../utils/size";
@@ -36,7 +36,7 @@ import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 
 const AppLockedOverlay = () => {
-  const { colors } = useThemeColors();
+  const colors = useThemeStore((state) => state.colors);
   const user = useUserStore((state) => state.user);
   const appLocked = useUserStore((state) => state.appLocked);
   const lockApp = useUserStore((state) => state.lockApp);
@@ -100,7 +100,7 @@ const AppLockedOverlay = () => {
     appLocked && (
       <View
         style={{
-          backgroundColor: colors.primary.background,
+          backgroundColor: colors.bg,
           width: "100%",
           height: "100%",
           position: "absolute",
@@ -134,10 +134,10 @@ const AppLockedOverlay = () => {
               marginTop: user ? 0 : 50
             }}
             onPress={onUnlockAppRequested}
-            color={colors.primary.border}
+            color={colors.border}
           />
           <Heading
-            color={colors.primary.heading}
+            color={colors.heading}
             style={{
               alignSelf: "center",
               textAlign: "center"
@@ -160,7 +160,7 @@ const AppLockedOverlay = () => {
             style={{
               width: "100%",
               padding: 12,
-              backgroundColor: colors.primary.background
+              backgroundColor: colors.bg
             }}
           >
             {user ? (

apps/mobile/app/components/attachments/actions.js

@@ -33,7 +33,7 @@ import {
 } from "../../services/event-manager";
 import PremiumService from "../../services/premium";
 import { useAttachmentStore } from "../../stores/use-attachment-store";
-import { useThemeColors } from "@notesnook/theme";
+import { useThemeStore } from "../../stores/use-theme-store";
 import { eCloseAttachmentDialog, eCloseSheet } from "../../utils/events";
 import { SIZE } from "../../utils/size";
 import { sleep } from "../../utils/time";
@@ -48,8 +48,8 @@ import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 import { formatBytes } from "@notesnook/common";
 
-const Actions = ({ attachment, setAttachments, fwdRef, close }) => {
-  const { colors } = useThemeColors();
+const Actions = ({ attachment, setAttachments, fwdRef }) => {
+  const colors = useThemeStore((state) => state.colors);
   const contextId = attachment.metadata.hash;
   const [filename, setFilename] = useState(attachment.metadata.filename);
   const [currentProgress] = useAttachmentProgress(attachment);
@@ -64,7 +64,7 @@ const Actions = ({ attachment, setAttachments, fwdRef, close }) => {
       name: "Download",
       onPress: async () => {
         if (currentProgress) {
-          await db.fs.cancel(attachment.metadata.hash);
+          await db.fs.cancel(attachment.metadata.hash, "download");
           useAttachmentStore.getState().remove(attachment.metadata.hash);
         }
         downloadAttachment(attachment.metadata.hash, false);
@@ -117,7 +117,7 @@ const Actions = ({ attachment, setAttachments, fwdRef, close }) => {
           });
         }
 
-        setAttachments();
+        setAttachments([...db.attachments.all]);
         setLoading({
           name: null
         });
@@ -140,7 +140,7 @@ const Actions = ({ attachment, setAttachments, fwdRef, close }) => {
                 filename: value
               });
               setFilename(value);
-              setAttachments();
+              setAttachments([...db.attachments.all]);
             }
           },
           positiveText: "Rename"
@@ -152,8 +152,8 @@ const Actions = ({ attachment, setAttachments, fwdRef, close }) => {
       name: "Delete",
       onPress: async () => {
         await db.attachments.remove(attachment.metadata.hash, false);
-        setAttachments();
-        close();
+        setAttachments([...db.attachments.all]);
+        eSendEvent(eCloseSheet, contextId);
       },
       icon: "delete-outline"
     }
@@ -194,7 +194,7 @@ const Actions = ({ attachment, setAttachments, fwdRef, close }) => {
       <View
         style={{
           borderBottomWidth: 1,
-          borderBottomColor: colors.secondary.background,
+          borderBottomColor: colors.nav,
           marginBottom: notes && notes.length > 0 ? 0 : 12
         }}
       >
@@ -219,7 +219,7 @@ const Actions = ({ attachment, setAttachments, fwdRef, close }) => {
             style={{
               marginRight: 10
             }}
-            color={colors.secondary.paragraph}
+            color={colors.icon}
           >
             {attachment.metadata.type}
           </Paragraph>
@@ -228,7 +228,7 @@ const Actions = ({ attachment, setAttachments, fwdRef, close }) => {
               marginRight: 10
             }}
             size={SIZE.xs}
-            color={colors.secondary.paragraph}
+            color={colors.icon}
           >
             {formatBytes(attachment.length)}
           </Paragraph>
@@ -239,7 +239,7 @@ const Actions = ({ attachment, setAttachments, fwdRef, close }) => {
                 marginRight: 10
               }}
               size={SIZE.xs}
-              color={colors.secondary.paragraph}
+              color={colors.icon}
             >
               {attachment.noteIds.length} note
               {attachment.noteIds.length > 1 ? "s" : ""}
@@ -255,7 +255,7 @@ const Actions = ({ attachment, setAttachments, fwdRef, close }) => {
               });
             }}
             size={SIZE.xs}
-            color={colors.secondary.paragraph}
+            color={colors.icon}
           >
             {attachment.metadata.hash}
           </Paragraph>
@@ -268,7 +268,7 @@ const Actions = ({ attachment, setAttachments, fwdRef, close }) => {
         <View
           style={{
             borderBottomWidth: 1,
-            borderBottomColor: colors.secondary.background,
+            borderBottomColor: colors.nav,
             marginBottom: 12,
             paddingVertical: 12
           }}
@@ -322,10 +322,10 @@ const Actions = ({ attachment, setAttachments, fwdRef, close }) => {
           key={item.name}
           buttonType={{
             text: item.on
-              ? colors.primary.accent
+              ? colors.accent
               : item.name === "Delete" || item.name === "PermDelete"
-              ? colors.error.paragraph
-              : colors.primary.paragraph
+              ? colors.errorText
+              : colors.pri
           }}
           onPress={item.onPress}
           title={item.name}
@@ -362,13 +362,8 @@ const Actions = ({ attachment, setAttachments, fwdRef, close }) => {
 Actions.present = (attachment, set, context) => {
   presentSheet({
     context: context,
-    component: (ref, close) => (
-      <Actions
-        fwdRef={ref}
-        setAttachments={set}
-        close={close}
-        attachment={attachment}
-      />
+    component: (ref) => (
+      <Actions fwdRef={ref} setAttachments={set} attachment={attachment} />
     )
   });
 };

apps/mobile/app/components/attachments/attachment-item.js

@@ -17,14 +17,15 @@ 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 { formatBytes } from "@notesnook/common";
 import React from "react";
 import { TouchableOpacity, View } from "react-native";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { db } from "../../common/database";
 import { useAttachmentProgress } from "../../hooks/use-attachment-progress";
-import { useThemeColors } from "@notesnook/theme";
+import { useThemeStore } from "../../stores/use-theme-store";
+import { formatBytes } from "@notesnook/common";
 import { SIZE } from "../../utils/size";
+import SheetProvider from "../sheet-provider";
 import { IconButton } from "../ui/icon-button";
 import { ProgressCircleComponent } from "../ui/svg/lazy";
 import Paragraph from "../ui/typography/paragraph";
@@ -40,17 +41,17 @@ export const AttachmentItem = ({
   encryption,
   setAttachments,
   pressable = true,
-  hideWhenNotDownloading,
-  context
+  hideWhenNotDownloading
 }) => {
-  const { colors } = useThemeColors();
+  const colors = useThemeStore((state) => state.colors);
   const [currentProgress, setCurrentProgress] = useAttachmentProgress(
     attachment,
     encryption
   );
+
   const onPress = () => {
     if (!pressable) return;
-    Actions.present(attachment, setAttachments, context);
+    Actions.present(attachment, setAttachments, attachment.metadata.hash);
   };
 
   return hideWhenNotDownloading &&
@@ -65,10 +66,11 @@ export const AttachmentItem = ({
         padding: 12,
         paddingVertical: 6,
         borderRadius: 5,
-        backgroundColor: colors.secondary.background
+        backgroundColor: colors.nav
       }}
       type="grayBg"
     >
+      <SheetProvider context={attachment.metadata.hash} />
       <View
         style={{
           flexShrink: 1,
@@ -83,12 +85,12 @@ export const AttachmentItem = ({
             marginLeft: -5
           }}
         >
-          <Icon name="file" size={SIZE.xxxl} color={colors.primary.icon} />
+          <Icon name="file" size={SIZE.xxxl} color={colors.icon} />
 
           <Paragraph
             adjustsFontSizeToFit
             size={6}
-            color={colors.static.white}
+            color={colors.light}
             style={{
               position: "absolute"
             }}
@@ -111,13 +113,13 @@ export const AttachmentItem = ({
             }}
             numberOfLines={1}
             lineBreakMode="middle"
-            color={colors.primary.paragraph}
+            color={colors.pri}
           >
             {attachment.metadata.filename}
           </Paragraph>
 
           {!hideWhenNotDownloading ? (
-            <Paragraph color={colors.secondary.paragraph} size={SIZE.xs}>
+            <Paragraph color={colors.icon} size={SIZE.xs}>
               {formatBytes(attachment.length)}{" "}
               {currentProgress?.type
                 ? "(" + currentProgress.type + "ing - tap to cancel)"
@@ -149,7 +151,7 @@ export const AttachmentItem = ({
             textStyle={{
               fontSize: 10
             }}
-            color={colors.primary.accent}
+            color={colors.accent}
             formatText={(progress) => (progress * 100).toFixed(0)}
             borderWidth={0}
             thickness={2}
@@ -161,7 +163,7 @@ export const AttachmentItem = ({
             <IconButton
               onPress={onPress}
               name="alert-circle-outline"
-              color={colors.error.paragraph}
+              color={colors.errorText}
             />
           ) : null}
         </>

apps/mobile/app/components/attachments/download-attachments.js

@@ -26,12 +26,12 @@ import { Button } from "../ui/button";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 import { ProgressBarComponent } from "../ui/svg/lazy";
-import { useThemeColors } from "@notesnook/theme";
+import { useThemeStore } from "../../stores/use-theme-store";
 import { FlatList } from "react-native-actions-sheet";
 import { AttachmentItem } from "./attachment-item";
 
 const DownloadAttachments = ({ close, attachments, isNote, update }) => {
-  const { colors } = useThemeColors();
+  const colors = useThemeStore((state) => state.colors);
   const [downloading, setDownloading] = useState(false);
   const [progress, setProgress] = useState({
     value: 0,
@@ -158,8 +158,8 @@ const DownloadAttachments = ({ close, attachments, isNote, update }) => {
             animated={true}
             useNativeDriver
             progress={progress.value ? progress.value / attachments.length : 0}
-            unfilledColor={colors.secondary.background}
-            color={colors.primary.accent}
+            unfilledColor={colors.nav}
+            color={colors.accent}
             borderWidth={0}
           />
         </View>
@@ -170,7 +170,7 @@ const DownloadAttachments = ({ close, attachments, isNote, update }) => {
           maxHeight: 300,
           width: "100%",
           minHeight: 60,
-          backgroundColor: colors.secondary.background,
+          backgroundColor: colors.nav,
           borderRadius: 5,
           marginVertical: 12
         }}
@@ -184,9 +184,7 @@ const DownloadAttachments = ({ close, attachments, isNote, update }) => {
               height: 60
             }}
           >
-            <Paragraph color={colors.secondary.paragraph}>
-              No downloads in progress.
-            </Paragraph>
+            <Paragraph color={colors.icon}>No downloads in progress.</Paragraph>
           </View>
         }
         keyExtractor={(item) => item.id}

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

@@ -24,7 +24,7 @@ import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { db } from "../../common/database";
 import filesystem from "../../common/filesystem";
 import { presentSheet } from "../../services/event-manager";
-import { useThemeColors } from "@notesnook/theme";
+import { useThemeStore } from "../../stores/use-theme-store";
 import { SIZE } from "../../utils/size";
 import SheetProvider from "../sheet-provider";
 import { IconButton } from "../ui/icon-button";
@@ -40,16 +40,16 @@ import {
   isDocument,
   isImage,
   isVideo
-} from "@notesnook/core/dist/utils/filename";
+} from "@notesnook/core/utils/filename";
 import { useSettingStore } from "../../stores/use-setting-store";
 import { FlashList } from "react-native-actions-sheet/dist/src/views/FlashList";
 
 export const AttachmentDialog = ({ note }) => {
-  const { colors } = useThemeColors();
+  const colors = useThemeStore((state) => state.colors);
   const { height } = useSettingStore((state) => state.dimensions);
   const [attachments, setAttachments] = useState(
     note
-      ? db.attachments.ofNote(note?.id, "all")
+      ? db.attachments.ofNote(note.id, "all")
       : [...(db.attachments.all || [])]
   );
 
@@ -59,8 +59,8 @@ export const AttachmentDialog = ({ note }) => {
   const [currentFilter, setCurrentFilter] = useState("all");
 
   const onChangeText = (text) => {
-    const attachments = note?.id
-      ? db.attachments.ofNote(note?.id, "all")
+    const attachments = note
+      ? db.attachments.ofNote(note.id, "all")
       : [...(db.attachments.all || [])];
 
     attachmentSearchValue.current = text;
@@ -68,7 +68,7 @@ export const AttachmentDialog = ({ note }) => {
       !attachmentSearchValue.current ||
       attachmentSearchValue.current === ""
     ) {
-      setAttachments(filterAttachments(currentFilter));
+      setAttachments([...attachments]);
     }
     clearTimeout(searchTimer.current);
     searchTimer.current = setTimeout(() => {
@@ -77,19 +77,12 @@ export const AttachmentDialog = ({ note }) => {
         attachmentSearchValue.current
       );
       if (results.length === 0) return;
-
-      setAttachments(filterAttachments(currentFilter, results));
+      setAttachments(results);
     }, 300);
   };
 
   const renderItem = ({ item }) => (
-    <AttachmentItem
-      setAttachments={() => {
-        setAttachments(filterAttachments(currentFilter));
-      }}
-      attachment={item}
-      context="attachments-list"
-    />
+    <AttachmentItem setAttachments={setAttachments} attachment={item} />
   );
 
   const onCheck = async () => {
@@ -136,13 +129,11 @@ export const AttachmentDialog = ({ note }) => {
     }
   ];
 
-  const filterAttachments = (type, _attachments) => {
-    const attachments = _attachments
-      ? _attachments
-      : note
-      ? db.attachments.ofNote(note?.id, "all")
+  const filterAttachments = (type) => {
+    const attachments = note
+      ? db.attachments.ofNote(note.id, "all")
       : [...(db.attachments.all || [])];
-
+    isDocument;
     switch (type) {
       case "all":
         return attachments;
@@ -206,7 +197,7 @@ export const AttachmentDialog = ({ note }) => {
                 width: 40,
                 marginRight: 10
               }}
-              color={colors.primary.paragraph}
+              color={colors.pri}
               size={SIZE.lg}
               onPress={onCheck}
             />
@@ -218,7 +209,7 @@ export const AttachmentDialog = ({ note }) => {
               height: 40,
               width: 40
             }}
-            color={colors.primary.paragraph}
+            color={colors.pri}
             onPress={() => {
               DownloadAttachments.present(
                 "attachments-list",
@@ -246,7 +237,7 @@ export const AttachmentDialog = ({ note }) => {
             width: "100%",
             height: 50,
             flexDirection: "row",
-            backgroundColor: colors.primary.background
+            backgroundColor: colors.bg
           }}
           contentContainerStyle={{
             minWidth: "100%",
@@ -269,7 +260,7 @@ export const AttachmentDialog = ({ note }) => {
                 borderBottomColor:
                   currentFilter !== item.filterBy
                     ? "transparent"
-                    : colors.primary.accent
+                    : colors.accent
               }}
               onPress={() => {
                 setCurrentFilter(item.filterBy);
@@ -290,7 +281,7 @@ export const AttachmentDialog = ({ note }) => {
               alignItems: "center"
             }}
           >
-            <Icon name="attachment" size={60} color={colors.secondary.icon} />
+            <Icon name="attachment" size={60} color={colors.icon} />
             <Paragraph>
               {note ? "No attachments on this note" : "No attachments"}
             </Paragraph>
@@ -309,18 +300,14 @@ export const AttachmentDialog = ({ note }) => {
       />
 
       <Paragraph
-        color={colors.secondary.paragraph}
+        color={colors.icon}
         size={SIZE.xs}
         style={{
           textAlign: "center",
           marginTop: 10
         }}
       >
-        <Icon
-          name="shield-key-outline"
-          size={SIZE.xs}
-          color={colors.primary.icon}
-        />
+        <Icon name="shield-key-outline" size={SIZE.xs} color={colors.icon} />
         {"  "}All attachments are end-to-end encrypted.
       </Paragraph>
     </View>

apps/mobile/app/components/auth/auth-modal.js

@@ -17,16 +17,14 @@ 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, useRef, useState } from "react";
 import { Platform, View } from "react-native";
-import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
 import useGlobalSafeAreaInsets from "../../hooks/use-global-safe-area-insets";
 import {
   eSubscribeEvent,
   eUnSubscribeEvent
 } from "../../services/event-manager";
-import { useUserStore } from "../../stores/use-user-store";
+import { useThemeStore } from "../../stores/use-theme-store";
 import { eCloseLoginDialog, eOpenLoginDialog } from "../../utils/events";
 import { sleep } from "../../utils/time";
 import BaseDialog from "../dialog/base-dialog";
@@ -36,6 +34,7 @@ import { IconButton } from "../ui/icon-button";
 import { hideAuth, initialAuthMode } from "./common";
 import { Login } from "./login";
 import { Signup } from "./signup";
+import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
 
 export const AuthMode = {
   login: 0,
@@ -45,7 +44,7 @@ export const AuthMode = {
 };
 
 const AuthModal = () => {
-  const { colors } = useThemeColors();
+  const colors = useThemeStore((state) => state.colors);
   const [visible, setVisible] = useState(false);
   const [currentAuthMode, setCurrentAuthMode] = useState(AuthMode.login);
   const actionSheetRef = useRef();
@@ -69,9 +68,6 @@ const AuthModal = () => {
   }
 
   const close = () => {
-    useUserStore.setState({
-      disableAppLockRequests: false
-    });
     actionSheetRef.current?.hide();
     setCurrentAuthMode(AuthMode.login);
     setVisible(false);
@@ -81,27 +77,19 @@ const AuthModal = () => {
     <BaseDialog
       overlayOpacity={0}
       statusBarTranslucent={false}
-      onShow={() => {
-        useUserStore.setState({
-          disableAppLockRequests: true
-        });
-      }}
       onRequestClose={currentAuthMode !== AuthMode.welcomeSignup && close}
       visible={true}
       onClose={close}
       useSafeArea={false}
       bounce={false}
-      background={colors.primary.background}
+      background={colors.bg}
       transparent={false}
       animated={false}
-      centered={false}
-      enableSheetKeyboardHandler
     >
       <KeyboardAwareScrollView
         style={{
           width: "100%"
         }}
-        enableAutomaticScroll={false}
         keyboardShouldPersistTaps="handled"
       >
         {currentAuthMode !== AuthMode.login ? (
@@ -124,7 +112,7 @@ const AuthModal = () => {
           paddingTop: Platform.OS === "android" ? 0 : insets.top,
           top: 0,
           zIndex: 999,
-          backgroundColor: colors.secondary.background,
+          backgroundColor: colors.nav,
           width: "100%"
         }}
       >
@@ -147,7 +135,7 @@ const AuthModal = () => {
               onPress={() => {
                 hideAuth();
               }}
-              color={colors.primary.paragraph}
+              color={colors.pri}
             />
           )}
 

apps/mobile/app/components/auth/forgot-password.js

@@ -24,7 +24,7 @@ import { db } from "../../common/database";
 import { DDS } from "../../services/device-detection";
 import { ToastEvent } from "../../services/event-manager";
 import SettingsService from "../../services/settings";
-import { useThemeColors } from "@notesnook/theme";
+import { useThemeStore } from "../../stores/use-theme-store";
 import DialogHeader from "../dialog/dialog-header";
 import { Button } from "../ui/button";
 import { IconButton } from "../ui/icon-button";
@@ -34,7 +34,7 @@ import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 
 export const ForgotPassword = () => {
-  const { colors } = useThemeColors("sheet");
+  const colors = useThemeStore((state) => state.colors);
   const email = useRef();
   const emailInputRef = useRef();
   const [error, setError] = useState(false);
@@ -117,7 +117,7 @@ export const ForgotPassword = () => {
                 width: null,
                 height: null
               }}
-              color={colors.primary.accent}
+              color={colors.accent}
               name="email"
               size={50}
             />
@@ -134,7 +134,7 @@ export const ForgotPassword = () => {
           <View
             style={{
               borderRadius: DDS.isTab ? 5 : 0,
-              backgroundColor: colors.primary.background,
+              backgroundColor: colors.bg,
               zIndex: 10,
               width: "100%",
               padding: 12

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

@@ -65,7 +65,7 @@ const Auth = ({ navigation, route }) => {
           onPress={() => {
             hideAuth();
           }}
-          color={colors.primary.paragraph}
+          color={colors.pri}
           customStyle={{
             position: 'absolute',
             zIndex: 999,

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

@@ -22,7 +22,7 @@ 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 { useThemeStore } from "../../stores/use-theme-store";
 import { SIZE } from "../../utils/size";
 import { sleep } from "../../utils/time";
 import SheetProvider from "../sheet-provider";
@@ -46,7 +46,7 @@ const LoginSteps = {
 };
 
 export const Login = ({ changeMode }) => {
-  const { colors } = useThemeColors();
+  const colors = useThemeStore((state) => state.colors);
   const [focused, setFocused] = useState(false);
   const {
     step,
@@ -92,7 +92,7 @@ export const Login = ({ changeMode }) => {
       <View
         style={{
           borderRadius: DDS.isTab ? 5 : 0,
-          backgroundColor: colors.primary.background,
+          backgroundColor: colors.bg,
           zIndex: 10,
           width: "100%",
           alignSelf: "center"
@@ -102,13 +102,13 @@ export const Login = ({ changeMode }) => {
           style={{
             justifyContent: "flex-end",
             paddingHorizontal: 20,
-            backgroundColor: colors.secondary.background,
+            backgroundColor: colors.nav,
             borderBottomWidth: 1,
             marginBottom: 12,
-            borderBottomColor: colors.primary.border,
+            borderBottomColor: colors.border,
             alignSelf: deviceMode !== "mobile" ? "center" : undefined,
             borderWidth: deviceMode !== "mobile" ? 1 : null,
-            borderColor: deviceMode !== "mobile" ? colors.primary.border : null,
+            borderColor: deviceMode !== "mobile" ? colors.border : null,
             borderRadius: deviceMode !== "mobile" ? 20 : null,
             marginTop: deviceMode !== "mobile" ? 50 : null,
             width: deviceMode === "mobile" ? null : "50%",
@@ -124,7 +124,7 @@ export const Login = ({ changeMode }) => {
               style={{
                 width: 100,
                 height: 5,
-                backgroundColor: colors.primary.accent,
+                backgroundColor: colors.accent,
                 borderRadius: 2,
                 marginRight: 7
               }}
@@ -134,7 +134,7 @@ export const Login = ({ changeMode }) => {
               style={{
                 width: 20,
                 height: 5,
-                backgroundColor: colors.secondary.background,
+                backgroundColor: colors.nav,
                 borderRadius: 2
               }}
             />
@@ -160,7 +160,7 @@ export const Login = ({ changeMode }) => {
               : focused
               ? "100%"
               : "99.9%",
-            backgroundColor: colors.primary.background,
+            backgroundColor: colors.bg,
             alignSelf: "center",
             paddingHorizontal: 20
           }}
@@ -281,14 +281,11 @@ export const Login = ({ changeMode }) => {
                   paddingVertical: 12
                 }}
               >
-                <Paragraph
-                  size={SIZE.xs + 1}
-                  color={colors.secondary.paragraph}
-                >
+                <Paragraph size={SIZE.xs + 1} color={colors.icon}>
                   Don't have an account?{" "}
                   <Paragraph
                     size={SIZE.xs + 1}
-                    style={{ color: colors.primary.accent }}
+                    style={{ color: colors.accent }}
                   >
                     Sign up
                   </Paragraph>

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

@@ -17,22 +17,18 @@ 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 { Modal, View } from "react-native";
 import { db } from "../../common/database";
-import { MMKV } from "../../common/database/mmkv";
 import BiometricService from "../../services/biometrics";
 import {
   ToastEvent,
   eSendEvent,
   eSubscribeEvent
 } from "../../services/event-manager";
-import { setLoginMessage } from "../../services/message";
 import SettingsService from "../../services/settings";
 import Sync from "../../services/sync";
-import { clearAllStores } from "../../stores";
-import { useUserStore } from "../../stores/use-user-store";
+import { useThemeStore } from "../../stores/use-theme-store";
 import { eLoginSessionExpired, eUserLoggedIn } from "../../utils/events";
 import { SIZE } from "../../utils/size";
 import { sleep } from "../../utils/time";
@@ -46,7 +42,6 @@ import Input from "../ui/input";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 import { LoginSteps, useLogin } from "./use-login";
-import BaseDialog from "../dialog/base-dialog";
 
 function getObfuscatedEmail(email) {
   if (!email) return "";
@@ -61,7 +56,7 @@ function getObfuscatedEmail(email) {
 }
 
 export const SessionExpired = () => {
-  const { colors } = useThemeColors();
+  const colors = useThemeStore((state) => state.colors);
   const [visible, setVisible] = useState(false);
   const [focused, setFocused] = useState(false);
   const { step, password, email, passwordInputRef, loading, login } = useLogin(
@@ -69,20 +64,16 @@ export const SessionExpired = () => {
       eSendEvent(eUserLoggedIn, true);
       setVisible(false);
       setFocused(false);
-    },
-    true
+    }
   );
 
   const logout = async () => {
     try {
       await db.user.logout();
       await BiometricService.resetCredentials();
-      setLoginMessage();
-      SettingsService.resetSettings();
-      useUserStore.getState().setUser(null);
-      useUserStore.getState().setSyncing(false);
-      MMKV.clearStore();
-      clearAllStores();
+      SettingsService.set({
+        introCompleted: true
+      });
       setVisible(false);
     } catch (e) {
       ToastEvent.show({
@@ -132,27 +123,22 @@ export const SessionExpired = () => {
 
   return (
     visible && (
-      <BaseDialog
-        transparent={false}
-        background={colors.primary.background}
-        bounce={false}
-        animated={false}
-        centered={false}
+      <Modal
         onShow={async () => {
           await sleep(300);
           passwordInputRef.current?.focus();
           setFocused(true);
         }}
-        enableSheetKeyboardHandler={true}
         visible={true}
       >
+        <SheetProvider context="two_factor_verify" />
         <View
           style={{
             width: focused ? "100%" : "99.9%",
             padding: 12,
             justifyContent: "center",
             flex: 1,
-            backgroundColor: colors.primary.background
+            backgroundColor: colors.bg
           }}
         >
           <View
@@ -171,10 +157,10 @@ export const SessionExpired = () => {
                 height: 60
               }}
               name="alert"
-              color={colors.error.icon}
+              color={colors.errorText}
               size={50}
             />
-            <Heading size={SIZE.xxxl} color={colors.primary.heading}>
+            <Heading size={SIZE.xxxl} color={colors.heading}>
               Session expired
             </Heading>
             <Paragraph
@@ -238,9 +224,7 @@ export const SessionExpired = () => {
         </View>
         <Toast context="local" />
         <Dialog context="session_expiry" />
-
-        <SheetProvider context="two_factor_verify" />
-      </BaseDialog>
+      </Modal>
     )
   );
 };

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

@@ -24,7 +24,7 @@ import { DDS } from "../../services/device-detection";
 import { ToastEvent } from "../../services/event-manager";
 import { clearMessage, setEmailVerifyMessage } from "../../services/message";
 import PremiumService from "../../services/premium";
-import { useThemeColors } from "@notesnook/theme";
+import { useThemeStore } from "../../stores/use-theme-store";
 import { useUserStore } from "../../stores/use-user-store";
 import { openLinkInBrowser } from "../../utils/functions";
 import { SIZE } from "../../utils/size";
@@ -37,7 +37,7 @@ import { hideAuth } from "./common";
 import { useSettingStore } from "../../stores/use-setting-store";
 
 export const Signup = ({ changeMode, trial }) => {
-  const { colors } = useThemeColors();
+  const colors = useThemeStore((state) => state.colors);
   const email = useRef();
   const emailInputRef = useRef();
   const passwordInputRef = useRef();
@@ -67,7 +67,6 @@ export const Signup = ({ changeMode, trial }) => {
 
   const signup = async () => {
     if (!validateInfo() || error) return;
-    if (loading) return;
     setLoading(true);
     try {
       await db.user.signup(email.current.toLowerCase(), password.current);
@@ -99,7 +98,7 @@ export const Signup = ({ changeMode, trial }) => {
       <View
         style={{
           borderRadius: DDS.isTab ? 5 : 0,
-          backgroundColor: colors.primary.background,
+          backgroundColor: colors.bg,
           zIndex: 10,
           width: "100%",
           alignSelf: "center"
@@ -109,13 +108,13 @@ export const Signup = ({ changeMode, trial }) => {
           style={{
             justifyContent: "flex-end",
             paddingHorizontal: 20,
-            backgroundColor: colors.secondary.background,
+            backgroundColor: colors.nav,
             marginBottom: 20,
             borderBottomWidth: 1,
-            borderBottomColor: colors.primary.border,
+            borderBottomColor: colors.border,
             alignSelf: deviceMode !== "mobile" ? "center" : undefined,
             borderWidth: deviceMode !== "mobile" ? 1 : null,
-            borderColor: deviceMode !== "mobile" ? colors.primary.border : null,
+            borderColor: deviceMode !== "mobile" ? colors.border : null,
             borderRadius: deviceMode !== "mobile" ? 20 : null,
             marginTop: deviceMode !== "mobile" ? 50 : null,
             width: deviceMode === "mobile" ? null : "50%",
@@ -131,7 +130,7 @@ export const Signup = ({ changeMode, trial }) => {
               style={{
                 width: 100,
                 height: 5,
-                backgroundColor: colors.primary.accent,
+                backgroundColor: colors.accent,
                 borderRadius: 2,
                 marginRight: 7
               }}
@@ -141,7 +140,7 @@ export const Signup = ({ changeMode, trial }) => {
               style={{
                 width: 20,
                 height: 5,
-                backgroundColor: colors.secondary.background,
+                backgroundColor: colors.nav,
                 borderRadius: 2
               }}
             />
@@ -162,7 +161,7 @@ export const Signup = ({ changeMode, trial }) => {
           style={{
             width: DDS.isTab ? "50%" : "100%",
             paddingHorizontal: 20,
-            backgroundColor: colors.primary.background,
+            backgroundColor: colors.bg,
             alignSelf: "center"
           }}
         >
@@ -231,7 +230,7 @@ export const Signup = ({ changeMode, trial }) => {
               marginBottom: 25
             }}
             size={SIZE.xs}
-            color={colors.secondary.paragraph}
+            color={colors.icon}
           >
             By signing up, you agree to our{" "}
             <Paragraph
@@ -242,7 +241,7 @@ export const Signup = ({ changeMode, trial }) => {
               style={{
                 textDecorationLine: "underline"
               }}
-              color={colors.primary.accent}
+              color={colors.accent}
             >
               Terms of Service{" "}
             </Paragraph>
@@ -255,7 +254,7 @@ export const Signup = ({ changeMode, trial }) => {
               style={{
                 textDecorationLine: "underline"
               }}
-              color={colors.primary.accent}
+              color={colors.accent}
             >
               Privacy Policy.
             </Paragraph>{" "}
@@ -288,12 +287,9 @@ export const Signup = ({ changeMode, trial }) => {
               paddingVertical: 12
             }}
           >
-            <Paragraph size={SIZE.xs + 1} color={colors.secondary.paragraph}>
+            <Paragraph size={SIZE.xs + 1} color={colors.icon}>
               Already have an account?{" "}
-              <Paragraph
-                size={SIZE.xs + 1}
-                style={{ color: colors.primary.accent }}
-              >
+              <Paragraph size={SIZE.xs + 1} style={{ color: colors.accent }}>
                 Login
               </Paragraph>
             </Paragraph>

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

@@ -26,7 +26,7 @@ import {
   presentSheet,
   ToastEvent
 } from "../../services/event-manager";
-import { useThemeColors } from "@notesnook/theme";
+import { useThemeStore } from "../../stores/use-theme-store";
 import { eCloseSheet } from "../../utils/events";
 import { SIZE } from "../../utils/size";
 import { Button } from "../ui/button";
@@ -39,7 +39,7 @@ import Paragraph from "../ui/typography/paragraph";
 import { useCallback } from "react";
 
 const TwoFactorVerification = ({ onMfaLogin, mfaInfo }) => {
-  const { colors } = useThemeColors();
+  const colors = useThemeStore((state) => state.colors);
   const code = useRef();
   const [currentMethod, setCurrentMethod] = useState({
     method: mfaInfo?.primaryMethod,
@@ -157,7 +157,7 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo }) => {
           }}
           size={50}
           name="key"
-          color={colors.primary.accent}
+          color={colors.accent}
         />
         <Heading
           style={{
@@ -214,7 +214,6 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo }) => {
                 code.current = value;
                 //onNext();
               }}
-              caretHidden
               inputStyle={{
                 fontSize: SIZE.lg,
                 height: 60,
@@ -282,7 +281,7 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo }) => {
                     marginRight: 10
                   }}
                   size={15}
-                  color={colors.primary.accent}
+                  color={colors.accent}
                   name={item.icon}
                 />
                 <View

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

@@ -33,7 +33,7 @@ export const LoginSteps = {
   passwordAuth: 3
 };
 
-export const useLogin = (onFinishLogin, sessionExpired = false) => {
+export const useLogin = (onFinishLogin) => {
   const [error, setError] = useState(false);
   const [loading, setLoading] = useState(false);
   const setUser = useUserStore((state) => state.setUser);
@@ -64,12 +64,10 @@ export const useLogin = (onFinishLogin, sessionExpired = false) => {
   const login = async () => {
     if (!validateInfo() || error) return;
     try {
-      if (loading) return;
       setLoading(true);
       switch (step) {
         case LoginSteps.emailAuth: {
           const mfaInfo = await db.user.authenticateEmail(email.current);
-          console.log("email auth", mfaInfo);
           if (mfaInfo) {
             TwoFactorVerification.present(async (mfa, callback) => {
               try {
@@ -102,12 +100,7 @@ export const useLogin = (onFinishLogin, sessionExpired = false) => {
           break;
         }
         case LoginSteps.passwordAuth: {
-          await db.user.authenticatePassword(
-            email.current,
-            password.current,
-            null,
-            sessionExpired
-          );
+          await db.user.authenticatePassword(email.current, password.current);
           finishLogin();
           break;
         }

apps/mobile/app/components/container/container-header.js

@@ -17,24 +17,24 @@ 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, { PropsWithChildren } from "react";
+import React from "react";
 import { View } from "react-native";
 import { useSelectionStore } from "../../stores/use-selection-store";
-import { useThemeColors } from "@notesnook/theme";
+import { useThemeStore } from "../../stores/use-theme-store";
 
-export const ContainerHeader = (props: PropsWithChildren) => {
-  const { colors } = useThemeColors();
+export const ContainerHeader = ({ children }) => {
+  const colors = useThemeStore((state) => state.colors);
   const selectionMode = useSelectionStore((state) => state.selectionMode);
 
   return !selectionMode ? (
     <View
       style={{
-        backgroundColor: colors.primary.background,
+        backgroundColor: colors.bg,
         width: "100%",
         overflow: "hidden"
       }}
     >
-      {props.children}
+      {children}
     </View>
   ) : null;
 };

apps/mobile/app/components/container/floating-button.js

@@ -17,9 +17,8 @@ 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, { useCallback, useEffect } from "react";
-import { Keyboard, View } from "react-native";
+import { Keyboard, Platform, View } from "react-native";
 import Animated, {
   Easing,
   useAnimatedStyle,
@@ -36,20 +35,12 @@ import { SIZE, normalize } from "../../utils/size";
 import NativeTooltip from "../../utils/tooltip";
 import { PressableButton } from "../ui/pressable";
 
-interface FloatingButton {
-  title?: string;
-  onPress: () => void;
-  color?: string;
-  alwaysVisible?: boolean;
-}
-
-const FloatingButton = ({
+export const FloatingButton = ({
   title,
   onPress,
-  color,
-  alwaysVisible = false
-}: FloatingButton) => {
-  const { colors } = useThemeColors();
+  color = "accent",
+  shouldShow = false
+}) => {
   const deviceMode = useSettingStore((state) => state.deviceMode);
   const selectionMode = useSelectionStore((state) => state.selectionMode);
   const translate = useSharedValue(0);
@@ -67,8 +58,12 @@ const FloatingButton = ({
     };
   });
 
+  useEffect(() => {
+    animate(selectionMode ? 150 : 0);
+  }, [animate, selectionMode]);
+
   const animate = useCallback(
-    (toValue: number) => {
+    (toValue) => {
       translate.value = withTiming(toValue, {
         duration: 250,
         easing: Easing.elastic(1)
@@ -77,39 +72,39 @@ const FloatingButton = ({
     [translate]
   );
 
-  useEffect(() => {
-    animate(selectionMode ? 150 : 0);
-  }, [animate, selectionMode]);
+  const onKeyboardHide = useCallback(async () => {
+    editorState().keyboardState = false;
+    if (deviceMode !== "mobile") return;
+    animate(0);
+  }, [animate, deviceMode]);
+
+  const onKeyboardShow = useCallback(async () => {
+    editorState().keyboardState = true;
+    if (deviceMode !== "mobile") return;
+    animate(150);
+  }, [animate, deviceMode]);
 
   useEffect(() => {
-    const onKeyboardHide = () => {
-      editorState().keyboardState = false;
-      if (deviceMode !== "mobile") return;
-      animate(0);
-    };
-
-    const onKeyboardShow = () => {
-      editorState().keyboardState = true;
-      if (deviceMode !== "mobile") return;
-      animate(150);
-    };
-
-    const sub = [
-      Keyboard.addListener("keyboardDidShow", onKeyboardShow),
-      Keyboard.addListener("keyboardDidHide", onKeyboardHide)
-    ];
+    let sub1 = Keyboard.addListener("keyboardDidShow", onKeyboardShow);
+    let sub2 = Keyboard.addListener("keyboardDidHide", onKeyboardHide);
     return () => {
-      sub.forEach((sub) => sub?.remove?.());
+      sub1?.remove();
+      sub2?.remove();
     };
-  }, [deviceMode, animate]);
+  }, [deviceMode, onKeyboardHide, onKeyboardShow]);
+  const paddings = {
+    ios: 20,
+    android: 20,
+    iPad: 20
+  };
 
-  return deviceMode !== "mobile" && !alwaysVisible ? null : (
+  return deviceMode !== "mobile" && !shouldShow ? null : (
     <Animated.View
       style={[
         {
           position: "absolute",
           right: 12,
-          bottom: 20,
+          bottom: paddings[Platform.isPad ? "iPad" : Platform.OS],
           zIndex: 10
         },
         animatedStyle
@@ -118,15 +113,14 @@ const FloatingButton = ({
       <PressableButton
         testID={notesnook.buttons.add}
         type="accent"
-        accentColor={colors.static[color as keyof typeof colors.static]}
+        accentColor={color || "accent"}
+        accentText="light"
         customStyle={{
           ...getElevationStyle(5),
           borderRadius: 100
         }}
         onLongPress={(event) => {
-          if (title) {
-            NativeTooltip.show(event, title, NativeTooltip.POSITIONS.LEFT);
-          }
+          NativeTooltip.show(event, title, NativeTooltip.POSITIONS.LEFT);
         }}
         onPress={onPress}
       >
@@ -140,7 +134,7 @@ const FloatingButton = ({
         >
           <Icon
             name={title === "Clear all trash" ? "delete" : "plus"}
-            color={colors.primary.accentForeground}
+            color="white"
             size={SIZE.xxl}
           />
         </View>
@@ -148,5 +142,3 @@ const FloatingButton = ({
     </Animated.View>
   );
 };
-
-export { FloatingButton };

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

@@ -17,40 +17,44 @@ 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, { PropsWithChildren } from "react";
-import { KeyboardAvoidingView, Platform } from "react-native";
+import React from "react";
+import { KeyboardAvoidingView, Platform, View } from "react-native";
 import useGlobalSafeAreaInsets from "../../hooks/use-global-safe-area-insets";
 import useIsFloatingKeyboard from "../../hooks/use-is-floating-keyboard";
 import { useSettingStore } from "../../stores/use-setting-store";
 import { Header } from "../header";
 import SelectionHeader from "../selection-header";
-
-export const Container = ({ children }: PropsWithChildren) => {
+export const Container = ({ children }) => {
   const floating = useIsFloatingKeyboard();
   const introCompleted = useSettingStore(
     (state) => state.settings.introCompleted
   );
   const insets = useGlobalSafeAreaInsets();
-
   return (
     <KeyboardAvoidingView
       behavior="padding"
       enabled={Platform.OS === "ios" && !floating}
       style={{
-        flex: 1,
-        overflow: "hidden",
-        paddingTop: Platform.OS === "android" ? 0 : insets.top,
-        paddingBottom: Platform.OS === "android" ? 0 : insets.bottom
+        flex: 1
       }}
     >
-      {!introCompleted ? null : (
-        <>
-          <SelectionHeader />
-          <Header />
-        </>
-      )}
+      <View
+        style={{
+          flex: 1,
+          overflow: "hidden",
+          paddingTop: Platform.OS === "android" ? 0 : insets.top,
+          paddingBottom: Platform.OS === "android" ? 0 : insets.bottom
+        }}
+      >
+        {!introCompleted ? null : (
+          <>
+            <SelectionHeader />
+            <Header title="Header" screen="Header" />
+          </>
+        )}
 
-      {children}
+        {children}
+      </View>
     </KeyboardAvoidingView>
   );
 };

apps/mobile/app/components/delay-layout/default-placeholder.tsx

@@ -20,21 +20,21 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import React from "react";
 import { View } from "react-native";
 import { useMessageStore } from "../../stores/use-message-store";
-import { useThemeColors } from "@notesnook/theme";
-import { ColorValues } from "../../utils/colors";
-import { hexToRGBA } from "../../utils/colors";
+import { useThemeStore } from "../../stores/use-theme-store";
+import { COLORS_NOTE } from "../../utils/color-scheme";
+import { hexToRGBA } from "../../utils/color-scheme/utils";
 
 export const DefaultPlaceholder = ({ color }: { color: string }) => {
-  const { colors } = useThemeColors();
+  const colors = useThemeStore((state) => state.colors);
   const message = useMessageStore((state) => state.message);
   const annoucements = useMessageStore((state) => state.announcements);
   const hasAnnoucements = annoucements.length > 0;
   const shadeColor = color
     ? hexToRGBA(
-        ColorValues[color?.toLowerCase() as keyof typeof ColorValues],
+        COLORS_NOTE[color?.toLowerCase() as keyof typeof COLORS_NOTE],
         0.15
       )
-    : colors.primary.shade;
+    : colors.shade;
 
   return (
     <View
@@ -50,7 +50,7 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
             height: 100,
             borderRadius: 10,
             marginBottom: 20,
-            backgroundColor: colors.secondary.background,
+            backgroundColor: colors.nav,
             padding: 12
           }}
         >
@@ -58,7 +58,7 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
             style={{
               width: 150,
               height: 20,
-              backgroundColor: colors.primary.hover,
+              backgroundColor: colors.transGray,
               borderRadius: 5,
               marginBottom: 10
             }}
@@ -67,7 +67,7 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
             style={{
               width: 250,
               height: 14,
-              backgroundColor: colors.primary.hover,
+              backgroundColor: colors.transGray,
               borderRadius: 5
             }}
           />
@@ -110,7 +110,7 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
               style={{
                 width: 150,
                 height: 12,
-                backgroundColor: colors.secondary.background,
+                backgroundColor: colors.nav,
                 borderRadius: 5,
                 marginBottom: 10
               }}
@@ -119,7 +119,7 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
               style={{
                 width: 250,
                 height: 16,
-                backgroundColor: colors.secondary.background,
+                backgroundColor: colors.nav,
                 borderRadius: 5
               }}
             />
@@ -131,7 +131,7 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
         style={{
           width: "100%",
           height: 30,
-          backgroundColor: colors.secondary.background,
+          backgroundColor: colors.nav,
           borderRadius: 10,
           marginBottom: 20,
           padding: 5,
@@ -158,7 +158,7 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
             style={{
               width: 15,
               height: 15,
-              backgroundColor: colors.primary.hover,
+              backgroundColor: colors.transGray,
               borderRadius: 100,
               marginRight: 10
             }}
@@ -167,7 +167,7 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
             style={{
               width: 60,
               height: 15,
-              backgroundColor: colors.primary.hover,
+              backgroundColor: colors.transGray,
               borderRadius: 3
             }}
           />
@@ -178,7 +178,7 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
         style={{
           width: 200,
           height: 16,
-          backgroundColor: colors.secondary.background,
+          backgroundColor: colors.nav,
           borderRadius: 5
         }}
       />
@@ -186,7 +186,7 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
         style={{
           width: "85%",
           height: 13,
-          backgroundColor: colors.secondary.background,
+          backgroundColor: colors.nav,
           borderRadius: 5,
           marginTop: 10
         }}
@@ -202,7 +202,7 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
           style={{
             width: 50,
             height: 10,
-            backgroundColor: colors.secondary.background,
+            backgroundColor: colors.nav,
             borderRadius: 5
           }}
         />
@@ -210,7 +210,7 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
           style={{
             width: 60,
             height: 10,
-            backgroundColor: colors.secondary.background,
+            backgroundColor: colors.nav,
             borderRadius: 5,
             marginLeft: 10
           }}

apps/mobile/app/components/delay-layout/index.tsx

@@ -21,7 +21,7 @@ import React from "react";
 import { ViewProps } from "react-native";
 import Animated, { FadeOutUp } from "react-native-reanimated";
 import { useDelayLayout } from "../../hooks/use-delay-layout";
-import { useThemeColors } from "@notesnook/theme";
+import { useThemeStore } from "../../stores/use-theme-store";
 import { DefaultPlaceholder } from "./default-placeholder";
 import { SettingsPlaceholder } from "./settings-placeholder";
 
@@ -42,7 +42,7 @@ export default function DelayLayout({
   animated = true,
   ...props
 }: IDelayLayoutProps) {
-  const { colors } = useThemeColors();
+  const colors = useThemeStore((state) => state.colors);
   const loading = useDelayLayout(
     !props.delay || props.delay < 300 ? 300 : props.delay
   );
@@ -52,12 +52,12 @@ export default function DelayLayout({
     <Animated.View
       exiting={animated ? FadeOutUp : undefined}
       style={{
-        backgroundColor: colors.primary.background,
+        backgroundColor: colors.bg,
         flex: 1,
         paddingTop: 20
       }}
     >
-      <Placeholder color={props.color || colors.primary.accent} />
+      <Placeholder color={props.color || colors.accent} />
     </Animated.View>
   ) : (
     <>{props.children}</>

apps/mobile/app/components/delay-layout/settings-placeholder.tsx

@@ -19,10 +19,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
 import { View } from "react-native";
-import { useThemeColors } from "@notesnook/theme";
+import { useThemeStore } from "../../stores/use-theme-store";
 
 export const SettingsPlaceholder = () => {
-  const { colors } = useThemeColors();
+  const colors = useThemeStore((state) => state.colors);
 
   return (
     <View>
@@ -30,7 +30,7 @@ export const SettingsPlaceholder = () => {
         style={{
           width: 100,
           height: 12,
-          backgroundColor: colors.primary.shade,
+          backgroundColor: colors.shade,
           borderRadius: 5,
           marginLeft: 12,
           marginBottom: 12
@@ -51,7 +51,7 @@ export const SettingsPlaceholder = () => {
           style={{
             width: 40,
             height: 40,
-            backgroundColor: colors.primary.hover,
+            backgroundColor: colors.transGray,
             borderRadius: 100,
             marginRight: 20
           }}
@@ -61,7 +61,7 @@ export const SettingsPlaceholder = () => {
             style={{
               width: 150,
               height: 12,
-              backgroundColor: colors.secondary.background,
+              backgroundColor: colors.nav,
               borderRadius: 5,
               marginBottom: 10
             }}
@@ -70,7 +70,7 @@ export const SettingsPlaceholder = () => {
             style={{
               width: 250,
               height: 16,
-              backgroundColor: colors.secondary.background,
+              backgroundColor: colors.nav,
               borderRadius: 5
             }}
           />
@@ -93,7 +93,7 @@ export const SettingsPlaceholder = () => {
           style={{
             width: 40,
             height: 40,
-            backgroundColor: colors.primary.shade,
+            backgroundColor: colors.shade,
             borderRadius: 100,
             marginRight: 20
           }}
@@ -103,7 +103,7 @@ export const SettingsPlaceholder = () => {
             style={{
               width: 150,
               height: 12,
-              backgroundColor: colors.secondary.background,
+              backgroundColor: colors.nav,
               borderRadius: 5,
               marginBottom: 10
             }}
@@ -112,7 +112,7 @@ export const SettingsPlaceholder = () => {
             style={{
               width: 250,
               height: 16,
-              backgroundColor: colors.secondary.background,
+              backgroundColor: colors.nav,
               borderRadius: 5
             }}
           />
@@ -122,7 +122,7 @@ export const SettingsPlaceholder = () => {
           style={{
             width: 40,
             height: 20,
-            backgroundColor: colors.secondary.background,
+            backgroundColor: colors.nav,
             borderRadius: 100,
             marginLeft: 15,
             alignItems: "flex-end",
@@ -134,7 +134,7 @@ export const SettingsPlaceholder = () => {
             style={{
               width: 15,
               height: 15,
-              backgroundColor: colors.primary.shade,
+              backgroundColor: colors.shade,
               borderRadius: 100,
               marginLeft: 15
             }}

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

@@ -19,7 +19,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
 import { useNoteStore } from "../../stores/use-notes-store";
-import { useThemeColors } from "@notesnook/theme";
+import { useThemeStore } from "../../stores/use-theme-store";
 import { AnnouncementDialog } from "../announcements";
 import AuthModal from "../auth/auth-modal";
 import { SessionExpired } from "../auth/session-expired";
@@ -39,7 +39,7 @@ import RestoreDataSheet from "../sheets/restore-data";
 import PDFPreview from "../dialogs/pdf-preview";
 
 const DialogProvider = () => {
-  const { colors } = useThemeColors();
+  const colors = useThemeStore((state) => state.colors);
   const loading = useNoteStore((state) => state.loading);
 
   return (

apps/mobile/app/components/dialog/base-dialog.js

@@ -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 React, { useEffect, useRef, useState } from "react";
+import React, { useEffect } from "react";
 import {
   KeyboardAvoidingView,
   Modal,
@@ -30,10 +30,6 @@ import {
 import useIsFloatingKeyboard from "../../hooks/use-is-floating-keyboard";
 import { useSettingStore } from "../../stores/use-setting-store";
 import { BouncingView } from "../ui/transitions/bouncing-view";
-import { ScopedThemeProvider } from "@notesnook/theme";
-import SettingsService from "../../services/settings";
-import { useUserStore } from "../../stores/use-user-store";
-import { useAppState } from "../../hooks/use-app-state";
 
 const BaseDialog = ({
   visible,
@@ -51,13 +47,9 @@ const BaseDialog = ({
   bounce = true,
   closeOnTouch = true,
   useSafeArea = true,
-  avoidKeyboardResize = false,
-  enableSheetKeyboardHandler = false
+  avoidKeyboardResize = false
 }) => {
   const floating = useIsFloatingKeyboard();
-  const appState = useAppState();
-  const lockEvents = useRef(false);
-  const [internalVisible, setIntervalVisible] = useState(true);
 
   useEffect(() => {
     return () => {
@@ -65,99 +57,72 @@ const BaseDialog = ({
     };
   }, []);
 
-  useEffect(() => {
-    if (useUserStore.getState().disableAppLockRequests) return;
-    if (SettingsService.get().appLockMode === "background") {
-      if (appState === "background") {
-        setIntervalVisible(false);
-        if (useUserStore.getState().appLocked) {
-          lockEvents.current = true;
-          const unsub = useUserStore.subscribe((state) => {
-            if (!state.appLocked) {
-              setIntervalVisible(true);
-              unsub();
-              setTimeout(() => {
-                lockEvents.current = false;
-              });
-            }
-          });
-        }
-      }
-    }
-  }, [appState]);
-
   const Wrapper = useSafeArea ? SafeAreaView : View;
 
   return (
-    <ScopedThemeProvider value="dialog">
-      <Modal
-        visible={visible && internalVisible}
-        transparent={true}
-        statusBarTranslucent={statusBarTranslucent}
-        supportedOrientations={[
-          "portrait",
-          "portrait-upside-down",
-          "landscape",
-          "landscape-left",
-          "landscape-right"
-        ]}
-        onShow={() => {
-          if (lockEvents.current) return;
-          if (onShow) {
-            onShow();
-            if (!enableSheetKeyboardHandler) {
-              useSettingStore.getState().setSheetKeyboardHandler(false);
-            }
-          }
-        }}
-        animationType={animation}
-        onRequestClose={() => {
-          if (lockEvents.current) return;
-          if (!closeOnTouch) return null;
-          useSettingStore.getState().setSheetKeyboardHandler(true);
-          onRequestClose && onRequestClose();
+    <Modal
+      visible={visible}
+      transparent={true}
+      animated
+      statusBarTranslucent={statusBarTranslucent}
+      supportedOrientations={[
+        "portrait",
+        "portrait-upside-down",
+        "landscape",
+        "landscape-left",
+        "landscape-right"
+      ]}
+      onShow={() => {
+        if (onShow) {
+          onShow();
+          useSettingStore.getState().setSheetKeyboardHandler(false);
+        }
+      }}
+      animationType={animation}
+      onRequestClose={() => {
+        if (!closeOnTouch) return null;
+        useSettingStore.getState().setSheetKeyboardHandler(true);
+        onRequestClose && onRequestClose();
+      }}
+    >
+      <Wrapper
+        style={{
+          backgroundColor: background
+            ? background
+            : transparent
+            ? "transparent"
+            : "rgba(0,0,0,0.3)"
         }}
       >
-        <Wrapper
-          style={{
-            backgroundColor: background
-              ? background
-              : transparent
-              ? "transparent"
-              : "rgba(0,0,0,0.3)"
-          }}
+        <KeyboardAvoidingView
+          enabled={!floating && Platform.OS === "ios" && !avoidKeyboardResize}
+          behavior="padding"
         >
-          <KeyboardAvoidingView
-            enabled={!floating && Platform.OS === "ios" && !avoidKeyboardResize}
-            behavior="padding"
+          <BouncingView
+            duration={400}
+            animated={animated}
+            initialScale={bounce ? 0.9 : 1}
+            style={[
+              styles.backdrop,
+              {
+                justifyContent: centered
+                  ? "center"
+                  : bottom
+                  ? "flex-end"
+                  : "flex-start"
+              }
+            ]}
           >
-            <BouncingView
-              duration={400}
-              animated={animated}
-              initialScale={bounce ? 0.9 : 1}
-              style={[
-                styles.backdrop,
-                {
-                  alignItems: centered ? "center" : undefined,
-                  justifyContent: centered
-                    ? "center"
-                    : bottom
-                    ? "flex-end"
-                    : "flex-start"
-                }
-              ]}
-            >
-              <TouchableOpacity
-                onPress={closeOnTouch ? onRequestClose : null}
-                style={styles.overlayButton}
-              />
-              {premium}
-              {children}
-            </BouncingView>
-          </KeyboardAvoidingView>
-        </Wrapper>
-      </Modal>
-    </ScopedThemeProvider>
+            <TouchableOpacity
+              onPress={closeOnTouch ? onRequestClose : null}
+              style={styles.overlayButton}
+            />
+            {premium}
+            {children}
+          </BouncingView>
+        </KeyboardAvoidingView>
+      </Wrapper>
+    </Modal>
   );
 };
 
@@ -165,7 +130,8 @@ const styles = StyleSheet.create({
   backdrop: {
     width: "100%",
     height: "100%",
-    justifyContent: "center"
+    justifyContent: "center",
+    alignItems: "center"
   },
   overlayButton: {
     width: "100%",

apps/mobile/app/components/dialog/dialog-buttons.js

@@ -21,7 +21,7 @@ import React from "react";
 import { ActivityIndicator, StyleSheet, View } from "react-native";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { notesnook } from "../../../e2e/test.ids";
-import { useThemeColors } from "@notesnook/theme";
+import { useThemeStore } from "../../stores/use-theme-store";
 import { SIZE } from "../../utils/size";
 import { Button } from "../ui/button";
 import Paragraph from "../ui/typography/paragraph";
@@ -35,14 +35,14 @@ const DialogButtons = ({
   doneText,
   positiveType
 }) => {
-  const { colors } = useThemeColors();
+  const colors = useThemeStore((state) => state.colors);
 
   return (
     <View
       style={[
         styles.container,
         {
-          backgroundColor: colors.secondary.background,
+          backgroundColor: colors.nav,
           height: 60,
           borderBottomRightRadius: 10,
           borderBottomLeftRadius: 10,
@@ -51,7 +51,7 @@ const DialogButtons = ({
       ]}
     >
       {loading ? (
-        <ActivityIndicator color={colors.primary.accent} size={SIZE.lg} />
+        <ActivityIndicator color={colors.accent} size={SIZE.lg} />
       ) : doneText ? (
         <View
           style={{
@@ -60,11 +60,11 @@ const DialogButtons = ({
           }}
         >
           <Icon
-            color={colors.primary.accent}
+            color={colors.accent}
             name="check-circle-outline"
             size={SIZE.md}
           />
-          <Paragraph color={colors.primary.accent}>{" " + doneText}</Paragraph>
+          <Paragraph color={colors.accent}>{" " + doneText}</Paragraph>
         </View>
       ) : (
         <View />

apps/mobile/app/components/dialog/dialog-container.js

@@ -20,11 +20,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import React from "react";
 import { View } from "react-native";
 import { DDS } from "../../services/device-detection";
-import { useThemeColors } from "@notesnook/theme";
+import { useThemeStore } from "../../stores/use-theme-store";
 import { getElevationStyle } from "../../utils/elevation";
 
 const DialogContainer = ({ width, height, ...restProps }) => {
-  const { colors } = useThemeColors();
+  const colors = useThemeStore((state) => state.colors);
 
   return (
     <View
@@ -34,7 +34,7 @@ const DialogContainer = ({ width, height, ...restProps }) => {
         width: width || DDS.isTab ? 500 : "85%",
         maxHeight: height || 450,
         borderRadius: 10,
-        backgroundColor: colors.primary.background,
+        backgroundColor: colors.bg,
         paddingTop: 12
       }}
     />

apps/mobile/app/components/dialog/dialog-header.tsx

@@ -19,7 +19,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
 import { Text, View, ViewStyle } from "react-native";
-import { useThemeColors } from "@notesnook/theme";
+import { useThemeStore } from "../../stores/use-theme-store";
 import { SIZE } from "../../utils/size";
 import { Button } from "../ui/button";
 import { PressableButtonProps } from "../ui/pressable";
@@ -54,7 +54,7 @@ const DialogHeader = ({
   titlePart,
   style
 }: DialogHeaderProps) => {
-  const { colors } = useThemeColors();
+  const colors = useThemeStore((state) => state.colors);
 
   return (
     <>
@@ -86,7 +86,7 @@ const DialogHeader = ({
             >
               {title}{" "}
               {titlePart ? (
-                <Text style={{ color: colors.primary.accent }}>{titlePart}</Text>
+                <Text style={{ color: colors.accent }}>{titlePart}</Text>
               ) : null}
             </Heading>
 
@@ -114,7 +114,7 @@ const DialogHeader = ({
                 maxWidth: centered ? "90%" : "100%",
                 alignSelf: centered ? "center" : "flex-start"
               }}
-              color={paragraphColor || colors.secondary.paragraph}
+              color={paragraphColor || colors.icon}
             >
               {paragraph}
             </Paragraph>

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

@@ -24,7 +24,7 @@ import {
   eSubscribeEvent,
   eUnSubscribeEvent
 } from "../../services/event-manager";
-import { useThemeColors } from "@notesnook/theme";
+import { useThemeStore } from "../../stores/use-theme-store";
 import { getElevationStyle } from "../../utils/elevation";
 import { eCloseSimpleDialog, eOpenSimpleDialog } from "../../utils/events";
 import { sleep } from "../../utils/time";
@@ -38,7 +38,7 @@ import { useCallback } from "react";
 import { Button } from "../ui/button";
 
 export const Dialog = ({ context = "global" }) => {
-  const { colors } = useThemeColors();
+  const colors = useThemeStore((state) => state.colors);
   const [visible, setVisible] = useState(false);
   const [inputValue, setInputValue] = useState(null);
   const inputRef = useRef();
@@ -51,7 +51,7 @@ export const Dialog = ({ context = "global" }) => {
     onClose: () => {},
     positiveType: "transparent",
     icon: null,
-    paragraphColor: colors.primary.paragraph,
+    paragraphColor: colors.pri,
     input: false,
     inputPlaceholder: "Enter some text",
     defaultValue: "",
@@ -115,7 +115,7 @@ export const Dialog = ({ context = "global" }) => {
     width: DDS.isTab ? 400 : "85%",
     maxHeight: 450,
     borderRadius: 5,
-    backgroundColor: colors.primary.background,
+    backgroundColor: colors.bg,
     paddingTop: 12
   };
 

apps/mobile/app/components/dialogs/jump-to-section/index.js

@@ -25,7 +25,7 @@ import {
   eUnSubscribeEvent
 } from "../../../services/event-manager";
 import { useMessageStore } from "../../../stores/use-message-store";
-import { useThemeColors } from "@notesnook/theme";
+import { useThemeStore } from "../../../stores/use-theme-store";
 import { getElevationStyle } from "../../../utils/elevation";
 import {
   eCloseJumpToDialog,
@@ -41,10 +41,10 @@ import { useCallback } from "react";
 const offsets = [];
 let timeout = null;
 const JumpToSectionDialog = ({ scrollRef, data, type }) => {
-  const { colors } = useThemeColors();
+  const colors = useThemeStore((state) => state.colors);
   const notes = data;
   const [visible, setVisible] = useState(false);
-  const [currentIndex, setCurrentIndex] = useState(0);
+  const [currentIndex, setCurrentIndex] = useState(null);
 
   const onPress = (item) => {
     let ind = notes.findIndex(
@@ -77,7 +77,7 @@ const JumpToSectionDialog = ({ scrollRef, data, type }) => {
     }
     timeout = setTimeout(() => {
       let index = offsets.findIndex((o, i) => o <= y && offsets[i + 1] > y);
-      setCurrentIndex(index || 0);
+      setCurrentIndex(index);
     }, 200);
   };
 
@@ -113,6 +113,7 @@ const JumpToSectionDialog = ({ scrollRef, data, type }) => {
         offsets.push(offset);
       });
   }, [notes]);
+
   return !visible ? null : (
     <BaseDialog
       onShow={() => {
@@ -125,7 +126,7 @@ const JumpToSectionDialog = ({ scrollRef, data, type }) => {
         style={{
           ...getElevationStyle(5),
           width: DDS.isTab ? 500 : "85%",
-          backgroundColor: colors.primary.background,
+          backgroundColor: colors.bg,
           zIndex: 100,
           bottom: 20,
           maxHeight: "65%",
@@ -156,7 +157,7 @@ const JumpToSectionDialog = ({ scrollRef, data, type }) => {
                   <PressableButton
                     key={item.title}
                     onPress={() => onPress(item, index)}
-                    type={currentIndex === index ? "selected" : "transparent"}
+                    type={currentIndex === index ? "accent" : "transparent"}
                     customStyle={{
                       minWidth: "20%",
                       width: null,
@@ -170,9 +171,7 @@ const JumpToSectionDialog = ({ scrollRef, data, type }) => {
                     <Paragraph
                       size={SIZE.sm}
                       color={
-                        currentIndex === index
-                          ? colors.selected.accent
-                          : colors.primary.accent
+                        currentIndex === index ? colors.light : colors.accent
                       }
                       style={{
                         textAlign: "center"

apps/mobile/app/components/dialogs/loading/index.tsx

@@ -18,7 +18,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 import React from "react";
 import { View } from "react-native";
-import { useThemeColors } from "@notesnook/theme";
+import { useThemeStore } from "../../../stores/use-theme-store";
 import BaseDialog from "../../dialog/base-dialog";
 import { ProgressBarComponent } from "../../ui/svg/lazy";
 import { useEffect } from "react";
@@ -30,7 +30,7 @@ import { useState } from "react";
 import { eCloseLoading, eOpenLoading } from "../../../utils/events";
 
 export const LoadingDialog = () => {
-  const { colors } = useThemeColors();
+  const colors = useThemeStore((state) => state.colors);
   const [visible, setVisible] = useState(false);
 
   useEffect(() => {
@@ -58,7 +58,7 @@ export const LoadingDialog = () => {
         style={{
           width: "100%",
           height: "100%",
-          backgroundColor: colors.primary.background,
+          backgroundColor: colors.bg,
           justifyContent: "center",
           alignItems: "center"
         }}
@@ -77,8 +77,8 @@ export const LoadingDialog = () => {
             useNativeDriver
             indeterminate
             indeterminateAnimationDuration={2000}
-            unfilledColor={colors.secondary.background}
-            color={colors.primary.accent}
+            unfilledColor={colors.nav}
+            color={colors.accent}
             borderWidth={0}
           />
         </View>

apps/mobile/app/components/dialogs/pdf-preview/index.js

@@ -33,7 +33,7 @@ import {
   eSubscribeEvent,
   eUnSubscribeEvent
 } from "../../../services/event-manager";
-import { useThemeColors } from "@notesnook/theme";
+import { useThemeStore } from "../../../stores/use-theme-store";
 import { SIZE } from "../../../utils/size";
 import { Dialog } from "../../dialog";
 import BaseDialog from "../../dialog/base-dialog";
@@ -64,7 +64,7 @@ const usePDFSnapshot = (attachment) => {
 };
 
 const PDFPreview = () => {
-  const { colors } = useThemeColors();
+  const colors = useThemeStore((state) => state.colors);
   const [visible, setVisible] = useState(false);
   const [pdfSource, setPDFSource] = useState();
   const [loading, setLoading] = useState(false);
@@ -172,7 +172,7 @@ const PDFPreview = () => {
             >
               <ProgressBarComponent
                 indeterminate={!progress}
-                color={colors.primary.accent}
+                color={colors.accent}
                 borderColor="transparent"
                 progress={parseInt(progress?.value || "100") / 100}
               />
@@ -180,7 +180,7 @@ const PDFPreview = () => {
                 style={{
                   marginTop: 10
                 }}
-                color={colors.static.white}
+                color={colors.light}
               >
                 Loading {`${progress?.percent ? `(${progress?.percent})` : ""}`}
                 ... Please wait
@@ -205,7 +205,7 @@ const PDFPreview = () => {
                   }}
                 >
                   <IconButton
-                    color={colors.static.white}
+                    color={colors.light}
                     name="arrow-left"
                     onPress={close}
                     customStyle={{
@@ -226,7 +226,7 @@ const PDFPreview = () => {
                     ref={inputRef}
                     defaultValue={currentPage + ""}
                     style={{
-                      color: colors.primary.paragraph,
+                      color: colors.pri,
                       padding: 0,
                       paddingTop: 0,
                       paddingBottom: 0,
@@ -234,7 +234,7 @@ const PDFPreview = () => {
                       marginBottom: 0,
                       paddingVertical: 0,
                       height: 25,
-                      backgroundColor: colors.secondary.background,
+                      backgroundColor: colors.nav,
                       width: 40,
                       textAlign: "center",
                       marginRight: 4,
@@ -249,7 +249,7 @@ const PDFPreview = () => {
                     }}
                     blurOnSubmit
                   />
-                  <Paragraph color={colors.static.white}>/{numPages}</Paragraph>
+                  <Paragraph color={colors.light}>/{numPages}</Paragraph>
                 </View>
 
                 <View
@@ -258,7 +258,7 @@ const PDFPreview = () => {
                   }}
                 >
                   <IconButton
-                    color={colors.static.white}
+                    color={colors.light}
                     name="download"
                     onPress={() => {
                       downloadAttachment(attachment.metadata.hash, false);

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

@@ -24,7 +24,7 @@ import {
   eSubscribeEvent,
   eUnSubscribeEvent
 } from "../../../services/event-manager";
-import { useThemeColors } from "@notesnook/theme";
+import { useThemeStore } from "../../../stores/use-theme-store";
 import { getElevationStyle } from "../../../utils/elevation";
 import { eCloseResultDialog, eOpenResultDialog } from "../../../utils/events";
 import { SIZE } from "../../../utils/size";
@@ -36,7 +36,7 @@ import Paragraph from "../../ui/typography/paragraph";
 import { ProFeatures } from "./pro-features";
 
 const ResultDialog = () => {
-  const { colors } = useThemeColors();
+  const colors = useThemeStore((state) => state.colors);
   const [visible, setVisible] = useState(false);
   const [dialogData, setDialogData] = useState({
     title: "Thank you for signing up!",
@@ -72,7 +72,7 @@ const ResultDialog = () => {
           width: DDS.isTab ? 350 : "85%",
           maxHeight: 500,
           borderRadius: 10,
-          backgroundColor: colors.primary.background,
+          backgroundColor: colors.bg,
           paddingTop: 20,
           justifyContent: "center",
           alignItems: "center"
@@ -94,7 +94,7 @@ const ResultDialog = () => {
         </Heading>
 
         <Paragraph
-          color={colors.secondary.paragraph}
+          color={colors.icon}
           size={SIZE.md}
           style={{
             alignSelf: "center",
@@ -121,7 +121,7 @@ const ResultDialog = () => {
         <Seperator />
         <View
           style={{
-            backgroundColor: colors.secondary.background,
+            backgroundColor: colors.nav,
             width: "100%",
             borderBottomRightRadius: 10,
             borderBottomLeftRadius: 10,

apps/mobile/app/components/dialogs/result/pro-features.js

@@ -21,7 +21,7 @@ import React from "react";
 import { View } from "react-native";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { eSendEvent } from "../../../services/event-manager";
-import { useThemeColors } from "@notesnook/theme";
+import { useThemeStore } from "../../../stores/use-theme-store";
 import {
   eCloseSheet,
   eCloseResultDialog,
@@ -31,7 +31,7 @@ import { SIZE } from "../../../utils/size";
 import { sleep } from "../../../utils/time";
 import Paragraph from "../../ui/typography/paragraph";
 export const ProFeatures = ({ count = 6 }) => {
-  const { colors } = useThemeColors();
+  const colors = useThemeStore((state) => state.colors);
 
   return (
     <>
@@ -48,7 +48,7 @@ export const ProFeatures = ({ count = 6 }) => {
           content: "Instantly sync to unlimited devices"
         },
         {
-          content: "A private vault to keep everything important always locked"
+          content: "A private vault to keep everything imporant always locked"
         },
         {
           content:
@@ -73,7 +73,7 @@ export const ProFeatures = ({ count = 6 }) => {
               justifyContent: "flex-start"
             }}
           >
-            <Icon size={SIZE.lg} color={colors.primary.accent} name="check" />
+            <Icon size={SIZE.lg} color={colors.accent} name="check" />
             <Paragraph style={{ marginLeft: 5, flexShrink: 1 }}>
               {item.content}
             </Paragraph>
@@ -89,7 +89,7 @@ export const ProFeatures = ({ count = 6 }) => {
         size={SIZE.xs}
         style={{
           textDecorationLine: "underline",
-          color: colors.secondary.paragraph
+          color: colors.icon
         }}
       >
         See all features included in Notesnook Pro

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

@@ -442,7 +442,6 @@ export class VaultDialog extends Component {
       if (this.state.biometricUnlock && !this.state.isBiometryEnrolled) {
         await this._enrollFingerprint(this.password);
       }
-
       if (this.state.goToEditor) {
         this._openInEditor(note);
       } else if (this.state.share) {
@@ -453,6 +452,7 @@ export class VaultDialog extends Component {
         await this._copyNote(note);
       }
     } catch (e) {
+      console.log(e);
       this._takeErrorAction(e);
     }
   };
@@ -467,40 +467,44 @@ export class VaultDialog extends Component {
   }
 
   async _enrollFingerprint(password) {
-    this.setState(
-      {
-        loading: true
-      },
-      async () => {
-        try {
-          await db.vault.unlock(password);
-          await BiometricService.storeCredentials(password);
-          this.setState({
-            loading: false
-          });
-          eSendEvent("vaultUpdated");
-          ToastEvent.show({
-            heading: "Biometric unlocking enabled!",
-            message: "Now you can unlock notes in vault with biometrics.",
-            type: "success",
-            context: "global"
-          });
-          this.close();
-        } catch (e) {
-          this.close();
-          ToastEvent.show({
-            heading: "Incorrect password",
-            message:
-              "Please enter the correct vault password to enable biometrics.",
-            type: "error",
-            context: "local"
-          });
-          this.setState({
-            loading: false
-          });
+    try {
+      this.setState(
+        {
+          loading: true
+        },
+        async () => {
+          try {
+            await db.vault.unlock(password);
+            await BiometricService.storeCredentials(password);
+            this.setState({
+              loading: false
+            });
+            eSendEvent("vaultUpdated");
+            ToastEvent.show({
+              heading: "Biometric unlocking enabled!",
+              message: "Now you can unlock notes in vault with biometrics.",
+              type: "success",
+              context: "global"
+            });
+            this.close();
+          } catch (e) {
+            ToastEvent.show({
+              heading: "Incorrect password",
+              message:
+                "Please enter the correct vault password to enable biometrics.",
+              type: "error",
+              context: "local"
+            });
+            this.setState({
+              loading: false
+            });
+            return;
+          }
         }
-      }
-    );
+      );
+    } catch (e) {
+      this._takeErrorAction(e);
+    }
   }
 
   async _createVault() {
@@ -539,7 +543,7 @@ export class VaultDialog extends Component {
       .remove(this.state.note.id, this.password)
       .then(() => {
         ToastEvent.show({
-          heading: "Note permanently unlocked.",
+          heading: "Note permanantly unlocked.",
           type: "success",
           context: "global"
         });
@@ -678,7 +682,7 @@ export class VaultDialog extends Component {
             ...getElevationStyle(5),
             width: DDS.isTab ? 350 : "85%",
             borderRadius: 10,
-            backgroundColor: colors.primary.background,
+            backgroundColor: colors.bg,
             paddingTop: 12
           }}
         >
@@ -863,12 +867,7 @@ export class VaultDialog extends Component {
                 icon="fingerprint"
                 width="100%"
                 title="Biometric unlocking"
-                iconColor={
-                  this.state.biometricUnlock
-                    ? colors.selected.icon
-                    : colors.primary.icon
-                }
-                type={this.state.biometricUnlock ? "transparent" : "selected"}
+                type={this.state.biometricUnlock ? "transparent" : "gray"}
               />
             ) : null}
           </View>

apps/mobile/app/components/exception-handler/index.tsx

@@ -39,9 +39,9 @@ class ExceptionHandler extends React.Component<{
     error: Error | null;
     hasError: boolean;
   } = {
-      hasError: false,
-      error: null
-    };
+    hasError: false,
+    error: null
+  };
   static getDerivedStateFromError(error: Error) {
     return { hasError: true, error: error };
   }
@@ -69,7 +69,7 @@ class ExceptionHandler extends React.Component<{
               this.props.component
             )}
             defaultTitle={this.state.error?.message}
-            issueTitle="An exception occurred"
+            issueTitle="An exception occured"
           />
           <Dialog />
         </SafeAreaView>

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

@@ -27,14 +27,14 @@ import {
 } from "../../services/event-manager";
 import useNavigationStore from "../../stores/use-navigation-store";
 import { useSelectionStore } from "../../stores/use-selection-store";
-import { useThemeColors } from "@notesnook/theme";
+import { useThemeStore } from "../../stores/use-theme-store";
 import { eScrollEvent } from "../../utils/events";
 import { LeftMenus } from "./left-menus";
 import { RightMenus } from "./right-menus";
 import { Title } from "./title";
 
 const _Header = () => {
-  const { colors } = useThemeColors();
+  const colors = useThemeStore((state) => state.colors);
   const insets = useGlobalSafeAreaInsets();
   const [hide, setHide] = useState(true);
   const selectionMode = useSelectionStore((state) => state.selectionMode);
@@ -43,7 +43,7 @@ const _Header = () => {
   );
 
   const onScroll = useCallback(
-    (data: { x: number; y: number }) => {
+    (data) => {
       if (data.y > 150) {
         if (!hide) return;
         setHide(false);
@@ -69,12 +69,10 @@ const _Header = () => {
           styles.container,
           {
             marginTop: Platform.OS === "android" ? insets.top : null,
-            backgroundColor: colors.primary.background,
+            backgroundColor: colors.bg,
             overflow: "hidden",
             borderBottomWidth: 1,
-            borderBottomColor: hide
-              ? "transparent"
-              : colors.secondary.background,
+            borderBottomColor: hide ? "transparent" : colors.nav,
             justifyContent: "space-between"
           }
         ]}

apps/mobile/app/components/header/left-menus.js

@@ -23,12 +23,12 @@ import { DDS } from "../../services/device-detection";
 import Navigation from "../../services/navigation";
 import useNavigationStore from "../../stores/use-navigation-store";
 import { useSettingStore } from "../../stores/use-setting-store";
-import { useThemeColors } from "@notesnook/theme";
+import { useThemeStore } from "../../stores/use-theme-store";
 import { tabBarRef } from "../../utils/global-refs";
 import { IconButton } from "../ui/icon-button";
 
 export const LeftMenus = () => {
-  const { colors } = useThemeColors();
+  const colors = useThemeStore((state) => state.colors);
   const deviceMode = useSettingStore((state) => state.deviceMode);
   const canGoBack = useNavigationStore((state) => state.canGoBack);
   const isTablet = deviceMode === "tablet";
@@ -43,6 +43,12 @@ export const LeftMenus = () => {
       return;
     }
     Navigation.goBack();
+    if (
+      useNavigationStore.getState().currentScreen.name === "Signup" ||
+      useNavigationStore.getState().currentScreen.name === "Login"
+    ) {
+      tabBarRef.current.unlock();
+    }
   };
 
   return isTablet && !canGoBack ? null : (
@@ -55,17 +61,17 @@ export const LeftMenus = () => {
         width: 40,
         borderRadius: 100,
         marginLeft: -5,
-        marginRight: DDS.isLargeTablet() ? 10 : 7
+        marginRight: DDS.isLargeTablet() ? 10 : 25
       }}
       left={40}
       top={40}
-      right={DDS.isLargeTablet() ? 10 : 10}
+      right={DDS.isLargeTablet() ? 10 : 25}
       onPress={onLeftButtonPress}
       onLongPress={() => {
         Navigation.popToTop();
       }}
       name={canGoBack ? "arrow-left" : "menu"}
-      color={colors.primary.paragraph}
+      color={colors.pri}
       iconStyle={{
         marginLeft: canGoBack ? -5 : 0
       }}

apps/mobile/app/components/header/right-menus.js

@@ -19,30 +19,25 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { useRef } from "react";
 import { Platform, StyleSheet, View } from "react-native";
-//@ts-ignore
 import Menu from "react-native-reanimated-material-menu";
 import { notesnook } from "../../../e2e/test.ids";
 import Navigation from "../../services/navigation";
 import SearchService from "../../services/search";
 import useNavigationStore from "../../stores/use-navigation-store";
 import { useSettingStore } from "../../stores/use-setting-store";
-import { useThemeColors } from "@notesnook/theme";
+import { useThemeStore } from "../../stores/use-theme-store";
 import { SIZE } from "../../utils/size";
 import { sleep } from "../../utils/time";
 import { Button } from "../ui/button";
 import { IconButton } from "../ui/icon-button";
 
 export const RightMenus = () => {
-  const { colors } = useThemeColors();
-  const { colors: contextMenuColors } = useThemeColors("contextMenu");
+  const colors = useThemeStore((state) => state.colors);
   const deviceMode = useSettingStore((state) => state.deviceMode);
-  const buttons = useNavigationStore((state) => state.headerRightButtons);
+  const rightButtons = useNavigationStore((state) => state.headerRightButtons);
   const currentScreen = useNavigationStore((state) => state.currentScreen.name);
   const buttonAction = useNavigationStore((state) => state.buttonAction);
-  const menuRef = useRef<{
-    show: () => void;
-    hide: () => void;
-  }>();
+  const menuRef = useRef();
 
   return (
     <View style={styles.rightBtnContainer}>
@@ -50,16 +45,13 @@ export const RightMenus = () => {
         <IconButton
           onPress={async () => {
             SearchService.prepareSearch();
-            Navigation.navigate(
-              {
-                name: "Search"
-              },
-              {}
-            );
+            Navigation.navigate({
+              name: "Search"
+            });
           }}
           testID="icon-search"
           name="magnify"
-          color={colors.primary.paragraph}
+          color={colors.pri}
           customStyle={styles.rightBtn}
         />
       ) : null}
@@ -84,34 +76,34 @@ export const RightMenus = () => {
             borderRadius: 5,
             paddingHorizontal: 0,
             borderWidth: 1,
-            borderColor: colors.primary.accent
+            borderColor: colors.accent
           }}
         />
       ) : null}
 
-      {buttons && buttons.length > 0 ? (
+      {rightButtons && rightButtons.length > 0 ? (
         <Menu
           ref={menuRef}
           animationDuration={200}
           style={{
             borderRadius: 5,
-            backgroundColor: contextMenuColors.primary.background
+            backgroundColor: colors.bg
           }}
           onRequestClose={() => {
             menuRef.current?.hide();
           }}
-          anchor={
+          button={
             <IconButton
               onPress={() => {
                 menuRef.current?.show();
               }}
               name="dots-vertical"
-              color={colors.primary.paragraph}
+              color={colors.pri}
               customStyle={styles.rightBtn}
             />
           }
         >
-          {buttons.map((item) => (
+          {rightButtons.map((item) => (
             <Button
               style={{
                 width: 150,
@@ -120,7 +112,7 @@ export const RightMenus = () => {
               }}
               type="gray"
               buttonType={{
-                text: contextMenuColors.primary.paragraph
+                text: colors.pri
               }}
               key={item.title}
               title={item.title}

apps/mobile/app/components/header/title.js

@@ -17,9 +17,8 @@ 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, { useCallback, useEffect, useState } from "react";
-import { Platform } from "react-native";
+import React, { useEffect, useState } from "react";
+import { Platform, View } from "react-native";
 import { db } from "../../common/database";
 import Notebook from "../../screens/notebook";
 import {
@@ -27,26 +26,28 @@ import {
   eUnSubscribeEvent
 } from "../../services/event-manager";
 import useNavigationStore from "../../stores/use-navigation-store";
+import { useThemeStore } from "../../stores/use-theme-store";
 import { eScrollEvent } from "../../utils/events";
 import { SIZE } from "../../utils/size";
-import Tag from "../ui/tag";
 import Heading from "../ui/typography/heading";
+import { useCallback } from "react";
+import Tag from "../ui/tag";
 
-const titleState: { [name: string]: boolean } = {};
+const titleState = {};
 
 export const Title = () => {
-  const { colors } = useThemeColors();
+  const colors = useThemeStore((state) => state.colors);
   const currentScreen = useNavigationStore((state) => state.currentScreen);
   const isNotebook = currentScreen.name === "Notebook";
   const isTopic = currentScreen?.name === "TopicNotes";
   const [hide, setHide] = useState(
     isNotebook
-      ? typeof titleState[currentScreen.id as string] === "boolean"
-        ? titleState[currentScreen.id as string]
+      ? typeof titleState[currentScreen.id] === "boolean"
+        ? titleState[currentScreen.id]
         : true
       : false
   );
-  const isHidden = titleState[currentScreen.id as string];
+  const isHidden = titleState[currentScreen.id];
   const notebook =
     isTopic && currentScreen.notebookId
       ? db.notebooks?.notebook(currentScreen.notebookId)?.data
@@ -55,18 +56,18 @@ export const Title = () => {
   const isTag = currentScreen?.name === "TaggedNotes";
 
   const onScroll = useCallback(
-    (data: { x: number; y: number }) => {
+    (data) => {
       if (currentScreen.name !== "Notebook") {
         setHide(false);
         return;
       }
       if (data.y > 150) {
         if (!hide) return;
-        titleState[currentScreen.id as string] = false;
+        titleState[currentScreen.id] = false;
         setHide(false);
       } else {
         if (hide) return;
-        titleState[currentScreen.id as string] = true;
+        titleState[currentScreen.id] = true;
         setHide(true);
       }
     },
@@ -75,13 +76,13 @@ export const Title = () => {
 
   useEffect(() => {
     if (currentScreen.name === "Notebook") {
-      const value =
-        typeof titleState[currentScreen.id as string] === "boolean"
-          ? titleState[currentScreen.id as string]
+      let value =
+        typeof titleState[currentScreen.id] === "boolean"
+          ? titleState[currentScreen.id]
           : true;
       setHide(value);
     } else {
-      setHide(titleState[currentScreen.id as string]);
+      setHide(titleState[currentScreen.id]);
     }
   }, [currentScreen.id, currentScreen.name]);
 
@@ -97,34 +98,34 @@ export const Title = () => {
     Notebook.navigate(notebook, true);
   }
   return (
-    <>
+    <View
+      style={{
+        opacity: 1,
+        flexShrink: 1,
+        flexDirection: "row",
+        alignItems: "center"
+      }}
+    >
       {!hide && !isHidden ? (
         <Heading
           onPress={navigateToNotebook}
           numberOfLines={1}
-          size={SIZE.lg}
+          size={SIZE.xl}
           style={{
             flexWrap: "wrap",
             marginTop: Platform.OS === "ios" ? -1 : 0
           }}
-          color={currentScreen.color || colors.primary.heading}
+          color={currentScreen.color || colors.heading}
         >
           {isTag ? (
-            <Heading size={SIZE.xl} color={colors.primary.accent}>
+            <Heading size={SIZE.xl} color={colors.accent}>
               #
             </Heading>
           ) : null}
-          {title}{" "}
-          <Tag
-            visible={currentScreen.beta}
-            text="BETA"
-            style={{
-              backgroundColor: "transparent"
-            }}
-            textColor={colors.primary.accent}
-          />
+          {title}
         </Heading>
       ) : null}
-    </>
+      <Tag visible={currentScreen.beta} text="BETA" />
+    </View>
   );
 };

apps/mobile/app/components/image-preview/index.js

@@ -17,9 +17,6 @@ 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 Sodium from "@ammarahmed/react-native-sodium";
-import dataurl from "@notesnook/core/dist/utils/dataurl";
-import { useThemeColors } from "@notesnook/theme";
 import React, { useEffect, useState } from "react";
 import { Platform, View } from "react-native";
 import ImageViewer from "react-native-image-zoom-viewer";
@@ -29,13 +26,15 @@ import {
   eSubscribeEvent,
   eUnSubscribeEvent
 } from "../../services/event-manager";
+import { useThemeStore } from "../../stores/use-theme-store";
 import BaseDialog from "../dialog/base-dialog";
 import { IconButton } from "../ui/icon-button";
 import { ProgressBarComponent } from "../ui/svg/lazy";
+import Sodium from "@ammarahmed/react-native-sodium";
+import dataurl from "@notesnook/core/utils/dataurl";
 
 const ImagePreview = () => {
-  const { colors } = useThemeColors("dialog");
-
+  const colors = useThemeStore((state) => state.colors);
   const [visible, setVisible] = useState(false);
   const [image, setImage] = useState("");
   const [loading, setLoading] = useState(false);
@@ -98,7 +97,7 @@ const ImagePreview = () => {
             >
               <ProgressBarComponent
                 indeterminate
-                color={colors.primary.accent}
+                color={colors.accent}
                 borderColor="transparent"
               />
             </View>

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

@@ -17,7 +17,6 @@ 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 from "react";
 import {
   Linking,
@@ -28,17 +27,18 @@ import {
 } from "react-native";
 import { SwiperFlatList } from "react-native-swiper-flatlist";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
-import { getElevationStyle } from "../../utils/elevation";
-import useGlobalSafeAreaInsets from "../../hooks/use-global-safe-area-insets";
 import SettingsService from "../../services/settings";
 import { useSettingStore } from "../../stores/use-setting-store";
+import { useThemeStore } from "../../stores/use-theme-store";
+import { getElevationStyle } from "../../utils/elevation";
 import { SIZE } from "../../utils/size";
 import { Button } from "../ui/button";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
+import useGlobalSafeAreaInsets from "../../hooks/use-global-safe-area-insets";
 
 const Intro = ({ navigation }) => {
-  const { colors } = useThemeColors();
+  const colors = useThemeStore((state) => state.colors);
   const isTelemetryEnabled = useSettingStore(
     (state) => state.settings.telemetry
   );
@@ -64,7 +64,7 @@ const Intro = ({ navigation }) => {
             style={{
               width: 100,
               height: 5,
-              backgroundColor: colors.primary.accent,
+              backgroundColor: colors.accent,
               borderRadius: 2,
               marginRight: 7
             }}
@@ -74,7 +74,7 @@ const Intro = ({ navigation }) => {
             style={{
               width: 20,
               height: 5,
-              backgroundColor: colors.secondary.background,
+              backgroundColor: colors.nav,
               borderRadius: 2
             }}
           />
@@ -117,7 +117,7 @@ const Intro = ({ navigation }) => {
         </View>
       </View>
     ),
-    [colors.primary.accent, colors.secondary.background, deviceMode, width]
+    [colors.accent, colors.nav, deviceMode, width]
   );
 
   return (
@@ -130,13 +130,13 @@ const Intro = ({ navigation }) => {
       <View
         style={{
           width: deviceMode !== "mobile" ? width / 2 : "100%",
-          backgroundColor: colors.secondary.background,
+          backgroundColor: colors.nav,
           marginBottom: 20,
           borderBottomWidth: 1,
-          borderBottomColor: colors.primary.border,
+          borderBottomColor: colors.border,
           alignSelf: deviceMode !== "mobile" ? "center" : undefined,
           borderWidth: deviceMode !== "mobile" ? 1 : null,
-          borderColor: deviceMode !== "mobile" ? colors.primary.border : null,
+          borderColor: deviceMode !== "mobile" ? colors.border : null,
           borderRadius: deviceMode !== "mobile" ? 20 : null,
           marginTop: deviceMode !== "mobile" ? 50 : null,
           paddingTop: insets.top + 10,
@@ -171,14 +171,14 @@ const Intro = ({ navigation }) => {
               user: "@andrewsayer on Twitter"
             }
           ]}
-          paginationActiveColor={colors.primary.accent}
+          paginationActiveColor={colors.accent}
           paginationStyleItem={{
             width: 10,
             height: 5,
             marginRight: 4,
             marginLeft: 4
           }}
-          paginationDefaultColor={colors.primary.border}
+          paginationDefaultColor={colors.border}
           renderItem={renderItem}
         />
       </View>
@@ -229,9 +229,7 @@ const Intro = ({ navigation }) => {
             name={
               isTelemetryEnabled ? "checkbox-marked" : "checkbox-blank-outline"
             }
-            color={
-              isTelemetryEnabled ? colors.primary.accent : colors.primary.icon
-            }
+            color={isTelemetryEnabled ? colors.accent : colors.icon}
           />
 
           <Paragraph

apps/mobile/app/components/list-items/headers/header.js

@@ -19,9 +19,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React from "react";
 import { View } from "react-native";
-import { useThemeColors } from "@notesnook/theme";
+import { useThemeStore } from "../../../stores/use-theme-store";
 import { useMessageStore } from "../../../stores/use-message-store";
-import { ColorValues } from "../../../utils/colors";
+import { COLORS_NOTE } from "../../../utils/color-scheme";
 import { Announcement } from "../../announcements/announcement";
 import { Card } from "../../list/card";
 import Paragraph from "../../ui/typography/paragraph";
@@ -37,7 +37,7 @@ export const Header = React.memo(
     noAnnouncement,
     warning
   }) => {
-    const { colors } = useThemeColors();
+    const colors = useThemeStore((state) => state.colors);
     const announcements = useMessageStore((state) => state.announcements);
     const selectionMode = useSelectionStore((state) => state.selectionMode);
 
@@ -47,7 +47,7 @@ export const Header = React.memo(
           <View
             style={{
               padding: 12,
-              backgroundColor: colors.error.background,
+              backgroundColor: colors.errorBg,
               width: "95%",
               alignSelf: "center",
               borderRadius: 5,
@@ -55,18 +55,13 @@ export const Header = React.memo(
               alignItems: "center"
             }}
           >
-            <Icon
-              name="sync-alert"
-              size={SIZE.md}
-              color={colors.error.icon}
-              f
-            />
-            <Paragraph style={{ marginLeft: 5 }} color={colors.error.icon}>
+            <Icon name="sync-alert" size={SIZE.md} color={colors.red} f />
+            <Paragraph style={{ marginLeft: 5 }} color={colors.red}>
               {warning.title}
             </Paragraph>
           </View>
         ) : announcements.length !== 0 && !noAnnouncement ? (
-          <Announcement color={color || colors.primary.accent} />
+          <Announcement color={color || colors.accent} />
         ) : type === "search" ? null : !shouldShow ? (
           <View
             style={{
@@ -79,9 +74,7 @@ export const Header = React.memo(
           >
             {messageCard ? (
               <Card
-                color={
-                  ColorValues[color?.toLowerCase()] || colors.primary.accent
-                }
+                color={COLORS_NOTE[color?.toLowerCase()] || colors.accent}
               />
             ) : null}
           </View>

apps/mobile/app/components/list-items/headers/notebook-header.js

@@ -20,7 +20,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import { useRef, useState } from "react";
 import React from "react";
 import { View } from "react-native";
-import { useThemeColors } from "@notesnook/theme";
+import { useThemeStore } from "../../../stores/use-theme-store";
 import { useMenuStore } from "../../../stores/use-menu-store";
 import { ToastEvent } from "../../../services/event-manager";
 import { getTotalNotes } from "@notesnook/common";
@@ -31,7 +31,7 @@ import Heading from "../../ui/typography/heading";
 import Paragraph from "../../ui/typography/paragraph";
 
 export const NotebookHeader = ({ notebook, onEditNotebook }) => {
-  const { colors } = useThemeColors();
+  const colors = useThemeStore((state) => state.colors);
   const [isPinnedToMenu, setIsPinnedToMenu] = useState(
     db.shortcuts.exists(notebook.id)
   );
@@ -75,7 +75,7 @@ export const NotebookHeader = ({ notebook, onEditNotebook }) => {
         paddingTop: 25
       }}
     >
-      <Paragraph color={colors.secondary.paragraph} size={SIZE.xs}>
+      <Paragraph color={colors.icon} size={SIZE.xs}>
         {new Date(notebook.dateEdited).toLocaleString()}
       </Paragraph>
       <View
@@ -110,7 +110,7 @@ export const NotebookHeader = ({ notebook, onEditNotebook }) => {
               height: 40
             }}
             type={isPinnedToMenu ? "grayBg" : "grayBg"}
-            color={isPinnedToMenu ? colors.primary.accent : colors.primary.icon}
+            color={isPinnedToMenu ? colors.accent : colors.icon}
             size={SIZE.lg}
           />
           <IconButton
@@ -119,7 +119,7 @@ export const NotebookHeader = ({ notebook, onEditNotebook }) => {
             tooltipText="Edit this notebook"
             name="pencil"
             type="grayBg"
-            color={colors.primary.icon}
+            color={colors.icon}
             customStyle={{
               width: 40,
               height: 40
@@ -129,7 +129,7 @@ export const NotebookHeader = ({ notebook, onEditNotebook }) => {
       </View>
 
       {notebook.description ? (
-        <Paragraph size={SIZE.md} color={colors.primary.paragraph}>
+        <Paragraph size={SIZE.md} color={colors.pri}>
           {notebook.description}
         </Paragraph>
       ) : null}
@@ -141,7 +141,7 @@ export const NotebookHeader = ({ notebook, onEditNotebook }) => {
           fontFamily: null
         }}
         size={SIZE.xs}
-        color={colors.secondary.paragraph}
+        color={colors.icon}
       >
         {notebook.topics.length === 1
           ? "1 topic"

apps/mobile/app/components/list-items/headers/section-header.js

@@ -17,25 +17,35 @@ 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, { useRef } from "react";
-import { TouchableOpacity, View, useWindowDimensions } from "react-native";
-import { eSendEvent, presentSheet } from "../../../services/event-manager";
-import SettingsService from "../../../services/settings";
+import React, { useEffect, useRef, useState } from "react";
+import { TouchableOpacity, useWindowDimensions, View } from "react-native";
+import { useThemeStore } from "../../../stores/use-theme-store";
 import { useSettingStore } from "../../../stores/use-setting-store";
-import { ColorValues } from "../../../utils/colors";
+import {
+  eSendEvent,
+  eSubscribeEvent,
+  eUnSubscribeEvent,
+  presentSheet
+} from "../../../services/event-manager";
+import SettingsService from "../../../services/settings";
 import { GROUP } from "../../../utils/constants";
+import { COLORS_NOTE } from "../../../utils/color-scheme";
+import { db } from "../../../common/database";
 import { eOpenJumpToDialog } from "../../../utils/events";
 import { SIZE } from "../../../utils/size";
-import Sort from "../../sheets/sort";
-import { Button } from "../../ui/button";
 import { IconButton } from "../../ui/icon-button";
+import { Button } from "../../ui/button";
+import Sort from "../../sheets/sort";
 import Heading from "../../ui/typography/heading";
+import { useCallback } from "react";
 
 export const SectionHeader = React.memo(
-  function SectionHeader({ item, index, type, color, screen, groupOptions }) {
-    const { colors } = useThemeColors();
+  function SectionHeader({ item, index, type, color, screen }) {
+    const colors = useThemeStore((state) => state.colors);
     const { fontScale } = useWindowDimensions();
+    const [groupOptions, setGroupOptions] = useState(
+      db.settings?.getGroupOptions(type)
+    );
     let groupBy = Object.keys(GROUP).find(
       (key) => GROUP[key] === groupOptions.groupBy
     );
@@ -55,6 +65,17 @@ export const SectionHeader = React.memo(
       ? "Default"
       : groupBy.slice(0, 1).toUpperCase() + groupBy.slice(1, groupBy.length);
 
+    const onUpdate = useCallback(() => {
+      setGroupOptions({ ...db.settings?.getGroupOptions(type) });
+    }, [type]);
+
+    useEffect(() => {
+      eSubscribeEvent("groupOptionsUpdate", onUpdate);
+      return () => {
+        eUnSubscribeEvent("groupOptionsUpdate", onUpdate);
+      };
+    }, [onUpdate]);
+
     return (
       <View
         style={{
@@ -64,7 +85,7 @@ export const SectionHeader = React.memo(
           justifyContent: "space-between",
           paddingHorizontal: 12,
           height: 35 * fontScale,
-          backgroundColor: colors.secondary.background,
+          backgroundColor: colors.nav,
           alignSelf: "center",
           borderRadius: 5,
           marginVertical: 5
@@ -83,7 +104,7 @@ export const SectionHeader = React.memo(
           }}
         >
           <Heading
-            color={ColorValues[color?.toLowerCase()] || colors.primary.accent}
+            color={COLORS_NOTE[color?.toLowerCase()] || colors.accent}
             size={SIZE.sm}
             style={{
               minWidth: 60,
@@ -147,7 +168,7 @@ export const SectionHeader = React.memo(
                     : "Switch to compact mode"
                 }
                 fwdRef={compactModeRef}
-                color={colors.secondary.icon}
+                color={colors.icon}
                 name={listMode == "compact" ? "view-list" : "view-list-outline"}
                 onPress={() => {
                   let settings = {};

apps/mobile/app/components/list-items/note/index.js

@@ -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 { getUpcomingReminder } from "@notesnook/core/dist/collections/reminders";
+import { getUpcomingReminder } from "@notesnook/core/collections/reminders";
 import { decode, EntityLevel } from "entities";
 import React from "react";
 import { View } from "react-native";
@@ -29,8 +29,9 @@ import { TaggedNotes } from "../../../screens/notes/tagged";
 import { TopicNotes } from "../../../screens/notes/topic-notes";
 import useNavigationStore from "../../../stores/use-navigation-store";
 import { useRelationStore } from "../../../stores/use-relation-store";
-import { useThemeColors } from "@notesnook/theme";
-import { ColorValues } from "../../../utils/colors";
+import { useSettingStore } from "../../../stores/use-setting-store";
+import { useThemeStore } from "../../../stores/use-theme-store";
+import { COLORS_NOTE } from "../../../utils/color-scheme";
 import { SIZE } from "../../../utils/size";
 import { Properties } from "../../properties";
 import { Button } from "../../ui/button";
@@ -39,8 +40,6 @@ import { ReminderTime } from "../../ui/reminder-time";
 import { TimeSince } from "../../ui/time-since";
 import Heading from "../../ui/typography/heading";
 import Paragraph from "../../ui/typography/paragraph";
-import { useIsCompactModeEnabled } from "../../../hooks/use-is-compact-mode-enabled";
-import { useEditorStore } from "../../../stores/use-editor-store";
 
 function navigateToTag(item) {
   const tag = db.tags.tag(item.id);
@@ -99,21 +98,19 @@ const NoteItem = ({
   dateBy = "dateCreated",
   noOpen = false
 }) => {
-  const isEditingNote = useEditorStore(
-    (state) => state.currentEditingNote === item.id
+  const colors = useThemeStore((state) => state.colors);
+  const notesListMode = useSettingStore(
+    (state) => state.settings.notesListMode
   );
-  const { colors } = useThemeColors();
-  const compactMode = useIsCompactModeEnabled(item);
+  const compactMode = notesListMode === "compact";
   const attachmentCount = db.attachments?.ofNote(item.id, "all")?.length || 0;
   const _update = useRelationStore((state) => state.updater);
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const notebooks = React.useMemo(() => getNotebook(item), [item, _update]);
   const reminders = db.relations.from(item, "reminder");
   const reminder = getUpcomingReminder(reminders);
-  const noteColor = ColorValues[item.color?.toLowerCase()];
+  const noteColor = COLORS_NOTE[item.color?.toLowerCase()];
   const tags = getTags(item);
-  const primaryColors = isEditingNote ? colors.selected : colors.primary;
-
   return (
     <>
       <View
@@ -154,7 +151,7 @@ const NoteItem = ({
                   borderRadius: 5,
                   marginRight: 5,
                   borderWidth: 0.5,
-                  borderColor: primaryColors.border,
+                  borderColor: colors.icon,
                   paddingHorizontal: 6,
                   marginBottom: 5
                 }}
@@ -184,9 +181,7 @@ const NoteItem = ({
         {compactMode ? (
           <Paragraph
             numberOfLines={1}
-            color={
-              ColorValues[item.color?.toLowerCase()] || primaryColors.heading
-            }
+            color={COLORS_NOTE[item.color?.toLowerCase()] || colors.heading}
             style={{
               flexWrap: "wrap"
             }}
@@ -197,9 +192,7 @@ const NoteItem = ({
         ) : (
           <Heading
             numberOfLines={1}
-            color={
-              ColorValues[item.color?.toLowerCase()] || primaryColors.heading
-            }
+            color={COLORS_NOTE[item.color?.toLowerCase()] || colors.heading}
             style={{
               flexWrap: "wrap"
             }}
@@ -214,7 +207,6 @@ const NoteItem = ({
             style={{
               flexWrap: "wrap"
             }}
-            color={primaryColors.paragraph}
             numberOfLines={2}
           >
             {decode(item.headline, {
@@ -243,13 +235,13 @@ const NoteItem = ({
                       marginRight: 6
                     }}
                     size={SIZE.sm}
-                    color={colors.error.accent}
+                    color={colors.red}
                   />
                 ) : null}
                 <TimeSince
                   style={{
                     fontSize: SIZE.xs,
-                    color: colors.secondary.paragraph,
+                    color: colors.icon,
                     marginRight: 6
                   }}
                   time={item[dateBy]}
@@ -269,12 +261,9 @@ const NoteItem = ({
                     <Icon
                       name="attachment"
                       size={SIZE.md}
-                      color={primaryColors.icon}
+                      color={colors.icon}
                     />
-                    <Paragraph
-                      color={colors.secondary.paragraph}
-                      size={SIZE.xs}
-                    >
+                    <Paragraph color={colors.icon} size={SIZE.xs}>
                       {attachmentCount}
                     </Paragraph>
                   </View>
@@ -289,8 +278,7 @@ const NoteItem = ({
                       marginRight: 6
                     }}
                     color={
-                      ColorValues[item.color?.toLowerCase()] ||
-                      primaryColors.accent
+                      COLORS_NOTE[item.color?.toLowerCase()] || colors.accent
                     }
                   />
                 ) : null}
@@ -303,7 +291,7 @@ const NoteItem = ({
                     style={{
                       marginRight: 6
                     }}
-                    color={primaryColors.icon}
+                    color={colors.icon}
                   />
                 ) : null}
 
@@ -348,7 +336,7 @@ const NoteItem = ({
             ) : (
               <>
                 <Paragraph
-                  color={colors.secondary.paragraph}
+                  color={colors.icon}
                   size={SIZE.xs}
                   style={{
                     marginRight: 6
@@ -361,7 +349,7 @@ const NoteItem = ({
                 </Paragraph>
 
                 <Paragraph
-                  color={primaryColors.accent}
+                  color={colors.accent}
                   size={SIZE.xs}
                   style={{
                     marginRight: 6
@@ -389,7 +377,7 @@ const NoteItem = ({
                   marginRight: 6
                 }}
                 size={SIZE.sm}
-                color={colors.error.accent}
+                color={colors.red}
               />
             ) : null}
 
@@ -401,7 +389,7 @@ const NoteItem = ({
                 style={{
                   marginRight: 6
                 }}
-                color={colors.secondary.background}
+                color={colors.icon}
               />
             ) : null}
 
@@ -420,7 +408,7 @@ const NoteItem = ({
             <TimeSince
               style={{
                 fontSize: SIZE.xs,
-                color: colors.secondary.paragraph,
+                color: colors.icon,
                 marginRight: 6
               }}
               time={item[dateBy]}
@@ -431,7 +419,7 @@ const NoteItem = ({
 
         <IconButton
           testID={notesnook.listitem.menu}
-          color={primaryColors.paragraph}
+          color={colors.pri}
           name="dots-horizontal"
           size={SIZE.xl}
           onPress={() => !noOpen && showActionSheet(item, isTrash)}

apps/mobile/app/components/list-items/notebook/index.js

@@ -23,7 +23,8 @@ import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { notesnook } from "../../../../e2e/test.ids";
 import { TopicNotes } from "../../../screens/notes/topic-notes";
 import { useSelectionStore } from "../../../stores/use-selection-store";
-import { useThemeColors } from "@notesnook/theme";
+import { useSettingStore } from "../../../stores/use-setting-store";
+import { useThemeStore } from "../../../stores/use-theme-store";
 import { SIZE } from "../../../utils/size";
 import { Properties } from "../../properties";
 import { Button } from "../../ui/button";
@@ -31,7 +32,6 @@ import { IconButton } from "../../ui/icon-button";
 import Heading from "../../ui/typography/heading";
 import Paragraph from "../../ui/typography/paragraph";
 import { getFormattedDate } from "@notesnook/common";
-import { useIsCompactModeEnabled } from "../../../hooks/use-is-compact-mode-enabled";
 
 const showActionSheet = (item) => {
   Properties.present(item);
@@ -49,8 +49,11 @@ export const NotebookItem = ({
   dateBy,
   totalNotes
 }) => {
-  const { colors } = useThemeColors();
-  const compactMode = useIsCompactModeEnabled(item);
+  const colors = useThemeStore((state) => state.colors);
+  const notebooksListMode = useSettingStore(
+    (state) => state.settings.notebooksListMode
+  );
+  const compactMode = notebooksListMode === "compact";
   const topics = item.topics?.slice(0, 3) || [];
 
   return (
@@ -109,6 +112,8 @@ export const NotebookItem = ({
                 key={topic.id}
                 height={null}
                 textStyle={{
+                  fontWeight: "normal",
+                  fontFamily: null,
                   marginRight: 0
                 }}
                 type="grayBg"
@@ -120,7 +125,7 @@ export const NotebookItem = ({
                   maxWidth: 120,
                   borderWidth: 0.5,
                   paddingVertical: 2.5,
-                  borderColor: colors.primary.border,
+                  borderColor: colors.icon,
                   paddingHorizontal: 6,
                   marginVertical: 5,
                   marginRight: 5
@@ -144,7 +149,7 @@ export const NotebookItem = ({
             {isTrash ? (
               <>
                 <Paragraph
-                  color={colors.secondary.paragraph}
+                  color={colors.icon}
                   size={SIZE.xs}
                   style={{
                     textAlignVertical: "center",
@@ -155,7 +160,7 @@ export const NotebookItem = ({
                     new Date(item.dateDeleted).toISOString().slice(0, 10)}
                 </Paragraph>
                 <Paragraph
-                  color={colors.primary.accent}
+                  color={colors.accent}
                   size={SIZE.xs}
                   style={{
                     textAlignVertical: "center",
@@ -167,7 +172,7 @@ export const NotebookItem = ({
               </>
             ) : (
               <Paragraph
-                color={colors.secondary.paragraph}
+                color={colors.icon}
                 size={SIZE.xs}
                 style={{
                   marginRight: 6
@@ -177,7 +182,7 @@ export const NotebookItem = ({
               </Paragraph>
             )}
             <Paragraph
-              color={colors.secondary.paragraph}
+              color={colors.icon}
               size={SIZE.xs}
               style={{
                 marginRight: 6
@@ -198,7 +203,7 @@ export const NotebookItem = ({
                   marginRight: 10,
                   marginTop: 2
                 }}
-                color={colors.primary.accent}
+                color={colors.accent}
               />
             ) : null}
           </View>
@@ -213,7 +218,7 @@ export const NotebookItem = ({
         {compactMode ? (
           <>
             <Paragraph
-              color={colors.primary.icon}
+              color={colors.icon}
               size={SIZE.xs}
               style={{
                 marginRight: 6
@@ -229,7 +234,7 @@ export const NotebookItem = ({
         ) : null}
 
         <IconButton
-          color={colors.primary.heading}
+          color={colors.heading}
           name="dots-horizontal"
           testID={notesnook.ids.notebook.menu}
           size={SIZE.xl}

apps/mobile/app/components/list-items/notebook/wrapper.js

@@ -77,7 +77,7 @@ export const openNotebookTopic = (item) => {
         useTrashStore.getState().setTrash();
         useSelectionStore.getState().setSelectionMode(false);
         ToastEvent.show({
-          heading: "Permanently deleted items",
+          heading: "Permanantly deleted items",
           type: "success",
           context: "local"
         });

apps/mobile/app/components/list-items/reminder/index.tsx

@@ -20,7 +20,7 @@ import React from "react";
 import { View } from "react-native";
 import { notesnook } from "../../../../e2e/test.ids";
 import type { Reminder } from "../../../services/notifications";
-import { useThemeColors } from "@notesnook/theme";
+import { useThemeStore } from "../../../stores/use-theme-store";
 import { SIZE } from "../../../utils/size";
 import { Properties } from "../../properties";
 import { IconButton } from "../../ui/icon-button";
@@ -41,7 +41,7 @@ const ReminderItem = React.memo(
     index: number;
     isSheet: boolean;
   }) => {
-    const { colors } = useThemeColors();
+    const colors = useThemeStore((state) => state.colors);
     const openReminder = () => {
       ReminderSheet.present(item, undefined, isSheet);
     };
@@ -90,7 +90,7 @@ const ReminderItem = React.memo(
             {item.disabled ? (
               <View
                 style={{
-                  backgroundColor: colors.secondary.background,
+                  backgroundColor: colors.nav,
                   borderRadius: 5,
                   flexDirection: "row",
                   paddingHorizontal: 6,
@@ -105,11 +105,11 @@ const ReminderItem = React.memo(
                 <Icon
                   name="bell-off-outline"
                   size={SIZE.md}
-                  color={colors.error.icon}
+                  color={colors.errorText}
                 />
                 <Paragraph
                   size={SIZE.xs}
-                  color={colors.secondary.paragraph}
+                  color={colors.icon}
                   style={{ marginLeft: 5 }}
                 >
                   Disabled
@@ -119,7 +119,7 @@ const ReminderItem = React.memo(
             {item.mode === "repeat" && item.recurringMode ? (
               <View
                 style={{
-                  backgroundColor: colors.secondary.background,
+                  backgroundColor: colors.nav,
                   borderRadius: 5,
                   flexDirection: "row",
                   paddingHorizontal: 6,
@@ -131,10 +131,10 @@ const ReminderItem = React.memo(
                   height: 30
                 }}
               >
-                <Icon name="reload" size={SIZE.md} color={colors.primary.accent} />
+                <Icon name="reload" size={SIZE.md} color={colors.accent} />
                 <Paragraph
                   size={SIZE.xs}
-                  color={colors.secondary.paragraph}
+                  color={colors.icon}
                   style={{ marginLeft: 5 }}
                 >
                   {item.recurringMode.slice(0, 1).toUpperCase() +
@@ -160,7 +160,7 @@ const ReminderItem = React.memo(
         </View>
         <IconButton
           testID={notesnook.listitem.menu}
-          color={colors.primary.paragraph}
+          color={colors.pri}
           name="dots-horizontal"
           size={SIZE.xl}
           onPress={() => Properties.present(item, [], isSheet)}

apps/mobile/app/components/list-items/selection-wrapper/back-fill.js

@@ -17,35 +17,37 @@ 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 from "react";
 import { View } from "react-native";
-import useIsSelected from "../../../hooks/use-selected";
 import { useEditorStore } from "../../../stores/use-editor-store";
+import { useThemeStore } from "../../../stores/use-theme-store";
+import { hexToRGBA } from "../../../utils/color-scheme/utils";
 
 export const Filler = ({ item }) => {
-  const { colors } = useThemeColors();
-  const isEditingNote = useEditorStore(
-    (state) => state.currentEditingNote === item.id
+  const colors = useThemeStore((state) => state.colors);
+
+  const currentEditingNote = useEditorStore(
+    (state) => state.currentEditingNote
   );
 
-  const [selected] = useIsSelected(item);
+  const color = "gray";
 
-  return isEditingNote || selected ? (
+  return currentEditingNote === item.id ? (
     <View
       style={{
         position: "absolute",
         width: "110%",
         height: "150%",
-        backgroundColor: colors.selected.background,
+        backgroundColor:
+          currentEditingNote === item.id
+            ? hexToRGBA(colors[color], 0.12)
+            : null,
         borderLeftWidth: 5,
-        borderLeftColor: isEditingNote
-          ? item.color
-            ? colors.static[item.color]
-            : colors.selected.accent
-          : "transparent"
+        borderLeftColor:
+          currentEditingNote === item.id
+            ? colors[item.color || "accent"]
+            : "transparent"
       }}
-      collapsable={false}
-    />
+    ></View>
   ) : null;
 };

apps/mobile/app/components/list-items/selection-wrapper/index.js

@@ -17,10 +17,10 @@ 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, { useRef } from "react";
-import { useIsCompactModeEnabled } from "../../../hooks/use-is-compact-mode-enabled";
 import { useSelectionStore } from "../../../stores/use-selection-store";
+import { useSettingStore } from "../../../stores/use-setting-store";
+import { useThemeStore } from "../../../stores/use-theme-store";
 import { PressableButton } from "../../ui/pressable";
 import { Filler } from "./back-fill";
 import { SelectionIcon } from "./selection";
@@ -29,36 +29,51 @@ const SelectionWrapper = ({
   children,
   item,
   background,
+  onLongPress,
   onPress,
   testID,
   isSheet
 }) => {
   const itemId = useRef(item.id);
-  const { colors, isDark } = useThemeColors();
-  const compactMode = useIsCompactModeEnabled(item);
-
+  const colors = useThemeStore((state) => state.colors);
+  const notebooksListMode = useSettingStore(
+    (state) => state.settings.notebooksListMode
+  );
+  const notesListMode = useSettingStore(
+    (state) => state.settings.notesListMode
+  );
+  const listMode =
+    item.type === "notebook" || item.itemType === "notebook"
+      ? notebooksListMode
+      : notesListMode;
+  const compactMode =
+    (item.type === "notebook" ||
+      item.itemType === "notebook" ||
+      item.itemType === "note" ||
+      item.type === "note") &&
+    listMode === "compact";
   if (item.id !== itemId.current) {
     itemId.current = item.id;
   }
 
-  const onLongPress = () => {
+  const _onLongPress = () => {
     if (!useSelectionStore.getState().selectionMode) {
-      useSelectionStore.setState({
-        selectedItemsList: []
-      });
       useSelectionStore.getState().setSelectionMode(true);
     }
     useSelectionStore.getState().setSelectedItem(item);
   };
 
+  const _onPress = async () => {
+    await onPress();
+  };
   return (
     <PressableButton
-      customColor={isSheet ? colors.primary.hover : "transparent"}
+      customColor={isSheet ? colors.transGray : "transparent"}
       testID={testID}
-      onLongPress={onLongPress}
-      onPress={onPress}
-      customSelectedColor={colors.primary.hover}
-      customAlpha={!isDark ? -0.02 : 0.02}
+      onLongPress={_onLongPress}
+      onPress={_onPress}
+      customSelectedColor={colors.transGray}
+      customAlpha={!colors.night ? -0.02 : 0.02}
       customOpacity={1}
       customStyle={{
         flexDirection: "row",

apps/mobile/app/components/list-items/selection-wrapper/selection.js

@@ -17,21 +17,51 @@ 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 from "react";
+import React, { useEffect, useState } from "react";
 import { View } from "react-native";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
-import { useIsCompactModeEnabled } from "../../../hooks/use-is-compact-mode-enabled";
-import useIsSelected from "../../../hooks/use-selected";
 import { useSelectionStore } from "../../../stores/use-selection-store";
+import { useThemeStore } from "../../../stores/use-theme-store";
 import { SIZE } from "../../../utils/size";
+import { useSettingStore } from "../../../stores/use-setting-store";
 
 export const SelectionIcon = ({ item }) => {
-  const { colors } = useThemeColors();
-  const selectionMode = useSelectionStore((state) => state.selectionMode);
-  const [selected] = useIsSelected(item);
+  const colors = useThemeStore((state) => state.colors);
 
-  const compactMode = useIsCompactModeEnabled(item);
+  const selectionMode = useSelectionStore((state) => state.selectionMode);
+  const selectedItemsList = useSelectionStore(
+    (state) => state.selectedItemsList
+  );
+  const [selected, setSelected] = useState(false);
+  const notebooksListMode = useSettingStore(
+    (state) => state.settings.notebooksListMode
+  );
+  const notesListMode = useSettingStore(
+    (state) => state.settings.notesListMode
+  );
+  const listMode = item.type === "notebook" ? notebooksListMode : notesListMode;
+
+  const compactMode =
+    (item.type === "notebook" || item.type === "note") &&
+    listMode === "compact";
+
+  useEffect(() => {
+    if (selectionMode) {
+      let exists = selectedItemsList.filter(
+        (o) => o.dateCreated === item.dateCreated
+      );
+
+      if (exists[0]) {
+        if (!selected) {
+          setSelected(true);
+        }
+      } else {
+        if (selected) {
+          setSelected(false);
+        }
+      }
+    }
+  }, [selectedItemsList, item.id, selectionMode, item.dateCreated, selected]);
 
   return selectionMode ? (
     <View
@@ -43,14 +73,14 @@ export const SelectionIcon = ({ item }) => {
         marginRight: 10,
         borderWidth: 1,
         borderRadius: 100,
-        borderColor: colors.primary.border
+        borderColor: colors.border
       }}
       pointerEvents="none"
     >
       {selected ? (
         <Icon
           size={compactMode ? SIZE.xl - 2 : SIZE.xl}
-          color={selected ? colors.selected.accent : colors.primary.icon}
+          color={selected ? colors.accent : colors.icon}
           name={"check"}
         />
       ) : null}

apps/mobile/app/components/list-items/tag/index.js

@@ -21,7 +21,7 @@ import React from "react";
 import { View } from "react-native";
 import { notesnook } from "../../../../e2e/test.ids";
 import { TaggedNotes } from "../../../screens/notes/tagged";
-import { useThemeColors } from "@notesnook/theme";
+import { useThemeStore } from "../../../stores/use-theme-store";
 import { SIZE } from "../../../utils/size";
 import { Properties } from "../../properties";
 import { IconButton } from "../../ui/icon-button";
@@ -31,7 +31,7 @@ import Paragraph from "../../ui/typography/paragraph";
 
 const TagItem = React.memo(
   ({ item, index }) => {
-    const { colors, isDark } = useThemeColors();
+    const colors = useThemeStore((state) => state.colors);
     const onPress = () => {
       TaggedNotes.navigate(item, true);
     };
@@ -39,9 +39,9 @@ const TagItem = React.memo(
     return (
       <PressableButton
         onPress={onPress}
-        selectedColor={colors.secondary.background}
+        selectedColor={colors.nav}
         testID={notesnook.ids.tag.get(index)}
-        alpha={!isDark ? -0.02 : 0.02}
+        alpha={!colors.night ? -0.02 : 0.02}
         opacity={1}
         customStyle={{
           paddingHorizontal: 12,
@@ -61,7 +61,7 @@ const TagItem = React.memo(
             <Heading
               size={SIZE.md}
               style={{
-                color: colors.primary.accent
+                color: colors.accent
               }}
             >
               #
@@ -69,7 +69,7 @@ const TagItem = React.memo(
             {item.alias}
           </Heading>
           <Paragraph
-            color={colors.secondary.paragraph}
+            color={colors.icon}
             size={SIZE.xs}
             style={{
               marginTop: 5
@@ -84,7 +84,7 @@ const TagItem = React.memo(
         </View>
 
         <IconButton
-          color={colors.primary.heading}
+          color={colors.heading}
           name="dots-horizontal"
           size={SIZE.xl}
           onPress={() => {

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

@@ -18,21 +18,20 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import React from "react";
-import { Dimensions, View } from "react-native";
+import { View } from "react-native";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { useMessageStore } from "../../stores/use-message-store";
-import { useThemeColors } from "@notesnook/theme";
-import { hexToRGBA } from "../../utils/colors";
+import { useThemeStore } from "../../stores/use-theme-store";
+import { hexToRGBA } from "../../utils/color-scheme/utils";
 import { SIZE } from "../../utils/size";
 import { PressableButton } from "../ui/pressable";
 import Paragraph from "../ui/typography/paragraph";
 
 export const Card = ({ color, warning }) => {
-  const { colors } = useThemeColors();
-  color = color ? color : colors.primary.accent;
+  const colors = useThemeStore((state) => state.colors);
+  color = color ? color : colors.accent;
   const messageBoardState = useMessageStore((state) => state.message);
   const announcement = useMessageStore((state) => state.announcement);
-  const fontScale = Dimensions.get("window").fontScale;
 
   return !messageBoardState.visible || announcement || warning ? null : (
     <View
@@ -45,6 +44,7 @@ export const Card = ({ color, warning }) => {
         type="gray"
         customStyle={{
           paddingVertical: 12,
+          width: "95%",
           flexDirection: "row",
           alignItems: "center",
           justifyContent: "space-between",
@@ -54,18 +54,17 @@ export const Card = ({ color, warning }) => {
         <View
           style={{
             flexDirection: "row",
-            alignItems: "center",
-            flexShrink: 1
+            alignItems: "center"
           }}
         >
           <View
             style={{
-              width: 40 * fontScale,
+              width: 40,
               backgroundColor:
                 messageBoardState.type === "error"
-                  ? hexToRGBA(colors.static.red, 0.15)
+                  ? hexToRGBA(colors.red, 0.15)
                   : hexToRGBA(color, 0.15),
-              height: 40 * fontScale,
+              height: 40,
               borderRadius: 100,
               alignItems: "center",
               justifyContent: "center"
@@ -74,9 +73,8 @@ export const Card = ({ color, warning }) => {
             <Icon
               size={SIZE.lg}
               color={
-                messageBoardState.type === "error" ? colors.error.icon : color
+                messageBoardState.type === "error" ? colors.errorText : color
               }
-              allowFontScaling
               name={messageBoardState.icon}
             />
           </View>
@@ -88,39 +86,35 @@ export const Card = ({ color, warning }) => {
               marginRight: 10
             }}
           >
-            <Paragraph color={colors.secondary.paragraph} size={SIZE.xs}>
+            <Paragraph color={colors.icon} size={SIZE.xs}>
               {messageBoardState.message}
             </Paragraph>
             <Paragraph
               style={{
-                flexWrap: "nowrap",
+                flexWrap: "wrap",
                 flexShrink: 1
               }}
-              color={colors.primary.heading}
+              color={colors.heading}
             >
               {messageBoardState.actionText}
             </Paragraph>
           </View>
         </View>
 
-        {fontScale > 1 ? null : (
-          <View
-            style={{
-              width: 40,
-              height: 40,
-              justifyContent: "center",
-              alignItems: "center"
-            }}
-          >
-            <Icon
-              name="chevron-right"
-              color={
-                messageBoardState.type === "error" ? colors.error.icon : color
-              }
-              size={SIZE.lg}
-            />
-          </View>
-        )}
+        <View
+          style={{
+            width: 40,
+            height: 40,
+            justifyContent: "center",
+            alignItems: "center"
+          }}
+        >
+          <Icon
+            name="chevron-right"
+            color={messageBoardState.type === "error" ? colors.red : color}
+            size={SIZE.lg}
+          />
+        </View>
       </PressableButton>
     </View>
   );

apps/mobile/app/components/list/empty.js

@@ -23,8 +23,8 @@ import { notesnook } from "../../../e2e/test.ids";
 import useGlobalSafeAreaInsets from "../../hooks/use-global-safe-area-insets";
 import { useTip } from "../../services/tip-manager";
 import { useSettingStore } from "../../stores/use-setting-store";
-import { useThemeColors } from "@notesnook/theme";
-import { ColorValues } from "../../utils/colors";
+import { useThemeStore } from "../../stores/use-theme-store";
+import { COLORS_NOTE } from "../../utils/color-scheme";
 import { SIZE } from "../../utils/size";
 import { Tip } from "../tip";
 import { Button } from "../ui/button";
@@ -40,7 +40,7 @@ export const Empty = React.memo(
     type,
     screen
   }) {
-    const { colors } = useThemeColors();
+    const colors = useThemeStore((state) => state.colors);
     const insets = useGlobalSafeAreaInsets();
     const { height } = useWindowDimensions();
     const introCompleted = useSettingStore(
@@ -69,7 +69,7 @@ export const Empty = React.memo(
           <>
             <Tip
               color={
-                ColorValues[headerProps.color?.toLowerCase()]
+                COLORS_NOTE[headerProps.color?.toLowerCase()]
                   ? headerProps.color
                   : "accent"
               }
@@ -87,10 +87,12 @@ export const Empty = React.memo(
                 iconPosition="right"
                 icon="arrow-right"
                 onPress={placeholderData.action}
-                buttonType={{
-                  text:
-                    colors.static[headerProps.color] || colors.primary.accent
-                }}
+                accentColor={
+                  COLORS_NOTE[headerProps.color?.toLowerCase()]
+                    ? headerProps.color
+                    : "accent"
+                }
+                accentText="light"
                 style={{
                   alignSelf: "flex-start",
                   borderRadius: 5,
@@ -116,8 +118,7 @@ export const Empty = React.memo(
               <ActivityIndicator
                 size={SIZE.lg}
                 color={
-                  ColorValues[headerProps.color?.toLowerCase()] ||
-                  colors.primary.accent
+                  COLORS_NOTE[headerProps.color?.toLowerCase()] || colors.accent
                 }
               />
             </View>

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

@@ -24,7 +24,7 @@ import Animated, { FadeInDown } from "react-native-reanimated";
 import { notesnook } from "../../../e2e/test.ids";
 import { eSendEvent } from "../../services/event-manager";
 import Sync from "../../services/sync";
-import { useThemeColors } from "@notesnook/theme";
+import { useThemeStore } from "../../stores/use-theme-store";
 import { db } from "../../common/database";
 import { eScrollEvent } from "../../utils/events";
 import { tabBarRef } from "../../utils/global-refs";
@@ -39,7 +39,6 @@ import { Empty } from "./empty";
 import { getTotalNotes } from "@notesnook/common";
 import { useSettingStore } from "../../stores/use-setting-store";
 import ReminderItem from "../list-items/reminder";
-import { useGroupOptions } from "../../hooks/use-group-options";
 
 const renderItems = {
   note: NoteWrapper,
@@ -54,10 +53,15 @@ const renderItems = {
 const RenderItem = ({ item, index, type, ...restArgs }) => {
   if (!item) return <View />;
   const Item = renderItems[item.itemType || item.type] || View;
+  const groupOptions = db.settings?.getGroupOptions(type);
+  const dateBy =
+    groupOptions.sortBy !== "title" ? groupOptions.sortBy : "dateEdited";
   const totalNotes = getTotalNotes(item);
+
   return (
     <Item
       item={item}
+      dateBy={dateBy}
       index={index}
       type={type}
       totalNotes={totalNotes}
@@ -89,7 +93,7 @@ const List = ({
   handlers,
   ScrollComponent
 }) => {
-  const { colors } = useThemeColors();
+  const colors = useThemeStore((state) => state.colors);
   const scrollRef = useRef();
   const [notesListMode, notebooksListMode] = useSettingStore((state) => [
     state.settings.notesListMode,
@@ -99,13 +103,6 @@ const List = ({
     (type === "notes" && notesListMode === "compact") ||
     type === "notebooks" ||
     notebooksListMode === "compact";
-  const groupType =
-    screen === "Home" ? "home" : screen === "Favorites" ? "favorites" : type;
-
-  const groupOptions = useGroupOptions(groupType);
-
-  const dateBy =
-    groupOptions.sortBy !== "title" ? groupOptions.sortBy : "dateEdited";
 
   const renderItem = React.useCallback(
     ({ item, index }) => (
@@ -114,22 +111,12 @@ const List = ({
         index={index}
         color={headerProps?.color}
         title={headerProps?.heading}
-        dateBy={dateBy}
-        type={groupType}
+        type={screen === "Notes" ? "home" : type}
         screen={screen}
         isSheet={isSheet}
-        groupOptions={groupOptions}
       />
     ),
-    [
-      headerProps?.color,
-      headerProps?.heading,
-      screen,
-      isSheet,
-      dateBy,
-      groupType,
-      groupOptions
-    ]
+    [headerProps?.color, headerProps?.heading, screen, type, isSheet]
   );
 
   const _onRefresh = async () => {
@@ -195,9 +182,9 @@ const List = ({
           keyboardDismissMode="interactive"
           refreshControl={
             <RefreshControl
-              tintColor={colors.primary.accent}
-              colors={[colors.primary.accent]}
-              progressBackgroundColor={colors.secondary.background}
+              tintColor={colors.accent}
+              colors={[colors.accent]}
+              progressBackgroundColor={colors.nav}
               onRefresh={_onRefresh}
               refreshing={false}
             />
@@ -235,7 +222,7 @@ const List = ({
         <JumpToSectionDialog
           screen={screen}
           data={listData}
-          type={screen === "Home" ? "home" : type}
+          type={screen === "Notes" ? "home" : type}
           scrollRef={scrollRef}
         />
       ) : null}

apps/mobile/app/components/list/reorderable-list.tsx

@@ -0,0 +1,169 @@
+/*
+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 React, { useRef, useState } from "react";
+import { FlatList, StyleSheet, View } from "react-native";
+import {
+  DraxList,
+  DraxListProps,
+  DraxListRenderItemContent,
+  DraxProvider
+} from "react-native-drax";
+import { useThemeStore } from "../../stores/use-theme-store";
+import { SIZE } from "../../utils/size";
+import { Button } from "../ui/button";
+import { IconButton } from "../ui/icon-button";
+
+interface ReorderableListProps<T = never>
+  extends Omit<DraxListProps<T>, "renderItem"> {
+  onListOrderChanged: (data: any) => void;
+  renderDraggableItem: DraxListRenderItemContent<T>;
+  initialListData: T[];
+}
+
+function ReorderableList<T>({
+  renderDraggableItem,
+  initialListData,
+  onListOrderChanged,
+  ...restProps
+}: ReorderableListProps<T>) {
+  const colors = useThemeStore((state) => state.colors);
+  const [data, setData] = useState(initialListData || []);
+  const [dragging, setDragging] = useState(false);
+  const listRef = useRef<FlatList | null>(null);
+  return (
+    <DraxProvider>
+      <View style={styles.container}>
+        <DraxList
+          {...restProps}
+          ref={listRef}
+          data={data}
+          renderItemContent={(info, props) =>
+            !(info.item as any).visible && !dragging ? null : (
+              <View
+                style={{
+                  flexDirection: "row",
+                  opacity: !(info.item as any).visible ? 0.4 : 1
+                }}
+              >
+                <View
+                  style={{
+                    flexGrow: 1
+                  }}
+                >
+                  {renderDraggableItem(info, props)}
+                </View>
+                {dragging && !props.hover ? (
+                  <IconButton
+                    name={(info.item as any).visible ? "minus" : "plus"}
+                    color={colors.icon}
+                    size={SIZE.lg}
+                    top={0}
+                    bottom={0}
+                    onPress={() => {
+                      const newData = data.slice();
+                      newData.splice(info.index, 1);
+                      if ((info.item as any).visible) {
+                        newData.push({
+                          ...info.item,
+                          visible: false
+                        });
+                      } else {
+                        newData.push({
+                          ...info.item,
+                          visible: true
+                        });
+                      }
+                      onListOrderChanged?.(newData);
+                      setData(newData);
+                    }}
+                  />
+                ) : null}
+              </View>
+            )
+          }
+          itemStyles={{
+            hoverDragReleasedStyle: {
+              display: "none"
+            },
+            dragReleasedStyle: {
+              opacity: 1
+            }
+          }}
+          longPressDelay={500}
+          onItemDragStart={() => setDragging(true)}
+          lockItemDragsToMainAxis
+          onItemReorder={({ fromIndex, fromItem, toIndex, toItem }) => {
+            const newData = data.slice();
+            newData.splice(toIndex, 0, newData.splice(fromIndex, 1)[0]);
+            onListOrderChanged?.(newData);
+            setData(newData);
+          }}
+          keyExtractor={(item) => (item as any).id}
+          ListHeaderComponent={() =>
+            !dragging ? null : (
+              <View
+                style={{
+                  flexDirection: "row",
+                  borderRadius: 5,
+                  marginBottom: 12,
+                  height: 30,
+                  justifyContent: "space-between",
+                  alignItems: "center"
+                }}
+              >
+                <IconButton
+                  name="reorder-horizontal"
+                  size={25}
+                  customStyle={{
+                    width: 30,
+                    height: 30,
+                    marginRight: 5
+                  }}
+                  color={colors.icon}
+                />
+
+                <Button
+                  style={{
+                    borderRadius: 100
+                  }}
+                  type="grayAccent"
+                  title="Done"
+                  fontSize={SIZE.sm}
+                  height={27}
+                  onPress={() => {
+                    setDragging(false);
+                  }}
+                />
+              </View>
+            )
+          }
+        />
+      </View>
+    </DraxProvider>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1
+  }
+});
+
+export default ReorderableList;

apps/mobile/app/components/merge-conflicts/index.js

@@ -33,7 +33,7 @@ import {
 } from "../../services/event-manager";
 import Navigation from "../../services/navigation";
 import Sync from "../../services/sync";
-import { useThemeColors } from "@notesnook/theme";
+import { useThemeStore } from "../../stores/use-theme-store";
 import { eOnLoadNote, eShowMergeDialog } from "../../utils/events";
 import { SIZE } from "../../utils/size";
 import { sleep } from "../../utils/time";
@@ -49,7 +49,7 @@ import { useSettingStore } from "../../stores/use-setting-store";
 import { getFormattedDate } from "@notesnook/common";
 
 const MergeConflicts = () => {
-  const { colors } = useThemeColors();
+  const colors = useThemeStore((state) => state.colors);
   const [visible, setVisible] = useState(false);
   const [keep, setKeep] = useState(null);
   const [copy, setCopy] = useState(null);
@@ -152,20 +152,16 @@ const MergeConflicts = () => {
           }}
         >
           {back && (
-            <IconButton
-              onPress={close}
-              color={colors.primary.paragraph}
-              name="arrow-left"
-            />
+            <IconButton onPress={close} color={colors.pri} name="arrow-left" />
           )}
           <Paragraph
             style={{ flexWrap: "wrap" }}
-            color={colors.secondary.paragraph}
+            color={colors.icon}
             size={SIZE.xs}
           >
             <Text
               style={{
-                color: isCurrent ? colors.primary.accent : colors.static.red,
+                color: isCurrent ? colors.accent : colors.red,
                 fontWeight: "bold"
               }}
             >
@@ -204,17 +200,15 @@ const MergeConflicts = () => {
             <Button
               title="Discard"
               type="accent"
-              buttonType={{
-                color: colors.static.red,
-                text: colors.static.white
-              }}
+              accentColor="red"
               height={30}
               style={{
                 borderRadius: 100,
                 paddingHorizontal: 12
               }}
               fontSize={SIZE.xs}
-              color={colors.error.paragraph}
+              accentText="light"
+              color={colors.errorText}
               onPress={() => {
                 setDialogVisible(true);
               }}
@@ -245,17 +239,13 @@ const MergeConflicts = () => {
   };
 
   return !visible ? null : (
-    <BaseDialog
+    <Modal
       statusBarTranslucent
       transparent={false}
       animationType="slide"
-      animated={false}
-      bounce={false}
       onRequestClose={() => {
         close();
       }}
-      centered={false}
-      background={colors?.primary.background}
       supportedOrientations={[
         "portrait",
         "portrait-upside-down",
@@ -267,7 +257,7 @@ const MergeConflicts = () => {
     >
       <SafeAreaView
         style={{
-          backgroundColor: colors.primary.background,
+          backgroundColor: colors.bg,
           paddingTop: insets.top
         }}
       >
@@ -309,9 +299,9 @@ const MergeConflicts = () => {
           <Animated.View
             style={{
               height: height / 2 - (50 + insets.top / 2),
-              backgroundColor: colors.primary.background,
+              backgroundColor: colors.bg,
               borderBottomWidth: 1,
-              borderBottomColor: colors.secondary.background
+              borderBottomColor: colors.nav
             }}
           >
             <Editor
@@ -345,7 +335,7 @@ const MergeConflicts = () => {
           <Animated.View
             style={{
               height: height / 2 - (50 + insets.top / 2),
-              backgroundColor: colors.primary.background,
+              backgroundColor: colors.bg,
               borderRadius: 10
             }}
           >
@@ -367,7 +357,7 @@ const MergeConflicts = () => {
           </Animated.View>
         </View>
       </SafeAreaView>
-    </BaseDialog>
+    </Modal>
   );
 };