Update lang support

2025-06-25 12:12:47 +01:00
parent bf2db74528
commit 8a93951464
30 changed files with 2046 additions and 115 deletions
--- a/apps/web/src/views/board/components/List.tsx
+++ b/apps/web/src/views/board/components/List.tsx
@@ -1,4 +1,5 @@
 import type { ReactNode } from "react";
+import { t } from "@lingui/core/macro";
 import { Draggable } from "react-beautiful-dnd";
 import { useForm } from "react-hook-form";
 import {
@@ -106,14 +107,14 @@ export default function List({
                <Dropdown
                  items={[
                    {
-                      label: "Add a card",
+                      label: t`Add a card`,
                      action: () => openNewCardForm(list.publicId),
                      icon: (
                        <HiOutlineSquaresPlus className="h-[18px] w-[18px] text-dark-900" />
                      ),
                    },
                    {
-                      label: "Delete list",
+                      label: t`Delete list`,
                      action: handleOpenDeleteListConfirmation,
                      icon: (
                        <HiOutlineTrash className="h-[18px] w-[18px] text-dark-900" />
--- a/apps/web/src/views/board/components/NewCardForm.tsx
+++ b/apps/web/src/views/board/components/NewCardForm.tsx
@@ -1,3 +1,5 @@
+import { t } from "@lingui/core/macro";
+import { Trans } from "@lingui/react/macro";
 import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import {
@@ -115,10 +117,10 @@ export function NewCardForm({
    onError: (error, _newList, context) => {
      utils.board.byId.setData(queryParams, context?.previousState);
      showPopup({
-        header: "Unable to create card",
+        header: t`Unable to create card`,
        message: error.data?.zodError?.fieldErrors.title?.[0]
          ? `${error.data.zodError.fieldErrors.title[0].replace("String", "Title")}`
-          : "Please try again later, or contact customer support.",
+          : t`Please try again later, or contact customer support.`,
        icon: "error",
      });
    },
@@ -226,7 +228,7 @@ export function NewCardForm({
      <div className="px-5 pt-5">
        <div className="flex w-full items-center justify-between pb-5">
          <h2 className="text-sm font-bold text-neutral-900 dark:text-dark-1000">
-            New card
+            {t`New card`}
          </h2>
          <button
            type="button"
@@ -243,7 +245,7 @@ export function NewCardForm({
        <div>
          <Input
            id="title"
-            placeholder="Card title"
+            placeholder={t`Card title`}
            {...register("title")}
            onKeyDown={async (e) => {
              if (e.key === "Enter") {
@@ -316,7 +318,7 @@ export function NewCardForm({
                openModal("EDIT_LABEL", labelPublicId)
              }
              handleCreate={() => openModal("NEW_LABEL")}
-              createNewItemLabel="Create new label"
+              createNewItemLabel={t`Create new label`}
            >
              <div className="flex h-full w-full items-center rounded-[5px] border-[1px] border-light-600 bg-light-200 px-2 py-1 text-left text-xs text-light-800 hover:bg-light-300 dark:border-dark-600 dark:bg-dark-400 dark:text-dark-1000 dark:hover:bg-dark-500">
                {!labelPublicIds.length ? (
@@ -353,7 +355,9 @@ export function NewCardForm({
                      })}
                    </div>
                    {labelPublicIds.length > 1 && (
-                      <div className="ml-1">{`${labelPublicIds.length} labels`}</div>
+                      <div className="ml-1">
+                        <Trans>{`${labelPublicIds.length} labels`}</Trans>
+                      </div>
                    )}
                  </>
                )}
@@ -378,7 +382,7 @@ export function NewCardForm({

      <div className="mt-5 flex items-center justify-end border-t border-light-600 px-5 pb-5 pt-5 dark:border-dark-600">
        <Toggle
-          label="Create another"
+          label={t`Create another`}
          isChecked={isCreateAnotherEnabled}
          onChange={handleToggleCreateAnother}
        />
@@ -388,7 +392,7 @@ export function NewCardForm({
            type="submit"
            disabled={title.length === 0 || createCard.isPending}
          >
-            Create card
+            {t`Create card`}
          </Button>
        </div>
      </div>
--- a/apps/web/src/views/board/components/VisibilityButton.tsx
+++ b/apps/web/src/views/board/components/VisibilityButton.tsx
@@ -1,3 +1,4 @@
+import { t } from "@lingui/core/macro";
 import { useEffect, useState } from "react";
 import { HiOutlineEye, HiOutlineEyeSlash } from "react-icons/hi2";

@@ -41,15 +42,15 @@ const VisibilityButton = ({
  const updateBoardVisibility = api.board.update.useMutation({
    onSuccess: () => {
      showPopup({
-        header: "Board visibility updated",
-        message: `The visibility of your board has been set to ${isPublic ? "public" : "private"}.`,
+        header: t`Board visibility updated`,
+        message: t`The visibility of your board has been set to ${isPublic ? "public" : "private"}.`,
        icon: "success",
      });
    },
    onError: () => {
      showPopup({
-        header: "Unable to update board visibility",
-        message: "Please try again later, or contact customer support.",
+        header: t`Unable to update board visibility`,
+        message: t`Please try again later, or contact customer support.`,
        icon: "error",
      });
    },
@@ -64,12 +65,12 @@ const VisibilityButton = ({
        items={[
          {
            key: "public",
-            value: "Public",
+            value: t`Public`,
            selected: isPublic,
          },
          {
            key: "private",
-            value: "Private",
+            value: t`Private`,
            selected: !isPublic,
          },
        ]}
@@ -87,7 +88,7 @@ const VisibilityButton = ({
          iconLeft={isPublic ? <HiOutlineEye /> : <HiOutlineEyeSlash />}
          disabled={isLoading || !isAdmin}
        >
-          Visibility
+          {t`Visibility`}
        </Button>
      </CheckboxDropdown>
    </div>
--- a/apps/web/src/views/board/index.tsx
+++ b/apps/web/src/views/board/index.tsx
@@ -2,6 +2,7 @@ import type { DropResult } from "react-beautiful-dnd";
 import Link from "next/link";
 import { useParams } from "next/navigation";
 import { useRouter } from "next/router";
+import { t } from "@lingui/core/macro";
 import { keepPreviousData } from "@tanstack/react-query";
 import { useEffect, useState } from "react";
 import { DragDropContext, Draggable } from "react-beautiful-dnd";
@@ -128,8 +129,8 @@ export default function BoardPage() {
    onError: (_error, _newList, context) => {
      utils.board.byId.setData(queryParams, context?.previousState);
      showPopup({
-        header: "Unable to update list",
-        message: "Please try again later, or contact customer support.",
+        header: t`Unable to update list`,
+        message: t`Please try again later, or contact customer support.`,
        icon: "error",
      });
    },
@@ -184,8 +185,8 @@ export default function BoardPage() {
    onError: (_error, _newList, context) => {
      utils.board.byId.setData(queryParams, context?.previousState);
      showPopup({
-        header: "Unable to update card",
-        message: "Please try again later, or contact customer support.",
+        header: t`Unable to update card`,
+        message: t`Please try again later, or contact customer support.`,
        icon: "error",
      });
    },
@@ -235,7 +236,7 @@ export default function BoardPage() {
  return (
    <>
      <PageHead
-        title={`${boardData?.name ?? "Board"} | ${workspace.name ?? "Workspace"}`}
+        title={`${boardData?.name ?? t`Board`} | ${workspace.name ?? t`Workspace`}`}
      />
      <div className="relative flex h-full flex-col">
        <PatternedBackground />
@@ -261,7 +262,7 @@ export default function BoardPage() {
          )}
          {!boardData && !isLoading && (
            <p className="block p-0 py-0 font-bold leading-[2.3rem] tracking-tight text-neutral-900 dark:text-dark-1000 sm:text-[1.2rem]">
-              Board not found
+              {t`Board not found`}
            </p>
          )}

@@ -292,7 +293,7 @@ export default function BoardPage() {
              }}
              disabled={!boardData}
            >
-              New list
+              {t`New list`}
            </Button>
            <BoardDropdown isLoading={!boardData} />
          </div>
@@ -307,15 +308,15 @@ export default function BoardPage() {
            </div>
          ) : boardData ? (
            <>
-              {boardData?.lists.length === 0 ? (
+              {boardData.lists.length === 0 ? (
                <div className="z-10 flex h-full w-full flex-col items-center justify-center space-y-8 pb-[150px]">
                  <div className="flex flex-col items-center">
                    <HiOutlineSquare3Stack3D className="h-10 w-10 text-light-800 dark:text-dark-800" />
                    <p className="mb-2 mt-4 text-[14px] font-bold text-light-1000 dark:text-dark-950">
-                      No lists
+                      {t`No lists`}
                    </p>
                    <p className="text-[14px] text-light-900 dark:text-dark-900">
-                      Get started by creating a new list
+                      {t`Get started by creating a new list`}
                    </p>
                  </div>
                  <Button
@@ -323,7 +324,7 @@ export default function BoardPage() {
                      if (boardId) openNewListForm(boardId);
                    }}
                  >
-                    Create new list
+                    {t`Create new list`}
                  </Button>
                </div>
              ) : (
@@ -340,7 +341,7 @@ export default function BoardPage() {
                        {...provided.droppableProps}
                      >
                        <div className="min-w-[2rem]" />
-                        {boardData?.lists.map((list, index) => (
+                        {boardData.lists.map((list, index) => (
                          <List
                            index={index}
                            key={index}
--- a/apps/web/src/views/boards/components/BoardsList.tsx
+++ b/apps/web/src/views/boards/components/BoardsList.tsx
@@ -1,4 +1,5 @@
 import Link from "next/link";
+import { t } from "@lingui/core/macro";
 import { HiOutlineRectangleStack } from "react-icons/hi2";

 import Button from "~/components/Button";
@@ -18,7 +19,7 @@ export function BoardsList() {

  if (isLoading)
    return (
-      <div className="grid w-full grid-cols-1 gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xxl:grid-cols-7">
+      <div className="xxl:grid-cols-7 grid w-full grid-cols-1 gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
        <div className="mr-5 flex h-[150px] w-full animate-pulse rounded-md bg-light-200 dark:bg-dark-100" />
        <div className="mr-5 flex h-[150px] w-full animate-pulse rounded-md bg-light-200 dark:bg-dark-100" />
        <div className="mr-5 flex h-[150px] w-full animate-pulse rounded-md bg-light-200 dark:bg-dark-100" />
@@ -31,13 +32,15 @@ export function BoardsList() {
        <div className="flex flex-col items-center">
          <HiOutlineRectangleStack className="h-10 w-10 text-light-800 dark:text-dark-800" />
          <p className="mb-2 mt-4 text-[14px] font-bold text-light-1000 dark:text-dark-950">
-            No boards
+            {t`No boards`}
          </p>
          <p className="text-[14px] text-light-900 dark:text-dark-900">
-            Get started by creating a new board
+            {t`Get started by creating a new board`}
          </p>
        </div>
-        <Button onClick={() => openModal("NEW_BOARD")}>Create new board</Button>
+        <Button onClick={() => openModal("NEW_BOARD")}>
+          {t`Create new board`}
+        </Button>
      </div>
    );

--- a/apps/web/src/views/boards/components/ImportBoardsForm.tsx
+++ b/apps/web/src/views/boards/components/ImportBoardsForm.tsx
@@ -1,5 +1,7 @@
 import Link from "next/link";
 import { Listbox, Transition } from "@headlessui/react";
+import { t } from "@lingui/core/macro";
+import { Plural, Trans } from "@lingui/react/macro";
 import { Fragment, useEffect, useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { FaTrello } from "react-icons/fa";
@@ -152,7 +154,7 @@ const SelectSource = ({ handleNextStep }: { handleNextStep: () => void }) => {
              !hasIntegrations ? <HiMiniArrowTopRightOnSquare /> : undefined
            }
          >
-            {hasIntegrations ? "Select source" : "Connect Trello"}
+            {hasIntegrations ? t`Select source` : t`Connect Trello`}
          </Button>
        </div>
      </div>
@@ -186,8 +188,8 @@ const ImportTrello: React.FC = () => {
  const importBoards = api.import.trello.importBoards.useMutation({
    onSuccess: async () => {
      showPopup({
-        header: "Import complete",
-        message: "Your boards have been imported.",
+        header: t`Import complete`,
+        message: t`Your boards have been imported.`,
        icon: "success",
      });
      try {
@@ -199,8 +201,8 @@ const ImportTrello: React.FC = () => {
    },
    onError: () => {
      showPopup({
-        header: "Import failed",
-        message: "Please try again later, or contact customer support.",
+        header: t`Import failed`,
+        message: t`Please try again later, or contact customer support.`,
        icon: "error",
      });
    },
@@ -211,6 +213,8 @@ const ImportTrello: React.FC = () => {
    value: watch(board.id),
  }));

+  const boardCount = boardWatchers?.filter((w) => w.value === true).length || 0;
+
  const onSubmitBoards = (values: Record<string, boolean>) => {
    const boardIds = Object.keys(values).filter((key) => values[key] === true);

@@ -235,7 +239,7 @@ const ImportTrello: React.FC = () => {
      return (
        <div className="flex h-full w-full items-center justify-center">
          <p className="text-sm text-neutral-500 dark:text-dark-900">
-            No boards found
+            {t`No boards found`}
          </p>
        </div>
      );
@@ -267,7 +271,7 @@ const ImportTrello: React.FC = () => {

      <div className="mt-12 flex items-center justify-end border-t border-light-600 px-5 pb-5 pt-5 dark:border-dark-600">
        <Toggle
-          label="Select all"
+          label={t`Select all`}
          isChecked={!!isSelectAllEnabled}
          onChange={() => {
            const newState = !isSelectAllEnabled;
@@ -292,8 +296,13 @@ const ImportTrello: React.FC = () => {
              )
            }
          >
-            Import boards (
-            {boardWatchers?.filter((w) => w.value === true).length || 0})
+            <Trans>
+              <Plural
+                value={boardCount}
+                one={`Import board (1)`}
+                other={`Import boards (${boardCount})`}
+              />
+            </Trans>
          </Button>
        </div>
      </div>
@@ -310,7 +319,7 @@ export function ImportBoardsForm() {
      <div className="flex w-full items-center justify-between px-5 pb-4 pt-5">
        <div className="flex items-center">
          <h2 className="text-sm font-medium text-neutral-900 dark:text-dark-1000">
-            New import
+            {t`New import`}
          </h2>
          <Link
            href="https://docs.kan.bn/imports/trello"
--- a/apps/web/src/views/boards/components/NewBoardForm.tsx
+++ b/apps/web/src/views/boards/components/NewBoardForm.tsx
@@ -1,3 +1,4 @@
+import { t } from "@lingui/core/macro";
 import { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { HiXMark } from "react-icons/hi2";
@@ -45,7 +46,7 @@ export function NewBoardForm() {
    <form onSubmit={handleSubmit(onSubmit)}>
      <div className="px-5 pt-5">
        <div className="text-neutral-9000 flex w-full items-center justify-between pb-4 dark:text-dark-1000">
-          <h2 className="text-sm font-bold">New board</h2>
+          <h2 className="text-sm font-bold">{t`New board`}</h2>
          <button
            type="button"
            className="hover:bg-li ght-300 rounded p-1 focus:outline-none dark:hover:bg-dark-300"
@@ -59,7 +60,7 @@ export function NewBoardForm() {
        </div>
        <Input
          id="name"
-          placeholder="Name"
+          placeholder={t`Name`}
          {...register("name", { required: true })}
          onKeyDown={async (e) => {
            if (e.key === "Enter") {
@@ -73,7 +74,7 @@ export function NewBoardForm() {
      <div className="mt-12 flex items-center justify-end border-t border-light-600 px-5 pb-5 pt-5 dark:border-dark-600">
        <div>
          <Button type="submit" isLoading={createBoard.isPending}>
-            Create board
+            {t`Create board`}
          </Button>
        </div>
      </div>
--- a/apps/web/src/views/boards/index.tsx
+++ b/apps/web/src/views/boards/index.tsx
@@ -1,3 +1,4 @@
+import { t } from "@lingui/core/macro";
 import { HiArrowDownTray, HiOutlinePlusSmall } from "react-icons/hi2";

 import Modal from "~/components/modal";
@@ -17,11 +18,11 @@ export default function BoardsPage() {

  return (
    <>
-      <PageHead title={`Boards | ${workspace.name ?? "Workspace"}`} />
+      <PageHead title={t`Boards | ${workspace.name ?? "Workspace"}`} />
      <div className="h-full p-8">
        <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]">
-            Boards
+            {t`Boards`}
          </h1>
          <div className="flex">
            <button
@@ -35,7 +36,7 @@ export default function BoardsPage() {
                  aria-hidden="true"
                />
              </div>
-              Import
+              {t`Import`}
            </button>
            <button
              type="button"
@@ -48,7 +49,7 @@ export default function BoardsPage() {
                  aria-hidden="true"
                />
              </div>
-              New
+              {t`New`}
            </button>
          </div>
        </div>
--- a/apps/web/src/views/settings/index.tsx
+++ b/apps/web/src/views/settings/index.tsx
@@ -3,6 +3,7 @@ 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 +36,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 +58,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: "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 refetchUser = () => utils.user.getUser.refetch();

@@ -144,6 +151,16 @@ 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">
+                Language
+              </h2>
+              <p className="mb-8 text-sm text-neutral-500 dark:text-dark-900">
+                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">