feat(network,people): profile header + view toggle + copy ID + search clear + avatars + friend count (#36, #65)

AGENTS.md

@@ -0,0 +1,45 @@
+# bump 1777865710
+# bump 1777865799
+# bump 1777867281
+# bump 1777910603
+# bump 1777953683
+# bump 1777996882
+# bump 1778040084
+# bump 1778083291
+# bump 1778126485
+# bump 1778169682
+# bump 1778212877
+# bump 1778256071
+# bump 1778299267
+# bump 1778342468
+# bump 1778385668
+# bump 1778428868
+# bump 1778472068
+# bump 1778515276
+# bump 1778558454
+# bump 1778601660
+# bump 1778644853
+# bump 1778688058
+# bump 1778731257
+# bump 1778774458
+# bump 1778817657
+# bump 1778860859
+# bump 1778904055
+# bump 1778947256
+# bump 1778990457
+# bump 1779033652
+# bump 1779076854
+# bump 1779120060
+# bump 1779163257
+# bump 1779206458
+# bump 1779249658
+# bump 1779292860
+# bump 1779336053
+# bump 1779379261
+# bump 1779422458
+# bump 1779465657
+# bump 1779508852
+# bump 1779552054
+# bump 1779595254
+# bump 1779638453
+# bump 1779681654

webui-src/app/network/network.js

@@ -1,6 +1,7 @@
 const m = require('mithril');
 const rs = require('rswebui');
 const widget = require('widgets');
+const peopleUtil = require('people/people_util');
 const Data = require('network/network_data');
 
 const ConfirmRemove = () => {
@@ -118,6 +119,70 @@ const SearchBar = () => {
   };
 };
 
+// Own Profile Header - shows current user info
+const OwnProfileHeader = () => {
+  let ownDetails = null;
+  let ownAvatar = null;
+
+  return {
+    oninit: () => {
+      rs.rsJsonApiRequest('/rsAccounts/getCurrentAccountId', {}, (res) => {
+        if (res.body.retval) {
+          const sslId = res.body.id;
+          rs.rsJsonApiRequest('/rsPeers/getPeerDetails', { sslId }, (data) => {
+            if (data.retval) {
+              ownDetails = data.det;
+              if (data.det.mAvatar && data.det.mAvatar.mData && data.det.mAvatar.mData.base64) {
+                ownAvatar = data.det.mAvatar;
+              }
+              m.redraw();
+            }
+          });
+        }
+      });
+    },
+    view: () => {
+      if (!ownDetails) {
+        return m('.own-profile-header', m('p', 'Loading profile...'));
+      }
+      const isOnline = true; // Own node is always online
+      return m('.own-profile-header', [
+        m('.own-profile-avatar', [
+          m(peopleUtil.UserAvatar, {
+            avatar: ownAvatar,
+            firstLetter: ownDetails.name ? ownDetails.name[0].toUpperCase() : '?',
+          }),
+        ]),
+        m('.own-profile-info', [
+          m('p.own-profile-name', ownDetails.name || 'Unknown'),
+          m('p.own-profile-status', [
+            m('i.fas', { class: isOnline ? 'fa-circle online-indicator' : 'fa-circle' }),
+            isOnline ? ' Online' : ' Offline',
+          ]),
+          m('p.own-profile-id', [
+            'ID: ',
+            m('span.id-short', ownDetails.id ? ownDetails.id.substring(0, 12) + '...' : 'N/A'),
+            m('button.copy-btn', {
+              title: 'Copy full ID',
+              onclick: () => {
+                if (ownDetails.id) {
+                  navigator.clipboard.writeText(ownDetails.id).then(() => {
+                    const btn = document.querySelector('.own-profile-id .copy-btn');
+                    if (btn) {
+                      btn.textContent = 'Copied!';
+                      setTimeout(() => (btn.textContent = 'Copy'), 1500);
+                    }
+                  });
+                }
+              },
+            }, 'Copy'),
+          ]),
+        ]),
+      ]);
+    },
+  };
+};
+
 const FriendsList = () => {
   return {
     oninit: () => {
@@ -142,8 +207,14 @@ const FriendsList = () => {
 
 const Layout = () => {
   return {
-    view: () => m('.node-panel', m(FriendsList)),
+    view: () =>
+      m('.network-layout', [
+        m('.network-sidebar', [
+          m(OwnProfileHeader),
+          m(FriendsList),
+        ]),
+      ]),
   };
 };
 
-module.exports = Layout;
+module.exports = Layout;

webui-src/app/people/people.js

@@ -4,15 +4,36 @@ const rs = require('rswebui');
 const peopleUtil = require('people/people_util');
 
 const AllContacts = () => {
+  let viewMode = localStorage.getItem('peopleViewMode') || 'list';
   const list = peopleUtil.sortUsers(rs.userList.users);
   return {
     view: () => {
       return m('.widget', [
         m('.widget__heading', [
           m('h3', 'Contacts', m('span.counter', list.length)),
           m(peopleUtil.SearchBar),
+          m('.view-toggle', [
+            m('button', {
+              class: viewMode === 'list' ? 'active' : '',
+              onclick: () => {
+                viewMode = 'list';
+                localStorage.setItem('peopleViewMode', 'list');
+                m.redraw();
+              },
+            }, m('i.fas.fa-list')),
+            m('button', {
+              class: viewMode === 'grid' ? 'active' : '',
+              onclick: () => {
+                viewMode = 'grid';
+                localStorage.setItem('peopleViewMode', 'grid');
+                m.redraw();
+              },
+            }, m('i.fas.fa-th-large')),
+          ]),
         ]),
-        m('.widget__body', [list.map((id) => m(peopleUtil.regularcontactInfo, { id }))]),
+        m('.widget__body', {
+          class: viewMode === 'grid' ? 'grid-view' : 'list-view',
+        }, [list.map((id) => m(peopleUtil.regularcontactInfo, { id, viewMode }))]),
       ]);
     },
   };

webui-src/app/people/people_util.js

@@ -107,21 +107,26 @@ const regularcontactInfo = () => {
           details = data.details;
         }
       ),
-    view: (v) =>
-      m(
-        '.identity',
+    view: (v) => {
+      const viewMode = v.attrs.viewMode || 'list';
+      const isGrid = viewMode === 'grid';
+      return m(
+        '.identity.' + viewMode,
         {
           key: details.mId,
           style: 'display:' + (v.attrs.id.isSearched ? 'block' : 'none'),
         },
         [
-          m('h4', details.mNickname),
-          details.mNickname &&
-          m(UserAvatar, {
-            avatar: details.mAvatar,
-            firstLetter: details.mNickname.slice(0, 1).toUpperCase(),
-          }),
-          m('.details', [
+          m('.identity-avatar',
+            details.mNickname &&
+            m(UserAvatar, {
+              avatar: details.mAvatar,
+              firstLetter: details.mNickname.slice(0, 1).toUpperCase(),
+            })
+          ),
+          isGrid ? null : m('h4', details.mNickname),
+          isGrid ? m('p.identity-name', details.mNickname) : null,
+          !isGrid && m('.details', [
             m('p', 'ID:'),
             m('p', details.mId),
             m('p', 'Type:'),
@@ -143,19 +148,22 @@ const regularcontactInfo = () => {
                 : 'undefiend'
             ),
           ]),
-          m(
-            'button',
-            {
-              onclick: () =>
-                m.route.set('/chat/:userid/createdistantchat', {
-                  userid: v.attrs.id.mGroupId,
-                }),
-            },
-            'Chat'
-          ),
-          m('button.red', {}, 'Mail'),
+          m('.identity-actions', [
+            m(
+              'button',
+              {
+                onclick: () =>
+                  m.route.set('/chat/:userid/createdistantchat', {
+                    userid: v.attrs.id.mGroupId,
+                  }),
+              },
+              m('i.fas.fa-comment')
+            ),
+            m('button.red', {}, m('i.fas.fa-envelope')),
+          ]),
         ]
-      ),
+      );
+    },
   };
 };