Optimized context menu design

src/web/SystemAO/file_system/file_explorer.css

@@ -1039,9 +1039,15 @@ body.fmResizing *{
     background-color: var(--contextmenu_hover);
 }
 
+/* Label expands to fill the row so the trailing element is always right-aligned */
+.contextmenu .item > span:not(.description){
+    flex-grow: 1;
+}
+
 /*
-    The rows carry semantic-ui font icons. Their default em based width and
-    right margin fight the flex gap, so pin them to a fixed box instead.
+    The rows carry semantic-ui font icons. Pin to a fixed box and push to the
+    trailing edge with margin-left: auto.  Items that carry a .description
+    (Copy / Paste / Cut) hide their icon — the hotkey text is the indicator.
 
     The colour needs !important: ao.css styles every <i> and <span> under a
     themed body with a blanket rule whose :not() chain scores higher than any
@@ -1052,17 +1058,21 @@ body.fmResizing *{
     width: 16px;
     min-width: 16px;
     height: auto;
-    margin: 0px;
+    margin-left: auto;
     font-size: 14px;
     text-align: center;
     color: var(--fs-icon) !important;
-    opacity: 1;
+    opacity: 0.6;
+}
+
+/* Items that already show a hotkey — no icon needed */
+.contextmenu .item.hasHotkey > i.icon {
+    display: none;
 }
 
 /* Keyboard hint, pushed to the trailing edge */
 .contextmenu .description{
     margin-left: auto;
-    padding-left: 18px;
     color: var(--fs-text-faint) !important;
     font-size: 12px;
 }

src/web/SystemAO/file_system/file_explorer.html

@@ -429,91 +429,88 @@
         <!-- Context Menu -->
         <div id="contextmenu" class="contextmenu" style="min-width:250px;">
             <div class="item" onclick="openViaButton();">
-                <i class="folder open icon"></i> <span locale="contextmenu/open">Open</span>
+                <span locale="contextmenu/open">Open</span>
             </div>
             <div class="item fileonly" onclick="openWith();">
-                <i class="external icon"></i> <span locale="contextmenu/openWith">Open With</span>
+                <span locale="contextmenu/openWith">Open With</span> <i class="external icon"></i>
             </div>
             <div class="item folderonly" onclick="openSelectedFolderInNewWindow();">
-                <i class="external icon"></i> <span locale="contextmenu/openNewWindow">Open In New Window</span>
+                <span locale="contextmenu/openNewWindow">Open In New Window</span> <i class="external icon"></i>
             </div>
             <!-- This is the vroot alternative new windows-->
             <div class="item vrootonly" onclick="openSelectedVroot();">
-                <i class="external icon"></i> <span locale="contextmenu/openNewWindowVroot">Open In New Window</span>
+                <span locale="contextmenu/openNewWindowVroot">Open In New Window</span> <i class="external icon"></i>
             </div>
             <div class="item shareonly" onclick="openFileLocation();">
-                <i class="folder outline icon"></i> <span locale="contextmenu/openFileLocation">Open File Location</span>
+                <span locale="contextmenu/openFileLocation">Open File Location</span> <i class="folder outline icon"></i>
             </div>
             <div class="item singleObjectOnlyHide" onclick="shareFile();">
-                <i class="share alternate icon"></i> <span locale="contextmenu/Share">Share</span>
+                <span locale="contextmenu/Share">Share</span> <i class="share alternate icon"></i>
             </div>
             <div class="item mobileonly" onclick="toggleCtrl();">
-                <i class="mouse pointer icon"></i> <span locale="contextmenu/MuitSelect">Multi-select</span>
+                <span locale="contextmenu/MuitSelect">Multi-select</span> <i class="mouse pointer icon"></i>
             </div>
-            <div class="item" onclick="copy();">
-                <i class="copy icon"></i> <span locale="contextmenu/copy">Copy</span>
-                <span class="description">Ctrl + C</span>
+            <div class="item hasHotkey" onclick="copy();">
+                <span locale="contextmenu/copy">Copy</span> <span class="description">Ctrl + C</span>
             </div>
-            <div class="item allowNoSelection" onclick="paste();">
-                <i class="paste icon"></i> <span locale="contextmenu/paste">Paste</span>
-                <span class="description">Ctrl + V</span>
+            <div class="item allowNoSelection hasHotkey" onclick="paste();">
+                <span locale="contextmenu/paste">Paste</span> <span class="description">Ctrl + V</span>
             </div>
