feat: language translation - projects list

packages/i18n/src/locales/en/translations.json

@@ -592,10 +592,6 @@
     }
   },
 
-  "project": {
-    "label": "{count, plural, one {Project} other {Projects}}"
-  },
-
   "view": {
     "label": "{count, plural, one {View} other {Views}}",
     "create": {
@@ -672,6 +668,10 @@
   },
 
   "workspace_projects": {
+    "label": "{count, plural, one {Project} other {Projects}}",
+    "create": {
+      "label": "Add Project"
+    },
     "network": {
       "private": {
         "title": "Private",
@@ -734,6 +734,9 @@
       "filter": {
         "title": "No matching projects",
         "description": "No projects detected with the matching criteria. \n Create a new project instead."
+      },
+      "search": {
+        "description": "No projects detected with the matching criteria.\nCreate a new project instead"
       }
     }
   },

web/ce/components/projects/mobile-header.tsx

@@ -4,6 +4,8 @@ import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // icons
 import { ChevronDown, ListFilter } from "lucide-react";
+// i18n
+import { useTranslation } from "@plane/i18n";
 // types
 import { TProjectFilters } from "@plane/types";
 // hooks
@@ -15,6 +17,8 @@ import { calculateTotalFilters } from "@/helpers/filter.helper";
 import { useMember, useProjectFilter } from "@/hooks/store";
 
 export const ProjectsListMobileHeader = observer(() => {
+  // i18n
+  const { t } = useTranslation();
   // router
   const { workspaceSlug } = useParams();
   const {
@@ -63,12 +67,12 @@ export const ProjectsListMobileHeader = observer(() => {
       <div className="border-l border-custom-border-200 flex justify-around w-full">
         <FiltersDropdown
           icon={<ListFilter className="h-3 w-3" />}
-          title="Filters"
+          title={t("common.filters")}
           placement="bottom-end"
           menuButton={
             <div className="flex text-sm items-center gap-2 neutral-primary text-custom-text-200">
               <ListFilter className="h-3 w-3" />
-              Filters
+              {t("common.filters")}
               <ChevronDown className="h-3 w-3" strokeWidth={2} />
             </div>
           }

web/core/components/project/applied-filters/root.tsx

@@ -1,6 +1,8 @@
 "use client";
 
 import { X } from "lucide-react";
+// i18n
+import { useTranslation } from "@plane/i18n";
 // types
 import { TProjectAppliedDisplayFilterKeys, TProjectFilters } from "@plane/types";
 // ui
@@ -30,6 +32,7 @@ const MEMBERS_FILTERS = ["lead", "members"];
 const DATE_FILTERS = ["created_at"];
 
 export const ProjectAppliedFiltersList: React.FC<Props> = (props) => {
+  const { t } = useTranslation();
   const {
     appliedFilters,
     appliedDisplayFilters,
@@ -95,7 +98,7 @@ export const ProjectAppliedFiltersList: React.FC<Props> = (props) => {
         {/* Applied display filters */}
         {appliedDisplayFilters.length > 0 && (
           <Tag key="project_display_filters">
-            <span className="text-xs text-custom-text-300">Projects</span>
+            <span className="text-xs text-custom-text-300">{t("projects.label", { count: 2 })}</span>
             <AppliedProjectDisplayFilters
               editable={isEditingAllowed}
               values={appliedDisplayFilters}
@@ -106,7 +109,7 @@ export const ProjectAppliedFiltersList: React.FC<Props> = (props) => {
         {isEditingAllowed && (
           <button type="button" onClick={handleClearAllFilters}>
             <Tag>
-              Clear all
+              {t("common.clear_all")}
               <X size={12} strokeWidth={2} />
             </Tag>
           </button>

web/core/components/project/card-list.tsx

@@ -83,11 +83,11 @@ export const ProjectCardList = observer((props: TProjectCardListProps) => {
             className="mx-auto h-36 w-36 sm:h-48 sm:w-48"
             alt="No matching projects"
           />
-          <h5 className="mb-1 mt-7 text-xl font-medium">No matching projects</h5>
+          <h5 className="mb-1 mt-7 text-xl font-medium">{t("workspace_projects.empty_state.filter.title")}</h5>
           <p className="whitespace-pre-line text-base text-custom-text-400">
             {searchQuery.trim() === ""
-              ? "Remove the filters to see all projects"
-              : "No projects detected with the matching criteria.\nCreate a new project instead"}
+              ? t("workspace_projects.empty_state.filter.description")
+              : t("workspace_projects.empty_state.search.description")}
           </p>
         </div>
       </div>

web/core/components/project/filters.tsx

@@ -2,6 +2,8 @@ import { useCallback } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import { ListFilter } from "lucide-react";
+// i18n
+import { useTranslation } from "@plane/i18n";
 // plane types
 import { TProjectFilters } from "@plane/types";
 // plane utils
@@ -22,6 +24,8 @@ type Props = {
 };
 
 const HeaderFilters = observer(({ filterMenuButton, isMobile, classname = "", filterClassname = "" }: Props) => {
+  // i18n
+  const { t } = useTranslation();
   // router
   const { workspaceSlug } = useParams();
   const {
@@ -72,7 +76,7 @@ const HeaderFilters = observer(({ filterMenuButton, isMobile, classname = "", fi
       <div className={cn(filterClassname)}>
         <FiltersDropdown
           icon={<ListFilter className="h-3 w-3" />}
-          title="Filters"
+          title={t("common.filters")}
           placement="bottom-end"
           isFiltersApplied={isFiltersApplied}
           menuButton={filterMenuButton || null}

web/core/components/project/header.tsx

@@ -3,6 +3,8 @@
 import { observer } from "mobx-react";
 import { usePathname } from "next/navigation";
 import { Briefcase } from "lucide-react";
+// i18n
+import { useTranslation } from "@plane/i18n";
 // ui
 import { Breadcrumbs, Button, Header } from "@plane/ui";
 // components
@@ -16,6 +18,8 @@ import HeaderFilters from "./filters";
 import { ProjectSearch } from "./search-projects";
 
 export const ProjectsBaseHeader = observer(() => {
+  // i18n
+  const { t } = useTranslation();
   // store hooks
   const { toggleCreateProjectModal } = useCommandPalette();
   const { setTrackElement } = useEventTracker();
@@ -35,7 +39,12 @@ export const ProjectsBaseHeader = observer(() => {
         <Breadcrumbs>
           <Breadcrumbs.BreadcrumbItem
             type="text"
-            link={<BreadcrumbLink label="Projects" icon={<Briefcase className="h-4 w-4 text-custom-text-300" />} />}
+            link={
+              <BreadcrumbLink
+                label={t("workspace_projects.label", { count: 2 })}
+                icon={<Briefcase className="h-4 w-4 text-custom-text-300" />}
+              />
+            }
           />
           {isArchived && <Breadcrumbs.BreadcrumbItem type="text" link={<BreadcrumbLink label="Archived" />} />}
         </Breadcrumbs>
@@ -54,7 +63,8 @@ export const ProjectsBaseHeader = observer(() => {
             }}
             className="items-center gap-1"
           >
-            <span className="hidden sm:inline-block">Add</span> Project
+            <span className="hidden sm:inline-block">{t("workspace_projects.create.label")}</span>
+            <span className="inline-block sm:hidden">{t("workspace_projects.label", { count: 1 })}</span>
           </Button>
         ) : (
           <></>

web/core/components/project/project-feature-update.tsx

@@ -35,8 +35,9 @@ export const ProjectFeatureUpdate: FC<Props> = observer((props) => {
       </Row>
       <div className="flex items-center justify-between gap-2 mt-4 px-6 py-4 border-t border-custom-border-100">
         <div className="flex gap-1 text-sm text-custom-text-300 font-medium">
-          {t("congrats")}! {t("project.label", { count: 1 })} <Logo logo={currentProjectDetails.logo_props} />{" "}
-          <p className="break-all">{currentProjectDetails.name}</p> {t("created").toLowerCase()}.
+          {t("congrats")}! {t("workspace_projects.label", { count: 1 })}{" "}
+          <Logo logo={currentProjectDetails.logo_props} /> <p className="break-all">{currentProjectDetails.name}</p>{" "}
+          {t("created").toLowerCase()}.
         </div>
         <div className="flex gap-2">
           <Button variant="neutral-primary" size="sm" onClick={onClose} tabIndex={1}>

web/core/components/project/root.tsx

@@ -2,8 +2,9 @@
 
 import { useCallback, useEffect } from "react";
 import { observer } from "mobx-react";
-// types
 import { useParams, usePathname } from "next/navigation";
+// i18n
+import { useTranslation } from "@plane/i18n";
 import { TProjectAppliedDisplayFilterKeys, TProjectFilters } from "@plane/types";
 // components
 import { PageHead } from "@/components/core";
@@ -17,6 +18,7 @@ const Root = observer(() => {
   const { currentWorkspace } = useWorkspace();
   const { workspaceSlug } = useParams();
   const pathname = usePathname();
+  const { t } = useTranslation();
   // store
   const { totalProjectIds, filteredProjectIds } = useProject();
   const {
@@ -28,7 +30,9 @@ const Root = observer(() => {
     updateDisplayFilters,
   } = useProjectFilter();
   // derived values
-  const pageTitle = currentWorkspace?.name ? `${currentWorkspace?.name} - Projects` : undefined;
+  const pageTitle = currentWorkspace?.name
+    ? `${currentWorkspace?.name} - ${t("workspace_projects.label", { count: 2 })}`
+    : undefined;
 
   const isArchived = pathname.includes("/archives");
 

web/core/components/project/search-projects.tsx

@@ -5,12 +5,16 @@ import { observer } from "mobx-react";
 import { Search, X } from "lucide-react";
 // plane hooks
 import { useOutsideClickDetector } from "@plane/hooks";
+// i18n
+import { useTranslation } from "@plane/i18n";
 // helpers
 import { cn } from "@/helpers/common.helper";
 // hooks
 import { useProjectFilter } from "@/hooks/store";
 
 export const ProjectSearch: FC = observer(() => {
+  // i18n
+  const { t } = useTranslation();
   // hooks
   const { searchQuery, updateSearchQuery } = useProjectFilter();
   // refs
@@ -55,7 +59,7 @@ export const ProjectSearch: FC = observer(() => {
         <input
           ref={inputRef}
           className="w-full max-w-[234px] border-none bg-transparent text-sm text-custom-text-100 placeholder:text-custom-text-400 focus:outline-none"
-          placeholder="Search"
+          placeholder={t("common.search")}
           value={searchQuery}
           onChange={(e) => updateSearchQuery(e.target.value)}
           onKeyDown={handleInputKeyDown}