Add dashboard UI foundation and map export workflow

web/src/components/map/MapView.tsx

@@ -8,6 +8,7 @@ import { cityCoords } from "../cityCoords";
 import { MapResolution, resolutionProps, windProps, WindProps } from "./mapConsts";
 import { CityData, drawOnMap } from "./canvasDraw";
 import { IconInputs } from "../weatherIcons/IconInputs";
+import { download } from '../../helpers/download'
 
 export const MapView: Component<{ type: MapResolution, data: () => ResultKeyVal[] }> = ({ type, data }) => {
     const [getCanvas, setCanvas] = createSignal<HTMLCanvasElement>();
@@ -75,13 +76,19 @@ export const MapView: Component<{ type: MapResolution, data: () => ResultKeyVal[
     });
 
     const getStyleSize = () => {
-        return props.width === 1920
-            ? { "width": "1000px", "height": "562px" }
-            : { "width": "1000px", "height": "374px" };
+        return { "width": "100%", "height": "auto" };
+    }
+
+    function downloadPng() {
+        getCanvas()!.toBlob(blob => blob && download(blob, `weather-${type}.png`), 'image/png')
     }
 
     return (
-        <>
+        <div class="mapWorkspace">
+            <div class="mapToolbar"><div><strong>Map preview</strong><span>{props.width} × {props.height} px export</span></div><button class="primary" onClick={downloadPng}>Download PNG</button></div>
+            <details class="broadcastControls">
+                <summary><span><strong>Broadcast overlay controls</strong><small>Optional manual wind and weather-symbol overrides</small></span></summary>
+                <p class="controlHelp">These settings do not change the queried city values. Use them only when preparing a finished broadcast graphic.</p>
             <div class="grid-1-2">
                 <div>
                     <div>
@@ -98,12 +105,15 @@ export const MapView: Component<{ type: MapResolution, data: () => ResultKeyVal[
                 </div>
                 <div><IconInputs weatherIconsSingal={weatherIconsSingal} /></div>
             </div>
+            </details>
+            <div class="canvasFrame">
             <canvas
                 ref={setCanvas}
-                width={props.width+"px"}
-                height={props.height+"px"}
+                width={props.width}
+                height={props.height}
                 style={getStyleSize()}
             />
-        </>
+            </div>
+        </div>
     );
 }