v2.6.2 — TREK Rebrand, OSM Enrichment, File Management, Hotel Bookings & Bug Fixes

Rebrand:
- NOMAD → TREK branding across all UI, translations, server, PWA manifest
- New TREK logos (dark/light, with/without icon)
- Liquid glass toast notifications

Bugs Fixed:
- HTTPS redirect now opt-in only (FORCE_HTTPS=true), fixes #33 #43 #52 #54 #55
- PDF export "Tag" fallback uses i18n, fixes #15
- Vacay sharing color collision detection, fixes #25
- Backup settings import fix (PR #47)
- Atlas country detection uses smallest bounding box, fixes #31
- JPY and zero-decimal currencies formatted correctly, fixes #32
- HTML lang="en" instead of hardcoded "de", fixes #34
- Duplicate translation keys removed
- setSelectedAssignmentId crash fixed

New Features:
- OSM enrichment: Overpass API for opening hours, Wikimedia Commons for photos
- Reverse geocoding on map right-click to add places
- OIDC config via environment variables (OIDC_ISSUER, OIDC_CLIENT_ID, etc.), fixes #48
- Multi-arch Docker build (ARM64 + AMD64), fixes #11
- File management: star, trash/restore, upload owner, assign to places/bookings, notes
- Markdown rendering in Collab Notes with expand modal, fixes #17
- Type-specific booking fields (flight: airline/number/airports, hotel: check-in/out/days, train: number/platform/seat), fixes #35
- Hotel bookings auto-create accommodations, bidirectional sync
- Multiple hotels per day with check-in/check-out color coding
- Ko-fi and Buy Me a Coffee support cards
- GitHub releases proxy with server-side caching

client/src/components/shared/PlaceAvatar.tsx

@@ -9,34 +9,53 @@ interface Category {
 }
 
 interface PlaceAvatarProps {
-  place: Pick<Place, 'id' | 'name' | 'image_url' | 'google_place_id'>
+  place: Pick<Place, 'id' | 'name' | 'image_url' | 'google_place_id' | 'osm_id' | 'lat' | 'lng'>
   size?: number
   category?: Category | null
 }
 
-const googlePhotoCache = new Map<string, string>()
+const photoCache = new Map<string, string | null>()
+const photoInFlight = new Set<string>()
 
 export default function PlaceAvatar({ place, size = 32, category }: PlaceAvatarProps) {
   const [photoSrc, setPhotoSrc] = useState<string | null>(place.image_url || null)
 
   useEffect(() => {
     if (place.image_url) { setPhotoSrc(place.image_url); return }
-    if (!place.google_place_id) { setPhotoSrc(null); return }
+    const photoId = place.google_place_id || place.osm_id
+    if (!photoId && !(place.lat && place.lng)) { setPhotoSrc(null); return }
 
-    if (googlePhotoCache.has(place.google_place_id)) {
-      setPhotoSrc(googlePhotoCache.get(place.google_place_id)!)
+    const cacheKey = photoId || `${place.lat},${place.lng}`
+    if (photoCache.has(cacheKey)) {
+      const cached = photoCache.get(cacheKey)
+      if (cached) setPhotoSrc(cached)
       return
     }
 
-    mapsApi.placePhoto(place.google_place_id)
+    if (photoInFlight.has(cacheKey)) {
+      // Another instance is already fetching, wait for it
+      const check = setInterval(() => {
+        if (photoCache.has(cacheKey)) {
+          clearInterval(check)
+          const cached = photoCache.get(cacheKey)
+          if (cached) setPhotoSrc(cached)
+        }
+      }, 200)
+      return () => clearInterval(check)
+    }
+    photoInFlight.add(cacheKey)
+    mapsApi.placePhoto(photoId || `coords:${place.lat}:${place.lng}`, place.lat, place.lng, place.name)
       .then((data: { photoUrl?: string }) => {
         if (data.photoUrl) {
-          googlePhotoCache.set(place.google_place_id!, data.photoUrl)
+          photoCache.set(cacheKey, data.photoUrl)
           setPhotoSrc(data.photoUrl)
+        } else {
+          photoCache.set(cacheKey, null)
         }
+        photoInFlight.delete(cacheKey)
       })
-      .catch(() => {})
-  }, [place.id, place.image_url, place.google_place_id])
+      .catch(() => { photoCache.set(cacheKey, null); photoInFlight.delete(cacheKey) })
+  }, [place.id, place.image_url, place.google_place_id, place.osm_id])
 
   const bgColor = category?.color || '#6366f1'
   const IconComp = getCategoryIcon(category?.icon)

client/src/components/shared/Toast.tsx

@@ -19,6 +19,13 @@ declare global {
 
 let toastIdCounter = 0
 
+const ICON_COLORS: Record<ToastType, string> = {
+  success: '#22c55e',
+  error: '#ef4444',
+  warning: '#f59e0b',
+  info: '#6366f1',
+}
+
 export function ToastContainer() {
   const [toasts, setToasts] = useState<Toast[]>([])
 
@@ -31,7 +38,7 @@ export function ToastContainer() {
         setToasts(prev => prev.map(t => t.id === id ? { ...t, removing: true } : t))
         setTimeout(() => {
           setToasts(prev => prev.filter(t => t.id !== id))
-        }, 300)
+        }, 400)
       }, duration)
     }
 
