feat: atlas country marking, bucket list, trip creation UX — closes #49

Atlas: - Click any country to mark as visited or add to bucket list - Bucket list with country flags, planned month/year, horizontal layout - Confirm popup with two options (mark visited / bucket list) - Full A2/A3 country code mapping for all countries Trip creation: - Drag & drop cover image support - Add travel buddies via CustomSelect dropdown when creating a trip - Manual date entry via double-click on date picker (supports DD.MM.YYYY, ISO, etc.)
2026-03-29 16:51:35 +02:00
parent 808b7f7a72
commit 8458481950
7 changed files with 582 additions and 23 deletions
--- a/client/src/components/Trips/TripFormModal.tsx
+++ b/client/src/components/Trips/TripFormModal.tsx
@@ -1,7 +1,9 @@
 import { useState, useEffect, useRef } from 'react'
 import Modal from '../shared/Modal'
-import { Calendar, Camera, X, Clipboard } from 'lucide-react'
-import { tripsApi } from '../../api/client'
+import { Calendar, Camera, X, Clipboard, UserPlus } from 'lucide-react'
+import { tripsApi, authApi } from '../../api/client'
+import CustomSelect from '../shared/CustomSelect'
+import { useAuthStore } from '../../store/authStore'
 import { useToast } from '../shared/Toast'
 import { useTranslation } from '../../i18n'
 import { CustomDatePicker } from '../shared/CustomDateTimePicker'
