@burdenoff/microfe-channel 2026.608.1 → 2026.624.2

package/dist/channel/modules/channels/pages/ChannelUsersPage.js

@@ -5,18 +5,19 @@ import { CHANNEL_PERMISSIONS as r } from "../../../constants/permissions.js";
 import { useExportChannelUsers as i } from "../hooks/useExport.js";
 import { useCallback as a, useEffect as o, useRef as s, useState as c } from "react";
 import { useI18n as l } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
-import { AlertCircle as u, ArrowLeft as d, Bell as f, BellOff as p, CheckCircle2 as m, ChevronLeft as ee, ChevronRight as h, Clock as g, Download as _, Loader2 as v, RefreshCw as y, User as b, UserCheck as x, XCircle as S } from "lucide-react";
-import { useNavigate as C, useParams as w } from "react-router-dom";
-import { Fragment as T, jsx as E, jsxs as D } from "react/jsx-runtime";
+import { AlertCircle as u, ArrowLeft as d, Bell as f, BellOff as p, CheckCircle2 as m, ChevronLeft as h, ChevronRight as g, Clock as _, Download as v, Loader2 as y, RefreshCw as ee, User as te, UserCheck as ne, XCircle as b } from "lucide-react";
+import { useNavigate as x, useParams as S } from "react-router-dom";
+import { Fragment as C, jsx as w, jsxs as T } from "react/jsx-runtime";
+import { ResponsiveTable as E } from "@burdenoff/fe-libs/ui";
 //#region src/channel/modules/channels/pages/ChannelUsersPage.tsx
