@burdenoff/microfe-conversations 2026.625.1 → 2026.625.2

package/dist/conversations/components/ConversationRow.js

@@ -112,7 +112,7 @@ var j = n(function({ conversation: n, isActive: c = !1, onClick: u, onLeave: f }
 								"aria-hidden": "true"
 							}), L]
 						}), B && /* @__PURE__ */ b("span", {
-							className: "inline-flex h-[18px] min-w-[18px] items-center justify-center rounded-full bg-action-primary-bg px-1 text-[10px] font-bold text-action-primary-text",
+							className: "inline-flex h-[18px] min-w-[18px] items-center justify-center rounded-full bg-action-primary-bg px-1 text-[10px] font-bold text-action-primary-text motion-safe:animate-vc-glow-pulse",
 							"aria-label": `${P} ${U("conversations.unreadCountLabel", "unread")}`,
 							children: P > 99 ? "99+" : P
 						})]

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

@@ -1 +1 @@
-{"version":3,"file":"ConversationRow.js","names":[],"sources":["../../../src/conversations/components/ConversationRow.tsx"],"sourcesContent":["import { memo, useState } from \"react\";\nimport {\n  ArchiveIcon,\n  ArchiveRestore,\n  Bell,\n  BellOff,\n  Bot,\n  Hash,\n  HeadphonesIcon,\n  LogOut,\n  Megaphone,\n  MessageCircle,\n  MoreHorizontal,\n  Pin,\n  PinOff,\n  Users,\n  VolumeX,\n} from \"lucide-react\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@burdenoff/fe-libs/ui\";\nimport { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell/I18nProvider\";\nimport { cn } from \"../utils/cn\";\nimport { useConversationActions } from \"../hooks/useConversationQueries\";\nimport type { Conversation } from \"../types\";\n\nexport interface ConversationRowProps {\n  conversation: Conversation;\n  isActive?: boolean;\n  onClick?: (conversation: Conversation) => void;\n  /** Optional leave handler — only the host has the membership mutation. */\n  onLeave?: (conversation: Conversation) => void;\n}\n\nfunction ConversationTypeIcon({\n  type,\n  size = 16,\n  className,\n}: {\n  type: Conversation[\"type\"];\n  size?: number;\n  className?: string;\n}) {\n  const props = { size, className };\n  switch (type) {\n    case \"DIRECT\":\n      return <MessageCircle {...props} />;\n    case \"GROUP\":\n      return <Users {...props} />;\n    case \"CHANNEL\":\n      return <Hash {...props} />;\n    case \"BROADCAST\":\n    case \"ANNOUNCEMENT\":\n      return <Megaphone {...props} />;\n    case \"BOT\":\n      return <Bot {...props} />;\n    case \"SUPPORT\":\n      return <HeadphonesIcon {...props} />;\n    default:\n      return <MessageCircle {...props} />;\n  }\n}\n\nfunction formatRelativeTime(\n  dateString: string,\n  labels: { now: string; yesterday: string },\n): string {\n  const now = new Date();\n  const date = new Date(dateString);\n  const diffMs = now.getTime() - date.getTime();\n  const diffMin = Math.floor(diffMs / 1000 / 60);\n  const diffHr = Math.floor(diffMin / 60);\n  const diffDay = Math.floor(diffHr / 24);\n\n  if (diffMin < 1) return labels.now;\n  if (diffMin < 60) return `${diffMin}m`;\n  if (diffHr < 24) return `${diffHr}h`;\n  if (diffDay === 1) return labels.yesterday;\n  if (diffDay < 7) return `${diffDay}d`;\n  return date.toLocaleDateString(undefined, { month: \"short\", day: \"numeric\" });\n}\n\nfunction getInitials(title: string): string {\n  return title\n    .split(\" \")\n    .slice(0, 2)\n    .map((word) => word[0])\n    .join(\"\")\n    .toUpperCase();\n}\n\n/**\n * ConversationRow — inbox-style list row.\n *\n * Visual hierarchy:\n *   [avatar]  Title              · 2h\n *             last message preview            (badge)\n *\n * On hover the kebab (3-dots) menu reveals so the user can pin/mute/archive\n * without opening the conversation first. Wires straight into\n * `useConversationActions` for archive/unarchive/pin/mute.\n */\nexport const ConversationRow = memo(function ConversationRow({\n  conversation,\n  isActive = false,\n  onClick,\n  onLeave,\n}: ConversationRowProps) {\n  const {\n    title,\n    type,\n    state,\n    lastMessage,\n    unreadCount,\n    isPinned,\n    isMuted,\n    memberCount,\n    updatedAt,\n    avatar,\n  } = conversation;\n\n  const hasUnread = unreadCount > 0;\n  const isArchived = state === \"ARCHIVED\";\n  const { t } = useI18n();\n  const tr = (key: string, fallback: string): string => {\n    const value = t(key);\n    return value === key ? fallback : value;\n  };\n  const timeLabels = {\n    now: tr(\"conversations.now\", \"now\"),\n    yesterday: tr(\"conversations.yesterday\", \"Yesterday\"),\n  };\n\n  // Track menu open so the kebab stays visible even when the cursor leaves\n  // the row (otherwise the radix portal closes on every hover-out).\n  const [menuOpen, setMenuOpen] = useState(false);\n\n  const {\n    archiveConversation,\n    unarchiveConversation,\n    pinConversation,\n    unpinConversation,\n    muteConversation,\n    unmuteConversation,\n  } = useConversationActions();\n\n  // Stop click bubbling from the kebab into the row's click handler — opening\n  // the menu must not also open the conversation.\n  const stop = (event: React.MouseEvent | React.KeyboardEvent) => {\n    event.stopPropagation();\n  };\n\n  return (\n    <div\n      data-tour=\"conversation-row\"\n      className={cn(\n        \"group relative flex w-full min-w-0 items-start gap-3 rounded-md px-3 py-2.5 transition-colors\",\n        \"cursor-pointer select-none\",\n        isActive\n          ? \"bg-bg-sunken border-l-2 border-l-action-primary-bg\"\n          : \"border-l-2 border-l-transparent hover:bg-action-ghost-bg-hover\",\n        hasUnread && !isActive && \"bg-bg-elevated/40\",\n      )}\n      role=\"button\"\n      tabIndex={0}\n      onClick={() => onClick?.(conversation)}\n      onKeyDown={(event) => {\n        if (event.key === \"Enter\" || event.key === \" \") {\n          event.preventDefault();\n          onClick?.(conversation);\n        }\n      }}\n      aria-label={\n        tr(\"conversations.openConversation\", \"Open conversation\") + \": \" + title\n      }\n    >\n      {/* Avatar / type icon */}\n      <div\n        className={cn(\n          \"flex-shrink-0 flex h-9 w-9 items-center justify-center rounded-full text-xs font-semibold overflow-hidden\",\n          type === \"DIRECT\" && \"bg-status-info-bg-subtle text-status-info-text\",\n          type === \"CHANNEL\" &&\n            \"bg-status-success-bg-subtle text-status-success-text\",\n          (type === \"GROUP\" ||\n            type === \"BROADCAST\" ||\n            type === \"ANNOUNCEMENT\" ||\n            type === \"BOT\" ||\n            type === \"SUPPORT\") &&\n            \"bg-bg-sunken text-text-primary\",\n        )}\n        aria-hidden=\"true\"\n      >\n        {avatar ? (\n          <img src={avatar} alt=\"\" className=\"h-full w-full object-cover\" />\n        ) : type === \"DIRECT\" ? (\n          getInitials(title)\n        ) : type === \"CHANNEL\" ? (\n          <Hash size={16} />\n        ) : (\n          <ConversationTypeIcon type={type} size={16} />\n        )}\n      </div>\n\n      {/* Body */}\n      <div className=\"flex min-w-0 flex-1 flex-col gap-0.5\">\n        <div className=\"flex items-center justify-between gap-2\">\n          <div className=\"flex min-w-0 items-center gap-1.5\">\n            <span\n              className={cn(\n                \"truncate text-sm\",\n                hasUnread\n                  ? \"font-semibold text-text-primary\"\n                  : \"font-medium text-text-primary\",\n              )}\n            >\n              {title}\n            </span>\n            {isPinned && (\n              <Pin\n                size={11}\n                className=\"flex-shrink-0 text-text-secondary\"\n                aria-label={tr(\"conversations.pinnedLabel\", \"Pinned\")}\n              />\n            )}\n            {isMuted && (\n              <VolumeX\n                size={11}\n                className=\"flex-shrink-0 text-text-secondary\"\n                aria-label={tr(\"conversations.mutedLabel\", \"Muted\")}\n              />\n            )}\n          </div>\n\n          <span\n            className={cn(\n              \"flex-shrink-0 text-[11px]\",\n              hasUnread\n                ? \"font-medium text-action-primary-bg\"\n                : \"text-text-secondary\",\n            )}\n          >\n            {formatRelativeTime(\n              lastMessage?.createdAt ?? updatedAt,\n              timeLabels,\n            )}\n          </span>\n        </div>\n\n        <div className=\"flex items-center justify-between gap-2\">\n          <p\n            className={cn(\n              \"min-w-0 truncate break-all text-xs\",\n              hasUnread ? \"text-text-primary/80\" : \"text-text-secondary\",\n            )}\n          >\n            {lastMessage ? (\n              <>\n                {lastMessage.sender.name && (\n                  <span className=\"font-medium\">\n                    {lastMessage.sender.name}\n                    {\": \"}\n                  </span>\n                )}\n                {lastMessage.content ||\n                  tr(\"conversations.sentAttachment\", \"Sent an attachment\")}\n              </>\n            ) : (\n              <span className=\"italic\">\n                {tr(\"conversations.noMessages\", \"No messages yet\")}\n              </span>\n            )}\n          </p>\n\n          <div className=\"flex flex-shrink-0 items-center gap-1.5\">\n            {type !== \"DIRECT\" && (\n              <span\n                className=\"inline-flex items-center gap-0.5 text-[10px] text-text-secondary\"\n                aria-label={`${memberCount} ${tr(\"conversations.membersLabel\", \"members\")}`}\n              >\n                <Users size={10} aria-hidden=\"true\" />\n                {memberCount}\n              </span>\n            )}\n            {hasUnread && (\n              <span\n                className=\"inline-flex h-[18px] min-w-[18px] items-center justify-center rounded-full bg-action-primary-bg px-1 text-[10px] font-bold text-action-primary-text\"\n                aria-label={`${unreadCount} ${tr(\"conversations.unreadCountLabel\", \"unread\")}`}\n              >\n                {unreadCount > 99 ? \"99+\" : unreadCount}\n              </span>\n            )}\n          </div>\n        </div>\n      </div>\n\n      {/* Kebab menu — hidden until hover or menu open */}\n      <DropdownMenu open={menuOpen} onOpenChange={setMenuOpen}>\n        <DropdownMenuTrigger asChild>\n          <button\n            type=\"button\"\n            onClick={stop}\n            onKeyDown={stop}\n            aria-label={tr(\n              \"conversations.rowMenuLabel\",\n              \"Conversation actions\",\n            )}\n            className={cn(\n              \"absolute right-2 top-2 flex h-7 w-7 items-center justify-center rounded-md transition-opacity\",\n              \"text-text-secondary hover:bg-action-ghost-bg-hover hover:text-text-primary\",\n              \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-action-primary-border\",\n              menuOpen\n                ? \"opacity-100\"\n                : \"opacity-0 group-hover:opacity-100 group-focus-within:opacity-100\",\n            )}\n          >\n            <MoreHorizontal size={14} aria-hidden=\"true\" />\n          </button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          align=\"end\"\n          className=\"min-w-[180px]\"\n          onClick={stop}\n        >\n          <DropdownMenuItem\n            onSelect={() => {\n              void (isPinned\n                ? unpinConversation(conversation.id)\n                : pinConversation(conversation.id));\n            }}\n          >\n            {isPinned ? (\n              <>\n                <PinOff size={14} />\n                {tr(\"conversations.unpin\", \"Unpin\")}\n              </>\n            ) : (\n              <>\n                <Pin size={14} />\n                {tr(\"conversations.pin\", \"Pin\")}\n              </>\n            )}\n          </DropdownMenuItem>\n          <DropdownMenuItem\n            onSelect={() => {\n              void (isMuted\n                ? unmuteConversation(conversation.id)\n                : muteConversation(conversation.id));\n            }}\n          >\n            {isMuted ? (\n              <>\n                <Bell size={14} />\n                {tr(\"conversations.unmute\", \"Unmute\")}\n              </>\n            ) : (\n              <>\n                <BellOff size={14} />\n                {tr(\"conversations.mute\", \"Mute\")}\n              </>\n            )}\n          </DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem\n            onSelect={() => {\n              void (isArchived\n                ? unarchiveConversation(conversation.id)\n                : archiveConversation(conversation.id));\n            }}\n          >\n            {isArchived ? (\n              <>\n                <ArchiveRestore size={14} />\n                {tr(\"conversations.unarchive\", \"Unarchive\")}\n              </>\n            ) : (\n              <>\n                <ArchiveIcon size={14} />\n                {tr(\"conversations.archive\", \"Archive\")}\n              </>\n            )}\n          </DropdownMenuItem>\n          {(type === \"GROUP\" || type === \"CHANNEL\") && onLeave && (\n            <>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem\n                onSelect={() => onLeave(conversation)}\n                className=\"text-status-error-text focus:text-status-error-text\"\n              >\n                <LogOut size={14} />\n                {tr(\"conversations.leave\", \"Leave\")}\n              </DropdownMenuItem>\n            </>\n          )}\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n  );\n});\n"],"mappings":"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"}
+{"version":3,"file":"ConversationRow.js","names":[],"sources":["../../../src/conversations/components/ConversationRow.tsx"],"sourcesContent":["import { memo, useState } from \"react\";\nimport {\n  ArchiveIcon,\n  ArchiveRestore,\n  Bell,\n  BellOff,\n  Bot,\n  Hash,\n  HeadphonesIcon,\n  LogOut,\n  Megaphone,\n  MessageCircle,\n  MoreHorizontal,\n  Pin,\n  PinOff,\n  Users,\n  VolumeX,\n} from \"lucide-react\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@burdenoff/fe-libs/ui\";\nimport { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell/I18nProvider\";\nimport { cn } from \"../utils/cn\";\nimport { useConversationActions } from \"../hooks/useConversationQueries\";\nimport type { Conversation } from \"../types\";\n\nexport interface ConversationRowProps {\n  conversation: Conversation;\n  isActive?: boolean;\n  onClick?: (conversation: Conversation) => void;\n  /** Optional leave handler — only the host has the membership mutation. */\n  onLeave?: (conversation: Conversation) => void;\n}\n\nfunction ConversationTypeIcon({\n  type,\n  size = 16,\n  className,\n}: {\n  type: Conversation[\"type\"];\n  size?: number;\n  className?: string;\n}) {\n  const props = { size, className };\n  switch (type) {\n    case \"DIRECT\":\n      return <MessageCircle {...props} />;\n    case \"GROUP\":\n      return <Users {...props} />;\n    case \"CHANNEL\":\n      return <Hash {...props} />;\n    case \"BROADCAST\":\n    case \"ANNOUNCEMENT\":\n      return <Megaphone {...props} />;\n    case \"BOT\":\n      return <Bot {...props} />;\n    case \"SUPPORT\":\n      return <HeadphonesIcon {...props} />;\n    default:\n      return <MessageCircle {...props} />;\n  }\n}\n\nfunction formatRelativeTime(\n  dateString: string,\n  labels: { now: string; yesterday: string },\n): string {\n  const now = new Date();\n  const date = new Date(dateString);\n  const diffMs = now.getTime() - date.getTime();\n  const diffMin = Math.floor(diffMs / 1000 / 60);\n  const diffHr = Math.floor(diffMin / 60);\n  const diffDay = Math.floor(diffHr / 24);\n\n  if (diffMin < 1) return labels.now;\n  if (diffMin < 60) return `${diffMin}m`;\n  if (diffHr < 24) return `${diffHr}h`;\n  if (diffDay === 1) return labels.yesterday;\n  if (diffDay < 7) return `${diffDay}d`;\n  return date.toLocaleDateString(undefined, { month: \"short\", day: \"numeric\" });\n}\n\nfunction getInitials(title: string): string {\n  return title\n    .split(\" \")\n    .slice(0, 2)\n    .map((word) => word[0])\n    .join(\"\")\n    .toUpperCase();\n}\n\n/**\n * ConversationRow — inbox-style list row.\n *\n * Visual hierarchy:\n *   [avatar]  Title              · 2h\n *             last message preview            (badge)\n *\n * On hover the kebab (3-dots) menu reveals so the user can pin/mute/archive\n * without opening the conversation first. Wires straight into\n * `useConversationActions` for archive/unarchive/pin/mute.\n */\nexport const ConversationRow = memo(function ConversationRow({\n  conversation,\n  isActive = false,\n  onClick,\n  onLeave,\n}: ConversationRowProps) {\n  const {\n    title,\n    type,\n    state,\n    lastMessage,\n    unreadCount,\n    isPinned,\n    isMuted,\n    memberCount,\n    updatedAt,\n    avatar,\n  } = conversation;\n\n  const hasUnread = unreadCount > 0;\n  const isArchived = state === \"ARCHIVED\";\n  const { t } = useI18n();\n  const tr = (key: string, fallback: string): string => {\n    const value = t(key);\n    return value === key ? fallback : value;\n  };\n  const timeLabels = {\n    now: tr(\"conversations.now\", \"now\"),\n    yesterday: tr(\"conversations.yesterday\", \"Yesterday\"),\n  };\n\n  // Track menu open so the kebab stays visible even when the cursor leaves\n  // the row (otherwise the radix portal closes on every hover-out).\n  const [menuOpen, setMenuOpen] = useState(false);\n\n  const {\n    archiveConversation,\n    unarchiveConversation,\n    pinConversation,\n    unpinConversation,\n    muteConversation,\n    unmuteConversation,\n  } = useConversationActions();\n\n  // Stop click bubbling from the kebab into the row's click handler — opening\n  // the menu must not also open the conversation.\n  const stop = (event: React.MouseEvent | React.KeyboardEvent) => {\n    event.stopPropagation();\n  };\n\n  return (\n    <div\n      data-tour=\"conversation-row\"\n      className={cn(\n        \"group relative flex w-full min-w-0 items-start gap-3 rounded-md px-3 py-2.5 transition-colors\",\n        \"cursor-pointer select-none\",\n        isActive\n          ? \"bg-bg-sunken border-l-2 border-l-action-primary-bg\"\n          : \"border-l-2 border-l-transparent hover:bg-action-ghost-bg-hover\",\n        hasUnread && !isActive && \"bg-bg-elevated/40\",\n      )}\n      role=\"button\"\n      tabIndex={0}\n      onClick={() => onClick?.(conversation)}\n      onKeyDown={(event) => {\n        if (event.key === \"Enter\" || event.key === \" \") {\n          event.preventDefault();\n          onClick?.(conversation);\n        }\n      }}\n      aria-label={\n        tr(\"conversations.openConversation\", \"Open conversation\") + \": \" + title\n      }\n    >\n      {/* Avatar / type icon */}\n      <div\n        className={cn(\n          \"flex-shrink-0 flex h-9 w-9 items-center justify-center rounded-full text-xs font-semibold overflow-hidden\",\n          type === \"DIRECT\" && \"bg-status-info-bg-subtle text-status-info-text\",\n          type === \"CHANNEL\" &&\n            \"bg-status-success-bg-subtle text-status-success-text\",\n          (type === \"GROUP\" ||\n            type === \"BROADCAST\" ||\n            type === \"ANNOUNCEMENT\" ||\n            type === \"BOT\" ||\n            type === \"SUPPORT\") &&\n            \"bg-bg-sunken text-text-primary\",\n        )}\n        aria-hidden=\"true\"\n      >\n        {avatar ? (\n          <img src={avatar} alt=\"\" className=\"h-full w-full object-cover\" />\n        ) : type === \"DIRECT\" ? (\n          getInitials(title)\n        ) : type === \"CHANNEL\" ? (\n          <Hash size={16} />\n        ) : (\n          <ConversationTypeIcon type={type} size={16} />\n        )}\n      </div>\n\n      {/* Body */}\n      <div className=\"flex min-w-0 flex-1 flex-col gap-0.5\">\n        <div className=\"flex items-center justify-between gap-2\">\n          <div className=\"flex min-w-0 items-center gap-1.5\">\n            <span\n              className={cn(\n                \"truncate text-sm\",\n                hasUnread\n                  ? \"font-semibold text-text-primary\"\n                  : \"font-medium text-text-primary\",\n              )}\n            >\n              {title}\n            </span>\n            {isPinned && (\n              <Pin\n                size={11}\n                className=\"flex-shrink-0 text-text-secondary\"\n                aria-label={tr(\"conversations.pinnedLabel\", \"Pinned\")}\n              />\n            )}\n            {isMuted && (\n              <VolumeX\n                size={11}\n                className=\"flex-shrink-0 text-text-secondary\"\n                aria-label={tr(\"conversations.mutedLabel\", \"Muted\")}\n              />\n            )}\n          </div>\n\n          <span\n            className={cn(\n              \"flex-shrink-0 text-[11px]\",\n              hasUnread\n                ? \"font-medium text-action-primary-bg\"\n                : \"text-text-secondary\",\n            )}\n          >\n            {formatRelativeTime(\n              lastMessage?.createdAt ?? updatedAt,\n              timeLabels,\n            )}\n          </span>\n        </div>\n\n        <div className=\"flex items-center justify-between gap-2\">\n          <p\n            className={cn(\n              \"min-w-0 truncate break-all text-xs\",\n              hasUnread ? \"text-text-primary/80\" : \"text-text-secondary\",\n            )}\n          >\n            {lastMessage ? (\n              <>\n                {lastMessage.sender.name && (\n                  <span className=\"font-medium\">\n                    {lastMessage.sender.name}\n                    {\": \"}\n                  </span>\n                )}\n                {lastMessage.content ||\n                  tr(\"conversations.sentAttachment\", \"Sent an attachment\")}\n              </>\n            ) : (\n              <span className=\"italic\">\n                {tr(\"conversations.noMessages\", \"No messages yet\")}\n              </span>\n            )}\n          </p>\n\n          <div className=\"flex flex-shrink-0 items-center gap-1.5\">\n            {type !== \"DIRECT\" && (\n              <span\n                className=\"inline-flex items-center gap-0.5 text-[10px] text-text-secondary\"\n                aria-label={`${memberCount} ${tr(\"conversations.membersLabel\", \"members\")}`}\n              >\n                <Users size={10} aria-hidden=\"true\" />\n                {memberCount}\n              </span>\n            )}\n            {hasUnread && (\n              <span\n                className=\"inline-flex h-[18px] min-w-[18px] items-center justify-center rounded-full bg-action-primary-bg px-1 text-[10px] font-bold text-action-primary-text motion-safe:animate-vc-glow-pulse\"\n                aria-label={`${unreadCount} ${tr(\"conversations.unreadCountLabel\", \"unread\")}`}\n              >\n                {unreadCount > 99 ? \"99+\" : unreadCount}\n              </span>\n            )}\n          </div>\n        </div>\n      </div>\n\n      {/* Kebab menu — hidden until hover or menu open */}\n      <DropdownMenu open={menuOpen} onOpenChange={setMenuOpen}>\n        <DropdownMenuTrigger asChild>\n          <button\n            type=\"button\"\n            onClick={stop}\n            onKeyDown={stop}\n            aria-label={tr(\n              \"conversations.rowMenuLabel\",\n              \"Conversation actions\",\n            )}\n            className={cn(\n              \"absolute right-2 top-2 flex h-7 w-7 items-center justify-center rounded-md transition-opacity\",\n              \"text-text-secondary hover:bg-action-ghost-bg-hover hover:text-text-primary\",\n              \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-action-primary-border\",\n              menuOpen\n                ? \"opacity-100\"\n                : \"opacity-0 group-hover:opacity-100 group-focus-within:opacity-100\",\n            )}\n          >\n            <MoreHorizontal size={14} aria-hidden=\"true\" />\n          </button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          align=\"end\"\n          className=\"min-w-[180px]\"\n          onClick={stop}\n        >\n          <DropdownMenuItem\n            onSelect={() => {\n              void (isPinned\n                ? unpinConversation(conversation.id)\n                : pinConversation(conversation.id));\n            }}\n          >\n            {isPinned ? (\n              <>\n                <PinOff size={14} />\n                {tr(\"conversations.unpin\", \"Unpin\")}\n              </>\n            ) : (\n              <>\n                <Pin size={14} />\n                {tr(\"conversations.pin\", \"Pin\")}\n              </>\n            )}\n          </DropdownMenuItem>\n          <DropdownMenuItem\n            onSelect={() => {\n              void (isMuted\n                ? unmuteConversation(conversation.id)\n                : muteConversation(conversation.id));\n            }}\n          >\n            {isMuted ? (\n              <>\n                <Bell size={14} />\n                {tr(\"conversations.unmute\", \"Unmute\")}\n              </>\n            ) : (\n              <>\n                <BellOff size={14} />\n                {tr(\"conversations.mute\", \"Mute\")}\n              </>\n            )}\n          </DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem\n            onSelect={() => {\n              void (isArchived\n                ? unarchiveConversation(conversation.id)\n                : archiveConversation(conversation.id));\n            }}\n          >\n            {isArchived ? (\n              <>\n                <ArchiveRestore size={14} />\n                {tr(\"conversations.unarchive\", \"Unarchive\")}\n              </>\n            ) : (\n              <>\n                <ArchiveIcon size={14} />\n                {tr(\"conversations.archive\", \"Archive\")}\n              </>\n            )}\n          </DropdownMenuItem>\n          {(type === \"GROUP\" || type === \"CHANNEL\") && onLeave && (\n            <>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem\n                onSelect={() => onLeave(conversation)}\n                className=\"text-status-error-text focus:text-status-error-text\"\n              >\n                <LogOut size={14} />\n                {tr(\"conversations.leave\", \"Leave\")}\n              </DropdownMenuItem>\n            </>\n          )}\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n  );\n});\n"],"mappings":"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"}

