From 2e8fd12ec780ed8314c54c030eabc67be0e11678 Mon Sep 17 00:00:00 2001
From: dawn <90008@gaze.systems>
Date: Fri, 2 Jan 2026 05:28:14 +0300
Subject: [PATCH] show replying to / quoting inside the collapsed composer as
 well

---
 src/components/BskyPost.svelte       | 16 +++++---
 src/components/PostComposer.svelte   | 60 ++++++++++++++++++++++------
 src/components/ProfileInfo.svelte    | 20 +++++++---
 src/components/ProfilePicture.svelte | 39 +++++++-----------
 src/components/ProfileView.svelte    | 19 ++++++---
 src/lib/cache.ts                     |  4 +-
 src/lib/state.svelte.ts              |  7 +++-
 7 files changed, 108 insertions(+), 57 deletions(-)

diff --git a/src/components/BskyPost.svelte b/src/components/BskyPost.svelte
index 80c62da..5b379dc 100644
--- a/src/components/BskyPost.svelte
+++ b/src/components/BskyPost.svelte
@@ -9,8 +9,8 @@
 	} from '@atcute/bluesky';
 	import {
 		parseCanonicalResourceUri,
-		type ActorIdentifier,
 		type Did,
+		type Handle,
 		type RecordKey,
 		type ResourceUri
 	} from '@atcute/lexicons';
@@ -28,7 +28,9 @@
 		findBacklinksBy,
 		deletePostBacklink,
 		createPostBacklink,
-		router
+		router,
+		profiles,
+		handles
 	} from '$lib/state.svelte';
 	import type { PostWithUri } from '$lib/at/fetch';
 	import { onMount, type Snippet } from 'svelte';
@@ -76,19 +78,23 @@
 	const aturi = $derived(toCanonicalUri({ did, collection: 'app.bsky.feed.post', rkey }));
 	const color = $derived(generateColorForDid(did));
 
-	let handle: ActorIdentifier = $state('handle.invalid');
+	let handle: Handle = $state(handles.get(did) ?? 'handle.invalid');
 	const didDoc = resolveDidDoc(did).then((res) => {
-		if (res.ok) handle = res.value.handle;
+		if (res.ok) {
+			handle = res.value.handle;
+			handles.set(did, handle);
+		}
 		return res;
 	});
 	const post = data
 		? Promise.resolve(ok(data))
 		: client.getRecord(AppBskyFeedPost.mainSchema, did, rkey);
-	let profile: AppBskyActorProfile.Main | null = $state(null);
+	let profile: AppBskyActorProfile.Main | null = $state(profiles.get(did) ?? null);
 	onMount(async () => {
 		const p = await client.getProfile(did);
 		if (!p.ok) return;
 		profile = p.value;
+		profiles.set(did, profile);
 		// console.log(profile.description);
 	});
 
diff --git a/src/components/PostComposer.svelte b/src/components/PostComposer.svelte
index d879aa2..a6e54b6 100644
--- a/src/components/PostComposer.svelte
+++ b/src/components/PostComposer.svelte
@@ -10,6 +10,7 @@
 	import { parseToRichText } from '$lib/richtext';
 	import { tokenize } from '$lib/richtext/parser';
 	import Icon from '@iconify/svelte';
+	import ProfilePicture from './ProfilePicture.svelte';
 
 	export type FocusState = 'null' | 'focused';
 	export type State = {
@@ -40,7 +41,6 @@
 			uri: p.uri
 		});
 
