show quotes on bsky posts · jack.is/leaflet@ae3813a

+105

app/lish/[did]/[publication]/[rkey]/BlueskyQuotesPage.tsx

··· 1 + "use client"; 2 + import { AppBskyFeedDefs } from "@atproto/api"; 3 + import useSWR from "swr"; 4 + import { PageWrapper } from "components/Pages/Page"; 5 + import { useDrawerOpen } from "./Interactions/InteractionDrawer"; 6 + import { DotLoader } from "components/utils/DotLoader"; 7 + import { QuoteTiny } from "components/Icons/QuoteTiny"; 8 + import { openPage } from "./PostPages"; 9 + import { BskyPostContent } from "./BskyPostContent"; 10 + import { QuotesLink, getQuotesKey, fetchQuotes, prefetchQuotes } from "./PostLinks"; 11 + 12 + // Re-export for backwards compatibility 13 + export { QuotesLink, getQuotesKey, fetchQuotes, prefetchQuotes }; 14 + 15 + type PostView = AppBskyFeedDefs.PostView; 16 + 17 + export function BlueskyQuotesPage(props: { 18 + postUri: string; 19 + pageId: string; 20 + pageOptions?: React.ReactNode; 21 + hasPageBackground: boolean; 22 + }) { 23 + const { postUri, pageId, pageOptions } = props; 24 + const drawer = useDrawerOpen(postUri); 25 + 26 + const { 27 + data: quotesData, 28 + isLoading, 29 + error, 30 + } = useSWR(postUri ? getQuotesKey(postUri) : null, () => fetchQuotes(postUri)); 31 + 32 + return ( 33 + <PageWrapper 34 + pageType="doc" 35 + fullPageScroll={false} 36 + id={`post-page-${pageId}`} 37 + drawerOpen={!!drawer} 38 + pageOptions={pageOptions} 39 + > 40 + <div className="flex flex-col sm:px-4 px-3 sm:pt-3 pt-2 pb-1 sm:pb-4"> 41 + <div className="text-secondary font-bold mb-3 flex items-center gap-2"> 42 + <QuoteTiny /> 43 + Bluesky Quotes 44 + </div> 45 + {isLoading ? ( 46 + <div className="flex items-center justify-center gap-1 text-tertiary italic text-sm py-8"> 47 + <span>loading quotes</span> 48 + <DotLoader /> 49 + </div> 50 + ) : error ? ( 51 + <div className="text-tertiary italic text-sm text-center py-8"> 52 + Failed to load quotes 53 + </div> 54 + ) : quotesData && quotesData.posts.length > 0 ? ( 55 + <QuotesContent posts={quotesData.posts} postUri={postUri} /> 56 + ) : ( 57 + <div className="text-tertiary italic text-sm text-center py-8"> 58 + No quotes yet 59 + </div> 60 + )} 61 + </div> 62 + </PageWrapper> 63 + ); 64 + } 65 + 66 + function QuotesContent(props: { posts: PostView[]; postUri: string }) { 67 + const { posts, postUri } = props; 68 + 69 + return ( 70 + <div className="flex flex-col gap-0"> 71 + {posts.map((post) => ( 72 + <QuotePost 73 + key={post.uri} 74 + post={post} 75 + quotesUri={postUri} 76 + /> 77 + ))} 78 + </div> 79 + ); 80 + } 81 + 82 + function QuotePost(props: { 83 + post: PostView; 84 + quotesUri: string; 85 + }) { 86 + const { post, quotesUri } = props; 87 + const parent = { type: "quotes" as const, uri: quotesUri }; 88 + 89 + return ( 90 + <div 91 + className="flex gap-2 relative py-2 px-2 hover:bg-bg-page rounded cursor-pointer" 92 + onClick={() => openPage(parent, { type: "thread", uri: post.uri })} 93 + > 94 + <BskyPostContent 95 + post={post} 96 + parent={parent} 97 + linksEnabled={true} 98 + showEmbed={true} 99 + showBlueskyLink={true} 100 + onLinkClick={(e) => e.stopPropagation()} 101 + onEmbedClick={(e) => e.stopPropagation()} 102 + /> 103 + </div> 104 + ); 105 + }

+182

app/lish/[did]/[publication]/[rkey]/BskyPostContent.tsx

