chore: update shortcut name input

frontend/web/src/components/CreateShortcutDrawer.tsx

@@ -20,6 +20,7 @@ import { useAppSelector } from "@/stores";
 import useLoading from "../hooks/useLoading";
 import { shortcutService } from "../services";
 import Icon from "./Icon";
+import ShortcutNameInput from "./ShortcutNameInput";
 
 interface Props {
   shortcutId?: ShortcutId;
@@ -57,8 +58,9 @@ const CreateShortcutDrawer: React.FC<Props> = (props: Props) => {
   const [showOpenGraphMetadata, setShowOpenGraphMetadata] = useState<boolean>(false);
   const [tag, setTag] = useState<string>("");
   const tagSuggestions = uniq(shortcutList.map((shortcut) => shortcut.tags).flat());
-  const requestState = useLoading(false);
   const isCreating = isUndefined(shortcutId);
+  const loadingState = useLoading(!isCreating);
+  const requestState = useLoading(false);
 
   useEffect(() => {
     if (shortcutId) {
@@ -76,21 +78,26 @@ const CreateShortcutDrawer: React.FC<Props> = (props: Props) => {
           }),
         });
         setTag(shortcut.tags.join(" "));
+        loadingState.setFinish();
       }
     }
   }, [shortcutId]);
 
+  if (loadingState.isLoading) {
+    return;
+  }
+
   const setPartialState = (partialState: Partial<State>) => {
     setState({
       ...state,
       ...partialState,
     });
   };
 
-  const handleNameInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const handleNameChange = (name: string) => {
     setPartialState({
       shortcutCreate: Object.assign(state.shortcutCreate, {
-        name: e.target.value.replace(/\s+/g, "-"),
+        name: name.replace(/\s+/g, "-"),
       }),
     });
   };
@@ -215,20 +222,7 @@ const CreateShortcutDrawer: React.FC<Props> = (props: Props) => {
       <ModalClose />
       <DialogContent className="max-w-full sm:max-w-sm">
         <div className="overflow-y-auto w-full mt-2 px-3 pb-4">
-          <div className="w-full flex flex-col justify-start items-start mb-3">
-            <span className="mb-2">
-              Name <span className="text-red-600">*</span>
-            </span>
-            <div className="relative w-full">
-              <Input
-                className="w-full"
-                type="text"
-                placeholder="An unique name for the shortcut"
-                value={state.shortcutCreate.name}
-                onChange={handleNameInputChange}
-              />
-            </div>
-          </div>
+          <ShortcutNameInput name={state.shortcutCreate.name} onChange={handleNameChange} />
           <div className="w-full flex flex-col justify-start items-start mb-3">
             <span className="mb-2">
               Link <span className="text-red-600">*</span>

frontend/web/src/components/ShortcutNameInput.tsx

@@ -0,0 +1,65 @@
+import { IconButton, Input } from "@mui/joy";
+import classNames from "classnames";
+import { useEffect, useState } from "react";
+import { generateRandomString } from "@/helpers/utils";
+import Icon from "./Icon";
+
+interface Props {
+  name: string;
+  onChange: (name: string) => void;
+}
+
+const ShortcutNameInput = (props: Props) => {
+  const { name, onChange } = props;
+  const [modified, setModified] = useState(false);
+  const [editingName, setEditingName] = useState(name || generateRandomString().toLowerCase());
+
+  useEffect(() => {
+    onChange(editingName);
+  }, [editingName]);
+
+  const handleNameInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (!modified) {
+      return;
+    }
+
+    setEditingName(e.target.value);
+  };
+
+  return (
+    <div className="w-full flex flex-col justify-start items-start mb-3">
+      <div className={classNames("", modified ? "mb-2" : "flex flex-row justify-start items-center")}>
+        <span>Name</span>
+        {modified ? (
+          <span className="text-red-600"> *</span>
+        ) : (
+          <>
+            <span>:</span>
+            <span className="ml-1 font-mono font-medium">{editingName}</span>
+            <div className="ml-1 flex flex-row justify-start items-center">
+              <IconButton size="sm" variant="plain" color="neutral" onClick={() => setModified(true)}>
+                <Icon.Edit className="w-4 h-auto text-gray-500 dark:text-gray-400" />
+              </IconButton>
+              <IconButton size="sm" variant="plain" color="neutral" onClick={() => setEditingName(generateRandomString().toLowerCase())}>
+                <Icon.RefreshCcw className="w-4 h-auto text-gray-500 dark:text-gray-400" />
+              </IconButton>
+            </div>
+          </>
+        )}
+      </div>
+      {modified && (
+        <div className="relative w-full">
+          <Input
+            className="w-full"
+            type="text"
+            placeholder="An unique name for the shortcut"
+            value={editingName}
+            onChange={handleNameInputChange}
+          />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ShortcutNameInput;

frontend/web/src/helpers/utils.ts

@@ -22,3 +22,13 @@ export const getFaviconWithGoogleS2 = (url: string) => {
     return undefined;
   }
 };
+
+export const generateRandomString = () => {
+  const characters = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
+  let randomString = "";
+  for (let i = 0; i < 6; i++) {
+    const randomIndex = Math.floor(Math.random() * characters.length);
+    randomString += characters.charAt(randomIndex);
+  }
+  return randomString;
+};