Feat: add shortcut to open code modal (Ctrl shift C)

src/frontend/src/App.tsx

@@ -21,6 +21,7 @@ import { useDarkStore } from "./stores/darkStore";
 import useFlowsManagerStore from "./stores/flowsManagerStore";
 import { useStoreStore } from "./stores/storeStore";
 import { useTypesStore } from "./stores/typesStore";
+import useFlowStore from "./stores/flowStore";
 
 export default function App() {
   const removeFromTempNotificationList = useAlertStore(
@@ -44,6 +45,25 @@ export default function App() {
   const refreshStars = useDarkStore((state) => state.refreshStars);
   const checkHasStore = useStoreStore((state) => state.checkHasStore);
 
+  const handleModalWShortcut = useFlowStore(state => state.handleModalWShortcut);
+  const nodes = useFlowStore(state => state.nodes);
+  
+  useEffect(() => {
+    const onKeyDown = (event: KeyboardEvent) => {
+      const selectedNode = nodes.filter((obj) => obj.selected);
+      if ((event.ctrlKey || event.metaKey) && event.shiftKey && event.key === "C" && selectedNode.length > 0) {
+        event.preventDefault();
+        handleModalWShortcut("code");
+      }
+    };
+  
+    document.addEventListener("keydown", onKeyDown);
+  
+    return () => {
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  }, [handleModalWShortcut, nodes]); 
+
   useEffect(() => {
     refreshStars();
     refreshVersion();

src/frontend/src/CustomNodes/GenericNode/index.tsx

@@ -267,6 +267,7 @@ export default function GenericNode({
           showNode={showNode}
           openAdvancedModal={false}
           onCloseAdvancedModal={() => {}}
+          selected={selected}
         ></NodeToolbarComponent>
       </NodeToolbar>
       <div

src/frontend/src/modals/codeAreaModal/index.tsx

@@ -47,6 +47,27 @@ export default function CodeAreaModal({
     }
   }, []);
 
+  const handleModalWShortcut = useFlowStore((state) => state.handleModalWShortcut) 
+  const openCodeModalWShortcut = useFlowStore(state => state.openCodeModalWShortcut);
+const nodes = useFlowStore(state => state.nodes);
+
+useEffect(() => {
+  const onKeyDown = (event: KeyboardEvent) => {
+    
+    const selectedNode = nodes.filter((obj) => obj.selected);
+    if ((event.ctrlKey || event.metaKey) && event.shiftKey && event.key === "C" && selectedNode.length > 0) {
+      event.preventDefault();
+      setOpen(openCodeModalWShortcut)
+    }
+    
+  }
+  document.addEventListener("keydown", onKeyDown);
+  
+  return () => {
+    document.removeEventListener("keydown", onKeyDown);
+  }
+}, []);
+
   useEffect(() => {
     if (openModal) setOpen(true);
   }, [openModal]);

src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx

@@ -36,6 +36,7 @@ export default function NodeToolbarComponent({
   numberOfHandles,
   showNode,
   name = "code",
+  selected,
   onCloseAdvancedModal,
 }: nodeToolbarPropsType): JSX.Element {
   const nodeLength = Object.keys(data.node!.template).filter(
@@ -89,6 +90,14 @@ export default function NodeToolbarComponent({
   }, [showModalAdvanced]);
   const updateNodeInternals = useUpdateNodeInternals();
 
+  const openCodeModalWShortcut = useFlowStore(state => state.openCodeModalWShortcut);
+  const handleModalWShortcut = useFlowStore(state => state.handleModalWShortcut);
+
+  useEffect(() => {
+    console.log(openCodeModalWShortcut)
+    setOpenModal(openCodeModalWShortcut)
+  }, [openCodeModalWShortcut, handleModalWShortcut])
+
   const setLastCopiedSelection = useFlowStore(state => state.setLastCopiedSelection);
   useEffect(() => {
     setFlowComponent(createFlowComponent(cloneDeep(data), version));

src/frontend/src/stores/flowStore.ts

@@ -48,6 +48,16 @@ const useFlowStore = create<FlowStoreType>((set, get) => ({
   flowPool: {},
   inputs: [],
   outputs: [],
+  openCodeModalWShortcut: false,
+  handleModalWShortcut: ((modal) => {
+    switch (modal) {
+      case "code":
+        set((state) => ({
+          openCodeModalWShortcut: !state.openCodeModalWShortcut,
+        }));
+        break
+    }
+  }),
   setFlowPool: (flowPool) => {
     set({ flowPool });
   },

src/frontend/src/types/components/index.ts

@@ -484,6 +484,7 @@ export type nodeToolbarPropsType = {
   name?: string;
   openAdvancedModal?: boolean;
   onCloseAdvancedModal?: (close: boolean) => void;
+  selected: boolean;
 };
 
 export type parsedDataType = {

src/frontend/src/types/zustand/flow/index.ts

@@ -37,6 +37,8 @@ export type FlowPoolType = {
 };
 
 export type FlowStoreType = {
+  openCodeModalWShortcut: boolean;
+  handleModalWShortcut: (modal: string) => void
   flowPool: FlowPoolType;
   inputs: Array<{ type: string; id: string }>;
   outputs: Array<{ type: string; id: string }>;