package/dist/conversations/components/EmptyState.js

@@ -1,16 +1,22 @@
 import { jsx as e } from "react/jsx-runtime";
-import { EmptyState as t } from "@burdenoff/fe-libs/ui";
+import { EmptyState as t, IllustratedEmptyState as n } from "@burdenoff/fe-libs/ui";
 //#region src/conversations/components/EmptyState.tsx
-function n({ icon: n, title: r, description: i, action: a, className: o }) {
-	return /* @__PURE__ */ e(t, {
-		icon: n,
-		title: r,
-		description: i,
-		action: a,
-		className: o
+function r({ icon: r, title: i, description: a, action: o, illustration: s, className: c }) {
+	return s ? /* @__PURE__ */ e(n, {
+		illustration: s,
+		title: i,
+		description: a,
+		action: o,
+		className: c
+	}) : /* @__PURE__ */ e(t, {
+		icon: r,
+		title: i,
+		description: a,
+		action: o,
+		className: c
 	});
 }
 //#endregion
-export { n as EmptyState };
+export { r as EmptyState };
 
 //# sourceMappingURL=EmptyState.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"EmptyState.js","names":[],"sources":["../../../src/conversations/components/EmptyState.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { EmptyState as CanonicalEmptyState } from \"@burdenoff/fe-libs/ui\";\n\n/**\n * Local wrapper around `EmptyState` from `@burdenoff/fe-libs/ui`. Keeps the\n * existing microfe-conversations call sites stable while routing all\n * empty-state rendering through the canonical primitive.\n */\nexport function EmptyState({\n  icon,\n  title,\n  description,\n  action,\n  className,\n}: {\n  icon?: ReactNode;\n  title: string;\n  description?: string;\n  action?: ReactNode;\n  className?: string;\n}) {\n  return (\n    <CanonicalEmptyState\n      icon={icon}\n      title={title}\n      description={description}\n      action={action}\n      className={className}\n    />\n  );\n}\n"],"mappings":";;;AAQA,SAAgB,EAAW,EACzB,SACA,UACA,gBACA,WACA,gBAOC;AACD,QACE,kBAAC,GAAD;EACQ;EACC;EACM;EACL;EACG;EACX,CAAA"}
+{"version":3,"file":"EmptyState.js","names":[],"sources":["../../../src/conversations/components/EmptyState.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport {\n  EmptyState as CanonicalEmptyState,\n  IllustratedEmptyState,\n} from \"@burdenoff/fe-libs/ui\";\n\n/**\n * Local wrapper around the canonical empty-state primitives. Keeps the existing\n * microfe-conversations call sites stable while routing all empty-state\n * rendering through fe-libs. When an `illustration` name is supplied the richer\n * Boff UI 2.0 `IllustratedEmptyState` (on-brand artwork) is rendered; otherwise\n * the compact icon-based `EmptyState` is used.\n */\nexport function EmptyState({\n  icon,\n  title,\n  description,\n  action,\n  illustration,\n  className,\n}: {\n  icon?: ReactNode;\n  title: string;\n  description?: string;\n  action?: ReactNode;\n  illustration?: string;\n  className?: string;\n}) {\n  if (illustration) {\n    return (\n      <IllustratedEmptyState\n        illustration={illustration}\n        title={title}\n        description={description}\n        action={action}\n        className={className}\n      />\n    );\n  }\n  return (\n    <CanonicalEmptyState\n      icon={icon}\n      title={title}\n      description={description}\n      action={action}\n      className={className}\n    />\n  );\n}\n"],"mappings":";;;AAaA,SAAgB,EAAW,EACzB,SACA,UACA,gBACA,WACA,iBACA,gBAQC;AAYD,QAXI,IAEA,kBAAC,GAAD;EACgB;EACP;EACM;EACL;EACG;EACX,CAAA,GAIJ,kBAAC,GAAD;EACQ;EACC;EACM;EACL;EACG;EACX,CAAA"}

package/dist/conversations/components/InboxLayout.js

@@ -6,71 +6,72 @@ import { useCallback as i, useMemo as a } from "react";
 import { ArrowLeft as o, MessageSquarePlus as s, Search as c, X as l } from "lucide-react";
 import { useLocation as u, useNavigate as d, useParams as f } from "react-router-dom";
 import { jsx as p, jsxs as m } from "react/jsx-runtime";
-import { Button as h } from "@burdenoff/fe-libs/ui";
-import { Tabs as g } from "@burdenoff/fe-libs/chrome";
+import { AuroraBackground as h, Button as g, GradientText as _, IllustratedEmptyState as v } from "@burdenoff/fe-libs/ui";
+import { Tabs as y } from "@burdenoff/fe-libs/chrome";
 //#region src/conversations/components/InboxLayout.tsx
-function _({ activeTab: _, onTabChange: y, archivedEnabled: b = !0, searchQuery: x, onSearchChange: S, filterChips: C, listSlot: w, detailSlot: T, emptyDetailSlot: E }) {
-	let D = d(), O = t(), { basePath: k } = e(), { setActiveConversationId: A } = r(), j = f(), M = u(), N = !!j.conversationId && !!T, P = a(() => {
+function b({ activeTab: v, onTabChange: b, archivedEnabled: S = !0, searchQuery: C, onSearchChange: w, filterChips: T, listSlot: E, detailSlot: D, emptyDetailSlot: O }) {
+	let k = d(), A = t(), { basePath: j } = e(), { setActiveConversationId: M } = r(), N = f(), P = u(), F = !!N.conversationId && !!D, I = a(() => {
 		let e = [
 			{
 				id: "all",
-				label: O("conversations.tabs.all", "All")
+				label: A("conversations.tabs.all", "All")
 			},
 			{
 				id: "direct",
-				label: O("conversations.tabs.direct", "Direct")
+				label: A("conversations.tabs.direct", "Direct")
 			},
 			{
 				id: "groups",
-				label: O("conversations.tabs.groups", "Groups")
+				label: A("conversations.tabs.groups", "Groups")
 			},
 			{
 				id: "channels",
-				label: O("conversations.tabs.channels", "Channels")
+				label: A("conversations.tabs.channels", "Channels")
 			}
 		];
-		return b && e.push({
+		return S && e.push({
 			id: "archived",
-			label: O("conversations.tabs.archived", "Archived")
+			label: A("conversations.tabs.archived", "Archived")
 		}), e;
-	}, [b, O]), F = i(() => {
-		let e = k || "/conversations", t = new URLSearchParams(M.search);
-		t.set("new", "true"), D(`${e}?${t.toString()}`);
+	}, [S, A]), L = i(() => {
+		let e = j || "/conversations", t = new URLSearchParams(P.search);
+		t.set("new", "true"), k(`${e}?${t.toString()}`);
 	}, [
-		k,
-		M.search,
-		D
-	]), I = i(() => {
-		A(null), D(`${k || "/conversations"}${M.search}`);
+		j,
+		P.search,
+		k
+	]), R = i(() => {
+		M(null), k(`${j || "/conversations"}${P.search}`);
 	}, [
+		j,
+		P.search,
 		k,
-		M.search,
-		D,
-		A
+		M
 	]);
 	return /* @__PURE__ */ m("div", {
 		"data-tour": "conversations-inbox",
 		className: "flex h-full w-full min-h-0 min-w-0 overflow-hidden bg-bg-canvas",
 		children: [/* @__PURE__ */ m("aside", {
-			"aria-label": O("conversations.listPaneLabel", "Conversations list"),
-			className: n("flex flex-col min-h-0 border-r border-border-default bg-bg-surface", "w-full md:w-[320px] md:flex-shrink-0", N ? "hidden md:flex" : "flex"),
+			"aria-label": A("conversations.listPaneLabel", "Conversations list"),
+			className: n("flex flex-col min-h-0 border-r border-border-default bg-bg-surface", "w-full md:w-[320px] md:flex-shrink-0", F ? "hidden md:flex" : "flex"),
 			children: [/* @__PURE__ */ m("div", {
-				className: "sticky top-0 z-10 flex flex-col gap-3 border-b border-border-subtle bg-bg-surface px-4 pt-4 pb-3",
+				className: "relative isolate overflow-hidden sticky top-0 z-10 flex flex-col gap-3 border-b border-border-subtle bg-bg-surface px-4 pt-4 pb-3",
 				children: [
+					/* @__PURE__ */ p(h, { intensity: "subtle" }),
 					/* @__PURE__ */ m("div", {
 						className: "flex items-center justify-between gap-2",
 						children: [/* @__PURE__ */ p("h1", {
 							className: "text-base font-semibold text-text-primary",
-							children: O("conversations.title", "Conversations")
-						}), /* @__PURE__ */ m(h, {
+							children: /* @__PURE__ */ p(_, { children: A("conversations.title", "Conversations") })
+						}), /* @__PURE__ */ m(g, {
 							"data-tour": "conversation-new-button",
 							type: "button",
 							size: "sm",
-							onClick: F,
-							"aria-label": O("conversations.createNewConversation", "Create a new conversation"),
+							onClick: L,
+							"aria-label": A("conversations.createNewConversation", "Create a new conversation"),
 							children: [/* @__PURE__ */ p(s, { size: 14 }), /* @__PURE__ */ p("span", {
 								className: "hidden sm:inline",
-								children: O("conversations.newConversation", "New")
+								children: A("conversations.newConversation", "New")
 							})]
 						})]
 					}),
@@ -85,16 +86,16 @@ function _({ activeTab: _, onTabChange: y, archivedEnabled: b = !0, searchQuery:
 							/* @__PURE__ */ p("input", {
 								"data-tour": "conversation-search",
 								type: "search",
-								value: x,
-								onChange: (e) => S(e.target.value),
-								placeholder: O("conversations.search", "Search conversations..."),
-								"aria-label": O("conversations.searchAria", "Search conversations"),
+								value: C,
+								onChange: (e) => w(e.target.value),
+								placeholder: A("conversations.search", "Search conversations..."),
+								"aria-label": A("conversations.searchAria", "Search conversations"),
 								className: n("w-full rounded-md border border-border-default bg-bg-elevated", "py-1.5 pl-8 pr-8 text-sm text-text-primary", "placeholder:text-text-secondary", "focus:border-action-primary-border focus:outline-none focus:ring-2 focus:ring-action-primary-border/40")
 							}),
-							x.length > 0 && /* @__PURE__ */ p("button", {
+							C.length > 0 && /* @__PURE__ */ p("button", {
 								type: "button",
-								onClick: () => S(""),
-								"aria-label": O("conversations.clearSearch", "Clear conversation search"),
+								onClick: () => w(""),
+								"aria-label": A("conversations.clearSearch", "Clear conversation search"),
 								className: "absolute right-2 top-1/2 -translate-y-1/2 rounded p-0.5 text-text-secondary hover:bg-action-ghost-bg-hover hover:text-text-primary",
 								children: /* @__PURE__ */ p(l, { size: 12 })
 							})
@@ -102,18 +103,18 @@ function _({ activeTab: _, onTabChange: y, archivedEnabled: b = !0, searchQuery:
 					}),
 					/* @__PURE__ */ p("div", {
 						"data-tour": "conversations-tabs",
-						children: /* @__PURE__ */ p(g, {
-							items: P,
-							activeTabId: _,
-							onTabChange: (e) => y(e),
+						children: /* @__PURE__ */ p(y, {
+							items: I,
+							activeTabId: v,
+							onTabChange: (e) => b(e),
 							variant: "underline",
 							size: "sm"
 						})
 					}),
-					C && C.length > 0 && /* @__PURE__ */ p("div", {
+					T && T.length > 0 && /* @__PURE__ */ p("div", {
 						"data-tour": "conversations-filter-chips",
 						className: "flex flex-wrap gap-1.5",
-						children: C.map((e) => /* @__PURE__ */ m("button", {
+						children: T.map((e) => /* @__PURE__ */ m("button", {
 							type: "button",
 							onClick: e.onToggle,
 							"aria-pressed": e.active,
@@ -125,65 +126,48 @@ function _({ activeTab: _, onTabChange: y, archivedEnabled: b = !0, searchQuery:
 			}), /* @__PURE__ */ p("div", {
 				"data-tour": "conversations-list-scroll",
 				className: "flex-1 min-h-0 overflow-y-auto overflow-x-hidden",
-				children: w
+				children: E
 			})]
 		}), /* @__PURE__ */ m("section", {
-			"aria-label": O("conversations.detailPaneLabel", "Conversation detail"),
-			className: n("flex flex-col min-h-0 flex-1 min-w-0 bg-bg-surface", N ? "flex" : "hidden md:flex"),
-			children: [N && /* @__PURE__ */ p("div", {
+			"aria-label": A("conversations.detailPaneLabel", "Conversation detail"),
+			className: n("flex flex-col min-h-0 flex-1 min-w-0 bg-bg-surface", F ? "flex" : "hidden md:flex"),
+			children: [F && /* @__PURE__ */ p("div", {
 				className: "md:hidden border-b border-border-subtle px-3 py-2",
-				children: /* @__PURE__ */ m(h, {
+				children: /* @__PURE__ */ m(g, {
 					variant: "ghost",
 					size: "sm",
-					onClick: I,
-					"aria-label": O("conversations.backToInbox", "Back to conversations list"),
-					children: [/* @__PURE__ */ p(o, { size: 14 }), O("conversations.backToInbox", "Back to inbox")]
+					onClick: R,
+					"aria-label": A("conversations.backToInbox", "Back to conversations list"),
+					children: [/* @__PURE__ */ p(o, { size: 14 }), A("conversations.backToInbox", "Back to inbox")]
 				})
 			}), /* @__PURE__ */ p("div", {
 				className: "flex-1 min-h-0 min-w-0 overflow-y-auto overflow-x-hidden",
-				children: T ?? E ?? /* @__PURE__ */ p(v, {
-					onNew: F,
-					title: O("conversations.detailEmpty.title", "Select a conversation"),
-					description: O("conversations.detailEmpty.description", "Pick a conversation from the list — or start a new one."),
-					newLabel: O("conversations.detailEmpty.newCta", "Start a new conversation")
+				children: D ?? O ?? /* @__PURE__ */ p(x, {
+					onNew: L,
+					title: A("conversations.detailEmpty.title", "Select a conversation"),
+					description: A("conversations.detailEmpty.description", "Pick a conversation from the list — or start a new one."),
+					newLabel: A("conversations.detailEmpty.newCta", "Start a new conversation")
 				})
 			})]
 		})]
 	});
 }
-function v({ title: e, description: t, newLabel: n, onNew: r }) {
+function x({ title: e, description: t, newLabel: n, onNew: r }) {
 	return /* @__PURE__ */ p("div", {
 		className: "flex h-full items-center justify-center p-8",
-		children: /* @__PURE__ */ m("div", {
-			className: "flex max-w-sm flex-col items-center gap-3 text-center",
-			children: [
-				/* @__PURE__ */ p("div", {
-					className: "flex size-16 items-center justify-center rounded-full bg-bg-sunken",
-					children: /* @__PURE__ */ p(s, {
-						size: 28,
-						className: "text-text-secondary",
-						"aria-hidden": "true"
-					})
-				}),
-				/* @__PURE__ */ p("h2", {
-					className: "text-lg font-semibold text-text-primary",
-					children: e
-				}),
-				/* @__PURE__ */ p("p", {
-					className: "text-sm text-text-secondary",
-					children: t
-				}),
-				/* @__PURE__ */ m(h, {
-					type: "button",
-					onClick: r,
-					className: "mt-2",
-					children: [/* @__PURE__ */ p(s, { size: 14 }), n]
-				})
-			]
+		children: /* @__PURE__ */ p(v, {
+			illustration: "empty-vibes",
+			title: e,
+			description: t,
+			action: /* @__PURE__ */ m(g, {
+				type: "button",
+				onClick: r,
+				children: [/* @__PURE__ */ p(s, { size: 14 }), n]
+			})
 		})
 	});
 }
 //#endregion
-export { _ as InboxLayout };
+export { b as InboxLayout };
 
 //# sourceMappingURL=InboxLayout.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"InboxLayout.js","names":[],"sources":["../../../src/conversations/components/InboxLayout.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { useCallback, useMemo } from \"react\";\nimport { useLocation, useNavigate, useParams } from \"react-router-dom\";\nimport { Tabs, type TabItem } from \"@burdenoff/fe-libs/chrome\";\nimport { Button } from \"@burdenoff/fe-libs/ui\";\nimport { ArrowLeft, MessageSquarePlus, Search, X } from \"lucide-react\";\nimport { cn } from \"../utils/cn\";\nimport { useConversations } from \"../providers/ConversationsProvider\";\nimport { useConversationsStore } from \"../store/conversationsStore\";\nimport { useTr } from \"../utils/i18n\";\n\n/**\n * Identifier for each inbox tab. Drives the conversation list filter and is\n * mirrored to / read from the `?tab=` URL search param.\n */\nexport type InboxTabId = \"all\" | \"direct\" | \"groups\" | \"channels\" | \"archived\";\n\nexport const INBOX_TAB_IDS: InboxTabId[] = [\n  \"all\",\n  \"direct\",\n  \"groups\",\n  \"channels\",\n  \"archived\",\n];\n\nexport interface FilterChipDescriptor {\n  id: \"unread\" | \"pinned\";\n  label: string;\n  active: boolean;\n  onToggle: () => void;\n  icon?: ReactNode;\n}\n\nexport interface InboxLayoutProps {\n  /**\n   * Currently active inbox tab. Drives which list view is rendered in the\n   * left pane.\n   */\n  activeTab: InboxTabId;\n  /** Tab change handler. Used by the host page to sync URL state. */\n  onTabChange: (id: InboxTabId) => void;\n  /**\n   * Whether the Archived tab is exposed. Gated behind the `conversations.archived-view`\n   * feature flag — when false the tab is hidden from the bar entirely.\n   */\n  archivedEnabled?: boolean;\n  /** Search input value (controlled). */\n  searchQuery: string;\n  /** Search input change handler. */\n  onSearchChange: (value: string) => void;\n  /**\n   * Quick toggleable filter chips rendered below the tabs. Pass an empty\n   * array (or omit) to hide the chip row entirely — useful on the Archived\n   * tab where pin/unread filters don't make sense.\n   */\n  filterChips?: FilterChipDescriptor[];\n  /** Scrollable list content rendered in the left pane below the chrome. */\n  listSlot: ReactNode;\n  /**\n   * Right-pane content. When a conversation is selected the parent should\n   * pass the conversation detail subtree here. When nothing is selected the\n   * empty-state slot below is used instead.\n   */\n  detailSlot?: ReactNode;\n  /**\n   * Empty-state rendered in the right pane when `detailSlot` is null /\n   * undefined. Defaults to a generic \"Select a conversation\" prompt.\n   */\n  emptyDetailSlot?: ReactNode;\n}\n\n/**\n * Two-pane inbox shell for the conversations microfrontend.\n *\n * Left pane: fixed 320px (collapses to full-width below `md` when no\n * conversation is selected, the way Slack / Linear / Discord behave on\n * mobile). Holds:\n *   - sticky header (title + New CTA)\n *   - search input\n *   - tabs (All / Direct / Groups / Channels / Archived)\n *   - filter chips (Unread / Pinned)\n *   - scrollable conversation list\n *\n * Right pane: detail subtree OR empty state.\n *\n * The component is presentation-only — URL <-> tab sync, query\n * construction, and conversation selection all live in the host page.\n */\nexport function InboxLayout({\n  activeTab,\n  onTabChange,\n  archivedEnabled = true,\n  searchQuery,\n  onSearchChange,\n  filterChips,\n  listSlot,\n  detailSlot,\n  emptyDetailSlot,\n}: InboxLayoutProps) {\n  const navigate = useNavigate();\n  const tr = useTr();\n  const { basePath } = useConversations();\n  const { setActiveConversationId } = useConversationsStore();\n  const params = useParams<{ conversationId?: string }>();\n  const location = useLocation();\n  // A conversation is \"open\" whenever the URL targets a detail route\n  // (/:conversationId). We can't rely solely on a passed detailSlot —\n  // routing decides whether to mount the detail page.\n  const conversationOpen =\n    Boolean(params.conversationId) && Boolean(detailSlot);\n\n  const tabs: TabItem[] = useMemo(() => {\n    const items: TabItem[] = [\n      { id: \"all\", label: tr(\"conversations.tabs.all\", \"All\") },\n      { id: \"direct\", label: tr(\"conversations.tabs.direct\", \"Direct\") },\n      { id: \"groups\", label: tr(\"conversations.tabs.groups\", \"Groups\") },\n      { id: \"channels\", label: tr(\"conversations.tabs.channels\", \"Channels\") },\n    ];\n    if (archivedEnabled) {\n      items.push({\n        id: \"archived\",\n        label: tr(\"conversations.tabs.archived\", \"Archived\"),\n      });\n    }\n    return items;\n  }, [archivedEnabled, tr]);\n\n  const handleNewConversation = useCallback(() => {\n    // Open the create-conversation dialog in-place via `?new=true` on the\n    // inbox landing page (parent route). This replaces the legacy\n    // `/conversations/new` full-page navigation — the user stays inside\n    // the inbox and the dialog is mounted there.\n    const inboxRoot = basePath || \"/conversations\";\n    const currentSearch = new URLSearchParams(location.search);\n    currentSearch.set(\"new\", \"true\");\n    navigate(`${inboxRoot}?${currentSearch.toString()}`);\n  }, [basePath, location.search, navigate]);\n\n  const handleBackToList = useCallback(() => {\n    // Clear the open conversation id so the empty state shows and routing\n    // returns to the inbox shell. We keep the current tab via location.search.\n    setActiveConversationId(null);\n    navigate(`${basePath || \"/conversations\"}${location.search}`);\n  }, [basePath, location.search, navigate, setActiveConversationId]);\n\n  return (\n    <div\n      data-tour=\"conversations-inbox\"\n      className=\"flex h-full w-full min-h-0 min-w-0 overflow-hidden bg-bg-canvas\"\n    >\n      {/* Left pane: list. On md+ always visible as a fixed sidebar. Below md,\n          hidden when a conversation is open (full-screen detail mode). */}\n      <aside\n        aria-label={tr(\"conversations.listPaneLabel\", \"Conversations list\")}\n        className={cn(\n          \"flex flex-col min-h-0 border-r border-border-default bg-bg-surface\",\n          \"w-full md:w-[320px] md:flex-shrink-0\",\n          conversationOpen ? \"hidden md:flex\" : \"flex\",\n        )}\n      >\n        {/* Sticky header: title + new CTA */}\n        <div className=\"sticky top-0 z-10 flex flex-col gap-3 border-b border-border-subtle bg-bg-surface px-4 pt-4 pb-3\">\n          <div className=\"flex items-center justify-between gap-2\">\n            <h1 className=\"text-base font-semibold text-text-primary\">\n              {tr(\"conversations.title\", \"Conversations\")}\n            </h1>\n            <Button\n              data-tour=\"conversation-new-button\"\n              type=\"button\"\n              size=\"sm\"\n              onClick={handleNewConversation}\n              aria-label={tr(\n                \"conversations.createNewConversation\",\n                \"Create a new conversation\",\n              )}\n            >\n              <MessageSquarePlus size={14} />\n              <span className=\"hidden sm:inline\">\n                {tr(\"conversations.newConversation\", \"New\")}\n              </span>\n            </Button>\n          </div>\n\n          {/* Search */}\n          <div className=\"relative\">\n            <Search\n              size={14}\n              className=\"pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-text-secondary\"\n              aria-hidden=\"true\"\n            />\n            <input\n              data-tour=\"conversation-search\"\n              type=\"search\"\n              value={searchQuery}\n              onChange={(event) => onSearchChange(event.target.value)}\n              placeholder={tr(\n                \"conversations.search\",\n                \"Search conversations...\",\n              )}\n              aria-label={tr(\n                \"conversations.searchAria\",\n                \"Search conversations\",\n              )}\n              className={cn(\n                \"w-full rounded-md border border-border-default bg-bg-elevated\",\n                \"py-1.5 pl-8 pr-8 text-sm text-text-primary\",\n                \"placeholder:text-text-secondary\",\n                \"focus:border-action-primary-border focus:outline-none focus:ring-2 focus:ring-action-primary-border/40\",\n              )}\n            />\n            {searchQuery.length > 0 && (\n              <button\n                type=\"button\"\n                onClick={() => onSearchChange(\"\")}\n                aria-label={tr(\n                  \"conversations.clearSearch\",\n                  \"Clear conversation search\",\n                )}\n                className=\"absolute right-2 top-1/2 -translate-y-1/2 rounded p-0.5 text-text-secondary hover:bg-action-ghost-bg-hover hover:text-text-primary\"\n              >\n                <X size={12} />\n              </button>\n            )}\n          </div>\n\n          {/* Tabs */}\n          <div data-tour=\"conversations-tabs\">\n            <Tabs\n              items={tabs}\n              activeTabId={activeTab}\n              onTabChange={(id: string) => onTabChange(id as InboxTabId)}\n              variant=\"underline\"\n              size=\"sm\"\n            />\n          </div>\n\n          {/* Filter chips */}\n          {filterChips && filterChips.length > 0 && (\n            <div\n              data-tour=\"conversations-filter-chips\"\n              className=\"flex flex-wrap gap-1.5\"\n            >\n              {filterChips.map((chip) => (\n                <button\n                  key={chip.id}\n                  type=\"button\"\n                  onClick={chip.onToggle}\n                  aria-pressed={chip.active}\n                  className={cn(\n                    \"inline-flex items-center gap-1 rounded-full border px-2.5 py-0.5 text-xs font-medium transition-colors\",\n                    chip.active\n                      ? \"border-action-primary-border bg-action-primary-bg/10 text-action-primary-bg\"\n                      : \"border-border-default text-text-secondary hover:bg-action-ghost-bg-hover hover:text-text-primary\",\n                  )}\n                >\n                  {chip.icon}\n                  {chip.label}\n                </button>\n              ))}\n            </div>\n          )}\n        </div>\n\n        {/* Scrollable list */}\n        <div\n          data-tour=\"conversations-list-scroll\"\n          className=\"flex-1 min-h-0 overflow-y-auto overflow-x-hidden\"\n        >\n          {listSlot}\n        </div>\n      </aside>\n\n      {/* Right pane: detail OR empty state */}\n      <section\n        aria-label={tr(\"conversations.detailPaneLabel\", \"Conversation detail\")}\n        className={cn(\n          \"flex flex-col min-h-0 flex-1 min-w-0 bg-bg-surface\",\n          conversationOpen ? \"flex\" : \"hidden md:flex\",\n        )}\n      >\n        {conversationOpen && (\n          // Mobile-only back button. On md+ the list and detail render\n          // side-by-side so the back arrow would be useless.\n          <div className=\"md:hidden border-b border-border-subtle px-3 py-2\">\n            <Button\n              variant=\"ghost\"\n              size=\"sm\"\n              onClick={handleBackToList}\n              aria-label={tr(\n                \"conversations.backToInbox\",\n                \"Back to conversations list\",\n              )}\n            >\n              <ArrowLeft size={14} />\n              {tr(\"conversations.backToInbox\", \"Back to inbox\")}\n            </Button>\n          </div>\n        )}\n        <div className=\"flex-1 min-h-0 min-w-0 overflow-y-auto overflow-x-hidden\">\n          {detailSlot ?? emptyDetailSlot ?? (\n            <InboxEmptyDetail\n              onNew={handleNewConversation}\n              title={tr(\n                \"conversations.detailEmpty.title\",\n                \"Select a conversation\",\n              )}\n              description={tr(\n                \"conversations.detailEmpty.description\",\n                \"Pick a conversation from the list — or start a new one.\",\n              )}\n              newLabel={tr(\n                \"conversations.detailEmpty.newCta\",\n                \"Start a new conversation\",\n              )}\n            />\n          )}\n        </div>\n      </section>\n    </div>\n  );\n}\n\ninterface InboxEmptyDetailProps {\n  title: string;\n  description: string;\n  newLabel: string;\n  onNew: () => void;\n}\n\n/**\n * Default empty-state rendered in the detail pane when no conversation is\n * currently selected. Lifted out so the host page (or tests) can override\n * the copy via `emptyDetailSlot`.\n */\nfunction InboxEmptyDetail({\n  title,\n  description,\n  newLabel,\n  onNew,\n}: InboxEmptyDetailProps) {\n  return (\n    <div className=\"flex h-full items-center justify-center p-8\">\n      <div className=\"flex max-w-sm flex-col items-center gap-3 text-center\">\n        <div className=\"flex size-16 items-center justify-center rounded-full bg-bg-sunken\">\n          <MessageSquarePlus\n            size={28}\n            className=\"text-text-secondary\"\n            aria-hidden=\"true\"\n          />\n        </div>\n        <h2 className=\"text-lg font-semibold text-text-primary\">{title}</h2>\n        <p className=\"text-sm text-text-secondary\">{description}</p>\n        <Button type=\"button\" onClick={onNew} className=\"mt-2\">\n          <MessageSquarePlus size={14} />\n          {newLabel}\n        </Button>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"InboxLayout.js","names":[],"sources":["../../../src/conversations/components/InboxLayout.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { useCallback, useMemo } from \"react\";\nimport { useLocation, useNavigate, useParams } from \"react-router-dom\";\nimport { Tabs, type TabItem } from \"@burdenoff/fe-libs/chrome\";\nimport {\n  Button,\n  AuroraBackground,\n  GradientText,\n  IllustratedEmptyState,\n} from \"@burdenoff/fe-libs/ui\";\nimport { ArrowLeft, MessageSquarePlus, Search, X } from \"lucide-react\";\nimport { cn } from \"../utils/cn\";\nimport { useConversations } from \"../providers/ConversationsProvider\";\nimport { useConversationsStore } from \"../store/conversationsStore\";\nimport { useTr } from \"../utils/i18n\";\n\n/**\n * Identifier for each inbox tab. Drives the conversation list filter and is\n * mirrored to / read from the `?tab=` URL search param.\n */\nexport type InboxTabId = \"all\" | \"direct\" | \"groups\" | \"channels\" | \"archived\";\n\nexport const INBOX_TAB_IDS: InboxTabId[] = [\n  \"all\",\n  \"direct\",\n  \"groups\",\n  \"channels\",\n  \"archived\",\n];\n\nexport interface FilterChipDescriptor {\n  id: \"unread\" | \"pinned\";\n  label: string;\n  active: boolean;\n  onToggle: () => void;\n  icon?: ReactNode;\n}\n\nexport interface InboxLayoutProps {\n  /**\n   * Currently active inbox tab. Drives which list view is rendered in the\n   * left pane.\n   */\n  activeTab: InboxTabId;\n  /** Tab change handler. Used by the host page to sync URL state. */\n  onTabChange: (id: InboxTabId) => void;\n  /**\n   * Whether the Archived tab is exposed. Gated behind the `conversations.archived-view`\n   * feature flag — when false the tab is hidden from the bar entirely.\n   */\n  archivedEnabled?: boolean;\n  /** Search input value (controlled). */\n  searchQuery: string;\n  /** Search input change handler. */\n  onSearchChange: (value: string) => void;\n  /**\n   * Quick toggleable filter chips rendered below the tabs. Pass an empty\n   * array (or omit) to hide the chip row entirely — useful on the Archived\n   * tab where pin/unread filters don't make sense.\n   */\n  filterChips?: FilterChipDescriptor[];\n  /** Scrollable list content rendered in the left pane below the chrome. */\n  listSlot: ReactNode;\n  /**\n   * Right-pane content. When a conversation is selected the parent should\n   * pass the conversation detail subtree here. When nothing is selected the\n   * empty-state slot below is used instead.\n   */\n  detailSlot?: ReactNode;\n  /**\n   * Empty-state rendered in the right pane when `detailSlot` is null /\n   * undefined. Defaults to a generic \"Select a conversation\" prompt.\n   */\n  emptyDetailSlot?: ReactNode;\n}\n\n/**\n * Two-pane inbox shell for the conversations microfrontend.\n *\n * Left pane: fixed 320px (collapses to full-width below `md` when no\n * conversation is selected, the way Slack / Linear / Discord behave on\n * mobile). Holds:\n *   - sticky header (title + New CTA)\n *   - search input\n *   - tabs (All / Direct / Groups / Channels / Archived)\n *   - filter chips (Unread / Pinned)\n *   - scrollable conversation list\n *\n * Right pane: detail subtree OR empty state.\n *\n * The component is presentation-only — URL <-> tab sync, query\n * construction, and conversation selection all live in the host page.\n */\nexport function InboxLayout({\n  activeTab,\n  onTabChange,\n  archivedEnabled = true,\n  searchQuery,\n  onSearchChange,\n  filterChips,\n  listSlot,\n  detailSlot,\n  emptyDetailSlot,\n}: InboxLayoutProps) {\n  const navigate = useNavigate();\n  const tr = useTr();\n  const { basePath } = useConversations();\n  const { setActiveConversationId } = useConversationsStore();\n  const params = useParams<{ conversationId?: string }>();\n  const location = useLocation();\n  // A conversation is \"open\" whenever the URL targets a detail route\n  // (/:conversationId). We can't rely solely on a passed detailSlot —\n  // routing decides whether to mount the detail page.\n  const conversationOpen =\n    Boolean(params.conversationId) && Boolean(detailSlot);\n\n  const tabs: TabItem[] = useMemo(() => {\n    const items: TabItem[] = [\n      { id: \"all\", label: tr(\"conversations.tabs.all\", \"All\") },\n      { id: \"direct\", label: tr(\"conversations.tabs.direct\", \"Direct\") },\n      { id: \"groups\", label: tr(\"conversations.tabs.groups\", \"Groups\") },\n      { id: \"channels\", label: tr(\"conversations.tabs.channels\", \"Channels\") },\n    ];\n    if (archivedEnabled) {\n      items.push({\n        id: \"archived\",\n        label: tr(\"conversations.tabs.archived\", \"Archived\"),\n      });\n    }\n    return items;\n  }, [archivedEnabled, tr]);\n\n  const handleNewConversation = useCallback(() => {\n    // Open the create-conversation dialog in-place via `?new=true` on the\n    // inbox landing page (parent route). This replaces the legacy\n    // `/conversations/new` full-page navigation — the user stays inside\n    // the inbox and the dialog is mounted there.\n    const inboxRoot = basePath || \"/conversations\";\n    const currentSearch = new URLSearchParams(location.search);\n    currentSearch.set(\"new\", \"true\");\n    navigate(`${inboxRoot}?${currentSearch.toString()}`);\n  }, [basePath, location.search, navigate]);\n\n  const handleBackToList = useCallback(() => {\n    // Clear the open conversation id so the empty state shows and routing\n    // returns to the inbox shell. We keep the current tab via location.search.\n    setActiveConversationId(null);\n    navigate(`${basePath || \"/conversations\"}${location.search}`);\n  }, [basePath, location.search, navigate, setActiveConversationId]);\n\n  return (\n    <div\n      data-tour=\"conversations-inbox\"\n      className=\"flex h-full w-full min-h-0 min-w-0 overflow-hidden bg-bg-canvas\"\n    >\n      {/* Left pane: list. On md+ always visible as a fixed sidebar. Below md,\n          hidden when a conversation is open (full-screen detail mode). */}\n      <aside\n        aria-label={tr(\"conversations.listPaneLabel\", \"Conversations list\")}\n        className={cn(\n          \"flex flex-col min-h-0 border-r border-border-default bg-bg-surface\",\n          \"w-full md:w-[320px] md:flex-shrink-0\",\n          conversationOpen ? \"hidden md:flex\" : \"flex\",\n        )}\n      >\n        {/* Sticky header: title + new CTA. Hosts the MFE's single aurora hero\n            backdrop (decorative, -z-10 — never moves content). */}\n        <div className=\"relative isolate overflow-hidden sticky top-0 z-10 flex flex-col gap-3 border-b border-border-subtle bg-bg-surface px-4 pt-4 pb-3\">\n          <AuroraBackground intensity=\"subtle\" />\n          <div className=\"flex items-center justify-between gap-2\">\n            <h1 className=\"text-base font-semibold text-text-primary\">\n              <GradientText>\n                {tr(\"conversations.title\", \"Conversations\")}\n              </GradientText>\n            </h1>\n            <Button\n              data-tour=\"conversation-new-button\"\n              type=\"button\"\n              size=\"sm\"\n              onClick={handleNewConversation}\n              aria-label={tr(\n                \"conversations.createNewConversation\",\n                \"Create a new conversation\",\n              )}\n            >\n              <MessageSquarePlus size={14} />\n              <span className=\"hidden sm:inline\">\n                {tr(\"conversations.newConversation\", \"New\")}\n              </span>\n            </Button>\n          </div>\n\n          {/* Search */}\n          <div className=\"relative\">\n            <Search\n              size={14}\n              className=\"pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-text-secondary\"\n              aria-hidden=\"true\"\n            />\n            <input\n              data-tour=\"conversation-search\"\n              type=\"search\"\n              value={searchQuery}\n              onChange={(event) => onSearchChange(event.target.value)}\n              placeholder={tr(\n                \"conversations.search\",\n                \"Search conversations...\",\n              )}\n              aria-label={tr(\n                \"conversations.searchAria\",\n                \"Search conversations\",\n              )}\n              className={cn(\n                \"w-full rounded-md border border-border-default bg-bg-elevated\",\n                \"py-1.5 pl-8 pr-8 text-sm text-text-primary\",\n                \"placeholder:text-text-secondary\",\n                \"focus:border-action-primary-border focus:outline-none focus:ring-2 focus:ring-action-primary-border/40\",\n              )}\n            />\n            {searchQuery.length > 0 && (\n              <button\n                type=\"button\"\n                onClick={() => onSearchChange(\"\")}\n                aria-label={tr(\n                  \"conversations.clearSearch\",\n                  \"Clear conversation search\",\n                )}\n                className=\"absolute right-2 top-1/2 -translate-y-1/2 rounded p-0.5 text-text-secondary hover:bg-action-ghost-bg-hover hover:text-text-primary\"\n              >\n                <X size={12} />\n              </button>\n            )}\n          </div>\n\n          {/* Tabs */}\n          <div data-tour=\"conversations-tabs\">\n            <Tabs\n              items={tabs}\n              activeTabId={activeTab}\n              onTabChange={(id: string) => onTabChange(id as InboxTabId)}\n              variant=\"underline\"\n              size=\"sm\"\n            />\n          </div>\n\n          {/* Filter chips */}\n          {filterChips && filterChips.length > 0 && (\n            <div\n              data-tour=\"conversations-filter-chips\"\n              className=\"flex flex-wrap gap-1.5\"\n            >\n              {filterChips.map((chip) => (\n                <button\n                  key={chip.id}\n                  type=\"button\"\n                  onClick={chip.onToggle}\n                  aria-pressed={chip.active}\n                  className={cn(\n                    \"inline-flex items-center gap-1 rounded-full border px-2.5 py-0.5 text-xs font-medium transition-colors\",\n                    chip.active\n                      ? \"border-action-primary-border bg-action-primary-bg/10 text-action-primary-bg\"\n                      : \"border-border-default text-text-secondary hover:bg-action-ghost-bg-hover hover:text-text-primary\",\n                  )}\n                >\n                  {chip.icon}\n                  {chip.label}\n                </button>\n              ))}\n            </div>\n          )}\n        </div>\n\n        {/* Scrollable list */}\n        <div\n          data-tour=\"conversations-list-scroll\"\n          className=\"flex-1 min-h-0 overflow-y-auto overflow-x-hidden\"\n        >\n          {listSlot}\n        </div>\n      </aside>\n\n      {/* Right pane: detail OR empty state */}\n      <section\n        aria-label={tr(\"conversations.detailPaneLabel\", \"Conversation detail\")}\n        className={cn(\n          \"flex flex-col min-h-0 flex-1 min-w-0 bg-bg-surface\",\n          conversationOpen ? \"flex\" : \"hidden md:flex\",\n        )}\n      >\n        {conversationOpen && (\n          // Mobile-only back button. On md+ the list and detail render\n          // side-by-side so the back arrow would be useless.\n          <div className=\"md:hidden border-b border-border-subtle px-3 py-2\">\n            <Button\n              variant=\"ghost\"\n              size=\"sm\"\n              onClick={handleBackToList}\n              aria-label={tr(\n                \"conversations.backToInbox\",\n                \"Back to conversations list\",\n              )}\n            >\n              <ArrowLeft size={14} />\n              {tr(\"conversations.backToInbox\", \"Back to inbox\")}\n            </Button>\n          </div>\n        )}\n        <div className=\"flex-1 min-h-0 min-w-0 overflow-y-auto overflow-x-hidden\">\n          {detailSlot ?? emptyDetailSlot ?? (\n            <InboxEmptyDetail\n              onNew={handleNewConversation}\n              title={tr(\n                \"conversations.detailEmpty.title\",\n                \"Select a conversation\",\n              )}\n              description={tr(\n                \"conversations.detailEmpty.description\",\n                \"Pick a conversation from the list — or start a new one.\",\n              )}\n              newLabel={tr(\n                \"conversations.detailEmpty.newCta\",\n                \"Start a new conversation\",\n              )}\n            />\n          )}\n        </div>\n      </section>\n    </div>\n  );\n}\n\ninterface InboxEmptyDetailProps {\n  title: string;\n  description: string;\n  newLabel: string;\n  onNew: () => void;\n}\n\n/**\n * Default empty-state rendered in the detail pane when no conversation is\n * currently selected. Lifted out so the host page (or tests) can override\n * the copy via `emptyDetailSlot`.\n */\nfunction InboxEmptyDetail({\n  title,\n  description,\n  newLabel,\n  onNew,\n}: InboxEmptyDetailProps) {\n  return (\n    <div className=\"flex h-full items-center justify-center p-8\">\n      <IllustratedEmptyState\n        illustration=\"empty-vibes\"\n        title={title}\n        description={description}\n        action={\n          <Button type=\"button\" onClick={onNew}>\n            <MessageSquarePlus size={14} />\n            {newLabel}\n          </Button>\n        }\n      />\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/conversations/pages/AdminConversationsLandingPage.js

@@ -3,9 +3,9 @@ import { useMemo as t } from "react";
 import { Activity as n, ChevronRight as r, ListChecks as i, MessageCircle as a, Package as o, ShieldCheck as s } from "lucide-react";
 import { Link as c } from "react-router-dom";
 import { jsx as l, jsxs as u } from "react/jsx-runtime";
-import { EmphasisPanel as d, GlassCard as f } from "@burdenoff/fe-libs/ui";
+import { EmphasisPanel as d, GlassCard as f, GradientText as p } from "@burdenoff/fe-libs/ui";
 //#region src/conversations/pages/AdminConversationsLandingPage.tsx
-var p = [
+var m = [
 	{
 		id: "moderation",
 		labelKey: "conversations.admin.moderation",
@@ -16,7 +16,8 @@ var p = [
 		icon: /* @__PURE__ */ l(s, {
 			className: "size-5",
 			"aria-hidden": "true"
-		})
+		}),
+		featured: !0
 	},
 	{
 		id: "bulk",
@@ -55,8 +56,8 @@ var p = [
 		})
 	}
 ];
-function m() {
-	let n = e(), i = t(() => p.map((e) => ({
+function h() {
+	let n = e(), i = t(() => m.map((e) => ({
 		...e,
 		label: n(e.labelKey, e.labelFallback),
 		description: n(e.descriptionKey, e.descriptionFallback)
@@ -79,7 +80,7 @@ function m() {
 						className: "min-w-0",
 						children: [/* @__PURE__ */ l("h1", {
 							className: "text-lg font-semibold text-text-primary",
-							children: n("conversations.admin.landingTitle", "Conversations admin")
+							children: /* @__PURE__ */ l(p, { children: n("conversations.admin.landingTitle", "Conversations admin") })
 						}), /* @__PURE__ */ l("p", {
 							className: "mt-1 text-sm text-text-secondary",
 							children: n("conversations.admin.landingDescription", "Governance tools for workspace conversations. Select a section below to continue.")
@@ -92,6 +93,7 @@ function m() {
 						className: "group rounded-xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]",
 						children: /* @__PURE__ */ u(f, {
 							treatment: "glass",
+							glow: e.featured,
 							className: "flex items-start gap-3 border-border-seam p-4 shadow-[var(--shadow-pop)]",
 							children: [/* @__PURE__ */ l("div", {
 								className: "p-2 rounded-md bg-bg-sunken text-text-secondary group-hover:text-text-primary",
@@ -120,6 +122,6 @@ function m() {
 	});
 }
 //#endregion
-export { m as AdminConversationsLandingPage };
+export { h as AdminConversationsLandingPage };
 
 //# sourceMappingURL=AdminConversationsLandingPage.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"AdminConversationsLandingPage.js","names":[],"sources":["../../../src/conversations/pages/AdminConversationsLandingPage.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { useMemo } from \"react\";\nimport { Link } from \"react-router-dom\";\nimport {\n  MessageCircle,\n  ShieldCheck,\n  ListChecks,\n  Activity,\n  Package,\n  ChevronRight,\n} from \"lucide-react\";\nimport { GlassCard, EmphasisPanel } from \"@burdenoff/fe-libs/ui\";\nimport { useTr } from \"../utils/i18n\";\n\ninterface AdminSectionDefinition {\n  id: string;\n  /** i18n key used for the card label */\n  labelKey: string;\n  /** English fallback rendered when the i18n key is not resolved */\n  labelFallback: string;\n  /** i18n key used for the card description */\n  descriptionKey: string;\n  /** English fallback for the description */\n  descriptionFallback: string;\n  /** Route path relative to the admin basePath */\n  path: string;\n  icon: ReactNode;\n}\n\n// Module-scoped section catalogue. The icon JSX is stable (purely presentational,\n// no context or dynamic props) so constructing once at parse time avoids rebuilding\n// four lucide nodes on every render. If icons ever need to respond to context\n// (theme, RBAC), move the icon field into the useMemo mapper below.\nconst SECTION_DEFINITIONS: AdminSectionDefinition[] = [\n  {\n    id: \"moderation\",\n    labelKey: \"conversations.admin.moderation\",\n    labelFallback: \"Moderation\",\n    descriptionKey: \"conversations.admin.moderationDescription\",\n    descriptionFallback:\n      \"Reported and flagged messages, moderation actions, and reviewer assignments.\",\n    path: \"moderation\",\n    icon: <ShieldCheck className=\"size-5\" aria-hidden=\"true\" />,\n  },\n  {\n    id: \"bulk\",\n    labelKey: \"conversations.admin.bulkOperations\",\n    labelFallback: \"Bulk Operations\",\n    descriptionKey: \"conversations.admin.bulkOperationsDescription\",\n    descriptionFallback:\n      \"Bulk archive / unarchive, participant edits, and cross-conversation actions.\",\n    path: \"bulk\",\n    icon: <ListChecks className=\"size-5\" aria-hidden=\"true\" />,\n  },\n  {\n    id: \"audit\",\n    labelKey: \"conversations.admin.auditLog\",\n    labelFallback: \"Audit Log\",\n    descriptionKey: \"conversations.admin.auditLogDescription\",\n    descriptionFallback:\n      \"Activity stream for admin / moderator actions on workspace conversations.\",\n    path: \"audit\",\n    icon: <Activity className=\"size-5\" aria-hidden=\"true\" />,\n  },\n  {\n    id: \"apps\",\n    labelKey: \"conversations.admin.appInstallations\",\n    labelFallback: \"App Installations\",\n    descriptionKey: \"conversations.admin.appInstallationsDescription\",\n    descriptionFallback:\n      \"Install, configure, and remove conversation apps and integrations.\",\n    path: \"apps\",\n    icon: <Package className=\"size-5\" aria-hidden=\"true\" />,\n  },\n];\n\n/**\n * Admin-facing landing page for the Conversations microfrontend.\n *\n * Lightweight overview + section directory. Each card links to its canonical\n * sub-route (`/moderation`, `/bulk`, `/audit`, `/apps`) for the API-backed\n * admin surfaces.\n */\nexport function AdminConversationsLandingPage() {\n  const tr = useTr();\n\n  const sections = useMemo(\n    () =>\n      SECTION_DEFINITIONS.map((section) => ({\n        ...section,\n        label: tr(section.labelKey, section.labelFallback),\n        description: tr(section.descriptionKey, section.descriptionFallback),\n      })),\n    [tr],\n  );\n\n  return (\n    <div className=\"flex flex-col h-full\">\n      <div className=\"flex-1 min-h-0 overflow-auto p-4 sm:p-6\">\n        <div className=\"mx-auto w-full max-w-3xl space-y-6\">\n          {/* Hero / summary zone — the single emphasis panel on this page. */}\n          <EmphasisPanel>\n            <div className=\"flex items-start gap-3\">\n              <div className=\"p-2 rounded-lg bg-gloss-card text-text-secondary border border-border-seam\">\n                <MessageCircle className=\"size-5\" aria-hidden=\"true\" />\n              </div>\n              <div className=\"min-w-0\">\n                <h1 className=\"text-lg font-semibold text-text-primary\">\n                  {tr(\n                    \"conversations.admin.landingTitle\",\n                    \"Conversations admin\",\n                  )}\n                </h1>\n                <p className=\"mt-1 text-sm text-text-secondary\">\n                  {tr(\n                    \"conversations.admin.landingDescription\",\n                    \"Governance tools for workspace conversations. Select a section below to continue.\",\n                  )}\n                </p>\n              </div>\n            </div>\n          </EmphasisPanel>\n\n          <div className=\"grid gap-3 sm:grid-cols-2\">\n            {sections.map((section) => (\n              <Link\n                key={section.id}\n                to={section.path}\n                className=\"group rounded-xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]\"\n              >\n                <GlassCard\n                  treatment=\"glass\"\n                  className=\"flex items-start gap-3 border-border-seam p-4 shadow-[var(--shadow-pop)]\"\n                >\n                  <div className=\"p-2 rounded-md bg-bg-sunken text-text-secondary group-hover:text-text-primary\">\n                    {section.icon}\n                  </div>\n                  <div className=\"flex-1 min-w-0\">\n                    <div className=\"flex items-center justify-between gap-2\">\n                      <span className=\"text-sm font-medium text-text-primary\">\n                        {section.label}\n                      </span>\n                      <ChevronRight\n                        className=\"size-4 text-text-secondary\"\n                        aria-hidden=\"true\"\n                      />\n                    </div>\n                    <p className=\"mt-1 text-xs text-text-secondary\">\n                      {section.description}\n                    </p>\n                  </div>\n                </GlassCard>\n              </Link>\n            ))}\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;AAiCA,IAAM,IAAgD;CACpD;EACE,IAAI;EACJ,UAAU;EACV,eAAe;EACf,gBAAgB;EAChB,qBACE;EACF,MAAM;EACN,MAAM,kBAAC,GAAD;GAAa,WAAU;GAAS,eAAY;GAAS,CAAA;EAC5D;CACD;EACE,IAAI;EACJ,UAAU;EACV,eAAe;EACf,gBAAgB;EAChB,qBACE;EACF,MAAM;EACN,MAAM,kBAAC,GAAD;GAAY,WAAU;GAAS,eAAY;GAAS,CAAA;EAC3D;CACD;EACE,IAAI;EACJ,UAAU;EACV,eAAe;EACf,gBAAgB;EAChB,qBACE;EACF,MAAM;EACN,MAAM,kBAAC,GAAD;GAAU,WAAU;GAAS,eAAY;GAAS,CAAA;EACzD;CACD;EACE,IAAI;EACJ,UAAU;EACV,eAAe;EACf,gBAAgB;EAChB,qBACE;EACF,MAAM;EACN,MAAM,kBAAC,GAAD;GAAS,WAAU;GAAS,eAAY;GAAS,CAAA;EACxD;CACF;AASD,SAAgB,IAAgC;CAC9C,IAAM,IAAK,GAAO,EAEZ,IAAW,QAEb,EAAoB,KAAK,OAAa;EACpC,GAAG;EACH,OAAO,EAAG,EAAQ,UAAU,EAAQ,cAAc;EAClD,aAAa,EAAG,EAAQ,gBAAgB,EAAQ,oBAAoB;EACrE,EAAE,EACL,CAAC,EAAG,CACL;AAED,QACE,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,OAAD;GAAK,WAAU;aACb,kBAAC,OAAD;IAAK,WAAU;cAAf,CAEE,kBAAC,GAAD,EAAA,UACE,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,OAAD;MAAK,WAAU;gBACb,kBAAC,GAAD;OAAe,WAAU;OAAS,eAAY;OAAS,CAAA;MACnD,CAAA,EACN,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,MAAD;OAAI,WAAU;iBACX,EACC,oCACA,sBACD;OACE,CAAA,EACL,kBAAC,KAAD;OAAG,WAAU;iBACV,EACC,0CACA,oFACD;OACC,CAAA,CACA;QACF;QACQ,CAAA,EAEhB,kBAAC,OAAD;KAAK,WAAU;eACZ,EAAS,KAAK,MACb,kBAAC,GAAD;MAEE,IAAI,EAAQ;MACZ,WAAU;gBAEV,kBAAC,GAAD;OACE,WAAU;OACV,WAAU;iBAFZ,CAIE,kBAAC,OAAD;QAAK,WAAU;kBACZ,EAAQ;QACL,CAAA,EACN,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,OAAD;SAAK,WAAU;mBAAf,CACE,kBAAC,QAAD;UAAM,WAAU;oBACb,EAAQ;UACJ,CAAA,EACP,kBAAC,GAAD;UACE,WAAU;UACV,eAAY;UACZ,CAAA,CACE;YACN,kBAAC,KAAD;SAAG,WAAU;mBACV,EAAQ;SACP,CAAA,CACA;UACI;;MACP,EA1BA,EAAQ,GA0BR,CACP;KACE,CAAA,CACF;;GACF,CAAA;EACF,CAAA"}
+{"version":3,"file":"AdminConversationsLandingPage.js","names":[],"sources":["../../../src/conversations/pages/AdminConversationsLandingPage.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { useMemo } from \"react\";\nimport { Link } from \"react-router-dom\";\nimport {\n  MessageCircle,\n  ShieldCheck,\n  ListChecks,\n  Activity,\n  Package,\n  ChevronRight,\n} from \"lucide-react\";\nimport { GlassCard, EmphasisPanel, GradientText } from \"@burdenoff/fe-libs/ui\";\nimport { useTr } from \"../utils/i18n\";\n\ninterface AdminSectionDefinition {\n  id: string;\n  /** i18n key used for the card label */\n  labelKey: string;\n  /** English fallback rendered when the i18n key is not resolved */\n  labelFallback: string;\n  /** i18n key used for the card description */\n  descriptionKey: string;\n  /** English fallback for the description */\n  descriptionFallback: string;\n  /** Route path relative to the admin basePath */\n  path: string;\n  icon: ReactNode;\n  /** The single featured section — gets the glowing glass treatment. */\n  featured?: boolean;\n}\n\n// Module-scoped section catalogue. The icon JSX is stable (purely presentational,\n// no context or dynamic props) so constructing once at parse time avoids rebuilding\n// four lucide nodes on every render. If icons ever need to respond to context\n// (theme, RBAC), move the icon field into the useMemo mapper below.\nconst SECTION_DEFINITIONS: AdminSectionDefinition[] = [\n  {\n    id: \"moderation\",\n    labelKey: \"conversations.admin.moderation\",\n    labelFallback: \"Moderation\",\n    descriptionKey: \"conversations.admin.moderationDescription\",\n    descriptionFallback:\n      \"Reported and flagged messages, moderation actions, and reviewer assignments.\",\n    path: \"moderation\",\n    icon: <ShieldCheck className=\"size-5\" aria-hidden=\"true\" />,\n    featured: true,\n  },\n  {\n    id: \"bulk\",\n    labelKey: \"conversations.admin.bulkOperations\",\n    labelFallback: \"Bulk Operations\",\n    descriptionKey: \"conversations.admin.bulkOperationsDescription\",\n    descriptionFallback:\n      \"Bulk archive / unarchive, participant edits, and cross-conversation actions.\",\n    path: \"bulk\",\n    icon: <ListChecks className=\"size-5\" aria-hidden=\"true\" />,\n  },\n  {\n    id: \"audit\",\n    labelKey: \"conversations.admin.auditLog\",\n    labelFallback: \"Audit Log\",\n    descriptionKey: \"conversations.admin.auditLogDescription\",\n    descriptionFallback:\n      \"Activity stream for admin / moderator actions on workspace conversations.\",\n    path: \"audit\",\n    icon: <Activity className=\"size-5\" aria-hidden=\"true\" />,\n  },\n  {\n    id: \"apps\",\n    labelKey: \"conversations.admin.appInstallations\",\n    labelFallback: \"App Installations\",\n    descriptionKey: \"conversations.admin.appInstallationsDescription\",\n    descriptionFallback:\n      \"Install, configure, and remove conversation apps and integrations.\",\n    path: \"apps\",\n    icon: <Package className=\"size-5\" aria-hidden=\"true\" />,\n  },\n];\n\n/**\n * Admin-facing landing page for the Conversations microfrontend.\n *\n * Lightweight overview + section directory. Each card links to its canonical\n * sub-route (`/moderation`, `/bulk`, `/audit`, `/apps`) for the API-backed\n * admin surfaces.\n */\nexport function AdminConversationsLandingPage() {\n  const tr = useTr();\n\n  const sections = useMemo(\n    () =>\n      SECTION_DEFINITIONS.map((section) => ({\n        ...section,\n        label: tr(section.labelKey, section.labelFallback),\n        description: tr(section.descriptionKey, section.descriptionFallback),\n      })),\n    [tr],\n  );\n\n  return (\n    <div className=\"flex flex-col h-full\">\n      <div className=\"flex-1 min-h-0 overflow-auto p-4 sm:p-6\">\n        <div className=\"mx-auto w-full max-w-3xl space-y-6\">\n          {/* Hero / summary zone — the single emphasis panel on this page. */}\n          <EmphasisPanel>\n            <div className=\"flex items-start gap-3\">\n              <div className=\"p-2 rounded-lg bg-gloss-card text-text-secondary border border-border-seam\">\n                <MessageCircle className=\"size-5\" aria-hidden=\"true\" />\n              </div>\n              <div className=\"min-w-0\">\n                <h1 className=\"text-lg font-semibold text-text-primary\">\n                  <GradientText>\n                    {tr(\n                      \"conversations.admin.landingTitle\",\n                      \"Conversations admin\",\n                    )}\n                  </GradientText>\n                </h1>\n                <p className=\"mt-1 text-sm text-text-secondary\">\n                  {tr(\n                    \"conversations.admin.landingDescription\",\n                    \"Governance tools for workspace conversations. Select a section below to continue.\",\n                  )}\n                </p>\n              </div>\n            </div>\n          </EmphasisPanel>\n\n          <div className=\"grid gap-3 sm:grid-cols-2\">\n            {sections.map((section) => (\n              <Link\n                key={section.id}\n                to={section.path}\n                className=\"group rounded-xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]\"\n              >\n                <GlassCard\n                  treatment=\"glass\"\n                  glow={section.featured}\n                  className=\"flex items-start gap-3 border-border-seam p-4 shadow-[var(--shadow-pop)]\"\n                >\n                  <div className=\"p-2 rounded-md bg-bg-sunken text-text-secondary group-hover:text-text-primary\">\n                    {section.icon}\n                  </div>\n                  <div className=\"flex-1 min-w-0\">\n                    <div className=\"flex items-center justify-between gap-2\">\n                      <span className=\"text-sm font-medium text-text-primary\">\n                        {section.label}\n                      </span>\n                      <ChevronRight\n                        className=\"size-4 text-text-secondary\"\n                        aria-hidden=\"true\"\n                      />\n                    </div>\n                    <p className=\"mt-1 text-xs text-text-secondary\">\n                      {section.description}\n                    </p>\n                  </div>\n                </GlassCard>\n              </Link>\n            ))}\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;AAmCA,IAAM,IAAgD;CACpD;EACE,IAAI;EACJ,UAAU;EACV,eAAe;EACf,gBAAgB;EAChB,qBACE;EACF,MAAM;EACN,MAAM,kBAAC,GAAD;GAAa,WAAU;GAAS,eAAY;GAAS,CAAA;EAC3D,UAAU;EACX;CACD;EACE,IAAI;EACJ,UAAU;EACV,eAAe;EACf,gBAAgB;EAChB,qBACE;EACF,MAAM;EACN,MAAM,kBAAC,GAAD;GAAY,WAAU;GAAS,eAAY;GAAS,CAAA;EAC3D;CACD;EACE,IAAI;EACJ,UAAU;EACV,eAAe;EACf,gBAAgB;EAChB,qBACE;EACF,MAAM;EACN,MAAM,kBAAC,GAAD;GAAU,WAAU;GAAS,eAAY;GAAS,CAAA;EACzD;CACD;EACE,IAAI;EACJ,UAAU;EACV,eAAe;EACf,gBAAgB;EAChB,qBACE;EACF,MAAM;EACN,MAAM,kBAAC,GAAD;GAAS,WAAU;GAAS,eAAY;GAAS,CAAA;EACxD;CACF;AASD,SAAgB,IAAgC;CAC9C,IAAM,IAAK,GAAO,EAEZ,IAAW,QAEb,EAAoB,KAAK,OAAa;EACpC,GAAG;EACH,OAAO,EAAG,EAAQ,UAAU,EAAQ,cAAc;EAClD,aAAa,EAAG,EAAQ,gBAAgB,EAAQ,oBAAoB;EACrE,EAAE,EACL,CAAC,EAAG,CACL;AAED,QACE,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,OAAD;GAAK,WAAU;aACb,kBAAC,OAAD;IAAK,WAAU;cAAf,CAEE,kBAAC,GAAD,EAAA,UACE,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,OAAD;MAAK,WAAU;gBACb,kBAAC,GAAD;OAAe,WAAU;OAAS,eAAY;OAAS,CAAA;MACnD,CAAA,EACN,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,MAAD;OAAI,WAAU;iBACZ,kBAAC,GAAD,EAAA,UACG,EACC,oCACA,sBACD,EACY,CAAA;OACZ,CAAA,EACL,kBAAC,KAAD;OAAG,WAAU;iBACV,EACC,0CACA,oFACD;OACC,CAAA,CACA;QACF;QACQ,CAAA,EAEhB,kBAAC,OAAD;KAAK,WAAU;eACZ,EAAS,KAAK,MACb,kBAAC,GAAD;MAEE,IAAI,EAAQ;MACZ,WAAU;gBAEV,kBAAC,GAAD;OACE,WAAU;OACV,MAAM,EAAQ;OACd,WAAU;iBAHZ,CAKE,kBAAC,OAAD;QAAK,WAAU;kBACZ,EAAQ;QACL,CAAA,EACN,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,OAAD;SAAK,WAAU;mBAAf,CACE,kBAAC,QAAD;UAAM,WAAU;oBACb,EAAQ;UACJ,CAAA,EACP,kBAAC,GAAD;UACE,WAAU;UACV,eAAY;UACZ,CAAA,CACE;YACN,kBAAC,KAAD;SAAG,WAAU;mBACV,EAAQ;SACP,CAAA,CACA;UACI;;MACP,EA3BA,EAAQ,GA2BR,CACP;KACE,CAAA,CACF;;GACF,CAAA;EACF,CAAA"}

package/dist/conversations/pages/ConversationAdminPages.js

@@ -186,7 +186,8 @@ function I() {
 				icon: /* @__PURE__ */ _(f, {
 					className: "size-6",
 					"aria-hidden": "true"
-				})
+				}),
+				illustration: "empty-generic"
 			}),
 			a && s && /* @__PURE__ */ _("p", {
 				className: "text-sm text-text-secondary",
@@ -202,7 +203,8 @@ function I() {
 				icon: /* @__PURE__ */ _(u, {
 					className: "size-6",
 					"aria-hidden": "true"
-				})
+				}),
+				illustration: "empty-notifications"
 			}),
 			/* @__PURE__ */ _("div", {
 				className: "grid gap-3",
@@ -332,7 +334,8 @@ function L() {
 				icon: /* @__PURE__ */ _(l, {
 					className: "size-6",
 					"aria-hidden": "true"
-				})
+				}),
+				illustration: "empty-generic"
 			}),
 			a && p && /* @__PURE__ */ _("p", {
 				className: "text-sm text-text-secondary",
@@ -418,7 +421,8 @@ function R() {
 			}),
 			!s && !l && u.length === 0 && /* @__PURE__ */ _(r, {
 				title: "No activity found",
-				description: "Conversation admin actions will appear here."
+				description: "Conversation admin actions will appear here.",
+				illustration: "empty-data"
 			}),
 			/* @__PURE__ */ _("div", {
 				className: "grid gap-3",

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

@@ -1 +1 @@
-{"version":3,"file":"ConversationAdminPages.js","names":[],"sources":["../../../src/conversations/pages/ConversationAdminPages.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\nimport { gql } from \"@apollo/client\";\nimport { useMutation, useQuery } from \"@apollo/client/react\";\nimport {\n  Activity,\n  Archive,\n  CheckCircle2,\n  Package,\n  ShieldCheck,\n  Trash2,\n} from \"lucide-react\";\n\nimport {\n  Button,\n  CTAOverflowMenu,\n  GlassCard,\n  ShowMore,\n} from \"@burdenoff/fe-libs/ui\";\nimport { EmptyState, PageLayout, PageSection } from \"../components/PageLayout\";\nimport { useConversations } from \"../providers/ConversationsProvider\";\nimport { useTr } from \"../utils/i18n\";\n\nconst GET_MESSAGE_REPORTS = gql`\n  query ConversationAdminMessageReports(\n    $first: Int\n    $filter: MessageReportFilter\n  ) {\n    messageReports(first: $first, filter: $filter) {\n      edges {\n        node {\n          id\n          messageId\n          reportedBy\n          reason\n          status\n          notes\n          createdAt\n          reviewedAt\n          message {\n            id\n            conversationId\n            authorId\n            content\n            isHidden\n            createdAt\n          }\n        }\n      }\n    }\n  }\n`;\n\nconst RESOLVE_MESSAGE_REPORT = gql`\n  mutation ConversationAdminResolveMessageReport(\n    $input: ResolveMessageReportInput!\n  ) {\n    resolveMessageReport(input: $input) {\n      id\n      status\n      reviewedAt\n      notes\n      message {\n        id\n        isHidden\n      }\n    }\n  }\n`;\n\nconst GET_BULK_CONVERSATIONS = gql`\n  query ConversationAdminBulkConversations(\n    $first: Int\n    $filter: ConversationFilter\n  ) {\n    conversations(first: $first, filter: $filter) {\n      edges {\n        node {\n          id\n          title\n          type\n          state\n          updatedAt\n        }\n      }\n    }\n  }\n`;\n\nconst BULK_UPDATE_CONVERSATIONS = gql`\n  mutation ConversationAdminBulkUpdate(\n    $input: BulkConversationOperationInput!\n  ) {\n    bulkUpdateConversations(input: $input) {\n      success\n      processedCount\n      successCount\n      failureCount\n      conversationIds\n      errors {\n        conversationId\n        message\n      }\n    }\n  }\n`;\n\nconst GET_CONVERSATION_AUDIT_LOG = gql`\n  query ConversationAdminAuditLog($filter: ActivityLogFilter) {\n    getActivities(filter: $filter) {\n      id\n      action\n      description\n      resourceId\n      resourceType\n      userId\n      timestamp\n    }\n  }\n`;\n\nconst GET_APP_INSTALLATIONS = gql`\n  query ConversationAdminAppInstallations($workspaceId: ID) {\n    appInstallations(workspaceId: $workspaceId) {\n      id\n      appId\n      appVersion\n      state\n      settings\n      permissions\n      installedBy\n      installedAt\n      updatedAt\n    }\n  }\n`;\n\nconst INSTALL_APP = gql`\n  mutation ConversationAdminInstallApp($input: InstallAppInput!) {\n    installApp(input: $input) {\n      id\n      appId\n      state\n      settings\n      installedAt\n    }\n  }\n`;\n\nconst UPDATE_APP_SETTINGS = gql`\n  mutation ConversationAdminUpdateAppSettings($id: ID!, $settings: JSON!) {\n    updateAppSettings(id: $id, settings: $settings) {\n      id\n      settings\n      updatedAt\n    }\n  }\n`;\n\nconst UNINSTALL_APP = gql`\n  mutation ConversationAdminUninstallApp($id: ID!) {\n    uninstallApp(id: $id) {\n      appInstallationId\n      success\n    }\n  }\n`;\n\ninterface MessageReportNode {\n  id: string;\n  messageId: string;\n  reportedBy: string;\n  reason: string;\n  status: string;\n  notes?: string | null;\n  createdAt: string;\n  reviewedAt?: string | null;\n  message: {\n    id: string;\n    conversationId: string;\n    authorId: string;\n    content: unknown;\n    isHidden: boolean;\n    createdAt: string;\n  };\n}\n\ninterface ConversationNode {\n  id: string;\n  title?: string | null;\n  type: string;\n  state: string;\n  updatedAt: string;\n}\n\ninterface ActivityLogNode {\n  id: string;\n  action: string;\n  description?: string | null;\n  resourceId?: string | null;\n  resourceType?: string | null;\n  userId: string;\n  timestamp: string;\n}\n\ninterface AppInstallationNode {\n  id: string;\n  appId: string;\n  appVersion: string;\n  state: string;\n  settings: unknown;\n  permissions: string[];\n  installedBy: string;\n  installedAt: string;\n  updatedAt: string;\n}\n\ninterface BulkUpdateConversationsResult {\n  bulkUpdateConversations: {\n    success: boolean;\n    processedCount: number;\n    successCount: number;\n    failureCount: number;\n    conversationIds: string[];\n    errors: Array<{ conversationId: string; message: string }>;\n  };\n}\n\nfunction formatContent(content: unknown): string {\n  if (typeof content === \"string\") return content;\n  if (content && typeof content === \"object\" && \"text\" in content) {\n    const text = (content as { text?: unknown }).text;\n    if (typeof text === \"string\") return text;\n  }\n  try {\n    return JSON.stringify(content);\n  } catch {\n    return \"Message content unavailable\";\n  }\n}\n\nconst DATE_FORMATTER = new Intl.DateTimeFormat(undefined, {\n  dateStyle: \"medium\",\n  timeStyle: \"short\",\n});\n\nfunction formatDate(value: string): string {\n  return DATE_FORMATTER.format(new Date(value));\n}\n\nfunction StatusPill({ children }: { children: string }) {\n  return (\n    <span className=\"rounded-full border border-border-subtle bg-bg-sunken px-2 py-0.5 text-xs font-medium text-text-secondary\">\n      {children}\n    </span>\n  );\n}\n\nexport function ModerationQueuePage() {\n  const tr = useTr();\n  const { workspaceId } = useConversations();\n  const { data, loading, error, refetch } = useQuery<{\n    messageReports: { edges: Array<{ node: MessageReportNode }> };\n  }>(GET_MESSAGE_REPORTS, {\n    variables: { first: 50, filter: { statuses: [\"PENDING\", \"REVIEWING\"] } },\n    skip: !workspaceId,\n  });\n  const [resolveReport, { loading: resolving }] = useMutation(\n    RESOLVE_MESSAGE_REPORT,\n    {\n      onCompleted: () => void refetch(),\n    },\n  );\n\n  const reports = data?.messageReports.edges.map((edge) => edge.node) ?? [];\n\n  return (\n    <PageLayout\n      title={tr(\"conversations.admin.moderationPageTitle\", \"Moderation queue\")}\n      subtitle={tr(\n        \"conversations.admin.moderationPageDescription\",\n        \"Review reported messages and apply moderator decisions.\",\n      )}\n      icon={<ShieldCheck className=\"size-5\" aria-hidden=\"true\" />}\n      maxWidth=\"2xl\"\n    >\n      {!workspaceId && (\n        <EmptyState\n          title={tr(\n            \"conversations.admin.selectWorkspace\",\n            \"Select a workspace\",\n          )}\n          description={tr(\n            \"conversations.admin.selectWorkspaceModerationDescription\",\n            \"Choose a workspace to review reported conversation messages.\",\n          )}\n          icon={<ShieldCheck className=\"size-6\" aria-hidden=\"true\" />}\n        />\n      )}\n      {workspaceId && loading && (\n        <p className=\"text-sm text-text-secondary\">Loading reports…</p>\n      )}\n      {workspaceId && error && (\n        <p className=\"text-sm text-status-error-text\">{error.message}</p>\n      )}\n      {workspaceId && !loading && !error && reports.length === 0 && (\n        <EmptyState\n          title=\"No reports waiting for review\"\n          description=\"Reported messages will appear here as they are submitted.\"\n          icon={<CheckCircle2 className=\"size-6\" aria-hidden=\"true\" />}\n        />\n      )}\n      <div className=\"grid gap-3\">\n        {reports.map((report) => (\n          <GlassCard\n            key={report.id}\n            treatment=\"glass\"\n            className=\"border-border-seam p-4\"\n          >\n            <div className=\"flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between\">\n              <div className=\"space-y-2 min-w-0\">\n                <div className=\"flex flex-wrap items-center gap-2\">\n                  <StatusPill>{report.status}</StatusPill>\n                  {report.message.isHidden && <StatusPill>Hidden</StatusPill>}\n                  <span className=\"text-xs text-text-secondary\">\n                    Reported {formatDate(report.createdAt)}\n                  </span>\n                </div>\n                <p className=\"text-sm font-medium text-text-primary\">\n                  {report.reason}\n                </p>\n                <p className=\"rounded-md border border-border-seam bg-bg-sunken p-3 text-sm text-text-secondary\">\n                  {formatContent(report.message.content)}\n                </p>\n                <p className=\"text-xs text-text-secondary\">\n                  Message {report.messageId} in conversation{\" \"}\n                  {report.message.conversationId} by {report.message.authorId};\n                  reported by {report.reportedBy}\n                </p>\n              </div>\n              {/* One primary CTA (hide + resolve), the secondary \"Dismiss\"\n                  collapses into the overflow menu. */}\n              <CTAOverflowMenu\n                className=\"shrink-0\"\n                primary={{\n                  label: \"Hide and resolve\",\n                  disabled: resolving,\n                  onSelect: () =>\n                    void resolveReport({\n                      variables: {\n                        input: { reportId: report.id, action: \"HIDE_MESSAGE\" },\n                      },\n                    }),\n                }}\n                actions={[\n                  {\n                    label: \"Dismiss\",\n                    disabled: resolving,\n                    onSelect: () =>\n                      void resolveReport({\n                        variables: {\n                          input: { reportId: report.id, action: \"DISMISS\" },\n                        },\n                      }),\n                  },\n                ]}\n              />\n            </div>\n          </GlassCard>\n        ))}\n      </div>\n    </PageLayout>\n  );\n}\n\nexport function BulkOperationsPage() {\n  const tr = useTr();\n  const { workspaceId } = useConversations();\n  const [selectedIds, setSelectedIds] = useState<Set<string>>(() => new Set());\n  const [action, setAction] = useState<\"ARCHIVE\" | \"UNARCHIVE\" | \"DELETE\">(\n    \"ARCHIVE\",\n  );\n  const { data, loading, error, refetch } = useQuery<{\n    conversations: { edges: Array<{ node: ConversationNode }> };\n  }>(GET_BULK_CONVERSATIONS, {\n    variables: { first: 100 },\n    skip: !workspaceId,\n  });\n  const [bulkUpdate, { data: bulkResult, loading: updating }] = useMutation<\n    BulkUpdateConversationsResult,\n    { input: { conversationIds: string[]; action: typeof action } }\n  >(BULK_UPDATE_CONVERSATIONS, {\n    onCompleted: () => {\n      setSelectedIds(new Set());\n      void refetch();\n    },\n  });\n  const conversations =\n    data?.conversations.edges.map((edge) => edge.node) ?? [];\n\n  const toggle = (id: string) => {\n    setSelectedIds((current) => {\n      const next = new Set(current);\n      if (next.has(id)) next.delete(id);\n      else next.add(id);\n      return next;\n    });\n  };\n\n  return (\n    <PageLayout\n      title={tr(\n        \"conversations.admin.bulkOperationsPageTitle\",\n        \"Bulk operations\",\n      )}\n      subtitle={tr(\n        \"conversations.admin.bulkOperationsPageDescription\",\n        \"Select workspace conversations and apply archive, unarchive, or delete operations.\",\n      )}\n      icon={<Archive className=\"size-5\" aria-hidden=\"true\" />}\n      maxWidth=\"2xl\"\n      headerActions={\n        <div className=\"flex flex-wrap items-center gap-2\">\n          <select\n            value={action}\n            onChange={(event) => setAction(event.target.value as typeof action)}\n            aria-label=\"Bulk action\"\n            className=\"min-h-11 rounded-md border border-border-seam bg-bg-surface px-3 py-2 text-sm text-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]\"\n          >\n            <option value=\"ARCHIVE\">Archive</option>\n            <option value=\"UNARCHIVE\">Unarchive</option>\n            <option value=\"DELETE\">Delete</option>\n          </select>\n          <Button\n            type=\"button\"\n            size=\"sm\"\n            disabled={selectedIds.size === 0 || updating}\n            onClick={() =>\n              void bulkUpdate({\n                variables: {\n                  input: { conversationIds: Array.from(selectedIds), action },\n                },\n              })\n            }\n          >\n            Apply to {selectedIds.size}\n          </Button>\n        </div>\n      }\n    >\n      {!workspaceId && (\n        <EmptyState\n          title={tr(\n            \"conversations.admin.selectWorkspace\",\n            \"Select a workspace\",\n          )}\n          description={tr(\n            \"conversations.admin.selectWorkspaceBulkDescription\",\n            \"Choose a workspace to manage conversations in bulk.\",\n          )}\n          icon={<Archive className=\"size-6\" aria-hidden=\"true\" />}\n        />\n      )}\n      {workspaceId && loading && (\n        <p className=\"text-sm text-text-secondary\">Loading conversations…</p>\n      )}\n      {workspaceId && error && (\n        <p className=\"text-sm text-status-error-text\">{error.message}</p>\n      )}\n      {bulkResult?.bulkUpdateConversations && (\n        <GlassCard\n          treatment=\"metric\"\n          className=\"grid grid-cols-2 gap-4 border-border-seam p-4 sm:max-w-md\"\n        >\n          <div>\n            <p className=\"text-2xl font-semibold tabular-nums text-status-success-text\">\n              {bulkResult.bulkUpdateConversations.successCount}\n            </p>\n            <p className=\"text-xs text-text-secondary\">Succeeded</p>\n          </div>\n          <div>\n            <p className=\"text-2xl font-semibold tabular-nums text-text-primary\">\n              {bulkResult.bulkUpdateConversations.failureCount}\n            </p>\n            <p className=\"text-xs text-text-secondary\">Failed</p>\n          </div>\n        </GlassCard>\n      )}\n      {workspaceId && (\n        <div className=\"overflow-hidden rounded-lg border border-border-seam bg-bg-surface\">\n          {conversations.map((conversation) => (\n            <label\n              key={conversation.id}\n              className=\"flex min-h-11 cursor-pointer items-center gap-3 border-b border-border-seam px-4 py-3 last:border-b-0 hover:bg-accent\"\n            >\n              <input\n                type=\"checkbox\"\n                aria-label={`Select ${conversation.title || \"untitled conversation\"}`}\n                checked={selectedIds.has(conversation.id)}\n                onChange={() => toggle(conversation.id)}\n              />\n              <div className=\"min-w-0 flex-1\">\n                <p className=\"truncate text-sm font-medium text-text-primary\">\n                  {conversation.title || \"Untitled conversation\"}\n                </p>\n                <p className=\"text-xs text-text-secondary\">\n                  {conversation.type} · {conversation.state} · Updated{\" \"}\n                  {formatDate(conversation.updatedAt)}\n                </p>\n              </div>\n            </label>\n          ))}\n        </div>\n      )}\n    </PageLayout>\n  );\n}\n\nexport function ConversationAuditLogPage() {\n  const tr = useTr();\n  const { workspaceId } = useConversations();\n  const { data, loading, error } = useQuery<{\n    getActivities: ActivityLogNode[];\n  }>(GET_CONVERSATION_AUDIT_LOG, {\n    variables: {\n      filter: { workspaceId, resourceType: \"conversation\", limit: 50 },\n    },\n    skip: !workspaceId,\n  });\n  const logs = data?.getActivities ?? [];\n\n  return (\n    <PageLayout\n      title={tr(\"conversations.admin.auditLogPageTitle\", \"Audit log\")}\n      subtitle={tr(\n        \"conversations.admin.auditLogPageDescription\",\n        \"Activity stream for admin and moderator actions on workspace conversations.\",\n      )}\n      icon={<Activity className=\"size-5\" aria-hidden=\"true\" />}\n      maxWidth=\"2xl\"\n    >\n      {loading && (\n        <p className=\"text-sm text-text-secondary\">Loading activity…</p>\n      )}\n      {error && <p className=\"text-sm text-status-error-text\">{error.message}</p>}\n      {!loading && !error && logs.length === 0 && (\n        <EmptyState\n          title=\"No activity found\"\n          description=\"Conversation admin actions will appear here.\"\n        />\n      )}\n      <div className=\"grid gap-3\">\n        {logs.map((log) => (\n          <GlassCard\n            key={log.id}\n            treatment=\"plain\"\n            className=\"border-border-seam p-4\"\n          >\n            <div className=\"flex flex-wrap items-center justify-between gap-2\">\n              <p className=\"text-sm font-medium text-text-primary\">\n                {log.action}\n              </p>\n              <span className=\"text-xs tabular-nums text-text-secondary\">\n                {formatDate(log.timestamp)}\n              </span>\n            </div>\n            <p className=\"mt-1 text-sm text-text-secondary\">\n              {log.description || \"No description provided\"}\n            </p>\n            <p className=\"mt-2 text-xs text-text-secondary\">\n              User {log.userId} · Resource {log.resourceId ?? \"workspace\"}\n            </p>\n          </GlassCard>\n        ))}\n      </div>\n    </PageLayout>\n  );\n}\n\nexport function AppInstallationsPage() {\n  const tr = useTr();\n  const { workspaceId } = useConversations();\n  const [appId, setAppId] = useState(\"\");\n  const [settingsInput, setSettingsInput] = useState(\"{}\");\n  const [settingsDrafts, setSettingsDrafts] = useState<Record<string, string>>(\n    {},\n  );\n  const [formError, setFormError] = useState<string | null>(null);\n  const { data, loading, error, refetch } = useQuery<{\n    appInstallations: AppInstallationNode[];\n  }>(GET_APP_INSTALLATIONS, {\n    variables: { workspaceId },\n    skip: !workspaceId,\n  });\n  const [installApp, { loading: installing }] = useMutation(INSTALL_APP, {\n    onCompleted: () => void refetch(),\n  });\n  const [updateSettings, { loading: saving }] = useMutation(\n    UPDATE_APP_SETTINGS,\n    { onCompleted: () => void refetch() },\n  );\n  const [uninstallApp, { loading: uninstalling }] = useMutation(UNINSTALL_APP, {\n    onCompleted: () => void refetch(),\n  });\n  const installations = useMemo(\n    () => data?.appInstallations ?? [],\n    [data?.appInstallations],\n  );\n\n  useEffect(() => {\n    setSettingsDrafts((current) => {\n      if (installations.every((installation) => current[installation.id])) {\n        return current;\n      }\n      const next = { ...current };\n      for (const installation of installations) {\n        if (!next[installation.id]) {\n          next[installation.id] = JSON.stringify(\n            installation.settings ?? {},\n            null,\n            2,\n          );\n        }\n      }\n      return next;\n    });\n  }, [installations]);\n\n  const parsedSettings = (raw: string): Record<string, unknown> | null => {\n    try {\n      const parsed = JSON.parse(raw) as unknown;\n      return parsed && typeof parsed === \"object\" && !Array.isArray(parsed)\n        ? (parsed as Record<string, unknown>)\n        : null;\n    } catch {\n      return null;\n    }\n  };\n\n  const handleInstall = () => {\n    const settings = parsedSettings(settingsInput);\n    if (!appId.trim() || !settings) {\n      setFormError(\"Enter an app ID and a valid JSON settings object.\");\n      return;\n    }\n    setFormError(null);\n    void installApp({\n      variables: { input: { appId: appId.trim(), workspaceId, settings } },\n    });\n  };\n\n  return (\n    <PageLayout\n      title={tr(\n        \"conversations.admin.appInstallationsPageTitle\",\n        \"App installations\",\n      )}\n      subtitle={tr(\n        \"conversations.admin.appInstallationsPageDescription\",\n        \"Install, configure, and remove conversation apps and integrations.\",\n      )}\n      icon={<Package className=\"size-5\" aria-hidden=\"true\" />}\n      maxWidth=\"2xl\"\n    >\n      <PageSection\n        title=\"Install app\"\n        description=\"Install a workspace-scoped conversation app by app ID.\"\n      >\n        <div className=\"grid gap-3 rounded-lg border border-border-seam bg-bg-surface p-4 sm:grid-cols-[minmax(0,1fr)_minmax(0,2fr)_auto]\">\n          <input\n            value={appId}\n            onChange={(event) => setAppId(event.target.value)}\n            placeholder=\"app-id\"\n            aria-label=\"App ID\"\n            className=\"min-h-11 rounded-md border border-border-seam bg-bg-surface px-3 py-2 text-sm text-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]\"\n          />\n          <textarea\n            value={settingsInput}\n            onChange={(event) => setSettingsInput(event.target.value)}\n            rows={3}\n            aria-label=\"App settings JSON\"\n            className=\"rounded-md border border-border-seam bg-bg-surface px-3 py-2 text-sm text-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]\"\n          />\n          <Button\n            type=\"button\"\n            size=\"sm\"\n            disabled={installing}\n            onClick={handleInstall}\n          >\n            Install\n          </Button>\n        </div>\n        {formError && <p className=\"text-sm text-status-error-text\">{formError}</p>}\n      </PageSection>\n      {loading && (\n        <p className=\"text-sm text-text-secondary\">\n          Loading app installations…\n        </p>\n      )}\n      {error && <p className=\"text-sm text-status-error-text\">{error.message}</p>}\n      <div className=\"grid gap-3\">\n        {installations.map((installation) => (\n          <GlassCard\n            key={installation.id}\n            treatment=\"glass\"\n            className=\"border-border-seam p-4\"\n          >\n            <div className=\"flex flex-wrap items-start justify-between gap-3\">\n              <div className=\"min-w-0\">\n                <div className=\"flex items-center gap-2\">\n                  <h3 className=\"text-sm font-semibold text-text-primary\">\n                    {installation.appId}\n                  </h3>\n                  <StatusPill>{installation.state}</StatusPill>\n                </div>\n                <p className=\"text-xs text-text-secondary\">\n                  Version {installation.appVersion} · Installed by{\" \"}\n                  {installation.installedBy} on{\" \"}\n                  {formatDate(installation.installedAt)}\n                </p>\n              </div>\n              {/* Destructive uninstall lives behind the overflow menu and\n                  asks for confirmation before firing the mutation. */}\n              <CTAOverflowMenu\n                className=\"shrink-0\"\n                actions={[\n                  {\n                    label: \"Uninstall\",\n                    intent: \"destructive\",\n                    disabled: uninstalling,\n                    icon: <Trash2 className=\"size-4\" aria-hidden=\"true\" />,\n                    onSelect: () => {\n                      if (\n                        !window.confirm(\n                          `Uninstall ${installation.appId}? This removes the app and its settings from this workspace.`,\n                        )\n                      ) {\n                        return;\n                      }\n                      void uninstallApp({\n                        variables: { id: installation.id },\n                      });\n                    },\n                  },\n                ]}\n              />\n            </div>\n            {/* The raw JSON settings editor is an advanced surface — collapse\n                it behind progressive disclosure so the card stays calm. */}\n            <ShowMore\n              className=\"mt-3\"\n              collapsedHeight={0}\n              label=\"Edit settings (JSON)\"\n            >\n              <div className=\"grid gap-2 pt-2\">\n                <textarea\n                  rows={5}\n                  aria-label={`Settings for ${installation.appId}`}\n                  value={settingsDrafts[installation.id] ?? \"{}\"}\n                  onChange={(event) =>\n                    setSettingsDrafts((current) => ({\n                      ...current,\n                      [installation.id]: event.target.value,\n                    }))\n                  }\n                  className=\"rounded-md border border-border-seam bg-bg-surface px-3 py-2 font-mono text-xs text-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]\"\n                />\n                <Button\n                  type=\"button\"\n                  variant=\"secondary\"\n                  size=\"sm\"\n                  disabled={saving}\n                  className=\"w-fit\"\n                  onClick={() => {\n                    const settings = parsedSettings(\n                      settingsDrafts[installation.id] ?? \"{}\",\n                    );\n                    if (!settings) {\n                      setFormError(\n                        \"Installation settings must be a valid JSON object.\",\n                      );\n                      return;\n                    }\n                    setFormError(null);\n                    void updateSettings({\n                      variables: { id: installation.id, settings },\n                    });\n                  }}\n                >\n                  Save settings\n                </Button>\n              </div>\n            </ShowMore>\n          </GlassCard>\n        ))}\n      </div>\n    </PageLayout>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"ConversationAdminPages.js","names":[],"sources":["../../../src/conversations/pages/ConversationAdminPages.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\nimport { gql } from \"@apollo/client\";\nimport { useMutation, useQuery } from \"@apollo/client/react\";\nimport {\n  Activity,\n  Archive,\n  CheckCircle2,\n  Package,\n  ShieldCheck,\n  Trash2,\n} from \"lucide-react\";\n\nimport {\n  Button,\n  CTAOverflowMenu,\n  GlassCard,\n  ShowMore,\n} from \"@burdenoff/fe-libs/ui\";\nimport { EmptyState, PageLayout, PageSection } from \"../components/PageLayout\";\nimport { useConversations } from \"../providers/ConversationsProvider\";\nimport { useTr } from \"../utils/i18n\";\n\nconst GET_MESSAGE_REPORTS = gql`\n  query ConversationAdminMessageReports(\n    $first: Int\n    $filter: MessageReportFilter\n  ) {\n    messageReports(first: $first, filter: $filter) {\n      edges {\n        node {\n          id\n          messageId\n          reportedBy\n          reason\n          status\n          notes\n          createdAt\n          reviewedAt\n          message {\n            id\n            conversationId\n            authorId\n            content\n            isHidden\n            createdAt\n          }\n        }\n      }\n    }\n  }\n`;\n\nconst RESOLVE_MESSAGE_REPORT = gql`\n  mutation ConversationAdminResolveMessageReport(\n    $input: ResolveMessageReportInput!\n  ) {\n    resolveMessageReport(input: $input) {\n      id\n      status\n      reviewedAt\n      notes\n      message {\n        id\n        isHidden\n      }\n    }\n  }\n`;\n\nconst GET_BULK_CONVERSATIONS = gql`\n  query ConversationAdminBulkConversations(\n    $first: Int\n    $filter: ConversationFilter\n  ) {\n    conversations(first: $first, filter: $filter) {\n      edges {\n        node {\n          id\n          title\n          type\n          state\n          updatedAt\n        }\n      }\n    }\n  }\n`;\n\nconst BULK_UPDATE_CONVERSATIONS = gql`\n  mutation ConversationAdminBulkUpdate(\n    $input: BulkConversationOperationInput!\n  ) {\n    bulkUpdateConversations(input: $input) {\n      success\n      processedCount\n      successCount\n      failureCount\n      conversationIds\n      errors {\n        conversationId\n        message\n      }\n    }\n  }\n`;\n\nconst GET_CONVERSATION_AUDIT_LOG = gql`\n  query ConversationAdminAuditLog($filter: ActivityLogFilter) {\n    getActivities(filter: $filter) {\n      id\n      action\n      description\n      resourceId\n      resourceType\n      userId\n      timestamp\n    }\n  }\n`;\n\nconst GET_APP_INSTALLATIONS = gql`\n  query ConversationAdminAppInstallations($workspaceId: ID) {\n    appInstallations(workspaceId: $workspaceId) {\n      id\n      appId\n      appVersion\n      state\n      settings\n      permissions\n      installedBy\n      installedAt\n      updatedAt\n    }\n  }\n`;\n\nconst INSTALL_APP = gql`\n  mutation ConversationAdminInstallApp($input: InstallAppInput!) {\n    installApp(input: $input) {\n      id\n      appId\n      state\n      settings\n      installedAt\n    }\n  }\n`;\n\nconst UPDATE_APP_SETTINGS = gql`\n  mutation ConversationAdminUpdateAppSettings($id: ID!, $settings: JSON!) {\n    updateAppSettings(id: $id, settings: $settings) {\n      id\n      settings\n      updatedAt\n    }\n  }\n`;\n\nconst UNINSTALL_APP = gql`\n  mutation ConversationAdminUninstallApp($id: ID!) {\n    uninstallApp(id: $id) {\n      appInstallationId\n      success\n    }\n  }\n`;\n\ninterface MessageReportNode {\n  id: string;\n  messageId: string;\n  reportedBy: string;\n  reason: string;\n  status: string;\n  notes?: string | null;\n  createdAt: string;\n  reviewedAt?: string | null;\n  message: {\n    id: string;\n    conversationId: string;\n    authorId: string;\n    content: unknown;\n    isHidden: boolean;\n    createdAt: string;\n  };\n}\n\ninterface ConversationNode {\n  id: string;\n  title?: string | null;\n  type: string;\n  state: string;\n  updatedAt: string;\n}\n\ninterface ActivityLogNode {\n  id: string;\n  action: string;\n  description?: string | null;\n  resourceId?: string | null;\n  resourceType?: string | null;\n  userId: string;\n  timestamp: string;\n}\n\ninterface AppInstallationNode {\n  id: string;\n  appId: string;\n  appVersion: string;\n  state: string;\n  settings: unknown;\n  permissions: string[];\n  installedBy: string;\n  installedAt: string;\n  updatedAt: string;\n}\n\ninterface BulkUpdateConversationsResult {\n  bulkUpdateConversations: {\n    success: boolean;\n    processedCount: number;\n    successCount: number;\n    failureCount: number;\n    conversationIds: string[];\n    errors: Array<{ conversationId: string; message: string }>;\n  };\n}\n\nfunction formatContent(content: unknown): string {\n  if (typeof content === \"string\") return content;\n  if (content && typeof content === \"object\" && \"text\" in content) {\n    const text = (content as { text?: unknown }).text;\n    if (typeof text === \"string\") return text;\n  }\n  try {\n    return JSON.stringify(content);\n  } catch {\n    return \"Message content unavailable\";\n  }\n}\n\nconst DATE_FORMATTER = new Intl.DateTimeFormat(undefined, {\n  dateStyle: \"medium\",\n  timeStyle: \"short\",\n});\n\nfunction formatDate(value: string): string {\n  return DATE_FORMATTER.format(new Date(value));\n}\n\nfunction StatusPill({ children }: { children: string }) {\n  return (\n    <span className=\"rounded-full border border-border-subtle bg-bg-sunken px-2 py-0.5 text-xs font-medium text-text-secondary\">\n      {children}\n    </span>\n  );\n}\n\nexport function ModerationQueuePage() {\n  const tr = useTr();\n  const { workspaceId } = useConversations();\n  const { data, loading, error, refetch } = useQuery<{\n    messageReports: { edges: Array<{ node: MessageReportNode }> };\n  }>(GET_MESSAGE_REPORTS, {\n    variables: { first: 50, filter: { statuses: [\"PENDING\", \"REVIEWING\"] } },\n    skip: !workspaceId,\n  });\n  const [resolveReport, { loading: resolving }] = useMutation(\n    RESOLVE_MESSAGE_REPORT,\n    {\n      onCompleted: () => void refetch(),\n    },\n  );\n\n  const reports = data?.messageReports.edges.map((edge) => edge.node) ?? [];\n\n  return (\n    <PageLayout\n      title={tr(\"conversations.admin.moderationPageTitle\", \"Moderation queue\")}\n      subtitle={tr(\n        \"conversations.admin.moderationPageDescription\",\n        \"Review reported messages and apply moderator decisions.\",\n      )}\n      icon={<ShieldCheck className=\"size-5\" aria-hidden=\"true\" />}\n      maxWidth=\"2xl\"\n    >\n      {!workspaceId && (\n        <EmptyState\n          title={tr(\n            \"conversations.admin.selectWorkspace\",\n            \"Select a workspace\",\n          )}\n          description={tr(\n            \"conversations.admin.selectWorkspaceModerationDescription\",\n            \"Choose a workspace to review reported conversation messages.\",\n          )}\n          icon={<ShieldCheck className=\"size-6\" aria-hidden=\"true\" />}\n          illustration=\"empty-generic\"\n        />\n      )}\n      {workspaceId && loading && (\n        <p className=\"text-sm text-text-secondary\">Loading reports…</p>\n      )}\n      {workspaceId && error && (\n        <p className=\"text-sm text-status-error-text\">{error.message}</p>\n      )}\n      {workspaceId && !loading && !error && reports.length === 0 && (\n        <EmptyState\n          title=\"No reports waiting for review\"\n          description=\"Reported messages will appear here as they are submitted.\"\n          icon={<CheckCircle2 className=\"size-6\" aria-hidden=\"true\" />}\n          illustration=\"empty-notifications\"\n        />\n      )}\n      <div className=\"grid gap-3\">\n        {reports.map((report) => (\n          <GlassCard\n            key={report.id}\n            treatment=\"glass\"\n            className=\"border-border-seam p-4\"\n          >\n            <div className=\"flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between\">\n              <div className=\"space-y-2 min-w-0\">\n                <div className=\"flex flex-wrap items-center gap-2\">\n                  <StatusPill>{report.status}</StatusPill>\n                  {report.message.isHidden && <StatusPill>Hidden</StatusPill>}\n                  <span className=\"text-xs text-text-secondary\">\n                    Reported {formatDate(report.createdAt)}\n                  </span>\n                </div>\n                <p className=\"text-sm font-medium text-text-primary\">\n                  {report.reason}\n                </p>\n                <p className=\"rounded-md border border-border-seam bg-bg-sunken p-3 text-sm text-text-secondary\">\n                  {formatContent(report.message.content)}\n                </p>\n                <p className=\"text-xs text-text-secondary\">\n                  Message {report.messageId} in conversation{\" \"}\n                  {report.message.conversationId} by {report.message.authorId};\n                  reported by {report.reportedBy}\n                </p>\n              </div>\n              {/* One primary CTA (hide + resolve), the secondary \"Dismiss\"\n                  collapses into the overflow menu. */}\n              <CTAOverflowMenu\n                className=\"shrink-0\"\n                primary={{\n                  label: \"Hide and resolve\",\n                  disabled: resolving,\n                  onSelect: () =>\n                    void resolveReport({\n                      variables: {\n                        input: { reportId: report.id, action: \"HIDE_MESSAGE\" },\n                      },\n                    }),\n                }}\n                actions={[\n                  {\n                    label: \"Dismiss\",\n                    disabled: resolving,\n                    onSelect: () =>\n                      void resolveReport({\n                        variables: {\n                          input: { reportId: report.id, action: \"DISMISS\" },\n                        },\n                      }),\n                  },\n                ]}\n              />\n            </div>\n          </GlassCard>\n        ))}\n      </div>\n    </PageLayout>\n  );\n}\n\nexport function BulkOperationsPage() {\n  const tr = useTr();\n  const { workspaceId } = useConversations();\n  const [selectedIds, setSelectedIds] = useState<Set<string>>(() => new Set());\n  const [action, setAction] = useState<\"ARCHIVE\" | \"UNARCHIVE\" | \"DELETE\">(\n    \"ARCHIVE\",\n  );\n  const { data, loading, error, refetch } = useQuery<{\n    conversations: { edges: Array<{ node: ConversationNode }> };\n  }>(GET_BULK_CONVERSATIONS, {\n    variables: { first: 100 },\n    skip: !workspaceId,\n  });\n  const [bulkUpdate, { data: bulkResult, loading: updating }] = useMutation<\n    BulkUpdateConversationsResult,\n    { input: { conversationIds: string[]; action: typeof action } }\n  >(BULK_UPDATE_CONVERSATIONS, {\n    onCompleted: () => {\n      setSelectedIds(new Set());\n      void refetch();\n    },\n  });\n  const conversations =\n    data?.conversations.edges.map((edge) => edge.node) ?? [];\n\n  const toggle = (id: string) => {\n    setSelectedIds((current) => {\n      const next = new Set(current);\n      if (next.has(id)) next.delete(id);\n      else next.add(id);\n      return next;\n    });\n  };\n\n  return (\n    <PageLayout\n      title={tr(\n        \"conversations.admin.bulkOperationsPageTitle\",\n        \"Bulk operations\",\n      )}\n      subtitle={tr(\n        \"conversations.admin.bulkOperationsPageDescription\",\n        \"Select workspace conversations and apply archive, unarchive, or delete operations.\",\n      )}\n      icon={<Archive className=\"size-5\" aria-hidden=\"true\" />}\n      maxWidth=\"2xl\"\n      headerActions={\n        <div className=\"flex flex-wrap items-center gap-2\">\n          <select\n            value={action}\n            onChange={(event) => setAction(event.target.value as typeof action)}\n            aria-label=\"Bulk action\"\n            className=\"min-h-11 rounded-md border border-border-seam bg-bg-surface px-3 py-2 text-sm text-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]\"\n          >\n            <option value=\"ARCHIVE\">Archive</option>\n            <option value=\"UNARCHIVE\">Unarchive</option>\n            <option value=\"DELETE\">Delete</option>\n          </select>\n          <Button\n            type=\"button\"\n            size=\"sm\"\n            disabled={selectedIds.size === 0 || updating}\n            onClick={() =>\n              void bulkUpdate({\n                variables: {\n                  input: { conversationIds: Array.from(selectedIds), action },\n                },\n              })\n            }\n          >\n            Apply to {selectedIds.size}\n          </Button>\n        </div>\n      }\n    >\n      {!workspaceId && (\n        <EmptyState\n          title={tr(\n            \"conversations.admin.selectWorkspace\",\n            \"Select a workspace\",\n          )}\n          description={tr(\n            \"conversations.admin.selectWorkspaceBulkDescription\",\n            \"Choose a workspace to manage conversations in bulk.\",\n          )}\n          icon={<Archive className=\"size-6\" aria-hidden=\"true\" />}\n          illustration=\"empty-generic\"\n        />\n      )}\n      {workspaceId && loading && (\n        <p className=\"text-sm text-text-secondary\">Loading conversations…</p>\n      )}\n      {workspaceId && error && (\n        <p className=\"text-sm text-status-error-text\">{error.message}</p>\n      )}\n      {bulkResult?.bulkUpdateConversations && (\n        <GlassCard\n          treatment=\"metric\"\n          className=\"grid grid-cols-2 gap-4 border-border-seam p-4 sm:max-w-md\"\n        >\n          <div>\n            <p className=\"text-2xl font-semibold tabular-nums text-status-success-text\">\n              {bulkResult.bulkUpdateConversations.successCount}\n            </p>\n            <p className=\"text-xs text-text-secondary\">Succeeded</p>\n          </div>\n          <div>\n            <p className=\"text-2xl font-semibold tabular-nums text-text-primary\">\n              {bulkResult.bulkUpdateConversations.failureCount}\n            </p>\n            <p className=\"text-xs text-text-secondary\">Failed</p>\n          </div>\n        </GlassCard>\n      )}\n      {workspaceId && (\n        <div className=\"overflow-hidden rounded-lg border border-border-seam bg-bg-surface\">\n          {conversations.map((conversation) => (\n            <label\n              key={conversation.id}\n              className=\"flex min-h-11 cursor-pointer items-center gap-3 border-b border-border-seam px-4 py-3 last:border-b-0 hover:bg-accent\"\n            >\n              <input\n                type=\"checkbox\"\n                aria-label={`Select ${conversation.title || \"untitled conversation\"}`}\n                checked={selectedIds.has(conversation.id)}\n                onChange={() => toggle(conversation.id)}\n              />\n              <div className=\"min-w-0 flex-1\">\n                <p className=\"truncate text-sm font-medium text-text-primary\">\n                  {conversation.title || \"Untitled conversation\"}\n                </p>\n                <p className=\"text-xs text-text-secondary\">\n                  {conversation.type} · {conversation.state} · Updated{\" \"}\n                  {formatDate(conversation.updatedAt)}\n                </p>\n              </div>\n            </label>\n          ))}\n        </div>\n      )}\n    </PageLayout>\n  );\n}\n\nexport function ConversationAuditLogPage() {\n  const tr = useTr();\n  const { workspaceId } = useConversations();\n  const { data, loading, error } = useQuery<{\n    getActivities: ActivityLogNode[];\n  }>(GET_CONVERSATION_AUDIT_LOG, {\n    variables: {\n      filter: { workspaceId, resourceType: \"conversation\", limit: 50 },\n    },\n    skip: !workspaceId,\n  });\n  const logs = data?.getActivities ?? [];\n\n  return (\n    <PageLayout\n      title={tr(\"conversations.admin.auditLogPageTitle\", \"Audit log\")}\n      subtitle={tr(\n        \"conversations.admin.auditLogPageDescription\",\n        \"Activity stream for admin and moderator actions on workspace conversations.\",\n      )}\n      icon={<Activity className=\"size-5\" aria-hidden=\"true\" />}\n      maxWidth=\"2xl\"\n    >\n      {loading && (\n        <p className=\"text-sm text-text-secondary\">Loading activity…</p>\n      )}\n      {error && <p className=\"text-sm text-status-error-text\">{error.message}</p>}\n      {!loading && !error && logs.length === 0 && (\n        <EmptyState\n          title=\"No activity found\"\n          description=\"Conversation admin actions will appear here.\"\n          illustration=\"empty-data\"\n        />\n      )}\n      <div className=\"grid gap-3\">\n        {logs.map((log) => (\n          <GlassCard\n            key={log.id}\n            treatment=\"plain\"\n            className=\"border-border-seam p-4\"\n          >\n            <div className=\"flex flex-wrap items-center justify-between gap-2\">\n              <p className=\"text-sm font-medium text-text-primary\">\n                {log.action}\n              </p>\n              <span className=\"text-xs tabular-nums text-text-secondary\">\n                {formatDate(log.timestamp)}\n              </span>\n            </div>\n            <p className=\"mt-1 text-sm text-text-secondary\">\n              {log.description || \"No description provided\"}\n            </p>\n            <p className=\"mt-2 text-xs text-text-secondary\">\n              User {log.userId} · Resource {log.resourceId ?? \"workspace\"}\n            </p>\n          </GlassCard>\n        ))}\n      </div>\n    </PageLayout>\n  );\n}\n\nexport function AppInstallationsPage() {\n  const tr = useTr();\n  const { workspaceId } = useConversations();\n  const [appId, setAppId] = useState(\"\");\n  const [settingsInput, setSettingsInput] = useState(\"{}\");\n  const [settingsDrafts, setSettingsDrafts] = useState<Record<string, string>>(\n    {},\n  );\n  const [formError, setFormError] = useState<string | null>(null);\n  const { data, loading, error, refetch } = useQuery<{\n    appInstallations: AppInstallationNode[];\n  }>(GET_APP_INSTALLATIONS, {\n    variables: { workspaceId },\n    skip: !workspaceId,\n  });\n  const [installApp, { loading: installing }] = useMutation(INSTALL_APP, {\n    onCompleted: () => void refetch(),\n  });\n  const [updateSettings, { loading: saving }] = useMutation(\n    UPDATE_APP_SETTINGS,\n    { onCompleted: () => void refetch() },\n  );\n  const [uninstallApp, { loading: uninstalling }] = useMutation(UNINSTALL_APP, {\n    onCompleted: () => void refetch(),\n  });\n  const installations = useMemo(\n    () => data?.appInstallations ?? [],\n    [data?.appInstallations],\n  );\n\n  useEffect(() => {\n    setSettingsDrafts((current) => {\n      if (installations.every((installation) => current[installation.id])) {\n        return current;\n      }\n      const next = { ...current };\n      for (const installation of installations) {\n        if (!next[installation.id]) {\n          next[installation.id] = JSON.stringify(\n            installation.settings ?? {},\n            null,\n            2,\n          );\n        }\n      }\n      return next;\n    });\n  }, [installations]);\n\n  const parsedSettings = (raw: string): Record<string, unknown> | null => {\n    try {\n      const parsed = JSON.parse(raw) as unknown;\n      return parsed && typeof parsed === \"object\" && !Array.isArray(parsed)\n        ? (parsed as Record<string, unknown>)\n        : null;\n    } catch {\n      return null;\n    }\n  };\n\n  const handleInstall = () => {\n    const settings = parsedSettings(settingsInput);\n    if (!appId.trim() || !settings) {\n      setFormError(\"Enter an app ID and a valid JSON settings object.\");\n      return;\n    }\n    setFormError(null);\n    void installApp({\n      variables: { input: { appId: appId.trim(), workspaceId, settings } },\n    });\n  };\n\n  return (\n    <PageLayout\n      title={tr(\n        \"conversations.admin.appInstallationsPageTitle\",\n        \"App installations\",\n      )}\n      subtitle={tr(\n        \"conversations.admin.appInstallationsPageDescription\",\n        \"Install, configure, and remove conversation apps and integrations.\",\n      )}\n      icon={<Package className=\"size-5\" aria-hidden=\"true\" />}\n      maxWidth=\"2xl\"\n    >\n      <PageSection\n        title=\"Install app\"\n        description=\"Install a workspace-scoped conversation app by app ID.\"\n      >\n        <div className=\"grid gap-3 rounded-lg border border-border-seam bg-bg-surface p-4 sm:grid-cols-[minmax(0,1fr)_minmax(0,2fr)_auto]\">\n          <input\n            value={appId}\n            onChange={(event) => setAppId(event.target.value)}\n            placeholder=\"app-id\"\n            aria-label=\"App ID\"\n            className=\"min-h-11 rounded-md border border-border-seam bg-bg-surface px-3 py-2 text-sm text-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]\"\n          />\n          <textarea\n            value={settingsInput}\n            onChange={(event) => setSettingsInput(event.target.value)}\n            rows={3}\n            aria-label=\"App settings JSON\"\n            className=\"rounded-md border border-border-seam bg-bg-surface px-3 py-2 text-sm text-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]\"\n          />\n          <Button\n            type=\"button\"\n            size=\"sm\"\n            disabled={installing}\n            onClick={handleInstall}\n          >\n            Install\n          </Button>\n        </div>\n        {formError && <p className=\"text-sm text-status-error-text\">{formError}</p>}\n      </PageSection>\n      {loading && (\n        <p className=\"text-sm text-text-secondary\">\n          Loading app installations…\n        </p>\n      )}\n      {error && <p className=\"text-sm text-status-error-text\">{error.message}</p>}\n      <div className=\"grid gap-3\">\n        {installations.map((installation) => (\n          <GlassCard\n            key={installation.id}\n            treatment=\"glass\"\n            className=\"border-border-seam p-4\"\n          >\n            <div className=\"flex flex-wrap items-start justify-between gap-3\">\n              <div className=\"min-w-0\">\n                <div className=\"flex items-center gap-2\">\n                  <h3 className=\"text-sm font-semibold text-text-primary\">\n                    {installation.appId}\n                  </h3>\n                  <StatusPill>{installation.state}</StatusPill>\n                </div>\n                <p className=\"text-xs text-text-secondary\">\n                  Version {installation.appVersion} · Installed by{\" \"}\n                  {installation.installedBy} on{\" \"}\n                  {formatDate(installation.installedAt)}\n                </p>\n              </div>\n              {/* Destructive uninstall lives behind the overflow menu and\n                  asks for confirmation before firing the mutation. */}\n              <CTAOverflowMenu\n                className=\"shrink-0\"\n                actions={[\n                  {\n                    label: \"Uninstall\",\n                    intent: \"destructive\",\n                    disabled: uninstalling,\n                    icon: <Trash2 className=\"size-4\" aria-hidden=\"true\" />,\n                    onSelect: () => {\n                      if (\n                        !window.confirm(\n                          `Uninstall ${installation.appId}? This removes the app and its settings from this workspace.`,\n                        )\n                      ) {\n                        return;\n                      }\n                      void uninstallApp({\n                        variables: { id: installation.id },\n                      });\n                    },\n                  },\n                ]}\n              />\n            </div>\n            {/* The raw JSON settings editor is an advanced surface — collapse\n                it behind progressive disclosure so the card stays calm. */}\n            <ShowMore\n              className=\"mt-3\"\n              collapsedHeight={0}\n              label=\"Edit settings (JSON)\"\n            >\n              <div className=\"grid gap-2 pt-2\">\n                <textarea\n                  rows={5}\n                  aria-label={`Settings for ${installation.appId}`}\n                  value={settingsDrafts[installation.id] ?? \"{}\"}\n                  onChange={(event) =>\n                    setSettingsDrafts((current) => ({\n                      ...current,\n                      [installation.id]: event.target.value,\n                    }))\n                  }\n                  className=\"rounded-md border border-border-seam bg-bg-surface px-3 py-2 font-mono text-xs text-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]\"\n                />\n                <Button\n                  type=\"button\"\n                  variant=\"secondary\"\n                  size=\"sm\"\n                  disabled={saving}\n                  className=\"w-fit\"\n                  onClick={() => {\n                    const settings = parsedSettings(\n                      settingsDrafts[installation.id] ?? \"{}\",\n                    );\n                    if (!settings) {\n                      setFormError(\n                        \"Installation settings must be a valid JSON object.\",\n                      );\n                      return;\n                    }\n                    setFormError(null);\n                    void updateSettings({\n                      variables: { id: installation.id, settings },\n                    });\n                  }}\n                >\n                  Save settings\n                </Button>\n              </div>\n            </ShowMore>\n          </GlassCard>\n        ))}\n      </div>\n    </PageLayout>\n  );\n}\n"],"mappings":";;;;;;;;;;;;AAsBA,IAAM,IAAsB,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BzB,IAAyB,CAAG;;;;;;;;;;;;;;;GAiB5B,IAAyB,CAAG;;;;;;;;;;;;;;;;;GAmB5B,IAA4B,CAAG;;;;;;;;;;;;;;;;GAkB/B,IAA6B,CAAG;;;;;;;;;;;;GAchC,IAAwB,CAAG;;;;;;;;;;;;;;GAgB3B,IAAc,CAAG;;;;;;;;;;GAYjB,IAAsB,CAAG;;;;;;;;GAUzB,IAAgB,CAAG;;;;;;;;AAqEzB,SAAS,EAAc,GAA0B;AAC/C,KAAI,OAAO,KAAY,SAAU,QAAO;AACxC,KAAI,KAAW,OAAO,KAAY,YAAY,UAAU,GAAS;EAC/D,IAAM,IAAQ,EAA+B;AAC7C,MAAI,OAAO,KAAS,SAAU,QAAO;;AAEvC,KAAI;AACF,SAAO,KAAK,UAAU,EAAQ;SACxB;AACN,SAAO;;;AAIX,IAAM,IAAiB,IAAI,KAAK,eAAe,KAAA,GAAW;CACxD,WAAW;CACX,WAAW;CACZ,CAAC;AAEF,SAAS,EAAW,GAAuB;AACzC,QAAO,EAAe,OAAO,IAAI,KAAK,EAAM,CAAC;;AAG/C,SAAS,EAAW,EAAE,eAAkC;AACtD,QACE,kBAAC,QAAD;EAAM,WAAU;EACb;EACI,CAAA;;AAIX,SAAgB,IAAsB;CACpC,IAAM,IAAK,GAAO,EACZ,EAAE,mBAAgB,GAAkB,EACpC,EAAE,SAAM,YAAS,UAAO,eAAY,EAEvC,GAAqB;EACtB,WAAW;GAAE,OAAO;GAAI,QAAQ,EAAE,UAAU,CAAC,WAAW,YAAY,EAAE;GAAE;EACxE,MAAM,CAAC;EACR,CAAC,EACI,CAAC,GAAe,EAAE,SAAS,OAAe,EAC9C,GACA,EACE,mBAAmB,KAAK,GAAS,EAClC,CACF,EAEK,IAAU,GAAM,eAAe,MAAM,KAAK,MAAS,EAAK,KAAK,IAAI,EAAE;AAEzE,QACE,kBAAC,GAAD;EACE,OAAO,EAAG,2CAA2C,mBAAmB;EACxE,UAAU,EACR,iDACA,0DACD;EACD,MAAM,kBAAC,GAAD;GAAa,WAAU;GAAS,eAAY;GAAS,CAAA;EAC3D,UAAS;YAPX;GASG,CAAC,KACA,kBAAC,GAAD;IACE,OAAO,EACL,uCACA,qBACD;IACD,aAAa,EACX,4DACA,+DACD;IACD,MAAM,kBAAC,GAAD;KAAa,WAAU;KAAS,eAAY;KAAS,CAAA;IAC3D,cAAa;IACb,CAAA;GAEH,KAAe,KACd,kBAAC,KAAD;IAAG,WAAU;cAA8B;IAAoB,CAAA;GAEhE,KAAe,KACd,kBAAC,KAAD;IAAG,WAAU;cAAkC,EAAM;IAAY,CAAA;GAElE,KAAe,CAAC,KAAW,CAAC,KAAS,EAAQ,WAAW,KACvD,kBAAC,GAAD;IACE,OAAM;IACN,aAAY;IACZ,MAAM,kBAAC,GAAD;KAAc,WAAU;KAAS,eAAY;KAAS,CAAA;IAC5D,cAAa;IACb,CAAA;GAEJ,kBAAC,OAAD;IAAK,WAAU;cACZ,EAAQ,KAAK,MACZ,kBAAC,GAAD;KAEE,WAAU;KACV,WAAU;eAEV,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,OAAD;OAAK,WAAU;iBAAf;QACE,kBAAC,OAAD;SAAK,WAAU;mBAAf;UACE,kBAAC,GAAD,EAAA,UAAa,EAAO,QAAoB,CAAA;UACvC,EAAO,QAAQ,YAAY,kBAAC,GAAD,EAAA,UAAY,UAAmB,CAAA;UAC3D,kBAAC,QAAD;WAAM,WAAU;qBAAhB,CAA8C,aAClC,EAAW,EAAO,UAAU,CACjC;;UACH;;QACN,kBAAC,KAAD;SAAG,WAAU;mBACV,EAAO;SACN,CAAA;QACJ,kBAAC,KAAD;SAAG,WAAU;mBACV,EAAc,EAAO,QAAQ,QAAQ;SACpC,CAAA;QACJ,kBAAC,KAAD;SAAG,WAAU;mBAAb;UAA2C;UAChC,EAAO;UAAU;UAAiB;UAC1C,EAAO,QAAQ;UAAe;UAAK,EAAO,QAAQ;UAAS;UAC/C,EAAO;UAClB;;QACA;UAGN,kBAAC,GAAD;OACE,WAAU;OACV,SAAS;QACP,OAAO;QACP,UAAU;QACV,gBACE,KAAK,EAAc,EACjB,WAAW,EACT,OAAO;SAAE,UAAU,EAAO;SAAI,QAAQ;SAAgB,EACvD,EACF,CAAC;QACL;OACD,SAAS,CACP;QACE,OAAO;QACP,UAAU;QACV,gBACE,KAAK,EAAc,EACjB,WAAW,EACT,OAAO;SAAE,UAAU,EAAO;SAAI,QAAQ;SAAW,EAClD,EACF,CAAC;QACL,CACF;OACD,CAAA,CACE;;KACI,EArDL,EAAO,GAqDF,CACZ;IACE,CAAA;GACK;;;AAIjB,SAAgB,IAAqB;CACnC,IAAM,IAAK,GAAO,EACZ,EAAE,mBAAgB,GAAkB,EACpC,CAAC,GAAa,KAAkB,wBAA4B,IAAI,KAAK,CAAC,EACtE,CAAC,GAAQ,KAAa,EAC1B,UACD,EACK,EAAE,SAAM,YAAS,UAAO,eAAY,EAEvC,GAAwB;EACzB,WAAW,EAAE,OAAO,KAAK;EACzB,MAAM,CAAC;EACR,CAAC,EACI,CAAC,GAAY,EAAE,MAAM,GAAY,SAAS,OAAc,EAG5D,GAA2B,EAC3B,mBAAmB;AAEZ,EADL,kBAAe,IAAI,KAAK,CAAC,EACpB,GAAS;IAEjB,CAAC,EACI,IACJ,GAAM,cAAc,MAAM,KAAK,MAAS,EAAK,KAAK,IAAI,EAAE,EAEpD,KAAU,MAAe;AAC7B,KAAgB,MAAY;GAC1B,IAAM,IAAO,IAAI,IAAI,EAAQ;AAG7B,UAFI,EAAK,IAAI,EAAG,GAAE,EAAK,OAAO,EAAG,GAC5B,EAAK,IAAI,EAAG,EACV;IACP;;AAGJ,QACE,kBAAC,GAAD;EACE,OAAO,EACL,+CACA,kBACD;EACD,UAAU,EACR,qDACA,qFACD;EACD,MAAM,kBAAC,GAAD;GAAS,WAAU;GAAS,eAAY;GAAS,CAAA;EACvD,UAAS;EACT,eACE,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,UAAD;IACE,OAAO;IACP,WAAW,MAAU,EAAU,EAAM,OAAO,MAAuB;IACnE,cAAW;IACX,WAAU;cAJZ;KAME,kBAAC,UAAD;MAAQ,OAAM;gBAAU;MAAgB,CAAA;KACxC,kBAAC,UAAD;MAAQ,OAAM;gBAAY;MAAkB,CAAA;KAC5C,kBAAC,UAAD;MAAQ,OAAM;gBAAS;MAAe,CAAA;KAC/B;OACT,kBAAC,GAAD;IACE,MAAK;IACL,MAAK;IACL,UAAU,EAAY,SAAS,KAAK;IACpC,eACE,KAAK,EAAW,EACd,WAAW,EACT,OAAO;KAAE,iBAAiB,MAAM,KAAK,EAAY;KAAE;KAAQ,EAC5D,EACF,CAAC;cATN,CAWC,aACW,EAAY,KACf;MACL;;YArCV;GAwCG,CAAC,KACA,kBAAC,GAAD;IACE,OAAO,EACL,uCACA,qBACD;IACD,aAAa,EACX,sDACA,sDACD;IACD,MAAM,kBAAC,GAAD;KAAS,WAAU;KAAS,eAAY;KAAS,CAAA;IACvD,cAAa;IACb,CAAA;GAEH,KAAe,KACd,kBAAC,KAAD;IAAG,WAAU;cAA8B;IAA0B,CAAA;GAEtE,KAAe,KACd,kBAAC,KAAD;IAAG,WAAU;cAAkC,EAAM;IAAY,CAAA;GAElE,GAAY,2BACX,kBAAC,GAAD;IACE,WAAU;IACV,WAAU;cAFZ,CAIE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;KAAG,WAAU;eACV,EAAW,wBAAwB;KAClC,CAAA,EACJ,kBAAC,KAAD;KAAG,WAAU;eAA8B;KAAa,CAAA,CACpD,EAAA,CAAA,EACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;KAAG,WAAU;eACV,EAAW,wBAAwB;KAClC,CAAA,EACJ,kBAAC,KAAD;KAAG,WAAU;eAA8B;KAAU,CAAA,CACjD,EAAA,CAAA,CACI;;GAEb,KACC,kBAAC,OAAD;IAAK,WAAU;cACZ,EAAc,KAAK,MAClB,kBAAC,SAAD;KAEE,WAAU;eAFZ,CAIE,kBAAC,SAAD;MACE,MAAK;MACL,cAAY,UAAU,EAAa,SAAS;MAC5C,SAAS,EAAY,IAAI,EAAa,GAAG;MACzC,gBAAgB,EAAO,EAAa,GAAG;MACvC,CAAA,EACF,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,KAAD;OAAG,WAAU;iBACV,EAAa,SAAS;OACrB,CAAA,EACJ,kBAAC,KAAD;OAAG,WAAU;iBAAb;QACG,EAAa;QAAK;QAAI,EAAa;QAAM;QAAW;QACpD,EAAW,EAAa,UAAU;QACjC;SACA;QACA;OAlBD,EAAa,GAkBZ,CACR;IACE,CAAA;GAEG;;;AAIjB,SAAgB,IAA2B;CACzC,IAAM,IAAK,GAAO,EACZ,EAAE,mBAAgB,GAAkB,EACpC,EAAE,SAAM,YAAS,aAAU,EAE9B,GAA4B;EAC7B,WAAW,EACT,QAAQ;GAAE;GAAa,cAAc;GAAgB,OAAO;GAAI,EACjE;EACD,MAAM,CAAC;EACR,CAAC,EACI,IAAO,GAAM,iBAAiB,EAAE;AAEtC,QACE,kBAAC,GAAD;EACE,OAAO,EAAG,yCAAyC,YAAY;EAC/D,UAAU,EACR,+CACA,8EACD;EACD,MAAM,kBAAC,GAAD;GAAU,WAAU;GAAS,eAAY;GAAS,CAAA;EACxD,UAAS;YAPX;GASG,KACC,kBAAC,KAAD;IAAG,WAAU;cAA8B;IAAqB,CAAA;GAEjE,KAAS,kBAAC,KAAD;IAAG,WAAU;cAAkC,EAAM;IAAY,CAAA;GAC1E,CAAC,KAAW,CAAC,KAAS,EAAK,WAAW,KACrC,kBAAC,GAAD;IACE,OAAM;IACN,aAAY;IACZ,cAAa;IACb,CAAA;GAEJ,kBAAC,OAAD;IAAK,WAAU;cACZ,EAAK,KAAK,MACT,kBAAC,GAAD;KAEE,WAAU;KACV,WAAU;eAHZ;MAKE,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,KAAD;QAAG,WAAU;kBACV,EAAI;QACH,CAAA,EACJ,kBAAC,QAAD;QAAM,WAAU;kBACb,EAAW,EAAI,UAAU;QACrB,CAAA,CACH;;MACN,kBAAC,KAAD;OAAG,WAAU;iBACV,EAAI,eAAe;OAClB,CAAA;MACJ,kBAAC,KAAD;OAAG,WAAU;iBAAb;QAAgD;QACxC,EAAI;QAAO;QAAa,EAAI,cAAc;QAC9C;;MACM;OAlBL,EAAI,GAkBC,CACZ;IACE,CAAA;GACK;;;AAIjB,SAAgB,IAAuB;CACrC,IAAM,IAAK,GAAO,EACZ,EAAE,mBAAgB,GAAkB,EACpC,CAAC,GAAO,KAAY,EAAS,GAAG,EAChC,CAAC,GAAe,KAAoB,EAAS,KAAK,EAClD,CAAC,GAAgB,KAAqB,EAC1C,EAAE,CACH,EACK,CAAC,GAAW,KAAgB,EAAwB,KAAK,EACzD,EAAE,SAAM,YAAS,UAAO,eAAY,EAEvC,GAAuB;EACxB,WAAW,EAAE,gBAAa;EAC1B,MAAM,CAAC;EACR,CAAC,EACI,CAAC,GAAY,EAAE,SAAS,OAAgB,EAAY,GAAa,EACrE,mBAAmB,KAAK,GAAS,EAClC,CAAC,EACI,CAAC,GAAgB,EAAE,SAAS,OAAY,EAC5C,GACA,EAAE,mBAAmB,KAAK,GAAS,EAAE,CACtC,EACK,CAAC,GAAc,EAAE,SAAS,OAAkB,EAAY,GAAe,EAC3E,mBAAmB,KAAK,GAAS,EAClC,CAAC,EACI,IAAgB,QACd,GAAM,oBAAoB,EAAE,EAClC,CAAC,GAAM,iBAAiB,CACzB;AAED,SAAgB;AACd,KAAmB,MAAY;AAC7B,OAAI,EAAc,OAAO,MAAiB,EAAQ,EAAa,IAAI,CACjE,QAAO;GAET,IAAM,IAAO,EAAE,GAAG,GAAS;AAC3B,QAAK,IAAM,KAAgB,EACzB,CAAK,EAAK,EAAa,QACrB,EAAK,EAAa,MAAM,KAAK,UAC3B,EAAa,YAAY,EAAE,EAC3B,MACA,EACD;AAGL,UAAO;IACP;IACD,CAAC,EAAc,CAAC;CAEnB,IAAM,KAAkB,MAAgD;AACtE,MAAI;GACF,IAAM,IAAS,KAAK,MAAM,EAAI;AAC9B,UAAO,KAAU,OAAO,KAAW,YAAY,CAAC,MAAM,QAAQ,EAAO,GAChE,IACD;UACE;AACN,UAAO;;;AAgBX,QACE,kBAAC,GAAD;EACE,OAAO,EACL,iDACA,oBACD;EACD,UAAU,EACR,uDACA,qEACD;EACD,MAAM,kBAAC,GAAD;GAAS,WAAU;GAAS,eAAY;GAAS,CAAA;EACvD,UAAS;YAVX;GAYE,kBAAC,GAAD;IACE,OAAM;IACN,aAAY;cAFd,CAIE,kBAAC,OAAD;KAAK,WAAU;eAAf;MACE,kBAAC,SAAD;OACE,OAAO;OACP,WAAW,MAAU,EAAS,EAAM,OAAO,MAAM;OACjD,aAAY;OACZ,cAAW;OACX,WAAU;OACV,CAAA;MACF,kBAAC,YAAD;OACE,OAAO;OACP,WAAW,MAAU,EAAiB,EAAM,OAAO,MAAM;OACzD,MAAM;OACN,cAAW;OACX,WAAU;OACV,CAAA;MACF,kBAAC,GAAD;OACE,MAAK;OACL,MAAK;OACL,UAAU;OACV,eAhDkB;QAC1B,IAAM,IAAW,EAAe,EAAc;AAC9C,YAAI,CAAC,EAAM,MAAM,IAAI,CAAC,GAAU;AAC9B,WAAa,oDAAoD;AACjE;;AAGG,QADL,EAAa,KAAK,EACb,EAAW,EACd,WAAW,EAAE,OAAO;SAAE,OAAO,EAAM,MAAM;SAAE;SAAa;SAAU,EAAE,EACrE,CAAC;;iBAwCK;OAEQ,CAAA;MACL;QACL,KAAa,kBAAC,KAAD;KAAG,WAAU;eAAkC;KAAc,CAAA,CAC/D;;GACb,KACC,kBAAC,KAAD;IAAG,WAAU;cAA8B;IAEvC,CAAA;GAEL,KAAS,kBAAC,KAAD;IAAG,WAAU;cAAkC,EAAM;IAAY,CAAA;GAC3E,kBAAC,OAAD;IAAK,WAAU;cACZ,EAAc,KAAK,MAClB,kBAAC,GAAD;KAEE,WAAU;KACV,WAAU;eAHZ,CAKE,kBAAC,OAAD;MAAK,WAAU;gBAAf,CACE,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,MAAD;SAAI,WAAU;mBACX,EAAa;SACX,CAAA,EACL,kBAAC,GAAD,EAAA,UAAa,EAAa,OAAmB,CAAA,CACzC;WACN,kBAAC,KAAD;QAAG,WAAU;kBAAb;SAA2C;SAChC,EAAa;SAAW;SAAgB;SAChD,EAAa;SAAY;SAAI;SAC7B,EAAW,EAAa,YAAY;SACnC;UACA;UAGN,kBAAC,GAAD;OACE,WAAU;OACV,SAAS,CACP;QACE,OAAO;QACP,QAAQ;QACR,UAAU;QACV,MAAM,kBAAC,GAAD;SAAQ,WAAU;SAAS,eAAY;SAAS,CAAA;QACtD,gBAAgB;AAEX,gBAAO,QACN,aAAa,EAAa,MAAM,8DACjC,IAIE,EAAa,EAChB,WAAW,EAAE,IAAI,EAAa,IAAI,EACnC,CAAC;;QAEL,CACF;OACD,CAAA,CACE;SAGN,kBAAC,GAAD;MACE,WAAU;MACV,iBAAiB;MACjB,OAAM;gBAEN,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,YAAD;QACE,MAAM;QACN,cAAY,gBAAgB,EAAa;QACzC,OAAO,EAAe,EAAa,OAAO;QAC1C,WAAW,MACT,GAAmB,OAAa;SAC9B,GAAG;UACF,EAAa,KAAK,EAAM,OAAO;SACjC,EAAE;QAEL,WAAU;QACV,CAAA,EACF,kBAAC,GAAD;QACE,MAAK;QACL,SAAQ;QACR,MAAK;QACL,UAAU;QACV,WAAU;QACV,eAAe;SACb,IAAM,IAAW,EACf,EAAe,EAAa,OAAO,KACpC;AACD,aAAI,CAAC,GAAU;AACb,YACE,qDACD;AACD;;AAGG,SADL,EAAa,KAAK,EACb,EAAe,EAClB,WAAW;UAAE,IAAI,EAAa;UAAI;UAAU,EAC7C,CAAC;;kBAEL;QAEQ,CAAA,CACL;;MACG,CAAA,CACD;OA1FL,EAAa,GA0FR,CACZ;IACE,CAAA;GACK"}

package/dist/conversations/pages/ConversationListPage.js

@@ -2,17 +2,17 @@ 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 { useGetConversations as i, useSearchConversations as a } from "../hooks/useConversationQueries.js";
-import { useConversationStream as ee } from "../hooks/useMessageSubscriptions.js";
+import { useGetConversations as i, useSearchConversations as ee } from "../hooks/useConversationQueries.js";
+import { useConversationStream as a } from "../hooks/useMessageSubscriptions.js";
 import { PermissionGuard as o } from "../components/PermissionGuard.js";
 import { CONVERSATIONS_PERMISSIONS as s } from "../constants/permissions.js";
 import { ConversationRow as c } from "../components/ConversationRow.js";
-import { useCallback as te, useDeferredValue as ne, useEffect as l, useMemo as u, useState as d } from "react";
-import { AlertCircle as f, Archive as p, Hash as m, MessageCircle as h, Pin as g, Users as _ } from "lucide-react";
-import { useNavigate as v, useSearchParams as re } from "react-router-dom";
-import { useEventBus as ie } from "@burdenoff/fe-libs/shared/events";
-import { Fragment as y, jsx as b, jsxs as x } from "react/jsx-runtime";
-import { EmptyState as S } from "@burdenoff/fe-libs/ui";
+import { useCallback as te, useDeferredValue as l, useEffect as u, useMemo as d, useState as f } from "react";
+import { AlertCircle as p, Archive as m, Hash as h, MessageCircle as g, Pin as ne, Users as re } from "lucide-react";
+import { useNavigate as ie, useSearchParams as ae } from "react-router-dom";
+import { useEventBus as _ } from "@burdenoff/fe-libs/shared/events";
+import { Fragment as v, jsx as y, jsxs as b } from "react/jsx-runtime";
+import { EmptyState as x, IllustratedEmptyState as S } from "@burdenoff/fe-libs/ui";
 //#region src/conversations/pages/ConversationListPage.tsx
 var C = {
 	state: "all",
@@ -23,16 +23,16 @@ var C = {
 	isMuted: void 0
 };
 function w(e, t) {
-	let [n, r] = d(e);
-	return l(() => {
+	let [n, r] = f(e);
+	return u(() => {
 		let n = window.setTimeout(() => r(e), t);
 		return () => window.clearTimeout(n);
 	}, [t, e]), n;
 }
-function T({ forcedFilterParam: d, embedded: T = !1 } = {}) {
-	let E = v(), { basePath: D, onConversationSelect: O } = e(), k = ie(), A = n(), { searchQuery: ae, conversationFilter: j, updateConversationFilter: M, activeConversationId: N, setActiveConversationId: P } = r(), [F] = re(), I = ne(w(ae, 250)), L = I.trim(), R = L.length >= 2;
-	l(() => {
-		let e = d ?? F.get("filter");
+function T({ forcedFilterParam: f, embedded: T = !1 } = {}) {
+	let E = ie(), { basePath: D, onConversationSelect: O } = e(), k = _(), A = n(), { searchQuery: oe, conversationFilter: j, updateConversationFilter: M, activeConversationId: N, setActiveConversationId: P } = r(), [F] = ae(), I = l(w(oe, 250)), L = I.trim(), R = L.length >= 2;
+	u(() => {
+		let e = f ?? F.get("filter");
 		if (!e) {
 			M(C);
 			return;
@@ -55,11 +55,11 @@ function T({ forcedFilterParam: d, embedded: T = !1 } = {}) {
 			type: t
 		});
 	}, [
-		d,
+		f,
 		F,
 		M
 	]);
-	let z = u(() => {
+	let z = d(() => {
 		if (!(j.state === "all" || j.state === "ACTIVE")) return [j.state];
 	}, [j.state]), { conversations: B, loading: V, error: H } = i({
 		first: 50,
@@ -68,8 +68,8 @@ function T({ forcedFilterParam: d, embedded: T = !1 } = {}) {
 		hasUnread: j.hasUnread,
 		isPinned: j.isPinned
 	});
-	ee();
-	let { conversations: U, loading: W, error: G } = a(I), K = R ? U : B, q = u(() => K.filter((e) => e.isPinned), [K]), J = u(() => K.filter((e) => !e.isPinned), [K]), Y = te((e) => {
+	a();
+	let { conversations: U, loading: W, error: G } = ee(I), K = R ? U : B, q = d(() => K.filter((e) => e.isPinned), [K]), J = d(() => K.filter((e) => !e.isPinned), [K]), Y = te((e) => {
 		if (P(e.id), O?.(e), k.emit("conversations.conversation.opened", {
 			conversationId: e.id,
 			conversationType: e.type
@@ -87,145 +87,151 @@ function T({ forcedFilterParam: d, embedded: T = !1 } = {}) {
 		E,
 		O,
 		P
-	]), X = V || W, Z = H ?? G, Q = d === "archived" || j.state === "ARCHIVED", $ = u(() => {
+	]), X = V || W, Z = H ?? G, Q = f === "archived" || j.state === "ARCHIVED", $ = d(() => {
 		if (R) return {
 			title: A("conversations.empty.search.title", "No matches"),
 			description: `${A("conversations.empty.search.description", "No conversations matching")} "${L}"`,
-			icon: /* @__PURE__ */ b(h, {
+			icon: /* @__PURE__ */ y(g, {
 				size: 28,
 				className: "text-text-secondary"
-			})
+			}),
+			illustration: "empty-search"
 		};
 		if (Q) return {
 			title: A("conversations.empty.archived.title", "No archived conversations"),
 			description: A("conversations.empty.archived.description", "Archived conversations are hidden from your main inbox. Move conversations here from the row actions menu."),
-			icon: /* @__PURE__ */ b(p, {
+			icon: /* @__PURE__ */ y(m, {
 				size: 28,
 				className: "text-text-secondary"
-			})
+			}),
+			illustration: "empty-files"
 		};
-		switch (d) {
+		switch (f) {
 			case "direct": return {
 				title: A("conversations.empty.direct.title", "No direct conversations yet"),
 				description: A("conversations.empty.direct.description", "Start one with a workspace member from the New conversation button above."),
-				icon: /* @__PURE__ */ b(h, {
+				icon: /* @__PURE__ */ y(g, {
 					size: 28,
 					className: "text-text-secondary"
-				})
+				}),
+				illustration: "empty-vibes"
 			};
 			case "group": return {
 				title: A("conversations.empty.groups.title", "Create a group"),
 				description: A("conversations.empty.groups.description", "Groups let you chat with multiple people in one thread. Tap New to start one."),
-				icon: /* @__PURE__ */ b(_, {
+				icon: /* @__PURE__ */ y(re, {
 					size: 28,
 					className: "text-text-secondary"
-				})
+				}),
+				illustration: "empty-people"
 			};
 			case "channel": return {
 				title: A("conversations.empty.channels.title", "Subscribe to a channel"),
 				description: A("conversations.empty.channels.description", "Channels are topic-based discussions visible to everyone who joins them."),
-				icon: /* @__PURE__ */ b(m, {
+				icon: /* @__PURE__ */ y(h, {
 					size: 28,
 					className: "text-text-secondary"
-				})
+				}),
+				illustration: "empty-vibes"
 			};
 			default: return {
 				title: A("conversations.empty.all.title", "No conversations yet"),
 				description: A("conversations.empty.all.description", "Start your first conversation with someone in this workspace."),
-				icon: /* @__PURE__ */ b(h, {
+				icon: /* @__PURE__ */ y(g, {
 					size: 28,
 					className: "text-text-secondary"
-				})
+				}),
+				illustration: "empty-vibes"
 			};
 		}
 	}, [
-		d,
+		f,
 		Q,
 		R,
 		A,
 		L
 	]);
-	return T ? /* @__PURE__ */ b(o, {
+	return T ? /* @__PURE__ */ y(o, {
 		permission: s.CONVERSATION_READ,
 		allowUnavailablePermissions: !0,
-		children: /* @__PURE__ */ b("div", {
+		children: /* @__PURE__ */ y("div", {
 			"data-tour": "conversation-list",
 			className: "flex h-full min-h-0 w-full flex-col",
 			"aria-live": "polite",
-			children: X ? /* @__PURE__ */ b("div", {
+			children: X ? /* @__PURE__ */ y("div", {
 				role: "status",
 				className: "px-4 py-8 text-sm text-text-secondary",
 				children: A("conversations.loading", "Loading conversations...")
-			}) : Z ? /* @__PURE__ */ b(S, {
-				icon: /* @__PURE__ */ b(f, {
+			}) : Z ? /* @__PURE__ */ y(x, {
+				icon: /* @__PURE__ */ y(p, {
 					size: 28,
 					className: "text-status-error-text",
 					"aria-hidden": "true"
 				}),
 				title: A("conversations.couldNotLoad", "Could not load conversations"),
 				description: Z.message
-			}) : K.length === 0 ? /* @__PURE__ */ b(S, {
-				icon: $.icon,
+			}) : K.length === 0 ? /* @__PURE__ */ y(S, {
+				illustration: $.illustration,
 				title: $.title,
 				description: $.description
-			}) : /* @__PURE__ */ x("div", {
+			}) : /* @__PURE__ */ b("div", {
 				"data-tour": "conversation-list-results",
 				className: "flex flex-col gap-0.5 px-2 py-2",
-				children: [q.length > 0 && /* @__PURE__ */ x(y, { children: [
-					/* @__PURE__ */ x("div", {
+				children: [q.length > 0 && /* @__PURE__ */ b(v, { children: [
+					/* @__PURE__ */ b("div", {
 						className: "flex items-center gap-1.5 px-2 pt-2 pb-1",
-						children: [/* @__PURE__ */ b(g, {
+						children: [/* @__PURE__ */ y(ne, {
 							size: 11,
 							className: "text-text-secondary",
 							"aria-hidden": "true"
-						}), /* @__PURE__ */ b("span", {
+						}), /* @__PURE__ */ y("span", {
 							className: "text-[10px] font-semibold uppercase tracking-wider text-text-secondary",
 							children: A("conversations.pinned", "Pinned")
 						})]
 					}),
-					q.map((e) => /* @__PURE__ */ b(c, {
+					q.map((e) => /* @__PURE__ */ y(c, {
 						conversation: e,
 						isActive: N === e.id,
 						onClick: Y
 					}, e.id)),
-					J.length > 0 && /* @__PURE__ */ b("div", {
+					J.length > 0 && /* @__PURE__ */ y("div", {
 						className: "flex items-center gap-1.5 px-2 pt-3 pb-1",
-						children: /* @__PURE__ */ b("span", {
+						children: /* @__PURE__ */ y("span", {
 							className: "text-[10px] font-semibold uppercase tracking-wider text-text-secondary",
 							children: A("conversations.tabs.all", "All")
 						})
 					})
-				] }), J.map((e) => /* @__PURE__ */ b(c, {
+				] }), J.map((e) => /* @__PURE__ */ y(c, {
 					conversation: e,
 					isActive: N === e.id,
 					onClick: Y
 				}, e.id))]
 			})
 		})
-	}) : /* @__PURE__ */ b(o, {
+	}) : /* @__PURE__ */ y(o, {
 		permission: s.CONVERSATION_READ,
 		allowUnavailablePermissions: !0,
-		children: /* @__PURE__ */ b("div", {
+		children: /* @__PURE__ */ y("div", {
 			"data-tour": "conversation-list-standalone",
 			className: "flex h-full min-h-0 w-full flex-col bg-bg-surface",
-			children: X ? /* @__PURE__ */ b("div", {
+			children: X ? /* @__PURE__ */ y("div", {
 				className: "px-4 py-8 text-sm text-text-secondary",
 				children: A("conversations.loading", "Loading conversations...")
-			}) : Z ? /* @__PURE__ */ b(S, {
-				icon: /* @__PURE__ */ b(f, {
+			}) : Z ? /* @__PURE__ */ y(x, {
+				icon: /* @__PURE__ */ y(p, {
 					size: 28,
 					className: "text-status-error-text",
 					"aria-hidden": "true"
 				}),
 				title: A("conversations.couldNotLoad", "Could not load conversations"),
 				description: Z.message
-			}) : K.length === 0 ? /* @__PURE__ */ b(S, {
-				icon: $.icon,
+			}) : K.length === 0 ? /* @__PURE__ */ y(S, {
+				illustration: $.illustration,
 				title: $.title,
 				description: $.description
-			}) : /* @__PURE__ */ b("div", {
+			}) : /* @__PURE__ */ y("div", {
 				className: "flex flex-col gap-0.5 px-2 py-2",
-				children: K.map((e) => /* @__PURE__ */ b(c, {
+				children: K.map((e) => /* @__PURE__ */ y(c, {
 					conversation: e,
 					isActive: N === e.id,
 					onClick: Y

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

@@ -1 +1 @@
-{"version":3,"file":"ConversationListPage.js","names":[],"sources":["../../../src/conversations/pages/ConversationListPage.tsx"],"sourcesContent":["import {\n  useDeferredValue,\n  useEffect,\n  useMemo,\n  useState,\n  useCallback,\n} from \"react\";\nimport { useEventBus } from \"@burdenoff/fe-libs/shared/events\";\nimport { useNavigate, useSearchParams } from \"react-router-dom\";\nimport { EmptyState } from \"@burdenoff/fe-libs/ui\";\nimport {\n  Archive,\n  AlertCircle,\n  Hash,\n  MessageCircle,\n  Pin,\n  Users,\n} from \"lucide-react\";\nimport { ConversationRow } from \"../components/ConversationRow\";\nimport {\n  useSearchConversations,\n  useGetConversations,\n} from \"../hooks/useConversationQueries\";\nimport { useConversationStream } from \"../hooks/useMessageSubscriptions\";\nimport { useConversations } from \"../providers/ConversationsProvider\";\nimport { useConversationsStore } from \"../store/conversationsStore\";\nimport type {\n  Conversation,\n  ConversationFilter,\n  ConversationState,\n} from \"../types\";\nimport { PermissionGuard } from \"../components/PermissionGuard\";\nimport { CONVERSATIONS_PERMISSIONS } from \"../constants/permissions\";\nimport { useTr } from \"../utils/i18n\";\nimport { joinPath } from \"../utils/navigation\";\n\n// Default filter shape applied whenever the `?filter=` URL param is absent\n// or unrecognised. Covers every dimension on `ConversationFilter` except\n// `searchQuery` — the text search is independent of URL-driven filters and\n// must not be wiped when the URL flips between filter values.\n//\n// The boolean toggles (hasUnread / isPinned / isMuted) are explicitly set\n// to `undefined` here (rather than omitted). Zustand's `set` merges\n// shallowly — the store's `updateConversationFilter` does\n// `{ ...currentFilter, ...partial }` — so an omitted key would preserve the\n// previous value, leaving a toggle like `hasUnread: true` sticky across a\n// URL that drops the filter param. Typing the constant as\n// `Partial<ConversationFilter>` widens the type so the explicit\n// `undefined` entries are accepted as `boolean | undefined` rather than\n// narrowed to the literal `undefined` under `as const`.\nconst FILTER_DEFAULTS: Partial<ConversationFilter> = {\n  state: \"all\",\n  type: \"all\",\n  visibility: \"all\",\n  hasUnread: undefined,\n  isPinned: undefined,\n  isMuted: undefined,\n};\n\nfunction useDebouncedValue<T>(value: T, delayMs: number): T {\n  const [debouncedValue, setDebouncedValue] = useState(value);\n\n  useEffect(() => {\n    const timeoutId = window.setTimeout(\n      () => setDebouncedValue(value),\n      delayMs,\n    );\n    return () => window.clearTimeout(timeoutId);\n  }, [delayMs, value]);\n\n  return debouncedValue;\n}\n\nexport interface ConversationListPageProps {\n  /**\n   * Filter dimension forced by the parent inbox shell (driven by the\n   * currently active tab). Mutually exclusive with the `?filter=` URL\n   * param. When set, the URL param is ignored and the store filter is\n   * driven by the prop on every change.\n   */\n  forcedFilterParam?: \"channel\" | \"direct\" | \"group\" | \"archived\";\n  /**\n   * When true the page renders bare-list chrome (no own header/search/\n   * filter chips) so it can be embedded inside `InboxLayout`. Defaults to\n   * false for backwards compatibility with the legacy `/conversations/list`\n   * route.\n   */\n  embedded?: boolean;\n}\n\nexport function ConversationListPage({\n  forcedFilterParam,\n  embedded = false,\n}: ConversationListPageProps = {}) {\n  const navigate = useNavigate();\n  const { basePath, onConversationSelect } = useConversations();\n  const bus = useEventBus();\n  const tr = useTr();\n  const {\n    searchQuery,\n    conversationFilter,\n    updateConversationFilter,\n    activeConversationId,\n    setActiveConversationId,\n  } = useConversationsStore();\n  const [searchParams] = useSearchParams();\n  const debouncedSearchQuery = useDebouncedValue(searchQuery, 250);\n  const deferredSearchQuery = useDeferredValue(debouncedSearchQuery);\n  const trimmedSearchQuery = deferredSearchQuery.trim();\n  const isSearchActive = trimmedSearchQuery.length >= 2;\n\n  // Sync URL filter param (?filter=channel|direct|group|archived) to the store\n  // on mount / URL change. When the param is absent or unrecognised, reset\n  // every filter dimension to its module-level default (`FILTER_DEFAULTS`) —\n  // but deliberately do NOT touch `searchQuery`. The list's text search is\n  // independent of URL-driven filters; zeroing it here would wipe in-progress\n  // searches every time the URL flips between filter values or drops the\n  // param entirely.\n  useEffect(() => {\n    const filterParam = forcedFilterParam ?? searchParams.get(\"filter\");\n\n    if (!filterParam) {\n      updateConversationFilter(FILTER_DEFAULTS);\n      return;\n    }\n\n    const filterMap: Record<string, string> = {\n      channel: \"CHANNEL\",\n      direct: \"DIRECT\",\n      group: \"GROUP\",\n      archived: \"ARCHIVED\",\n    };\n\n    const mapped = filterMap[filterParam.toLowerCase()];\n    if (!mapped) {\n      updateConversationFilter(FILTER_DEFAULTS);\n      return;\n    }\n\n    if (mapped === \"ARCHIVED\") {\n      updateConversationFilter({ ...FILTER_DEFAULTS, state: \"ARCHIVED\" });\n    } else {\n      updateConversationFilter({\n        ...FILTER_DEFAULTS,\n        type: mapped as \"CHANNEL\" | \"DIRECT\" | \"GROUP\",\n      });\n    }\n  }, [forcedFilterParam, searchParams, updateConversationFilter]);\n\n  // Map filter.state (\"all\" | \"ACTIVE\" | \"ARCHIVED\" | \"DELETED\") to the\n  // GraphQL `states: [ConversationState!]` filter. When the user is on the\n  // Archived tab we send `states: [ARCHIVED]`; otherwise we omit the filter\n  // so the backend default (ACTIVE only) kicks in.\n  const stateFilter = useMemo<ConversationState[] | undefined>(() => {\n    if (\n      conversationFilter.state === \"all\" ||\n      conversationFilter.state === \"ACTIVE\"\n    ) {\n      return undefined;\n    }\n    return [conversationFilter.state as ConversationState];\n  }, [conversationFilter.state]);\n\n  const {\n    conversations: baseConversations,\n    loading,\n    error,\n  } = useGetConversations({\n    first: 50,\n    types:\n      conversationFilter.type === \"all\" ? undefined : [conversationFilter.type],\n    states: stateFilter,\n    hasUnread: conversationFilter.hasUnread,\n    isPinned: conversationFilter.isPinned,\n  });\n\n  // Live conversation lifecycle stream — keeps the list current without polling.\n  // Apollo cache updates are handled inside the hook (append on add, evict on\n  // delete, normalisation handles updates).\n  useConversationStream();\n\n  const {\n    conversations: searchedConversations,\n    loading: searchLoading,\n    error: searchError,\n  } = useSearchConversations(deferredSearchQuery);\n\n  const conversations = isSearchActive\n    ? searchedConversations\n    : baseConversations;\n\n  // When the BE is queried with states:[ARCHIVED] the inbox tab is \"archived\",\n  // so we skip the client-side state filter to avoid double-filtering.\n  // For the inbox view the BE returns ACTIVE by default; no extra filter\n  // needed here either.\n  const filteredConversations = conversations;\n\n  const pinnedConversations = useMemo(\n    () => filteredConversations.filter((conversation) => conversation.isPinned),\n    [filteredConversations],\n  );\n\n  const unpinnedConversations = useMemo(\n    () =>\n      filteredConversations.filter((conversation) => !conversation.isPinned),\n    [filteredConversations],\n  );\n\n  const handleConversationClick = useCallback(\n    (conversation: Conversation) => {\n      setActiveConversationId(conversation.id);\n      onConversationSelect?.(conversation);\n      bus.emit(\"conversations.conversation.opened\", {\n        conversationId: conversation.id,\n        conversationType: conversation.type,\n      });\n\n      if (conversation.sourceContext?.contextHref) {\n        try {\n          const url = new URL(conversation.sourceContext.contextHref);\n          if (url.origin === window.location.origin) {\n            navigate(`${url.pathname}${url.search}${url.hash}`);\n            return;\n          }\n        } catch {\n          // Fall back to conversation detail below.\n        }\n      }\n\n      navigate(joinPath(basePath || \"/conversations\", conversation.id));\n    },\n    [basePath, bus, navigate, onConversationSelect, setActiveConversationId],\n  );\n\n  const isLoading = loading || searchLoading;\n  const activeError = error ?? searchError;\n  const isArchivedTab =\n    forcedFilterParam === \"archived\" || conversationFilter.state === \"ARCHIVED\";\n\n  // Empty-state copy is tab-aware so users understand why a list is blank.\n  const emptyState = useMemo(() => {\n    if (isSearchActive) {\n      return {\n        title: tr(\"conversations.empty.search.title\", \"No matches\"),\n        description: `${tr(\n          \"conversations.empty.search.description\",\n          \"No conversations matching\",\n        )} \"${trimmedSearchQuery}\"`,\n        icon: <MessageCircle size={28} className=\"text-text-secondary\" />,\n      };\n    }\n    if (isArchivedTab) {\n      return {\n        title: tr(\n          \"conversations.empty.archived.title\",\n          \"No archived conversations\",\n        ),\n        description: tr(\n          \"conversations.empty.archived.description\",\n          \"Archived conversations are hidden from your main inbox. Move conversations here from the row actions menu.\",\n        ),\n        icon: <Archive size={28} className=\"text-text-secondary\" />,\n      };\n    }\n    switch (forcedFilterParam) {\n      case \"direct\":\n        return {\n          title: tr(\n            \"conversations.empty.direct.title\",\n            \"No direct conversations yet\",\n          ),\n          description: tr(\n            \"conversations.empty.direct.description\",\n            \"Start one with a workspace member from the New conversation button above.\",\n          ),\n          icon: <MessageCircle size={28} className=\"text-text-secondary\" />,\n        };\n      case \"group\":\n        return {\n          title: tr(\"conversations.empty.groups.title\", \"Create a group\"),\n          description: tr(\n            \"conversations.empty.groups.description\",\n            \"Groups let you chat with multiple people in one thread. Tap New to start one.\",\n          ),\n          icon: <Users size={28} className=\"text-text-secondary\" />,\n        };\n      case \"channel\":\n        return {\n          title: tr(\n            \"conversations.empty.channels.title\",\n            \"Subscribe to a channel\",\n          ),\n          description: tr(\n            \"conversations.empty.channels.description\",\n            \"Channels are topic-based discussions visible to everyone who joins them.\",\n          ),\n          icon: <Hash size={28} className=\"text-text-secondary\" />,\n        };\n      default:\n        return {\n          title: tr(\"conversations.empty.all.title\", \"No conversations yet\"),\n          description: tr(\n            \"conversations.empty.all.description\",\n            \"Start your first conversation with someone in this workspace.\",\n          ),\n          icon: <MessageCircle size={28} className=\"text-text-secondary\" />,\n        };\n    }\n  }, [\n    forcedFilterParam,\n    isArchivedTab,\n    isSearchActive,\n    tr,\n    trimmedSearchQuery,\n  ]);\n\n  // ─── Embedded mode: bare list, no own chrome (used inside InboxLayout) ───\n  if (embedded) {\n    return (\n      <PermissionGuard\n        permission={CONVERSATIONS_PERMISSIONS.CONVERSATION_READ}\n        allowUnavailablePermissions\n      >\n        <div\n          data-tour=\"conversation-list\"\n          className=\"flex h-full min-h-0 w-full flex-col\"\n          aria-live=\"polite\"\n        >\n          {isLoading ? (\n            <div\n              role=\"status\"\n              className=\"px-4 py-8 text-sm text-text-secondary\"\n            >\n              {tr(\"conversations.loading\", \"Loading conversations...\")}\n            </div>\n          ) : activeError ? (\n            <EmptyState\n              icon={\n                <AlertCircle\n                  size={28}\n                  className=\"text-status-error-text\"\n                  aria-hidden=\"true\"\n                />\n              }\n              title={tr(\n                \"conversations.couldNotLoad\",\n                \"Could not load conversations\",\n              )}\n              description={activeError.message}\n            />\n          ) : filteredConversations.length === 0 ? (\n            <EmptyState\n              icon={emptyState.icon}\n              title={emptyState.title}\n              description={emptyState.description}\n            />\n          ) : (\n            <div\n              data-tour=\"conversation-list-results\"\n              className=\"flex flex-col gap-0.5 px-2 py-2\"\n            >\n              {pinnedConversations.length > 0 && (\n                <>\n                  <div className=\"flex items-center gap-1.5 px-2 pt-2 pb-1\">\n                    <Pin\n                      size={11}\n                      className=\"text-text-secondary\"\n                      aria-hidden=\"true\"\n                    />\n                    <span className=\"text-[10px] font-semibold uppercase tracking-wider text-text-secondary\">\n                      {tr(\"conversations.pinned\", \"Pinned\")}\n                    </span>\n                  </div>\n                  {pinnedConversations.map((conversation) => (\n                    <ConversationRow\n                      key={conversation.id}\n                      conversation={conversation}\n                      isActive={activeConversationId === conversation.id}\n                      onClick={handleConversationClick}\n                    />\n                  ))}\n                  {unpinnedConversations.length > 0 && (\n                    <div className=\"flex items-center gap-1.5 px-2 pt-3 pb-1\">\n                      <span className=\"text-[10px] font-semibold uppercase tracking-wider text-text-secondary\">\n                        {tr(\"conversations.tabs.all\", \"All\")}\n                      </span>\n                    </div>\n                  )}\n                </>\n              )}\n              {unpinnedConversations.map((conversation) => (\n                <ConversationRow\n                  key={conversation.id}\n                  conversation={conversation}\n                  isActive={activeConversationId === conversation.id}\n                  onClick={handleConversationClick}\n                />\n              ))}\n            </div>\n          )}\n        </div>\n      </PermissionGuard>\n    );\n  }\n\n  // ─── Standalone mode (legacy /conversations/list route) ───\n  // Retains the original look but uses semantic tokens.\n  return (\n    <PermissionGuard\n      permission={CONVERSATIONS_PERMISSIONS.CONVERSATION_READ}\n      allowUnavailablePermissions\n    >\n      <div\n        data-tour=\"conversation-list-standalone\"\n        className=\"flex h-full min-h-0 w-full flex-col bg-bg-surface\"\n      >\n        {isLoading ? (\n          <div className=\"px-4 py-8 text-sm text-text-secondary\">\n            {tr(\"conversations.loading\", \"Loading conversations...\")}\n          </div>\n        ) : activeError ? (\n          <EmptyState\n            icon={\n              <AlertCircle\n                size={28}\n                className=\"text-status-error-text\"\n                aria-hidden=\"true\"\n              />\n            }\n            title={tr(\n              \"conversations.couldNotLoad\",\n              \"Could not load conversations\",\n            )}\n            description={activeError.message}\n          />\n        ) : filteredConversations.length === 0 ? (\n          <EmptyState\n            icon={emptyState.icon}\n            title={emptyState.title}\n            description={emptyState.description}\n          />\n        ) : (\n          <div className=\"flex flex-col gap-0.5 px-2 py-2\">\n            {filteredConversations.map((conversation) => (\n              <ConversationRow\n                key={conversation.id}\n                conversation={conversation}\n                isActive={activeConversationId === conversation.id}\n                onClick={handleConversationClick}\n              />\n            ))}\n          </div>\n        )}\n      </div>\n    </PermissionGuard>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"ConversationListPage.js","names":[],"sources":["../../../src/conversations/pages/ConversationListPage.tsx"],"sourcesContent":["import {\n  useDeferredValue,\n  useEffect,\n  useMemo,\n  useState,\n  useCallback,\n} from \"react\";\nimport { useEventBus } from \"@burdenoff/fe-libs/shared/events\";\nimport { useNavigate, useSearchParams } from \"react-router-dom\";\nimport { EmptyState, IllustratedEmptyState } from \"@burdenoff/fe-libs/ui\";\nimport {\n  Archive,\n  AlertCircle,\n  Hash,\n  MessageCircle,\n  Pin,\n  Users,\n} from \"lucide-react\";\nimport { ConversationRow } from \"../components/ConversationRow\";\nimport {\n  useSearchConversations,\n  useGetConversations,\n} from \"../hooks/useConversationQueries\";\nimport { useConversationStream } from \"../hooks/useMessageSubscriptions\";\nimport { useConversations } from \"../providers/ConversationsProvider\";\nimport { useConversationsStore } from \"../store/conversationsStore\";\nimport type {\n  Conversation,\n  ConversationFilter,\n  ConversationState,\n} from \"../types\";\nimport { PermissionGuard } from \"../components/PermissionGuard\";\nimport { CONVERSATIONS_PERMISSIONS } from \"../constants/permissions\";\nimport { useTr } from \"../utils/i18n\";\nimport { joinPath } from \"../utils/navigation\";\n\n// Default filter shape applied whenever the `?filter=` URL param is absent\n// or unrecognised. Covers every dimension on `ConversationFilter` except\n// `searchQuery` — the text search is independent of URL-driven filters and\n// must not be wiped when the URL flips between filter values.\n//\n// The boolean toggles (hasUnread / isPinned / isMuted) are explicitly set\n// to `undefined` here (rather than omitted). Zustand's `set` merges\n// shallowly — the store's `updateConversationFilter` does\n// `{ ...currentFilter, ...partial }` — so an omitted key would preserve the\n// previous value, leaving a toggle like `hasUnread: true` sticky across a\n// URL that drops the filter param. Typing the constant as\n// `Partial<ConversationFilter>` widens the type so the explicit\n// `undefined` entries are accepted as `boolean | undefined` rather than\n// narrowed to the literal `undefined` under `as const`.\nconst FILTER_DEFAULTS: Partial<ConversationFilter> = {\n  state: \"all\",\n  type: \"all\",\n  visibility: \"all\",\n  hasUnread: undefined,\n  isPinned: undefined,\n  isMuted: undefined,\n};\n\nfunction useDebouncedValue<T>(value: T, delayMs: number): T {\n  const [debouncedValue, setDebouncedValue] = useState(value);\n\n  useEffect(() => {\n    const timeoutId = window.setTimeout(\n      () => setDebouncedValue(value),\n      delayMs,\n    );\n    return () => window.clearTimeout(timeoutId);\n  }, [delayMs, value]);\n\n  return debouncedValue;\n}\n\nexport interface ConversationListPageProps {\n  /**\n   * Filter dimension forced by the parent inbox shell (driven by the\n   * currently active tab). Mutually exclusive with the `?filter=` URL\n   * param. When set, the URL param is ignored and the store filter is\n   * driven by the prop on every change.\n   */\n  forcedFilterParam?: \"channel\" | \"direct\" | \"group\" | \"archived\";\n  /**\n   * When true the page renders bare-list chrome (no own header/search/\n   * filter chips) so it can be embedded inside `InboxLayout`. Defaults to\n   * false for backwards compatibility with the legacy `/conversations/list`\n   * route.\n   */\n  embedded?: boolean;\n}\n\nexport function ConversationListPage({\n  forcedFilterParam,\n  embedded = false,\n}: ConversationListPageProps = {}) {\n  const navigate = useNavigate();\n  const { basePath, onConversationSelect } = useConversations();\n  const bus = useEventBus();\n  const tr = useTr();\n  const {\n    searchQuery,\n    conversationFilter,\n    updateConversationFilter,\n    activeConversationId,\n    setActiveConversationId,\n  } = useConversationsStore();\n  const [searchParams] = useSearchParams();\n  const debouncedSearchQuery = useDebouncedValue(searchQuery, 250);\n  const deferredSearchQuery = useDeferredValue(debouncedSearchQuery);\n  const trimmedSearchQuery = deferredSearchQuery.trim();\n  const isSearchActive = trimmedSearchQuery.length >= 2;\n\n  // Sync URL filter param (?filter=channel|direct|group|archived) to the store\n  // on mount / URL change. When the param is absent or unrecognised, reset\n  // every filter dimension to its module-level default (`FILTER_DEFAULTS`) —\n  // but deliberately do NOT touch `searchQuery`. The list's text search is\n  // independent of URL-driven filters; zeroing it here would wipe in-progress\n  // searches every time the URL flips between filter values or drops the\n  // param entirely.\n  useEffect(() => {\n    const filterParam = forcedFilterParam ?? searchParams.get(\"filter\");\n\n    if (!filterParam) {\n      updateConversationFilter(FILTER_DEFAULTS);\n      return;\n    }\n\n    const filterMap: Record<string, string> = {\n      channel: \"CHANNEL\",\n      direct: \"DIRECT\",\n      group: \"GROUP\",\n      archived: \"ARCHIVED\",\n    };\n\n    const mapped = filterMap[filterParam.toLowerCase()];\n    if (!mapped) {\n      updateConversationFilter(FILTER_DEFAULTS);\n      return;\n    }\n\n    if (mapped === \"ARCHIVED\") {\n      updateConversationFilter({ ...FILTER_DEFAULTS, state: \"ARCHIVED\" });\n    } else {\n      updateConversationFilter({\n        ...FILTER_DEFAULTS,\n        type: mapped as \"CHANNEL\" | \"DIRECT\" | \"GROUP\",\n      });\n    }\n  }, [forcedFilterParam, searchParams, updateConversationFilter]);\n\n  // Map filter.state (\"all\" | \"ACTIVE\" | \"ARCHIVED\" | \"DELETED\") to the\n  // GraphQL `states: [ConversationState!]` filter. When the user is on the\n  // Archived tab we send `states: [ARCHIVED]`; otherwise we omit the filter\n  // so the backend default (ACTIVE only) kicks in.\n  const stateFilter = useMemo<ConversationState[] | undefined>(() => {\n    if (\n      conversationFilter.state === \"all\" ||\n      conversationFilter.state === \"ACTIVE\"\n    ) {\n      return undefined;\n    }\n    return [conversationFilter.state as ConversationState];\n  }, [conversationFilter.state]);\n\n  const {\n    conversations: baseConversations,\n    loading,\n    error,\n  } = useGetConversations({\n    first: 50,\n    types:\n      conversationFilter.type === \"all\" ? undefined : [conversationFilter.type],\n    states: stateFilter,\n    hasUnread: conversationFilter.hasUnread,\n    isPinned: conversationFilter.isPinned,\n  });\n\n  // Live conversation lifecycle stream — keeps the list current without polling.\n  // Apollo cache updates are handled inside the hook (append on add, evict on\n  // delete, normalisation handles updates).\n  useConversationStream();\n\n  const {\n    conversations: searchedConversations,\n    loading: searchLoading,\n    error: searchError,\n  } = useSearchConversations(deferredSearchQuery);\n\n  const conversations = isSearchActive\n    ? searchedConversations\n    : baseConversations;\n\n  // When the BE is queried with states:[ARCHIVED] the inbox tab is \"archived\",\n  // so we skip the client-side state filter to avoid double-filtering.\n  // For the inbox view the BE returns ACTIVE by default; no extra filter\n  // needed here either.\n  const filteredConversations = conversations;\n\n  const pinnedConversations = useMemo(\n    () => filteredConversations.filter((conversation) => conversation.isPinned),\n    [filteredConversations],\n  );\n\n  const unpinnedConversations = useMemo(\n    () =>\n      filteredConversations.filter((conversation) => !conversation.isPinned),\n    [filteredConversations],\n  );\n\n  const handleConversationClick = useCallback(\n    (conversation: Conversation) => {\n      setActiveConversationId(conversation.id);\n      onConversationSelect?.(conversation);\n      bus.emit(\"conversations.conversation.opened\", {\n        conversationId: conversation.id,\n        conversationType: conversation.type,\n      });\n\n      if (conversation.sourceContext?.contextHref) {\n        try {\n          const url = new URL(conversation.sourceContext.contextHref);\n          if (url.origin === window.location.origin) {\n            navigate(`${url.pathname}${url.search}${url.hash}`);\n            return;\n          }\n        } catch {\n          // Fall back to conversation detail below.\n        }\n      }\n\n      navigate(joinPath(basePath || \"/conversations\", conversation.id));\n    },\n    [basePath, bus, navigate, onConversationSelect, setActiveConversationId],\n  );\n\n  const isLoading = loading || searchLoading;\n  const activeError = error ?? searchError;\n  const isArchivedTab =\n    forcedFilterParam === \"archived\" || conversationFilter.state === \"ARCHIVED\";\n\n  // Empty-state copy is tab-aware so users understand why a list is blank.\n  const emptyState = useMemo(() => {\n    if (isSearchActive) {\n      return {\n        title: tr(\"conversations.empty.search.title\", \"No matches\"),\n        description: `${tr(\n          \"conversations.empty.search.description\",\n          \"No conversations matching\",\n        )} \"${trimmedSearchQuery}\"`,\n        icon: <MessageCircle size={28} className=\"text-text-secondary\" />,\n        illustration: \"empty-search\",\n      };\n    }\n    if (isArchivedTab) {\n      return {\n        title: tr(\n          \"conversations.empty.archived.title\",\n          \"No archived conversations\",\n        ),\n        description: tr(\n          \"conversations.empty.archived.description\",\n          \"Archived conversations are hidden from your main inbox. Move conversations here from the row actions menu.\",\n        ),\n        icon: <Archive size={28} className=\"text-text-secondary\" />,\n        illustration: \"empty-files\",\n      };\n    }\n    switch (forcedFilterParam) {\n      case \"direct\":\n        return {\n          title: tr(\n            \"conversations.empty.direct.title\",\n            \"No direct conversations yet\",\n          ),\n          description: tr(\n            \"conversations.empty.direct.description\",\n            \"Start one with a workspace member from the New conversation button above.\",\n          ),\n          icon: <MessageCircle size={28} className=\"text-text-secondary\" />,\n          illustration: \"empty-vibes\",\n        };\n      case \"group\":\n        return {\n          title: tr(\"conversations.empty.groups.title\", \"Create a group\"),\n          description: tr(\n            \"conversations.empty.groups.description\",\n            \"Groups let you chat with multiple people in one thread. Tap New to start one.\",\n          ),\n          icon: <Users size={28} className=\"text-text-secondary\" />,\n          illustration: \"empty-people\",\n        };\n      case \"channel\":\n        return {\n          title: tr(\n            \"conversations.empty.channels.title\",\n            \"Subscribe to a channel\",\n          ),\n          description: tr(\n            \"conversations.empty.channels.description\",\n            \"Channels are topic-based discussions visible to everyone who joins them.\",\n          ),\n          icon: <Hash size={28} className=\"text-text-secondary\" />,\n          illustration: \"empty-vibes\",\n        };\n      default:\n        return {\n          title: tr(\"conversations.empty.all.title\", \"No conversations yet\"),\n          description: tr(\n            \"conversations.empty.all.description\",\n            \"Start your first conversation with someone in this workspace.\",\n          ),\n          icon: <MessageCircle size={28} className=\"text-text-secondary\" />,\n          illustration: \"empty-vibes\",\n        };\n    }\n  }, [\n    forcedFilterParam,\n    isArchivedTab,\n    isSearchActive,\n    tr,\n    trimmedSearchQuery,\n  ]);\n\n  // ─── Embedded mode: bare list, no own chrome (used inside InboxLayout) ───\n  if (embedded) {\n    return (\n      <PermissionGuard\n        permission={CONVERSATIONS_PERMISSIONS.CONVERSATION_READ}\n        allowUnavailablePermissions\n      >\n        <div\n          data-tour=\"conversation-list\"\n          className=\"flex h-full min-h-0 w-full flex-col\"\n          aria-live=\"polite\"\n        >\n          {isLoading ? (\n            <div\n              role=\"status\"\n              className=\"px-4 py-8 text-sm text-text-secondary\"\n            >\n              {tr(\"conversations.loading\", \"Loading conversations...\")}\n            </div>\n          ) : activeError ? (\n            <EmptyState\n              icon={\n                <AlertCircle\n                  size={28}\n                  className=\"text-status-error-text\"\n                  aria-hidden=\"true\"\n                />\n              }\n              title={tr(\n                \"conversations.couldNotLoad\",\n                \"Could not load conversations\",\n              )}\n              description={activeError.message}\n            />\n          ) : filteredConversations.length === 0 ? (\n            <IllustratedEmptyState\n              illustration={emptyState.illustration}\n              title={emptyState.title}\n              description={emptyState.description}\n            />\n          ) : (\n            <div\n              data-tour=\"conversation-list-results\"\n              className=\"flex flex-col gap-0.5 px-2 py-2\"\n            >\n              {pinnedConversations.length > 0 && (\n                <>\n                  <div className=\"flex items-center gap-1.5 px-2 pt-2 pb-1\">\n                    <Pin\n                      size={11}\n                      className=\"text-text-secondary\"\n                      aria-hidden=\"true\"\n                    />\n                    <span className=\"text-[10px] font-semibold uppercase tracking-wider text-text-secondary\">\n                      {tr(\"conversations.pinned\", \"Pinned\")}\n                    </span>\n                  </div>\n                  {pinnedConversations.map((conversation) => (\n                    <ConversationRow\n                      key={conversation.id}\n                      conversation={conversation}\n                      isActive={activeConversationId === conversation.id}\n                      onClick={handleConversationClick}\n                    />\n                  ))}\n                  {unpinnedConversations.length > 0 && (\n                    <div className=\"flex items-center gap-1.5 px-2 pt-3 pb-1\">\n                      <span className=\"text-[10px] font-semibold uppercase tracking-wider text-text-secondary\">\n                        {tr(\"conversations.tabs.all\", \"All\")}\n                      </span>\n                    </div>\n                  )}\n                </>\n              )}\n              {unpinnedConversations.map((conversation) => (\n                <ConversationRow\n                  key={conversation.id}\n                  conversation={conversation}\n                  isActive={activeConversationId === conversation.id}\n                  onClick={handleConversationClick}\n                />\n              ))}\n            </div>\n          )}\n        </div>\n      </PermissionGuard>\n    );\n  }\n\n  // ─── Standalone mode (legacy /conversations/list route) ───\n  // Retains the original look but uses semantic tokens.\n  return (\n    <PermissionGuard\n      permission={CONVERSATIONS_PERMISSIONS.CONVERSATION_READ}\n      allowUnavailablePermissions\n    >\n      <div\n        data-tour=\"conversation-list-standalone\"\n        className=\"flex h-full min-h-0 w-full flex-col bg-bg-surface\"\n      >\n        {isLoading ? (\n          <div className=\"px-4 py-8 text-sm text-text-secondary\">\n            {tr(\"conversations.loading\", \"Loading conversations...\")}\n          </div>\n        ) : activeError ? (\n          <EmptyState\n            icon={\n              <AlertCircle\n                size={28}\n                className=\"text-status-error-text\"\n                aria-hidden=\"true\"\n              />\n            }\n            title={tr(\n              \"conversations.couldNotLoad\",\n              \"Could not load conversations\",\n            )}\n            description={activeError.message}\n          />\n        ) : filteredConversations.length === 0 ? (\n          <IllustratedEmptyState\n            illustration={emptyState.illustration}\n            title={emptyState.title}\n            description={emptyState.description}\n          />\n        ) : (\n          <div className=\"flex flex-col gap-0.5 px-2 py-2\">\n            {filteredConversations.map((conversation) => (\n              <ConversationRow\n                key={conversation.id}\n                conversation={conversation}\n                isActive={activeConversationId === conversation.id}\n                onClick={handleConversationClick}\n              />\n            ))}\n          </div>\n        )}\n      </div>\n    </PermissionGuard>\n  );\n}\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@burdenoff/microfe-conversations",
-  "version": "2026.625.1",
+  "version": "2026.625.2",
   "description": "Burdenoff Conversations Microfrontend - Complete messaging and conversation interface",
   "type": "module",
   "files": [
@@ -43,7 +43,7 @@
   },
   "dependencies": {
     "@apollo/client": "^4.0.11",
-    "@burdenoff/fe-libs": "2026.625.2",
+    "@burdenoff/fe-libs": "2026.625.3",
     "@tanstack/react-query": "^5.90.16",
     "clsx": "^2.1.1",
     "graphql": "^16.10.0",