From f990e1c5ded7f39ee2c4cb93d43d24cb05e7ad83 Mon Sep 17 00:00:00 2001
From: IliesAllali <97601122+IliesAllali@users.noreply.github.com>
Date: Sun, 1 Nov 2026 19:51:53 +0100
Subject: [PATCH] Miniatures de portrait : le recadrage s'applique partout
 (#205)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Seuls l'arbre et la fiche appliquaient le cadrage enregistré du portrait. Les miniatures
(auteur et « Sur la photo » dans la visionneuse, recherche, liens de la fiche, ajout d'un
proche, compte, menu du compte, choix d'un souvenir, recherche ailleurs) affichaient la
photo brute. Un composant commun, PortraitThumb, place l'image avec imagePlacement,
comme la fiche. Signalé par Phyll sur Discord (29/10).

Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
---
 frontend/src/App.jsx                          |  1 +
 frontend/src/components/AccountPanel.jsx      |  5 ++--
 frontend/src/components/AddPersonPanel.jsx    |  3 ++-
 frontend/src/components/FamilyOnboarding.jsx  |  3 ++-
 frontend/src/components/MediaPeople.jsx       |  3 ++-
 frontend/src/components/MediaViewer.jsx       |  3 ++-
 frontend/src/components/PersonCard.jsx        |  5 ++--
 frontend/src/components/PortraitThumb.css     |  5 ++++
 frontend/src/components/PortraitThumb.jsx     | 25 +++++++++++++++++++
 .../src/components/SearchSourcesPanel.jsx     |  3 ++-
 .../components/navbar/ContextualNavbar.jsx    |  4 ++-
 .../search/SearchResultsDropdown.jsx          |  3 ++-
 12 files changed, 52 insertions(+), 11 deletions(-)
 create mode 100644 frontend/src/components/PortraitThumb.css
 create mode 100644 frontend/src/components/PortraitThumb.jsx

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index f7f3839..8aa19fc 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -3535,6 +3535,7 @@ function App() {
         userDisplayName={accountDisplayName}
         userEmail={accountEmail}
         userAvatarPhoto={accountAvatarPhoto}
+        userAvatarCrop={linkedSelfPerson?.avatarCrop ?? null}
         linkedPersonName={linkedSelfPerson ? `${linkedSelfPerson.firstName || ''} ${linkedSelfPerson.lastName || ''}`.trim() : ''}
         activeTreeName={activeAccountTreeName}
         annotationTools={editMode.isActive ? {
diff --git a/frontend/src/components/AccountPanel.jsx b/frontend/src/components/AccountPanel.jsx
index 0302b9c..3b3bb84 100644
--- a/frontend/src/components/AccountPanel.jsx
+++ b/frontend/src/components/AccountPanel.jsx
@@ -3,6 +3,7 @@ import { X } from 'lucide-react'
 import './AccountScreens.css'
 import { t } from '../i18n/index.js'
 import { initialOf } from '../utils/initial.js'
+import PortraitThumb from './PortraitThumb.jsx'
 
 const AccountPanel = ({
   visible,
@@ -51,7 +52,7 @@ const AccountPanel = ({
 
         <div className="ap-linked">
           <span className="ap-avatar" aria-hidden="true">
-            {linkedPerson?.photo ? <img src={linkedPerson.photo} alt="" /> : initialOf(linkedPerson?.firstName || userDisplayName, 'C')}
+            {linkedPerson?.photo ? <PortraitThumb src={linkedPerson.photo} crop={linkedPerson.avatarCrop} /> : initialOf(linkedPerson?.firstName || userDisplayName, 'C')}
           </span>
           <p className="pz-small">
             {linkedPerson
@@ -87,7 +88,7 @@ const AccountPanel = ({
                     onClick={() => onSelectPerson?.(person.id)}
                   >
                     <span className="ap-item-avatar" aria-hidden="true">
-                      {person.photo ? <img src={person.photo} alt="" /> : initialOf(person.firstName)}
+                      {person.photo ? <PortraitThumb src={person.photo} crop={person.avatarCrop} /> : initialOf(person.firstName)}
                     </span>
                     <span className="ap-item-name">{person.firstName} <em>{person.lastName || ''}</em></span>
                     {isSelected && <span className="pz-tag pz-tag--accent">{t("C'est moi")}</span>}
diff --git a/frontend/src/components/AddPersonPanel.jsx b/frontend/src/components/AddPersonPanel.jsx
index a1c6fb5..4cb1dce 100644
--- a/frontend/src/components/AddPersonPanel.jsx
+++ b/frontend/src/components/AddPersonPanel.jsx
@@ -8,6 +8,7 @@ import { firstNameLabel } from '../utils/personName.js'
 import { SEX_CHOICES } from '../utils/personSex.js'
 import { initialOf } from '../utils/initial.js'
 import { findLikelyDuplicates } from '../utils/duplicates.js'
+import PortraitThumb from './PortraitThumb.jsx'
 
 // Titre traduit d'un bloc : le passage entre <em> et </em> garde son italique
 function withEmphasis(text) {
@@ -392,7 +393,7 @@ function AddPersonPanel({ visible, persons = [], loading = false, error = '', on
                     <li key={p.id}>
                       <button type="button" className="apn-dropdown-item" onClick={() => handleAddRelation(p)}>
                         <span className="apn-avatar" aria-hidden="true">
-                          {p.photo ? <img src={p.photo} alt="" /> : initialOf(p.firstName)}
+                          {p.photo ? <PortraitThumb src={p.photo} crop={p.avatarCrop} /> : initialOf(p.firstName)}
                         </span>
                         <span className="apn-dropdown-name">{firstNameLabel(p)} <em>{p.lastName || ''}</em></span>
                         {(p.birthYear || p.birthDate) && (
diff --git a/frontend/src/components/FamilyOnboarding.jsx b/frontend/src/components/FamilyOnboarding.jsx
index 958f5fe..293c925 100644
--- a/frontend/src/components/FamilyOnboarding.jsx
+++ b/frontend/src/components/FamilyOnboarding.jsx
@@ -3,6 +3,7 @@ import { ImagePlus, Search, UserPlus, X } from 'lucide-react'
 import './FamilyOnboarding.css'
 import { t } from '../i18n/index.js'
 import { HELP_URL } from '../utils/siteLinks.js'
+import PortraitThumb from './PortraitThumb.jsx'
 
 // Carte d'accueil de la famille qui arrive par le lien : ce qu'on peut faire, en deux phrases
 export function FamilyWelcome({ visible, treeName, onAddSouvenir, onLook }) {
@@ -117,7 +118,7 @@ export function SouvenirPicker({ visible, persons = [], rootPersonId = null, onP
             <li key={person.id}>
               <button type="button" className="fo-person" onClick={() => onPick?.(person)}>
                 <span className="fo-thumb" aria-hidden="true">
-                  {person.photo ? <img src={person.photo} alt="" /> : <span>{person.firstName?.[0] || '?'}</span>}
+                  {person.photo ? <PortraitThumb src={person.photo} crop={person.avatarCrop} /> : <span>{person.firstName?.[0] || '?'}</span>}
                 </span>
                 <span className="fo-name">
                   <strong>{person.firstName} {person.lastName}</strong>
diff --git a/frontend/src/components/MediaPeople.jsx b/frontend/src/components/MediaPeople.jsx
index 8af404a..4ad578f 100644
--- a/frontend/src/components/MediaPeople.jsx
+++ b/frontend/src/components/MediaPeople.jsx
@@ -3,6 +3,7 @@ import { Check, Search, UserPlus, X } from 'lucide-react'
 import { t } from '../i18n/index.js'
 import { firstNameLabel, fullNameLabel } from '../utils/personName.js'
 import './MediaPeople.css'
+import PortraitThumb from './PortraitThumb.jsx'
 
 const MAX_RESULTS = 6
 
@@ -10,7 +11,7 @@ const normalize = (value) => String(value || '').normalize('NFD').replace(/[̀-
 
 function PersonAvatar({ person }) {
   return person?.photo
-    ? <img className="mp-avatar" src={person.photo} alt="" />
+    ? <PortraitThumb className="mp-avatar" src={person.photo} crop={person.avatarCrop} />
     : <span className="mp-avatar mp-avatar--initial" aria-hidden="true">{person?.firstName?.[0] || '?'}</span>
 }
 
diff --git a/frontend/src/components/MediaViewer.jsx b/frontend/src/components/MediaViewer.jsx
index 1080004..f397af7 100644
--- a/frontend/src/components/MediaViewer.jsx
+++ b/frontend/src/components/MediaViewer.jsx
@@ -15,6 +15,7 @@ import { eventTitle } from '../utils/lifeTimeline.js'
 import { getAccountErrorMessage } from '../utils/errorMessages.js'
 import { growFromTransform, takeOrigin } from '../utils/openOrigin.js'
 import { useSheetDrag, useSheetMode } from '../hooks/useSheetDrag.js'
+import PortraitThumb from './PortraitThumb.jsx'
 
 const HTTP_URL_RE = /^https?:\/\/\S+$/i
 const MAX_TITLE_LENGTH = 280
@@ -648,7 +649,7 @@ const MediaViewer = ({
           <div className="mv-meta">
             <span className="mv-person">
               {person?.photo ? (
-                <img className="mv-person-avatar" src={person.photo} alt="" />
+                <PortraitThumb className="mv-person-avatar" src={person.photo} crop={person.avatarCrop} />
               ) : (
                 <span className="mv-person-avatar mv-person-initial">{person?.firstName?.[0] || '?'}</span>
               )}
diff --git a/frontend/src/components/PersonCard.jsx b/frontend/src/components/PersonCard.jsx
index 7b3d23f..1a4c7a3 100644
--- a/frontend/src/components/PersonCard.jsx
+++ b/frontend/src/components/PersonCard.jsx
@@ -25,6 +25,7 @@ import { normalizeSex, SEX_CHOICES } from '../utils/personSex.js'
 import { ProposalBanner } from './ProposalCard.jsx'
 import { initialsOf } from '../utils/initial.js'
 import { blurPlaceholder } from '../utils/blurhash.js'
+import PortraitThumb from './PortraitThumb.jsx'
 
 // Aucune modification en cours (référence stable)
 const NO_EDITS = Object.freeze({})
@@ -647,7 +648,7 @@ const PersonCard = ({
   const renderRelationRow = (target, relationType, meta, removable = true) => (
     <div key={`${relationType}-${target?.id}`} className="pc-rel-row">
       <span className="pc-rel-avatar" aria-hidden="true">
-        {target?.photo ? <img src={target.photo} alt="" /> : <span>{target?.firstName?.[0] || '?'}</span>}
+        {target?.photo ? <PortraitThumb src={target.photo} crop={target.avatarCrop} /> : <span>{target?.firstName?.[0] || '?'}</span>}
       </span>
       <span className="pc-rel-name">{target ? fullNameLabel(target) : ''}</span>
       {meta && <span className="pc-rel-meta">{meta}</span>}
@@ -1353,7 +1354,7 @@ const RelationSearchInline = forwardRef(function RelationSearchInline(
             <li key={p.id}>
               <button type="button" className="pc-search-item" onClick={() => onSelect(p)}>
                 <span className="pc-rel-avatar" aria-hidden="true">
-                  {p.photo ? <img src={p.photo} alt="" /> : <span>{p.firstName[0]}</span>}
+                  {p.photo ? <PortraitThumb src={p.photo} crop={p.avatarCrop} /> : <span>{p.firstName[0]}</span>}
                 </span>
                 <span className="pc-rel-name">{firstNameLabel(p)} <em>{p.lastName || ''}</em></span>
                 {p.birthYear && <span className="pc-rel-meta">{p.birthYear}</span>}
diff --git a/frontend/src/components/PortraitThumb.css b/frontend/src/components/PortraitThumb.css
new file mode 100644
index 0000000..8e0064d
--- /dev/null
+++ b/frontend/src/components/PortraitThumb.css
@@ -0,0 +1,5 @@
+/* Cadre de la miniature : remplit son conteneur, sauf si une classe passée (mp-avatar, nav-avatar-photo…) en décide
+   autrement. :where ne pèse rien, la classe passée l'emporte toujours. */
+:where(.portrait-thumb) { position: relative; display: block; width: 100%; height: 100%; border-radius: inherit; }
+.portrait-thumb { overflow: hidden; }
+.portrait-thumb > img { display: block; width: 100%; height: 100%; object-fit: cover; }
diff --git a/frontend/src/components/PortraitThumb.jsx b/frontend/src/components/PortraitThumb.jsx
new file mode 100644
index 0000000..544ac07
--- /dev/null
+++ b/frontend/src/components/PortraitThumb.jsx
@@ -0,0 +1,25 @@
+import { useEffect, useState } from 'react'
+import { imagePlacement } from '../utils/portraitCrop.js'
+import './PortraitThumb.css'
+
+// Portrait en miniature (listes, puces, visionneuse, menu du compte) avec le recadrage enregistré :
+// le même cadrage que la fiche et l'arbre (portraitCrop.js). Le cadre est carré ; l'image se place
+// une fois sa taille connue, et reste en « cover » centré jusque-là ou sans cadrage.
+export default function PortraitThumb({ src, crop = null, alt = '', className = '' }) {
+  const [size, setSize] = useState(null)
+  useEffect(() => { setSize(null) }, [src])
+  const placement = size && crop ? imagePlacement(size.w, size.h, 1, crop) : null
+  const style = placement
+    ? { position: 'absolute', maxWidth: 'none', left: `${placement.left}%`, top: `${placement.top}%`, width: `${placement.width}%`, height: `${placement.height}%` }
+    : undefined
+  return (
+    <span className={`portrait-thumb${className ? ` ${className}` : ''}`}>
+      <img
+        src={src}
+        alt={alt}
+        onLoad={(event) => setSize({ w: event.currentTarget.naturalWidth, h: event.currentTarget.naturalHeight })}
+        style={style}
+      />
+    </span>
+  )
+}
diff --git a/frontend/src/components/SearchSourcesPanel.jsx b/frontend/src/components/SearchSourcesPanel.jsx
index cd5f932..c9b176a 100644
--- a/frontend/src/components/SearchSourcesPanel.jsx
+++ b/frontend/src/components/SearchSourcesPanel.jsx
@@ -9,6 +9,7 @@ import { SEARCH_LINKS, SEARCH_LINK_REGIONS } from '../data/searchLinks.js'
 import { changesFromResult, personFromResult } from '../utils/searchResultChanges.js'
 import { fullNameLabel } from '../utils/personName.js'
 import Skeleton from './Skeleton.jsx'
+import PortraitThumb from './PortraitThumb.jsx'
 
 // Ce que chaque source interrogée couvre et ce qui part vers elle : affiché avant qu'on coche
 const SOURCE_INFO = {
@@ -387,7 +388,7 @@ function SearchSourcesPanel({ visible, treeId, token, persons = [], canApply = f
                         {candidates.map(({ person, yearOff }) => (
                           <li key={person.id}>
                             <button type="button" className={`apn-dropdown-item${picker.relative?.id === person.id ? ' is-selected' : ''}`} aria-pressed={picker.mode === 'new' ? picker.relative?.id === person.id : undefined} onClick={() => handlePick(person)} disabled={picker.saving}>
-                              <span className="apn-avatar" aria-hidden="true">{person.photo ? <img src={person.photo} alt="" /> : (person.firstName || '?').charAt(0)}</span>
+                              <span className="apn-avatar" aria-hidden="true">{person.photo ? <PortraitThumb src={person.photo} crop={person.avatarCrop} /> : (person.firstName || '?').charAt(0)}</span>
                               <span className="apn-dropdown-name">{person.firstName} <em>{person.lastName}</em></span>
                               <span className={`apn-dropdown-date${yearOff && picker.mode === 'existing' ? ' sp-year-off' : ''}`} title={yearOff && picker.mode === 'existing' ? t("Pas la même année de naissance que ce résultat") : undefined}>{personYears(person)}</span>
                             </button>
diff --git a/frontend/src/components/navbar/ContextualNavbar.jsx b/frontend/src/components/navbar/ContextualNavbar.jsx
index 0fa2d43..d2538a5 100644
--- a/frontend/src/components/navbar/ContextualNavbar.jsx
+++ b/frontend/src/components/navbar/ContextualNavbar.jsx
@@ -13,6 +13,7 @@ import { PHONE_QUERY } from '../../utils/sheetDrag'
 import './ContextualNavbar.css'
 import { initialOf } from '../../utils/initial.js'
 import Kbd from '../Kbd.jsx'
+import PortraitThumb from '../PortraitThumb.jsx'
 
 const ANNOT_TOOLS = [
   { id: 'pointer', label: t('Sélection'), Icon: MousePointer2 },
@@ -42,6 +43,7 @@ function ContextualNavbar({
   userDisplayName = '',
   userEmail = '',
   userAvatarPhoto = '',
+  userAvatarCrop = null,
   linkedPersonName = '',
   activeTreeName = '',
   onEditClick,
@@ -399,7 +401,7 @@ function ContextualNavbar({
                 {!authenticated ? (
                   <User size={20} strokeWidth={2} aria-hidden="true" />
                 ) : userAvatarPhoto ? (
-                  <img className="nav-avatar-photo" src={userAvatarPhoto} alt="" />
+                  <PortraitThumb className="nav-avatar-photo" src={userAvatarPhoto} crop={userAvatarCrop} />
                 ) : (
                   <span className="nav-avatar-initial" aria-hidden="true">{avatarInitial}</span>
                 )}
diff --git a/frontend/src/components/search/SearchResultsDropdown.jsx b/frontend/src/components/search/SearchResultsDropdown.jsx
index edf46fc..727c6ee 100644
--- a/frontend/src/components/search/SearchResultsDropdown.jsx
+++ b/frontend/src/components/search/SearchResultsDropdown.jsx
@@ -1,6 +1,7 @@
 import './SearchResultsDropdown.css'
 import { t } from '../../i18n/index.js'
 import { firstNameLabel } from '../../utils/personName.js'
+import PortraitThumb from '../PortraitThumb.jsx'
 
 // Raison du match renvoyée par usePersonSearch (valeur française), traduite à l'affichage
 const REASON_LABELS = {
@@ -58,7 +59,7 @@ function SearchResultsDropdown({
             {/* Photo miniature */}
             <div className="search-result-thumb">
               {person.photo ? (
-                <img src={person.photo} alt="" />
+                <PortraitThumb src={person.photo} crop={person.avatarCrop} />
               ) : (
                 <div className="search-result-initials">
                   {person.firstName?.[0] || '?'}