Initial commit — NOMAD (Navigation Organizer for Maps, Activities & Destinations)

Self-hosted travel planner with Express.js, SQLite, React & Tailwind CSS.
2026-06-21 06:11:45 +00:00 · 2026-03-18 23:58:08 +01:00
commit cb1e217bbe
100 changed files with 25545 additions and 0 deletions
@@ -0,0 +1,185 @@
+import React, { useState } from 'react'
+import { Search, Plus, X } from 'lucide-react'
+import PlaceAvatar from '../shared/PlaceAvatar'
+import { getCategoryIcon } from '../shared/categoryIcons'
+import { useTranslation } from '../../i18n'
+import CustomSelect from '../shared/CustomSelect'
+
+export default function PlacesSidebar({
+  places, categories, assignments, selectedDayId, selectedPlaceId,
+  onPlaceClick, onAddPlace, onAssignToDay,
+}) {
+  const { t } = useTranslation()
+  const [search, setSearch] = useState('')
+  const [filter, setFilter] = useState('all') // 'all' | 'ungeplant'
+  const [categoryFilter, setCategoryFilter] = useState('')
+
+  // Alle geplanten Ort-IDs abrufen (einem Tag zugewiesen)
+  const plannedIds = new Set(
+    Object.values(assignments).flatMap(da => da.map(a => a.place?.id).filter(Boolean))
+  )
+
+  const filtered = places.filter(p => {
+    if (filter === 'unplanned' && plannedIds.has(p.id)) return false
+    if (categoryFilter && String(p.category_id) !== String(categoryFilter)) return false
+    if (search && !p.name.toLowerCase().includes(search.toLowerCase()) &&
+        !(p.address || '').toLowerCase().includes(search.toLowerCase())) return false
+    return true
+  })
+
+  const isAssignedToSelectedDay = (placeId) =>
+    selectedDayId && (assignments[String(selectedDayId)] || []).some(a => a.place?.id === placeId)
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', height: '100%', fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif" }}>
+      {/* Kopfbereich */}
+      <div style={{ padding: '14px 16px 10px', borderBottom: '1px solid var(--border-faint)', flexShrink: 0 }}>
+        <button
+          onClick={onAddPlace}
+          style={{
+            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
+            width: '100%', padding: '8px 12px', borderRadius: 12, border: 'none',
+            background: 'var(--accent)', color: 'var(--accent-text)', fontSize: 13, fontWeight: 500,
+            cursor: 'pointer', fontFamily: 'inherit', marginBottom: 10,
+          }}
+        >
+          <Plus size={14} strokeWidth={2} /> {t('places.addPlace')}
+        </button>
+
+        {/* Filter-Tabs */}
+        <div style={{ display: 'flex', gap: 4, marginBottom: 8 }}>
+          {[{ id: 'all', label: t('places.all') }, { id: 'unplanned', label: t('places.unplanned') }].map(f => (
+            <button key={f.id} onClick={() => setFilter(f.id)} style={{
+              padding: '4px 10px', borderRadius: 20, border: 'none', cursor: 'pointer',
+              fontSize: 11, fontWeight: 500, fontFamily: 'inherit',
+              background: filter === f.id ? 'var(--accent)' : 'var(--bg-tertiary)',
+              color: filter === f.id ? 'var(--accent-text)' : 'var(--text-muted)',
+            }}>{f.label}</button>
+          ))}
+        </div>
+
+        {/* Suchfeld */}
+        <div style={{ position: 'relative' }}>
+          <Search size={13} strokeWidth={1.8} color="var(--text-faint)" style={{ position: 'absolute', left: 10, top: '50%', transform: 'translateY(-50%)', pointerEvents: 'none' }} />
+          <input
+            type="text"
+            value={search}
+            onChange={e => setSearch(e.target.value)}
+            placeholder={t('places.search')}
+            style={{
+              width: '100%', padding: '7px 30px 7px 30px', borderRadius: 10,
+              border: 'none', background: 'var(--bg-tertiary)', fontSize: 12, color: 'var(--text-primary)',
+              outline: 'none', fontFamily: 'inherit', boxSizing: 'border-box',
+            }}
+          />
+          {search && (
+            <button onClick={() => setSearch('')} style={{ position: 'absolute', right: 8, top: '50%', transform: 'translateY(-50%)', background: 'none', border: 'none', cursor: 'pointer', padding: 0, display: 'flex' }}>
+              <X size={12} strokeWidth={2} color="var(--text-faint)" />
+            </button>
+          )}
+        </div>
+
+        {/* Kategoriefilter */}
+        {categories.length > 0 && (
+          <div style={{ marginTop: 6 }}>
+            <CustomSelect
+              value={categoryFilter}
+              onChange={setCategoryFilter}
+              placeholder={t('places.allCategories')}
+              size="sm"
+              options={[
+                { value: '', label: t('places.allCategories') },
+                ...categories.map(c => ({ value: String(c.id), label: c.name }))
+              ]}
+            />
+          </div>
+        )}
+      </div>
+
+      {/* Anzahl */}
+      <div style={{ padding: '6px 16px', flexShrink: 0 }}>
+        <span style={{ fontSize: 11, color: 'var(--text-faint)' }}>{filtered.length === 1 ? t('places.countSingular') : t('places.count', { count: filtered.length })}</span>
+      </div>
+
+      {/* Liste */}
+      <div style={{ flex: 1, overflowY: 'auto', minHeight: 0 }}>
+        {filtered.length === 0 ? (
+          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', padding: '40px 16px', gap: 8 }}>
+            <span style={{ fontSize: 13, color: 'var(--text-faint)' }}>
+              {filter === 'unplanned' ? t('places.allPlanned') : t('places.noneFound')}
+            </span>
+            <button onClick={onAddPlace} style={{ fontSize: 12, color: 'var(--text-primary)', background: 'none', border: 'none', cursor: 'pointer', textDecoration: 'underline', fontFamily: 'inherit' }}>
+              {t('places.addPlace')}
+            </button>
+          </div>
+        ) : (
+          filtered.map(place => {
+            const cat = categories.find(c => c.id === place.category_id)
+            const isSelected = place.id === selectedPlaceId
+            const inDay = isAssignedToSelectedDay(place.id)
+            const isPlanned = plannedIds.has(place.id)
+
+            return (
+              <div
+                key={place.id}
+                draggable
+                onDragStart={e => {
+                  e.dataTransfer.setData('placeId', String(place.id))
+                  e.dataTransfer.effectAllowed = 'copy'
+                  // Backup in window für Cross-Component Drag (dataTransfer geht bei Re-Render verloren)
+                  window.__dragData = { placeId: String(place.id) }
+                }}
+                onClick={() => onPlaceClick(isSelected ? null : place.id)}
+                style={{
+                  display: 'flex', alignItems: 'center', gap: 10,
+                  padding: '9px 14px 9px 16px',
+                  cursor: 'grab',
+                  background: isSelected ? 'var(--border-faint)' : 'transparent',
+                  borderBottom: '1px solid var(--border-faint)',
+                  transition: 'background 0.1s',
+                }}
+                onMouseEnter={e => { if (!isSelected) e.currentTarget.style.background = 'var(--bg-hover)' }}
+                onMouseLeave={e => { if (!isSelected) e.currentTarget.style.background = 'transparent' }}
+              >
+                <PlaceAvatar place={place} category={cat} size={34} />
+                <div style={{ flex: 1, minWidth: 0 }}>
+                  <div style={{ display: 'flex', alignItems: 'center', gap: 5, overflow: 'hidden' }}>
+                    {cat && (() => {
+                      const CatIcon = getCategoryIcon(cat.icon)
+                      return <CatIcon size={11} strokeWidth={2} color={cat.color || '#6366f1'} style={{ flexShrink: 0 }} title={cat.name} />
+                    })()}
+                    <span style={{ fontSize: 13, fontWeight: 500, color: 'var(--text-primary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', lineHeight: 1.2 }}>
+                      {place.name}
+                    </span>
+                  </div>
+                  {(place.description || place.address || cat?.name) && (
+                    <div style={{ marginTop: 2 }}>
+                      <span style={{ fontSize: 11, color: 'var(--text-faint)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', display: 'block', lineHeight: 1.2 }}>
+                        {place.description || place.address || cat?.name}
+                      </span>
+                    </div>
+                  )}
+                </div>
+                <div style={{ flexShrink: 0, display: 'flex', alignItems: 'center' }}>
+                  {!inDay && selectedDayId && (
+                    <button
+                      onClick={e => { e.stopPropagation(); onAssignToDay(place.id) }}
+                      style={{
+                        display: 'flex', alignItems: 'center', justifyContent: 'center',
+                        width: 20, height: 20, borderRadius: 6,
+                        background: 'var(--bg-hover)', border: 'none', cursor: 'pointer',
+                        color: 'var(--text-faint)', padding: 0, transition: 'background 0.15s, color 0.15s',
+                      }}
+                      onMouseEnter={e => { e.currentTarget.style.background = 'var(--accent)'; e.currentTarget.style.color = 'var(--accent-text)' }}
+                      onMouseLeave={e => { e.currentTarget.style.background = 'var(--bg-hover)'; e.currentTarget.style.color = 'var(--text-faint)' }}
+                    ><Plus size={12} strokeWidth={2.5} /></button>
+                  )}
+                </div>
+              </div>
+            )
+          })
+        )}
+      </div>
+    </div>
+  )
+}