Fixes for phones

- The Graph shortcut is hidden from the default friend list.
- After selecting a friend, Network Graph remains available in the detail tabs.
- Desktop behavior is unchanged.
- File and picture attachments now share one paperclip button.
- The message field gains more horizontal space on phones.

webui-src/app/chat/chat.js

@@ -296,11 +296,17 @@ const ChatRoomHeader = () => {
 };
 
 const ChatConversationView = () => {
+  let showAttachmentMenu = false;
+
   function onDocClick(e) {
     if (ChatHubState.showEmojiPicker && !e.target.closest('.emoji-picker-wrapper')) {
       ChatHubState.showEmojiPicker = false;
       m.redraw();
     }
+    if (showAttachmentMenu && !e.target.closest('.mobile-chat-attachment')) {
+      showAttachmentMenu = false;
+      m.redraw();
+    }
   }
   return {
     oninit: () => {
@@ -331,7 +337,7 @@ const ChatConversationView = () => {
             '.chat-hub-input-area',
             [
               m(
-                'button.chat-hub-action-btn',
+                'button.chat-hub-action-btn.desktop-chat-attachment',
                 {
                   disabled: !canTalk,
                   style: !canTalk ? 'opacity: 0.5; cursor: not-allowed;' : '',
@@ -343,6 +349,50 @@ const ChatConversationView = () => {
                 },
                 m('i.fas.fa-paperclip')
               ),
+              m('.mobile-chat-attachment', [
+                m('button.chat-hub-action-btn', {
+                  disabled: !canTalk,
+                  style: !canTalk ? 'opacity: 0.5; cursor: not-allowed;' : '',
+                  title: 'Add attachment',
+                  onclick: (e) => {
+                    e.stopPropagation();
+                    showAttachmentMenu = !showAttachmentMenu;
+                    ChatHubState.showEmojiPicker = false;
+                  },
+                }, m('i.fas.fa-paperclip')),
+                showAttachmentMenu && m('.mobile-chat-attachment__menu', [
+                  m('button.mobile-chat-attachment__option', {
+                    type: 'button',
+                    onclick: () => {
+                      showAttachmentMenu = false;
+                      ChatHubState.showAttachModal = true;
+                    },
+                  }, [m('i.fas.fa-file'), ' File']),
+                  m('label.mobile-chat-attachment__option', [
+                    m('i.fas.fa-image'),
+                    ' Picture',
+                    m('input[type=file][accept=image/*]', {
+                      style: 'display: none;',
+                      onchange: (e) => {
+                        if (!e.target.files || !e.target.files[0]) return;
+                        const file = e.target.files[0];
+                        const textarea = e.target.closest('.chat-hub-input-area').querySelector('textarea');
+                        formatChatImage(file, (imgTag) => {
+                          if (imgTag && textarea) {
+                            const start = textarea.selectionStart || 0;
+                            const end = textarea.selectionEnd || 0;
+                            const val = textarea.value;
+                            textarea.value = val.substring(0, start) + imgTag + val.substring(end);
+                            m.redraw();
+                          }
+                        });
+                        showAttachmentMenu = false;
+                        e.target.value = '';
+                      },
+                    }),
+                  ]),
+                ]),
+              ]),
               m('.emoji-picker-wrapper', [
                 m(
                   'button.chat-hub-action-btn',
@@ -359,7 +409,7 @@ const ChatConversationView = () => {
                 ),
                 ChatHubState.showEmojiPicker && m(chatEmoji.EmojiPicker),
               ]),
-              m('label.chat-hub-action-btn', {
+              m('label.chat-hub-action-btn.desktop-chat-attachment', {
                 title: 'Send image',
                 style: `cursor: ${canTalk ? 'pointer' : 'not-allowed'}; opacity: ${canTalk ? 1 : 0.5};`,
               }, [

webui-src/app/main.js

@@ -114,7 +114,7 @@ const navbar = () => {
                       ? 'Connected to RetroShare Core'
                       : 'Connection Lost',
                   }),
-                  m('span.webui-version', { style: { fontSize: '0.7em' } }, 'v141'),
+                  m('span.webui-version', { style: { fontSize: '0.7em' } }, 'v142'),
                   m('i.fas.fa-sync-alt.refresh-icon', {
                     style: { cursor: 'pointer', fontSize: '0.8em' },
                     onclick: () => window.location.reload(true),
@@ -236,7 +236,7 @@ const MobileStatus = () => {
               m('small', statusbar.formatBytes(state.totalOut)),
             ]),
           ]),
-          m('.mobile-status-sheet__version', 'WebUI v141'),
+          m('.mobile-status-sheet__version', 'WebUI v142'),
         ])),
       ];
     },

webui-src/app/network/network_chat_tab.js

@@ -73,7 +73,18 @@ function pollHashStatusForDirectChat(localpath) {
 }
 
 const ChatTab = () => {
+  let showAttachmentMenu = false;
+
+  function onDocClick(e) {
+    if (showAttachmentMenu && !e.target.closest('.mobile-chat-attachment')) {
+      showAttachmentMenu = false;
+      m.redraw();
+    }
+  }
+
   return {
+    oncreate: () => document.addEventListener('click', onDocClick, true),
+    onremove: () => document.removeEventListener('click', onDocClick, true),
     view: () => {
       const gpgId = State.selectedFriendGpgId;
       const friend = Data.gpgDetails[gpgId];
@@ -178,7 +189,7 @@ const ChatTab = () => {
           ownName: State.ownProfile.name || 'You',
         }),
         m('.chat-input-area', { style: 'display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem; background: #ffffff; border-top: 1px solid #cbd5e1;' }, [
-          m('button.chat-hub-action-btn', {
+          m('button.chat-hub-action-btn.desktop-chat-attachment', {
             title: 'Attach file link',
             onclick: () => {
               State.showAttachModal = true;
@@ -189,6 +200,48 @@ const ChatTab = () => {
             }
           }, m('i.fas.fa-paperclip')),
 
+          m('.mobile-chat-attachment', [
+            m('button.chat-hub-action-btn', {
+              title: 'Add attachment',
+              onclick: (e) => {
+                e.stopPropagation();
+                showAttachmentMenu = !showAttachmentMenu;
+                State.showEmojiPicker = false;
+              },
+            }, m('i.fas.fa-paperclip')),
+            showAttachmentMenu && m('.mobile-chat-attachment__menu', [
+              m('button.mobile-chat-attachment__option', {
+                type: 'button',
+                onclick: () => {
+                  showAttachmentMenu = false;
+                  State.showAttachModal = true;
+                  State.attachPath = '';
+                  State.attachBrowseHint = false;
+                  State.hashingError = '';
+                },
+              }, [m('i.fas.fa-file'), ' File']),
+              m('label.mobile-chat-attachment__option', [
+                m('i.fas.fa-image'),
+                ' Picture',
+                m('input[type=file][accept=image/*]', {
+                  style: 'display: none;',
+                  onchange: (e) => {
+                    if (!e.target.files || !e.target.files[0]) return;
+                    const file = e.target.files[0];
+                    formatDirectChatImage(file, (imgTag) => {
+                      if (imgTag) {
+                        State.chatInputMsg = (State.chatInputMsg || '') + imgTag;
+                        m.redraw();
+                      }
+                    });
+                    showAttachmentMenu = false;
+                    e.target.value = '';
+                  },
+                }),
+              ]),
+            ]),
+          ]),
+
           m('.emoji-picker-wrapper', { style: 'position: relative;' }, [
             m('button.chat-hub-action-btn', {
               title: 'Insert emoji',
@@ -206,7 +259,7 @@ const ChatTab = () => {
             }),
           ]),
 
-          m('label.chat-hub-action-btn', {
+          m('label.chat-hub-action-btn.desktop-chat-attachment', {
             title: 'Send image',
             style: 'cursor: pointer;',
           }, [

webui-src/app/scss/pages/_chat.scss

@@ -1225,6 +1225,61 @@ label.chat-hub-action-btn i,
   color: inherit !important;
 }
 
+.mobile-chat-attachment {
+  display: none;
+  position: relative;
+  flex: 0 0 auto;
+}
+
+.mobile-chat-attachment__menu {
+  position: absolute;
+  z-index: 20;
+  bottom: calc(100% + .5rem);
+  left: 0;
+  display: flex;
+  min-width: 9rem;
+  flex-direction: column;
+  padding: .25rem;
+  border: 1px solid #cbd5e1;
+  border-radius: .5rem;
+  background: #fff;
+  box-shadow: 0 8px 24px rgba(15, 23, 42, .18);
+}
+
+button.mobile-chat-attachment__option,
+label.mobile-chat-attachment__option {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  gap: .6rem;
+  padding: .55rem .7rem;
+  border: 0;
+  border-radius: .35rem;
+  background: transparent;
+  box-shadow: none;
+  color: #334155;
+  cursor: pointer;
+  font-size: .9rem;
+  text-align: left;
+}
+
+button.mobile-chat-attachment__option:hover,
+label.mobile-chat-attachment__option:hover {
+  background: #f1f5f9;
+}
+
+@media (max-width: 700px) {
+  .chat-hub-input-area .desktop-chat-attachment,
+  .network-chat-view .chat-input-area .desktop-chat-attachment {
+    display: none !important;
+  }
+
+  .chat-hub-input-area .mobile-chat-attachment,
+  .network-chat-view .chat-input-area .mobile-chat-attachment {
+    display: block;
+  }
+}
+
 /* Compact Room Chat Style (No bubbles, unique nickname colors, IRC-style) */
 .chat-hub-messages.compact-container,
 .messages.compact-container {

webui-src/app/scss/pages/_network.scss

@@ -1019,10 +1019,6 @@
     font-weight: 700;
   }
 
-  .mobile-graph-shortcut {
-    display: inline-flex !important;
-  }
-
   .network-container .network-tabs {
     flex: 0 0 auto;
     overflow-x: auto;