Added option to change your Status in your own status dot

webui-src/app/network/network_friends_list.js

@@ -1,7 +1,13 @@
 const m = require('mithril');
 const Data = require('network/network_data');
 const peopleUtil = require('people/people_util');
-const { State, startDirectChat, getOnlineSslId, setOwnCustomStateString } = require('network/network_state');
+const {
+  State,
+  startDirectChat,
+  getOnlineSslId,
+  setOwnCustomStateString,
+  setOwnStatus,
+} = require('network/network_state');
 
 function formatRelativeTime(ts) {
   if (!ts) return '';
@@ -15,6 +21,7 @@ function formatRelativeTime(ts) {
 
 const OwnProfileCard = () => {
   let isEditing = false;
+  let isPresenceMenuOpen = false;
   let statusInputText = '';
 
   return {
@@ -30,13 +37,39 @@ const OwnProfileCard = () => {
         m('.profile-header', [
           m('.profile-avatar-wrapper', [
             m(peopleUtil.UserAvatar, { avatar, firstLetter, seed: State.ownProfile.name }),
-            m('.status-dot', {
+            m('button.status-dot.profile-status-button', {
+              'aria-label': `Change status. Current status: ${status.label}`,
+              'aria-expanded': String(isPresenceMenuOpen),
               style: { backgroundColor: status.color },
-              title: status.label,
+              title: `Status: ${status.label}. Click to change.`,
+              onclick: () => {
+                isPresenceMenuOpen = !isPresenceMenuOpen;
+              },
             }),
+            isPresenceMenuOpen && m('.profile-presence-menu', [
+              [
+                { value: 3, label: 'Online' },
+                { value: 1, label: 'Away' },
+                { value: 2, label: 'Busy' },
+              ].map((option) => {
+                const optionStatus = Data.getStatusPresentation(option.value, true);
+                return m('button.profile-presence-option', {
+                  class: status.value === option.value ? 'active' : '',
+                  onclick: () => {
+                    setOwnStatus(option.value);
+                    isPresenceMenuOpen = false;
+                  },
+                }, [
+                  m('span', { style: { backgroundColor: optionStatus.color } }),
+                  option.label,
+                  status.value === option.value && m('i.fas.fa-check'),
+                ]);
+              }),
+            ]),
           ]),
           m('.profile-info', [
             m('.profile-name', { title: displayName }, displayName),
+            m('.profile-presence-label', status.label),
             isEditing
               ? m('.profile-custom-status-edit', {
                   style: 'display: flex; align-items: center; gap: 4px; margin-top: 3px;'

webui-src/app/network/network_state.js

@@ -382,10 +382,28 @@ function setOwnCustomStateString(statusString) {
   });
 }
 
+async function setOwnStatus(statusValue) {
+  const value = Number(statusValue);
+  if (![1, 2, 3].includes(value)) return false;
+
+  try {
+    const response = await rs.rsJsonApiRequest('/rsStatus/sendStatus', { status: value });
+    if (response && response.body && response.body.retval === false) return false;
+
+    State.ownProfile.statusValue = value;
+    State.ownProfile.statusTimestamp = Math.floor(Date.now() / 1000);
+    m.redraw();
+    return true;
+  } catch (_) {
+    return false;
+  }
+}
+
 module.exports = {
   State,
   loadOwnProfile,
   setOwnCustomStateString,
+  setOwnStatus,
   loadSelectedOwnGxsDetails,
   fetchIdDetails,
   loadGxsIdentities,

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

@@ -46,6 +46,63 @@
         border: 2px solid #ffffff;
         box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
       }
+
+      .profile-status-button {
+        padding: 0;
+        cursor: pointer;
+        transition: transform 0.15s ease, box-shadow 0.15s ease;
+
+        &:hover,
+        &:focus-visible {
+          transform: scale(1.2);
+          box-shadow: 0 0 0 3px rgba(59, 164, 215, 0.25);
+          outline: none;
+        }
+      }
+
+      .profile-presence-menu {
+        position: absolute;
+        z-index: 20;
+        top: calc(100% + 0.5rem);
+        left: 0;
+        width: 9rem;
+        padding: 0.3rem;
+        background: #ffffff;
+        border: 1px solid #cbd5e1;
+        border-radius: 0.5rem;
+        box-shadow: 0 8px 20px rgba(15, 23, 42, 0.18);
+      }
+
+      .profile-presence-option {
+        display: grid;
+        grid-template-columns: 0.65rem 1fr 0.75rem;
+        align-items: center;
+        width: 100%;
+        margin: 0;
+        padding: 0.45rem 0.55rem;
+        gap: 0.5rem;
+        color: #334155;
+        background: transparent;
+        border: 0;
+        border-radius: 0.35rem;
+        text-align: left;
+
+        &:hover,
+        &.active {
+          background: #f1f5f9;
+        }
+
+        > span {
+          width: 0.55rem;
+          height: 0.55rem;
+          border-radius: 50%;
+        }
+
+        > i {
+          color: #3ba4d7;
+          font-size: 0.7rem;
+        }
+      }
     }
   }
 
@@ -64,6 +121,13 @@
       text-overflow: ellipsis;
     }
 
+    .profile-presence-label {
+      margin-top: 0.2rem;
+      color: #475569;
+      font-size: 0.8rem;
+      font-weight: 600;
+    }
+
     .profile-status {
       font-size: 0.85rem;
       color: #10b981;