··· 1 + "use client"; 2 + import { AppBskyFeedDefs, AppBskyFeedPost } from "@atproto/api"; 3 + import { 4 + BlueskyEmbed, 5 + } from "components/Blocks/BlueskyPostBlock/BlueskyEmbed"; 6 + import { BlueskyRichText } from "components/Blocks/BlueskyPostBlock/BlueskyRichText"; 7 + import { BlueskyTiny } from "components/Icons/BlueskyTiny"; 8 + import { CommentTiny } from "components/Icons/CommentTiny"; 9 + import { QuoteTiny } from "components/Icons/QuoteTiny"; 10 + import { Separator } from "components/Layout"; 11 + import { useLocalizedDate } from "src/hooks/useLocalizedDate"; 12 + import { useHasPageLoaded } from "components/InitialPageLoadProvider"; 13 + import { OpenPage } from "./PostPages"; 14 + import { ThreadLink, QuotesLink } from "./PostLinks"; 15 + 16 + type PostView = AppBskyFeedDefs.PostView; 17 + 18 + export function BskyPostContent(props: { 19 + post: PostView; 20 + parent?: OpenPage; 21 + linksEnabled?: boolean; 22 + avatarSize?: "sm" | "md"; 23 + showEmbed?: boolean; 24 + showBlueskyLink?: boolean; 25 + onEmbedClick?: (e: React.MouseEvent) => void; 26 + onLinkClick?: (e: React.MouseEvent) => void; 27 + }) { 28 + const { 29 + post, 30 + parent, 31 + linksEnabled = true, 32 + avatarSize = "md", 33 + showEmbed = true, 34 + showBlueskyLink = true, 35 + onEmbedClick, 36 + onLinkClick, 37 + } = props; 38 + 39 + const record = post.record as AppBskyFeedPost.Record; 40 + const postId = post.uri.split("/")[4]; 41 + const url = `https://bsky.app/profile/${post.author.handle}/post/${postId}`; 42 + 43 + const avatarClass = avatarSize === "sm" ? "w-8 h-8" : "w-10 h-10"; 44 + 45 + return ( 46 + <> 47 + <div className="flex flex-col items-center shrink-0"> 48 + {post.author.avatar ? ( 49 + <img 50 + src={post.author.avatar} 51 + alt={`${post.author.displayName}'s avatar`} 52 + className={`${avatarClass} rounded-full border border-border-light`} 53 + /> 54 + ) : ( 55 + <div className={`${avatarClass} rounded-full border border-border-light bg-border`} /> 56 + )} 57 + </div> 58 + 59 + <div className="flex flex-col grow min-w-0"> 60 + <div className={`flex items-center gap-2 leading-tight ${avatarSize === "sm" ? "text-sm" : ""}`}> 61 + <div className="font-bold text-secondary"> 62 + {post.author.displayName} 63 + </div> 64 + <a 65 + className="text-xs text-tertiary hover:underline" 66 + target="_blank" 67 + href={`https://bsky.app/profile/${post.author.handle}`} 68 + onClick={onLinkClick} 69 + > 70 + @{post.author.handle} 71 + </a> 72 + </div> 73 + 74 + <div className={`flex flex-col gap-2 ${avatarSize === "sm" ? "mt-0.5" : "mt-1"}`}> 75 + <div className="text-sm text-secondary"> 76 + <BlueskyRichText record={record} /> 77 + </div> 78 + {showEmbed && post.embed && ( 79 + <div onClick={onEmbedClick}> 80 + <BlueskyEmbed embed={post.embed} postUrl={url} /> 81 + </div> 82 + )} 83 + </div> 84 + 85 + <div className={`flex gap-2 items-center ${avatarSize === "sm" ? "mt-1" : "mt-2"}`}> 86 + <ClientDate date={record.createdAt} /> 87 + <PostCounts 88 + post={post} 89 + parent={parent} 90 + linksEnabled={linksEnabled} 91 + showBlueskyLink={showBlueskyLink} 92 + url={url} 93 + onLinkClick={onLinkClick} 94 + /> 95 + </div> 96 + </div> 97 + </> 98 + ); 99 + } 100 + 101 + function PostCounts(props: { 102 + post: PostView; 103 + parent?: OpenPage; 104 + linksEnabled: boolean; 105 + showBlueskyLink: boolean; 106 + url: string; 107 + onLinkClick?: (e: React.MouseEvent) => void; 108 + }) { 109 + const { post, parent, linksEnabled, showBlueskyLink, url, onLinkClick } = props; 110 + 111 + return ( 112 + <div className="flex gap-2 items-center"> 113 + {post.replyCount != null && post.replyCount > 0 && ( 114 + <> 115 + <Separator classname="h-3" /> 116 + {linksEnabled ? ( 117 + <ThreadLink 118 + threadUri={post.uri} 119 + parent={parent} 120 + className="flex items-center gap-1 text-tertiary text-xs hover:text-accent-contrast" 121 + onClick={onLinkClick} 122 + > 123 + {post.replyCount} 124 + <CommentTiny /> 125 + </ThreadLink> 126 + ) : ( 127 + <div className="flex items-center gap-1 text-tertiary text-xs"> 128 + {post.replyCount} 129 + <CommentTiny /> 130 + </div> 131 + )} 132 + </> 133 + )} 134 + {post.quoteCount != null && post.quoteCount > 0 && ( 135 + <> 136 + <Separator classname="h-3" /> 137 + <QuotesLink 138 + postUri={post.uri} 139 + parent={parent} 140 + className="flex items-center gap-1 text-tertiary text-xs hover:text-accent-contrast" 141 + onClick={onLinkClick} 142 + > 143 + {post.quoteCount} 144 + <QuoteTiny /> 145 + </QuotesLink> 146 + </> 147 + )} 148 + {showBlueskyLink && ( 149 + <> 150 + <Separator classname="h-3" /> 151 + <a 152 + className="text-tertiary" 153 + target="_blank" 154 + href={url} 155 + onClick={onLinkClick} 156 + > 157 + <BlueskyTiny /> 158 + </a> 159 + </> 160 + )} 161 + </div> 162 + ); 163 + } 164 + 165 + export const ClientDate = (props: { date?: string }) => { 166 + const pageLoaded = useHasPageLoaded(); 167 + const formattedDate = useLocalizedDate( 168 + props.date || new Date().toISOString(), 169 + { 170 + month: "short", 171 + day: "numeric", 172 + year: "numeric", 173 + hour: "numeric", 174 + minute: "numeric", 175 + hour12: true, 176 + }, 177 + ); 178 + 179 + if (!pageLoaded) return null; 180 + 181 + return <div className="text-xs text-tertiary">{formattedDate}</div>; 182 + };

