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

templates/base.html

@@ -20,8 +20,6 @@
     <a class="brand" href="{{ url_for('home') }}">Battery Tracker</a>
     <a href="{{ url_for('battery_list') }}">Batteries</a>
     <a href="{{ url_for('device_list') }}">Devices</a>
-    <a href="{{ url_for('battery_add') }}">+ Battery</a>
-    <a href="{{ url_for('device_add') }}">+ Device</a>
   </nav>
 
   <div class="container">
@@ -34,19 +32,6 @@
     {% block content %}{% endblock %}
   </div>
 
-  <footer style="text-align:center;padding:1.25rem 1rem 1.5rem;margin-top:1rem;
-                  border-top:1px solid var(--border);font-size:0.8rem;">
-    <a href="{{ url_for('export_page') }}"
-       style="color:var(--text-muted);text-decoration:none;"
-       onmouseover="this.style.textDecoration='underline'"
-       onmouseout="this.style.textDecoration='none'">Export data</a>
-    <span style="color:var(--text-muted);margin:0 0.5rem;">·</span>
-    <a href="{{ url_for('import_page') }}"
-       style="color:var(--text-muted);text-decoration:none;"
-       onmouseover="this.style.textDecoration='underline'"
-       onmouseout="this.style.textDecoration='none'">Import data</a>
-  </footer>
-
   <div id="confirm-modal" role="dialog" aria-modal="true">
     <div id="confirm-modal-box">
       <p id="confirm-modal-msg"></p>
@@ -79,18 +64,6 @@
       </svg>
       <span>Devices</span>
     </a>
-    <a href="{{ url_for('battery_add') }}" class="bottom-nav-item{% if ep == 'battery_add' %} active{% endif %}">
-      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-        <rect x="2" y="7" width="16" height="10" rx="2"/><path d="M22 11v2"/><line x1="10" y1="11" x2="10" y2="15"/><line x1="8" y1="13" x2="12" y2="13"/>
-      </svg>
-      <span>+ Battery</span>
-    </a>
-    <a href="{{ url_for('device_add') }}" class="bottom-nav-item{% if ep == 'device_add' %} active{% endif %}">
-      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-        <circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="16"/><line x1="8" y1="12" x2="16" y2="12"/>
-      </svg>
-      <span>+ Device</span>
-    </a>
   </nav>
 </body>
 </html>

templates/battery_list.html

@@ -5,7 +5,8 @@
 <h1>Batteries</h1>
 
 <div class="card">
-  <div style="display:flex;justify-content:flex-end;margin-bottom:0.5rem;">
+  <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:0.5rem;">
+    <a class="btn btn-primary btn-sm" href="{{ url_for('battery_add') }}">+ Add Battery</a>
     <div style="position:relative;">
       <button type="button" id="col-picker-btn" class="btn btn-sm btn-secondary">Columns ▾</button>
       <div id="col-picker-panel" style="display:none;position:absolute;right:0;top:calc(100% + 4px);background:#fff;border:1px solid #d1d5db;border-radius:6px;padding:0.75rem 1rem;z-index:100;box-shadow:0 4px 8px rgba(0,0,0,0.1);min-width:180px;">

templates/device_list.html

@@ -5,6 +5,9 @@
 <h1>Devices</h1>
 
 <div class="card">
+  <div style="display:flex;justify-content:flex-start;margin-bottom:0.5rem;">
+    <a class="btn btn-primary btn-sm" href="{{ url_for('device_add') }}">+ Add Device</a>
+  </div>
   <div id="device-filter-bar" style="display:flex;gap:0.5rem;flex-wrap:wrap;align-items:center;margin-bottom:0.75rem;">
     <select id="filter-type" onchange="applyDeviceFilters()"
             style="padding:0.25rem 0.5rem;font-size:0.85rem;border:1px solid #cbd5e1;border-radius:4px;">

templates/home.html

@@ -6,22 +6,30 @@
 
 <h2 style="font-size:1rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.05em;margin:0 0 0.6rem;">Batteries</h2>
 <div style="display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:1.25rem;">
-  <div class="card" style="flex:1;min-width:120px;text-align:center;">
-    <div style="font-size:1.8rem;font-weight:700;">{{ total_batteries }}</div>
-    <div class="text-muted">Total</div>
-  </div>
-  <div class="card" style="flex:1;min-width:120px;text-align:center;">
-    <div style="font-size:1.8rem;font-weight:700;color:var(--count-available);">{{ avail_count }}</div>
-    <div class="text-muted">Available</div>
-  </div>
-  <div class="card" style="flex:1;min-width:120px;text-align:center;">
-    <div style="font-size:1.8rem;font-weight:700;color:var(--count-installed);">{{ installed_count }}</div>
-    <div class="text-muted">Installed</div>
-  </div>
-  <div class="card" style="flex:1;min-width:120px;text-align:center;">
-    <div style="font-size:1.8rem;font-weight:700;color:var(--count-retired);">{{ retired_count }}</div>
-    <div class="text-muted">Retired</div>
-  </div>
+  <a class="stat-link" href="{{ url_for('battery_list') }}?status=">
+    <div class="card" style="text-align:center;">
+      <div style="font-size:1.8rem;font-weight:700;">{{ total_batteries }}</div>
+      <div class="text-muted">Total</div>
+    </div>
+  </a>
+  <a class="stat-link" href="{{ url_for('battery_list') }}?status=available">
+    <div class="card" style="text-align:center;">
+      <div style="font-size:1.8rem;font-weight:700;color:var(--count-available);">{{ avail_count }}</div>
+      <div class="text-muted">Available</div>
+    </div>
+  </a>
+  <a class="stat-link" href="{{ url_for('battery_list') }}?status=installed">
+    <div class="card" style="text-align:center;">
+      <div style="font-size:1.8rem;font-weight:700;color:var(--count-installed);">{{ installed_count }}</div>
+      <div class="text-muted">Installed</div>
+    </div>
+  </a>
+  <a class="stat-link" href="{{ url_for('battery_list') }}?status=retired">
+    <div class="card" style="text-align:center;">
+      <div style="font-size:1.8rem;font-weight:700;color:var(--count-retired);">{{ retired_count }}</div>
+      <div class="text-muted">Retired</div>
+    </div>
+  </a>
   {% if ha_enabled and needs_attention.low_pct %}
   <a href="#needs-attention"
      onclick="var d=document.getElementById('needs-attention');d.open=true;"
