fix(journey): resolve issues #789-801 — mobile layout, day colors, location formatting, date picker, public share UX

client/src/components/Journey/JourneyMap.tsx

@@ -9,6 +9,8 @@ export interface MapMarkerItem {
   label: string
   mood?: string | null
   time: string
+  dayColor: string
+  dayLabel: number
 }
 
 export interface JourneyMapHandle {
@@ -24,6 +26,8 @@ interface MapEntry {
   title?: string | null
   mood?: string | null
   entry_date: string
+  dayColor?: string
+  dayLabel?: number
 }
 
 interface Props {
@@ -49,6 +53,8 @@ function buildMarkerItems(entries: MapEntry[]): MapMarkerItem[] {
         label: e.title || 'Entry',
         mood: e.mood,
         time: e.entry_date,
+        dayColor: e.dayColor || '#52525B',
+        dayLabel: e.dayLabel ?? 1,
       })
     }
   }
@@ -59,30 +65,19 @@ function buildMarkerItems(entries: MapEntry[]): MapMarkerItem[] {
 const MARKER_W = 28
 const MARKER_H = 36
 
-function markerSvg(index: number, highlighted: boolean, dark: boolean): string {
-  // Highlighted: inverted colors for contrast (black on light, white on dark)
-  const fill = dark
-    ? (highlighted ? '#FAFAFA' : '#A1A1AA')
-    : (highlighted ? '#18181B' : '#52525B')
-  const textColor = dark
-    ? (highlighted ? '#18181B' : '#18181B')
-    : (highlighted ? '#fff' : '#fff')
-  const stroke = highlighted
-    ? (dark ? '#fff' : '#18181B')
-    : (dark ? '#3F3F46' : '#fff')
+function markerSvg(dayColor: string, dayLabel: number, highlighted: boolean): string {
+  const stroke = highlighted ? '#fff' : 'rgba(255,255,255,0.5)'
   const shadow = highlighted
-    ? (dark
-        ? 'filter:drop-shadow(0 0 10px rgba(255,255,255,0.35)) drop-shadow(0 2px 6px rgba(0,0,0,0.4))'
-        : 'filter:drop-shadow(0 0 10px rgba(0,0,0,0.3)) drop-shadow(0 2px 6px rgba(0,0,0,0.3))')
+    ? 'filter:drop-shadow(0 0 10px rgba(0,0,0,0.4)) drop-shadow(0 2px 6px rgba(0,0,0,0.4))'
     : 'filter:drop-shadow(0 2px 4px rgba(0,0,0,0.25))'
-  const label = String(index + 1)
+  const label = String(dayLabel)
   const scale = highlighted ? 1.2 : 1
 
   return `<div style="transform:scale(${scale});transition:transform 0.2s ease;${shadow};transform-origin:bottom center">
     <svg width="${MARKER_W}" height="${MARKER_H}" viewBox="0 0 28 36" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path d="M14 34C14 34 26 22.36 26 13C26 6.37 20.63 1 14 1C7.37 1 2 6.37 2 13C2 22.36 14 34 14 34Z" fill="${fill}" stroke="${stroke}" stroke-width="2"/>
-      <circle cx="14" cy="13" r="8" fill="${fill}"/>
-      <text x="14" y="13" text-anchor="middle" dominant-baseline="central" fill="${textColor}" font-family="-apple-system,system-ui,sans-serif" font-size="11" font-weight="700">${label}</text>
+      <path d="M14 34C14 34 26 22.36 26 13C26 6.37 20.63 1 14 1C7.37 1 2 6.37 2 13C2 22.36 14 34 14 34Z" fill="${dayColor}" stroke="${stroke}" stroke-width="1.5"/>
+      <circle cx="14" cy="13" r="8" fill="${dayColor}"/>
+      <text x="14" y="13" text-anchor="middle" dominant-baseline="central" fill="#fff" font-family="-apple-system,system-ui,sans-serif" font-size="11" font-weight="700">${label}</text>
     </svg>
   </div>`
 }
@@ -115,12 +110,11 @@ const JourneyMap = forwardRef<JourneyMapHandle, Props>(function JourneyMap(
       const marker = markersRef.current.get(prev)
       const item = itemsRef.current.find(i => i.id === prev)
       if (marker && item) {
-        const idx = itemsRef.current.indexOf(item)
         marker.setIcon(L.divIcon({
           className: '',
           iconSize: [MARKER_W, MARKER_H],
           iconAnchor: [MARKER_W / 2, MARKER_H],
-          html: markerSvg(idx, false, isDark),
+          html: markerSvg(item.dayColor, item.dayLabel, false),
         }))
         marker.setZIndexOffset(0)
       }
@@ -130,12 +124,11 @@ const JourneyMap = forwardRef<JourneyMapHandle, Props>(function JourneyMap(
       const marker = markersRef.current.get(id)
       const item = itemsRef.current.find(i => i.id === id)
       if (marker && item) {
-        const idx = itemsRef.current.indexOf(item)
         marker.setIcon(L.divIcon({
           className: '',
           iconSize: [MARKER_W, MARKER_H],
           iconAnchor: [MARKER_W / 2, MARKER_H],
-          html: markerSvg(idx, true, isDark),
+          html: markerSvg(item.dayColor, item.dayLabel, true),
         }))
         marker.setZIndexOffset(1000)
       }
@@ -226,7 +219,7 @@ const JourneyMap = forwardRef<JourneyMapHandle, Props>(function JourneyMap(
         className: '',
         iconSize: [MARKER_W, MARKER_H],
         iconAnchor: [MARKER_W / 2, MARKER_H],
-        html: markerSvg(i, false, !!dark),
+        html: markerSvg(item.dayColor, item.dayLabel, false),
       })
 
       const marker = L.marker(pos, { icon }).addTo(map)

client/src/components/Journey/JourneyMapAuto.tsx

@@ -14,6 +14,8 @@ interface MapEntry {
   location_name?: string | null
   mood?: string | null
   entry_date: string
+  dayColor?: string
+  dayLabel?: number
 }
 
 interface Props {

client/src/components/Journey/JourneyMapGL.tsx

@@ -18,6 +18,8 @@ interface MapEntry {
   location_name?: string | null
   mood?: string | null
   entry_date: string
+  dayColor?: string
+  dayLabel?: number
 }
 
 interface Props {
@@ -39,6 +41,8 @@ interface Item {
   label: string
   locationName: string
   time: string
+  dayColor: string
+  dayLabel: number
 }
 
 const MARKER_W = 28
@@ -55,6 +59,8 @@ function buildItems(entries: MapEntry[]): Item[] {
         label: e.title || '',
         locationName: e.location_name || '',
         time: e.entry_date,
+        dayColor: e.dayColor || '#52525B',
+        dayLabel: e.dayLabel ?? 1,
       })
     }
   }
@@ -157,21 +163,15 @@ function ensureJourneyPopupStyle() {
   document.head.appendChild(s)
 }
 
-function markerHtml(index: number, highlighted: boolean, dark: boolean): HTMLDivElement {
-  const fill = dark
-    ? (highlighted ? '#FAFAFA' : '#A1A1AA')
-    : (highlighted ? '#18181B' : '#52525B')
-  const textColor = highlighted ? (dark ? '#18181B' : '#fff') : '#fff'
-  const stroke = highlighted
-    ? (dark ? '#fff' : '#18181B')
-    : (dark ? '#3F3F46' : '#fff')
+function markerHtml(dayColor: string, dayLabel: number, highlighted: boolean): HTMLDivElement {
+  const fill = dayColor
+  const textColor = '#fff'
+  const stroke = highlighted ? '#fff' : 'rgba(255,255,255,0.5)'
   const shadow = highlighted
-    ? (dark
-        ? 'drop-shadow(0 0 10px rgba(255,255,255,0.35)) drop-shadow(0 2px 6px rgba(0,0,0,0.4))'
-        : 'drop-shadow(0 0 10px rgba(0,0,0,0.3)) drop-shadow(0 2px 6px rgba(0,0,0,0.3))')
+    ? 'drop-shadow(0 0 10px rgba(0,0,0,0.4)) drop-shadow(0 2px 6px rgba(0,0,0,0.4))'
     : 'drop-shadow(0 2px 4px rgba(0,0,0,0.25))'
   const scale = highlighted ? 1.2 : 1
-  const label = String(index + 1)
+  const label = String(dayLabel)
 
   // Outer wrap holds the element mapbox positions via `transform: translate(...)`.
   // Anything animated (scale, filter) has to live on an inner child — otherwise
@@ -183,7 +183,7 @@ function markerHtml(index: number, highlighted: boolean, dark: boolean): HTMLDiv
   inner.className = 'trek-journey-marker-inner'
   inner.style.cssText = `width:100%;height:100%;transform:scale(${scale});transform-origin:bottom center;transition:transform 0.2s ease;filter:${shadow};`
   inner.innerHTML = `<svg width="${MARKER_W}" height="${MARKER_H}" viewBox="0 0 28 36" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M14 34C14 34 26 22.36 26 13C26 6.37 20.63 1 14 1C7.37 1 2 6.37 2 13C2 22.36 14 34 14 34Z" fill="${fill}" stroke="${stroke}" stroke-width="2"/>
+    <path d="M14 34C14 34 26 22.36 26 13C26 6.37 20.63 1 14 1C7.37 1 2 6.37 2 13C2 22.36 14 34 14 34Z" fill="${fill}" stroke="${stroke}" stroke-width="1.5"/>
     <circle cx="14" cy="13" r="8" fill="${fill}"/>
     <text x="14" y="13" text-anchor="middle" dominant-baseline="central" fill="${textColor}" font-family="-apple-system,system-ui,sans-serif" font-size="11" font-weight="700">${label}</text>
   </svg>`
@@ -273,13 +273,12 @@ const JourneyMapGL = forwardRef<JourneyMapGLHandle, Props>(function JourneyMapGL
     const item = itemsRef.current.find(i => i.id === id)
     const marker = markersRef.current.get(id)
     if (!item || !marker) return
-    const idx = itemsRef.current.indexOf(item)
     const el = marker.getElement()
     const currentInner = el.querySelector('.trek-journey-marker-inner') as HTMLDivElement | null
     if (!currentInner) return
     // Only swap the inner element's styles/HTML. Touching `el.style.cssText`
     // would wipe mapbox's positional transform and make the marker flicker.
-    const next = markerHtml(idx, highlighted, !!darkRef.current)
+    const next = markerHtml(item.dayColor, item.dayLabel, highlighted)
     const nextInner = next.querySelector('.trek-journey-marker-inner') as HTMLDivElement
     currentInner.style.cssText = nextInner.style.cssText
     currentInner.innerHTML = nextInner.innerHTML
@@ -382,8 +381,8 @@ const JourneyMapGL = forwardRef<JourneyMapGLHandle, Props>(function JourneyMapGL
       }
 
       // markers
-      items.forEach((item, i) => {
-        const el = markerHtml(i, false, !!darkRef.current)
+      items.forEach((item) => {
+        const el = markerHtml(item.dayColor, item.dayLabel, false)
         const marker = new mapboxgl.Marker({ element: el, anchor: 'bottom' })
           .setLngLat([item.lng, item.lat])
           .addTo(map)

client/src/components/Journey/MobileEntryCard.tsx

@@ -1,4 +1,5 @@
 import { MapPin, Camera, Smile, Laugh, Meh, Frown, Sun, CloudSun, Cloud, CloudRain, CloudLightning, Snowflake } from 'lucide-react'
+import { formatLocationName } from '../../utils/formatters'
 import type { JourneyEntry, JourneyPhoto } from '../../store/journeyStore'
 
 const MOOD_ICONS: Record<string, typeof Smile> = {
@@ -37,13 +38,14 @@ function stripMarkdown(text: string): string {
 
 interface Props {
   entry: JourneyEntry | { id: number; type: string; title?: string | null; location_name?: string | null; location_lat?: number | null; location_lng?: number | null; entry_date: string; entry_time?: string | null; mood?: string | null; weather?: string | null; photos?: { photo_id: number }[]; story?: string | null }
-  index: number
+  dayLabel: number
+  dayColor: string
   isActive: boolean
   onClick: () => void
   publicPhotoUrl?: (photoId: number) => string
 }
 
-export default function MobileEntryCard({ entry, index, isActive, onClick, publicPhotoUrl }: Props) {
+export default function MobileEntryCard({ entry, dayLabel, dayColor, isActive, onClick, publicPhotoUrl }: Props) {
   const hasLocation = !!(entry.location_lat && entry.location_lng)
   const hasPhotos = entry.photos && entry.photos.length > 0
   const firstPhoto = hasPhotos ? entry.photos![0] : null
@@ -98,8 +100,8 @@ export default function MobileEntryCard({ entry, index, isActive, onClick, publi
         <div className="flex-1 p-3 flex flex-col min-w-0">
           {/* Day number + date + mood/weather */}
           <div className="flex items-center gap-1.5 mb-1">
-            <span className="w-5 h-5 rounded bg-zinc-900 dark:bg-white text-white dark:text-zinc-900 text-[10px] font-bold flex items-center justify-center flex-shrink-0">
-              {index + 1}
+            <span className="w-5 h-5 rounded text-white text-[10px] font-bold flex items-center justify-center flex-shrink-0" style={{ background: dayColor }}>
+              {dayLabel}
             </span>
             <span className="text-[11px] text-zinc-400 font-medium">{dateStr}</span>
             {entry.entry_time && (
@@ -141,7 +143,7 @@ export default function MobileEntryCard({ entry, index, isActive, onClick, publi
             {hasLocation ? (
               <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-zinc-100 dark:bg-zinc-700 text-[10px] font-medium text-zinc-600 dark:text-zinc-300 max-w-full overflow-hidden">
                 <MapPin size={10} className="flex-shrink-0" />
-                <span className="truncate">{entry.location_name || 'On the map'}</span>
+                <span className="truncate">{formatLocationName(entry.location_name) || 'On the map'}</span>
               </span>
             ) : (
               <span className="text-[10px] text-zinc-400 italic">No location</span>

client/src/components/Journey/MobileEntryView.tsx

@@ -6,6 +6,7 @@ import {
   ThumbsUp, ThumbsDown, ChevronDown,
 } from 'lucide-react'
 import JournalBody from './JournalBody'
+import { formatLocationName } from '../../utils/formatters'
 import type { JourneyEntry, JourneyPhoto } from '../../store/journeyStore'
 
 const MOOD_CONFIG: Record<string, { icon: typeof Smile; label: string; bg: string; text: string }> = {
@@ -130,7 +131,7 @@ export default function MobileEntryView({ entry, readOnly, onClose, onEdit, onDe
             <div className="mb-3">
               <span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-zinc-100 dark:bg-zinc-800 text-[12px] font-medium text-zinc-700 dark:text-zinc-300">
                 <MapPin size={12} className="text-zinc-500 dark:text-zinc-400 flex-shrink-0" />
-                {entry.location_name}
+                {formatLocationName(entry.location_name)}
               </span>
             </div>
           )}

client/src/components/Journey/MobileMapTimeline.tsx

@@ -1,9 +1,10 @@
-import { useRef, useState, useEffect, useCallback } from 'react'
+import { useRef, useState, useEffect, useCallback, useMemo } from 'react'
 import { Plus } from 'lucide-react'
 import JourneyMap from './JourneyMap'
 import MobileEntryCard from './MobileEntryCard'
 import type { JourneyMapHandle } from './JourneyMap'
 import type { JourneyEntry } from '../../store/journeyStore'
+import { DAY_COLORS } from './dayColors'
 
 interface MapEntry {
   id: string
@@ -23,6 +24,7 @@ interface Props {
   onEntryClick: (entry: any) => void
   onAddEntry?: () => void
   publicPhotoUrl?: (photoId: number) => string
+  carouselBottom?: string
 }
 
 export default function MobileMapTimeline({
@@ -34,10 +36,22 @@ export default function MobileMapTimeline({
   onEntryClick,
   onAddEntry,
   publicPhotoUrl,
+  carouselBottom = 'calc(var(--bottom-nav-h, 84px) + 8px)',
 }: Props) {
   const mapRef = useRef<JourneyMapHandle>(null)
   const carouselRef = useRef<HTMLDivElement>(null)
   const [activeIndex, setActiveIndex] = useState(0)
+
+  const entryDayMeta = useMemo(() => {
+    const uniqueDates = [...new Set(entries.map((e: any) => e.entry_date).sort())]
+    const counters = new Map<string, number>()
+    return entries.map((e: any) => {
+      const dayIdx = uniqueDates.indexOf(e.entry_date)
+      const dayLabel = (counters.get(e.entry_date) ?? 0) + 1
+      counters.set(e.entry_date, dayLabel)
+      return { dayLabel, dayColor: DAY_COLORS[dayIdx % DAY_COLORS.length] }
+    })
+  }, [entries])
   const cardRefs = useRef<Map<number, HTMLDivElement>>(new Map())
   const activeIndexRef = useRef(activeIndex)
   useEffect(() => { activeIndexRef.current = activeIndex }, [activeIndex])
@@ -142,7 +156,10 @@ export default function MobileMapTimeline({
 
   if (entries.length === 0) {
     return (
-      <div className="fixed inset-0 z-10" style={{ top: 0, bottom: 0 }}>
+      <div
+        className="fixed left-0 right-0 z-10"
+        style={{ top: 'var(--nav-h, 0px)', bottom: 'env(safe-area-inset-bottom, 0px)' }}
+      >
         <JourneyMap
           ref={mapRef}
           entries={mapEntries}
@@ -168,7 +185,10 @@ export default function MobileMapTimeline({
   }
 
   return (
-    <div className="fixed inset-0 z-10" style={{ top: 0, bottom: 0 }}>
+    <div
+      className="fixed left-0 right-0 z-10"
+      style={{ top: 'var(--nav-h, 0px)', bottom: 'env(safe-area-inset-bottom, 0px)' }}
+    >
       {/* Full-screen map */}
       <JourneyMap
         ref={mapRef}
@@ -186,7 +206,7 @@ export default function MobileMapTimeline({
       {/* Bottom carousel */}
       <div
         className="fixed left-0 right-0 z-40"
-        style={{ touchAction: 'pan-x', bottom: 'calc(var(--bottom-nav-h, 84px) + 8px)' }}
+        style={{ touchAction: 'pan-x', bottom: carouselBottom }}
       >
         <div
           ref={carouselRef}
@@ -207,7 +227,8 @@ export default function MobileMapTimeline({
             >
               <MobileEntryCard
                 entry={entry}
-                index={i}
+                dayLabel={entryDayMeta[i]?.dayLabel ?? i + 1}
+                dayColor={entryDayMeta[i]?.dayColor ?? DAY_COLORS[0]}
                 isActive={i === activeIndex}
                 onClick={() => handleCardTap(entry, i)}
                 publicPhotoUrl={publicPhotoUrl}

client/src/components/Journey/dayColors.ts

@@ -0,0 +1,12 @@
+export const DAY_COLORS = [
+  '#6366f1',
+  '#f97316',
+  '#14b8a6',
+  '#ec4899',
+  '#22c55e',
+  '#3b82f6',
+  '#a855f7',
+  '#ef4444',
+  '#f59e0b',
+  '#06b6d4',
+]

client/src/components/shared/CustomDateTimePicker.tsx

@@ -119,13 +119,14 @@ export function CustomDatePicker({ value, onChange, placeholder, style = {}, com
           ...(() => {
             const r = ref.current?.getBoundingClientRect()
             if (!r) return { top: 0, left: 0 }
-            const w = 268, pad = 8
+            const w = 268, pad = 8, h = 360
             const vw = window.innerWidth
-            const vh = window.innerHeight
+            const vh = window.visualViewport?.height ?? window.innerHeight
             let left = r.left
             let top = r.bottom + 4
             if (left + w > vw - pad) left = Math.max(pad, vw - w - pad)
-            if (top + 320 > vh) top = Math.max(pad, r.top - 320)
+            if (top + h > vh - pad) top = r.top - h - 4
+            top = Math.max(pad, Math.min(top, vh - h - pad))
             if (vw < 360) left = Math.max(pad, (vw - w) / 2)
             return { top, left }
           })(),