+4 -6

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

··· 41 41 pageType="doc" 42 42 fullPageScroll={false} 43 43 id={`post-page-${pageId}`} 44 44 - drawerOpen={!!drawer} 44 44 + drawerOpen={false} 45 45 pageOptions={pageOptions} 46 46 > 47 47 <div className="flex flex-col sm:px-4 px-3 sm:pt-3 pt-2 pb-1 sm:pb-4"> 48 48 - <h3 className="text-secondary font-bold flex items-center gap-2"> 49 49 - Bluesky Quotes 50 50 - </h3> 48 48 + <h4 className="text-secondary font-bold mb-2">Bluesky Quotes</h4> 51 49 {isLoading ? ( 52 50 <div className="flex items-center justify-center gap-1 text-tertiary italic text-sm py-8"> 53 51 <span>loading quotes</span> ··· 78 76 <> 79 77 <QuotePost key={post.uri} post={post} quotesUri={postUri} /> 80 78 {posts.length !== index + 1 && ( 81 81 - <hr className="border-border-light my-2" /> 79 79 + <hr className="border-border-light my-4" /> 82 80 )} 83 81 </> 84 82 ))} ··· 100 98 quoteEnabled 101 99 replyEnabled 102 100 onEmbedClick={(e) => e.stopPropagation()} 103 103 - className="relative py-2 px-2 hover:bg-bg-page rounded cursor-pointer text-sm" 101 101 + className="relative rounded cursor-pointer text-sm" 104 102 /> 105 103 ); 106 104 }

+3 -2

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

