Feed styling

public/default_profile.svg

@@ -1,5 +0,0 @@
-<?xml version="1.0"?>
-<svg xmlns="http://www.w3.org/2000/svg" width="340" height="340">
-<path fill="#DDD" d="m169,.5a169,169 0 1,0 2,0zm0,86a76,76 0 1
-1-2,0zM57,287q27-35 67-35h92q40,0 67,35a164,164 0 0,1-226,0"/>
-</svg>

src/components/BaseButtonLoadMore.vue

@@ -1,33 +1,15 @@
 <template>
-  <div>
-    <!-- <q-separator color='accent'/> -->
-    <q-btn-group
-    spread
-    dense
-    outline
-    rounded
-    text-color="accent"
-    >
-      <q-btn
-        dense
-        :loading='loadingMore'
-        outline
-        rounded
-        color="accent"
-        class='text-weight-light q-ma-sm'
-        style='letter-spacing: .1rem;'
-        :label='reachedEnd ? "reached end" : label'
-        :disable='reachedEnd'
-        @click="$emit('click')"
-      >
-        <template #loading>
-          <div class='row justify-center'>
-            <q-spinner-orbit color="accent" size='sm' />
-          </div>
-        </template>
-      </q-btn>
-    </q-btn-group>
-    <!-- <q-separator color='accent'/> -->
+  <div class="load-more">
+    <q-btn
+      flat
+      size="md"
+      :loading="loading"
+      color="accent"
+      style="letter-spacing: .1rem;"
+      :label="reachedEnd ? 'reached end' : label"
+      :disable="reachedEnd"
+      @click="$emit('click')"
+    />
   </div>
 </template>
 
