From 97bd93ed5cd3ff6bd5c6f0eb60bcbc4086b8b0b3 Mon Sep 17 00:00:00 2001
From: Graham McIntire <graham@mcintire.me>
Date: Mon, 30 Mar 2026 17:27:21 -0500
Subject: [PATCH] Make /map full-page Leaflet with band dropdown

- Remove Layouts.app wrapper so map fills entire viewport
- Replace band buttons with daisyUI dropdown selector
- Overlay controls (home button, band picker, timestamp) on top-left
- Keep Leaflet's standard zoom controls
---
 lib/microwaveprop_web/live/map_live.ex        | 76 ++++++++++++-------
 test/microwaveprop_web/live/map_live_test.exs | 17 ++---
 2 files changed, 57 insertions(+), 36 deletions(-)

diff --git a/lib/microwaveprop_web/live/map_live.ex b/lib/microwaveprop_web/live/map_live.ex
index b637816f..6c5f7176 100644
--- a/lib/microwaveprop_web/live/map_live.ex
+++ b/lib/microwaveprop_web/live/map_live.ex
@@ -57,40 +57,62 @@ defmodule MicrowavepropWeb.MapLive do
     {:noreply, socket}
   end
 
+  defp selected_label(bands, selected_band) do
+    case Enum.find(bands, &(&1.freq_mhz == selected_band)) do
+      nil -> "Select Band"
+      band -> band.label
+    end
+  end
+
   @impl true
   def render(assigns) do
     ~H"""
-    <Layouts.app flash={@flash}>
-      <div class="flex flex-col h-[calc(100vh-4rem)]">
-        <div class="flex items-center gap-4 p-3 bg-base-200 rounded-t-lg flex-wrap">
-          <h2 class="text-lg font-bold">Propagation Map</h2>
-          <div class="flex gap-1 flex-wrap">
-            <button
-              :for={band <- @bands}
-              phx-click="select_band"
-              value={band.freq_mhz}
-              class={[
-                "btn btn-sm",
-                if(@selected_band == band.freq_mhz, do: "btn-primary", else: "btn-ghost")
-              ]}
-            >
-              {band.label}
-            </button>
-          </div>
-          <div :if={@valid_time} class="ml-auto text-sm text-base-content/60">
-            Updated: {Calendar.strftime(@valid_time, "%Y-%m-%d %H:%M UTC")}
+    <div class="relative w-screen h-screen">
+      <%!-- Full-page map --%>
+      <div
+        id="propagation-map"
+        phx-hook="PropagationMap"
+        phx-update="ignore"
+        data-scores={Jason.encode!(@scores)}
+        class="absolute inset-0 z-0"
+      >
+      </div>
+
+      <%!-- Top-left controls overlay --%>
+      <div class="absolute top-3 left-14 z-[1000] flex items-center gap-2">
+        <.link navigate="/" class="btn btn-sm bg-base-100/90 shadow border-base-300">
+          <.icon name="hero-home" class="size-4" />
+        </.link>
+
+        <div class="dropdown">
+          <div tabindex="0" role="button" class="btn btn-sm bg-base-100/90 shadow border-base-300">
+            <.icon name="hero-signal" class="size-4" />
+            {selected_label(@bands, @selected_band)}
+            <.icon name="hero-chevron-down" class="size-3" />
           </div>
+          <ul
+            tabindex="0"
+            class="dropdown-content menu bg-base-100 rounded-box shadow-lg w-44 mt-1 p-1"
+          >
+            <li :for={band <- @bands}>
+              <button
+                phx-click="select_band"
+                value={band.freq_mhz}
+                class={[if(@selected_band == band.freq_mhz, do: "active")]}
+              >
+                {band.label}
+              </button>
+            </li>
+          </ul>
         </div>
-        <div
-          id="propagation-map"
-          phx-hook="PropagationMap"
-          phx-update="ignore"
-          data-scores={Jason.encode!(@scores)}
-          class="flex-1 rounded-b-lg z-0"
-        >
+
+        <div :if={@valid_time} class="badge badge-ghost bg-base-100/90 shadow text-xs">
+          {Calendar.strftime(@valid_time, "%H:%M UTC")}
         </div>
       </div>
-    </Layouts.app>
+    </div>
+
+    <Layouts.flash_group flash={@flash} />
     """
   end
 end
diff --git a/test/microwaveprop_web/live/map_live_test.exs b/test/microwaveprop_web/live/map_live_test.exs
index b3678bd7..2e2b5316 100644
--- a/test/microwaveprop_web/live/map_live_test.exs
+++ b/test/microwaveprop_web/live/map_live_test.exs
@@ -4,30 +4,29 @@ defmodule MicrowavepropWeb.MapLiveTest do
   import Phoenix.LiveViewTest
 
   describe "mount" do
-    test "renders the propagation map page", %{conn: conn} do
+    test "renders full-page map", %{conn: conn} do
       {:ok, _lv, html} = live(conn, ~p"/map")
-      assert html =~ "Propagation Map"
-      assert html =~ "propagation-map"
+      assert html =~ ~s(id="propagation-map")
+      assert html =~ ~s(phx-hook="PropagationMap")
     end
 
-    test "renders all band selector buttons", %{conn: conn} do
+    test "renders band dropdown with all bands", %{conn: conn} do
       {:ok, _lv, html} = live(conn, ~p"/map")
       assert html =~ "10 GHz"
       assert html =~ "24 GHz"
       assert html =~ "47 GHz"
       assert html =~ "75 GHz"
+      assert html =~ "241 GHz"
     end
 
-    test "defaults to 10 GHz band selected", %{conn: conn} do
+    test "defaults to 10 GHz selected", %{conn: conn} do
       {:ok, _lv, html} = live(conn, ~p"/map")
-      assert html =~ "btn-primary"
+      assert html =~ ~s(class="active")
     end
 
-    test "includes map container with data-scores", %{conn: conn} do
+    test "includes data-scores attribute", %{conn: conn} do
       {:ok, _lv, html} = live(conn, ~p"/map")
-      assert html =~ ~s(id="propagation-map")
       assert html =~ "data-scores"
-      assert html =~ "phx-hook"
     end
   end