leaflet.pub
a tool for shared writing and social publishing
added a little styling to the mention notifications
cozylittle.house
+39
-10
+38
-9
app/(home-pages)/notifications/MentionNotification.tsx
+38
-9
app/(home-pages)/notifications/MentionNotification.tsx
···
2
2
import { ContentLayout, Notification } from "./Notification";
3
3
import { HydratedMentionNotification } from "src/notifications";
4
4
import { PubLeafletDocument, PubLeafletPublication } from "lexicons/api";
5
-
import { AtUri } from "@atproto/api";
5
+
import { Agent, AtUri } from "@atproto/api";
6
6
7
7
export const MentionNotification = (props: HydratedMentionNotification) => {
8
8
const docRecord = props.document.data as PubLeafletDocument.Record;
···
18
18
19
19
let actionText: React.ReactNode;
20
20
let mentionedItemName: string | undefined;
21
+
let mentionedDocRecord = props.mentionedDocument
22
+
?.data as PubLeafletDocument.Record;
23
+
24
+
let mentioner = "placeholder";
21
25
22
26
if (props.mention_type === "did") {
23
-
actionText = <>mentioned you</>;
24
-
} else if (props.mention_type === "publication" && props.mentionedPublication) {
25
-
const mentionedPubRecord = props.mentionedPublication.record as PubLeafletPublication.Record;
27
+
actionText = <>{mentioner} mentioned you</>;
28
+
} else if (
29
+
props.mention_type === "publication" &&
30
+
props.mentionedPublication
31
+
) {
32
+
const mentionedPubRecord = props.mentionedPublication
33
+
.record as PubLeafletPublication.Record;
26
34
mentionedItemName = mentionedPubRecord.name;
27
-
actionText = <>mentioned your publication <span className="italic">{mentionedItemName}</span></>;
35
+
actionText = (
36
+
<>
37
+
{mentioner} mentioned your publication{" "}
38
+
<span className="italic">{mentionedItemName}</span>
39
+
</>
40
+
);
28
41
} else if (props.mention_type === "document" && props.mentionedDocument) {
29
-
const mentionedDocRecord = props.mentionedDocument.data as PubLeafletDocument.Record;
30
42
mentionedItemName = mentionedDocRecord.title;
31
-
actionText = <>mentioned your post <span className="italic">{mentionedItemName}</span></>;
43
+
actionText = (
44
+
<>
45
+
{mentioner} mentioned your post{" "}
46
+
<span className="italic">{mentionedItemName}</span>
47
+
</>
48
+
);
32
49
} else {
33
-
actionText = <>mentioned you</>;
50
+
actionText = <>{mentioner} mentioned you</>;
34
51
}
35
52
36
53
return (
···
42
59
content={
43
60
<ContentLayout postTitle={docRecord.title} pubRecord={pubRecord}>
44
61
<div className="text-sm text-secondary">
45
-
in <span className="italic">{docRecord.title}</span>
62
+
... this should be some characters in front of{" "}
63
+
<span
64
+
className={
65
+
props.mention_type === "document"
66
+
? "italic"
67
+
: props.mention_type === "publication"
68
+
? "font-bold"
69
+
: ""
70
+
}
71
+
>
72
+
{mentionedItemName ? mentionedItemName : "@handleplaceholder"}
73
+
</span>{" "}
74
+
and some at the end...
46
75
</div>
47
76
</ContentLayout>
48
77
}
+1
-1
app/(home-pages)/notifications/Notification.tsx
+1
-1
app/(home-pages)/notifications/Notification.tsx
···
69
69
<div
70
70
className={`border border-border-light rounded-md px-2 py-[6px] w-full ${cardBorderHidden ? "transparent" : "bg-bg-page"}`}
71
71
>
72
-
<div className="text-tertiary text-sm italic font-bold pb-1">
72
+
<div className="text-tertiary text-sm italic font-bold ">
73
73
{props.postTitle}
74
74
</div>
75
75
{props.children}