@sensiblestats/widget-react 0.37.1 → 0.37.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @sensiblestats/widget-react
 
+## 0.37.2
+
+### Patch Changes
+
+- Match odds accordion: add a per-row market pin. Each accordion market row now shows the PinToggle on the right of its header (visible collapsed or expanded); tapping pins that market ({kind:'market', matchId, marketDeveloperName}) to the Odds tab, mirroring the pin on chat betting cards. The row header splits into an expand button + the pin button so the two actions stay independent.
+
 ## 0.37.1
 
 ### Patch Changes

package/dist/index.cjs

@@ -2980,20 +2980,31 @@ function MarketAccordion({ match, monitor, ui, slip }) {
     const key = `${match.matchId}:${m.marketDeveloperName}`;
     const entry = monitor.marketOdds[key];
     return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: isOpen ? "ss-w-acc-row ss-w-acc-row-open" : "ss-w-acc-row", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
-        "button",
-        {
-          type: "button",
-          className: "ss-w-acc-head",
-          onClick: () => monitor.toggleMarket(match.matchId, m.marketDeveloperName),
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "ss-w-acc-chevron", children: isOpen ? "\u25BE" : "\u25B8" }),
-            /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "ss-w-acc-label", children: m.marketLabel }),
-            m.hasInsight && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "ss-w-acc-badge", children: "\u2605" }),
-            m.suspended && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "ss-w-acc-susp", children: ui.accordionSuspended })
-          ]
-        }
-      ),
+      /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "ss-w-acc-head", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+          "button",
+          {
+            type: "button",
+            className: "ss-w-acc-toggle",
+            "aria-expanded": isOpen,
+            onClick: () => monitor.toggleMarket(match.matchId, m.marketDeveloperName),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "ss-w-acc-chevron", children: isOpen ? "\u25BE" : "\u25B8" }),
+              /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "ss-w-acc-label", children: m.marketLabel }),
+              m.hasInsight && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "ss-w-acc-badge", children: "\u2605" }),
+              m.suspended && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "ss-w-acc-susp", children: ui.accordionSuspended })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+          PinToggle,
+          {
+            ui,
+            monitor,
+            pin: { kind: "market", matchId: match.matchId, marketDeveloperName: m.marketDeveloperName }
+          }
+        )
+      ] }),
       isOpen && /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "ss-w-acc-panel", children: [
         entry?.error && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
           "div",
@@ -4058,11 +4069,13 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 .ss-w-mon-item { display: flex; flex-direction: column; gap: 10px; }
 .ss-w-acc { display: flex; flex-direction: column; gap: 6px; }
 .ss-w-acc-row { background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: 12px; border-left: 3px solid var(--ss-w-accent); overflow: hidden; }
-.ss-w-acc-head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 11px; background: none; border: none; cursor: pointer; text-align: left; font: inherit; color: var(--ss-w-ink); }
-.ss-w-acc-chevron { color: var(--ss-w-faint); font-size: 11px; }
-.ss-w-acc-label { font-size: 12.5px; font-weight: 600; }
-.ss-w-acc-badge { font-size: 10.5px; font-weight: 700; color: var(--ss-w-accent); }
-.ss-w-acc-susp { margin-left: auto; font-size: 10.5px; color: var(--ss-w-faint); }
+/* Row header: expand toggle (flex:1) + the market PinToggle as a sibling (no nested buttons). */
+.ss-w-acc-head { display: flex; align-items: center; gap: 8px; padding: 6px 9px 6px 11px; }
+.ss-w-acc-toggle { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; background: none; border: none; cursor: pointer; text-align: left; font: inherit; color: var(--ss-w-ink); padding: 5px 0; }
+.ss-w-acc-chevron { color: var(--ss-w-faint); font-size: 11px; flex: none; }
+.ss-w-acc-label { font-size: 12.5px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ss-w-acc-badge { font-size: 10.5px; font-weight: 700; color: var(--ss-w-accent); flex: none; }
+.ss-w-acc-susp { margin-left: auto; font-size: 10.5px; color: var(--ss-w-faint); flex: none; }
 .ss-w-acc-panel { padding: 0 11px 10px; display: flex; flex-direction: column; gap: 8px; }
 .ss-w-acc-insight { font-size: 12px; color: var(--ss-w-ink); background: color-mix(in srgb, var(--ss-w-accent) 9%, var(--ss-w-panel)); border-radius: 8px; padding: 7px 9px; }
 .ss-w-acc-retry { font-size: 12px; color: var(--ss-w-neg); cursor: pointer; padding: 6px 0; }