Fix: shortcuts not saving properly

src/frontend/src/components/headerComponent/components/menuBar/index.tsx

@@ -20,8 +20,10 @@ import { cn } from "../../../../utils/utils";
 import IconComponent from "../../../genericIconComponent";
 import ShadTooltip from "../../../shadTooltipComponent";
 import { Button } from "../../../ui/button";
+import { useShortcutsStore } from "../../../../stores/shortcuts";
 
 export const MenuBar = ({}: {}): JSX.Element => {
+  const shortcuts = useShortcutsStore((state) => state.shortcuts);
   const addFlow = useFlowsManagerStore((state) => state.addFlow);
   const currentFlow = useFlowsManagerStore((state) => state.currentFlow);
   const setErrorData = useAlertStore((state) => state.setErrorData);
@@ -144,10 +146,12 @@ export const MenuBar = ({}: {}): JSX.Element => {
                 />
               ) : (
                 <span className="absolute right-[1.15rem] top-[0.40em] stroke-2">
-                  Ctrl +{" "}
+                  {
+                    shortcuts.find((s) => s.name.toLowerCase() === "undo")
+                      ?.shortcut
+                  }
                 </span>
               )}
-              <span className="absolute right-2 top-[0.4em]">Z</span>
             </DropdownMenuItem>
             <DropdownMenuItem
               onClick={() => {
@@ -164,10 +168,12 @@ export const MenuBar = ({}: {}): JSX.Element => {
                 />
               ) : (
                 <span className="absolute right-[1.15rem] top-[0.40em] stroke-2">
-                  Ctrl +{" "}
+                  {
+                    shortcuts.find((s) => s.name.toLowerCase() === "redo")
+                      ?.shortcut
+                  }
                 </span>
               )}
-              <span className="absolute right-2 top-[0.4em]">Y</span>
             </DropdownMenuItem>
           </DropdownMenuContent>
         </DropdownMenu>

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

@@ -27,11 +27,13 @@ export default function ToolbarSelectItem({
     <div className={`flex ${style}`} data-testid={dataTestId}>
       <ForwardedIconComponent
         name={icon}
-        className={`relative top-0.5 mr-2 h-4 w-4  ${
+        className={` top-0.5  mr-2  ${icon === "Share3" ? "absolute left-2  top-[0.2em] h-6 w-6" : "h-4 w-4"}   ${
           ping && "animate-pulse text-green-500"
         }`}
       />
-      <span>{value}</span>
+      <span className={`${icon === "Share3" ? "ml-[1.8em]" : " "}`}>
+        {value}
+      </span>
       <span className={`absolute right-2 top-[0.43em] flex `}>
         {hasShift ? (
           <>

src/frontend/src/stores/shortcuts.ts

@@ -39,6 +39,13 @@ export const useShortcutsStore = create<shortcutsStoreType>((set, get) => ({
     if (localStorage.getItem("langflow-shortcuts")) {
       const savedShortcuts = localStorage.getItem("langflow-shortcuts");
       const savedUShortcuts = localStorage.getItem("langflow-UShortcuts");
+      const savedArr = JSON.parse(savedShortcuts!);
+      savedArr.forEach(({ name, shortcut }) => {
+        let shortcutName = name.split(" ")[0].toLowerCase();
+        set({
+          [shortcutName]: shortcut,
+        });
+      });
       get().setShortcuts(
         JSON.parse(savedShortcuts!),
         JSON.parse(savedUShortcuts!),