mobile: generate sourcemaps

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

@@ -14,8 +14,6 @@ runs:
           apps/mobile/package-lock.json
           apps/desktop/package-lock.json
           apps/web/package-lock.json
-          apps/monograph/package-lock.json
-          apps/theme-builder/package-lock.json
           extensions/web-clipper/package-lock.json
           packages/core/package-lock.json
           packages/crypto/package-lock.json
@@ -26,4 +24,3 @@ runs:
           packages/logger/package-lock.json
           packages/streamable-fs/package-lock.json
           packages/theme/package-lock.json
-          packages/intl/package-lock.json

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

@@ -4,7 +4,7 @@ on: workflow_dispatch
 
 jobs:
   build:
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-latest
     timeout-minutes: 40
     env:
       CMAKE_C_COMPILER_LAUNCHER: ccache
@@ -22,7 +22,7 @@ jobs:
       - name: Use specific Java version for the builds
         uses: joschi/setup-jdk@v2
         with:
-          java-version: "17"
+          java-version: "11"
           architecture: "x64"
 
       - name: Install node modules
@@ -58,7 +58,7 @@ jobs:
           ccache -p
 
       - name: Cache gradle
-        uses: actions/cache@v3
+        uses: actions/cache@v2
         with:
           path: |
             ~/.gradle/caches
@@ -129,7 +129,7 @@ jobs:
           serviceAccountJsonPlainText: ${{ secrets.SERVICE_ACCOUNT_JSON }}
           packageName: com.streetwriters.notesnook
           releaseFiles: ${{steps.sign_app.outputs.signedReleaseFile}}
-          track: beta
+          track: alpha
           status: completed
           whatsNewDirectory: apps/mobile/native/android/releasenotes/
 
@@ -138,7 +138,7 @@ jobs:
         with:
           draft: true
           tag_name: ${{ steps.package-version.outputs.current-version}}-beta-android
-          name: Notesnook Android v${{ steps.package-version.outputs.current-version}}
+          name: Notesnook Android v${{ steps.package-version.outputs.current-version}} Beta
           repository: streetwriters/notesnook
           token: ${{ secrets.GITHUB_TOKEN }}
           files: |
@@ -146,7 +146,6 @@ jobs:
             apps/mobile/native/android/app/build/outputs/apk/release/notesnook-armeabi-v7a.apk
             apps/mobile/native/android/app/build/outputs/apk/release/notesnook-x86.apk
             apps/mobile/native/android/app/build/outputs/apk/release/notesnook-x86_64.apk
-            ${{steps.sign_app.outputs.signedReleaseFile}}
 
       - name: Upload sourcemaps
         uses: actions/upload-artifact@v4

.github/workflows/android.publish.yml

@@ -58,7 +58,7 @@ jobs:
           ccache -p
 
       - name: Cache gradle
-        uses: actions/cache@v3
+        uses: actions/cache@v2
         with:
           path: |
             ~/.gradle/caches

.github/workflows/core.tests.yml

@@ -18,7 +18,7 @@ on:
 
 jobs:
   test:
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-latest
 
     steps:
       - uses: actions/checkout@v4

.github/workflows/desktop.publish.yml

@@ -33,19 +33,11 @@ on:
         required: true
         default: true
         description: "Build for macOS?"
-      release-track:
-        type: choice
-        required: true
-        default: stable
-        description: "Select the release track"
-        options:
-          - stable
-          - beta
 
 jobs:
   build:
     name: Build
-    runs-on: ubuntu-24.04
+    runs-on: ubuntu-latest
     steps:
       - name: Checkout
         uses: actions/checkout@v4
@@ -57,30 +49,14 @@ jobs:
         run: |
           npm ci --ignore-scripts --prefer-offline --no-audit
           npm run bootstrap -- --scope=web
-          npm run bootstrap -- --scope=desktop
-
-      - name: Install sqlite-better-trigram for all arch
-        run: |
-          npm i --cpu arm64 sqlite-better-trigram
-          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' }}
+      - name: Generate desktop build
         run: npx nx build:desktop @notesnook/web
 
-      - name: Generate desktop build (beta)
-        if: ${{ inputs.release-track == 'beta' }}
-        run: BETA=true npx nx build:desktop @notesnook/web
-
-      - name: Build desktop bundle
-        working-directory: ./apps/desktop
-        run: npm run bundle
-
       - name: Archive build artifact
         uses: actions/upload-artifact@v4
         with:
@@ -95,8 +71,7 @@ jobs:
 
       - name: Package desktop build
         run: |
-          cp -r ./apps/web/build ./apps/desktop/
-          zip -r ./notesnook_build_v${{ steps.app_metadata.outputs.app_version }}.zip ./apps/desktop/build/
+          zip -r ./notesnook_build_v${{ steps.app_metadata.outputs.app_version }}.zip ./apps/web/build/
           echo "Build folder archived to ./notesnook_build_v${{ steps.app_metadata.outputs.app_version }}.zip"
 
       - name: Upload desktop build
@@ -112,8 +87,7 @@ jobs:
       - name: Generate flatpak sources
         if: inputs.publish-github && inputs.build-linux
         run: |
-          sudo apt-get update
-          sudo apt-get install -y --quiet flatpak flatpak-builder pipx
+          sudo apt-get install -y flatpak flatpak-builder pipx
           git clone https://github.com/flatpak/flatpak-builder-tools.git /tmp/flatpak-builder-tools
           cd /tmp/flatpak-builder-tools/node
           pipx install .
@@ -199,7 +173,7 @@ jobs:
           CSC_KEY_PASSWORD: ${{ secrets.mac_certs_password }}
         run: |
           npx nx run release --project @notesnook/desktop -- --variant=mas
-          yarn electron-builder --config=electron-builder.config.js --mac mas --universal -p never
+          yarn electron-builder --mac mas --universal -p never
         working-directory: ./apps/desktop
 
       - name: Build zip and dmg
@@ -213,9 +187,9 @@ jobs:
         run: |
           npx nx run release --project @notesnook/desktop
           if [ ${{ inputs.publish-github }} == true ]; then
-            yarn electron-builder --config=electron-builder.config.js --mac zip dmg --arm64 --x64 -p always
+            yarn electron-builder --mac zip dmg --arm64 --x64 -p always
           else
-            yarn electron-builder --config=electron-builder.config.js --mac zip dmg --arm64 --x64 -p never
+            yarn electron-builder --mac zip dmg --arm64 --x64 -p never
           fi
         working-directory: ./apps/desktop
 
@@ -277,7 +251,7 @@ jobs:
       - name: Build snap
         if: inputs.publish-snap
         run: |
-          yarn electron-builder --config=electron-builder.config.js --linux snap:x64 -p never
+          yarn electron-builder --linux snap:x64 -p never
         working-directory: ./apps/desktop
 
       - name: Build AppImage
@@ -285,9 +259,9 @@ jobs:
           GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         run: |
           if [ ${{ inputs.publish-github }} == true ]; then
-            yarn electron-builder --config=electron-builder.config.js --linux AppImage:x64 AppImage:arm64 -p always
+            yarn electron-builder --linux AppImage:x64 AppImage:arm64 -p always
           else
-            yarn electron-builder --config=electron-builder.config.js --linux AppImage:x64 AppImage:arm64 -p never
+            yarn electron-builder --linux AppImage:x64 AppImage:arm64 -p never
           fi
         working-directory: ./apps/desktop
 
@@ -347,8 +321,8 @@ jobs:
           AZURE_CLIENT_SECRET: ${{ secrets.AZURE_CLIENT_SECRET }}
         run: |
           if ($${{ inputs.publish-github }} -eq $true) {
-            yarn electron-builder --config=electron-builder.config.js --win --publish always
+            yarn electron-builder --win --publish always
           } else {
-            yarn electron-builder --config=electron-builder.config.js --win --publish never
+            yarn electron-builder --win --publish never
           }
         working-directory: ./apps/desktop

.github/workflows/desktop.tests.yml

@@ -14,7 +14,7 @@ on:
 jobs:
   build:
     name: Build
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-latest
     steps:
       - name: Checkout
         uses: actions/checkout@v4
@@ -69,11 +69,12 @@ jobs:
 
       - name: Build app
         run: |
-          yarn electron-builder --config=electron-builder.config.js --mac --dir --x64
+          yarn electron-builder --mac --dir --x64
         working-directory: ./apps/desktop
 
       - name: Run tests x64
-        run: npm run test
+        run: |
+          EXECUTABLE_PATH=output/mac/Notesnook.app/Contents/MacOS/Notesnook npm run test
         working-directory: ./apps/desktop
 
       - name: Upload test results
@@ -113,11 +114,12 @@ jobs:
 
       - name: Build app
         run: |
-          yarn electron-builder --config=electron-builder.config.js --mac --dir --arm64
+          yarn electron-builder --mac --dir --arm64
         working-directory: ./apps/desktop
 
       - name: Run tests arm64
-        run: npm run test
+        run: |
+          EXECUTABLE_PATH=output/mac-arm64/Notesnook.app/Contents/MacOS/Notesnook npm run test
         working-directory: ./apps/desktop
 
       - name: Upload test results
@@ -131,7 +133,7 @@ jobs:
   test-linux:
     name: Test for Linux
     needs: build
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-latest
 
     steps:
       - name: Check out Git repository
@@ -163,11 +165,12 @@ jobs:
 
       - name: Build app
         run: |
-          yarn electron-builder --config=electron-builder.config.js --linux --dir --arm64 --x64
+          yarn electron-builder --linux --dir --arm64 --x64
         working-directory: ./apps/desktop
 
       - name: Run tests
-        run: xvfb-run --auto-servernum --server-args="-screen 0 1920x1080x24" -- npm run test
+        run: |
+          EXECUTABLE_PATH=output/linux-unpacked/notesnook xvfb-run --auto-servernum --server-args="-screen 0 1920x1080x24" -- npm run test
         working-directory: ./apps/desktop
 
       - name: Upload test results
@@ -213,11 +216,12 @@ jobs:
 
       - name: Build app
         run: |
-          npx cross-env NOTESNOOK_STAGING=true yarn electron-builder --config=electron-builder.config.js --win --dir --arm64 --x64
+          npx cross-env NOTESNOOK_STAGING=true yarn electron-builder --win --dir --arm64 --x64
         working-directory: ./apps/desktop
 
       - name: Run tests
-        run: npm run test
+        run: |
+          npx cross-env EXECUTABLE_PATH=output/win-unpacked/Notesnook.exe npm run test
         working-directory: ./apps/desktop
 
       - name: Upload test results

.github/workflows/editor.tests.yml

@@ -19,7 +19,7 @@ on:
 jobs:
   build:
     name: Build
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-latest
     steps:
       - name: Checkout
         uses: actions/checkout@v4

.github/workflows/help.publish.yml

@@ -11,7 +11,7 @@ on:
 jobs:
   build:
     name: Build
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-latest
     steps:
       - name: Checkout
         uses: actions/checkout@v4

.github/workflows/ios.publish.yml

@@ -9,7 +9,7 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v2
 
       - name: Setup Node
         uses: ./.github/actions/setup-node-with-cache
@@ -47,7 +47,7 @@ jobs:
           ccache -p
 
       - name: Cache Pods
-        uses: actions/cache@v3
+        uses: actions/cache@v2
         id: pods-cache
         with:
           path: apps/mobile/native/ios/Pods
@@ -89,13 +89,13 @@ jobs:
       - name: CCache Stats After Build
         run: ccache -sv
 
-      - name: "Upload app to TestFlight"
-        uses: apple-actions/upload-testflight-build@v1
-        with:
-          app-path: Notesnook.ipa
-          issuer-id: ${{ secrets.API_KEY_ISSUER_ID }}
-          api-key-id: ${{ secrets.API_KEY_ID }}
-          api-private-key: ${{ secrets.API_KEY }}
+      # - name: "Upload app to TestFlight"
+      #   uses: apple-actions/upload-testflight-build@v1
+      #   with:
+      #     app-path: Notesnook.ipa
+      #     issuer-id: ${{ secrets.API_KEY_ISSUER_ID }}
+      #     api-key-id: ${{ secrets.API_KEY_ID }}
+      #     api-private-key: ${{ secrets.API_KEY }}
 
       - name: Upload Notesnook.ipa to Github
         uses: actions/upload-artifact@v4

.github/workflows/monograph.publish.yml

@@ -14,7 +14,7 @@ on: workflow_dispatch
 jobs:
   push_to_registry:
     name: Push Docker image to Docker Hub
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-latest
     permissions:
       packages: write
       contents: read

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

@@ -5,7 +5,7 @@ on: workflow_dispatch
 jobs:
   build:
     name: Build
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-latest
     steps:
       - name: Checkout
         uses: actions/checkout@v4

.github/workflows/vericrypt.publish.yml

@@ -5,7 +5,7 @@ on: workflow_dispatch
 jobs:
   build:
     name: Build
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-latest
     steps:
       - name: Checkout
         uses: actions/checkout@v4

.github/workflows/web.benchmarks.yml

@@ -14,7 +14,7 @@ on:
 jobs:
   bench:
     name: Bench
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-latest
     steps:
       - name: Checkout
         uses: actions/checkout@v4

.github/workflows/web.publish.yml

@@ -1,21 +1,11 @@
 name: Publish @notesnook/web
 
-on:
-  workflow_dispatch:
-    inputs:
-      release-track:
-        type: choice
-        required: true
-        default: stable
-        description: "Select the release track"
-        options:
-          - stable
-          - beta
+on: workflow_dispatch
 
 jobs:
   build:
     name: Build
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-latest
     steps:
       - name: Checkout
         uses: actions/checkout@v4
@@ -34,20 +24,8 @@ jobs:
           echo "CLOUDFLARE_ACCOUNT_ID=${{ secrets.CLOUDFLARE_ACCOUNT_ID }}" >> $GITHUB_ENV
           echo "CLOUDFLARE_API_TOKEN=${{ secrets.CLOUDFLARE_API_TOKEN }}" >> $GITHUB_ENV
 
-      - name: Generate build (stable)
-        if: ${{ inputs.release-track == 'stable' }}
+      - name: Generate build
         run: npm run build:web
 
-      - name: Publish to Cloudflare Pages (stable)
-        if: ${{ inputs.release-track == 'stable' }}
-        working-directory: ./apps/web
-        run: npx --yes wrangler pages deploy --project-name=notesnook-app ./build/
-
-      - name: Generate build (beta)
-        if: ${{ inputs.release-track == 'beta' }}
-        run: npm run build:beta:web
-
-      - name: Publish to Cloudflare Pages (beta)
-        if: ${{ inputs.release-track == 'beta' }}
-        working-directory: ./apps/web
-        run: npx --yes wrangler pages deploy --branch=beta --project-name=notesnook-app-beta ./build/
+      - name: Publish to Cloudflare Pages
+        run: npx --yes wrangler pages deploy --project-name=notesnook-app ./apps/web/build/

.github/workflows/web.tests.yml

@@ -19,7 +19,7 @@ on:
 jobs:
   build:
     name: Build
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-latest
     steps:
       - name: Checkout
         uses: actions/checkout@v4
@@ -49,7 +49,7 @@ jobs:
     name: 🧪 Test (${{ matrix.shard }}/${{ strategy.job-total }})
     strategy:
       matrix:
-        shard: [1, 2, 3, 4, 5]
+        shard: [1, 2, 3, 4]
     runs-on: ubuntu-latest
     steps:
       - name: Checkout

.gitignore

@@ -11,4 +11,3 @@ nx-cloud.env
 site
 node_modules.backup
 .nx
-*.patch

apps/desktop/.gitignore

@@ -2,6 +2,4 @@ node_modules
 build
 output
 dist
-_catalog
-test-results
-test-artifacts
+_catalog

apps/desktop/README.md

@@ -58,13 +58,13 @@ This will compile and run the app in production mode but it won't generate any p
 npm run release -- --rebuild
 
 # For macOS
-npx electron-builder --config=electron-builder.config.js --mac dmg --arm64 --x64 -publish never
+npx electron-builder --mac dmg --arm64 --x64 -publish never
 
 # For Linux (AppImage)
-npx electron-builder --config=electron-builder.config.js --linux AppImage:x64 AppImage:arm64 -publish never
+npx electron-builder --linux AppImage:x64 AppImage:arm64 -publish never
 
 # For Windows
