leaflet.pub
a tool for shared writing and social publishing
add compact rendering for notification list - mostly credit to jared
cozylittle.house
+33
-15
+1
-1
app/(home-pages)/notifications/CommentNotication.tsx
+1
-1
app/(home-pages)/notifications/CommentNotication.tsx
+14
-2
app/(home-pages)/notifications/Notification.tsx
+14
-2
app/(home-pages)/notifications/Notification.tsx
···
4
4
import { PubLeafletPublication, PubLeafletRichtextFacet } from "lexicons/api";
5
5
import { timeAgo } from "src/utils/timeAgo";
6
6
import { useReplicache, useEntity } from "src/replicache";
7
+
import { useContext } from "react";
8
+
import { NotificationContext } from "./NotificationList";
7
9
8
10
export const Notification = (props: {
9
11
icon: React.ReactNode;
···
13
15
href: string;
14
16
}) => {
15
17
let { rootEntity } = useReplicache();
18
+
let { compact } = useContext(NotificationContext);
16
19
let cardBorderHidden = useEntity(rootEntity, "theme/card-border-hidden")?.data
17
20
.value;
21
+
22
+
// If compact mode, always hide border
23
+
if (compact) {
24
+
cardBorderHidden = true;
25
+
}
18
26
19
27
return (
20
28
<div
···
36
44
<div className="flex justify-between items-center gap-3 w-full ">
37
45
<div className={`flex flex-row gap-2 items-center grow w-full min-w-0`}>
38
46
<div className="text-secondary shrink-0">{props.icon}</div>
39
-
<div className="text-secondary font-bold grow truncate min-w-0">
47
+
<div
48
+
className={`text-secondary font-bold grow truncate min-w-0 ${compact ? "text-sm" : ""}`}
49
+
>
40
50
{props.actionText}
41
51
</div>
42
52
</div>
43
-
<div className="text-sm text-tertiary shrink-0 min-w-8">
53
+
<div
54
+
className={`text-tertiary shrink-0 min-w-8 ${compact ? "text-xs" : "text-sm"}`}
55
+
>
44
56
{timeAgo(props.timestamp)}
45
57
</div>
46
58
</div>
+16
-10
app/(home-pages)/notifications/NotificationList.tsx
+16
-10
app/(home-pages)/notifications/NotificationList.tsx
···
3
3
import { HydratedNotification } from "src/notifications";
4
4
import { CommentNotification } from "./CommentNotication";
5
5
import { useEntity, useReplicache } from "src/replicache";
6
-
import { useEffect } from "react";
6
+
import { useEffect, createContext } from "react";
7
7
import { markAsRead } from "./getNotifications";
8
8
import { ReplyNotification } from "./ReplyNotification";
9
9
10
+
export const NotificationContext = createContext({ compact: false });
11
+
10
12
export function NotificationList({
11
13
notifications,
14
+
compact,
12
15
}: {
13
16
notifications: HydratedNotification[];
17
+
compact?: boolean;
14
18
}) {
15
19
useEffect(() => {
16
20
setTimeout(() => {
···
25
29
</div>
26
30
);
27
31
return (
28
-
<div className="max-w-prose mx-auto w-full">
29
-
<div className={`flex flex-col gap-2`}>
30
-
{notifications.map((n) => {
31
-
if (n.type === "comment") {
32
-
if (n.parentData) return <ReplyNotification key={n.id} {...n} />;
33
-
return <CommentNotification key={n.id} {...n} />;
34
-
}
35
-
})}
32
+
<NotificationContext.Provider value={{ compact: compact ?? false }}>
33
+
<div className="max-w-prose mx-auto w-full">
34
+
<div className={`flex flex-col gap-2`}>
35
+
{notifications.map((n) => {
36
+
if (n.type === "comment") {
37
+
if (n.parentData) return <ReplyNotification key={n.id} {...n} />;
38
+
return <CommentNotification key={n.id} {...n} />;
39
+
}
40
+
})}
41
+
</div>
36
42
</div>
37
-
</div>
43
+
</NotificationContext.Provider>
38
44
);
39
45
}
+1
-1
app/(home-pages)/notifications/ReplyNotification.tsx
+1
-1
app/(home-pages)/notifications/ReplyNotification.tsx