editor: adjust font size and padding of inline code

Signed-off-by: 01zulfi <85733202+01zulfi@users.noreply.github.com>

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

@@ -7,7 +7,7 @@ runs:
     - name: Setup Node
       uses: actions/setup-node@v4
       with:
-        node-version: 20.x
+        node-version: 22.x
         cache: "npm"
         cache-dependency-path: |
           package-lock.json

.github/workflows/android.e2e.yml

@@ -47,6 +47,11 @@ jobs:
       - name: Install Detox CLI
         run: npm install detox-cli --global
 
+      - name: Check for typescript errors
+        run: |
+          cd apps/mobile
+          npx tsc --noEmit
+
       - name: Detox build
         run: |
           yarn build:android

.github/workflows/android.publish.internal.yml

@@ -73,6 +73,12 @@ jobs:
       - name: CCache Stats Before Build
         run: ccache -sv
 
+      - name: Check for typescript errors
+        run: |
+          npm run tx mobile:build
+          cd apps/mobile
+          npx tsc --noEmit
+
       - name: Build unsigned app bundle
         run: yarn release:android:bundle
 

.github/workflows/android.publish.yml

@@ -73,6 +73,12 @@ jobs:
       - name: CCache Stats Before Build
         run: ccache -sv
 
+      - name: Check for typescript errors
+        run: |
+          npm run tx mobile:build
+          cd apps/mobile
+          npx tsc --noEmit
+
       - name: Build unsigned app bundle
         run: yarn release:android:bundle
 

.github/workflows/core.tests.yml

@@ -9,7 +9,13 @@ on:
       - "packages/core/**"
       # re-run workflow if workflow file changes
       - ".github/workflows/core.tests.yml"
-  pull_request:
+  pull_request_target:
+    branches:
+      - "master"
+    paths:
+      - "packages/core/**"
+      # re-run workflow if workflow file changes
+      - ".github/workflows/core.tests.yml"
     types:
       - "ready_for_review"
       - "opened"
@@ -17,11 +23,21 @@ on:
       - "reopened"
 
 jobs:
-  test:
-    runs-on: ubuntu-22.04
+  authorize:
+    environment: ${{ github.event_name == 'pull_request_target' &&
+      github.event.pull_request.head.repo.full_name != github.repository &&
+      'external' || 'internal' }}
+    runs-on: ubuntu-latest
+    steps:
+      - run: echo true
 
+  test:
+    needs: authorize
+    runs-on: ubuntu-22.04
     steps:
       - uses: actions/checkout@v4
+        with:
+          ref: ${{ github.event.pull_request.head.sha || github.ref }}
 
       - name: Setup Node
         uses: ./.github/actions/setup-node-with-cache
@@ -36,7 +52,6 @@ jobs:
           echo "USER_PASSWORD=${{ secrets.USER_PASSWORD }}" >> $GITHUB_ENV
           echo "USER_TOTP_SECRET=${{ secrets.USER_TOTP_SECRET }}" >> $GITHUB_ENV
           echo "USER_HASHED_PASSWORD=${{ secrets.USER_HASHED_PASSWORD }}" >> $GITHUB_ENV
-          echo "NX_CLOUD_ACCESS_TOKEN=${{ secrets.NX_CLOUD_ACCESS_TOKEN }}" >> $GITHUB_ENV
 
       - name: Run all @notesnook/core tests
-        run: npx nx test:e2e @notesnook/core
+        run: npm run tx @notesnook/core:test:e2e

.github/workflows/desktop.publish.yml

@@ -65,17 +65,13 @@ jobs:
           npm i --cpu x64 sqlite-better-trigram
         working-directory: ./apps/desktop
 
-      - name: Setup environment
-        run: |
-          echo "NX_CLOUD_ACCESS_TOKEN=${{ secrets.NX_CLOUD_ACCESS_TOKEN }}" >> $GITHUB_ENV
-
       - name: Generate desktop build (stable)
         if: ${{ inputs.release-track == 'stable' }}
-        run: npx nx build:desktop @notesnook/web
+        run: npm run tx @notesnook/web:build:desktop
 
       - name: Generate desktop build (beta)
         if: ${{ inputs.release-track == 'beta' }}
-        run: BETA=true npx nx build:desktop @notesnook/web
+        run: BETA=true npm run tx @notesnook/web:build:desktop
 
       - name: Build desktop bundle
         working-directory: ./apps/desktop
@@ -199,9 +195,9 @@ jobs:
           CSC_LINK: ${{ secrets.mac_certs }}
           CSC_KEY_PASSWORD: ${{ secrets.mac_certs_password }}
         run: |
-          npx nx run release --project @notesnook/desktop -- --variant=mas
+          npm run tx @notesnook/desktop:release -- --variant=mas
+          cd apps/desktop
           yarn electron-builder --config=electron-builder.config.js --mac mas --universal -p never
-        working-directory: ./apps/desktop
 
       - name: Build zip and dmg
         env:
@@ -212,13 +208,13 @@ jobs:
           APPLE_API_KEY_ID: ${{ secrets.api_key_id }}
           APPLE_API_ISSUER: ${{ secrets.api_key_issuer_id }}
         run: |
-          npx nx run release --project @notesnook/desktop
+          npm run tx @notesnook/desktop:release
+          cd apps/desktop
           if [ ${{ inputs.publish-github }} == true ]; then
             yarn electron-builder --config=electron-builder.config.js --mac zip dmg --arm64 --x64 -p always
           else
             yarn electron-builder --config=electron-builder.config.js --mac zip dmg --arm64 --x64 -p never
           fi
-        working-directory: ./apps/desktop
 
       - name: Deploy to Testflight
         if: inputs.publish-apple && steps.appstore.outputs.app-version-latest != steps.app_metadata.outputs.app_version
@@ -271,8 +267,7 @@ jobs:
         working-directory: ./apps/desktop
 
       - name: Build Electron wrapper
-        run: npx nx run release --project @notesnook/desktop
-        working-directory: ./apps/desktop
+        run: npm run tx @notesnook/desktop:release
 
       - name: Build snap
         if: inputs.publish-snap
@@ -339,8 +334,7 @@ jobs:
         working-directory: ./apps/desktop
 
       - name: Build Electron wrapper
-        run: npx nx run release --project @notesnook/desktop
-        working-directory: ./apps/desktop
+        run: npm run tx @notesnook/desktop:release
 
       # - name: Build snap
       #   if: inputs.publish-snap
@@ -402,10 +396,13 @@ jobs:
         run: |
           npm i --cpu arm64 sqlite-better-trigram
           npm i --cpu x64 sqlite-better-trigram
+
+          npm i --cpu arm64 sqlite3-fts5-html
+          npm i --cpu x64 sqlite3-fts5-html
         working-directory: ./apps/desktop
 
       - name: Build
-        run: npx nx run release --project @notesnook/desktop
+        run: node scripts/execute.mjs @notesnook/desktop:release
 
       - name: Publish
         env:

.github/workflows/desktop.tests.yml

@@ -6,10 +6,16 @@ on:
     branches:
       - "master"
     paths:
-      - "app/desktop/**"
+      - "apps/desktop/**"
       # re-run workflow if workflow file changes
       - ".github/workflows/desktop.tests.yml"
   pull_request:
+    branches:
+      - "master"
+    paths:
+      - "apps/desktop/**"
+      # re-run workflow if workflow file changes
+      - ".github/workflows/desktop.tests.yml"
 
 jobs:
   build:
@@ -27,12 +33,8 @@ jobs:
           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
-
       - name: Generate desktop build
-        run: npx nx build:desktop @notesnook/web
+        run: npm run tx @notesnook/web:build:desktop
 
       - name: Archive build artifact
         uses: actions/upload-artifact@v4
@@ -64,8 +66,7 @@ jobs:
           npm run bootstrap -- --scope=desktop
 
       - name: Build Electron wrapper
-        run: npx nx run release --project @notesnook/desktop
-        working-directory: ./apps/desktop
+        run: npm run tx @notesnook/desktop:release
 
       - name: Build app
         run: |
@@ -108,8 +109,7 @@ jobs:
           npm run bootstrap -- --scope=desktop
 
       - name: Build Electron wrapper
-        run: npx nx run release --project @notesnook/desktop
-        working-directory: ./apps/desktop
+        run: npm run tx @notesnook/desktop:release
 
       - name: Build app
         run: |
@@ -158,8 +158,7 @@ jobs:
         working-directory: ./apps/desktop
 
       - name: Build Electron wrapper
-        run: npx nx run release --project @notesnook/desktop
-        working-directory: ./apps/desktop
+        run: npm run tx @notesnook/desktop:release
 
       - name: Build app
         run: |
@@ -205,11 +204,13 @@ jobs:
         run: |
           npm i --cpu arm64 sqlite-better-trigram
           npm i --cpu x64 sqlite-better-trigram
+
+          npm i --cpu arm64 sqlite3-fts5-html
+          npm i --cpu x64 sqlite3-fts5-html
         working-directory: ./apps/desktop
 
       - name: Build Electron wrapper
-        run: npx nx run release --project @notesnook/desktop
-        working-directory: ./apps/desktop
+        run: node scripts/execute.mjs @notesnook/desktop:release
 
       - name: Build app
         run: |

.github/workflows/editor.tests.yml

@@ -10,6 +10,12 @@ on:
       # re-run workflow if workflow file changes
       - ".github/workflows/editor.tests.yml"
   pull_request:
+    branches:
+      - "master"
+    paths:
+      - "packages/editor/**"
+      # re-run workflow if workflow file changes
+      - ".github/workflows/editor.tests.yml"
     types:
       - "ready_for_review"
       - "opened"
@@ -32,12 +38,8 @@ jobs:
           npm ci --ignore-scripts --prefer-offline --no-audit
           npm run bootstrap -- --scope=editor
 
-      - name: Setup environment
-        run: |
-          echo "NX_CLOUD_ACCESS_TOKEN=${{ secrets.NX_CLOUD_ACCESS_TOKEN }}" >> $GITHUB_ENV
-
       - name: Build editor
-        run: npx nx build @notesnook/editor
+        run: npm run tx @notesnook/editor:build
 
       - name: Run all @notesnook/editor tests
-        run: npx nx test @notesnook/editor
+        run: npm run tx @notesnook/editor:test

.github/workflows/ios.publish.yml

@@ -25,7 +25,7 @@ jobs:
           npm run bootstrap -- --scope=mobile
 
       - name: Build packages
-        run: npx nx run @notesnook/mobile:build
+        run: npm run tx @notesnook/mobile:build
 
       - name: ccache
         uses: hendrikmuhs/ccache-action@v1.2.11
@@ -64,6 +64,12 @@ jobs:
           bundle install
           RCT_NEW_ARCH_ENABLED=0 bundle exec pod install
 
+      - name: Check for typescript errors
+        run: |
+          npm run tx mobile:build
+          cd apps/mobile
+          npx tsc --noEmit
+
       - name: CCache Stats Before Build
         run: ccache -sv
 

.github/workflows/monograph.publish.yml

@@ -39,13 +39,13 @@ jobs:
           echo ::set-output name=app_version::$(cat package.json | jq -r .version)
 
       - name: Generate build
-        run: npx nx build @notesnook/monograph
+        run: npm run tx @notesnook/monograph:build
 
       # Setup Buildx
       - name: Docker Setup Buildx
         uses: docker/setup-buildx-action@v3
         with:
-          platforms: linux/amd64,linux/arm64,linux/arm/v7,linux/arm/v8
+          platforms: linux/amd64,linux/arm64
 
       - name: Log in to Docker Hub
         uses: docker/login-action@v3
@@ -77,7 +77,7 @@ jobs:
           context: apps/monograph
           file: apps/monograph/Dockerfile
           push: true
-          platforms: linux/amd64,linux/arm64,linux/arm/v7,linux/arm/v8
+          platforms: linux/amd64,linux/arm64
           tags: streetwriters/monograph:${{ steps.package_metadata.outputs.app_version }},streetwriters/monograph:latest
           cache-from: streetwriters/monograph:latest
 

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

@@ -20,7 +20,6 @@ jobs:
 
       - 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
 

.github/workflows/vericrypt.publish.yml

@@ -20,7 +20,6 @@ jobs:
 
       - 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
 

.github/workflows/web.benchmarks.yml

@@ -27,10 +27,6 @@ jobs:
           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
-
       - name: Build
         run: npm run build:web
 

.github/workflows/web.publish.yml

@@ -30,7 +30,6 @@ jobs:
 
       - 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
 

.github/workflows/web.tests.yml

@@ -9,7 +9,13 @@ on:
       - "apps/web/**"
       # re-run workflow if workflow file changes
       - ".github/workflows/web.tests.yml"
-  pull_request:
+  pull_request_target:
+    branches:
+      - "master"
+    paths:
+      - "apps/web/**"
+      # re-run workflow if workflow file changes
+      - ".github/workflows/web.tests.yml"
     types:
       - "ready_for_review"
       - "opened"
@@ -17,12 +23,23 @@ on:
       - "reopened"
 
 jobs:
+  authorize:
+    environment: ${{ github.event_name == 'pull_request_target' &&
+      github.event.pull_request.head.repo.full_name != github.repository &&
+      'external' || 'internal' }}
+    runs-on: ubuntu-latest
+    steps:
+      - run: echo true
+
   build:
+    needs: authorize
     name: Build
     runs-on: ubuntu-22.04
     steps:
       - name: Checkout
         uses: actions/checkout@v4
+        with:
+          ref: ${{ github.event.pull_request.head.sha || github.ref }}
 
       - name: Setup Node
         uses: ./.github/actions/setup-node-with-cache
@@ -32,10 +49,6 @@ jobs:
           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
-
       - name: Generate test build
         run: npm run build:test:web
 
@@ -54,6 +67,8 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v4
+        with:
+          ref: ${{ github.event.pull_request.head.sha || github.ref }}
 
       - name: Download build
         uses: actions/download-artifact@v4

.gitignore

@@ -12,3 +12,4 @@ site
 node_modules.backup
 .nx
 /*.patch
+.taskcache

README.md

@@ -27,7 +27,6 @@ Notesnook is built using the following technologies:
 3. React Native — For mobile apps we are using React Native
 4. Electron — For desktop app
 5. NPM — listed here because we **don't** use Yarn or PNPM or XYZ across any of our projects.
-6. Nx — maintaining monorepos is hard but Nx makes it easier.
 
 > **Note: Each project in the monorepo contains its own architecture details which you can refer to.**
 

apps/desktop/README.md

@@ -24,7 +24,7 @@ Requirements:
 
 Before you can do anything, you'll need to [install Node.js](https://nodejs.org/en/download/) v16 or later on your system.
 
-Once you have completed the setup, the first step is to `clone` the monorepo:
+1. `clone` the monorepo:
 
 ```bash
 git clone https://github.com/streetwriters/notesnook.git
@@ -33,19 +33,28 @@ git clone https://github.com/streetwriters/notesnook.git
 cd notesnook
 ```
 
-Once you are inside the `./notesnook` directory, run the preparation step:
+2. Install dependencies:
 
 ```bash
 # this might take a while to complete
 npm install
 ```
 
-Now you can finally start the desktop app for development:
+3. Run the webapp for desktop environment:
+
+```bash
+cd apps/web
+npm run start:desktop
+```
+
+4. In a separate terminal session, run the desktop app from the root of the project:
 
 ```bash
 npm run start:desktop
 ```
 
+### Release mode
+
 To run the app in release mode:
 
 ```bash

apps/desktop/__tests__/auto-updates.test.ts

@@ -17,230 +17,226 @@ 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 { test } from "vitest";
-import { harness } from "./utils.js";
+import { testCleanup, test } from "./test-override.js";
 import { writeFile } from "fs/promises";
 import { Page } from "playwright";
 import { gt, lt } from "semver";
+import { describe } from "vitest";
 
-test("update starts downloading if version is outdated", async (t) => {
-  await harness(
-    t,
-    async ({ page }) => {
-      await page.waitForSelector("#authForm");
+test("update starts downloading if version is outdated", async ({
+  ctx: { page },
+  expect,
+  onTestFinished
+}) => {
+  onTestFinished(testCleanup);
 
-      t.expect(
-        await page.getByRole("button", { name: "Create account" }).isVisible()
-      ).toBe(true);
+  await page.waitForSelector("#authForm");
+  expect(
+    await page.getByRole("button", { name: "Create account" }).isVisible()
+  ).toBe(true);
 
-      await page
-        .getByRole("button", { name: "Skip & go directly to the app" })
-        .click();
+  await page
+    .getByRole("button", { name: "Skip & go directly to the app" })
+    .click();
 
-      await skipDialog(page);
+  await skipDialog(page);
 
-      await page.waitForSelector(".ProseMirror");
+  await page.waitForSelector(".ProseMirror");
 
-      await page
-        .locator(".theme-scope-statusBar")
-        .getByRole("button", { name: /updating/i })
-        .waitFor({ state: "attached" });
-    },
-    { version: "3.0.0" }
-  );
+  await page
+    .locator(".theme-scope-statusBar")
+    .getByRole("button", { name: /updating/i })
+    .waitFor({ state: "attached" });
 });
 
-test("update is only shown if version is outdated and auto updates are disabled", async (t) => {
-  await harness(
-    t,
-    async (ctx) => {
-      await ctx.app.close();
-      await writeFile(
-        ctx.configPath,
-        JSON.stringify({
-          automaticUpdates: false
-        })
-      );
+test("update is only shown if version is outdated and auto updates are disabled", async ({
+  ctx,
+  expect,
+  onTestFinished
+}) => {
+  onTestFinished(testCleanup);
 
-      await ctx.relaunch();
+  await ctx.app.close();
+  await writeFile(
+    ctx.configPath,
+    JSON.stringify({
+      automaticUpdates: false
+    })
+  );
 
-      const { page } = ctx;
+  await ctx.relaunch();
 
-      await page.waitForSelector("#authForm");
+  const { page } = ctx;
 
-      t.expect(
-        await page.getByRole("button", { name: "Create account" }).isVisible()
-      ).toBe(true);
+  await page.waitForSelector("#authForm");
 
-      await page
-        .getByRole("button", { name: "Skip & go directly to the app" })
-        .click();
+  expect(
+    await page.getByRole("button", { name: "Create account" }).isVisible()
+  ).toBe(true);
 
-      await skipDialog(page);
+  await page
+    .getByRole("button", { name: "Skip & go directly to the app" })
+    .click();
 
-      await page.waitForSelector(".ProseMirror");
+  await skipDialog(page);
 
+  await page.waitForSelector(".ProseMirror");
+
+  await page
+    .locator(".theme-scope-statusBar")
+    .getByRole("button", { name: /available/i })
+    .waitFor({ state: "attached" });
+});
+
+describe("update to stable if it is newer", () => {
+  test.scoped({ options: { version: "3.0.0-beta.0" } });
+  test("test", async ({ ctx, expect, onTestFinished }) => {
+    onTestFinished(testCleanup);
+
+    await ctx.app.close();
+    await writeFile(
+      ctx.configPath,
+      JSON.stringify({
+        automaticUpdates: false,
+        releaseTrack: "beta"
+      })
+    );
+
+    await ctx.relaunch();
+
+    const { page } = ctx;
+
+    await page.waitForSelector("#authForm");
+
+    expect(
+      await page.getByRole("button", { name: "Create account" }).isVisible()
+    ).toBe(true);
+
+    await page
+      .getByRole("button", { name: "Skip & go directly to the app" })
+      .click();
+
+    await skipDialog(page);
+
+    await page.waitForSelector(".ProseMirror");
+
+    const updateButton = page
+      .locator(".theme-scope-statusBar")
+      .getByRole("button", { name: /available/i });
+    await updateButton.waitFor({ state: "visible" });
+    const content = await updateButton.textContent();
+    const version = content?.split(" ")?.[0] || "";
+    expect(gt(version, "3.0.0-beta.0")).toBe(true);
+  });
+});
+
+describe("update is not available if it latest stable version is older", () => {
+  test.scoped({ options: { version: "99.0.0-beta.0" } });
+  test("test", async ({ ctx, expect, onTestFinished }) => {
+    onTestFinished(testCleanup);
+
+    await ctx.app.close();
+    await writeFile(
+      ctx.configPath,
+      JSON.stringify({
+        automaticUpdates: false,
+        releaseTrack: "beta"
+      })
+    );
+
+    await ctx.relaunch();
+
+    const { page } = ctx;
+
+    await page.waitForSelector("#authForm");
+
+    expect(
+      await page.getByRole("button", { name: "Create account" }).isVisible()
+    ).toBe(true);
+
+    await page
+      .getByRole("button", { name: "Skip & go directly to the app" })
+      .click();
+
+    await skipDialog(page);
+
+    await page.waitForSelector(".ProseMirror");
+
+    await page
+      .locator(".theme-scope-statusBar")
+      .getByRole("button", { name: /checking for updates/i })
+      .waitFor({ state: "hidden" });
+
+    expect(
       await page
         .locator(".theme-scope-statusBar")
         .getByRole("button", { name: /available/i })
-        .waitFor({ state: "attached" });
-    },
-    { version: "3.0.0" }
-  );
+        .isHidden()
+    ).toBe(true);
+  });
 });
 
-test("update to stable if it is newer", async (t) => {
-  await harness(
-    t,
-    async (ctx) => {
-      await ctx.app.close();
-      await writeFile(
-        ctx.configPath,
-        JSON.stringify({
-          automaticUpdates: false,
-          releaseTrack: "beta"
-        })
-      );
+describe("downgrade to stable on switching to stable release track", () => {
+  test.scoped({ options: { version: "99.0.0-beta.0" } });
+  test("test", async ({ ctx, expect, onTestFinished }) => {
+    onTestFinished(testCleanup);
 
-      await ctx.relaunch();
+    await ctx.app.close();
+    await writeFile(
+      ctx.configPath,
+      JSON.stringify({
+        automaticUpdates: false,
+        releaseTrack: "stable"
+      })
+    );
 
-      const { page } = ctx;
+    await ctx.relaunch();
 
-      await page.waitForSelector("#authForm");
+    const { page } = ctx;
 
-      t.expect(
-        await page.getByRole("button", { name: "Create account" }).isVisible()
-      ).toBe(true);
+    await page.waitForSelector("#authForm");
 
-      await page
-        .getByRole("button", { name: "Skip & go directly to the app" })
-        .click();
+    expect(
+      await page.getByRole("button", { name: "Create account" }).isVisible()
+    ).toBe(true);
 
-      await skipDialog(page);
+    await page
+      .getByRole("button", { name: "Skip & go directly to the app" })
+      .click();
 
-      await page.waitForSelector(".ProseMirror");
+    await skipDialog(page);
 
-      const updateButton = page
-        .locator(".theme-scope-statusBar")
-        .getByRole("button", { name: /available/i });
-      await updateButton.waitFor({ state: "visible" });
-      const content = await updateButton.textContent();
-      const version = content?.split(" ")?.[0] || "";
-      t.expect(gt(version, "3.0.0-beta.0")).toBe(true);
-    },
-    { version: "3.0.0-beta.0" }
-  );
-});
+    await page.waitForSelector(".ProseMirror");
 
-test("update is not available if it latest stable version is older", async (t) => {
-  await harness(
-    t,
-    async (ctx) => {
-      await ctx.app.close();
-      await writeFile(
-        ctx.configPath,
-        JSON.stringify({
-          automaticUpdates: false,
-          releaseTrack: "beta"
-        })
-      );
+    await page
+      .locator(".theme-scope-statusBar")
+      .getByRole("button", { name: /checking for updates/i })
+      .waitFor({ state: "hidden" });
 
-      await ctx.relaunch();
-
-      const { page } = ctx;
-
-      await page.waitForSelector("#authForm");
-
-      t.expect(
-        await page.getByRole("button", { name: "Create account" }).isVisible()
-      ).toBe(true);
-
-      await page
-        .getByRole("button", { name: "Skip & go directly to the app" })
-        .click();
-
-      await skipDialog(page);
-
-      await page.waitForSelector(".ProseMirror");
-
-      await page
-        .locator(".theme-scope-statusBar")
-        .getByRole("button", { name: /checking for updates/i })
-        .waitFor({ state: "hidden" });
-
-      t.expect(
-        await page
-          .locator(".theme-scope-statusBar")
-          .getByRole("button", { name: /available/i })
-          .isHidden()
-      ).toBe(true);
-    },
-    { version: "99.0.0-beta.0" }
-  );
-});
-
-test("downgrade to stable on switching to stable release track", async (t) => {
-  await harness(
-    t,
-    async (ctx) => {
-      await ctx.app.close();
-      await writeFile(
-        ctx.configPath,
-        JSON.stringify({
-          automaticUpdates: false,
-          releaseTrack: "stable"
-        })
-      );
-
-      await ctx.relaunch();
-
-      const { page } = ctx;
-
-      await page.waitForSelector("#authForm");
-
-      t.expect(
-        await page.getByRole("button", { name: "Create account" }).isVisible()
-      ).toBe(true);
-
-      await page
-        .getByRole("button", { name: "Skip & go directly to the app" })
-        .click();
-
-      await skipDialog(page);
-
-      await page.waitForSelector(".ProseMirror");
-
-      await page
-        .locator(".theme-scope-statusBar")
-        .getByRole("button", { name: /checking for updates/i })
-        .waitFor({ state: "hidden" });
-
-      const updateButton = page
-        .locator(".theme-scope-statusBar")
-        .getByRole("button", { name: /available/i });
-      await updateButton.waitFor({ state: "visible" });
-      const content = await updateButton.textContent();
-      const version = content?.split(" ")?.[0] || "";
-      t.expect(lt(version, "99.0.0-beta.0")).toBe(true);
-    },
-    { version: "99.0.0-beta.0" }
-  );
+    const updateButton = page
+      .locator(".theme-scope-statusBar")
+      .getByRole("button", { name: /available/i });
+    await updateButton.waitFor({ state: "visible" });
+    const content = await updateButton.textContent();
+    const version = content?.split(" ")?.[0] || "";
+    expect(lt(version, "99.0.0-beta.0")).toBe(true);
+  });
 });
 
 async function skipDialog(page: Page) {
-  await page
-    .waitForSelector(".ReactModal__Content", {
-      timeout: 1000
-    })
-    .catch(() => {})
-    .then(async () => {
-      const positiveButton = page.locator(
-        "button[data-role='positive-button']"
-      );
-      const negativeButton = page.locator(
-        "button[data-role='negative-button']"
-      );
-      if (await positiveButton.isVisible()) await positiveButton.click();
-      else if (await negativeButton.isVisible()) await negativeButton.click();
-    });
+  try {
+    const dialog = page.locator(".ReactModal__Content");
+    const positiveButton = dialog.locator(
+      "button[data-role='positive-button']"
+    );
+    const negativeButton = dialog.locator(
+      "button[data-role='negative-button']"
+    );
+    if (await positiveButton.isVisible())
+      await positiveButton.click({ timeout: 1000 });
+    else if (await negativeButton.isVisible())
+      await negativeButton.click({ timeout: 1000 });
+  } catch (e) {
+    // ignore error
+  }
 }

apps/desktop/__tests__/global-setup.ts

@@ -17,15 +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/>.
 */
 
-const path = require("path");
-module.exports = {
-  entry: ["./dist/index.global.js"],
-  mode: "production",
-  output: {
-    filename: "clipper.bundle.js",
-    path: path.resolve(
-      __dirname,
-      "../../apps/mobile/native/ios/extension.bundle"
-    )
-  }
-};
+import { buildApp } from "./utils";
+
+export default async function setup() {
+  await buildApp();
+}

apps/desktop/__tests__/launch.test.ts

@@ -17,22 +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 { test } from "vitest";
-import { harness } from "./utils.js";
-import assert from "assert";
+import { testCleanup, test } from "./test-override.js";
 
-test("make sure app loads", async (t) => {
-  await harness(t, async ({ page }) => {
-    await page.waitForSelector("#authForm");
+test("make sure app loads", async ({
+  ctx: { page },
+  expect,
+  onTestFinished
+}) => {
+  onTestFinished(testCleanup);
 
-    assert.ok(
-      await page.getByRole("button", { name: "Create account" }).isVisible()
-    );
+  await page.waitForSelector("#authForm");
 
-    await page
-      .getByRole("button", { name: "Skip & go directly to the app" })
-      .click();
+  expect(
+    await page.getByRole("button", { name: "Create account" }).isVisible()
+  ).toBe(true);
 
-    await page.waitForSelector(".ProseMirror");
-  });
+  await page
+    .getByRole("button", { name: "Skip & go directly to the app" })
+    .click();
+
+  await page.waitForSelector(".ProseMirror");
 });

apps/desktop/__tests__/test-override.ts

@@ -0,0 +1,64 @@
+/*
+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 { test as vitestTest, TestContext } from "vitest";
+import { buildAndLaunchApp, Fixtures, TestOptions } from "./utils";
+import { mkdir, rm } from "fs/promises";
+import path from "path";
+import slugify from "slugify";
+
+export const test = vitestTest.extend<Fixtures>({
+  options: { version: "3.0.0" } as TestOptions,
+  ctx: async ({ options }, use) => {
+    const ctx = await buildAndLaunchApp(options);
+    await use(ctx);
+  }
+});
+
+export async function testCleanup(context: TestContext) {
+  const ctx = (context.task.context as unknown as Fixtures).ctx;
+  if (context.task.result?.state === "fail") {
+    await mkdir("test-results", { recursive: true });
+    await ctx.page.screenshot({
+      path: path.join(
+        "test-results",
+        `${slugify(context.task.name)}-${process.platform}-${
+          process.arch
+        }-error.png`
+      )
+    });
+  }
+  await ctx.app.close();
+  await rm(ctx.userDataDir, {
+    force: true,
+    recursive: true,
+    maxRetries: 3,
+    retryDelay: 5000
+  }).catch(() => {
+    /*ignore */
+  });
+  await rm(ctx.outputDir, {
+    force: true,
+    recursive: true,
+    maxRetries: 3,
+    retryDelay: 5000
+  }).catch(() => {
+    /*ignore */
+  });
+}

apps/desktop/__tests__/utils.ts

@@ -18,146 +18,200 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import { execSync } from "child_process";
-import { mkdir } from "fs/promises";
+import { cp } from "fs/promises";
 import { fileURLToPath } from "node:url";
-import path from "path";
+import path, { join, resolve } from "path";
 import { _electron as electron } from "playwright";
-import slugify from "slugify";
-import { TaskContext } from "vitest";
+import { existsSync } from "fs";
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 const IS_DEBUG = process.env.NN_DEBUG === "true" || process.env.CI === "true";
+const productName = `NotesnookTestHarness`;
+const SOURCE_DIR = resolve("output", productName);
 
