UI improvements: smaller hero, stats bar, advertisements page, messages fixes

- Reduce hero section size and add stats bar with node/message counts
- Add new Advertisements page with public key filtering
- Update hero navigation buttons: Dashboard, Nodes, Advertisements, Messages
- Add Advertisements to main navigation menu
- Remove Hops column from messages list (always empty)
- Display full message text with proper multi-line wrapping

src/meshcore_hub/web/routes/__init__.py

@@ -6,6 +6,7 @@ from meshcore_hub.web.routes.home import router as home_router
 from meshcore_hub.web.routes.network import router as network_router
 from meshcore_hub.web.routes.nodes import router as nodes_router
 from meshcore_hub.web.routes.messages import router as messages_router
+from meshcore_hub.web.routes.advertisements import router as advertisements_router
 from meshcore_hub.web.routes.map import router as map_router
 from meshcore_hub.web.routes.members import router as members_router
 
@@ -17,6 +18,7 @@ web_router.include_router(home_router)
 web_router.include_router(network_router)
 web_router.include_router(nodes_router)
 web_router.include_router(messages_router)
+web_router.include_router(advertisements_router)
 web_router.include_router(map_router)
 web_router.include_router(members_router)
 

src/meshcore_hub/web/routes/advertisements.py

@@ -0,0 +1,64 @@
+"""Advertisements page route."""
+
+import logging
+
+from fastapi import APIRouter, Query, Request
+from fastapi.responses import HTMLResponse
+
+from meshcore_hub.web.app import get_network_context, get_templates
+
+logger = logging.getLogger(__name__)
+router = APIRouter()
+
+
+@router.get("/advertisements", response_class=HTMLResponse)
+async def advertisements_list(
+    request: Request,
+    public_key: str | None = Query(None, description="Filter by public key"),
+    page: int = Query(1, ge=1, description="Page number"),
+    limit: int = Query(50, ge=1, le=100, description="Items per page"),
+) -> HTMLResponse:
+    """Render the advertisements list page."""
+    templates = get_templates(request)
+    context = get_network_context(request)
+    context["request"] = request
+
+    # Calculate offset
+    offset = (page - 1) * limit
+
+    # Build query params
+    params: dict[str, int | str] = {"limit": limit, "offset": offset}
+    if public_key:
+        params["public_key"] = public_key
+
+    # Fetch advertisements from API
+    advertisements = []
+    total = 0
+
+    try:
+        response = await request.app.state.http_client.get(
+            "/api/v1/advertisements", params=params
+        )
+        if response.status_code == 200:
+            data = response.json()
+            advertisements = data.get("items", [])
+            total = data.get("total", 0)
+    except Exception as e:
+        logger.warning(f"Failed to fetch advertisements from API: {e}")
+        context["api_error"] = str(e)
+
+    # Calculate pagination
+    total_pages = (total + limit - 1) // limit if total > 0 else 1
+
+    context.update(
+        {
+            "advertisements": advertisements,
+            "total": total,
+            "page": page,
+            "limit": limit,
+            "total_pages": total_pages,
+            "public_key": public_key or "",
+        }
+    )
+
+    return templates.TemplateResponse("advertisements.html", context)

src/meshcore_hub/web/routes/home.py

@@ -1,10 +1,13 @@
 """Home page route."""
 
+import logging
+
 from fastapi import APIRouter, Request
 from fastapi.responses import HTMLResponse
 
 from meshcore_hub.web.app import get_network_context, get_templates
 
+logger = logging.getLogger(__name__)
 router = APIRouter()
 
 
@@ -15,4 +18,24 @@ async def home(request: Request) -> HTMLResponse:
     context = get_network_context(request)
     context["request"] = request
 
+    # Fetch stats from API
+    stats = {
+        "total_nodes": 0,
+        "active_nodes": 0,
+        "total_messages": 0,
+        "messages_today": 0,
+        "total_advertisements": 0,
+        "advertisements_24h": 0,
+    }
+
+    try:
+        response = await request.app.state.http_client.get("/api/v1/dashboard/stats")
+        if response.status_code == 200:
+            stats = response.json()
+    except Exception as e:
+        logger.warning(f"Failed to fetch stats from API: {e}")
+        context["api_error"] = str(e)
+
+    context["stats"] = stats
+
     return templates.TemplateResponse("home.html", context)