-npx electron-builder --config=electron-builder.config.js --win --publish never
+npx electron-builder --win --publish never
 ```
 
 Feel free to play around with the `electron-builder` command to get the packages you need. `npx electron-builder --help` is a great resource to learn different commands & platforms supported by `electron-builder`.

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

@@ -1,246 +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 { test } from "vitest";
-import { harness } from "./utils.js";
-import { writeFile } from "fs/promises";
-import { Page } from "playwright";
-import { gt, lt } from "semver";
-
-test("update starts downloading if version is outdated", async (t) => {
-  await harness(
-    t,
-    async ({ page }) => {
-      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: /updating/i })
-        .waitFor({ state: "attached" });
-    },
-    { version: "3.0.0" }
-  );
-});
-
-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
-        })
-      );
-
-      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: /available/i })
-        .waitFor({ state: "attached" });
-    },
-    { version: "3.0.0" }
-  );
-});
-
-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"
-        })
-      );
-
-      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");
-
-      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" }
-  );
-});
-
-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 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" }
-  );
-});
-
-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();
-    });
-}

apps/desktop/__tests__/launch.test.mjs

@@ -17,12 +17,16 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { test } from "vitest";
-import { harness } from "./utils.js";
+import test from "node:test";
+import { launchApp } from "./utils.mjs";
 import assert from "assert";
+import slugify from "slugify";
+import path from "path";
+import { mkdir } from "fs/promises";
 
 test("make sure app loads", async (t) => {
-  await harness(t, async ({ page }) => {
+  const { app, page } = await launchApp();
+  try {
     await page.waitForSelector("#authForm");
 
     assert.ok(
@@ -34,5 +38,16 @@ test("make sure app loads", async (t) => {
       .click();
 
     await page.waitForSelector(".ProseMirror");
-  });
+  } catch (e) {
+    await mkdir("test-results", { recursive: true });
+    await page.screenshot({
+      path: path.join(
+        "test-results",
+        `${slugify(t.name)}-${process.platform}-${process.arch}-error.png`
+      )
+    });
+    throw e;
+  } finally {
+    await app.close();
+  }
 });

apps/desktop/__tests__/utils.mjs

@@ -17,14 +17,22 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { db } from "../common/database";
-import createDBCollectionStore from "./create-db-collection-store";
+import { _electron as electron } from "playwright";
 
-const { useStore: useMonographStore, useCollection: useMonographs } =
-  createDBCollectionStore({
-    getCollection: () =>
-      db.monographs.all.grouped(db.settings.getGroupOptions("notes")),
-    eagerlyFetchFirstBatch: true
+const executablePath = process.env.EXECUTABLE_PATH;
+
+// process.platform === "linux"
+//   ? "output/linux-unpacked/Notesnook"
+//   : process.platform === "darwin"
+//   ? "output/mac/Notesnook.app/Contents/MacOS/Notesnook"
+//   : "output/win-unpacked/Notesnook.exe";
+
+export async function launchApp() {
+  const app = await electron.launch({
+    executablePath
   });
 
-export { useMonographStore, useMonographs };
+  const page = await app.firstWindow();
+
+  return { app, page };
+}

apps/desktop/__tests__/utils.ts

@@ -1,172 +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 { execSync } from "child_process";
-import { mkdir } from "fs/promises";
-import { fileURLToPath } from "node:url";
-import path from "path";
-import { _electron as electron } from "playwright";
-import slugify from "slugify";
-import { TaskContext } from "vitest";
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-const IS_DEBUG = process.env.NN_DEBUG === "true" || process.env.CI === "true";
-
-interface AppContext {
-  app: import("playwright").ElectronApplication;
-  page: import("playwright").Page;
-  configPath: string;
-  relaunch: () => Promise<void>;
-}
-
-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);
-}
-
-async function buildAndLaunchApp(options?: TestOptions): Promise<AppContext> {
-  const productName = makeid(10);
-  const executablePath = await buildApp({ ...options, productName });
-  const { app, page, configPath } = await launchApp(executablePath);
-  const ctx: AppContext = {
-    app,
-    page,
-    configPath,
-    relaunch: async () => {
-      const { app, page, configPath } = await launchApp(executablePath);
-      ctx.app = app;
-      ctx.page = page;
-      ctx.configPath = configPath;
-    }
-  };
-  return ctx;
-}
-
-async function launchApp(executablePath: string) {
-  const app = await electron.launch({
-    executablePath,
-    args: IS_DEBUG ? [] : ["--hidden"],
-    env:
-      process.platform === "linux"
-        ? {
-            ...(process.env as Record<string, string>),
-            APPIMAGE: "true"
-          }
-        : (process.env as Record<string, string>)
-  });
-
-  const page = await app.firstWindow();
-
-  const userDataDirectory = await app.evaluate((a) => {
-    return a.app.getPath("userData");
-  });
-  const configPath = path.join(userDataDirectory, "config.json");
-  return {
-    app,
-    page,
-    configPath
-  };
-}
-
-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
-    }
-  });
-
-  return path.join(
-    __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
-  );
-}
-
-function makeid(length: number) {
-  let result = "";
-  const characters =
-    "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
-  const charactersLength = characters.length;
-  let counter = 0;
-  while (counter < length) {
-    result += characters.charAt(Math.floor(Math.random() * charactersLength));
-    counter += 1;
-  }
-  return result.toLowerCase();
-}

apps/desktop/electron-builder.config.js

@@ -1,203 +0,0 @@
-/*
-This file is part of the Notesnook project (https://notesnook.com/)
-
-Copyright (C) 2023 Streetwriters (Private) Limited
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU General Public License for more details.
-
-You should have received a copy of the GNU General Public License
-along with this program.  If not, see <http://www.gnu.org/licenses/>.
-*/
-
-const path = require("path");
-const pkg = require("./package.json");
-
-const buildRoot = process.env.NN_BUILD_ROOT || ".";
-const buildFiles = [
-  `${buildRoot}/build/`,
-  `!${buildRoot}/build/screenshots\${/*}`,
-  `!${buildRoot}/build/banner.jpg`,
-  `!${buildRoot}/build/*.ico`,
-  `!${buildRoot}/build/*.png`
-];
-
-const productName = process.env.NN_PRODUCT_NAME || "Notesnook";
-const appId = process.env.NN_APP_ID || "org.streetwriters.notesnook";
-const outputDir = process.env.NN_OUTPUT_DIR || "output";
-const linuxExecutableName = process.env.NN_PRODUCT_NAME
-  ? process.env.NN_PRODUCT_NAME.toLowerCase().replace(/\s+/g, "-")
-  : "notesnook";
-const year = new Date().getFullYear();
-const isBeta = pkg.version.includes("-beta");
-
-module.exports = {
-  appId: appId,
-  productName: productName,
-  copyright: `Copyright © ${year} Streetwriters (Private) Limited`,
-  artifactName: "notesnook_${os}_${arch}.${ext}",
-  generateUpdatesFilesForAllChannels: true,
-  asar: false,
-  files: [
-    "!*.chunk.js.map",
-    "!*.chunk.js.LICENSE.txt",
-    ...buildFiles,
-    "!node_modules${/*}",
-    "node_modules/better-sqlite3-multiple-ciphers/build/Release/better_sqlite3.node",
-    "node_modules/better-sqlite3-multiple-ciphers/lib",
-    "node_modules/better-sqlite3-multiple-ciphers/package.json",
-    "node_modules/file-uri-to-path",
-    "node_modules/bindings",
-    "node_modules/node-gyp-build",
-    "node_modules/sqlite-better-trigram",
-    "node_modules/sodium-native/prebuilds/${platform}-${arch}",
-    {
-      from: "node_modules/sqlite-better-trigram-linux-${arch}",
-      to: "node_modules/sqlite-better-trigram-linux-${arch}"
-    },
-    {
-      from: "node_modules/sqlite-better-trigram-darwin-${arch}",
-      to: "node_modules/sqlite-better-trigram-darwin-${arch}"
-    },
-    {
-      from: "node_modules/sqlite-better-trigram-windows-${arch}",
-      to: "node_modules/sqlite-better-trigram-windows-${arch}"
-    },
-    "node_modules/sodium-native/index.js",
-    "node_modules/sodium-native/package.json"
-  ],
-  afterPack: "./scripts/removeLocales.js",
-  mac: {
-    bundleVersion: "240",
-    minimumSystemVersion: "10.12.0",
-    target: [
-      {
-        target: "dmg",
-        arch: ["arm64", "x64"]
-      },
-      {
-        target: "zip",
-        arch: ["arm64", "x64"]
-      }
-    ],
-    category: "public.app-category.productivity",
-    darkModeSupport: true,
-    type: "distribution",
-    hardenedRuntime: true,
-    entitlements: "assets/entitlements.mac.plist",
-    entitlementsInherit: "assets/entitlements.mac.plist",
-    gatekeeperAssess: false,
-    icon: "assets/icons/app.icns",
-    notarize: true
-  },
-  dmg: {
-    contents: [
-      {
-        x: 130,
-        y: 220
-      },
-      {
-        x: 410,
-        y: 220,
-        type: "link",
-        path: "/Applications"
-      }
-    ],
-    icon: "assets/icons/app.icns",
-    title: "Install Notesnook"
-  },
-  mas: {
-    entitlements: "assets/entitlements.mas.plist",
-    entitlementsInherit: "assets/entitlements.mas.inherit.plist",
-    entitlementsLoginHelper: "assets/entitlements.mas.loginhelper.plist",
-    hardenedRuntime: true
-  },
-  win: {
-    target: [
-      {
-        target: "nsis",
-        arch: ["x64", "arm64"]
-      },
-      {
-        target: "portable",
-        arch: ["x64", "arm64"]
-      }
-    ],
-    signtoolOptions: {
-      signingHashAlgorithms: ["sha256"],
-      sign: "./scripts/sign.js"
-    },
-    icon: "assets/icons/app.ico"
-  },
-  portable: {
-    artifactName: "notesnook_${os}_${arch}_portable.${ext}"
-  },
-  nsis: {
-    oneClick: true,
-    createDesktopShortcut: "always",
-    deleteAppDataOnUninstall: true
-  },
-  linux: {
-    target: [
-      {
-        target: "AppImage",
-        arch: ["x64", "arm64"]
-      },
-      {
-        target: "snap",
-        arch: ["x64", "arm64"]
-      }
-    ],
-    category: "Office",
-    icon: "assets/icons/app.icns",
-    description: "Your private note taking space",
-    executableName: linuxExecutableName,
-    desktop: {
-      actions: [
-        {
-          id: "new-note",
-          name: "New note",
-          args: "new note"
-        },
-        {
-          id: "new-notebook",
-          name: "New notebook",
-          args: "new notebook"
-        },
-        {
-          id: "new-reminder",
-          name: "New reminder",
-          args: "new reminder"
-        }
-      ]
-    }
-  },
-  snap: {
-    autoStart: false,
-    confinement: "strict",
-    allowNativeWayland: true
-  },
-  extraResources: ["app-update.yml", "./assets/**"],
-  extraMetadata: {
-    main: path.join(buildRoot, "build", "electron.js")
-  },
-  directories: {
-    buildResources: "assets",
-    output: outputDir
-  },
-  publish: [
-    {
-      provider: "github",
-      repo: "notesnook",
-      owner: "streetwriters",
-      channel: isBeta ? "beta" : "latest"
-    }
-  ]
-};

apps/desktop/package-lock.json

@@ -1,21 +1,21 @@
 {
   "name": "@notesnook/desktop",
-  "version": "3.1.0",
+  "version": "3.0.24",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@notesnook/desktop",
-      "version": "3.1.0",
+      "version": "3.0.24",
       "hasInstallScript": true,
       "license": "GPL-3.0-or-later",
       "dependencies": {
-        "@lingui/core": "5.1.2",
+        "@lingui/core": "4.11.4",
         "@notesnook/intl": "file:../../packages/intl",
         "@trpc/client": "10.45.2",
         "@trpc/server": "10.45.2",
         "better-sqlite3-multiple-ciphers": "11.5.0",
-        "electron-trpc": "0.7.1",
+        "electron-trpc": "0.6.1",
         "electron-updater": "^6.3.4",
         "icojs": "^0.19.4",
         "sqlite-better-trigram": "0.0.2",
@@ -38,7 +38,7 @@
         "slugify": "1.6.6",
         "tree-kill": "^1.2.2",
         "undici": "^6.19.8",
-        "vitest": "^2.1.8"
+        "vitest": "2.1.8"
       },
       "optionalDependencies": {
         "dmg-license": "^1.0.11"
@@ -51,7 +51,6 @@
       "license": "GPL-3.0-or-later",
       "devDependencies": {
         "@lingui/cli": "5.1.2",
-        "@lingui/core": "5.1.2",
         "@lingui/swc-plugin": "5.0.2",
         "@types/react": "18.3.5",
         "babel-plugin-macros": "^3.1.0",
@@ -961,40 +960,30 @@
       "dev": true
     },
     "node_modules/@lingui/core": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/@lingui/core/-/core-5.1.2.tgz",
-      "integrity": "sha512-biqmMCWuBBj7ERSpgGSV91hTShnSrR/RIFUcNKjWuZYgDd3HpBdEmXKCo9NTanQYbkBUpmyw/bgwsSBex6vkDA==",
+      "version": "4.11.4",
+      "resolved": "https://registry.npmjs.org/@lingui/core/-/core-4.11.4.tgz",
+      "integrity": "sha512-W0bBIFe44s//Qs+RQ+NMfzK5vAm9oEKyDddlN94Db6rzeUT/IJo7N+T75A6Bya8v/BrtF2G/W4b77eS3sd0utw==",
+      "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.20.13",
-        "@lingui/message-utils": "^5.1.2",
+        "@lingui/message-utils": "4.11.4",
         "unraw": "^3.0.0"
       },
       "engines": {
-        "node": ">=20.0.0"
-      },
-      "peerDependencies": {
-        "@lingui/babel-plugin-lingui-macro": "5.1.2",
-        "babel-plugin-macros": "2 || 3"
-      },
-      "peerDependenciesMeta": {
-        "@lingui/babel-plugin-lingui-macro": {
-          "optional": true
-        },
-        "babel-plugin-macros": {
-          "optional": true
-        }
+        "node": ">=16.0.0"
       }
     },
     "node_modules/@lingui/message-utils": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/@lingui/message-utils/-/message-utils-5.1.2.tgz",
-      "integrity": "sha512-P/N0yBy2MuC726EaGPGiOafc/0RafHiwkvZJdFKjm1/XOMWrFZDPFXTuxguVQ3HQsRi5eUIPaboU4uRX4GepPg==",
+      "version": "4.11.4",
+      "resolved": "https://registry.npmjs.org/@lingui/message-utils/-/message-utils-4.11.4.tgz",
+      "integrity": "sha512-ZTCDhGbj5EN+P9Ajcj0Gq9uDP3HZTRW6/kT09WkiFgL4NayYLksPvgBk29sIglsS6M+Y6Iw2BrUK403SZjZKgw==",
+      "license": "MIT",
       "dependencies": {
         "@messageformat/parser": "^5.0.0",
         "js-sha256": "^0.10.1"
       },
       "engines": {
-        "node": ">=20.0.0"
+        "node": ">=16.0.0"
       }
     },
     "node_modules/@malept/cross-spawn-promise": {
@@ -1076,9 +1065,10 @@
       }
     },
     "node_modules/@messageformat/parser": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/@messageformat/parser/-/parser-5.1.1.tgz",
-      "integrity": "sha512-3p0YRGCcTUCYvBKLIxtDDyrJ0YijGIwrTRu1DT8gIviIDZru8H23+FkY6MJBzM1n9n20CiM4VeDYuBsrrwnLjg==",
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/@messageformat/parser/-/parser-5.1.0.tgz",
+      "integrity": "sha512-jKlkls3Gewgw6qMjKZ9SFfHUpdzEVdovKFtW1qRhJ3WI4FW5R/NnGDqr8SDGz+krWDO3ki94boMmQvGke1HwUQ==",
+      "license": "MIT",
       "dependencies": {
         "moo": "^0.5.1"
       }
@@ -3190,9 +3180,9 @@
       }
     },
     "node_modules/electron-trpc": {
-      "version": "0.7.1",
-      "resolved": "https://registry.npmjs.org/electron-trpc/-/electron-trpc-0.7.1.tgz",
-      "integrity": "sha512-aWjZ5pLeVhrX9A9d8O8YgR8N+q4IXXzc76CJT1PwtDijIw+y5I+c75IAAtZ4JayYLeR3ll95PNGl5RTBu2qePw==",
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/electron-trpc/-/electron-trpc-0.6.1.tgz",
+      "integrity": "sha512-Yj13UrjjjOW4+TD06YunAML2tgmtSYJMiFw6E6r1D4in/0EZ2MRwMoQc7AtMPAA6In23e+Kmq71e8h0ir+c3Jg==",
       "license": "MIT",
       "dependencies": {
         "debug": "^4.3.4"
@@ -4329,7 +4319,8 @@
     "node_modules/js-sha256": {
       "version": "0.10.1",
       "resolved": "https://registry.npmjs.org/js-sha256/-/js-sha256-0.10.1.tgz",
-      "integrity": "sha512-5obBtsz9301ULlsgggLg542s/jqtddfOpV5KJc4hajc9JV8GeY2gZHSVpYBn4nWqAUTJ9v+xwtbJ1mIBgIH5Vw=="
+      "integrity": "sha512-5obBtsz9301ULlsgggLg542s/jqtddfOpV5KJc4hajc9JV8GeY2gZHSVpYBn4nWqAUTJ9v+xwtbJ1mIBgIH5Vw==",
+      "license": "MIT"
     },
     "node_modules/js-yaml": {
       "version": "4.1.0",
@@ -4779,7 +4770,8 @@
     "node_modules/moo": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/moo/-/moo-0.5.2.tgz",
-      "integrity": "sha512-iSAJLHYKnX41mKcJKjqvnAN9sf0LMDTXDEvFv+ffuRR9a1MIuXLjMNL6EsnDHSkKLTWNqQQ5uo61P4EbU4NU+Q=="
+      "integrity": "sha512-iSAJLHYKnX41mKcJKjqvnAN9sf0LMDTXDEvFv+ffuRR9a1MIuXLjMNL6EsnDHSkKLTWNqQQ5uo61P4EbU4NU+Q==",
+      "license": "BSD-3-Clause"
     },
     "node_modules/ms": {
       "version": "2.1.3",
@@ -6658,7 +6650,6 @@
       "resolved": "https://registry.npmjs.org/vitest/-/vitest-2.1.8.tgz",
       "integrity": "sha512-1vBKTZskHw/aosXqQUlVWWlGUxSJR8YtiyZDJAFeW2kPAeX6S3Sool0mjspO+kXLuxVWlEDDowBAeqeAQefqLQ==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "@vitest/expect": "2.1.8",
         "@vitest/mocker": "2.1.8",

apps/desktop/package.json

@@ -2,7 +2,7 @@
   "name": "@notesnook/desktop",
   "productName": "Notesnook",
   "description": "Your private note taking space",
-  "version": "3.1.0",
+  "version": "3.0.24",
   "appAppleId": "1544027013",
   "private": true,
   "main": "./dist/cjs/index.js",
@@ -25,12 +25,12 @@
   "repository": "https://github.com/streetwriters/notesnook",
   "license": "GPL-3.0-or-later",
   "dependencies": {
-    "@lingui/core": "5.1.2",
+    "@lingui/core": "4.11.4",
     "@notesnook/intl": "file:../../packages/intl",
     "@trpc/client": "10.45.2",
     "@trpc/server": "10.45.2",
     "better-sqlite3-multiple-ciphers": "11.5.0",
-    "electron-trpc": "0.7.1",
+    "electron-trpc": "0.6.1",
     "electron-updater": "^6.3.4",
     "icojs": "^0.19.4",
     "sqlite-better-trigram": "0.0.2",
@@ -46,14 +46,14 @@
     "electron": "^31.7.4",
     "electron-builder": "^25.1.8",
     "esbuild": "0.21.5",
+    "vitest": "2.1.8",
     "node-abi": "^3.68.0",
     "node-gyp-build": "^4.8.2",
     "playwright": "^1.48.2",
     "prebuildify": "^6.0.1",
     "slugify": "1.6.6",
     "tree-kill": "^1.2.2",
-    "undici": "^6.19.8",
-    "vitest": "^2.1.8"
+    "undici": "^6.19.8"
   },
   "optionalDependencies": {
     "dmg-license": "^1.0.11"
@@ -63,14 +63,203 @@
     "staging": "node scripts/build.mjs --run",
     "release": "node scripts/build.mjs",
     "build": "node ../../scripts/build.mjs",
-    "bundle": "esbuild electron=./src/main.ts ./src/preload.ts --external:electron --external:fsevents --external:better-sqlite3-multiple-ciphers --external:sodium-native --bundle --outdir=./build --platform=node --tsconfig=tsconfig.json --define:MAC_APP_STORE=false --define:RELEASE=true",
+    "bundle": "esbuild electron=./src/main.ts ./src/preload.ts --external:electron --external:fsevents --external:better-sqlite3-multiple-ciphers --external:sodium-native --minify --bundle --outdir=./build --platform=node --tsconfig=tsconfig.json --define:MAC_APP_STORE=false --define:RELEASE=true",
     "bundle:mas": "esbuild electron=./src/main.ts ./src/preload.ts --minify --external:electron --external:fsevents --bundle --outdir=./build --platform=node --tsconfig=tsconfig.json --define:MAC_APP_STORE=true --define:RELEASE=true",
     "postinstall": "patch-package",
-    "test": "vitest run"
+    "test": "node --test --test-timeout 30000 --test-force-exit"
   },
   "author": {
     "name": "Streetwriters (Private) Limited",
     "email": "support@streetwriters.co",
     "url": "https://streetwriters.co"
+  },
+  "build": {
+    "appId": "org.streetwriters.notesnook",
+    "productName": "Notesnook",
+    "copyright": "Copyright © 2023 Streetwriters (Private) Limited",
+    "artifactName": "notesnook_${os}_${arch}.${ext}",
+    "generateUpdatesFilesForAllChannels": true,
+    "asar": false,
+    "files": [
+      "!*.chunk.js.map",
+      "!*.chunk.js.LICENSE.txt",
+      "build/",
+      "!build/screenshots${/*}",
+      "!build/banner.jpg",
+      "!build/*.ico",
+      "!build/*.png",
+      "!node_modules${/*}",
+      "node_modules/better-sqlite3-multiple-ciphers/build/Release/better_sqlite3.node",
+      "node_modules/better-sqlite3-multiple-ciphers/lib",
+      "node_modules/better-sqlite3-multiple-ciphers/package.json",
+      "node_modules/file-uri-to-path",
+      "node_modules/bindings",
+      "node_modules/node-gyp-build",
+      "node_modules/sqlite-better-trigram",
+      "node_modules/sodium-native/prebuilds/${platform}-${arch}",
+      {
+        "from": "node_modules/sqlite-better-trigram-linux-${arch}",
+        "to": "node_modules/sqlite-better-trigram-linux-${arch}"
+      },
+      {
+        "from": "node_modules/sqlite-better-trigram-darwin-${arch}",
+        "to": "node_modules/sqlite-better-trigram-darwin-${arch}"
+      },
+      {
+        "from": "node_modules/sqlite-better-trigram-windows-${arch}",
+        "to": "node_modules/sqlite-better-trigram-windows-${arch}"
+      },
+      "node_modules/sodium-native/index.js",
+      "node_modules/sodium-native/package.json"
+    ],
+    "afterPack": "./scripts/removeLocales.js",
+    "mac": {
+      "bundleVersion": "240",
+      "minimumSystemVersion": "10.12.0",
+      "target": [
+        {
+          "target": "dmg",
+          "arch": [
+            "arm64",
+            "x64"
+          ]
+        },
+        {
+          "target": "zip",
+          "arch": [
+            "arm64",
+            "x64"
+          ]
+        }
+      ],
+      "category": "public.app-category.productivity",
+      "darkModeSupport": true,
+      "type": "distribution",
+      "hardenedRuntime": true,
+      "entitlements": "assets/entitlements.mac.plist",
+      "entitlementsInherit": "assets/entitlements.mac.plist",
+      "gatekeeperAssess": false,
+      "icon": "assets/icons/app.icns",
+      "notarize": true
+    },
+    "dmg": {
+      "contents": [
+        {
+          "x": 130,
+          "y": 220
+        },
+        {
+          "x": 410,
+          "y": 220,
+          "type": "link",
+          "path": "/Applications"
+        }
+      ],
+      "icon": "assets/icons/app.icns",
+      "title": "Install Notesnook"
+    },
+    "mas": {
+      "entitlements": "assets/entitlements.mas.plist",
+      "entitlementsInherit": "assets/entitlements.mas.inherit.plist",
+      "entitlementsLoginHelper": "assets/entitlements.mas.loginhelper.plist",
+      "hardenedRuntime": true
+    },
+    "win": {
+      "target": [
+        {
+          "target": "nsis",
+          "arch": [
+            "x64",
+            "arm64"
+          ]
+        },
+        {
+          "target": "portable",
+          "arch": [
+            "x64",
+            "arm64"
+          ]
+        }
+      ],
+      "signtoolOptions": {
+        "signingHashAlgorithms": [
+          "sha256"
+        ],
+        "sign": "./scripts/sign.js"
+      },
+      "icon": "assets/icons/app.ico"
+    },
+    "portable": {
+      "artifactName": "notesnook_${os}_${arch}_portable.${ext}"
+    },
+    "nsis": {
+      "oneClick": true,
+      "createDesktopShortcut": "always",
+      "deleteAppDataOnUninstall": true
+    },
+    "linux": {
+      "target": [
+        {
+          "target": "AppImage",
+          "arch": [
+            "x64",
+            "arm64"
+          ]
+        },
+        {
+          "target": "snap",
+          "arch": [
+            "x64",
+            "arm64"
+          ]
+        }
+      ],
+      "category": "Office",
+      "icon": "assets/icons/app.icns",
+      "description": "Your private note taking space",
+      "executableName": "notesnook",
+      "desktop": {
+        "actions": [
+          {
+            "id": "new-note",
+            "name": "New note",
+            "args": "new note"
+          },
+          {
+            "id": "new-notebook",
+            "name": "New notebook",
+            "args": "new notebook"
+          },
+          {
+            "id": "new-reminder",
+            "name": "New reminder",
+            "args": "new reminder"
+          }
+        ]
+      }
+    },
+    "snap": {
+      "autoStart": false,
+      "confinement": "strict",
+      "allowNativeWayland": true
+    },
+    "extraResources": [
+      "app-update.yml",
+      "./assets/**"
+    ],
+    "extraMetadata": {
+      "main": "./build/electron.js"
+    },
+    "directories": {
+      "buildResources": "assets",
+      "output": "./output/"
+    },
+    "publish": [
+      {
+        "provider": "github",
+        "repo": "notesnook",
+        "owner": "streetwriters"
+      }
+    ]
   }
-}
+}

apps/desktop/scripts/build.mjs

@@ -29,12 +29,10 @@ import { patchBetterSQLite3 } from "./patch-better-sqlite3.mjs";
 const args = yargs(process.argv);
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
-const root = args.root || path.join(__dirname, "..");
-const skipTscBuild = args.skipTscBuild || false;
 
 const webAppPath = path.resolve(path.join(__dirname, "..", "..", "web"));
 
-await fs.rm(path.join(root, "build"), { force: true, recursive: true });
+await fs.rm("./build/", { force: true, recursive: true });
 
 if (args.rebuild || !existsSync(path.join(webAppPath, "build"))) {
   await exec(
@@ -46,25 +44,21 @@ if (args.rebuild || !existsSync(path.join(webAppPath, "build"))) {
 // temporary until there's support for prebuilt binaries for linux ARM
 if (os.platform() === "linux") await patchBetterSQLite3();
 
-await fs.cp(path.join(webAppPath, "build"), path.join(root, "build"), {
+await fs.cp(path.join(webAppPath, "build"), "build", {
   recursive: true,
   force: true
 });
 
 if (args.variant === "mas") {
-  await exec(`yarn run bundle:mas --outdir=${path.join(root, "build")}`);
+  await exec(`yarn run bundle:mas`);
 } else {
-  await exec(`yarn run bundle --outdir=${path.join(root, "build")}`);
+  await exec(`yarn run bundle`);
 }
 
-if (!skipTscBuild) {
-  await exec(`yarn run build`);
-}
+await exec(`yarn run build`);
 
 if (args.run) {
-  await exec(
-    `yarn electron-builder --dir --${process.arch} --config=electron-builder.config.js`
-  );
+  await exec(`yarn electron-builder --dir --${process.arch}`);
   if (process.platform === "win32") {
     await exec(`.\\output\\win-unpacked\\Notesnook.exe`);
   } else if (process.platform === "darwin") {

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

@@ -29,7 +29,7 @@ import { dirname } from "path";
 import { resolvePath } from "../utils/resolve-path";
 import { observable } from "@trpc/server/observable";
 import { AssetManager } from "../utils/asset-manager";
-import { isFlatpak, isSnap } from "../utils";
+import { isFlatpak } from "../utils";
 import { setupDesktopIntegration } from "../utils/desktop-integration";
 import { rm } from "fs/promises";
 import { disableCustomDns, enableCustomDns } from "../utils/custom-dns";
@@ -49,7 +49,6 @@ const NotificationOptions = z.object({
 
 export const osIntegrationRouter = t.router({
   isFlatpak: t.procedure.query(() => isFlatpak()),
-  isSnap: t.procedure.query(() => isSnap()),
 
   zoomFactor: t.procedure.query(() => config.zoomFactor),
   setZoomFactor: t.procedure.input(z.number()).mutation(({ input: factor }) => {

apps/desktop/src/api/updater.ts

@@ -23,7 +23,6 @@ import { CancellationToken, autoUpdater } from "electron-updater";
 import type { AppUpdaterEvents } from "electron-updater/out/AppUpdater";
 import { z } from "zod";
 import { config } from "../utils/config";
-import { app } from "electron";
 
 type UpdateInfo = { version: string };
 type Progress = { percent: number };
@@ -34,7 +33,6 @@ let downloadTimeout: NodeJS.Timeout | undefined = undefined;
 
 export const updaterRouter = t.router({
   autoUpdates: t.procedure.query(() => config.automaticUpdates),
-  releaseTrack: t.procedure.query(() => config.releaseTrack),
   install: t.procedure.query(() => autoUpdater.quitAndInstall()),
   download: t.procedure.query(async () => {
     if (cancellationToken) return;
@@ -69,13 +67,7 @@ export const updaterRouter = t.router({
     .mutation(({ input: { enabled } }) => {
       config.automaticUpdates = enabled;
     }),
-  changeReleaseTrack: t.procedure
-    .input(z.object({ track: z.string() }))
-    .mutation(({ input: { track } }) => {
-      config.releaseTrack = track;
-      app.relaunch();
-      app.exit();
-    }),
+
   onChecking: createSubscription("checking-for-update"),
   onDownloaded: createSubscription<"update-downloaded", UpdateInfo>(
     "update-downloaded"

apps/desktop/src/main.ts

@@ -85,8 +85,6 @@ async function createWindow() {
   const mainWindowState = new WindowState({});
   const mainWindow = new BrowserWindow({
     show: !cliOptions.hidden,
-    paintWhenInitiallyHidden: cliOptions.hidden,
-    skipTaskbar: cliOptions.hidden,
     x: mainWindowState.x,
     y: mainWindowState.y,
     width: mainWindowState.width,
@@ -103,10 +101,7 @@ async function createWindow() {
     ...(config.desktopSettings.nativeTitlebar
       ? {}
       : {
-          titleBarStyle:
-            process.platform === "win32" || process.platform === "darwin"
-              ? "hidden"
-              : "default",
+          titleBarStyle: process.platform === "win32" || process.platform === "darwin" ? "hidden" : "default",
           frame: process.platform === "win32" || process.platform === "darwin",
           titleBarOverlay: {
             height: 37,
@@ -147,11 +142,6 @@ async function createWindow() {
   await AssetManager.loadIcons();
   setupDesktopIntegration(config.desktopSettings);
 
-  mainWindow.webContents.session.setPermissionRequestHandler(
-    (webContents, permission, callback) => {
-      callback(permission === "geolocation" ? false : true);
-    }
-  );
   mainWindow.webContents.session.setSpellCheckerDictionaryDownloadURL(
     "http://dictionaries.notesnook.com/"
   );

apps/desktop/src/utils/autoupdater.ts

@@ -20,22 +20,19 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import { autoUpdater } from "electron-updater";
 import { config } from "./config";
 
+const CHANNEL = autoUpdater.currentVersion.raw.endsWith("-beta")
+  ? "beta"
+  : "latest";
 async function configureAutoUpdater() {
-  const releaseTrack =
-    config.releaseTrack === "stable" ? "latest" : config.releaseTrack;
   autoUpdater.setFeedURL({
     provider: "generic",
-    url: `https://notesnook.com/api/v1/releases/${process.platform}/${releaseTrack}`,
+    url: `https://notesnook.com/api/v1/releases/${process.platform}/${CHANNEL}`,
     useMultipleRangeRequest: false,
-    channel: releaseTrack
+    channel: CHANNEL
   });
 
   autoUpdater.autoDownload = config.automaticUpdates;
-  autoUpdater.allowDowngrade =
-    // only allow downgrade if the current version is a prerelease
-    // and the user has changed the release track to stable
-    config.releaseTrack === "stable" &&
-    autoUpdater.currentVersion.prerelease.length > 0;
+  autoUpdater.allowDowngrade = false;
   autoUpdater.allowPrerelease = false;
   autoUpdater.autoInstallOnAppQuit = true;
   autoUpdater.disableWebInstaller = true;

apps/desktop/src/utils/config.ts

@@ -20,7 +20,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import { nativeTheme } from "electron";
 import { JSONStorage } from "./json-storage";
 import { z } from "zod";
-import { autoUpdater } from "electron-updater";
 
 export const DesktopIntegration = z.object({
   autoStart: z.boolean().optional(),
@@ -47,9 +46,6 @@ export const config = {
   automaticUpdates: true,
   proxyRules: "",
   customDns: true,
-  releaseTrack: autoUpdater.currentVersion.raw.includes("-beta")
-    ? "beta"
-    : "stable",
 
   backgroundColor: nativeTheme.themeSource === "dark" ? "#0f0f0f" : "#ffffff",
   windowControlsIconColor:

apps/desktop/src/utils/index.ts

@@ -29,7 +29,3 @@ export function isDevelopment() {
 export function isFlatpak() {
   return existsSync("/.flatpak-info");
 }
-
-export function isSnap() {
-  return process.env.SNAP !== undefined;
-}

apps/desktop/vitest.config.ts

@@ -1,40 +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 { defineConfig } from "vitest/config";
-
-export default defineConfig({
-  test: {
-    testTimeout: process.env.CI ? 120 * 1000 : 120 * 1000,
-    sequence: {
-      concurrent: true,
-      shuffle: true
-    },
-    dir: "./__tests__/",
-    exclude: [
-      "**/node_modules/**",
-      "**/dist/**",
-      "**/cypress/**",
-      "**/.{idea,git,cache,output,temp}/**",
-      "**/{karma,rollup,webpack,vite,vitest,jest,ava,babel,nyc,cypress,tsup,build,eslint,prettier}.config.*",
-      "**/test-results/**",
-      "**/test-artifacts/**"
-    ]
-  }
-});

apps/mobile/app/app.tsx

@@ -19,30 +19,27 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import { i18n } from "@lingui/core";
 import { I18nProvider } from "@lingui/react";
 import {
-  ScopedThemeProvider,
   THEME_COMPATIBILITY_VERSION,
   useThemeEngineStore
 } from "@notesnook/theme";
 import React, { useEffect } from "react";
-import { Appearance, I18nManager, StatusBar } from "react-native";
+import { I18nManager, View } from "react-native";
 import "react-native-gesture-handler";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
 import { SafeAreaProvider } from "react-native-safe-area-context";
-import DialogProvider from "./components/dialog-provider";
+import AppLockedOverlay from "./components/app-lock-overlay";
 import { withErrorBoundry } from "./components/exception-handler";
 import GlobalSafeAreaProvider from "./components/globalsafearea";
-import { Toast } from "./components/toast";
 import { useAppEvents } from "./hooks/use-app-events";
+import { ApplicationHolder } from "./navigation";
 import { NotePreviewConfigure } from "./screens/note-preview-configure";
-import { RootNavigation } from "./navigation/navigation-stack";
 import { themeTrpcClient } from "./screens/settings/theme-selector";
 import Notifications from "./services/notifications";
 import SettingsService from "./services/settings";
 import { TipManager } from "./services/tip-manager";
-import { changeSystemBarColors, useThemeStore } from "./stores/use-theme-store";
+import { useThemeStore } from "./stores/use-theme-store";
 import { useUserStore } from "./stores/use-user-store";
-import RNBootSplash from "react-native-bootsplash";
-import AppLocked from "./components/app-lock";
+import { IntentService } from "./services/intent";
 
 I18nManager.allowRTL(false);
 I18nManager.forceRTL(false);
@@ -52,13 +49,12 @@ if (appLockEnabled || appLockMode !== "none") {
   useUserStore.getState().lockApp(true);
 }
 
-RNBootSplash.hide();
+IntentService.onLaunch();
 const App = (props: { configureMode: "note-preview" }) => {
   useAppEvents();
   //@ts-ignore
   globalThis["IS_MAIN_APP_RUNNING"] = true;
   useEffect(() => {
-    changeSystemBarColors();
     SettingsService.onFirstLaunch();
     setTimeout(async () => {
       await Notifications.get();
@@ -70,27 +66,42 @@ const App = (props: { configureMode: "note-preview" }) => {
   }, []);
 
   return (
-    <SafeAreaProvider>
-      <StatusBar translucent={true} backgroundColor="transparent" />
+    <View
+      style={{
+        height: "100%",
+        width: "100%",
+        justifyContent: "center",
+        alignItems: "center"
+      }}
+    >
+      <View
+        style={{
+          position: "absolute",
+          width: "100%",
+          height: "100%",
+          zIndex: -1
+        }}
+        pointerEvents="none"
+      >
+        <SafeAreaProvider>
+          <GlobalSafeAreaProvider />
+        </SafeAreaProvider>
+      </View>
+
       <GestureHandlerRootView
         style={{
           height: "100%",
           width: "100%"
         }}
       >
-        <GlobalSafeAreaProvider />
         {props.configureMode === "note-preview" ? (
           <NotePreviewConfigure />
         ) : (
-          <RootNavigation />
+          <ApplicationHolder />
         )}
-        <ScopedThemeProvider value="dialog">
-          <Toast />
-        </ScopedThemeProvider>
-        <DialogProvider />
-        <AppLocked />
       </GestureHandlerRootView>
-    </SafeAreaProvider>
+      <AppLockedOverlay />
+    </View>
   );
 };
 
@@ -129,27 +140,16 @@ export const withTheme = (Element: (props: any) => JSX.Element) => {
             /* empty */
           });
       }, 1000);
