@burdenoff/microfe-conversations 2026.528.1 → 2026.529.1

package/dist/conversations/components/NewConversationDialog.js

@@ -0,0 +1,285 @@
+import { useTr as e } from "../utils/i18n.js";
+import { cn as t } from "../utils/cn.js";
+import { useCreateConversation as n } from "../hooks/useConversationQueries.js";
+import { nativeImpact as r, nativeNotify as i } from "../../utils/nativeBridge.js";
+import { useCallback as a, useMemo as o, useState as s } from "react";
+import { Globe as c, Hash as l, Lock as u, Megaphone as d, MessageCircle as ee, Shield as f, Users as p, X as m } from "lucide-react";
+import { useEventBus as h } from "@burdenoff/fe-libs/shared/events";
+import { jsx as g, jsxs as _ } from "react/jsx-runtime";
+import { Dialog as v, DialogContent as y, DialogDescription as b, DialogFooter as x, DialogHeader as S, DialogTitle as C } from "@burdenoff/fe-libs/ui";
+//#region src/conversations/components/NewConversationDialog.tsx
+function te(e) {
+	if ("graphQLErrors" in e) {
+		let t = e.graphQLErrors;
+		if (t && t.length > 0 && t[0]?.message) return t[0].message;
+	}
+	return e.message;
+}
+function w({ open: w, onOpenChange: T, onCreated: E }) {
+	let { createConversation: D, loading: O, error: k } = n(), A = h(), j = e(), M = o(() => [
+		{
+			type: "DIRECT",
+			label: j("conversations.directMessage", "Direct Message"),
+			description: j("conversations.directMessageDescription", "One-on-one private conversation"),
+			icon: /* @__PURE__ */ g(ee, { size: 20 })
+		},
+		{
+			type: "GROUP",
+			label: j("conversations.groupChat", "Group Chat"),
+			description: j("conversations.groupChatDescription", "Invite multiple people to a group conversation"),
+			icon: /* @__PURE__ */ g(p, { size: 20 })
+		},
+		{
+			type: "CHANNEL",
+			label: j("conversations.channel", "Channel"),
+			description: j("conversations.channelDescription", "A topic-based channel that anyone can join"),
+			icon: /* @__PURE__ */ g(l, { size: 20 })
+		},
+		{
+			type: "ANNOUNCEMENT",
+			label: j("conversations.announcement", "Announcement"),
+			description: j("conversations.announcementDescription", "Broadcast messages to a large audience"),
+			icon: /* @__PURE__ */ g(d, { size: 20 })
+		}
+	], [j]), N = o(() => [
+		{
+			value: "PUBLIC",
+			label: j("conversations.public", "Public"),
+			description: j("conversations.publicDescription", "Anyone in the workspace can discover and join"),
+			icon: /* @__PURE__ */ g(c, { size: 16 })
+		},
+		{
+			value: "PRIVATE",
+			label: j("conversations.private", "Private"),
+			description: j("conversations.privateDescription", "Only invited members can access"),
+			icon: /* @__PURE__ */ g(u, { size: 16 })
+		},
+		{
+			value: "PROTECTED",
+			label: j("conversations.protected", "Protected"),
+			description: j("conversations.protectedDescription", "Discoverable but requires approval to join"),
+			icon: /* @__PURE__ */ g(f, { size: 16 })
+		}
+	], [j]), [P, F] = s("GROUP"), [I, L] = s(""), [R, z] = s(""), [B, V] = s("PRIVATE"), [H, U] = s(""), [W, G] = s([]), K = P === "DIRECT", q = !K, J = a(() => {
+		F("GROUP"), L(""), z(""), V("PRIVATE"), U(""), G([]);
+	}, []), Y = a(() => {
+		let e = H.trim();
+		!e || W.includes(e) || (G(K ? [e] : (t) => [...t, e]), U(""));
+	}, [
+		H,
+		W,
+		K
+	]), X = a((e) => {
+		G((t) => t.filter((t) => t !== e));
+	}, []), Z = P === "DIRECT" || P === "GROUP", Q = a((e) => {
+		e || J(), T(e);
+	}, [T, J]), ne = a(async () => {
+		if (!(Z && W.length === 0) && !(q && !I.trim())) {
+			r("light");
+			try {
+				let e = await D({
+					type: P,
+					title: q ? I.trim() : void 0,
+					description: R.trim() || void 0,
+					participantIds: W,
+					visibility: B
+				});
+				if (!e) {
+					i("error");
+					return;
+				}
+				i("success"), A.emit("conversations.conversation.created", {
+					conversationId: e.id,
+					conversationType: P,
+					source: "new-conversation-dialog"
+				}), J(), T(!1), E?.(e.id);
+			} catch (e) {
+				throw i("error"), e;
+			}
+		}
+	}, [
+		A,
+		Z,
+		W,
+		q,
+		I,
+		D,
+		P,
+		R,
+		B,
+		J,
+		T,
+		E
+	]), $ = (!Z || W.length > 0) && (!q || I.trim().length > 0);
+	return /* @__PURE__ */ g(v, {
+		open: w,
+		onOpenChange: Q,
+		children: /* @__PURE__ */ _(y, {
+			className: "sm:max-w-[640px] max-h-[90vh] overflow-y-auto",
+			"data-tour": "new-conversation-dialog",
+			children: [
+				/* @__PURE__ */ _(S, { children: [/* @__PURE__ */ g(C, { children: j("conversations.newConversation", "New Conversation") }), /* @__PURE__ */ g(b, { children: j("conversations.newConversationSubtitle", "Start a new conversation with your team") })] }),
+				/* @__PURE__ */ _("div", {
+					className: "space-y-6",
+					children: [
+						/* @__PURE__ */ _("section", {
+							"data-tour": "conversation-type-selector",
+							className: "space-y-3",
+							children: [/* @__PURE__ */ g("h3", {
+								className: "text-sm font-semibold text-foreground",
+								children: j("conversations.conversationType", "Conversation Type")
+							}), /* @__PURE__ */ g("div", {
+								className: "grid grid-cols-1 sm:grid-cols-2 gap-3",
+								children: M.map((e) => /* @__PURE__ */ _("button", {
+									type: "button",
+									onClick: () => {
+										F(e.type), e.type === "DIRECT" && G((e) => e.slice(0, 1));
+									},
+									className: t("flex items-start gap-3 p-4 rounded-xl border text-left transition-all duration-150", P === e.type ? "border-primary bg-primary/5 ring-1 ring-primary/20" : "border-border hover:border-muted-foreground/30 hover:bg-muted/30"),
+									children: [/* @__PURE__ */ g("div", {
+										className: t("p-2 rounded-lg", P === e.type ? "bg-primary/10 text-primary" : "bg-muted text-muted-foreground"),
+										children: e.icon
+									}), /* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("p", {
+										className: "text-sm font-medium text-foreground",
+										children: e.label
+									}), /* @__PURE__ */ g("p", {
+										className: "text-xs text-muted-foreground mt-0.5",
+										children: e.description
+									})] })]
+								}, e.type))
+							})]
+						}),
+						!K && /* @__PURE__ */ _("section", {
+							"data-tour": "conversation-visibility-selector",
+							className: "space-y-3",
+							children: [
+								/* @__PURE__ */ g("h3", {
+									className: "text-sm font-semibold text-foreground",
+									children: j("conversations.visibility", "Visibility")
+								}),
+								/* @__PURE__ */ g("div", {
+									className: "flex gap-2 flex-wrap",
+									children: N.map((e) => /* @__PURE__ */ _("button", {
+										type: "button",
+										onClick: () => V(e.value),
+										className: t("flex items-center gap-2 px-4 py-2.5 rounded-lg border text-sm transition-all", B === e.value ? "border-primary bg-primary/5 text-primary font-medium" : "border-border text-muted-foreground hover:text-foreground hover:bg-muted/30"),
+										children: [e.icon, e.label]
+									}, e.value))
+								}),
+								/* @__PURE__ */ g("p", {
+									className: "text-xs text-muted-foreground",
+									children: N.find((e) => e.value === B)?.description
+								})
+							]
+						}),
+						q && /* @__PURE__ */ _("section", {
+							"data-tour": "conversation-create-details",
+							className: "space-y-3",
+							children: [/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ _("label", {
+								htmlFor: "conv-title",
+								className: "text-sm font-semibold text-foreground",
+								children: [
+									j("conversations.name", "Name"),
+									" ",
+									/* @__PURE__ */ g("span", {
+										className: "text-destructive",
+										children: "*"
+									})
+								]
+							}), /* @__PURE__ */ g("input", {
+								id: "conv-title",
+								type: "text",
+								value: I,
+								onChange: (e) => L(e.target.value),
+								placeholder: P === "CHANNEL" ? j("conversations.channelNamePlaceholder", "e.g., engineering-general") : j("conversations.conversationNamePlaceholder", "e.g., Product Launch Q1"),
+								maxLength: 200,
+								className: "mt-1.5 w-full px-3 py-2 text-sm rounded-lg border border-border bg-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
+							})] }), /* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("label", {
+								htmlFor: "conv-desc",
+								className: "text-sm font-semibold text-foreground",
+								children: j("conversations.description", "Description")
+							}), /* @__PURE__ */ g("textarea", {
+								id: "conv-desc",
+								value: R,
+								onChange: (e) => z(e.target.value),
+								placeholder: j("conversations.descriptionPlaceholder", "What is this conversation about?"),
+								rows: 2,
+								maxLength: 1e3,
+								className: "mt-1.5 w-full px-3 py-2 text-sm rounded-lg border border-border bg-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring resize-none"
+							})] })]
+						}),
+						/* @__PURE__ */ _("section", {
+							"data-tour": "conversation-participants",
+							className: "space-y-3",
+							children: [
+								/* @__PURE__ */ _("h3", {
+									className: "text-sm font-semibold text-foreground",
+									children: [K ? j("conversations.participantId", "Participant ID") : j("conversations.participantIds", "Participant IDs"), !Z && /* @__PURE__ */ _("span", {
+										className: "ml-1.5 text-xs font-normal text-muted-foreground",
+										children: [
+											"(",
+											j("conversations.optional", "optional"),
+											")"
+										]
+									})]
+								}),
+								W.length > 0 && /* @__PURE__ */ g("div", {
+									className: "flex flex-wrap gap-2",
+									children: W.map((e) => /* @__PURE__ */ _("span", {
+										className: "inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-primary/10 text-primary text-xs font-medium",
+										children: [e, /* @__PURE__ */ g("button", {
+											type: "button",
+											"aria-label": j("conversations.removeParticipant", "Remove participant"),
+											onClick: () => X(e),
+											className: "p-0.5 rounded-full hover:bg-primary/20",
+											children: /* @__PURE__ */ g(m, { size: 12 })
+										})]
+									}, e))
+								}),
+								/* @__PURE__ */ _("div", {
+									className: "flex items-center gap-2",
+									children: [/* @__PURE__ */ g("input", {
+										type: "text",
+										"aria-label": j("conversations.participantInputLabel", "Add participant"),
+										value: H,
+										onChange: (e) => U(e.target.value),
+										onKeyDown: (e) => {
+											e.key === "Enter" && (e.preventDefault(), Y());
+										},
+										placeholder: j("conversations.participantInputPlaceholder", "Enter user ID and press Enter"),
+										className: "w-full px-3 py-2 text-sm rounded-lg border border-border bg-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
+									}), /* @__PURE__ */ g("button", {
+										type: "button",
+										onClick: Y,
+										className: "px-3 py-2 text-sm rounded-lg border border-border hover:bg-muted/50",
+										children: j("conversations.add", "Add")
+									})]
+								})
+							]
+						}),
+						k && /* @__PURE__ */ g("div", {
+							className: "text-xs text-destructive rounded-lg border border-destructive/30 bg-destructive/10 px-3 py-2",
+							children: te(k)
+						})
+					]
+				}),
+				/* @__PURE__ */ _(x, { children: [/* @__PURE__ */ g("button", {
+					type: "button",
+					onClick: () => Q(!1),
+					className: "px-4 py-2 text-sm font-medium rounded-lg text-muted-foreground hover:text-foreground hover:bg-muted/50 transition-colors",
+					children: j("conversations.cancel", "Cancel")
+				}), /* @__PURE__ */ g("button", {
+					type: "button",
+					onClick: () => void ne(),
+					disabled: !$ || O,
+					className: t("inline-flex items-center gap-2 px-5 py-2 text-sm font-medium rounded-lg transition-all", $ && !O ? "bg-primary text-primary-foreground hover:bg-primary/90 shadow-sm" : "bg-muted text-muted-foreground cursor-not-allowed"),
+					children: O ? j("conversations.creating", "Creating...") : j("conversations.createConversation", "Create Conversation")
+				})] })
+			]
+		})
+	});
+}
+//#endregion
+export { w as NewConversationDialog };
+
+//# sourceMappingURL=NewConversationDialog.js.map