src/meshcore_hub/web/templates/advertisements.html

@@ -0,0 +1,122 @@
+{% extends "base.html" %}
+
+{% block title %}{{ network_name }} - Advertisements{% endblock %}
+
+{% block content %}
+<div class="flex items-center justify-between mb-6">
+    <h1 class="text-3xl font-bold">Advertisements</h1>
+    <span class="badge badge-lg">{{ total }} total</span>
+</div>
+
+{% if api_error %}
+<div class="alert alert-warning mb-6">
+    <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+    </svg>
+    <span>Could not fetch data from API: {{ api_error }}</span>
+</div>
+{% endif %}
+
+<!-- Filters -->
+<div class="card bg-base-100 shadow mb-6">
+    <div class="card-body py-4">
+        <form method="GET" action="/advertisements" class="flex gap-4 flex-wrap items-end">
+            <div class="form-control">
+                <label class="label py-1">
+                    <span class="label-text">Public Key</span>
+                </label>
+                <input type="text" name="public_key" value="{{ public_key }}" placeholder="Filter by public key..." class="input input-bordered input-sm w-80" />
+            </div>
+            <button type="submit" class="btn btn-primary btn-sm">Filter</button>
+            <a href="/advertisements" class="btn btn-ghost btn-sm">Clear</a>
+        </form>
+    </div>
+</div>
+
+<!-- Advertisements Table -->
+<div class="overflow-x-auto bg-base-100 rounded-box shadow">
+    <table class="table table-zebra">
+        <thead>
+            <tr>
+                <th>Time</th>
+                <th>Name</th>
+                <th>Type</th>
+                <th>Public Key</th>
+                <th>Receiver</th>
+            </tr>
+        </thead>
+        <tbody>
+            {% for ad in advertisements %}
+            <tr class="hover">
+                <td class="text-xs whitespace-nowrap">
+                    {{ ad.received_at[:19].replace('T', ' ') if ad.received_at else '-' }}
+                </td>
+                <td class="font-medium">
+                    <a href="/nodes/{{ ad.public_key }}" class="link link-hover">
+                        {{ ad.name or '-' }}
+                    </a>
+                </td>
+                <td>
+                    {% if ad.adv_type and ad.adv_type|lower == 'chat' %}
+                    <span title="Chat">💬</span>
+                    {% elif ad.adv_type and ad.adv_type|lower == 'repeater' %}
+                    <span title="Repeater">📡</span>
+                    {% elif ad.adv_type and ad.adv_type|lower == 'room' %}
+                    <span title="Room">🪧</span>
+                    {% elif ad.adv_type %}
+                    <span title="{{ ad.adv_type }}">📍</span>
+                    {% else %}
+                    <span class="opacity-50">-</span>
+                    {% endif %}
+                </td>
+                <td class="font-mono text-xs">
+                    <a href="/advertisements?public_key={{ ad.public_key }}" class="link link-hover" title="{{ ad.public_key }}">
+                        {{ ad.public_key[:16] }}...
+                    </a>
+                </td>
+                <td class="text-xs">
+                    {% if ad.received_by %}
+                    <span class="font-mono" title="{{ ad.received_by }}">{{ ad.received_by[:8] }}...</span>
+                    {% else %}
+                    <span class="opacity-50">-</span>
+                    {% endif %}
+                </td>
+            </tr>
+            {% else %}
+            <tr>
+                <td colspan="5" class="text-center py-8 opacity-70">No advertisements found.</td>
+            </tr>
+            {% endfor %}
+        </tbody>
+    </table>
+</div>
+
+<!-- Pagination -->
+{% if total_pages > 1 %}
+<div class="flex justify-center mt-6">
+    <div class="join">
+        {% if page > 1 %}
+        <a href="?page={{ page - 1 }}&public_key={{ public_key }}&limit={{ limit }}" class="join-item btn btn-sm">Previous</a>
+        {% else %}
+        <button class="join-item btn btn-sm btn-disabled">Previous</button>
+        {% endif %}
+
+        {% for p in range(1, total_pages + 1) %}
+            {% if p == page %}
+            <button class="join-item btn btn-sm btn-active">{{ p }}</button>
+            {% elif p == 1 or p == total_pages or (p >= page - 2 and p <= page + 2) %}
+            <a href="?page={{ p }}&public_key={{ public_key }}&limit={{ limit }}" class="join-item btn btn-sm">{{ p }}</a>
+            {% elif p == 2 or p == total_pages - 1 %}
+            <button class="join-item btn btn-sm btn-disabled">...</button>
+            {% endif %}
+        {% endfor %}
+
+        {% if page < total_pages %}
+        <a href="?page={{ page + 1 }}&public_key={{ public_key }}&limit={{ limit }}" class="join-item btn btn-sm">Next</a>
+        {% else %}
+        <button class="join-item btn btn-sm btn-disabled">Next</button>
+        {% endif %}
+    </div>
+</div>
+{% endif %}
+{% endblock %}

