From 59ebd539f19a782c9717cd691722ded6df193a0a Mon Sep 17 00:00:00 2001 From: MartinBraquet Date: Wed, 28 Jan 2026 13:50:45 +0100 Subject: [PATCH] Add QuestionMarkTooltip --- web/components/bio/profile-bio.tsx | 51 +++---------------- web/components/filters/search.tsx | 8 ++- .../widgets/tooltip-question-mark.tsx | 49 ++++++++++++++++++ web/messages/fr.json | 2 +- 4 files changed, 64 insertions(+), 46 deletions(-) create mode 100644 web/components/widgets/tooltip-question-mark.tsx diff --git a/web/components/bio/profile-bio.tsx b/web/components/bio/profile-bio.tsx index 11c3c07..849f5ce 100644 --- a/web/components/bio/profile-bio.tsx +++ b/web/components/bio/profile-bio.tsx @@ -6,53 +6,18 @@ import {BioBlock} from './profile-bio-block' 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"; +import {Row} from "web/components/layout/row"; +import {QuestionMarkTooltip} from "web/components/widgets/tooltip-question-mark"; export default function TooShortBio() { - const [open, setOpen] = useState(false); - const t = useT(); - const {y, refs, strategy} = useFloating({ - placement: "bottom", // place below the trigger - middleware: [ - offset(8), // small gap between ? and box - flip(), - shift({padding: 8}), // prevent viewport clipping - ], - }); - + const t = useT() + const text = 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."); return ( -

- {t('profile.bio.too_short', "Bio too short. Profile may be filtered from search results.")}{" "} - setOpen(true)} - onMouseLeave={() => setOpen(false)} - ref={refs.setReference} - > - - ? - - - - {open && ( -

-

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

-
- )} -

+ +

{t('profile.bio.too_short', "Bio too short. Profile may be filtered from search results.")}

+ + ); } diff --git a/web/components/filters/search.tsx b/web/components/filters/search.tsx index 4611cda..1297694 100644 --- a/web/components/filters/search.tsx +++ b/web/components/filters/search.tsx @@ -311,8 +311,7 @@ export const Search = (props: { {(profileCount ?? 0) > 0 && ( + text={!filters.shortBio && t('search.include_short_bios_tooltip', 'To list all the profiles, tick "Include Short Bios"')}>

{profileCount} {(profileCount ?? 0) > 1 ? t('common.people', 'people') : t('common.person', 'person')}

{!filters.shortBio && } + + // + //

{t('profile.bio.too_short', "Bio too short. Profile may be filtered from search results.")}

+ // + // )} diff --git a/web/components/widgets/tooltip-question-mark.tsx b/web/components/widgets/tooltip-question-mark.tsx new file mode 100644 index 0000000..98a4316 --- /dev/null +++ b/web/components/widgets/tooltip-question-mark.tsx @@ -0,0 +1,49 @@ +import {useState} from "react"; +import {flip, offset, shift, useFloating} from "@floating-ui/react-dom"; +import {QuestionMarkCircleIcon} from "@heroicons/react/outline"; + +export function QuestionMarkTooltip(props: { + text: string | any +}) { + // Work like Tooltip but also gets triggered upon click and not just highlight (which is necessary for mobile) + // Use QuestionMarkTooltip for question marks (no click, no button) + // Use Tooltip for buttons (star, message, etc.) + const {text} = props + const [open, setOpen] = useState(false) + const {y, refs, strategy} = useFloating({ + placement: "bottom", // place below the trigger + middleware: [ + offset(8), // small gap between ? and box + flip(), + shift({padding: 8}), // prevent viewport clipping + ], + }) + + return <> + setOpen(true)} + onMouseLeave={() => setOpen(false)} + ref={refs.setReference} + > + + + + {open && ( +
+

+ {text} +

+
+ )} + +} \ No newline at end of file diff --git a/web/messages/fr.json b/web/messages/fr.json index 52ab4cc..325f88b 100644 --- a/web/messages/fr.json +++ b/web/messages/fr.json @@ -408,7 +408,7 @@ "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.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", - "profile.bio.too_short": "Bio trop courte. Le profil peut être filtré des résultats de recherche.", + "profile.bio.too_short": "Bio trop courte. Votre profil n'est pas affiché dans les résultats de recherche par défaut.", "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.comments.current_user_hint": "Les autres utilisateurs peuvent vous laisser des recommandations ici.", "profile.comments.add_comment": "Ajouter un commentaire",