Add customizable titles and icons to geocaches

- Added title field for naming geocaches when created
- Added icon selection with MDI icon support
- Users can browse Material Design Icons and choose custom icons
- Updated notifications to show geocache title instead of 'undefined'
- Messages now say 'Someone left a note at [geocache title]'
- Fixed nearby cache notifications to include title

🤖 Generated with Claude Code

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

geocaches.json

@@ -13,6 +13,11 @@
         "author": "DogDaddy",
         "text": "My dogs poop here a lot.",
         "timestamp": 1767115207491
+      },
+      {
+        "author": "test",
+        "text": "test",
+        "timestamp": 1767200305966
       }
     ],
     "createdAt": 1767115055219,
@@ -57,6 +62,26 @@
         "author": "test",
         "text": "test",
         "timestamp": 1767199518737
+      },
+      {
+        "author": "ji",
+        "text": "ji",
+        "timestamp": 1767200126654
+      },
+      {
+        "author": "noice",
+        "text": "noice",
+        "timestamp": 1767200152466
+      },
+      {
+        "author": "noice 2",
+        "text": "ceecac",
+        "timestamp": 1767200173936
+      },
+      {
+        "author": "ear",
+        "text": "aer",
+        "timestamp": 1767200335702
       }
     ],
     "createdAt": 1767127362829,

index.html

@@ -965,6 +965,15 @@
                 <!-- Messages will be added dynamically -->
             </div>
             <div id="geocacheForm">
+                <div class="geocache-input-group" id="geocacheTitleGroup" style="display: none;">
+                    <label for="geocacheTitleInput">Geocache Title</label>
+                    <input type="text" id="geocacheTitleInput" placeholder="Name this geocache..." maxlength="100">
+                </div>
+                <div class="geocache-input-group" id="geocacheIconGroup" style="display: none;">
+                    <label for="geocacheIconInput">Icon (MDI name, e.g. 'treasure-chest', 'map-marker')</label>
+                    <input type="text" id="geocacheIconInput" placeholder="package-variant" value="package-variant" maxlength="50">
+                    <small style="color: #888; display: block; margin-top: 4px;">Browse icons at <a href="https://pictogrammers.com/library/mdi/" target="_blank" style="color: #FFA726;">Material Design Icons</a></small>
+                </div>
                 <div class="geocache-input-group">
                     <label for="geocacheName">Your Name</label>
                     <input type="text" id="geocacheName" placeholder="Enter your name" maxlength="50">
@@ -2193,6 +2202,8 @@
                 id: id,
                 lat: latlng.lat,
                 lng: latlng.lng,
+                title: '',  // Will be set when user submits
+                icon: 'package-variant',  // Default icon
                 messages: [],
                 createdAt: Date.now()
             };
@@ -2204,8 +2215,8 @@
 
         function createGeocacheMarker(geocache) {
             console.log(`Creating geocache marker for ${geocache.id} at ${geocache.lat}, ${geocache.lng}`);
-            // Use same icon for all geocaches
-            const iconClass = 'mdi-package-variant';
+            // Use geocache's custom icon or default
+            const iconClass = `mdi-${geocache.icon || 'package-variant'}`;
 
             const marker = L.marker([geocache.lat, geocache.lng], {
                 icon: L.divIcon({
@@ -2274,6 +2285,11 @@
             const deleteBtn = document.getElementById('geocacheDelete');
             const submitBtn = document.getElementById('geocacheSubmit');
             const form = document.getElementById('geocacheForm');
+            const titleGroup = document.getElementById('geocacheTitleGroup');
+            const iconGroup = document.getElementById('geocacheIconGroup');
+            const titleInput = document.getElementById('geocacheTitleInput');
+            const iconInput = document.getElementById('geocacheIconInput');
+            const dialogTitle = document.getElementById('geocacheTitle');
 
             // Clear previous messages
             messagesDiv.innerHTML = '';
@@ -2364,6 +2380,33 @@
 
             const nameInput = document.getElementById('geocacheName');
             const messageInput = document.getElementById('geocacheMessage');
+            const titleInput = document.getElementById('geocacheTitleInput');
+            const iconInput = document.getElementById('geocacheIconInput');
+
+            // For new geocaches without a title, set the title and icon first
+            if (!currentGeocache.title) {
+                const title = titleInput.value.trim();
+                const icon = iconInput.value.trim();
+
+                if (!title) {
+                    alert('Please enter a title for this geocache');
+                    return;
+                }
+
+                currentGeocache.title = title;
+                currentGeocache.icon = icon || 'package-variant';
+
+                // Update the marker with new icon
+                if (geocacheMarkers[currentGeocache.id]) {
+                    const marker = geocacheMarkers[currentGeocache.id];
+                    marker.setIcon(L.divIcon({
+                        className: 'geocache-marker',
+                        html: `<i class="mdi mdi-${currentGeocache.icon}" style="font-size: 28px; color: #FFA726;"></i>`,
+                        iconSize: [28, 28],
+                        iconAnchor: [14, 28]
+                    }));
+                }
+            }
 
             const name = nameInput.value.trim() || 'Anonymous';
             const text = messageInput.value.trim();
@@ -2575,7 +2618,7 @@
                                             const latestMessage = data.geocache.messages[data.geocache.messages.length - 1];
                                             sendPushNotification(
                                                 '💬 New Cache Message',
-                                                `${latestMessage.name}: ${latestMessage.text.substring(0, 50)}...`,
+                                                `Someone left a note at "${data.geocache.title || 'Untitled Geocache'}"`,
                                                 'cacheMessage'
                                             );
                                         }
@@ -2682,7 +2725,7 @@
                         // Send notification
                         sendPushNotification(
                             '📍 Geocache Nearby!',
-                            `"${cache.title}" is ${Math.round(distance)}m away`,
+                            `"${cache.title || 'Untitled Geocache'}" is ${Math.round(distance)}m away`,
                             'nearbyCache'
                         );
                         notificationCooldowns.nearbyCache[cache.id] = now;