-
-      const listener = Appearance.addChangeListener(({ colorScheme }) => {
-        if (colorScheme && SettingsService.getProperty("useSystemTheme")) {
-          useThemeStore.getState().setColorScheme(colorScheme);
-        }
-      });
-      return () => {
-        listener.remove();
-      };
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
-    useEffect(() => {
-      const nextTheme = colorScheme === "dark" ? darkTheme : lightTheme;
-      if (JSON.stringify(nextTheme) !== JSON.stringify(currTheme)) {
-        useThemeEngineStore
-          .getState()
-          .setTheme(colorScheme === "dark" ? darkTheme : lightTheme);
-        currTheme = nextTheme;
-      }
-    }, [colorScheme, darkTheme, lightTheme]);
+    const nextTheme = colorScheme === "dark" ? darkTheme : lightTheme;
+    if (JSON.stringify(nextTheme) !== JSON.stringify(currTheme)) {
+      useThemeEngineStore
+        .getState()
+        .setTheme(colorScheme === "dark" ? darkTheme : lightTheme);
+      currTheme = nextTheme;
+    }
 
     return (
       <I18nProvider i18n={i18n}>

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

@@ -149,9 +149,7 @@ export async function downloadFile(
       });
     }
 
-    await RNFetchBlob.fs.mv(tempFilePath, originalFilePath).catch(() => {
-      /* empty */
-    });
+    await RNFetchBlob.fs.mv(tempFilePath, originalFilePath);
 
     if (!(await exists(filename))) {
       throw new Error("File size mismatch");

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

@@ -231,26 +231,6 @@ export async function deleteDCacheFiles() {
   }
 }
 