src/meshcore_hub/web/templates/base.html

@@ -58,6 +58,7 @@
                     <li><a href="/" class="{% if request.url.path == '/' %}active{% endif %}">Home</a></li>
                     <li><a href="/network" class="{% if request.url.path == '/network' %}active{% endif %}">Network</a></li>
                     <li><a href="/nodes" class="{% if '/nodes' in request.url.path %}active{% endif %}">Nodes</a></li>
+                    <li><a href="/advertisements" class="{% if request.url.path == '/advertisements' %}active{% endif %}">Advertisements</a></li>
                     <li><a href="/messages" class="{% if request.url.path == '/messages' %}active{% endif %}">Messages</a></li>
                     <li><a href="/map" class="{% if request.url.path == '/map' %}active{% endif %}">Map</a></li>
                     <li><a href="/members" class="{% if request.url.path == '/members' %}active{% endif %}">Members</a></li>
@@ -75,6 +76,7 @@
                 <li><a href="/" class="{% if request.url.path == '/' %}active{% endif %}">Home</a></li>
                 <li><a href="/network" class="{% if request.url.path == '/network' %}active{% endif %}">Network</a></li>
                 <li><a href="/nodes" class="{% if '/nodes' in request.url.path %}active{% endif %}">Nodes</a></li>
+                <li><a href="/advertisements" class="{% if request.url.path == '/advertisements' %}active{% endif %}">Advertisements</a></li>
                 <li><a href="/messages" class="{% if request.url.path == '/messages' %}active{% endif %}">Messages</a></li>
                 <li><a href="/map" class="{% if request.url.path == '/map' %}active{% endif %}">Map</a></li>
                 <li><a href="/members" class="{% if request.url.path == '/members' %}active{% endif %}">Members</a></li>

src/meshcore_hub/web/templates/home.html

@@ -3,17 +3,17 @@
 {% block title %}{{ network_name }} - Home{% endblock %}
 
 {% block content %}
-<div class="hero min-h-[50vh] bg-base-100 rounded-box">
+<div class="hero py-8 bg-base-100 rounded-box">
     <div class="hero-content text-center">
         <div class="max-w-2xl">
-            <h1 class="text-5xl font-bold">{{ network_name }}</h1>
+            <h1 class="text-4xl font-bold">{{ network_name }}</h1>
             {% if network_city and network_country %}
-            <p class="py-2 text-lg opacity-70">{{ network_city }}, {{ network_country }}</p>
+            <p class="py-1 text-lg opacity-70">{{ network_city }}, {{ network_country }}</p>
             {% endif %}
             {% if network_welcome_text %}
-            <p class="py-6">{{ network_welcome_text }}</p>
+            <p class="py-4">{{ network_welcome_text }}</p>
             {% else %}
-            <p class="py-6">
+            <p class="py-4">
                 Welcome to the {{ network_name }} mesh network dashboard.
                 Monitor network activity, view connected nodes, and explore message history.
             </p>
@@ -23,26 +23,83 @@
                     <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
                     </svg>
-                    View Network Stats
+                    Dashboard
                 </a>
                 <a href="/nodes" class="btn btn-secondary">
                     <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
                     </svg>
-                    Browse Nodes
+                    Nodes
                 </a>
-                <a href="/map" class="btn btn-accent">
+                <a href="/advertisements" class="btn btn-accent">
                     <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7" />
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z" />
                     </svg>
