Good changes

frontend/src/components/ui/DestinationDropdown.tsx

@@ -0,0 +1,222 @@
+import {
+  useState,
+  useRef,
+  useEffect,
+  useCallback,
+  useLayoutEffect,
+  useMemo,
+} from 'react';
+import { createPortal } from 'react-dom';
+import type { Destination } from '../../hooks/useTravelDestinations';
+import { MapPinIcon } from './icons/MapPinIcon';
+import { ChevronIcon } from './icons/ChevronIcon';
+
+interface DestinationDropdownProps {
+  destinations: Destination[];
+  loading: boolean;
+  onSelect: (slug: string, label: string) => void;
+  placeholder?: string;
+}
+
+export function DestinationDropdown({
+  destinations,
+  loading,
+  onSelect,
+  placeholder = 'Select destination...',
+}: DestinationDropdownProps) {
+  const [open, setOpen] = useState(false);
+  const [filter, setFilter] = useState('');
+  const [activeIndex, setActiveIndex] = useState(-1);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const listRef = useRef<HTMLDivElement>(null);
+  const [pos, setPos] = useState<{
+    top: number;
+    left: number;
+    width: number;
+  } | null>(null);
+
+  const filtered = useMemo(() => {
+    if (!filter) return destinations;
+    const lower = filter.toLowerCase();
+    return destinations.filter(
+      (d) =>
+        d.name.toLowerCase().includes(lower) ||
+        d.city?.toLowerCase().includes(lower),
+    );
+  }, [destinations, filter]);
+
+  // Position the dropdown portal
+  const updatePos = useCallback(() => {
+    if (!containerRef.current) return;
+    const rect = containerRef.current.getBoundingClientRect();
+    setPos({ top: rect.bottom + 4, left: rect.left, width: rect.width });
+  }, []);
+
+  useLayoutEffect(() => {
+    if (!open) return;
+    updatePos();
+    window.addEventListener('scroll', updatePos, true);
+    window.addEventListener('resize', updatePos);
+    return () => {
+      window.removeEventListener('scroll', updatePos, true);
+      window.removeEventListener('resize', updatePos);
+    };
+  }, [open, updatePos]);
+
+  // Close on outside click
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e: MouseEvent) => {
+      if (
+        containerRef.current &&
+        !containerRef.current.contains(e.target as Node)
+      ) {
+        setOpen(false);
+        setFilter('');
+      }
+    };
+    document.addEventListener('mousedown', handler);
+    return () => document.removeEventListener('mousedown', handler);
+  }, [open]);
+
+  // Scroll active item into view
+  useEffect(() => {
+    if (activeIndex < 0 || !listRef.current) return;
+    const item = listRef.current.children[activeIndex] as HTMLElement;
+    item?.scrollIntoView({ block: 'nearest' });
+  }, [activeIndex]);
+
+  const handleSelect = useCallback(
+    (dest: Destination) => {
+      onSelect(dest.slug, dest.name);
+      setOpen(false);
+      setFilter('');
+      setActiveIndex(-1);
+    },
+    [onSelect],
+  );
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        setActiveIndex((prev) =>
+          prev < filtered.length - 1 ? prev + 1 : prev,
+        );
+      } else if (e.key === 'ArrowUp') {
+        e.preventDefault();
+        setActiveIndex((prev) => (prev > 0 ? prev - 1 : -1));
+      } else if (e.key === 'Enter') {
+        e.preventDefault();
+        if (activeIndex >= 0 && activeIndex < filtered.length) {
+          handleSelect(filtered[activeIndex]);
+        }
+      } else if (e.key === 'Escape') {
+        setOpen(false);
+        setFilter('');
+      }
+    },
+    [filtered, activeIndex, handleSelect],
+  );
+
+  const handleOpen = useCallback(() => {
+    setOpen(true);
+    setActiveIndex(-1);
+    // Focus input after opening
+    requestAnimationFrame(() => inputRef.current?.focus());
+  }, []);
+
+  const dropdown = open && (
+    <div
+      className="bg-white dark:bg-warm-800 rounded shadow-lg border border-warm-200 dark:border-warm-700 overflow-hidden"
+      style={
+        pos
+          ? {
+              position: 'fixed',
+              top: pos.top,
+              left: pos.left,
+              width: pos.width,
+              zIndex: 50,
+            }
+          : undefined
+      }
+    >
+      {/* Filter input */}
+      <div className="p-1.5 border-b border-warm-100 dark:border-warm-700">
+        <input
+          ref={inputRef}
+          type="text"
+          value={filter}
+          onChange={(e) => {
+            setFilter(e.target.value);
+            setActiveIndex(-1);
+          }}
+          onKeyDown={handleKeyDown}
+          placeholder="Type to filter..."
+          className="w-full px-2 py-1 text-xs rounded border border-warm-200 dark:border-warm-600 bg-warm-50 dark:bg-warm-900 text-navy-950 dark:text-warm-200 placeholder-warm-400 dark:placeholder-warm-500 outline-none focus:ring-1 focus:ring-teal-400"
+        />
+      </div>
+
+      {/* Results list */}
+      <div ref={listRef} className="max-h-48 overflow-y-auto">
+        {filtered.length === 0 ? (
+          <div className="px-2 py-2 text-xs text-warm-400 dark:text-warm-500 text-center">
+            {loading ? 'Loading...' : 'No destinations found'}
+          </div>
+        ) : (
+          filtered.map((dest, idx) => (
+            <button
+              key={dest.slug}
+              type="button"
+              className={`w-full text-left flex items-center cursor-pointer px-2 py-1.5 gap-1.5 text-xs ${
+                idx === activeIndex
+                  ? 'bg-teal-50 dark:bg-teal-900/30'
+                  : 'hover:bg-warm-50 dark:hover:bg-warm-700'
+              }`}
+              onMouseEnter={() => setActiveIndex(idx)}
+              onMouseDown={(e) => {
+                e.preventDefault();
+                handleSelect(dest);
+              }}
+            >
+              <MapPinIcon className="w-3 h-3 text-warm-400 dark:text-warm-500 shrink-0" />
+              <span className="text-warm-700 dark:text-warm-200 truncate">
+                {dest.name}
+                {dest.city && (
+                  <span className="text-warm-400 dark:text-warm-500">
+                    {' '}
+                    ({dest.city})
+                  </span>
+                )}
+              </span>
+            </button>
+          ))
+        )}
+      </div>
+    </div>
+  );
+
+  return (
+    <div ref={containerRef} className="relative">
+      <button
+        type="button"
+        onClick={handleOpen}
+        className="w-full flex items-center gap-1.5 px-2 py-1 text-xs rounded border border-warm-200 dark:border-warm-600 bg-white dark:bg-warm-800 text-warm-400 dark:text-warm-500 hover:border-warm-300 dark:hover:border-warm-500 outline-none focus:ring-1 focus:ring-teal-400"
+      >
+        {loading ? (
+          <div className="w-3 h-3 border-2 border-warm-300 dark:border-warm-600 border-t-teal-500 rounded-full animate-spin shrink-0" />
+        ) : (
+          <MapPinIcon className="w-3 h-3 shrink-0" />
+        )}
+        <span className="flex-1 text-left truncate">{placeholder}</span>
+        <ChevronIcon
+          direction={open ? 'up' : 'down'}
+          className="w-3 h-3 shrink-0"
+        />
+      </button>
+
+      {open && createPortal(dropdown, document.body)}
+    </div>
+  );
+}

frontend/src/components/ui/FeatureIcons.tsx

@@ -28,7 +28,7 @@ export function FeatureActions({
       )}
       <IconButton
         onClick={() => onTogglePin(feature.name)}
-        title={isPinned ? 'Unpin color view' : 'Color map by this feature'}
+        title={isPinned ? 'Unpin colour view' : 'Colour map by this feature'}
         active={isPinned}
         size="md"
       >