fix journey bugs reported by roel-de-vries (#722-#736)

Mobile UI:
- #722 timeline carousel no longer cut off by BottomNav (uses --bottom-nav-h var)
- #723 scroll-snap-type relaxed to proximity so small swipes no longer skip entries
- #724 defensive padding-bottom fix in JourneySettingsDialog for iOS PWA
- #725 add back/settings buttons + journey title subtitle to mobile activity view
- #726 active entry re-centers after scroll settle; tap inactive card activates
  it (does not jump straight into editor)

Entry editor flow:
- #727 photo uploads queue locally until Save for existing entries too
  (previously fired upload immediately; Cancel silently kept the new photo)
- #728 Cancel/Close with unsaved changes now requires confirm (window.confirm)
- #729 linking a Gallery photo into an entry now copies the row (old MOVE
  behavior meant Remove-from-Entry also nuked the Gallery original)
- #731 addPhoto / addProviderPhoto / linkPhotoToEntry promote skeleton
  entries to concrete 'entry' type when content is added

Permissions:
- #732 updateJourney switched from canEdit to isOwner — editors can still
  edit entries and photos, just not the journey shell (title, cover, status)
- #733 Contributors list gains a per-row remove (X) control with confirm
- #734 my_role is computed server-side and returned with the journey; UI
  gates Settings/Add/Edit/Delete controls based on role
- #736 createOrUpdateJourneyShareLink + deleteJourneyShareLink now require
  isOwner (previously NO permission check at all — anyone authenticated
  could publish or unpublish a journey)

