Refine compact viewer chrome and tooltips

index.html

@@ -10345,7 +10345,7 @@ body.sx-viewer-open { overflow: hidden; }
 })();
 </script>
 
-<script src="space-shell.js?v=64dc8c6965a6"></script>
+<script src="space-shell.js?v=481f3f1371de"></script>
 <script type="module" src="space-auth.js"></script>
 
 </body>

space-shell.js

@@ -16,6 +16,11 @@
   var viewerRetryMutationExpected = false;
   var compactHeaderState = null;
   var compactDiffMenu = null;
+  var compactTooltip = null;
+  var compactTooltipTarget = null;
+
+  var COMPACT_DISCUSS_ICON = '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M21 12a8 8 0 0 1-8 8H7l-4 2 1.6-4A9 9 0 1 1 21 12z"/></svg>';
+  var COMPACT_INSTALL_ICON = '<svg viewBox="0 0 24 24" aria-hidden="true"><rect x="3.5" y="3.5" width="17" height="17" rx="5.25"/></svg>';
 
   function installCompactHeaderStyles() {
     if (document.getElementById("sx-compact-header-styles")) return;
@@ -27,17 +32,12 @@
       "#sx-header .sx-brand span{display:none!important}" +
       "#sx-header .sx-logo{width:22px;height:22px}" +
       "#sx-back{height:34px;padding:0 10px;border-radius:8px;font-size:12px;white-space:nowrap}" +
-      ".sx-model-context{display:none;align-items:center;min-width:0;gap:5px;padding-left:8px;border-left:1px solid #302740}" +
-      "body.sx-viewer-open .sx-model-context{display:flex}" +
-      ".sx-model-owner,.sx-model-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}" +
-      ".sx-model-owner{color:#aeb9cc;font-size:12px;font-weight:600}" +
-      ".sx-model-slash{color:#5f5871;font-size:12px}" +
-      ".sx-model-name{color:#f3effa;font-size:13px;font-weight:700;max-width:min(27vw,360px)}" +
       ".sx-model-actions{display:none;align-items:center;gap:5px;margin-left:auto}" +
       "body.sx-viewer-open .sx-model-actions{display:flex}" +
       ".sx-compact-action{height:32px;min-width:32px;display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:0 9px;border:1px solid #352b47;border-radius:8px;background:#1b1626;color:#ded7eb;font:600 11.5px/1 Inter,system-ui,sans-serif;text-decoration:none;cursor:pointer;white-space:nowrap}" +
       ".sx-compact-action:hover,.sx-compact-action:focus-visible{border-color:#645378;background:#241d31;color:#fff;outline:none}" +
       ".sx-compact-action svg{width:14px;height:14px;display:block;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}" +
+      ".sx-action-icon{display:inline-grid;place-items:center;flex:0 0 auto}" +
       ".sx-compact-action.is-bookmarked{color:#9cff63;border-color:rgba(156,255,99,.42);background:rgba(156,255,99,.08)}" +
       ".sx-compact-action--primary{border-color:rgba(156,255,99,.35);background:rgba(156,255,99,.09);color:#dfffd0}" +
       ".sx-diff-counts{display:inline-flex;flex-direction:column;align-items:flex-end;font-size:8px;line-height:.82;font-weight:800}" +
@@ -47,8 +47,12 @@
       ".sx-compact-diff-menu[hidden]{display:none}" +
       ".sx-compact-diff-option{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 10px;border:0;border-radius:7px;background:transparent;color:#e9e3f2;font:600 12px/1.25 Inter,system-ui,sans-serif;text-align:left;cursor:pointer}" +
       ".sx-compact-diff-option:hover{background:#241d31}" +
-      "@media(max-width:900px){.sx-model-name{max-width:22vw}.sx-action-label{display:none}.sx-compact-action{padding:0;min-width:32px}.sx-compact-action--primary .sx-action-label{display:inline}.sx-compact-action--primary{padding:0 7px}}" +
-      "@media(max-width:640px){#sx-header{padding:6px 8px;gap:5px}#sx-header .sx-brand strong{display:none}#sx-back{width:32px;min-width:32px;padding:0;font-size:0}#sx-back::before{content:'←';font-size:16px}.sx-model-context{padding-left:5px}.sx-model-owner{display:none}.sx-model-slash{display:none}.sx-model-name{max-width:none;flex:1;font-size:12px}.sx-model-actions{margin-left:auto}.sx-compact-action[data-action='report'],.sx-compact-action[data-action='hugging-face']{display:none!important}#sx-open{width:32px;min-width:32px;padding:0}.sx-open-label{display:none}.sx-compact-diff-menu{right:8px;left:8px;min-width:0}}";
+      ".sx-compact-tooltip{position:fixed;z-index:5100;left:0;top:0;max-width:min(240px,calc(100vw - 20px));padding:7px 9px;border:1px solid rgba(156,255,99,.24);border-radius:8px;background:linear-gradient(180deg,rgba(35,28,48,.98),rgba(20,16,29,.98));color:#f1ebf8;font:600 11px/1.25 Inter,system-ui,sans-serif;letter-spacing:.01em;white-space:nowrap;box-shadow:0 10px 28px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.055);pointer-events:none;opacity:0;transform:translateY(-3px);transition:opacity 110ms ease,transform 110ms ease}" +
+      ".sx-compact-tooltip::before{content:'';position:absolute;top:-4px;left:var(--sx-tooltip-arrow,50%);width:7px;height:7px;border-left:1px solid rgba(156,255,99,.24);border-top:1px solid rgba(156,255,99,.24);background:#231c30;transform:translateX(-50%) rotate(45deg)}" +
+      ".sx-compact-tooltip.is-visible{opacity:1;transform:translateY(0)}" +
+      "@media(prefers-reduced-motion:reduce){.sx-compact-tooltip{transition:none}}" +
+      "@media(max-width:900px){.sx-action-label{display:none}.sx-compact-action{padding:0;min-width:32px}.sx-compact-action--primary .sx-action-label{display:inline}.sx-compact-action--primary{padding:0 7px}}" +
+      "@media(max-width:640px){#sx-header{padding:6px 8px;gap:5px}#sx-header .sx-brand strong{display:none}#sx-back{width:32px;min-width:32px;padding:0;font-size:0}#sx-back::before{content:'←';font-size:16px}.sx-model-actions{margin-left:auto}.sx-compact-action[data-action='report'],.sx-compact-action[data-action='hugging-face']{display:none!important}#sx-open{width:32px;min-width:32px;padding:0}.sx-open-label{display:none}.sx-compact-diff-menu{right:8px;left:8px;min-width:0}}";
     document.head.appendChild(style);
   }
 
