Add V1 selected area map overlay

frontend/src/components/project/AreaPanel.tsx

@@ -13,8 +13,10 @@ interface AreaPanelProps {
   selectedProjectId: string | null
   loadingAreas: boolean
   areaForm: AreaFormState
+  selectedMapAreaId: string
   onCreateArea: (event: FormEvent<HTMLFormElement>) => void
   onUpdateAreaForm: (areaForm: AreaFormState) => void
+  onSelectMapArea: (areaId: string) => void
 }
 
 export function AreaPanel({
@@ -23,8 +25,10 @@ export function AreaPanel({
   selectedProjectId,
   loadingAreas,
   areaForm,
+  selectedMapAreaId,
   onCreateArea,
   onUpdateAreaForm,
+  onSelectMapArea,
 }: AreaPanelProps): JSX.Element {
   return (
     <section>
@@ -57,7 +61,11 @@ export function AreaPanel({
       <ul>
         {areas.map((area) => (
           <li key={area.id}>
-            {area.name} · {area.area_m2 ? `${area.area_m2.toFixed(2)} m²` : 'n/a'}
+            <strong>{area.name}</strong> - {area.area_m2 ? `${area.area_m2.toFixed(2)} m2` : 'n/a'}
+            <div>geometry: {area.geometry?.type ?? area.geometry_type ?? 'n/a'}</div>
+            <button type="button" onClick={() => onSelectMapArea(area.id)} disabled={!area.geometry}>
+              {selectedMapAreaId === area.id ? 'Shown on map' : 'Show on map'}
+            </button>
           </li>
         ))}
       </ul>