diff --git a/packages/cli/src/components/sequoia-comments.js b/packages/cli/src/components/sequoia-comments.js index 0e49491..cc0b21f 100644 --- a/packages/cli/src/components/sequoia-comments.js +++ b/packages/cli/src/components/sequoia-comments.js @@ -113,21 +113,34 @@ const styles = ` align-items: center; gap: 0.375rem; padding: 0.5rem 1rem; - background: var(--sequoia-accent-color, #2563eb); - color: #ffffff; border: none; - border-radius: var(--sequoia-border-radius, 8px); + border-radius: var(--sequoia-border-radius, 15px); font-size: 0.875rem; font-weight: 500; cursor: pointer; text-decoration: none; transition: background-color 0.15s ease; + margin-left:10px; +} + +.sequoia-reply-bluesky { + background: var(--sequoia-accent-color, #2563eb); + color: #ffffff; +} + +.sequoia-reply-blacksky { + background: var(--sequoia-accent-color, #6060E9); + color: #ffffff; } -.sequoia-reply-button:hover { +.sequoia-reply-bluesky:hover { background: color-mix(in srgb, var(--sequoia-accent-color, #2563eb) 85%, black); } +.sequoia-reply-blacksky:hover { + background: color-mix(in srgb, var(--sequoia-accent-color, #5252c3) 85%, black); +} + .sequoia-reply-button svg { width: 1rem; height: 1rem; @@ -547,6 +560,20 @@ function buildBskyAppUrl(postUri) { return `https://bsky.app/profile/${parsed.did}/post/${parsed.rkey}`; } +/** + * Build a Blacksky app URL for a post + * @param {string} postUri - AT Protocol URI for the post + * @returns {string} Blacksky app URL + */ +function buildBlackskyAppUrl(postUri) { + const parsed = parseAtUri(postUri); + if (!parsed) { + throw new Error(`Invalid post URI: ${postUri}`); + } + + return `https://blacksky.community/profile/${parsed.did}/post/${parsed.rkey}`; +} + /** * Type guard for ThreadViewPost * @param {any} post - Post to check @@ -563,6 +590,7 @@ function isThreadViewPost(post) { const BLUESKY_ICON = ``; +const BLACKSKY_ICON = ''; // ============================================================================ // Web Component @@ -660,6 +688,7 @@ class SequoiaComments extends BaseElement { } 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); @@ -667,12 +696,12 @@ class SequoiaComments extends BaseElement { // Check if there are any replies const replies = thread.replies?.filter(isThreadViewPost) ?? []; if (replies.length === 0) { - this.state = { type: "empty", postUrl }; + this.state = { type: "empty", postUrl, blackskyPostUrl }; this.render(); return; } - this.state = { type: "loaded", thread, postUrl }; + this.state = { type: "loaded", thread, postUrl, blackskyPostUrl }; this.render(); } catch (error) { const message = @@ -716,10 +745,14 @@ class SequoiaComments extends BaseElement { this.commentsContainer.innerHTML = `

Comments

- - ${BLUESKY_ICON} - Reply on Bluesky - +
+ + ${BLUESKY_ICON} + + + ${BLACKSKY_ICON} + +
No comments yet. Be the first to reply on Bluesky! @@ -746,10 +779,14 @@ class SequoiaComments extends BaseElement { this.commentsContainer.innerHTML = `

${commentCount} Comment${commentCount !== 1 ? "s" : ""}

- - ${BLUESKY_ICON} - Reply on Bluesky - +
+ + ${BLUESKY_ICON} + + + ${BLACKSKY_ICON} + +
${threadsHtml}