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