-export async function getCachePathForFile(filename: string) {
-  const path = `${cacheDir}/${filename}`;
-
-  const iosAppGroup =
-    Platform.OS === "ios"
-      ? await (RNFetchBlob.fs as any).pathForAppGroup(IOS_APPGROUPID)
-      : null;
-  const appGroupPath = `${iosAppGroup}/${filename}`;
-
-  const exists = await RNFetchBlob.fs.exists(path);
-
-  // Check if file is present in app group path.
-  let existsInAppGroup = false;
-  if (!exists && Platform.OS === "ios") {
-    existsInAppGroup = await RNFetchBlob.fs.exists(appGroupPath);
-  }
-
-  return existsInAppGroup ? appGroupPath : path;
-}
-
 export async function exists(filename: string) {
   const path = `${cacheDir}/${filename}`;
 

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

@@ -115,7 +115,7 @@ export const FileSizeResult = {
   Error: -1
 };
 
-export async function getUploadedFileSize(hash: string, retry = 0) {
+export async function getUploadedFileSize(hash: string) {
   try {
     const url = `${hosts.API_HOST}/s3?name=${hash}`;
     const token = await db.tokenManager.getAccessToken();
@@ -123,24 +123,8 @@ export async function getUploadedFileSize(hash: string, retry = 0) {
       method: "HEAD",
       headers: { Authorization: `Bearer ${token}` }
     });
-
-    if (
-      !attachmentInfo.ok ||
-      attachmentInfo.headers?.get("content-length") === null
-    ) {
-      if (retry < 3) {
-        DatabaseLogger.log(`Retrying file size check: ${hash}, ${retry}`);
-        return getUploadedFileSize(hash, retry + 1);
-      }
-      throw new Error(
-        `File size check failed: ${hash}, ${
-          attachmentInfo.status
-        }, ${attachmentInfo.headers?.get("content-length")}`
-      );
-    }
-
     const contentLength = parseInt(
-      attachmentInfo.headers?.get("content-length") as string
+      attachmentInfo.headers?.get("content-length") || "0"
     );
     return isNaN(contentLength) ? FileSizeResult.Empty : contentLength;
   } catch (e) {

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

@@ -24,7 +24,6 @@ import { useMessageStore } from "../../stores/use-message-store";
 import { useSelectionStore } from "../../stores/use-selection-store";
 import { allowedOnPlatform, renderItem } from "./functions";
 import { getContainerBorder } from "../../utils/colors";
-import { DefaultAppStyles } from "../../utils/styles";
 
 export const Announcement = ({ color }) => {
   const { colors } = useThemeColors();
@@ -37,8 +36,9 @@ export const Announcement = ({ color }) => {
       style={{
         backgroundColor: colors.primary.background,
         width: "100%",
-        paddingHorizontal: DefaultAppStyles.GAP,
-        paddingVertical: DefaultAppStyles.GAP_VERTICAL
+        paddingHorizontal: 12,
+        paddingTop: 12,
+        paddingBottom: 12
       }}
     >
       <View
@@ -54,7 +54,7 @@ export const Announcement = ({ color }) => {
         <View
           style={{
             width: "100%",
-            marginTop: DefaultAppStyles.GAP_VERTICAL
+            marginTop: 12
           }}
         >
           {announcement?.body

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

@@ -20,13 +20,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import React from "react";
 import Paragraph from "../ui/typography/paragraph";
 import { getStyle } from "./functions";
-import { DefaultAppStyles } from "../../utils/styles";
 
 export const Body = ({ text, style = {} }) => {
   return (
     <Paragraph
       style={{
-        paddingHorizontal: DefaultAppStyles.GAP,
+        paddingHorizontal: 12,
         ...getStyle(style)
       }}
     >

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

@@ -23,13 +23,12 @@ import { Linking, View } from "react-native";
 import { useThemeColors } from "@notesnook/theme";
 import { eSendEvent, presentSheet } from "../../services/event-manager";
 import { eCloseAnnouncementDialog } from "../../utils/events";
-import { AppFontSize } from "../../utils/size";
+import { SIZE } 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";
-import { DefaultAppStyles } from "../../utils/styles";
 
 export const Cta = ({ actions, style = {}, color, inline }) => {
   const { colors } = useThemeColors();
@@ -62,7 +61,7 @@ export const Cta = ({ actions, style = {}, color, inline }) => {
   return (
     <View
       style={{
-        paddingHorizontal: DefaultAppStyles.GAP,
+        paddingHorizontal: 12,
         ...getStyle(style),
         flexDirection: inline ? "row" : "column"
       }}
@@ -76,7 +75,7 @@ export const Cta = ({ actions, style = {}, color, inline }) => {
               <Button
                 key={item.title}
                 title={item.title}
-                fontSize={AppFontSize.sm}
+                fontSize={SIZE.sm}
                 type="transparent"
                 textStyle={{
                   textDecorationLine: "underline"
@@ -84,7 +83,7 @@ export const Cta = ({ actions, style = {}, color, inline }) => {
                 onPress={() => onPress(item)}
                 bold
                 style={{
-                  paddingVertical: DefaultAppStyles.GAP_VERTICAL_SMALL,
+                  height: 30,
                   alignSelf: "flex-start",
                   paddingHorizontal: 0
                 }}
@@ -96,7 +95,7 @@ export const Cta = ({ actions, style = {}, color, inline }) => {
               <Button
                 key={item.title}
                 title={item.title}
-                fontSize={AppFontSize.sm}
+                fontSize={SIZE.sm}
                 type="plain"
                 onPress={() => onPress(item)}
                 width={null}
@@ -119,7 +118,7 @@ export const Cta = ({ actions, style = {}, color, inline }) => {
               <Button
                 key={item.title}
                 title={item.title}
-                fontSize={AppFontSize.md}
+                fontSize={SIZE.md}
                 buttonType={{
                   color: color ? color : colors.primary.accent,
                   text: color
@@ -131,7 +130,7 @@ export const Cta = ({ actions, style = {}, color, inline }) => {
                 onPress={() => onPress(item)}
                 width={250}
                 style={{
-                  marginBottom: DefaultAppStyles.GAP_VERTICAL,
+                  marginBottom: 5,
                   borderRadius: 100
                 }}
               />
@@ -142,14 +141,14 @@ export const Cta = ({ actions, style = {}, color, inline }) => {
               <Button
                 key={item.title}
                 title={item.title}
-                fontSize={AppFontSize.xs}
+                fontSize={SIZE.xs}
                 type="plain"
                 onPress={() => onPress(item)}
                 width={null}
                 height={30}
                 style={{
                   minWidth: "50%",
-                  marginTop: DefaultAppStyles.GAP_VERTICAL_SMALL
+                  marginTop: 5
                 }}
                 textStyle={{
                   textDecorationLine: "underline"

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

@@ -18,7 +18,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import React from "react";
-import { AppFontSize } from "../../utils/size";
+import { SIZE } from "../../utils/size";
 import Paragraph from "../ui/typography/paragraph";
 import { getStyle } from "./functions";
 
@@ -30,7 +30,7 @@ export const Description = ({ text, style = {}, inline }) => {
         ...getStyle(style),
         textAlign: inline ? "left" : style?.textAlign
       }}
-      size={inline ? AppFontSize.sm : AppFontSize.md}
+      size={inline ? SIZE.sm : SIZE.md}
     >
       {text}
     </Paragraph>

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

@@ -28,7 +28,6 @@ import { List } from "./list";
 import { Photo } from "./photo";
 import { SubHeading } from "./subheading";
 import { Title } from "./title";
-import { DefaultAppStyles } from "../../utils/styles";
 
 export function allowedOnPlatform(platforms) {
   if (!platforms) return true;
@@ -54,7 +53,7 @@ const Features = () => {
   return (
     <View
       style={{
-        paddingHorizontal: DefaultAppStyles.GAP,
+        paddingHorizontal: 12,
         alignItems: "center",
         width: "100%"
       }}

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

@@ -22,13 +22,12 @@ import { View } from "react-native";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import Paragraph from "../ui/typography/paragraph";
 import { getStyle } from "./functions";
-import { DefaultAppStyles } from "../../utils/styles";
 
 export const List = ({ items, listType, style = {} }) => {
   return (
     <View
       style={{
-        paddingHorizontal: DefaultAppStyles.GAP,
+        paddingHorizontal: 12,
         paddingLeft: listType === "ordered" ? 25 : 25,
         ...getStyle(style)
       }}
@@ -37,7 +36,7 @@ export const List = ({ items, listType, style = {} }) => {
         <View
           key={item.text}
           style={{
-            paddingVertical: DefaultAppStyles.GAP_VERTICAL,
+            paddingVertical: 6,
             flexDirection: "row"
           }}
         >

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

@@ -18,18 +18,17 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import React from "react";
-import { AppFontSize } from "../../utils/size";
+import { SIZE } from "../../utils/size";
 import Heading from "../ui/typography/heading";
 import { getStyle } from "./functions";
-import { DefaultAppStyles } from "../../utils/styles";
 
 export const SubHeading = ({ text, style = {} }) => {
   return (
     <Heading
-      size={AppFontSize.md + 2}
+      size={SIZE.md + 2}
       style={{
-        marginHorizontal: DefaultAppStyles.GAP,
-        marginTop: DefaultAppStyles.GAP_VERTICAL,
+        marginHorizontal: 12,
+        marginTop: 12,
         ...getStyle(style)
       }}
     >

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

@@ -20,11 +20,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import React from "react";
 import { View } from "react-native";
 import { useMessageStore } from "../../stores/use-message-store";
-import { AppFontSize } from "../../utils/size";
+import { SIZE } from "../../utils/size";
 import { Button } from "../ui/button";
 import Heading from "../ui/typography/heading";
 import { getStyle } from "./functions";
-import { DefaultAppStyles } from "../../utils/styles";
 
 export const Title = ({ text, style = {}, inline }) => {
   const announcements = useMessageStore((state) => state.announcements);
@@ -37,19 +36,19 @@ export const Title = ({ text, style = {}, inline }) => {
         flexDirection: "row",
         justifyContent: "space-between",
         alignItems: "center",
-        marginBottom: inline ? DefaultAppStyles.GAP_VERTICAL_SMALL : 0
+        marginBottom: inline ? 5 : 0
       }}
     >
       <Heading
         style={{
-          marginHorizontal: DefaultAppStyles.GAP,
-          marginTop: DefaultAppStyles.GAP_VERTICAL,
+          marginHorizontal: 12,
+          marginTop: 12,
           ...getStyle(style),
           textAlign: inline ? "left" : style?.textAlign,
           flexShrink: 1
         }}
         numberOfLines={1}
-        size={inline ? AppFontSize.md : AppFontSize.xl}
+        size={inline ? SIZE.md : SIZE.xl}
       >
         {inline ? text?.toUpperCase() : text}
       </Heading>
@@ -68,7 +67,7 @@ export const Title = ({ text, style = {}, inline }) => {
           right: 0
         }}
         iconSize={24}
-        fontSize={AppFontSize.xs}
+        fontSize={SIZE.xs}
         style={{
           borderRadius: 100,
           paddingVertical: 0,
@@ -81,9 +80,9 @@ export const Title = ({ text, style = {}, inline }) => {
   ) : (
     <Heading
       style={{
-        marginHorizontal: DefaultAppStyles.GAP,
+        marginHorizontal: 12,
         ...getStyle(style),
-        marginTop: style?.marginTop || DefaultAppStyles.GAP_VERTICAL
+        marginTop: style?.marginTop || 12
       }}
     >
       {text}

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

@@ -44,6 +44,7 @@ import SettingsService from "../../services/settings";
 import { useSettingStore } from "../../stores/use-setting-store";
 import { useUserStore } from "../../stores/use-user-store";
 import { NotesnookModule } from "../../utils/notesnook-module";
+import { SIZE } from "../../utils/size";
 import { Toast } from "../toast";
 import { Button } from "../ui/button";
 import { IconButton } from "../ui/icon-button";
@@ -53,9 +54,6 @@ import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
 import { strings } from "@notesnook/intl";
-import { AppFontSize } from "../../utils/size";
-import { editorController } from "../../screens/editor/tiptap/utils";
-import { useTabStore } from "../../screens/editor/tiptap/use-tab-store";
 
 const getUser = () => {
   const user = MMKV.getString("user");
@@ -84,7 +82,7 @@ const verifyUserPassword = async (password: string) => {
   }
 };
 
-const AppLocked = () => {
+const AppLockedOverlay = () => {
   const initialLaunchBiometricRequest = useRef(true);
   const { colors } = useThemeColors();
   const user = getUser();
@@ -111,25 +109,17 @@ const AppLocked = () => {
   );
 
   const onUnlockAppRequested = useCallback(async () => {
-    editorController.current?.commands.blur(useTabStore.getState().currentTab);
-    editorController.current?.commands.blurPassInput();
-
     if (
       !biometricsAuthEnabled ||
       !(await BiometricService.isBiometryAvailable())
-    ) {
+    )
       return;
-    }
 
     biometricUnlockAwaitingUserInput.current = true;
 
     if (Platform.OS === "android") {
       const activityName = await NotesnookModule.getActivityName();
-      if (
-        activityName !== "MainActivity" &&
-        activityName !== "NotePreviewConfigureActivity"
-      )
-        return;
+      if (activityName !== "MainActivity") return;
     }
     useSettingStore.getState().setRequestBiometrics(true);
 
@@ -187,15 +177,10 @@ const AppLocked = () => {
       (prevState === "background" || initialLaunchBiometricRequest.current)
     ) {
       if (SettingsService.shouldLockAppOnEnterForeground()) {
-        if (useSettingStore.getState().appDidEnterBackgroundForAction) {
-          useSettingStore.getState().setAppDidEnterBackgroundForAction(false);
-          return;
-        }
-
         DatabaseLogger.info("Locking app on entering foreground");
-
         useUserStore.getState().lockApp(true);
       }
+
       if (
         !(
           biometricUnlockAwaitingUserInput.current ||
@@ -294,16 +279,6 @@ const AppLocked = () => {
                 keyboardType={
                   appLockHasPasswordSecurity ? keyboardType : "default"
                 }
-                onLayout={async () => {
-                  if (
-                    !biometricsAuthEnabled ||
-                    !(await BiometricService.isBiometryAvailable())
-                  ) {
-                    setTimeout(() => {
-                      passwordInputRef.current?.focus();
-                    }, 32);
-                  }
-                }}
                 placeholder={
                   appLockHasPasswordSecurity
                     ? keyboardType === "numeric"
@@ -336,7 +311,7 @@ const AppLocked = () => {
                     borderRadius: 150,
                     marginBottom: 10
                   }}
-                  fontSize={AppFontSize.md}
+                  fontSize={SIZE.md}
                 />
               </>
             ) : null}
@@ -357,4 +332,4 @@ const AppLocked = () => {
   ) : null;
 };
 
-export default AppLocked;
+export default AppLockedOverlay;

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

@@ -45,7 +45,7 @@ import {
   eDBItemUpdate,
   eOnLoadNote
 } from "../../utils/events";
-import { AppFontSize } from "../../utils/size";
+import { SIZE } from "../../utils/size";
 import { sleep } from "../../utils/time";
 import { Dialog } from "../dialog";
 import { presentDialog } from "../dialog/functions";
@@ -58,7 +58,6 @@ import { Pressable } from "../ui/pressable";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 import { strings } from "@notesnook/intl";
-import { DefaultAppStyles } from "../../utils/styles";
 
 const Actions = ({
   attachment,
@@ -183,17 +182,18 @@ const Actions = ({
         relations
           .map((relation) => relation.fromId)
           .forEach(async (id) => {
-            useTabStore.getState().forEachNoteTab(id, async (tab) => {
-              const isFocused = useTabStore.getState().currentTab === tab.id;
+            const tab = useTabStore.getState().getTabForNote(id);
+            if (tab !== undefined) {
+              const isFocused = useTabStore.getState().currentTab === tab;
               if (isFocused) {
                 eSendEvent(eOnLoadNote, {
                   item: await db.notes.note(id),
                   forced: true
                 });
               } else {
-                editorController.current.commands.setLoading(true, tab.id);
+                editorController.current.commands.setLoading(true, tab);
               }
-            });
+            }
           });
         close?.();
       },
@@ -227,15 +227,14 @@ const Actions = ({
         style={{
           borderBottomWidth: 1,
           borderBottomColor: colors.primary.border,
-          marginBottom:
-            notes && notes.length > 0 ? 0 : DefaultAppStyles.GAP_VERTICAL
+          marginBottom: notes && notes.length > 0 ? 0 : 12
         }}
       >
         <Heading
           style={{
-            paddingHorizontal: DefaultAppStyles.GAP
+            paddingHorizontal: 12
           }}
-          size={AppFontSize.lg}
+          size={SIZE.lg}
         >
           {filename}
         </Heading>
@@ -243,21 +242,21 @@ const Actions = ({
         <View
           style={{
             flexDirection: "row",
-            marginBottom: DefaultAppStyles.GAP_VERTICAL,
-            paddingHorizontal: DefaultAppStyles.GAP,
-            marginTop: DefaultAppStyles.GAP_VERTICAL_SMALL,
+            marginBottom: 10,
+            paddingHorizontal: 12,
+            marginTop: 6,
             gap: 10
           }}
         >
-          <Paragraph size={AppFontSize.xs} color={colors.secondary.paragraph}>
+          <Paragraph size={SIZE.xs} color={colors.secondary.paragraph}>
             {attachment.mimeType}
           </Paragraph>
-          <Paragraph size={AppFontSize.xs} color={colors.secondary.paragraph}>
+          <Paragraph size={SIZE.xs} color={colors.secondary.paragraph}>
             {formatBytes(attachment.size)}
           </Paragraph>
 
           {notes.length ? (
-            <Paragraph size={AppFontSize.xs} color={colors.secondary.paragraph}>
+            <Paragraph size={SIZE.xs} color={colors.secondary.paragraph}>
               {strings.notes(notes.length)}
             </Paragraph>
           ) : null}
@@ -270,7 +269,7 @@ const Actions = ({
                 context: "local"
               });
             }}
-            size={AppFontSize.xs}
+            size={SIZE.xs}
             color={colors.secondary.paragraph}
           >
             {attachment.hash}
@@ -285,16 +284,16 @@ const Actions = ({
           style={{
             borderBottomWidth: 1,
             borderBottomColor: colors.primary.border,
-            marginBottom: DefaultAppStyles.GAP_VERTICAL,
-            paddingVertical: DefaultAppStyles.GAP_VERTICAL
+            marginBottom: 12,
+            paddingVertical: 12
           }}
         >
           <>
             <Heading
               style={{
-                paddingHorizontal: DefaultAppStyles.GAP
+                paddingHorizontal: 12
               }}
-              size={AppFontSize.sm}
+              size={SIZE.sm}
             >
               {strings.listOf()} {strings.dataTypesPlural.note()}:
             </Heading>
@@ -309,14 +308,14 @@ const Actions = ({
                   openNote(item, (item as any).type === "trash");
                 }}
                 style={{
-                  paddingVertical: DefaultAppStyles.GAP_VERTICAL,
+                  paddingVertical: 12,
                   alignItems: "flex-start",
 
-                  paddingHorizontal: DefaultAppStyles.GAP
+                  paddingHorizontal: 12
                 }}
                 key={item.id}
               >
-                <Paragraph size={AppFontSize.xs}>{item.title}</Paragraph>
+                <Paragraph size={SIZE.xs}>{item.title}</Paragraph>
               </Pressable>
             ))}
           </>
@@ -337,7 +336,7 @@ const Actions = ({
           icon={item.icon}
           loading={loading?.name === item.name}
           type="plain"
-          fontSize={AppFontSize.sm}
+          fontSize={SIZE.sm}
           style={{
             borderRadius: 0,
             justifyContent: "flex-start",
@@ -349,7 +348,7 @@ const Actions = ({
 
       <View
         style={{
-          paddingHorizontal: DefaultAppStyles.GAP
+          paddingHorizontal: 12
         }}
       >
         {failed ? (

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

@@ -25,14 +25,13 @@ import { TouchableOpacity, View } from "react-native";
 import { db } from "../../common/database";
 import { useAttachmentProgress } from "../../hooks/use-attachment-progress";
 import { useDBItem } from "../../hooks/use-db-item";
-import { defaultBorderRadius, AppFontSize } from "../../utils/size";
+import { SIZE } from "../../utils/size";
 import { IconButton } from "../ui/icon-button";
 import { ProgressCircleComponent } from "../ui/svg/lazy";
 import Paragraph from "../ui/typography/paragraph";
 import Actions from "./actions";
 import { strings } from "@notesnook/intl";
 import { Pressable } from "../ui/pressable";
-import { DefaultAppStyles } from "../../utils/styles";
 
 function getFileExtension(filename: string) {
   const ext = /^.+\.([^.]+)$/.exec(filename);
@@ -77,8 +76,8 @@ export const AttachmentItem = ({
         flexDirection: "row",
         marginVertical: 5,
         justifyContent: "space-between",
-        padding: DefaultAppStyles.GAP,
-        paddingVertical: DefaultAppStyles.GAP_VERTICAL,
+        padding: 12,
+        paddingVertical: 6,
         minHeight: 45
       }}
     >
@@ -102,7 +101,7 @@ export const AttachmentItem = ({
                 paddingHorizontal: 2,
                 width: 30,
                 height: 30,
-                borderRadius: defaultBorderRadius
+                borderRadius: 5
               }}
             >
               <Paragraph
@@ -125,7 +124,7 @@ export const AttachmentItem = ({
               }}
             >
               <Paragraph
-                size={AppFontSize.sm}
+                size={SIZE.sm}
                 style={{
                   flexWrap: "wrap"
                 }}
@@ -137,10 +136,7 @@ export const AttachmentItem = ({
               </Paragraph>
 
               {!hideWhenNotDownloading ? (
-                <Paragraph
-                  color={colors.secondary.paragraph}
-                  size={AppFontSize.xxs}
-                >
+                <Paragraph color={colors.secondary.paragraph} size={SIZE.xxs}>
                   {strings.fileSize()}: {formatBytes(attachment.size)}
                 </Paragraph>
               ) : null}
@@ -163,7 +159,7 @@ export const AttachmentItem = ({
               }}
             >
               <ProgressCircleComponent
-                size={AppFontSize.xxl}
+                size={SIZE.xxl}
                 progress={
                   currentProgress?.value ? currentProgress?.value / 100 : 0
                 }

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

@@ -38,7 +38,7 @@ import { downloadAttachments } from "../../common/filesystem/download-attachment
 import { AttachmentGroupProgress } from "../../screens/settings/attachment-group-progress";
 import { presentSheet, ToastManager } from "../../services/event-manager";
 import { useAttachmentStore } from "../../stores/use-attachment-store";
-import { AppFontSize } from "../../utils/size";
+import { SIZE } from "../../utils/size";
 import { Dialog } from "../dialog";
 import { presentDialog } from "../dialog/functions";
 import { Header } from "../header";
@@ -50,7 +50,6 @@ import Seperator from "../ui/seperator";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 import { AttachmentItem } from "./attachment-item";
-import { DefaultAppStyles } from "../../utils/styles";
 
 const DEFAULT_SORTING: SortOptions = {
   sortBy: "dateEdited",
@@ -326,31 +325,30 @@ export const AttachmentDialog = ({
           title={strings.manageAttachments()}
           renderedInRoute="SettingsGroup"
           canGoBack
-          // TODO: Add headerRightButtons
-          // headerRightButtons={[
-          //   {
-          //     onPress() {
-          //       onCheck();
-          //     },
-          //     title: strings.recheckAll()
-          //   },
-          //   {
-          //     onPress() {
-          //       if (!attachments) return;
-          //       presentDialog({
-          //         title: strings.doActions.download.attachment(
-          //           attachments.placeholders.length
-          //         ),
-          //         positiveText: strings.network.download(),
-          //         positivePress: async () => {
-          //           downloadAttachments(await attachments.ids());
-          //         },
-          //         negativeText: strings.cancel()
-          //       });
-          //     },
-          //     title: strings.downloadAllAttachments()
-          //   }
-          // ]}
+          headerRightButtons={[
+            {
+              onPress() {
+                onCheck();
+              },
+              title: strings.recheckAll()
+            },
+            {
+              onPress() {
+                if (!attachments) return;
+                presentDialog({
+                  title: strings.doActions.download.attachment(
+                    attachments.placeholders.length
+                  ),
+                  positiveText: strings.network.download(),
+                  positivePress: async () => {
+                    downloadAttachments(await attachments.ids());
+                  },
+                  negativeText: strings.cancel()
+                });
+              },
+              title: strings.downloadAllAttachments()
+            }
+          ]}
         />
       ) : (
         <View
@@ -358,7 +356,7 @@ export const AttachmentDialog = ({
             flexDirection: "row",
             justifyContent: "space-between",
             alignItems: "center",
-            paddingHorizontal: DefaultAppStyles.GAP
+            paddingHorizontal: 12
           }}
         >
           <Heading>{strings.dataTypesPluralCamelCase.attachment()}</Heading>
@@ -371,15 +369,21 @@ export const AttachmentDialog = ({
             <IconButton
               name="check-all"
               style={{
+                height: 40,
+                width: 40,
                 marginRight: 10
               }}
               color={colors.primary.paragraph}
-              size={AppFontSize.lg}
+              size={SIZE.lg}
               onPress={onCheck}
             />
 
             <IconButton
               name="download"
+              style={{
+                height: 40,
+                width: 40
+              }}
               color={colors.primary.paragraph}
               onPress={() => {
                 if (!attachments) return;
@@ -394,7 +398,7 @@ export const AttachmentDialog = ({
                   negativeText: strings.cancel()
                 });
               }}
-              size={AppFontSize.lg}
+              size={SIZE.lg}
             />
           </View>
         </View>
@@ -404,7 +408,7 @@ export const AttachmentDialog = ({
         style={{
           width: "100%",
           alignSelf: "center",
-          paddingHorizontal: DefaultAppStyles.GAP,
+          paddingHorizontal: 12,
           height: "100%"
         }}
       >
@@ -424,7 +428,7 @@ export const AttachmentDialog = ({
               alignItems: "center",
               width: "100%",
               borderRadius: 10,
-              padding: DefaultAppStyles.GAP_SMALL,
+              padding: 10,
               borderWidth: 1,
               borderColor: colors.primary.border,
               gap: 12,
@@ -469,7 +473,7 @@ export const AttachmentDialog = ({
             <IconButton
               type={rechecker.isWorking ? "errorShade" : "plain"}
               name={rechecker.isWorking ? "close" : "check"}
-              size={AppFontSize.lg}
+              size={SIZE.lg}
               color={
                 rechecker.isWorking ? colors.error.icon : colors.primary.accent
               }
@@ -490,7 +494,7 @@ export const AttachmentDialog = ({
               backgroundColor: colors.primary.background,
               flexWrap: "wrap",
               flexDirection: "row",
-              paddingVertical: DefaultAppStyles.GAP_VERTICAL
+              paddingVertical: 12
             }}
             contentContainerStyle={{
               alignItems: "center"
@@ -507,10 +511,10 @@ export const AttachmentDialog = ({
                   }
                   key={item.title}
                   title={item.title}
-                  fontSize={AppFontSize.sm}
+                  fontSize={SIZE.sm}
                   style={{
                     borderRadius: 100,
-                    paddingHorizontal: DefaultAppStyles.GAP,
+                    paddingHorizontal: 12,
                     height: 40,
                     minWidth: 80
                   }}

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

@@ -37,7 +37,6 @@ import { hideAuth, initialAuthMode } from "./common";
 import { Login } from "./login";
 import { Signup } from "./signup";
 import { strings } from "@notesnook/intl";
-import { DefaultAppStyles } from "../../utils/styles";
 
 export const AuthMode = {
   login: 0,
@@ -134,7 +133,7 @@ const AuthModal = () => {
           style={{
             flexDirection: "row",
             alignItems: "center",
-            paddingHorizontal: DefaultAppStyles.GAP,
+            paddingHorizontal: 12,
             width: "100%",
             height: 50,
             justifyContent:
@@ -168,7 +167,7 @@ const AuthModal = () => {
                 marginTop: 2
               }}
               style={{
-                paddingHorizontal: DefaultAppStyles.GAP_SMALL
+                paddingHorizontal: 6
               }}
             />
           )}

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

@@ -36,7 +36,6 @@ import { Dialog } from "../dialog";
 import BackupService from "../../services/backup";
 import { sleep } from "../../utils/time";
 import { strings } from "@notesnook/intl";
-import { DefaultAppStyles } from "../../utils/styles";
 
 export const ChangePassword = () => {
   const passwordInputRef = useRef();
@@ -104,7 +103,7 @@ export const ChangePassword = () => {
     <View
       style={{
         width: "100%",
-        padding: DefaultAppStyles.GAP
+        padding: 12
       }}
     >
       <Dialog context="change-password-dialog" />
@@ -149,7 +148,7 @@ export const ChangePassword = () => {
 
       <Button
         style={{
-          marginTop: DefaultAppStyles.GAP_VERTICAL,
+          marginTop: 10,
           width: "100%"
         }}
         loading={loading}

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

@@ -20,20 +20,23 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import { createRef } from "react";
 import { eSendEvent } from "../../services/event-manager";
 import { eCloseLoginDialog } from "../../utils/events";
-import Navigation from "../../services/navigation";
-export const AuthMode = {
-  login: 0,
-  signup: 1,
-  welcomeSignup: 2,
-  trialSignup: 3
-};
 
 export const initialAuthMode = createRef(0);
 export function hideAuth() {
   eSendEvent(eCloseLoginDialog);
-  if (initialAuthMode.current === AuthMode.welcomeSignup) {
-    Navigation.replace("FluidPanelsView");
-  } else {
-    Navigation.goBack();
-  }
+
+  // if (initialAuthMode.current === 2) {
+  //   Navigation.replace(
+  //     {
+  //       name: 'Notes'
+  //     },
+  //     {
+  //       menu: true
+  //     }
+  //   );
+  // } else {
+  //   Navigation.goBack();
+  // }
+
+  // tabBarRef.current?.unlock();
 }

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

@@ -33,7 +33,6 @@ import Seperator from "../ui/seperator";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 import { strings } from "@notesnook/intl";
-import { DefaultAppStyles } from "../../utils/styles";
 
 export const ForgotPassword = () => {
   const { colors } = useThemeColors("sheet");
@@ -108,7 +107,7 @@ export const ForgotPassword = () => {
         {sent ? (
           <View
             style={{
-              padding: DefaultAppStyles.GAP,
+              padding: 12,
               justifyContent: "center",
               alignItems: "center",
               paddingBottom: 50
@@ -139,7 +138,7 @@ export const ForgotPassword = () => {
               backgroundColor: colors.primary.background,
               zIndex: 10,
               width: "100%",
-              padding: DefaultAppStyles.GAP
+              padding: 12
             }}
           >
             <DialogHeader title={strings.accountRecovery()} />
@@ -165,7 +164,7 @@ export const ForgotPassword = () => {
 
             <Button
               style={{
-                marginTop: DefaultAppStyles.GAP_VERTICAL,
+                marginTop: 10,
                 width: "100%"
               }}
               loading={loading}

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

@@ -17,98 +17,35 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { 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 { 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 { 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";
+
+export const AuthMode = {
+  login: 0,
+  signup: 1,
+  welcomeSignup: 2,
+  trialSignup: 3
+};
 
 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, {});
+  useNavigationFocus(navigation, {
+    onFocus: () => {
+      //tabBarRef?.current.lock();
+      initialAuthMode.current = route?.params.mode || AuthMode.login;
+    }
+  });
 
   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 ? (
         <Signup
           changeMode={(mode) => setCurrentAuthMode(mode)}

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

@@ -17,7 +17,6 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { strings } from "@notesnook/intl";
 import { useThemeColors } from "@notesnook/theme";
 import React, { useEffect, useState } from "react";
 import { TouchableOpacity, View, useWindowDimensions } from "react-native";
@@ -25,9 +24,10 @@ import { SheetManager } from "react-native-actions-sheet";
 import { DDS } from "../../services/device-detection";
 import { eSendEvent } from "../../services/event-manager";
 import Sync from "../../services/sync";
+import { useSettingStore } from "../../stores/use-setting-store";
 import { useUserStore } from "../../stores/use-user-store";
 import { eUserLoggedIn } from "../../utils/events";
-import { AppFontSize } from "../../utils/size";
+import { SIZE } from "../../utils/size";
 import { sleep } from "../../utils/time";
 import SheetProvider from "../sheet-provider";
 import { Progress } from "../sheets/progress";
@@ -38,7 +38,7 @@ import Paragraph from "../ui/typography/paragraph";
 import { hideAuth } from "./common";
 import { ForgotPassword } from "./forgot-password";
 import { useLogin } from "./use-login";
-import { DefaultAppStyles } from "../../utils/styles";
+import { strings } from "@notesnook/intl";
 
 const LoginSteps = {
   emailAuth: 1,
@@ -71,8 +71,8 @@ export const Login = ({ changeMode }) => {
       }
     }, 5000);
   });
+  const deviceMode = useSettingStore((state) => state.deviceMode);
   const { width, height } = useWindowDimensions();
-  const isTablet = width > 600;
   useEffect(() => {
     async () => {
       setStep(LoginSteps.emailAuth);
@@ -96,24 +96,23 @@ export const Login = ({ changeMode }) => {
           backgroundColor: colors.primary.background,
           zIndex: 10,
           width: "100%",
-          height: "100%",
           alignSelf: "center"
         }}
       >
         <View
           style={{
             justifyContent: "flex-end",
-            paddingHorizontal: DefaultAppStyles.GAP,
+            paddingHorizontal: 20,
             backgroundColor: colors.secondary.background,
             borderBottomWidth: 0.8,
-            marginBottom: DefaultAppStyles.GAP_VERTICAL,
+            marginBottom: 12,
             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%",
+            alignSelf: deviceMode !== "mobile" ? "center" : undefined,
+            borderWidth: deviceMode !== "mobile" ? 1 : null,
+            borderColor: deviceMode !== "mobile" ? colors.primary.border : null,
+            borderRadius: deviceMode !== "mobile" ? 20 : null,
+            marginTop: deviceMode !== "mobile" ? 50 : null,
+            width: deviceMode === "mobile" ? null : "50%",
             minHeight: height * 0.4
           }}
         >
@@ -144,10 +143,10 @@ export const Login = ({ changeMode }) => {
           <Heading
             style={{
               marginBottom: 25,
-              marginTop: DefaultAppStyles.GAP_VERTICAL
+              marginTop: 10
             }}
             extraBold
-            size={AppFontSize.xxl}
+            size={SIZE.xxl}
           >
             {strings.loginToYourAccount()}
           </Heading>
@@ -164,7 +163,7 @@ export const Login = ({ changeMode }) => {
               : "99.9%",
             backgroundColor: colors.primary.background,
             alignSelf: "center",
-            paddingHorizontal: DefaultAppStyles.GAP
+            paddingHorizontal: 20
           }}
         >
           <Input
@@ -217,7 +216,7 @@ export const Login = ({ changeMode }) => {
                 title={strings.forgotPassword()}
                 style={{
                   alignSelf: "flex-end",
-                  paddingVertical: DefaultAppStyles.GAP_VERTICAL_SMALL,
+                  height: 30,
                   paddingHorizontal: 0
                 }}
                 onPress={() => {
@@ -227,7 +226,7 @@ export const Login = ({ changeMode }) => {
                 textStyle={{
                   textDecorationLine: "underline"
                 }}
-                fontSize={AppFontSize.xs}
+                fontSize={SIZE.xs}
                 type="plain"
               />
             </>
@@ -245,8 +244,11 @@ export const Login = ({ changeMode }) => {
                 login();
               }}
               style={{
-                width: 250
+                width: 250,
+                borderRadius: 100
               }}
+              height={50}
+              fontSize={SIZE.md}
               type="accent"
               title={!loading ? strings.continue() : null}
             />
@@ -256,16 +258,19 @@ export const Login = ({ changeMode }) => {
                 title={strings.cancelLogin()}
                 style={{
                   alignSelf: "center",
-                  marginTop: DefaultAppStyles.GAP_VERTICAL,
-                  width: 250
+                  height: 30,
+                  marginTop: 10
                 }}
                 onPress={() => {
                   if (loading) return;
                   setStep(LoginSteps.emailAuth);
                   setLoading(false);
                 }}
-                fontSize={AppFontSize.xs}
-                type="secondaryAccented"
+                textStyle={{
+                  textDecorationLine: "underline"
+                }}
+                fontSize={SIZE.xs}
+                type="errorShade"
               />
             )}
 
@@ -278,17 +283,17 @@ export const Login = ({ changeMode }) => {
                 activeOpacity={0.8}
                 style={{
                   alignSelf: "center",
-                  marginTop: DefaultAppStyles.GAP_VERTICAL,
-                  paddingVertical: DefaultAppStyles.GAP_VERTICAL
+                  marginTop: 12,
+                  paddingVertical: 12
                 }}
               >
                 <Paragraph
-                  size={AppFontSize.xs}
+                  size={SIZE.xs + 1}
                   color={colors.secondary.paragraph}
                 >
                   {strings.dontHaveAccount()}{" "}
                   <Paragraph
-                    size={AppFontSize.xs}
+                    size={SIZE.xs + 1}
                     style={{ color: colors.primary.accent }}
                   >
                     {strings.signUp()}

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

@@ -34,7 +34,7 @@ import Sync from "../../services/sync";
 import { clearAllStores } from "../../stores";
 import { useUserStore } from "../../stores/use-user-store";
 import { eLoginSessionExpired, eUserLoggedIn } from "../../utils/events";
-import { AppFontSize } from "../../utils/size";
+import { SIZE } from "../../utils/size";
 import { sleep } from "../../utils/time";
 import { Dialog } from "../dialog";
 import BaseDialog from "../dialog/base-dialog";
@@ -48,8 +48,18 @@ import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 import { LoginSteps, useLogin } from "./use-login";
 import { strings } from "@notesnook/intl";
-import { getObfuscatedEmail } from "../../utils/functions";
-import { DefaultAppStyles } from "../../utils/styles";
+
+function getObfuscatedEmail(email) {
+  if (!email) return "";
+  const [username, provider] = email.split("@");
+  if (username.length === 1) return `****@${provider}`;
+  return email.replace(/(.{1})(.*)(?=@)/, function (gp1, gp2, gp3) {
+    for (let i = 0; i < gp3.length; i++) {
+      gp2 += "*";
+    }
+    return gp2;
+  });
+}
 
 export const SessionExpired = () => {
   const { colors } = useThemeColors();
@@ -158,7 +168,7 @@ export const SessionExpired = () => {
         <View
           style={{
             width: focused ? "100%" : "99.9%",
-            padding: DefaultAppStyles.GAP,
+            padding: 12,
             justifyContent: "center",
             flex: 1,
             backgroundColor: colors.primary.background
@@ -183,7 +193,7 @@ export const SessionExpired = () => {
               color={colors.error.icon}
               size={50}
             />
-            <Heading size={AppFontSize.xxxl} color={colors.primary.heading}>
+            <Heading size={SIZE.xxxl} color={colors.primary.heading}>
               {strings.sessionExpired()}
             </Heading>
             <Paragraph
@@ -214,7 +224,7 @@ export const SessionExpired = () => {
 
           <Button
             style={{
-              marginTop: DefaultAppStyles.GAP_VERTICAL,
+              marginTop: 10,
               width: 250,
               borderRadius: 100
             }}
@@ -226,7 +236,7 @@ export const SessionExpired = () => {
 
           <Button
             style={{
-              marginTop: DefaultAppStyles.GAP_VERTICAL,
+              marginTop: 10,
               width: "100%"
             }}
             onPress={() => {

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

@@ -17,8 +17,6 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { strings } from "@notesnook/intl";
-import { useThemeColors } from "@notesnook/theme";
 import React, { useRef, useState } from "react";
 import { TouchableOpacity, View, useWindowDimensions } from "react-native";
 import { db } from "../../common/database";
@@ -26,17 +24,19 @@ 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 { useThemeColors } from "@notesnook/theme";
 import { useUserStore } from "../../stores/use-user-store";
 import { openLinkInBrowser } from "../../utils/functions";
-import { AppFontSize } from "../../utils/size";
+import { SIZE } from "../../utils/size";
 import { sleep } from "../../utils/time";
 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 { useSettingStore } from "../../stores/use-setting-store";
+import SettingsService from "../../services/settings";
+import { strings } from "@notesnook/intl";
 
 export const Signup = ({ changeMode, trial }) => {
   const { colors } = useThemeColors();
@@ -50,8 +50,8 @@ export const Signup = ({ changeMode, trial }) => {
   const [loading, setLoading] = useState(false);
   const setUser = useUserStore((state) => state.setUser);
   const setLastSynced = useUserStore((state) => state.setLastSynced);
+  const deviceMode = useSettingStore((state) => state.deviceMode);
   const { width, height } = useWindowDimensions();
-  const isTablet = width > 600;
   const validateInfo = () => {
     if (!password.current || !email.current || !confirmPassword.current) {
       ToastManager.show({
@@ -105,24 +105,23 @@ export const Signup = ({ changeMode, trial }) => {
           backgroundColor: colors.primary.background,
           zIndex: 10,
           width: "100%",
-          height: "100%",
           alignSelf: "center"
         }}
       >
         <View
           style={{
             justifyContent: "flex-end",
-            paddingHorizontal: DefaultAppStyles.GAP,
+            paddingHorizontal: 20,
             backgroundColor: colors.secondary.background,
+            marginBottom: 20,
             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%",
+            alignSelf: deviceMode !== "mobile" ? "center" : undefined,
+            borderWidth: deviceMode !== "mobile" ? 1 : null,
+            borderColor: deviceMode !== "mobile" ? colors.primary.border : null,
+            borderRadius: deviceMode !== "mobile" ? 20 : null,
+            marginTop: deviceMode !== "mobile" ? 50 : null,
+            width: deviceMode === "mobile" ? null : "50%",
             minHeight: height * 0.4
           }}
         >
@@ -154,9 +153,9 @@ export const Signup = ({ changeMode, trial }) => {
             extraBold
             style={{
               marginBottom: 25,
-              marginTop: DefaultAppStyles.GAP_VERTICAL
+              marginTop: 10
             }}
-            size={AppFontSize.xxl}
+            size={SIZE.xxl}
           >
             {strings.createYourAccount()}
           </Heading>
@@ -165,7 +164,7 @@ export const Signup = ({ changeMode, trial }) => {
         <View
           style={{
             width: DDS.isTab ? "50%" : "100%",
-            paddingHorizontal: DefaultAppStyles.GAP,
+            paddingHorizontal: 20,
             backgroundColor: colors.primary.background,
             alignSelf: "center"
           }}
@@ -234,12 +233,12 @@ export const Signup = ({ changeMode, trial }) => {
             style={{
               marginBottom: 25
             }}
-            size={AppFontSize.xxs}
+            size={SIZE.xs}
             color={colors.secondary.paragraph}
           >
             {strings.signupAgreement[0]()}
             <Paragraph
-              size={AppFontSize.xxs}
+              size={SIZE.xs}
               onPress={() => {
                 openLinkInBrowser("https://notesnook.com/tos", colors);
               }}
@@ -248,12 +247,11 @@ export const Signup = ({ changeMode, trial }) => {
               }}
               color={colors.primary.accent}
             >
-              {" "}
               {strings.signupAgreement[1]()}
-            </Paragraph>{" "}
+            </Paragraph>
             {strings.signupAgreement[2]()}
             <Paragraph
-              size={AppFontSize.xxs}
+              size={SIZE.xs}
               onPress={() => {
                 openLinkInBrowser("https://notesnook.com/privacy", colors);
               }}
@@ -262,9 +260,8 @@ export const Signup = ({ changeMode, trial }) => {
               }}
               color={colors.primary.accent}
             >
-              {" "}
               {strings.signupAgreement[3]()}
-            </Paragraph>{" "}
+            </Paragraph>
             {strings.signupAgreement[4]()}
           </Paragraph>
 
@@ -273,8 +270,11 @@ export const Signup = ({ changeMode, trial }) => {
             type="accent"
             loading={loading}
             onPress={signup}
+            fontSize={SIZE.md}
             style={{
-              width: 250
+              marginRight: 12,
+              width: 250,
+              borderRadius: 100
             }}
           />
 
@@ -286,14 +286,14 @@ export const Signup = ({ changeMode, trial }) => {
             activeOpacity={0.8}
             style={{
               alignSelf: "center",
-              marginTop: DefaultAppStyles.GAP_VERTICAL,
-              paddingVertical: DefaultAppStyles.GAP_VERTICAL
+              marginTop: 12,
+              paddingVertical: 12
             }}
           >
-            <Paragraph size={AppFontSize.xs} color={colors.secondary.paragraph}>
+            <Paragraph size={SIZE.xs + 1} color={colors.secondary.paragraph}>
               {strings.alreadyHaveAccount()}{" "}
               <Paragraph
-                size={AppFontSize.xs}
+                size={SIZE.xs + 1}
                 style={{ color: colors.primary.accent }}
               >
                 {strings.login()}

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

@@ -30,14 +30,13 @@ import {
   ToastManager
 } from "../../services/event-manager";
 import { eCloseSheet } from "../../utils/events";
-import { AppFontSize } from "../../utils/size";
+import { SIZE } from "../../utils/size";
 import { Button } from "../ui/button";
 import { IconButton } from "../ui/icon-button";
 import Input from "../ui/input";
 import { Pressable } from "../ui/pressable";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
-import { DefaultAppStyles } from "../../utils/styles";
 
 const TwoFactorVerification = ({ onMfaLogin, mfaInfo, onCancel }) => {
   const { colors } = useThemeColors();
@@ -205,9 +204,9 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo, onCancel }) => {
               }}
               onSubmitEditing={onNext}
               caretHidden
-              height={60}
               inputStyle={{
-                fontSize: AppFontSize.lg,
+                fontSize: SIZE.lg,
+                height: 60,
                 textAlign: "center",
                 letterSpacing: 10,
                 width: 250
@@ -217,13 +216,11 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo, onCancel }) => {
               }
               enablesReturnKeyAutomatically
               containerStyle={{
+                height: 60,
                 borderWidth: 0,
                 width: undefined,
                 minWidth: "50%"
               }}
-              wrapperStyle={{
-                height: 60
-              }}
             />
 
             <Button
@@ -232,12 +229,9 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo, onCancel }) => {
               width={250}
               loading={loading}
               onPress={onNext}
-            />
-            <Button
-              title={strings.cancel()}
-              type="secondaryAccented"
-              onPress={onCancel}
-              width={250}
+              style={{
+                borderRadius: 100
+              }}
             />
 
             <Button
@@ -248,6 +242,13 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo, onCancel }) => {
               onPress={onRequestSecondaryMethod}
               height={30}
             />
+
+            <Button
+              title={strings.cancel()}
+              type="plain"
+              onPress={onCancel}
+              height={30}
+            />
           </>
         ) : (
           <>
@@ -261,8 +262,8 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo, onCancel }) => {
                   });
                 }}
                 style={{
-                  paddingHorizontal: DefaultAppStyles.GAP,
-                  paddingVertical: DefaultAppStyles.GAP_VERTICAL,
+                  paddingHorizontal: 12,
+                  paddingVertical: 12,
                   marginTop: 0,
                   flexDirection: "row",
                   borderRadius: 0,
@@ -274,6 +275,8 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo, onCancel }) => {
                 <IconButton
                   type="secondaryAccented"
                   style={{
+                    width: 40,
+                    height: 40,
                     marginRight: 10
                   }}
                   size={15}
@@ -285,7 +288,7 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo, onCancel }) => {
                     flexShrink: 1
                   }}
                 >
-                  <Paragraph size={AppFontSize.md}>{item.title}</Paragraph>
+                  <Paragraph size={SIZE.md}>{item.title}</Paragraph>
                 </View>
               </Pressable>
             ))}

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

@@ -20,7 +20,7 @@ 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, { useCallback, useEffect } from "react";
-import { Keyboard, TouchableOpacity, View, ViewStyle } from "react-native";
+import { Keyboard, View } from "react-native";
 import Animated, {
   Easing,
   useAnimatedStyle,
@@ -33,31 +33,20 @@ import { editorState } from "../../screens/editor/tiptap/utils";
 import { useSelectionStore } from "../../stores/use-selection-store";
 import { useSettingStore } from "../../stores/use-setting-store";
 import { getElevationStyle } from "../../utils/elevation";
-import { AppFontSize, normalize } from "../../utils/size";
-import { DefaultAppStyles } from "../../utils/styles";
-import { hexToRGBA, RGB_Linear_Shade } from "../../utils/colors";
+import { SIZE, normalize } from "../../utils/size";
+import { Pressable } from "../ui/pressable";
 
 interface FloatingButtonProps {
   onPress: () => void;
   color?: string;
   shouldShow?: boolean;
   alwaysVisible?: boolean;
-  icon?: string;
-  testID?: string;
-  position?: "left" | "right";
-  size?: "small" | "large";
-  style?: ViewStyle;
 }
 
 const FloatingButton = ({
   onPress,
   color,
-  alwaysVisible = false,
-  icon,
-  testID,
-  position = "right",
-  size = "large",
-  style
+  alwaysVisible = false
 }: FloatingButtonProps) => {
   const { colors } = useThemeColors();
   const deviceMode = useSettingStore((state) => state.deviceMode);
@@ -119,26 +108,20 @@ const FloatingButton = ({
       style={[
         {
           position: "absolute",
-          right: position === "right" ? DefaultAppStyles.GAP : undefined,
-          left: position === "left" ? DefaultAppStyles.GAP : undefined,
+          right: 12,
           bottom: 20,
-          zIndex: 10,
-          ...style
+          zIndex: 10
         },
         animatedStyle
       ]}
     >
-      <TouchableOpacity
-        testID={testID || notesnook.buttons.add}
-        activeOpacity={0.95}
+      <Pressable
+        testID={notesnook.buttons.add}
+        type="accent"
+        accentColor={color}
         style={{
           ...getElevationStyle(5),
-          borderRadius: size === "small" ? 15 : 20,
-          borderTopWidth: 0,
-          borderBottomWidth: 0,
-          borderLeftWidth: 0,
-          borderRightWidth: 0,
-          backgroundColor: colors.primary.background
+          borderRadius: 100
         }}
         onPress={onPress}
       >
@@ -146,29 +129,23 @@ const FloatingButton = ({
           style={{
             alignItems: "center",
             justifyContent: "center",
-            height: normalize(size === "small" ? 40 : 60),
-            width: normalize(size === "small" ? 40 : 60),
-            backgroundColor: color
-              ? RGB_Linear_Shade(0.87, hexToRGBA(color))
-              : colors.primary.shade,
-            borderRadius: size === "small" ? 15 : 20
+            height: normalize(60),
+            width: normalize(60)
           }}
         >
           <Icon
             name={
-              icon
-                ? icon
-                : route.name === "Notebooks"
+              route.name === "Notebooks"
                 ? "notebook-plus"
                 : route.name === "Trash"
                 ? "delete"
                 : "plus"
             }
-            color={color || colors.primary.accent}
-            size={size === "small" ? AppFontSize.xl : AppFontSize.xxxl}
+            color={colors.primary.accentForeground}
+            size={SIZE.xxl}
           />
         </View>
-      </TouchableOpacity>
+      </Pressable>
     </Animated.View>
   );
 };

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

@@ -23,8 +23,6 @@ import { useMessageStore } from "../../stores/use-message-store";
 import { useThemeColors } from "@notesnook/theme";
 import { ColorValues } from "../../utils/colors";
 import { hexToRGBA } from "../../utils/colors";
-import { defaultBorderRadius } from "../../utils/size";
-import { DefaultAppStyles } from "../../utils/styles";
 
 export const DefaultPlaceholder = ({ color }: { color: string }) => {
   const { colors } = useThemeColors();
@@ -42,7 +40,7 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
     <View
       style={{
         width: "100%",
-        paddingHorizontal: DefaultAppStyles.GAP
+        paddingHorizontal: 12
       }}
     >
       {hasAnnoucements ? (
@@ -53,7 +51,7 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
             borderRadius: 10,
             marginBottom: 20,
             backgroundColor: colors.secondary.background,
-            padding: DefaultAppStyles.GAP
+            padding: 12
           }}
         >
           <View
@@ -61,7 +59,7 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
               width: 150,
               height: 20,
               backgroundColor: colors.primary.hover,
-              borderRadius: defaultBorderRadius,
+              borderRadius: 5,
               marginBottom: 10
             }}
           />
@@ -70,7 +68,7 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
               width: 250,
               height: 14,
               backgroundColor: colors.primary.hover,
-              borderRadius: defaultBorderRadius
+              borderRadius: 5
             }}
           />
 
@@ -80,7 +78,7 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
               height: 15,
               backgroundColor: shadeColor,
               borderRadius: 3,
-              marginTop: DefaultAppStyles.GAP_VERTICAL
+              marginTop: 10
             }}
           />
         </View>
@@ -95,7 +93,7 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
             marginBottom: 20,
             flexDirection: "row",
             alignItems: "center",
-            paddingHorizontal: DefaultAppStyles.GAP
+            paddingHorizontal: 20
           }}
         >
           <View
@@ -113,7 +111,7 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
                 width: 150,
                 height: 12,
                 backgroundColor: colors.secondary.background,
-                borderRadius: defaultBorderRadius,
+                borderRadius: 5,
                 marginBottom: 10
               }}
             />
@@ -122,7 +120,7 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
                 width: 250,
                 height: 16,
                 backgroundColor: colors.secondary.background,
-                borderRadius: defaultBorderRadius
+                borderRadius: 5
               }}
             />
           </View>
@@ -136,7 +134,7 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
           backgroundColor: colors.secondary.background,
           borderRadius: 10,
           marginBottom: 20,
-          padding: DefaultAppStyles.GAP_SMALL,
+          padding: 5,
           justifyContent: "space-between",
           flexDirection: "row",
           alignItems: "center"
@@ -181,7 +179,7 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
           width: 200,
           height: 16,
           backgroundColor: colors.secondary.background,
-          borderRadius: defaultBorderRadius
+          borderRadius: 5
         }}
       />
       <View
@@ -189,15 +187,15 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
           width: "85%",
           height: 13,
           backgroundColor: colors.secondary.background,
-          borderRadius: defaultBorderRadius,
-          marginTop: DefaultAppStyles.GAP_VERTICAL
+          borderRadius: 5,
+          marginTop: 10
         }}
       />
 
       <View
         style={{
           flexDirection: "row",
-          marginTop: DefaultAppStyles.GAP_VERTICAL
+          marginTop: 10
         }}
       >
         <View
@@ -205,7 +203,7 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
             width: 50,
             height: 10,
             backgroundColor: colors.secondary.background,
-            borderRadius: defaultBorderRadius
+            borderRadius: 5
           }}
         />
         <View
@@ -213,7 +211,7 @@ export const DefaultPlaceholder = ({ color }: { color: string }) => {
             width: 60,
             height: 10,
             backgroundColor: colors.secondary.background,
-            borderRadius: defaultBorderRadius,
+            borderRadius: 5,
             marginLeft: 10
           }}
         />

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

@@ -17,10 +17,11 @@ 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, ViewProps } from "react-native";
+import { ViewProps } from "react-native";
+import Animated, { FadeOutUp } from "react-native-reanimated";
 import { useDelayLayout } from "../../hooks/use-delay-layout";
+import { useThemeColors } from "@notesnook/theme";
 import { DefaultPlaceholder } from "./default-placeholder";
 import { SettingsPlaceholder } from "./settings-placeholder";
 
@@ -48,7 +49,8 @@ export default function DelayLayout({
   const Placeholder = placeholder[props.type || "default"];
 
   return loading || props.wait ? (
-    <View
+    <Animated.View
+      exiting={animated ? FadeOutUp : undefined}
       style={{
         backgroundColor: colors.primary.background,
         flex: 1,
@@ -56,7 +58,7 @@ export default function DelayLayout({
       }}
     >
       <Placeholder color={props.color || colors.primary.accent} />
-    </View>
+    </Animated.View>
   ) : (
     <>{props.children}</>
   );

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

@@ -20,8 +20,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import React from "react";
 import { View } from "react-native";
 import { useThemeColors } from "@notesnook/theme";
-import { defaultBorderRadius } from "../../utils/size";
-import { DefaultAppStyles } from "../../utils/styles";
 
 export const SettingsPlaceholder = () => {
   const { colors } = useThemeColors();
@@ -33,7 +31,7 @@ export const SettingsPlaceholder = () => {
           width: 100,
           height: 12,
           backgroundColor: colors.primary.shade,
-          borderRadius: defaultBorderRadius,
+          borderRadius: 5,
           marginLeft: 12,
           marginBottom: 12
         }}
@@ -46,7 +44,7 @@ export const SettingsPlaceholder = () => {
           marginBottom: 20,
           flexDirection: "row",
           alignItems: "center",
-          paddingHorizontal: DefaultAppStyles.GAP
+          paddingHorizontal: 16
         }}
       >
         <View
@@ -64,7 +62,7 @@ export const SettingsPlaceholder = () => {
               width: 150,
               height: 12,
               backgroundColor: colors.secondary.background,
-              borderRadius: defaultBorderRadius,
+              borderRadius: 5,
               marginBottom: 10
             }}
           />
@@ -73,7 +71,7 @@ export const SettingsPlaceholder = () => {
               width: 250,
               height: 16,
               backgroundColor: colors.secondary.background,
-              borderRadius: defaultBorderRadius
+              borderRadius: 5
             }}
           />
         </View>
@@ -87,7 +85,7 @@ export const SettingsPlaceholder = () => {
           marginBottom: 20,
           flexDirection: "row",
           alignItems: "center",
-          paddingHorizontal: DefaultAppStyles.GAP,
+          paddingHorizontal: 16,
           justifyContent: "space-between"
         }}
       >
@@ -106,7 +104,7 @@ export const SettingsPlaceholder = () => {
               width: 150,
               height: 12,
               backgroundColor: colors.secondary.background,
-              borderRadius: defaultBorderRadius,
+              borderRadius: 5,
               marginBottom: 10
             }}
           />
@@ -115,7 +113,7 @@ export const SettingsPlaceholder = () => {
               width: 250,
               height: 16,
               backgroundColor: colors.secondary.background,
-              borderRadius: defaultBorderRadius
+              borderRadius: 5
             }}
           />
         </View>

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

@@ -17,7 +17,6 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { ScopedThemeProvider } from "@notesnook/theme";
 import React, { PropsWithChildren, useEffect, useRef, useState } from "react";
 import {
   ColorValue,
@@ -31,8 +30,11 @@ import {
 } from "react-native";
 import useIsFloatingKeyboard from "../../hooks/use-is-floating-keyboard";
 import { useSettingStore } from "../../stores/use-setting-store";
-import { useUserStore } from "../../stores/use-user-store";
 import { BouncingView } from "../ui/transitions/bouncing-view";
+import { ScopedThemeProvider } from "@notesnook/theme";
+import SettingsService from "../../services/settings";
+import { useUserStore } from "../../stores/use-user-store";
+import { useAppState } from "../../hooks/use-app-state";
 
 export interface BaseDialogProps extends PropsWithChildren {
   animation?: "fade" | "none" | "slide" | undefined;

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

@@ -17,17 +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 { strings } from "@notesnook/intl";
-import { useThemeColors } from "@notesnook/theme";
 import React from "react";
-import { StyleSheet, View } from "react-native";
+import { ActivityIndicator, StyleSheet, View } from "react-native";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { notesnook } from "../../../e2e/test.ids";
-import { getColorLinearShade } from "../../utils/colors";
-import { AppFontSize } from "../../utils/size";
-import { DefaultAppStyles } from "../../utils/styles";
+import { useThemeColors } from "@notesnook/theme";
+import { SIZE } from "../../utils/size";
 import { Button } from "../ui/button";
 import Paragraph from "../ui/typography/paragraph";
+import { getColorLinearShade } from "../../utils/colors";
+import { strings } from "@notesnook/intl";
 
 const DialogButtons = ({
   onPressPositive,
@@ -47,7 +46,9 @@ const DialogButtons = ({
         {
           backgroundColor: colors.secondary.background,
           height: 60,
-          paddingHorizontal: DefaultAppStyles.GAP,
+          borderBottomRightRadius: 5,
+          borderBottomLeftRadius: 5,
+          paddingHorizontal: 12,
           borderTopWidth: 0.7,
           borderTopColor: getColorLinearShade(
             colors.secondary.background,
@@ -57,7 +58,9 @@ const DialogButtons = ({
         }
       ]}
     >
-      {doneText ? (
+      {loading ? (
+        <ActivityIndicator color={colors.primary.accent} size={SIZE.lg} />
+      ) : doneText ? (
         <View
           style={{
             flexDirection: "row",
@@ -67,7 +70,7 @@ const DialogButtons = ({
           <Icon
             color={colors.primary.accent}
             name="check-circle-outline"
-            size={AppFontSize.md}
+            size={SIZE.md}
           />
           <Paragraph color={colors.primary.accent}>{" " + doneText}</Paragraph>
         </View>
@@ -83,7 +86,7 @@ const DialogButtons = ({
       >
         <Button
           onPress={onPressNegative}
-          fontSize={AppFontSize.sm}
+          fontSize={SIZE.md}
           testID={notesnook.ids.default.dialog.no}
           type="plain"
           bold
@@ -92,12 +95,11 @@ const DialogButtons = ({
         {onPressPositive ? (
           <Button
             onPress={onPressPositive}
-            fontSize={AppFontSize.sm}
+            fontSize={SIZE.md}
             testID={notesnook.ids.default.dialog.yes}
             style={{
               marginLeft: 10
             }}
-            loading={loading}
             bold
             type={positiveType || "transparent"}
             title={positiveTitle}
@@ -115,6 +117,6 @@ const styles = StyleSheet.create({
     justifyContent: "space-between",
     alignItems: "center",
     flexDirection: "row",
-    marginTop: DefaultAppStyles.GAP_VERTICAL
+    marginTop: 10
   }
 });

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

@@ -20,12 +20,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import React from "react";
 import { Text, View, ViewStyle } from "react-native";
 import { useThemeColors } from "@notesnook/theme";
-import { AppFontSize } from "../../utils/size";
+import { SIZE } from "../../utils/size";
 import { Button } from "../ui/button";
 import { PressableProps } from "../ui/pressable";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
-import { DefaultAppStyles } from "../../utils/styles";
 
 type DialogHeaderProps = {
   icon?: string;
@@ -83,7 +82,7 @@ const DialogHeader = ({
           >
             <Heading
               style={{ textAlign: centered ? "center" : "left" }}
-              size={AppFontSize.lg}
+              size={SIZE.lg}
             >
               {title}{" "}
               {titlePart ? (
@@ -98,7 +97,7 @@ const DialogHeader = ({
                 onPress={button.onPress}
                 style={{
                   borderRadius: 100,
-                  paddingHorizontal: DefaultAppStyles.GAP
+                  paddingHorizontal: 12
                 }}
                 loading={button.loading}
                 fontSize={13}

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

@@ -17,35 +17,33 @@ 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, useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { View } from "react-native";
 import { DDS } from "../../services/device-detection";
 import {
   eSubscribeEvent,
   eUnSubscribeEvent
 } from "../../services/event-manager";
-import { getContainerBorder } from "../../utils/colors";
+import { useThemeColors } from "@notesnook/theme";
 import { getElevationStyle } from "../../utils/elevation";
 import { eCloseSimpleDialog, eOpenSimpleDialog } from "../../utils/events";
-import { defaultBorderRadius } from "../../utils/size";
-import { DefaultAppStyles } from "../../utils/styles";
 import { sleep } from "../../utils/time";
 import { Toast } from "../toast";
-import { Button } from "../ui/button";
 import Input from "../ui/input";
-import { Notice } from "../ui/notice";
 import Seperator from "../ui/seperator";
 import BaseDialog from "./base-dialog";
 import DialogButtons from "./dialog-buttons";
 import DialogHeader from "./dialog-header";
+import { useCallback } from "react";
+import { Button } from "../ui/button";
+import { getContainerBorder } from "../../utils/colors";
+import { Notice } from "../ui/notice";
+import { strings } from "@notesnook/intl";
 
 export const Dialog = ({ context = "global" }) => {
   const { colors } = useThemeColors();
   const [visible, setVisible] = useState(false);
   const [checked, setChecked] = useState(false);
-  const [loading, setLoading] = useState(false);
   const values = useRef({
     inputValue: undefined
   });
@@ -74,26 +72,16 @@ export const Dialog = ({ context = "global" }) => {
   const onPressPositive = async () => {
     if (dialogInfo.positivePress) {
       inputRef.current?.blur();
-      setLoading(true);
-      let result;
-      try {
-        result = await dialogInfo.positivePress(
-          values.current.inputValue || dialogInfo.defaultValue,
-          checked
-        );
-      } catch (e) {
-        /** Empty */
-      }
-      setLoading(false);
-
+      let result = await dialogInfo.positivePress(
+        values.current.inputValue || dialogInfo.defaultValue,
+        checked
+      );
       if (result === false) {
         return;
       }
     }
 
-    setChecked(false);
-    values.current.inputValue = undefined;
-    setVisible(false);
+    hide();
   };
 
   const show = useCallback(
@@ -116,14 +104,13 @@ export const Dialog = ({ context = "global" }) => {
       eUnSubscribeEvent(eOpenSimpleDialog, show);
       eUnSubscribeEvent(eCloseSimpleDialog, hide);
     };
-  }, [hide, show]);
+  }, [show]);
 
-  const hide = React.useCallback(() => {
+  const hide = () => {
     setChecked(false);
     values.current.inputValue = undefined;
     setVisible(false);
-    dialogInfo.onClose?.();
-  }, [dialogInfo]);
+  };
 
   const onNegativePress = async () => {
     if (dialogInfo.onClose) {
@@ -136,11 +123,10 @@ export const Dialog = ({ context = "global" }) => {
     ...getElevationStyle(5),
     width: DDS.isTab ? 400 : "85%",
     maxHeight: 450,
-    borderRadius: defaultBorderRadius,
+    borderRadius: 5,
     backgroundColor: colors.primary.background,
     paddingTop: 12,
-    ...getContainerBorder(colors.primary.border, 0.5),
-    overflow: "hidden"
+    ...getContainerBorder(colors.primary.border, 0.5)
   };
 
   return visible ? (
@@ -176,7 +162,7 @@ export const Dialog = ({ context = "global" }) => {
         {dialogInfo.input ? (
           <View
             style={{
-              paddingHorizontal: DefaultAppStyles.GAP
+              paddingHorizontal: 12
             }}
           >
             <Input
@@ -200,7 +186,7 @@ export const Dialog = ({ context = "global" }) => {
         {dialogInfo?.notice ? (
           <View
             style={{
-              paddingHorizontal: DefaultAppStyles.GAP
+              paddingHorizontal: 12
             }}
           >
             <Notice
@@ -221,7 +207,6 @@ export const Dialog = ({ context = "global" }) => {
                   ? "check-circle-outline"
                   : "checkbox-blank-circle-outline"
               }
-              iconColor={checked ? colors.secondary.icon : colors.primary.icon}
               style={{
                 justifyContent: "flex-start"
               }}
@@ -237,7 +222,6 @@ export const Dialog = ({ context = "global" }) => {
         <DialogButtons
           onPressNegative={onNegativePress}
           onPressPositive={dialogInfo.positivePress && onPressPositive}
-          loading={loading}
           positiveTitle={dialogInfo.positiveText}
           negativeTitle={dialogInfo.negativeText}
           positiveType={dialogInfo.positiveType}

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

@@ -39,7 +39,7 @@ import {
   eCloseAppLocKPasswordDailog,
   eOpenAppLockPasswordDialog
 } from "../../../utils/events";
-import { AppFontSize } from "../../../utils/size";
+import { SIZE } from "../../../utils/size";
 import { sleep } from "../../../utils/time";
 import BaseDialog from "../../dialog/base-dialog";
 import DialogButtons from "../../dialog/dialog-buttons";
@@ -50,7 +50,6 @@ import { IconButton } from "../../ui/icon-button";
 import Input from "../../ui/input";
 import Seperator from "../../ui/seperator";
 import { strings } from "@notesnook/intl";
-import { DefaultAppStyles } from "../../../utils/styles";
 
 export const AppLockPassword = () => {
   const { colors } = useThemeColors();
@@ -129,7 +128,7 @@ export const AppLockPassword = () => {
 
         <View
           style={{
-            paddingHorizontal: DefaultAppStyles.GAP
+            paddingHorizontal: 12
           }}
         >
           {mode === "change" ? (
@@ -193,7 +192,7 @@ export const AppLockPassword = () => {
                     height: 25,
                     marginRight: 5
                   }}
-                  size={AppFontSize.lg}
+                  size={SIZE.lg}
                 />
               )
             }
@@ -249,7 +248,7 @@ export const AppLockPassword = () => {
                     setSecureTextEntry(true);
                   });
                 }}
-                iconSize={AppFontSize.lg}
+                iconSize={SIZE.lg}
                 type="plain"
                 iconColor={
                   accountPass ? colors.primary.accent : colors.primary.icon
@@ -260,7 +259,7 @@ export const AppLockPassword = () => {
                   alignSelf: "flex-start",
                   justifyContent: "flex-start",
                   paddingHorizontal: 0,
-                  paddingVertical: DefaultAppStyles.GAP_VERTICAL_SMALL
+                  height: 30
                 }}
               />
             </>

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

@@ -27,13 +27,12 @@ import {
 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 { SIZE } from "../../../utils/size";
 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,
@@ -51,26 +50,21 @@ export default function AttachImage({
     <View
       style={{
         alignItems: "center",
-        paddingHorizontal: DefaultAppStyles.GAP
+        paddingHorizontal: 12
       }}
     >
       <View
         style={{
           backgroundColor: colors.secondary.background,
-          marginBottom: DefaultAppStyles.GAP_VERTICAL,
+          marginBottom: 12,
           height: 140,
           width: "100%",
           borderRadius: 10,
-          padding: DefaultAppStyles.GAP_SMALL,
-          paddingHorizontal: DefaultAppStyles.GAP_SMALL
+          padding: 5,
+          paddingHorizontal: 12
         }}
       >
-        <Paragraph
-          style={{
-            color: colors.primary.paragraph,
-            marginBottom: DefaultAppStyles.GAP_VERTICAL_SMALL
-          }}
-        >
+        <Paragraph style={{ color: colors.primary.paragraph, marginBottom: 6 }}>
           {strings.attachImageHeading(response?.length || 1)}
         </Paragraph>
         <ScrollView horizontal>
@@ -86,7 +80,7 @@ export default function AttachImage({
                 style={{
                   width: 100,
                   height: 100,
-                  borderRadius: defaultBorderRadius,
+                  borderRadius: 5,
                   backgroundColor: "black",
                   marginRight: 6
                 }}
@@ -102,7 +96,7 @@ export default function AttachImage({
         style={{
           flexDirection: "row",
           alignSelf: "center",
-          marginBottom: DefaultAppStyles.GAP_VERTICAL,
+          marginBottom: 12,
           alignItems: "center",
           width: "100%"
         }}
@@ -111,7 +105,7 @@ export default function AttachImage({
         }}
       >
         <IconButton
-          size={AppFontSize.lg}
+          size={SIZE.lg}
           name={compress ? "checkbox-marked" : "checkbox-blank-outline"}
           color={compress ? colors.primary.accent : colors.primary.icon}
           style={{
@@ -128,7 +122,7 @@ export default function AttachImage({
             flexShrink: 1,
             marginLeft: 3
           }}
-          size={AppFontSize.sm}
+          size={SIZE.sm}
         >
           {strings.compress()} ({strings.recommended().toLowerCase()})
         </Paragraph>
@@ -141,7 +135,7 @@ export default function AttachImage({
           size="small"
           style={{
             width: "100%",
-            marginBottom: DefaultAppStyles.GAP_VERTICAL
+            marginBottom: 12
           }}
         />
       ) : (
@@ -151,7 +145,7 @@ export default function AttachImage({
           size="small"
           style={{
             width: "100%",
-            marginBottom: DefaultAppStyles.GAP_VERTICAL
+            marginBottom: 12
           }}
         />
       )}

apps/mobile/app/components/dialogs/color-picker/index.tsx

@@ -34,7 +34,6 @@ import { Button } from "../../ui/button";
 import Input from "../../ui/input";
 import { Pressable } from "../../ui/pressable";
 import { strings } from "@notesnook/intl";
-import { DefaultAppStyles } from "../../../utils/styles";
 
 const HEX_COLOR_REGEX_ALPHA =
   /^#(?:(?:[\da-fA-F]{3}){1,2}|(?:[\da-fA-F]{4}){1,2})$/;
@@ -106,16 +105,16 @@ const ColorPicker = ({
 
           <View
             style={{
-              paddingHorizontal: DefaultAppStyles.GAP
+              paddingHorizontal: 12
             }}
           >
             <View
               style={{
                 flexDirection: "row",
                 alignItems: "center",
-                paddingTop: DefaultAppStyles.GAP_VERTICAL,
-                columnGap: DefaultAppStyles.GAP_VERTICAL,
-                marginBottom: DefaultAppStyles.GAP_VERTICAL
+                paddingTop: 10,
+                columnGap: 10,
+                marginBottom: 10
               }}
             >
               <Input
@@ -156,7 +155,7 @@ const ColorPicker = ({
             <Button
               title={strings.addColor()}
               style={{
-                marginBottom: DefaultAppStyles.GAP_VERTICAL
+                marginBottom: 10
               }}
               onPress={async () => {
                 if (!selectedColor)

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

@@ -39,11 +39,10 @@ import {
   eOpenJumpToDialog,
   eScrollEvent
 } from "../../../utils/events";
-import { AppFontSize } from "../../../utils/size";
+import { SIZE } from "../../../utils/size";
 import BaseDialog from "../../dialog/base-dialog";
 import { Pressable } from "../../ui/pressable";
 import Paragraph from "../../ui/typography/paragraph";
-import { DefaultAppStyles } from "../../../utils/styles";
 
 const JumpToSectionDialog = () => {
   const scrollRef = useRef<RefObject<FlatList>>();
@@ -153,13 +152,13 @@ const JumpToSectionDialog = () => {
           maxHeight: "65%",
           borderRadius: 10,
           alignSelf: "center",
-          padding: DefaultAppStyles.GAP_SMALL,
+          padding: 10,
           paddingTop: 30
         }}
       >
         {loading ? (
           <ActivityIndicator
-            size={AppFontSize.lg}
+            size={SIZE.lg}
             color={colors.primary.accent}
             style={{
               marginBottom: 20
@@ -189,15 +188,15 @@ const JumpToSectionDialog = () => {
                     style={{
                       minWidth: "20%",
                       width: null,
-                      paddingHorizontal: DefaultAppStyles.GAP,
+                      paddingHorizontal: 12,
                       margin: 5,
                       borderRadius: 100,
-                      paddingVertical: DefaultAppStyles.GAP_VERTICAL_SMALL,
+                      height: 30,
                       marginVertical: 10
                     }}
                   >
                     <Paragraph
-                      size={AppFontSize.sm}
+                      size={SIZE.sm}
                       color={
                         currentIndex === index
                           ? colors.static.white

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

@@ -28,7 +28,6 @@ import {
 } from "../../../services/event-manager";
 import { useState } from "react";
 import { eCloseLoading, eOpenLoading } from "../../../utils/events";
-import { DefaultAppStyles } from "../../../utils/styles";
 
 export const LoadingDialog = () => {
   const { colors } = useThemeColors();
@@ -68,7 +67,7 @@ export const LoadingDialog = () => {
           style={{
             flexDirection: "row",
             width: 100,
-            marginTop: DefaultAppStyles.GAP
+            marginTop: 15
           }}
         >
           <ProgressBarComponent

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

@@ -19,7 +19,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import { Dimensions, TextInput, View } from "react-native";
-import Orientation from "react-native-orientation-locker";
+import {
+  addOrientationListener,
+  removeOrientationListener
+} from "react-native-orientation";
 import Pdf from "react-native-pdf";
 import Animated, { FadeIn, FadeOut } from "react-native-reanimated";
 import downloadAttachment from "../../../common/filesystem/download-attachment";
@@ -31,7 +34,7 @@ import {
   eUnSubscribeEvent
 } from "../../../services/event-manager";
 import { useThemeColors } from "@notesnook/theme";
-import { AppFontSize } from "../../../utils/size";
+import { SIZE } from "../../../utils/size";
 import { Dialog } from "../../dialog";
 import BaseDialog from "../../dialog/base-dialog";
 import { presentDialog } from "../../dialog/functions";
@@ -43,7 +46,6 @@ import { sleep } from "../../../utils/time";
 import { MMKV } from "../../../common/database/mmkv";
 import { deleteCacheFileByPath } from "../../../common/filesystem/io";
 import { strings } from "@notesnook/intl";
-import { DefaultAppStyles } from "../../../utils/styles";
 
 const WIN_WIDTH = Dimensions.get("window").width;
 const WIN_HEIGHT = Dimensions.get("window").height;
@@ -96,9 +98,9 @@ const PDFPreview = () => {
   };
 
   useEffect(() => {
-    Orientation.addDeviceOrientationListener(onOrientationChange);
+    addOrientationListener(onOrientationChange);
     return () => {
-      Orientation.removeDeviceOrientationListener(onOrientationChange);
+      removeOrientationListener(onOrientationChange);
     };
   }, []);
 
@@ -182,7 +184,7 @@ const PDFPreview = () => {
               />
               <Paragraph
                 style={{
-                  marginTop: DefaultAppStyles.GAP_VERTICAL
+                  marginTop: 10
                 }}
                 color={colors.static.white}
               >
@@ -198,7 +200,7 @@ const PDFPreview = () => {
                   marginTop: insets.top,
                   flexDirection: "row",
                   justifyContent: "space-between",
-                  paddingHorizontal: DefaultAppStyles.GAP,
+                  paddingHorizontal: 12,
                   paddingLeft: 6
                 }}
               >
@@ -214,7 +216,7 @@ const PDFPreview = () => {
                     style={{
                       marginRight: 12
                     }}
-                    size={AppFontSize.xxl}
+                    size={SIZE.xxl}
                   />
                 </View>
 

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

@@ -21,7 +21,7 @@ import { useThemeColors } from "@notesnook/theme";
 import React, { useEffect } from "react";
 import { View } from "react-native";
 import { eSendEvent, eSubscribeEvent } from "../../../services/event-manager";
-import { AppFontSize } from "../../../utils/size";
+import { SIZE } from "../../../utils/size";
 import { Dialog } from "../../dialog";
 import BaseDialog from "../../dialog/base-dialog";
 import DialogContainer from "../../dialog/dialog-container";
@@ -29,7 +29,6 @@ import { Button } from "../../ui/button";
 import { ProgressBarComponent } from "../../ui/svg/lazy";
 import Heading from "../../ui/typography/heading";
 import Paragraph from "../../ui/typography/paragraph";
-import { DefaultAppStyles } from "../../../utils/styles";
 
 export type ProgressOptions = {
   progress?: string;
@@ -112,7 +111,7 @@ export default function Progress() {
     >
       <DialogContainer
         style={{
-          paddingHorizontal: DefaultAppStyles.GAP,
+          paddingHorizontal: 12,
           paddingBottom: 10
         }}
         noBorder={data?.fillBackground ? true : false}
@@ -122,7 +121,7 @@ export default function Progress() {
           style={{
             justifyContent: "center",
             alignItems: "center",
-            paddingHorizontal: DefaultAppStyles.GAP,
+            paddingHorizontal: 12,
             gap: 10,
             paddingBottom: 20
           }}
@@ -132,7 +131,7 @@ export default function Progress() {
               textAlign: "center"
             }}
             color={colors.primary.paragraph}
-            size={AppFontSize.lg}
+            size={SIZE.lg}
           >
             {data?.title}
           </Heading>
@@ -149,7 +148,7 @@ export default function Progress() {
             style={{
               flexDirection: "row",
               width: 100,
-              paddingVertical: DefaultAppStyles.GAP_VERTICAL
+              paddingVertical: 12
             }}
           >
             <ProgressBarComponent

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

@@ -27,14 +27,13 @@ import {
 import { useThemeColors } from "@notesnook/theme";
 import { getElevationStyle } from "../../../utils/elevation";
 import { eCloseResultDialog, eOpenResultDialog } from "../../../utils/events";
-import { AppFontSize } from "../../../utils/size";
+import { SIZE } from "../../../utils/size";
 import BaseDialog from "../../dialog/base-dialog";
 import { Button } from "../../ui/button";
 import Seperator from "../../ui/seperator";
 import Heading from "../../ui/typography/heading";
 import Paragraph from "../../ui/typography/paragraph";
 import { ProFeatures } from "./pro-features";
-import { DefaultAppStyles } from "../../../utils/styles";
 
 const ResultDialog = () => {
   const { colors } = useThemeColors();
@@ -79,15 +78,15 @@ const ResultDialog = () => {
         }}
       >
         <Heading
-          size={AppFontSize.lg}
+          size={SIZE.lg}
           textBreakStrategy="balanced"
           style={{
             alignSelf: "center",
             textAlign: "center",
-            marginTop: DefaultAppStyles.GAP_VERTICAL,
+            marginTop: 10,
             maxWidth: "100%",
-            marginBottom: DefaultAppStyles.GAP_VERTICAL,
-            paddingHorizontal: DefaultAppStyles.GAP
+            marginBottom: 10,
+            paddingHorizontal: 12
           }}
         >
           {dialogData.title}
@@ -95,12 +94,12 @@ const ResultDialog = () => {
 
         <Paragraph
           color={colors.secondary.paragraph}
-          size={AppFontSize.md}
+          size={SIZE.md}
           style={{
             alignSelf: "center",
             textAlign: "center",
             maxWidth: "80%",
-            lineHeight: AppFontSize.sm + 5
+            lineHeight: SIZE.sm + 5
           }}
         >
           {dialogData.paragraph}
@@ -110,7 +109,7 @@ const ResultDialog = () => {
 
         <View
           style={{
-            paddingHorizontal: DefaultAppStyles.GAP,
+            paddingHorizontal: 12,
             alignItems: "center",
             width: "100%"
           }}
@@ -125,17 +124,17 @@ const ResultDialog = () => {
             width: "100%",
             borderBottomRightRadius: 10,
             borderBottomLeftRadius: 10,
-            paddingVertical: DefaultAppStyles.GAP_VERTICAL
+            paddingVertical: 10
           }}
         >
           <Button
             title={dialogData.button}
             width={null}
             style={{
-              paddingHorizontal: DefaultAppStyles.GAP
+              paddingHorizontal: 12
             }}
             onPress={close}
-            fontSize={AppFontSize.md + 2}
+            fontSize={SIZE.md + 2}
           />
         </View>
       </View>

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

@@ -27,10 +27,9 @@ import {
   eCloseResultDialog,
   eOpenPremiumDialog
 } from "../../../utils/events";
-import { defaultBorderRadius, AppFontSize } from "../../../utils/size";
+import { SIZE } from "../../../utils/size";
 import { sleep } from "../../../utils/time";
 import Paragraph from "../../ui/typography/paragraph";
-import { DefaultAppStyles } from "../../../utils/styles";
 export const ProFeatures = ({ count = 6 }) => {
   const { colors } = useThemeColors();
 
@@ -68,17 +67,13 @@ export const ProFeatures = ({ count = 6 }) => {
               width: "100%",
               height: 40,
               paddingHorizontal: 0,
-              marginBottom: DefaultAppStyles.GAP_VERTICAL,
+              marginBottom: 10,
               alignItems: "center",
-              borderRadius: defaultBorderRadius,
+              borderRadius: 5,
               justifyContent: "flex-start"
             }}
           >
-            <Icon
-              size={AppFontSize.lg}
-              color={colors.primary.accent}
-              name="check"
-            />
+            <Icon size={SIZE.lg} color={colors.primary.accent} name="check" />
             <Paragraph style={{ marginLeft: 5, flexShrink: 1 }}>
               {item.content}
             </Paragraph>
@@ -91,7 +86,7 @@ export const ProFeatures = ({ count = 6 }) => {
           await sleep(300);
           eSendEvent(eOpenPremiumDialog);
         }}
-        size={AppFontSize.xs}
+        size={SIZE.xs}
         style={{
           textDecorationLine: "underline",
           color: colors.secondary.paragraph

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

@@ -41,7 +41,7 @@ import {
   eUpdateNoteInEditor
 } from "../../../utils/events";
 import { deleteItems } from "../../../utils/functions";
-import { fluidTabsRef } from "../../../utils/global-refs";
+import { tabBarRef } from "../../../utils/global-refs";
 import { convertNoteToText } from "../../../utils/note-to-text";
 import { sleep } from "../../../utils/time";
 import BaseDialog from "../../dialog/base-dialog";
@@ -53,7 +53,6 @@ import Input from "../../ui/input";
 import Seperator from "../../ui/seperator";
 import Paragraph from "../../ui/typography/paragraph";
 import { strings } from "@notesnook/intl";
-import { DefaultAppStyles } from "../../../utils/styles";
 
 export class VaultDialog extends Component {
   constructor(props) {
@@ -554,7 +553,7 @@ export class VaultDialog extends Component {
         item: note
       });
       if (!DDS.isTab) {
-        fluidTabsRef.current?.goToPage("editor");
+        tabBarRef.current?.goToPage(1);
       }
     });
   }
@@ -678,7 +677,7 @@ export class VaultDialog extends Component {
 
           <View
             style={{
-              paddingHorizontal: DefaultAppStyles.GAP
+              paddingHorizontal: 12
             }}
           >
             {(novault ||
@@ -751,7 +750,7 @@ export class VaultDialog extends Component {
                     : "checkbox-blank-circle-outline"
                 }
                 style={{
-                  marginTop: DefaultAppStyles.GAP_VERTICAL
+                  marginTop: 10
                 }}
                 width="100%"
                 title={strings.deleteAllNotes()}
@@ -848,7 +847,7 @@ export class VaultDialog extends Component {
                   });
                 }}
                 style={{
-                  marginTop: DefaultAppStyles.GAP_VERTICAL
+                  marginTop: 10
                 }}
                 icon="fingerprint"
                 width="100%"

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

@@ -17,52 +17,60 @@ 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 { View } from "react-native";
+import { Platform, StyleSheet, View } from "react-native";
+import useGlobalSafeAreaInsets from "../../hooks/use-global-safe-area-insets";
 import {
   eSubscribeEvent,
   eUnSubscribeEvent
 } from "../../services/event-manager";
-import { RouteName } from "../../stores/use-navigation-store";
+import useNavigationStore, {
+  RouteName
+} from "../../stores/use-navigation-store";
 import { useSelectionStore } from "../../stores/use-selection-store";
 import { eScrollEvent } from "../../utils/events";
-import { AppFontSize } from "../../utils/size";
-import { DefaultAppStyles } from "../../utils/styles";
-import { IconButtonProps } from "../ui/icon-button";
-import { Pressable } from "../ui/pressable";
-import Heading from "../ui/typography/heading";
-import Paragraph from "../ui/typography/paragraph";
 import { LeftMenus } from "./left-menus";
 import { RightMenus } from "./right-menus";
+import { Title } from "./title";
+
+type HeaderRightButton = {
+  title: string;
+  onPress: () => void;
+};
 
 export const Header = ({
   renderedInRoute,
   onLeftMenuButtonPress,
   title,
+  titleHiddenOnRender,
+  headerRightButtons,
   id,
+  accentColor,
+  isBeta,
   canGoBack,
+  onPressDefaultRightButton,
   hasSearch,
-  onSearch,
-  rightButton
+  onSearch
 }: {
   onLeftMenuButtonPress?: () => void;
   renderedInRoute?: RouteName;
   id?: string;
   title: string;
+  headerRightButtons?: HeaderRightButton[];
+  titleHiddenOnRender?: boolean;
+  accentColor?: string;
+  isBeta?: boolean;
   canGoBack?: boolean;
   onPressDefaultRightButton?: () => void;
   hasSearch?: boolean;
   onSearch?: () => void;
-  rightButton?: IconButtonProps;
 }) => {
   const { colors } = useThemeColors();
+  const insets = useGlobalSafeAreaInsets();
   const [borderHidden, setBorderHidden] = useState(true);
-  const [selectedItemsList, selectionMode] = useSelectionStore((state) => [
-    state.selectedItemsList,
-    state.selectionMode
-  ]);
+  const selectionMode = useSelectionStore((state) => state.selectionMode);
+  const isFocused = useNavigationStore((state) => state.focusedRouteId === id);
 
   const onScroll = useCallback(
     (data: { x: number; y: number; id?: string; route: string }) => {
@@ -85,48 +93,88 @@ export const Header = ({
     };
   }, [borderHidden, onScroll]);
 
-  const HeaderWrapper = hasSearch ? Pressable : View;
-
-  return (
-    <View
-      style={{
-        paddingHorizontal: DefaultAppStyles.GAP
-      }}
-    >
-      <HeaderWrapper
-        style={{
-          flexDirection: "row",
-          justifyContent: "space-between",
-          marginTop: DefaultAppStyles.GAP_SMALL,
-          borderRadius: 10,
-          paddingVertical: 3,
-          borderWidth: hasSearch ? 1 : 0,
-          borderColor: colors.primary.border,
-          paddingHorizontal: !hasSearch ? 0 : DefaultAppStyles.GAP_SMALL,
-          alignItems: "center"
-        }}
-        testID="search-header"
-        onPress={() => {
-          onSearch?.();
-        }}
+  return selectionMode && isFocused ? null : (
+    <>
+      <View
+        style={[
+          styles.container,
+          {
+            marginTop: Platform.OS === "android" ? insets.top : null,
+            backgroundColor: colors.primary.background,
+            overflow: "hidden",
+            borderBottomWidth: 1,
+            borderBottomColor: borderHidden
+              ? "transparent"
+              : colors.secondary.background,
+            justifyContent: "space-between"
+          }
+        ]}
       >
-        <LeftMenus
-          canGoBack={canGoBack}
-          onLeftButtonPress={onLeftMenuButtonPress}
-        />
+        <>
+          <View style={styles.leftBtnContainer}>
+            <LeftMenus
+              canGoBack={canGoBack}
+              onLeftButtonPress={onLeftMenuButtonPress}
+            />
 
-        {hasSearch ? (
-          <Paragraph>
-            {selectionMode
-              ? `${selectedItemsList.length} selected`
-              : strings.searchInRoute(title)}
-          </Paragraph>
-        ) : (
-          <Heading size={AppFontSize.lg}>{title}</Heading>
-        )}
-
-        <RightMenus rightButton={rightButton} />
-      </HeaderWrapper>
-    </View>
+            <Title
+              isHiddenOnRender={titleHiddenOnRender}
+              renderedInRoute={renderedInRoute}
+              id={id}
+              accentColor={accentColor}
+              title={title}
+              isBeta={isBeta}
+            />
+          </View>
+          <RightMenus
+            renderedInRoute={renderedInRoute}
+            id={id}
+            headerRightButtons={headerRightButtons}
+            onPressDefaultRightButton={onPressDefaultRightButton}
+            search={hasSearch}
+            onSearch={onSearch}
+          />
+        </>
+      </View>
+    </>
   );
 };
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    zIndex: 11,
+    height: 50,
+    maxHeight: 50,
+    justifyContent: "center",
+    alignItems: "center",
+    paddingHorizontal: 12,
+    width: "100%"
+  },
+  leftBtnContainer: {
+    flexDirection: "row",
+    justifyContent: "flex-start",
+    alignItems: "center",
+    flexShrink: 1
+  },
+  leftBtn: {
+    justifyContent: "center",
+    alignItems: "center",
+    height: 40,
+    width: 40,
+    borderRadius: 100,
+    marginLeft: -5,
+    marginRight: 25
+  },
+  rightBtnContainer: {
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  rightBtn: {
+    justifyContent: "center",
+    alignItems: "flex-end",
+    height: 40,
+    width: 40,
+    paddingRight: 0
+  }
+});

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

@@ -20,9 +20,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import { useThemeColors } from "@notesnook/theme";
 import React from "react";
 import { notesnook } from "../../../e2e/test.ids";
+import { DDS } from "../../services/device-detection";
 import Navigation from "../../services/navigation";
 import { useSettingStore } from "../../stores/use-setting-store";
-import { fluidTabsRef } from "../../utils/global-refs";
+import { tabBarRef } from "../../utils/global-refs";
 import { IconButton } from "../ui/icon-button";
 
 export const LeftMenus = ({
@@ -40,7 +41,7 @@ export const LeftMenus = ({
     if (onLeftButtonPress) return onLeftButtonPress();
 
     if (!canGoBack) {
-      if (fluidTabsRef.current?.isDrawerOpen()) {
+      if (tabBarRef.current?.isDrawerOpen()) {
         Navigation.closeDrawer();
       } else {
         Navigation.openDrawer();
@@ -53,14 +54,23 @@ export const LeftMenus = ({
   return isTablet && !canGoBack ? null : (
     <IconButton
       testID={notesnook.ids.default.header.buttons.left}
+      style={{
+        justifyContent: "center",
+        alignItems: "center",
+        height: 40,
+        width: 40,
+        borderRadius: 100,
+        marginRight: DDS.isLargeTablet() ? 10 : 7
+      }}
       left={40}
       top={40}
+      right={DDS.isLargeTablet() ? 10 : 10}
       onPress={_onLeftButtonPress}
       onLongPress={() => {
         Navigation.popToTop();
       }}
       name={canGoBack ? "arrow-left" : "menu"}
-      color={colors.primary.icon}
+      color={colors.primary.paragraph}
     />
   );
 };

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

@@ -17,30 +17,127 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
+import React, { useRef } from "react";
+import { Platform, StyleSheet, View } from "react-native";
 import { useThemeColors } from "@notesnook/theme";
-import React from "react";
-import { StyleSheet, View } from "react-native";
-import { IconButton, IconButtonProps } from "../ui/icon-button";
+import { Menu } from "react-native-material-menu";
+import { notesnook } from "../../../e2e/test.ids";
+import {
+  HeaderRightButton,
+  RouteName
+} from "../../stores/use-navigation-store";
+import { useSettingStore } from "../../stores/use-setting-store";
+import { SIZE } from "../../utils/size";
+import { sleep } from "../../utils/time";
+import { Button } from "../ui/button";
+import { IconButton } from "../ui/icon-button";
 
 export const RightMenus = ({
-  rightButton
+  headerRightButtons,
+  renderedInRoute,
+  id,
+  onPressDefaultRightButton,
+  search,
+  onSearch
 }: {
-  rightButton?: IconButtonProps;
+  headerRightButtons?: HeaderRightButton[];
+  renderedInRoute?: RouteName;
+  id?: string;
+  onPressDefaultRightButton?: () => void;
+  search?: boolean;
+  onSearch?: () => void;
 }) => {
   const { colors } = useThemeColors();
+  const { colors: contextMenuColors } = useThemeColors("contextMenu");
+  const deviceMode = useSettingStore((state) => state.deviceMode);
+  const menuRef = useRef<Menu>(null);
 
   return (
     <View style={styles.rightBtnContainer}>
-      {rightButton ? (
-        <IconButton {...rightButton} color={colors.primary.icon} />
-      ) : (
-        <View
+      {search ? (
+        <IconButton
+          onPress={onSearch}
+          testID="icon-search"
+          name="magnify"
+          color={colors.primary.paragraph}
+          style={styles.rightBtn}
+        />
+      ) : null}
+
+      {deviceMode !== "mobile" ? (
+        <Button
+          onPress={onPressDefaultRightButton}
+          testID={notesnook.ids.default.addBtn}
+          icon={renderedInRoute === "Trash" ? "delete" : "plus"}
+          iconSize={SIZE.xl}
+          type="accent"
+          hitSlop={{
+            top: 10,
+            right: 10,
+            bottom: 10,
+            left: 0
+          }}
           style={{
-            width: 40,
-            height: 40
+            marginLeft: 10,
+            width: 32,
+            height: 32,
+            borderRadius: 100,
+            paddingHorizontal: 0,
+            borderWidth: 1,
+            borderColor: colors.primary.accent
           }}
         />
-      )}
+      ) : null}
+
+      {headerRightButtons && headerRightButtons.length > 0 ? (
+        <Menu
+          ref={menuRef}
+          animationDuration={200}
+          style={{
+            borderRadius: 5,
+            backgroundColor: contextMenuColors.primary.background,
+            marginTop: 35
+          }}
+          onRequestClose={() => {
+            //@ts-ignore
+            menuRef.current?.hide();
+          }}
+          anchor={
+            <IconButton
+              onPress={() => {
+                //@ts-ignore
+                menuRef.current?.show();
+              }}
+              name="dots-vertical"
+              color={colors.primary.paragraph}
+              style={styles.rightBtn}
+            />
+          }
+        >
+          {headerRightButtons.map((item) => (
+            <Button
+              style={{
+                justifyContent: "flex-start",
+                borderRadius: 0,
+                alignSelf: "flex-start",
+                width: "100%"
+              }}
+              type="plain"
+              buttonType={{
+                text: contextMenuColors.primary.paragraph
+              }}
+              key={item.title}
+              title={item.title}
+              onPress={async () => {
+                //@ts-ignore
+                menuRef.current?.hide();
+                if (Platform.OS === "ios") await sleep(300);
+                item.onPress();
+              }}
+            />
+          ))}
+        </Menu>
+      ) : null}
     </View>
   );
 };
@@ -52,6 +149,10 @@ const styles = StyleSheet.create({
   },
   rightBtn: {
     justifyContent: "center",
-    alignItems: "center"
+    alignItems: "center",
+    height: 40,
+    width: 40,
+    marginLeft: 10,
+    paddingRight: 0
   }
 });

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

@@ -25,7 +25,7 @@ import {
   eUnSubscribeEvent
 } from "../../services/event-manager";
 import { eScrollEvent } from "../../utils/events";
-import { AppFontSize } from "../../utils/size";
+import { SIZE } from "../../utils/size";
 import Tag from "../ui/tag";
 import Heading from "../ui/typography/heading";
 
@@ -75,7 +75,7 @@ export const Title = ({
       {!visible ? (
         <Heading
           numberOfLines={1}
-          size={AppFontSize.lg}
+          size={SIZE.lg}
           style={{
             flexWrap: "wrap",
             marginTop: Platform.OS === "ios" ? -1 : 0
@@ -83,7 +83,7 @@ export const Title = ({
           color={accentColor || colors.primary.heading}
         >
           {isTag ? (
-            <Heading size={AppFontSize.xl} color={colors.primary.accent}>
+            <Heading size={SIZE.xl} color={colors.primary.accent}>
               #
             </Heading>
           ) : null}

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

@@ -38,7 +38,6 @@ import RNFetchBlob from "react-native-blob-util";
 import Share from "react-native-share";
 import useGlobalSafeAreaInsets from "../../hooks/use-global-safe-area-insets";
 import { useSettingStore } from "../../stores/use-setting-store";
-import { DefaultAppStyles } from "../../utils/styles";
 
 const ImagePreview = () => {
   const { colors } = useThemeColors("dialog");
@@ -125,7 +124,7 @@ const ImagePreview = () => {
             justifyContent: "flex-end",
             alignItems: "center",
             height: 50,
-            paddingHorizontal: DefaultAppStyles.GAP,
+            paddingHorizontal: 12,
             gap: 10
           }}
         >

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

@@ -23,28 +23,31 @@ import React from "react";
 import { Linking, ScrollView, useWindowDimensions, View } from "react-native";
 import { SwiperFlatList } from "react-native-swiper-flatlist";
 import useGlobalSafeAreaInsets from "../../hooks/use-global-safe-area-insets";
+import { eSendEvent } from "../../services/event-manager";
 import Navigation from "../../services/navigation";
-import { AppFontSize } from "../../utils/size";
+import SettingsService from "../../services/settings";
+import { useSettingStore } from "../../stores/use-setting-store";
+import { getElevationStyle } from "../../utils/elevation";
+import { eOpenLoginDialog } from "../../utils/events";
+import { SIZE } from "../../utils/size";
+import { AuthMode } from "../auth";
 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";
 
-const Intro = () => {
+const Intro = ({ navigation }) => {
   const { colors } = useThemeColors();
   const { width, height } = useWindowDimensions();
+  const deviceMode = useSettingStore((state) => state.deviceMode);
   const insets = useGlobalSafeAreaInsets();
-  const isTablet = width > 600;
-
   const renderItem = React.useCallback(
-    ({ item }: { item: (typeof strings.introData)[0] }) => (
+    ({ item }) => (
       <View
         style={{
           justifyContent: "center",
-          width: isTablet ? width / 2 : width,
-          paddingHorizontal: isTablet ? (width / 2) * 0.05 : width * 0.05
+          width: deviceMode !== "mobile" ? width / 2 : width,
+          paddingHorizontal:
+            deviceMode !== "mobile" ? (width / 2) * 0.05 : width * 0.05
         }}
       >
         <View
@@ -73,7 +76,7 @@ const Intro = () => {
         </View>
         <View
           style={{
-            marginTop: DefaultAppStyles.GAP_VERTICAL,
+            marginTop: 10,
             maxWidth: "90%",
             width: "100%"
           }}
@@ -85,21 +88,21 @@ const Intro = () => {
                 marginBottom: 5
               }}
               extraBold
-              size={AppFontSize.xxl}
+              size={SIZE.xxl}
             >
               {heading()}
             </Heading>
           ))}
 
           {item.body ? (
-            <Paragraph size={AppFontSize.sm}>{item.body()}</Paragraph>
+            <Paragraph size={SIZE.sm}>{item.body()}</Paragraph>
           ) : null}
 
           {item.tesimonial ? (
             <Paragraph
               style={{
                 fontStyle: "italic",
-                fontSize: AppFontSize.lg
+                fontSize: SIZE.lg
               }}
               onPress={() => {
                 Linking.openURL(item.link);
@@ -111,37 +114,31 @@ const Intro = () => {
         </View>
       </View>
     ),
-    [colors.primary.accent, colors.secondary.background, isTablet, width]
+    [colors.primary.accent, colors.secondary.background, deviceMode, width]
   );
 
   return (
     <ScrollView
       testID="notesnook.splashscreen"
       style={{
-        width: "100%",
-        backgroundColor: colors.primary.background
+        width: "100%"
       }}
     >
       <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
-          }
-        ]}
+        style={{
+          width: deviceMode !== "mobile" ? width / 2 : "100%",
+          backgroundColor: colors.secondary.background,
+          borderBottomWidth: 1,
+          borderBottomColor: colors.primary.border,
+          alignSelf: deviceMode !== "mobile" ? "center" : undefined,
+          borderWidth: deviceMode !== "mobile" ? 1 : null,
+          borderColor: deviceMode !== "mobile" ? colors.primary.border : null,
+          borderRadius: deviceMode !== "mobile" ? 20 : null,
+          marginTop: deviceMode !== "mobile" ? 50 : null,
+          paddingTop: insets.top + 10,
+          paddingBottom: insets.top + 10,
+          minHeight: height * 0.7 - (insets.top + insets.bottom)
+        }}
       >
         <SwiperFlatList
           autoplay
@@ -173,12 +170,23 @@ const Intro = () => {
         <Button
           width={250}
           onPress={async () => {
-            SettingsService.set({ introCompleted: true });
-            Navigation.push("Auth", {
-              mode: AuthMode.welcomeSignup
-            });
+            eSendEvent(eOpenLoginDialog, AuthMode.welcomeSignup);
+            setTimeout(() => {
+              SettingsService.set({
+                introCompleted: true
+              });
+              Navigation.replace("Notes", {
+                canGoBack: false
+              });
+            }, 1000);
           }}
-          fontSize={AppFontSize.md}
+          style={{
+            paddingHorizontal: 24,
+            alignSelf: "center",
+            ...getElevationStyle(5),
+            borderRadius: 100
+          }}
+          fontSize={SIZE.md}
           type="accent"
           title={strings.getStarted()}
         />

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

@@ -24,13 +24,12 @@ import { useMessageStore } from "../../../stores/use-message-store";
 import { useSelectionStore } from "../../../stores/use-selection-store";
 import { Announcement } from "../../announcements/announcement";
 import { Card } from "../../list/card";
-import { RouteParams } from "../../../stores/use-navigation-store";
 
 export type ListHeaderProps = {
   noAnnouncement?: boolean;
   color?: string;
   messageCard?: boolean;
-  screen?: keyof RouteParams;
+  screen?: string;
   shouldShow?: boolean;
 };
 
@@ -51,11 +50,19 @@ export const Header = React.memo(
         {announcements.length !== 0 && !noAnnouncement ? (
           <Announcement color={color || colors.primary.accent} />
         ) : (screen as any) === "Search" ? null : !shouldShow ? (
-          <>
+          <View
+            style={{
+              marginBottom: 5,
+              padding: 0,
+              width: "100%",
+              justifyContent: "center",
+              alignItems: "center"
+            }}
+          >
             {messageCard ? (
               <Card color={color || colors.primary.accent} />
             ) : null}
-          </>
+          </View>
         ) : null}
       </>
     );

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

@@ -17,115 +17,140 @@ 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 { getFormattedDate } from "@notesnook/common";
 import { Notebook } from "@notesnook/core";
-import { strings } from "@notesnook/intl";
 import { useThemeColors } from "@notesnook/theme";
-import React from "react";
+import React, { useState } from "react";
 import { View } from "react-native";
-import { AppFontSize } from "../../../utils/size";
-import { DefaultAppStyles } from "../../../utils/styles";
-import AppIcon from "../../ui/AppIcon";
+import { db } from "../../../common/database";
+import { ToastManager } from "../../../services/event-manager";
+import { useMenuStore } from "../../../stores/use-menu-store";
+import { SIZE } from "../../../utils/size";
+import { IconButton } from "../../ui/icon-button";
 import Heading from "../../ui/typography/heading";
 import Paragraph from "../../ui/typography/paragraph";
-import { IconButton } from "../../ui/icon-button";
-import { Pressable } from "../../ui/pressable";
-import NotebookScreen from "../../../screens/notebook";
-import { db } from "../../../common/database";
+import { getFormattedDate } from "@notesnook/common";
+import { strings } from "@notesnook/intl";
 
 export const NotebookHeader = ({
   notebook,
-  totalNotes = 0,
-  breadcrumbs
+  onEditNotebook,
+  totalNotes = 0
 }: {
   notebook: Notebook;
+  onEditNotebook: () => void;
   totalNotes: number;
-  breadcrumbs: { id: string; title: string }[];
 }) => {
   const { colors } = useThemeColors();
+  const [isPinnedToMenu, setIsPinnedToMenu] = useState(
+    db.shortcuts.exists(notebook.id)
+  );
+  const setMenuPins = useMenuStore((state) => state.setMenuPins);
+
+  const onPinNotebook = async () => {
+    try {
+      if (isPinnedToMenu) {
+        await db.shortcuts.remove(notebook.id);
+      } else {
+        await db.shortcuts.add({
+          item: {
+            id: notebook.id,
+            type: "notebook"
+          }
+        });
+        ToastManager.show({
+          heading: strings.shortcutCreated(),
+          type: "success"
+        });
+      }
+      setIsPinnedToMenu(db.shortcuts.exists(notebook.id));
+      setMenuPins();
+    } catch (e) {
+      console.error(e);
+    }
+  };
+
   return (
     <View
       style={{
-        paddingHorizontal: DefaultAppStyles.GAP,
-        marginTop: DefaultAppStyles.GAP,
-        backgroundColor: colors.secondary.background
+        marginBottom: 5,
+        padding: 0,
+        width: "100%",
+        paddingVertical: 15,
+        paddingHorizontal: 12,
+        alignSelf: "center",
+        borderRadius: 10,
+        paddingTop: 25
       }}
     >
+      <Paragraph color={colors.secondary.paragraph} size={SIZE.xs}>
+        {getFormattedDate(notebook.dateModified, "date-time")}
+      </Paragraph>
       <View
         style={{
-          width: "100%",
-          gap: DefaultAppStyles.GAP_VERTICAL,
-          paddingVertical: DefaultAppStyles.GAP
+          flexDirection: "row",
+          justifyContent: "space-between",
+          alignItems: "center"
         }}
       >
-        {breadcrumbs && breadcrumbs.length > 0 ? (
-          <View
-            style={{
-              width: "100%",
-              flexDirection: "row",
-              alignItems: "center",
-              flexWrap: "wrap",
-              paddingBottom: DefaultAppStyles.GAP_VERTICAL_SMALL
-            }}
-          >
-            {breadcrumbs.map((item, index) => (
-              <Pressable
-                onPress={async () => {
-                  const notebook = await db.notebooks.notebook(item.id);
-                  if (!notebook) return;
-                  NotebookScreen.navigate(notebook, true);
-                }}
-                key={item.id}
-                style={{
-                  width: undefined,
-                  flexDirection: "row",
-                  paddingHorizontal: 0,
-                  alignItems: "center"
-                }}
-              >
-                {index === 0 ? null : (
-                  <IconButton
-                    name="chevron-right"
-                    size={16}
-                    top={0}
-                    left={0}
-                    right={0}
-                    bottom={0}
-                    style={{ width: 20, height: 25 }}
-                  />
-                )}
-                <Paragraph size={AppFontSize.xs}>{item.title}</Paragraph>
-              </Pressable>
-            ))}
-          </View>
-        ) : null}
-
-        <AppIcon name="notebook" size={AppFontSize.xxl} />
-
-        <View>
-          <Heading size={AppFontSize.lg}>{notebook.title}</Heading>
-          {notebook.description ? (
-            <Paragraph size={AppFontSize.sm} color={colors.primary.paragraph}>
-              {notebook.description}
-            </Paragraph>
-          ) : null}
-        </View>
+        <Heading
+          style={{
+            flexShrink: 1
+          }}
+          size={SIZE.lg}
+        >
+          {notebook.title}
+        </Heading>
 
         <View
           style={{
-            flexDirection: "row",
-            gap: DefaultAppStyles.GAP_SMALL
+            flexDirection: "row"
           }}
         >
-          <Paragraph size={AppFontSize.xxs} color={colors.secondary.paragraph}>
-            {strings.notes(totalNotes || 0)}
-          </Paragraph>
-
-          <Paragraph color={colors.secondary.paragraph} size={AppFontSize.xxs}>
-            {getFormattedDate(notebook.dateModified, "date-time")}
-          </Paragraph>
+          <IconButton
+            name={isPinnedToMenu ? "link-variant-off" : "link-variant"}
+            onPress={onPinNotebook}
+            tooltipText={"Create shortcut in side menu"}
+            style={{
+              marginRight: 15,
+              width: 40,
+              height: 40
+            }}
+            type="transparent"
+            color={isPinnedToMenu ? colors.primary.accent : colors.primary.icon}
+            size={SIZE.lg}
+          />
+          <IconButton
+            size={SIZE.lg}
+            onPress={onEditNotebook}
+            tooltipText="Edit this notebook"
+            name="pencil"
+            type="transparent"
+            color={colors.primary.icon}
+            style={{
+              width: 40,
+              height: 40
+            }}
+          />
         </View>
       </View>
+
+      {notebook.description ? (
+        <Paragraph size={SIZE.sm} color={colors.primary.paragraph}>
+          {notebook.description}
+        </Paragraph>
+      ) : null}
+
+      <Paragraph
+        style={{
+          marginTop: 10,
+          fontStyle: "italic",
+          fontFamily: undefined
+        }}
+        size={SIZE.xs}
+        color={colors.secondary.paragraph}
+      >
+        {strings.notes(totalNotes || 0)}
+      </Paragraph>
     </View>
   );
 };

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

@@ -21,16 +21,16 @@ import { GroupHeader, GroupOptions, ItemType } from "@notesnook/core";
 import { strings } from "@notesnook/intl";
 import { useThemeColors } from "@notesnook/theme";
 import React from "react";
-import { View } from "react-native";
+import { TouchableOpacity, View, useWindowDimensions } from "react-native";
 import { useIsCompactModeEnabled } from "../../../hooks/use-is-compact-mode-enabled";
 import { presentSheet } from "../../../services/event-manager";
 import SettingsService from "../../../services/settings";
 import { RouteName } from "../../../stores/use-navigation-store";
-import { AppFontSize } from "../../../utils/size";
-import { DefaultAppStyles } from "../../../utils/styles";
+import { getContainerBorder } from "../../../utils/colors";
+import { SIZE } from "../../../utils/size";
 import Sort from "../../sheets/sort";
+import { Button } from "../../ui/button";
 import { IconButton } from "../../ui/icon-button";
-import { Pressable } from "../../ui/pressable";
 import Heading from "../../ui/typography/heading";
 
 type SectionHeaderProps = {
@@ -56,6 +56,8 @@ export const SectionHeader = React.memo<
     onOpenJumpToDialog
   }: SectionHeaderProps) {
     const { colors } = useThemeColors();
+    const { fontScale } = useWindowDimensions();
+    const groupBy = strings.groupByStrings[groupOptions.groupBy]();
     const isCompactModeEnabled = useIsCompactModeEnabled(
       dataType as "note" | "notebook"
     );
@@ -63,126 +65,104 @@ export const SectionHeader = React.memo<
     return (
       <View
         style={{
-          width: "100%",
-          paddingHorizontal: DefaultAppStyles.GAP,
-          marginBottom: DefaultAppStyles.GAP_VERTICAL
+          flexDirection: "row",
+          alignItems: "center",
+          width: "95%",
+          justifyContent: "space-between",
+          paddingHorizontal: 12,
+          height: 35 * fontScale,
+          backgroundColor: colors.secondary.background,
+          alignSelf: "center",
+          borderRadius: 5,
+          marginVertical: 5,
+          ...getContainerBorder(colors.secondary.background, 0.8)
         }}
       >
+        <TouchableOpacity
+          onPress={() => {
+            onOpenJumpToDialog();
+          }}
+          activeOpacity={0.9}
+          hitSlop={{ top: 10, left: 10, right: 30, bottom: 15 }}
+          style={{
+            height: "100%",
+            justifyContent: "center"
+          }}
+        >
+          <Heading
+            color={color || colors.primary.accent}
+            size={SIZE.sm}
+            style={{
+              alignSelf: "center",
+              textAlignVertical: "center"
+            }}
+          >
+            {!item.title || item.title === "" ? strings.pinned() : item.title}
+          </Heading>
+        </TouchableOpacity>
+
         <View
           style={{
             flexDirection: "row",
-            alignItems: "center",
-            width: "100%",
-            alignSelf: "center",
-            justifyContent: "space-between",
-            borderBottomWidth: 1,
-            borderColor: colors.primary.border,
-            paddingBottom: 1,
-            paddingTop:
-              index === 0
-                ? DefaultAppStyles.GAP_VERTICAL
-                : DefaultAppStyles.GAP_VERTICAL_SMALL
+            alignItems: "center"
           }}
         >
-          <Pressable
-            onPress={() => {
-              onOpenJumpToDialog();
-            }}
-            hitSlop={{ top: 10, left: 10, right: 30, bottom: 15 }}
-            style={{
-              justifyContent: "flex-start",
-              flexDirection: "row",
-              width: "auto"
-            }}
-          >
-            <Heading
-              size={AppFontSize.xxs}
-              style={{
-                alignSelf: "center",
-                textAlignVertical: "center"
-              }}
-              color={color || colors.primary.accent}
-            >
-              {!item.title || item.title === ""
-                ? strings.pinned().toUpperCase()
-                : item.title.toUpperCase()}
-            </Heading>
-          </Pressable>
+          {index === 0 ? (
+            <>
+              <Button
+                onPress={() => {
+                  presentSheet({
+                    component: <Sort screen={screen} type={dataType} />
+                  });
+                }}
+                title={groupBy}
+                icon={
+                  groupOptions.sortDirection === "asc"
+                    ? "sort-ascending"
+                    : "sort-descending"
+                }
+                height={25}
+                style={{
+                  borderRadius: 100,
+                  paddingHorizontal: 0,
+                  backgroundColor: "transparent",
+                  marginRight:
+                    dataType === "note" ||
+                    screen === "Notes" ||
+                    dataType === "notebook"
+                      ? 10
+                      : 0
+                }}
+                type="plain"
+                iconPosition="right"
+              />
 
-          <View
-            style={{
-              flexDirection: "row",
-              alignItems: "center",
-              gap: DefaultAppStyles.GAP_SMALL
-            }}
-          >
-            {index === 0 ? (
-              <>
-                <IconButton
-                  name={
-                    groupOptions.sortDirection === "asc"
-                      ? "sort-ascending"
-                      : "sort-descending"
-                  }
-                  color={colors.secondary.icon}
-                  testID="icon-sort"
-                  onPress={() => {
-                    if (!screen) return;
-                    presentSheet({
-                      component: (
-                        <Sort
-                          screen={screen}
-                          type={dataType}
-                          hideGroupOptions={screen === "Reminders"}
-                        />
-                      )
-                    });
-                  }}
-                  style={{
-                    width: 25,
-                    height: 25
-                  }}
-                  size={AppFontSize.lg - 2}
-                />
-                <IconButton
-                  hidden={
-                    dataType !== "note" &&
-                    dataType !== "notebook" &&
-                    screen !== "Notes"
-                  }
-                  style={{
-                    width: 25,
-                    height: 25
-                  }}
-                  testID="icon-compact-mode"
-                  color={colors.secondary.icon}
-                  name={
-                    isCompactModeEnabled ? "view-list" : "view-list-outline"
-                  }
-                  onPress={() => {
-                    SettingsService.set({
-                      [dataType !== "notebook"
-                        ? "notesListMode"
-                        : "notebooksListMode"]: !isCompactModeEnabled
-                        ? "compact"
-                        : "normal"
-                    });
-                  }}
-                  size={AppFontSize.lg - 2}
-                />
-              </>
-            ) : null}
-
-            {/* <IconButton
-              style={{
-                width: 25,
-                height: 25
-              }}
-              color={colors.secondary.icon}
-              name={"chevron-down"}
-              size={SIZE.lg - 2}
-            /> */}
-          </View>
+              <IconButton
+                style={{
+                  width: 25,
+                  height: 25
+                }}
+                hidden={
+                  dataType !== "note" &&
+                  dataType !== "notebook" &&
+                  screen !== "Notes"
+                }
+                testID="icon-compact-mode"
+                color={colors.secondary.icon}
+                name={isCompactModeEnabled ? "view-list" : "view-list-outline"}
+                onPress={() => {
+                  SettingsService.set({
+                    [dataType !== "notebook"
+                      ? "notesListMode"
+                      : "notebooksListMode"]: !isCompactModeEnabled
+                      ? "compact"
+                      : "normal"
+                  });
+                }}
+                size={SIZE.lg - 2}
+              />
+            </>
+          ) : null}
         </View>
       </View>
     );

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

@@ -29,32 +29,24 @@ import { EntityLevel, decode } from "entities";
 import React from "react";
 import { View } from "react-native";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
-import { useIsCompactModeEnabled } from "../../../hooks/use-is-compact-mode-enabled";
-import useNavigationStore, {
-  RouteParams
-} from "../../../stores/use-navigation-store";
-import { useRelationStore } from "../../../stores/use-relation-store";
-import { AppFontSize } from "../../../utils/size";
-
-import {
-  getFormattedDate,
-  NotebooksWithDateEdited,
-  TagsWithDateEdited
-} from "@notesnook/common";
-import { strings } from "@notesnook/intl";
 import { notesnook } from "../../../../e2e/test.ids";
-import useIsSelected from "../../../hooks/use-selected";
+import { useIsCompactModeEnabled } from "../../../hooks/use-is-compact-mode-enabled";
+import NotebookScreen from "../../../screens/notebook";
+import { TaggedNotes } from "../../../screens/notes/tagged";
+import useNavigationStore from "../../../stores/use-navigation-store";
+import { useRelationStore } from "../../../stores/use-relation-store";
+import { SIZE } from "../../../utils/size";
+
 import { useTabStore } from "../../../screens/editor/tiptap/use-tab-store";
-import { useSelectionStore } from "../../../stores/use-selection-store";
-import { DefaultAppStyles } from "../../../utils/styles";
+import { NotebooksWithDateEdited, TagsWithDateEdited } from "@notesnook/common";
 import { Properties } from "../../properties";
-import AppIcon from "../../ui/AppIcon";
+import { Button } from "../../ui/button";
 import { IconButton } from "../../ui/icon-button";
 import { ReminderTime } from "../../ui/reminder-time";
 import { TimeSince } from "../../ui/time-since";
 import Heading from "../../ui/typography/heading";
 import Paragraph from "../../ui/typography/paragraph";
-import dayjs from "dayjs";
+import { strings } from "@notesnook/intl";
 
 type NoteItemProps = {
   item: Note | BaseTrashItem<Note>;
@@ -68,7 +60,6 @@ type NoteItemProps = {
   isTrash?: boolean;
   noOpen?: boolean;
   locked?: boolean;
-  renderedInRoute?: keyof RouteParams;
 };
 
 const NoteItem = ({
@@ -81,13 +72,11 @@ const NoteItem = ({
   tags,
   attachmentsCount,
   locked,
-  noOpen = false,
-  renderedInRoute
+  noOpen = false
 }: NoteItemProps) => {
   const isEditingNote = useTabStore(
     (state) =>
-      state.tabs.find((t) => t.id === state.currentTab)?.session?.noteId ===
-      item.id
+      state.tabs.find((t) => t.id === state.currentTab)?.noteId === item.id
   );
   const { colors } = useThemeColors();
   const compactMode = useIsCompactModeEnabled(
@@ -95,8 +84,7 @@ const NoteItem = ({
   );
   const _update = useRelationStore((state) => state.updater);
   const primaryColors = isEditingNote ? colors.selected : colors.primary;
-  const selectionMode = useSelectionStore((state) => state.selectionMode);
-  const [selected] = useIsSelected(item);
+
   return (
     <>
       <View
@@ -105,27 +93,69 @@ const NoteItem = ({
           flexShrink: 1
         }}
       >
-        {compactMode ? null : (
-          <Paragraph
+        {!compactMode ? (
+          <View
             style={{
-              fontSize: AppFontSize.xxxs,
-              color: colors.secondary.paragraph
+              flexDirection: "row",
+              alignItems: "center",
+              zIndex: 10,
+              elevation: 10,
+              marginBottom: 2.5,
+              flexWrap: "wrap"
             }}
           >
-            {getFormattedDate(
-              date,
-              dayjs(date).isBefore(dayjs().subtract(1, "day").hour(23))
-                ? "date"
-                : "time"
-            )}
-          </Paragraph>
-        )}
+            {notebooks?.items
+              ?.filter(
+                (item) =>
+                  item.id !== useNavigationStore.getState().focusedRouteId
+              )
+              .map((item) => (
+                <Button
+                  title={
+                    item.title.length > 25
+                      ? item.title.slice(0, 25) + "..."
+                      : item.title
+                  }
+                  tooltipText={item.title}
+                  key={item.id}
+                  height={25}
+                  icon="book-outline"
+                  type="secondary"
+                  fontSize={SIZE.xs}
+                  iconSize={SIZE.sm}
+                  textStyle={{
+                    marginRight: 0
+                  }}
+                  style={{
+                    borderRadius: 5,
+                    marginRight: 5,
+                    paddingHorizontal: 6,
+                    marginBottom: 5
+                  }}
+                  onPress={() => {
+                    NotebookScreen.navigate(item, true);
+                  }}
+                />
+              ))}
+
+            <ReminderTime
+              reminder={reminder}
+              color={color?.colorCode}
+              onPress={() => {
+                Properties.present(reminder);
+              }}
+              style={{
+                height: 25
+              }}
+            />
+          </View>
+        ) : null}
 
         {compactMode ? (
           <Paragraph
             numberOfLines={1}
             color={color?.colorCode || primaryColors.heading}
-            size={AppFontSize.sm}
+            size={SIZE.sm}
             style={{
               paddingRight: 10
             }}
@@ -136,7 +166,7 @@ const NoteItem = ({
           <Heading
             numberOfLines={1}
             color={color?.colorCode || primaryColors.heading}
-            size={AppFontSize.sm}
+            size={SIZE.md}
             style={{
               paddingRight: 10
             }}
@@ -166,10 +196,8 @@ const NoteItem = ({
               justifyContent: "flex-start",
               alignItems: "center",
               width: "100%",
-              marginTop: DefaultAppStyles.GAP_VERTICAL_SMALL,
-              columnGap: 8,
-              rowGap: 4,
-              flexWrap: "wrap"
+              marginTop: 5,
+              height: SIZE.md + 2
             }}
           >
             {!isTrash ? (
@@ -177,7 +205,10 @@ const NoteItem = ({
                 {item.conflicted ? (
                   <Icon
                     name="alert-circle"
-                    size={AppFontSize.sm}
+                    style={{
+                      marginRight: 6
+                    }}
+                    size={SIZE.sm}
                     color={colors.error.accent}
                   />
                 ) : null}
@@ -186,7 +217,10 @@ const NoteItem = ({
                   <Icon
                     testID="sync-off"
                     name="sync-off"
-                    size={AppFontSize.sm}
+                    size={SIZE.sm}
+                    style={{
+                      marginRight: 6
+                    }}
                     color={primaryColors.icon}
                   />
                 ) : null}
@@ -195,27 +229,41 @@ const NoteItem = ({
                   <Icon
                     testID="pencil-lock"
                     name="pencil-lock"
-                    size={AppFontSize.sm}
+                    size={SIZE.sm}
+                    style={{
+                      marginRight: 6
+                    }}
                     color={primaryColors.icon}
                   />
                 ) : null}
 
+                <TimeSince
+                  style={{
+                    fontSize: SIZE.xs,
+                    color: colors.secondary.paragraph,
+                    marginRight: 6
+                  }}
+                  time={date}
+                  updateFrequency={Date.now() - date < 60000 ? 2000 : 60000}
+                />
+
                 {attachmentsCount > 0 ? (
                   <View
                     style={{
                       flexDirection: "row",
                       alignItems: "center",
+                      marginRight: 6,
                       gap: 2
                     }}
                   >
                     <Icon
                       name="attachment"
-                      size={AppFontSize.sm}
+                      size={SIZE.sm}
                       color={primaryColors.icon}
                     />
                     <Paragraph
                       color={colors.secondary.paragraph}
-                      size={AppFontSize.xxs}
+                      size={SIZE.xs}
                     >
                       {attachmentsCount}
                     </Paragraph>
@@ -226,7 +274,10 @@ const NoteItem = ({
                   <Icon
                     testID="icon-pinned"
                     name="pin-outline"
-                    size={AppFontSize.sm}
+                    size={SIZE.sm}
+                    style={{
+                      marginRight: 6
+                    }}
                     color={color?.colorCode || primaryColors.accent}
                   />
                 ) : null}
@@ -235,7 +286,10 @@ const NoteItem = ({
                   <Icon
                     name="lock"
                     testID="note-locked-icon"
-                    size={AppFontSize.sm}
+                    size={SIZE.sm}
+                    style={{
+                      marginRight: 6
+                    }}
                     color={primaryColors.icon}
                   />
                 ) : null}
@@ -244,83 +298,37 @@ const NoteItem = ({
                   <Icon
                     testID="icon-star"
                     name="star-outline"
-                    size={AppFontSize.sm}
+                    size={SIZE.sm}
+                    style={{
+                      marginRight: 6
+                    }}
                     color="orange"
                   />
                 ) : null}
 
-                {reminder ? (
-                  <ReminderTime
-                    reminder={reminder}
-                    disabled
-                    color={color?.colorCode}
-                    textStyle={{
-                      fontSize: AppFontSize.xxxs
-                    }}
-                    iconSize={AppFontSize.xxxs}
-                    style={{
-                      height: "auto"
-                    }}
-                  />
-                ) : null}
-
-                {notebooks?.items
-                  ?.filter(
-                    (item) =>
-                      renderedInRoute !== "Notebook" ||
-                      item.id !== useNavigationStore.getState().focusedRouteId
-                  )
-                  .map((item) => (
-                    <View
-                      key={item.id}
-                      style={{
-                        borderRadius: 4,
-                        backgroundColor: colors.secondary.background,
-                        paddingHorizontal: DefaultAppStyles.GAP_SMALL / 2,
-                        borderWidth: 0.5,
-                        borderColor: primaryColors.border,
-                        paddingVertical: 1,
-                        flexDirection: "row",
-                        alignItems: "center",
-                        gap: DefaultAppStyles.GAP_SMALL / 2
-                      }}
-                    >
-                      <AppIcon
-                        name="book-outline"
-                        size={AppFontSize.xxxs}
-                        color={colors.secondary.icon}
-                      />
-                      <Paragraph
-                        size={AppFontSize.xxxs}
-                        color={colors.secondary.paragraph}
-                      >
-                        {item.title}
-                      </Paragraph>
-                    </View>
-                  ))}
-
                 {!isTrash && !compactMode && tags
                   ? tags.items?.map((item) =>
                       item.id ? (
-                        <View
+                        <Button
+                          title={"#" + item.title}
                           key={item.id}
-                          style={{
-                            borderRadius: 4,
-                            backgroundColor: colors.secondary.background,
-                            paddingHorizontal: DefaultAppStyles.GAP_SMALL / 2,
-                            borderWidth: 0.5,
-                            borderColor:
-                              color?.colorCode || primaryColors.border,
-                            paddingVertical: 1
+                          height={23}
+                          type="plain"
+                          textStyle={{
+                            textDecorationLine: "underline",
+                            color: colors.secondary.paragraph
                           }}
-                        >
-                          <Paragraph
-                            size={AppFontSize.xxxs}
-                            color={colors.secondary.paragraph}
-                          >
-                            #{item.title}
-                          </Paragraph>
-                        </View>
+                          hitSlop={{ top: 8, bottom: 12, left: 0, right: 0 }}
+                          fontSize={SIZE.xs}
+                          style={{
+                            borderRadius: 5,
+                            paddingHorizontal: 6,
+                            marginRight: 4,
+                            zIndex: 10,
+                            maxWidth: tags.items?.length > 1 ? 130 : null
+                          }}
+                          onPress={() => TaggedNotes.navigate(item, true)}
+                        />
                       ) : null
                     )
                   : null}
@@ -329,7 +337,7 @@ const NoteItem = ({
               <>
                 <Paragraph
                   color={colors.secondary.paragraph}
-                  size={AppFontSize.xxs}
+                  size={SIZE.xs}
                   style={{
                     marginRight: 6
                   }}
@@ -343,7 +351,7 @@ const NoteItem = ({
 
                 <Paragraph
                   color={primaryColors.accent}
-                  size={AppFontSize.xxs}
+                  size={SIZE.xs}
                   style={{
                     marginRight: 6
                   }}
@@ -369,7 +377,7 @@ const NoteItem = ({
                 style={{
                   marginRight: 6
                 }}
-                size={AppFontSize.sm}
+                size={SIZE.sm}
                 color={colors.error.accent}
               />
             ) : null}
@@ -378,11 +386,11 @@ const NoteItem = ({
               <Icon
                 name="lock"
                 testID="note-locked-icon"
-                size={AppFontSize.sm}
+                size={SIZE.sm}
                 style={{
                   marginRight: 6
                 }}
-                color={primaryColors.icon}
+                color={colors.secondary.background}
               />
             ) : null}
 
@@ -390,17 +398,17 @@ const NoteItem = ({
               <Icon
                 testID="icon-star"
                 name="star-outline"
-                size={AppFontSize.sm}
+                size={SIZE.sm}
                 style={{
                   marginRight: 6
                 }}
-                color={colors.static.orange}
+                color="orange"
               />
             ) : null}
 
             <TimeSince
               style={{
-                fontSize: AppFontSize.xxs,
+                fontSize: SIZE.xs,
                 color: colors.secondary.paragraph,
                 marginRight: 6
               }}
@@ -410,39 +418,20 @@ const NoteItem = ({
           </>
         ) : null}
 
-        {selectionMode === "note" || selectionMode === "trash" ? (
-          <>
-            <View
-              style={{
-                height: 35,
-                width: 35,
-                alignItems: "center",
-                justifyContent: "center"
-              }}
-            >
-              <AppIcon
-                name={selected ? "checkbox-outline" : "checkbox-blank-outline"}
-                color={selected ? colors.selected.icon : colors.primary.icon}
-                size={AppFontSize.lg}
-              />
-            </View>
-          </>
-        ) : (
-          <IconButton
-            testID={notesnook.listitem.menu}
-            color={colors.secondary.icon}
-            name="dots-horizontal"
-            size={AppFontSize.lg}
-            onPress={() => !noOpen && Properties.present(item)}
-            style={{
-              justifyContent: "center",
-              height: 35,
-              width: 35,
-              borderRadius: 100,
-              alignItems: "center"
-            }}
-          />
-        )}
+        <IconButton
+          testID={notesnook.listitem.menu}
+          color={primaryColors.paragraph}
+          name="dots-horizontal"
+          size={SIZE.xl}
+          onPress={() => !noOpen && Properties.present(item)}
+          style={{
+            justifyContent: "center",
+            height: 35,
+            width: 35,
+            borderRadius: 100,
+            alignItems: "center"
+          }}
+        />
       </View>
     </>
   );

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

@@ -29,12 +29,11 @@ import {
   presentSheet
 } from "../../../services/event-manager";
 import { eOnLoadNote, eShowMergeDialog } from "../../../utils/events";
-import { fluidTabsRef } from "../../../utils/global-refs";
+import { tabBarRef } from "../../../utils/global-refs";
 
 import { NotebooksWithDateEdited, TagsWithDateEdited } from "@notesnook/common";
 import NotePreview from "../../note-history/preview";
 import SelectionWrapper, { selectItem } from "../selection-wrapper";
-import { RouteParams } from "../../../stores/use-navigation-store";
 
 export const openNote = async (
   item: Note,
@@ -67,7 +66,7 @@ export const openNote = async (
       item: note
     });
     if (!DDS.isTab) {
-      fluidTabsRef.current?.goToPage("editor");
+      tabBarRef.current?.goToPage(1);
     }
   }
 };
@@ -83,7 +82,6 @@ type NoteWrapperProps = {
   date: number;
   isRenderedInActionSheet: boolean;
   locked?: boolean;
-  renderedInRoute?: keyof RouteParams;
 };
 
 export const NoteWrapper = React.memo<
@@ -103,7 +101,6 @@ export const NoteWrapper = React.memo<
         onPress={() => openNote(item as Note, isTrash, isRenderedInActionSheet)}
         isSheet={isRenderedInActionSheet}
         item={item}
-        index={index}
         color={restProps.color?.colorCode}
       >
         <NoteItem {...restProps} item={item} index={index} isTrash={isTrash} />

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

@@ -19,22 +19,18 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import { getFormattedDate } from "@notesnook/common";
 import { BaseTrashItem, Notebook, TrashItem } from "@notesnook/core";
-import { strings } from "@notesnook/intl";
 import { useThemeColors } from "@notesnook/theme";
 import React from "react";
 import { View } from "react-native";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { notesnook } from "../../../../e2e/test.ids";
 import { useIsCompactModeEnabled } from "../../../hooks/use-is-compact-mode-enabled";
-import useIsSelected from "../../../hooks/use-selected";
-import { useSelectionStore } from "../../../stores/use-selection-store";
-import { AppFontSize } from "../../../utils/size";
+import { SIZE } from "../../../utils/size";
 import { Properties } from "../../properties";
-import AppIcon from "../../ui/AppIcon";
 import { IconButton } from "../../ui/icon-button";
 import Heading from "../../ui/typography/heading";
 import Paragraph from "../../ui/typography/paragraph";
-import { DefaultAppStyles } from "../../../utils/styles";
+import { strings } from "@notesnook/intl";
 
 type NotebookItemProps = {
   item: Notebook | BaseTrashItem<Notebook>;
@@ -54,8 +50,6 @@ export const NotebookItem = ({
   const compactMode = useIsCompactModeEnabled(
     (item as TrashItem).itemType || item.type
   );
-  const selectionMode = useSelectionStore((state) => state.selectionMode);
-  const [selected] = useIsSelected(item);
 
   return (
     <>
@@ -67,7 +61,7 @@ export const NotebookItem = ({
       >
         {compactMode ? (
           <Paragraph
-            size={AppFontSize.sm}
+            size={SIZE.sm}
             numberOfLines={1}
             style={{
               flexWrap: "wrap"
@@ -77,7 +71,7 @@ export const NotebookItem = ({
           </Paragraph>
         ) : (
           <Heading
-            size={AppFontSize.md}
+            size={SIZE.md}
             numberOfLines={1}
             style={{
               flexWrap: "wrap"
@@ -89,7 +83,7 @@ export const NotebookItem = ({
 
         {!item.description || compactMode ? null : (
           <Paragraph
-            size={AppFontSize.sm}
+            size={SIZE.sm}
             numberOfLines={2}
             style={{
               flexWrap: "wrap"
@@ -105,15 +99,15 @@ export const NotebookItem = ({
               flexDirection: "row",
               justifyContent: "flex-start",
               alignItems: "center",
-              marginTop: DefaultAppStyles.GAP_VERTICAL_SMALL,
-              height: AppFontSize.md + 2
+              marginTop: 5,
+              height: SIZE.md + 2
             }}
           >
             {isTrash ? (
               <>
                 <Paragraph
                   color={colors.secondary.paragraph}
-                  size={AppFontSize.xs}
+                  size={SIZE.xs}
                   style={{
                     textAlignVertical: "center",
                     marginRight: 6
@@ -127,7 +121,7 @@ export const NotebookItem = ({
                 </Paragraph>
                 <Paragraph
                   color={colors.primary.accent}
-                  size={AppFontSize.xs}
+                  size={SIZE.xs}
                   style={{
                     textAlignVertical: "center",
                     marginRight: 6
@@ -140,7 +134,7 @@ export const NotebookItem = ({
             ) : (
               <Paragraph
                 color={colors.secondary.paragraph}
-                size={AppFontSize.xs}
+                size={SIZE.xs}
                 style={{
                   marginRight: 6
                 }}
@@ -150,7 +144,7 @@ export const NotebookItem = ({
             )}
             <Paragraph
               color={colors.secondary.paragraph}
-              size={AppFontSize.xs}
+              size={SIZE.xs}
               style={{
                 marginRight: 6
               }}
@@ -161,7 +155,7 @@ export const NotebookItem = ({
             {item.pinned ? (
               <Icon
                 name="pin-outline"
-                size={AppFontSize.sm}
+                size={SIZE.sm}
                 style={{
                   marginRight: 10,
                   marginTop: 2
@@ -182,7 +176,7 @@ export const NotebookItem = ({
           <>
             <Paragraph
               color={colors.primary.icon}
-              size={AppFontSize.xs}
+              size={SIZE.xs}
               style={{
                 marginRight: 6
               }}
@@ -191,39 +185,21 @@ export const NotebookItem = ({
             </Paragraph>
           </>
         ) : null}
-        {selectionMode === "notebook" || selectionMode === "trash" ? (
-          <>
-            <View
-              style={{
-                height: 35,
-                width: 35,
-                alignItems: "center",
-                justifyContent: "center"
-              }}
-            >
-              <AppIcon
-                name={selected ? "checkbox-outline" : "checkbox-blank-outline"}
-                color={selected ? colors.selected.icon : colors.primary.icon}
-                size={AppFontSize.lg}
-              />
-            </View>
-          </>
-        ) : (
-          <IconButton
-            color={colors.primary.heading}
-            name="dots-horizontal"
-            testID={notesnook.ids.notebook.menu}
-            size={AppFontSize.xl}
-            onPress={() => Properties.present(item)}
-            style={{
-              justifyContent: "center",
-              height: 35,
-              width: 35,
-              borderRadius: 100,
-              alignItems: "center"
-            }}
-          />
-        )}
+
+        <IconButton
+          color={colors.primary.heading}
+          name="dots-horizontal"
+          testID={notesnook.ids.notebook.menu}
+          size={SIZE.xl}
+          onPress={() => Properties.present(item)}
+          style={{
+            justifyContent: "center",
+            height: 35,
+            width: 35,
+            borderRadius: 100,
+            alignItems: "center"
+          }}
+        />
       </View>
     </>
   );

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

@@ -22,7 +22,7 @@ import React from "react";
 import { View } from "react-native";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { notesnook } from "../../../../e2e/test.ids";
-import { defaultBorderRadius, AppFontSize } from "../../../utils/size";
+import { SIZE } from "../../../utils/size";
 import { Properties } from "../../properties";
 import ReminderSheet from "../../sheets/reminder";
 import { IconButton } from "../../ui/icon-button";
@@ -31,10 +31,6 @@ import Heading from "../../ui/typography/heading";
 import Paragraph from "../../ui/typography/paragraph";
 import SelectionWrapper, { selectItem } from "../selection-wrapper";
 import { strings } from "@notesnook/intl";
-import { useSelectionStore } from "../../../stores/use-selection-store";
-import useIsSelected from "../../../hooks/use-selected";
-import AppIcon from "../../ui/AppIcon";
-import { DefaultAppStyles } from "../../../utils/styles";
 
 const ReminderItem = React.memo(
   ({
@@ -52,8 +48,6 @@ const ReminderItem = React.memo(
 
       ReminderSheet.present(item, undefined, isSheet);
     };
-    const selectionMode = useSelectionStore((state) => state.selectionMode);
-    const [selected] = useIsSelected(item);
     return (
       <SelectionWrapper onPress={openReminder} item={item} isSheet={isSheet}>
         <View
@@ -68,7 +62,7 @@ const ReminderItem = React.memo(
             style={{
               flexWrap: "wrap"
             }}
-            size={AppFontSize.md}
+            size={SIZE.md}
           >
             {item.title}
           </Heading>
@@ -88,18 +82,18 @@ const ReminderItem = React.memo(
             style={{
               flexDirection: "row",
               flexWrap: "wrap",
-              marginTop: DefaultAppStyles.GAP_VERTICAL_SMALL
+              marginTop: 5
             }}
           >
             {item.disabled ? (
               <View
                 style={{
                   backgroundColor: colors.secondary.background,
-                  borderRadius: defaultBorderRadius,
+                  borderRadius: 5,
                   flexDirection: "row",
-                  paddingHorizontal: DefaultAppStyles.GAP_SMALL,
+                  paddingHorizontal: 6,
                   alignItems: "center",
-                  marginTop: DefaultAppStyles.GAP_VERTICAL_SMALL,
+                  marginTop: 5,
                   justifyContent: "flex-start",
                   alignSelf: "flex-start",
                   marginRight: 10,
@@ -108,11 +102,11 @@ const ReminderItem = React.memo(
               >
                 <Icon
                   name="bell-off-outline"
-                  size={AppFontSize.md}
+                  size={SIZE.md}
                   color={colors.error.icon}
                 />
                 <Paragraph
-                  size={AppFontSize.xs}
+                  size={SIZE.xs}
                   color={colors.secondary.paragraph}
                   style={{ marginLeft: 5 }}
                 >
@@ -124,24 +118,24 @@ const ReminderItem = React.memo(
               <View
                 style={{
                   backgroundColor: colors.secondary.background,
-                  borderRadius: defaultBorderRadius,
+                  borderRadius: 5,
                   flexDirection: "row",
-                  paddingHorizontal: DefaultAppStyles.GAP_SMALL,
+                  paddingHorizontal: 6,
                   alignItems: "center",
-                  marginTop: DefaultAppStyles.GAP_VERTICAL_SMALL,
+                  marginTop: 5,
                   justifyContent: "flex-start",
                   alignSelf: "flex-start",
-                  marginRight: DefaultAppStyles.GAP_SMALL,
+                  marginRight: 10,
                   height: 30
                 }}
               >
                 <Icon
                   name="reload"
-                  size={AppFontSize.md}
+                  size={SIZE.md}
                   color={colors.primary.accent}
                 />
                 <Paragraph
-                  size={AppFontSize.xs}
+                  size={SIZE.xs}
                   color={colors.secondary.paragraph}
                   style={{ marginLeft: 5 }}
                 >
@@ -153,49 +147,29 @@ const ReminderItem = React.memo(
             <ReminderTime
               reminder={item}
               checkIsActive={false}
-              fontSize={AppFontSize.xxs}
+              fontSize={SIZE.xs}
               style={{
                 justifyContent: "flex-start",
-                paddingVertical: DefaultAppStyles.GAP_VERTICAL_SMALL / 2,
+                height: 25,
                 alignSelf: "flex-start"
               }}
             />
           </View>
         </View>
-
-        {selectionMode === "note" || selectionMode === "trash" ? (
-          <>
-            <View
-              style={{
-                height: 35,
-                width: 35,
-                alignItems: "center",
-                justifyContent: "center"
-              }}
-            >
-              <AppIcon
-                name={selected ? "checkbox-outline" : "checkbox-blank-outline"}
-                color={selected ? colors.selected.icon : colors.primary.icon}
-                size={AppFontSize.lg}
-              />
-            </View>
-          </>
-        ) : (
-          <IconButton
-            testID={notesnook.listitem.menu}
-            color={colors.primary.paragraph}
-            name="dots-horizontal"
-            size={AppFontSize.xl}
-            onPress={() => Properties.present(item, isSheet)}
-            style={{
-              justifyContent: "center",
-              height: 35,
-              width: 35,
-              borderRadius: 100,
-              alignItems: "center"
-            }}
-          />
-        )}
+        <IconButton
+          testID={notesnook.listitem.menu}
+          color={colors.primary.paragraph}
+          name="dots-horizontal"
+          size={SIZE.xl}
+          onPress={() => Properties.present(item, [], isSheet)}
+          style={{
+            justifyContent: "center",
+            height: 35,
+            width: 35,
+            borderRadius: 100,
+            alignItems: "center"
+          }}
+        />
       </SelectionWrapper>
     );
   },

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

@@ -28,8 +28,7 @@ export const Filler = ({ item, color }: { item: Item; color?: string }) => {
   const { colors } = useThemeColors();
   const isEditingNote = useTabStore(
     (state) =>
-      state.tabs.find((t) => t.id === state.currentTab)?.session?.noteId ===
-      item.id
+      state.tabs.find((t) => t.id === state.currentTab)?.noteId === item.id
   );
 
   const [selected] = useIsSelected(item);
@@ -39,15 +38,16 @@ export const Filler = ({ item, color }: { item: Item; color?: string }) => {
       style={{
         position: "absolute",
         width: "110%",
-        height: "100%",
-        backgroundColor: colors.selected.accent
-        // borderLeftWidth: 5,
-        // borderLeftColor: isEditingNote
-        //   ? color
-        //     ? color
-        //     : colors.selected.accent
-        //   : "transparent"
+        height: "150%",
+        backgroundColor: colors.selected.background,
+        borderLeftWidth: 5,
+        borderLeftColor: isEditingNote
+          ? color
+            ? color
+            : colors.selected.accent
+          : "transparent"
       }}
+      collapsable={false}
     />
   ) : null;
 };

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

@@ -17,15 +17,14 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { Item, TrashItem } from "@notesnook/core";
 import { useThemeColors } from "@notesnook/theme";
 import React, { PropsWithChildren, useRef } from "react";
 import { useIsCompactModeEnabled } from "../../../hooks/use-is-compact-mode-enabled";
-import { useTabStore } from "../../../screens/editor/tiptap/use-tab-store";
 import { useSelectionStore } from "../../../stores/use-selection-store";
-import { DefaultAppStyles } from "../../../utils/styles";
 import { Pressable } from "../../ui/pressable";
-import { View } from "react-native";
+import { Filler } from "./back-fill";
+import { SelectionIcon } from "./selection";
+import { Item, TrashItem } from "@notesnook/core";
 
 export function selectItem(item: Item) {
   if (useSelectionStore.getState().selectionMode === item.type) {
@@ -50,7 +49,6 @@ type SelectionWrapperProps = PropsWithChildren<{
   testID?: string;
   isSheet?: boolean;
   color?: string;
-  index?: number;
 }>;
 
 const SelectionWrapper = ({
@@ -59,16 +57,10 @@ const SelectionWrapper = ({
   testID,
   isSheet,
   children,
-  color,
-  index = 0
+  color
 }: SelectionWrapperProps) => {
   const itemId = useRef(item.id);
   const { colors, isDark } = useThemeColors();
-  const isEditingNote = useTabStore(
-    (state) =>
-      state.tabs.find((t) => t.id === state.currentTab)?.session?.noteId ===
-      item.id
-  );
   const compactMode = useIsCompactModeEnabled(
     (item as TrashItem).itemType || item.type
   );
@@ -87,13 +79,7 @@ const SelectionWrapper = ({
 
   return (
     <Pressable
-      customColor={
-        isEditingNote
-          ? colors.selected.background
-          : isSheet
-          ? colors.primary.hover
-          : "transparent"
-      }
+      customColor={isSheet ? colors.secondary.background : "transparent"}
       testID={testID}
       onLongPress={onLongPress}
       onPress={onPress}
@@ -105,26 +91,15 @@ const SelectionWrapper = ({
         justifyContent: "space-between",
         alignItems: "center",
         width: "100%",
-        alignSelf: "center",
         overflow: "hidden",
-        paddingHorizontal: DefaultAppStyles.GAP,
-        paddingVertical: compactMode ? 4 : DefaultAppStyles.GAP_VERTICAL,
+        paddingHorizontal: 12,
+        paddingVertical: compactMode ? 4 : 12,
         borderRadius: isSheet ? 10 : 0,
-        marginBottom: isSheet ? DefaultAppStyles.GAP_VERTICAL : undefined
+        marginBottom: isSheet ? 12 : undefined
       }}
     >
-      {isEditingNote ? (
-        <View
-          style={{
-            backgroundColor: color || colors.selected.accent,
-            position: "absolute",
-            bottom: 0,
-            top: 0,
-            left: 0,
-            width: 5
-          }}
-        />
-      ) : null}
+      {item.type === "note" ? <Filler item={item} color={color} /> : null}
+      <SelectionIcon item={item} />
       {children}
     </Pressable>
   );

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

@@ -24,7 +24,7 @@ import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { useIsCompactModeEnabled } from "../../../hooks/use-is-compact-mode-enabled";
 import useIsSelected from "../../../hooks/use-selected";
 import { useSelectionStore } from "../../../stores/use-selection-store";
-import { AppFontSize } from "../../../utils/size";
+import { SIZE } from "../../../utils/size";
 import { Item, TrashItem } from "@notesnook/core";
 
 export const SelectionIcon = ({ item }: { item: Item }) => {
@@ -52,7 +52,7 @@ export const SelectionIcon = ({ item }: { item: Item }) => {
     >
       {selected ? (
         <Icon
-          size={compactMode ? AppFontSize.xl - 2 : AppFontSize.xl}
+          size={compactMode ? SIZE.xl - 2 : SIZE.xl}
           color={selected ? colors.selected.accent : colors.primary.icon}
           name={"check"}
         />

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

@@ -23,14 +23,13 @@ import React from "react";
 import { View } from "react-native";
 import { notesnook } from "../../../../e2e/test.ids";
 import { TaggedNotes } from "../../../screens/notes/tagged";
-import { AppFontSize } from "../../../utils/size";
+import { SIZE } from "../../../utils/size";
 import { Properties } from "../../properties";
 import { IconButton } from "../../ui/icon-button";
 import Heading from "../../ui/typography/heading";
 import Paragraph from "../../ui/typography/paragraph";
 import SelectionWrapper, { selectItem } from "../selection-wrapper";
 import { strings } from "@notesnook/intl";
-import { DefaultAppStyles } from "../../../utils/styles";
 
 const TagItem = React.memo(
   ({
@@ -61,9 +60,9 @@ const TagItem = React.memo(
             flexShrink: 1
           }}
         >
-          <Heading size={AppFontSize.md}>
+          <Heading size={SIZE.md}>
             <Heading
-              size={AppFontSize.md}
+              size={SIZE.md}
               style={{
                 color: colors.primary.accent
               }}
@@ -74,9 +73,9 @@ const TagItem = React.memo(
           </Heading>
           <Paragraph
             color={colors.secondary.paragraph}
-            size={AppFontSize.xs}
+            size={SIZE.xs}
             style={{
-              marginTop: DefaultAppStyles.GAP_VERTICAL_SMALL
+              marginTop: 5
             }}
           >
             {strings.notes(totalNotes)}
@@ -86,7 +85,7 @@ const TagItem = React.memo(
         <IconButton
           color={colors.primary.heading}
           name="dots-horizontal"
-          size={AppFontSize.xl}
+          size={SIZE.xl}
           onPress={() => {
             Properties.present(item);
           }}

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

@@ -17,28 +17,20 @@ 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 { Dimensions, View } from "react-native";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
-import { Message, useMessageStore } from "../../stores/use-message-store";
-import { AppFontSize } from "../../utils/size";
-import { DefaultAppStyles } from "../../utils/styles";
+import { useMessageStore } from "../../stores/use-message-store";
+import { useThemeColors } from "@notesnook/theme";
+import { getContainerBorder, hexToRGBA } from "../../utils/colors";
+import { SIZE } from "../../utils/size";
 import { Pressable } from "../ui/pressable";
 import Paragraph from "../ui/typography/paragraph";
 
-export const Card = ({
-  color,
-  customMessage
-}: {
-  color?: string;
-  customMessage?: Omit<Message, "data">;
-}) => {
+export const Card = ({ color }: { color?: string }) => {
   const { colors } = useThemeColors();
   color = color ? color : colors.primary.accent;
-  const messageBoardState = useMessageStore(
-    (state) => customMessage || state.message
-  );
+  const messageBoardState = useMessageStore((state) => state.message);
   const announcements = useMessageStore((state) => state.announcements);
   const fontScale = Dimensions.get("window").fontScale;
 
@@ -46,19 +38,18 @@ export const Card = ({
     (announcements && announcements.length) ? null : (
     <View
       style={{
-        width: "100%",
-        paddingHorizontal: DefaultAppStyles.GAP,
-        paddingVertical: DefaultAppStyles.GAP_VERTICAL
+        width: "95%"
       }}
     >
       <Pressable
         onPress={messageBoardState.onPress}
         type="plain"
         style={{
-          paddingVertical: DefaultAppStyles.GAP_VERTICAL,
+          paddingVertical: 12,
           flexDirection: "row",
           alignItems: "center",
           justifyContent: "space-between",
+          paddingHorizontal: 0,
           width: "100%"
         }}
       >
@@ -66,20 +57,30 @@ export const Card = ({
           style={{
             flexDirection: "row",
             alignItems: "center",
-            width: "100%"
+            flexShrink: 1
           }}
         >
           <View
             style={{
               width: 40 * fontScale,
+              backgroundColor:
+                messageBoardState.type === "error"
+                  ? hexToRGBA(colors.error.accent, 0.15)
+                  : hexToRGBA(color, 0.15),
               height: 40 * fontScale,
               borderRadius: 100,
               alignItems: "center",
-              justifyContent: "center"
+              justifyContent: "center",
+              ...getContainerBorder(
+                messageBoardState.type === "error"
+                  ? colors.error.accent
+                  : color || colors.primary.accent,
+                0.4
+              )
             }}
           >
             <Icon
-              size={AppFontSize.xxxl}
+              size={SIZE.lg}
               color={
                 messageBoardState.type === "error" ? colors.error.icon : color
               }
@@ -94,21 +95,39 @@ export const Card = ({
               marginRight: 10
             }}
           >
+            <Paragraph color={colors.secondary.paragraph} size={SIZE.xs}>
+              {messageBoardState.message}
+            </Paragraph>
             <Paragraph
               style={{
                 flexWrap: "nowrap",
                 flexShrink: 1
               }}
-              size={AppFontSize.sm}
               color={colors.primary.heading}
             >
               {messageBoardState.actionText}
             </Paragraph>
-            <Paragraph color={colors.secondary.paragraph} size={AppFontSize.xs}>
-              {messageBoardState.message}
-            </Paragraph>
           </View>
         </View>
+
+        {fontScale > 1 ? null : (
+          <View
+            style={{
+              width: 40,
+              height: 40,
+              justifyContent: "center",
+              alignItems: "center"
+            }}
+          >
+            <Icon
+              name="chevron-right"
+              color={
+                messageBoardState.type === "error" ? colors.error.icon : color
+              }
+              size={SIZE.lg}
+            />
+          </View>
+        )}
       </Pressable>
     </View>
   );

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

@@ -19,12 +19,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import { useThemeColors } from "@notesnook/theme";
 import React from "react";
-import { ActivityIndicator, View } from "react-native";
+import { ActivityIndicator, useWindowDimensions, View } from "react-native";
 import { notesnook } from "../../../e2e/test.ids";
+import useGlobalSafeAreaInsets from "../../hooks/use-global-safe-area-insets";
 import { TTip, useTip } from "../../services/tip-manager";
-import { RouteParams } from "../../stores/use-navigation-store";
 import { useSettingStore } from "../../stores/use-setting-store";
-import { AppFontSize } from "../../utils/size";
+import { SIZE } from "../../utils/size";
 import { Tip } from "../tip";
 import { Button } from "../ui/button";
 import Seperator from "../ui/seperator";
@@ -46,7 +46,7 @@ type EmptyListProps = {
   title?: string;
   color?: string;
   dataType: string;
-  screen?: keyof RouteParams;
+  screen?: string;
 };
 
 export const Empty = React.memo(function Empty({
@@ -58,6 +58,8 @@ export const Empty = React.memo(function Empty({
   screen
 }: EmptyListProps) {
   const { colors } = useThemeColors();
+  const insets = useGlobalSafeAreaInsets();
+  const { height } = useWindowDimensions();
   const introCompleted = useSettingStore(
     (state) => state.settings.introCompleted
   );
@@ -72,7 +74,7 @@ export const Empty = React.memo(function Empty({
     <View
       style={[
         {
-          flex: 1,
+          height: height - (140 + insets.top),
           width: "80%",
           justifyContent: "center",
           alignSelf: "center"
@@ -96,13 +98,18 @@ export const Empty = React.memo(function Empty({
           {placeholder?.button && (
             <Button
               testID={notesnook.buttons.add}
-              type="secondaryAccented"
+              type="accent"
               title={placeholder?.button}
               iconPosition="right"
               icon="arrow-right"
               onPress={placeholder?.action}
+              buttonType={{
+                text: "white"
+              }}
               style={{
-                alignSelf: "flex-start"
+                alignSelf: "flex-start",
+                borderRadius: 5,
+                height: 40
               }}
             />
           )}
@@ -117,12 +124,12 @@ export const Empty = React.memo(function Empty({
             }}
           >
             <Heading>{placeholder?.title}</Heading>
-            <Paragraph size={AppFontSize.sm} textBreakStrategy="balanced">
+            <Paragraph size={SIZE.sm} textBreakStrategy="balanced">
               {placeholder?.loading}
             </Paragraph>
             <Seperator />
             <ActivityIndicator
-              size={AppFontSize.lg}
+              size={SIZE.lg}
               color={color || colors.primary.accent}
             />
           </View>

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

@@ -24,9 +24,9 @@ import React, { useEffect, useRef } from "react";
 import {
   NativeScrollEvent,
   NativeSyntheticEvent,
-  RefreshControl,
-  View
+  RefreshControl
 } from "react-native";
+import Animated, { FadeInDown } from "react-native-reanimated";
 import { notesnook } from "../../../e2e/test.ids";
 import { useGroupOptions } from "../../hooks/use-group-options";
 import { eSendEvent } from "../../services/event-manager";
@@ -34,7 +34,8 @@ import Sync from "../../services/sync";
 import { RouteName } from "../../stores/use-navigation-store";
 import { useSettingStore } from "../../stores/use-setting-store";
 import { eScrollEvent } from "../../utils/events";
-import { fluidTabsRef } from "../../utils/global-refs";
+import { tabBarRef } from "../../utils/global-refs";
+import { Footer } from "../list-items/footer";
 import { Header } from "../list-items/headers/header";
 import { Empty, PlaceholderData } from "./empty";
 import { ListItemWrapper } from "./list-item.wrapper";
@@ -42,7 +43,6 @@ import { ListItemWrapper } from "./list-item.wrapper";
 type ListProps = {
   data: VirtualizedGrouping<Item> | undefined;
   dataType: Item["type"];
-  mode?: "drawer" | "sheet";
   onRefresh?: () => void;
   loading?: boolean;
   headerTitle?: string;
@@ -145,80 +145,70 @@ export default function List(props: ListProps) {
 
   return (
     <>
-      <View
+      <Animated.View
         style={{
           flex: 1
         }}
+        entering={props.renderedInRoute === "Search" ? undefined : FadeInDown}
       >
-        {props.data?.placeholders?.length === 0 ? (
-          <>
-            {props.CustomLisHeader ? (
-              props.CustomLisHeader
-            ) : !props.headerTitle ? null : (
-              <Header
+        <ListView
+          style={styles}
+          ref={scrollRef}
+          testID={notesnook.list.id}
+          data={props.data?.placeholders || []}
+          renderItem={renderItem}
+          onScroll={onListScroll}
+          nestedScrollEnabled={true}
+          onMomentumScrollEnd={() => {
+            tabBarRef.current?.unlock();
+          }}
+          getItemType={(item: number, index: number) => {
+            return props.data?.type(index);
+          }}
+          estimatedItemSize={isCompactModeEnabled ? 60 : 120}
+          directionalLockEnabled={true}
+          keyboardShouldPersistTaps="always"
+          keyboardDismissMode="interactive"
+          refreshControl={
+            props.isRenderedInActionSheet ? null : (
+              <RefreshControl
+                tintColor={colors.primary.accent}
+                colors={[colors.primary.accent]}
+                progressBackgroundColor={colors.secondary.background}
+                onRefresh={_onRefresh}
+                refreshing={false}
+              />
+            )
+          }
+          ListEmptyComponent={
+            props.placeholder ? (
+              <Empty
+                loading={props.loading}
+                title={props.headerTitle}
+                dataType={props.dataType}
                 color={props.customAccentColor}
+                placeholder={props.placeholder}
                 screen={props.renderedInRoute}
               />
-            )}
-            <Empty
-              loading={props.loading}
-              title={props.headerTitle}
-              dataType={props.dataType}
-              color={props.customAccentColor}
-              placeholder={props.placeholder}
-              screen={props.renderedInRoute}
-            />
-          </>
-        ) : (
-          <ListView
-            style={styles}
-            ref={scrollRef}
-            testID={notesnook.list.id}
-            data={props.data?.placeholders || []}
-            renderItem={renderItem}
-            onScroll={onListScroll}
-            nestedScrollEnabled={true}
-            onMomentumScrollEnd={() => {
-              fluidTabsRef.current?.unlock();
-            }}
-            getItemType={(item: number, index: number) => {
-              return props.data?.type(index);
-            }}
-            estimatedItemSize={isCompactModeEnabled ? 60 : 120}
-            directionalLockEnabled={true}
-            keyboardShouldPersistTaps="always"
-            keyboardDismissMode="interactive"
-            ListFooterComponent={
-              <View
-                style={{ height: props.data?.placeholders?.length ? 100 : 0 }}
-              />
-            }
-            refreshControl={
-              props.isRenderedInActionSheet ? null : (
-                <RefreshControl
-                  tintColor={colors.primary.accent}
-                  colors={[colors.primary.accent]}
-                  progressBackgroundColor={colors.secondary.background}
-                  onRefresh={_onRefresh}
-                  refreshing={false}
+            ) : null
+          }
+          ListFooterComponent={
+            <Footer height={props.renderedInRoute === "Notebook" ? 300 : 150} />
+          }
+          ListHeaderComponent={
+            <>
+              {props.CustomLisHeader ? (
+                props.CustomLisHeader
+              ) : !props.headerTitle ? null : (
+                <Header
+                  color={props.customAccentColor}
+                  screen={props.renderedInRoute}
                 />
-              )
-            }
-            ListHeaderComponent={
-              <>
-                {props.CustomLisHeader ? (
-                  props.CustomLisHeader
-                ) : !props.headerTitle ? null : (
-                  <Header
-                    color={props.customAccentColor}
-                    screen={props.renderedInRoute}
-                  />
-                )}
-              </>
-            }
-          />
-        )}
-      </View>
+              )}
+            </>
+          }
+        />
+      </Animated.View>
     </>
   );
 }

apps/mobile/app/components/list/list-item.wrapper.tsx

@@ -200,7 +200,6 @@ export function ListItemWrapper(props: ListItemWrapperProps) {
             isRenderedInActionSheet={isSheet}
             index={index}
             locked={locked.current}
-            renderedInRoute={props.renderedInRoute}
           />
         </>
       );