kaleido-ui 0.1.107 → 0.1.109

package/dist/web/index.cjs

@@ -1384,6 +1384,7 @@ function StatusBadge({ status, className }) {
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
     "div",
     {
+      "data-slot": "status-badge",
       className: cn(
         "inline-flex items-center gap-1.5 pl-1 pr-2.5 py-1 rounded-full font-medium text-xs",
         bg,
@@ -1844,7 +1845,9 @@ function AssetCard({
                 children: displayShown
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center justify-end gap-1 mt-0.5", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "mt-0.5 flex min-h-6 items-center justify-end gap-1", children: [
+              status && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(StatusBadge, { status }),
+              status && ticker && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-tiny text-muted-foreground", children: "\xB7" }),
               /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "truncate text-tiny font-medium uppercase tracking-wide text-muted-foreground", children: ticker }),
               showYield && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { title: "Yield Generating Asset", className: "text-success/90 flex items-center justify-center bg-success/10 rounded-full p-0.5", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
                 "svg",
@@ -1863,8 +1866,7 @@ function AssetCard({
                   ]
                 }
               ) })
-            ] }),
-            status && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(StatusBadge, { status, className: "mt-2" })
+            ] })
           ] })
         ] })
       ]
@@ -2481,9 +2483,80 @@ function BottomNav({
 // src/web/components/account-status-tabs.tsx
 var import_react7 = require("react");
 var import_jsx_runtime29 = require("react/jsx-runtime");
+function AccountStatusDetails({
+  account,
+  onEdit
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "p-6", "data-testid": `account-status-details-${account.id}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(DialogHeader, { className: "text-left", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex items-start gap-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+        "div",
+        {
+          "data-testid": `account-status-protocol-logo-${account.id}`,
+          className: cn(
+            "flex size-16 shrink-0 items-center justify-center rounded-2xl",
+            account.accentBg
+          ),
+          children: account.detailIcon ?? account.icon
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "text-xxs font-black uppercase tracking-[0.18em] text-muted-foreground", children: account.label }),
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: cn("size-2 rounded-full", account.dotTone) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(DialogTitle, { className: "mt-1 text-xl font-bold text-white", children: account.title }),
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(DialogDescription, { className: "mt-2 text-sm leading-relaxed text-white/60", children: account.description })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "mt-5 grid grid-cols-2 gap-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: cn("rounded-2xl px-4 py-3", account.networkBannerClassName), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "text-icon-xxs font-black uppercase tracking-[0.18em]", children: "Network" }),
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "mt-1 break-words text-sm font-semibold", children: account.networkLabel })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "rounded-2xl bg-muted/40 px-4 py-3", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "text-icon-xxs font-black uppercase tracking-[0.18em] text-white/45", children: "Status" }),
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "mt-1 break-words text-sm font-semibold text-white/90", children: account.state })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { className: "mt-5 text-sm leading-relaxed text-muted-foreground", children: account.detail }),
+    account.details && account.details.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("dl", { className: "mt-5 space-y-2 rounded-2xl bg-muted/25 px-4 py-3", children: account.details.map((item) => /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "grid grid-cols-[max-content_minmax(0,1fr)] gap-3 text-xs", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("dt", { className: "text-muted-foreground", children: item.label }),
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("dd", { className: "min-w-0 break-words text-right font-medium text-white/90", children: item.value })
+    ] }, item.label)) }),
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "mt-5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "text-icon-xxs font-black uppercase tracking-[0.18em] text-white/45", children: "Capabilities" }),
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "mt-3 flex flex-wrap gap-2", children: account.capabilityBullets.map((capability) => /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+        "span",
+        {
+          className: "inline-flex items-center gap-1.5 rounded-full bg-white/8 px-2.5 py-1 text-xxs font-medium text-white/70",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "size-1.5 rounded-full bg-primary/70" }),
+            capability
+          ]
+        },
+        capability
+      )) })
+    ] }),
+    onEdit && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+      Button,
+      {
+        type: "button",
+        "data-testid": `account-status-edit-${account.id}`,
+        onClick: () => onEdit(account.id),
+        className: "mt-6 w-full bg-primary text-primary-foreground hover:bg-primary/90",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Icon, { name: "settings", size: "sm" }),
+          "Edit Settings"
+        ]
+      }
+    )
+  ] });
+}
 function AccountStatusTabs({
   accounts,
-  onSelect
+  onSelect,
+  onEdit
 }) {
   const [selectedAccountId, setSelectedAccountId] = (0, import_react7.useState)(null);
   const selectedAccount = selectedAccountId ? accounts.find((account) => account.id === selectedAccountId) : null;
@@ -2535,53 +2608,16 @@ function AccountStatusTabs({
       {
         open: selectedAccountId !== null,
         onOpenChange: (open) => !open && setSelectedAccountId(null),
-        children: selectedAccount && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(DialogContent, { className: "bg-popover p-0 text-white", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "p-6", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(DialogHeader, { className: "text-left", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex items-start gap-3", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: cn("rounded-2xl p-3", selectedAccount.accentBg), children: selectedAccount.icon }),
-            /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "min-w-0", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "text-xxs font-black uppercase tracking-[0.18em] text-muted-foreground", children: selectedAccount.label }),
-                /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: cn("size-2 rounded-full", selectedAccount.dotTone) })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(DialogTitle, { className: "mt-1 text-xl font-bold text-white", children: selectedAccount.title }),
-              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(DialogDescription, { className: "mt-2 text-sm leading-relaxed text-white/60", children: selectedAccount.description })
-            ] })
-          ] }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "mt-5 grid grid-cols-2 gap-3", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
-              "div",
-              {
-                className: cn(
-                  "rounded-2xl px-4 py-3",
-                  selectedAccount.networkBannerClassName
-                ),
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "text-icon-xxs font-black uppercase tracking-[0.18em]", children: "Network" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "mt-1 text-sm font-semibold", children: selectedAccount.networkLabel })
-                ]
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "rounded-2xl bg-muted/40 px-4 py-3", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "text-icon-xxs font-black uppercase tracking-[0.18em] text-white/45", children: "Status" }),
-              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "mt-1 text-sm font-semibold text-white/90", children: selectedAccount.state })
-            ] })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { className: "mt-5 text-sm leading-relaxed text-muted-foreground", children: selectedAccount.detail }),
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "mt-5", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "text-icon-xxs font-black uppercase tracking-[0.18em] text-white/45", children: "Capabilities" }),
-            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "mt-3 flex flex-wrap gap-2", children: selectedAccount.capabilityBullets.map((capability) => /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
-              "span",
-              {
-                className: "inline-flex items-center gap-1.5 rounded-full bg-white/8 px-2.5 py-1 text-xxs font-medium text-white/70",
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "size-1.5 rounded-full bg-primary/70" }),
-                  capability
-                ]
-              },
-              capability
-            )) })
-          ] })
-        ] }) })
+        children: selectedAccount && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(DialogContent, { className: "bg-popover p-0 text-white", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+          AccountStatusDetails,
+          {
+            account: selectedAccount,
+            onEdit: onEdit ? (id) => {
+              setSelectedAccountId(null);
+              onEdit(id);
+            } : void 0
+          }
+        ) })
       }
     )
   ] });
@@ -3385,6 +3421,19 @@ function WalletAssetList({
 // src/web/components/balance-breakdown.tsx
 var import_react10 = require("react");
 var import_jsx_runtime37 = require("react/jsx-runtime");
+function getRgbBtcBreakdownLabels(accounts) {
+  const rlnConnected = Boolean(accounts.RGB?.connected);
+  const rgbL1Connected = Boolean(accounts.RGB_L1?.connected);
+  const rlnEnabled = rlnConnected || !rgbL1Connected && Boolean(accounts.RGB?.configured);
+  const rgbL1Enabled = rgbL1Connected || !rlnConnected && Boolean(accounts.RGB_L1?.configured);
+  return {
+    onchainLabel: rlnEnabled ? "BTC wallet on RLN" : rgbL1Enabled ? "BTC on RGB L1" : "BTC on-chain",
+    onchainSublabel: rlnEnabled ? "RLN on-chain wallet" : rgbL1Enabled ? "RGB L1 wallet balance" : "Standard Bitcoin balance",
+    showLightning: rlnEnabled,
+    lightningLabel: "BTC channels on RLN",
+    lightningSublabel: "RLN channel balance"
+  };
+}
 function OnchainIcon({ className = "" }) {
   return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
     "span",
@@ -3436,6 +3485,7 @@ function BalanceBreakdown({
 }) {
   const [expanded, setExpanded] = (0, import_react10.useState)(false);
   const fiatTotal = formatFiatValue(totalBTC);
+  const rgbBtcLabels = getRgbBtcBreakdownLabels(accounts);
   return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: `flex flex-col ${compact ? "gap-2" : "gap-3"}`, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
     "div",
     {
@@ -3497,13 +3547,15 @@ function BalanceBreakdown({
               "button",
               {
                 onClick: () => setExpanded(!expanded),
+                "aria-label": expanded ? "Collapse balance breakdown" : "Expand balance breakdown",
+                "aria-expanded": expanded,
                 className: "flex size-7 items-center justify-center rounded-full bg-white/[0.08] transition-all hover:bg-white/[0.12]",
                 children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
                   Icon,
                   {
                     name: expanded ? "expand_less" : "expand_more",
-                    size: "sm",
-                    className: "text-white/60"
+                    size: "md",
+                    className: "size-7 text-white/60"
                   }
                 )
               }
@@ -3522,8 +3574,8 @@ function BalanceBreakdown({
                   icon: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(OnchainIcon, { className: "text-icon-sm" }),
                   iconColor: "text-network-spark",
                   dotColor: "bg-network-spark",
-                  label: "BTC on-chain",
-                  sublabel: "Standard Bitcoin balance",
+                  label: rgbBtcLabels.onchainLabel,
+                  sublabel: rgbBtcLabels.onchainSublabel,
                   amount: btcOnchain,
                   isPending: btcOnchainPending,
                   visible: balanceVisible,
@@ -3531,7 +3583,7 @@ function BalanceBreakdown({
                   formatFiat: formatFiatValue
                 }
               ),
-              (accounts.RGB?.connected || accounts.RGB?.configured) && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+              rgbBtcLabels.showLightning && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
                 NetworkRow,
                 {
                   icon: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
@@ -3544,8 +3596,8 @@ function BalanceBreakdown({
                   ),
                   iconColor: "text-network-lightning",
                   dotColor: "bg-network-lightning",
-                  label: "BTC on RLN",
-                  sublabel: "RLN balance",
+                  label: rgbBtcLabels.lightningLabel,
+                  sublabel: rgbBtcLabels.lightningSublabel,
                   amount: btcLightning,
                   isPending: btcLightningPending,
                   visible: balanceVisible,
@@ -4659,7 +4711,7 @@ function ActivityList({
     return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex flex-col items-center justify-center py-16", children: [
       /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "mb-4 flex size-16 items-center justify-center rounded-full bg-white/5", children: emptyIcon ?? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(DefaultEmptyIcon, { name: "receipt_long" }) }),
       /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("h3", { className: "mb-1 text-base font-semibold", children: hasActiveFilters ? filteredEmptyTitle : emptyTitle }),
-      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { className: "mb-4 max-w-[240px] text-center text-xs text-muted-foreground", children: hasActiveFilters ? filteredEmptyDescription : emptyDescription }),
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { className: "mb-4 max-w-[240px] text-center text-xs text-white/70", children: hasActiveFilters ? filteredEmptyDescription : emptyDescription }),
       hasActiveFilters && onClearFilters ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Button, { variant: "surface", size: "sm", onClick: onClearFilters, children: "Clear Filters" }) : renderEmptyActions?.()
     ] });
   }
@@ -4669,7 +4721,7 @@ function ActivityList({
     return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
       "div",
       {
-        className: "relative overflow-hidden rounded-2xl bg-surface-card bg-gradient-to-b from-white/[0.025] to-primary/[0.035] shadow-inner transition-all animate-in fade-in slide-in-from-bottom-2 duration-500",
+        className: "relative overflow-hidden rounded-2xl bg-card bg-none shadow-inner transition-all animate-in fade-in slide-in-from-bottom-2 duration-500",
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
             TransactionCard,
@@ -4682,7 +4734,7 @@ function ActivityList({
               onSubAmountInfo: item.onSubAmountInfo,
               timestamp: item.timestamp,
               onClick: () => onExpandedChange?.(isExpanded ? null : item.id),
-              className: "relative z-[1]"
+              className: cn("relative z-[1] bg-card", isExpanded && "shadow-none")
             }
           ),
           isExpanded && // -mt-4/pt-4 slides the details up behind the card's bottom
@@ -4714,63 +4766,69 @@ function ActivityFilterBar({
   onClearFilters,
   searchPlaceholder = "Search by txid, asset..."
 }) {
-  return (
-    // All three controls (search input, status dropdown, clear button) share
-    // the same h-11 height and rounded-2xl card radius so the bar reads as
-    // one family with the cards below it.
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex h-11 items-center gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "relative h-full flex-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-          AppIcon,
-          {
-            name: "search",
-            className: "absolute left-3 top-1/2 size-4 -translate-y-1/2 text-white/40"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-          "input",
-          {
-            type: "text",
-            placeholder: searchPlaceholder,
-            value: searchTerm,
-            onChange: (event) => onSearchTermChange(event.target.value),
-            className: "h-full w-full rounded-2xl bg-surface-card pl-9 pr-8 text-xs text-white shadow-inner backdrop-blur-xl transition-all placeholder:text-white/30 focus:bg-surface-elevated focus:outline-none"
-          }
-        ),
-        searchTerm && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-          "button",
-          {
-            type: "button",
-            onClick: () => onSearchTermChange(""),
-            className: "absolute right-2 top-1/2 -translate-y-1/2 text-white/40 transition-colors hover:text-white",
-            children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(AppIcon, { name: "close", className: "size-icon-sm" })
-          }
-        )
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "h-full w-28 shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
-        Select,
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex h-11 items-center gap-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "relative h-full flex-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+        AppIcon,
         {
-          value: statusFilter,
-          onValueChange: (value) => onStatusFilterChange(value),
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(SelectTrigger, { className: "h-full rounded-2xl border-0 bg-surface-card px-3 py-0 text-xs font-bold text-white shadow-inner backdrop-blur-xl hover:bg-surface-elevated focus:ring-0 data-[state=open]:bg-surface-elevated", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(SelectValue, {}) }),
-            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(SelectContent, { className: "bg-popover/95 p-1.5 shadow-popover", children: statusOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(SelectItem, { value: option.value, className: "py-2 text-xs", children: option.label }, option.value)) })
-          ]
+          name: "search",
+          size: "sm",
+          className: "absolute left-3 top-1/2 -translate-y-1/2 text-white/30"
         }
-      ) }),
-      hasActiveFilters && onClearFilters && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-        Button,
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+        "input",
         {
-          variant: "surface",
-          size: "icon-lg",
-          onClick: onClearFilters,
-          title: "Clear Filters",
-          className: "h-11 w-11 shrink-0 rounded-2xl",
-          children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(AppIcon, { name: "close", className: "size-icon-lg" })
+          type: "text",
+          "data-testid": "activity-search",
+          placeholder: searchPlaceholder,
+          value: searchTerm,
+          onChange: (event) => onSearchTermChange(event.target.value),
+          className: "h-full w-full rounded-xl border border-transparent bg-white/5 py-2.5 pl-10 pr-8 text-sm text-white outline-none transition-all placeholder:text-white/25 focus:border-primary/25 focus:bg-white/8"
+        }
+      ),
+      searchTerm && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+        "button",
+        {
+          type: "button",
+          "aria-label": "Clear search",
+          onClick: () => onSearchTermChange(""),
+          className: "absolute right-2 top-1/2 -translate-y-1/2 rounded-md p-1 text-white/40 transition-colors hover:text-white",
+          children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(AppIcon, { name: "close", size: "sm" })
         }
       )
-    ] })
-  );
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "h-full w-28 shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+      Select,
+      {
+        value: statusFilter,
+        onValueChange: (value) => onStatusFilterChange(value),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+            SelectTrigger,
+            {
+              "aria-label": "Filter activity by status",
+              className: "h-full rounded-xl border-0 bg-white/5 px-3 py-0 text-xs font-bold text-white shadow-none hover:bg-white/8 focus:ring-0 data-[state=open]:bg-white/8",
+              children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(SelectValue, {})
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(SelectContent, { className: "bg-popover/95 p-1.5 shadow-popover", children: statusOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(SelectItem, { value: option.value, className: "py-2 text-xs", children: option.label }, option.value)) })
+        ]
+      }
+    ) }),
+    hasActiveFilters && onClearFilters && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+      Button,
+      {
+        variant: "surface",
+        size: "icon-lg",
+        onClick: onClearFilters,
+        "aria-label": "Clear filters",
+        title: "Clear Filters",
+        className: "h-11 w-11 shrink-0 rounded-xl",
+        children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(AppIcon, { name: "close", size: "lg" })
+      }
+    )
+  ] });
 }
 
 // src/web/components/activity-network-filters.tsx
@@ -4793,118 +4851,81 @@ function ActivityNetworkFilters({
   filters,
   activeFilter,
   onChange,
-  className
+  className,
+  ariaLabel = "Filter activity by network"
 }) {
   if (filters.length <= 1) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: cn("flex gap-1.5 overflow-x-auto py-0.5 no-scrollbar", className), children: filters.map((filter) => {
-    const isActive = activeFilter === filter.value;
-    return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
-      "button",
-      {
-        type: "button",
-        onClick: () => onChange(filter.value),
-        className: cn(
-          // `leading-none` on the button normalizes the line-box for
-          // both the icon span and the label span; without it the
-          // icon (now `leading-none` from Icon primitive) and the text
-          // (default leading) get center-aligned along different
-          // visual axes and the glyph drifts above the text.
-          "inline-flex shrink-0 items-center gap-1.5 rounded-full px-2.5 py-1.5 text-xxs font-bold uppercase tracking-wider leading-none transition-all active:scale-95",
-          isActive ? "bg-primary/15 text-primary shadow-inner hover:bg-primary/20" : "bg-surface-card text-white/45 hover:bg-surface-elevated hover:text-white/80"
-        ),
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-            "span",
-            {
-              className: cn(
-                "flex items-center justify-center",
-                isActive ? "opacity-100" : "scale-90 opacity-70"
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+    "div",
+    {
+      role: "group",
+      "aria-label": ariaLabel,
+      className: cn("flex gap-1.5 overflow-x-auto pb-0.5 no-scrollbar", className),
+      children: filters.map((filter) => {
+        const isActive = activeFilter === filter.value;
+        return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+          "button",
+          {
+            type: "button",
+            "aria-pressed": isActive,
+            onClick: () => onChange(filter.value),
+            className: cn(
+              "flex shrink-0 items-center gap-1 rounded-full px-2.5 py-1.5 text-xxs font-bold uppercase tracking-wider transition-all",
+              isActive ? "bg-primary/15 text-primary ring-1 ring-primary/20" : "bg-white/5 text-muted-foreground hover:bg-white/8 hover:text-white"
+            ),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+                "span",
+                {
+                  "aria-hidden": true,
+                  className: "flex size-3 items-center justify-center",
+                  children: filter.icon ?? getActivityNetworkFilterIcon(filter.value)
+                }
               ),
-              children: filter.icon ?? getActivityNetworkFilterIcon(filter.value)
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { children: filter.label })
-        ]
-      },
-      filter.value
-    );
-  }) });
+              filter.label
+            ]
+          },
+          filter.value
+        );
+      })
+    }
+  );
 }
 
 // src/web/components/activity-type-tabs.tsx
 var import_jsx_runtime44 = require("react/jsx-runtime");
 function ActivityTypeTabs({ counts = {} }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(TabsList, { className: "grid h-12 w-full grid-cols-4 gap-1 rounded-2xl bg-surface-card p-1 backdrop-blur-xl", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
-      TabsTrigger,
-      {
-        value: "all",
-        className: "h-full rounded-xl px-2 text-xs font-bold tracking-wide transition-all data-[state=active]:bg-surface-elevated data-[state=active]:text-white",
-        children: [
-          "All",
-          counts.all ? /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("span", { className: "ml-1 opacity-60", children: [
-            "(",
-            counts.all,
-            ")"
-          ] }) : null
-        ]
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
-      TabsTrigger,
-      {
-        value: "received",
-        className: "group h-full rounded-xl px-1.5 text-xs font-bold tracking-wide transition-all hover:text-tx-receive data-[state=active]:bg-tx-receive/15 data-[state=active]:text-tx-receive data-[state=active]:hover:bg-tx-receive/20 data-[state=active]:hover:text-tx-receive",
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-            AppIcon,
-            {
-              name: "receive",
-              size: "sm",
-              className: "mr-1 shrink-0 leading-none text-muted-foreground transition-colors group-hover:text-tx-receive group-data-[state=active]:text-tx-receive"
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { children: "In" })
-        ]
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
-      TabsTrigger,
-      {
-        value: "sent",
-        className: "group h-full rounded-xl px-1.5 text-xs font-bold tracking-wide transition-all hover:text-tx-sent data-[state=active]:bg-tx-sent/15 data-[state=active]:text-tx-sent data-[state=active]:hover:bg-tx-sent/20 data-[state=active]:hover:text-tx-sent",
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-            AppIcon,
-            {
-              name: "send",
-              size: "sm",
-              className: "mr-1 shrink-0 leading-none text-muted-foreground transition-colors group-hover:text-tx-sent group-data-[state=active]:text-tx-sent"
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { children: "Out" })
-        ]
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
-      TabsTrigger,
-      {
-        value: "swaps",
-        className: "group h-full rounded-xl px-1.5 text-xs font-bold tracking-wide transition-all hover:text-network-arkade data-[state=active]:bg-network-arkade/15 data-[state=active]:text-network-arkade data-[state=active]:hover:bg-network-arkade/20 data-[state=active]:hover:text-network-arkade",
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-            AppIcon,
-            {
-              name: "swap",
-              size: "sm",
-              className: "mr-1 shrink-0 leading-none text-muted-foreground transition-colors group-hover:text-network-arkade group-data-[state=active]:text-network-arkade"
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { children: "Swaps" })
-        ]
-      }
-    )
-  ] });
+  const actions = [
+    { value: "all", label: "All" },
+    { value: "received", label: "In", icon: "receive", actionIcon: "call_received" },
+    { value: "swaps", label: "Swap", icon: "swap", actionIcon: "swap_horiz" },
+    { value: "sent", label: "Out", icon: "send", actionIcon: "arrow_outward" }
+  ];
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(TabsList, { className: "grid h-12 w-full grid-cols-4 gap-1 rounded-2xl bg-surface-card p-1 backdrop-blur-xl", children: actions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+    TabsTrigger,
+    {
+      value: action.value,
+      "data-action-icon": action.actionIcon,
+      className: "group h-full rounded-xl px-1.5 text-xs font-bold tracking-wide text-muted-foreground transition-all hover:text-primary data-[state=active]:bg-primary/15 data-[state=active]:text-primary data-[state=active]:hover:bg-primary/20 data-[state=active]:hover:text-primary",
+      children: [
+        action.icon && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+          AppIcon,
+          {
+            name: action.icon,
+            size: "sm",
+            className: "mr-1 shrink-0 leading-none text-muted-foreground transition-colors group-hover:text-primary group-data-[state=active]:text-primary"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { children: action.label }),
+        action.value === "all" && counts.all ? /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("span", { className: "ml-1", children: [
+          "(",
+          counts.all,
+          ")"
+        ] }) : null
+      ]
+    },
+    action.value
+  )) });
 }
 
 // src/web/components/activity-detail-row.tsx