feat: add album autocomplete search as fallback

teal-scrobble.html

···
         return data.recordings || [];
       }
 
+      async function searchReleases(query, artistMbid) {
+        if (query.length < 2) return [];
+
+        const fullQuery = `${query} AND arid:${artistMbid}`;
+        const url = `${MB_API}/release?query=${encodeURIComponent(fullQuery)}&fmt=json&limit=10`;
+        const res = await fetch(url, { headers: MB_HEADERS });
+
+        if (!res.ok) throw new Error("MusicBrainz search failed");
+
+        const data = await res.json();
+        return data.releases || [];
+      }
+
       function debounce(fn, ms) {
         return (...args) => {
           clearTimeout(searchTimeout);
···
 
             <div class="form-row">
               <div class="form-group">
-                <label>Album</label>
-                <input type="text" id="album-display" class="read-only" readonly placeholder="Auto-filled" />
+                <label>Album <span style="font-weight: normal; color: var(--text-secondary);">(optional)</span></label>
+                <div id="album-field"></div>
               </div>
               <div class="form-group" style="flex: 0 0 80px;">
                 <label>Duration</label>
···
 
         renderArtistField();
         renderTrackField();
+        renderAlbumField();
       }
 
       function renderArtistField() {
···
         }
       }
 
+      function renderAlbumField() {
+        const container = document.getElementById("album-field");
+        const disabled = !state.selectedArtist;
+        const albumName = state.selectedRecording?.releaseName || "";
+
+        container.innerHTML = `
+          <div class="autocomplete-wrapper">
+            <input
+              type="text"
+              id="album-input"
+              placeholder="${disabled ? "Select an artist first" : "Search or leave blank..."}"
+              value="${esc(albumName)}"
+              ${disabled ? "disabled" : ""}
+              oninput="handleAlbumInput(this.value)"
+              onfocus="handleAlbumInput(this.value)"
+            />
+            <div id="album-dropdown" class="autocomplete-dropdown hidden"></div>
+          </div>
+        `;
+      }
+
       // =============================================================================
       // ARTIST SEARCH HANDLERS
       // =============================================================================
···
         };
 
         state.selectedRecording = null;
-        document.getElementById("album-display").value = "";
         document.getElementById("duration-display").value = "";
 
         renderArtistField();
         renderTrackField();
+        renderAlbumField();
         updateSubmitButton();
       }
 
       function clearArtist() {
         state.selectedArtist = null;
         state.selectedRecording = null;
-        document.getElementById("album-display").value = "";
         document.getElementById("duration-display").value = "";
 
         renderArtistField();
         renderTrackField();
+        renderAlbumField();
         updateSubmitButton();
       }
 
···
           })) || [{ artistName: state.selectedArtist.name, artistMbId: state.selectedArtist.mbid }],
         };
 
-        document.getElementById("album-display").value = state.selectedRecording.releaseName || "";
         document.getElementById("duration-display").value = durationSecs
           ? formatDuration(durationSecs)
           : "";
 
         renderTrackField();
+        renderAlbumField();
         updateSubmitButton();
       }
 
       function clearRecording() {
         state.selectedRecording = null;
-        document.getElementById("album-display").value = "";
         document.getElementById("duration-display").value = "";
 
         renderTrackField();
+        renderAlbumField();
         updateSubmitButton();
       }
 
···
         const m = Math.floor(secs / 60);
         const s = secs % 60;
         return `${m}:${s.toString().padStart(2, "0")}`;
+      }
+
+      // =============================================================================
+      // ALBUM SEARCH HANDLERS
+      // =============================================================================
+
+      const handleAlbumInput = debounce(async (query) => {
+        const dropdown = document.getElementById("album-dropdown");
+
+        // Update the release name in state as user types
+        if (state.selectedRecording) {
+          state.selectedRecording.releaseName = query || null;
+          state.selectedRecording.releaseMbid = null;
+        }
+
+        if (!state.selectedArtist || query.length < 2) {
+          dropdown.classList.add("hidden");
+          return;
+        }
+
+        dropdown.innerHTML = `<div class="autocomplete-status">Searching...</div>`;
+        dropdown.classList.remove("hidden");
+
+        try {
+          const releases = await searchReleases(query, state.selectedArtist.mbid);
+
+          if (releases.length === 0) {
+            dropdown.innerHTML = `<div class="autocomplete-status">No albums found</div>`;
+            return;
+          }
+
+          dropdown.innerHTML = releases
+            .map((r, i) => {
+              const date = r.date ? r.date.substring(0, 4) : "";
+              const artUrl = r.id ? `https://coverartarchive.org/release/${r.id}/front-250` : "";
+
+              return `
+                <div class="autocomplete-item" onclick="selectRelease(${i})" data-index="${i}">
+                  <div class="autocomplete-item-art">
+                    ${artUrl ? `<img src="${artUrl}" alt="" onerror="this.style.display='none'">` : ""}
+                  </div>
+                  <div class="autocomplete-item-info">
+                    <div class="autocomplete-item-title">${esc(r.title)}</div>
+                    ${date ? `<div class="autocomplete-item-subtitle">${date}</div>` : ""}
+                  </div>
+                </div>
+              `;
+            })
+            .join("");
+
+          dropdown.dataset.releases = JSON.stringify(releases);
+        } catch (error) {
+          dropdown.innerHTML = `<div class="autocomplete-status" style="color: var(--error-text)">Search failed</div>`;
+        }
+      }, 300);
+
+      function selectRelease(index) {
+        const dropdown = document.getElementById("album-dropdown");
+        const releases = JSON.parse(dropdown.dataset.releases || "[]");
+        const release = releases[index];
+
+        if (!release) return;
+
+        if (state.selectedRecording) {
+          state.selectedRecording.releaseName = release.title;
+          state.selectedRecording.releaseMbid = release.id;
+        }
+
+        dropdown.classList.add("hidden");
+        document.getElementById("album-input").value = release.title;
       }
 
       // =============================================================================