refactor: fetch all quotes properly

src/lib/components/page/page-header.svelte

···
 <script lang="ts">
+	import type { Snippet } from 'svelte';
+
 	interface Props {
 		title: string;
+		children?: Snippet;
 	}
 
-	const { title }: Props = $props();
+	const { title, children }: Props = $props();
 </script>
 
 <div class="page-header">
 	<h2 class="title">{title}</h2>
+
+	{#if children}
+		<div class="actions">
+			{@render children()}
+		</div>
+	{/if}
 </div>
 
 <style>
 	.page-header {
+		display: flex;
 		position: sticky;
 		top: 0;
+		justify-content: space-between;
+		align-items: center;
 		z-index: 1;
 		border-bottom: 1px solid var(--divider-sm);
 		background: var(--bg-primary);
···
 		font-weight: 600;
 		font-size: 1rem;
 		line-height: 1.5rem;
+	}
+
+	.actions {
+		display: flex;
+		align-items: center;
+		gap: 4px;
 	}
 </style>

src/lib/queries/constellation.ts

···
 
 	return json as LinkResponse<K>;
 };
+
+// due to the way Bluesky has designed its embeds, quotes can be in two
+// different paths, `.embed.record.uri` and `.embed.record.record.uri`.
+// Since Constellation can only support one path at a time, here's a function
+// that will make this happen really nicely
+const MP_CURSOR_RE = /^mp:(\d+)(?::(.+))?$/;
+
+export const getLinksMultiPath = async <K extends keyof Records>({
+	uri,
+	collection,
+	paths,
+	limit = 10,
+	cursor = null,
+}: {
+	uri: string;
+	collection: K;
+	paths: [string, string, ...string[]];
+	limit?: number;
+	cursor?: string | null;
+}): Promise<LinkResponse<K>> => {
+	let index = 0;
+	let curs: string | null = null;
+
+	const result: LinkResponse<K> = {
+		// this will never be anything other than 0 unfortunately,
+		// can't make it work across different paths
+		total: 0,
+		cursor: null,
+		linking_records: [],
+	};
+
+	if (cursor !== null) {
+		const match = MP_CURSOR_RE.exec(cursor);
+		if (match === null) {
+			return result;
+		}
+
+		index = parseInt(match[1], 10);
+		curs = match[2] ?? null;
+
+		if (index >= paths.length) {
+			return result;
+		}
+	}
+
+	while (index < paths.length) {
+		const data = await getLinks({
+			uri: uri,
+			collection: collection,
+			path: paths[index],
+			limit: limit - result.linking_records.length,
+			cursor: curs,
+		});
+
+		result.linking_records = [...result.linking_records, ...data.linking_records];
+
+		// response returned a cursor, so we're breaking early
+		if (data.cursor !== null) {
+			result.cursor = `mp:${index}:${data.cursor}`;
+			break;
+		}
+
+		// we've reached the limit
+		if (result.linking_records.length >= limit) {
+			break;
+		}
+
+		// move to the next path
+		index++;
+		curs = null;
+		result.cursor = index < paths.length ? `mp:${index}` : null;
+	}
+
+	return result;
+};

src/routes/(app)/[actor=did]/[rkey=tid]/all-quotes/+page.ts

···
 import { PUBLIC_APPVIEW_URL } from '$env/static/public';
 import type { PageLoad } from './$types';
 
+import { getLinksMultiPath } from '$lib/queries/constellation';
 import { makeAtUri } from '$lib/types/at-uri';
-import { getLinks } from '$lib/queries/constellation';
 
 export const load: PageLoad = async ({ url, params, fetch }) => {
 	const rpc = new XRPC({ handler: simpleFetchHandler({ service: PUBLIC_APPVIEW_URL }) });
 
 	const parentUri = makeAtUri(params.actor, 'app.bsky.feed.post', params.rkey);
 
-	const { cursor, linking_records } = await getLinks({
+	const { cursor, linking_records } = await getLinksMultiPath({
 		uri: parentUri,
 		collection: 'app.bsky.feed.post',
-		path: '.embed.record.uri',
+		paths: ['.embed.record.uri', '.embed.record.record.uri'],
 		cursor: url.searchParams.get('cursor'),
 		limit: 25,
 	});

src/routes/(app)/[actor=did]/[rkey=tid]/quotes/+page.svelte

···
 <script lang="ts">
+	import { base } from '$app/paths';
 	import { page } from '$app/state';
 	import { PUBLIC_APP_NAME } from '$env/static/public';
 	import type { PageProps } from './$types';
 
 	import { paginate } from '$lib/utils/pagination';
 
+	import OverflowMenu from '$lib/components/overflow-menu.svelte';
 	import PageContainer from '$lib/components/page/page-container.svelte';
 	import PageHeader from '$lib/components/page/page-header.svelte';
 	import PageListing from '$lib/components/page/page-listing.svelte';
 	import PostFeedItem from '$lib/components/timeline/post-feed-item.svelte';
+
+	import ThreadOutlined from '$lib/components/central-icons/thread-outlined.svelte';
 
 	const { data }: PageProps = $props();
 
···
 </svelte:head>
 
 <PageContainer>
-	<PageHeader title="Quotes" />
+	<PageHeader title="Quotes">
+		<OverflowMenu
+			items={[
+				{
+					label: `Show all quotes`,
+					href: `${base}/${page.params.actor}/${page.params.rkey}/all-quotes`,
+					icon: ThreadOutlined,
+				},
+			]}
+		/>
+	</PageHeader>
 
 	<PageListing subject="posts" {rootUrl} {nextUrl}>
 		{#each data.quotes.items as post (post.uri)}