+118

app/lish/[did]/[publication]/[rkey]/PostLinks.tsx

··· 1 + "use client"; 2 + import { AppBskyFeedDefs } from "@atproto/api"; 3 + import { preload } from "swr"; 4 + import { openPage, OpenPage } from "./PostPages"; 5 + 6 + type ThreadViewPost = AppBskyFeedDefs.ThreadViewPost; 7 + type NotFoundPost = AppBskyFeedDefs.NotFoundPost; 8 + type BlockedPost = AppBskyFeedDefs.BlockedPost; 9 + type ThreadType = ThreadViewPost | NotFoundPost | BlockedPost; 10 + 11 + type PostView = AppBskyFeedDefs.PostView; 12 + 13 + export interface QuotesResponse { 14 + uri: string; 15 + cid?: string; 16 + cursor?: string; 17 + posts: PostView[]; 18 + } 19 + 20 + // Thread fetching 21 + export const getThreadKey = (uri: string) => `thread:${uri}`; 22 + 23 + export async function fetchThread(uri: string): Promise<ThreadType> { 24 + const params = new URLSearchParams({ uri }); 25 + const response = await fetch(`/api/bsky/thread?${params.toString()}`); 26 + 27 + if (!response.ok) { 28 + throw new Error("Failed to fetch thread"); 29 + } 30 + 31 + return response.json(); 32 + } 33 + 34 + export const prefetchThread = (uri: string) => { 35 + preload(getThreadKey(uri), () => fetchThread(uri)); 36 + }; 37 + 38 + // Quotes fetching 39 + export const getQuotesKey = (uri: string) => `quotes:${uri}`; 40 + 41 + export async function fetchQuotes(uri: string): Promise<QuotesResponse> { 42 + const params = new URLSearchParams({ uri }); 43 + const response = await fetch(`/api/bsky/quotes?${params.toString()}`); 44 + 45 + if (!response.ok) { 46 + throw new Error("Failed to fetch quotes"); 47 + } 48 + 49 + return response.json(); 50 + } 51 + 52 + export const prefetchQuotes = (uri: string) => { 53 + preload(getQuotesKey(uri), () => fetchQuotes(uri)); 54 + }; 55 + 56 + // Link component for opening thread pages with prefetching 57 + export function ThreadLink(props: { 58 + threadUri: string; 59 + parent?: OpenPage; 60 + children: React.ReactNode; 61 + className?: string; 62 + onClick?: (e: React.MouseEvent) => void; 63 + }) { 64 + const { threadUri, parent, children, className, onClick } = props; 65 + 66 + const handleClick = (e: React.MouseEvent) => { 67 + onClick?.(e); 68 + if (e.defaultPrevented) return; 69 + openPage(parent, { type: "thread", uri: threadUri }); 70 + }; 71 + 72 + const handlePrefetch = () => { 73 + prefetchThread(threadUri); 74 + }; 75 + 76 + return ( 77 + <button 78 + className={className} 79 + onClick={handleClick} 80 + onMouseEnter={handlePrefetch} 81 + onPointerDown={handlePrefetch} 82 + > 83 + {children} 84 + </button> 85 + ); 86 + } 87 + 88 + // Link component for opening quotes pages with prefetching 89 + export function QuotesLink(props: { 90 + postUri: string; 91 + parent?: OpenPage; 92 + children: React.ReactNode; 93 + className?: string; 94 + onClick?: (e: React.MouseEvent) => void; 95 + }) { 96 + const { postUri, parent, children, className, onClick } = props; 97 + 98 + const handleClick = (e: React.MouseEvent) => { 99 + onClick?.(e); 100 + if (e.defaultPrevented) return; 101 + openPage(parent, { type: "quotes", uri: postUri }); 102 + }; 103 + 104 + const handlePrefetch = () => { 105 + prefetchQuotes(postUri); 106 + }; 107 + 108 + return ( 109 + <button 110 + className={className} 111 + onClick={handleClick} 112 + onMouseEnter={handlePrefetch} 113 + onPointerDown={handlePrefetch} 114 + > 115 + {children} 116 + </button> 117 + ); 118 + }