@@ -36,22 +44,30 @@
 
 <h2 style="font-size:1rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.05em;margin:0 0 0.6rem;">Devices</h2>
 <div style="display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:1.25rem;">
-  <div class="card" style="flex:1;min-width:120px;text-align:center;">
-    <div style="font-size:1.8rem;font-weight:700;">{{ total_devices }}</div>
-    <div class="text-muted">Total</div>
-  </div>
-  <div class="card" style="flex:1;min-width:120px;text-align:center;">
-    <div style="font-size:1.8rem;font-weight:700;color:var(--count-installed);">{{ full_devices }}</div>
-    <div class="text-muted">Full</div>
-  </div>
-  <div class="card" style="flex:1;min-width:120px;text-align:center;">
-    <div style="font-size:1.8rem;font-weight:700;color:var(--count-available);">{{ partial_devices }}</div>
-    <div class="text-muted">Partial</div>
-  </div>
-  <div class="card" style="flex:1;min-width:120px;text-align:center;{% if empty_devices > 0 %}border:2px solid #f59e0b;{% endif %}">
-    <div style="font-size:1.8rem;font-weight:700;{% if empty_devices > 0 %}color:#f59e0b;{% else %}color:var(--count-retired);{% endif %}">{{ empty_devices }}</div>
-    <div class="text-muted">Empty</div>
-  </div>
+  <a class="stat-link" href="{{ url_for('device_list') }}">
+    <div class="card" style="text-align:center;">
+      <div style="font-size:1.8rem;font-weight:700;">{{ total_devices }}</div>
+      <div class="text-muted">Total</div>
+    </div>
+  </a>
+  <a class="stat-link" href="{{ url_for('device_list') }}?fill=full">
+    <div class="card" style="text-align:center;">
+      <div style="font-size:1.8rem;font-weight:700;color:var(--count-installed);">{{ full_devices }}</div>
+      <div class="text-muted">Full</div>
+    </div>
+  </a>
+  <a class="stat-link" href="{{ url_for('device_list') }}?fill=partial">
+    <div class="card" style="text-align:center;">
+      <div style="font-size:1.8rem;font-weight:700;color:var(--count-available);">{{ partial_devices }}</div>
+      <div class="text-muted">Partial</div>
+    </div>
+  </a>
+  <a class="stat-link" href="{{ url_for('device_list') }}?fill=empty">
+    <div class="card" style="text-align:center;{% if empty_devices > 0 %}border:2px solid #f59e0b;{% endif %}">
+      <div style="font-size:1.8rem;font-weight:700;{% if empty_devices > 0 %}color:#f59e0b;{% else %}color:var(--count-retired);{% endif %}">{{ empty_devices }}</div>
+      <div class="text-muted">Empty</div>
+    </div>
+  </a>
 </div>
 
 {% if total_charges %}
@@ -96,11 +112,13 @@
 </details>
 {% endif %}
 
-<div style="display:flex;gap:0.75rem;flex-wrap:wrap;margin-top:0.5rem;">
-  <a class="btn btn-primary" href="{{ url_for('battery_add') }}">+ Add Battery</a>
-  <a class="btn btn-secondary" href="{{ url_for('battery_list') }}">View All Batteries</a>
-  <a class="btn btn-secondary" href="{{ url_for('device_list') }}">View All Devices</a>
-  <a class="btn btn-secondary" href="{{ url_for('device_add') }}">+ Add Device</a>
+<div style="display:grid;grid-template-columns:1fr 1fr;gap:0.75rem;margin-top:0.5rem;max-width:480px;">
+  <a class="btn btn-primary" style="text-align:center;" href="{{ url_for('battery_add') }}">+ Add Battery</a>
+  <a class="btn btn-secondary" style="text-align:center;" href="{{ url_for('battery_list') }}">View All Batteries</a>
+  <a class="btn btn-primary" style="text-align:center;" href="{{ url_for('device_add') }}">+ Add Device</a>
+  <a class="btn btn-secondary" style="text-align:center;" href="{{ url_for('device_list') }}">View All Devices</a>
+  <a class="btn btn-secondary" style="text-align:center;" href="{{ url_for('export_page') }}">Export Data</a>
+  <a class="btn btn-secondary" style="text-align:center;" href="{{ url_for('import_page') }}">Import Data</a>
 </div>
 
 {% endblock %}