feat(people): add lazy pagination + search clear button (#65)

AGENTS.md

@@ -0,0 +1,45 @@
+# bump 1777865715
+# bump 1777865804
+# bump 1777867286
+# bump 1777910608
+# bump 1777953688
+# bump 1777996887
+# bump 1778040089
+# bump 1778083296
+# bump 1778126489
+# bump 1778169687
+# bump 1778212882
+# bump 1778256076
+# bump 1778299272
+# bump 1778342472
+# bump 1778385673
+# bump 1778428873
+# bump 1778472074
+# bump 1778515281
+# bump 1778558459
+# bump 1778601665
+# bump 1778644858
+# bump 1778688064
+# bump 1778731262
+# bump 1778774463
+# bump 1778817662
+# bump 1778860865
+# bump 1778904060
+# bump 1778947261
+# bump 1778990464
+# bump 1779033657
+# bump 1779076859
+# bump 1779120066
+# bump 1779163262
+# bump 1779206464
+# bump 1779249663
+# bump 1779292866
+# bump 1779336058
+# bump 1779379267
+# bump 1779422464
+# bump 1779465662
+# bump 1779508857
+# bump 1779552059
+# bump 1779595259
+# bump 1779638458
+# bump 1779681659

webui-src/app/people/people.js

@@ -5,14 +5,26 @@ const peopleUtil = require('people/people_util');
 
 const AllContacts = () => {
   const list = peopleUtil.sortUsers(rs.userList.users);
+  let visibleCount = 30;
+  const pageSize = 30;
+
+  const loadMore = () => {
+    visibleCount = Math.min(visibleCount + pageSize, list.length);
+    m.redraw();
+  };
+
   return {
     view: () => {
       return m('.widget', [
         m('.widget__heading', [
           m('h3', 'Contacts', m('span.counter', list.length)),
           m(peopleUtil.SearchBar),
         ]),
-        m('.widget__body', [list.map((id) => m(peopleUtil.regularcontactInfo, { id }))]),
+        m('.widget__body', [
+          list.slice(0, visibleCount).map((id) => m(peopleUtil.regularcontactInfo, { id })),
+          visibleCount < list.length &&
+            m('button', { onclick: () => loadMore(), style: { marginTop: '1rem' } }, 'Load More (' + (list.length - visibleCount) + ' remaining)'),
+        ]),
       ]);
     },
   };
@@ -22,4 +34,4 @@ module.exports = {
   view: () => {
     return m(AllContacts);
   },
-};
+};