From ecc69b4e96009b15e3b498b46b11a999ae5761b9 Mon Sep 17 00:00:00 2001
From: Graham McIntire <graham@mcintire.me>
Date: Thu, 12 Mar 2026 13:40:10 -0500
Subject: [PATCH] ux: improve navigation, tooltips, and discoverability across
 pages

- Replace "Back to X" links with proper breadcrumb trails on settings,
  integrations, Gaiia, and Preseem pages
- Fix active_page on config-timeline routes so Devices nav highlights
- Add title tooltip to truncated alert messages (hover to see full text)
- Add tooltips to QoE column header explaining the metric
- Add tooltips to Subs/MRR labels on dashboard status bar
---
 lib/towerops_web/live/alert_live/index.html.heex   |  5 ++++-
 lib/towerops_web/live/config_timeline_live.ex      |  2 +-
 lib/towerops_web/live/dashboard_live.html.heex     | 10 ++++++++--
 .../live/org/gaiia_mapping_live.html.heex          | 14 ++++++--------
 .../live/org/gaiia_reconciliation_live.html.heex   |  7 +++++++
 .../live/org/preseem_devices_live.html.heex        | 14 ++++++--------
 .../live/org/preseem_insights_live.html.heex       | 14 ++++++--------
 lib/towerops_web/live/org/settings_live.html.heex  | 12 ++++--------
 lib/towerops_web/live/site_live/index.html.heex    |  5 ++++-
 9 files changed, 46 insertions(+), 37 deletions(-)

diff --git a/lib/towerops_web/live/alert_live/index.html.heex b/lib/towerops_web/live/alert_live/index.html.heex
index 88625c29..0edb603b 100644
--- a/lib/towerops_web/live/alert_live/index.html.heex
+++ b/lib/towerops_web/live/alert_live/index.html.heex
@@ -318,7 +318,10 @@
                   </td>
 
                   <%!-- Message --%>
-                  <td class="px-3 py-2 text-xs text-gray-600 dark:text-gray-400 max-w-xs truncate">
+                  <td
+                    class="px-3 py-2 text-xs text-gray-600 dark:text-gray-400 max-w-xs truncate"
+                    title={alert.message}
+                  >
                     {alert.message || "—"}
                   </td>
 
diff --git a/lib/towerops_web/live/config_timeline_live.ex b/lib/towerops_web/live/config_timeline_live.ex
index e921ba15..da89520b 100644
--- a/lib/towerops_web/live/config_timeline_live.ex
+++ b/lib/towerops_web/live/config_timeline_live.ex
@@ -27,7 +27,7 @@ defmodule ToweropsWeb.ConfigTimelineLive do
     case AccessControl.verify_device_access(device_id, organization.id) do
       {:ok, _} ->
         device = Devices.get_device!(device_id)
