Hide empty name notes and show a hover peek.

Skip “Not set” rows in the drawer, and surface key etymology on hover without opening the card.

static/v2.html

@@ -207,12 +207,34 @@
       font-variant-numeric: tabular-nums;
       font-weight: 700; text-align: center; padding-top: 0.15rem;
     }
+    .name-wrap { position: relative; display: block; }
     .name-btn {
       all: unset; cursor: pointer; display: block; width: 100%;
       font-family: "Libre Baskerville", Georgia, serif;
       font-size: 1.2rem; letter-spacing: -0.01em;
     }
     .name-btn:hover { text-decoration: underline; text-underline-offset: 3px; }
+    .name-peek {
+      display: none;
+      position: absolute;
+      left: 0; top: calc(100% + 0.35rem);
+      z-index: 5;
+      min-width: 12rem; max-width: min(22rem, 70vw);
+      padding: 0.55rem 0.65rem;
+      background: var(--sheet);
+      color: var(--ink);
+      border: 1px solid var(--rule);
+      box-shadow: 0 6px 18px rgba(20, 18, 14, 0.14);
+      font-size: 0.82rem;
+      line-height: 1.35;
+      pointer-events: none;
+    }
+    .name-peek .k { color: var(--muted); font-size: 0.72rem; display: block; margin-top: 0.3rem; }
+    .name-peek .k:first-child { margin-top: 0; }
+    @media (hover: hover) and (pointer: fine) {
+      .name-wrap:hover .name-peek:not(:empty) { display: block; }
+      .card:has(.drawer:not(.hidden)) .name-peek { display: none !important; }
+    }
     .meta { margin: 0.15rem 0 0; color: var(--muted); font-size: 0.8rem; }
     .votes { display: flex; flex-direction: column; gap: 0.25rem; }
     .votes button {
@@ -250,7 +272,6 @@
     }
     .notes-view .k { color: var(--muted); font-size: 0.78rem; display: block; margin-top: 0.35rem; }
     .notes-view .k:first-child { margin-top: 0; }
-    .notes-view .empty-hint { color: var(--muted); font-style: italic; }
     .voice-row {
       display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center;
       margin-top: 0.55rem;
@@ -501,7 +522,7 @@
       </ul>
       <h3>Names &amp; votes</h3>
       <ul>
-        <li>Tap a name to expand. ▲ / ▼ rank it (tap again to clear). <kbd>Esc</kbd> closes an open name.</li>
+        <li>Hover a name for a quick peek; tap to expand. ▲ / ▼ rank it (tap again to clear). <kbd>Esc</kbd> closes an open name.</li>
         <li>Suggest names below; pick which column with the toggles.</li>
       </ul>
       <h3>Columns</h3>
@@ -747,6 +768,25 @@
       state.columns.forEach((col) => renderList(col.id));
     }
 
+    function noteRow(label, value) {
+      const text = (value || "").trim();
+      if (!text) return "";
+      return `<span class="k">${escapeHtml(label)}</span><div dir="auto">${escapeHtml(text)}</div>`;
+    }
+
+    function peekHtml(n) {
+      const L = (n.locales && n.locales.en) || {};
+      const spoken = (L.pronunciation || "").trim() || n.spelling;
+      const parts = [
+        noteRow("Why", n.significance),
+        noteRow("Says", spoken),
+        noteRow("Origin", L.origin),
+        noteRow("Meaning", L.meaning),
+      ].filter(Boolean);
+      if (!parts.length) return "";
+      return `<div class="name-peek" role="tooltip">${parts.join("")}</div>`;
+    }
+
     function renderCard(n, kind) {
       const open = state.openId === n.id;
       const editing = state.editId === n.id;
@@ -755,23 +795,21 @@
       const form = formFor(n, lang);
       const hasRec = !!(n.recordings && n.recordings[lang]);
       const sig = (n.significance || "").trim();
+      const spoken = (L.pronunciation || "").trim() || form;
       const hasNotes = !!(L.origin || L.meaning || L.pronunciation || sig);
       const pills = ["en", "ru", "he"].map((l) =>
         `<button type="button" class="${lang === l ? "active" : ""}" data-lang="${l}">${l}</button>`
       ).join("");
       const recActive = state.recording && state.recording.nameId === n.id && state.recording.lang === lang;
-      const spoken = L.pronunciation || form || "—";
-      const notesView = `
-        <div class="notes-view">
-          <span class="k">Why this name?</span>
-          <div dir="auto">${sig ? escapeHtml(sig) : `<span class="empty-hint">Not set</span>`}</div>
-          <span class="k">Spoken (${lang})</span>
-          <div dir="auto">${escapeHtml(spoken)}</div>
-          <span class="k">Origin</span>
-          <div dir="auto">${L.origin ? escapeHtml(L.origin) : `<span class="empty-hint">Not set</span>`}</div>
-          <span class="k">Meaning</span>
-          <div dir="auto">${L.meaning ? escapeHtml(L.meaning) : `<span class="empty-hint">Not set</span>`}</div>
-        </div>`;
+      const notesBody = [
+        noteRow("Why this name?", sig),
+        noteRow(`Spoken (${lang})`, spoken),
+        noteRow("Origin", L.origin),
+        noteRow("Meaning", L.meaning),
+      ].filter(Boolean).join("");
+      const notesView = notesBody
+        ? `<div class="notes-view">${notesBody}</div>`
+        : "";
       const notesEdit = `
         <div class="edit-grid">
           <div>
@@ -795,7 +833,10 @@
         <article class="card" data-id="${n.id}" data-kind="${kind}">
           <div class="score">${n.score}</div>
           <div>
-            <button type="button" class="name-btn" data-toggle dir="auto">${escapeHtml(n.spelling)}</button>
+            <div class="name-wrap">
+              <button type="button" class="name-btn" data-toggle dir="auto">${escapeHtml(n.spelling)}</button>
+              ${peekHtml(n)}
+            </div>
             <p class="meta">${escapeHtml(n.created_by || "someone")} · ${n.vote_count}${hasRec ? " · voice" : ""}${sig ? ` · ${escapeHtml(sig.length > 42 ? sig.slice(0, 40) + "…" : sig)}` : ""}</p>
             <div class="drawer ${open ? "" : "hidden"}">
               <div class="say-row">