Immich upload (#730):
- migration 111: add users.immich_auto_upload (default 0)
- migration 112: seed provider_field for the toggle (idempotent, FK-safe)
- journey photo upload only mirrors to Immich when the user has opted in
- Settings UI gets a "Mirror journey photos to Immich on upload" checkbox

Test updates:
- JOURNEY-SVC-019 inverted to assert editor cannot update journey settings
- JOURNEY-SHARE-007 now passes userId (owner) to deleteJourneyShareLink
- FE-PAGE-JOURNEYDETAIL-148 inverted to assert photos stay pending until Save
- client/tests still green (2676/2676)

Also fixed en route: gallery entry title is now the literal 'Gallery' on the
wire (used to send the translated label, which broke server-side title === 'Gallery'
checks in non-English locales); confirm interpolation uses {username} single
braces matching the existing i18n runtime; Settings footer uses icon-only
delete/archive buttons on mobile so the row doesn't wrap.

client/src/components/Journey/MobileEntryView.tsx

@@ -30,13 +30,14 @@ function photoUrl(p: JourneyPhoto, size: 'thumbnail' | 'original' = 'original'):
 
 interface Props {
   entry: JourneyEntry
+  readOnly?: boolean
   onClose: () => void
   onEdit: () => void
   onDelete: () => void
   onPhotoClick: (photos: JourneyPhoto[], index: number) => void
 }
 
-export default function MobileEntryView({ entry, onClose, onEdit, onDelete, onPhotoClick }: Props) {
+export default function MobileEntryView({ entry, readOnly, onClose, onEdit, onDelete, onPhotoClick }: Props) {
   const photos = entry.photos || []
   const mood = entry.mood ? MOOD_CONFIG[entry.mood] : null
   const weather = entry.weather ? WEATHER_CONFIG[entry.weather] : null
@@ -57,21 +58,23 @@ export default function MobileEntryView({ entry, onClose, onEdit, onDelete, onPh
         >
           <X size={20} />
         </button>
-        <div className="flex items-center gap-1.5">
-          <button
-            onClick={() => { onClose(); onEdit(); }}
-            className="h-8 px-3 rounded-lg bg-zinc-100 dark:bg-zinc-800 text-zinc-700 dark:text-zinc-300 text-[12px] font-medium flex items-center gap-1.5 hover:bg-zinc-200 dark:hover:bg-zinc-700 transition-colors"
-          >
-            <Pencil size={13} />
-            Edit
-          </button>
-          <button
-            onClick={() => { onClose(); onDelete(); }}
-            className="w-8 h-8 rounded-lg flex items-center justify-center text-zinc-400 hover:bg-red-50 hover:text-red-500 dark:hover:bg-red-900/20 dark:hover:text-red-400 transition-colors"
-          >
-            <Trash2 size={15} />
-          </button>
-        </div>
+        {!readOnly && (
+          <div className="flex items-center gap-1.5">
+            <button
+              onClick={() => { onClose(); onEdit(); }}
+              className="h-8 px-3 rounded-lg bg-zinc-100 dark:bg-zinc-800 text-zinc-700 dark:text-zinc-300 text-[12px] font-medium flex items-center gap-1.5 hover:bg-zinc-200 dark:hover:bg-zinc-700 transition-colors"
+            >
+              <Pencil size={13} />
+              Edit
+            </button>
+            <button
+              onClick={() => { onClose(); onDelete(); }}
+              className="w-8 h-8 rounded-lg flex items-center justify-center text-zinc-400 hover:bg-red-50 hover:text-red-500 dark:hover:bg-red-900/20 dark:hover:text-red-400 transition-colors"
+            >
+              <Trash2 size={15} />
+            </button>
+          </div>
+        )}
       </div>
 
       {/* Scrollable content */}

client/src/components/Journey/MobileMapTimeline.tsx

@@ -39,6 +39,8 @@ export default function MobileMapTimeline({
   const carouselRef = useRef<HTMLDivElement>(null)
   const [activeIndex, setActiveIndex] = useState(0)
   const cardRefs = useRef<Map<number, HTMLDivElement>>(new Map())
+  const activeIndexRef = useRef(activeIndex)
+  useEffect(() => { activeIndexRef.current = activeIndex }, [activeIndex])
 
   // Sync map focus when carousel scrolls (with guard for uninitialized map)
   const syncMapToCarousel = useCallback((index: number) => {
@@ -53,41 +55,78 @@ export default function MobileMapTimeline({
     }
   }, [entries, mapEntries])
 
-  // IntersectionObserver for instant snap detection
+  // Pick the card that's currently closest to the carousel horizontal center.
+  // More stable than IntersectionObserver thresholds when the active card can
+  // drift toward the viewport edge with proximity snapping.
+  const pickNearestCard = useCallback(() => {
+    const el = carouselRef.current
+    if (!el) return
+    const containerCenter = el.getBoundingClientRect().left + el.clientWidth / 2
+    let bestIdx = 0
+    let bestDist = Infinity
+    cardRefs.current.forEach((node, idx) => {
+      const r = node.getBoundingClientRect()
+      const cardCenter = r.left + r.width / 2
+      const d = Math.abs(cardCenter - containerCenter)
+      if (d < bestDist) { bestDist = d; bestIdx = idx }
+    })
+    setActiveIndex(prev => {
+      if (prev !== bestIdx) syncMapToCarousel(bestIdx)
+      return bestIdx
+    })
+  }, [syncMapToCarousel])
+
+  // Track scroll; debounce to re-center the active card when the user stops.
   useEffect(() => {
     const el = carouselRef.current
     if (!el || entries.length === 0) return
+    let rafId: number | null = null
+    let settleTimer: number | null = null
+    const onScroll = () => {
+      if (rafId != null) return
+      rafId = requestAnimationFrame(() => {
+        pickNearestCard()
+        rafId = null
+      })
+      if (settleTimer != null) window.clearTimeout(settleTimer)
+      settleTimer = window.setTimeout(() => {
+        // Ensure the active card sits at the center once the user settles.
+        const card = cardRefs.current.get(activeIndexRef.current)
+        card?.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' })
+      }, 180)
+    }
+    el.addEventListener('scroll', onScroll, { passive: true })
+    return () => {
+      el.removeEventListener('scroll', onScroll)
+      if (rafId != null) cancelAnimationFrame(rafId)
+      if (settleTimer != null) window.clearTimeout(settleTimer)
+    }
+  }, [entries.length, pickNearestCard])
 
-    const observer = new IntersectionObserver(
-      (observed) => {
-        for (const o of observed) {
-          if (o.isIntersecting) {
-            const idx = Number(o.target.getAttribute('data-idx'))
-            if (!isNaN(idx)) {
-              setActiveIndex(idx)
-              syncMapToCarousel(idx)
-            }
-          }
-        }
-      },
-      { root: el, threshold: 0.6 },
-    )
-
-    cardRefs.current.forEach(node => observer.observe(node))
-    return () => observer.disconnect()
-  }, [entries.length, syncMapToCarousel])
+  // Scroll a given card into the horizontal center of the carousel
+  const scrollCardIntoCenter = useCallback((idx: number) => {
+    const card = cardRefs.current.get(idx)
+    card?.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' })
+  }, [])
 
   // Scroll carousel to entry when map marker is clicked
   const handleMarkerClick = useCallback((id: string) => {
     const idx = entries.findIndex((e: any) => String(e.id) === id)
     if (idx === -1) return
     setActiveIndex(idx)
+    scrollCardIntoCenter(idx)
+  }, [entries, scrollCardIntoCenter])
 
-    const el = carouselRef.current
-    if (!el) return
-    const cardWidth = 272
-    el.scrollTo({ left: idx * cardWidth, behavior: 'smooth' })
-  }, [entries])
+  // Tap on a card: if it's already active, open the edit view; otherwise
+  // activate + center it first (don't jump straight into the editor).
+  const handleCardTap = useCallback((entry: any, idx: number) => {
+    if (idx === activeIndex) {
+      onEntryClick(entry)
+    } else {
+      setActiveIndex(idx)
+      scrollCardIntoCenter(idx)
+    }
+  }, [activeIndex, onEntryClick, scrollCardIntoCenter])
 
   // Initial map focus — delay to let Leaflet initialize and fitBounds
   useEffect(() => {
@@ -115,12 +154,12 @@ export default function MobileMapTimeline({
           fullScreen
         />
         {!readOnly && onAddEntry && (
-          <div className="fixed top-[calc(var(--nav-h,56px)+12px)] right-4 z-30">
+          <div className="fixed right-4 z-30" style={{ bottom: 'calc(var(--bottom-nav-h, 84px) + 16px)' }}>
             <button
               onClick={onAddEntry}
-              className="w-10 h-10 rounded-lg bg-zinc-900 dark:bg-white text-white dark:text-zinc-900 shadow-lg flex items-center justify-center hover:scale-105 active:scale-95 transition-transform"
+              className="w-12 h-12 rounded-full bg-zinc-900 dark:bg-white text-white dark:text-zinc-900 shadow-lg flex items-center justify-center hover:scale-105 active:scale-95 transition-transform"
             >
-              <Plus size={18} />
+              <Plus size={20} />
             </button>
           </div>
         )}
@@ -146,14 +185,14 @@ export default function MobileMapTimeline({
 
       {/* Bottom carousel */}
       <div
-        className="fixed bottom-20 left-0 right-0 z-40"
-        style={{ touchAction: 'pan-x' }}
+        className="fixed left-0 right-0 z-40"
+        style={{ touchAction: 'pan-x', bottom: 'calc(var(--bottom-nav-h, 84px) + 8px)' }}
       >
         <div
           ref={carouselRef}
           className="flex gap-3 overflow-x-auto px-4 pb-3 pt-1 scroll-smooth"
           style={{
-            scrollSnapType: 'x mandatory',
+            scrollSnapType: 'x proximity',
             WebkitOverflowScrolling: 'touch',
             scrollbarWidth: 'none',
             msOverflowStyle: 'none',
@@ -170,7 +209,7 @@ export default function MobileMapTimeline({
                 entry={entry}
                 index={i}
                 isActive={i === activeIndex}
-                onClick={() => onEntryClick(entry)}
+                onClick={() => handleCardTap(entry, i)}
                 publicPhotoUrl={publicPhotoUrl}
               />
             </div>
@@ -178,14 +217,17 @@ export default function MobileMapTimeline({
         </div>
       </div>
 
-      {/* FAB: add entry — top right */}
+      {/* FAB: add entry — bottom right, above the timeline carousel */}
       {!readOnly && onAddEntry && (
-        <div className="fixed top-[calc(var(--nav-h,56px)+12px)] right-4 z-30">
+        <div
+          className="fixed right-4 z-30"
+          style={{ bottom: 'calc(var(--bottom-nav-h, 84px) + 168px)' }}
+        >
           <button
             onClick={onAddEntry}
-            className="w-10 h-10 rounded-lg bg-zinc-900 dark:bg-white text-white dark:text-zinc-900 shadow-lg flex items-center justify-center hover:scale-105 active:scale-95 transition-transform"
+            className="w-12 h-12 rounded-full bg-zinc-900 dark:bg-white text-white dark:text-zinc-900 shadow-lg flex items-center justify-center hover:scale-105 active:scale-95 transition-transform"
           >
-            <Plus size={18} />
+            <Plus size={20} />
           </button>
         </div>
       )}