feat: Add shared components and styling for icewatch application

- Created example-shared-components.html to demonstrate TypeScript-based shared header and footer components.
- Added original-style.css for theming with CSS variables and dark mode support.
- Introduced style-backup.css for legacy styles.
- Developed test-refactored.html for testing map components with Leaflet integration.
- Updated deployment documentation to reflect changes in log file paths and service names.
- Renamed project from "great-lakes-ice-report" to "icewatch" in package.json and package-lock.json.
- Updated Caddyfile for new log file path.
- Added S3 bucket policy for public read access to greatlakes-conditions.
- Removed old service file and created new systemd service for icewatch.

archive/app-mapbox.js

@@ -0,0 +1,643 @@
+document.addEventListener('DOMContentLoaded', async () => {
+    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,
+    }).addTo(map);
+
+    // Get API configuration
+    let config = { hasMapbox: false, mapboxAccessToken: null };
+    try {
+        const configResponse = await fetch('/api/config');
+        config = await configResponse.json();
+        console.log('🔧 API Configuration:', config.hasMapbox ? 'MapBox enabled' : 'Using Nominatim fallback');
+    } catch (error) {
+        console.warn('Failed to load API configuration, using fallback');
+    }
+
+    const locationForm = document.getElementById('location-form');
+    const messageDiv = document.getElementById('message');
+    const submitBtn = document.getElementById('submit-btn');
+    const submitText = document.getElementById('submit-text');
+    const submitLoading = document.getElementById('submit-loading');
+    const addressInput = document.getElementById('address');
+    const autocompleteList = document.getElementById('autocomplete-list');
+    
+    // View toggle elements
+    const mapViewBtn = document.getElementById('map-view-btn');
+    const tableViewBtn = document.getElementById('table-view-btn');
+    const mapView = document.getElementById('map-view');
+    const tableView = document.getElementById('table-view');
+    const reportsTableBody = document.getElementById('reports-tbody');
+    const tableLocationCount = document.getElementById('table-location-count');
+    
+    let autocompleteTimeout;
+    let selectedIndex = -1;
+    let autocompleteResults = [];
+    let currentMarkers = [];
+    let updateInterval;
+    let currentLocations = [];
+    let currentView = 'map'; // 'map' or 'table'
+
+    const clearMarkers = () => {
+        currentMarkers.forEach(marker => {
+            map.removeLayer(marker);
+        });
+        currentMarkers = [];
+    };
+
+    // Create custom icons for different report types
+    const createCustomIcon = (isPersistent = false) => {
+        const iconColor = isPersistent ? '#28a745' : '#dc3545'; // Green for persistent, red for temporary
+        const iconSymbol = isPersistent ? '🔒' : '⚠️'; // Lock for persistent, warning for temporary
+        
+        return L.divIcon({
+            className: 'custom-marker',
+            html: `
+                <div style="
+                    background-color: ${iconColor};
+                    width: 30px;
+                    height: 30px;
+                    border-radius: 50%;
+                    border: 3px solid white;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    font-size: 14px;
+                    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
+                    cursor: pointer;
+                ">${iconSymbol}</div>
+            `,
+            iconSize: [30, 30],
+            iconAnchor: [15, 15],
+            popupAnchor: [0, -15]
+        });
+    };
+
+    const showMarkers = locations => {
+        clearMarkers();
+        
+        locations.forEach(({ latitude, longitude, address, description, created_at, persistent }) => {
+            if (latitude && longitude) {
+                const timeAgo = getTimeAgo(created_at);
+                const isPersistent = !!persistent;
+                const persistentText = isPersistent ? '<br><small><strong>📌 Persistent Report</strong></small>' : '';
+                
+                const marker = L.marker([latitude, longitude], {
+                    icon: createCustomIcon(isPersistent)
+                })
+                    .addTo(map)
+                    .bindPopup(`<strong>${address}</strong><br>${description || 'No additional details'}<br><small>Reported ${timeAgo}</small>${persistentText}`);
+                currentMarkers.push(marker);
+            }
+        });
+    };
+    
+    // getTimeAgo function is now available from utils.js
+
+    // Toggle between map and table view
+    const switchView = (viewType) => {
+        currentView = viewType;
+        
+        if (viewType === 'map') {
+            mapView.style.display = 'block';
+            tableView.style.display = 'none';
+            mapViewBtn.classList.add('active');
+            tableViewBtn.classList.remove('active');
+            
+            // Invalidate map size after showing
+            setTimeout(() => map.invalidateSize(), 100);
+        } else {
+            mapView.style.display = 'none';
+            tableView.style.display = 'block';
+            mapViewBtn.classList.remove('active');
+            tableViewBtn.classList.add('active');
+            
+            // Render table with current data
+            renderTable(currentLocations);
+        }
+    };
+    
+    // Render table view
+    const renderTable = (locations) => {
+        if (!locations || locations.length === 0) {
+            reportsTableBody.innerHTML = '<tr><td colspan="4" class="loading">No active reports</td></tr>';
+            tableLocationCount.textContent = '0 active reports';
+            return;
+        }
+        
+        // Sort by most recent first
+        const sortedLocations = [...locations].sort((a, b) => 
+            new Date(b.created_at) - new Date(a.created_at)
+        );
+        
+        const tableHTML = sortedLocations.map(location => {
+            const timeAgo = getTimeAgo(location.created_at);
+            const timeRemaining = getTimeRemaining(location.created_at, location.persistent);
+            const remainingClass = getRemainingClass(location.created_at, location.persistent);
+            const reportedTime = new Date(location.created_at).toLocaleString();
+            
+            return `
+                <tr>
+                    <td class="location-cell" title="${location.address}">${location.address}</td>
+                    <td class="details-cell" title="${location.description || 'No additional details'}">
+                        ${location.description || '<em>No additional details</em>'}
+                    </td>
+                    <td class="time-cell" title="${reportedTime}">${timeAgo}</td>
+                    <td class="remaining-cell ${remainingClass}">${timeRemaining}</td>
+                </tr>
+            `;
+        }).join('');
+        
+        reportsTableBody.innerHTML = tableHTML;
+        tableLocationCount.textContent = `${locations.length} active report${locations.length !== 1 ? 's' : ''}`;
+    };
+    
+    // getTimeRemaining and getRemainingClass functions are now available from utils.js
+    
+    const refreshLocations = () => {
+        fetch('/api/locations')
+            .then(res => res.json())
+            .then(locations => {
+                currentLocations = locations;
+                
+                // Update map view
+                showMarkers(locations);
+                const countElement = document.getElementById('location-count');
+                countElement.textContent = `${locations.length} active report${locations.length !== 1 ? 's' : ''}`;
+                
+                // Update table view if it's currently visible
+                if (currentView === 'table') {
+                    renderTable(locations);
+                }
+                
+                const now = new Date();
+                const timeStr = now.toLocaleTimeString('en-US', { 
+                    hour12: false, 
+                    hour: '2-digit', 
+                    minute: '2-digit',
+                    second: '2-digit'
+                });
+                countElement.title = `Last updated: ${timeStr}`;
+            })
+            .catch(err => {
+                console.error('Error fetching locations:', err);
+                document.getElementById('location-count').textContent = 'Error loading locations';
+                if (currentView === 'table') {
+                    reportsTableBody.innerHTML = '<tr><td colspan="4" class="loading">Error loading reports</td></tr>';
+                }
+            });
+    };
+    
+    refreshLocations();
+    updateInterval = setInterval(refreshLocations, 30000);
+
+    // MapBox Geocoding (Fast and Accurate!)
+    const mapboxGeocode = async (address) => {
+        const startTime = performance.now();
+        console.log(`🚀 MapBox Geocoding: "${address}"`);
+
+        try {
+            const encodedAddress = encodeURIComponent(address);
+            const response = await fetch(
+                `https://api.mapbox.com/geocoding/v5/mapbox.places/${encodedAddress}.json?` +
+                `access_token=${config.mapboxAccessToken}&` +
+                `country=US&` +
+                `region=MI&` +
+                `proximity=-85.6681,42.9634&` + // Grand Rapids coordinates
+                `limit=1`
+            );
+
+            if (!response.ok) {
+                throw new Error(`MapBox API error: ${response.status}`);
+            }
+
+            const data = await response.json();
+            const time = (performance.now() - startTime).toFixed(2);
+
+            if (data.features && data.features.length > 0) {
+                const result = data.features[0];
+                console.log(`✅ MapBox geocoding successful in ${time}ms`);
+                console.log(`📍 Found: ${result.place_name}`);
+                
+                return {
+                    lat: result.center[1], // MapBox returns [lng, lat]
+                    lon: result.center[0],
+                    display_name: result.place_name
+                };
+            } else {
+                console.log(`❌ MapBox geocoding: no results (${time}ms)`);
+                throw new Error('No results found');
+            }
+        } catch (error) {
+            const time = (performance.now() - startTime).toFixed(2);
+            console.warn(`🚫 MapBox geocoding failed (${time}ms):`, error);
+            throw error;
+        }
+    };
+
+    // Nominatim Fallback (Slower but free)
+    const nominatimGeocode = async (address) => {
+        const startTime = performance.now();
+        console.log(`🐌 Nominatim fallback: "${address}"`);
+
+        const searches = [
+            address,
+            `${address}, Michigan`,
+            `${address}, MI`,
+            `${address}, Grand Rapids, MI`
+        ];
+
+        for (const query of searches) {
+            try {
+                const response = await fetch(`https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(query)}&limit=1&countrycodes=us`);
+                const data = await response.json();
+                
+                if (data && data.length > 0) {
+                    const time = (performance.now() - startTime).toFixed(2);
+                    console.log(`✅ Nominatim successful in ${time}ms`);
+                    return data[0];
+                }
+            } catch (error) {
+                console.warn(`Nominatim query failed: ${query}`);
+            }
+        }
+        
+        const time = (performance.now() - startTime).toFixed(2);
+        console.error(`💥 All geocoding failed after ${time}ms`);
+        throw new Error('Address not found');
+    };
+
+    // Main geocoding function
+    const geocodeAddress = async (address) => {
+        if (config.hasMapbox) {
+            try {
+                return await mapboxGeocode(address);
+            } catch (error) {
+                console.warn('MapBox geocoding failed, trying Nominatim fallback');
+                return await nominatimGeocode(address);
+            }
+        } else {
+            return await nominatimGeocode(address);
+        }
+    };
+
+    // MapBox Autocomplete (Lightning Fast!)
+    const mapboxAutocomplete = async (query) => {
+        const startTime = performance.now();
+        console.log(`⚡ MapBox Autocomplete: "${query}"`);
+
+        try {
+            const encodedQuery = encodeURIComponent(query);
+            const response = await fetch(
+                `https://api.mapbox.com/geocoding/v5/mapbox.places/${encodedQuery}.json?` +
+                `access_token=${config.mapboxAccessToken}&` +
+                `country=US&` +
+                `region=MI&` +
+                `proximity=-85.6681,42.9634&` + // Grand Rapids coordinates
+                `types=address,poi&` +
+                `autocomplete=true&` +
+                `limit=5`
+            );
+
+            if (!response.ok) {
+                throw new Error(`MapBox API error: ${response.status}`);
+            }
+
+            const data = await response.json();
+            const time = (performance.now() - startTime).toFixed(2);
+
+            if (data.features && data.features.length > 0) {
+                // Filter for Michigan results
+                const michiganResults = data.features.filter(feature => 
+                    feature.place_name.toLowerCase().includes('michigan') ||
+                    feature.place_name.toLowerCase().includes(', mi,') ||
+                    feature.context?.some(ctx => ctx.short_code === 'us-mi')
+                );
+
+                console.log(`⚡ MapBox autocomplete: ${michiganResults.length} results in ${time}ms`);
+                
+                return michiganResults.slice(0, 5).map(feature => ({
+                    display_name: feature.place_name,
+                    mapbox_id: feature.id
+                }));
+            } else {
+                console.log(`❌ MapBox autocomplete: no results (${time}ms)`);
+                return [];
+            }
+        } catch (error) {
+            const time = (performance.now() - startTime).toFixed(2);
+            console.warn(`🚫 MapBox autocomplete failed (${time}ms):`, error);
+            return [];
+        }
+    };
+
+    // Nominatim Autocomplete Fallback
+    const nominatimAutocomplete = async (query) => {
+        console.log(`🐌 Nominatim autocomplete fallback: "${query}"`);
+        
+        try {
+            const response = await fetch(`https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(query)}&limit=5&countrycodes=us&addressdetails=1`);
+            const data = await response.json();
+            
+            return data.filter(item => 
+                item.display_name.toLowerCase().includes('michigan') || 
+                item.display_name.toLowerCase().includes(', mi,')
+            ).slice(0, 5);
+        } catch (error) {
+            console.error('Nominatim autocomplete failed:', error);
+            return [];
+        }
+    };
+
+    // Main autocomplete function
+    const fetchAddressSuggestions = async (query) => {
+        if (query.length < 3) {
+            hideAutocomplete();
+            return;
+        }
+        
+        let results = [];
+        
+        if (config.hasMapbox) {
+            try {
+                results = await mapboxAutocomplete(query);
+            } catch (error) {
+                console.warn('MapBox autocomplete failed, trying Nominatim');
+            }
+        }
+        
+        if (results.length === 0) {
+            results = await nominatimAutocomplete(query);
+        }
+        
+        autocompleteResults = results;
+        showAutocomplete(autocompleteResults);
+    };
+
+    // Form submission
+    locationForm.addEventListener('submit', e => {
+        e.preventDefault();
+
+        const address = document.getElementById('address').value;
+        const description = document.getElementById('description').value;
+
+        if (!address) return;
+
+        submitBtn.disabled = true;
+        submitText.style.display = 'none';
+        submitLoading.style.display = 'inline';
+
+        geocodeAddress(address)
+            .then(result => {
+                const { lat, lon } = result;
+
+                return fetch('/api/locations', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({
+                        address,
+                        latitude: parseFloat(lat),
+                        longitude: parseFloat(lon),
+                        description,
+                    }),
+                });
+            })
+            .then(res => {
+                if (!res.ok) {
+                    return res.json().then(errorData => {
+                        throw { status: res.status, data: errorData };
+                    });
+                }
+                return res.json();
+            })
+            .then(location => {
+                refreshLocations();
+                messageDiv.textContent = 'Location reported successfully!';
+                messageDiv.className = 'message success';
+                locationForm.reset();
+            })
+            .catch(err => {
+                console.error('Error reporting location:', err);
+                
+                // Handle specific profanity rejection
+                if (err.status === 400 && err.data && err.data.error === 'Submission rejected') {
+                    messageDiv.textContent = err.data.message;
+                    messageDiv.className = 'message error profanity-rejection';
+                    
+                    // Clear the description field to encourage rewriting
+                    document.getElementById('description').value = '';
+                    document.getElementById('description').focus();
+                } else if (err.data && err.data.error) {
+                    messageDiv.textContent = err.data.error;
+                    messageDiv.className = 'message error';
+                } else {
+                    messageDiv.textContent = 'Error reporting location. Please try again.';
+                    messageDiv.className = 'message error';
+                }
+            })
+            .finally(() => {
+                submitBtn.disabled = false;
+                submitText.style.display = 'inline';
+                submitLoading.style.display = 'none';
+                messageDiv.style.display = 'block';
+                
+                // Longer timeout for profanity rejection messages
+                const timeout = messageDiv.className.includes('profanity-rejection') ? 15000 : 3000;
+                setTimeout(() => {
+                    messageDiv.style.display = 'none';
+                }, timeout);
+            });
+    });
+
+    // Autocomplete UI functions
+    const showAutocomplete = (results) => {
+        if (results.length === 0) {
+            hideAutocomplete();
+            return;
+        }
+        
+        autocompleteList.innerHTML = '';
+        selectedIndex = -1;
+        
+        results.forEach((result, index) => {
+            const item = document.createElement('div');
+            item.className = 'autocomplete-item';
+            item.textContent = result.display_name;
+            item.addEventListener('click', () => selectAddress(result));
+            autocompleteList.appendChild(item);
+        });
+        
+        autocompleteList.style.display = 'block';
+    };
+    
+    const hideAutocomplete = () => {
+        autocompleteList.style.display = 'none';
+        selectedIndex = -1;
+    };
+    
+    const selectAddress = (result) => {
+        addressInput.value = result.display_name;
+        hideAutocomplete();
+        addressInput.focus();
+    };
+    
+    const updateSelection = (direction) => {
+        const items = autocompleteList.querySelectorAll('.autocomplete-item');
+        
+        if (items.length === 0) return;
+        
+        items[selectedIndex]?.classList.remove('selected');
+        
+        if (direction === 'down') {
+            selectedIndex = selectedIndex < items.length - 1 ? selectedIndex + 1 : 0;
+        } else {
+            selectedIndex = selectedIndex > 0 ? selectedIndex - 1 : items.length - 1;
+        }
+        
+        items[selectedIndex].classList.add('selected');
+        items[selectedIndex].scrollIntoView({ block: 'nearest' });
+    };
+    
+    // Event listeners
+    addressInput.addEventListener('input', (e) => {
+        clearTimeout(autocompleteTimeout);
+        const query = e.target.value.trim();
+        
+        if (query.length < 3) {
+            hideAutocomplete();
+            return;
+        }
+        
+        // Ultra-fast debounce with MapBox
+        autocompleteTimeout = setTimeout(() => {
+            fetchAddressSuggestions(query);
+        }, config.hasMapbox ? 150 : 300);
+    });
+    
+    addressInput.addEventListener('keydown', (e) => {
+        const isListVisible = autocompleteList.style.display === 'block';
+        
+        switch (e.key) {
+            case 'ArrowDown':
+                if (isListVisible) {
+                    e.preventDefault();
+                    updateSelection('down');
+                }
+                break;
+            case 'ArrowUp':
+                if (isListVisible) {
+                    e.preventDefault();
+                    updateSelection('up');
+                }
+                break;
+            case 'Enter':
+                if (isListVisible && selectedIndex >= 0) {
+                    e.preventDefault();
+                    selectAddress(autocompleteResults[selectedIndex]);
+                }
+                break;
+            case 'Escape':
+                hideAutocomplete();
+                break;
+        }
+    });
+    
+    document.addEventListener('click', (e) => {
+        if (!e.target.closest('.autocomplete-container')) {
+            hideAutocomplete();
+        }
+    });
+    
+    // View toggle event listeners
+    mapViewBtn.addEventListener('click', () => switchView('map'));
+    tableViewBtn.addEventListener('click', () => switchView('table'));
+    
+    window.addEventListener('beforeunload', () => {
+        if (updateInterval) {
+            clearInterval(updateInterval);
+        }
+    });
+    
+    // Initialize theme toggle
+    initializeTheme();
+});
+
+// Theme toggle functionality
+function initializeTheme() {
+    const themeToggle = document.getElementById('theme-toggle');
+    const themeIcon = document.querySelector('.theme-icon');
+    
+    if (!themeToggle || !themeIcon) {
+        console.warn('Theme toggle elements not found');
+        return;
+    }
+    
+    // Check for saved theme preference or default to auto (follows system)
+    const savedTheme = localStorage.getItem('theme') || 'auto';
+    applyTheme(savedTheme);
+    
+    // Update icon based on current theme
+    updateThemeIcon(savedTheme, themeIcon);
+    
+    // Add click listener for cycling through themes
+    themeToggle.addEventListener('click', () => {
+        const currentTheme = localStorage.getItem('theme') || 'auto';
+        let newTheme;
+        
+        // Cycle: auto → light → dark → auto
+        switch(currentTheme) {
+            case 'auto':
+                newTheme = 'light';
+                break;
+            case 'light':
+                newTheme = 'dark';
+                break;
+            case 'dark':
+                newTheme = 'auto';
+                break;
+            default:
+                newTheme = 'auto';
+        }
+        
+        localStorage.setItem('theme', newTheme);
+        applyTheme(newTheme);
+        updateThemeIcon(newTheme, themeIcon);
+        
+        console.log(`Theme switched to: ${newTheme}`);
+    });
+    
+    // Listen for system theme changes when in auto mode
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+        const currentTheme = localStorage.getItem('theme') || 'auto';
+        if (currentTheme === 'auto') {
+            applyTheme('auto');
+        }
+    });
+}
+
+function applyTheme(theme) {
+    if (theme === 'auto') {
+        // Detect system preference and apply appropriate theme
+        const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+        document.documentElement.setAttribute('data-theme', prefersDark ? 'dark' : 'light');
+    } else {
+        document.documentElement.setAttribute('data-theme', theme);
+    }
+}
+
+function updateThemeIcon(theme, iconElement) {
+    switch(theme) {
+        case 'auto':
+            iconElement.textContent = '🌍'; // Globe (auto)
+            break;
+        case 'light':
+            iconElement.textContent = '☀️'; // Sun (light)
+            break;
+        case 'dark':
+            iconElement.textContent = '🌙'; // Moon (dark)
+            break;
+    }
+}