@@ -57,24 +61,79 @@
     button.type = "button";
     button.className = "sx-compact-action";
     button.dataset.action = action;
+    button.dataset.sxTooltip = label;
     button.setAttribute("aria-label", label);
-    button.innerHTML = icon + '<span class="sx-action-label"></span>';
+    button.innerHTML = '<span class="sx-action-icon">' + icon + '</span><span class="sx-action-label"></span>';
     button.querySelector(".sx-action-label").textContent = label;
     return button;
   }
 
+  function hideCompactTooltip() {
+    compactTooltipTarget = null;
+    compactTooltip?.classList.remove("is-visible");
+  }
+
+  function positionCompactTooltip(target) {
+    if (!compactTooltip || compactTooltipTarget !== target || !target?.isConnected) return;
+    var rect = target.getBoundingClientRect();
+    var width = compactTooltip.offsetWidth || 120;
+    var margin = 10;
+    var left = Math.max(margin, Math.min(rect.left + rect.width / 2 - width / 2, window.innerWidth - width - margin));
+    var top = rect.bottom + 8;
+    var arrow = Math.max(9, Math.min(width - 9, rect.left + rect.width / 2 - left));
+    compactTooltip.style.left = Math.round(left) + "px";
+    compactTooltip.style.top = Math.round(top) + "px";
+    compactTooltip.style.setProperty("--sx-tooltip-arrow", Math.round(arrow) + "px");
+  }
+
+  function showCompactTooltip(target) {
+    var label = String(target?.dataset?.sxTooltip || "").trim();
+    if (!label) return;
+    if (!compactTooltip) {
+      compactTooltip = document.createElement("div");
+      compactTooltip.className = "sx-compact-tooltip";
+      compactTooltip.setAttribute("role", "tooltip");
+      document.body.appendChild(compactTooltip);
+    }
+    compactTooltipTarget = target;
+    compactTooltip.textContent = label;
+    positionCompactTooltip(target);
+    compactTooltip.classList.add("is-visible");
+    window.requestAnimationFrame(function () { positionCompactTooltip(target); });
+  }
+
+  function installCompactHeaderTooltips(header, back, open) {
+    back.dataset.sxTooltip = "Back to all models";
+    open.dataset.sxTooltip = "Open on hfviewer.com";
+    header.addEventListener("pointerover", function (event) {
+      var target = event.target.closest?.("[data-sx-tooltip]");
+      if (!target || !header.contains(target) || target.contains(event.relatedTarget)) return;
+      showCompactTooltip(target);
+    });
+    header.addEventListener("pointerout", function (event) {
+      var target = event.target.closest?.("[data-sx-tooltip]");
+      if (!target || target.contains(event.relatedTarget)) return;
+      hideCompactTooltip();
+    });
+    header.addEventListener("focusin", function (event) {
+      var target = event.target.closest?.("[data-sx-tooltip]");
+      if (target && header.contains(target)) showCompactTooltip(target);
+    });
+    header.addEventListener("focusout", function (event) {
+      if (!event.target.closest?.("[data-sx-tooltip]")?.contains(event.relatedTarget)) hideCompactTooltip();
+    });
+    window.addEventListener("resize", hideCompactTooltip);
+    window.addEventListener("scroll", hideCompactTooltip, true);
+  }
+
   function installCompactViewerHeader() {
     var header = document.getElementById("sx-header");
     var back = document.getElementById("sx-back");
     var open = document.getElementById("sx-open");
-    if (!header || !back || !open || document.getElementById("sx-model-context")) return;
+    if (!header || !back || !open || document.getElementById("sx-model-actions")) return;
     installCompactHeaderStyles();
     header.querySelector(".sx-brand span")?.remove();
 
-    var context = document.createElement("div");
-    context.id = "sx-model-context";
-    context.className = "sx-model-context";
-    context.innerHTML = '<span class="sx-model-owner"></span><span class="sx-model-slash">/</span><span class="sx-model-name"></span>';
     var actions = document.createElement("div");
     actions.id = "sx-model-actions";
     actions.className = "sx-model-actions";
@@ -83,10 +142,10 @@
       compactAction("hugging-face", "Hugging Face", '<svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M8.5 10h.01M15.5 10h.01M8.5 14c2.1 2 4.9 2 7 0"/></svg>'),
       compactAction("embed", "Embed", '<svg viewBox="0 0 24 24" aria-hidden="true"><rect x="8" y="8" width="12" height="12" rx="2"/><path d="M4 16H3a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v1"/></svg>'),
       compactAction("bookmark", "Bookmark", '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 3h12v18l-6-4-6 4z"/></svg>'),
-      compactAction("primary", "Discuss", '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M21 12a8 8 0 0 1-8 8H7l-4 2 1.6-4A9 9 0 1 1 21 12z"/></svg>')
+      compactAction("primary", "Discuss", COMPACT_DISCUSS_ICON)
     );
