From a5adb39770d236ca55d99c4b45c5b6c4c94c5c80 Mon Sep 17 00:00:00 2001
From: Roman Priesol <roman@priesol.net>
Date: Thu, 10 Sep 2026 22:54:18 +0200
Subject: [PATCH] Add monoline icons to the topbar coordinates/sun readout
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

WAYPOINT_ICON (coords) and PENDING_ICON (countdown) reused as-is; two new
hand-drawn SUNRISE_ICON/SUNSET_ICON since NPS's symbol set has no match —
same currentColor stroke style as the rest of icons.js, so they render
monochrome in the dark topbar rather than colored emoji.

sun.js's formatSunInfo now returns {sunrise, sunset, countdown} instead of
one joined string, so map.js can place its own icon in front of each
piece instead of the module owning any markup.
---
 public/css/style.css | 25 +++++++++++++++++++++++++
 public/js/icons.js   | 19 +++++++++++++++++++
 public/js/map.js     | 14 +++++++++++---
 public/js/sun.js     | 11 ++++++++---
 4 files changed, 63 insertions(+), 6 deletions(-)

diff --git a/public/css/style.css b/public/css/style.css
index d55b444..f769c1f 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -36,11 +36,36 @@ html, body {
 
 .topbar__coords,
 .topbar__sun {
+  display: flex;
+  align-items: center;
+  gap: 5px;
   font-size: 12px;
   font-variant-numeric: tabular-nums;
   color: #bbb;
 }
 
+.topbar__sun {
+  gap: 14px;
+}
+
+.topbar__group {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.topbar__icon {
+  display: flex;
+  width: 13px;
+  height: 13px;
+  flex-shrink: 0;
+}
+
+.topbar__icon svg {
+  width: 100%;
+  height: 100%;
+}
+
 .topbar__coords {
   cursor: pointer;
 }
diff --git a/public/js/icons.js b/public/js/icons.js
index a32bcda..5f35733 100644
--- a/public/js/icons.js
+++ b/public/js/icons.js
@@ -43,6 +43,25 @@ export const RULER_ICON = `
   <path d="M9 10l1.5 1.5M12 7l1.5 1.5M15 4l1.5 1.5M6 13l1.5 1.5"/>
 </svg>`;
 
+// Toolbar readout glyphs (public/js/sun.js's text, assembled with these by
+// map.js) — same monoline style as the sidebar icons above, no NPS source
+// for either (that set has no sunrise/sunset pictogram).
+export const SUNRISE_ICON = `
+<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M3 18h18"/>
+  <path d="M6 18a6 6 0 0 1 12 0"/>
+  <path d="M12 13V5"/>
+  <path d="M9 8l3-3 3 3"/>
+</svg>`;
+
+export const SUNSET_ICON = `
+<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M3 18h18"/>
+  <path d="M6 18a6 6 0 0 1 12 0"/>
+  <path d="M12 5v8"/>
+  <path d="M9 10l3 3 3-3"/>
+</svg>`;
+
 export const NEW_FOLDER_ICON = `
 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
   <path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7z"/>
diff --git a/public/js/map.js b/public/js/map.js
index 43cdf74..5e664bb 100644
--- a/public/js/map.js
+++ b/public/js/map.js
@@ -14,7 +14,7 @@ import { MeasureControl } from "/js/measure.js";
 import { NotesControl } from "/js/notes.js";
 import { PluginsControl } from "/js/plugins.js";
 import { LocateControl } from "/js/locate.js";
-import { LAYERS_ICON } from "/js/icons.js";
+import { LAYERS_ICON, WAYPOINT_ICON, SUNRISE_ICON, SUNSET_ICON, PENDING_ICON } from "/js/icons.js";
 import { formatCoords, formatSunInfo } from "/js/sun.js";
 import { notifySidePanelOpen, onlyOneSidePanelOpen } from "/js/panels.js";
 import { isLoggedIn } from "/js/auth.js";
@@ -448,7 +448,7 @@ map.once("style.load", () => {
 const coordsLabel = document.querySelector(".topbar__coords");
 const updateCoords = () => {
   const { lng, lat } = map.getCenter();
-  coordsLabel.textContent = formatCoords(lat, lng);
+  coordsLabel.innerHTML = `<span class="topbar__icon">${WAYPOINT_ICON}</span><span>${formatCoords(lat, lng)}</span>`;
 };
 updateCoords();
 map.on("move", updateCoords);
@@ -477,8 +477,16 @@ const sunLabel = document.querySelector(".topbar__sun");
 const updateSun = () => {
   const { lng, lat } = map.getCenter();
   const info = formatSunInfo(lat, lng);
-  sunLabel.textContent = info ?? "";
   sunLabel.hidden = info === null;
+  if (!info) return;
+
+  const countdownGroup = info.countdown
+    ? `<span class="topbar__group"><span class="topbar__icon">${PENDING_ICON}</span><span>${info.countdown}</span></span>`
+    : "";
+  sunLabel.innerHTML =
+    `<span class="topbar__group"><span class="topbar__icon">${SUNRISE_ICON}</span><span>${info.sunrise}</span></span>` +
+    `<span class="topbar__group"><span class="topbar__icon">${SUNSET_ICON}</span><span>${info.sunset}</span></span>` +
+    countdownGroup;
 };
 updateSun();
 map.on("moveend", updateSun);
diff --git a/public/js/sun.js b/public/js/sun.js
index a88e208..b9b6a8f 100644
--- a/public/js/sun.js
+++ b/public/js/sun.js
@@ -45,7 +45,9 @@ const DAY_MS = 24 * 60 * 60 * 1000;
 // null when there's no sunrise/sunset to show at all — getTimes returns
 // null (not Invalid Date) for both on a polar day/night, per its own
 // comment in suncalc.js — the caller just hides the readout in that case
-// rather than showing something misleading.
+// rather than showing something misleading. Returns the three pieces
+// separately (not one joined string) so the caller can put its own icon in
+// front of each rather than this module owning any markup.
 export function formatSunInfo(lat, lng, now = new Date()) {
   const today = getTimes(now, lat, lng);
   if (today.sunrise === null || today.sunset === null) return null;
@@ -61,6 +63,9 @@ export function formatSunInfo(lat, lng, now = new Date()) {
     next = tomorrow.sunrise === null ? null : { label: "sunrise", at: tomorrow.sunrise };
   }
 
-  const countdown = next ? ` · ${formatCountdown(next.at - now)} to ${next.label}` : "";
-  return `${formatTime(today.sunrise)}–${formatTime(today.sunset)}${countdown}`;
+  return {
+    sunrise: formatTime(today.sunrise),
+    sunset: formatTime(today.sunset),
+    countdown: next ? `${formatCountdown(next.at - now)} to ${next.label}` : null,
+  };
 }