-        {:ok, assign(socket, device: device, page_title: "Config Timeline — #{device.name}")}
+        {:ok, assign(socket, device: device, page_title: "Config Timeline — #{device.name}", active_page: "devices")}
 
       {:error, _} ->
         {:ok,
diff --git a/lib/towerops_web/live/dashboard_live.html.heex b/lib/towerops_web/live/dashboard_live.html.heex
index 5f412f52..7d5dc155 100644
--- a/lib/towerops_web/live/dashboard_live.html.heex
+++ b/lib/towerops_web/live/dashboard_live.html.heex
@@ -209,7 +209,10 @@
       <%= if @has_subscribers do %>
         <span class="hidden text-gray-300 dark:text-gray-600 sm:inline">│</span>
         <div class="flex items-center gap-1.5 px-2.5 py-1.5">
-          <span class="text-gray-500 dark:text-gray-400 text-[10px] uppercase font-sans font-medium">
+          <span
+            class="text-gray-500 dark:text-gray-400 text-[10px] uppercase font-sans font-medium"
+            title="Subscribers"
+          >
             Subs
           </span>
           <span class="font-bold text-sm text-gray-900 dark:text-white">
@@ -217,7 +220,10 @@
           </span>
           <%!-- Financial data: role-gated --%>
           <%= if @can_view_financials do %>
-            <span class="text-gray-400 dark:text-gray-500 dark:text-gray-400">
+            <span
+              class="text-gray-400 dark:text-gray-500 dark:text-gray-400"
+              title="Monthly Recurring Revenue"
+            >
               {format_mrr(@summary.subscribers.total_mrr)}/mo
             </span>
           <% end %>
diff --git a/lib/towerops_web/live/org/gaiia_mapping_live.html.heex b/lib/towerops_web/live/org/gaiia_mapping_live.html.heex
index 9f0b26df..baf73d6f 100644
--- a/lib/towerops_web/live/org/gaiia_mapping_live.html.heex
+++ b/lib/towerops_web/live/org/gaiia_mapping_live.html.heex
@@ -3,14 +3,12 @@
   current_scope={@current_scope}
 >
   <div class="border-b border-gray-200 pb-5 dark:border-white/5">
-    <div class="mb-4">
-      <.link
-        navigate={~p"/orgs/#{@organization.slug}/settings/integrations"}
-        class="inline-flex items-center gap-1 text-sm text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
-      >
-        <.icon name="hero-arrow-left" class="h-4 w-4" /> Back to Integrations
-      </.link>
-    </div>
+    <.breadcrumb items={[
+      %{label: "Dashboard", navigate: ~p"/dashboard"},
+      %{label: "Settings", navigate: ~p"/orgs/#{@organization.slug}/settings"},
+      %{label: "Integrations", navigate: ~p"/orgs/#{@organization.slug}/settings/integrations"},
+      %{label: "Gaiia"}
+    ]} />
     <h1 class="text-3xl font-semibold tracking-tight text-gray-900 dark:text-white">
       {t("Link Devices & Sites to Gaiia")}
     </h1>
diff --git a/lib/towerops_web/live/org/gaiia_reconciliation_live.html.heex b/lib/towerops_web/live/org/gaiia_reconciliation_live.html.heex
index 55d73570..db0c5a46 100644
--- a/lib/towerops_web/live/org/gaiia_reconciliation_live.html.heex
+++ b/lib/towerops_web/live/org/gaiia_reconciliation_live.html.heex
@@ -3,6 +3,13 @@
   current_scope={@current_scope}
   active_page="settings"
 >
+  <.breadcrumb items={[
+    %{label: "Dashboard", navigate: ~p"/dashboard"},
+    %{label: "Settings", navigate: ~p"/orgs/#{@organization.slug}/settings"},
+    %{label: "Integrations", navigate: ~p"/orgs/#{@organization.slug}/settings/integrations"},
+    %{label: "Gaiia"}
+  ]} />
+
   <.header>
     {t("Gaiia Inventory Reconciliation")}
     <:subtitle>
diff --git a/lib/towerops_web/live/org/preseem_devices_live.html.heex b/lib/towerops_web/live/org/preseem_devices_live.html.heex
index 6cae1099..3f5938f0 100644
--- a/lib/towerops_web/live/org/preseem_devices_live.html.heex
+++ b/lib/towerops_web/live/org/preseem_devices_live.html.heex
@@ -3,14 +3,12 @@
   current_scope={@current_scope}
 >
   <div class="border-b border-gray-200 pb-5 dark:border-white/5">
-    <div class="mb-4">
-      <.link
-        navigate={~p"/orgs/#{@organization.slug}/settings/integrations"}
-        class="inline-flex items-center gap-1 text-sm text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
-      >
-        <.icon name="hero-arrow-left" class="h-4 w-4" /> Back to Integrations
-      </.link>
-    </div>
+    <.breadcrumb items={[
+      %{label: "Dashboard", navigate: ~p"/dashboard"},
+      %{label: "Settings", navigate: ~p"/orgs/#{@organization.slug}/settings"},
+      %{label: "Integrations", navigate: ~p"/orgs/#{@organization.slug}/settings/integrations"},
+      %{label: "Preseem"}
+    ]} />
     <h1 class="text-3xl font-semibold tracking-tight text-gray-900 dark:text-white">
       {t("Preseem Devices")}
     </h1>
diff --git a/lib/towerops_web/live/org/preseem_insights_live.html.heex b/lib/towerops_web/live/org/preseem_insights_live.html.heex
index 27761b0f..d15f86eb 100644
--- a/lib/towerops_web/live/org/preseem_insights_live.html.heex
+++ b/lib/towerops_web/live/org/preseem_insights_live.html.heex
@@ -3,14 +3,12 @@
   current_scope={@current_scope}
 >
   <div class="border-b border-gray-200 pb-5 dark:border-white/5">
-    <div class="mb-4">
-      <.link
-        navigate={~p"/orgs/#{@organization.slug}/settings/integrations"}
-        class="inline-flex items-center gap-1 text-sm text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
-      >
-        <.icon name="hero-arrow-left" class="h-4 w-4" /> Back to Integrations
-      </.link>
-    </div>
+    <.breadcrumb items={[
+      %{label: "Dashboard", navigate: ~p"/dashboard"},
+      %{label: "Settings", navigate: ~p"/orgs/#{@organization.slug}/settings"},
+      %{label: "Integrations", navigate: ~p"/orgs/#{@organization.slug}/settings/integrations"},
+      %{label: "Preseem"}
+    ]} />
     <div class="flex items-center justify-between">
       <div>
         <h1 class="text-3xl font-semibold tracking-tight text-gray-900 dark:text-white">
diff --git a/lib/towerops_web/live/org/settings_live.html.heex b/lib/towerops_web/live/org/settings_live.html.heex
index 74b88ad8..4daa36a0 100644
--- a/lib/towerops_web/live/org/settings_live.html.heex
+++ b/lib/towerops_web/live/org/settings_live.html.heex
@@ -3,14 +3,10 @@
   current_scope={@current_scope}
 >
   <div class="pb-5">
-    <div class="mb-4">
-      <.link
-        navigate={~p"/dashboard"}
-        class="inline-flex items-center gap-1 text-sm text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
-      >
-        <.icon name="hero-arrow-left" class="h-4 w-4" /> Back to Dashboard
-      </.link>
-    </div>
+    <.breadcrumb items={[
+      %{label: "Dashboard", navigate: ~p"/dashboard"},
+      %{label: "Settings"}
+    ]} />
     <h1 class="text-3xl font-semibold tracking-tight text-gray-900 dark:text-white">
       {t("Organization Settings")}
     </h1>
diff --git a/lib/towerops_web/live/site_live/index.html.heex b/lib/towerops_web/live/site_live/index.html.heex
index cecb7b64..b417a966 100644
--- a/lib/towerops_web/live/site_live/index.html.heex
+++ b/lib/towerops_web/live/site_live/index.html.heex
@@ -50,7 +50,10 @@
             <th class="px-4 py-2 text-right text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400">
               {t("Down")}
             </th>
-            <th class="px-4 py-2 text-right text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400">
+            <th
+              class="px-4 py-2 text-right text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400"
+              title={t("Quality of Experience — Preseem network quality score (0–100)")}
+            >
               {t("QoE")}
             </th>
             <th class="px-4 py-2 text-right text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400">