package/dist/conversations/components/NewConversationDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NewConversationDialog.js","names":[],"sources":["../../../src/conversations/components/NewConversationDialog.tsx"],"sourcesContent":["import { useState, useCallback, useMemo } from \"react\";\nimport { useEventBus } from \"@burdenoff/fe-libs/shared/events\";\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n} from \"@burdenoff/fe-libs/ui\";\nimport {\n  Globe,\n  Hash,\n  Lock,\n  Megaphone,\n  MessageCircle,\n  Shield,\n  Users,\n  X,\n} from \"lucide-react\";\nimport { cn } from \"../utils/cn\";\nimport { useTr } from \"../utils/i18n\";\nimport { useCreateConversation } from \"../hooks/useConversationQueries\";\nimport type { ConversationType, ConversationVisibility } from \"../types\";\nimport { nativeImpact, nativeNotify } from \"../../utils/nativeBridge\";\n\n/** Extract the first meaningful GraphQL error message from an ApolloError. */\nfunction getErrorMessage(error: Error): string {\n  if (\"graphQLErrors\" in error) {\n    const gqlErrors = (error as { graphQLErrors?: Array<{ message?: string }> })\n      .graphQLErrors;\n    if (gqlErrors && gqlErrors.length > 0 && gqlErrors[0]?.message) {\n      return gqlErrors[0].message;\n    }\n  }\n  return error.message;\n}\n\ninterface ConversationTypeOption {\n  type: ConversationType;\n  label: string;\n  description: string;\n  icon: React.ReactNode;\n}\n\nexport interface NewConversationDialogProps {\n  /** Whether the dialog is open. */\n  open: boolean;\n  /** Open-state change handler. Fires with `false` on close (overlay click,\n   * Escape, X button, Cancel). */\n  onOpenChange: (open: boolean) => void;\n  /**\n   * Called after a conversation is successfully created. Receives the new\n   * conversation id so the parent can navigate to the detail route.\n   * The dialog also closes itself (via `onOpenChange(false)`) before this\n   * fires, so the parent does not need to close the dialog manually.\n   */\n  onCreated?: (conversationId: string) => void;\n}\n\n/**\n * NewConversationDialog — modal form for creating a new conversation.\n *\n * Renders inside the canonical `<Dialog>` primitive from\n * `@burdenoff/fe-libs/ui` so it inherits theme tokens, focus management,\n * and overlay behaviour from the shell.\n *\n * Form state is owned locally; on successful submit the dialog clears\n * state, closes itself, and invokes `onCreated` with the new\n * conversation id.\n */\nexport function NewConversationDialog({\n  open,\n  onOpenChange,\n  onCreated,\n}: NewConversationDialogProps) {\n  const { createConversation, loading, error } = useCreateConversation();\n  const bus = useEventBus();\n  const tr = useTr();\n\n  const CONVERSATION_TYPES: ConversationTypeOption[] = useMemo(\n    () => [\n      {\n        type: \"DIRECT\" as ConversationType,\n        label: tr(\"conversations.directMessage\", \"Direct Message\"),\n        description: tr(\n          \"conversations.directMessageDescription\",\n          \"One-on-one private conversation\",\n        ),\n        icon: <MessageCircle size={20} />,\n      },\n      {\n        type: \"GROUP\" as ConversationType,\n        label: tr(\"conversations.groupChat\", \"Group Chat\"),\n        description: tr(\n          \"conversations.groupChatDescription\",\n          \"Invite multiple people to a group conversation\",\n        ),\n        icon: <Users size={20} />,\n      },\n      {\n        type: \"CHANNEL\" as ConversationType,\n        label: tr(\"conversations.channel\", \"Channel\"),\n        description: tr(\n          \"conversations.channelDescription\",\n          \"A topic-based channel that anyone can join\",\n        ),\n        icon: <Hash size={20} />,\n      },\n      {\n        type: \"ANNOUNCEMENT\" as ConversationType,\n        label: tr(\"conversations.announcement\", \"Announcement\"),\n        description: tr(\n          \"conversations.announcementDescription\",\n          \"Broadcast messages to a large audience\",\n        ),\n        icon: <Megaphone size={20} />,\n      },\n    ],\n    [tr],\n  );\n\n  const VISIBILITY_OPTIONS: Array<{\n    value: ConversationVisibility;\n    label: string;\n    description: string;\n    icon: React.ReactNode;\n  }> = useMemo(\n    () => [\n      {\n        value: \"PUBLIC\" as ConversationVisibility,\n        label: tr(\"conversations.public\", \"Public\"),\n        description: tr(\n          \"conversations.publicDescription\",\n          \"Anyone in the workspace can discover and join\",\n        ),\n        icon: <Globe size={16} />,\n      },\n      {\n        value: \"PRIVATE\" as ConversationVisibility,\n        label: tr(\"conversations.private\", \"Private\"),\n        description: tr(\n          \"conversations.privateDescription\",\n          \"Only invited members can access\",\n        ),\n        icon: <Lock size={16} />,\n      },\n      {\n        value: \"PROTECTED\" as ConversationVisibility,\n        label: tr(\"conversations.protected\", \"Protected\"),\n        description: tr(\n          \"conversations.protectedDescription\",\n          \"Discoverable but requires approval to join\",\n        ),\n        icon: <Shield size={16} />,\n      },\n    ],\n    [tr],\n  );\n\n  const [selectedType, setSelectedType] = useState<ConversationType>(\"GROUP\");\n  const [title, setTitle] = useState(\"\");\n  const [description, setDescription] = useState(\"\");\n  const [visibility, setVisibility] =\n    useState<ConversationVisibility>(\"PRIVATE\");\n  const [participantInput, setParticipantInput] = useState(\"\");\n  const [participantIds, setParticipantIds] = useState<string[]>([]);\n\n  const isDirectMessage = selectedType === \"DIRECT\";\n  const needsTitle = !isDirectMessage;\n\n  const resetForm = useCallback(() => {\n    setSelectedType(\"GROUP\");\n    setTitle(\"\");\n    setDescription(\"\");\n    setVisibility(\"PRIVATE\");\n    setParticipantInput(\"\");\n    setParticipantIds([]);\n  }, []);\n\n  const addParticipant = useCallback(() => {\n    const value = participantInput.trim();\n    if (!value || participantIds.includes(value)) return;\n    if (isDirectMessage) {\n      setParticipantIds([value]);\n    } else {\n      setParticipantIds((prev) => [...prev, value]);\n    }\n    setParticipantInput(\"\");\n  }, [participantInput, participantIds, isDirectMessage]);\n\n  const removeParticipant = useCallback((participantId: string) => {\n    setParticipantIds((prev) => prev.filter((id) => id !== participantId));\n  }, []);\n\n  const requiresParticipants =\n    selectedType === \"DIRECT\" || selectedType === \"GROUP\";\n\n  const handleOpenChange = useCallback(\n    (nextOpen: boolean) => {\n      if (!nextOpen) {\n        resetForm();\n      }\n      onOpenChange(nextOpen);\n    },\n    [onOpenChange, resetForm],\n  );\n\n  const handleCreate = useCallback(async () => {\n    if (requiresParticipants && participantIds.length === 0) return;\n    if (needsTitle && !title.trim()) return;\n\n    nativeImpact(\"light\");\n    try {\n      const conversation = await createConversation({\n        type: selectedType,\n        title: needsTitle ? title.trim() : undefined,\n        description: description.trim() || undefined,\n        participantIds,\n        visibility,\n      });\n\n      if (!conversation) {\n        nativeNotify(\"error\");\n        return;\n      }\n      nativeNotify(\"success\");\n      bus.emit(\"conversations.conversation.created\", {\n        conversationId: conversation.id,\n        conversationType: selectedType,\n        source: \"new-conversation-dialog\",\n      });\n      resetForm();\n      onOpenChange(false);\n      onCreated?.(conversation.id);\n    } catch (error) {\n      nativeNotify(\"error\");\n      throw error;\n    }\n  }, [\n    bus,\n    requiresParticipants,\n    participantIds,\n    needsTitle,\n    title,\n    createConversation,\n    selectedType,\n    description,\n    visibility,\n    resetForm,\n    onOpenChange,\n    onCreated,\n  ]);\n\n  const canCreate =\n    (!requiresParticipants || participantIds.length > 0) &&\n    (!needsTitle || title.trim().length > 0);\n\n  return (\n    <Dialog open={open} onOpenChange={handleOpenChange}>\n      <DialogContent\n        className=\"sm:max-w-[640px] max-h-[90vh] overflow-y-auto\"\n        data-tour=\"new-conversation-dialog\"\n      >\n        <DialogHeader>\n          <DialogTitle>\n            {tr(\"conversations.newConversation\", \"New Conversation\")}\n          </DialogTitle>\n          <DialogDescription>\n            {tr(\n              \"conversations.newConversationSubtitle\",\n              \"Start a new conversation with your team\",\n            )}\n          </DialogDescription>\n        </DialogHeader>\n\n        <div className=\"space-y-6\">\n          <section data-tour=\"conversation-type-selector\" className=\"space-y-3\">\n            <h3 className=\"text-sm font-semibold text-foreground\">\n              {tr(\"conversations.conversationType\", \"Conversation Type\")}\n            </h3>\n            <div className=\"grid grid-cols-1 sm:grid-cols-2 gap-3\">\n              {CONVERSATION_TYPES.map((option) => (\n                <button\n                  key={option.type}\n                  type=\"button\"\n                  onClick={() => {\n                    setSelectedType(option.type);\n                    if (option.type === \"DIRECT\") {\n                      setParticipantIds((prev) => prev.slice(0, 1));\n                    }\n                  }}\n                  className={cn(\n                    \"flex items-start gap-3 p-4 rounded-xl border text-left transition-all duration-150\",\n                    selectedType === option.type\n                      ? \"border-primary bg-primary/5 ring-1 ring-primary/20\"\n                      : \"border-border hover:border-muted-foreground/30 hover:bg-muted/30\",\n                  )}\n                >\n                  <div\n                    className={cn(\n                      \"p-2 rounded-lg\",\n                      selectedType === option.type\n                        ? \"bg-primary/10 text-primary\"\n                        : \"bg-muted text-muted-foreground\",\n                    )}\n                  >\n                    {option.icon}\n                  </div>\n                  <div>\n                    <p className=\"text-sm font-medium text-foreground\">\n                      {option.label}\n                    </p>\n                    <p className=\"text-xs text-muted-foreground mt-0.5\">\n                      {option.description}\n                    </p>\n                  </div>\n                </button>\n              ))}\n            </div>\n          </section>\n\n          {!isDirectMessage && (\n            <section\n              data-tour=\"conversation-visibility-selector\"\n              className=\"space-y-3\"\n            >\n              <h3 className=\"text-sm font-semibold text-foreground\">\n                {tr(\"conversations.visibility\", \"Visibility\")}\n              </h3>\n              <div className=\"flex gap-2 flex-wrap\">\n                {VISIBILITY_OPTIONS.map((option) => (\n                  <button\n                    key={option.value}\n                    type=\"button\"\n                    onClick={() => setVisibility(option.value)}\n                    className={cn(\n                      \"flex items-center gap-2 px-4 py-2.5 rounded-lg border text-sm transition-all\",\n                      visibility === option.value\n                        ? \"border-primary bg-primary/5 text-primary font-medium\"\n                        : \"border-border text-muted-foreground hover:text-foreground hover:bg-muted/30\",\n                    )}\n                  >\n                    {option.icon}\n                    {option.label}\n                  </button>\n                ))}\n              </div>\n              <p className=\"text-xs text-muted-foreground\">\n                {\n                  VISIBILITY_OPTIONS.find(\n                    (option) => option.value === visibility,\n                  )?.description\n                }\n              </p>\n            </section>\n          )}\n\n          {needsTitle && (\n            <section\n              data-tour=\"conversation-create-details\"\n              className=\"space-y-3\"\n            >\n              <div>\n                <label\n                  htmlFor=\"conv-title\"\n                  className=\"text-sm font-semibold text-foreground\"\n                >\n                  {tr(\"conversations.name\", \"Name\")}{\" \"}\n                  <span className=\"text-destructive\">*</span>\n                </label>\n                <input\n                  id=\"conv-title\"\n                  type=\"text\"\n                  value={title}\n                  onChange={(event) => setTitle(event.target.value)}\n                  placeholder={\n                    selectedType === \"CHANNEL\"\n                      ? tr(\n                          \"conversations.channelNamePlaceholder\",\n                          \"e.g., engineering-general\",\n                        )\n                      : tr(\n                          \"conversations.conversationNamePlaceholder\",\n                          \"e.g., Product Launch Q1\",\n                        )\n                  }\n                  maxLength={200}\n                  className=\"mt-1.5 w-full px-3 py-2 text-sm rounded-lg border border-border bg-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring\"\n                />\n              </div>\n              <div>\n                <label\n                  htmlFor=\"conv-desc\"\n                  className=\"text-sm font-semibold text-foreground\"\n                >\n                  {tr(\"conversations.description\", \"Description\")}\n                </label>\n                <textarea\n                  id=\"conv-desc\"\n                  value={description}\n                  onChange={(event) => setDescription(event.target.value)}\n                  placeholder={tr(\n                    \"conversations.descriptionPlaceholder\",\n                    \"What is this conversation about?\",\n                  )}\n                  rows={2}\n                  maxLength={1000}\n                  className=\"mt-1.5 w-full px-3 py-2 text-sm rounded-lg border border-border bg-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring resize-none\"\n                />\n              </div>\n            </section>\n          )}\n\n          <section data-tour=\"conversation-participants\" className=\"space-y-3\">\n            <h3 className=\"text-sm font-semibold text-foreground\">\n              {isDirectMessage\n                ? tr(\"conversations.participantId\", \"Participant ID\")\n                : tr(\"conversations.participantIds\", \"Participant IDs\")}\n              {!requiresParticipants && (\n                <span className=\"ml-1.5 text-xs font-normal text-muted-foreground\">\n                  ({tr(\"conversations.optional\", \"optional\")})\n                </span>\n              )}\n            </h3>\n\n            {participantIds.length > 0 && (\n              <div className=\"flex flex-wrap gap-2\">\n                {participantIds.map((participantId) => (\n                  <span\n                    key={participantId}\n                    className=\"inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-primary/10 text-primary text-xs font-medium\"\n                  >\n                    {participantId}\n                    <button\n                      type=\"button\"\n                      aria-label={tr(\n                        \"conversations.removeParticipant\",\n                        \"Remove participant\",\n                      )}\n                      onClick={() => removeParticipant(participantId)}\n                      className=\"p-0.5 rounded-full hover:bg-primary/20\"\n                    >\n                      <X size={12} />\n                    </button>\n                  </span>\n                ))}\n              </div>\n            )}\n\n            <div className=\"flex items-center gap-2\">\n              <input\n                type=\"text\"\n                aria-label={tr(\n                  \"conversations.participantInputLabel\",\n                  \"Add participant\",\n                )}\n                value={participantInput}\n                onChange={(event) => setParticipantInput(event.target.value)}\n                onKeyDown={(event) => {\n                  if (event.key !== \"Enter\") return;\n                  event.preventDefault();\n                  addParticipant();\n                }}\n                placeholder={tr(\n                  \"conversations.participantInputPlaceholder\",\n                  \"Enter user ID and press Enter\",\n                )}\n                className=\"w-full px-3 py-2 text-sm rounded-lg border border-border bg-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring\"\n              />\n              <button\n                type=\"button\"\n                onClick={addParticipant}\n                className=\"px-3 py-2 text-sm rounded-lg border border-border hover:bg-muted/50\"\n              >\n                {tr(\"conversations.add\", \"Add\")}\n              </button>\n            </div>\n          </section>\n\n          {error && (\n            <div className=\"text-xs text-destructive rounded-lg border border-destructive/30 bg-destructive/10 px-3 py-2\">\n              {getErrorMessage(error)}\n            </div>\n          )}\n        </div>\n\n        <DialogFooter>\n          <button\n            type=\"button\"\n            onClick={() => handleOpenChange(false)}\n            className=\"px-4 py-2 text-sm font-medium rounded-lg text-muted-foreground hover:text-foreground hover:bg-muted/50 transition-colors\"\n          >\n            {tr(\"conversations.cancel\", \"Cancel\")}\n          </button>\n          <button\n            type=\"button\"\n            onClick={() => void handleCreate()}\n            disabled={!canCreate || loading}\n            className={cn(\n              \"inline-flex items-center gap-2 px-5 py-2 text-sm font-medium rounded-lg transition-all\",\n              canCreate && !loading\n                ? \"bg-primary text-primary-foreground hover:bg-primary/90 shadow-sm\"\n                : \"bg-muted text-muted-foreground cursor-not-allowed\",\n            )}\n          >\n            {loading\n              ? tr(\"conversations.creating\", \"Creating...\")\n              : tr(\"conversations.createConversation\", \"Create Conversation\")}\n          </button>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  );\n}\n"],"mappings":"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"}

