@burdenoff/microfe-channel 2026.510.112

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

@@ -0,0 +1,604 @@
+import { useChannel as e } from "../../../providers/ChannelProvider.js";
+import { nativeConfirm as t, nativeImpact as n, nativeNotify as r } from "../../../../utils/nativeBridge.js";
+import { reportShellError as i, subscribeShellEvent as a } from "../../../utils/shellBridge.js";
+import { useChannels as o } from "../../../hooks/useChannels.js";
+import { PermissionGuard as s } from "../../../components/PermissionGuard.js";
+import { CHANNEL_PERMISSIONS as c } from "../../../constants/permissions.js";
+import { HEALTH_I18N as l, PLATFORM_I18N as ee, STATUS_I18N as te, translateLabel as u } from "../i18n.js";
+import { useExportChannels as d } from "../hooks/useExport.js";
+import { useEffect as ne, useMemo as f, useState as p } from "react";
+import { useI18n as m } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { AlertCircle as re, AlertTriangle as h, CheckCircle2 as g, Download as ie, Eye as ae, HelpCircle as _, Loader2 as v, Pencil as oe, Plus as y, Power as se, PowerOff as b, Radio as x, RefreshCw as S, Search as C, Trash2 as ce, XCircle as w } from "lucide-react";
+import { useNavigate as le } from "react-router-dom";
+import { jsx as T, jsxs as E } from "react/jsx-runtime";
+import { TagBadge as D } from "@burdenoff/fe-libs/tag";
+//#region src/channel/modules/channels/pages/ChannelsListPage.tsx
+var O = {
+	EMAIL: {
+		label: "Email",
+		color: "bg-accent-blue-subtle text-accent-blue"
+	},
+	SMS: {
+		label: "SMS",
+		color: "bg-status-success-bg-subtle text-status-success-text"
+	},
+	PUSH: {
+		label: "Push",
+		color: "bg-accent-purple-subtle text-accent-purple"
+	},
+	INAPP: {
+		label: "In-App",
+		color: "bg-accent-indigo-subtle text-accent-indigo"
+	},
+	WEBHOOK: {
+		label: "Webhook",
+		color: "bg-accent-orange-subtle text-accent-orange"
+	},
+	SLACK: {
+		label: "Slack",
+		color: "bg-accent-pink-subtle text-accent-pink"
+	},
+	TEAMS: {
+		label: "Teams",
+		color: "bg-accent-cyan-subtle text-accent-cyan"
+	},
+	DISCORD: {
+		label: "Discord",
+		color: "bg-accent-violet-subtle text-accent-violet"
+	},
+	WHATSAPP: {
+		label: "WhatsApp",
+		color: "bg-accent-emerald-subtle text-accent-emerald"
+	},
+	WEBCHAT: {
+		label: "Webchat",
+		color: "bg-accent-teal-subtle text-accent-teal"
+	}
+}, k = {
+	ACTIVE: {
+		label: "Active",
+		color: "text-success-500 bg-success-100",
+		icon: g
+	},
+	INACTIVE: {
+		label: "Inactive",
+		color: "text-muted-foreground bg-muted",
+		icon: b
+	},
+	ERROR: {
+		label: "Error",
+		color: "text-error-500 bg-error-100",
+		icon: w
+	},
+	SUSPENDED: {
+		label: "Suspended",
+		color: "text-warning-500 bg-warning-100",
+		icon: h
+	},
+	ARCHIVED: {
+		label: "Archived",
+		color: "text-muted-foreground bg-muted",
+		icon: b
+	}
+}, A = {
+	HEALTHY: {
+		label: "Healthy",
+		color: "text-success-500",
+		icon: g
+	},
+	DEGRADED: {
+		label: "Degraded",
+		color: "text-warning-500",
+		icon: h
+	},
+	UNHEALTHY: {
+		label: "Unhealthy",
+		color: "text-error-500",
+		icon: w
+	},
+	UNKNOWN: {
+		label: "Unknown",
+		color: "text-muted-foreground",
+		icon: _
+	}
+};
+function j() {
+	let h = le(), { t: g } = m(), _ = (e, t) => {
+		let n = g(e);
+		return n === e ? t : n;
+	}, [w, j] = p(null), [ue, M] = p(null), [N, P] = p(/* @__PURE__ */ new Set()), [F, I] = p(null), { organizationId: L } = e(), { triggerExport: R, isExporting: z } = d(L ?? void 0), { channels: B, isLoading: V, error: H, total: de, filter: U, updateFilter: W, deleteChannel: G, activateChannel: K, deactivateChannel: q, runHealthCheck: J, refetch: Y } = o();
+	ne(() => {
+		let e = [
+			"channel.created",
+			"channel.updated",
+			"channel.deleted",
+			"connection.created",
+			"connection.updated",
+			"connection.deleted"
+		].map((e) => a(e, () => void Y()));
+		return () => e.forEach((e) => e());
+	}, [Y]);
+	let fe = async (e) => {
+		n("medium"), M(e);
+		try {
+			await G(e), r("success"), j(null);
+		} catch (e) {
+			r("error"), i(e, {
+				module: "channel",
+				context: { action: "Failed to delete channel" }
+			}, "[channel] Failed to delete channel");
+		} finally {
+			M(null);
+		}
+	}, pe = async (e) => {
+		M(e.id);
+		try {
+			e.status === "ACTIVE" ? await q(e.id) : await K(e.id);
+		} catch (e) {
+			i(e, {
+				module: "channel",
+				context: { action: "Failed to toggle channel status" }
+			}, "[channel] Failed to toggle channel status");
+		} finally {
+			M(null);
+		}
+	}, me = async (e) => {
+		M(e);
+		try {
+			await J(e);
+		} catch (e) {
+			i(e, {
+				module: "channel",
+				context: { action: "Failed to run health check" }
+			}, "[channel] Failed to run health check");
+		} finally {
+			M(null);
+		}
+	}, X = f(() => B.filter((e) => N.has(e.id)), [B, N]), Z = f(() => X.filter((e) => e.status === "ACTIVE"), [X]), Q = f(() => X.filter((e) => e.status !== "ACTIVE"), [X]), $ = B.length > 0 && B.every((e) => N.has(e.id)), he = B.some((e) => N.has(e.id)) && !$, ge = (e, t) => {
+		P((n) => {
+			let r = new Set(n);
+			return t ? r.add(e) : r.delete(e), r;
+		});
+	}, _e = (e) => {
+		P((t) => {
+			let n = new Set(t);
+			return B.forEach((t) => {
+				e ? n.add(t.id) : n.delete(t.id);
+			}), n;
+		});
+	}, ve = async () => {
+		if (X.length === 0) return;
+		n("medium");
+		let e = _(X.length === 1 ? "channel.bulkDeleteConfirmSingle" : "channel.bulkDeleteConfirmMultiple", X.length === 1 ? "Delete 1 selected channel?" : `Delete ${X.length} selected channels?`), r = await t({
+			title: "Delete channels",
+			message: e,
+			okButtonTitle: "Delete",
+			cancelButtonTitle: "Cancel"
+		});
+		if (r === null ? window.confirm(e) : r) {
+			I("delete");
+			try {
+				await Promise.allSettled(X.map((e) => G(e.id))), P(/* @__PURE__ */ new Set());
+			} finally {
+				I(null);
+			}
+		}
+	}, ye = async () => {
+		if (Q.length !== 0) {
+			I("activate");
+			try {
+				await Promise.allSettled(Q.map((e) => K(e.id))), P(/* @__PURE__ */ new Set());
+			} finally {
+				I(null);
+			}
+		}
+	}, be = async () => {
+		if (Z.length !== 0) {
+			I("deactivate");
+			try {
+				await Promise.allSettled(Z.map((e) => q(e.id))), P(/* @__PURE__ */ new Set());
+			} finally {
+				I(null);
+			}
+		}
+	}, xe = async () => {
+		if (X.length !== 0) {
+			I("health");
+			try {
+				await Promise.allSettled(X.map((e) => J(e.id)));
+			} finally {
+				I(null);
+			}
+		}
+	}, Se = (e) => ({
+		...O[e] || {
+			label: e,
+			color: "bg-bg-sunken text-text-secondary"
+		},
+		label: u(e, ee, _)
+	}), Ce = (e) => ({
+		...k[e] || k.INACTIVE,
+		label: u(e, te, _)
+	}), we = (e) => ({
+		...A[e] || A.UNKNOWN,
+		label: u(e, l, _)
+	});
+	return /* @__PURE__ */ T(s, {
+		permission: c.CHANNEL_READ,
+		children: /* @__PURE__ */ E("div", {
+			className: "space-y-4 sm:space-y-6 p-3 sm:p-6",
+			children: [
+				/* @__PURE__ */ E("div", {
+					className: "flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between",
+					children: [/* @__PURE__ */ E("div", { children: [/* @__PURE__ */ T("h1", {
+						className: "text-xl sm:text-2xl font-bold text-foreground",
+						children: _("channel.channels", "Channels")
+					}), /* @__PURE__ */ E("p", {
+						className: "text-sm text-muted-foreground mt-1",
+						children: [
+							_("channel.manageChannels", "Manage your communication channels"),
+							" (",
+							de,
+							" total)"
+						]
+					})] }), /* @__PURE__ */ E("div", {
+						className: "flex items-center gap-2",
+						children: [/* @__PURE__ */ T(s, {
+							permission: c.CHANNEL_ADMIN,
+							children: /* @__PURE__ */ E("button", {
+								onClick: () => void R(),
+								disabled: z,
+								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: _("channel.exportCSV", "Export to CSV"),
+								children: [z ? /* @__PURE__ */ T(v, {
+									size: 16,
+									className: "animate-spin"
+								}) : /* @__PURE__ */ T(ie, { size: 16 }), _("channel.export", "Export")]
+							})
+						}), /* @__PURE__ */ E("button", {
+							onClick: () => h("/channels/create"),
+							className: "flex items-center gap-2 px-4 py-2 text-sm font-medium text-action-primary-text bg-action-primary-bg hover:bg-action-primary-bg-hover rounded-lg transition-colors",
+							children: [/* @__PURE__ */ T(y, { size: 16 }), _("channel.createChannel", "Create Channel")]
+						})]
+					})]
+				}),
+				/* @__PURE__ */ E("div", {
+					className: "flex flex-col gap-3 sm:flex-row sm:items-center",
+					children: [
+						/* @__PURE__ */ E("div", {
+							className: "relative flex-1",
+							children: [/* @__PURE__ */ T(C, {
+								size: 16,
+								className: "absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground"
+							}), /* @__PURE__ */ T("input", {
+								type: "text",
+								placeholder: _("channel.searchChannels", "Search channels..."),
+								value: U.search || "",
+								onChange: (e) => W({ search: e.target.value }),
+								className: "w-full pl-9 pr-4 py-2 text-sm bg-surface border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-action-primary-bg"
+							})]
+						}),
+						/* @__PURE__ */ E("select", {
+							value: U.platform || "",
+							onChange: (e) => W({ platform: e.target.value || void 0 }),
+							className: "px-3 py-2 text-sm bg-bg-surface text-text-primary border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-action-primary-bg",
+							children: [/* @__PURE__ */ T("option", {
+								value: "",
+								children: _("channel.allPlatforms", "All Platforms")
+							}), Object.entries(O).map(([e, t]) => /* @__PURE__ */ T("option", {
+								value: e,
+								children: t.label
+							}, e))]
+						}),
+						/* @__PURE__ */ E("select", {
+							value: U.status || "",
+							onChange: (e) => W({ status: e.target.value || void 0 }),
+							className: "px-3 py-2 text-sm bg-bg-surface text-text-primary border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-action-primary-bg",
+							children: [/* @__PURE__ */ T("option", {
+								value: "",
+								children: _("channel.allStatus", "All Status")
+							}), Object.entries(k).map(([e, t]) => /* @__PURE__ */ T("option", {
+								value: e,
+								children: t.label
+							}, e))]
+						})
+					]
+				}),
+				B.length > 0 && /* @__PURE__ */ E("div", {
+					className: "flex flex-col gap-3 rounded-lg border border-border bg-surface p-4 sm:flex-row sm:items-center sm:justify-between",
+					children: [/* @__PURE__ */ E("label", {
+						className: "flex items-center gap-2 text-sm text-foreground",
+						children: [/* @__PURE__ */ T("input", {
+							type: "checkbox",
+							checked: $,
+							ref: (e) => {
+								e && (e.indeterminate = he && !$);
+							},
+							onChange: (e) => _e(e.target.checked),
+							"aria-label": "Select all channels",
+							className: "h-4 w-4 rounded border-border text-primary"
+						}), /* @__PURE__ */ T("span", { children: _("channel.selectAllVisible", "Select all visible") })]
+					}), /* @__PURE__ */ E("div", {
+						className: "flex flex-wrap items-center gap-2",
+						children: [
+							/* @__PURE__ */ E("span", {
+								className: "text-sm text-muted-foreground",
+								children: [
+									N.size,
+									" ",
+									_("channel.selectedCountLabel", "selected")
+								]
+							}),
+							N.size > 0 && /* @__PURE__ */ T("button", {
+								onClick: () => P(/* @__PURE__ */ new Set()),
+								className: "text-sm text-muted-foreground hover:text-foreground",
+								children: _("channel.clearSelection", "Clear selection")
+							}),
+							/* @__PURE__ */ T(s, {
+								permission: c.CHANNEL_EXECUTE,
+								children: /* @__PURE__ */ E("button", {
+									onClick: xe,
+									disabled: X.length === 0 || F !== null,
+									className: "px-3 py-2 text-sm font-medium border border-border rounded-md hover:bg-muted transition-colors disabled:opacity-50",
+									children: [_("channel.healthCheck", "Health Check"), X.length > 0 ? ` (${X.length})` : ""]
+								})
+							}),
+							/* @__PURE__ */ T(s, {
+								permission: c.CHANNEL_UPDATE,
+								children: /* @__PURE__ */ E("button", {
+									onClick: ye,
+									disabled: Q.length === 0 || F !== null,
+									className: "px-3 py-2 text-sm font-medium border border-success-500/30 text-success-500 rounded-md hover:bg-success-100 transition-colors disabled:opacity-50",
+									children: [_("channel.activateSelected", "Activate Selected"), Q.length > 0 ? ` (${Q.length})` : ""]
+								})
+							}),
+							/* @__PURE__ */ T(s, {
+								permission: c.CHANNEL_UPDATE,
+								children: /* @__PURE__ */ E("button", {
+									onClick: be,
+									disabled: Z.length === 0 || F !== null,
+									className: "px-3 py-2 text-sm font-medium border border-warning-500/30 text-warning-500 rounded-md hover:bg-warning-100 transition-colors disabled:opacity-50",
+									children: [_("channel.deactivateSelected", "Deactivate Selected"), Z.length > 0 ? ` (${Z.length})` : ""]
+								})
+							}),
+							/* @__PURE__ */ T(s, {
+								permission: c.CHANNEL_DELETE,
+								children: /* @__PURE__ */ E("button", {
+									onClick: ve,
+									disabled: X.length === 0 || F !== null,
+									className: "px-3 py-2 text-sm font-medium border border-error-500/30 text-error-500 rounded-md hover:bg-error-100 transition-colors disabled:opacity-50",
+									children: [_("channel.deleteSelected", "Delete Selected"), X.length > 0 ? ` (${X.length})` : ""]
+								})
+							})
+						]
+					})]
+				}),
+				H && /* @__PURE__ */ E("div", {
+					className: "flex items-center gap-3 p-4 bg-error-100 border border-error-500 rounded-lg",
+					children: [
+						/* @__PURE__ */ T(re, {
+							size: 20,
+							className: "text-error-500"
+						}),
+						/* @__PURE__ */ E("div", { children: [/* @__PURE__ */ T("p", {
+							className: "text-sm font-medium text-error-700",
+							children: _("channel.loadFailed", "Failed to load channels")
+						}), /* @__PURE__ */ T("p", {
+							className: "text-xs text-error-600",
+							children: H
+						})] }),
+						/* @__PURE__ */ T("button", {
+							onClick: () => Y(),
+							className: "ml-auto px-3 py-1 text-sm text-error-700 hover:bg-error-200 rounded transition-colors",
+							children: _("channel.retry", "Retry")
+						})
+					]
+				}),
+				V && B.length === 0 && /* @__PURE__ */ T("div", {
+					className: "flex items-center justify-center py-12",
+					children: /* @__PURE__ */ T(v, {
+						size: 32,
+						className: "animate-spin text-accent-primary"
+					})
+				}),
+				!V && !H && B.length === 0 && /* @__PURE__ */ E("div", {
+					className: "flex flex-col items-center justify-center py-12 text-center",
+					children: [
+						/* @__PURE__ */ T(x, {
+							size: 48,
+							className: "text-muted-foreground mb-4"
+						}),
+						/* @__PURE__ */ T("h3", {
+							className: "text-lg font-semibold text-foreground mb-2",
+							children: _("channel.noChannelsFound", "No channels found")
+						}),
+						/* @__PURE__ */ T("p", {
+							className: "text-sm text-muted-foreground max-w-md mb-4",
+							children: U.search || U.platform || U.status ? _("channel.adjustFilters", "Try adjusting your filters to see more channels.") : _("channel.createFirstChannelPrompt", "Create your first communication channel to get started.")
+						}),
+						!U.search && !U.platform && !U.status && /* @__PURE__ */ E("button", {
+							onClick: () => h("/channels/create"),
+							className: "flex items-center gap-2 px-4 py-2 text-sm font-medium text-action-primary-text bg-action-primary-bg hover:bg-action-primary-bg-hover rounded-lg transition-colors",
+							children: [/* @__PURE__ */ T(y, { size: 16 }), _("channel.createChannel", "Create Channel")]
+						})
+					]
+				}),
+				B.length > 0 && /* @__PURE__ */ T("div", {
+					className: "grid gap-4 sm:grid-cols-2 lg:grid-cols-3",
+					children: B.map((e) => {
+						let t = Se(e.platform), n = Ce(e.status), r = we(e.connectionHealth), i = n.icon, a = r.icon, o = ue === e.id;
+						return /* @__PURE__ */ E("div", {
+							className: `p-4 bg-surface border rounded-lg transition-colors group ${N.has(e.id) ? "ring-2 ring-action-primary-bg border-action-primary-bg/40" : "border-border hover:border-action-primary-bg/40"}`,
+							children: [
+								/* @__PURE__ */ E("div", {
+									className: "flex items-start justify-between mb-3",
+									children: [/* @__PURE__ */ E("div", {
+										className: "flex items-center gap-2",
+										children: [
+											/* @__PURE__ */ T("input", {
+												type: "checkbox",
+												checked: N.has(e.id),
+												onChange: (t) => ge(e.id, t.target.checked),
+												"aria-label": `Select channel ${e.name}`,
+												className: "h-4 w-4 rounded border-border text-primary"
+											}),
+											/* @__PURE__ */ T(x, {
+												size: 20,
+												className: "text-accent-primary"
+											}),
+											/* @__PURE__ */ T("span", {
+												className: `px-2 py-0.5 text-xs font-semibold rounded-full ${t.color}`,
+												children: t.label
+											})
+										]
+									}), /* @__PURE__ */ E("div", {
+										className: "flex items-center gap-1",
+										children: [/* @__PURE__ */ T(i, {
+											size: 14,
+											className: n.color.split(" ")[0]
+										}), /* @__PURE__ */ T("span", {
+											className: `px-2 py-0.5 text-xs font-medium rounded-full ${n.color}`,
+											children: n.label
+										})]
+									})]
+								}),
+								/* @__PURE__ */ E("div", {
+									onClick: () => h(`/channels/${e.id}`),
+									className: "cursor-pointer",
+									children: [
+										/* @__PURE__ */ T("h3", {
+											className: "text-sm font-semibold text-foreground mb-1 truncate",
+											children: e.name
+										}),
+										e.description && /* @__PURE__ */ T("p", {
+											className: "text-xs text-muted-foreground mb-2 line-clamp-2",
+											children: e.description
+										}),
+										e.adapterType && /* @__PURE__ */ T("p", {
+											className: "text-xs text-muted-foreground mb-2 font-mono",
+											children: e.adapterType.replace(/_/g, " ")
+										}),
+										/* @__PURE__ */ T("div", {
+											className: "flex items-center gap-3 text-xs text-muted-foreground mb-2",
+											children: /* @__PURE__ */ E("span", { children: [
+												_("channel.priority", "Priority"),
+												": ",
+												e.priority
+											] })
+										}),
+										/* @__PURE__ */ E("div", {
+											className: "flex items-center gap-3 text-xs",
+											children: [
+												/* @__PURE__ */ E("div", {
+													className: "flex items-center gap-1",
+													children: [/* @__PURE__ */ T(a, {
+														size: 12,
+														className: r.color
+													}), /* @__PURE__ */ T("span", {
+														className: r.color,
+														children: r.label
+													})]
+												}),
+												/* @__PURE__ */ T("span", { children: "•" }),
+												/* @__PURE__ */ T("span", {
+													className: e.isConnected ? "text-success-500" : "text-muted-foreground",
+													children: e.isConnected ? _("channel.connected", "Connected") : _("channel.notConnected", "Not Connected")
+												})
+											]
+										})
+									]
+								}),
+								e.tagAssignments && e.tagAssignments.length > 0 && /* @__PURE__ */ E("div", {
+									className: "flex flex-wrap gap-1 mt-2",
+									"aria-label": "Channel tags",
+									children: [e.tagAssignments.slice(0, 4).map((e) => /* @__PURE__ */ T(D, {
+										id: e.tagId,
+										label: e.tagId,
+										size: "sm"
+									}, e.id)), e.tagAssignments.length > 4 && /* @__PURE__ */ E("span", {
+										className: "text-xs text-muted-foreground",
+										children: ["+", e.tagAssignments.length - 4]
+									})]
+								}),
+								/* @__PURE__ */ E("div", {
+									className: "mt-3 pt-3 border-t border-border flex items-center justify-between opacity-0 group-hover:opacity-100 transition-opacity",
+									children: [/* @__PURE__ */ E("div", {
+										className: "flex items-center gap-1",
+										children: [
+											/* @__PURE__ */ T("button", {
+												onClick: () => h(`/channels/${e.id}`),
+												className: "p-1.5 text-muted-foreground hover:text-accent-primary hover:bg-accent-primary/10 rounded transition-colors cursor-pointer",
+												title: _("channel.viewDetails", "View Details"),
+												children: /* @__PURE__ */ T(ae, { size: 14 })
+											}),
+											/* @__PURE__ */ T("button", {
+												onClick: () => h(`/channels/${e.id}/edit`),
+												className: "p-1.5 text-muted-foreground hover:text-accent-primary hover:bg-accent-primary/10 rounded transition-colors cursor-pointer",
+												title: _("channel.editChannel", "Edit Channel"),
+												children: /* @__PURE__ */ T(oe, { size: 14 })
+											}),
+											/* @__PURE__ */ T(s, {
+												permission: c.CHANNEL_EXECUTE,
+												children: /* @__PURE__ */ T("button", {
+													onClick: () => me(e.id),
+													disabled: o,
+													className: "p-1.5 text-muted-foreground hover:text-status-info-text hover:bg-status-info-bg-subtle rounded transition-colors disabled:opacity-50 cursor-pointer disabled:cursor-not-allowed",
+													title: _("channel.runHealthCheck", "Run Health Check"),
+													children: o ? /* @__PURE__ */ T(v, {
+														size: 14,
+														className: "animate-spin"
+													}) : /* @__PURE__ */ T(S, { size: 14 })
+												})
+											}),
+											/* @__PURE__ */ T(s, {
+												permission: c.CHANNEL_UPDATE,
+												children: /* @__PURE__ */ T("button", {
+													onClick: () => pe(e),
+													disabled: o,
+													className: `p-1.5 rounded transition-colors disabled:opacity-50 cursor-pointer disabled:cursor-not-allowed ${e.status === "ACTIVE" ? "text-muted-foreground hover:text-warning-500 hover:bg-warning-100" : "text-muted-foreground hover:text-success-500 hover:bg-success-100"}`,
+													title: e.status === "ACTIVE" ? _("channel.deactivate", "Deactivate") : _("channel.activate", "Activate"),
+													children: e.status === "ACTIVE" ? /* @__PURE__ */ T(b, { size: 14 }) : /* @__PURE__ */ T(se, { size: 14 })
+												})
+											})
+										]
+									}), w === e.id ? /* @__PURE__ */ E("div", {
+										className: "flex items-center gap-2",
+										children: [
+											/* @__PURE__ */ T("span", {
+												className: "text-xs text-muted-foreground",
+												children: _("channel.deleteQuestion", "Delete?")
+											}),
+											/* @__PURE__ */ T("button", {
+												onClick: () => fe(e.id),
+												disabled: o,
+												className: "px-2 py-1 text-xs text-error-500 hover:bg-error-100 rounded transition-colors cursor-pointer disabled:cursor-not-allowed",
+												children: o ? "..." : _("channel.yes", "Yes")
+											}),
+											/* @__PURE__ */ T("button", {
+												onClick: () => j(null),
+												className: "px-2 py-1 text-xs text-muted-foreground hover:bg-muted rounded transition-colors cursor-pointer",
+												children: _("channel.no", "No")
+											})
+										]
+									}) : /* @__PURE__ */ T(s, {
+										permission: c.CHANNEL_DELETE,
+										children: /* @__PURE__ */ T("button", {
+											onClick: () => j(e.id),
+											className: "p-1.5 text-muted-foreground hover:text-error-500 hover:bg-error-100 rounded transition-colors cursor-pointer",
+											title: _("channel.deleteChannel", "Delete Channel"),
+											children: /* @__PURE__ */ T(ce, { size: 14 })
+										})
+									})]
+								})
+							]
+						}, e.id);
+					})
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { j as ChannelsListPage };
+
+//# sourceMappingURL=ChannelsListPage.js.map