Add default contextual menu for connected users

static/css/contextual.css

+/* Main context menu outer */
+.contextualMenu{
+    font-size: 13px;
+    position: absolute;
+    padding: 8px 0;
+    background: var(--contextualMenuBg);
+    box-shadow: var(--contextualMenuShadow);
+    border-radius: var(--contextualMenuRadius);
+    margin:0;
+    list-style: none;
+    color: var(--contextualMenuText);
+}
+
+/* Menu seperator item */
+.contextualMenuSeperator{
+    display: block;
+    position: relative;
+    padding: 5px 5px;
+}
+    .contextualMenuSeperator span{
+        display: block;
+        width:100%;
+        height:1px;
+        background: var(--contextualSeperator);
+    }
+
+/* Default menu item */
+.contextualMenuItemOuter {
+    position: relative;
+}
+.contextualMenuItem{
+    display: block;
+    padding: 5px 8px;
+    cursor: default;
+}
+    .contextualMenuItem:hover{
+        background: var(--contextualHover);
+    }
+    .contextualMenuItemIcon{
+        float: left;
+        width:16px;
+        height: 16px;
+    }
+    .contextualMenuItemTitle{
+        text-align: left;
+        line-height: 16px;
+        display: inline-block;
+        padding: 0px 0px 0px 7px;
+    }
+    .contextualMenuItemTip{
+        float: right;
+        padding: 0px 0px 0px 50px;
+        text-align: right;
+        line-height: 16px;
+    }
+    .contextualMenuItemOverflow{
+        float: right;
+        width:16px;
+        height: 16px;
+        padding: 1px 0px 0px 7px;
+    }
+
+        .contextualMenuItemOverflow .contextualMenuItemOverflowLine{
+            display: block;
+            height: 1px;
+            margin: 3px 2px;
+            background: var(--contextualOverflowIcon);
+        }
+        .contextualMenuItemOverflow.hidden{
+            display: none;
+        }
+        
+    .contextualMenuItem.disabled{
+        opacity: 0.4;
+    }
+    .contextualMenuItem.disabled:hover{
+        background: none;
+    }
+
+/* Submenu item */ 
+.contextualSubMenu{
+    padding: 0;
+    margin: 0;
+    background: var(--contextualSubMenuBg);
+    border-radius: var(--contextualMenuRadius);
+    width: 100%;
+    height: auto;
+    max-height: 1000px;
+    transition: max-height 0.5s;
+    overflow: hidden;
+}
+    .contextualSubMenu .contextualMenuItem:hover{
+        background: var(--contextualHover);
+    }
+
+.contextualMenuHidden{
+    max-height: 0;
+}
+
+/* Multi item button */
+.contextualMultiItem{
+    display: flex;
+    position: relative;
+}
+    .contextualMultiItem .contextualMenuItemOuter{
+        flex: auto;
+        display: inline-block;
+    }
+
+/* Hover menu */
+.contextualHoverMenuOuter{
+    position: relative;
+}
+.contextualHoverMenuItem{
+    display: block;
+    padding: 5px 8px;
+    cursor: default;
+}
+.contextualHoverMenuItem.disabled{
+    opacity: 0.4;
+}
+.contextualHoverMenuItem.disabled:hover{
+    background: none;
+}
+.contextualHoverMenuItem:hover{
+    background: var(--contextualHover);
+}
+
+.contextualHoverMenuOuter > .contextualHoverMenu{
+    display: none;
+}
+.contextualHoverMenuOuter:hover > .contextualHoverMenu{
+    display: block;
+    position: absolute;
+    left: 100%;
+    top: 0;
+    background: var(--contextualMenuBg);
+    box-shadow: var(--contextualMenuShadow);
+    border-radius: var(--contextualMenuRadius);
+    padding: 8px 0;
+    width: 100%;
+    z-index: 1000;
+    list-style: none;
+}
\ No newline at end of file

static/galene.css

+:root{
+    --contextualMenuBg: rgb(255 255 255);
+    --contextualMenuShadow: 1px 1px 5px #a4a4a4;
+    --contextualMenuRadius: 0;
+    --contextualMenuText: #687281;
+    --contextualSubMenuBg: rgb(255 255 255);
+    --contextualHover: #e1e1e1;
+    --contextualOverflowIcon: #999;
+    --contextualSeperator: #d0d3d3;
+}
+
+.contextualMenu {
+    font-size: .9em;
+    padding: 5px 0;
+}
+
 .nav-fixed .topnav {
     z-index: 1039;
 }
@@ -1158,7 +1174,6 @@ legend {
     transition: all 0.3s;
     background: #ffffff;
     border-right: 1px solid #dcdcdc;
-    z-index: 1039;
 }
 
 #left-sidebar .galene-header {
@@ -1208,7 +1223,6 @@ header .collapse {
     margin: 0;
     height: calc(100% - 84px);
     width: 100%;
-    z-index: 1;
     position: relative;
     display: block;
     background-color: #fff;

static/galene.html

@@ -4,6 +4,7 @@
     <title>Galène</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="ScreenOrientation" content="autoRotate:disabled">
+    <link rel="stylesheet" type="text/css" href="/css/contextual.css">
     <link rel="stylesheet" type="text/css" href="/common.css"/>
     <link rel="stylesheet" type="text/css" href="/galene.css"/>
     <link rel="author" href="https://www.irif.fr/~jch/"/>
@@ -248,6 +249,8 @@
 
     <script src="/protocol.js" defer></script>
     <script src="/scripts/toastify.js" defer></script>
+    <!-- See https://github.com/LucasReade/Contextual.js -->
+    <script src="/scripts/contextual.js" defer></script>
     <script src="/galene.js" defer></script>
   </body>
 </html>

static/galene.js

@@ -1362,6 +1362,38 @@ function stringCompare(a, b) {
     return 0
 }
 
+/**
+ * @param {HTMLElement} user
+ * @param {string} name
+ */
+function setUserContectMenu(user, name) {
+    user.addEventListener('contextmenu', event => {
+        event.preventDefault();
+        /** @ts-ignore */
+        new Contextual({
+            isSticky: false,
+            width: '250px',
+            items: [{
+                label: 'Send private message',
+                onClick: () => {
+                    let input = /** @type{HTMLInputElement} */
+                        (document.getElementById('input'));
+                    input.value = '/msg ' + name + ' ';
+                    input.focus();
+                },
+                enabled: true
+            },
+            {type: 'seperator'},
+            {
+                label: 'Show commands',
+                onClick: () => {
+                    commands.help.f(null, null);
+                }
+            }]
+        });
+    });
+}
+
 /**
  * @param {string} id
  * @param {string} name
@@ -1391,6 +1423,7 @@ function addUser(id, name) {
         }
     }
     div.appendChild(user);
+    setUserContectMenu(user, name);
 }
 
 /**