-interface AppContext {
+export interface AppContext {
   app: import("playwright").ElectronApplication;
   page: import("playwright").Page;
   configPath: string;
+  userDataDir: string;
+  outputDir: string;
   relaunch: () => Promise<void>;
 }
 
-interface TestOptions {
+export interface TestOptions {
   version: string;
 }
 
-export async function harness(
-  t: TaskContext,
-  cb: (ctx: AppContext) => Promise<void>,
-  options?: TestOptions
-) {
-  const ctx = await buildAndLaunchApp(options);
-
-  t.onTestFinished(async (result) => {
-    if (result.state === "fail") {
-      await mkdir("test-results", { recursive: true });
-      await ctx.page.screenshot({
-        path: path.join(
-          "test-results",
-          `${slugify(t.task.name)}-${process.platform}-${
-            process.arch
-          }-error.png`
-        )
-      });
-    }
-    await ctx.app.close();
-  });
-
-  await cb(ctx);
+export interface Fixtures {
+  options: TestOptions;
+  ctx: AppContext;
 }
 
-async function buildAndLaunchApp(options?: TestOptions): Promise<AppContext> {
-  const productName = makeid(10);
-  const executablePath = await buildApp({ ...options, productName });
-  const { app, page, configPath } = await launchApp(executablePath);
+export async function buildAndLaunchApp(
+  options?: TestOptions
+): Promise<AppContext> {
+  const productName = `notesnooktest${makeid(10)}`;
+  const outputDir = path.join("test-artifacts", `${productName}-output`);
+  const executablePath = await copyBuild({
+    ...options,
+    outputDir
+  });
+  const { app, page, configPath, userDataDir } = await launchApp(
+    executablePath,
+    productName,
+    options?.version
+  );
   const ctx: AppContext = {
     app,
     page,
     configPath,
+    userDataDir,
+    outputDir,
     relaunch: async () => {
-      const { app, page, configPath } = await launchApp(executablePath);
+      const { app, page, configPath, userDataDir } = await launchApp(
+        executablePath,
+        productName,
+        options?.version
+      );
       ctx.app = app;
       ctx.page = page;
+      ctx.userDataDir = userDataDir;
       ctx.configPath = configPath;
     }
   };
   return ctx;
 }
 
-async function launchApp(executablePath: string) {
+async function launchApp(
+  executablePath: string,
+  packageName: string,
+  version?: string
+) {
+  const userDataDir = resolve(
+    __dirname,
+    "..",
+    "test-artifacts",
+    "user_data_dirs",
+    packageName
+  );
   const app = await electron.launch({
     executablePath,
     args: IS_DEBUG ? [] : ["--hidden"],
-    env:
-      process.platform === "linux"
+    env: {
+      ...(process.platform === "linux"
         ? {
             ...(process.env as Record<string, string>),
             APPIMAGE: "true"
           }
-        : (process.env as Record<string, string>)
+        : (process.env as Record<string, string>)),
+      CUSTOM_USER_DATA_DIR: userDataDir,
+      ...(version
+        ? {
+            CUSTOM_APP_VERSION: version
+          }
+        : {})
+    }
   });
 
   const page = await app.firstWindow();
 
-  const userDataDirectory = await app.evaluate((a) => {
-    return a.app.getPath("userData");
-  });
-  const configPath = path.join(userDataDirectory, "config.json");
+  const configPath = path.join(userDataDir, "UserData", "config.json");
   return {
     app,
     page,
-    configPath
+    configPath,
+    userDataDir
   };
 }
 
-async function buildApp({
-  version,
-  productName
-}: {
-  version?: string;
-  productName: string;
-}) {
-  const buildRoot = path.join("test-artifacts", `${productName}-build`);
-  const output = path.join("test-artifacts", `${productName}-output`);
-  execSync(`npm run release -- --root ${buildRoot} --skip-tsc-build`, {
-    stdio: IS_DEBUG ? "inherit" : "ignore"
-  });
-
-  const args = [
-    `--config electron-builder.config.js`,
-    `--c.extraMetadata.productName=${productName}`,
-    "--publish=never"
-  ];
-  if (version) args.push(`--c.extraMetadata.version=${version}`);
-
-  execSync(`npx electron-builder --dir --${process.arch} ${args.join(" ")}`, {
-    stdio: IS_DEBUG ? "inherit" : "ignore",
-    env: {
-      ...process.env,
-      NOTESNOOK_STAGING: "true",
-      NN_BUILD_ROOT: buildRoot,
-      NN_PRODUCT_NAME: productName,
-      NN_APP_ID: `com.notesnook.test.${productName}`,
-      NN_OUTPUT_DIR: output
+let MAX_RETRIES = 3;
+export async function buildApp(version?: string) {
+  if (!existsSync(SOURCE_DIR)) {
+    const args = [
+      "electron-builder",
+      "--dir",
+      `--${process.arch}`,
+      `--config electron-builder.config.js`,
+      `--c.extraMetadata.productName=${productName}`,
+      `--c.compression=store`,
+      "--publish=never"
+    ];
+    if (version) args.push(`--c.extraMetadata.version=${version}`);
+    try {
+      execSync(`npx ${args.join(" ")}`, {
+        stdio: IS_DEBUG ? "inherit" : "ignore",
+        env: {
+          ...process.env,
+          NOTESNOOK_STAGING: "true",
+          NN_PRODUCT_NAME: productName,
+          NN_APP_ID: `com.notesnook.test.${productName}`,
+          NN_OUTPUT_DIR: SOURCE_DIR
+        }
+      });
+    } catch (e) {
+      if (--MAX_RETRIES) {
+        console.log("retrying...");
+        return await buildApp(version);
+      } else throw e;
     }
-  });
+  }
+}
 
-  return path.join(
+async function copyBuild({ outputDir }: { outputDir: string }) {
+  return process.platform === "win32"
+    ? await makeBuildCopyWindows(outputDir, productName)
+    : process.platform === "darwin"
+    ? await makeBuildCopyMacOS(outputDir, productName)
+    : await makeBuildCopyLinux(outputDir, productName);
+}
+
+async function makeBuildCopyLinux(outputDir: string, productName: string) {
+  const platformDir =
+    process.arch === "arm64" ? "linux-arm64-unpacked" : "linux-unpacked";
+  const appDir = await makeBuildCopy(outputDir, platformDir);
+  return resolve(
     __dirname,
     "..",
-    output,
-    process.platform === "linux"
-      ? process.arch === "arm64"
-        ? "linux-arm64-unpacked"
-        : "linux-unpacked"
-      : process.platform === "darwin"
-      ? process.arch === "arm64"
-        ? `mac-arm64/${productName}.app/Contents/MacOS/`
-        : `mac/${productName}.app/Contents/MacOS/`
-      : "win-unpacked",
-    process.platform === "win32" ? `${productName}.exe` : productName
+    appDir,
+    productName.toLowerCase().replace(/\s+/g, "-")
   );
 }
 
+async function makeBuildCopyWindows(outputDir: string, productName: string) {
+  const platformDir =
+    process.arch === "arm64" ? "win-arm64-unpacked" : "win-unpacked";
+  const appDir = await makeBuildCopy(outputDir, platformDir);
+  return resolve(__dirname, "..", appDir, `${productName}.exe`);
+}
+
+async function makeBuildCopyMacOS(outputDir: string, productName: string) {
+  const platformDir = process.arch === "arm64" ? "mac-arm64" : "mac";
+  const appDir = await makeBuildCopy(outputDir, platformDir);
+  return resolve(
+    __dirname,
+    "..",
+    appDir,
+    `${productName}.app`,
+    "Contents",
+    "MacOS",
+    productName
+  );
+}
+
+async function makeBuildCopy(outputDir: string, platformDir: string) {
+  const appDir = outputDir;
+  await cp(join(SOURCE_DIR, platformDir), outputDir, {
+    recursive: true,
+    preserveTimestamps: true,
+    verbatimSymlinks: true,
+    dereference: false,
+    force: true
+  });
+
+  return appDir;
+}
+
 function makeid(length: number) {
   let result = "";
   const characters =

apps/desktop/electron-builder.config.js

@@ -47,7 +47,11 @@ module.exports = {
   copyright: `Copyright © ${year} Streetwriters (Private) Limited`,
   artifactName: "notesnook_${os}_${arch}.${ext}",
   generateUpdatesFilesForAllChannels: true,
-  asar: false,
+  asar: true,
+  asarUnpack: [
+    "node_modules/sqlite-better-trigram-@(linux|darwin|windows)-${arch}/**/*",
+    "node_modules/sqlite3-fts5-html-@(linux|darwin|windows)-${arch}/**/*"
+  ],
   files: [
     "!*.chunk.js.map",
     "!*.chunk.js.LICENSE.txt",

apps/desktop/package.json

@@ -2,13 +2,15 @@
   "name": "@notesnook/desktop",
   "productName": "Notesnook",
   "description": "Your private note taking space",
-  "version": "3.2.3",
+  "version": "3.3.5",
   "appAppleId": "1544027013",
   "private": true,
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",
   "types": "./dist/types/index.d.ts",
-  "sideEffects": false,
+  "sideEffects": [
+    "src/overrides.ts"
+  ],
   "exports": {
     ".": {
       "require": {
@@ -30,7 +32,7 @@
     "@notesnook/ui": "file:../../packages/ui",
     "@trpc/client": "10.45.2",
     "@trpc/server": "10.45.2",
-    "better-sqlite3-multiple-ciphers": "^11.10.0",
+    "better-sqlite3-multiple-ciphers": "^12.4.1",
     "electron-trpc": "0.7.1",
     "electron-updater": "^6.6.2",
     "icojs": "^0.19.5",
@@ -45,7 +47,7 @@
     "@types/node": "22.15.3",
     "@types/yargs": "^17.0.33",
     "chokidar": "^4.0.3",
-    "electron": "^34.0.0",
+    "electron": "^37.0.0",
     "electron-builder": "^26.0.12",
     "esbuild": "0.21.5",
     "node-abi": "^4.5.0",
@@ -55,7 +57,7 @@
     "slugify": "1.6.6",
     "tree-kill": "^1.2.2",
     "undici": "^7.8.0",
-    "vitest": "2.1.8"
+    "vitest": "^3.2.4"
   },
   "optionalDependencies": {
     "dmg-license": "^1.0.11"

apps/desktop/scripts/build.mjs

@@ -17,6 +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/>.
 */
 
+console.log("starting build...");
 import path from "path";
 import fs from "fs/promises";
 import { existsSync } from "fs";
@@ -26,6 +27,7 @@ import * as childProcess from "child_process";
 import { fileURLToPath } from "url";
 import { patchBetterSQLite3 } from "./patch-better-sqlite3.mjs";
 
+console.log("imports done...");
 const args = yargs(process.argv);
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
@@ -34,11 +36,22 @@ const skipTscBuild = args.skipTscBuild || false;
 
 const webAppPath = path.resolve(path.join(__dirname, "..", "..", "web"));
 
+console.log("loaded args", {
+  args,
+  __filename,
+  __dirname,
+  root,
+  skipTscBuild,
+  webAppPath
+});
 await fs.rm(path.join(root, "build"), { force: true, recursive: true });
 
+console.log("removed build folder");
+
 if (args.rebuild || !existsSync(path.join(webAppPath, "build"))) {
+  console.log("rebuilding...");
   await exec(
-    "npx nx build:desktop @notesnook/web",
+    "node scripts/execute.mjs @notesnook/web:build:desktop",
     path.join(__dirname, "..", "..", "..")
   );
 }

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

@@ -123,15 +123,21 @@ export class SQLite {
       // fts5 API, we must wait decrypt the database before we can load
       // the extensions.
       if (!this.extensionsLoaded && (await this.isDatabaseReady())) {
-        const betterTrigram = require("sqlite-better-trigram");
-        const fts5Html = require("sqlite3-fts5-html");
-        betterTrigram.load(this.sqlite);
-        fts5Html.load(this.sqlite);
-        this.extensionsLoaded = true;
+        this.loadExtensions();
       }
     }
   }
 
+  private loadExtensions() {
+    this.sqlite?.loadExtension(
+      getExtensionPath("sqlite-better-trigram", "better-trigram")
+    );
+    this.sqlite?.loadExtension(
+      getExtensionPath("sqlite3-fts5-html", "fts5-html")
+    );
+    this.extensionsLoaded = true;
+  }
+
   async run<R>(
     sql: string,
     parameters?: SQLiteCompatibleType[]
@@ -175,3 +181,34 @@ export class SQLite {
     }
   }
 }
+
+function getExtensionPath(extensionName: string, entryPoint: string) {
+  const path = require("path");
+  const { statSync } = require("fs");
+
+  const os = process.platform === "win32" ? "windows" : process.platform;
+  const packageName = `${extensionName}-${os}-${process.arch}`;
+  const extensionSuffix =
+    process.platform === "win32"
+      ? "dll"
+      : process.platform === "darwin"
+      ? "dylib"
+      : "so";
+  let loadablePath = path.join(
+    require.resolve(extensionName),
+    "..",
+    "..",
+    packageName,
+    `${entryPoint}.${extensionSuffix}`
+  );
+
+  if (loadablePath.includes(".asar"))
+    loadablePath = loadablePath
+      .replace("electron.asar", "app.asar")
+      .replace(".asar", ".asar.unpacked");
+
+  if (!statSync(loadablePath, { throwIfNoEntry: false })) {
+    throw new Error(`${extensionName} not found at ${loadablePath}.`);
+  }
+  return loadablePath;
+}

apps/desktop/src/main.ts

@@ -17,7 +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 { app, BrowserWindow, nativeTheme, shell } from "electron";
+import "./overrides";
+import { app, BrowserWindow, nativeTheme, shell, dialog } from "electron";
 import { isDevelopment } from "./utils";
 import { registerProtocol, PROTOCOL_URL } from "./utils/protocol";
 import { configureAutoUpdater } from "./utils/autoupdater";
@@ -181,6 +182,17 @@ async function createWindow() {
 app.once("ready", async () => {
   console.info("App ready. Opening window.");
 
+  if (app.runningUnderARM64Translation) {
+    console.log("App is running under ARM64 translation");
+    dialog.showMessageBoxSync({
+      message:
+        "Notesnook detected that it is running under ARM64 translation. For the best performance, please download the ARM64 build of Notesnook from our website.",
+      type: "warning",
+      buttons: ["Okay"],
+      title: "Degraded Performance Warning"
+    });
+  }
+
   if (config.customDns) enableCustomDns();
   else disableCustomDns();
 

apps/desktop/src/overrides.ts

@@ -16,31 +16,26 @@ 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 path from "path";
 
-import React from "react";
-import { Text } from "react-native";
-import { useThemeColors } from "@notesnook/theme";
-import { AppFontSize } from "../../utils/size";
-import Paragraph from "../ui/typography/paragraph";
+const customVersion = process.env.CUSTOM_APP_VERSION;
+if (customVersion) {
+  app.getVersion = () => customVersion;
+  console.log("setting custom version:", customVersion);
+}
 
-export const Offer = ({
-  off = "30",
-  text = "on yearly plan, offer ends soon",
-  padding = 0
-}) => {
-  const { colors } = useThemeColors();
-
-  return (
-    <Paragraph
-      style={{
-        textAlign: "center",
-        paddingVertical: padding
-      }}
-      size={AppFontSize.xxxl}
-    >
-      GET {off}
-      <Text style={{ color: colors.primary.accent }}>%</Text> OFF!{"\n"}
-      <Paragraph color={colors.secondary.paragraph}>{text}</Paragraph>
-    </Paragraph>
+if (process.env.CUSTOM_USER_DATA_DIR) {
+  app.setPath(
+    "appData",
+    path.join(process.env.CUSTOM_USER_DATA_DIR, "AppData")
   );
-};
+  app.setPath(
+    "userData",
+    path.join(process.env.CUSTOM_USER_DATA_DIR, "UserData")
+  );
+  app.setPath(
+    "documents",
+    path.join(process.env.CUSTOM_USER_DATA_DIR, "Documents")
+  );
+}

apps/desktop/vitest.config.ts

@@ -21,11 +21,13 @@ import { defineConfig } from "vitest/config";
 
 export default defineConfig({
   test: {
-    testTimeout: process.env.CI ? 120 * 1000 : 120 * 1000,
+    testTimeout: 120 * 1000,
+    hookTimeout: 120 * 1000,
     sequence: {
       concurrent: true,
       shuffle: true
     },
+    globalSetup: "./__tests__/global-setup.ts",
     dir: "./__tests__/",
     exclude: [
       "**/node_modules/**",

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

@@ -94,7 +94,9 @@ export async function encryptDatabaseKeyWithPassword(appLockPassword: string) {
 }
 
 export async function restoreDatabaseKeyToKeyChain(appLockPassword: string) {
-  const databaseKeyCipher: Cipher = CipherStorage.getMap(DB_KEY_CIPHER);
+  const databaseKeyCipher: Cipher = CipherStorage.getMap(
+    DB_KEY_CIPHER
+  ) as Cipher;
   const databaseKey = (await decrypt(
     {
       password: appLockPassword
@@ -135,7 +137,9 @@ export async function clearAppLockVerificationCipher() {
 
 export async function validateAppLockPassword(appLockPassword: string) {
   try {
-    const appLockCipher: Cipher = CipherStorage.getMap(APPLOCK_CIPHER);
+    const appLockCipher: Cipher = CipherStorage.getMap(
+      APPLOCK_CIPHER
+    ) as Cipher;
     if (!appLockCipher) return true;
     const key = await Sodium.deriveKey(appLockPassword, appLockCipher.salt);
     const decrypted = await decrypt(key, appLockCipher);
@@ -159,7 +163,9 @@ export function clearDatabaseKey() {
 export async function getDatabaseKey(appLockPassword?: string) {
   if (DB_KEY) return DB_KEY;
   if (appLockPassword) {
-    const databaseKeyCipher: Cipher = CipherStorage.getMap("databaseKeyCipher");
+    const databaseKeyCipher: Cipher = CipherStorage.getMap(
+      "databaseKeyCipher"
+    ) as Cipher;
     const databaseKey = await decrypt(
       {
         password: appLockPassword
@@ -293,7 +299,7 @@ export async function deriveCryptoKey(data: SerializedKey) {
 
 export async function getCryptoKey() {
   try {
-    const keyCipher: Cipher = MMKV.getMap(USER_KEY_CIPHER);
+    const keyCipher: Cipher = MMKV.getMap(USER_KEY_CIPHER) as Cipher;
     if (!keyCipher) {
       DatabaseLogger.info("User key cipher is null");
       return undefined;

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

@@ -16,7 +16,7 @@ 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 { database } from "@notesnook/common";
+import { database, getFeature, getFeatureLimit } from "@notesnook/common";
 import { logger as dbLogger, ICompressor } from "@notesnook/core";
 import { strings } from "@notesnook/intl";
 import {
@@ -26,7 +26,6 @@ import {
 } from "@streetwriters/kysely";
 import { Platform } from "react-native";
 import * as Gzip from "react-native-gzip";
-import SettingsService from "../../services/settings";
 import EventSource from "../../utils/sse/even-source-ios";
 import AndroidEventSource from "../../utils/sse/event-source";
 import { FileStorage } from "../filesystem";
@@ -34,11 +33,24 @@ import { getDatabaseKey } from "./encryption";
 import "./logger";
 import { RNSqliteDriver } from "./sqlite.kysely";
 import { Storage } from "./storage";
+import SettingsService from "../../services/settings";
 
 export async function setupDatabase(password?: string) {
   const key = await getDatabaseKey(password);
   if (!key) throw new Error(strings.databaseSetupFailed());
 
+  // const base = `http://192.168.100.92`;
+
+  // database.host({
+  //   API_HOST: `${base}:5264`,
+  //   AUTH_HOST: `${base}:8264`,
+  //   SSE_HOST: `${base}:7264`,
+  //   ISSUES_HOST: `${base}:2624`,
+  //   SUBSCRIPTIONS_HOST: `${base}:9264`,
+  //   MONOGRAPH_HOST: `${base}:6264`,
+  //   NOTESNOOK_HOST: `${base}:8788`
+  // });
+
   database.host({
     API_HOST: "https://api.notesnook.com",
     AUTH_HOST: "https://auth.streetwriters.co",
@@ -46,6 +58,7 @@ export async function setupDatabase(password?: string) {
     SUBSCRIPTIONS_HOST: "https://subscriptions.streetwriters.co",
     ISSUES_HOST: "https://issues.streetwriters.co",
     MONOGRAPH_HOST: "https://monogr.ph",
+    NOTESNOOK_HOST: "https://notesnook.com",
     ...(SettingsService.getProperty("serverUrls") || {})
   });
 
@@ -73,6 +86,10 @@ export async function setupDatabase(password?: string) {
       tempStore: "memory",
       journalMode: Platform.OS === "ios" ? "DELETE" : "WAL",
       password: key
+    },
+    maxNoteVersions: async () => {
+      const limit = await getFeatureLimit(getFeature("maxNoteVersions"));
+      return typeof limit.caption === "number" ? limit.caption : undefined;
     }
   });
 }

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

@@ -136,6 +136,12 @@ export const Storage: IStorage = {
   clear(): Promise<void> {
     return DefaultStorage.clear();
   },
+  generateCryptoKeyPair() {
+    throw new Error("Not implemented");
+  },
+  decryptAsymmetric() {
+    throw new Error("Not implemented");
+  },
   getAllKeys(): Promise<string[]> {
     return DefaultStorage.getAllKeys();
   },

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

@@ -137,6 +137,7 @@ export async function deleteFile(
 
 export async function clearFileStorage() {
   try {
+    await createCacheDir();
     const files = await RNFetchBlob.fs.ls(cacheDir);
     const oldCache = await RNFetchBlob.fs.ls(cacheDirOld);
 
@@ -221,6 +222,7 @@ export async function deleteCacheFileByName(name: string) {
 }
 
 export async function deleteDCacheFiles() {
+  await createCacheDir();
   const files = await RNFetchBlob.fs.ls(cacheDir);
   for (const file of files) {
     if (file.includes("_dcache") || file.startsWith("NN_")) {

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

@@ -74,21 +74,6 @@ export async function uploadFile(
       return true;
     }
 
-    const uploadUrlResponse = await fetch(url, {
-      method: "PUT",
-      headers
-    });
-
-    const uploadUrl = uploadUrlResponse.ok
-      ? await uploadUrlResponse.text()
-      : await uploadUrlResponse.json();
-
-    if (typeof uploadUrl !== "string") {
-      throw new Error(
-        uploadUrl.error || "Unable to resolve attachment upload url."
-      );
-    }
-
     DatabaseLogger.info(`Starting upload: ${filename}`);
 
     const uploadRequest = RNFetchBlob.config({
@@ -97,8 +82,9 @@ export async function uploadFile(
     })
       .fetch(
         "PUT",
-        uploadUrl,
+        url,
         {
+          ...headers,
           "content-type": ""
         },
         RNFetchBlob.wrap(filePath)

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

@@ -25,10 +25,17 @@ import { useSelectionStore } from "../../stores/use-selection-store";
 import { allowedOnPlatform, renderItem } from "./functions";
 import { getContainerBorder } from "../../utils/colors";
 import { DefaultAppStyles } from "../../utils/styles";
+import Heading from "../ui/typography/heading";
+import { AppFontSize } from "../../utils/size";
+import { Button } from "../ui/button";
+import { strings } from "@notesnook/intl";
 
 export const Announcement = ({ color }) => {
   const { colors } = useThemeColors();
-  const announcements = useMessageStore((state) => state.announcements);
+  const [announcements, remove] = useMessageStore((state) => [
+    state.announcements,
+    state.remove
+  ]);
   let announcement = announcements.length > 0 ? announcements[0] : null;
   const selectionMode = useSelectionStore((state) => state.selectionMode);
 
@@ -57,6 +64,38 @@ export const Announcement = ({ color }) => {
             marginTop: DefaultAppStyles.GAP_VERTICAL
           }}
         >
+          <View
+            style={{
+              flexDirection: "row",
+              justifyContent: "space-between",
+              alignItems: "center",
+              paddingHorizontal: DefaultAppStyles.GAP,
+              borderBottomWidth: 1,
+              borderBottomColor: colors.primary.border,
+              paddingBottom: DefaultAppStyles.GAP_VERTICAL_SMALL
+            }}
+          >
+            <Heading color={colors.secondary.heading} size={AppFontSize.xxs}>
+              {strings.announcement()}
+            </Heading>
+
+            <Button
+              type="plain"
+              icon="close"
+              height={null}
+              onPress={() => {
+                remove(announcement.id);
+              }}
+              iconSize={20}
+              fontSize={AppFontSize.xs}
+              style={{
+                paddingVertical: 0,
+                paddingHorizontal: 0,
+                zIndex: 10
+              }}
+            />
+          </View>
+
           {announcement?.body
             .filter((item) => allowedOnPlatform(item.platforms))
             .map((item, index) =>

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

@@ -25,7 +25,6 @@ import { eSendEvent, presentSheet } from "../../services/event-manager";
 import { eCloseAnnouncementDialog } from "../../utils/events";
 import { AppFontSize } from "../../utils/size";
 import { sleep } from "../../utils/time";
-import { PricingPlans } from "../premium/pricing-plans";
 import SheetProvider from "../sheet-provider";
 import { Button } from "../ui/button";
 import { allowedOnPlatform, getStyle } from "./functions";
@@ -45,18 +44,6 @@ export const Cta = ({ actions, style = {}, color, inline }) => {
       Linking.openURL(item.data).catch(() => {
         /* empty */
       });
-    } else if (item.type === "promo") {
-      presentSheet({
-        component: (
-          <PricingPlans
-            marginTop={1}
-            promo={{
-              promoCode: item.data,
-              text: item.title
-            }}
-          />
-        )
-      });
     }
   };
   return (
@@ -64,7 +51,8 @@ export const Cta = ({ actions, style = {}, color, inline }) => {
       style={{
         paddingHorizontal: DefaultAppStyles.GAP,
         ...getStyle(style),
-        flexDirection: inline ? "row" : "column"
+        flexDirection: inline ? "row" : "column",
+        gap: DefaultAppStyles.GAP_SMALL
       }}
     >
       <SheetProvider context="premium_cta" />
@@ -99,12 +87,10 @@ export const Cta = ({ actions, style = {}, color, inline }) => {
                 fontSize={AppFontSize.sm}
                 type="plain"
                 onPress={() => onPress(item)}
-                width={null}
-                height={30}
                 style={{
+                  paddingVertical: DefaultAppStyles.GAP_VERTICAL_SMALL,
                   alignSelf: "flex-start",
-                  paddingHorizontal: 0,
-                  marginLeft: 12
+                  paddingHorizontal: 0
                 }}
                 textStyle={{
                   textDecorationLine: "underline"
@@ -119,7 +105,6 @@ export const Cta = ({ actions, style = {}, color, inline }) => {
               <Button
                 key={item.title}
                 title={item.title}
-                fontSize={AppFontSize.md}
                 buttonType={{
                   color: color ? color : colors.primary.accent,
                   text: color
@@ -129,10 +114,8 @@ export const Cta = ({ actions, style = {}, color, inline }) => {
                   opacity: 1
                 }}
                 onPress={() => onPress(item)}
-                width={250}
                 style={{
-                  marginBottom: DefaultAppStyles.GAP_VERTICAL,
-                  borderRadius: 100
+                  width: "100%"
                 }}
               />
             ))}
@@ -149,7 +132,7 @@ export const Cta = ({ actions, style = {}, color, inline }) => {
                 height={30}
                 style={{
                   minWidth: "50%",
-                  marginTop: DefaultAppStyles.GAP_VERTICAL_SMALL
+                  width: "100%"
                 }}
                 textStyle={{
                   textDecorationLine: "underline"

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

@@ -21,16 +21,17 @@ import React from "react";
 import { AppFontSize } from "../../utils/size";
 import Paragraph from "../ui/typography/paragraph";
 import { getStyle } from "./functions";
+import { DefaultAppStyles } from "../../utils/styles";
 
 export const Description = ({ text, style = {}, inline }) => {
   return (
     <Paragraph
       style={{
-        marginHorizontal: 12,
+        paddingHorizontal: DefaultAppStyles.GAP,
         ...getStyle(style),
         textAlign: inline ? "left" : style?.textAlign
       }}
-      size={inline ? AppFontSize.sm : AppFontSize.md}
+      size={AppFontSize.sm}
     >
       {text}
     </Paragraph>

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

@@ -33,6 +33,7 @@ import {
 import BaseDialog from "../dialog/base-dialog";
 import { allowedOnPlatform, renderItem } from "./functions";
 import { useCallback } from "react";
+import { DefaultAppStyles } from "../../utils/styles";
 
 /**
  * Test announcement
@@ -138,9 +139,9 @@ export const AnnouncementDialog = () => {
           maxHeight: DDS.isTab ? "90%" : "100%",
           borderRadius: DDS.isTab ? 10 : 0,
           overflow: "hidden",
-          marginBottom: DDS.isTab ? 20 : 0,
-          borderTopRightRadius: 10,
-          borderTopLeftRadius: 10
+          paddingVertical: DefaultAppStyles.GAP,
+          borderTopRightRadius: 15,
+          borderTopLeftRadius: 15
         }}
       >
         <FlatList

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

@@ -27,10 +27,6 @@ import { getStyle } from "./functions";
 import { DefaultAppStyles } from "../../utils/styles";
 
 export const Title = ({ text, style = {}, inline }) => {
-  const announcements = useMessageStore((state) => state.announcements);
-  let announcement = announcements.length > 0 ? announcements[0] : null;
-  const remove = useMessageStore((state) => state.remove);
-
   return inline ? (
     <View
       style={{
@@ -42,46 +38,21 @@ export const Title = ({ text, style = {}, inline }) => {
     >
       <Heading
         style={{
-          marginHorizontal: DefaultAppStyles.GAP,
+          paddingHorizontal: DefaultAppStyles.GAP,
           marginTop: DefaultAppStyles.GAP_VERTICAL,
           ...getStyle(style),
           textAlign: inline ? "left" : style?.textAlign,
           flexShrink: 1
         }}
-        numberOfLines={1}
         size={inline ? AppFontSize.md : AppFontSize.xl}
       >
         {inline ? text?.toUpperCase() : text}
       </Heading>
-
-      <Button
-        type="plain"
-        icon="close"
-        height={null}
-        onPress={() => {
-          remove(announcement.id);
-        }}
-        hitSlop={{
-          left: 15,
-          top: 10,
-          bottom: 10,
-          right: 0
-        }}
-        iconSize={24}
-        fontSize={AppFontSize.xs}
-        style={{
-          borderRadius: 100,
-          paddingVertical: 0,
-          paddingHorizontal: 0,
-          marginRight: 12,
-          zIndex: 10
-        }}
-      />
     </View>
   ) : (
     <Heading
       style={{
-        marginHorizontal: DefaultAppStyles.GAP,
+        paddingHorizontal: DefaultAppStyles.GAP,
         ...getStyle(style),
         marginTop: style?.marginTop || DefaultAppStyles.GAP_VERTICAL
       }}

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

@@ -336,7 +336,6 @@ const AppLocked = () => {
                     borderRadius: 150,
                     marginBottom: 10
                   }}
-                  fontSize={AppFontSize.md}
                 />
               </>
             ) : null}

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

@@ -19,9 +19,6 @@ 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
@@ -31,9 +28,7 @@ import { eCloseLoginDialog, eOpenLoginDialog } from "../../utils/events";
 import { sleep } from "../../utils/time";
 import BaseDialog from "../dialog/base-dialog";
 import { Toast } from "../toast";
-import { Button } from "../ui/button";
-import { IconButton } from "../ui/icon-button";
-import { hideAuth, initialAuthMode } from "./common";
+import { initialAuthMode } from "./common";
 import { Login } from "./login";
 import { Signup } from "./signup";
 import { strings } from "@notesnook/intl";
@@ -51,7 +46,6 @@ const AuthModal = () => {
   const [visible, setVisible] = useState(false);
   const [currentAuthMode, setCurrentAuthMode] = useState(AuthMode.login);
   const actionSheetRef = useRef();
-  const insets = useGlobalSafeAreaInsets();
 
   useEffect(() => {
     eSubscribeEvent(eOpenLoginDialog, open);
@@ -99,81 +93,18 @@ const AuthModal = () => {
       centered={false}
       enableSheetKeyboardHandler
     >
-      <KeyboardAwareScrollView
-        style={{
-          width: "100%"
-        }}
-        enableAutomaticScroll={false}
-        keyboardShouldPersistTaps="handled"
-      >
-        {currentAuthMode !== AuthMode.login ? (
-          <Signup
-            changeMode={(mode) => setCurrentAuthMode(mode)}
-            trial={AuthMode.trialSignup === currentAuthMode}
-            welcome={initialAuthMode.current === AuthMode.welcomeSignup}
-          />
-        ) : (
-          <Login
-            welcome={initialAuthMode.current === AuthMode.welcomeSignup}
-            changeMode={(mode) => setCurrentAuthMode(mode)}
-          />
-        )}
-      </KeyboardAwareScrollView>
-
-      <View
-        style={{
-          position: "absolute",
-          paddingTop: Platform.OS === "android" ? 0 : insets.top,
-          top: 0,
-          zIndex: 999,
-          backgroundColor: colors.secondary.background,
-          width: "100%"
-        }}
-      >
-        <View
-          style={{
-            flexDirection: "row",
-            alignItems: "center",
-            paddingHorizontal: DefaultAppStyles.GAP,
-            width: "100%",
-            height: 50,
-            justifyContent:
-              initialAuthMode.current !== AuthMode.welcomeSignup
-                ? "space-between"
-                : "flex-end"
-          }}
-        >
-          {initialAuthMode.current === AuthMode.welcomeSignup ? null : (
-            <IconButton
-              name="arrow-left"
-              onPress={() => {
-                hideAuth();
-              }}
-              color={colors.primary.paragraph}
-            />
-          )}
-
-          {initialAuthMode.current !== AuthMode.welcomeSignup ? null : (
-            <Button
-              title={strings.skip()}
-              onPress={() => {
-                hideAuth();
-              }}
-              iconSize={16}
-              type="plain"
-              iconPosition="right"
-              icon="chevron-right"
-              height={25}
-              iconStyle={{
-                marginTop: 2
-              }}
-              style={{
-                paddingHorizontal: DefaultAppStyles.GAP_SMALL
-              }}
-            />
-          )}
-        </View>
-      </View>
+      {currentAuthMode !== AuthMode.login ? (
+        <Signup
+          changeMode={(mode) => setCurrentAuthMode(mode)}
+          trial={AuthMode.trialSignup === currentAuthMode}
+          welcome={initialAuthMode.current === AuthMode.welcomeSignup}
+        />
+      ) : (
+        <Login
+          welcome={initialAuthMode.current === AuthMode.welcomeSignup}
+          changeMode={(mode) => setCurrentAuthMode(mode)}
+        />
+      )}
 
       <Toast context="local" />
     </BaseDialog>

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

@@ -25,13 +25,18 @@ export const AuthMode = {
   login: 0,
   signup: 1,
   welcomeSignup: 2,
-  trialSignup: 3
+  welcomeLogin: 3,
+  trialSignup: 4
 };
 
 export const initialAuthMode = createRef(0);
-export function hideAuth() {
+export function hideAuth(context) {
   eSendEvent(eCloseLoginDialog);
-  if (initialAuthMode.current === AuthMode.welcomeSignup) {
+  if (
+    initialAuthMode.current === AuthMode.welcomeSignup ||
+    initialAuthMode.current === AuthMode.welcomeLogin ||
+    context === "intro"
+  ) {
     Navigation.replace("FluidPanelsView");
   } else {
     Navigation.goBack();

apps/mobile/app/components/auth/header.tsx

@@ -0,0 +1,78 @@
+/*
+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 { useThemeColors } from "@notesnook/theme";
+import { useRoute } from "@react-navigation/native";
+import React from "react";
+import { View } from "react-native";
+import { Button } from "../ui/button";
+import { IconButton } from "../ui/icon-button";
+import { hideAuth } from "./common";
+export const AuthHeader = (props: { welcome?: boolean }) => {
+  const { colors } = useThemeColors();
+  const route = useRoute();
+
+  return (
+    <View
+      style={{
+        width: "100%"
+      }}
+    >
+      <View
+        style={{
+          flexDirection: "row",
+          alignItems: "center",
+          paddingHorizontal: 12,
+          width: "100%",
+          height: 50,
+          justifyContent: !props.welcome ? "space-between" : "flex-end"
+        }}
+      >
+        {props.welcome ? null : (
+          <IconButton
+            name="arrow-left"
+            onPress={() => {
+              hideAuth((route.params as any)?.context);
+            }}
+            color={colors.primary.paragraph}
+          />
+        )}
+
+        {!props.welcome ? null : (
+          <Button
+            title="Skip"
+            onPress={() => {
+              hideAuth();
+            }}
+            iconSize={16}
+            type="plain"
+            iconPosition="right"
+            icon="chevron-right"
+            height={25}
+            iconStyle={{
+              marginTop: 2
+            }}
+            style={{
+              paddingHorizontal: 6
+            }}
+          />
+        )}
+      </View>
+    </View>
+  );
+};

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

@@ -17,99 +17,29 @@ 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 { strings } from "@notesnook/intl";
-import { useThemeColors } from "@notesnook/theme";
 import React, { useState } from "react";
-import { View } from "react-native";
-import useGlobalSafeAreaInsets from "../../hooks/use-global-safe-area-insets";
-import Navigation from "../../services/navigation";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { useNavigationFocus } from "../../hooks/use-navigation-focus";
 import { Toast } from "../toast";
-import { Button } from "../ui/button";
-import { IconButton } from "../ui/icon-button";
 import { AuthMode, initialAuthMode } from "./common";
 import { Login } from "./login";
 import { Signup } from "./signup";
-import { useNavigationFocus } from "../../hooks/use-navigation-focus";
-import { DefaultAppStyles } from "../../utils/styles";
-import { useSettingStore } from "../../stores/use-setting-store";
+import { useThemeColors } from "@notesnook/theme";
 
 const Auth = ({ navigation, route }) => {
   const [currentAuthMode, setCurrentAuthMode] = useState(
     route?.params?.mode || AuthMode.login
   );
-  const deviceMode = useSettingStore((state) => state.deviceMode);
   const { colors } = useThemeColors();
-  const insets = useGlobalSafeAreaInsets();
   initialAuthMode.current = route?.params.mode || AuthMode.login;
   useNavigationFocus(navigation, {});
 
   return (
-    <View style={{ flex: 1 }}>
-      <View
-        style={{
-          position: "absolute",
-          paddingTop: insets.top,
-          top: 0,
-          zIndex: 999,
-          backgroundColor:
-            deviceMode === "mobile" ? colors.secondary.background : null,
-          width: "100%"
-        }}
-      >
-        <View
-          style={{
-            flexDirection: "row",
-            alignItems: "center",
-            paddingHorizontal: DefaultAppStyles.GAP,
-            width: "100%",
-            height: 50,
-            justifyContent:
-              initialAuthMode.current !== AuthMode.welcomeSignup
-                ? "space-between"
-                : "flex-end"
-          }}
-        >
-          {initialAuthMode.current === AuthMode.welcomeSignup ? null : (
-            <IconButton
-              name="arrow-left"
-              onPress={() => {
-                if (initialAuthMode.current === 2) {
-                  Navigation.replace("FluidPanelsView");
-                } else {
-                  Navigation.goBack();
-                }
-              }}
-              color={colors.primary.paragraph}
-            />
-          )}
-
-          {initialAuthMode.current !== AuthMode.welcomeSignup ? null : (
-            <Button
-              title={strings.skip()}
-              onPress={() => {
-                if (initialAuthMode.current === 2) {
-                  Navigation.replace("FluidPanelsView");
-                } else {
-                  Navigation.goBack();
-                }
-              }}
-              iconSize={16}
-              type="plain"
-              iconPosition="right"
-              icon="chevron-right"
-              height={25}
-              iconStyle={{
-                marginTop: 2
-              }}
-              style={{
-                paddingHorizontal: DefaultAppStyles.GAP_SMALL
-              }}
-            />
-          )}
-        </View>
-      </View>
-
-      {currentAuthMode !== AuthMode.login ? (
+    <SafeAreaView
+      style={{ flex: 1, backgroundColor: colors.primary.background }}
+    >
+      {currentAuthMode !== AuthMode.login &&
+      currentAuthMode !== AuthMode.welcomeLogin ? (
         <Signup
           changeMode={(mode) => setCurrentAuthMode(mode)}
           trial={AuthMode.trialSignup === currentAuthMode}
@@ -123,7 +53,7 @@ const Auth = ({ navigation, route }) => {
       )}
 
       <Toast context="local" />
-    </View>
+    </SafeAreaView>
   );
 };
 

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

@@ -19,17 +19,22 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import { strings } from "@notesnook/intl";
 import { useThemeColors } from "@notesnook/theme";
+import { useRoute } from "@react-navigation/native";
 import React, { useEffect, useState } from "react";
 import { TouchableOpacity, View, useWindowDimensions } from "react-native";
 import { SheetManager } from "react-native-actions-sheet";
+import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
 import { DDS } from "../../services/device-detection";
 import { eSendEvent } from "../../services/event-manager";
+import Navigation from "../../services/navigation";
+import PremiumService from "../../services/premium";
 import Sync from "../../services/sync";
 import { useUserStore } from "../../stores/use-user-store";
 import { eUserLoggedIn } from "../../utils/events";
 import { AppFontSize } from "../../utils/size";
+import { DefaultAppStyles } from "../../utils/styles";
 import { sleep } from "../../utils/time";
-import SheetProvider from "../sheet-provider";
+import { Dialog } from "../dialog";
 import { Progress } from "../sheets/progress";
 import { Button } from "../ui/button";
 import Input from "../ui/input";
@@ -37,9 +42,9 @@ import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 import { hideAuth } from "./common";
 import { ForgotPassword } from "./forgot-password";
+import { AuthHeader } from "./header";
 import { useLogin } from "./use-login";
-import { DefaultAppStyles } from "../../utils/styles";
-import { Dialog } from "../dialog";
+import SettingsService from "../../services/settings";
 
 const LoginSteps = {
   emailAuth: 1,
@@ -50,6 +55,7 @@ const LoginSteps = {
 export const Login = ({ changeMode }) => {
   const { colors } = useThemeColors();
   const [focused, setFocused] = useState(false);
+  const route = useRoute();
   const {
     step,
     setStep,
@@ -62,15 +68,24 @@ export const Login = ({ changeMode }) => {
     setError,
     login
   } = useLogin(async () => {
-    hideAuth();
     eSendEvent(eUserLoggedIn, true);
     await sleep(500);
-    Progress.present();
+    hideAuth();
     setTimeout(() => {
       if (!useUserStore.getState().syncing) {
         Sync.run("global", false, "full");
       }
     }, 5000);
+
+    if (!PremiumService.get() && !SettingsService.getProperty("serverUrls")) {
+      Navigation.navigate("PayWall", {
+        context: "signup",
+        state: route.params.state,
+        canGoBack: false
+      });
+    } else {
+      Progress.present();
+    }
   });
   const { width, height } = useWindowDimensions();
   const isTablet = width > 600;
@@ -89,217 +104,227 @@ export const Login = ({ changeMode }) => {
 
   return (
     <>
+      <AuthHeader />
       <ForgotPassword />
       <Dialog context="two_factor_verify" />
-      <View
+      <KeyboardAwareScrollView
         style={{
-          borderRadius: DDS.isTab ? 5 : 0,
-          backgroundColor: colors.primary.background,
-          zIndex: 10,
-          width: "100%",
-          height: "100%",
-          alignSelf: "center"
+          width: "100%"
         }}
+        contentContainerStyle={{
+          minHeight: "90%"
+        }}
+        nestedScrollEnabled
+        enableAutomaticScroll={false}
+        keyboardShouldPersistTaps="handled"
       >
         <View
           style={{
-            justifyContent: "flex-end",
-            paddingHorizontal: DefaultAppStyles.GAP,
-            backgroundColor: colors.secondary.background,
-            borderBottomWidth: 0.8,
-            marginBottom: DefaultAppStyles.GAP_VERTICAL,
-            borderBottomColor: colors.primary.border,
-            alignSelf: isTablet ? "center" : undefined,
-            borderWidth: isTablet ? 1 : null,
-            borderColor: isTablet ? colors.primary.border : null,
-            borderRadius: isTablet ? 20 : null,
-            marginTop: isTablet ? 50 : null,
-            width: !isTablet ? null : "70%",
-            minHeight: height * 0.4
-          }}
-        >
-          <View
-            style={{
-              flexDirection: "row"
-            }}
-          >
-            <View
-              style={{
-                width: 100,
-                height: 5,
-                backgroundColor: colors.primary.accent,
-                borderRadius: 2,
-                marginRight: 7
-              }}
-            />
-
-            <View
-              style={{
-                width: 20,
-                height: 5,
-                backgroundColor: colors.secondary.background,
-                borderRadius: 2
-              }}
-            />
-          </View>
-          <Heading
-            style={{
-              marginBottom: 25,
-              marginTop: DefaultAppStyles.GAP_VERTICAL
-            }}
-            extraBold
-            size={AppFontSize.xxl}
-          >
-            {strings.loginToYourAccount()}
-          </Heading>
-        </View>
-
-        <View
-          style={{
-            width: DDS.isTab
-              ? focused
-                ? "50%"
-                : "49.99%"
-              : focused
-              ? "100%"
-              : "99.9%",
+            borderRadius: DDS.isTab ? 5 : 0,
             backgroundColor: colors.primary.background,
-            alignSelf: "center",
-            paddingHorizontal: DefaultAppStyles.GAP
+            zIndex: 10,
+            width: "100%",
+            height: "100%",
+            alignSelf: "center"
           }}
         >
-          <Input
-            fwdRef={emailInputRef}
-            onChangeText={(value) => {
-              email.current = value;
+          <View
+            style={{
+              justifyContent: "flex-end",
+              paddingHorizontal: DefaultAppStyles.GAP,
+              borderBottomWidth: 0.8,
+              marginBottom: DefaultAppStyles.GAP_VERTICAL,
+              borderBottomColor: colors.primary.border,
+              alignSelf: isTablet ? "center" : undefined,
+              borderWidth: isTablet ? 1 : null,
+              borderColor: isTablet ? colors.primary.border : null,
+              borderRadius: isTablet ? 20 : null,
+              marginTop: isTablet ? 50 : null,
+              width: !isTablet ? null : "50%",
+              minHeight: height * 0.4
             }}
-            testID="input.email"
-            onErrorCheck={(e) => setError(e)}
-            returnKeyLabel="Next"
-            returnKeyType="next"
-            autoComplete="email"
-            validationType="email"
-            autoCorrect={false}
-            autoCapitalize="none"
-            errorMessage={strings.emailInvalid()}
-            placeholder={strings.email()}
-            defaultValue={email.current}
-            editable={step === LoginSteps.emailAuth && !loading}
-            onSubmit={() => {
-              if (step === LoginSteps.emailAuth) {
-                login();
-              } else {
-                passwordInputRef.current?.focus();
-              }
-            }}
-          />
-
-          {step === LoginSteps.passwordAuth && (
-            <>
-              <Input
-                fwdRef={passwordInputRef}
-                onChangeText={(value) => {
-                  password.current = value;
-                }}
-                testID="input.password"
-                returnKeyLabel={strings.done()}
-                returnKeyType="done"
-                secureTextEntry
-                autoComplete="password"
-                autoCapitalize="none"
-                autoCorrect={false}
-                placeholder={strings.password()}
-                marginBottom={0}
-                editable={!loading}
-                defaultValue={password.current}
-                onSubmit={() => login()}
-              />
-              <Button
-                title={strings.forgotPassword()}
+          >
+            <View
+              style={{
+                flexDirection: "row"
+              }}
+            >
+              <View
                 style={{
-                  alignSelf: "flex-end",
-                  paddingVertical: DefaultAppStyles.GAP_VERTICAL_SMALL,
-                  paddingHorizontal: 0
+                  width: 100,
+                  height: 5,
+                  backgroundColor: colors.primary.accent,
+                  borderRadius: 2,
+                  marginRight: 7
                 }}
-                onPress={() => {
-                  if (loading) return;
-                  SheetManager.show("forgotpassword_sheet", email.current);
-                }}
-                textStyle={{
-                  textDecorationLine: "underline"
-                }}
-                fontSize={AppFontSize.xs}
-                type="plain"
               />
-            </>
-          )}
+
+              <View
+                style={{
+                  width: 20,
+                  height: 5,
+                  backgroundColor: colors.secondary.background,
+                  borderRadius: 2
+                }}
+              />
+            </View>
+            <Heading
+              style={{
+                marginBottom: 25,
+                marginTop: DefaultAppStyles.GAP_VERTICAL
+              }}
+              extraBold
+              size={AppFontSize.xxl}
+            >
+              {strings.loginToYourAccount()}
+            </Heading>
+          </View>
 
           <View
             style={{
-              marginTop: 25
+              width: DDS.isTab
+                ? focused
+                  ? "50%"
+                  : "49.99%"
+                : focused
+                ? "100%"
+                : "99.9%",
+              backgroundColor: colors.primary.background,
+              alignSelf: "center",
+              paddingHorizontal: DDS.isTab ? 0 : DefaultAppStyles.GAP,
+              gap: DefaultAppStyles.GAP_VERTICAL
             }}
           >
-            <Button
-              loading={loading}
-              onPress={() => {
-                if (loading) return;
-                login();
+            <Input
+              fwdRef={emailInputRef}
+              onChangeText={(value) => {
+                email.current = value;
               }}
-              style={{
-                width: 250
+              testID="input.email"
+              onErrorCheck={(e) => setError(e)}
+              returnKeyLabel="Next"
+              returnKeyType="next"
+              autoComplete="email"
+              validationType="email"
+              marginBottom={0}
+              autoCorrect={false}
+              autoCapitalize="none"
+              errorMessage={strings.emailInvalid()}
+              placeholder={strings.email()}
+              defaultValue={email.current}
+              editable={step === LoginSteps.emailAuth && !loading}
+              onSubmit={() => {
+                if (step === LoginSteps.emailAuth) {
+                  login();
+                } else {
+                  passwordInputRef.current?.focus();
+                }
               }}
-              type="accent"
-              title={!loading ? strings.continue() : null}
             />
 
             {step === LoginSteps.passwordAuth && (
-              <Button
-                title={strings.cancelLogin()}
-                style={{
-                  alignSelf: "center",
-                  marginTop: DefaultAppStyles.GAP_VERTICAL,
-                  width: 250
-                }}
-                onPress={() => {
-                  if (loading) return;
-                  setStep(LoginSteps.emailAuth);
-                  setLoading(false);
-                }}
-                fontSize={AppFontSize.xs}
-                type="secondaryAccented"
-              />
+              <>
+                <Input
+                  fwdRef={passwordInputRef}
+                  onChangeText={(value) => {
+                    password.current = value;
+                  }}
+                  testID="input.password"
+                  returnKeyLabel={strings.done()}
+                  returnKeyType="done"
+                  secureTextEntry
+                  autoComplete="password"
+                  autoCapitalize="none"
+                  autoCorrect={false}
+                  placeholder={strings.password()}
+                  marginBottom={0}
+                  editable={!loading}
+                  defaultValue={password.current}
+                  onSubmit={() => login()}
+                />
+                <Button
+                  title={strings.forgotPassword()}
+                  style={{
+                    alignSelf: "flex-end",
+                    paddingVertical: DefaultAppStyles.GAP_VERTICAL_SMALL,
+                    paddingHorizontal: 0
+                  }}
+                  onPress={() => {
+                    if (loading) return;
+                    SheetManager.show("forgotpassword_sheet", email.current);
+                  }}
+                  textStyle={{
+                    textDecorationLine: "underline"
+                  }}
+                  fontSize={AppFontSize.xs}
+                  type="plain"
+                />
+              </>
             )}
 
-            {!loading ? (
-              <TouchableOpacity
+            <View>
+              <Button
+                loading={loading}
                 onPress={() => {
                   if (loading) return;
-                  changeMode(1);
+                  login();
                 }}
-                activeOpacity={0.8}
                 style={{
-                  alignSelf: "center",
-                  marginTop: DefaultAppStyles.GAP_VERTICAL,
-                  paddingVertical: DefaultAppStyles.GAP_VERTICAL
+                  width: "100%"
                 }}
-              >
-                <Paragraph
-                  size={AppFontSize.xs}
-                  color={colors.secondary.paragraph}
+                type="accent"
+                title={!loading ? strings.continue() : null}
+                fontSize={AppFontSize.sm}
+              />
+
+              {step === LoginSteps.passwordAuth && (
+                <Button
+                  title={strings.cancelLogin()}
+                  style={{
+                    alignSelf: "center",
+                    marginTop: DefaultAppStyles.GAP_VERTICAL,
+                    width: "100%"
+                  }}
+                  onPress={() => {
+                    if (loading) return;
+                    setStep(LoginSteps.emailAuth);
+                    setLoading(false);
+                  }}
+                  type="secondaryAccented"
+                />
+              )}
+
+              {!loading ? (
+                <TouchableOpacity
+                  onPress={() => {
+                    if (loading) return;
+                    changeMode(1);
+                  }}
+                  activeOpacity={0.8}
+                  style={{
+                    alignSelf: "center",
+                    marginTop: DefaultAppStyles.GAP_VERTICAL,
+                    paddingVertical: DefaultAppStyles.GAP_VERTICAL
+                  }}
                 >
-                  {strings.dontHaveAccount()}{" "}
                   <Paragraph
                     size={AppFontSize.xs}
-                    style={{ color: colors.primary.accent }}
+                    color={colors.secondary.paragraph}
                   >
-                    {strings.signUp()}
+                    {strings.dontHaveAccount()}{" "}
+                    <Paragraph
+                      size={AppFontSize.xs}
+                      style={{ color: colors.primary.accent }}
+                    >
+                      {strings.signUp()}
+                    </Paragraph>
                   </Paragraph>
-                </Paragraph>
-              </TouchableOpacity>
-            ) : null}
+                </TouchableOpacity>
+              ) : null}
+            </View>
           </View>
         </View>
-      </View>
+      </KeyboardAwareScrollView>
     </>
   );
 };

apps/mobile/app/components/auth/signup-context.ts

@@ -0,0 +1,27 @@
+/*
+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, { useContext } from "react";
+
+export const SignupContext = React.createContext<{
+  signup?: () => Promise<boolean>;
+}>({
+  signup: undefined
+});
+
+export const useSignupContext = () => useContext(SignupContext);

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

@@ -19,26 +19,36 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import { strings } from "@notesnook/intl";
 import { useThemeColors } from "@notesnook/theme";
+import { useRoute } from "@react-navigation/native";
 import React, { useRef, useState } from "react";
 import { TouchableOpacity, View, useWindowDimensions } from "react-native";
+import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
 import { db } from "../../common/database";
 import { DDS } from "../../services/device-detection";
 import { ToastManager } from "../../services/event-manager";
 import { clearMessage, setEmailVerifyMessage } from "../../services/message";
-import PremiumService from "../../services/premium";
-import SettingsService from "../../services/settings";
+import Navigation from "../../services/navigation";
 import { useUserStore } from "../../stores/use-user-store";
 import { openLinkInBrowser } from "../../utils/functions";
 import { AppFontSize } from "../../utils/size";
-import { sleep } from "../../utils/time";
+import { DefaultAppStyles } from "../../utils/styles";
+import { Loading } from "../loading";
 import { Button } from "../ui/button";
 import Input from "../ui/input";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
-import { hideAuth } from "./common";
-import { DefaultAppStyles } from "../../utils/styles";
+import { AuthHeader } from "./header";
+import { SignupContext } from "./signup-context";
+import SettingsService from "../../services/settings";
 
-export const Signup = ({ changeMode, trial }) => {
+const SignupSteps = {
+  signup: 0,
+  selectPlan: 1,
+  createAccount: 2
+};
+
+export const Signup = ({ changeMode, welcome }) => {
+  const [currentStep, setCurrentStep] = useState(SignupSteps.signup);
   const { colors } = useThemeColors();
   const email = useRef();
   const emailInputRef = useRef();
@@ -52,6 +62,8 @@ export const Signup = ({ changeMode, trial }) => {
   const setLastSynced = useUserStore((state) => state.setLastSynced);
   const { width, height } = useWindowDimensions();
   const isTablet = width > 600;
+  const route = useRoute();
+
   const validateInfo = () => {
     if (!password.current || !email.current || !confirmPassword.current) {
       ToastManager.show({
@@ -70,23 +82,26 @@ export const Signup = ({ changeMode, trial }) => {
   const signup = async () => {
     if (!validateInfo() || error) return;
     if (loading) return;
+
     setLoading(true);
     try {
+      setCurrentStep(SignupSteps.createAccount);
       await db.user.signup(email.current.toLowerCase(), password.current);
       let user = await db.user.getUser();
       setUser(user);
       setLastSynced(await db.lastSynced());
       clearMessage();
       setEmailVerifyMessage();
-      hideAuth();
-      SettingsService.setProperty("encryptedBackup", true);
-      await sleep(300);
-      if (trial) {
-        PremiumService.sheet(null, null, true);
-      } else {
-        PremiumService.showVerifyEmailDialog();
+      if (!SettingsService.getProperty("serverUrls")) {
+        Navigation.navigate("PayWall", {
+          canGoBack: false,
+          state: route.params.state,
+          context: "signup"
+        });
       }
+      return true;
     } catch (e) {
+      setCurrentStep(SignupSteps.signup);
       setLoading(false);
       ToastManager.show({
         heading: strings.signupFailed(),
@@ -94,214 +109,264 @@ export const Signup = ({ changeMode, trial }) => {
         type: "error",
         context: "local"
       });
+      return false;
     }
   };
 
   return (
-    <>
-      <View
-        style={{
-          borderRadius: DDS.isTab ? 5 : 0,
-          backgroundColor: colors.primary.background,
-          zIndex: 10,
-          width: "100%",
-          height: "100%",
-          alignSelf: "center"
-        }}
-      >
-        <View
-          style={{
-            justifyContent: "flex-end",
-            paddingHorizontal: DefaultAppStyles.GAP,
-            backgroundColor: colors.secondary.background,
-            borderBottomWidth: 0.8,
-            marginBottom: DefaultAppStyles.GAP_VERTICAL,
-            borderBottomColor: colors.primary.border,
-            alignSelf: isTablet ? "center" : undefined,
-            borderWidth: isTablet ? 1 : null,
-            borderColor: isTablet ? colors.primary.border : null,
-            borderRadius: isTablet ? 20 : null,
-            marginTop: isTablet ? 50 : null,
-            width: !isTablet ? null : "70%",
-            minHeight: height * 0.4
-          }}
-        >
-          <View
+    <SignupContext.Provider
+      value={{
+        signup: signup
+      }}
+    >
+      {currentStep === SignupSteps.signup ? (
+        <>
+          <AuthHeader welcome={welcome} />
+          <KeyboardAwareScrollView
             style={{
-              flexDirection: "row"
+              width: "100%"
             }}
+            contentContainerStyle={{
+              minHeight: "90%"
+            }}
+            nestedScrollEnabled
+            enableAutomaticScroll={false}
+            keyboardShouldPersistTaps="handled"
           >
             <View
               style={{
-                width: 100,
-                height: 5,
-                backgroundColor: colors.primary.accent,
-                borderRadius: 2,
-                marginRight: 7
+                borderRadius: DDS.isTab ? 5 : 0,
+                backgroundColor: colors.primary.background,
+                zIndex: 10,
+                width: "100%",
+                alignSelf: "center",
+                height: "100%"
               }}
-            />
-
-            <View
-              style={{
-                width: 20,
-                height: 5,
-                backgroundColor: colors.secondary.background,
-                borderRadius: 2
-              }}
-            />
-          </View>
-          <Heading
-            extraBold
-            style={{
-              marginBottom: 25,
-              marginTop: DefaultAppStyles.GAP_VERTICAL
-            }}
-            size={AppFontSize.xxl}
-          >
-            {strings.createYourAccount()}
-          </Heading>
-        </View>
-
-        <View
-          style={{
-            width: DDS.isTab ? "50%" : "100%",
-            paddingHorizontal: DefaultAppStyles.GAP,
-            backgroundColor: colors.primary.background,
-            alignSelf: "center"
-          }}
-        >
-          <Input
-            fwdRef={emailInputRef}
-            onChangeText={(value) => {
-              email.current = value;
-            }}
-            testID="input.email"
-            onErrorCheck={(e) => setError(e)}
-            returnKeyLabel={strings.next()}
-            returnKeyType="next"
-            autoComplete="email"
-            validationType="email"
-            autoCorrect={false}
-            autoCapitalize="none"
-            errorMessage={strings.email()}
-            placeholder={strings.email()}
-            onSubmit={() => {
-              passwordInputRef.current?.focus();
-            }}
-          />
-
-          <Input
-            fwdRef={passwordInputRef}
-            onChangeText={(value) => {
-              password.current = value;
-            }}
-            testID="input.password"
-            onErrorCheck={(e) => setError(e)}
-            returnKeyLabel={strings.next()}
-            returnKeyType="next"
-            secureTextEntry
-            autoComplete="password"
-            autoCapitalize="none"
-            validationType="password"
-            autoCorrect={false}
-            placeholder={strings.password()}
-            onSubmit={() => {
-              confirmPasswordInputRef.current?.focus();
-            }}
-          />
-
-          <Input
-            fwdRef={confirmPasswordInputRef}
-            onChangeText={(value) => {
-              confirmPassword.current = value;
-            }}
-            testID="input.confirmPassword"
-            onErrorCheck={(e) => setError(e)}
-            returnKeyLabel={strings.done()}
-            returnKeyType="done"
-            secureTextEntry
-            autoComplete="password"
-            autoCapitalize="none"
-            autoCorrect={false}
-            validationType="confirmPassword"
-            customValidator={() => password.current}
-            placeholder={strings.confirmPassword()}
-            marginBottom={12}
-            onSubmit={signup}
-          />
-
-          <Paragraph
-            style={{
-              marginBottom: 25
-            }}
-            size={AppFontSize.xxs}
-            color={colors.secondary.paragraph}
-          >
-            {strings.signupAgreement[0]()}
-            <Paragraph
-              size={AppFontSize.xxs}
-              onPress={() => {
-                openLinkInBrowser("https://notesnook.com/tos", colors);
-              }}
-              style={{
-                textDecorationLine: "underline"
-              }}
-              color={colors.primary.accent}
             >
-              {" "}
-              {strings.signupAgreement[1]()}
-            </Paragraph>{" "}
-            {strings.signupAgreement[2]()}
-            <Paragraph
-              size={AppFontSize.xxs}
-              onPress={() => {
-                openLinkInBrowser("https://notesnook.com/privacy", colors);
-              }}
-              style={{
-                textDecorationLine: "underline"
-              }}
-              color={colors.primary.accent}
-            >
-              {" "}
-              {strings.signupAgreement[3]()}
-            </Paragraph>{" "}
-            {strings.signupAgreement[4]()}
-          </Paragraph>
-
-          <Button
-            title={!loading ? strings.continue() : null}
-            type="accent"
-            loading={loading}
-            onPress={signup}
-            style={{
-              width: 250
-            }}
-          />
-
-          <TouchableOpacity
-            onPress={() => {
-              if (loading) return;
-              changeMode(0);
-            }}
-            activeOpacity={0.8}
-            style={{
-              alignSelf: "center",
-              marginTop: DefaultAppStyles.GAP_VERTICAL,
-              paddingVertical: DefaultAppStyles.GAP_VERTICAL
-            }}
-          >
-            <Paragraph size={AppFontSize.xs} color={colors.secondary.paragraph}>
-              {strings.alreadyHaveAccount()}{" "}
-              <Paragraph
-                size={AppFontSize.xs}
-                style={{ color: colors.primary.accent }}
+              <View
+                style={{
+                  justifyContent: "flex-end",
+                  paddingHorizontal: 16,
+                  marginBottom: DefaultAppStyles.GAP_VERTICAL,
+                  borderBottomWidth: 0.8,
+                  borderBottomColor: colors.primary.border,
+                  alignSelf: isTablet ? "center" : undefined,
+                  borderWidth: isTablet ? 1 : null,
+                  borderColor: isTablet ? colors.primary.border : null,
+                  borderRadius: isTablet ? 20 : null,
+                  marginTop: isTablet ? 50 : null,
+                  width: !isTablet ? null : "50%",
+                  minHeight: height * 0.25
+                }}
               >
-                {strings.login()}
-              </Paragraph>
-            </Paragraph>
-          </TouchableOpacity>
-        </View>
-      </View>
-    </>
+                <View
+                  style={{
+                    flexDirection: "row"
+                  }}
+                >
+                  <View
+                    style={{
+                      width: 100,
+                      height: 5,
+                      backgroundColor: colors.primary.accent,
+                      borderRadius: 2,
+                      marginRight: 7
+                    }}
+                  />
+
+                  <View
+                    style={{
+                      width: 20,
+                      height: 5,
+                      backgroundColor: colors.secondary.background,
+                      borderRadius: 2
+                    }}
+                  />
+                </View>
+                <Heading
+                  extraBold
+                  style={{
+                    marginBottom: 25,
+                    marginTop: 10
+                  }}
+                  size={AppFontSize.xxl}
+                >
+                  {strings.createAccount()}
+                </Heading>
+              </View>
+
+              <View
+                style={{
+                  width: DDS.isTab ? "50%" : "100%",
+                  paddingHorizontal: DDS.isTab ? 0 : 16,
+                  backgroundColor: colors.primary.background,
+                  flexGrow: 1,
+                  alignSelf: "center"
+                }}
+              >
+                <Input
+                  fwdRef={emailInputRef}
+                  onChangeText={(value) => {
+                    email.current = value;
+                  }}
+                  defaultValue={email.current}
+                  testID="input.email"
+                  onErrorCheck={(e) => setError(e)}
+                  returnKeyLabel="Next"
+                  returnKeyType="next"
+                  autoComplete="email"
+                  validationType="email"
+                  autoCorrect={false}
+                  autoCapitalize="none"
+                  errorMessage={strings.emailInvalid()}
+                  placeholder={strings.email()}
+                  blurOnSubmit={false}
+                  onSubmit={() => {
+                    if (!email.current) return;
+                    passwordInputRef.current?.focus();
+                  }}
+                />
+
+                <Input
+                  fwdRef={passwordInputRef}
+                  onChangeText={(value) => {
+                    password.current = value;
+                  }}
+                  defaultValue={password.current}
+                  testID="input.password"
+                  onErrorCheck={(e) => setError(e)}
+                  returnKeyLabel="Next"
+                  returnKeyType="next"
+                  secureTextEntry
+                  autoComplete="password"
+                  autoCapitalize="none"
+                  blurOnSubmit={false}
+                  validationType="password"
+                  autoCorrect={false}
+                  placeholder={strings.password()}
+                  onSubmit={() => {
+                    if (!password.current) return;
+                    confirmPasswordInputRef.current?.focus();
+                  }}
+                />
+
+                <Input
+                  fwdRef={confirmPasswordInputRef}
+                  onChangeText={(value) => {
+                    confirmPassword.current = value;
+                  }}
+                  defaultValue={confirmPassword.current}
+                  testID="input.confirmPassword"
+                  onErrorCheck={(e) => setError(e)}
+                  returnKeyLabel="Signup"
+                  returnKeyType="done"
+                  secureTextEntry
+                  autoComplete="password"
+                  autoCapitalize="none"
+                  autoCorrect={false}
+                  blurOnSubmit={false}
+                  validationType="confirmPassword"
+                  customValidator={() => password.current}
+                  placeholder={strings.confirmPassword()}
+                  marginBottom={12}
+                  onSubmit={signup}
+                />
+
+                <Button
+                  title={!loading ? "Continue" : null}
+                  type="accent"
+                  loading={loading}
+                  onPress={() => {
+                    signup();
+                  }}
+                  width="100%"
+                />
+
+                <TouchableOpacity
+                  onPress={() => {
+                    if (loading) return;
+                    changeMode(0);
+                  }}
+                  activeOpacity={0.8}
+                  style={{
+                    alignSelf: "center",
+                    marginTop: 12,
+                    paddingVertical: 12
+                  }}
+                >
+                  <Paragraph
+                    size={AppFontSize.xs + 1}
+                    color={colors.secondary.paragraph}
+                  >
+                    {strings.alreadyHaveAccount()}{" "}
+                    <Paragraph
+                      size={AppFontSize.xs + 1}
+                      style={{ color: colors.primary.accent }}
+                    >
+                      {strings.login()}
+                    </Paragraph>
+                  </Paragraph>
+                </TouchableOpacity>
+              </View>
+
+              <View
+                style={{
+                  paddingHorizontal: DefaultAppStyles.GAP
+                }}
+              >
+                <Paragraph
+                  style={{
+                    marginBottom: 25,
+                    textAlign: "center"
+                  }}
+                  size={AppFontSize.xxs}
+                  color={colors.secondary.paragraph}
+                >
+                  {strings.signupAgreement[0]()}
+                  <Paragraph
+                    size={AppFontSize.xxs}
+                    onPress={() => {
+                      openLinkInBrowser("https://notesnook.com/tos", colors);
+                    }}
+                    style={{
+                      textDecorationLine: "underline"
+                    }}
+                    color={colors.primary.accent}
+                  >
+                    {" "}
+                    {strings.signupAgreement[1]()}
+                  </Paragraph>{" "}
+                  {strings.signupAgreement[2]()}
+                  <Paragraph
+                    size={AppFontSize.xxs}
+                    onPress={() => {
+                      openLinkInBrowser(
+                        "https://notesnook.com/privacy",
+                        colors
+                      );
+                    }}
+                    style={{
+                      textDecorationLine: "underline"
+                    }}
+                    color={colors.primary.accent}
+                  >
+                    {" "}
+                    {strings.signupAgreement[3]()}
+                  </Paragraph>{" "}
+                  {strings.signupAgreement[4]()}
+                </Paragraph>
+              </View>
+            </View>
+          </KeyboardAwareScrollView>
+        </>
+      ) : (
+        <>
+          <Loading
+            title={"Setting up your account..."}
+            description="Your account is almost ready, please wait..."
+          />
+        </>
+      )}
+    </SignupContext.Provider>
   );
 };

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

@@ -136,6 +136,11 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo, onCancel }) => {
         backgroundColor: colors.primary.background,
         paddingTop: 60
       }}
+      onLayout={() => {
+        setTimeout(() => {
+          inputRef.current?.focus();
+        }, 500);
+      }}
     >
       <View
         style={{
@@ -206,13 +211,15 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo, onCancel }) => {
                 code.current = value;
                 //onNext();
               }}
+              cursorColor={colors.selected.accent}
+              selectionHandleColor={colors.selected.accent}
+              selectionColor={colors.selected.accent}
               onSubmitEditing={onNext}
-              caretHidden
               height={60}
               inputStyle={{
                 fontSize: AppFontSize.lg,
                 textAlign: "center",
-                letterSpacing: 10,
+                letterSpacing: 7,
                 width: 250
               }}
               keyboardType={
@@ -220,8 +227,6 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo, onCancel }) => {
               }
               enablesReturnKeyAutomatically
               containerStyle={{
-                borderWidth: 0,
-                width: undefined,
                 minWidth: "50%"
               }}
               wrapperStyle={{

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

@@ -17,16 +17,17 @@ 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 { strings } from "@notesnook/intl";
 import { useRef, useState } from "react";
+import { TextInput } from "react-native";
 import { db } from "../../common/database";
-import { eSendEvent, ToastManager } from "../../services/event-manager";
+import { ToastManager, eSendEvent } from "../../services/event-manager";
 import { clearMessage } from "../../services/message";
 import PremiumService from "../../services/premium";
 import SettingsService from "../../services/settings";
 import { useUserStore } from "../../stores/use-user-store";
 import { eCloseSimpleDialog } from "../../utils/events";
 import TwoFactorVerification from "./two-factor";
-import { strings } from "@notesnook/intl";
 
 export const LoginSteps = {
   emailAuth: 1,
@@ -34,15 +35,18 @@ export const LoginSteps = {
   passwordAuth: 3
 };
 
-export const useLogin = (onFinishLogin, sessionExpired = false) => {
+export const useLogin = (
+  onFinishLogin?: () => void,
+  sessionExpired = false
+) => {
   const [error, setError] = useState(false);
   const [loading, setLoading] = useState(false);
   const setUser = useUserStore((state) => state.setUser);
   const [step, setStep] = useState(LoginSteps.emailAuth);
-  const email = useRef();
-  const password = useRef();
-  const emailInputRef = useRef();
-  const passwordInputRef = useRef();
+  const email = useRef<string>();
+  const password = useRef<string>();
+  const emailInputRef = useRef<TextInput>(null);
+  const passwordInputRef = useRef<TextInput>(null);
 
   const validateInfo = () => {
     if (
@@ -69,11 +73,15 @@ export const useLogin = (onFinishLogin, sessionExpired = false) => {
       setLoading(true);
       switch (step) {
         case LoginSteps.emailAuth: {
+          if (!email.current) {
+            setLoading(false);
+            return;
+          }
           const mfaInfo = await db.user.authenticateEmail(email.current);
 
           if (mfaInfo) {
             TwoFactorVerification.present(
-              async (mfa, callback) => {
+              async (mfa: any, callback: (success: boolean) => void) => {
                 try {
                   const success = await db.user.authenticateMultiFactorCode(
                     mfa.code,
@@ -91,7 +99,7 @@ export const useLogin = (onFinishLogin, sessionExpired = false) => {
                   callback && callback(false);
                 } catch (e) {
                   callback && callback(false);
-                  if (e.message === "invalid_grant") {
+                  if ((e as Error).message === "invalid_grant") {
                     eSendEvent(eCloseSimpleDialog, "two_factor_verify");
                     setLoading(false);
                     setStep(LoginSteps.emailAuth);
@@ -111,10 +119,14 @@ export const useLogin = (onFinishLogin, sessionExpired = false) => {
           break;
         }
         case LoginSteps.passwordAuth: {
+          if (!email.current || !password.current) {
+            setLoading(false);
+            return;
+          }
           await db.user.authenticatePassword(
             email.current,
             password.current,
-            null,
+            undefined,
             sessionExpired
           );
           finishLogin();
@@ -123,11 +135,11 @@ export const useLogin = (onFinishLogin, sessionExpired = false) => {
       }
       setLoading(false);
     } catch (e) {
-      finishWithError(e);
+      finishWithError(e as Error);
     }
   };
 
-  const finishWithError = async (e) => {
+  const finishWithError = async (e: Error) => {
     if (e.message === "invalid_grant") setStep(LoginSteps.emailAuth);
     setLoading(false);
     ToastManager.show({
@@ -146,7 +158,7 @@ export const useLogin = (onFinishLogin, sessionExpired = false) => {
     clearMessage();
     ToastManager.show({
       heading: strings.loginSuccess(),
-      message: strings.loginSuccessDesc(),
+      message: strings.loginSuccessDesc(user.email),
       type: "success",
       context: "global"
     });

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

@@ -31,37 +31,39 @@ import ResultDialog from "../dialogs/result";
 import { VaultDialog } from "../dialogs/vault";
 import ImagePreview from "../image-preview";
 import MergeConflicts from "../merge-conflicts";
-import PremiumDialog from "../premium";
-import { Expiring } from "../premium/expiring";
 import SheetProvider from "../sheet-provider";
 import RateAppSheet from "../sheets/rate-app";
 import RecoveryKeySheet from "../sheets/recovery-key";
 import Progress from "../dialogs/progress";
+import { useSettingStore } from "../../stores/use-setting-store";
 
 const DialogProvider = () => {
   const { colors } = useThemeColors();
+  const isAppLoading = useSettingStore((state) => state.isAppLoading);
 
   return (
     <>
       <AppLockPassword />
       <LoadingDialog />
-      <Dialog context="global" />
-      <PremiumDialog colors={colors} />
-      <AuthModal colors={colors} />
-      <MergeConflicts />
-      <RecoveryKeySheet colors={colors} />
       <SheetProvider />
       <SheetProvider context="sync_progress" />
-      <ResultDialog />
-      <VaultDialog colors={colors} />
-      <RateAppSheet />
-      <ImagePreview />
-      <Expiring />
-      <AnnouncementDialog />
-      <SessionExpired />
-      <PDFPreview />
-      <JumpToSectionDialog />
+      <Dialog context="global" />
       <Progress />
+
+      {isAppLoading ? null : (
+        <>
+          <MergeConflicts />
+          <RecoveryKeySheet colors={colors} />
+          <ResultDialog />
+          <VaultDialog colors={colors} />
+          <RateAppSheet />
+          <ImagePreview />
+          <AnnouncementDialog />
+          <SessionExpired />
+          <PDFPreview />
+          <JumpToSectionDialog />
+        </>
+      )}
     </>
   );
 };

apps/mobile/app/components/dialogs/attach-image-dialog/index.tsx

@@ -16,6 +16,9 @@ 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 { useIsFeatureAvailable } from "@notesnook/common";
+import { strings } from "@notesnook/intl";
+import { useThemeColors } from "@notesnook/theme";
 import React, { useState } from "react";
 import {
   Image,
@@ -25,15 +28,13 @@ import {
   View
 } from "react-native";
 import { Image as ImageType } from "react-native-image-crop-picker";
-import { useThemeColors } from "@notesnook/theme";
-import { presentSheet } from "../../../services/event-manager";
-import { defaultBorderRadius, AppFontSize } from "../../../utils/size";
+import { presentSheet, ToastManager } from "../../../services/event-manager";
+import { AppFontSize, defaultBorderRadius } from "../../../utils/size";
+import { DefaultAppStyles } from "../../../utils/styles";
 import { Button } from "../../ui/button";
 import { IconButton } from "../../ui/icon-button";
 import { Notice } from "../../ui/notice";
 import Paragraph from "../../ui/typography/paragraph";
-import { strings } from "@notesnook/intl";
-import { DefaultAppStyles } from "../../../utils/styles";
 
 export default function AttachImage({
   response,
@@ -44,6 +45,7 @@ export default function AttachImage({
   onAttach: ({ compress }: { compress: boolean }) => void;
   close: ((ctx?: string | undefined) => void) | undefined;
 }) {
+  const fullQualityImagesResult = useIsFeatureAvailable("fullQualityImages");
   const { colors } = useThemeColors();
   const [compress, setCompress] = useState(true);
 
@@ -104,21 +106,42 @@ export default function AttachImage({
           alignSelf: "center",
           marginBottom: DefaultAppStyles.GAP_VERTICAL,
           alignItems: "center",
-          width: "100%"
+          width: "100%",
+          opacity: fullQualityImagesResult?.isAllowed ? 1 : 0.5
         }}
         onPress={() => {
+          if (!fullQualityImagesResult?.isAllowed) {
+            ToastManager.show({
+              message: fullQualityImagesResult?.error,
+              type: "info",
+              context: "local"
+            });
+            return;
+          }
           setCompress(!compress);
         }}
       >
         <IconButton
           size={AppFontSize.lg}
           name={compress ? "checkbox-marked" : "checkbox-blank-outline"}
-          color={compress ? colors.primary.accent : colors.primary.icon}
+          color={
+            compress && fullQualityImagesResult?.isAllowed
+              ? colors.primary.accent
+              : colors.primary.icon
+          }
           style={{
             width: 25,
             height: 25
           }}
           onPress={() => {
+            if (!fullQualityImagesResult?.isAllowed) {
+              ToastManager.show({
+                message: fullQualityImagesResult?.error,
+                type: "info",
+                context: "local"
+              });
+              return;
+            }
             setCompress(!compress);
           }}
         />

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

@@ -244,7 +244,7 @@ const PDFPreview = () => {
                       textAlign: "center",
                       marginRight: 4,
                       borderRadius: 3,
-                      fontFamily: "OpenSans-Regular"
+                      fontFamily: "Inter-Regular"
                     }}
                     selectTextOnFocus
                     keyboardType="decimal-pad"

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

@@ -135,7 +135,6 @@ const ResultDialog = () => {
               paddingHorizontal: DefaultAppStyles.GAP
             }}
             onPress={close}
-            fontSize={AppFontSize.md + 2}
           />
         </View>
       </View>

apps/mobile/app/components/fluid-panels/index.tsx

@@ -30,6 +30,7 @@ import { BackHandler, Platform, ViewProps } from "react-native";
 import { Gesture, GestureDetector } from "react-native-gesture-handler";
 import Animated, {
   runOnJS,
+  SharedValue,
   useAnimatedReaction,
   useAnimatedStyle,
   useSharedValue,
@@ -67,6 +68,7 @@ export interface TabsRef {
   setScrollEnabled: () => true;
   isDrawerOpen: () => boolean;
   node: RefObject<Animated.View>;
+  tabChangedFromSwipeAction: SharedValue<boolean>;
 }
 
 export const FluidPanels = forwardRef<TabsRef, TabProps>(function FluidTabs(
@@ -116,6 +118,7 @@ export const FluidPanels = forwardRef<TabsRef, TabProps>(function FluidTabs(
   const isLoaded = useRef(false);
   const prevWidths = useRef(widths);
   const isIPhone = Platform.OS === "ios";
+  const tabChangedFromSwipeAction = useSharedValue(false);
 
   useEffect(() => {
     if (deviceMode === "tablet" || fullscreen) {
@@ -191,6 +194,7 @@ export const FluidPanels = forwardRef<TabsRef, TabProps>(function FluidTabs(
             : withTiming(editorPosition);
           currentTab.value = 2;
         }
+        tabChangedFromSwipeAction.value = false;
       },
       goToIndex: (index: number, animated = true) => {
         if (deviceMode === "tablet") {
@@ -210,6 +214,7 @@ export const FluidPanels = forwardRef<TabsRef, TabProps>(function FluidTabs(
             : editorPosition;
           currentTab.value = 2;
         }
+        tabChangedFromSwipeAction.value = false;
       },
       unlock: () => {
         forcedLock.value = false;
@@ -252,7 +257,8 @@ export const FluidPanels = forwardRef<TabsRef, TabProps>(function FluidTabs(
       },
       page: () => (currentTab.value === 1 ? "home" : "editor"),
       setScrollEnabled: () => true,
-      node: node
+      node: node,
+      tabChangedFromSwipeAction: tabChangedFromSwipeAction
     }),
     [
       currentTab,
@@ -262,7 +268,8 @@ export const FluidPanels = forwardRef<TabsRef, TabProps>(function FluidTabs(
       homePosition,
       editorPosition,
       forcedLock,
-      isDrawerOpen
+      isDrawerOpen,
+      tabChangedFromSwipeAction
     ]
   );
 
@@ -362,18 +369,20 @@ export const FluidPanels = forwardRef<TabsRef, TabProps>(function FluidTabs(
           isDrawerOpen.value = true;
           currentTab.value = 1;
           runOnJS(onDrawerStateChange)(true);
+          tabChangedFromSwipeAction.value = true;
           return;
         } else if (!isSwipeLeft && finalValue > 100) {
           translateX.value = withSpring(homePosition, animationConfig);
           isDrawerOpen.value = false;
           currentTab.value = 1;
           runOnJS(onDrawerStateChange)(false);
-
+          tabChangedFromSwipeAction.value = true;
           return;
         } else if (!isSwipeLeft && finalValue < 100) {
           translateX.value = withSpring(0, animationConfig);
           isDrawerOpen.value = true;
           currentTab.value = 1;
+          tabChangedFromSwipeAction.value = true;
           return;
         }
       }
@@ -384,6 +393,8 @@ export const FluidPanels = forwardRef<TabsRef, TabProps>(function FluidTabs(
           translateX.value = withSpring(editorPosition, animationConfig);
           currentTab.value = 2;
           isDrawerOpen.value = false;
+
+          tabChangedFromSwipeAction.value = true;
           return;
         }
       }
@@ -398,6 +409,8 @@ export const FluidPanels = forwardRef<TabsRef, TabProps>(function FluidTabs(
           translateX.value = withSpring(editorPosition, animationConfig);
           currentTab.value = 2;
         }
+
+        tabChangedFromSwipeAction.value = true;
         return;
       }
 

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

@@ -20,21 +20,22 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import { strings } from "@notesnook/intl";
 import { useThemeColors } from "@notesnook/theme";
 import React from "react";
-import { Linking, ScrollView, useWindowDimensions, View } from "react-native";
+import { Linking, useWindowDimensions, View } from "react-native";
 import { SwiperFlatList } from "react-native-swiper-flatlist";
 import useGlobalSafeAreaInsets from "../../hooks/use-global-safe-area-insets";
 import Navigation from "../../services/navigation";
 import { AppFontSize } from "../../utils/size";
+import { DefaultAppStyles } from "../../utils/styles";
+import { AuthMode } from "../auth/common";
 import { Button } from "../ui/button";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 import SettingsService from "../../services/settings";
-import { AuthMode } from "../auth/common";
-import { DefaultAppStyles } from "../../utils/styles";
+import { SafeAreaView } from "react-native-safe-area-context";
 
 const Intro = () => {
   const { colors } = useThemeColors();
-  const { width, height } = useWindowDimensions();
+  const { width } = useWindowDimensions();
   const insets = useGlobalSafeAreaInsets();
   const isTablet = width > 600;
 
@@ -115,75 +116,102 @@ const Intro = () => {
   );
 
   return (
-    <ScrollView
-      testID="notesnook.splashscreen"
+    <SafeAreaView
       style={{
-        width: "100%",
+        flex: 1,
+        height: "100%",
         backgroundColor: colors.primary.background
       }}
     >
       <View
-        style={[
-          {
-            width: "100%",
-            backgroundColor: colors.secondary.background,
-            borderBottomWidth: 1,
-            borderBottomColor: colors.primary.border,
-            paddingTop: insets.top + 10,
-            paddingBottom: insets.top + 10,
-            minHeight: height * 0.7 - (insets.top + insets.bottom)
-          },
-          isTablet && {
-            width: width / 2,
-            alignSelf: "center",
-            borderWidth: 1,
-            borderColor: colors.primary.border,
-            borderRadius: 20,
-            marginTop: 50
-          }
-        ]}
+        testID="notesnook.splashscreen"
+        style={{
+          flex: 1
+        }}
       >
-        <SwiperFlatList
-          autoplay
-          autoplayDelay={10}
-          autoplayLoop={true}
-          index={0}
-          useReactNativeGestureHandler={true}
-          showPagination
-          data={strings.introData}
-          paginationActiveColor={colors.primary.accent}
-          paginationStyleItem={{
-            width: 10,
-            height: 5,
-            marginRight: 4,
-            marginLeft: 4
-          }}
-          paginationDefaultColor={colors.primary.border}
-          renderItem={renderItem}
-        />
+        <View
+          style={[
+            {
+              width: "100%",
+              borderBottomWidth: 1,
+              borderBottomColor: colors.primary.border,
+              paddingTop: insets.top + 10,
+              paddingBottom: insets.top + 10,
+              flexGrow: 1
+            },
+            isTablet && {
+              width: width / 2,
+              alignSelf: "center",
+              borderWidth: 1,
+              borderColor: colors.primary.border,
+              borderRadius: 20,
+              marginTop: 50
+            }
+          ]}
+        >
+          <SwiperFlatList
+            autoplay
+            autoplayDelay={10}
+            autoplayLoop={true}
+            index={0}
+            useReactNativeGestureHandler={true}
+            showPagination
+            data={strings.introData}
+            paginationActiveColor={colors.primary.accent}
+            paginationStyleItem={{
+              width: 10,
+              height: 5,
+              marginRight: 4,
+              marginLeft: 4
+            }}
+            paginationDefaultColor={colors.primary.border}
+            renderItem={renderItem}
+          />
+        </View>
       </View>
-
       <View
         style={{
-          width: "100%",
+          width: isTablet ? "50%" : "100%",
           justifyContent: "center",
-          minHeight: height * 0.3
+          gap: DefaultAppStyles.GAP_VERTICAL,
+          paddingHorizontal: isTablet ? 0 : DefaultAppStyles.GAP,
+          paddingVertical: DefaultAppStyles.GAP_VERTICAL,
+          flexShrink: 1,
+          alignSelf: "center"
         }}
       >
         <Button
-          width={250}
+          style={{
+            width: "100%"
+          }}
           onPress={async () => {
             SettingsService.set({ introCompleted: true });
             Navigation.push("Auth", {
               mode: AuthMode.welcomeSignup
             });
           }}
-          fontSize={AppFontSize.md}
           type="accent"
           title={strings.getStarted()}
         />
+
+        <Button
+          style={{
+            width: "100%"
+          }}
+          title={strings.iAlreadyHaveAnAccount()}
+          type="secondary"
+          onPress={() => {
+            SettingsService.set({
+              introCompleted: true
+            });
+            Navigation.push("Auth", {
+              mode: AuthMode.welcomeLogin,
+              context: "intro"
+            });
+          }}
+        />
       </View>
-    </ScrollView>
+    </SafeAreaView>
   );
 };
 

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

@@ -44,9 +44,8 @@ export const Header = React.memo(
   }: ListHeaderProps) => {
     const { colors } = useThemeColors();
     const announcements = useMessageStore((state) => state.announcements);
-    const selectionMode = useSelectionStore((state) => state.selectionMode);
 
-    return selectionMode ? null : (
+    return (
       <>
         {announcements.length !== 0 && !noAnnouncement ? (
           <Announcement color={color || colors.primary.accent} />

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

@@ -41,7 +41,7 @@ export const openNotebook = (item: Notebook | BaseTrashItem<Notebook>) => {
       positiveText: strings.restore(),
       negativeText: strings.delete(),
       positivePress: async () => {
-        if ((await db.trash.restore(item.id)) === false) return;
+        await db.trash.restore(item.id);
         Navigation.queueRoutesForUpdate();
         useSelectionStore.getState().setSelectionMode(undefined);
         ToastManager.show({

apps/mobile/app/components/list-items/search-result/index.tsx

@@ -153,7 +153,6 @@ export const SearchResult = (props: SearchResultProps) => {
               for (let i = 0; i <= index; i++) {
                 activeIndex += props.item.content[i].length;
               }
-              console.log(activeIndex);
               openNote(activeIndex);
             }}
           >

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

@@ -30,6 +30,10 @@ import { fluidTabsRef } from "../../utils/global-refs";
 import { AppFontSize } from "../../utils/size";
 import { useSideBarDraggingStore } from "../side-menu/dragging-store";
 import { IconButton } from "../ui/icon-button";
+import { isFeatureAvailable, useIsFeatureAvailable } from "@notesnook/common";
+import PaywallSheet from "../sheets/paywall";
+import { strings } from "@notesnook/intl";
+import { ToastManager } from "../../services/event-manager";
 
 interface ReorderableListProps<T extends { id: string }>
   extends Omit<DraxListProps<T>, "renderItem" | "data" | "renderItemContent"> {
@@ -59,6 +63,9 @@ function ReorderableList<T extends { id: string }>({
   const [hiddenItemsState, setHiddenItems] = useState(hiddenItems);
   const dragging = useSideBarDraggingStore((state) => state.dragging);
   const listRef = useRef<FlatList | null>(null);
+  const customizableSidebarFeature = useIsFeatureAvailable(
+    "customizableSidebar"
+  );
 
   if (dragging) {
     fluidTabsRef.current?.lock();
@@ -125,6 +132,7 @@ function ReorderableList<T extends { id: string }>({
   );
 
   function getOrderedItems() {
+    if (!customizableSidebarFeature?.isAllowed) return data;
     const items: T[] = [];
     itemOrderState.forEach((id) => {
       const item = data.find((i) => i.id === id);
@@ -158,15 +166,39 @@ function ReorderableList<T extends { id: string }>({
           }
         }}
         longPressDelay={500}
-        onItemDragStart={() =>
+        onItemDragStart={async () => {
+          if (
+            customizableSidebarFeature &&
+            !customizableSidebarFeature?.isAllowed
+          ) {
+            ToastManager.show({
+              message: customizableSidebarFeature?.error,
+              type: "info",
+              actionText: strings.upgrade(),
+              func: () => PaywallSheet.present(customizableSidebarFeature)
+            });
+            return;
+          }
+
           useSideBarDraggingStore.setState({
             dragging: true
-          })
-        }
-        disableVirtualization
+          });
+        }}
         itemsDraggable={disableDefaultDrag ? dragging : true}
         lockItemDragsToMainAxis
-        onItemReorder={({ fromIndex, fromItem, toIndex, toItem }) => {
+        onItemReorder={async ({ fromIndex, fromItem, toIndex, toItem }) => {
+          if (
+            customizableSidebarFeature &&
+            !customizableSidebarFeature?.isAllowed
+          ) {
+            ToastManager.show({
+              message: customizableSidebarFeature.error,
+              type: "info",
+              actionText: strings.upgrade(),
+              func: () => PaywallSheet.present(customizableSidebarFeature)
+            });
+            return;
+          }
           const newOrder = getOrderedItems().map((item) => item.id);
           const element = newOrder.splice(fromIndex, 1)[0];
           if (toIndex === 0) {

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

@@ -0,0 +1,88 @@
+/*
+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 { useThemeColors } from "@notesnook/theme";
+import React from "react";
+import { View } from "react-native";
+import Icon from "react-native-vector-icons/MaterialCommunityIcons";
+import { ProgressBarComponent } from "../ui/svg/lazy";
+import Heading from "../ui/typography/heading";
+import Paragraph from "../ui/typography/paragraph";
+export const Loading = (props: {
+  title?: string;
+  description?: string;
+  icon?: string;
+}) => {
+  const { colors } = useThemeColors();
+  return (
+    <View
+      style={{
+        width: "100%",
+        height: "100%",
+        backgroundColor: colors.primary.background,
+        justifyContent: "center",
+        alignItems: "center",
+        paddingHorizontal: 16
+      }}
+    >
+      {props.icon ? (
+        <Icon name={props.icon} size={80} color={colors.primary.accent} />
+      ) : null}
+
+      {props.title ? (
+        <Heading
+          style={{
+            textAlign: "center"
+          }}
+        >
+          {props.title}
+        </Heading>
+      ) : null}
+
+      {props.description ? (
+        <Paragraph
+          style={{
+            textAlign: "center"
+          }}
+        >
+          {props.description}
+        </Paragraph>
+      ) : null}
+
+      <View
+        style={{
+          flexDirection: "row",
+          width: 100,
+          marginTop: 15
+        }}
+      >
+        <ProgressBarComponent
+          height={5}
+          width={100}
+          animated={true}
+          useNativeDriver
+          indeterminate
+          indeterminateAnimationDuration={2000}
+          unfilledColor={colors.secondary.background}
+          color={colors.primary.accent}
+          borderWidth={0}
+        />
+      </View>
+    </View>
+  );
+};

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

@@ -117,7 +117,8 @@ export default function NotePreview({ session, content, note }) {
       {!session?.locked && !locked ? (
         <View
           style={{
-            flex: 1
+            flex: 1,
+            backgroundColor: colors.primary.background
           }}
         >
           <ReadonlyEditor

apps/mobile/app/components/premium/compact-features.js

@@ -1,96 +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 React from "react";
-import { FeatureBlock } from "./feature";
-import { ScrollView } from "react-native-actions-sheet";
-import { DefaultAppStyles } from "../../utils/styles";
-
-export const CompactFeatures = ({
-  vertical,
-  features = [],
-  maxHeight = 600,
-  scrollRef
-}) => {
-  let data = vertical
-    ? features
-    : [
-        {
-          highlight: "Everything",
-          content: "in basic",
-          icon: "emoticon-wink"
-        },
-        {
-          highlight: "Unlimited",
-          content: "notebooks",
-          icon: "notebook"
-        },
-        {
-          highlight: "File & image",
-          content: "attachments",
-          icon: "attachment"
-        },
-        {
-          highlight: "Instant",
-          content: "syncing",
-          icon: "sync"
-        },
-        {
-          highlight: "Private",
-          content: "vault",
-          icon: "shield"
-        },
-        {
-          highlight: "Daily, weekly & monthly",
-          content: "recurring reminders",
-          icon: "bell"
-        },
-        {
-          highlight: "Rich text",
-          content: "editing",
-          icon: "square-edit-outline"
-        },
-        {
-          highlight: "PDF & markdown",
-          content: "exports",
-          icon: "file"
-        },
-        {
-          highlight: "Encrypted",
-          content: "backups",
-          icon: "backup-restore"
-        }
-      ];
-
-  return (
-    <ScrollView
-      horizontal={!vertical}
-      showsHorizontalScrollIndicator={false}
-      style={{
-        width: "100%",
-        maxHeight: maxHeight,
-        paddingHorizontal: DefaultAppStyles.GAP
-      }}
-    >
-      {data.map((item) => (
-        <FeatureBlock key={item.highlight} vertical={vertical} {...item} />
-      ))}
-    </ScrollView>
-  );
-};

apps/mobile/app/components/premium/component.js

@@ -1,290 +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 { useThemeColors } from "@notesnook/theme";
-import React, { useState } from "react";
-import { ActivityIndicator, Platform, ScrollView, View } from "react-native";
-import { LAUNCH_ROCKET } from "../../assets/images/assets";
-import { db } from "../../common/database";
-import { usePricing } from "../../hooks/use-pricing";
-import { DDS } from "../../services/device-detection";
-import { eSendEvent, presentSheet } from "../../services/event-manager";
-import Navigation from "../../services/navigation";
-import { useUserStore } from "../../stores/use-user-store";
-import { getElevationStyle } from "../../utils/elevation";
-import { eClosePremiumDialog, eCloseSheet } from "../../utils/events";
-import { AppFontSize } from "../../utils/size";
-import { sleep } from "../../utils/time";
-import { AuthMode } from "../auth/common";
-import SheetProvider from "../sheet-provider";
-import { Toast } from "../toast";
-import { Button } from "../ui/button";
-import { IconButton } from "../ui/icon-button";
-import Seperator from "../ui/seperator";
-import { SvgView } from "../ui/svg";
-import Heading from "../ui/typography/heading";
-import Paragraph from "../ui/typography/paragraph";
-import { Walkthrough } from "../walkthroughs";
-import { features } from "./features";
-import { Group } from "./group";
-import { PricingPlans } from "./pricing-plans";
-import { DefaultAppStyles } from "../../utils/styles";
-
-export const Component = ({ close, promo }) => {
-  const { colors } = useThemeColors();
-  const user = useUserStore((state) => state.user);
-  const userCanRequestTrial =
-    user && (!user.subscription || !user.subscription.expiry) ? true : false;
-  const [floatingButton, setFloatingButton] = useState(false);
-  const pricing = usePricing("monthly");
-
-  const onPress = async () => {
-    if (user) {
-      presentSheet({
-        context: "pricing_plans",
-        component: (
-          <PricingPlans showTrialOption={false} marginTop={1} promo={promo} />
-        )
-      });
-    } else {
-      close();
-      Navigation.navigate("Auth", {
-        mode: AuthMode.trialSignup
-      });
-    }
-  };
-
-  const onScroll = (event) => {
-    let contentSize = event.nativeEvent.contentSize.height;
-    contentSize = contentSize - event.nativeEvent.layoutMeasurement.height;
-    let yOffset = event.nativeEvent.contentOffset.y;
-    if (yOffset > 600 && yOffset < contentSize - 400) {
-      setFloatingButton(true);
-    } else {
-      setFloatingButton(false);
-    }
-  };
-
-  return (
-    <View
-      style={{
-        width: "100%",
-        backgroundColor: colors.primary.background,
-        justifyContent: "space-between",
-        borderRadius: 10,
-        maxHeight: "100%"
-      }}
-    >
-      <SheetProvider context="pricing_plans" />
-      <IconButton
-        onPress={() => {
-          close();
-        }}
-        style={{
-          position: "absolute",
-          right: DDS.isTab ? 30 : 15,
-          top: Platform.OS === "ios" ? 0 : 30,
-          zIndex: 10,
-          width: 50,
-          height: 50
-        }}
-        color={colors.primary.paragraph}
-        name="close"
-      />
-
-      <ScrollView
-        style={{
-          paddingHorizontal: DDS.isTab ? DDS.width / 5 : 0
-        }}
-        scrollEventThrottle={0}
-        keyboardDismissMode="none"
-        keyboardShouldPersistTaps="always"
-        onScroll={onScroll}
-      >
-        <View
-          key="top-banner"
-          style={{
-            width: "100%",
-            alignItems: "center",
-            height: 400,
-            justifyContent: "center"
-          }}
-        >
-          <SvgView
-            width={350}
-            height={350}
-            src={LAUNCH_ROCKET(colors.primary.accent)}
-          />
-        </View>
-
-        <Heading
-          key="heading"
-          size={AppFontSize.lg}
-          style={{
-            alignSelf: "center",
-            paddingTop: 20
-          }}
-        >
-          Notesnook{" "}
-          <Heading size={AppFontSize.lg} color={colors.primary.accent}>
-            Pro
-          </Heading>
-        </Heading>
-
-        {!pricing ? (
-          <ActivityIndicator
-            style={{
-              marginBottom: 20
-            }}
-            size={AppFontSize.md}
-            color={colors.primary.accent}
-          />
-        ) : (
-          <Paragraph
-            style={{
-              alignSelf: "center",
-              marginBottom: 20
-            }}
-            size={AppFontSize.md}
-          >
-            (
-            {Platform.OS === "android"
-              ? pricing.product?.subscriptionOfferDetails[0]?.pricingPhases
-                  .pricingPhaseList?.[0].formattedPrice
-              : pricing.product?.localizedPrice}{" "}
-            / mo)
-          </Paragraph>
-        )}
-
-        <Paragraph
-          key="description"
-          size={AppFontSize.md}
-          style={{
-            paddingHorizontal: DefaultAppStyles.GAP,
-            textAlign: "center",
-            alignSelf: "center",
-            paddingBottom: 20,
-            width: "90%"
-          }}
-        >
-          Ready to take the next step on your private note taking journey?
-        </Paragraph>
-
-        {userCanRequestTrial ? (
-          <Button
-            key="calltoaction"
-            onPress={async () => {
-              try {
-                await db.user.activateTrial();
-                eSendEvent(eClosePremiumDialog);
-                eSendEvent(eCloseSheet);
-                await sleep(300);
-                Walkthrough.present("trialstarted", false, true);
-              } catch (e) {
-                console.error(e);
-              }
-            }}
-            title="Try free for 14 days"
-            type="accent"
-            width={250}
-            style={{
-              paddingHorizontal: DefaultAppStyles.GAP,
-              marginBottom: 15,
-              borderRadius: 100
-            }}
-          />
-        ) : null}
-
-        <Button
-          key="calltoaction"
-          onPress={onPress}
-          title={
-            promo ? promo.text : user ? "See all plans" : "Sign up for free"
-          }
-          type={userCanRequestTrial ? "secondaryAccented" : "accent"}
-          width={250}
-          style={{
-            paddingHorizontal: DefaultAppStyles.GAP,
-            marginBottom: 15,
-            borderRadius: 100
-          }}
-        />
-
-        {!user || userCanRequestTrial ? (
-          <Paragraph
-            color={colors.secondary.paragraph}
-            size={AppFontSize.xs}
-            style={{
-              alignSelf: "center",
-              textAlign: "center",
-              marginTop: DefaultAppStyles.GAP_VERTICAL,
-              maxWidth: "80%"
-            }}
-          >
-            {user
-              ? 'On clicking "Try free for 14 days", your free trial will be activated.'
-              : "After sign up you will be asked to activate your free trial."}{" "}
-            <Paragraph size={AppFontSize.xs} style={{ fontWeight: "bold" }}>
-              No credit card is required.
-            </Paragraph>
-          </Paragraph>
-        ) : null}
-
-        <Seperator key="seperator_1" />
-
-        {features.map((item, index) => (
-          <Group key={item.title} item={item} index={index} />
-        ))}
-
-        <View
-          key="plans"
-          style={{
-            paddingHorizontal: DefaultAppStyles.GAP
-          }}
-        >
-          <PricingPlans showTrialOption={false} promo={promo} />
-        </View>
-      </ScrollView>
-
-      {floatingButton ? (
-        <Button
-          onPress={onPress}
-          title={
-            promo ? promo.text : user ? "See all plans" : "Sign up for free"
-          }
-          type="accent"
-          style={{
-            paddingHorizontal: DefaultAppStyles.GAP * 2,
-            position: "absolute",
-            borderRadius: 100,
-            bottom: 30,
-            ...getElevationStyle(10)
-          }}
-        />
-      ) : null}
-
-      <Toast context="local" />
-      <View
-        style={{
-          paddingBottom: 10
-        }}
-      />
-    </View>
-  );
-};

apps/mobile/app/components/premium/expiring.js

@@ -1,218 +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 React, { useEffect, useState } from "react";
-import { View } from "react-native";
-import { usePricing } from "../../hooks/use-pricing";
-import {
-  eSendEvent,
-  eSubscribeEvent,
-  eUnSubscribeEvent
-} from "../../services/event-manager";
-import PremiumService from "../../services/premium";
-import { useThemeColors } from "@notesnook/theme";
-import {
-  eOpenPremiumDialog,
-  eOpenResultDialog,
-  eOpenTrialEndingDialog
-} from "../../utils/events";
-import { AppFontSize } from "../../utils/size";
-import { sleep } from "../../utils/time";
-import BaseDialog from "../dialog/base-dialog";
-import DialogContainer from "../dialog/dialog-container";
-import { Button } from "../ui/button";
-import Seperator from "../ui/seperator";
-import Heading from "../ui/typography/heading";
-import Paragraph from "../ui/typography/paragraph";
-import { CompactFeatures } from "./compact-features";
-import { Offer } from "./offer";
-import { DefaultAppStyles } from "../../utils/styles";
-
-export const Expiring = () => {
-  const { colors } = useThemeColors();
-  const [visible, setVisible] = useState(false);
-  const [status, setStatus] = useState({
-    title: "Your trial is ending soon",
-    offer: "Get 30% off",
-    extend: true
-  });
-  const pricing = usePricing("yearly");
-  const promo =
-    status.offer && pricing?.info
-      ? {
-          promoCode:
-            pricing?.info?.discount > 30
-              ? pricing.info.sku
-              : "com.streetwriters.notesnook.sub.yr.trialoffer",
-          text: `GET ${
-            pricing?.info?.discount > 30 ? pricing?.info?.discount : 30
-          }% OFF on yearly`,
-          discount: pricing?.info?.discount > 30 ? pricing?.info?.discount : 30
-        }
-      : null;
-
-  useEffect(() => {
-    eSubscribeEvent(eOpenTrialEndingDialog, open);
-    return () => {
-      eUnSubscribeEvent(eOpenTrialEndingDialog, open);
-    };
-  }, []);
-
-  const open = (status) => {
-    setStatus(status);
-    setVisible(true);
-  };
-
-  return (
-    visible && (
-      <BaseDialog
-        onRequestClose={() => {
-          setVisible(false);
-        }}
-      >
-        <DialogContainer>
-          <View
-            style={{
-              width: "100%",
-              alignItems: "center"
-            }}
-          >
-            <View
-              style={{
-                paddingHorizontal: DefaultAppStyles.GAP,
-                width: "100%"
-              }}
-            >
-              <Heading
-                textBreakStrategy="balanced"
-                style={{
-                  textAlign: "center",
-                  paddingTop: 18
-                }}
-              >
-                {status.title}
-              </Heading>
-              <Seperator />
-              <View
-                style={{
-                  width: "100%",
-                  alignItems: "center"
-                }}
-              >
-                {status.offer ? (
-                  <>
-                    <Offer padding={20} off={promo?.discount || 30} />
-                  </>
-                ) : (
-                  <>
-                    <Paragraph
-                      textBreakStrategy="balanced"
-                      style={{
-                        textAlign: "center",
-                        paddingTop: 0,
-                        paddingBottom: 20
-                      }}
-                      size={AppFontSize.md + 2}
-                    >
-                      Upgrade now to continue using all the pro features after
-                      your trial ends
-                    </Paragraph>
-                  </>
-                )}
-
-                <CompactFeatures />
-
-                <Paragraph
-                  onPress={async () => {
-                    setVisible(false);
-                    await sleep(300);
-                    eSendEvent(eOpenPremiumDialog, promo);
-                  }}
-                  size={AppFontSize.xs}
-                  style={{
-                    textDecorationLine: "underline",
-                    color: colors.secondary.paragraph,
-                    marginTop: DefaultAppStyles.GAP_VERTICAL
-                  }}
-                >
-                  {"See what's included in Basic & Pro plans"}
-                </Paragraph>
-
-                <Seperator />
-              </View>
-            </View>
-
-            <View
-              style={{
-                backgroundColor: colors.secondary.background,
-                width: "100%",
-                borderBottomRightRadius: 10,
-                borderBottomLeftRadius: 10
-              }}
-            >
-              <Button
-                type="transparent"
-                title="Subscribe now"
-                onPress={async () => {
-                  setVisible(false);
-                  await sleep(300);
-                  PremiumService.sheet(
-                    null,
-                    promo?.discount > 30 ? null : promo
-                  );
-                }}
-                fontSize={AppFontSize.md + 2}
-                style={{
-                  marginBottom: status.extend ? 0 : 10,
-                  marginTop: DefaultAppStyles.GAP_VERTICAL,
-                  paddingHorizontal: DefaultAppStyles.GAP * 2
-                }}
-              />
-
-              {status.extend && (
-                <Button
-                  type="plain"
-                  title="Not sure yet? Extend trial for 7 days"
-                  textStyle={{
-                    textDecorationLine: "underline"
-                  }}
-                  onPress={async () => {
-                    setVisible(false);
-                    await sleep(300);
-                    eSendEvent(eOpenResultDialog, {
-                      title: "Your trial has been extended",
-                      paragraph:
-                        "Try out all features of Notesnook free for 7 more days. No limitations. No commitments.",
-                      button: "Continue"
-                    });
-                  }}
-                  fontSize={AppFontSize.xs}
-                  height={30}
-                  style={{
-                    marginBottom: DefaultAppStyles.GAP_VERTICAL
-                  }}
-                />
-              )}
-            </View>
-          </View>
-        </DialogContainer>
-      </BaseDialog>
-    )
-  );
-};

apps/mobile/app/components/premium/feature.js

@@ -1,97 +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 React from "react";
-import { Text, View } from "react-native";
-import Icon from "react-native-vector-icons/MaterialCommunityIcons";
-import { useThemeColors } from "@notesnook/theme";
-import { defaultBorderRadius, AppFontSize } from "../../utils/size";
-import Paragraph from "../ui/typography/paragraph";
-import { ProTag } from "./pro-tag";
-import { DefaultAppStyles } from "../../utils/styles";
-
-export const FeatureBlock = ({
-  vertical,
-  highlight,
-  content,
-  icon,
-  pro,
-  proTagBg
-}) => {
-  const { colors } = useThemeColors();
-
-  return vertical ? (
-    <View
-      style={{
-        flexDirection: "row",
-        alignItems: "center",
-        paddingHorizontal: DefaultAppStyles.GAP,
-        marginBottom: DefaultAppStyles.GAP_VERTICAL,
-        backgroundColor: colors.secondary.background,
-        borderRadius: 10,
-        paddingVertical: DefaultAppStyles.GAP_VERTICAL
-      }}
-    >
-      <Paragraph
-        style={{
-          flexWrap: "wrap",
-          marginLeft: 5,
-          flexShrink: 1
-        }}
-        size={AppFontSize.sm}
-      >
-        {content}
-      </Paragraph>
-    </View>
-  ) : (
-    <View
-      style={{
-        height: 100,
-        justifyContent: "center",
-        padding: DefaultAppStyles.GAP_SMALL,
-        marginRight: 10,
-        borderRadius: defaultBorderRadius,
-        minWidth: 100
-      }}
-    >
-      <Icon color={colors.primary.icon} name={icon} size={AppFontSize.xl} />
-      <Paragraph size={AppFontSize.md}>
-        <Text style={{ color: colors.primary.accent }}>{highlight}</Text>
-        {content ? "\n" + content : null}
-      </Paragraph>
-
-      {pro ? (
-        <>
-          <View style={{ height: 5 }} />
-          <ProTag width={50} size={AppFontSize.xs} background={proTagBg} />
-        </>
-      ) : (
-        <View
-          style={{
-            width: 30,
-            height: 3,
-            marginTop: DefaultAppStyles.GAP_VERTICAL,
-            borderRadius: 100,
-            backgroundColor: colors.primary.accent
-          }}
-        />
-      )}
-    </View>
-  );
-};

apps/mobile/app/components/premium/features.js

@@ -1,318 +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/>.
-*/
-
-export const features = [
-  {
-    title: "Focused on privacy",
-    detail:
-      "Everything you do in Notesnook stays private. We use XChaCha20-Poly1305-IETF and Argon2 to encrypt your notes.",
-    features: [
-      {
-        highlight: "Zero ads",
-        content: "& zero trackers",
-        icon: "billboard"
-      },
-      {
-        highlight: "On device",
-        content: "encryption",
-        icon: "cellphone"
-      },
-      {
-        highlight: "Secure app",
-        content: "lock for all",
-        icon: "cellphone-lock"
-      },
-      {
-        highlight: "100% end-to-end ",
-        content: "encrypted",
-        icon: "lock"
-      },
-      {
-        highlight: "Password protected",
-        content: "notes sharing",
-        icon: "file-lock"
-      }
-    ]
-  },
-  {
-    title: "No limit on notes or devices",
-    detail:
-      "Basic or Pro, you can create unlimited number of notes and access them on all your devices. You won't be running out of space or blocks ever."
-  },
-  {
-    title: "Attach files & images",
-    detail:
-      "Add your documents, PDFs, images and videos, and keep them safe and organized.",
-    pro: true,
-    features: [
-      {
-        highlight: "Bullet proof",
-        content: "encryption",
-        icon: "lock"
-      },
-      {
-        highlight: "High quality",
-        content: "4k images",
-        icon: "image-multiple"
-      },
-      {
-        highlight: "No monthly",
-        content: "storage limit",
-        icon: "harddisk"
-      },
-      {
-        highlight: "Generous 500 MB",
-        content: "max file size",
-        icon: "file-cabinet"
-      },
-      {
-        highlight: "No restriction",
-        content: "on file type",
-        icon: "file"
-      }
-    ]
-  },
-  {
-    title: "Cross platform Reminders",
-    detail: "Stay updated on all your upcoming tasks with reminders.",
-    features: [
-      {
-        highlight: "One-time",
-        content: "reminders",
-        icon: "bell"
-      },
-      {
-        highlight: "Daily, weekly & monthly",
-        content: "reminders",
-        icon: "refresh",
-        pro: true
-      }
-    ]
-  },
-  {
-    title: "Two-factor authentication",
-    detail:
-      "Improve account security & prevent intruders from accessing your notes",
-    info: "* 2FA via email is enabled by default for all users.",
-    features: [
-      {
-        highlight: "Email *",
-        icon: "bell"
-      },
-      {
-        highlight: "Authentication",
-        content: "app",
-        icon: "refresh"
-      },
-      {
-        highlight: "SMS",
-        icon: "refresh",
-        pro: true
-      }
-    ]
-  },
-  {
-    title: "Keep secrets always locked with private vault",
-    detail:
-      "An extra layer of security for any important data. Notes in the vault always stay encrypted and require a password to be accessed or edited everytime.",
-    pro: true
-  },
-  {
-    title: "Organize yourself in the best way",
-    detail:
-      "We offer multiple ways to keep you organized. The only limit is your imagination.",
-    features: [
-      {
-        highlight: "Unlimited",
-        content: "notebooks & tags*",
-        icon: "emoticon",
-        pro: true
-      },
-      {
-        highlight: "Organize",
-        content: "with colors",
-        icon: "palette",
-        pro: true
-      },
-      {
-        highlight: "Side menu",
-        content: "shortcuts",
-        icon: "link-variant"
-      },
-      {
-        highlight: "Pin note in",
-        content: "notifications",
-        icon: "pin",
-        platform: "android"
-      }
-    ],
-    info: "* Free users are limited to keeping 3 notebooks and 5 tags."
-  },
-
-  {
-    title: "Instant sync",
-    detail:
-      "Seamlessly work from anywhere on any device. Every change is synced instantly to all your devices.",
-    info: "* Disable sync completely, turn off auto sync or disable editor realtime sync.",
-    features: [
-      {
-        highlight: "Sync to unlimited",
-        content: "devices",
-        icon: "cellphone"
-      },
-      {
-        highlight: "Realtime",
-        content: "editor sync",
-        icon: "sync"
-      },
-      {
-        highlight: "Granular sync",
-        content: "controls *",
-        icon: "sync-off"
-      }
-    ]
-  },
-  {
-    title: "Rich tools for rich editing",
-    detail:
-      "Having the right tool at the right time is crucial for note taking. Lists, tables, codeblocks — you name it, we have it.",
-    features: [
-      {
-        highlight: "Basic formatting",
-        content: "and lists",
-        icon: "format-bold"
-      },
-      {
-        highlight: "Checklists",
-        content: "& tables",
-        icon: "table",
-        pro: true
-      },
-      {
-        highlight: "Markdown",
-        content: "support",
-        icon: "language-markdown",
-        pro: true
-      },
-      {
-        highlight: "Personalized",
-        content: "editor toolbar",
-        icon: "gesture-tap-button",
-        pro: true
-      },
-      {
-        highlight: "Write notes from",
-        content: "notifications",
-        icon: "bell",
-        platform: "android"
-      }
-    ]
-  },
-  {
-    title: "Safe publishing to the Internet",
-    detail:
-      "Publishing is nothing new but we offer fully encrypted, anonymous publishing. Take any note & share it with the world.",
-    features: [
-      {
-        highlight: "Password protected",
-        content: "sharing",
-        icon: "send-lock"
-      },
-      {
-        highlight: "Self destruct",
-        content: "monographs",
-        icon: "bomb"
-      }
-    ]
-  },
-  {
-    title: "Export and take your notes anywhere",
-    pro: true,
-    detail:
-      "You own your notes, not us. No proprietary formats. No vendor lock in. No waiting for hours to download your notes.",
-    info: "* Free users can export notes in well formatted plain text.",
-    features: [
-      {
-        highlight: "Export as ",
-        content: "Markdown",
-        icon: "language-markdown",
-        pro: true
-      },
-      {
-        highlight: "Export as",
-        content: "PDF",
-        icon: "file-pdf-box",
-        pro: true
-      },
-      {
-        highlight: "Export as",
-        content: "HTML",
-        icon: "language-html5",
-        pro: true
-      },
-      {
-        highlight: "Export as",
-        content: "text",
-        icon: "clipboard-text-outline"
-      }
-    ]
-  },
-  {
-    title: "Backup & keep your notes safe",
-    detail:
-      "Do not worry about losing your data. Turn on automatic backups on weekly or daily basis.",
-    features: [
-      {
-        highlight: "Backup",
-        content: "encryption",
-        icon: "backup-restore"
-      }
-    ],
-    pro: true
-  },
-  {
-    title: "Personalize & make Notesnook your own",
-    detail:
-      "Change app themes to match your style. Custom themes are coming soon.",
-
-    features: [
-      {
-        highlight: "Automatic",
-        content: "dark mode",
-        icon: "theme-light-dark",
-        pro: false
-      },
-      {
-        highlight: "Change accent",
-        content: "color",
-        icon: "invert-colors",
-        pro: true
-      }
-    ]
-  }
-];
-
-/**
- * 
-      {
-        highlight: 'Private vault',
-        content: 'for notes',
-        icon: 'shield-lock'
-      }
- */

apps/mobile/app/components/premium/group.js

@@ -1,93 +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 React from "react";
-import { ScrollView, View } from "react-native";
-import { useThemeColors } from "@notesnook/theme";
-import { AppFontSize } from "../../utils/size";
-import Heading from "../ui/typography/heading";
-import Paragraph from "../ui/typography/paragraph";
-import { FeatureBlock } from "./feature";
-import { ProTag } from "./pro-tag";
-import { DefaultAppStyles } from "../../utils/styles";
-
-export const Group = ({ item, index }) => {
-  const { colors } = useThemeColors();
-
-  return (
-    <View
-      style={{
-        paddingHorizontal: DefaultAppStyles.GAP,
-        backgroundColor:
-          index % 2 !== 0
-            ? colors.primary.background
-            : colors.secondary.background,
-        paddingVertical: 40
-      }}
-    >
-      {item?.pro ? (
-        <ProTag
-          size={AppFontSize.sm}
-          background={
-            index % 2 === 0
-              ? colors.primary.background
-              : colors.secondary.background
-          }
-        />
-      ) : null}
-      <Heading>{item.title}</Heading>
-      <Paragraph size={AppFontSize.md}>{item.detail}</Paragraph>
-
-      {item.features && (
-        <ScrollView
-          style={{
-            marginTop: DefaultAppStyles.GAP
-          }}
-          horizontal
-          showsHorizontalScrollIndicator={false}
-        >
-          {item.features?.map((item) => (
-            <FeatureBlock
-              key={item.detail}
-              {...item}
-              detail={item.detail}
-              pro={item.pro}
-              proTagBg={
-                index % 2 === 0
-                  ? colors.primary.background
-                  : colors.secondary.background
-              }
-            />
-          ))}
-        </ScrollView>
-      )}
-      {item.info ? (
-        <Paragraph
-          style={{
-            marginTop: DefaultAppStyles.GAP_VERTICAL
-          }}
-          size={AppFontSize.xs}
-          color={colors.secondary.paragraph}
-        >
-          {item.info}
-        </Paragraph>
-      ) : null}
-    </View>
-  );
-};

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

@@ -1,87 +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 React, { createRef } from "react";
-import {
-  eSubscribeEvent,
-  eUnSubscribeEvent
-} from "../../services/event-manager";
-import { eClosePremiumDialog, eOpenPremiumDialog } from "../../utils/events";
-import BaseDialog from "../dialog/base-dialog";
-import { Component } from "./component";
-
-class PremiumDialog extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      visible: false,
-      promo: null
-    };
-    this.actionSheetRef = createRef();
-  }
-
-  componentDidMount() {
-    eSubscribeEvent(eOpenPremiumDialog, this.open);
-    eSubscribeEvent(eClosePremiumDialog, this.close);
-  }
-
-  componentWillUnmount() {
-    eUnSubscribeEvent(eOpenPremiumDialog, this.open);
-    eUnSubscribeEvent(eClosePremiumDialog, this.close);
-  }
-
-  open = (promoInfo) => {
-    this.setState({
-      visible: true,
-      promo: promoInfo
-    });
-  };
-
-  close = () => {
-    this.setState({
-      visible: false,
-      promo: null
-    });
-  };
-
-  onClose = () => {
-    this.setState({
-      visible: false
-    });
-  };
-
-  render() {
-    return !this.state.visible ? null : (
-      <BaseDialog
-        animation="slide"
-        bounce={false}
-        background={this.props.colors.primary.background}
-        onRequestClose={this.onClose}
-      >
-        <Component
-          getRef={() => this.actionSheetRef}
-          promo={this.state.promo}
-          close={this.close}
-        />
-      </BaseDialog>
-    );
-  }
-}
-
-export default PremiumDialog;

apps/mobile/app/components/premium/premium-toast.js

@@ -1,144 +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 React, { useCallback, useEffect, useRef, useState } from "react";
-import { View } from "react-native";
-import Animated, { FadeInUp, FadeOutUp } from "react-native-reanimated";
-import useKeyboard from "../../hooks/use-keyboard";
-import { DDS } from "../../services/device-detection";
-import {
-  eSendEvent,
-  eSubscribeEvent,
-  eUnSubscribeEvent
-} from "../../services/event-manager";
-import { useThemeColors } from "@notesnook/theme";
-import { getElevationStyle } from "../../utils/elevation";
-import {
-  eCloseActionSheet,
-  eCloseSheet,
-  eOpenPremiumDialog,
-  eShowGetPremium
-} from "../../utils/events";
-import { AppFontSize } from "../../utils/size";
-import { sleep } from "../../utils/time";
-import { Button } from "../ui/button";
-import Heading from "../ui/typography/heading";
-import Paragraph from "../ui/typography/paragraph";
-import { DefaultAppStyles } from "../../utils/styles";
-
-export const PremiumToast = ({ context = "global", offset = 0 }) => {
-  const { colors } = useThemeColors();
-  const [msg, setMsg] = useState(null);
-  const timer = useRef();
-  const keyboard = useKeyboard();
-
-  const open = useCallback(
-    (event) => {
-      if (!event) {
-        clearTimeout(timer);
-        timer.current = null;
-        setMsg(null);
-        return;
-      }
-
-      if (event.context === context && msg?.desc !== event.desc) {
-        if (timer.current !== null) {
-          clearTimeout(timer.current);
-          timer.current = null;
-        }
-        setMsg(event);
-        timer.current = setTimeout(async () => {
-          setMsg(null);
-        }, 3000);
-      }
-    },
-    [context, msg?.desc]
-  );
-
-  useEffect(() => {
-    eSubscribeEvent(eShowGetPremium, open);
-    return () => {
-      eUnSubscribeEvent(eShowGetPremium, open);
-    };
-  }, [open]);
-
-  const onPress = async () => {
-    open(null);
-    eSendEvent(eCloseActionSheet);
-    eSendEvent(eCloseSheet);
-    await sleep(300);
-    eSendEvent(eOpenPremiumDialog);
-  };
-
-  return (
-    !!msg && (
-      <Animated.View
-        entering={FadeInUp}
-        exiting={FadeOutUp}
-        style={{
-          position: "absolute",
-          backgroundColor: colors.secondary.background,
-          zIndex: 999,
-          ...getElevationStyle(20),
-          padding: DefaultAppStyles.GAP,
-          borderRadius: 10,
-          flexDirection: "row",
-          alignSelf: "center",
-          justifyContent: "space-between",
-          top: offset + keyboard.keyboardHeight,
-          maxWidth: DDS.isLargeTablet() ? 400 : "98%"
-        }}
-        onTouchEnd={() => {
-          setMsg(null);
-          clearTimeout(timer.current);
-        }}
-      >
-        <View
-          style={{
-            flexShrink: 1,
-            flexGrow: 1,
-            paddingRight: 6
-          }}
-        >
-          <Heading
-            style={{
-              flexWrap: "wrap"
-            }}
-            color={colors.primary.accent}
-            size={AppFontSize.md}
-          >
-            {msg.title}
-          </Heading>
-
-          <Paragraph
-            style={{
-              flexWrap: "wrap"
-            }}
-            size={AppFontSize.sm}
-            color={colors.primary.paragraph}
-          >
-            {msg.desc}
-          </Paragraph>
-        </View>
-
-        <Button onPress={onPress} title="Get Now" type="accent" />
-      </Animated.View>
-    )
-  );
-};

apps/mobile/app/components/premium/pricing-item.tsx

@@ -1,101 +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 React from "react";
-import { Platform, View } from "react-native";
-import { AppFontSize } from "../../utils/size";
-import { Pressable } from "../ui/pressable";
-import Heading from "../ui/typography/heading";
-import Paragraph from "../ui/typography/paragraph";
-import RNIap from "react-native-iap";
-import { DefaultAppStyles } from "../../utils/styles";
-
-export const PricingItem = ({
-  product,
-  onPress,
-  compact,
-  strikethrough
-}: {
-  product: {
-    type: "yearly" | "monthly";
-    data?: RNIap.Subscription;
-    info: string;
-    offerType?: "yearly" | "monthly";
-  };
-  strikethrough?: boolean;
-  onPress?: () => void;
-  compact?: boolean;
-}) => {
-  return (
-    <Pressable
-      onPress={onPress}
-      type="secondary"
-      style={{
-        flexDirection: "row",
-        justifyContent: "space-between",
-        alignItems: "center",
-        paddingHorizontal: DefaultAppStyles.GAP,
-        paddingVertical: compact ? 15 : 10,
-        width: compact ? null : "100%",
-        minWidth: 150,
-        opacity: strikethrough ? 0.7 : 1
-      }}
-      disabled={strikethrough}
-    >
-      {!compact && (
-        <View>
-          <Heading size={AppFontSize.lg - 2}>
-            {product?.type === "yearly" || product?.offerType === "yearly"
-              ? "Yearly"
-              : "Monthly"}
-          </Heading>
-          {product?.info && (
-            <Paragraph size={AppFontSize.xs}>{product.info}</Paragraph>
-          )}
-        </View>
-      )}
-
-      <View>
-        <Paragraph
-          style={{
-            textDecorationLine: strikethrough ? "line-through" : undefined
-          }}
-          size={AppFontSize.sm}
-        >
-          <Heading
-            style={{
-              textDecorationLine: strikethrough ? "line-through" : undefined
-            }}
-            size={AppFontSize.lg - 2}
-          >
-            {Platform.OS === "android"
-              ? (product.data as RNIap.SubscriptionAndroid | undefined)
-                  ?.subscriptionOfferDetails?.[0]?.pricingPhases
-                  .pricingPhaseList?.[0]?.formattedPrice
-              : (product.data as RNIap.SubscriptionIOS | undefined)
-                  ?.localizedPrice}
-          </Heading>
-          {product?.type === "yearly" || product?.offerType === "yearly"
-            ? "/year"
-            : "/month"}
-        </Paragraph>
-      </View>
-    </Pressable>
-  );
-};

apps/mobile/app/components/premium/pricing-plans.tsx

@@ -1,735 +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 { strings } from "@notesnook/intl";
-import { useThemeColors } from "@notesnook/theme";
-import React, { useCallback, useEffect, useState } from "react";
-import { ActivityIndicator, Platform, Text, View } from "react-native";
-import * as RNIap from "react-native-iap";
-import { DatabaseLogger, db } from "../../common/database";
-import { usePricing } from "../../hooks/use-pricing";
-import {
-  eSendEvent,
-  presentSheet,
-  ToastManager
-} from "../../services/event-manager";
-import Navigation from "../../services/navigation";
-import PremiumService from "../../services/premium";
-import { useSettingStore } from "../../stores/use-setting-store";
-import { useUserStore } from "../../stores/use-user-store";
-import {
-  eClosePremiumDialog,
-  eCloseSheet,
-  eCloseSimpleDialog
-} from "../../utils/events";
-import { openLinkInBrowser } from "../../utils/functions";
-import { AppFontSize } from "../../utils/size";
-import { sleep } from "../../utils/time";
-import { AuthMode } from "../auth/common";
-import { Dialog } from "../dialog";
-import BaseDialog from "../dialog/base-dialog";
-import { presentDialog } from "../dialog/functions";
-import { Button } from "../ui/button";
-import Heading from "../ui/typography/heading";
-import Paragraph from "../ui/typography/paragraph";
-import { Walkthrough } from "../walkthroughs";
-import { PricingItem } from "./pricing-item";
-import { DefaultAppStyles } from "../../utils/styles";
-
-const UUID_PREFIX = "0bdaea";
-const UUID_VERSION = "4";
-const UUID_VARIANT = "a";
-
-function toUUID(str: string) {
-  return [
-    UUID_PREFIX + str.substring(0, 2), // 6 digit prefix + first 2 oid digits
-    str.substring(2, 6), // # next 4 oid digits
-    UUID_VERSION + str.substring(6, 9), // # 1 digit version(0x4) + next 3 oid digits
-    UUID_VARIANT + str.substring(9, 12), // # 1 digit variant(0b101) + 1 zero bit + next 3 oid digits
-    str.substring(12)
-  ].join("-");
-}
-
-const promoCyclesMonthly = {
-  1: "first month",
-  2: "first 2 months",
-  3: "first 3 months",
-  4: "first 4 months",
-  5: "first 5 months",
-  6: "first 3 months"
-};
-
-const promoCyclesYearly = {
-  1: "first year",
-  2: "first 2 years",
-  3: "first 3 years"
-};
-
-export const PricingPlans = ({
-  promo,
-  marginTop,
-  heading = true,
-  compact = false
-}: {
-  promo?: {
-    promoCode: string;
-  };
-  marginTop?: any;
-  heading?: boolean;
-  compact?: boolean;
-}) => {
-  const { colors } = useThemeColors();
-  const user = useUserStore((state) => state.user);
-  const [product, setProduct] = useState<{
-    type: string;
-    offerType: "monthly" | "yearly";
-    data: RNIap.Subscription;
-    cycleText: string;
-    info: string;
-  }>();
-
-  const [buying, setBuying] = useState(false);
-  const [loading, setLoading] = useState(false);
-  const userCanRequestTrial =
-    user && (!user.subscription || !user.subscription.expiry) ? true : false;
-  const [upgrade, setUpgrade] = useState(!userCanRequestTrial);
-  const yearlyPlan = usePricing("yearly");
-  const monthlyPlan = usePricing("monthly");
-
-  const getSkus = useCallback(async () => {
-    try {
-      setLoading(true);
-      if (promo?.promoCode) {
-        getPromo(promo?.promoCode);
-      }
-      setLoading(false);
-    } catch (e) {
-      setLoading(false);
-    }
-  }, [promo?.promoCode]);
-
-  const getPromo = async (code: string) => {
-    try {
-      let skuId: string;
-      if (code.startsWith("com.streetwriters.notesnook")) {
-        skuId = code;
-      } else {
-        skuId = await db.offers?.getCode(
-          code.split(":")[0],
-          Platform.OS as "ios" | "android"
-        );
-      }
-
-      const products = await PremiumService.getProducts();
-      const product = products.find((p) => p.productId === skuId);
-      if (!product) return false;
-      const isMonthly = product.productId.indexOf(".mo") > -1;
-
-      const cycleText = isMonthly
-        ? promoCyclesMonthly[
-            (Platform.OS === "android"
-              ? (product as RNIap.SubscriptionAndroid)
-                  .subscriptionOfferDetails[0]?.pricingPhases
-                  .pricingPhaseList?.[0].billingCycleCount
-              : parseInt(
-                  (product as RNIap.SubscriptionIOS)
-                    .introductoryPriceNumberOfPeriodsIOS as string
-                )) as keyof typeof promoCyclesMonthly
-          ]
-        : promoCyclesYearly[
-            (Platform.OS === "android"
-              ? (product as RNIap.SubscriptionAndroid)
-                  .subscriptionOfferDetails[0]?.pricingPhases
-                  .pricingPhaseList?.[0].billingCycleCount
-              : parseInt(
-                  (product as RNIap.SubscriptionIOS)
-                    .introductoryPriceNumberOfPeriodsIOS as string
-                )) as keyof typeof promoCyclesYearly
-          ];
-
-      setProduct({
-        type: "promo",
-        offerType: isMonthly ? "monthly" : "yearly",
-        data: product,
-        cycleText: cycleText,
-        info: `Pay ${isMonthly ? "monthly" : "yearly"}, cancel anytime`
-      });
-      return true;
-    } catch (e) {
-      return false;
-    }
-  };
-
-  useEffect(() => {
-    getSkus();
-  }, [getSkus]);
-
-  const buySubscription = async (product: RNIap.Subscription) => {
-    if (buying || !product) return;
-    setBuying(true);
-    try {
-      if (!user) {
-        setBuying(false);
-        return;
-      }
-      useSettingStore.getState().setAppDidEnterBackgroundForAction(true);
-      const androidOfferToken =
-        Platform.OS === "android"
-          ? (product as RNIap.SubscriptionAndroid).subscriptionOfferDetails[0]
-              .offerToken
-          : null;
-
-      DatabaseLogger.info(
-        `Subscription Requested initiated for user ${toUUID(user.id)}`
-      );
-
-      await RNIap.requestSubscription({
-        sku: product?.productId,
-        obfuscatedAccountIdAndroid: user.id,
-        obfuscatedProfileIdAndroid: user.id,
-        appAccountToken: toUUID(user.id),
-        andDangerouslyFinishTransactionAutomaticallyIOS: false,
-        subscriptionOffers: androidOfferToken
-          ? [
-              {
-                offerToken: androidOfferToken,
-                sku: product?.productId
-              }
-            ]
-          : undefined
-      });
-      useSettingStore.getState().setAppDidEnterBackgroundForAction(false);
-      setBuying(false);
-      eSendEvent(eCloseSheet);
-      eSendEvent(eClosePremiumDialog);
-      await sleep(500);
-      presentSheet({
-        title: "Thank you for subscribing!",
-        paragraph:
-          "Your Notesnook Pro subscription will be activated soon. If your account is not upgraded to Notesnook Pro, your money will be refunded to you. In case of any issues, please reach out to us at support@streetwriters.co",
-        action: async () => {
-          eSendEvent(eCloseSheet);
-        },
-        icon: "check",
-        actionText: "Continue"
-      });
-    } catch (e) {
-      setBuying(false);
-    }
-  };
-
-  function getStandardPrice() {
-    if (!product) return;
-    const productType = product.offerType;
-
-    if (Platform.OS === "android") {
-      const pricingPhaseListItem = (product.data as RNIap.SubscriptionAndroid)
-        ?.subscriptionOfferDetails[0]?.pricingPhases.pricingPhaseList?.[1];
-
-      if (!pricingPhaseListItem) {
-        const product =
-          productType === "monthly"
-            ? monthlyPlan?.product
-            : yearlyPlan?.product;
-        return (product as RNIap.SubscriptionAndroid)
-          ?.subscriptionOfferDetails[0]?.pricingPhases.pricingPhaseList?.[0]
-          ?.formattedPrice;
-      }
-
-      return pricingPhaseListItem?.formattedPrice;
-    } else {
-      const productDefault =
-        productType === "monthly" ? monthlyPlan?.product : yearlyPlan?.product;
-      return (
-        (product.data as RNIap.SubscriptionIOS)?.localizedPrice ||
-        (productDefault as RNIap.SubscriptionIOS)?.localizedPrice
-      );
-    }
-  }
-
-  return loading ? (
-    <View
-      style={{
-        paddingHorizontal: DefaultAppStyles.GAP,
-        justifyContent: "center",
-        alignItems: "center",
-        height: 100
-      }}
-    >
-      <ActivityIndicator color={colors.primary.accent} size={25} />
-    </View>
-  ) : (
-    <View
-      style={{
-        paddingHorizontal: DefaultAppStyles.GAP
-      }}
-    >
-      {buying ? (
-        <BaseDialog statusBarTranslucent centered>
-          <ActivityIndicator size={50} color="white" />
-        </BaseDialog>
-      ) : null}
-
-      {!upgrade ? (
-        <>
-          <Paragraph
-            style={{
-              alignSelf: "center"
-            }}
-            size={AppFontSize.lg}
-          >
-            {(Platform.OS === "android"
-              ? (monthlyPlan?.product as RNIap.SubscriptionAndroid | undefined)
-                  ?.subscriptionOfferDetails[0]?.pricingPhases
-                  .pricingPhaseList?.[0]?.formattedPrice
-              : (monthlyPlan?.product as RNIap.SubscriptionIOS | undefined)
-                  ?.localizedPrice) ||
-              (PremiumService.getMontlySub() as any)?.localizedPrice}
-            / mo
-          </Paragraph>
-          <Button
-            onPress={() => {
-              setUpgrade(true);
-            }}
-            title={"Upgrade now"}
-            type="accent"
-            width={250}
-            style={{
-              paddingHorizontal: DefaultAppStyles.GAP,
-              marginBottom: DefaultAppStyles.GAP,
-              marginTop: DefaultAppStyles.GAP,
-              borderRadius: 100
-            }}
-          />
-
-          <Button
-            onPress={async () => {
-              try {
-                await db.user?.activateTrial();
-                eSendEvent(eClosePremiumDialog);
-                eSendEvent(eCloseSheet);
-                await sleep(300);
-                Walkthrough.present("trialstarted", false, true);
-              } catch (e) {
-                console.error(e);
-              }
-            }}
-            title={"Try free for 14 days"}
-            type="secondaryAccented"
-            width={250}
-            style={{
-              paddingHorizontal: DefaultAppStyles.GAP,
-              marginBottom: 15
-            }}
-          />
-        </>
-      ) : (
-        <>
-          {product?.type === "promo" ? (
-            <View
-              style={{
-                paddingVertical: 15,
-                alignItems: "center"
-              }}
-            >
-              {product?.offerType === "monthly" ? (
-                <PricingItem
-                  product={{
-                    type: "monthly",
-                    data: monthlyPlan?.product,
-                    info: "Pay once a month, cancel anytime."
-                  }}
-                  strikethrough={true}
-                />
-              ) : (
-                <PricingItem
-                  onPress={() => {
-                    if (!monthlyPlan?.product) return;
-                    buySubscription(monthlyPlan?.product);
-                  }}
-                  product={{
-                    type: "yearly",
-                    data: yearlyPlan?.product,
-                    info: "Pay once a year, cancel anytime."
-                  }}
-                  strikethrough={true}
-                />
-              )}
-
-              <Heading
-                style={{
-                  paddingTop: 15,
-                  fontSize: AppFontSize.lg
-                }}
-              >
-                Special offer for you
-              </Heading>
-
-              <View
-                style={{
-                  paddingVertical: 20,
-                  paddingBottom: 10
-                }}
-              >
-                <Heading
-                  style={{
-                    alignSelf: "center",
-                    textAlign: "center"
-                  }}
-                  size={AppFontSize.xxl}
-                >
-                  {Platform.OS === "android"
-                    ? (product.data as RNIap.SubscriptionAndroid)
-                        ?.subscriptionOfferDetails[0]?.pricingPhases
-                        .pricingPhaseList?.[0]?.formattedPrice
-                    : (product.data as RNIap.SubscriptionIOS)
-                        ?.introductoryPrice ||
-                      (product.data as RNIap.SubscriptionIOS)
-                        ?.localizedPrice}{" "}
-                  {product?.cycleText
-                    ? `for ${product.cycleText}`
-                    : product?.offerType}
-                </Heading>
-                {product?.cycleText ? (
-                  <Paragraph
-                    style={{
-                      color: colors.secondary.paragraph,
-                      alignSelf: "center",
-                      textAlign: "center"
-                    }}
-                    size={AppFontSize.md}
-                  >
-                    then {getStandardPrice()} {product?.offerType}.
-                  </Paragraph>
-                ) : null}
-              </View>
-            </View>
-          ) : null}
-
-          {user && !product ? (
-            <>
-              {heading || (monthlyPlan?.info?.discount || 0) > 0 ? (
-                <>
-                  {monthlyPlan && (monthlyPlan?.info?.discount || 0) > 0 ? (
-                    <View
-                      style={{
-                        alignSelf: "center",
-                        marginTop: marginTop || 20,
-                        marginBottom: 20
-                      }}
-                    >
-                      <Heading
-                        style={{
-                          textAlign: "center"
-                        }}
-                        color={colors.primary.accent}
-                      >
-                        Get {monthlyPlan?.info?.discount}% off in{" "}
-                        {monthlyPlan?.info?.country}
-                      </Heading>
-                    </View>
-                  ) : (
-                    <Heading
-                      style={{
-                        alignSelf: "center",
-                        marginTop: marginTop || 20,
-                        marginBottom: 20
-                      }}
-                    >
-                      Choose a plan
-                    </Heading>
-                  )}
-                </>
-              ) : null}
-
-              <View
-                style={{
-                  flexDirection: !compact ? "column" : "row",
-                  flexWrap: "wrap",
-                  justifyContent: "space-around"
-                }}
-              >
-                <PricingItem
-                  onPress={() => {
-                    if (!monthlyPlan?.product) return;
-                    buySubscription(monthlyPlan?.product);
-                  }}
-                  compact={compact}
-                  product={{
-                    type: "monthly",
-                    data: monthlyPlan?.product,
-                    info: "Pay once a month, cancel anytime."
-                  }}
-                />
-
-                {!compact && (
-                  <View
-                    style={{
-                      height: 1,
-                      marginVertical: 5
-                    }}
-                  />
-                )}
-
-                <PricingItem
-                  onPress={() => {
-                    if (!yearlyPlan?.product) return;
-                    buySubscription(yearlyPlan?.product);
-                  }}
-                  compact={compact}
-                  product={{
-                    type: "yearly",
-                    data: yearlyPlan?.product,
-                    info: "Pay once a year, cancel anytime."
-                  }}
-                />
-              </View>
-
-              {Platform.OS !== "ios" ? (
-                <Button
-                  height={35}
-                  style={{
-                    marginTop: DefaultAppStyles.GAP_VERTICAL
-                  }}
-                  onPress={() => {
-                    presentDialog({
-                      context: "local",
-                      input: true,
-                      inputPlaceholder: "Enter code",
-                      positiveText: "Apply",
-                      positivePress: async (value) => {
-                        if (!value) return;
-                        eSendEvent(eCloseSimpleDialog);
-                        setBuying(true);
-                        try {
-                          if (!(await getPromo(value as string)))
-                            throw new Error(strings.errorApplyingPromoCode());
-                          ToastManager.show({
-                            heading: "Discount applied!",
-                            type: "success",
-                            context: "local"
-                          });
-                          setBuying(false);
-                        } catch (e) {
-                          setBuying(false);
-                          ToastManager.show({
-                            heading: "Promo code invalid or expired",
-                            message: (e as Error).message,
-                            type: "error",
-                            context: "local"
-                          });
-                        }
-                      },
-                      title: "Have a promo code?",
-                      paragraph:
-                        "Enter your promo code to get a special discount."
-                    });
-                  }}
-                  title="I have a promo code"
-                />
-              ) : (
-                <View
-                  style={{
-                    height: 15
-                  }}
-                />
-              )}
-            </>
-          ) : (
-            <View>
-              {!user ? (
-                <>
-                  <Button
-                    onPress={() => {
-                      eSendEvent(eClosePremiumDialog);
-                      eSendEvent(eCloseSheet);
-                      Navigation.navigate("Auth", {
-                        mode: AuthMode.login
-                      });
-                    }}
-                    title={"Sign up for free"}
-                    type="accent"
-                    width={250}
-                    style={{
-                      paddingHorizontal: DefaultAppStyles.GAP,
-                      marginTop: product?.type === "promo" ? 0 : 30,
-                      marginBottom: DefaultAppStyles.GAP_VERTICAL
-                    }}
-                  />
-                  {Platform.OS !== "ios" &&
-                  promo &&
-                  !promo.promoCode.startsWith("com.streetwriters.notesnook") ? (
-                    <Paragraph
-                      size={AppFontSize.md}
-                      textBreakStrategy="balanced"
-                      style={{
-                        alignSelf: "center",
-                        justifyContent: "center",
-                        textAlign: "center"
-                      }}
-                    >
-                      Use promo code{" "}
-                      <Text
-                        style={{
-                          fontFamily: "OpenSans-SemiBold"
-                        }}
-                      >
-                        {promo.promoCode}
-                      </Text>{" "}
-                      at checkout
-                    </Paragraph>
-                  ) : null}
-                </>
-              ) : (
-                <>
-                  <Button
-                    onPress={() => {
-                      if (!product?.data) return;
-                      buySubscription(product.data);
-                    }}
-                    height={40}
-                    width="50%"
-                    type="accent"
-                    title="Subscribe now"
-                  />
-
-                  <Button
-                    onPress={() => {
-                      setProduct(undefined);
-                    }}
-                    style={{
-                      marginTop: DefaultAppStyles.GAP_VERTICAL_SMALL
-                    }}
-                    height={30}
-                    fontSize={13}
-                    type="errorShade"
-                    title="Cancel promo code"
-                  />
-                </>
-              )}
-            </View>
-          )}
-        </>
-      )}
-
-      {!user || !upgrade ? (
-        <Paragraph
-          color={colors.secondary.paragraph}
-          size={AppFontSize.xs}
-          style={{
-            alignSelf: "center",
-            textAlign: "center",
-            marginTop: DefaultAppStyles.GAP_VERTICAL,
-            maxWidth: "80%"
-          }}
-        >
-          {user
-            ? 'On clicking "Try free for 14 days", your free trial will be activated.'
-            : "After sign up you will be asked to activate your free trial."}{" "}
-          <Paragraph size={AppFontSize.xs} style={{ fontWeight: "bold" }}>
-            No credit card is required.
-          </Paragraph>
-        </Paragraph>
-      ) : null}
-
-      {user && upgrade ? (
-        <>
-          {Platform.OS === "ios" ? (
-            <Paragraph
-              textBreakStrategy="balanced"
-              size={AppFontSize.xs}
-              color={colors.secondary.paragraph}
-              style={{
-                alignSelf: "center",
-                marginTop: DefaultAppStyles.GAP_VERTICAL,
-                textAlign: "center"
-              }}
-            >
-              By subscribing, you will be charged to your iTunes Account for the
-              selected plan. Subscriptions will automatically renew unless
-              cancelled within 24-hours before the end of the current period.
-            </Paragraph>
-          ) : (
-            <Paragraph
-              size={AppFontSize.xs}
-              color={colors.secondary.paragraph}
-              style={{
-                alignSelf: "center",
-                marginTop: DefaultAppStyles.GAP_VERTICAL,
-                textAlign: "center"
-              }}
-            >
-              By subscribing, you will be charged on your Google Account, and
-              your subscription will automatically renew until you cancel prior
-              to the end of the then current period.
-            </Paragraph>
-          )}
-
-          <View
-            style={{
-              width: "100%"
-            }}
-          >
-            <Paragraph
-              size={AppFontSize.xs}
-              color={colors.secondary.paragraph}
-              style={{
-                maxWidth: "100%",
-                textAlign: "center"
-              }}
-            >
-              By subscribing, you agree to our{" "}
-              <Paragraph
-                size={AppFontSize.xs}
-                onPress={() => {
-                  openLinkInBrowser("https://notesnook.com/tos")
-                    .catch(() => {})
-                    .then(() => {});
-                }}
-                style={{
-                  textDecorationLine: "underline"
-                }}
-                color={colors.primary.accent}
-              >
-                Terms of Service{" "}
-              </Paragraph>
-              and{" "}
-              <Paragraph
-                size={AppFontSize.xs}
-                onPress={() => {
-                  openLinkInBrowser("https://notesnook.com/privacy")
-                    .catch(() => {})
-                    .then(() => {});
-                }}
-                style={{
-                  textDecorationLine: "underline"
-                }}
-                color={colors.primary.accent}
-              >
-                Privacy Policy.
-              </Paragraph>
-            </Paragraph>
-          </View>
-        </>
-      ) : null}
-
-      <Dialog context="local" />
-    </View>
-  );
-};

apps/mobile/app/components/premium/pro-tag.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/>.
-*/
-
-import React from "react";
-import { View } from "react-native";
-import Icon from "react-native-vector-icons/MaterialCommunityIcons";
-import { useThemeColors } from "@notesnook/theme";
-import Paragraph from "../ui/typography/paragraph";
-import { DefaultAppStyles } from "../../utils/styles";
-
-/**
- *
- * @param {any} param0
- * @returns
- */
-export const ProTag = ({ width, size, background }) => {
-  const { colors } = useThemeColors();
-
-  return (
-    <View
-      style={{
-        backgroundColor: background || colors.primary.background,
-        borderRadius: 100,
-        width: width || 60,
-        justifyContent: "center",
-        alignItems: "center",
-        paddingVertical: DefaultAppStyles.GAP_VERTICAL_SMALL / 2,
-        flexDirection: "row"
-      }}
-    >
-      <Icon
-        style={{
-          marginRight: 3
-        }}
-        size={size}
-        color={colors.primary.accent}
-        name="crown"
-      />
-      <Paragraph size={size - 1.5} color={colors.primary.accent}>
-        PRO
-      </Paragraph>
-    </View>
-  );
-};

apps/mobile/app/components/properties/color-tags.tsx

@@ -25,7 +25,7 @@ import { FlashList } from "@shopify/flash-list";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { notesnook } from "../../../e2e/test.ids";
 import { db } from "../../common/database";
-import { eSendEvent } from "../../services/event-manager";
+import { eSendEvent, ToastManager } from "../../services/event-manager";
 import Navigation from "../../services/navigation";
 import { useMenuStore } from "../../stores/use-menu-store";
 import { useRelationStore } from "../../stores/use-relation-store";
@@ -38,6 +38,8 @@ import NativeTooltip from "../../utils/tooltip";
 import { Pressable } from "../ui/pressable";
 import { strings } from "@notesnook/intl";
 import { DefaultAppStyles } from "../../utils/styles";
+import { isFeatureAvailable, useIsFeatureAvailable } from "@notesnook/common";
+import PaywallSheet from "../sheets/paywall";
 
 const ColorItem = ({ item, note }: { item: Color; note: Note }) => {
   const { colors } = useThemeColors();
@@ -73,9 +75,6 @@ const ColorItem = ({ item, note }: { item: Color; note: Note }) => {
       testID={notesnook.ids.dialogs.actionsheet.color(item.colorCode)}
       key={item.id}
       onPress={toggleColor}
-      onLongPress={(event) => {
-        NativeTooltip.show(event, item.title, NativeTooltip.POSITIONS.TOP);
-      }}
       style={{
         width: 35,
         height: 35,
@@ -98,6 +97,7 @@ const ColorItem = ({ item, note }: { item: Color; note: Note }) => {
 };
 
 export const ColorTags = ({ item }: { item: Note }) => {
+  const colorFeature = useIsFeatureAvailable("colors");
   const { colors } = useThemeColors();
   const colorNotes = useMenuStore((state) => state.colorNotes);
   const isTablet = useSettingStore((state) => state.deviceMode) !== "mobile";
@@ -112,6 +112,24 @@ export const ColorTags = ({ item }: { item: Note }) => {
     [note]
   );
 
+  const onPress = React.useCallback(async () => {
+    if (colorFeature && !colorFeature.isAllowed) {
+      ToastManager.show({
+        message: colorFeature.error,
+        type: "info",
+        context: "local",
+        actionText: strings.upgrade(),
+        func: () => {
+          PaywallSheet.present(colorFeature);
+          ToastManager.hide();
+        }
+      });
+      return;
+    }
+    useSettingStore.getState().setSheetKeyboardHandler(false);
+    setVisible(true);
+  }, []);
+
   return (
     <>
       <ColorPicker
@@ -136,10 +154,7 @@ export const ColorTags = ({ item }: { item: Note }) => {
       >
         {!colorNotes || !colorNotes.length ? (
           <Button
-            onPress={async () => {
-              useSettingStore.getState().setSheetKeyboardHandler(false);
-              setVisible(true);
-            }}
+            onPress={onPress}
             buttonType={{
               text: colors.primary.accent
             }}
@@ -175,10 +190,7 @@ export const ColorTags = ({ item }: { item: Note }) => {
                   marginRight: 5
                 }}
                 type="secondary"
-                onPress={() => {
-                  useSettingStore.getState().setSheetKeyboardHandler(false);
-                  setVisible(true);
-                }}
+                onPress={onPress}
               >
                 <Icon
                   testID="icon-plus"

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

@@ -21,13 +21,14 @@ import { useThemeColors } from "@notesnook/theme";
 import React from "react";
 import { View } from "react-native";
 import { FlatList } from "react-native-actions-sheet";
+import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { db } from "../../common/database";
 import { DDS } from "../../services/device-detection";
 import { eSendEvent, presentSheet } from "../../services/event-manager";
-import { ColorValues } from "../../utils/colors";
 import { eOnLoadNote } from "../../utils/events";
 import { fluidTabsRef } from "../../utils/global-refs";
 import { AppFontSize } from "../../utils/size";
+import { DefaultAppStyles } from "../../utils/styles";
 import SheetProvider from "../sheet-provider";
 import { IconButton } from "../ui/icon-button";
 import { Pressable } from "../ui/pressable";
@@ -38,8 +39,6 @@ import { DateMeta } from "./date-meta";
 import { Items } from "./items";
 import Notebooks from "./notebooks";
 import { TagStrip, Tags } from "./tags";
-import Icon from "react-native-vector-icons/MaterialCommunityIcons";
-import { DefaultAppStyles } from "../../utils/styles";
 
 const Line = ({ top = 6, bottom = 6 }) => {
   const { colors } = useThemeColors();
@@ -151,7 +150,8 @@ export const Properties = ({ close = () => {}, item, buttons = [] }) => {
               ) : null}
             </View>
 
-            {item.type === "notebook" && item.description ? (
+            {(item.type === "notebook" || item.type === "reminder") &&
+            item.description ? (
               <Paragraph>{item.description}</Paragraph>
             ) : null}
 

apps/mobile/app/components/properties/items.tsx

@@ -27,8 +27,9 @@ import { Action, ActionId, useActions } from "../../hooks/use-actions";
 import { useStoredRef } from "../../hooks/use-stored-ref";
 import { DDS } from "../../services/device-detection";
 import { useSettingStore } from "../../stores/use-setting-store";
-import { AppFontSize } from "../../utils/size";
+import { AppFontSize, defaultBorderRadius } from "../../utils/size";
 import { DefaultAppStyles } from "../../utils/styles";
+import AppIcon from "../ui/AppIcon";
 import { Button } from "../ui/button";
 import { Pressable } from "../ui/pressable";
 import Paragraph from "../ui/typography/paragraph";
@@ -65,7 +66,9 @@ const COLUMN_BAR_ITEMS: ActionId[] = [
   "edit-notebook",
   "move-notes",
   "move-notebook",
+  "edit-reminder",
   "pin",
+  "disable-reminder",
   "default-notebook",
   "default-tag",
   "default-homepage",
@@ -143,7 +146,8 @@ export const Items = ({
         key={item.id}
         style={{
           alignItems: "center",
-          width: columnItemWidth - 8
+          width: columnItemWidth - 8,
+          opacity: item.locked ? 0.5 : 1
         }}
       >
         <Pressable
@@ -218,7 +222,8 @@ export const Items = ({
           borderRadius: 0,
           justifyContent: "flex-start",
           alignSelf: "flex-start",
-          width: "100%"
+          width: "100%",
+          opacity: item.locked ? 0.5 : 1
         }}
       />
     ),
@@ -242,7 +247,9 @@ export const Items = ({
           key={item.id}
           testID={"icon-" + item.id}
           style={{
-            width: columnItemWidth - 8
+            width: columnItemWidth - 8,
+            alignSelf: "flex-start",
+            gap: DefaultAppStyles.GAP_VERTICAL_SMALL
           }}
         >
           <View
@@ -250,7 +257,13 @@ export const Items = ({
               height: columnItemWidth / 2,
               width: columnItemWidth - DefaultAppStyles.GAP_SMALL,
               justifyContent: "center",
-              alignItems: "center"
+              alignItems: "center",
+              borderWidth: 1,
+              borderRadius: defaultBorderRadius,
+              borderColor: item.checked
+                ? item.activeColor || colors.primary.accent
+                : colors.primary.border,
+              overflow: "hidden"
             }}
           >
             <Icon
@@ -265,6 +278,28 @@ export const Items = ({
                   : colors.secondary.icon
               }
             />
+
+            {item.locked ? (
+              <View
+                style={{
+                  width: 20,
+                  height: 20,
+                  borderRadius: 100,
+                  backgroundColor: colors.primary.accent,
+                  justifyContent: "center",
+                  alignItems: "center",
+                  position: "absolute",
+                  bottom: -3,
+                  right: -3
+                }}
+              >
+                <AppIcon
+                  color={colors.static.orange}
+                  size={AppFontSize.xxxs}
+                  name="crown"
+                />
+              </View>
+            ) : null}
           </View>
 
           <Paragraph
@@ -322,16 +357,21 @@ export const Items = ({
               paginationStyle={{
                 position: "relative",
                 marginHorizontal: 2,
-                marginBottom: 0,
-                marginTop: DefaultAppStyles.GAP
+                marginBottom: -10,
+                marginTop: 10
               }}
+              contentContainerStyle={{
+                justifyContent: "flex-start",
+                alignItems: "flex-start",
+                alignSelf: "flex-start"
+              }}
+              centerContent={false}
               renderItem={({ item, index }) => (
                 <View
                   style={{
                     flexDirection: "row",
                     paddingHorizontal: DefaultAppStyles.GAP,
-                    gap: 5,
-                    width: width
+                    gap: 5
                   }}
                 >
                   {item.map(renderTopBarItem)}

apps/mobile/app/components/properties/tags.js

@@ -17,18 +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 { strings } from "@notesnook/intl";
+import { useThemeColors } from "@notesnook/theme";
 import React, { useEffect, useState } from "react";
 import { View } from "react-native";
 import { db } from "../../common/database";
+import ManageTags from "../../screens/manage-tags";
 import { TaggedNotes } from "../../screens/notes/tagged";
-import { useThemeColors } from "@notesnook/theme";
 import { AppFontSize } from "../../utils/size";
+import { DefaultAppStyles } from "../../utils/styles";
 import { sleep } from "../../utils/time";
 import { Button } from "../ui/button";
 import { ColorTags } from "./color-tags";
-import { strings } from "@notesnook/intl";
-import { DefaultAppStyles } from "../../utils/styles";
-import ManageTags from "../../screens/manage-tags";
 
 export const Tags = ({ item, close }) => {
   const { colors } = useThemeColors();
@@ -86,7 +86,6 @@ export const TagStrip = ({ item, close }) => {
         flexDirection: "row",
         flexWrap: "wrap",
         alignItems: "center",
-        marginTop: DefaultAppStyles.GAP_VERTICAL,
         gap: 5
       }}
     >
@@ -107,16 +106,13 @@ const TagItem = ({ tag, close }) => {
 
   const style = {
     paddingHorizontal: 0,
-    borderRadius: 100,
-    marginTop: 0,
-    backgroundColor: "transparent"
+    paddingVertical: DefaultAppStyles.GAP_VERTICAL_SMALL
   };
   return (
     <Button
       onPress={onPress}
       title={"#" + tag.title}
       type="plain"
-      height={20}
       fontSize={AppFontSize.xs}
       style={style}
       textStyle={{

apps/mobile/app/components/selection-header/index.tsx

@@ -87,7 +87,7 @@ export const SelectionHeader = React.memo(
 
     const restoreItem = async () => {
       if (!selectedItemsList.length) return;
-      if ((await db.trash.restore(...selectedItemsList)) === false) return;
+      await db.trash.restore(...selectedItemsList);
       Navigation.queueRoutesForUpdate();
 
       clearSelection();
@@ -197,16 +197,6 @@ export const SelectionHeader = React.memo(
                     }
                   ]
                 : [
-                    {
-                      title: strings.move(),
-                      onPress: async () => {
-                        const ids = selectedItemsList;
-                        const notebooks = await db.notebooks.all.items(ids);
-                        MoveNotebook.present(notebooks);
-                      },
-                      visible: renderedInRoute === "Notebooks",
-                      icon: "arrow-right-bold-box-outline"
-                    },
                     {
                       title: strings.manageTags(),
                       onPress: async () => {

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

@@ -95,8 +95,6 @@ const SheetProvider = ({ context = "global" }) => {
     [context]
   );
 
-  console.log(data?.keyboardHandlerDisabled);
-
   return !visible || !data ? null : (
     <SheetWrapper
       fwdRef={actionSheetRef}
@@ -226,7 +224,6 @@ const SheetProvider = ({ context = "global" }) => {
                 marginBottom: DefaultAppStyles.GAP_VERTICAL
               }}
               width="100%"
-              fontSize={AppFontSize.md}
             />
           ))}
 

apps/mobile/app/components/sheets/buy-plan/index.tsx

@@ -0,0 +1,495 @@
+/*
+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 { Plan, SKUResponse } from "@notesnook/core";
+import { strings } from "@notesnook/intl";
+import { useThemeColors } from "@notesnook/theme";
+import dayjs from "dayjs";
+import React, { useEffect, useState } from "react";
+import {
+  Linking,
+  ScrollView,
+  Text,
+  TouchableOpacity,
+  View
+} from "react-native";
+import Config from "react-native-config";
+import * as RNIap from "react-native-iap";
+import Icon from "react-native-vector-icons/MaterialCommunityIcons";
+import { WebView } from "react-native-webview";
+import { db } from "../../../common/database";
+import usePricingPlans from "../../../hooks/use-pricing-plans";
+import { ToastManager } from "../../../services/event-manager";
+import { openLinkInBrowser } from "../../../utils/functions";
+import { AppFontSize, defaultBorderRadius } from "../../../utils/size";
+import { DefaultAppStyles } from "../../../utils/styles";
+import { Button } from "../../ui/button";
+import Heading from "../../ui/typography/heading";
+import Paragraph from "../../ui/typography/paragraph";
+const isGithubRelease = Config.GITHUB_RELEASE === "true";
+export const BuyPlan = (props: {
+  planId: string;
+  canActivateTrial?: boolean;
+  pricingPlans: ReturnType<typeof usePricingPlans>;
+}) => {
+  const { colors } = useThemeColors();
+  const [checkoutUrl, setCheckoutUrl] = useState<string>();
+  const pricingPlans = props.pricingPlans;
+
+  const billingDuration = pricingPlans.getBillingDuration(
+    pricingPlans.selectedProduct as RNIap.Subscription,
+    0,
+    0,
+    true
+  );
+  const is5YearPlanSelected = (
+    isGithubRelease
+      ? (pricingPlans.selectedProduct as Plan)?.period
+      : (pricingPlans.selectedProduct as RNIap.Product)?.productId
+  )?.includes("5");
+
+  return checkoutUrl ? (
+    <View
+      style={{
+        flex: 1,
+        justifyContent: "center",
+        alignItems: "center",
+        gap: DefaultAppStyles.GAP_VERTICAL
+      }}
+    >
+      <Paragraph>{strings.finishPurchaseInBrowser()}</Paragraph>
+      <Button
+        title={strings.next()}
+        type="accent"
+        onPress={() => {
+          pricingPlans.finish();
+        }}
+      />
+      <Button
+        title={strings.goBack()}
+        onPress={() => {
+          setCheckoutUrl(undefined);
+        }}
+      />
+    </View>
+  ) : (
+    <ScrollView
+      contentContainerStyle={{
+        marginTop: DefaultAppStyles.GAP_VERTICAL
+      }}
+      keyboardDismissMode="none"
+      keyboardShouldPersistTaps="always"
+    >
+      <View
+        style={{
+          paddingHorizontal: DefaultAppStyles.GAP,
+          gap: DefaultAppStyles.GAP_VERTICAL
+        }}
+      >
+        {[
+          Config.GITHUB_RELEASE === "true"
+            ? "yearly"
+            : `notesnook.${props.planId}.yearly`,
+          Config.GITHUB_RELEASE === "true"
+            ? "monthly"
+            : `notesnook.${props.planId}.monthly`,
+          ...(props.planId === "essential" || pricingPlans.isSubscribed()
+            ? []
+            : [
+                Config.GITHUB_RELEASE === "true"
+                  ? "5-year"
+                  : `notesnook.${props.planId}.5year`
+              ])
+        ].map((item) => (
+          <ProductItem
+            key={item}
+            pricingPlans={pricingPlans}
+            productId={item}
+          />
+        ))}
+
+        <View
+          style={{
+            flexDirection: "row",
+            justifyContent: "space-between",
+            borderWidth: 1,
+            borderColor: colors.primary.border,
+            padding: DefaultAppStyles.GAP,
+            borderRadius: defaultBorderRadius
+          }}
+        >
+          <Heading color={colors.primary.paragraph} size={AppFontSize.sm}>
+            {strings.dueToday()}{" "}
+            {pricingPlans.hasTrialOffer(
+              props.planId,
+              (pricingPlans?.selectedProduct as RNIap.Product)?.productId ||
+                (pricingPlans?.selectedProduct as Plan)?.period
+            ) ? (
+              <Text
+                style={{
+                  color: colors.primary.accent
+                }}
+              >
+                ({strings.daysFree(`${billingDuration?.duration || 0}`)})
+              </Text>
+            ) : null}
+          </Heading>
+
+          <Paragraph color={colors.primary.paragraph}>
+            {pricingPlans.hasTrialOffer(
+              props.planId,
+              (pricingPlans?.selectedProduct as RNIap.Product)?.productId ||
+                (pricingPlans?.selectedProduct as Plan)?.period
+            )
+              ? "FREE"
+              : pricingPlans.getStandardPrice(
+                  pricingPlans.selectedProduct as RNIap.Subscription
+                )}
+          </Paragraph>
+        </View>
+
+        {pricingPlans.hasTrialOffer(
+          props.planId,
+          (pricingPlans?.selectedProduct as RNIap.Product)?.productId ||
+            (pricingPlans?.selectedProduct as Plan)?.period
+        ) ? (
+          <View
+            style={{
+              flexDirection: "row",
+              justifyContent: "space-between",
+              borderWidth: 1,
+              borderColor: colors.primary.border,
+              padding: DefaultAppStyles.GAP,
+              borderRadius: defaultBorderRadius
+            }}
+          >
+            <Paragraph color={colors.secondary.paragraph}>
+              {strings.due(
+                dayjs()
+                  .add(billingDuration?.duration || 0, "day")
+                  .format("DD MMMM")
+              )}
+            </Paragraph>
+            <Paragraph color={colors.secondary.paragraph}>
+              {pricingPlans.getStandardPrice(
+                pricingPlans.selectedProduct as RNIap.Subscription
+              )}
+            </Paragraph>
+          </View>
+        ) : null}
+
+        {pricingPlans.hasTrialOffer(
+          props.planId,
+          (pricingPlans.selectedProduct as RNIap.Product)?.productId ||
+            (pricingPlans.selectedProduct as Plan)?.period
+        ) || is5YearPlanSelected ? (
+          <View
+            style={{
+              gap: DefaultAppStyles.GAP_VERTICAL,
+              borderWidth: 1,
+              borderColor: colors.primary.border,
+              padding: DefaultAppStyles.GAP,
+              borderRadius: defaultBorderRadius
+            }}
+          >
+            {(is5YearPlanSelected
+              ? strings["5yearPlanConditions"]()
+              : [
+                  strings.trialPlanConditions[0](
+                    billingDuration?.duration as number
+                  ),
+                  strings.trialPlanConditions[1](0)
+                ]
+            ).map((item) => (
+              <View
+                style={{
+                  flexDirection: "row",
+                  alignItems: "center",
+                  gap: 10
+                }}
+                key={item}
+              >
+                <Icon
+                  color={colors.primary.accent}
+                  size={AppFontSize.lg}
+                  name="check"
+                />
+                <Paragraph>{item}</Paragraph>
+              </View>
+            ))}
+          </View>
+        ) : null}
+
+        <Button
+          width="100%"
+          type="accent"
+          loading={pricingPlans.loading}
+          title={
+            is5YearPlanSelected
+              ? strings.purchase()
+              : pricingPlans?.userCanRequestTrial
+              ? strings.subscribeAndStartTrial()
+              : strings.subscribe()
+          }
+          onPress={async () => {
+            if (isGithubRelease) {
+              const url = await db.subscriptions.checkoutUrl(
+                (pricingPlans.selectedProduct as Plan).plan,
+                (pricingPlans.selectedProduct as Plan).period
+              );
+              if (url) {
+                setCheckoutUrl(url);
+                Linking.openURL(url);
+              }
+              return;
+            }
+
+            const offerToken = pricingPlans.getOfferTokenAndroid(
+              pricingPlans.selectedProduct as RNIap.SubscriptionAndroid,
+              0
+            );
+            pricingPlans.subscribe(
+              pricingPlans.selectedProduct as RNIap.Subscription,
+              offerToken
+            );
+          }}
+        />
+
+        <Paragraph
+          style={{
+            textAlign: "center"
+          }}
+          color={colors.secondary.paragraph}
+          size={AppFontSize.xs}
+        >
+          {is5YearPlanSelected
+            ? strings.oneTimePurchase()
+            : strings.cancelAnytimeAlt()}
+        </Paragraph>
+        <Paragraph
+          style={{
+            textAlign: "center"
+          }}
+          color={colors.secondary.paragraph}
+          size={AppFontSize.xs}
+        >
+          {strings.subTerms[0]()}{" "}
+          <Text
+            style={{
+              textDecorationLine: "underline"
+            }}
+            onPress={() => {
+              openLinkInBrowser("https://notesnook.com/privacy");
+            }}
+          >
+            {strings.subTerms[1]()}
+          </Text>{" "}
+          {strings.subTerms[2]()}{" "}
+          <Text
+            style={{
+              textDecorationLine: "underline"
+            }}
+            onPress={() => {
+              openLinkInBrowser("https://notesnook.com/tos");
+            }}
+          >
+            {strings.subTerms[3]()}
+          </Text>
+        </Paragraph>
+      </View>
+    </ScrollView>
+  );
+};
+
+const ProductItem = (props: {
+  pricingPlans: ReturnType<typeof usePricingPlans>;
+  productId: string;
+}) => {
+  const { colors } = useThemeColors();
+  const [regionalDiscount, setRegionaDiscount] = useState<SKUResponse>();
+  const product =
+    props.pricingPlans?.currentPlan?.subscriptions?.[
+      regionalDiscount?.sku || props.productId
+    ] ||
+    props.pricingPlans?.currentPlan?.products?.[props.productId] ||
+    props.pricingPlans?.getWebPlan(
+      props.pricingPlans?.currentPlan?.id as string,
+      props.productId as "monthly" | "yearly"
+    );
+
+  const isAnnual = isGithubRelease
+    ? (product as Plan)?.period === "yearly"
+    : (product as RNIap.Subscription)?.productId?.includes("yearly");
+
+  const isSelected = isGithubRelease
+    ? (product as Plan)?.period ===
+      (props.pricingPlans.selectedProduct as Plan)?.period
+    : (product as RNIap.Subscription)?.productId ===
+      (props.pricingPlans.selectedProduct as RNIap.Subscription)?.productId;
+
+  const is5YearProduct = (
+    isGithubRelease
+      ? (product as Plan)?.period
+      : (product as RNIap.Product)?.productId
+  )?.includes("5");
+
+  const isSubscribed =
+    props.pricingPlans.isSubscribed() &&
+    (props.pricingPlans.user?.subscription?.productId ===
+      (product as RNIap.Subscription)?.productId ||
+      props.pricingPlans.user?.subscription?.productId.startsWith(
+        (product as RNIap.Subscription)?.productId
+      ) ||
+      props.pricingPlans.user?.subscription?.productId ===
+        (product as Plan).id);
+
+  useEffect(() => {
+    props.pricingPlans
+      ?.getRegionalDiscount(
+        props.pricingPlans.currentPlan?.id as string,
+        props.pricingPlans.isGithubRelease
+          ? ((product as Plan)?.period as string)
+          : props.productId
+      )
+      .then((value) => {
+        if (
+          value &&
+          value.sku?.startsWith(
+            (props.pricingPlans.selectedProduct as RNIap.Subscription)
+              ?.productId
+          )
+        ) {
+          props.pricingPlans.selectProduct(value?.sku as string);
+        }
+        setRegionaDiscount(value);
+      });
+  }, []);
+
+  return (
+    <TouchableOpacity
+      style={{
+        flexDirection: "row",
+        gap: 10,
+        opacity: isSubscribed ? 0.5 : 1
+      }}
+      activeOpacity={0.9}
+      onPress={() => {
+        if (isSubscribed) {
+          ToastManager.show({
+            message: strings.alreadySubscribed(),
+            type: "info"
+          });
+          return;
+        }
+        if (!product) return;
+        props.pricingPlans.selectProduct(
+          isGithubRelease
+            ? (product as Plan)?.period
+            : (product as RNIap.Subscription)?.productId
+        );
+      }}
+    >
+      <Icon
+        name={isSelected ? "radiobox-marked" : "radiobox-blank"}
+        color={isSelected ? colors.primary.accent : colors.secondary.icon}
+        size={AppFontSize.lg}
+      />
+      <View>
+        <View
+          style={{
+            flexDirection: "row",
+            gap: DefaultAppStyles.GAP_VERTICAL_SMALL
+          }}
+        >
+          <Heading size={AppFontSize.md}>
+            {isAnnual
+              ? strings.yearly()
+              : is5YearProduct
+              ? strings.fiveYearPlan()
+              : strings.monthly()}
+          </Heading>
+
+          {(isAnnual && !isGithubRelease) ||
+          (isGithubRelease && (product as Plan)?.discount?.amount) ? (
+            <View
+              style={{
+                backgroundColor: colors.static.red,
+                borderRadius: defaultBorderRadius,
+                paddingHorizontal: 6,
+                alignItems: "center",
+                justifyContent: "center"
+              }}
+            >
+              <Heading color={colors.static.white} size={AppFontSize.xs}>
+                {strings.bestValue()} -{" "}
+                {strings.percentOff(
+                  (regionalDiscount
+                    ? regionalDiscount.discount
+                    : isGithubRelease
+                    ? (product as Plan).discount?.amount
+                    : props.pricingPlans.compareProductPrice(
+                        props.pricingPlans.currentPlan?.id as string,
+                        `notesnook.${props.pricingPlans.currentPlan?.id}.yearly`,
+                        `notesnook.${props.pricingPlans.currentPlan?.id}.monthly`
+                      )) as string
+                )}
+              </Heading>
+            </View>
+          ) : null}
+
+          {isSubscribed ? (
+            <View
+              style={{
+                backgroundColor: colors.primary.accent,
+                borderRadius: defaultBorderRadius,
+                paddingHorizontal: 6,
+                alignItems: "center",
+                justifyContent: "center"
+              }}
+            >
+              <Heading color={colors.static.white} size={AppFontSize.xs}>
+                {strings.currentPlan()}
+              </Heading>
+            </View>
+          ) : null}
+        </View>
+
+        <Paragraph size={AppFontSize.md}>
+          {isAnnual || is5YearProduct
+            ? `${props.pricingPlans.getPrice(
+                product as RNIap.Subscription,
+                props.pricingPlans.hasTrialOffer(
+                  undefined,
+                  (product as RNIap.Subscription)?.productId
+                )
+                  ? 1
+                  : 0,
+                isAnnual
+              )}/${strings.month()}`
+            : null}
+
+          {!isAnnual && !is5YearProduct
+            ? `${props.pricingPlans.getStandardPrice(
+                product as RNIap.Subscription
+              )}/${strings.month()}`
+            : null}
+        </Paragraph>
+      </View>
+    </TouchableOpacity>
+  );
+};

apps/mobile/app/components/sheets/export-notes/index.tsx

@@ -39,16 +39,13 @@ import {
   presentSheet
 } from "../../../services/event-manager";
 import Exporter from "../../../services/exporter";
-import PremiumService from "../../../services/premium";
 import { useSettingStore } from "../../../stores/use-setting-store";
-import { useUserStore } from "../../../stores/use-user-store";
 import { getElevationStyle } from "../../../utils/elevation";
 import { AppFontSize, defaultBorderRadius } from "../../../utils/size";
 import { DefaultAppStyles } from "../../../utils/styles";
 import { sleep } from "../../../utils/time";
 import { Dialog } from "../../dialog";
 import DialogHeader from "../../dialog/dialog-header";
-import { ProTag } from "../../premium/pro-tag";
 import { Button } from "../../ui/button";
 import { IconButton } from "../../ui/icon-button";
 import { Pressable } from "../../ui/pressable";
@@ -79,13 +76,11 @@ const ExportNotesSheet = ({
     | undefined
   >();
   const [status, setStatus] = useState<string>();
-  const premium = useUserStore((state) => state.premium);
 
   const exportNoteAs = async (
     type: "pdf" | "txt" | "md" | "html" | "md-frontmatter"
   ) => {
     if (exporting) return;
-    if (!PremiumService.get() && type !== "txt") return;
     setExporting(true);
     update?.({ disableClosing: true } as PresentSheetOptions);
     setComplete(false);
@@ -123,8 +118,7 @@ const ExportNotesSheet = ({
         await exportNoteAs("pdf");
       },
       icon: "file-pdf-box",
-      id: notesnook.ids.dialogs.export.pdf,
-      pro: premium
+      id: notesnook.ids.dialogs.export.pdf
     },
     {
       title: "Markdown",
@@ -132,8 +126,7 @@ const ExportNotesSheet = ({
         await exportNoteAs("md");
       },
       icon: "language-markdown",
-      id: notesnook.ids.dialogs.export.md,
-      pro: premium
+      id: notesnook.ids.dialogs.export.md
     },
     {
       title: "Markdown + Frontmatter",
@@ -141,8 +134,7 @@ const ExportNotesSheet = ({
         await exportNoteAs("md-frontmatter");
       },
       icon: "language-markdown",
-      id: notesnook.ids.dialogs.export.md,
-      pro: premium
+      id: notesnook.ids.dialogs.export.md
     },
     {
       title: "Plain Text",
@@ -150,8 +142,7 @@ const ExportNotesSheet = ({
         await exportNoteAs("txt");
       },
       icon: "card-text",
-      id: notesnook.ids.dialogs.export.text,
-      pro: true
+      id: notesnook.ids.dialogs.export.text
     },
     {
       title: "HTML",
@@ -159,8 +150,7 @@ const ExportNotesSheet = ({
         await exportNoteAs("html");
       },
       icon: "language-html5",
-      id: notesnook.ids.dialogs.export.html,
-      pro: premium
+      id: notesnook.ids.dialogs.export.html
     }
   ];
 
@@ -200,8 +190,7 @@ const ExportNotesSheet = ({
                   paddingVertical: DefaultAppStyles.GAP_VERTICAL,
                   justifyContent: "flex-start",
                   borderRadius: 0,
-                  paddingHorizontal: DefaultAppStyles.GAP,
-                  opacity: item.pro ? 1 : 0.5
+                  paddingHorizontal: DefaultAppStyles.GAP
                 }}
               >
                 <View
@@ -216,9 +205,7 @@ const ExportNotesSheet = ({
                 >
                   <Icon
                     name={item.icon}
-                    color={
-                      item.pro ? colors.primary.accent : colors.primary.icon
-                    }
+                    color={colors.primary.icon}
                     size={AppFontSize.xxxl + 10}
                   />
                 </View>
@@ -227,7 +214,6 @@ const ExportNotesSheet = ({
                     flexShrink: 1
                   }}
                 >
-                  {!item.pro ? <ProTag size={12} /> : null}
                   <Heading style={{ marginLeft: 10 }} size={AppFontSize.md}>
                     {item.title}
                   </Heading>
@@ -298,7 +284,6 @@ const ExportNotesSheet = ({
                   }
                   type="accent"
                   width={250}
-                  fontSize={AppFontSize.md}
                   style={{
                     marginTop: DefaultAppStyles.GAP_VERTICAL
                   }}
@@ -310,6 +295,7 @@ const ExportNotesSheet = ({
                         ToastManager.error(e as Error);
                       });
                     } else {
+                      await sleep(500);
                       FileViewer.open(result?.filePath, {
                         showOpenWithDialog: true,
                         showAppsSuggestions: true
@@ -327,7 +313,6 @@ const ExportNotesSheet = ({
                   title={strings.share()}
                   type="secondaryAccented"
                   width={250}
-                  fontSize={AppFontSize.md}
                   style={{
                     marginTop: DefaultAppStyles.GAP_VERTICAL
                   }}
@@ -338,6 +323,7 @@ const ExportNotesSheet = ({
                       .getState()
                       .setAppDidEnterBackgroundForAction(true);
                     if (Platform.OS === "ios") {
+                      await sleep(500);
                       Share.open({
                         url: result?.fileDir + result.fileName
                       }).catch(() => {
@@ -358,7 +344,6 @@ const ExportNotesSheet = ({
                   title={strings.exportAgain()}
                   type="secondaryAccented"
                   width={250}
-                  fontSize={AppFontSize.md}
                   style={{
                     marginTop: DefaultAppStyles.GAP_VERTICAL
                   }}

apps/mobile/app/components/sheets/export-notes/share.jsx

@@ -36,7 +36,6 @@ export const ShareComponent = ({ uri, name, padding }) => {
         title={strings.open()}
         type="accent"
         width="100%"
-        fontSize={AppFontSize.md}
         onPress={async () => {
           FileViewer.open(uri, {
             showOpenWithDialog: true,
@@ -54,7 +53,6 @@ export const ShareComponent = ({ uri, name, padding }) => {
         title={strings.share()}
         type="shade"
         width="100%"
-        fontSize={AppFontSize.md}
         style={{
           marginTop: DefaultAppStyles.GAP_VERTICAL
         }}

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

@@ -36,6 +36,7 @@ import Heading from "../../ui/typography/heading";
 import Paragraph from "../../ui/typography/paragraph";
 import { strings } from "@notesnook/intl";
 import { DefaultAppStyles } from "../../../utils/styles";
+import Config from "react-native-config";
 
 export const Issue = ({ defaultTitle, defaultBody, issueTitle }) => {
   const { colors } = useThemeColors();
@@ -67,7 +68,8 @@ App version: ${getVersion()}
 Platform: ${Platform.OS}
 Device: ${getBrand() || ""}-${getModel() || ""}-${getSystemVersion() || ""}
 Pro: ${PremiumService.get()}
-Logged in: ${user ? "yes" : "no"}`,
+Logged in: ${user ? "yes" : "no"}
+Github Release: ${Config.GITHUB_RELEASE === "true" ? "Yes" : "No"}`,
         userId: user?.id
       });
       if (!issueUrl.current) {
@@ -159,7 +161,7 @@ Logged in: ${user ? "yes" : "no"}`,
               borderColor: colors.primary.border,
               borderRadius: defaultBorderRadius,
               padding: DefaultAppStyles.GAP,
-              fontFamily: "OpenSans-Regular",
+              fontFamily: "Inter-Regular",
               marginBottom: DefaultAppStyles.GAP_VERTICAL,
               fontSize: AppFontSize.md,
               color: colors.primary.heading
@@ -192,7 +194,7 @@ Logged in: ${user ? "yes" : "no"}`,
               borderColor: colors.primary.border,
               borderRadius: defaultBorderRadius,
               padding: DefaultAppStyles.GAP,
-              fontFamily: "OpenSans-Regular",
+              fontFamily: "Inter-Regular",
               maxHeight: 200,
               fontSize: AppFontSize.sm,
               marginBottom: 2.5,

apps/mobile/app/components/sheets/link-note/index.tsx

@@ -16,6 +16,7 @@ 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 { useIsFeatureAvailable } from "@notesnook/common";
 import {
   ContentBlock,
   Note,
@@ -33,12 +34,12 @@ import { db } from "../../../common/database";
 import { useDBItem } from "../../../hooks/use-db-item";
 import { editorController } from "../../../screens/editor/tiptap/utils";
 import { presentSheet } from "../../../services/event-manager";
-import { defaultBorderRadius, AppFontSize } from "../../../utils/size";
+import { AppFontSize, defaultBorderRadius } from "../../../utils/size";
+import { DefaultAppStyles } from "../../../utils/styles";
 import { Button } from "../../ui/button";
 import Input from "../../ui/input";
 import { Pressable } from "../../ui/pressable";
 import Paragraph from "../../ui/typography/paragraph";
-import { DefaultAppStyles } from "../../../utils/styles";
 
 const ListNoteItem = ({
   id,
@@ -146,6 +147,7 @@ export default function LinkNote(props: {
   onLinkCreated: () => void;
   close?: (ctx?: string) => void;
 }) {
+  const blockLinking = useIsFeatureAvailable("blockLinking");
   const { colors } = useThemeColors();
   const query = useRef<string>();
   const [notes, setNotes] = useState<VirtualizedGrouping<Note>>();
@@ -327,7 +329,31 @@ export default function LinkNote(props: {
           keyboardShouldPersistTaps="handled"
           windowSize={3}
           keyExtractor={(item) => item.id}
-          data={nodes}
+          ListEmptyComponent={
+            <View
+              style={{
+                gap: DefaultAppStyles.GAP_VERTICAL,
+                backgroundColor: colors.secondary.background,
+                padding: DefaultAppStyles.GAP,
+                borderRadius: defaultBorderRadius,
+                borderWidth: 0.5,
+                borderColor: colors.secondary.border,
+                alignItems: "center"
+              }}
+            >
+              <Paragraph color={colors.secondary.paragraph}>
+                {blockLinking?.error}
+              </Paragraph>
+              <Button
+                title={strings.upgradePlan()}
+                style={{
+                  width: "100%"
+                }}
+                type="accent"
+              />
+            </View>
+          }
+          data={blockLinking?.isAllowed ? nodes : []}
         />
       ) : (
         <FlatList

apps/mobile/app/components/sheets/menu-item-properties/index.tsx

@@ -17,11 +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 { useAreFeaturesAvailable } from "@notesnook/common";
 import { strings } from "@notesnook/intl";
 import { useThemeColors } from "@notesnook/theme";
 import React from "react";
 import { View } from "react-native";
-import { eSendEvent, presentSheet } from "../../../services/event-manager";
+import {
+  eSendEvent,
+  presentSheet,
+  ToastManager
+} from "../../../services/event-manager";
 import SettingsService from "../../../services/settings";
 import { eCloseSheet } from "../../../utils/events";
 import { SideMenuItem } from "../../../utils/menu-items";
@@ -31,9 +36,14 @@ import { useSideBarDraggingStore } from "../../side-menu/dragging-store";
 import AppIcon from "../../ui/AppIcon";
 import { Pressable } from "../../ui/pressable";
 import Paragraph from "../../ui/typography/paragraph";
+import PaywallSheet from "../paywall";
 export const MenuItemProperties = ({ item }: { item: SideMenuItem }) => {
   const { colors } = useThemeColors();
-  return (
+  const featuresAvailable = useAreFeaturesAvailable([
+    "customHomepage",
+    "customizableSidebar"
+  ]);
+  return !featuresAvailable ? null : (
     <View
       style={{
         width: "100%",
@@ -44,24 +54,52 @@ export const MenuItemProperties = ({ item }: { item: SideMenuItem }) => {
       {[
         {
           title: strings.setAsHomepage(),
-          onPress: () => {
+          onPress: async () => {
+            if (!featuresAvailable?.customHomepage.isAllowed) {
+              ToastManager.show({
+                message: featuresAvailable?.customHomepage.error,
+                type: "info",
+                context: "local",
+                actionText: strings.upgrade(),
+                func: () => {
+                  PaywallSheet.present(featuresAvailable?.customHomepage);
+                }
+              });
+              return;
+            }
             SettingsService.setProperty("homepageV2", {
               id: item.id,
               type: "default"
             });
             eSendEvent(eCloseSheet);
           },
-          icon: "home-outline"
+          icon: "home-outline",
+          type: "switch",
+          state: SettingsService.getProperty("homepageV2")?.id === item.id,
+          locked: !featuresAvailable?.customHomepage.isAllowed
         },
         {
           title: strings.reorder(),
-          onPress: () => {
+          onPress: async () => {
+            if (!featuresAvailable?.customizableSidebar.isAllowed) {
+              ToastManager.show({
+                message: featuresAvailable?.customizableSidebar.error,
+                type: "info",
+                context: "local",
+                actionText: strings.upgrade(),
+                func: () => {
+                  PaywallSheet.present(featuresAvailable?.customizableSidebar);
+                }
+              });
+              return;
+            }
             useSideBarDraggingStore.setState({
               dragging: true
             });
             eSendEvent(eCloseSheet);
           },
-          icon: "sort-ascending"
+          icon: "sort-ascending",
+          locked: !featuresAvailable?.customizableSidebar.isAllowed
         }
       ].map((item) => (
         <Pressable
@@ -73,18 +111,42 @@ export const MenuItemProperties = ({ item }: { item: SideMenuItem }) => {
             justifyContent: "flex-start",
             gap: DefaultAppStyles.GAP_SMALL,
             borderRadius: 0,
-            paddingHorizontal: DefaultAppStyles.GAP
+            paddingHorizontal: DefaultAppStyles.GAP,
+            opacity: item.locked ? 0.6 : 1
           }}
           onPress={() => {
             item.onPress();
           }}
         >
-          <AppIcon
-            color={colors.secondary.icon}
-            name={item.icon}
-            size={AppFontSize.xl}
-          />
-          <Paragraph>{item.title}</Paragraph>
+          <View
+            style={{
+              flexDirection: "row",
+              alignItems: "center",
+              gap: DefaultAppStyles.GAP_SMALL
+            }}
+          >
+            <AppIcon
+              color={colors.secondary.icon}
+              name={item.icon}
+              size={AppFontSize.xl}
+            />
+            <Paragraph>{item.title}</Paragraph>
+          </View>
+          {item.locked ? (
+            <AppIcon
+              name="lock"
+              size={AppFontSize.lg}
+              color={colors.primary.icon}
+              style={{ marginLeft: "auto" }}
+            />
+          ) : item.type === "switch" && item.state ? (
+            <AppIcon
+              name="check"
+              size={AppFontSize.lg}
+              color={colors.primary.accent}
+              style={{ marginLeft: "auto" }}
+            />
+          ) : null}
         </Pressable>
       ))}
     </View>

apps/mobile/app/components/sheets/notebooks/index.tsx

@@ -27,7 +27,8 @@ import NotebookScreen from "../../../screens/notebook";
 import {
   eSendEvent,
   eSubscribeEvent,
-  presentSheet
+  presentSheet,
+  ToastManager
 } from "../../../services/event-manager";
 import {
   createNotebookTreeStores,
@@ -38,13 +39,14 @@ import { eCloseSheet, eOnNotebookUpdated } from "../../../utils/events";
 import { AppFontSize } from "../../../utils/size";
 import { DefaultAppStyles } from "../../../utils/styles";
 import { sleep } from "../../../utils/time";
+import { Dialog } from "../../dialog";
 import { Properties } from "../../properties";
-import SheetProvider from "../../sheet-provider";
 import { NotebookItem } from "../../side-menu/notebook-item";
-import { useSideMenuNotebookTreeStore } from "../../side-menu/stores";
 import { IconButton } from "../../ui/icon-button";
 import Paragraph from "../../ui/typography/paragraph";
 import { AddNotebookSheet } from "../add-notebook";
+import { isFeatureAvailable } from "@notesnook/common";
+import PaywallSheet from "../paywall";
 
 const {
   useNotebookExpandedStore,
@@ -60,13 +62,8 @@ export const Notebooks = (props: {
   close?: (ctx?: string) => void;
 }) => {
   const tree = useNotebookTreeStore((state) => state.tree);
-  const [isLoading, setIsLoading] = useState(true);
   const { colors } = useThemeColors();
   const [notebooks, setNotebooks] = useState<Notebook[]>();
-  const [filteredNotebooks, setFilteredNotebooks] =
-    React.useState<VirtualizedGrouping<Notebook>>();
-  const searchTimer = React.useRef<NodeJS.Timeout>();
-  const lastQuery = React.useRef<string>();
   const loadRootNotebooks = React.useCallback(async () => {
     const notebooks = await db.relations
       .from(
@@ -95,7 +92,6 @@ export const Notebooks = (props: {
   useEffect(() => {
     (async () => {
       loadRootNotebooks();
-      setIsLoading(false);
     })();
   }, [loadRootNotebooks]);
 
@@ -151,7 +147,7 @@ export const Notebooks = (props: {
         height: 400
       }}
     >
-      <SheetProvider context="local" />
+      <Dialog context="local" />
 
       <View
         style={{
@@ -174,8 +170,22 @@ export const Notebooks = (props: {
             height: 30
           }}
           name="plus"
-          onPress={() => {
-            AddNotebookSheet.present(props.rootNotebook, undefined, "local");
+          onPress={async () => {
+            const notebooksFeature = await isFeatureAvailable("notebooks");
+            if (!notebooksFeature.isAllowed) {
+              ToastManager.show({
+                message: notebooksFeature.error,
+                type: "info",
+                context: "local",
+                actionText: strings.upgrade(),
+                func: () => {
+                  ToastManager.hide();
+                  PaywallSheet.present(notebooksFeature);
+                }
+              });
+              return;
+            }
+            AddNotebookSheet.present(undefined, props.rootNotebook, "local");
           }}
         />
       </View>
@@ -244,20 +254,18 @@ const NotebookItemWrapper = React.memo(
     const onItemUpdate = React.useCallback(async () => {
       const notebook = await db.notebooks.notebook(item.notebook.id);
       if (notebook) {
-        useSideMenuNotebookTreeStore
-          .getState()
-          .updateItem(item.notebook.id, notebook);
+        useNotebookTreeStore.getState().updateItem(item.notebook.id, notebook);
         if (expanded) {
-          useSideMenuNotebookTreeStore
+          useNotebookTreeStore
             .getState()
             .setTree(
-              await useSideMenuNotebookTreeStore
+              await useNotebookTreeStore
                 .getState()
                 .fetchAndAdd(item.notebook.id, item.depth + 1)
             );
         }
       } else {
-        useSideMenuNotebookTreeStore.getState().removeItem(item.notebook.id);
+        useNotebookTreeStore.getState().removeItem(item.notebook.id);
       }
     }, [expanded, item.depth, item.notebook.id]);
 
@@ -274,17 +282,15 @@ const NotebookItemWrapper = React.memo(
           onToggleExpanded={async () => {
             useNotebookExpandedStore.getState().setExpanded(item.notebook.id);
             if (!expanded) {
-              useSideMenuNotebookTreeStore
+              useNotebookTreeStore
                 .getState()
                 .setTree(
-                  await useSideMenuNotebookTreeStore
+                  await useNotebookTreeStore
                     .getState()
                     .fetchAndAdd(item.notebook.id, item.depth + 1)
                 );
             } else {
-              useSideMenuNotebookTreeStore
-                .getState()
-                .removeChildren(item.notebook.id);
+              useNotebookTreeStore.getState().removeChildren(item.notebook.id);
             }
           }}
           selected={selected}

apps/mobile/app/components/sheets/paywall/index.tsx

@@ -0,0 +1,266 @@
+import { FeatureId, FeatureResult } from "@notesnook/common";
+import { SubscriptionPlan, SubscriptionProvider } from "@notesnook/core";
+import { strings } from "@notesnook/intl";
+import { useThemeColors } from "@notesnook/theme";
+import { useEffect } from "react";
+import { Platform, View } from "react-native";
+import Config from "react-native-config";
+import usePricingPlans, {
+  PlanOverView
+} from "../../../hooks/use-pricing-plans";
+import {
+  eSendEvent,
+  presentSheet,
+  ToastManager
+} from "../../../services/event-manager";
+import Navigation from "../../../services/navigation";
+import PremiumService from "../../../services/premium";
+import SettingsService from "../../../services/settings";
+import { useUserStore } from "../../../stores/use-user-store";
+import { eCloseSheet } from "../../../utils/events";
+import { AppFontSize } from "../../../utils/size";
+import { DefaultAppStyles } from "../../../utils/styles";
+import { AuthMode } from "../../auth/common";
+import AppIcon from "../../ui/AppIcon";
+import { Button } from "../../ui/button";
+import Heading from "../../ui/typography/heading";
+import Paragraph from "../../ui/typography/paragraph";
+const isGithubRelease = Config.GITHUB_RELEASE === "true";
+const INDEX_TO_PLAN = {
+  1: "essential",
+  2: "pro",
+  3: "believer"
+};
+
+export default function PaywallSheet<Tid extends FeatureId>(props: {
+  feature: FeatureResult<Tid>;
+}) {
+  const { colors } = useThemeColors();
+  const pricingPlans = usePricingPlans();
+  useEffect(() => {
+    ToastManager.hide();
+    if (!props.feature.availableOn) return;
+    const plan = pricingPlans.pricingPlans.find(
+      //@ts-ignore
+      (p) => p.id === INDEX_TO_PLAN[props.feature.availableOn]
+    );
+    if (!plan) return;
+    pricingPlans.selectPlan(plan?.id);
+    const product = isGithubRelease
+      ? "yearly"
+      : plan?.subscriptionSkuList?.find((sku) => sku.includes("year"));
+    if (product) {
+      pricingPlans.selectProduct(product);
+    }
+  }, []);
+
+  const isSubscribedOnWeb =
+    PremiumService.get() &&
+    (pricingPlans.user?.subscription?.provider ===
+      SubscriptionProvider.PADDLE ||
+      pricingPlans.user?.subscription?.provider ===
+        SubscriptionProvider.STREETWRITERS);
+
+  const isCurrentPlatform =
+    (pricingPlans.user?.subscription?.provider === SubscriptionProvider.APPLE &&
+      Platform.OS === "ios") ||
+    (pricingPlans.user?.subscription?.provider ===
+      SubscriptionProvider.GOOGLE &&
+      Platform.OS === "android");
+
+  return !pricingPlans.currentPlan ? null : (
+    <View
+      style={{
+        width: "100%",
+        justifyContent: "center",
+        alignItems: "center",
+        gap: DefaultAppStyles.GAP_VERTICAL
+      }}
+    >
+      <>
+        <View
+          style={{
+            width: "100%",
+            paddingHorizontal: DefaultAppStyles.GAP,
+            gap: DefaultAppStyles.GAP_VERTICAL
+          }}
+        >
+          <Paragraph>
+            <AppIcon
+              name="crown"
+              size={AppFontSize.md}
+              color={colors.static.orange}
+            />
+            {strings.upgradePlanTo(pricingPlans.currentPlan?.name)}
+          </Paragraph>
+
+          <View
+            style={{
+              gap: DefaultAppStyles.GAP_VERTICAL_SMALL,
+              width: "100%"
+            }}
+          >
+            <Heading>{strings.tryItForFree()}</Heading>
+
+            <Heading size={AppFontSize.sm}>
+              {strings.getThisAndSoMuchMore()}
+            </Heading>
+
+            <View
+              style={{
+                gap: DefaultAppStyles.GAP_SMALL,
+                flexDirection: "row"
+              }}
+            >
+              <AppIcon name="cloud" size={AppFontSize.xxl} />
+              <Paragraph
+                style={{
+                  flexShrink: 1
+                }}
+              >
+                <Heading size={AppFontSize.sm}>
+                  {
+                    PlanOverView[
+                      pricingPlans.currentPlan.id as keyof typeof PlanOverView
+                    ].storage
+                  }
+                </Heading>{" "}
+                {strings.cloudSpace()}
+              </Paragraph>
+            </View>
+
+            {pricingPlans.currentPlan.id !== "essential" ? (
+              <View
+                style={{
+                  gap: DefaultAppStyles.GAP_SMALL,
+                  flexDirection: "row"
+                }}
+              >
+                <AppIcon name="lock" size={AppFontSize.xxl} />
+                <Paragraph
+                  style={{
+                    flexShrink: 1
+                  }}
+                >
+                  <Heading size={AppFontSize.sm}>{strings.appLock()}</Heading>{" "}
+                  {strings.appLockFeatureBenefit()}
+                </Paragraph>
+              </View>
+            ) : null}
+
+            <View
+              style={{
+                gap: DefaultAppStyles.GAP_SMALL,
+                flexDirection: "row"
+              }}
+            >
+              <AppIcon name="vector-link" size={AppFontSize.xxl} />
+              <Paragraph
+                style={{
+                  flexShrink: 1
+                }}
+              >
+                {strings.advancedNoteTaking[0]()}{" "}
+                <Heading size={AppFontSize.sm}>
+                  {strings.advancedNoteTaking[1]()}
+                </Heading>{" "}
+                {strings.advancedNoteTaking[2]()}
+              </Paragraph>
+            </View>
+          </View>
+        </View>
+
+        <View
+          style={{
+            width: "100%",
+            paddingHorizontal: DefaultAppStyles.GAP
+          }}
+        >
+          <Paragraph
+            style={{
+              marginVertical: 10
+            }}
+            size={AppFontSize.xs}
+          >
+            <Heading size={AppFontSize.xs}>{strings.cancelAnytime()}</Heading>{" "}
+            {strings.googleReminderTrial()}
+          </Paragraph>
+
+          <Button
+            type="accent"
+            title={strings.upgrade()}
+            style={{
+              marginVertical: DefaultAppStyles.GAP_VERTICAL,
+              width: "100%"
+            }}
+            onPress={() => {
+              if (PremiumService.get()) {
+                if (
+                  pricingPlans.user?.subscription.plan ===
+                    SubscriptionPlan.LEGACY_PRO ||
+                  !isCurrentPlatform
+                ) {
+                  ToastManager.show({
+                    message: strings.cannotChangePlan(),
+                    context: "local"
+                  });
+                  return;
+                }
+
+                if (isSubscribedOnWeb) {
+                  ToastManager.show({
+                    message: strings.changePlanOnWeb(),
+                    context: "local"
+                  });
+                  return;
+                }
+              }
+
+              eSendEvent(eCloseSheet);
+              if (!useUserStore.getState().user) {
+                Navigation.navigate("Auth", {
+                  mode: AuthMode.login
+                });
+                return;
+              }
+              Navigation.navigate("PayWall", {
+                context: "logged-in",
+                state: {
+                  planId: pricingPlans.currentPlan?.id,
+                  productId: isGithubRelease
+                    ? "yearly"
+                    : (pricingPlans.selectProduct as any).productId,
+                  billingType: "annual"
+                }
+              });
+            }}
+          />
+        </View>
+
+        {isSubscribedOnWeb ? null : (
+          <Button
+            type="plain"
+            title={strings.exploreAllPlans()}
+            icon="arrow-right"
+            iconPosition="right"
+            onPress={() => {
+              eSendEvent(eCloseSheet);
+              Navigation.navigate("PayWall", {
+                context: useUserStore.getState().user
+                  ? "logged-in"
+                  : "logged-out"
+              });
+            }}
+          />
+        )}
+      </>
+    </View>
+  );
+}
+
+PaywallSheet.present = <Tid extends FeatureId>(feature: FeatureResult<Tid>) => {
+  if (SettingsService.getProperty("serverUrls")) return;
+  presentSheet({
+    component: <PaywallSheet feature={feature} />
+  });
+};

apps/mobile/app/components/sheets/plan-limits/index.tsx

@@ -0,0 +1,132 @@
+import {
+  FeatureUsage,
+  formatBytes,
+  getFeature,
+  getFeaturesUsage
+} from "@notesnook/common";
+import { strings } from "@notesnook/intl";
+import { useThemeColors } from "@notesnook/theme";
+import { useEffect, useState } from "react";
+import { Platform, View } from "react-native";
+import { ScrollView } from "react-native-actions-sheet";
+import { eSendEvent, ToastManager } from "../../../services/event-manager";
+import Navigation from "../../../services/navigation";
+import { eCloseSheet } from "../../../utils/events";
+import { AppFontSize } from "../../../utils/size";
+import { DefaultAppStyles } from "../../../utils/styles";
+import { Button } from "../../ui/button";
+import Heading from "../../ui/typography/heading";
+import Paragraph from "../../ui/typography/paragraph";
+import { SubscriptionPlan, SubscriptionProvider } from "@notesnook/core";
+import { useUserStore } from "../../../stores/use-user-store";
+import PremiumService from "../../../services/premium";
+import SettingsService from "../../../services/settings";
+
+export function PlanLimits() {
+  const { colors } = useThemeColors();
+  const [featureUsage, setFeatureUsage] = useState<FeatureUsage[]>();
+  const user = useUserStore((state) => state.user);
+
+  useEffect(() => {
+    getFeaturesUsage()
+      .then((result) => {
+        setFeatureUsage(result);
+      })
+      .catch((e) => console.log(e));
+  }, []);
+
+  const isCurrentPlatform =
+    (user?.subscription?.provider === SubscriptionProvider.APPLE &&
+      Platform.OS === "ios") ||
+    (user?.subscription?.provider === SubscriptionProvider.GOOGLE &&
+      Platform.OS === "android");
+
+  return (
+    <ScrollView
+      style={{
+        paddingHorizontal: DefaultAppStyles.GAP,
+        width: "100%",
+        paddingVertical: DefaultAppStyles.GAP_VERTICAL
+      }}
+      contentContainerStyle={{
+        gap: DefaultAppStyles.GAP_VERTICAL
+      }}
+    >
+      <Heading>{strings.planLimits()}</Heading>
+
+      {featureUsage?.map((item) => (
+        <View
+          key={item.id}
+          style={{
+            gap: DefaultAppStyles.GAP_VERTICAL_SMALL,
+            width: "100%"
+          }}
+        >
+          <View
+            style={{
+              flexDirection: "row",
+              width: "100%",
+              justifyContent: "space-between"
+            }}
+          >
+            <Paragraph size={AppFontSize.sm}>
+              {getFeature(item.id).title}
+            </Paragraph>
+            <Paragraph size={AppFontSize.sm}>
+              {item.total === Infinity
+                ? strings.unlimited()
+                : item.id === "storage"
+                ? `${formatBytes(item.used)}/${formatBytes(
+                    item.total
+                  )} ${strings.used()}`
+                : `${item.used}/${item.total} ${strings.used()}`}
+            </Paragraph>
+          </View>
+        </View>
+      ))}
+
+      {((user?.subscription?.provider === SubscriptionProvider.PADDLE ||
+        user?.subscription?.provider === SubscriptionProvider.STREETWRITERS ||
+        !isCurrentPlatform) &&
+        PremiumService.get()) ||
+      SettingsService.getProperty("serverUrls") ? null : (
+        <Button
+          title={strings.changePlan()}
+          onPress={() => {
+            if (user?.subscription?.plan === SubscriptionPlan.LEGACY_PRO) {
+              ToastManager.show({
+                message: strings.cannotChangePlan(),
+                context: "local"
+              });
+              return;
+            }
+
+            if (
+              user?.subscription.plan !== SubscriptionPlan.FREE &&
+              user?.subscription.productId.includes("5year")
+            ) {
+              ToastManager.show({
+                message:
+                  "You have made a one time purchase. To change your plan please contact support.",
+                type: "info",
+                context: "local"
+              });
+              return;
+            }
+            Navigation.navigate("PayWall", {
+              context: "logged-in",
+              canGoBack: true
+            });
+            eSendEvent(eCloseSheet);
+          }}
+          type="accent"
+          fontSize={AppFontSize.xs}
+          style={{
+            width: "100%",
+            marginTop: DefaultAppStyles.GAP_VERTICAL
+          }}
+        />
+      )}
+    </ScrollView>
+  );
+}

apps/mobile/app/components/sheets/publish-note/index.tsx

@@ -17,49 +17,71 @@ 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, Monograph, Note } from "@notesnook/core";
+import { strings } from "@notesnook/intl";
+import { useThemeColors } from "@notesnook/theme";
 import Clipboard from "@react-native-clipboard/clipboard";
-import React, { useRef, useState } from "react";
-import { ActivityIndicator, TouchableOpacity, View } from "react-native";
+import React, { useEffect, useRef, useState } from "react";
+import {
+  ActivityIndicator,
+  TextInput,
+  TouchableOpacity,
+  View
+} from "react-native";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
+//@ts-ignore
+import ToggleSwitch from "toggle-switch-react-native";
 import { db } from "../../../common/database";
+import { requestInAppReview } from "../../../services/app-review";
 import { presentSheet, ToastManager } from "../../../services/event-manager";
 import Navigation from "../../../services/navigation";
 import { useAttachmentStore } from "../../../stores/use-attachment-store";
-import { useThemeColors } from "@notesnook/theme";
 import { openLinkInBrowser } from "../../../utils/functions";
-import { defaultBorderRadius, AppFontSize } from "../../../utils/size";
+import { AppFontSize, defaultBorderRadius } from "../../../utils/size";
+import { DefaultAppStyles } from "../../../utils/styles";
 import DialogHeader from "../../dialog/dialog-header";
 import { Button } from "../../ui/button";
 import { IconButton } from "../../ui/icon-button";
 import Input from "../../ui/input";
-import Seperator from "../../ui/seperator";
 import Heading from "../../ui/typography/heading";
 import Paragraph from "../../ui/typography/paragraph";
-import { requestInAppReview } from "../../../services/app-review";
-import { hosts, Note } from "@notesnook/core";
-import { strings } from "@notesnook/intl";
-import { DefaultAppStyles } from "../../../utils/styles";
 
 const PublishNoteSheet = ({
-  note: item
+  note
 }: {
   note: Note;
   close?: (ctx?: string) => void;
 }) => {
   const { colors } = useThemeColors();
-
   const attachmentDownloads = useAttachmentStore((state) => state.downloading);
-  const downloading = attachmentDownloads?.[`monograph-${item.id}`];
+  const downloading = attachmentDownloads?.[`monograph-${note.id}`];
   const [selfDestruct, setSelfDestruct] = useState(false);
   const [isLocked, setIsLocked] = useState(false);
-  const [note, setNote] = useState<Note | undefined>(item);
+  const [monograph, setMonograph] = useState<Monograph>();
   const [publishing, setPublishing] = useState(false);
-  const publishUrl =
-    note && `${hosts.MONOGRAPH_HOST}/${db.monographs.monograph(note?.id)}`;
-  const isPublished = note && db.monographs.isPublished(note?.id);
-  const pwdInput = useRef(null);
+  const publishUrl = monograph && `${hosts.MONOGRAPH_HOST}/${monograph?.id}`;
+  const isPublished = !!monograph;
+  const pwdInput = useRef<TextInput>(null);
   const passwordValue = useRef<string>();
 
+  useEffect(() => {
+    (async () => {
+      const monograph = await db.monographs.get(
+        db.monographs.monograph(note.id)
+      );
+      setMonograph(monograph);
+      if (monograph) {
+        setSelfDestruct(!!monograph?.selfDestruct);
+        if (monograph.password) {
+          passwordValue.current = await db.monographs.decryptPassword(
+            monograph?.password
+          );
+          setIsLocked(!!monograph?.password);
+        }
+      }
+    })();
+  }, []);
+
   const publishNote = async () => {
     if (publishing) return;
     setPublishLoading(true);
@@ -71,7 +93,8 @@ const PublishNoteSheet = ({
           selfDestruct: selfDestruct,
           password: isLocked ? passwordValue.current : undefined
         });
-        setNote(await db.notes.note(note.id));
+
+        setMonograph(await db.monographs.get(db.monographs.monograph(note.id)));
         Navigation.queueRoutesForUpdate();
         setPublishLoading(false);
       }
@@ -98,7 +121,7 @@ const PublishNoteSheet = ({
     try {
       if (note?.id) {
         await db.monographs.unpublish(note.id);
-        setNote(await db.notes.note(note.id));
+        setMonograph(undefined);
         Navigation.queueRoutesForUpdate();
         setPublishLoading(false);
       }
@@ -118,7 +141,8 @@ const PublishNoteSheet = ({
       style={{
         width: "100%",
         alignSelf: "center",
-        paddingHorizontal: DefaultAppStyles.GAP
+        paddingHorizontal: DefaultAppStyles.GAP,
+        gap: DefaultAppStyles.GAP_VERTICAL
       }}
     >
       <DialogHeader
@@ -218,37 +242,54 @@ const PublishNoteSheet = ({
             style={{
               flexDirection: "row",
               alignItems: "center",
-              marginBottom: DefaultAppStyles.GAP_VERTICAL,
               backgroundColor: colors.secondary.background,
-              paddingVertical: DefaultAppStyles.GAP_VERTICAL,
               borderRadius: defaultBorderRadius,
-              marginTop: DefaultAppStyles.GAP_VERTICAL
+              paddingHorizontal: DefaultAppStyles.GAP,
+              paddingVertical: DefaultAppStyles.GAP_VERTICAL
             }}
           >
-            <IconButton
-              onPress={() => {
-                if (publishing) return;
-                setIsLocked(!isLocked);
-              }}
-              color={isLocked ? colors.selected.icon : colors.primary.icon}
-              size={AppFontSize.xl}
-              name={
-                isLocked
-                  ? "check-circle-outline"
-                  : "checkbox-blank-circle-outline"
-              }
-            />
-
             <View
               style={{
                 width: "100%",
                 flexShrink: 1
               }}
             >
-              <Heading size={AppFontSize.md}>
-                {strings.monographPassHeading()}
-              </Heading>
+              <View
+                style={{
+                  flexDirection: "row",
+                  justifyContent: "space-between"
+                }}
+              >
+                <Heading size={AppFontSize.md}>
+                  {strings.monographPassHeading()}
+                </Heading>
+                <ToggleSwitch
+                  isOn={isLocked}
+                  onColor={colors.primary.accent}
+                  offColor={colors.primary.icon}
+                  size="small"
+                  animationSpeed={150}
+                  onToggle={() => setIsLocked(!isLocked)}
+                />
+              </View>
+
               <Paragraph>{strings.monographPassDesc()}</Paragraph>
+
+              {isLocked ? (
+                <>
+                  <Input
+                    fwdRef={pwdInput}
+                    onChangeText={(value) => (passwordValue.current = value)}
+                    blurOnSubmit
+                    secureTextEntry
+                    defaultValue={passwordValue.current}
+                    placeholder={strings.enterPassword()}
+                    containerStyle={{
+                      marginTop: DefaultAppStyles.GAP_VERTICAL
+                    }}
+                  />
+                </>
+              ) : null}
             </View>
           </TouchableOpacity>
 
@@ -262,31 +303,35 @@ const PublishNoteSheet = ({
               alignItems: "center",
               backgroundColor: colors.secondary.background,
               paddingVertical: DefaultAppStyles.GAP_VERTICAL,
-              borderRadius: defaultBorderRadius
+              borderRadius: defaultBorderRadius,
+              paddingHorizontal: DefaultAppStyles.GAP
             }}
           >
-            <IconButton
-              onPress={() => {
-                setSelfDestruct(!selfDestruct);
-              }}
-              color={selfDestruct ? colors.selected.icon : colors.primary.icon}
-              size={AppFontSize.xl}
-              name={
-                selfDestruct
-                  ? "check-circle-outline"
-                  : "checkbox-blank-circle-outline"
-              }
-            />
-
             <View
               style={{
                 width: "100%",
                 flexShrink: 1
               }}
             >
-              <Heading size={AppFontSize.md}>
-                {strings.monographSelfDestructHeading()}
-              </Heading>
+              <View
+                style={{
+                  flexDirection: "row",
+                  justifyContent: "space-between"
+                }}
+              >
+                <Heading size={AppFontSize.md}>
+                  {strings.monographSelfDestructHeading()}
+                </Heading>
+                <ToggleSwitch
+                  isOn={selfDestruct}
+                  onColor={colors.primary.accent}
+                  offColor={colors.primary.icon}
+                  size="small"
+                  animationSpeed={150}
+                  onToggle={() => setSelfDestruct(!selfDestruct)}
+                />
+              </View>
+
               <Paragraph>{strings.monographSelfDestructDesc()}</Paragraph>
             </View>
           </TouchableOpacity>
@@ -294,56 +339,33 @@ const PublishNoteSheet = ({
           <View
             style={{
               width: "100%",
-              alignSelf: "center",
-              marginTop: DefaultAppStyles.GAP_VERTICAL
+              justifyContent: "center",
+              gap: DefaultAppStyles.GAP_VERTICAL
             }}
           >
-            {isLocked ? (
-              <>
-                <Input
-                  fwdRef={pwdInput}
-                  onChangeText={(value) => (passwordValue.current = value)}
-                  blurOnSubmit
-                  secureTextEntry
-                  defaultValue={passwordValue.current}
-                  placeholder={strings.enterPassword()}
-                />
-                <Seperator half />
-              </>
-            ) : null}
-
-            <View
+            <Button
+              onPress={publishNote}
               style={{
-                flexDirection: "row",
                 width: "100%",
-                justifyContent: "center"
+                borderRadius: defaultBorderRadius
               }}
-            >
-              {isPublished && (
-                <>
-                  <Button
-                    onPress={deletePublishedNote}
-                    fontSize={AppFontSize.md}
-                    type="error"
-                    title={strings.unpublish()}
-                    style={{
-                      width: "49%"
-                    }}
-                  />
-                </>
-              )}
-              <Seperator half />
-              <Button
-                onPress={publishNote}
-                fontSize={AppFontSize.md}
-                style={{
-                  width: isPublished ? "49%" : 250,
-                  borderRadius: isPublished ? 5 : 100
-                }}
-                type="accent"
-                title={isPublished ? strings.update() : strings.publish()}
-              />
-            </View>
+              type="accent"
+              title={isPublished ? strings.update() : strings.publish()}
+            />
+
+            {isPublished && (
+              <>
+                <Button
+                  onPress={deletePublishedNote}
+                  type="error"
+                  title={strings.unpublish()}
+                  style={{
+                    width: "100%",
+                    borderRadius: defaultBorderRadius
+                  }}
+                />
+              </>
+            )}
           </View>
         </>
       )}

apps/mobile/app/components/sheets/rate-app/index.js

@@ -93,7 +93,6 @@ const RateAppSheet = () => {
         <Seperator half />
         <Button
           onPress={rateApp}
-          fontSize={AppFontSize.md}
           width="100%"
           type="accent"
           title={strings.rateApp()}
@@ -116,14 +115,12 @@ const RateAppSheet = () => {
               setVisible(false);
               clearMessage();
             }}
-            fontSize={AppFontSize.md}
             type="error"
             width="48%"
             title={strings.never()}
           />
           <Button
             onPress={onClose}
-            fontSize={AppFontSize.md}
             width="48%"
             type="secondary"
             title={strings.later()}

apps/mobile/app/components/sheets/recovery-key/index.jsx

@@ -295,7 +295,6 @@ class RecoveryKeySheet extends React.Component {
             title={strings.copyToClipboard()}
             width="100%"
             type="secondaryAccented"
-            fontSize={AppFontSize.md}
           />
           <Seperator />
           <Button
@@ -303,7 +302,6 @@ class RecoveryKeySheet extends React.Component {
             onPress={this.saveQRCODE}
             width="100%"
             type="secondaryAccented"
-            fontSize={AppFontSize.md}
             icon="qrcode"
           />
           <Seperator />
@@ -313,7 +311,6 @@ class RecoveryKeySheet extends React.Component {
             width="100%"
             type="secondaryAccented"
             icon="text"
-            fontSize={AppFontSize.md}
           />
           <Seperator />
 
@@ -323,7 +320,6 @@ class RecoveryKeySheet extends React.Component {
             width="100%"
             type="secondaryAccented"
             icon="cloud"
-            fontSize={AppFontSize.md}
           />
           <Seperator />
 
@@ -344,7 +340,6 @@ class RecoveryKeySheet extends React.Component {
             title={strings.done()}
             width="100%"
             type="error"
-            fontSize={AppFontSize.md}
             onPress={this.close}
           />
         </View>

apps/mobile/app/components/sheets/user/index.tsx

@@ -312,7 +312,6 @@ export const UserSheet = () => {
             icon: "logout",
             title: strings.logout(),
             onPress: async () => {
-              console.log("logout");
               ref.current?.hide();
               await sleep(300);
               logoutUser();

apps/mobile/app/components/side-menu/index.tsx

@@ -56,6 +56,8 @@ import {
 import { useSideBarDraggingStore } from "./dragging-store";
 import { Button } from "../ui/button";
 import SettingsService from "../../services/settings";
+import { isFeatureAvailable } from "@notesnook/common";
+import PaywallSheet from "../sheets/paywall";
 const renderScene = SceneMap({
   home: SideMenuHome,
   notebooks: SideMenuNotebooks,
@@ -211,6 +213,14 @@ const TabBar = (
                         const ids = useSideMenuNotebookSelectionStore
                           .getState()
                           .getSelectedItemIds();
+                        if (!ids.length) {
+                          ToastManager.show({
+                            context: "local",
+                            type: "error",
+                            message: strings.noNotebooksSelectedToMove()
+                          });
+                          return;
+                        }
                         const notebooks = await db.notebooks.all.items(ids);
                         Navigation.navigate("MoveNotebook", {
                           selectedNotebooks: notebooks
@@ -339,10 +349,23 @@ const TabBar = (
                       testID="sidebar-add-button"
                       size={AppFontSize.lg - 2}
                       color={colors.primary.icon}
-                      onPress={() => {
+                      onPress={async () => {
                         if (props.navigationState.index === 1) {
+                          const notebooksFeature = await isFeatureAvailable(
+                            "notebooks"
+                          );
+                          if (!notebooksFeature.isAllowed) {
+                            PaywallSheet.present(notebooksFeature);
+                            return;
+                          }
+
                           AddNotebookSheet.present();
                         } else {
+                          const tagsFeature = await isFeatureAvailable("tags");
+                          if (!tagsFeature.isAllowed) {
+                            PaywallSheet.present(tagsFeature);
+                            return;
+                          }
                           presentDialog({
                             title: strings.addTag(),
                             paragraph: strings.addTagDesc(),

apps/mobile/app/components/side-menu/notebook-item.tsx

@@ -49,7 +49,8 @@ export const NotebookItem = ({
   onPress,
   onLongPress,
   onAddNotebook,
-  canDisableSelectionMode
+  canDisableSelectionMode,
+  disableExpand
 }: {
   index: number;
   item: TreeItem;
@@ -64,6 +65,7 @@ export const NotebookItem = ({
   onLongPress?: () => void;
   onAddNotebook?: () => void;
   canDisableSelectionMode?: boolean;
+  disableExpand?: boolean;
 }) => {
   const notebook = item.notebook;
   const isFocused = focused;
@@ -166,7 +168,7 @@ export const NotebookItem = ({
             }
             testID={item.hasChildren ? `expand-notebook-${index}` : ""}
             onPress={() => {
-              if (item.hasChildren) {
+              if (item.hasChildren && !disableExpand) {
                 onToggleExpanded?.();
               } else {
                 onPress?.();
@@ -182,7 +184,7 @@ export const NotebookItem = ({
               borderRadius: defaultBorderRadius
             }}
             name={
-              !item.hasChildren
+              !item.hasChildren || disableExpand
                 ? "book-outline"
                 : expanded
                 ? "chevron-down"

apps/mobile/app/components/side-menu/side-menu-home.tsx

@@ -16,34 +16,36 @@ 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 { SubscriptionPlan } from "@notesnook/core";
 import { strings } from "@notesnook/intl";
 import { useThemeColors } from "@notesnook/theme";
-import React, { Fragment } from "react";
+import React from "react";
 import { FlatList, View } from "react-native";
 import { DraxProvider, DraxScrollView } from "react-native-drax";
 import { db } from "../../common/database";
+import Navigation from "../../services/navigation";
+import SettingsService from "../../services/settings";
 import { useMenuStore } from "../../stores/use-menu-store";
 import { useSettingStore } from "../../stores/use-setting-store";
+import { useUserStore } from "../../stores/use-user-store";
 import { MenuItemsList } from "../../utils/menu-items";
 import { DefaultAppStyles } from "../../utils/styles";
 import ReorderableList from "../list/reorderable-list";
+import { MenuItemProperties } from "../sheets/menu-item-properties";
+import { Button } from "../ui/button";
 import { ColorSection } from "./color-section";
 import { MenuItem } from "./menu-item";
 import { PinnedSection } from "./pinned-section";
 import { SideMenuHeader } from "./side-menu-header";
-import { SUBSCRIPTION_STATUS } from "../../utils/constants";
-import { eSendEvent } from "../../services/event-manager";
-import { eOpenPremiumDialog } from "../../utils/events";
-import { useUserStore } from "../../stores/use-user-store";
-import { Button } from "../ui/button";
-import { MenuItemProperties } from "../sheets/menu-item-properties";
 
 const pro = {
-  title: strings.getNotesnookPro(),
+  title: strings.upgradePlan(),
   icon: "crown",
   id: "pro",
   onPress: () => {
-    eSendEvent(eOpenPremiumDialog);
+    Navigation.navigate("PayWall", {
+      context: "logged-in"
+    });
   }
 };
 
@@ -58,8 +60,9 @@ export function SideMenuHome() {
     state.hiddenItems["routes"]
   ]);
   const subscriptionType = useUserStore(
-    (state) => state.user?.subscription?.type
+    (state) => state.user?.subscription?.plan
   );
+  const user = useUserStore.getState().user;
 
   return (
     <View
@@ -137,19 +140,16 @@ export function SideMenuHome() {
           paddingVertical: DefaultAppStyles.GAP_VERTICAL
         }}
       >
-        {subscriptionType === SUBSCRIPTION_STATUS.TRIAL ||
-        subscriptionType === SUBSCRIPTION_STATUS.BASIC ? (
+        {(subscriptionType === SubscriptionPlan.FREE ||
+          !subscriptionType ||
+          !user) &&
+        !SettingsService.getProperty("serverUrls") ? (
           <Button
             title={pro.title}
-            iconColor={colors.static.yellow}
-            textStyle={{
-              color: colors.static.white
-            }}
-            icon={pro.icon}
             style={{
-              backgroundColor: colors.static.black,
               width: "100%"
             }}
+            type="accent"
             onPress={pro.onPress}
           />
         ) : null}

apps/mobile/app/components/side-menu/side-menu-notebooks.tsx

@@ -20,8 +20,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import { Notebook } from "@notesnook/core";
 import { strings } from "@notesnook/intl";
 import { useThemeColors } from "@notesnook/theme";
+import { FlashList } from "@shopify/flash-list";
 import React, { useEffect, useState } from "react";
-import { FlatList, TextInput, View } from "react-native";
+import { TextInput, View } from "react-native";
 import { db } from "../../common/database";
 import NotebookScreen from "../../screens/notebook";
 import Navigation from "../../services/navigation";
@@ -42,6 +43,7 @@ import {
 useSideMenuNotebookSelectionStore.setState({
   multiSelect: true
 });
+
 export const SideMenuNotebooks = () => {
   const tree = useSideMenuNotebookTreeStore((state) => state.tree);
   const [notebooks, loading] = useNotebooks();
@@ -64,13 +66,19 @@ export const SideMenuNotebooks = () => {
 
   const updateNotebooks = React.useCallback(() => {
     if (lastQuery.current) {
+      // useSideMenuNotebookTreeStore.setState({
+      //   isSearching: true
+      // });
       db.lookup
         .notebooks(lastQuery.current)
-        .sorted()
+        .sorted(db.settings.getGroupOptions("notebooks"))
         .then((filtered) => {
           setFilteredNotebooks(filtered);
         });
     } else {
+      // useSideMenuNotebookTreeStore.setState({
+      //   isSearching: false
+      // });
       setFilteredNotebooks(notebooks);
     }
   }, [notebooks]);
@@ -137,13 +145,13 @@ export const SideMenuNotebooks = () => {
         />
       ) : (
         <>
-          <FlatList
+          <FlashList
             data={tree}
             bounces={false}
             bouncesZoom={false}
             overScrollMode="never"
-            keyExtractor={(item) => item.notebook.id}
-            windowSize={3}
+            // keyExtractor={(item,) => item.notebook.id}
+            estimatedItemSize={30}
             ListHeaderComponent={
               <View
                 style={{
@@ -196,7 +204,9 @@ const NotebookItemWrapper = React.memo(
     const expanded = useSideMenuNotebookExpandedStore(
       (state) => state.expanded[item.notebook.id]
     );
-
+    const disableExpand = useSideMenuNotebookTreeStore(
+      (state) => state.isSearching
+    );
     const selectionEnabled = useSideMenuNotebookSelectionStore(
       (state) => state.enabled
     );
@@ -256,6 +266,7 @@ const NotebookItemWrapper = React.memo(
                 .removeChildren(item.notebook.id);
             }
           }}
+          disableExpand={disableExpand}
           selected={selected}
           selectionEnabled={selectionEnabled}
           selectionStore={useSideMenuNotebookSelectionStore}

apps/mobile/app/components/side-menu/side-menu-tags.tsx

@@ -220,7 +220,7 @@ export const SideMenuTags = () => {
     if (lastQuery.current) {
       db.lookup
         .tags(lastQuery.current.trim())
-        .sorted()
+        .sorted(db.settings.getGroupOptions("tags"))
         .then(async (filtered) => {
           setFilteredTags(filtered);
         });