elseware-ui 2.31.10 → 2.31.12

package/dist/index.mjs

@@ -17578,9 +17578,12 @@ function CommentContent({ comment }) {
 var CommentContent_default = CommentContent;
 
 // src/compositions/comment-thread/utils/formatCommentDate.ts
-function formatCommentDate(date) {
-  const now = /* @__PURE__ */ new Date();
+function formatCommentDate(date, format = "relative") {
   const target = new Date(date);
+  if (format === "absolute") {
+    return target.toLocaleString();
+  }
+  const now = /* @__PURE__ */ new Date();
   const seconds = Math.floor((now.getTime() - target.getTime()) / 1e3);
   const intervals = [
     {
@@ -17612,13 +17615,13 @@ function formatCommentDate(date) {
   }
   return "Just now";
 }
-function CommentHeader({ comment }) {
+function CommentHeader({ comment, config }) {
   const author = comment.author;
   const displayName = author?.firstName || author?.lastName ? `${author?.firstName ?? ""} ${author?.lastName ?? ""}`.trim() : author?.username ?? "Unknown";
-  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 min-w-0", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-3", children: [
     /* @__PURE__ */ jsx(Avatar, { src: author?.avatar, size: "sm" }),
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-wrap min-w-0", children: [
-      /* @__PURE__ */ jsx("span", { className: "font-semibold text-sm text-gray-900 dark:text-gray-100", children: displayName }),
+    /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-2", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-gray-900 dark:text-gray-100", children: displayName }),
       author?.username && /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsxs("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: [
           "@",
@@ -17626,7 +17629,7 @@ function CommentHeader({ comment }) {
         ] }),
         /* @__PURE__ */ jsx("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: "\xB7" })
       ] }),
-      /* @__PURE__ */ jsx("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: formatCommentDate(comment.createdAt) }),
+      /* @__PURE__ */ jsx("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: formatCommentDate(comment.createdAt, config.dateFormat) }),
       comment.edited && /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-400 dark:text-gray-500", children: "(edited)" })
     ] })
   ] });