+24 -1

app/lish/[did]/[publication]/[rkey]/PostPages.tsx

··· 25 25 import { LinearDocumentPage } from "./LinearDocumentPage"; 26 26 import { CanvasPage } from "./CanvasPage"; 27 27 import { ThreadPage as ThreadPageComponent } from "./ThreadPage"; 28 + import { BlueskyQuotesPage } from "./BlueskyQuotesPage"; 28 29 29 30 // Page types 30 31 export type DocPage = { type: "doc"; id: string }; 31 32 export type ThreadPage = { type: "thread"; uri: string }; 32 - export type OpenPage = DocPage | ThreadPage; 33 + export type QuotesPage = { type: "quotes"; uri: string }; 34 + export type OpenPage = DocPage | ThreadPage | QuotesPage; 33 35 34 36 // Get a stable key for a page 35 37 const getPageKey = (page: OpenPage): string => { 36 38 if (page.type === "doc") return page.id; 39 + if (page.type === "quotes") return `quotes:${page.uri}`; 37 40 return `thread:${page.uri}`; 38 41 }; 39 42 ··· 279 282 <SandwichSpacer /> 280 283 <ThreadPageComponent 281 284 threadUri={openPage.uri} 285 + pageId={pageKey} 286 + hasPageBackground={hasPageBackground} 287 + pageOptions={ 288 + <PageOptions 289 + onClick={() => closePage(openPage)} 290 + hasPageBackground={hasPageBackground} 291 + /> 292 + } 293 + /> 294 + </Fragment> 295 + ); 296 + } 297 + 298 + // Handle quotes pages 299 + if (openPage.type === "quotes") { 300 + return ( 301 + <Fragment key={pageKey}> 302 + <SandwichSpacer /> 303 + <BlueskyQuotesPage 304 + postUri={openPage.uri} 282 305 pageId={pageKey} 283 306 hasPageBackground={hasPageBackground} 284 307 pageOptions={

+16 -1

app/lish/[did]/[publication]/[rkey]/PublishBskyPostBlock.tsx

