Rename component added and set

src/frontend/src/components/ui/rename-label.tsx

@@ -0,0 +1,84 @@
+import { useState, useEffect, useRef } from "react";
+import { cn } from "../../utils";
+
+export default function RenameLabel(props) {
+  const [internalState, setInternalState] = useState(false);
+  const [isRename, setIsRename] = props.rename
+    ? [props.rename, props.setRename]
+    : [internalState, setInternalState];
+
+  const [myValue, setMyValue] = useState(props.value);
+  useEffect(() => {
+    if (isRename) {
+      document.addEventListener("keydown", (e) => {
+        if (e.key === "Escape") {
+          setIsRename(false);
+          props.setValue("");
+        }
+      });
+      if (inputRef.current) {
+        setTimeout(() => {
+          inputRef.current.focus();
+        }, 100);
+      }
+    }
+    resizeInput();
+  }, [isRename]);
+
+  const inputRef = useRef(null);
+
+  const resizeInput = () => {
+    const input = inputRef.current;
+    if (input) {
+      const span = document.createElement("span");
+      span.style.position = "absolute";
+      span.style.visibility = "hidden";
+      span.style.whiteSpace = "pre";
+      span.style.font = window.getComputedStyle(input).font;
+      span.textContent = input.value;
+
+      document.body.appendChild(span);
+      const textWidth = span.getBoundingClientRect().width;
+      document.body.removeChild(span);
+
+      input.style.width = `${textWidth + 16}px`;
+    }
+  };
+  return (
+    <div>
+      {isRename ? (
+        <input
+          autoFocus
+          ref={inputRef}
+          onInput={resizeInput}
+          className={cn(
+            "px-2 bg-transparent focus:border-none active:outline hover:outline focus:outline outline-gray-300 rounded-md",
+            props.className
+          )}
+          onBlur={() => {
+            setIsRename(false);
+            if (props.value !== "") {
+              props.setValue(myValue);
+            }
+          }}
+          value={myValue}
+          onChange={(e) => {
+            setMyValue(e.target.value);
+          }}
+        />
+      ) : (
+        <div className="flex items-center gap-2">
+          <span
+            className={cn("px-2 text-left truncate", props.className)}
+            onDoubleClick={() => {
+              setIsRename(true);
+              setMyValue(props.value);
+            }}
+          >
+            {props.value}
+          </span>
+        </div>
+      )}
+    </div>
+  );
+}

src/frontend/src/pages/MainPage/index.tsx

@@ -21,6 +21,7 @@ import {
   ChevronDownIcon,
   CodeBracketSquareIcon,
   GlobeAltIcon,
+  PencilSquareIcon,
   PlusIcon,
   TrashIcon,
 } from "@heroicons/react/24/outline";
@@ -47,6 +48,7 @@ import {
   CardHeader,
   CardTitle,
 } from "../../components/ui/card";
+import RenameLabel from "../../components/ui/rename-label";
 
 export default function HomePage() {
   const {
@@ -63,6 +65,7 @@ export default function HomePage() {
   const AlertWidth = 384;
   const { dark, setDark } = useContext(darkContext);
   const [activeTab, setActiveTab] = useState("myflow");
+  const [rename, setRename] = useState(false);
   const { notificationCenter, setNotificationCenter } =
     useContext(alertContext);
   useEffect(() => {
@@ -84,13 +87,26 @@ export default function HomePage() {
             <span className="text-2xl ml-4">⛓️</span>
             <div className="flex gap-2 p-2">
               <TabsTrigger value="myflow" className="flex items-center gap-2">
-                {flows[tabIndex].name}
+                <RenameLabel
+                  value={flows[tabIndex].name}
+                  setValue={() => {}}
+                  rename={rename}
+                  setRename={setRename}
+                />
                 <DropdownMenu>
                   <DropdownMenuTrigger>
                     <ChevronDownIcon className="w-3" />
                   </DropdownMenuTrigger>
                   <DropdownMenuContent className="w-40">
                     <DropdownMenuLabel>Current Flow</DropdownMenuLabel>
+                    <DropdownMenuItem
+                      onClick={() => {
+                        setRename(true);
+                      }}
+                    >
+                      <PencilSquareIcon className="w-4 h-4 mr-2" />
+                      Rename
+                    </DropdownMenuItem>
                     <DropdownMenuItem
                       onClick={() => {
                         openPopUp(<ImportModal />);
@@ -126,7 +142,7 @@ export default function HomePage() {
                       {flows.map((flow, idx) => {
                         return (
                           <DropdownMenuRadioItem value={idx.toString()}>
-                            <span onDoubleClick={() => {}}>{flow.name}</span>
+                            {flow.name}
                           </DropdownMenuRadioItem>
                         );
                       })}