Added back errors panel (#1384)

## Launch Checklist

This PR adds back the error panel which was under the map for some
reason.
It also highlights problematic layers in the layers list (which already
worked).
It also highlights the field that has an error related to it.
It fixes the error types throughout the code.

Before:
<img width="1141" height="665" alt="image"
src="https://github.com/user-attachments/assets/c0593d6c-8f14-41b3-8a51-bc359446656d"
/>


After:
<img width="1141" height="665" alt="image"
src="https://github.com/user-attachments/assets/1ffeebb7-31ea-4ed5-97f4-fc5f907a6aea"
/>


 - [x] Briefly describe the changes in this PR.
- [x] Include before/after visuals or gifs if this PR includes visual
changes.
 - [x] Write tests for all new functionality.
 - [x] Add an entry to `CHANGELOG.md` under the `## main` section.

---------

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>

cypress/e2e/layers.cy.ts

@@ -492,7 +492,7 @@ describe("layers", () => {
       then(get.elementByTestId("spec-field-doc")).shouldContainText("Offset distance");
     });
 
-    it.only("should hide spec info when clicking a second time", () => {
+    it("should hide spec info when clicking a second time", () => {
       when.modal.fillLayers({
         type: "symbol",
         layer: "example",
@@ -698,33 +698,48 @@ describe("layers", () => {
     });
   });
 
-  describe("layereditor jsonlint should error", ()=>{
-    it("add", () => {
-      const id = when.modal.fillLayers({
-        type: "circle",
-        layer: "example",
+  describe("layers editor", () => {
+    describe("property fields", () => {
+      it("should show error", () => {
+        when.modal.fillLayers({
+          type: "circle",
+          layer: "invalid",
+        });
+
+        then(get.element(".maputnik-input-block--error .maputnik-input-block-label")).shouldHaveCss("color", "rgb(207, 74, 74)");
       });
+    });
 
-      then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
-        layers: [
-          {
-            id: id,
-            type: "circle",
-            source: "example",
-          },
-        ],
+    describe("jsonlint should error", ()=>{
+      it("add", () => {
+        const id = when.modal.fillLayers({
+          type: "circle",
+          layer: "example",
+        });
+
+        then(get.styleFromLocalStorage()).shouldDeepNestedInclude({
+          layers: [
+            {
+              id: id,
+              type: "circle",
+              source: "example",
+            },
+          ],
+        });
+
+        const sourceText = get.elementByText('"source"');
+
+        sourceText.click();
+        sourceText.type("\"");
+
+        const error = get.element(".CodeMirror-lint-marker-error");
+        error.should("exist");
       });
-
-      const sourceText = get.elementByText('"source"');
-
-      sourceText.click();
-      sourceText.type("\"");
-
-      const error = get.element(".CodeMirror-lint-marker-error");
-      error.should("exist");
     });
   });
 
+
+
   describe("drag and drop", () => {
     it("move layer should update local storage", () => {
       when.modal.open();

cypress/e2e/modals.cy.ts

@@ -382,6 +382,21 @@ describe("modals", () => {
     });
   });
 
+  describe("error panel", () => {
+    it("not visible when no errors", () => {
+      then(get.element("maputnik-message-panel-error")).shouldNotExist();
+    });
+
+    it("visible on style error", () => {
+      when.modal.open();
+      when.modal.fillLayers({
+        type: "circle",
+        layer: "invalid",
+      });
+      then(get.element(".maputnik-message-panel-error")).shouldBeVisible();
+    });
+  });
+
   describe("Handle localStorage QuotaExceededError", () => {
     it("handles quota exceeded error when opening style from URL", () => {
       // Clear localStorage to start fresh