grain.social
grain.social is a photo sharing platform built on atproto.
fix: update notification logic to render comments with mentions properly
chadtmiller.com
+19
-5
src/components/NotificationsPage.tsx
+19
-5
src/components/NotificationsPage.tsx
···
42
42
key={notification.uri}
43
43
class="flex flex-col gap-4 pb-4"
44
44
>
45
-
<div class="flex flex-wrap items-center gap-2">
45
+
<div class="flex flex-wrap items-center gap-1">
46
46
<a
47
47
href={profileLink(notification.author.handle)}
48
48
class="flex items-center gap-2 hover:underline"
···
71
71
)}
72
72
</>
73
73
)}
74
-
{notification.reason === "gallery-mention" && (
74
+
{(notification.reason === "gallery-mention" ||
75
+
notification.reason === "gallery-comment-mention") && (
75
76
<>
76
77
mentioned you in a gallery · {formatRelativeTime(
77
-
new Date((notification.record as Comment).createdAt),
78
+
new Date(
79
+
(notification.record as Comment).createdAt,
80
+
),
78
81
)}
79
82
</>
80
83
)}
···
109
112
photosMap={photosMap}
110
113
/>
111
114
)}
115
+
{notification.reason === "gallery-comment-mention" &&
116
+
(
117
+
<GalleryCommentNotification
118
+
notification={notification}
119
+
galleriesMap={galleriesMap}
120
+
photosMap={photosMap}
121
+
/>
122
+
)}
112
123
{notification.reason === "reply" &&
113
124
(
114
125
<ReplyNotification
···
146
157
if (!gallery) return null;
147
158
return (
148
159
<>
149
-
{comment.text}
160
+
{<RenderFacetedText text={comment.text} facets={comment.facets} />}
150
161
{comment.focus
151
162
? (
152
163
<a
···
288
299
if (!gallery) return null;
289
300
return (
290
301
<div class="text-sm border-l-2 border-zinc-200 dark:border-zinc-800 text-zinc-600 dark:text-zinc-500 pl-2">
291
-
{(gallery.record as Gallery).description}
302
+
<RenderFacetedText
303
+
text={(gallery.record as Gallery).description ?? ""}
304
+
facets={galleryRecord.facets}
305
+
/>
292
306
<div class="mt-2 max-w-[200px]">
293
307
<GalleryPreviewLink
294
308
gallery={gallery}
+21
-6
src/lib/notifications.ts
+21
-6
src/lib/notifications.ts
···
67
67
isComment(record) &&
68
68
record.replyTo
69
69
) {
70
-
reason = "reply";
70
+
if (
71
+
recordHasMentionFacet(
72
+
record,
73
+
currentUser?.did,
74
+
)
75
+
) {
76
+
reason = "gallery-comment-mention";
77
+
} else {
78
+
reason = "reply";
79
+
}
71
80
// @TODO: check the nsid here if support other types of comments
72
81
} else if (isComment(record)) {
73
-
reason = "gallery-comment";
82
+
if (
83
+
recordHasMentionFacet(
84
+
record,
85
+
currentUser?.did,
86
+
)
87
+
) {
88
+
reason = "gallery-comment-mention";
89
+
} else {
90
+
reason = "gallery-comment";
91
+
}
74
92
} else if (
75
93
isGallery(record) && recordHasMentionFacet(
76
94
record,
···
103
121
record: NotificationRecords,
104
122
currentUserDid?: string,
105
123
): boolean {
106
-
if (
107
-
record.$type === "social.grain.gallery" &&
108
-
Array.isArray(record.facets)
109
-
) {
124
+
if (Array.isArray(record.facets)) {
110
125
return record.facets.some((facet) => {
111
126
if (!currentUserDid) return true;
112
127
const features = (facet as Facet).features;