refactor fetching, state and dropdown hover logic

Replace fetchPostsWithBacklinks with fetchPosts(withBacklinks) and
adjust hydratePosts to accept a cacheFn. Add caching for listRecords in
AtpClient. Overhaul state management to handle post chains, hydration
caching and timeline traversal. Improve Dropdown hover logic to prevent
premature closes when moving between trigger and content. Introduce
explicit Ok/Err result types and update helpers accordingly.

src/components/BskyPost.svelte

···
 		type ResourceUri
 	} from '@atcute/lexicons';
 	import { expect, ok } from '$lib/result';
-	import { generateColorForDid } from '$lib/accounts';
+	import { accounts, generateColorForDid } from '$lib/accounts';
 	import ProfilePicture from './ProfilePicture.svelte';
 	import { isBlob } from '@atcute/lexicons/interfaces';
 	import { blob, img } from '$lib/cdn';
 	import BskyPost from './BskyPost.svelte';
 	import Icon from '@iconify/svelte';
 	import {
-		clients,
 		allPosts,
 		pulsingPostId,
 		currentTime,
···
 	} from '$lib/state.svelte';
 	import type { PostWithUri } from '$lib/at/fetch';
 	import { onMount } from 'svelte';
-	import { type AtprotoDid } from '@atcute/lexicons/syntax';
 	import { derived } from 'svelte/store';
 	import Device from 'svelte-device-info';
 	import Dropdown from './Dropdown.svelte';
···
 	}: Props = $props();
 
 	const selectedDid = $derived(client.user?.did ?? null);
-	const actionClient = $derived(clients.get(did as AtprotoDid));
+	const isLoggedInUser = $derived($accounts.some((acc) => acc.did === did));
 
 	const aturi = $derived(`at://${did}/app.bsky.feed.post/${rkey}` as CanonicalResourceUri);
 	const color = $derived(generateColorForDid(did));
···
 			return;
 		}
 
