feat(mail,main): inbox compose + view toggle, navbar persist (#69)

AGENTS.md

@@ -0,0 +1,45 @@
+# bump 1777865706
+# bump 1777865794
+# bump 1777867276
+# bump 1777910594
+# bump 1777953678
+# bump 1777996876
+# bump 1778040079
+# bump 1778083286
+# bump 1778126480
+# bump 1778169677
+# bump 1778212872
+# bump 1778256066
+# bump 1778299262
+# bump 1778342463
+# bump 1778385663
+# bump 1778428863
+# bump 1778472063
+# bump 1778515270
+# bump 1778558449
+# bump 1778601655
+# bump 1778644848
+# bump 1778688053
+# bump 1778731252
+# bump 1778774452
+# bump 1778817652
+# bump 1778860853
+# bump 1778904049
+# bump 1778947251
+# bump 1778990452
+# bump 1779033647
+# bump 1779076849
+# bump 1779120055
+# bump 1779163251
+# bump 1779206453
+# bump 1779249653
+# bump 1779292854
+# bump 1779336048
+# bump 1779379256
+# bump 1779422452
+# bump 1779465652
+# bump 1779508847
+# bump 1779552049
+# bump 1779595249
+# bump 1779638449
+# bump 1779681649

webui-src/app/mail/mail_inbox.js

@@ -1,11 +1,56 @@
 const m = require('mithril');
+const rs = require('rswebui');
 const util = require('mail/mail_util');
 
 const Layout = () => {
+  let viewMode = localStorage.getItem('mailViewMode') || 'side';
   return {
     view: (v) => [
-      m('.widget__heading', m('h3', 'Inbox')),
-      m('.widget__body', [
+      m('.widget__heading', [
+        m('h3', 'Inbox'),
+        m('.mail-actions', [
+          m('button', {
+            title: 'Compose new mail',
+            onclick: () => m.route.set('/mail/compose'),
+          }, m('i.fas.fa-edit')),
+          m('button', {
+            title: 'Mark all as read',
+            onclick: () => {
+              v.attrs.list.forEach((msg) => {
+                const flag = msg.msgflags & 0xf0;
+                if (flag === 0x10 || flag === 0x20) { // RS_MSG_NEW or RS_MSG_UNREAD_BY_USER
+                  rs.rsJsonApiRequest('/rsMail/MessageToTrash', { msgId: msg.msgId, bTrash: false });
+                }
+              });
+              m.redraw();
+            },
+          }, m('i.fas.fa-envelope-open')),
+        ]),
+        m('.mail-view-toggle', [
+          m('span', 'View:'),
+          m('button', {
+            class: viewMode === 'side' ? 'active' : '',
+            onclick: () => {
+              viewMode = 'side';
+              localStorage.setItem('mailViewMode', 'side');
+              m.redraw();
+            },
+            title: 'Side by side',
+          }, m('i.fas.fa-columns')),
+          m('button', {
+            class: viewMode === 'below' ? 'active' : '',
+            onclick: () => {
+              viewMode = 'below';
+              localStorage.setItem('mailViewMode', 'below');
+              m.redraw();
+            },
+            title: 'Below',
+          }, m('i.fas.fa-list')),
+        ]),
+      ]),
+      m('.widget__body', {
+        class: 'mail-layout-' + viewMode,
+      }, [
         m(
           util.Table,
           m(

webui-src/app/mail/mail_util.js

@@ -106,10 +106,15 @@ const MessageSummary = () => {
           ),
           files && m('td', files.length),
           m('td', details.title),
-          m(
-            'td',
-            fromUserInfo && Number(fromUserInfo.mId) !== 0 ? fromUserInfo.mNickname : '[Unknown]'
-          ),
+          m('td', {
+            style: 'display:flex;align-items:center;gap:.5rem',
+          }, [
+            m(peopleUtil.UserAvatar, {
+              avatar: fromUserInfo?.mAvatar,
+              firstLetter: fromUserInfo?.mNickname ? fromUserInfo.mNickname[0].toUpperCase() : '',
+            }),
+            m('span', fromUserInfo && Number(fromUserInfo.mId) !== 0 ? fromUserInfo.mNickname : '[Unknown]'),
+          ]),
           m('td', new Date(details.ts * 1000).toLocaleString()),
         ]
       ),

webui-src/app/main.js

@@ -27,7 +27,7 @@ const navIcon = {
 };
 
 const navbar = () => {
-  let isCollapsed = true;
+  let isCollapsed = localStorage.getItem('navCollapsed') === 'true';
   return {
     view: (vnode) =>
       m(
@@ -99,7 +99,10 @@ const navbar = () => {
             m(
               'button.toggle-nav',
               {
-                onclick: () => (isCollapsed = !isCollapsed),
+                onclick: () => {
+                  isCollapsed = !isCollapsed;
+                  localStorage.setItem('navCollapsed', isCollapsed);
+                },
               },
               m('i.fas.fa-angle-double-left')
             ),