··· 237 237 const { displayName, handle, createdAt, compact = false } = props; 238 238 239 239 return ( 240 240 - <div className="postInfo flex justify-between items-center gap-4 leading-tight w-full"> 241 241 - <div className="flex gap-2 items-center grow min-w-0"> 240 240 + <div className="postInfo flex items-center gap-2 leading-tight w-full"> 241 241 + <div className="flex gap-2 items-center min-w-0"> 242 242 <div className={`font-bold text-secondary truncate`}> 243 243 {displayName} 244 244 </div> ··· 255 255 /> 256 256 </div> 257 257 </div> 258 258 + <div className="w-1 h-1 rounded-full bg-border shrink-0" /> 258 259 <div 259 260 className={`${compact ? "text-xs" : "text-sm"} text-tertiary shrink-0`} 260 261 >

+10 -12

app/lish/[did]/[publication]/[rkey]/Interactions/Comments/index.tsx

··· 55 55 id={"commentsDrawer"} 56 56 className="flex flex-col gap-2 relative text-sm text-secondary" 57 57 > 58 58 - <div className="w-full flex justify-between text-secondary font-bold"> 59 59 - Comments 58 58 + <div className="w-full flex justify-between"> 59 59 + <h4> Comments</h4> 60 60 <button 61 61 className="text-tertiary" 62 62 onClick={() => ··· 75 75 </div> 76 76 )} 77 77 <hr className="border-border-light" /> 78 78 - <div className="flex flex-col gap-6 py-2"> 78 78 + <div className="flex flex-col gap-4 py-2"> 79 79 {comments 80 80 .sort((a, b) => { 81 81 let aRecord = a.record as PubLeafletComment.Record; ··· 119 119 }) => { 120 120 const did = props.comment.bsky_profiles?.did; 121 121 122 122 - let timeAgoDate = timeAgo(props.record.createdAt); 123 123 - const formattedDate = useLocalizedDate(props.record.createdAt, { 124 124 - year: "numeric", 125 125 - month: "long", 126 126 - day: "2-digit", 127 127 - }); 122 122 + let timeAgoDate = timeAgo(props.record.createdAt, { compact: true }); 128 123 129 124 return ( 130 125 <div id={props.comment.uri} className="comment"> 131 131 - <div className="flex gap-2"> 126 126 + <div className="flex gap-2 items-center"> 132 127 {did ? ( 133 128 <ProfilePopover 134 129 didOrHandle={did} 135 130 trigger={ 136 136 - <div className="text-sm text-tertiary font-bold hover:underline"> 131 131 + <div className="text-sm text-secondary font-bold hover:underline"> 137 132 {props.profile.displayName} 138 133 </div> 139 134 } 140 135 /> 141 136 ) : null} 137 137 + 138 138 + <div className="w-1 h-1 rounded-full bg-border shrink-0" /> 142 139 <div className="text-sm text-tertiary">{timeAgoDate}</div> 143 140 </div> 144 141 {props.record.attachment && ··· 210 207 setReplyBoxOpen(false); 211 208 }} 212 209 > 213 213 - <CommentTiny className="text-border" /> {replies.length} 210 210 + <CommentTiny className="text-border" />{" "} 211 211 + {replies.length !== 0 && replies.length} 214 212 </button> 215 213 {identity?.atp_did && ( 216 214 <>

+33 -24

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

··· 104 104 <DotLoader /> 105 105 </div> 106 106 ) : ( 107 107 - <div className="flex flex-col gap-8"> 107 107 + <div className="flex flex-col gap-8 w-full"> 108 108 {quotesWithLinks.length > 0 && ( 109 109 - <div className="flex flex-col gap-4"> 110 110 - Quotes 109 109 + <div className="flex flex-col w-full"> 110 110 + <h4 className="mb-2">Quotes on Bluesky</h4> 111 111 {/* Quotes with links (quoted content) */} 112 112 {quotesWithLinks.map((q, index) => { 113 113 return ( 114 114 - <div className="flex gap-2"> 114 114 + <> 115 115 <Quote 116 116 q={q} 117 117 index={index} 118 118 did={props.did} 119 119 postViewMap={postViewMap} 120 120 /> 121 121 - </div> 121 121 + {quotesWithLinks.length !== index + 1 && ( 122 122 + <hr className="border-border-light my-4" /> 123 123 + )} 124 124 + </> 122 125 ); 123 126 })} 124 127 </div> 125 128 )} 126 129 {/* Direct post mentions (without quoted content) */} 127 130 {directMentions.length > 0 && ( 128 128 - <div className="flex flex-col gap-4"> 129 129 - <div className="text-secondary font-bold"> 130 130 - Mentions on Bluesky 131 131 - </div> 132 132 - <div className="flex flex-col gap-8"> 133 133 - {directMentions.map((q, index) => { 134 134 - const post = postViewMap.get(q.uri); 135 135 - if (!post) return null; 131 131 + <div className="flex flex-col"> 132 132 + <h4 className="mb-2">Mentions on Bluesky</h4> 133 133 + {directMentions.map((q, index) => { 134 134 + const post = postViewMap.get(q.uri); 135 135 + if (!post) return null; 136 136 137 137 - const parent = { type: "thread" as const, uri: q.uri }; 138 138 - return ( 137 137 + const parent = { type: "thread" as const, uri: q.uri }; 138 138 + return ( 139 139 + <> 139 140 <BskyPostContent 140 141 key={`mention-${index}`} 141 142 post={post} 142 143 parent={parent} 143 144 showBlueskyLink={true} 144 145 showEmbed={true} 145 145 - avatarSize="large" 146 146 + avatarSize="medium" 146 147 quoteEnabled 147 148 replyEnabled 149 149 + className="text-sm" 150 150 + compactEmbed 148 151 /> 149 149 - ); 150 150 - })} 151 151 - </div> 152 152 + {directMentions.length !== index + 1 && ( 153 153 + <hr className="border-border-light my-4" /> 154 154 + )} 155 155 + </> 156 156 + ); 157 157 + })} 152 158 </div> 153 159 )} 154 160 </div> ··· 176 182 if (!quotePosition) return null; 177 183 178 184 return ( 179 179 - <div key={`quote-${props.index}`} className="flex flex-col "> 185 185 + <div key={`quote-${props.index}`} className="flex flex-col w-full"> 180 186 <QuoteContent 181 187 index={props.index} 182 188 did={props.did} 183 189 position={quotePosition} 184 190 /> 185 191 186 186 - <div className="h-5 w-1 ml-5 border-l border-border-light" /> 192 192 + <div className="h-3 w-1 ml-[11px] border-l border-border-light" /> 187 193 <BskyPostContent 188 194 post={post} 189 195 parent={parent} 190 196 showBlueskyLink={true} 191 191 - showEmbed={true} 192 192 - avatarSize="large" 197 197 + showEmbed={false} 198 198 + avatarSize="medium" 199 199 + quoteEnabled 200 200 + replyEnabled 201 201 + className="text-sm" 193 202 /> 194 203 </div> 195 204 ); ··· 262 271 blocks={content} 263 272 did={props.did} 264 273 preview 265 265 - className="py-0!" 274 274 + className="py-0! px-0! text-tertiary" 266 275 /> 267 276 </div> 268 277 </div>