-    header.insertBefore(context, back.nextSibling);
     header.insertBefore(actions, open);
+    installCompactHeaderTooltips(header, back, open);
     compactDiffMenu = document.createElement("div");
     compactDiffMenu.className = "sx-compact-diff-menu";
     compactDiffMenu.hidden = true;
@@ -107,7 +166,6 @@
         compactDiffMenu.hidden = true;
       }
     });
-    renderCompactHeaderFromModel(modelFromLocation());
   }
 
   function postHeaderAction(action, extra) {
@@ -120,17 +178,8 @@
     }, extra || {}), WEBSITE_ORIGIN);
   }
 
-  function renderCompactHeaderFromModel(repoId) {
-    var context = document.getElementById("sx-model-context");
-    if (!context) return;
-    var parts = String(repoId || "").split("/");
-    context.querySelector(".sx-model-owner").textContent = parts[0] || "";
-    context.querySelector(".sx-model-name").textContent = parts.slice(1).join("/") || repoId || "Model";
-  }
-
   function renderCompactHeader(state) {
     compactHeaderState = state;
-    renderCompactHeaderFromModel(state.repoId || [state.owner, state.model].filter(Boolean).join("/"));
     var actions = document.getElementById("sx-model-actions");
     if (!actions) return;
     ["report", "embed", "bookmark", "primary"].forEach(function (name) {
@@ -148,7 +197,11 @@
     if (primary) {
       var label = primaryState.label || (primaryState.mode === "diff" ? "Diff" : "Discuss");
       primary.querySelector(".sx-action-label").textContent = label;
+      primary.querySelector(".sx-action-icon").innerHTML = primaryState.mode === "install"
+        ? COMPACT_INSTALL_ICON
+        : COMPACT_DISCUSS_ICON;
       primary.setAttribute("aria-label", label);
+      primary.dataset.sxTooltip = label;
       primary.classList.toggle("sx-compact-action--primary", primaryState.mode === "diff");
       primary.querySelector(".sx-diff-counts")?.remove();
       if (primaryState.mode === "diff") {