Translate profile bio

web/components/bio/editable-bio.tsx

@@ -13,24 +13,28 @@ import ReactMarkdown from "react-markdown";
 import Link from "next/link"
 import {MIN_BIO_LENGTH} from "common/constants";
 import {ShowMore} from 'web/components/widgets/show-more'
+import {useT} from 'web/lib/locale'
 
-const placeHolder = "Tell us about yourself — and what you're looking for!";
-
-const tips = `
+export function BioTips() {
+  const t = useT();
+  const tips = t('profile.bio.tips_list', `
 - Your core values, interests, and activities
 - Personality traits, what makes you unique and what you care about
 - Connection goals (collaborative, friendship, romantic)
 - Expectations and boundaries
 - Availability, how to contact you or start a conversation (email, social media, etc.)
 - Optional: romantic preferences, lifestyle habits, and conversation starters
-`
-
-export function BioTips() {
+`);
+  
   return (
-    <ShowMore labelClosed="Tips" labelOpen="Hide info" className={'custom-link text-sm'}>
-      <p>Write a clear and engaging bio to help others understand who you are and the connections you seek. Include:</p>
+    <ShowMore 
+      labelClosed={t('profile.bio.tips', 'Tips')} 
+      labelOpen={t('profile.bio.hide_info', 'Hide info')} 
+      className={'custom-link text-sm'}
+    >
+      <p>{t('profile.bio.tips_intro', "Write a clear and engaging bio to help others understand who you are and the connections you seek. Include:")}</p>
       <ReactMarkdown>{tips}</ReactMarkdown>
-      <Link href="/tips-bio" target="_blank">Read full tips for writing a high-quality bio</Link>
+      <Link href="/tips-bio" target="_blank">{t('profile.bio.tips_link', 'Read full tips for writing a high-quality bio')}</Link>
     </ShowMore>
   )
 }
