Clickable home page stat cards; clean up nav; add buttons on list pages; move export/import to home

static/app.js

@@ -61,6 +61,27 @@ function metaSelectChanged(sel, inputId) {
     if (e.key === 'Escape' && modal.classList.contains('open')) closeModal();
   });
 
+  // Apply URL params as initial filter state on battery_list and device_list
+  document.addEventListener('DOMContentLoaded', function() {
+    var params = new URLSearchParams(window.location.search);
+    var statusParam = params.get('status');
+    if (statusParam !== null) {
+      var statusSel = document.getElementById('filter-status');
+      if (statusSel && typeof applyFilters === 'function') {
+        statusSel.value = statusParam;
+        applyFilters();
+      }
+    }
+    var fillParam = params.get('fill');
+    if (fillParam !== null) {
+      var fillSel = document.getElementById('filter-fill');
+      if (fillSel && typeof applyDeviceFilters === 'function') {
+        fillSel.value = fillParam;
+        applyDeviceFilters();
+      }
+    }
+  });
+
   // Global handler: forms with data-confirm attribute
   document.addEventListener('submit', function(e) {
     var form = e.target;

static/manifest.json

@@ -2,9 +2,10 @@
   "name": "Battery Tracker",
   "short_name": "Batteries",
   "start_url": "/",
+  "scope": "/",
   "display": "standalone",
   "background_color": "#ffffff",
-  "theme_color": "#2563eb",
+  "theme_color": "#1e40af",
   "icons": [
     { "src": "/static/icon-192.png", "sizes": "192x192", "type": "image/png" },
     { "src": "/static/icon-512.png", "sizes": "512x512", "type": "image/png" }

static/style.css

@@ -144,6 +144,11 @@
     .badge-retired   { background: var(--badge-retired-bg);   color: var(--badge-retired-text); }
     .badge-warning   { background: var(--badge-warning-bg);   color: var(--badge-warning-text); }
 
+    /* Clickable stat cards on home page */
+    .stat-link { display: block; flex: 1; min-width: 120px; text-decoration: none; }
+    .stat-link:hover { text-decoration: none; }
+    .stat-link:hover .card { box-shadow: 0 2px 8px rgba(0,0,0,.18); }
+
     /* Buttons */
     .btn { display: inline-block; padding: 0.4rem 0.9rem; border-radius: 4px; border: none; cursor: pointer; font-size: 0.875rem; font-family: inherit; text-decoration: none; }
     .btn:hover { text-decoration: none; }
@@ -300,4 +305,53 @@
       .form-actions { flex-direction: column; align-items: stretch; }
       .form-actions .btn,
       .form-actions button { width: 100%; text-align: center; }
+
+      /* ── Mobile: html bg matches nav so status bar area has no color gap ── */
+      html { background: #1e40af; }
+
+      /* ── Mobile: title-bar nav fills behind status bar, links hidden ── */
+      nav:not(.bottom-nav) {
+        padding-top: calc(0.4rem + env(safe-area-inset-top));
+        padding-bottom: 0.4rem;
+        justify-content: center;
+      }
+      nav:not(.bottom-nav) a:not(.brand) { display: none; }
+      nav:not(.bottom-nav) .brand { margin-right: 0; font-size: 0.95rem; }
+      body { padding-bottom: 4.5rem; }
+
+      .bottom-nav {
+        position: fixed;
+        bottom: 0; left: 0; right: 0;
+        display: flex;
+        background: #1e40af;
+        border-top: 1px solid #1d4ed8;
+        z-index: 100;
+        padding-bottom: env(safe-area-inset-bottom);
+      }
+      .bottom-nav-item {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        padding: 0.5rem 0.25rem 0.4rem;
+        color: #bfdbfe;
+        text-decoration: none;
+        font-size: 0.65rem;
+        gap: 0.2rem;
+        -webkit-tap-highlight-color: transparent;
+      }
+      .bottom-nav-item.active { color: #fff; }
+      .bottom-nav-item svg { display: block; }
+    }
+
+    /* ── Desktop: hide bottom nav ── */
+    @media (min-width: 641px) {
+      .bottom-nav { display: none; }
+    }
+
+    /* ── Dark mode: bottom nav + html background ── */
+    @media (prefers-color-scheme: dark) and (max-width: 640px) {
+      html { background: #0c1a3b; }
+      .bottom-nav { background: #0c1a3b; border-top-color: #1e3a8a; }
     }