Styling

history.js

@@ -3,51 +3,101 @@
 const statusEl = document.getElementById("status");
 const listEl = document.getElementById("historyList");
 
-function formatDate(ms) {
-  try {
-    return new Date(ms).toLocaleString();
-  } catch (error) {
-    return "unknown time";
-  }
-}
-
 function formatMeta(entry) {
   const packName = entry && entry.packName ? entry.packName : "n/a";
   const key = entry && entry.key ? entry.key : "n/a";
   const bpm = entry && entry.bpm ? entry.bpm : "n/a";
-  const tags = entry && Array.isArray(entry.tags) && entry.tags.length ? entry.tags.join(", ") : "n/a";
-  return `Pack: ${packName} | Key: ${key} | BPM: ${bpm} | Tags: ${tags}`;
+  return { packName, key, bpm };
+}
+
+function formatTags(entry) {
+  if (!entry || !Array.isArray(entry.tags) || !entry.tags.length) {
+    return "No tags";
+  }
+  return entry.tags.join(" • ");
+}
+
+function createDownloadIcon() {
+  const ns = "http://www.w3.org/2000/svg";
+  const svg = document.createElementNS(ns, "svg");
+  svg.setAttribute("viewBox", "0 0 24 24");
+  svg.setAttribute("width", "22");
+  svg.setAttribute("height", "22");
+  svg.setAttribute("aria-hidden", "true");
+
+  const arrow = document.createElementNS(ns, "path");
+  arrow.setAttribute("d", "M12 4v10m0 0l4-4m-4 4l-4-4");
+  arrow.setAttribute("fill", "none");
+  arrow.setAttribute("stroke", "currentColor");
+  arrow.setAttribute("stroke-width", "2");
+  arrow.setAttribute("stroke-linecap", "round");
+  arrow.setAttribute("stroke-linejoin", "round");
+
+  const tray = document.createElementNS(ns, "path");
+  tray.setAttribute("d", "M4 18v1a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-1");
+  tray.setAttribute("fill", "none");
+  tray.setAttribute("stroke", "currentColor");
+  tray.setAttribute("stroke-width", "2");
+  tray.setAttribute("stroke-linecap", "round");
+  tray.setAttribute("stroke-linejoin", "round");
+
+  svg.appendChild(arrow);
+  svg.appendChild(tray);
+  return svg;
 }
 
 function buildItem(entry) {
   const li = document.createElement("li");
   li.className = "history-item";
+  const meta = formatMeta(entry);
 
-  if (entry.coverImageUrl) {
-    const cover = document.createElement("img");
-    cover.className = "history-cover-image";
-    cover.src = entry.coverImageUrl;
-    cover.alt = "Cover art";
-    cover.loading = "lazy";
-    li.appendChild(cover);
-  }
+  const head = document.createElement("div");
+  head.className = "history-head";
 
-  const url = document.createElement("p");
-  url.className = "history-url";
-  url.textContent = entry.fileName || entry.sampleId || "(unknown filename)";
+  const cover = document.createElement("img");
+  cover.className = "history-cover-image";
+  cover.src = entry.coverImageUrl || "icons/icon-48.png";
+  cover.alt = "Cover art";
+  cover.loading = "lazy";
 
-  const meta = document.createElement("p");
-  meta.className = "history-meta";
+  const info = document.createElement("div");
+  info.className = "history-info";
+
+  const title = document.createElement("p");
+  title.className = "history-title";
+  title.textContent = entry.fileName || entry.sampleId || "(unknown filename)";
+
+  const subtitle = document.createElement("p");
+  subtitle.className = "history-subtitle";
   const mode = entry.mode === "full" || entry.fullUrl ? "full candidate" : "preview fallback";
-  meta.textContent = `Captured: ${formatDate(entry.capturedAt)} | Mode: ${mode} | Source: ${entry.source || "unknown"} | ID: ${entry.sampleId || "n/a"}`;
+  subtitle.textContent = `${meta.packName} • ${mode}`;
 
-  const details = document.createElement("p");
-  details.className = "history-meta";
-  details.textContent = formatMeta(entry);
+  const badges = document.createElement("div");
+  badges.className = "history-badges";
+  const keyBadge = document.createElement("span");
+  keyBadge.className = "badge";
+  keyBadge.textContent = `Key ${meta.key}`;
+  const bpmBadge = document.createElement("span");
+  bpmBadge.className = "badge";
+  bpmBadge.textContent = `BPM ${meta.bpm}`;
+  badges.appendChild(keyBadge);
+  badges.appendChild(bpmBadge);
+
+  const tags = document.createElement("p");
+  tags.className = "history-tags";
+  tags.textContent = formatTags(entry);
+
+  info.appendChild(title);
+  info.appendChild(subtitle);
+  info.appendChild(badges);
+  info.appendChild(tags);
 
   const download = document.createElement("button");
   download.type = "button";
-  download.textContent = "Download";
+  download.className = "download-icon-btn";
+  download.setAttribute("aria-label", "Download sample");
+  download.setAttribute("title", "Download sample");
+  download.appendChild(createDownloadIcon());
   download.addEventListener("click", async () => {
     const result = await browser.runtime.sendMessage({
       type: "DOWNLOAD_ENTRY",
@@ -60,10 +110,10 @@ function buildItem(entry) {
     statusEl.textContent = result.mode === "full" ? "Downloaded full file URL." : "Downloaded decoded preview fallback.";
   });
 
-  li.appendChild(url);
-  li.appendChild(meta);
-  li.appendChild(details);
-  li.appendChild(download);
+  head.appendChild(cover);
+  head.appendChild(info);
+  head.appendChild(download);
+  li.appendChild(head);
   return li;
 }