@@ -43,6 +47,7 @@ export function EditableBio(props: {
   const {profile, onCancel, onSave} = props
   const [editor, setEditor] = useState<any>(null)
   const [textLength, setTextLength] = useState(0);
+  const t = useT();
 
   const hideButtons = (textLength === 0) && !profile.bio
 
@@ -74,7 +79,7 @@ export function EditableBio(props: {
         <Row className="absolute bottom-1 right-1 justify-between gap-2">
           {onCancel && (
             <Button size="xs" color="gray-outline" onClick={onCancel}>
-              Cancel
+              {t('profile.bio.cancel', 'Cancel')}
             </Button>
           )}
           <Button
@@ -84,7 +89,7 @@ export function EditableBio(props: {
               onSave()
             }}
           >
-            Save
+            {t('profile.bio.save', 'Save')}
           </Button>
         </Row>
       )}
@@ -115,13 +120,15 @@ interface BaseBioProps {
 }
 
 export function BaseBio({defaultValue, onBlur, onEditor}: BaseBioProps) {
+  const t = useT();
   const editor = useTextEditor({
     // extensions: [StarterKit],
     max: MAX_DESCRIPTION_LENGTH,
     defaultValue: defaultValue,
-    placeholder: placeHolder,
+    placeholder: t('profile.bio.placeholder', "Tell us about yourself — and what you're looking for!"),
   })
   const textLength = editor?.getText().length ?? 0
+  const remainingChars = MIN_BIO_LENGTH - textLength
 
   useEffect(() => {
     onEditor?.(editor)
@@ -131,8 +138,10 @@ export function BaseBio({defaultValue, onBlur, onEditor}: BaseBioProps) {
     <div>
       {textLength < MIN_BIO_LENGTH &&
           <p>
-              Add {MIN_BIO_LENGTH - textLength} more {MIN_BIO_LENGTH - textLength === 1 ? 'character' : 'characters'} so
-              you can appear in search results—or take your time and start by exploring others.
+              {remainingChars === 1 
+                ? t('profile.bio.add_characters_one', 'Add {count} more character so you can appear in search results—or take your time and start by exploring others.', {count: remainingChars})
+                : t('profile.bio.add_characters_many', 'Add {count} more characters so you can appear in search results—or take your time and start by exploring others.', {count: remainingChars})
+              }
           </p>
       }
       <BioTips/>

web/components/bio/profile-bio-block.tsx

@@ -10,6 +10,7 @@ import { Content } from 'web/components/widgets/editor'
 import { updateProfile } from 'web/lib/api'
 import { EditableBio } from './editable-bio'
 import { tryCatch } from 'common/util/try-catch'
+import { useT } from 'web/lib/locale'
 
 export function BioBlock(props: {
   isCurrentUser: boolean
@@ -19,6 +20,7 @@ export function BioBlock(props: {
   setEdit: (edit: boolean) => void
 }) {
   const { isCurrentUser, refreshProfile, profile, edit, setEdit } = props
+  const t = useT()
 
   return (
     <Col
@@ -47,12 +49,12 @@ export function BioBlock(props: {
           <DropdownMenu
             items={[
               {
-                name: 'Edit',
+                name: t('profile.bio.edit', 'Edit'),
                 icon: <PencilIcon className="h-5 w-5" />,
                 onClick: () => setEdit(true),
               },
               {
-                name: 'Delete',
+                name: t('profile.bio.delete', 'Delete'),
                 icon: <XIcon className="h-5 w-5" />,
                 onClick: async () => {
                   const { error } = await tryCatch(updateProfile({ bio: null }))

web/components/bio/profile-bio.tsx

@@ -7,9 +7,11 @@ import {MAX_INT, MIN_BIO_LENGTH} from "common/constants";
 import {useTextEditor} from "web/components/widgets/editor";
 import {JSONContent} from "@tiptap/core"
 import {flip, offset, shift, useFloating} from "@floating-ui/react-dom";
+import {useT} from "web/lib/locale";
 
 export default function TooShortBio() {
   const [open, setOpen] = useState(false);
+  const t = useT();
   const {y, refs, strategy} = useFloating({
     placement: "bottom", // place below the trigger
     middleware: [
@@ -21,7 +23,7 @@ export default function TooShortBio() {
 
   return (
     <p className="text-red-600">
-      Bio too short. Profile may be filtered from search results.{" "}
+      {t('profile.bio.too_short', "Bio too short. Profile may be filtered from search results.")}{" "}
       <span
         className="inline-flex align-middle"
         onMouseEnter={() => setOpen(true)}
@@ -46,9 +48,7 @@ export default function TooShortBio() {
           className="p-3 bg-canvas-50 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 z-50 transition-opacity w-72 max-w-[calc(100vw-1rem)] whitespace-normal break-words"
         >
           <p className="text-sm text-gray-800 dark:text-gray-100">
-            Since your bio is too short, Compass' algorithm filters out your
-            profile from search results (unless "Include short bios" is
-            selected). This ensures searches show meaningful profiles.
+            {t('profile.bio.too_short_tooltip', "Since your bio is too short, Compass' algorithm filters out your profile from search results (unless \"Include short bios\" is selected). This ensures searches show meaningful profiles.")}
           </p>
         </div>
       )}
@@ -67,6 +67,7 @@ export function ProfileBio(props: {
   const [edit, setEdit] = useState(false)
   const editor = useTextEditor({defaultValue: ''})
   const [textLength, setTextLength] = useState(MAX_INT)
+  const t = useT();
 
   useEffect(() => {
     if (!editor) return
@@ -80,7 +81,7 @@ export function ProfileBio(props: {
   return (
     <Col>
       {textLength < MIN_BIO_LENGTH && !edit && isCurrentUser && <TooShortBio/>}
-      <Subtitle className="mb-4">About Me</Subtitle>
+      <Subtitle className="mb-4">{t('profile.bio.about_me', 'About Me')}</Subtitle>
       <BioBlock
         isCurrentUser={isCurrentUser}
         profile={profile}

web/messages/fr.json

@@ -754,5 +754,20 @@
   "profile.work.graphic_design": "Design graphique",
   "profile.work.content_design": "Design de contenu",
   "profile.work.sales": "Vente",
-  "profile.work.finance": "Finance"
+  "profile.work.finance": "Finance",
+  "profile.bio.about_me": "À propos de moi",
+  "profile.bio.too_short": "Bio trop courte. Le profil peut être filtré des résultats de recherche.",
+  "profile.bio.too_short_tooltip": "Comme votre bio est trop courte, l'algorithme de Compass filtre votre profil des résultats de recherche (sauf si « Inclure les bios courtes » est sélectionné). Cela garantit que les recherches affichent des profils significatifs.",
+  "profile.bio.placeholder": "Parlez-nous de vous — et de ce que vous recherchez !",
+  "profile.bio.tips": "Conseils",
+  "profile.bio.hide_info": "Masquer les informations",
+  "profile.bio.tips_intro": "Rédigez une bio claire et engageante pour aider les autres à comprendre qui vous êtes et les connexions que vous recherchez. Incluez :",
+  "profile.bio.tips_link": "Lire tous les conseils pour rédiger une bio de haute qualité",
+  "profile.bio.edit": "Modifier",
+  "profile.bio.delete": "Supprimer",
+  "profile.bio.cancel": "Annuler",
+  "profile.bio.save": "Enregistrer",
+  "profile.bio.add_characters_one": "Ajoutez {count} caractère de plus pour apparaître dans les résultats de recherche — ou prenez votre temps et commencez par explorer les autres.",
+  "profile.bio.add_characters_many": "Ajoutez {count} caractères de plus pour apparaître dans les résultats de recherche — ou prenez votre temps et commencez par explorer les autres.",
+  "profile.bio.tips_list": "- Vos valeurs fondamentales, intérêts et activités\n- Traits de personnalité, ce qui vous rend unique et ce qui vous tient à cœur\n- Objectifs de connexion (collaboration, amitié, romantique)\n- Attentes et limites\n- Disponibilité, comment vous contacter ou démarrer une conversation (e-mail, réseaux sociaux, etc.)\n- Optionnel : préférences romantiques, habitudes de vie et sujets de conversation"
 }