a tool for shared writing and social publishing
make the reply line emcompass it's replies as well
+56
-74
+5
-26
app/lish/[did]/[publication]/[rkey]/BskyPostContent.tsx
+5
-26
app/lish/[did]/[publication]/[rkey]/BskyPostContent.tsx
···
52
52
const url = `https://bsky.app/profile/${post.author.handle}/post/${postId}`;
53
53
54
54
return (
55
-
<div className="bskyPost relative flex flex-col w-full">
55
+
// pointer events non so that is there is a replyLine, it can be clicked even though its underneath the postContent (buttons here have pointer-events-auto applied to make them clickable)
56
+
<div className="bskyPost relative flex flex-col w-full pointer-events-none">
56
57
<div className={`flex gap-2 text-left w-full ${props.className}`}>
57
-
<div className="flex flex-col items-start shrink-0 w-fit ">
58
-
{replyLine && (
59
-
<button
60
-
onClick={(e) => {
61
-
replyLine.onToggle(e);
62
-
}}
63
-
className="w-full h-2 shrink-0 flex place"
64
-
aria-label="Toggle replies"
65
-
>
66
-
<div className="w-0.5 h-full bg-border-light mx-auto" />
67
-
</button>
68
-
)}
58
+
<div className="flex flex-col items-start shrink-0 w-fit">
69
59
<Avatar
70
60
src={post.author.avatar}
71
61
displayName={post.author.displayName}
72
62
size={avatarSize ? avatarSize : "medium"}
73
63
/>
74
-
{replyLine && (
75
-
<button
76
-
onClick={(e) => {
77
-
replyLine.onToggle(e);
78
-
}}
79
-
className="relative w-full grow flex "
80
-
aria-label="Toggle replies"
81
-
>
82
-
<div className="w-0.5 h-full bg-border-light mx-auto" />
83
-
</button>
84
-
)}
85
64
</div>
86
65
<div
87
66
className={`flex flex-col min-w-0 w-full z-0 ${props.replyLine ? "mt-2" : ""}`}
88
67
>
89
68
<button
90
-
className={`bskyPostTextContent flex flex-col grow text-left ${props.avatarSize === "small" ? "mt-0.5" : props.avatarSize === "large" ? "mt-2" : "mt-1"}`}
69
+
className={`bskyPostTextContent flex flex-col grow text-left w-full pointer-events-auto ${props.avatarSize === "small" ? "mt-0.5" : props.avatarSize === "large" ? "mt-2" : "mt-1"}`}
91
70
onClick={() => {
92
71
openPage(parent, { type: "thread", uri: post.uri });
93
72
}}
···
118
97
(props.post.quoteCount && props.post.quoteCount > 0) ||
119
98
(props.post.replyCount && props.post.replyCount > 0) ? (
120
99
<div
121
-
className={`postCountsAndLink flex gap-2 items-center justify-between mt-2`}
100
+
className={`postCountsAndLink flex gap-2 items-center justify-between mt-2 pointer-events-auto`}
122
101
>
123
102
<PostCounts
124
103
post={post}
+51
-48
app/lish/[did]/[publication]/[rkey]/ThreadPage.tsx
+51
-48
app/lish/[did]/[publication]/[rkey]/ThreadPage.tsx
···
130
130
131
131
{/* Replies */}
132
132
{post.replies && post.replies.length > 0 && (
133
-
<div className="threadReplies flex flex-col mt-4 pt-3 border-t border-border-light w-full">
133
+
<div className="threadReplies flex flex-col mt-4 pt-1 border-t border-border-light w-full">
134
134
<Replies
135
135
replies={post.replies as any[]}
136
136
pageUri={post.post.uri}
···
155
155
156
156
if (isMainPost) {
157
157
return (
158
-
<div className="threadPost flex gap-2 relative w-full">
158
+
<div className="threadMainPost flex gap-2 relative w-full">
159
159
<BskyPostContent
160
160
post={postView}
161
161
parent={page}
···
170
170
}
171
171
172
172
return (
173
-
<div className="threadPost flex gap-2 relative w-full pl-1">
173
+
<div className="threadGrandparentPost flex gap-2 relative w-full pl-1">
174
+
<div className="absolute top-0 bottom-0 left-1 w-5 ">
175
+
<div className="bg-border-light w-[2px] h-full mx-auto" />
176
+
</div>
174
177
<CompactBskyPostContent
175
178
post={postView}
176
179
parent={page}
177
180
quoteEnabled
178
181
replyEnabled
179
-
replyLine={{
180
-
onToggle: () => {},
181
-
}}
182
182
/>
183
183
</div>
184
184
);
···
211
211
: replies;
212
212
213
213
return (
214
-
<div className="threadPageReplies flex flex-col gap-0 pt-1 pb-2">
214
+
<div className="replies flex flex-col gap-0 pt-2 pb-1 pointer-events-none">
215
215
{sortedReplies.map((reply, index) => {
216
216
if (AppBskyFeedDefs.isNotFoundPost(reply)) {
217
217
return (
···
285
285
const hasReplies = props.post.replies && props.post.replies.length > 0;
286
286
287
287
return (
288
-
<div
289
-
className={`threadReply relative flex flex-col ${props.depth === 0 && "mb-2"}`}
290
-
>
291
-
<BskyPostContent
292
-
post={postView}
293
-
parent={{ type: "thread", uri: pageUri }}
294
-
showEmbed={false}
295
-
showBlueskyLink={false}
296
-
replyLine={
297
-
props.depth > 0
298
-
? {
299
-
onToggle: () => {
300
-
props.toggleCollapsed(parentPostUri);
301
-
},
302
-
}
303
-
: undefined
304
-
}
305
-
quoteEnabled
306
-
replyEnabled
307
-
replyOnClick={(e) => {
308
-
e.preventDefault();
309
-
props.toggleCollapsed(post.post.uri);
310
-
console.log(post.post.uri);
311
-
}}
312
-
onEmbedClick={(e) => e.stopPropagation()}
313
-
className="text-sm z-10"
314
-
/>
315
-
{hasReplies && props.depth < 3 && (
316
-
<div className="ml-[28px] flex">
317
-
{!props.isCollapsed && (
318
-
<div className="grow">
319
-
<Replies
320
-
pageUri={pageUri}
321
-
parentPostUri={post.post.uri}
322
-
replies={props.post.replies as any[]}
323
-
depth={props.depth + 1}
324
-
parentAuthorDid={props.post.post.author.did}
325
-
/>
326
-
</div>
327
-
)}
328
-
</div>
288
+
<div className="flex h-fit">
289
+
{props.depth > 0 && (
290
+
<button
291
+
className="replyLine relative w-6 h-auto -mr-6 pointer-events-auto"
292
+
onClick={() => {
293
+
props.toggleCollapsed(parentPostUri);
294
+
}}
295
+
>
296
+
<div className="bg-border-light w-[2px] h-full mx-auto" />
297
+
</button>
329
298
)}
299
+
<div
300
+
className={`reply relative flex flex-col w-full ${props.depth === 0 && "mb-2"} ${props.depth > 0 && "pointer-events-none"}`}
301
+
>
302
+
<BskyPostContent
303
+
post={postView}
304
+
parent={{ type: "thread", uri: pageUri }}
305
+
showEmbed={false}
306
+
showBlueskyLink={false}
307
+
quoteEnabled
308
+
replyEnabled
309
+
replyOnClick={(e) => {
310
+
e.preventDefault();
311
+
props.toggleCollapsed(post.post.uri);
312
+
console.log(post.post.uri);
313
+
}}
314
+
onEmbedClick={(e) => e.stopPropagation()}
315
+
className="text-sm"
316
+
/>
317
+
{hasReplies && props.depth < 3 && (
318
+
<div className="ml-[28px] flex pointer-events-none">
319
+
{!props.isCollapsed && (
320
+
<div className="grow pointer-events-none">
321
+
<Replies
322
+
pageUri={pageUri}
323
+
parentPostUri={post.post.uri}
324
+
replies={props.post.replies as any[]}
325
+
depth={props.depth + 1}
326
+
parentAuthorDid={props.post.post.author.did}
327
+
/>
328
+
</div>
329
+
)}
330
+
</div>
331
+
)}
332
+
</div>
330
333
</div>
331
334
);
332
335
};