Sort all activity tabs oldest-first with newest at bottom

- CommentTimeline and AuditTimeline both sort by date ascending
- Auto-scroll to bottom on all tabs for consistency
This commit is contained in:
Adam Moussa 2026-04-16 18:33:37 -04:00
parent 287839d089
commit 049934478c

View file

@ -16,19 +16,22 @@ function formatDateTime(value) {
function CommentTimeline({ comments }) {
const bottomRef = useRef(null);
const sorted = [...(comments || [])].sort((a, b) =>
new Date(a.createdDate) - new Date(b.createdDate)
);
useEffect(() => {
bottomRef.current?.scrollIntoView();
}, [comments?.length]);
}, [sorted.length]);
if (!comments || comments.length === 0) {
if (!sorted.length) {
return <div className="woTabScroll"><p className="woNoComments">No comments yet.</p></div>;
}
return (
<div className="woTabScroll">
<div className="woTimeline">
{comments.map((c) => (
{sorted.map((c) => (
<div key={c.id} className="woTimelineItem">
<div className="woTimelineHeader">
<span className="woTimelineAuthor">{c.userName || c.commenter || "System"}</span>
@ -46,14 +49,23 @@ function CommentTimeline({ comments }) {
}
function AuditTimeline({ entries }) {
if (!entries || entries.length === 0) {
const bottomRef = useRef(null);
const sorted = [...(entries || [])].sort((a, b) =>
new Date(a.createdAt) - new Date(b.createdAt)
);
useEffect(() => {
bottomRef.current?.scrollIntoView();
}, [sorted.length]);
if (!sorted.length) {
return <div className="woTabScroll"><p className="woNoComments">No changes recorded.</p></div>;
}
return (
<div className="woTabScroll">
<div className="woTimeline">
{entries.map((e) => (
{sorted.map((e) => (
<div key={e.id} className="woTimelineItem woAuditItem">
<div className="woTimelineHeader">
<span className="woTimelineAuthor">{e.userName || "System"}</span>
@ -69,6 +81,7 @@ function AuditTimeline({ entries }) {
</div>
</div>
))}
<div ref={bottomRef} />
</div>
</div>
);