From be6ded99ded26d5baabd0568289e3c85274843a8 Mon Sep 17 00:00:00 2001
From: dawn <90008@gaze.systems>
Date: Wed, 21 Jan 2026 14:59:34 +0300
Subject: [PATCH] refactor timelines, fix following timeline showing threads
 that are only replies

---
 src/components/FeedTimelineView.svelte      |  14 +-
 src/components/FollowingTimelineView.svelte | 199 ++++++--------------
 src/components/FollowingView.svelte         |  21 +--
 src/components/GenericTimelineView.svelte   | 193 +++++++++++++++++++
 src/components/LoadNewPosts.svelte          |  22 +++
 src/components/PostComposer.svelte          |   2 -
 src/components/ProfileActions.svelte        |  15 +-
 src/components/ReplyTimelineView.svelte     | 172 +++--------------
 src/lib/following.ts                        |   1 -
 src/lib/index.ts                            |   1 +
 src/lib/state.svelte.ts                     |  46 ++---
 src/lib/thread.ts                           |   7 +-
 src/routes/[...catchall]/+page.svelte       |   9 +-
 13 files changed, 342 insertions(+), 360 deletions(-)
 create mode 100644 src/components/GenericTimelineView.svelte
 create mode 100644 src/components/LoadNewPosts.svelte

diff --git a/src/components/FeedTimelineView.svelte b/src/components/FeedTimelineView.svelte
index 883c403..a9b5ca3 100644
--- a/src/components/FeedTimelineView.svelte
+++ b/src/components/FeedTimelineView.svelte
@@ -16,12 +16,12 @@
 		checkForNewPosts,
 		fetchInteractionsToFeedTimelineEnd
 	} from '$lib/state.svelte';
-	import Icon from '@iconify/svelte';
 	import NotLoggedIn from './NotLoggedIn.svelte';
 	import { fetchFeedGenerator } from '$lib/at/feeds';
 	import LoadingSpinner from './LoadingSpinner.svelte';
 	import EndOfList from './EndOfList.svelte';
 	import LoadError from './LoadError.svelte';
+	import LoadNewPosts from './LoadNewPosts.svelte';
 
 	interface Props {
 		client?: AtpClient | null;
@@ -168,17 +168,7 @@
 	class="min-h-full p-2 [scrollbar-color:var(--nucleus-accent)_transparent] {className}"
 	bind:this={scrollContainer}
 >
-	{#if newPostsAvailable}
-		<div class="sticky top-2 z-20 mb-4 flex w-full justify-center">
-			<button
-				class="flex action-button items-center gap-2 bg-(--nucleus-bg) hover:scale-115! enabled:hover:bg-(--nucleus-bg)!"
-				onclick={clearFeed}
-			>
-				<Icon icon="heroicons:arrow-up-16-solid" width="20" />
-				load new posts
-			</button>
-		</div>
-	{/if}
+	<LoadNewPosts visible={newPostsAvailable} onclick={clearFeed} />
 	{#if userDid || $accounts.length > 0}
 		<InfiniteLoader {loaderState} triggerLoad={loadMore} loopDetectionTimeout={0}>
 			{@render feedPostsView()}
diff --git a/src/components/FollowingTimelineView.svelte b/src/components/FollowingTimelineView.svelte
index 094779d..905a373 100644
--- a/src/components/FollowingTimelineView.svelte
+++ b/src/components/FollowingTimelineView.svelte
@@ -1,27 +1,20 @@
 <script lang="ts">
-	import BskyPost from './BskyPost.svelte';
 	import { type State as PostComposerState } from './PostComposer.svelte';
 	import { AtpClient } from '$lib/at/client.svelte';
 	import { accounts } from '$lib/accounts';
-	import { type ResourceUri } from '@atcute/lexicons';
 	import { SvelteSet } from 'svelte/reactivity';
-	import { InfiniteLoader, LoaderState } from 'svelte-infinite';
 	import {
-		followingCursors,
 		fetchFollowingTimeline,
 		allPosts,
 		followingFeed,
 		accountPreferences,
 		fetchInteractionsToFollowingTimelineEnd,
-		follows
+		follows,
+		followingCursors
 	} from '$lib/state.svelte';
-	import Icon from '@iconify/svelte';
-	import { buildThreads, filterThreads, type ThreadPost } from '$lib/thread';
+	import { buildThreads, filterThreads } from '$lib/thread';
 	import type { Did } from '@atcute/lexicons/syntax';
-	import NotLoggedIn from './NotLoggedIn.svelte';
-	import LoadingSpinner from './LoadingSpinner.svelte';
-	import EndOfList from './EndOfList.svelte';
-	import LoadError from './LoadError.svelte';
+	import GenericTimelineView from './GenericTimelineView.svelte';
 
 	interface Props {
 		client?: AtpClient | null;
@@ -37,9 +30,7 @@
 		targetDid = undefined
 	}: Props = $props();
 
-	let reverseChronological = $state(true);
 	let viewOwnPosts = $state(true);
-	const expandedThreads = new SvelteSet<ResourceUri>();
 
 	const userDid = $derived(targetDid ?? client?.user?.did);
 
@@ -50,7 +41,7 @@
 		if (!userDid) return new Set<Did>();
 		const map = follows.get(userDid);
 		if (!map) return new Set<Did>();
-		return new Set(Array.from(map.values()).map((f) => f.subject));
+		return new Set(map.keys());
 	});
 
 	const threads = $derived(
@@ -61,148 +52,76 @@
 			$accounts,
 			{
 				viewOwnPosts,
+				filterReplies: true,
 				filterRootsToDids: followedDids
 			}
 		)
 	);
 
