feat: localisation and multi-lang support (#95)

* feat: setup localisation with lingui

* Fix hydration and locale issues

* Add missing translations and tweak selector styling

* Extend language support

* Update lang support

* Extend lang support

* Fix build and add dyanmic imports

apps/web/src/views/card/components/DeleteCommentConfirmation.tsx

@@ -1,3 +1,5 @@
+import { t } from "@lingui/core/macro";
+
 import Button from "~/components/Button";
 import { useModal } from "~/providers/modal";
 import { usePopup } from "~/providers/popup";
@@ -39,8 +41,8 @@ export function DeleteCommentConfirmation({
     onError: (_error, _newList, context) => {
       utils.card.byId.setData(queryParams, context?.previousState);
       showPopup({
-        header: "Unable to delete comment",
-        message: "Please try again later, or contact customer support.",
+        header: t`Unable to delete comment`,
+        message: t`Please try again later, or contact customer support.`,
         icon: "error",
       });
     },
@@ -60,10 +62,10 @@ export function DeleteCommentConfirmation({
     <div className="p-5">
       <div className="flex w-full flex-col justify-between pb-4">
         <h2 className="text-md pb-4 font-medium text-neutral-900 dark:text-dark-1000">
-          Are you sure you want to delete this comment?
+          {t`Are you sure you want to delete this comment?`}
         </h2>
         <p className="text-sm font-medium text-light-900 dark:text-dark-900">
-          {"This action can't be undone."}
+          {t`This action can't be undone.`}
         </p>
       </div>
       <div className="mt-5 flex justify-end sm:mt-6">
@@ -71,13 +73,13 @@ export function DeleteCommentConfirmation({
           className="mr-4 inline-flex justify-center rounded-md border-[1px] border-light-600 bg-light-50 px-3 py-2 text-sm font-semibold text-neutral-900 shadow-sm focus-visible:outline-none dark:border-dark-600 dark:bg-dark-300 dark:text-dark-1000"
           onClick={() => closeModal()}
         >
-          Cancel
+          {t`Cancel`}
         </button>
         <Button
           onClick={handleDeleteComment}
           isLoading={deleteCommentMutation.isPending}
         >
-          Delete
+          {t`Delete`}
         </Button>
       </div>
     </div>