feat: add application toast messages

app.js

@@ -11,6 +11,11 @@ const DEVICE_ORIENTATION_EVENTS = ["deviceorientationabsolute", "deviceorientati
 const COMPASS_HEADING_DEADBAND = 2;
 const SMALL_SCREEN_MEDIA_QUERY = "(max-width: 920px)";
 const MODAL_VIEWPORT_PADDING = 24;
+const MESSAGE_DURATIONS = {
+  info: 5000,
+  warning: 6500,
+  error: 9000,
+};
 const MAP_URL_PARAMS = {
   latitude: "map-lat",
   longitude: "map-lon",
@@ -25,6 +30,7 @@ const BACKGROUND_VALUES = new Set(["soft", "openstreetmap", "satellite"]);
 
 const els = {
   appShell: document.querySelector(".app-shell"),
+  messageRegion: document.getElementById("message-region"),
   sidebar: document.getElementById("sidebar"),
   sidebarOpen: document.getElementById("sidebar-open"),
   sidebarClose: document.getElementById("sidebar-close"),
@@ -491,6 +497,56 @@ function updateDeviceCompassButton(message) {
   }
 }
 
+/**
+ * Display a short, non-blocking application message. Callers can override
+ * `duration` in milliseconds; errors have the longest default reading time.
+ */
+function showMessage(message, { type = "info", duration = MESSAGE_DURATIONS[type] } = {}) {
+  if (!els.messageRegion || !message) {
+    return;
+  }
+
+  const supportedTypes = new Set(Object.keys(MESSAGE_DURATIONS));
+  const messageType = supportedTypes.has(type) ? type : "info";
+  const displayDuration = Number.isFinite(duration) && duration > 0
+    ? duration
+    : MESSAGE_DURATIONS[messageType];
+  const toast = document.createElement("div");
+  toast.className = `message message--${messageType}`;
+  toast.setAttribute("role", messageType === "error" ? "alert" : "status");
+  toast.style.setProperty("--message-duration", `${displayDuration}ms`);
+
+  const text = document.createElement("p");
+  text.className = "message-text";
+  text.textContent = message;
+
+  const dismiss = document.createElement("button");
+  dismiss.className = "message-dismiss";
+  dismiss.type = "button";
+  dismiss.setAttribute("aria-label", "Dismiss message");
+  dismiss.textContent = "×";
+
+  const progress = document.createElement("span");
+  progress.className = "message-progress";
+  progress.setAttribute("aria-hidden", "true");
+
+  let timer = window.setTimeout(removeMessage, displayDuration);
+  function removeMessage() {
+    if (timer === undefined) {
+      return;
+    }
+
+    window.clearTimeout(timer);
+    timer = undefined;
+    toast.classList.add("is-leaving");
+    window.setTimeout(() => toast.remove(), 180);
+  }
+
+  dismiss.addEventListener("click", removeMessage, { once: true });
+  toast.append(text, dismiss, progress);
+  els.messageRegion.append(toast);
+}
+
 function setAreaZoomMode(active) {
   areaZoomInteraction.setActive(active);
   map.getViewport().classList.toggle("area-zoom-is-active", active);
@@ -526,6 +582,7 @@ async function searchParcela(event) {
   const parcelNumber = els.parcelSearchInput.value.trim();
   if (!parcelNumber) {
     updateParcelSearchStatus("Enter a parcel number to search.", "error");
+    showMessage("Enter a parcel number to search.", { type: "warning" });
     return;
   }
 
@@ -555,6 +612,7 @@ async function searchParcela(event) {
 
     if (!features.length) {
       updateParcelSearchStatus(`No parcel found with number “${parcelNumber}”.`, "error");
+      showMessage(`No parcel found with number “${parcelNumber}”.`, { type: "warning" });
       return;
     }
 
@@ -565,15 +623,16 @@ async function searchParcela(event) {
       maxZoom: features.length === 1 ? 19 : 16,
     });
 
-    updateParcelSearchStatus(
+    const searchMessage = features.length === 1
-      features.length === 1
       ? `Found parcel ${parcelNumber}.`
-        : `Found ${features.length} parcels matching ${parcelNumber}.`,
+      : `Found ${features.length} parcels matching ${parcelNumber}.`;
-      "success",
+    updateParcelSearchStatus(searchMessage, "success");
-    );
+    showMessage(searchMessage);
   } catch (error) {
     console.error(error);
-    updateParcelSearchStatus(error.message || "Unable to search for that parcel.", "error");
+    const searchMessage = error.message || "Unable to search for that parcel.";
+    updateParcelSearchStatus(searchMessage, "error");
+    showMessage(searchMessage, { type: "error" });
   }
 }
 
@@ -610,7 +669,9 @@ async function loadLayers() {
     updateStatus(`Showing ${availableLayers.length} layer(s) from GeoServer.`, "success");
   } catch (error) {
     console.error(error);
-    updateStatus(error.message || "Unable to load the WMS service.", "error");
+    const loadMessage = error.message || "Unable to load the WMS service.";
+    updateStatus(loadMessage, "error");
+    showMessage(loadMessage, { type: "error" });
     availableLayers = [];
     selectedLayers = [];
     dwellingParcelSource.clear();
@@ -1141,6 +1202,7 @@ function fitToVisibleLayers() {
 
   if (!projectedExtents.length) {
     updateStatus("Select a layer with a published extent to zoom to it.", "error");
+    showMessage("Select a layer with a published extent to zoom to it.", { type: "warning" });
     return;
   }
 

index.html

@@ -9,6 +9,14 @@
   </head>
   <body>
     <div class="app-shell">
+      <div
+        id="message-region"
+        class="message-region"
+        aria-label="Application messages"
+        aria-live="polite"
+        aria-relevant="additions"
+      ></div>
+
       <button
         id="sidebar-open"
         class="sidebar-toggle sidebar-open"

styles.css

@@ -29,6 +29,110 @@ body {
   min-height: 100vh;
 }
 
+.message-region {
+  position: fixed;
+  z-index: 30;
+  top: 24px;
+  left: 50%;
+  display: grid;
+  width: min(420px, calc(100vw - 32px));
+  gap: 10px;
+  transform: translateX(-50%);
+  pointer-events: none;
+}
+
+.message {
+  --message-background: #1f7a62;
+  --message-progress: #125441;
+  position: relative;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: start;
+  gap: 12px;
+  overflow: hidden;
+  padding: 14px 12px 16px 16px;
+  border: 1px solid rgba(255, 255, 255, 0.4);
+  border-radius: 16px;
+  background: var(--message-background);
+  color: #fff;
+  box-shadow: 0 16px 36px rgba(31, 42, 46, 0.26);
+  pointer-events: auto;
+  animation: message-enter 180ms ease-out;
+}
+
+.message--warning {
+  --message-background: #c76a13;
+  --message-progress: #914605;
+}
+
+.message--error {
+  --message-background: #b9382e;
+  --message-progress: #7f201a;
+}
+
+.message.is-leaving {
+  animation: message-leave 180ms ease-in forwards;
+}
+
+.message-text {
+  margin: 0;
+  font-weight: 650;
+  line-height: 1.35;
+}
+
+.message-dismiss {
+  width: 28px;
+  height: 28px;
+  min-width: 28px;
+  padding: 0;
+  border: 1px solid rgba(255, 255, 255, 0.45);
+  border-radius: 50%;
+  background: transparent;
+  color: inherit;
+  box-shadow: none;
+  font-size: 1.35rem;
+  line-height: 1;
+}
+
+.message-dismiss:hover,
+.message-dismiss:focus-visible {
+  background: rgba(255, 255, 255, 0.18);
+  outline: 2px solid #fff;
+  outline-offset: 2px;
+}
+
+.message-progress {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  height: 4px;
+  background: var(--message-progress);
+  transform-origin: right;
+  animation: message-countdown var(--message-duration) linear forwards;
+}
+
+@keyframes message-enter {
+  from { opacity: 0; transform: translateY(-10px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes message-leave {
+  to { opacity: 0; transform: translateY(-8px); }
+}
+
+@keyframes message-countdown {
+  to { transform: scaleX(0); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .message,
+  .message.is-leaving,
+  .message-progress {
+    animation-duration: 1ms;
+  }
+}
+
 .app-shell {
   position: relative;
   min-height: 100vh;