Some of important APIs (methods and structural solutions)

how to add new popup or sidebar state

Let's see on example with new popup, that is going to congratulate user with something

1. Create a component CongratulationsPopup.svelte under popups folder: https://github.com/RomanistHere/Measureland/tree/chore/migrate-to-svelte/src/lib/components/Overlay/components/popups
2. https://github.com/RomanistHere/Measureland/blob/chore/migrate-to-svelte/src/lib/components/Overlay/components/popups/PopupLayer.svelte - (for popups only) - import it in PopupLayer.svelte and add to the dictionary (popupList object)
3. https://github.com/RomanistHere/Measureland/blob/chore/migrate-to-svelte/src/lib/constants/overlayStateDefault.js - add to the list of all popups and sidebars
4. Now you can call the popup via openAnotherOverlay('congratulationsPopup ') - Congratulations! Focus trap, closing via Escape and clicking oustide, closing button included.

how to add or remove new Markers on map

https://github.com/RomanistHere/Measureland/blob/chore/migrate-to-svelte/src/lib/components/Overlay/components/popups/QuizPopup/QuizPopup.svelte#L146 - update markerStore: markerStore.update(state => ({ ...state, markersToRemove: [ ...state.markersToRemove, { coords: coordsToRemove } ], markersToAdd: [ ...state.markersToAdd, { coords: coordsToAdd , rating: ratingToAdd } ], })); - if used somewhere else, can extract to addMarker and removeMarker functions

what are notifications

https://github.com/RomanistHere/Measureland/blob/chore/migrate-to-svelte/src/lib/components/Overlay/components/notifications/NotificationLayer.svelte - we have notifcations layer separated from other overlays. It exists for different kinds of mechanics, probably not needed and can be merged with other overlays. All the notifications centered related to sidebar