@@ -38,7 +20,7 @@ export default defineComponent({
   name: 'BaseButtonLoadMore',
   emits: ['click'],
   props: {
-    loadingMore: {
+    loading: {
       type: Boolean,
       required: true
     },
@@ -54,8 +36,8 @@ export default defineComponent({
 })
 </script>
 
-<style lang='css' scoped>
-.q-btn-group {
-  background: var(--q-background);
+<style lang="scss">
+.load-more button {
+  width: 100%;
 }
 </style>

src/components/BaseUserAvatar.vue

@@ -1,7 +1,17 @@
 <template>
   <div :class="(bordered ? 'bordered-avatar' : '') + (hoverEffect ? ' hovered-avatar' : '')">
-    <q-avatar :rounded="!round" class="relative-position" :size="size" @click.stop="toProfile(pubkey)">
-      <img :src="$store.getters.avatar(pubkey)" loading="lazy" crossorigin async />
+    <q-avatar
+      :rounded="!round"
+      :size="size"
+      @click.stop="toProfile(pubkey)"
+      class="relative-position"
+    >
+      <img
+        :src="$store.getters.avatar(pubkey)"
+        loading="lazy"
+        crossorigin
+        @error.once="setDefaultAvatar"
+      />
       <div :class="alignRight ? 'icon-right' : 'icon-left'" class="q-pt-xs">
         <BaseButtonNIP05
           v-if="showVerified"
@@ -16,6 +26,7 @@
 <script>
 import helpersMixin from '../utils/mixin'
 import BaseButtonNIP05 from 'components/BaseButtonNIP05.vue'
+import Identicon from 'identicon.js'
 
 export default {
   mixins: [helpersMixin],
@@ -31,6 +42,11 @@ export default {
     showVerified: {type: Boolean, default: false},
     hoverEffect: {type: Boolean, default: false},
   },
+  methods: {
+    setDefaultAvatar(event) {
+      event.target.src = 'data:image/png;base64,' + new Identicon(this.pubkey, 40).toString()
+    }
+  }
 }
 </script>
 

src/components/Post/index.vue

@@ -14,9 +14,7 @@
           <span class="created-at">{{ moment(post.createdAt).fromNow() }}</span>
         </p>
       </div>
-      <div
-        class="post-content-body"
-      >
+      <div class="post-content-body">
         <p>
           <base-markdown :content="post.content" />
         </p>
@@ -71,18 +69,21 @@ function countRepliesRecursive(event) {
   if (!event.replies) {
     return 0
   }
-  let count = event.replies.length
-  for (const reply of event.replies) {
-    count += countRepliesRecursive(reply)
+  let count = 0
+  for (const thread of event.replies) {
+    if (!thread || !Array.isArray(thread)) {
+      continue
+    }
+    count += thread.length
+    for (const reply of thread) {
+      count += countRepliesRecursive(reply)
+    }
   }
   return count
 }
 
 function postFromEvents(events) {
   const event = events[0]
-  if (event.replies.length) {
-    console.log(event)
-  }
   return {
     id: event.id,
     author: event.pubkey,
@@ -149,22 +150,22 @@ export default {
     }
   }
   &-content {
-    margin-left: 10px;
+    margin-left: 12px;
     flex-grow: 1;
     &-header {
       p {
-        margin: 8px 0;
-        font-weight: bold;
-        color: #fff;
+        margin: 0 0 8px;
         > span {
           color: $color-dark-gray;
+          &:first-child {
+            color: #fff;
+          }
           & + span {
             margin-left: 8px;
           }
           &.nip05 {
           }
           &.created-at {
-            font-weight: normal;
           }
         }
       }
@@ -197,6 +198,7 @@ export default {
       justify-content: space-between;
       max-width: 450px;
       width: 100%;
+      margin-left: -9px;
       .action-item {
         display: flex;
         align-items: center;

src/layouts/MainLayout.vue

@@ -22,7 +22,7 @@
       <div class="layout-flow">
         <q-page-container ref="pageContainer">
           <router-view v-slot="{ Component }">
-            <keep-alive :include="['Feed', 'Messages', 'Notifications']">
+            <keep-alive :include="['Feed', 'Feed2', 'Messages', 'Notifications']">
               <component :is="Component" :key="$route.path" :looking-around="lookingAround" @scroll-to-rect="scrollToRect" @reply-event="setReplyEvent"/>
             </keep-alive>
           </router-view>
@@ -120,7 +120,7 @@ export default defineComponent({
 
   data() {
     return {
-      cachedPages: ['Feed', 'Notifications', 'Messages'],
+      cachedPages: ['Feed', 'Feed2', 'Notifications', 'Messages'],
       middlePagePos: {},
       broadcastChannel: new BroadcastChannel('hamstr'),
       activeWindow: false,

src/pages/Feed2.vue

@@ -23,18 +23,20 @@
       <q-icon name="info" color="accent" size="sm"/>
       <div>to chat with the AI bot create a new post and mention it by typing '@gpt3' and selecting the AI bot from the user list</div>
     </div>
-    <BaseButtonLoadMore
-      v-if='unreadFeed[tab].length'
-      :loading-more="loadingUnread"
-      :label="'load ' + unreadFeed[tab].length + ' unread'"
-      @click="loadUnread"
-    />
-    <Post v-for="(item, index) in items" :key="index" :events="item" class="full-width" @add-event="processEvent"/>
-    <BaseButtonLoadMore
-      :loading-more="loadingMore"
-      :label="items.length === feed[tab].length ? 'load another day' : 'load 100 more'"
-      @click="loadMore"
-    />
+    <div class="feed">
+      <BaseButtonLoadMore
+        v-if="unreadFeed[tab].length"
+        :loading="loadingUnread"
+        :label="'load ' + unreadFeed[tab].length + ' unread'"
+        @click="loadUnread"
+      />
+      <Post v-for="item in items" :key="item[0].id" :events="item" class="full-width" @add-event="processEvent"/>
+      <BaseButtonLoadMore
+        :loading="loadingMore"
+        :label="items.length === feed[tab].length ? 'load another day' : 'load 100 more'"
+        @click="loadMore"
+      />
+    </div>
   </q-page>
 </template>
 
@@ -47,6 +49,7 @@ import {dbFeed, dbUserFollows} from '../query'
 import BaseButtonLoadMore from 'components/BaseButtonLoadMore.vue'
 import { createMetaMixin } from 'quasar'
 import Post from 'components/Post/index.vue'
+//import BasePostThread from 'components/BasePostThread.vue'
 
 
     // const debouncedAddToThread = mergebounce(
@@ -76,6 +79,7 @@ export default defineComponent({
   mixins: [helpersMixin, createMetaMixin(metaData)],
 
   components: {
+    //BasePostThread,
     Post,
     BaseButtonLoadMore,
   },
@@ -269,12 +273,24 @@ export default defineComponent({
   }
 })
 </script>
-<style lang='css' scoped>
+<style lang="scss" scoped>
+@import 'assets/theme/colors.scss';
+
 .q-tabs {
-  border-bottom: 1px solid var(--q-accent)
+  border-bottom: $border-dark;
 }
 
 .q-page::-webkit-scrollbar {
   width: 0px;
 }
+
+.feed {
+  .load-more:first-child {
+    border-bottom: $border-dark;
+  }
+  .load-more:last-child {
+    border-bottom: 0;
+  }
+}
+
 </style>