only show scroll to top if post composer isnt focused

src/components/BskyPost.svelte

···
 		const p = await client.getProfile(did);
 		if (!p.ok) return;
 		profile = p.value;
-		console.log(profile.description);
+		// console.log(profile.description);
 	});
 	// const replies = replyBacklinks
 	// 	? Promise.resolve(ok(replyBacklinks))
···
 
 	const scrollToAndPulse = (targetUri: ResourceUri) => {
 		const targetId = `timeline-post-${targetUri}-0`;
-		console.log(`Scrolling to ${targetId}`);
+		// console.log(`Scrolling to ${targetId}`);
 		const element = document.getElementById(targetId);
 		if (!element) return;
 
···
 			// reply: backlinks[2],
 			// quote: backlinks[3]
 		};
-		console.log('findAllBacklinks', did, aturi, actions);
+		// console.log('findAllBacklinks', did, aturi, actions);
 		postActions.set(`${did}:${aturi}`, actions);
 	};
 	onMount(() => {

src/components/PostComposer.svelte

···
 	import { parseCanonicalResourceUri } from '@atcute/lexicons';
 	import type { ComAtprotoRepoStrongRef } from '@atcute/atproto';
 
+	export type State =
+		| { type: 'null' }
+		| { type: 'focused'; quoting?: PostWithUri; replying?: PostWithUri };
+
 	interface Props {
 		client: AtpClient;
 		onPostSent: (post: PostWithUri) => void;
-		quoting?: PostWithUri;
-		replying?: PostWithUri;
+		_state: State;
 	}
 
-	let {
-		client,
-		onPostSent,
-		quoting = $bindable(undefined),
-		replying = $bindable(undefined)
-	}: Props = $props();
+	let { client, onPostSent, _state = $bindable({ type: 'null' }) }: Props = $props();
 
-	let color = $derived(
+	const isFocused = $derived(_state.type === 'focused');
+
+	const color = $derived(
 		client.user?.did ? generateColorForDid(client.user?.did) : 'var(--nucleus-accent2)'
 	);
 
···
 		const record: AppBskyFeedPost.Main = {
 			$type: 'app.bsky.feed.post',
 			text,
-			reply: replying
-				? {
-						root: replying.record.reply?.root ?? strongRef(replying),
-						parent: strongRef(replying)
-					}
-				: undefined,
-			embed: quoting
-				? {
-						$type: 'app.bsky.embed.record',
-						record: strongRef(quoting)
-					}
-				: undefined,
+			reply:
+				_state.type === 'focused' && _state.replying
+					? {
+							root: _state.replying.record.reply?.root ?? strongRef(_state.replying),
+							parent: strongRef(_state.replying)
+						}
+					: undefined,
+			embed:
+				_state.type === 'focused' && _state.quoting
+					? {
+							$type: 'app.bsky.embed.record',
+							record: strongRef(_state.quoting)
+						}
+					: undefined,
 			createdAt: new Date().toISOString()
 		};
 
···
 
 	let postText = $state('');
 	let info = $state('');
-	let isFocused = $state(false);
 	let textareaEl: HTMLTextAreaElement | undefined = $state();
 
 	const unfocus = () => {
-		isFocused = false;
-		quoting = undefined;
-		replying = undefined;
+		_state.type = 'null';
 	};
 
 	const doPost = () => {
···
 	$effect(() => {
 		document.documentElement.style.setProperty('--acc-color', color);
 		if (isFocused && textareaEl) textareaEl.focus();
-		if (quoting || replying) isFocused = true;
 	});
 </script>
 
···
 	/>
 {/snippet}
 
-{#snippet composer()}
+{#snippet composer(replying?: PostWithUri, quoting?: PostWithUri)}
 	<div class="flex items-center gap-2">
 		<div class="grow"></div>
 		<span
···
 		<textarea
 			bind:this={textareaEl}
 			bind:value={postText}
-			onfocus={() => (isFocused = true)}
+			onfocus={() => (_state.type = 'focused')}
 			onblur={unfocus}
 			onkeydown={(event) => {
 				if (event.key === 'Escape') unfocus();
···
 	<!-- svelte-ignore a11y_no_static_element_interactions -->
 	<div
 		onmousedown={(e) => {
-			if (isFocused) {
-				e.preventDefault();
-			}
+			if (isFocused) e.preventDefault();
 		}}
 		class="flex max-w-full rounded-sm border-2 shadow-lg transition-all duration-300
 			{!isFocused ? 'min-h-13 items-center' : ''}
···
 				</div>
 			{:else}
 				<div class="flex flex-col gap-2">
-					{#if isFocused}
-						{@render composer()}
+					{#if _state.type === 'focused'}
+						{@render composer(_state.replying, _state.quoting)}
 					{:else}
 						<input
 							bind:value={postText}
-							onfocus={() => (isFocused = true)}
+							onfocus={() => (_state = { type: 'focused' })}
 							type="text"
 							placeholder="what's on your mind?"
 							class="flex-1"

src/routes/+page.svelte

···
 <script lang="ts">
 	import BskyPost from '$components/BskyPost.svelte';
-	import PostComposer from '$components/PostComposer.svelte';
+	import PostComposer, { type State as PostComposerState } from '$components/PostComposer.svelte';
 	import AccountSelector from '$components/AccountSelector.svelte';
 	import SettingsPopup from '$components/SettingsPopup.svelte';
 	import { AtpClient, type NotificationsStreamEvent } from '$lib/at/client';
···
 
 	const { data: loadData }: PageProps = $props();
 
+	// svelte-ignore state_referenced_locally
 	let errors = $state(loadData.client.ok ? [] : [loadData.client.error]);
 	let errorsOpen = $state(false);
 
···
 
 	const threads = $derived(filterThreads(buildThreads(posts), $accounts, { viewOwnPosts }));
 
-	let quoting = $state<PostWithUri | undefined>(undefined);
-	let replying = $state<PostWithUri | undefined>(undefined);
+	let postComposerState = $state<PostComposerState>({ type: 'null' });
 
 	const expandedThreads = new SvelteSet<ResourceUri>();
 
···
 							<PostComposer
 								client={selectedClient}
 								onPostSent={(post) => posts.get(selectedDid!)?.set(post.uri, post)}
-								bind:quoting
-								bind:replying
+								bind:_state={postComposerState}
 							/>
 						</div>
 					{:else}
···
 						</div>
 					{/if}
 
-					{#if showScrollToTop}
+					{#if postComposerState.type === 'null' && showScrollToTop}
 						{@render appButton(scrollToTop, 'heroicons:arrow-up-16-solid', 'scroll to top')}
 					{/if}
 				</div>
···
 					<div class="mb-1.5">
 						<BskyPost
 							client={selectedClient ?? viewClient}
-							onQuote={(post) => (quoting = post)}
-							onReply={(post) => (replying = post)}
+							onQuote={(post) => (postComposerState = { type: 'focused', quoting: post })}
+							onReply={(post) => (postComposerState = { type: 'focused', replying: post })}
 							{...post}
 						/>
 					</div>