-var O = {
+var D = {
 	ONLINE: {
 		label: "Online",
 		color: "text-status-success-text"
 	},
 	OFFLINE: {
 		label: "Offline",
-		color: "text-muted-foreground"
+		color: "text-text-secondary"
 	},
 	AWAY: {
 		label: "Away",
@@ -26,11 +27,11 @@ var O = {
 		label: "Do Not Disturb",
 		color: "text-status-error-text"
 	}
-}, k = {
+}, O = {
 	PENDING: {
 		label: "Pending",
 		color: "text-status-warning-text bg-status-warning-bg-subtle",
-		icon: g
+		icon: _
 	},
 	APPROVED: {
 		label: "Approved",
@@ -39,356 +40,329 @@ var O = {
 	},
 	EXPIRED: {
 		label: "Expired",
-		color: "text-muted-foreground bg-muted",
-		icon: S
+		color: "text-text-secondary bg-bg-sunken",
+		icon: b
 	}
 };
-function A() {
-	let { channelId: m } = w(), g = C(), { t: A } = l(), j = (e, t) => {
-		let n = A(e);
+function k() {
+	let { channelId: m } = S(), _ = x(), { t: k } = l(), A = (e, t) => {
+		let n = k(e);
 		return n === e ? t : n;
-	}, { organizationId: M } = e(), { triggerExport: te, isExporting: N, exportError: P } = i(M ?? void 0, m), [F, I] = c(!0), [L, R] = c([]), [z, B] = c(25), [V, H] = c(0), [U, W] = c(0), { channel: G, isLoading: K, error: q, fetchUserPlatformConnections: J } = t(m), Y = a(async (e = 0) => {
+	}, { organizationId: j } = e(), { triggerExport: re, isExporting: M, exportError: N } = i(j ?? void 0, m), [P, F] = c(!0), [I, L] = c([]), [R, z] = c(25), [B, V] = c(0), [H, U] = c(0), { channel: W, isLoading: G, error: K, fetchUserPlatformConnections: q } = t(m), J = a(async (e = 0) => {
 		if (m) {
-			I(!0);
+			F(!0);
 			try {
-				let t = await J(z, e * z);
-				R(t.items), H(t.total);
+				let t = await q(R, e * R);
+				L(t.items), V(t.total);
 			} finally {
-				I(!1);
+				F(!1);
 			}
 		}
 	}, [
 		m,
-		J,
-		z
-	]), X = s(Y);
+		q,
+		R
+	]), Y = s(J);
 	o(() => {
-		X.current = Y;
+		Y.current = J;
 	});
-	let Z = s(!0), Q = s(!1);
+	let X = s(!0), Z = s(!1);
 	o(() => {
 		Promise.resolve().then(() => {
-			Q.current = !0, W(0), X.current(0).finally(() => {
-				Q.current = !1;
+			Z.current = !0, U(0), Y.current(0).finally(() => {
+				Z.current = !1;
 			});
 		});
-	}, [z]), o(() => {
-		if (Z.current) {
-			Z.current = !1;
+	}, [R]), o(() => {
+		if (X.current) {
+			X.current = !1;
 			return;
 		}
-		Q.current || Promise.resolve().then(() => X.current(U));
-	}, [U]);
-	let $ = Math.max(1, Math.ceil(V / z)), ne = U > 0, re = U < $ - 1, ie = (e) => O[e] || O.OFFLINE, ae = (e) => k[e] || k.EXPIRED;
-	return K ? /* @__PURE__ */ E("div", {
+		Z.current || Promise.resolve().then(() => Y.current(H));
+	}, [H]);
+	let Q = Math.max(1, Math.ceil(B / R)), $ = H > 0, ie = H < Q - 1, ae = (e) => D[e] || D.OFFLINE, oe = (e) => O[e] || O.EXPIRED, se = [
+		{
+			key: "user",
+			header: A("channel.user", "User"),
+			priority: "primary",
+			cell: (e) => /* @__PURE__ */ T("div", {
+				className: "flex items-center gap-3",
+				children: [/* @__PURE__ */ w("div", {
+					className: "size-8 bg-accent-primary/10 rounded-full flex items-center justify-center",
+					children: /* @__PURE__ */ w(te, {
+						size: 16,
+						className: "text-accent-primary"
+					})
+				}), /* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("p", {
+					className: "text-sm font-medium text-text-primary",
+					children: e.externalDisplayName || "Unknown"
+				}), e.externalUsername && /* @__PURE__ */ w("p", {
+					className: "text-xs text-text-secondary",
+					children: e.externalUsername
+				})] })]
+			})
+		},
+		{
+			key: "platformId",
+			header: A("channel.platformId", "Platform ID"),
+			priority: "secondary",
+			cellClassName: "text-sm font-mono text-text-secondary",
+			cell: (e) => e.externalUserId
+		},
+		{
+			key: "source",
+			header: A("channel.source", "Source"),
+			priority: "secondary",
+			cell: (e) => /* @__PURE__ */ w("span", {
+				className: "text-xs text-text-secondary bg-bg-sunken px-2 py-1 rounded",
+				children: e.source
+			})
+		},
+		{
+			key: "status",
+			header: A("channel.status", "Status"),
+			priority: "primary",
+			cell: (e) => {
+				let t = ae(e.presenceStatus);
+				return /* @__PURE__ */ T("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ w("span", { className: `w-2 h-2 rounded-full ${t.color.replace("text-", "bg-")}` }), /* @__PURE__ */ w("span", {
+						className: `text-sm ${t.color}`,
+						children: t.label
+					})]
+				});
+			}
+		},
+		{
+			key: "pairing",
+			header: A("channel.pairing", "Pairing"),
+			priority: "secondary",
+			cell: (e) => {
+				let t = e.pairingStatus ? oe(e.pairingStatus) : null, n = t?.icon ?? b;
+				return e.pairingStatus && t ? /* @__PURE__ */ T("span", {
+					className: `inline-flex items-center gap-1 text-xs px-2 py-1 rounded ${t.color}`,
+					children: [/* @__PURE__ */ w(n, { size: 12 }), t.label]
+				}) : /* @__PURE__ */ w("span", {
+					className: "text-xs text-text-secondary",
+					children: "-"
+				});
+			}
+		},
+		{
+			key: "notifications",
+			header: A("channel.notifications", "Notifications"),
+			priority: "secondary",
+			cell: (e) => e.notificationsEnabled ? /* @__PURE__ */ T("span", {
+				className: "inline-flex items-center gap-1",
+				children: [/* @__PURE__ */ w(f, {
+					size: 16,
+					className: "text-status-success-text",
+					"aria-hidden": "true"
+				}), /* @__PURE__ */ w("span", {
+					className: "sr-only",
+					children: A("channel.enabled", "Enabled")
+				})]
+			}) : /* @__PURE__ */ T("span", {
+				className: "inline-flex items-center gap-1",
+				children: [/* @__PURE__ */ w(p, {
+					size: 16,
+					className: "text-text-secondary",
+					"aria-hidden": "true"
+				}), /* @__PURE__ */ w("span", {
+					className: "sr-only",
+					children: A("channel.disabled", "Disabled")
+				})]
+			})
+		},
+		{
+			key: "dmAllowed",
+			header: A("channel.dmAllowed", "DM Allowed"),
+			priority: "secondary",
+			cell: (e) => e.dmAllowed ? /* @__PURE__ */ T("span", {
+				className: "inline-flex items-center gap-1 text-sm text-status-success-text",
+				children: [/* @__PURE__ */ w(ne, { size: 16 }), A("channel.allowed", "Allowed")]
+			}) : /* @__PURE__ */ T("span", {
+				className: "inline-flex items-center gap-1 text-sm text-text-secondary",
+				children: [/* @__PURE__ */ w(b, { size: 16 }), A("channel.blocked", "Blocked")]
+			})
+		}
+	];
+	return G ? /* @__PURE__ */ w("div", {
 		className: "flex items-center justify-center min-h-screen",
-		children: /* @__PURE__ */ E(v, {
+		children: /* @__PURE__ */ w(y, {
 			size: 32,
 			className: "animate-spin text-accent-primary"
 		})
-	}) : q || !G ? /* @__PURE__ */ E("div", {
+	}) : K || !W ? /* @__PURE__ */ w("div", {
 		className: "p-6",
-		children: /* @__PURE__ */ D("div", {
+		children: /* @__PURE__ */ T("div", {
 			className: "flex items-center gap-3 p-4 bg-status-error-bg-subtle border border-status-error-border rounded-lg",
 			children: [
-				/* @__PURE__ */ E(u, {
+				/* @__PURE__ */ w(u, {
 					size: 20,
 					className: "text-status-error-text"
 				}),
-				/* @__PURE__ */ E("div", { children: /* @__PURE__ */ E("p", {
+				/* @__PURE__ */ w("div", { children: /* @__PURE__ */ w("p", {
 					className: "text-sm font-medium text-status-error-text",
-					children: q || "Channel not found"
+					children: K || "Channel not found"
 				}) }),
-				/* @__PURE__ */ E("button", {
+				/* @__PURE__ */ w("button", {
 					type: "button",
-					onClick: () => g(`/channels/${m}`),
+					onClick: () => _(`/channels/${m}`),
 					className: "ml-auto px-3 py-1 text-sm text-status-error-text hover:bg-status-error-bg-subtle rounded transition-colors",
 					children: "Go Back"
 				})
 			]
 		})
-	}) : /* @__PURE__ */ E(n, {
+	}) : /* @__PURE__ */ w(n, {
 		permission: r.USER_PLATFORM_CONNECTION_READ,
-		children: /* @__PURE__ */ D("div", {
+		children: /* @__PURE__ */ T("div", {
 			className: "space-y-6 p-3 sm:p-6",
 			children: [
-				/* @__PURE__ */ D("div", {
+				/* @__PURE__ */ T("div", {
 					className: "flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between",
-					children: [/* @__PURE__ */ D("div", {
+					children: [/* @__PURE__ */ T("div", {
 						className: "flex items-center gap-3",
-						children: [/* @__PURE__ */ E("button", {
+						children: [/* @__PURE__ */ w("button", {
 							type: "button",
-							onClick: () => g(`/channels/${m}`),
-							"aria-label": j("channel.backToChannel", "Back to channel"),
-							className: "p-2 text-muted-foreground hover:text-foreground hover:bg-muted rounded-lg transition-colors",
-							children: /* @__PURE__ */ E(d, {
+							onClick: () => _(`/channels/${m}`),
+							"aria-label": A("channel.backToChannel", "Back to channel"),
+							className: "p-2 text-text-secondary hover:text-text-primary hover:bg-bg-sunken rounded-lg transition-colors",
+							children: /* @__PURE__ */ w(d, {
 								size: 20,
 								"aria-hidden": "true"
 							})
-						}), /* @__PURE__ */ D("div", { children: [/* @__PURE__ */ E("h1", {
-							className: "text-xl sm:text-2xl font-bold text-foreground",
-							children: j("channel.channelUsers", "Channel Users")
-						}), /* @__PURE__ */ D("p", {
-							className: "text-sm text-muted-foreground mt-1",
-							children: [G.name, " - User connections"]
+						}), /* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("h1", {
+							className: "text-xl sm:text-2xl font-bold text-text-primary",
+							children: A("channel.channelUsers", "Channel Users")
+						}), /* @__PURE__ */ T("p", {
+							className: "text-sm text-text-secondary mt-1",
+							children: [W.name, " - User connections"]
 						})] })]
-					}), /* @__PURE__ */ D("div", {
+					}), /* @__PURE__ */ T("div", {
 						className: "flex items-center gap-3",
 						children: [
-							/* @__PURE__ */ D("select", {
-								value: z,
-								onChange: (e) => B(Number(e.target.value)),
-								className: "px-3 py-2 text-sm bg-surface border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-accent-primary/50 text-foreground",
+							/* @__PURE__ */ T("select", {
+								value: R,
+								onChange: (e) => z(Number(e.target.value)),
+								className: "px-3 py-2 text-sm bg-surface border border-border-subtle rounded-lg focus:outline-none focus:ring-2 focus:ring-accent-primary/50 text-text-primary",
 								children: [
-									/* @__PURE__ */ E("option", {
+									/* @__PURE__ */ w("option", {
 										value: 10,
 										children: "10 results"
 									}),
-									/* @__PURE__ */ E("option", {
+									/* @__PURE__ */ w("option", {
 										value: 25,
 										children: "25 results"
 									}),
-									/* @__PURE__ */ E("option", {
+									/* @__PURE__ */ w("option", {
 										value: 50,
 										children: "50 results"
 									}),
-									/* @__PURE__ */ E("option", {
+									/* @__PURE__ */ w("option", {
 										value: 100,
 										children: "100 results"
 									})
 								]
 							}),
-							/* @__PURE__ */ D("button", {
+							/* @__PURE__ */ T("button", {
 								type: "button",
-								onClick: () => void Y(U),
-								disabled: F,
-								className: "flex items-center gap-2 px-4 py-2 text-sm font-medium text-muted-foreground hover:text-foreground hover:bg-muted rounded-lg transition-colors disabled:opacity-50",
-								children: [/* @__PURE__ */ E(y, {
+								onClick: () => void J(H),
+								disabled: P,
+								className: "flex items-center gap-2 px-4 py-2 text-sm font-medium text-text-secondary hover:text-text-primary hover:bg-bg-sunken rounded-lg transition-colors disabled:opacity-50",
+								children: [/* @__PURE__ */ w(ee, {
 									size: 16,
-									className: F ? "animate-spin" : ""
-								}), j("channel.refresh", "Refresh")]
+									className: P ? "animate-spin" : ""
+								}), A("channel.refresh", "Refresh")]
 							}),
-							/* @__PURE__ */ E(n, {
+							/* @__PURE__ */ w(n, {
 								permission: r.CHANNEL_USER_EXPORT,
-								children: /* @__PURE__ */ D("button", {
+								children: /* @__PURE__ */ T("button", {
 									type: "button",
-									onClick: () => void te(),
-									disabled: N,
-									className: "flex items-center gap-2 px-4 py-2 text-sm font-medium text-fg border border-border hover:bg-bg-elevated rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
-									title: j("channel.exportCSV", "Export to CSV"),
-									children: [N ? /* @__PURE__ */ E(v, {
+									onClick: () => void re(),
+									disabled: M,
+									className: "flex items-center gap-2 px-4 py-2 text-sm font-medium text-fg border border-border-subtle hover:bg-bg-elevated rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
+									title: A("channel.exportCSV", "Export to CSV"),
+									children: [M ? /* @__PURE__ */ w(y, {
 										size: 16,
 										className: "animate-spin"
-									}) : /* @__PURE__ */ E(_, { size: 16 }), j("channel.export", "Export")]
+									}) : /* @__PURE__ */ w(v, { size: 16 }), A("channel.export", "Export")]
 								})
 							})
 						]
 					})]
 				}),
-				P && /* @__PURE__ */ D("div", {
+				N && /* @__PURE__ */ T("div", {
 					className: "p-4 bg-status-error-bg-subtle border border-status-error-border rounded-lg flex items-center gap-3",
-					children: [/* @__PURE__ */ E(u, {
+					children: [/* @__PURE__ */ w(u, {
 						size: 20,
 						className: "text-status-error-text"
-					}), /* @__PURE__ */ E("p", {
+					}), /* @__PURE__ */ w("p", {
 						className: "text-sm text-status-error-text flex-1",
-						children: P
+						children: N
 					})]
 				}),
-				/* @__PURE__ */ E("div", {
-					className: "p-4 bg-surface border border-border rounded-lg",
-					children: /* @__PURE__ */ E("p", {
-						className: "text-sm text-muted-foreground",
+				/* @__PURE__ */ w("div", {
+					className: "p-4 bg-surface border border-border-subtle rounded-lg",
+					children: /* @__PURE__ */ w("p", {
+						className: "text-sm text-text-secondary",
 						children: "Users connected to this channel through OAuth or pairing. Manage notification preferences and DM authorization here."
 					})
 				}),
-				/* @__PURE__ */ E("div", {
-					className: "bg-surface border border-border rounded-lg overflow-hidden",
-					children: /* @__PURE__ */ E("div", {
-						className: "overflow-x-auto min-w-full",
-						children: /* @__PURE__ */ D("table", {
-							className: "w-full min-w-[800px]",
-							children: [/* @__PURE__ */ E("thead", {
-								className: "bg-muted/50 border-b border-border",
-								children: /* @__PURE__ */ D("tr", { children: [
-									/* @__PURE__ */ E("th", {
-										className: "px-4 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider",
-										children: j("channel.user", "User")
-									}),
-									/* @__PURE__ */ E("th", {
-										className: "px-4 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider",
-										children: j("channel.platformId", "Platform ID")
-									}),
-									/* @__PURE__ */ E("th", {
-										className: "px-4 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider",
-										children: j("channel.source", "Source")
-									}),
-									/* @__PURE__ */ E("th", {
-										className: "px-4 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider",
-										children: j("channel.status", "Status")
-									}),
-									/* @__PURE__ */ E("th", {
-										className: "px-4 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider",
-										children: j("channel.pairing", "Pairing")
-									}),
-									/* @__PURE__ */ E("th", {
-										className: "px-4 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider",
-										children: j("channel.notifications", "Notifications")
-									}),
-									/* @__PURE__ */ E("th", {
-										className: "px-4 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider",
-										children: j("channel.dmAllowed", "DM Allowed")
-									})
-								] })
-							}), /* @__PURE__ */ E("tbody", {
-								className: "divide-y divide-border",
-								children: L.length === 0 ? /* @__PURE__ */ E("tr", { children: /* @__PURE__ */ E("td", {
-									colSpan: 7,
-									className: "px-4 py-8 text-center text-muted-foreground",
-									children: j("channel.noUsersConnected", "No users connected to this channel")
-								}) }) : L.map((e) => {
-									let t = ie(e.presenceStatus), n = e.pairingStatus ? ae(e.pairingStatus) : null, r = n?.icon ?? S;
-									return /* @__PURE__ */ D("tr", {
-										className: "hover:bg-muted/30 transition-colors",
-										children: [
-											/* @__PURE__ */ E("td", {
-												className: "px-4 py-3",
-												children: /* @__PURE__ */ D("div", {
-													className: "flex items-center gap-3",
-													children: [/* @__PURE__ */ E("div", {
-														className: "size-8 bg-accent-primary/10 rounded-full flex items-center justify-center",
-														children: /* @__PURE__ */ E(b, {
-															size: 16,
-															className: "text-accent-primary"
-														})
-													}), /* @__PURE__ */ D("div", { children: [/* @__PURE__ */ E("p", {
-														className: "text-sm font-medium text-foreground",
-														children: e.externalDisplayName || "Unknown"
-													}), e.externalUsername && /* @__PURE__ */ E("p", {
-														className: "text-xs text-muted-foreground",
-														children: e.externalUsername
-													})] })]
-												})
-											}),
-											/* @__PURE__ */ E("td", {
-												className: "px-4 py-3 text-sm font-mono text-muted-foreground",
-												children: e.externalUserId
-											}),
-											/* @__PURE__ */ E("td", {
-												className: "px-4 py-3",
-												children: /* @__PURE__ */ E("span", {
-													className: "text-xs text-muted-foreground bg-muted px-2 py-1 rounded",
-													children: e.source
-												})
-											}),
-											/* @__PURE__ */ E("td", {
-												className: "px-4 py-3",
-												children: /* @__PURE__ */ D("div", {
-													className: "flex items-center gap-2",
-													children: [/* @__PURE__ */ E("span", { className: `w-2 h-2 rounded-full ${t.color.replace("text-", "bg-")}` }), /* @__PURE__ */ E("span", {
-														className: `text-sm ${t.color}`,
-														children: t.label
-													})]
-												})
-											}),
-											/* @__PURE__ */ E("td", {
-												className: "px-4 py-3",
-												children: e.pairingStatus && n ? /* @__PURE__ */ D("span", {
-													className: `inline-flex items-center gap-1 text-xs px-2 py-1 rounded ${n.color}`,
-													children: [/* @__PURE__ */ E(r, { size: 12 }), n.label]
-												}) : /* @__PURE__ */ E("span", {
-													className: "text-xs text-muted-foreground",
-													children: "-"
-												})
-											}),
-											/* @__PURE__ */ E("td", {
-												className: "px-4 py-3",
-												children: e.notificationsEnabled ? /* @__PURE__ */ D("span", {
-													className: "inline-flex items-center gap-1",
-													children: [/* @__PURE__ */ E(f, {
-														size: 16,
-														className: "text-status-success-text",
-														"aria-hidden": "true"
-													}), /* @__PURE__ */ E("span", {
-														className: "sr-only",
-														children: j("channel.enabled", "Enabled")
-													})]
-												}) : /* @__PURE__ */ D("span", {
-													className: "inline-flex items-center gap-1",
-													children: [/* @__PURE__ */ E(p, {
-														size: 16,
-														className: "text-muted-foreground",
-														"aria-hidden": "true"
-													}), /* @__PURE__ */ E("span", {
-														className: "sr-only",
-														children: j("channel.disabled", "Disabled")
-													})]
-												})
-											}),
-											/* @__PURE__ */ E("td", {
-												className: "px-4 py-3",
-												children: e.dmAllowed ? /* @__PURE__ */ D("span", {
-													className: "inline-flex items-center gap-1 text-sm text-status-success-text",
-													children: [/* @__PURE__ */ E(x, { size: 16 }), j("channel.allowed", "Allowed")]
-												}) : /* @__PURE__ */ D("span", {
-													className: "inline-flex items-center gap-1 text-sm text-muted-foreground",
-													children: [/* @__PURE__ */ E(S, { size: 16 }), j("channel.blocked", "Blocked")]
-												})
-											})
-										]
-									}, e.id);
-								})
-							})]
-						})
-					})
+				/* @__PURE__ */ w(E, {
+					columns: se,
+					data: I,
+					rowKey: (e) => e.id,
+					emptyState: A("channel.noUsersConnected", "No users connected to this channel"),
+					className: "bg-surface border border-border-subtle rounded-lg"
 				}),
-				/* @__PURE__ */ D("div", {
+				/* @__PURE__ */ T("div", {
 					className: "flex items-center justify-between",
-					children: [/* @__PURE__ */ E("p", {
-						className: "text-sm text-muted-foreground",
-						children: V > 0 && /* @__PURE__ */ D(T, { children: [
-							j("channel.showing", "Showing"),
+					children: [/* @__PURE__ */ w("p", {
+						className: "text-sm text-text-secondary",
+						children: B > 0 && /* @__PURE__ */ T(C, { children: [
+							A("channel.showing", "Showing"),
 							" ",
-							/* @__PURE__ */ D("span", {
+							/* @__PURE__ */ T("span", {
 								className: "font-medium",
 								children: [
-									U * z + 1,
+									H * R + 1,
 									"–",
-									Math.min((U + 1) * z, V)
+									Math.min((H + 1) * R, B)
 								]
 							}),
 							" ",
-							j("channel.of", "of"),
+							A("channel.of", "of"),
 							" ",
-							/* @__PURE__ */ E("span", {
+							/* @__PURE__ */ w("span", {
 								className: "font-medium",
-								children: V
+								children: B
 							})
 						] })
-					}), /* @__PURE__ */ D("div", {
+					}), /* @__PURE__ */ T("div", {
 						className: "flex items-center gap-2",
 						children: [
-							/* @__PURE__ */ D("button", {
+							/* @__PURE__ */ T("button", {
 								type: "button",
-								onClick: () => W((e) => Math.max(0, e - 1)),
-								disabled: !ne || F,
-								className: "flex items-center gap-1 px-3 py-1.5 text-sm border border-border rounded-lg hover:bg-muted transition-colors disabled:opacity-40 disabled:cursor-not-allowed",
-								children: [/* @__PURE__ */ E(ee, { size: 16 }), j("channel.previous", "Previous")]
+								onClick: () => U((e) => Math.max(0, e - 1)),
+								disabled: !$ || P,
+								className: "flex items-center gap-1 px-3 py-1.5 text-sm border border-border-subtle rounded-lg hover:bg-bg-sunken transition-colors disabled:opacity-40 disabled:cursor-not-allowed",
+								children: [/* @__PURE__ */ w(h, { size: 16 }), A("channel.previous", "Previous")]
 							}),
-							/* @__PURE__ */ D("span", {
-								className: "text-sm text-muted-foreground",
+							/* @__PURE__ */ T("span", {
+								className: "text-sm text-text-secondary",
 								children: [
-									U + 1,
+									H + 1,
 									" / ",
-									$
+									Q
 								]
 							}),
-							/* @__PURE__ */ D("button", {
+							/* @__PURE__ */ T("button", {
 								type: "button",
-								onClick: () => W((e) => Math.min($ - 1, e + 1)),
-								disabled: !re || F,
-								className: "flex items-center gap-1 px-3 py-1.5 text-sm border border-border rounded-lg hover:bg-muted transition-colors disabled:opacity-40 disabled:cursor-not-allowed",
-								children: [j("channel.next", "Next"), /* @__PURE__ */ E(h, { size: 16 })]
+								onClick: () => U((e) => Math.min(Q - 1, e + 1)),
+								disabled: !ie || P,
+								className: "flex items-center gap-1 px-3 py-1.5 text-sm border border-border-subtle rounded-lg hover:bg-bg-sunken transition-colors disabled:opacity-40 disabled:cursor-not-allowed",
+								children: [A("channel.next", "Next"), /* @__PURE__ */ w(g, { size: 16 })]
 							})
 						]
 					})]
@@ -398,6 +372,6 @@ function A() {
 	});
 }
 //#endregion
-export { A as ChannelUsersPage };
+export { k as ChannelUsersPage };
 
 //# sourceMappingURL=ChannelUsersPage.js.map