@burdenoff/microfe-conversations 2026.522.1 → 2026.523.1

package/dist/conversations/pages/ConversationDetailPage.js

@@ -1,240 +1,260 @@
 import { useConversations as e } from "../providers/ConversationsProvider.js";
 import { cn as t } from "../utils/cn.js";
-import { useConversationActions as n, useGetConversation as r } from "../hooks/useConversationQueries.js";
-import { useMessageStreamForConversation as i } from "../hooks/useMessageSubscriptions.js";
-import { useConversationsStore as ee } from "../store/conversationsStore.js";
+import { useConversationsStore as n } from "../store/conversationsStore.js";
+import { MessageBubble as r } from "../components/MessageBubble.js";
+import { useConversationActions as i, useGetConversation as ee } from "../hooks/useConversationQueries.js";
+import { useEditMessage as te, useGetMessages as ne, useMessageActions as re, useSendMessage as ie } from "../hooks/useMessageQueries.js";
+import { useMessageStreamForConversation as ae } from "../hooks/useMessageSubscriptions.js";
 import { PermissionGuard as a } from "../components/PermissionGuard.js";
 import { CONVERSATIONS_PERMISSIONS as o } from "../constants/permissions.js";
-import { nativeImpact as te, nativeNotify as s } from "../../utils/nativeBridge.js";
-import { MessageBubble as ne } from "../components/MessageBubble.js";
-import { useEditMessage as re, useGetMessages as ie, useMessageActions as ae, useSendMessage as oe } from "../hooks/useMessageQueries.js";
-import { useCallback as c, useEffect as l, useMemo as se, useRef as u, useState as d } from "react";
-import { Archive as ce, ArrowLeft as le, Bell as ue, BellOff as de, ExternalLink as fe, Hash as pe, Loader2 as me, MessageCircle as he, MoreVertical as ge, Pin as _e, PinOff as ve, SendHorizontal as ye, Users as be, X as xe } from "lucide-react";
-import { useNavigate as Se, useParams as Ce } from "react-router-dom";
-import { useEventBus as we } from "@burdenoff/fe-libs/shared/events";
-import { jsx as f, jsxs as p } from "react/jsx-runtime";
-import { useI18n as Te } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { nativeImpact as oe, nativeNotify as s } from "../../utils/nativeBridge.js";
+import { useCallback as c, useEffect as l, useMemo as u, useRef as d, useState as f } from "react";
+import { Archive as se, ArrowLeft as ce, Bell as le, BellOff as ue, ExternalLink as de, Hash as fe, Loader2 as pe, MessageCircle as me, MoreVertical as he, Pin as ge, PinOff as _e, SendHorizontal as ve, Users as ye, X as be } from "lucide-react";
+import { useNavigate as xe, useParams as Se } from "react-router-dom";
+import { useEventBus as Ce } from "@burdenoff/fe-libs/shared/events";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+import { useI18n as we } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
 //#region src/conversations/pages/ConversationDetailPage.tsx