@@ -20,6 +22,7 @@ export default function TripFormModal({ isOpen, onClose, onSave, trip, onCoverUp
  const fileRef = useRef(null)
  const toast = useToast()
  const { t } = useTranslation()
+  const currentUser = useAuthStore(s => s.user)

  const [formData, setFormData] = useState({
    title: '',
@@ -32,6 +35,9 @@ export default function TripFormModal({ isOpen, onClose, onSave, trip, onCoverUp
  const [coverPreview, setCoverPreview] = useState(null)
  const [pendingCoverFile, setPendingCoverFile] = useState(null)
  const [uploadingCover, setUploadingCover] = useState(false)
+  const [allUsers, setAllUsers] = useState<{ id: number; username: string }[]>([])
+  const [selectedMembers, setSelectedMembers] = useState<number[]>([])
+  const [memberSelectValue, setMemberSelectValue] = useState('')

  useEffect(() => {
    if (trip) {
@@ -47,7 +53,11 @@ export default function TripFormModal({ isOpen, onClose, onSave, trip, onCoverUp
      setCoverPreview(null)
    }
    setPendingCoverFile(null)
+    setSelectedMembers([])
    setError('')
+    if (!trip) {
+      authApi.listUsers().then(d => setAllUsers(d.users || [])).catch(() => {})
+    }
  }, [trip, isOpen])

  const handleSubmit = async (e) => {
@@ -65,6 +75,15 @@ export default function TripFormModal({ isOpen, onClose, onSave, trip, onCoverUp
        start_date: formData.start_date || null,
        end_date: formData.end_date || null,
      })
+      // Add selected members for newly created trips
+      if (selectedMembers.length > 0 && result?.trip?.id) {
+        for (const userId of selectedMembers) {
+          const user = allUsers.find(u => u.id === userId)
+          if (user) {
+            try { await tripsApi.addMember(result.trip.id, user.username) } catch {}
+          }
+        }
+      }
      // Upload pending cover for newly created trips
      if (pendingCoverFile && result?.trip?.id) {
        try {
@@ -212,7 +231,10 @@ export default function TripFormModal({ isOpen, onClose, onSave, trip, onCoverUp
            </div>
          ) : (
            <button type="button" onClick={() => fileRef.current?.click()} disabled={uploadingCover}
-              style={{ width: '100%', padding: '18px', border: '2px dashed #e5e7eb', borderRadius: 10, background: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6, fontSize: 13, color: '#9ca3af', fontFamily: 'inherit' }}
+              onDragOver={e => { e.preventDefault(); e.currentTarget.style.borderColor = '#6366f1'; e.currentTarget.style.background = 'rgba(99,102,241,0.04)' }}
+              onDragLeave={e => { e.currentTarget.style.borderColor = '#e5e7eb'; e.currentTarget.style.background = 'none' }}
+              onDrop={e => { e.preventDefault(); e.currentTarget.style.borderColor = '#e5e7eb'; e.currentTarget.style.background = 'none'; const file = e.dataTransfer.files?.[0]; if (file?.type.startsWith('image/')) handleCoverSelect(file) }}
+              style={{ width: '100%', padding: '18px', border: '2px dashed #e5e7eb', borderRadius: 10, background: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6, fontSize: 13, color: '#9ca3af', fontFamily: 'inherit', transition: 'all 0.15s' }}
              onMouseEnter={e => { e.currentTarget.style.borderColor = '#d1d5db'; e.currentTarget.style.color = '#6b7280' }}
              onMouseLeave={e => { e.currentTarget.style.borderColor = '#e5e7eb'; e.currentTarget.style.color = '#9ca3af' }}>
              <Camera size={15} /> {uploadingCover ? t('common.uploading') : t('dashboard.addCoverImage')}
@@ -250,6 +272,46 @@ export default function TripFormModal({ isOpen, onClose, onSave, trip, onCoverUp
          </div>
        </div>

+        {/* Members — only for new trips */}
+        {!isEditing && allUsers.filter(u => u.id !== currentUser?.id).length > 0 && (
+          <div>
+            <label className="block text-sm font-medium text-slate-700 mb-1.5">
+              <UserPlus className="inline w-4 h-4 mr-1" />{t('dashboard.addMembers')}
+            </label>
+            {selectedMembers.length > 0 && (
+              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginBottom: 8 }}>
+                {selectedMembers.map(uid => {
+                  const user = allUsers.find(u => u.id === uid)
+                  if (!user) return null
+                  return (
+                    <span key={uid} onClick={() => setSelectedMembers(prev => prev.filter(id => id !== uid))}
+                      style={{
+                        display: 'flex', alignItems: 'center', gap: 5, padding: '4px 10px', borderRadius: 99,
+                        background: 'var(--bg-secondary)', fontSize: 12, fontWeight: 500, color: 'var(--text-primary)', cursor: 'pointer',
+                        border: '1px solid var(--border-primary)',
+                      }}>
+                      {user.username}
+                      <X size={11} style={{ color: 'var(--text-faint)' }} />
+                    </span>
+                  )
+                })}
+              </div>
+            )}
+            <div style={{ display: 'flex', gap: 8 }}>
+              <CustomSelect
+                value={memberSelectValue}
+                onChange={value => {
+                  if (value) { setSelectedMembers(prev => prev.includes(Number(value)) ? prev : [...prev, Number(value)]); setMemberSelectValue('') }
+                }}
+                placeholder={t('dashboard.addMember')}
+                options={allUsers.filter(u => u.id !== currentUser?.id && !selectedMembers.includes(u.id)).map(u => ({ value: u.id, label: u.username }))}
+                searchable
+                size="sm"
+              />
+            </div>
+          </div>
+        )}
+
        {!formData.start_date && !formData.end_date && (
          <p className="text-xs text-slate-400 bg-slate-50 rounded-lg p-3">
            {t('dashboard.noDateHint')}
--- a/client/src/components/shared/CustomDateTimePicker.tsx
+++ b/client/src/components/shared/CustomDateTimePicker.tsx
@@ -59,9 +59,43 @@ export function CustomDatePicker({ value, onChange, placeholder, style = {} }: C
  const today = new Date()
  const isToday = (d: number) => today.getFullYear() === viewYear && today.getMonth() === viewMonth && today.getDate() === d

+  const [textInput, setTextInput] = useState('')
+  const [isTyping, setIsTyping] = useState(false)
+
+  const handleTextSubmit = () => {
+    setIsTyping(false)
+    if (!textInput.trim()) return
+    // Try to parse various date formats
+    const input = textInput.trim()
+    // ISO: 2026-03-29
+    if (/^\d{4}-\d{2}-\d{2}$/.test(input)) { onChange(input); return }
+    // EU: 29.03.2026 or 29/03/2026
+    const euMatch = input.match(/^(\d{1,2})[./](\d{1,2})[./](\d{2,4})$/)
+    if (euMatch) {
+      const y = euMatch[3].length === 2 ? 2000 + parseInt(euMatch[3]) : parseInt(euMatch[3])
+      onChange(`${y}-${String(euMatch[2]).padStart(2, '0')}-${String(euMatch[1]).padStart(2, '0')}`)
+      return
+    }
+    // Try native Date parse as fallback
+    const d = new Date(input)
+    if (!isNaN(d.getTime())) {
+      onChange(`${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`)
+    }
+  }
+
  return (
    <div ref={ref} style={{ position: 'relative', ...style }}>
-      <button type="button" onClick={() => setOpen(o => !o)}
+      {isTyping ? (
+        <input autoFocus type="text" value={textInput} onChange={e => setTextInput(e.target.value)}
+          onKeyDown={e => { if (e.key === 'Enter') handleTextSubmit(); if (e.key === 'Escape') setIsTyping(false) }}
+          onBlur={handleTextSubmit}
+          placeholder="DD.MM.YYYY"
+          style={{
+            width: '100%', padding: '8px 14px', borderRadius: 10, border: '1px solid var(--text-faint)',
+            background: 'var(--bg-input)', color: 'var(--text-primary)', fontSize: 13, fontFamily: 'inherit', outline: 'none',
+          }} />
+      ) : (
+      <button type="button" onClick={() => setOpen(o => !o)} onDoubleClick={() => { setTextInput(value || ''); setIsTyping(true) }}
        style={{
          width: '100%', display: 'flex', alignItems: 'center', gap: 8,
          padding: '8px 14px', borderRadius: 10,
@@ -75,6 +109,7 @@ export function CustomDatePicker({ value, onChange, placeholder, style = {} }: C
        <Calendar size={14} style={{ color: 'var(--text-faint)', flexShrink: 0 }} />
        <span style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{displayValue || placeholder || t('common.date')}</span>
      </button>
+      )}

      {open && ReactDOM.createPortal(
        <div ref={dropRef} style={{