From ec1ea5cbbae7bfbf95fcde1a000ccbeed60cd620 Mon Sep 17 00:00:00 2001
From: l5y <220195275+l5yth@users.noreply.github.com>
Date: Sat, 27 Sep 2025 18:46:56 +0200
Subject: [PATCH] pgrade styles and fix interface issues (#190)

---
 web/app.rb             |  10 +++++
 web/public/favicon.ico | Bin 0 -> 4286 bytes
 web/views/index.erb    |  92 ++++++++++++++++++++++++-----------------
 3 files changed, 63 insertions(+), 39 deletions(-)
 create mode 100644 web/public/favicon.ico

diff --git a/web/app.rb b/web/app.rb
index 186fac4..45b28f5 100644
--- a/web/app.rb
+++ b/web/app.rb
@@ -79,6 +79,16 @@ APP_VERSION = determine_app_version
 set :public_folder, File.join(__dir__, "public")
 set :views, File.join(__dir__, "views")
 
+get "/favicon.ico" do
+  cache_control :public, max_age: WEEK_SECONDS
+  ico_path = File.join(settings.public_folder, "favicon.ico")
+  if File.file?(ico_path)
+    send_file ico_path, type: "image/x-icon"
+  else
+    send_file File.join(settings.public_folder, "potatomesh-logo.svg"), type: "image/svg+xml"
+  end
+end
+
 SITE_NAME = fetch_config_string("SITE_NAME", "Meshtastic Berlin")
 DEFAULT_CHANNEL = fetch_config_string("DEFAULT_CHANNEL", "#MediumFast")
 DEFAULT_FREQUENCY = fetch_config_string("DEFAULT_FREQUENCY", "868MHz")
diff --git a/web/public/favicon.ico b/web/public/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..8e7989f29849c07c7b4412180afae5188c5aca58
GIT binary patch
literal 4286
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

literal 0
HcmV?d00001

diff --git a/web/views/index.erb b/web/views/index.erb
index 079f1bf..cd1f187 100644
--- a/web/views/index.erb
+++ b/web/views/index.erb
@@ -74,32 +74,38 @@ var(--line); }
 var(--fg); }
 </style>
 <script>
