Merge pull request #1252 from MarechJ/dev/dont-force-expand-menu-tree

enhance to allow search in menu-tree to expand tree as necessary.

Author: caranci

rcongui/src/components/layout/MenuContent.js

@@ -7,8 +7,8 @@ import Stack from "@mui/material/Stack";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import ExpandLessIcon from "@mui/icons-material/ExpandLess";
 import { Link } from "react-router-dom";
-import { Collapse, TextField, InputAdornment, IconButton } from "@mui/material";
-import {useState} from "react";
+import { Collapse, TextField, InputAdornment, IconButton, Box } from "@mui/material";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { useAppStore } from "@/stores/app-state";
 import SearchIcon from "@mui/icons-material/Search";
 import CloseIcon from "@mui/icons-material/Close";
@@ -25,21 +25,17 @@ const NavigationLink = ({ to, icon, text, onClick }) => {
   );
 };
 
-const Group = ({ groupName, icon, level = 1, children }) => {
-  const [open, setOpen] = useState(true);
-
-  const handleClick = () => {
-    setOpen(!open);
-  };
+const Group = ({ groupName, icon, level = 1, open, forceOpen = false, onToggle, children }) => {
+  const isOpen = forceOpen || open;
 
   return (
     <ListItem key={groupName} disablePadding sx={{ display: "block" }}>
-      <ListItemButton onClick={handleClick}>
+      <ListItemButton onClick={onToggle}>
         {icon && <ListItemIcon>{icon}</ListItemIcon>}
         <ListItemText primary={groupName} />
-        {open ? <ExpandLessIcon /> : <ExpandMoreIcon />}
+        {isOpen ? <ExpandLessIcon /> : <ExpandMoreIcon />}
       </ListItemButton>
-      <Collapse in={open} timeout={"auto"} unmountOnExit>
+      <Collapse in={isOpen} timeout={"auto"} unmountOnExit>
         <List
           dense
           sx={{ "& .MuiListItemButton-root": { pl: 2 * level } }}
@@ -54,7 +50,46 @@ const Group = ({ groupName, icon, level = 1, children }) => {
 
 export default function MenuContent({ navigationTree, isMobile }) {
   const toggleDrawer = useAppStore((state) => state.toggleDrawer);
+  const groupOpenState = useAppStore((state) => state.groupOpenState);
+  const toggleMenuGroupOpen = useAppStore((state) => state.toggleMenuGroupOpen);
   const [searchTerm, setSearchTerm] = useState("");
+  const searchInputRef = useRef(null);
+
+  const isApplePlatform = useMemo(() => {
+    if (typeof navigator === "undefined") return false;
+    const ua = navigator.userAgent || "";
+    const uaPlatform = navigator.userAgentData?.platform || "";
+    return /mac|iphone|ipad|ipod/i.test(uaPlatform) || /Mac OS X|Macintosh|iPhone|iPad|iPod/i.test(ua);
+  }, []);
+
+  const keyHintLabel = isApplePlatform ? "⌘K" : "Ctrl+K";
+
+  useEffect(() => {
+    const onKeyDown = (e) => {
+      const key = (e.key || "").toLowerCase();
+      if (key !== "k") return;
+
+      const comboPressed = isApplePlatform ? e.metaKey : e.ctrlKey;
+      if (!comboPressed) return;
+
+      e.preventDefault();
+      e.stopPropagation();
+
+      const el = searchInputRef.current;
+      if (!el) return;
+      el.focus();
+      if (typeof el.select === "function") el.select();
+    };
+
+    window.addEventListener("keydown", onKeyDown, { capture: true });
+    return () => window.removeEventListener("keydown", onKeyDown, { capture: true });
+  }, [isApplePlatform]);
+
+  const toggleGroup = (groupName) => {
+    toggleMenuGroupOpen(groupName);
+  };
+
+  const isGroupOpen = (groupName) => !!groupOpenState[groupName];
 
   const handleLinkClick = () => {
     if (isMobile) {
@@ -122,6 +157,8 @@ export default function MenuContent({ navigationTree, isMobile }) {
           size="small"
           fullWidth
           placeholder="Search..."
+          name="crcon-search"
+          inputRef={searchInputRef}
           value={searchTerm}
           onChange={(e) => setSearchTerm(e.target.value)}
           sx={{ mb: 1 }}
@@ -132,6 +169,40 @@ export default function MenuContent({ navigationTree, isMobile }) {
                   <SearchIcon fontSize="small" />
                 </InputAdornment>
               ),
+              endAdornment: (
+                <InputAdornment position="end">
+                  <Box
+                    aria-hidden
+                    onMouseDown={(e) => {
+                      // Keep focus in the input when clicking the hint.
+                      e.preventDefault();
+                      searchInputRef.current?.focus?.();
+                    }}
+                    sx={{
+                      display: "inline-flex",
+                      alignItems: "center",
+                      gap: 0.75,
+                      px: 0.75,
+                      py: 0.25,
+                      borderRadius: 1,
+                      border: "1px solid",
+                      borderColor: "divider",
+                      bgcolor: (theme) => theme.palette.background.paper,
+                      color: "text.secondary",
+                      fontSize: 12,
+                      lineHeight: 1,
+                      fontFamily:
+                        'ui-monospace, SFMono-Regular, SF Mono, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+                      letterSpacing: 0.2,
+                      userSelect: "none",
+                      boxShadow: (theme) =>
+                        `inset 0 1px 0 ${theme.palette.action.hover}, inset 0 -1px 0 ${theme.palette.action.selected}`,
+                    }}
+                  >
+                    {keyHintLabel}
+                  </Box>
+                </InputAdornment>
+              ),
             }
           }}
         />
@@ -159,7 +230,14 @@ export default function MenuContent({ navigationTree, isMobile }) {
         {filteredTree
           .filter((group) => "name" in group)
           .map((group) => (
-            <Group key={group.name} groupName={group.name} icon={group.icon}>
+            <Group
+              key={group.name}
+              groupName={group.name}
+              icon={group.icon}
+              open={isGroupOpen(group.name)}
+              forceOpen={!!searchTerm.trim()}
+              onToggle={() => toggleGroup(group.name)}
+            >
               {group.links.map((link) => (
                 <NavigationLink
                   key={link.to}

rcongui/src/hooks/useAppState.js

@@ -14,6 +14,15 @@ export const useAppStore = create(
       toggleWidthMode: () => set({ widthMode: get().widthMode === "xl" ? false : "xl" }),
       openDrawer: true,
       toggleDrawer: () => set({ openDrawer: !get().openDrawer }),
+      // Persist which navigation groups are expanded.
+      groupOpenState: {},
+      toggleMenuGroupOpen: (groupName) =>
+        set((state) => ({
+          groupOpenState: {
+            ...state.groupOpenState,
+            [groupName]: !state.groupOpenState?.[groupName],
+          },
+        })),
     }),
     {
       name: withPrefix("app"),

rcongui/src/stores/app-state.js

@@ -14,6 +14,15 @@ export const useAppStore = create(
       toggleWidthMode: () => set({ widthMode: get().widthMode === "xl" ? false : "xl" }),
       openDrawer: true,
       toggleDrawer: () => set({ openDrawer: !get().openDrawer }),
+      // Persist which navigation groups are expanded.
+      groupOpenState: {},
+      toggleMenuGroupOpen: (groupName) =>
+        set((state) => ({
+          groupOpenState: {
+            ...state.groupOpenState,
+            [groupName]: !state.groupOpenState?.[groupName],
+          },
+        })),
     }),
     {
       name: withPrefix("app"),