add bluesky feed

src/lib/atproto/methods.ts

···
 	client?: Client;
 	filter?: string;
 	limit?: number;
+	cursor?: string;
 }) {
 	data ??= {};
 	data.did ??= user.did;
···
 	});
 
 	const response = await data.client.get('app.bsky.feed.getAuthorFeed', {
-		params: { actor: data.did, filter: data.filter ?? 'posts_with_media', limit: data.limit || 100 }
+		params: {
+			actor: data.did,
+			filter: data.filter ?? 'posts_with_media',
+			limit: data.limit || 100,
+			cursor: data.cursor
+		}
 	});
 
 	if (!response.ok) return;

src/lib/cards/BlueskyFeedCard/BlueskyFeedCard.svelte

···
+<script lang="ts">
+	import type { Item } from '$lib/types';
+	import { onMount } from 'svelte';
+	import { BlueskyPost } from '../../components/bluesky-post';
+	import { getAdditionalUserData, getDidContext } from '$lib/website/context';
+	import { resolveHandle, getAuthorFeed } from '$lib/atproto/methods';
+	import type { Did, Handle } from '@atcute/lexicons';
+
+	let { item }: { item: Item } = $props();
+
+	const data = getAdditionalUserData();
+	const did = getDidContext();
+
+	// svelte-ignore state_referenced_locally
+	const lookupKey = (item.cardData.did as string) || (item.cardData.handle as string) || did;
+	// svelte-ignore state_referenced_locally
+	const preloaded = (data[item.cardType] as Record<string, any>)?.[lookupKey];
+	let feed: any[] | undefined = $state(preloaded?.feed);
+	let cursor = $state<string | undefined>(preloaded?.cursor);
+	// svelte-ignore state_referenced_locally
+	let targetDid = $state<Did | undefined>(item.cardData.did ? (item.cardData.did as Did) : did);
+	let loading = $state(false);
+
+	async function loadMore() {
+		if (loading || !cursor || !targetDid) return;
+		loading = true;
+		try {
+			const result = await getAuthorFeed({
+				did: targetDid,
+				filter: 'posts_no_replies',
+				limit: 20,
+				cursor
+			});
+			if (result?.feed) {
+				feed = [...(feed ?? []), ...result.feed];
+			}
+			cursor = result?.cursor;
+		} finally {
+			loading = false;
+		}
+	}
+
+	function handleScroll(e: Event) {
+		const el = e.currentTarget as HTMLElement;
+		if (el.scrollHeight - el.scrollTop - el.clientHeight < 200) {
+			loadMore();
+		}
+	}
+
+	onMount(async () => {
+		if (feed) return;
+
+		// Resolve handle to DID if needed
+		if (item.cardData.handle && !item.cardData.did) {
+			try {
+				targetDid = await resolveHandle({ handle: item.cardData.handle as Handle });
+			} catch {
+				// fall back to context did
+			}
+		}
+
+		try {
+			const result = await getAuthorFeed({
+				did: targetDid,
+				filter: 'posts_no_replies',
+				limit: 20
+			});
+			feed = result?.feed;
+			cursor = result?.cursor;
+		} catch {
+			// failed to fetch feed
+		}
+	});
+</script>
+
+<div class="flex h-full flex-col overflow-x-hidden overflow-y-auto p-3" onscroll={handleScroll}>
+	{#if feed && feed.length > 0}
+		<div class={[item.cardData.label ? 'pt-8' : '']}>
+			{#each feed as feedItem, i (feedItem.post?.uri ?? i)}
+				<BlueskyPost showAvatar compact feedViewPost={feedItem.post} />
+				{#if i < feed.length - 1}
+					<div
+						class="border-base-200 dark:border-base-800 accent:border-base-50/5 my-3 border-t"
+					></div>
+				{/if}
+			{/each}
+		</div>
+		{#if loading}
+			<div class="text-base-400 py-2 text-center text-xs">Loading...</div>
+		{/if}
+	{:else}
+		<div class="text-base-500 flex h-full items-center justify-center text-sm">
+			No posts to show
+		</div>
+	{/if}
+</div>

src/lib/cards/BlueskyFeedCard/index.ts

···
+import type { CardDefinition } from '../types';
+import BlueskyFeedCard from './BlueskyFeedCard.svelte';
+import { getAuthorFeed, resolveHandle } from '$lib/atproto/methods';
+import type { Did, Handle } from '@atcute/lexicons';
+import { isDid } from '@atcute/lexicons/syntax';
+
+export const BlueskyFeedCardDefinition = {
+	type: 'blueskyFeed',
+	contentComponent: BlueskyFeedCard,
+	createNew: (card) => {
+		card.cardType = 'blueskyFeed';
+		card.w = 4;
+		card.mobileW = 8;
+		card.h = 6;
+		card.mobileH = 10;
+	},
+
+	onUrlHandler: (url, item) => {
+		const match = url.match(/bsky\.app\/profile\/([^/]+)\/?$/);
+		if (!match) return null;
+
+		const actor = match[1];
+		if (isDid(actor)) {
+			item.cardData.did = actor;
+		} else {
+			item.cardData.handle = actor;
+		}
+
+		item.w = 4;
+		item.mobileW = 8;
+		item.h = 6;
+		item.mobileH = 10;
+
+		return item;
+	},
+	urlHandlerPriority: 1,
+
+	loadData: async (items, { did }) => {
+		// Map from original key (handle or did from cardData) to resolved DID
+		const keysToDid = new Map<string, Did>();
+
+		for (const item of items) {
+			if (item.cardData?.did) {
+				const d = item.cardData.did as Did;
+				keysToDid.set(d, d);
+			} else if (item.cardData?.handle) {
+				try {
+					const resolved = await resolveHandle({ handle: item.cardData.handle as Handle });
+					keysToDid.set(item.cardData.handle as string, resolved);
+				} catch {
+					// skip unresolvable handles
+				}
+			} else {
+				keysToDid.set(did, did);
+			}
+		}
+
+		const result: Record<string, unknown> = {};
+		const fetched = new Set<string>();
+
+		await Promise.all(
+			Array.from(keysToDid.entries()).map(async ([key, fetchDid]) => {
+				try {
+					let feedData;
+					if (!fetched.has(fetchDid)) {
+						feedData = await getAuthorFeed({
+							did: fetchDid,
+							filter: 'posts_no_replies',
+							limit: 20
+						});
+						result[fetchDid] = feedData;
+						fetched.add(fetchDid);
+					} else {
+						feedData = result[fetchDid];
+					}
+					// Also store under original key so the component can look it up
+					if (key !== fetchDid) {
+						result[key] = feedData;
+					}
+				} catch {
+					// skip failed fetches
+				}
+			})
+		);
+
+		return result;
+	},
+
+	minW: 4,
+	minH: 4,
+
+	name: 'Bluesky Feed',
+
+	canHaveLabel: true,
+
+	keywords: ['bsky', 'atproto', 'feed', 'timeline', 'posts'],
+	groups: ['Social'],
+	icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-4"><path d="M6.335 3.836a47.2 47.2 0 0 1 5.354 4.94c.088.093.165.18.232.26a18 18 0 0 1 .232-.26 47.2 47.2 0 0 1 5.355-4.94C18.882 2.687 21.46 1.37 22.553 2.483c.986 1.003.616 4.264.305 5.857-.567 2.902-2.018 4.274-3.703 4.542 2.348.386 4.678 1.96 3.13 5.602-1.97 4.636-7.065 1.763-9.795-.418a3 3 0 0 1-.18-.15 3 3 0 0 1-.18.15c-2.73 2.18-7.825 5.054-9.795.418-1.548-3.643.782-5.216 3.13-5.602C3.98 12.631 2.529 11.26 1.962 8.357c-.311-1.593-.681-4.854.305-5.857C3.361 1.37 5.94 2.687 6.335 3.836Z" /></svg>`
+} as CardDefinition & { type: 'blueskyFeed' };

src/lib/cards/BlueskyPostCard/BlueskyPostCard.svelte

···
 
 <div class="flex h-full flex-col justify-center-safe overflow-y-scroll p-4">
 	{#if post}
-		<BlueskyPost showLogo feedViewPost={post}></BlueskyPost>
+		<div class={[item.cardData.label ? 'pt-8' : '']}>
+			<BlueskyPost showLogo feedViewPost={post}></BlueskyPost>
+		</div>
 		<div class="h-4 w-full"></div>
 	{:else}
 		<p class="text-base-600 dark:text-base-400 text-center">A bluesky post will appear here</p>

src/lib/cards/BlueskyPostCard/index.ts

···
 	minW: 4,
 	name: 'Bluesky Post',
 
+	canHaveLabel: true,
+
 	keywords: ['skeet', 'bsky', 'atproto', 'post'],
 	groups: ['Social'],
 	icon: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-4"><path stroke-linecap="round" stroke-linejoin="round" d="M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 0 1 .865-.501 48.172 48.172 0 0 0 3.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0 0 12 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018Z" /></svg>`

src/lib/cards/LatestBlueskyPostCard/LatestBlueskyPostCard.svelte

···
 </script>
 
 <div class="flex h-full flex-col justify-center-safe overflow-y-scroll p-4">
-	<div
-		class="accent:text-base-950 bg-base-200/50 dark:bg-base-700/30 mx-auto mb-6 w-fit rounded-xl p-1 px-2 text-2xl font-semibold"
-	>
-		My latest bluesky post
-	</div>
 	{#if feed?.[0]?.post}
-		<BlueskyPost showLogo feedViewPost={feed?.[0].post}></BlueskyPost>
+		<div class={[item.cardData.label ? "pt-8" : '']}>
+			<BlueskyPost showLogo feedViewPost={feed?.[0].post}></BlueskyPost>
+		</div>
 		<div class="h-4 w-full"></div>
 	{:else}
 		Your latest bluesky post will appear here.

src/lib/cards/LatestBlueskyPostCard/index.ts

···
 
 	name: 'Latest Bluesky Post',
 
+	canHaveLabel: true,
+
 	keywords: ['bsky', 'atproto', 'recent', 'feed'],
 	groups: ['Social'],
 	icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-4"><path d="M6.335 3.836a47.2 47.2 0 0 1 5.354 4.94c.088.093.165.18.232.26a18 18 0 0 1 .232-.26 47.2 47.2 0 0 1 5.355-4.94C18.882 2.687 21.46 1.37 22.553 2.483c.986 1.003.616 4.264.305 5.857-.567 2.902-2.018 4.274-3.703 4.542 2.348.386 4.678 1.96 3.13 5.602-1.97 4.636-7.065 1.763-9.795-.418a3 3 0 0 1-.18-.15 3 3 0 0 1-.18.15c-2.73 2.18-7.825 5.054-9.795.418-1.548-3.643.782-5.216 3.13-5.602C3.98 12.631 2.529 11.26 1.962 8.357c-.311-1.593-.681-4.854.305-5.857C3.361 1.37 5.94 2.687 6.335 3.836Z" /></svg>`

src/lib/cards/index.ts

···
 import { BigSocialCardDefinition } from './BigSocialCard';
 import { BlueskyMediaCardDefinition } from './BlueskyMediaCard';
 import { BlueskyPostCardDefinition } from './BlueskyPostCard';
+import { BlueskyFeedCardDefinition } from './BlueskyFeedCard';
 import { LatestBlueskyPostCardDefinition } from './LatestBlueskyPostCard';
 import { DinoGameCardDefinition } from './GameCards/DinoGameCard';
 import { EmbedCardDefinition } from './EmbedCard';
···
 	YoutubeCardDefinition,
 	BlueskyPostCardDefinition,
 	LatestBlueskyPostCardDefinition,
+	BlueskyFeedCardDefinition,
 	LivestreamCardDefitition,
 	LivestreamEmbedCardDefitition,
 	// EmbedCardDefinition,

src/lib/components/post/embeds/QuotedPost.svelte

···
 </script>
 
 <div
-	class="border-base-300 dark:border-base-600/30 bg-base-950/5 dark:bg-base-950/20 overflow-hidden rounded-2xl border text-sm"
+	class="border-base-300 dark:border-base-600/30 accent:border-accent-300/20 accent:bg-accent-100/10 bg-base-950/5 dark:bg-base-950/20 overflow-hidden rounded-2xl border text-sm"
 >
 	<div class="p-3">
 		<div class="flex items-center gap-2">
···
 						{record.author.displayName}
 					</span>
 				{/if}
-				<span class="text-base-500 dark:text-base-400 truncate">
+				<span class="text-base-500 dark:text-base-400 accent:text-accent-950 truncate">
 					@{record.author.handle}
 				</span>
 			</div>

src/lib/website/Account.svelte

···
 					<Button
 						variant="ghost"
 						onclick={() => {
-							goto('/' + getHandleOrDid(user.profile), {});
+							if (user.profile) goto('/' + getHandleOrDid(user.profile), {});
 						}}>Leave edit mode</Button
 					>
 				{/if}

src/routes/(auth)/oauth/callback/+page.svelte

···
 			goto('/' + getHandleOrDid(user.profile) + '/edit', {});
 		}
 
-		if(!user.isInitializing && !startedErrorTimer) {
+		if (!user.isInitializing && !startedErrorTimer) {
 			startedErrorTimer = true;
 
 			setTimeout(() => {
···
 			>There was an error signing you in, please go back to the
 			<a class="text-accent-600 dark:text-accent-400" href="/">homepage</a>
 			and try again.
-			
 		</span>
 	</div>
 {/if}