package/dist/conversations/pages/ConversationsLandingPage.js

@@ -1,109 +1,129 @@
-import { useTr as e } from "../utils/i18n.js";
-import { useConversationsStore as t } from "../store/conversationsStore.js";
-import { PermissionGuard as n } from "../components/PermissionGuard.js";
-import { CONVERSATIONS_PERMISSIONS as r } from "../constants/permissions.js";
-import { ConversationListPage as i } from "./ConversationListPage.js";
-import { InboxLayout as a } from "../components/InboxLayout.js";
-import { useUserFeatureFlags as o } from "../hooks/useUserFeatureFlags.js";
-import { Suspense as s, lazy as c, useCallback as l, useEffect as u, useMemo as d } from "react";
-import { Filter as f, Loader2 as p, Pin as m } from "lucide-react";
-import { useParams as h, useSearchParams as g } from "react-router-dom";
-import { jsx as _, jsxs as v } from "react/jsx-runtime";
-import { PageContainer as y } from "@burdenoff/fe-libs/ui";
+import { useConversations as e } from "../providers/ConversationsProvider.js";
+import { joinPath as t } from "../utils/navigation.js";
+import { useTr as n } from "../utils/i18n.js";
+import { useConversationsStore as r } from "../store/conversationsStore.js";
+import { PermissionGuard as i } from "../components/PermissionGuard.js";
+import { CONVERSATIONS_PERMISSIONS as a } from "../constants/permissions.js";
+import { ConversationListPage as o } from "./ConversationListPage.js";
+import { InboxLayout as s } from "../components/InboxLayout.js";
+import { NewConversationDialog as c } from "../components/NewConversationDialog.js";
+import { useUserFeatureFlags as l } from "../hooks/useUserFeatureFlags.js";
+import { Suspense as u, lazy as d, useCallback as f, useEffect as p, useMemo as m } from "react";
+import { Filter as h, Loader2 as g, Pin as _ } from "lucide-react";
+import { useNavigate as v, useParams as y, useSearchParams as b } from "react-router-dom";
+import { jsx as x, jsxs as S } from "react/jsx-runtime";
+import { PageContainer as C } from "@burdenoff/fe-libs/ui";
 //#region src/conversations/pages/ConversationsLandingPage.tsx
