Enhance FileMenu component: load project name from localStorage and allow renaming, update sidebar styles with border-radius and background color adjustments.

app/src/components/ui/FileMenu.tsx

@@ -31,6 +31,22 @@ const FileMenu: React.FC = () => {
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, []);
 
+  // project
+  const [projectName, setProjectName] = useState("project 1");
+
+  // Load project name from localStorage on mount
+  useEffect(() => {
+    const savedName = localStorage.getItem("projectName");
+    if (savedName) {
+      setProjectName(savedName);
+    }
+  }, []);
+
+  const handleProjectRename = (newName: string) => {
+    setProjectName(newName);
+    localStorage.setItem("projectName", newName);
+  };
+
   return (
     <button
       className="project-dropdowm-container"
@@ -41,7 +57,7 @@ const FileMenu: React.FC = () => {
         <div className="icon">
           <ProjectIcon />
         </div>
-        <RenameInput value="untitled" />
+        <RenameInput value={projectName} onRename={handleProjectRename} />
       </div>
       <div className="more-options-button">
         <ArrowIcon />

app/src/styles/layout/sidebar.scss

@@ -460,6 +460,8 @@
         color: #666;
         padding: 16px;
         grid-column: 1 / -1;
+        border-radius: #{$border-radius-large};
+        background: var(--background-color);
 
         .products-list {
           padding-top: 1rem;
@@ -779,7 +781,7 @@
   .event-proprties-wrapper {
     position: relative;
     max-height: calc(60vh - (47px - 35px));
-    width: calc(100% - 4px);
+    width: 304px;
     overflow-x: hidden;
 
     .header {