Refactor: put freeze inside more

src/frontend/src/constants/constants.ts

@@ -804,6 +804,10 @@ export const defaultShortcuts = [
     name: "Update",
     shortcut: `${navigator.userAgent.toUpperCase().includes("MAC") ? "Cmd" : "Ctrl"} + U`,
   },
+  {
+    name: "Freeze",
+    shortcut: `${navigator.userAgent.toUpperCase().includes("MAC") ? "Cmd" : "Ctrl"} + F`,
+  },
 ];
 
 export const unavailableShortcutss = [
@@ -825,6 +829,7 @@ export const unavailableShortcutss = [
   "CTRL + Y",
   "CTRL + J",
   "CTRL + U",
+  "CTRL + F",
 ];
 export const DEFAULT_TABLE_ALERT_MSG = `Oops! It seems there's no data to display right now. Please check back later.`;
 

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

@@ -148,6 +148,20 @@ export default function NodeToolbarComponent({
     downloadNode(flowComponent!);
   }
 
+  function handleFreeze(e: KeyboardEvent) {
+    e.preventDefault();
+    setNode(data.id, (old) => ({
+      ...old,
+      data: {
+        ...old.data,
+        node: {
+          ...old.data.node,
+          frozen: old.data?.node?.frozen ? false : true,
+        },
+      },
+    }));
+  }
+
   const advanced = useShortcutsStore((state) => state.advanced);
   const minimize = useShortcutsStore((state) => state.minimize);
   const share = useShortcutsStore((state) => state.share);
@@ -157,6 +171,7 @@ export default function NodeToolbarComponent({
   const group = useShortcutsStore((state) => state.group);
   const update = useShortcutsStore((state) => state.update);
   const download = useShortcutsStore((state) => state.download);
+  const freeze = useShortcutsStore((state) => state.freeze);
 
   useHotkeys(minimize, handleMinimizeWShortcut);
   useHotkeys(update, handleUpdateWShortcut);
@@ -167,7 +182,7 @@ export default function NodeToolbarComponent({
   useHotkeys(save, handleSaveWShortcut);
   useHotkeys(docs, handleDocsWShortcut);
   useHotkeys(download, handleDownloadWShortcut);
-  useHotkeys("space", handleCodeWShortcut);
+  useHotkeys(freeze, handleFreeze);
 
   const isMinimal = numberOfHandles <= 1;
   const isGroup = data.node?.flow ? true : false;
@@ -233,6 +248,18 @@ export default function NodeToolbarComponent({
         }
         saveComponent(cloneDeep(data), false);
         break;
+      case "freeze":
+        setNode(data.id, (old) => ({
+          ...old,
+          data: {
+            ...old.data,
+            node: {
+              ...old.data.node,
+              frozen: old.data?.node?.frozen ? false : true,
+            },
+          },
+        }));
+        break;
       case "code":
         setOpenModal(!openModal);
         break;
@@ -436,36 +463,6 @@ export default function NodeToolbarComponent({
             </button>
           </ShadTooltip>
 
-          <ShadTooltip content="Freeze" side="top">
-            <button
-              className={classNames(
-                "relative -ml-px inline-flex items-center bg-background px-2 py-2 text-foreground shadow-md ring-1 ring-inset ring-ring  transition-all duration-500 ease-in-out hover:bg-muted focus:z-10",
-              )}
-              onClick={(event) => {
-                event.preventDefault();
-                setNode(data.id, (old) => ({
-                  ...old,
-                  data: {
-                    ...old.data,
-                    node: {
-                      ...old.data.node,
-                      frozen: old.data?.node?.frozen ? false : true,
-                    },
-                  },
-                }));
-              }}
-            >
-              <IconComponent
-                name="Snowflake"
-                className={cn(
-                  "h-4 w-4 transition-all",
-                  // TODO UPDATE THIS COLOR TO BE A VARIABLE
-                  frozen ? "animate-wiggle text-ice" : "",
-                )}
-              />
-            </button>
-          </ShadTooltip>
-
           <Select onValueChange={handleSelectChange} value="">
             <ShadTooltip content="More" side="top">
               <SelectTrigger>
@@ -630,7 +627,18 @@ export default function NodeToolbarComponent({
                   />
                 </SelectItem>
               )}
-
+              <SelectItem value="freeze">
+                <ToolbarSelectItem
+                  shortcut={
+                    shortcuts.find((obj) => obj.name === "Freeze")?.shortcut!
+                  }
+                  isMac={navigator.userAgent.toUpperCase().includes("MAC")}
+                  value={"Freeze"}
+                  icon={"Snowflake"}
+                  dataTestId="group-button-modal"
+                  style={`${frozen ? " text-ice" : ""} transition-all`}
+                />
+              </SelectItem>
               <SelectItem value={"delete"} className="focus:bg-red-400/[.20]">
                 <div className="font-red flex text-status-red">
                   <IconComponent

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

@@ -4,7 +4,7 @@ import { toolbarSelectItemProps } from "../../../../../types/components";
 export default function ToolbarSelectItem({
   value,
   icon,
-  styleObj,
+  style,
   dataTestId,
   ping,
   shortcut,
@@ -24,17 +24,15 @@ export default function ToolbarSelectItem({
   if (!hasShift) shortcutWPlus = filteredShortcut.join("+");
 
   return (
-    <div className="flex" data-testid={dataTestId}>
+    <div className={`flex ${style}`} data-testid={dataTestId}>
       <ForwardedIconComponent
         name={icon}
-        className={`relative top-0.5 mr-2 h-4 w-4 ${styleObj?.iconClasses} ${
+        className={`relative top-0.5 mr-2 h-4 w-4  ${
           ping && "animate-pulse text-green-500"
         }`}
       />
-      <span className={styleObj?.valueClasses}>{value}</span>
-      <span
-        className={`absolute right-2 top-[0.43em] flex ${styleObj?.keyClasses}`}
-      >
+      <span>{value}</span>
+      <span className={`absolute right-2 top-[0.43em] flex `}>
         {hasShift ? (
           <>
             {filteredShortcut[0]}

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

@@ -26,8 +26,6 @@ export default function EditShortcutButton({
   disable?: boolean;
   setSelected: (selected: string[]) => void;
 }): JSX.Element {
-  const isMac = navigator.userAgent.toUpperCase().includes("MAC");
-  console.log(shortcut[0]?.split(" ")[0].toLowerCase());
   let shortcutInitialValue =
     defaultShortcuts.length > 0
       ? defaultShortcuts.find(
@@ -82,7 +80,6 @@ export default function EditShortcutButton({
           fixCombination[0] = "mod";
         }
         const shortcutName = shortcut[0].split(" ")[0].toLowerCase();
-        console.log(shortcutName);
         setUniqueShortcut(shortcutName, fixCombination.join("").toLowerCase());
         console.log(newCombination);
         setShortcuts(newCombination, unavailable);

src/frontend/src/stores/shortcuts.ts

@@ -16,7 +16,7 @@ export const useShortcutsStore = create<shortcutsStoreType>((set, get) => ({
   open: "mod+k",
   advanced: "mod+shift+a",
   minimize: "mod+shift+q",
-  code: "mod+shift+u",
+  code: "space",
   copy: "mod+c",
   duplicate: "mod+d",
   share: "mod+shift+s",
@@ -29,6 +29,7 @@ export const useShortcutsStore = create<shortcutsStoreType>((set, get) => ({
   api: "mod+r",
   update: "mod+u",
   download: "mod+j",
+  freeze: "mod+f",
   updateUniqueShortcut: (name, combination) => {
     set({
       [name]: combination,

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

@@ -781,14 +781,7 @@ export type toolbarSelectItemProps = {
   isMac: boolean;
   value: string;
   icon: string;
-  styleObj?: {
-    iconClasses?: string;
-    commandClasses?: string;
-    shiftClasses?: string;
-    ctrlClasses?: string;
-    keyClasses?: string;
-    valueClasses?: string;
-  };
+  style?: string;
   dataTestId: string;
   ping?: boolean;
   shortcut: string;

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

@@ -39,6 +39,7 @@ export type shortcutsStoreType = {
   delete: string;
   update: string;
   download: string;
+  freeze: string;
   shortcuts: Array<{
     name: string;
     shortcut: string;