From 976b6f153faa6fa6f17d96f8f740b8897ac5c999 Mon Sep 17 00:00:00 2001
From: Graham McIntire <graham@mcintire.me>
Date: Thu, 19 Feb 2026 16:02:08 -0600
Subject: [PATCH] Fix slideover toggle: always-light button, map resize via
 LiveView JS
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The slideover toggle button now uses a fixed light theme (white bg,
dark arrow) so it's always visible on the map regardless of OS dark
mode. Removed prefers-color-scheme overrides since the button overlays
the always-light map tiles.

Fixed map not resizing when closing the sidebar — the #aprs-map div
has phx-update="ignore" so server-rendered classes never updated.
Now uses LiveView JS commands (JS.toggle_class + JS.dispatch) to
toggle classes client-side and trigger map.invalidateSize(), replacing
the custom push_event/handleEvent JS handler.
---
 assets/js/map.ts                      |  9 +++++++
 lib/aprsme_web/live/map_live/index.ex | 35 ++++++++++++---------------
 2 files changed, 25 insertions(+), 19 deletions(-)

diff --git a/assets/js/map.ts b/assets/js/map.ts
index 9c0d640..d43fcb3 100644
--- a/assets/js/map.ts
+++ b/assets/js/map.ts
@@ -1393,6 +1393,15 @@ let MapAPRSMap = {
       self.clearRfPathLines();
     });
 
+    // Resize map when slideover toggles (class changes handled by LiveView JS commands)
+    self.el.addEventListener("phx:map-resize", () => {
+      setTimeout(() => {
+        if (self.map) {
+          self.map.invalidateSize();
+        }
+      }, 350);
+    });
+
     // Handle bounds-based marker filtering
     self.handleEvent(
       "filter_markers_by_bounds",
diff --git a/lib/aprsme_web/live/map_live/index.ex b/lib/aprsme_web/live/map_live/index.ex
index 43ab276..f70327c 100644
--- a/lib/aprsme_web/live/map_live/index.ex
+++ b/lib/aprsme_web/live/map_live/index.ex
@@ -11,7 +11,6 @@ defmodule AprsmeWeb.MapLive.Index do
   import Phoenix.LiveView,
     only: [connected?: 1, get_connect_params: 1, push_event: 3, push_patch: 2, put_flash: 3]
 
-  # Import the new components module
   alias Aprsme.Packets
   alias Aprsme.Packets.Clustering
   alias AprsmeWeb.Endpoint
@@ -30,6 +29,9 @@ defmodule AprsmeWeb.MapLive.Index do
   alias AprsmeWeb.MapLive.RfPath
   alias AprsmeWeb.MapLive.UrlParams
   alias AprsmeWeb.TimeUtils
+  alias Phoenix.LiveView.JS
+
+  # Import the new components module
   alias Phoenix.LiveView.Socket
   alias Phoenix.Socket.Broadcast
 
@@ -1087,7 +1089,7 @@ defmodule AprsmeWeb.MapLive.Index do
   defp toggle_button(assigns) do
     ~H"""
     <button
-      phx-click="toggle_slideover"
+      phx-click={toggle_slideover_js()}
       class={[
         "fixed right-4 top-4 z-40 bg-white rounded-lg shadow-lg p-3",
         "hover:bg-gray-50 transition-colors lg:hidden",
@@ -1099,6 +1101,14 @@ defmodule AprsmeWeb.MapLive.Index do
     """
   end
 
+  defp toggle_slideover_js do
+    "toggle_slideover"
+    |> JS.push()
+    |> JS.toggle_class("slideover-open", to: "#aprs-map")
+    |> JS.toggle_class("slideover-closed", to: "#aprs-map")
+    |> JS.dispatch("phx:map-resize", to: "#aprs-map")
+  end
+
   defp bottom_controls(assigns) do
     ~H"""
     <%!-- Existing bottom controls code will go here --%>
@@ -1333,6 +1343,7 @@ defmodule AprsmeWeb.MapLive.Index do
         transform: translateY(-50%);
         z-index: 999;
         background: white;
+        color: #374151;
         border: 2px solid rgba(0, 0, 0, 0.1);
         border-radius: 8px 0 0 8px;
         padding: 12px 8px;
@@ -1341,14 +1352,6 @@ defmodule AprsmeWeb.MapLive.Index do
         box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
       }
 
-      @media (prefers-color-scheme: dark) {
-        .slideover-toggle {
-          background: rgb(30 41 59); /* slate-800 */
-          border-color: rgba(255, 255, 255, 0.1);
-          box-shadow: -2px 0 8px rgba(0, 0, 0, 0.3);
-        }
-      }
-
       .slideover-toggle.slideover-open {
         right: 352px;
       }
@@ -1367,18 +1370,12 @@ defmodule AprsmeWeb.MapLive.Index do
       .slideover-toggle:hover {
         background: #f3f4f6;
       }
-
-      @media (prefers-color-scheme: dark) {
-        .slideover-toggle:hover {
-          background: rgb(51 65 85); /* slate-700 */
-        }
-      }
     </style>
 
     <!-- Slideover Toggle Button -->
     <button
       class={["slideover-toggle", if(@slideover_open, do: "slideover-open", else: "slideover-closed")]}
-      phx-click="toggle_slideover"
+      phx-click={toggle_slideover_js()}
       title={
         if @slideover_open,
           do: Gettext.gettext(AprsmeWeb.Gettext, "Hide controls"),
@@ -1432,7 +1429,7 @@ defmodule AprsmeWeb.MapLive.Index do
 
     <!-- Mobile Backdrop -->
     <%= if @slideover_open do %>
-      <div class="fixed inset-0 bg-black bg-opacity-50 z-[999] lg:hidden backdrop-blur-sm" phx-click="toggle_slideover">
+      <div class="fixed inset-0 bg-black bg-opacity-50 z-[999] lg:hidden backdrop-blur-sm" phx-click={toggle_slideover_js()}>
       </div>
     <% end %>
 
@@ -1461,7 +1458,7 @@ defmodule AprsmeWeb.MapLive.Index do
     <!-- Close button for mobile -->
         <button
           class="lg:hidden text-white hover:text-slate-200 transition-colors"
-          phx-click="toggle_slideover"
+          phx-click={toggle_slideover_js()}
           title={Gettext.gettext(AprsmeWeb.Gettext, "Close controls")}
         >
           <svg