Feat: User can change the node shortcuts

src/frontend/src/constants/constants.ts

@@ -791,11 +791,11 @@ export const defaultShortcuts = [
   },
   {
     name: "Minimize",
-    shortcut: "Ctrl + Shift + q"
+    shortcut: "Ctrl + q"
   },
   {
     name: "Code",
-    shortcut: "Ctrl + Shift + c"
+    shortcut: "Ctrl + Shift + u"
   },
   {
     name: "Copy",
@@ -823,4 +823,4 @@ export const defaultShortcuts = [
   },
 ];
 
-export const unavailableShortcutss = ["Ctrl + Shift + a", "Ctrl + Shift + q", "Ctrl + Shift + c", "Ctrl + c", "Ctrl + d", "Ctrl + Shift + s", "Ctrl + Shift + d", "Ctrl + s", "Backspace"];
+export const unavailableShortcutss = ["Ctrl + Shift + a", "Ctrl + q", "Ctrl + Shift + u", "Ctrl + c", "Ctrl + d", "Ctrl + Shift + s", "Ctrl + Shift + d", "Ctrl + s", "Backspace"];

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

@@ -32,6 +32,7 @@ import {
 } from "../../../../utils/reactflowUtils";
 import { classNames } from "../../../../utils/utils";
 import ToolbarSelectItem from "./toolbarSelectItem";
+import { useShortcutsStore } from "../../../../stores/shortcuts";
 
 export default function NodeToolbarComponent({
   data,
@@ -144,14 +145,21 @@ export default function NodeToolbarComponent({
     downloadNode(flowComponent!);
   }
 
-  useHotkeys("mod+q", handleMinimizeWShortcut);
+  const advanced = useShortcutsStore(state => state.advanced);
+  const minimize = useShortcutsStore(state => state.minimize);
+  const share = useShortcutsStore(state => state.share);
+  const save = useShortcutsStore(state => state.save);
+  const docs = useShortcutsStore(state => state.docs);
+  const code = useShortcutsStore(state => state.code);
+
+  useHotkeys(minimize, handleMinimizeWShortcut);
   useHotkeys("mod+u", handleUpdateWShortcut);
   useHotkeys("mod+g", handleGroupWShortcut);
-  useHotkeys("mod+shift+s", handleShareWShortcut);
+  useHotkeys(share, handleShareWShortcut);
-  useHotkeys("mod+shift+u", handleCodeWShortcut);
+  useHotkeys(code, handleCodeWShortcut);
-  useHotkeys("mod+shift+a", handleAdvancedWShortcut);
+  useHotkeys(advanced, handleAdvancedWShortcut);
-  useHotkeys("mod+s", handleSaveWShortcut);
+  useHotkeys(save, handleSaveWShortcut);
-  useHotkeys("mod+shift+d", handleDocsWShortcut);
+  useHotkeys(docs, handleDocsWShortcut);
   useHotkeys("mod+j", handleDownloadWShortcut);
   useHotkeys("space", handleCodeWShortcut);
 

src/frontend/src/pages/SettingsPage/pages/ShortcutsPage/EditShortcutButton/index.tsx

@@ -43,6 +43,8 @@ export default function EditShortcutButton({ children, shortcut, defaultShortcut
     return !unavaliableShortcuts.includes(newCombination);
   }
 
+  const setUniqueShortcut = useShortcutsStore(state => state.updateUniqueShortcut);
+
   function editCombination(): void {
     if (canEditCombination(key)) {
       const newCombination = defaultShortcuts.map((s) => {
@@ -55,6 +57,11 @@ export default function EditShortcutButton({ children, shortcut, defaultShortcut
         if (s === defaultCombination) return s = key;
         return s;
       })
+      const fixCombination = key.split(" ")
+      fixCombination[0] = "mod"
+      const shortcutName = shortcut[0].split(" ")[0].toLowerCase();
+      console.log(shortcutName)
+      setUniqueShortcut(shortcutName, fixCombination.join("").toLowerCase())
       setShortcuts(newCombination, unavailable)
       setOpen(false)
       setSuccessData({title: `${shortcut[0]} shortcut successfully changed`})

src/frontend/src/stores/shortcuts.ts

@@ -8,4 +8,18 @@ export const useShortcutsStore = create<shortcutsStoreType>((set, get) => ({
   setShortcuts: (newShortcuts, unavailable) => {
     set({shortcuts: newShortcuts, unavailableShortcuts: unavailable} );
   },
+  advanced: "mod+shift+a",
+  minimize: "mod+shift+q",
+  code: "mod+shift+u",
+  copy: "mod+c",
+  duplicate: "mod+d",
+  share: "mod+shift+s",
+  docs: "mod+shift+d",
+  save: "mod+s",
+  delete: "backspace",
+  updateUniqueShortcut: (name, combination) => {
+    set({
+      [name]: combination
+    })
+  }
 }));

src/frontend/src/types/store/index.ts

@@ -20,6 +20,16 @@ export type StoreComponentResponse = {
 };
 
 export type shortcutsStoreType = {
+  updateUniqueShortcut: (name: string, combination: string) => void;
+  advanced: string;
+  minimize: string;
+  code: string;
+  copy: string;
+  duplicate: string;
+  share: string;
+  docs:string;
+  save:string;
+  delete: string;
   shortcuts: Array<{
     name: string;
     shortcut: string;