chore: move DrawToolbar and SettingsToolbar to bar.js module (#2482)

This also:
- change the "set center and zoom" to be a panel instead of a direct
action (including the "defaultView" setting
- refactor the "get started dialog"

This is a first step to remove our dependency to the unmaintained
Leaflet.Toolbar plugin.


![image](https://github.com/user-attachments/assets/d9a76df1-0392-45c8-9a2f-f1a2995754d1)


![image](https://github.com/user-attachments/assets/7f40e2f5-c816-4086-9a16-b792621948de)


![image](https://github.com/user-attachments/assets/a02fd480-c50b-4d2d-9919-ca483c1c8def)

The mockup on figma glues the edit toolbar to the edit panel, but I
didn't not implement this as I don't know how to make it work in
portrait/mobile view. This step is mainly a code refactor.

umap/static/umap/css/bar.css

@@ -201,3 +201,35 @@
 .umap-caption-bar-enabled {
     --current-footer-height: var(--footer-height);
 }
+.umap-edit-bar {
+    position: absolute;
+    right: var(--panel-gutter);
+    display: none;
+    top: calc(var(--current-header-height) + var(--panel-gutter));
+    flex-direction: column;
+    z-index: var(--zindex-panels);
+    width: var(--control-size);
+    background-color: var(--background-color);
+    border-radius: var(--border-radius);
+}
+.umap-edit-enabled .umap-edit-bar {
+    display: flex;
+}
+.umap-edit-bar li {
+    width: var(--control-size);
+    height: var(--control-size);
+}
+.umap-edit-bar button {
+    padding: 0;
+    border-radius: 0;
+}
+.umap-edit-bar li:first-of-type button {
+    border-radius: var(--border-radius) var(--border-radius) 0 0;
+}
+.umap-edit-bar li:last-of-type button {
+    border-radius: 0 0 var(--border-radius) var(--border-radius);
+}
+.umap-edit-bar hr {
+    padding: 0;
+    margin: 0;
+}

umap/static/umap/css/form.css

@@ -476,15 +476,6 @@ i.info {
 .umap-download:before {
     background-position: -72px -78px;
 }
-.permissions-panel,
-.umap-upload,
-.umap-share,
-.umap-datalayer-container,
-.umap-layer-properties-container,
-.umap-browse-data,
-.umap-tilelayer-switcher-container {
-    padding: 0 10px;
-}
 .umap-field-datalist {
     display: flex;
     justify-content: space-between;
@@ -615,6 +606,6 @@ input[type=hidden].blur + [type="button"] {
 input.highlightable:not(:placeholder-shown) {
     border: 1px solid var(--color-brightCyan);
 }
-.umap-upload [type=url] {
+.umap-import [type=url] {
     margin-bottom: 0;
 }

umap/static/umap/css/icon.css

@@ -62,6 +62,9 @@ html[dir="rtl"] .icon {
 .icon-caption {
     background-position: calc(var(--tile) * 4) var(--tile);
 }
+.icon-center {
+    background-position: calc(var(--tile) * 4) calc(var(--tile) * 2);
+}
 .icon-close {
     background-position: var(--tile) 0px;
 }
@@ -101,6 +104,9 @@ html[dir="rtl"] .icon {
 .icon-forward {
     background-position: calc(var(--tile) * 6) calc(var(--tile) * 6);
 }
+.icon-help {
+    background-position: 0 0;
+}
 .icon-key {
     background-position: calc(var(--tile) * 6) calc(var(--tile) * 5);
 }
@@ -114,16 +120,22 @@ html[dir="rtl"] .icon {
     background-position: calc(var(--tile) * 7) 0;
 }
 .icon-marker {
-    background-position: calc(var(--tile) * 3) calc(var(--tile) * 5);
+    background-position: calc(var(--tile) * 7) var(--tile);
+}
+.icon-multipolygon {
+    background-position: calc(var(--tile) * 7) calc(var(--tile) * 5);
+}
+.icon-multiline {
+    background-position: calc(var(--tile) * 7) calc(var(--tile) * 7);
 }
 .icon-peers {
     background-position: calc(var(--tile) * 3) calc(var(--tile) * 2);
 }
 .icon-polygon {
-    background-position: var(--tile) calc(var(--tile) * 3);
+    background-position: calc(var(--tile) * 7) calc(var(--tile) * 4);
 }
 .icon-polyline {
-    background-position: 0 calc(var(--tile) * 3);
+    background-position: calc(var(--tile) * 7) calc(var(--tile) * 6);
 }
 .icon-profile {
     background-position: 0 calc(var(--tile) * 4);

umap/static/umap/css/panel.css

@@ -9,7 +9,7 @@
     background-color: var(--background-color);
     color: var(--text-color);
     cursor: initial;
-    border-radius: 5px;
+    border-radius: var(--border-radius);
     border: 1px solid var(--color-lightGray);
     bottom: calc(var(--current-footer-height) + var(--panel-bottom));
     box-sizing: border-box;
@@ -107,3 +107,20 @@
         border-bottom-right-radius: 0;
     }
 }
+
+:has(.right[data-highlight="caption"]) li[data-ref="caption"] button,
+:has(.right[data-highlight="caption"]) li[data-ref="caption"] button:hover,
+:has(.right[data-highlight="import"]) li[data-ref="import"] button,
+:has(.right[data-highlight="import"]) li[data-ref="import"] button:hover,
+:has(.right[data-highlight="layers"]) li[data-ref="layers"] button,
+:has(.right[data-highlight="layers"]) li[data-ref="layers"] button:hover,
+:has(.right[data-highlight="tilelayers"]) li[data-ref="tilelayers"] button,
+:has(.right[data-highlight="tilelayers"]) li[data-ref="tilelayers"] button:hover,
+:has(.right[data-highlight="center"]) li[data-ref="center"] button,
+:has(.right[data-highlight="center"]) li[data-ref="center"] button:hover,
+:has(.right[data-highlight="permissions"]) li[data-ref="permissions"] button,
+:has(.right[data-highlight="permissions"]) li[data-ref="permissions"] button:hover,
+:has(.right[data-highlight="settings"]) li[data-ref="settings"] button,
+:has(.right[data-highlight="settings"]) li[data-ref="settings"] button:hover {
+    background-color: var(--color-mediumGray);
+}

umap/static/umap/css/popup.css

@@ -89,7 +89,6 @@ span.popup-icon {
 .umap-popup-container ul {
     list-style-type: disc;
 }
-.leaflet-control-toolbar,
 .leaflet-bar {
     box-shadow: none;
 }