··· 4 4 import { useHasPageLoaded } from "components/InitialPageLoadProvider"; 5 5 import { BlueskyTiny } from "components/Icons/BlueskyTiny"; 6 6 import { CommentTiny } from "components/Icons/CommentTiny"; 7 + import { QuoteTiny } from "components/Icons/QuoteTiny"; 8 + import { ThreadLink, QuotesLink } from "./PostLinks"; 7 9 import { useLocalizedDate } from "src/hooks/useLocalizedDate"; 8 10 import { 9 11 BlueskyEmbed, ··· 11 13 } from "components/Blocks/BlueskyPostBlock/BlueskyEmbed"; 12 14 import { BlueskyRichText } from "components/Blocks/BlueskyPostBlock/BlueskyRichText"; 13 15 import { openPage } from "./PostPages"; 14 - import { ThreadLink } from "./ThreadPage"; 15 16 16 17 export const PubBlueskyPostBlock = (props: { 17 18 post: PostView; ··· 118 119 {post.replyCount} 119 120 <CommentTiny /> 120 121 </ThreadLink> 122 + <Separator classname="h-4" /> 123 + </> 124 + )} 125 + {post.quoteCount != null && post.quoteCount > 0 && ( 126 + <> 127 + <QuotesLink 128 + postUri={post.uri} 129 + parent={parent} 130 + className="flex items-center gap-1 hover:text-accent-contrast" 131 + onClick={(e) => e.stopPropagation()} 132 + > 133 + {post.quoteCount} 134 + <QuoteTiny /> 135 + </QuotesLink> 121 136 <Separator classname="h-4" /> 122 137 </> 123 138 )}

+53 -214

app/lish/[did]/[publication]/[rkey]/ThreadPage.tsx

