add profile viewing, also from following list

src/components/BskyPost.svelte

···
 	import RichText from './RichText.svelte';
 	import { getRelativeTime } from '$lib/date';
 	import { likeSource, repostSource } from '$lib';
+	import ProfileInfo from './ProfileInfo.svelte';
 
 	interface Props {
 		client: AtpClient;
···
 	const selectedDid = $derived(client.user?.did ?? null);
 	const actionClient = $derived(clients.get(did as AtprotoDid));
 
-	const aturi: CanonicalResourceUri = `at://${did}/app.bsky.feed.post/${rkey}`;
-	const color = generateColorForDid(did);
+	const aturi = $derived(`at://${did}/app.bsky.feed.post/${rkey}` as CanonicalResourceUri);
+	const color = $derived(generateColorForDid(did));
 
-	let handle: ActorIdentifier = $state(did);
+	let handle: ActorIdentifier = $state('handle.invalid');
 	const didDoc = resolveDidDoc(did).then((res) => {
 		if (res.ok) handle = res.value.handle;
 		return res;
···
 		// console.log(profile.description);
 	});
 
-	const postId = `timeline-post-${aturi}-${quoteDepth}`;
+	const postId = $derived(`timeline-post-${aturi}-${quoteDepth}`);
 	const isPulsing = derived(pulsingPostId, (pulsingPostId) => pulsingPostId === postId);
 
 	const scrollToAndPulse = (targetUri: ResourceUri) => {
···
 	};
 
 	let profileOpen = $state(false);
-	let profilePopoutShowDid = $state(false);
 </script>
 
 {#snippet embedBadge(embed: AppBskyEmbeds)}
···
 
 <!-- eslint-disable svelte/no-navigation-without-resolve -->
 {#snippet profilePopout()}
-	{@const profileDesc = profile?.description?.trim() ?? ''}
 	<Dropdown
 		class="post-dropdown max-w-xl gap-2! p-2.5! backdrop-blur-3xl! backdrop-brightness-25!"
 		style="background: {color}36; border-color: {color}99;"
 		bind:isOpen={profileOpen}
 		trigger={profileInline}
 	>
-		<div class="flex items-center gap-2">
-			<ProfilePicture {client} {did} size={20} />
-
-			<div class="flex flex-col items-start overflow-hidden overflow-ellipsis">
-				<span class="mb-1.5 min-w-0 overflow-hidden text-2xl text-nowrap overflow-ellipsis">
-					{profile?.displayName ?? handle}
-					{#if profile?.pronouns}
-						<span class="shrink-0 text-sm text-nowrap opacity-60">({profile.pronouns})</span>
-					{/if}
-				</span>
-				<button
-					oncontextmenu={(e) => {
-						const node = e.target as Node;
-						const selection = window.getSelection() ?? new Selection();
-						const range = document.createRange();
-						range.selectNodeContents(node);
-						selection.removeAllRanges();
-						selection.addRange(range);
-						e.stopPropagation();
-					}}
-					onclick={() => (profilePopoutShowDid = !profilePopoutShowDid)}
-					class="mb-0.5 text-nowrap opacity-85 select-text hover:underline"
-				>
-					{profilePopoutShowDid ? did : `@${handle}`}
-				</button>
-				{#if profile?.website}
-					<a
-						target="_blank"
-						rel="noopener noreferrer"
-						href={profile.website}
-						class="text-sm text-nowrap opacity-60">{profile.website}</a
-					>
-				{/if}
-			</div>
-		</div>
-
-		{#if profileDesc.length > 0}
-			<p class="rounded-sm bg-black/25 p-1.5 text-wrap wrap-break-word">
-				<RichText text={profileDesc} />
-			</p>
-		{/if}
+		<ProfileInfo {client} {did} {handle} {profile} />
 	</Dropdown>
 {/snippet}
 

src/components/FollowingItem.svelte

···
 		client: AtpClient;
 		sort: Sort;
 		currentTime: Date;
+		onClick?: (did: AtprotoDid) => void;
 	}
 
-	let { style, did, stats, client, sort, currentTime }: Props = $props();
+	let { style, did, stats, client, sort, currentTime, onClick }: Props = $props();
 
 	// svelte-ignore state_referenced_locally
 	const cached = profileCache.get(did);
···
 </script>
 
 <div {style} class="box-border w-full pb-2">
+	<!-- svelte-ignore a11y_click_events_have_key_events -->
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
 	<div
-		class="group flex items-center gap-2 rounded-sm bg-(--nucleus-accent)/7 p-3 transition-colors hover:bg-(--post-color)/20"
+		onclick={() => onClick?.(did as AtprotoDid)}
+		class="group flex cursor-pointer items-center gap-2 rounded-sm bg-(--nucleus-accent)/7 p-3 transition-colors hover:bg-(--post-color)/20"
 		style={`--post-color: ${color};`}
 	>
 		<ProfilePicture {client} {did} size={10} />

src/components/FollowingView.svelte

···
 <script lang="ts">
 	import { follows, allPosts, allBacklinks, currentTime, replyIndex } from '$lib/state.svelte';
 	import type { Did } from '@atcute/lexicons';
+	import type { AtprotoDid } from '@atcute/lexicons/syntax';
 	import { type AtpClient } from '$lib/at/client';
 	import VirtualList from '@tutorlatin/svelte-tiny-virtual-list';
 	import {
···
 	interface Props {
 		selectedDid: Did;
 		selectedClient: AtpClient;
+		onProfileClick: (did: AtprotoDid) => void;
 	}
 
-	const { selectedDid, selectedClient }: Props = $props();
+	const { selectedDid, selectedClient, onProfileClick }: Props = $props();
 
 	let followingSort: Sort = $state('active' as Sort);
 	const followsMap = $derived(follows.get(selectedDid));
···
 						client={selectedClient}
 						sort={followingSort}
 						{currentTime}
+						onClick={onProfileClick}
 					/>
 				{/snippet}
 			</VirtualList>

src/components/ProfileInfo.svelte

···
+<script lang="ts">
+	import { AtpClient, resolveDidDoc } from '$lib/at/client';
+	import type { Did } from '@atcute/lexicons/syntax';
+	import type { AppBskyActorProfile } from '@atcute/bluesky';
+	import ProfilePicture from './ProfilePicture.svelte';
+	import RichText from './RichText.svelte';
+	import { onMount } from 'svelte';
+
+	interface Props {
+		client: AtpClient;
+		did: Did;
+		handle?: string;
+		profile?: AppBskyActorProfile.Main | null;
+		interactive?: boolean;
+	}
+
+	let { client, did, handle, profile = $bindable(null), interactive = true }: Props = $props();
+
+	onMount(async () => {
+		await Promise.all([
+			(async () => {
+				if (!profile) {
+					const res = await client.getProfile(did);
+					if (res.ok) profile = res.value;
+				}
+			})(),
+			(async () => {
+				if (!handle) {
+					const res = await resolveDidDoc(did);
+					if (res.ok) handle = res.value.handle;
+				}
+			})()
+		]);
+	});
+
+	let displayHandle = $derived(handle ?? 'handle.invalid');
+	let profileDesc = $derived(profile?.description?.trim() ?? '');
+	let showDid = $state(false);
+</script>
+
+<div class="flex flex-col gap-2">
+	<div class="flex items-center gap-2">
+		<ProfilePicture {client} {did} size={20} />
+
+		<div class="flex min-w-0 flex-col items-start overflow-hidden overflow-ellipsis">
+			<span class="mb-1.5 min-w-0 overflow-hidden text-2xl text-nowrap overflow-ellipsis">
+				{profile?.displayName ?? displayHandle}
+				{#if profile?.pronouns}
+					<span class="shrink-0 text-sm text-nowrap opacity-60">({profile.pronouns})</span>
+				{/if}
+			</span>
+			<button
+				oncontextmenu={(e) => {
+					e.stopPropagation();
+					const node = e.target as Node;
+					const selection = window.getSelection() ?? new Selection();
+					const range = document.createRange();
+					range.selectNodeContents(node);
+					selection.removeAllRanges();
+					selection.addRange(range);
+				}}
+				onmousedown={(e) => {
+					// disable double clicks to disable "double click to select text"
+					// since it doesnt work with us toggling did vs handle
+					if (e.detail > 1) e.preventDefault();
+				}}
+				onclick={() => (showDid = !showDid)}
+				class="mb-0.5 text-nowrap opacity-85 select-text hover:underline"
+			>
+				{showDid ? did : `@${displayHandle}`}
+			</button>
+			{#if profile?.website}
+				<a
+					target="_blank"
+					rel="noopener noreferrer"
+					href={profile.website}
+					class="text-sm text-nowrap opacity-60 hover:underline">{profile.website}</a
+				>
+			{/if}
+		</div>
+	</div>
+
+	{#if profileDesc.length > 0}
+		<div class="rounded-sm bg-black/25 p-1.5 text-wrap wrap-break-word">
+			<RichText text={profileDesc} />
+		</div>
+	{/if}
+</div>

src/components/ProfileView.svelte

···
+<script lang="ts">
+	import { AtpClient } from '$lib/at/client';
+	import type { AtprotoDid } from '@atcute/lexicons/syntax';
+	import TimelineView from './TimelineView.svelte';
+	import ProfileInfo from './ProfileInfo.svelte';
+	import type { State as PostComposerState } from './PostComposer.svelte';
+	import Icon from '@iconify/svelte';
+	import { generateColorForDid } from '$lib/accounts';
+	import { img } from '$lib/cdn';
+	import { isBlob } from '@atcute/lexicons/interfaces';
+	import type { AppBskyActorProfile } from '@atcute/bluesky';
+	import { onMount } from 'svelte';
+
+	interface Props {
+		client: AtpClient;
+		did: AtprotoDid;
+		onBack: () => void;
+		postComposerState?: PostComposerState;
+	}
+
+	let { client, did, onBack, postComposerState = $bindable({ type: 'null' }) }: Props = $props();
+
+	let profile = $state<AppBskyActorProfile.Main | null>(null);
+	let loading = $state(true);
+	let error = $state<string | null>(null);
+
+	onMount(async () => {
+		const res = await client.getProfile(did);
+		if (res.ok) profile = res.value;
+		else error = res.error;
+		loading = false;
+	});
+
+	const color = $derived(generateColorForDid(did));
+	const bannerUrl = $derived(
+		profile && isBlob(profile.banner) ? img('feed_fullsize', did, profile.banner.ref.$link) : null
+	);
+</script>
+
+<div class="flex min-h-dvh flex-col">
+	<!-- Header -->
+	<div
+		class="sticky top-0 z-20 flex items-center gap-4 border-b-2 bg-(--nucleus-bg)/80 p-4 backdrop-blur-md"
+		style="border-color: {color}40;"
+	>
+		<button
+			onclick={onBack}
+			class="rounded-full p-1 text-(--nucleus-fg) transition-all hover:bg-(--nucleus-fg)/10"
+		>
+			<Icon icon="heroicons:arrow-left-20-solid" width={24} />
+		</button>
+		<h2 class="text-xl font-bold">
+			{profile?.displayName ?? (loading ? 'loading...' : 'profile')}
+		</h2>
+	</div>
+
+	{#if error}
+		<div class="p-8 text-center text-red-500">
+			<p>failed to load profile: {error}</p>
+		</div>
+	{:else}
+		<!-- Banner -->
+		<div class="relative h-32 w-full overflow-hidden bg-(--nucleus-fg)/5 md:h-48">
+			{#if bannerUrl}
+				<img src={bannerUrl} alt="banner" class="h-full w-full object-cover" />
+			{/if}
+			<div
+				class="absolute inset-0 bg-linear-to-b from-transparent to-(--nucleus-bg)"
+				style="opacity: 0.8;"
+			></div>
+		</div>
+
+		<div class="px-4 pb-4">
+			<div class="relative z-10 -mt-12 mb-4">
+				<ProfileInfo {client} {did} bind:profile />
+			</div>
+
+			<div class="my-4 h-px bg-white/10"></div>
+
+			<TimelineView {client} targetDid={did} bind:postComposerState class="min-h-[50vh]" />
+		</div>
+	{/if}
+</div>

src/components/TimelineView.svelte

···
 	import { type ResourceUri } from '@atcute/lexicons';
 	import { SvelteSet } from 'svelte/reactivity';
 	import { InfiniteLoader, LoaderState } from 'svelte-infinite';
-	import { postCursors, fetchTimeline, allPosts, timelines } from '$lib/state.svelte';
+	import {
+		postCursors,
+		fetchTimeline,
+		allPosts,
+		timelines,
+		fetchInteractionsUntil
+	} from '$lib/state.svelte';
 	import Icon from '@iconify/svelte';
 	import { buildThreads, filterThreads, type ThreadPost } from '$lib/thread';
 	import type { AtprotoDid } from '@atcute/lexicons/syntax';
 
 	interface Props {
 		client?: AtpClient | null;
+		targetDid?: AtprotoDid;
 		postComposerState: PostComposerState;
 		class?: string;
 	}
 
-	let { client = null, postComposerState = $bindable(), class: className = '' }: Props = $props();
+	let {
+		client = null,
+		targetDid = undefined,
+		postComposerState = $bindable(),
+		class: className = ''
+	}: Props = $props();
 
 	let reverseChronological = $state(true);
 	let viewOwnPosts = $state(true);
 	const expandedThreads = new SvelteSet<ResourceUri>();
 
-	const did = $derived(client?.user?.did);
+	const did = $derived(targetDid ?? client?.user?.did);
 
 	const threads = $derived(
 		filterThreads(
···
 	const loaderState = new LoaderState();
 	let scrollContainer = $state<HTMLDivElement>();
 	let loading = $state(false);
+	let fetchMoreInteractions: boolean | undefined = $state(false);
 	let loadError = $state('');
 
 	const loadMore = async () => {
-		if (loading || $accounts.length === 0 || !did) return;
+		if (loading || !client || !did) return;
 
 		loading = true;
 		loaderState.status = 'LOADING';
 
 		try {
 			await fetchTimeline(did as AtprotoDid);
+			// interaction fetching is done lazily so we dont block loading posts
+			fetchMoreInteractions = true;
 			loaderState.loaded();
 		} catch (error) {
 			loadError = `${error}`;
···
 		}
 
 		loading = false;
-		if (postCursors.values().every((cursor) => cursor.end)) loaderState.complete();
+		const cursor = postCursors.get(did as AtprotoDid);
+		if (cursor && cursor.end) loaderState.complete();
 	};
 
 	$effect(() => {
-		if (threads.length === 0 && !loading) loadMore();
+		if (threads.length === 0 && !loading && did) loadMore();
+		if (client && did && fetchMoreInteractions) {
+			// set to false so it doesnt attempt to fetch again while its already fetching
+			fetchMoreInteractions = false;
+			fetchInteractionsUntil(client, did).then(() => (fetchMoreInteractions = undefined));
+		}
 	});
 </script>
 
···
 	class="min-h-full p-2 [scrollbar-color:var(--nucleus-accent)_transparent] {className}"
 	bind:this={scrollContainer}
 >
-	{#if $accounts.length > 0}
+	{#if targetDid || $accounts.length > 0}
 		<InfiniteLoader
 			{loaderState}
 			triggerLoad={loadMore}

src/lib/at/client.ts

···
 	return res.value;
 });
 
-const cache = cacheWithRecords;
+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;
 
 export class AtpClient {
 	public atcute: AtcuteClient | null = null;
···
 		Result<InferXRPCBodyOutput<(typeof ComAtprotoRepoListRecords.mainSchema)['output']>, string>
 	> {
 		if (!this.atcute || !this.user) return err('not authenticated');
-		const res = await this.atcute.get('com.atproto.repo.listRecords', {
-			params: {
-				repo: this.user.did,
+		try {
+			return (await cache.listRecords({
+				atcute: this.atcute,
+				did: this.user.did,
 				collection,
 				cursor,
-				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);
+				limit
+			})) as Awaited<ReturnType<typeof this.listRecords>>;
+		} catch (e) {
+			return err(String(e));
+		}
 	}
 
 	async listRecordsUntil<Collection extends keyof Records>(
···
 						data.cursor
 					);
 					end = true;
-				} else if (cursorTimestamp < timestamp) {
+				} else if (cursorTimestamp <= timestamp) {
 					end = true;
 				} else {
 					console.info(

src/lib/cache.ts

···
 	}
 
 	// noops
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars
 	async getTTL(key: string): Promise<void> {
 		return;
 	}

src/lib/state.svelte.ts

···
 	const [_collection, source] = backlinkSource.split(':');
 	const collection = _collection as keyof Records;
 	const cursor = cursorMap.get(backlinkSource);
+
+	// if already fetched we dont need to fetch again
+	const cursorTimestamp = timestampFromCursor(cursor);
+	if (cursorTimestamp && cursorTimestamp <= timestamp) return;
+
 	console.log(`${did}: fetchLinksUntil`, backlinkSource, cursor, timestamp);
 	const result = await client.listRecordsUntil(collection, cursor, timestamp);
 
···
 export const pulsingPostId = writable<string | null>(null);
 
 export const viewClient = new AtpClient();
-export const clients = new SvelteMap<AtprotoDid, AtpClient>();
-export const getClient = async (did: AtprotoDid): Promise<AtpClient> => {
+export const clients = new SvelteMap<Did, AtpClient>();
+export const getClient = async (did: Did): Promise<AtpClient> => {
 	if (!clients.has(did)) clients.set(did, await newPublicClient(did));
 	return clients.get(did)!;
 };
···
 	const cursorTimestamp = timestampFromCursor(res.value.cursor) ?? -1;
 	const threeDaysAgo = (Date.now() - 3 * 24 * 60 * 60 * 1000) * 1000;
 	const timestamp = Math.min(cursorTimestamp, threeDaysAgo);
-	console.log(`${did}: fetchFollowPosts`, res.value.cursor, timestamp);
+	console.log(`${did}: fetchForInteractions`, res.value.cursor, timestamp);
 	await Promise.all([repostSource].map((s) => fetchLinksUntil(client, s, timestamp)));
 };
 
···
 		{ cid: post.cid, uri: post.uri, record: post.value as AppBskyFeedPost.Main } as PostWithUri
 	]);
 	addPosts(postsWithUri);
-	postCursors.set(did, { value: newPosts.cursor, end: newPosts.cursor === undefined });
 };
 
 export const addPosts = (newPosts: Iterable<[ResourceUri, PostWithUri]>) => {
···
 };
 
 export const fetchTimeline = async (did: AtprotoDid, limit: number = 6) => {
-	const client = await getClient(did);
+	const targetClient = await getClient(did);
 
 	const cursor = postCursors.get(did);
 	if (cursor && cursor.end) return;
 
-	const accPosts = await fetchPostsWithBacklinks(client, cursor?.value, limit);
+	const accPosts = await fetchPostsWithBacklinks(targetClient, cursor?.value, limit);
 	if (!accPosts.ok) throw `cant fetch posts ${did}: ${accPosts.error}`;
 
 	// if the cursor is undefined, we've reached the end of the timeline
-	if (!accPosts.value.cursor) {
-		postCursors.set(did, { ...cursor, end: true });
-		return;
-	}
-
-	postCursors.set(did, { value: accPosts.value.cursor, end: false });
-	const hydrated = await hydratePosts(client, did, accPosts.value.posts);
+	postCursors.set(did, { value: accPosts.value.cursor, end: !accPosts.value.cursor });
+	const hydrated = await hydratePosts(targetClient, did, accPosts.value.posts);
 	if (!hydrated.ok) throw `cant hydrate posts ${did}: ${hydrated.error}`;
 
 	addPosts(hydrated.value);
 	addTimeline(did, hydrated.value.keys());
 
-	const timestamp = timestampFromCursor(accPosts.value.cursor);
-	console.log(`${did}: fetchTimeline`, accPosts.value.cursor, timestamp);
+	console.log(`${did}: fetchTimeline`, accPosts.value.cursor);
+};
+
+export const fetchInteractionsUntil = async (client: AtpClient, did: Did) => {
+	const cursor = postCursors.get(did);
+	if (!cursor) return;
+	const timestamp = timestampFromCursor(cursor.value);
 	await Promise.all([likeSource, repostSource].map((s) => fetchLinksUntil(client, s, timestamp)));
 };
 

src/routes/+page.svelte

···
 	import NotificationsView from '$components/NotificationsView.svelte';
 	import FollowingView from '$components/FollowingView.svelte';
 	import TimelineView from '$components/TimelineView.svelte';
+	import ProfileView from '$components/ProfileView.svelte';
 	import { AtpClient, streamNotifications } from '$lib/at/client';
 	import { accounts, type Account } from '$lib/accounts';
 	import { onMount, tick } from 'svelte';
···
 		handleAccountSelected(newAccounts[0]?.did);
 	};
 
-	type View = 'timeline' | 'notifications' | 'following' | 'settings';
+	type View = 'timeline' | 'notifications' | 'following' | 'settings' | 'profile';
 	let currentView = $state<View>('timeline');
 	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,
 		following: 1,
 		notifications: 2,
-		settings: 3
+		settings: 3,
+		profile: 4
 	};
 
 	const switchView = async (newView: View) => {
···
 		scrollPositions.set(currentView, window.scrollY);
 
 		const direction = viewOrder[newView] > viewOrder[currentView] ? 'right' : 'left';
-		animClass = direction === 'right' ? 'animate-slide-in-right' : 'animate-slide-in-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';
+		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' });
+	};
+
+	const goToProfile = (did: AtprotoDid) => {
+		viewingProfileDid = did;
+		switchView('profile');
 	};
 
 	let postComposerState = $state<PostComposerState>({ type: 'null' });
···
 		{/if}
 		{#if currentView === 'following'}
 			<div class={animClass}>
-				<FollowingView selectedClient={selectedClient!} selectedDid={selectedDid!} />
+				<FollowingView
+					selectedClient={selectedClient!}
+					selectedDid={selectedDid!}
+					onProfileClick={goToProfile}
+				/>
+			</div>
+		{/if}
+		{#if currentView === 'profile' && viewingProfileDid}
+			<div class={animClass}>
+				<ProfileView
+					client={selectedClient!}
+					did={viewingProfileDid}
+					onBack={() => switchView(previousView)}
+					bind:postComposerState
+				/>
 			</div>
 		{/if}
 	</div>
···
 
 		<div
 			class="
-			{currentView === 'timeline' || currentView === 'following' ? '' : 'hidden'}
+			{currentView === 'timeline' || currentView === 'following' || currentView === 'profile'
+				? ''
+				: 'hidden'}
 			z-20 w-full max-w-2xl p-2.5 px-4 pb-1 transition-all
 			"
 		>