From 60721eefb2062e7ebc039ff79661c54f380ee675 Mon Sep 17 00:00:00 2001 From: MartinBraquet Date: Fri, 2 Jan 2026 18:19:28 +0200 Subject: [PATCH] Translate profile bio --- web/components/bio/editable-bio.tsx | 37 +++++++++++++++--------- web/components/bio/profile-bio-block.tsx | 6 ++-- web/components/bio/profile-bio.tsx | 11 +++---- web/messages/fr.json | 17 ++++++++++- 4 files changed, 49 insertions(+), 22 deletions(-) diff --git a/web/components/bio/editable-bio.tsx b/web/components/bio/editable-bio.tsx index 20c99bf2..58b2f671 100644 --- a/web/components/bio/editable-bio.tsx +++ b/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 ( - -

Write a clear and engaging bio to help others understand who you are and the connections you seek. Include:

+ +

{t('profile.bio.tips_intro', "Write a clear and engaging bio to help others understand who you are and the connections you seek. Include:")}

{tips} - Read full tips for writing a high-quality bio + {t('profile.bio.tips_link', 'Read full tips for writing a high-quality bio')} ) } @@ -43,6 +47,7 @@ export function EditableBio(props: { const {profile, onCancel, onSave} = props const [editor, setEditor] = useState(null) const [textLength, setTextLength] = useState(0); + const t = useT(); const hideButtons = (textLength === 0) && !profile.bio @@ -74,7 +79,7 @@ export function EditableBio(props: { {onCancel && ( )} )} @@ -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) {
{textLength < MIN_BIO_LENGTH &&

- 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}) + }

} diff --git a/web/components/bio/profile-bio-block.tsx b/web/components/bio/profile-bio-block.tsx index 0f86cc68..e7a61c58 100644 --- a/web/components/bio/profile-bio-block.tsx +++ b/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 ( , onClick: () => setEdit(true), }, { - name: 'Delete', + name: t('profile.bio.delete', 'Delete'), icon: , onClick: async () => { const { error } = await tryCatch(updateProfile({ bio: null })) diff --git a/web/components/bio/profile-bio.tsx b/web/components/bio/profile-bio.tsx index 3f2edca4..23ccd8ca 100644 --- a/web/components/bio/profile-bio.tsx +++ b/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 (

- 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.")}{" "} 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" >

- 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.")}

)} @@ -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 ( {textLength < MIN_BIO_LENGTH && !edit && isCurrentUser && } - About Me + {t('profile.bio.about_me', 'About Me')}