-function m() {
-	let { conversationId: a } = Ce(), o = Se(), { basePath: m, currentUser: Ee } = e(), _ = we(), { t: De } = Te(), v = (e, t) => {
-		let n = De(e);
+var h = 100;
+function g() {
+	let { conversationId: a } = Se(), o = xe(), { basePath: g, currentUser: Te } = e(), y = Ce(), { t: Ee } = we(), b = (e, t) => {
+		let n = Ee(e);
 		return n === e ? t : n;
-	}, { clearMessageDraft: y, isParticipantsPanelOpen: b, messageDrafts: Oe, setMessageDraft: x, toggleParticipantsPanel: S } = ee(), [C, w] = d(Oe[a ?? ""] ?? ""), T = u(null), { conversation: E, loading: ke, error: D } = r(a ?? ""), { messages: O, loading: k, error: A } = ie(a ?? "", { first: 100 });
-	i(a);
-	let { sendMessage: j, loading: M } = oe(), { editMessage: N, loading: P } = re(), { deleteMessage: F, addReaction: I, removeReaction: L, pinMessage: R, unpinMessage: z } = ae(), { archiveConversation: B, pinConversation: V, unpinConversation: Ae, muteConversation: je, unmuteConversation: Me } = n(), [H, U] = d(!1), [W, G] = d(null), [K, q] = d(""), [J, Y] = d(null), X = u(null), Ne = Ee?.id ?? "", Z = E?.sourceContext;
+	}, { clearMessageDraft: x, isParticipantsPanelOpen: S, messageDrafts: De, setMessageDraft: C, toggleParticipantsPanel: w } = n(), [T, E] = f(De[a ?? ""] ?? ""), [D, O] = f([]), k = d(null), { conversation: A, loading: Oe, error: j } = ee(a ?? ""), { messages: M, loading: N, error: P } = ne(a ?? "", { first: h });
+	ae(a);
+	let { sendMessage: F, loading: I } = ie(), { editMessage: L, loading: R } = te(), { deleteMessage: z, addReaction: B, removeReaction: ke, pinMessage: Ae, unpinMessage: je } = re(), { archiveConversation: Me, pinConversation: Ne, unpinConversation: Pe, muteConversation: Fe, unmuteConversation: Ie } = i(), [V, H] = f(!1), [U, W] = f(null), [G, K] = f(""), [q, J] = f(null), Y = d(null), Le = Te?.id ?? "", X = A?.sourceContext, Z = u(() => {
+		let e = /* @__PURE__ */ new Map();
+		for (let t of D) t.conversationId === a && e.set(t.id, t);
+		for (let t of M) e.set(t.id, t);
+		return Array.from(e.values()).sort((e, t) => new Date(e.createdAt).getTime() - new Date(t.createdAt).getTime());
+	}, [
+		a,
+		D,
+		M
+	]);
 	l(() => {
-		T.current?.scrollIntoView({ behavior: "smooth" });
-	}, [O.length]), l(() => {
+		k.current?.scrollIntoView({ behavior: "smooth" });
+	}, [Z.length]), l(() => {
+		O([]);
+	}, [a]), l(() => {
+		if (D.length === 0 || M.length === 0) return;
+		let e = new Set(M.map((e) => e.id));
+		O((t) => {
+			let n = t.filter((t) => !e.has(t.id));
+			return n.length === t.length ? t : n;
+		});
+	}, [D.length, M]), l(() => {
 		if (a) {
-			if (C.trim()) {
-				x(a, C);
+			if (T.trim()) {
+				C(a, T);
 				return;
 			}
-			y(a);
+			x(a);
 		}
 	}, [
-		C,
+		T,
 		a,
-		x,
-		y
+		C,
+		x
 	]);
-	let Pe = se(() => {
+	let Re = u(() => {
 		let e = /* @__PURE__ */ new Map();
-		for (let t of O) !t.authorId || e.has(t.authorId) || e.set(t.authorId, {
+		for (let t of Z) !t.authorId || e.has(t.authorId) || e.set(t.authorId, {
 			id: t.authorId,
 			name: t.sender.name || t.authorId
 		});
 		return Array.from(e.values());
-	}, [O]), Q = c(async () => {
-		if (!a || !C.trim() || M) return;
-		let e = await j({
+	}, [Z]), Q = c(async () => {
+		if (!a || !T.trim() || I) return;
+		let e = await F({
 			conversationId: a,
-			content: C.trim(),
+			content: T.trim(),
 			type: "TEXT",
-			parentMessageId: J?.id
+			parentMessageId: q?.id,
+			refetchFirst: h
 		});
-		e && (_.emit("conversations.message.sent", {
+		e && (O((t) => [...t, e]), y.emit("conversations.message.sent", {
 			messageId: e.id,
 			conversationId: a
-		}), w(""), Y(null), y(a));
+		}), E(""), J(null), x(a));
 	}, [
-		_,
-		a,
-		C,
-		M,
-		j,
 		y,
-		J
-	]), Fe = c((e) => {
+		a,
+		T,
+		I,
+		F,
+		x,
+		q
+	]), ze = c((e) => {
 		e.key !== "Enter" || e.shiftKey || (e.preventDefault(), Q());
 	}, [Q]);
 	l(() => {
-		a && _.emit("conversations.conversation.opened", { conversationId: a });
-	}, [_, a]), l(() => {
-		if (!H) return;
+		a && y.emit("conversations.conversation.opened", { conversationId: a });
+	}, [y, a]), l(() => {
+		if (!V) return;
 		let e = (e) => {
-			X.current && !X.current.contains(e.target) && U(!1);
+			Y.current && !Y.current.contains(e.target) && H(!1);
 		};
 		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
-	}, [H]);
-	let Ie = c((e) => {
-		Y({
+	}, [V]);
+	let Be = c((e) => {
+		J({
 			id: e.id,
 			content: e.content,
 			sender: e.sender.name
 		});
-	}, []), Le = c(async (e, t) => {
+	}, []), Ve = c(async (e, t) => {
 		try {
-			await I(e, t);
+			await B(e, t);
 		} catch {
-			await L(e, t).catch(() => {});
+			await ke(e, t).catch(() => {});
 		}
-	}, [I, L]), Re = c((e) => {
-		G(e.id), q(e.content);
-	}, []), ze = c(async () => {
-		!W || !K.trim() || P || (await N(W, K.trim()), G(null), q(""));
+	}, [B, ke]), He = c((e) => {
+		W(e.id), K(e.content);
+	}, []), Ue = c(async () => {
+		!U || !G.trim() || R || (await L(U, G.trim()), W(null), K(""));
 	}, [
-		W,
-		K,
-		P,
-		N
+		U,
+		G,
+		R,
+		L
 	]), $ = c(() => {
-		G(null), q("");
-	}, []), Be = c(async (e) => {
-		te("medium");
+		W(null), K("");
+	}, []), We = c(async (e) => {
+		oe("medium");
 		try {
-			await F(e), s("success");
+			await z(e), s("success");
 		} catch (e) {
 			throw s("error"), e;
 		}
-	}, [F]), Ve = c(async (e, t) => {
+	}, [z]), Ge = c(async (e, t) => {
 		if (t) {
-			await z(e);
+			await je(e);
 			return;
 		}
-		await R(e);
-	}, [R, z]), He = c(async () => {
-		a && (E?.isPinned ? await Ae(a) : await V(a), U(!1));
+		await Ae(e);
+	}, [Ae, je]), Ke = c(async () => {
+		a && (A?.isPinned ? await Pe(a) : await Ne(a), H(!1));
 	}, [
 		a,
-		E?.isPinned,
-		V,
-		Ae
-	]), Ue = c(async () => {
-		a && (E?.isMuted ? await Me(a) : await je(a), U(!1));
+		A?.isPinned,
+		Ne,
+		Pe
+	]), qe = c(async () => {
+		a && (A?.isMuted ? await Ie(a) : await Fe(a), H(!1));
 	}, [
 		a,
-		E?.isMuted,
-		je,
-		Me
-	]), We = c(async () => {
-		a && (await B(a), _.emit("conversations.conversation.archived", { conversationId: a }), U(!1), o(m || "/conversations"));
+		A?.isMuted,
+		Fe,
+		Ie
+	]), Je = c(async () => {
+		a && (await Me(a), y.emit("conversations.conversation.archived", { conversationId: a }), H(!1), o(g || "/conversations"));
 	}, [
-		B,
-		m,
-		_,
+		Me,
+		g,
+		y,
 		a,
 		o
-	]), Ge = c(() => {
-		if (Z?.contextHref) {
+	]), Ye = c(() => {
+		if (X?.contextHref) {
 			try {
-				let e = new URL(Z.contextHref);
+				let e = new URL(X.contextHref);
 				if (e.origin === window.location.origin) {
 					o(`${e.pathname}${e.search}${e.hash}`);
 					return;
 				}
 			} catch {}
-			window.location.assign(Z.contextHref);
+			window.location.assign(X.contextHref);
 		}
-	}, [o, Z?.contextHref]);
-	return !E && ke ? /* @__PURE__ */ f("div", {
+	}, [o, X?.contextHref]);
+	return !A && Oe ? /* @__PURE__ */ p("div", {
 		className: "flex items-center justify-center h-[calc(100vh-64px)] text-sm text-muted-foreground",
-		children: v("conversations.loading", "Loading conversation...")
-	}) : !E || D ? /* @__PURE__ */ p("div", {
+		children: b("conversations.loading", "Loading conversation...")
+	}) : !A || j ? /* @__PURE__ */ m("div", {
 		className: "flex flex-col items-center justify-center h-[calc(100vh-64px)] text-center gap-3 px-4",
 		children: [
-			/* @__PURE__ */ f(he, { className: "h-8 w-8 text-muted-foreground" }),
-			/* @__PURE__ */ f("p", {
+			/* @__PURE__ */ p(me, { className: "h-8 w-8 text-muted-foreground" }),
+			/* @__PURE__ */ p("p", {
 				className: "text-sm text-muted-foreground",
-				children: D ? v("conversations.unavailable", "We couldn't load this conversation. Please try again.") : v("conversations.notFound", "Conversation not found")
+				children: j ? b("conversations.unavailable", "We couldn't load this conversation. Please try again.") : b("conversations.notFound", "Conversation not found")
 			}),
-			/* @__PURE__ */ f("button", {
+			/* @__PURE__ */ p("button", {
 				type: "button",
-				onClick: () => o(m || "/conversations"),
+				onClick: () => o(g || "/conversations"),
 				className: "px-3 py-2 text-sm font-medium rounded-lg border border-border hover:bg-muted/50",
-				children: v("conversations.back", "Back to conversations")
+				children: b("conversations.back", "Back to conversations")
 			})
 		]
-	}) : /* @__PURE__ */ p("div", {
-		className: "flex h-[calc(100vh-64px)] bg-background",
-		children: [/* @__PURE__ */ p("div", {
+	}) : /* @__PURE__ */ m("div", {
+		className: "relative flex h-[calc(100vh-64px)] bg-background",
+		children: [/* @__PURE__ */ m("div", {
 			className: "flex-1 flex flex-col min-w-0",
 			children: [
-				/* @__PURE__ */ p("header", {
+				/* @__PURE__ */ m("header", {
 					className: "flex items-center justify-between px-4 py-3 border-b border-border bg-background/95 backdrop-blur-sm",
-					children: [/* @__PURE__ */ p("div", {
+					children: [/* @__PURE__ */ m("div", {
 						className: "flex items-center gap-3 min-w-0",
-						children: [/* @__PURE__ */ f("button", {
+						children: [/* @__PURE__ */ p("button", {
 							type: "button",
-							onClick: () => o(m || "/conversations"),
-							className: "p-1.5 rounded-lg text-muted-foreground hover:text-foreground hover:bg-muted/50 transition-colors",
-							children: /* @__PURE__ */ f(le, { size: 18 })
-						}), /* @__PURE__ */ p("div", {
+							onClick: () => o(g || "/conversations"),
+							className: "flex min-h-10 min-w-10 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-muted/50 hover:text-foreground",
+							children: /* @__PURE__ */ p(ce, { size: 18 })
+						}), /* @__PURE__ */ m("div", {
 							className: "min-w-0",
-							children: [/* @__PURE__ */ p("div", {
+							children: [/* @__PURE__ */ m("div", {
 								className: "flex items-center gap-1.5",
-								children: [E.type === "CHANNEL" && /* @__PURE__ */ f(pe, {
+								children: [A.type === "CHANNEL" && /* @__PURE__ */ p(fe, {
 									size: 14,
 									className: "text-muted-foreground flex-shrink-0"
-								}), /* @__PURE__ */ f("h2", {
+								}), /* @__PURE__ */ p("h2", {
 									className: "text-sm font-semibold text-foreground truncate",
-									children: E.title
+									children: A.title
 								})]
-							}), /* @__PURE__ */ f("p", {
+							}), /* @__PURE__ */ p("p", {
 								className: "text-xs text-muted-foreground",
-								children: E.type === "DIRECT" ? v("conversations.directConversation", "Direct conversation") : E.type === "CHANNEL" ? `${v("conversations.channel", "Channel")} · ${E.memberCount} ${v("conversations.membersCountLabel", "members")}` : E.type === "ANNOUNCEMENT" ? `${v("conversations.announcement", "Announcement")} · ${E.memberCount} ${v("conversations.membersCountLabel", "members")}` : `${E.memberCount} ${v("conversations.membersCountLabel", "members")}`
+								children: A.type === "DIRECT" ? b("conversations.directConversation", "Direct conversation") : A.type === "CHANNEL" ? `${b("conversations.channel", "Channel")} · ${A.memberCount} ${b("conversations.membersCountLabel", "members")}` : A.type === "ANNOUNCEMENT" ? `${b("conversations.announcement", "Announcement")} · ${A.memberCount} ${b("conversations.membersCountLabel", "members")}` : `${A.memberCount} ${b("conversations.membersCountLabel", "members")}`
 							})]
 						})]
-					}), /* @__PURE__ */ p("div", {
-						className: "flex items-center gap-1",
+					}), /* @__PURE__ */ m("div", {
+						className: "flex shrink-0 items-center gap-1",
 						children: [
-							Z?.contextHref && /* @__PURE__ */ f(g, {
-								icon: /* @__PURE__ */ f(fe, { size: 16 }),
-								label: v("conversations.openContext", "Open context"),
-								onClick: Ge
+							X?.contextHref && /* @__PURE__ */ p(v, {
+								icon: /* @__PURE__ */ p(de, { size: 16 }),
+								label: b("conversations.openContext", "Open context"),
+								onClick: Ye
 							}),
-							E.isGroup && /* @__PURE__ */ f(g, {
-								icon: /* @__PURE__ */ f(be, { size: 16 }),
-								label: v("conversations.participants", "Participants"),
-								active: b,
-								onClick: S
+							A.isGroup && /* @__PURE__ */ p(v, {
+								icon: /* @__PURE__ */ p(ye, { size: 16 }),
+								label: b("conversations.participants", "Participants"),
+								active: S,
+								onClick: w
 							}),
-							/* @__PURE__ */ p("div", {
+							/* @__PURE__ */ m("div", {
 								className: "relative",
-								ref: X,
-								children: [/* @__PURE__ */ f(g, {
-									icon: /* @__PURE__ */ f(ge, { size: 16 }),
-									label: v("conversations.moreOptions", "More options"),
-									active: H,
-									onClick: () => U((e) => !e)
-								}), H && /* @__PURE__ */ p("div", {
+								ref: Y,
+								children: [/* @__PURE__ */ p(v, {
+									icon: /* @__PURE__ */ p(he, { size: 16 }),
+									label: b("conversations.moreOptions", "More options"),
+									active: V,
+									onClick: () => H((e) => !e)
+								}), V && /* @__PURE__ */ m("div", {
 									className: "absolute right-0 top-full mt-1 w-48 bg-popover border border-border rounded-lg shadow-lg z-50 py-1 animate-in fade-in-0 zoom-in-95 duration-100",
 									children: [
-										/* @__PURE__ */ f(h, {
-											icon: E.isPinned ? /* @__PURE__ */ f(ve, { size: 14 }) : /* @__PURE__ */ f(_e, { size: 14 }),
-											label: E.isPinned ? v("conversations.unpinConversation", "Unpin conversation") : v("conversations.pinConversation", "Pin conversation"),
-											onClick: () => void He()
+										/* @__PURE__ */ p(_, {
+											icon: A.isPinned ? /* @__PURE__ */ p(_e, { size: 14 }) : /* @__PURE__ */ p(ge, { size: 14 }),
+											label: A.isPinned ? b("conversations.unpinConversation", "Unpin conversation") : b("conversations.pinConversation", "Pin conversation"),
+											onClick: () => void Ke()
 										}),
-										/* @__PURE__ */ f(h, {
-											icon: E.isMuted ? /* @__PURE__ */ f(ue, { size: 14 }) : /* @__PURE__ */ f(de, { size: 14 }),
-											label: E.isMuted ? v("conversations.unmuteConversation", "Unmute conversation") : v("conversations.muteConversation", "Mute conversation"),
-											onClick: () => void Ue()
+										/* @__PURE__ */ p(_, {
+											icon: A.isMuted ? /* @__PURE__ */ p(le, { size: 14 }) : /* @__PURE__ */ p(ue, { size: 14 }),
+											label: A.isMuted ? b("conversations.unmuteConversation", "Unmute conversation") : b("conversations.muteConversation", "Mute conversation"),
+											onClick: () => void qe()
 										}),
-										/* @__PURE__ */ f("div", { className: "h-px bg-border my-1" }),
-										/* @__PURE__ */ f(h, {
-											icon: /* @__PURE__ */ f(ce, { size: 14 }),
-											label: v("conversations.archiveConversation", "Archive conversation"),
-											onClick: () => void We(),
+										/* @__PURE__ */ p("div", { className: "h-px bg-border my-1" }),
+										/* @__PURE__ */ p(_, {
+											icon: /* @__PURE__ */ p(se, { size: 14 }),
+											label: b("conversations.archiveConversation", "Archive conversation"),
+											onClick: () => void Je(),
 											destructive: !0
 										})
 									]
@@ -243,106 +263,107 @@ function m() {
 						]
 					})]
 				}),
-				/* @__PURE__ */ p("div", {
+				/* @__PURE__ */ m("div", {
 					className: "flex-1 overflow-y-auto py-4 space-y-0.5",
 					children: [
-						Z?.pagePath && /* @__PURE__ */ p("div", {
+						X?.pagePath && /* @__PURE__ */ m("div", {
 							className: "mx-4 mb-4 rounded-lg border border-border bg-muted/20 px-3 py-2 text-xs text-muted-foreground",
-							children: [/* @__PURE__ */ f("span", {
+							children: [/* @__PURE__ */ p("span", {
 								className: "font-medium text-foreground",
-								children: Z.contextTitle || Z.pagePath
-							}), Z.entityType && Z.entityId ? ` · ${Z.entityType} ${Z.entityId}` : ""]
+								children: X.contextTitle || X.pagePath
+							}), X.entityType && X.entityId ? ` · ${X.entityType} ${X.entityId}` : ""]
 						}),
-						A && /* @__PURE__ */ f("div", {
+						P && /* @__PURE__ */ p("div", {
 							className: "mx-4 mb-4 rounded-lg border border-status-warning-border bg-status-warning-bg px-3 py-2 text-sm text-status-warning-text",
-							children: v("conversations.messagesUnavailable", "Messages couldn't be loaded right now. The conversation header and actions are still available.")
+							children: b("conversations.messagesUnavailable", "Messages couldn't be loaded right now. The conversation header and actions are still available.")
 						}),
-						k && /* @__PURE__ */ p("div", {
+						N && /* @__PURE__ */ m("div", {
 							className: "mx-4 mb-4 flex items-center gap-2 rounded-lg border border-border bg-muted/20 px-3 py-2 text-sm text-muted-foreground",
-							children: [/* @__PURE__ */ f(me, {
+							children: [/* @__PURE__ */ p(pe, {
 								size: 14,
 								className: "animate-spin"
-							}), v("conversations.loadingMessages", "Loading messages...")]
+							}), b("conversations.loadingMessages", "Loading messages...")]
 						}),
-						!k && !A && O.length === 0 && /* @__PURE__ */ f("div", {
+						!N && !P && Z.length === 0 && /* @__PURE__ */ p("div", {
 							className: "mx-4 mb-4 rounded-lg border border-dashed border-border bg-muted/20 px-3 py-6 text-center text-sm text-muted-foreground",
-							children: v("conversations.noMessagesYet", "No messages yet. Start the conversation below.")
+							children: b("conversations.noMessagesYet", "No messages yet. Start the conversation below.")
 						}),
-						O.map((e, t) => {
-							let n = O[t - 1], r = !n || n.authorId !== e.authorId || n.type === "SYSTEM";
-							return /* @__PURE__ */ f("div", { children: W === e.id ? /* @__PURE__ */ p("div", {
+						Z.map((e, t) => {
+							let n = Z[t - 1], i = !n || n.authorId !== e.authorId || n.type === "SYSTEM";
+							return /* @__PURE__ */ p("div", { children: U === e.id ? /* @__PURE__ */ m("div", {
 								className: "px-4 py-2",
-								children: [/* @__PURE__ */ p("div", {
+								children: [/* @__PURE__ */ m("div", {
 									className: "flex items-center gap-2 text-xs text-muted-foreground mb-1",
-									children: [/* @__PURE__ */ f("span", { children: v("conversations.editingMessage", "Editing message") }), /* @__PURE__ */ f("button", {
+									children: [/* @__PURE__ */ p("span", { children: b("conversations.editingMessage", "Editing message") }), /* @__PURE__ */ p("button", {
 										type: "button",
 										onClick: $,
 										className: "hover:text-foreground",
-										children: /* @__PURE__ */ f(xe, { size: 12 })
+										children: /* @__PURE__ */ p(be, { size: 12 })
 									})]
-								}), /* @__PURE__ */ p("div", {
+								}), /* @__PURE__ */ m("div", {
 									className: "flex items-end gap-2",
-									children: [/* @__PURE__ */ f("textarea", {
-										value: K,
-										onChange: (e) => q(e.target.value),
+									children: [/* @__PURE__ */ p("textarea", {
+										value: G,
+										onChange: (e) => K(e.target.value),
 										onKeyDown: (e) => {
-											e.key === "Enter" && !e.shiftKey && (e.preventDefault(), ze()), e.key === "Escape" && $();
+											e.key === "Enter" && !e.shiftKey && (e.preventDefault(), Ue()), e.key === "Escape" && $();
 										},
 										className: "flex-1 px-3 py-2 text-sm rounded-lg border border-border bg-muted/30 resize-none focus:outline-none focus:ring-2 focus:ring-ring",
 										rows: 2
-									}), /* @__PURE__ */ f("button", {
+									}), /* @__PURE__ */ p("button", {
 										type: "button",
-										onClick: () => void ze(),
-										disabled: !K.trim() || P,
+										onClick: () => void Ue(),
+										disabled: !G.trim() || R,
 										className: "px-3 py-2 text-xs font-medium rounded-lg bg-primary text-primary-foreground hover:bg-primary/90 disabled:opacity-50",
-										children: v("conversations.save", "Save")
+										children: b("conversations.save", "Save")
 									})]
 								})]
-							}) : /* @__PURE__ */ f(ne, {
+							}) : /* @__PURE__ */ p(r, {
 								message: e,
-								isOwnMessage: e.authorId === Ne,
-								showAvatar: r,
-								showSender: r,
-								onReply: Ie,
-								onReact: (e, t) => void Le(e, t),
-								onEdit: Re,
-								onDelete: (e) => void Be(e),
-								onTogglePin: (e, t) => void Ve(e, t)
+								isOwnMessage: e.authorId === Le,
+								showAvatar: i,
+								showSender: i,
+								onReply: Be,
+								onReact: (e, t) => void Ve(e, t),
+								onEdit: He,
+								onDelete: (e) => void We(e),
+								onTogglePin: (e, t) => void Ge(e, t)
 							}) }, e.id);
 						}),
-						/* @__PURE__ */ f("div", { ref: T })
+						/* @__PURE__ */ p("div", { ref: k })
 					]
 				}),
-				/* @__PURE__ */ p("div", {
+				/* @__PURE__ */ m("div", {
 					className: "border-t border-border px-4 py-3 bg-background",
-					children: [J && /* @__PURE__ */ p("div", {
+					children: [q && /* @__PURE__ */ m("div", {
 						className: "flex items-center gap-2 mb-2 px-3 py-1.5 rounded-lg bg-muted/50 text-xs text-muted-foreground",
-						children: [/* @__PURE__ */ p("span", { children: [
-							v("conversations.replyingTo", "Replying to"),
+						children: [/* @__PURE__ */ m("span", { children: [
+							b("conversations.replyingTo", "Replying to"),
 							" ",
-							/* @__PURE__ */ f("strong", {
+							/* @__PURE__ */ p("strong", {
 								className: "text-foreground",
-								children: J.sender
+								children: q.sender
 							}),
 							": ",
-							J.content.slice(0, 80),
-							J.content.length > 80 ? "…" : ""
-						] }), /* @__PURE__ */ f("button", {
+							q.content.slice(0, 80),
+							q.content.length > 80 ? "…" : ""
+						] }), /* @__PURE__ */ p("button", {
 							type: "button",
-							onClick: () => Y(null),
-							className: "ml-auto hover:text-foreground",
-							children: /* @__PURE__ */ f(xe, { size: 12 })
+							onClick: () => J(null),
+							"aria-label": b("conversations.cancelReply", "Cancel reply"),
+							className: "ml-auto flex min-h-9 min-w-9 items-center justify-center rounded-md hover:bg-muted/70 hover:text-foreground",
+							children: /* @__PURE__ */ p(be, { size: 12 })
 						})]
-					}), /* @__PURE__ */ p("div", {
+					}), /* @__PURE__ */ m("div", {
 						className: "flex items-end gap-2",
-						children: [/* @__PURE__ */ f("div", {
+						children: [/* @__PURE__ */ p("div", {
 							className: "flex-1 relative",
-							children: /* @__PURE__ */ f("textarea", {
-								"aria-label": v("conversations.messageComposer", "Message composer"),
-								value: C,
-								onChange: (e) => w(e.target.value),
-								onKeyDown: Fe,
-								placeholder: `${v("conversations.messageConversationPrefix", "Message")} ${E.title}...`,
+							children: /* @__PURE__ */ p("textarea", {
+								"aria-label": b("conversations.messageComposer", "Message composer"),
+								value: T,
+								onChange: (e) => E(e.target.value),
+								onKeyDown: ze,
+								placeholder: `${b("conversations.messageConversationPrefix", "Message")} ${A.title}...`,
 								rows: 1,
 								className: t("w-full px-4 py-2.5 text-sm rounded-xl border border-border bg-muted/30", "resize-none overflow-hidden placeholder:text-muted-foreground", "focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent max-h-32"),
 								style: {
@@ -354,55 +375,55 @@ function m() {
 									t.style.height = "auto", t.style.height = `${Math.min(t.scrollHeight, 128)}px`;
 								}
 							})
-						}), /* @__PURE__ */ f("button", {
+						}), /* @__PURE__ */ p("button", {
 							type: "button",
-							"aria-label": v("conversations.sendMessage", "Send message"),
+							"aria-label": b("conversations.sendMessage", "Send message"),
 							onClick: () => void Q(),
-							disabled: !C.trim() || M,
-							className: t("p-2.5 rounded-xl transition-all duration-150", C.trim() && !M ? "bg-primary text-primary-foreground hover:bg-primary/90 shadow-sm" : "bg-muted text-muted-foreground cursor-not-allowed"),
-							children: M ? /* @__PURE__ */ f(me, {
+							disabled: !T.trim() || I,
+							className: t("p-2.5 rounded-xl transition-all duration-150", T.trim() && !I ? "bg-primary text-primary-foreground hover:bg-primary/90 shadow-sm" : "bg-muted text-muted-foreground cursor-not-allowed"),
+							children: I ? /* @__PURE__ */ p(pe, {
 								size: 18,
 								className: "animate-spin"
-							}) : /* @__PURE__ */ f(ye, { size: 18 })
+							}) : /* @__PURE__ */ p(ve, { size: 18 })
 						})]
 					})]
 				})
 			]
-		}), b && E.isGroup && /* @__PURE__ */ f("aside", {
-			className: "w-64 border-l border-border bg-background overflow-y-auto animate-in slide-in-from-right-4 duration-200",
-			children: /* @__PURE__ */ p("div", {
+		}), S && A.isGroup && /* @__PURE__ */ p("aside", {
+			className: "absolute inset-y-0 right-0 z-20 w-full max-w-72 border-l border-border bg-background shadow-lg animate-in slide-in-from-right-4 duration-200 md:relative md:z-auto md:w-64 md:shadow-none",
+			children: /* @__PURE__ */ m("div", {
 				className: "p-4",
-				children: [/* @__PURE__ */ p("div", {
+				children: [/* @__PURE__ */ m("div", {
 					className: "flex items-center justify-between mb-4",
-					children: [/* @__PURE__ */ p("h3", {
+					children: [/* @__PURE__ */ m("h3", {
 						className: "text-sm font-semibold text-foreground",
 						children: [
-							v("conversations.members", "Members"),
+							b("conversations.members", "Members"),
 							" (",
-							Pe.length || E.memberCount,
+							Re.length || A.memberCount,
 							")"
 						]
-					}), /* @__PURE__ */ f("button", {
+					}), /* @__PURE__ */ p("button", {
 						type: "button",
-						onClick: S,
+						onClick: w,
 						className: "p-1 rounded text-muted-foreground hover:text-foreground",
-						children: /* @__PURE__ */ f(_e, { size: 14 })
+						children: /* @__PURE__ */ p(ge, { size: 14 })
 					})]
-				}), /* @__PURE__ */ f("div", {
+				}), /* @__PURE__ */ p("div", {
 					className: "space-y-1",
-					children: Pe.map((e) => /* @__PURE__ */ p("div", {
+					children: Re.map((e) => /* @__PURE__ */ m("div", {
 						className: "flex items-center gap-2.5 px-2 py-1.5 rounded-lg hover:bg-muted/50",
-						children: [/* @__PURE__ */ f("div", {
+						children: [/* @__PURE__ */ p("div", {
 							className: "w-7 h-7 rounded-full bg-muted flex items-center justify-center text-xs font-medium text-muted-foreground",
 							children: e.name.split(" ").map((e) => e[0]).join("").slice(0, 2)
-						}), /* @__PURE__ */ p("div", {
+						}), /* @__PURE__ */ m("div", {
 							className: "min-w-0",
-							children: [/* @__PURE__ */ f("p", {
+							children: [/* @__PURE__ */ p("p", {
 								className: "text-xs font-medium text-foreground truncate",
 								children: e.name
-							}), /* @__PURE__ */ f("p", {
+							}), /* @__PURE__ */ p("p", {
 								className: "text-[10px] text-muted-foreground",
-								children: v("conversations.member", "Member")
+								children: b("conversations.member", "Member")
 							})]
 						})]
 					}, e.id))
@@ -411,29 +432,29 @@ function m() {
 		})]
 	});
 }
-function h({ icon: e, label: n, onClick: r, destructive: i }) {
-	return /* @__PURE__ */ p("button", {
+function _({ icon: e, label: n, onClick: r, destructive: i }) {
+	return /* @__PURE__ */ m("button", {
 		type: "button",
 		onClick: r,
 		className: t("flex items-center gap-2.5 w-full px-3 py-2 text-sm transition-colors text-left", i ? "text-destructive hover:bg-destructive/10" : "text-foreground hover:bg-muted/50"),
-		children: [e, /* @__PURE__ */ f("span", { children: n })]
+		children: [e, /* @__PURE__ */ p("span", { children: n })]
 	});
 }
-function g({ icon: e, label: n, active: r, onClick: i }) {
-	return /* @__PURE__ */ f(a, {
+function v({ icon: e, label: n, active: r, onClick: i }) {
+	return /* @__PURE__ */ p(a, {
 		permission: o.CONVERSATION_READ,
 		allowUnavailablePermissions: !0,
-		children: /* @__PURE__ */ f("button", {
+		children: /* @__PURE__ */ p("button", {
 			type: "button",
 			onClick: i,
 			"aria-label": n,
 			title: n,
-			className: t("p-2 rounded-lg transition-colors", r ? "bg-primary/10 text-primary" : "text-muted-foreground hover:text-foreground hover:bg-muted/50"),
+			className: t("flex min-h-10 min-w-10 items-center justify-center rounded-lg transition-colors", r ? "bg-primary/10 text-primary" : "text-muted-foreground hover:text-foreground hover:bg-muted/50"),
 			children: e
 		})
 	});
 }
 //#endregion
-export { m as ConversationDetailPage };
+export { g as ConversationDetailPage };
 
 //# sourceMappingURL=ConversationDetailPage.js.map