@burdenoff/microfe-comradecircle 2026.525.1 → 2026.704.2

package/dist/comradecircle/pages/circles/CircleDetailPage.js

@@ -0,0 +1,651 @@
+import { useComradeCircle as e } from "../../context/ComradeCircleContext.js";
+import { cn as t } from "../../utils/cn.js";
+import { PageLayout as n } from "../../components/PageLayout.js";
+import "../../context/index.js";
+import { useComCircle as r, useComCreateChannel as i, useComCreatePoll as a, useComEvents as o, useComJoinCircle as s, useComLeaveCircle as c, useComPolls as l, useComPosts as u, useComSetMemberRole as d } from "../../hooks/useComradeCircleApi.js";
+import { useCursorPager as f } from "../../hooks/useCursorPager.js";
+import "../../hooks/index.js";
+import { Avatar as p } from "../../components/Avatar.js";
+import { MemberIdentity as m } from "../../components/MemberIdentity.js";
+import { describeError as h, notify as g } from "../../lib/toast.js";
+import { formatDate as _, formatEnumLabel as v, formatNumber as y } from "../../utils/formatters.js";
+import { PostCard as b } from "../../components/PostCard.js";
+import { EmptyState as x } from "../../components/EmptyState.js";
+import { ErrorView as S, LoadingView as C } from "../../components/StateViews.js";
+import { Pagination as w } from "../../components/Pagination.js";
+import { slugify as T } from "../../utils/slug.js";
+import { StatusBadge as E } from "../../components/StatusBadge.js";
+import { Tabs as ee } from "../../components/Tabs.js";
+import { PostComposer as D } from "../../components/PostComposer.js";
+import { EventCard as te } from "../../components/EventCard.js";
+import { PollCard as ne } from "../../components/PollCard.js";
+import { CreateEventDialog as re } from "../../components/CreateEventDialog.js";
+import { useMemo as O, useState as k } from "react";
+import { ArrowLeft as ie, BarChart3 as A, CalendarDays as j, Hash as M, Info as ae, Megaphone as oe, MessageCircle as se, MessagesSquare as ce, Mic as le, Plus as N, Users as P } from "lucide-react";
+import { useParams as ue } from "react-router-dom";
+import { Fragment as de, jsx as F, jsxs as I } from "react/jsx-runtime";
+import { Button as L, Input as R, Label as z, ResponsiveDialog as B, ResponsiveDialogContent as V, ResponsiveDialogDescription as H, ResponsiveDialogFooter as U, ResponsiveDialogHeader as W, ResponsiveDialogTitle as G, Select as K, SelectContent as q, SelectItem as J, SelectTrigger as Y, SelectValue as X, Textarea as fe } from "@burdenoff/fe-libs/ui";
+//#region src/comradecircle/pages/circles/CircleDetailPage.tsx
+var Z = {
+	TEXT: M,
+	FORUM: ce,
+	ANNOUNCEMENT: oe,
+	VOICE: le
+}, pe = ["OWNER", "ADMIN"], Q = [
+	"OWNER",
+	"ADMIN",
+	"MODERATOR",
+	"MEMBER"
+], me = 15;
+function he() {
+	let { id: t } = ue(), { currentUser: i, navigateTo: a } = e(), { data: o, isLoading: l, isError: u, refetch: d } = r(t), f = s(), m = c(), [_, v] = k("channels"), b = O(() => o?.memberships?.find((e) => e.memberId === i?.id && e.status === "ACTIVE"), [o, i]), x = !!b, w = b ? pe.includes(b.role) : !1;
+	if (l) return /* @__PURE__ */ F(n, {
+		title: "Circle",
+		children: /* @__PURE__ */ F(C, { label: "Loading circle…" })
+	});
+	if (u || !o) return /* @__PURE__ */ F(n, {
+		title: "Circle",
+		children: /* @__PURE__ */ F(S, {
+			title: "Circle not found",
+			message: "This circle may have been archived or you may not have access.",
+			onRetry: () => d()
+		})
+	});
+	let T = o.memberships?.filter((e) => e.status === "ACTIVE") ?? [], D = [
+		{
+			value: "channels",
+			label: "Channels",
+			icon: /* @__PURE__ */ F(M, { className: "h-4 w-4" }),
+			count: o.channels?.length ?? 0
+		},
+		{
+			value: "members",
+			label: "Members",
+			icon: /* @__PURE__ */ F(P, { className: "h-4 w-4" }),
+			count: T.length
+		},
+		{
+			value: "events",
+			label: "Events",
+			icon: /* @__PURE__ */ F(j, { className: "h-4 w-4" })
+		},
+		{
+			value: "polls",
+			label: "Polls",
+			icon: /* @__PURE__ */ F(A, { className: "h-4 w-4" })
+		},
+		{
+			value: "about",
+			label: "About",
+			icon: /* @__PURE__ */ F(ae, { className: "h-4 w-4" })
+		}
+	];
+	return /* @__PURE__ */ I(n, {
+		title: /* @__PURE__ */ I("span", {
+			className: "flex items-center gap-3",
+			children: [/* @__PURE__ */ F(p, {
+				name: o.name,
+				size: "md",
+				fileId: o.avatar?.id
+			}), o.name]
+		}),
+		description: o.topic ?? void 0,
+		actions: /* @__PURE__ */ I("div", {
+			className: "flex items-center gap-2",
+			children: [/* @__PURE__ */ I(L, {
+				variant: "ghost",
+				size: "sm",
+				onClick: () => a("circles"),
+				children: [/* @__PURE__ */ F(ie, { className: "mr-1.5 h-4 w-4" }), " Back"]
+			}), x ? /* @__PURE__ */ F(L, {
+				variant: "outline",
+				onClick: () => m.mutateAsync(o.id).then(() => g.success("Left circle")).catch((e) => g.error("Could not leave", h(e))),
+				disabled: m.isPending,
+				children: "Leave"
+			}) : o.status === "ACTIVE" ? /* @__PURE__ */ F(L, {
+				onClick: () => f.mutateAsync(o.id).then(() => g.success("Joined circle")).catch((e) => g.error("Could not join", h(e))),
+				disabled: f.isPending,
+				children: "Join circle"
+			}) : null]
+		}),
+		children: [
+			/* @__PURE__ */ I("div", {
+				className: "mb-4 flex flex-wrap items-center gap-2",
+				children: [
+					/* @__PURE__ */ F(E, { status: o.visibility }),
+					o.status !== "ACTIVE" && /* @__PURE__ */ F(E, { status: o.status }),
+					b && /* @__PURE__ */ F(E, { status: b.role }),
+					/* @__PURE__ */ I("span", {
+						className: "inline-flex items-center gap-1 text-sm text-text-tertiary",
+						children: [
+							/* @__PURE__ */ F(P, { className: "h-4 w-4" }),
+							" ",
+							y(o.memberCount),
+							" members"
+						]
+					})
+				]
+			}),
+			/* @__PURE__ */ F(ee, {
+				items: D,
+				value: _,
+				onChange: v,
+				className: "mb-5"
+			}),
+			_ === "channels" && /* @__PURE__ */ F(ge, {
+				circle: o,
+				isMember: x,
+				canManage: w
+			}),
+			_ === "members" && /* @__PURE__ */ F(ve, {
+				circle: o,
+				canManage: w
+			}),
+			_ === "events" && /* @__PURE__ */ F(ye, {
+				circle: o,
+				isMember: x
+			}),
+			_ === "polls" && /* @__PURE__ */ F(be, {
+				circle: o,
+				isMember: x,
+				canManage: w
+			}),
+			_ === "about" && /* @__PURE__ */ F(xe, { circle: o })
+		]
+	});
+}
+function ge({ circle: e, isMember: n, canManage: r }) {
+	let i = O(() => [...e.channels ?? []].sort((e, t) => e.position - t.position), [e.channels]), [a, o] = k(i[0]?.id), [s, c] = k(!1), l = i.find((e) => e.id === a) ?? i[0];
+	return i.length === 0 ? /* @__PURE__ */ I(de, { children: [/* @__PURE__ */ F(x, {
+		icon: /* @__PURE__ */ F(M, { className: "h-10 w-10" }),
+		title: "No channels yet",
+		description: r ? "Create the first channel to start conversations in this circle." : "This circle has no channels yet. Check back soon.",
+		action: r ? /* @__PURE__ */ I(L, {
+			onClick: () => c(!0),
+			children: [/* @__PURE__ */ F(N, { className: "mr-1.5 h-4 w-4" }), " New channel"]
+		}) : void 0
+	}), /* @__PURE__ */ F($, {
+		circleId: e.id,
+		open: s,
+		onOpenChange: c,
+		onCreated: (e) => o(e.id)
+	})] }) : /* @__PURE__ */ I("div", {
+		className: "grid gap-5 lg:grid-cols-[220px_1fr]",
+		children: [
+			/* @__PURE__ */ I("aside", {
+				className: "hidden lg:block",
+				children: [/* @__PURE__ */ I("div", {
+					className: "mb-2 flex items-center justify-between",
+					children: [/* @__PURE__ */ F("h3", {
+						className: "text-xs font-semibold uppercase tracking-wide text-text-tertiary",
+						children: "Channels"
+					}), r && /* @__PURE__ */ F("button", {
+						type: "button",
+						onClick: () => c(!0),
+						"aria-label": "New channel",
+						className: "rounded-md p-1 text-text-tertiary hover:bg-bg-sunken hover:text-text-primary",
+						children: /* @__PURE__ */ F(N, { className: "h-4 w-4" })
+					})]
+				}), /* @__PURE__ */ F("nav", {
+					className: "flex flex-col gap-0.5",
+					children: i.map((e) => {
+						let n = Z[e.type];
+						return /* @__PURE__ */ I("button", {
+							type: "button",
+							onClick: () => o(e.id),
+							className: t("flex items-center gap-2 rounded-lg px-2.5 py-1.5 text-left text-sm transition-colors", e.id === l?.id ? "bg-[var(--color-accent-soft)] font-medium text-text-primary" : "text-text-secondary hover:bg-bg-sunken hover:text-text-primary"),
+							children: [/* @__PURE__ */ F(n, { className: "h-4 w-4 shrink-0 text-text-tertiary" }), /* @__PURE__ */ F("span", {
+								className: "truncate",
+								children: e.name
+							})]
+						}, e.id);
+					})
+				})]
+			}),
+			/* @__PURE__ */ F("div", {
+				className: "lg:hidden",
+				children: /* @__PURE__ */ I("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ I(K, {
+						value: l?.id,
+						onValueChange: o,
+						children: [/* @__PURE__ */ F(Y, { children: /* @__PURE__ */ F(X, { placeholder: "Select a channel" }) }), /* @__PURE__ */ F(q, { children: i.map((e) => /* @__PURE__ */ I(J, {
+							value: e.id,
+							children: ["#", e.name]
+						}, e.id)) })]
+					}), r && /* @__PURE__ */ F(L, {
+						variant: "outline",
+						size: "icon",
+						onClick: () => c(!0),
+						"aria-label": "New channel",
+						children: /* @__PURE__ */ F(N, { className: "h-4 w-4" })
+					})]
+				})
+			}),
+			/* @__PURE__ */ F("div", {
+				className: "min-w-0",
+				children: l && /* @__PURE__ */ F(_e, {
+					channel: l,
+					canPost: n
+				})
+			}),
+			/* @__PURE__ */ F($, {
+				circleId: e.id,
+				open: s,
+				onOpenChange: c,
+				onCreated: (e) => o(e.id)
+			})
+		]
+	});
+}
+function _e({ channel: e, canPost: t }) {
+	let n = f(), { data: r, isLoading: i, isError: a, refetch: o } = u({
+		channelId: e.id,
+		status: "PUBLISHED",
+		pagination: {
+			limit: me,
+			cursor: n.cursor
+		}
+	}), s = r?.items ?? [], c = t && e.type !== "ANNOUNCEMENT" && e.type !== "VOICE";
+	return /* @__PURE__ */ I("div", {
+		className: "flex flex-col gap-4",
+		children: [
+			/* @__PURE__ */ I("div", {
+				className: "flex items-center gap-2",
+				children: [(() => {
+					let t = Z[e.type];
+					return /* @__PURE__ */ F(t, { className: "h-5 w-5 text-text-tertiary" });
+				})(), /* @__PURE__ */ I("div", { children: [/* @__PURE__ */ F("h2", {
+					className: "text-lg font-semibold text-text-primary",
+					children: e.name
+				}), e.description && /* @__PURE__ */ F("p", {
+					className: "text-sm text-text-secondary",
+					children: e.description
+				})] })]
+			}),
+			c && /* @__PURE__ */ F(D, {
+				channelId: e.id,
+				channelName: e.name,
+				onPosted: () => n.reset()
+			}),
+			e.type === "VOICE" && /* @__PURE__ */ I("div", {
+				className: "rounded-xl border border-dashed border-border-seam p-6 text-center text-sm text-text-secondary",
+				children: [/* @__PURE__ */ F(le, { className: "mx-auto mb-2 h-6 w-6 text-text-tertiary" }), "Voice channels are for live audio. Text posting is disabled here."]
+			}),
+			i ? /* @__PURE__ */ F(C, { label: "Loading posts…" }) : a ? /* @__PURE__ */ F(S, {
+				message: "We couldn't load posts.",
+				onRetry: () => o()
+			}) : s.length === 0 ? /* @__PURE__ */ F(x, {
+				icon: /* @__PURE__ */ F(se, { className: "h-9 w-9" }),
+				title: "No posts yet",
+				description: c ? "Be the first to post in this channel." : "Nothing has been posted here yet."
+			}) : /* @__PURE__ */ I("div", {
+				className: "flex flex-col gap-4",
+				children: [s.map((e) => /* @__PURE__ */ F(b, { post: e }, e.id)), /* @__PURE__ */ F(w, {
+					page: n.page,
+					pageSize: me,
+					itemCount: s.length,
+					hasMore: r?.pageInfo.hasMore ?? !1,
+					onPageChange: (e) => n.onPageChange(e, r?.pageInfo.cursor)
+				})]
+			})
+		]
+	});
+}
+function ve({ circle: e, canManage: t }) {
+	let n = d(), r = O(() => [...e.memberships ?? []].sort((e, t) => Q.indexOf(e.role) - Q.indexOf(t.role)), [e.memberships]);
+	if (r.length === 0) return /* @__PURE__ */ F(x, {
+		icon: /* @__PURE__ */ F(P, { className: "h-9 w-9" }),
+		title: "No members yet"
+	});
+	let i = async (t, r) => {
+		try {
+			await n.mutateAsync({
+				membershipId: t,
+				role: r,
+				circleId: e.id
+			}), g.success("Role updated");
+		} catch (e) {
+			g.error("Could not update role", h(e));
+		}
+	};
+	return /* @__PURE__ */ F("div", {
+		className: "flex flex-col gap-2",
+		children: r.map((e) => /* @__PURE__ */ I("div", {
+			className: "flex items-center justify-between gap-3 rounded-xl border border-border-seam bg-bg-surface px-4 py-2.5",
+			children: [/* @__PURE__ */ F(m, {
+				memberId: e.memberId,
+				variant: "row",
+				size: "md",
+				showPresence: !0
+			}), /* @__PURE__ */ I("div", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ F(E, { status: e.status }), t ? /* @__PURE__ */ I(K, {
+					value: e.role,
+					onValueChange: (t) => i(e.id, t),
+					children: [/* @__PURE__ */ F(Y, {
+						className: "h-8 w-32",
+						children: /* @__PURE__ */ F(X, {})
+					}), /* @__PURE__ */ F(q, { children: Q.map((e) => /* @__PURE__ */ F(J, {
+						value: e,
+						children: v(e)
+					}, e)) })]
+				}) : /* @__PURE__ */ F(E, { status: e.role })]
+			})]
+		}, e.id))
+	});
+}
+function ye({ circle: t, isMember: n }) {
+	let { navigateTo: r } = e(), { data: i, isLoading: a, isError: s, refetch: c } = o({ circleId: t.id }), [l, u] = k(!1), d = i?.items ?? [];
+	return /* @__PURE__ */ I("div", { children: [
+		/* @__PURE__ */ F("div", {
+			className: "mb-4 flex items-center justify-end",
+			children: n && /* @__PURE__ */ I(L, {
+				onClick: () => u(!0),
+				children: [/* @__PURE__ */ F(N, { className: "mr-1.5 h-4 w-4" }), " New event"]
+			})
+		}),
+		a ? /* @__PURE__ */ F(C, { label: "Loading events…" }) : s ? /* @__PURE__ */ F(S, { onRetry: () => c() }) : d.length === 0 ? /* @__PURE__ */ F(x, {
+			icon: /* @__PURE__ */ F(j, { className: "h-9 w-9" }),
+			title: "No events scheduled",
+			description: n ? "Schedule the first event for this circle." : "No upcoming events.",
+			action: n ? /* @__PURE__ */ I(L, {
+				onClick: () => u(!0),
+				children: [/* @__PURE__ */ F(N, { className: "mr-1.5 h-4 w-4" }), " New event"]
+			}) : void 0
+		}) : /* @__PURE__ */ F("div", {
+			className: "grid gap-4 md:grid-cols-2",
+			children: d.map((e) => /* @__PURE__ */ F(te, {
+				event: e,
+				onOpen: () => r(`events/${e.id}`)
+			}, e.id))
+		}),
+		/* @__PURE__ */ F(re, {
+			circleId: t.id,
+			open: l,
+			onOpenChange: u
+		})
+	] });
+}
+function be({ circle: e, isMember: t, canManage: n }) {
+	let { data: r, isLoading: i, isError: a, refetch: o } = l(e.id), [s, c] = k(!1);
+	return /* @__PURE__ */ I("div", { children: [
+		/* @__PURE__ */ F("div", {
+			className: "mb-4 flex items-center justify-end",
+			children: t && /* @__PURE__ */ I(L, {
+				onClick: () => c(!0),
+				children: [/* @__PURE__ */ F(N, { className: "mr-1.5 h-4 w-4" }), " New poll"]
+			})
+		}),
+		i ? /* @__PURE__ */ F(C, { label: "Loading polls…" }) : a ? /* @__PURE__ */ F(S, { onRetry: () => o() }) : (r ?? []).length === 0 ? /* @__PURE__ */ F(x, {
+			icon: /* @__PURE__ */ F(A, { className: "h-9 w-9" }),
+			title: "No polls yet",
+			description: t ? "Ask the circle a question with a poll." : "No polls have been created.",
+			action: t ? /* @__PURE__ */ I(L, {
+				onClick: () => c(!0),
+				children: [/* @__PURE__ */ F(N, { className: "mr-1.5 h-4 w-4" }), " New poll"]
+			}) : void 0
+		}) : /* @__PURE__ */ F("div", {
+			className: "mx-auto flex max-w-2xl flex-col gap-4",
+			children: (r ?? []).map((e) => /* @__PURE__ */ F(ne, {
+				poll: e,
+				canManage: n
+			}, e.id))
+		}),
+		/* @__PURE__ */ F(Ce, {
+			circleId: e.id,
+			open: s,
+			onOpenChange: c
+		})
+	] });
+}
+function xe({ circle: e }) {
+	return /* @__PURE__ */ F("div", {
+		className: "mx-auto max-w-2xl",
+		children: /* @__PURE__ */ I("div", {
+			className: "rounded-2xl border border-border-seam bg-bg-surface p-6",
+			children: [
+				/* @__PURE__ */ F("h2", {
+					className: "text-lg font-semibold text-text-primary",
+					children: "About this circle"
+				}),
+				/* @__PURE__ */ F("p", {
+					className: "mt-2 whitespace-pre-wrap text-sm text-text-secondary",
+					children: e.description || "No description provided."
+				}),
+				e.tags.length > 0 && /* @__PURE__ */ F("div", {
+					className: "mt-4 flex flex-wrap gap-1.5",
+					children: e.tags.map((e) => /* @__PURE__ */ I("span", {
+						className: "rounded-full bg-bg-sunken px-2.5 py-0.5 text-xs font-medium text-text-secondary",
+						children: ["#", e]
+					}, e))
+				}),
+				/* @__PURE__ */ I("dl", {
+					className: "mt-6 grid grid-cols-2 gap-4 text-sm",
+					children: [
+						/* @__PURE__ */ I("div", { children: [/* @__PURE__ */ F("dt", {
+							className: "text-text-tertiary",
+							children: "Visibility"
+						}), /* @__PURE__ */ F("dd", {
+							className: "mt-1 text-text-primary",
+							children: v(e.visibility)
+						})] }),
+						/* @__PURE__ */ I("div", { children: [/* @__PURE__ */ F("dt", {
+							className: "text-text-tertiary",
+							children: "Status"
+						}), /* @__PURE__ */ F("dd", {
+							className: "mt-1 text-text-primary",
+							children: v(e.status)
+						})] }),
+						/* @__PURE__ */ I("div", { children: [/* @__PURE__ */ F("dt", {
+							className: "text-text-tertiary",
+							children: "Members"
+						}), /* @__PURE__ */ F("dd", {
+							className: "mt-1 text-text-primary",
+							children: y(e.memberCount)
+						})] }),
+						/* @__PURE__ */ I("div", { children: [/* @__PURE__ */ F("dt", {
+							className: "text-text-tertiary",
+							children: "Created"
+						}), /* @__PURE__ */ F("dd", {
+							className: "mt-1 text-text-primary",
+							children: _(e.createdAt)
+						})] })
+					]
+				})
+			]
+		})
+	});
+}
+var Se = [
+	"TEXT",
+	"FORUM",
+	"ANNOUNCEMENT",
+	"VOICE"
+];
+function $({ circleId: e, open: t, onOpenChange: n, onCreated: r }) {
+	let a = i(), [o, s] = k(""), [c, l] = k(""), [u, d] = k("TEXT"), [f, p] = k(null);
+	return /* @__PURE__ */ F(B, {
+		open: t,
+		onOpenChange: n,
+		children: /* @__PURE__ */ I(V, {
+			className: "sm:max-w-md",
+			children: [
+				/* @__PURE__ */ I(W, { children: [/* @__PURE__ */ F(G, { children: "Create a channel" }), /* @__PURE__ */ F(H, { children: "Channels organise conversations by topic or format." })] }),
+				/* @__PURE__ */ I("div", {
+					className: "flex flex-col gap-4 py-2",
+					children: [
+						/* @__PURE__ */ I("div", {
+							className: "grid gap-1.5",
+							children: [/* @__PURE__ */ F(z, {
+								htmlFor: "channel-name",
+								children: "Name"
+							}), /* @__PURE__ */ F(R, {
+								id: "channel-name",
+								value: o,
+								onChange: (e) => s(e.target.value),
+								placeholder: "general"
+							})]
+						}),
+						/* @__PURE__ */ I("div", {
+							className: "grid gap-1.5",
+							children: [/* @__PURE__ */ F(z, { children: "Type" }), /* @__PURE__ */ I(K, {
+								value: u,
+								onValueChange: (e) => d(e),
+								children: [/* @__PURE__ */ F(Y, { children: /* @__PURE__ */ F(X, {}) }), /* @__PURE__ */ F(q, { children: Se.map((e) => /* @__PURE__ */ F(J, {
+									value: e,
+									children: v(e)
+								}, e)) })]
+							})]
+						}),
+						/* @__PURE__ */ I("div", {
+							className: "grid gap-1.5",
+							children: [/* @__PURE__ */ F(z, {
+								htmlFor: "channel-desc",
+								children: "Description"
+							}), /* @__PURE__ */ F(fe, {
+								id: "channel-desc",
+								value: c,
+								onChange: (e) => l(e.target.value),
+								rows: 2
+							})]
+						}),
+						f && /* @__PURE__ */ F("p", {
+							className: "text-sm text-status-error-text",
+							children: f
+						})
+					]
+				}),
+				/* @__PURE__ */ I(U, { children: [/* @__PURE__ */ F(L, {
+					variant: "outline",
+					onClick: () => n(!1),
+					children: "Cancel"
+				}), /* @__PURE__ */ F(L, {
+					onClick: async () => {
+						if (!o.trim()) {
+							p("Channel name is required.");
+							return;
+						}
+						try {
+							let t = await a.mutateAsync({
+								circleId: e,
+								name: o.trim(),
+								slug: T(o),
+								description: c.trim() || null,
+								type: u
+							});
+							g.success("Channel created", `#${t.name}`), n(!1), s(""), l(""), d("TEXT"), p(null), r?.(t);
+						} catch (e) {
+							p(h(e));
+						}
+					},
+					disabled: a.isPending,
+					children: "Create channel"
+				})] })
+			]
+		})
+	});
+}
+function Ce({ circleId: e, open: t, onOpenChange: n }) {
+	let r = a(), [i, o] = k(""), [s, c] = k(["", ""]), [l, u] = k(!1), [d, f] = k(null), p = () => {
+		o(""), c(["", ""]), u(!1), f(null);
+	};
+	return /* @__PURE__ */ F(B, {
+		open: t,
+		onOpenChange: n,
+		children: /* @__PURE__ */ I(V, {
+			className: "sm:max-w-md",
+			children: [
+				/* @__PURE__ */ I(W, { children: [/* @__PURE__ */ F(G, { children: "Create a poll" }), /* @__PURE__ */ F(H, { children: "Gather the circle's opinion." })] }),
+				/* @__PURE__ */ I("div", {
+					className: "flex flex-col gap-4 py-2",
+					children: [
+						/* @__PURE__ */ I("div", {
+							className: "grid gap-1.5",
+							children: [/* @__PURE__ */ F(z, {
+								htmlFor: "poll-q",
+								children: "Question"
+							}), /* @__PURE__ */ F(R, {
+								id: "poll-q",
+								value: i,
+								onChange: (e) => o(e.target.value),
+								placeholder: "What should we build next?"
+							})]
+						}),
+						/* @__PURE__ */ I("div", {
+							className: "grid gap-1.5",
+							children: [/* @__PURE__ */ F(z, { children: "Options" }), /* @__PURE__ */ I("div", {
+								className: "flex flex-col gap-2",
+								children: [s.map((e, t) => /* @__PURE__ */ I("div", {
+									className: "flex items-center gap-2",
+									children: [/* @__PURE__ */ F(R, {
+										value: e,
+										onChange: (e) => c((n) => n.map((n, r) => r === t ? e.target.value : n)),
+										placeholder: `Option ${t + 1}`
+									}), s.length > 2 && /* @__PURE__ */ F(L, {
+										variant: "ghost",
+										size: "icon",
+										onClick: () => c((e) => e.filter((e, n) => n !== t)),
+										"aria-label": `Remove option ${t + 1}`,
+										children: "✕"
+									})]
+								}, t)), s.length < 8 && /* @__PURE__ */ I(L, {
+									variant: "outline",
+									size: "sm",
+									onClick: () => c((e) => [...e, ""]),
+									children: [/* @__PURE__ */ F(N, { className: "mr-1.5 h-4 w-4" }), " Add option"]
+								})]
+							})]
+						}),
+						/* @__PURE__ */ I("label", {
+							className: "flex items-center gap-2 text-sm text-text-secondary",
+							children: [/* @__PURE__ */ F("input", {
+								type: "checkbox",
+								checked: l,
+								onChange: (e) => u(e.target.checked),
+								className: "h-4 w-4 rounded border-border-seam"
+							}), "Allow selecting multiple options"]
+						}),
+						d && /* @__PURE__ */ F("p", {
+							className: "text-sm text-status-error-text",
+							children: d
+						})
+					]
+				}),
+				/* @__PURE__ */ I(U, { children: [/* @__PURE__ */ F(L, {
+					variant: "outline",
+					onClick: () => n(!1),
+					children: "Cancel"
+				}), /* @__PURE__ */ F(L, {
+					onClick: async () => {
+						let t = s.map((e) => e.trim()).filter(Boolean);
+						if (!i.trim()) {
+							f("A question is required.");
+							return;
+						}
+						if (t.length < 2) {
+							f("Add at least two options.");
+							return;
+						}
+						try {
+							await r.mutateAsync({
+								circleId: e,
+								question: i.trim(),
+								options: t,
+								allowMultiple: l
+							}), g.success("Poll created"), n(!1), p();
+						} catch (e) {
+							f(h(e));
+						}
+					},
+					disabled: r.isPending,
+					children: "Create poll"
+				})] })
+			]
+		})
+	});
+}
+//#endregion
+export { he as CircleDetailPage };
+
+//# sourceMappingURL=CircleDetailPage.js.map