@@ -17719,20 +17722,29 @@ var CommentMenu_default = CommentMenu;
 function CommentRepliesToggle({
   repliesCount,
   collapsed,
+  loading = false,
   onToggle
 }) {
   if (repliesCount <= 0) {
     return null;
   }
-  const label = collapsed ? `View ${repliesCount} ${repliesCount === 1 ? "reply" : "replies"}` : "Hide replies";
+  let label = "";
+  if (loading) {
+    label = "Loading replies...";
+  } else if (collapsed) {
+    label = `View ${repliesCount} ${repliesCount === 1 ? "reply" : "replies"}`;
+  } else {
+    label = "Hide replies";
+  }
   return /* @__PURE__ */ jsxs(
     "button",
     {
       type: "button",
+      disabled: loading,
       onClick: onToggle,
-      className: "inline-flex w-fit items-center gap-1 text-sm font-medium text-blue-500 transition-colors hover:text-blue-400",
+      className: "inline-flex w-fit items-center gap-1 text-sm font-medium text-blue-500 transition-colors hover:text-blue-400 disabled:cursor-not-allowed disabled:opacity-60",
       children: [
-        collapsed ? /* @__PURE__ */ jsx(BiChevronDown, { size: 18 }) : /* @__PURE__ */ jsx(BiChevronUp, { size: 18 }),
+        !loading && (collapsed ? /* @__PURE__ */ jsx(BiChevronDown, { size: 18 }) : /* @__PURE__ */ jsx(BiChevronUp, { size: 18 })),
         /* @__PURE__ */ jsx("span", { children: label })
       ]
     }
@@ -17763,18 +17775,24 @@ function ReplyComposer({
 var ReplyComposer_default = ReplyComposer;
 function CommentItem({
   comment,
+  replies = [],
+  allReplies = {},
   depth = 0,
   config,
   components,
   onLike,
   onDislike,
   onReply,
+  onLoadReplies,
   onEdit,
   onDelete,
   onReport
 }) {
-  const [collapsed, setCollapsed] = useState(false);
+  const [collapsed, setCollapsed] = useState(true);
   const [isReplying, setIsReplying] = useState(false);
+  const [menuOpen, setMenuOpen] = useState(false);
+  const [loadingReplies, setLoadingReplies] = useState(false);
+  const [repliesLoaded, setRepliesLoaded] = useState(false);
   const resolvedDepth = Math.min(depth, config.maxDepth);
   const {
     Header: HeaderComponent = CommentHeader_default,
@@ -17787,100 +17805,108 @@ function CommentItem({
   async function handleReply(content) {
     await onReply?.(comment, content);
     setIsReplying(false);
+    setCollapsed(false);
+    setRepliesLoaded(true);
   }
-  const [menuOpen, setMenuOpen] = useState(false);
-  return /* @__PURE__ */ jsxs(
+  async function handleToggleReplies() {
+    const nextCollapsed = !collapsed;
+    if (!nextCollapsed && !repliesLoaded && onLoadReplies) {
+      try {
+        setLoadingReplies(true);
+        await onLoadReplies(comment);
+        setRepliesLoaded(true);
+      } finally {
+        setLoadingReplies(false);
+      }
+    }
+    setCollapsed(nextCollapsed);
+  }
+  return /* @__PURE__ */ jsx(
     "div",
     {
       className: "flex flex-col gap-4",
       style: {
         paddingLeft: resolvedDepth * config.indentation
       },
-      children: [
-        /* @__PURE__ */ jsx("div", { className: "flex gap-3", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col gap-3 min-w-0", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
-            /* @__PURE__ */ jsx(HeaderComponent, { comment }),
-            /* @__PURE__ */ jsx(
-              MenuComponent,
-              {
-                comment,
-                open: menuOpen,
-                setOpen: setMenuOpen,
-                canEdit: comment.permissions?.canEdit,
-                canDelete: comment.permissions?.canDelete,
-                canReport: comment.permissions?.canReport,
-                onEdit: () => onEdit?.(comment),
-                onDelete: () => onDelete?.(comment),
-                onReport: () => onReport?.(comment)
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx(ContentComponent, { comment }),
+      children: /* @__PURE__ */ jsx("div", { className: "flex gap-3", children: /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+          /* @__PURE__ */ jsx(HeaderComponent, { comment, config }),
           /* @__PURE__ */ jsx(
-            ActionsComponent,
+            MenuComponent,
             {
               comment,
-              onLike: () => onLike?.(comment),
-              onDislike: () => onDislike?.(comment),
-              onReply: () => setIsReplying((prev) => !prev)
-            }
-          ),
-          isReplying && /* @__PURE__ */ jsx(
-            ReplyComposerComponent,
-            {
-              avatar: comment.author?.avatar,
-              username: comment.author?.username,
-              placeholder: `Reply to @${comment.author?.username}`,
-              submitLabel: "Reply",
-              onSubmit: handleReply
-            }
-          ),
-          !!comment.replies?.length && /* @__PURE__ */ jsx(
-            RepliesToggleComponent,
-            {
-              collapsed,
-              repliesCount: comment.replies.length,
-              onToggle: () => setCollapsed((prev) => !prev)
+              open: menuOpen,
+              setOpen: setMenuOpen,
+              canEdit: comment.permissions?.canEdit,
+              canDelete: comment.permissions?.canDelete,
+              canReport: comment.permissions?.canReport,
+              onEdit: () => onEdit?.(comment),
+              onDelete: () => onDelete?.(comment),
+              onReport: () => onReport?.(comment)
             }
           )
-        ] }) }),
-        !collapsed && !!comment.replies?.length && /* @__PURE__ */ jsx(
-          "div",
+        ] }),
+        /* @__PURE__ */ jsx(ContentComponent, { comment }),
+        /* @__PURE__ */ jsx(
+          ActionsComponent,
           {
-            className: cn(
-              "border-l border-gray-200 dark:border-neutral-800",
-              "pl-4 ml-5"
-            ),
-            children: /* @__PURE__ */ jsx(
-              CommentList_default,
-              {
-                comments: comment.replies,
-                depth: depth + 1,
-                config,
-                components,
-                onLike,
-                onDislike,
-                onReply,
-                onEdit,
-                onDelete,
-                onReport
-              }
-            )
+            comment,
+            onLike: () => onLike?.(comment),
+            onDislike: () => onDislike?.(comment),
+            onReply: () => setIsReplying((prev) => !prev)
           }
-        )
-      ]
+        ),
+        isReplying && /* @__PURE__ */ jsx(
+          ReplyComposerComponent,
+          {
+            avatar: comment.author?.avatar,
+            username: comment.author?.username,
+            placeholder: `Reply to @${comment.author?.username}`,
+            submitLabel: "Reply",
+            onSubmit: handleReply
+          }
+        ),
+        comment.replyCount > 0 && /* @__PURE__ */ jsx(
+          RepliesToggleComponent,
+          {
+            collapsed,
+            loading: loadingReplies,
+            repliesCount: comment.replyCount,
+            onToggle: handleToggleReplies
+          }
+        ),
+        !collapsed && replies.length > 0 && /* @__PURE__ */ jsx("div", { className: "ml-5 border-l border-gray-200 pl-4 dark:border-neutral-800", children: /* @__PURE__ */ jsx(
+          CommentList_default,
+          {
+            comments: replies,
+            replies: allReplies,
+            depth: depth + 1,
+            config,
+            components,
+            onLike,
+            onDislike,
+            onReply,
+            onLoadReplies,
+            onEdit,
+            onDelete,
+            onReport
+          }
+        ) })
+      ] }) })
     }
   );
 }
 var CommentItem_default = CommentItem;
 function CommentList({
   comments,
+  replies = {},
   depth = 0,
   config,
   components,
   onLike,
   onDislike,
   onReply,
+  onLoadReplies,
   onEdit,
   onDelete,
   onReport
@@ -17892,12 +17918,15 @@ function CommentList({
     CommentItem_default,
     {
       comment,
+      replies: replies[comment.id] ?? [],
+      allReplies: replies,
       depth,
       config,
       components,
       onLike,
       onDislike,
       onReply,
+      onLoadReplies,
       onEdit,
       onDelete,
       onReport
@@ -17907,64 +17936,20 @@ function CommentList({
 }
 var CommentList_default = CommentList;
 
-// src/compositions/comment-thread/utils/buildCommentTree.ts
-function buildCommentTree(comments) {
-  const map = /* @__PURE__ */ new Map();
-  const roots = [];
-  comments.forEach((comment) => {
-    map.set(comment.id, {
-      ...comment,
-      replies: []
-    });
-  });
-  comments.forEach((comment) => {
-    const current = map.get(comment.id);
-    if (!comment.parentCommentId) {
-      roots.push(current);
-      return;
-    }
-    const parent = map.get(comment.parentCommentId);
-    if (parent) {
-      parent.replies.push(current);
-    }
-  });
-  return roots;
-}
-
 // src/compositions/comment-thread/utils/updateComment.ts
 function updateComment(comments, commentId, updater) {
-  return comments.map((comment) => {
-    if (comment.id === commentId) {
-      return updater(comment);
-    }
-    return {
-      ...comment,
-      replies: comment.replies ? updateComment(comment.replies, commentId, updater) : []
-    };
-  });
-}
-
-// src/compositions/comment-thread/utils/insertReply.ts
-function insertReply(comments, parentId, reply) {
-  return comments.map((comment) => {
-    if (comment.id === parentId) {
-      return {
-        ...comment,
-        replies: [...comment.replies || [], reply]
-      };
-    }
-    return {
-      ...comment,
-      replies: comment.replies ? insertReply(comment.replies, parentId, reply) : []
-    };
-  });
+  return comments.map(
+    (comment) => comment.id === commentId ? updater(comment) : comment
+  );
 }
 
 // src/compositions/comment-thread/constants/comment.constants.ts
 var DEFAULT_COMMENT_THREAD_CONFIG = {
   maxDepth: 5,
   indentation: 24,
-  dateFormat: "relative"
+  dateFormat: "relative",
+  commentsPerPage: 20,
+  repliesPerPage: 10
 };
 function CommentThread({
   currentUser,
@@ -17978,6 +17963,9 @@ function CommentThread({
 }) {
   const [comments, setComments] = useState([]);
   const [isLoadingComments, setIsLoadingComments] = useState(true);
+  const [replyCache, setReplyCache] = useState(
+    {}
+  );
   const ComposerComponent = components?.Composer ?? CommentComposer_default;
   const resolvedConfig = {
     ...DEFAULT_COMMENT_THREAD_CONFIG,
@@ -17986,14 +17974,27 @@ function CommentThread({
   useEffect(() => {
     async function loadComments() {
       try {
-        const result = await dataSource.getComments();
-        setComments(buildCommentTree(result));
+        const result = await dataSource.getComments({
+          parentCommentId: null,
+          limit: resolvedConfig.commentsPerPage
+        });
+        setComments(result.items);
       } finally {
         setIsLoadingComments(false);
       }
     }
     loadComments();
-  }, [dataSource]);
+  }, [dataSource, resolvedConfig.commentsPerPage]);
+  function updateReplyCacheComment(cache, commentId, updater) {
+    return Object.fromEntries(
+      Object.entries(cache).map(([parentId, replies]) => [
+        parentId,
+        replies.map(
+          (reply) => reply.id === commentId ? updater(reply) : reply
+        )
+      ])
+    );
+  }
   async function handleCreateComment(content) {
     const comment = await dataSource.createComment({
       content,
@@ -18006,7 +18007,35 @@ function CommentThread({
       content,
       parentCommentId: parentComment.id
     });
-    setComments((prev) => insertReply(prev, parentComment.id, reply));
+    setReplyCache((prev) => ({
+      ...prev,
+      [parentComment.id]: [...prev[parentComment.id] ?? [], reply]
+    }));
+    const incrementReplyCount = (items) => items.map(
+      (item) => item.id === parentComment.id ? {
+        ...item,
+        replyCount: item.replyCount + 1
+      } : item
+    );
+    setComments((prev) => incrementReplyCount(prev));
+    setReplyCache(
+      (prev) => updateReplyCacheComment(prev, parentComment.id, (item) => ({
+        ...item,
+        replyCount: item.replyCount + 1
+      }))
+    );
+  }
+  async function handleLoadReplies(comment) {
+    if (replyCache[comment.id]) {
+      return;
+    }
+    const result = await dataSource.getReplies(comment.id, {
+      limit: resolvedConfig.repliesPerPage
+    });
+    setReplyCache((prev) => ({
+      ...prev,
+      [comment.id]: result.items
+    }));
   }
   async function handleLike(comment) {
     const optimistic = {
@@ -18015,19 +18044,22 @@ function CommentThread({
       likes: comment.liked ? Math.max(comment.likes - 1, 0) : comment.likes + 1,
       dislikes: comment.disliked ? Math.max(comment.dislikes - 1, 0) : comment.dislikes
     };
-    setComments(
-      (prev) => updateComment(prev, comment.id, (item) => ({
-        ...item,
-        likes: optimistic.likes,
-        dislikes: optimistic.dislikes,
-        liked: optimistic.liked,
-        disliked: optimistic.disliked
-      }))
-    );
+    const updater = (item) => ({
+      ...item,
+      likes: optimistic.likes,
+      dislikes: optimistic.dislikes,
+      liked: optimistic.liked,
+      disliked: optimistic.disliked
+    });
+    setComments((prev) => updateComment(prev, comment.id, updater));
+    setReplyCache((prev) => updateReplyCacheComment(prev, comment.id, updater));
     try {
       await dataSource.toggleLike(comment.id);
     } catch {
       setComments((prev) => updateComment(prev, comment.id, () => comment));
+      setReplyCache(
+        (prev) => updateReplyCacheComment(prev, comment.id, () => comment)
+      );
     }
   }
   async function handleDislike(comment) {
@@ -18037,19 +18069,22 @@ function CommentThread({
       likes: comment.liked ? Math.max(comment.likes - 1, 0) : comment.likes,
       dislikes: comment.disliked ? Math.max(comment.dislikes - 1, 0) : comment.dislikes + 1
     };
-    setComments(
-      (prev) => updateComment(prev, comment.id, (item) => ({
-        ...item,
-        likes: optimistic.likes,
-        dislikes: optimistic.dislikes,
-        liked: optimistic.liked,
-        disliked: optimistic.disliked
-      }))
-    );
+    const updater = (item) => ({
+      ...item,
+      likes: optimistic.likes,
+      dislikes: optimistic.dislikes,
+      liked: optimistic.liked,
+      disliked: optimistic.disliked
+    });
+    setComments((prev) => updateComment(prev, comment.id, updater));
+    setReplyCache((prev) => updateReplyCacheComment(prev, comment.id, updater));
     try {
       await dataSource.toggleDislike(comment.id);
     } catch {
       setComments((prev) => updateComment(prev, comment.id, () => comment));
+      setReplyCache(
+        (prev) => updateReplyCacheComment(prev, comment.id, () => comment)
+      );
     }
   }
   if (loading || isLoadingComments) {
@@ -18069,11 +18104,13 @@ function CommentThread({
       CommentList_default,
       {
         comments,
-        components,
+        replies: replyCache,
         config: resolvedConfig,
+        components,
         onLike: handleLike,
         onDislike: handleDislike,
         onReply: handleReply,
+        onLoadReplies: handleLoadReplies,
         onEdit,
         onDelete,
         onReport