add profile photos to navbar and limit number of mentions that arrive

3 files changed, 30 insertions, 8 deletions

diff --git a/app.js b/app.js
index 7fe1ae2..7892593 100644
--- a/app.js
+++ b/app.js
@@ -26,8 +26,14 @@ keys().then(key => {
 
   var navbar = h('div', {classList: 'navbar'}, [
     h('div', {classList: 'internal'}, [
-      h('li', [h('a', {href: '#'}, ['Home'])]),
-      h('li', [h('a', {href: '#' + key.publicKey}, [getName(key.publicKey, keys)])]),
+      h('li', [h('a', {href: '#' + key.publicKey}, 
+        [
+          getImage(key.publicKey, keys),
+          getName(key.publicKey, keys)
+        ])
+      ]),
+      h('li', [h('a', {href: '#'}, ['All'])]),
+      h('li', [h('a', {href: '#?' + key.publicKey}, ['Mentions'])]),
       h('li', {classList: 'right'}, [h('a', {href: '#settings'}, ['Settings'])]),
       h('form', { classList: 'search', 
         onsubmit: function (e) {
diff --git a/css/style.css b/css/style.css
index ba2313a..383d6b9 100644
--- a/css/style.css
+++ b/css/style.css
@@ -180,7 +180,7 @@ textarea {
   z-index: 1000;
   margin: 0;
   padding-top: .33em;
-  padding-bottom: .27em;
+  padding-bottom: .4em;
   left: 0; right: 0;
   top: 0;
 }
@@ -236,7 +236,7 @@ form.search {
 }
 
 .profileAvatar { width: 75px; vertical-align: top; border-radius: 5px; object-fit: cover; margin-right: .25em; margin-bottom: .25em;}
-.avatar { width: 25px; height: 25px; vertical-align: middle; object-fit: cover; border-radius: 5px; margin-right: .2em; }
+.avatar { width: 25px; height: 25px; vertical-align: middle; object-fit: cover; border-radius: 5px; margin-right: .5em; }
 
 .image { width: 75px; height: 75px; object-fit: cover; margin-right: .2em; border-radius: 5px; cursor: pointer;}
 
diff --git a/views.js b/views.js
index e967191..d8c537f 100644
--- a/views.js
+++ b/views.js
@@ -107,12 +107,28 @@ function profilePage (src, keys) {
 function searchPage (src, keys) {
   var search = src.substring(1).replace("%20"," ").toUpperCase()
 
+
+  async function addPosts (posts, keys) {
+    posts.forEach(function (msg) {
+      if (msg.text) {
+        if (msg.text.toUpperCase().includes(search)) {
+          scroller.appendChild(render(msg, keys))
+        }
+      }
+    })
+  }
   bog().then(log => {
+    var index = 0
     if (log) {
-      log.forEach(function (msg) {
-        if (msg.text) {
-          if (msg.text.toUpperCase().includes(search)) {
-            scroller.appendChild(render(msg, keys))
+      var posts = log.slice(index, index + 25)
+      addPosts(posts, keys).then(done => {
+        index = index + 25
+        window.onscroll = function(ev) {
+          if (((window.innerHeight + window.scrollY) >= document.body.scrollHeight) && (window.location.hash.substring(1) === src)) {
+            posts = log.slice(index, index + 25)
+            index = index + 25
+            addPosts(posts, keys)
+            console.log("Bottom of page")
           }
         }
       })