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/settings/components/DeleteWorkspaceConfirmation.tsx

@@ -1,4 +1,6 @@
 import { useRouter } from "next/navigation";
+import { t } from "@lingui/core/macro";
+import { Trans } from "@lingui/react/macro";
 import { useState } from "react";
 
 import Button from "~/components/Button";
@@ -21,13 +23,13 @@ export function DeleteWorkspaceConfirmation() {
     onSuccess: async () => {
       closeModal();
       showPopup({
-        header: "Workspace deleted",
-        message: "Your workspace has been deleted.",
+        header: t`Workspace deleted`,
+        message: t`Your workspace has been deleted.`,
         icon: "success",
       });
 
       await utils.workspace.all.refetch();
-      
+
       const filteredWorkspaces = availableWorkspaces.filter(
         (ws) => ws.publicId !== workspace.publicId,
       );
@@ -40,8 +42,8 @@ export function DeleteWorkspaceConfirmation() {
     onError: () => {
       closeModal();
       showPopup({
-        header: "Error deleting workspace",
-        message: "Please try again later, or contact customer support.",
+        header: t`Error deleting workspace`,
+        message: t`Please try again later, or contact customer support.`,
         icon: "error",
       });
     },
@@ -57,14 +59,15 @@ export function DeleteWorkspaceConfirmation() {
     <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 the workspace ${workspace.name}?`}
+          <Trans>
+            Are you sure you want to delete the workspace {workspace.name}?
+          </Trans>
         </h2>
         <p className="mb-4 text-sm text-light-900 dark:text-dark-900">
-          Keep in mind that this action is irreversible.
+          {t`Keep in mind that this action is irreversible.`}
         </p>
         <p className="text-sm text-light-900 dark:text-dark-900">
-          This will result in the permanent deletion of all data associated with
-          this workspace.
+          {t`This will result in the permanent deletion of all data associated with this workspace.`}
         </p>
       </div>
       <div className="relative flex items-start">
@@ -86,14 +89,13 @@ export function DeleteWorkspaceConfirmation() {
             id="comments-description"
             className="text-light-900 dark:text-dark-1000"
           >
-            I acknowledge that all of the workspace data will be permanently
-            deleted and want to proceed.
+            {t`I acknowledge that all of the workspace data will be permanently deleted and want to proceed.`}
           </p>
         </div>
       </div>
       <div className="mt-5 flex justify-end space-x-2 sm:mt-6">
         <Button variant="secondary" onClick={() => closeModal()}>
-          Cancel
+          {t`Cancel`}
         </Button>
         <Button
           variant="danger"
@@ -101,7 +103,7 @@ export function DeleteWorkspaceConfirmation() {
           disabled={!isAcknowledgmentChecked}
           isLoading={deleteWorkspaceMutation.isPending}
         >
-          Delete workspace
+          {t`Delete workspace`}
         </Button>
       </div>
     </div>