+ )
+}
+
+export function NavMenuGroup({ label, children }) {
+ return (
+
+
{label}
+ {children}
+
+ )
+}
+
+export function NavMenuItem({ icon, label, sub = null, onSelect, danger = false, disabled = false, right = null, className = '' }) {
+ return (
+
+ )
+}
+
+export function NavMenuSep() {
+ return
+}
diff --git a/frontend/src/components/search/ExpandableSearch.css b/frontend/src/components/search/ExpandableSearch.css
index 4c98a0c..6f9dd02 100644
--- a/frontend/src/components/search/ExpandableSearch.css
+++ b/frontend/src/components/search/ExpandableSearch.css
@@ -5,6 +5,9 @@
right: 20px;
z-index: 1000;
}
+/* Ouverte, ses résultats passent devant la bannière d'édition et « Créer mon arbre » (1001), qui descendent
+ sous le champ sur téléphone et rendaient les résultats intouchables. Les panneaux (1050) restent devant. */
+.expandable-search:has(.search-expanded-content) { z-index: 1003; }
.search-icon-button {
width: 46px;
diff --git a/frontend/src/hooks/useSheetDrag.js b/frontend/src/hooks/useSheetDrag.js
new file mode 100644
index 0000000..acb5683
--- /dev/null
+++ b/frontend/src/hooks/useSheetDrag.js
@@ -0,0 +1,147 @@
+import { useEffect, useRef, useState } from 'react'
+import {
+ PHONE_QUERY,
+ SHEET_WIDTH_QUERY,
+ canStartSheetDrag,
+ shouldCloseSheet,
+ sheetDragIntent,
+ velocityBetween,
+} from '../utils/sheetDrag'
+
+const wait = (ms) => new Promise((resolve) => { setTimeout(resolve, ms) })
+
+/**
+ * Vrai en mode feuille : téléphone ou pointeur grossier, et largeur où la fiche se pose en bas (même règle que la barre).
+ */
+export function useSheetMode() {
+ const [sheet, setSheet] = useState(() => (
+ typeof window !== 'undefined' && window.matchMedia(PHONE_QUERY).matches && window.matchMedia(SHEET_WIDTH_QUERY).matches
+ ))
+ useEffect(() => {
+ if (typeof window === 'undefined') return undefined
+ const phone = window.matchMedia(PHONE_QUERY)
+ const width = window.matchMedia(SHEET_WIDTH_QUERY)
+ const update = () => setSheet(phone.matches && width.matches)
+ phone.addEventListener('change', update)
+ width.addEventListener('change', update)
+ return () => {
+ phone.removeEventListener('change', update)
+ width.removeEventListener('change', update)
+ }
+ }, [])
+ return sheet
+}
+
+/**
+ * Glisser pour fermer une feuille du bas.
+ * - Le geste ne part que des éléments de `zone` (sélecteur CSS) et jamais d'un champ de saisie ni d'une sélection de texte.
+ * - La feuille suit le doigt (transform inline) et ne monte jamais au-delà de sa position de repos.
+ * - Au lâcher : `closes` décide (par défaut, un tiers de la hauteur ou un lâcher rapide). Fermer attend la fin de la sortie,
+ * puis appelle `onClose`. Si `onClose` renvoie `false` (enregistrement refusé), la feuille revient.
+ * - Après un vrai glisser, le clic qui suit est avalé (pas de bouton déclenché au lâcher).
+ *
+ * Usage : `
`
+ */
+export function useSheetDrag({
+ enabled = true,
+ zone,
+ onClose,
+ closes = shouldCloseSheet,
+ closeDelayMs = 180,
+}) {
+ const [offset, setOffset] = useState(0)
+ const [dragging, setDragging] = useState(false)
+ const gesture = useRef(null)
+ const suppressClick = useRef(false)
+ const closingRef = useRef(false)
+
+ const settle = () => {
+ setDragging(false)
+ setOffset(0)
+ }
+
+ const close = async (height) => {
+ closingRef.current = true
+ setDragging(false)
+ setOffset(height)
+ await wait(closeDelayMs)
+ const kept = await onClose?.()
+ closingRef.current = false
+ // Enregistrement refusé : la fiche reste, revient à sa place et l'erreur reste affichée par la fiche
+ if (kept === false) settle()
+ }
+
+ const onPointerDown = (event) => {
+ suppressClick.current = false
+ if (!enabled || closingRef.current || event.button > 0) return
+ const selection = typeof window !== 'undefined' ? window.getSelection?.()?.toString() ?? '' : ''
+ if (!canStartSheetDrag(event.target, zone, selection)) return
+ gesture.current = {
+ id: event.pointerId,
+ x: event.clientX,
+ y: event.clientY,
+ height: event.currentTarget.offsetHeight,
+ active: false,
+ prev: null,
+ last: { y: event.clientY, t: event.timeStamp },
+ }
+ }
+
+ const onPointerMove = (event) => {
+ const g = gesture.current
+ if (!g || event.pointerId !== g.id) return
+ const dx = event.clientX - g.x
+ const dy = event.clientY - g.y
+ if (!g.active) {
+ const intent = sheetDragIntent(dx, dy)
+ if (intent === 'pending') return
+ const selecting = typeof window !== 'undefined' && window.getSelection?.()?.toString()
+ if (intent === 'other' || selecting) {
+ gesture.current = null
+ return
+ }
+ g.active = true
+ suppressClick.current = true
+ event.currentTarget.setPointerCapture?.(event.pointerId)
+ setDragging(true)
+ }
+ g.prev = g.last
+ g.last = { y: event.clientY, t: event.timeStamp }
+ setOffset(Math.max(0, dy))
+ }
+
+ const onPointerUp = (event) => {
+ const g = gesture.current
+ if (!g || event.pointerId !== g.id) return
+ gesture.current = null
+ if (!g.active) return
+ const end = { y: event.clientY, t: event.timeStamp }
+ const offsetNow = Math.max(0, event.clientY - g.y)
+ const velocity = velocityBetween(g.prev ?? g.last, end)
+ if (closes({ offset: offsetNow, height: g.height, velocity })) {
+ close(g.height)
+ } else {
+ settle()
+ }
+ }
+
+ const onPointerCancel = () => {
+ const g = gesture.current
+ gesture.current = null
+ if (g?.active) settle()
+ }
+
+ // Après un vrai glisser, le clic du lâcher ne doit pas atteindre les boutons de la feuille
+ const onClickCapture = (event) => {
+ if (!suppressClick.current) return
+ suppressClick.current = false
+ event.stopPropagation()
+ event.preventDefault()
+ }
+
+ return {
+ dragging,
+ bind: { onPointerDown, onPointerMove, onPointerUp, onPointerCancel, onClickCapture },
+ style: offset > 0 ? { transform: `translateY(${offset}px)` } : undefined,
+ }
+}
diff --git a/frontend/src/i18n/en/app.js b/frontend/src/i18n/en/app.js
index 885661f..52725a0 100644
--- a/frontend/src/i18n/en/app.js
+++ b/frontend/src/i18n/en/app.js
@@ -101,4 +101,6 @@ export default {
'Conflit détecté (email ou slug déjà utilisé).': 'Conflict detected (email or slug already in use).',
"Erreur backend. Vérifiez que l'API et la base sont lancées.": 'Server error. Check that the API and database are running.',
'Le serveur ne répond pas. Vérifiez la connexion et réessayez.': 'The server is not responding. Check your connection and try again.',
+ // App.jsx : enregistrement automatique en quittant une fiche
+ 'Modifications de {name} enregistrées': 'Changes to {name} saved',
}
diff --git a/frontend/src/i18n/en/compte.js b/frontend/src/i18n/en/compte.js
index fc27741..356c50f 100644
--- a/frontend/src/i18n/en/compte.js
+++ b/frontend/src/i18n/en/compte.js
@@ -221,4 +221,17 @@ export default {
"Pas besoin de compte pour regarder l'arbre.": "No account needed to look at the tree.",
"Pour retrouver vos arbres et ajouter des souvenirs.": "To find your trees again and add memories.",
"Ce n'est pas mon compte": "This is not my account",
+
+ // Barre d'actions : menu « + » (ajouter, corriger) et menu du compte
+ "Ajouter ou corriger": "Add or correct",
+ "Un souvenir": "A memory",
+ "photo, vidéo, voix, document": "photo, video, voice, document",
+ "Une personne": "A person",
+ "Un mot ou un dessin sur l'arbre": "A word or a drawing on the tree",
+ "Corriger": "Correct",
+ "dates, noms, liens, le propriétaire relit": "dates, names, links, the owner reviews",
+ "Terminer la modification": "Finish editing",
+ "Aide": "Help",
+ "Se déconnecter": "Sign out",
+ "Partager l'arbre": "Share the tree",
}
diff --git a/frontend/src/i18n/en/fiche.js b/frontend/src/i18n/en/fiche.js
index dd768de..75018d8 100644
--- a/frontend/src/i18n/en/fiche.js
+++ b/frontend/src/i18n/en/fiche.js
@@ -176,6 +176,7 @@ export default {
'Marie': 'Mary',
'Dupont': 'Smith',
'Il faut au moins un prénom.': 'A first name is required.',
+ "L'enregistrement a échoué. Vos modifications sont gardées, réessayez.": 'Saving failed. Your changes are kept, try again.',
'si différent': 'if different',
'Martin': 'Johnson',
'Place dans la famille': 'Place in the family',
@@ -417,6 +418,12 @@ export default {
'Il faut au moins un nom si le prénom est inconnu.': 'A last name is required when the first name is unknown.',
// Recadrage du portrait (PortraitCropModal, menu du badge, App)
'Recadrer la photo': 'Crop photo',
+ 'Forme du cadre': 'Frame shape',
+ 'Rond': 'Round',
+ 'Carré': 'Square',
+ 'Polaroïd': 'Polaroid',
+ 'Vertical': 'Vertical',
+ 'Horizontal': 'Horizontal',
'Recadrer': 'Crop',
'Options du portrait': 'Portrait options',
'Zone de recadrage': 'Crop area',
diff --git a/frontend/src/styles/pz.css b/frontend/src/styles/pz.css
index d62a4b2..ef32ef0 100644
--- a/frontend/src/styles/pz.css
+++ b/frontend/src/styles/pz.css
@@ -261,6 +261,5 @@ button:disabled:has(.pz-busy.is-busy) { opacity: 1; cursor: progress; }
.pz-lang-row-label { display: inline-flex; align-items: center; gap: 10px; }
.pz-lang-row-label svg { color: var(--pz-muted); flex: none; }
/* Dans la barre d'actions, séparé des boutons par un filet */
-.pz-lang--nav { margin-left: 4px; padding: 0 4px 0 8px; border-left: 1px solid var(--pz-line); align-self: stretch; }
/* Sous les écrans d'accès et de connexion */
.pz-lang--screen { justify-self: center; }
diff --git a/frontend/src/utils/lifeTimeline.js b/frontend/src/utils/lifeTimeline.js
index ed684f9..5bb3078 100644
--- a/frontend/src/utils/lifeTimeline.js
+++ b/frontend/src/utils/lifeTimeline.js
@@ -107,7 +107,7 @@ const siblingWord = (p) => {
/**
* @param person personne de la fiche (birthDate, deathDate, birthPlace, birthYear, deathYear)
- * @param family { parents, children, siblings, unions: [{ id, partner, startYear, endYear, unionType }] }
+ * @param family { parents, children, siblings, unions: [{ id, partner, startYear, endYear, unionType, childIds }] }
* @param life réponse de GET /trees/:id/persons/:personId/life, ou null tant qu'elle n'est pas là
* @returns entrées triées { key, year, kind: 'mile' | 'minor' | 'fam', title, meta, note, sources, mediaIds,
* event (moment modifiable), milestone ({ type, unionId } d'une naissance, d'un mariage, d'un décès) }
@@ -144,10 +144,18 @@ export function buildLifeTimeline(person, family = {}, life = null) {
const partnerName = union.partner ? fullName(union.partner) : t('Conjoint inconnu')
const place = formatPlace(detail.startPlace || '')
const extra = sourcesOf('marriage', union.id)
+ // Union sans date : à sa place logique, juste avant le premier enfant du couple, sinon avant la fin de
+ // l'union ou le décès du conjoint. Aucune année n'est inventée, la colonne reste vide.
+ const childIds = new Set((union.childIds || []).map(String))
+ const childYears = (family.children || []).filter((c) => childIds.has(String(c.id))).map((c) => yearOf(c.birthDate) ?? c.birthYear).filter(within)
+ const partnerDeath = union.partner ? yearOf(union.partner.deathDate) ?? union.partner.deathYear : null
+ const anchor = year ? null : (childYears.length ? Math.min(...childYears) : null) ?? union.endYear ?? (within(partnerDeath) ? partnerDeath : null)
out.push({
- key: `union-${union.id}`, year, order: 2, kind: 'mile',
+ key: `union-${union.id}`, year, sortYear: anchor, order: year ? 2 : 1, kind: 'mile',
title: union.unionType === 'union' ? t('Union avec {name}', { name: partnerName }) : t('Épouse {name}', { name: partnerName }),
- meta: joinMeta(place, detail.startDatePrecision ? describeDate(detail.startDate, null, detail.startDatePrecision) : '', ageAt(birthYear, year)),
+ meta: year
+ ? joinMeta(place, detail.startDatePrecision ? describeDate(detail.startDate, null, detail.startDatePrecision) : '', ageAt(birthYear, year))
+ : joinMeta(place, t('date inconnue')),
note: extra?.notes || '', sources: extra?.sources || '',
...milestoneFields(extra, { type: 'marriage', unionId: union.id }),
})
@@ -171,7 +179,7 @@ export function buildLifeTimeline(person, family = {}, life = null) {
}
out.push({
key: `event-${event.id}`, year, order: 1, kind: 'minor', title,
- meta: joinMeta(formatPlace(event.place || ''), describeDate(event.date, event.dateEnd, event.datePrecision), ageAt(birthYear, year)),
+ meta: joinMeta(formatPlace(event.place || ''), year ? describeDate(event.date, event.dateEnd, event.datePrecision) : t('date inconnue'), ageAt(birthYear, year)),
note: event.notes || '', sources: event.sources || '',
mediaIds: event.mediaIds || [],
// Seuls les moments propres à la personne se modifient depuis l'onglet (pas ceux d'une union)
@@ -206,9 +214,9 @@ export function buildLifeTimeline(person, family = {}, life = null) {
})
}
- // Les entrées sans date restent en bas, dans l'ordre où elles sont arrivées
+ // Une union sans date se range à sa place logique (sortYear) ; le reste sans date va en bas, dans l'ordre d'arrivée
return out
.map((entry, index) => ({ ...entry, index }))
- .sort((a, b) => (a.year ?? Infinity) - (b.year ?? Infinity) || a.order - b.order || a.index - b.index)
- .map(({ order, index, ...entry }) => entry) // eslint-disable-line no-unused-vars
+ .sort((a, b) => (a.year ?? a.sortYear ?? Infinity) - (b.year ?? b.sortYear ?? Infinity) || a.order - b.order || a.index - b.index)
+ .map(({ order, index, sortYear, ...entry }) => entry) // eslint-disable-line no-unused-vars
}
diff --git a/frontend/src/utils/lifeTimeline.test.js b/frontend/src/utils/lifeTimeline.test.js
index a4b0105..d99a320 100644
--- a/frontend/src/utils/lifeTimeline.test.js
+++ b/frontend/src/utils/lifeTimeline.test.js
@@ -66,6 +66,30 @@ describe('frise de vie', () => {
expect(entries.map((e) => [e.title, e.year, e.meta])).toEqual([['Naissance', 1900, ''], ['Décès', null, 'date inconnue']])
})
+ it('union sans date : avant le premier enfant du couple, sinon avant le décès du conjoint, sinon en bas', () => {
+ const lucie = { id: 1, firstName: 'Lucie', birthYear: 1940 }
+ const entries = buildLifeTimeline(lucie, {
+ children: [{ id: 7, firstName: 'Hugo', birthYear: 1966 }, { id: 8, firstName: 'Léa', birthYear: 1981 }],
+ unions: [
+ { id: 'u1', partner: { id: 2, firstName: 'Marc', lastName: 'Roy', deathYear: 2013 }, unionType: 'mariage', childIds: [7] },
+ { id: 'u2', partner: { id: 3, firstName: 'Paul', lastName: 'Vidal', deathYear: 2016 }, unionType: 'mariage', childIds: [] },
+ { id: 'u3', partner: { id: 4, firstName: 'Yves', lastName: 'Mallet' }, unionType: 'mariage' },
+ ],
+ }, null)
+ expect(entries.map((e) => e.title)).toEqual([
+ 'Naissance', 'Épouse Marc Roy', 'Naissance de Hugo', 'Naissance de Léa', 'Décès de Marc', 'Épouse Paul Vidal', 'Décès de Paul', 'Épouse Yves Mallet',
+ ])
+ // Aucune année inventée : colonne vide, « date inconnue » dit pourquoi
+ for (const key of ['union-u1', 'union-u2', 'union-u3']) {
+ expect(entries.find((e) => e.key === key)).toMatchObject({ year: undefined, meta: 'date inconnue' })
+ }
+ expect(entries.find((e) => e.key === 'union-u1')).not.toHaveProperty('sortYear')
+ })
+
+ it('un moment sans date dit « date inconnue »', () => {
+ expect(entries.find((e) => e.title === 'Résidence').meta).toBe('Rue des Écoles · date inconnue')
+ })
+
it('dit les dates comme on les dit', () => {
expect(describeDate('1879-01-01', null, 'about')).toBe('vers 1879')
expect(describeDate('1879-01-01', null, 'before')).toBe('avant 1879')
diff --git a/frontend/src/utils/portraitCrop.js b/frontend/src/utils/portraitCrop.js
index b1b7b8a..e50fbd7 100644
--- a/frontend/src/utils/portraitCrop.js
+++ b/frontend/src/utils/portraitCrop.js
@@ -7,19 +7,37 @@ export const DEFAULT_CROP = { x: 0.5, y: 0.5, zoom: 1 }
const clamp = (value, min, max) => Math.min(max, Math.max(min, value))
+// Formes qu'on choisit au recadrage, gardées dans le cadrage (crop.shape). Sans choix, la forme suit la photo
+// (très large ou très haute) ou le cadre tiré au hasard pour la personne.
+export const FRAME_SHAPES = ['round', 'square', 'polaroid', 'portrait', 'landscape']
+export const cropShape = (crop) => (FRAME_SHAPES.includes(crop?.shape) ? crop.shape : null)
+
// Forme du cadre dans le canevas : même règle que resolveFrameType et drawFrame (renderers.js).
-// Une photo très large ou très haute change la forme ; sinon le cadre tiré pour la personne (frameType) reste.
-export function resolveFrameKind(frameType, imageRatio) {
+// La forme choisie l'emporte ; sinon une photo très large ou très haute change la forme, et à défaut
+// le cadre tiré pour la personne (frameType) reste.
+export function resolveFrameKind(frameType, imageRatio, shape = null) {
+ if (shape) return shape === 'portrait' || shape === 'landscape' ? 'rect' : shape
if (imageRatio >= 1.28) return 'rect'
if (imageRatio <= 0.78) return 'polaroid'
return frameType || 'round'
}
+// Cadre rectangle : couché si on l'a choisi, sinon selon la photo (carrée : debout, le visage reste entier)
+export function isLandscapeRect(imageRatio, shape = null) {
+ return shape ? shape === 'landscape' : imageRatio > 1.05
+}
+
+// Nom de la forme affichée, pour le sélecteur
+export function shapeOfKind(frameKind, imageRatio) {
+ if (frameKind !== 'rect') return frameKind
+ return isLandscapeRect(imageRatio) ? 'landscape' : 'portrait'
+}
+
// Rapport largeur / hauteur de la zone visible, comme drawFrame le dessine.
-export function frameAspect(frameKind, imageRatio) {
+export function frameAspect(frameKind, imageRatio, shape = null) {
if (frameKind === 'rect') {
// Paysage : 80 x 40 ; portrait : 60 x 68 (renderers.js, drawFrame)
- return imageRatio > 1.05 ? 2 : 60 / 68
+ return isLandscapeRect(imageRatio, shape) ? 2 : 60 / 68
}
// round, polaroid et square : la zone photo est carrée
return 1
@@ -32,7 +50,8 @@ export function normalizeCrop(crop) {
const y = Number(crop.y)
const zoom = Number(crop.zoom)
if (!Number.isFinite(x) || !Number.isFinite(y) || !Number.isFinite(zoom)) return DEFAULT_CROP
- return { x: clamp(x, 0, 1), y: clamp(y, 0, 1), zoom: clamp(zoom, 1, CROP_MAX_ZOOM) }
+ const shape = cropShape(crop)
+ return { x: clamp(x, 0, 1), y: clamp(y, 0, 1), zoom: clamp(zoom, 1, CROP_MAX_ZOOM), ...(shape ? { shape } : {}) }
}
// Zone de l'image visible dans le cadre, en pixels de l'image. Le centre est borné pour qu'il n'y ait jamais
@@ -77,11 +96,13 @@ export function imagePlacement(imageW, imageH, aspect, crop, windowW = 1, window
}
}
-// Ce qu'il faut à l'enregistrement : null pour le cadrage par défaut, sinon le cadrage borné.
-export function cropForSave(imageW, imageH, aspect, crop) {
+// Ce qu'il faut à l'enregistrement : null pour le cadrage par défaut sans forme choisie, sinon le cadrage
+// borné, avec la forme quand on l'a choisie.
+export function cropForSave(imageW, imageH, aspect, crop, shape = null) {
const c = clampCrop(imageW, imageH, aspect, crop)
const round = (value) => Math.round(value * 10000) / 10000
const normalized = { x: round(c.x), y: round(c.y), zoom: round(c.zoom) }
+ if (shape) return { ...normalized, shape }
if (normalized.x === 0.5 && normalized.y === 0.5 && normalized.zoom === 1) return null
return normalized
}
diff --git a/frontend/src/utils/portraitCrop.test.js b/frontend/src/utils/portraitCrop.test.js
index 6b4eff8..c11bff2 100644
--- a/frontend/src/utils/portraitCrop.test.js
+++ b/frontend/src/utils/portraitCrop.test.js
@@ -8,6 +8,7 @@ import {
imagePlacement,
normalizeCrop,
resolveFrameKind,
+ shapeOfKind,
} from './portraitCrop.js'
// Le cadrage visible ne sort jamais de la photo : aucun vide dans le cadre
@@ -86,3 +87,29 @@ describe('portraitCrop', () => {
expect(frameAspect('rect', 1)).toBeCloseTo(60 / 68)
})
})
+
+describe('forme choisie au recadrage', () => {
+ it('l emporte sur le format de la photo et sur le tirage de la personne', () => {
+ // Photo très large : cadre couché par défaut, rond si on le choisit
+ expect(resolveFrameKind('polaroid', 1.6)).toBe('rect')
+ expect(resolveFrameKind('polaroid', 1.6, 'round')).toBe('round')
+ expect(frameAspect(resolveFrameKind('polaroid', 1.6, 'round'), 1.6, 'round')).toBe(1)
+ // Vertical choisi sur une photo couchée : la zone visible est debout
+ expect(resolveFrameKind('round', 1.6, 'portrait')).toBe('rect')
+ expect(frameAspect('rect', 1.6, 'portrait')).toBeCloseTo(60 / 68)
+ expect(frameAspect('rect', 0.7, 'landscape')).toBe(2)
+ })
+
+ it('le sélecteur montre la forme en cours quand rien n est choisi', () => {
+ expect(shapeOfKind('rect', 1.6)).toBe('landscape')
+ expect(shapeOfKind('rect', 1)).toBe('portrait')
+ expect(shapeOfKind('polaroid', 0.7)).toBe('polaroid')
+ })
+
+ it('est gardée à la lecture et à l enregistrement, même sans recadrage', () => {
+ expect(normalizeCrop({ x: 0.2, y: 0.3, zoom: 2, shape: 'square' })).toEqual({ x: 0.2, y: 0.3, zoom: 2, shape: 'square' })
+ expect(normalizeCrop({ x: 0.2, y: 0.3, zoom: 2, shape: 'hexagone' })).toEqual({ x: 0.2, y: 0.3, zoom: 2 })
+ expect(cropForSave(400, 400, 1, DEFAULT_CROP)).toBeNull()
+ expect(cropForSave(400, 400, 1, DEFAULT_CROP, 'round')).toEqual({ x: 0.5, y: 0.5, zoom: 1, shape: 'round' })
+ })
+})
diff --git a/frontend/src/utils/saveOnLeave.js b/frontend/src/utils/saveOnLeave.js
new file mode 100644
index 0000000..89665f5
--- /dev/null
+++ b/frontend/src/utils/saveOnLeave.js
@@ -0,0 +1,8 @@
+// Enregistrement d'une fiche en modification, partagé par le bouton « Enregistrer » et le départ de la fiche.
+// Un appel pendant un enregistrement reçoit la même promesse : pas de double envoi.
+export function runOnce(inFlightRef, run) {
+ if (inFlightRef.current) return inFlightRef.current
+ const promise = Promise.resolve().then(run).finally(() => { inFlightRef.current = null })
+ inFlightRef.current = promise
+ return promise
+}
diff --git a/frontend/src/utils/saveOnLeave.test.js b/frontend/src/utils/saveOnLeave.test.js
new file mode 100644
index 0000000..c8277cb
--- /dev/null
+++ b/frontend/src/utils/saveOnLeave.test.js
@@ -0,0 +1,35 @@
+import { describe, expect, it, vi } from 'vitest'
+import { runOnce } from './saveOnLeave.js'
+
+const tick = () => new Promise((resolve) => setTimeout(resolve, 0))
+
+describe('runOnce (enregistrement de fiche)', () => {
+ it('un second appel pendant l’envoi reçoit le même résultat, sans second envoi', async () => {
+ const ref = { current: null }
+ const send = vi.fn(async () => { await tick(); return 'saved' })
+ const first = runOnce(ref, send)
+ const second = runOnce(ref, send)
+ expect(second).toBe(first)
+ expect(await first).toBe('saved')
+ expect(send).toHaveBeenCalledTimes(1)
+ })
+
+ it('une fois l’envoi terminé, un nouvel appel enregistre à nouveau (nouvelle modification)', async () => {
+ const ref = { current: null }
+ const send = vi.fn(async () => 'saved')
+ await runOnce(ref, send)
+ expect(ref.current).toBeNull()
+ await runOnce(ref, send)
+ expect(send).toHaveBeenCalledTimes(2)
+ })
+
+ it('un échec se propage au résultat et libère le verrou pour une nouvelle tentative', async () => {
+ const ref = { current: null }
+ const send = vi.fn()
+ .mockImplementationOnce(async () => { throw new Error('réseau') })
+ .mockImplementationOnce(async () => 'saved')
+ await expect(runOnce(ref, send)).rejects.toThrow('réseau')
+ expect(ref.current).toBeNull()
+ expect(await runOnce(ref, send)).toBe('saved')
+ })
+})
diff --git a/frontend/src/utils/sheetDrag.js b/frontend/src/utils/sheetDrag.js
new file mode 100644
index 0000000..b54063d
--- /dev/null
+++ b/frontend/src/utils/sheetDrag.js
@@ -0,0 +1,51 @@
+// Geste « feuille » : une feuille du bas (fiche de personne, menu de la barre) se ferme en glissant vers le bas.
+// Logique pure, sans React ni DOM, testée dans sheetDrag.test.js. Le hook qui l'utilise est hooks/useSheetDrag.js.
+
+// Téléphone ou pointeur grossier : même règle pour la barre et pour la fiche
+export const PHONE_QUERY = '(max-width: 767px), (pointer: coarse)'
+// Même seuil que la feuille CSS de la fiche (PersonCard.css) : au-delà, la fiche est un panneau flottant
+export const SHEET_WIDTH_QUERY = '(max-width: 768px)'
+
+// Distance avant de trancher entre glisser vertical, horizontal et tap
+export const DIRECTION_LOCK_PX = 8
+// Lâcher rapide vers le bas : vitesse en px/ms, et course minimale pour qu'il compte
+export const FLICK_VELOCITY = 0.6
+export const FLICK_MIN_OFFSET = 24
+// Deux points plus espacés que ça ne donnent pas une vitesse fiable
+const VELOCITY_WINDOW_MS = 120
+
+// Champs de saisie et libellés : jamais le point de départ d'un glisser
+export const NO_DRAG_SELECTOR = 'input, textarea, select, label, [contenteditable]:not([contenteditable="false"]), [data-sheet-no-drag]'
+
+/**
+ * Le glisser peut-il partir de cette cible ?
+ * `zoneSelector` : les seuls endroits de la feuille qui déclenchent le geste (poignée, en-tête).
+ * `selectionText` : texte sélectionné au moment de l'appui, auquel cas rien ne bouge.
+ */
+export function canStartSheetDrag(target, zoneSelector, selectionText = '') {
+ if (!target || typeof target.closest !== 'function') return false
+ if (selectionText) return false
+ if (!target.closest(zoneSelector)) return false
+ return !target.closest(NO_DRAG_SELECTOR)
+}
+
+/** Intention du mouvement depuis l'appui : 'pending' (encore trop petit), 'down' (glisser vers le bas), 'other' (haut ou horizontal) */
+export function sheetDragIntent(dx, dy) {
+ if (Math.abs(dx) < DIRECTION_LOCK_PX && Math.abs(dy) < DIRECTION_LOCK_PX) return 'pending'
+ if (dy > 0 && dy >= Math.abs(dx)) return 'down'
+ return 'other'
+}
+
+/** Vitesse (px/ms, positive vers le bas) entre deux points {y, t}. Zéro si les points sont trop éloignés dans le temps. */
+export function velocityBetween(from, to) {
+ if (!from || !to) return 0
+ const dt = to.t - from.t
+ if (dt <= 0 || dt > VELOCITY_WINDOW_MS) return 0
+ return (to.y - from.y) / dt
+}
+
+/** Au lâcher : fermer si la course dépasse un tiers de la hauteur, ou si le lâcher est rapide vers le bas */
+export function shouldCloseSheet({ offset, height, velocity = 0 }) {
+ if (height > 0 && offset >= height / 3) return true
+ return velocity >= FLICK_VELOCITY && offset >= FLICK_MIN_OFFSET
+}
diff --git a/frontend/src/utils/sheetDrag.test.js b/frontend/src/utils/sheetDrag.test.js
new file mode 100644
index 0000000..9ee6dea
--- /dev/null
+++ b/frontend/src/utils/sheetDrag.test.js
@@ -0,0 +1,97 @@
+import { describe, expect, it } from 'vitest'
+import {
+ NO_DRAG_SELECTOR,
+ canStartSheetDrag,
+ shouldCloseSheet,
+ sheetDragIntent,
+ velocityBetween,
+} from './sheetDrag'
+
+const ZONE = '.pc-grab, .pc-head, .pc-close'
+
+// Cible factice : `closest` ne répond que pour la zone et les champs demandés
+function target({ inZone = true, inField = false } = {}) {
+ return {
+ closest(selector) {
+ if (selector === ZONE) return inZone ? {} : null
+ if (selector === NO_DRAG_SELECTOR) return inField ? {} : null
+ return null
+ },
+ }
+}
+
+describe('canStartSheetDrag (zones autorisées)', () => {
+ it('part de la poignée, de l\'en-tête ou de la croix', () => {
+ expect(canStartSheetDrag(target(), ZONE)).toBe(true)
+ })
+
+ it('ne part pas du contenu hors zone (onglets, sections)', () => {
+ expect(canStartSheetDrag(target({ inZone: false }), ZONE)).toBe(false)
+ })
+
+ it('ne part jamais d\'un champ de saisie ou d\'un libellé de l\'en-tête', () => {
+ expect(canStartSheetDrag(target({ inField: true }), ZONE)).toBe(false)
+ })
+
+ it('ne part pas pendant une sélection de texte', () => {
+ expect(canStartSheetDrag(target(), ZONE, 'Marie')).toBe(false)
+ expect(canStartSheetDrag(target(), ZONE, '')).toBe(true)
+ })
+
+ it('refuse une cible sans closest (pas un élément DOM)', () => {
+ expect(canStartSheetDrag(null, ZONE)).toBe(false)
+ expect(canStartSheetDrag({}, ZONE)).toBe(false)
+ })
+})
+
+describe('sheetDragIntent (direction)', () => {
+ it('attend un mouvement suffisant avant de trancher', () => {
+ expect(sheetDragIntent(0, 0)).toBe('pending')
+ expect(sheetDragIntent(3, 5)).toBe('pending')
+ })
+
+ it('reconnaît un glisser vers le bas', () => {
+ expect(sheetDragIntent(0, 20)).toBe('down')
+ expect(sheetDragIntent(10, 20)).toBe('down')
+ })
+
+ it('rejette le haut et l\'horizontal', () => {
+ expect(sheetDragIntent(0, -20)).toBe('other')
+ expect(sheetDragIntent(30, 20)).toBe('other')
+ })
+})
+
+describe('shouldCloseSheet (seuil et vitesse)', () => {
+ it('ferme au-delà d\'un tiers de la hauteur', () => {
+ expect(shouldCloseSheet({ offset: 100, height: 300 })).toBe(true)
+ expect(shouldCloseSheet({ offset: 99, height: 300 })).toBe(false)
+ })
+
+ it('ferme sur un lâcher rapide vers le bas, même petit', () => {
+ expect(shouldCloseSheet({ offset: 30, height: 600, velocity: 0.7 })).toBe(true)
+ })
+
+ it('ne ferme pas sur un lâcher rapide mais trop court', () => {
+ expect(shouldCloseSheet({ offset: 10, height: 600, velocity: 2 })).toBe(false)
+ })
+
+ it('ne ferme pas sur une course lente et courte', () => {
+ expect(shouldCloseSheet({ offset: 60, height: 600, velocity: 0.1 })).toBe(false)
+ })
+
+ it('ne ferme jamais sans déplacement vers le bas', () => {
+ expect(shouldCloseSheet({ offset: 0, height: 300, velocity: 5 })).toBe(false)
+ })
+})
+
+describe('velocityBetween', () => {
+ it('donne la vitesse vers le bas en px/ms', () => {
+ expect(velocityBetween({ y: 100, t: 0 }, { y: 160, t: 60 })).toBe(1)
+ })
+
+ it('est nulle si les points manquent, ne se suivent pas ou sont trop espacés', () => {
+ expect(velocityBetween(null, { y: 1, t: 1 })).toBe(0)
+ expect(velocityBetween({ y: 0, t: 10 }, { y: 50, t: 10 })).toBe(0)
+ expect(velocityBetween({ y: 0, t: 0 }, { y: 50, t: 500 })).toBe(0)
+ })
+})