@loafmarkets/ui 0.1.113 → 0.1.115

package/dist/index.js

@@ -5577,6 +5577,50 @@ var Header = ({
         }
       ),
       isAuthenticated ? /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center" }, children: [
+        portfolioSummary && isPortfolioBarVisible && (() => {
+          const fmtInline = (n) => n.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 });
+          const isPLPos = portfolioSummary.pnl >= 0;
+          return /* @__PURE__ */ jsxRuntime.jsxs(PortfolioInline, { className: "loaf-portfolio-inline", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(PBMetric, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(PBMetricLabel, { children: "Holdings" }),
+              /* @__PURE__ */ jsxRuntime.jsxs(PBMetricValue, { children: [
+                "$",
+                fmtInline(portfolioSummary.holdings)
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(PBOperator, { children: "+" }),
+            /* @__PURE__ */ jsxRuntime.jsxs(PBMetric, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(PBMetricLabel, { children: "Cash" }),
+              /* @__PURE__ */ jsxRuntime.jsxs(PBMetricValue, { children: [
+                "$",
+                fmtInline(portfolioSummary.cash)
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(PBOperator, { children: "=" }),
+            /* @__PURE__ */ jsxRuntime.jsxs(PBMetric, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(PBMetricLabel, { children: "Portfolio" }),
+              /* @__PURE__ */ jsxRuntime.jsxs(PBMetricValue, { style: { color: "#D4AF37", fontWeight: 700 }, children: [
+                "$",
+                fmtInline(portfolioSummary.portfolioValue)
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(PBDot, {}),
+            /* @__PURE__ */ jsxRuntime.jsxs(PBMetric, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(PBMetricLabel, { children: "P&L" }),
+              /* @__PURE__ */ jsxRuntime.jsxs(PBMetricValue, { $positive: isPLPos, $negative: !isPLPos, children: [
+                isPLPos ? "+" : "",
+                "$",
+                fmtInline(Math.abs(portfolioSummary.pnl)),
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontSize: "0.6rem", marginLeft: "2px", opacity: 0.7 }, children: [
+                  "(",
+                  isPLPos ? "+" : "",
+                  portfolioSummary.pnlPercent.toFixed(2),
+                  "%)"
+                ] })
+              ] })
+            ] })
+          ] });
+        })(),
         portfolioSummary && /* @__PURE__ */ jsxRuntime.jsx(
           PortfolioEyeButton,
           {
@@ -5662,8 +5706,8 @@ var Header = ({
     isAuthenticated && portfolioSummary && isPortfolioBarVisible && (() => {
       const fmt = (n) => n.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 });
       const isPLPositive = portfolioSummary.pnl >= 0;
-      return /* @__PURE__ */ jsxRuntime.jsx(PortfolioBarContainer, { children: /* @__PURE__ */ jsxRuntime.jsxs(PortfolioBarPill, { ref: portfolioPillRef, children: [
-        portfolioArrowLeft !== null && /* @__PURE__ */ jsxRuntime.jsx(PortfolioBarArrow, { style: { left: `${portfolioArrowLeft}px` } }),
+      return /* @__PURE__ */ jsxRuntime.jsx(PortfolioBarContainer, { className: "loaf-portfolio-bar loaf-portfolio-bar-dropdown", children: /* @__PURE__ */ jsxRuntime.jsxs(PortfolioBarPill, { ref: portfolioPillRef, className: "loaf-portfolio-pill", children: [
+        portfolioArrowLeft !== null && /* @__PURE__ */ jsxRuntime.jsx(PortfolioBarArrow, { className: "loaf-portfolio-arrow", style: { left: `${portfolioArrowLeft}px` } }),
         /* @__PURE__ */ jsxRuntime.jsxs(PBMetric, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(PBMetricLabel, { children: "Holdings" }),
           /* @__PURE__ */ jsxRuntime.jsxs(PBMetricValue, { children: [
@@ -6180,7 +6224,7 @@ var PortfolioBarContainer = styled25__default.default.div`
   left: 0;
   right: 0;
   z-index: 999;
-  display: flex;
+  display: none;
   justify-content: flex-end;
   align-items: flex-start;
   padding: 0 5%;
@@ -6199,6 +6243,7 @@ var PortfolioBarContainer = styled25__default.default.div`
   }
 
   @media (max-width: 768px) {
+    display: flex;
     top: calc(46px + 0.5rem);
     padding: 0 0.75rem;
     justify-content: center;
@@ -6258,6 +6303,16 @@ var PortfolioBarArrow = styled25__default.default.div`
   box-shadow: -2px -2px 6px rgba(0, 0, 0, 0.25);
   pointer-events: none;
 `;
+var PortfolioInline = styled25__default.default.div`
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin-right: 0.75rem;
+
+  @media (max-width: 768px) {
+    display: none;
+  }
+`;
 var PBMetric = styled25__default.default.div`
   display: flex;
   flex-direction: column;