leaflet.pub
a tool for shared writing and social publishing
added some spacing for replies
cozylittle.house
+66
-44
+2
-1
app/lish/[did]/[publication]/[rkey]/Interactions/Comments/CommentBox.tsx
+2
-1
app/lish/[did]/[publication]/[rkey]/Interactions/Comments/CommentBox.tsx
···
43
43
replyTo?: string;
44
44
onSubmit?: () => void;
45
45
autoFocus?: boolean;
46
+
className?: string;
46
47
}) {
47
48
let mountRef = useRef<HTMLPreElement | null>(null);
48
49
let {
···
216
217
}, []);
217
218
218
219
return (
219
-
<div className=" flex flex-col">
220
+
<div className={`flex flex-col grow ${props.className}`}>
220
221
{quote && (
221
222
<div className="relative mt-2 mb-2">
222
223
<QuoteContent position={quote} did="" index={-1} />
+64
-43
app/lish/[did]/[publication]/[rkey]/Interactions/Comments/index.tsx
+64
-43
app/lish/[did]/[publication]/[rkey]/Interactions/Comments/index.tsx
···
162
162
163
163
let [replyBoxOpen, setReplyBoxOpen] = useState(false);
164
164
let [repliesOpen, setRepliesOpen] = useState(true);
165
+
165
166
let replies = props.comments
166
167
.filter(
167
168
(comment) =>
···
176
177
new Date(aRecord.createdAt).getTime()
177
178
);
178
179
});
180
+
181
+
let repliesOrReplyBoxOpen =
182
+
replyBoxOpen || (repliesOpen && replies.length > 0);
179
183
return (
180
184
<>
181
185
<div className="flex gap-2 items-center">
···
203
207
</>
204
208
)}
205
209
</div>
206
-
<div className="flex flex-col gap-2">
207
-
{replyBoxOpen && (
208
-
<CommentBox
209
-
pageId={props.pageId}
210
-
doc_uri={props.document}
211
-
replyTo={props.comment_uri}
212
-
autoFocus={true}
213
-
onSubmit={() => {
214
-
setReplyBoxOpen(false);
215
-
}}
216
-
/>
217
-
)}
218
-
{repliesOpen && replies.length > 0 && (
219
-
<div className="repliesWrapper flex">
220
-
<button
221
-
className="repliesCollapse pr-[14px] ml-[7px] pt-0.5"
222
-
onClick={() => {
223
-
setReplyBoxOpen(false);
224
-
setRepliesOpen(false);
225
-
}}
226
-
>
227
-
<div className="bg-border-light w-[2px] h-full" />
228
-
</button>
229
-
<div className="repliesContent flex flex-col gap-3 pt-2 w-full">
230
-
{replies.map((reply) => {
231
-
return (
232
-
<Comment
233
-
pageId={props.pageId}
234
-
document={props.document}
235
-
key={reply.uri}
236
-
comment={reply}
237
-
profile={
238
-
reply.bsky_profiles?.record as AppBskyActorProfile.Record
239
-
}
240
-
record={reply.record as PubLeafletComment.Record}
241
-
comments={props.comments}
242
-
/>
243
-
);
244
-
})}
210
+
{repliesOrReplyBoxOpen && (
211
+
<div className="flex flex-col pt-1">
212
+
{replyBoxOpen && (
213
+
<div className="repliesWrapper flex w-full">
214
+
<button
215
+
className="repliesCollapse pr-[14px] ml-[7px]"
216
+
onClick={() => {
217
+
setReplyBoxOpen(false);
218
+
setRepliesOpen(false);
219
+
}}
220
+
>
221
+
<div className="bg-border-light w-[2px] h-full" />
222
+
</button>
223
+
<CommentBox
224
+
className="pt-3"
225
+
pageId={props.pageId}
226
+
doc_uri={props.document}
227
+
replyTo={props.comment_uri}
228
+
autoFocus={true}
229
+
onSubmit={() => {
230
+
setReplyBoxOpen(false);
231
+
}}
232
+
/>
233
+
</div>
234
+
)}
235
+
{repliesOpen && replies.length > 0 && (
236
+
<div className="repliesWrapper flex">
237
+
<button
238
+
className="repliesCollapse pr-[14px] ml-[7px]"
239
+
onClick={() => {
240
+
setReplyBoxOpen(false);
241
+
setRepliesOpen(false);
242
+
}}
243
+
>
244
+
<div className="bg-border-light w-[2px] h-full" />
245
+
</button>
246
+
<div className="repliesContent flex flex-col gap-3 pt-2 w-full">
247
+
{replies.map((reply) => {
248
+
return (
249
+
<Comment
250
+
pageId={props.pageId}
251
+
document={props.document}
252
+
key={reply.uri}
253
+
comment={reply}
254
+
profile={
255
+
reply.bsky_profiles
256
+
?.record as AppBskyActorProfile.Record
257
+
}
258
+
record={reply.record as PubLeafletComment.Record}
259
+
comments={props.comments}
260
+
/>
261
+
);
262
+
})}
263
+
</div>
245
264
</div>
246
-
</div>
247
-
)}
248
-
</div>
265
+
)}
266
+
</div>
267
+
)}
249
268
</>
250
269
);
251
270
};
···
263
282
return (
264
283
<Popover
265
284
trigger={
266
-
<div className="italic text-sm text-tertiary hover:underline">{timeAgoText}</div>
285
+
<div className="italic text-sm text-tertiary hover:underline">
286
+
{timeAgoText}
287
+
</div>
267
288
}
268
289
>
269
290
<div className="text-sm text-secondary">{fullDate}</div>