Something went wrong. Try again.
A lexicon-driven AppView for ATProto.
Something went wrong. Try again.
18 kB · 567 lines
TSX
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568'use client';
import { useEffect, useRef, useState } from 'react';import Image from 'next/image';
interface Reply { uri: string; author: { did: string; handle: string; displayName?: string; avatar?: string; }; record: { text: string; createdAt: string; facets?: Facet[]; }; likeCount?: number;}
interface ParentPost { uri: string; author: Reply['author']; record: Reply['record']; likeCount: number; repostCount: number; replyCount: number;}
interface Facet { index: { byteStart: number; byteEnd: number }; features: FacetFeature[];}
type FacetFeature = | { $type: 'app.bsky.richtext.facet#link'; uri: string } | { $type: 'app.bsky.richtext.facet#mention'; did: string } | { $type: string };
type LoadState = 'loading' | 'loaded' | 'error' | 'no-ref';
const PLATFORMS = [ { key: 'bluesky', name: 'Bluesky', domain: 'bsky.app' }, { key: 'blacksky', name: 'Blacksky', domain: 'blacksky.app' }, { key: 'witchsky', name: 'Witchsky', domain: 'witchsky.app' }, { key: 'mu', name: 'mu.social', domain: 'mu.social' },] as const;
type PlatformKey = (typeof PLATFORMS)[number]['key'];
interface PostCommentsProps { atUri?: string;}
export function PostComments({ atUri }: PostCommentsProps) { const [replies, setReplies] = useState<Reply[]>([]); const [parentPost, setParentPost] = useState<ParentPost | null>(null); const [postUri, setPostUri] = useState<string | null>(null); const [state, setState] = useState<LoadState>('loading');
useEffect(() => { if (!atUri) { setState('no-ref'); return; }
setState('loading'); resolveComments(atUri) .then((data) => { if (!data.bskyPostRef) { setState('no-ref'); return; } setPostUri(data.bskyPostRef); setParentPost(data.parentPost); setReplies(data.replies); setState('loaded'); }) .catch(() => setState('error')); }, [atUri]);
const retry = () => { setState('loading'); if (!atUri) return; resolveComments(atUri) .then((data) => { if (!data.bskyPostRef) { setState('no-ref'); return; } setPostUri(data.bskyPostRef); setParentPost(data.parentPost); setReplies(data.replies); setState('loaded'); }) .catch(() => setState('error')); };
if (state === 'no-ref') return null;
if (state === 'loading') { return ( <section> <div className="rounded-lg animate-pulse mb-4" style={{ width: '140px', height: '28px', backgroundColor: 'rgb(var(--color-surface))' }} /> <div className="rounded-xl animate-pulse mb-6" style={{ height: '120px', backgroundColor: 'rgb(var(--color-surface))' }} /> <div className="flex flex-col gap-4"> {[1, 2].map((i) => ( <div key={i} className="rounded-xl animate-pulse" style={{ height: '80px', backgroundColor: 'rgb(var(--color-surface))' }} /> ))} </div> </section> ); }
if (state === 'error') { return ( <section> <h2 className="text-2xl font-bold mb-4" style={{ color: 'rgb(var(--color-magenta))' }}> Comments </h2> <p className="text-sm" style={{ color: 'rgb(var(--color-fg-muted))' }}> Comments couldn't be loaded.{' '} <button type="button" onClick={retry} className="hover:underline" style={{ color: 'rgb(var(--color-aqua))' }} > Try again </button> </p> </section> ); }
return ( <section> <div className="flex items-center justify-between mb-6"> <h2 className="text-2xl font-bold" style={{ color: 'rgb(var(--color-magenta))' }}> Comments </h2> <PlatformButtonGroup postUri={postUri!} /> </div>
{parentPost && <ParentPostCard post={parentPost} />}
{replies.length === 0 && ( <p className="text-center py-8" style={{ color: 'rgb(var(--color-fg-muted))' }}> No comments yet. </p> )} {replies.length > 0 && ( <div className="flex flex-col gap-4"> {replies.map((reply) => ( <Comment key={reply.uri} reply={reply} /> ))} </div> )} </section> );}
function PlatformButtonGroup({ postUri }: { postUri: string }) { const [platform, setPlatform] = useState<PlatformKey>('bluesky'); const [open, setOpen] = useState(false); const groupRef = useRef<HTMLDivElement>(null);
useEffect(() => { try { const saved = localStorage.getItem('preferred-comment-platform'); if (saved && PLATFORMS.some((p) => p.key === saved)) { setPlatform(saved as PlatformKey); } } catch { // localStorage unavailable } }, []);
useEffect(() => { if (!open) return; const handleClick = (e: MouseEvent) => { if (!groupRef.current?.contains(e.target as Node)) setOpen(false); }; const handleKey = (e: KeyboardEvent) => { if (e.key === 'Escape') setOpen(false); }; window.addEventListener('click', handleClick, true); window.addEventListener('keydown', handleKey); return () => { window.removeEventListener('click', handleClick, true); window.removeEventListener('keydown', handleKey); }; }, [open]);
const current = PLATFORMS.find((p) => p.key === platform)!; const url = platformPostUrl(postUri, current.domain);
return ( <div ref={groupRef} className="relative"> <div className="inline-flex rounded-full overflow-hidden" style={{ borderWidth: '1px', borderColor: 'rgb(var(--color-border))', backgroundColor: 'rgb(var(--color-surface))', }} > <a href={url} target="_blank" rel="noopener noreferrer" className="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium transition-colors duration-200 hover:opacity-80" style={{ color: 'rgb(var(--color-fg-muted))' }} > <PlatformIcon platform={platform} /> Join the conversation </a> <button type="button" onClick={() => setOpen(!open)} aria-expanded={open} aria-haspopup="true" aria-label="Select platform" className="flex items-center px-2.5 py-2 transition-colors duration-200 hover:opacity-80" style={{ color: 'rgb(var(--color-fg-muted))', borderLeftWidth: '1px', borderColor: 'rgb(var(--color-border))', }} > <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"> <polyline points="6 9 12 15 18 9" /> </svg> </button> </div>
{open && ( <div className="absolute right-0 top-full mt-2 rounded-xl py-1 min-w-[160px]" style={{ backgroundColor: 'rgb(var(--color-surface))', borderWidth: '1px', borderColor: 'rgb(var(--color-border))', boxShadow: '0 4px 16px rgb(0 0 0 / 0.25)', zIndex: 30, }} > {PLATFORMS.map((p) => ( <button key={p.key} type="button" onClick={() => { setPlatform(p.key); try { localStorage.setItem('preferred-comment-platform', p.key); } catch {} setOpen(false); }} className="flex w-full items-center gap-2.5 px-3.5 py-2 text-sm transition-colors duration-150" style={{ color: p.key === platform ? 'rgb(var(--color-aqua))' : 'rgb(var(--color-fg-muted))', backgroundColor: p.key === platform ? 'rgb(var(--color-aqua) / 0.08)' : 'transparent', }} > <PlatformIcon platform={p.key} /> <span className="flex-1 text-left">{p.name}</span> {p.key === platform && ( <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"> <polyline points="20 6 9 17 4 12" /> </svg> )} </button> ))} </div> )} </div> );}
const PLATFORM_FAVICONS: Record<PlatformKey, string> = { bluesky: 'https://bsky.app/static/favicon-32x32.png', blacksky: 'https://blacksky.app/favicon.ico', witchsky: 'https://witchsky.app/favicon.ico', mu: 'https://mu.social/favicon.ico',};
function PlatformIcon({ platform }: { platform: PlatformKey }) { return ( // eslint-disable-next-line @next/next/no-img-element <img src={PLATFORM_FAVICONS[platform]} alt="" width={14} height={14} className="rounded-sm" style={{ filter: 'brightness(0) invert(1)' }} /> );}
function ParentPostCard({ post }: { post: ParentPost }) { const displayName = post.author.displayName || post.author.handle; const date = new Date(post.record.createdAt);
return ( <div className="rounded-xl p-5 mb-6" style={{ backgroundColor: 'rgb(var(--color-surface))', borderWidth: '1px', borderColor: 'rgb(var(--color-aqua) / 0.2)', }} > <div className="flex items-center gap-2 mb-3"> {post.author.avatar && ( <Image src={post.author.avatar} alt={displayName} width={28} height={28} className="rounded-full" /> )} <div className="flex items-center gap-1.5 min-w-0"> <a href={`https://bsky.app/profile/${post.author.handle}`} target="_blank" rel="noopener noreferrer" className="text-sm font-medium hover:underline truncate" style={{ color: 'rgb(var(--color-fg))' }} > {displayName} </a> <span className="text-xs shrink-0" style={{ color: 'rgb(var(--color-fg-muted))' }}> @{post.author.handle} </span> </div> <time dateTime={date.toISOString()} className="ml-auto text-xs shrink-0" style={{ color: 'rgb(var(--color-fg-muted))' }} > {date.toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' })} </time> </div> <div className="text-sm mb-3" style={{ color: 'rgb(var(--color-fg))' }}> <RichText text={post.record.text} facets={post.record.facets} /> </div> <div className="flex items-center gap-5 text-xs" style={{ color: 'rgb(var(--color-fg-muted))' }}> <span className="inline-flex items-center gap-1"> <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"> <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" /> </svg> {post.replyCount} </span> <span className="inline-flex items-center gap-1"> <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"> <polyline points="17 1 21 5 17 9" /> <path d="M3 11V9a4 4 0 0 1 4-4h14" /> <polyline points="7 23 3 19 7 15" /> <path d="M21 13v2a4 4 0 0 1-4 4H3" /> </svg> {post.repostCount} </span> <span className="inline-flex items-center gap-1"> <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"> <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" /> </svg> {post.likeCount} </span> </div> </div> );}
function Comment({ reply }: { reply: Reply }) { const displayName = reply.author.displayName || reply.author.handle; const date = new Date(reply.record.createdAt);
return ( <div className="rounded-xl p-4" style={{ backgroundColor: 'rgb(var(--color-surface))', borderWidth: '1px', borderColor: 'rgb(var(--color-border))', }} > <div className="flex items-center gap-2 mb-2"> {reply.author.avatar && ( <Image src={reply.author.avatar} alt={displayName} width={24} height={24} className="rounded-full" /> )} <a href={`https://bsky.app/profile/${reply.author.handle}`} target="_blank" rel="noopener noreferrer" className="text-sm font-medium hover:underline" style={{ color: 'rgb(var(--color-fg))' }} > {displayName} </a> <span className="text-xs" style={{ color: 'rgb(var(--color-fg-muted))' }}> @{reply.author.handle} </span> <time dateTime={date.toISOString()} className="ml-auto text-xs" style={{ color: 'rgb(var(--color-fg-muted))' }} > {date.toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' })} </time> </div> <div className="text-sm" style={{ color: 'rgb(var(--color-fg))' }}> <RichText text={reply.record.text} facets={reply.record.facets} /> </div> </div> );}
function RichText({ text, facets }: { text: string; facets?: Facet[] }) { if (!facets || facets.length === 0) return <>{text}</>;
const encoder = new TextEncoder(); const decoder = new TextDecoder(); const bytes = encoder.encode(text);
const sorted = [...facets].sort((a, b) => a.index.byteStart - b.index.byteStart); const parts: React.ReactNode[] = []; let lastByte = 0;
for (const facet of sorted) { if (facet.index.byteStart > lastByte) { parts.push(decoder.decode(bytes.slice(lastByte, facet.index.byteStart))); }
const segment = decoder.decode(bytes.slice(facet.index.byteStart, facet.index.byteEnd)); const link = facet.features.find((f) => f.$type === 'app.bsky.richtext.facet#link') as | Extract<FacetFeature, { $type: 'app.bsky.richtext.facet#link' }> | undefined; const mention = facet.features.find((f) => f.$type === 'app.bsky.richtext.facet#mention') as | Extract<FacetFeature, { $type: 'app.bsky.richtext.facet#mention' }> | undefined;
if (link) { parts.push( <a key={facet.index.byteStart} href={link.uri} target="_blank" rel="noopener noreferrer" className="hover:underline" style={{ color: 'rgb(var(--color-aqua))' }} > {segment} </a>, ); } else if (mention) { parts.push( <a key={facet.index.byteStart} href={`https://bsky.app/profile/${mention.did}`} target="_blank" rel="noopener noreferrer" className="hover:underline" style={{ color: 'rgb(var(--color-aqua))' }} > {segment} </a>, ); } else { parts.push(segment); }
lastByte = facet.index.byteEnd; }
if (lastByte < bytes.length) { parts.push(decoder.decode(bytes.slice(lastByte))); }
return <>{parts}</>;}
async function resolveComments(atUri: string): Promise<{ bskyPostRef: string | null; parentPost: ParentPost | null; replies: Reply[];}> { const match = atUri.match(/^at:\/\/(did:[^/]+)\/([^/]+)\/(.+)$/); if (!match) throw new Error('Invalid AT URI');
const [, did, collection, rkey] = match;
const plcRes = await fetch(`https://plc.directory/${did}`); if (!plcRes.ok) throw new Error('DID resolution failed'); const plcDoc = await plcRes.json();
const pdsEndpoint = plcDoc.service?.find( (s: { id: string; type: string; serviceEndpoint: string }) => s.id === '#atproto_pds', )?.serviceEndpoint; if (!pdsEndpoint) throw new Error('No PDS endpoint');
const recordRes = await fetch( `${pdsEndpoint}/xrpc/com.atproto.repo.getRecord?repo=${did}&collection=${collection}&rkey=${rkey}`, ); if (!recordRes.ok) throw new Error('Record fetch failed'); const recordData = await recordRes.json();
const rawRef = recordData.value?.bskyPostRef; const bskyPostRef = typeof rawRef === 'string' ? rawRef : rawRef?.uri; if (typeof bskyPostRef !== 'string') return { bskyPostRef: null, parentPost: null, replies: [] };
const threadRes = await fetch( `https://public.api.bsky.app/xrpc/app.bsky.feed.getPostThread?uri=${encodeURIComponent(bskyPostRef)}&depth=1`, ); if (!threadRes.ok) return { bskyPostRef, parentPost: null, replies: [] }; const threadData = await threadRes.json();
const threadPost = threadData.thread?.post; const parentPost: ParentPost | null = threadPost ? { uri: threadPost.uri, author: threadPost.author, record: threadPost.record, likeCount: threadPost.likeCount ?? 0, repostCount: threadPost.repostCount ?? 0, replyCount: threadPost.replyCount ?? 0, } : null;
const replies: Reply[] = (threadData.thread?.replies ?? []) .filter((r: { $type: string }) => r.$type === 'app.bsky.feed.defs#threadViewPost') .map((r: { post: { uri: string; author: Reply['author']; record: Reply['record']; likeCount?: number } }) => ({ uri: r.post.uri, author: r.post.author, record: r.post.record, likeCount: r.post.likeCount, })) .sort( (a: Reply, b: Reply) => new Date(a.record.createdAt).getTime() - new Date(b.record.createdAt).getTime(), );
return { bskyPostRef, parentPost, replies };}
function platformPostUrl(atUri: string, domain: string): string { const match = atUri.match(/^at:\/\/(did:[^/]+)\/[^/]+\/(.+)$/); if (!match) return `https://${domain}`; return `https://${domain}/profile/${match[1]}/post/${match[2]}`;}