more translations

apps/client/src/ee/security/components/allowed-domains.tsx

@@ -55,9 +55,11 @@ export default function AllowedDomains() {
   return (
     <>
       <div>
-        <Text size="md">Allowed email domains</Text>
+        <Text size="md">{t("Allowed email domains")}</Text>
         <Text size="sm" c="dimmed">
-          Only users with email addresses from these domains can signup via SSO.
+          {t(
+            "Only users with email addresses from these domains can signup via SSO.",
+          )}
         </Text>
       </div>
       <form onSubmit={form.onSubmit(handleSubmit)}>

apps/client/src/ee/security/components/sso-google-form.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { z } from "zod";
-import { useForm, zodResolver } from "@mantine/form";
+import { useForm } from "@mantine/form";
+import { zodResolver } from "mantine-form-zod-resolver";
 import { Box, Button, Group, Stack, Switch, TextInput } from "@mantine/core";
 import classes from "@/ee/security/components/sso.module.css";
 import { IAuthProvider } from "@/ee/security/types/security.types.ts";

apps/client/src/ee/security/components/sso-ldap-form.tsx

@@ -110,7 +110,7 @@ export function SsoLDAPForm({ provider, onClose }: SsoFormProps) {
       <form onSubmit={form.onSubmit(handleSubmit)}>
         <Stack>
           <TextInput
-            label="Display name"
+            label={t("Display name")}
             placeholder="e.g Company LDAP"
             data-autofocus
             {...form.getInputProps("name")}
@@ -155,7 +155,7 @@ export function SsoLDAPForm({ provider, onClose }: SsoFormProps) {
           <Accordion variant="separated">
             <Accordion.Item value="advanced">
               <Accordion.Control icon={<IconInfoCircle size={20} />}>
-                Advanced Settings
+                {t("Advanced Settings")}
               </Accordion.Control>
               <Accordion.Panel>
                 <Stack>

apps/client/src/ee/security/components/sso-oidc-form.tsx

@@ -83,7 +83,7 @@ export function SsoOIDCForm({ provider, onClose }: SsoFormProps) {
       <form onSubmit={form.onSubmit(handleSubmit)}>
         <Stack>
           <TextInput
-            label="Display name"
+            label={t("Display name")}
             placeholder="e.g Google SSO"
             data-autofocus
             {...form.getInputProps("name")}

apps/client/src/ee/security/components/sso-provider-modal.tsx

@@ -6,6 +6,7 @@ import { SSO_PROVIDER } from "@/ee/security/contants.ts";
 import { SsoOIDCForm } from "@/ee/security/components/sso-oidc-form.tsx";
 import { SsoGoogleForm } from "@/ee/security/components/sso-google-form.tsx";
 import { SsoLDAPForm } from "@/ee/security/components/sso-ldap-form.tsx";
+import { useTranslation } from "react-i18next";
 
 interface SsoModalProps {
   opened: boolean;
@@ -18,6 +19,8 @@ export default function SsoProviderModal({
   onClose,
   provider,
 }: SsoModalProps) {
+  const { t } = useTranslation();
+
   if (!provider) {
     return null;
   }
@@ -25,7 +28,9 @@ export default function SsoProviderModal({
   return (
     <Modal
       opened={opened}
-      title={`${provider.type.toUpperCase()} Configuration`}
+      title={t("{{ssoProviderType}} configuration", {
+        ssoProviderType: provider.type.toUpperCase(),
+      })}
       onClose={onClose}
     >
       {provider.type === SSO_PROVIDER.SAML && (

apps/client/src/ee/security/components/sso-saml-form.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { z } from "zod";
-import { useForm, zodResolver } from "@mantine/form";
+import { useForm } from "@mantine/form";
+import { zodResolver } from "mantine-form-zod-resolver";
 import {
   Box,
   Button,
@@ -91,7 +92,7 @@ export function SsoSamlForm({ provider, onClose }: SsoFormProps) {
       <form onSubmit={form.onSubmit(handleSubmit)}>
         <Stack>
           <TextInput
-            label="Display name"
+            label={t("Display name")}
             placeholder="e.g Azure Entra"
             data-autofocus
             {...form.getInputProps("name")}

apps/client/src/features/search/components/search-result-item.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Group, Center, Text, Badge, ActionIcon } from "@mantine/core";
+import { Group, Center, Text, Badge, ActionIcon, Tooltip } from "@mantine/core";
 import { Spotlight } from "@mantine/spotlight";
 import { Link } from "react-router-dom";
 import { IconFile, IconDownload } from "@tabler/icons-react";
@@ -10,6 +10,7 @@ import {
   IPageSearch,
 } from "@/features/search/types/search.types";
 import DOMPurify from "dompurify";
+import { useTranslation } from "react-i18next";
 
 interface SearchResultItemProps {
   result: IPageSearch | IAttachmentSearch;
@@ -22,6 +23,8 @@ export function SearchResultItem({
   isAttachmentResult,
   showSpace,
 }: SearchResultItemProps) {
+  const { t } = useTranslation();
+  
   if (isAttachmentResult) {
     const attachmentResult = result as IAttachmentSearch;
 
@@ -68,14 +71,15 @@ export function SearchResultItem({
             )}
           </div>
 
-          <ActionIcon
-            variant="subtle"
-            color="gray"
-            onClick={handleDownload}
-            title="Download attachment"
-          >
-            <IconDownload size={18} />
-          </ActionIcon>
+          <Tooltip label={t("Download attachment")} withArrow>
+            <ActionIcon
+              variant="subtle"
+              color="gray"
+              onClick={handleDownload}
+            >
+              <IconDownload size={18} />
+            </ActionIcon>
+          </Tooltip>
         </Group>
       </Spotlight.Action>
     );

apps/client/src/features/search/components/search-spotlight-filters.tsx

@@ -75,10 +75,10 @@ export function SearchSpotlightFilters({
   }, []);
 
   const contentTypeOptions = [
-    { value: "page", label: "Pages" },
+    { value: "page", label: t("Pages") },
     {
       value: "attachment",
-      label: "Attachments",
+      label: t("Attachments"),
       disabled: !hasLicenseKey,
     },
   ];
@@ -136,13 +136,13 @@ export function SearchSpotlightFilters({
             fw={500}
           >
             {selectedSpaceId
-              ? `Space: ${selectedSpaceData?.name || "Unknown"}`
-              : "Space: All spaces"}
+              ? `${t("Space")}: ${selectedSpaceData?.name || t("Unknown")}`
+              : `${t("Space")}: ${t("All spaces")}`}
           </Button>
         </Menu.Target>
         <Menu.Dropdown>
           <TextInput
-            placeholder="Find a space"
+            placeholder={t("Find a space")}
             data-autofocus
             autoFocus
             leftSection={<IconSearch size={16} />}
@@ -160,15 +160,15 @@ export function SearchSpotlightFilters({
                 <Avatar
                   color="initials"
                   variant="filled"
-                  name="All spaces"
+                  name={t("All spaces")}
                   size={20}
                 />
                 <div style={{ flex: 1 }}>
                   <Text size="sm" fw={500}>
-                    All spaces
+                    {t("All spaces")}
                   </Text>
                   <Text size="xs" c="dimmed">
-                    Search in all your spaces
+                    {t("Search in all your spaces")}
                   </Text>
                 </div>
                 {!selectedSpaceId && <IconCheck size={20} />}
@@ -217,8 +217,8 @@ export function SearchSpotlightFilters({
             fw={500}
           >
             {contentType
-              ? `Type: ${contentTypeOptions.find((opt) => opt.value === contentType)?.label || contentType}`
-              : "Type"}
+              ? `${t("Type")}: ${contentTypeOptions.find((opt) => opt.value === contentType)?.label || t(contentType === "page" ? "Pages" : "Attachments")}`
+              : t("Type")}
           </Button>
         </Menu.Target>
         <Menu.Dropdown>
@@ -237,7 +237,7 @@ export function SearchSpotlightFilters({
                   <Text size="sm">{option.label}</Text>
                   {option.disabled && (
                     <Badge size="xs" mt={4}>
-                      Enterprise
+                      {t("Enterprise")}
                     </Badge>
                   )}
                 </div>