feat(remote): enhance menu headers with icons, sort main menu and new updates icon

Author: KristjanESPERANTO

img/main_screenshot.png

@@ -76,6 +76,10 @@ body {
   box-sizing: border-box;
 }
 
+.header-icon {
+  display: none;
+}
+
 .header-title {
   flex: 1;
   text-align: center;
@@ -85,6 +89,37 @@ body {
   text-overflow: ellipsis;
 }
 
+.header-title::before {
+  font-family: FontAwesome, sans-serif;
+  margin-right: 0.5em;
+  opacity: 0.9;
+}
+
+.header-title.icon-power::before {
+  content: "\f011";
+}
+.header-title.icon-edit::before {
+  content: "\f26c";
+}
+.header-title.icon-settings::before {
+  content: "\f0ad";
+}
+.header-title.icon-classes::before {
+  content: "\f247";
+}
+.header-title.icon-update::before {
+  content: "\f019";
+}
+.header-title.icon-alert::before {
+  content: "\f003";
+}
+.header-title.icon-links::before {
+  content: "\f0c1";
+}
+.header-title.icon-add::before {
+  content: "\f067";
+}
+
 .header-spacer {
   width: var(--touch-target);
   flex-shrink: 0;
@@ -1126,6 +1161,7 @@ pre {
   .module-description {
     font-size: 0.8em;
     -webkit-line-clamp: 3;
+    line-clamp: 3;
   }
 
   .module-info {

remote.css

@@ -77,7 +77,7 @@
               <span class="fa fa-fw fa-angle-right" aria-hidden="true"></span>
             </div>
             <div id="update-button" class="button" role="button" tabindex="0">
-              <span class="fa fa-fw fa-toggle-up" aria-hidden="true"></span>
+              <span class="fa fa-fw fa-download" aria-hidden="true"></span>
               <span class="text">%%TRANSLATE:UPDATE_MENU_NAME%%</span>
               <span class="fa fa-fw fa-angle-right" aria-hidden="true"></span>
             </div>
@@ -86,6 +86,11 @@
               <span class="text">%%TRANSLATE:ALERT_MENU_NAME%%</span>
               <span class="fa fa-fw fa-angle-right" aria-hidden="true"></span>
             </div>
+            <div id="links-button" class="button" role="button" tabindex="0">
+              <span class="fa fa-fw fa-link" aria-hidden="true"></span>
+              <span class="text">%%TRANSLATE:LINKS%%</span>
+              <span class="fa fa-fw fa-angle-right" aria-hidden="true"></span>
+            </div>
             <div
               id="mirror-link-button"
               class="button"
@@ -95,10 +100,6 @@
               <span class="fa fa-fw fa-external-link" aria-hidden="true"></span>
               <span class="text">%%TRANSLATE:VIEW_MIRROR%%</span>
             </div>
-            <div id="links-button" class="button" role="button" tabindex="0">
-              <span class="fa fa-fw fa-link" aria-hidden="true"></span>
-              <span class="text">%%TRANSLATE:LINKS%%</span>
-            </div>
           </nav>
           <!-- Power menu navigation -->
           <nav class="menu-nav menu-element hidden power-menu">

remote.html

@@ -425,11 +425,27 @@ const Remote = {
       "add-module-menu": "ADD_MODULE",
       "update-menu": "UPDATE_MENU_NAME",
       "alert-menu": "ALERT_MENU_NAME",
-      "links-menu": "LINKS"
+      "links-menu": "LINKS",
+      "classes-menu": "CLASSES_MENU_NAME"
     };
     return menuTitleMap[menuName];
   },
 
+  getMenuIcon (menuName) {
+    const menuIconMap = {
+      "main-menu": null,
+      "power-menu": "fa-power-off",
+      "edit-menu": "fa-television",
+      "settings-menu": "fa-wrench",
+      "add-module-menu": "fa-plus",
+      "update-menu": "fa-toggle-up",
+      "alert-menu": "fa-envelope-o",
+      "links-menu": "fa-link",
+      "classes-menu": "fa-object-group"
+    };
+    return menuIconMap[menuName];
+  },
+
   updateHeaderTitle (menuName) {
     try {
       const headerTitleElement = document.querySelector(".header .header-title");
@@ -451,6 +467,27 @@ const Remote = {
       if (titleText) {
         headerTitleElement.textContent = titleText;
       }
+
+      // Update header icon via CSS class
+      const iconClassMap = {
+        "power-menu": "icon-power",
+        "edit-menu": "icon-edit",
+        "settings-menu": "icon-settings",
+        "classes-menu": "icon-classes",
+        "update-menu": "icon-update",
+        "alert-menu": "icon-alert",
+        "links-menu": "icon-links",
+        "add-module-menu": "icon-add"
+      };
+
+      // Remove all icon classes
+      headerTitleElement.classList.remove("icon-power", "icon-edit", "icon-settings", "icon-classes", "icon-update", "icon-alert", "icon-links", "icon-add");
+
+      // Add icon class for current menu
+      const iconCssClass = iconClassMap[key];
+      if (iconCssClass) {
+        headerTitleElement.classList.add(iconCssClass);
+      }
     } catch (error) {
       console.warn("Failed to update header title:", error);
     }