@@ -42,7 +49,7 @@ export function ToastContainer() {
     setToasts(prev => prev.map(t => t.id === id ? { ...t, removing: true } : t))
     setTimeout(() => {
       setToasts(prev => prev.filter(t => t.id !== id))
-    }, 300)
+    }, 400)
   }, [])
 
   useEffect(() => {
@@ -51,42 +58,83 @@ export function ToastContainer() {
   }, [addToast])
 
   const icons: Record<ToastType, React.ReactNode> = {
-    success: <CheckCircle className="w-5 h-5 text-emerald-500 flex-shrink-0" />,
-    error: <XCircle className="w-5 h-5 text-red-500 flex-shrink-0" />,
-    warning: <AlertCircle className="w-5 h-5 text-amber-500 flex-shrink-0" />,
-    info: <Info className="w-5 h-5 text-blue-500 flex-shrink-0" />,
-  }
-
-  const bgColors: Record<ToastType, string> = {
-    success: 'bg-white border-l-4 border-emerald-500',
-    error: 'bg-white border-l-4 border-red-500',
-    warning: 'bg-white border-l-4 border-amber-500',
-    info: 'bg-white border-l-4 border-blue-500',
+    success: <CheckCircle size={18} style={{ color: ICON_COLORS.success, flexShrink: 0 }} />,
+    error: <XCircle size={18} style={{ color: ICON_COLORS.error, flexShrink: 0 }} />,
+    warning: <AlertCircle size={18} style={{ color: ICON_COLORS.warning, flexShrink: 0 }} />,
+    info: <Info size={18} style={{ color: ICON_COLORS.info, flexShrink: 0 }} />,
   }
 
   return (
-    <div className="fixed top-4 right-4 z-[9999] flex flex-col gap-2 max-w-sm w-full pointer-events-none">
-      {toasts.map(toast => (
-        <div
-          key={toast.id}
-          className={`
-            ${bgColors[toast.type] || bgColors.info}
-            ${toast.removing ? 'toast-exit' : 'toast-enter'}
-            flex items-start gap-3 p-4 rounded-lg shadow-lg pointer-events-auto
-            min-w-0
-          `}
-        >
-          {icons[toast.type] || icons.info}
-          <p className="text-sm text-slate-700 flex-1 leading-relaxed">{toast.message}</p>
-          <button
-            onClick={() => removeToast(toast.id)}
-            className="text-slate-400 hover:text-slate-600 transition-colors flex-shrink-0"
+    <>
+      <style>{`
+        @keyframes toast-in {
+          from { opacity: 0; transform: translateY(16px) scale(0.95); }
+          to { opacity: 1; transform: translateY(0) scale(1); }
+        }
+        @keyframes toast-out {
+          from { opacity: 1; transform: translateY(0) scale(1); }
+          to { opacity: 0; transform: translateY(8px) scale(0.95); }
+        }
+        .nomad-toast {
+          background: rgba(255, 255, 255, 0.65);
+          border: 1px solid rgba(0, 0, 0, 0.06);
+          box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), inset 0 0.5px 0 rgba(255,255,255,0.5);
+        }
+        .nomad-toast span { color: rgba(0, 0, 0, 0.8) !important; }
+        .dark .nomad-toast {
+          background: rgba(30, 30, 40, 0.55);
+          border: 1px solid rgba(255, 255, 255, 0.1);
+          box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25), inset 0 0.5px 0 rgba(255,255,255,0.08);
+        }
+        .dark .nomad-toast span { color: rgba(255, 255, 255, 0.9) !important; }
+        .nomad-toast-close { color: rgba(0, 0, 0, 0.4); }
+        .dark .nomad-toast-close { color: rgba(255, 255, 255, 0.4); }
+      `}</style>
+      <div style={{
+        position: 'fixed', bottom: 24, left: '50%', transform: 'translateX(-50%)',
+        zIndex: 9999, display: 'flex', flexDirection: 'column-reverse', gap: 8,
+        pointerEvents: 'none', maxWidth: 420, width: '100%', padding: '0 16px',
+      }}>
+        {toasts.map(toast => (
+          <div
+            key={toast.id}
+            className="nomad-toast"
+            style={{
+              display: 'flex', alignItems: 'center', gap: 10,
+              padding: '10px 14px',
+              borderRadius: 14,
+              backdropFilter: 'blur(24px) saturate(180%)',
+              WebkitBackdropFilter: 'blur(24px) saturate(180%)',
+              pointerEvents: 'auto',
+              animation: toast.removing ? 'toast-out 0.35s ease forwards' : 'toast-in 0.35s cubic-bezier(0.16,1,0.3,1) forwards',
+            }}
           >
-            <X className="w-4 h-4" />
-          </button>
-        </div>
-      ))}
-    </div>
+            {icons[toast.type] || icons.info}
+            <span style={{
+              flex: 1, fontSize: 13, fontWeight: 500, color: 'rgba(255, 255, 255, 0.9)',
+              lineHeight: 1.4,
+              fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif",
+            }}>
+              {toast.message}
+            </span>
+            <button
+              onClick={() => removeToast(toast.id)}
+              className="nomad-toast-close"
+              style={{
+                background: 'none', border: 'none', cursor: 'pointer',
+                display: 'flex', padding: 2,
+                flexShrink: 0, borderRadius: 6, transition: 'opacity 0.15s',
+                opacity: 0.35,
+              }}
+              onMouseEnter={e => e.currentTarget.style.opacity = '0.7'}
+              onMouseLeave={e => e.currentTarget.style.opacity = '0.35'}
+            >
+              <X size={14} />
+            </button>
+          </div>
+        ))}
+      </div>
+    </>
   )
 }