leaflet.pub
a tool for shared writing and social publishing
passed how cardBorder Hidden to other notifcation types
cozylittle.house
+12
-4
app/(home-pages)/notifications/CommentNotication.tsx
+12
-4
app/(home-pages)/notifications/CommentNotication.tsx
···
15
Notification,
16
} from "./Notification";
17
18
-
export const CommentNotification = (props: HydratedCommentNotification) => {
19
let docRecord = props.commentData.documents
20
?.data as PubLeafletDocument.Record;
21
let commentRecord = props.commentData.record as PubLeafletComment.Record;
···
25
profileRecord.displayName ||
26
props.commentData.bsky_profiles?.handle ||
27
"Someone";
28
-
const publication = props.commentData.documents?.documents_in_publications[0]
29
-
?.publications?.record as PubLeafletPublication.Record;
30
return (
31
<Notification
32
icon={<CommentTiny />}
33
actionText={<>{displayName} commented on your post</>}
34
content={
35
-
<ContentLayout postTitle={docRecord.title} publication={publication}>
36
<CommentInNotification
37
className=""
38
avatar={
···
15
Notification,
16
} from "./Notification";
17
18
+
export const CommentNotification = (
19
+
props: { cardBorderHidden: boolean } & HydratedCommentNotification,
20
+
) => {
21
let docRecord = props.commentData.documents
22
?.data as PubLeafletDocument.Record;
23
let commentRecord = props.commentData.record as PubLeafletComment.Record;
···
27
profileRecord.displayName ||
28
props.commentData.bsky_profiles?.handle ||
29
"Someone";
30
+
const publication =
31
+
props.commentData.documents?.documents_in_publications[0]?.publications ||
32
+
undefined;
33
return (
34
<Notification
35
+
cardBorderHidden={props.cardBorderHidden}
36
icon={<CommentTiny />}
37
actionText={<>{displayName} commented on your post</>}
38
content={
39
+
<ContentLayout
40
+
cardBorderHidden={props.cardBorderHidden}
41
+
postTitle={docRecord.title}
42
+
publication={publication}
43
+
>
44
<CommentInNotification
45
className=""
46
avatar={
+4
-1
app/(home-pages)/notifications/FollowNotification.tsx
+4
-1
app/(home-pages)/notifications/FollowNotification.tsx
···
1
import { Avatar } from "components/Avatar";
2
import { Notification } from "./Notification";
3
4
-
export const DummyFollowNotification = () => {
5
const identity = "celine";
6
const pubName = "Pub Name Here";
7
return (
8
<Notification
9
icon={<Avatar src={undefined} displayName={identity} tiny />}
10
actionText={
11
<>
12
{identity} followed {pubName}!
···
1
import { Avatar } from "components/Avatar";
2
import { Notification } from "./Notification";
3
4
+
export const DummyFollowNotification = (props: {
5
+
cardBorderHidden: boolean;
6
+
}) => {
7
const identity = "celine";
8
const pubName = "Pub Name Here";
9
return (
10
<Notification
11
icon={<Avatar src={undefined} displayName={identity} tiny />}
12
+
cardBorderHidden={props.cardBorderHidden}
13
actionText={
14
<>
15
{identity} followed {pubName}!
+9
-2
app/(home-pages)/notifications/MentionNotification.tsx
+9
-2
app/(home-pages)/notifications/MentionNotification.tsx
···
1
import { MentionTiny } from "components/Icons/MentionTiny";
2
import { ContentLayout, Notification } from "./Notification";
3
4
-
export const DummyPostMentionNotification = () => {
5
return (
6
<Notification
7
icon={<MentionTiny />}
8
actionText={<>celine mentioned your post</>}
9
content={
10
<ContentLayout
11
postTitle={"Post Title Here"}
12
publication={{ name: "My Publication" } as any}
13
>
14
I'm just gonna put the description here. The surrounding context is
···
25
);
26
};
27
28
-
export const DummyUserMentionNotification = () => {
29
return (
30
<Notification
31
icon={<MentionTiny />}
···
34
<ContentLayout
35
postTitle={"Post Title Here"}
36
publication={{ name: "My Publication" } as any}
37
>
38
<div>
39
...llo this is the content of a post or whatever here it comes{" "}
···
1
import { MentionTiny } from "components/Icons/MentionTiny";
2
import { ContentLayout, Notification } from "./Notification";
3
4
+
export const DummyPostMentionNotification = (props: {
5
+
cardBorderHidden: boolean;
6
+
}) => {
7
return (
8
<Notification
9
icon={<MentionTiny />}
10
+
cardBorderHidden={props.cardBorderHidden}
11
actionText={<>celine mentioned your post</>}
12
content={
13
<ContentLayout
14
postTitle={"Post Title Here"}
15
+
cardBorderHidden={props.cardBorderHidden}
16
publication={{ name: "My Publication" } as any}
17
>
18
I'm just gonna put the description here. The surrounding context is
···
29
);
30
};
31
32
+
export const DummyUserMentionNotification = (props: {
33
+
cardBorderHidden: boolean;
34
+
}) => {
35
return (
36
<Notification
37
icon={<MentionTiny />}
···
40
<ContentLayout
41
postTitle={"Post Title Here"}
42
publication={{ name: "My Publication" } as any}
43
+
cardBorderHidden={props.cardBorderHidden}
44
>
45
<div>
46
...llo this is the content of a post or whatever here it comes{" "}
+19
-18
app/(home-pages)/notifications/Notification.tsx
+19
-18
app/(home-pages)/notifications/Notification.tsx
···
2
import { BaseTextBlock } from "app/lish/[did]/[publication]/[rkey]/BaseTextBlock";
3
import { PubLeafletPublication, PubLeafletRichtextFacet } from "lexicons/api";
4
import { useEntity, useReplicache } from "src/replicache";
5
6
export const Notification = (props: {
7
icon: React.ReactNode;
···
9
content?: React.ReactNode;
10
cardBorderHidden?: boolean;
11
}) => {
12
-
let { rootEntity } = useReplicache();
13
-
let cardBorderHidden = useEntity(rootEntity, "theme/card-border-hidden")?.data
14
-
.value;
15
-
16
return (
17
<div
18
-
className={`flex flex-col w-full sm:p-4 px-3 pl-2 sm:pl-3 pt-2 sm:pt-3! ${
19
-
cardBorderHidden
20
? ""
21
-
: " block-border border-border! hover:outline-border "
22
}`}
23
style={{
24
-
backgroundColor: cardBorderHidden
25
? "transparent"
26
: "rgba(var(--bg-page), var(--bg-page-alpha))",
27
}}
···
43
export const ContentLayout = (props: {
44
children: React.ReactNode;
45
postTitle: string;
46
-
publication: PubLeafletPublication.Record;
47
}) => {
48
-
let { rootEntity } = useReplicache();
49
-
let cardBorderHidden = useEntity(rootEntity, "theme/card-border-hidden")?.data
50
-
.value;
51
52
return (
53
<div
54
-
className={`border border-border-light rounded-md px-2 py-[6px] w-full ${cardBorderHidden ? "transparent" : "bg-bg-page"}`}
55
>
56
<div className="text-tertiary text-sm italic font-bold pb-1">
57
{props.postTitle}
58
</div>
59
{props.children}
60
-
<hr className="mt-2 mb-1 border-border-light" />
61
-
62
-
<div className="text-xs text-tertiary flex gap-[6px] items-center">
63
-
{props.publication.name}
64
-
</div>
65
</div>
66
);
67
};
···
2
import { BaseTextBlock } from "app/lish/[did]/[publication]/[rkey]/BaseTextBlock";
3
import { PubLeafletPublication, PubLeafletRichtextFacet } from "lexicons/api";
4
import { useEntity, useReplicache } from "src/replicache";
5
+
import { PubIcon } from "components/ActionBar/Publications";
6
+
import { Json } from "supabase/database.types";
7
8
export const Notification = (props: {
9
icon: React.ReactNode;
···
11
content?: React.ReactNode;
12
cardBorderHidden?: boolean;
13
}) => {
14
return (
15
<div
16
+
className={`flex flex-col w-full ${
17
+
props.cardBorderHidden
18
? ""
19
+
: " block-border border-border! hover:outline-border sm:p-4 px-3 pl-2 sm:pl-3 pt-2 sm:pt-3!"
20
}`}
21
style={{
22
+
backgroundColor: props.cardBorderHidden
23
? "transparent"
24
: "rgba(var(--bg-page), var(--bg-page-alpha))",
25
}}
···
41
export const ContentLayout = (props: {
42
children: React.ReactNode;
43
postTitle: string;
44
+
publication?: { record: Json; uri: string };
45
+
cardBorderHidden: boolean;
46
}) => {
47
+
let pubRecord = props.publication?.record as PubLeafletPublication.Record;
48
49
return (
50
<div
51
+
className={`border border-border-light rounded-md px-2 py-[6px] w-full ${props.cardBorderHidden ? "transparent" : "bg-bg-page"}`}
52
>
53
<div className="text-tertiary text-sm italic font-bold pb-1">
54
{props.postTitle}
55
</div>
56
{props.children}
57
+
{props.publication && (
58
+
<>
59
+
<hr className="mt-3 mb-2 border-border-light" />
60
+
<div className="text-xs text-tertiary flex gap-[6px] items-center">
61
+
<PubIcon small record={pubRecord} uri={props.publication.uri} />
62
+
{pubRecord.name}
63
+
</div>
64
+
</>
65
+
)}
66
</div>
67
);
68
};
+11
-3
app/(home-pages)/notifications/NotificationList.tsx
+11
-3
app/(home-pages)/notifications/NotificationList.tsx
···
16
markAsRead();
17
}, 500);
18
}, []);
19
+
let { rootEntity } = useReplicache();
20
+
let cardBorderHidden = useEntity(rootEntity, "theme/card-border-hidden")?.data
21
+
.value;
22
return (
23
<div className="max-w-prose mx-auto w-full">
24
+
<div className={`flex flex-col ${cardBorderHidden ? "gap-6" : "gap-2"}`}>
25
{notifications.map((n) => {
26
if (n.type === "comment") {
27
n;
28
+
return (
29
+
<CommentNotification
30
+
cardBorderHidden={!!cardBorderHidden}
31
+
key={n.id}
32
+
{...n}
33
+
/>
34
+
);
35
}
36
})}
37
</div>
+5
-1
app/(home-pages)/notifications/ReplyNotification.tsx
+5
-1
app/(home-pages)/notifications/ReplyNotification.tsx
···
7
Notification,
8
} from "./Notification";
9
10
-
export const DummyReplyNotification = () => {
11
return (
12
<Notification
13
icon={<ReplyTiny />}
14
actionText={<>jared replied to your comment</>}
15
content={
16
<ContentLayout
17
postTitle="This is the Post Title"
18
publication={{ name: "My Publication" } as any}
19
>
···
7
Notification,
8
} from "./Notification";
9
10
+
export const DummyReplyNotification = (props: {
11
+
cardBorderHidden: boolean;
12
+
}) => {
13
return (
14
<Notification
15
icon={<ReplyTiny />}
16
actionText={<>jared replied to your comment</>}
17
+
cardBorderHidden={props.cardBorderHidden}
18
content={
19
<ContentLayout
20
+
cardBorderHidden={props.cardBorderHidden}
21
postTitle="This is the Post Title"
22
publication={{ name: "My Publication" } as any}
23
>