Merge pull request #176 from IliesAllali/feat/glisser-souvenir

Souvenir sur téléphone : glisser la photo vers le bas le ferme

frontend/src/components/MediaViewer.css

@@ -513,3 +513,21 @@
 @media (prefers-reduced-motion: reduce) {
   .media-viewer-card { animation: none; }
 }
+
+/* Téléphone : la photo se glisse vers le bas pour fermer (useSheetDrag, zone .mv-photo-box). L'entrée ne garde pas sa
+   valeur finale (fill-mode backwards) : sinon elle l'emporterait sur le transform du glisser, posé en ligne. */
+@media (max-width: 768px) {
+  .media-viewer-card {
+    animation-fill-mode: backwards;
+    transition: transform 240ms var(--pz-ease-drawer);
+  }
+  .media-viewer-card[data-dragging] { transition: none; }
+  .media-viewer-card .mv-photo-box { touch-action: none; }
+}
+/* Collée en bas (pz.css, sous 560 px) : un fond plein sous la carte, pour qu'elle tirée vers le haut ne découvre pas l'arbre */
+@media (max-width: 560px) {
+  .media-viewer-card { box-shadow: 0 40px 0 var(--pz-surface), var(--pz-shadow-lg); }
+}
+@media (prefers-reduced-motion: reduce) {
+  .media-viewer-card { transition-duration: 1ms; }
+}

frontend/src/components/MediaViewer.jsx

@@ -14,6 +14,7 @@ import { firstNameLabel } from '../utils/personName.js'
 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'
 
 const HTTP_URL_RE = /^https?:\/\/\S+$/i
 const MAX_TITLE_LENGTH = 280
@@ -589,12 +590,25 @@ const MediaViewer = ({
     card.animate?.([{ transform: start.transform }, { transform: 'none' }], { duration: 280, easing: 'cubic-bezier(.23, 1, .32, 1)' })
   }, [mediaId])
 
+  // Téléphone : glisser la photo vers le bas ferme le souvenir, comme la fiche (Patch, 27/10). Pas pendant
+  // l'identification (on touche la photo pour placer un visage), ni quand la carte a défilé (on remonte d'abord).
+  const sheetMode = useSheetMode()
+  const drag = useSheetDrag({
+    enabled: sheetMode && !tagging,
+    zone: '.mv-photo-box',
+    onClose,
+    canStart: () => (cardRef.current?.scrollTop ?? 0) <= 0,
+  })
+
   if (!media) return null
 
   return (
     <div className="pz-overlay media-viewer-overlay" onClick={handleOverlayClick}>
       <div
         ref={cardRef}
+        style={drag.style}
+        data-dragging={drag.dragging || undefined}
+        {...drag.bind}
         className={`media-viewer-card media-viewer-card--${mediaType}`}
         role="dialog"
         aria-modal="true"

frontend/src/hooks/useSheetDrag.js

@@ -40,6 +40,7 @@ export function useSheetMode() {
  * - 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).
+ * - `canStart` (facultatif) peut refuser le geste au moment de l'appui (feuille qui a défilé, par exemple).
  *
  * Usage : `<div {...drag.bind} style={drag.style} data-dragging={drag.dragging || undefined}>`
  */
@@ -49,6 +50,7 @@ export function useSheetDrag({
   onClose,
   closes = shouldCloseSheet,
   closeDelayMs = 180,
+  canStart = null,
 }) {
   const [offset, setOffset] = useState(0)
   const [dragging, setDragging] = useState(false)
@@ -77,6 +79,7 @@ export function useSheetDrag({
     if (!enabled || closingRef.current || event.button > 0) return
     const selection = typeof window !== 'undefined' ? window.getSelection?.()?.toString() ?? '' : ''
     if (!canStartSheetDrag(event.target, zone, selection)) return
+    if (canStart && !canStart(event)) return
     gesture.current = {
       id: event.pointerId,
       x: event.clientX,