diff --git a/packages/nicolium/src/columns/timeline.tsx b/packages/nicolium/src/columns/timeline.tsx index 6d77d6094..6f039a67b 100644 --- a/packages/nicolium/src/columns/timeline.tsx +++ b/packages/nicolium/src/columns/timeline.tsx @@ -428,23 +428,21 @@ const Timeline: React.FC = ({ setTimeout(() => skipPinned, 0); }; - const renderEntry = (entry: TimelineEntry, index: number) => { + const renderEntry = ( + entry: TimelineEntry, + index: number, + connections?: { + isConnectedTop: boolean; + isConnectedBottom: boolean; + }, + ) => { if (entry.type === 'status') { - if ( - (filters?.showDirect === false && entry.isDirect) || - (filters?.showReblogs === false && entry.isReblog) || - (filters?.showReplies === false && entry.isReply) || - (filters?.showQuotes === false && entry.isQuote) || - (filters?.showNonMedia === false && !entry.hasMedia) - ) { - return null; - } return ( handleMoveUp(index)} onMoveDown={() => handleMoveDown(index)} @@ -488,9 +486,45 @@ const Timeline: React.FC = ({ } } - for (const entry of entries) { - rendered.push(renderEntry(entry, rendered.length)); - } + entries + .map((entry) => { + if (entry.type === 'status') { + return { + ...entry, + filtered: + (filters?.showDirect === false && entry.isDirect) || + (filters?.showReblogs === false && entry.isReblog) || + (filters?.showReplies === false && entry.isReply) || + (filters?.showQuotes === false && entry.isQuote) || + (filters?.showNonMedia === false && !entry.hasMedia), + }; + } + return entry; + }) + .forEach((entry, entryIndex, entries) => { + if (entry.type === 'status' && entry.filtered) { + return; + } + + if (entry.type === 'status') { + const previousEntry = entries[entryIndex - 1]; + const nextEntry = entries[entryIndex + 1]; + + rendered.push( + renderEntry(entry, rendered.length, { + isConnectedTop: + !!entry.isConnectedTop && + previousEntry?.type === 'status' && + !previousEntry.filtered, + isConnectedBottom: + !!entry.isConnectedBottom && nextEntry?.type === 'status' && !nextEntry.filtered, + }), + ); + return; + } + + rendered.push(renderEntry(entry, rendered.length)); + }); return rendered; }, [entries, contextType, timelineId, featuredStatusIds, filters]);