@loafmarkets/ui 0.1.1 → 0.1.3

package/dist/index.mjs

@@ -4275,7 +4275,7 @@ var PriceChange = at.span`
   gap: 0.35rem;
   color: ${(props) => props.$isPositive == null ? "var(--color-text-secondary, rgba(255, 255, 255, 0.6))" : props.$isPositive ? "var(--color-positive, #0ecb81)" : "var(--color-negative, #f6465d)"};
 `;
-var TABS = [
+var DEFAULT_TABS = [
   { id: "portfolio", label: "Portfolio" },
   { id: "openOrders", label: "Open Orders" },
   { id: "tradeHistory", label: "Trade History" },
@@ -4370,12 +4370,29 @@ var formatPercent = (value, fractionDigits = 2) => {
   return `${value.toFixed(fractionDigits)}%`;
 };
 var YourOrders = o.forwardRef(
-  ({ className, title = "Portfolio Holdings (Demo)", orders, renderOrderActions, ...props }, ref) => {
-    const [activeTab, setActiveTab] = o.useState("portfolio");
-    const hasOrders = Array.isArray(orders) && orders.length > 0;
-    const renderPortfolio = () => {
+  ({ className, title, orders, tabs, activeTabId, onTabChange, renderOrderActions, ...props }, ref) => {
+    const [internalActiveTab, setInternalActiveTab] = o.useState(tabs?.[0]?.id ?? "portfolio");
+    const effectiveActiveTabId = activeTabId ?? internalActiveTab;
+    const handleTabChange = (tabId) => {
+      if (onTabChange) {
+        onTabChange(tabId);
+      } else {
+        setInternalActiveTab(tabId);
+      }
+    };
+    const resolvedTabs = tabs ?? DEFAULT_TABS.map((t) => ({ ...t, orders: orders ?? [], emptyState: `No ${t.label.toLowerCase()} data available.` }));
+    const activeTab = resolvedTabs.find((t) => t.id === effectiveActiveTabId) ?? resolvedTabs[0];
+    const activeOrders = activeTab?.orders ?? orders ?? [];
+    const displayTitle = title ?? activeTab?.title ?? activeTab?.label ?? "Portfolio Holdings";
+    console.log("[YourOrders] tabs:", tabs?.map((t) => ({ id: t.id, ordersCount: t.orders?.length })));
+    console.log("[YourOrders] activeTabId prop:", activeTabId);
+    console.log("[YourOrders] effectiveActiveTabId:", effectiveActiveTabId);
+    console.log("[YourOrders] activeTab:", activeTab?.id, "orders count:", activeOrders?.length);
+    const hasOrders = Array.isArray(activeOrders) && activeOrders.length > 0;
+    const emptyMessage = activeTab?.emptyState ?? "No holdings yet. Start trading to build your portfolio.";
+    const renderOrders = () => {
       if (!hasOrders) {
-        return /* @__PURE__ */ jsx("div", { style: emptyStateStyle, children: "No holdings yet. Start trading to build your portfolio." });
+        return /* @__PURE__ */ jsx("div", { style: emptyStateStyle, children: emptyMessage });
       }
       return /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsxs("div", { style: tableHeaderStyle, children: [
@@ -4386,7 +4403,7 @@ var YourOrders = o.forwardRef(
           /* @__PURE__ */ jsx("div", { style: tableHeaderCell, children: "Avg Price" }),
           /* @__PURE__ */ jsx("div", { style: tableHeaderCell, children: "P&L" })
         ] }),
-        /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: "0.65rem" }, children: orders.map((order) => {
+        /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: "0.65rem" }, children: activeOrders.map((order) => {
           const propertyName = order.asset;
           const holding = order.holdingLabel ?? `${order.amount.toLocaleString(void 0, {
             minimumFractionDigits: 0,
@@ -4479,24 +4496,7 @@ var YourOrders = o.forwardRef(
         }) })
       ] });
     };
-    const renderOtherTab = (label) => /* @__PURE__ */ jsx("div", { style: emptyStateStyle, children: `No ${label.toLowerCase()} data available.` });
-    let tabContent = null;
-    switch (activeTab) {
-      case "portfolio":
-        tabContent = renderPortfolio();
-        break;
-      case "openOrders":
-        tabContent = renderOtherTab("Open Orders");
-        break;
-      case "tradeHistory":
-        tabContent = renderOtherTab("Trade History");
-        break;
-      case "orderHistory":
-        tabContent = renderOtherTab("Order History");
-        break;
-      default:
-        tabContent = null;
-    }
+    const tabContent = renderOrders();
     return /* @__PURE__ */ jsxs(
       "div",
       {
@@ -4505,14 +4505,14 @@ var YourOrders = o.forwardRef(
         className,
         ...props,
         children: [
-          /* @__PURE__ */ jsx("div", { style: headerStyle, children: /* @__PURE__ */ jsx("h3", { style: titleStyle, children: title }) }),
-          /* @__PURE__ */ jsx("div", { style: tabsRowStyle, children: TABS.map((tab) => {
-            const isActive = activeTab === tab.id;
+          /* @__PURE__ */ jsx("div", { style: headerStyle, children: /* @__PURE__ */ jsx("h3", { style: titleStyle, children: displayTitle }) }),
+          resolvedTabs.length > 1 && /* @__PURE__ */ jsx("div", { style: tabsRowStyle, children: resolvedTabs.map((tab) => {
+            const isActive = effectiveActiveTabId === tab.id;
             return /* @__PURE__ */ jsxs(
               "button",
               {
                 type: "button",
-                onClick: () => setActiveTab(tab.id),
+                onClick: () => handleTabChange(tab.id),
                 style: {
                   ...tabButtonBase,
                   color: isActive ? "#ffffff" : "rgba(255,255,255,0.55)",
@@ -4545,7 +4545,97 @@ var YourOrders = o.forwardRef(
   }
 );
 YourOrders.displayName = "YourOrders";
-var defaultRanges = ["1D", "1W", "1M", "3M", "1Y"];
+var timeToDate = (time) => {
+  if (typeof time === "number") {
+    return new Date(time * 1e3);
+  }
+  if (typeof time === "object" && time !== null && "year" in time && "month" in time && "day" in time) {
+    const { year, month, day } = time;
+    return new Date(Date.UTC(year, month - 1, day));
+  }
+  return null;
+};
+var createTickFormatter = (formatOptions) => {
+  return (time, _tickMarkType, locale) => {
+    const date = timeToDate(time);
+    if (!date) return "";
+    return date.toLocaleString(locale || void 0, formatOptions);
+  };
+};
+var getTimeScaleOptions = (range) => {
+  switch (range) {
+    case "15m":
+      return {
+        timeVisible: true,
+        secondsVisible: false,
+        borderColor: "rgba(255,255,255,0.06)",
+        tickMarkFormatter: createTickFormatter({ hour: "2-digit", minute: "2-digit" })
+      };
+    case "1h":
+      return {
+        timeVisible: true,
+        secondsVisible: false,
+        borderColor: "rgba(255,255,255,0.06)",
+        tickMarkFormatter: createTickFormatter({ hour: "2-digit", minute: "2-digit" })
+      };
+    case "4h":
+      return {
+        timeVisible: true,
+        secondsVisible: false,
+        borderColor: "rgba(255,255,255,0.06)",
+        tickMarkFormatter: createTickFormatter({ weekday: "short", hour: "2-digit" })
+      };
+    case "24h":
+      return {
+        timeVisible: true,
+        secondsVisible: false,
+        borderColor: "rgba(255,255,255,0.06)",
+        tickMarkFormatter: createTickFormatter({ month: "short", day: "numeric" })
+      };
+    case "1W":
+      return {
+        timeVisible: true,
+        secondsVisible: false,
+        borderColor: "rgba(255,255,255,0.06)",
+        tickMarkFormatter: createTickFormatter({ month: "short", day: "numeric" })
+      };
+    case "1M":
+      return {
+        timeVisible: true,
+        secondsVisible: false,
+        borderColor: "rgba(255,255,255,0.06)",
+        tickMarkFormatter: createTickFormatter({ month: "short", year: "2-digit" })
+      };
+    default:
+      return {
+        timeVisible: true,
+        secondsVisible: false,
+        borderColor: "rgba(255,255,255,0.06)"
+      };
+  }
+};
+var getPriceScaleOptions = (data) => {
+  if (!data.length) return {
+    borderColor: "rgba(230, 200, 126, 0.25)",
+    textColor: "rgba(230, 200, 126, 0.7)"
+  };
+  const prices = data.flatMap((d2) => [d2.open, d2.high, d2.low, d2.close]);
+  const minPrice = Math.min(...prices);
+  const maxPrice = Math.max(...prices);
+  const priceRange = maxPrice - minPrice;
+  let scaleMargins = { top: 0.1, bottom: 0.1 };
+  if (priceRange < 1) {
+    scaleMargins = { top: 0.2, bottom: 0.2 };
+  } else if (priceRange > 1e3) {
+    scaleMargins = { top: 0.05, bottom: 0.05 };
+  }
+  return {
+    borderColor: "rgba(230, 200, 126, 0.25)",
+    textColor: "rgba(230, 200, 126, 0.7)",
+    scaleMargins
+  };
+};
+var defaultRanges = ["15m", "1h", "4h", "24h", "1W", "1M"];
 var formatPrice = (value, currencySymbol) => {
   return `${currencySymbol}${value.toLocaleString(void 0, {
     minimumFractionDigits: 2,
@@ -4614,15 +4704,8 @@ var PriceChart = o.forwardRef(
           vertLines: { color: "rgba(255,255,255,0.06)" },
           horzLines: { color: "rgba(255,255,255,0.06)" }
         },
-        rightPriceScale: {
-          borderColor: "rgba(230, 200, 126, 0.25)",
-          textColor: "rgba(230, 200, 126, 0.7)"
-        },
-        timeScale: {
-          borderColor: "rgba(255,255,255,0.06)",
-          timeVisible: true,
-          secondsVisible: false
-        },
+        rightPriceScale: getPriceScaleOptions(data),
+        timeScale: getTimeScaleOptions(selectedRange || defaultRanges[0]),
         crosshair: {
           vertLine: { color: "rgba(255,255,255,0.12)" },
           horzLine: { color: "rgba(255,255,255,0.12)" }
@@ -4643,11 +4726,22 @@ var PriceChart = o.forwardRef(
         chart.remove();
       };
     }, []);
+    o.useEffect(() => {
+      const chart = chartRef.current;
+      if (!chart) return;
+      const effectiveRange = selectedRange ?? ranges?.[0] ?? "1D";
+      chart.applyOptions({
+        timeScale: getTimeScaleOptions(effectiveRange)
+      });
+    }, [selectedRange, ranges]);
     o.useEffect(() => {
       const chart = chartRef.current;
       const series = seriesRef.current;
       if (!chart || !series) return;
       series.setData(data);
+      chart.applyOptions({
+        rightPriceScale: getPriceScaleOptions(data)
+      });
       if (priceLineRef.current) {
         series.removePriceLine(priceLineRef.current);
         priceLineRef.current = null;
@@ -5118,243 +5212,99 @@ var PriceBlock2 = at.span`
 `;
 var PropertySubheader = o.forwardRef(
   ({ className, tabs, activeTabId, onTabChange, actions, ...props }, ref) => {
-    const tabRefs = o.useRef([]);
-    const tabsWrapperRef = o.useRef(null);
-    const scrollContainerRef = o.useRef(null);
-    const indicatorRef = o.useRef(null);
-    const [isMobile, setIsMobile] = o.useState(false);
-    const [tabScrollThumb, setTabScrollThumb] = o.useState({
-      widthPercent: 100,
-      leftPercent: 0,
-      scrollable: false
-    });
-    const actionContainerStyle = o.useMemo(() => {
-      if (isMobile) {
-        return {
-          order: -1,
-          justifyContent: "center",
-          gap: "0.45rem",
-          flexWrap: "wrap"
-        };
-      }
-      return { order: 0 };
-    }, [isMobile]);
-    const actionButtonStyle = o.useMemo(() => {
-      if (isMobile) {
-        return { padding: "0.35rem 0.6rem", fontSize: "11px" };
-      }
-      return void 0;
-    }, [isMobile]);
-    const updateTabScrollThumb = o.useCallback(() => {
-      const container = scrollContainerRef.current;
-      if (!container) return;
-      const visibleWidth = container.clientWidth;
-      const totalWidth = container.scrollWidth;
-      if (totalWidth <= visibleWidth || visibleWidth === 0) {
-        setTabScrollThumb(
-          (prev2) => prev2.scrollable ? { widthPercent: 100, leftPercent: 0, scrollable: false } : prev2
-        );
-        return;
-      }
-      const widthPercent = visibleWidth / totalWidth * 100;
-      const maxScroll = Math.max(totalWidth - visibleWidth, 0);
-      const scrollRatio = maxScroll === 0 ? 0 : container.scrollLeft / maxScroll;
-      const usableTrack = Math.max(100 - widthPercent, 0);
-      const leftPercent = scrollRatio * usableTrack;
-      setTabScrollThumb({
-        widthPercent,
-        leftPercent,
-        scrollable: true
-      });
-    }, []);
-    const updateMobileIndicator = o.useCallback(() => {
-      if (typeof window === "undefined") return;
-      if (!indicatorRef.current || !tabsWrapperRef.current) return;
-      const isMobile2 = window.matchMedia("(max-width: 768px)").matches;
-      if (!isMobile2) {
-        indicatorRef.current.style.width = "0px";
-        indicatorRef.current.style.transform = "translateX(0)";
-        setTabScrollThumb(
-          (prev2) => prev2.scrollable ? { widthPercent: 100, leftPercent: 0, scrollable: false } : prev2
-        );
-        return;
-      }
-      const activeIndex = tabs.findIndex((tab) => tab.id === activeTabId);
-      if (activeIndex === -1) return;
-      const activeButton = tabRefs.current[activeIndex];
-      if (!activeButton) return;
-      const wrapperRect = tabsWrapperRef.current.getBoundingClientRect();
-      const buttonRect = activeButton.getBoundingClientRect();
-      const width = buttonRect.width;
-      const left = buttonRect.left - wrapperRect.left;
-      indicatorRef.current.style.width = `${width}px`;
-      indicatorRef.current.style.transform = `translateX(${left}px)`;
-      updateTabScrollThumb();
-    }, [activeTabId, tabs, updateTabScrollThumb]);
-    o.useEffect(() => {
-      updateMobileIndicator();
-    }, [updateMobileIndicator]);
+    const tabsContainerRef = o.useRef(null);
     o.useEffect(() => {
-      if (typeof window === "undefined") return;
-      const handleResize = () => updateMobileIndicator();
-      window.addEventListener("resize", handleResize);
-      return () => window.removeEventListener("resize", handleResize);
-    }, [updateMobileIndicator]);
-    o.useEffect(() => {
-      const scrollEl = scrollContainerRef.current;
-      if (!scrollEl) return;
-      const handleScroll = () => {
-        updateMobileIndicator();
-        updateTabScrollThumb();
+      const container = tabsContainerRef.current;
+      if (!container) return;
+      const isMobile = window.innerWidth <= 768;
+      if (!isMobile) return;
+      const forceScrollbar = () => {
+        if (container.scrollWidth > container.clientWidth) {
+          container.scrollTop = 1;
+          container.scrollTop = 0;
+          container.scrollLeft = 1;
+          container.scrollLeft = 0;
+        }
       };
-      scrollEl.addEventListener("scroll", handleScroll, { passive: true });
-      return () => scrollEl.removeEventListener("scroll", handleScroll);
-    }, [updateMobileIndicator, updateTabScrollThumb]);
-    o.useEffect(() => {
-      if (isMobile) {
-        updateTabScrollThumb();
-      }
-    }, [isMobile, updateTabScrollThumb, tabs.length]);
-    o.useEffect(() => {
-      if (typeof window === "undefined") return;
-      const media = window.matchMedia("(max-width: 768px)");
-      const setMatch = () => setIsMobile(media.matches);
-      setMatch();
-      media.addEventListener("change", setMatch);
-      return () => media.removeEventListener("change", setMatch);
-    }, []);
+      setTimeout(forceScrollbar, 100);
+      window.addEventListener("resize", forceScrollbar);
+      return () => window.removeEventListener("resize", forceScrollbar);
+    }, [tabs]);
     return /* @__PURE__ */ jsxs(
       "div",
       {
         ref,
-        className: cn("w-full font-normal flex flex-col gap-3 md:flex-row md:items-center md:justify-between", className),
+        className: cn(
+          "w-full font-normal",
+          "flex flex-col-reverse gap-3",
+          "md:flex-row md:items-center md:justify-between",
+          className
+        ),
         ...props,
         children: [
-          /* @__PURE__ */ jsxs(
+          /* @__PURE__ */ jsx(
             "div",
             {
-              ref: tabsWrapperRef,
+              ref: tabsContainerRef,
               className: cn(
-                "relative flex w-full min-w-0 flex-col",
-                "max-[768px]:gap-0",
-                "max-[768px]:order-0",
-                "md:flex-row md:items-center md:justify-between"
+                "flex items-center border-b border-white/10",
+                "overflow-x-auto md:overflow-visible",
+                "[-webkit-overflow-scrolling:touch]",
+                "[scroll-behavior:smooth]",
+                "[touch-action:pan-x]",
+                "md:border-b-0"
               ),
-              style: isMobile ? { gap: 0 } : void 0,
-              children: [
-                /* @__PURE__ */ jsx(
-                  "div",
+              style: { WebkitTapHighlightColor: "transparent" },
+              children: /* @__PURE__ */ jsx("div", { className: "flex min-w-max", children: tabs.map((tab) => {
+                const active = tab.id === activeTabId;
+                return /* @__PURE__ */ jsxs(
+                  "button",
                   {
-                    ref: scrollContainerRef,
+                    type: "button",
+                    onClick: () => onTabChange?.(tab.id),
                     className: cn(
-                      "flex w-full min-w-0 items-center",
-                      "overflow-x-auto md:overflow-visible",
-                      "[-webkit-overflow-scrolling:touch]",
-                      "[scrollbar-width:none]",
-                      "[scroll-behavior:smooth]",
-                      "[touch-action:pan-x]",
-                      "md:border-b md:border-white/10"
+                      "relative whitespace-nowrap",
+                      "px-6 py-4",
+                      "font-normal",
+                      "transition-colors",
+                      "max-[768px]:px-[1.2rem] max-[768px]:py-[0.8rem]",
+                      "max-[480px]:px-4 max-[480px]:py-[0.7rem] max-[480px]:text-[0.9rem]",
+                      active ? "font-semibold text-[var(--color-accent,#e6c87e)]" : "text-white/60 hover:text-white"
                     ),
-                    style: { WebkitTapHighlightColor: "transparent" },
-                    children: /* @__PURE__ */ jsx("div", { className: "flex min-w-max gap-2 lg:gap-4", children: tabs.map((tab, index) => {
-                      const active = tab.id === activeTabId;
-                      return /* @__PURE__ */ jsxs(
-                        "button",
-                        {
-                          ref: (node2) => {
-                            tabRefs.current[index] = node2;
-                          },
-                          type: "button",
-                          onClick: () => onTabChange?.(tab.id),
-                          className: cn(
-                            "relative whitespace-nowrap",
-                            "px-5 py-4 lg:px-6",
-                            "text-[16px]",
-                            "font-medium",
-                            "transition-colors",
-                            "max-[768px]:rounded-full max-[768px]:px-5 max-[768px]:py-3",
-                            "max-[768px]:text-[15px]",
-                            "max-[480px]:px-4 max-[480px]:py-[0.75rem] max-[480px]:text-sm",
-                            active ? "font-semibold text-[var(--color-accent,#e6c87e)] hover:text-[var(--color-accent,#f1d27a)]" : "text-white/65 hover:text-white"
-                          ),
-                          style: {
-                            borderBottom: active ? "2px solid var(--color-accent, #e6c87e)" : "2px solid transparent",
-                            minWidth: "80px",
-                            touchAction: "manipulation"
-                          },
-                          children: [
-                            /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1", children: [
-                              tab.id === "trade" ? /* @__PURE__ */ jsx("span", { className: "hidden h-4 w-4 items-center justify-center rounded-full bg-white/10 text-[11px] text-[var(--color-accent,#e6c87e)] max-[768px]:inline-flex", children: "\u21C5" }) : null,
-                              tab.label
-                            ] }),
-                            tab.hasNotification ? /* @__PURE__ */ jsx(
-                              "span",
-                              {
-                                className: "absolute right-[10px] top-[10px] h-2 w-2 rounded-full animate-pulse",
-                                style: {
-                                  backgroundColor: tab.notificationColor ?? "#f6465d",
-                                  boxShadow: "0 0 0 0 rgba(246, 70, 93, 0.7)"
-                                }
-                              }
-                            ) : null
-                          ]
-                        },
-                        tab.id
-                      );
-                    }) })
-                  }
-                ),
-                /* @__PURE__ */ jsx("div", { className: "pointer-events-none relative hidden h-[3px] w-full min-w-0 overflow-hidden rounded-full bg-white/10 max-[768px]:block", style: { marginBottom: "1px" }, children: /* @__PURE__ */ jsx(
-                  "span",
-                  {
-                    ref: indicatorRef,
-                    className: "absolute left-0 top-0 block h-full rounded-full bg-[var(--color-accent,#e6c87e)] transition-all duration-300 ease-out"
-                  }
-                ) }),
-                /* @__PURE__ */ jsx(
-                  "div",
-                  {
                     style: {
-                      display: isMobile ? "block" : "none",
-                      height: "8px",
-                      width: "100%",
-                      borderRadius: "999px",
-                      background: "rgba(18,19,22,0.85)",
-                      marginTop: "0",
-                      position: "relative"
+                      borderBottom: active ? "2px solid var(--color-accent, #e6c87e)" : "2px solid transparent",
+                      minWidth: "80px",
+                      touchAction: "manipulation"
                     },
-                    children: /* @__PURE__ */ jsx(
-                      "div",
-                      {
-                        style: {
-                          position: "absolute",
-                          top: 0,
-                          left: `${tabScrollThumb.leftPercent}%`,
-                          height: "100%",
-                          borderRadius: "999px",
-                          background: "rgba(92,94,102,0.85)",
-                          width: `${tabScrollThumb.widthPercent}%`,
-                          transition: "left 0.2s ease-out, width 0.2s ease-out, opacity 0.2s ease-out",
-                          opacity: tabScrollThumb.scrollable ? 1 : 0.25
+                    children: [
+                      tab.label,
+                      tab.hasNotification ? /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: "absolute right-[10px] top-[10px] h-2 w-2 rounded-full animate-pulse",
+                          style: {
+                            backgroundColor: tab.notificationColor ?? "#f6465d",
+                            boxShadow: "0 0 0 0 rgba(246, 70, 93, 0.7)"
+                          }
                         }
-                      }
-                    )
-                  }
-                )
-              ]
+                      ) : null
+                    ]
+                  },
+                  tab.id
+                );
+              }) })
             }
           ),
           actions != null && actions.length > 0 ? /* @__PURE__ */ jsx(
             "div",
             {
               className: cn(
-                "flex items-center gap-[4px] md:gap-[10px]",
-                "justify-center md:justify-end",
+                "flex items-center gap-[10px]",
                 "overflow-x-auto md:overflow-visible",
                 "[scrollbar-width:none]",
-                "max-[768px]:w-full max-[768px]:pb-2 max-[768px]:mb-2"
+                "md:justify-end",
+                "max-[768px]:w-full max-[768px]:justify-center max-[768px]:pb-2 max-[768px]:mb-4"
               ),
-              style: actionContainerStyle,
               children: actions.map((action) => /* @__PURE__ */ jsxs(
                 "button",
                 {
@@ -5362,14 +5312,14 @@ var PropertySubheader = o.forwardRef(
                   onClick: action.onClick,
                   className: cn(
                     "flex shrink-0 items-center gap-[5px] whitespace-nowrap",
-                    "rounded-[6px]",
-                    "border border-white/15",
+                    "rounded",
+                    "border border-white/10",
                     "bg-transparent",
-                    "px-3.5 py-1.5 text-[14px] font-medium",
+                    "px-3 py-1.5 text-[14px] font-normal",
                     "transition-all",
+                    "max-[768px]:px-2.5 max-[768px]:py-[5px] max-[768px]:text-[13px]",
                     "hover:bg-white/5 hover:border-[var(--color-accent,#e6c87e)] hover:text-[var(--color-accent,#e6c87e)]"
                   ),
-                  style: actionButtonStyle,
                   children: [
                     action.icon,
                     action.label