-            <div class="item" onclick="cut();">
-                <i class="cut icon"></i> <span locale="contextmenu/cut">Cut</span>
-                <span class="description">Ctrl + X</span>
+            <div class="item hasHotkey" onclick="cut();">
+                <span locale="contextmenu/cut">Cut</span> <span class="description">Ctrl + X</span>
             </div>
             <div class="divider vroothide noSelectionOnly"></div>
             <div class="item noSelectionOnly" onclick="newfile();">
-                <i class="file outline icon"></i>  <span locale="contextmenu/newFile">New File</span>
+                <span locale="contextmenu/newFile">New File</span> <i class="file outline icon"></i>
             </div>
             <div class="item noSelectionOnly" onclick="newFolder();">
-                <i class="folder outline icon"></i> <span locale="contextmenu/newFolder">New Folder</span>
+                <span locale="contextmenu/newFolder">New Folder</span> <i class="folder outline icon"></i>
             </div>
             <div class="divider vroothide"></div>
             <div class="item noSelectionOnly" onclick="upload();">
-                <i class="upload icon"></i>  <span locale="contextmenu/upload">Upload</span>
+                <span locale="contextmenu/upload">Upload</span> <i class="upload icon"></i>
             </div>
             <div class="item" onclick="zipFile();">
-                <i class="zip file icon"></i> <span locale="contextmenu/zip">Create Zip</span>
+                <span locale="contextmenu/zip">Create Zip</span>
             </div>
             <div class="item zipFileOnly" onclick="unzipHere();">
-                <i class="inbox icon"></i> <span locale="contextmenu/unzip">Unzip Here</span>
+                <span locale="contextmenu/unzip">Unzip Here</span> <i class="inbox icon"></i>
             </div>
             <div class="item" onclick="rename();">
-                <i class="i cursor icon"></i> <span locale="contextmenu/rename">Rename</span>
+                <span locale="contextmenu/rename">Rename</span>
             </div>
             <div class="item" onclick="deleteFile();">
-                <i class="trash icon"></i> <span locale="contextmenu/delete">Delete</span>
+                <span locale="contextmenu/delete">Delete</span> <i class="trash icon"></i>
             </div>
             <div class="item folderonly singleObjectOnlyHide" onclick="createDesktopShortcut();">
-                <i class="external square icon"></i> <span locale="opr/shortcut/title">Create Shortcut on Desktop</span>
+                <span locale="opr/shortcut/title">Create Shortcut on Desktop</span> <i class="external square icon"></i>
             </div>
             <div class="divider vroothide"></div>
             <div class="item noSelectionOnly" onclick="refreshList();">
-                <i class="refresh icon"></i> <span locale="contextmenu/refresh">Refresh</span>
+                <span locale="contextmenu/refresh">Refresh</span> <i class="refresh icon"></i>
             </div>
             <div class="item" onclick="downloadFile();">
-                <i class="download icon"></i> <span locale="contextmenu/download">Download</span>
+                <span locale="contextmenu/download">Download</span> <i class="download icon"></i>
             </div>
             <div class="item" onclick="showFileProperties();">
-                <i class="info circle icon"></i> <span locale="contextmenu/properties">Properties</span>
+                <span locale="contextmenu/properties">Properties</span>
             </div>
             <!-- This properties shows the currentDirectory properties instead of the selected file properties-->
             <div class="item noSelectionOnly" onclick="showCurrentDirectoryProperties();">
-                <i class="ui info circle icon"></i> <span locale="contextmenu/properties">Properties</span>
+                <span locale="contextmenu/properties">Properties</span>
             </div>
             <div class="item vrootonly" onclick="showSharesManager();">
-                <i class="share alternate icon"></i> <span locale="contextmenu/sharemanager">Open Shares Manager</span>
+                <span locale="contextmenu/sharemanager">Open Shares Manager</span> <i class="share alternate icon"></i>
             </div>
             <!-- This properties show the vroot properties -->
             <div class="item specialviewonly" onclick="createSpecialViewShortcut();">
-                <i class="external icon"></i> <span locale="opr/shortcut/create">Create Desktop Shortcut</span>
+                <span locale="opr/shortcut/create">Create Desktop Shortcut</span> <i class="external icon"></i>
             </div>
             <div class="item vrootonly" onclick="createVrootShortcut();">
-                <i class="external icon"></i> <span locale="opr/shortcut/create">Create Desktop Shortcut</span>
+                <span locale="opr/shortcut/create">Create Desktop Shortcut</span> <i class="external icon"></i>
             </div>
             <div class="item vrootonly" onclick="showVrootProperties();">
-                <i class="ui info circle icon"></i> <span locale="contextmenu/properties">Properties</span>
+                <span locale="contextmenu/properties">Properties</span>
             </div>
         </div>