feat(umap): album pulldown in semantic-map titlebar

photomap/frontend/static/css/umap-floating-window.css

@@ -61,6 +61,40 @@
   font-size: 1em;
 }
 
+#semanticMapAlbumSelect {
+  cursor: pointer;
+  background: transparent;
+  color: #fff;
+  font-weight: bold;
+  font-size: 1em;
+  font-family: inherit;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  padding: 2px 22px 2px 6px;
+  margin: 0;
+  max-width: 60%;
+  text-overflow: ellipsis;
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><polygon points='0,0 10,0 5,6' fill='%23ffffff'/></svg>");
+  background-repeat: no-repeat;
+  background-position: right 6px center;
+}
+
+#semanticMapAlbumSelect:hover,
+#semanticMapAlbumSelect:focus {
+  background-color: rgba(255, 255, 255, 0.12);
+  border-color: rgba(255, 255, 255, 0.25);
+  outline: none;
+}
+
+#semanticMapAlbumSelect option {
+  background: #1e1e28;
+  color: #fff;
+  font-weight: normal;
+}
+
 /* ===== UMAP THUMBNAIL STYLES ===== */
 .umap-thumbnail {
   position: fixed;

photomap/frontend/static/javascript/settings.js

@@ -278,7 +278,6 @@ function setupAlbumSelector() {
     const newAlbum = this.value;
     if (newAlbum !== state.album) {
       switchAlbum(newAlbum);
-      closeSettingsModal();
     }
   });
 }

photomap/frontend/static/javascript/umap.js

@@ -11,6 +11,7 @@ import {
 } from "./cluster-utils.js";
 import { exitSearchMode } from "./search-ui.js";
 import { getImagePath, setSearchResults } from "./search.js";
+import { switchAlbum } from "./settings.js";
 import { getCurrentSlideIndex, slideState } from "./slide-state.js";
 import {
   setUmapClickSelectsCluster,
@@ -113,20 +114,6 @@ document.getElementById("umapEpsSpinner").oninput = async () => {
   }, 1000);
 };
 
-// --- Caching Current Album ---
-let cachedAlbum = null;
-let cachedAlbumName = null;
-
-async function getCachedAlbum() {
-  const currentAlbumName = state.album;
-  if (cachedAlbum && cachedAlbumName === currentAlbumName) {
-    return cachedAlbum;
-  }
-  cachedAlbum = await albumManager.getCurrentAlbum();
-  cachedAlbumName = currentAlbumName;
-  return cachedAlbum;
-}
-
 // --- Main UMAP Data Fetch and Plot ---
 export async function fetchUmapData() {
   if (mapExists && !state.dataChanged) {
@@ -873,7 +860,7 @@ async function initializeUmapWindow() {
   }
   state.dataChanged = true;
   lastUnshadedSize = "medium"; // Reset to medium on album change
-  setSemanticMapTitle();
+  populateSemanticMapAlbumSelect();
   fetchUmapData();
   toggleFullscreen(true); // Force fullscreen on album change
 }
@@ -1831,19 +1818,56 @@ window.addEventListener("slideshowStartRequested", () => {
   toggleUmapWindow(false);
 });
 
-// Helper to set the semantic map window title to the album display name
-function setSemanticMapTitle() {
-  const titleSpan = document.getElementById("semanticMapTitle");
-  if (!titleSpan) {
+// Populate the album dropdown in the semantic-map titlebar and select the
+// current album. The change listener is attached once in
+// setupSemanticMapAlbumSelect(); this only refreshes the options.
+async function populateSemanticMapAlbumSelect() {
+  const select = document.getElementById("semanticMapAlbumSelect");
+  if (!select) {
     return;
   }
-  getCachedAlbum().then((album) => {
-    if (album && album.name) {
-      titleSpan.textContent = album.name;
-    } else if (state.album) {
-      titleSpan.textContent = state.album;
-    } else {
-      titleSpan.textContent = "Semantic Map";
+  let albums;
+  try {
+    albums = await albumManager.fetchAvailableAlbums();
+  } catch (err) {
+    console.error("Failed to load albums for semantic map dropdown:", err);
+    return;
+  }
+  select.innerHTML = "";
+  if (!albums || albums.length === 0) {
+    const option = document.createElement("option");
+    option.value = "";
+    option.textContent = "Semantic Map";
+    option.disabled = true;
+    option.selected = true;
+    select.appendChild(option);
+    return;
+  }
+  for (const album of albums) {
+    const option = document.createElement("option");
+    option.value = album.key;
+    option.textContent = album.name;
+    select.appendChild(option);
+  }
+  if (state.album) {
+    select.value = state.album;
+  }
+}
+
+function setupSemanticMapAlbumSelect() {
+  const select = document.getElementById("semanticMapAlbumSelect");
+  if (!select || select.dataset.listenerAttached === "true") {
+    return;
+  }
+  select.dataset.listenerAttached = "true";
+  // Block titlebar drag/double-click from hijacking native dropdown behavior.
+  ["mousedown", "touchstart", "click", "dblclick"].forEach((evt) => {
+    select.addEventListener(evt, (e) => e.stopPropagation());
+  });
+  select.addEventListener("change", () => {
+    const newAlbum = select.value;
+    if (newAlbum && newAlbum !== state.album) {
+      switchAlbum(newAlbum);
     }
   });
 }
@@ -1854,7 +1878,11 @@ export function isUmapFullscreen() {
 }
 
 // Set initial title on DOMContentLoaded
-document.addEventListener("DOMContentLoaded", initializeUmapWindow);
+document.addEventListener("DOMContentLoaded", () => {
+  setupSemanticMapAlbumSelect();
+  populateSemanticMapAlbumSelect();
+  initializeUmapWindow();
+});
 window.addEventListener("albumChanged", initializeUmapWindow);
 
 // ========================================================

photomap/frontend/templates/modules/umap-floating-window.html

@@ -4,7 +4,7 @@
 <div id="umapFloatingWindow">
   <!-- Titlebar -->
   <div id="umapTitlebar">
-    <span id="semanticMapTitle">Semantic Map</span>
+    <select id="semanticMapAlbumSelect" title="Switch album" aria-label="Switch album"></select>
     <div style="display: flex; align-items: center; gap: 8px">
       <!-- Resizing icons -->
       <button id="umapResizeFullscreen" title="Fullscreen" class="icon-btn">