chore: allow some hardcoded strings to be translated (#4076)

Allow some hardcoded strings to be translated

Also add pt-PT translation for them

web/src/components/MemoEditor/ActionButton/MarkdownMenu.tsx

@@ -1,6 +1,7 @@
 import { Dropdown, Menu, MenuButton, MenuItem, Link } from "@mui/joy";
 import { Button } from "@usememos/mui";
 import { CheckSquareIcon, Code2Icon, SquareSlashIcon } from "lucide-react";
+import { useTranslate } from "@/utils/i18n";
 import { EditorRefActions } from "../Editor";
 
 interface Props {
@@ -8,6 +9,8 @@ interface Props {
 }
 
 const MarkdownMenu = (props: Props) => {
+  const t = useTranslate();
+
   const { editorRef } = props;
 
   const handleCodeBlockClick = () => {
@@ -67,15 +70,15 @@ const MarkdownMenu = (props: Props) => {
       <Menu className="text-sm" size="sm" placement="bottom-start">
         <MenuItem onClick={handleCodeBlockClick}>
           <Code2Icon className="w-4 h-auto" />
-          <span>Code block</span>
+          <span>{t("markdown.code-block")}</span>
         </MenuItem>
         <MenuItem onClick={handleCheckboxClick}>
           <CheckSquareIcon className="w-4 h-auto" />
-          <span>Checkbox</span>
+          <span>{t("markdown.checkbox")}</span>
         </MenuItem>
         <div className="-mt-0.5 pl-2">
           <Link fontSize={12} href="https://www.usememos.com/docs/getting-started/content-syntax" target="_blank">
-            Content syntax
+            {t("markdown.content-syntax")}
           </Link>
         </div>
       </Menu>

web/src/components/Settings/AccessTokenSection.tsx

@@ -56,10 +56,10 @@ const AccessTokenSection = () => {
         <div className="sm:flex sm:items-center sm:justify-between">
           <div className="sm:flex-auto space-y-1">
             <p className="flex flex-row justify-start items-center font-medium text-gray-700 dark:text-gray-400">
-              Access Tokens
+              {t("setting.access-token-section.title")}
               <LearnMore className="ml-2" url="https://usememos.com/docs/security/access-tokens" />
             </p>
-            <p className="text-sm text-gray-700 dark:text-gray-500">A list of all access tokens for your account.</p>
+            <p className="text-sm text-gray-700 dark:text-gray-500">{t("setting.access-token-section.description")}</p>
           </div>
           <div className="mt-4 sm:mt-0">
             <Button
@@ -79,16 +79,16 @@ const AccessTokenSection = () => {
                 <thead>
                   <tr>
                     <th scope="col" className="px-3 py-2 text-left text-sm font-semibold text-gray-900 dark:text-gray-400">
-                      Token
+                      {t("setting.access-token-section.token")}
                     </th>
                     <th scope="col" className="py-2 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 dark:text-gray-400">
-                      Description
+                      {t("common.description")}
                     </th>
                     <th scope="col" className="px-3 py-2 text-left text-sm font-semibold text-gray-900 dark:text-gray-400">
-                      Created At
+                      {t("setting.access-token-section.created-at")}
                     </th>
                     <th scope="col" className="px-3 py-2 text-left text-sm font-semibold text-gray-900 dark:text-gray-400">
-                      Expires At
+                      {t("setting.access-token-section.expires-at")}
                     </th>
                     <th scope="col" className="relative py-3.5 pl-3 pr-4">
                       <span className="sr-only">{t("common.delete")}</span>

web/src/components/Settings/MemoRelatedSettings.tsx

@@ -59,7 +59,7 @@ const MemoRelatedSettings = () => {
 
   return (
     <div className="w-full flex flex-col gap-2 pt-2 pb-4">
-      <p className="font-medium text-gray-700 dark:text-gray-500">Memo related settings</p>
+      <p className="font-medium text-gray-700 dark:text-gray-500">{t("setting.memo-related-settings.title")}</p>
       <div className="w-full flex flex-row justify-between items-center">
         <span>{t("setting.system-section.disable-public-memos")}</span>
         <Switch
@@ -82,21 +82,21 @@ const MemoRelatedSettings = () => {
         />
       </div>
       <div className="w-full flex flex-row justify-between items-center">
-        <span>Enable link preview</span>
+        <span>{t("setting.memo-related-settings.enable-link-preview")}</span>
         <Switch
           checked={memoRelatedSetting.enableLinkPreview}
           onChange={(event) => updatePartialSetting({ enableLinkPreview: event.target.checked })}
         />
       </div>
       <div className="w-full flex flex-row justify-between items-center">
-        <span>Enable memo comments</span>
+        <span>{t("setting.memo-related-settings.enable-memo-comments")}</span>
         <Switch
           checked={memoRelatedSetting.enableComment}
           onChange={(event) => updatePartialSetting({ enableComment: event.target.checked })}
         />
       </div>
       <div className="w-full flex flex-row justify-between items-center">
-        <span>Enable memo location</span>
+        <span>{t("setting.memo-related-settings.enable-memo-location")}</span>
         <Switch
           checked={memoRelatedSetting.enableLocation}
           onChange={(event) => updatePartialSetting({ enableLocation: event.target.checked })}
@@ -117,7 +117,7 @@ const MemoRelatedSettings = () => {
         />
       </div>
       <div className="w-full flex flex-row justify-between items-center">
-        <span>Content length limit(Byte)</span>
+        <span>{t("setting.memo-related-settings.content-lenght-limit")}</span>
         <Input
           className="w-24"
           type="number"
@@ -145,7 +145,7 @@ const MemoRelatedSettings = () => {
         </Select>
       </div>
       <div className="w-full">
-        <span className="truncate">Reactions</span>
+        <span className="truncate">{t("setting.memo-related-settings.reactions")}</span>
         <div className="mt-2 w-full flex flex-row flex-wrap gap-1">
           {memoRelatedSetting.reactions.map((reactionType) => {
             return (

web/src/components/Settings/SSOSection.tsx

@@ -76,7 +76,7 @@ const SSOSection = () => {
       ))}
       {identityProviderList.length === 0 && (
         <div className="w-full mt-2 text-sm dark:border-zinc-700 opacity-60 flex flex-row items-center justify-between">
-          <p className="">No SSO found.</p>
+          <p className="">{t("setting.sso-section.no-sso-found")}</p>
         </div>
       )}
 
@@ -89,7 +89,7 @@ const SSOSection = () => {
               to="https://www.usememos.com/docs/advanced-settings/keycloak"
               target="_blank"
             >
-              Configuring Keycloak for Authentication
+              {t("setting.sso-section.configuring-keycloak-for-authentication")}
             </Link>
           </ListItem>
         </List>

web/src/components/Settings/WebhookSection.tsx

@@ -43,7 +43,9 @@ const WebhookSection = () => {
     <div className="w-full flex flex-col justify-start items-start">
       <div className="w-full flex justify-between items-center">
         <div className="flex-auto space-y-1">
-          <p className="flex flex-row justify-start items-center font-medium text-gray-700 dark:text-gray-400">Webhooks</p>
+          <p className="flex flex-row justify-start items-center font-medium text-gray-700 dark:text-gray-400">
+            {t("setting.webhook-section.title")}
+          </p>
         </div>
         <div>
           <Button
@@ -63,10 +65,10 @@ const WebhookSection = () => {
               <thead>
                 <tr>
                   <th scope="col" className="px-3 py-2 text-left text-sm font-semibold text-gray-900 dark:text-gray-400">
-                    Name
+                    {t("common.name")}
                   </th>
                   <th scope="col" className="px-3 py-2 text-left text-sm font-semibold text-gray-900 dark:text-gray-400">
-                    Url
+                    {t("setting.webhook-section.url")}
                   </th>
                   <th scope="col" className="relative px-3 py-2 pr-4">
                     <span className="sr-only">{t("common.delete")}</span>
@@ -95,7 +97,7 @@ const WebhookSection = () => {
                 {webhooks.length === 0 && (
                   <tr>
                     <td className="whitespace-nowrap px-3 py-2 text-sm text-gray-900 dark:text-gray-400" colSpan={3}>
-                      No webhooks found.
+                      {t("setting.webhook-section.no-webhooks-found")}
                     </td>
                   </tr>
                 )}

web/src/components/Settings/WorkspaceSection.tsx

@@ -106,35 +106,35 @@ const WorkspaceSection = () => {
         </Link>
       </div>
       <div className="w-full flex flex-row justify-between items-center">
-        <span>Disallow user registration</span>
+        <span>{t("setting.workspace-section.disallow-user-registration")}</span>
         <Switch
           checked={workspaceGeneralSetting.disallowUserRegistration}
           onChange={(event) => updatePartialSetting({ disallowUserRegistration: event.target.checked })}
         />
       </div>
       <div className="w-full flex flex-row justify-between items-center">
-        <span>Disallow password auth</span>
+        <span>{t("setting.workspace-section.disallow-password-auth")}</span>
         <Switch
           checked={workspaceGeneralSetting.disallowPasswordAuth}
           onChange={(event) => updatePartialSetting({ disallowPasswordAuth: event.target.checked })}
         />
       </div>
       <div className="w-full flex flex-row justify-between items-center">
-        <span>Disallow Change Username</span>
+        <span>{t("setting.workspace-section.disallow-change-username")}</span>
         <Switch
           checked={workspaceGeneralSetting.disallowChangeUsername}
           onChange={(event) => updatePartialSetting({ disallowChangeUsername: event.target.checked })}
         />
       </div>
       <div className="w-full flex flex-row justify-between items-center">
-        <span>Disallow Change Nickname</span>
+        <span>{t("setting.workspace-section.disallow-change-nickname")}</span>
         <Switch
           checked={workspaceGeneralSetting.disallowChangeNickname}
           onChange={(event) => updatePartialSetting({ disallowChangeNickname: event.target.checked })}
         />
       </div>
       <div className="w-full flex flex-row justify-between items-center">
-        <span className="truncate">Week start day</span>
+        <span className="truncate">{t("setting.workspace-section.week-start-day")}</span>
         <Select
           className="!min-w-fit"
           value={workspaceGeneralSetting.weekStartDayOffset}
@@ -142,9 +142,9 @@ const WorkspaceSection = () => {
             updatePartialSetting({ weekStartDayOffset: weekStartDayOffset || 0 });
           }}
         >
-          <Option value={-1}>Saturday</Option>
-          <Option value={0}>Sunday</Option>
-          <Option value={1}>Monday</Option>
+          <Option value={-1}>{t("setting.workspace-section.saturday")}</Option>
+          <Option value={0}>{t("setting.workspace-section.sunday")}</Option>
+          <Option value={1}>{t("setting.workspace-section.monday")}</Option>
         </Select>
       </div>
       <div className="mt-2 w-full flex justify-end">

web/src/locales/en.json

@@ -235,7 +235,9 @@
       "template": "Template",
       "token-endpoint": "Token endpoint",
       "update-sso": "Update SSO",
-      "user-endpoint": "User endpoint"
+      "user-endpoint": "User endpoint",
+      "no-sso-found": "No SSO found.",
+      "configuring-keycloak-for-authentication": "Configuring Keycloak for Authentication"
     },
     "storage": "Storage",
     "storage-section": {
@@ -299,7 +301,38 @@
       "max-upload-size-hint": "Recommended value is 32 MiB.",
       "server-name": "Server Name"
     },
-    "memo-related": "Memo"
+    "memo-related": "Memo",
+    "access-token-section":{
+      "title": "Access Tokens",
+      "description": "A list of all access tokens for your account.",
+      "created-at": "Created At",
+      "expires-at": "Expires At",
+      "token": "Token"
+    },
+    "webhook-section": {
+      "title": "Webhooks",
+      "url": "Url",
+      "no-webhooks-found": "No webhooks found."
+    },
+    "workspace-section": {
+      "disallow-user-registration": "Disallow user registration",
+      "disallow-password-auth": "Disallow password auth",
+      "disallow-change-username": "Disallow Change Username",
+      "disallow-change-nickname": "Disallow Change Nickname",
+      "week-start-day": "Week start day",
+      "saturday": "Saturday",
+      "sunday": "Sunday",
+      "monday": "Monday"            
+    },
+    "memo-related-settings": {
+      "title": "Memo related settings",
+      "enable-link-preview": "Enable link preview",
+      "enable-memo-comments": "Enable memo comments",
+      "enable-memo-location": "Enable memo location",
+      "content-lenght-limit": "Content length limit(Byte)",
+      "reactions": "Reactions"
+    },
+    "version": "Version"
   },
   "tag": {
     "all-tags": "All Tags",
@@ -308,5 +341,10 @@
     "delete-confirm": "Are you sure to delete this tag? All related memos will be archived.",
     "delete-tag": "Delete Tag",
     "no-tag-found": "No tag found"
+  },
+  "markdown": {
+    "code-block": "Code block",
+    "checkbox": "Checkbox",
+    "content-syntax": "Content syntax"
   }
 }

web/src/locales/pt-PT.json

@@ -235,7 +235,9 @@
       "template": "Modelo",
       "token-endpoint": "Ponto de Token",
       "update-sso": "Atualizar SSO",
-      "user-endpoint": "Ponto do Utilizador"
+      "user-endpoint": "Ponto do Utilizador",
+      "no-sso-found": "Nenhum SSO encontrado.",
+      "configuring-keycloak-for-authentication": "A configurar o Keycloak para autenticação."
     },
     "storage": "Armazenamento",
     "storage-section": {
@@ -299,7 +301,38 @@
       "max-upload-size-hint": "32 MiB é recomendado.",
       "server-name": "Nome do Servidor"
     },
-    "memo-related": "Memo"
+    "memo-related": "Memo",
+    "access-token-section": {
+      "title": "Tokens de Acesso",
+      "description": "Uma lista de todos os tokens de acesso para a sua conta.",
+      "created-at": "Criado Em",
+      "expires-at": "Expira Em",
+      "token": "Token"
+    },
+    "webhook-section": {
+      "title": "Webhooks",
+      "url": "Url",
+      "no-webhooks-found": "Nenhum webhook encontrado."
+    },
+    "workspace-section": {
+      "disallow-user-registration": "Desativar registo de utilizadores",
+      "disallow-password-auth": "Desativar autenticação por palavra-passe",
+      "disallow-change-username": "Desativar alteração de nome de utilizador",
+      "disallow-change-nickname": "Desativar alteração de nome ou apelido",
+      "week-start-day": "Dia de início da semana",
+      "saturday": "Sábado",
+      "sunday": "Domingo",
+      "monday": "Segunda-feira"            
+    },
+    "memo-related-settings": {
+      "title": "Definições relacionadas com memos",
+      "enable-link-preview": "Ativar pré-visualização de links",
+      "enable-memo-comments": "Ativar comentários em memos",
+      "enable-memo-location": "Ativar localização em memos",
+      "content-lenght-limit": "Limite de comprimento do conteúdo (Bytes)",
+      "reactions": "Reações"
+    },
+    "version": "Versão"
   },
   "tag": {
     "all-tags": "Todas as Etiquetas",
@@ -308,5 +341,10 @@
     "delete-confirm": "Tem a certeza que quer eliminar esta etiqueta? Memos associados serão arquivados.",
     "delete-tag": "Eliminar Etiqueta",
     "no-tag-found": "Nenhuma etiqueta encontrada"
+  },
+  "markdown": {
+    "code-block": "Bloco de código",
+    "checkbox": "Caixa de seleção",
+    "content-syntax": "Sintaxe de conteúdo"
   }
 }

web/src/pages/Setting.tsx

@@ -114,7 +114,9 @@ const Setting = () => {
                       onClick={() => handleSectionSelectorItemClick(item)}
                     />
                   ))}
-                  <span className="px-3 mt-2 opacity-70 text-sm">Version: v{commonContext.profile.version}</span>
+                  <span className="px-3 mt-2 opacity-70 text-sm">
+                    {t("setting.version")}: v{commonContext.profile.version}
+                  </span>
                 </div>
               </>
             ) : null}