Add basic Notifications page

src/nostr/NostrStore.js

@@ -262,6 +262,21 @@ export const useNostrStore = defineStore('nostr', {
       )
     },
 
+    streamNotifications(pubkey, eventCallback, initialFetchCompleteCallback) {
+      return this.streamEvents(
+        {
+          kinds: [EventKind.NOTE, EventKind.REACTION], // TODO SHARE, CONTACT
+          '#p': [pubkey],
+        },
+        50,
+        eventCallback,
+        initialFetchCompleteCallback,
+        {
+          subId: `notifications:${pubkey}`,
+        }
+      )
+    },
+
     streamFullProfile(pubkey) {
       // FIXME
       // const handles = []

src/pages/Notifications.vue

@@ -1,20 +1,71 @@
 <template>
   <PageHeader back-button />
-  <h3>Under construction</h3>
+  <div class="notifications">
+    <template v-for="(note, i) in notifications">
+      <ListPost v-if="defer(i)" :key="note.id" :note="note" class="list-post" clickable />
+    </template>
+    <ListPlaceholder :count="notifications?.length" :loading="loading" />
+  </div>
 </template>
 
 <script>
 import PageHeader from 'components/PageHeader.vue'
+import ListPost from 'components/Post/ListPost.vue'
+import {useNostrStore} from 'src/nostr/NostrStore'
+import {useAppStore} from 'stores/App'
+import {NoteOrder} from 'src/nostr/store/NoteStore'
+import Defer from 'src/utils/Defer'
+import {useSettingsStore} from 'stores/Settings'
+import ListPlaceholder from 'components/ListPlaceholder.vue'
 
 export default {
   name: 'Notifications',
-  components: {PageHeader}
+  components: {ListPlaceholder, ListPost, PageHeader},
+  mixins: [Defer()],
+  setup() {
+    return {
+      app: useAppStore(),
+      nostr: useNostrStore(),
+      settings: useSettingsStore(),
+    }
+  },
+  data() {
+    return {
+      notifications: [],
+      loading: true,
+    }
+  },
+  methods: {
+  },
+  mounted() {
+    const read = []
+    const unread = []
+    this.nostr.streamNotifications(
+      this.app.myPubkey,
+      event => {
+        if (event.createdAt >= this.settings.notificationsLastRead) {
+          unread.push(event)
+        } else {
+          read.push(event)
+        }
+      },
+  () => {
+        unread.sort(NoteOrder.CREATION_DATE_DESC)
+        this.notifications = unread
+        this.loading = false
+      }
+    )
+  }
 }
 </script>
 
-<style scoped>
-h3 {
-  margin: 0;
-  padding: 0 1rem;
+<style lang="scss" scoped>
+@import "assets/theme/colors.scss";
+
+.notifications {
+  //border-top: $border-dark;
+  .list-post:first-child {
+    border-top: $border-dark;
+  }
 }
 </style>

src/stores/Settings.js

@@ -16,6 +16,9 @@ export const useSettingsStore = defineStore('settings', {
     accounts: {},
     pubkey: null,
     relays: RELAYS,
+    // TODO move somewhere else?
+    notificationsLastRead: 0,
+    messagesLastRead: 0,
   }),
   getters: {
     activeAccount(state) {