-var b = c(() => import("./ConversationDetailPage.js").then((e) => ({ default: e.ConversationDetailPage }))), x = "all", S = {
+var w = d(() => import("./ConversationDetailPage.js").then((e) => ({ default: e.ConversationDetailPage }))), T = "all", E = {
 	all: void 0,
 	direct: "direct",
 	groups: "group",
 	channels: "channel",
 	archived: "archived"
 };
-function C() {
-	let [c, C] = g(), { conversationId: w } = h(), T = e(), { archivedEnabled: E } = o(), { searchQuery: D, setSearchQuery: O, conversationFilter: k, updateConversationFilter: A } = t(), j = c.get("tab") ?? x, M = j === "archived" && !E ? x : j;
-	u(() => {
-		!E && j === "archived" && C((e) => {
+function D() {
+	let [d, D] = b(), { conversationId: O } = y(), k = v(), { basePath: A } = e(), j = n(), { archivedEnabled: M } = l(), { searchQuery: N, setSearchQuery: P, conversationFilter: F, updateConversationFilter: I } = r(), L = d.get("new") === "true", R = f(() => {
+		D((e) => {
+			let t = new URLSearchParams(e);
+			return t.delete("new"), t;
+		}, { replace: !0 });
+	}, [D]), z = f((e) => {
+		e || R();
+	}, [R]), B = f((e) => {
+		k(t(A || "/conversations", e), { replace: !0 });
+	}, [A, k]), V = d.get("tab") ?? T, H = V === "archived" && !M ? T : V;
+	p(() => {
+		!M && V === "archived" && D((e) => {
 			let t = new URLSearchParams(e);
 			return t.delete("tab"), t;
 		}, { replace: !0 });
 	}, [
-		E,
-		j,
-		C
+		M,
+		V,
+		D
 	]);
-	let N = l((e) => {
-		C((t) => {
+	let U = f((e) => {
+		D((t) => {
 			let n = new URLSearchParams(t);
-			return e === x ? n.delete("tab") : n.set("tab", e), n;
+			return e === T ? n.delete("tab") : n.set("tab", e), n;
 		}, { replace: !0 });
-	}, [C]), P = d(() => {
-		if (M === "archived") return [];
-		let e = k.hasUnread === !0, t = k.isPinned === !0;
+	}, [D]), W = m(() => {
+		if (H === "archived") return [];
+		let e = F.hasUnread === !0, t = F.isPinned === !0;
 		return [{
 			id: "unread",
-			label: T("conversations.unread", "Unread"),
+			label: j("conversations.unread", "Unread"),
 			active: e,
-			onToggle: () => A({ hasUnread: e ? void 0 : !0 }),
-			icon: /* @__PURE__ */ _(f, {
+			onToggle: () => I({ hasUnread: e ? void 0 : !0 }),
+			icon: /* @__PURE__ */ x(h, {
 				size: 11,
 				"aria-hidden": "true"
 			})
 		}, {
 			id: "pinned",
-			label: T("conversations.pinned", "Pinned"),
+			label: j("conversations.pinned", "Pinned"),
 			active: t,
-			onToggle: () => A({ isPinned: t ? void 0 : !0 }),
-			icon: /* @__PURE__ */ _(m, {
+			onToggle: () => I({ isPinned: t ? void 0 : !0 }),
+			icon: /* @__PURE__ */ x(_, {
 				size: 11,
 				"aria-hidden": "true"
 			})
 		}];
 	}, [
-		M,
-		k.hasUnread,
-		k.isPinned,
-		T,
-		A
-	]), F = S[M];
-	return /* @__PURE__ */ _(n, {
-		permission: r.CONVERSATION_READ,
+		H,
+		F.hasUnread,
+		F.isPinned,
+		j,
+		I
+	]), G = E[H];
+	return /* @__PURE__ */ x(i, {
+		permission: a.CONVERSATION_READ,
 		allowUnavailablePermissions: !0,
-		children: /* @__PURE__ */ v(y, {
+		children: /* @__PURE__ */ S(C, {
 			"data-tour": "conversations-landing",
 			padded: !1,
 			className: "h-full min-h-0",
-			children: [/* @__PURE__ */ _("h1", {
-				id: "conversations-page-heading",
-				className: "sr-only",
-				children: T("conversations.title", "Conversations")
-			}), /* @__PURE__ */ _(a, {
-				activeTab: M,
-				onTabChange: N,
-				archivedEnabled: E,
-				searchQuery: D,
-				onSearchChange: O,
-				filterChips: P,
-				listSlot: /* @__PURE__ */ _(i, {
-					embedded: !0,
-					forcedFilterParam: F
+			children: [
+				/* @__PURE__ */ x("h1", {
+					id: "conversations-page-heading",
+					className: "sr-only",
+					children: j("conversations.title", "Conversations")
 				}),
-				detailSlot: w ? /* @__PURE__ */ _(s, {
-					fallback: /* @__PURE__ */ v("div", {
-						role: "status",
-						"aria-live": "polite",
-						className: "flex h-full items-center justify-center gap-2 text-sm text-text-secondary",
-						children: [/* @__PURE__ */ _(p, {
-							size: 16,
-							className: "animate-spin",
-							"aria-hidden": "true"
-						}), T("conversations.detailLoading", "Loading conversation…")]
+				/* @__PURE__ */ x(s, {
+					activeTab: H,
+					onTabChange: U,
+					archivedEnabled: M,
+					searchQuery: N,
+					onSearchChange: P,
+					filterChips: W,
+					listSlot: /* @__PURE__ */ x(o, {
+						embedded: !0,
+						forcedFilterParam: G
 					}),
-					children: /* @__PURE__ */ _(b, {})
-				}) : void 0
-			})]
+					detailSlot: O ? /* @__PURE__ */ x(u, {
+						fallback: /* @__PURE__ */ S("div", {
+							role: "status",
+							"aria-live": "polite",
+							className: "flex h-full items-center justify-center gap-2 text-sm text-text-secondary",
+							children: [/* @__PURE__ */ x(g, {
+								size: 16,
+								className: "animate-spin",
+								"aria-hidden": "true"
+							}), j("conversations.detailLoading", "Loading conversation…")]
+						}),
+						children: /* @__PURE__ */ x(w, {})
+					}) : void 0
+				}),
+				L && /* @__PURE__ */ x(c, {
+					open: !0,
+					onOpenChange: z,
+					onCreated: B
+				})
+			]
 		})
 	});
 }
 //#endregion
-export { C as ConversationsLandingPage };
+export { D as ConversationsLandingPage };
 
 //# sourceMappingURL=ConversationsLandingPage.js.map

package/dist/conversations/pages/ConversationsLandingPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConversationsLandingPage.js","names":[],"sources":["../../../src/conversations/pages/ConversationsLandingPage.tsx"],"sourcesContent":["import { Suspense, useCallback, useEffect, useMemo, lazy } from \"react\";\nimport { useParams, useSearchParams } from \"react-router-dom\";\nimport { PageContainer } from \"@burdenoff/fe-libs/ui\";\nimport { Pin, Filter, Loader2 } from \"lucide-react\";\nimport { ConversationListPage } from \"./ConversationListPage\";\nimport { PermissionGuard } from \"../components/PermissionGuard\";\nimport {\n  InboxLayout,\n  type FilterChipDescriptor,\n  type InboxTabId,\n} from \"../components/InboxLayout\";\nimport { CONVERSATIONS_PERMISSIONS } from \"../constants/permissions\";\nimport { useUserFeatureFlags } from \"../hooks/useUserFeatureFlags\";\nimport { useConversationsStore } from \"../store/conversationsStore\";\nimport { useTr } from \"../utils/i18n\";\n\n// Lazy-load the detail page so the inbox bundle stays small for users who\n// never open a conversation in this session. The detail subtree is the\n// heaviest by far (~19kB gz including MessageBubble).\nconst ConversationDetailPage = lazy(() =>\n  import(\"./ConversationDetailPage\").then((m) => ({\n    default: m.ConversationDetailPage,\n  })),\n);\n\nconst DEFAULT_TAB_ID: InboxTabId = \"all\";\n\n// Maps the inbox tab id to the `forcedFilterParam` prop accepted by\n// ConversationListPage. The \"all\" tab passes undefined so the list shows\n// every conversation type. The archived tab triggers the BE state filter\n// (states: [ARCHIVED]) handled inside ConversationListPage.\nconst TAB_TO_LIST_FILTER: Record<\n  InboxTabId,\n  \"channel\" | \"direct\" | \"group\" | \"archived\" | undefined\n> = {\n  all: undefined,\n  direct: \"direct\",\n  groups: \"group\",\n  channels: \"channel\",\n  archived: \"archived\",\n};\n\n/**\n * Landing page for `/conversations`.\n *\n * Renders the canonical inbox: two-pane shell with the conversation list on\n * the left and an empty detail panel on the right. The detail panel is\n * filled in by the router on `/conversations/:conversationId`; this page\n * itself only renders the chrome and the list.\n *\n * Tabs (All / Direct / Groups / Channels / Archived) are stored in the\n * `?tab=` URL search param so refreshing the page keeps the user on the\n * same view.\n */\nexport function ConversationsLandingPage() {\n  const [params, setParams] = useSearchParams();\n  const { conversationId } = useParams<{ conversationId?: string }>();\n  const tr = useTr();\n  const { archivedEnabled } = useUserFeatureFlags();\n  const {\n    searchQuery,\n    setSearchQuery,\n    conversationFilter,\n    updateConversationFilter,\n  } = useConversationsStore();\n\n  const requestedTab = (params.get(\"tab\") ?? DEFAULT_TAB_ID) as InboxTabId;\n  // Strip the archived tab when the feature flag is off — the side effect\n  // below also lazily cleans the URL so a deep link doesn't leave the user\n  // staring at an unknown tab.\n  const activeTab: InboxTabId =\n    requestedTab === \"archived\" && !archivedEnabled\n      ? DEFAULT_TAB_ID\n      : requestedTab;\n\n  useEffect(() => {\n    if (!archivedEnabled && requestedTab === \"archived\") {\n      // Updater form reads the freshest params at flush time to preserve\n      // concurrent query-param changes elsewhere in the tree.\n      setParams(\n        (prev) => {\n          const next = new URLSearchParams(prev);\n          next.delete(\"tab\");\n          return next;\n        },\n        { replace: true },\n      );\n    }\n  }, [archivedEnabled, requestedTab, setParams]);\n\n  const handleTabChange = useCallback(\n    (id: InboxTabId) => {\n      setParams(\n        (prev) => {\n          const next = new URLSearchParams(prev);\n          if (id === DEFAULT_TAB_ID) {\n            next.delete(\"tab\");\n          } else {\n            next.set(\"tab\", id);\n          }\n          return next;\n        },\n        { replace: true },\n      );\n    },\n    [setParams],\n  );\n\n  // Filter chips are only meaningful on tabs where they can hide items. On\n  // the Archived tab the only sane secondary toggle is \"Pinned\" (unread\n  // doesn't make sense for archived conversations); on the inbox tabs we\n  // expose both unread + pinned.\n  const filterChips = useMemo<FilterChipDescriptor[]>(() => {\n    if (activeTab === \"archived\") return [];\n    const unreadActive = conversationFilter.hasUnread === true;\n    const pinnedActive = conversationFilter.isPinned === true;\n    return [\n      {\n        id: \"unread\",\n        label: tr(\"conversations.unread\", \"Unread\"),\n        active: unreadActive,\n        onToggle: () =>\n          updateConversationFilter({\n            hasUnread: unreadActive ? undefined : true,\n          }),\n        icon: <Filter size={11} aria-hidden=\"true\" />,\n      },\n      {\n        id: \"pinned\",\n        label: tr(\"conversations.pinned\", \"Pinned\"),\n        active: pinnedActive,\n        onToggle: () =>\n          updateConversationFilter({\n            isPinned: pinnedActive ? undefined : true,\n          }),\n        icon: <Pin size={11} aria-hidden=\"true\" />,\n      },\n    ];\n  }, [\n    activeTab,\n    conversationFilter.hasUnread,\n    conversationFilter.isPinned,\n    tr,\n    updateConversationFilter,\n  ]);\n\n  const forcedFilter = TAB_TO_LIST_FILTER[activeTab];\n\n  return (\n    <PermissionGuard\n      permission={CONVERSATIONS_PERMISSIONS.CONVERSATION_READ}\n      allowUnavailablePermissions\n    >\n      <PageContainer\n        data-tour=\"conversations-landing\"\n        padded={false}\n        className=\"h-full min-h-0\"\n      >\n        <h1 id=\"conversations-page-heading\" className=\"sr-only\">\n          {tr(\"conversations.title\", \"Conversations\")}\n        </h1>\n        <InboxLayout\n          activeTab={activeTab}\n          onTabChange={handleTabChange}\n          archivedEnabled={archivedEnabled}\n          searchQuery={searchQuery}\n          onSearchChange={setSearchQuery}\n          filterChips={filterChips}\n          listSlot={\n            <ConversationListPage embedded forcedFilterParam={forcedFilter} />\n          }\n          detailSlot={\n            conversationId ? (\n              <Suspense\n                fallback={\n                  <div\n                    role=\"status\"\n                    aria-live=\"polite\"\n                    className=\"flex h-full items-center justify-center gap-2 text-sm text-text-secondary\"\n                  >\n                    <Loader2\n                      size={16}\n                      className=\"animate-spin\"\n                      aria-hidden=\"true\"\n                    />\n                    {tr(\"conversations.detailLoading\", \"Loading conversation…\")}\n                  </div>\n                }\n              >\n                <ConversationDetailPage />\n              </Suspense>\n            ) : undefined\n          }\n        />\n      </PageContainer>\n    </PermissionGuard>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AAmBA,IAAM,IAAyB,QAC7B,OAAO,+BAA4B,MAAM,OAAO,EAC9C,SAAS,EAAE,wBACZ,EAAE,CACJ,EAEK,IAA6B,OAM7B,IAGF;CACF,KAAK,KAAA;CACL,QAAQ;CACR,QAAQ;CACR,UAAU;CACV,UAAU;CACX;AAcD,SAAgB,IAA2B;CACzC,IAAM,CAAC,GAAQ,KAAa,GAAiB,EACvC,EAAE,sBAAmB,GAAwC,EAC7D,IAAK,GAAO,EACZ,EAAE,uBAAoB,GAAqB,EAC3C,EACJ,gBACA,mBACA,uBACA,gCACE,GAAuB,EAErB,IAAgB,EAAO,IAAI,MAAM,IAAI,GAIrC,IACJ,MAAiB,cAAc,CAAC,IAC5B,IACA;AAEN,SAAgB;AACd,EAAI,CAAC,KAAmB,MAAiB,cAGvC,GACG,MAAS;GACR,IAAM,IAAO,IAAI,gBAAgB,EAAK;AAEtC,UADA,EAAK,OAAO,MAAM,EACX;KAET,EAAE,SAAS,IAAM,CAClB;IAEF;EAAC;EAAiB;EAAc;EAAU,CAAC;CAE9C,IAAM,IAAkB,GACrB,MAAmB;AAClB,KACG,MAAS;GACR,IAAM,IAAO,IAAI,gBAAgB,EAAK;AAMtC,UALI,MAAO,IACT,EAAK,OAAO,MAAM,GAElB,EAAK,IAAI,OAAO,EAAG,EAEd;KAET,EAAE,SAAS,IAAM,CAClB;IAEH,CAAC,EAAU,CACZ,EAMK,IAAc,QAAsC;AACxD,MAAI,MAAc,WAAY,QAAO,EAAE;EACvC,IAAM,IAAe,EAAmB,cAAc,IAChD,IAAe,EAAmB,aAAa;AACrD,SAAO,CACL;GACE,IAAI;GACJ,OAAO,EAAG,wBAAwB,SAAS;GAC3C,QAAQ;GACR,gBACE,EAAyB,EACvB,WAAW,IAAe,KAAA,IAAY,IACvC,CAAC;GACJ,MAAM,kBAAC,GAAD;IAAQ,MAAM;IAAI,eAAY;IAAS,CAAA;GAC9C,EACD;GACE,IAAI;GACJ,OAAO,EAAG,wBAAwB,SAAS;GAC3C,QAAQ;GACR,gBACE,EAAyB,EACvB,UAAU,IAAe,KAAA,IAAY,IACtC,CAAC;GACJ,MAAM,kBAAC,GAAD;IAAK,MAAM;IAAI,eAAY;IAAS,CAAA;GAC3C,CACF;IACA;EACD;EACA,EAAmB;EACnB,EAAmB;EACnB;EACA;EACD,CAAC,EAEI,IAAe,EAAmB;AAExC,QACE,kBAAC,GAAD;EACE,YAAY,EAA0B;EACtC,6BAAA;YAEA,kBAAC,GAAD;GACE,aAAU;GACV,QAAQ;GACR,WAAU;aAHZ,CAKE,kBAAC,MAAD;IAAI,IAAG;IAA6B,WAAU;cAC3C,EAAG,uBAAuB,gBAAgB;IACxC,CAAA,EACL,kBAAC,GAAD;IACa;IACX,aAAa;IACI;IACJ;IACb,gBAAgB;IACH;IACb,UACE,kBAAC,GAAD;KAAsB,UAAA;KAAS,mBAAmB;KAAgB,CAAA;IAEpE,YACE,IACE,kBAAC,GAAD;KACE,UACE,kBAAC,OAAD;MACE,MAAK;MACL,aAAU;MACV,WAAU;gBAHZ,CAKE,kBAAC,GAAD;OACE,MAAM;OACN,WAAU;OACV,eAAY;OACZ,CAAA,EACD,EAAG,+BAA+B,wBAAwB,CACvD;;eAGR,kBAAC,GAAD,EAA0B,CAAA;KACjB,CAAA,GACT,KAAA;IAEN,CAAA,CACY;;EACA,CAAA"}
+{"version":3,"file":"ConversationsLandingPage.js","names":[],"sources":["../../../src/conversations/pages/ConversationsLandingPage.tsx"],"sourcesContent":["import { Suspense, useCallback, useEffect, useMemo, lazy } from \"react\";\nimport { useNavigate, useParams, useSearchParams } from \"react-router-dom\";\nimport { PageContainer } from \"@burdenoff/fe-libs/ui\";\nimport { Pin, Filter, Loader2 } from \"lucide-react\";\nimport { ConversationListPage } from \"./ConversationListPage\";\nimport { PermissionGuard } from \"../components/PermissionGuard\";\nimport {\n  InboxLayout,\n  type FilterChipDescriptor,\n  type InboxTabId,\n} from \"../components/InboxLayout\";\nimport { NewConversationDialog } from \"../components/NewConversationDialog\";\nimport { CONVERSATIONS_PERMISSIONS } from \"../constants/permissions\";\nimport { useUserFeatureFlags } from \"../hooks/useUserFeatureFlags\";\nimport { useConversationsStore } from \"../store/conversationsStore\";\nimport { useTr } from \"../utils/i18n\";\nimport { useConversations } from \"../providers/ConversationsProvider\";\nimport { joinPath } from \"../utils/navigation\";\n\n// Lazy-load the detail page so the inbox bundle stays small for users who\n// never open a conversation in this session. The detail subtree is the\n// heaviest by far (~19kB gz including MessageBubble).\nconst ConversationDetailPage = lazy(() =>\n  import(\"./ConversationDetailPage\").then((m) => ({\n    default: m.ConversationDetailPage,\n  })),\n);\n\nconst DEFAULT_TAB_ID: InboxTabId = \"all\";\n\n// Maps the inbox tab id to the `forcedFilterParam` prop accepted by\n// ConversationListPage. The \"all\" tab passes undefined so the list shows\n// every conversation type. The archived tab triggers the BE state filter\n// (states: [ARCHIVED]) handled inside ConversationListPage.\nconst TAB_TO_LIST_FILTER: Record<\n  InboxTabId,\n  \"channel\" | \"direct\" | \"group\" | \"archived\" | undefined\n> = {\n  all: undefined,\n  direct: \"direct\",\n  groups: \"group\",\n  channels: \"channel\",\n  archived: \"archived\",\n};\n\n/**\n * Landing page for `/conversations`.\n *\n * Renders the canonical inbox: two-pane shell with the conversation list on\n * the left and an empty detail panel on the right. The detail panel is\n * filled in by the router on `/conversations/:conversationId`; this page\n * itself only renders the chrome and the list.\n *\n * Tabs (All / Direct / Groups / Channels / Archived) are stored in the\n * `?tab=` URL search param so refreshing the page keeps the user on the\n * same view.\n */\nexport function ConversationsLandingPage() {\n  const [params, setParams] = useSearchParams();\n  const { conversationId } = useParams<{ conversationId?: string }>();\n  const navigate = useNavigate();\n  const { basePath } = useConversations();\n  const tr = useTr();\n  const { archivedEnabled } = useUserFeatureFlags();\n  const {\n    searchQuery,\n    setSearchQuery,\n    conversationFilter,\n    updateConversationFilter,\n  } = useConversationsStore();\n\n  // `?new=true` opens the create-conversation dialog in-place. The dialog\n  // is dismissed by either (a) the user closing it, in which case we drop\n  // the param via setParams (replace), or (b) a successful create, in\n  // which case we strip the param and navigate to the new detail route.\n  const isNewDialogOpen = params.get(\"new\") === \"true\";\n\n  const closeNewDialog = useCallback(() => {\n    setParams(\n      (prev) => {\n        const next = new URLSearchParams(prev);\n        next.delete(\"new\");\n        return next;\n      },\n      { replace: true },\n    );\n  }, [setParams]);\n\n  const handleNewDialogOpenChange = useCallback(\n    (open: boolean) => {\n      if (!open) closeNewDialog();\n    },\n    [closeNewDialog],\n  );\n\n  const handleNewDialogCreated = useCallback(\n    (newConversationId: string) => {\n      // The dialog closes itself before invoking onCreated; we just need\n      // to route to the new conversation detail page (which lives under\n      // the conversations basePath) without the lingering ?new=true.\n      navigate(joinPath(basePath || \"/conversations\", newConversationId), {\n        replace: true,\n      });\n    },\n    [basePath, navigate],\n  );\n\n  const requestedTab = (params.get(\"tab\") ?? DEFAULT_TAB_ID) as InboxTabId;\n  // Strip the archived tab when the feature flag is off — the side effect\n  // below also lazily cleans the URL so a deep link doesn't leave the user\n  // staring at an unknown tab.\n  const activeTab: InboxTabId =\n    requestedTab === \"archived\" && !archivedEnabled\n      ? DEFAULT_TAB_ID\n      : requestedTab;\n\n  useEffect(() => {\n    if (!archivedEnabled && requestedTab === \"archived\") {\n      // Updater form reads the freshest params at flush time to preserve\n      // concurrent query-param changes elsewhere in the tree.\n      setParams(\n        (prev) => {\n          const next = new URLSearchParams(prev);\n          next.delete(\"tab\");\n          return next;\n        },\n        { replace: true },\n      );\n    }\n  }, [archivedEnabled, requestedTab, setParams]);\n\n  const handleTabChange = useCallback(\n    (id: InboxTabId) => {\n      setParams(\n        (prev) => {\n          const next = new URLSearchParams(prev);\n          if (id === DEFAULT_TAB_ID) {\n            next.delete(\"tab\");\n          } else {\n            next.set(\"tab\", id);\n          }\n          return next;\n        },\n        { replace: true },\n      );\n    },\n    [setParams],\n  );\n\n  // Filter chips are only meaningful on tabs where they can hide items. On\n  // the Archived tab the only sane secondary toggle is \"Pinned\" (unread\n  // doesn't make sense for archived conversations); on the inbox tabs we\n  // expose both unread + pinned.\n  const filterChips = useMemo<FilterChipDescriptor[]>(() => {\n    if (activeTab === \"archived\") return [];\n    const unreadActive = conversationFilter.hasUnread === true;\n    const pinnedActive = conversationFilter.isPinned === true;\n    return [\n      {\n        id: \"unread\",\n        label: tr(\"conversations.unread\", \"Unread\"),\n        active: unreadActive,\n        onToggle: () =>\n          updateConversationFilter({\n            hasUnread: unreadActive ? undefined : true,\n          }),\n        icon: <Filter size={11} aria-hidden=\"true\" />,\n      },\n      {\n        id: \"pinned\",\n        label: tr(\"conversations.pinned\", \"Pinned\"),\n        active: pinnedActive,\n        onToggle: () =>\n          updateConversationFilter({\n            isPinned: pinnedActive ? undefined : true,\n          }),\n        icon: <Pin size={11} aria-hidden=\"true\" />,\n      },\n    ];\n  }, [\n    activeTab,\n    conversationFilter.hasUnread,\n    conversationFilter.isPinned,\n    tr,\n    updateConversationFilter,\n  ]);\n\n  const forcedFilter = TAB_TO_LIST_FILTER[activeTab];\n\n  return (\n    <PermissionGuard\n      permission={CONVERSATIONS_PERMISSIONS.CONVERSATION_READ}\n      allowUnavailablePermissions\n    >\n      <PageContainer\n        data-tour=\"conversations-landing\"\n        padded={false}\n        className=\"h-full min-h-0\"\n      >\n        <h1 id=\"conversations-page-heading\" className=\"sr-only\">\n          {tr(\"conversations.title\", \"Conversations\")}\n        </h1>\n        <InboxLayout\n          activeTab={activeTab}\n          onTabChange={handleTabChange}\n          archivedEnabled={archivedEnabled}\n          searchQuery={searchQuery}\n          onSearchChange={setSearchQuery}\n          filterChips={filterChips}\n          listSlot={\n            <ConversationListPage embedded forcedFilterParam={forcedFilter} />\n          }\n          detailSlot={\n            conversationId ? (\n              <Suspense\n                fallback={\n                  <div\n                    role=\"status\"\n                    aria-live=\"polite\"\n                    className=\"flex h-full items-center justify-center gap-2 text-sm text-text-secondary\"\n                  >\n                    <Loader2\n                      size={16}\n                      className=\"animate-spin\"\n                      aria-hidden=\"true\"\n                    />\n                    {tr(\"conversations.detailLoading\", \"Loading conversation…\")}\n                  </div>\n                }\n              >\n                <ConversationDetailPage />\n              </Suspense>\n            ) : undefined\n          }\n        />\n        {isNewDialogOpen && (\n          <NewConversationDialog\n            open\n            onOpenChange={handleNewDialogOpenChange}\n            onCreated={handleNewDialogCreated}\n          />\n        )}\n      </PageContainer>\n    </PermissionGuard>\n  );\n}\n"],"mappings":"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"}