add synchronized dual-display workbench

frontend/src/components/map/MapWorkspace.tsx

@@ -9,6 +9,7 @@ import { getDatasetDisplayName, getDatasetSourceDisplayName } from '../../lib/da
 import { TemporalTrendChart } from './TemporalTrendChart'
 import { MunicipalitySearch } from './MunicipalitySearch'
 import { LiveAnalysisJourney } from './LiveAnalysisJourney'
+import { SecondaryDisplayTarget } from '../shell/SecondaryDisplay'
 import { terrainImageUrl } from '../../lib/terrainImage'
 import { floodHazardImageUrl } from '../../lib/floodHazardImage'
 import { thematicRasterImageUrl, walousRasterImageUrl } from '../../lib/thematicRaster'
@@ -645,6 +646,7 @@ function floodScenarioLabel(dataset: DatasetCreateResponse): string {
 
 interface MapWorkspaceProps {
   readOnly?: boolean
+  secondaryResultsContainer?: HTMLElement | null
   selectedProjectId: string | null
   projects: ProjectRead[]
   areas: AreaRead[]
@@ -740,6 +742,7 @@ interface MapWorkspaceProps {
 
 export function MapWorkspace({
   readOnly = false,
+  secondaryResultsContainer = null,
   selectedProjectId,
   projects,
   areas,
@@ -2689,25 +2692,28 @@ export function MapWorkspace({
             </div>
           </div>
 
-          <button
-            className={resultsPanelOpen ? 'geo-results-toggle geo-results-toggle-open' : 'geo-results-toggle'}
-            type="button"
-            aria-controls="geo-explorer-results"
-            aria-expanded={resultsPanelOpen}
-            aria-label={resultsPanelOpen ? 'Sluit inzichten' : 'Open inzichten'}
-            onClick={() => setResultsPanelOpen((open) => !open)}
-          >
-            {resultsPanelOpen ? <ChevronRight aria-hidden="true" /> : <ChevronLeft aria-hidden="true" />}
-            <span>{resultsPanelOpen ? 'Sluit inzichten' : 'Inzichten'}</span>
-          </button>
+          {secondaryResultsContainer ? null : (
+            <button
+              className={resultsPanelOpen ? 'geo-results-toggle geo-results-toggle-open' : 'geo-results-toggle'}
+              type="button"
+              aria-controls="geo-explorer-results"
+              aria-expanded={resultsPanelOpen}
+              aria-label={resultsPanelOpen ? 'Sluit inzichten' : 'Open inzichten'}
+              onClick={() => setResultsPanelOpen((open) => !open)}
+            >
+              {resultsPanelOpen ? <ChevronRight aria-hidden="true" /> : <ChevronLeft aria-hidden="true" />}
+              <span>{resultsPanelOpen ? 'Sluit inzichten' : 'Inzichten'}</span>
+            </button>
+          )}
 
-          <aside
-            id="geo-explorer-results"
-            className={resultsPanelOpen ? 'geo-results-panel geo-results-panel-open' : 'geo-results-panel'}
-            aria-label="Gebiedsanalyse"
-            aria-live="polite"
-            aria-hidden={!resultsPanelOpen}
-          >
+          <SecondaryDisplayTarget container={secondaryResultsContainer}>
+            <aside
+              id={secondaryResultsContainer ? 'geo-secondary-results' : 'geo-explorer-results'}
+              className={secondaryResultsContainer ? 'geo-results-panel geo-results-panel-open geo-results-panel-secondary' : resultsPanelOpen ? 'geo-results-panel geo-results-panel-open' : 'geo-results-panel'}
+              aria-label="Gebiedsanalyse"
+              aria-live="polite"
+              aria-hidden={secondaryResultsContainer ? false : !resultsPanelOpen}
+            >
             <div className="geo-panel-heading">
               <div>
                 <h3>Inzichten</h3>
@@ -3031,7 +3037,8 @@ export function MapWorkspace({
                   : ''}
               </p>
             ) : null}
-          </aside>
+            </aside>
+          </SecondaryDisplayTarget>
         </div>
 
         <footer className="geo-explorer-footer">