Feat: add shortcut to minimize/expand a node (ctrl Q)

src/frontend/src/components/codeAreaComponent/index.tsx

@@ -16,6 +16,7 @@ export default function CodeAreaComponent({
   readonly = false,
   openModal,
   selected,
+  setOpenModal,
 }: CodeAreaComponentType) {
   const [myValue, setMyValue] = useState(
     typeof value == "string" ? value : JSON.stringify(value)
@@ -36,6 +37,7 @@ export default function CodeAreaComponent({
       <CodeAreaModal
         selected={selected}
         openModal={openModal}
+        setOpenModal={setOpenModal}
         readonly={readonly}
         dynamic={dynamic}
         value={myValue}

src/frontend/src/components/ui/select-custom.tsx

@@ -33,7 +33,7 @@ const SelectContent = React.forwardRef<
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        "relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "relative z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         position === "popper" &&
           "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
         className

src/frontend/src/modals/ConfirmationModal/index.tsx

@@ -61,7 +61,7 @@ function ConfirmationModal({
   );
 
   return (
-    <BaseModal size={size} open={modalOpen} setOpen={setModalOpen}>
+    <BaseModal size={size} open={open} setOpen={setModalOpen}>
       <BaseModal.Trigger>{triggerChild}</BaseModal.Trigger>
       <BaseModal.Header description={titleHeader ?? null}>
         <span className="pr-2">{title}</span>

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

@@ -37,6 +37,7 @@ export default function CodeAreaModal({
   readonly = false,
   openModal,
   selected,
+  setOpenModal,
 }: codeAreaModalPropsType): JSX.Element {
   const [code, setCode] = useState(value);
   const dark = useDarkStore((state) => state.dark);
@@ -49,6 +50,7 @@ export default function CodeAreaModal({
   } | null>(null);
   const [open, setOpen] = useState(false);
   const nodes = useFlowStore((state) => state.nodes);
+  
 
   useEffect(() => {
     // if nodeClass.template has more fields other than code and dynamic is true

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

@@ -209,6 +209,24 @@ export default function NodeToolbarComponent({
 
   useEffect(() => {
     function onKeyDown(event: KeyboardEvent) {
+      if (
+        (selected && isMinimal) &&
+        (event.ctrlKey || event.metaKey) &&
+        event.key === "q"
+      ) {
+        event.preventDefault();
+        setShowNode(data.showNode ?? true ? false : true);
+        unselectAll();
+      }
+      if (
+        selected &&
+        (event.ctrlKey || event.metaKey) &&
+        event.shiftKey &&
+        event.key === "C"
+      ) {
+        event.preventDefault();
+        setOpenModal(state => !state);
+      }
       if (
         selected &&
         (event.ctrlKey || event.metaKey) &&
@@ -270,6 +288,7 @@ export default function NodeToolbarComponent({
                 <div className="hidden">
                     <CodeAreaComponent
                     openModal={openModal}
+                    setOpenModal={setOpenModal}
                     readonly={
                       data.node?.flow && data.node.template[name].dynamic
                         ? true
@@ -494,12 +513,17 @@ export default function NodeToolbarComponent({
               {isMinimal && (
                 <SelectItem value={"show"}>
                   <div className="flex">
-                    <IconComponent
+                  <IconComponent
                       name={showNode ? "Minimize2" : "Maximize2"}
                       className="relative top-0.5 mr-2 h-4 w-4"
                     />
                     {showNode ? "Minimize" : "Expand"}
-                  </div>
+                  <IconComponent
+                    name="Command"
+                    className="absolute right-[1.25rem] top-[0.65em] h-3.5 w-3.5 stroke-2"
+                  ></IconComponent>
+                  <span className="absolute right-2 top-[0.46em]">Q</span>
+                </div>
                 </SelectItem>
               )}
               {isGroup && (

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

@@ -103,6 +103,7 @@ export type PromptAreaComponentType = {
 };
 
 export type CodeAreaComponentType = {
+  setOpenModal?: (bool: boolean) => void;
   disabled: boolean;
   onChange: (value: string[] | string) => void;
   value: string;
@@ -513,6 +514,7 @@ export type modalHeaderType = {
 
 export type codeAreaModalPropsType = {
   setValue: (value: string) => void;
+  setOpenModal?: (bool: boolean) => void;
   value: string;
   nodeClass: APIClassType | undefined;
   setNodeClass: (Class: APIClassType, code?: string) => void | undefined;