git.stevedylan.dev

add quote posts! 582de0b7

Pascal Hertleif · 2026-04-22 13:49 1 file(s) · +109 −8

packages/cli/src/components/sequoia-comments.js +109 −8

	width: 1rem;
	height: 1rem;
}

.sequoia-quotes-section {
	margin-top: 1.75rem;
}

.sequoia-quotes-header {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--sequoia-secondary-color, #6b7280);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	margin: 0;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--sequoia-border-color, #e5e7eb);
}

a.sequoia-comment-time {
	text-decoration: none;
	color: var(--sequoia-secondary-color, #6b7280);
}

a.sequoia-comment-time:hover {
	text-decoration: underline;
}
`;

// ============================================================================

	return post?.$type === "app.bsky.feed.defs#threadViewPost";
}

/**
 * Fetch all quote posts for a given post URI, paginating through all results.
 * Uses the public Bluesky AppView — gaps are expected for posts from
 * less-connected PDS instances.
 * @param {string} postUri - AT Protocol URI for the post
 * @returns {Promise<Array>} Array of PostView objects
 */
async function getQuotes(postUri) {
	const quotes = [];
	let cursor;

	do {
		const url = new URL(
			"https://public.api.bsky.app/xrpc/app.bsky.feed.getQuotes",
		);
		url.searchParams.set("uri", postUri);
		url.searchParams.set("limit", "100");
		if (cursor) url.searchParams.set("cursor", cursor);

		const response = await fetch(url.toString());
		if (!response.ok) {
			throw new Error(`Failed to fetch quotes: ${response.status}`);
		}

		const data = await response.json();
		quotes.push(...(data.posts ?? []));
		cursor = data.cursor;
	} while (cursor);

	return quotes;
}

// ============================================================================
// Bluesky Icon
// ============================================================================

			const postUrl = buildBskyAppUrl(document.bskyPostRef.uri);
			const blackskyPostUrl = buildBlackskyAppUrl(document.bskyPostRef.uri);

			// Fetch the post thread
			const thread = await getPostThread(document.bskyPostRef.uri, this.depth);
			// Fetch thread and quotes in parallel; quote failures degrade gracefully
			const [threadResult, quotesResult] = await Promise.allSettled([
				getPostThread(document.bskyPostRef.uri, this.depth),
				getQuotes(document.bskyPostRef.uri),
			]);

			if (threadResult.status === "rejected") {
				throw threadResult.reason;
			}

			const thread = threadResult.value;
			const quotes =
				quotesResult.status === "fulfilled" ? quotesResult.value : [];

			// Check if there are any replies
			const replies = thread.replies?.filter(isThreadViewPost) ?? [];
			if (replies.length === 0) {
			if (replies.length === 0 && quotes.length === 0) {
				this.state = { type: "empty", postUrl, blackskyPostUrl };
				this.render();
				return;
			}

			this.state = { type: "loaded", thread, postUrl, blackskyPostUrl };
			this.state = { type: "loaded", thread, quotes, postUrl, blackskyPostUrl };
			this.render();
		} catch (error) {
			const message =

			case "loaded": {
				const replies =
					this.state.thread.replies?.filter(isThreadViewPost) ?? [];
				const quotes = this.state.quotes ?? [];
				const threadsHtml = replies
					.map((reply) => this.renderThread(reply))
					.join("");
				const commentCount = this.countComments(replies);
				const titleText =
					commentCount > 0
						? `${commentCount} Comment${commentCount !== 1 ? "s" : ""}`
						: "Comments";
				const quotesHtml = this.renderQuotesSection(quotes);

				this.commentsContainer.innerHTML = `
					<div class="sequoia-comments-header">
						<h3 class="sequoia-comments-title">${commentCount} Comment${commentCount !== 1 ? "s" : ""}</h3>
						<h3 class="sequoia-comments-title">${titleText}</h3>
						<div>
							<a href="${this.state.postUrl}" target="_blank" rel="noopener noreferrer" class="sequoia-reply-button sequoia-reply-bluesky">
								${BLUESKY_ICON}

					<div class="sequoia-comments-list">
						${threadsHtml}
					</div>
					${quotesHtml}
				`;
				break;
			}

	}

	/**
	 * Render a section of quote posts below the replies
	 * @param {Array} quotes - Array of PostView objects from getQuotes
	 */
	renderQuotesSection(quotes) {
		if (quotes.length === 0) return "";

		const quotesHtml = quotes
			.map((post) => {
				const quotePostUrl = buildBskyAppUrl(post.uri);
				return `<div class="sequoia-thread">${this.renderComment(post, false, 0, quotePostUrl)}</div>`;
			})
			.join("");

		return `
			<div class="sequoia-quotes-section">
				<h4 class="sequoia-quotes-header">Quotes (${quotes.length})</h4>
				<div class="sequoia-comments-list">
					${quotesHtml}
				</div>
			</div>
		`;
	}

	/**
	 * Render a single comment
	 * @param {any} post - Post data
	 * @param {boolean} showThreadLine - Whether to show the connecting thread line
	 * @param {number} _index - Index in the flattened thread (0 = top-level)
	 * @param {string|null} postUrl - Optional URL to link the timestamp to (used for quote posts)
	 */
	renderComment(post, showThreadLine = false, _index = 0) {
	renderComment(post, showThreadLine = false, _index = 0, postUrl = null) {
		const author = post.author;
		const displayName = author.displayName || author.handle;
		const avatarHtml = author.avatar

		const profileUrl = `https://bsky.app/profile/${author.did}`;
		const textHtml = renderTextWithFacets(post.record.text, post.record.facets);
		const timeAgo = formatRelativeTime(post.record.createdAt);
		const timeHtml = postUrl
			? `<a href="${escapeHtml(postUrl)}" target="_blank" rel="noopener noreferrer" class="sequoia-comment-time">${timeAgo}</a>`
			: `<span class="sequoia-comment-time">${timeAgo}</span>`;
		const threadLineHtml = showThreadLine
			? '<div class="sequoia-thread-line"></div>'
			: "";

							${escapeHtml(displayName)}
						</a>
						<span class="sequoia-comment-handle">@${escapeHtml(author.handle)}</span>
						<span class="sequoia-comment-time">${timeAgo}</span>
						${timeHtml}
					</div>
					<p class="sequoia-comment-text">${textHtml}</p>
				</div>

280	280		width: 1rem;
281	281		height: 1rem;
282	282		}
	283	+
	284	+	.sequoia-quotes-section {
	285	+	margin-top: 1.75rem;
	286	+	}
	287	+
	288	+	.sequoia-quotes-header {
	289	+	font-size: 0.75rem;
	290	+	font-weight: 600;
	291	+	color: var(--sequoia-secondary-color, #6b7280);
	292	+	letter-spacing: 0.05em;
	293	+	text-transform: uppercase;
	294	+	margin: 0;
	295	+	padding-bottom: 0.75rem;
	296	+	border-bottom: 1px solid var(--sequoia-border-color, #e5e7eb);
	297	+	}
	298	+
	299	+	a.sequoia-comment-time {
	300	+	text-decoration: none;
	301	+	color: var(--sequoia-secondary-color, #6b7280);
	302	+	}
	303	+
	304	+	a.sequoia-comment-time:hover {
	305	+	text-decoration: underline;
	306	+	}
283	307		`;
284	308
285	309		// ============================================================================

583	607		return post?.$type === "app.bsky.feed.defs#threadViewPost";
584	608		}
585	609
	610	+	/**
	611	+	* Fetch all quote posts for a given post URI, paginating through all results.
	612	+	* Uses the public Bluesky AppView — gaps are expected for posts from
	613	+	* less-connected PDS instances.
	614	+	* @param {string} postUri - AT Protocol URI for the post
	615	+	* @returns {Promise<Array>} Array of PostView objects
	616	+	*/
	617	+	async function getQuotes(postUri) {
	618	+	const quotes = [];
	619	+	let cursor;
	620	+
	621	+	do {
	622	+	const url = new URL(
	623	+	"https://public.api.bsky.app/xrpc/app.bsky.feed.getQuotes",
	624	+	);
	625	+	url.searchParams.set("uri", postUri);
	626	+	url.searchParams.set("limit", "100");
	627	+	if (cursor) url.searchParams.set("cursor", cursor);
	628	+
	629	+	const response = await fetch(url.toString());
	630	+	if (!response.ok) {
	631	+	throw new Error(`Failed to fetch quotes: ${response.status}`);
	632	+	}
	633	+
	634	+	const data = await response.json();
	635	+	quotes.push(...(data.posts ?? []));
	636	+	cursor = data.cursor;
	637	+	} while (cursor);
	638	+
	639	+	return quotes;
	640	+	}
	641	+
586	642		// ============================================================================
587	643		// Bluesky Icon
588	644		// ============================================================================

691	747		const postUrl = buildBskyAppUrl(document.bskyPostRef.uri);
692	748		const blackskyPostUrl = buildBlackskyAppUrl(document.bskyPostRef.uri);
693	749
694		-	// Fetch the post thread
695		-	const thread = await getPostThread(document.bskyPostRef.uri, this.depth);
	750	+	// Fetch thread and quotes in parallel; quote failures degrade gracefully
	751	+	const [threadResult, quotesResult] = await Promise.allSettled([
	752	+	getPostThread(document.bskyPostRef.uri, this.depth),
	753	+	getQuotes(document.bskyPostRef.uri),
	754	+	]);
	755	+
	756	+	if (threadResult.status === "rejected") {
	757	+	throw threadResult.reason;
	758	+	}
	759	+
	760	+	const thread = threadResult.value;
	761	+	const quotes =
	762	+	quotesResult.status === "fulfilled" ? quotesResult.value : [];
696	763
697		-	// Check if there are any replies
698	764		const replies = thread.replies?.filter(isThreadViewPost) ?? [];
699		-	if (replies.length === 0) {
	765	+	if (replies.length === 0 && quotes.length === 0) {
700	766		this.state = { type: "empty", postUrl, blackskyPostUrl };
701	767		this.render();
702	768		return;
703	769		}
704	770
705		-	this.state = { type: "loaded", thread, postUrl, blackskyPostUrl };
	771	+	this.state = { type: "loaded", thread, quotes, postUrl, blackskyPostUrl };
706	772		this.render();
707	773		} catch (error) {
708	774		const message =

772	838		case "loaded": {
773	839		const replies =
774	840		this.state.thread.replies?.filter(isThreadViewPost) ?? [];
	841	+	const quotes = this.state.quotes ?? [];
775	842		const threadsHtml = replies
776	843		.map((reply) => this.renderThread(reply))
777	844		.join("");
778	845		const commentCount = this.countComments(replies);
	846	+	const titleText =
	847	+	commentCount > 0
	848	+	? `${commentCount} Comment${commentCount !== 1 ? "s" : ""}`
	849	+	: "Comments";
	850	+	const quotesHtml = this.renderQuotesSection(quotes);
779	851
780	852		this.commentsContainer.innerHTML = `
781	853		<div class="sequoia-comments-header">
782		-	<h3 class="sequoia-comments-title">${commentCount} Comment${commentCount !== 1 ? "s" : ""}</h3>
	854	+	<h3 class="sequoia-comments-title">${titleText}</h3>
783	855		<div>
784	856		<a href="${this.state.postUrl}" target="_blank" rel="noopener noreferrer" class="sequoia-reply-button sequoia-reply-bluesky">
785	857		${BLUESKY_ICON}

792	864		<div class="sequoia-comments-list">
793	865		${threadsHtml}
794	866		</div>
	867	+	${quotesHtml}
795	868		`;
796	869		break;
797	870		}

835	908		}
836	909
837	910		/**
	911	+	* Render a section of quote posts below the replies
	912	+	* @param {Array} quotes - Array of PostView objects from getQuotes
	913	+	*/
	914	+	renderQuotesSection(quotes) {
	915	+	if (quotes.length === 0) return "";
	916	+
	917	+	const quotesHtml = quotes
	918	+	.map((post) => {
	919	+	const quotePostUrl = buildBskyAppUrl(post.uri);
	920	+	return `<div class="sequoia-thread">${this.renderComment(post, false, 0, quotePostUrl)}</div>`;
	921	+	})
	922	+	.join("");
	923	+
	924	+	return `
	925	+	<div class="sequoia-quotes-section">
	926	+	<h4 class="sequoia-quotes-header">Quotes (${quotes.length})</h4>
	927	+	<div class="sequoia-comments-list">
	928	+	${quotesHtml}
	929	+	</div>
	930	+	</div>
	931	+	`;
	932	+	}
	933	+
	934	+	/**
838	935		* Render a single comment
839	936		* @param {any} post - Post data
840	937		* @param {boolean} showThreadLine - Whether to show the connecting thread line
841	938		* @param {number} _index - Index in the flattened thread (0 = top-level)
	939	+	* @param {string\|null} postUrl - Optional URL to link the timestamp to (used for quote posts)
842	940		*/
843		-	renderComment(post, showThreadLine = false, _index = 0) {
	941	+	renderComment(post, showThreadLine = false, _index = 0, postUrl = null) {
844	942		const author = post.author;
845	943		const displayName = author.displayName \|\| author.handle;
846	944		const avatarHtml = author.avatar

850	948		const profileUrl = `https://bsky.app/profile/${author.did}`;
851	949		const textHtml = renderTextWithFacets(post.record.text, post.record.facets);
852	950		const timeAgo = formatRelativeTime(post.record.createdAt);
	951	+	const timeHtml = postUrl
	952	+	? `<a href="${escapeHtml(postUrl)}" target="_blank" rel="noopener noreferrer" class="sequoia-comment-time">${timeAgo}</a>`
	953	+	: `<span class="sequoia-comment-time">${timeAgo}</span>`;
853	954		const threadLineHtml = showThreadLine
854	955		? '<div class="sequoia-thread-line"></div>'
855	956		: "";

866	967		${escapeHtml(displayName)}
867	968		</a>
868	969		<span class="sequoia-comment-handle">@${escapeHtml(author.handle)}</span>
869		-	<span class="sequoia-comment-time">${timeAgo}</span>
	970	+	${timeHtml}
870	971		</div>
871	972		<p class="sequoia-comment-text">${textHtml}</p>
872	973		</div>