diff --git a/src/app.tsx b/src/app.tsx
index d7a31a5dc..4060245ef 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -21,6 +21,7 @@ import UserFollowingTab from "./views/user/following";
import NoteView from "./views/note";
import { LoginStartView } from "./views/login/start";
import { LoginNpubView } from "./views/login/npub";
+import NotificationsView from "./views/notifications";
const RequireSetup = ({ children }: { children: JSX.Element }) => {
let location = useLocation();
@@ -84,6 +85,10 @@ const router = createBrowserRouter([
path: "settings",
element: ,
},
+ {
+ path: "notifications",
+ element: ,
+ },
{
path: "profile",
element: ,
diff --git a/src/components/page.tsx b/src/components/page.tsx
index 8da16d951..2205285ab 100644
--- a/src/components/page.tsx
+++ b/src/components/page.tsx
@@ -19,14 +19,16 @@ const MobileProfileHeader = () => {
const pubkey = useSubject(identity.pubkey);
return (
-
+
}
aria-label="Notifications"
title="Notifications"
size="sm"
+ to="/notifications"
/>
);
@@ -71,6 +73,9 @@ const DesktopSideNav = () => {
+
diff --git a/src/views/notifications/index.tsx b/src/views/notifications/index.tsx
new file mode 100644
index 000000000..df5c2b3a7
--- /dev/null
+++ b/src/views/notifications/index.tsx
@@ -0,0 +1,69 @@
+import { Button, Card, CardBody, Flex, Spinner, Text } from "@chakra-ui/react";
+import moment from "moment";
+import { memo } from "react";
+import { useNavigate } from "react-router-dom";
+import { NoteContents } from "../../components/note/note-contents";
+import { UserAvatar } from "../../components/user-avatar";
+import { UserLink } from "../../components/user-link";
+import { convertTimestampToDate } from "../../helpers/date";
+import useSubject from "../../hooks/use-subject";
+import { useTimelineLoader } from "../../hooks/use-timeline-loader";
+import identity from "../../services/identity";
+import settings from "../../services/settings";
+import { NostrEvent } from "../../types/nostr-event";
+
+const Kind1Notification = ({ event }: { event: NostrEvent }) => {
+ const navigate = useNavigate();
+
+ return (
+
+
+
+
+
+ {moment(convertTimestampToDate(event.created_at)).fromNow()}
+
+
+
+
+ );
+};
+
+const NotificationItem = memo(({ event }: { event: NostrEvent }) => {
+ if (event.kind === 1) {
+ return ;
+ }
+ return <>Unknown event type {event.kind}>;
+});
+
+const NotificationsView = () => {
+ const relays = useSubject(settings.relays);
+ const pubkey = useSubject(identity.pubkey);
+ const { events, loading, loadMore } = useTimelineLoader(
+ "notifications",
+ relays,
+ {
+ "#p": [pubkey],
+ kinds: [1],
+ since: moment().subtract(1, "day").unix(),
+ },
+ { pageSize: moment.duration(1, "day").asSeconds() }
+ );
+
+ const timeline = events
+ // ignore events made my the user
+ .filter((e) => e.pubkey !== pubkey);
+
+ return (
+
+ {timeline.map((event) => (
+
+ ))}
+ {loading ? : }
+
+ );
+};
+
+export default NotificationsView;
diff --git a/src/views/settings/index.tsx b/src/views/settings/index.tsx
index 3e85360f9..d6e412aad 100644
--- a/src/views/settings/index.tsx
+++ b/src/views/settings/index.tsx
@@ -210,7 +210,7 @@ export const SettingsView = () => {
-
+
diff --git a/src/views/user/index.tsx b/src/views/user/index.tsx
index 18d22b6a1..84a0fe079 100644
--- a/src/views/user/index.tsx
+++ b/src/views/user/index.tsx
@@ -91,9 +91,11 @@ const UserView = () => {
onClick={() => navigate("/settings")}
/>
)}
-
+ {!isSelf && (
+
+ )}