Improve menu groups (#475)

* chore(menu): improve menu groups

* chore(menu): fix mesh wide upgrade path

* chore(menu): delete commented

Author: selankon

plugins/lime-plugin-firmware/src/upgradeAvailable.js

@@ -22,7 +22,7 @@ export const UpgradeAvailableBanner = () => {
         // @ts-ignore
         <Match>
             {({ path }) =>
-                !["firmware", "releaseInfo", "meshwideupgrade"].includes(
+                !["firmware", "releaseInfo", "meshwide/upgrade"].includes(
                     path.replace("/", "")
                 ) && (
                     <div

plugins/lime-plugin-mesh-wide-config/index.ts

@@ -1,8 +1,11 @@
+import { MeshConfigMenu } from "plugins/lime-plugin-mesh-wide-config/src/meshConfigMenu";
+
 import MeshConfigPage from "./src/meshConfigPage";
 
 export default {
     name: "meshwide/config",
     page: MeshConfigPage,
+    menu: MeshConfigMenu,
     isCommunityProtected: true,
-    additionalRoutes: [["/meshwide/config", MeshConfigPage]],
+    menuGroup: "meshwide",
 } as LimePlugin;

plugins/lime-plugin-mesh-wide-config/src/meshConfigMenu.tsx

@@ -0,0 +1,12 @@
+import { Trans } from "@lingui/macro";
+
+import { AdjustVertical } from "components/icons/teenny/adjust";
+
+export const MeshConfigMenu = () => (
+    <span>
+        <AdjustVertical />
+        <a href={"#/meshwide/config"}>
+            <Trans>Mesh Wide Config</Trans>
+        </a>
+    </span>
+);

plugins/lime-plugin-mesh-wide-upgrade/index.ts

@@ -2,8 +2,9 @@ import { MeshUpgradeMenu } from "plugins/lime-plugin-mesh-wide-upgrade/src/meshU
 import MeshUpgradePage from "plugins/lime-plugin-mesh-wide-upgrade/src/meshUpgradePage";
 
 export default {
-    name: "MeshWideUpgrade",
+    name: "meshwide/upgrade",
     page: MeshUpgradePage,
     menu: MeshUpgradeMenu,
     isCommunityProtected: true,
+    menuGroup: "meshwide",
 } as LimePlugin;

plugins/lime-plugin-mesh-wide-upgrade/src/meshUpgradeMenu.tsx

@@ -5,7 +5,7 @@ import { GlobeAmericasIcon } from "components/icons/teenny/globe";
 export const MeshUpgradeMenu = () => (
     <span>
         <GlobeAmericasIcon />
-        <a href={"#/meshwideupgrade"}>
+        <a href={"#/meshwide/upgrade"}>
             <Trans>Mesh Wide Upgrade</Trans>
         </a>
     </span>

plugins/lime-plugin-mesh-wide/index.ts

@@ -5,4 +5,5 @@ export default {
     name: "MeshWide",
     page: MeshWidePage,
     menu: MeshWideMenu,
+    menuGroup: "meshwide",
 } as LimePlugin;

src/components/icons/teenny/adjust.jsx

@@ -0,0 +1,14 @@
+export const AdjustVertical = () => (
+    <svg
+        viewBox="0 0 15 15"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        width="15"
+        height="15"
+    >
+        <path
+            d="M7.5 12.5V15m5-15v2.5M2.5 0v6.5m0 2V15m5-4.5V0m5 4.5V15m-2-10.5h4v-2h-4v2zm-5 8h4v-2h-4v2zm-5-4h4v-2h-4v2z"
+            stroke="currentColor"
+        />
+    </svg>
+);

src/config.ts

@@ -29,6 +29,6 @@ export const plugins: LimePlugin[] = [
     ChangeNode,
     RemoteSupport,
     Pirania,
+    MeshConfigPage,
     Fbw, // does not have menu item
-    MeshConfigPage, // does not have menu item
 ];

src/containers/Menu/menu.js

@@ -1,18 +1,18 @@
-import { Trans } from "@lingui/macro";
-import { useState } from "preact/hooks";
-
 import { plugins } from "../../config";
 import style from "./style.less";
 
 export const Menu = ({ opened, toggle }) => {
-    const [currentView, setCurrentView] = useState("node");
-    const hasCommunityPlugins = () =>
-        plugins.filter((p) => p.menuView && p.menuView === "community").length >
-        0;
-    function changeCurrentView(e) {
-        e.preventDefault();
-        setCurrentView(currentView === "node" ? "community" : "node");
-    }
+    // Group plugins by menuGroup
+    const groupedPlugins = plugins
+        .filter((plugin) => plugin.page && plugin.menu) // Only include plugins with both `page` and `menu`
+        .reduce((groups, plugin) => {
+            const group = plugin.menuGroup || "default"; // Use "default" for plugins without a menuGroup
+            if (!groups[group]) {
+                groups[group] = [];
+            }
+            groups[group].push(plugin.menu);
+            return groups;
+        }, {});
 
     return (
         <div
@@ -21,38 +21,15 @@ export const Menu = ({ opened, toggle }) => {
             } d-flex flex-column`}
         >
             <nav className={style.menuItemsWrapper} onClick={toggle}>
-                {plugins
-                    .map((plugin) => ({
-                        ...plugin,
-                        menuView: plugin.menuView || "node",
-                    }))
-                    .filter(
-                        (plugin) =>
-                            plugin.page &&
-                            plugin.menu &&
-                            plugin.menuView === currentView
-                    )
-                    .map((plugin) => plugin.menu)
-                    .map((Component, index) => (
-                        <Component key={index} />
-                    ))}
+                {Object.entries(groupedPlugins).map(([group, components]) => (
+                    <div key={group} className={style.menuGroup}>
+                        {group !== "default" && <hr />}
+                        {components.map((Component, index) => (
+                            <Component key={index} />
+                        ))}
+                    </div>
+                ))}
             </nav>
-            {hasCommunityPlugins() && (
-                <nav className={style.viewSwitchWrapper}>
-                    <a
-                        href="#0"
-                        className={style.viewSwitch}
-                        onClick={changeCurrentView}
-                    >
-                        {currentView === "node" && (
-                            <Trans>Go to Community View</Trans>
-                        )}
-                        {currentView === "community" && (
-                            <Trans>Go to Node View</Trans>
-                        )}
-                    </a>
-                </nav>
-            )}
         </div>
     );
 };

src/types.d.ts

@@ -12,15 +12,8 @@ interface LimePlugin {
     name: string;
     page: typeof JSX.Element;
     menu: typeof JSX.Element;
-    menuView?: string;
     isCommunityProtected?: boolean;
     additionalRoutes?: LimeRoutes[];
     additionalProtectedRoutes?: LimeRoutes[];
-    store?: {
-        name: string;
-        epics?: any; // FIXME
-        reducer?: any; // FIXME
-        selector?: any; // FIXME
-        constants?: any; // FIXME
-    };
+    menuGroup?: string;
 }