+ {uiState === 'start' && (
+
+
+ Catch-up beta
+
+
Let's catch up on the posts from your followings.
+
+ Show me all posts from…
+
+
+ setRange(+e.target.value)}
+ />{' '}
+
+ {ranges[range - 1].label}
+
+
+ {range == ranges[ranges.length - 1].value
+ ? 'until the max'
+ : niceDateTime(
+ new Date(Date.now() - range * 60 * 60 * 1000),
+ )}
+
+
+ {' '}
+
+
+ {lastCatchupRange && range > lastCatchupRange && (
+
+ Overlaps with your last catch-up
+
+ )}
+
+
+ Note: your instance might only show a maximum of 800 posts in
+ the Home timeline regardless of the time range. Could be less
+ or more.
+
+
+ {!!prevCatchups?.length && (
+
+
Previously…
+
+ {prevCatchups.map((pc) => (
+ -
+
+ {' '}
+
+ {formatRange(
+ new Date(pc.startAt),
+ new Date(pc.endAt),
+ )}{' '}
+
+ {pc.count} posts
+
+
+ {' '}
+
+
+ ))}
+
+ {prevCatchups.length >= 3 && (
+
+
+ Note: Only max 3 will be stored. The rest will be
+ automatically removed.
+
+
+ )}
+
+ )}
+
+
+
Fetching posts…
+
This might take a while.
+
+
+
+ {links.map((link) => {
+ const { card, shared, sharers, likes, boosts } = link;
+ const {
+ blurhash,
+ title,
+ description,
+ url,
+ image,
+ imageDescription,
+ language,
+ width,
+ height,
+ publishedAt,
+ } = card;
+ const domain = new URL(url).hostname
+ .replace(/^www\./, '')
+ .replace(/\/$/, '');
+ let accentColor;
+ if (blurhash) {
+ const averageColor = getBlurHashAverageColor(blurhash);
+ const labAverageColor = rgb2oklab(averageColor);
+ accentColor = oklab2rgb([
+ 0.6,
+ labAverageColor[1],
+ labAverageColor[2],
+ ]);
+ }
+
+ return (
+
+
+
+ 
+
+
+
+ {!!description && (
+
+ {description}
+
+ )}
+
+
+ Shared by{' '}
+ {sharers.map((s) => {
+ const { avatarStatic, displayName } = s;
+ return (
+
+ );
+ })}
+
+
+ );
+ })}
+
+
+
{postsBar}
+ )}
+ {posts.length >= 2 && (
+
+
+ {[
+ 'Original',
+ 'Replies',
+ 'Boosts',
+ 'Followed tags',
+ 'Groups',
+ 'Filtered',
+ ].map(
+ (label) =>
+ !!filterCounts[label] && (
+
+ ),
+ )}
+
+ )}
+ {posts.length >= 2 && !!authorCounts && (
+
+ {authorCountsList.map((author) => (
+
+ ))}
+ {authorCountsList.length > 5 && (
+
+ {authorCountsList.length} authors
+
+ )}
+
+ Sort{' '}
+
+
+ Group{' '}
+
+ {
+ selectedAuthor && authorCountsList.length > 1 ? (
+
+ ) : null
+ //
+ }
+
+ )}
+
+ {sortedFilteredPosts.map((post, i) => {
+ const id = post.reblog?.id || post.id;
+ let showSeparator = false;
+ if (groupBy === 'account') {
+ if (
+ prevGroup.current &&
+ post.account.id !== prevGroup.current &&
+ i > 0
+ ) {
+ showSeparator = true;
+ }
+ prevGroup.current = post.account.id;
+ }
+ return (
+
+ {showSeparator && }
+ -
+
+
+
+
+
+ );
+ })}
+
+
+
+ )}
+