··· 1 1 "use client"; 2 2 import { useEffect, useRef } from "react"; 3 - import { AppBskyFeedDefs, AppBskyFeedPost } from "@atproto/api"; 4 - import useSWR, { preload } from "swr"; 3 + import { AppBskyFeedDefs } from "@atproto/api"; 4 + import useSWR from "swr"; 5 5 import { PageWrapper } from "components/Pages/Page"; 6 6 import { useDrawerOpen } from "./Interactions/InteractionDrawer"; 7 7 import { DotLoader } from "components/utils/DotLoader"; 8 - import { 9 - BlueskyEmbed, 10 - PostNotAvailable, 11 - } from "components/Blocks/BlueskyPostBlock/BlueskyEmbed"; 12 - import { BlueskyRichText } from "components/Blocks/BlueskyPostBlock/BlueskyRichText"; 13 - import { BlueskyTiny } from "components/Icons/BlueskyTiny"; 14 - import { CommentTiny } from "components/Icons/CommentTiny"; 15 - import { Separator } from "components/Layout"; 16 - import { useLocalizedDate } from "src/hooks/useLocalizedDate"; 17 - import { useHasPageLoaded } from "components/InitialPageLoadProvider"; 18 - import { openPage, OpenPage } from "./PostPages"; 19 - import { useCardBorderHidden } from "components/Pages/useCardBorderHidden"; 8 + import { PostNotAvailable } from "components/Blocks/BlueskyPostBlock/BlueskyEmbed"; 9 + import { openPage } from "./PostPages"; 20 10 import { useThreadState } from "src/useThreadState"; 21 - import { scrollIntoViewIfNeeded } from "src/utils/scrollIntoViewIfNeeded"; 11 + import { BskyPostContent, ClientDate } from "./BskyPostContent"; 12 + import { 13 + ThreadLink, 14 + getThreadKey, 15 + fetchThread, 16 + prefetchThread, 17 + } from "./PostLinks"; 18 + 19 + // Re-export for backwards compatibility 20 + export { ThreadLink, getThreadKey, fetchThread, prefetchThread, ClientDate }; 22 21 23 22 type ThreadViewPost = AppBskyFeedDefs.ThreadViewPost; 24 23 type NotFoundPost = AppBskyFeedDefs.NotFoundPost; 25 24 type BlockedPost = AppBskyFeedDefs.BlockedPost; 26 25 type ThreadType = ThreadViewPost | NotFoundPost | BlockedPost; 27 - 28 - // SWR key for thread data 29 - export const getThreadKey = (uri: string) => `thread:${uri}`; 30 - 31 - // Fetch thread from API route 32 - export async function fetchThread(uri: string): Promise<ThreadType> { 33 - const params = new URLSearchParams({ uri }); 34 - const response = await fetch(`/api/bsky/thread?${params.toString()}`); 35 - 36 - if (!response.ok) { 37 - throw new Error("Failed to fetch thread"); 38 - } 39 - 40 - return response.json(); 41 - } 42 - 43 - // Prefetch thread data 44 - export const prefetchThread = (uri: string) => { 45 - preload(getThreadKey(uri), () => fetchThread(uri)); 46 - }; 47 - 48 - // Link component for opening thread pages with prefetching 49 - export function ThreadLink(props: { 50 - threadUri: string; 51 - parent?: OpenPage; 52 - children: React.ReactNode; 53 - className?: string; 54 - onClick?: (e: React.MouseEvent) => void; 55 - }) { 56 - const { threadUri, parent, children, className, onClick } = props; 57 - 58 - const handleClick = (e: React.MouseEvent) => { 59 - onClick?.(e); 60 - if (e.defaultPrevented) return; 61 - openPage(parent, { type: "thread", uri: threadUri }); 62 - }; 63 - 64 - const handlePrefetch = () => { 65 - prefetchThread(threadUri); 66 - }; 67 - 68 - return ( 69 - <button 70 - className={className} 71 - onClick={handleClick} 72 - onMouseEnter={handlePrefetch} 73 - onPointerDown={handlePrefetch} 74 - > 75 - {children} 76 - </button> 77 - ); 78 - } 79 26 80 27 export function ThreadPage(props: { 81 28 threadUri: string; ··· 93 40 } = useSWR(threadUri ? getThreadKey(threadUri) : null, () => 94 41 fetchThread(threadUri), 95 42 ); 96 - let cardBorderHidden = useCardBorderHidden(null); 97 43 98 44 return ( 99 45 <PageWrapper ··· 193 139 replies={thread.replies as any[]} 194 140 threadUri={threadUri} 195 141 depth={0} 142 + parentAuthorDid={thread.post.author.did} 196 143 /> 197 144 </div> 198 145 )} ··· 208 155 }) { 209 156 const { post, isMainPost, showReplyLine, threadUri } = props; 210 157 const postView = post.post; 211 - const record = postView.record as AppBskyFeedPost.Record; 212 - 213 - const postId = postView.uri.split("/")[4]; 214 - const url = `https://bsky.app/profile/${postView.author.handle}/post/${postId}`; 158 + const parent = { type: "thread" as const, uri: threadUri }; 215 159 216 160 return ( 217 161 <div className="flex gap-2 relative"> ··· 220 164 <div className="absolute left-[19px] top-10 bottom-0 w-0.5 bg-border-light" /> 221 165 )} 222 166 223 - <div className="flex flex-col items-center shrink-0"> 224 - {postView.author.avatar ? ( 225 - <img 226 - src={postView.author.avatar} 227 - alt={`${postView.author.displayName}'s avatar`} 228 - className="w-10 h-10 rounded-full border border-border-light" 229 - /> 230 - ) : ( 231 - <div className="w-10 h-10 rounded-full border border-border-light bg-border" /> 232 - )} 233 - </div> 234 - 235 - <div 236 - className={`flex flex-col grow min-w-0 pb-3 ${isMainPost ? "pb-0" : ""}`} 237 - > 238 - <div className="flex items-center gap-2 leading-tight"> 239 - <div className="font-bold text-secondary"> 240 - {postView.author.displayName} 241 - </div> 242 - <a 243 - className="text-xs text-tertiary hover:underline" 244 - target="_blank" 245 - href={`https://bsky.app/profile/${postView.author.handle}`} 246 - > 247 - @{postView.author.handle} 248 - </a> 249 - </div> 250 - 251 - <div className="flex flex-col gap-2 mt-1"> 252 - <div className="text-sm text-secondary"> 253 - <BlueskyRichText record={record} /> 254 - </div> 255 - {postView.embed && ( 256 - <BlueskyEmbed embed={postView.embed} postUrl={url} /> 257 - )} 258 - </div> 259 - 260 - <div className="flex gap-2 items-center justify-between mt-2"> 261 - <ClientDate date={record.createdAt} /> 262 - <div className="flex gap-2 items-center"> 263 - {postView.replyCount != null && postView.replyCount > 0 && ( 264 - <> 265 - {isMainPost ? ( 266 - <div className="flex items-center gap-1 hover:no-underline text-tertiary text-xs"> 267 - {postView.replyCount} 268 - <CommentTiny /> 269 - </div> 270 - ) : ( 271 - <ThreadLink 272 - threadUri={postView.uri} 273 - parent={{ type: "thread", uri: threadUri }} 274 - className="flex items-center gap-1 text-tertiary text-xs hover:text-accent-contrast" 275 - > 276 - {postView.replyCount} 277 - <CommentTiny /> 278 - </ThreadLink> 279 - )} 280 - <Separator classname="h-4" /> 281 - </> 282 - )} 283 - <a className="text-tertiary" target="_blank" href={url}> 284 - <BlueskyTiny /> 285 - </a> 286 - </div> 287 - </div> 288 - </div> 167 + <BskyPostContent 168 + post={postView} 169 + parent={parent} 170 + linksEnabled={!isMainPost} 171 + showBlueskyLink={true} 172 + showEmbed={true} 173 + /> 289 174 </div> 290 175 ); 291 176 } ··· 294 179 replies: (ThreadViewPost | NotFoundPost | BlockedPost)[]; 295 180 threadUri: string; 296 181 depth: number; 182 + parentAuthorDid?: string; 297 183 }) { 298 - const { replies, threadUri, depth } = props; 184 + const { replies, threadUri, depth, parentAuthorDid } = props; 299 185 const collapsedThreads = useThreadState((s) => s.collapsedThreads); 300 186 const toggleCollapsed = useThreadState((s) => s.toggleCollapsed); 301 187 188 + // Sort replies so that replies from the parent author come first 189 + const sortedReplies = parentAuthorDid 190 + ? [...replies].sort((a, b) => { 191 + const aIsAuthor = 192 + AppBskyFeedDefs.isThreadViewPost(a) && 193 + a.post.author.did === parentAuthorDid; 194 + const bIsAuthor = 195 + AppBskyFeedDefs.isThreadViewPost(b) && 196 + b.post.author.did === parentAuthorDid; 197 + if (aIsAuthor && !bIsAuthor) return -1; 198 + if (!aIsAuthor && bIsAuthor) return 1; 199 + return 0; 200 + }) 201 + : replies; 202 + 302 203 return ( 303 204 <div className="flex flex-col gap-0"> 304 - {replies.map((reply, index) => { 205 + {sortedReplies.map((reply, index) => { 305 206 if (AppBskyFeedDefs.isNotFoundPost(reply)) { 306 207 return ( 307 208 <div ··· 371 272 replies={reply.replies as any[]} 372 273 threadUri={threadUri} 373 274 depth={depth + 1} 275 + parentAuthorDid={reply.post.author.did} 374 276 /> 375 277 </div> 376 278 )} ··· 398 300 isLast: boolean; 399 301 threadUri: string; 400 302 }) { 401 - const { post, showReplyLine, isLast, threadUri } = props; 303 + const { post, threadUri } = props; 402 304 const postView = post.post; 403 - const record = postView.record as AppBskyFeedPost.Record; 404 - 405 - const postId = postView.uri.split("/")[4]; 406 - const url = `https://bsky.app/profile/${postView.author.handle}/post/${postId}`; 407 - 408 305 const parent = { type: "thread" as const, uri: threadUri }; 409 306 410 307 return ( ··· 412 309 className="flex gap-2 relative py-2 px-2 hover:bg-bg-page rounded cursor-pointer" 413 310 onClick={() => openPage(parent, { type: "thread", uri: postView.uri })} 414 311 > 415 - <div className="flex flex-col items-center shrink-0"> 416 - {postView.author.avatar ? ( 417 - <img 418 - src={postView.author.avatar} 419 - alt={`${postView.author.displayName}'s avatar`} 420 - className="w-8 h-8 rounded-full border border-border-light" 421 - /> 422 - ) : ( 423 - <div className="w-8 h-8 rounded-full border border-border-light bg-border" /> 424 - )} 425 - </div> 426 - 427 - <div className="flex flex-col grow min-w-0"> 428 - <div className="flex items-center gap-2 leading-tight text-sm"> 429 - <div className="font-bold text-secondary"> 430 - {postView.author.displayName} 431 - </div> 432 - <a 433 - className="text-xs text-tertiary hover:underline" 434 - target="_blank" 435 - href={`https://bsky.app/profile/${postView.author.handle}`} 436 - onClick={(e) => e.stopPropagation()} 437 - > 438 - @{postView.author.handle} 439 - </a> 440 - </div> 441 - 442 - <div className="text-sm text-secondary mt-0.5"> 443 - <BlueskyRichText record={record} /> 444 - </div> 445 - 446 - <div className="flex gap-2 items-center mt-1"> 447 - <ClientDate date={record.createdAt} /> 448 - {postView.replyCount != null && postView.replyCount > 0 && ( 449 - <> 450 - <Separator classname="h-3" /> 451 - <ThreadLink 452 - threadUri={postView.uri} 453 - parent={parent} 454 - className="flex items-center gap-1 text-tertiary text-xs hover:text-accent-contrast" 455 - onClick={(e) => e.stopPropagation()} 456 - > 457 - {postView.replyCount} 458 - <CommentTiny /> 459 - </ThreadLink> 460 - </> 461 - )} 462 - </div> 463 - </div> 312 + <BskyPostContent 313 + post={postView} 314 + parent={parent} 315 + linksEnabled={true} 316 + avatarSize="sm" 317 + showEmbed={false} 318 + showBlueskyLink={false} 319 + onLinkClick={(e) => e.stopPropagation()} 320 + onEmbedClick={(e) => e.stopPropagation()} 321 + /> 464 322 </div> 465 323 ); 466 324 } 467 - 468 - const ClientDate = (props: { date?: string }) => { 469 - const pageLoaded = useHasPageLoaded(); 470 - const formattedDate = useLocalizedDate( 471 - props.date || new Date().toISOString(), 472 - { 473 - month: "short", 474 - day: "numeric", 475 - year: "numeric", 476 - hour: "numeric", 477 - minute: "numeric", 478 - hour12: true, 479 - }, 480 - ); 481 - 482 - if (!pageLoaded) return null; 483 - 484 - return <div className="text-xs text-tertiary">{formattedDate}</div>; 485 - };