-                    View Map
+                    Advertisements
+                </a>
+                <a href="/messages" class="btn btn-info">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
+                    </svg>
+                    Messages
                 </a>
             </div>
         </div>
     </div>
 </div>
 
-<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-8">
+<!-- Stats Cards -->
+<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mt-6">
+    <!-- Total Nodes -->
+    <div class="stat bg-base-100 rounded-box shadow">
+        <div class="stat-figure text-primary">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
+            </svg>
+        </div>
+        <div class="stat-title">Total Nodes</div>
+        <div class="stat-value text-primary">{{ stats.total_nodes }}</div>
+        <div class="stat-desc">All discovered nodes</div>
+    </div>
+
+    <!-- Advertisements (24h) -->
+    <div class="stat bg-base-100 rounded-box shadow">
+        <div class="stat-figure text-secondary">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z" />
+            </svg>
+        </div>
+        <div class="stat-title">Advertisements</div>
+        <div class="stat-value text-secondary">{{ stats.advertisements_24h }}</div>
+        <div class="stat-desc">Received in last 24 hours</div>
+    </div>
+
+    <!-- Total Messages -->
+    <div class="stat bg-base-100 rounded-box shadow">
+        <div class="stat-figure text-accent">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
+            </svg>
+        </div>
+        <div class="stat-title">Total Messages</div>
+        <div class="stat-value text-accent">{{ stats.total_messages }}</div>
+        <div class="stat-desc">All time</div>
+    </div>
+
+    <!-- Messages Today -->
+    <div class="stat bg-base-100 rounded-box shadow">
+        <div class="stat-figure text-info">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+        </div>
+        <div class="stat-title">Messages Today</div>
+        <div class="stat-value text-info">{{ stats.messages_today }}</div>
+        <div class="stat-desc">Last 24 hours</div>
+    </div>
+</div>
+
+<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-6">
     <!-- Network Info Card -->
     <div class="card bg-base-100 shadow-xl">
         <div class="card-body">

src/meshcore_hub/web/templates/messages.html

@@ -59,12 +59,11 @@
                 <th>Message</th>
                 <th>Receiver</th>
                 <th>SNR</th>
-                <th>Hops</th>
             </tr>
         </thead>
         <tbody>
             {% for msg in messages %}
-            <tr class="hover">
+            <tr class="hover align-top">
                 <td class="text-xs whitespace-nowrap">
                     {{ msg.received_at[:19].replace('T', ' ') if msg.received_at else '-' }}
                 </td>
@@ -75,7 +74,7 @@
                     <span class="badge badge-success badge-sm">Direct</span>
                     {% endif %}
                 </td>
-                <td class="text-sm">
+                <td class="text-sm whitespace-nowrap">
                     {% if msg.message_type == 'channel' %}
                     <span class="font-mono">CH{{ msg.channel_idx }}</span>
                     {% else %}
@@ -86,34 +85,27 @@
                         {% endif %}
                     {% endif %}
                 </td>
-                <td class="truncate-cell" title="{{ msg.text }}">
+                <td class="whitespace-pre-wrap break-words max-w-md">
                     {{ msg.text or '-' }}
                 </td>
-                <td class="text-xs">
+                <td class="text-xs whitespace-nowrap">
                     {% if msg.received_by %}
                     <span class="font-mono" title="{{ msg.received_by }}">{{ msg.received_by[:8] }}...</span>
                     {% else %}
                     <span class="opacity-50">-</span>
                     {% endif %}
                 </td>
-                <td class="text-center">
+                <td class="text-center whitespace-nowrap">
                     {% if msg.snr is not none %}
                     <span class="badge badge-ghost badge-sm">{{ "%.1f"|format(msg.snr) }}</span>
                     {% else %}
                     -
                     {% endif %}
                 </td>
-                <td class="text-center">
-                    {% if msg.hops is not none %}
-                    <span class="badge badge-ghost badge-sm">{{ msg.hops }}</span>
-                    {% else %}
-                    -
-                    {% endif %}
-                </td>
             </tr>
             {% else %}
             <tr>
-                <td colspan="7" class="text-center py-8 opacity-70">No messages found.</td>
+                <td colspan="6" class="text-center py-8 opacity-70">No messages found.</td>
             </tr>
             {% endfor %}
         </tbody>