a tool for shared writing and social publishing
adjustments to make everything more consistent
+50
-44
+4
-6
app/lish/[did]/[publication]/[rkey]/BlueskyQuotesPage.tsx
+4
-6
app/lish/[did]/[publication]/[rkey]/BlueskyQuotesPage.tsx
···
41
41
pageType="doc"
42
42
fullPageScroll={false}
43
43
id={`post-page-${pageId}`}
44
-
drawerOpen={!!drawer}
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
-
<h3 className="text-secondary font-bold flex items-center gap-2">
49
-
Bluesky Quotes
50
-
</h3>
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
-
<hr className="border-border-light my-2" />
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
-
className="relative py-2 px-2 hover:bg-bg-page rounded cursor-pointer text-sm"
101
+
className="relative rounded cursor-pointer text-sm"
104
102
/>
105
103
);
106
104
}
+3
-2
app/lish/[did]/[publication]/[rkey]/BskyPostContent.tsx
+3
-2
app/lish/[did]/[publication]/[rkey]/BskyPostContent.tsx
···
237
237
const { displayName, handle, createdAt, compact = false } = props;
238
238
239
239
return (
240
-
<div className="postInfo flex justify-between items-center gap-4 leading-tight w-full">
241
-
<div className="flex gap-2 items-center grow min-w-0">
240
+
<div className="postInfo flex items-center gap-2 leading-tight w-full">
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
+
<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
+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
-
<div className="w-full flex justify-between text-secondary font-bold">
59
-
Comments
58
+
<div className="w-full flex justify-between">
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
-
<div className="flex flex-col gap-6 py-2">
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
-
let timeAgoDate = timeAgo(props.record.createdAt);
123
-
const formattedDate = useLocalizedDate(props.record.createdAt, {
124
-
year: "numeric",
125
-
month: "long",
126
-
day: "2-digit",
127
-
});
122
+
let timeAgoDate = timeAgo(props.record.createdAt, { compact: true });
128
123
129
124
return (
130
125
<div id={props.comment.uri} className="comment">
131
-
<div className="flex gap-2">
126
+
<div className="flex gap-2 items-center">
132
127
{did ? (
133
128
<ProfilePopover
134
129
didOrHandle={did}
135
130
trigger={
136
-
<div className="text-sm text-tertiary font-bold hover:underline">
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
+
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
-
<CommentTiny className="text-border" /> {replies.length}
210
+
<CommentTiny className="text-border" />{" "}
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
+33
-24
app/lish/[did]/[publication]/[rkey]/Interactions/Quotes.tsx
···
104
104
<DotLoader />
105
105
</div>
106
106
) : (
107
-
<div className="flex flex-col gap-8">
107
+
<div className="flex flex-col gap-8 w-full">
108
108
{quotesWithLinks.length > 0 && (
109
-
<div className="flex flex-col gap-4">
110
-
Quotes
109
+
<div className="flex flex-col w-full">
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
-
<div className="flex gap-2">
114
+
<>
115
115
<Quote
116
116
q={q}
117
117
index={index}
118
118
did={props.did}
119
119
postViewMap={postViewMap}
120
120
/>
121
-
</div>
121
+
{quotesWithLinks.length !== index + 1 && (
122
+
<hr className="border-border-light my-4" />
123
+
)}
124
+
</>
122
125
);
123
126
})}
124
127
</div>
125
128
)}
126
129
{/* Direct post mentions (without quoted content) */}
127
130
{directMentions.length > 0 && (
128
-
<div className="flex flex-col gap-4">
129
-
<div className="text-secondary font-bold">
130
-
Mentions on Bluesky
131
-
</div>
132
-
<div className="flex flex-col gap-8">
133
-
{directMentions.map((q, index) => {
134
-
const post = postViewMap.get(q.uri);
135
-
if (!post) return null;
131
+
<div className="flex flex-col">
132
+
<h4 className="mb-2">Mentions on Bluesky</h4>
133
+
{directMentions.map((q, index) => {
134
+
const post = postViewMap.get(q.uri);
135
+
if (!post) return null;
136
136
137
-
const parent = { type: "thread" as const, uri: q.uri };
138
-
return (
137
+
const parent = { type: "thread" as const, uri: q.uri };
138
+
return (
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
-
avatarSize="large"
146
+
avatarSize="medium"
146
147
quoteEnabled
147
148
replyEnabled
149
+
className="text-sm"
150
+
compactEmbed
148
151
/>
149
-
);
150
-
})}
151
-
</div>
152
+
{directMentions.length !== index + 1 && (
153
+
<hr className="border-border-light my-4" />
154
+
)}
155
+
</>
156
+
);
157
+
})}
152
158
</div>
153
159
)}
154
160
</div>
···
176
182
if (!quotePosition) return null;
177
183
178
184
return (
179
-
<div key={`quote-${props.index}`} className="flex flex-col ">
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
-
<div className="h-5 w-1 ml-5 border-l border-border-light" />
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
-
showEmbed={true}
192
-
avatarSize="large"
197
+
showEmbed={false}
198
+
avatarSize="medium"
199
+
quoteEnabled
200
+
replyEnabled
201
+
className="text-sm"
193
202
/>
194
203
</div>
195
204
);
···
262
271
blocks={content}
263
272
did={props.did}
264
273
preview
265
-
className="py-0!"
274
+
className="py-0! px-0! text-tertiary"
266
275
/>
267
276
</div>
268
277
</div>