+27 -11

app/lish/[did]/[publication]/[rkey]/Interactions/Quotes.tsx

··· 23 23 import useSWR, { mutate } from "swr"; 24 24 import { DotLoader } from "components/utils/DotLoader"; 25 25 import { CommentTiny } from "components/Icons/CommentTiny"; 26 - import { ThreadLink } from "../ThreadPage"; 26 + import { QuoteTiny } from "components/Icons/QuoteTiny"; 27 + import { ThreadLink, QuotesLink } from "../PostLinks"; 27 28 28 29 // Helper to get SWR key for quotes 29 30 export function getQuotesSWRKey(uris: string[]) { ··· 138 139 profile={pv.author} 139 140 handle={pv.author.handle} 140 141 replyCount={pv.replyCount} 142 + quoteCount={pv.quoteCount} 141 143 /> 142 144 </div> 143 145 ); ··· 161 163 profile={pv.author} 162 164 handle={pv.author.handle} 163 165 replyCount={pv.replyCount} 166 + quoteCount={pv.quoteCount} 164 167 /> 165 168 ); 166 169 })} ··· 252 255 handle: string; 253 256 profile: ProfileViewBasic; 254 257 replyCount?: number; 258 + quoteCount?: number; 255 259 }) => { 256 260 const handleOpenThread = () => { 257 261 openPage(undefined, { type: "thread", uri: props.uri }); ··· 282 286 </a> 283 287 </div> 284 288 <div className="text-primary">{props.content}</div> 285 - {props.replyCount != null && props.replyCount > 0 && ( 286 - <ThreadLink 287 - threadUri={props.uri} 288 - onClick={(e) => e.stopPropagation()} 289 - className="flex items-center gap-1 text-tertiary text-xs mt-1 hover:text-accent-contrast" 290 - > 291 - <CommentTiny /> 292 - {props.replyCount} {props.replyCount === 1 ? "reply" : "replies"} 293 - </ThreadLink> 294 - )} 289 + <div className="flex gap-2 items-center mt-1"> 290 + {props.replyCount != null && props.replyCount > 0 && ( 291 + <ThreadLink 292 + threadUri={props.uri} 293 + onClick={(e) => e.stopPropagation()} 294 + className="flex items-center gap-1 text-tertiary text-xs hover:text-accent-contrast" 295 + > 296 + <CommentTiny /> 297 + {props.replyCount} {props.replyCount === 1 ? "reply" : "replies"} 298 + </ThreadLink> 299 + )} 300 + {props.quoteCount != null && props.quoteCount > 0 && ( 301 + <QuotesLink 302 + postUri={props.uri} 303 + onClick={(e) => e.stopPropagation()} 304 + className="flex items-center gap-1 text-tertiary text-xs hover:text-accent-contrast" 305 + > 306 + <QuoteTiny /> 307 + {props.quoteCount} {props.quoteCount === 1 ? "quote" : "quotes"} 308 + </QuotesLink> 309 + )} 310 + </div> 295 311 </div> 296 312 </div> 297 313 );

Configure Feed

Configure Feed