Update lang support

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" />

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>

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>

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}