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

Self-hosted travel planner with Express.js, SQLite, React & Tailwind CSS.
2026-06-19 13:21:46 +00:00 · 2026-03-18 23:58:08 +01:00
commit cb1e217bbe
100 changed files with 25545 additions and 0 deletions
@@ -0,0 +1,144 @@
+import React, { useState, useRef, useEffect } from 'react'
+import ReactDOM from 'react-dom'
+import { ChevronDown, Check } from 'lucide-react'
+
+export default function CustomSelect({
+  value,
+  onChange,
+  options = [],       // [{ value, label, icon? }]
+  placeholder = '',
+  searchable = false,
+  style = {},
+  size = 'md',        // 'sm' | 'md'
+}) {
+  const [open, setOpen] = useState(false)
+  const [search, setSearch] = useState('')
+  const ref = useRef(null)
+  const dropRef = useRef(null)
+  const searchRef = useRef(null)
+
+  useEffect(() => {
+    if (open && searchable && searchRef.current) searchRef.current.focus()
+  }, [open, searchable])
+
+  useEffect(() => {
+    const handleClick = (e) => {
+      if (ref.current?.contains(e.target)) return
+      if (dropRef.current?.contains(e.target)) return
+      setOpen(false)
+    }
+    if (open) document.addEventListener('mousedown', handleClick)
+    return () => document.removeEventListener('mousedown', handleClick)
+  }, [open])
+
+  const selected = options.find(o => o.value === value)
+  const filtered = searchable && search
+    ? options.filter(o => o.label.toLowerCase().includes(search.toLowerCase()))
+    : options
+
+  const sm = size === 'sm'
+
+  return (
+    <div ref={ref} style={{ position: 'relative', ...style }}>
+      {/* Trigger */}
+      <button
+        type="button"
+        onClick={() => { setOpen(o => !o); setSearch('') }}
+        style={{
+          width: '100%', display: 'flex', alignItems: 'center', gap: 8,
+          padding: sm ? '8px 12px' : '8px 14px', borderRadius: 10,
+          border: '1px solid var(--border-primary)',
+          background: 'var(--bg-input)', color: 'var(--text-primary)',
+          fontSize: 13, fontWeight: 500, fontFamily: 'inherit',
+          cursor: 'pointer', outline: 'none', textAlign: 'left',
+          transition: 'border-color 0.15s',
+        }}
+        onMouseEnter={e => e.currentTarget.style.borderColor = 'var(--text-faint)'}
+        onMouseLeave={e => { if (!open) e.currentTarget.style.borderColor = 'var(--border-primary)' }}
+      >
+        {selected?.icon && <span style={{ display: 'flex', flexShrink: 0 }}>{selected.icon}</span>}
+        <span style={{ flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', color: selected ? 'var(--text-primary)' : 'var(--text-faint)' }}>
+          {selected ? selected.label : placeholder}
+        </span>
+        <ChevronDown size={sm ? 12 : 14} style={{ flexShrink: 0, color: 'var(--text-faint)', transition: 'transform 0.2s', transform: open ? 'rotate(180deg)' : 'none' }} />
+      </button>
+
+      {/* Dropdown */}
+      {open && ReactDOM.createPortal(
+        <div ref={dropRef} style={{
+          position: 'fixed',
+          top: (() => { const r = ref.current?.getBoundingClientRect(); return r ? r.bottom + 4 : 0 })(),
+          left: (() => { const r = ref.current?.getBoundingClientRect(); return r ? r.left : 0 })(),
+          width: (() => { const r = ref.current?.getBoundingClientRect(); return r ? r.width : 200 })(),
+          zIndex: 99999,
+          background: 'var(--bg-card)',
+          backdropFilter: 'blur(24px) saturate(180%)',
+          WebkitBackdropFilter: 'blur(24px) saturate(180%)',
+          border: '1px solid var(--border-primary)',
+          borderRadius: 10,
+          boxShadow: '0 8px 32px rgba(0,0,0,0.12)',
+          overflow: 'hidden',
+          animation: 'selectIn 0.15s ease-out',
+        }}>
+          {/* Search */}
+          {searchable && (
+            <div style={{ padding: '6px 6px 2px' }}>
+              <input
+                ref={searchRef}
+                type="text"
+                value={search}
+                onChange={e => setSearch(e.target.value)}
+                placeholder="..."
+                style={{
+                  width: '100%', border: '1px solid var(--border-secondary)', borderRadius: 6,
+                  padding: '5px 8px', fontSize: 12, outline: 'none', fontFamily: 'inherit',
+                  background: 'var(--bg-secondary)', color: 'var(--text-primary)',
+                  boxSizing: 'border-box',
+                }}
+              />
+            </div>
+          )}
+
+          {/* Options */}
+          <div style={{ maxHeight: 220, overflowY: 'auto', padding: '4px' }}>
+            {filtered.length === 0 ? (
+              <div style={{ padding: '10px 12px', fontSize: 12, color: 'var(--text-faint)', textAlign: 'center' }}>—</div>
+            ) : (
+              filtered.map(option => {
+                const isSelected = option.value === value
+                return (
+                  <button
+                    key={option.value}
+                    type="button"
+                    onClick={() => { onChange(option.value); setOpen(false); setSearch('') }}
+                    style={{
+                      width: '100%', display: 'flex', alignItems: 'center', gap: 8,
+                      padding: '7px 10px', borderRadius: 6,
+                      border: 'none', background: isSelected ? 'var(--bg-hover)' : 'transparent',
+                      color: 'var(--text-primary)', fontSize: 13, fontFamily: 'inherit',
+                      cursor: 'pointer', textAlign: 'left', transition: 'background 0.1s',
+                    }}
+                    onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-hover)'}
+                    onMouseLeave={e => e.currentTarget.style.background = isSelected ? 'var(--bg-hover)' : 'transparent'}
+                  >
+                    {option.icon && <span style={{ display: 'flex', flexShrink: 0 }}>{option.icon}</span>}
+                    <span style={{ flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{option.label}</span>
+                    {isSelected && <Check size={13} style={{ flexShrink: 0, color: 'var(--text-muted)' }} />}
+                  </button>
+                )
+              })
+            )}
+          </div>
+        </div>,
+        document.body
+      )}
+
+      <style>{`
+        @keyframes selectIn {
+          from { opacity: 0; transform: translateY(-4px); }
+          to { opacity: 1; transform: translateY(0); }
+        }
+      `}</style>
+    </div>
+  )
+}