@burdenoff/microfe-conversations 2026.828.1 → 2026.830.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/dist/conversations/components/ConversationRow.js +81 -81
  2. package/dist/conversations/components/ConversationRow.js.map +1 -1
  3. package/dist/conversations/components/MessageBubble.js +116 -113
  4. package/dist/conversations/components/MessageBubble.js.map +1 -1
  5. package/dist/conversations/components/PermissionGuard.js +13 -16
  6. package/dist/conversations/components/PermissionGuard.js.map +1 -1
  7. package/dist/conversations/index.js +1 -0
  8. package/dist/conversations/pages/ConversationAdminPages.js +64 -79
  9. package/dist/conversations/pages/ConversationAdminPages.js.map +1 -1
  10. package/dist/conversations/pages/ConversationDetailPage.js +120 -120
  11. package/dist/conversations/pages/ConversationDetailPage.js.map +1 -1
  12. package/dist/conversations/utils/i18n.js +3 -3
  13. package/dist/conversations/utils/i18n.js.map +1 -1
  14. package/dist/index.js +2 -1
  15. package/dist/translations/en.js +319 -0
  16. package/dist/translations/en.js.map +1 -0
  17. package/package.json +1 -1
package/dist/conversations/components/ConversationRow.js CHANGED
@@ -1,9 +1,9 @@
1
- import { cn as e } from "../utils/cn.js";
2
- import { useConversationActions as t } from "../hooks/useConversationQueries.js";
3
- import { memo as n, useState as r } from "react";
4
- import { ArchiveIcon as i, ArchiveRestore as a, Bell as o, BellOff as s, Bot as c, Hash as l, HeadphonesIcon as u, LogOut as d, Megaphone as f, MessageCircle as p, MoreHorizontal as m, Pin as h, PinOff as g, Users as _, VolumeX as v } from "lucide-react";
5
- import { Fragment as y, jsx as b, jsxs as x } from "react/jsx-runtime";
6
- import { useI18n as S } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
1
+ import { useTr as e } from "../utils/i18n.js";
2
+ import { cn as t } from "../utils/cn.js";
3
+ import { useConversationActions as n } from "../hooks/useConversationQueries.js";
4
+ import { memo as r, useState as i } from "react";
5
+ import { ArchiveIcon as a, ArchiveRestore as o, Bell as s, BellOff as c, Bot as l, Hash as u, HeadphonesIcon as d, LogOut as f, Megaphone as p, MessageCircle as m, MoreHorizontal as h, Pin as g, PinOff as _, Users as v, VolumeX as y } from "lucide-react";
6
+ import { Fragment as b, jsx as x, jsxs as S } from "react/jsx-runtime";
7
7
  import { DropdownMenu as C, DropdownMenuContent as w, DropdownMenuItem as T, DropdownMenuSeparator as E, DropdownMenuTrigger as D } from "@burdenoff/fe-libs/ui";
8
8
  //#region src/conversations/components/ConversationRow.tsx
9
9
  function O({ type: e, size: t = 16, className: n }) {
@@ -12,19 +12,19 @@ function O({ type: e, size: t = 16, className: n }) {
12
12
  className: n
13
13
  };
14
14
  switch (e) {
15
- case "DIRECT": return /* @__PURE__ */ b(p, { ...r });
16
- case "GROUP": return /* @__PURE__ */ b(_, { ...r });
17
- case "CHANNEL": return /* @__PURE__ */ b(l, { ...r });
15
+ case "DIRECT": return /* @__PURE__ */ x(m, { ...r });
16
+ case "GROUP": return /* @__PURE__ */ x(v, { ...r });
17
+ case "CHANNEL": return /* @__PURE__ */ x(u, { ...r });
18
18
  case "BROADCAST":
19
- case "ANNOUNCEMENT": return /* @__PURE__ */ b(f, { ...r });
20
- case "BOT": return /* @__PURE__ */ b(c, { ...r });
21
- case "SUPPORT": return /* @__PURE__ */ b(u, { ...r });
22
- default: return /* @__PURE__ */ b(p, { ...r });
19
+ case "ANNOUNCEMENT": return /* @__PURE__ */ x(p, { ...r });
20
+ case "BOT": return /* @__PURE__ */ x(l, { ...r });
21
+ case "SUPPORT": return /* @__PURE__ */ x(d, { ...r });
22
+ default: return /* @__PURE__ */ x(m, { ...r });
23
23
  }
24
24
  }
