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
2025-06-25 21:30:24 +01:00
parent 014fdbb7d8
commit dd061c6d00
79 changed files with 11822 additions and 883 deletions
--- a/apps/web/src/views/settings/components/Avatar.tsx
+++ b/apps/web/src/views/settings/components/Avatar.tsx
@@ -1,4 +1,5 @@
 import Image from "next/image";
+import { t } from "@lingui/core/macro";
 import { env } from "next-runtime-env";
 import { useState } from "react";

@@ -20,8 +21,8 @@ export default function Avatar({
  const updateUser = api.user.update.useMutation({
    onSuccess: async () => {
      showPopup({
-        header: "Profile image updated",
-        message: "Your profile image has been updated.",
+        header: t`Profile image updated`,
+        message: t`Your profile image has been updated.`,
        icon: "success",
      });
      try {
@@ -33,8 +34,8 @@ export default function Avatar({
    },
    onError: () => {
      showPopup({
-        header: "Error updating profile image",
-        message: "Please try again later, or contact customer support.",
+        header: t`Error updating profile image`,
+        message: t`Please try again later, or contact customer support.`,
        icon: "error",
      });
    },
@@ -50,8 +51,8 @@ export default function Avatar({

      if (!file || !userId) {
        return showPopup({
-          header: "Error uploading profile image",
-          message: "Please select a file to upload.",
+          header: t`Error uploading profile image`,
+          message: t`Please select a file to upload.`,
          icon: "error",
        });
      }
@@ -91,8 +92,8 @@ export default function Avatar({
    } catch (error) {
      console.error(error);
      showPopup({
-        header: "Error uploading profile image",
-        message: "Please try again later, or contact customer support.",
+        header: t`Error uploading profile image`,
+        message: t`Please try again later, or contact customer support.`,
        icon: "error",
      });
    } finally {
--- a/apps/web/src/views/settings/components/CreateAPIKeyForm.tsx
+++ b/apps/web/src/views/settings/components/CreateAPIKeyForm.tsx
@@ -1,3 +1,5 @@
+import { t } from "@lingui/core/macro";
+
 import { authClient } from "@kan/auth/client";

 import Button from "~/components/Button";
@@ -44,12 +46,12 @@ const CreateAPIKeyForm = ({
          </div>
          <div>
            <Button variant="danger" onClick={handleRevokeAPIKey}>
-              Revoke
+              {t`Revoke`}
            </Button>
          </div>
        </div>
      ) : (
-        <Button onClick={handleCreateAPIKey}>Create new key</Button>
+        <Button onClick={handleCreateAPIKey}>{t`Create new key`}</Button>
      )}
    </div>
  );
--- a/apps/web/src/views/settings/components/CustomURLConfirmation.tsx
+++ b/apps/web/src/views/settings/components/CustomURLConfirmation.tsx
@@ -1,3 +1,5 @@
+import { t } from "@lingui/core/macro";
+
 import Button from "~/components/Button";
 import { useModal } from "~/providers/modal";

@@ -37,19 +39,17 @@ export function CustomURLConfirmation({
    <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">
-          {`Confirm URL change`}
+          {t`Confirm URL change`}
        </h2>
        <p className="text-sm font-medium text-light-900 dark:text-dark-900">
-          {
-            "Custom URLs are a premium feature. You'll be directed to upgrade your account."
-          }
+          {t`Custom URLs are a premium feature. You'll be directed to upgrade your account.`}
        </p>
      </div>
      <div className="mt-5 flex justify-end space-x-2 sm:mt-6">
        <Button onClick={() => closeModal()} variant="secondary">
-          Cancel
+          {t`Cancel`}
        </Button>
-        <Button onClick={handleUpgrade}>Upgrade</Button>
+        <Button onClick={handleUpgrade}>{t`Upgrade`}</Button>
      </div>
    </div>
  );
--- a/apps/web/src/views/settings/components/DeleteAccountConfirmation.tsx
+++ b/apps/web/src/views/settings/components/DeleteAccountConfirmation.tsx
@@ -1,8 +1,10 @@
-import { authClient } from "@kan/auth/client";
-import { useMutation } from "@tanstack/react-query";
 import { useRouter } from "next/navigation";
+import { t } from "@lingui/core/macro";
+import { useMutation } from "@tanstack/react-query";
 import { useState } from "react";

+import { authClient } from "@kan/auth/client";
+
 import Button from "~/components/Button";
 import { useModal } from "~/providers/modal";
 import { usePopup } from "~/providers/popup";
@@ -22,20 +24,20 @@ export function DeleteAccountConfirmation() {
    onSuccess: async () => {
      closeModal();
      showPopup({
-        header: "Account deleted",
-        message: "Your account has been deleted.",
+        header: t`Account deleted`,
+        message: t`Your account has been deleted.`,
        icon: "success",
      });

      utils.invalidate();
-      
+
      router.push("/");
    },
    onError: () => {
      closeModal();
      showPopup({
-        header: "Error deleting account",
-        message: "Please try again later, or contact customer support.",
+        header: t`Error deleting account`,
+        message: t`Please try again later, or contact customer support.`,
        icon: "error",
      });
    },
@@ -49,14 +51,13 @@ export function DeleteAccountConfirmation() {
    <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 your account?`}
+          {t`Are you sure you want to delete your account?`}
        </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
-          your account.
+          {t`This will result in the permanent deletion of all data associated with your account.`}
        </p>
      </div>
      <div className="relative flex items-start">
@@ -78,14 +79,13 @@ export function DeleteAccountConfirmation() {
            id="comments-description"
            className="text-light-900 dark:text-dark-1000"
          >
-            I acknowledge that all of my account data will be permanently
-            deleted and want to proceed.
+            {t`I acknowledge that all of my account 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"
@@ -93,7 +93,7 @@ export function DeleteAccountConfirmation() {
          disabled={!isAcknowledgmentChecked}
          isLoading={deleteAccountMutation.isPending}
        >
-          Delete account
+          {t`Delete account`}
        </Button>
      </div>
    </div>
--- a/apps/web/src/views/settings/components/DeleteWorkspaceConfirmation.tsx
+++ b/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>
--- a/apps/web/src/views/settings/components/UpdateDisplayNameForm.tsx
+++ b/apps/web/src/views/settings/components/UpdateDisplayNameForm.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";

@@ -7,22 +8,22 @@ import Input from "~/components/Input";
 import { usePopup } from "~/providers/popup";
 import { api } from "~/utils/api";

-const schema = z.object({
-  name: z
-    .string()
-    .min(3, {
-      message: "Display namemust be at least 3 characters long",
-    })
-    .max(280, {
-      message: "Display name cannot exceed 280 characters",
-    }),
-});
-
-type FormValues = z.infer<typeof schema>;
-
 const UpdateDisplayNameForm = ({ displayName }: { displayName: string }) => {
  const utils = api.useUtils();
  const { showPopup } = usePopup();
+
+  const schema = z.object({
+    name: z
+      .string()
+      .min(3, {
+        message: t`Display name must be at least 3 characters long`,
+      })
+      .max(280, {
+        message: t`Display name cannot exceed 280 characters`,
+      }),
+  });
+
+  type FormValues = z.infer<typeof schema>;
  const {
    register,
    handleSubmit,
@@ -37,8 +38,8 @@ const UpdateDisplayNameForm = ({ displayName }: { displayName: string }) => {
  const updateDisplayName = api.user.update.useMutation({
    onSuccess: async () => {
      showPopup({
-        header: "Display name updated",
-        message: "Your display name has been updated.",
+        header: t`Display name updated`,
+        message: t`Your display name has been updated.`,
        icon: "success",
      });
      try {
@@ -50,8 +51,8 @@ const UpdateDisplayNameForm = ({ displayName }: { displayName: string }) => {
    },
    onError: () => {
      showPopup({
-        header: "Error updating display name",
-        message: "Please try again later, or contact customer support.",
+        header: t`Error updating display name`,
+        message: t`Please try again later, or contact customer support.`,
        icon: "error",
      });
    },
@@ -75,7 +76,7 @@ const UpdateDisplayNameForm = ({ displayName }: { displayName: string }) => {
          disabled={!isDirty || updateDisplayName.isPending}
          isLoading={updateDisplayName.isPending}
        >
-          Update
+          {t`Update`}
        </Button>
      </div>
    </div>
--- a/apps/web/src/views/settings/components/UpdateWorkspaceDescriptionForm.tsx
+++ b/apps/web/src/views/settings/components/UpdateWorkspaceDescriptionForm.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";

@@ -7,19 +8,6 @@ import Input from "~/components/Input";
 import { usePopup } from "~/providers/popup";
 import { api } from "~/utils/api";

-const schema = z.object({
-  description: z
-    .string()
-    .min(3, {
-      message: "Workspace description must be at least 3 characters long",
-    })
-    .max(280, {
-      message: "Workspace description cannot exceed 280 characters",
-    }),
-});
-
-type FormValues = z.infer<typeof schema>;
-
 const UpdateWorkspaceDescriptionForm = ({
  workspacePublicId,
  workspaceDescription,
@@ -29,6 +17,20 @@ const UpdateWorkspaceDescriptionForm = ({
 }) => {
  const utils = api.useUtils();
  const { showPopup } = usePopup();
+
+  const schema = z.object({
+    description: z
+      .string()
+      .min(3, {
+        message: t`Workspace description must be at least 3 characters long`,
+      })
+      .max(280, {
+        message: t`Workspace description cannot exceed 280 characters`,
+      }),
+  });
+
+  type FormValues = z.infer<typeof schema>;
+
  const {
    register,
    handleSubmit,
@@ -43,8 +45,8 @@ const UpdateWorkspaceDescriptionForm = ({
  const updateWorkspaceDescription = api.workspace.update.useMutation({
    onSuccess: async () => {
      showPopup({
-        header: "Workspace description updated",
-        message: "Your workspace description has been updated.",
+        header: t`Workspace description updated`,
+        message: t`Your workspace description has been updated.`,
        icon: "success",
      });
      try {
@@ -56,8 +58,8 @@ const UpdateWorkspaceDescriptionForm = ({
    },
    onError: () => {
      showPopup({
-        header: "Error updating workspace description",
-        message: "Please try again later, or contact customer support.",
+        header: t`Error updating workspace description`,
+        message: t`Please try again later, or contact customer support.`,
        icon: "error",
      });
    },
@@ -85,7 +87,7 @@ const UpdateWorkspaceDescriptionForm = ({
          disabled={!isDirty || updateWorkspaceDescription.isPending}
          isLoading={updateWorkspaceDescription.isPending}
        >
-          Update
+          {t`Update`}
        </Button>
      </div>
    </div>
--- a/apps/web/src/views/settings/components/UpdateWorkspaceNameForm.tsx
+++ b/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>
--- a/apps/web/src/views/settings/components/UpdateWorkspaceUrlForm.tsx
+++ b/apps/web/src/views/settings/components/UpdateWorkspaceUrlForm.tsx
@@ -1,4 +1,5 @@
 import { zodResolver } from "@hookform/resolvers/zod";
+import { t } from "@lingui/core/macro";
 import { env } from "next-runtime-env";
 import { useForm } from "react-hook-form";
 import { HiCheck, HiMiniStar } from "react-icons/hi2";
@@ -11,20 +12,6 @@ import { useModal } from "~/providers/modal";
 import { usePopup } from "~/providers/popup";
 import { api } from "~/utils/api";

-const schema = z.object({
-  slug: z
-    .string()
-    .min(3, {
-      message: "URL must be at least 3 characters long",
-    })
-    .max(24, { message: "URL cannot exceed 24 characters" })
-    .regex(/^(?![-]+$)[a-zA-Z0-9-]+$/, {
-      message: "URL can only contain letters, numbers, and hyphens",
-    }),
-});
-
-type FormValues = z.infer<typeof schema>;
-
 const UpdateWorkspaceUrlForm = ({
  workspacePublicId,
  workspaceUrl,
@@ -37,6 +24,21 @@ const UpdateWorkspaceUrlForm = ({
  const utils = api.useUtils();
  const { showPopup } = usePopup();
  const { openModal } = useModal();
+
+  const schema = z.object({
+    slug: z
+      .string()
+      .min(3, {
+        message: t`URL must be at least 3 characters long`,
+      })
+      .max(24, { message: t`URL cannot exceed 24 characters` })
+      .regex(/^(?![-]+$)[a-zA-Z0-9-]+$/, {
+        message: t`URL can only contain letters, numbers, and hyphens`,
+      }),
+  });
+
+  type FormValues = z.infer<typeof schema>;
+
  const {
    register,
    handleSubmit,
@@ -55,8 +57,8 @@ const UpdateWorkspaceUrlForm = ({
  const updateWorkspaceSlug = api.workspace.update.useMutation({
    onSuccess: async () => {
      showPopup({
-        header: "Workspace slug updated",
-        message: "Your workspace slug has been updated.",
+        header: t`Workspace slug updated`,
+        message: t`Your workspace slug has been updated.`,
        icon: "success",
      });
      try {
@@ -68,8 +70,8 @@ const UpdateWorkspaceUrlForm = ({
    },
    onError: () => {
      showPopup({
-        header: "Error updating workspace URL",
-        message: "Please try again later, or contact customer support.",
+        header: t`Error updating workspace URL`,
+        message: t`Please try again later, or contact customer support.`,
        icon: "error",
      });
    },
@@ -118,7 +120,7 @@ const UpdateWorkspaceUrlForm = ({
          errorMessage={
            errors.slug?.message ||
            (isWorkspaceSlugAvailable?.isAvailable === false
-              ? "This workspace username has already been taken"
+              ? t`This workspace username has already been taken`
              : undefined)
          }
          prefix={
@@ -149,7 +151,7 @@ const UpdateWorkspaceUrlForm = ({
          }
          isLoading={updateWorkspaceSlug.isPending}
        >
-          Update
+          {t`Update`}
        </Button>
      </div>
    </div>
--- a/apps/web/src/views/settings/index.tsx
+++ b/apps/web/src/views/settings/index.tsx
@@ -1,8 +1,10 @@
+import { t } from "@lingui/core/macro";
 import { env } from "next-runtime-env";
 import { useEffect } from "react";
 import { HiMiniArrowTopRightOnSquare } from "react-icons/hi2";

 import Button from "~/components/Button";
+import { LanguageSelector } from "~/components/LanguageSelector";
 import Modal from "~/components/modal";
 import { NewWorkspaceForm } from "~/components/NewWorkspaceForm";
 import { PageHead } from "~/components/PageHead";
@@ -35,12 +37,17 @@ export default function SettingsPage() {
  } = api.integration.providers.useQuery();

  const { data: trelloUrl, refetch: refetchTrelloUrl } =
-    api.integration.getAuthorizationUrl.useQuery({ provider: "trello" }, {
-      enabled:
-        !integrationsLoading &&
-        !integrations?.some((integration) => integration.provider === "trello"),
-      refetchOnWindowFocus: true,
-    });
+    api.integration.getAuthorizationUrl.useQuery(
+      { provider: "trello" },
+      {
+        enabled:
+          !integrationsLoading &&
+          !integrations?.some(
+            (integration) => integration.provider === "trello",
+          ),
+        refetchOnWindowFocus: true,
+      },
+    );

  useEffect(() => {
    const handleFocus = () => {
@@ -52,25 +59,26 @@ export default function SettingsPage() {
    };
  }, [refetchIntegrations]);

-  const { mutateAsync: disconnectTrello } = api.integration.disconnect.useMutation({
-    onSuccess: () => {
-      refetchUser();
-      refetchIntegrations();
-      refetchTrelloUrl();
-      showPopup({
-        header: "Trello disconnected",
-        message: "Your Trello account has been disconnected.",
-        icon: "success",
-      });
-    },
-    onError: () => {
-      showPopup({
-        header: "Error disconnecting Trello",
-        message: "An error occurred while disconnecting your Trello account.",
-        icon: "error",
-      });
-    },
-  });
+  const { mutateAsync: disconnectTrello } =
+    api.integration.disconnect.useMutation({
+      onSuccess: () => {
+        refetchUser();
+        refetchIntegrations();
+        refetchTrelloUrl();
+        showPopup({
+          header: t`Trello disconnected`,
+          message: t`Your Trello account has been disconnected.`,
+          icon: "success",
+        });
+      },
+      onError: () => {
+        showPopup({
+          header: t`Error disconnecting Trello`,
+          message: t`An error occurred while disconnecting your Trello account.`,
+          icon: "error",
+        });
+      },
+    });

  const refetchUser = () => utils.user.getUser.refetch();

@@ -97,29 +105,29 @@ export default function SettingsPage() {
    <>
      <div className="flex h-full w-full flex-col overflow-hidden">
        <div className="h-full max-h-[calc(100vh-4rem)] overflow-y-auto">
-          <PageHead title={`Settings | ${workspace.name ?? "Workspace"}`} />
+          <PageHead title={t`Settings | ${workspace.name ?? "Workspace"}`} />
          <div className="px-28 py-12">
            <div className="mb-8 flex w-full justify-between">
              <h1 className="font-bold tracking-tight text-neutral-900 dark:text-dark-1000 sm:text-[1.2rem]">
-                Settings
+                {t`Settings`}
              </h1>
            </div>

            <div className="mb-8 border-t border-light-300 dark:border-dark-300">
              <h2 className="mb-4 mt-8 text-[14px] text-neutral-900 dark:text-dark-1000">
-                Profile picture
+                {t`Profile picture`}
              </h2>
              <Avatar userId={data?.id} userImage={data?.image} />

              <h2 className="mb-4 mt-8 text-[14px] text-neutral-900 dark:text-dark-1000">
-                Display name
+                {t`Display name`}
              </h2>
              <UpdateDisplayNameForm displayName={data?.name ?? ""} />
            </div>

            <div className="mb-8 border-t border-light-300 dark:border-dark-300">
              <h2 className="mb-4 mt-8 text-[14px] text-neutral-900 dark:text-dark-1000">
-                Workspace name
+                {t`Workspace name`}
              </h2>
              <UpdateWorkspaceNameForm
                workspacePublicId={workspace.publicId}
@@ -127,16 +135,16 @@ export default function SettingsPage() {
              />

              <h2 className="mb-4 mt-8 text-[14px] text-neutral-900 dark:text-dark-1000">
-                Workspace URL
+                {t`Workspace URL`}
              </h2>
              <UpdateWorkspaceUrlForm
                workspacePublicId={workspace.publicId}
-                workspaceUrl={workspace.slug}
-                workspacePlan={workspace.plan}
+                workspaceUrl={workspace.slug ?? ""}
+                workspacePlan={workspace.plan ?? "free"}
              />

              <h2 className="mb-4 mt-8 text-[14px] text-neutral-900 dark:text-dark-1000">
-                Workspace description
+                {t`Workspace description`}
              </h2>
              <UpdateWorkspaceDescriptionForm
                workspacePublicId={workspace.publicId}
@@ -144,20 +152,30 @@ export default function SettingsPage() {
              />
            </div>

+            <div className="mb-8 border-t border-light-300 dark:border-dark-300">
+              <h2 className="mb-4 mt-8 text-[14px] text-neutral-900 dark:text-dark-1000">
+                {t`Language`}
+              </h2>
+              <p className="mb-8 text-sm text-neutral-500 dark:text-dark-900">
+                {t`Change the language of the app.`}
+              </p>
+              <LanguageSelector />
+            </div>
+
            {env("NEXT_PUBLIC_KAN_ENV") === "cloud" && (
              <div className="mb-8 border-t border-light-300 dark:border-dark-300">
                <h2 className="mb-4 mt-8 text-[14px] text-neutral-900 dark:text-dark-1000">
-                  Billing
+                  {t`Billing`}
                </h2>
                <p className="mb-8 text-sm text-neutral-500 dark:text-dark-900">
-                  View and manage your billing and subscription.
+                  {t`View and manage your billing and subscription.`}
                </p>
                <Button
                  variant="primary"
                  iconRight={<HiMiniArrowTopRightOnSquare />}
                  onClick={handleOpenBillingPortal}
                >
-                  Billing portal
+                  {t`Billing portal`}
                </Button>
              </div>
            )}
@@ -171,7 +189,7 @@ export default function SettingsPage() {
              ) && trelloUrl ? (
                <>
                  <p className="mb-8 text-sm text-neutral-500 dark:text-dark-900">
-                    Connect your Trello account to import boards.
+                    {t`Connect your Trello account to import boards.`}
                  </p>
                  <Button
                    variant="primary"
@@ -184,32 +202,34 @@ export default function SettingsPage() {
                      )
                    }
                  >
-                    Connect Trello
+                    {t`Connect Trello`}
                  </Button>
                </>
              ) : (
-                <>
-                  <p className="mb-8 text-sm text-neutral-500 dark:text-dark-900">
-                    You are already connected to Trello.
-                  </p>
-                  <Button
-                    variant="primary"
-                    onClick={() => {
-                      disconnectTrello({ provider: "trello" });
-                    }}
-                  >
-                    Disconnect Trello
-                  </Button>
-                </>
+                integrations?.some(
+                  (integration) => integration.provider === "trello",
+                ) && (
+                  <>
+                    <p className="mb-8 text-sm text-neutral-500 dark:text-dark-900">
+                      {t`Your Trello account is connected.`}
+                    </p>
+                    <Button
+                      variant="secondary"
+                      onClick={() => disconnectTrello({ provider: "trello" })}
+                    >
+                      {t`Disconnect Trello`}
+                    </Button>
+                  </>
+                )
              )}
            </div>

            <div className="mb-8 border-t border-light-300 dark:border-dark-300">
              <h2 className="mb-4 mt-8 text-[14px] text-neutral-900 dark:text-dark-1000">
-                API keys
+                {t`API keys`}
              </h2>
              <p className="mb-8 text-sm text-neutral-500 dark:text-dark-900">
-                View and manage your API keys.
+                {t`View and manage your API keys.`}
              </p>
              <CreateAPIKeyForm
                apiKey={data?.apiKey}
@@ -219,36 +239,35 @@ export default function SettingsPage() {

            <div className="mb-8 border-t border-light-300 dark:border-dark-300">
              <h2 className="mb-4 mt-8 text-[14px] text-neutral-900 dark:text-dark-1000">
-                Delete workspace
+                {t`Delete workspace`}
              </h2>
              <p className="mb-8 text-sm text-neutral-500 dark:text-dark-900">
-                Once you delete your workspace, there is no going back. This
-                action cannot be undone.
+                {t`Once you delete your workspace, there is no going back. This action cannot be undone.`}
              </p>
              <div className="mt-4">
                <Button
                  variant="secondary"
                  onClick={() => openModal("DELETE_WORKSPACE")}
+                  disabled={workspace.role !== "admin"}
                >
-                  Delete workspace
+                  {t`Delete workspace`}
                </Button>
              </div>
            </div>

            <div className="mb-8 border-t border-light-300 dark:border-dark-300">
              <h2 className="mb-4 mt-8 text-[14px] text-neutral-900 dark:text-dark-1000">
-                Delete account
+                {t`Delete account`}
              </h2>
              <p className="mb-8 text-sm text-neutral-500 dark:text-dark-900">
-                Once you delete your account, there is no going back. This
-                action cannot be undone.
+                {t`Once you delete your account, there is no going back. This action cannot be undone.`}
              </p>
              <div className="mt-4">
                <Button
                  variant="secondary"
                  onClick={() => openModal("DELETE_ACCOUNT")}
                >
-                  Delete account
+                  {t`Delete account`}
                </Button>
              </div>
            </div>