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/UpdateWorkspaceNameForm.tsx

@@ -1,4 +1,5 @@
 import { zodResolver } from "@hookform/resolvers/zod";
+import { t } from "@lingui/core/macro";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 
@@ -10,8 +11,8 @@ import { api } from "~/utils/api";
 const schema = z.object({
   name: z
     .string()
-    .min(3, { message: "Workspace name must be at least 3 characters long" })
-    .max(24, { message: "Workspace name cannot exceed 24 characters" }),
+    .min(3, { message: t`Workspace name must be at least 3 characters long` })
+    .max(24, { message: t`Workspace name cannot exceed 24 characters` }),
 });
 
 type FormValues = z.infer<typeof schema>;
@@ -39,8 +40,8 @@ const UpdateWorkspaceNameForm = ({
   const updateWorkspaceName = api.workspace.update.useMutation({
     onSuccess: async () => {
       showPopup({
-        header: "Workspace name updated",
-        message: "Your workspace name has been updated.",
+        header: t`Workspace name updated`,
+        message: t`Your workspace name has been updated.`,
         icon: "success",
       });
       try {
@@ -52,8 +53,8 @@ const UpdateWorkspaceNameForm = ({
     },
     onError: () => {
       showPopup({
-        header: "Error updating workspace name",
-        message: "Please try again later, or contact customer support.",
+        header: t`Error updating workspace name`,
+        message: t`Please try again later, or contact customer support.`,
         icon: "error",
       });
     },
@@ -78,7 +79,7 @@ const UpdateWorkspaceNameForm = ({
           disabled={!isDirty || updateWorkspaceName.isPending}
           isLoading={updateWorkspaceName.isPending}
         >
-          Update
+          {t`Update`}
         </Button>
       </div>
     </div>