dont forget to hydrate posts from the jetstream, save composer text to the global state

src/components/BskyPost.svelte

···
 {#snippet profileInline()}
 	<button
 		class="
-		flex min-w-0 items-center gap-2 font-bold {isOnPostComposer ? 'contrast-200' : ''}
+		flex min-w-0 items-center gap-2 font-bold {isOnPostComposer ? 'contrast-125' : ''}
 		rounded-sm pr-1 transition-colors duration-100 ease-in-out hover:bg-white/10
 		"
 		style="color: {color};"

src/components/FollowingView.svelte

···
 		isLongCalculation = false;
 	};
 
-	// todo: there is a bug where
+	// todo: there is a bug where the view doesn't update and just gets stuck being loaded
 	$effect(() => {
 		// Dependencies that trigger a re-sort
 		// eslint-disable-next-line @typescript-eslint/no-unused-vars

src/components/PostComposer.svelte

···
 	import { parseToRichText } from '$lib/richtext';
 	import { tokenize } from '$lib/richtext/parser';
 
-	export type State =
+	export type FocusState =
 		| { type: 'null' }
 		| { type: 'focused'; quoting?: PostWithUri; replying?: PostWithUri };
+	export type State = {
+		focus: FocusState;
+		text: string;
+	};
 
 	interface Props {
 		client: AtpClient;
···
 		_state: State;
 	}
 
-	let { client, onPostSent, _state = $bindable({ type: 'null' }) }: Props = $props();
+	let {
+		client,
+		onPostSent,
+		_state = $bindable({ focus: { type: 'null' }, text: '' })
+	}: Props = $props();
 
-	const isFocused = $derived(_state.type === 'focused');
+	const isFocused = $derived(_state.focus.type === 'focused');
 
 	const color = $derived(
 		client.user?.did ? generateColorForDid(client.user?.did) : 'var(--nucleus-accent2)'
···
 		// Parse rich text (mentions, links, tags)
 		const rt = await parseToRichText(text);
 
+		const focus = _state.focus;
 		const record: AppBskyFeedPost.Main = {
 			$type: 'app.bsky.feed.post',
 			text: rt.text,
 			facets: rt.facets,
 			reply:
-				_state.type === 'focused' && _state.replying
+				focus.type === 'focused' && focus.replying
 					? {
-							root: _state.replying.record.reply?.root ?? strongRef(_state.replying),
-							parent: strongRef(_state.replying)
+							root: focus.replying.record.reply?.root ?? strongRef(focus.replying),
+							parent: strongRef(focus.replying)
 						}
 					: undefined,
 			embed:
-				_state.type === 'focused' && _state.quoting
+				focus.type === 'focused' && focus.quoting
 					? {
 							$type: 'app.bsky.embed.record',
-							record: strongRef(_state.quoting)
+							record: strongRef(focus.quoting)
 						}
 					: undefined,
 			createdAt: new Date().toISOString()
···
 		});
 	};
 
-	let postText = $state('');
 	let info = $state('');
 	let textareaEl: HTMLTextAreaElement | undefined = $state();
 
-	const unfocus = () => {
-		_state.type = 'null';
-	};
+	const unfocus = () => (_state.focus.type = 'null');
 
 	const doPost = () => {
-		if (postText.length === 0 || postText.length > 300) return;
+		if (_state.text.length === 0 || _state.text.length > 300) return;
 
-		post(postText).then((res) => {
+		post(_state.text).then((res) => {
 			if (res.ok) {
 				onPostSent(res.value);
-				postText = '';
+				_state.text = '';
 				info = 'posted!';
 				unfocus();
 				setTimeout(() => (info = ''), 800);
···
 		<div class="grow"></div>
 		<span
 			class="text-sm font-medium"
-			style="color: color-mix(in srgb, {postText.length > 300
+			style="color: color-mix(in srgb, {_state.text.length > 300
 				? '#ef4444'
 				: 'var(--nucleus-fg)'} 53%, transparent);"
 		>
-			{postText.length} / 300
+			{_state.text.length} / 300
 		</span>
 		<button
 			onmousedown={(e) => {
 				e.preventDefault();
 				doPost();
 			}}
-			disabled={postText.length === 0 || postText.length > 300}
+			disabled={_state.text.length === 0 || _state.text.length > 300}
 			class="action-button border-none px-5 text-(--nucleus-fg)/94 disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100"
 			style="background: color-mix(in srgb, {color} 87%, transparent);"
 		>
···
 				class="pointer-events-none col-start-1 row-start-1 min-h-[5lh] w-full bg-transparent text-wrap break-all whitespace-pre-wrap text-(--nucleus-fg)"
 				aria-hidden="true"
 			>
-				{@render highlighter(postText)}
+				{@render highlighter(_state.text)}
 			</div>
 
 			<textarea
 				bind:this={textareaEl}
-				bind:value={postText}
-				onfocus={() => (_state.type = 'focused')}
+				bind:value={_state.text}
+				onfocus={() => (_state.focus.type = 'focused')}
 				onblur={unfocus}
 				onkeydown={(event) => {
 					if (event.key === 'Escape') unfocus();
···
 				</div>
 			{:else}
 				<div class="flex flex-col gap-2">
-					{#if _state.type === 'focused'}
-						{@render composer(_state.replying, _state.quoting)}
+					{#if _state.focus.type === 'focused'}
+						{@render composer(_state.focus.replying, _state.focus.quoting)}
 					{:else}
 						<input
-							bind:value={postText}
-							onfocus={() => (_state = { type: 'focused' })}
+							bind:value={_state.text}
+							onfocus={() => (_state.focus.type = 'focused')}
 							type="text"
 							placeholder="what's on your mind?"
 							class="flex-1"

src/components/ProfileView.svelte

···
 		client: AtpClient;
 		actor: string;
 		onBack: () => void;
-		postComposerState?: PostComposerState;
+		postComposerState: PostComposerState;
 	}
 
-	let { client, actor, onBack, postComposerState = $bindable({ type: 'null' }) }: Props = $props();
+	let { client, actor, onBack, postComposerState = $bindable() }: Props = $props();
 
 	let profile = $state<AppBskyActorProfile.Main | null>(null);
 	const displayName = $derived(profile?.displayName ?? '');

src/components/TimelineView.svelte

···
 					<div class="mb-1.5">
 						<BskyPost
 							client={client!}
-							onQuote={(post) => (postComposerState = { type: 'focused', quoting: post })}
-							onReply={(post) => (postComposerState = { type: 'focused', replying: post })}
+							onQuote={(post) => (postComposerState.focus = { type: 'focused', quoting: post })}
+							onReply={(post) => (postComposerState.focus = { type: 'focused', replying: post })}
 							{...post}
 						/>
 					</div>

src/lib/at/fetch.ts

···
 import { err, expect, ok, type Ok, type Result } from '$lib/result';
 import type { Backlinks } from './constellation';
 import { AppBskyFeedPost } from '@atcute/bluesky';
-import type { AtprotoDid, Did, RecordKey } from '@atcute/lexicons/syntax';
+import type { Did, RecordKey } from '@atcute/lexicons/syntax';
 import { replySource, toCanonicalUri } from '$lib';
 
 export type PostWithUri = { uri: ResourceUri; cid: Cid | undefined; record: AppBskyFeedPost.Main };
···
 
 export const hydratePosts = async (
 	client: AtpClient,
-	repo: AtprotoDid,
+	repo: Did,
 	data: PostWithBacklinks[],
 	cacheFn: (did: Did, rkey: RecordKey) => Ok<PostWithUri> | undefined
 ): Promise<Result<Map<ResourceUri, PostWithUri>, string>> => {

src/lib/state.svelte.ts

···
 	await Promise.all([likeSource, repostSource].map((s) => fetchLinksUntil(client, s, timestamp)));
 };
 
-export const handleJetstreamEvent = (event: JetstreamEvent) => {
+export const handleJetstreamEvent = async (event: JetstreamEvent) => {
 	if (event.kind !== 'commit') return;
 
 	const { did, commit } = event;
 	const uri: ResourceUri = toCanonicalUri({ did, ...commit });
 	if (commit.collection === 'app.bsky.feed.post') {
 		if (commit.operation === 'create') {
-			const { cid, record } = commit;
-			const post: PostWithUri = {
-				uri,
-				cid,
-				// assume record is valid, we trust the jetstream
-				record: record as AppBskyFeedPost.Main
-			};
-			addPosts([post]);
-			addTimeline(did, [uri]);
+			const posts = [
+				{
+					record: commit.record as AppBskyFeedPost.Main,
+					uri,
+					cid: commit.cid
+				}
+			];
+			const client = await getClient(did);
+			const hydrated = await hydratePosts(client, did, posts, hydrateCacheFn);
+			if (!hydrated.ok) {
+				console.error(`cant hydrate posts ${did}: ${hydrated.error}`);
+				return;
+			}
+			addPosts(hydrated.value.values());
+			addTimeline(did, hydrated.value.keys());
 		} else if (commit.operation === 'delete') {
 			allPosts.get(did)?.delete(uri);
 		}

src/routes/[...catchall]/+page.svelte

···
 		else animClass = 'animate-fade-in-scale';
 	});
 
-	let postComposerState = $state<PostComposerState>({ type: 'null' });
+	let postComposerState = $state<PostComposerState>({ focus: { type: 'null' }, text: '' });
 	let showScrollToTop = $state(false);
 	const handleScroll = () => {
-		if (router.current.path === '/') showScrollToTop = window.scrollY > 300;
+		if (currentRoute.path === '/' || currentRoute.path === '/profile/:actor')
+			showScrollToTop = window.scrollY > 300;
 	};
 	const scrollToTop = () => window.scrollTo({ top: 0, behavior: 'smooth' });
 
···
 						</div>
 					{/if}
 
-					{#if postComposerState.type === 'null' && showScrollToTop}
+					{#if postComposerState.focus.type === 'null' && showScrollToTop}
 						{@render appButton(scrollToTop, 'heroicons:arrow-up-16-solid', 'scroll to top', false)}
 					{/if}
 				</div>