good changes

frontend/src/components/map/AreaPane.tsx

@@ -1,5 +1,4 @@
 import { useMemo, useState } from 'react';
-import { useCollapsibleGroups } from '../../hooks/useCollapsibleGroups';
 import type {
   FeatureFilters,
   FeatureMeta,
@@ -38,6 +37,8 @@ interface AreaPaneProps {
   filters: FeatureFilters;
   onNavigateToSource?: (slug: string, featureName: string) => void;
   travelTimeEntries?: TravelTimeEntry[];
+  isGroupExpanded: (name: string) => boolean;
+  onToggleGroup: (name: string) => void;
 }
 
 export default function AreaPane({
@@ -52,11 +53,12 @@ export default function AreaPane({
   filters,
   onNavigateToSource,
   travelTimeEntries,
+  isGroupExpanded,
+  onToggleGroup,
 }: AreaPaneProps) {
   const propertyCount = isPostcode && postcodeData ? postcodeData.properties.count : stats?.count;
   const featureGroups = useMemo(() => groupFeaturesByCategory(globalFeatures), [globalFeatures]);
   const [infoFeature, setInfoFeature] = useState<FeatureMeta | null>(null);
-  const [collapsedGroups, toggleGroup] = useCollapsibleGroups();
 
   const numericByName = useMemo(() => {
     if (!stats) return new Map();
@@ -165,17 +167,17 @@ export default function AreaPane({
                 ) ?? []
               );
 
-              const isExpanded = !collapsedGroups.has(group.name);
+              const expanded = isGroupExpanded(group.name);
 
               return (
                 <div key={group.name}>
                   <CollapsibleGroupHeader
                     name={group.name}
-                    expanded={isExpanded}
-                    onToggle={() => toggleGroup(group.name)}
+                    expanded={expanded}
+                    onToggle={() => onToggleGroup(group.name)}
                     className="px-3 py-2.5 text-sm font-bold text-warm-500 bg-warm-50 dark:bg-warm-900 dark:text-warm-400 sticky top-0 z-10 hover:bg-warm-100 dark:hover:bg-warm-800"
                   />
-                  {isExpanded && (
+                  {expanded && (
                     <div className="px-3 py-2 space-y-3">
                       {stackedCharts
                         ? stackedCharts.map((chart) => {