-		// Parse rich text (mentions, links, tags)
 		const rt = await parseToRichText(text);
 
 		const record: AppBskyFeedPost.Main = {
@@ -120,13 +120,34 @@
 			<button
 				class="transition-transform hover:scale-150"
 				onclick={() => {
-					if (_state.focus === 'focused') _state[type] = undefined;
+					_state[type] = undefined;
 				}}><Icon width={24} icon="heroicons:x-mark-16-solid" /></button
 			>
 		{/snippet}
 	</BskyPost>
 {/snippet}
 
+{#snippet attachmentIndicator(post: PostWithUri, type: 'quoting' | 'replying')}
+	{@const parsedUri = expect(parseCanonicalResourceUri(post.uri))}
+	{@const color = generateColorForDid(parsedUri.repo)}
+	<div
+		class="flex shrink-0 items-center gap-1.5 rounded-sm border py-0.5 pr-0.5 pl-1 text-xs font-bold transition-all"
+		style="
+			background: color-mix(in srgb, {color} 10%, transparent);
+			border-color: {color};
+			color: {color};
+		"
+		title={type === 'replying' ? `replying to @${parsedUri.repo}` : `quoting @${parsedUri.repo}`}
+	>
+		<span class="truncate text-sm font-normal opacity-90">
+			{type === 'replying' ? 'replying to' : 'quoting'}
+		</span>
+		<div class="shrink-0">
+			<ProfilePicture {client} did={parsedUri.repo} size={5} />
+		</div>
+	</div>
+{/snippet}
+
 {#snippet highlighter(text: string)}
 	{#each tokenize(text) as token, idx (idx)}
 		{@const highlighted =
@@ -216,7 +237,7 @@
 			: `color-mix(in srgb, color-mix(in srgb, var(--nucleus-bg) 85%, ${color}) 70%, transparent)`};
 			border-color: color-mix(in srgb, {color} {isFocused ? '100' : '40'}%, transparent);"
 	>
-		<div class="w-full p-1.5 px-2">
+		<div class="w-full p-1 px-2">
 			{#if info.length > 0}
 				<div
 					class="rounded-sm px-3 py-1.5 text-center font-medium text-nowrap overflow-ellipsis"
@@ -229,13 +250,28 @@
 					{#if _state.focus === 'focused'}
 						{@render composer(_state.replying, _state.quoting)}
 					{:else}
-						<input
-							bind:value={_state.text}
-							onfocus={() => (_state.focus = 'focused')}
-							type="text"
-							placeholder="what's on your mind?"
-							class="flex-1"
-						/>
+						<!-- svelte-ignore a11y_no_static_element_interactions -->
+						<div
+							class="composer relative flex cursor-text items-center gap-0 py-0! transition-all hover:brightness-110"
+							onmousedown={(e) => {
+								if (e.defaultPrevented) return;
+								_state.focus = 'focused';
+							}}
+						>
+							{#if _state.replying}
+								{@render attachmentIndicator(_state.replying, 'replying')}
+							{/if}
+							<input
+								bind:value={_state.text}
+								onfocus={() => (_state.focus = 'focused')}
+								type="text"
+								placeholder="what's on your mind?"
+								class="min-w-0 flex-1 border-none bg-transparent outline-none placeholder:text-(--nucleus-fg)/45 focus:ring-0"
+							/>
+							{#if _state.quoting}
+								{@render attachmentIndicator(_state.quoting, 'quoting')}
+							{/if}
+						</div>
 					{/if}
 				</div>
 			{/if}
@@ -253,7 +289,7 @@
 	}
 
 	.composer {
-		@apply p-2;
+		@apply p-1;
 	}
 
 	textarea {
@@ -261,7 +297,7 @@
 	}
 
 	input {
-		@apply p-1 px-2;
+		@apply p-1.5;
 	}
 
 	.composer {
diff --git a/src/components/ProfileInfo.svelte b/src/components/ProfileInfo.svelte
index 14f8eb1..7bcef4c 100644
--- a/src/components/ProfileInfo.svelte
+++ b/src/components/ProfileInfo.svelte
@@ -1,31 +1,41 @@
 <script lang="ts">
 	import { AtpClient, resolveDidDoc } from '$lib/at/client';
-	import type { Did } from '@atcute/lexicons/syntax';
+	import type { Did, Handle } from '@atcute/lexicons/syntax';
 	import type { AppBskyActorProfile } from '@atcute/bluesky';
 	import ProfilePicture from './ProfilePicture.svelte';
 	import RichText from './RichText.svelte';
 	import { onMount } from 'svelte';
+	import { handles, profiles } from '$lib/state.svelte';
 
 	interface Props {
 		client: AtpClient;
 		did: Did;
-		handle?: string;
+		handle?: Handle;
 		profile?: AppBskyActorProfile.Main | null;
 	}
 
-	let { client, did, handle, profile = $bindable(null) }: Props = $props();
+	let {
+		client,
+		did,
+		handle = handles.get(did),
+		profile = $bindable(profiles.get(did) ?? null)
+	}: Props = $props();
 
 	onMount(async () => {
 		await Promise.all([
 			(async () => {
 				if (profile) return;
 				const res = await client.getProfile(did);
-				if (res.ok) profile = res.value;
+				if (!res.ok) return;
+				profile = res.value;
+				profiles.set(did, res.value);
 			})(),
 			(async () => {
 				if (handle) return;
 				const res = await resolveDidDoc(did);
-				if (res.ok) handle = res.value.handle;
+				if (!res.ok) return;
+				handle = res.value.handle;
+				handles.set(did, res.value.handle);
 			})()
 		]);
 	});
diff --git a/src/components/ProfilePicture.svelte b/src/components/ProfilePicture.svelte
index c17efa1..bad7ede 100644
--- a/src/components/ProfilePicture.svelte
+++ b/src/components/ProfilePicture.svelte
@@ -1,8 +1,3 @@
-<script lang="ts" module>
-	// we have this to prevent avatars from "flickering"
-	const avatarCache = new SvelteMap<string, string | null>();
-</script>
-
 <script lang="ts">
 	import { generateColorForDid } from '$lib/accounts';
 	import type { AtpClient } from '$lib/at/client';
@@ -10,7 +5,7 @@
 	import PfpPlaceholder from './PfpPlaceholder.svelte';
 	import { img } from '$lib/cdn';
 	import type { Did } from '@atcute/lexicons';
-	import { SvelteMap } from 'svelte/reactivity';
+	import { profiles } from '$lib/state.svelte';
 
 	interface Props {
 		client: AtpClient;
@@ -21,33 +16,27 @@
 	let { client, did, size }: Props = $props();
 
 	// svelte-ignore state_referenced_locally
-	let avatarUrl = $state<string | null>(avatarCache.get(did) ?? null);
+	let avatarBlob = $state(profiles.get(did)?.avatar);
+	const avatarUrl: string | null = $derived(
+		isBlob(avatarBlob) ? img('avatar_thumbnail', did, avatarBlob.ref.$link) : null
+	);
 
 	const loadProfile = async (targetDid: Did) => {
-		avatarUrl = avatarCache.get(targetDid) ?? null;
+		const cachedBlob = profiles.get(did)?.avatar;
+		if (cachedBlob) {
+			avatarBlob = cachedBlob;
+			return;
+		}
 
 		try {
 			const profile = await client.getProfile(targetDid);
-
-			if (did !== targetDid) return;
-
 			if (profile.ok) {
-				const record = profile.value;
-				if (isBlob(record.avatar)) {
-					const url = img('avatar_thumbnail', targetDid, record.avatar.ref.$link);
-					avatarUrl = url;
-					avatarCache.set(targetDid, url);
-				} else {
-					avatarUrl = null;
-					avatarCache.set(targetDid, null);
-				}
-			} else {
-				avatarUrl = null;
-			}
+				avatarBlob = profile.value.avatar;
+				profiles.set(did, profile.value);
+			} else avatarBlob = undefined;
 		} catch (e) {
-			if (did !== targetDid) return;
 			console.error(`${targetDid}: failed to load pfp`, e);
-			avatarUrl = null;
+			avatarBlob = undefined;
 		}
 	};
 
diff --git a/src/components/ProfileView.svelte b/src/components/ProfileView.svelte
index 5947227..969d53c 100644
--- a/src/components/ProfileView.svelte
+++ b/src/components/ProfileView.svelte
@@ -4,6 +4,7 @@
 		isHandle,
 		type ActorIdentifier,
 		type AtprotoDid,
+		type Did,
 		type Handle
 	} from '@atcute/lexicons/syntax';
 	import TimelineView from './TimelineView.svelte';
@@ -15,6 +16,7 @@
 	import { isBlob } from '@atcute/lexicons/interfaces';
 	import type { AppBskyActorProfile } from '@atcute/bluesky';
 	import { onMount } from 'svelte';
+	import { handles, profiles } from '$lib/state.svelte';
 
 	interface Props {
 		client: AtpClient;
@@ -25,12 +27,12 @@
 
 	let { client, actor, onBack, postComposerState = $bindable() }: Props = $props();
 
-	let profile = $state<AppBskyActorProfile.Main | null>(null);
+	let profile = $state<AppBskyActorProfile.Main | null>(profiles.get(actor as Did) ?? null);
 	const displayName = $derived(profile?.displayName ?? '');
 	let loading = $state(true);
 	let error = $state<string | null>(null);
 	let did = $state<AtprotoDid | null>(null);
-	let handle = $state<Handle | null>(null);
+	let handle = $state<Handle | null>(handles.get(actor as Did) ?? null);
 
 	const loadProfile = async (identifier: ActorIdentifier) => {
 		loading = true;
@@ -46,14 +48,21 @@
 			return;
 		}
 
+		if (!handle) handle = handles.get(did) ?? null;
+
 		if (!handle) {
 			const resHandle = await resolveDidDoc(did);
-			if (resHandle.ok) handle = resHandle.value.handle;
+			if (resHandle.ok) {
+				handle = resHandle.value.handle;
+				handles.set(did, resHandle.value.handle);
+			}
 		}
 
 		const res = await client.getProfile(did);
-		if (res.ok) profile = res.value;
-		else error = res.error;
+		if (res.ok) {
+			profile = res.value;
+			profiles.set(did, res.value);
+		} else error = res.error;
 
 		loading = false;
 	};
diff --git a/src/lib/cache.ts b/src/lib/cache.ts
index e458e69..017481c 100644
--- a/src/lib/cache.ts
+++ b/src/lib/cache.ts
@@ -43,9 +43,7 @@ class IDBStorage {
 
 			request.onupgradeneeded = (event) => {
 				const db = (event.target as IDBOpenDBRequest).result;
-				if (!db.objectStoreNames.contains(STORE_NAME)) {
-					db.createObjectStore(STORE_NAME);
-				}
+				if (!db.objectStoreNames.contains(STORE_NAME)) db.createObjectStore(STORE_NAME);
 			};
 		});
 	}
diff --git a/src/lib/state.svelte.ts b/src/lib/state.svelte.ts
index 1dd97f2..d225aba 100644
--- a/src/lib/state.svelte.ts
+++ b/src/lib/state.svelte.ts
@@ -6,10 +6,10 @@ import {
 	type NotificationsStreamEvent
 } from './at/client';
 import { SvelteMap, SvelteDate, SvelteSet } from 'svelte/reactivity';
-import type { Did, InferOutput, Nsid, RecordKey, ResourceUri } from '@atcute/lexicons';
+import type { Did, Handle, 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 { AppBskyActorProfile, AppBskyFeedPost, type AppBskyGraphFollow } from '@atcute/bluesky';
 import type { ComAtprotoRepoListRecords } from '@atcute/atproto';
 import type { JetstreamSubscription, JetstreamEvent } from '@atcute/jetstream';
 import { expect, ok } from './result';
@@ -29,6 +29,9 @@ import { Router } from './router.svelte';
 export const notificationStream = writable<NotificationsStream | null>(null);
 export const jetstream = writable<JetstreamSubscription | null>(null);
 
+export const profiles = new SvelteMap<Did, AppBskyActorProfile.Main>();
+export const handles = new SvelteMap<Did, Handle>();
+
 export type BacklinksMap = SvelteMap<BacklinksSource, SvelteSet<Backlink>>;
 export const allBacklinks = new SvelteMap<ResourceUri, BacklinksMap>();
 
-- 
2.51.2