add remove attach button to quotes / replies in the post composer, allow attaching quote and reply at the same time

src/components/BskyPost.svelte

···
 		router
 	} from '$lib/state.svelte';
 	import type { PostWithUri } from '$lib/at/fetch';
-	import { onMount } from 'svelte';
+	import { onMount, type Snippet } from 'svelte';
 	import { derived } from 'svelte/store';
 	import Device from 'svelte-device-info';
 	import Dropdown from './Dropdown.svelte';
···
 		isOnPostComposer?: boolean;
 		onQuote?: (quote: PostWithUri) => void;
 		onReply?: (reply: PostWithUri) => void;
+		cornerFragment?: Snippet;
 	}
 
 	const {
···
 		mini,
 		onQuote,
 		onReply,
-		isOnPostComposer = false /* replyBacklinks */
+		isOnPostComposer = false /* replyBacklinks */,
+		cornerFragment
 	}: Props = $props();
 
 	const selectedDid = $derived(client.user?.did ?? null);
···
 	const postId = $derived(`timeline-post-${aturi}-${quoteDepth}`);
 	const isPulsing = derived(pulsingPostId, (pulsingPostId) => pulsingPostId === postId);
 
+	// todo: this fucking sucks
 	const scrollToAndPulse = (targetUri: ResourceUri) => {
 		const targetId = `timeline-post-${targetUri}-0`;
 		// console.log(`Scrolling to ${targetId}`);
···
 				border-color: {color}{isOnPostComposer ? '99' : '66'};
 				"
 			>
-				<div
-					class="
-					mb-3 flex w-fit max-w-full items-center gap-1 rounded-sm pr-1
-					"
-					style="background: {color}33;"
-				>
-					{@render profilePopout()}
-					<span>·</span>
-					<span
-						title={new Date(record.createdAt).toLocaleString()}
-						class="pl-0.5 text-nowrap text-(--nucleus-fg)/67"
-					>
-						{getRelativeTime(new Date(record.createdAt), currentTime)}
-					</span>
+				<div class="mb-3 flex max-w-full items-center justify-between">
+					<div class="flex items-center gap-1 rounded-sm pr-1" style="background: {color}33;">
+						{@render profilePopout()}
+						<span>·</span>
+						<span
+							title={new Date(record.createdAt).toLocaleString()}
+							class="pl-0.5 text-nowrap text-(--nucleus-fg)/67"
+						>
+							{getRelativeTime(new Date(record.createdAt), currentTime)}
+						</span>
+					</div>
+					{@render cornerFragment?.()}
 				</div>
+
 				<p class="leading-normal text-wrap wrap-break-word">
 					<RichText text={record.text} facets={record.facets ?? []} />
 					{#if isOnPostComposer && record.embed}

src/components/PostComposer.svelte

···
 	import type { ComAtprotoRepoStrongRef } from '@atcute/atproto';
 	import { parseToRichText } from '$lib/richtext';
 	import { tokenize } from '$lib/richtext/parser';
+	import Icon from '@iconify/svelte';
 
-	export type FocusState =
-		| { type: 'null' }
-		| { type: 'focused'; quoting?: PostWithUri; replying?: PostWithUri };
+	export type FocusState = 'null' | 'focused';
 	export type State = {
 		focus: FocusState;
 		text: string;
+		quoting?: PostWithUri;
+		replying?: PostWithUri;
 	};
 
 	interface Props {
···
 		_state: State;
 	}
 
-	let {
-		client,
-		onPostSent,
-		_state = $bindable({ focus: { type: 'null' }, text: '' })
-	}: Props = $props();
+	let { client, onPostSent, _state = $bindable({ focus: 'null', text: '' }) }: Props = $props();
 
-	const isFocused = $derived(_state.focus.type === 'focused');
+	const isFocused = $derived(_state.focus === '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:
-				focus.type === 'focused' && focus.replying
+				_state.focus === 'focused' && _state.replying
 					? {
-							root: focus.replying.record.reply?.root ?? strongRef(focus.replying),
-							parent: strongRef(focus.replying)
+							root: _state.replying.record.reply?.root ?? strongRef(_state.replying),
+							parent: strongRef(_state.replying)
 						}
 					: undefined,
 			embed:
-				focus.type === 'focused' && focus.quoting
+				_state.focus === 'focused' && _state.quoting
 					? {
 							$type: 'app.bsky.embed.record',
-							record: strongRef(focus.quoting)
+							record: strongRef(_state.quoting)
 						}
 					: undefined,
 			createdAt: new Date().toISOString()
···
 	let info = $state('');
 	let textareaEl: HTMLTextAreaElement | undefined = $state();
 
-	const unfocus = () => (_state.focus.type = 'null');
+	const unfocus = () => (_state.focus = 'null');
 
 	const doPost = () => {
 		if (_state.text.length === 0 || _state.text.length > 300) return;
···
 	});
 </script>
 
-{#snippet renderPost(post: PostWithUri)}
+{#snippet attachedPost(post: PostWithUri, type: 'quoting' | 'replying')}
 	{@const parsedUri = expect(parseCanonicalResourceUri(post.uri))}
-	<BskyPost
-		{client}
-		did={parsedUri.repo}
-		rkey={parsedUri.rkey}
-		data={post}
-		isOnPostComposer={true}
-	/>
+	<BskyPost {client} did={parsedUri.repo} rkey={parsedUri.rkey} data={post} isOnPostComposer={true}>
+		{#snippet cornerFragment()}
+			<button
+				class="transition-transform hover:scale-150"
+				onclick={() => {
+					if (_state.focus === 'focused') _state[type] = undefined;
+				}}><Icon width={24} icon="heroicons:x-mark-16-solid" /></button
+			>
+		{/snippet}
+	</BskyPost>
 {/snippet}
 
 {#snippet highlighter(text: string)}
···
 		</button>
 	</div>
 	{#if replying}
-		{@render renderPost(replying)}
+		{@render attachedPost(replying, 'replying')}
 	{/if}
 	<div class="composer space-y-2">
 		<div class="relative grid">
···
 			<textarea
 				bind:this={textareaEl}
 				bind:value={_state.text}
-				onfocus={() => (_state.focus.type = 'focused')}
+				onfocus={() => (_state.focus = 'focused')}
 				onblur={unfocus}
 				onkeydown={(event) => {
 					if (event.key === 'Escape') unfocus();
···
 				class="col-start-1 row-start-1 field-sizing-content min-h-[5lh] w-full resize-none overflow-hidden bg-transparent text-wrap break-all whitespace-pre-wrap text-transparent caret-(--nucleus-fg) placeholder:text-(--nucleus-fg)/45"
 			></textarea>
 		</div>
-
 		{#if quoting}
-			{@render renderPost(quoting)}
+			{@render attachedPost(quoting, 'quoting')}
 		{/if}
 	</div>
 {/snippet}
···
 				</div>
 			{:else}
 				<div class="flex flex-col gap-2">
-					{#if _state.focus.type === 'focused'}
-						{@render composer(_state.focus.replying, _state.focus.quoting)}
+					{#if _state.focus === 'focused'}
+						{@render composer(_state.replying, _state.quoting)}
 					{:else}
 						<input
 							bind:value={_state.text}
-							onfocus={() => (_state.focus.type = 'focused')}
+							onfocus={() => (_state.focus = 'focused')}
 							type="text"
 							placeholder="what's on your mind?"
 							class="flex-1"

src/components/TimelineView.svelte

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

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

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