feat: implement resizable public wiki sidebar with improved content fetching, map zoom limits, and layout adjustments

src/uhm/components/map/mapUtils.ts

@@ -130,7 +130,7 @@ export function getSelectableLayers(map: maplibregl.Map): string[] {
     const selectableSources = ["countries", "places", PATH_ARROW_SOURCE_ID];
     const style = map.getStyle();
     if (!style || !style.layers) return [];
-    
+
     return style.layers
         .filter((layer) => "source" in layer && selectableSources.includes(layer.source as string))
         .map((layer) => layer.id);
@@ -446,8 +446,8 @@ export function buildPathArrowGeometry(coords: [number, number][]): Geometry | n
 
     if (bodyPoints.length < 2) return null;
 
-    const tailWidth = clampNumber(totalLength * 0.005, 8000, 40000);
-    const shoulderWidth = clampNumber(totalLength * 0.015, 18000, 100000);
+    const tailWidth = clampNumber(totalLength * 0.02, 5, 40000);
+    const shoulderWidth = clampNumber(totalLength * 0.1, 10, 100000);
     const headWidth = shoulderWidth * 2.0;
 
     const leftBody: ProjectedPoint[] = [];

src/uhm/components/map/useMapSync.ts

@@ -72,6 +72,8 @@ export function useMapSync({
     const fitToDraftBoundsRef = useRef(fitToDraftBounds);
     const highlightFeaturesRef = useRef<FeatureCollection | null>(highlightFeatures || null);
     const imageOverlayRef = useRef<MapImageOverlay | null>(imageOverlay || null);
+    const focusFeatureCollectionRef = useRef<FeatureCollection | null | undefined>(focusFeatureCollection);
+    const focusPaddingRef = useRef<number | maplibregl.PaddingOptions | undefined>(focusPadding);
 
     const fitBoundsAppliedRef = useRef(false);
 
@@ -85,6 +87,8 @@ export function useMapSync({
     useEffect(() => { fitToDraftBoundsRef.current = fitToDraftBounds; }, [fitToDraftBounds]);
     useEffect(() => { highlightFeaturesRef.current = highlightFeatures || null; }, [highlightFeatures]);
     useEffect(() => { imageOverlayRef.current = imageOverlay || null; }, [imageOverlay]);
+    useEffect(() => { focusFeatureCollectionRef.current = focusFeatureCollection; }, [focusFeatureCollection]);
+    useEffect(() => { focusPaddingRef.current = focusPadding; }, [focusPadding]);
 
     useEffect(() => {
         fitBoundsAppliedRef.current = false;
@@ -217,7 +221,7 @@ export function useMapSync({
     useEffect(() => {
         if (focusRequestKey === null || focusRequestKey === undefined) return;
         const map = mapRef.current;
-        const target = focusFeatureCollection;
+        const target = focusFeatureCollectionRef.current;
         if (!target || !target.features.length) return;
         if (!map) return;
 
@@ -226,7 +230,7 @@ export function useMapSync({
 
         const focus = () => {
             if (cancelled || mapRef.current !== map || !map.isStyleLoaded()) return;
-            fitMapToFeatureCollection(map, target, focusPadding, {
+            fitMapToFeatureCollection(map, target, focusPaddingRef.current, {
                 duration: 550,
                 maxZoom: 10,
                 pointZoom: 9,
@@ -243,7 +247,7 @@ export function useMapSync({
             cancelled = true;
             if (rafId !== null) cancelAnimationFrame(rafId);
         };
-    }, [focusFeatureCollection, focusPadding, focusRequestKey, mapRef]);
+    }, [focusRequestKey, mapRef]);
 
     return {
         applyDraftToMap,