-	const loaderState = new LoaderState();
-	let scrollContainer = $state<HTMLDivElement>();
-	let loading = $state(false);
-	let loadError = $state('');
+	const isComplete = $derived.by(() => {
+		if (!userDid) return false;
+		const cursors = followingCursors.get(userDid);
+		const subjects = follows.get(userDid);
+
+		// if no cursors yet, we haven't started
+		if (!cursors) return false;
+
+		// Check self
+		if (cursors.get(userDid) !== null) return false;
+
+		// Check follows
+		if (subjects) {
+			for (const subject of subjects.keys()) {
+				// if checking logic in state.svelte.ts:
+				// undefined means "not fetched", null means "exhausted"
+				// if any cursor is undefined or string, it's not complete.
+				if (cursors.get(subject) !== null) return false;
+			}
+		}
+
+		return true;
+	});
 
 	let fetchingInteractions = $state(false);
 	let scheduledFetchInteractions = $state(false);
 
 	const loadMore = async () => {
-		if (loading || !client || !userDid) return;
-
-		loading = true;
-		loaderState.status = 'LOADING';
-
-		try {
-			await fetchFollowingTimeline(client, userDid);
-
-			if (client.user && userDid) {
-				if (!fetchingInteractions) {
-					scheduledFetchInteractions = false;
-					fetchingInteractions = true;
-					await fetchInteractionsToFollowingTimelineEnd(client, userDid);
-					fetchingInteractions = false;
-				} else {
-					scheduledFetchInteractions = true;
-				}
+		if (!client || !userDid) return;
+
+		await fetchFollowingTimeline(client, userDid);
+
+		if (client.user && userDid) {
+			if (!fetchingInteractions) {
+				scheduledFetchInteractions = false;
+				fetchingInteractions = true;
+				await fetchInteractionsToFollowingTimelineEnd(client, userDid);
+				fetchingInteractions = false;
+			} else {
+				scheduledFetchInteractions = true;
 			}
-
-			loaderState.loaded();
-		} catch (error) {
-			loadError = `${error}`;
-			loaderState.error();
-			loading = false;
-			return;
 		}
-
-		loading = false;
 	};
 
 	$effect(() => {
-		const isEmpty = threads.length === 0;
-		if (isEmpty && !loading && userDid) {
-			loadMore();
+		if (client && scheduledFetchInteractions && userDid) {
+			if (!fetchingInteractions) {
+				scheduledFetchInteractions = false;
+				fetchingInteractions = true;
+				fetchInteractionsToFollowingTimelineEnd(client, userDid).finally(
+					() => (fetchingInteractions = false)
+				);
+			}
 		}
 	});
-
-	$effect(() => {
-		userDid;
-		loaderState.reset();
-	});
 </script>
 
-{#snippet replyPost(post: ThreadPost, reverse: boolean = reverseChronological)}
-	<span
-		class="mb-1.5 flex items-center gap-1.5 overflow-hidden text-nowrap wrap-break-word overflow-ellipsis"
-	>
-		<span class="text-sm text-nowrap opacity-60">{reverse ? '↱' : '↳'}</span>
-		<BskyPost mini client={client!} {...post} />
-	</span>
-{/snippet}
-
-{#snippet threadsView()}
-	{#each threads as thread, i (thread.rootUri)}
-		<div class="flex w-full shrink-0 {reverseChronological ? 'flex-col' : 'flex-col-reverse'}">
-			{#if thread.branchParentPost}
-				{@render replyPost(thread.branchParentPost)}
-			{/if}
-			{#each thread.posts as post, idx (post.data.uri)}
-				{@const mini =
-					!expandedThreads.has(thread.rootUri) &&
-					thread.posts.length > 4 &&
-					idx > 0 &&
-					idx < thread.posts.length - 2}
-				{#if !mini}
-					<div class="mb-1.5">
-						<BskyPost
-							client={client!}
-							onQuote={(post) => {
-								postComposerState.focus = 'focused';
-								postComposerState.quoting = post;
-							}}
-							onReply={(post) => {
-								postComposerState.focus = 'focused';
-								postComposerState.replying = post;
-							}}
-							{...post}
-						/>
-					</div>
-				{:else if mini}
-					{#if idx === 1}
-						{@render replyPost(post, !reverseChronological)}
-						<button
-							class="mx-1.5 mt-1.5 mb-2.5 flex items-center gap-1.5 text-[color-mix(in_srgb,var(--nucleus-fg)_50%,var(--nucleus-accent))]/70 transition-colors hover:text-(--nucleus-accent)"
-							onclick={() => expandedThreads.add(thread.rootUri)}
-						>
-							<div class="mr-1 h-px w-20 rounded border-y-2 border-dashed opacity-50"></div>
-							<Icon
-								class="shrink-0"
-								icon={reverseChronological
-									? 'heroicons:bars-arrow-up-solid'
-									: 'heroicons:bars-arrow-down-solid'}
-								width={32}
-							/><span class="shrink-0 pb-1">view full chain</span>
-							<div class="ml-1 h-px w-full rounded border-y-2 border-dashed opacity-50"></div>
-						</button>
-					{:else if idx === thread.posts.length - 3}
-						{@render replyPost(post)}
-					{/if}
-				{/if}
-			{/each}
-		</div>
-		{#if i < threads.length - 1}
-			<div
-				class="mx-8 mt-3 mb-4 h-px bg-linear-to-r from-(--nucleus-accent)/30 to-(--nucleus-accent2)/30"
-			></div>
-		{/if}
-	{/each}
-{/snippet}
-
-<div
-	class="min-h-full p-2 [scrollbar-color:var(--nucleus-accent)_transparent] {className}"
-	bind:this={scrollContainer}
->
-	{#if userDid || $accounts.length > 0}
-		<InfiniteLoader {loaderState} triggerLoad={loadMore} loopDetectionTimeout={0}>
-			{@render threadsView()}
-			{#snippet noData()}
-				<EndOfList />
-			{/snippet}
-			{#snippet loading()}
-				<LoadingSpinner />
-			{/snippet}
-			{#snippet error()}
-				<LoadError error={loadError} onRetry={loadMore} />
-			{/snippet}
-		</InfiniteLoader>
-	{:else}
-		<NotLoggedIn />
-	{/if}
-</div>
+<GenericTimelineView
+	{client}
+	{threads}
+	bind:postComposerState
+	class={className}
+	isLoggedIn={!!(userDid || $accounts.length > 0)}
+	canLoad={!!(client && userDid)}
+	onLoadMore={loadMore}
+	{isComplete}
+/>
diff --git a/src/components/FollowingView.svelte b/src/components/FollowingView.svelte
index 3e17626..b95cb28 100644
--- a/src/components/FollowingView.svelte
+++ b/src/components/FollowingView.svelte
@@ -49,25 +49,12 @@
 
 		const interactionScores =
 			followingSort === 'conversational'
-				? calculateInteractionScores(
-						selectedDid,
-						followsMap,
-						allPosts,
-						allBacklinks,
-						replyIndex,
-						staticNow
-					)
+				? calculateInteractionScores(selectedDid, allPosts, allBacklinks, replyIndex, staticNow)
 				: null;
 
-		const userStatsList = followsMap.values().map((f) => ({
-			did: f.subject,
-			data: calculateFollowedUserStats(
-				followingSort,
-				f.subject,
-				allPosts,
-				interactionScores,
-				staticNow
-			)
+		const userStatsList = followsMap.keys().map((did) => ({
+			did,
+			data: calculateFollowedUserStats(followingSort, did, allPosts, interactionScores, staticNow)
 		}));
 
 		const following = userStatsList.filter((u) => u.data !== null);
diff --git a/src/components/GenericTimelineView.svelte b/src/components/GenericTimelineView.svelte
new file mode 100644
index 0000000..07e772a
--- /dev/null
+++ b/src/components/GenericTimelineView.svelte
@@ -0,0 +1,193 @@
+<script lang="ts">
+	import BskyPost from './BskyPost.svelte';
+	import { type State as PostComposerState } from './PostComposer.svelte';
+	import { AtpClient } from '$lib/at/client.svelte';
+	import { accounts } from '$lib/accounts';
+	import { type ResourceUri } from '@atcute/lexicons';
+	import { SvelteSet } from 'svelte/reactivity';
+	import { InfiniteLoader, LoaderState } from 'svelte-infinite';
+	import Icon from '@iconify/svelte';
+	import { type ThreadPost, type Thread } from '$lib/thread';
+	import type { Did } from '@atcute/lexicons/syntax';
+	import NotLoggedIn from './NotLoggedIn.svelte';
+	import LoadingSpinner from './LoadingSpinner.svelte';
+	import EndOfList from './EndOfList.svelte';
+	import LoadError from './LoadError.svelte';
+	import LoadNewPosts from './LoadNewPosts.svelte';
+
+	interface Props {
+		client?: AtpClient | null;
+		threads: Thread[];
+		postComposerState: PostComposerState;
+		class?: string;
+		isLoggedIn?: boolean; // Controls rendering of the list vs NotLoggedIn
+		canLoad?: boolean; // Controls whether we can actually load more data
+		onLoadMore: () => Promise<void>;
+		isComplete?: boolean;
+	}
+
+	let {
+		client = null,
+		threads,
+		postComposerState = $bindable(),
+		class: className = '',
+		isLoggedIn = false,
+		canLoad = undefined,
+		onLoadMore,
+		isComplete = false
+	}: Props = $props();
+
+	// Default canLoad to isLoggedIn if not provided, for backward compatibility/simpler usage
+	const shouldLoad = $derived(canLoad ?? isLoggedIn);
+
+	let reverseChronological = $state(true);
+	const expandedThreads = new SvelteSet<ResourceUri>();
+
+	let isAtTop = $state(true);
+	let boundaryTime = $state<number | null>(null);
+
+	const visibleThreads = $derived.by(() => {
+		if (boundaryTime === null) return threads;
+		return threads.filter((t) => t.newestTime <= boundaryTime!);
+	});
+
+	$effect(() => {
+		if (threads.length > 0) {
+			if (isAtTop) {
+				boundaryTime = threads[0].newestTime;
+			} else if (boundaryTime === null) {
+				boundaryTime = threads[0].newestTime;
+			}
+		}
+	});
+
+	const showNewPosts = () => {
+		boundaryTime = threads[0]?.newestTime ?? null;
+		window.scrollTo({ top: 0, behavior: 'instant' });
+		isAtTop = true;
+	};
+
+	const onScroll = () => (isAtTop = window.scrollY < 300);
+
+	const loaderState = new LoaderState();
+	let loading = $state(false);
+	let loadError = $state('');
+
+	const loadMore = async () => {
+		if (loading || !shouldLoad) return;
+
+		loading = true;
+		loaderState.status = 'LOADING';
+		loadError = '';
+
+		try {
+			await onLoadMore();
+			loaderState.loaded();
+			if (isComplete) loaderState.complete();
+		} catch (error) {
+			loadError = `${error}`;
+			loaderState.error();
+			loading = false;
+			return;
+		}
+
+		loading = false;
+	};
+
+	$effect(() => {
+		const isEmpty = threads.length === 0;
+		if (isEmpty && !loading && shouldLoad && !isComplete) loadMore();
+	});
+</script>
+
+<svelte:window onscroll={onScroll} />
+
+{#snippet replyPost(post: ThreadPost, reverse: boolean = reverseChronological)}
+	<span
+		class="mb-1.5 flex items-center gap-1.5 overflow-hidden text-nowrap wrap-break-word overflow-ellipsis"
+	>
+		<span class="text-sm text-nowrap opacity-60">{reverse ? '↱' : '↳'}</span>
+		<BskyPost mini client={client!} {...post} />
+	</span>
+{/snippet}
+
+{#snippet threadsView()}
+	{#each visibleThreads as thread, i (thread.rootUri)}
+		<div class="flex w-full shrink-0 {reverseChronological ? 'flex-col' : 'flex-col-reverse'}">
+			{#if thread.branchParentPost}
+				{@render replyPost(thread.branchParentPost)}
+			{/if}
+			{#each thread.posts as post, idx (post.data.uri)}
+				{@const mini =
+					!expandedThreads.has(thread.rootUri) &&
+					thread.posts.length > 4 &&
+					idx > 0 &&
+					idx < thread.posts.length - 2}
+				{#if !mini}
+					<div class="mb-1.5">
+						<BskyPost
+							client={client!}
+							onQuote={(post) => {
+								postComposerState.focus = 'focused';
+								postComposerState.quoting = post;
+							}}
+							onReply={(post) => {
+								postComposerState.focus = 'focused';
+								postComposerState.replying = post;
+							}}
+							{...post}
+						/>
+					</div>
+				{:else if mini}
+					{#if idx === 1}
+						{@render replyPost(post, !reverseChronological)}
+						<button
+							class="mx-1.5 mt-1.5 mb-2.5 flex items-center gap-1.5 text-[color-mix(in_srgb,var(--nucleus-fg)_50%,var(--nucleus-accent))]/70 transition-colors hover:text-(--nucleus-accent)"
+							onclick={() => expandedThreads.add(thread.rootUri)}
+						>
+							<div class="mr-1 h-px w-20 rounded border-y-2 border-dashed opacity-50"></div>
+							<Icon
+								class="shrink-0"
+								icon={reverseChronological
+									? 'heroicons:bars-arrow-up-solid'
+									: 'heroicons:bars-arrow-down-solid'}
+								width={32}
+							/><span class="shrink-0 pb-1">view full chain</span>
+							<div class="ml-1 h-px w-full rounded border-y-2 border-dashed opacity-50"></div>
+						</button>
+					{:else if idx === thread.posts.length - 3}
+						{@render replyPost(post)}
+					{/if}
+				{/if}
+			{/each}
+		</div>
+		{#if i < visibleThreads.length - 1}
+			<div
+				class="mx-8 mt-3 mb-4 h-px bg-linear-to-r from-(--nucleus-accent)/30 to-(--nucleus-accent2)/30"
+			></div>
+		{/if}
+	{/each}
+{/snippet}
+
+<div class="min-h-full p-2 [scrollbar-color:var(--nucleus-accent)_transparent] {className}">
+	<LoadNewPosts
+		visible={threads.length > 0 && boundaryTime !== null && threads[0].newestTime > boundaryTime}
+		onclick={showNewPosts}
+	/>
+	{#if isLoggedIn}
+		<InfiniteLoader {loaderState} triggerLoad={loadMore} loopDetectionTimeout={0}>
+			{@render threadsView()}
+			{#snippet noData()}
+				<EndOfList />
+			{/snippet}
+			{#snippet loading()}
+				<LoadingSpinner />
+			{/snippet}
+			{#snippet error()}
+				<LoadError error={loadError} onRetry={loadMore} />
+			{/snippet}
+		</InfiniteLoader>
+	{:else}
+		<NotLoggedIn />
+	{/if}
+</div>
diff --git a/src/components/LoadNewPosts.svelte b/src/components/LoadNewPosts.svelte
new file mode 100644
index 0000000..1b057ab
--- /dev/null
+++ b/src/components/LoadNewPosts.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+	import Icon from '@iconify/svelte';
+
+	interface Props {
+		visible: boolean;
+		onclick: () => void;
+	}
+
+	let { visible, onclick }: Props = $props();
+</script>
+
+{#if visible}
+	<div class="sticky top-2 z-20 mb-4 flex w-full justify-center">
+		<button
+			class="flex action-button items-center gap-2 bg-(--nucleus-bg) hover:scale-115! enabled:hover:bg-(--nucleus-bg)!"
+			{onclick}
+		>
+			<Icon icon="heroicons:arrow-up-16-solid" width="20" />
+			load new posts
+		</button>
+	</div>
+{/if}
diff --git a/src/components/PostComposer.svelte b/src/components/PostComposer.svelte
index 3496d25..6055e22 100644
--- a/src/components/PostComposer.svelte
+++ b/src/components/PostComposer.svelte
@@ -322,8 +322,6 @@
 	};
 
 	const doPost = () => {
-		if (_state.text.length === 0 || _state.text.length > 300) return;
-
 		postError = '';
 		posting = true;
 		post(_state.text)
diff --git a/src/components/ProfileActions.svelte b/src/components/ProfileActions.svelte
index 9e2a00b..d07cd3b 100644
--- a/src/components/ProfileActions.svelte
+++ b/src/components/ProfileActions.svelte
@@ -8,7 +8,6 @@
 		createBlock,
 		deleteBlock,
 		follows,
-		setAccountPreferences,
 		updateAccountPreferences
 	} from '$lib/state.svelte';
 	import { generateColorForDid } from '$lib/accounts';
@@ -33,11 +32,7 @@
 	let actionsPos = $state({ x: 0, y: 0 });
 
 	const followsMap = $derived(userDid ? follows.get(userDid) : undefined);
-	const follow = $derived(
-		followsMap
-			? Array.from(followsMap.entries()).find(([, follow]) => follow.subject === targetDid)
-			: undefined
-	);
+	const follow = $derived(followsMap ? followsMap.get(targetDid) : undefined);
 
 	const currentPrefs = $derived(userDid ? accountPreferences.get(userDid) : null);
 	const mutes = $derived(currentPrefs?.mutes ?? []);
@@ -55,8 +50,8 @@
 		if (!userDid || !client.user) return;
 
 		if (follow) {
-			const [uri] = follow;
-			followsMap?.delete(uri);
+			const { uri } = follow;
+			followsMap?.delete(targetDid);
 
 			// extract rkey from uri
 			const parsedUri = parseCanonicalResourceUri(uri);
@@ -85,8 +80,8 @@
 				rkey
 			});
 
-			if (!followsMap) follows.set(userDid, new SvelteMap([[uri, record]]));
-			else followsMap.set(uri, record);
+			if (!followsMap) follows.set(userDid, new SvelteMap([[targetDid, { uri, record }]]));
+			else followsMap.set(targetDid, { uri, record });
 
 			await client.user.atcute.post('com.atproto.repo.createRecord', {
 				input: {
diff --git a/src/components/ReplyTimelineView.svelte b/src/components/ReplyTimelineView.svelte
index b597379..c0f9e36 100644
--- a/src/components/ReplyTimelineView.svelte
+++ b/src/components/ReplyTimelineView.svelte
@@ -1,11 +1,7 @@
 <script lang="ts">
-	import BskyPost from './BskyPost.svelte';
 	import { type State as PostComposerState } from './PostComposer.svelte';
 	import { AtpClient } from '$lib/at/client.svelte';
 	import { accounts } from '$lib/accounts';
-	import { type ResourceUri } from '@atcute/lexicons';
-	import { SvelteSet } from 'svelte/reactivity';
-	import { InfiniteLoader, LoaderState } from 'svelte-infinite';
 	import {
 		postCursors,
 		fetchTimeline,
@@ -14,13 +10,9 @@
 		fetchInteractionsToTimelineEnd,
 		accountPreferences
 	} from '$lib/state.svelte';
-	import Icon from '@iconify/svelte';
-	import { buildThreads, filterThreads, type ThreadPost } from '$lib/thread';
+	import { buildThreads, filterThreads } from '$lib/thread';
 	import type { Did } from '@atcute/lexicons/syntax';
-	import NotLoggedIn from './NotLoggedIn.svelte';
-	import LoadingSpinner from './LoadingSpinner.svelte';
-	import EndOfList from './EndOfList.svelte';
-	import LoadError from './LoadError.svelte';
+	import GenericTimelineView from './GenericTimelineView.svelte';
 
 	interface Props {
 		client?: AtpClient | null;
@@ -38,9 +30,7 @@
 		class: className = ''
 	}: Props = $props();
 
-	let reverseChronological = $state(true);
 	let viewOwnPosts = $state(true);
-	const expandedThreads = new SvelteSet<ResourceUri>();
 
 	const userDid = $derived(client?.user?.did);
 	const did = $derived(targetDid ?? userDid);
@@ -56,63 +46,27 @@
 		)
 	);
 
-	const loaderState = new LoaderState();
-	let scrollContainer = $state<HTMLDivElement>();
-	let loading = $state(false);
-	let loadError = $state('');
-
 	let fetchingInteractions = $state(false);
 	let scheduledFetchInteractions = $state(false);
 
 	const loadMore = async () => {
-		if (loading || !client || !userDid || !did) return;
-
-		loading = true;
-		loaderState.status = 'LOADING';
+		if (!client || !userDid || !did) return;
 
-		try {
-			await fetchTimeline(client, did, 7, showReplies, {
-				downwards: userDid === did ? 'sameAuthor' : 'none'
-			});
-			if (client.user && userDid) {
-				if (!fetchingInteractions) {
-					scheduledFetchInteractions = false;
-					fetchingInteractions = true;
-					await fetchInteractionsToTimelineEnd(client, userDid, did);
-					fetchingInteractions = false;
-				} else {
-					scheduledFetchInteractions = true;
-				}
+		await fetchTimeline(client, did, 7, showReplies, {
+			downwards: userDid === did ? 'sameAuthor' : 'none'
+		});
+		if (client.user && userDid) {
+			if (!fetchingInteractions) {
+				scheduledFetchInteractions = false;
+				fetchingInteractions = true;
+				await fetchInteractionsToTimelineEnd(client, userDid, did);
+				fetchingInteractions = false;
+			} else {
+				scheduledFetchInteractions = true;
 			}
-			loaderState.loaded();
-			const cursor = postCursors.get(did);
-			if (cursor?.end) loaderState.complete();
-		} catch (error) {
-			loadError = `${error}`;
-			loaderState.error();
-			loading = false;
-			return;
 		}
-
-		loading = false;
 	};
 
-	$effect(() => {
-		const isEmpty = threads.length === 0;
-		if (isEmpty && !loading && userDid && did) {
-			const cursor = postCursors.get(did);
-			if (!cursor?.end) loadMore();
-		}
-	});
-
-	$effect(() => {
-		did;
-		loaderState.reset();
-	});
-
-	// we want to load interactions when changing logged in user
-	// only on timelines that arent logged in users, because those are already
-	// loaded by loadMore
 	$effect(() => {
 		if (client && scheduledFetchInteractions && userDid && did && did !== userDid) {
 			if (!fetchingInteractions) {
@@ -128,91 +82,13 @@
 	});
 </script>
 
-{#snippet replyPost(post: ThreadPost, reverse: boolean = reverseChronological)}
-	<span
-		class="mb-1.5 flex items-center gap-1.5 overflow-hidden text-nowrap wrap-break-word overflow-ellipsis"
-	>
-		<span class="text-sm text-nowrap opacity-60">{reverse ? '↱' : '↳'}</span>
-		<BskyPost mini client={client!} {...post} />
-	</span>
-{/snippet}
-
-{#snippet threadsView()}
-	{#each threads as thread, i (thread.rootUri)}
-		<div class="flex w-full shrink-0 {reverseChronological ? 'flex-col' : 'flex-col-reverse'}">
-			{#if thread.branchParentPost}
-				{@render replyPost(thread.branchParentPost)}
-			{/if}
-			{#each thread.posts as post, idx (post.data.uri)}
-				{@const mini =
-					!expandedThreads.has(thread.rootUri) &&
-					thread.posts.length > 4 &&
-					idx > 0 &&
-					idx < thread.posts.length - 2}
-				{#if !mini}
-					<div class="mb-1.5">
-						<BskyPost
-							client={client!}
-							onQuote={(post) => {
-								postComposerState.focus = 'focused';
-								postComposerState.quoting = post;
-							}}
-							onReply={(post) => {
-								postComposerState.focus = 'focused';
-								postComposerState.replying = post;
-							}}
-							{...post}
-						/>
-					</div>
-				{:else if mini}
-					{#if idx === 1}
-						{@render replyPost(post, !reverseChronological)}
-						<button
-							class="mx-1.5 mt-1.5 mb-2.5 flex items-center gap-1.5 text-[color-mix(in_srgb,var(--nucleus-fg)_50%,var(--nucleus-accent))]/70 transition-colors hover:text-(--nucleus-accent)"
-							onclick={() => expandedThreads.add(thread.rootUri)}
-						>
-							<div class="mr-1 h-px w-20 rounded border-y-2 border-dashed opacity-50"></div>
-							<Icon
-								class="shrink-0"
-								icon={reverseChronological
-									? 'heroicons:bars-arrow-up-solid'
-									: 'heroicons:bars-arrow-down-solid'}
-								width={32}
-							/><span class="shrink-0 pb-1">view full chain</span>
-							<div class="ml-1 h-px w-full rounded border-y-2 border-dashed opacity-50"></div>
-						</button>
-					{:else if idx === thread.posts.length - 3}
-						{@render replyPost(post)}
-					{/if}
-				{/if}
-			{/each}
-		</div>
-		{#if i < threads.length - 1}
-			<div
-				class="mx-8 mt-3 mb-4 h-px bg-linear-to-r from-(--nucleus-accent)/30 to-(--nucleus-accent2)/30"
-			></div>
-		{/if}
-	{/each}
-{/snippet}
-
-<div
-	class="min-h-full p-2 [scrollbar-color:var(--nucleus-accent)_transparent] {className}"
-	bind:this={scrollContainer}
->
-	{#if did || $accounts.length > 0}
-		<InfiniteLoader {loaderState} triggerLoad={loadMore} loopDetectionTimeout={0}>
-			{@render threadsView()}
-			{#snippet noData()}
-				<EndOfList />
-			{/snippet}
-			{#snippet loading()}
-				<LoadingSpinner />
-			{/snippet}
-			{#snippet error()}
-				<LoadError error={loadError} onRetry={loadMore} />
-			{/snippet}
-		</InfiniteLoader>
-	{:else}
-		<NotLoggedIn />
-	{/if}
-</div>
+<GenericTimelineView
+	{client}
+	{threads}
+	bind:postComposerState
+	class={className}
+	isLoggedIn={!!(did || $accounts.length > 0)}
+	canLoad={!!(client && userDid && did)}
+	onLoadMore={loadMore}
+	isComplete={did ? postCursors.get(did)?.end : false}
+/>
diff --git a/src/lib/following.ts b/src/lib/following.ts
index 6b82474..96d9fe4 100644
--- a/src/lib/following.ts
+++ b/src/lib/following.ts
@@ -136,7 +136,6 @@ const getPostRate = (did: Did, posts: Map<ResourceUri, PostWithUri>, now: number
 
 export const calculateInteractionScores = (
 	user: Did,
-	followsMap: Map<ResourceUri, AppBskyGraphFollow.Main>,
 	allPosts: Map<Did, Map<ResourceUri, PostWithUri>>,
 	allBacklinks: Map<BacklinksSource, Map<ResourceUri, Map<Did, Set<string>>>>,
 	replyIndex: Map<Did, Set<ResourceUri>>,
diff --git a/src/lib/index.ts b/src/lib/index.ts
index 0f7b29b..59ace5b 100644
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -31,6 +31,7 @@ export const replySource: BacklinksSource = 'app.bsky.feed.post:reply.parent.uri
 export const replyRootSource: BacklinksSource = 'app.bsky.feed.post:reply.root.uri';
 export const blockSource: BacklinksSource = 'app.bsky.graph.block:subject';
 
+// returns nanos
 export const timestampFromCursor = (cursor: string | undefined) => {
 	if (!cursor) return undefined;
 	try {
diff --git a/src/lib/state.svelte.ts b/src/lib/state.svelte.ts
index a25f223..22a22c9 100644
--- a/src/lib/state.svelte.ts
+++ b/src/lib/state.svelte.ts
@@ -348,19 +348,22 @@ export const updateAccountPreferences = async (
 	await syncAccountPreferences(did);
 };
 
-export const follows = new SvelteMap<Did, SvelteMap<ResourceUri, AppBskyGraphFollow.Main>>();
+type FollowWithUri = {
+	uri: ResourceUri;
+	record: AppBskyGraphFollow.Main;
+};
+export const follows = new SvelteMap<Did, SvelteMap<Did, FollowWithUri>>();
 
 export const addFollows = (
 	did: Did,
-	followMap: Iterable<[ResourceUri, AppBskyGraphFollow.Main]>
+	followList: Iterable<FollowWithUri>
 ) => {
 	let map = follows.get(did)!;
 	if (!map) {
-		map = new SvelteMap(followMap);
+		map = new SvelteMap();
 		follows.set(did, map);
-		return;
 	}
-	for (const [uri, record] of followMap) map.set(uri, record);
+	for (const follow of followList) map.set(follow.record.subject, follow);
 };
 
 export const fetchFollows = async (
@@ -374,7 +377,10 @@ export const fetchFollows = async (
 	}
 	addFollows(
 		account.did,
-		res.value.records.map((follow) => [follow.uri, follow.value as AppBskyGraphFollow.Main])
+		res.value.records.map((follow) => ({
+			uri: follow.uri,
+			record: follow.value as AppBskyGraphFollow.Main
+		}))
 	);
 	return res.value.records.values().map((follow) => follow.value as AppBskyGraphFollow.Main);
 };
@@ -461,10 +467,7 @@ export const fetchFollowingTimeline = async (client: AtpClient, targetDid?: Did,
 		return;
 	}
 
-	const followsMap = follows.get(userDid);
-	const subjects = new Set<Did>();
-	if (followsMap)
-		for (const follow of followsMap.values()) subjects.add(follow.subject);
+	const subjects = new Set(follows.get(userDid)?.keys());
 	subjects.add(userDid);
 
 	// 2. Find the "newest" cursor(s)
@@ -1000,34 +1003,25 @@ export const handleJetstreamEvent = async (event: JetstreamEvent) => {
 			addPosts(hydrated.value.values());
 			addTimeline(did, hydrated.value.keys());
 
+			if (record.reply) {
+				const parentDid = extractDidFromUri(record.reply.parent.uri)!;
+				addTimeline(parentDid, [uri]);
+			}
+
 			// Broadcast to following feeds of local accounts
 			for (const account of get(accounts)) {
 				// does this account follow the author?
 				let isFollowing = account.did === did;
 				if (!isFollowing) {
 					const accountFollows = follows.get(account.did);
-					if (accountFollows) {
-						for (const follow of accountFollows.values()) {
-							if (follow.subject === did) {
-								isFollowing = true;
-								break;
-							}
-						}
-					}
+					if (accountFollows?.has(did)) isFollowing = true;
 				}
 
 				if (isFollowing) {
 					const feed = followingFeed.get(account.did);
-					if (feed) {
-						for (const uri of hydrated.value.keys()) feed.add(uri);
-					}
+					if (feed) for (const uri of hydrated.value.keys()) feed.add(uri);
 				}
 			}
-
-			if (record.reply) {
-				const parentDid = extractDidFromUri(record.reply.parent.uri)!;
-				addTimeline(parentDid, [uri]);
-			}
 		} else if (commit.operation === 'delete') {
 			deletePost(uri);
 		}
diff --git a/src/lib/thread.ts b/src/lib/thread.ts
index fa7a2bb..396b8b5 100644
--- a/src/lib/thread.ts
+++ b/src/lib/thread.ts
@@ -5,6 +5,7 @@ import type { Account } from './accounts';
 import { expect } from './result';
 import type { PostWithUri } from './at/fetch';
 import { isBlockedBy } from './state.svelte';
+import { timestampFromCursor } from '$lib';
 
 export type ThreadPost = {
 	data: PostWithUri;
@@ -42,6 +43,7 @@ export const buildThreads = (
 		const rootUri = (data.record.reply?.root.uri as ResourceUri) || uri;
 		const parentUri = (data.record.reply?.parent.uri as ResourceUri) || null;
 
+		const cursorTime = timestampFromCursor(parsedUri.rkey);
 		const post: ThreadPost = {
 			data,
 			account,
@@ -49,7 +51,7 @@ export const buildThreads = (
 			rkey: parsedUri.rkey,
 			parentUri,
 			depth: 0,
-			newestTime: new Date(data.record.createdAt).getTime(),
+			newestTime: cursorTime ? cursorTime / 1000 : new Date(data.record.createdAt).getTime(),
 			isBlocked: isBlockedBy(parsedUri.repo, account),
 			isMuted: mutes.includes(parsedUri.repo),
 		};
@@ -169,12 +171,15 @@ export const hasNonOwnPost = (posts: ThreadPost[], accounts: Account[]) =>
 
 export type FilterOptions = {
 	viewOwnPosts: boolean;
+	filterReplies?: boolean;
 	filterRootsToDids?: Set<Did>;
 };
 
 export const filterThreads = (threads: Thread[], accounts: Account[], opts: FilterOptions) =>
 	threads.filter((thread) => {
 		if (thread.posts.length === 0) return false;
+		if (opts.filterReplies && thread.posts[0].data.record.reply) return false;
+
 		if (!opts.viewOwnPosts) if (hasNonOwnPost(thread.posts, accounts)) return false;
 
 		if (opts.filterRootsToDids) {
diff --git a/src/routes/[...catchall]/+page.svelte b/src/routes/[...catchall]/+page.svelte
index 5016df9..f9eb676 100644
--- a/src/routes/[...catchall]/+page.svelte
+++ b/src/routes/[...catchall]/+page.svelte
@@ -35,6 +35,7 @@
 	import type { Sort } from '$lib/following';
 	import { SvelteMap } from 'svelte/reactivity';
 	import FeedSelector from '$components/FeedSelector.svelte';
+	import { extractDidFromUri } from '$lib';
 
 	const { data: loadData }: PageProps = $props();
 
@@ -166,9 +167,7 @@
 
 	$effect(() => {
 		const wantedDids: Did[] = ['did:web:guestbook.gaze.systems'];
-		const followDids = follows
-			.values()
-			.flatMap((followMap) => followMap.values().map((follow) => follow.subject));
+		const followDids = follows.values().flatMap((followMap) => followMap.keys());
 		const accountDids = $accounts.values().map((account) => account.did);
 		wantedDids.push(...followDids, ...accountDids);
 		// console.log('updating jetstream options:', wantedDids);
@@ -311,6 +310,10 @@
 								onPostSent={(post) => {
 									addPosts([post]);
 									addTimeline(selectedDid!, [post.uri]);
+									if (post.record.reply) {
+										const parentDid = extractDidFromUri(post.record.reply.parent.uri)!;
+										addTimeline(parentDid, [post.uri]);
+									}
 								}}
 								bind:_state={postComposerState}
 							/>
-- 
2.51.2