web: use strings from @notesnook/intl in more places

2025-12-16 19:57:52 +01:00 · 2024-10-03 15:13:11 +05:00
parent bb53b0167b
commit 3e55492318
37 changed files with 1359 additions and 342 deletions
--- a/apps/web/package-lock.json
+++ b/apps/web/package-lock.json
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -16,8 +16,8 @@
    "@emotion/react": "11.11.1",
    "@hazae41/foras": "^2.1.4",
    "@henrygd/queue": "^1.0.6",
-    "@lingui/core": "4.11.2",
-    "@lingui/react": "4.11.2",
+    "@lingui/core": "4.11.4",
+    "@lingui/react": "4.11.4",
    "@mdi/js": "^7.2.96",
    "@mdi/react": "^1.6.1",
    "@notesnook-importer/core": "^2.1.1",
@@ -35,6 +35,7 @@
    "@notesnook/web-clipper": "file:../../extensions/web-clipper",
    "@react-pdf-viewer/core": "^3.12.0",
    "@react-pdf-viewer/toolbar": "^3.12.0",
+    "@streetwriters/kysely": "^0.27.4",
    "@tanstack/react-query": "^4.36.1",
    "@tanstack/react-virtual": "^3.0.1",
    "@theme-ui/color": "^0.16.1",
@@ -59,7 +60,6 @@
    "hash-wasm": "^4.9.0",
    "hotkeys-js": "^3.8.3",
    "katex": "0.16.2",
-    "@streetwriters/kysely": "^0.27.4",
    "mac-scrollbar": "^0.13.5",
    "marked": "^4.1.0",
    "mutative": "^1.0.6",
@@ -84,7 +84,6 @@
    "react-virtuoso": "^4.6.2",
    "timeago.js": "4.0.2",
    "tinycolor2": "^1.6.0",
-    "vite-plugin-commonjs": "^0.10.1",
    "w3c-keyname": "^2.2.6",
    "web-streams-polyfill": "^3.1.1",
    "wouter": "2.12.1",
--- a/apps/web/src/common/export.ts
+++ b/apps/web/src/common/export.ts
@@ -34,7 +34,7 @@ import { ExportStream } from "../utils/streams/export-stream";
 import { showToast } from "../utils/toast";
 import { ConfirmDialog } from "../dialogs/confirm";
 import { db } from "./db";
-import { toAsyncIterator } from "@notesnook-importer/core";
+import { toAsyncIterator } from "@notesnook-importer/core/dist/src/utils/stream";
 import { saveAs } from "file-saver";
 import { strings } from "@notesnook/intl";

