src/app.js

// This file needs the thumbnail fix added before the final closing
// Add this before the last line:

const THUMB_KEY = "avatar.thumbs";
const avatarThumbPreview = document.getElementById("avatar-thumb-preview");

function loadThumbs() {
  try { return JSON.parse(localStorage.getItem(THUMB_KEY) || "{}"); }
  catch { return {}; }
}
function saveThumbs(map) { localStorage.setItem(THUMB_KEY, JSON.stringify(map)); }

function serverThumbUrl(name) {
  if (!name) return "";
  return `/avatars/${name}.thumb.png`;
}

function updateAvatarThumbPreview() {
  if (!avatarThumbPreview) return;
  const name = chatAvatarSelect.value || settings.avatar || "";
  const map = loadThumbs();
  const local = map[name] || "";
  if (local) {
    avatarThumbPreview.src = local;
    avatarThumbPreview.hidden = false;
    return;
  }
  const srv = serverThumbUrl(name);
  if (srv) {
    avatarThumbPreview.src = srv;
    avatarThumbPreview.hidden = false;
  } else {
    avatarThumbPreview.hidden = true;
  }
}

if (chatAvatarSelect) chatAvatarSelect.addEventListener("change", updateAvatarThumbPreview);

// Snap button handler:
const snapBtn = document.getElementById("snap-btn");
if (snapBtn) {
  snapBtn.addEventListener("click", () => {
    if (!stage.head) { setCaption("AVATAR CHUA SAN SANG", "error"); return; }
    const url = stage.capturePNG();
    if (!url) { setCaption("KHONG CHUP DUOC ANH", "error"); return; }
    // TODO: send to /api/avatar-thumbnail
  });
}