25
25
  function k(e, t) {
26
26
  let n = /* @__PURE__ */ new Date(), r = new Date(e), i = n.getTime() - r.getTime(), a = Math.floor(i / 1e3 / 60), o = Math.floor(a / 60), s = Math.floor(o / 24);
27
- return a < 1 ? t.now : a < 60 ? `${a}m` : o < 24 ? `${o}h` : s === 1 ? t.yesterday : s < 7 ? `${s}d` : r.toLocaleDateString(void 0, {
27
+ return a < 1 ? t.now : a < 60 ? t.minutesAgo.replace("{{count}}", String(a)) : o < 24 ? t.hoursAgo.replace("{{count}}", String(o)) : s === 1 ? t.yesterday : s < 7 ? t.daysAgo.replace("{{count}}", String(s)) : r.toLocaleDateString(void 0, {
28
28
  month: "short",
29
29
  day: "numeric"
30
30
  });
@@ -32,137 +32,137 @@ function k(e, t) {
32
32
  function A(e) {
33
33
  return e.split(" ").slice(0, 2).map((e) => e[0]).join("").toUpperCase();
34
34
  }
35
- var j = n(function({ conversation: n, isActive: c = !1, onClick: u, onLeave: f }) {
36
- let { title: p, type: j, state: M, lastMessage: N, unreadCount: P, isPinned: F, isMuted: I, memberCount: L, updatedAt: R, avatar: z } = n, B = P > 0, V = M === "ARCHIVED", { t: H } = S(), U = (e, t) => {
37
- let n = H(e);
38
- return n === e ? t : n;
39
- }, W = {
40
- now: U("conversations.now", "now"),
41
- yesterday: U("conversations.yesterday", "Yesterday")
42
- }, [G, K] = r(!1), { archiveConversation: q, unarchiveConversation: J, pinConversation: Y, unpinConversation: X, muteConversation: Z, unmuteConversation: Q } = t(), $ = (e) => {
35
+ var j = r(function({ conversation: r, isActive: l = !1, onClick: d, onLeave: p }) {
36
+ let { title: m, type: j, state: M, lastMessage: N, unreadCount: P, isPinned: F, isMuted: I, memberCount: L, updatedAt: R, avatar: z } = r, B = P > 0, V = M === "ARCHIVED", H = e(), U = {
37
+ now: H("conversations.now", "now"),
38
+ yesterday: H("conversations.yesterday", "Yesterday"),
39
+ minutesAgo: H("conversations.time.minutesAgo", "{{count}}m"),
40
+ hoursAgo: H("conversations.time.hoursAgo", "{{count}}h"),
41
+ daysAgo: H("conversations.time.daysAgo", "{{count}}d")
42
+ }, [W, G] = i(!1), { archiveConversation: K, unarchiveConversation: q, pinConversation: J, unpinConversation: Y, muteConversation: X, unmuteConversation: Z } = n(), Q = (e) => {
43
43
  e.stopPropagation();
44
44
  };
45
- return /* @__PURE__ */ x("div", {
45
+ return /* @__PURE__ */ S("div", {
46
46
  "data-tour": "conversation-row",
47
- className: e("group relative flex w-full min-w-0 items-start gap-3 rounded-md px-3 py-2.5 transition-colors", "cursor-pointer select-none", c ? "bg-bg-sunken border-l-2 border-l-action-primary-bg" : "border-l-2 border-l-transparent hover:bg-action-ghost-bg-hover", B && !c && "bg-bg-elevated/40"),
47
+ className: t("group relative flex w-full min-w-0 items-start gap-3 rounded-md px-3 py-2.5 transition-colors", "cursor-pointer select-none", l ? "bg-bg-sunken border-l-2 border-l-action-primary-bg" : "border-l-2 border-l-transparent hover:bg-action-ghost-bg-hover", B && !l && "bg-bg-elevated/40"),
48
48
  role: "button",
49
49
  tabIndex: 0,
50
- onClick: () => u?.(n),
50
+ onClick: () => d?.(r),
51
51
  onKeyDown: (e) => {
52
- (e.key === "Enter" || e.key === " ") && (e.preventDefault(), u?.(n));
52
+ (e.key === "Enter" || e.key === " ") && (e.preventDefault(), d?.(r));
53
53
  },
54
- "aria-label": U("conversations.openConversation", "Open conversation") + ": " + p,
54
+ "aria-label": H("conversations.openConversation", "Open conversation") + ": " + m,
55
55
  children: [
56
- /* @__PURE__ */ b("div", {
57
- className: e("flex-shrink-0 flex h-9 w-9 items-center justify-center rounded-full text-xs font-semibold overflow-hidden", j === "DIRECT" && "bg-status-info-bg-subtle text-status-info-text", j === "CHANNEL" && "bg-status-success-bg-subtle text-status-success-text", (j === "GROUP" || j === "BROADCAST" || j === "ANNOUNCEMENT" || j === "BOT" || j === "SUPPORT") && "bg-bg-sunken text-text-primary"),
56
+ /* @__PURE__ */ x("div", {
57
+ className: t("flex-shrink-0 flex h-9 w-9 items-center justify-center rounded-full text-xs font-semibold overflow-hidden", j === "DIRECT" && "bg-status-info-bg-subtle text-status-info-text", j === "CHANNEL" && "bg-status-success-bg-subtle text-status-success-text", (j === "GROUP" || j === "BROADCAST" || j === "ANNOUNCEMENT" || j === "BOT" || j === "SUPPORT") && "bg-bg-sunken text-text-primary"),
58
58
  "aria-hidden": "true",
59
- children: z ? /* @__PURE__ */ b("img", {
59
+ children: z ? /* @__PURE__ */ x("img", {
60
60
  src: z,
61
61
  alt: "",
62
62
  className: "h-full w-full object-cover"
63
- }) : j === "DIRECT" ? A(p) : j === "CHANNEL" ? /* @__PURE__ */ b(l, { size: 16 }) : /* @__PURE__ */ b(O, {
63
+ }) : j === "DIRECT" ? A(m) : j === "CHANNEL" ? /* @__PURE__ */ x(u, { size: 16 }) : /* @__PURE__ */ x(O, {
64
64
  type: j,
65
65
  size: 16
66
66
  })
67
67
  }),
68
- /* @__PURE__ */ x("div", {
68
+ /* @__PURE__ */ S("div", {
69
69
  className: "flex min-w-0 flex-1 flex-col gap-0.5",
70
- children: [/* @__PURE__ */ x("div", {
70
+ children: [/* @__PURE__ */ S("div", {
71
71
  className: "flex items-center justify-between gap-2",
72
- children: [/* @__PURE__ */ x("div", {
72
+ children: [/* @__PURE__ */ S("div", {
73
73
  className: "flex min-w-0 items-center gap-1.5",
74
74
  children: [
75
- /* @__PURE__ */ b("span", {
76
- className: e("truncate text-sm", B ? "font-semibold text-text-primary" : "font-medium text-text-primary"),
77
- children: p
75
+ /* @__PURE__ */ x("span", {
76
+ className: t("truncate text-sm", B ? "font-semibold text-text-primary" : "font-medium text-text-primary"),
77
+ children: m
78
78
  }),
79
- F && /* @__PURE__ */ b(h, {
79
+ F && /* @__PURE__ */ x(g, {
80
80
  size: 11,
81
81
  className: "flex-shrink-0 text-text-secondary",
82
- "aria-label": U("conversations.pinnedLabel", "Pinned")
82
+ "aria-label": H("conversations.pinnedLabel", "Pinned")
83
83
  }),
84
- I && /* @__PURE__ */ b(v, {
84
+ I && /* @__PURE__ */ x(y, {
85
85
  size: 11,
86
86
  className: "flex-shrink-0 text-text-secondary",
87
- "aria-label": U("conversations.mutedLabel", "Muted")
87
+ "aria-label": H("conversations.mutedLabel", "Muted")
88
88
  })
89
89
  ]
90
- }), /* @__PURE__ */ b("span", {
91
- className: e("flex-shrink-0 text-[11px]", B ? "font-medium text-action-primary-bg" : "text-text-secondary"),
92
- children: k(N?.createdAt ?? R, W)
90
+ }), /* @__PURE__ */ x("span", {
91
+ className: t("flex-shrink-0 text-[11px]", B ? "font-medium text-action-primary-bg" : "text-text-secondary"),
92
+ children: k(N?.createdAt ?? R, U)
93
93
  })]
94
- }), /* @__PURE__ */ x("div", {
94
+ }), /* @__PURE__ */ S("div", {
95
95
  className: "flex items-center justify-between gap-2",
96
- children: [/* @__PURE__ */ b("p", {
97
- className: e("min-w-0 truncate break-all text-xs", B ? "text-text-primary/80" : "text-text-secondary"),
98
- children: N ? /* @__PURE__ */ x(y, { children: [N.sender.name && /* @__PURE__ */ x("span", {
96
+ children: [/* @__PURE__ */ x("p", {
97
+ className: t("min-w-0 truncate break-all text-xs", B ? "text-text-primary/80" : "text-text-secondary"),
98
+ children: N ? /* @__PURE__ */ S(b, { children: [N.sender.name && /* @__PURE__ */ S("span", {
99
99
  className: "font-medium",
100
100
  children: [N.sender.name, ": "]
101
- }), N.content || U("conversations.sentAttachment", "Sent an attachment")] }) : /* @__PURE__ */ b("span", {
101
+ }), N.content || H("conversations.sentAttachment", "Sent an attachment")] }) : /* @__PURE__ */ x("span", {
102
102
  className: "italic",
103
- children: U("conversations.noMessages", "No messages yet")
103
+ children: H("conversations.noMessages", "No messages yet")
104
104
  })
105
- }), /* @__PURE__ */ x("div", {
105
+ }), /* @__PURE__ */ S("div", {
106
106
  className: "flex flex-shrink-0 items-center gap-1.5",
107
- children: [j !== "DIRECT" && /* @__PURE__ */ x("span", {
107
+ children: [j !== "DIRECT" && /* @__PURE__ */ S("span", {
108
108
  className: "inline-flex items-center gap-0.5 text-[10px] text-text-secondary",
109
- "aria-label": `${L} ${U("conversations.membersLabel", "members")}`,
110
- children: [/* @__PURE__ */ b(_, {
109
+ "aria-label": `${L} ${H("conversations.membersLabel", "members")}`,
110
+ children: [/* @__PURE__ */ x(v, {
111
111
  size: 10,
112
112
  "aria-hidden": "true"
113
113
  }), L]
114
- }), B && /* @__PURE__ */ b("span", {
114
+ }), B && /* @__PURE__ */ x("span", {
115
115
  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",
116
- "aria-label": `${P} ${U("conversations.unreadCountLabel", "unread")}`,
116
+ "aria-label": `${P} ${H("conversations.unreadCountLabel", "unread")}`,
117
117
  children: P > 99 ? "99+" : P
118
118
  })]
119
119
  })]
120
120
  })]
121
121
  }),
122
- /* @__PURE__ */ x(C, {
123
- open: G,
124
- onOpenChange: K,
125
- children: [/* @__PURE__ */ b(D, {
122
+ /* @__PURE__ */ S(C, {
123
+ open: W,
124
+ onOpenChange: G,
125
+ children: [/* @__PURE__ */ x(D, {
126
126
  asChild: !0,
127
- children: /* @__PURE__ */ b("button", {
127
+ children: /* @__PURE__ */ x("button", {
128
128
  type: "button",
129
- onClick: $,
130
- onKeyDown: $,
131
- "aria-label": U("conversations.rowMenuLabel", "Conversation actions"),
132
- className: e("absolute right-2 top-2 flex h-7 w-7 items-center justify-center rounded-md transition-opacity", "text-text-secondary hover:bg-action-ghost-bg-hover hover:text-text-primary", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-action-primary-border", G ? "opacity-100" : "opacity-0 group-hover:opacity-100 group-focus-within:opacity-100"),
133
- children: /* @__PURE__ */ b(m, {
129
+ onClick: Q,
130
+ onKeyDown: Q,
131
+ "aria-label": H("conversations.rowMenuLabel", "Conversation actions"),
132
+ className: t("absolute right-2 top-2 flex h-7 w-7 items-center justify-center rounded-md transition-opacity", "text-text-secondary hover:bg-action-ghost-bg-hover hover:text-text-primary", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-action-primary-border", W ? "opacity-100" : "opacity-0 group-hover:opacity-100 group-focus-within:opacity-100"),
133
+ children: /* @__PURE__ */ x(h, {
134
134
  size: 14,
135
135
  "aria-hidden": "true"
136
136
  })
137
137
  })
138
- }), /* @__PURE__ */ x(w, {
138
+ }), /* @__PURE__ */ S(w, {
139
139
  align: "end",
140
140
  className: "min-w-[180px]",
141
- onClick: $,
141
+ onClick: Q,
142
142
  children: [
143
- /* @__PURE__ */ b(T, {
143
+ /* @__PURE__ */ x(T, {
144
144
  onSelect: () => {
145
- F ? X(n.id) : Y(n.id);
145
+ F ? Y(r.id) : J(r.id);
146
146
  },
147
- children: F ? /* @__PURE__ */ x(y, { children: [/* @__PURE__ */ b(g, { size: 14 }), U("conversations.unpin", "Unpin")] }) : /* @__PURE__ */ x(y, { children: [/* @__PURE__ */ b(h, { size: 14 }), U("conversations.pin", "Pin")] })
147
+ children: F ? /* @__PURE__ */ S(b, { children: [/* @__PURE__ */ x(_, { size: 14 }), H("conversations.unpin", "Unpin")] }) : /* @__PURE__ */ S(b, { children: [/* @__PURE__ */ x(g, { size: 14 }), H("conversations.pin", "Pin")] })
148
148
  }),
149
- /* @__PURE__ */ b(T, {
149
+ /* @__PURE__ */ x(T, {
150
150
  onSelect: () => {
151
- I ? Q(n.id) : Z(n.id);
151
+ I ? Z(r.id) : X(r.id);
152
152
  },
153
- children: I ? /* @__PURE__ */ x(y, { children: [/* @__PURE__ */ b(o, { size: 14 }), U("conversations.unmute", "Unmute")] }) : /* @__PURE__ */ x(y, { children: [/* @__PURE__ */ b(s, { size: 14 }), U("conversations.mute", "Mute")] })
153
+ children: I ? /* @__PURE__ */ S(b, { children: [/* @__PURE__ */ x(s, { size: 14 }), H("conversations.unmute", "Unmute")] }) : /* @__PURE__ */ S(b, { children: [/* @__PURE__ */ x(c, { size: 14 }), H("conversations.mute", "Mute")] })
154
154
  }),
155
- /* @__PURE__ */ b(E, {}),
156
- /* @__PURE__ */ b(T, {
155
+ /* @__PURE__ */ x(E, {}),
156
+ /* @__PURE__ */ x(T, {
157
157
  onSelect: () => {
158
- V ? J(n.id) : q(n.id);
158
+ V ? q(r.id) : K(r.id);
159
159
  },
160
- children: V ? /* @__PURE__ */ x(y, { children: [/* @__PURE__ */ b(a, { size: 14 }), U("conversations.unarchive", "Unarchive")] }) : /* @__PURE__ */ x(y, { children: [/* @__PURE__ */ b(i, { size: 14 }), U("conversations.archive", "Archive")] })
160
+ children: V ? /* @__PURE__ */ S(b, { children: [/* @__PURE__ */ x(o, { size: 14 }), H("conversations.unarchive", "Unarchive")] }) : /* @__PURE__ */ S(b, { children: [/* @__PURE__ */ x(a, { size: 14 }), H("conversations.archive", "Archive")] })
161
161
  }),
162
- (j === "GROUP" || j === "CHANNEL") && f && /* @__PURE__ */ x(y, { children: [/* @__PURE__ */ b(E, {}), /* @__PURE__ */ x(T, {
163
- onSelect: () => f(n),
162
+ (j === "GROUP" || j === "CHANNEL") && p && /* @__PURE__ */ S(b, { children: [/* @__PURE__ */ x(E, {}), /* @__PURE__ */ S(T, {
163
+ onSelect: () => p(r),
164
164
  className: "text-status-error-text focus:text-status-error-text",
165
- children: [/* @__PURE__ */ b(d, { size: 14 }), U("conversations.leave", "Leave")]
165
+ children: [/* @__PURE__ */ x(f, { size: 14 }), H("conversations.leave", "Leave")]
166
166
  })] })
167
167
  ]
168
168
  })]
package/dist/conversations/components/ConversationRow.js.map CHANGED
@@ -1 +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 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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"}
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 { cn } from \"../utils/cn\";\nimport { useTr } from \"../utils/i18n\";\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: {\n now: string;\n yesterday: string;\n minutesAgo: string;\n hoursAgo: string;\n daysAgo: string;\n },\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)\n return labels.minutesAgo.replace(\"{{count}}\", String(diffMin));\n if (diffHr < 24) return labels.hoursAgo.replace(\"{{count}}\", String(diffHr));\n if (diffDay === 1) return labels.yesterday;\n if (diffDay < 7) return labels.daysAgo.replace(\"{{count}}\", String(diffDay));\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 tr = useTr();\n const timeLabels = {\n now: tr(\"conversations.now\", \"now\"),\n yesterday: tr(\"conversations.yesterday\", \"Yesterday\"),\n minutesAgo: tr(\"conversations.time.minutesAgo\", \"{{count}}m\"),\n hoursAgo: tr(\"conversations.time.hoursAgo\", \"{{count}}h\"),\n daysAgo: tr(\"conversations.time.daysAgo\", \"{{count}}d\"),\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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"}