sequoia-cli 0.5.5 → 0.5.7

package/dist/components/sequoia-comments.js

@@ -11,7 +11,16 @@
  *   1. The `document-uri` attribute on the element
  *   2. A <link rel="site.standard.document" href="at://..."> tag in the document head
  *
+ * Custom reply button:
+ *   Place any element with slot="reply-button" to replace the default Bluesky/Blacksky buttons.
+ *   It stays in the light DOM, so your page CSS applies to it normally.
+ *   Only practical with post-uri, since that's the only time the URL is known at authoring time:
+ *     <sequoia-comments post-uri="https://bsky.app/profile/.../post/...">
+ *       <a slot="reply-button" href="https://bsky.app/profile/.../post/...">Reply</a>
+ *     </sequoia-comments>
+ *
  * Attributes:
+ *   - post-uri: Bluesky post as AT-URI (at://...) or bsky.app URL — skips PDS document lookup
  *   - document-uri: AT Protocol URI for the document (optional if link tag exists)
  *   - depth: Maximum depth of nested replies to fetch (default: 6)
  *   - hide: Set to "auto" to hide if no document link is detected
@@ -22,6 +31,7 @@
  *   - --sequoia-border-color: Border color (default: #e5e7eb)
  *   - --sequoia-accent-color: Accent/link color (default: #2563eb)
  *   - --sequoia-secondary-color: Secondary text color (default: #6b7280)
+ *   - --sequoia-font-family: Font family (default: system-ui stack)
  *   - --sequoia-border-radius: Border radius (default: 8px)
  */
 
@@ -32,7 +42,7 @@
 const styles = `
 :host {
 	display: block;
-	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+	font-family: var(--sequoia-font-family, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
 	color: var(--sequoia-fg-color, #1f2937);
 	line-height: 1.5;
 }
@@ -250,17 +260,17 @@ const styles = `
 	white-space: nowrap;
 }
 
+.sequoia-comment-handle::after {
+  content: "·";
+	margin-left: 0.5rem;
+}
+
 .sequoia-comment-time {
 	font-size: 0.875rem;
 	color: var(--sequoia-secondary-color, #6b7280);
 	flex-shrink: 0;
 }
 
-.sequoia-comment-time::before {
-	content: "·";
-	margin-right: 0.5rem;
-}
-
 .sequoia-comment-text {
 	margin: 0;
 	white-space: pre-wrap;
@@ -280,6 +290,30 @@ const styles = `
 	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;
+}
 `;
 
 // ============================================================================
@@ -583,6 +617,72 @@ function isThreadViewPost(post) {
 	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
+ */
+/**
+ * Normalise a user-supplied post reference to an AT-URI.
+ * Accepts:
+ *   - AT-URIs as-is:          at://did:plc:.../app.bsky.feed.post/rkey
+ *   - bsky.app post URLs:     https://bsky.app/profile/<handle-or-did>/post/<rkey>
+ * When the profile segment is already a DID no network request is made.
+ * @param {string} uriOrUrl
+ * @returns {Promise<string>} AT-URI
+ */
+async function resolvePostUri(uriOrUrl) {
+	if (uriOrUrl.startsWith("at://")) return uriOrUrl;
+
+	const match = uriOrUrl.match(
+		/bsky\.app\/profile\/([^/?#]+)\/post\/([^/?#]+)/,
+	);
+	if (!match) throw new Error(`Cannot parse Bluesky URL: ${uriOrUrl}`);
+
+	const [, handleOrDid, rkey] = match;
+
+	let did = handleOrDid;
+	if (!handleOrDid.startsWith("did:")) {
+		const url = new URL(
+			"https://public.api.bsky.app/xrpc/com.atproto.identity.resolveHandle",
+		);
+		url.searchParams.set("handle", handleOrDid);
+		const response = await fetch(url.toString());
+		if (!response.ok)
+			throw new Error(`Failed to resolve handle: ${response.status}`);
+		did = (await response.json()).did;
+	}
+
+	return `at://${did}/app.bsky.feed.post/${rkey}`;
+}
+
+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
 // ============================================================================
@@ -620,10 +720,11 @@ class SequoiaComments extends BaseElement {
 	}
 
 	static get observedAttributes() {
-		return ["document-uri", "depth", "hide"];
+		return ["post-uri", "document-uri", "depth", "hide"];
 	}
 
 	connectedCallback() {
+		this.initialized = true;
 		this.render();
 		this.loadComments();
 	}
@@ -633,7 +734,10 @@ class SequoiaComments extends BaseElement {
 	}
 
 	attributeChangedCallback() {
-		if (this.isConnected) {
+		// attributeChangedCallback fires for pre-existing attributes during
+		// element upgrade, *before* connectedCallback — skip until we've done
+		// the initial load, otherwise every attribute triggers a duplicate fetch.
+		if (this.initialized) {
 			this.loadComments();
 		}
 	}
@@ -670,39 +774,54 @@ class SequoiaComments extends BaseElement {
 		this.state = { type: "loading" };
 		this.render();
 
-		const docUri = this.documentUri;
-		if (!docUri) {
-			this.state = { type: "no-document" };
-			this.render();
-			return;
-		}
-
 		try {
-			// Fetch the document record
-			const document = await getDocument(docUri);
+			// Resolve the post URI — either directly from the attribute or via the
+			// document record (which requires a PDS roundtrip)
+			const rawPostUri = this.getAttribute("post-uri");
+			let postUri = rawPostUri ? await resolvePostUri(rawPostUri) : null;
+			if (!postUri) {
+				const docUri = this.documentUri;
+				if (!docUri) {
+					this.state = { type: "no-document" };
+					this.render();
+					return;
+				}
 
-			// Check if document has a Bluesky post reference
-			if (!document.bskyPostRef) {
-				this.state = { type: "no-comments-enabled" };
-				this.render();
-				return;
+				const document = await getDocument(docUri);
+				if (!document.bskyPostRef) {
+					this.state = { type: "no-comments-enabled" };
+					this.render();
+					return;
+				}
+
+				postUri = document.bskyPostRef.uri;
 			}
 
-			const postUrl = buildBskyAppUrl(document.bskyPostRef.uri);
-			const blackskyPostUrl = buildBlackskyAppUrl(document.bskyPostRef.uri);
+			const postUrl = buildBskyAppUrl(postUri);
+			const blackskyPostUrl = buildBlackskyAppUrl(postUri);
+
+			// Fetch thread and quotes in parallel; quote failures degrade gracefully
+			const [threadResult, quotesResult] = await Promise.allSettled([
+				getPostThread(postUri, this.depth),
+				getQuotes(postUri),
+			]);
+
+			if (threadResult.status === "rejected") {
+				throw threadResult.reason;
+			}
 
-			// Fetch the post thread
-			const thread = await getPostThread(document.bskyPostRef.uri, this.depth);
+			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 =
@@ -746,14 +865,7 @@ class SequoiaComments extends BaseElement {
 				this.commentsContainer.innerHTML = `
 					<div class="sequoia-comments-header">
 						<h3 class="sequoia-comments-title">Comments</h3>
-						<div>
-							<a href="${this.state.postUrl}" target="_blank" rel="noopener noreferrer" class="sequoia-reply-button sequoia-reply-bluesky">
-								${BLUESKY_ICON}
-							</a>
-							<a href="${this.state.blackskyPostUrl}" target="_blank" rel="noopener noreferrer" class="sequoia-reply-button sequoia-reply-blacksky">
-								${BLACKSKY_ICON}
-							</a>
-						</div>
+						<div>${this.renderReplyButtons(this.state.postUrl, this.state.blackskyPostUrl)}</div>
 					</div>
 					<div class="sequoia-empty">
 						No comments yet. Be the first to reply on Bluesky!
@@ -772,26 +884,26 @@ class SequoiaComments extends BaseElement {
 			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>
-						<div>
-							<a href="${this.state.postUrl}" target="_blank" rel="noopener noreferrer" class="sequoia-reply-button sequoia-reply-bluesky">
-								${BLUESKY_ICON}
-							</a>
-							<a href="${this.state.blackskyPostUrl}" target="_blank" rel="noopener noreferrer" class="sequoia-reply-button sequoia-reply-blacksky">
-								${BLACKSKY_ICON}
-							</a>
-						</div>
+						<h3 class="sequoia-comments-title">${titleText}</h3>
+						<div>${this.renderReplyButtons(this.state.postUrl, this.state.blackskyPostUrl)}</div>
 					</div>
 					<div class="sequoia-comments-list">
 						${threadsHtml}
 					</div>
+					${quotesHtml}
 				`;
 				break;
 			}
@@ -820,6 +932,24 @@ class SequoiaComments extends BaseElement {
 		return result;
 	}
 
+	/**
+	 * Render the reply-button slot. Any element with slot="reply-button" in the
+	 * light DOM is projected here and remains styleable by external CSS.
+	 * The default Bluesky/Blacksky buttons are used as fallback content.
+	 */
+	renderReplyButtons(postUrl, blackskyPostUrl) {
+		return `
+			<slot name="reply-button">
+				<a href="${escapeHtml(postUrl)}" target="_blank" rel="noopener noreferrer" class="sequoia-reply-button sequoia-reply-bluesky">
+					${BLUESKY_ICON}
+				</a>
+				<a href="${escapeHtml(blackskyPostUrl)}" target="_blank" rel="noopener noreferrer" class="sequoia-reply-button sequoia-reply-blacksky">
+					${BLACKSKY_ICON}
+				</a>
+			</slot>
+		`;
+	}
+
 	/**
 	 * Render a complete thread (top-level comment + all nested replies)
 	 */
@@ -834,6 +964,29 @@ class SequoiaComments extends BaseElement {
 		return `<div class="sequoia-thread">${commentsHtml}</div>`;
 	}
 
+	/**
+	 * 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) => {
+				return `<div class="sequoia-thread">${this.renderComment(post, false, 0)}</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
@@ -850,6 +1003,7 @@ class SequoiaComments extends BaseElement {
 		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 = `<a href="${escapeHtml(buildBskyAppUrl(post.uri))}" target="_blank" rel="noopener noreferrer" class="sequoia-comment-time">${timeAgo}</a>`;
 		const threadLineHtml = showThreadLine
 			? '<div class="sequoia-thread-line"></div>'
 			: "";
@@ -866,7 +1020,7 @@ class SequoiaComments extends BaseElement {
 							${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>