-  (function () {
-    function getCookie(name) {
-      const m = document.cookie.match(new RegExp('(?:^|; )' +
-name.replace(/([.$?*|{}()\[\]\\/+^])/g, '\\$1') + '=([^;]*)'));
-      return m ? decodeURIComponent(m[1]) : null;
-    }
-    function setCookie(name, value, opts) {
-      opts = Object.assign({ path: '/', 'max-age': 60*60*24*365, SameSite:
-'Lax' }, opts || {});
-      let updated = encodeURIComponent(name) + '=' +
-encodeURIComponent(value);
-      for (const k in opts) {
-        updated += '; ' + k + (opts[k] === true ? '' : '=' + opts[k]);
+    (function () {
+      var THEME_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+
+      function getCookie(name) {
+        const m = document.cookie.match(new RegExp('(?:^|; )' +
+  name.replace(/([.$?*|{}()\[\]\\/+^])/g, '\\$1') + '=([^;]*)'));
+        return m ? decodeURIComponent(m[1]) : null;
+      }
+      function setCookie(name, value, opts) {
+        opts = Object.assign({ path: '/', 'max-age': THEME_COOKIE_MAX_AGE, SameSite:
+  'Lax' }, opts || {});
+        let updated = encodeURIComponent(name) + '=' +
+  encodeURIComponent(value);
+        for (const k in opts) {
+          updated += '; ' + k + (opts[k] === true ? '' : '=' + opts[k]);
+        }
+        document.cookie = updated;
       }
-      document.cookie = updated;
-    }
 
-    var theme = getCookie('theme');
-    if (theme !== 'dark' && theme !== 'light') {
-      theme = 'dark';
-      setCookie('theme', 'dark');
-    }
+      function persistTheme(value) {
+        setCookie('theme', value, { 'max-age': THEME_COOKIE_MAX_AGE });
+      }
 
-    document.addEventListener('DOMContentLoaded', function () {
-      if (theme === 'dark') {
-        document.body.classList.add('dark');
+      var theme = getCookie('theme');
+      if (theme !== 'dark' && theme !== 'light') {
+        theme = 'dark';
+      }
+      persistTheme(theme);
+
+      document.addEventListener('DOMContentLoaded', function () {
+        if (theme === 'dark') {
+          document.body.classList.add('dark');
       } else {
         document.body.classList.remove('dark');
       }
@@ -111,9 +117,9 @@ encodeURIComponent(value);
       }
     });
 
-    window.__themeCookie = { getCookie, setCookie };
-  })();
-</script>
+      window.__themeCookie = { getCookie, setCookie, persistTheme, maxAge: THEME_COOKIE_MAX_AGE };
+    })();
+  </script>
 <meta name="color-scheme" content="dark light">
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width,initial-scale=1" />
@@ -143,6 +149,7 @@ encodeURIComponent(value);
   <meta name="twitter:description" content="<%= meta_description_html %>" />
   <meta name="twitter:image" content="<%= logo_url_html %>" />
   <meta name="twitter:image:alt" content="<%= logo_alt_html %>" />
+  <link rel="icon" type="image/x-icon" href="/favicon.ico" />
   <link rel="icon" type="image/svg+xml" href="/potatomesh-logo.svg" />
   <% refresh_interval_seconds = 60 %>
   <% tile_filter_light = "grayscale(1) saturate(0) brightness(0.92) contrast(1.05)" %>
@@ -203,7 +210,7 @@ encodeURIComponent(value);
     .auto-refresh-toggle { display: inline-flex; align-items: center; gap: 6px; }
     .controls { display: flex; gap: 8px; align-items: center; }
     .controls label { display: inline-flex; align-items: center; gap: 6px; }
-    button { padding: 6px 10px; border: 1px solid #ccc; background: #fff; border-radius: 6px; cursor: pointer; }
+    button { padding: 6px 10px; border: 1px solid #ccc; background: #fff; border-radius: 6px; cursor: pointer; color: var(--fg); }
     button:hover { background: #f6f6f6; }
     .sort-button { padding: 0; border: none; background: none; color: inherit; font: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
     .sort-button:hover { background: none; }
@@ -212,7 +219,7 @@ encodeURIComponent(value);
     th[aria-sort] .sort-indicator { opacity: 1; }
     label { font-size: 14px; color: #333; }
     input[type="text"] { padding: 6px 10px; border: 1px solid #ccc; border-radius: 6px; }
-    .legend { position: relative; background: #fff; padding: 8px 10px 10px; border: 1px solid #ccc; border-radius: 8px; font-size: 12px; line-height: 18px; min-width: 160px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); }
+    .legend { position: relative; background: #fff; color: var(--fg); padding: 8px 10px 10px; border: 1px solid #ccc; border-radius: 8px; font-size: 12px; line-height: 18px; min-width: 160px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); }
     .legend-header { display: flex; align-items: center; justify-content: flex-start; gap: 4px; margin-bottom: 6px; font-weight: 600; }
     .legend-title { font-size: 13px; }
     .legend-items { display: flex; flex-direction: column; gap: 2px; }
@@ -237,7 +244,7 @@ encodeURIComponent(value);
     .legend-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 2px; }
     .legend-hidden { display: none !important; }
     .legend-toggle { margin-top: 8px; }
-    .legend-toggle-button { font-size: 12px; }
+    .legend-toggle-button { font-size: 12px; color: var(--fg); }
     #map .leaflet-tile-pane,
     #map .leaflet-layer,
     #map .leaflet-tile.map-tiles {
@@ -253,7 +260,7 @@ encodeURIComponent(value);
     }
     #nodes { font-size: 12px; }
     footer { position: fixed; bottom: 0; left: var(--pad); width: calc(100% - 2 * var(--pad)); background: #fafafa; border-top: 1px solid #ddd; text-align: center; font-size: 12px; padding: 4px 0; }
-    .info-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); display: flex; align-items: center; justify-content: center; padding: var(--pad); z-index: 1000; }
+    .info-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); display: flex; align-items: center; justify-content: center; padding: var(--pad); z-index: 4000; }
     .info-overlay[hidden] { display: none; }
     .info-dialog { background: #fff; color: #111; max-width: 420px; width: min(100%, 420px); border-radius: 12px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2); position: relative; padding: 20px 24px; outline: none; }
     .info-dialog:focus { outline: 2px solid #4a90e2; outline-offset: 4px; }
@@ -278,7 +285,7 @@ encodeURIComponent(value);
       }
     }
 
-    @media (max-width: 768px) {
+    @media (max-width: 1024px) {
       .row { flex-direction: column; align-items: stretch; gap: var(--pad); }
       .site-title img { width: 44px; height: 44px; }
       .map-row { flex-direction: column; }
@@ -1025,19 +1032,26 @@ encodeURIComponent(value);
     };
     legendToggleControl.addTo(map);
 
-    const legendMediaQuery = window.matchMedia('(max-width: 768px)');
+    const legendMediaQuery = window.matchMedia('(max-width: 1024px)');
     setLegendVisibility(!legendMediaQuery.matches);
     legendMediaQuery.addEventListener('change', event => {
       setLegendVisibility(!event.matches);
     });
 
-    themeToggle.addEventListener('click', () => {
-      const dark = document.body.classList.toggle('dark');
-      themeToggle.textContent = dark ? '☀️' : '🌙';
-      if (window.__themeCookie) window.__themeCookie.setCookie('theme', dark ? 'dark' : 'light');
-      window.dispatchEvent(new CustomEvent('themechange', { detail: { theme: dark?'dark':'light' } }));
-      if (typeof window.applyFiltersToAllTiles === 'function') window.applyFiltersToAllTiles();
-    });
+      themeToggle.addEventListener('click', () => {
+        const dark = document.body.classList.toggle('dark');
+        const themeValue = dark ? 'dark' : 'light';
+        themeToggle.textContent = dark ? '☀️' : '🌙';
+        if (window.__themeCookie) {
+          if (typeof window.__themeCookie.persistTheme === 'function') {
+            window.__themeCookie.persistTheme(themeValue);
+          } else if (typeof window.__themeCookie.setCookie === 'function') {
+            window.__themeCookie.setCookie('theme', themeValue);
+          }
+        }
+        window.dispatchEvent(new CustomEvent('themechange', { detail: { theme: themeValue } }));
+        if (typeof window.applyFiltersToAllTiles === 'function') window.applyFiltersToAllTiles();
+      });
 
     let lastFocusBeforeInfo = null;