-		actionClient?.atcute
+		client?.atcute
 			?.post('com.atproto.repo.deleteRecord', {
 				input: {
 					collection: 'app.bsky.feed.post',
···
 		style="background: {color}36; border-color: {color}99;"
 		bind:isOpen={profileOpen}
 		trigger={profileInline}
+		onMouseEnter={() => (profileOpen = true)}
+		onMouseLeave={() => (profileOpen = false)}
 	>
 		<ProfileInfo {client} {did} {handle} {profile} />
 	</Dropdown>
···
 			{@render dropdownItem('heroicons:clipboard-20-solid', 'copy post text', () =>
 				navigator.clipboard.writeText(post.record.text)
 			)}
-			{#if actionClient}
+			{#if isLoggedInUser}
 				<div class="my-0.75 h-px w-full opacity-60" style="background: {color};"></div>
 				{@render dropdownItem(
 					deleteState === 'confirm' ? 'heroicons:check-20-solid' : 'heroicons:trash-20-solid',

src/components/Dropdown.svelte

···
 		placement?: Placement;
 		offsetDistance?: number;
 		position?: { x: number; y: number };
+		onMouseEnter?: () => void;
+		onMouseLeave?: () => void;
 	}
 
 	let {
···
 		placement = 'bottom-start',
 		offsetDistance = 2,
 		position = $bindable(),
+		onMouseEnter,
+		onMouseLeave,
 		...restProps
 	}: Props = $props();
 
 	let triggerRef: HTMLElement | undefined = $state();
 	let contentRef: HTMLElement | undefined = $state();
 	let cleanup: (() => void) | null = null;
+
+	// State-based tracking for hover logic
+	let isTriggerHovered = false;
+	let isContentHovered = false;
+	let closeTimer: ReturnType<typeof setTimeout>;
 
 	const updatePosition = async () => {
 		const { x, y } = await computePosition(triggerRef!, contentRef!, {
···
 
 	const handleScroll = handleClose;
 
+	// The central check: "Should we close now?"
+	const scheduleCloseCheck = () => {
+		clearTimeout(closeTimer);
+		closeTimer = setTimeout(() => {
+			// Only close if we are NOT on the trigger AND NOT on the content
+			if (!isTriggerHovered && !isContentHovered) if (isOpen && onMouseLeave) onMouseLeave();
+		}, 30); // Small buffer to handle the physical gap between elements
+	};
+
+	const handleTriggerEnter = () => {
+		isTriggerHovered = true;
+		clearTimeout(closeTimer); // We are safe, cancel any pending close
+		if (!isOpen && onMouseEnter) onMouseEnter();
+	};
+
+	const handleTriggerLeave = () => {
+		isTriggerHovered = false;
+		scheduleCloseCheck(); // We left the trigger, check if we should close
+	};
+
+	const handleContentEnter = () => {
+		isContentHovered = true;
+		clearTimeout(closeTimer); // We made it to the content, cancel close
+	};
+
+	const handleContentLeave = () => {
+		isContentHovered = false;
+		scheduleCloseCheck(); // We left the content, check if we should close
+	};
+
+	// Reset state if the menu is closed externally
+	$effect(() => {
+		if (!isOpen) {
+			isContentHovered = false;
+			clearTimeout(closeTimer);
+		}
+	});
+
 	$effect(() => {
 		if (isOpen) {
 			cleanup = autoUpdate(triggerRef!, contentRef!, updatePosition);
···
 		}
 	});
 
-	onMount(() => {
-		return () => {
-			if (cleanup) cleanup();
-		};
+	onMount(() => () => {
+		if (cleanup) cleanup();
+		clearTimeout(closeTimer);
 	});
 </script>
 
 <svelte:window onkeydown={handleEscape} onmousedown={handleClickOutside} onscroll={handleScroll} />
 
-<div role="button" tabindex="0" bind:this={triggerRef}>
+<div
+	role="button"
+	tabindex="0"
+	bind:this={triggerRef}
+	onmouseenter={handleTriggerEnter}
+	onmouseleave={handleTriggerLeave}
+>
 	{@render trigger?.()}
 </div>
 
···
 		style={restProps.style}
 		role="menu"
 		tabindex="-1"
+		onmouseenter={handleContentEnter}
+		onmouseleave={handleContentLeave}
 	>
 		{@render children?.()}
 	</div>

src/components/FollowingView.svelte

···
 		selectedDid: Did;
 		selectedClient: AtpClient;
 		onProfileClick: (did: AtprotoDid) => void;
+		followingSort: Sort;
 	}
 
-	const { selectedDid, selectedClient, onProfileClick }: Props = $props();
+	let {
+		selectedDid,
+		selectedClient,
+		onProfileClick,
+		followingSort = $bindable('active')
+	}: Props = $props();
 
-	let followingSort: Sort = $state('active' as Sort);
 	const followsMap = $derived(follows.get(selectedDid));
 
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any

src/components/ProfileInfo.svelte

···
 		did: Did;
 		handle?: string;
 		profile?: AppBskyActorProfile.Main | null;
-		interactive?: boolean;
 	}
 
-	let { client, did, handle, profile = $bindable(null), interactive = true }: Props = $props();
+	let { client, did, handle, profile = $bindable(null) }: Props = $props();
 
 	onMount(async () => {
 		await Promise.all([

src/components/ProfileView.svelte

···
 
 			<div class="my-4 h-px bg-white/10"></div>
 
-			<TimelineView {client} targetDid={did} bind:postComposerState class="min-h-[50vh]" />
+			<TimelineView
+				showReplies={false}
+				{client}
+				targetDid={did}
+				bind:postComposerState
+				class="min-h-[50vh]"
+			/>
 		</div>
 	{/if}
 </div>

src/components/TimelineView.svelte

···
 		targetDid?: AtprotoDid;
 		postComposerState: PostComposerState;
 		class?: string;
+		// whether to show replies that are not the user's own posts
+		showReplies?: boolean;
 	}
 
 	let {
 		client = null,
 		targetDid = undefined,
+		showReplies = true,
 		postComposerState = $bindable(),
 		class: className = ''
 	}: Props = $props();
···
 	const did = $derived(targetDid ?? client?.user?.did);
 
 	const threads = $derived(
+		// todo: apply showReplies here
 		filterThreads(
 			did && timelines.has(did) ? buildThreads(did, timelines.get(did)!, allPosts) : [],
 			$accounts,
···
 		loaderState.status = 'LOADING';
 
 		try {
-			await fetchTimeline(did as AtprotoDid);
+			await fetchTimeline(did as AtprotoDid, 7, showReplies);
 			// interaction fetching is done lazily so we dont block loading posts
 			fetchMoreInteractions = true;
 			loaderState.loaded();

src/lib/at/client.ts

···
 	return res.value;
 });
 
-type ListRecordsParams = {
-	atcute: AtcuteClient;
-	did: Did;
-	collection: Nsid;
-	cursor?: string;
-	limit?: number;
-};
-const cacheWithListRecords = cacheWithRecords.define(
-	'listRecords',
-	async (params: ListRecordsParams) => {
-		const res = await params.atcute.get('com.atproto.repo.listRecords', {
-			params: {
-				repo: params.did,
-				collection: params.collection,
-				cursor: params.cursor,
-				limit: params.limit ?? 100,
-				reverse: false
-			}
-		});
-		if (!res.ok) return err(`${res.data.error}: ${res.data.message ?? 'no details'}`);
-
-		for (const record of res.data.records)
-			await cache.set('fetchRecord', `fetchRecord~${record.uri}`, record, 60 * 60 * 24);
-
-		return ok(res.data);
-	}
-);
-
-const cache = cacheWithListRecords;
+const cache = cacheWithRecords;
 
 export class AtpClient {
 	public atcute: AtcuteClient | null = null;
···
 		Result<InferXRPCBodyOutput<(typeof ComAtprotoRepoListRecords.mainSchema)['output']>, string>
 	> {
 		if (!this.atcute || !this.user) return err('not authenticated');
-		try {
-			return (await cache.listRecords({
-				atcute: this.atcute,
-				did: this.user.did,
+		const res = await this.atcute.get('com.atproto.repo.listRecords', {
+			params: {
+				repo: this.user.did,
 				collection,
 				cursor,
-				limit
-			})) as Awaited<ReturnType<typeof this.listRecords>>;
-		} catch (e) {
-			return err(String(e));
-		}
+				limit,
+				reverse: false
+			}
+		});
+		if (!res.ok) return err(`${res.data.error}: ${res.data.message ?? 'no details'}`);
+
+		for (const record of res.data.records)
+			await cache.set('fetchRecord', `fetchRecord~${record.uri}`, record, 60 * 60 * 24);
+
+		return ok(res.data);
 	}
 
 	async listRecordsUntil<Collection extends keyof Records>(

src/lib/at/fetch.ts

···
 	type ResourceUri
 } from '@atcute/lexicons';
 import { type AtpClient } from './client';
-import { err, expect, ok, type Result } from '$lib/result';
+import { err, expect, ok, type Ok, type Result } from '$lib/result';
 import type { Backlinks } from './constellation';
 import { AppBskyFeedPost } from '@atcute/bluesky';
-import type { AtprotoDid } from '@atcute/lexicons/syntax';
+import type { AtprotoDid, Did, RecordKey } from '@atcute/lexicons/syntax';
 import { replySource } from '$lib';
 
 export type PostWithUri = { uri: ResourceUri; cid: Cid | undefined; record: AppBskyFeedPost.Main };
 export type PostWithBacklinks = PostWithUri & {
-	replies: Backlinks;
+	replies?: Backlinks;
 };
-export type PostsWithReplyBacklinks = PostWithBacklinks[];
 
-export const fetchPostsWithBacklinks = async (
+export const fetchPosts = async (
 	client: AtpClient,
 	cursor?: string,
-	limit?: number
-): Promise<Result<{ posts: PostsWithReplyBacklinks; cursor?: string }, string>> => {
+	limit?: number,
+	withBacklinks: boolean = true
+): Promise<Result<{ posts: PostWithBacklinks[]; cursor?: string }, string>> => {
 	const recordsList = await client.listRecords('app.bsky.feed.post', cursor, limit);
 	if (!recordsList.ok) return err(`can't retrieve posts: ${recordsList.error}`);
 	cursor = recordsList.value.cursor;
 	const records = recordsList.value.records;
 
+	if (!withBacklinks) {
+		return ok({
+			posts: records.map((r) => ({
+				uri: r.uri,
+				cid: r.cid,
+				record: r.value as AppBskyFeedPost.Main
+			})),
+			cursor
+		});
+	}
+
 	try {
 		const allBacklinks = await Promise.all(
 			records.map(async (r): Promise<PostWithBacklinks> => {
···
 export const hydratePosts = async (
 	client: AtpClient,
 	repo: AtprotoDid,
-	data: PostsWithReplyBacklinks
+	data: PostWithBacklinks[],
+	cacheFn: (did: Did, rkey: RecordKey) => Ok<PostWithUri> | undefined
 ): Promise<Result<Map<ResourceUri, PostWithUri>, string>> => {
 	let posts: Map<ResourceUri, PostWithUri> = new Map();
 	try {
 		const allPosts = await Promise.all(
 			data.map(async (post) => {
 				const result: PostWithUri[] = [post];
-				const replies = await Promise.all(
-					post.replies.records.map(async (r) => {
-						const reply = await client.getRecord(AppBskyFeedPost.mainSchema, r.did, r.rkey);
-						if (!reply.ok) throw `cant fetch reply: ${reply.error}`;
-						return reply.value;
-					})
-				);
-				result.push(...replies);
+				if (post.replies) {
+					const replies = await Promise.all(
+						post.replies.records.map(async (r) => {
+							const reply =
+								cacheFn(r.did, r.rkey) ??
+								(await client.getRecord(AppBskyFeedPost.mainSchema, r.did, r.rkey));
+							if (!reply.ok) throw `cant fetch reply: ${reply.error}`;
+							return reply.value;
+						})
+					);
+					result.push(...replies);
+				}
 				return result;
 			})
 		);
···
 			const parentUri = parent.uri as CanonicalResourceUri;
 			// if we already have this parent, then we already fetched this chain / are fetching it
 			if (posts.has(parentUri)) return;
-			const p = await client.getRecordUri(AppBskyFeedPost.mainSchema, parentUri);
+			const parsedParentUri = expect(parseCanonicalResourceUri(parentUri));
+			const p =
+				cacheFn(parsedParentUri.repo, parsedParentUri.rkey) ??
+				(await client.getRecord(
+					AppBskyFeedPost.mainSchema,
+					parsedParentUri.repo,
+					parsedParentUri.rkey
+				));
 			if (p.ok) {
 				posts.set(p.value.uri, p.value);
 				parent = p.value.record.reply?.parent;
···
 				if (reply.did !== postRepo) continue;
 				// if we already have this reply, then we already fetched this chain / are fetching it
 				if (posts.has(`at://${reply.did}/${reply.collection}/${reply.rkey}`)) continue;
-				const record = await client.getRecord(AppBskyFeedPost.mainSchema, reply.did, reply.rkey);
+				const record =
+					cacheFn(reply.did, reply.rkey) ??
+					(await client.getRecord(AppBskyFeedPost.mainSchema, reply.did, reply.rkey));
 				if (!record.ok) break; // TODO: this doesnt handle deleted posts in between
 				posts.set(record.value.uri, record.value);
 				promises.push(fetchDownwardsChain(record.value));

src/lib/result.ts

···
-export type Result<T, E> =
-	| {
-			ok: true;
-			value: T;
-	  }
-	| {
-			ok: false;
-			error: E;
-	  };
+export type Ok<T> = {
+	ok: true;
+	value: T;
+};
+export type Err<E> = {
+	ok: false;
+	error: E;
+};
+export type Result<T, E> = Ok<T> | Err<E>;
 
-export const ok = <T, E>(value: T): Result<T, E> => {
+export const ok = <T>(value: T): Ok<T> => {
 	return { ok: true, value };
 };
-export const err = <T, E>(error: E): Result<T, E> => {
+export const err = <E>(error: E): Err<E> => {
 	return { ok: false, error };
 };
 export const expect = <T, E>(v: Result<T, E>, msg: string = 'expected result to not be error:') => {

src/lib/state.svelte.ts

···
-import { writable } from 'svelte/store';
+import { get, writable } from 'svelte/store';
 import {
 	AtpClient,
 	newPublicClient,
···
 	type NotificationsStreamEvent
 } from './at/client';
 import { SvelteMap, SvelteDate, SvelteSet } from 'svelte/reactivity';
-import type { Did, InferOutput, Nsid, ResourceUri } from '@atcute/lexicons';
-import { fetchPostsWithBacklinks, hydratePosts, type PostWithUri } from './at/fetch';
+import type { Did, InferOutput, Nsid, RecordKey, ResourceUri } from '@atcute/lexicons';
+import { fetchPosts, hydratePosts, type PostWithUri } from './at/fetch';
 import { parseCanonicalResourceUri, type AtprotoDid } from '@atcute/lexicons/syntax';
 import { AppBskyFeedPost, type AppBskyGraphFollow } from '@atcute/bluesky';
 import type { ComAtprotoRepoListRecords } from '@atcute/atproto';
 import type { JetstreamSubscription, JetstreamEvent } from '@atcute/jetstream';
-import { expect } from './result';
+import { expect, ok } from './result';
 import type { Backlink, BacklinksSource } from './at/constellation';
 import { now as tidNow } from '@atcute/tid';
 import type { Records } from '@atcute/lexicons/ambient';
···
 // did -> post uris that are replies to that did
 export const replyIndex = new SvelteMap<Did, SvelteSet<ResourceUri>>();
 
+export const getPost = (did: Did, rkey: RecordKey) =>
+	allPosts.get(did)?.get(`at://${did}/app.bsky.feed.post/${rkey}`);
+const hydrateCacheFn: Parameters<typeof hydratePosts>[3] = (did, rkey) => {
+	const cached = getPost(did, rkey);
+	return cached ? ok(cached) : undefined;
+};
+
 export const addPostsRaw = (
 	did: AtprotoDid,
 	newPosts: InferOutput<ComAtprotoRepoListRecords.mainSchema['output']['schema']>
 ) => {
-	const postsWithUri = newPosts.records.map((post): [ResourceUri, PostWithUri] => [
-		post.uri,
-		{ cid: post.cid, uri: post.uri, record: post.value as AppBskyFeedPost.Main } as PostWithUri
-	]);
+	const postsWithUri = newPosts.records.map(
+		(post) =>
+			({ cid: post.cid, uri: post.uri, record: post.value as AppBskyFeedPost.Main }) as PostWithUri
+	);
 	addPosts(postsWithUri);
 };
 
-export const addPosts = (newPosts: Iterable<[ResourceUri, PostWithUri]>) => {
-	for (const [uri, post] of newPosts) {
-		const parsedUri = expect(parseCanonicalResourceUri(uri));
+export const addPosts = (newPosts: Iterable<PostWithUri>) => {
+	for (const post of newPosts) {
+		const parsedUri = expect(parseCanonicalResourceUri(post.uri));
 		let posts = allPosts.get(parsedUri.repo);
 		if (!posts) {
 			posts = new SvelteMap();
 			allPosts.set(parsedUri.repo, posts);
 		}
-		posts.set(uri, post);
+		posts.set(post.uri, post);
 		const link: Backlink = {
 			did: parsedUri.repo,
 			collection: parsedUri.collection,
···
 					set = new SvelteSet();
 					replyIndex.set(parentDid, set);
 				}
-				set.add(uri);
+				set.add(post.uri);
 			}
 		}
 	}
···
 export const timelines = new SvelteMap<Did, SvelteSet<ResourceUri>>();
 export const postCursors = new SvelteMap<Did, { value?: string; end: boolean }>();
 
+const traversePostChain = (post: PostWithUri) => {
+	const result = [post.uri];
+	const parentUri = post.record.reply?.parent.uri;
+	if (parentUri) {
+		const parentPost = allPosts.get(extractDidFromUri(parentUri)!)?.get(parentUri);
+		if (parentPost) result.push(...traversePostChain(parentPost));
+	}
+	return result;
+};
 export const addTimeline = (did: Did, uris: Iterable<ResourceUri>) => {
 	let timeline = timelines.get(did);
 	if (!timeline) {
 		timeline = new SvelteSet();
 		timelines.set(did, timeline);
 	}
-	for (const uri of uris) timeline.add(uri);
+	for (const uri of uris) {
+		const post = allPosts.get(did)?.get(uri);
+		// we need to traverse the post chain to add all posts in the chain to the timeline
+		// because the parent posts might not be in the timeline yet
+		const chain = post ? traversePostChain(post) : [];
+		for (const uri of chain) timeline.add(uri);
+	}
 };
 
-export const fetchTimeline = async (did: AtprotoDid, limit: number = 6) => {
+export const fetchTimeline = async (
+	did: AtprotoDid,
+	limit: number = 6,
+	withBacklinks: boolean = true
+) => {
 	const targetClient = await getClient(did);
 
 	const cursor = postCursors.get(did);
 	if (cursor && cursor.end) return;
 
-	const accPosts = await fetchPostsWithBacklinks(targetClient, cursor?.value, limit);
+	const accPosts = await fetchPosts(targetClient, cursor?.value, limit, withBacklinks);
 	if (!accPosts.ok) throw `cant fetch posts ${did}: ${accPosts.error}`;
 
 	// if the cursor is undefined, we've reached the end of the timeline
 	postCursors.set(did, { value: accPosts.value.cursor, end: !accPosts.value.cursor });
-	const hydrated = await hydratePosts(targetClient, did, accPosts.value.posts);
+	const hydrated = await hydratePosts(targetClient, did, accPosts.value.posts, hydrateCacheFn);
 	if (!hydrated.ok) throw `cant hydrate posts ${did}: ${hydrated.error}`;
 
-	addPosts(hydrated.value);
+	addPosts(hydrated.value.values());
 	addTimeline(did, hydrated.value.keys());
 
 	console.log(`${did}: fetchTimeline`, accPosts.value.cursor);
···
 				// assume record is valid, we trust the jetstream
 				record: record as AppBskyFeedPost.Main
 			};
-			addPosts([[uri, post]]);
+			addPosts([post]);
 			addTimeline(did, [uri]);
 		} else if (commit.operation === 'delete') {
 			allPosts.get(did)?.delete(uri);
···
 	if (!subjectPost.ok) return;
 
 	const parsedSourceUri = expect(parseCanonicalResourceUri(event.data.link.source_record));
-	const hydrated = await hydratePosts(client, did, [
+	const posts = [
 		{
 			record: subjectPost.value.record,
 			uri: event.data.link.subject,
···
 				]
 			}
 		}
-	]);
+	];
+	const hydrated = await hydratePosts(client, did, posts, hydrateCacheFn);
 	if (!hydrated.ok) {
 		console.error(`cant hydrate posts ${did}: ${hydrated.error}`);
 		return;
 	}
 
 	// console.log(hydrated);
-	addPosts(hydrated.value);
+	addPosts(hydrated.value.values());
 	addTimeline(did, hydrated.value.keys());
 };
 
···
 	setInterval(() => {
 		currentTime.setTime(Date.now());
 	}, 1000);
+
+export type View = 'timeline' | 'notifications' | 'following' | 'settings' | 'profile';
+export const currentView = writable<View>('timeline');
+export const previousView = writable<View>('timeline');
+export const setView = (view: View) => {
+	previousView.set(get(currentView));
+	currentView.set(view);
+};

src/lib/theme.ts

···
 	const id = input.split(':').pop() || input;
 
 	hash = 0;
-	for (let i = 0; i < Math.min(10, id.length); i++) {
-		hash = (hash << 4) + id.charCodeAt(i);
-	}
+	for (let i = 0; i < Math.min(10, id.length); i++) hash = (hash << 4) + id.charCodeAt(i);
 	hash = hash >>> 0;
 
 	// magic mixing

src/routes/+page.svelte

···
 		fetchFollows,
 		follows,
 		notificationStream,
-		allPosts,
 		viewClient,
 		jetstream,
 		handleJetstreamEvent,
-		handleNotification
+		handleNotification,
+		addPosts,
+		addTimeline,
+		type View,
+		currentView,
+		previousView,
+		setView
 	} from '$lib/state.svelte';
 	import { get } from 'svelte/store';
 	import Icon from '@iconify/svelte';
···
 	import type { PageProps } from './+page';
 	import { JetstreamSubscription } from '@atcute/jetstream';
 	import { settings } from '$lib/settings';
+	import type { Sort } from '$lib/following';
 
 	const { data: loadData }: PageProps = $props();
 
···
 		handleAccountSelected(newAccounts[0]?.did);
 	};
 
-	type View = 'timeline' | 'notifications' | 'following' | 'settings' | 'profile';
-	let currentView = $state<View>('timeline');
+	let followingSort = $state('active' as Sort);
+
 	let animClass = $state('animate-fade-in-scale');
 	let scrollPositions = new SvelteMap<View, number>();
 	let viewingProfileDid = $state<AtprotoDid | null>(null);
-	let previousView = $state<View>('timeline');
 
 	const viewOrder: Record<View, number> = {
 		timeline: 0,
···
 		profile: 4
 	};
 
-	const switchView = async (newView: View) => {
-		if (currentView === newView) return;
-		scrollPositions.set(currentView, window.scrollY);
+	const switchView = async () => {
+		scrollPositions.set($previousView, window.scrollY);
 
-		const direction = viewOrder[newView] > viewOrder[currentView] ? 'right' : 'left';
-		// Profile always slides in from right unless going back
-		if (newView === 'profile') animClass = 'animate-slide-in-right';
-		else if (currentView === 'profile') animClass = 'animate-slide-in-left';
+		const direction = viewOrder[$previousView] > viewOrder[$currentView] ? 'right' : 'left';
+		// profile always slides in from right unless going back
+		if ($currentView === 'profile') animClass = 'animate-slide-in-left';
+		else if ($previousView === 'profile') animClass = 'animate-slide-in-right';
 		else animClass = direction === 'right' ? 'animate-slide-in-right' : 'animate-slide-in-left';
-		// Don't overwrite previousView if we're just going to profile
-		if (newView !== 'profile' && currentView !== 'profile') previousView = currentView;
-		else if (newView === 'profile' && currentView !== 'profile') previousView = currentView;
-		currentView = newView;
 
 		await tick();
 
-		window.scrollTo({ top: scrollPositions.get(newView) || 0, behavior: 'instant' });
+		window.scrollTo({ top: scrollPositions.get($currentView) || 0, behavior: 'instant' });
 	};
+	currentView.subscribe(switchView);
 
 	const goToProfile = (did: AtprotoDid) => {
 		viewingProfileDid = did;
-		switchView('profile');
+		setView('profile');
 	};
 
 	let postComposerState = $state<PostComposerState>({ type: 'null' });
 	let showScrollToTop = $state(false);
 	const handleScroll = () => {
-		if (currentView === 'timeline') showScrollToTop = window.scrollY > 300;
+		if ($currentView === 'timeline') showScrollToTop = window.scrollY > 300;
 	};
-	const scrollToTop = () => {
-		window.scrollTo({ top: 0, behavior: 'smooth' });
-	};
+	const scrollToTop = () => window.scrollTo({ top: 0, behavior: 'smooth' });
 
 	onMount(() => {
 		window.addEventListener('scroll', handleScroll);
···
 					'app.bsky.feed.post:reply.parent.uri',
 					'app.bsky.feed.post:embed.record.record.uri',
 					'app.bsky.feed.post:embed.record.uri',
-					'app.bsky.feed.repost:subject.uri'
+					'app.bsky.feed.repost:subject.uri',
+					'app.bsky.feed.like:subject.uri',
+					'app.bsky.graph.follow:subject'
 				)
 			);
 		});
···
 	<div class="flex-1">
 		<!-- timeline -->
 		<TimelineView
-			class={currentView === 'timeline' ? `${animClass}` : 'hidden'}
+			class={$currentView === 'timeline' ? `${animClass}` : 'hidden'}
 			client={selectedClient}
 			bind:postComposerState
 		/>
 
-		{#if currentView === 'settings'}
+		{#if $currentView === 'settings'}
 			<div class={animClass}>
 				<SettingsView />
 			</div>
 		{/if}
-		{#if currentView === 'notifications'}
+		{#if $currentView === 'notifications'}
 			<div class={animClass}>
 				<NotificationsView />
 			</div>
 		{/if}
-		{#if currentView === 'following'}
+		{#if $currentView === 'following'}
 			<div class={animClass}>
 				<FollowingView
 					selectedClient={selectedClient!}
 					selectedDid={selectedDid!}
 					onProfileClick={goToProfile}
+					bind:followingSort
 				/>
 			</div>
 		{/if}
-		{#if currentView === 'profile' && viewingProfileDid}
+		{#if $currentView === 'profile' && viewingProfileDid}
 			<div class={animClass}>
 				<ProfileView
 					client={selectedClient!}
 					did={viewingProfileDid}
-					onBack={() => switchView(previousView)}
+					onBack={() => setView($previousView)}
 					bind:postComposerState
 				/>
 			</div>
···
 
 		<div
 			class="
-			{currentView === 'timeline' || currentView === 'following' || currentView === 'profile'
+			{$currentView === 'timeline' || $currentView === 'following' || $currentView === 'profile'
 				? ''
 				: 'hidden'}
 			z-20 w-full max-w-2xl p-2.5 px-4 pb-1 transition-all
···
 						<div class="flex-1">
 							<PostComposer
 								client={selectedClient}
-								onPostSent={(post) => allPosts.get(selectedDid!)?.set(post.uri, post)}
+								onPostSent={(post) => {
+									addPosts([post]);
+									addTimeline(selectedDid!, [post.uri]);
+								}}
 								bind:_state={postComposerState}
 							/>
 						</div>
···
 					</div>
 					<div class="grow"></div>
 					{@render appButton(
-						() => switchView('timeline'),
+						() => setView('timeline'),
 						'heroicons:home',
 						'timeline',
-						currentView === 'timeline',
+						$currentView === 'timeline',
 						'heroicons:home-solid'
 					)}
 					{@render appButton(
-						() => switchView('following'),
+						() => setView('following'),
 						'heroicons:users',
 						'following',
-						currentView === 'following',
+						$currentView === 'following',
 						'heroicons:users-solid'
 					)}
 					{@render appButton(
-						() => switchView('notifications'),
+						() => setView('notifications'),
 						'heroicons:bell',
 						'notifications',
-						currentView === 'notifications',
+						$currentView === 'notifications',
 						'heroicons:bell-solid'
 					)}
 					{@render appButton(
-						() => switchView('settings'),
+						() => setView('settings'),
 						'heroicons:cog-6-tooth',
 						'settings',
-						currentView === 'settings',
+						$currentView === 'settings',
 						'heroicons:cog-6-tooth-solid'
 					)}
 				</div>