@@ -108,7 +108,7 @@ export async function exportNotes(
    ConfirmDialog.show({
      title: `Export failed`,
      message: result.stack || result.message,
-      positiveButtonText: "Okay"
+      positiveButtonText: strings.okay()
    });
    return false;
  } else {
@@ -120,7 +120,7 @@ export async function exportNotes(

 ${result.errors.map((e, i) => `${i + 1}. ${e.message}`).join("\n")}`
          : "Export completed with 0 errors.",
-      positiveButtonText: "Okay"
+      positiveButtonText: strings.okay()
    });
    return true;
  }
--- a/apps/web/src/common/multi-select.ts
+++ b/apps/web/src/common/multi-select.ts
@@ -27,7 +27,6 @@ import { db } from "./db";
 import { showToast } from "../utils/toast";
 import Vault from "./vault";
 import { TaskManager } from "./task-manager";
-import { pluralize } from "@notesnook/common";
 import { ConfirmDialog, showMultiDeleteConfirmation } from "../dialogs/confirm";
 import { strings } from "@notesnook/intl";

@@ -52,7 +51,7 @@ async function moveNotesToTrash(ids: string[], confirm = true) {
    title: strings.deletingItems("note", items.length),
    action: async (report) => {
      report({
-        text: `${strings.deleting()} ${strings.notes(items.length)}...`
+        text: `${strings.inProgressAction("note", items.length, "deleting")}...`
      });
      await noteStore.delete(...items);
    }
@@ -75,9 +74,10 @@ async function moveNotebooksToTrash(ids: string[]) {
    title: strings.deletingItems("notebook", ids.length),
    action: async (report) => {
      report({
-        text: `${strings.deleting()} ${strings.itemsPlural(
+        text: `${strings.inProgressAction(
          "notebook",
-          ids.length
+          ids.length,
+          "deleting"
        )}...`
      });
      await notebookStore.delete(...ids);
@@ -91,9 +91,9 @@ async function deleteAttachments(ids: string[]) {
  if (
    !(await ConfirmDialog.show({
      title: strings.doAction("attachment", ids.length, "permanentlyDelete"),
-      message: strings.permanentlyDeleteDesc("attachment", ids.length),
-      negativeButtonText: "No",
-      positiveButtonText: "Yes"
+      message: strings.irreverisibleAction(),
+      negativeButtonText: strings.no(),
+      positiveButtonText: strings.yes()
    }))
  )
    return;
@@ -109,9 +109,10 @@ async function deleteAttachments(ids: string[]) {
        if (!attachment) continue;

        report({
-          text: `${strings.deleting()} ${strings.itemsPlural(
+          text: `${strings.inProgressAction(
            "attachment",
-            ids.length
+            ids.length,
+            "deleting"
          )}...`,
          current: i,
          total: ids.length
@@ -135,9 +136,10 @@ async function moveRemindersToTrash(ids: string[]) {
    title: strings.deletingItems("reminder", ids.length),
    action: async (report) => {
      report({
-        text: `${strings.deleting()} ${strings.itemsPlural(
+        text: `${strings.inProgressAction(
          "reminder",
-          ids.length
+          ids.length,
+          "deleting"
        )}...`
      });
      await reminderStore.delete(...ids);
@@ -159,7 +161,7 @@ async function deleteTags(ids: string[]) {
    title: "Deleting tags",
    action: async (report) => {
      report({
-        text: `Deleting ${pluralize(ids.length, "tag")}...`
+        text: `${strings.inProgressAction("tag", ids.length, "deleting")}...`
      });
      for (const id of ids) {
        await db.tags.remove(id);
@@ -170,7 +172,7 @@ async function deleteTags(ids: string[]) {
    }
  });

-  showToast("success", `${pluralize(ids.length, "tag")} deleted.`);
+  showToast("success", strings.deleted("tag", ids.length));
 }

 export const Multiselect = {
--- a/apps/web/src/components/notebook/index.tsx
+++ b/apps/web/src/components/notebook/index.tsx
@@ -213,8 +213,8 @@ export const notebookMenuItems: (
      onClick: async () => {
        const result = await ConfirmDialog.show({
          title: `Delete ${pluralize(ids.length, "notebook")}?`,
-          positiveButtonText: `Yes`,
-          negativeButtonText: "No",
+          positiveButtonText: strings.yes(),
+          negativeButtonText: strings.no(),
          checks: {
            deleteContainingNotes: {
              text: `Move all notes in ${
--- a/apps/web/src/components/properties/index.tsx
+++ b/apps/web/src/components/properties/index.tsx
@@ -65,24 +65,24 @@ import { TITLE_BAR_HEIGHT } from "../title-bar";
 import { strings } from "@notesnook/intl";

 const tools = [
-  { key: "pin", property: "pinned", icon: Pin, label: "Pin" },
+  { key: "pin", property: "pinned", icon: Pin, label: strings.pin() },
  {
    key: "favorite",
    property: "favorite",
    icon: StarOutline,
-    label: "Favorite"
+    label: strings.favorite()
  },
-  { key: "lock", icon: Unlock, label: "Lock", property: "locked" },
+  { key: "lock", icon: Unlock, label: strings.lock(), property: "locked" },
  {
    key: "readonly",
    icon: Readonly,
-    label: "Readonly",
+    label: strings.readOnly(),
    property: "readonly"
  },
  {
    key: "local-only",
    icon: SyncOff,
-    label: "Disable sync",
+    label: strings.disableSync(),
    property: "localOnly"
  }
 ] as const;
@@ -96,12 +96,12 @@ type MetadataItem<T extends "dateCreated" | "dateEdited"> = {
 const metadataItems = [
  {
    key: "dateCreated",
-    label: "Created at",
+    label: strings.createdAt(),
    value: (date) => getFormattedDate(date || Date.now())
  } as MetadataItem<"dateCreated">,
  {
    key: "dateEdited",
-    label: "Last edited at",
+    label: strings.lastEditedAt(),
    value: (date) => (date ? getFormattedDate(date) : "never")
  } as MetadataItem<"dateEdited">
 ];
@@ -251,7 +251,7 @@ function InternalLinks({ noteId }: { noteId: string }) {
          mb: 1
        }}
      >
-        {["Linked notes", "Referenced in"].map((title, index) => (
+        {[strings.linkedNotes(), strings.referencedIn()].map((title, index) => (
          <Button
            key={title}
            variant="secondary"
--- a/apps/web/src/components/reminder/index.tsx
+++ b/apps/web/src/components/reminder/index.tsx
@@ -37,7 +37,6 @@ import { hashNavigate } from "../../navigation";
 import { Multiselect } from "../../common/multi-select";
 import { store } from "../../stores/reminder-store";
 import { db } from "../../common/db";
-import { pluralize } from "@notesnook/common";
 import { getFormattedReminderTime } from "@notesnook/common";
 import { MenuItem } from "@notesnook/ui";
 import { Reminder as ReminderType } from "@notesnook/core";
@@ -153,10 +152,10 @@ const menuItems: (reminder: ReminderType, items?: string[]) => MenuItem[] = (
      icon: Trash.path,
      onClick: async () => {
        ConfirmDialog.show({
-          title: `Delete ${pluralize(items.length, "reminder")}`,
-          message: `Are you sure you want to proceed? **This action is IRREVERSIBLE**.`,
-          positiveButtonText: "Yes",
-          negativeButtonText: "No"
+          title: strings.doAction("reminder", items.length, "delete"),
+          message: strings.irreverisibleAction(),
+          positiveButtonText: strings.yes(),
+          negativeButtonText: strings.no()
        }).then((result) => {
          result && Multiselect.moveRemindersToTrash(items);
        });
--- a/apps/web/src/dialogs/add-notebook-dialog.tsx
+++ b/apps/web/src/dialogs/add-notebook-dialog.tsx
@@ -73,18 +73,21 @@ export const AddNotebookDialog = DialogManager.register(
      <Dialog
        testId="add-notebook-dialog"
        isOpen={true}
-        title={props.edit ? "Edit Notebook" : "Create a Notebook"}
+        title={props.edit ? strings.editNotebook() : strings.newNotebook()}
        description={
-          props.edit
-            ? `You are editing "${notebook?.title}".`
-            : "Notebooks are the best way to organize your notes."
+          props.edit && notebook?.title
+            ? strings.editNotebookDesc(notebook.title)
+            : strings.newNotebookDesc()
        }
        onClose={() => onClose(false)}
        positiveButton={{
-          text: props.edit ? "Save" : "Create",
+          text: props.edit ? strings.save() : strings.create(),
          onClick: onSubmit
        }}
-        negativeButton={{ text: "Cancel", onClick: () => onClose(false) }}
+        negativeButton={{
+          text: strings.cancel(),
+          onClick: () => onClose(false)
+        }}
      >
        <Field
          defaultValue={title.current}
--- a/apps/web/src/dialogs/add-reminder-dialog.tsx
+++ b/apps/web/src/dialogs/add-reminder-dialog.tsx
@@ -153,12 +153,12 @@ export const AddReminderDialog = DialogManager.register(
    return (
      <Dialog
        isOpen={true}
-        title={reminder ? "Edit reminder" : "Add a reminder"}
+        title={reminder ? strings.editReminder() : strings.newReminder()}
        testId="add-reminder-dialog"
        onClose={() => props.onClose(false)}
        sx={{ fontFamily: "body" }}
        positiveButton={{
-          text: reminder ? "Save" : "Add",
+          text: reminder ? strings.save() : strings.add(),
          disabled:
            !title ||
            (mode !== Modes.ONCE &&
@@ -201,7 +201,10 @@ export const AddReminderDialog = DialogManager.register(
            props.onClose(true);
          }
        }}
-        negativeButton={{ text: "Cancel", onClick: () => props.onClose(false) }}
+        negativeButton={{
+          text: strings.cancel(),
+          onClick: () => props.onClose(false)
+        }}
      >
        <Field
          id="title"
@@ -255,9 +258,7 @@ export const AddReminderDialog = DialogManager.register(
                  setSelectedDays([]);
                }}
              />
-              {strings.reminderModes[
-                m.id as keyof typeof strings.reminderModes
-              ]()}
+              {strings.reminderModes(m.id)}
              {m.premium && !isUserPremium && (
                <Pro size={18} color="accent" sx={{ ml: 1 }} />
              )}
@@ -299,9 +300,7 @@ export const AddReminderDialog = DialogManager.register(
                        : "paragraph"
                  }}
                >
-                  {strings.recurringModes[
-                    mode.id as keyof typeof strings.recurringModes
-                  ]()}
+                  {strings.recurringModes(mode.id)}
                </Button>
              ))}
            </Flex>
--- a/apps/web/src/dialogs/add-tags-dialog.tsx
+++ b/apps/web/src/dialogs/add-tags-dialog.tsx
@@ -28,7 +28,6 @@ import { db } from "../common/db";
 import Dialog from "../components/dialog";
 import { useStore, store } from "../stores/tag-store";
 import { store as notestore } from "../stores/note-store";
-import { useEditorStore } from "../stores/editor-store";
 import { FilteredList } from "../components/filtered-list";
 import { ItemReference, Tag } from "@notesnook/core";
 import { create } from "zustand";
@@ -85,12 +84,12 @@ export const AddTagsDialog = DialogManager.register(function AddTagsDialog(
  return (
    <Dialog
      isOpen={true}
-      title={"Add tags"}
-      description={`Add tags to multiple notes at once`}
+      title={strings.addTags()}
+      description={strings.addTagsDesc()}
      onClose={() => onClose(false)}
      width={450}
      positiveButton={{
-        text: "Done",
+        text: strings.done(),
        onClick: async () => {
          for (const id of noteIds) {
            for (const item of useSelectionStore.getState().selected) {
@@ -106,7 +105,7 @@ export const AddTagsDialog = DialogManager.register(function AddTagsDialog(
        }
      }}
      negativeButton={{
-        text: "Cancel",
+        text: strings.cancel(),
        onClick: () => onClose(false)
      }}
    >
--- a/apps/web/src/dialogs/attachments-dialog.tsx
+++ b/apps/web/src/dialogs/attachments-dialog.tsx
@@ -49,7 +49,6 @@ import {
  Uploading
 } from "../components/icons";
 import NavigationItem from "../components/navigation-menu/navigation-item";
-import { pluralize } from "@notesnook/common";
 import { db } from "../common/db";
 import { Attachment } from "../components/attachment";
 import { ScopedThemeProvider } from "../components/theme-provider";
@@ -510,8 +509,8 @@ const Sidebar = memo(
                      await ConfirmDialog.show({
                        title: strings.clearCacheConfirm(),
                        message: strings.clearCacheConfirmDesc(),
-                        negativeButtonText: "No",
-                        positiveButtonText: "Yes"
+                        negativeButtonText: strings.no(),
+                        positiveButtonText: strings.yes()
                      })
                    ) {
                      await db.fs().clear();
--- a/apps/web/src/dialogs/backup-password-dialog.tsx
+++ b/apps/web/src/dialogs/backup-password-dialog.tsx
@@ -43,19 +43,20 @@ export const BackupPasswordDialog = DialogManager.register(
      <Dialog
        isOpen={true}
        testId="password-dialog"
-        title={"Encrypted backup"}
-        description={
-          "Please enter the password to decrypt and restore this backup."
-        }
+        title={strings.encryptedBackup()}
+        description={strings.encryptedBackupDesc()}
        onClose={() => onClose(false)}
        positiveButton={{
          form: "backupPasswordForm",
          type: "submit",
          loading: isLoading,
          disabled: isLoading,
-          text: "Restore"
+          text: strings.restore()
+        }}
+        negativeButton={{
+          text: strings.cancel(),
+          onClick: () => onClose(false)
        }}
-        negativeButton={{ text: "Cancel", onClick: () => onClose(false) }}
      >
        <Box
          id="backupPasswordForm"
--- a/apps/web/src/dialogs/confirm.tsx
+++ b/apps/web/src/dialogs/confirm.tsx
@@ -146,39 +146,35 @@ export const ConfirmDialog = DialogManager.register(function ConfirmDialog<
 export function showMultiDeleteConfirmation(length: number) {
  return ConfirmDialog.show({
    title: strings.doAction("item", length, "delete"),
-    message: `These items will be **kept in your Trash for ${
+    message: strings.moveToTrashDesc(
      db.settings.getTrashCleanupInterval() || 7
-    } days** after which they will be permanently deleted.`,
-    positiveButtonText: "Yes",
-    negativeButtonText: "No"
+    ),
+    positiveButtonText: strings.yes(),
+    negativeButtonText: strings.no()
  });
 }

 export function showMultiPermanentDeleteConfirmation(length: number) {
  return ConfirmDialog.show({
-    title: `Permanently delete ${pluralize(length, "item")}?`,
-    message:
-      "These items will be **permanently deleted**. This is IRREVERSIBLE.",
-    positiveButtonText: "Yes",
-    negativeButtonText: "No"
+    title: strings.doAction("item", length, "permanentlyDelete"),
+    message: strings.irreverisibleAction(),
+    positiveButtonText: strings.yes(),
+    negativeButtonText: strings.no()
  });
 }

 export async function showLogoutConfirmation() {
  return await ConfirmDialog.show({
-    title: `Logout?`,
-    message:
-      "Are you sure you want to log out and clear all data stored on THIS DEVICE?",
-    positiveButtonText: "Yes",
-    negativeButtonText: "No",
+    title: strings.logout(),
+    message: strings.logoutConfirmation(),
+    positiveButtonText: strings.yes(),
+    negativeButtonText: strings.no(),
    warnings: (await db.hasUnsyncedChanges())
-      ? [
-          "You have unsynced notes. Take a backup or sync your notes to avoid losing critical data."
-        ]
+      ? [strings.unsyncedChangesWarning()]
      : [],
    checks: {
      backup: {
-        text: "Take a backup before logging out?",
+        text: strings.backupDataBeforeLogout(),
        default: true
      }
    }
@@ -189,8 +185,8 @@ export function showClearSessionsConfirmation() {
  return ConfirmDialog.show({
    title: strings.logoutAllOtherDevices(),
    message: strings.logoutAllOtherDevicesDescription(),
-    positiveButtonText: "Yes",
-    negativeButtonText: "No"
+    positiveButtonText: strings.yes(),
+    negativeButtonText: strings.no()
  });
 }

@@ -205,7 +201,7 @@ export async function showUpdateAvailableNotice({
    title: strings.newVersion(),
    subtitle: strings.newVersionAvailable(version),
    changelog,
-    action: { text: `Update now`, onClick: () => downloadUpdate() }
+    action: { text: strings.updateNow(), onClick: () => downloadUpdate() }
  });
 }

--- a/apps/web/src/dialogs/create-color-dialog.tsx
+++ b/apps/web/src/dialogs/create-color-dialog.tsx
@@ -36,14 +36,17 @@ export const CreateColorDialog = DialogManager.register(
      <Dialog
        testId="new-color-dialog"
        isOpen={true}
-        title={"Create a new color"}
+        title={strings.newColor()}
        onClose={() => props.onClose(false)}
        positiveButton={{
          form: "colorForm",
          type: "submit",
-          text: "Create"
+          text: strings.create()
+        }}
+        negativeButton={{
+          text: strings.cancel(),
+          onClick: () => props.onClose(false)
        }}
-        negativeButton={{ text: "Cancel", onClick: () => props.onClose(false) }}
      >
        <Box
          as="form"
--- a/apps/web/src/dialogs/edit-profile-picture-dialog.tsx
+++ b/apps/web/src/dialogs/edit-profile-picture-dialog.tsx
@@ -48,13 +48,13 @@ export const EditProfilePictureDialog = DialogManager.register(
    return (
      <Dialog
        isOpen={true}
-        title={"Edit profile picture"}
-        description="Your profile data is stored 100% end-to-end encrypted."
+        title={strings.editProfilePicture()}
+        description={strings.editProfilePictureDesc()}
        onClose={() => props.onClose(false)}
        positiveButton={{
          loading: isLoading,
          disabled: isLoading,
-          text: "Save",
+          text: strings.save(),
          onClick: async () => {
            setIsLoading(true);
            try {
@@ -79,7 +79,10 @@ export const EditProfilePictureDialog = DialogManager.register(
            }
          }
        }}
-        negativeButton={{ text: "Cancel", onClick: () => props.onClose(false) }}
+        negativeButton={{
+          text: strings.cancel(),
+          onClick: () => props.onClose(false)
+        }}
      >
        <Flex
          sx={{
--- a/apps/web/src/dialogs/email-change-dialog.tsx
+++ b/apps/web/src/dialogs/email-change-dialog.tsx
@@ -65,18 +65,19 @@ export const EmailChangeDialog = DialogManager.register(
    return (
      <Dialog
        isOpen={true}
-        title={"Change account email"}
-        description={
-          "Your account email will be changed without affecting your subscription or any other settings."
-        }
+        title={strings.changeEmail()}
+        description={strings.changeEmailDesc()}
        onClose={() => props.onClose(false)}
        positiveButton={{
-          text: "Next",
+          text: strings.next(),
          disabled: isLoading,
          loading: isLoading,
          form: "changeEmailForm"
        }}
-        negativeButton={{ text: "Cancel", onClick: () => props.onClose(false) }}
+        negativeButton={{
+          text: strings.cancel(),
+          onClick: () => props.onClose(false)
+        }}
      >
        <Flex
          id="changeEmailForm"
--- a/apps/web/src/dialogs/email-verification-dialog.tsx
+++ b/apps/web/src/dialogs/email-verification-dialog.tsx
@@ -66,10 +66,8 @@ export const EmailVerificationDialog = DialogManager.register(
    return (
      <Dialog
        isOpen={true}
-        title={"Confirm your email"}
-        description={
-          "Check your spam folder if you haven't received an email yet."
-        }
+        title={strings.confirmEmail()}
+        description={strings.confirmEmailDesc()}
        onClose={() => props.onClose(false)}
        positiveButton={{
          text: canSendAgain || isSending ? "Resend" : `Resend (${resetTimer})`,
@@ -88,7 +86,7 @@ export const EmailVerificationDialog = DialogManager.register(
          disabled: isSending || !canSendAgain
        }}
        negativeButton={{
-          text: "Cancel",
+          text: strings.cancel(),
          onClick: () => props.onClose(true),
          disabled: isSending
        }}
@@ -103,7 +101,7 @@ export const EmailVerificationDialog = DialogManager.register(
          </Text>
          <Accordion
            isClosed
-            title={"What do I do if I am not getting the email?"}
+            title={strings.confirmEmailTroubleshoot()}
            sx={{
              mt: 2,
              bg: "var(--background-secondary)",
@@ -111,9 +109,9 @@ export const EmailVerificationDialog = DialogManager.register(
            }}
          >
            <Text variant={"body"} px={1} pb={1}>
-              {strings.emailConfirmationNotice()[0]}{" "}
-              <b>{strings.emailConfirmationNotice()[1]}</b>{" "}
-              {strings.emailConfirmationNotice()[2]}.
+              {strings.confirmEmailTroubleshootNotice()[0]}{" "}
+              <b>{strings.confirmEmailTroubleshootNotice()[1]}</b>{" "}
+              {strings.confirmEmailTroubleshootNotice()[2]}.
            </Text>
          </Accordion>
        </Flex>
--- a/apps/web/src/dialogs/image-picker-dialog.tsx
+++ b/apps/web/src/dialogs/image-picker-dialog.tsx
@@ -24,6 +24,7 @@ import { Flex, Image, Label, Text } from "@theme-ui/components";
 import { formatBytes } from "@notesnook/common";
 import { compressImage } from "../utils/image-compressor";
 import { BaseDialogProps, DialogManager } from "../common/dialog-manager";
+import { strings } from "@notesnook/intl";

 export type ImagePickerDialogProps = BaseDialogProps<false | File[]> & {
  images: File[];
@@ -82,10 +83,13 @@ export const ImagePickerDialog = DialogManager.register(
        isOpen={true}
        onClose={() => props.onClose(false)}
        positiveButton={{
-          text: "Insert",
+          text: strings.insert(),
          onClick: () => props.onClose(images)
        }}
-        negativeButton={{ text: "Cancel", onClick: () => props.onClose(false) }}
+        negativeButton={{
+          text: strings.cancel(),
+          onClick: () => props.onClose(false)
+        }}
      >
        {selectedImage && (
          <Flex sx={{ flexDirection: "column", alignItems: "center", mt: 4 }}>
--- a/apps/web/src/dialogs/item-dialog.tsx
+++ b/apps/web/src/dialogs/item-dialog.tsx
@@ -53,7 +53,10 @@ export const ItemDialog = DialogManager.register(function ItemDialog(
        text: props.title
      }}
      onClose={() => props.onClose(false)}
-      negativeButton={{ text: "Cancel", onClick: () => props.onClose(false) }}
+      negativeButton={{
+        text: strings.cancel(),
+        onClick: () => props.onClose(false)
+      }}
    >
      <Box
        as="form"
--- a/apps/web/src/dialogs/mfa/multi-factor-dialog.tsx
+++ b/apps/web/src/dialogs/mfa/multi-factor-dialog.tsx
@@ -31,6 +31,7 @@ import { Authenticator, OnNextFunction } from "./types";
 import { ErrorText } from "../../components/error-text";
 import { AuthenticatorType } from "@notesnook/core";
 import { BaseDialogProps, DialogManager } from "../../common/dialog-manager";
+import { strings } from "@notesnook/intl";

 type MultifactorDialogProps = BaseDialogProps<boolean> & {
  primaryMethod?: AuthenticatorType;
@@ -56,7 +57,7 @@ export const MultifactorDialog = DialogManager.register(
        positiveButton={
          step.next
            ? {
-                text: "Continue",
+                text: strings.continue(),
                form: "2faForm"
              }
            : null
@@ -64,7 +65,7 @@ export const MultifactorDialog = DialogManager.register(
        negativeButton={
          step.cancellable
            ? {
-                text: "Cancel",
+                text: strings.cancel(),
                onClick: () => props.onClose(false)
              }
            : null
--- a/apps/web/src/dialogs/mfa/recovery-code-dialog.tsx
+++ b/apps/web/src/dialogs/mfa/recovery-code-dialog.tsx
@@ -23,6 +23,7 @@ import { steps } from "./steps";
 import { ErrorText } from "../../components/error-text";
 import { AuthenticatorType } from "@notesnook/core";
 import { BaseDialogProps, DialogManager } from "../../common/dialog-manager";
+import { strings } from "@notesnook/intl";

 type RecoveryCodesDialogProps = BaseDialogProps<boolean> & {
  primaryMethod: AuthenticatorType;
@@ -41,7 +42,7 @@ export const RecoveryCodesDialog = DialogManager.register(
        description={step.description}
        width={500}
        positiveButton={{
-          text: "Okay",
+          text: strings.okay(),
          onClick: () => onClose(true)
        }}
      >
--- a/apps/web/src/dialogs/migration-dialog.tsx
+++ b/apps/web/src/dialogs/migration-dialog.tsx
@@ -86,10 +86,10 @@ export const MigrationDialog = DialogManager.register(function MigrationDialog(
    return (
      <Dialog
        isOpen={true}
-        title={"There was an error"}
+        title={strings.migrationFailed()}
        description={""}
        positiveButton={{
-          text: "Try again",
+          text: strings.tryAgain(),
          onClick: startMigration
        }}
      >
@@ -118,17 +118,15 @@ export const MigrationDialog = DialogManager.register(function MigrationDialog(
    <Dialog
      width={500}
      isOpen={true}
-      title={"Save a backup of your notes"}
+      title={strings.migrationSaveBackup()}
      description={""}
      positiveButton={{
-        text: "Save & continue",
+        text: strings.saveAndContinue(),
        onClick: startMigration
      }}
    >
      <Text as="p" variant={"body"}>
-        {
-          "Thank you for updating Notesnook! We'll be applying some minor changes for a better note taking experience."
-        }
+        {strings.migrationSaveBackupDesc()}
      </Text>
    </Dialog>
  );
--- a/apps/web/src/dialogs/move-note-dialog.tsx
+++ b/apps/web/src/dialogs/move-note-dialog.tsx
@@ -129,14 +129,12 @@ export const MoveNoteDialog = DialogManager.register(function MoveNoteDialog({
    <Dialog
      testId="move-note-dialog"
      isOpen={true}
-      title={"Select notebooks"}
-      description={`Use ${
-        isMac() ? "cmd" : "ctrl"
-      }+click to select multiple notebooks`}
+      title={strings.selectNotebooks()}
+      description={strings.selectNotebooksDesktopDesc(isMac() ? "Cmd" : "Ctrl")}
      onClose={() => _onClose(false)}
      width={450}
      positiveButton={{
-        text: "Done",
+        text: strings.done(),
        onClick: async () => {
          const { selected } = useSelectionStore.getState();
          for (const item of selected) {
@@ -167,7 +165,7 @@ export const MoveNoteDialog = DialogManager.register(function MoveNoteDialog({
        }
      }}
      negativeButton={{
-        text: "Cancel",
+        text: strings.cancel(),
        onClick: () => _onClose(false)
      }}
    >
--- a/apps/web/src/dialogs/note-linking-dialog.tsx
+++ b/apps/web/src/dialogs/note-linking-dialog.tsx
@@ -56,7 +56,9 @@ export const NoteLinkingDialog = DialogManager.register(
    return (
      <Dialog
        isOpen={true}
-        title={attributes ? "Edit internal link" : "Link to note"}
+        title={
+          attributes ? strings.editInternalLink() : strings.newInternalLink()
+        }
        width={500}
        onClose={() => props.onClose(false)}
        onOpen={async () => {
@@ -65,7 +67,7 @@ export const NoteLinkingDialog = DialogManager.register(
          );
        }}
        positiveButton={{
-          text: "Insert link",
+          text: attributes ? strings.done() : strings.insertLink(),
          disabled: !selectedNote,
          onClick: () =>
            selectedNote
@@ -75,7 +77,10 @@ export const NoteLinkingDialog = DialogManager.register(
                })
              : null
        }}
-        negativeButton={{ text: "Cancel", onClick: () => props.onClose(false) }}
+        negativeButton={{
+          text: strings.cancel(),
+          onClick: () => props.onClose(false)
+        }}
        noScroll
      >
        <Flex variant="columnFill" sx={{ mx: 3, overflow: "hidden" }}>
--- a/apps/web/src/dialogs/password-dialog.tsx
+++ b/apps/web/src/dialogs/password-dialog.tsx
@@ -24,6 +24,7 @@ import Field, { FieldProps } from "../components/field";
 import { Checkbox, Label } from "@theme-ui/components";
 import { mdToHtml } from "../utils/md";
 import { BaseDialogProps, DialogManager } from "../common/dialog-manager";
+import { strings } from "@notesnook/intl";

 type Check = { text: string; default?: boolean };
 export type PasswordDialogProps<
@@ -55,11 +56,11 @@ const PasswordDialog = DialogManager.register(function PasswordDialog<
      positiveButton={{
        form: "passwordForm",
        type: "submit",
-        text: "Submit",
+        text: strings.submit(),
        loading: isLoading,
        disabled: isLoading
      }}
-      negativeButton={{ text: "Cancel", onClick: () => onClose(false) }}
+      negativeButton={{ text: strings.cancel(), onClick: () => onClose(false) }}
    >
      <Box
        id="passwordForm"
--- a/apps/web/src/dialogs/prompt.tsx
+++ b/apps/web/src/dialogs/prompt.tsx
@@ -21,6 +21,7 @@ import { useRef } from "react";
 import Field from "../components/field";
 import Dialog from "../components/dialog";
 import { BaseDialogProps, DialogManager } from "../common/dialog-manager";
+import { strings } from "@notesnook/intl";

 export type PromptDialogProps = BaseDialogProps<false | string> & {
  title: string;
@@ -39,10 +40,13 @@ export const PromptDialog = DialogManager.register(function PromptDialog(
      description={props.description}
      onClose={() => props.onClose(false)}
      positiveButton={{
-        text: "Done",
+        text: strings.submit(),
        onClick: () => props.onClose(inputRef.current?.value || "")
      }}
-      negativeButton={{ text: "Cancel", onClick: () => props.onClose(false) }}
+      negativeButton={{
+        text: strings.cancel(),
+        onClick: () => props.onClose(false)
+      }}
    >
      <Field
        inputRef={inputRef}
--- a/apps/web/src/dialogs/reminder-preview-dialog.tsx
+++ b/apps/web/src/dialogs/reminder-preview-dialog.tsx
@@ -72,7 +72,7 @@ export const ReminderPreviewDialog = DialogManager.register(
        description={reminder.description}
        onClose={() => props.onClose(false)}
        negativeButton={{
-          text: "Close",
+          text: strings.close(),
          onClick: () => props.onClose(false)
        }}
      >
--- a/apps/web/src/dialogs/settings/behaviour-settings.ts
+++ b/apps/web/src/dialogs/settings/behaviour-settings.ts
@@ -30,7 +30,7 @@ export const BehaviourSettings: SettingsGroup[] = [
  {
    key: "general",
    section: "behaviour",
-    header: "General",
+    header: strings.general(),
    isHidden: () => !isUserPremium(),
    settings: [
      {
--- a/apps/web/src/dialogs/settings/components/subscription-status.tsx
+++ b/apps/web/src/dialogs/settings/components/subscription-status.tsx
@@ -145,14 +145,14 @@ export function SubscriptionStatus() {
                      title: "Cancel subscription?",
                      message:
                        "Cancelling your subscription will automatically downgrade you to the Basic plan at the end of your billing period. You will have to resubscribe to continue using the Pro features.",
-                      negativeButtonText: "No",
-                      positiveButtonText: "Yes"
+                      negativeButtonText: strings.no(),
+                      positiveButtonText: strings.yes()
                    });
                    if (cancelSubscription) {
                      await TaskManager.startTask({
                        type: "modal",
                        title: "Cancelling your subscription",
-                        subtitle: "Please wait...",
+                        subtitle: strings.pleaseWait() + "...",
                        action: () => db.subscriptions.cancel()
                      })
                        .catch((e) => showToast("error", e.message))
@@ -172,14 +172,14 @@ export function SubscriptionStatus() {
                    title: "Request refund?",
                    message:
                      "You will only be issued a refund if you are eligible as per our refund policy. Your account will be immediately downgraded to Basic and your funds will be transferred to your account within 24 hours.",
-                    negativeButtonText: "No",
-                    positiveButtonText: "Yes"
+                    negativeButtonText: strings.no(),
+                    positiveButtonText: strings.yes()
                  });
                  if (refundSubscription) {
                    await TaskManager.startTask({
                      type: "modal",
                      title: "Requesting refund for your subscription",
-                      subtitle: "Please wait...",
+                      subtitle: strings.pleaseWait() + "...",
                      action: () => db.subscriptions.refund()
                    })
                      .catch((e) => showToast("error", e.message))
--- a/apps/web/src/dialogs/settings/components/themes-selector.tsx
+++ b/apps/web/src/dialogs/settings/components/themes-selector.tsx
@@ -217,7 +217,7 @@ function ThemesList() {
        }}
      >
        {themes.isInitialLoading ? (
-          <Loader title={"Loading themes..."} />
+          <Loader title={strings.loadingThemes()} />
        ) : (
          <VirtualizedGrid
            columns={2}
--- a/apps/web/src/dialogs/settings/servers-settings.ts
+++ b/apps/web/src/dialogs/settings/servers-settings.ts
@@ -17,12 +17,13 @@ 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 { ServersConfiguration } from "./components/servers-configuration";
 import { SettingsGroup } from "./types";

 export const ServersSettings: SettingsGroup[] = [
  {
-    header: "Servers configuration",
+    header: strings.serversConfiguration(),
    key: "servers",
    section: "servers",
    settings: [
--- a/apps/web/src/dialogs/settings/vault-settings.tsx
+++ b/apps/web/src/dialogs/settings/vault-settings.tsx
@@ -31,7 +31,7 @@ export const VaultSettings: SettingsGroup[] = [
  {
    key: "vault",
    section: "vault",
-    header: "Vault",
+    header: strings.vault(),
    settings: [
      {
        key: "create-vault",
--- a/apps/web/src/dialogs/theme-details-dialog.tsx
+++ b/apps/web/src/dialogs/theme-details-dialog.tsx
@@ -41,12 +41,12 @@ export const ThemeDetailsDialog = DialogManager.register(
        isOpen={true}
        onClose={() => onClose(false)}
        positiveButton={{
-          text: `Set as default`,
+          text: strings.setAsDefault(),
          onClick: () => onClose(true),
          disabled: isThemeCurrentlyApplied(theme.id)
        }}
        negativeButton={{
-          text: "Close",
+          text: strings.cancel(),
          onClick: () => onClose(false)
        }}
      >
--- a/apps/web/src/views/auth.tsx
+++ b/apps/web/src/views/auth.tsx
@@ -571,32 +571,28 @@ function AccountRecovery(props: BaseAuthComponentProps<"recover">) {
 function getTexts(formData: MFAFormData) {
  return {
    app: {
-      subtitle:
-        "Please confirm your identity by entering the authentication code from your authenticator app.",
-      instructions: `Open the two-factor authentication (TOTP) app to view your authentication code.`,
-      selector: `Don't have access to your authenticator app?`,
-      label: "Enter 6-digit code"
+      subtitle: strings.mfaAuthAppSubtitle(),
+      instructions: strings.mfaAuthAppInstructions(),
+      selector: strings.mfaAuthAppSelector(),
+      label: strings.enterSixDigitCode()
    },
    email: {
-      subtitle:
-        "Please confirm your identity by entering the authentication code sent to your email address.",
-      instructions: `It may take a minute to receive your code.`,
-      selector: `Don't have access to your email address?`,
-      label: "Enter 6-digit code"
+      subtitle: strings.mfaEmailSubtitle(),
+      instructions: strings.mfaEmailInstructions(),
+      selector: strings.mfaEmailSelector(),
+      label: strings.enterSixDigitCode()
    },
    sms: {
-      subtitle: `Please confirm your identity by entering the authentication code sent to ${
-        formData.phoneNumber || "your registered phone number."
-      }.`,
-      instructions: `It may take a minute to receive your code.`,
-      selector: `Don't have access to your phone number?`,
-      label: "Enter 6-digit code"
+      subtitle: strings.mfaSmsSubtitle(formData.phoneNumber),
+      instructions: strings.mfaSmsInstructions(),
+      selector: strings.mfaSmsSelector(),
+      label: strings.enterSixDigitCode()
    },
    recoveryCode: {
-      subtitle: `Please confirm your identity by entering a recovery code.`,
+      subtitle: strings.mfaRecoveryCodeSubtitle(),
      instructions: "",
-      selector: `Don't have your recovery codes?`,
-      label: "Enter recovery code"
+      selector: strings.mfaRecoveryCodeSelector(),
+      label: strings.enterRecoveryCode()
    }
  };
 }
--- a/apps/web/src/views/notebook.tsx
+++ b/apps/web/src/views/notebook.tsx
@@ -564,7 +564,9 @@ function NotebookHeader({
            sx={{ borderRadius: 100, width: 30, height: 30 }}
            mr={1}
            p={0}
-            title={isShortcut ? "Remove shortcut" : "Create shortcut"}
+            title={
+              isShortcut ? strings.removeShortcut() : strings.createShortcut()
+            }
            onClick={() => addToShortcuts(notebook)}
          >
            {isShortcut ? (
--- a/apps/web/src/views/recovery.tsx
+++ b/apps/web/src/views/recovery.tsx
@@ -523,7 +523,7 @@ function Final(_props: BaseRecoveryComponentProps<"final">) {
  }, []);

  if (!isReady && !isSessionExpired)
-    return <Loader text="" title={"Finalizing. Please wait..."} />;
+    return <Loader text="" title={strings.loading() + "..."} />;

  return (
    <RecoveryForm
--- a/apps/web/vite.config.ts
+++ b/apps/web/vite.config.ts
@@ -20,7 +20,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import { PluginOption, defineConfig } from "vite";
 import react from "@vitejs/plugin-react-swc";
 import svgrPlugin from "vite-plugin-svgr";
-import commonjs from "vite-plugin-commonjs";
 import envCompatible from "vite-plugin-env-compatible";
 import { VitePWA } from "vite-plugin-pwa";
 import autoprefixer from "autoprefixer";
@@ -128,9 +127,6 @@ export default defineConfig({
    }
  },
  plugins: [
-    commonjs({
-      filter: (id) => (id.includes("notesnook/packages/intl") ? true : false)
-    }),
    ...(isAnalyzing
      ? [
          visualizer({