Add version footer and disable map scroll wheel zoom

- Add build-time version generation script that captures git commit info
- Create /api/version endpoint to serve version data
- Add version footer component showing commit SHA, date, and branch
- Link version SHA to commit on git.deco.sh for easy navigation
- Fix footer text duplication issue with i18n translations
- Disable mouse wheel zoom on map, require +/- buttons for better UX
- Update service worker cache to v4 with new version-footer.js

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

public/admin.html

@@ -190,5 +190,6 @@
     <!-- Load shared theme utility -->
     <script src="utils.js"></script>
     <script src="admin.js"></script>
+    <script src="version-footer.js"></script>
 </body>
 </html>

public/app-mapbox.js

@@ -1,5 +1,7 @@
 document.addEventListener('DOMContentLoaded', async () => {
-    const map = L.map('map').setView([42.9634, -85.6681], 10);
+    const map = L.map('map', {
+        scrollWheelZoom: false
+    }).setView([42.9634, -85.6681], 10);
 
     L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
         maxZoom: 18,

public/index.html

@@ -165,9 +165,9 @@ placeholder="Enter address, intersection (e.g., Main St & Second St, City), or l
         </div>
 
         <footer>
-            <p><strong data-i18n="footer.safetyNotice">Safety Notice:</strong> This is a community tool for awareness. Stay safe and <a href="https://www.aclu.org/know-your-rights/immigrants-rights" target="_blank" rel="noopener noreferrer" style="color: #007bff; text-decoration: underline;" data-i18n="footer.knowRights">know your rights</a>.</p>
+            <p><span data-i18n="footer.safetyNotice">Safety Notice: This is a community tool for awareness. Stay safe and</span> <a href="https://www.aclu.org/know-your-rights/immigrants-rights" target="_blank" rel="noopener noreferrer" style="color: #007bff; text-decoration: underline;" data-i18n="footer.knowRights">know your rights</a>.</p>
             <div class="disclaimer">
-                <small><span data-i18n="footer.disclaimer">This website is for informational purposes only. Verify information independently. Reports are automatically deleted after 48 hours. •</span> <a href="/privacy" style="color: #007bff; text-decoration: underline;" data-i18n="common.privacyPolicy">Privacy Policy</a></small>
+                <small><span data-i18n="footer.disclaimer">This website is for informational purposes only. Verify information independently. Reports are automatically deleted after 48 hours.</span> • <a href="/privacy" style="color: #007bff; text-decoration: underline;" data-i18n="common.privacyPolicy">Privacy Policy</a></small>
             </div>
         </footer>
     </div>
@@ -175,6 +175,7 @@ placeholder="Enter address, intersection (e.g., Main St & Second St, City), or l
     <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
     <script src="utils.js"></script>
     <script src="app-mapbox.js"></script>
+    <script src="version-footer.js"></script>
     
     <!-- PWA Service Worker Registration -->
     <script>

public/privacy.html

@@ -139,6 +139,7 @@
     </footer>
     
     <!-- Load shared theme utility -->
+    <script src="version-footer.js"></script>
     <script>
         // Initialize theme when page loads
         document.addEventListener('DOMContentLoaded', initializeTheme);

public/sw.js

@@ -1,5 +1,5 @@
 // Service Worker for Great Lakes Ice Report PWA
-const CACHE_NAME = 'ice-report-v2';
+const CACHE_NAME = 'ice-report-v4';
 const OFFLINE_URL = '/offline.html';
 
 // Files to cache for offline functionality
@@ -12,6 +12,7 @@ const CACHE_FILES = [
   '/app.js',
   '/admin.js',
   '/utils.js',
+  '/version-footer.js',
   '/manifest.json',
   OFFLINE_URL
 ];

public/version-footer.js

@@ -0,0 +1,101 @@
+/**
+ * Version Footer Utility
+ * Fetches version information and adds it to page footers
+ */
+
+class VersionFooter {
+  constructor() {
+    this.versionData = null;
+    this.init();
+  }
+
+  async init() {
+    try {
+      await this.fetchVersionData();
+      this.addVersionToFooter();
+    } catch (error) {
+      console.warn('Could not load version information:', error);
+      this.addFallbackVersion();
+    }
+  }
+
+  async fetchVersionData() {
+    const response = await fetch('/api/version');
+    if (!response.ok) {
+      throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+    }
+    this.versionData = await response.json();
+  }
+
+  addVersionToFooter() {
+    const footers = document.querySelectorAll('footer');
+    
+    footers.forEach(footer => {
+      // Check if version info already exists
+      if (footer.querySelector('.version-info')) {
+        return;
+      }
+
+      const versionDiv = document.createElement('div');
+      versionDiv.className = 'version-info';
+      versionDiv.style.cssText = `
+        margin-top: 12px;
+        padding-top: 8px;
+        border-top: 1px solid #e0e0e0;
+        font-size: 11px;
+        color: #666;
+        text-align: center;
+      `;
+
+      if (this.versionData) {
+        const commitUrl = `${this.versionData.gitUrl}/commit/${this.versionData.sha}`;
+        const commitDate = new Date(this.versionData.commitDate).toLocaleDateString();
+        
+        versionDiv.innerHTML = `
+          <span>Version: <a href="${commitUrl}" target="_blank" rel="noopener noreferrer" 
+                style="color: #666; text-decoration: none; font-family: monospace;"
+                title="View commit: ${this.versionData.commitMessage}">${this.versionData.shortSha}</a></span>
+          <span style="margin-left: 8px;">• ${commitDate}</span>
+          <span style="margin-left: 8px;">• Branch: ${this.versionData.branch}</span>
+        `;
+      } else {
+        versionDiv.innerHTML = '<span>Version information unavailable</span>';
+      }
+
+      footer.appendChild(versionDiv);
+    });
+  }
+
+  addFallbackVersion() {
+    const footers = document.querySelectorAll('footer');
+    
+    footers.forEach(footer => {
+      if (footer.querySelector('.version-info')) {
+        return;
+      }
+
+      const versionDiv = document.createElement('div');
+      versionDiv.className = 'version-info';
+      versionDiv.style.cssText = `
+        margin-top: 12px;
+        padding-top: 8px;
+        border-top: 1px solid #e0e0e0;
+        font-size: 11px;
+        color: #666;
+        text-align: center;
+      `;
+      versionDiv.innerHTML = '<span>Version information unavailable</span>';
+      
+      footer.appendChild(versionDiv);
+    });
+  }
+}
+
+// Auto-initialize when DOM is ready
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', () => {
+    new VersionFooter();
+  });
+} else {
+  new VersionFooter();
+}