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