Add 'under construction' hint to Notifications page

src/pages/Notifications.vue

@@ -1,8 +1,22 @@
 <template>
-  <PageHeader back-button />
+  <PageHeader back-button>
+    <template #addon>
+      <div class="under-construction">
+        <q-icon name="warning" size="xs"/> Under construction
+      </div>
+    </template>
+  </PageHeader>
+
   <div class="notifications">
-    <template v-for="(note, i) in notifications">
-      <ListPost v-if="defer(i)" :key="note.id" :note="note" class="list-post" clickable actions />
+    <template v-for="(note, i) in posts">
+      <ListPost
+        v-if="defer(i)"
+        :key="note.id"
+        :note="note"
+        class="list-post"
+        clickable
+        actions
+      />
     </template>
     <ListPlaceholder :count="notifications?.length" :loading="loading" />
   </div>
@@ -11,12 +25,11 @@
 <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'
+import {useAppStore} from 'stores/App'
+import {useNostrStore} from 'src/nostr/NostrStore'
+import {useSettingsStore} from 'stores/Settings'
+import Defer from 'src/utils/Defer'
 
 export default {
   name: 'Notifications',
@@ -31,21 +44,29 @@ export default {
   },
   data() {
     return {
-      notifications: [],
       stream: null,
       loading: true,
     }
   },
+  computed: {
+    notifications() {
+      return this.nostr.getNotifications(this.app.myPubkey)
+    },
+    posts() {
+      return this.notifications?.filter(note => note && !note.isReaction())
+    }
+  },
   methods: {
   },
   mounted() {
-    this.stream = this.nostr.streamNotifications(this.app.myPubkey)
-    this.stream.on('init', events => {
-      events.sort(NoteOrder.CREATION_DATE_DESC)
-      this.notifications = events
+    // this.stream = this.nostr.streamNotifications(this.app.myPubkey)
+    // this.stream.on('init', events => {
+    //   events.sort(NoteOrder.CREATION_DATE_DESC)
+    //   this.notifications = this.nostr.getNotifications(this.app.myPubkey)
+    //   this.loading = false
+    // })
+    //this.stream.on('update', event => this.notifications.unshift(event))
     this.loading = false
-    })
-    this.stream.on('update', event => this.notifications.unshift(event))
   },
   unmounted() {
     if (this.stream) this.stream.close()
@@ -56,10 +77,11 @@ export default {
 <style lang="scss" scoped>
 @import "assets/theme/colors.scss";
 
-.notifications {
-  //border-top: $border-dark;
-  .list-post:first-child {
-    border-top: $border-dark;
+.under-construction {
+  color: $color-light-gray;
+  font-size: .95rem;
+  i {
+    vertical-align: top;
   }
 }
 </style>