Refactor and other improvements

2026-02-08 18:25:58 +00:00 · 2026-02-08 18:25:58 +00:00 · 6c90cf3c0f
commit 6c90cf3c0f
parent 04a78e7bfe
47 changed files with 2705 additions and 1568 deletions
--- a/frontend/src/components/map/FeatureBrowser.tsx
+++ b/frontend/src/components/map/FeatureBrowser.tsx
@ -0,0 +1,129 @@
+import { useState, useMemo, useEffect } from 'react';
+import { useCollapsibleGroups } from '../../hooks/useCollapsibleGroups';
+import { SearchInput } from '../ui/SearchInput';
+import { FilterIcon } from '../ui/icons';
+import { CollapsibleGroupHeader } from '../ui/CollapsibleGroupHeader';
+import { EmptyState } from '../ui/EmptyState';
+import type { FeatureMeta } from '../../types';
+import { groupFeaturesByCategory } from '../../lib/features';
+import { FeatureInfoPopup } from '../ui/FeatureInfoPopup';
+import { FeatureActions } from '../ui/FeatureIcons';
+import { FeatureLabel } from '../ui/FeatureLabel';
+
+interface FeatureBrowserProps {
+  availableFeatures: FeatureMeta[];
+  allFeatures: FeatureMeta[];
+  pinnedFeature: string | null;
+  onAddFilter: (name: string) => void;
+  onTogglePin: (name: string) => void;
+  onNavigateToSource?: (slug: string, featureName: string) => void;
+  openInfoFeature?: string | null;
+  onClearOpenInfoFeature?: () => void;
+}
+
+export default function FeatureBrowser({
+  availableFeatures,
+  allFeatures,
+  pinnedFeature,
+  onAddFilter,
+  onTogglePin,
+  onNavigateToSource,
+  openInfoFeature,
+  onClearOpenInfoFeature,
+}: FeatureBrowserProps) {
+  const [search, setSearch] = useState('');
+  const [infoFeature, setInfoFeature] = useState<FeatureMeta | null>(null);
+  const [expandedGroups, toggleGroup] = useCollapsibleGroups();
+
+  useEffect(() => {
+    if (openInfoFeature) {
+      const feat = allFeatures.find((f) => f.name === openInfoFeature);
+      if (feat) setInfoFeature(feat);
+      onClearOpenInfoFeature?.();
+    }
+  }, [openInfoFeature, allFeatures, onClearOpenInfoFeature]);
+
+  const filtered = useMemo(() => {
+    if (!search) return availableFeatures;
+    const lower = search.toLowerCase();
+    return availableFeatures.filter((f) => f.name.toLowerCase().includes(lower));
+  }, [availableFeatures, search]);
+
+  const grouped = useMemo(() => groupFeaturesByCategory(filtered), [filtered]);
+
+  // When searching, expand all groups so results are visible
+  const isSearching = search.length > 0;
+
+  return (
+    <>
+      <div className="shrink-0 p-2 border-b border-warm-200 dark:border-navy-700">
+        <SearchInput value={search} onChange={setSearch} placeholder="Search features..." />
+      </div>
+      <div className="md:min-h-0 md:flex-1 md:overflow-y-auto flex flex-col">
+        {grouped.map((group) => {
+          const isExpanded = isSearching || expandedGroups.has(group.name);
+          return (
+            <div key={group.name} className="shrink-0">
+              <CollapsibleGroupHeader
+                name={group.name}
+                expanded={isExpanded}
+                onToggle={() => toggleGroup(group.name)}
+                className="px-3 py-1.5 text-xs font-bold text-warm-500 bg-warm-50 dark:bg-navy-950 dark:text-warm-400 sticky top-0 hover:bg-warm-100 dark:hover:bg-warm-800"
+              >
+                <span className="text-[10px] font-medium text-warm-400 dark:text-warm-500">
+                  {group.features.length}
+                </span>
+              </CollapsibleGroupHeader>
+              {isExpanded &&
+                group.features.map((f) => {
+                  const isPinned = pinnedFeature === f.name;
+                  return (
+                    <div
+                      key={f.name}
+                      className="flex items-start justify-between px-3 py-1.5 hover:bg-teal-50 dark:hover:bg-teal-900/30 dark:text-warm-300"
+                    >
+                      <div className="min-w-0 mr-2">
+                        <FeatureLabel feature={f} onShowInfo={setInfoFeature} size="sm" />
+                        {f.description && (
+                          <span className="text-xs text-warm-400 dark:text-warm-500 truncate block">
+                            {f.description}
+                          </span>
+                        )}
+                      </div>
+                      <FeatureActions
+                        feature={f}
+                        isPinned={isPinned}
+                        onTogglePin={onTogglePin}
+                        onAdd={onAddFilter}
+                      />
+                    </div>
+                  );
+                })}
+            </div>
+          );
+        })}
+        {grouped.length === 0 ? (
+          <EmptyState
+            icon={<FilterIcon className="w-8 h-8 text-warm-300 dark:text-warm-600" />}
+            title={search ? 'No matching features' : 'All features are active'}
+            description={
+              search ? 'Try a different search term' : 'Remove a filter to see available features'
+            }
+            className="px-3 py-4"
+          />
+        ) : (
+          <p className="flex-1 flex items-center justify-center px-4 py-6 text-xs text-center text-warm-400 dark:text-warm-500">
+            Everyone cares about different things. Pick the filters that matter most to you.
+          </p>
+        )}
+      </div>
+      {infoFeature && (
+        <FeatureInfoPopup
+          feature={infoFeature}
+          onClose={() => setInfoFeature(null)}
+          onNavigateToSource={onNavigateToSource}
+        />
+      )}
+    </>
+  );
+}